web/packages/common/tracking/useTrackSoftNavigation.ts

"use client"

import { startTransition, useEffect, useRef, useState } from "react"

import { useSessionId } from "../hooks/useSessionId"
import useRouterTransitionStore from "../stores/router-transition"
import useTrackingStore from "../stores/tracking"
import { createSDKPageObject, trackPageView } from "./pageview"

import type {
  TrackingSDKAncillaries,
  TrackingSDKHotelInfo,
  TrackingSDKPageData,
  TrackingSDKPaymentInfo,
  TrackingSDKUserData,
} from "./types"

type TrackingSDKProps = {
  pageData: TrackingSDKPageData
  hotelInfo?: TrackingSDKHotelInfo
  paymentInfo?: TrackingSDKPaymentInfo
  ancillaries?: TrackingSDKAncillaries
  userData: TrackingSDKUserData | undefined
  pathName: string
}

enum TransitionStatusEnum {
  NotRun = "NotRun",
  Running = "Running",
  Done = "Done",
}

type TransitionStatus = keyof typeof TransitionStatusEnum

export const useTrackSoftNavigation = ({
  pageData,
  hotelInfo,
  paymentInfo,
  ancillaries,
  userData,
  pathName,
}: TrackingSDKProps) => {
  const [status, setStatus] = useState<TransitionStatus>(
    TransitionStatusEnum.NotRun
  )
  const { getPageLoadTime } = useTrackingStore()

  const sessionId = useSessionId()
  const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()

  const previousPathname = useRef<string | null>(null)

  useEffect(() => {
    if (!userData) {
      return
    }

    if (isTransitioning && status === TransitionStatusEnum.NotRun) {
      startTransition(() => {
        setStatus(TransitionStatusEnum.Running)
      })
      return
    }

    if (isTransitioning && status === TransitionStatusEnum.Running) {
      setStatus(TransitionStatusEnum.Done)
      stopRouterTransition()
      return
    }

    if (!isTransitioning && status === TransitionStatusEnum.Done) {
      const pageLoadTime = getPageLoadTime()
      const trackingData = {
        ...pageData,
        sessionId,
        pathName,
        pageLoadTime: pageLoadTime,
      }
      const pageObject = createSDKPageObject(trackingData)

      trackPageView({
        event: "pageView",
        pageInfo: pageObject,
        userInfo: userData,
        hotelInfo: hotelInfo,
        paymentInfo,
        ancillaries,
      })

      setStatus(TransitionStatusEnum.NotRun) // Reset status
      previousPathname.current = pathName // Update for next render
    }
  }, [
    isTransitioning,
    status,
    stopRouterTransition,
    pageData,
    pathName,
    hotelInfo,
    getPageLoadTime,
    sessionId,
    paymentInfo,
    userData,
    ancillaries,
  ])
}