PR Fixes

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}`,
         })
       }

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,

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,
       })
 

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())

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,

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 = {

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
+}