// ** MUI Imports import Drawer from '@mui/material/Drawer' import Button from '@mui/material/Button' import Select from '@mui/material/Select' import MenuItem from '@mui/material/MenuItem' import { styled } from '@mui/material/styles' import TextField from '@mui/material/TextField' import InputLabel from '@mui/material/InputLabel' import IconButton from '@mui/material/IconButton' import Box, { BoxProps } from '@mui/material/Box' import Typography from '@mui/material/Typography' import FormControl from '@mui/material/FormControl' import FormHelperText from '@mui/material/FormHelperText' // ** Third Party Imports import * as yup from 'yup' import { yupResolver } from '@hookform/resolvers/yup' import { useForm, Controller } from 'react-hook-form' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Types import { InvoiceClientType } from 'src/types/apps/invoiceTypes' interface Props { open: boolean toggle: () => void clients: InvoiceClientType[] | undefined setClients: (val: InvoiceClientType[]) => void setSelectedClient: (val: InvoiceClientType) => void } interface FormData { name: string email: string company: string address: string country: string contact: string } const Header = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', padding: theme.spacing(3, 4), justifyContent: 'space-between', backgroundColor: theme.palette.background.default })) const schema = yup.object().shape({ name: yup.string().required(), email: yup.string().email().required(), company: yup.string().required(), contact: yup.string().min(10).max(10).required(), address: yup.string().max(120).required() }) const AddNewCustomer = ({ open, toggle, setSelectedClient, clients, setClients }: Props) => { const { reset, control, handleSubmit, formState: { errors } } = useForm({ resolver: yupResolver(schema), defaultValues: { name: '', email: '', company: '', address: '', country: 'USA', contact: '' } }) const onSubmit = (data: FormData) => { const { address, company, contact, country, email, name } = data const finalData = { name, country, contact, company, address, companyEmail: email } if (clients !== undefined) { setClients([...clients, finalData]) } setSelectedClient(finalData) toggle() reset({ name: '', email: '', company: '', address: '', country: 'USA', contact: '' }) } const handleDrawerClose = () => { toggle() reset({ name: '', email: '', company: '', address: '', country: 'USA', contact: '' }) } return (
Add New Customer
( )} /> {errors.name && ( {errors.name.message} )} ( )} /> {errors.company && ( {errors.company.message} )} ( )} /> {errors.email && ( {errors.email.message} )} ( )} /> {errors.address && ( {errors.address.message} )} Country ( )} /> {errors.country && ( {errors.country.message} )} ( )} /> {errors.contact && ( {errors.contact.message} )}
) } export default AddNewCustomer