145 lines
4.5 KiB
JavaScript
145 lines
4.5 KiB
JavaScript
import React, {useContext, useEffect} from "react";
|
|
import {useStore} from "../../utils/useStore";
|
|
import {Button, Card, Col, 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;
|
|
const {Option} = Select;
|
|
|
|
export const Product = observer(() => {
|
|
const store = useStore();
|
|
const modalLoader = useContext(ModalLoaderContext);
|
|
|
|
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) => {
|
|
modalLoader.setLoading(true);
|
|
try {
|
|
const response = await store.transaction.buyProduct({productCode: data});
|
|
if (response.status === 201) {
|
|
message.success("Success Buy Product");
|
|
} else {
|
|
message.error("Failed Buy Product", 3);
|
|
}
|
|
} catch (e) {
|
|
if (e.response?.body?.message) {
|
|
message.error(e.response.body.message);
|
|
return;
|
|
}
|
|
console.log(e, "apa errornya");
|
|
message.error("Failed Buy Product");
|
|
}
|
|
modalLoader.setLoading(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={() => {
|
|
Modal.confirm({
|
|
title: `Are you sure buy ${item.name}?`,
|
|
icon: <MoneyCollectOutlined/>,
|
|
okText: "Confirm",
|
|
cancelText: "Cancel",
|
|
okType: "primary",
|
|
onOk() {
|
|
handleBuyProduct(item.code)
|
|
},
|
|
onCancel() {
|
|
console.log("Cancel");
|
|
},
|
|
});
|
|
}}
|
|
style={{cursor: "pointer"}}
|
|
>
|
|
<span style={{color: "black"}}>{item.name}</span>
|
|
<br/>
|
|
<span style={{color: "grey", fontSize: 10}}>
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(item?.currentPrice?.mark_up_price)}
|
|
</span>
|
|
</Card>
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
)}
|
|
{store.transaction.data.length !== 0 && (
|
|
<Col style={{textAlign: "right", marginTop: "1em"}}>
|
|
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
|
|
Beli Sekarang
|
|
</Button>
|
|
</Col>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|