feat: add registerAccount i18n

bigcommerce · Jul 20, 2022 · 283dfb0 · 283dfb0
1 parent 077dfd2
commit 283dfb0
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<number>(0)
 
   const {
@@ -128,7 +132,8 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
           severity="error"
         >
           <TipContent>
-            It appears you may already have an account. Please first
+            {b3Lang('intl.user.register.registeredAccount.loginLeft')}
+            {emailStateType === 1 ? ` ${b3Lang('intl.user.register.registeredAccount.loginFirst')}` : ''}
             <Box
               sx={{
                 ml: 1,
@@ -142,15 +147,15 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
               </TipLogin>
             </Box>
             {
-                emailStateType === 1 ? 'to apply for a business account' : ''
+                emailStateType === 1 ? `${b3Lang('intl.user.register.registeredAccount.loginb2b')}` : ''
               }
           </TipContent>
         </Alert>
         )
       }
 
       <FormControl>
-        <InformationLabels>Account Type</InformationLabels>
+        <InformationLabels>{b3Lang('intl.user.register.registeredAccount.accountType')}</InformationLabels>
         <RadioGroup
           row
           aria-labelledby="demo-row-radio-buttons-group-label"
@@ -161,17 +166,17 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
           <FormControlLabel
             value="1"
             control={<Radio />}
-            label="Business Account"
+            label={b3Lang('intl.user.register.registeredAccount.businessAccount')}
           />
           <FormControlLabel
             value="2"
             control={<Radio />}
-            label="Personal Account"
+            label={b3Lang('intl.user.register.registeredAccount.personalAccount')}
           />
         </RadioGroup>
       </FormControl>
       <Box>
-        <InformationFourLabels>Contact Information</InformationFourLabels>
+        <InformationFourLabels>{b3Lang('intl.user.register.registeredAccount.contactInformation')}</InformationFourLabels>
         <B3CustomForm
           formFields={accountType === '1' ? contactInformation : bcContactInformationFields}
           errors={errors}
@@ -194,7 +199,7 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
       </Box>
       <Box />
       <Box>
-        <InformationFourLabels>Additional Information</InformationFourLabels>
+        <InformationFourLabels>{b3Lang('intl.user.register.registeredAccount.additionalInformation')}</InformationFourLabels>
         <B3CustomForm
           formFields={additionalInformation}
           errors={errors}