perf: add contact phone number in invoice header (#3427)

This commit is contained in:
papapatrick
2024-12-19 14:01:07 +08:00
committed by GitHub
parent ce2e926d76
commit 1f4e5f6d71
8 changed files with 67 additions and 21 deletions

View File

@@ -97,6 +97,7 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
bankName: '',
bankAccount: '',
needSpecialInvoice: false,
contactPhone: '',
emailAddress: ''
}
});
@@ -117,7 +118,7 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
isOpen={true}
isCentered
iconSrc="/imgs/modal/invoice.svg"
minHeight={'42.25rem'}
minHeight={isOpenSettleModal ? '46.4rem' : '42.25rem'}
w={'43rem'}
onClose={onClose}
isLoading={isLoading}
@@ -235,7 +236,7 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
</Box>
<MyBox isLoading={isLoadingHeader}>
<Flex justify={'center'}>
<InvoiceHeaderSingleForm inputForm={inputForm} />
<InvoiceHeaderSingleForm inputForm={inputForm} required />
</Flex>
</MyBox>
<Flex

View File

@@ -9,9 +9,11 @@ import { UseFormReturn, useForm } from 'react-hook-form';
import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
export const InvoiceHeaderSingleForm = ({
inputForm
inputForm,
required = false
}: {
inputForm: UseFormReturn<TeamInvoiceHeaderType, any>;
required?: boolean;
}) => {
const { t } = useTranslation();
@@ -38,11 +40,11 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required>{t('account_bill:organization_name')}</FormLabel>
<FormLabel required={required}>{t('account_bill:organization_name')}</FormLabel>
<Input
{...styles}
placeholder={t('account_bill:organization_name')}
{...register('teamName', { required: true })}
{...register('teamName', { required })}
/>
</Flex>
<Flex
@@ -50,11 +52,14 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required>{t('account_bill:unit_code')}</FormLabel>
<FormLabel required={required}>{t('account_bill:unit_code')}</FormLabel>
<Input
{...styles}
placeholder={t('account_bill:unit_code')}
{...register('unifiedCreditCode', { required: true })}
{...register('unifiedCreditCode', {
required,
pattern: { value: /^[A-Z0-9]{18}$/, message: t('account_bill:unit_code_void') }
})}
/>
</Flex>
<Flex
@@ -62,11 +67,13 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required={!!needSpecialInvoice}>{t('account_bill:company_address')}</FormLabel>
<FormLabel required={!!needSpecialInvoice && required}>
{t('account_bill:company_address')}
</FormLabel>
<Input
{...styles}
placeholder={t('account_bill:company_address')}
{...register('companyAddress', { required: !!needSpecialInvoice })}
{...register('companyAddress', { required: !!needSpecialInvoice && required })}
/>
</Flex>
<Flex
@@ -74,11 +81,13 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required={!!needSpecialInvoice}>{t('account_bill:company_phone')}</FormLabel>
<FormLabel required={!!needSpecialInvoice && required}>
{t('account_bill:company_phone')}
</FormLabel>
<Input
{...styles}
placeholder={t('account_bill:company_phone')}
{...register('companyPhone', { required: !!needSpecialInvoice })}
{...register('companyPhone', { required: !!needSpecialInvoice && required })}
/>
</Flex>
<Flex
@@ -86,11 +95,13 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required={!!needSpecialInvoice}>{t('account_bill:bank_name')}</FormLabel>
<FormLabel required={!!needSpecialInvoice && required}>
{t('account_bill:bank_name')}
</FormLabel>
<Input
{...styles}
placeholder={t('account_bill:bank_name')}
{...register('bankName', { required: !!needSpecialInvoice })}
{...register('bankName', { required: !!needSpecialInvoice && required })}
/>
</Flex>
<Flex
@@ -98,11 +109,13 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required={!!needSpecialInvoice}>{t('account_bill:bank_account')}</FormLabel>
<FormLabel required={!!needSpecialInvoice && required}>
{t('account_bill:bank_account')}
</FormLabel>
<Input
{...styles}
placeholder={t('account_bill:bank_account')}
{...register('bankAccount', { required: !!needSpecialInvoice })}
{...register('bankAccount', { required: !!needSpecialInvoice && required })}
/>
</Flex>
<Flex
@@ -110,7 +123,7 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required>{t('account_bill:need_special_invoice')}</FormLabel>
<FormLabel required={required}>{t('account_bill:need_special_invoice')}</FormLabel>
{/* @ts-ignore */}
<RadioGroup
value={`${needSpecialInvoice}`}
@@ -137,12 +150,31 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required>{t('account_bill:email_address')}</FormLabel>
<FormLabel required={required}>{t('account_bill:contact_phone')}</FormLabel>
<Input
{...styles}
placeholder={t('account_bill:contact_phone')}
{...register('contactPhone', {
required,
pattern: {
value:
/^(?:\+?\d{1,3}[- ]?)?(?:\(\d{1,4}\)|\d{1,4})?[- ]?\d{1,4}[- ]?\d{1,4}[- ]?\d{1,9}$/,
message: t('account_bill:contact_phone_void')
}
})}
/>
</Flex>
<Flex
justify={'space-between'}
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required={required}>{t('account_bill:email_address')}</FormLabel>
<Input
{...styles}
placeholder={t('account_bill:email_address')}
{...register('emailAddress', {
required: true,
required,
pattern: {
value: /(^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$)/,
message: t('user:password.email_phone_error')
@@ -165,7 +197,8 @@ const InvoiceHeaderForm = () => {
bankName: '',
bankAccount: '',
needSpecialInvoice: false,
emailAddress: ''
emailAddress: '',
contactPhone: ''
}
});

View File

@@ -163,6 +163,7 @@ function InvoiceDetailModal({
label={t('account_bill:need_special_invoice')}
value={invoice.needSpecialInvoice ? t('account_bill:yes') : t('account_bill:no')}
/>
<LabelItem label={t('account_bill:contact_phone')} value={invoice.contactPhone} />
<LabelItem label={t('account_bill:email_address')} value={invoice.emailAddress} />
</Flex>
</ModalBody>