Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)

feat(SW-2879): Move BookingWidget to booking-flow package

* Fix lockfile

* Fix styling

* a tiny little booking widget test

* Tiny fixes

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Remove unused scripts

* lint:fix

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Tiny lint fixes

* update test

* Update Input in booking-flow

* Clean up comments etc

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Setup tracking context for booking-flow

* Add missing use client

* Fix temp tracking function

* Pass booking to booking-widget

* Remove comment

* Add use client to booking widget tracking provider

* Add use client to tracking functions

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Move debug page

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package


Approved-by: Bianca Widstam

packages/common/constants/dateFormats.ts

@@ -0,0 +1,37 @@
+import { Lang } from "./language"
+
+export const longDateFormat = {
+  [Lang.en]: "ddd, D MMM",
+  [Lang.sv]: "ddd D MMM",
+  [Lang.no]: "ddd D. MMM",
+  [Lang.da]: "ddd D. MMM",
+  [Lang.de]: "ddd D. MMM",
+  [Lang.fi]: "ddd D.M",
+} as const
+
+export const longDateWithYearFormat = {
+  [Lang.en]: "ddd, D MMM YYYY",
+  [Lang.sv]: "ddd D MMM YYYY",
+  [Lang.no]: "ddd D. MMM YYYY",
+  [Lang.da]: "ddd D. MMM YYYY",
+  [Lang.de]: "ddd D. MMM YYYY",
+  [Lang.fi]: "ddd D.M. YYYY",
+} as const
+
+export const shortDateFormat = {
+  [Lang.en]: "D MMM",
+  [Lang.sv]: "D MMM",
+  [Lang.no]: "D. MMM",
+  [Lang.da]: "D. MMM",
+  [Lang.de]: "D. MMM",
+  [Lang.fi]: "D.MM.",
+} as const
+
+export const changeOrCancelDateFormat = {
+  [Lang.sv]: "dddd D MMM",
+  [Lang.en]: "dddd D MMM",
+  [Lang.no]: "dddd D. MMM",
+  [Lang.da]: "dddd D. MMM",
+  [Lang.de]: "dddd D. MMM",
+  [Lang.fi]: "dd D MMMM",
+} as const

packages/common/constants/routes/hotelReservation.ts

@@ -3,3 +3,44 @@ import type { Lang } from "../language"
 export function selectRate(lang: Lang) {
   return `/${lang}/hotelreservation/select-rate`
 }
+
+export function hotelreservation(lang: Lang) {
+  return `/${lang}/hotelreservation`
+}
+
+export function bookingConfirmation(lang: Lang) {
+  return `${hotelreservation(lang)}/booking-confirmation`
+}
+
+export function details(lang: Lang) {
+  return `${hotelreservation(lang)}/details`
+}
+
+export function selectHotel(lang: Lang) {
+  return `${hotelreservation(lang)}/select-hotel`
+}
+
+export function selectHotelMap(lang: Lang) {
+  return `${hotelreservation(lang)}/select-hotel/map`
+}
+
+export function selectRateWithParams(
+  lang: Lang,
+  hotelId: string,
+  fromdate: string,
+  todate: string
+) {
+  return `${hotelreservation(lang)}/select-rate?room%5B0%5D.adults=1&fromdate=${fromdate}&todate=${todate}&hotel=${hotelId}`
+}
+
+export function alternativeHotels(lang: Lang) {
+  return `${hotelreservation(lang)}/alternative-hotels`
+}
+
+export function alternativeHotelsMap(lang: Lang) {
+  return `${hotelreservation(lang)}/alternative-hotels/map`
+}
+
+export function guaranteeCallback(lang: Lang) {
+  return `${hotelreservation(lang)}/gla-payment-callback`
+}

packages/common/hooks/useStickyPosition.ts

