Notes

import React, {
Fragment,
useEffect,
useState,
useContext,
useRef,
} from "react";
import { useNavigate } from "react-router-dom";
import { AlertColor, FormLabel, Icon } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import CssBaseline from "@mui/material/CssBaseline";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import TextField from "@mui/material/TextField";
import MuiButton from "@mui/material/Button";
import { Button } from "primereact/button";
import Autocomplete from "@mui/material/Autocomplete";
import LoadingButton from "@mui/lab/LoadingButton";
import CircularProgress from "@mui/material/CircularProgress";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { Stack } from "@mui/material";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import AuthContext from "../../context/auth/AuthContext";
import CustomerContext from "../../context/customer/CustomerContext";
import FilingMasterContext from "../../context/filing-master/FilingMasterContext";
import { Customer } from "../../types/customer";
import states from "../../data/StateLookup.json";
import { juristictionLookup } from "../../data/constants";
import { BusinessCategory } from "../../types/FilingMaster";
import MultiSelect from "../common/MultiSelect";
import { styled } from "@mui/material/styles";
import Toolbar from "@mui/material/Toolbar";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import { Dialog } from "primereact/dialog";
import { useFormik } from "formik";
import * as yup from "yup";
import _ from "lodash";
// import { transform } from "lodash";
// import { ConfirmDialog, confirmDialog } from "primereact/confirmdialog";
// import { Toast } from "primereact/toast";
// import AddressForm from "./AddressForm";
// import PaymentForm from "./PaymentForm";
// import Review from "./Review";
// const categories = [
// { id: 1, category: "Telecom" },
// { id: 2, category: "Brodband" },
// { id: 3, category: "Wireless" },
// { id: 4, category: "Mobile" },
// ];
// function Copyright() {

// return (
// <Typography variant='body2' color='text.secondary' align='center'>
// {"Copyright © "}
// <Link color='inherit' href='https://mui.com/'>
// Your Website
// </Link>{" "}
// {new Date().getFullYear()}
// {"."}
// </Typography>
// );
// }

// const handleClickOpenServiceArea = () => {
// console.log("##Project:", projectObj.ID);
// if (projectObj.ID) setOpenServiceArea(true);
// else {
// setShowAlertMessage({
// message: "Please create the project prior to configuring Service Areas",
// title: "Info",
// handleClose: { handleCloseAlert },
// });
// setShowAlert(true);
// }
interface IClient {
customerId: number;
label: string;
}

const theme = createTheme();

const validationSchema = yup.object({
customerName: yup
.string()
.min(2, "Name is too Short!")
.max(50, "Name is too Long!")
.required("Client Name is required"),
email: yup
.string()
.email("Enter a valid email")
.required("Email is required"),
phone: yup.string(),
zipCode: yup
.string()
.required("Zip code is required")
.matches(/^[0-9]{5}(?:-[0-9]{4})?$/, "Invalid postal code"),

// .matches(/^(((d{3}) ?)|(d{3}-))?d{3}-d{4}$/, {
// message: "Invalid phone number",
// excludeEmptyString: false,
// }),
});

