apply coupon discount

src/pages/cart/components/CouponCard.tsx

@@ -1,61 +1,76 @@
 import { Button, Form, Input, message } from "antd";
-import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet.tsx";
-import { CouponDialog } from "components/CustomBottomSheet/CouponDialog.tsx";
 import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
-import DonateIcon from "components/Icons/cart/DonateIcon.tsx";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
-import ProText from "components/ProText.tsx";
-import { selectCart, updateCoupon } from "features/order/orderSlice.ts";
-import useBreakPoint from "hooks/useBreakPoint.ts";
+import {
+  selectCart,
+  updateCoupon,
+  updateDiscount,
+} from "features/order/orderSlice.ts";
 import styles from "pages/cart/cart.module.css";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useGetDiscountMutation } from "redux/api/others";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
-import { colors } from "ThemeConstants.ts";
 
 export default function CouponCard() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
+  const { restaurant } = useAppSelector((state) => state.order);
   const { coupon } = useAppSelector(selectCart);
-  const { isDesktop } = useBreakPoint();
+  // const { isDesktop } = useBreakPoint();
+  const [getDiscount] = useGetDiscountMutation();
 
-  const [isCouponOpen, setIsCouponOpen] = useState(false);
+  // const [isCouponOpen, setIsCouponOpen] = useState(false);
 
   const handleCouponSave = (value: string) => {
-    dispatch(updateCoupon(value));
-    message.success(t("cart.coupon") + " " + t("updatedSuccessfully"));
+    getDiscount({
+      discountCode: value,
+      restaurantID: restaurant.restautantId || "",
+    })
+      .unwrap()
+      .then((response) => {
+        dispatch(
+          updateDiscount({
+            value: response.value,
+            isGift: response.isGift,
+            isDiscount: response.isDiscount,
+          }),
+        );
+      })
+      .catch((error) => {
+        message.error(error.data.message || t("cart.couponInvalid"));
+      });
   };
 
-  const handleCouponClose = () => {
-    setIsCouponOpen(false);
-  };
+  // 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>
-        }
+        // 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>
+        // }
         dividerStyle={{ margin: "5px 0 0 0" }}
       >
         <Form.Item
@@ -68,6 +83,9 @@ export default function CouponCard() {
             size="large"
             autoFocus={false}
             style={{ padding: "7px 11px", height: 50 }}
+            onChange={(e) => {
+              dispatch(updateCoupon(e.target.value));
+            }}
             suffix={
               <Button
                 style={{
@@ -77,6 +95,7 @@ export default function CouponCard() {
                   backgroundColor: "black",
                   color: "white",
                 }}
+                onClick={() => handleCouponSave(coupon)}
               >
                 {t("cart.apply")}
                 <CouponHeartIcon className={styles.couponApplyIcon} />
@@ -85,7 +104,7 @@ export default function CouponCard() {
           />
         </Form.Item>
       </ProInputCard>
-      {isDesktop ? (
+      {/* {isDesktop ? (
         <CouponDialog
           isOpen={isCouponOpen}
           onClose={handleCouponClose}
@@ -99,7 +118,7 @@ export default function CouponCard() {
           initialValue={coupon}
           onSave={handleCouponSave}
         />
-      )}
+      )} */}
     </>
   );
 }

src/pages/cart/page.tsx

@@ -10,11 +10,11 @@ import { useAppSelector } from "redux/hooks";
 export default function CartPage() {
   const { isDesktop } = useBreakPoint();
   const [form] = Form.useForm();
-  const { specialRequest } = useAppSelector(selectCart);
+  const { specialRequest, coupon } = useAppSelector(selectCart);
 
   useEffect(() => {
-    form.setFieldsValue({ specialRequest });
-  }, [form, specialRequest]);
+    form.setFieldsValue({ specialRequest, coupon });
+  }, [form, specialRequest, coupon]);
 
   // Prevent keyboard from appearing automatically on mobile
   useEffect(() => {