cart refactor code

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}
+        />
+      )}
+    </>
+  );
+}