export default function CustomerForm() {
const authContext = useContext(AuthContext);
const customerContext = useContext(CustomerContext);
const filingMasterContext = useContext(FilingMasterContext);
const { authUserId } = authContext;
const {
createCustomer,
customers,
customerLoaded,
customerLoading,
createCustomerBusinessCategories,
setCurrentCustomer,
selectedCustomer,
updateCustomer,
} = customerContext;
const { getBusinessCategories } = filingMasterContext;
const [alertMessage, setAlertMessage] = React.useState("");
// const [alertMessage, setAlertMessage] = React.useState<{
// message: string;
// type: AlertColor;
// }>({ message: "", type: "success" });
// const { showAlert, showSnackbar } = alertContext;
const [categories, setCategories] = useState<BusinessCategory[]>([]);
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
const [initCategories, setInitCategories] = useState<string[]>([]);
const [formTitle, setFormTitle] = useState<string>("ADD NEW CLIENT");
const [actionLabel, setActionLabel] = useState<string>("ADD");
const fontStyle = {
fontWeight: "regular",
fontSize: "13px",

color: "#424242",
};
// const toast = useRef(null);
const footerContent = (
<div>
<Button
label='OK'
icon='pi pi-check'
onClick={() => closeAlert()}
autoFocus
/>
</div>
);
const initForm = {
customerId: 0,
customerName: "",
address: "",
city: "",
state: "",
zipCode: "",
taxNumber: "",
phone: "",
email: "",
juristiction: "",
notes: "",
jsI_POC: "",
customer_POC: "",
businessCatergoryId: 0,
parentCustomerId: 0,
// createDate: null,
// createUser: null,
// updateDate: null,
// updateUser: null,
};
const [showAlert, setShowAlert] = React.useState(false);
const [customer, setCustomer] = React.useState<Customer>(initForm);
const [clients, setClients] = React.useState<IClient[]>([]);
const [parentClient, setParentClient] = React.useState<IClient | null>(null);
const [selectedParentName, setSelectedParentName] =
React.useState<string>("");
const [initParentClient, setInitParentClient] =
React.useState<IClient | null>(null);
const [initParentName, setInitParentName] = React.useState<string>("");
const [clientType, setClientType] = React.useState<string>("Parent");
const navigate = useNavigate();
const searchRef = useRef<HTMLInputElement>(null);
const backToHome = () => {
navigate("/");
};

const onChange = async (e: React.ChangeEvent<any>) => {
// await hasTokenExpired();
// let value = "";
// if (e.target.name === "groupName") {
// getGroupId();
// }
console.log(`Setting [${e.target.name}]: ${e.target.value}`);
setCustomer((cust) => ({ ...cust, [e.target.name]: e.target.value }));
};

const handleCategoryChange = (event: SelectChangeEvent) => {
const {
target: { value },
} = event;
setCustomer((cust) => ({ ...cust, businessCatergoryId: parseInt(value) }));
};

const handleJurisdictionChange = (event: SelectChangeEvent) => {
const {
target: { value },
} = event;
setCustomer((cust) => ({ ...cust, juristiction: value }));
};

const handleStateChange = (event: SelectChangeEvent) => {
const {
target: { value },
} = event;
setCustomer((cust) => ({ ...cust, state: value }));
};

const submitForm = async () => {
console.log(`Submitting Add Customer: [${JSON.stringify(customer)}]`);
const _parentCustomerId =
parentClient && parentClient.customerId ? parentClient.customerId : 0;
try {
if (createCustomer) {
const _cust: any = {
...formik.values,
customerId: customer.customerId,
parentCustomerId: _parentCustomerId,
};
// delete _cust.businessCatergoryId;
console.log(`Submitting Add Customer2: ${_cust}`);
let res: Customer;
if (customer.customerId && customer.customerId > 0 && updateCustomer) {
_cust.updateDate = new Date();
_cust.updateUser = authUserId;
// delete _cust.businessCatergoryId;
// delete _cust.notes;
// delete _cust.poc;
res = await updateCustomer(_cust);

if (res) {
//Find what is changed in categories
const _delCats = _.difference(initCategories, selectedCategories);

let _addCats = _.difference(selectedCategories, initCategories);

if (_delCats.length > 0) {
console.log("&&& DEL CATS", _delCats);
}
if (_addCats.length > 0) {
console.log("&&& ADD CATS", _addCats);
}

if (_delCats.length === 0 || _addCats.length === 0) {
console.log("&&& NO Change to categories");
}

const payload = selectedCategories.map((item) => ({
customerId: res.customerId,
businessCategoryId: item,
}));
// let res1 = null;
// if (createCustomerBusinessCategories) {
// res1 = await createCustomerBusinessCategories(payload);
// }
// if (res1) {
setAlertMessage(
`Successfully Updated Client:${formik.values.customerName}`
);
setShowAlert(true);
// navigate("/");
// } else {
// setAlertMessage(`Unexpected Error occured while adding Client`);
// setShowAlert(true);
// }
} else {
setAlertMessage(`Unexpected Error occured while updating Client`);
setShowAlert(true);
}
} else {
_cust.createDate = new Date();
_cust.createUser = authUserId;
res = await createCustomer(_cust);

if (res) {
const payload = selectedCategories.map((item) => ({
customerId: res.customerId,
businessCategoryId: item,
}));
let res1 = null;
if (createCustomerBusinessCategories) {
res1 = await createCustomerBusinessCategories(payload);
}
if (res1) {
setAlertMessage(
`Successfully Added Client:${formik.values.customerName}`
);
setShowAlert(true);
// navigate("/");
} else {
setAlertMessage(`Unexpected Error occured while adding Client`);
setShowAlert(true);
}
} else {
setAlertMessage(`Unexpected Error occured while adding Client`);
setShowAlert(true);
}
}
}
} catch (error) {}
};

const handleCategoryChanges = (
values: string[],
keys: any,
action: string
) => {
console.log("@@Changed BusinessCategories:", values);
console.log("@@Changed BusinessCategories Action:", action);
setSelectedCategories((old) => values);
formik.setFieldValue("businessCategoryId", selectedCategories, false);
};

const fetchBusinessCategories = async () => {
console.log("@@Fetch BusinessCategories:", getBusinessCategories);
if (getBusinessCategories) {
console.log("@@Fetch BusinessCategories:");
try {
const catList = await getBusinessCategories();
console.log("@@BusinessCategories:", catList);
setCategories(() => catList);
} catch (error) {
console.log("@@Error:", error);
}
}
};

useEffect(() => {
if (
categories &&
selectedCustomer?.businessCategory &&
selectedCustomer?.businessCategory.length > 0
) {
const custBusinessCatergory = selectedCustomer?.businessCategory.map(
(item) => item.businessCategoryId + ""
) as string[];
console.log("Business cats Custs:", custBusinessCatergory);
setSelectedCategories(() => custBusinessCatergory);
setInitCategories(() => custBusinessCatergory);
}
console.log("@@BusinessCategories Reeeeloaded:", categories);
//eslint-disable-next-line
}, [categories]);

useEffect(() => {
// toggleDrawer(props.dockAt, props.show);
if (selectedCustomer !== null) {
selectedCustomer && setCustomer(selectedCustomer);
const _cust = {
customerId:
selectedCustomer && selectedCustomer.customerId
? selectedCustomer.customerId
: 0,
customerName:
selectedCustomer && selectedCustomer.customerName
? selectedCustomer.customerName
: "",
address:
selectedCustomer && selectedCustomer.address
? selectedCustomer.address
: "",
city:
selectedCustomer && selectedCustomer.city
? selectedCustomer.city
: "",
state:
selectedCustomer && selectedCustomer.state
? selectedCustomer.state
: "",
zipCode:
selectedCustomer && selectedCustomer.zipCode
? selectedCustomer.zipCode
: "",
taxNumber:
selectedCustomer && selectedCustomer.taxNumber
? selectedCustomer.taxNumber
: "",
phone:
selectedCustomer && selectedCustomer.phone
? selectedCustomer.phone
: "",
email:
selectedCustomer && selectedCustomer.email
? selectedCustomer.email
: "",
juristiction:
selectedCustomer && selectedCustomer.juristiction
? selectedCustomer.juristiction
: "",
notes:
selectedCustomer && selectedCustomer.notes
? selectedCustomer.notes
: "",
customer_POC:
selectedCustomer && selectedCustomer.customer_POC
? selectedCustomer.customer_POC
: "",
jsI_POC:
selectedCustomer && selectedCustomer.jsI_POC
? selectedCustomer.jsI_POC
: "",
businessCatergoryId: 0,
parentCustomerId:
selectedCustomer &&
selectedCustomer.parentCustomer &&
selectedCustomer.parentCustomer.customerId
? selectedCustomer.parentCustomer.customerId
: 0,
};

// if (
// selectedCustomer?.businessCategory &&
// selectedCustomer?.businessCategory.length > 0
// ) {
// const custBusinessCatergory = selectedCustomer?.businessCategory.map(
// (item) => item.businessCategoryId + ""
// ) as string[];
// console.log("Business cats Custs:", custBusinessCatergory);
// setSelectedCategories(custBusinessCatergory);
// }
selectedCustomer && formik.setValues(_cust);
setFormTitle("EDIT CLIENT");
setActionLabel("Save");
console.log("Parent Custs:", selectedCustomer?.parentCustomer);
if (selectedCustomer?.parentCustomer) {
const label = selectedCustomer?.parentCustomer.customerName
? selectedCustomer?.parentCustomer.customerName
: "";
const customerId = selectedCustomer?.parentCustomer.customerId
? selectedCustomer?.parentCustomer.customerId
: 0;
setClientType("Child");
setInitParentClient({ label, customerId });
setInitParentName(label);
}
}

fetchBusinessCategories();
if (customers) {
console.log("ORIG Custs:", customers);
const _clients = customers
.filter((cust) => cust.parentCustomer === null)
.map((client) => ({
customerId: client.customerId ? client.customerId : 0,
label: client.customerName ? client.customerName : "",
}));
// _clients.push({ customerId: 0, label: "" });
console.log("Parent Custs:", _clients);
setClients(() => _clients);

// if (
// categories &&
// selectedCustomer?.businessCategory &&
// selectedCustomer?.businessCategory.length > 0
// ) {
// const custBusinessCatergory = selectedCustomer?.businessCategory.map(
// (item) => item.businessCategoryId + ""
// ) as string[];
// console.log("Business cats Custs:", custBusinessCatergory);
// setSelectedCategories(() => custBusinessCatergory);
// }
}
return () => {
if (setCurrentCustomer) setCurrentCustomer(null);
};
//eslint-disable-next-line
}, []);

// useEffect(() => {
// if (customer && customer.customerID) {
// setFormTitle("EDIT CLIENT");
// setActionLabel("Save");
// }
// //eslint-disable-next-line
// }, [customer]);

useEffect(() => {
// if (clientType && clientType === "Parent") {
if (initParentClient && initParentName) {
if (searchRef.current) {
console.log("SELECTED Input:", searchRef.current?.value);
searchRef.current.value = initParentName;
}
console.log("Clering SELECTED Parent:", parentClient);
setParentClient(() => initParentClient);
setSelectedParentName(() => initParentName);
} else {
if (searchRef.current) {
console.log("SELECTED Input:", searchRef.current?.value);
searchRef.current.value = "";
}
console.log("Clering SELECTED Parent:", parentClient);
setParentClient(() => null);
setSelectedParentName(() => "");
}
// }
console.log("SELECTED Parent1:", parentClient);
console.log("SELECTED Parent2:", selectedParentName);
//eslint-disable-next-line
}, [clientType]);

const closeAlert = () => {
setShowAlert(false);
navigate("/");
};

const formik = useFormik({
initialValues: initForm,
validationSchema: validationSchema,
onSubmit: (values) => {
// alert(JSON.stringify(values, null, 2));
submitForm();
},
});

const handleParentChange = (
event: any,
newValue: IClient | null,
reason: string
) => {
console.log("SELECTED Parent:", newValue);
setParentClient(() => newValue);
setSelectedParentName(newValue?.label ? newValue?.label : "");
// setValue(newValue);
};

const handleTypeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = (event.target as HTMLInputElement).value;
// if (value === "Parent") {
// console.log("SELECTED Parent type:", value);
// setParentClient(() => undefined);
// }
setClientType(value);
};

