Enter details tracking WIP

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

@@ -0,0 +1,82 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useEffect, useState } from "react"
+
+import { Lang } from "@/constants/languages"
+import { useStepsStore } from "@/stores/steps"
+import useTrackingStore from "@/stores/tracking"
+
+import { createSDKPageObject } from "@/utils/tracking"
+
+import {
+  TrackingChannelEnum,
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+  TrackingSDKUserData,
+} from "@/types/components/tracking"
+
+type Props = {
+  initialHotelsTrackingData: TrackingSDKHotelInfo
+  userTrackingData: TrackingSDKUserData
+  lang: Lang
+}
+
+export default function EnterDetailsTracking(props: Props) {
+  const { initialHotelsTrackingData, userTrackingData, lang } = props
+  const currentStep = useStepsStore((state) => state.currentStep)
+  const { getPageLoadTime, hasRun } = useTrackingStore()
+  const pathName = usePathname()
+
+  const [hotelsTrackingData, setHotelsTrackingData] = useState(
+    initialHotelsTrackingData
+  )
+
+  useEffect(() => {
+    function trackData() {
+      const pageTrackingData: TrackingSDKPageData = {
+        pageId: currentStep,
+        domainLanguage: lang,
+        channel: TrackingChannelEnum["hotelreservation"],
+        pageName: `hotelreservation|${currentStep}`,
+        siteSections: `hotelreservation|${currentStep}`,
+        pageType: currentStep, // TODO: Change to correct
+      }
+
+      const trackingData = {
+        ...pageTrackingData,
+        pathName,
+        pageLoadTime: getPageLoadTime(),
+      }
+      const pageObject = createSDKPageObject(trackingData)
+      console.log("TRACKING: Tracking RouterTransition pageViewEnd", pageObject)
+      console.log(
+        "TRACKING: Tracking RouterTransition userData",
+        userTrackingData
+      )
+      console.log(
+        "TRACKING: Tracking RouterTransition hotelInfo",
+        hotelsTrackingData
+      )
+      window.adobeDataLayer.push({
+        event: "pageViewEnd",
+        pageInfo: pageObject,
+        userInfo: userTrackingData,
+        hotelInfo: hotelsTrackingData,
+      })
+    }
+    if (hasRun) {
+      trackData()
+    }
+  }, [
+    currentStep,
+    getPageLoadTime,
+    hotelsTrackingData,
+    pathName,
+    userTrackingData,
+    hasRun,
+    lang,
+  ])
+
+  return null
+}

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