Merged in chore/move-enter-details (pull request #2778)
Chore/move enter details Approved-by: Anton Gunnarsson
This commit is contained in:
Joakim Jäderberg
@@ -1,15 +1,7 @@
|
||||
export const SEARCHTYPE = "searchtype"
|
||||
|
||||
export const MEMBERSHIP_FAILED_ERROR = "MembershipFailedError"
|
||||
|
||||
export enum CancellationRuleEnum {
|
||||
CancellableBefore6PM = "CancellableBefore6PM",
|
||||
NonCancellable = "NonCancellable",
|
||||
Changeable = "Changeable",
|
||||
}
|
||||
|
||||
export enum PaymentCallbackStatusEnum {
|
||||
Success = "success",
|
||||
Error = "error",
|
||||
Cancel = "cancel",
|
||||
}
|
||||
|
||||
5
packages/common/constants/paymentCallbackStatusEnum.ts
Normal file
5
packages/common/constants/paymentCallbackStatusEnum.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export enum PaymentCallbackStatusEnum {
|
||||
Success = "success",
|
||||
Error = "error",
|
||||
Cancel = "cancel",
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Lang } from "../language"
|
||||
|
||||
import type { LangRoute } from "./langRoute"
|
||||
|
||||
export const bookingTermsAndConditionsRoutes = {
|
||||
da: `/${Lang.da}/kundeservice/politikker/bookingsvilkar`,
|
||||
de: `/${Lang.de}/kundenbetreuung/richtlinien/reservierungsbedingungen`,
|
||||
en: `/${Lang.en}/customer-service/policies/booking-terms`,
|
||||
fi: `/${Lang.fi}/asiakaspalvelu/ehdot/varausehdot`,
|
||||
no: `/${Lang.no}/kundeservice/betingelser/reservasjonsbetingelser`,
|
||||
sv: `/${Lang.sv}/kundservice/villkor/bokningsvillkor`,
|
||||
} as const satisfies LangRoute
|
||||
12
packages/common/constants/routes/customerService.ts
Normal file
12
packages/common/constants/routes/customerService.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { Lang } from "../language"
|
||||
|
||||
import type { LangRoute } from "./langRoute"
|
||||
|
||||
export const customerService = {
|
||||
da: `/${Lang.da}/kundeservice`,
|
||||
de: `/${Lang.de}/kundenbetreuung`,
|
||||
en: `/${Lang.en}/customer-service`,
|
||||
fi: `/${Lang.fi}/asiakaspalvelu`,
|
||||
no: `/${Lang.no}/kundeservice`,
|
||||
sv: `/${Lang.sv}/kundservice`,
|
||||
} as const satisfies LangRoute
|
||||
@@ -1,19 +1,21 @@
|
||||
import type { LangRoute } from "./langRoute"
|
||||
|
||||
export const findMyBooking: LangRoute = {
|
||||
export type FindMyBookingRoute =
|
||||
(typeof findMyBookingRoutes)[keyof typeof findMyBookingRoutes]
|
||||
export const findMyBookingRoutes = {
|
||||
da: "/da/hotelreservation/hent-booking",
|
||||
de: "/de/hotelreservation/mein-bereich",
|
||||
en: "/en/hotelreservation/get-booking",
|
||||
fi: "/fi/hotelreservation/hae-varaus",
|
||||
no: "/no/hotelreservation/get-booking",
|
||||
sv: "/sv/hotelreservation/hitta-bokning",
|
||||
}
|
||||
} as const satisfies LangRoute
|
||||
|
||||
export const findMyBookingCurrentWebPath: LangRoute = {
|
||||
export const findMyBookingCurrentWebPath = {
|
||||
da: "/hotelreservation/hent-booking",
|
||||
de: "/hotelreservation/mein-bereich",
|
||||
en: "/hotelreservation/get-booking",
|
||||
fi: "/varaa-hotelli/hae-varaus",
|
||||
no: "/hotelreservation/get-booking",
|
||||
sv: "/hotelreservation/hitta-bokning",
|
||||
}
|
||||
} as const satisfies LangRoute
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Lang } from "../language"
|
||||
|
||||
import type { LangRoute } from "./langRoute"
|
||||
|
||||
export const membershipTermsAndConditions: LangRoute = {
|
||||
da: `/${Lang.da}/kundeservice/politikker/scandic-friends-betingelser`,
|
||||
de: `/${Lang.de}/kundenbetreuung/richtlinien/scandic-friends-allgemeine-geschaeftsbedingungen`,
|
||||
en: `/${Lang.en}/customer-service/policies/scandic-friends`,
|
||||
fi: `/${Lang.fi}/asiakaspalvelu/ehdot/scandic-friends`,
|
||||
no: `/${Lang.no}/kundeservice/betingelser/scandic-friends-betingelser`,
|
||||
sv: `/${Lang.sv}/kundservice/villkor/scandic-friends`,
|
||||
}
|
||||
12
packages/common/constants/routes/privacyPolicyRoutes.ts
Normal file
12
packages/common/constants/routes/privacyPolicyRoutes.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { Lang } from "../language"
|
||||
|
||||
import type { LangRoute } from "./langRoute"
|
||||
|
||||
export const privacyPolicyRoutes = {
|
||||
da: `/${Lang.da}/kundeservice/politikker/privatliv`,
|
||||
de: `/${Lang.de}/kundenbetreuung/richtlinien/datenschutz`,
|
||||
en: `/${Lang.en}/customer-service/policies/privacy`,
|
||||
fi: `/${Lang.fi}/asiakaspalvelu/ehdot/tietosuojaseloste`,
|
||||
no: `/${Lang.no}/kundeservice/personvernpolicy`,
|
||||
sv: `/${Lang.sv}/kundservice/villkor/integritetspolicy`,
|
||||
} as const satisfies LangRoute
|
||||
28
packages/common/hooks/useLazyPathname.ts
Normal file
28
packages/common/hooks/useLazyPathname.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
"use client"
|
||||
|
||||
import { usePathname, useSearchParams } from "next/navigation"
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
/*** This hook is used to get the current pathname (as reflected in window.location.href) of the page. During ssr, the value from usePathname()
|
||||
* is the value return from NextResponse.rewrite() (e.g. the path from the app directory) instead of the actual pathname from the URL.
|
||||
*/
|
||||
export function useLazyPathname({ includeSearchParams = false } = {}) {
|
||||
const pathName = usePathname()
|
||||
const searchParams = useSearchParams()
|
||||
|
||||
const [updatedPathName, setUpdatedPathName] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!includeSearchParams) {
|
||||
setUpdatedPathName(pathName)
|
||||
} else {
|
||||
const updatedPathname = searchParams.size
|
||||
? `${pathName}?${searchParams.toString()}`
|
||||
: pathName
|
||||
|
||||
setUpdatedPathName(updatedPathname)
|
||||
}
|
||||
}, [pathName, searchParams, includeSearchParams])
|
||||
|
||||
return updatedPathName
|
||||
}
|
||||
23
packages/common/hooks/usePhoneNumberParsing.ts
Normal file
23
packages/common/hooks/usePhoneNumberParsing.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
"use client"
|
||||
|
||||
import parsePhoneNumberFromString from "libphonenumber-js"
|
||||
|
||||
export function usePhoneNumberParsing(
|
||||
initialPhoneNumber?: string,
|
||||
initialPhoneNumberCC?: string
|
||||
) {
|
||||
const parsedInitialPhoneNumber = initialPhoneNumber
|
||||
? parsePhoneNumberFromString(initialPhoneNumber)
|
||||
: undefined
|
||||
|
||||
let phoneNumberCC = initialPhoneNumberCC
|
||||
if (parsedInitialPhoneNumber && !phoneNumberCC) {
|
||||
phoneNumberCC = parsedInitialPhoneNumber.country ?? ""
|
||||
}
|
||||
|
||||
const phoneNumber = parsedInitialPhoneNumber?.isValid()
|
||||
? parsedInitialPhoneNumber.nationalNumber
|
||||
: initialPhoneNumber
|
||||
|
||||
return { phoneNumber, phoneNumberCC: phoneNumberCC?.toLowerCase() }
|
||||
}
|
||||
@@ -21,6 +21,7 @@
|
||||
"./constants/language": "./constants/language.ts",
|
||||
"./constants/loginType": "./constants/loginType.ts",
|
||||
"./constants/membershipLevels": "./constants/membershipLevels.ts",
|
||||
"./constants/paymentCallbackStatusEnum": "./constants/paymentCallbackStatusEnum.ts",
|
||||
"./constants/paymentMethod": "./constants/paymentMethod.ts",
|
||||
"./constants/rate": "./constants/rate.ts",
|
||||
"./constants/rateType": "./constants/rateType.ts",
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { SESSION_ID_KEY_NAME } from "../hooks/useSessionId"
|
||||
import { logger } from "../logger"
|
||||
|
||||
export function trackEvent(data: any) {
|
||||
if (
|
||||
typeof window !== "undefined" &&
|
||||
window.adobeDataLayer &&
|
||||
window.dataLayer
|
||||
) {
|
||||
let sessionId = ""
|
||||
|
||||
try {
|
||||
sessionId = sessionStorage.getItem(SESSION_ID_KEY_NAME) ?? ""
|
||||
} catch (e) {
|
||||
logger.error("Error getting sessionId from sessionStorage", e)
|
||||
}
|
||||
|
||||
data = {
|
||||
...data,
|
||||
pageInfo: { ...data?.pageInfo, siteVersion: "new-web", sessionId },
|
||||
}
|
||||
|
||||
window.adobeDataLayer.push(data)
|
||||
window.dataLayer.push(data)
|
||||
}
|
||||
}
|
||||
|
||||
export function trackClick(
|
||||
name: string,
|
||||
additionalParams?: Record<string, string>
|
||||
) {
|
||||
trackEvent({
|
||||
event: "linkClick",
|
||||
cta: {
|
||||
...additionalParams,
|
||||
name,
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
import { trackEvent } from "./base"
|
||||
|
||||
export type FormType = "checkout" | "signup"
|
||||
|
||||
export function trackFormInputStarted(type: FormType, nameSuffix?: string) {
|
||||
if (type === "checkout") {
|
||||
trackEvent({
|
||||
event: "formStart",
|
||||
form: {
|
||||
action: "checkout form start",
|
||||
name: "checkout enter detail" + nameSuffix,
|
||||
type: type,
|
||||
},
|
||||
})
|
||||
} else if (type === "signup") {
|
||||
trackEvent({
|
||||
event: "formStart",
|
||||
form: {
|
||||
action: "signup form start",
|
||||
name: "member registration" + nameSuffix,
|
||||
type: type,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function trackFormAbandonment(
|
||||
type: FormType,
|
||||
lastAccessedField: string,
|
||||
nameSuffix?: string
|
||||
) {
|
||||
if (type === "checkout") {
|
||||
trackEvent({
|
||||
event: "formAbandonment",
|
||||
form: {
|
||||
action: "checkout form abandonment",
|
||||
name: "checkout enter detail" + nameSuffix,
|
||||
type: type,
|
||||
lastAccessedField,
|
||||
},
|
||||
})
|
||||
} else if (type === "signup") {
|
||||
trackEvent({
|
||||
event: "formAbandonment",
|
||||
form: {
|
||||
action: "signup form abandonment",
|
||||
name: "member registration" + nameSuffix,
|
||||
type: type,
|
||||
lastAccessedField,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function trackFormValidationError(
|
||||
type: FormType,
|
||||
errorMessage: string,
|
||||
nameSuffix?: string
|
||||
) {
|
||||
if (type === "checkout") {
|
||||
trackEvent({
|
||||
event: "formError",
|
||||
form: {
|
||||
action: "checkout form error",
|
||||
name: "checkout enter detail" + nameSuffix,
|
||||
type: type,
|
||||
errorMessage,
|
||||
},
|
||||
})
|
||||
} else if (type === "signup") {
|
||||
trackEvent({
|
||||
event: "formError",
|
||||
form: {
|
||||
action: "signup form error",
|
||||
name: "member registration" + nameSuffix,
|
||||
type: type,
|
||||
errorMessage,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function trackFormCompletion(type: FormType, nameSuffix?: string) {
|
||||
if (type === "checkout") {
|
||||
trackEvent({
|
||||
event: "formCompletion",
|
||||
form: {
|
||||
action: "checkout form completion",
|
||||
name: "checkout enter detail" + nameSuffix,
|
||||
type: type,
|
||||
},
|
||||
})
|
||||
} else if (type === "signup") {
|
||||
trackEvent({
|
||||
event: "formCompletion",
|
||||
form: {
|
||||
action: "signup form completion",
|
||||
name: "member registration" + nameSuffix,
|
||||
type: type,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
import { trackEvent } from "./base"
|
||||
|
||||
import type { TrackingSDKData } from "./types"
|
||||
|
||||
function convertSlashToPipe(url: string) {
|
||||
const formattedUrl = url.startsWith("/") ? url.slice(1) : url
|
||||
return formattedUrl.replaceAll("/", "|")
|
||||
}
|
||||
|
||||
export function trackPageViewStart() {
|
||||
trackEvent({
|
||||
event: "pageViewStart",
|
||||
})
|
||||
}
|
||||
|
||||
export function trackPageView(data: any) {
|
||||
trackEvent(data)
|
||||
}
|
||||
|
||||
export function createSDKPageObject(
|
||||
trackingData: TrackingSDKData
|
||||
): TrackingSDKData {
|
||||
let pageName = convertSlashToPipe(trackingData.pageName)
|
||||
let siteSections = convertSlashToPipe(trackingData.siteSections)
|
||||
|
||||
if (trackingData.pathName.indexOf("/webview/") > -1) {
|
||||
pageName = "webview|" + pageName
|
||||
siteSections = "webview|" + siteSections
|
||||
}
|
||||
|
||||
return {
|
||||
...trackingData,
|
||||
domain: typeof window !== "undefined" ? window.location.host : "",
|
||||
pageName: pageName,
|
||||
siteSections: siteSections,
|
||||
}
|
||||
}
|
||||
@@ -1,194 +0,0 @@
|
||||
import type { Lang } from "@scandic-hotels/common/constants/language"
|
||||
import type { LoginType } from "@scandic-hotels/common/constants/loginType"
|
||||
import type { MembershipLevel } from "@scandic-hotels/common/constants/membershipLevels"
|
||||
import type { RateEnum } from "@scandic-hotels/common/constants/rate"
|
||||
|
||||
export enum TrackingChannelEnum {
|
||||
"scandic-friends" = "scandic-friends",
|
||||
"static-content-page" = "static-content-page",
|
||||
"hotelreservation" = "hotelreservation",
|
||||
"collection-page" = "collection-page",
|
||||
"campaign" = "campaign",
|
||||
"hotels" = "hotels",
|
||||
"homepage" = "homepage",
|
||||
}
|
||||
|
||||
export type TrackingChannel = keyof typeof TrackingChannelEnum
|
||||
|
||||
export type TrackingSDKPageData = {
|
||||
pageId: string
|
||||
createDate?: string
|
||||
publishDate?: string
|
||||
domainLanguage: Lang
|
||||
pageType: string
|
||||
channel: TrackingChannel
|
||||
siteVersion: "new-web"
|
||||
pageName: string
|
||||
domain?: string
|
||||
siteSections: string
|
||||
pageLoadTime?: number // Page load time in seconds
|
||||
lcpTime?: number // Largest contentful paint time in seconds
|
||||
sessionId?: string | null
|
||||
}
|
||||
|
||||
export type TrackingSDKUserData =
|
||||
| {
|
||||
loginStatus: "logged in"
|
||||
loginType?: LoginType
|
||||
memberId?: string
|
||||
membershipNumber?: string
|
||||
memberLevel?: MembershipLevel
|
||||
noOfNightsStayed?: number
|
||||
totalPointsAvailableToSpend?: number
|
||||
loginAction?: "login success"
|
||||
}
|
||||
| {
|
||||
loginStatus: "Non-logged in"
|
||||
}
|
||||
| { loginStatus: "Error" }
|
||||
|
||||
export type TrackingSDKAncillaries = Ancillary[]
|
||||
|
||||
export type TrackingSDKHotelInfo = {
|
||||
ageOfChildren?: string // "10", "2,5,10"
|
||||
analyticsRateCode?: RateEnum | string
|
||||
arrivalDate?: string
|
||||
availableResults?: number // Number of hotels to choose from after a city search
|
||||
bedType?: string
|
||||
bedTypePosition?: number // Which position the bed type had in the list of available bed types
|
||||
bnr?: string // Booking number
|
||||
breakfastOption?: string // "no breakfast" or "breakfast buffet"
|
||||
//bonuscheque?: boolean
|
||||
bookingCode?: string
|
||||
bookingCodeAvailability?: string
|
||||
bookingTypeofDay?: "weekend" | "weekday"
|
||||
childBedPreference?: string
|
||||
country?: string // Country of the hotel
|
||||
departureDate?: string
|
||||
discount?: number | string
|
||||
duration?: number // Number of nights to stay
|
||||
hotelID?: string
|
||||
leadTime?: number // Number of days from booking date until arrivalDate
|
||||
lowestRoomPrice?: number
|
||||
multiroomRateIdentity?: string
|
||||
//modifyValues?: string // <price:<value>,roomtype:value>,bed:<value,<breakfast:value>
|
||||
noOfAdults?: number | string // multiroom support, "2,1,3"
|
||||
noOfChildren?: number | string // multiroom support, "2,1,3"
|
||||
noOfRooms?: number
|
||||
rateCode?: string
|
||||
rateCodeCancellationRule?: string
|
||||
rateCodeName?: string // Scandic Friends - full flex inkl. frukost
|
||||
rateCodeType?: string // regular, promotion etc
|
||||
region?: string // Region of the hotel
|
||||
revenueCurrencyCode?: string // SEK, DKK, NOK, EUR
|
||||
rewardNight?: string
|
||||
rewardNightAvailability?: string
|
||||
points?: number | string // Should be sent on confirmation page and enter-details page
|
||||
roomPrice?: number | string
|
||||
roomTypeCode?: string
|
||||
roomTypeName?: string
|
||||
roomTypePosition?: number // Which position the room had in the list of available rooms
|
||||
searchTerm?: string
|
||||
searchType?: "destination" | "hotel"
|
||||
specialRoomType?: string // allergy room, pet-friendly, accesibillity room
|
||||
totalPrice?: number | string
|
||||
lateArrivalGuarantee?: string
|
||||
guaranteedProduct?: string
|
||||
emailId?: string // Encrypted hash value on booking confirmation page
|
||||
mobileNumber?: string // Encrypted hash value on booking confirmation page
|
||||
}
|
||||
|
||||
export type Ancillary = {
|
||||
productId: string
|
||||
productUnits?: number
|
||||
hotelid?: string
|
||||
productPoints: number
|
||||
productPrice: number
|
||||
productType: string
|
||||
productName: string
|
||||
productCategory: string
|
||||
}
|
||||
|
||||
export type TrackingSDKPaymentInfo = {
|
||||
edccCurrencyFrom?: string
|
||||
edccCurrencyTo?: string
|
||||
isedcc?: string
|
||||
isSavedCard?: boolean
|
||||
isCreditCard?: boolean
|
||||
paymentStatus?: "confirmed" | "glacardsaveconfirmed"
|
||||
paymentType?: string
|
||||
type?: string
|
||||
status?: string
|
||||
}
|
||||
|
||||
export type TrackingSDKData = TrackingSDKPageData & {
|
||||
pathName: string
|
||||
}
|
||||
|
||||
type BasePaymentEvent = {
|
||||
event: string
|
||||
hotelId: string | undefined
|
||||
method?: string | null
|
||||
isSavedCreditCard?: boolean
|
||||
smsEnable?: boolean
|
||||
status: "attempt" | "cancelled" | "failed"
|
||||
}
|
||||
|
||||
export type PaymentAttemptStartEvent = BasePaymentEvent
|
||||
|
||||
export type PaymentCancelEvent = BasePaymentEvent
|
||||
|
||||
export type PaymentFailEvent = BasePaymentEvent & {
|
||||
errorMessage?: string
|
||||
}
|
||||
|
||||
export type PaymentEvent =
|
||||
| PaymentAttemptStartEvent
|
||||
| PaymentCancelEvent
|
||||
| PaymentFailEvent
|
||||
|
||||
export type LowestRoomPriceEvent = {
|
||||
hotelId: string | null
|
||||
arrivalDate: string | null
|
||||
departureDate: string | null
|
||||
lowestPrice: string
|
||||
currency?: string
|
||||
}
|
||||
|
||||
// Old tracking setup types:
|
||||
// TODO: Remove this when we delete "current site"
|
||||
export type TrackingProps = {
|
||||
pageData: {
|
||||
pageId: string
|
||||
createdDate: string
|
||||
publishedDate: string
|
||||
englishUrl?: string
|
||||
lang: Lang
|
||||
}
|
||||
}
|
||||
|
||||
export type TrackingData = {
|
||||
lang: Lang
|
||||
englishUrl?: string
|
||||
pathName: string
|
||||
queryString: string
|
||||
pageId: string
|
||||
publishedDate: string
|
||||
createdDate: string
|
||||
}
|
||||
|
||||
export type SiteSectionObject = {
|
||||
sitesection1: string
|
||||
sitesection2: string
|
||||
sitesection3: string
|
||||
sitesection4: string
|
||||
sitesection5: string
|
||||
sitesection6: string
|
||||
}
|
||||
|
||||
export type TrackingPosition =
|
||||
| "top menu"
|
||||
| "hamburger menu"
|
||||
| "join scandic friends sidebar"
|
||||
| "enter details"
|
||||
| "my stay"
|
||||
@@ -1,78 +0,0 @@
|
||||
"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 "./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,
|
||||
}
|
||||
}
|
||||
@@ -1,166 +0,0 @@
|
||||
"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 })
|
||||
})
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { startTransition, useEffect, useRef, useState } from "react"
|
||||
|
||||
import { useSessionId } from "../hooks/useSessionId"
|
||||
import useRouterTransitionStore from "../stores/router-transition"
|
||||
import useTrackingStore from "../stores/tracking"
|
||||
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
|
||||
}
|
||||
|
||||
enum TransitionStatusEnum {
|
||||
NotRun = "NotRun",
|
||||
Running = "Running",
|
||||
Done = "Done",
|
||||
}
|
||||
|
||||
type TransitionStatus = keyof typeof TransitionStatusEnum
|
||||
|
||||
export const useTrackSoftNavigation = ({
|
||||
pageData,
|
||||
hotelInfo,
|
||||
paymentInfo,
|
||||
ancillaries,
|
||||
userData,
|
||||
pathName,
|
||||
}: TrackingSDKProps) => {
|
||||
const [status, setStatus] = useState<TransitionStatus>(
|
||||
TransitionStatusEnum.NotRun
|
||||
)
|
||||
const { getPageLoadTime } = useTrackingStore()
|
||||
|
||||
const sessionId = useSessionId()
|
||||
const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
|
||||
|
||||
const previousPathname = useRef<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!userData) {
|
||||
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)
|
||||
|
||||
trackPageView({
|
||||
event: "pageView",
|
||||
pageInfo: pageObject,
|
||||
userInfo: userData,
|
||||
hotelInfo: hotelInfo,
|
||||
paymentInfo,
|
||||
ancillaries,
|
||||
})
|
||||
|
||||
setStatus(TransitionStatusEnum.NotRun) // Reset status
|
||||
previousPathname.current = pathName // Update for next render
|
||||
}
|
||||
}, [
|
||||
isTransitioning,
|
||||
status,
|
||||
stopRouterTransition,
|
||||
pageData,
|
||||
pathName,
|
||||
hotelInfo,
|
||||
getPageLoadTime,
|
||||
sessionId,
|
||||
paymentInfo,
|
||||
userData,
|
||||
ancillaries,
|
||||
])
|
||||
}
|
||||
Reference in New Issue
Block a user