38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import { useEffect } from "react";
|
|
|
|
import { useBookerStore } from "@calcom/features/bookings/Booker/store";
|
|
import classNames from "@calcom/lib/classNames";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { Badge } from "@calcom/ui";
|
|
|
|
import type { PublicEvent } from "../../types";
|
|
|
|
export const EventDuration = ({ event }: { event: PublicEvent }) => {
|
|
const { t } = useLocale();
|
|
const [selectedDuration, setSelectedDuration] = useBookerStore((state) => [
|
|
state.selectedDuration,
|
|
state.setSelectedDuration,
|
|
]);
|
|
|
|
// Sets initial value of selected duration to the default duration.
|
|
useEffect(() => {
|
|
// Only store event duration in url if event has multiple durations.
|
|
if (!selectedDuration && event.metadata?.multipleDuration) setSelectedDuration(event.length);
|
|
}, [selectedDuration, setSelectedDuration, event.length, event.metadata?.multipleDuration]);
|
|
|
|
if (!event?.metadata?.multipleDuration) return <>{t("multiple_duration_mins", { count: event.length })}</>;
|
|
|
|
return (
|
|
<div className="flex flex-wrap gap-2">
|
|
{event.metadata.multipleDuration.map((duration) => (
|
|
<Badge
|
|
variant="gray"
|
|
className={classNames(selectedDuration === duration && "bg-inverted text-inverted")}
|
|
size="md"
|
|
key={duration}
|
|
onClick={() => setSelectedDuration(duration)}>{`${duration} ${t("minute_timeUnit")}`}</Badge>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|