Fixed hotelId in payment error events

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

@@ -7,15 +7,20 @@ import { detailsStorageName } from "@/stores/enter-details"
 
 import { createQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import LoadingSpinner from "@/components/LoadingSpinner"
+import { trackPaymentEvent } from "@/utils/tracking"
 
 import type { PersistedState } from "@/types/stores/enter-details"
 
 export default function PaymentCallback({
   returnUrl,
   searchObject,
+  status,
+  errorMessage,
 }: {
   returnUrl: string
   searchObject: URLSearchParams
+  status: "error" | "success" | "cancel"
+  errorMessage?: string
 }) {
   const router = useRouter()
 
@@ -29,11 +34,25 @@ export default function PaymentCallback({
         searchObject
       )
 
+      if (status === "cancel") {
+        trackPaymentEvent({
+          event: "paymentCancel",
+          hotelId: detailsStorage.booking.hotel,
+        })
+      }
+      if (status === "error") {
+        trackPaymentEvent({
+          event: "paymentFail",
+          hotelId: detailsStorage.booking.hotel,
+          errorMessage,
+        })
+      }
+
       if (searchParams.size > 0) {
         router.replace(`${returnUrl}?${searchParams.toString()}`)
       }
     }
-  }, [returnUrl, router, searchObject])
+  }, [returnUrl, router, searchObject, status, errorMessage])
 
   return <LoadingSpinner />
 }