fix: order page details and shopping list detail

bigcommerce · Dec 22, 2022 · 825bd64 · 825bd64
1 parent f60cc7f
commit 825bd64
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 46 deletions.
diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
@@ -291,14 +291,14 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                     <TableRow
                       key={node[tableKey || 'id']}
                       hover={hover}
-                      sx={{
-                        borderBottom: showBorder ? '1px solid rgba(224, 224, 224, 1)' : lastItemBorderBottom,
-                      }}
                     >
                       {
                         showCheckbox && (
                           <TableCell
                             key={`showItemCheckbox-${node.id}`}
+                            sx={{
+                              borderBottom: showBorder ? '1px solid rgba(224, 224, 224, 1)' : lastItemBorderBottom,
+                            }}
                           >
                             <Checkbox
                               checked={selectCheckbox.includes(node[selectedSymbol])}
@@ -311,7 +311,12 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                       }
                       {
                         columnItems.map((column) => (
-                          <TableCell key={column.title}>
+                          <TableCell
+                            key={column.title}
+                            sx={{
+                              borderBottom: showBorder ? '1px solid rgba(224, 224, 224, 1)' : lastItemBorderBottom,
+                            }}
+                          >
                             {column.render ? column.render(node, index) : node[column.key]}
                           </TableCell>
                         ))

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx b/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx
@@ -133,7 +133,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
   const {
     products,
     currencyInfo,
-    getProductQuantity = (item) => item.quantity,
+    getProductQuantity = (item) => item.editQuantity,
     onProductChange = () => {},
     setCheckedArr = () => {},
   } = props
@@ -279,7 +279,11 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
                   {product.sku}
                 </Typography>
                 {(product.product_options || []).map((option: OrderProductOption) => (
-                  <ProductOptionText>{`${option.display_name}: ${option.display_value}`}</ProductOptionText>
+                  <ProductOptionText
+                    key={option.display_name}
+                  >
+                    {`${option.display_name}: ${option.display_value}`}
+                  </ProductOptionText>
                 ))}
               </Box>
             </FlexItem>

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx
@@ -111,14 +111,14 @@ export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
         const {
           product_id: productId,
           variant_id: variantId,
-          quantity,
+          editQuantity,
           optionList,
         } = product
 
         return {
           productId: +productId,
           variantId,
-          quantity,
+          quantity: +editQuantity,
           optionList: optionList.map((option) => {
             const {
               optionId,
@@ -139,7 +139,7 @@ export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
         items: params,
       })
 
-      snackbar.success('Products are added to shopping list')
+      snackbar.success('Products were added to your shopping list')
 
       setOpenShoppingList(false)
     } finally {

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx b/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx
@@ -167,16 +167,16 @@ export const OrderShoppingList = (props: orderShoppingListProps) => {
               }}
             >
               {
-              list.map((item: ListItem) => (
-                <ShoppingListMenuItem
-                  key={item.node.id}
-                  className={activeId === item.node.id ? 'active' : ''}
-                  onClick={handleListItemClicked(item)}
-                >
-                  <ListItemText>{item.node.name}</ListItemText>
-                </ShoppingListMenuItem>
-              ))
-            }
+                list.map((item: ListItem) => (
+                  <ShoppingListMenuItem
+                    key={item.node.id}
+                    className={activeId === item.node.id ? 'active' : ''}
+                    onClick={handleListItemClicked(item)}
+                  >
+                    <ListItemText>{item.node.name}</ListItemText>
+                  </ShoppingListMenuItem>
+                ))
+              }
             </MenuList>
           </B3Sping>
 

diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
@@ -278,7 +278,7 @@ const ShoppingListDetails = () => {
         total += +node.basePrice * +node.quantity
       })
 
-      setSelectedSubTotal(+((1000 * total) / 1000).toFixed(2))
+      setSelectedSubTotal((1000 * total) / 1000)
     } else {
       setSelectedSubTotal(0.00)
     }
