@calcom/atoms 2.7.2 → 2.8.1

package/src/booker/components/booker-component.tsx

@@ -1,699 +0,0 @@
-// @ts-nocheck — loose BookerProps/WrappedBookerProps contract; full typing in SDK wrapper layer
-"use client";
-
-import { AnimatePresence, LazyMotion, m } from "framer-motion";
-import { useSearchParams } from "next/navigation";
-import { useEffect, useMemo, useRef } from "react";
-import StickyBox from "react-sticky-box";
-import { Toaster } from "sonner";
-import { shallow } from "zustand/shallow";
-import { DatePicker } from "../../calendar-view/components/date-picker";
-import { LargeCalendar } from "../../calendar-view/components/large-calendar";
-import { Dialog, DialogContent } from "../../components/ui/dialog";
-import {
-  CLOUDFLARE_SITE_ID,
-  CLOUDFLARE_USE_TURNSTILE_IN_BOOKER,
-  PUBLIC_INVALIDATE_AVAILABLE_SLOTS_ON_BOOKING_FORM,
-} from "../../constants/app";
-import { BookerLayouts } from "../../contracts/booker";
-import { cn } from "../../lib/utils";
-import dayjs from "../../vendor/dayjs";
-import { getQueryParam } from "../../vendor/query-param";
-import { scrollIntoViewSmooth } from "../../vendor/scroll";
-import { useBookerStoreContext } from "../booker-store-provider";
-import { fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "../config";
-import framerFeatures from "../framer-features";
-import { updateEmbedBookerState, useEmbedUiConfig } from "../hooks/embed-stubs";
-import { useIsQuickAvailabilityCheckFeatureEnabled } from "../hooks/use-is-quick-availability-check-feature-enabled";
-import { useNonEmptyScheduleDays } from "../hooks/use-non-empty-schedule-days";
-import { useSkipConfirmStep } from "../hooks/use-skip-confirm-step";
-import { isBookingDryRun } from "../utils/is-booking-dry-run";
-import { isTimeSlotAvailable } from "../utils/is-timeslot-available";
-
-import { AvailableTimeSlots } from "./available-time-slots";
-import { BookEventForm } from "./book-event-form/book-event-form";
-import { BookFormAsModal } from "./book-event-form/book-form-as-modal";
-import { DryRunMessage } from "./dry-run-message";
-import { EventMeta } from "./event-meta";
-import { ExternalRedirectInterstitial } from "./external-redirect-interstitial";
-import { HavingTroubleFindingTime } from "./having-trouble-finding-time";
-import { Header } from "./header";
-import { InstantBooking } from "./instant-booking";
-import { OverlayCalendar } from "./overlay-calendar/overlay-calendar";
-import { RedirectToInstantMeetingModal } from "./redirect-to-instant-meeting-modal";
-import { BookerSection } from "./section";
-import { SlotSelectionModalHeader } from "./slot-selection-modal-header";
-import { NotFound } from "./unavailable";
-import { UnpublishedEntity } from "./unpublished-entity";
-import { VerifyCodeDialog } from "./verify-code-dialog";
-
-const BookerComponentInner = ({
-  username,
-  eventSlug,
-  hideBranding = false,
-  entity,
-  isInstantMeeting = false,
-  onGoBackInstantMeeting,
-  onConnectNowInstantMeeting,
-  onOverlayClickNoCalendar,
-  onClickOverlayContinue,
-  onOverlaySwitchStateChange,
-  sessionUsername,
-  rescheduleUid,
-  hasSession,
-  extraOptions,
-  bookings,
-  verifyEmail,
-  slots,
-  calendars,
-  bookerForm,
-  event,
-  bookerLayout,
-  schedule,
-  verifyCode,
-  isPlatform,
-  orgBannerUrl,
-  customClassNames,
-  areInstantMeetingParametersSet = false,
-  userLocale,
-  hasValidLicense,
-  isBookingDryRun: isBookingDryRunProp,
-  hashedLink,
-  confirmButtonDisabled,
-  timeZones,
-  eventMetaChildren,
-  roundRobinHideOrgAndTeam,
-  hideOrgTeamAvatar,
-  showNoAvailabilityDialog,
-  TimezoneSelect,
-  isPlatformBookerEmbed = false,
-  renderCaptchaElement,
-  renderTagManager,
-}) => {
-  const searchParams = useSearchParams();
-  const [bookerState, setBookerState] = useBookerStoreContext(
-    (state) => [state.state, state.setState],
-    shallow
-  );
-
-  const selectedDate = useBookerStoreContext((state) => state.selectedDate);
-
-  const [isSlotSelectionModalVisible, setIsSlotSelectionModalVisible] = useBookerStoreContext(
-    (state) => [state.isSlotSelectionModalVisible, state.setIsSlotSelectionModalVisible],
-    shallow
-  );
-
-  const {
-    shouldShowFormInDialog,
-    hasDarkBackground,
-    extraDays,
-    columnViewExtraDays,
-    isMobile,
-    layout,
-    hideEventTypeDetails,
-    isEmbed,
-    bookerLayouts,
-    slotsViewOnSmallScreen,
-  } = bookerLayout;
-
-  const [seatedEventData, setSeatedEventData] = useBookerStoreContext(
-    (state) => [state.seatedEventData, state.setSeatedEventData],
-    shallow
-  );
-  const { selectedTimeslot, setSelectedTimeslot, allSelectedTimeslots } = slots;
-  const [dayCount, setDayCount] = useBookerStoreContext(
-    (state) => [state.dayCount, state.setDayCount],
-    shallow
-  );
-
-  const nonEmptyScheduleDays = useNonEmptyScheduleDays(schedule?.data?.slots).filter(
-    (slot) => dayjs(selectedDate).diff(slot, "day") <= 0
-  );
-
-  const totalWeekDays = 7;
-  const addonDays =
-    nonEmptyScheduleDays.length < extraDays
-      ? (extraDays - nonEmptyScheduleDays.length + 1) * totalWeekDays
-      : 0;
-  const availableSlots = nonEmptyScheduleDays.slice(0, extraDays + 1);
-  if (nonEmptyScheduleDays.length !== 0) {
-    const slotIndex =
-      availableSlots.length === extraDays + 1 ? availableSlots.length - 2 : availableSlots.length - 1;
-    columnViewExtraDays.current =
-      Math.abs(dayjs(selectedDate).diff(availableSlots[slotIndex], "day")) + addonDays;
-  }
-
-  const nextSlots =
-    Math.abs(dayjs(selectedDate).diff(availableSlots[availableSlots.length - 1], "day")) + addonDays;
-
-  const animationScope = useBookerResizeAnimation(layout, bookerState);
-
-  const timeslotsRef = useRef<HTMLDivElement>(null);
-  const isQuickAvailabilityCheckFeatureEnabled = useIsQuickAvailabilityCheckFeatureEnabled();
-
-  const StickyOnDesktop = isMobile ? "div" : StickyBox;
-
-  const eventMetaClassNames = useMemo(
-    () => ({
-      eventMetaContainer: customClassNames?.eventMetaCustomClassNames?.eventMetaContainer,
-      eventMetaTitle: customClassNames?.eventMetaCustomClassNames?.eventMetaTitle,
-      eventMetaTimezoneSelect: customClassNames?.eventMetaCustomClassNames?.eventMetaTimezoneSelect,
-    }),
-    [
-      customClassNames?.eventMetaCustomClassNames?.eventMetaContainer,
-      customClassNames?.eventMetaCustomClassNames?.eventMetaTitle,
-      customClassNames?.eventMetaCustomClassNames?.eventMetaTimezoneSelect,
-    ]
-  );
-
-  const { bookerFormErrorRef, key, formEmail, bookingForm, errors: formErrors } = bookerForm;
-
-  const {
-    handleBookEvent,
-    errors,
-    loadingStates,
-    expiryTime,
-    instantVideoMeetingUrl,
-    instantConnectCooldownMs,
-    bookingUid,
-    pendingRedirect,
-    confirmRedirect,
-    goBackToSuccessPage,
-  } = bookings;
-
-  const watchedCfToken = bookingForm.watch("cfToken");
-
-  const {
-    isEmailVerificationModalVisible,
-    setEmailVerificationModalVisible,
-    handleVerifyEmail,
-    renderConfirmNotVerifyEmailButtonCond,
-    isVerificationCodeSending,
-  } = verifyEmail;
-
-  const { overlayBusyDates, isOverlayCalendarEnabled, connectedCalendars, onToggleCalendar } = calendars;
-
-  const scrolledToTimeslotsOnce = useRef(false);
-  const embedUiConfig = useEmbedUiConfig();
-  const scrollToTimeSlots = () => {
-    if (slotsViewOnSmallScreen) return;
-    if (
-      isMobile &&
-      !scrolledToTimeslotsOnce.current &&
-      timeslotsRef.current &&
-      !embedUiConfig.disableAutoScroll
-    ) {
-      scrollIntoViewSmooth(timeslotsRef.current, isEmbed);
-      scrolledToTimeslotsOnce.current = true;
-    }
-  };
-
-  const skipConfirmStep = useSkipConfirmStep(
-    bookingForm,
-    bookerState,
-    isInstantMeeting,
-    layout === BookerLayouts.WEEK_VIEW,
-    event?.data?.bookingFields,
-    event?.data?.locations
-  );
-
-  const isE2E =
-    typeof process !== "undefined" &&
-    (process as unknown as { env?: Record<string, string> }).env?.NEXT_PUBLIC_IS_E2E;
-  const shouldRenderCaptcha = !!(
-    !isE2E &&
-    !!renderCaptchaElement &&
-    CLOUDFLARE_SITE_ID &&
-    CLOUDFLARE_USE_TURNSTILE_IN_BOOKER === "1" &&
-    (bookerState === "booking" || (bookerState === "selecting_time" && skipConfirmStep))
-  );
-
-  const onAvailableTimeSlotSelect = (time: string) => {
-    setSelectedTimeslot(time);
-    if (!skipConfirmStep) {
-      setIsSlotSelectionModalVisible(false);
-    }
-  };
-
-  updateEmbedBookerState({ bookerState, slotsQuery: schedule });
-
-  useEffect(() => {
-    if (event.isPending) return setBookerState("loading");
-    if (!selectedDate) return setBookerState("selecting_date");
-    if (!selectedTimeslot) return setBookerState("selecting_time");
-    const isSkipConfirmStepSupported = !isInstantMeeting && layout !== BookerLayouts.WEEK_VIEW;
-    if (selectedTimeslot && skipConfirmStep && isSkipConfirmStepSupported)
-      return setBookerState("selecting_time");
-    return setBookerState("booking");
-  }, [
-    event.isPending,
-    selectedDate,
-    selectedTimeslot,
-    setBookerState,
-    skipConfirmStep,
-    layout,
-    isInstantMeeting,
-  ]);
-
-  const unavailableTimeSlots = isQuickAvailabilityCheckFeatureEnabled
-    ? allSelectedTimeslots.filter((slot) => {
-        return !isTimeSlotAvailable({
-          scheduleData: schedule?.data ?? null,
-          slotToCheckInIso: slot,
-          quickAvailabilityChecks: slots.quickAvailabilityChecks,
-        });
-      })
-    : [];
-
-  const slot = getQueryParam("slot");
-
-  useEffect(() => {
-    if (isPlatform) return;
-    const newSlot = slot || null;
-    if (newSlot !== selectedTimeslot) {
-      setSelectedTimeslot(newSlot);
-    }
-  }, [slot, setSelectedTimeslot, selectedTimeslot, isPlatform]);
-
-  const onSubmit = (timeSlot?: string) =>
-    renderConfirmNotVerifyEmailButtonCond ? handleBookEvent(timeSlot) : handleVerifyEmail();
-
-  const EventBooker = useMemo(() => {
-    if (bookerState !== "booking") return null;
-
-    return (
-      <BookEventForm
-        key={key}
-        timeslot={selectedTimeslot}
-        shouldRenderCaptcha={shouldRenderCaptcha}
-        onCancel={() => {
-          setSelectedTimeslot(null);
-          if (PUBLIC_INVALIDATE_AVAILABLE_SLOTS_ON_BOOKING_FORM) {
-            schedule?.invalidate?.();
-          }
-          if (seatedEventData?.bookingUid) {
-            setSeatedEventData({
-              ...seatedEventData,
-              bookingUid: undefined,
-              attendees: undefined,
-            });
-          }
-        }}
-        onSubmit={() => (renderConfirmNotVerifyEmailButtonCond ? handleBookEvent() : handleVerifyEmail())}
-        errorRef={bookerFormErrorRef}
-        errors={{ ...formErrors, ...errors }}
-        isTimeslotUnavailable={!isInstantMeeting && unavailableTimeSlots.includes(selectedTimeslot || "")}
-        loadingStates={loadingStates}
-        renderConfirmNotVerifyEmailButtonCond={renderConfirmNotVerifyEmailButtonCond}
-        bookingForm={bookingForm}
-        eventQuery={event}
-        extraOptions={extraOptions}
-        isVerificationCodeSending={isVerificationCodeSending}
-        confirmButtonDisabled={confirmButtonDisabled}
-        classNames={{
-          confirmButton: customClassNames?.confirmStep?.confirmButton,
-          backButton: customClassNames?.confirmStep?.backButton,
-        }}
-        isPlatform={isPlatform}
-        isPlatformBookerEmbed={isPlatformBookerEmbed}
-      >
-        {!isPlatform && (
-          <RedirectToInstantMeetingModal
-            expiryTime={expiryTime}
-            bookingUid={bookingUid}
-            instantVideoMeetingUrl={instantVideoMeetingUrl}
-            onGoBack={() => {
-              onGoBackInstantMeeting();
-            }}
-            orgName={event.data?.entity?.name}
-          />
-        )}
-      </BookEventForm>
-    );
-  }, [
-    bookerFormErrorRef,
-    instantVideoMeetingUrl,
-    bookerState,
-    bookingForm,
-    errors,
-    event,
-    expiryTime,
-    extraOptions,
-    formErrors,
-    handleBookEvent,
-    handleVerifyEmail,
-    key,
-    loadingStates,
-    onGoBackInstantMeeting,
-    renderConfirmNotVerifyEmailButtonCond,
-    seatedEventData,
-    setSeatedEventData,
-    setSelectedTimeslot,
-    isPlatform,
-    shouldRenderCaptcha,
-    isVerificationCodeSending,
-    unavailableTimeSlots,
-  ]);
-
-  const considerUnpublished = entity.considerUnpublished && !rescheduleUid;
-  if (considerUnpublished) {
-    return <UnpublishedEntity {...entity} />;
-  }
-
-  if (event.isSuccess && !event.data) {
-    return <NotFound />;
-  }
-
-  if (bookerState === "loading") return null;
-
-  return (
-    <>
-      {event.data && renderTagManager ? renderTagManager(event.data) : <></>}
-      {(isBookingDryRunProp || isBookingDryRun(searchParams)) && <DryRunMessage isEmbed={isEmbed} />}
-      <div
-        className={cn(
-          "main",
-          "text-default flex min-h-full w-full flex-col items-center",
-          layout === BookerLayouts.MONTH_VIEW && !isEmbed && "my-20 ",
-          layout === BookerLayouts.MONTH_VIEW ? "overflow-visible" : "overflow-clip",
-          `${customClassNames?.bookerWrapper}`
-        )}
-      >
-        <div
-          ref={animationScope}
-          data-testid="booker-container"
-          className={cn(
-            ...getBookerSizeClassNames(layout, bookerState, hideEventTypeDetails),
-            `bg-default dark:bg-cal-muted grid max-w-full items-start dark:scheme-dark sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row`,
-            (layout === BookerLayouts.MONTH_VIEW || isEmbed) && "border-subtle rounded-md",
-            !isEmbed && "sm:transition-[width] sm:duration-300",
-            isEmbed && layout === BookerLayouts.MONTH_VIEW && "border-booker sm:border-booker-width",
-            !isEmbed && layout === BookerLayouts.MONTH_VIEW && `border-subtle border`,
-            `${customClassNames?.bookerContainer}`
-          )}
-        >
-          <AnimatePresence>
-            {!isInstantMeeting && (
-              <BookerSection
-                area="header"
-                className={cn(
-                  layout === BookerLayouts.MONTH_VIEW && "fixed top-4 z-10 ltr:right-4 rtl:left-4",
-                  (layout === BookerLayouts.COLUMN_VIEW || layout === BookerLayouts.WEEK_VIEW) &&
-                    "bg-default dark:bg-cal-muted sticky top-0 z-10 h-full -ml-px ltr:border-l rtl:border-r",
-                  layout === BookerLayouts.COLUMN_VIEW && "border-default",
-                  layout === BookerLayouts.WEEK_VIEW && "border-subtle"
-                )}
-              >
-                {isPlatform && layout === BookerLayouts.MONTH_VIEW ? (
-                  <></>
-                ) : (
-                  <Header
-                    isMyLink={Boolean(username === sessionUsername)}
-                    eventSlug={eventSlug}
-                    enabledLayouts={bookerLayouts.enabledLayouts}
-                    extraDays={layout === BookerLayouts.COLUMN_VIEW ? columnViewExtraDays.current : extraDays}
-                    isMobile={isMobile}
-                    nextSlots={nextSlots}
-                    renderOverlay={() => {
-                      if (isEmbed) return null;
-                      return (
-                        <OverlayCalendar
-                          isOverlayCalendarEnabled={isOverlayCalendarEnabled}
-                          connectedCalendars={connectedCalendars}
-                          overlayBusyDates={overlayBusyDates}
-                          onToggleCalendar={onToggleCalendar}
-                          hasSession={hasSession}
-                          handleClickContinue={onClickOverlayContinue}
-                          handleSwitchStateChange={onOverlaySwitchStateChange}
-                          handleClickNoCalendar={() => {
-                            onOverlayClickNoCalendar();
-                          }}
-                          isPlatform={isPlatform}
-                        />
-                      );
-                    }}
-                  />
-                )}
-              </BookerSection>
-            )}
-            <StickyOnDesktop key="meta" className={cn("relative z-10 flex [grid-area:meta]")}>
-              <BookerSection
-                area="meta"
-                className="max-w-screen flex w-full flex-col md:w-(--booker-meta-width)"
-              >
-                {!hideEventTypeDetails && orgBannerUrl && (
-                  <img
-                    loading="eager"
-                    className="-mb-9 h-auto w-full object-contain object-top ltr:rounded-tl-md rtl:rounded-tr-md sm:h-[70px] sm:object-cover"
-                    alt="org banner"
-                    src={orgBannerUrl}
-                  />
-                )}
-                {!hideEventTypeDetails && (
-                  <EventMeta
-                    selectedTimeslot={selectedTimeslot}
-                    classNames={eventMetaClassNames}
-                    event={event.data}
-                    isPending={event.isPending}
-                    isPlatform={isPlatform}
-                    TimezoneSelect={TimezoneSelect}
-                    isPrivateLink={!!hashedLink}
-                    locale={userLocale}
-                    timeZones={timeZones}
-                    roundRobinHideOrgAndTeam={roundRobinHideOrgAndTeam}
-                    hideOrgTeamAvatar={hideOrgTeamAvatar}
-                    hideEventTypeDetails={hideEventTypeDetails}
-                  >
-                    {eventMetaChildren}
-                  </EventMeta>
-                )}
-                {layout !== BookerLayouts.MONTH_VIEW &&
-                  !(layout === "mobile" && bookerState === "booking") && (
-                    <div className="mt-auto px-5 py-3">
-                      <DatePicker
-                        classNames={customClassNames?.datePickerCustomClassNames}
-                        event={event}
-                        slots={schedule?.data?.slots}
-                        isLoading={schedule.isPending}
-                        scrollToTimeSlots={scrollToTimeSlots}
-                        showNoAvailabilityDialog={showNoAvailabilityDialog}
-                        onDateChange={() => {
-                          if (slotsViewOnSmallScreen) {
-                            setIsSlotSelectionModalVisible(true);
-                          }
-                        }}
-                      />
-                    </div>
-                  )}
-              </BookerSection>
-            </StickyOnDesktop>
-
-            <BookerSection
-              key="book-event-form"
-              area="main"
-              className="sticky top-0 -ml-px h-full p-6 md:w-(--booker-main-width) md:border-l"
-              {...fadeInLeft}
-              visible={bookerState === "booking" && !shouldShowFormInDialog}
-            >
-              {EventBooker}
-            </BookerSection>
-
-            <BookerSection
-              key="datepicker"
-              area="main"
-              visible={bookerState !== "booking" && layout === BookerLayouts.MONTH_VIEW}
-              {...fadeInLeft}
-              initial="visible"
-              className={cn(
-                "md:border-subtle -ml-px h-full shrink px-5 py-3 lg:w-(--booker-main-width)",
-                hideEventTypeDetails ? "" : "md:border-l"
-              )}
-            >
-              <DatePicker
-                classNames={customClassNames?.datePickerCustomClassNames}
-                event={event}
-                slots={schedule?.data?.slots}
-                isLoading={schedule.isPending}
-                scrollToTimeSlots={scrollToTimeSlots}
-                showNoAvailabilityDialog={showNoAvailabilityDialog}
-              />
-            </BookerSection>
-
-            <BookerSection
-              key="enable-calendar"
-              area="main"
-              visible={layout === BookerLayouts.WEEK_VIEW}
-              className="border-subtle sticky top-0 -ml-px h-full md:border-l"
-              {...fadeInLeft}
-            >
-              <LargeCalendar
-                extraDays={extraDays}
-                schedule={schedule.data}
-                isLoading={schedule.isPending}
-                event={event}
-              />
-            </BookerSection>
-
-            <BookerSection
-              key="timeslots"
-              area={{ default: "main", month_view: "timeslots" }}
-              visible={
-                !(slotsViewOnSmallScreen && isMobile) &&
-                ((layout !== BookerLayouts.WEEK_VIEW && bookerState === "selecting_time") ||
-                  layout === BookerLayouts.COLUMN_VIEW)
-              }
-              className={cn(
-                "flex h-full w-full flex-col overflow-x-auto px-5 py-3 pb-0 rtl:border-r ltr:md:border-l",
-                layout === BookerLayouts.COLUMN_VIEW ? "border-default" : "border-subtle rtl:border-default",
-                layout === BookerLayouts.MONTH_VIEW &&
-                  "h-full overflow-hidden md:w-(--booker-timeslots-width)",
-                layout !== BookerLayouts.MONTH_VIEW && "sticky top-0"
-              )}
-              ref={timeslotsRef}
-              {...fadeInLeft}
-            >
-              <AvailableTimeSlots
-                onAvailableTimeSlotSelect={onAvailableTimeSlotSelect}
-                customClassNames={customClassNames?.availableTimeSlotsCustomClassNames}
-                extraDays={extraDays}
-                limitHeight={layout === BookerLayouts.MONTH_VIEW}
-                schedule={schedule}
-                isLoading={schedule.isPending}
-                seatsPerTimeSlot={event.data?.seatsPerTimeSlot}
-                unavailableTimeSlots={unavailableTimeSlots}
-                showAvailableSeatsCount={event.data?.seatsShowAvailabilityCount}
-                event={event}
-                loadingStates={loadingStates}
-                renderConfirmNotVerifyEmailButtonCond={renderConfirmNotVerifyEmailButtonCond}
-                isVerificationCodeSending={isVerificationCodeSending}
-                onSubmit={onSubmit}
-                skipConfirmStep={skipConfirmStep}
-                shouldRenderCaptcha={shouldRenderCaptcha}
-                watchedCfToken={watchedCfToken}
-                confirmButtonDisabled={confirmButtonDisabled}
-                confirmStepClassNames={customClassNames?.confirmStep}
-                isPlatform={isPlatform}
-              />
-            </BookerSection>
-          </AnimatePresence>
-        </div>
-        <HavingTroubleFindingTime
-          visible={bookerState !== "booking" && layout === BookerLayouts.MONTH_VIEW && !isMobile}
-          dayCount={dayCount}
-          isScheduleLoading={schedule.isLoading}
-          onButtonClick={() => {
-            setDayCount(null);
-          }}
-        />
-
-        {bookerState !== "booking" &&
-          event.data?.showInstantEventConnectNowModal &&
-          areInstantMeetingParametersSet && (
-            <div
-              className={cn(
-                "animate-fade-in-up z-40 my-2 opacity-0",
-                layout === BookerLayouts.MONTH_VIEW && isEmbed ? "" : "fixed bottom-2"
-              )}
-              style={{ animationDelay: "1s" }}
-            >
-              <InstantBooking
-                event={event.data}
-                cooldownMs={instantConnectCooldownMs}
-                onConnectNow={() => {
-                  onConnectNowInstantMeeting();
-                }}
-              />
-            </div>
-          )}
-
-        {shouldRenderCaptcha && renderCaptchaElement && (
-          <div className="mb-6 mt-auto pt-6">
-            {renderCaptchaElement((token: string) => {
-              bookingForm.setValue("cfToken", token);
-            })}
-          </div>
-        )}
-      </div>
-      <>
-        {verifyCode && formEmail ? (
-          <VerifyCodeDialog
-            isOpenDialog={isEmailVerificationModalVisible}
-            setIsOpenDialog={setEmailVerificationModalVisible}
-            email={formEmail}
-            isUserSessionRequiredToVerify={false}
-            verifyCodeWithSessionNotRequired={verifyCode.verifyCodeWithSessionNotRequired}
-            verifyCodeWithSessionRequired={verifyCode.verifyCodeWithSessionRequired}
-            error={verifyCode.error}
-            resetErrors={verifyCode.resetErrors}
-            isPending={verifyCode.isPending}
-            setIsPending={verifyCode.setIsPending}
-            isPlatform={isPlatform}
-          />
-        ) : (
-          <></>
-        )}
-      </>
-      <BookFormAsModal
-        onCancel={() => setSelectedTimeslot(null)}
-        visible={bookerState === "booking" && shouldShowFormInDialog}
-        isPlatform={isPlatform}
-        eventLength={event.data?.length}
-      >
-        {EventBooker}
-      </BookFormAsModal>
-      <Dialog open={isMobile && isSlotSelectionModalVisible}>
-        <DialogContent
-          enableOverflow
-          className="fixed! inset-0! top-0! left-0! h-screen! max-h-screen! w-screen! max-w-none! translate-x-0! translate-y-0! rounded-none! m-0! px-8 pt-0 pb-8"
-        >
-          <SlotSelectionModalHeader
-            onClick={() => setIsSlotSelectionModalVisible(false)}
-            event={event.data}
-            isPlatform={isPlatform}
-            TimezoneSelect={TimezoneSelect}
-            timeZones={timeZones}
-            selectedDate={selectedDate}
-          />
-          <AvailableTimeSlots
-            onAvailableTimeSlotSelect={onAvailableTimeSlotSelect}
-            customClassNames={customClassNames?.availableTimeSlotsCustomClassNames}
-            extraDays={extraDays}
-            limitHeight={layout === BookerLayouts.MONTH_VIEW}
-            schedule={schedule}
-            isLoading={schedule.isPending}
-            seatsPerTimeSlot={event.data?.seatsPerTimeSlot}
-            unavailableTimeSlots={unavailableTimeSlots}
-            showAvailableSeatsCount={event.data?.seatsShowAvailabilityCount}
-            event={event}
-            loadingStates={loadingStates}
-            renderConfirmNotVerifyEmailButtonCond={renderConfirmNotVerifyEmailButtonCond}
-            isVerificationCodeSending={isVerificationCodeSending}
-            onSubmit={onSubmit}
-            skipConfirmStep={skipConfirmStep}
-            shouldRenderCaptcha={shouldRenderCaptcha}
-            watchedCfToken={watchedCfToken}
-            confirmButtonDisabled={confirmButtonDisabled}
-            confirmStepClassNames={customClassNames?.confirmStep}
-            hideAvailableTimesHeader
-            isPlatform={isPlatform}
-          />
-        </DialogContent>
-      </Dialog>
-      <Toaster position="bottom-right" />
-      <ExternalRedirectInterstitial
-        isOpen={!!pendingRedirect}
-        redirectUrl={pendingRedirect?.url ?? ""}
-        onContinue={confirmRedirect}
-        onGoBack={goBackToSuccessPage}
-      />
-    </>
-  );
-};
-
-export const Booker = (props) => {
-  return (
-    <LazyMotion strict features={framerFeatures}>
-      <BookerComponentInner {...props} />
-    </LazyMotion>
-  );
-};