fix: skip confirm step followup

packages/features/bookings/Booker/Booker.tsx

@@ -161,7 +161,12 @@ const BookerComponent = ({
     }
   };
 
-  const skipConfirmStep = useSkipConfirmStep(bookingForm, event?.data?.bookingFields);
+  const skipConfirmStep = useSkipConfirmStep(
+    bookingForm,
+    bookerState,
+    isInstantMeeting,
+    event?.data?.bookingFields
+  );
 
   // Cloudflare Turnstile Captcha
   const shouldRenderCaptcha = !!(
@@ -175,7 +180,8 @@ const BookerComponent = ({
   useEffect(() => {
     if (event.isPending) return setBookerState("loading");
     if (!selectedDate) return setBookerState("selecting_date");
-    if (!selectedTimeslot || skipConfirmStep) return setBookerState("selecting_time");
+    if (!selectedTimeslot) return setBookerState("selecting_time");
+    if (selectedTimeslot && skipConfirmStep && !isInstantMeeting) return setBookerState("selecting_time");
     return setBookerState("booking");
   }, [event, selectedDate, selectedTimeslot, setBookerState, skipConfirmStep]);
 
@@ -212,22 +218,6 @@ const BookerComponent = ({
         isVerificationCodeSending={isVerificationCodeSending}
         isPlatform={isPlatform}>
         <>
-          {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 && (
             <RedirectToInstantMeetingModal
               expiryTime={expiryTime}
@@ -253,26 +243,17 @@ const BookerComponent = ({
     event,
     expiryTime,
     extraOptions,
-    formEmail,
     formErrors,
     handleBookEvent,
     handleVerifyEmail,
-    isEmailVerificationModalVisible,
     key,
     loadingStates,
     onGoBackInstantMeeting,
     renderConfirmNotVerifyEmailButtonCond,
     rescheduleUid,
     seatedEventData,
-    setEmailVerificationModalVisible,
     setSeatedEventData,
     setSelectedTimeslot,
-    verifyCode?.error,
-    verifyCode?.isPending,
-    verifyCode?.resetErrors,
-    verifyCode?.setIsPending,
-    verifyCode?.verifyCodeWithSessionNotRequired,
-    verifyCode?.verifyCodeWithSessionRequired,
     isPlatform,
     shouldRenderCaptcha,
     isVerificationCodeSending,
@@ -532,6 +513,25 @@ const BookerComponent = ({
         )}
       </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}
+          />
+        ) : (
+          <></>
+        )}
+      </>
+
       <BookFormAsModal
         onCancel={() => setSelectedTimeslot(null)}
         visible={bookerState === "booking" && shouldShowFormInDialog}>

packages/features/bookings/Booker/components/AvailableTimeSlots.tsx

@@ -1,17 +1,19 @@
-import { useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { AvailableTimes, AvailableTimesSkeleton } from "@calcom/features/bookings";
 import type { IUseBookingLoadingStates } from "@calcom/features/bookings/Booker/components/hooks/useBookings";
 import type { BookerEvent } from "@calcom/features/bookings/types";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
+import type { Slot } from "@calcom/features/schedules";
 import { useSlotsForAvailableDates } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate";
 import { classNames } from "@calcom/lib";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
 
 import { AvailableTimesHeader } from "../../components/AvailableTimesHeader";
 import { useBookerStore } from "../store";
 import type { useScheduleForEventReturnType } from "../utils/event";
+import { getQueryParam } from "../utils/query-param";
 
 type AvailableTimeSlotsProps = {
   extraDays?: number;
@@ -55,52 +57,73 @@ export const AvailableTimeSlots = ({
   isLoading,
   customClassNames,
   skipConfirmStep,
+  seatsPerTimeSlot,
   onSubmit,
   ...props
 }: AvailableTimeSlotsProps) => {
   const selectedDate = useBookerStore((state) => state.selectedDate);
+
   const setSelectedTimeslot = useBookerStore((state) => state.setSelectedTimeslot);
   const setSeatedEventData = useBookerStore((state) => state.setSeatedEventData);
   const date = selectedDate || dayjs().format("YYYY-MM-DD");
   const [layout] = useBookerStore((state) => [state.layout]);
   const isColumnView = layout === BookerLayouts.COLUMN_VIEW;
   const containerRef = useRef<HTMLDivElement | null>(null);
 
-  const onTimeSelect = (
-    time: string,
-    attendees: number,
-    seatsPerTimeSlot?: number | null,
-    bookingUid?: string
-  ) => {
-    setSelectedTimeslot(time);
-    if (seatsPerTimeSlot) {
-      setSeatedEventData({
-        seatsPerTimeSlot,
-        attendees,
-        bookingUid,
-        showAvailableSeatsCount,
-      });
-    }
-    if (skipConfirmStep) {
-      onSubmit(time);
-    }
-    return;
-  };
-
   const nonEmptyScheduleDays = useNonEmptyScheduleDays(schedule?.slots);
   const nonEmptyScheduleDaysFromSelectedDate = nonEmptyScheduleDays.filter(
     (slot) => dayjs(selectedDate).diff(slot, "day") <= 0
   );
 
   // Creates an array of dates to fetch slots for.
   // If `extraDays` is passed in, we will extend the array with the next `extraDays` days.
-  const dates = !extraDays
-    ? [date]
-    : nonEmptyScheduleDaysFromSelectedDate.length > 0
-    ? nonEmptyScheduleDaysFromSelectedDate.slice(0, extraDays)
-    : [];
+  const dates = useMemo(() => {
+    if (!extraDays) return [date];
+    if (nonEmptyScheduleDaysFromSelectedDate.length > 0) {
+      return nonEmptyScheduleDaysFromSelectedDate.slice(0, extraDays);
+    }
+    return [];
+  }, [date, extraDays, nonEmptyScheduleDaysFromSelectedDate]);
 
-  const slotsPerDay = useSlotsForAvailableDates(dates, schedule?.slots);
+  const { slotsPerDay, toggleConfirmButton } = useSlotsForAvailableDates(dates, schedule?.slots);
+
+  const overlayCalendarToggled =
+    getQueryParam("overlayCalendar") === "true" || localStorage.getItem("overlayCalendarSwitchDefault");
+
+  const onTimeSelect = useCallback(
+    (time: string, attendees: number, seatsPerTimeSlot?: number | null, bookingUid?: string) => {
+      setSelectedTimeslot(time);
+      if (seatsPerTimeSlot) {
+        setSeatedEventData({
+          seatsPerTimeSlot,
+          attendees,
+          bookingUid,
+          showAvailableSeatsCount,
+        });
+      }
+      if (skipConfirmStep) {
+        onSubmit(time);
+      }
+      return;
+    },
+    [onSubmit, setSeatedEventData, setSelectedTimeslot, skipConfirmStep, showAvailableSeatsCount]
+  );
+
+  const handleSlotClick = useCallback(
+    (selectedSlot: Slot, isOverlapping: boolean) => {
+      if ((overlayCalendarToggled && isOverlapping) || skipConfirmStep) {
+        toggleConfirmButton(selectedSlot);
+      } else {
+        onTimeSelect(
+          selectedSlot.time,
+          selectedSlot?.attendees || 0,
+          seatsPerTimeSlot,
+          selectedSlot.bookingUid
+        );
+      }
+    },
+    [overlayCalendarToggled, onTimeSelect, seatsPerTimeSlot, skipConfirmStep, toggleConfirmButton]
+  );
 
   return (
     <>
@@ -150,6 +173,8 @@ export const AvailableTimeSlots = ({
                 slots={slots.slots}
                 showAvailableSeatsCount={showAvailableSeatsCount}
                 skipConfirmStep={skipConfirmStep}
+                seatsPerTimeSlot={seatsPerTimeSlot}
+                handleSlotClick={handleSlotClick}
                 {...props}
               />
             </div>

packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx

@@ -124,7 +124,6 @@ export const BookEventForm = ({
             />
           </div>
         )}
-        {/* Cloudflare Turnstile Captcha */}
         {!isPlatform && (
           <div className="text-subtle my-3 w-full text-xs">
             <Trans

packages/features/bookings/Booker/components/hooks/useSkipConfirmStep.ts

@@ -3,10 +3,14 @@ import { useState, useEffect } from "react";
 import type { UseBookingFormReturnType } from "@calcom/features/bookings/Booker/components/hooks/useBookingForm";
 import { useBookerStore } from "@calcom/features/bookings/Booker/store";
 import { getBookingResponsesSchemaWithOptionalChecks } from "@calcom/features/bookings/lib/getBookingResponsesSchema";
-import type { BookerEvent } from "@calcom/features/bookings/types";
+
+import type { BookerEvent } from "../../../types";
+import type { BookerState } from "../../types";
 
 const useSkipConfirmStep = (
   bookingForm: UseBookingFormReturnType["bookingForm"],
+  bookerState: BookerState,
+  isInstantMeeting: boolean,
   bookingFields?: BookerEvent["bookingFields"]
 ) => {
   const bookingFormValues = bookingForm.getValues();
@@ -34,8 +38,8 @@ const useSkipConfirmStep = (
       }
     };
 
-    checkSkipStep();
-  }, [bookingFormValues, bookingFields, rescheduleUid]);
+    bookerState === "selecting_time" && !isInstantMeeting && checkSkipStep();
+  }, [bookingFormValues, bookingFields, rescheduleUid, bookerState]);
 
   return canSkip;
 };