Android_Retail/src/Pages/SupplierMaster/SupplierMasterForm.jsx

768 lines
27 KiB
JavaScript

import { useState, useEffect, useRef } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate, useLocation } from 'react-router-dom';
import { Form } from 'antd';
import { ArrowRightOutlined } from '@ant-design/icons';
import { InputField } from '../../Components/Forms/InputField.jsx';
import Buttons from '../../Components/Forms/Buttons.jsx';
import { Messages } from '../../Components/Notifications/Messages';
import MapView from '../../Components/MapView/MapView.jsx';
import FormHeader from '../PageComponents/FormHeader.jsx';
import { changeBreadCrumb } from '../../Features/AppPage/CenterPage.js';
import { getSession, validateSafeInput } from '../../Services/Others';
import {
getBranchDataBasedonCmpAppId,
postsupplier,
putsupplier,
} from '../../Features/SupplierMaster/SupplierMaster.js';
import { DropDowns } from '../../Components/Forms/DropDown.jsx';
import { getConfigType } from '../../Features/BookingScreen/BookingData/BookingData.js';
const subDirectory = import.meta.env.BASE_URL;
const SupplierForm = ({ formType }) => {
const formRef = useRef(null);
const dispatch = useDispatch();
const navigate = useNavigate();
const location = useLocation();
const state = location?.state;
const editstate = state?.editstate;
const [messageType, setMessageType] = useState(null);
const [messageData, setMessageData] = useState(null);
const [SelectedLatitude, setSelectedLatitude] = useState(null);
const [SelectedLongitude, setSelectedLongitude] = useState(null);
const [zipCodeData, setZipCodeData] = useState(false);
const [cmpId, setcmpId] = useState(getSession('CompId'));
const [brId, setBrId] = useState(getSession('BranchId'));
const [AppId, setAppId] = useState(getSession('AppId'));
const AppType = getSession('AppType');
const [deliveryPerformanceData, SetDeleveryPerformanceData] = useState([]);
const [DiscountData, setDiscountData] = useState([]);
const [QualityData, setQualityData] = useState([]);
const [Delivery, setDeliveryValue] = useState();
const [DicountValue, setDicountValue] = useState();
const [QualityValue, setQualityValue] = useState();
const items = [
{
name: 'Home',
link: `${subDirectory}app-page/home`,
},
{
name: AppType === 'Wholesale' ? 'Seller' : 'Supplier',
link: `${subDirectory}setting/supplier-master`,
},
{
name: editstate ? 'Edit' : 'New',
link: null,
},
];
useEffect(() => {
try {
dispatch(changeBreadCrumb({ items: items }));
if (!brId) {
fetchData();
} else {
fetchDataBranchBased();
}
if (formType === 'edit') {
if (editstate) {
console.log('editstate', editstate);
if (editstate?.Zip) {
setZipCodeData(true);
}
setDeliveryValue(editstate?.DeliveryPerformance);
setDicountValue(editstate?.DiscountLevel);
setQualityValue(editstate?.QualityofSupp);
formRef?.current?.setFieldsValue(editstate);
setSelectedLatitude(editstate?.Latitude);
setSelectedLongitude(editstate?.Longitude);
} else {
navigate(`${subDirectory}setting/supplier-master/`);
}
}
} catch (err) {
console.log(err, 'err');
}
}, []);
useEffect(() => {
deliveryPerformance();
discountLevel();
qualityofSupp();
}, []);
const deliveryPerformance = async () => {
let response = await dispatch(
getConfigType({ TypeName: 'Delivery Performance' })
).unwrap();
SetDeleveryPerformanceData(response?.data?.data);
};
const discountLevel = async () => {
let response = await dispatch(
getConfigType({ TypeName: 'Discount Level' })
).unwrap();
setDiscountData(response?.data?.data);
};
const qualityofSupp = async () => {
let response = await dispatch(
getConfigType({ TypeName: 'Quality Of Supplier' })
).unwrap();
setQualityData(response?.data?.data);
};
const onFinish = async (values) => {
let postData = values;
postData['CreatedBy'] = getSession('UserId');
postData['CompId'] = getSession('CompId');
postData['AppId'] = AppId;
postData['BranchId'] = brId;
let response = {};
if (formType === 'add') {
response = await dispatch(postsupplier(postData)).unwrap();
} else if (formType === 'edit') {
if (editstate) {
postData['SuppId'] = editstate?.SuppId;
postData['AddId'] = editstate?.AddId;
postData['UpdatedBy'] = getSession('UserId');
}
response = await dispatch(putsupplier(postData)).unwrap();
}
if (response?.data?.statusCode == 1) {
navigate(`${subDirectory}setting/supplier-master/`, {
state: {
Notiffy: {
messageType: 'success',
messageData: response?.data?.response,
},
},
});
} else {
setMessageType('error');
setMessageData(response?.data?.response);
}
};
const validatePhoneNumber = (_, value) => {
if (!value) {
return Promise.reject('Mobile number is required');
}
// Must be 10 digits and start with 6-9
const phoneRegex = /^[6-9]\d{9}$/;
if (!phoneRegex.test(value)) {
return Promise.reject('Please enter a valid 10-digit mobile number starting with 6, 7, 8, or 9');
}
return Promise.resolve();
};
const validateEmail = (rule, value, callback) => {
const regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (!value || regex.test(value)) {
callback();
} else {
callback('Please enter a valid Mail Id');
}
};
async function fetchData() {
const gettingBranchDropDown = await dispatch(
getBranchDataBasedonCmpAppId({ cmpId: cmpId, AppId: AppId })
).unwrap();
if (gettingBranchDropDown?.data?.statusCode === 1) {
if (gettingBranchDropDown?.data?.data?.length === 1) {
formRef?.current?.setFieldsValue({
BranchId:
gettingBranchDropDown?.data?.data?.length === 1
? gettingBranchDropDown?.data?.data[0]?.BrId
: null,
});
await BranchDropDownChange(gettingBranchDropDown?.data?.data[0]?.BrId);
}
}
}
const fetchDataBranchBased = async () => {
const gettingBranchDropDown = await dispatch(
getBranchDataBasedonCmpAppId({ cmpId: cmpId, AppId: AppId })
).unwrap();
if (gettingBranchDropDown?.data?.statusCode === 1) {
let finalBranchDropDown = gettingBranchDropDown?.data?.data?.filter(
(value) => value.BrId === brId
);
if (finalBranchDropDown?.length === 1) {
formRef.current?.setFieldsValue({
BranchId:
finalBranchDropDown?.length === 1
? finalBranchDropDown[0]?.BrId
: null,
});
await BranchDropDownChange(finalBranchDropDown[0]?.BrId);
}
}
};
const onMarkerClick = async (location) => {
setSelectedLatitude(
typeof location.lat === 'function' ? location.lat() : SelectedLatitude
);
setSelectedLongitude(
typeof location.lng === 'function' ? location.lng() : SelectedLongitude
);
formRef.current?.setFieldsValue({
Latitude:
typeof location.lat === 'function' ? location.lat() : SelectedLatitude,
Longitude:
typeof location.lng === 'function' ? location.lng() : SelectedLongitude,
});
};
const pinCodeChange = async (e) => {
if (e?.target?.value?.length < 6) {
setZipCodeData(false);
return false;
}
await getPincodeValues(e?.target?.value);
};
const getPincodeValues = async (pinCode) => {
if (pinCode?.length == 6) {
let response = '';
await fetch(`https://api.postalpincode.in/pincode/${pinCode}`)
.then((res) => res.text())
.then((text) => (response = JSON.parse(text)));
if (response[0]['Status'] === 'Success') {
setZipCodeData(true);
formRef.current?.setFieldsValue({
City: response[0]['PostOffice'][0]['Block'],
Dist: response[0]['PostOffice'][0]['District'],
State: response[0]['PostOffice'][0]['State'],
});
} else {
setZipCodeData(false);
}
}
};
const BranchDropDownChange = async (e) => {
formRef.current?.setFieldsValue({ BranchId: e });
};
const handleDeliveryPerformanceChange = (value) => {
formRef?.current?.setFieldsValue({ DeliveryPerformance: value });
setDeliveryValue(value);
};
const handleDiscountLevelChange = (value) => {
formRef?.current?.setFieldsValue({ DiscountLevel: value });
setDicountValue(value);
};
const handleQualityofSuppChange = (value) => {
formRef?.current?.setFieldsValue({ QualityofSupp: value });
setQualityValue(value);
};
return (
<div className="pageOverAll">
<div className="userPage">
<div className="userPageContent">
<Messages messageType={messageType} messageData={messageData} />
<div className="formName">
<FormHeader
title={AppType === 'Wholesale' ? 'Seller' : 'Supplier'}
/>
</div>
<div className="formDiv">
<Form
ref={formRef}
className="formDivAnt"
onFinish={onFinish}
initialValues={{
...editstate,
}}
>
<div className="formDivS">
<div className="inputForm">
{/* <Form.Item
name="BranchId"
rules={[
{
required: true,
message: "Please Select Branch Name",
},
]}
>
<DropDowns
options={BranchDropDown?.map((option) => ({
value: option.BrId,
label: option.BrName,
}))}
label={<label class="required">Branch Name</label>}
id="BranchId"
field="BranchId"
fieldState={true}
fieldApi={true}
className="field-DropDown-Emp"
onChangeFunction={(e) => BranchDropDownChange(e)}
isOnchanges={formType == "edit" ? true : false}
valueData={SelectedBranchData}
disabled={brId ? true : false}
// defaultValue={LastSelectConfig}
/>
</Form.Item> */}
<Form.Item
name="SuppName"
rules={[
{
required: true,
pattern: /^(?!\s*$).+/,
message: `Please Enter ${AppType === 'Wholesale' ? 'Seller' : 'Supplier'} Name`,
},
{
validator: async (_, value) => {
await validateSafeInput(value);
if (value?.length > 30) {
return Promise.reject(
'Supplier Name cannot exceeds more than 30 chars'
);
}
return Promise.resolve();
},
},
]}
>
<InputField
label={
<label class="required">
{AppType === 'Wholesale'
? 'Seller Name'
: 'Supplier Name'}
</label>
}
autocomplete="off"
isOnChange={formType == 'edit' ? true : false}
disabled={
formType === 'edit' &&
formRef?.current?.getFieldsValue()?.SuppName === 'Self'
}
/>
</Form.Item>
<Form.Item
name="SuppGSTIN"
rules={[
{
pattern:
/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Za-z]{1}[Z]{1}[0-9A-Za-z]{1}$/,
message: 'Enter a valid GSTIN',
},
]}
>
<InputField
style={{ textTransform: 'uppercase' }}
autoComplete="off"
label="GST No"
maxLength={15}
autocapitalize="on"
isOnChange={formType == 'edit' ? true : false}
/>
</Form.Item>
<Form.Item
name="SuppMobile"
rules={[
{ validator: validatePhoneNumber }
]}
>
<InputField
label={<label>Mobile Number</label>}
maxLength="10"
autocomplete="off"
isOnChange={formType == 'edit' ? true : false}
inputMode="numeric"
onInput={(e) =>
(e.target.value = e.target.value.replace(/[^0-9]/g, ''))
}
/>
</Form.Item>
<Form.Item
name="SuppEmail"
rules={[{ validator: validateEmail }]}
>
<InputField
label={<label>MailId</label>}
autocomplete="off"
isOnChange={formType == 'edit' ? true : false}
/>
</Form.Item>
<Form.Item
name="SuppPOC"
rules={[
{
pattern: /^(?!\s*$).+/,
message: 'Please Enter Point of Contact Name',
},
{
validator: async (_, value) => {
await validateSafeInput(value);
if (value?.length > 30) {
return Promise.reject(
'Point of Contact cannot exceeds more than 30 chars'
);
}
return Promise.resolve();
},
},
]}
>
<InputField
label={<label class="">Point of Contact</label>}
autocomplete="off"
isOnChange={formType == 'edit' ? true : false}
/>
</Form.Item>
<Form.Item
name="SuppPOCMobile"
rules={[
{ validator: validatePhoneNumber }
]}
>
<InputField
label={<label class="">POC Mobile Number</label>}
autocomplete="off"
maxLength="10"
isOnChange={formType == 'edit' ? true : false}
/>
</Form.Item>
<Form.Item
name="SuppPOCEmail"
rules={[{ validator: validateEmail }]}
>
<InputField
label={<label class="">POC MailId</label>}
autocomplete="off"
isOnChange={formType == 'edit' ? true : false}
/>
</Form.Item>
<Form.Item
name="DeliveryPerformance"
rules={[
{
required: false,
message: 'Please Select DeliveryPerformance',
},
]}
>
<DropDowns
options={deliveryPerformanceData?.map((option) => ({
value: option.ConfigId,
label: option.ConfigName,
}))}
label={<label>Delivery Performance</label>}
className="field-DropDown"
id="DeliveryPerformance"
onChangeFunction={(e) =>
handleDeliveryPerformanceChange(e)
}
isOnChange={formType == 'edit' ? true : false}
valueData={Delivery}
/>
</Form.Item>
<Form.Item
name="DiscountLevel"
rules={[
{
required: false,
message: 'Please Select DiscountLevel',
},
]}
>
<DropDowns
options={DiscountData?.map((option) => ({
value: option.ConfigId,
label: option.ConfigName,
}))}
label={<label>Discount Level</label>}
className="field-DropDown"
id="DiscountLevel"
onChangeFunction={(e) => handleDiscountLevelChange(e)}
isOnChange={formType == 'edit' ? true : false}
valueData={DicountValue}
/>
</Form.Item>
<Form.Item
name="QualityofSupp"
rules={[
{
required: false,
message: 'Please Select QualityofSupp',
},
]}
>
<DropDowns
options={QualityData?.map((option) => ({
value: option.ConfigId,
label: option.ConfigName,
}))}
label={<label>Quality of Supplier</label>}
className="field-DropDown"
id="QualityofSupp"
onChangeFunction={(e) => handleQualityofSuppChange(e)}
isOnChange={formType == 'edit' ? true : false}
valueData={QualityValue}
/>
</Form.Item>
</div>
<div className="formAddressDiv">
<p> Address Details</p>
</div>
<div className="subinputForm">
<div>
<Form.Item
name="Address1"
rules={[
{
// required: formType == "edit" ? false : true,
pattern: /^(?!\s*$).+/,
message: 'Please Enter Address1',
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
autoComplete="off"
label={<label>Address Line1</label>}
isOnChange={editstate?.Address1 ? true : false}
/>
</Form.Item>
<Form.Item
name="Address2"
rules={[
{
pattern: /^(?!\s*$).+/,
message: 'Please Enter Address2',
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
autoComplete="off"
label="Address Line2"
isOnChange={editstate?.Address2 ? true : false}
/>
</Form.Item>
<Form.Item
name="Zip"
rules={[
{
pattern: /^(?!\s*$).+/,
message: 'Please Enter Zipcode',
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
autoComplete="off"
label={<label>Zipcode</label>}
maxLength="6"
onKeyPress={(event) => {
// Allow only numbers and prevent any other input
if (!/[0-9]/.test(event.key)) {
event.preventDefault();
}
}}
isOnChange={
editstate?.Zip || editstate?.Zip == 0 ? true : false
}
onChange={pinCodeChange}
/>
</Form.Item>
{zipCodeData ? (
<>
<Form.Item
name="City"
rules={[
{
required: true,
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
disabled={true}
isOnChange={true}
label="City"
/>
</Form.Item>
<Form.Item
name="Dist"
rules={[
{
required: true,
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
disabled={true}
isOnChange={true}
label="District"
/>
</Form.Item>
<Form.Item
name="State"
rules={[
{
required: true,
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
disabled={true}
isOnChange={true}
label="State"
/>
</Form.Item>
</>
) : (
''
)}
<Form.Item
name="Latitude"
rules={[
{
pattern: /^(?!\s*$).+/,
message: 'Please Enter Latitude',
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
label="Latitude"
isOnChange={
SelectedLatitude ||
editstate?.Latitude ||
editstate?.Latitude == 0
? true
: false
}
autoComplete="off"
/>
</Form.Item>
<Form.Item
name="Longitude"
rules={[
{
pattern: /^(?!\s*$).+/,
message: 'Please Enter Longitude',
},
{
validator: async (_, value) => {
await validateSafeInput(value); // To block HTML tags & SQL keywords
return Promise.resolve();
},
},
]}
>
<InputField
label="Longitude"
isOnChange={
SelectedLongitude ||
editstate?.Longitude ||
editstate?.Longitude == 0
? true
: false
}
autoComplete="off"
/>
</Form.Item>
</div>
<div className="MapDiv">
<MapView
onMarkerClick={onMarkerClick}
prevlca={
editstate
? {
lat: editstate.Latitude,
lng: editstate.Longitude,
}
: null
}
/>
</div>
</div>
</div>
<div className="submitButton">
<Buttons
buttonText="SUBMIT"
color="901D77"
icon={<ArrowRightOutlined />}
// handleSubmit={handleSubmit}
/>
</div>
</Form>
</div>
</div>
</div>
</div>
);
};
export default SupplierForm;