Merged in fix/sw-1160-booking-widget-sticky (pull request #1053)

fix(SW-1160): include current header as sticky

* fix(SW-1160): include current header as sticky

* fix(sw-1160): only count with current header height if its shown


Approved-by: Erik Tiekstra

hooks/useStickyPosition.ts

@@ -1,9 +1,10 @@
 "use client"
 
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 
+import { env } from "@/env/client"
 import useStickyPositionStore, {
-  StickyElementNameEnum,
+  type StickyElementNameEnum,
 } from "@/stores/sticky-position"
 
 import { debounce } from "@/utils/debounce"
@@ -44,6 +45,15 @@ export default function useStickyPosition({
     getAllElements,
   } = useStickyPositionStore()
 
+  /* Used for Current mobile header since that doesn't use this hook.
+   *
+   * Instead, calculate if the mobile header is shown and add the height of
+   * that "manually" to all offsets using this hook.
+   *
+   * TODO: Remove this and just use 0 when the current header has been removed.
+   */
+  const [baseTopOffset, setBaseTopOffset] = useState(0)
+
   useEffect(() => {
     if (ref && name) {
       // Register the sticky element with the given ref, name, and group.
@@ -79,19 +89,28 @@ export default function useStickyPosition({
         const topOffset = stickyElements
           .slice(0, index)
           .filter((el) => el.group !== currentGroup)
-          .reduce((acc, el) => acc + el.height, 0)
+          .reduce((acc, el) => acc + el.height, baseTopOffset)
 
         // Apply the calculated top offset to the current element's style.
         // This positions the element at the correct location within the document.
         ref.current.style.top = `${topOffset}px`
       }
     }
-  }, [stickyElements, ref])
+  }, [baseTopOffset, stickyElements, ref])
 
   useEffect(() => {
     if (!resizeObserver) {
       const debouncedResizeHandler = debounce(() => {
         updateHeights()
+
+        // Only do this special handling if we have the current header
+        if (env.NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE) {
+          if (document.body.clientWidth > 950) {
+            setBaseTopOffset(0)
+          } else {
+            setBaseTopOffset(52.41) // The height of current mobile header
+          }
+        }
       }, 100)
 
       resizeObserver = new ResizeObserver(debouncedResizeHandler)