feat: upgrade redux-toolkit version (#963)

* feat: upgrade redux-toolkit version

* chore: upgrade react-redux

* fix: follow eslint suggestions

* fix: follow typescript restrictions

* feat: use typed hooks functions

* fix: use typed redux functions

* fix: memoize function to get variants

apps/storefront/package.json

@@ -17,7 +17,6 @@
     "@b3/global-b3": "*",
     "@b3/hooks": "*",
     "@b3/lang": "*",
-    "@b3/store": "*",
     "@b3/utils": "*",
     "@emotion/cache": "^11.9.3",
     "@emotion/react": "^11.9.3",
@@ -26,7 +25,7 @@
     "@mui/material": "^5.8.7",
     "@mui/styles": "^5.8.7",
     "@mui/x-date-pickers": "5.0.20",
-    "@reduxjs/toolkit": "^1.9.3",
+    "@reduxjs/toolkit": "^2.2.1",
     "@rollup/plugin-graphql": "^1.1.0",
     "@types/babel__core": "^7.1.19",
     "@types/lodash-es": "^4.17.8",
@@ -46,7 +45,7 @@
     "react-infinite-scroller": "^1.2.6",
     "react-mui-dropzone": "^4.0.6",
     "react-pdf": "^7.1.2",
-    "react-redux": "^8.0.5",
+    "react-redux": "^9.1.0",
     "react-resizable": "^3.0.5",
     "react-router-dom": "6",
     "ts-tracking-number": "^1.0.16",

apps/storefront/src/App.tsx

@@ -1,5 +1,4 @@
 import { lazy, useContext, useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
 import { HashRouter } from 'react-router-dom'
 import { useB3AppOpen } from '@b3/hooks'
 
@@ -30,9 +29,10 @@ import {
 
 import { getCompanyInfo } from './utils/loginInfo'
 import {
-  globalStateSelector,
   setGlabolCommonState,
   setOpenPageReducer,
+  useAppDispatch,
+  useAppSelector,
 } from './store'
 
 const B3GlobalTip = lazy(() => import('@/components/B3GlobalTip'))
@@ -70,14 +70,16 @@ export default function App() {
     dispatch,
   } = useContext(GlobaledContext)
 
-  const storeDispatch = useDispatch()
+  const storeDispatch = useAppDispatch()
 
-  const {
-    isClickEnterBtn,
-    isPageComplete,
-    currentClickedUrl,
-    isRegisterAndLogin,
-  } = useSelector(globalStateSelector)
+  const isClickEnterBtn = useAppSelector(({ global }) => global.isClickEnterBtn)
+  const isPageComplete = useAppSelector(({ global }) => global.isPageComplete)
+  const currentClickedUrl = useAppSelector(
+    ({ global }) => global.currentClickedUrl
+  )
+  const isRegisterAndLogin = useAppSelector(
+    ({ global }) => global.isRegisterAndLogin
+  )
 
   const handleAccountClick = (href: string, isRegisterAndLogin: boolean) => {
     showPageMask(dispatch, true)

apps/storefront/src/components/B3ProductList.tsx

@@ -18,7 +18,7 @@ import noop from 'lodash-es/noop'
 
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants'
 import { useMobile } from '@/hooks'
-import { store } from '@/store'
+import { useAppSelector } from '@/store'
 import { currencyFormat, ordersCurrencyFormat } from '@/utils'
 import {
   getDisplayPrice,
@@ -161,14 +161,11 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
   } = props
 
   const [list, setList] = useState<ProductItem[]>([])
-
   const [isMobile] = useMobile()
-
   const b3Lang = useB3Lang()
-
-  const {
-    global: { showInclusiveTaxPrice },
-  } = store.getState()
+  const showInclusiveTaxPrice = useAppSelector(
+    ({ global }) => global.showInclusiveTaxPrice
+  )
 
   const getQuantity = (product: any) =>
     parseInt(product[quantityKey]?.toString() || '', 10) || ''

apps/storefront/src/components/B3StoreContainer.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useContext, useLayoutEffect } from 'react'
 
 import { GlobaledContext } from '@/shared/global'
 import { getBCStoreChannelId } from '@/shared/service/b2b'
-import { setHeadLessBcUrl, setStoreInfo, store } from '@/store'
+import { setHeadLessBcUrl, setStoreInfo, useAppDispatch } from '@/store'
 import { B3SStorage, setGlobalTranslation, storeHash } from '@/utils'
 
 import B3PageMask from './loadding/B3PageMask'
@@ -34,6 +34,7 @@ export default function B3StoreContainer(props: B3StoreContainerProps) {
     state: { storeEnabled },
     dispatch,
   } = useContext(GlobaledContext)
+  const storeDispatch = useAppDispatch()
 
   useLayoutEffect(() => {
     const getStoreBasicInfo = async () => {
@@ -50,7 +51,7 @@ export default function B3StoreContainer(props: B3StoreContainerProps) {
 
         if (!storeInfo) return
 
-        store.dispatch(setStoreInfo(storeInfo))
+        storeDispatch(setStoreInfo(storeInfo))
 
         const {
           channelId,
@@ -95,7 +96,7 @@ export default function B3StoreContainer(props: B3StoreContainerProps) {
           })
         }
 
-        store.dispatch(setHeadLessBcUrl(bcUrl))
+        storeDispatch(setHeadLessBcUrl(bcUrl))
         B3SStorage.set('timeFormat', storeBasicInfo.timeFormat)
         B3SStorage.set('B3channelId', channelId)
         B3SStorage.set('bcUrl', bcUrl)

apps/storefront/src/components/HeadlessController.tsx

@@ -1,5 +1,4 @@
 import { Dispatch, SetStateAction, useContext, useEffect, useRef } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
 import type { OpenPageState } from '@b3/hooks'
 import { useB3Lang } from '@b3/lang'
 
@@ -14,6 +13,7 @@ import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 import { superAdminCompanies } from '@/shared/service/b2b'
 import B3Request from '@/shared/service/request/b3Fetch'
+import { useAppDispatch, useAppSelector } from '@/store'
 import {
   B3LStorage,
   B3SStorage,
@@ -123,7 +123,7 @@ const getDraftQuote = () => {
 export default function HeadlessController({
   setOpenPage,
 }: HeadlessControllerProps) {
-  const storeDispatch = useDispatch()
+  const storeDispatch = useAppDispatch()
   const b3Lang = useB3Lang()
 
   const {
@@ -142,7 +142,7 @@ export default function HeadlessController({
       shoppingListEnabled,
     },
   } = useContext(GlobaledContext)
-  const platform = useSelector(({ global }) => global.storeInfo.platform)
+  const platform = useAppSelector(({ global }) => global.storeInfo.platform)
   const {
     state: { addQuoteBtn, shoppingListBtn, addToAllQuoteBtn },
   } = useContext(CustomStyleContext)

apps/storefront/src/components/ThemeFrame.tsx

@@ -1,11 +1,10 @@
 import { ReactNode, RefObject, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { useDispatch } from 'react-redux'
 import createCache, { EmotionCache } from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
 import { CssBaseline } from '@mui/material'
 
-import { clearThemeFrame, setThemeFrame } from '@/store'
+import { clearThemeFrame, setThemeFrame, useAppDispatch } from '@/store'
 
 export function IFrameSetContent(
   el: HTMLIFrameElement | null,
@@ -66,7 +65,7 @@ const DefaultIframeContent =
   '<!DOCTYPE html><html><head></head><body></body></html>'
 
 function ThemeFramePortal(props: ThemeFramePortalProps) {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const { isSetupComplete, emotionCache, iframeDocument, bodyRef, children } =
     props
 

apps/storefront/src/components/captcha/Captcha.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react'
-import { useSelector } from 'react-redux'
 
-import { themeFrameSelector } from '@/store'
+import { themeFrameSelector, useAppSelector } from '@/store'
 
 // eslint-disable-next-line
 import FRAME_HANDLER_CODE from './frameCaptchaCode.js?raw'
@@ -61,7 +60,7 @@ export function generateWidgetId() {
 
 export function Captcha(props: CaptchaProps) {
   const { siteKey, theme, size, onSuccess, onError, onExpired } = props
-  const iframeDocument = useSelector(themeFrameSelector)
+  const iframeDocument = useAppSelector(themeFrameSelector)
   const widgetId = useMemo(() => generateWidgetId(), [])
   const initialized = useRef(false)
 

apps/storefront/src/components/extraTip/GlobalDialog.tsx

@@ -1,18 +1,16 @@
-import { useDispatch, useSelector } from 'react-redux'
 import { Box } from '@mui/material'
 
 import useMobile from '@/hooks/useMobile'
+import { setGlabolCommonState, useAppDispatch, useAppSelector } from '@/store'
 
-import { globalStateSelector, setGlabolCommonState } from '../../store'
-// const B3Dialog = lazy(() => import('../B3Dialog'))
 import B3Dialog from '../B3Dialog'
 
 function GlobalDialog() {
-  const { globalMessage } = useSelector(globalStateSelector)
+  const globalMessage = useAppSelector(({ global }) => global.globalMessage)
 
   const [isMobile] = useMobile()
 
-  const storeDispatch = useDispatch()
+  const storeDispatch = useAppDispatch()
 
   const messageDialogClose = () => {
     storeDispatch(

apps/storefront/src/components/layout/B3CloseAppButton.tsx

@@ -1,17 +1,16 @@
 import { useContext } from 'react'
-import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 
 import useMobile from '@/hooks/useMobile'
 import { GlobaledContext } from '@/shared/global'
-import { globalStateSelector } from '@/store'
+import { useAppSelector } from '@/store'
 
 import { CloseBox, CloseBoxMobile, CloseButton } from '../styled'
 
 export default function B3CloseAppButton() {
   const [isMobile] = useMobile()
 
-  const { setOpenPageFn } = useSelector(globalStateSelector)
+  const setOpenPageFn = useAppSelector(({ global }) => global.setOpenPageFn)
 
   const {
     state: { isCloseGotoBCHome },
@@ -23,7 +22,7 @@ export default function B3CloseAppButton() {
       window.location.href = '/'
     } else {
       navigate('/')
-      setOpenPageFn({
+      setOpenPageFn?.({
         isOpen: false,
         openUrl: '',
       })

apps/storefront/src/components/layout/B3Mainheader.tsx

@@ -7,7 +7,7 @@ import { Box, Button, Typography } from '@mui/material'
 import useMobile from '@/hooks/useMobile'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
-import { store } from '@/store'
+import { useAppSelector } from '@/store'
 import { b3TriggerCartNumber } from '@/utils'
 
 import { getContrastColor } from '../outSideComponents/utils/b3CustomStyles'
@@ -19,7 +19,7 @@ export default function B3Mainheader({ title }: { title: string }) {
   const {
     state: { companyInfo, salesRepCompanyName, role },
   } = useContext(GlobaledContext)
-  const { global } = store.getState()
+  const cartNumber = useAppSelector(({ global }) => global.cartNumber)
   const navigate = useNavigate()
   const b3Lang = useB3Lang()
   const [isMobile] = useMobile()
@@ -116,7 +116,7 @@ export default function B3Mainheader({ title }: { title: string }) {
                 onClick={onCartClick}
               >
                 {b3Lang('global.B3MainHeader.cart')}
-                {global?.cartNumber && global?.cartNumber > 0 ? (
+                {cartNumber > 0 ? (
                   <Typography
                     id="cart-number-icon"
                     sx={{
@@ -132,7 +132,7 @@ export default function B3Mainheader({ title }: { title: string }) {
                       padding: '0px 6.5px',
                     }}
                   >
-                    {global?.cartNumber}
+                    {cartNumber}
                   </Typography>
                 ) : null}
               </Button>

apps/storefront/src/components/layout/B3MobileLayout.tsx

@@ -4,7 +4,7 @@ import { Badge, Box } from '@mui/material'
 
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
-import { store } from '@/store'
+import { useAppSelector } from '@/store'
 
 import CompanyCredit from '../CompanyCredit'
 import { getContrastColor } from '../outSideComponents/utils/b3CustomStyles'
@@ -35,7 +35,7 @@ export default function B3MobileLayout({
       portalStyle: { backgroundColor = '#FEF9F5' },
     },
   } = useContext(CustomStyleContext)
-  const { global } = store.getState()
+  const cartNumber = useAppSelector(({ global }) => global.cartNumber)
 
   const customColor = getContrastColor(backgroundColor)
 
@@ -69,7 +69,7 @@ export default function B3MobileLayout({
         ) : (
           <>
             <Badge
-              badgeContent={global?.cartNumber}
+              badgeContent={cartNumber}
               max={1000}
               sx={{
                 '& .MuiBadge-badge': {

apps/storefront/src/components/table/B3Table.tsx

@@ -147,7 +147,7 @@ function Row({
         hover={hover}
         onClick={() => onClickRow?.(node, index)}
         sx={clickableRowStyles}
-        data-testId="tableBody-Row"
+        data-testid="tableBody-Row"
       >
         {showCheckbox && selectedSymbol && (
           <TableCell
@@ -194,7 +194,7 @@ function Row({
                 ? '1px solid rgba(224, 224, 224, 1)'
                 : lastItemBorderBottom,
             }}
-            data-testId={column?.key ? `tableBody-${column?.key}` : ''}
+            data-testid={column?.key ? `tableBody-${column?.key}` : ''}
           >
             {column.render ? column.render(node, index) : node[column.key]}
           </TableCell>
@@ -438,7 +438,7 @@ export function B3Table<T>({
             >
               {!tableHeaderHide && (
                 <TableHead>
-                  <TableRow data-testId="tableHead-Row">
+                  <TableRow data-testid="tableHead-Row">
                     {showSelectAllCheckbox && (
                       <TableCell key="showSelectAllCheckbox">
                         <Checkbox
@@ -468,7 +468,7 @@ export function B3Table<T>({
                         sortDirection={
                           column.key === orderBy ? sortDirection : false
                         }
-                        data-testId={
+                        data-testid={
                           column?.key ? `tableHead-${column?.key}` : ''
                         }
                       >

apps/storefront/src/constants/index.ts

@@ -73,3 +73,5 @@ export const TRANSLATION_MASQUERADE_BUTTON_VARIABLE =
   'global.customStyles.masqueradeButton'
 export const TRANSLATION_SHOPPING_LIST_BTN_VARAIBLE =
   'global.customStyles.shoppingListBtn'
+
+export const BROWSER_LANG = navigator.language.substring(0, 2)

apps/storefront/src/hooks/dom/useCartToQuote.ts

@@ -5,7 +5,6 @@ import {
   useContext,
   useEffect,
 } from 'react'
-import { useSelector } from 'react-redux'
 import globalB3 from '@b3/global-b3'
 import type { OpenPageState } from '@b3/hooks'
 
@@ -18,6 +17,7 @@ import {
 import { useGetButtonText } from '@/hooks'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
+import { useAppSelector } from '@/store'
 import { B3SStorage, globalSnackbar } from '@/utils'
 
 import { addProductsFromCartToQuote } from './utils'
@@ -37,7 +37,7 @@ const useCartToQuote = ({
   setOpenPage,
   cartQuoteEnabled,
 }: MutationObserverProps) => {
-  const platform = useSelector(({ global }) => global.storeInfo.platform)
+  const platform = useAppSelector(({ global }) => global.storeInfo.platform)
   const { addToQuote, addLoadding } = addProductsFromCartToQuote(
     setOpenPage,
     platform