feat: new booking confirmation page

app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/loading.tsx

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

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

@@ -1,7 +1,42 @@
 .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);
+}
+
+.booking {
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x5);
-  margin: 0 auto;
-  width: min(calc(100dvw - (var(--Spacing-x3) * 2)), 948px);
+  grid-area: booking;
+  padding-bottom: var(--Spacing-x9);
+}
+
+.aside {
+  display: none;
+}
+
+@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);
+  }
+
+  .mobileReceipt {
+    display: none;
+  }
+
+  .aside {
+    display: grid;
+    grid-area: receipt;
+  }
 }

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

@@ -1,8 +1,16 @@
+import { Suspense } from "react"
+
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
-import Details from "@/components/HotelReservation/BookingConfirmation/Details"
 import Header from "@/components/HotelReservation/BookingConfirmation/Header"
-import TotalPrice from "@/components/HotelReservation/BookingConfirmation/TotalPrice"
+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 LoadingSpinner from "@/components/LoadingSpinner"
+import Divider from "@/components/TempDesignSystem/Divider"
 import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
@@ -18,10 +26,27 @@ export default async function BookingConfirmationPage({
   const { confirmationNumber } = searchParams
 
   return (
-    <div className={styles.main}>
-      <Header confirmationNumber={confirmationNumber} />
-      <Details confirmationNumber={confirmationNumber} />
-      <TotalPrice confirmationNumber={confirmationNumber} />
-    </div>
+    <main className={styles.main}>
+      <Suspense fallback={<LoadingSpinner fullPage />}>
+        <Header confirmationNumber={searchParams.confirmationNumber} />
+        <div className={styles.booking}>
+          <Rooms confirmationNumber={searchParams.confirmationNumber} />
+          <PaymentDetails
+            confirmationNumber={searchParams.confirmationNumber}
+          />
+          <Divider color="primaryLightSubtle" />
+          <HotelDetails confirmationNumber={searchParams.confirmationNumber} />
+          <Promos />
+          <div className={styles.mobileReceipt}>
+            <Receipt confirmationNumber={searchParams.confirmationNumber} />
+          </div>
+        </div>
+        <aside className={styles.aside}>
+          <SidePanel variant="receipt">
+            <Receipt confirmationNumber={searchParams.confirmationNumber} />
+          </SidePanel>
+        </aside>
+      </Suspense>
+    </main>
   )
 }

app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.module.css

@@ -1,5 +0,0 @@
-.layout {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  min-height: 100dvh;
-  padding: 80px 0 160px;
-}

app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.tsx

@@ -1,12 +0,0 @@
-import { notFound } from "next/navigation"
-
-import { env } from "@/env/server"
-
-import styles from "./layout.module.css"
-
-// route groups needed as layouts have different bgc
-export default function ConfirmedBookingLayout({
-  children,
-}: React.PropsWithChildren) {
-  return <div className={styles.layout}>{children}</div>
-}

app/[lang]/(live)/(public)/hotelreservation/(confirmation)/loading.tsx

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

app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/layout.tsx

@@ -1,7 +1,3 @@
-import { notFound } from "next/navigation"
-
-import { env } from "@/env/server"
-
 import styles from "./layout.module.css"
 
 import { LangParams, LayoutArgs } from "@/types/params"

app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx

@@ -1,7 +1,3 @@
-import { notFound } from "next/navigation"
-
-import { env } from "@/env/server"
-
 import styles from "./layout.module.css"
 
 import { LangParams, LayoutArgs } from "@/types/params"
@@ -12,9 +8,6 @@ export default function HotelReservationLayout({
 }: React.PropsWithChildren<LayoutArgs<LangParams>> & {
   sidePeek: React.ReactNode
 }) {
-  if (!env.ENABLE_BOOKING_FLOW) {
-    return notFound()
-  }
   return (
     <div className={styles.layout}>
       {children}

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx

@@ -17,7 +17,8 @@ import HistoryStateManager from "@/components/HotelReservation/EnterDetails/Hist
 import Payment from "@/components/HotelReservation/EnterDetails/Payment"
 import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
-import Summary from "@/components/HotelReservation/EnterDetails/Summary"
+import DesktopSummary from "@/components/HotelReservation/EnterDetails/Summary/Desktop"
+import MobileSummary from "@/components/HotelReservation/EnterDetails/Summary/Mobile"
 import {
   generateChildrenString,
   getQueryParamsForEnterDetails,
@@ -140,6 +141,13 @@ export default async function StepPage({
       }
     : undefined
 
+  const summary = {
+    cancellationText: roomAvailability.cancellationText,
+    isMember: !!user,
+    rateDetails: roomAvailability.rateDetails,
+    roomType: roomAvailability.selectedRoom.roomType,
+  }
+
   return (
     <EnterDetailsProvider
       bedTypes={roomAvailability.bedTypes}
@@ -220,16 +228,8 @@ export default async function StepPage({
             </section>
           </div>
           <aside className={styles.summary}>
-            <Summary
-              adults={adults}
-              fromDate={fromDate}
-              hotelId={hotelId}
-              kids={children}
-              packageCodes={packageCodes}
-              rateCode={rateCode}
-              roomTypeCode={roomTypeCode}
-              toDate={toDate}
-            />
+            <MobileSummary {...summary} />
+            <DesktopSummary {...summary} />
           </aside>
         </div>
       </main>

app/[lang]/(live)/(public)/hotelreservation/layout.tsx

@@ -0,0 +1,12 @@
+import { notFound } from "next/navigation"
+
+import { env } from "@/env/server"
+
+export default function HotelReservationLayout({
+  children,
+}: React.PropsWithChildren) {
+  if (!env.ENABLE_BOOKING_FLOW) {
+    return notFound()
+  }
+  return <>{children}</>
+}

app/globals.css

@@ -104,6 +104,7 @@
   --max-width-text-block: 49.5rem;
   --current-mobile-site-header-height: 70.047px;
   --max-width-navigation: 89.5rem;
+
   --max-width-spacing: calc(var(--Layout-Mobile-Margin-Margin-min) * 2);
   --max-width-page: min(
     calc(100dvw - var(--max-width-spacing)),
@@ -156,6 +157,7 @@ ul {
   :root {
     --max-width-spacing: calc(var(--Layout-Tablet-Margin-Margin-min) * 2);
   }
+
   body.overflow-hidden {
     overflow: auto;
     overflow-x: hidden;