From 166130dfd8f61d0054f6a0e3241db27f706b54f5 Mon Sep 17 00:00:00 2001
From: scoxen1 <sean.coxen@gmail.com>
Date: Thu, 2 May 2024 12:56:53 -0400
Subject: [PATCH] refinements, formatting

---
 frontend/src/components/eCommerce/CartItem.js    |  4 ++--
 frontend/src/components/eCommerce/CartPreview.js | 14 +++++++-------
 frontend/src/utils/UtilityService.js             |  5 +++++
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/eCommerce/CartItem.js b/frontend/src/components/eCommerce/CartItem.js
index 57f31b5..1af2099 100644
--- 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
index 6071924..2971c7a 100644
--- 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
index 0876ca6..4a040a6 100644
--- 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: