Enter details tracking WIP

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

@@ -1,5 +1,6 @@
 import "./enterDetailsLayout.css"
 
+import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 import { notFound } from "next/navigation"
 
 import {
@@ -8,6 +9,7 @@ import {
   getHotelData,
   getProfileSafely,
   getSelectedRoomAvailability,
+  getUserTracking,
 } from "@/lib/trpc/memoizedRequests"
 
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
@@ -21,10 +23,18 @@ import {
   generateChildrenString,
   getQueryParamsForEnterDetails,
 } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
 import StepsProvider from "@/providers/StepsProvider"
 
+import EnterDetailsTracking from "./enterDetailsTracking"
+
 import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
+import {
+  TrackingChannelEnum,
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+} from "@/types/components/tracking"
 import { StepEnum } from "@/types/enums/step"
 import type { LangParams, PageArgs } from "@/types/params"
 
@@ -88,6 +98,7 @@ export default async function StepPage({
   const breakfastPackages = await getBreakfastPackages(breakfastInput)
   const user = await getProfileSafely()
   const savedCreditCards = await getCreditCardsSafely()
+  const userTrackingData = await getUserTracking()
 
   if (!isValidStep(searchParams.step) || !hotelData || !roomAvailability) {
     return notFound()
@@ -120,6 +131,36 @@ export default async function StepPage({
       }
     : undefined
 
+  const arrivalDate = new Date(searchParams.fromDate)
+  const departureDate = new Date(searchParams.toDate)
+  const hotelAttributes = hotelData?.data.attributes
+
+  const initialPageTrackingData: TrackingSDKPageData = {
+    pageId: searchParams.step,
+    domainLanguage: lang,
+    channel: TrackingChannelEnum["hotelreservation"],
+    pageName: `hotelreservation|${searchParams.step}`,
+    siteSections: `hotelreservation|${searchParams.step}`,
+    pageType: searchParams.step, // TODO: Change to correct
+  }
+
+  const initialHotelsTrackingData: TrackingSDKHotelInfo = {
+    searchTerm: searchParams.city,
+    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
+    departureDate: format(departureDate, "yyyy-MM-dd"),
+    noOfAdults: adults,
+    noOfChildren: children?.length,
+    //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,
+    //lowestRoomPrice:
+  }
+
   return (
     <StepsProvider
       bedTypes={roomAvailability.bedTypes}
@@ -182,6 +223,15 @@ export default async function StepPage({
           />
         </SectionAccordion>
       </section>
+      <EnterDetailsTracking
+        initialHotelsTrackingData={initialHotelsTrackingData}
+        userTrackingData={userTrackingData}
+        lang={lang}
+      />
+      <TrackingSDK
+        pageData={initialPageTrackingData}
+        hotelInfo={initialHotelsTrackingData}
+      />
     </StepsProvider>
   )
 }