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

"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 { 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()

  // We need this check to differentiate hard vs soft navigations
  // This is not because of StrictMode
  const hasRunInitial = useRef<boolean>(false)
  const previousPathname = useRef<string | null>(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,
      pathName,
      pageLoadTime: getPageLoadTime(),
    }
    const pageObject = createSDKPageObject(trackingData)
    return pageObject
  }, [currentStep, getPageLoadTime, lang, pathName])

  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: rate?.requestedPrice?.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,
    }

    return data
  }, [
    roomRate.memberRate,
    roomRate.publicRate,
    initialHotelsTrackingData,
    cancellationRule,
    breakfast,
    totalPrice.local?.price,
    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
}