feat: add register i18n

BUN-88
bigcommerce · Jul 20, 2022 · 116c2cf · 116c2cf
1 parent 2ae621d
commit 116c2cf
Show file tree

Hide file tree

Showing 15 changed files with 232 additions and 110 deletions.
diff --git a/apps/storefront/src/components/form/B3FileUpload.tsx b/apps/storefront/src/components/form/B3FileUpload.tsx
@@ -1,5 +1,4 @@
-import { Box, FormControl } from '@mui/material'
-import { styled } from '@mui/material/styles'
+import { FormControl } from '@mui/material'
 import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined'
 import PictureAsPdfRoundedIcon from '@mui/icons-material/PictureAsPdfRounded'
 import ImageRoundedIcon from '@mui/icons-material/ImageRounded'
@@ -8,6 +7,8 @@ import DescriptionRounded from '@mui/icons-material/DescriptionRounded'
 
 import { Controller } from 'react-hook-form'
 
+import { useB3Lang } from '@b3/lang'
+
 import {
   DropzoneArea,
   FileObject,
@@ -18,75 +19,7 @@ import { FILE_UPLOAD_ACCEPT_TYPE } from '../../constants'
 
 import B3UI from './ui'
 
-const DropzoneBox = styled(Box)(() => ({
-  '& .MuiDropzoneArea-textContainer': {
-    border: '2px dotted #3C64F4',
-    borderRadius: '8px',
-    padding: '20px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    '& .MuiTypography-root': {
-      fontSize: '1rem',
-      color: '#767676',
-      order: 1,
-    },
-    '& .MuiSvgIcon-root': {
-      color: '#D1D1D1',
-      fontSize: '3rem',
-      marginRight: '0.5rem',
-    },
-  },
-  '& .MuiGrid-container': {
-    margin: 0,
-    width: '100%',
-    '& .MuiGrid-item': {
-      maxWidth: '120px',
-      flexBasis: '120px',
-      padding: '20px',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      borderRadius: '4px',
-      margin: '20px 20px 0 0',
-      boxShadow: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)',
-      position: 'relative',
-      '& .MuiSvgIcon-root': {
-        color: '#757575',
-        fontSize: '40px',
-      },
-      '& .MuiTypography-root': {
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        width: '100%',
-        fontSize: '1rem',
-        marginTop: '10px',
-        textAlign: 'center',
-      },
-      '& .MuiButtonBase-root': {
-        position: 'absolute',
-        top: '-12px',
-        right: '-12px',
-        width: '24px',
-        height: '24px',
-        minHeight: 'inherit',
-        backgroundColor: '#757575',
-        boxShadow: 'none',
-        '& .MuiSvgIcon-root': {
-          color: '#fff',
-          fontSize: '16px',
-        },
-      },
-    },
-  },
-  '& #client-snackbar': {
-    '& .MuiSvgIcon-root': {
-      verticalAlign: 'middle',
-      marginRight: '4px',
-    },
-  },
-}))
+import { DropzoneBox } from './styled'
 
 const getPreviewIcon = (fileObject: FileObject, classes: PreviewIconProps) => {
   const { type } = fileObject.file
@@ -121,12 +54,24 @@ interface FileUploadProps extends B3UI.B3UIProps {
   onChange?: (files: File[]) => void
 }
 
+const getMaxFileSizeLabel = (maxSize: number) => {
+  if (maxSize / 1048576 > 1) {
+    return `${(maxSize / 1048576).toFixed(1)}M`
+  }
+  if (maxSize / 1024 > 1) {
+    return `${(maxSize / 1024).toFixed(1)}kb`
+  }
+  return `${maxSize}b`
+}
+
 export const B3FileUpload = (props: FileUploadProps) => {
+  const b3Lang = useB3Lang()
+
   const {
     acceptedFiles = FILE_UPLOAD_ACCEPT_TYPE,
     filesLimit = 3,
     maxFileSize = 2097152, // 2M
-    dropzoneText = 'Drag & drop file here or browse',
+    dropzoneText = b3Lang('intl.global.fileUpload.defaultText'),
     previewText = ' ',
     control,
     fieldType,
@@ -143,7 +88,7 @@ export const B3FileUpload = (props: FileUploadProps) => {
     key: name,
     defaultValue,
     rules: {
-      required: required && `${label} is required`,
+      required: required && b3Lang('intl.global.validate.required', { label }),
       validate,
     },
     control,
@@ -162,17 +107,17 @@ export const B3FileUpload = (props: FileUploadProps) => {
     })
 
     if (!isAcceptFileType) {
-      return `${name} file type not support`
+      return b3Lang('intl.global.fileUpload.typeNotSupport', { name })
     }
 
     if (size > maxFileSize) {
-      return `${name} file exceeds the limit`
+      return b3Lang('intl.global.fileUpload.fileSizeExceedsLimit', { name, maxSize: getMaxFileSizeLabel(maxFileSize) })
     }
 
     return ''
   }
 
-  const getFileLimitExceedMessage = () => `The number of files exceeds the limit, with up to ${filesLimit} being supported`
+  const getFileLimitExceedMessage = () => b3Lang('intl.global.fileUpload.fileNumberExceedsLimit', { limit: filesLimit })
 
   return (
     <>

diff --git a/apps/storefront/src/components/form/styled.ts b/apps/storefront/src/components/form/styled.ts
@@ -0,0 +1,71 @@
+import { styled } from '@mui/material/styles'
+
+export const DropzoneBox = styled('div')(() => ({
+  '& .MuiDropzoneArea-textContainer': {
+    border: '2px dotted #3C64F4',
+    borderRadius: '8px',
+    padding: '20px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '& .MuiTypography-root': {
+      fontSize: '1rem',
+      color: '#767676',
+      order: 1,
+    },
+    '& .MuiSvgIcon-root': {
+      color: '#D1D1D1',
+      fontSize: '3rem',
+      marginRight: '0.5rem',
+    },
+  },
+  '& .MuiGrid-container': {
+    margin: 0,
+    width: '100%',
+    '& .MuiGrid-item': {
+      maxWidth: '120px',
+      flexBasis: '120px',
+      padding: '20px',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      borderRadius: '4px',
+      margin: '20px 20px 0 0',
+      boxShadow: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)',
+      position: 'relative',
+      '& .MuiSvgIcon-root': {
+        color: '#757575',
+        fontSize: '40px',
+      },
+      '& .MuiTypography-root': {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        width: '100%',
+        fontSize: '1rem',
+        marginTop: '10px',
+        textAlign: 'center',
+      },
+      '& .MuiButtonBase-root': {
+        position: 'absolute',
+        top: '-12px',
+        right: '-12px',
+        width: '24px',
+        height: '24px',
+        minHeight: 'inherit',
+        backgroundColor: '#757575',
+        boxShadow: 'none',
+        '& .MuiSvgIcon-root': {
+          color: '#fff',
+          fontSize: '16px',
+        },
+      },
+    },
+  },
+  '& #client-snackbar': {
+    '& .MuiSvgIcon-root': {
+      verticalAlign: 'middle',
+      marginRight: '4px',
+    },
+  },
+}))
diff --git a/apps/storefront/src/locales/en-US/global.ts b/apps/storefront/src/locales/en-US/global.ts
@@ -0,0 +1,14 @@
+export default {
+  'intl.global.tips.loading': 'Loading...',
+
+  'intl.global.button.back': 'Back',
+  'intl.global.button.next': 'Next',
+  'intl.global.button.submit': 'Submit',
+
+  'intl.global.validate.required': '{label} is required',
+
+  'intl.global.fileUpload.defaultText': 'Drag & drop file here or browse',
+  'intl.global.fileUpload.typeNotSupport': '{name} file type not support',
+  'intl.global.fileUpload.fileSizeExceedsLimit': '{name} file exceeds the limit, Maximum support {maxSize}',
+  'intl.global.fileUpload.fileNumberExceedsLimit': 'The number of files exceeds the limit, with up to {limit} being supported',
+}
diff --git a/apps/storefront/src/locales/en-US/index.ts b/apps/storefront/src/locales/en-US/index.ts
@@ -1,5 +1,7 @@
 import users from './users'
+import global from './global'
 
 export const en = {
+  ...global,
   ...users,
 }
diff --git a/apps/storefront/src/locales/en-US/users.ts b/apps/storefront/src/locales/en-US/users.ts
@@ -1,3 +1,27 @@
 export default {
+  'intl.user.register.title.registerComplete': 'Registration Complete. Thank You!',
+  'intl.user.register.title.accountCreated': 'Your personal account has been created.',
+  'intl.user.register.title.accountRegister': 'Account Registration',
+  'intl.user.register.title.attachments': 'Attachments',
+  'intl.user.register.title.address': 'Address',
+  'intl.user.register.title.businessDetails': 'Business Details',
 
+  'intl.user.register.step.optional': 'Optional',
+  'intl.user.register.step.account': 'Account',
+  'intl.user.register.step.details': 'Details',
+  'intl.user.register.step.finish': 'Finish',
+
+  'intl.user.register.label.companyName': 'Company Name',
+  'intl.user.register.label.companyEmail': 'Company Email',
+  'intl.user.register.label.companyPhoneNumber': 'Company Phone Number',
+  'intl.user.register.label.companyAttachments': 'Company Attachments',
+
+  'intl.user.register.label.country': 'Country',
+  'intl.user.register.label.address1': 'Address 1',
+  'intl.user.register.label.address2': 'Address 2',
+  'intl.user.register.label.city': 'City',
+  'intl.user.register.label.state': 'State',
+  'intl.user.register.label.zipCode': 'Zip Code',
+
+  'intl.user.register.tips.registerLogo': 'register Logo',
 }
diff --git a/apps/storefront/src/locales/zh-CN/global.ts b/apps/storefront/src/locales/zh-CN/global.ts
@@ -0,0 +1,14 @@
+export default {
+  'intl.global.tips.loading': '加载中...',
+
+  'intl.global.button.back': '返回',
+  'intl.global.button.next': '下一步',
+  'intl.global.button.submit': '提交',
+
+  'intl.global.validate.required': '{label}是必填的',
+
+  'intl.global.fileUpload.defaultText': '拖放文件或浏览',
+  'intl.global.fileUpload.typeNotSupport': '{name}文件类型不支持',
+  'intl.global.fileUpload.fileSizeExceedsLimit': '{name}文件的大小超过了限制，最大支持{maxSize}',
+  'intl.global.fileUpload.fileNumberExceedsLimit': '文件数量超过限制，最多支持{limit}个',
+}
diff --git a/apps/storefront/src/locales/zh-CN/index.ts b/apps/storefront/src/locales/zh-CN/index.ts
@@ -1,5 +1,7 @@
 import users from './users'
+import global from './global'
 
 export const zh = {
+  ...global,
   ...users,
 }
diff --git a/apps/storefront/src/locales/zh-CN/users.ts b/apps/storefront/src/locales/zh-CN/users.ts
@@ -1,3 +1,27 @@
 export default {
+  'intl.user.register.title.registerComplete': '注册完成。欢迎！',
+  'intl.user.register.title.accountCreated': '您的个人帐户已被创建。',
+  'intl.user.register.title.accountRegister': '账户注册',
+  'intl.user.register.title.attachments': '附件',
+  'intl.user.register.title.address': '地址',
+  'intl.user.register.title.businessDetails': '公司信息',
 
+  'intl.user.register.step.optional': '可选',
+  'intl.user.register.step.account': '账号',
+  'intl.user.register.step.details': '详细资料',
+  'intl.user.register.step.finish': '完成',
+
+  'intl.user.register.label.companyName': '公司名称',
+  'intl.user.register.label.companyEmail': '公司邮箱',
+  'intl.user.register.label.companyPhoneNumber': '公司电话号码',
+  'intl.user.register.label.companyAttachments': '附件',
+
+  'intl.user.register.label.country': '国家',
+  'intl.user.register.label.address1': '地址1',
+  'intl.user.register.label.address2': '地址2',
+  'intl.user.register.label.city': '市',
+  'intl.user.register.label.state': '省',
+  'intl.user.register.label.zipCode': '邮编',
+
+  'intl.user.register.tips.registerLogo': '注册Logo',
 }
diff --git a/apps/storefront/src/pages/registered/Registered.tsx b/apps/storefront/src/pages/registered/Registered.tsx
@@ -5,6 +5,8 @@ import { useNavigate } from 'react-router-dom'
 
 import { ImageListItem } from '@mui/material'
 
+import { useB3Lang } from '@b3/lang'
+
 import { getBCRegisterCustomFields } from '../../shared/service/bc'
 import {
   getB2BRegisterCustomFields, getB2BRegisterLogo, getB2BCountries, storeB2BBasicInfo,
@@ -36,6 +38,8 @@ export default function Registered() {
 
   const [logo, setLogo] = useState('')
 
+  const b3Lang = useB3Lang()
+
   const { state: { isLoading }, dispatch } = useContext(RegisteredContext)
 
   useEffect(() => {
@@ -72,7 +76,7 @@ export default function Registered() {
         const customAddress = billingAddress.length && billingAddress.filter((field: RegisterFileds) => field.custom)
         const addressExtraFields: Array<RegisterFileds> = conversionDataFormat(customAddress)
 
-        addressInformationFields.forEach((addressFileds) => {
+        addressInformationFields(b3Lang).forEach((addressFileds) => {
           if (addressFileds.name === 'country') {
             addressFileds.options = countries
           }
@@ -91,9 +95,9 @@ export default function Registered() {
               additionalInformation: [...newAdditionalInformation],
               bcContactInformationFields: [...bcContactInformationFields],
               companyExtraFields: [...newCompanyExtraFields],
-              companyInformation: [...companyInformationFields],
-              companyAttachment: [...companyAttachmentsFields],
-              addressBasicFields: [...addressInformationFields],
+              companyInformation: [...companyInformationFields(b3Lang)],
+              companyAttachment: [...companyAttachmentsFields(b3Lang)],
+              addressBasicFields: [...addressInformationFields(b3Lang)],
               addressExtraFields: [...addressExtraFields],
               countryList: [...countries],
               passwordInformation: [...newPasswordInformation],
@@ -141,7 +145,7 @@ export default function Registered() {
     <RegisteredContainer>
       <B3Sping
         isSpinning={isLoading}
-        tip="Loading..."
+        tip={b3Lang('intl.global.tips.loading')}
       >
         {
           logo && (
@@ -153,7 +157,7 @@ export default function Registered() {
             >
               <img
                 src={`${logo}`}
-                alt="register Logo"
+                alt={b3Lang('intl.user.register.tips.registerLogo')}
                 loading="lazy"
               />
             </ImageListItem>