import { CalendarX2 } from "lucide-react"; import { shallow } from "zustand/shallow"; import type { Dayjs } from "@calcom/dayjs"; import dayjs from "@calcom/dayjs"; import type { Slots } from "@calcom/features/schedules"; import { classNames } from "@calcom/lib"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { nameOfDay } from "@calcom/lib/weekday"; import { BookerLayouts } from "@calcom/prisma/zod-utils"; import { Button, SkeletonText } from "@calcom/ui"; import { useBookerStore } from "../Booker/store"; import { useTimePreferences } from "../lib"; import { TimeFormatToggle } from "./TimeFormatToggle"; type AvailableTimesProps = { date: Dayjs; slots: Slots[string]; onTimeSelect: ( time: string, attendees: number, seatsPerTimeSlot?: number | null, bookingUid?: string ) => void; seatsPerTimeSlot?: number | null; showTimeFormatToggle?: boolean; className?: string; selectedSlots?: string[]; }; export const AvailableTimes = ({ date, slots, onTimeSelect, seatsPerTimeSlot, showTimeFormatToggle = true, className, selectedSlots, }: AvailableTimesProps) => { const { t, i18n } = useLocale(); const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]); const bookingData = useBookerStore((state) => state.bookingData); const hasTimeSlots = !!seatsPerTimeSlot; const [layout] = useBookerStore((state) => [state.layout], shallow); const isColumnView = layout === BookerLayouts.COLUMN_VIEW; const isMonthView = layout === BookerLayouts.MONTH_VIEW; const isToday = dayjs().isSame(date, "day"); return (
{nameOfDay(i18n.language, Number(date.format("d")), "short")} {date.format("DD")} {showTimeFormatToggle && (
)}
{!slots.length && (

{t("all_booked_today")}

)} {slots.map((slot) => { const bookingFull = !!(hasTimeSlots && slot.attendees && slot.attendees >= seatsPerTimeSlot); const isHalfFull = slot.attendees && seatsPerTimeSlot && slot.attendees / seatsPerTimeSlot >= 0.5; const isNearlyFull = slot.attendees && seatsPerTimeSlot && slot.attendees / seatsPerTimeSlot >= 0.83; const colorClass = isNearlyFull ? "bg-rose-600" : isHalfFull ? "bg-yellow-500" : "bg-emerald-400"; return ( ); })}
); }; export const AvailableTimesSkeleton = () => (
{/* Random number of elements between 1 and 6. */} {Array.from({ length: Math.floor(Math.random() * 6) + 1 }).map((_, i) => ( ))}
);