feat: trigger loading states immediately upon navigation

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/layout.tsx

@@ -1,7 +1,22 @@
+import { Suspense } from "react"
+
+import ChildrenWrapper from "@/components/ChildrenWrapper"
+
 import styles from "./layout.module.css"
 
-export default function HotelReservationLayout({
+export default function AlternativeHotelsLayout({
   children,
 }: React.PropsWithChildren) {
-  return <div className={styles.layout}>{children}</div>
+  return (
+    <div className={styles.layout}>
+      {/* 
+        This Suspense is only needed to prevent useSearchParams from
+        making everything rendered client-side 
+        https://nextjs.org/docs/14/app/api-reference/functions/use-search-params#static-rendering
+      */}
+      <Suspense fallback={null}>
+        <ChildrenWrapper>{children}</ChildrenWrapper>
+      </Suspense>
+    </div>
+  )
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/loading.tsx

@@ -0,0 +1,5 @@
+import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton"
+
+export default function AlternativeHotelsLoading() {
+  return <SelectHotelSkeleton />
+}

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/page.tsx

@@ -1,30 +1,131 @@
+import stringify from "json-stable-stringify-without-jsonify"
+import { cookies } from "next/headers"
+import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
-import SelectHotel from "@/components/HotelReservation/SelectHotel"
-import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton"
+import { FamilyAndFriendsCodes } from "@/constants/booking"
+import { alternativeHotelsMap } from "@/constants/routes/hotelReservation"
 
-import type { AlternativeHotelsSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import FnFNotAllowedAlert from "@/components/HotelReservation/FnFNotAllowedAlert/FnFNotAllowedAlert"
+import SelectHotel from "@/components/HotelReservation/SelectHotel"
+import { getHotels } from "@/components/HotelReservation/SelectHotel/helpers"
+import { getTracking } from "@/components/HotelReservation/SelectHotel/tracking"
+import TrackingSDK from "@/components/TrackingSDK"
+import { getIntl } from "@/i18n"
+import { setLang } from "@/i18n/serverContext"
+import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
+
+import type {
+  AlternativeHotelsSearchParams,
+  SelectHotelSearchParams,
+} from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function AlternativeHotelsPage({
   params,
   searchParams,
 }: PageArgs<LangParams, AlternativeHotelsSearchParams>) {
-  const roomKey = Object.keys(searchParams)
-    .filter((key) => key.startsWith("room["))
-    .map((key) => searchParams[key])
-    .join("-")
+  setLang(params.lang)
+  const searchDetails = await getHotelSearchDetails({ searchParams }, true)
 
+  if (!searchDetails || !searchDetails.hotel || !searchDetails.city) {
+    return notFound()
+  }
+
+  const {
+    adultsInRoom,
+    bookingCode,
+    childrenInRoom,
+    city,
+    hotel: isAlternativeFor,
+    noOfRooms,
+    redemption,
+    selectHotelParams,
+  } = searchDetails
+
+  if (bookingCode && FamilyAndFriendsCodes.includes(bookingCode)) {
+    const cookieStore = cookies()
+    const isInvalidFNF = cookieStore.get("sc")?.value !== "1"
+
+    if (isInvalidFNF) {
+      return <FnFNotAllowedAlert />
+    }
+  }
+
+  // TODO: This needs to be refactored into its
+  // own functions
+  const hotels = await getHotels(
+    selectHotelParams as SelectHotelSearchParams,
+    isAlternativeFor,
+    bookingCode,
+    city,
+    !!redemption
+  )
+
+  const arrivalDate = new Date(selectHotelParams.fromDate)
+  const departureDate = new Date(selectHotelParams.toDate)
+
+  const isRedemptionAvailability = redemption
+    ? hotels.some(
+        (hotel) => hotel.availability.productType?.redemptions?.length
+      )
+    : false
+
+  const isBookingCodeRateAvailable = bookingCode
+    ? hotels.some(
+        (hotel) =>
+          hotel.availability.bookingCode &&
+          hotel.availability.status === "Available"
+      )
+    : false
+
+  const { hotelsTrackingData, pageTrackingData } = getTracking(
+    params.lang,
+    !!isAlternativeFor,
+    arrivalDate,
+    departureDate,
+    adultsInRoom,
+    childrenInRoom,
+    hotels?.length ?? 0,
+    selectHotelParams.hotelId,
+    noOfRooms,
+    hotels?.[0]?.hotel.address.country,
+    hotels?.[0]?.hotel.address.city,
+    selectHotelParams.city,
+    bookingCode,
+    isBookingCodeRateAvailable,
+    redemption,
+    isRedemptionAvailability
+  )
+
+  const mapHref = alternativeHotelsMap(params.lang)
+
+  const intl = await getIntl()
+  const title = intl.formatMessage(
+    {
+      defaultMessage: "Alternatives for {value}",
+    },
+    {
+      value: isAlternativeFor.name,
+    }
+  )
+  const suspenseKey = stringify(searchParams)
   return (
-    <Suspense
-      key={`${searchParams.hotel}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
-      fallback={<SelectHotelSkeleton />}
-    >
+    <>
       <SelectHotel
-        params={params}
-        searchParams={searchParams}
-        isAlternativeHotels
+        bookingCode={bookingCode}
+        city={city}
+        hotels={hotels}
+        isAlternative={!!isAlternativeFor}
+        mapHref={mapHref}
+        title={title}
       />
-    </Suspense>
+      <Suspense key={`${suspenseKey}-tracking`} fallback={null}>
+        <TrackingSDK
+          pageData={pageTrackingData}
+          hotelInfo={hotelsTrackingData}
+        />
+      </Suspense>
+    </>
   )
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx

@@ -4,7 +4,7 @@ import styles from "./layout.module.css"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
 
-export default function HotelReservationLayout({
+export default function StandardHotelReservationLayout({
   children,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
   return (

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.tsx

@@ -1,9 +1,22 @@
+import { Suspense } from "react"
+
+import ChildrenWrapper from "@/components/ChildrenWrapper"
+
 import styles from "./layout.module.css"
 
-import type { LangParams, LayoutArgs } from "@/types/params"
-
-export default function HotelReservationLayout({
+export default function SelectHotelLayout({
   children,
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
-  return <div className={styles.layout}>{children}</div>
+}: React.PropsWithChildren) {
+  return (
+    <div className={styles.layout}>
+      {/* 
+        This Suspense is only needed to prevent useSearchParams from
+        making everything rendered client-side 
+        https://nextjs.org/docs/14/app/api-reference/functions/use-search-params#static-rendering
+      */}
+      <Suspense fallback={null}>
+        <ChildrenWrapper>{children}</ChildrenWrapper>
+      </Suspense>
+    </div>
+  )
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/loading.tsx

@@ -0,0 +1,5 @@
+import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton"
+
+export default function SelectHotelLoading() {
+  return <SelectHotelSkeleton />
+}

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -1,8 +1,18 @@
 import stringify from "json-stable-stringify-without-jsonify"
+import { cookies } from "next/headers"
+import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
+import { FamilyAndFriendsCodes } from "@/constants/booking"
+import { selectHotelMap } from "@/constants/routes/hotelReservation"
+
+import FnFNotAllowedAlert from "@/components/HotelReservation/FnFNotAllowedAlert/FnFNotAllowedAlert"
 import SelectHotel from "@/components/HotelReservation/SelectHotel"
-import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton"
+import { getHotels } from "@/components/HotelReservation/SelectHotel/helpers"
+import { getTracking } from "@/components/HotelReservation/SelectHotel/tracking"
+import TrackingSDK from "@/components/TrackingSDK"
+import { setLang } from "@/i18n/serverContext"
+import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
@@ -11,11 +21,91 @@ export default async function SelectHotelPage({
   params,
   searchParams,
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
-  const suspenseKey = stringify(searchParams)
+  setLang(params.lang)
+  const searchDetails = await getHotelSearchDetails({ searchParams })
 
+  if (!searchDetails || !searchDetails.city) return notFound()
+
+  const {
+    adultsInRoom,
+    bookingCode,
+    childrenInRoom,
+    city,
+    noOfRooms,
+    redemption,
+    selectHotelParams,
+  } = searchDetails
+
+  if (bookingCode && FamilyAndFriendsCodes.includes(bookingCode)) {
+    const cookieStore = cookies()
+    const isInvalidFNF = cookieStore.get("sc")?.value !== "1"
+
+    if (isInvalidFNF) {
+      return <FnFNotAllowedAlert />
+    }
+  }
+
+  const hotels = await getHotels(
+    selectHotelParams,
+    null,
+    bookingCode,
+    city,
+    !!redemption
+  )
+
+  const arrivalDate = new Date(selectHotelParams.fromDate)
+  const departureDate = new Date(selectHotelParams.toDate)
+
+  const isRedemptionAvailability = redemption
+    ? hotels.some(
+        (hotel) => hotel.availability.productType?.redemptions?.length
+      )
+    : false
+
+  const isBookingCodeRateAvailable = bookingCode
+    ? hotels.some(
+        (hotel) =>
+          hotel.availability.bookingCode &&
+          hotel.availability.status === "Available"
+      )
+    : false
+
+  const { hotelsTrackingData, pageTrackingData } = getTracking(
+    params.lang,
+    false,
+    arrivalDate,
+    departureDate,
+    adultsInRoom,
+    childrenInRoom,
+    hotels?.length ?? 0,
+    selectHotelParams.hotelId,
+    noOfRooms,
+    hotels?.[0]?.hotel.address.country,
+    hotels?.[0]?.hotel.address.city,
+    selectHotelParams.city,
+    bookingCode,
+    isBookingCodeRateAvailable,
+    redemption,
+    isRedemptionAvailability
+  )
+
+  const mapHref = selectHotelMap(params.lang)
+  const suspenseKey = stringify(searchParams)
   return (
-    <Suspense key={suspenseKey} fallback={<SelectHotelSkeleton />}>
-      <SelectHotel params={params} searchParams={searchParams} />
-    </Suspense>
+    <>
+      <SelectHotel
+        bookingCode={bookingCode}
+        city={city}
+        hotels={hotels}
+        mapHref={mapHref}
+        title={city.name}
+      />
+      <Suspense key={`${suspenseKey}-tracking`} fallback={null}>
+        <TrackingSDK
+          pageData={pageTrackingData}
+          hotelInfo={hotelsTrackingData}
+        />
+      </Suspense>
+    </>
   )
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/loading.tsx

@@ -0,0 +1,16 @@
+import { HotelInfoCardSkeleton } from "@/components/HotelReservation/SelectRate/HotelInfoCard"
+import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/RoomsContainer/RoomsContainerSkeleton"
+
+// Select Rate loading doesn't need a layout and wrapper
+// to force loading.tsx to show again since refetch of
+// availability happens client-side and only the RoomCards
+// display a loading state since we already have the hotel
+// data
+export default function LoadingSelectRate() {
+  return (
+    <>
+      <HotelInfoCardSkeleton />
+      <RoomsContainerSkeleton />
+    </>
+  )
+}

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx

@@ -1,12 +1,8 @@
-import stringify from "json-stable-stringify-without-jsonify"
 import { notFound } from "next/navigation"
-import { Suspense } from "react"
 
 import { combineRegExps, rateTypeRegex, REDEMPTION } from "@/constants/booking"
 
 import SelectRate from "@/components/HotelReservation/SelectRate"
-import { HotelInfoCardSkeleton } from "@/components/HotelReservation/SelectRate/HotelInfoCard"
-import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/RoomsContainer/RoomsContainerSkeleton"
 import { convertSearchParamsToObj } from "@/utils/url"
 
 import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
@@ -21,7 +17,6 @@ export default async function SelectRatePage({
   params,
   searchParams,
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
-  const suspenseKey = stringify(searchParams)
   const booking = convertSearchParamsToObj<SelectRateSearchParams>(searchParams)
 
   const isMultiRoom = booking.rooms.length > 1
@@ -40,17 +35,5 @@ export default async function SelectRatePage({
     delete searchParams.bookingCode
   }
 
-  return (
-    <Suspense
-      key={suspenseKey}
-      fallback={
-        <>
-          <HotelInfoCardSkeleton />
-          <RoomsContainerSkeleton />
-        </>
-      }
-    >
-      <SelectRate params={params} searchParams={searchParams} />
-    </Suspense>
-  )
+  return <SelectRate params={params} searchParams={searchParams} />
 }

apps/scandic-web/app/[lang]/(live)/@bookingwidget/hotelreservation/[...paths]/loading.tsx

@@ -0,0 +1,11 @@
+import { BookingWidgetSkeleton } from "@/components/BookingWidget/Client"
+
+// This file is crucial for displaying a loading
+// state immediately in the booking flow.
+// Next doesn't recognize manually added Suspense
+// boundaries during page navigation (Server->Client)
+// thus making it seem as the page is frozen during
+// the time it takes for `BookingWidget` to resolve.
+export default function BookingWidgetLoading() {
+  return <BookingWidgetSkeleton />
+}

apps/scandic-web/components/BookingWidget/Client.tsx

@@ -186,14 +186,6 @@ export default function BookingWidgetClient({
     }
   }, [methods, selectedBookingCode])
 
-  useEffect(() => {
-    if (!selectedLocation) {
-      return
-    }
-
-    methods.setValue("search", selectedLocation.name)
-  }, [selectedLocation, methods])
-
   if (shouldShowSkeleton) {
     return <BookingWidgetSkeleton type={type} />
   }

apps/scandic-web/components/ChildrenWrapper.tsx

@@ -0,0 +1,11 @@
+"use client"
+import { useSearchParams } from "next/navigation"
+import { Fragment } from "react"
+
+// Solution derived from leerobs example
+// https://github.com/vercel/next.js/issues/53543#issuecomment-2327883526
+// Ensure children are re-rendered when the search query changes
+export default function ChildrenWrapper({ children }: React.PropsWithChildren) {
+  const searchParams = useSearchParams()
+  return <Fragment key={searchParams.toString()}>{children}</Fragment>
+}

apps/scandic-web/components/HotelReservation/SelectHotel/helpers.ts

@@ -11,7 +11,10 @@ import type {
 } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
 import type { CategorizedFilters } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
-import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type {
+  AlternativeHotelsSearchParams,
+  SelectHotelSearchParams,
+} from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { AdditionalData, DetailedFacility, Hotel } from "@/types/hotel"
 import type { HotelsAvailabilityItem } from "@/types/trpc/routers/hotel/availability"
 import type {
@@ -155,7 +158,7 @@ function sortAndFilterHotelsByAvailability(
 }
 
 export async function getHotels(
-  booking: SelectHotelSearchParams,
+  booking: SelectHotelSearchParams | AlternativeHotelsSearchParams,
   isAlternativeFor: HotelLocation | null,
   bookingCode: string | undefined,
   city: Location,

apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

@@ -1,163 +1,82 @@
-import stringify from "json-stable-stringify-without-jsonify"
-import { cookies } from "next/headers"
-import { notFound } from "next/navigation"
-import { Suspense } from "react"
-
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import { FamilyAndFriendsCodes } from "@/constants/booking"
-import {
-  alternativeHotelsMap,
-  selectHotelMap,
-} from "@/constants/routes/hotelReservation"
-
+import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
+import BookingCodeFilter from "@/components/HotelReservation/SelectHotel/BookingCodeFilter"
+import HotelCount from "@/components/HotelReservation/SelectHotel/HotelCount"
+import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
+import HotelSorter from "@/components/HotelReservation/SelectHotel/HotelSorter"
+import MobileMapButtonContainer from "@/components/HotelReservation/SelectHotel/MobileMapButtonContainer"
+import NoAvailabilityAlert from "@/components/HotelReservation/SelectHotel/NoAvailabilityAlert"
 import StaticMap from "@/components/Maps/StaticMap"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
-import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
 
-import FnFNotAllowedAlert from "../FnFNotAllowedAlert/FnFNotAllowedAlert"
-import HotelCardListing from "../HotelCardListing"
-import BookingCodeFilter from "./BookingCodeFilter"
-import { getFiltersFromHotels, getHotels } from "./helpers"
-import HotelCount from "./HotelCount"
-import HotelFilter from "./HotelFilter"
-import HotelSorter from "./HotelSorter"
-import MobileMapButtonContainer from "./MobileMapButtonContainer"
-import NoAvailabilityAlert from "./NoAvailabilityAlert"
-import { getTracking } from "./tracking"
+import { getFiltersFromHotels, type HotelResponse } from "./helpers"
 
 import styles from "./selectHotel.module.css"
 
-import type { SelectHotelProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
-import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type { Location } from "@/types/trpc/routers/hotel/locations"
+
+interface SelectHotelProps {
+  isAlternative?: boolean
+  bookingCode?: string
+  city: Location
+  hotels: HotelResponse[]
+  mapHref: string
+  title: string
+}
 
 export default async function SelectHotel({
-  params,
-  searchParams,
-  isAlternativeHotels,
+  bookingCode,
+  city,
+  hotels,
+  isAlternative = false,
+  mapHref,
+  title,
 }: SelectHotelProps) {
   const intl = await getIntl()
 
-  const searchDetails = await getHotelSearchDetails(
-    {
-      searchParams: searchParams as SelectHotelSearchParams & {
-        [key: string]: string
-      },
-    },
-    isAlternativeHotels
-  )
-
-  if (!searchDetails) return notFound()
-
-  const {
-    adultsInRoom,
-    bookingCode,
-    childrenInRoom,
-    city,
-    hotel: isAlternativeFor,
-    noOfRooms,
-    redemption,
-    selectHotelParams,
-  } = searchDetails
-
-  if (!city) return notFound()
-
-  if (bookingCode && FamilyAndFriendsCodes.includes(bookingCode)) {
-    const cookieStore = cookies()
-    const isInValidFNF = cookieStore.get("sc")?.value !== "1"
-
-    if (isInValidFNF) {
-      return <FnFNotAllowedAlert />
-    }
-  }
-
-  const hotels = await getHotels(
-    selectHotelParams,
-    isAlternativeFor,
-    bookingCode,
-    city,
-    !!redemption
-  )
-
-  const arrivalDate = new Date(selectHotelParams.fromDate)
-  const departureDate = new Date(selectHotelParams.toDate)
-
+  const isAllUnavailable = !hotels.length
   const isCityWithCountry = (city: any): city is { country: string } =>
     "country" in city
-  const filterList = getFiltersFromHotels(hotels)
 
-  const isAllUnavailable = !hotels.length
-  const isRedemptionAvailability = redemption
+  const isBookingCodeRateAvailable = bookingCode
     ? hotels.some(
-        (hotel) => hotel.availability.productType?.redemptions?.length
-      )
+      (hotel) =>
+        hotel.availability.bookingCode &&
+        hotel.availability.status === "Available"
+    )
     : false
 
-  const suspenseKey = stringify(searchParams)
-
   const isFullPriceHotelAvailable = bookingCode
     ? hotels?.some(
-        (hotel) =>
-          !hotel.availability.bookingCode &&
-          hotel.availability.status === "Available"
-      )
+      (hotel) =>
+        !hotel.availability.bookingCode &&
+        hotel.availability.status === "Available"
+    )
     : false
 
-  const isBookingCodeRateAvailable = bookingCode
-    ? hotels?.some(
-        (hotel) =>
-          hotel.availability.bookingCode &&
-          hotel.availability.status === "Available"
-      )
-    : false
-
-  const { hotelsTrackingData, pageTrackingData } = getTracking(
-    params.lang,
-    !!isAlternativeFor,
-    arrivalDate,
-    departureDate,
-    adultsInRoom,
-    childrenInRoom,
-    hotels?.length ?? 0,
-    selectHotelParams.hotelId,
-    noOfRooms,
-    hotels?.[0]?.hotel.address.country,
-    hotels?.[0]?.hotel.address.city,
-    selectHotelParams.city,
-    bookingCode,
-    isBookingCodeRateAvailable ? "true" : "false",
-    redemption,
-    isRedemptionAvailability
-  )
-
   // Special rates (corporate cheque, voucher and reward nights) will not have regular rate hotels availability
-  const isSpecialRate = hotels?.some(
+  const isSpecialRate = hotels.some(
     (hotel) =>
       hotel.availability.productType?.bonusCheque ||
       hotel.availability.productType?.voucher ||
       hotel.availability.productType?.redemptions
   )
+
+  const filterList = getFiltersFromHotels(hotels)
+
+  const showBookingCodeFilter =
+    isBookingCodeRateAvailable && isFullPriceHotelAvailable && !isSpecialRate
+
   return (
     <>
       <header className={styles.header}>
         <div className={styles.headerContent}>
           <div className={styles.title}>
             <div className={styles.cityInformation}>
-              <Subtitle>
-                {isAlternativeFor
-                  ? intl.formatMessage(
-                      {
-                        defaultMessage: "Alternatives for {value}",
-                      },
-                      {
-                        value: isAlternativeFor.name,
-                      }
-                    )
-                  : city.name}
-              </Subtitle>
+              <Subtitle>{title}</Subtitle>
               <HotelCount />
             </div>
             <div className={styles.sorter}>
@@ -168,21 +87,13 @@ export default async function SelectHotel({
         </div>
       </header>
       <main className={styles.main}>
-        {isBookingCodeRateAvailable &&
-        isFullPriceHotelAvailable &&
-        !isSpecialRate ? (
-          <BookingCodeFilter />
-        ) : null}
+        {showBookingCodeFilter ? <BookingCodeFilter /> : null}
         <div className={styles.sideBar}>
           {hotels.length ? (
             <Link
               className={styles.link}
               color="burgundy"
-              href={
-                isAlternativeFor
-                  ? alternativeHotelsMap(params.lang)
-                  : selectHotelMap(params.lang)
-              }
+              href={mapHref}
               keepSearchParams
             >
               <div className={styles.mapContainer}>
@@ -224,7 +135,7 @@ export default async function SelectHotel({
         <div className={styles.hotelList}>
           <NoAvailabilityAlert
             hotelsLength={hotels.length}
-            isAlternative={!!isAlternativeFor}
+            isAlternative={isAlternative}
             isAllUnavailable={isAllUnavailable}
             operaId={hotels?.[0]?.hotel.operaId}
             bookingCode={bookingCode}
@@ -233,12 +144,6 @@ export default async function SelectHotel({
           <HotelCardListing hotelData={hotels} />
         </div>
       </main>
-      <Suspense key={`${suspenseKey}-tracking`} fallback={null}>
-        <TrackingSDK
-          pageData={pageTrackingData}
-          hotelInfo={hotelsTrackingData}
-        />
-      </Suspense>
     </>
   )
 }

apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css

@@ -86,6 +86,7 @@
   .headerContent {
     display: block;
   }
+
   .header {
     background-color: var(--Base-Surface-Subtle-Normal);
     padding: var(--Spacing-x4) 0 var(--Spacing-x3);
@@ -107,9 +108,11 @@
   .sideBar {
     max-width: 340px;
   }
+
   .sideBarItem {
     display: block;
   }
+
   .filter {
     display: block;
   }
@@ -118,6 +121,7 @@
     display: flex;
     margin-bottom: var(--Space-x6);
   }
+
   .mapContainer {
     display: flex;
     flex-direction: column;
@@ -125,13 +129,16 @@
     border-radius: var(--Corner-radius-md);
     border: 1px solid var(--Base-Border-Subtle);
   }
+
   .buttonContainer {
     display: none;
   }
+
   .skeletonContainer .title {
     margin-bottom: 0;
   }
+
   .skeletonContainer .sideBar {
     gap: var(--Spacing-x3);
   }
-}
+}

apps/scandic-web/components/HotelReservation/SelectHotel/tracking.ts

@@ -23,9 +23,9 @@ export function getTracking(
   hotelCity: string | undefined,
   paramCity: string | undefined,
   bookingCode?: string,
-  isBookingCodeRateAvailable?: string,
+  isBookingCodeRateAvailable = false,
   isRedemption?: boolean,
-  isRedemptionAvailable?: boolean
+  isRedemptionAvailable = false
 ) {
   const pageTrackingData: TrackingSDKPageData = {
     channel: TrackingChannelEnum["hotelreservation"],
@@ -63,10 +63,10 @@ export function getTracking(
     searchType: "destination",
     bookingCode: bookingCode ?? "n/a",
     bookingCodeAvailability: bookingCode
-      ? isBookingCodeRateAvailable
+      ? isBookingCodeRateAvailable.toString()
       : undefined,
     rewardNight: isRedemption ? "yes" : "no",
-    rewardNightAvailability: isRedemptionAvailable ? "true" : "false",
+    rewardNightAvailability: isRedemptionAvailable.toString(),
   }
 
   return {