apply coupon discount

2025-11-09 21:58:56 +03:00
parent b327d16260
commit 4389d267d4
8 changed files with 160 additions and 103 deletions
--- a/src/pages/cart/components/CouponCard.tsx
+++ b/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}
        />
-      )}
+      )} */}
    </>
  );
 }
--- a/src/pages/cart/page.tsx
+++ b/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(() => {
--- a/src/pages/checkout/hooks/useOrder.ts
+++ b/src/pages/checkout/hooks/useOrder.ts
@@ -35,6 +35,7 @@ export default function useOrder() {
    orderType,
    giftDetails,
    location,
+    discount,
  } = useAppSelector(selectCart);
  const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
  const { useLoyaltyPoints } = useAppSelector(selectCart);
@@ -57,8 +58,6 @@ export default function useOrder() {
  const handleCreateOrder = useCallback(() => {
    createOrder({
      phone: mobilenumber || phone || giftDetails?.senderPhone,
-      couponID: coupon,
-      discountAmount: 0,
      comment: specialRequest,
      delivery_method: getDeliveryMethod(),
      timeslot: "",
@@ -75,7 +74,9 @@ export default function useOrder() {
      })),
      office_no: officeDetails?.officeNo || "",
      vatvalue: 0,
-      discountGiftCode: "",
+      ...(discount.isDiscount ? { couponID: coupon } : {}),
+      ...(discount.isGift ? { discountGiftCode: coupon } : {}),
+      discountAmount: discount.value || 0,
      paymentType: "cod",
      uuid: user_uuid,
      pickup_comments: "",
@@ -123,37 +124,6 @@ export default function useOrder() {
      .catch((error: any) => {
        console.error("Create Order failed:", error);
      });
-  }, [
-    createOrder,
-    mobilenumber,
-    phone,
-    giftDetails?.senderPhone,
-    giftDetails?.receiverName,
-    giftDetails?.receiverPhone,
-    giftDetails?.message,
-    giftDetails?.isSecret,
-    giftDetails?.senderEmail,
-    giftDetails?.senderName,
-    coupon,
-    specialRequest,
-    tables,
-    orderType,
-    restaurantID,
-    items,
-    officeDetails?.officeNo,
-    user_uuid,
-    estimateTime,
-    orderPrice,
-    useLoyaltyPoints,
-    highestLoyaltyItem,
-    tip,
-    location?.lat,
-    location?.lng,
-    location?.address,
-    t,
-    navigate,
-    subdomain,
-    dispatch,
-  ]);
+  }, [createOrder, mobilenumber, phone, giftDetails?.senderPhone, giftDetails?.receiverName, giftDetails?.receiverPhone, giftDetails?.message, giftDetails?.isSecret, giftDetails?.senderEmail, giftDetails?.senderName, specialRequest, getDeliveryMethod, tables, orderType, restaurantID, items, officeDetails?.officeNo, discount.isDiscount, discount.isGift, discount.value, coupon, user_uuid, estimateTime, orderPrice, useLoyaltyPoints, highestLoyaltyItem, tip, location?.lat, location?.lng, location?.address, t, navigate, subdomain, dispatch]);
  return { handleCreateOrder };
 }