@calcom/atoms 2.7.2 → 2.8.1

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

@@ -1,625 +0,0 @@
-// @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("+");
-}