Initial commit

src/components/CustomBottomSheet/CouponDialog.tsx

@@ -0,0 +1,73 @@
+import { Button, Modal } from "antd";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import ProRatioGroups from "../ProRatioGroups/ProRatioGroups";
+
+interface CouponDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialValue: string;
+  onSave: (value: string) => void;
+}
+
+export function CouponDialog({
+  isOpen,
+  onClose,
+  initialValue,
+  onSave,
+}: CouponDialogProps) {
+  const { t } = useTranslation();
+  const [value, setValue] = useState(initialValue);
+
+  console.log(value);
+  
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const handleSave = (selectedValue: string) => {
+    onSave(selectedValue);
+    onClose();
+  };
+
+  const handleCancel = () => {
+    setValue(initialValue);
+    onClose();
+  };
+
+  return (
+    <Modal
+      title={t("cart.coupon")}
+      open={isOpen}
+      onCancel={handleCancel}
+      footer={[
+        <Button key="cancel" onClick={handleCancel}>
+          {t("cart.cancel")}
+        </Button>,
+      ]}
+      width={600}
+      destroyOnHidden
+    >
+      <div>
+        <ProRatioGroups
+          options={[
+            {
+              label: "50% off, Min order : SDG 10,000",
+              value: "50",
+            },
+            {
+              label: "Buy one get one free, Min order : SDG 5,000",
+              value: "buy",
+            },
+            {
+              label: "30% off on select items, Min order : SDG 15,000",
+              value: "30",
+            },
+          ]}
+          onRatioClick={handleSave}
+        />
+      </div>
+    </Modal>
+  );
+}