update coupon code

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>