import type { FC, ReactNode } from "react"; import { useEffect } from "react"; import dayjs from "@calcom/dayjs"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { SchedulingType } from "@calcom/prisma/enums"; import { Badge } from "@calcom/ui"; import { CheckSquare, Clock } from "@calcom/ui/components/icon"; 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, setQuery: setDuration } = useRouterQuery("duration"); useEffect(() => { if ( !duration || isNaN(Number(duration)) || (eventType.metadata?.multipleDuration && !eventType.metadata?.multipleDuration.includes(Number(duration))) ) { setDuration(eventType.length); } }, [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 ( <>

{eventType.team?.parent?.name} {profile.name}

{eventType.title}

{eventType?.description && (
{/* TODO: Fix colors when token is introdcued to DS */}
)} {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;