fix: bulk upload csv

apps/storefront/src/components/layout/B3RenderRouter.tsx

@@ -71,7 +71,7 @@ export const B3RenderRouter = (props: B3RenderRouterProps) => {
         isOpen: true,
         openUrl: location.pathname,
       })
-      if (location.state) location.state = null
+      if (location.state && location.pathname === '/') location.state = null
     }
   }, [location])
 

apps/storefront/src/components/upload/B3Upload.tsx

@@ -68,12 +68,14 @@ interface B3UploadProps {
   handleAddToList: (validProduct: CustomFieldItems) => void,
   setProductData?: (product: CustomFieldItems) => void,
   isLoading?: boolean,
+  isToCart?: boolean,
 }
 
 interface BulkUploadCSVProps {
   currencyCode: string,
   productList: CustomFieldItems,
   channelId?: number,
+  isToCart: boolean,
 }
 
 const FileUploadContainer = styled(Box)(() => ({
@@ -98,6 +100,7 @@ export const B3Upload = (props: B3UploadProps) => {
     handleAddToList = () => {},
     setProductData = () => {},
     isLoading = false,
+    isToCart = false,
   } = props
 
   const [isMobile] = useMobile()
@@ -134,6 +137,7 @@ export const B3Upload = (props: B3UploadProps) => {
       const params: BulkUploadCSVProps = {
         currencyCode,
         productList: parseData,
+        isToCart,
       }
 
       if (!isB2BUser) params.channelId = currentChannelId
@@ -183,7 +187,7 @@ export const B3Upload = (props: B3UploadProps) => {
           for (let i = 1; i < EmptyData.length; i += 1) {
             const signleRow = EmptyData[i].split(',')
             if (signleRow.length > columns) {
-              error = 'redundant data;'
+              error = 'Please use the template file provided.'
             }
           }
         }

apps/storefront/src/components/upload/BulkUploadTable.tsx

@@ -178,32 +178,20 @@ const BulkUploadTable = (props: BulkUploadTableProps) => {
   }
 
   const getProductInfo = (params: CustomFieldItems) => {
-    if (activeTab === 'error') {
-      return {
-        edges: errorProduct,
-        totalCount: errorProduct.length || 0,
-      }
-    }
-
-    if (activeTab === 'valid') {
-      const {
-        first,
-        offset,
-      } = params
+    const products = activeTab === 'error' ? errorProduct : validProduct
 
-      const start = offset
-      const limit = first + start
-      const currentPageProduct = validProduct.slice(start, limit)
+    const {
+      first,
+      offset,
+    } = params
 
-      return {
-        edges: currentPageProduct,
-        totalCount: validProduct.length || 0,
-      }
-    }
+    const start = offset
+    const limit = first + start
+    const currentPageProduct = products.slice(start, limit)
 
     return {
-      edges: [],
-      totalCount: 0,
+      edges: currentPageProduct,
+      totalCount: products.length || 0,
     }
   }
 
@@ -307,12 +295,12 @@ const BulkUploadTable = (props: BulkUploadTableProps) => {
           <B3PaginationTable
             columnItems={activeTab === 'error' ? columnErrorsItems : columnValidItems}
             rowsPerPageOptions={[10, 20, 50]}
-            showRowsPerPageOptions={false}
             showBorder={!isMobile}
             getRequestList={getProductInfo}
-            labelRowsPerPage=""
+            labelRowsPerPage="Products per page:"
             itemIsMobileSpacing={0}
             noDataText="No product"
+            tableKey="row"
             searchParams={{
               activeTab,
             }}

apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx

@@ -333,7 +333,7 @@ const QuickOrderFooter = (props: QuickOrderFooterProps) => {
       })
 
       const newProductInfo: CustomFieldItems = conversionProductsList(productsSearch)
-
+      let isSuccess = false
       productsWithSku.forEach((product: ListItemProps) => {
         const {
           node: {
@@ -368,7 +368,10 @@ const QuickOrderFooter = (props: QuickOrderFooterProps) => {
         }
 
         addQuoteDraftProduce(quoteListitem, +quantity, optionsList || [])
+        isSuccess = true
+      })
 
+      if (isSuccess) {
         snackbar.success('', {
           jsx: successTip({
             message: 'Products were added to your quote.',
@@ -378,7 +381,7 @@ const QuickOrderFooter = (props: QuickOrderFooterProps) => {
           }),
           isClose: true,
         })
-      })
+      }
     } catch (e) {
       console.log(e)
     } finally {

apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx

@@ -29,6 +29,10 @@ import {
   snackbar,
 } from '@/utils'
 
+import {
+  useMobile,
+} from '@/hooks'
+
 import {
   B3LinkTipContent,
   B3Upload,
@@ -51,6 +55,8 @@ const successTip = (options: successTipOptions) => () => (
 )
 
 export const QuickOrderPad = () => {
+  const [isMobile] = useMobile()
+
   const [isOpenBulkLoadCSV, setIsOpenBulkLoadCSV] = useState(false)
   const [productData, setProductData] = useState<CustomFieldItems>([])
   const [addBtnText, setAddBtnText] = useState<string>('Add to cart')
@@ -301,7 +307,7 @@ export const QuickOrderPad = () => {
 
       if (maxLimitQuantity.length > 0) {
         maxLimitQuantity.forEach((data: CustomFieldItems) => {
-          snackbar.error(`You need to purchase a minimum of ${data.maxQuantity} of the ${data.variantSku} per order.`)
+          snackbar.error(`You need to purchase a maximum of ${data.maxQuantity} of the ${data.variantSku} per order.`)
         })
       }
 
@@ -319,7 +325,7 @@ export const QuickOrderPad = () => {
 
   return (
     <Card sx={{
-      marginBottom: '50px',
+      marginBottom: isMobile ? '8.5rem' : '50px',
     }}
     >
       <CardContent>
@@ -369,6 +375,7 @@ export const QuickOrderPad = () => {
         setProductData={setProductData}
         addBtnText={addBtnText}
         isLoading={isLoading}
+        isToCart
       />
     </Card>
   )

apps/storefront/src/pages/quote/QuoteDraft.tsx

@@ -351,7 +351,7 @@ const QuoteDraft = ({
   useEffect(() => {
     if (isRefresh) {
       // TODO list refresh function
-
+      quoteTableRef.current?.refreshList()
       setIsRefresh(false)
     }
   }, [isRefresh])

apps/storefront/src/pages/quote/components/AddToQuote.tsx

@@ -1,25 +1,44 @@
+import {
+  useState,
+} from 'react'
+
 import {
   Divider,
   Card,
   CardContent,
+  Box,
+  Button,
 } from '@mui/material'
 
+import UploadFileIcon from '@mui/icons-material/UploadFile'
+
 import {
   v1 as uuid,
 } from 'uuid'
 
 import {
+  B3Upload,
   B3CollapseContainer,
 } from '@/components'
 
 import {
   snackbar,
+  addQuoteDraftProduce,
 } from '@/utils'
 
+import {
+  PRODUCT_DEFAULT_IMAGE,
+} from '@/constants'
+
 import {
   searchB2BProducts,
+  searchBcProducts,
 } from '@/shared/service/b2b'
 
+import {
+  conversionProductsList,
+} from '../../shoppingListDetails/shared/config'
+
 import {
   SearchProduct,
 } from '../../shoppingListDetails/components/SearchProduct'
@@ -41,6 +60,9 @@ export const AddToQuote = (props: AddToListProps) => {
     isB2BUser,
   } = props
 
+  const [isOpenBulkLoadCSV, setIsOpenBulkLoadCSV] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
   const getNewQuoteProduct = (products: CustomFieldItems[]) => products.map((product) => {
     const {
       variantId,
@@ -129,6 +151,103 @@ export const AddToQuote = (props: AddToListProps) => {
     return variantProducts
   }
 
+  const getOptionsList = (options: CustomFieldItems) => {
+    if (options?.length === 0) return []
+
+    const option = options.map(({
+      option_id: optionId,
+      id,
+    }: {
+      option_id: number | string,
+      id: string | number,
+    }) => ({
+      optionId: `attribute[${optionId}]`,
+      optionValue: id,
+    }))
+
+    return option
+  }
+
+  const handleCSVAddToList = async (productsData: CustomFieldItems) => {
+    setIsLoading(true)
+    try {
+      const {
+        validProduct,
+      } = productsData
+
+      const productIds: number[] = []
+      validProduct.forEach((product: CustomFieldItems) => {
+        const {
+          products,
+        } = product
+
+        if (!productIds.includes(+products.productId)) {
+          productIds.push(+products.productId)
+        }
+      })
+
+      const getProducts = isB2BUser ? searchB2BProducts : searchBcProducts
+
+      const {
+        productsSearch,
+      } = await getProducts({
+        productIds,
+      })
+
+      const newProductInfo: CustomFieldItems = conversionProductsList(productsSearch)
+
+      let isSuccess = false
+      validProduct.forEach((product: CustomFieldItems) => {
+        const {
+          products: {
+            option,
+            variantSku,
+            productId,
+            productName,
+            variantId,
+          },
+          qty,
+        } = product
+
+        const optionsList = getOptionsList(option)
+
+        const currentProductSearch = newProductInfo.find((product: CustomFieldItems) => +product.id === +productId)
+
+        const variantItem = currentProductSearch.variants.find((item: CustomFieldItems) => item.sku === variantSku)
+
+        const quoteListitem = {
+          node: {
+            id: uuid(),
+            variantSku: variantItem.sku,
+            variantId,
+            productsSearch: currentProductSearch,
+            primaryImage: variantItem.image_url || PRODUCT_DEFAULT_IMAGE,
+            productName,
+            quantity: +qty || 1,
+            optionList: JSON.stringify(optionsList),
+            productId,
+            basePrice: variantItem.bc_calculated_price.as_entered,
+            tax: variantItem.bc_calculated_price.tax_inclusive - variantItem.bc_calculated_price.tax_exclusive,
+          },
+        }
+
+        addQuoteDraftProduce(quoteListitem, +qty, optionsList || [])
+
+        isSuccess = true
+      })
+
+      if (isSuccess) {
+        snackbar.success('Products were added to your quote.')
+        updateList()
+        setIsOpenBulkLoadCSV(false)
+      }
+    } catch (e) {
+      console.log(e)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
   return (
     <Card>
       <CardContent>
@@ -149,6 +268,33 @@ export const AddToQuote = (props: AddToListProps) => {
             level={1}
             buttonText="Add products to Quote"
           />
+
+          <Divider />
+
+          <Box sx={{
+            margin: '20px 0 0',
+          }}
+          >
+            <Button
+              variant="text"
+              onClick={() => {
+                setIsOpenBulkLoadCSV(true)
+              }}
+            >
+              <UploadFileIcon sx={{
+                marginRight: '8px',
+              }}
+              />
+              Bulk upload CSV
+            </Button>
+          </Box>
+
+          <B3Upload
+            isOpen={isOpenBulkLoadCSV}
+            setIsOpen={setIsOpenBulkLoadCSV}
+            handleAddToList={handleCSVAddToList}
+            isLoading={isLoading}
+          />
         </B3CollapseContainer>
       </CardContent>
     </Card>

apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx

@@ -114,6 +114,7 @@ const ShoppingListDetails = ({
       },
       isB2BUser,
       currentChannelId,
+      isAgenting,
     },
   } = useContext(GlobaledContext)
   const navigate = useNavigate()
@@ -367,6 +368,7 @@ const ShoppingListDetails = ({
           goToShoppingLists={goToShoppingLists}
           handleUpdateShoppingList={handleUpdateShoppingList}
           setOpenPage={setOpenPage}
+          isAgenting={isAgenting}
         />
 
         <Grid