From 5d08498f8c69324761f14e31ef3cc6781bd54fe9 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Thu, 15 Jan 2026 06:34:20 +0300
Subject: [PATCH] transaltiosn & add clear coupon discount

---
 src/assets/locals/ar.json                |  4 +-
 src/assets/locals/en.json                |  4 +-
 src/components/InputCard.tsx             |  4 +-
 src/pages/cart/components/CouponCard.tsx | 73 ++++++++++++++++--------
 src/pages/checkout/page.tsx              |  2 +
 5 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json
index b942b4d..2371950 100644
--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -377,7 +377,9 @@
     "gotIt": "فهمت",
     "howItWorksDescription": "يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق.",
     "senderEmail": "البريد الإلكتروني المرسل",
-    "save": "حفظ"
+    "save": "حفظ",
+    "pleaseEnterRoomNumber": "يرجى إدخال رقم الغرفة",
+    "pleaseEnterOfficeNumber": "يرجى إدخال رقم المكتب"
   },
   "login": {
     "singup/Login": "الدخول / التسجيل",
diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json
index 4df99b4..d6215fb 100644
--- a/src/assets/locals/en.json
+++ b/src/assets/locals/en.json
@@ -397,7 +397,9 @@
     "gotIt": "Got It",
     "howItWorksDescription": "The gifted amount will be credited directly to your friend's wallet in the app. The recipient can use the amount to book a session of their choice within the app. The gifted amount is non-refundable and can only be used for booking sessions.",
     "senderEmail": "Sender Email",
-    "save": "Save"
+    "save": "Save",
+    "pleaseEnterRoomNumber": "Please enter room number",
+    "pleaseEnterOfficeNumber": "Please enter office number"
   },
   "login": {
     "singup/Login": "Sing up / Login",
diff --git a/src/components/InputCard.tsx b/src/components/InputCard.tsx
index 007f091..c06f538 100644
--- a/src/components/InputCard.tsx
+++ b/src/components/InputCard.tsx
@@ -9,6 +9,7 @@ interface InputCardProps {
   placeholder: string;
   value: string;
   required?: boolean;
+  reuireqMessage?: string;
 }
 
 export default function InputCard({
@@ -17,6 +18,7 @@ export default function InputCard({
   placeholder,
   value,
   required = false,
+  reuireqMessage = "",
 }: InputCardProps) {
   const dispatch = useAppDispatch();
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -27,7 +29,7 @@ export default function InputCard({
       <ProInputCard title={title} dividerStyle={{ margin: "5px 0 0 0" }}>
         <Form.Item
           name={name}
-          rules={[{ required }]}
+          rules={[{ required, message: reuireqMessage }]}
         >
           <Input
             placeholder={placeholder}
diff --git a/src/pages/cart/components/CouponCard.tsx b/src/pages/cart/components/CouponCard.tsx
index 48d0056..b3b18a5 100644
--- a/src/pages/cart/components/CouponCard.tsx
+++ b/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>
diff --git a/src/pages/checkout/page.tsx b/src/pages/checkout/page.tsx
index d38fc92..bb9d5f4 100644
--- a/src/pages/checkout/page.tsx
+++ b/src/pages/checkout/page.tsx
@@ -74,6 +74,7 @@ export default function CheckoutPage() {
                 placeholder={t("address.roomNo")}
                 value={order?.roomNumber}
                 required
+                reuireqMessage={t("address.pleaseEnterRoomNumber")}
               />
             )}
             {orderType === OrderType.ToOffice && (
@@ -83,6 +84,7 @@ export default function CheckoutPage() {
                 placeholder={t("address.officeNo")}
                 value={order?.officeNumber}
                 required
+                reuireqMessage={t("address.pleaseEnterOfficeNumber")}
               />
             )}
             {orderType === OrderType.Redeem && <VoucherSummary />}