Handle payment fail and cancel events

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

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(

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
 }