Merged in fix/book-500-disable-booking-widget-overlay (pull request #3149)

fix(BOOK-500): disable scrolling of backdrop on mobile booking modal

* BOOK-500: fixed scrolling issue behind open booking widget

* fix(BOOK-500): added customized hook for scrollLock

* BOOK-500: gave hook functions more descriptive names


Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/BookingWidget/Client.tsx

@@ -6,6 +6,7 @@ import { use, useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 
 import { dt } from "@scandic-hotels/common/dt"
+import { useScrollLock } from "@scandic-hotels/common/hooks/useScrollLock"
 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
 import { StickyElementNameEnum } from "@scandic-hotels/common/stores/sticky-position"
 import { debounce } from "@scandic-hotels/common/utils/debounce"
@@ -51,12 +52,11 @@ export default function BookingWidgetClient({
   const [isOpen, setIsOpen] = useState(false)
   const bookingWidgetRef = useRef(null)
   const lang = useLang()
-  const [originalOverflowY, setOriginalOverflowY] = useState<string | null>(
-    null
-  )
   const bookingFlowConfig = useBookingFlowConfig()
   const storedBookingWidgetState = useBookingWidgetState()
-
+  const { lockScroll, unlockScroll } = useScrollLock({
+    autoLock: false,
+  })
   const shouldFetchAutoComplete = !!data.hotelId || !!data.city
 
   const { data: destinationsData, isPending } =
@@ -165,15 +165,13 @@ export default function BookingWidgetClient({
   }, [selectedLocation, methods])
 
   function closeMobileSearch() {
+    unlockScroll()
     setIsOpen(false)
-    const overflowY = originalOverflowY ?? "visible"
-    document.body.style.overflowY = overflowY
   }
 
   function openMobileSearch() {
+    lockScroll()
     setIsOpen(true)
-    setOriginalOverflowY(document.body.style.overflowY)
-    document.body.style.overflowY = "hidden"
   }
 
   useEffect(() => {
@@ -181,7 +179,7 @@ export default function BookingWidgetClient({
       debounce(([entry]) => {
         if (entry.contentRect.width > 768) {
           setIsOpen(false)
-          document.body.style.removeProperty("overflow-y")
+          unlockScroll()
         }
       })
     )
@@ -191,7 +189,7 @@ export default function BookingWidgetClient({
     return () => {
       observer.unobserve(document.body)
     }
-  }, [])
+  }, [unlockScroll])
 
   useEffect(() => {
     if (!window?.sessionStorage || !window?.localStorage) return
@@ -247,6 +245,7 @@ export default function BookingWidgetClient({
         data-booking-widget-open={isOpen}
       >
         <MobileToggleButton openMobileSearch={openMobileSearch} />
+        <div className={styles.backdrop} onClick={closeMobileSearch} />
         <div className={formContainerClassNames}>
           <button
             className={styles.close}
@@ -257,7 +256,6 @@ export default function BookingWidgetClient({
           </button>
           <Form type={type} onClose={closeMobileSearch} />
         </div>
-        <div className={styles.backdrop} onClick={closeMobileSearch} />
       </section>
     </FormProvider>
   )