fix: hide finish quote btn when no products in draft quote

bigcommerce · Mar 30, 2023 · e83d4eb · e83d4eb
1 parent b93f9af
commit e83d4eb
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 34 deletions.
diff --git a/apps/storefront/src/components/B3HoverButton.tsx b/apps/storefront/src/components/B3HoverButton.tsx
@@ -2,6 +2,8 @@ import {
   useContext,
   Dispatch,
   SetStateAction,
+  useState,
+  useEffect,
 } from 'react'
 
 import {
@@ -15,6 +17,7 @@ import GroupIcon from '@mui/icons-material/Group'
 import type {
   OpenPageState,
 } from '@b3/hooks'
+
 import {
   useMobile,
 } from '@/hooks'
@@ -23,6 +26,10 @@ import {
   GlobaledContext,
 } from '@/shared/global'
 
+import {
+  B3LStorage,
+} from '@/utils'
+
 interface B3HoverButtonProps {
   isOpen: boolean,
   productQuoteEnabled: boolean,
@@ -45,6 +52,16 @@ export const B3HoverButton = (props: B3HoverButtonProps) => {
 
   const [isMobile] = useMobile()
 
+  const [showFinishQuote, setShowFinishQuote] = useState<boolean>(false)
+
+  const b2bQuoteDraftList = B3LStorage.get('b2bQuoteDraftList')
+
+  useEffect(() => {
+    if (b2bQuoteDraftList.length) {
+      setShowFinishQuote(true)
+    } else setShowFinishQuote(false)
+  }, [isOpen, b2bQuoteDraftList])
+
   const {
     href,
   } = window.location
@@ -76,7 +93,7 @@ export const B3HoverButton = (props: B3HoverButtonProps) => {
       >
 
         {
-          !isOpen && productQuoteEnabled && !href.includes('/cart') && (
+          showFinishQuote && !isOpen && productQuoteEnabled && !href.includes('/cart') && (
           <Button
             sx={{
               backgroundColor: '#ED6C02',

diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx
@@ -663,48 +663,45 @@ const QuoteDraft = ({
             <QuoteStatus code="0" />
           </Box>
           {
-            (total !== 0) && (
-              !isMobile ? (
+            !isMobile ? (
+              <Button
+                variant="contained"
+                size="small"
+                sx={{
+                  padding: '8px 22px',
+                  alignSelf: 'center',
+                  marginBottom: '24px',
+                }}
+                onClick={handleSubmit}
+              >
+                submit
+              </Button>
+            ) : (
+              <Box
+                sx={{
+                  position: 'fixed',
+                  left: 0,
+                  bottom: 0,
+                  background: '#FFF',
+                  width: '100%',
+                  display: 'flex',
+                  p: '8px 0',
+                  zIndex: 100,
+                  justifyContent: 'center',
+                }}
+              >
                 <Button
                   variant="contained"
                   size="small"
                   sx={{
-                    padding: '8px 22px',
-                    alignSelf: 'center',
-                    marginBottom: '24px',
+                    height: '38px',
+                    width: '90%',
                   }}
                   onClick={handleSubmit}
                 >
                   submit
                 </Button>
-              )
-                : (
-                  <Box
-                    sx={{
-                      position: 'fixed',
-                      left: 0,
-                      bottom: 0,
-                      background: '#FFF',
-                      width: '100%',
-                      display: 'flex',
-                      p: '8px 0',
-                      zIndex: 100,
-                      justifyContent: 'center',
-                    }}
-                  >
-                    <Button
-                      variant="contained"
-                      size="small"
-                      sx={{
-                        height: '38px',
-                        width: '90%',
-                      }}
-                      onClick={handleSubmit}
-                    >
-                      submit
-                    </Button>
-                  </Box>
-                )
+              </Box>
             )
           }
         </Box>