fix: account loaddding complete click

bigcommerce · Apr 26, 2023 · df8a9d1 · df8a9d1
1 parent cbd39d2
commit df8a9d1
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 18 deletions.
diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { HashRouter } from 'react-router-dom'
 import { useB3AppOpen } from '@b3/hooks'
 
@@ -30,14 +31,12 @@ import {
   setStorefrontConfig,
 } from '@/utils'
 
+import { globalStateSelector, setGlabolCommonState } from './store'
+
 const FONT_URL =
   'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
 
 export default function App() {
-  const [{ isOpen, openUrl, params }, setOpenPage] = useB3AppOpen({
-    isOpen: false,
-  })
-
   const {
     state: {
       isB2BUser,
@@ -55,6 +54,18 @@ export default function App() {
     dispatch,
   } = useContext(GlobaledContext)
 
+  const storeDispatch = useDispatch()
+
+  // isLoadComplete
+  const isLoadComplete = useSelector(globalStateSelector)
+
+  console.log(isLoadComplete, 'isLoadComplete')
+
+  const [{ isOpen, openUrl, params }, setOpenPage] = useB3AppOpen({
+    isOpen: false,
+    isLoaddingComplete: isLoadComplete,
+  })
+
   const {
     state: {
       portalStyle: { backgroundColor },
@@ -165,6 +176,11 @@ export default function App() {
 
       sessionStorage.removeItem('isReLogin')
       showPageMask(dispatch, false)
+      storeDispatch(
+        setGlabolCommonState({
+          isLoadComplete: false,
+        })
+      )
     }
 
     init()

diff --git a/apps/storefront/src/index.d.ts b/apps/storefront/src/index.d.ts
@@ -4,7 +4,7 @@ declare interface CustomFieldItems {
 }
 
 declare interface CustomFieldStringItems {
-  [key: string]: strting
+  [key: string]: string | number
 }
 
 declare interface Window {

diff --git a/apps/storefront/src/pages/dashboard/components/DashboardCard.tsx b/apps/storefront/src/pages/dashboard/components/DashboardCard.tsx
@@ -99,7 +99,7 @@ function DashboardCard({
             mb: '10px',
           }}
           variant="text"
-          onClick={() => startActing(row.companyId)}
+          onClick={() => startActing((row as CustomFieldItems).companyId)}
         >
           MASQUERADE
         </Button>

diff --git a/apps/storefront/src/store/selectors.ts b/apps/storefront/src/store/selectors.ts
@@ -3,9 +3,16 @@ import { createSelector } from '@reduxjs/toolkit'
 import { RootState } from './reducer'
 
 const themeSelector = (state: RootState) => state.theme
+const globalSelector = (state: RootState) => state.global
+
 // More selectors will be added
 // eslint-disable-next-line
 export const themeFrameSelector = createSelector(
   themeSelector,
   (theme) => theme.themeFrame
 )
+
+export const globalStateSelector = createSelector(
+  globalSelector,
+  (state) => state.isLoadComplete
+)
diff --git a/apps/storefront/src/store/slices/global.ts b/apps/storefront/src/store/slices/global.ts
@@ -23,14 +23,16 @@ export interface TaxZoneRatesProps {
 
 export interface GlabolState {
   taxZoneRates?: TaxZoneRatesProps[]
+  isLoadComplete?: boolean
 }
 
 const initialState: GlabolState = {
   taxZoneRates: [],
+  isLoadComplete: true,
 }
 
 export const glabolSlice = createSlice({
-  name: 'glabol',
+  name: 'global',
   initialState,
   reducers: {
     clearglabol: () => initialState,
@@ -40,9 +42,14 @@ export const glabolSlice = createSlice({
     ) => {
       state.taxZoneRates = payload as Draft<TaxZoneRatesProps[]>
     },
+    setGlabolCommonState: (state, { payload }: PayloadAction<GlabolState>) => ({
+      ...state,
+      ...payload,
+    }),
   },
 })
 
-export const { clearglabol, setTaxZoneRates } = glabolSlice.actions
+export const { clearglabol, setTaxZoneRates, setGlabolCommonState } =
+  glabolSlice.actions
 
 export default glabolSlice.reducer
diff --git a/packages/hooks/useB3AppOpen.ts b/packages/hooks/useB3AppOpen.ts
@@ -6,7 +6,8 @@ import useMutationObservable from './useMutationObservable'
 export interface OpenPageState {
   isOpen: boolean
   openUrl?: string
-  params?: CustomFieldItems
+  isLoaddingComplete?: boolean
+  params?: { [key: string]: string }
 }
 
 export const useB3AppOpen = (initOpenState: OpenPageState) => {
@@ -43,6 +44,7 @@ export const useB3AppOpen = (initOpenState: OpenPageState) => {
     //   })
     // }
     // login register  orther
+
     if (document.querySelectorAll(globalB3['dom.registerElement']).length) {
       const registerArr = Array.from(
         document.querySelectorAll(globalB3['dom.registerElement'])
@@ -55,14 +57,21 @@ export const useB3AppOpen = (initOpenState: OpenPageState) => {
           e.preventDefault()
           e.stopPropagation()
 
-          const href = (e.target as HTMLAnchorElement).href || ''
-          const gotoUrl = registerArr.includes(e.target)
-            ? getCurrentLoginUrl(href)
-            : '/orders'
-          setOpenPage({
-            isOpen: true,
-            openUrl: gotoUrl,
-          })
+          if (
+            !(
+              initOpenState?.isLoaddingComplete &&
+              allOtherArr.includes(e.target)
+            )
+          ) {
+            const href = (e.target as HTMLAnchorElement).href || ''
+            const gotoUrl = registerArr.includes(e.target)
+              ? getCurrentLoginUrl(href)
+              : '/orders'
+            setOpenPage({
+              isOpen: true,
+              openUrl: gotoUrl,
+            })
+          }
         }
         return false
       }
@@ -76,7 +85,7 @@ export const useB3AppOpen = (initOpenState: OpenPageState) => {
       }
     }
     return () => {}
-  }, [checkoutRegisterNumber])
+  }, [checkoutRegisterNumber, initOpenState?.isLoaddingComplete])
 
   useMutationObservable(globalB3['dom.checkoutRegisterParentElement'], callback)