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) => void; seatsPerTimeslot?: number | null; showTimeformatToggle?: boolean; className?: string; }; export const AvailableTimes = ({ date, slots, onTimeSelect, seatsPerTimeslot, showTimeformatToggle = true, className, }: AvailableTimesProps) => { const { t, i18n } = useLocale(); const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]); const hasTimeSlots = !!seatsPerTimeslot; const [layout] = useBookerStore((state) => [state.layout], shallow); const isColumnView = layout === BookerLayouts.COLUMN_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); return ( ); })}
); }; export const AvailableTimesSkeleton = () => (
{/* Random number of elements between 1 and 6. */} {Array.from({ length: Math.floor(Math.random() * 6) + 1 }).map((_, i) => ( ))}
);