From 1f4e5f6d7175162c190dbbab50937b8735657551 Mon Sep 17 00:00:00 2001
From: papapatrick <109422393+Patrickill@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:01:07 +0800
Subject: [PATCH] perf: add contact phone number in invoice header (#3427)

---
 packages/global/support/user/team/type.d.ts   |  1 +
 packages/web/i18n/en/account_bill.json        |  5 +-
 packages/web/i18n/zh-CN/account_bill.json     |  3 +
 packages/web/i18n/zh-Hant/account_bill.json   |  5 +-
 packages/web/i18n/zh-Hant/common.json         |  1 +
 .../bill/components/ApplyInvoiceModal.tsx     |  5 +-
 .../bill/components/InvoiceHeaderForm.tsx     | 67 ++++++++++++++-----
 .../account/bill/components/InvoiceTable.tsx  |  1 +
 8 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/packages/global/support/user/team/type.d.ts b/packages/global/support/user/team/type.d.ts
index 61e518257..cce815cf0 100644
--- a/packages/global/support/user/team/type.d.ts
+++ b/packages/global/support/user/team/type.d.ts
@@ -101,6 +101,7 @@ export type TeamInvoiceHeaderType = {
   bankName?: string;
   bankAccount?: string;
   needSpecialInvoice: boolean;
+  contactPhone: string;
   emailAddress: string;
 };
 
diff --git a/packages/web/i18n/en/account_bill.json b/packages/web/i18n/en/account_bill.json
index ad5d61eb1..28dd5d8b0 100644
--- a/packages/web/i18n/en/account_bill.json
+++ b/packages/web/i18n/en/account_bill.json
@@ -9,6 +9,8 @@
   "company_phone": "Company phone number",
   "completed": "Completed",
   "confirm": "confirm",
+  "contact_phone": "Contact phone number",
+  "contact_phone_void": "Contact phone number format error",
   "default_header": "Default header",
   "detail": "Details",
   "email_address": "Email address",
@@ -45,7 +47,8 @@
   "time": "time",
   "type": "type",
   "unit_code": "unified credit code",
+  "unit_code_void": "Unified credit code format error",
   "update": "renew",
   "yes": "yes",
   "yuan": "¥{{amount}}"
-}
\ No newline at end of file
+}
diff --git a/packages/web/i18n/zh-CN/account_bill.json b/packages/web/i18n/zh-CN/account_bill.json
index d2039acf3..3f8e56650 100644
--- a/packages/web/i18n/zh-CN/account_bill.json
+++ b/packages/web/i18n/zh-CN/account_bill.json
@@ -11,6 +11,8 @@
   "confirm": "确认",
   "default_header": "默认抬头",
   "detail": "详情",
+  "contact_phone": "联系电话",
+  "contact_phone_void": "联系电话格式错误",
   "email_address": "邮箱地址",
   "extra_ai_points": "额外 AI 积分",
   "extra_dataset_size": "额外知识库容量",
@@ -45,6 +47,7 @@
   "time": "时间",
   "type": "类型",
   "unit_code": "统一信用代码",
+  "unit_code_void": "统一信用代码格式错误",
   "update": "更新",
   "yes": "是",
   "yuan": "{{amount}}元"
diff --git a/packages/web/i18n/zh-Hant/account_bill.json b/packages/web/i18n/zh-Hant/account_bill.json
index 5fe01c369..167a4311e 100644
--- a/packages/web/i18n/zh-Hant/account_bill.json
+++ b/packages/web/i18n/zh-Hant/account_bill.json
@@ -9,6 +9,8 @@
   "company_phone": "公司電話",
   "completed": "已完成",
   "confirm": "確認",
+  "contact_phone": "聯絡電話",
+  "contact_phone_void": "聯絡電話格式錯誤",
   "default_header": "預設抬頭",
   "detail": "詳情",
   "email_address": "郵件地址",
@@ -45,7 +47,8 @@
   "time": "時間",
   "type": "類型",
   "unit_code": "統一信用代碼",
+  "unit_code_void": "統一信用代碼格式錯誤",
   "update": "更新",
   "yes": "是",
   "yuan": "{{amount}}元"
-}
\ No newline at end of file
+}
diff --git a/packages/web/i18n/zh-Hant/common.json b/packages/web/i18n/zh-Hant/common.json
index ce6417a1a..e8af66925 100644
--- a/packages/web/i18n/zh-Hant/common.json
+++ b/packages/web/i18n/zh-Hant/common.json
@@ -841,6 +841,7 @@
   "dataset.Create Folder": "建立資料夾",
   "dataset.Create manual collection": "建立手動資料集",
   "dataset.Delete Dataset Error": "刪除知識庫錯誤",
+  "dataset.Edit API Service": "編輯 API 檔案介面",
   "dataset.Edit Folder": "編輯資料夾",
   "dataset.Edit Info": "編輯資訊",
   "dataset.Export": "匯出",
diff --git a/projects/app/src/pages/account/bill/components/ApplyInvoiceModal.tsx b/projects/app/src/pages/account/bill/components/ApplyInvoiceModal.tsx
index 544961dde..e7cfcc7f7 100644
--- a/projects/app/src/pages/account/bill/components/ApplyInvoiceModal.tsx
+++ b/projects/app/src/pages/account/bill/components/ApplyInvoiceModal.tsx
@@ -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
diff --git a/projects/app/src/pages/account/bill/components/InvoiceHeaderForm.tsx b/projects/app/src/pages/account/bill/components/InvoiceHeaderForm.tsx
index 0d4b8c4ab..f113c6cc4 100644
--- a/projects/app/src/pages/account/bill/components/InvoiceHeaderForm.tsx
+++ b/projects/app/src/pages/account/bill/components/InvoiceHeaderForm.tsx
@@ -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: ''
     }
   });
 
diff --git a/projects/app/src/pages/account/bill/components/InvoiceTable.tsx b/projects/app/src/pages/account/bill/components/InvoiceTable.tsx
index 1063456a1..7f039aa76 100644
--- a/projects/app/src/pages/account/bill/components/InvoiceTable.tsx
+++ b/projects/app/src/pages/account/bill/components/InvoiceTable.tsx
@@ -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>