scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Anton Gunnarsson
2025-08-05 09:20:20 +00:00
parent 03c9244fdf
commit 1bd8fe6821
206 changed files with 1936 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/hooks/useScrollSpy.ts
View File

@@ -1,6 +1,6 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { debounce } from "../utils/debounce"
import { debounce } from "@scandic-hotels/common/utils/debounce"
export default function useScrollSpy(
sectionIds: string[],

87
apps/scandic-web/hooks/useSearchHistory.ts
View File

@@ -1,87 +0,0 @@
import { useCallback, useEffect, useState } from "react"
import { logger } from "@scandic-hotels/common/logger"
import {
type AutoCompleteLocation,
autoCompleteLocationSchema,
} from "@scandic-hotels/trpc/routers/autocomplete/schema"
import useLang from "@/hooks/useLang"
export function useSearchHistory() {
const MAX_HISTORY_LENGTH = 5
const KEY = useSearchHistoryKey()
const getHistoryFromLocalStorage = useCallback((): AutoCompleteLocation[] => {
const stringifiedHistory = localStorage.getItem(KEY)
try {
const parsedHistory = JSON.parse(stringifiedHistory ?? "[]")
if (!Array.isArray(parsedHistory)) {
throw new Error("Invalid search history format")
}
const existingHistory = parsedHistory.map((item) =>
autoCompleteLocationSchema.parse(item)
)
return existingHistory
} catch (error) {
logger.error("Failed to parse search history:", error)
localStorage.removeItem(KEY)
return []
}
}, [KEY])
function updateSearchHistory(newItem: AutoCompleteLocation) {
const existingHistory = getHistoryFromLocalStorage()
if (!autoCompleteLocationSchema.safeParse(newItem).success) {
return existingHistory
}
const oldSearchHistoryWithoutTheNew = existingHistory.filter(
(h) => h.type !== newItem.type || h.id !== newItem.id
)
const updatedSearchHistory = [
newItem,
...oldSearchHistoryWithoutTheNew.slice(0, MAX_HISTORY_LENGTH - 1),
]
localStorage.setItem(KEY, JSON.stringify(updatedSearchHistory))
return updatedSearchHistory
}
const [searchHistory, setSearchHistory] = useState<AutoCompleteLocation[]>([])
useEffect(() => {
setSearchHistory(getHistoryFromLocalStorage())
}, [KEY, getHistoryFromLocalStorage])
function clearHistory() {
localStorage.removeItem(KEY)
setSearchHistory([])
}
function insertSearchHistoryItem(
newItem: AutoCompleteLocation
): AutoCompleteLocation[] {
const updatedHistory = updateSearchHistory(newItem)
setSearchHistory(updatedHistory)
return updatedHistory
}
return {
searchHistory,
insertSearchHistoryItem,
clearHistory,
}
}
function useSearchHistoryKey() {
const SEARCH_HISTORY_LOCALSTORAGE_KEY = "searchHistory"
const lang = useLang()
return `${SEARCH_HISTORY_LOCALSTORAGE_KEY}-${lang}`.toLowerCase()
}

149
apps/scandic-web/hooks/useStickyPosition.ts
View File

@@ -1,149 +0,0 @@
"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,
}
}