Merged in feat/sw-1513-anchoring-on-enter-details (pull request #1379)

feat(SW-1513): scroll to new section on enter details page

* feat(SW-1513): scroll to new section on enter details page


Approved-by: Simon.Emanuelsson

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
@@ -12,6 +12,7 @@ import {
 import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import useStickyPosition from "@/hooks/useStickyPosition"
 
 import styles from "./sectionAccordion.module.css"
 
@@ -30,6 +31,7 @@ export default function SectionAccordion({
     selectRoomStatus(state, roomIndex)
   )
 
+  const stickyPosition = useStickyPosition({})
   const setStep = useEnterDetailsStore((state) => state.actions.setStep)
   const { bedType, breakfast } = useEnterDetailsStore((state) =>
     selectRoom(state, roomIndex)
@@ -67,8 +69,28 @@ export default function SectionAccordion({
     setIsComplete(isValid)
   }, [isValid, setIsComplete])
 
+  const accordionRef = useRef<HTMLDivElement>(null)
+
   useEffect(() => {
-    setIsOpen(roomStatus.currentStep === step && currentRoomIndex === roomIndex)
+    const shouldBeOpen =
+      roomStatus.currentStep === step && currentRoomIndex === roomIndex
+
+    setIsOpen(shouldBeOpen)
+
+    // Scroll to this section when it is opened, but wait for the accordion animations to
+    // finish, else the height calculations will not be correct and the scroll position
+    // will be off.
+    if (shouldBeOpen) {
+      setTimeout(() => {
+        if (accordionRef.current) {
+          window.scrollTo({
+            top: accordionRef.current.offsetTop - stickyPosition.getTopOffset(),
+            behavior: "smooth",
+          })
+        }
+      }, 250)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentRoomIndex, roomIndex, roomStatus.currentStep, setIsOpen, step])
 
   function onModify() {
@@ -98,6 +120,7 @@ export default function SectionAccordion({
       className={styles.accordion}
       data-section-open={isOpen}
       data-step={step}
+      ref={accordionRef}
     >
       <div className={styles.iconWrapper}>
         <div className={styles.circle} data-checked={isComplete}>