Tracking on select hotel and select rate pages

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx

@@ -1,5 +1,7 @@
+import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 import { notFound } from "next/navigation"
 
+import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
 import { getLocations } from "@/lib/trpc/memoizedRequests"
 
@@ -10,11 +12,17 @@ import {
   getHotelReservationQueryParams,
 } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { MapModal } from "@/components/MapModal"
+import TrackingSDK from "@/components/TrackingSDK"
 import { setLang } from "@/i18n/serverContext"
 
 import { fetchAvailableHotels } from "../../utils"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import {
+  TrackingChannelEnum,
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+} from "@/types/components/tracking"
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function SelectHotelMapPage({
@@ -44,9 +52,8 @@ export default async function SelectHotelMapPage({
   const selectHotelParamsObject =
     getHotelReservationQueryParams(selectHotelParams)
   const adults = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
-  const children = selectHotelParamsObject.room[0].child
-    ? generateChildrenString(selectHotelParamsObject.room[0].child)
-    : undefined // TODO: Handle multiple rooms
+  const child = selectHotelParamsObject.room[0].child // TODO: Handle multiple rooms
+  const children = child ? generateChildrenString(child) : undefined // TODO: Handle multiple rooms
 
   const hotels = await fetchAvailableHotels({
     cityId: city.id,
@@ -56,6 +63,34 @@ export default async function SelectHotelMapPage({
     children,
   })
 
+  const arrivalDate = new Date(searchParams.fromDate)
+  const departureDate = new Date(searchParams.toDate)
+
+  const pageTrackingData: TrackingSDKPageData = {
+    pageId: "select-hotel",
+    domainLanguage: params.lang as Lang,
+    channel: TrackingChannelEnum["hotelreservation"],
+    pageName: "hotelreservation|select-hotel|mapview",
+    siteSections: "hotelreservation|select-hotel|mapview",
+    pageType: "bookinghotelsmapviewpage",
+  }
+
+  const hotelsTrackingData: TrackingSDKHotelInfo = {
+    availableResults: hotels.length,
+    searchTerm: searchParams.city,
+    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
+    departureDate: format(departureDate, "yyyy-MM-dd"),
+    noOfAdults: adults,
+    noOfChildren: child?.length,
+    noOfRooms: 1, // // TODO: Handle multiple rooms
+    duration: differenceInCalendarDays(departureDate, arrivalDate),
+    leadTime: differenceInCalendarDays(arrivalDate, new Date()),
+    searchType: "destination",
+    bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
+    country: hotels?.[0].hotelData.address.country,
+    region: hotels?.[0].hotelData.address.city,
+  }
+
   const hotelPins = getHotelPins(hotels)
 
   return (
@@ -66,6 +101,7 @@ export default async function SelectHotelMapPage({
         mapId={googleMapId}
         hotels={hotels}
       />
+      <TrackingSDK pageData={pageTrackingData} hotelInfo={hotelsTrackingData} />
     </MapModal>
   )
 }

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -97,8 +97,8 @@ export default async function SelectHotelPage({
     leadTime: differenceInCalendarDays(arrivalDate, new Date()),
     searchType: "destination",
     bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
-    country: hotels[0].hotelData.address.country,
-    region: hotels[0].hotelData.address.city,
+    country: hotels?.[0].hotelData.address.country,
+    region: hotels?.[0].hotelData.address.city,
   }
 
   return (

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx

@@ -1,5 +1,7 @@
+import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 import { notFound } from "next/navigation"
 
+import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 import {
   getHotelData,
@@ -14,10 +16,16 @@ import {
   generateChildrenString,
   getHotelReservationQueryParams,
 } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import TrackingSDK from "@/components/TrackingSDK"
 import { setLang } from "@/i18n/serverContext"
 
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
+import {
+  TrackingChannelEnum,
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+} from "@/types/components/tracking"
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function SelectRatePage({
@@ -84,6 +92,46 @@ export default async function SelectRatePage({
     getProfileSafely(),
   ])
 
+  const arrivalDate = new Date(searchParams.fromDate)
+  const departureDate = new Date(searchParams.toDate)
+  const hotelAttributes = hotelData?.data.attributes
+
+  const roomCategories = hotelData?.included
+
+  const noRoomsAvailable = roomsAvailability?.roomConfigurations.reduce(
+    (acc, room) => {
+      return acc && room.status === "NotAvailable"
+    },
+    true
+  )
+
+  const pageTrackingData: TrackingSDKPageData = {
+    pageId: "select-rate",
+    domainLanguage: params.lang as Lang,
+    channel: TrackingChannelEnum["hotelreservation"],
+    pageName: "hotelreservation|select-rate",
+    siteSections: "hotelreservation|select-rate",
+    pageType: "bookingroomsandratespage",
+  }
+
+  const hotelsTrackingData: TrackingSDKHotelInfo = {
+    searchTerm: searchParams.city,
+    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
+    departureDate: format(departureDate, "yyyy-MM-dd"),
+    noOfAdults: adults,
+    noOfChildren: childrenCount,
+    //childBedPreference // "adults|adults|extra|adults"
+    noOfRooms: 1, // // TODO: Handle multiple rooms
+    duration: differenceInCalendarDays(departureDate, arrivalDate),
+    leadTime: differenceInCalendarDays(arrivalDate, new Date()),
+    searchType: "hotel",
+    bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
+    country: hotelAttributes?.address.country,
+    region: hotelAttributes?.address.city,
+    availableResults: roomCategories?.length,
+    //lowestRoomPrice:
+  }
+
   if (!roomsAvailability) {
     return "No rooms found" // TODO: Add a proper error message
   }
@@ -92,24 +140,19 @@ export default async function SelectRatePage({
     return "No hotel data found" // TODO: Add a proper error message
   }
 
-  const roomCategories = hotelData?.included
-
-  const noRoomsAvailable = roomsAvailability.roomConfigurations.reduce(
-    (acc, room) => {
-      return acc && room.status === "NotAvailable"
-    },
-    true
-  )
-
   return (
     <>
-      <HotelInfoCard hotelData={hotelData} noAvailability={noRoomsAvailable} />
+      <HotelInfoCard
+        hotelData={hotelData}
+        noAvailability={!!noRoomsAvailable}
+      />
       <Rooms
         roomsAvailability={roomsAvailability}
         roomCategories={roomCategories ?? []}
         user={user}
         packages={packages ?? []}
       />
+      <TrackingSDK pageData={pageTrackingData} hotelInfo={hotelsTrackingData} />
     </>
   )
 }