feat: implement catch system for translation service (#616)

* feat: add new translate catch template * fix: wrap id with lang function
bigcommerce · Sep 8, 2023 · c5272b3 · c5272b3
1 parent a004685
commit c5272b3
Show file tree

Hide file tree

Showing 100 changed files with 1,369 additions and 867 deletions.
diff --git a/apps/storefront/src/components/HeadlessController.tsx b/apps/storefront/src/components/HeadlessController.tsx
@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction, useContext, useEffect, useRef } from 'react'
 import { useDispatch } from 'react-redux'
 import globalB3 from '@b3/global-b3'
 import type { OpenPageState } from '@b3/hooks'
+import { useB3Lang } from '@b3/lang'
 
 import { HeadlessRoutes } from '@/constants'
 import { addProductFromPage as addProductFromPageToShoppingList } from '@/hooks/dom/useOpenPDP'
@@ -116,6 +117,7 @@ export default function HeadlessController({
   setOpenPage,
 }: HeadlessControllerProps) {
   const storeDispatch = useDispatch()
+  const b3Lang = useB3Lang()
 
   const {
     dispatch,
@@ -260,6 +262,7 @@ export default function HeadlessController({
               isB2BUser: isB2BUserRef.current,
               customerGroupId: customerRef.current.customerGroupId,
               gotoShoppingDetail,
+              b3Lang,
             }),
           createNewShoppingList: async (name, description) => {
             const { shoppingListsCreate } = await createShoppingList({

diff --git a/apps/storefront/src/components/filter/B3FilterMore.tsx b/apps/storefront/src/components/filter/B3FilterMore.tsx
@@ -6,6 +6,7 @@ import {
   useState,
 } from 'react'
 import { useForm } from 'react-hook-form'
+import { useB3Lang } from '@b3/lang'
 import FilterListIcon from '@mui/icons-material/FilterList'
 import { Badge, Box, IconButton, useTheme } from '@mui/material'
 
@@ -82,6 +83,7 @@ function B3FilterMore<T, Y>({
   })
 
   const [isMobile] = useMobile()
+  const b3Lang = useB3Lang()
 
   const theme = useTheme()
   const primaryColor = theme.palette.primary.main
@@ -206,9 +208,9 @@ function B3FilterMore<T, Y>({
 
       <B3Dialog
         isOpen={open}
-        leftSizeBtn="Cancel"
-        rightSizeBtn="Apply"
-        title="Filters"
+        leftSizeBtn={b3Lang('global.filter.cancel')}
+        rightSizeBtn={b3Lang('global.filter.apply')}
+        title={b3Lang('global.filter.title')}
         handleLeftClick={handleClose}
         handRightClick={handleSaveFilters}
       >
@@ -237,7 +239,7 @@ function B3FilterMore<T, Y>({
           onClick={handleClearFilters}
           size="small"
         >
-          clear filters
+          {b3Lang('global.filter.clearFilters')}
         </CustomButton>
       </B3Dialog>
     </Box>

diff --git a/apps/storefront/src/components/filter/B3FilterSearch.tsx b/apps/storefront/src/components/filter/B3FilterSearch.tsx
@@ -1,4 +1,5 @@
 import { ChangeEvent, useEffect, useState } from 'react'
+import { useB3Lang } from '@b3/lang'
 import SearchIcon from '@mui/icons-material/Search'
 import { InputBase, Paper } from '@mui/material'
 
@@ -18,11 +19,13 @@ function B3FilterSearch({
   w = '100%',
   h,
   searchBGColor = '#efeae7',
-  placeholder = 'Search',
   searchValue = '',
+  ...restProps
 }: B3FilterSearchProps) {
   const [search, setSearch] = useState<string>('')
+  const b3Lang = useB3Lang()
   const debouncedValue = useDebounce<string>(search, 500)
+  const { placeholder = b3Lang('global.filter.search') } = restProps
 
   const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value)

diff --git a/apps/storefront/src/components/form/B3ControlCheckbox.tsx b/apps/storefront/src/components/form/B3ControlCheckbox.tsx
@@ -42,7 +42,7 @@ export default function B3ControlCheckbox({
     rules: {
       required:
         required &&
-        b3Lang('intl.global.validate.required', {
+        b3Lang('global.validate.required', {
           label,
         }),
       validate: validate && ((v: string) => validate(v, b3Lang)),

diff --git a/apps/storefront/src/components/form/B3ControlFileUpload.tsx b/apps/storefront/src/components/form/B3ControlFileUpload.tsx
@@ -62,7 +62,7 @@ export default function B3ControlFileUpload(props: FileUploadProps) {
     acceptedFiles = FILE_UPLOAD_ACCEPT_TYPE,
     filesLimit = 3,
     maxFileSize = 2097152, // 2M
-    dropzoneText = b3Lang('intl.global.fileUpload.defaultText'),
+    dropzoneText = b3Lang('global.fileUpload.defaultText'),
     previewText = ' ',
     fieldType,
     default: defaultValue = [],
@@ -86,13 +86,13 @@ export default function B3ControlFileUpload(props: FileUploadProps) {
     })
 
     if (!isAcceptFileType) {
-      return b3Lang('intl.global.fileUpload.typeNotSupport', {
+      return b3Lang('global.fileUpload.typeNotSupport', {
         name,
       })
     }
 
     if (size > maxFileSize) {
-      return b3Lang('intl.global.fileUpload.fileSizeExceedsLimit', {
+      return b3Lang('global.fileUpload.namedFileSizeExceedsLimit', {
         name,
         maxSize: getMaxFileSizeLabel(maxFileSize),
       })
@@ -102,7 +102,7 @@ export default function B3ControlFileUpload(props: FileUploadProps) {
   }
 
   const getFileLimitExceedMessage = () =>
-    b3Lang('intl.global.fileUpload.fileNumberExceedsLimit', {
+    b3Lang('global.fileUpload.fileNumberExceedsLimit', {
       limit: filesLimit,
     })
 

diff --git a/apps/storefront/src/components/form/B3ControlPicker.tsx b/apps/storefront/src/components/form/B3ControlPicker.tsx
@@ -43,7 +43,7 @@ export default function B3ControlPicker({
     rules: {
       required:
         required &&
-        b3Lang('intl.global.validate.required', {
+        b3Lang('global.validate.required', {
           label,
         }),
       validate: validate && ((v: string) => validate(v, b3Lang)),

diff --git a/apps/storefront/src/components/form/B3ControlRadioGroup.tsx b/apps/storefront/src/components/form/B3ControlRadioGroup.tsx
@@ -36,7 +36,7 @@ export default function B3ControlRadioGroup({
     rules: {
       required:
         required &&
-        b3Lang('intl.global.validate.required', {
+        b3Lang('global.validate.required', {
           label,
         }),
       validate: validate && ((v: string) => validate(v, b3Lang)),

diff --git a/apps/storefront/src/components/form/B3ControlRectangle.tsx b/apps/storefront/src/components/form/B3ControlRectangle.tsx
@@ -41,7 +41,7 @@ export default function B3ControlRectangle({
     rules: {
       required:
         required &&
-        b3Lang('intl.global.validate.required', {
+        b3Lang('global.validate.required', {
           label,
         }),
       validate: validate && ((v: string) => validate(v, b3Lang)),

diff --git a/apps/storefront/src/components/form/B3ControlSelect.tsx b/apps/storefront/src/components/form/B3ControlSelect.tsx
@@ -45,7 +45,7 @@ export default function B3ControlSelect({
     rules: {
       required:
         required &&
-        b3Lang('intl.global.validate.required', {
+        b3Lang('global.validate.required', {
           label,
         }),
       validate: validate && ((v: string) => validate(v, b3Lang)),

diff --git a/apps/storefront/src/components/form/B3ControlTextField.tsx b/apps/storefront/src/components/form/B3ControlTextField.tsx
@@ -42,9 +42,9 @@ export default function B3ControlTextField({
 
   let requiredText = ''
   if (fieldType === 'password') {
-    requiredText = b3Lang('intl.global.validate.password.required')
+    requiredText = b3Lang('global.validate.password.required')
   } else {
-    requiredText = b3Lang('intl.global.validate.required', {
+    requiredText = b3Lang('global.validate.required', {
       label: labelName || label,
     })
   }

diff --git a/apps/storefront/src/components/table/B3NoData.tsx b/apps/storefront/src/components/table/B3NoData.tsx
@@ -1,3 +1,4 @@
+import { useB3Lang } from '@b3/lang'
 import styled from '@emotion/styled'
 import { DataUsageRounded } from '@mui/icons-material'
 
@@ -31,10 +32,13 @@ export default function B3NoData({
   minHeight,
   isLoading = false,
 }: B3NoDataProps) {
+  const b3Lang = useB3Lang()
   return (
     <NoDataContainer backgroundColor={backgroundColor} minHeight={minHeight}>
       {!isLoading && <DataUsageRounded fontSize="large" />}
-      <NoDataText>{isLoading ? '' : text || 'No data'}</NoDataText>
+      <NoDataText>
+        {isLoading ? '' : text || b3Lang('global.table.noData')}
+      </NoDataText>
     </NoDataContainer>
   )
 }
diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
@@ -6,6 +6,7 @@ import {
   useContext,
   useState,
 } from 'react'
+import { useB3Lang } from '@b3/lang'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
 import {
@@ -263,6 +264,8 @@ export function B3Table<T>({
 
   const [isMobile] = useMobile()
 
+  const b3Lang = useB3Lang()
+
   const { offset, count, first } = pagination
   const clickableRowStyles =
     typeof onClickRow === 'function' ? MOUSE_POINTER_STYLE : undefined
@@ -344,7 +347,9 @@ export function B3Table<T>({
               rowsPerPageOptions={
                 showRowsPerPageOptions ? rowsPerPageOptions : []
               }
-              labelRowsPerPage={labelRowsPerPage || 'per page:'}
+              labelRowsPerPage={
+                labelRowsPerPage || b3Lang('global.pagination.perPage')
+              }
               component="div"
               sx={{
                 color: isMobile
@@ -390,7 +395,9 @@ export function B3Table<T>({
               rowsPerPageOptions={
                 showRowsPerPageOptions ? rowsPerPageOptions : []
               }
-              labelRowsPerPage={labelRowsPerPage || 'Cards per page:'}
+              labelRowsPerPage={
+                labelRowsPerPage || b3Lang('global.pagination.cardsPerPage')
+              }
               component="div"
               sx={{
                 color: customColor,
@@ -517,7 +524,9 @@ export function B3Table<T>({
               rowsPerPageOptions={
                 showRowsPerPageOptions ? rowsPerPageOptions : []
               }
-              labelRowsPerPage={labelRowsPerPage || 'Rows per page:'}
+              labelRowsPerPage={
+                labelRowsPerPage || b3Lang('global.pagination.rowsPerPage')
+              }
               component="div"
               sx={{
                 marginTop: '1.5rem',

diff --git a/apps/storefront/src/hooks/dom/useRegisteredbctob2b.ts b/apps/storefront/src/hooks/dom/useRegisteredbctob2b.ts
@@ -28,7 +28,7 @@ const useRegisteredbctob2b = (
     convertB2BNavNode.className = 'navUser-item navUser-convert-b2b'
     convertB2BNavNode.innerHTML = `
       <a class="navUser-action" href="javascript:;" aria-label="Gift Certificates">
-        ${b3Lang('intl.global.nav.registerB2B.linkText')}
+        ${b3Lang('global.registerB2B.linkText')}
       </a>
     `
     return convertB2BNavNode

diff --git a/apps/storefront/src/locales/en-US/global.ts b/apps/storefront/src/locales/en-US/global.ts
diff --git a/apps/storefront/src/locales/en-US/index.ts b/apps/storefront/src/locales/en-US/index.ts