Fixed tracking on Confirmation page

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>
+  )
+}

components/HotelReservation/BookingConfirmation/index.tsx

@@ -1,57 +1,81 @@
-"use client"
-import { use, useRef } from "react"
+import { differenceInCalendarDays, format, isWeekend } from "date-fns"
+import { Suspense } 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 TrackingSDK from "@/components/TrackingSDK"
 
-import styles from "./confirmation.module.css"
+import Confirmation from "./Confirmation"
 
 import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+import {
+  TrackingChannelEnum,
+  type TrackingSDKHotelInfo,
+  type TrackingSDKPageData,
+} from "@/types/components/tracking"
+import { CurrencyEnum } from "@/types/enums/currency"
 
-export default function BookingConfirmation({
+export default async function BookingConfirmation({
   bookingConfirmationPromise,
+  lang,
 }: BookingConfirmationProps) {
-  const bookingConfirmation = use(bookingConfirmationPromise)
-  const mainRef = useRef<HTMLElement | null>(null)
+  const bookingConfirmation = await bookingConfirmationPromise
+
+  const { booking, hotel } = bookingConfirmation
+
+  const arrivalDate = new Date(booking.checkInDate)
+  const departureDate = new Date(booking.checkOutDate)
+
+  const initialPageTrackingData: TrackingSDKPageData = {
+    pageId: "booking-confirmation",
+    domainLanguage: lang,
+    channel: TrackingChannelEnum["hotelreservation"],
+    pageName: `hotelreservation|confirmation`,
+    siteSections: `hotelreservation|confirmation`,
+    pageType: "confirmation",
+    siteVersion: "new-web",
+  }
+
+  const initialHotelsTrackingData: TrackingSDKHotelInfo = {
+    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
+    departureDate: format(departureDate, "yyyy-MM-dd"),
+    noOfAdults: booking.adults,
+    noOfChildren: booking.childrenAges?.length,
+    ageOfChildren: booking.childrenAges?.join(","),
+    childBedPreference: booking?.extraBedTypes?.map((c) => c.bedType).join("|"),
+    noOfRooms: 1, // // TODO: Handle multiple rooms
+    duration: differenceInCalendarDays(departureDate, arrivalDate),
+    leadTime: differenceInCalendarDays(arrivalDate, new Date()),
+    searchType: "hotel",
+    bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
+    country: hotel?.address.country,
+    hotelID: hotel.operaId,
+    region: hotel?.address.city,
+    rateCode: booking.rateDefinition.rateCode ?? undefined,
+    rateCodeType: booking.rateDefinition.title ?? undefined,
+    rateCodeName: booking.rateDefinition.rateCode ?? undefined,
+    rateCodeCancellationRule:
+      booking.rateDefinition?.cancellationText ?? undefined,
+    revenueCurrencyCode: CurrencyEnum[booking.currencyCode],
+    breakfastOption: booking.rateDefinition.breakfastIncluded
+      ? "breakfast buffet"
+      : "no breakfast",
+    totalPrice: booking.totalPrice,
+    //specialRoomType: getSpecialRoomType(booking.packages), TODO: Add
+    //roomTypeName: booking.roomTypeCode ?? undefined, TODO: Do we get the name?
+    //bedType: bedType?.description, TODO: Can we get bedType?
+    roomTypeCode: booking.roomTypeCode ?? undefined,
+    roomPrice: booking.roomPrice,
+    bnr: booking.confirmationNumber ?? undefined,
+  }
+
   return (
-    <main className={styles.main} ref={mainRef}>
-      <Header
-        booking={bookingConfirmation.booking}
-        hotel={bookingConfirmation.hotel}
-        mainRef={mainRef}
-      />
-      <div className={styles.booking}>
-        <Rooms
-          booking={bookingConfirmation.booking}
-          room={bookingConfirmation.room}
+    <>
+      <Confirmation bookingConfirmationPromise={bookingConfirmationPromise} />
+      <Suspense fallback={null}>
+        <TrackingSDK
+          pageData={initialPageTrackingData}
+          hotelInfo={initialHotelsTrackingData}
         />
-        <PaymentDetails booking={bookingConfirmation.booking} />
-        <Divider color="primaryLightSubtle" />
-        <HotelDetails hotel={bookingConfirmation.hotel} />
-        <Promos />
-        <div className={styles.mobileReceipt}>
-          <Receipt
-            booking={bookingConfirmation.booking}
-            hotel={bookingConfirmation.hotel}
-            room={bookingConfirmation.room}
-          />
-        </div>
-      </div>
-      <aside className={styles.aside}>
-        <SidePanel variant="receipt">
-          <Receipt
-            booking={bookingConfirmation.booking}
-            hotel={bookingConfirmation.hotel}
-            room={bookingConfirmation.room}
-          />
-        </SidePanel>
-      </aside>
-    </main>
+      </Suspense>
+    </>
   )
 }