PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add phone number on buy product

Browse Source
This commit is contained in:
caturbgs 2021-12-24 01:44:55 +07:00
parent 5ac16feb6b
commit fbad2d68e8
1 changed files with 80 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/pages/Transaction/Product.js
View File

@ -1,16 +1,17 @@
import React, { useContext, useEffect } from "react"; import React, {useContext, useEffect, useState} from "react";
import { useStore } from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import { Button, Card, Col, Input, message, Modal, Row, Select } from "antd"; import {Card, Col, Form, Input, message, Modal, Row, Select} from "antd";
import { observer } from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { MoneyCollectOutlined } from "@ant-design/icons"; import {ModalLoaderContext} from "../../utils/modal";
import { ModalLoaderContext } from "../../utils/modal";
const { Search } = Input; const {Search} = Input;
const { Option } = Select; const {Option} = Select;
export const Product = observer(() => { export const Product = observer(() => {
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const [form] = Form.useForm();
const [visibleModalBuy, setVisibleModalBuy] = useState(false);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
@ -41,11 +42,12 @@ export const Product = observer(() => {
modalLoader.setLoading(false); modalLoader.setLoading(false);
}; };
const handleBuyProduct = async (data) => { const handleBuyProduct = async (data, productCode) => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
const response = await store.transaction.buyProduct({ const response = await store.transaction.buyProduct({
productCode: data, ...data,
productCode: productCode,
}); });
if (response.status === 201) { if (response.status === 201) {
message.success("Berhasil Beli Produk"); message.success("Berhasil Beli Produk");
@ -60,38 +62,44 @@ export const Product = observer(() => {
console.log(e, "apa errornya"); console.log(e, "apa errornya");
message.error("Gagal Beli Product"); message.error("Gagal Beli Product");
} }
setVisibleModalBuy(false);
modalLoader.setLoading(false); modalLoader.setLoading(false);
}; };
const handleCancel = () => {
form.resetFields();
setVisibleModalBuy(false);
};
return ( return (
<div> <div>
<Row> <Row>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}> <span style={{fontWeight: "bold", marginBottom: "10px"}}>
Sub Category Sub Category
</span> </span>
</Row> </Row>
<Row> <Row>
<Col span={24}> <Col span={24}>
<Select <Select
placeholder={"Select Sub Category"} placeholder={"Select Sub Category"}
allowClear={true} allowClear={true}
onChange={(val) => handleChangeSubcategory(val)} onChange={(val) => handleChangeSubcategory(val)}
style={{ marginBottom: "10px", width: "100%" }} style={{marginBottom: "10px", width: "100%"}}
value={store.transaction.filterSubCategory} 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"}}
> >
{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 Produk & Nominal
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12} style={{ textAlign: "right" }}>
@ -107,19 +115,7 @@ export const Product = observer(() => {
<Col key={index} xs={24} md={16} lg={8}> <Col key={index} xs={24} md={16} lg={8}>
<Card <Card
onClick={() => { onClick={() => {
Modal.confirm({ setVisibleModalBuy(true)
title: `Are you sure buy ${item.product_name}?`,
icon: <MoneyCollectOutlined />,
okText: "Confirm",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleBuyProduct(item.product_code);
},
onCancel() {
console.log("Cancel");
},
});
}} }}
hoverable hoverable
style={{ style={{
@ -130,26 +126,52 @@ export const Product = observer(() => {
marginBottom: 10, marginBottom: 10,
}} }}
> >
<span style={{ color: "black" }}>{item.product_name}</span> <span style={{color: "black"}}>{item.product_name}</span>
<br /> <br/>
<span style={{ color: "grey", fontSize: 10 }}> <span style={{color: "grey", fontSize: 10}}>
{new Intl.NumberFormat("id-ID", { {new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(item?.price)} }).format(item?.price)}
</span> </span>
</Card> </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="phoneNumber"
label="Phone Number"
rules={[{required: true, message: "Please input Phone Number!"}]}
>
<Input/>
</Form.Item>
</Form>
</Modal>
</Col> </Col>
))} ))}
</Row> </Row>
)} )}
{/* {store.transaction.data.length !== 0 && (
<Col style={{textAlign: "right", marginTop: "1em"}}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
Beli Sekarang
</Button>
</Col>
)} */}
</div> </div>
); );
}); });