feat: masqurade hover modified

bigcommerce · Apr 6, 2023 · 6a948cc · 6a948cc
1 parent 404fb3b
commit 6a948cc
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 70 deletions.
diff --git a/apps/storefront/src/components/B3HoverButton.tsx b/apps/storefront/src/components/B3HoverButton.tsx
@@ -1,5 +1,4 @@
 import {
-  useContext,
   Dispatch,
   SetStateAction,
   useState,
@@ -12,20 +11,10 @@ import {
   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'
-
 import {
   B3LStorage,
 } from '@/utils'
@@ -43,15 +32,6 @@ export const B3HoverButton = (props: B3HoverButtonProps) => {
     productQuoteEnabled,
   } = props
 
-  const {
-    state: {
-      isAgenting,
-      salesRepCompanyName,
-    },
-  } = useContext(GlobaledContext)
-
-  const [isMobile] = useMobile()
-
   const [showFinishQuote, setShowFinishQuote] = useState<boolean>(false)
 
   const b2bQuoteDraftList = B3LStorage.get('b2bQuoteDraftList')
@@ -67,7 +47,6 @@ export const B3HoverButton = (props: B3HoverButtonProps) => {
   } = window.location
 
   if (href.includes('/checkout')) return <></>
-  const style = 'backgroundColor:"#ED6C02";fontSize:18px;'
   return (
     <Snackbar
       sx={{
@@ -100,7 +79,6 @@ export const B3HoverButton = (props: B3HoverButtonProps) => {
               height: '42px',
             }}
             onClick={() => {
-              // B3SStorage.set('nextPath', '/')
               setOpenPage({
                 isOpen: true,
                 openUrl: '/quoteDraft',
@@ -116,28 +94,6 @@ export const B3HoverButton = (props: B3HoverButtonProps) => {
           )
         }
 
-        {
-          isAgenting && !isOpen && isMobile && (
-          <Button
-            sx={{
-              backgroundColor: '#ED6C02',
-              height: '42px',
-              marginTop: '10px',
-            }}
-            onClick={() => {
-              setOpenPage({
-                isOpen: true,
-                openUrl: '/',
-              })
-            }}
-            variant="contained"
-            startIcon={<GroupIcon />}
-          >
-            {salesRepCompanyName}
-          </Button>
-          )
-        }
-
       </Box>
 
     </Snackbar>

diff --git a/apps/storefront/src/components/B3MasquradeGobalTip.tsx b/apps/storefront/src/components/B3MasquradeGobalTip.tsx
@@ -7,6 +7,7 @@ import {
 
 import {
   Box,
+  Button,
 } from '@mui/material'
 
 import type {
@@ -99,7 +100,7 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
 
   if (href.includes('/checkout') || !customerId) return <></>
 
-  if (!isAgenting || (!isOpen && isMobile)) return <></>
+  if (!isAgenting) return <></>
 
   let sx = {}
 
@@ -116,28 +117,70 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
     }
   }
   return (
-    <Snackbar
-      sx={{
-        zIndex: '110000',
-        backgroundColor: '#ED6C02',
-        borderRadius: '4px',
-        height: '52px',
-        color: '#FFFFFF',
-        ...sx,
-      }}
-      anchorOrigin={{
-        vertical: 'bottom', horizontal: 'left',
-      }}
-      open
-      key="123"
-    >
-      <Box
-        sx={{
-          padding: '5px 15px',
-          width: '100%',
-        }}
-      >
-        {
+    <>
+      {
+        !isOpen && isMobile && (
+        <Snackbar
+          sx={{
+            zIndex: '110000',
+            left: '20px',
+            bottom: '20px',
+            right: 'auto',
+          }}
+          anchorOrigin={{
+            vertical: 'bottom', horizontal: 'left',
+          }}
+          open
+          key="123"
+        >
+
+          <Button
+            sx={{
+              backgroundColor: '#ED6C02',
+              height: '42px',
+              marginTop: '10px',
+            }}
+            onClick={() => {
+              setOpenPage({
+                isOpen: true,
+                openUrl: '/',
+              })
+            }}
+            variant="contained"
+            startIcon={<GroupIcon />}
+          >
+            {salesRepCompanyName}
+          </Button>
+
+        </Snackbar>
+        )
+      }
+
+      {
+
+        ((isOpen && isMobile) || !isMobile) && (
+        <Snackbar
+          sx={{
+            zIndex: '110000',
+            backgroundColor: '#ED6C02',
+            borderRadius: '4px',
+            height: '52px',
+            color: '#FFFFFF',
+            ...sx,
+          }}
+          anchorOrigin={{
+            vertical: 'bottom', horizontal: 'left',
+          }}
+          open
+          key="123"
+        >
+          <Box
+            sx={{
+              padding: '5px 15px',
+              width: '100%',
+            }}
+          >
+            {
           !isMobile && (
             <Box
               sx={{
@@ -208,7 +251,7 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
           )
         }
 
-        {
+            {
           isMobile && (
             <Box
               sx={{
@@ -256,8 +299,13 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
           )
         }
 
-      </Box>
+          </Box>
+
+        </Snackbar>
+        )
+      }
+
+    </>
 
-    </Snackbar>
   )
 }