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 43374e32e..877771ec4 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 @@ -11,6 +11,7 @@ import { import { serverClient } from "@/lib/trpc/server" import PaymentCallback from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback" +import { trackPaymentEvent } from "@/utils/tracking" import type { LangParams, PageArgs } from "@/types/params" @@ -47,15 +48,31 @@ export default async function PaymentCallbackPage({ ? bookingStatus.metadata.errorCode.toString() : PaymentErrorCodeEnum.Failed.toString() ) + trackPaymentEvent({ + event: "paymentFail", + hotelId: searchObject.get("hotel"), + errorMessage: + bookingStatus?.metadata?.errorMessage ?? + `No error message found for booking ${confirmationNumber}, status: ${status}`, + }) } catch (error) { console.error( `[payment-callback] failed to get booking status for ${confirmationNumber}, status: ${status}` ) if (status === "cancel") { searchObject.set("errorCode", PaymentErrorCodeEnum.Cancelled.toString()) + trackPaymentEvent({ + event: "paymentCancel", + hotelId: searchObject.get("hotel"), + }) } if (status === "error") { searchObject.set("errorCode", PaymentErrorCodeEnum.Failed.toString()) + trackPaymentEvent({ + event: "paymentFail", + hotelId: searchObject.get("hotel"), + errorMessage: `Failed to get booking status for ${confirmationNumber}, status: ${status}`, + }) } } } diff --git a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx index a5fc2a773..2cd30fb62 100644 --- a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx +++ b/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx @@ -118,20 +118,12 @@ export default function PaymentClient({ setIsPollingForBookingStatus(true) } } else { - toast.error( - intl.formatMessage({ - id: "payment.error.failed", - }) - ) + handlePaymentError("No confirmation number") } }, onError: (error) => { console.error("Error", error) - toast.error( - intl.formatMessage({ - id: "payment.error.failed", - }) - ) + handlePaymentError(error.message) }, }) @@ -140,7 +132,7 @@ export default function PaymentClient({ if (result?.confirmationNumber) { setIsPollingForBookingStatus(true) } else { - toast.error(intl.formatMessage({ id: "payment.error.failed" })) + handlePaymentError("No confirmation number") } setPriceChangeData(null) @@ -148,7 +140,7 @@ export default function PaymentClient({ onError: (error) => { console.error("Error", error) setPriceChangeData(null) - toast.error(intl.formatMessage({ id: "payment.error.failed" })) + handlePaymentError(error.message) }, }) @@ -160,17 +152,38 @@ export default function PaymentClient({ enabled: isPollingForBookingStatus, }) - useEffect(() => { - if (bookingStatus?.data?.paymentUrl) { - router.push(bookingStatus.data.paymentUrl) - } else if (bookingStatus.isTimeout) { + const handlePaymentError = useCallback( + (errorMessage: string) => { toast.error( intl.formatMessage({ id: "payment.error.failed", }) ) + const currentPaymentMethod = methods.getValues("paymentMethod") + const smsEnable = methods.getValues("smsConfirmation") + const isSavedCreditCard = savedCreditCards?.some( + (card) => card.id === currentPaymentMethod + ) + + trackPaymentEvent({ + event: "paymentFail", + hotelId: hotel, + method: currentPaymentMethod, + isSavedCreditCard: isSavedCreditCard, + smsEnable: smsEnable, + errorMessage, + }) + }, + [intl, methods, savedCreditCards, hotel] + ) + + useEffect(() => { + if (bookingStatus?.data?.paymentUrl) { + router.push(bookingStatus.data.paymentUrl) + } else if (bookingStatus.isTimeout) { + handlePaymentError("Timeout") } - }, [bookingStatus, router, intl]) + }, [bookingStatus, router, intl, handlePaymentError]) useEffect(() => { setIsSubmittingDisabled( diff --git a/types/components/tracking.ts b/types/components/tracking.ts index dd27cc0bd..af1c62224 100644 --- a/types/components/tracking.ts +++ b/types/components/tracking.ts @@ -107,10 +107,10 @@ export type TrackingSDKData = TrackingSDKPageData & { export type PaymentEvent = { event: string - hotelId: string - method: string - isSavedCreditCard: boolean - smsEnable: boolean + hotelId: string | null + method?: string + isSavedCreditCard?: boolean + smsEnable?: boolean errorMessage?: string }