From 2416b37069d8988bd3b52048ccb560c99e34891d Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Wed, 31 Dec 2025 16:23:37 +0300 Subject: [PATCH] preserve cart & checkout elment on refersh --- .../CustomBottomSheet/GiftTypeBottomSheet.tsx | 6 +++--- src/components/Icons/ScheduleOrderIcon.tsx | 2 +- src/features/order/orderSlice.ts | 18 +++++++++++------- src/pages/CardDetails/CardDetails.tsx | 3 +-- .../SenderformationCard.tsx | 7 +++---- src/pages/cart/components/CarPlateCard.tsx | 6 ++---- .../timeEstimate/TimeEstimateCard.tsx | 19 +++++++++++++------ src/pages/cart/page.tsx | 6 +++--- src/pages/checkout/page.tsx | 13 +++++++++---- 9 files changed, 46 insertions(+), 34 deletions(-) diff --git a/src/components/CustomBottomSheet/GiftTypeBottomSheet.tsx b/src/components/CustomBottomSheet/GiftTypeBottomSheet.tsx index c8684c4..c11f7c1 100644 --- a/src/components/CustomBottomSheet/GiftTypeBottomSheet.tsx +++ b/src/components/CustomBottomSheet/GiftTypeBottomSheet.tsx @@ -1,6 +1,6 @@ import { useTranslation } from "react-i18next"; import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet"; -import { updateGiftType } from "features/order/orderSlice"; +import { updateGiftDetails } from "features/order/orderSlice"; import { useAppDispatch } from "redux/hooks"; import GiftItemsBtnIcon from "components/Icons/GiftItemsBtnIcon"; import GiftBalanceBtnIcon from "components/Icons/GiftBalanceBtnIcon"; @@ -21,8 +21,8 @@ export function GiftTypeBottomSheet({ const { t } = useTranslation(); const dispatch = useAppDispatch(); - const handleSave = (value: string) => { - dispatch(updateGiftType(value)); + const handleSave = (giftType: string) => { + dispatch(updateGiftDetails({ giftType: giftType })); onClose(); onSave?.(); }; diff --git a/src/components/Icons/ScheduleOrderIcon.tsx b/src/components/Icons/ScheduleOrderIcon.tsx index 72e1586..8ea3c99 100644 --- a/src/components/Icons/ScheduleOrderIcon.tsx +++ b/src/components/Icons/ScheduleOrderIcon.tsx @@ -14,7 +14,7 @@ const ScheduleOrderIcon = ({ className, onClick }: ScheduleOrderIconType) => { className={className} onClick={onClick} > - + ) { + state.estimateWay = action.payload; + if (typeof window !== "undefined") { + localStorage.setItem(CART_STORAGE_KEYS.ESTIMATE_WAY, JSON.stringify(state.estimateWay)); + } + }, updateOrder(state, action: PayloadAction) { state.order = action.payload; if (typeof window !== "undefined") { @@ -691,9 +698,6 @@ const orderSlice = createSlice({ updateCustomerName(state, action: PayloadAction) { state.customerName = action.payload; }, - updateGiftType(state, action: PayloadAction) { - state.giftType = action.payload; - }, }, }); @@ -730,10 +734,10 @@ export const { updatePickupDate, updatePickupTime, updatePickUpType, + updateEstimateWay, updateOrder, updateSplitBillAmount, updateCustomerName, - updateGiftType, } = orderSlice.actions; // Tax calculation helper functions diff --git a/src/pages/CardDetails/CardDetails.tsx b/src/pages/CardDetails/CardDetails.tsx index 4e08db6..74473a2 100644 --- a/src/pages/CardDetails/CardDetails.tsx +++ b/src/pages/CardDetails/CardDetails.tsx @@ -55,7 +55,6 @@ export default function CardDetailsPage() { navigate(`/${subdomain}/checkout`); }, [subdomain]); - return ( {t("cardDetails.title")} @@ -132,7 +131,7 @@ export default function CardDetailsPage() { layout="vertical" style={{ display: "flex", flexDirection: "column", gap: 16 }} > - + {giftDetails?.giftType !== "items" && } diff --git a/src/pages/CardDetails/components/SenderformationCard/SenderformationCard.tsx b/src/pages/CardDetails/components/SenderformationCard/SenderformationCard.tsx index 2253cf3..80df469 100644 --- a/src/pages/CardDetails/components/SenderformationCard/SenderformationCard.tsx +++ b/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 ( - +
- + { dispatch(updateGiftDetails({ senderPhone: e })); diff --git a/src/pages/cart/components/CarPlateCard.tsx b/src/pages/cart/components/CarPlateCard.tsx index c6ff564..7ad3704 100644 --- a/src/pages/cart/components/CarPlateCard.tsx +++ b/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 ( <> - + { dispatch(updatePlateCar(e.target.value)); }} diff --git a/src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx b/src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx index fb1ba3f..c9ad91e 100644 --- a/src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx +++ b/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 ( <> @@ -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); } }} /> diff --git a/src/pages/cart/page.tsx b/src/pages/cart/page.tsx index a6fd603..76bee48 100644 --- a/src/pages/cart/page.tsx +++ b/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(() => { diff --git a/src/pages/checkout/page.tsx b/src/pages/checkout/page.tsx index 2af94e2..0cb13db 100644 --- a/src/pages/checkout/page.tsx +++ b/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)); } }} />