From 77d449b8cbe1ac6be13504ba958c391b5ff3b6ae Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Wed, 18 Dec 2024 08:51:58 +0000
Subject: [PATCH] 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         |  2 +-
 .env.test                  |  2 +-
 env/client.ts              |  8 ++++++++
 env/server.ts              |  2 +-
 hooks/useStickyPosition.ts | 27 +++++++++++++++++++++++----
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/.env.local.example b/.env.local.example
index 5043646c9..7de28e6ee 100644
--- a/.env.local.example
+++ b/.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"
diff --git a/.env.test b/.env.test
index e48b5dc41..b9083de46 100644
--- a/.env.test
+++ b/.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"
diff --git a/env/client.ts b/env/client.ts
index 467100c01..fc57c579a 100644
--- a/env/client.ts
+++ b/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,
   },
 })
diff --git a/env/server.ts b/env/server.ts
index 3ff18ae24..c1befd972 100644
--- a/env/server.ts
+++ b/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,
diff --git a/hooks/useStickyPosition.ts b/hooks/useStickyPosition.ts
index 2c7fdf6ea..08fce174b 100644
--- a/hooks/useStickyPosition.ts
+++ b/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)