ppob-frontend/src/pages/Transaction/Product.js

import React, { useContext, useEffect, useState } from "react";
import { useStore } from "../../utils/useStore";
import {
  Card,
  Col,
  Form,
  Input,
  message,
  Modal,
  Row,
  Select,
  Button,
} from "antd";
import { observer } from "mobx-react-lite";
import { ModalLoaderContext } from "../../utils/modal";

const { Search } = Input;
const { Option } = Select;

export const Product = observer(() => {
  const store = useStore();
  const modalLoader = useContext(ModalLoaderContext);
  const [form] = Form.useForm();
  const [visibleModalBuy, setVisibleModalBuy] = useState(false);
  const [barang, setBarang] = useState({});

  useEffect(() => {
    const init = async () => {
      try {
        modalLoader.setLoading(true);
        await Promise.allSettled([
          store.transaction.getDataSubCategories(),
          store.transaction.getDataCategories(),
        ]);
        modalLoader.setLoading(false);
      } catch (e) {
        modalLoader.setLoading(false);
        if (e.response?.body?.message) {
          message.error(e.response.body.message);
          return;
        }
        message.error(e.message);
      }
    };

    init();
  }, []);

  const handleChangeSubcategory = async (item) => {
    store.transaction.filterSubCategory = item;
    modalLoader.setLoading(true);
    await store.transaction.getData();
    modalLoader.setLoading(false);
  };

  const handleBuyProduct = async (data, productCode) => {
    //console.log(data)
    modalLoader.setLoading(true);
    try {
      const response = await store.transaction.buyProd({
        ...data,
        productCode: productCode,
      });
      if (response.status === 201) {
        message.success(response?.body?.message || "Berhasil Beli Produk");
      } else {
        message.error(response?.body?.error || "Gagal Beli Produk", 3);
      }
    } catch (e) {
      if (e.response?.body?.error) {
        message.error(e.response.body.error);
        setVisibleModalBuy(false);
        modalLoader.setLoading(false);
        return;
      }
      console.log(e, "apa errornya");
      message.error("Gagal Beli Product");
    }
    setVisibleModalBuy(false);
    modalLoader.setLoading(false);
  };

  const handleCancel = () => {
    form.resetFields();
    setVisibleModalBuy(false);
  };

  return (
    <div>
      <Row>
        <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
          Sub Category
        </span>
      </Row>
      <Row>
        <Col span={24}>
          <Select
            placeholder={"Select Sub Category"}
            allowClear={true}
            onChange={(val) => handleChangeSubcategory(val)}
            style={{ marginBottom: "10px", width: "100%" }}
            value={store.transaction.filterSubCategory}
          >
            {store.transaction.dataSubCategories.map((item, index) => (
              <Option key={item.id} value={item.id}>
                {item.name}
              </Option>
            ))}
          </Select>
        </Col>
      </Row>
      <Row justify={"center"} align={"center"} style={{ marginBottom: "1rem" }}>
        <Col
          span={12}
          style={{ fontWeight: "bold", display: "flex", alignItems: "center" }}
        >
          Produk & Nominal
        </Col>
        <Col span={12} style={{ textAlign: "right" }}>
          {/* <Search
            placeholder="input search text"
            style={{ width: 200, marginRight: 10 }}
          /> */}
        </Col>
      </Row>
      {store.transaction.data.length != 0 && (
        <Row>
          {store.transaction.data.map((item, index) => (
            <Col key={index} xs={24} md={16} lg={8}>
              <Card
                onClick={() => {
                  setVisibleModalBuy(true);
                  setBarang(item);
                }}
                hoverable
                style={{
                  cursor: "pointer",
                  marginLeft: 10,
                  borderColor: "salmon",
                  height: 100,
                  marginBottom: 10,
                }}
              >
                <span style={{ color: "black" }}>{item?.product_name}</span>
                <br />
                <span style={{ color: "grey", fontSize: 10 }}>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(item?.price)}
                </span>
              </Card>
            </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]{10,12}$/,
                message: "Value should be 10 - 12 character",
              },
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
});