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 = () => {
-    onSave(value);
+  const handleSave = (selectedValue: string) => {
+    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",
-              price: "0"
+              value: "7CAB1",
+              price: "7CAB1",
             },
             {
               label: "Buy one get one free, Min order : SDG 5,000",
-              value: "buy",
-              price: "0"
+              value: "7CAB2",
+              price: "7CAB2",
             },
             {
               label: "30% off on select items, Min order : SDG 15,000",
-              value: "30",
-              price: "0"
+              value: "7CABO",
+              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,30 +46,39 @@ const ProRatioGroups = ({
       >
         <Space orientation="vertical" style={{ width: "100%" }}>
           {options.map((option) => (
-            <Radio
-              key={option.value}
-              value={option.value}
-              className={styles.circleCheckbox}
-            >
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  width: "100%",
-                  padding: "8px 0",
-                }}
+            <>
+              <Radio
+                key={option.value}
+                value={option.value}
+                className={styles.circleCheckbox}
               >
-                <ProText
+                <div
                   style={{
-                    fontSize: "1rem",
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    padding: "8px 0",
+                    placeItems: "center",
                   }}
                 >
-                  {option.label}
-                </ProText>
-                <ProText style={{ fontSize: "1rem" }}>{option?.price}</ProText>
-              </div>
-            </Radio>
+                  <ProText
+                    style={{
+                      fontSize: "1rem",
+                      ...optionsStyle,
+                    }}
+                  >
+                    {option.label}
+                  </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>