From df8a9d1e6322604ce15498a45b4ef3600cf6fef3 Mon Sep 17 00:00:00 2001 From: kris-liu-smile Date: Wed, 26 Apr 2023 17:01:14 +0800 Subject: [PATCH] fix: account loaddding complete click --- apps/storefront/src/App.tsx | 24 ++++++++++++--- apps/storefront/src/index.d.ts | 2 +- .../dashboard/components/DashboardCard.tsx | 2 +- apps/storefront/src/store/selectors.ts | 7 +++++ apps/storefront/src/store/slices/global.ts | 11 +++++-- packages/hooks/useB3AppOpen.ts | 29 ++++++++++++------- 6 files changed, 57 insertions(+), 18 deletions(-) diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx index 63e040c7..8a4726d8 100644 --- 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 index 433da398..24745f9d 100644 --- 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 index f73b11d9..0a91fca9 100644 --- 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 diff --git a/apps/storefront/src/store/selectors.ts b/apps/storefront/src/store/selectors.ts index 7e01b7c7..39c90b06 100644 --- 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 index c849035b..c426decf 100644 --- 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 }, + setGlabolCommonState: (state, { payload }: PayloadAction) => ({ + ...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 index 523c6c29..1aff9236 100644 --- 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)