preserve cart & checkout elment on refersh

src/pages/CardDetails/CardDetails.tsx

@@ -55,7 +55,6 @@ export default function CardDetailsPage() {
     navigate(`/${subdomain}/checkout`);
   }, [subdomain]);
 
-
   return (
     <Layout>
       <ProHeader>{t("cardDetails.title")}</ProHeader>
@@ -132,7 +131,7 @@ export default function CardDetailsPage() {
           layout="vertical"
           style={{ display: "flex", flexDirection: "column", gap: 16 }}
         >
-          <GiftAmountCard />
+          {giftDetails?.giftType !== "items" && <GiftAmountCard />}
           <ReceivernformationCard />
           <SenderformationCard />
           <TimeEstimateCard />

src/pages/CardDetails/components/SenderformationCard/SenderformationCard.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { Checkbox, Form, Input } from "antd";
 import styles from "./SenderformationCard.module.css";
-import TextArea from "antd/es/input/TextArea";
 import ProText from "components/ProText";
 
 export default function SenderformationCard() {
@@ -14,9 +13,9 @@ export default function SenderformationCard() {
   const { giftDetails } = useAppSelector(selectCart);
 
   return (
-    <ProInputCard title={t("cardDetails.receiverInformation")}>
+    <ProInputCard title={t("cardDetails.yourInformation")}>
       <div className={styles.customerInformationCard}>
-        <Form.Item name="receiverName">
+        <Form.Item name="senderName">
           <Input
             placeholder={t("cardDetails.yourName")}
             size="large"
@@ -29,7 +28,7 @@ export default function SenderformationCard() {
           />
         </Form.Item>
         <ProPhoneInput
-          propName="yourPhone"
+          propName="senderPhone"
           value={giftDetails?.senderPhone}
           onChange={(e) => {
             dispatch(updateGiftDetails({ senderPhone: e }));

src/pages/cart/components/CarPlateCard.tsx

@@ -2,17 +2,16 @@ import { Form, Input } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import { updatePlateCar } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
-import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { useAppDispatch } from "redux/hooks";
 
 export default function CarPlateCard() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
-  const plateCar = useAppSelector((state) => state.order.plateCar);
   return (
     <>
       <ProInputCard title={t("cart.plateNumber")}>
-        <Form.Item name="plateNumber">
+        <Form.Item name="plateCar">
           <Input
             placeholder={t("cart.plateNumber")}
             size="large"
@@ -27,7 +26,6 @@ export default function CarPlateCard() {
               lineHeight: "140%",
               letterSpacing: 0,
             }}
-            value={plateCar}
             onChange={(e) => {
               dispatch(updatePlateCar(e.target.value));
             }}

src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx

@@ -4,6 +4,8 @@ import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
 import dayjs from "dayjs";
 import {
+  selectCart,
+  updateEstimateWay,
   updatePickupDate,
   updatePickupTime,
   updatePickUpType,
@@ -11,9 +13,9 @@ import {
 import useBreakPoint from "hooks/useBreakPoint.ts";
 import { BottomSheet } from "pages/cart/components/timeEstimate/BottomSheet.tsx";
 import { Dialog } from "pages/cart/components/timeEstimate/Dialog.tsx";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useAppDispatch } from "redux/hooks";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { SERVER_DATE_FORMAT, UI_TIME_FORMAT } from "utils/constants.ts";
 
 export default function TimeEstimateCard() {
@@ -21,7 +23,7 @@ export default function TimeEstimateCard() {
   const { t } = useTranslation();
   const form = useFormInstance();
   const { isDesktop } = useBreakPoint();
-  const [estimateWay, setEstimateWay] = useState("now");
+  const { estimateWay } = useAppSelector(selectCart);
   const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
 
   const handleEstimateTimeSave = (date: string, time: string) => {
@@ -34,6 +36,11 @@ export default function TimeEstimateCard() {
     setIsEstimateTimeOpen(false);
   };
 
+  useEffect(() => {
+    form.setFieldsValue({ estimateWay });
+  }, [estimateWay]);
+  
+
   return (
     <>
       <ProInputCard title={t("cart.estimateTime")}>
@@ -52,16 +59,16 @@ export default function TimeEstimateCard() {
             value={estimateWay}
             onRatioClick={(value) => {
               if (value === "now") {
-                setEstimateWay(value);
+                dispatch(updateEstimateWay(value));
                 handleEstimateTimeSave(
                   dayjs().format(SERVER_DATE_FORMAT),
                   dayjs().format(UI_TIME_FORMAT),
                 );
                 dispatch(updatePickUpType("now"));
               } else {
-                setEstimateWay(value);
-                setIsEstimateTimeOpen(true);
+                dispatch(updateEstimateWay(value));
                 dispatch(updatePickUpType(""));
+                setIsEstimateTimeOpen(true);
               }
             }}
           />

src/pages/cart/page.tsx

@@ -10,11 +10,11 @@ import { useAppSelector } from "redux/hooks";
 export default function CartPage() {
   const { isDesktop } = useBreakPoint();
   const [form] = Form.useForm();
-  const { specialRequest, coupon } = useAppSelector(selectCart);
+  const { specialRequest, plateCar } = useAppSelector(selectCart);
 
   useEffect(() => {
-    form.setFieldsValue({ specialRequest, coupon });
-  }, [form, specialRequest, coupon]);
+    form.setFieldsValue({ specialRequest, plateCar });
+  }, [form, specialRequest, plateCar]);
 
   // Prevent keyboard from appearing automatically on mobile
   useEffect(() => {

src/pages/checkout/page.tsx

@@ -5,7 +5,7 @@ import PaymentMethods from "components/PaymentMethods/PaymentMethods";
 import ProHeader from "components/ProHeader/ProHeader";
 import { selectCart, updateCollectionMethod } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
-import { useAppSelector } from "redux/hooks";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "../address/address.module.css";
 import { AddressSummary } from "./components/AddressSummary";
 import CheckoutButton from "./components/CheckoutButton";
@@ -19,13 +19,18 @@ import BriefMenuCard from "./components/BriefMenuCard";
 import CustomerInformationCard from "./components/CustomerInformationCard";
 import Ads1 from "components/Ads/Ads1";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard";
+import { useEffect } from "react";
 
 export default function CheckoutPage() {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const { phone, order, orderType, collectionMethod } =
+  const { phone, order, orderType, collectionMethod, coupon } =
     useAppSelector(selectCart);
   const { token } = useAppSelector((state) => state.auth);
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    form.setFieldsValue({ coupon, collectionMethod });
+  }, [form, phone]);
 
   return (
     <>
@@ -93,9 +98,9 @@ export default function CheckoutPage() {
                     value={collectionMethod}
                     onRatioClick={(value) => {
                       if (value === "cod") {
-                        updateCollectionMethod(value);
+                        dispatch(updateCollectionMethod(value));
                       } else {
-                        updateCollectionMethod(value);
+                        dispatch(updateCollectionMethod(value));
                       }
                     }}
                   />