feat: consume data provided by translation service backend

bigcommerce · Sep 28, 2023 · 1b21f20 · 1b21f20
1 parent c73d132
commit 1b21f20
Show file tree

Hide file tree

Showing 54 changed files with 695 additions and 481 deletions.
diff --git a/apps/storefront/.env-example b/apps/storefront/.env-example
@@ -1,5 +1,6 @@
 VITE_B2B_URL=http://localhost:9000
 VITE_B2B_SOCKET_URL=http://localhost:9000
+VITE_TRANSLATION_SERVICE_URL=http://localhost:5000
 VITE_STORE_HASH=store_hash
 VITE_CATPCHA_SETKEY=captcha_setkey
 VITE_B2B_CLIENT_ID=client_id

diff --git a/apps/storefront/src/components/B3StoreContainer.tsx b/apps/storefront/src/components/B3StoreContainer.tsx
@@ -3,7 +3,7 @@ import { ReactNode, useContext, useLayoutEffect } from 'react'
 import { GlobaledContext } from '@/shared/global'
 import { getBCStoreChannelId } from '@/shared/service/b2b'
 import { setHeadLessBcUrl, store } from '@/store'
-import { B3SStorage, storeHash } from '@/utils'
+import { B3SStorage, setGlobalTranslation, storeHash } from '@/utils'
 import { getCurrentStoreInfo } from '@/utils/loginInfo'
 
 import B3PageMask from './loadding/B3PageMask'
