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

.env.local.example

@@ -52,7 +52,7 @@ GOOGLE_STATIC_MAP_SIGNATURE_SECRET=""
 GOOGLE_STATIC_MAP_ID=""
 GOOGLE_DYNAMIC_MAP_ID=""
 
-HIDE_FOR_NEXT_RELEASE="false"
+NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE="false"
 
 ENABLE_BOOKING_FLOW="false"
 ENABLE_BOOKING_WIDGET="false"

.env.test

@@ -42,7 +42,7 @@ GOOGLE_STATIC_MAP_KEY="test"
 GOOGLE_STATIC_MAP_SIGNATURE_SECRET="test"
 GOOGLE_STATIC_MAP_ID="test"
 GOOGLE_DYNAMIC_MAP_ID="test"
-HIDE_FOR_NEXT_RELEASE="true"
+NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE="true"
 SALESFORCE_PREFERENCE_BASE_URL="test"
 USE_NEW_REWARDS_ENDPOINT="true"
 USE_NEW_REWARD_MODEL="true"

env/client.ts

@@ -5,10 +5,18 @@ export const env = createEnv({
   client: {
     NEXT_PUBLIC_NODE_ENV: z.enum(["development", "test", "production"]),
     NEXT_PUBLIC_PORT: z.string().default("3000"),
+    NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE: z
+      .string()
+      // only allow "true" or "false"
+      .refine((s) => s === "true" || s === "false")
+      // transform to boolean
+      .transform((s) => s === "true"),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
     NEXT_PUBLIC_NODE_ENV: process.env.NODE_ENV,
     NEXT_PUBLIC_PORT: process.env.NEXT_PUBLIC_PORT,
+    NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE:
+      process.env.NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE,
   },
 })

env/server.ts

@@ -185,7 +185,7 @@ export const env = createEnv({
       process.env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET,
     GOOGLE_STATIC_MAP_ID: process.env.GOOGLE_STATIC_MAP_ID,
     GOOGLE_DYNAMIC_MAP_ID: process.env.GOOGLE_DYNAMIC_MAP_ID,
-    HIDE_FOR_NEXT_RELEASE: process.env.HIDE_FOR_NEXT_RELEASE,
+    HIDE_FOR_NEXT_RELEASE: process.env.NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE,
     USE_NEW_REWARDS_ENDPOINT: process.env.USE_NEW_REWARDS_ENDPOINT,
     USE_NEW_REWARD_MODEL: process.env.USE_NEW_REWARD_MODEL,
     ENABLE_BOOKING_FLOW: process.env.ENABLE_BOOKING_FLOW,

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)