Refactor

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

@@ -1,7 +1,7 @@
 "use client"
 
 import { usePathname } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 
 import { Lang } from "@/constants/languages"
 import { useStepsStore } from "@/stores/steps"
@@ -28,55 +28,50 @@ export default function EnterDetailsTracking(props: Props) {
   const { getPageLoadTime, hasRun } = useTrackingStore()
   const pathName = usePathname()
 
-  const [hotelsTrackingData, setHotelsTrackingData] = useState(
+  const pageObject = useMemo(() => {
-    initialHotelsTrackingData
+    const pageTrackingData: TrackingSDKPageData = {
-  )
+      pageId: currentStep,
+      domainLanguage: lang,
+      channel: TrackingChannelEnum["hotelreservation"],
+      pageName: `hotelreservation|${currentStep}`,
+      siteSections: `hotelreservation|${currentStep}`,
+      pageType: currentStep,
+    }
+
+    const trackingData = {
+      ...pageTrackingData,
+      pathName,
+      pageLoadTime: getPageLoadTime(),
+    }
+    const pageObject = createSDKPageObject(trackingData)
+    return pageObject
+  }, [currentStep, getPageLoadTime, lang, pathName])
+
+  const hotelDetailsData = useMemo(() => {
+    const data: TrackingSDKHotelInfo = { ...initialHotelsTrackingData }
+    return data
+  }, [initialHotelsTrackingData])
 
   useEffect(() => {
-    function trackData() {
+    if (!hasRun) {
-      const pageTrackingData: TrackingSDKPageData = {
+      return
-        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) {
+    console.log("TRACKING: Tracking RouterTransition pageViewEnd", pageObject)
-      trackData()
+    console.log(
-    }
+      "TRACKING: Tracking RouterTransition userData",
-  }, [
+      userTrackingData
-    currentStep,
+    )
-    getPageLoadTime,
+    console.log(
-    hotelsTrackingData,
+      "TRACKING: Tracking RouterTransition hotelInfo",
-    pathName,
+      hotelDetailsData
-    userTrackingData,
+    )
-    hasRun,
+    window.adobeDataLayer.push({
-    lang,
+      event: "pageViewEnd",
-  ])
+      pageInfo: pageObject,
+      userInfo: userTrackingData,
+      hotelInfo: hotelDetailsData,
+    })
+  }, [userTrackingData, hasRun, pageObject, hotelDetailsData])
 
   return null
 }