feat: registration page I18n

https://bigc-b2b.atlassian.net/browse/BUN-88
bigcommerce · Jul 20, 2022 · ef84779 · ef84779
1 parent e5d3035
commit ef84779
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 10 deletions.
diff --git a/apps/storefront/src/locales/en-US/finish.ts b/apps/storefront/src/locales/en-US/finish.ts
@@ -0,0 +1,12 @@
+export default {
+  // complete page
+  'intl.completePage.title': 'Complete Registration',
+  'intl.completePage.passwordMatchPrompt': 'The passwords are different',
+  'intl.completePage.email': 'email',
+  'intl.completePage.confirmPassword': 'Confirm Password',
+
+  // finish page
+  'intl.finishPage.autoApproved.tip': 'Thank you for creating your account at {storeName}. Your company account application has been approved',
+  'intl.finishPage.notAutoApproved.tip': 'Your company account application has been received. Please allow 24 hours for account approval and activation.',
+  'intl.finishPage.bcSuccess.tip': 'Thank you for creating your account at {storeName}.',
+}
diff --git a/apps/storefront/src/locales/en-US/global.ts b/apps/storefront/src/locales/en-US/global.ts
@@ -4,6 +4,7 @@ export default {
   'intl.global.button.back': 'Back',
   'intl.global.button.next': 'Next',
   'intl.global.button.submit': 'Submit',
+  'intl.global.button.finish': 'FINISH',
 
   'intl.global.validate.required': '{label} is required',
 

diff --git a/apps/storefront/src/locales/en-US/index.ts b/apps/storefront/src/locales/en-US/index.ts
@@ -1,7 +1,9 @@
 import users from './users'
 import global from './global'
+import finish from './finish'
 
 export const en = {
   ...global,
   ...users,
+  ...finish,
 }
diff --git a/apps/storefront/src/locales/zh-CN/finish.ts b/apps/storefront/src/locales/zh-CN/finish.ts
@@ -0,0 +1,12 @@
+export default {
+  // complete page
+  'intl.completePage.title': '完成注册',
+  'intl.completePage.passwordMatchPrompt': '密码不同',
+  'intl.completePage.email': '电子邮件',
+  'intl.completePage.confirmPassword': '确认密码',
+
+  // finish page
+  'intl.finishPage.autoApproved.tip': '感谢您在 {storeName} 创建帐户。 您的公司帐户申请已获批准',
+  'intl.finishPage.notAutoApproved.tip': '您的公司账户申请已收到。 请等待 24 小时来批准和激活帐户。',
+  'intl.finishPage.bcSuccess.tip': '感谢您在 {storeName} 创建帐户。',
+}
diff --git a/apps/storefront/src/locales/zh-CN/global.ts b/apps/storefront/src/locales/zh-CN/global.ts
@@ -4,6 +4,7 @@ export default {
   'intl.global.button.back': '返回',
   'intl.global.button.next': '下一步',
   'intl.global.button.submit': '提交',
+  'intl.global.button.finish': '完成',
 
   'intl.global.validate.required': '{label}是必填的',
 

diff --git a/apps/storefront/src/locales/zh-CN/index.ts b/apps/storefront/src/locales/zh-CN/index.ts
@@ -1,7 +1,9 @@
 import users from './users'
 import global from './global'
+import finish from './finish'
 
 export const zh = {
   ...global,
   ...users,
+  ...finish,
 }
diff --git a/apps/storefront/src/pages/registered/RegisterComplete.tsx b/apps/storefront/src/pages/registered/RegisterComplete.tsx
@@ -6,6 +6,7 @@ import {
   Alert,
 } from '@mui/material'
 import { useForm } from 'react-hook-form'
+import { useB3Lang } from '@b3/lang'
 
 import { RegisteredContext } from './context/RegisteredContext'
 import RegisteredStepButton from './component/RegisteredStepButton'
@@ -30,6 +31,7 @@ interface RegisterCompleteProps {
 type RegisterCompleteList = Array<any> | undefined
 
 export default function RegisterComplete(props: RegisterCompleteProps) {
+  const b3Lang = useB3Lang()
   const { handleBack, activeStep, handleNext } = props
 
   const [personalInfo, setPersonalInfo] = useState<Array<CustomFieldItems>>([])
@@ -57,7 +59,7 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
     if (list && list.length) {
       const emailFileds = list.find((item: RegisterFileds) => item.name === emailName) || {}
       emailItem = { ...emailFileds }
-      emailItem.label = 'email'
+      emailItem.label = `${b3Lang('intl.completePage.email')}`
       emailItem.name = 'email'
       emailItem.disabled = true
       newPasswordInformation.push(emailItem)
@@ -67,7 +69,7 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
     newPasswordInformation.push({
       default: '',
       required: true,
-      label: 'Confirm Password',
+      label: b3Lang('intl.completePage.confirmPassword'),
       name: 'ConfirmPassword',
       id: 'Confirm Password',
       fieldType: 'password',
@@ -250,7 +252,7 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
   const handleCompleted = (event: MouseEvent) => {
     handleSubmit(async (completeData: CustomFieldItems) => {
       if (completeData.password !== completeData.ConfirmPassword) {
-        setErrorMessage('The passwords are different')
+        setErrorMessage(b3Lang('intl.completePage.passwordMatchPrompt'))
         return
       }
       try {
@@ -329,7 +331,7 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
         )
       }
       <Box>
-        <InformationFourLabels>Complete Registration</InformationFourLabels>
+        <InformationFourLabels>{b3Lang('intl.completePage.title')}</InformationFourLabels>
         {
           personalInfo && (
           <B3CustomForm

diff --git a/apps/storefront/src/pages/registered/RegisteredFinish.tsx b/apps/storefront/src/pages/registered/RegisteredFinish.tsx
@@ -2,6 +2,8 @@ import { useContext } from 'react'
 
 import { Box } from '@mui/material'
 
+import { useB3Lang } from '@b3/lang'
+
 import { RegisteredContext } from './context/RegisteredContext'
 import RegisteredStepButton from './component/RegisteredStepButton'
 
@@ -10,6 +12,7 @@ import { StyleTipContainer } from './styled'
 export default function RegisteredFinish(props: { activeStep: any; handleFinish: () => void}) {
   const { activeStep, handleFinish } = props
   const { state } = useContext(RegisteredContext)
+  const b3Lang = useB3Lang()
 
   const {
     accountType,
@@ -23,11 +26,11 @@ export default function RegisteredFinish(props: { activeStep: any; handleFinish:
       return (
         isAutoApproval ? (
           <StyleTipContainer>
-            {`Thank you for creating your account at ${storeName}. Your company account application has been approved`}
+            {b3Lang('intl.finishPage.autoApproved.tip', { storeName })}
           </StyleTipContainer>
         ) : (
           <StyleTipContainer>
-            Your company account application has been received. Please allow 24 hours for account approval and activation.
+            {b3Lang('intl.finishPage.notAutoApproved.tip')}
           </StyleTipContainer>
         )
       )
@@ -36,7 +39,7 @@ export default function RegisteredFinish(props: { activeStep: any; handleFinish:
     if (accountType === '2') {
       return (
         <StyleTipContainer>
-          {`Thank you for creating your account at ${storeName}.`}
+          {b3Lang('intl.finishPage.bcSuccess.tip', { storeName })}
         </StyleTipContainer>
       )
     }

diff --git a/apps/storefront/src/pages/registered/component/RegisteredStepButton.tsx b/apps/storefront/src/pages/registered/component/RegisteredStepButton.tsx
@@ -19,7 +19,7 @@ function RegisteredStepButton(props: any) {
       {activeStep === steps.length ? (
         <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
           <Box sx={{ flex: '1 1 auto' }} />
-          <Button onClick={() => handleFinish()}>Finish</Button>
+          <Button onClick={() => handleFinish()}>{b3Lang('intl.global.button.finish')}</Button>
         </Box>
       ) : (
         <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>

diff --git a/apps/storefront/src/shared/service/b2b/api/register.ts b/apps/storefront/src/shared/service/b2b/api/register.ts
@@ -1,12 +1,11 @@
 import { B3Request } from '../../request/b3Fetch'
 import { RequestType } from '../../request/base'
+import { storeHash } from '../../../../utils/basicConfig'
 
 interface CustomFieldItems {
   [key: string]: any
 }
 
-const storeHash = (window as any).b3?.setting?.storeHash || 'rtmh8fqr05'
-
 export const createBCCompanyUser = (data: CustomFieldItems): CustomFieldItems => B3Request.post('/api/v2/proxy', RequestType.B2BRest, data)
 
 export const validateBCCompanyExtraFields = (data: CustomFieldItems): CustomFieldItems => B3Request.post('/api/v2/extra-fields/company/validate', RequestType.B2BRest, { ...data, storeHash })