feat: super Admin Dashboard

https://bigc-b2b.atlassian.net/browse/BUN-484

apps/storefront/src/App.tsx

@@ -44,6 +44,9 @@ import {
 import {
   ThemeFrame,
   B3RenderRouter,
+  B3MasquradeGobalTip,
+  B3HoverButton,
+  CheckoutTip,
 } from '@/components'
 
 import {
@@ -81,7 +84,7 @@ export default function App() {
     dispatch,
   } = useContext(GlobaledContext)
 
-  const [openApp, setOpenApp] = useState<boolean>(false)
+  // const [openApp, setOpenApp] = useState<boolean>(false)
 
   useOpenPDP({
     setOpenPage,
@@ -98,6 +101,7 @@ export default function App() {
     setOpenPage,
     cartQuoteEnabled,
   })
+
   // Button to open storefront
   useSetOpen(isOpen, openUrl)
 
@@ -184,22 +188,32 @@ export default function App() {
       setChannelStoreType(currentChannelId)
       await Promise.all([getQuoteConfig(), setStorefrontConfig()])
 
-      if (!customerId) await getCurrentCustomerInfo(dispatch)
+      const userInfo = {
+        role: +role,
+        isAgenting,
+      }
 
-      // background login enter judgment
-      if (!href.includes('checkout')) {
-        setOpenApp(!(customerId && !window.location.hash))
-      } else {
-        showPageMask(false)
+      if (!customerId) {
+        const info = await getCurrentCustomerInfo(dispatch)
+        userInfo.role = info?.role
+        userInfo.isAgenting = info?.isAgenting || false
+      }
+      // background login enter judgment and refresh
+      if (!href.includes('checkout') && !(customerId && !window.location.hash)) {
+        gotoAllowedAppPage(+userInfo.role, userInfo.isAgenting, gotoPage)
       }
+      showPageMask(false)
     }
 
     init()
   }, [])
 
-  useEffect(() => {
-    if (openApp) gotoAllowedAppPage(+role, gotoPage)
-  }, [openApp])
+  // useEffect(() => {
+  //   if (openApp) {
+  //     gotoAllowedAppPage(+role, gotoPage)
+  //     showPageMask(false)
+  //   }
+  // }, [openApp])
 
   useEffect(() => {
     if (quoteConfig.switchStatus.length > 0 && storefrontConfig) {
@@ -229,20 +243,38 @@ export default function App() {
   }, [isOpen])
 
   return (
-    <HashRouter>
-      <div className="bundle-app">
-        <ThemeFrame
-          className={isOpen ? 'active-frame' : undefined}
-          fontUrl={FONT_URL}
-          customStyles={CUSTOM_STYLES}
-        >
-
-          {isOpen ? (
-            <B3RenderRouter setOpenPage={setOpenPage} />
-          ) : null}
-        </ThemeFrame>
-      </div>
-
-    </HashRouter>
+    <>
+      <HashRouter>
+        <div className="bundle-app">
+          <ThemeFrame
+            className={isOpen ? 'active-frame' : undefined}
+            fontUrl={FONT_URL}
+            customStyles={CUSTOM_STYLES}
+          >
+
+            {isOpen ? (
+              <B3RenderRouter
+                openUrl={openUrl}
+                isOpen={isOpen}
+                setOpenPage={setOpenPage}
+              />
+            ) : null}
+          </ThemeFrame>
+        </div>
+
+      </HashRouter>
+      <B3MasquradeGobalTip
+        setOpenPage={setOpenPage}
+        isOpen={isOpen}
+      />
+      <B3HoverButton
+        isOpen={isOpen}
+        setOpenPage={setOpenPage}
+      />
+      <CheckoutTip
+        setOpenPage={setOpenPage}
+      />
+    </>
+
   )
 }

apps/storefront/src/components/B3HoverButton.tsx

@@ -0,0 +1,122 @@
+import {
+  useContext,
+  useState,
+  Dispatch,
+  SetStateAction,
+} from 'react'
+
+import {
+  Box,
+  IconButton,
+  Button,
+  Snackbar,
+} from '@mui/material'
+
+import GroupIcon from '@mui/icons-material/Group'
+
+import type {
+  OpenPageState,
+} from '@b3/hooks'
+import {
+  useMobile,
+} from '@/hooks'
+
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+interface B3HoverButtonProps {
+  isOpen: boolean,
+  setOpenPage: Dispatch<SetStateAction<OpenPageState>>,
+}
+
+export const B3HoverButton = (props: B3HoverButtonProps) => {
+  const {
+    isOpen,
+    setOpenPage,
+  } = props
+
+  const {
+    state: {
+      role,
+      isAgenting,
+      salesRepCompanyName,
+      salesRepCompanyId,
+      B3UserId,
+    },
+    dispatch,
+  } = useContext(GlobaledContext)
+
+  const [isMobile] = useMobile()
+
+  return (
+    <Snackbar
+      sx={{
+        zIndex: '100000000000',
+        right: '20px',
+        bottom: '20px',
+        left: 'auto',
+      }}
+      anchorOrigin={{
+        vertical: 'bottom', horizontal: 'right',
+      }}
+      open
+      key="123"
+    >
+
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          alignItems: 'flex-end',
+        }}
+      >
+
+        {
+          !isOpen && (
+          <Button
+            sx={{
+              backgroundColor: '#ED6C02',
+              height: '42px',
+            }}
+            onClick={() => {
+              setOpenPage({
+                isOpen: true,
+                openUrl: '/quoteDraft',
+              })
+            }}
+            variant="contained"
+          >
+            Finish quote
+          </Button>
+          )
+        }
+
+        {
+          isAgenting && !isOpen && isMobile && (
+          <Button
+            sx={{
+              backgroundColor: '#ED6C02',
+              height: '42px',
+              marginTop: '10px',
+            }}
+            onClick={() => {
+              setOpenPage({
+                isOpen: true,
+                openUrl: '/',
+              })
+            }}
+            variant="contained"
+            startIcon={<GroupIcon />}
+          >
+            Mitsubishi
+          </Button>
+          )
+        }
+
+      </Box>
+
+    </Snackbar>
+  )
+}