Merged in fix/SW-3039-scroll-day-picker-bookingwidget (pull request #2367)

fix(SW-3039): scroll to selected dates

* fix(SW-3039): scroll to selected dates

* fix(SW-3039): remove comment

* fix(SW-3039): query select only the day


Approved-by: Christian Andolf

apps/scandic-web/components/DatePicker/Range/Mobile.tsx

@@ -1,5 +1,6 @@
 "use client"
-import { DayPicker } from "react-day-picker"
+import { useEffect, useRef, useState } from "react"
+import { type DateRange, DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -29,15 +30,39 @@ export default function DatePickerRangeMobile({
 
   /** English is default language and doesn't need to be imported */
   const locale = lang === Lang.en ? undefined : locales[lang]
+  const monthsRef = useRef<HTMLDivElement | null>(null)
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true)
+
   const currentDate = dt().toDate()
   const startOfCurrentMonth = dt(currentDate).set("date", 1).toDate()
   const yesterday = dt(currentDate).subtract(1, "day").toDate()
+  useEffect(() => {
+    if (!monthsRef.current || !selectedRange?.from || !autoScrollEnabled) return
+
+    const selectedDay = monthsRef.current.querySelector(
+      'td[aria-selected="true"]:not([data-outside="true"])'
+    )
+
+    const targetMonth = selectedDay?.closest(`.${styles.month}`)
+
+    if (targetMonth) {
+      targetMonth.scrollIntoView({ block: "start" })
+    }
+  }, [selectedRange, autoScrollEnabled])
+
+  function handleSelectWrapper(
+    dateRange: DateRange | undefined,
+    selectedDay: Date
+  ) {
+    setAutoScrollEnabled(false)
+    handleOnSelect(dateRange, selectedDay)
+  }
 
   // Max future date allowed to book kept same as of existing prod.
   const endDate = dt().add(395, "day").toDate()
   const endOfLastMonth = dt(endDate).endOf("month").toDate()
   return (
-    <div className={styles.container}>
+    <div className={styles.container} ref={monthsRef}>
       <header className={styles.header}>
         <button className={styles.close} onClick={close} type="button">
           <MaterialIcon icon="close" />
@@ -76,7 +101,9 @@ export default function DatePickerRangeMobile({
         mode="range"
         /** Showing full year or what's left of it */
         numberOfMonths={13}
-        onSelect={handleOnSelect}
+        onSelect={(dateRange, selectedDay) =>
+          handleSelectWrapper(dateRange, selectedDay)
+        }
         required
         selected={selectedRange}
         startMonth={currentDate}

apps/scandic-web/components/DatePicker/Range/mobile.module.css

@@ -56,6 +56,7 @@ div.months {
 .month {
   display: grid;
   justify-items: center;
+  padding-top: var(--Space-x3);
   scroll-snap-align: start;
 }
 

apps/scandic-web/components/DatePicker/index.tsx

@@ -176,17 +176,19 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
               : undefined,
           }}
         />
-        <DatePickerRangeMobile
+        {isOpen && (
-          close={close}
+          <DatePickerRangeMobile
-          handleOnSelect={handleSelectDate}
+            close={close}
-          // DayPicker lib needs Daterange in form as below to show appropriate UI
+            handleOnSelect={handleSelectDate}
-          selectedRange={{
+            // DayPicker lib needs Daterange in form as below to show appropriate UI
-            from: dt(selectedDate.fromDate).toDate(),
+            selectedRange={{
-            to: selectedDate.toDate
+              from: dt(selectedDate.fromDate).toDate(),
-              ? dt(selectedDate.toDate).toDate()
+              to: selectedDate.toDate
-              : undefined,
+                ? dt(selectedDate.toDate).toDate()
-          }}
+                : undefined,
-        />
+            }}
+          />
+        )}
       </div>
     </div>
   )