feat: trigger loading states immediately upon navigation

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