feat: add buy product

src/pages/Transaction/Product.js

@@ -1,7 +1,8 @@
 import React, {useEffect, useState} from "react";
 import {useStore} from "../../utils/useStore";
-import {Button, Card, Col, Input, Modal, Row, Select} from "antd";
+import {Button, Card, Col, Input, Row, Select} from "antd";
 import {observer} from "mobx-react-lite";
+import {BuyProductModal} from "../../component/BuyProductModal";
 
 const {Search} = Input;
 const {Option} = Select;
@@ -11,6 +12,7 @@ export const Product = observer(() => {
 
     const [isLoading, setIsLoading] = useState(false);
     const [productData, setProductData] = useState([]);
+    const [data, setData] = useState({});
 
     useEffect(() => {
         const init = async () => {
@@ -45,10 +47,9 @@ export const Product = observer(() => {
         await store.transaction.getData();
     }
 
-    const success = () => {
-        Modal.success({
-            content: 'some messages...some messages...',
-        });
+    const handleBuyProduct = (data) => {
+        setData(data);
+        store.transaction.visibleModalTransaction = true;
     }
 
     return (
@@ -61,10 +62,12 @@ export const Product = observer(() => {
             <Row>
                 <Col span={24}>
                     <Select
-                        placeholder={"Select sub-Category"}
+                        placeholder={"Select Sub Category"}
                         allowClear={true}
                         onChange={(val) => {
-                            handleChangeSubcategory(val);
+                            if (val) {
+                                handleChangeSubcategory(val)
+                            }
                         }}
                         style={{marginBottom: "10px", width: "100%"}}>
                         {store.transaction.dataSubCategories.map((item, index) => (
@@ -89,7 +92,7 @@ export const Product = observer(() => {
             {productData.length != 0 && <Row>
                 {productData.map((item, index) => (
                     <Col key={index} xs={24} md={16} lg={8}>
-                        <Card onClick={success}>
+                        <Card onClick={() => handleBuyProduct(item)} style={{cursor: "pointer"}}>
                             <span style={{color: "black"}}>{item.name}</span>
                             <br/>
                             <span style={{color: "grey", fontSize: 10}}>{item.price}</span>
@@ -102,6 +105,7 @@ export const Product = observer(() => {
                     Beli Sekarang
                 </Button>
             </Col>}
+            <BuyProductModal initialData={data}/>
         </div>
     );
 });