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/booking-flow/lib/hooks/useLang.ts

@@ -0,0 +1,17 @@
+"use client"
+import { useParams } from "next/navigation"
+
+import { Lang } from "@scandic-hotels/common/constants/language"
+import { languageSchema } from "@scandic-hotels/common/utils/languages"
+
+/**
+ * A hook to get the current lang from the URL
+ */
+export default function useLang() {
+  const { lang } = useParams<{
+    lang: Lang
+  }>()
+
+  const parsedLang = languageSchema.safeParse(lang)
+  return parsedLang.success ? parsedLang.data : Lang.en
+}

packages/booking-flow/lib/hooks/useSearchHistory.ts

@@ -0,0 +1,87 @@
+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 "./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()
+}