feat: quote detail display price with bc setting

bigcommerce · Jun 27, 2023 · 7d1e637 · 7d1e637
1 parent b3cdf86
commit 7d1e637
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 22 deletions.
diff --git a/apps/storefront/src/pages/quote/QuoteDetail.tsx b/apps/storefront/src/pages/quote/QuoteDetail.tsx
@@ -413,7 +413,10 @@ function QuoteDetail() {
                 marginBottom: '1rem',
               }}
             >
-              <QuoteDetailSummary quoteSummary={quoteSummary} />
+              <QuoteDetailSummary
+                quoteSummary={quoteSummary}
+                discountType={quoteDetail?.discountType}
+              />
             </Box>
 
             {quoteDetail.notes && (

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

diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailSummary.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailSummary.tsx
@@ -1,5 +1,6 @@
 import { Box, Card, CardContent, Grid, Typography } from '@mui/material'
 
+import { store } from '@/store'
 import { currencyFormat } from '@/utils'
 
 interface Summary {
@@ -12,15 +13,34 @@ interface Summary {
 
 interface QuoteDetailSummaryProps {
   quoteSummary: Summary
+  discountType: number
 }
 
 export default function QuoteDetailSummary(props: QuoteDetailSummaryProps) {
   const {
     quoteSummary: { originalSubtotal, discount, tax, shipping, totalAmount },
+    discountType = 0,
   } = props
 
+  const {
+    global: { showInclusiveTaxPrice },
+  } = store.getState()
+
+  let subtotalPrice = +originalSubtotal
+  let quotedSubtotal = +originalSubtotal - +discount
+  if (showInclusiveTaxPrice) {
+    const taxTotal =
+      +shipping === 0
+        ? +tax
+        : +totalAmount + +discount - +shipping - subtotalPrice
+    const taxRate =
+      discountType === 2 ? taxTotal / subtotalPrice : taxTotal / quotedSubtotal
+
+    subtotalPrice *= 1 + taxRate
+    quotedSubtotal += taxTotal
+  }
+
   const priceFormat = (price: number) => `${currencyFormat(price)}`
-  const quotedSubtotal = +originalSubtotal - +discount
 
   return (
     <Card>
@@ -41,7 +61,7 @@ export default function QuoteDetailSummary(props: QuoteDetailSummaryProps) {
               }}
             >
               <Typography>Original subtotal</Typography>
-              <Typography>{priceFormat(+originalSubtotal)}</Typography>
+              <Typography>{priceFormat(subtotalPrice)}</Typography>
             </Grid>
             <Grid
               container
@@ -78,7 +98,7 @@ export default function QuoteDetailSummary(props: QuoteDetailSummaryProps) {
                   color: '#212121',
                 }}
               >
-                {priceFormat(+quotedSubtotal)}
+                {priceFormat(quotedSubtotal)}
               </Typography>
             </Grid>
 

diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailTable.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailTable.tsx
@@ -4,7 +4,9 @@ import { Box, styled, Typography } from '@mui/material'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
 import { TableColumnItem } from '@/components/table/B3Table'
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants'
+import { store, TaxZoneRates, TaxZoneRatesProps } from '@/store'
 import { currencyFormat } from '@/utils'
+import { getBCPrice } from '@/utils/b3Product/b3Product'
 
 import QuoteDetailTableCard from './QuoteDetailTableCard'
 
@@ -92,6 +94,24 @@ const StyledImage = styled('img')(() => ({
 function QuoteDetailTable(props: ShoppingDetailTableProps, ref: Ref<unknown>) {
   const { total, getQuoteTableDetails } = props
 
+  const {
+    global: { taxZoneRates },
+  } = store.getState()
+
+  const classRates: TaxZoneRates[] = []
+  if (taxZoneRates.length) {
+    const defaultTaxZone: TaxZoneRatesProps = taxZoneRates.find(
+      (taxZone: { id: number }) => taxZone.id === 1
+    )
+    if (defaultTaxZone) {
+      const { rates } = defaultTaxZone
+      const { enabled } = rates[0]
+      if (enabled && rates[0].classRates.length) {
+        rates[0].classRates.forEach((rate) => classRates.push(rate))
+      }
+    }
+  }
+
   const paginationTableRef = useRef<PaginationTableRefProps | null>(null)
 
   const [search, setSearch] = useState<SearchProps>({
@@ -108,6 +128,25 @@ function QuoteDetailTable(props: ShoppingDetailTableProps, ref: Ref<unknown>) {
     },
   }))
 
+  const getTaxRate = (taxClassId: number, variants: any) => {
+    if (variants.length) {
+      const {
+        bc_calculated_price: {
+          tax_exclusive: taxExclusive,
+          tax_inclusive: taxInclusive,
+        },
+      } = variants[0]
+      return (taxInclusive - taxExclusive) / taxExclusive
+    }
+    if (classRates.length) {
+      return (
+        (classRates.find((rate) => rate.taxClassId === taxClassId)?.rate || 0) /
+        100
+      )
+    }
+    return 0
+  }
+
   const columnItems: TableColumnItem<ListItem>[] = [
     {
       key: 'Product',
@@ -192,7 +231,18 @@ function QuoteDetailTable(props: ShoppingDetailTableProps, ref: Ref<unknown>) {
       key: 'Price',
       title: 'Price',
       render: (row: CustomFieldItems) => {
-        const { basePrice, offeredPrice } = row
+        const {
+          basePrice,
+          offeredPrice,
+          productsSearch: { variants = [], taxClassId },
+        } = row
+
+        const taxRate = getTaxRate(taxClassId, variants)
+        const taxPrice = +basePrice * taxRate
+        const discountTaxPrice = +offeredPrice * taxRate
+
+        const price = getBCPrice(+basePrice, taxPrice)
+        const discountPrice = getBCPrice(+offeredPrice, discountTaxPrice)
 
         const isDiscount = +basePrice - +offeredPrice > 0
 
@@ -205,7 +255,7 @@ function QuoteDetailTable(props: ShoppingDetailTableProps, ref: Ref<unknown>) {
                   textDecoration: 'line-through',
                 }}
               >
-                {`${currencyFormat(+basePrice)}`}
+                {`${currencyFormat(price)}`}
               </Typography>
             )}
 
@@ -215,7 +265,7 @@ function QuoteDetailTable(props: ShoppingDetailTableProps, ref: Ref<unknown>) {
                 color: isDiscount ? '#2E7D32' : '#212121',
               }}
             >
-              {`${currencyFormat(offeredPrice)}`}
+              {`${currencyFormat(discountPrice)}`}
             </Typography>
           </>
         )
@@ -246,11 +296,23 @@ function QuoteDetailTable(props: ShoppingDetailTableProps, ref: Ref<unknown>) {
       key: 'Total',
       title: 'Total',
       render: (row: CustomFieldItems) => {
-        const { basePrice, quantity, offeredPrice } = row
+        const {
+          basePrice,
+          quantity,
+          offeredPrice,
+          productsSearch: { variants = [], taxClassId },
+        } = row
+
+        const taxRate = getTaxRate(taxClassId, variants)
+        const taxPrice = +basePrice * taxRate
+        const discountTaxPrice = +offeredPrice * taxRate
+
+        const price = getBCPrice(+basePrice, taxPrice)
+        const discountPrice = getBCPrice(+offeredPrice, discountTaxPrice)
         const isDiscount = +basePrice - +offeredPrice > 0
 
-        const total = +basePrice * +quantity
-        const totalWithDiscount = +offeredPrice * +quantity
+        const total = price * +quantity
+        const totalWithDiscount = discountPrice * +quantity
 
         return (
           <Box>