import Link from "next/link"; import { useRouter } from "next/router"; import { FC, useEffect, useState } from "react"; import dayjs, { Dayjs } from "@calcom/dayjs"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { TimeFormat } from "@calcom/lib/timeFormat"; import { nameOfDay } from "@calcom/lib/weekday"; import type { Slot } from "@calcom/trpc/server/routers/viewer/slots"; import { SkeletonContainer, SkeletonText, ToggleGroup } from "@calcom/ui"; import classNames from "@lib/classNames"; import { timeZone } from "@lib/clock"; type AvailableTimesProps = { timeFormat: TimeFormat; onTimeFormatChange: (is24Hour: boolean) => void; eventTypeId: number; recurringCount: number | undefined; eventTypeSlug: string; date?: Dayjs; seatsPerTimeSlot?: number | null; slots?: Slot[]; isLoading: boolean; ethSignature?: string; }; const AvailableTimes: FC = ({ slots = [], isLoading, date, eventTypeId, eventTypeSlug, recurringCount, timeFormat, onTimeFormatChange, seatsPerTimeSlot, ethSignature, }) => { const { t, i18n } = useLocale(); const router = useRouter(); const { rescheduleUid } = router.query; const [brand, setBrand] = useState("#292929"); useEffect(() => { setBrand(getComputedStyle(document.documentElement).getPropertyValue("--brand-color").trim()); }, []); if (!date) return null; return (
{nameOfDay(i18n.language, Number(date.format("d")), "short")} , {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
onTimeFormatChange(timeFormat === "24")} defaultValue={timeFormat === TimeFormat.TWELVE_HOUR ? "12" : "24"} options={[ { value: "12", label: t("12_hour_short") }, { value: "24", label: t("24_hour_short") }, ]} />
{slots.length > 0 && slots.map((slot) => { type BookingURL = { pathname: string; query: Record; }; const bookingUrl: BookingURL = { pathname: router.pathname.endsWith("/embed") ? "../book" : "book", query: { ...router.query, date: dayjs.utc(slot.time).tz(timeZone()).format(), type: eventTypeId, slug: eventTypeSlug, /** Treat as recurring only when a count exist and it's not a rescheduling workflow */ count: recurringCount && !rescheduleUid ? recurringCount : undefined, ...(ethSignature ? { ethSignature } : {}), }, }; if (rescheduleUid) { bookingUrl.query.rescheduleUid = rescheduleUid as string; } // If event already has an attendee add booking id if (slot.bookingUid) { bookingUrl.query.bookingUid = slot.bookingUid; } return (
{/* ^ data-slot-owner is helpful in debugging and used to identify the owners of the slot. Owners are the users which have the timeslot in their schedule. It doesn't consider if a user has that timeslot booked */} {/* Current there is no way to disable Next.js Links */} {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
{dayjs(slot.time).tz(timeZone()).format(timeFormat)} {!!seatsPerTimeSlot &&

{t("booking_full")}

}
) : ( {dayjs(slot.time).tz(timeZone()).format(timeFormat)} {!!seatsPerTimeSlot && (

= 0.8 ? "text-rose-600" : slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.33 ? "text-yellow-500" : "text-emerald-400" } text-sm`}> {slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot} /{" "} {seatsPerTimeSlot} {t("seats_available")}

)} )}
); })} {!isLoading && !slots.length && (

{t("all_booked_today")}

)} {isLoading && !slots.length && ( <> )}
); }; AvailableTimes.displayName = "AvailableTimes"; export default AvailableTimes;