fix: quote mobile modified

bigcommerce · Feb 3, 2023 · 6084ec8 · 6084ec8
1 parent b581549
commit 6084ec8
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 18 deletions.
diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx
@@ -222,7 +222,7 @@ const QuoteDraft = ({
               label: shippingDefautAddress?.node?.label || '',
               firstName: shippingDefautAddress?.node?.firstName || '',
               lastName: shippingDefautAddress?.node?.lastName || '',
-              company: shippingDefautAddress?.node?.company || '',
+              companyName: shippingDefautAddress?.node?.company || '',
               country: shippingDefautAddress?.node?.countryCode || '',
               address: shippingDefautAddress?.node?.addressLine1 || '',
               apartment: shippingDefautAddress?.node?.addressLine2 || '',
@@ -239,7 +239,7 @@ const QuoteDraft = ({
               label: billingDefautAddress?.node?.label || '',
               firstName: billingDefautAddress?.node?.firstName || '',
               lastName: billingDefautAddress?.node?.lastName || '',
-              company: billingDefautAddress?.node?.company || '',
+              companyName: billingDefautAddress?.node?.company || '',
               country: billingDefautAddress?.node?.countryCode || '',
               address: billingDefautAddress?.node?.addressLine1 || '',
               apartment: billingDefautAddress?.node?.addressLine2 || '',
@@ -523,6 +523,7 @@ const QuoteDraft = ({
     >
       <Box
         sx={{
+          mb: '60px',
           width: '100%',
         }}
       >
@@ -565,33 +566,66 @@ const QuoteDraft = ({
           <Box
             sx={{
               display: 'flex',
-              alignItems: 'center',
               mb: '24px',
+              flexDirection: `${isMobile ? 'column' : 'row'}`,
+              alignItems: `${isMobile ? 'flex-start' : 'center'}`,
             }}
           >
             <Typography
               component="h3"
               sx={{
                 fontSize: '24px',
                 mr: '1rem',
+                mb: `${isMobile ? '1rem' : '0'}`,
               }}
             >
               Quote
             </Typography>
             <QuoteStatus code="0" />
           </Box>
-          <Button
-            variant="contained"
-            size="small"
-            sx={{
-              padding: '8px 22px',
-              alignSelf: 'center',
-              marginBottom: '24px',
-            }}
-            onClick={handleSubmit}
-          >
-            submit
-          </Button>
+          {
+            !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={{
+                      height: '38px',
+                      width: '90%',
+                    }}
+                    onClick={handleSubmit}
+                  >
+                    submit
+                  </Button>
+                </Box>
+              )
+          }
         </Box>
 
         <Box>

diff --git a/apps/storefront/src/pages/quote/QuotesList.tsx b/apps/storefront/src/pages/quote/QuotesList.tsx
@@ -23,6 +23,10 @@ import {
   GlobaledContext,
 } from '@/shared/global'
 
+import {
+  useMobile,
+} from '@/hooks'
+
 import {
   getB2BQuotesList,
   getBCQuotesList,
@@ -189,6 +193,8 @@ const QuotesList = () => {
 
   const navigate = useNavigate()
 
+  const [isMobile] = useMobile()
+
   const {
     state: {
       isB2BUser,
@@ -348,6 +354,7 @@ const QuotesList = () => {
             isCustomRender={false}
             requestLoading={setIsRequestLoading}
             tableKey="quoteNumber"
+            labelRowsPerPage={`${isMobile ? 'Cards per page' : 'Orders per page'}`}
             renderItem={(row: ListItem) => (
               <QuoteItemCard
                 item={row}

diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailTableCard.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailTableCard.tsx
@@ -139,7 +139,7 @@ const QuoteDetailTableCard = (props: QuoteTableCardProps) => {
               color: isDiscount ? '#2E7D32' : '#212121',
             }}
             >
-              {`${currencyToken}${offeredPrice.toFixed(2)}`}
+              {`${currencyToken}${discountPrice.toFixed(2)}`}
             </span>
           </Typography>
 

diff --git a/apps/storefront/src/pages/quote/components/QuoteInfo.tsx b/apps/storefront/src/pages/quote/components/QuoteInfo.tsx
@@ -49,7 +49,7 @@ const QuoteInfoItem = ({
 
   const noAddresssText = status === 'Draft' ? `Please add ${flag === 'Billing' ? 'billing' : 'shipping'} address ` : `No ${flag === 'Billing' ? 'billing' : 'shipping'} address`
 
-  const isComplete = flag !== 'info' ? addressVerifyKeys.every((item: string) => !!info[item]) : false
+  const isComplete = flag !== 'info' ? addressVerifyKeys.some((item: string) => !!info[item]) : false
 
   return (
     <Box sx={{

diff --git a/apps/storefront/src/pages/quote/components/QuoteItemCard.tsx b/apps/storefront/src/pages/quote/components/QuoteItemCard.tsx
@@ -130,11 +130,16 @@ export const QuoteItemCard = (props: QuoteItemCardProps) => {
                 sx={{
                   fontWeight: 'bold',
                   color: 'rgba(0, 0, 0, 0.87)',
+                  mr: '5px',
                 }}
               >
                 {`${list.title}:`}
               </Typography>
-              <Typography>
+              <Typography
+                sx={{
+                  color: 'black',
+                }}
+              >
                 {list?.render ? list.render() : item[list.key]}
               </Typography>
             </Box>