feat: page mask component

bigcommerce · Mar 13, 2023 · c8a8eb5 · c8a8eb5
1 parent f554b8e
commit c8a8eb5
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 12 deletions.
diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -23,7 +23,6 @@ import {
   loginInfo,
   getCurrentCustomerInfo,
   getQuoteEnabled,
-  showPageMask,
 } from '@/utils'
 
 import {
@@ -41,7 +40,7 @@ import {
   B3RenderRouter,
   B3MasquradeGobalTip,
   B3HoverButton,
-  // CheckoutTip,
+  showPageMask,
 } from '@/components'
 
 import {
@@ -206,7 +205,7 @@ export default function App() {
       }
 
       sessionStorage.removeItem('isReLogin')
-      showPageMask(false)
+      showPageMask(dispatch, false)
     }
 
     init()
@@ -242,7 +241,7 @@ export default function App() {
 
   useEffect(() => {
     if (isOpen) {
-      showPageMask(false)
+      showPageMask(dispatch, false)
     }
   }, [isOpen])
 

diff --git a/apps/storefront/src/components/B3StoreContainer.tsx b/apps/storefront/src/components/B3StoreContainer.tsx
@@ -17,9 +17,13 @@ import {
 
 import {
   B3SStorage,
-  showPageMask,
 } from '@/utils'
 
+import {
+  B3PageMask,
+  showPageMask,
+} from '@/components'
+
 interface B3StoreContainerProps {
   children: ReactNode
 }
@@ -49,7 +53,7 @@ export const B3StoreContainer = (props: B3StoreContainerProps) => {
   useLayoutEffect(() => {
     const getStoreBasicInfo = async () => {
       if (window.location.pathname.includes('account.php') || window.location.hash) {
-        showPageMask(true)
+        showPageMask(dispatch, true)
       }
 
       try {
@@ -76,12 +80,12 @@ export const B3StoreContainer = (props: B3StoreContainerProps) => {
         })
 
         if (!storeEnabled) {
-          showPageMask(false)
+          showPageMask(dispatch, false)
         }
 
         B3SStorage.set('B3channelId', channelId)
       } catch (error) {
-        showPageMask(false)
+        showPageMask(dispatch, false)
       }
     }
     getStoreBasicInfo()
@@ -94,6 +98,7 @@ export const B3StoreContainer = (props: B3StoreContainerProps) => {
   return (
     <>
       {storeEnabled ? children : null}
+      <B3PageMask />
     </>
   )
 }
diff --git a/apps/storefront/src/components/index.ts b/apps/storefront/src/components/index.ts
@@ -80,3 +80,8 @@ export {
 export {
   HomePageLoadding,
 } from './loadding/B3HomePageLoadding'
+
+export {
+  B3PageMask,
+  showPageMask,
+} from './pageMask/B3PageMask'
diff --git a/apps/storefront/src/components/pageMask/B3PageMask.tsx b/apps/storefront/src/components/pageMask/B3PageMask.tsx
@@ -0,0 +1,68 @@
+import {
+  useContext,
+} from 'react'
+
+import {
+  Box,
+  Typography,
+} from '@mui/material'
+
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+import {
+  DispatchProps,
+} from '@/shared/global/context/config'
+
+export const B3PageMask = () => {
+  const {
+    state: {
+      showPageMask,
+    },
+  } = useContext(GlobaledContext)
+
+  return (
+    <>
+      {
+        showPageMask && (
+          <Box
+            sx={{
+              width: '100%',
+              height: '100%',
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              backgroundColor: '#fef9f5',
+              zIndex: 120000,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Typography
+              sx={{
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                color: 'black',
+              }}
+            >
+              Loading...
+            </Typography>
+          </Box>
+        )
+      }
+    </>
+  )
+}
+
+export const showPageMask = (dispatch: DispatchProps, isShow: boolean) => {
+  dispatch({
+    type: 'common',
+    payload: {
+      showPageMask: isShow,
+    },
+  })
+}
diff --git a/apps/storefront/src/pages/dashboard/Dashboard.tsx b/apps/storefront/src/pages/dashboard/Dashboard.tsx
@@ -46,10 +46,12 @@ import {
 
 import {
   B3SStorage,
-  showPageMask,
-  // storeHash,
 } from '@/utils'
 
+import {
+  showPageMask,
+} from '@/components'
+
 import DashboardCard from './components/DashboardCard'
 
 interface ListItem {
@@ -155,7 +157,7 @@ const Dashboard = () => {
 
   const endActing = async () => {
     try {
-      showPageMask(true)
+      showPageMask(dispatch, true)
       await superAdminEndMasquerade(+salesRepCompanyId, +B3UserId)
       location.state = null
       B3SStorage.delete('isAgenting')
@@ -175,7 +177,7 @@ const Dashboard = () => {
         ...filterData,
       })
     } finally {
-      showPageMask(false)
+      showPageMask(dispatch, false)
     }
   }
 

diff --git a/apps/storefront/src/shared/global/context/config.ts b/apps/storefront/src/shared/global/context/config.ts
@@ -138,6 +138,7 @@ export interface GlobalState {
     currencies: currencyProps,
   },
   openAPPParams: OpenAPPParamsProps,
+  showPageMask: boolean,
 }
 
 export const initState = {
@@ -193,6 +194,7 @@ export const initState = {
   openAPPParams: {
     quoteBtn: '',
   },
+  showPageMask: false,
 }
 
 export interface GlobalAction {