Fixed hotelId in payment error events

app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/page.tsx

@@ -30,7 +30,6 @@ export default async function PaymentCallbackPage({
   const lang = params.lang
   const status = searchParams.status
   const confirmationNumber = searchParams.confirmationNumber
-  const hotelId = searchParams.hotel
 
   if (status === "success" && confirmationNumber) {
     const confirmationUrl = `${bookingConfirmation(lang)}?${BOOKING_CONFIRMATION_NUMBER}=${confirmationNumber}`
@@ -42,6 +41,8 @@ export default async function PaymentCallbackPage({
   const returnUrl = payment(lang)
   const searchObject = new URLSearchParams()
 
+  let errorMessage = undefined
+
   if (confirmationNumber) {
     try {
       const bookingStatus = await serverClient().booking.status({
@@ -51,37 +52,26 @@ export default async function PaymentCallbackPage({
       // TODO: how to handle errors for multiple rooms?
       const error = bookingStatus.errors.find((e) => e.errorCode)
 
+      errorMessage =
+        error?.description ??
+        `No error message found for booking ${confirmationNumber}, status: ${status}`
+
       searchObject.set(
         "errorCode",
         error
           ? error.errorCode.toString()
           : PaymentErrorCodeEnum.Failed.toString()
       )
-      trackPaymentEvent({
-        event: "paymentFail",
-        hotelId,
-        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,
-        })
       }
       if (status === "error") {
         searchObject.set("errorCode", PaymentErrorCodeEnum.Failed.toString())
-        trackPaymentEvent({
+        errorMessage = `Failed to get booking status for ${confirmationNumber}, status: ${status}`
-          event: "paymentFail",
-          hotelId,
-          errorMessage: `Failed to get booking status for ${confirmationNumber}, status: ${status}`,
-        })
       }
     }
   }
@@ -90,6 +80,8 @@ export default async function PaymentCallbackPage({
     <PaymentCallback
       returnUrl={returnUrl.toString()}
       searchObject={searchObject}
+      status={status}
+      errorMessage={errorMessage}
     />
   )
 }

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 />
 }