feat(BUN-2176): new storeConfig slice with currencies (#976)

* feat(BUN-2176): new storeConfig slice with currencies * fix(BUN-2176): typo in storeConfig slice * fix(BUN-2176): typo in storeConfig reducer * fix(BUN-2176): typo in storeConfig selector * feat(BUN-2176): enteredInclusiveTax callers refac * fix(BUN-2176): improving readability * fix(BUN-2176): removing log and shadowed var * fix(BUN-2176): separating types
bigcommerce · Mar 27, 2024 · fa1034f · fa1034f
1 parent c076e51
commit fa1034f
Show file tree

Hide file tree

Showing 21 changed files with 238 additions and 146 deletions.
diff --git a/apps/storefront/.eslintrc.json b/apps/storefront/.eslintrc.json
@@ -22,10 +22,7 @@
       }
     },
     {
-      "files": [
-        "src/hooks/dom/*.ts",
-        "src/hooks/*.ts"
-      ],
+      "files": ["src/hooks/dom/*.ts", "src/hooks/*.ts"],
       "rules": {
         "react-hooks/exhaustive-deps": 0
       }
@@ -131,7 +128,7 @@
       "rules": { "react/jsx-wrap-multilines": 0 }
     },
     {
-      "files": ["src/**/*.{ts,tsx}"],
+      "files": ["src/**/*.{ts,tsx}", "tests/**/*.{ts,tsx}"],
       "rules": { "import/extensions": 0 }
     },
     {

diff --git a/apps/storefront/src/components/upload/B3Upload.tsx b/apps/storefront/src/components/upload/B3Upload.tsx
@@ -8,6 +8,7 @@ import {
   useState,
 } from 'react'
 import { DropzoneArea } from 'react-mui-dropzone'
+import { useSelector } from 'react-redux'
 import styled from '@emotion/styled'
 import InsertDriveFile from '@mui/icons-material/InsertDriveFile'
 import { Alert, Box, Link, useTheme } from '@mui/material'
@@ -21,7 +22,8 @@ import {
   BcProductsBulkUploadCSV,
   guestProductsBulkUploadCSV,
 } from '@/shared/service/b2b'
-import { b2bLogger, getDefaultCurrencyInfo } from '@/utils'
+import { defaultCurrencyCodeSelector } from '@/store'
+import { b2bLogger } from '@/utils'
 
 import B3Dialog from '../B3Dialog'
 
@@ -91,7 +93,8 @@ export default function B3Upload(props: B3UploadProps) {
   const [fileName, setFileName] = useState('')
   const [fileErrorText, setFileErrorText] = useState('')
 
-  const { currency_code: currencyCode } = getDefaultCurrencyInfo()
+  const currency = useSelector(defaultCurrencyCodeSelector)
+  const { currency_code: currencyCode } = currency
 
   const getRejectMessage = (
     rejectedFile: File,

diff --git a/apps/storefront/src/pages/invoice/Invoice.tsx b/apps/storefront/src/pages/invoice/Invoice.tsx
@@ -23,11 +23,11 @@ import {
 import { InvoiceList, InvoiceListNode } from '@/types/invoice'
 import {
   b2bLogger,
-  B3SStorage,
   currencyFormat,
   currencyFormatInfo,
   displayFormat,
   getUTCTimestamp,
+  handleGetCorrespondingCurrencyToken,
   snackbar,
 } from '@/utils'
 
@@ -80,7 +80,6 @@ function Invoice() {
   const [isMobile] = useMobile()
   const paginationTableRef = useRef<PaginationTableRefProps | null>(null)
 
-  const allCurrencies = B3SStorage.get('currencies')
   const { decimal_places: decimalPlaces = 2 } = currencyFormatInfo()
 
   const [isRequestLoading, setIsRequestLoading] = useState<boolean>(false)
@@ -152,21 +151,6 @@ function Invoice() {
     setFilterLists(copyCacheFilterList)
   }
 
-  const handleGetCorrespondingCurrency = (code: string) => {
-    const { currencies: currencyArr } = allCurrencies
-    let token = '$'
-    const correspondingCurrency =
-      currencyArr.find(
-        (currency: CustomFieldItems) => currency.currency_code === code
-      ) || {}
-
-    if (correspondingCurrency) {
-      token = correspondingCurrency.token
-    }
-
-    return token
-  }
-
   const handleStatisticsInvoiceAmount = async () => {
     try {
       setIsRequestLoading(true)
@@ -569,7 +553,7 @@ function Invoice() {
         const { originalBalance } = item
         const originalAmount = (+originalBalance.value).toFixed(decimalPlaces)
 
-        const token = handleGetCorrespondingCurrency(originalBalance.code)
+        const token = handleGetCorrespondingCurrencyToken(originalBalance.code)
 
         return `${token}${originalAmount || 0}`
       },
@@ -583,7 +567,7 @@ function Invoice() {
         const { openBalance } = item
 
         const openAmount = (+openBalance.value).toFixed(decimalPlaces)
-        const token = handleGetCorrespondingCurrency(openBalance.code)
+        const token = handleGetCorrespondingCurrencyToken(openBalance.code)
 
         return `${token}${openAmount || 0}`
       },
@@ -632,7 +616,7 @@ function Invoice() {
                   position="start"
                   sx={{ padding: '8px 0', marginTop: '0 !important' }}
                 >
-                  {handleGetCorrespondingCurrency(currentCode)}
+                  {handleGetCorrespondingCurrencyToken(currentCode)}
                 </InputAdornment>
               ),
             }}
@@ -870,7 +854,9 @@ function Invoice() {
               setInvoiceId={setCurrentInvoiceId}
               handleOpenHistoryModal={setIsOpenHistorys}
               selectedPay={selectedPay}
-              handleGetCorrespondingCurrency={handleGetCorrespondingCurrency}
+              handleGetCorrespondingCurrency={
+                handleGetCorrespondingCurrencyToken
+              }
               addBottom={list.length - 1 === index}
             />
           )}

diff --git a/apps/storefront/src/pages/invoice/components/InvoiceFooter.tsx b/apps/storefront/src/pages/invoice/components/InvoiceFooter.tsx
@@ -10,7 +10,7 @@ import {
   BcCartDataLineItem,
   InvoiceListNode,
 } from '@/types/invoice'
-import { B3SStorage, snackbar } from '@/utils'
+import { handleGetCorrespondingCurrencyToken, snackbar } from '@/utils'
 
 import { gotoInvoiceCheckoutUrl } from '../utils/payment'
 
@@ -22,7 +22,6 @@ interface InvoiceFooterProps {
 function InvoiceFooter(props: InvoiceFooterProps) {
   const platform = useAppSelector(({ global }) => global.storeInfo.platform)
   const b3Lang = useB3Lang()
-  const allCurrencies = B3SStorage.get('currencies')
   const [isMobile] = useMobile()
   const [selectedAccount, setSelectedAccount] = useState<number | string>(0)
   const [currentToken, setCurrentToken] = useState<string>('$')
@@ -82,21 +81,6 @@ function InvoiceFooter(props: InvoiceFooterProps) {
 
   useEffect(() => {
     if (selectedPay.length > 0) {
-      const handleGetCorrespondingCurrency = (code: string) => {
-        const { currencies: currencyArr } = allCurrencies
-        let token = '$'
-        const correspondingCurrency =
-          currencyArr.find(
-            (currency: CustomFieldItems) => currency.currency_code === code
-          ) || {}
-
-        if (correspondingCurrency) {
-          token = correspondingCurrency.token
-        }
-
-        return token
-      }
-
       const handleStatisticsInvoiceAmount = (checkedArr: CustomFieldItems) => {
         let amount = 0
 
@@ -113,11 +97,11 @@ function InvoiceFooter(props: InvoiceFooterProps) {
         node: { openBalance },
       } = selectedPay[0]
 
-      const token = handleGetCorrespondingCurrency(openBalance.code)
+      const token = handleGetCorrespondingCurrencyToken(openBalance.code)
       setCurrentToken(token)
       handleStatisticsInvoiceAmount(selectedPay)
     }
-  }, [allCurrencies, decimalPlaces, selectedPay])
+  }, [decimalPlaces, selectedPay])
 
   return (
     <Grid

diff --git a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
@@ -6,6 +6,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import { useSelector } from 'react-redux'
 import { useB3Lang } from '@b3/lang'
 import { Box, styled, TextField, Typography } from '@mui/material'
 
@@ -21,11 +22,11 @@ import {
   searchB2BProducts,
   searchBcProducts,
 } from '@/shared/service/b2b'
+import { defaultCurrencyCodeSelector } from '@/store'
 import {
   currencyFormat,
   displayFormat,
   distanceDay,
-  getDefaultCurrencyInfo,
   getProductPriceIncTax,
   snackbar,
 } from '@/utils'
@@ -162,7 +163,8 @@ function QuickorderTable({
 
   const b3Lang = useB3Lang()
 
-  const { currency_code: currencyCode } = getDefaultCurrencyInfo()
+  const currency = useSelector(defaultCurrencyCodeSelector)
+  const { currency_code: currencyCode } = currency
 
   const handleGetProductsById = async (listProducts: ListItemProps[]) => {
     if (listProducts.length > 0) {

diff --git a/apps/storefront/src/pages/quote/QuoteDetail.tsx b/apps/storefront/src/pages/quote/QuoteDetail.tsx
@@ -15,13 +15,13 @@ import {
   searchB2BProducts,
   searchBcProducts,
 } from '@/shared/service/b2b'
-import { TaxZoneRates, useAppSelector } from '@/store'
 import {
-  getDefaultCurrencyInfo,
-  getSearchVal,
-  getVariantInfoOOSAndPurchase,
-  snackbar,
-} from '@/utils'
+  defaultCurrencyCodeSelector,
+  TaxZoneRates,
+  useAppSelector,
+} from '@/store'
+import { Currency } from '@/types'
+import { getSearchVal, getVariantInfoOOSAndPurchase, snackbar } from '@/utils'
 import { conversionProductsList } from '@/utils/b3Product/shared/config'
 
 import Message from './components/Message'
@@ -69,16 +69,14 @@ function QuoteDetail() {
   })
   const [isRequestLoading, setIsRequestLoading] = useState(false)
   const [isShowFooter, setIsShowFooter] = useState(false)
-  const { currency_code: currencyCode } = getDefaultCurrencyInfo()
-
   const [quoteDetailTax, setQuoteDetailTax] = useState(0)
-
   const [noBuyerProductName, setNoBuyerProductName] = useState({
     oos: '',
     nonPurchasable: '',
   })
 
   const location = useLocation()
+  const currency = useAppSelector(defaultCurrencyCodeSelector)
   const taxZoneRates = useAppSelector(({ global }) => global.taxZoneRates)
   const enteredInclusiveTax = useAppSelector(
     ({ global }) => global.enteredInclusive
@@ -200,6 +198,7 @@ function QuoteDetail() {
       const getProducts = isB2BUser ? searchB2BProducts : searchBcProducts
 
       try {
+        const { currency_code: currencyCode } = currency as Currency
         const { productsSearch } = await getProducts({
           productIds,
           currencyCode,

diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailSummary.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailSummary.tsx
@@ -20,25 +20,21 @@ interface QuoteDetailSummaryProps {
   isHideQuoteCheckout: boolean
 }
 
-export default function QuoteDetailSummary(props: QuoteDetailSummaryProps) {
+export default function QuoteDetailSummary({
+  quoteSummary: { originalSubtotal, discount, tax, shipping, totalAmount },
+  quoteDetailTax = 0,
+  status,
+  quoteDetail,
+  isHideQuoteCheckout,
+}: QuoteDetailSummaryProps) {
   const b3Lang = useB3Lang()
-  const {
-    quoteSummary: { originalSubtotal, discount, tax, shipping, totalAmount },
-    quoteDetailTax = 0,
-    status,
-    quoteDetail,
-    isHideQuoteCheckout,
-  } = props
   const enteredInclusiveTax = useAppSelector(
     ({ global }) => global.enteredInclusive
   )
   const showInclusiveTaxPrice = useAppSelector(
     ({ global }) => global.showInclusiveTaxPrice
   )
 
-  const subtotalPrice = +originalSubtotal
-  const quotedSubtotal = +originalSubtotal - +discount
-
   const getCurrentPrice = (price: number, quoteDetailTax: number) => {
     if (enteredInclusiveTax) {
       return showInclusiveTaxPrice ? price : price - quoteDetailTax
@@ -102,6 +98,8 @@ export default function QuoteDetailSummary(props: QuoteDetailSummaryProps) {
     return price
   }
 
+  const subtotalPrice = +originalSubtotal
+  const quotedSubtotal = +originalSubtotal - +discount
   return (
     <Card>
       <CardContent>

diff --git a/apps/storefront/src/shared/global/context/config.ts b/apps/storefront/src/shared/global/context/config.ts
@@ -173,14 +173,14 @@ export const initState = {
   shoppingListEnabled: false,
   registerEnabled: true,
   quoteConfig: [],
-  currencies: B3SStorage.get('currencies') || {},
+  currencies: {},
   openAPPParams: {
     quoteBtn: '',
     shoppingListBtn: '',
   },
   showPageMask: false,
   timeFormat: B3SStorage.get('timeFormat') || {},
-  enteredInclusiveTax: B3SStorage.get('enteredInclusiveTax') || false,
+  enteredInclusiveTax: false,
   blockPendingAccountOrderCreation:
     B3SStorage.get('blockPendingAccountOrderCreation') || true,
   quoteDetailHasNewMessages: false,

diff --git a/apps/storefront/src/store/reducer.ts b/apps/storefront/src/store/reducer.ts
@@ -3,6 +3,7 @@ import { configureStore } from '@reduxjs/toolkit'
 
 import global from './slices/global'
 import lang from './slices/lang'
+import storeConfigs from './slices/storeConfigs'
 import theme from './slices/theme'
 
 export const middlewareOptions = {
@@ -24,6 +25,7 @@ export const store = configureStore({
   reducer: {
     global,
     lang,
+    storeConfigs,
     theme,
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware(middlewareOptions),

diff --git a/apps/storefront/src/store/selectors.ts b/apps/storefront/src/store/selectors.ts
@@ -1,12 +1,21 @@
 import { createSelector } from '@reduxjs/toolkit'
 
+import { Currency } from '@/types'
+
 import { RootState } from './reducer'
 
 const themeSelector = (state: RootState) => state.theme
+const storeConfigSelector = (state: RootState) => state.storeConfigs
 
-// More selectors will be added
-// eslint-disable-next-line
 export const themeFrameSelector = createSelector(
   themeSelector,
   (theme) => theme.themeFrame
 )
+
+export const defaultCurrencyCodeSelector = createSelector(
+  storeConfigSelector,
+  (storeConfigs) =>
+    storeConfigs.currencies?.currencies.find(
+      (currency: Currency) => currency.is_default
+    )
+)