CouponBottomSheet: ehancements

src/components/CustomBottomSheet/CouponBottomSheet.tsx

@@ -5,6 +5,7 @@ import ProRatioGroups from "../ProRatioGroups/ProRatioGroups";
 import { colors } from "ThemeConstants";
 import { updateCoupon } from "features/order/orderSlice";
 import { useAppDispatch } from "redux/hooks";
+import { Button } from "antd";
 
 interface CouponBottomSheetProps {
   isOpen: boolean;
@@ -26,9 +27,9 @@ export function CouponBottomSheet({
     setValue(initialValue);
   }, [initialValue]);
 
-  const handleSave = (selectedValue: string) => {
+  const handleSave = () => {
-    onSave(selectedValue);
+    onSave(value);
-    dispatch(updateCoupon(selectedValue));
+    dispatch(updateCoupon(value));
     onClose();
   };
 
@@ -42,10 +43,9 @@ export function CouponBottomSheet({
       isOpen={isOpen}
       onClose={handleCancel}
       title={t("cart.coupon")}
-      showCloseButton={false}
       initialSnap={1}
-      height={350}
+      height={385}
-      snapPoints={[350]}
+      snapPoints={[385]}
     >
       <div style={{ padding: "16px 0" }}>
         <ProRatioGroups
@@ -67,7 +67,7 @@ export function CouponBottomSheet({
             },
           ]}
           value={value}
-          onRatioClick={handleSave}
+          onRatioClick={(value) => setValue(value)}
           showDivider={true}
           optionsStyle={{
             fontSize: 12,
@@ -80,6 +80,28 @@ export function CouponBottomSheet({
             color: colors.primary,
           }}
         />
+
+        <div
+          style={{
+            display: "flex",
+            gap: 12,
+            marginTop: 20,
+          }}
+        >
+          <Button
+            type="primary"
+            style={{
+              flex: 1,
+              boxShadow: "none",
+              height: 48,
+              width: "100%",
+            }}
+            onClick={handleSave}
+            disabled={!value}
+          >
+            {t("cart.save")}
+          </Button>
+        </div>
       </div>
     </ProBottomSheet>
   );