Merged in feat/book-570-select-rate-scroll (pull request #3160)

feat(BOOK-570): fix scroll issue when selecting a rate for the first time

* feat(BOOK-570): fix scroll issue when selecting a rate for the first time


Approved-by: Joakim Jäderberg

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx

@@ -19,7 +19,9 @@ import styles from "./mobileSummary.module.css"
 export function MobileSummary() {
   const intl = useIntl()
   const scrollY = useRef(0)
-  const [isSummaryOpen, setIsSummaryOpen] = useState(false)
+  const [isSummaryOpen, setIsSummaryOpen] = useState<boolean | undefined>(
+    undefined
+  )
   const isUserLoggedIn = useIsLoggedIn()
 
   const { selectedRates } = useSelectRateContext()
@@ -29,6 +31,10 @@ export function MobileSummary() {
   }
 
   useEffect(() => {
+    if (isSummaryOpen === undefined) {
+      return
+    }
+
     if (isSummaryOpen) {
       scrollY.current = window.scrollY
       document.body.style.position = "fixed"

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/ScrollToList.tsx

@@ -1,54 +0,0 @@
-"use client"
-import { useEffect } from "react"
-
-import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
-
-import styles from "./rooms.module.css"
-
-export default function ScrollToList() {
-  const {
-    input: { isMultiRoom },
-    selectedRates,
-  } = useSelectRateContext()
-  const selectedRateCode = selectedRates.rates[0]
-    ? `${selectedRates.rates[0].rateDefinition.rateCode}${selectedRates.rates[0].roomInfo.roomTypeCode}`
-    : null
-
-  useEffect(() => {
-    if (isMultiRoom) {
-      return
-    }
-
-    if (!selectedRateCode) {
-      return
-    }
-
-    // Required to prevent the history.pushState on the first selection
-    // to scroll user back to top
-    requestAnimationFrame(() => {
-      const SCROLL_OFFSET = 173 // summary on mobile is 163px
-
-      const checkedRadio = document.querySelector(
-        `.${styles.roomList} input[type="radio"]:checked`
-      )
-
-      const selectedRateCard = checkedRadio?.closest("label") ?? null
-
-      if (selectedRateCard) {
-        const elementPosition = selectedRateCard.getBoundingClientRect().top
-        const windowHeight = window.innerHeight
-        const offsetPosition =
-          elementPosition +
-          window.scrollY -
-          (windowHeight - selectedRateCard.offsetHeight - SCROLL_OFFSET)
-
-        window.scrollTo({
-          top: offsetPosition,
-          behavior: "instant",
-        })
-      }
-    })
-  }, [isMultiRoom, selectedRateCode])
-
-  return null
-}

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx

@@ -3,7 +3,6 @@
 import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
 import { RoomListItem } from "./RoomListItem"
 import { RoomsListSkeleton } from "./RoomsListSkeleton"
-import ScrollToList from "./ScrollToList"
 
 import styles from "./rooms.module.css"
 
@@ -22,7 +21,6 @@ export default function RoomsList({ roomIndex }: { roomIndex: number }) {
 
   return (
     <>
-      <ScrollToList />
       <ul className={styles.roomList}>
         {getAvailabilityForRoom(roomIndex)?.map((room, ix) => {
           return (

packages/booking-flow/lib/contexts/SelectRate/SelectRateContext/index.tsx

@@ -565,7 +565,6 @@ function useUpdateBooking() {
     newUrl.search = serializeBookingSearchParams(booking).toString()
     newUrl.searchParams.set(BookingCodeFilterQueryName, bookingCodeFilter)
 
-    // router.replace(newUrl.toString(), { scroll: false })
     window.history.replaceState({}, "", newUrl.toString())
   }
 }