Payment method update

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx

@@ -107,7 +107,7 @@ export default function EnterDetailsTracking(props: Props) {
       rateCodeType: rate?.rateType,
       rateCodeName: rate?.rateCode,
       rateCodeCancellationRule: cancellationRule,
-      revenueCurrencyCode: rate?.requestedPrice?.currency,
+      revenueCurrencyCode: totalPrice.local?.currency,
       breakfastOption: breakfast ? "breakfast buffet" : "no breakfast",
       totalPrice: totalPrice.local?.price,
       specialRoomType: getSpecialRoomType(packages),
@@ -123,8 +123,9 @@ export default function EnterDetailsTracking(props: Props) {
     roomRate.publicRate,
     initialHotelsTrackingData,
     cancellationRule,
-    breakfast,
+    totalPrice.local?.currency,
     totalPrice.local?.price,
+    breakfast,
     packages,
     selectedRoom.roomType,
     bedType?.description,

components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -86,6 +86,8 @@ export default function PaymentClient({
     newPrice: number
   } | null>()
 
+  const { toDate, fromDate, rooms, hotel } = booking
+
   usePaymentFailedToast()
 
   const methods = useForm<PaymentFormData>({
@@ -192,7 +194,6 @@ export default function PaymentClient({
         dateOfBirth,
         zipCode,
       } = userData
-      const { toDate, fromDate, rooms, hotel } = booking
 
       // set payment method to card if saved card is submitted
       const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
@@ -260,15 +261,18 @@ export default function PaymentClient({
       })
     },
     [
-      breakfast,
-      bedType,
       userData,
-      booking,
-      roomPrice,
       savedCreditCards,
       lang,
-      user,
       initiateBooking,
+      hotel,
+      fromDate,
+      toDate,
+      rooms,
+      user,
+      bedType,
+      breakfast,
+      roomPrice,
     ]
   )
 
@@ -318,6 +322,7 @@ export default function PaymentClient({
                       ]
                     }
                     cardNumber={savedCreditCard.truncatedNumber}
+                    hotelId={hotel}
                   />
                 ))}
               </div>
@@ -334,6 +339,7 @@ export default function PaymentClient({
                 name="paymentMethod"
                 value={PaymentMethodEnum.card}
                 label={intl.formatMessage({ id: "Credit card" })}
+                hotelId={hotel}
               />
               {availablePaymentOptions.map((paymentMethod) => (
                 <PaymentOption
@@ -343,6 +349,7 @@ export default function PaymentClient({
                   label={
                     PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
                   }
+                  hotelId={hotel}
                 />
               ))}
             </div>

components/HotelReservation/EnterDetails/Payment/PaymentOption/index.tsx

@@ -5,6 +5,7 @@ import { PAYMENT_METHOD_ICONS, PaymentMethodEnum } from "@/constants/booking"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { trackUpdatePaymentMethod } from "@/utils/tracking"
 
 import { PaymentOptionProps } from "./paymentOption"
 
@@ -28,6 +29,7 @@ export default function PaymentOption({
           type="radio"
           id={value}
           value={value}
+          onClick={() => trackUpdatePaymentMethod("", value)}
           {...register(name, registerOptions)}
         />
         <span className={styles.radio} />

components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.ts

@@ -7,4 +7,5 @@ export interface PaymentOptionProps {
   cardNumber?: string
   registerOptions?: RegisterOptions
   onChange?: () => void
+  hotelId: string
 }

utils/tracking.ts

@@ -1,35 +1,49 @@
 import { TrackingPosition, TrackingSDKData } from "@/types/components/tracking"
 
 export function trackClick(name: string) {
-  if (typeof window !== "undefined" && window.adobeDataLayer) {
+  pushToDataLayer({
-    window.adobeDataLayer.push({
+    event: "linkClick",
-      event: "linkClick",
+    cta: {
-      cta: {
+      name,
-        name,
+    },
-      },
+  })
-    })
-  }
 }
 
 export function trackPageViewStart() {
-  if (typeof window !== "undefined" && window.adobeDataLayer) {
+  pushToDataLayer({
-    window.adobeDataLayer.push({
+    event: "pageViewStart",
-      event: "pageViewStart",
+  })
-    })
-  }
 }
 
 export function trackLoginClick(position: TrackingPosition) {
+  const loginEvent = {
+    event: "loginStart",
+    login: {
+      position,
+      action: "login start",
+      ctaName: "login",
+    },
+  }
+  pushToDataLayer(loginEvent)
+}
+
+export function trackUpdatePaymentMethod(hotelId: string, method: string) {
+  const paymentSelectionEvent = {
+    event: "paymentSelection",
+    hotelInfo: {
+      hotelId: hotelId,
+    },
+    cta: {
+      name: method,
+    },
+  }
+  pushToDataLayer(paymentSelectionEvent)
+}
+
+function pushToDataLayer(data: any) {
   if (typeof window !== "undefined" && window.adobeDataLayer) {
-    const loginEvent = {
+    console.log("TRACKING: Pushing to datalayer", data)
-      event: "loginStart",
+    window.adobeDataLayer.push(data)
-      login: {
-        position,
-        action: "login start",
-        ctaName: "login",
-      },
-    }
-    window.adobeDataLayer.push(loginEvent)
   }
 }