Fixed tracking on Confirmation page

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

@@ -1,18 +1,8 @@
-import { differenceInCalendarDays, format, isWeekend } from "date-fns"
-import { Suspense } from "react"
-
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
 import BookingConfirmation from "@/components/HotelReservation/BookingConfirmation"
-import TrackingSDK from "@/components/TrackingSDK"
 import { setLang } from "@/i18n/serverContext"
 
-import {
-  TrackingChannelEnum,
-  type TrackingSDKHotelInfo,
-  type TrackingSDKPageData,
-} from "@/types/components/tracking"
-import { CurrencyEnum } from "@/types/enums/currency"
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function BookingConfirmationPage({
@@ -23,67 +13,11 @@ export default async function BookingConfirmationPage({
   const bookingConfirmationPromise = getBookingConfirmation(
     searchParams.confirmationNumber
   )
-  const { hotel, booking } = await bookingConfirmationPromise
-
-  const arrivalDate = new Date(booking.checkInDate)
-  const departureDate = new Date(booking.checkOutDate)
-
-  const initialPageTrackingData: TrackingSDKPageData = {
-    pageId: "booking-confirmation",
-    domainLanguage: params.lang,
-    channel: TrackingChannelEnum["hotelreservation"],
-    pageName: `hotelreservation|confirmation`,
-    siteSections: `hotelreservation|confirmation`,
-    pageType: "confirmation",
-    siteVersion: "new-web",
-  }
-
-  const initialHotelsTrackingData: TrackingSDKHotelInfo = {
-    searchTerm: searchParams.city,
-    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 (
-    <>
+    <BookingConfirmation
-      <Suspense fallback={null}>
+      bookingConfirmationPromise={bookingConfirmationPromise}
-        <TrackingSDK
+      lang={params.lang}
-          pageData={initialPageTrackingData}
+    />
-          hotelInfo={initialHotelsTrackingData}
-        />
-      </Suspense>
-
-      <BookingConfirmation
-        bookingConfirmationPromise={bookingConfirmationPromise}
-      />
-    </>
   )
 }

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 { differenceInCalendarDays, format, isWeekend } from "date-fns"
-import { use, useRef } from "react"
+import { Suspense } from "react"
 
-import Header from "@/components/HotelReservation/BookingConfirmation/Header"
+import TrackingSDK from "@/components/TrackingSDK"
-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 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 bookingConfirmation = await bookingConfirmationPromise
-  const mainRef = useRef<HTMLElement | null>(null)
+
+  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
+      <Confirmation bookingConfirmationPromise={bookingConfirmationPromise} />
-        booking={bookingConfirmation.booking}
+      <Suspense fallback={null}>
-        hotel={bookingConfirmation.hotel}
+        <TrackingSDK
-        mainRef={mainRef}
+          pageData={initialPageTrackingData}
-      />
+          hotelInfo={initialHotelsTrackingData}
-      <div className={styles.booking}>
-        <Rooms
-          booking={bookingConfirmation.booking}
-          room={bookingConfirmation.room}
         />
-        <PaymentDetails booking={bookingConfirmation.booking} />
+      </Suspense>
-        <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>
   )
 }

server/routers/hotels/output.ts

@@ -1,6 +1,6 @@
 import { z } from "zod"
 
-import { ChildBedTypeEnum ,type  PaymentMethodEnum } from "@/constants/booking"
+import { ChildBedTypeEnum, type PaymentMethodEnum } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 import { toLang } from "@/server/utils"
 
@@ -99,10 +99,15 @@ const locationSchema = z.object({
 })
 
 const hotelContentSchema = z.object({
-  images: z.object({
+  images: z
-    metaData: imageMetaDataSchema,
+    .object({
-    imageSizes: imageSizesSchema,
+      metaData: imageMetaDataSchema,
-  }),
+      imageSizes: imageSizesSchema,
+    })
+    .default({
+      metaData: { title: "", altText: "", altText_En: "", copyRight: "" },
+      imageSizes: { tiny: "", small: "", medium: "", large: "" },
+    }),
   texts: z.object({
     facilityInformation: z.string().optional(),
     surroundingInformation: z.string(),

types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts

@@ -1,5 +1,11 @@
+import type { Lang } from "@/constants/languages"
 import type { RouterOutput } from "@/lib/trpc/client"
 
 export interface BookingConfirmationProps {
+  lang: Lang
+  bookingConfirmationPromise: Promise<RouterOutput["booking"]["confirmation"]>
+}
+
+export interface ConfirmationProps {
   bookingConfirmationPromise: Promise<RouterOutput["booking"]["confirmation"]>
 }