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

Feat/SW-1652 confirmation page

* feat(SW-1652): handle linkedReservations fetching

* fix: add missing translations

* feat: add linkedReservation retry functionality

* chore: align naming


Approved-by: Simon.Emanuelsson

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

@@ -1,9 +1,7 @@
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 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"
@@ -14,10 +12,12 @@ import SidePanel from "@/components/HotelReservation/SidePanel"
 import Divider from "@/components/TempDesignSystem/Divider"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getLang } from "@/i18n/serverContext"
+import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
 
 import { invertedBedTypeMap } from "../utils"
 import Alerts from "./Alerts"
 import Confirmation from "./Confirmation"
+import { mapRoomState } from "./utils"
 
 import styles from "./bookingConfirmation.module.css"
 
@@ -47,16 +47,16 @@ export default async function BookingConfirmation({
   const arrivalDate = new Date(booking.checkInDate)
   const departureDate = new Date(booking.checkOutDate)
 
-  const breakfastPkgSelected = booking.packages.find(
+  const selectedBreakfast = booking.packages.find(
     (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
   )
 
-  const breakfastAncillary = breakfastPkgSelected && {
+  const breakfastAncillary = selectedBreakfast && {
     hotelid: hotel.operaId,
     productName: "BreakfastAdult",
     productCategory: "", // TODO: Add category
-    productId: breakfastPkgSelected.code ?? "",
-    productPrice: +breakfastPkgSelected.unitPrice,
+    productId: selectedBreakfast.code ?? "",
+    productPrice: +selectedBreakfast.unitPrice,
     productUnits: booking.adults,
     productPoints: 0,
     productType: "food",
@@ -112,18 +112,15 @@ 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 (
-    <>
+    <BookingConfirmationProvider
+      currencyCode={booking.currencyCode}
+      rooms={[
+        mapRoomState(booking, room),
+        // null represents "known but not yet fetched rooms" and is used to render placeholders correctly
+        ...Array(booking.linkedReservations.length).fill(null),
+      ]}
+    >
       <Confirmation booking={booking} hotel={hotel} room={room}>
         <div className={styles.booking}>
           <Alerts booking={booking} />
@@ -132,12 +129,7 @@ export default async function BookingConfirmation({
             mainRoom={room}
             linkedReservations={booking.linkedReservations}
           />
-          <Suspense fallback={null}>
-            <PaymentDetails
-              booking={booking}
-              linkedReservations={linkedReservations}
-            />
-          </Suspense>
+          <PaymentDetails />
           <Divider color="primaryLightSubtle" />
           <HotelDetails hotel={hotel} />
           <Promos
@@ -146,16 +138,12 @@ export default async function BookingConfirmation({
             lastName={booking.guest.lastName}
           />
           <div className={styles.mobileReceipt}>
-            <Suspense fallback={null}>
-              <Receipt booking={booking} hotel={hotel} room={room} />
-            </Suspense>
+            <Receipt />
           </div>
         </div>
         <aside className={styles.aside}>
           <SidePanel variant="receipt">
-            <Suspense fallback={null}>
-              <Receipt booking={booking} hotel={hotel} room={room} />
-            </Suspense>
+            <Receipt />
           </SidePanel>
         </aside>
       </Confirmation>
@@ -164,6 +152,6 @@ export default async function BookingConfirmation({
         hotelInfo={initialHotelsTrackingData}
         paymentInfo={paymentInfo}
       />
-    </>
+    </BookingConfirmationProvider>
   )
 }