419 lines
16 KiB
JavaScript
419 lines
16 KiB
JavaScript
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
import { DefaultModal } from '../../../../../Components/Modal/DefaultModal';
|
|
import FormHeader from '../../../../PageComponents/FormHeader';
|
|
import { Form } from 'antd';
|
|
import { DropDowns } from '../../../../../Components/Forms/DropDown';
|
|
import { CgCloseR } from 'react-icons/cg';
|
|
import { Messages } from '../../../../../Components/Notifications/Messages';
|
|
import Buttons from '../../../../../Components/Forms/Buttons';
|
|
import { ArrowRightOutlined } from '@ant-design/icons';
|
|
import { InputField } from '../../../../../Components/Forms/InputField';
|
|
import {
|
|
GlobalOrderCardDetails,
|
|
changeOrderCardDetails,
|
|
} from '../../../../../Features/BookingScreen/BookingData/BookingData';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { validateSafeInput } from '../../../../../Services/Others';
|
|
import { TextAreaInput } from '../../../../../../ownLib/my-ui-lib';
|
|
import "../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingEditQuantity/BSBillingEditQuantity.scss"
|
|
const BSImeiDetails = (props) => {
|
|
const formRef = useRef(null);
|
|
const dispatch = useDispatch();
|
|
const [messageType, setMessageType] = useState(null);
|
|
const [messageData, setMessageData] = useState(null);
|
|
const CartOrderDetails = useSelector(GlobalOrderCardDetails);
|
|
const [DeviceDetailOpen, setDeviceDetailOpen] = useState(props.DeviceDetails);
|
|
const [ProductDetail, setProductDetail] = useState(props.ProductDetail);
|
|
const [RadioBtnSelection, setRadioBtnSelection] = useState('Serial');
|
|
const [SerialNumberList, setSerialNumberList] = useState([]);
|
|
const [IMEINumberList, setIMEINumberList] = useState([]);
|
|
|
|
console.log(props, 'propsprops');
|
|
useEffect(() => {
|
|
let productidentifier = ProductDetail?.ProductIdentifierDtls
|
|
? ProductDetail?.ProductIdentifierDtls
|
|
: [];
|
|
setSerialNumberList(
|
|
productidentifier
|
|
?.filter(
|
|
(item) => !(item.SerialNumber == '' || item.SerialNumber == null)
|
|
)
|
|
?.map((item) => item.SerialNumber)
|
|
);
|
|
setIMEINumberList(
|
|
productidentifier
|
|
.filter((item) => item.IMEI1 !== '' || item.IMEI2 !== '')
|
|
?.map((item) => {
|
|
const imei1 = item.IMEI1 || '';
|
|
const imei2 = item.IMEI2 || '';
|
|
return [imei1, imei2].filter(Boolean).join(',');
|
|
})
|
|
);
|
|
|
|
formRef?.current?.setFieldsValue({
|
|
description: productidentifier?.[0]?.Description || "",
|
|
})
|
|
}, []);
|
|
const CloseDeviceDetailModal = () => {
|
|
props.handleDeviceDetailClose();
|
|
};
|
|
const ChangeRadioOption = (data) => {
|
|
setRadioBtnSelection(data);
|
|
};
|
|
const SerialNumberOnchange = (e) => {
|
|
console.log(e, SerialNumberList, 'SerialNumberOnchange');
|
|
// setSelectedSerialNumber(e)
|
|
let isthere = SerialNumberList?.includes(e);
|
|
if (SerialNumberList?.length < ProductDetail?.OrderQty) {
|
|
if (isthere) {
|
|
setMessageType('error');
|
|
setMessageData('This number is Already Selected');
|
|
} else {
|
|
setSerialNumberList([...SerialNumberList, e]);
|
|
}
|
|
}
|
|
else {
|
|
setMessageType('error');
|
|
setMessageData('Already Selected ');
|
|
}
|
|
};
|
|
|
|
const AddSerialNumber = () => {
|
|
let serial = formRef.current?.getFieldsValue()?.SerialNumbertext;
|
|
let isthere = SerialNumberList?.includes(serial);
|
|
if (SerialNumberList?.length < ProductDetail?.OrderQty) {
|
|
if (isthere) {
|
|
setMessageType('error');
|
|
setMessageData('This number is Already Selected');
|
|
} else {
|
|
setSerialNumberList([...SerialNumberList, serial]);
|
|
}
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData('you cant enter more than Order Qty');
|
|
}
|
|
|
|
formRef.current?.resetFields();
|
|
};
|
|
|
|
const IMEINumberOnchange = (e) => {
|
|
let isthere = IMEINumberList?.includes(e);
|
|
if (IMEINumberList?.length < ProductDetail?.OrderQty) {
|
|
if (isthere) {
|
|
setMessageType('error');
|
|
setMessageData('This number is already there');
|
|
} else {
|
|
setIMEINumberList([...IMEINumberList, e]);
|
|
}
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData('Already Selected');
|
|
}
|
|
};
|
|
const AddIemiNumber = () => {
|
|
let imei = formRef.current?.getFieldsValue()?.IMEINumbertext;
|
|
let isthere = IMEINumberList?.includes(imei);
|
|
if (IMEINumberList?.length < ProductDetail?.OrderQty) {
|
|
if (isthere) {
|
|
setMessageType('error');
|
|
setMessageData('This number is already there');
|
|
} else {
|
|
setIMEINumberList([...IMEINumberList, imei]);
|
|
}
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData('you cant enter more than Order Qty');
|
|
}
|
|
formRef.current?.resetFields();
|
|
};
|
|
|
|
const RemoveSerialNumber = (item) => {
|
|
setSerialNumberList(SerialNumberList?.filter((data) => data != item));
|
|
};
|
|
const RemoveIMEINumber = (item) => {
|
|
setIMEINumberList(IMEINumberList?.filter((data) => data != item));
|
|
};
|
|
const onComplete = useCallback(() => {
|
|
setMessageData(null);
|
|
setMessageType(null);
|
|
}, []);
|
|
const AddDeviceDetails = () => {
|
|
|
|
console.log(formRef?.current?.getFieldsValue, "formRef?.current?.getFieldsValue")
|
|
const maxLength = Math.max(SerialNumberList.length, IMEINumberList.length);
|
|
// Create the new object array
|
|
const IdentifyDetails = Array.from({ length: maxLength }, (_, index) => {
|
|
const serial = SerialNumberList[index] || ''; // Use serial number or default to empty
|
|
const imeiPair = IMEINumberList[index]
|
|
? IMEINumberList[index].split(',')
|
|
: ['', '']; // Split IMEI numbers or default to empty strings
|
|
return {
|
|
SerialNumber: serial,
|
|
IMEI1: imeiPair[0] || '', // First IMEI number
|
|
IMEI2: imeiPair[1] || '', // Second IMEI number
|
|
MacId: '', // Default empty macid
|
|
Description: formRef.current?.getFieldsValue()?.description || '',
|
|
};
|
|
});
|
|
console.log(IdentifyDetails, 'IdentifyDetails');
|
|
// const isItemInCart = CartOrderDetails?.find((cartItem) => (cartItem.ProdId === ProductDetail.ProdId) && (cartItem.InwardDtlId === ProductDetail.InwardDtlId)&& (cartItem?.OrderRate ===ProductDetail?.OrderRate) && (cartItem?.BookingTypeName === ProductDetail?.BookingTypeName) )
|
|
dispatch(
|
|
changeOrderCardDetails(
|
|
CartOrderDetails.map(
|
|
(
|
|
cartItem // if the item is already in the cart, increase the quantity of the item
|
|
) =>
|
|
cartItem.ProdId === ProductDetail.ProdId &&
|
|
cartItem.InwardDtlId === ProductDetail.InwardDtlId &&
|
|
cartItem?.OrderRate === ProductDetail?.OrderRate &&
|
|
cartItem?.BookingTypeName === ProductDetail?.BookingTypeName
|
|
? { ...cartItem, ProductIdentifierDtls: IdentifyDetails }
|
|
: cartItem // otherwise, return the cart item
|
|
)
|
|
)
|
|
);
|
|
CloseDeviceDetailModal();
|
|
};
|
|
console.log(ProductDetail, 'ProductDetaildevice');
|
|
return (
|
|
<div className="BSBilling-EditQuantity-Modal">
|
|
<Messages
|
|
messageType={messageType}
|
|
messageData={messageData}
|
|
onComplete={onComplete}
|
|
/>
|
|
<DefaultModal
|
|
title={
|
|
<div className="EditQuantity-title">
|
|
<FormHeader title={'Device Identifier'} />
|
|
</div>
|
|
}
|
|
open={DeviceDetailOpen}
|
|
width={600}
|
|
footer={null}
|
|
children={
|
|
<div className="EditQuantity-Content">
|
|
<hr />
|
|
<div className="EditQuantity-heading">
|
|
<div className="EditQuantity-headingname">
|
|
<p className="EditQuantity-itemname">Item Name:</p>
|
|
</div>
|
|
<div className="EditQuantity-headingproductname">
|
|
<p className="EditQuantity-productname">
|
|
{' '}
|
|
{ProductDetail?.ProdName}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="DeviceRadioButtons">
|
|
{/* <RadioGrpButton
|
|
content={[
|
|
{ value: "Quantity", label: "Quantity Change" },
|
|
{ value: "Price", label: "Price Change" },
|
|
]}
|
|
fieldState={true}
|
|
defaultSelect={RadioBtnSelection}
|
|
onSelectFuntion={(e) => onRadioBtnChange(e)}
|
|
/> */}
|
|
<button
|
|
className={
|
|
RadioBtnSelection == 'Serial' ? 'SelecBtn' : 'ChangeBtn'
|
|
}
|
|
onClick={() => ChangeRadioOption('Serial')}
|
|
>
|
|
Serial Number
|
|
</button>
|
|
<button
|
|
className={
|
|
RadioBtnSelection == 'IMEI' ? 'SelecBtn' : 'ChangeBtn'
|
|
}
|
|
onClick={() => ChangeRadioOption('IMEI')}
|
|
>
|
|
IMEI Number
|
|
</button>
|
|
</div>
|
|
<Form ref={formRef}>
|
|
{RadioBtnSelection == 'Serial' && (
|
|
<div>
|
|
<div className="SerialNumberColumn">
|
|
{ProductDetail?.FullProductIdentifierDtls?.length > 0 &&
|
|
<Form.Item name="SerialNumber">
|
|
<DropDowns
|
|
options={ProductDetail?.FullProductIdentifierDtls?.filter(
|
|
(item) =>
|
|
!(
|
|
item.SerialNumber == '' ||
|
|
item.SerialNumber == null
|
|
)
|
|
)?.map((option) => ({
|
|
value: option.SerialNumber,
|
|
label: option.SerialNumber,
|
|
disabled: SerialNumberList?.includes(
|
|
option.SerialNumber
|
|
),
|
|
}))}
|
|
label={'Serial Number'}
|
|
className="field-DropDown"
|
|
onChangeFunction={(e) => SerialNumberOnchange(e)}
|
|
/>
|
|
</Form.Item>
|
|
|
|
}
|
|
|
|
<Form.Item
|
|
name="SerialNumbertext"
|
|
rules={[
|
|
{
|
|
validator: async (_, value) => {
|
|
await validateSafeInput(value); // To block HTML tags & SQL keywords
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<InputField
|
|
field="SerialNumbertext"
|
|
name="SerialNumbertext"
|
|
// value={NewPrice1}
|
|
label="Serial Number"
|
|
fieldState={true}
|
|
fieldApi={true}
|
|
// id="error2"
|
|
autocomplete="off"
|
|
// isOnChange={formType == "edit" || formRef.current?.getFieldsValue()?.CustName ? true : false}
|
|
/>
|
|
</Form.Item>
|
|
<Buttons
|
|
buttonText="Add"
|
|
color="901D77"
|
|
handleSubmit={AddSerialNumber}
|
|
icon={<ArrowRightOutlined />}
|
|
></Buttons>
|
|
</div>
|
|
<div>Serial Number:</div>
|
|
|
|
<div className="SerialNumber-Selected">
|
|
{SerialNumberList?.map((item, index) => (
|
|
<div key={index}>
|
|
{`${index + 1}. ${item}`}
|
|
<CgCloseR
|
|
color="#ff7875"
|
|
onClick={() => {
|
|
RemoveSerialNumber(item);
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
|
|
{RadioBtnSelection == 'IMEI' && (
|
|
<div>
|
|
<div className="SerialNumberColumn">
|
|
{ProductDetail?.FullProductIdentifierDtls?.length > 0 &&
|
|
<Form.Item name="IMEINumber">
|
|
<DropDowns
|
|
options={ProductDetail?.FullProductIdentifierDtls?.filter(
|
|
(item) => item.IMEI1 !== '' || item.IMEI2 !== ''
|
|
)?.map((option) => {
|
|
const imei1 = option.IMEI1 || '';
|
|
const imei2 = option.IMEI2 || '';
|
|
const valueLabel = [imei1, imei2]
|
|
?.filter(Boolean)
|
|
?.join(',');
|
|
const normalizedValueLabel = valueLabel?.trim();
|
|
return {
|
|
value: valueLabel,
|
|
label: valueLabel,
|
|
disabled:
|
|
IMEINumberList?.includes(normalizedValueLabel),
|
|
};
|
|
})}
|
|
label={'IMEI Number'}
|
|
className="field-DropDown"
|
|
onChangeFunction={(e) => IMEINumberOnchange(e)}
|
|
/>
|
|
</Form.Item>}
|
|
|
|
<Form.Item
|
|
name="IMEINumbertext"
|
|
rules={[
|
|
{
|
|
validator: async (_, value) => {
|
|
await validateSafeInput(value); // To block HTML tags & SQL keywords
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<InputField
|
|
field="IMEINumbertext"
|
|
name="IMEINumbertext"
|
|
label="IMEI Number"
|
|
fieldState={true}
|
|
fieldApi={true}
|
|
// id="error2"
|
|
autocomplete="off"
|
|
// OnChange={formType == "edit" || formRef.current?.getFieldsValue()?.CustName ? true : false}
|
|
/>
|
|
</Form.Item>
|
|
<Buttons
|
|
buttonText="Add"
|
|
color="901D77"
|
|
handleSubmit={AddIemiNumber}
|
|
icon={<ArrowRightOutlined />}
|
|
></Buttons>
|
|
</div>
|
|
<div>IMEI Number:</div>
|
|
<div className="SerialNumber-Selected">
|
|
{IMEINumberList?.map((item, index) => (
|
|
<div key={index}>
|
|
{`${index + 1}. ${item}`}
|
|
<CgCloseR
|
|
color="#ff7875"
|
|
onClick={() => {
|
|
RemoveIMEINumber(item);
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ display: "flex", marginTop: "10px" }}>
|
|
<Form.Item name="description">
|
|
<TextAreaInput
|
|
disabled={
|
|
(IMEINumberList?.length === 0) &&
|
|
(SerialNumberList?.length === 0)
|
|
}
|
|
autoComplete="off"
|
|
label={<label>Description..</label>}
|
|
defaultValue=""
|
|
isOnChange={true}
|
|
/>
|
|
</Form.Item>
|
|
</div>
|
|
</Form>
|
|
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
|
<Buttons
|
|
buttonText="Submit"
|
|
color="901D77"
|
|
handleSubmit={AddDeviceDetails}
|
|
icon={<ArrowRightOutlined />}
|
|
></Buttons>
|
|
</div>
|
|
</div >
|
|
}
|
|
handleCancel={CloseDeviceDetailModal}
|
|
/>
|
|
</div >
|
|
);
|
|
};
|
|
export default BSImeiDetails;
|