Formatting fixes to Grant Details page (#2734)

* Add currency formatting helper

* Utilize new formatCurrency helper

* Titleize the opportunity status

* Fix agency code name

packages/client/src/components/GrantsTable.vue

@@ -45,7 +45,7 @@
           @sort-changed="currentPage = 1"
         >
           <template #cell(award_ceiling)="row">
-            <p> {{ formatMoney(row.item.award_ceiling) }}</p>
+            <p> {{ formatCurrency(row.item.award_ceiling) }}</p>
           </template>
           <template #table-busy>
             <div class="text-center text-info my-2" style="height: 1200px;">
@@ -104,6 +104,7 @@ import { datadogRum } from '@datadog/browser-rum';
 import { titleize } from '@/helpers/form-helpers';
 import { daysUntil } from '@/helpers/dates';
 import { defaultCloseDateThresholds } from '@/helpers/constants';
+import { formatCurrency } from '@/helpers/currency';
 import GrantDetailsLegacy from './Modals/GrantDetailsLegacy.vue';
 import SearchPanel from './Modals/SearchPanel.vue';
 import SavedSearchPanel from './Modals/SavedSearchPanel.vue';
@@ -345,6 +346,7 @@ export default {
       fetchSavedSearches: 'grants/fetchSavedSearches',
     }),
     titleize,
+    formatCurrency,
     extractStateFromRoute() {
       this.currentPage = Number(this.$route.query.page) || DEFAULT_CURRENT_PAGE;
       this.orderBy = this.$route.query.sort || DEFAULT_ORDER_BY;
@@ -499,18 +501,6 @@ export default {
         assignedToAgency: this.showAssignedToAgency,
       });
     },
-    formatMoney(value) {
-      if (value === undefined || value === null) {
-        return '';
-      }
-      const res = Number(value).toLocaleString('en-US', {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-        style: 'currency',
-        currency: 'USD',
-      });
-      return (`${res}`);
-    },
   },
 };
 </script>

packages/client/src/helpers/currency.js

@@ -0,0 +1,14 @@
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+  style: 'currency',
+  currency: 'USD',
+  currencyDisplay: 'narrowSymbol',
+});
+
+export function formatCurrency(value) {
+  if (value === undefined || value === null) {
+    return '';
+  }
+  return currencyFormatter.format(value);
+}

packages/client/src/views/GrantDetails.vue

@@ -160,6 +160,8 @@ import { mapActions, mapGetters } from 'vuex';
 import { datadogRum } from '@datadog/browser-rum';
 import { debounce } from 'lodash';
 import { newTerminologyEnabled } from '@/helpers/featureFlags';
+import { formatCurrency } from '@/helpers/currency';
+import { titleize } from '@/helpers/form-helpers';
 import { DateTime } from 'luxon';
 import UserAvatar from '@/components/UserAvatar.vue';
 
@@ -264,11 +266,11 @@ export default {
         name: 'Grant ID',
         value: this.selectedGrant.grant_id,
       }, {
-        name: 'Federal Awarding',
+        name: 'Agency Code',
         value: this.selectedGrant.agency_code,
       }, {
         name: 'Award Ceiling',
-        value: this.selectedGrant.award_ceiling,
+        value: formatCurrency(this.selectedGrant.award_ceiling),
       }, {
         name: 'Category of Funding Activity',
         value: this.selectedGrant.funding_activity_categories?.join(', '),
@@ -277,7 +279,7 @@ export default {
         value: this.selectedGrant.opportunity_category,
       }, {
         name: 'Opportunity Status',
-        value: this.selectedGrant.opportunity_status,
+        value: titleize(this.selectedGrant.opportunity_status),
       }, {
         name: 'Appropriation Bill',
         value: this.selectedGrant.bill,
@@ -354,6 +356,8 @@ export default {
       fetchAgencies: 'agencies/fetchAgencies',
       fetchGrantDetails: 'grants/fetchGrantDetails',
     }),
+    titleize,
+    formatCurrency,
     debounceSearchInput: debounce(function bounce(newVal) {
       this.debouncedSearchInput = newVal;
     }, 500),

packages/client/tests/unit/helpers/currency.spec.js

@@ -0,0 +1,29 @@
+import { expect } from 'chai';
+import { formatCurrency } from '@/helpers/currency';
+
+describe('currency helpers', () => {
+  describe('formatCurrency', () => {
+    it('formats basic currency value', () => {
+      expect(formatCurrency(1.23)).equals('$1.23');
+    });
+    it('formats large currency value', () => {
+      expect(formatCurrency(123456789.00)).equals('$123,456,789.00');
+    });
+    it('formats whole numbers with cents', () => {
+      expect(formatCurrency(1)).equals('$1.00');
+    });
+    it('formats sub-cent values to the cent', () => {
+      expect(formatCurrency(1.23456)).equals('$1.23');
+    });
+    it('formats negative values', () => {
+      expect(formatCurrency(-1.23)).equals('-$1.23');
+    });
+    it('formats zero', () => {
+      expect(formatCurrency(0)).equals('$0.00');
+    });
+    it('formats undefined/null values', () => {
+      expect(formatCurrency(null)).equals('');
+      expect(formatCurrency(undefined)).equals('');
+    });
+  });
+});