fix: authority problem

bigcommerce · Apr 10, 2023 · 0b8dce0 · 0b8dce0
1 parent 270dd39
commit 0b8dce0
Show file tree

Hide file tree

Showing 11 changed files with 221 additions and 48 deletions.
diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -27,7 +27,6 @@ import {
   getCurrentCustomerInfo,
   getQuoteEnabled,
   getTemPlateConfig,
-  getQuoteConfig,
   setStorefrontConfig,
 } from '@/utils'
 
@@ -80,7 +79,6 @@ export default function App() {
       storefrontConfig,
       productQuoteEnabled,
       cartQuoteEnabled,
-      shoppingListEnabled,
       B3UserId,
     },
     dispatch,
@@ -94,8 +92,6 @@ export default function App() {
 
   useOpenPDP({
     setOpenPage,
-    isB2BUser,
-    shoppingListEnabled,
   })
 
   useMyQuote({
@@ -166,7 +162,7 @@ export default function App() {
         await loginInfo()
       }
       setChannelStoreType(currentChannelId)
-      await Promise.all([getQuoteConfig(dispatch), setStorefrontConfig(dispatch), getTemPlateConfig(currentChannelId, styleDispatch)])
+      await Promise.all([setStorefrontConfig(dispatch), getTemPlateConfig(currentChannelId, styleDispatch, dispatch)])
       const userInfo = {
         role: +role,
         isAgenting,
@@ -192,7 +188,7 @@ export default function App() {
   }, [])
 
   useEffect(() => {
-    if (quoteConfig.switchStatus.length > 0 && storefrontConfig) {
+    if (quoteConfig.length > 0 && storefrontConfig) {
       const {
         productQuoteEnabled,
         cartQuoteEnabled,

diff --git a/apps/storefront/src/components/B3StoreContainer.tsx b/apps/storefront/src/components/B3StoreContainer.tsx
@@ -63,15 +63,13 @@ export const B3StoreContainer = (props: B3StoreContainerProps) => {
 
         const {
           channelId,
-          channelLogo: logo,
           b3ChannelId: b2bChannelId,
           b2bEnabled: storeEnabled,
         } = getCurrentStoreInfo((storeBasicInfo as StoreBasicInfo)?.storeSites || [])
 
         dispatch({
           type: 'common',
           payload: {
-            logo,
             storeEnabled,
             currentChannelId: channelId,
             b2bChannelId,

diff --git a/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx b/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx
@@ -149,8 +149,8 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
   }
 
   const customStyles: SxProps = {
-    backgroundColor: `${color}`,
-    color: getContrastColor(color),
+    backgroundColor: `${color || '#FFFFFF'}`,
+    color: getContrastColor(color || '#FFFFFF'),
     padding: `${verticalPadding}px ${horizontalPadding}px`,
     ...getStyles(customCss),
   }
@@ -193,8 +193,105 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
       }
 
       {
+        !isOpen && !isMobile && (
+          <Snackbar
+            sx={{
+              zIndex: '110000',
+              borderRadius: '4px',
+              height: '52px',
+              fontSize: '16px',
+              backgroundColor: '#ED6C02',
+              ...sx,
+              ...customStyles,
+            }}
+            anchorOrigin={getLocation(location) || defaultLocation}
+            open
+          >
+            <Box
+              sx={{
+                padding: '5px 15px',
+                width: '100%',
+
+              }}
+            >
+              {
+                !isMobile && (
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <GroupIcon
+                      sx={{
+                        mr: '12px',
+                      }}
+                    />
+                    {
+                    isExpansion && (
+                    <Box
+                      sx={{
+                        fontWeight: 400,
+                      }}
+                    >
+                      You are masqueraded as
+                    </Box>
+                    )
+                    }
+                    <Box
+                      sx={{
+                        fontWeight: '600',
+                        m: '0 15px 0 10px',
+                      }}
+                    >
+                      {salesRepCompanyName}
+                    </Box>
+                    {
+                      isExpansion && (
+                      <Box
+                        sx={{
+                          fontWeight: 500,
+                          fontSize: '13px',
+                          cursor: 'pointer',
+                        }}
+                        onClick={() => endActing()}
+                      >
+                        {text}
+                      </Box>
+                      )
+                  }
+
+                    {
+                    isExpansion ? (
+                      <KeyboardArrowLeftIcon
+                        onClick={() => setExpansion(false)}
+                        sx={{
+                          ml: '10px',
+                        }}
+                      />
+                    )
+                      : (
+                        <KeyboardArrowRightIcon
+                          onClick={() => setExpansion(true)}
+                          sx={{
+                            ml: '10px',
+                          }}
+                        />
+                      )
+                  }
+
+                  </Box>
+                )
+              }
+            </Box>
 
-        ((isOpen && isMobile) || !isMobile) && (
+          </Snackbar>
+        )
+      }
+
+      {
+
+        isOpen && (
         <Snackbar
           sx={{
             zIndex: '110000',
@@ -205,7 +302,7 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
             ...sx,
             ...customStyles,
           }}
-          anchorOrigin={getLocation(location) || defaultLocation}
+          anchorOrigin={defaultLocation}
           open
         >
           <Box

diff --git a/apps/storefront/src/hooks/dom/useMyQuote.ts b/apps/storefront/src/hooks/dom/useMyQuote.ts
@@ -67,7 +67,6 @@ const useMyQuote = ({
       B3LStorage.set('quoteDraftUserId', B3UserId || customerId || 0)
     }
   }, [B3UserId])
-
   const cache = useRef({})
 
   const {
@@ -138,7 +137,6 @@ const useMyQuote = ({
     if (enabled) {
       addToQuoteAll.forEach((node: CustomFieldItems) => {
         myQuote = document.createElement('div')
-
         myQuote.setAttribute('id', `${locationSelector}`)
         myQuote.innerHTML = text || 'Add to Quote'
         myQuote.setAttribute('style', customCss)

diff --git a/apps/storefront/src/hooks/dom/useOpenPDP.ts b/apps/storefront/src/hooks/dom/useOpenPDP.ts
@@ -33,14 +33,20 @@ import {
   getContrastColor,
 } from '@/components/outSideComponents/utils/b3CustomStyles'
 
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+import {
+  useRole,
+} from '../useRole'
+
 interface MutationObserverProps {
   setOpenPage: Dispatch<SetStateAction<OpenPageState>>,
-  isB2BUser: boolean,
-  shoppingListEnabled: boolean,
 }
 
 const useOpenPDP = ({
-  setOpenPage, isB2BUser, shoppingListEnabled,
+  setOpenPage,
 }: MutationObserverProps) => {
   const {
     state: {
@@ -49,6 +55,14 @@ const useOpenPDP = ({
   } = useContext(CustomStyleContext)
 
   const cache = useRef({})
+  const {
+    state: {
+      isB2BUser,
+      shoppingListEnabled,
+    },
+  } = useContext(GlobaledContext)
+
+  const [roleText] = useRole()
 
   const pdpCallBbck = useCallback(() => {
     setOpenPage({
@@ -120,7 +134,7 @@ const useOpenPDP = ({
         shoppingBtnDom.removeEventListener('click', pdpCallBbck)
       }
     }
-  }, [isB2BUser, shoppingListEnabled, openQuickView, shoppingListBtn])
+  }, [isB2BUser, shoppingListEnabled, openQuickView, shoppingListBtn, roleText])
 }
 
 export {

diff --git a/apps/storefront/src/hooks/index.ts b/apps/storefront/src/hooks/index.ts
@@ -38,6 +38,10 @@ export {
   useScrollBar,
 } from './useScrollBar'
 
+export {
+  useRole,
+} from './useRole'
+
 export {
   useSetOpen,
   useOpenPDP,

diff --git a/apps/storefront/src/hooks/useRole.ts b/apps/storefront/src/hooks/useRole.ts
@@ -0,0 +1,48 @@
+import {
+  useState,
+  useEffect,
+  useContext,
+} from 'react'
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+const useRole = () => {
+  const {
+    state: {
+      isB2BUser,
+      role,
+      isAgenting,
+    },
+  } = useContext(GlobaledContext)
+
+  const [roleText, setRoleText] = useState('')
+
+  const getRole = (role: number, isAgenting: boolean) => {
+    let roleStr = ''
+    switch (role) {
+      case 100:
+        roleStr = 'guest'
+        break
+      case 99:
+        roleStr = 'b2c'
+        break
+      case 3:
+        roleStr = isAgenting ? 'b2b' : 'b2c'
+        break
+      default:
+        roleStr = 'b2b'
+    }
+    setRoleText(roleStr)
+  }
+
+  useEffect(() => {
+    getRole(+role, isAgenting)
+  }, [isB2BUser, role, isAgenting])
+
+  return [roleText]
+}
+
+export {
+  useRole,
+}
diff --git a/apps/storefront/src/shared/customStyleButtton/context/config.ts b/apps/storefront/src/shared/customStyleButtton/context/config.ts
@@ -46,7 +46,7 @@ export const initState = {
     backgroundColor: '#FEF9F5',
   },
   masqueradeButton: {
-    color: '#ED6C03',
+    color: '#FFFFFF',
     text: 'END MASQUERADE',
     location: '',
     customCss: '',

diff --git a/apps/storefront/src/shared/global/context/config.ts b/apps/storefront/src/shared/global/context/config.ts
@@ -117,14 +117,7 @@ export interface GlobalState {
   productQuoteEnabled: boolean,
   cartQuoteEnabled: boolean,
   shoppingListEnabled: boolean,
-  quoteConfig: {
-    switchStatus: {
-      [key: string]: string
-    }[],
-    otherConfigs: {
-      [key: string]: string
-    }[],
-  },
+  quoteConfig: CustomFieldItems[],
   globalMessageDialog: {
     open: boolean,
     title: string,
@@ -181,10 +174,7 @@ export const initState = {
   productQuoteEnabled: false,
   cartQuoteEnabled: false,
   shoppingListEnabled: false,
-  quoteConfig: {
-    switchStatus: [],
-    otherConfigs: [],
-  },
+  quoteConfig: [],
   globalMessageDialog: {
     open: false,
     title: '',