Merged in feature/autocomplete-search (pull request #1725)

Feature/autocomplete search

* wip autocomplete search

* add skeletons to loading

* Using aumlauts/accents when searching will still give results
remove unused reducer
sort autocomplete results

* remove testcode

* Add tests for autocomplete

* cleanup tests

* use node@20

* use node 22

* use node22

* merge
fix: search button outside of viewport

* merge

* remove more unused code

* fix: error message when empty search field in booking widget

* fix: don't display empty white box when search field is empty and no searchHistory is present

* merge

* fix: set height of shimmer for search skeleton

* rename autocomplete trpc -> destinationsAutocomplete

* more accute cache key naming

* fix: able to control wether bookingwidget is visible on startPage
fix: sticky booking widget under alert

* remove unused code

* fix: skeletons
fix: error overlay on search startpage

* remove extra .nvmrc

* merge


Approved-by: Linus Flood

apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx

@@ -12,7 +12,6 @@ import { dt } from "@/lib/dt"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Divider from "@/components/TempDesignSystem/Divider"
 import useLang from "@/hooks/useLang"
-import isValidJson from "@/utils/isValidJson"
 
 import styles from "./button.module.css"
 
@@ -20,7 +19,6 @@ import type {
   BookingWidgetSchema,
   BookingWidgetToggleButtonProps,
 } from "@/types/components/bookingWidget"
-import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 export default function MobileToggleButton({
   openMobileSearch,
@@ -28,20 +26,16 @@ export default function MobileToggleButton({
   const intl = useIntl()
   const lang = useLang()
   const date = useWatch<BookingWidgetSchema, "date">({ name: "date" })
-  const location = useWatch<BookingWidgetSchema, "location">({
-    name: "location",
-  })
   const rooms = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
-
-  const parsedLocation: Location | null =
-    location && isValidJson(location)
-      ? JSON.parse(decodeURIComponent(location))
-      : null
+  const searchTerm = useWatch<BookingWidgetSchema, "search">({ name: "search" })
+  const selectedSearchTerm = useWatch<BookingWidgetSchema, "selectedSearch">({
+    name: "selectedSearch",
+  })
 
   const selectedFromDate = dt(date.fromDate).locale(lang).format("D MMM")
   const selectedToDate = dt(date.toDate).locale(lang).format("D MMM")
 
-  const locationAndDateIsSet = parsedLocation && date
+  const locationAndDateIsSet = searchTerm && date
 
   const totalNights = dt(date.toDate).diff(dt(date.fromDate), "days")
   const totalRooms = rooms.length
@@ -99,8 +93,8 @@ export default function MobileToggleButton({
             </Typography>
             <Typography variant={"Body/Paragraph/mdRegular"}>
               <span className={styles.placeholder}>
-                {parsedLocation
-                  ? parsedLocation.name
+                {searchTerm
+                  ? searchTerm
                   : intl.formatMessage({ id: "Destination" })}
               </span>
             </Typography>
@@ -133,7 +127,7 @@ export default function MobileToggleButton({
         <>
           <span className={styles.block}>
             <Typography variant={"Body/Supporting text (caption)/smRegular"}>
-              <span className={styles.blockLabel}>{parsedLocation?.name}</span>
+              <span className={styles.blockLabel}>{selectedSearchTerm}</span>
             </Typography>
             <Typography variant={"Body/Supporting text (caption)/smRegular"}>
               <span className={styles.locationAndDate}>