fix: orders price display issues

bigcommerce · Aug 15, 2023 · 2d488d0 · 2d488d0
1 parent 3ec77a5
commit 2d488d0
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 28 deletions.
diff --git a/apps/storefront/src/components/B3ProductList.tsx b/apps/storefront/src/components/B3ProductList.tsx
@@ -18,9 +18,9 @@ import { noop } from 'lodash'
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants'
 import { useMobile } from '@/hooks'
 import { store } from '@/store'
-import { currencyFormat } from '@/utils'
+import { currencyFormat, ordersCurrencyFormat } from '@/utils'
 
-import { ProductItem } from '../types'
+import { MoneyFormat, ProductItem } from '../types'
 
 interface FlexProps {
   isHeader?: boolean
@@ -122,7 +122,7 @@ const mobileItemStyle = {
 
 interface ProductProps<T> {
   products: Array<T & ProductItem>
-  currency?: string
+  money?: MoneyFormat
   renderAction?: (item: T & ProductItem) => ReactElement
   actionWidth?: string
   quantityKey?: string
@@ -150,6 +150,7 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
     totalText = 'Total',
     canToProduct = false,
     textAlign = 'left',
+    money,
   } = props
 
   const [list, setList] = useState<ProductItem[]>([])
@@ -291,6 +292,11 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
           productPrice = showInclusiveTaxPrice ? +priceIncTax : +priceExTax
         }
 
+        const totalPrice = getProductTotals(
+          getQuantity(product) || 0,
+          productPrice
+        )
+
         return (
           <Flex isMobile={isMobile} key={product.id}>
             {showCheckbox && (
@@ -349,7 +355,9 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
               }
             >
               {isMobile && <span>Price:</span>}
-              {`${currencyFormat(productPrice)}`}
+              {money
+                ? `${ordersCurrencyFormat(money, productPrice)}`
+                : `${currencyFormat(productPrice)}`}
             </FlexItem>
 
             <FlexItem
@@ -405,9 +413,9 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
               }
             >
               {isMobile && <span>{totalText}:</span>}
-              {`${currencyFormat(
-                getProductTotals(getQuantity(product) || 0, productPrice)
-              )}`}
+              {money
+                ? `${ordersCurrencyFormat(money, totalPrice)}`
+                : `${currencyFormat(totalPrice)}`}
             </FlexItem>
 
             {renderAction && (

diff --git a/apps/storefront/src/pages/order/Order.tsx b/apps/storefront/src/pages/order/Order.tsx
@@ -14,7 +14,7 @@ import {
   getOrdersCreatedByUser,
   getOrderStatusType,
 } from '@/shared/service/b2b'
-import { currencyFormat, displayFormat } from '@/utils'
+import { currencyFormat, displayFormat, ordersCurrencyFormat } from '@/utils'
 
 import B3Filter from '../../components/filter/B3Filter'
 
@@ -158,7 +158,13 @@ function Order({ isCompanyOrder = false }: OrderProps) {
     {
       key: 'totalIncTax',
       title: 'Grand total',
-      render: (item: ListItem) => `${currencyFormat(item.totalIncTax)}`,
+      render: (item: ListItem) =>
+        item?.money
+          ? `${ordersCurrencyFormat(
+              JSON.parse(JSON.parse(item.money)),
+              item.totalIncTax
+            )}`
+          : `${currencyFormat(item.totalIncTax)}`,
       width: '8%',
       style: {
         textAlign: 'right',

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
@@ -10,10 +10,11 @@ import {
   b2bPrintInvoice,
   currencyFormat,
   displayFormat,
+  ordersCurrencyFormat,
   snackbar,
 } from '@/utils'
 
-import { Address, OrderCurrency, OrderProductItem } from '../../../types'
+import { Address, MoneyFormat, OrderProductItem } from '../../../types'
 import {
   OrderDetailsContext,
   OrderDetailsState,
@@ -64,7 +65,7 @@ interface Infos {
   info: {
     [k: string]: string
   }
-  money?: OrderCurrency
+  money?: MoneyFormat
 }
 
 interface Buttons {
@@ -184,7 +185,7 @@ function OrderCard(props: OrderCardProps) {
 
   if (typeof infos === 'string') {
     showedInformation = infos
-  } else if (infos.money) {
+  } else if (infos?.money) {
     showedInformation = infoKey?.map((key: string, index: number) => (
       <Fragment key={key}>
         {key === 'Grand total' && (
@@ -198,7 +199,11 @@ function OrderCard(props: OrderCardProps) {
 
         <ItemContainer key={key} nameKey={key}>
           <p>{key}</p>
-          <p>{`${currencyFormat(infoValue[index])}`}</p>
+          <p>
+            {infos?.money
+              ? `${ordersCurrencyFormat(infos.money, infoValue[index])}`
+              : currencyFormat(infoValue[index])}
+          </p>
         </ItemContainer>
       </Fragment>
     ))

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderBilling.tsx b/apps/storefront/src/pages/orderDetail/components/OrderBilling.tsx
@@ -9,13 +9,7 @@ import { OrderDetailsContext } from '../context/OrderDetailsContext'
 
 export default function OrderBilling() {
   const {
-    state: {
-      billings = [],
-      currency,
-      addressLabelPermission,
-      orderId,
-      orderIsDigital,
-    },
+    state: { billings = [], addressLabelPermission, orderId, orderIsDigital },
   } = useContext(OrderDetailsContext)
 
   const [isMobile] = useMobile()
@@ -89,7 +83,6 @@ export default function OrderBilling() {
 
             <B3ProductList
               products={billingItem.products}
-              currency={currency}
               totalText="Total"
               canToProduct
               textAlign={isMobile ? 'left' : 'right'}

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderShipping.tsx b/apps/storefront/src/pages/orderDetail/components/OrderShipping.tsx
@@ -17,7 +17,7 @@ const ShipmentTitle = styled('span')(() => ({
 
 export default function OrderShipping() {
   const {
-    state: { shippings = [], currency, addressLabelPermission, orderIsDigital },
+    state: { shippings = [], addressLabelPermission, orderIsDigital, money },
   } = useContext(OrderDetailsContext)
 
   const [isMobile] = useMobile()
@@ -145,7 +145,7 @@ export default function OrderShipping() {
                   <B3ProductList
                     quantityKey="current_quantity_shipped"
                     products={shipment.itemsInfo}
-                    currency={currency}
+                    money={money}
                     totalText="Total"
                     canToProduct
                     textAlign="right"
@@ -169,7 +169,7 @@ export default function OrderShipping() {
                 <B3ProductList
                   quantityKey="not_shipping_number"
                   products={shipping.notShip.itemsInfo}
-                  currency={currency}
+                  money={money}
                   totalText="Total"
                   canToProduct
                   textAlign={isMobile ? 'left' : 'right'}

diff --git a/apps/storefront/src/pages/orderDetail/context/OrderDetailsContext.tsx b/apps/storefront/src/pages/orderDetail/context/OrderDetailsContext.tsx
@@ -1,8 +1,8 @@
 import { createContext, Dispatch, ReactNode, useMemo, useReducer } from 'react'
 
 import {
+  MoneyFormat,
   OrderBillings,
-  OrderCurrency,
   OrderHistoryItem,
   OrderPayment,
   OrderProductItem,
@@ -22,7 +22,7 @@ export interface OrderDetailsState {
   currency?: string
   orderSummary?: OrderSummary
   customStatus?: string
-  money?: OrderCurrency
+  money?: MoneyFormat
   payment?: OrderPayment
   orderComments?: string
   products?: OrderProductItem[]
@@ -48,6 +48,15 @@ interface OrderDetailsProviderProps {
   children: ReactNode
 }
 
+const defaultMoneyFormat: MoneyFormat = {
+  currency_location: 'left',
+  currency_token: '$',
+  decimal_token: '.',
+  decimal_places: 2,
+  thousands_token: ',',
+  currency_exchange_rate: '1.0000000000',
+}
+
 const initState = {
   shippings: [],
   billings: [],
@@ -63,7 +72,9 @@ const initState = {
     priceData: {},
   },
   customStatus: '',
-  money: {},
+  money: {
+    ...defaultMoneyFormat,
+  },
   payment: {},
   orderComments: '',
   products: [],

diff --git a/apps/storefront/src/types/orderDetail.ts b/apps/storefront/src/types/orderDetail.ts
@@ -142,6 +142,15 @@ export interface OrderCurrency {
   thousands_token?: string
 }
 
+export interface MoneyFormat {
+  currency_location: 'left' | 'right'
+  currency_token: string
+  decimal_token: string
+  decimal_places: number
+  thousands_token: string
+  currency_exchange_rate: string
+}
+
 export interface OrderPayment {
   updatedAt?: string
   billingAddress?: Address
@@ -193,7 +202,7 @@ export interface B2BOrderData {
   itemsShipped: number
   itemsTotal: number
   lastName: string
-  money: OrderCurrency
+  money: MoneyFormat
   orderHistoryEvent: OrderHistoryItem[]
   orderIsDigital: boolean
   paymentMethod: string

diff --git a/apps/storefront/src/utils/b3CurrencyFormat.ts b/apps/storefront/src/utils/b3CurrencyFormat.ts
@@ -50,6 +50,30 @@ export const handleGetCorrespondingCurrency = (code: string, value: number) => {
   return accountValue
 }
 
+export const ordersCurrencyFormat = (
+  moneyFormat: MoneyFormat,
+  price: string | number,
+  showCurrencyToken = true
+) => {
+  try {
+    const [integerPart, decimalPart] = (+price)
+      .toFixed(moneyFormat.decimal_places)
+      .split('.')
+    const newPrice = `${integerPart.replace(
+      /\B(?=(\d{3})+(?!\d))/g,
+      moneyFormat.thousands_token
+    )}${decimalPart ? `${moneyFormat.decimal_token}${decimalPart}` : ''}`
+    const priceStr =
+      moneyFormat.currency_location === 'left'
+        ? `${showCurrencyToken ? moneyFormat.currency_token : ''}${newPrice}`
+        : `${newPrice}${showCurrencyToken ? moneyFormat.currency_token : ''}`
+    return priceStr
+  } catch (e) {
+    console.error(e)
+    return ''
+  }
+}
+
 const currencyFormat = (price: string | number, showCurrencyToken = true) => {
   const moneyFormat: MoneyFormat = currencyFormatInfo()
 

diff --git a/apps/storefront/src/utils/index.ts b/apps/storefront/src/utils/index.ts
@@ -15,6 +15,7 @@ import clearInvoiceCart from './b3ClearCart'
 import currencyFormat, {
   currencyFormatInfo,
   handleGetCorrespondingCurrency,
+  ordersCurrencyFormat,
 } from './b3CurrencyFormat'
 import {
   displayExtendedFormat,
@@ -92,6 +93,7 @@ export {
   isModifierTextValid,
   loginInfo,
   openPageByClick,
+  ordersCurrencyFormat,
   redirectBcMenus,
   removeBCMenus,
   removeCartPermissions,