feat: add Quotes

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

apps/storefront/package.json

@@ -23,6 +23,7 @@
     "@mui/x-date-pickers": "^5.0.0-beta.0",
     "@rollup/plugin-graphql": "^1.1.0",
     "@types/babel__core": "^7.1.19",
+    "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.28.0",
     "http-server": "^14.1.1",
     "lodash": "^4.17.21",

apps/storefront/src/App.tsx

@@ -13,13 +13,15 @@ import {
 import {
   useOpenPDP,
   useRefresh,
+  useMyQuote,
   useRegisteredbctob2b,
 } from '@/hooks'
 
 import {
   loginInfo,
   getCurrentCustomerInfo,
   getLogo,
+  getQuoteEnabled,
 } from '@/utils'
 
 import {
@@ -60,6 +62,11 @@ export default function App() {
       role,
       logo,
       bcChannelId,
+      isAgenting,
+      quoteConfig,
+      storefrontConfig,
+      productQuoteEnabled,
+      cartQuoteEnabled,
     },
     dispatch,
   } = useContext(GlobaledContext)
@@ -70,18 +77,25 @@ export default function App() {
     role,
   })
 
+  useMyQuote({
+    setOpenPage,
+    productQuoteEnabled,
+    cartQuoteEnabled,
+  })
+
   useRefresh(isOpen, openUrl)
 
-  const setLogo = async () => {
+  const getQuoteConfig = async () => {
     const {
       quoteConfig,
     } = await getB2BRegisterLogo()
-    const logo = getLogo(quoteConfig)
+    const quoteLogo = getLogo(quoteConfig)
 
     dispatch({
       type: 'common',
       payload: {
-        logo,
+        logo: logo || quoteLogo,
+        quoteConfig,
       },
     })
   }
@@ -155,27 +169,56 @@ export default function App() {
       })
     }
 
+    const guestGotoPage = () => {
+      const url = hash.split('#')[1] || ''
+      if (url === '/login' || url === '/quoteDraft' || url.includes('/quoteDetail')) {
+        setOpenPage({
+          isOpen: true,
+          openUrl: url,
+        })
+      }
+    }
+
     const init = async () => {
       // bc token
       if (!BcToken) {
         await loginInfo()
       }
-
-      if (!logo) {
-        setLogo()
-      }
+      getQuoteConfig()
       setStorefrontConfig()
       setChannelStoreType(bcChannelId)
+      // refresh
       if (!customerId) {
         const data = await getCurrentCustomerInfo(dispatch)
-        if (data) gotoPage(data.role)
+        if (data) {
+          gotoPage(data.role)
+        } else {
+          guestGotoPage()
+        }
       }
       if (customerId && hash) gotoPage()
     }
 
     init()
   }, [])
 
+  useEffect(() => {
+    if (quoteConfig.switchStatus.length > 0 && storefrontConfig) {
+      const {
+        productQuoteEnabled,
+        cartQuoteEnabled,
+      } = getQuoteEnabled(quoteConfig, storefrontConfig, role, isB2BUser, isAgenting)
+
+      dispatch({
+        type: 'common',
+        payload: {
+          productQuoteEnabled,
+          cartQuoteEnabled,
+        },
+      })
+    }
+  }, [isB2BUser, isAgenting, role, quoteConfig, storefrontConfig])
+
   useRegisteredbctob2b(setOpenPage, isB2BUser, customerId)
 
   return (

apps/storefront/src/components/B3CollapseContainer.tsx

@@ -0,0 +1,58 @@
+import {
+  Box,
+  Collapse,
+  Typography,
+} from '@mui/material'
+
+import {
+  useState,
+  ReactNode,
+} from 'react'
+
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+
+interface CollapseContainerProps{
+  title?: string,
+  header?: ReactNode,
+  defaultOpen?: boolean,
+  children: ReactNode,
+}
+
+export const B3CollapseContainer = (props: CollapseContainerProps) => {
+  const {
+    children,
+    title = '',
+    header,
+    defaultOpen = false,
+  } = props
+
+  const [open, setOpen] = useState(defaultOpen)
+
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  return (
+    <Box>
+      <Box
+        onClick={handleClick}
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          cursor: 'pointer',
+        }}
+      >
+        {header || <Typography variant="h5">{title}</Typography>}
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </Box>
+      <Collapse
+        in={open}
+        timeout="auto"
+        unmountOnExit
+      >
+        {children}
+      </Collapse>
+    </Box>
+  )
+}

apps/storefront/src/components/index.ts

