@@ -8,6 +8,8 @@ import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Flex,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Table,
|
||||
TableContainer,
|
||||
Tbody,
|
||||
@@ -118,19 +120,69 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
|
||||
isOpen={true}
|
||||
isCentered
|
||||
iconSrc="/imgs/modal/invoice.svg"
|
||||
minHeight={isOpenSettleModal ? '46.4rem' : '42.25rem'}
|
||||
w={'43rem'}
|
||||
onClose={onClose}
|
||||
isLoading={isLoading}
|
||||
title={t('account_bill:support_wallet_apply_invoice')}
|
||||
>
|
||||
{!isOpenSettleModal ? (
|
||||
<Box px={['1.6rem', '3.25rem']} py={['1rem', '2rem']}>
|
||||
<Box fontWeight={500} fontSize={'1rem'} pb={'0.75rem'}>
|
||||
{t('account_bill:support_wallet_apply_invoice')}
|
||||
</Box>
|
||||
<Box h={'27.9rem'} overflow={'auto'}>
|
||||
<TableContainer>
|
||||
{isOpenSettleModal ? (
|
||||
<>
|
||||
<ModalBody>
|
||||
<Box w={'100%'} fontSize={'0.875rem'}>
|
||||
<Flex w={'100%'} justifyContent={'space-between'}>
|
||||
<Box>{t('account_bill:total_amount')}</Box>
|
||||
<Box>{t('account_bill:yuan', { amount: formatStorePrice2Read(totalPrice) })}</Box>
|
||||
</Flex>
|
||||
<Box w={'100%'} py={4}>
|
||||
<Divider showBorderBottom={false} />
|
||||
</Box>
|
||||
</Box>
|
||||
<MyBox isLoading={isLoadingHeader}>
|
||||
<Flex justify={'center'}>
|
||||
<InvoiceHeaderSingleForm inputForm={inputForm} required />
|
||||
</Flex>
|
||||
</MyBox>
|
||||
<Flex
|
||||
align={'center'}
|
||||
w={'19.8rem'}
|
||||
h={'1.75rem'}
|
||||
mt={4}
|
||||
px={'0.75rem'}
|
||||
py={'0.38rem'}
|
||||
bg={'blue.50'}
|
||||
borderRadius={'sm'}
|
||||
color={'blue.600'}
|
||||
>
|
||||
<MyIcon name="infoRounded" w={'14px'} h={'14px'} />
|
||||
<Box ml={2} fontSize={'0.6875rem'}>
|
||||
{t('account_bill:invoice_sending_info')}
|
||||
</Box>
|
||||
</Flex>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button variant={'outline'} mr={'0.75rem'} px="0" onClick={handleBack}>
|
||||
<Flex alignItems={'center'}>
|
||||
<Box px={'1.25rem'} py={'0.5rem'}>
|
||||
{t('account_bill:back')}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button isLoading={isSubmitting} px="0" onClick={inputForm.handleSubmit(onSubmitApply)}>
|
||||
<Flex alignItems={'center'}>
|
||||
<Box px={'1.25rem'} py={'0.5rem'}>
|
||||
{t('account_bill:confirm')}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ModalBody>
|
||||
<Box fontWeight={500} fontSize={'1rem'} pb={'0.75rem'}>
|
||||
{t('account_bill:support_wallet_apply_invoice')}
|
||||
</Box>
|
||||
<TableContainer minH={'50vh'}>
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
@@ -202,8 +254,8 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
|
||||
</Flex>
|
||||
)}
|
||||
</TableContainer>
|
||||
</Box>
|
||||
<Flex pt={'2.5rem'} justify={'flex-end'}>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
variant={'primary'}
|
||||
px="0"
|
||||
@@ -221,57 +273,8 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
|
||||
</Box>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
) : (
|
||||
<Box px={['1.6rem', '3.25rem']} py={['1rem', '2rem']}>
|
||||
<Box w={'100%'} fontSize={'0.875rem'}>
|
||||
<Flex w={'100%'} justifyContent={'space-between'}>
|
||||
<Box>{t('account_bill:support_wallet_amount')}</Box>
|
||||
<Box>{t('account_bill:yuan', { amount: formatStorePrice2Read(totalPrice) })}</Box>
|
||||
</Flex>
|
||||
<Box w={'100%'} py={4}>
|
||||
<Divider showBorderBottom={false} />
|
||||
</Box>
|
||||
</Box>
|
||||
<MyBox isLoading={isLoadingHeader}>
|
||||
<Flex justify={'center'}>
|
||||
<InvoiceHeaderSingleForm inputForm={inputForm} required />
|
||||
</Flex>
|
||||
</MyBox>
|
||||
<Flex
|
||||
align={'center'}
|
||||
w={'19.8rem'}
|
||||
h={'1.75rem'}
|
||||
mt={4}
|
||||
px={'0.75rem'}
|
||||
py={'0.38rem'}
|
||||
bg={'blue.50'}
|
||||
borderRadius={'sm'}
|
||||
color={'blue.600'}
|
||||
>
|
||||
<MyIcon name="infoRounded" w={'14px'} h={'14px'} />
|
||||
<Box ml={2} fontSize={'0.6875rem'}>
|
||||
{t('account_bill:invoice_sending_info')}
|
||||
</Box>
|
||||
</Flex>
|
||||
<Flex justify={'flex-end'} w={'100%'} pt={[3, 7]}>
|
||||
<Button variant={'outline'} mr={'0.75rem'} px="0" onClick={handleBack}>
|
||||
<Flex alignItems={'center'}>
|
||||
<Box px={'1.25rem'} py={'0.5rem'}>
|
||||
{t('account_bill:back')}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button isLoading={isSubmitting} px="0" onClick={inputForm.handleSubmit(onSubmitApply)}>
|
||||
<Flex alignItems={'center'}>
|
||||
<Box px={'1.25rem'} py={'0.5rem'}>
|
||||
{t('account_bill:confirm')}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
</ModalFooter>
|
||||
</>
|
||||
)}
|
||||
</MyModal>
|
||||
);
|
||||
|
||||
@@ -57,8 +57,7 @@ export const InvoiceHeaderSingleForm = ({
|
||||
{...styles}
|
||||
placeholder={t('account_bill:unit_code')}
|
||||
{...register('unifiedCreditCode', {
|
||||
required,
|
||||
pattern: { value: /^[A-Z0-9]{18}$/, message: t('account_bill:unit_code_void') }
|
||||
required
|
||||
})}
|
||||
/>
|
||||
</Flex>
|
||||
@@ -157,8 +156,7 @@ export const InvoiceHeaderSingleForm = ({
|
||||
{...register('contactPhone', {
|
||||
required,
|
||||
pattern: {
|
||||
value:
|
||||
/^(?:\+?\d{1,3}[- ]?)?(?:\(\d{1,4}\)|\d{1,4})?[- ]?\d{1,4}[- ]?\d{1,4}[- ]?\d{1,9}$/,
|
||||
value: /^[1]{1}[0-9]{10}$/,
|
||||
message: t('account_bill:contact_phone_void')
|
||||
}
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user