feat: trigger loading states immediately upon navigation

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 {