105 lines
3.8 KiB
TypeScript
105 lines
3.8 KiB
TypeScript
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 { Button, SkeletonText } from "@calcom/ui";
|
|
|
|
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;
|
|
|
|
return (
|
|
<div className={classNames("dark:text-white", className)}>
|
|
<header className="bg-muted before:bg-muted sticky top-0 left-0 z-10 mb-8 flex w-full flex-row items-center before:absolute before:-top-12 before:h-24 before:w-full md:flex-col md:items-start lg:flex-row lg:items-center">
|
|
<span className="relative z-10">
|
|
<span className="text-text font-semibold">
|
|
{nameOfDay(i18n.language, Number(date.format("d")), "short")},
|
|
</span>
|
|
<span className="dark:text-darkgray-500 text-gray-500">
|
|
{" "}
|
|
{date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
|
|
</span>
|
|
</span>
|
|
|
|
{showTimeformatToggle && (
|
|
<div className="ml-auto md:ml-0 lg:ml-auto">
|
|
<TimeFormatToggle />
|
|
</div>
|
|
)}
|
|
</header>
|
|
<div className="pb-4">
|
|
{!slots.length && (
|
|
<p className={classNames("text-emphasis", showTimeformatToggle ? "-mt-1 text-lg" : "text-sm")}>
|
|
{t("all_booked_today")}
|
|
</p>
|
|
)}
|
|
|
|
{slots.map((slot) => {
|
|
const bookingFull = !!(hasTimeSlots && slot.attendees && slot.attendees >= seatsPerTimeslot);
|
|
return (
|
|
<Button
|
|
key={slot.time}
|
|
disabled={bookingFull}
|
|
data-testid="time"
|
|
data-time={slot.time}
|
|
onClick={() => onTimeSelect(slot.time)}
|
|
className="mb-3 flex h-auto min-h-[44px] w-full flex-col items-center justify-center py-2"
|
|
color="secondary">
|
|
{dayjs.utc(slot.time).tz(timezone).format(timeFormat)}
|
|
{bookingFull && <p className="text-sm">{t("booking_full")}</p>}
|
|
{hasTimeSlots && !bookingFull && (
|
|
<p className="flex items-center text-sm lowercase">
|
|
<span
|
|
className={classNames(
|
|
slot.attendees && slot.attendees / seatsPerTimeslot >= 0.8
|
|
? "bg-rose-600"
|
|
: slot.attendees && slot.attendees / seatsPerTimeslot >= 0.33
|
|
? "bg-yellow-500"
|
|
: "bg-emerald-400",
|
|
"mr-1 inline-block h-2 w-2 rounded-full"
|
|
)}
|
|
aria-hidden
|
|
/>
|
|
{slot.attendees ? seatsPerTimeslot - slot.attendees : seatsPerTimeslot}{" "}
|
|
{t("seats_available")}
|
|
</p>
|
|
)}
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const AvailableTimesSkeleton = () => (
|
|
<div className="mt-8 flex h-full w-[20%] flex-col only:w-full">
|
|
{/* Random number of elements between 1 and 10. */}
|
|
{Array.from({ length: Math.floor(Math.random() * 10) + 1 }).map((_, i) => (
|
|
<SkeletonText className="mb-4 h-6 w-full" key={i} />
|
|
))}
|
|
</div>
|
|
);
|