Merged in feat/sw-2873-move-selecthotel-to-booking-flow (pull request #2727)

feat(SW-2873): Move select-hotel to booking flow * crude setup of select-hotel in partner-sas * wip * Fix linting * restructure tracking files * Remove dependency on trpc in tracking hooks * Move pageview tracking to common * Fix some lint and import issues * Add AlternativeHotelsPage * Add SelectHotelMapPage * Add AlternativeHotelsMapPage * remove next dependency in tracking store * Remove dependency on react in tracking hooks * move isSameBooking to booking-flow * Inject searchParamsComparator into tracking store * Move useTrackHardNavigation to common * Move useTrackSoftNavigation to common * Add TrackingSDK to partner-sas * call serverclient in layout * Remove unused css * Update types * Move HotelPin type * Fix todos * Merge branch 'master' into feat/sw-2873-move-selecthotel-to-booking-flow * Merge branch 'master' into feat/sw-2873-move-selecthotel-to-booking-flow * Fix component Approved-by: Joakim Jäderberg
2025-09-01 08:37:00 +00:00
parent 93a90bef9d
commit 87402a2092
157 changed files with 2026 additions and 1376 deletions
@@ -0,0 +1,166 @@
+"use client"
+
+import { useEffect } from "react"
+
+import { useSessionId } from "../hooks/useSessionId"
+import { logger } from "../logger"
+import { createSDKPageObject, trackPageView } from "../tracking/pageview"
+import { promiseWithTimeout } from "../utils/promiseWithTimeout"
+
+import type {
+  TrackingSDKAncillaries,
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+  TrackingSDKPaymentInfo,
+  TrackingSDKUserData,
+} from "../tracking/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 })
+  })
+}