"use client" import { usePathname } from "next/navigation" import { useEffect, useMemo, useRef } from "react" import { Lang } from "@/constants/languages" import { RoomConfiguration } from "@/server/routers/hotels/output" import { useEnterDetailsStore } from "@/stores/enter-details" import useTrackingStore from "@/stores/tracking" import { useSessionId } from "@/hooks/useSessionId" import { createSDKPageObject } from "@/utils/tracking" import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter" import { TrackingChannelEnum, TrackingSDKHotelInfo, TrackingSDKPageData, TrackingSDKUserData, } from "@/types/components/tracking" import { Packages } from "@/types/requests/packages" type Props = { initialHotelsTrackingData: TrackingSDKHotelInfo userTrackingData: TrackingSDKUserData lang: Lang selectedRoom: RoomConfiguration cancellationRule: string } export default function EnterDetailsTracking(props: Props) { const { initialHotelsTrackingData, userTrackingData, lang, selectedRoom, cancellationRule, } = props const { currentStep, bedType, breakfast, totalPrice, roomPrice, roomRate, packages, } = useEnterDetailsStore((state) => state) const { getPageLoadTime, hasRun } = useTrackingStore() const pathName = usePathname() const sessionId = useSessionId() // We need this check to differentiate hard vs soft navigations // This is not because of StrictMode const hasRunInitial = useRef(false) const previousPathname = useRef(null) const getSpecialRoomType = (packages: Packages | null) => { if (!packages) { return "" } const specialRoom = packages.find((p) => [ RoomPackageCodeEnum.PET_ROOM, RoomPackageCodeEnum.ALLERGY_ROOM, RoomPackageCodeEnum.ACCESSIBILITY_ROOM, ].includes(p.code) ) switch (specialRoom?.code) { case RoomPackageCodeEnum.PET_ROOM: return "pet-friendly" case RoomPackageCodeEnum.ALLERGY_ROOM: return "allergy room" case RoomPackageCodeEnum.ACCESSIBILITY_ROOM: return "accessibility room" default: return "" } } const pageObject = useMemo(() => { const pageTrackingData: TrackingSDKPageData = { pageId: currentStep, domainLanguage: lang, channel: TrackingChannelEnum["hotelreservation"], pageName: `hotelreservation|${currentStep}`, siteSections: `hotelreservation|${currentStep}`, pageType: currentStep, siteVersion: "new-web", } const trackingData = { ...pageTrackingData, sessionId, pathName, pageLoadTime: getPageLoadTime(), } const pageObject = createSDKPageObject(trackingData) return pageObject }, [currentStep, getPageLoadTime, lang, pathName, sessionId]) const hotelDetailsData = useMemo(() => { const isMember = true const rate = isMember ? roomRate.memberRate : roomRate.publicRate const data: TrackingSDKHotelInfo = { ...initialHotelsTrackingData, rateCode: rate?.rateCode, rateCodeType: rate?.rateType, rateCodeName: rate?.rateCode, rateCodeCancellationRule: cancellationRule, revenueCurrencyCode: totalPrice.local?.currency, breakfastOption: breakfast ? "breakfast buffet" : "no breakfast", totalPrice: totalPrice.local?.price, specialRoomType: getSpecialRoomType(packages), roomTypeName: selectedRoom.roomType, bedType: bedType?.description, roomTypeCode: bedType?.roomTypeCode, roomPrice: roomPrice.local.price, //discount: public - member rates?. } return data }, [ roomRate.memberRate, roomRate.publicRate, initialHotelsTrackingData, cancellationRule, totalPrice.local?.currency, totalPrice.local?.price, breakfast, packages, selectedRoom.roomType, bedType?.description, bedType?.roomTypeCode, roomPrice.local.price, ]) useEffect(() => { if (!hasRunInitial.current) { hasRunInitial.current = true previousPathname.current = pathName // Set initial path to compare later return } if (previousPathname.current !== pathName) { console.log("TRACKING: Tracking RouterTransition pageViewEnd", pageObject) console.log( "TRACKING: Tracking RouterTransition userData", userTrackingData ) console.log( "TRACKING: Tracking RouterTransition hotelInfo", hotelDetailsData ) window.adobeDataLayer.push({ event: "pageView", pageInfo: pageObject, userInfo: userTrackingData, hotelInfo: hotelDetailsData, }) } previousPathname.current = pathName // Update for next render }, [userTrackingData, pageObject, hotelDetailsData, pathName]) return null }