From 08d5405cf1dd66d8e934d546d68445c425bac909 Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Fri, 10 Jan 2025 11:36:23 +0100 Subject: [PATCH] PR Fixes --- .../(payment-callback)/payment-callback/page.tsx | 13 +++++++++---- .../(standard)/step/enterDetailsTracking.tsx | 4 ++-- .../EnterDetails/Payment/PaymentClient.tsx | 6 +++--- .../SelectRate/RoomSelection/utils.ts | 2 ++ components/TrackingSDK/RouterTransition.tsx | 8 ++++---- types/components/tracking.ts | 16 ++++++++++++++-- utils/tracking.ts | 11 +++++++++-- 7 files changed, 43 insertions(+), 17 deletions(-) diff --git a/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/page.tsx index 877771ec4..83012d8fd 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/page.tsx @@ -20,12 +20,17 @@ export default async function PaymentCallbackPage({ searchParams, }: PageArgs< LangParams, - { status: "error" | "success" | "cancel"; confirmationNumber?: string } + { + status: "error" | "success" | "cancel" + confirmationNumber?: string + hotel?: string + } >) { console.log(`[payment-callback] callback started`) const lang = params.lang const status = searchParams.status const confirmationNumber = searchParams.confirmationNumber + const hotelId = searchParams.hotel if (status === "success" && confirmationNumber) { const confirmationUrl = `${bookingConfirmation(lang)}?${BOOKING_CONFIRMATION_NUMBER}=${confirmationNumber}` @@ -50,7 +55,7 @@ export default async function PaymentCallbackPage({ ) trackPaymentEvent({ event: "paymentFail", - hotelId: searchObject.get("hotel"), + hotelId, errorMessage: bookingStatus?.metadata?.errorMessage ?? `No error message found for booking ${confirmationNumber}, status: ${status}`, @@ -63,14 +68,14 @@ export default async function PaymentCallbackPage({ searchObject.set("errorCode", PaymentErrorCodeEnum.Cancelled.toString()) trackPaymentEvent({ event: "paymentCancel", - hotelId: searchObject.get("hotel"), + hotelId, }) } if (status === "error") { searchObject.set("errorCode", PaymentErrorCodeEnum.Failed.toString()) trackPaymentEvent({ event: "paymentFail", - hotelId: searchObject.get("hotel"), + hotelId, errorMessage: `Failed to get booking status for ${confirmationNumber}, status: ${status}`, }) } diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx index 4a8bb9e73..fd211eec7 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx @@ -5,7 +5,7 @@ import { useEffect, useMemo, useRef } from "react" import { useEnterDetailsStore } from "@/stores/enter-details" import { useSessionId } from "@/hooks/useSessionId" -import { createSDKPageObject } from "@/utils/tracking" +import { createSDKPageObject, pushToDataLayer } from "@/utils/tracking" import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter" import { @@ -145,7 +145,7 @@ export default function EnterDetailsTracking(props: Props) { } //if (previousPathname.current !== pathName) { - window.adobeDataLayer.push({ + pushToDataLayer({ event: "pageView", pageInfo: pageObject, userInfo: userTrackingData, diff --git a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx index 2cd30fb62..ff6f91c23 100644 --- a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx +++ b/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx @@ -169,8 +169,8 @@ export default function PaymentClient({ event: "paymentFail", hotelId: hotel, method: currentPaymentMethod, - isSavedCreditCard: isSavedCreditCard, - smsEnable: smsEnable, + isSavedCreditCard, + smsEnable, errorMessage, }) }, @@ -224,7 +224,7 @@ export default function PaymentClient({ event: "paymentAttemptStart", hotelId: hotel, method: paymentMethod, - isSavedCreditCard: savedCreditCard ? true : false, + isSavedCreditCard: !!savedCreditCard, smsEnable: data.smsConfirmation, }) diff --git a/components/HotelReservation/SelectRate/RoomSelection/utils.ts b/components/HotelReservation/SelectRate/RoomSelection/utils.ts index e76b51299..93a364a80 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/utils.ts +++ b/components/HotelReservation/SelectRate/RoomSelection/utils.ts @@ -75,6 +75,8 @@ export function createQueryParamsForEnterDetails( ...bookingSearchParams, ]) + searchParams.set(`hotel`, hotel) + rooms.forEach((item, index) => { if (item?.adults) { searchParams.set(`room[${index}].adults`, item.adults.toString()) diff --git a/components/TrackingSDK/RouterTransition.tsx b/components/TrackingSDK/RouterTransition.tsx index 18ecb821a..49e003eab 100644 --- a/components/TrackingSDK/RouterTransition.tsx +++ b/components/TrackingSDK/RouterTransition.tsx @@ -13,7 +13,7 @@ import useRouterTransitionStore from "@/stores/router-transition" import useTrackingStore from "@/stores/tracking" import { useSessionId } from "@/hooks/useSessionId" -import { createSDKPageObject } from "@/utils/tracking" +import { createSDKPageObject, pushToDataLayer } from "@/utils/tracking" import type { TrackingSDKProps } from "@/types/components/tracking" @@ -57,7 +57,7 @@ export default function RouterTransition({ pageLoadTime: entry.duration / 1000, } const pageObject = createSDKPageObject(trackingData) - window.adobeDataLayer.push({ + pushToDataLayer({ event: "pageView", pageInfo: pageObject, userInfo: userData, @@ -104,7 +104,7 @@ export default function RouterTransition({ !isTransitioning && status === TransitionStatusEnum.Done ) { - if (window.adobeDataLayer && hasRun && !hasRunInitial.current) { + if (hasRun && !hasRunInitial.current) { const trackingData = { ...pageData, sessionId, @@ -112,7 +112,7 @@ export default function RouterTransition({ pageLoadTime: getPageLoadTime(), } const pageObject = createSDKPageObject(trackingData) - window.adobeDataLayer.push({ + pushToDataLayer({ event: "pageView", pageInfo: pageObject, userInfo: userData, diff --git a/types/components/tracking.ts b/types/components/tracking.ts index af1c62224..15f5cc3b5 100644 --- a/types/components/tracking.ts +++ b/types/components/tracking.ts @@ -105,15 +105,27 @@ export type TrackingSDKData = TrackingSDKPageData & { pathName: string } -export type PaymentEvent = { +type BasePaymentEvent = { event: string - hotelId: string | null + hotelId: string | undefined method?: string isSavedCreditCard?: boolean smsEnable?: boolean +} + +export type PaymentAttemptStartEvent = BasePaymentEvent + +export type PaymentCancelEvent = BasePaymentEvent + +export type PaymentFailEvent = BasePaymentEvent & { errorMessage?: string } +export type PaymentEvent = + | PaymentAttemptStartEvent + | PaymentCancelEvent + | PaymentFailEvent + // Old tracking setup types: // TODO: Remove this when we delete "current site" export type TrackingProps = { diff --git a/utils/tracking.ts b/utils/tracking.ts index 4fd838002..4c9beb836 100644 --- a/utils/tracking.ts +++ b/utils/tracking.ts @@ -1,5 +1,6 @@ import type { PaymentEvent, + PaymentFailEvent, TrackingPosition, TrackingSDKData, } from "@/types/components/tracking" @@ -75,13 +76,15 @@ export function trackPaymentEvent(paymentEvent: PaymentEvent) { status: "attempt", type: paymentEvent.method, smsEnable: paymentEvent.smsEnable, - errorMessage: paymentEvent.errorMessage, + errorMessage: isPaymentFailEvent(paymentEvent) + ? paymentEvent.errorMessage + : undefined, }, } pushToDataLayer(paymentAttempt) } -function pushToDataLayer(data: any) { +export function pushToDataLayer(data: any) { if (typeof window !== "undefined" && window.adobeDataLayer) { window.adobeDataLayer.push(data) } @@ -110,3 +113,7 @@ function convertSlashToPipe(url: string) { const formattedUrl = url.startsWith("/") ? url.slice(1) : url return formattedUrl.replaceAll("/", "|") } + +function isPaymentFailEvent(event: PaymentEvent): event is PaymentFailEvent { + return "errorMessage" in event +}