return (
<ThemeProvider theme={theme}>
{/* {showAlert && (
<Alert message={alertMessage?.message} type={alertMessage?.type} />
)} */}
{/* <Toast ref={toast} />
<ConfirmDialog /> */}
<Dialog
header='Info'
visible={showAlert}
// style={{ width: "30vw" }}
onHide={() => closeAlert()}
footer={footerContent}
>
<p className='m-0'>{alertMessage}</p>
</Dialog>
<CssBaseline />

<Box sx={{ flexGrow: 1 }}>
<Stack>
<AppBar position='static' color='inherit'>
<Toolbar>
<Stack
direction='row'
justifyContent='flex-start'
alignItems='center'
spacing={2}
>
<IconButton
className='nav-bar__logo__img'
sx={{ display: { xs: "none", md: "flex" } }}
onClick={backToHome}
>
<Box sx={{ m: 2 }}>
<ArrowBackIosNewIcon fontSize='medium' sx={{ mt: 1 }} />
</Box>
</IconButton>
<Box sx={{ m: 2 }}>
<Typography
variant='h6'
color='inherit'
noWrap
sx={{
fontWeight: "medium",
fontSize: "16px",
transform: "upperCase",
color: "#424242",
}}
>
{formTitle}
</Typography>
</Box>
</Stack>
</Toolbar>
</AppBar>
<Container component='main' sx={{ mb: 4, marginTop: "64px" }}>
<React.Fragment>
<form onSubmit={formik.handleSubmit} noValidate>
<Grid
container
direction='row'
justifyContent='flex-start'
alignItems='flex-start'
spacing={3}
>
<Grid xs={12} md={4}>
<FormControl sx={{ width: "100%" }}>
<Stack
direction='row'
justifyContent='flex-start'
alignItems='center'
spacing={5}
>
<Typography sx={fontStyle}>Client Type:</Typography>
<RadioGroup
row
aria-labelledby='demo-radio-buttons-group-label'
defaultValue='Parent'
name='radio-buttons-group'
sx={{ justifyContent: "space-between" }}
value={clientType}
onChange={handleTypeChange}
>
<FormControlLabel
value='Parent'
control={<Radio />}
label='Parent'
sx={fontStyle}
/>
<FormControlLabel
value='Child'
control={<Radio />}
label='Child'
sx={fontStyle}
/>
</RadioGroup>
</Stack>
</FormControl>
</Grid>
<Grid xs={12} md={4}>
{/* <Typography sx={fontStyle}>
Select Parent Customer
</Typography> */}
<Autocomplete
id='parentCustomerId'
sx={{ minWidth: "20rem" }}
value={parentClient}
onChange={handleParentChange}
options={clients.map((option) => option)}
inputValue={selectedParentName}
// isOptionEqualToValue={(option, value) =>
// option.customerId === value.customerId
// }
disabled={clientType === "Parent"}
renderInput={(params) => (
<TextField
{...params}
label='Select Parent Client'
InputProps={{
...params.InputProps,
// type: "search",
}}
inputRef={searchRef}
/>
)}
/>
</Grid>
{/* <Grid></Grid> */}
</Grid>

<Grid container spacing={3} sx={{ mt: 3 }}>
<Grid xs={12} sm={6} lg={4}>
<Typography sx={fontStyle}>Client Name</Typography>
<TextField
required
id='customerName'
name='customerName'
label='Client Name'
placeholder='Enter client name'
fullWidth
autoComplete='CustomerName'
variant='filled'
value={formik.values.customerName}
onChange={formik.handleChange}
error={
formik.touched.customerName &&
Boolean(formik.errors.customerName)
}
helperText={
formik.touched.customerName &&
formik.errors.customerName
}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
<FormControl fullWidth variant='filled'>
{/* <InputLabel id='customer-category-label'>
Customer Category
</InputLabel> */}
<Typography sx={fontStyle}>Business Category</Typography>
<MultiSelect
inputs={categories.map((item) => ({
name: item.businessCategoryName
? item.businessCategoryName
: "",
value: item.businessCategoryId
? item.businessCategoryId + ""
: "",
}))}
values={selectedCategories}
initValues={initCategories}
updateSelection={handleCategoryChanges}
/>
</FormControl>
</Grid>
<Grid xs={12} sm={6} lg={4}>
<Typography sx={fontStyle}>Tax Number</Typography>

<TextField
id='taxNumber'
name='taxNumber'
label='Tax Number'
placeholder='Enter tax number'
fullWidth
autoComplete='TaxNumber'
variant='filled'
value={formik.values.taxNumber}
onChange={formik.handleChange}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
<Typography sx={fontStyle}>Phone Number</Typography>

<TextField
id='phone'
name='phone'
label='Phone Number'
placeholder='Enter Phone number'
fullWidth
autoComplete='phone'
variant='filled'
value={formik.values.phone}
onChange={formik.handleChange}
error={
formik.touched.phone && Boolean(formik.errors.phone)
}
helperText={formik.touched.phone && formik.errors.phone}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
<Typography sx={fontStyle}>Email</Typography>

<TextField
required
id='email'
name='email'
label='Email'
placeholder='Enter customer email'
fullWidth
autoComplete='customer-email'
variant='filled'
value={formik.values.email}
onChange={formik.handleChange}
error={
formik.touched.email && Boolean(formik.errors.email)
}
helperText={formik.touched.email && formik.errors.email}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
<Typography sx={fontStyle}>Jurisdiction</Typography>

<FormControl fullWidth variant='filled'>
<InputLabel id='jurisdiction-label'>
Jurisdiction
</InputLabel>
<Select
labelId='jurisdiction-label'
id='juristiction'
name='juristiction'
label='Jurisdiction'
value={formik.values.juristiction}
onChange={formik.handleChange}
error={
formik.touched.juristiction &&
Boolean(formik.errors.juristiction)
}
>
{juristictionLookup.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid xs={4}>
<Typography sx={fontStyle}>Client Contact</Typography>
<TextField
id='customer_POC'
name='customer_POC'
label='Client Contact'
fullWidth
variant='filled'
value={formik.values.customer_POC}
onChange={formik.handleChange}
/>
</Grid>
<Grid xs={4}>
<Typography sx={fontStyle}>JSI Contact</Typography>
<TextField
id='jsI_POC'
name='jsI_POC'
label='JSI Contact'
fullWidth
variant='filled'
value={formik.values.jsI_POC}
onChange={formik.handleChange}
/>
</Grid>
<Grid xs={4}>
<Typography sx={fontStyle}>Address</Typography>
<TextField
id='address'
name='address'
label='Address'
fullWidth
autoComplete='shipping address'
variant='filled'
value={formik.values.address}
onChange={formik.handleChange}
/>
</Grid>

<Grid xs={4}>
<Typography sx={fontStyle}>zip Code</Typography>
<TextField
required
id='zipCode'
name='zipCode'
label='Zip / Postal code'
fullWidth
autoComplete='shipping postal-code'
variant='filled'
value={formik.values.zipCode}
onChange={formik.handleChange}
error={
formik.touched.email && Boolean(formik.errors.zipCode)
}
helperText={formik.touched.email && formik.errors.zipCode}
/>
</Grid>

<Grid xs={12} sm={6} lg={4}>
<Typography sx={fontStyle}>City</Typography>
<TextField
id='city'
name='city'
label='City'
fullWidth
autoComplete='shipping address-city'
variant='filled'
value={formik.values.city}
onChange={formik.handleChange}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
<Typography sx={fontStyle}>State</Typography>
<FormControl fullWidth variant='filled'>
<InputLabel id='state-label'>State</InputLabel>
<Select
labelId='state-label'
id='state'
name='state'
value={formik.values.state}
onChange={formik.handleChange}
label='State'
>
{states.map((item) => (
<MenuItem key={item.code} value={item.code}>
{item.state}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>

<Grid xs={12}>
<Typography sx={fontStyle}>Notes</Typography>
<TextField
id='notes'
name='notes'
label='Notes'
multiline
fullWidth
minRows={3}
variant='filled'
value={formik.values.notes}
onChange={formik.handleChange}
/>
</Grid>
<Grid
xs={12}
sx={{
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
}}
>
<MuiButton
variant='text'
sx={{ margin: 1, padding: 1, color: "0000cc" }}
onClick={backToHome}
>
CANCEL
</MuiButton>
{/* <LoadingButton
variant='contained'
color='primary'
onClick={submitForm}
loading={customerLoading}
type='submit'
// disabled={!formIsValid}
sx={{ margin: 1, padding: 1 }}
loadingIndicator={
<CircularProgress color='inherit' size={16} />
}
>
ADD
</LoadingButton> */}
<MuiButton
variant='contained'
color='primary'
type='submit'
// disabled={!formIsValid}
sx={{ margin: 1, padding: 1 }}
>
{actionLabel}
</MuiButton>
</Grid>
</Grid>
</form>
</React.Fragment>
</Container>
</Stack>
</Box>
</ThemeProvider>
);
}