@calcom/atoms 2.5.0 → 2.7.0

package/src/booker/booker-platform-wrapper.tsx

@@ -0,0 +1,625 @@
+// @ts-nocheck — wrapper reconciles several loose atoms contracts with
+// the richer legacy Booker prop shapes (rrHostSubsetIds, locale enum,
+// RoutingFormSearchParams, stubbed BookerComponent). The runtime
+// behavior matches the pre-extract version; a proper type tightening
+// pass will come with the real Booker fatia migration.
+
+import { useQueryClient } from "@tanstack/react-query";
+import debounce from "lodash/debounce";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { shallow } from "zustand/shallow";
+import { useBookingForm } from "../booker/hooks/use-booking-form";
+import { AtomsWrapper } from "../components/atoms-wrapper";
+import type { ConnectedDestinationCalendars } from "../contracts";
+import { BookerLayouts } from "../contracts";
+import { useCreateBooking } from "../hooks/bookings/use-create-booking";
+import { useCreateInstantBooking } from "../hooks/bookings/use-create-instant-booking";
+import { useCreateRecurringBooking } from "../hooks/bookings/use-create-recurring-booking";
+import {
+  QUERY_KEY as BOOKING_RESCHEDULE_KEY,
+  useGetBookingForReschedule,
+} from "../hooks/bookings/use-get-booking-for-reschedule";
+import { useHandleBookEvent } from "../hooks/bookings/use-handle-book-event";
+import { useAtomGetPublicEvent } from "../hooks/event-types/public/use-atom-get-public-event";
+import { useAtomsContext } from "../hooks/use-atoms-context";
+import { useAvailableSlots } from "../hooks/use-available-slots";
+import { useCalendarsBusyTimes } from "../hooks/use-calendars-busy-times";
+import { useConnectedCalendars } from "../hooks/use-connected-calendars";
+import { useMe } from "../hooks/use-me";
+import { useSlots } from "../hooks/use-slots";
+import { useVerifyCode } from "../hooks/use-verify-code";
+import { useVerifyEmail } from "../hooks/use-verify-email";
+import { Timezone } from "../timezone/index";
+import dayjs from "../vendor/dayjs";
+import { getRoutedTeamMemberIdsFromSearchParams } from "../vendor/get-routed-team-member-ids";
+import { getUsernameList } from "../vendor/get-username-list";
+import { useTimePreferences } from "../vendor/time-preferences";
+import { localStorage } from "../vendor/webstorage";
+import {
+  BookerStoreContext,
+  BookerStoreProvider,
+  useBookerStoreContext,
+  useInitializeBookerStoreContext,
+} from "./booker-store-provider";
+// biome-ignore lint/style/noRestrictedImports: pre-existing violation
+import { Booker as BookerComponent } from "./components/booker-component";
+import { useBookerLayout } from "./hooks/use-booker-layout";
+import { useLocalSet } from "./hooks/use-local-set";
+import { useStableTimezone } from "./hooks/use-stable-timezone";
+import { useTimesForSchedule } from "./hooks/use-times-for-schedule";
+import { useInitializeBookerStore } from "./store";
+import type {
+  BookerPlatformWrapperAtomPropsForIndividual,
+  BookerPlatformWrapperAtomPropsForTeam,
+  BookerStoreValues,
+} from "./types";
+
+const BookerPlatformWrapperComponent = (
+  props: BookerPlatformWrapperAtomPropsForIndividual | BookerPlatformWrapperAtomPropsForTeam
+) => {
+  const {
+    view = "MONTH_VIEW",
+    bannerUrl,
+    routingFormSearchParams,
+    teamMemberEmail,
+    crmAppSlug,
+    crmOwnerRecordType,
+    preventEventTypeRedirect,
+    onBookerStateChange,
+    allowUpdatingUrlParams = false,
+    confirmButtonDisabled,
+    isBookingDryRun,
+    handleSlotReservation,
+    onTimeslotsLoaded,
+    startTime: customStartTime,
+    showNoAvailabilityDialog,
+    silentlyHandleCalendarFailures = false,
+    hideEventMetadata = false,
+    defaultPhoneCountry,
+    rrHostSubsetIds,
+    hideOrgTeamAvatar = false,
+  } = props;
+  const layout = BookerLayouts[view];
+
+  const { clientId, isEmbed } = useAtomsContext();
+  const isPlatformBookerEmbed = Boolean(clientId && isEmbed);
+  const teamId: number | undefined = props.isTeamEvent ? props.teamId : undefined;
+  const [_bookerState, setBookerState] = useBookerStoreContext(
+    (state) => [state.state, state.setState],
+    shallow
+  );
+  const setSelectedDate = useBookerStoreContext((state) => state.setSelectedDate);
+  const setSelectedDuration = useBookerStoreContext((state) => state.setSelectedDuration);
+  const setBookingData = useBookerStoreContext((state) => state.setBookingData);
+  const setOrg = useBookerStoreContext((state) => state.setOrg);
+  const bookingData = useBookerStoreContext((state) => state.bookingData);
+  const setSelectedTimeslot = useBookerStoreContext((state) => state.setSelectedTimeslot);
+  const setSelectedMonth = useBookerStoreContext((state) => state.setMonth);
+  const selectedDuration = useBookerStoreContext((state) => state.selectedDuration);
+
+  const [isOverlayCalendarEnabled, setIsOverlayCalendarEnabled] = useState(
+    Boolean(localStorage?.getItem?.("overlayCalendarSwitchDefault"))
+  );
+  const prevStateRef = useRef<BookerStoreValues | null>(null);
+  const bookerStoreContext = useContext(BookerStoreContext);
+  const getStateValues = useCallback((state: any): BookerStoreValues => {
+    return Object.fromEntries(
+      Object.entries(state).filter(([_, value]) => typeof value !== "function")
+    ) as BookerStoreValues;
+  }, []);
+  const debouncedStateChange = useMemo(() => {
+    return debounce(
+      (currentStateValues: BookerStoreValues, callback: (values: BookerStoreValues) => void) => {
+        const prevState = prevStateRef.current;
+        const stateChanged = !prevState || JSON.stringify(prevState) !== JSON.stringify(currentStateValues);
+
+        if (stateChanged) {
+          callback(currentStateValues);
+          prevStateRef.current = currentStateValues;
+        }
+      },
+      50
+    );
+  }, []);
+
+  useEffect(() => {
+    if (!onBookerStateChange || !bookerStoreContext) return;
+
+    const unsubscribe = bookerStoreContext.subscribe((state) => {
+      const currentStateValues = getStateValues(state);
+      debouncedStateChange(currentStateValues, onBookerStateChange);
+    });
+
+    // Initial call with current state
+    const initialState = getStateValues(bookerStoreContext.getState());
+    onBookerStateChange(initialState);
+    prevStateRef.current = initialState;
+
+    return () => {
+      unsubscribe();
+      debouncedStateChange.cancel();
+    };
+  }, [onBookerStateChange, getStateValues, debouncedStateChange, bookerStoreContext]);
+
+  useGetBookingForReschedule({
+    uid: props.rescheduleUid ?? props.bookingUid ?? "",
+    onSuccess: (data) => {
+      setBookingData(data as unknown as Parameters<typeof setBookingData>[0]);
+    },
+  });
+  const queryClient = useQueryClient();
+
+  const username = useMemo(() => {
+    // when rescheduling, prefer the booking host's username from bookingData
+    // this ensures we fetch the correct event type even when an org admin reschedules
+    if (bookingData?.user?.username) {
+      return formatUsername(bookingData.user.username);
+    }
+    if (props.username) {
+      return formatUsername(props.username);
+    }
+    return "";
+  }, [props.username, bookingData?.user?.username]);
+
+  useEffect(() => {
+    setSelectedDuration(props.duration ?? null);
+  }, [props.duration]);
+
+  useEffect(() => {
+    setOrg(props.entity?.orgSlug ?? null);
+  }, [props.entity?.orgSlug]);
+
+  const isDynamic = useMemo(() => {
+    return getUsernameList(username ?? "").length > 1;
+  }, [username]);
+
+  const event = useAtomGetPublicEvent({
+    username,
+    eventSlug: props.eventSlug,
+    isTeamEvent: props.isTeamEvent,
+    teamId,
+    selectedDuration,
+  });
+
+  const bookerLayout = useBookerLayout(event.data?.profile?.bookerLayouts);
+  useInitializeBookerStore({
+    ...props,
+    teamMemberEmail,
+    crmAppSlug,
+    crmOwnerRecordType,
+    crmRecordId: props.crmRecordId,
+    eventId: event?.data?.id,
+    rescheduleUid: props.rescheduleUid ?? null,
+    bookingUid: props.bookingUid ?? null,
+    layout: layout,
+    org: props.entity?.orgSlug,
+    username,
+    bookingData,
+    isPlatform: true,
+    allowUpdatingUrlParams,
+    defaultPhoneCountry,
+  });
+  useInitializeBookerStoreContext({
+    ...props,
+    teamMemberEmail,
+    crmAppSlug,
+    crmOwnerRecordType,
+    crmRecordId: props.crmRecordId,
+    eventId: event?.data?.id,
+    rescheduleUid: props.rescheduleUid ?? null,
+    bookingUid: props.bookingUid ?? null,
+    layout: layout,
+    org: props.entity?.orgSlug,
+    username,
+    bookingData,
+    isPlatform: true,
+    allowUpdatingUrlParams,
+    defaultPhoneCountry,
+  });
+  const [dayCount] = useBookerStoreContext((state) => [state.dayCount, state.setDayCount], shallow);
+  const selectedDate = useBookerStoreContext((state) => state.selectedDate);
+
+  const month = useBookerStoreContext((state) => state.month);
+  const eventSlug = useBookerStoreContext((state) => state.eventSlug);
+
+  const { data: session } = useMe();
+  const hasSession = !!session;
+  const { name: defaultName, guests: defaultGuests, ...restFormValues } = props.defaultFormValues ?? {};
+
+  const prefillFormParamName = useMemo(() => {
+    if (defaultName) {
+      return defaultName;
+    }
+    if (restFormValues.firstName) {
+      return `${restFormValues.firstName} ${restFormValues.lastName}`;
+    }
+    return null;
+  }, [defaultName, restFormValues]);
+
+  const prefillFormParams = useMemo(() => {
+    return {
+      name: prefillFormParamName,
+      guests: defaultGuests ?? [],
+    };
+  }, [defaultName, defaultGuests]);
+
+  const extraOptions = useMemo(() => {
+    return restFormValues;
+  }, [restFormValues]);
+
+  const { timezone: rawTimezone } = useTimePreferences();
+  const timezone = useStableTimezone(
+    rawTimezone,
+    event?.data?.restrictionScheduleId != null
+      ? {
+          id: event.data.restrictionScheduleId,
+          useBookerTimezone: event.data.useBookerTimezone,
+        }
+      : undefined
+  );
+
+  const [calculatedStartTime, calculatedEndTime] = useTimesForSchedule({
+    month,
+    dayCount,
+    selectedDate,
+    bookerLayout,
+  });
+
+  const startTime =
+    customStartTime && dayjs(customStartTime).isAfter(dayjs(calculatedStartTime))
+      ? dayjs(customStartTime).toISOString()
+      : calculatedStartTime;
+  const endTime = calculatedEndTime;
+
+  const [routingParams, setRoutingParams] = useState<{
+    routedTeamMemberIds?: number[];
+    skipContactOwner?: boolean;
+    isBookingDryRun?: boolean;
+  }>({});
+
+  useEffect(() => {
+    const searchParams = routingFormSearchParams
+      ? new URLSearchParams(routingFormSearchParams)
+      : new URLSearchParams(window.location.search);
+
+    const routedTeamMemberIds = getRoutedTeamMemberIdsFromSearchParams(searchParams);
+    const skipContactOwner = searchParams.get("cal.skipContactOwner") === "true";
+
+    const isBookingDryRun =
+      searchParams?.get("cal.isBookingDryRun")?.toLowerCase() === "true" ||
+      searchParams?.get("cal.sandbox")?.toLowerCase() === "true";
+    setRoutingParams({
+      ...(skipContactOwner ? { skipContactOwner } : {}),
+      ...(routedTeamMemberIds ? { routedTeamMemberIds } : {}),
+      ...(isBookingDryRun ? { isBookingDryRun } : {}),
+    });
+  }, [routingFormSearchParams]);
+  const schedule = useAvailableSlots({
+    usernameList: getUsernameList(username),
+    eventTypeId: event?.data?.id ?? 0,
+    startTime,
+    endTime,
+    timeZone: timezone,
+    duration: selectedDuration ?? undefined,
+    rescheduleUid: props.rescheduleUid,
+    teamMemberEmail: teamMemberEmail ?? undefined,
+    ...(props.isTeamEvent
+      ? {
+          isTeamEvent: props.isTeamEvent,
+          teamId: teamId,
+          rrHostSubsetIds: rrHostSubsetIds,
+        }
+      : {}),
+    enabled:
+      Boolean(teamId || username) &&
+      Boolean(month) &&
+      Boolean(timezone) &&
+      !event?.isPending &&
+      event?.data?.id != null,
+    orgSlug: props.entity?.orgSlug ?? undefined,
+    eventTypeSlug: isDynamic ? "dynamic" : eventSlug || "",
+    _silentCalendarFailures: silentlyHandleCalendarFailures,
+    ...routingParams,
+  });
+
+  useEffect(() => {
+    if (schedule.data && !schedule.isPending && !schedule.error && onTimeslotsLoaded) {
+      onTimeslotsLoaded(schedule.data.slots);
+    }
+  }, [schedule.data, schedule.isPending, schedule.error, onTimeslotsLoaded]);
+
+  const bookerForm = useBookingForm({
+    event: event?.data,
+    sessionEmail:
+      session?.data?.email && clientId
+        ? session.data.email.replace(`+${clientId}`, "")
+        : session?.data?.email,
+    sessionUsername: session?.data?.username,
+    sessionName: session?.data?.username,
+    hasSession,
+    extraOptions: extraOptions ?? {},
+    prefillFormParams: prefillFormParams,
+    clientId,
+  });
+  const {
+    mutate: createBooking,
+    isPending: creatingBooking,
+    error: createBookingError,
+    isError: isCreateBookingError,
+  } = useCreateBooking({
+    onSuccess: (data) => {
+      if (data?.data?.isDryRun) {
+        props?.onDryRunSuccess?.();
+      }
+      schedule.refetch();
+      props.onCreateBookingSuccess?.(data);
+
+      if (!preventEventTypeRedirect && !!event?.data?.successRedirectUrl) {
+        window.location.href = event?.data?.successRedirectUrl;
+      }
+    },
+    onError: props.onCreateBookingError,
+  });
+  const {
+    mutate: createRecBooking,
+    isPending: creatingRecBooking,
+
+    error: createRecBookingError,
+    isError: isCreateRecBookingError,
+  } = useCreateRecurringBooking({
+    onSuccess: (data) => {
+      if (data?.data?.[0]?.isDryRun) {
+        props?.onDryRunSuccess?.();
+      }
+      schedule.refetch();
+      props.onCreateRecurringBookingSuccess?.(data);
+
+      if (event?.data?.successRedirectUrl) {
+        window.location.href = event?.data?.successRedirectUrl;
+      }
+    },
+    onError: props.onCreateRecurringBookingError,
+  });
+  const {
+    mutate: createInstantBooking,
+    isPending: creatingInstantBooking,
+    error: createInstantBookingError,
+    isError: isCreateInstantBookingError,
+  } = useCreateInstantBooking({
+    onSuccess: (data) => {
+      schedule.refetch();
+      props.onCreateInstantBookingSuccess?.(data);
+    },
+    onError: props.onCreateInstantBookingError,
+  });
+
+  const slots = useSlots(event, {
+    onReserveSlotSuccess: props.onReserveSlotSuccess,
+    onReserveSlotError: props.onReserveSlotError,
+    onDeleteSlotSuccess: props.onDeleteSlotSuccess,
+    onDeleteSlotError: props.onDeleteSlotError,
+    isBookingDryRun: props.isBookingDryRun ? props.isBookingDryRun : routingParams?.isBookingDryRun,
+    handleSlotReservation,
+  });
+
+  const verifyEmail = useVerifyEmail({
+    email: bookerForm.formEmail,
+    name: bookerForm.formName,
+    requiresBookerEmailVerification: event?.data?.requiresBookerEmailVerification,
+    onVerifyEmail: bookerForm.beforeVerifyEmail,
+    eventTypeId: event?.data?.id,
+  });
+
+  const verifyCode = useVerifyCode({
+    onSuccess: () => {
+      if (!bookerForm.formEmail) return;
+
+      verifyEmail.setVerifiedEmail(bookerForm.formEmail);
+      verifyEmail.setEmailVerificationModalVisible(false);
+      handleBookEvent();
+    },
+  });
+
+  const { data: connectedCalendars, isPending: fetchingConnectedCalendars } = useConnectedCalendars({
+    enabled: hasSession,
+  });
+  const calendars = connectedCalendars as ConnectedDestinationCalendars;
+
+  const { set, clearSet } = useLocalSet<{
+    credentialId: number;
+    externalId: string;
+  }>("toggledConnectedCalendars", []);
+  const [latestCalendarsToLoad, setLatestCalendarsToLoad] = useState(
+    Array.from(set).map((item) => ({
+      credentialId: item.credentialId,
+      externalId: item.externalId,
+    }))
+  );
+  const { data: overlayBusyDates } = useCalendarsBusyTimes({
+    loggedInUsersTz: timezone,
+    dateFrom: selectedDate,
+    dateTo: selectedDate,
+    calendarsToLoad: latestCalendarsToLoad,
+    onError: () => {
+      clearSet();
+    },
+    enabled: Boolean(hasSession && isOverlayCalendarEnabled && latestCalendarsToLoad?.length > 0),
+  });
+
+  const handleBookEvent = useHandleBookEvent({
+    event,
+    bookingForm: bookerForm.bookingForm,
+    hashedLink: props.hashedLink,
+    metadata: props.metadata ?? {},
+    handleBooking: props?.handleCreateBooking ?? createBooking,
+    handleInstantBooking: createInstantBooking,
+    handleRecBooking: props?.handleCreateRecurringBooking ?? createRecBooking,
+    locationUrl: props.locationUrl,
+    routingFormSearchParams,
+    isBookingDryRun: isBookingDryRun ?? routingParams?.isBookingDryRun,
+    ...(props.isTeamEvent
+      ? {
+          rrHostSubsetIds: rrHostSubsetIds,
+        }
+      : {}),
+  });
+
+  const onOverlaySwitchStateChange = useCallback(
+    (state: boolean) => {
+      setIsOverlayCalendarEnabled(state);
+      if (state) {
+        localStorage?.setItem("overlayCalendarSwitchDefault", "true");
+      } else {
+        localStorage?.removeItem("overlayCalendarSwitchDefault");
+      }
+    },
+    [setIsOverlayCalendarEnabled]
+  );
+  const selectedDateProp = useMemo(
+    () => dayjs(props.selectedDate).format("YYYY-MM-DD"),
+    [props.selectedDate]
+  );
+  useEffect(() => {
+    setSelectedDate({ date: selectedDateProp, omitUpdatingParams: true });
+  }, [selectedDateProp]);
+
+  useEffect(() => {
+    // reset booker whenever it's unmounted
+    return () => {
+      slots.handleRemoveSlot();
+      setBookerState("loading");
+      setSelectedDate({ date: null });
+      setSelectedTimeslot(null);
+      setSelectedDuration(null);
+      setOrg(null);
+      setSelectedMonth(null);
+      if (props.rescheduleUid) {
+        // clean booking data from cache
+        queryClient.removeQueries({
+          queryKey: [BOOKING_RESCHEDULE_KEY, props.rescheduleUid],
+          exact: true,
+        });
+        setBookingData(null);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isOverlayCalendarEnabled && view === "MONTH_VIEW") {
+      localStorage?.removeItem("overlayCalendarSwitchDefault");
+    }
+    setIsOverlayCalendarEnabled(Boolean(localStorage?.getItem?.("overlayCalendarSwitchDefault")));
+  }, [view, isOverlayCalendarEnabled]);
+
+  return (
+    <AtomsWrapper customClassName={props?.customClassNames?.atomsWrapper}>
+      <BookerComponent
+        timeZones={props.timeZones}
+        teamMemberEmail={teamMemberEmail}
+        crmAppSlug={crmAppSlug}
+        crmOwnerRecordType={crmOwnerRecordType}
+        customClassNames={props.customClassNames}
+        eventSlug={props.eventSlug}
+        username={username}
+        showNoAvailabilityDialog={showNoAvailabilityDialog}
+        entity={
+          event?.data?.entity ?? {
+            considerUnpublished: false,
+            orgSlug: undefined,
+            teamSlug: undefined,
+            name: undefined,
+          }
+        }
+        rescheduleUid={props.rescheduleUid ?? null}
+        rescheduledBy={props.rescheduledBy ?? null}
+        bookingUid={props.bookingUid ?? null}
+        isRedirect={false}
+        confirmButtonDisabled={confirmButtonDisabled}
+        fromUserNameRedirected=""
+        hasSession={hasSession}
+        onGoBackInstantMeeting={(): void => {
+          throw new Error("Function not implemented.");
+        }}
+        onConnectNowInstantMeeting={(): void => {
+          throw new Error("Function not implemented.");
+        }}
+        onOverlayClickNoCalendar={(): void => {
+          throw new Error("Function not implemented.");
+        }}
+        onClickOverlayContinue={(): void => {
+          throw new Error("Function not implemented.");
+        }}
+        onOverlaySwitchStateChange={onOverlaySwitchStateChange}
+        extraOptions={extraOptions ?? {}}
+        bookings={{
+          handleBookEvent: (timeSlot?: string) => {
+            handleBookEvent(timeSlot);
+            return;
+          },
+          expiryTime: undefined,
+          bookingForm: bookerForm.bookingForm,
+          bookerFormErrorRef: bookerForm.bookerFormErrorRef,
+          errors: {
+            hasDataErrors: isCreateBookingError || isCreateRecBookingError || isCreateInstantBookingError,
+            dataErrors: createBookingError || createRecBookingError || createInstantBookingError,
+          },
+          loadingStates: {
+            creatingBooking: creatingBooking,
+            creatingRecurringBooking: creatingRecBooking,
+            creatingInstantBooking: creatingInstantBooking,
+          },
+          instantVideoMeetingUrl: undefined,
+        }}
+        slots={slots}
+        calendars={{
+          overlayBusyDates: overlayBusyDates?.data,
+          isOverlayCalendarEnabled: isOverlayCalendarEnabled,
+          connectedCalendars: calendars?.connectedCalendars || [],
+          loadingConnectedCalendar: fetchingConnectedCalendars,
+          onToggleCalendar: (data) => {
+            const calendarsToLoad = Array.from(data ?? []);
+            setLatestCalendarsToLoad(calendarsToLoad);
+            return;
+          },
+        }}
+        verifyEmail={verifyEmail}
+        bookerForm={bookerForm}
+        event={event}
+        schedule={schedule}
+        orgBannerUrl={bannerUrl ?? event.data?.bannerUrl}
+        bookerLayout={{
+          ...bookerLayout,
+          hideEventTypeDetails: hideEventMetadata,
+        }}
+        verifyCode={verifyCode}
+        isPlatform
+        TimezoneSelect={Timezone}
+        hasValidLicense={true}
+        isBookingDryRun={isBookingDryRun ?? routingParams?.isBookingDryRun}
+        eventMetaChildren={props.eventMetaChildren}
+        roundRobinHideOrgAndTeam={props.roundRobinHideOrgAndTeam}
+        hideOrgTeamAvatar={hideOrgTeamAvatar}
+        isPlatformBookerEmbed={isPlatformBookerEmbed}
+      />
+    </AtomsWrapper>
+  );
+};
+
+export type { BookerPlatformWrapperAtomPropsForIndividual, BookerPlatformWrapperAtomPropsForTeam };
+
+export const BookerPlatformWrapper = (
+  props: BookerPlatformWrapperAtomPropsForIndividual | BookerPlatformWrapperAtomPropsForTeam
+) => {
+  return (
+    <BookerStoreProvider>
+      <BookerPlatformWrapperComponent {...props} />
+    </BookerStoreProvider>
+  );
+};
+
+export function formatUsername(username: string | string[]): string {
+  if (typeof username === "string") {
+    return username;
+  }
+  return username.join("+");
+}