From 012aaeac12b44a959709a82c72530e92e9c2578b Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Fri, 10 May 2024 10:24:06 -0700
Subject: [PATCH] 20417 - UXA Fixes (#2816)

---
 auth-web/package-lock.json                      |  4 ++--
 auth-web/package.json                           |  2 +-
 .../components/pay/eft/ShortNameAccountLink.vue |  4 +++-
 .../pay/eft/ShortNameTransactions.vue           | 17 +++++++++++++----
 .../components/ShortNameTransactions.spec.ts    |  2 +-
 5 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
index d66a64cb1e..512f72eddf 100644
--- a/auth-web/package-lock.json
+++ b/auth-web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "auth-web",
-  "version": "2.6.7",
+  "version": "2.6.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "auth-web",
-      "version": "2.6.7",
+      "version": "2.6.8",
       "dependencies": {
         "@bcrs-shared-components/base-address": "2.0.3",
         "@bcrs-shared-components/bread-crumb": "1.0.8",
diff --git a/auth-web/package.json b/auth-web/package.json
index ca673dbed4..c15da76cfd 100644
--- a/auth-web/package.json
+++ b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.7",
+  "version": "2.6.8",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,
diff --git a/auth-web/src/components/pay/eft/ShortNameAccountLink.vue b/auth-web/src/components/pay/eft/ShortNameAccountLink.vue
index 15e60923f4..9fe9f24428 100644
--- a/auth-web/src/components/pay/eft/ShortNameAccountLink.vue
+++ b/auth-web/src/components/pay/eft/ShortNameAccountLink.vue
@@ -110,7 +110,9 @@
       v-else
       class="d-flex justify-space-between pa-5 unlinked-text"
     >
-      This short name is not linked with an account.
+      <span class="pt-1">
+        This short name is not linked with an account.
+      </span>
       <v-btn
         id="link-shortname-btn"
         color="primary"
diff --git a/auth-web/src/components/pay/eft/ShortNameTransactions.vue b/auth-web/src/components/pay/eft/ShortNameTransactions.vue
index 51bcd7454c..712caa09f7 100644
--- a/auth-web/src/components/pay/eft/ShortNameTransactions.vue
+++ b/auth-web/src/components/pay/eft/ShortNameTransactions.vue
@@ -45,7 +45,7 @@
       </span>
     </template>
     <template #item-slot-transactionAmount="{ item }">
-      <span>{{ formatCurrency(item.transactionAmount) }}</span>
+      <span>{{ formatTransactionAmount(item) }}</span>
     </template>
   </BaseVDataTable>
 </template>
@@ -87,13 +87,13 @@ export default defineComponent({
       {
         col: 'statementId',
         hasFilter: false,
-        minWidth: '200px',
+        minWidth: '175px',
         value: 'Related Statement Number'
       },
       {
         col: 'transactionAmount',
         hasFilter: false,
-        minWidth: '125px',
+        minWidth: '355px',
         value: 'Amount'
       }
     ]
@@ -150,8 +150,17 @@ export default defineComponent({
       return item?.transactionDescription === ShortNameTransactionRowType.STATEMENT_PAID
     }
 
+    function formatTransactionAmount (item: any) {
+      if (item.transactionAmount === undefined) return ''
+      let amount = CommonUtils.formatAmount(item.transactionAmount)
+      if (isStatementPaid(item)) {
+        amount = `-${amount}`
+      }
+      return amount
+    }
+
     return {
-      formatCurrency: CommonUtils.formatAmount,
+      formatTransactionAmount,
       formatDate: CommonUtils.formatDisplayDate,
       formatAccountDisplayName: CommonUtils.formatAccountDisplayName,
       headers,
diff --git a/auth-web/tests/unit/components/ShortNameTransactions.spec.ts b/auth-web/tests/unit/components/ShortNameTransactions.spec.ts
index 12e3a2ab84..178b53634c 100644
--- a/auth-web/tests/unit/components/ShortNameTransactions.spec.ts
+++ b/auth-web/tests/unit/components/ShortNameTransactions.spec.ts
@@ -121,7 +121,7 @@ describe('ShortNameTransactions.vue', () => {
       expect(columns.at(1).text()).toContain(transactionsResponse.items[i].transactionDescription)
       expect(columns.at(2).text()).toBe(transactionsResponse.items[i].statementId
         ? transactionsResponse.items[i].statementId.toString() : '')
-      expect(columns.at(3).text()).toBe(
+      expect(columns.at(3).text()).toContain(
         CommonUtils.formatAmount(transactionsResponse.items[i].transactionAmount))
     }
   })