import { m } from "framer-motion"; import dynamic from "next/dynamic"; import { EventDetails, EventMembers, EventMetaSkeleton, EventTitle } from "@calcom/features/bookings"; import { EventMetaBlock } from "@calcom/features/bookings/components/event-meta/Details"; import { useTimePreferences } from "@calcom/features/bookings/lib"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Calendar, Globe } from "@calcom/ui/components/icon"; import { fadeInUp } from "../config"; import { useBookerStore } from "../store"; import { FromToTime } from "../utils/dates"; import { useEvent } from "../utils/event"; const TimezoneSelect = dynamic(() => import("@calcom/ui").then((mod) => mod.TimezoneSelect), { ssr: false, }); export const EventMeta = () => { const { timezone, setTimezone, timeFormat } = useTimePreferences(); const selectedDuration = useBookerStore((state) => state.selectedDuration); const selectedTimeslot = useBookerStore((state) => state.selectedTimeslot); const bookerState = useBookerStore((state) => state.state); const rescheduleBooking = useBookerStore((state) => state.rescheduleBooking); const { i18n, t } = useLocale(); const { data: event, isLoading } = useEvent(); return (
{isLoading && ( )} {!isLoading && !!event && ( {event?.title}
{rescheduleBooking && ( {t("former_time")}
)} {selectedTimeslot && ( )} {bookerState === "booking" ? ( <>{timezone} ) : ( "!min-h-0 p-0 w-full border-0 bg-transparent focus-within:ring-0", menu: () => "!w-64 max-w-[90vw]", singleValue: () => "text-text py-1", indicatorsContainer: () => "ml-auto", container: () => "max-w-full", }} value={timezone} onChange={(tz) => setTimezone(tz.value)} /> )}
)}
); };