feat: add phone number on buy product

src/pages/Transaction/Product.js

@@ -1,8 +1,7 @@
-import React, { useContext, useEffect } from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {useStore} from "../../utils/useStore";
-import { Button, Card, Col, Input, message, Modal, Row, Select } from "antd";
+import {Card, Col, Form, Input, message, Modal, Row, Select} from "antd";
 import {observer} from "mobx-react-lite";
-import { MoneyCollectOutlined } from "@ant-design/icons";
 import {ModalLoaderContext} from "../../utils/modal";
 
 const {Search} = Input;
@@ -11,6 +10,8 @@ const { Option } = Select;
 export const Product = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
+  const [form] = Form.useForm();
+  const [visibleModalBuy, setVisibleModalBuy] = useState(false);
 
   useEffect(() => {
     const init = async () => {
@@ -41,11 +42,12 @@ export const Product = observer(() => {
     modalLoader.setLoading(false);
   };
 
-  const handleBuyProduct = async (data) => {
+  const handleBuyProduct = async (data, productCode) => {
     modalLoader.setLoading(true);
     try {
       const response = await store.transaction.buyProduct({
-        productCode: data,
+        ...data,
+        productCode: productCode,
       });
       if (response.status === 201) {
         message.success("Berhasil Beli Produk");
@@ -60,9 +62,15 @@ export const Product = observer(() => {
       console.log(e, "apa errornya");
       message.error("Gagal Beli Product");
     }
+    setVisibleModalBuy(false);
     modalLoader.setLoading(false);
   };
 
+  const handleCancel = () => {
+    form.resetFields();
+    setVisibleModalBuy(false);
+  };
+
   return (
       <div>
         <Row>
@@ -107,19 +115,7 @@ export const Product = observer(() => {
             <Col key={index} xs={24} md={16} lg={8}>
               <Card
                 onClick={() => {
-                  Modal.confirm({
-                    title: `Are you sure buy ${item.product_name}?`,
-                    icon: <MoneyCollectOutlined />,
-                    okText: "Confirm",
-                    cancelText: "Cancel",
-                    okType: "primary",
-                    onOk() {
-                      handleBuyProduct(item.product_code);
-                    },
-                    onCancel() {
-                      console.log("Cancel");
-                    },
-                  });
+                  setVisibleModalBuy(true)
                 }}
                 hoverable
                 style={{
@@ -139,17 +135,43 @@ export const Product = observer(() => {
                   }).format(item?.price)}
                 </span>
               </Card>
+
+              <Modal
+                  visible={visibleModalBuy}
+                  title={`Are you sure buy ${item.product_name}?`}
+                  okText={"Confirm"}
+                  cancelText="Cancel"
+                  onCancel={() => {
+                    form.resetFields();
+                    handleCancel();
+                  }}
+                  onOk={() => {
+                    form
+                        .validateFields()
+                        .then((values) => {
+                          console.log(values, "isi form");
+                          handleBuyProduct(values, item.product_code);
+                          form.resetFields();
+                        })
+                        .catch((info) => {
+                          console.error("Validate Failed:", info);
+                        });
+                  }}
+              >
+                <Form form={form} layout="vertical">
+                  <Form.Item
+                      name="phoneNumber"
+                      label="Phone Number"
+                      rules={[{required: true, message: "Please input Phone Number!"}]}
+                  >
+                    <Input/>
+                  </Form.Item>
+                </Form>
+              </Modal>
             </Col>
           ))}
         </Row>
       )}
-      {/* {store.transaction.data.length !== 0 && (
-          <Col style={{textAlign: "right", marginTop: "1em"}}>
-            <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
-              Beli Sekarang
-            </Button>
-          </Col>
-      )} */}
     </div>
   );
 });