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} 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);

  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) => {
    modalLoader.setLoading(true);
    try {
      const response = await store.transaction.buyProduct({
        ...data,
        productCode: productCode,
      });
      if (response.status === 201) {
        message.success(response?.body?.message || "Berhasil Beli Produk");
      } else {
        message.error(response?.body?.message || "Gagal Beli Produk", 3);
      }
    } catch (e) {
      if (e.response?.body?.message) {
        message.error(e.response.body.message);
        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)
                }}
                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>

              <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!"}]}
                  >
                    <Input/>
                  </Form.Item>
                </Form>
              </Modal>
            </Col>
          ))}
        </Row>
      )}
    </div>
  );
});