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
This commit is contained in:
Anton Gunnarsson
@@ -1,345 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { usePathname } from "next/navigation"
|
||||
import {
|
||||
startTransition,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react"
|
||||
import {
|
||||
type Control,
|
||||
type FieldValues,
|
||||
useFormState,
|
||||
type UseFromSubscribe,
|
||||
} from "react-hook-form"
|
||||
|
||||
import { useSessionId } from "@scandic-hotels/common/hooks/useSessionId"
|
||||
import { logger } from "@scandic-hotels/common/logger"
|
||||
import { trpc } from "@scandic-hotels/trpc/client"
|
||||
|
||||
import useRouterTransitionStore from "@/stores/router-transition"
|
||||
import useTrackingStore from "@/stores/tracking"
|
||||
|
||||
import useLang from "@/hooks/useLang"
|
||||
import { promiseWithTimeout } from "@/utils/promiseWithTimeout"
|
||||
import { createSDKPageObject, trackPageView } from "@/utils/tracking"
|
||||
import {
|
||||
type FormType,
|
||||
trackFormAbandonment,
|
||||
trackFormCompletion,
|
||||
trackFormInputStarted,
|
||||
} from "@/utils/tracking/form"
|
||||
|
||||
import type {
|
||||
TrackingSDKProps,
|
||||
TrackingSDKUserData,
|
||||
} from "@/types/components/tracking"
|
||||
|
||||
enum TransitionStatusEnum {
|
||||
NotRun = "NotRun",
|
||||
Running = "Running",
|
||||
Done = "Done",
|
||||
}
|
||||
|
||||
type TransitionStatus = keyof typeof TransitionStatusEnum
|
||||
|
||||
let hasTrackedHardNavigation = false
|
||||
export const useTrackHardNavigation = ({
|
||||
pageData,
|
||||
hotelInfo,
|
||||
paymentInfo,
|
||||
ancillaries,
|
||||
}: TrackingSDKProps) => {
|
||||
const lang = useLang()
|
||||
const {
|
||||
data: userTrackingData,
|
||||
isPending,
|
||||
isError,
|
||||
} = trpc.user.userTrackingInfo.useQuery({ lang })
|
||||
|
||||
const sessionId = useSessionId()
|
||||
const pathName = usePathname()
|
||||
|
||||
useEffect(() => {
|
||||
if (isPending) {
|
||||
return
|
||||
}
|
||||
|
||||
const userData: TrackingSDKUserData = isError
|
||||
? { loginStatus: "Error" }
|
||||
: userTrackingData
|
||||
|
||||
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)
|
||||
}, [
|
||||
isError,
|
||||
pathName,
|
||||
hotelInfo,
|
||||
userTrackingData,
|
||||
pageData,
|
||||
sessionId,
|
||||
paymentInfo,
|
||||
isPending,
|
||||
ancillaries,
|
||||
])
|
||||
}
|
||||
|
||||
export const useTrackSoftNavigation = ({
|
||||
pageData,
|
||||
hotelInfo,
|
||||
paymentInfo,
|
||||
ancillaries,
|
||||
}: TrackingSDKProps) => {
|
||||
const lang = useLang()
|
||||
const {
|
||||
data: userTrackingData,
|
||||
isPending,
|
||||
isError,
|
||||
} = trpc.user.userTrackingInfo.useQuery({ lang })
|
||||
|
||||
const [status, setStatus] = useState<TransitionStatus>(
|
||||
TransitionStatusEnum.NotRun
|
||||
)
|
||||
const { getPageLoadTime } = useTrackingStore()
|
||||
|
||||
const sessionId = useSessionId()
|
||||
const pathName = usePathname()
|
||||
const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
|
||||
|
||||
const previousPathname = useRef<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (isPending) {
|
||||
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)
|
||||
const userData: TrackingSDKUserData = isError
|
||||
? { loginStatus: "Error" }
|
||||
: userTrackingData
|
||||
|
||||
trackPageView({
|
||||
event: "pageView",
|
||||
pageInfo: pageObject,
|
||||
userInfo: userData,
|
||||
hotelInfo: hotelInfo,
|
||||
paymentInfo,
|
||||
ancillaries,
|
||||
})
|
||||
|
||||
setStatus(TransitionStatusEnum.NotRun) // Reset status
|
||||
previousPathname.current = pathName // Update for next render
|
||||
}
|
||||
}, [
|
||||
isError,
|
||||
isPending,
|
||||
isTransitioning,
|
||||
status,
|
||||
stopRouterTransition,
|
||||
pageData,
|
||||
pathName,
|
||||
hotelInfo,
|
||||
getPageLoadTime,
|
||||
sessionId,
|
||||
paymentInfo,
|
||||
userTrackingData,
|
||||
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 })
|
||||
})
|
||||
}
|
||||
|
||||
export function useFormTracking<T extends FieldValues>(
|
||||
formType: FormType,
|
||||
subscribe: UseFromSubscribe<T>,
|
||||
control: Control<T>,
|
||||
nameSuffix: string = ""
|
||||
) {
|
||||
const [formStarted, setFormStarted] = useState(false)
|
||||
const lastAccessedField = useRef<string | undefined>(undefined)
|
||||
const formState = useFormState({ control })
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = subscribe({
|
||||
formState: { dirtyFields: true },
|
||||
callback: (data) => {
|
||||
if ("name" in data) {
|
||||
lastAccessedField.current = data.name as string
|
||||
}
|
||||
|
||||
if (!formStarted) {
|
||||
trackFormInputStarted(formType, nameSuffix)
|
||||
setFormStarted(true)
|
||||
}
|
||||
},
|
||||
})
|
||||
return () => unsubscribe()
|
||||
}, [subscribe, formType, nameSuffix, formStarted])
|
||||
|
||||
useEffect(() => {
|
||||
if (!formStarted || !lastAccessedField.current || formState.isValid) return
|
||||
|
||||
const lastField = lastAccessedField.current
|
||||
|
||||
function handleBeforeUnload() {
|
||||
trackFormAbandonment(formType, lastField, nameSuffix)
|
||||
}
|
||||
|
||||
function handleVisibilityChange() {
|
||||
if (document.visibilityState === "hidden") {
|
||||
trackFormAbandonment(formType, lastField, nameSuffix)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("beforeunload", handleBeforeUnload)
|
||||
window.addEventListener("visibilitychange", handleVisibilityChange)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("beforeunload", handleBeforeUnload)
|
||||
window.removeEventListener("visibilitychange", handleVisibilityChange)
|
||||
}
|
||||
}, [formStarted, formType, nameSuffix, formState.isValid])
|
||||
|
||||
const trackFormSubmit = useCallback(() => {
|
||||
if (formState.isValid) {
|
||||
trackFormCompletion(formType, nameSuffix)
|
||||
}
|
||||
}, [formType, nameSuffix, formState.isValid])
|
||||
|
||||
return {
|
||||
trackFormSubmit,
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,19 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
useTrackHardNavigation,
|
||||
useTrackSoftNavigation,
|
||||
} from "@/components/TrackingSDK/hooks"
|
||||
import { usePathname } from "next/navigation"
|
||||
|
||||
import { useTrackHardNavigation } from "@scandic-hotels/common/tracking/useTrackHardNavigation"
|
||||
import { useTrackSoftNavigation } from "@scandic-hotels/common/tracking/useTrackSoftNavigation"
|
||||
import { trpc } from "@scandic-hotels/trpc/client"
|
||||
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import type {
|
||||
TrackingSDKAncillaries,
|
||||
TrackingSDKHotelInfo,
|
||||
TrackingSDKPageData,
|
||||
TrackingSDKPaymentInfo,
|
||||
} from "@/types/components/tracking"
|
||||
} from "@scandic-hotels/common/tracking/types"
|
||||
|
||||
export default function TrackingSDK({
|
||||
pageData,
|
||||
@@ -23,8 +26,30 @@ export default function TrackingSDK({
|
||||
paymentInfo?: TrackingSDKPaymentInfo
|
||||
ancillaries?: TrackingSDKAncillaries
|
||||
}) {
|
||||
useTrackHardNavigation({ pageData, hotelInfo, paymentInfo, ancillaries })
|
||||
useTrackSoftNavigation({ pageData, hotelInfo, paymentInfo, ancillaries })
|
||||
const lang = useLang()
|
||||
const pathName = usePathname()
|
||||
const { data, isError } = trpc.user.userTrackingInfo.useQuery({
|
||||
lang,
|
||||
})
|
||||
|
||||
const userData = isError ? ({ loginStatus: "Error" } as const) : data
|
||||
|
||||
useTrackHardNavigation({
|
||||
pageData,
|
||||
hotelInfo,
|
||||
paymentInfo,
|
||||
ancillaries,
|
||||
userData,
|
||||
pathName,
|
||||
})
|
||||
useTrackSoftNavigation({
|
||||
pageData,
|
||||
hotelInfo,
|
||||
paymentInfo,
|
||||
ancillaries,
|
||||
userData,
|
||||
pathName,
|
||||
})
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
78
apps/scandic-web/components/TrackingSDK/useFormTracking.ts
Normal file
78
apps/scandic-web/components/TrackingSDK/useFormTracking.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
"use client"
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
import {
|
||||
type Control,
|
||||
type FieldValues,
|
||||
useFormState,
|
||||
type UseFromSubscribe,
|
||||
} from "react-hook-form"
|
||||
|
||||
import {
|
||||
type FormType,
|
||||
trackFormAbandonment,
|
||||
trackFormCompletion,
|
||||
trackFormInputStarted,
|
||||
} from "@/utils/tracking/form"
|
||||
|
||||
export function useFormTracking<T extends FieldValues>(
|
||||
formType: FormType,
|
||||
subscribe: UseFromSubscribe<T>,
|
||||
control: Control<T>,
|
||||
nameSuffix: string = ""
|
||||
) {
|
||||
const [formStarted, setFormStarted] = useState(false)
|
||||
const lastAccessedField = useRef<string | undefined>(undefined)
|
||||
const formState = useFormState({ control })
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = subscribe({
|
||||
formState: { dirtyFields: true },
|
||||
callback: (data) => {
|
||||
if ("name" in data) {
|
||||
lastAccessedField.current = data.name as string
|
||||
}
|
||||
|
||||
if (!formStarted) {
|
||||
trackFormInputStarted(formType, nameSuffix)
|
||||
setFormStarted(true)
|
||||
}
|
||||
},
|
||||
})
|
||||
return () => unsubscribe()
|
||||
}, [subscribe, formType, nameSuffix, formStarted])
|
||||
|
||||
useEffect(() => {
|
||||
if (!formStarted || !lastAccessedField.current || formState.isValid) return
|
||||
|
||||
const lastField = lastAccessedField.current
|
||||
|
||||
function handleBeforeUnload() {
|
||||
trackFormAbandonment(formType, lastField, nameSuffix)
|
||||
}
|
||||
|
||||
function handleVisibilityChange() {
|
||||
if (document.visibilityState === "hidden") {
|
||||
trackFormAbandonment(formType, lastField, nameSuffix)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("beforeunload", handleBeforeUnload)
|
||||
window.addEventListener("visibilitychange", handleVisibilityChange)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("beforeunload", handleBeforeUnload)
|
||||
window.removeEventListener("visibilitychange", handleVisibilityChange)
|
||||
}
|
||||
}, [formStarted, formType, nameSuffix, formState.isValid])
|
||||
|
||||
const trackFormSubmit = useCallback(() => {
|
||||
if (formState.isValid) {
|
||||
trackFormCompletion(formType, nameSuffix)
|
||||
}
|
||||
}, [formType, nameSuffix, formState.isValid])
|
||||
|
||||
return {
|
||||
trackFormSubmit,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user