import { m } from "framer-motion"; import dynamic from "next/dynamic"; import { shallow } from "zustand/shallow"; import { useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe"; 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 { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML"; import { Calendar, Globe, User } 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 bookingData = useBookerStore((state) => state.bookingData); const rescheduleUid = useBookerStore((state) => state.rescheduleUid); const [seatedEventData, setSeatedEventData] = useBookerStore( (state) => [state.seatedEventData, state.setSeatedEventData], shallow ); const { i18n, t } = useLocale(); const { data: event, isLoading } = useEvent(); const embedUiConfig = useEmbedUiConfig(); const isEmbed = useIsEmbed(); const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false; if (hideEventTypeDetails) { return null; } // If we didn't pick a time slot yet, we load bookingData via SSR so bookingData should be set // Otherwise we load seatedEventData from useBookerStore const bookingSeatAttendeesQty = seatedEventData?.attendees || bookingData?.attendees.length; const eventTotalSeats = seatedEventData?.seatsPerTimeSlot || event?.seatsPerTimeSlot; const isHalfFull = bookingSeatAttendeesQty && eventTotalSeats && bookingSeatAttendeesQty / eventTotalSeats >= 0.5; const isNearlyFull = bookingSeatAttendeesQty && eventTotalSeats && bookingSeatAttendeesQty / eventTotalSeats >= 0.83; const colorClass = isNearlyFull ? "text-rose-600" : isHalfFull ? "text-yellow-500" : "text-bookinghighlight"; return (
{isLoading && ( )} {!isLoading && !!event && ( {event?.title} {event.description && (
)}
{rescheduleUid && bookingData && ( {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)} /> )} {bookerState === "booking" && eventTotalSeats && bookingSeatAttendeesQty ? (

{bookingSeatAttendeesQty ? eventTotalSeats - bookingSeatAttendeesQty : eventTotalSeats} /{" "} {eventTotalSeats}{" "} {t("seats_available", { count: bookingSeatAttendeesQty ? eventTotalSeats - bookingSeatAttendeesQty : eventTotalSeats, })}

) : null}
)}
); };