update coupon code

src/pages/cart/components/CouponCard.tsx

@@ -1,5 +1,8 @@
 import { Button, Form, Input, message } from "antd";
+import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet";
+import { CouponDialog } from "components/CustomBottomSheet/CouponDialog";
 import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
+import DonateIcon from "components/Icons/cart/DonateIcon";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProText from "components/ProText";
 import {
@@ -7,20 +10,22 @@ import {
   updateCoupon,
   updateDiscount,
 } from "features/order/orderSlice.ts";
+import useBreakPoint from "hooks/useBreakPoint";
 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";
 
 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) => {
     getDiscount({
@@ -43,36 +48,36 @@ export default function CouponCard() {
       });
   };
 
-  // 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>
+        }
       >
         <Form.Item name="coupon">
           <Input
@@ -111,7 +116,7 @@ export default function CouponCard() {
           />
         </Form.Item>
       </ProInputCard>
-      {/* {isDesktop ? (
+      {isDesktop ? (
         <CouponDialog
           isOpen={isCouponOpen}
           onClose={handleCouponClose}
@@ -125,7 +130,7 @@ export default function CouponCard() {
           initialValue={coupon}
           onSave={handleCouponSave}
         />
-      )} */}
+      )}
     </>
   );
 }