Tracking payment start event

components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -31,6 +31,7 @@ import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentO
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import { usePaymentFailedToast } from "@/hooks/booking/usePaymentFailedToast"
 import useLang from "@/hooks/useLang"
+import { trackPaymentEvent } from "@/utils/tracking"
 
 import { bedTypeMap } from "../../SelectRate/RoomSelection/utils"
 import PriceChangeDialog from "../PriceChangeDialog"
@@ -206,6 +207,14 @@ export default function PaymentClient({
 
       const paymentRedirectUrl = `${env.NEXT_PUBLIC_NODE_ENV === "development" ? `http://localhost:${env.NEXT_PUBLIC_PORT}` : ""}/${lang}/hotelreservation/payment-callback`
 
+      trackPaymentEvent({
+        event: "paymentAttemptStart",
+        hotelId: hotel,
+        method: paymentMethod,
+        isSavedCreditCard: savedCreditCard ? true : false,
+        smsEnable: data.smsConfirmation,
+      })
+
       initiateBooking.mutate({
         language: lang,
         hotelId: hotel,