feat: trigger loading states immediately upon navigation

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>
+    </>
   )
 }