@@ -52,3 +52,7 @@ export {
 export {
   B3LinkTipContent,
 } from './B3LinkTipContent'
+
+export {
+  B3CollapseContainer,
+} from './B3CollapseContainer'

apps/storefront/src/components/layout/B3Layout.tsx

@@ -37,6 +37,10 @@ import {
   B3Mainheader,
 } from './B3Mainheader'
 
+import {
+  B3Dialog,
+} from '../B3Dialog'
+
 import {
   routes,
 } from '@/shared/routes'
@@ -60,26 +64,50 @@ export function B3Layout({
     state: {
       emailAddress,
       customerId,
+      globalMessageDialog,
     },
+    dispatch,
   } = useContext(GlobaledContext)
 
   const navigate = useNavigate()
 
   useEffect(() => {
-    if (!emailAddress || !customerId) {
+    if ((!emailAddress || !customerId) && location.pathname !== '/quoteDraft' && !location.pathname.includes('/quoteDetail')) {
       navigate('/login')
     }
   }, [emailAddress, customerId])
 
   useEffect(() => {
     const itemsRoutes = routes.filter((item: RouteItem) => item.path === location.pathname)
-    if (itemsRoutes.length) {
+    if (itemsRoutes.length && location.pathname !== '/quoteDraft') {
       setTitle(itemsRoutes[0].name)
     } else {
       setTitle('')
     }
+    dispatch({
+      type: 'common',
+      payload: {
+        tipMessage: {
+          msgs: [],
+        },
+      },
+    })
   }, [location])
 
+  const messageDialogClose = () => {
+    dispatch({
+      type: 'common',
+      payload: {
+        globalMessageDialog: {
+          open: false,
+          title: '',
+          message: '',
+          cancelText: 'Cancel',
+        },
+      },
+    })
+  }
+
   return (
     <Box>
 
@@ -113,6 +141,7 @@ export function B3Layout({
                   flexDirection: 'column',
                   width: '250px',
                   pl: '20px',
+                  displayPrint: 'none',
                 }}
               >
                 <B3Logo />
@@ -149,6 +178,27 @@ export function B3Layout({
         // </Box>
           )
       }
+
+      <B3Dialog
+        isOpen={globalMessageDialog.open}
+        title={globalMessageDialog.title}
+        leftSizeBtn={globalMessageDialog.cancelText}
+        rightSizeBtn={globalMessageDialog.saveText}
+        handleLeftClick={globalMessageDialog.cancelFn || messageDialogClose}
+        handRightClick={globalMessageDialog.saveFn}
+        showRightBtn={!!globalMessageDialog.saveText}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: `${isMobile ? 'center' : 'start'}`,
+            width: `${isMobile ? '100%' : '450px'}`,
+            height: '100%',
+          }}
+        >
+          {globalMessageDialog.message}
+        </Box>
+      </B3Dialog>
     </Box>
 
   )

apps/storefront/src/components/layout/B3Mainheader.tsx

@@ -82,19 +82,24 @@ export const B3Mainheader = ({
         </Box>
         <B3AccountInfo />
       </Box>
-      <Box
-        component="h3"
-        sx={{
-          height: '40px',
-          m: '0',
-          fontSize: '24px',
-          display: 'flex',
-          alignItems: 'end',
-          mb: '8px',
-        }}
-      >
-        {title}
-      </Box>
+      {
+        title && (
+        <Box
+          component="h3"
+          sx={{
+            height: '40px',
+            m: '0',
+            fontSize: '24px',
+            display: 'flex',
+            alignItems: 'end',
+            mb: '8px',
+          }}
+        >
+          {title}
+        </Box>
+        )
+      }
+
     </Box>
 
   )

apps/storefront/src/components/layout/B3Nav.tsx

@@ -49,9 +49,47 @@ export const B3Nav = ({
 
   const {
     state: globalState,
+    dispatch,
   } = useContext(GlobaledContext)
 
+  const jumpRegister = () => {
+    navigate('/registered')
+    dispatch({
+      type: 'common',
+      payload: {
+        globalMessageDialog: {
+          open: false,
+          title: '',
+          message: '',
+          cancelText: 'Cancel',
+        },
+      },
+    })
+  }
+
   const handleClick = (item: RouteItem) => {
+    const {
+      role,
+    } = globalState
+
+    if (role === 100) {
+      dispatch({
+        type: 'common',
+        payload: {
+          globalMessageDialog: {
+            open: true,
+            title: 'Registration',
+            message: 'To receive full access to buyer portal, please register. It will take 2 minutes. ',
+            cancelText: 'Cancel',
+            saveText: 'Register',
+            saveFn: jumpRegister,
+          },
+        },
+      })
+
+      return
+    }
+
     navigate(item.path)
     if (isMobile && closeSidebar) {
       closeSidebar(false)

apps/storefront/src/components/spin/B3Sping.tsx

@@ -23,7 +23,7 @@ interface B3SpingProps {
   thickness?: number & undefined,
   isCloseLoading?: Boolean,
   background?: string,
-  spinningHeight?: number,
+  spinningHeight?: number | string,
   isFlex?: boolean,
 }
 

apps/storefront/src/components/spin/styled.ts

@@ -35,7 +35,7 @@ styled('div')(() => ({
 }))
 
 interface SpinContextProps {
-  height?: number,
+  height?: number | string,
   isFlex?: boolean,
 }