131 lines
4.0 KiB
TypeScript
131 lines
4.0 KiB
TypeScript
import { useFormContext } from 'react-hook-form';
|
|
import { useBoolean } from 'minimal-shared/hooks';
|
|
|
|
import Box from '@mui/material/Box';
|
|
import Stack from '@mui/material/Stack';
|
|
import Button from '@mui/material/Button';
|
|
import Divider from '@mui/material/Divider';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Typography from '@mui/material/Typography';
|
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
|
|
import { _addressBooks } from 'src/_mock';
|
|
|
|
import { Iconify } from 'src/components/iconify';
|
|
|
|
import { AddressListDialog } from '../address';
|
|
|
|
import type { NewInvoiceSchemaType } from './invoice-new-edit-form';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export function InvoiceNewEditAddress() {
|
|
const {
|
|
watch,
|
|
setValue,
|
|
formState: { errors },
|
|
} = useFormContext<NewInvoiceSchemaType>();
|
|
|
|
const mdUp = useMediaQuery((theme) => theme.breakpoints.up('md'));
|
|
|
|
const values = watch();
|
|
|
|
const addressTo = useBoolean();
|
|
const addressForm = useBoolean();
|
|
|
|
const { invoiceFrom, invoiceTo } = values;
|
|
|
|
return (
|
|
<>
|
|
<Stack
|
|
divider={
|
|
<Divider
|
|
flexItem
|
|
orientation={mdUp ? 'vertical' : 'horizontal'}
|
|
sx={{ borderStyle: 'dashed' }}
|
|
/>
|
|
}
|
|
sx={{ p: 3, gap: { xs: 3, md: 5 }, flexDirection: { xs: 'column', md: 'row' } }}
|
|
>
|
|
<Stack sx={{ width: 1 }}>
|
|
<Box sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
|
|
<Typography variant="h6" sx={{ color: 'text.disabled', flexGrow: 1 }}>
|
|
From:
|
|
</Typography>
|
|
|
|
<IconButton onClick={addressForm.onTrue}>
|
|
<Iconify icon="solar:pen-bold" />
|
|
</IconButton>
|
|
</Box>
|
|
|
|
<Stack spacing={1}>
|
|
<Typography variant="subtitle2">{invoiceFrom?.name}</Typography>
|
|
<Typography variant="body2">{invoiceFrom?.fullAddress}</Typography>
|
|
<Typography variant="body2"> {invoiceFrom?.phoneNumber}</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack sx={{ width: 1 }}>
|
|
<Box sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
|
|
<Typography variant="h6" sx={{ color: 'text.disabled', flexGrow: 1 }}>
|
|
To:
|
|
</Typography>
|
|
|
|
<IconButton onClick={addressTo.onTrue}>
|
|
<Iconify icon={invoiceTo ? 'solar:pen-bold' : 'mingcute:add-line'} />
|
|
</IconButton>
|
|
</Box>
|
|
|
|
{invoiceTo ? (
|
|
<Stack spacing={1}>
|
|
<Typography variant="subtitle2">{invoiceTo?.name}</Typography>
|
|
<Typography variant="body2">{invoiceTo?.fullAddress}</Typography>
|
|
<Typography variant="body2"> {invoiceTo?.phoneNumber}</Typography>
|
|
</Stack>
|
|
) : (
|
|
<Typography typography="caption" sx={{ color: 'error.main' }}>
|
|
{errors.invoiceTo?.message}
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<AddressListDialog
|
|
title="Customers"
|
|
open={addressForm.value}
|
|
onClose={addressForm.onFalse}
|
|
selected={(selectedId: string) => invoiceFrom?.id === selectedId}
|
|
onSelect={(address) => setValue('invoiceFrom', address)}
|
|
list={_addressBooks}
|
|
action={
|
|
<Button
|
|
size="small"
|
|
startIcon={<Iconify icon="mingcute:add-line" />}
|
|
sx={{ alignSelf: 'flex-end' }}
|
|
>
|
|
New
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<AddressListDialog
|
|
title="Customers"
|
|
open={addressTo.value}
|
|
onClose={addressTo.onFalse}
|
|
selected={(selectedId: string) => invoiceTo?.id === selectedId}
|
|
onSelect={(address) => setValue('invoiceTo', address)}
|
|
list={_addressBooks}
|
|
action={
|
|
<Button
|
|
size="small"
|
|
startIcon={<Iconify icon="mingcute:add-line" />}
|
|
sx={{ alignSelf: 'flex-end' }}
|
|
>
|
|
New
|
|
</Button>
|
|
}
|
|
/>
|
|
</>
|
|
);
|
|
}
|