feat: add autoscroll in mobile (#15124)

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>
 

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}
     />
   );
 };

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();