Android_Retail/src/Pages/BookingScreen/Components/UtillComponents/ProductPriceChange.jsx

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';

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;