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