fix: price display issues with bc settings

bigcommerce · Jun 27, 2023 · 0ba0496 · 0ba0496
1 parent 9edb0b0
commit 0ba0496
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 119 deletions.
diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
@@ -201,7 +201,7 @@ export function B3Table<T>({
                 />
               )
               return (
-                <Grid item xs={12} key={node[tableKey || 'id']}>
+                <Grid item xs={12} key={`${node[tableKey || 'id'] + index}`}>
                   {node && renderItem && renderItem(node, index, checkBox)}
                 </Grid>
               )
@@ -244,7 +244,11 @@ export function B3Table<T>({
             {listItems.map((row, index) => {
               const node = row.node || row || {}
               return (
-                <Grid item xs={itemXs} key={node[tableKey || 'id']}>
+                <Grid
+                  item
+                  xs={itemXs}
+                  key={`${node[tableKey || 'id'] + index}`}
+                >
                   {node && renderItem && renderItem(node, index)}
                 </Grid>
               )
@@ -336,7 +340,7 @@ export function B3Table<T>({
                       : 'none'
                   return (
                     <TableRow
-                      key={node[tableKey || 'id']}
+                      key={`${node[tableKey || 'id'] + index}`}
                       hover={hover}
                       onClick={() => onClickRow?.(node, index)}
                       sx={clickableRowStyles}

diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx
@@ -37,6 +37,7 @@ import {
   snackbar,
   storeHash,
 } from '@/utils'
+import { getBCPrice } from '@/utils/b3Product/b3Product'
 
 import { getProductOptionsFields } from '../../utils/b3Product/shared/config'
 import { convertBCToB2BAddress } from '../address/shared/config'
@@ -119,7 +120,7 @@ function QuoteDraft({ setOpenPage }: QuoteDraftProps) {
   } = useContext(GlobaledContext)
 
   const {
-    global: { enteredInclusive: enteredInclusiveTax },
+    global: { showInclusiveTaxPrice },
   } = store.getState()
 
   const {
@@ -467,17 +468,23 @@ function QuoteDraft({ setOpenPage }: QuoteDraftProps) {
           (item: CustomFieldItems) => item.sku === node.variantSku
         )
 
-        allPrice += +(node?.basePrice || 0) * +(node?.quantity || 0)
+        allPrice +=
+          getBCPrice(+(node?.basePrice || 0), +(node?.taxPrice || 0)) *
+          +(node?.quantity || 0)
 
         allTaxPrice += +(node?.taxPrice || 0) * +(node?.quantity || 0)
 
+        const price = getBCPrice(
+          +(node?.basePrice || 0),
+          +(node?.taxPrice || 0)
+        ).toFixed(2)
         const items = {
           productId: node.productsSearch.id,
           sku: node.variantSku,
-          basePrice: (+(node?.basePrice || 0)).toFixed(2),
+          basePrice: price,
           // taxPrice: (+node.taxPrice).toFixed(2),
           discount: '0.00',
-          offeredPrice: (+(node?.basePrice || 0)).toFixed(2),
+          offeredPrice: price,
           quantity: node.quantity,
           variantId: varantsItem.variant_id,
           imageUrl: node.primaryImage,
@@ -496,7 +503,7 @@ function QuoteDraft({ setOpenPage }: QuoteDraftProps) {
         // notes: note,
         message: newNote,
         legalTerms: '',
-        totalAmount: enteredInclusiveTax
+        totalAmount: showInclusiveTaxPrice
           ? allPrice.toFixed(2)
           : (allPrice + allTaxPrice).toFixed(2),
         grandTotal: allPrice.toFixed(2),

diff --git a/apps/storefront/src/pages/quote/QuotesList.tsx b/apps/storefront/src/pages/quote/QuotesList.tsx
@@ -246,7 +246,7 @@ function QuotesList() {
           createdBy: `${customer.firstName} ${customer.lastName}`,
           updatedAt: '—',
           expiredAt: '—',
-          totalAmount: summaryPrice?.subtotal,
+          totalAmount: summaryPrice?.grandTotal,
           status: 0,
           taxTotal: summaryPrice?.tax,
         },

diff --git a/apps/storefront/src/pages/quote/components/QuoteSummary.tsx b/apps/storefront/src/pages/quote/components/QuoteSummary.tsx
@@ -9,6 +9,7 @@ import { Box, Card, CardContent, Grid, Typography } from '@mui/material'
 
 import { store } from '@/store'
 import { B3LStorage, currencyFormat } from '@/utils'
+import { getBCPrice } from '@/utils/b3Product/b3Product'
 
 interface Summary {
   subtotal: number
@@ -30,10 +31,10 @@ const QuoteSummary = forwardRef((_, ref: Ref<unknown>) => {
   })
 
   const {
-    global: { enteredInclusive: enteredInclusiveTax, showInclusiveTaxPrice },
+    global: { showInclusiveTaxPrice },
   } = store.getState()
 
-  const priceCalc = (price: number) => parseFloat(price.toFixed(2))
+  const priceCalc = (price: number) => parseFloat(String(price))
 
   const getSummary = () => {
     const productList = B3LStorage.get('b2bQuoteDraftList') || []
@@ -46,12 +47,7 @@ const QuoteSummary = forwardRef((_, ref: Ref<unknown>) => {
 
         const { shipping } = summary
 
-        let price: number
-        if (enteredInclusiveTax) {
-          price = showInclusiveTaxPrice ? +basePrice : +basePrice - +productTax
-        } else {
-          price = showInclusiveTaxPrice ? +basePrice + +productTax : +basePrice
-        }
+        const price = getBCPrice(+basePrice, +productTax)
 
         subtotal += priceCalc(price * quantity)
         tax += priceCalc(+productTax * +quantity)

diff --git a/apps/storefront/src/pages/quote/components/QuoteTable.tsx b/apps/storefront/src/pages/quote/components/QuoteTable.tsx
@@ -6,14 +6,14 @@ import { ceil } from 'lodash'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
 import { TableColumnItem } from '@/components/table/B3Table'
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants'
-import { store } from '@/store'
 import {
   B3LStorage,
   calculateProductListPrice,
   currencyFormat,
   setModifierQtyPrice,
   snackbar,
 } from '@/utils'
+import { getBCPrice } from '@/utils/b3Product/b3Product'
 import { getProductOptionsFields } from '@/utils/b3Product/shared/config'
 
 import ChooseOptionsDialog from '../../shoppingListDetails/components/ChooseOptionsDialog'
@@ -116,10 +116,6 @@ function QuoteTable(props: ShoppingDetailTableProps, ref: Ref<unknown>) {
   } = props
   const quoteProductQtyMaxLimit = 1000000
 
-  const {
-    global: { enteredInclusive: enteredInclusiveTax, showInclusiveTaxPrice },
-  } = store.getState()
-
   const paginationTableRef = useRef<PaginationTableRefProps | null>(null)
 
   const [isRequestLoading, setIsRequestLoading] = useState(false)
@@ -389,16 +385,7 @@ function QuoteTable(props: ShoppingDetailTableProps, ref: Ref<unknown>) {
       render: (row: CustomFieldItems) => {
         const { basePrice, taxPrice } = row
 
-        let inTaxPrice: number
-        if (enteredInclusiveTax) {
-          inTaxPrice = showInclusiveTaxPrice
-            ? +basePrice
-            : +basePrice - +taxPrice
-        } else {
-          inTaxPrice = showInclusiveTaxPrice
-            ? +basePrice + +taxPrice
-            : +basePrice
-        }
+        const inTaxPrice = getBCPrice(+basePrice, +taxPrice)
 
         return (
           <Typography
@@ -451,16 +438,7 @@ function QuoteTable(props: ShoppingDetailTableProps, ref: Ref<unknown>) {
       render: (row: CustomFieldItems) => {
         const { basePrice, quantity, taxPrice } = row
 
-        let inTaxPrice: number
-        if (enteredInclusiveTax) {
-          inTaxPrice = showInclusiveTaxPrice
-            ? +basePrice
-            : +basePrice - +taxPrice
-        } else {
-          inTaxPrice = showInclusiveTaxPrice
-            ? +basePrice + +taxPrice
-            : +basePrice
-        }
+        const inTaxPrice = getBCPrice(+basePrice, +taxPrice)
         const total = inTaxPrice * +quantity
         const optionList = JSON.parse(row.optionList)
 

diff --git a/apps/storefront/src/pages/quote/components/QuoteTableCard.tsx b/apps/storefront/src/pages/quote/components/QuoteTableCard.tsx
@@ -2,8 +2,8 @@ import { Delete, Edit } from '@mui/icons-material'
 import { Box, CardContent, styled, TextField, Typography } from '@mui/material'
 
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants'
-import { store } from '@/store'
 import { currencyFormat } from '@/utils'
+import { getBCPrice } from '@/utils/b3Product/b3Product'
 
 import { getProductOptionsFields } from '../../../utils/b3Product/shared/config'
 
@@ -45,16 +45,7 @@ function QuoteTableCard(props: QuoteTableCardProps) {
     taxPrice = 0,
   } = quoteTableItem
 
-  const {
-    global: { enteredInclusive: enteredInclusiveTax, showInclusiveTaxPrice },
-  } = store.getState()
-
-  let price: number
-  if (enteredInclusiveTax) {
-    price = showInclusiveTaxPrice ? +basePrice : +basePrice - +taxPrice
-  } else {
-    price = showInclusiveTaxPrice ? +basePrice + +taxPrice : +basePrice
-  }
+  const price = getBCPrice(+basePrice, +taxPrice)
 
   const total = price * +quantity
 

diff --git a/apps/storefront/src/pages/quote/shared/config.ts b/apps/storefront/src/pages/quote/shared/config.ts
@@ -1,4 +1,6 @@
+import { store } from '@/store'
 import { B3LStorage } from '@/utils'
+import { getBCPrice } from '@/utils/b3Product/b3Product'
 
 interface AdditionalCalculatedPricesProps {
   additionalCalculatedPrice: number
@@ -79,11 +81,16 @@ const priceCalc = (price: number) => parseFloat(price.toFixed(2))
 
 export const addPrice = () => {
   const productList = B3LStorage.get('b2bQuoteDraftList') || []
+
+  const {
+    global: { showInclusiveTaxPrice },
+  } = store.getState()
+
   const newQuoteSummary = productList.reduce(
     (summary: Summary, product: CustomFieldItems) => {
       const {
         basePrice,
-        tax: productTax,
+        taxPrice: productTax = 0,
         quantity,
         additionalCalculatedPrices = [],
       } = product.node
@@ -101,10 +108,15 @@ export const addPrice = () => {
         additionalCalculatedPrice += item.additionalCalculatedPrice
       })
 
-      subtotal += priceCalc((+basePrice + additionalCalculatedPrice) * quantity)
+      subtotal += priceCalc(
+        getBCPrice(+basePrice + additionalCalculatedPrice, +productTax) *
+          quantity
+      )
       tax += priceCalc((+productTax + additionalCalculatedPriceTax) * quantity)
 
-      grandTotal = subtotal + shipping
+      grandTotal = showInclusiveTaxPrice
+        ? subtotal + shipping
+        : subtotal + shipping + tax
 
       return {
         grandTotal,

diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
@@ -23,12 +23,12 @@ import {
   updateB2BShoppingList,
   updateBcShoppingList,
 } from '@/shared/service/b2b'
-import { store } from '@/store'
 import {
   calculateProductListPrice,
   getDefaultCurrencyInfo,
   snackbar,
 } from '@/utils'
+import { getBCPrice } from '@/utils/b3Product/b3Product'
 import {
   conversionProductsList,
   CustomerInfoProps,
@@ -93,10 +93,6 @@ function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) {
   const [isMobile] = useMobile()
   const { dispatch } = useContext(ShoppingListDetailsContext)
 
-  const {
-    global: { enteredInclusive: enteredInclusiveTax, showInclusiveTaxPrice },
-  } = store.getState()
-
   const theme = useTheme()
 
   const primaryColor = theme.palette.primary.main
@@ -318,12 +314,7 @@ function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) {
           node: { quantity, basePrice, taxPrice },
         } = item
 
-        let price: number
-        if (enteredInclusiveTax) {
-          price = showInclusiveTaxPrice ? +basePrice : +basePrice - +taxPrice
-        } else {
-          price = showInclusiveTaxPrice ? +basePrice + +taxPrice : +basePrice
-        }
+        const price = getBCPrice(+basePrice, +taxPrice)
 
         total += price * +quantity
       })

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx
@@ -20,6 +20,7 @@ import {
   currencyFormat,
   snackbar,
 } from '@/utils'
+import { getBCPrice } from '@/utils/b3Product/b3Product'
 
 import {
   AllOptionProps,
@@ -115,7 +116,7 @@ export default function ChooseOptionsDialog(props: ChooseOptionsDialogProps) {
   } = props
 
   const {
-    global: { enteredInclusive: enteredInclusiveTax, showInclusiveTaxPrice },
+    global: { showInclusiveTaxPrice },
   } = store.getState()
 
   const [quantity, setQuantity] = useState<number | string>(1)
@@ -421,16 +422,7 @@ export default function ChooseOptionsDialog(props: ChooseOptionsDialogProps) {
 
           if (products.length) {
             const { basePrice, taxPrice } = products[0]
-            let price: number
-            if (enteredInclusiveTax) {
-              price = showInclusiveTaxPrice
-                ? +basePrice
-                : +basePrice - +taxPrice
-            } else {
-              price = showInclusiveTaxPrice
-                ? +basePrice + +taxPrice
-                : +basePrice
-            }
+            const price = getBCPrice(+basePrice, +taxPrice)
             setNewPrice(price)
           }
         }

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailCard.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailCard.tsx
@@ -3,8 +3,8 @@ import { Delete, Edit } from '@mui/icons-material'
 import { Box, CardContent, styled, TextField, Typography } from '@mui/material'
 
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants'
-import { store } from '@/store'
 import { currencyFormat } from '@/utils'
+import { getBCPrice } from '@/utils/b3Product/b3Product'
 
 import { getProductOptionsFields } from '../../../utils/b3Product/shared/config'
 
@@ -45,10 +45,6 @@ function ShoppingDetailCard(props: ShoppingDetailCardProps) {
     setDeleteOpen,
   } = props
 
-  const {
-    global: { enteredInclusive: enteredInclusiveTax, showInclusiveTaxPrice },
-  } = store.getState()
-
   const {
     basePrice,
     quantity,
@@ -62,12 +58,7 @@ function ShoppingDetailCard(props: ShoppingDetailCardProps) {
     taxPrice = 0,
   } = shoppingDetail
 
-  let price: number
-  if (enteredInclusiveTax) {
-    price = showInclusiveTaxPrice ? +basePrice : +basePrice - +taxPrice
-  } else {
-    price = showInclusiveTaxPrice ? +basePrice + +taxPrice : +basePrice
-  }
+  const price = getBCPrice(+basePrice, +taxPrice)
 
   const total = price * +quantity