refactor: url management in hotel reservation flow

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

@@ -5,9 +5,9 @@ import { useEffect } from "react"
 
 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 { convertObjToSearchParams } from "@/utils/url"
 
 import type { PersistedState } from "@/types/stores/enter-details"
 
@@ -29,7 +29,7 @@ export default function PaymentCallback({
 
     if (bookingData) {
       const detailsStorage: PersistedState = JSON.parse(bookingData)
-      const searchParams = createQueryParamsForEnterDetails(
+      const searchParams = convertObjToSearchParams(
         detailsStorage.booking,
         searchObject
       )
@@ -37,13 +37,13 @@ export default function PaymentCallback({
       if (status === "cancel") {
         trackPaymentEvent({
           event: "paymentCancel",
-          hotelId: detailsStorage.booking.hotel,
+          hotelId: detailsStorage.booking.hotelId,
         })
       }
       if (status === "error") {
         trackPaymentEvent({
           event: "paymentFail",
-          hotelId: detailsStorage.booking.hotel,
+          hotelId: detailsStorage.booking.hotelId,
           errorMessage,
         })
       }

components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -33,7 +33,7 @@ import { usePaymentFailedToast } from "@/hooks/booking/usePaymentFailedToast"
 import useLang from "@/hooks/useLang"
 import { trackPaymentEvent } from "@/utils/tracking"
 
-import { bedTypeMap } from "../../SelectRate/RoomSelection/utils"
+import { bedTypeMap } from "../../utils"
 import PriceChangeDialog from "../PriceChangeDialog"
 import GuaranteeDetails from "./GuaranteeDetails"
 import PaymentOption from "./PaymentOption"
@@ -87,7 +87,7 @@ export default function PaymentClient({
     newPrice: number
   } | null>()
 
-  const { toDate, fromDate, rooms, hotel } = booking
+  const { toDate, fromDate, rooms, hotelId } = booking
 
   usePaymentFailedToast()
 
@@ -171,14 +171,14 @@ export default function PaymentClient({
 
       trackPaymentEvent({
         event: "paymentFail",
-        hotelId: hotel,
+        hotelId,
         method: currentPaymentMethod,
         isSavedCreditCard,
         smsEnable,
         errorMessage,
       })
     },
-    [intl, methods, savedCreditCards, hotel]
+    [intl, methods, savedCreditCards, hotelId]
   )
 
   useEffect(() => {
@@ -226,7 +226,7 @@ export default function PaymentClient({
 
       trackPaymentEvent({
         event: "paymentAttemptStart",
-        hotelId: hotel,
+        hotelId,
         method: paymentMethod,
         isSavedCreditCard: !!savedCreditCard,
         smsEnable: data.smsConfirmation,
@@ -234,7 +234,7 @@ export default function PaymentClient({
 
       initiateBooking.mutate({
         language: lang,
-        hotelId: hotel,
+        hotelId,
         checkInDate: fromDate,
         checkOutDate: toDate,
         rooms: rooms.map((room) => ({
@@ -294,7 +294,7 @@ export default function PaymentClient({
       savedCreditCards,
       lang,
       initiateBooking,
-      hotel,
+      hotelId,
       fromDate,
       toDate,
       rooms,
@@ -347,7 +347,7 @@ export default function PaymentClient({
                       ]
                     }
                     cardNumber={savedCreditCard.truncatedNumber}
-                    hotelId={hotel}
+                    hotelId={hotelId}
                   />
                 ))}
               </div>
@@ -364,7 +364,7 @@ export default function PaymentClient({
                 name="paymentMethod"
                 value={PaymentMethodEnum.card}
                 label={intl.formatMessage({ id: "Credit card" })}
-                hotelId={hotel}
+                hotelId={hotelId}
               />
               {availablePaymentOptions.map((paymentMethod) => (
                 <PaymentOption
@@ -374,7 +374,7 @@ export default function PaymentClient({
                   label={
                     PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
                   }
-                  hotelId={hotel}
+                  hotelId={hotelId}
                 />
               ))}
             </div>