@@ -295,9 +295,7 @@ const ShoppingListDetails = () => {
   }
 
   return (
-    <B3Sping
-      isSpinning={isRequestLoading}
-    >
+    <>
       <Box
         sx={{
           display: 'flex',
@@ -324,29 +322,44 @@ const ShoppingListDetails = () => {
             marginBottom: isMobile ? '6rem' : 0,
           }}
         >
-          <Grid
-            item
+          <Box
             sx={isMobile ? {
               flexBasis: '100%',
+              pl: '16px',
             } : {
               flexBasis: '690px',
               flexGrow: 1,
+              ml: '16px',
+              pt: '16px',
             }}
           >
-            <ShoppingDetailTable
-              ref={tableRef}
-              isReadForApprove={isReadForApprove}
-              setCheckedArr={setCheckedArr}
-              shoppingListInfo={shoppingListInfo}
-              currencyToken={currencyToken}
-              setIsRequestLoading={setIsRequestLoading}
-              shoppingListId={id}
-              getShoppingListDetails={getShoppingListDetails}
-              setDeleteOpen={setDeleteOpen}
-              setDeleteItemId={setDeleteItemId}
-            />
-
-          </Grid>
+            <B3Sping
+              isSpinning={isRequestLoading}
+            >
+              <Grid
+                item
+                sx={isMobile ? {
+                  flexBasis: '100%',
+                } : {
+                  flexBasis: '690px',
+                  flexGrow: 1,
+                }}
+              >
+                <ShoppingDetailTable
+                  ref={tableRef}
+                  isReadForApprove={isReadForApprove}
+                  setCheckedArr={setCheckedArr}
+                  shoppingListInfo={shoppingListInfo}
+                  currencyToken={currencyToken}
+                  setIsRequestLoading={setIsRequestLoading}
+                  shoppingListId={id}
+                  getShoppingListDetails={getShoppingListDetails}
+                  setDeleteOpen={setDeleteOpen}
+                  setDeleteItemId={setDeleteItemId}
+                />
+              </Grid>
+            </B3Sping>
+          </Box>
 
           <Grid
             item
@@ -387,7 +400,7 @@ const ShoppingListDetails = () => {
         handleCancelClick={handleCancelClick}
         handleDeleteProductClick={handleDeleteProductClick}
       />
-    </B3Sping>
+    </>
   )
 }
 

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailCard.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailCard.tsx
@@ -140,6 +140,8 @@ const ShoppingDetailCard = (props: ShoppingDetailCardProps) => {
             value={quantity}
             sx={{
               margin: '1rem 0',
+              width: '60%',
+              maxWidth: '100px',
             }}
             onChange={(e) => {
               handleUpdateProductQty(shoppingDetail.id, e.target.value)

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx
@@ -27,7 +27,6 @@ interface ShoppingDetailFooterProps {
   checkedArr: any,
   currencyToken: string,
   selectedSubTotal: number,
-  // handleDeleteItems: () => void,
   setLoading: (val: boolean) => void,
   setDeleteOpen: (val: boolean) => void,
 }
@@ -48,7 +47,6 @@ const ShoppingDetailFooter = (props: ShoppingDetailFooterProps) => {
     checkedArr,
     currencyToken,
     selectedSubTotal,
-    // handleDeleteItems,
     setLoading,
     setDeleteOpen,
   } = props
@@ -131,7 +129,7 @@ const ShoppingDetailFooter = (props: ShoppingDetailFooterProps) => {
       <Typography
         variant="h6"
       >
-        {`Subtotal: ${currencyToken}${selectedSubTotal}`}
+        {`Subtotal: ${currencyToken}${selectedSubTotal.toFixed(2)}`}
       </Typography>
       <Box
         sx={{

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailHeader.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailHeader.tsx
@@ -82,6 +82,7 @@ const ShoppingDetailHeader = (props: ShoppingDetailHeaderProps) => {
           display: 'flex',
           justifyContent: 'space-between',
           flexDirection: `${isMobile ? 'column' : 'row'}`,
+          mb: `${isMobile ? '16px' : ''}`,
         }}
       >
         <Grid

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
@@ -124,6 +124,13 @@ const StyledImage = styled('img')(() => ({
   marginRight: '0.5rem',
 }))
 
+const StyledTextField = styled(TextField)(() => ({
+  '& input': {
+    paddingTop: '12px',
+    paddingRight: '6px',
+  },
+}))
+
 const defaultProductImage = 'https://cdn11.bigcommerce.com/s-1i6zpxpe3g/stencil/cd9e3830-4c73-0139-8a51-0242ac11000a/e/4fe76590-73f1-0139-3767-32e4ea84ca1d/img/ProductDefault.gif'
 
 const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>) => {
@@ -349,7 +356,13 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
         const price = +row.basePrice
 
         return (
-          <Box>{`${currencyToken}${price.toFixed(2)}`}</Box>
+          <Typography
+            sx={{
+              padding: '12px 0',
+            }}
+          >
+            {`${currencyToken}${price.toFixed(2)}`}
+          </Typography>
         )
       },
       width: '15%',
@@ -358,7 +371,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
       key: 'Qty',
       title: 'Qty',
       render: (row) => (
-        <TextField
+        <StyledTextField
           size="small"
           type="number"
           variant="filled"
@@ -391,7 +404,13 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
 
         return (
           <Box>
-            <Typography>{`${currencyToken}${total.toFixed(2)}`}</Typography>
+            <Typography
+              sx={{
+                padding: '12px 0',
+              }}
+            >
+              {`${currencyToken}${total.toFixed(2)}`}
+            </Typography>
             <Box
               sx={{
                 marginTop: '1rem',
@@ -495,6 +514,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
         requestLoading={setIsRequestLoading}
         getSelectCheckbox={getSelectCheckbox}
         itemIsMobileSpacing={0}
+        noDataText="No products found"
         renderItem={(row: any, index?: number, checkBox?: () => ReactElement) => (
           <ShoppingDetailCard
             len={shoppingListInfo?.products?.edges.length || 0}