refinements, formatting

cesmii · May 2, 2024 · 166130d · 166130d
1 parent 09852be
commit 166130d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/frontend/src/components/eCommerce/CartItem.js b/frontend/src/components/eCommerce/CartItem.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, Fragment } from 'react'
 import { Form, Col, Card } from 'react-bootstrap'
 import { validateCartItem_Quantity } from '../../utils/CartUtil';
-import { generateLogMessageString } from '../../utils/UtilityService';
+import { formatCurrency, generateLogMessageString } from '../../utils/UtilityService';
 import _icon from '../img/icon-cesmii-white.png'
 import '../styles/Modal.scss';
 
@@ -145,7 +145,7 @@ function CartItem(props) {
                         </Col>
                     }
                     <Col className='d-flex'>
-                        <Form.Label className='ml-auto'>${price.amount}</Form.Label>
+                        <Form.Label className='ml-auto pr-2'>{formatCurrency(price.amount)}</Form.Label>
                     </Col>
                 </Form.Row>
             </Form.Group>

diff --git a/frontend/src/components/eCommerce/CartPreview.js b/frontend/src/components/eCommerce/CartPreview.js
@@ -2,7 +2,7 @@ import React, { useState, Fragment, useEffect } from 'react'
 import { Form } from 'react-bootstrap'
 
 import { useLoadingContext } from '../../components/contexts/LoadingContext';
-import { generateLogMessageString } from '../../utils/UtilityService';
+import { formatCurrency, generateLogMessageString } from '../../utils/UtilityService';
 import { removeCartItem, updateCart } from '../../utils/CartUtil';
 import CartItem from './CartItem';
 
@@ -124,20 +124,20 @@ function CartPreview() {
             <>
                 {credits != null && 
                 <>
-                    <div className="row m-0 pt-1 mt-1 border-bottom font-weight-bold">
+                    <div className="row m-0 py-1 mt-1 border-bottom">
                         <div className="col-8">
                             Sub-Total
                         </div>
                         <div className="col-4 text-right">
-                            ${subTotal}
+                            <span className="pr-2" >{formatCurrency(subTotal)}</span>
                         </div>
                     </div>
-                    <div className="row m-0 pt-1 mt-1 border-bottom font-weight-bold">
+                    <div className="row m-0 py-1 mt-1 border-bottom">
                         <div className="col-8">
                             Credits Applied
                         </div>
                         <div className="col-4 text-right">
-                            ${credits}
+                            <span className="pr-2" >{formatCurrency(credits)}</span>
                         </div>
                     </div>
                 </>
@@ -147,7 +147,7 @@ function CartPreview() {
                         Total
                     </div>
                     <div className="col-4 text-right">
-                        ${total}
+                        <span className="pr-2" >{formatCurrency(total)}</span>
                     </div>
                 </div>
             </>
@@ -163,7 +163,7 @@ function CartPreview() {
 
         return (
             <div className="text-center border-top mt-3 pt-2">
-                <p>Your organization has <b>${loadingProps.user.credit} {loadingProps.user.credit === 1? 'credit' : 'credits' }</b> available to apply to this purchase.</p>
+                <p>Your organization has <b>{formatCurrency(loadingProps.user.credit)} {loadingProps.user.credit === 1? 'credit' : 'credits' }</b> available to apply to this purchase.</p>
                 <Form.Group>
                     <Form.Check className="align-self-end" type="checkbox" id="useCredits" label="Use credits for this purchase?" 
                         checked={_useCredits} onChange={onChangeChecked} />

diff --git a/frontend/src/utils/UtilityService.js b/frontend/src/utils/UtilityService.js
@@ -147,6 +147,11 @@ export function formatItemPublishDate(item) {
     return formatDate(item.publishDate);
 }
 
+export function formatCurrency(val) {
+    if (val == null || val === '') return null;
+    var usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
+    return usd.format(val);
+}
 
 // From ProfileDesigner\frontend\src\views\shared\ProfileEntity.js:
 //Dates will come in two formats: