From 9db02488d86ca2bd50ad65546aa6fe7ee5eb13c4 Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Tue, 3 Dec 2024 11:29:16 +0100 Subject: [PATCH] Payment method update --- .../(standard)/step/enterDetailsTracking.tsx | 5 +- .../EnterDetails/Payment/PaymentClient.tsx | 19 ++++-- .../Payment/PaymentOption/index.tsx | 2 + .../Payment/PaymentOption/paymentOption.ts | 1 + utils/tracking.ts | 58 ++++++++++++------- 5 files changed, 55 insertions(+), 30 deletions(-) diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx index 0aaa006f1..f1cadee52 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx +++ b/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, diff --git a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx index ae1e523d8..992ac0774 100644 --- a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx +++ b/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({ @@ -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} /> ))} @@ -334,6 +339,7 @@ export default function PaymentClient({ name="paymentMethod" value={PaymentMethodEnum.card} label={intl.formatMessage({ id: "Credit card" })} + hotelId={hotel} /> {availablePaymentOptions.map((paymentMethod) => ( ))} diff --git a/components/HotelReservation/EnterDetails/Payment/PaymentOption/index.tsx b/components/HotelReservation/EnterDetails/Payment/PaymentOption/index.tsx index c076a074b..cc43abfa0 100644 --- a/components/HotelReservation/EnterDetails/Payment/PaymentOption/index.tsx +++ b/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)} /> diff --git a/components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.ts b/components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.ts index 151a18860..98eefa72c 100644 --- a/components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.ts +++ b/components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.ts @@ -7,4 +7,5 @@ export interface PaymentOptionProps { cardNumber?: string registerOptions?: RegisterOptions onChange?: () => void + hotelId: string } diff --git a/utils/tracking.ts b/utils/tracking.ts index f66a202dd..ba8941a7f 100644 --- a/utils/tracking.ts +++ b/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) { - window.adobeDataLayer.push({ - event: "linkClick", - cta: { - name, - }, - }) - } + pushToDataLayer({ + event: "linkClick", + cta: { + name, + }, + }) } export function trackPageViewStart() { - if (typeof window !== "undefined" && window.adobeDataLayer) { - window.adobeDataLayer.push({ - event: "pageViewStart", - }) - } + pushToDataLayer({ + 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 = { - event: "loginStart", - login: { - position, - action: "login start", - ctaName: "login", - }, - } - window.adobeDataLayer.push(loginEvent) + console.log("TRACKING: Pushing to datalayer", data) + window.adobeDataLayer.push(data) } }