price change modal input fixed

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

@@ -9,7 +9,8 @@ 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 PriceChange from "../../../../Images/PayOptImgs/PriceChange.svg";
+import { v4 as uuidv4 } from 'uuid';
 
 const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, productPriceChange = false, setProductPriceChange = () => { }, setPriceChangeProduct = () => { } }) => {
 
@@ -63,6 +64,11 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
             dataIndex: 'ProdName',
             key: 'ProdName',
         },
+        {
+            title: 'Batch No.',
+            dataIndex: 'BatchRef',
+            key: 'BatchRef',
+        },
         {
             title: 'Old MRP',
             dataIndex: 'MRP',
@@ -83,7 +89,8 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
                 // return <div>{text ? text : 'Enter New MRP'}</div>
                 return (
                     <Form.Item
-                        name={`NewMRP${index}`}
+                        key={`NewMRP-${record?.localId}`}
+                        name={`NewMRP${record?.localId}`}
                         rules={[
                             {
                                 validator: async (_, value) => {
@@ -97,9 +104,10 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
                             },
                         ]}>
                         <InputField
+
                             value={text}
                             placeholder="Enter New MRP"
-                            onChange={(e) => handleNewMRPChange(e?.target?.value, index)}
+                            onChange={(e) => handleNewMRPChange(e?.target?.value, record?.localId)}
                             inputMode="decimal"
                             onInput={(e) => {
                                 let cleanedValue = e.target.value.replace(
@@ -133,7 +141,7 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
             title: 'New Sell Price',
             dataIndex: 'NewSellPrice',
             key: 'NewSellPrice',
-            width: '160px',
+            width: '120px',
             align: 'right',
             render: (text, record, index) => {
                 // if (index === editingKey) {
@@ -142,7 +150,8 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
                 // return <div>{text ? text : 'Enter New Sell Price'}</div>
                 return (
                     <Form.Item
-                        name={`NewSellPrice${index}`}
+                        key={`NewSellPrice-${record?.localId}`}
+                        name={`NewSellPrice${record?.localId}`}
                         rules={[
                             {
                                 validator: async (_, value) => {
@@ -157,9 +166,10 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
                         ]}
                     >
                         <InputField
+
                             value={text}
                             placeholder="Enter New Sell Price"
-                            onChange={(e) => handleNewSellPriceChange(e?.target?.value, index)}
+                            onChange={(e) => handleNewSellPriceChange(e?.target?.value, record?.localId)}
                             inputMode="decimal"
                             onInput={(e) => {
                                 let cleanedValue = e.target.value.replace(
@@ -205,26 +215,54 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
             let stockDtls = [];
 
             data?.forEach(item => {
-                let products = item?.ProductDetail?.flatMap(product => product);
+                const products = item?.ProductDetail ?? [];
 
-                let variants = products?.flatMap(product => product?.ProdVariantDetails);
+                products.forEach(product => {
-                const filteredVariants = variants?.filter(variant => variant?.StockDetails?.length > 0);
+                    const variants = product?.ProdVariantDetails ?? [];
-                const stocks = filteredVariants?.flatMap(variant =>
-                    variant?.StockDetails?.map(stock => ({
-                        ...stock,
-                        ProdName: products?.[0]?.ProdName + (variant?.ProdVariantName ? ` (${variant?.ProdVariantName})` : ''),
-                        StockAvailable: products?.[0]?.StockAvailable,
-                        ProdVariantName: variant?.ProdVariantName
-                    }))
-                );
 
-                stockDtls.push(...stocks?.filter(stock =>
+                    variants
-                    stock?.StockAvailable === 'Y'
+                        .filter(variant => variant?.StockDetails?.length > 0)
-                        ? stock?.BatchRef
+                        .forEach(variant => {
-                        : true
+                            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;
         }
@@ -232,15 +270,16 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         setCurrentPage(1)
     }, [cardData, priceChangeProduct])
 
-    const handleNewMRPChange = (value, index) => {
+    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${index}`]: value,
+            [`NewMRP${localId}`]: value,
-            [`NewSellPrice${index}`]: null,
+            [`NewSellPrice${localId}`]: null,
         });
 
         const priceChangedProdList = [...priceChangedProducts];
@@ -255,14 +294,15 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
         setPriceChangedProducts(priceChangedProdList);
     }
 
-    const handleNewSellPriceChange = (value, index) => {
+    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${index}`]: null,
+                    [`NewSellPrice${localId}`]: null,
                 });
                 updatedTableData[index].NewSellPrice = null;
                 setTableData(updatedTableData);
@@ -406,7 +446,7 @@ const ProductPriceChange = ({ showButton = true, priceChangeProduct = null, prod
                 className={'price-change-modal'}
                 open={priceChangeModal || productPriceChange}
                 footer={true}
-                width={800}
+                width={900}
                 handleCancel={() => {
                     setPriceChangeModal(false);
                     setProductPriceChange(false);