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