fix: simplify default currency functions (#984)

* fix: simplify default currency functions * fix: multiple fixes * fix: remove line * feat: upgrade way to patch a dependency * feat: update package following vite recommendations * fix: add properly translations to redux
bigcommerce · Mar 29, 2024 · 5d92989 · 5d92989
1 parent d0dc1d1
commit 5d92989
Show file tree

Hide file tree

Showing 12 changed files with 1,491 additions and 873 deletions.
diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -1,5 +1,6 @@
 {
   "name": "storefront",
+  "type": "module",
   "private": true,
   "version": "0.0.0",
   "scripts": {
@@ -10,8 +11,7 @@
     "preview": "vite preview",
     "test": "vitest",
     "coverage": "vitest --coverage",
-    "start": "http-server ./dist --cors",
-    "postinstall": "patch-package"
+    "start": "http-server ./dist --cors"
   },
   "dependencies": {
     "@b3/global-b3": "*",
@@ -26,7 +26,6 @@
     "@mui/styles": "^5.8.7",
     "@mui/x-date-pickers": "5.0.20",
     "@reduxjs/toolkit": "^2.2.1",
-    "@rollup/plugin-graphql": "^1.1.0",
     "@types/babel__core": "^7.1.19",
     "@types/lodash-es": "^4.17.8",
     "@types/pdfobject": "^2.2.3",
@@ -37,7 +36,6 @@
     "dayjs": "^1.11.10",
     "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
-    "patch-package": "^8.0.0",
     "pdfobject": "^2.2.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -63,18 +61,18 @@
     "@types/react-dom": "^18.0.0",
     "@types/react-infinite-scroller": "^1.2.3",
     "@types/uuid": "^8.3.4",
-    "@vitejs/plugin-legacy": "^2.0.0",
-    "@vitejs/plugin-react": "^2.0.0",
-    "@vitest/coverage-istanbul": "^0.34.4",
+    "@vitejs/plugin-legacy": "^5.3.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-istanbul": "^1.4.0",
     "babel-plugin-import": "^1.13.8",
     "c8": "^7.11.3",
     "eslint": "^7.32.0 || ^8.2.0",
     "eslint-config-b2b": "*",
     "jsdom": "^20.0.0",
-    "rollup-plugin-visualizer": "^5.9.2",
+    "rollup-plugin-visualizer": "^5.12.0",
     "terser": "^5.14.2",
     "typescript": "^4.7.4",
-    "vite": "^3.0.0",
-    "vitest": "^0.18.0"
+    "vite": "^5.2.6",
+    "vitest": "^1.4.0"
   }
 }
diff --git a/apps/storefront/src/store/slices/lang.ts b/apps/storefront/src/store/slices/lang.ts
@@ -5,7 +5,7 @@ import storage from 'redux-persist/lib/storage'
 import { getGlobalTranslations, getPageTranslations } from '../appAsyncThunks'
 
 export interface LangState {
-  translations: Record<string, Record<string, string>>
+  translations: Record<string, string>
   fetchedPages: string[]
   translationVersion: number
 }
@@ -22,12 +22,18 @@ export const langSlice = createSlice({
   reducers: {},
   extraReducers(builder) {
     builder.addCase(getGlobalTranslations.fulfilled, (state, { payload }) => {
-      state.translations = { global: payload.globalTranslations }
+      Object.entries(payload.globalTranslations).forEach(
+        ([key, translation]) => {
+          state.translations[key] = translation
+        }
+      )
       state.translationVersion = payload.newVersion
       state.fetchedPages = ['global']
     })
     builder.addCase(getPageTranslations.fulfilled, (state, { payload }) => {
-      state.translations[payload.page] = payload.pageTranslations
+      Object.entries(payload.pageTranslations).forEach(([key, translation]) => {
+        state.translations[key] = translation
+      })
       state.fetchedPages.push(payload.page)
     })
   },

diff --git a/apps/storefront/src/utils/currencyUtils.ts b/apps/storefront/src/utils/currencyUtils.ts
@@ -1,40 +1,36 @@
 import { store } from '@/store'
 import { defaultCurrenciesState } from '@/store/slices/storeConfigs'
-import { ActiveCurrency, Currencies, Currency } from '@/types'
 
 const defaultCurrency = defaultCurrenciesState.currencies[0]
 
 const getActiveCurrencyInfo = () => {
-  const { currencies } = store.getState().storeConfigs.currencies as Currencies
-  const { node: activeCurrencyObj }: ActiveCurrency = store.getState()
-    .storeConfigs.activeCurrency as ActiveCurrency
-  const activeCurrency: Currency | undefined = currencies.find(
-    (currency: Currency) => +currency.id === activeCurrencyObj.entityId
+  const { currencies } = store.getState().storeConfigs.currencies
+  const activeCurrencyObj = store.getState().storeConfigs.activeCurrency?.node
+  const activeCurrency = currencies.find(
+    (currency) => +currency.id === activeCurrencyObj?.entityId
   )
 
   return activeCurrency || defaultCurrency
 }
 
 const getDefaultCurrencyInfo = () => {
-  const currencies = store.getState().storeConfigs.currencies as Currencies
-  const { currencies: currencyArr } = currencies
+  const { currencies } = store.getState().storeConfigs.currencies
 
-  const defaultFoundCurrency: Currency | undefined = currencyArr.find(
-    (currency: Currency) => currency.is_default
+  const defaultFoundCurrency = currencies.find(
+    (currency) => currency.is_default
   )
   return defaultFoundCurrency || defaultCurrency
 }
 
 const handleGetCorrespondingCurrencyToken = (code: string) => {
-  const allCurrencies = store.getState().storeConfigs.currencies as Currencies
-  if (!allCurrencies) return '$'
-  const { currencies: currencyArr } = allCurrencies
+  const correspondingCurrency = store
+    .getState()
+    .storeConfigs.currencies.currencies.find(
+      (currency) => currency.currency_code === code
+    )
   let token = '$'
-  const correspondingCurrency = currencyArr.find(
-    (currency: CustomFieldItems) => currency.currency_code === code
-  ) || { token: '$' }
 
-  if (correspondingCurrency) {
+  if (correspondingCurrency?.token) {
     token = correspondingCurrency.token
   }
 

diff --git a/apps/storefront/tests/components/ThemeFrame.test.tsx b/apps/storefront/tests/components/ThemeFrame.test.tsx
@@ -8,8 +8,6 @@ import { renderWithProviders } from '../test-utils'
 
 describe('ThemeFrame', () => {
   it('should render iframe and main document should not contain anything else', () => {
-    expect(document.head.querySelector('style')).toBeNull()
-
     const { store } = renderWithProviders(
       <ThemeFrame title="test-frame">{null}</ThemeFrame>,
       {

diff --git a/apps/storefront/tests/components/b3table/__snapshots__/B3Table.test.tsx.snap b/apps/storefront/tests/components/b3table/__snapshots__/B3Table.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`B3Table component > matching b3table with snapshot 1`] = `
 {

diff --git a/apps/storefront/tests/components/quickOrder/QuickOrder.test.tsx b/apps/storefront/tests/components/quickOrder/QuickOrder.test.tsx
@@ -4,6 +4,7 @@ import { ThemeFrame } from '@/components'
 import Quickorder from '@/pages/quickorder/Quickorder'
 import { GlobalProvider } from '@/shared/global'
 import global from '@/store/slices/global'
+import storeConfigs from '@/store/slices/storeConfigs'
 import theme from '@/store/slices/theme'
 
 import { renderWithProviders } from '../../test-utils'
@@ -37,7 +38,7 @@ describe('Quickorder component', () => {
         </ThemeFrame>
       </GlobalProvider>,
       {
-        reducer: { global, theme },
+        reducer: { global, theme, storeConfigs },
       }
     )
   })

diff --git a/apps/storefront/vite.config.ts b/apps/storefront/vite.config.ts
@@ -2,7 +2,7 @@
 /// <reference types="vitest" />
 import legacy from '@vitejs/plugin-legacy'
 import react from '@vitejs/plugin-react'
-import path from 'path' // eslint-disable-line
+import path from 'path'
 import { visualizer } from 'rollup-plugin-visualizer'
 import { defineConfig, loadEnv } from 'vite'
 
@@ -56,11 +56,17 @@ export default defineConfig(({ mode }) => {
     test: {
       environment: 'jsdom',
       coverage: {
+        provider: 'istanbul',
         reporter: ['text', 'html', 'clover', 'json'],
       },
       deps: {
         inline: ['react-intl'],
       },
+      poolOptions: {
+        threads: {
+          singleThread: true,
+        },
+      },
     },
     resolve: {
       alias: {
@@ -104,13 +110,12 @@ export default defineConfig(({ mode }) => {
           eReact: ['@emotion/react'],
           eStyled: ['@emotion/styled'],
         },
-        plugins: [
-          env.VITE_VISUALIZER === '1' &&
-            visualizer({
-              open: true,
-              gzipSize: true,
-              brotliSize: true,
-            }),
+        plugins: env.VITE_VISUALIZER === '1' && [
+          visualizer({
+            open: true,
+            gzipSize: true,
+            brotliSize: true,
+          }),
         ],
       },
     },

diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "eslint-config-b2b": "*",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
+    "patch-package": "^8.0.0",
     "prettier": "^2",
     "turbo": "latest"
   },

diff --git a/packages/lang/LangProvider.tsx b/packages/lang/LangProvider.tsx
@@ -9,10 +9,7 @@ interface LangProviderProps {
   customText?: Record<string, string>
 }
 
-export default function LangProvider({
-  children,
-  customText = {},
-}: LangProviderProps) {
+function LangProvider({ children, customText = {} }: LangProviderProps) {
   const translations = useSelector(({ lang }) => lang.translations)
   return (
     <IntlProvider
@@ -24,3 +21,4 @@ export default function LangProvider({
     </IntlProvider>
   )
 }
+export default LangProvider
diff --git a/packages/lang/package.json b/packages/lang/package.json
@@ -16,7 +16,6 @@
     "@types/react": "^18.0.0",
     "eslint": "^7.32.0 || ^8.2.0",
     "eslint-config-b2b": "*",
-    "tsup": "^5.10.1",
     "typescript": "^4.7.4"
   }
 }
diff --git a/patches/@mui+material+5.15.4.patch b/patches/@mui+material+5.15.4.patch