fix: shopping detail price, paging

bigcommerce · Apr 25, 2023 · 570f141 · 570f141
1 parent c44274c
commit 570f141
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 137 deletions.
diff --git a/apps/storefront/src/components/table/B3PaginationTable.tsx b/apps/storefront/src/components/table/B3PaginationTable.tsx
@@ -107,9 +107,17 @@ function PaginationTable(
 
   const [isMobile] = useMobile()
 
-  const fetchList = async (b3Pagination?: TablePagination) => {
+  const fetchList = async (
+    b3Pagination?: TablePagination,
+    isRefresh?: boolean
+  ) => {
     try {
-      if (cache?.current && isEqual(cache.current, searchParams)) {
+      if (
+        cache?.current &&
+        isEqual(cache.current, searchParams) &&
+        !isRefresh &&
+        !b3Pagination
+      ) {
         return
       }
       cache.current = searchParams
@@ -157,6 +165,10 @@ function PaginationTable(
     }
   }
 
+  const refresh = () => {
+    fetchList(initPagination, true)
+  }
+
   useEffect(() => {
     if (!isEmpty(searchParams)) {
       fetchList()
@@ -187,6 +199,7 @@ function PaginationTable(
     getSelectedValue,
     setList,
     getList,
+    refresh,
   }))
 
   const handleSelectAllItems = () => {

diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
@@ -71,14 +71,7 @@ interface ShoppingListDetailsContentProps {
 function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) {
   const { id = '' } = useParams()
   const {
-    state: {
-      role,
-      companyInfo: { id: companyInfoId },
-      isB2BUser,
-      currentChannelId,
-      isAgenting,
-      openAPPParams,
-    },
+    state: { role, isB2BUser, currentChannelId, isAgenting, openAPPParams },
   } = useContext(GlobaledContext)
   const navigate = useNavigate()
   const [isMobile] = useMobile()
@@ -148,14 +141,18 @@ function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) {
       products: { edges, totalCount },
     } = shoppingListDetailInfo
 
-    const listProducts = await getNewProductsList(
-      edges,
-      isB2BUser,
-      companyInfoId
-    )
+    const listProducts = await getNewProductsList(edges, isB2BUser)
 
     if (isB2BUser) setCustomerInfo(shoppingListDetailInfo.customerInfo)
     setShoppingListInfo(shoppingListDetailInfo)
+
+    if (!listProducts) {
+      return {
+        edges: [],
+        totalCount: 0,
+      }
+    }
+
     return {
       edges: listProducts,
       totalCount,
@@ -189,6 +186,15 @@ function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) {
     }
   }
 
+  const updateList = () => {
+    tableRef.current?.initSearch()
+  }
+
+  const handleCancelClick = () => {
+    setDeleteOpen(false)
+    setDeleteItemId('')
+  }
+
   const handleDeleteItems = async (itemId: number | string = '') => {
     setIsRequestLoading(true)
     const deleteShoppingListItem = isB2BUser
@@ -226,16 +232,12 @@ function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) {
       }
 
       snackbar.success('Product removed from your shopping list')
-      tableRef.current?.initSearch()
+      updateList()
     } finally {
       setIsRequestLoading(false)
     }
   }
 
-  const updateList = () => {
-    tableRef.current?.initSearch()
-  }
-
   useEffect(() => {
     if (checkedArr.length > 0) {
       let total = 0.0
@@ -272,11 +274,6 @@ function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) {
     }
   }, [checkedArr])
 
-  const handleCancelClick = () => {
-    setDeleteOpen(false)
-    setDeleteItemId('')
-  }
-
   const handleDeleteProductClick = async () => {
     await handleDeleteItems(+deleteItemId)
     await handleCancelClick()

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx
@@ -188,7 +188,7 @@ export default function ReAddToCart(props: ShoppingProductsProps) {
     isValid: boolean
   ) => {
     const newProduct: ProductsProps[] = [...products]
-    newProduct[index].node.quantity = value
+    newProduct[index].node.quantity = +value
     newProduct[index].isValid = isValid
     setValidateFailureProducts(newProduct)
   }
@@ -278,7 +278,7 @@ export default function ReAddToCart(props: ShoppingProductsProps) {
       } else if (maxQuantity !== 0 && quantityNumber > maxQuantity) {
         product.node.quantity = maxQuantity
       }
-      if (isStock !== '0' && stock && +quantity > stock) {
+      if (isStock !== '0' && stock && (quantity ? +quantity : 0) > stock) {
         product.node.quantity = stock
       }
 
@@ -380,30 +380,18 @@ export default function ReAddToCart(props: ShoppingProductsProps) {
                 const { isStock, maxQuantity, minQuantity, stock } = product
 
                 const {
-                  basePrice,
                   quantity,
                   primaryImage,
                   productName,
                   variantSku,
                   optionList,
                   productsSearch,
-                  tax,
-                  // productsSearch: {
-                  //   variants,
-                  // },
-                  // variantId,
+                  baseAllPrice,
+                  basePrice,
                 } = product.node
-                const price = +basePrice + +(+tax / +quantity)
-                const total = +price * +quantity
-
-                // const newOptionList = JSON.parse(optionList)
-                // let optionsValue = []
-                // if (newOptionList.length > 0) {
-                //   const newVariant = variants.find((item:CustomFieldItems) => +item.variant_id
-                //   === +variantId || +item.id === +variantId)
 
-                //   optionsValue = newVariant?.option_values || []
-                // }
+                const price = +baseAllPrice !== 0 ? +baseAllPrice : +basePrice
+                const total = (price * (quantity ? +quantity : 0)).toFixed(2)
 
                 const newProduct: any = {
                   ...productsSearch,
@@ -477,7 +465,7 @@ export default function ReAddToCart(props: ShoppingProductsProps) {
                       textAlignLocation={textAlign}
                     >
                       {isMobile && <div>Total: </div>}
-                      {`${currencyToken}${total.toFixed(2)}`}
+                      {`${currencyToken}${total}`}
                     </FlexItem>
 
                     <FlexItem {...itemStyle.delete}>

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx
@@ -74,13 +74,22 @@ function ShoppingDetailFooter(props: ShoppingDetailFooterProps) {
       inventoryInfos.forEach((option: CustomFieldItems) => {
         if (node.variantSku === option.variantSku) {
           let isPassVerify = true
-          if (option.isStock === '1' && +node.quantity > option.stock)
+          if (
+            option.isStock === '1' &&
+            (node?.quantity ? +node.quantity : 0) > option.stock
+          )
             isPassVerify = false
 
-          if (option.minQuantity !== 0 && +node.quantity < option.minQuantity)
+          if (
+            option.minQuantity !== 0 &&
+            (node?.quantity ? +node.quantity : 0) < option.minQuantity
+          )
             isPassVerify = false
 
-          if (option.maxQuantity !== 0 && +node.quantity > option.maxQuantity)
+          if (
+            option.maxQuantity !== 0 &&
+            (node?.quantity ? +node.quantity : 0) > option.maxQuantity
+          )
             isPassVerify = false
 
           if (isPassVerify) {

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
@@ -21,7 +21,7 @@ import {
   updateB2BShoppingListsItem,
   updateBcShoppingListsItem,
 } from '@/shared/service/b2b'
-import { getProductPriceIncTax, snackbar } from '@/utils'
+import { snackbar } from '@/utils'
 import { getProductOptionsFields } from '@/utils/b3Product/shared/config'
 
 import B3FilterSearch from '../../../components/filter/B3FilterSearch'
@@ -84,6 +84,7 @@ interface PaginationTableRefProps extends HTMLInputElement {
   getList: () => void
   setList: (items?: ListItemProps[]) => void
   getSelectedValue: () => void
+  refresh: () => void
 }
 
 const StyledShoppingListTableContainer = styled('div')(() => ({
@@ -187,9 +188,7 @@ function ShoppingDetailTable(
   }
 
   const initSearch = () => {
-    setSearch({
-      search: '',
-    })
+    paginationTableRef.current?.refresh()
   }
 
   useImperativeHandle(ref, () => ({
@@ -409,24 +408,16 @@ function ShoppingDetailTable(
       key: 'Price',
       title: 'Price',
       render: (row: CustomFieldItems) => {
-        const {
-          productsSearch: { variants = [] },
-          variantId,
-        } = row
-        let priceIncTax
-        if (variants) {
-          priceIncTax = getProductPriceIncTax(variants, +variantId)
-        }
-        const price = +row.basePrice
-        const withTaxPrice = priceIncTax || price
-
+        const { basePrice, baseAllPrice } = row
         return (
           <Typography
             sx={{
               padding: '12px 0',
             }}
           >
-            {`${currencyToken}${withTaxPrice.toFixed(2)}`}
+            {`${currencyToken}${
+              +baseAllPrice !== 0 ? baseAllPrice : basePrice
+            }`}
           </Typography>
         )
       },
@@ -473,17 +464,10 @@ function ShoppingDetailTable(
           basePrice,
           quantity,
           itemId,
-          productsSearch: { variants = [], options },
-          variantId,
+          baseAllPrice,
+          productsSearch: { options },
         } = row
 
-        let priceIncTax
-        if (variants) {
-          priceIncTax = getProductPriceIncTax(variants, +variantId)
-        }
-
-        const withTaxPrice = priceIncTax || basePrice
-        const total = +withTaxPrice * +quantity
         const optionList = options || JSON.parse(row.optionList)
 
         return (
@@ -493,7 +477,9 @@ function ShoppingDetailTable(
                 padding: '12px 0',
               }}
             >
-              {`${currencyToken}${total.toFixed(2)}`}
+              {`${currencyToken}${(
+                +(+baseAllPrice !== 0 ? baseAllPrice : basePrice) * +quantity
+              ).toFixed(2)}`}
             </Typography>
             <Box
               sx={{

diff --git a/apps/storefront/src/store/index.ts b/apps/storefront/src/store/index.ts
@@ -1,4 +1,4 @@
 export * from './reducer'
 export * from './selectors'
-export * from './slices/glabol'
+export * from './slices/global'
 export * from './slices/theme'
diff --git a/apps/storefront/src/store/reducer.ts b/apps/storefront/src/store/reducer.ts
@@ -1,6 +1,6 @@
 import { setupStore } from '@b3/store'
 
-import glabol from './slices/glabol'
+import global from './slices/global'
 import theme from './slices/theme'
 
 export const middlewareOptions = {
@@ -10,9 +10,9 @@ export const middlewareOptions = {
   },
 }
 
-export const store = setupStore({
+export const store = setupStore<{}>({
   reducers: {
-    glabol,
+    global,
     theme,
   },
   middlewareOptions,

diff --git a/apps/storefront/src/store/slices/glabol.ts → apps/storefront/src/store/slices/global.ts b/apps/storefront/src/store/slices/glabol.ts → apps/storefront/src/store/slices/global.ts
diff --git a/apps/storefront/src/types/products.ts b/apps/storefront/src/types/products.ts
@@ -168,6 +168,6 @@ export interface Product {
   optionsV3?: ShoppingListProductItemModifiers[]
   allOptions?: Partial<AllOptionProps>[]
   productUrl: string
-  quantity: number
+  quantity: number | string
   [key: string]: any
 }