cart refactor code

src/pages/cart/components/CartDesktopLayout.tsx

@@ -1,5 +1,5 @@
 import styles from "pages/cart/cart.module.css";
-import { Row, Col, Button, Card, Input, Divider, Space, message } from "antd";
+import { Row, Col, Button, Card, Divider, Space, message } from "antd";
 import ProTitle from "components/ProTitle.tsx";
 import { colors, ProBlack2 } from "ThemeConstants.ts";
 import ProText from "components/ProText.tsx";
@@ -11,8 +11,7 @@ import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons
 import { CartItem } from "utils/types/appTypes.ts";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import { EditOutlined } from "@ant-design/icons";
-import DonateIcon from "components/Icons/cart/DonateIcon.tsx";
+
-import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
 import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
 import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
 import {
@@ -20,38 +19,27 @@ import {
   removeTable,
   selectCart,
   selectCartTotal,
-  updateCoupon,
   updateTip,
 } from "features/order/orderSlice.ts";
-import { CouponDialog } from "components/CustomBottomSheet/CouponDialog.tsx";
 import { TipDialog } from "components/CustomBottomSheet/TipDialog.tsx";
 import { useTranslation } from "react-i18next";
 import { useAppSelector, useAppDispatch } from "redux/hooks.ts";
 import { useState } from "react";
 import { getTableOptions } from "pages/cart/page.tsx";
 import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
+import CouponCard from "pages/cart/components/CouponCard.tsx";
 
 export default function CartDesktopLayout() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { themeName } = useAppSelector((state) => state.theme);
-  const { items, coupon, tip, tables } = useAppSelector(selectCart);
+  const { items, tip, tables } = useAppSelector(selectCart);
   const subtotal = useAppSelector(selectCartTotal);
   const tax = subtotal * 0.1; // 10% tax
   const total = subtotal + tax;
 
-  const [isCouponOpen, setIsCouponOpen] = 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"));
@@ -203,46 +191,15 @@ export default function CartDesktopLayout() {
           {/* Sidebar Column */}
           <Col xs={24} lg={8} xl={7}>
             <div className={styles.desktopSidebar}>
-              {/* Special Request */}
               <div className={styles.desktopSidebarCard}>
                 <SpecialRequestCard />
               </div>
 
-              {/* Coupon Code */}
               <div
                 className={styles.desktopSidebarCard}
                 style={{ "--animation-order": 1 } as React.CSSProperties}
               >
-                <ProInputCard
+                <CouponCard />
-                  title={t("couponCode")}
-                  titleRight={
-                    <Button
-                      type="link"
-                      style={{ color: colors.primary, padding: 0 }}
-                      onClick={() => setIsCouponOpen(true)}
-                    >
-                      {t("viewOffers")} <DonateIcon />
-                    </Button>
-                  }
-                >
-                  <Input
-                    placeholder={t("couponCodePlaceholder")}
-                    size="large"
-                    autoFocus={false}
-                    suffix={
-                      <Button
-                        type="primary"
-                        style={{
-                          borderRadius: "100px",
-                          backgroundColor: colors.primary,
-                        }}
-                      >
-                        {t("apply")}
-                        <CouponHeartIcon className={styles.couponApplyIcon} />
-                      </Button>
-                    }
-                  />
-                </ProInputCard>
               </div>
 
               {/* Reward Your Waiter */}
@@ -402,13 +359,6 @@ export default function CartDesktopLayout() {
 
       {/* Desktop Dialogs */}
 
-      <CouponDialog
-        isOpen={isCouponOpen}
-        onClose={handleCouponClose}
-        initialValue={coupon}
-        onSave={handleCouponSave}
-      />
-
       <TipDialog
         isOpen={isTipOpen}
         onClose={handleTipClose}

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
+          <CouponCard />
-            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>
 
           {/* 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}

src/pages/cart/components/CouponCard.tsx

@@ -0,0 +1,99 @@
+import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet.tsx";
+import { useAppSelector, useAppDispatch } from "redux/hooks.ts";
+import { selectCart, updateCoupon } from "features/order/orderSlice.ts";
+import { useState } from "react";
+import { message, Input, Button } from "antd";
+import { useTranslation } from "react-i18next";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import ProText from "components/ProText.tsx";
+import { colors } from "ThemeConstants.ts";
+import DonateIcon from "components/Icons/cart/DonateIcon.tsx";
+import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
+import styles from "pages/cart/cart.module.css";
+import { CouponDialog } from "components/CustomBottomSheet/CouponDialog.tsx";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+
+type Props = {};
+export default function CouponCard({}: Props) {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { coupon } = useAppSelector(selectCart);
+  const { isDesktop } = useBreakPoint();
+
+  const [isCouponOpen, setIsCouponOpen] = useState(false);
+
+  const handleCouponSave = (value: string) => {
+    dispatch(updateCoupon(value));
+    message.success(t("cart.coupon") + " " + t("updatedSuccessfully"));
+  };
+
+  const handleCouponClose = () => {
+    setIsCouponOpen(false);
+  };
+
+  return (
+    <>
+      <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>
+      {isDesktop ? (
+        <CouponDialog
+          isOpen={isCouponOpen}
+          onClose={handleCouponClose}
+          initialValue={coupon}
+          onSave={handleCouponSave}
+        />
+      ) : (
+        <CouponBottomSheet
+          isOpen={isCouponOpen}
+          onClose={handleCouponClose}
+          initialValue={coupon}
+          onSave={handleCouponSave}
+        />
+      )}
+    </>
+  );
+}