feat(SW-2116): RefId instead of confirmationNumber

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.module.css

@@ -0,0 +1,44 @@
+.main {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  display: grid;
+  gap: var(--Spacing-x5);
+  grid-template-areas: "header" "booking";
+  margin: 0 auto;
+  min-height: 100dvh;
+  padding-top: var(--Spacing-x5);
+  width: var(--max-width-page);
+}
+
+@media screen and (min-width: 1367px) {
+  .main {
+    grid-template-areas:
+      "header  receipt"
+      "booking receipt";
+    grid-template-columns: 1fr 340px;
+    grid-template-rows: auto 1fr;
+    padding-top: var(--Spacing-x9);
+  }
+}
+
+.booking {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x5);
+  grid-area: booking;
+  padding-bottom: var(--Spacing-x9);
+}
+
+.aside {
+  display: none;
+}
+
+@media screen and (min-width: 1367px) {
+  .mobileReceipt {
+    display: none;
+  }
+
+  .aside {
+    display: grid;
+    grid-area: receipt;
+  }
+}

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx

@@ -1,14 +1,84 @@
+import { notFound } from "next/navigation"
+
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
-import BookingConfirmation from "@/components/HotelReservation/BookingConfirmation"
+import Alerts from "@/components/HotelReservation/BookingConfirmation/Alerts"
+import Header from "@/components/HotelReservation/BookingConfirmation/Header"
+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 Tracking from "@/components/HotelReservation/BookingConfirmation/Tracking"
+import { mapRoomState } from "@/components/HotelReservation/BookingConfirmation/utils"
+import SidePanel from "@/components/HotelReservation/SidePanel"
+import Divider from "@/components/TempDesignSystem/Divider"
+import { getIntl } from "@/i18n"
+import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
+
+import styles from "./page.module.css"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function BookingConfirmationPage({
+  params,
   searchParams,
-}: PageArgs<LangParams, { confirmationNumber: string }>) {
-  void getBookingConfirmation(searchParams.confirmationNumber)
+}: PageArgs<LangParams, { RefId?: string }>) {
+  const refId = searchParams.RefId
+
+  if (!refId) {
+    notFound()
+  }
+
+  const bookingConfirmation = await getBookingConfirmation(refId, params.lang)
+
+  if (!bookingConfirmation) {
+    notFound()
+  }
+
+  const { booking, hotelData, room } = bookingConfirmation
+  const { hotel } = hotelData
+
+  const intl = await getIntl()
+
   return (
-    <BookingConfirmation confirmationNumber={searchParams.confirmationNumber} />
+    <BookingConfirmationProvider
+      bookingCode={booking.bookingCode}
+      currencyCode={booking.currencyCode}
+      fromDate={booking.checkInDate}
+      toDate={booking.checkOutDate}
+      rooms={[
+        mapRoomState(booking, room, intl),
+        // null represents "known but not yet fetched rooms" and is used to render placeholders correctly
+        ...Array(booking.linkedReservations.length).fill(null),
+      ]}
+      vat={booking.vatPercentage}
+    >
+      <main className={styles.main}>
+        <Header booking={booking} hotel={hotel} refId={refId} />
+        <div className={styles.booking}>
+          <Alerts booking={booking} />
+          <Rooms
+            booking={booking}
+            checkInTime={hotel.hotelFacts.checkin.checkInTime}
+            checkOutTime={hotel.hotelFacts.checkin.checkOutTime}
+            mainRoom={room}
+          />
+          <PaymentDetails />
+          <Divider color="primaryLightSubtle" />
+          <HotelDetails hotel={hotel} />
+          <Promos refId={refId} hotelId={hotel.operaId} />
+          <div className={styles.mobileReceipt}>
+            <Receipt />
+          </div>
+        </div>
+        <aside className={styles.aside}>
+          <SidePanel variant="receipt">
+            <Receipt />
+          </SidePanel>
+        </aside>
+      </main>
+      <Tracking bookingConfirmation={bookingConfirmation} />
+    </BookingConfirmationProvider>
   )
 }