feat: sprint 39 to main (#816)

* feat: add cart and shoppall btn https://bigc-b2b.atlassian.net/browse/BUN-1478 * fix: get cart info * fix: anchor links https://bigc-b2b.atlassian.net/browse/BUN-1605 * feat: add subscribers when registering https://bigc-b2b.atlassian.net/browse/BUN-1578 * feat: add cart and home btn https://bigc-b2b.atlassian.net/browse/BUN-1478 * fix: capture cart error report SUP-1270 * fix: header style change BUN-1478 * fix: junior hide cart btn BUN-1478 * feat: shopping list sort https://bigc-b2b.atlassian.net/browse/BUN-1580 * fix: add channelId parameter https://bigc-b2b.atlassian.net/browse/BUN-1649 * fix: quote pass value BUN-1576 * fix: checkout blank page https://bigc-b2b.atlassian.net/browse/BUN-1694
bigcommerce · Oct 25, 2023 · 61398e9 · 61398e9
1 parent c086981
commit 61398e9
Show file tree

Hide file tree

Showing 27 changed files with 306 additions and 36 deletions.
diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -287,7 +287,7 @@ export default function App() {
       const { hash } = window.location
       if (hash) {
         const url = hash.split('#')[1]
-        if (url && url !== '/') {
+        if (url && url !== '/' && url.includes('/')) {
           setOpenPage({
             isOpen: true,
             openUrl: url,

diff --git a/apps/storefront/src/components/B3DropDown.tsx b/apps/storefront/src/components/B3DropDown.tsx
@@ -65,7 +65,15 @@ export default function B3DropDown<T>({
           pr: 0,
         }}
       >
-        <ListItemText primary={title} />
+        <ListItemText
+          primary={title}
+          sx={{
+            '& span': {
+              fontWeight: isMobile ? 400 : 700,
+              color: '#333333',
+            },
+          }}
+        />
         {open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
       </ListItemButton>
       <Menu

diff --git a/apps/storefront/src/components/layout/B3AccountInfo.tsx b/apps/storefront/src/components/layout/B3AccountInfo.tsx
@@ -56,6 +56,8 @@ export default function B3AccountInfo({ closeSidebar }: B3AccountInfoProps) {
         mr: '-5px',
         fontSize: '16px',
         color: '#333333',
+        textAlign: 'center',
+        alignItems: 'center',
       }}
     >
       <B3DropDown title={name} handleItemClick={handleItemClick} list={list} />

diff --git a/apps/storefront/src/components/layout/B3Logo.tsx b/apps/storefront/src/components/layout/B3Logo.tsx
@@ -40,6 +40,7 @@ export default function B3Logo() {
           height: '100%',
           objectFit: 'contain',
         },
+        display: 'contents',
       }}
     >
       <ImageListItem

diff --git a/apps/storefront/src/components/layout/B3Mainheader.tsx b/apps/storefront/src/components/layout/B3Mainheader.tsx
@@ -1,8 +1,12 @@
-import { useContext } from 'react'
-import { Box } from '@mui/material'
+import { useContext, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useB3Lang } from '@b3/lang'
+import { Box, Button, Typography } from '@mui/material'
 
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
+import { store } from '@/store'
+import { b3TriggerCartNumber } from '@/utils'
 
 import { getContrastColor } from '../outSideComponents/utils/b3CustomStyles'
 
@@ -13,6 +17,9 @@ export default function B3Mainheader({ title }: { title: string }) {
   const {
     state: { companyInfo, salesRepCompanyName, role },
   } = useContext(GlobaledContext)
+  const { global } = store.getState()
+  const navigate = useNavigate()
+  const b3Lang = useB3Lang()
 
   const {
     state: {
@@ -22,6 +29,10 @@ export default function B3Mainheader({ title }: { title: string }) {
 
   const customColor = getContrastColor(backgroundColor)
 
+  useEffect(() => {
+    b3TriggerCartNumber()
+  }, [])
+
   return (
     <Box>
       <Box
@@ -42,9 +53,79 @@ export default function B3Mainheader({ title }: { title: string }) {
           }}
         >
           {+role === 3 &&
-            (companyInfo?.companyName || salesRepCompanyName || 'Super admin')}
+            (companyInfo?.companyName ||
+              salesRepCompanyName ||
+              b3Lang('global.B3MainHeader.superAdmin'))}
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          {role !== 100 && <B3AccountInfo />}
+          <Box sx={{ marginLeft: '8px' }}>
+            {role === 100 && (
+              <Button
+                sx={{
+                  color: '#333333',
+                  fontWeight: 700,
+                  fontSize: '16px',
+                }}
+                onClick={() => {
+                  navigate('/login')
+                }}
+              >
+                {b3Lang('global.B3MainHeader.signIn')}
+              </Button>
+            )}
+            <Button
+              sx={{
+                color: '#333333',
+                fontWeight: 700,
+                fontSize: '16px',
+              }}
+              onClick={() => {
+                window.location.href = '/'
+              }}
+            >
+              {b3Lang('global.B3MainHeader.home')}
+            </Button>
+            {role !== 2 && (
+              <Button
+                sx={{
+                  color: '#333333',
+                  fontWeight: 700,
+                  fontSize: '16px',
+                }}
+                onClick={() => {
+                  window.location.href = '/cart.php'
+                }}
+              >
+                {b3Lang('global.B3MainHeader.cart')}
+                {global?.cartNumber && global?.cartNumber > 0 ? (
+                  <Typography
+                    id="cart-number-icon"
+                    sx={{
+                      backgroundColor: '#1976D2',
+                      minWidth: '21px',
+                      height: '20px',
+                      color: '#FFFFFF',
+                      borderRadius: '64px',
+                      fontSize: '12px',
+                      fontWeight: '500',
+                      lineHeight: '20px',
+                      marginLeft: '3px',
+                      padding: '0px 6.5px',
+                    }}
+                  >
+                    {global?.cartNumber}
+                  </Typography>
+                ) : null}
+              </Button>
+            )}
+          </Box>
         </Box>
-        {role !== 100 && <B3AccountInfo />}
       </Box>
       {title && (
         <Box

diff --git a/apps/storefront/src/components/layout/B3MobileLayout.tsx b/apps/storefront/src/components/layout/B3MobileLayout.tsx
@@ -1,9 +1,10 @@
 import { ReactNode, useContext, useState } from 'react'
-import { Close, Dehaze } from '@mui/icons-material'
+import { Close, Dehaze, ShoppingBagOutlined } from '@mui/icons-material'
 import { Badge, Box } from '@mui/material'
 
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
+import { store } from '@/store'
 
 import { getContrastColor } from '../outSideComponents/utils/b3CustomStyles'
 
@@ -24,14 +25,15 @@ export default function B3MobileLayout({
   }
 
   const {
-    state: { isAgenting },
+    state: { isAgenting, role },
   } = useContext(GlobaledContext)
 
   const {
     state: {
       portalStyle: { backgroundColor = '#FEF9F5' },
     },
   } = useContext(CustomStyleContext)
+  const { global } = store.getState()
 
   const customColor = getContrastColor(backgroundColor)
 
@@ -54,11 +56,40 @@ export default function B3MobileLayout({
           mb: '4.5vw',
         }}
       >
-        <B3Logo />
-
         <Badge badgeContent={0} color="secondary">
           <Dehaze onClick={openRouteList} sx={{ color: customColor }} />
         </Badge>
+
+        <B3Logo />
+
+        {role === 2 ? (
+          <Box sx={{ width: '24px' }} />
+        ) : (
+          <Badge
+            badgeContent={global?.cartNumber}
+            max={1000}
+            sx={{
+              marginRight: '0.5rem',
+              '& .MuiBadge-badge': {
+                color: '#FFFFFF',
+                backgroundColor: '#1976D2',
+                fontWeight: 500,
+                fontSize: '12px',
+                minWidth: '18px',
+                height: '18px',
+                top: '8px',
+                right: '3px',
+              },
+            }}
+          >
+            <ShoppingBagOutlined
+              sx={{ color: 'rgba(0, 0, 0, 0.54)' }}
+              onClick={() => {
+                window.location.href = '/cart.php'
+              }}
+            />
+          </Badge>
+        )}
       </Box>
 
       <Box
@@ -93,7 +124,7 @@ export default function B3MobileLayout({
             position: 'fixed',
             width: '92vw',
             zIndex: 1000,
-            right: 0,
+            left: 0,
             top: 0,
             p: '4vw',
             backgroundColor: 'white',

diff --git a/apps/storefront/src/components/upload/B3Upload.tsx b/apps/storefront/src/components/upload/B3Upload.tsx
@@ -148,7 +148,7 @@ export default function B3Upload(props: B3UploadProps) {
         withModifiers,
       }
 
-      if (!isB2BUser) params.channelId = currentChannelId
+      if (role !== 100) params.channelId = currentChannelId
       const uploadAction = isB2BUser
         ? B2BProductsBulkUploadCSV
         : BcProductsBulkUploadCSV

diff --git a/apps/storefront/src/pages/login/Login.tsx b/apps/storefront/src/pages/login/Login.tsx
@@ -156,6 +156,8 @@ export default function Login(props: RegisteredProps) {
 
           clearCurrentCustomerInfo(dispatch)
           await fetch('/login.php?action=logout')
+          // SUP-1282 Clear sessionStorage to allow visitors to display the checkout page
+          window.sessionStorage.clear()
         }
 
         setLoginInfo(Info)

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx
@@ -12,7 +12,7 @@ import {
   getBcVariantInfoBySkus,
 } from '@/shared/service/b2b'
 import { addProductToCart, createCart, getCartInfo } from '@/shared/service/bc'
-import { snackbar } from '@/utils'
+import { b3TriggerCartNumber, snackbar } from '@/utils'
 import { bcBaseUrl } from '@/utils/basicConfig'
 
 import { EditableProductItem, OrderProductItem } from '../../../types'
@@ -256,35 +256,35 @@ export default function OrderDialog({
       }
 
       const cartInfo = await getCartInfo()
-      let res
+
       if (cartInfo.length > 0) {
-        res = await addProductToCart(
+        await addProductToCart(
           {
             lineItems: items,
           },
           cartInfo[0].id
         )
       } else {
-        res = await createCart({
+        await createCart({
           lineItems: items,
         })
       }
-      if (res.status === 422) {
-        snackbar.error(res.detail, {
-          isClose: true,
-        })
-      } else {
-        setOpen(false)
-        snackbar.success('', {
-          jsx: successTip({
-            message: 'Products are added to cart',
-            link: '/cart.php',
-            linkText: 'VIEW CART',
-            isOutLink: true,
-          }),
-          isClose: true,
-        })
-      }
+
+      setOpen(false)
+      snackbar.success('', {
+        jsx: successTip({
+          message: 'Products are added to cart',
+          link: '/cart.php',
+          linkText: 'VIEW CART',
+          isOutLink: true,
+        }),
+        isClose: true,
+      })
+      b3TriggerCartNumber()
+    } catch (err: any) {
+      snackbar.error(err?.detail, {
+        isClose: true,
+      })
     } finally {
       setIsRequestLoading(false)
     }

diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx
@@ -35,6 +35,7 @@ import { addProductToCart, createCart, getCartInfo } from '@/shared/service/bc'
 import {
   addQuoteDraftProducts,
   B3SStorage,
+  b3TriggerCartNumber,
   calculateProductListPrice,
   currencyFormat,
   getProductPriceIncTax,
@@ -265,6 +266,7 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {
           }),
           isClose: true,
         })
+        b3TriggerCartNumber()
       }
     } finally {
       setIsRequestLoading(false)

diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx
@@ -13,7 +13,7 @@ import {
 import { B3Upload, CustomButton, successTip } from '@/components'
 import { useBlockPendingAccountViewPrice, useMobile } from '@/hooks'
 import { addProductToCart, createCart, getCartInfo } from '@/shared/service/bc'
-import { B3SStorage, snackbar } from '@/utils'
+import { B3SStorage, b3TriggerCartNumber, snackbar } from '@/utils'
 
 import SearchProduct from '../../shoppingListDetails/components/SearchProduct'
 
@@ -98,6 +98,7 @@ export default function QuickOrderPad(props: QuickOrderPadProps) {
         }),
         isClose: true,
       })
+      b3TriggerCartNumber()
     }
 
     return res
@@ -272,6 +273,7 @@ export default function QuickOrderPad(props: QuickOrderPadProps) {
             }),
             isClose: true,
           })
+          b3TriggerCartNumber()
         }
       }