From 283dfb04fa3a518aae399ccec726ac455bed8b8c Mon Sep 17 00:00:00 2001 From: kris liu Date: Wed, 20 Jul 2022 16:33:14 +0800 Subject: [PATCH] feat: add registerAccount i18n --- .../src/components/form/B3Checkbox.tsx | 7 ++- .../src/components/form/B3FileUpload.tsx | 2 +- .../src/components/form/B3Picker.tsx | 7 ++- .../src/components/form/B3RadioGroup.tsx | 7 ++- .../src/components/form/B3Select.tsx | 7 ++- .../src/components/form/B3TextField.tsx | 7 ++- apps/storefront/src/locales/en-US/users.ts | 22 ++++++++++ apps/storefront/src/locales/zh-CN/users.ts | 17 +++++++ .../src/pages/registered/Registered.tsx | 4 +- .../pages/registered/RegisteredAccount.tsx | 19 +++++--- .../storefront/src/pages/registered/config.ts | 44 +++++++++---------- 11 files changed, 101 insertions(+), 42 deletions(-) diff --git a/apps/storefront/src/components/form/B3Checkbox.tsx b/apps/storefront/src/components/form/B3Checkbox.tsx index bf78b56c..4341905b 100644 --- a/apps/storefront/src/components/form/B3Checkbox.tsx +++ b/apps/storefront/src/components/form/B3Checkbox.tsx @@ -7,6 +7,7 @@ import { } from '@mui/material' import { Controller } from 'react-hook-form' +import { useB3Lang } from '@b3/lang' import Form from './ui' interface CheckboxListProps { @@ -22,14 +23,16 @@ export const B3Checkbox = ({ fieldType, name, default: defaultValue, required, label, validate, options, } = rest + const b3Lang = useB3Lang() + const fieldsProps = { type: fieldType, name, key: name, defaultValue, rules: { - required: required && `${label} is required`, - validate, + required: required && b3Lang('intl.global.validate.required', { label }), + validate: validate && ((v: string) => validate(v, b3Lang)), }, control, } diff --git a/apps/storefront/src/components/form/B3FileUpload.tsx b/apps/storefront/src/components/form/B3FileUpload.tsx index 29147de2..68479c22 100644 --- a/apps/storefront/src/components/form/B3FileUpload.tsx +++ b/apps/storefront/src/components/form/B3FileUpload.tsx @@ -89,7 +89,7 @@ export const B3FileUpload = (props: FileUploadProps) => { defaultValue, rules: { required: required && b3Lang('intl.global.validate.required', { label }), - validate, + validate: validate && ((v: string) => validate(v, b3Lang)), }, control, } diff --git a/apps/storefront/src/components/form/B3Picker.tsx b/apps/storefront/src/components/form/B3Picker.tsx index 91a1694c..50b10011 100644 --- a/apps/storefront/src/components/form/B3Picker.tsx +++ b/apps/storefront/src/components/form/B3Picker.tsx @@ -3,6 +3,7 @@ import { FormControl, } from '@mui/material' import { Controller } from 'react-hook-form' +import { useB3Lang } from '@b3/lang' import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider' import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker' @@ -14,14 +15,16 @@ export const B3Picker = ({ control, errors, ...rest } : Form.B3UIProps) => { fieldType, name, default: defaultValue, required, label, validate, muiTextFieldProps, } = rest + const b3Lang = useB3Lang() + const fieldsProps = { type: fieldType, name, key: name, defaultValue, rules: { - required: required && `${label} is required`, - validate, + required: required && b3Lang('intl.global.validate.required', { label }), + validate: validate && ((v: string) => validate(v, b3Lang)), }, control, } diff --git a/apps/storefront/src/components/form/B3RadioGroup.tsx b/apps/storefront/src/components/form/B3RadioGroup.tsx index e60f1f9a..6925f10a 100644 --- a/apps/storefront/src/components/form/B3RadioGroup.tsx +++ b/apps/storefront/src/components/form/B3RadioGroup.tsx @@ -7,6 +7,7 @@ import { FormHelperText, } from '@mui/material' import { Controller } from 'react-hook-form' +import { useB3Lang } from '@b3/lang' import Form from './ui' @@ -15,14 +16,16 @@ export const B3RadioGroup = ({ control, errors, ...rest } : Form.B3UIProps) => { fieldType, name, default: defaultValue, required, label, validate, options, } = rest + const b3Lang = useB3Lang() + const fieldsProps = { type: fieldType, name, key: name, defaultValue, rules: { - required: required && `${label} is required`, - validate, + required: required && b3Lang('intl.global.validate.required', { label }), + validate: validate && ((v: string) => validate(v, b3Lang)), }, control, } diff --git a/apps/storefront/src/components/form/B3Select.tsx b/apps/storefront/src/components/form/B3Select.tsx index b41a04a7..13c01987 100644 --- a/apps/storefront/src/components/form/B3Select.tsx +++ b/apps/storefront/src/components/form/B3Select.tsx @@ -8,6 +8,7 @@ import { Select, } from '@mui/material' import { Controller } from 'react-hook-form' +import { useB3Lang } from '@b3/lang' import Form from './ui' @@ -17,6 +18,8 @@ export const B3Select = ({ control, errors, ...rest } : Form.B3UIProps) => { muiSelectProps, setValue, onChange, replaceOptions, } = rest + const b3Lang = useB3Lang() + const muiAttributeProps = muiSelectProps || {} const fieldsProps = { @@ -25,8 +28,8 @@ export const B3Select = ({ control, errors, ...rest } : Form.B3UIProps) => { key: name, defaultValue, rules: { - required: required && `${label} is required`, - validate, + required: required && b3Lang('intl.global.validate.required', { label }), + validate: validate && ((v: string) => validate(v, b3Lang)), }, control, } diff --git a/apps/storefront/src/components/form/B3TextField.tsx b/apps/storefront/src/components/form/B3TextField.tsx index d1ec0801..868889e1 100644 --- a/apps/storefront/src/components/form/B3TextField.tsx +++ b/apps/storefront/src/components/form/B3TextField.tsx @@ -2,6 +2,7 @@ import { TextField, } from '@mui/material' import { Controller } from 'react-hook-form' +import { useB3Lang } from '@b3/lang' import Form from './ui' export const B3TextField = ({ control, errors, ...rest } : Form.B3UIProps) => { @@ -10,14 +11,16 @@ export const B3TextField = ({ control, errors, ...rest } : Form.B3UIProps) => { min, max, minLength, maxLength, fullWidth, muiTextFieldProps, disabled, } = rest + const b3Lang = useB3Lang() + const fieldsProps = { type: fieldType, name, key: name, defaultValue, rules: { - required: required && `${label} is required`, - validate, + required: required && b3Lang('intl.global.validate.required', { label }), + validate: validate && ((v: string) => validate(v, b3Lang)), }, control, } diff --git a/apps/storefront/src/locales/en-US/users.ts b/apps/storefront/src/locales/en-US/users.ts index c123c4b5..ae927043 100644 --- a/apps/storefront/src/locales/en-US/users.ts +++ b/apps/storefront/src/locales/en-US/users.ts @@ -11,6 +11,28 @@ export default { 'intl.user.register.step.details': 'Details', 'intl.user.register.step.finish': 'Finish', + 'intl.user.register.registeredAccount.firstName': 'First Name', + 'intl.user.register.registeredAccount.lastName': 'Last Name', + 'intl.user.register.registeredAccount.workEmailAddress': 'Work Email Address', + 'intl.user.register.registeredAccount.phoneNumber': 'Phone Number', + 'intl.user.register.registeredAccount.emailAddress': 'Email Address', + 'intl.user.register.registeredAccount.companyName': 'Company Name', + + 'intl.user.register.registeredAccount.loginLeft': 'It appears you may already have an account. Please', + 'intl.user.register.registeredAccount.loginFirst': 'first', + 'intl.user.register.registeredAccount.loginb2b': 'to apply for a business account', + + 'intl.user.register.registeredAccount.accountType': 'Account Type', + 'intl.user.register.registeredAccount.businessAccount': 'Business Account', + 'intl.user.register.registeredAccount.personalAccount': 'Personal Account', + 'intl.user.register.registeredAccount.contactInformation': 'Contact Information', + 'intl.user.register.registeredAccount.additionalInformation': 'Additional Information', + + 'intl.user.register.validatorRules.email': 'Please enter the correct email address', + 'intl.user.register.validatorRules.phoneNumber': 'Please enter the correct phone number', + 'intl.user.register.validatorRules.max': 'Please do not exceed {max}', + 'intl.user.register.validatorRules.passwords': 'Passwords must be at least 7 characters and contain both alphabetic and numeric characters.', + 'intl.user.register.label.companyName': 'Company Name', 'intl.user.register.label.companyEmail': 'Company Email', 'intl.user.register.label.companyPhoneNumber': 'Company Phone Number', diff --git a/apps/storefront/src/locales/zh-CN/users.ts b/apps/storefront/src/locales/zh-CN/users.ts index 25421d52..fee814fb 100644 --- a/apps/storefront/src/locales/zh-CN/users.ts +++ b/apps/storefront/src/locales/zh-CN/users.ts @@ -11,6 +11,23 @@ export default { 'intl.user.register.step.details': '详细资料', 'intl.user.register.step.finish': '完成', + 'intl.user.register.registeredAccount.firstName': '名字', + 'intl.user.register.registeredAccount.lastName': '姓氏', + 'intl.user.register.registeredAccount.workEmailAddress': '工作电子邮件地址', + 'intl.user.register.registeredAccount.phoneNumber': '电话号码', + 'intl.user.register.registeredAccount.emailAddress': '电子邮件地址', + 'intl.user.register.registeredAccount.companyName': '公司名称', + + 'intl.user.register.registeredAccount.loginLeft': '看来你可能已经有一个帐户了。请', + 'intl.user.register.registeredAccount.loginFirst': '第一', + 'intl.user.register.registeredAccount.loginb2b': '申请企业账户', + + 'intl.user.register.registeredAccount.accountType': '账户类型', + 'intl.user.register.registeredAccount.businessAccount': '企业账户', + 'intl.user.register.registeredAccount.personalAccount': '个人账户', + 'intl.user.register.registeredAccount.contactInformation': '联系信息', + 'intl.user.register.registeredAccount.additionalInformation': '附加信息', + 'intl.user.register.label.companyName': '公司名称', 'intl.user.register.label.companyEmail': '公司邮箱', 'intl.user.register.label.companyPhoneNumber': '公司电话号码', diff --git a/apps/storefront/src/pages/registered/Registered.tsx b/apps/storefront/src/pages/registered/Registered.tsx index ee101767..4cb28d04 100644 --- a/apps/storefront/src/pages/registered/Registered.tsx +++ b/apps/storefront/src/pages/registered/Registered.tsx @@ -92,9 +92,9 @@ export default function Registered() { accountType: '1', isLoading: false, storeName, - contactInformation: [...contactInformationFields], + contactInformation: [...contactInformationFields(b3Lang)], additionalInformation: [...newAdditionalInformation], - bcContactInformationFields: [...bcContactInformationFields], + bcContactInformationFields: [...bcContactInformationFields(b3Lang)], companyExtraFields: [...newCompanyExtraFields], companyInformation: [...companyInformationFields(b3Lang)], companyAttachment: [...companyAttachmentsFields(b3Lang)], diff --git a/apps/storefront/src/pages/registered/RegisteredAccount.tsx b/apps/storefront/src/pages/registered/RegisteredAccount.tsx index c7941741..9629dd25 100644 --- a/apps/storefront/src/pages/registered/RegisteredAccount.tsx +++ b/apps/storefront/src/pages/registered/RegisteredAccount.tsx @@ -10,6 +10,8 @@ import { Alert, } from '@mui/material' +import { useB3Lang } from '@b3/lang' + import { useForm } from 'react-hook-form' import { B3CustomForm } from '../../components' @@ -37,6 +39,8 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { const { state, dispatch } = useContext(RegisteredContext) + const b3Lang = useB3Lang() + const [emailStateType, setEmailStateType] = useState(0) const { @@ -128,7 +132,8 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { severity="error" > - It appears you may already have an account. Please first + {b3Lang('intl.user.register.registeredAccount.loginLeft')} + {emailStateType === 1 ? ` ${b3Lang('intl.user.register.registeredAccount.loginFirst')}` : ''} { - emailStateType === 1 ? 'to apply for a business account' : '' + emailStateType === 1 ? `${b3Lang('intl.user.register.registeredAccount.loginb2b')}` : '' } @@ -150,7 +155,7 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { } - Account Type + {b3Lang('intl.user.register.registeredAccount.accountType')} } - label="Business Account" + label={b3Lang('intl.user.register.registeredAccount.businessAccount')} /> } - label="Personal Account" + label={b3Lang('intl.user.register.registeredAccount.personalAccount')} /> - Contact Information + {b3Lang('intl.user.register.registeredAccount.contactInformation')} - Additional Information + {b3Lang('intl.user.register.registeredAccount.additionalInformation')} { +export const validatorRules = (validateRuleTypes: string[], options?: ValidateOptions) => (val: string, b3lang: B3Lang) => { let str = '' validateRuleTypes.forEach((item: string) => { if (item === 'email' && !re.email.test(val)) { - str = 'Please enter the correct email address' + str = b3lang('intl.user.register.validatorRules.email') } if (item === 'phone' && !re.phone.test(val)) { - str = 'Please enter the correct phone number' + str = b3lang('intl.user.register.validatorRules.phoneNumber') } if (item === 'max' && options?.max && +options.max < +val) { - str = `Please do not exceed ${options.max}` + str = b3lang('intl.user.register.validatorRules.phoneNumber', { max: options.max }) } if (item === 'password' && !re.password.test(val)) { - str = 'Passwords must be at least 7 characters and contain both alphabetic and numeric characters.' + str = b3lang('intl.user.register.validatorRules.passwords') } }) if (str) return str @@ -87,11 +87,11 @@ const classificationType = (item: RegisterFileds) => { rows: item?.options?.rows || item.numberOfRows || null, } if (optionItems?.max) { - optionItems.validate = (v: string) => validatorRules(v, ['max'], { max: optionItems?.max }) + optionItems.validate = validatorRules(['max'], { max: optionItems?.max }) } if (item.fieldType === 'password') { - optionItems.validate = (v: string) => validatorRules(v, ['password']) + optionItems.validate = validatorRules(['password']) } } if (fieldsType.checkbox.includes(item.fieldType)) { @@ -165,10 +165,10 @@ export const conversionDataFormat = (registerArr: Array) => { return newRegisterArr } -export const bcContactInformationFields:ContactInformationItems = [ +export const bcContactInformationFields = (b3lang: B3Lang) : ContactInformationItems => [ { name: 'firstName', - label: 'First Name', + label: b3lang('intl.user.register.registeredAccount.firstName'), default: '', fieldType: 'text', required: true, @@ -176,7 +176,7 @@ export const bcContactInformationFields:ContactInformationItems = [ }, { name: 'lastName', - label: 'Last Name', + label: b3lang('intl.user.register.registeredAccount.lastName'), default: '', fieldType: 'text', required: true, @@ -184,16 +184,16 @@ export const bcContactInformationFields:ContactInformationItems = [ }, { name: 'emailAddress', - label: 'Email Address', + label: b3lang('intl.user.register.registeredAccount.emailAddress'), default: '', fieldType: 'text', required: true, - validate: (v: string) => validatorRules(v, ['email']), + validate: validatorRules(['email']), xs: 12, }, { name: 'companyName', - label: 'Company Name', + label: b3lang('intl.user.register.registeredAccount.companyName'), default: '', fieldType: 'text', required: false, @@ -201,7 +201,7 @@ export const bcContactInformationFields:ContactInformationItems = [ }, { name: 'phoneNumber', - label: 'Phone Number', + label: b3lang('intl.user.register.registeredAccount.phoneNumber'), default: '', fieldType: 'text', required: false, @@ -209,10 +209,10 @@ export const bcContactInformationFields:ContactInformationItems = [ }, ] -export const contactInformationFields: ContactInformationItems = [ +export const contactInformationFields = (b3lang: B3Lang) : ContactInformationItems => [ { name: 'firstName', - label: 'First Name', + label: b3lang('intl.user.register.registeredAccount.firstName'), default: '', fieldType: 'text', required: true, @@ -220,7 +220,7 @@ export const contactInformationFields: ContactInformationItems = [ }, { name: 'lastName', - label: 'Last Name', + label: b3lang('intl.user.register.registeredAccount.lastName'), default: '', fieldType: 'text', required: true, @@ -228,16 +228,16 @@ export const contactInformationFields: ContactInformationItems = [ }, { name: 'workEmailAddress', - label: 'Work Email Address', + label: b3lang('intl.user.register.registeredAccount.workEmailAddress'), default: '', fieldType: 'text', required: true, - validate: (v: string) => validatorRules(v, ['email']), + validate: validatorRules(['email']), xs: 12, }, { name: 'phoneNumber', - label: 'Phone Number', + label: b3lang('intl.user.register.registeredAccount.phoneNumber'), default: '', fieldType: 'text', required: false, @@ -261,7 +261,7 @@ export const companyInformationFields = (b3lang: B3Lang) : ContactInformationIte default: '', fieldType: 'text', required: true, - validate: (v: string) => validatorRules(v, ['email'], b3lang), + validate: validatorRules(['email']), xs: 12, }, { @@ -270,7 +270,7 @@ export const companyInformationFields = (b3lang: B3Lang) : ContactInformationIte default: '', fieldType: 'text', required: true, - validate: (v: string) => validatorRules(v, ['phone']), + validate: validatorRules(['phone']), xs: 12, }, ]