cart refactor code

2025-10-05 19:44:56 +03:00
parent 0be5e856fc
commit c374f2214b
3 changed files with 108 additions and 126 deletions
--- a/src/pages/cart/components/CartDesktopLayout.tsx
+++ b/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}
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/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}
--- a/src/pages/cart/components/CouponCard.tsx
+++ b/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}
+        />
+      )}
+    </>
+  );
+}