transaltiosn & add clear coupon discount

src/assets/locals/ar.json

@@ -377,7 +377,9 @@
     "gotIt": "فهمت",
     "howItWorksDescription": "يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق.",
     "senderEmail": "البريد الإلكتروني المرسل",
-    "save": "حفظ"
+    "save": "حفظ",
+    "pleaseEnterRoomNumber": "يرجى إدخال رقم الغرفة",
+    "pleaseEnterOfficeNumber": "يرجى إدخال رقم المكتب"
   },
   "login": {
     "singup/Login": "الدخول / التسجيل",

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",

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}

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
+              isDiscountApplied ? (
-                style={{
+                <CloseCircleOutlined
-                  width: 100,
+                  onClick={handleClearDiscount}
-                  height: 32,
+                  style={{
-                  borderRadius: 100,
+                    fontSize: 18,
-                  backgroundColor: "#333333",
+                    color: "#999",
-                  color: "white",
+                    cursor: "pointer",
-                  fontWeight: 500,
+                  }}
-                  fontStyle: "Medium",
+                />
-                  fontSize: 14,
+              ) : (
-                  lineHeight: "140%",
+                <Button
-                  letterSpacing: "0%"
+                  style={{
-                }}
+                    width: 100,
-                onClick={() => handleCouponSave(coupon)}
+                    height: 32,
-                icon={<CouponHeartIcon className={styles.couponApplyIcon} />}
+                    borderRadius: 100,
-                iconPlacement="end"
+                    backgroundColor: "#333333",
-              >
+                    color: "white",
-                <ProText
+                    fontWeight: 500,
-                  style={{ position: "relative", top: -1, color: "white" }}
+                    fontStyle: "Medium",
+                    fontSize: 14,
+                    lineHeight: "140%",
+                    letterSpacing: "0%"
+                  }}
+                  onClick={() => handleCouponSave(coupon)}
+                  icon={<CouponHeartIcon className={styles.couponApplyIcon} />}
+                  iconPlacement="end"
                 >
-                  {t("cart.apply")}
+                  <ProText
-                </ProText>
+                    style={{ position: "relative", top: -1, color: "white" }}
-              </Button>
+                  >
+                    {t("cart.apply")}
+                  </ProText>
+                </Button>
+              )
             }
           />
         </Form.Item>

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