Merged in feat/SW-1652-confirmation-page-multiroom (pull request #1404)

feat(SW-1652): Fetching additional rooms on confirmation page

* feat(SW-1652): Fetching additional rooms on confirmation page


Approved-by: Tobias Johansson

apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx

@@ -3,13 +3,24 @@ import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
+import { serverClient } from "@/lib/trpc/server"
 
+import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
+import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
+import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
+import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
+import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
+import SidePanel from "@/components/HotelReservation/SidePanel"
+import Divider from "@/components/TempDesignSystem/Divider"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getLang } from "@/i18n/serverContext"
 
 import { invertedBedTypeMap } from "../utils"
+import Alerts from "./Alerts"
 import Confirmation from "./Confirmation"
 
+import styles from "./bookingConfirmation.module.css"
+
 import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
 import {
   TrackingChannelEnum,
@@ -28,9 +39,7 @@ export default async function BookingConfirmation({
   if (!bookingConfirmation) {
     return notFound()
   }
-
   const { booking, hotel, room } = bookingConfirmation
-
   if (!room) {
     return notFound()
   }
@@ -103,9 +112,53 @@ export default async function BookingConfirmation({
     paymentStatus: "confirmed",
   }
 
+  const linkedReservations = await Promise.all(
+    //  TODO: How to handle partial failure (e.g. one booking can't be fetched)? Need UX/UI
+    booking.linkedReservations.map(async (res) => {
+      const confirmation = await serverClient().booking.confirmation({
+        confirmationNumber: res.confirmationNumber,
+      })
+      return confirmation
+    })
+  )
+
   return (
     <>
-      <Confirmation booking={booking} hotel={hotel} room={room} />
+      <Confirmation booking={booking} hotel={hotel} room={room}>
+        <div className={styles.booking}>
+          <Alerts booking={booking} />
+          <Rooms
+            booking={booking}
+            mainRoom={room}
+            linkedReservations={booking.linkedReservations}
+          />
+          <Suspense fallback={null}>
+            <PaymentDetails
+              booking={booking}
+              linkedReservations={linkedReservations}
+            />
+          </Suspense>
+          <Divider color="primaryLightSubtle" />
+          <HotelDetails hotel={hotel} />
+          <Promos
+            confirmationNumber={booking.confirmationNumber}
+            hotelId={hotel.operaId}
+            lastName={booking.guest.lastName}
+          />
+          <div className={styles.mobileReceipt}>
+            <Suspense fallback={null}>
+              <Receipt booking={booking} hotel={hotel} room={room} />
+            </Suspense>
+          </div>
+        </div>
+        <aside className={styles.aside}>
+          <SidePanel variant="receipt">
+            <Suspense fallback={null}>
+              <Receipt booking={booking} hotel={hotel} room={room} />
+            </Suspense>
+          </SidePanel>
+        </aside>
+      </Confirmation>
       <Suspense fallback={null}>
         <TrackingSDK
           pageData={initialPageTrackingData}