fix: display currency and date/time by bc settings

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

Hide file tree

Showing 39 changed files with 1,196 additions and 368 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,6 +1,9 @@
 {
   "root": true,
   "extends": ["b2b"],
+  "ignorePatterns": [
+    "/apps/storefront/src/utils/b3DateFormat/php-date-format.ts"
+  ],
   "settings": {
     "import/resolver": {
       "typescript": {

diff --git a/apps/storefront/src/components/B3ProductList.tsx b/apps/storefront/src/components/B3ProductList.tsx
@@ -17,6 +17,7 @@ import { noop } from 'lodash'
 
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants'
 import { useMobile } from '@/hooks'
+import { currencyFormat } from '@/utils'
 
 import { ProductItem } from '../types'
 
@@ -133,7 +134,6 @@ interface ProductProps<T> {
 export default function B3ProductList<T>(props: ProductProps<T>) {
   const {
     products,
-    currency = '$',
     renderAction,
     quantityKey = 'quantity',
     actionWidth = '100px',
@@ -151,19 +151,13 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
 
   const [isMobile] = useMobile()
 
-  const getProductPrice = (price: string | number) => {
-    const priceNumber = parseFloat(price.toString()) || 0
-
-    return priceNumber.toFixed(2)
-  }
-
   const getQuantity = (product: any) =>
     parseInt(product[quantityKey]?.toString() || '', 10) || ''
 
   const getProductTotals = (quantity: number, price: string | number) => {
     const priceNumber = parseFloat(price.toString()) || 0
 
-    return (quantity * priceNumber).toFixed(2)
+    return quantity * priceNumber
   }
 
   const handleProductQuantityChange =
@@ -333,7 +327,7 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
               {...itemStyle.default}
             >
               {isMobile && <span>Price:</span>}
-              {`${currency} ${getProductPrice(productPrice)}`}
+              {`${currencyFormat(productPrice)}`}
             </FlexItem>
 
             <FlexItem textAlignLocation={textAlign} {...itemStyle.qty}>
@@ -372,9 +366,8 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
               textAlignLocation={textAlign}
             >
               {isMobile && <span>{totalText}:</span>}
-              {`${currency} ${getProductTotals(
-                getQuantity(product) || 0,
-                productPrice
+              {`${currencyFormat(
+                getProductTotals(getQuantity(product) || 0, productPrice)
               )}`}
             </FlexItem>
 

diff --git a/apps/storefront/src/components/B3StoreContainer.tsx b/apps/storefront/src/components/B3StoreContainer.tsx
@@ -42,6 +42,7 @@ export function B3StoreContainer(props: B3StoreContainerProps) {
       try {
         const { storeBasicInfo }: CustomFieldItems = await getBCStoreChannelId()
 
+        B3SStorage.set('timeFormat', storeBasicInfo.timeFormat)
         const {
           channelId,
           b3ChannelId: b2bChannelId,
@@ -57,6 +58,7 @@ export function B3StoreContainer(props: B3StoreContainerProps) {
             currentChannelId: channelId,
             b2bChannelId,
             storeName: storeBasicInfo.storeName,
+            timeFormat: storeBasicInfo.timeFormat,
           },
         })
 

diff --git a/apps/storefront/src/components/outSideComponents/B3HoverButton.tsx b/apps/storefront/src/components/outSideComponents/B3HoverButton.tsx
@@ -46,7 +46,7 @@ export default function B3HoverButton(props: B3HoverButtonProps) {
     text = '',
     color = '',
     customCss = '',
-    location = '',
+    location = 'bottomRight',
     horizontalPadding = '',
     verticalPadding = '',
     enabled = false,

diff --git a/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx b/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx
@@ -89,7 +89,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
     text = '',
     color = '',
     customCss = '',
-    location = '',
+    location = 'bottomLeft',
     horizontalPadding = '',
     verticalPadding = '',
   } = masqueradeButton

diff --git a/apps/storefront/src/pages/order/Order.tsx b/apps/storefront/src/pages/order/Order.tsx
@@ -1,7 +1,6 @@
 import { useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Box } from '@mui/material'
-import { format } from 'date-fns'
 
 import { B3Sping } from '@/components'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
@@ -14,12 +13,12 @@ import {
   getOrdersCreatedByUser,
   getOrderStatusType,
 } from '@/shared/service/b2b'
+import { currencyFormat, displayFormat } from '@/utils'
 
 import B3Filter from '../../components/filter/B3Filter'
 
 import OrderStatus from './components/OrderStatus'
 import {
-  currencySymbol,
   FilterSearchProps,
   getFilterMoreData,
   getInitFilter,
@@ -178,8 +177,7 @@ function Order({ isCompanyOrder = false }: OrderProps) {
     {
       key: 'totalIncTax',
       title: 'Grand total',
-      render: (item: ListItem) =>
-        `${currencySymbol(item.money)}${item.totalIncTax}`,
+      render: (item: ListItem) => `${currencyFormat(item.totalIncTax)}`,
       width: '8%',
       style: {
         textAlign: 'right',
@@ -205,7 +203,7 @@ function Order({ isCompanyOrder = false }: OrderProps) {
     {
       key: 'createdAt',
       title: 'Created on',
-      render: (item: ListItem) => format(+item.createdAt * 1000, 'dd MMM yyyy'),
+      render: (item: ListItem) => `${displayFormat(+item.createdAt)}`,
       width: '10%',
     },
     {

diff --git a/apps/storefront/src/pages/order/OrderItemCard.tsx b/apps/storefront/src/pages/order/OrderItemCard.tsx
@@ -6,12 +6,11 @@ import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
-import { format } from 'date-fns'
 
 import { GlobaledContext } from '@/shared/global'
+import { currencyFormat, displayFormat } from '@/utils'
 
 import OrderStatus from './components/OrderStatus'
-import { currencySymbol } from './config'
 
 interface ListItem {
   [key: string]: string
@@ -107,8 +106,7 @@ export function OrderItemCard(props: OrderItemCardProps) {
             minHeight: '1.43em',
           }}
         >
-          {currencySymbol(item.money)}
-          {item.totalIncTax}
+          {currencyFormat(item.totalIncTax)}
         </Typography>
 
         <Box
@@ -126,9 +124,7 @@ export function OrderItemCard(props: OrderItemCardProps) {
           >
             {getName(item)}
           </Typography>
-          <Typography>
-            {format(+item.createdAt * 1000, 'dd MMM yyyy')}
-          </Typography>
+          <Typography>{`${displayFormat(item.createdAt)}`}</Typography>
         </Box>
       </CardContent>
     </Card>

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
@@ -1,12 +1,11 @@
 import { Fragment, ReactNode, useContext, useState } from 'react'
 import styled from '@emotion/styled'
 import { Box, Card, CardContent, Divider, Typography } from '@mui/material'
-import { format } from 'date-fns'
 import { throttle } from 'lodash'
 
 import { CustomButton } from '@/components'
 import { GlobaledContext } from '@/shared/global'
-import { b2bPrintInvoice, snackbar } from '@/utils'
+import { b2bPrintInvoice, displayFormat, snackbar } from '@/utils'
 
 import { Address, OrderCurrency, OrderProductItem } from '../../../types'
 import {
@@ -78,7 +77,6 @@ interface OrderCardProps {
   products: OrderProductItem[]
   itemKey: string
   orderId: string
-  currencyInfo: OrderCurrency
   role: number | string
 }
 
@@ -90,17 +88,8 @@ interface DialogData {
 }
 
 function OrderCard(props: OrderCardProps) {
-  const {
-    header,
-    subtitle,
-    buttons,
-    infos,
-    products,
-    itemKey,
-    orderId,
-    currencyInfo,
-    role,
-  } = props
+  const { header, subtitle, buttons, infos, products, itemKey, orderId, role } =
+    props
 
   const {
     state: { isAgenting },
@@ -236,7 +225,6 @@ function OrderCard(props: OrderCardProps) {
         type={type}
         setOpen={setOpen}
         itemKey={itemKey}
-        currencyInfo={currencyInfo}
       />
     </Card>
   )
@@ -364,10 +352,7 @@ export default function OrderAction(props: OrderActionProps) {
       key: 'order-summary',
       subtitle:
         updatedAt && name
-          ? `Purchased by ${name} on ${format(
-              +updatedAt * 1000,
-              'dd MMM yyyy'
-            )}.`
+          ? `Purchased by ${name} on ${displayFormat(+updatedAt)}.`
           : '',
       buttons,
       infos: {
@@ -379,7 +364,7 @@ export default function OrderAction(props: OrderActionProps) {
       header: 'Payment',
       key: 'payment',
       subtitle: createAt
-        ? `Paid in full on ${format(Date.parse(createAt), 'dd MMM yyyy')}.`
+        ? `Paid in full on ${displayFormat(createAt, true)}.`
         : '',
       buttons: [
         {
@@ -413,7 +398,6 @@ export default function OrderAction(props: OrderActionProps) {
           <OrderCard
             products={products!}
             orderId={orderId.toString()}
-            currencyInfo={money!}
             {...item}
             itemKey={item.key}
             role={role}

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx b/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx
@@ -10,16 +10,12 @@ import {
 
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants'
 import { useMobile } from '@/hooks'
+import { currencyFormat } from '@/utils'
 
-import {
-  EditableProductItem,
-  OrderCurrency,
-  OrderProductOption,
-} from '../../../types'
+import { EditableProductItem, OrderProductOption } from '../../../types'
 
 interface OrderCheckboxProductProps {
   products: EditableProductItem[]
-  currencyInfo: OrderCurrency
   getProductQuantity?: (item: EditableProductItem) => number
   onProductChange?: (products: EditableProductItem[]) => void
   setCheckedArr?: (items: number[]) => void
@@ -127,7 +123,6 @@ const mobileItemStyle = {
 export default function OrderCheckboxProduct(props: OrderCheckboxProductProps) {
   const {
     products,
-    currencyInfo,
     getProductQuantity = (item) => item.editQuantity,
     onProductChange = () => {},
     setCheckedArr = () => {},
@@ -138,20 +133,14 @@ export default function OrderCheckboxProduct(props: OrderCheckboxProductProps) {
 
   const [list, setList] = useState<number[]>([])
 
-  const getProductPrice = (price: string | number) => {
-    const priceNumber = parseFloat(price.toString()) || 0
-
-    return priceNumber.toFixed(2)
-  }
-
   const getProductTotals = (
     quantity: string | number,
     price: string | number
   ) => {
     const priceNumber = parseFloat(price.toString()) || 0
     const quantityNumber = parseInt(quantity.toString(), 10) || 0
 
-    return (quantityNumber * priceNumber).toFixed(2)
+    return quantityNumber * priceNumber
   }
 
   const itemStyle = isMobile ? mobileItemStyle : defaultItemStyle
@@ -276,9 +265,7 @@ export default function OrderCheckboxProduct(props: OrderCheckboxProductProps) {
             {...itemStyle.default}
           >
             {isMobile && <span>Price: </span>}
-            {`${currencyInfo.currency_token} ${getProductPrice(
-              product.base_price
-            )}`}
+            {`${currencyFormat(product.base_price)}`}
           </FlexItem>
           <FlexItem textAlignLocation={textAlign} {...itemStyle.default}>
             <TextField
@@ -308,9 +295,8 @@ export default function OrderCheckboxProduct(props: OrderCheckboxProductProps) {
             {...itemStyle.default}
           >
             {isMobile && <span>Total: </span>}
-            {`${currencyInfo.currency_token} ${getProductTotals(
-              getProductQuantity(product),
-              product.base_price
+            {`${currencyFormat(
+              getProductTotals(getProductQuantity(product), product.base_price)
             )}`}
           </FlexItem>
         </Flex>

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx
@@ -16,7 +16,6 @@ import { snackbar } from '@/utils'
 
 import {
   EditableProductItem,
-  OrderCurrency,
   OrderProductItem,
 } from '../../../types'
 import getReturnFormFields from '../shared/config'
@@ -39,7 +38,6 @@ interface OrderDialogProps {
   type?: string
   currentDialogData?: DialogData
   itemKey: string
-  currencyInfo: OrderCurrency
 }
 
 export default function OrderDialog({
@@ -49,7 +47,6 @@ export default function OrderDialog({
   currentDialogData = undefined,
   setOpen,
   itemKey,
-  currencyInfo,
 }: OrderDialogProps) {
   const {
     state: { isB2BUser },
@@ -351,7 +348,6 @@ export default function OrderDialog({
           <OrderCheckboxProduct
             products={editableProducts}
             onProductChange={handleProductChange}
-            currencyInfo={currencyInfo}
             setCheckedArr={setCheckedArr}
             textAlign={isMobile ? 'left' : 'right'}
           />