541 lines
17 KiB
JavaScript
541 lines
17 KiB
JavaScript
import { shallowEqual, useSelector } from 'react-redux';
|
|
import {
|
|
GlobalAccessForOthers,
|
|
GlobalCardAccess,
|
|
GlobalCombosearch,
|
|
GlobalItemCard,
|
|
GlobalProductCategorie,
|
|
GlobalSelectedDatas,
|
|
GlobalWithoutSubCatItemCard,
|
|
triggerProductCard,
|
|
} from '../../../../Features/BookingScreen/BookingData/BookingData';
|
|
import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
|
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
import { Tables } from '../../../../Components/Tables/Table';
|
|
import { InputField } from '../../../../Components/Forms/InputField';
|
|
import { Form, Pagination, Tooltip } from 'antd';
|
|
import { getSession } from '../../../../Services/Others';
|
|
import { Messages } from '../../../../Components/Notifications/Messages';
|
|
import { useDispatch } from 'react-redux';
|
|
import { PutStockPrice } from '../../../../Features/StockPriceUpdate/StockPriceUpdateMaster';
|
|
import PriceChange from '../../../../Images/PayOptImgs/PriceChange.svg';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
import '../../../../Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss';
|
|
import '../../../../Styles/OverAllStyle/OverAllStyle.scss';
|
|
|
|
const ProductPriceChange = ({
|
|
showButton = true,
|
|
priceChangeProduct = null,
|
|
productPriceChange = false,
|
|
setProductPriceChange = () => {},
|
|
setPriceChangeProduct = () => {},
|
|
}) => {
|
|
const formRef = useRef(null);
|
|
const dispatch = useDispatch();
|
|
|
|
const AppId = getSession('AppId');
|
|
const CompId = getSession('CompId');
|
|
const BranchId = getSession('BranchId');
|
|
const UserId = getSession('UserId');
|
|
|
|
const [messageData, setMessageData] = useState(null);
|
|
const [messageType, setMessageType] = useState(null);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [pageSize] = useState(10);
|
|
|
|
const [noSubcatCardData, setNoSubcatCardData] = useState();
|
|
const [priceChangeModal, setPriceChangeModal] = useState(false);
|
|
|
|
const comboSearch = useSelector(GlobalCombosearch);
|
|
const ProdCat = useSelector(GlobalProductCategorie, shallowEqual);
|
|
const ItemCard = useSelector(GlobalItemCard, shallowEqual);
|
|
const withoutSubCatItemCard = useSelector(
|
|
GlobalWithoutSubCatItemCard,
|
|
shallowEqual
|
|
);
|
|
const CardAccess = useSelector(GlobalCardAccess, shallowEqual);
|
|
const globalAccessForOthers = useSelector(
|
|
GlobalAccessForOthers,
|
|
shallowEqual
|
|
);
|
|
const SelectedDatas = useSelector(GlobalSelectedDatas, shallowEqual);
|
|
const [tableData, setTableData] = useState([]);
|
|
const [editingKey, setEditingKey] = useState(null);
|
|
const [priceChangedProducts, setPriceChangedProducts] = useState([]);
|
|
console.log(comboSearch, 'comboSearch');
|
|
|
|
// console.log(noSubcatCardData, "noSubcatCardData")
|
|
|
|
useEffect(() => {
|
|
if (ProdCat && (ItemCard || withoutSubCatItemCard)) {
|
|
setNoSubcatCardData(
|
|
ItemCard?.length === 0 ? withoutSubCatItemCard : ItemCard
|
|
);
|
|
}
|
|
}, [ProdCat, ItemCard, withoutSubCatItemCard, noSubcatCardData]);
|
|
|
|
const priceChangeColumns = [
|
|
{
|
|
title: 'S.No',
|
|
dataIndex: 'SlNo',
|
|
key: 'SlNo',
|
|
width: '60px',
|
|
align: 'center',
|
|
render: (text, record, index) => (
|
|
<div>{(currentPage - 1) * pageSize + index + 1}</div>
|
|
),
|
|
},
|
|
{
|
|
title: 'Product Name',
|
|
dataIndex: 'ProdName',
|
|
key: 'ProdName',
|
|
},
|
|
{
|
|
title: 'Batch No.',
|
|
dataIndex: 'BatchRef',
|
|
key: 'BatchRef',
|
|
},
|
|
{
|
|
title: 'Old MRP',
|
|
dataIndex: 'MRP',
|
|
key: 'MRP',
|
|
width: '100px',
|
|
align: 'right',
|
|
},
|
|
{
|
|
title: 'New MRP (Optional)',
|
|
dataIndex: 'NewMRP',
|
|
key: 'NewMRP',
|
|
width: '100px',
|
|
align: 'right',
|
|
render: (text, record, index) => {
|
|
// if (index === editingKey) {
|
|
|
|
// }
|
|
// return <div>{text ? text : 'Enter New MRP'}</div>
|
|
return (
|
|
<Form.Item
|
|
key={`NewMRP-${record?.localId}`}
|
|
name={`NewMRP${record?.localId}`}
|
|
rules={[
|
|
{
|
|
validator: async (_, value) => {
|
|
if (value === '') {
|
|
return Promise.resolve();
|
|
} else if (parseFloat(value) < 1) {
|
|
return Promise.reject(`MRP should be greater than 0`);
|
|
}
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<InputField
|
|
value={text}
|
|
placeholder="Enter New MRP"
|
|
onChange={(e) =>
|
|
handleNewMRPChange(e?.target?.value, record?.localId)
|
|
}
|
|
inputMode="decimal"
|
|
onInput={(e) => {
|
|
let cleanedValue = e.target.value.replace(/[^0-9.]/g, ''); // Remove invalid characters
|
|
const parts = cleanedValue.split('.');
|
|
|
|
if (cleanedValue.startsWith('.')) {
|
|
cleanedValue = '0' + cleanedValue;
|
|
}
|
|
|
|
e.target.value =
|
|
parts.length > 2
|
|
? `${parts[0]}.${parts.slice(1).join('')}`
|
|
: cleanedValue;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Old Sell Price',
|
|
dataIndex: 'SellPrice',
|
|
key: 'SellPrice',
|
|
width: '120px',
|
|
align: 'right',
|
|
},
|
|
{
|
|
title: 'New Sell Price',
|
|
dataIndex: 'NewSellPrice',
|
|
key: 'NewSellPrice',
|
|
width: '120px',
|
|
align: 'right',
|
|
render: (text, record, index) => {
|
|
// if (index === editingKey) {
|
|
|
|
// }
|
|
// return <div>{text ? text : 'Enter New Sell Price'}</div>
|
|
return (
|
|
<Form.Item
|
|
key={`NewSellPrice-${record?.localId}`}
|
|
name={`NewSellPrice${record?.localId}`}
|
|
rules={[
|
|
{
|
|
validator: async (_, value) => {
|
|
if (value === '') {
|
|
return Promise.resolve();
|
|
} else if (parseFloat(value) < 1) {
|
|
return Promise.reject(
|
|
`Sell Price should be greater than 0`
|
|
);
|
|
}
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<InputField
|
|
value={text}
|
|
placeholder="Enter New Sell Price"
|
|
onChange={(e) =>
|
|
handleNewSellPriceChange(e?.target?.value, record?.localId)
|
|
}
|
|
inputMode="decimal"
|
|
onInput={(e) => {
|
|
let cleanedValue = e.target.value.replace(/[^0-9.]/g, ''); // Remove invalid characters
|
|
const parts = cleanedValue.split('.');
|
|
|
|
if (cleanedValue.startsWith('.')) {
|
|
cleanedValue = '0' + cleanedValue;
|
|
}
|
|
|
|
e.target.value =
|
|
parts.length > 2
|
|
? `${parts[0]}.${parts.slice(1).join('')}`
|
|
: cleanedValue;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
const cardData = !globalAccessForOthers
|
|
? CardAccess
|
|
? SelectedDatas?.length > 1
|
|
? SelectedDatas
|
|
: SelectedDatas?.[0]?.AppId === 0 && SelectedDatas?.[0]?.CompId === 0
|
|
? []
|
|
: SelectedDatas
|
|
: ItemCard?.length === 0 ||
|
|
(ItemCard?.[0]?.AppId === 0 && ItemCard?.[0]?.CompId === 0)
|
|
? noSubcatCardData
|
|
: ItemCard
|
|
: '';
|
|
|
|
console.log(cardData, 'cardData1', ItemCard, SelectedDatas, noSubcatCardData);
|
|
|
|
useEffect(() => {
|
|
const extractStockDtls = (data) => {
|
|
if (data?.length === 0) return [];
|
|
|
|
let stockDtls = [];
|
|
|
|
data?.forEach((item) => {
|
|
const products = item?.ProductDetail ?? [];
|
|
|
|
products.forEach((product) => {
|
|
const variants = product?.ProdVariantDetails ?? [];
|
|
|
|
variants
|
|
.filter((variant) => variant?.StockDetails?.length > 0)
|
|
.forEach((variant) => {
|
|
const stocks = variant.StockDetails.map((stock) => ({
|
|
...stock,
|
|
ProdName:
|
|
product?.ProdName +
|
|
(product?.Size && product?.UomName
|
|
? ` (${product.Size} ${product.UomName})`
|
|
: product?.Size
|
|
? ` (${product.Size})`
|
|
: '') +
|
|
(product?.BrandName ? ` - (${product.BrandName})` : '') +
|
|
(variant?.ProdVariantName
|
|
? ` (${variant.ProdVariantName})`
|
|
: ''),
|
|
UomName: product?.UomName,
|
|
BrandName: product?.BrandName,
|
|
Size: product?.Size,
|
|
StockAvailable: product?.StockAvailable,
|
|
ProdVariantName: variant?.ProdVariantName,
|
|
localId: uuidv4(),
|
|
}));
|
|
|
|
stockDtls.push(
|
|
...stocks.filter((stock) =>
|
|
stock?.StockAvailable === 'Y' ? stock?.BatchRef : true
|
|
)
|
|
);
|
|
});
|
|
});
|
|
});
|
|
|
|
console.log('extractStockDtls', stockDtls);
|
|
return stockDtls;
|
|
};
|
|
setTableData(extractStockDtls(priceChangeProduct || cardData));
|
|
setCurrentPage(1);
|
|
}, [cardData, priceChangeProduct]);
|
|
|
|
const handleNewMRPChange = (value, localId) => {
|
|
const updatedTableData = [...tableData];
|
|
const index = updatedTableData.findIndex(
|
|
(item) => item?.localId === localId
|
|
);
|
|
updatedTableData[index].NewMRP = value;
|
|
setTableData(updatedTableData);
|
|
updatedTableData[index].NewSellPrice = null;
|
|
formRef.current.setFieldsValue({
|
|
[`NewMRP${localId}`]: value,
|
|
[`NewSellPrice${localId}`]: null,
|
|
});
|
|
|
|
const priceChangedProdList = [...priceChangedProducts];
|
|
const prodIndex = priceChangedProdList?.findIndex(
|
|
(prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
|
|
);
|
|
if (prodIndex !== -1) {
|
|
priceChangedProdList[prodIndex] = {
|
|
...priceChangedProdList?.[prodIndex],
|
|
NewMRP: value,
|
|
NewSellPrice: null,
|
|
};
|
|
}
|
|
setPriceChangedProducts(priceChangedProdList);
|
|
};
|
|
|
|
const handleNewSellPriceChange = (value, localId) => {
|
|
const index = tableData.findIndex((item) => item?.localId === localId);
|
|
const updatedTableData = [...tableData];
|
|
if (updatedTableData[index]?.NewMRP) {
|
|
if (parseFloat(value) > parseFloat(updatedTableData[index]?.NewMRP)) {
|
|
setMessageType('error');
|
|
setMessageData('New Sell Price cannot be greater than New MRP');
|
|
formRef.current.setFieldsValue({
|
|
[`NewSellPrice${localId}`]: null,
|
|
});
|
|
updatedTableData[index].NewSellPrice = null;
|
|
setTableData(updatedTableData);
|
|
const priceChangedProdList = [...priceChangedProducts];
|
|
const prodIndex = priceChangedProdList?.findIndex(
|
|
(prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
|
|
);
|
|
|
|
if (prodIndex !== -1) {
|
|
priceChangedProdList.splice(prodIndex, 1);
|
|
}
|
|
setPriceChangedProducts(priceChangedProdList);
|
|
return;
|
|
}
|
|
}
|
|
if (!updatedTableData[index]?.NewMRP && updatedTableData[index]?.MRP) {
|
|
if (parseFloat(value) > parseFloat(updatedTableData[index]?.MRP)) {
|
|
setMessageType('error');
|
|
setMessageData('New Sell Price cannot be greater than MRP');
|
|
formRef.current.setFieldsValue({
|
|
[`NewSellPrice${index}`]: null,
|
|
});
|
|
updatedTableData[index].NewSellPrice = null;
|
|
setTableData(updatedTableData);
|
|
const priceChangedProdList = [...priceChangedProducts];
|
|
const prodIndex = priceChangedProdList?.findIndex(
|
|
(prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
|
|
);
|
|
|
|
if (prodIndex !== -1) {
|
|
priceChangedProdList.splice(prodIndex, 1);
|
|
}
|
|
setPriceChangedProducts(priceChangedProdList);
|
|
return;
|
|
}
|
|
}
|
|
updatedTableData[index].NewSellPrice = value;
|
|
setTableData(updatedTableData);
|
|
formRef.current.setFieldsValue({
|
|
[`NewSellPrice${index}`]: value,
|
|
});
|
|
|
|
const priceChangedProdList = [...priceChangedProducts];
|
|
const prodIndex = priceChangedProdList?.findIndex(
|
|
(prod) => prod?.InwardDtlId === updatedTableData[index]?.InwardDtlId
|
|
);
|
|
|
|
if (prodIndex !== -1) {
|
|
priceChangedProdList[prodIndex] = {
|
|
...priceChangedProdList[prodIndex],
|
|
SellPrice: String(value),
|
|
};
|
|
} else {
|
|
priceChangedProdList.push({
|
|
ProdId: updatedTableData[index]?.ProdId,
|
|
ProdName: updatedTableData[index]?.ProdName,
|
|
MRP: String(
|
|
updatedTableData[index]?.NewMRP || updatedTableData[index]?.MRP
|
|
),
|
|
SellPrice: String(value),
|
|
AdjComment: 'string',
|
|
InwardDtlId: updatedTableData[index]?.InwardDtlId,
|
|
});
|
|
}
|
|
|
|
setPriceChangedProducts(priceChangedProdList);
|
|
};
|
|
|
|
const edit = (record, index) => {
|
|
console.log('edit', record, index);
|
|
setEditingKey(index);
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
console.log('submit');
|
|
|
|
if (priceChangedProducts?.length > 0) {
|
|
console.log('priceChangedProducts', priceChangedProducts);
|
|
const validation = priceChangedProducts?.every((prod) => {
|
|
if (parseFloat(prod?.MRP) < parseFloat(prod?.SellPrice)) {
|
|
setMessageType('error');
|
|
setMessageData(
|
|
`${prod?.ProdName}: MRP cannot be less than Sell Price`
|
|
);
|
|
return false;
|
|
}
|
|
if (!parseFloat(prod?.SellPrice) || !parseFloat(prod?.MRP)) {
|
|
setMessageType('error');
|
|
setMessageData(`${prod?.ProdName}: Please give Sell Price or MRP`);
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
if (!validation) return;
|
|
|
|
const data = {
|
|
AppId: AppId,
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
ProductDetails: priceChangedProducts,
|
|
UpdatedBy: UserId,
|
|
};
|
|
|
|
const res = await dispatch(PutStockPrice(data))?.unwrap();
|
|
if (res?.data?.statusCode === 1) {
|
|
setMessageData('Price Changed Successfully');
|
|
setMessageType('success');
|
|
setPriceChangeModal(false);
|
|
setProductPriceChange(false);
|
|
setEditingKey(null);
|
|
setPriceChangedProducts([]);
|
|
setTableData([]);
|
|
dispatch(triggerProductCard());
|
|
setPriceChangeProduct(null);
|
|
formRef.current.resetFields();
|
|
} else {
|
|
setMessageData('Error Updating Product Price');
|
|
setMessageType('error');
|
|
}
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData('No changes made / No sell price entered');
|
|
}
|
|
};
|
|
|
|
const onComplete = useCallback(() => {
|
|
setMessageData(null);
|
|
setMessageType(null);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Messages
|
|
messageData={messageData}
|
|
messageType={messageType}
|
|
onComplete={onComplete}
|
|
/>
|
|
{showButton ? (
|
|
<Tooltip title="Price Change">
|
|
<button
|
|
className="price-change-btn"
|
|
type="button"
|
|
onClick={() => {
|
|
if (comboSearch) {
|
|
setMessageType('warning');
|
|
setMessageData('Price change will not work for combo products');
|
|
return;
|
|
}
|
|
setPriceChangeModal(true);
|
|
}}
|
|
>
|
|
{/* <FaIndianRupeeSign size={35}/> */}
|
|
<img src={PriceChange} alt="" width={30} />
|
|
</button>
|
|
</Tooltip>
|
|
) : (
|
|
<></>
|
|
)}
|
|
<DefaultModal
|
|
title="Price Change"
|
|
className={'price-change-modal'}
|
|
open={priceChangeModal || productPriceChange}
|
|
footer={true}
|
|
width={900}
|
|
handleCancel={() => {
|
|
setPriceChangeModal(false);
|
|
setProductPriceChange(false);
|
|
setEditingKey(null);
|
|
setPriceChangedProducts([]);
|
|
formRef?.current?.resetFields();
|
|
setPriceChangeProduct(null);
|
|
setCurrentPage(1);
|
|
}}
|
|
handleSubmit={handleSubmit}
|
|
>
|
|
<div className="price-change-table">
|
|
{/* <div className="table-notes">Note : Click on a row to edit/modify</div> */}
|
|
<Form ref={formRef}>
|
|
<Tables
|
|
columns={priceChangeColumns}
|
|
data={tableData?.slice(
|
|
(currentPage - 1) * pageSize,
|
|
currentPage * pageSize
|
|
)}
|
|
onRow={(record, index) => ({
|
|
onClick: () => {
|
|
edit(record, index);
|
|
},
|
|
})}
|
|
/>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
margin: '20px 0',
|
|
}}
|
|
>
|
|
<Pagination
|
|
current={currentPage}
|
|
pageSize={pageSize}
|
|
total={tableData?.length}
|
|
onChange={(page) => setCurrentPage(page)}
|
|
showSizeChanger={false}
|
|
showTotal={(total, range) =>
|
|
`${range[0]}-${range[1]} of ${total} items`
|
|
}
|
|
/>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</DefaultModal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ProductPriceChange;
|