Fixed tracking on Confirmation page

components/HotelReservation/BookingConfirmation/Confirmation/confirmation.module.css

@@ -0,0 +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);
+  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;
+  }
+}

components/HotelReservation/BookingConfirmation/Confirmation/index.tsx

@@ -0,0 +1,45 @@
+"use client"
+import { use, useRef } from "react"
+
+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 SidePanel from "@/components/HotelReservation/SidePanel"
+import Divider from "@/components/TempDesignSystem/Divider"
+
+import styles from "./confirmation.module.css"
+
+import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+
+export default function Confirmation({
+  bookingConfirmationPromise,
+}: ConfirmationProps) {
+  const bookingConfirmation = use(bookingConfirmationPromise)
+  const mainRef = useRef<HTMLElement | null>(null)
+
+  const { booking, hotel, room } = bookingConfirmation
+
+  return (
+    <main className={styles.main} ref={mainRef}>
+      <Header booking={booking} hotel={hotel} mainRef={mainRef} />
+      <div className={styles.booking}>
+        <Rooms booking={booking} room={room} />
+        <PaymentDetails booking={booking} />
+        <Divider color="primaryLightSubtle" />
+        <HotelDetails hotel={hotel} />
+        <Promos />
+        <div className={styles.mobileReceipt}>
+          <Receipt booking={booking} hotel={hotel} room={room} />
+        </div>
+      </div>
+      <aside className={styles.aside}>
+        <SidePanel variant="receipt">
+          <Receipt booking={booking} hotel={hotel} room={room} />
+        </SidePanel>
+      </aside>
+    </main>
+  )
+}