Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/tracking/lib/useTrackHardNavigation.ts

@@ -0,0 +1,167 @@
+"use client"
+
+import { useEffect } from "react"
+
+import { useSessionId } from "@scandic-hotels/common/hooks/useSessionId"
+import { logger } from "@scandic-hotels/common/logger"
+import { promiseWithTimeout } from "@scandic-hotels/common/utils/promiseWithTimeout"
+
+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
+}
+
+let hasTrackedHardNavigation = false
+export const useTrackHardNavigation = ({
+  pageData,
+  hotelInfo,
+  paymentInfo,
+  ancillaries,
+  userData,
+  pathName,
+}: TrackingSDKProps) => {
+  const sessionId = useSessionId()
+
+  useEffect(() => {
+    if (!userData) {
+      return
+    }
+
+    if (hasTrackedHardNavigation) {
+      return
+    }
+
+    hasTrackedHardNavigation = true
+
+    const track = () => {
+      trackPerformance({
+        pathName,
+        sessionId,
+        paymentInfo,
+        hotelInfo,
+        userData,
+        pageData,
+        ancillaries,
+      })
+    }
+
+    if (document.readyState === "complete") {
+      track()
+      return
+    }
+
+    window.addEventListener("load", track)
+    return () => window.removeEventListener("load", track)
+  }, [
+    pathName,
+    hotelInfo,
+    pageData,
+    sessionId,
+    paymentInfo,
+    userData,
+    ancillaries,
+  ])
+}
+
+const trackPerformance = async ({
+  pathName,
+  sessionId,
+  paymentInfo,
+  hotelInfo,
+  userData,
+  pageData,
+  ancillaries,
+}: {
+  pathName: string
+  sessionId: string | null
+  paymentInfo: TrackingSDKProps["paymentInfo"]
+  hotelInfo: TrackingSDKProps["hotelInfo"]
+  userData: TrackingSDKUserData
+  pageData: TrackingSDKProps["pageData"]
+  ancillaries: TrackingSDKProps["ancillaries"]
+}) => {
+  let pageLoadTime: number | undefined = undefined
+  let lcpTime: number | undefined = undefined
+
+  try {
+    pageLoadTime = await promiseWithTimeout(getPageLoadTimeEntry(), 3000)
+  } catch (error) {
+    logger.error("Error obtaining pageLoadTime:", error)
+  }
+
+  try {
+    lcpTime = await promiseWithTimeout(getLCPTimeEntry(), 3000)
+  } catch (error) {
+    logger.error("Error obtaining lcpTime:", error)
+  }
+
+  const trackingData = {
+    ...pageData,
+    sessionId,
+    pathName,
+    pageLoadTime,
+    lcpTime,
+  }
+  const pageObject = createSDKPageObject(trackingData)
+
+  trackPageView({
+    event: "pageView",
+    pageInfo: pageObject,
+    userInfo: userData,
+    hotelInfo,
+    paymentInfo,
+    ancillaries,
+  })
+}
+
+const getLCPTimeEntry = () => {
+  return new Promise<number | undefined>((resolve) => {
+    const observer = new PerformanceObserver((entries) => {
+      const lastEntry = entries.getEntries().at(-1)
+      if (lastEntry) {
+        observer.disconnect()
+        resolve(lastEntry.startTime / 1000)
+      }
+    })
+
+    const lcpSupported = PerformanceObserver.supportedEntryTypes?.includes(
+      "largest-contentful-paint"
+    )
+
+    if (lcpSupported) {
+      observer.observe({
+        type: "largest-contentful-paint",
+        buffered: true,
+      })
+    } else {
+      resolve(undefined)
+    }
+  })
+}
+
+const getPageLoadTimeEntry = () => {
+  return new Promise<number>((resolve) => {
+    const observer = new PerformanceObserver((entries) => {
+      const navEntry = entries.getEntriesByType("navigation")[0]
+      if (navEntry) {
+        observer.disconnect()
+        resolve(navEntry.duration / 1000)
+      }
+    })
+    observer.observe({ type: "navigation", buffered: true })
+  })
+}