98 lines
2.3 KiB
TypeScript
98 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { usePathname } from "next/navigation"
|
|
import { startTransition, useEffect, useOptimistic, useState } from "react"
|
|
|
|
import useRouterTransitionStore from "@/stores/router-transition"
|
|
import useTrackingStore from "@/stores/tracking"
|
|
|
|
import { createSDKPageObject, trackPageViewStart } from "@/utils/tracking"
|
|
|
|
import { TrackingSDKProps } from "@/types/components/tracking"
|
|
|
|
enum TransitionStatusEnum {
|
|
NotRun = "NotRun",
|
|
Running = "Running",
|
|
Done = "Done",
|
|
}
|
|
|
|
type TransitionStatus = keyof typeof TransitionStatusEnum
|
|
|
|
export default function RouterTransition({
|
|
pageData,
|
|
userData,
|
|
hotelInfo,
|
|
}: TrackingSDKProps) {
|
|
const [loading, setLoading] = useOptimistic(false)
|
|
const [status, setStatus] = useState<TransitionStatus>(
|
|
TransitionStatusEnum.NotRun
|
|
)
|
|
const { getPageLoadTime } = useTrackingStore()
|
|
|
|
const pathName = usePathname()
|
|
const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
|
|
|
|
// useEffect(() => {
|
|
// const handleStart = () => {
|
|
// trackPageViewStart()
|
|
// setInitialPageLoadTime(Date.now())
|
|
// }
|
|
|
|
// return () => {
|
|
// handleStart()
|
|
// }
|
|
// }, [pathName])
|
|
|
|
useEffect(() => {
|
|
if (isTransitioning && status === TransitionStatusEnum.NotRun) {
|
|
startTransition(() => {
|
|
setStatus(TransitionStatusEnum.Running)
|
|
setLoading(true)
|
|
})
|
|
} else if (
|
|
!loading &&
|
|
isTransitioning &&
|
|
status === TransitionStatusEnum.Running
|
|
) {
|
|
setStatus(TransitionStatusEnum.Done)
|
|
stopRouterTransition()
|
|
} else if (
|
|
!loading &&
|
|
!isTransitioning &&
|
|
status === TransitionStatusEnum.Done
|
|
) {
|
|
if (window.adobeDataLayer) {
|
|
const trackingData = {
|
|
...pageData,
|
|
pathName,
|
|
pageLoadTime: getPageLoadTime(),
|
|
}
|
|
const pageObject = createSDKPageObject(trackingData)
|
|
console.log(
|
|
"TRACKING: Tracking RouterTransition pageViewEnd",
|
|
pageObject
|
|
)
|
|
window.adobeDataLayer.push({
|
|
event: "pageViewEnd",
|
|
pageInfo: pageObject,
|
|
userInfo: userData,
|
|
hotelInfo: hotelInfo,
|
|
})
|
|
}
|
|
}
|
|
}, [
|
|
isTransitioning,
|
|
loading,
|
|
status,
|
|
setLoading,
|
|
stopRouterTransition,
|
|
pageData,
|
|
pathName,
|
|
userData,
|
|
hotelInfo,
|
|
getPageLoadTime,
|
|
])
|
|
|
|
return null
|
|
}
|