Merge branch 'develop' into feature/tracking

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx

@@ -1,4 +1,7 @@
+import { Suspense } from "react"
+
 import Breadcrumbs from "@/components/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
@@ -6,5 +9,9 @@ import { LangParams, PageArgs } from "@/types/params"
 export default function AllBreadcrumbs({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
-  return <Breadcrumbs />
+  return (
+    <Suspense fallback={<BreadcrumbsSkeleton />}>
+      <Breadcrumbs />
+    </Suspense>
+  )
 }

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -1,5 +1,9 @@
+import { Suspense } from "react"
+
+import LoadingSpinner from "@/components/LoadingSpinner"
 import Sidebar from "@/components/MyPages/Sidebar"
 
+// import Surprises from "@/components/MyPages/Surprises"
 import styles from "./layout.module.css"
 
 export default async function MyPagesLayout({
@@ -13,10 +17,16 @@ export default async function MyPagesLayout({
       <section className={styles.layout}>
         {breadcrumbs}
         <section className={styles.content}>
-          <Sidebar />
+          <Suspense fallback={<LoadingSpinner />}>
+            <Sidebar />
+          </Suspense>
           {children}
         </section>
       </section>
+
+      {/* TODO: Waiting on new API stuff
+        <Surprises />
+      */}
     </div>
   )
 }

app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx

@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getMembershipCards } from "@/lib/trpc/memoizedRequests"
 
 import { PlusCircleIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
@@ -16,7 +16,7 @@ export default async function MembershipCardSlot({
 }: PageArgs<LangParams>) {
   setLang(params.lang)
   const { formatMessage } = await getIntl()
-  const membershipCards = await serverClient().user.membershipCards()
+  const membershipCards = await getMembershipCards()
 
   return (
     <section className={styles.container}>

app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx

@@ -1,4 +1,7 @@
+import { Suspense } from "react"
+
 import Breadcrumbs from "@/components/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
@@ -6,5 +9,9 @@ import { LangParams, PageArgs } from "@/types/params"
 export default function PageBreadcrumbs({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
-  return <Breadcrumbs />
+  return (
+    <Suspense fallback={<BreadcrumbsSkeleton />}>
+      <Breadcrumbs />
+    </Suspense>
+  )
 }

app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -16,7 +16,7 @@ import {
 
 export { generateMetadata } from "@/utils/generateMetadata"
 
-export default async function ContentTypePage({
+export default function ContentTypePage({
   params,
 }: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
   setLang(params.lang)

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

@@ -1,7 +1,9 @@
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
+import { notFound } from "next/navigation"
 
 import { Lang } from "@/constants/languages"
 import { selectHotelMap } from "@/constants/routes/hotelReservation"
+import { getLocations } from "@/lib/trpc/memoizedRequests"
 
 import {
   fetchAvailableHotels,
@@ -9,6 +11,7 @@ import {
 } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
+import getHotelReservationQueryParams from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Link from "@/components/TempDesignSystem/Link"
@@ -18,6 +21,7 @@ import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
+import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import {
   TrackingChannelEnum,
   TrackingSDKHotelInfo,
@@ -27,21 +31,38 @@ import { LangParams, PageArgs } from "@/types/params"
 
 export default async function SelectHotelPage({
   params,
-}: PageArgs<LangParams>) {
+  searchParams,
+}: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
+  const locations = await getLocations()
+
+  if (!locations || "error" in locations) {
+    return null
+  }
+  const city = locations.data.find(
+    (location) =>
+      location.name.toLowerCase() === searchParams.city.toLowerCase()
+  )
+  if (!city) return notFound()
 
-  const tempSearchTerm = "Stockholm"
-  const tempArrivalDate = new Date("2024-10-25")
-  const tempDepartureDate = new Date("2024-10-26")
   const intl = await getIntl()
+  const selectHotelParams = new URLSearchParams(searchParams)
+  const selectHotelParamsObject =
+    getHotelReservationQueryParams(selectHotelParams)
+  const adults = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
+  const children = selectHotelParamsObject.room[0].child?.length // TODO: Handle multiple rooms
 
   const hotels = await fetchAvailableHotels({
-    cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
-    roomStayStartDate: "2024-11-02",
-    roomStayEndDate: "2024-11-03",
-    adults: 1,
+    cityId: city.id,
+    roomStayStartDate: searchParams.fromDate,
+    roomStayEndDate: searchParams.toDate,
+    adults,
+    children,
   })
 
+  const arrivalDate = new Date(searchParams.fromDate)
+  const departureDate = new Date(searchParams.toDate)
+
   const filterList = getFiltersFromHotels(hotels)
 
   const pageTrackingData: TrackingSDKPageData = {
@@ -55,16 +76,16 @@ export default async function SelectHotelPage({
 
   const hotelsTrackingData: TrackingSDKHotelInfo = {
     availableResults: hotels.length,
-    searchTerm: tempSearchTerm,
-    arrivalDate: format(tempArrivalDate, "yyyy-MM-dd"),
-    departureDate: format(tempDepartureDate, "yyyy-MM-dd"),
-    noOfAdults: 1, // TODO: Use values from searchParams
-    noOfChildren: 0, // TODO: Use values from searchParams
-    noOfRooms: 1, // TODO: Use values from searchParams
-    duration: differenceInCalendarDays(tempDepartureDate, tempArrivalDate),
-    leadTime: differenceInCalendarDays(tempArrivalDate, new Date()),
+    searchTerm: searchParams.city,
+    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
+    departureDate: format(departureDate, "yyyy-MM-dd"),
+    noOfAdults: adults,
+    noOfChildren: children,
+    noOfRooms: 1, // // TODO: Handle multiple rooms
+    duration: differenceInCalendarDays(departureDate, arrivalDate),
+    leadTime: differenceInCalendarDays(arrivalDate, new Date()),
     searchType: "destination",
-    bookingTypeofDay: isWeekend(tempArrivalDate) ? "weekend" : "weekday",
+    bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
     country: hotels[0].hotelData.address.country,
     region: hotels[0].hotelData.address.city,
   }
@@ -74,12 +95,12 @@ export default async function SelectHotelPage({
       <section className={styles.section}>
         <Link href={selectHotelMap[params.lang]} keepSearchParams>
           <StaticMap
-            city={tempSearchTerm}
+            city={searchParams.city}
             width={340}
             height={180}
             zoomLevel={11}
             mapType="roadmap"
-            altText={`Map of ${tempSearchTerm} city center`}
+            altText={`Map of ${searchParams.city} city center`}
           />
         </Link>
         <Link

app/[lang]/(live)/@bookingwidget/page.tsx

@@ -3,7 +3,13 @@ import { serverClient } from "@/lib/trpc/server"
 
 import BookingWidget, { preload } from "@/components/BookingWidget"
 
-export default async function BookingWidgetPage() {
+import { BookingWidgetSearchParams } from "@/types/components/bookingWidget"
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function BookingWidgetPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, BookingWidgetSearchParams>) {
   if (env.HIDE_FOR_NEXT_RELEASE) {
     return null
   }
@@ -18,5 +24,5 @@ export default async function BookingWidgetPage() {
     return null
   }
 
-  return <BookingWidget />
+  return <BookingWidget searchParams={searchParams} />
 }

app/[lang]/webview/loading.tsx

@@ -0,0 +1,5 @@
+import LoadingSpinner from "@/components/LoadingSpinner"
+
+export default function Loading() {
+  return <LoadingSpinner />
+}