import { SchedulingType } from "@prisma/client"; import { FC, ReactNode, useEffect } from "react"; import dayjs from "@calcom/dayjs"; import { classNames } from "@calcom/lib"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Icon, Badge } from "@calcom/ui"; import useRouterQuery from "@lib/hooks/useRouterQuery"; import { UserAvatars } from "@components/booking/UserAvatars"; import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML"; import type { AvailabilityPageProps } from "../../pages/[user]/[type]"; import type { BookPageProps } from "../../pages/[user]/book"; import type { DynamicAvailabilityPageProps } from "../../pages/d/[link]/[slug]"; import type { HashLinkPageProps } from "../../pages/d/[link]/book"; import type { AvailabilityTeamPageProps } from "../../pages/team/[slug]/[type]"; import type { TeamBookingPageProps } from "../../pages/team/[slug]/book"; import { AvailableEventLocations } from "./AvailableEventLocations"; interface Props { profile: | AvailabilityPageProps["profile"] | HashLinkPageProps["profile"] | TeamBookingPageProps["profile"] | BookPageProps["profile"] | AvailabilityTeamPageProps["profile"] | DynamicAvailabilityPageProps["profile"]; eventType: | AvailabilityPageProps["eventType"] | HashLinkPageProps["eventType"] | TeamBookingPageProps["eventType"] | BookPageProps["eventType"] | AvailabilityTeamPageProps["eventType"] | DynamicAvailabilityPageProps["eventType"]; isBookingPage?: boolean; children: ReactNode; isMobile?: boolean; rescheduleUid?: string; } const BookingDescription: FC = (props) => { const { profile, eventType, isBookingPage = false, children } = props; const { date: bookingDate } = useRouterQuery("date"); const { t } = useLocale(); const { duration = eventType.length.toString(), setQuery: setDuration } = useRouterQuery("duration"); useEffect(() => { if ( eventType.metadata?.multipleDuration && !eventType.metadata?.multipleDuration?.includes(Number(duration)) ) { setDuration(eventType.length.toString()); } }, [duration, setDuration, eventType.length, eventType.metadata?.multipleDuration]); let requiresConfirmation = eventType?.requiresConfirmation; let requiresConfirmationText = t("requires_confirmation"); const rcThreshold = eventType?.metadata?.requiresConfirmationThreshold; if (rcThreshold) { if (isBookingPage) { if (dayjs(bookingDate).diff(dayjs(), rcThreshold.unit) > rcThreshold.time) { requiresConfirmation = false; } } else { requiresConfirmationText = t("requires_confirmation_threshold", { ...rcThreshold, unit: rcThreshold.unit.slice(0, -1), }); } } return ( <>

{profile.name}

{eventType.title}

{eventType?.description && (
)} {requiresConfirmation && (
{requiresConfirmationText}
)}
{eventType.metadata?.multipleDuration !== undefined ? ( !isBookingPage ? (
    {eventType.metadata.multipleDuration.map((dur, idx) => (
  • { setDuration(dur); }}> {dur} {t("minute_timeUnit")}
  • ))}
) : ( `${duration} ${t("minutes")}` ) ) : ( `${eventType.length} ${t("minutes")}` )}
{children}
); }; export default BookingDescription;