21999 - EFT screens enhancements - Numerical formatting changes from Finance

auth-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.56",
+  "version": "2.6.57",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

auth-web/src/components/pay/eft/ShortNameTransactions.vue

@@ -28,7 +28,7 @@
         >
           mdi-format-list-bulleted
         </v-icon>
-        Payment History
+        Short Name Payment History
       </h2>
     </template>
     <template #header-filter-slot />
@@ -46,6 +46,7 @@
     </template>
     <template #item-slot-transactionAmount="{ item }">
       <span>{{ formatTransactionAmount(item) }}</span>
+      <span class="transaction-details">{{ formatBalanceAmount(item) }}</span>
     </template>
   </BaseVDataTable>
 </template>
@@ -158,8 +159,13 @@ export default defineComponent({
       }
       return amount
     }
+    function formatBalanceAmount (item: any) {
+      if (item.balance === undefined) return ''
+      return `Balance: ${CommonUtils.formatAmount(item.balance)}`
+    }
 
     return {
+      formatBalanceAmount,
       formatTransactionAmount,
       formatDate: CommonUtils.formatDisplayDate,
       formatAccountDisplayName: CommonUtils.formatAccountDisplayName,

auth-web/src/util/common-util.ts

@@ -128,7 +128,12 @@ export default class CommonUtils {
 
   // Format amount for displaying dollar currency
   static formatAmount (amount: number): string {
-    return `$${amount.toFixed(2)}`
+    return amount.toLocaleString('en-CA', {
+      style: 'currency',
+      currency: 'CAD',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    })
   }
 
   // Formatting date in the desired format for displaying in the template

auth-web/tests/unit/components/LinkedShortNameTable.spec.ts

@@ -1,5 +1,6 @@
 import { Wrapper, createLocalVue, mount } from '@vue/test-utils'
 import { BaseVDataTable } from '@/components'
+import CommonUtils from '@/util/common-util'
 import LinkedShortNameTableVue from '@/components/pay/LinkedShortNameTable.vue'
 import { VueConstructor } from 'vue'
 import Vuetify from 'vuetify'
@@ -112,7 +113,7 @@ describe('LinkedShortNameTable.vue', () => {
       expect(columns.at(1).text()).toBe(linkedShortNameResponse.items[i].accountName)
       expect(columns.at(2).text()).toBe(linkedShortNameResponse.items[i].accountBranch)
       expect(columns.at(3).text()).toBe(linkedShortNameResponse.items[i].accountId)
-      expect(columns.at(4).text()).toBe(`$${linkedShortNameResponse.items[i].amountOwing.toFixed(2)}`)
+      expect(columns.at(4).text()).toBe(`${CommonUtils.formatAmount(linkedShortNameResponse.items[i].amountOwing)}`)
       expect(columns.at(5).text()).toBe(linkedShortNameResponse.items[i].statementId.toString())
     }
   })

auth-web/tests/unit/components/Statements.spec.ts

@@ -101,8 +101,8 @@ describe('Statements.vue', () => {
     })
     expect(wrapper.vm.formatAmount(0)).toBe('$0.00')
     expect(wrapper.vm.formatAmount(1)).toBe('$1.00')
-    expect(wrapper.vm.formatAmount(1000)).toBe('$1000.00')
-    expect(wrapper.vm.formatAmount(1000.1)).toBe('$1000.10')
+    expect(wrapper.vm.formatAmount(1000)).toBe('$1,000.00')
+    expect(wrapper.vm.formatAmount(1000.1)).toBe('$1,000.10')
     wrapper.destroy()
   })
 

auth-web/tests/unit/util/common-util.spec.ts

@@ -195,6 +195,10 @@ describe('Common Util Test', () => {
     expect(CommonUtil.trimTrailingSlashURL('abc/')).toBe('abc')
   })
 
+  it('formatAmount returns formatted amount', () => {
+    expect(CommonUtil.formatAmount(1234.567)).toBe('$1,234.57')
+  })
+
   afterEach(() => {
     window.location.pathname = pathname
   })