transaltiosn & add clear coupon discount

src/pages/cart/components/CouponCard.tsx

@@ -1,4 +1,5 @@
 import { Button, Form, Input, message } from "antd";
+import { CloseCircleOutlined } from "@ant-design/icons";
 import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet";
 import { CouponDialog } from "components/CustomBottomSheet/CouponDialog";
 import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
@@ -21,12 +22,14 @@ import { colors } from "ThemeConstants";
 export default function CouponCard() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { restaurant } = useAppSelector((state) => state.order);
+  const { restaurant, discount } = useAppSelector((state) => state.order);
   const { coupon } = useAppSelector(selectCart);
   const { isDesktop } = useBreakPoint();
   const [getDiscount] = useGetDiscountMutation();
   const [isCouponOpen, setIsCouponOpen] = useState(false);
 
+  const isDiscountApplied = discount.value > 0 || discount.isDiscount || discount.isGift;
+
   const handleCouponSave = (value: string) => {
     getDiscount({
       discountCode: value,
@@ -52,6 +55,18 @@ export default function CouponCard() {
     setIsCouponOpen(false);
   };
 
+  const handleClearDiscount = () => {
+    dispatch(updateCoupon(""));
+    dispatch(
+      updateDiscount({
+        value: 0,
+        isGift: false,
+        isDiscount: false,
+      }),
+    );
+    message.success(t("cart.couponRemoved") || "Coupon removed");
+  };
+
   return (
     <>
       <ProInputCard
@@ -85,33 +100,45 @@ export default function CouponCard() {
             size="large"
             autoFocus={false}
             style={{ padding: "7px 11px", height: 48 }}
+            value={coupon}
             onChange={(e) => {
               dispatch(updateCoupon(e.target.value));
             }}
             suffix={
-              <Button
-                style={{
-                  width: 100,
-                  height: 32,
-                  borderRadius: 100,
-                  backgroundColor: "#333333",
-                  color: "white",
-                  fontWeight: 500,
-                  fontStyle: "Medium",
-                  fontSize: 14,
-                  lineHeight: "140%",
-                  letterSpacing: "0%"
-                }}
-                onClick={() => handleCouponSave(coupon)}
-                icon={<CouponHeartIcon className={styles.couponApplyIcon} />}
-                iconPlacement="end"
-              >
-                <ProText
-                  style={{ position: "relative", top: -1, color: "white" }}
+              isDiscountApplied ? (
+                <CloseCircleOutlined
+                  onClick={handleClearDiscount}
+                  style={{
+                    fontSize: 18,
+                    color: "#999",
+                    cursor: "pointer",
+                  }}
+                />
+              ) : (
+                <Button
+                  style={{
+                    width: 100,
+                    height: 32,
+                    borderRadius: 100,
+                    backgroundColor: "#333333",
+                    color: "white",
+                    fontWeight: 500,
+                    fontStyle: "Medium",
+                    fontSize: 14,
+                    lineHeight: "140%",
+                    letterSpacing: "0%"
+                  }}
+                  onClick={() => handleCouponSave(coupon)}
+                  icon={<CouponHeartIcon className={styles.couponApplyIcon} />}
+                  iconPlacement="end"
                 >
-                  {t("cart.apply")}
-                </ProText>
-              </Button>
+                  <ProText
+                    style={{ position: "relative", top: -1, color: "white" }}
+                  >
+                    {t("cart.apply")}
+                  </ProText>
+                </Button>
+              )
             }
           />
         </Form.Item>