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>