feat: merge stores, fix auto navigation, split summary

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

@@ -3,12 +3,12 @@
 import { useRouter } from "next/navigation"
 import { useEffect } from "react"
 
-import { detailsStorageName } from "@/stores/details"
+import { detailsStorageName } from "@/stores/enter-details"
 
 import { createQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import LoadingSpinner from "@/components/LoadingSpinner"
 
-import { DetailsState } from "@/types/stores/details"
+import type { DetailsState } from "@/types/stores/enter-details"
 
 export default function PaymentCallback({
   returnUrl,
@@ -25,10 +25,10 @@ export default function PaymentCallback({
     if (bookingData) {
       const detailsStorage: Record<
         "state",
-        Pick<DetailsState, "data">
+        Pick<DetailsState, "booking">
       > = JSON.parse(bookingData)
       const searchParams = createQueryParamsForEnterDetails(
-        detailsStorage.state.data.booking,
+        detailsStorage.state.booking,
         searchObject
       )
 

components/HotelReservation/EnterDetails/Payment/index.tsx

@@ -18,7 +18,7 @@ import {
 import { selectRate } from "@/constants/routes/hotelReservation"
 import { env } from "@/env/client"
 import { trpc } from "@/lib/trpc/client"
-import { useDetailsStore } from "@/stores/details"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Button from "@/components/TempDesignSystem/Button"
@@ -41,7 +41,7 @@ import { PaymentFormData, paymentSchema } from "./schema"
 import styles from "./payment.module.css"
 
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
-import { PaymentProps } from "@/types/components/hotelReservation/selectRate/section"
+import type { PaymentProps } from "@/types/components/hotelReservation/selectRate/section"
 
 const maxRetries = 4
 const retryInterval = 2000
@@ -63,9 +63,14 @@ export default function Payment({
   const lang = useLang()
   const intl = useIntl()
   const searchParams = useSearchParams()
-  const { booking, ...userData } = useDetailsStore((state) => state.data)
-  const totalPrice = useDetailsStore((state) => state.totalPrice)
-  const setIsSubmittingDisabled = useDetailsStore(
+  const totalPrice = useEnterDetailsStore((state) => state.totalPrice)
+  const { bedType, booking, breakfast } = useEnterDetailsStore((state) => ({
+    bedType: state.bedType,
+    booking: state.booking,
+    breakfast: state.breakfast,
+  }))
+  const userData = useEnterDetailsStore((state) => state.guest)
+  const setIsSubmittingDisabled = useEnterDetailsStore(
     (state) => state.actions.setIsSubmittingDisabled
   )
 
@@ -181,8 +186,6 @@ export default function Payment({
         email,
         phoneNumber,
         countryCode,
-        breakfast,
-        bedType,
         membershipNo,
         join,
         dateOfBirth,
@@ -243,10 +246,10 @@ export default function Payment({
           paymentMethod,
           card: savedCreditCard
             ? {
-                alias: savedCreditCard.alias,
-                expiryDate: savedCreditCard.expirationDate,
-                cardType: savedCreditCard.cardType,
-              }
+              alias: savedCreditCard.alias,
+              expiryDate: savedCreditCard.expirationDate,
+              cardType: savedCreditCard.cardType,
+            }
             : undefined,
 
           success: `${paymentRedirectUrl}/success`,
@@ -256,6 +259,8 @@ export default function Payment({
       })
     },
     [
+      breakfast,
+      bedType,
       userData,
       booking,
       roomPrice,
@@ -308,7 +313,7 @@ export default function Payment({
                     value={savedCreditCard.id}
                     label={
                       PAYMENT_METHOD_TITLES[
-                        savedCreditCard.cardType as PaymentMethodEnum
+                      savedCreditCard.cardType as PaymentMethodEnum
                       ]
                     }
                     cardNumber={savedCreditCard.truncatedNumber}