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/Client.tsx

@@ -34,7 +34,6 @@ import type {
   BookingWidgetSchema,
   BookingWidgetSearchData,
 } from "@/types/components/bookingWidget"
-import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 export default function BookingWidgetClient({
   type,
@@ -44,23 +43,29 @@ export default function BookingWidgetClient({
   const [isOpen, setIsOpen] = useState(false)
   const bookingWidgetRef = useRef(null)
   const lang = useLang()
-  const {
-    data: locations,
-    isLoading,
-    isSuccess,
-  } = trpc.hotel.locations.get.useQuery({
-    lang,
-  })
+
+  const params = convertSearchParamsToObj<BookingWidgetSearchData>(
+    bookingWidgetSearchParams
+  )
+
+  const shouldFetchAutoComplete = !!params.hotelId || !!params.city
+
+  const { data, isPending } = trpc.autocomplete.destinations.useQuery(
+    {
+      lang,
+      query: "",
+      selectedHotelId: params.hotelId,
+      selectedCity: params.city,
+    },
+    { enabled: shouldFetchAutoComplete }
+  )
+  const shouldShowSkeleton = shouldFetchAutoComplete && isPending
 
   useStickyPosition({
     ref: bookingWidgetRef,
     name: StickyElementNameEnum.BOOKING_WIDGET,
   })
 
-  const params = convertSearchParamsToObj<BookingWidgetSearchData>(
-    bookingWidgetSearchParams
-  )
-
   const now = dt()
   // if fromDate or toDate is undefined, dt will return value that represents the same as 'now' above.
   // this is fine as isDateParamValid will catch this and default the values accordingly.
@@ -78,13 +83,8 @@ export default function BookingWidgetClient({
     toDate = now.add(1, "day")
   }
 
-  let selectedLocation: Location | null = null
-
-  if (params.hotelId) {
-    selectedLocation = getLocationObj(locations ?? [], params.hotelId)
-  } else if (params.city) {
-    selectedLocation = getLocationObj(locations ?? [], params.city)
-  }
+  let selectedLocation =
+    data?.currentSelection.hotel ?? data?.currentSelection.city
 
   // if bookingCode is not provided in the search params,
   // we will fetch it from the page settings stored in Contentstack.
@@ -105,11 +105,12 @@ export default function BookingWidgetClient({
       childrenInRoom: [],
     },
   ]
-
+  const hotelId = isNaN(+params.hotelId) ? undefined : +params.hotelId
   const methods = useForm<BookingWidgetSchema>({
     defaultValues: {
       search: selectedLocation?.name ?? "",
-      location: selectedLocation ? JSON.stringify(selectedLocation) : undefined,
+      // Only used for displaying the selected location for mobile, not for actual form input
+      selectedSearch: selectedLocation?.name ?? "",
       date: {
         fromDate: fromDate.format("YYYY-MM-DD"),
         toDate: toDate.format("YYYY-MM-DD"),
@@ -120,6 +121,8 @@ export default function BookingWidgetClient({
       },
       redemption: params?.searchType === REDEMPTION,
       rooms: defaultRoomsData,
+      city: params.city || undefined,
+      hotel: hotelId,
     },
     shouldFocusError: false,
     mode: "onSubmit",
@@ -135,7 +138,7 @@ export default function BookingWidgetClient({
       we need to update the default values when data is available
     */
     methods.setValue("search", selectedLocation.name)
-    methods.setValue("location", JSON.stringify(selectedLocation))
+    methods.setValue("selectedSearch", selectedLocation.name)
   }, [selectedLocation, methods])
 
   function closeMobileSearch() {
@@ -164,27 +167,6 @@ export default function BookingWidgetClient({
     }
   }, [])
 
-  useEffect(() => {
-    if (typeof window !== "undefined" && !selectedLocation) {
-      const sessionStorageSearchData = sessionStorage.getItem("searchData")
-
-      const initialSelectedLocation: Location | undefined =
-        sessionStorageSearchData && isValidJson(sessionStorageSearchData)
-          ? JSON.parse(sessionStorageSearchData)
-          : undefined
-
-      if (initialSelectedLocation?.name) {
-        methods.setValue("search", initialSelectedLocation.name)
-      }
-      if (sessionStorageSearchData) {
-        methods.setValue(
-          "location",
-          encodeURIComponent(sessionStorageSearchData)
-        )
-      }
-    }
-  }, [methods, selectedLocation])
-
   useEffect(() => {
     if (!window?.sessionStorage || !window?.localStorage) return
 
@@ -200,13 +182,16 @@ export default function BookingWidgetClient({
     }
   }, [methods, selectedBookingCode])
 
-  if (isLoading) {
-    return <BookingWidgetSkeleton type={type} />
-  }
+  useEffect(() => {
+    if (!selectedLocation) {
+      return
+    }
 
-  if (!isSuccess || !locations) {
-    // TODO: handle error cases
-    return null
+    methods.setValue("search", selectedLocation.name)
+  }, [selectedLocation, methods])
+
+  if (shouldShowSkeleton) {
+    return <BookingWidgetSkeleton type={type} />
   }
 
   const classNames = bookingWidgetContainerVariants({
@@ -225,7 +210,7 @@ export default function BookingWidgetClient({
           >
             <MaterialIcon icon="close" />
           </button>
-          <Form locations={locations} type={type} onClose={closeMobileSearch} />
+          <Form type={type} onClose={closeMobileSearch} />
         </div>
       </section>
       <div className={styles.backdrop} onClick={closeMobileSearch} />
@@ -254,30 +239,11 @@ export function BookingWidgetSkeleton({
   )
 }
 
-function getLocationObj(locations: Location[], destination: string) {
-  try {
-    const location = locations.find((location) => {
-      if (location.type === "hotels") {
-        return location.operaId === destination
-      } else if (location.type === "cities") {
-        return location.name.toLowerCase() === destination.toLowerCase()
-      }
-    })
-
-    if (location) {
-      return location
-    }
-  } catch (_) {
-    // ignore any errors
-  }
-  return null
-}
-
 export const bookingWidgetContainerVariants = cva(styles.wrapper, {
   variants: {
     type: {
-      default: styles.default,
-      full: styles.full,
+      default: "",
+      full: "",
       compact: styles.compact,
     },
   },

apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css

@@ -22,6 +22,7 @@
       left: 0;
       right: 0;
       z-index: 1000;
+      margin-top: var(--sitewide-alert-sticky-height);
     }
   }
 }

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

@@ -1,4 +1,7 @@
-import { getPageSettingsBookingCode } from "@/lib/trpc/memoizedRequests"
+import {
+  getPageSettingsBookingCode,
+  isBookingWidgetHidden,
+} from "@/lib/trpc/memoizedRequests"
 
 import { FloatingBookingWidgetClient } from "./FloatingBookingWidgetClient"
 
@@ -7,7 +10,11 @@ import type { BookingWidgetProps } from "@/types/components/bookingWidget"
 export async function FloatingBookingWidget({
   bookingWidgetSearchParams,
 }: Omit<BookingWidgetProps, "type">) {
-  console.log("DEBUG: FloatingBookingWidget", bookingWidgetSearchParams)
+  const isHidden = await isBookingWidgetHidden()
+
+  if (isHidden) {
+    return null
+  }
 
   let pageSettingsBookingCodePromise: Promise<string> | null = null
   if (!bookingWidgetSearchParams.bookingCode) {

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}>