Payment method update

components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -86,6 +86,8 @@ export default function PaymentClient({
     newPrice: number
   } | null>()
 
+  const { toDate, fromDate, rooms, hotel } = booking
+
   usePaymentFailedToast()
 
   const methods = useForm<PaymentFormData>({
@@ -192,7 +194,6 @@ export default function PaymentClient({
         dateOfBirth,
         zipCode,
       } = userData
-      const { toDate, fromDate, rooms, hotel } = booking
 
       // set payment method to card if saved card is submitted
       const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
@@ -260,15 +261,18 @@ export default function PaymentClient({
       })
     },
     [
-      breakfast,
-      bedType,
       userData,
-      booking,
-      roomPrice,
       savedCreditCards,
       lang,
-      user,
       initiateBooking,
+      hotel,
+      fromDate,
+      toDate,
+      rooms,
+      user,
+      bedType,
+      breakfast,
+      roomPrice,
     ]
   )
 
@@ -318,6 +322,7 @@ export default function PaymentClient({
                       ]
                     }
                     cardNumber={savedCreditCard.truncatedNumber}
+                    hotelId={hotel}
                   />
                 ))}
               </div>
@@ -334,6 +339,7 @@ export default function PaymentClient({
                 name="paymentMethod"
                 value={PaymentMethodEnum.card}
                 label={intl.formatMessage({ id: "Credit card" })}
+                hotelId={hotel}
               />
               {availablePaymentOptions.map((paymentMethod) => (
                 <PaymentOption
@@ -343,6 +349,7 @@ export default function PaymentClient({
                   label={
                     PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
                   }
+                  hotelId={hotel}
                 />
               ))}
             </div>

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

@@ -5,6 +5,7 @@ import { PAYMENT_METHOD_ICONS, PaymentMethodEnum } from "@/constants/booking"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { trackUpdatePaymentMethod } from "@/utils/tracking"
 
 import { PaymentOptionProps } from "./paymentOption"
 
@@ -28,6 +29,7 @@ export default function PaymentOption({
           type="radio"
           id={value}
           value={value}
+          onClick={() => trackUpdatePaymentMethod("", value)}
           {...register(name, registerOptions)}
         />
         <span className={styles.radio} />

components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.ts

@@ -7,4 +7,5 @@ export interface PaymentOptionProps {
   cardNumber?: string
   registerOptions?: RegisterOptions
   onChange?: () => void
+  hotelId: string
 }