@@ -0,0 +1,148 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+
+import useStickyPositionStore, {
+  type StickyElement,
+  type StickyElementNameEnum,
+} from "../stores/sticky-position"
+import { debounce } from "../utils/debounce"
+
+interface UseStickyPositionProps {
+  ref?: React.RefObject<HTMLElement | null>
+  name?: StickyElementNameEnum
+  group?: string
+}
+
+// Global singleton ResizeObserver to observe the body only once
+let resizeObserver: ResizeObserver | null = null
+
+/**
+ * Custom hook to manage sticky positioning of elements within a page.
+ * This hook registers an element as sticky, calculates its top offset based on
+ * other registered sticky elements, and updates the element's position dynamically.
+ *
+ * @param {UseStickyPositionProps} [props] - The properties for configuring the hook.
+ * @param {React.RefObject<HTMLElement>} [props.ref] - A reference to the HTML element that should be sticky. Is optional to allow for other components to only get the height of the sticky elements.
+ * @param {StickyElementNameEnum} [props.name] - A unique name for the sticky element, used for tracking.
+ * @param {string} [props.group] - An optional group identifier to make multiple elements share the same top offset. Defaults to the name if not provided.
+ *
+ * @returns {Object} An object containing information about the sticky elements.
+ * @returns {number | null} [returns.currentHeight] - The current height of the registered sticky element, or `null` if not available.
+ * @returns {Array<StickyElement>} [returns.allElements] - An array containing the heights, names, and groups of all registered sticky elements.
+ */
+export default function useStickyPosition({
+  ref,
+  name,
+  group,
+}: UseStickyPositionProps = {}) {
+  const {
+    registerSticky,
+    unregisterSticky,
+    stickyElements,
+    updateHeights,
+    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.
+      // If the group is not provided, it defaults to the value of the name.
+      // This registration keeps track of the sticky element and its height.
+      registerSticky(ref, name, group || name)
+
+      // Update the heights of all registered sticky elements.
+      // This ensures that the height information is accurate and up-to-date.
+      updateHeights()
+
+      return () => {
+        unregisterSticky(ref)
+      }
+    }
+  }, [ref, name, group, registerSticky, unregisterSticky, updateHeights])
+
+  /**
+   * Get the top position of element at index `index`
+   *
+   * Calculates the total height of all sticky elements _before_ the element
+   * at position `index`. If `index` is not provided all elements are included
+   * in the calculation. Takes grouping into consideration (only counts one
+   * element per group)
+   */
+  const getTopOffset = useCallback(
+    (index?: number) => {
+      // Get the group name of the current sticky element.
+      // This will be used to only count one element per group.
+      const elementGroup = index ? stickyElements[index].group : undefined
+
+      return stickyElements
+        .slice(0, index)
+        .reduce<StickyElement[]>((acc, curr) => {
+          if (
+            (elementGroup && curr.group === elementGroup) ||
+            acc.some((elem: StickyElement) => elem.group === curr.group)
+          ) {
+            return acc
+          }
+          return [...acc, curr]
+        }, [])
+        .reduce((acc, el) => acc + el.height, baseTopOffset)
+    },
+    [baseTopOffset, stickyElements]
+  )
+
+  useEffect(() => {
+    if (ref) {
+      // Find the index of the current sticky element in the array of stickyElements.
+      // This helps us determine its position relative to other sticky elements.
+      const index = stickyElements.findIndex((el) => el.ref === ref)
+
+      if (index !== -1 && ref.current) {
+        const topOffset = getTopOffset(index)
+        // 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`
+      }
+    }
+  }, [baseTopOffset, stickyElements, ref, getTopOffset])
+
+  useEffect(() => {
+    if (!resizeObserver) {
+      const debouncedResizeHandler = debounce(() => {
+        updateHeights()
+
+        // Only do this special handling if we have the current header
+        if (document.body.clientWidth > 950) {
+          setBaseTopOffset(0)
+        } else {
+          setBaseTopOffset(52.41) // The height of current mobile header
+        }
+      }, 100)
+
+      resizeObserver = new ResizeObserver(debouncedResizeHandler)
+    }
+
+    resizeObserver.observe(document.body)
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.unobserve(document.body)
+      }
+    }
+  }, [updateHeights])
+
+  return {
+    currentHeight: ref?.current?.offsetHeight || null,
+    allElements: getAllElements(),
+    getTopOffset,
+  }
+}

packages/common/package.json

@@ -28,10 +28,15 @@
     "./utils/dateFormatting": "./utils/dateFormatting.ts",
     "./utils/rangeArray": "./utils/rangeArray.ts",
     "./utils/zod/*": "./utils/zod/*.ts",
+    "./utils/debounce": "./utils/debounce.ts",
+    "./utils/isValidJson": "./utils/isValidJson.ts",
+    "./hooks/*": "./hooks/*.ts",
+    "./stores/*": "./stores/*.ts",
     "./constants/language": "./constants/language.ts",
     "./constants/membershipLevels": "./constants/membershipLevels.ts",
     "./constants/paymentMethod": "./constants/paymentMethod.ts",
     "./constants/currency": "./constants/currency.ts",
