Perbaikan Project PPOB

src/pages/Transaction/Product.js

@@ -1,6 +1,16 @@
 import React, { useContext, useEffect, useState } from "react";
 import { useStore } from "../../utils/useStore";
-import { Card, Col, Form, Input, message, Modal, Row, Select } from "antd";
+import {
+  Card,
+  Col,
+  Form,
+  Input,
+  message,
+  Modal,
+  Row,
+  Select,
+  Button,
+} from "antd";
 import { observer } from "mobx-react-lite";
 import { ModalLoaderContext } from "../../utils/modal";
 
@@ -12,6 +22,7 @@ export const Product = observer(() => {
   const modalLoader = useContext(ModalLoaderContext);
   const [form] = Form.useForm();
   const [visibleModalBuy, setVisibleModalBuy] = useState(false);
+  const [barang, setBarang] = useState({});
 
   useEffect(() => {
     const init = async () => {
@@ -45,7 +56,7 @@ export const Product = observer(() => {
   const handleBuyProduct = async (data, productCode) => {
     modalLoader.setLoading(true);
     try {
-      const response = await store.transaction.buyProduct({
+      const response = await store.transaction.buyProd({
         ...data,
         productCode: productCode,
       });
@@ -116,6 +127,7 @@ export const Product = observer(() => {
               <Card
                 onClick={() => {
                   setVisibleModalBuy(true);
+                  setBarang(item);
                 }}
                 hoverable
                 style={{
@@ -126,7 +138,7 @@ export const Product = observer(() => {
                   marginBottom: 10,
                 }}
               >
-                <span style={{ color: "black" }}>{item.product_name}</span>
+                <span style={{ color: "black" }}>{item?.product_name}</span>
                 <br />
                 <span style={{ color: "grey", fontSize: 10 }}>
                   {new Intl.NumberFormat("id-ID", {
@@ -135,56 +147,105 @@ 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="destination"
-                    label="Destination"
-                    rules={[
-                      {
-                        required: true,
-                        message: "Please input Destination Number!",
-                      },
-                      {
-                        pattern: /^(?:\d*)$/,
-                        message: "Value should contain just number",
-                      },
-                      {
-                        pattern: /^[\d]{2,12}$/,
-                        message: "Value should be less than 12 character",
-                      },
-                    ]}
-                  >
-                    <Input />
-                  </Form.Item>
-                </Form>
-              </Modal>
             </Col>
           ))}
         </Row>
       )}
+      <Modal
+        visible={visibleModalBuy}
+        title={`Are you sure buy ${barang?.product_name}?`}
+        okText={"Confirm"}
+        onCancel={() => {
+          form.resetFields();
+          setVisibleModalBuy(false);
+        }}
+        // footer={footerLayoutFilter}
+        footer={[
+          <Button
+            key="back"
+            style={{
+              backgroundColor: "#e74e5e",
+              color: "#fff",
+            }}
+            onClick={() => {
+              form.resetFields();
+              handleCancel();
+            }}
+          >
+            Cancel
+          </Button>,
+          <Button
+            key="submit"
+            style={{
+              backgroundColor: "#4e79e7",
+              color: "#fff",
+            }}
+            onClick={() => {
+              form
+                .validateFields()
+                .then((values) => {
+                  console.log(values, "isi form");
+                  handleBuyProduct(values, barang.product_code);
+                  form.resetFields();
+                })
+                .catch((info) => {
+                  console.error("Validate Failed:", info);
+                });
+            }}
+          >
+            Buy Prod
+          </Button>,
+          <Button
+            key="link"
+            href="https://google.com"
+            type="primary"
+            // loading={loading}
+            // onClick={this.handleOk}
+          >
+            Buy Staging
+          </Button>,
+        ]}
+        // 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="destination"
+            label="Destination"
+            rules={[
+              {
+                required: true,
+                message: "Please input Destination Number!",
+              },
+              {
+                pattern: /^(?:\d*)$/,
+                message: "Value should contain just number",
+              },
+              {
+                pattern: /^[\d]{2,12}$/,
+                message: "Value should be less than 12 character",
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
     </div>
   );
 });