fix: fix shoppingList bugs

https://bigc-b2b.atlassian.net/browse/BUN-555
bigcommerce · Jan 31, 2023 · 765e651 · 765e651
1 parent bc215ca
commit 765e651
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 33 deletions.
diff --git a/apps/storefront/src/components/table/B3PaginationTable.tsx b/apps/storefront/src/components/table/B3PaginationTable.tsx
@@ -54,6 +54,7 @@ interface B3PaginationTableProps<Y> {
   hover?: boolean,
   labelRowsPerPage?: string,
   itemIsMobileSpacing?: number,
+  disableCheckbox?: boolean,
 }
 
 const PaginationTable:<Y>(props: B3PaginationTableProps<Y>) => ReactElement = ({
@@ -81,6 +82,7 @@ const PaginationTable:<Y>(props: B3PaginationTableProps<Y>) => ReactElement = ({
   hover = false,
   labelRowsPerPage = '',
   itemIsMobileSpacing = 2,
+  disableCheckbox = false,
 }, ref?: Ref<unknown>) => {
   const initPagination = {
     offset: 0,
@@ -212,6 +214,7 @@ const PaginationTable:<Y>(props: B3PaginationTableProps<Y>) => ReactElement = ({
       infiniteScrollLoader={infiniteScrollLoader}
       infiniteScrollHeight={infiniteScrollHeight}
       showCheckbox={showCheckbox}
+      disableCheckbox={disableCheckbox}
       selectedSymbol={selectedSymbol}
       selectCheckbox={selectCheckbox}
       handleSelectAllItems={handleSelectAllItems}

diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
@@ -66,6 +66,7 @@ interface TableProps<T> {
   selectedSymbol?: string,
   selectCheckbox?: Array<number | string>,
   labelRowsPerPage?: string,
+  disableCheckbox?: boolean,
 }
 
 export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
@@ -99,6 +100,7 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
   selectedSymbol = 'id',
   selectCheckbox = [],
   labelRowsPerPage = '',
+  disableCheckbox = false,
 }) => {
   const {
     offset,
@@ -145,6 +147,7 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                 <Checkbox
                   checked={selectCheckbox.length === listItems.length}
                   onChange={handleSelectAllItems}
+                  disabled={disableCheckbox}
                 />
                 Select all
               </Box>
@@ -163,6 +166,7 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                       onChange={() => {
                         if (handleSelectOneItem) handleSelectOneItem(row.node[selectedSymbol])
                       }}
+                      disabled={disableCheckbox}
                     />
                   )
                   return (
@@ -263,6 +267,7 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                           <Checkbox
                             checked={selectCheckbox.length === listItems.length}
                             onChange={handleSelectAllItems}
+                            disabled={disableCheckbox}
                           />
                         </TableCell>
                       )
@@ -305,6 +310,7 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                               onChange={() => {
                                 if (handleSelectOneItem) handleSelectOneItem(node[selectedSymbol])
                               }}
+                              disabled={disableCheckbox}
                             />
                           </TableCell>
                         )

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx
@@ -193,7 +193,7 @@ const ShoppingDetailFooter = (props: ShoppingDetailFooterProps) => {
         padding: '1rem',
         height: isMobile ? '8rem' : 'auto',
         display: 'flex',
-        zIndex: '10',
+        zIndex: '999',
         ...containerStyle,
       }}
     >

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailHeader.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailHeader.tsx
@@ -100,6 +100,7 @@ const ShoppingDetailHeader = (props: ShoppingDetailHeaderProps) => {
               variant="h4"
               sx={{
                 marginRight: '1rem',
+                wordBreak: 'break-all',
               }}
             >
               {`${shoppingListInfo?.name || ''}`}

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
@@ -12,6 +12,7 @@ import {
   styled,
   Typography,
   TextField,
+  Grid,
 } from '@mui/material'
 
 import {
@@ -166,6 +167,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
   const [search, setSearch] = useState<SearchProps>({
     search: '',
   })
+  const [qtyNotChangeFlag, setQtyNotChangeFlag] = useState<boolean>(true)
 
   const handleUpdateProductQty = (id: number | string, value: number | string) => {
     const listItems = paginationTableRef.current?.getList() || []
@@ -174,6 +176,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
         node,
       } = item
       if (node?.id === id) {
+        setQtyNotChangeFlag(node.quantity === +value)
         node.quantity = +value || ''
       }
 
@@ -237,6 +240,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
   }
 
   const handleUpdateShoppingListItem = async (itemId: number | string) => {
+    if (qtyNotChangeFlag) return
     setIsRequestLoading(true)
     const listItems: ListItemProps[] = paginationTableRef.current?.getList() || []
     const currentItem = listItems.find((item: ListItemProps) => {
@@ -277,6 +281,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
 
       await updateB2BShoppingListsItem(data)
       snackbar.success('Product quantity updated successfully')
+      setQtyNotChangeFlag(true)
       initSearch()
     } finally {
       setIsRequestLoading(false)
@@ -437,48 +442,57 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
                 marginTop: '1rem',
                 opacity: 0,
                 textAlign: isMobile ? 'end' : 'start',
+                display: 'flex',
               }}
               id="shoppingList-actionList"
             >
-              {
-                optionList.length > 0 && !isReadForApprove && (
-                  <Edit
+              <Grid
+                item
+                sx={{
+                  marginRight: '0.5rem',
+                  minWidth: '32px',
+                }}
+              >
+                {
+                  optionList.length > 0 && !isReadForApprove && (
+                    <Edit
+                      sx={{
+                        cursor: 'pointer',
+                        color: 'rgba(0, 0, 0, 0.54)',
+                      }}
+                      onClick={() => {
+                        const {
+                          productsSearch,
+                          variantId,
+                          itemId,
+                          optionList,
+                        } = row
+
+                        handleOpenProductEdit({
+                          ...productsSearch,
+                          selectOptions: optionList,
+                        }, variantId, itemId)
+                      }}
+                    />
+                  )
+                }
+              </Grid>
+              <Grid item>
+                {
+                  !isReadForApprove && (
+                  <Delete
                     sx={{
-                      marginRight: '0.5rem',
                       cursor: 'pointer',
                       color: 'rgba(0, 0, 0, 0.54)',
                     }}
                     onClick={() => {
-                      const {
-                        productsSearch,
-                        variantId,
-                        itemId,
-                        optionList,
-                      } = row
-
-                      handleOpenProductEdit({
-                        ...productsSearch,
-                        selectOptions: optionList,
-                      }, variantId, itemId)
+                      setDeleteOpen(true)
+                      setDeleteItemId(+itemId)
                     }}
                   />
-                )
-              }
-              {
-                !isReadForApprove && (
-                <Delete
-                  sx={{
-                    cursor: 'pointer',
-                    color: 'rgba(0, 0, 0, 0.54)',
-                  }}
-                  onClick={() => {
-                    setDeleteOpen(true)
-                    setDeleteItemId(+itemId)
-                  }}
-                />
-                )
-              }
-
+                  )
+                }
+              </Grid>
             </Box>
           </Box>
         )
@@ -533,6 +547,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
         searchParams={search}
         isCustomRender={false}
         showCheckbox
+        disableCheckbox={isReadForApprove}
         hover
         labelRowsPerPage="Items per page:"
         showBorder={false}