cart refactor code

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -11,14 +11,11 @@ import ImageWithFallback from "components/ImageWithFallback";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
 import YouMightAlsoLike from "pages/cart/components/YouMightAlsoLike.tsx";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
-import DonateIcon from "components/Icons/cart/DonateIcon.tsx";
-import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
 import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
 import {
   updateCollectionMethod,
   updateTables,
   removeTable,
-  updateCoupon,
   updateTip,
   updateEstimateTime,
   selectCart,
@@ -27,7 +24,6 @@ import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
 import EditIcon from "components/Icons/EditIcon.tsx";
 import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
 import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
-import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet.tsx";
 import { TipBottomSheet } from "components/CustomBottomSheet/TipBottomSheet.tsx";
 import { EstimateTimeBottomSheet } from "components/CustomBottomSheet/EstimateTimeBottomSheet.tsx";
 import { getTableOptions } from "pages/cart/page.tsx";
@@ -36,11 +32,12 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
 import useBreakPoint from "hooks/useBreakPoint.ts";
+import CouponCard from "pages/cart/components/CouponCard.tsx";
 
 export default function CartMobileTabletLayout() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { items, coupon, tip, tables, estimateTimeDate, collectionMethod } =
+  const { items, tip, tables, estimateTimeDate, collectionMethod } =
     useAppSelector(selectCart);
   const { id } = useParams();
 
@@ -51,20 +48,10 @@ export default function CartMobileTabletLayout() {
   const { themeName } = useAppSelector((state) => state.theme);
   const orderType = localStorage.getItem("orderType");
 
-  const [isCouponOpen, setIsCouponOpen] = useState(false);
   const [estimateWay, setEstimateWay] = useState("now");
   const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
   const [isTipOpen, setIsTipOpen] = useState(false);
 
-  const handleCouponSave = (value: string) => {
-    dispatch(updateCoupon(value));
-    message.success(t("cart.coupon") + " " + t("updatedSuccessfully"));
-  };
-
-  const handleCouponClose = () => {
-    setIsCouponOpen(false);
-  };
-
   const handleTipSave = (value: string) => {
     dispatch(updateTip(value));
     message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
@@ -257,56 +244,9 @@ export default function CartMobileTabletLayout() {
 
           <YouMightAlsoLike />
 
-          {/* Mobile/Tablet layout */}
-          {/* Special Request */}
           <SpecialRequestCard />
-          {/* Coupon Code */}
-          <ProInputCard
-            title={t("cart.couponCode")}
-            titleRight={
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                  gap: 10,
-                }}
-                onClick={() => setIsCouponOpen(true)}
-              >
-                <ProText
-                  style={{
-                    color: colors.primary,
-                    fontSize: 14,
-                    cursor: "pointer",
-                  }}
-                >
-                  {t("cart.viewOffers")}
-                </ProText>
-                <DonateIcon />
-              </div>
-            }
-          >
-            <Input
-              placeholder={t("cart.couponCode")}
-              size="large"
-              autoFocus={false}
-              style={{ padding: "7px 11px", height: 50 }}
-              suffix={
-                <Button
-                  style={{
-                    width: 100,
-                    height: 32,
-                    borderRadius: 100,
-                    backgroundColor: "black",
-                    color: "white",
-                  }}
-                >
-                  {t("cart.apply")}
-                  <CouponHeartIcon className={styles.couponApplyIcon} />
-                </Button>
-              }
-            />
-          </ProInputCard>
+
+          <CouponCard />
 
           {/* Car Plate*/}
           {orderType === "pickup" && (
@@ -541,13 +481,6 @@ export default function CartMobileTabletLayout() {
 
       {/* Mobile/Tablet Bottom Sheets */}
 
-      <CouponBottomSheet
-        isOpen={isCouponOpen}
-        onClose={handleCouponClose}
-        initialValue={coupon}
-        onSave={handleCouponSave}
-      />
-
       <TipBottomSheet
         isOpen={isTipOpen}
         onClose={handleTipClose}