+    "./constants/dateFormats": "./constants/dateFormats.ts",
     "./constants/routes/*": "./constants/routes/*.ts"
   },
   "dependencies": {
@@ -41,7 +46,11 @@
     "deepmerge": "^4.3.1",
     "flat": "^6.0.1",
     "lodash-es": "^4.17.21",
-    "zod": "^3.24.4"
+    "zod": "^3.24.4",
+    "zustand": "^4.5.2"
+  },
+  "peerDependencies": {
+    "react": "^19"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.9",

packages/common/stores/sticky-position.ts

@@ -0,0 +1,84 @@
+import { create } from "zustand"
+
+export enum StickyElementNameEnum {
+  SITEWIDE_ALERT = "SITEWIDE_ALERT",
+  BOOKING_WIDGET = "BOOKING_WIDGET",
+  MEETING_PACKAGE_WIDGET = "MEETING_PACKAGE_WIDGET",
+  HOTEL_TAB_NAVIGATION = "HOTEL_TAB_NAVIGATION",
+  HOTEL_STATIC_MAP = "HOTEL_STATIC_MAP",
+  DESTINATION_SIDEBAR = "DESTINATION_SIDEBAR",
+}
+
+export interface StickyElement {
+  height: number
+  ref: React.RefObject<HTMLElement | null>
+  group: string
+  priority: number
+  name: StickyElementNameEnum
+}
+
+interface StickyStore {
+  stickyElements: StickyElement[]
+  registerSticky: (
+    ref: React.RefObject<HTMLElement | null>,
+    name: StickyElementNameEnum,
+    group: string
+  ) => void
+  unregisterSticky: (ref: React.RefObject<HTMLElement | null>) => void
+  updateHeights: () => void
+  getAllElements: () => Array<StickyElement>
+}
+
+// Map to define priorities based on StickyElementNameEnum
+const priorityMap: Record<StickyElementNameEnum, number> = {
+  [StickyElementNameEnum.SITEWIDE_ALERT]: 1,
+  [StickyElementNameEnum.BOOKING_WIDGET]: 2,
+
+  [StickyElementNameEnum.HOTEL_TAB_NAVIGATION]: 3,
+  [StickyElementNameEnum.HOTEL_STATIC_MAP]: 3,
+
+  [StickyElementNameEnum.MEETING_PACKAGE_WIDGET]: 3,
+  [StickyElementNameEnum.DESTINATION_SIDEBAR]: 3,
+}
+
+const useStickyPositionStore = create<StickyStore>((set, get) => ({
+  stickyElements: [],
+  registerSticky: (ref, name, group) => {
+    const priority = priorityMap[name] || 0
+
+    set((state) => {
+      const newStickyElement: StickyElement = {
+        height: ref.current?.offsetHeight || 0,
+        ref,
+        group,
+        priority,
+        name,
+      }
+
+      const updatedStickyElements = [
+        ...state.stickyElements,
+        newStickyElement,
+      ].sort((a, b) => a.priority - b.priority)
+
+      return {
+        stickyElements: updatedStickyElements,
+      }
+    })
+  },
+  unregisterSticky: (ref) => {
+    set((state) => ({
+      stickyElements: state.stickyElements.filter((el) => el.ref !== ref),
+    }))
+  },
+  updateHeights: () => {
+    set((state) => ({
+      stickyElements: state.stickyElements.map((el) => ({
+        ...el,
+        height: el.ref.current?.offsetHeight || el.height,
+      })),
+    }))
+  },
+  getAllElements: () => get().stickyElements,
+}))
+
+export default useStickyPositionStore

packages/common/utils/debounce.ts

@@ -0,0 +1,12 @@
+export function debounce<Params extends any[]>(
+  func: (...args: Params) => any,
+  delay = 300
+) {
+  let debounceTimer: ReturnType<typeof setTimeout>
+
+  return function <U>(this: U, ...args: Parameters<typeof func>) {
+    const context = this
+    clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => func.apply(context, args), delay)
+  }
+}

packages/common/utils/isValidJson.ts

@@ -0,0 +1,9 @@
+export default function isValidJson(value: string | null | undefined): boolean {
+  if (!value || value === "undefined") return false
+  try {
+    JSON.parse(value)
+    return true
+  } catch {
+    return false
+  }
+}

packages/common/utils/maskValue.ts

@@ -28,7 +28,7 @@ export function email(str: string) {
     if (domainParts.length > 1) {
       const domainTLD = domainParts.pop()
       const domainPartsMasked = domainParts
-        .map((domainPart, i) => {
+        .map((domainPart) => {
           return maskAllButFirstChar(domainPart)
         })
         .join(".")