@@ -22,6 +22,7 @@ interface StoreItem {
   b3ChannelId: number
   type: string
   platform: string
+  translationVersion: number
 }
 
 export interface StoreBasicInfo {
@@ -52,13 +53,14 @@ export default function B3StoreContainer(props: B3StoreContainerProps) {
           storeBasicInfo.multiStorefrontEnabled
         )
 
-        if (!storeInfo?.channelId) return
+        if (!storeInfo) return
 
         const {
           channelId,
           b3ChannelId: b2bChannelId,
           b2bEnabled: storeEnabled,
           platform,
+          translationVersion,
         } = storeInfo
 
         const bcUrl =
@@ -84,6 +86,10 @@ export default function B3StoreContainer(props: B3StoreContainerProps) {
           showPageMask(dispatch, false)
         }
 
+        if (translationVersion > 0) {
+          setGlobalTranslation({ translationVersion, channelId })
+        }
+
         store.dispatch(setHeadLessBcUrl(bcUrl))
         B3SStorage.set('timeFormat', storeBasicInfo.timeFormat)
         B3SStorage.set('B3channelId', channelId)

diff --git a/apps/storefront/src/components/layout/B3Nav.tsx b/apps/storefront/src/components/layout/B3Nav.tsx
@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { useB3Lang } from '@b3/lang'
 import {
   Badge,
   List,
@@ -29,6 +30,7 @@ export default function B3Nav({ closeSidebar }: B3NavProps) {
   const [isMobile] = useMobile()
   const navigate = useNavigate()
   const location = useLocation()
+  const b3Lang = useB3Lang()
 
   const { dispatch } = useContext(DynamicallyVariableedContext)
 
@@ -170,7 +172,7 @@ export default function B3Nav({ closeSidebar }: B3NavProps) {
                   onClick={() => handleClick(item)}
                   selected={activePath(item.path)}
                 >
-                  <ListItemText primary={item.name} />
+                  <ListItemText primary={b3Lang(item.idLang)} />
                 </ListItemButton>
               </Badge>
             </ListItem>
@@ -182,7 +184,7 @@ export default function B3Nav({ closeSidebar }: B3NavProps) {
               onClick={() => handleClick(item)}
               selected={activePath(item.path)}
             >
-              <ListItemText primary={item.name} />
+              <ListItemText primary={b3Lang(item.idLang)} />
             </ListItemButton>
           </ListItem>
         )

diff --git a/apps/storefront/src/components/layout/B3RenderRouter.tsx b/apps/storefront/src/components/layout/B3RenderRouter.tsx
@@ -16,7 +16,6 @@ import {
 import type { OpenPageState } from '@b3/hooks'
 
 import Loading from '@/components/loadding/Loading'
-// import { B3Layout, Loading } from '@/components'
 import { RegisteredProvider } from '@/pages/registered/context/RegisteredContext'
 import { GlobaledContext } from '@/shared/global'
 import {
@@ -25,8 +24,7 @@ import {
   RouteFirstLevelItem,
   RouteItem,
 } from '@/shared/routes/routes'
-
-// import B3LayoutTip from './B3LayoutTip'
+import { setTranslation } from '@/utils'
 
 const B3Layout = lazy(() => import('@/components/layout/B3Layout'))
 
@@ -60,6 +58,13 @@ export default function B3RenderRouter(props: B3RenderRouterProps) {
     }
   }, [openUrl])
 
+  useEffect(() => {
+    const [, page] = location.pathname.split('/')
+    if (!page) return
+
+    setTranslation({ channelId: globaledState.currentChannelId, page })
+  }, [location.pathname])
+
   return (
     <Suspense fallback={<Loading />}>
       <B3LayoutTip />

diff --git a/apps/storefront/src/pages/dashboard/Dashboard.tsx b/apps/storefront/src/pages/dashboard/Dashboard.tsx
@@ -238,7 +238,7 @@ function Dashboard(props: DashboardProps) {
                 borderRadius: '10px',
               }}
             >
-              Selected
+              {b3Lang('dashboard.selected')}
             </Box>
           )}
         </Box>

diff --git a/apps/storefront/src/pages/invoice/Invoice.tsx b/apps/storefront/src/pages/invoice/Invoice.tsx
@@ -1,5 +1,6 @@
 import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { useB3Lang } from '@b3/lang'
 import {
   Box,
   Button,
@@ -68,6 +69,7 @@ const initFilter = {
 
 function Invoice() {
   const currentDate = new Date().getTime()
+  const b3Lang = useB3Lang()
   const {
     state: { role, isAgenting },
   } = useContext(GlobaledContext)
@@ -97,8 +99,9 @@ function Invoice() {
   const [filterData, setFilterData] =
     useState<Partial<FilterSearchProps> | null>()
 
-  const [exportCsvText, setExportCsvText] =
-    useState<string>('Export all as CSV')
+  const [exportCsvText, setExportCsvText] = useState<string>(
+    b3Lang('invoice.exportCsvText')
+  )
 
   const [filterChangeFlag, setFilterChangeFlag] = useState(false)
   const [filterLists, setFilterLists] = useState<InvoiceListNode[]>([])
@@ -248,7 +251,7 @@ function Invoice() {
       const pdfUrl = await handlePrintPDF(id, isPayNow)
 
       if (!pdfUrl) {
-        snackbar.error('pdf url resolution error')
+        snackbar.error(b3Lang('invoice.pdfUrlResolutionError'))
         return
       }
 
@@ -483,7 +486,7 @@ function Invoice() {
   const columnAllItems: TableColumnItem<InvoiceList>[] = [
     {
       key: 'id',
-      title: 'Invoice',
+      title: b3Lang('invoice.headers.invoice'),
       isSortable: true,
       render: (item: InvoiceList) => (
         <Box
@@ -505,7 +508,7 @@ function Invoice() {
     },
     {
       key: 'orderNumber',
-      title: 'Order',
+      title: b3Lang('invoice.headers.order'),
       isSortable: true,
       render: (item: InvoiceList) => (
         <Box
@@ -527,15 +530,15 @@ function Invoice() {
     },
     {
       key: 'createdAt',
-      title: 'Invoice date',
+      title: b3Lang('invoice.headers.invoiceDate'),
       isSortable: true,
       render: (item: InvoiceList) =>
         `${item.createdAt ? displayFormat(+item.createdAt) : '–'}`,
       width: '10%',
     },
     {
       key: 'updatedAt',
-      title: 'Due date',
+      title: b3Lang('invoice.headers.dueDate'),
       isSortable: true,
       render: (item: InvoiceList) => {
         const { dueDate, status } = item
@@ -556,7 +559,7 @@ function Invoice() {
     },
     {
       key: 'originalBalance',
-      title: 'Invoice total',
+      title: b3Lang('invoice.headers.invoiceTotal'),
       isSortable: true,
       render: (item: InvoiceList) => {
         const { originalBalance } = item
@@ -570,7 +573,7 @@ function Invoice() {
     },
     {
       key: 'openBalance',
-      title: 'Amount due',
+      title: b3Lang('invoice.headers.amountDue'),
       isSortable: true,
       render: (item: InvoiceList) => {
         const { openBalance } = item
@@ -584,7 +587,7 @@ function Invoice() {
     },
     {
       key: 'openBalanceToPay',
-      title: 'Amount to pay',
+      title: b3Lang('invoice.headers.amountToPay'),
       render: (item: InvoiceList) => {
         const { openBalance, id } = item
         const currentCode = openBalance.code || 'USD'
@@ -651,7 +654,7 @@ function Invoice() {
     },
     {
       key: 'status',
-      title: 'Status',
+      title: b3Lang('invoice.headers.status'),
       isSortable: true,
       render: (item: InvoiceList) => {
         const { status, dueDate } = item
@@ -667,7 +670,7 @@ function Invoice() {
     },
     {
       key: 'companyName',
-      title: 'Action',
+      title: b3Lang('invoice.headers.action'),
       render: (row: InvoiceList) => {
         const { id } = row
         let actionRow = row
@@ -699,7 +702,7 @@ function Invoice() {
   ]
 
   useEffect(() => {
-    let exportCsvTexts = 'Export all as CSV'
+    let exportCsvTexts = b3Lang('invoice.exportCsvText')
 
     const filtering = filterData ? isFiltering(filterData) : false
     const currentCheckedArr = filtering
@@ -713,13 +716,13 @@ function Invoice() {
     if (filtering) {
       exportCsvTexts =
         currentCheckedArr.length > 0
-          ? 'Export selected as CSV'
-          : 'Export filtered as CSV'
+          ? b3Lang('invoice.exportSelectedAsCsv')
+          : b3Lang('invoice.exportFilteredAsCsv')
     } else {
       exportCsvTexts =
         currentCheckedArr.length > 0
-          ? 'Export selected as CSV'
-          : 'Export all as CSV'
+          ? b3Lang('invoice.exportSelectedAsCsv')
+          : b3Lang('invoice.exportCsvText')
     }
 
     setExportCsvText(exportCsvTexts)
@@ -749,7 +752,7 @@ function Invoice() {
             handleFilterChange={handleFilterChange}
             startPicker={{
               isEnabled: true,
-              label: 'From',
+              label: b3Lang('invoice.filter.from'),
               defaultValue:
                 typeof filterData?.beginDateAt === 'number'
                   ? +filterData.beginDateAt * 1000
@@ -758,7 +761,7 @@ function Invoice() {
             }}
             endPicker={{
               isEnabled: true,
-              label: 'To',
+              label: b3Lang('invoice.filter.to'),
               defaultValue:
                 typeof filterData?.endDateAt === 'number'
                   ? +filterData.endDateAt * 1000
@@ -781,7 +784,9 @@ function Invoice() {
                 color: '#000000',
               }}
             >
-              {`Open: ${currencyFormat(unpaidAmount)}`}
+              {b3Lang('invoice.openUnpaid', {
+                unpaid: currencyFormat(unpaidAmount),
+              })}
             </Typography>
             {document.body.clientWidth >= 465 && (
               <Typography
@@ -799,7 +804,9 @@ function Invoice() {
                 color: '#D32F2F',
               }}
             >
-              {`Overdue: ${currencyFormat(overdueAmount)}`}
+              {b3Lang('invoice.overdueAmount', {
+                overdue: currencyFormat(overdueAmount),
+              })}
             </Typography>
           </Box>
         </Box>

diff --git a/apps/storefront/src/pages/invoice/InvoiceItemCard.tsx b/apps/storefront/src/pages/invoice/InvoiceItemCard.tsx
@@ -1,5 +1,6 @@
 import { ReactElement } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { useB3Lang } from '@b3/lang'
 import styled from '@emotion/styled'
 import {
   Box,
@@ -50,6 +51,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
     handleGetCorrespondingCurrency,
     addBottom,
   } = props
+  const b3Lang = useB3Lang()
   const navigate = useNavigate()
 
   const { id, status, dueDate, openBalance } = item
@@ -64,7 +66,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
   const columnAllItems: TableColumnItem<InvoiceList>[] = [
     {
       key: 'orderNumber',
-      title: 'Order',
+      title: b3Lang('invoice.invoiceItemCardHeader.order'),
       render: () => (
         <Box
           sx={{
@@ -82,12 +84,12 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
     },
     {
       key: 'createdAt',
-      title: 'Invoice date',
+      title: b3Lang('invoice.invoiceItemCardHeader.invoiceDate'),
       render: () => `${item.createdAt ? displayFormat(+item.createdAt) : '–'}`,
     },
     {
       key: 'updatedAt',
-      title: 'Due date',
+      title: b3Lang('invoice.invoiceItemCardHeader.dueDate'),
       render: () => {
         const { dueDate, status } = item
         const isOverdue = currentDate > dueDate * 1000 && status !== 2
@@ -106,7 +108,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
     },
     {
       key: 'originalBalance',
-      title: 'Invoice total',
+      title: b3Lang('invoice.invoiceItemCardHeader.invoiceTotal'),
       render: () => {
         const { originalBalance } = item
         const originalAmount = +originalBalance.value
@@ -116,7 +118,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
     },
     {
       key: 'openBalance',
-      title: 'Amount due',
+      title: b3Lang('invoice.invoiceItemCardHeader.amountDue'),
       render: () => {
         const { openBalance } = item
 
@@ -127,7 +129,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
     },
     {
       key: 'openBalanceToPay',
-      title: 'Amount to pay',
+      title: b3Lang('invoice.invoiceItemCardHeader.amountToPay'),
       render: () => {
         const { openBalance, id } = item
         let valuePrice = openBalance.value