Handle payment fail and cancel events

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(