342 lines
10 KiB
JavaScript
342 lines
10 KiB
JavaScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
import './CustomerPurchaseConfirm.scss';
|
|
import axios from 'axios';
|
|
import {
|
|
ArrowRightOutlined,
|
|
DeleteFilled,
|
|
CheckCircleOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Table } from 'antd';
|
|
|
|
const url_string = window.location.href;
|
|
const url = new URL(url_string);
|
|
const codesParam = url.searchParams.get('code');
|
|
|
|
import { getSession, sessionStore } from '../../../Services/Others';
|
|
import Loader from '../../../Components/Loader/Loader';
|
|
import { useDispatch } from 'react-redux';
|
|
import {
|
|
CustomerPurchase,
|
|
getPurchaseLowStock,
|
|
} from '../../../Features/ConfigMasterPage/ConfigMasterPage';
|
|
import { Messages } from '../../../Components/Notifications/Messages';
|
|
import PurchasePDFPrint from './PurchasePDFPrint';
|
|
import { Buttons } from '../../../../ownLib/my-ui-lib';
|
|
import PozoLoader1 from '../../../Components/PozoAppLoader/PozoLoader1';
|
|
import PozoLoader2 from '../../../Components/PozoAppLoader/PozoLoader2';
|
|
|
|
function CustomerPurchaseConfirm() {
|
|
const apiUrlToken = import.meta.env.ENV_API_URL_TOKEN;
|
|
const dispatch = useDispatch();
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [products, setProducts] = useState([]);
|
|
const [message, setMessage] = useState({ type: null, data: null });
|
|
const [orderSuccess, setOrderSuccess] = useState(false);
|
|
const [details, setDetails] = useState({
|
|
AppId: '',
|
|
CompId: '',
|
|
BranchId: '',
|
|
});
|
|
|
|
const handleOrderSuccess = () => {
|
|
setOrderSuccess(true);
|
|
};
|
|
|
|
console.log(products, 'hsbdjhsdjvbsdj');
|
|
useEffect(() => {
|
|
if (!codesParam) {
|
|
setLoading(true);
|
|
return;
|
|
}
|
|
initializeSession();
|
|
getPurchaseData();
|
|
}, []);
|
|
|
|
const getPurchaseData = async () => {
|
|
try {
|
|
const response = await dispatch(getPurchaseLowStock(codesParam)).unwrap();
|
|
const list = response?.data?.data;
|
|
setDetails({
|
|
AppId: list?.[0]?.AppId,
|
|
CompId: list?.[0]?.CompId,
|
|
BranchId: list?.[0]?.BranchId,
|
|
});
|
|
setProducts(list);
|
|
setLoading(false);
|
|
if (list?.[0]?.LinkStatus === 'N') {
|
|
setOrderSuccess(true);
|
|
}
|
|
} catch (error) {
|
|
setLoading(false);
|
|
console.error('❌ Error getting purchase data:', error);
|
|
}
|
|
};
|
|
|
|
const initializeSession = async () => {
|
|
try {
|
|
await addSession();
|
|
setLoading(false);
|
|
} catch (error) {
|
|
console.error('❌ Error initializing session:', error);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const addSession = async () => {
|
|
if (!getSession('auth')) {
|
|
try {
|
|
const data = { username: '1000000001', password: '1234' };
|
|
const response = await axios.post(
|
|
`${apiUrlToken}/jwtTokenGenerator`,
|
|
data,
|
|
{
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Accept: 'application/json',
|
|
},
|
|
}
|
|
);
|
|
|
|
const { token } = response?.data;
|
|
|
|
if (token) {
|
|
sessionStore('auth', token);
|
|
sessionStore('LoginType', 'Kiosk');
|
|
}
|
|
} catch (error) {
|
|
console.error('❌ Error adding session:', error);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleRequiredQtyChange = (ProdId, value) => {
|
|
// allow only digits
|
|
if (!/^\d*$/.test(value)) return;
|
|
|
|
setProducts((prev) =>
|
|
prev.map((p) => (p.ProdId === ProdId ? { ...p, OrderQty: value } : p))
|
|
);
|
|
};
|
|
|
|
const handleDeleteProduct = (record) => {
|
|
setProducts((prev) => prev?.filter((p) => p.ProdId !== record.ProdId));
|
|
};
|
|
|
|
const filteredProducts = products?.filter((p) =>
|
|
p.ProdName?.toLowerCase()?.includes(searchTerm?.toLowerCase())
|
|
);
|
|
|
|
// const purchasePost = async () => {
|
|
// if (!products || products.length === 0) return;
|
|
|
|
// const groupedBySupplier = products.reduce((acc, p) => {
|
|
// const suppId = p.SupplierDetails?.[0]?.SuppId;
|
|
// if (!acc[suppId]) acc[suppId] = [];
|
|
// acc[suppId].push(p);
|
|
// return acc;
|
|
// }, {});
|
|
|
|
// const payloadArray = Object.values(groupedBySupplier).map(group => {
|
|
// const firstProduct = group[0];
|
|
// return {
|
|
// CompId: firstProduct.CompId,
|
|
// BranchId: firstProduct.BranchId,
|
|
// AppId: firstProduct.AppId,
|
|
// SuppId: firstProduct.SupplierDetails?.[0]?.SuppId,
|
|
// Remarks: "",
|
|
// LocationType: firstProduct.SupplierDetails?.[0]?.Type,
|
|
// CreatedBy: '',
|
|
// OrderDetails: group.map(p => ({
|
|
// ProdId: p.ProdId,
|
|
// OrderQty: Number(p.OrderQty || 0),
|
|
// ProdVariantName: p.ProdVariantName || ""
|
|
// }))
|
|
// };
|
|
// });
|
|
|
|
// try {
|
|
// const response = await dispatch(CustomerPurchase(payloadArray)).unwrap();
|
|
// if (response?.status === 200) {
|
|
// setOrderId(response?.data?.[0]?.OrderId);
|
|
// setMessage({ type: 'success', data: "Purchase Order Added Successfully" });
|
|
// setOrderSuccess(true);
|
|
// } else {
|
|
// setMessage({ type: 'error', data: "Error submitting order" });
|
|
// }
|
|
// } catch (error) {
|
|
// setMessage({ type: 'error', data: error });
|
|
// }
|
|
// };
|
|
|
|
const onComplete = useCallback(() => {
|
|
setMessage({ type: null, data: null });
|
|
}, []);
|
|
|
|
const ProductdataColumns = [
|
|
{
|
|
title: 'SI NO',
|
|
dataIndex: 'index',
|
|
key: 'index',
|
|
align: 'center',
|
|
render: (_, __, index) => index + 1,
|
|
},
|
|
{
|
|
title: 'Product Name',
|
|
dataIndex: 'ProdName',
|
|
key: 'ProdName',
|
|
},
|
|
{
|
|
title: 'Current Qty',
|
|
dataIndex: 'BalanceQty',
|
|
key: 'BalanceQty',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: 'Required Qty',
|
|
dataIndex: 'OrderQty',
|
|
key: 'OrderQty',
|
|
align: 'center',
|
|
render: (_, record) => (
|
|
<input
|
|
type="text"
|
|
value={record.OrderQty || ''}
|
|
onChange={(e) =>
|
|
handleRequiredQtyChange(record.ProdId, e.target.value)
|
|
}
|
|
className="CustomerPurchaseConfirm-requiredInput"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
title: 'Action',
|
|
key: 'Action',
|
|
width: '80px',
|
|
align: 'center',
|
|
render: (_, record) => (
|
|
<DeleteFilled
|
|
style={{ color: '#FF4D4F', cursor: 'pointer' }}
|
|
onClick={() => handleDeleteProduct(record)}
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
|
|
if (loading) {
|
|
// return <PozoLoader1/>;
|
|
return <PozoLoader2 />;
|
|
}
|
|
|
|
return (
|
|
<div className="CustomerPurchaseConfirm-container">
|
|
<Messages
|
|
messageType={message.type}
|
|
messageData={message.data}
|
|
onComplete={onComplete}
|
|
/>
|
|
|
|
<div className="CustomerPurchaseConfirm-card">
|
|
{orderSuccess ? (
|
|
<div
|
|
className="CustomerPurchaseConfirm-success"
|
|
style={{ textAlign: 'center', marginTop: '50px' }}
|
|
>
|
|
<CheckCircleOutlined
|
|
style={{ fontSize: '60px', color: 'green', marginBottom: '20px' }}
|
|
/>
|
|
<h2>Order Placed Successfully!</h2>
|
|
<p>Your purchase order has been submitted.</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* <h1 className="CustomerPurchaseConfirm-title">{products?.[0]?.CompName}</h1> */}
|
|
<h1 className="CustomerPurchaseConfirm-title">
|
|
Low Stock Products
|
|
</h1>
|
|
|
|
<div className="supplier-container">
|
|
<p className="supplier-title">Supplier Details</p>
|
|
|
|
{/* <div className="supplier-row">
|
|
<span className="supplier-label">Supplier ID</span>
|
|
<span className="supplier-value">{products?.[0]?.SupplierDetails?.[0]?.SuppId}</span>
|
|
</div> */}
|
|
|
|
<div className="supplier-row">
|
|
<span className="supplier-label">Supplier Name</span>
|
|
<span className="supplier-value">
|
|
{products?.[0]?.SupplierDetails?.[0]?.SuppName}
|
|
</span>
|
|
</div>
|
|
{products?.[0]?.SupplierDetails?.[0]?.SuppMobile && (
|
|
<div className="supplier-row">
|
|
<span className="supplier-label">Supplier Mobile</span>
|
|
<span className="supplier-value">
|
|
{products?.[0]?.SupplierDetails?.[0]?.SuppMobile}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{products?.[0]?.SupplierDetails?.[0]?.SuppEmail && (
|
|
<div className="supplier-row">
|
|
<span className="supplier-label">Email</span>
|
|
<span className="supplier-value">
|
|
{products?.[0]?.SupplierDetails?.[0]?.SuppEmail}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="supplier-row">
|
|
<span className="supplier-label">Address</span>
|
|
<span className="supplier-value">
|
|
{products?.[0]?.SupplierDetails?.[0]?.Address1},
|
|
{products?.[0]?.SupplierDetails?.[0]?.Address2},
|
|
{products?.[0]?.SupplierDetails?.[0]?.City},
|
|
{products?.[0]?.SupplierDetails?.[0]?.Dist},
|
|
{products?.[0]?.SupplierDetails?.[0]?.State} -
|
|
{products?.[0]?.SupplierDetails?.[0]?.Zip}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="CustomerPurchaseConfirm-filters">
|
|
<input
|
|
type="text"
|
|
placeholder="Search Product..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="CustomerPurchaseConfirm-search"
|
|
/>
|
|
</div>
|
|
|
|
{/* TABLE */}
|
|
<Table
|
|
rowKey="UniqueId"
|
|
dataSource={filteredProducts}
|
|
columns={ProductdataColumns}
|
|
pagination={{
|
|
pageSize: 10,
|
|
onChange: (page) => console.log('Page:', page),
|
|
}}
|
|
/>
|
|
|
|
{/* Submit */}
|
|
<div className="CustomerPurchaseConfirm-button">
|
|
<PurchasePDFPrint
|
|
appId={details?.AppId}
|
|
compId={details?.CompId}
|
|
branchId={details?.BranchId}
|
|
products={products}
|
|
codesParam={codesParam}
|
|
onOrderSuccess={handleOrderSuccess}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CustomerPurchaseConfirm;
|