update coupon code

src/components/CustomBottomSheet/CouponBottomSheet.tsx

@@ -2,6 +2,9 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
 import ProRatioGroups from "../ProRatioGroups/ProRatioGroups";
+import { colors } from "ThemeConstants";
+import { updateCoupon } from "features/order/orderSlice";
+import { useAppDispatch } from "redux/hooks";
 
 interface CouponBottomSheetProps {
   isOpen: boolean;
@@ -18,13 +21,14 @@ export function CouponBottomSheet({
 }: CouponBottomSheetProps) {
   const { t } = useTranslation();
   const [value, setValue] = useState(initialValue);
-
+  const dispatch = useAppDispatch();
   useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
 
-  const handleSave = () => {
+  const handleSave = (selectedValue: string) => {
-    onSave(value);
+    onSave(selectedValue);
+    dispatch(updateCoupon(selectedValue));
     onClose();
   };
 
@@ -41,28 +45,40 @@ export function CouponBottomSheet({
       showCloseButton={false}
       initialSnap={1}
       height={350}
-      snapPoints={["30vh"]}
+      snapPoints={[350]}
     >
-      <div>
+      <div style={{ padding: "16px 0" }}>
         <ProRatioGroups
           options={[
             {
               label: "50% off, Min order : SDG 10,000",
-              value: "50",
+              value: "7CAB1",
-              price: "0"
+              price: "7CAB1",
             },
             {
               label: "Buy one get one free, Min order : SDG 5,000",
-              value: "buy",
+              value: "7CAB2",
-              price: "0"
+              price: "7CAB2",
             },
             {
               label: "30% off on select items, Min order : SDG 15,000",
-              value: "30",
+              value: "7CABO",
-              price: "0"
+              price: "7CABO",
             },
           ]}
+          value={value}
           onRatioClick={handleSave}
+          showDivider={true}
+          optionsStyle={{
+            fontSize: 12,
+            fontWeight: 500,
+            color: "#5F6C7B",
+          }}
+          valueStyle={{
+            fontSize: 12,
+            fontWeight: 500,
+            color: colors.primary,
+          }}
         />
       </div>
     </ProBottomSheet>

src/components/ProRatioGroups/ProRatioGroups.tsx

@@ -1,4 +1,4 @@
-import { Radio, RadioChangeEvent, Space } from "antd";
+import { Divider, Radio, RadioChangeEvent, Space } from "antd";
 import ProText from "components/ProText";
 import styles from "./ProRatioGroups.module.css";
 
@@ -7,6 +7,9 @@ interface ProRatioGroupsProps {
   onRatioClick?: (value: string) => void;
   onChange?: (e: RadioChangeEvent) => void;
   value?: string;
+  optionsStyle?: React.CSSProperties;
+  valueStyle?: React.CSSProperties;
+  showDivider?: boolean;
 }
 
 const ProRatioGroups = ({
@@ -14,9 +17,13 @@ const ProRatioGroups = ({
   onRatioClick,
   onChange,
   value,
+  optionsStyle,
+  valueStyle,
+  showDivider = false,
   ...props
 }: ProRatioGroupsProps) => {
   const handleChange = (e: RadioChangeEvent) => {
+    console.log(e.target.value);
     // If onChange is provided (from Form.Item), use it
     if (onChange) {
       onChange(e);
@@ -39,6 +46,7 @@ const ProRatioGroups = ({
       >
         <Space orientation="vertical" style={{ width: "100%" }}>
           {options.map((option) => (
+            <>
               <Radio
                 key={option.value}
                 value={option.value}
@@ -51,18 +59,26 @@ const ProRatioGroups = ({
                     justifyContent: "space-between",
                     width: "100%",
                     padding: "8px 0",
+                    placeItems: "center",
                   }}
                 >
                   <ProText
                     style={{
                       fontSize: "1rem",
+                      ...optionsStyle,
                     }}
                   >
                     {option.label}
                   </ProText>
-                <ProText style={{ fontSize: "1rem" }}>{option?.price}</ProText>
+                  <ProText style={{ fontSize: "1rem", ...valueStyle }}>
+                    {option?.price}
+                  </ProText>
                 </div>
               </Radio>
+              {showDivider && options.length !== options.length - 1 && (
+                <Divider style={{ margin: "0 0 16px 0 " }} />
+              )}
+            </>
           ))}
         </Space>
       </Radio.Group>

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 = () => {
+  const handleCouponClose = () => {
-  //   setIsCouponOpen(false);
+    setIsCouponOpen(false);
-  // };
+  };
 
   return (
     <>
       <ProInputCard
         title={t("cart.couponCode")}
-        // titleRight={
+        titleRight={
-        //   <div
+          <div
-        //     style={{
+            style={{
-        //       display: "flex",
+              display: "flex",
-        //       flexDirection: "row",
+              flexDirection: "row",
-        //       alignItems: "center",
+              alignItems: "center",
-        //       gap: 10,
+              gap: 10,
-        //     }}
+            }}
-        //     onClick={() => setIsCouponOpen(true)}
+            onClick={() => setIsCouponOpen(true)}
-        //   >
+          >
-        //     <ProText
+            <ProText
-        //       style={{
+              style={{
-        //         color: colors.primary,
+                color: colors.primary,
-        //         fontSize: 14,
+                fontSize: 14,
-        //         cursor: "pointer",
+                cursor: "pointer",
-        //       }}
+              }}
-        //     >
+            >
-        //       {t("cart.viewOffers")}
+              {t("cart.viewOffers")}
-        //     </ProText>
+            </ProText>
-        //     <DonateIcon />
+            <DonateIcon />
-        //   </div>
+          </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}
         />
-      )} */}
+      )}
     </>
   );
 }