From 124471ef4ad30b1d463f28865433cc8eddc583ec Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Mon, 20 May 2024 16:57:13 +0530
Subject: [PATCH] feat: add autoscroll in mobile (#15124)

---
 packages/features/bookings/Booker/Booker.tsx          | 11 ++++++++++-
 .../bookings/Booker/components/DatePicker.tsx         |  3 +++
 packages/features/calendars/DatePicker.tsx            |  3 +++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index d744c8dff9..b08d88bc25 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -133,6 +133,14 @@ const BookerComponent = ({
     onToggleCalendar,
   } = calendars;
 
+  const scrolledToTimeslotsOnce = useRef(false);
+  const scrollToTimeSlots = () => {
+    if (isMobile && !isEmbed && !scrolledToTimeslotsOnce.current) {
+      timeslotsRef.current?.scrollIntoView({ behavior: "smooth" });
+      scrolledToTimeslotsOnce.current = true;
+    }
+  };
+
   useEffect(() => {
     if (event.isPending) return setBookerState("loading");
     if (!selectedDate) return setBookerState("selecting_date");
@@ -346,7 +354,7 @@ const BookerComponent = ({
                 {layout !== BookerLayouts.MONTH_VIEW &&
                   !(layout === "mobile" && bookerState === "booking") && (
                     <div className="mt-auto px-5 py-3 ">
-                      <DatePicker event={event} schedule={schedule} />
+                      <DatePicker event={event} schedule={schedule} scrollToTimeSlots={scrollToTimeSlots} />
                     </div>
                   )}
               </BookerSection>
@@ -379,6 +387,7 @@ const BookerComponent = ({
                 }}
                 event={event}
                 schedule={schedule}
+                scrollToTimeSlots={scrollToTimeSlots}
               />
             </BookerSection>
 
diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx
index abd6d319bf..b833b8cde0 100644
--- a/packages/features/bookings/Booker/components/DatePicker.tsx
+++ b/packages/features/bookings/Booker/components/DatePicker.tsx
@@ -14,6 +14,7 @@ export const DatePicker = ({
   event,
   schedule,
   classNames,
+  scrollToTimeSlots,
 }: {
   event: useEventReturnType;
   schedule: useScheduleForEventReturnType;
@@ -25,6 +26,7 @@ export const DatePicker = ({
     datePickerDatesActive?: string;
     datePickerToggle?: string;
   };
+  scrollToTimeSlots?: () => void;
 }) => {
   const { i18n } = useLocale();
   const [month, selectedDate] = useBookerStore((state) => [state.month, state.selectedDate], shallow);
@@ -59,6 +61,7 @@ export const DatePicker = ({
       selected={dayjs(selectedDate)}
       weekStart={weekdayToWeekIndex(event?.data?.users?.[0]?.weekStart)}
       slots={schedule?.data?.slots}
+      scrollToTimeSlots={scrollToTimeSlots}
     />
   );
 };
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index 837b9144d6..16f7b14d5c 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -152,6 +152,7 @@ const Days = ({
     datePickerDate?: string;
     datePickerDateActive?: string;
   };
+  scrollToTimeSlots?: () => void;
 }) => {
   // Create placeholder elements for empty days in first week
   const weekdayOfFirst = browsingDate.date(1).day();
@@ -267,6 +268,7 @@ const Days = ({
               date={day}
               onClick={() => {
                 props.onChange(day);
+                props?.scrollToTimeSlots?.();
               }}
               disabled={disabled}
               active={isActive(day)}
@@ -302,6 +304,7 @@ const DatePicker = ({
       datePickerDatesActive?: string;
       datePickerToggle?: string;
     };
+    scrollToTimeSlots?: () => void;
   }) => {
   const browsingDate = passThroughProps.browsingDate || dayjs().startOf("month");
   const { i18n } = useLocale();