From a49556974d9f2afc236a8ab865d3a76271402be8 Mon Sep 17 00:00:00 2001
From: Rodrigo Barraza <hello@rod.dev>
Date: Wed, 15 Jan 2025 21:00:19 -0800
Subject: [PATCH 1/7] Updates to NSF

---
 auth-web/package.json                         |  2 +-
 auth-web/src/assets/scss/layout.scss          |  2 +-
 auth-web/src/assets/scss/theme.scss           |  2 +-
 .../account-freeze/AccountOverviewNSF.vue     | 39 +++++---
 .../auth/common/AccountSuspendAlert.vue       | 88 +++++++++----------
 auth-web/src/util/common-util.ts              |  5 ++
 auth-web/src/views/auth/AccountSettings.vue   |  9 +-
 .../AccountFreezeUnlockView.vue               | 36 ++++----
 8 files changed, 96 insertions(+), 87 deletions(-)

diff --git a/auth-web/package.json b/auth-web/package.json
index f516ebe4f8..d92f2045c9 100644
--- a/auth-web/package.json
+++ b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.7.5",
+  "version": "2.7.6",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,
diff --git a/auth-web/src/assets/scss/layout.scss b/auth-web/src/assets/scss/layout.scss
index 8f2cb6a70d..0df18d0db6 100644
--- a/auth-web/src/assets/scss/layout.scss
+++ b/auth-web/src/assets/scss/layout.scss
@@ -18,7 +18,7 @@
 .view-header {
   display: flex;
   flex-direction: row;
-  margin-bottom: 2.75rem;
+  margin-bottom: 40px;
 
   .back-btn {
     margin-top: -0.25rem;
diff --git a/auth-web/src/assets/scss/theme.scss b/auth-web/src/assets/scss/theme.scss
index 6a7ab5e901..149ce9db99 100644
--- a/auth-web/src/assets/scss/theme.scss
+++ b/auth-web/src/assets/scss/theme.scss
@@ -69,7 +69,7 @@ $BCgovAGold4: #FFD4A2;
 $BCgovGreen1: #2E7D32;
 
 // Error Colors
-$BCgovInputError: #ff5252;
+$BCgovInputError: #d3272c;
 
 // Form Inputs
 $BCgovInputBG: #ffffff;
diff --git a/auth-web/src/components/auth/account-freeze/AccountOverviewNSF.vue b/auth-web/src/components/auth/account-freeze/AccountOverviewNSF.vue
index f9685d9a3f..3bdf4cacde 100644
--- a/auth-web/src/components/auth/account-freeze/AccountOverviewNSF.vue
+++ b/auth-web/src/components/auth/account-freeze/AccountOverviewNSF.vue
@@ -1,7 +1,13 @@
 <template>
   <div>
-    <p class="mb-10">
-      This account has been suspended for a failed payment.
+    <p class="mb-10 subtitle">
+      <v-icon
+        color="#d3272c"
+      >
+        mdi-alert
+      </v-icon>
+      We were unable to process the payment from your bank account, and as a result, your account has been suspended.
+      Returned system error message: {{ suspensionReason }}
     </p>
 
     <v-card
@@ -20,10 +26,10 @@
         </v-row>
         <v-divider class="my-2" />
         <v-row>
-          <v-col cols="9">
+          <v-col cols="10">
             <div>Dishonored Bank Instrument Fee</div>
             <div class="font-italic">
-              As per PAD terms, you are charged $30 dishonored bank fee for every failed payment
+              As per PAD agreement, you are charged $30 dishonored bank fee for every failed payment
             </div>
           </v-col>
           <v-col class="text-end">
@@ -31,7 +37,7 @@
           </v-col>
         </v-row>
         <v-row>
-          <v-col cols="9">
+          <v-col cols="10">
             Total Transactions
           </v-col>
           <v-col class="text-end">
@@ -40,7 +46,7 @@
         </v-row>
         <v-divider class="my-2" />
         <v-row class="font-weight-bold">
-          <v-col cols="9">
+          <v-col cols="10">
             Total Amount Due
           </v-col>
           <v-col class="text-end">
@@ -87,26 +93,28 @@
 import { computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
 import CommonUtils from '@/util/common-util'
 import { FailedInvoice } from '@/models/invoice'
-import moment from 'moment'
+import { useCodesStore } from '@/stores/codes'
 import { useOrgStore } from '@/stores/org'
 
 export default defineComponent({
   name: 'AccountOverviewNSFView',
   emits: ['step-forward'],
   setup (_, { emit }) {
+    const { getCodes } = useCodesStore()
     const orgStore = useOrgStore()
     const currentOrganization = computed(() => orgStore.currentOrganization)
     const currentMembership = computed(() => orgStore.currentMembership)
     const calculateFailedInvoices: any = orgStore.calculateFailedInvoices
     const downloadNSFInvoicesPDF: any = orgStore.downloadNSFInvoicesPDF
-    const formatDate = CommonUtils.formatDisplayDate
-    const suspendedDate = (currentOrganization.value?.suspendedOn) ? formatDate(moment(currentOrganization.value.suspendedOn)) : ''
 
     const state = reactive({
       nsfAmount: 0,
       totalAmount: 0,
       totalAmountRemaining: 0,
-      totalPaidAmount: 0
+      totalPaidAmount: 0,
+      suspensionReason: '',
+      suspendedDate: currentOrganization.value?.suspendedOn
+        ? CommonUtils.formatDateToHumanReadable(currentOrganization.value.suspendedOn) : ''
     })
 
     const goNext = () => {
@@ -114,6 +122,10 @@ export default defineComponent({
     }
 
     onMounted(async () => {
+      const suspensionReasonCodes = await getCodes()
+      state.suspensionReason = suspensionReasonCodes.find(
+        suspensionReasonCode => suspensionReasonCode?.code === currentOrganization.value?.suspensionReasonCode
+      )?.desc
       const failedInvoices: FailedInvoice = await calculateFailedInvoices()
       state.totalAmount = failedInvoices?.totalTransactionAmount || 0
       state.nsfAmount = failedInvoices?.nsfFee || 0
@@ -124,7 +136,6 @@ export default defineComponent({
       ...toRefs(state),
       currentOrganization,
       currentMembership,
-      suspendedDate,
       downloadNSFInvoicesPDF,
       goNext
     }
@@ -136,6 +147,12 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "$assets/scss/theme.scss";
 
+.subtitle {
+  font-size: 1rem;
+  font-weight: 500;
+  color: $BCgovInputError;
+}
+
 .suspended-info-card {
   border-color: $BCgovInputError !important;
   border-width: 2px !important;
diff --git a/auth-web/src/components/auth/common/AccountSuspendAlert.vue b/auth-web/src/components/auth/common/AccountSuspendAlert.vue
index 028ccecf17..966fef9a79 100644
--- a/auth-web/src/components/auth/common/AccountSuspendAlert.vue
+++ b/auth-web/src/components/auth/common/AccountSuspendAlert.vue
@@ -11,7 +11,7 @@
           large
           class="mt-2"
         >
-          mdi-alert-circle-outline
+          mdi-alert
         </v-icon>
         <div
           v-if="isSuspendedForNSF"
@@ -21,7 +21,7 @@
             Account Suspended
           </div>
           <div>
-            Account has been suspended for {{ accountSuspendReason }}.
+            This acount has been suspended. Returned system error message: {{ suspensionReason }}.
           </div>
           <div class="mt-6 title font-weight-bold">
             BALANCE DUE:  ${{ totalAmountToPay.toFixed(2) }}
@@ -38,7 +38,7 @@
           class="d-flex flex-column ml-7"
         >
           <div class="title font-weight-bold">
-            Account Suspended ({{ suspendedReason() }})
+            Account Suspended ({{ suspendedReason }})
           </div>
           <div class="d-flex">
             <span>Date Suspended: {{ suspendedDate }}<span class="vertical-line" /> Suspended by: {{ suspendedBy }}</span>
@@ -50,60 +50,52 @@
 </template>
 
 <script lang="ts">
-import { AccountStatus, SuspensionReasonCode } from '@/util/constants'
-import { Action, State } from 'pinia-class'
-import { Component, Vue } from 'vue-property-decorator'
-import { Code } from '@/models/Code'
+import { computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
+import { AccountStatus } from '@/util/constants'
 import CommonUtils from '@/util/common-util'
 import { FailedInvoice } from '@/models/invoice'
-import { Organization } from '@/models/Organization'
 import { useCodesStore } from '@/stores/codes'
 import { useOrgStore } from '@/stores/org'
 
-@Component
-export default class AccountSuspendAlert extends Vue {
-  @Action(useOrgStore) private calculateFailedInvoices!: () => FailedInvoice
-  @State(useOrgStore) private currentOrganization!: Organization
-  @State(useCodesStore) private suspensionReasonCodes!: Code[]
-  private formatDate = CommonUtils.formatDisplayDate
+export default defineComponent({
+  name: 'AccountSuspendAlert',
+  setup () {
+    const orgStore = useOrgStore()
+    const codesStore = useCodesStore()
+    const currentOrganization = computed(() => orgStore.currentOrganization)
 
-  totalTransactionAmount = 0
-  totalAmountToPay = 0
-  totalPaidAmount = 0
+    const state = reactive({
+      totalTransactionAmount: 0,
+      totalAmountToPay: 0,
+      totalPaidAmount: 0,
+      suspensionReason: computed(() => {
+        return codesStore.suspensionReasonCodes?.find(
+          suspensionReasonCode => suspensionReasonCode?.code === currentOrganization.value?.suspensionReasonCode
+        )?.desc
+      }),
+      suspendedDate: currentOrganization.value?.suspendedOn
+        ? CommonUtils.formatDateToHumanReadable(currentOrganization.value.suspendedOn) : '',
+      isSuspendedForNSF: computed(() => currentOrganization.value?.statusCode === AccountStatus.NSF_SUSPENDED),
+      suspendedBy: computed(() => currentOrganization.value?.decisionMadeBy),
+      suspendedReason: computed(() => {
+        return codesStore.suspensionReasonCodes?.find(
+          suspensionReasonCode => suspensionReasonCode?.code === currentOrganization.value?.suspensionReasonCode
+        )?.desc
+      })
+    })
 
-  get suspendedDate () {
-    return (this.currentOrganization?.suspendedOn)
-      ? this.formatDate(new Date(this.currentOrganization.suspendedOn)) : ''
-  }
-
-  get isSuspendedForNSF (): boolean {
-    return this.currentOrganization?.statusCode === AccountStatus.NSF_SUSPENDED
-  }
-
-  get suspendedBy (): string {
-    return this.currentOrganization?.decisionMadeBy
-  }
-
-  get accountSuspendReason (): string {
-    if (this.currentOrganization?.suspensionReasonCode === SuspensionReasonCode.OVERDUE_EFT) {
-      return 'overdue EFT payments'
-    }
-    return 'outstanding balance (NSF)'
-  }
-
-  suspendedReason (): string {
-    return this.suspensionReasonCodes?.find(suspensionReasonCode =>
-      suspensionReasonCode?.code === this.currentOrganization?.suspensionReasonCode)?.desc
-  }
-
-  async mounted () {
-    if (this.isSuspendedForNSF) {
-      const failedInvoices: FailedInvoice = await this.calculateFailedInvoices()
-      this.totalTransactionAmount = failedInvoices.totalTransactionAmount || 0
-      this.totalAmountToPay = failedInvoices.totalAmountToPay || 0
+    onMounted(async () => {
+      if (state.isSuspendedForNSF) {
+        const failedInvoices: FailedInvoice = await orgStore.calculateFailedInvoices()
+        state.totalTransactionAmount = failedInvoices.totalTransactionAmount || 0
+        state.totalAmountToPay = failedInvoices.totalAmountToPay || 0
+      }
+    })
+    return {
+      ...toRefs(state)
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/auth-web/src/util/common-util.ts b/auth-web/src/util/common-util.ts
index fc8d60ecbf..b0c647f4e6 100644
--- a/auth-web/src/util/common-util.ts
+++ b/auth-web/src/util/common-util.ts
@@ -148,6 +148,11 @@ export default class CommonUtils {
   static formatDatePickerDate (date?: Date) {
     return moment(date || new Date()).format('YYYY-MM-DD')
   }
+
+  static formatDateToHumanReadable (date: Date | string | moment.Moment) {
+    return moment(date).format('MMMM DD, YYYY')
+  }
+
   // Formatting date in the desired format for vue date pickers
   static formatCurrentDate () {
     return moment(new Date()).format('MMMM DD, YYYY')
diff --git a/auth-web/src/views/auth/AccountSettings.vue b/auth-web/src/views/auth/AccountSettings.vue
index a243d70354..5ca3247e9c 100644
--- a/auth-web/src/views/auth/AccountSettings.vue
+++ b/auth-web/src/views/auth/AccountSettings.vue
@@ -85,16 +85,9 @@
         {{ currentOrganization.name }}
       </h1>
       <p
-        v-if="isPremiumAccount"
         class="mt-3 mb-0"
       >
-        Manage account information, and view account activity.
-      </p>
-      <p
-        v-else
-        class="mt-3 mb-0"
-      >
-        Manage account information, team members, and authentication settings.
+        Manage account settings, team members, and view transactions for this account
       </p>
     </div>
 
diff --git a/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue b/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue
index e9cbebb0bf..63176b7e84 100644
--- a/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue
+++ b/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue
@@ -8,7 +8,7 @@
         <h1 class="view-header__title">
           Your Account is Suspended
         </h1>
-        <p class="mt-3 mb-0 py-4 px-6 important">
+        <p class="mt-3 mb-0 py-6 px-6 important">
           <v-icon
             color="red"
             class="pr-1"
@@ -65,21 +65,20 @@
     class="view-container"
   >
     <div class="view-header">
-      <div class="view-header__icon">
-        <v-icon
-          large
-          color="error"
-          class="mt-1 mr-4"
-        >
-          mdi-alert-circle-outline
-        </v-icon>
-      </div>
-      <div>
+      <div class="w-100">
         <h1 class="view-header__title">
-          This account has been temporarily suspended
+          Your Account is Suspended
         </h1>
-        <p class="mt-3 mb-0">
-          To unlock your account, please complete the following steps.
+        <p class="mt-3 mb-0 py-6 px-6 important">
+          <v-icon
+            color="red"
+            class="pr-1"
+            small
+          >
+            mdi-alert
+          </v-icon>
+          <span class="font-weight-bold">Important: </span>
+          Please complete the following steps to complete your payment.
         </p>
       </div>
     </div>
@@ -88,7 +87,6 @@
         ref="stepper"
         :stepper-configuration="stepperConfig"
         :isLoading="isLoading"
-        :stepperColor="'error'"
         @final-step-action="unlockAccount"
         @step-forward="handleStepForward"
       />
@@ -315,9 +313,13 @@ export default defineComponent({
 
 .important {
   background-color: #fae9e9;
-  border: 2px solid #d3272c;
+  border: 1.5px solid #d3272c;
   color: #495057;
-  font-size: 12px;
+  font-size: 14px;
+}
+
+.w-100 {
+  width: 100%;
 }
 
 </style>

From e40ce2ef9b4986c6e3ff5c329a2e2432fca45f58 Mon Sep 17 00:00:00 2001
From: Rodrigo Barraza <hello@rod.dev>
Date: Thu, 16 Jan 2025 07:12:32 -0800
Subject: [PATCH 2/7] Updating unit test

---
 auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts b/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
index cb261c0061..89cbab79e5 100644
--- a/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
+++ b/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
@@ -67,7 +67,7 @@ describe('AccountFreezeUnlockView', () => {
   it('Should render NSF view', async () => {
     wrapper.vm.isAccountStatusNsfSuspended = true
     await wrapper.vm.$nextTick()
-    expect(wrapper.find('h1').text()).toBe('This account has been temporarily suspended')
+    expect(wrapper.find('h1').text()).toBe('Your Account is Suspended')
     expect(wrapper.find('p').text()).toBe('To unlock your account, please complete the following steps.')
     expect(wrapper.find('.view-header__icon .v-icon').exists()).toBe(true)
   })

From ed6f4abd8a993968c3fb3b6d2433f9bf76607b91 Mon Sep 17 00:00:00 2001
From: Rodrigo Barraza <hello@rod.dev>
Date: Thu, 16 Jan 2025 07:19:32 -0800
Subject: [PATCH 3/7] Updating unit test

---
 auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts b/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
index 89cbab79e5..cf9d69ae00 100644
--- a/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
+++ b/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
@@ -68,7 +68,7 @@ describe('AccountFreezeUnlockView', () => {
     wrapper.vm.isAccountStatusNsfSuspended = true
     await wrapper.vm.$nextTick()
     expect(wrapper.find('h1').text()).toBe('Your Account is Suspended')
-    expect(wrapper.find('p').text()).toBe('To unlock your account, please complete the following steps.')
+    expect(wrapper.find('p').text()).toBe('Important:  Please complete the following steps to complete your payment.')
     expect(wrapper.find('.view-header__icon .v-icon').exists()).toBe(true)
   })
 

From 220b65a4865c83ba4f9808fcd51e65f480c6f079 Mon Sep 17 00:00:00 2001
From: Rodrigo Barraza <hello@rod.dev>
Date: Thu, 16 Jan 2025 07:24:43 -0800
Subject: [PATCH 4/7] Unit test update

---
 auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts b/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
index cf9d69ae00..fa23dbf8df 100644
--- a/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
+++ b/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
@@ -69,7 +69,6 @@ describe('AccountFreezeUnlockView', () => {
     await wrapper.vm.$nextTick()
     expect(wrapper.find('h1').text()).toBe('Your Account is Suspended')
     expect(wrapper.find('p').text()).toBe('Important:  Please complete the following steps to complete your payment.')
-    expect(wrapper.find('.view-header__icon .v-icon').exists()).toBe(true)
   })
 
   it('Should render <Stepper>', () => {

From 41fba7911a80549ea79e66a969ed38d47f78d9a7 Mon Sep 17 00:00:00 2001
From: Rodrigo Barraza <hello@rod.dev>
Date: Thu, 16 Jan 2025 08:44:35 -0800
Subject: [PATCH 5/7] grabbing suspension reason from NSF endpoint instead

---
 .../auth/account-freeze/AccountOverviewNSF.vue        | 11 +++--------
 .../components/auth/common/AccountSuspendAlert.vue    |  9 +++------
 auth-web/src/models/invoice.ts                        |  2 ++
 auth-web/src/stores/org.ts                            |  4 +++-
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/auth-web/src/components/auth/account-freeze/AccountOverviewNSF.vue b/auth-web/src/components/auth/account-freeze/AccountOverviewNSF.vue
index 3bdf4cacde..91790933d8 100644
--- a/auth-web/src/components/auth/account-freeze/AccountOverviewNSF.vue
+++ b/auth-web/src/components/auth/account-freeze/AccountOverviewNSF.vue
@@ -7,7 +7,7 @@
         mdi-alert
       </v-icon>
       We were unable to process the payment from your bank account, and as a result, your account has been suspended.
-      Returned system error message: {{ suspensionReason }}
+      Returned system error message: {{ reason }}.
     </p>
 
     <v-card
@@ -93,14 +93,12 @@
 import { computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
 import CommonUtils from '@/util/common-util'
 import { FailedInvoice } from '@/models/invoice'
-import { useCodesStore } from '@/stores/codes'
 import { useOrgStore } from '@/stores/org'
 
 export default defineComponent({
   name: 'AccountOverviewNSFView',
   emits: ['step-forward'],
   setup (_, { emit }) {
-    const { getCodes } = useCodesStore()
     const orgStore = useOrgStore()
     const currentOrganization = computed(() => orgStore.currentOrganization)
     const currentMembership = computed(() => orgStore.currentMembership)
@@ -112,7 +110,7 @@ export default defineComponent({
       totalAmount: 0,
       totalAmountRemaining: 0,
       totalPaidAmount: 0,
-      suspensionReason: '',
+      reason: '',
       suspendedDate: currentOrganization.value?.suspendedOn
         ? CommonUtils.formatDateToHumanReadable(currentOrganization.value.suspendedOn) : ''
     })
@@ -122,14 +120,11 @@ export default defineComponent({
     }
 
     onMounted(async () => {
-      const suspensionReasonCodes = await getCodes()
-      state.suspensionReason = suspensionReasonCodes.find(
-        suspensionReasonCode => suspensionReasonCode?.code === currentOrganization.value?.suspensionReasonCode
-      )?.desc
       const failedInvoices: FailedInvoice = await calculateFailedInvoices()
       state.totalAmount = failedInvoices?.totalTransactionAmount || 0
       state.nsfAmount = failedInvoices?.nsfFee || 0
       state.totalAmountRemaining = failedInvoices?.totalAmountToPay || 0
+      state.reason = failedInvoices.reason || ''
     })
 
     return {
diff --git a/auth-web/src/components/auth/common/AccountSuspendAlert.vue b/auth-web/src/components/auth/common/AccountSuspendAlert.vue
index 966fef9a79..01bc92e4c0 100644
--- a/auth-web/src/components/auth/common/AccountSuspendAlert.vue
+++ b/auth-web/src/components/auth/common/AccountSuspendAlert.vue
@@ -21,7 +21,7 @@
             Account Suspended
           </div>
           <div>
-            This acount has been suspended. Returned system error message: {{ suspensionReason }}.
+            This acount has been suspended. Returned system error message: {{ reason }}.
           </div>
           <div class="mt-6 title font-weight-bold">
             BALANCE DUE:  ${{ totalAmountToPay.toFixed(2) }}
@@ -68,11 +68,7 @@ export default defineComponent({
       totalTransactionAmount: 0,
       totalAmountToPay: 0,
       totalPaidAmount: 0,
-      suspensionReason: computed(() => {
-        return codesStore.suspensionReasonCodes?.find(
-          suspensionReasonCode => suspensionReasonCode?.code === currentOrganization.value?.suspensionReasonCode
-        )?.desc
-      }),
+      reason: '',
       suspendedDate: currentOrganization.value?.suspendedOn
         ? CommonUtils.formatDateToHumanReadable(currentOrganization.value.suspendedOn) : '',
       isSuspendedForNSF: computed(() => currentOrganization.value?.statusCode === AccountStatus.NSF_SUSPENDED),
@@ -89,6 +85,7 @@ export default defineComponent({
         const failedInvoices: FailedInvoice = await orgStore.calculateFailedInvoices()
         state.totalTransactionAmount = failedInvoices.totalTransactionAmount || 0
         state.totalAmountToPay = failedInvoices.totalAmountToPay || 0
+        state.reason = failedInvoices.reason || ''
       }
     })
     return {
diff --git a/auth-web/src/models/invoice.ts b/auth-web/src/models/invoice.ts
index 677d8f90a8..dfe6393dd0 100644
--- a/auth-web/src/models/invoice.ts
+++ b/auth-web/src/models/invoice.ts
@@ -46,6 +46,7 @@ export interface FailedInvoice {
   totalAmountToPay?: number
   invoices?: InvoiceList[]
   statements?: Statement[]
+  reason?: string
 }
 
 export interface NonSufficientFundsInvoiceListResponse {
@@ -55,4 +56,5 @@ export interface NonSufficientFundsInvoiceListResponse {
   totalAmount: number
   totalAmountRemaining: number
   nsfAmount: number
+  reason?: string
 }
diff --git a/auth-web/src/stores/org.ts b/auth-web/src/stores/org.ts
index 33dda83e70..aa26b6c554 100644
--- a/auth-web/src/stores/org.ts
+++ b/auth-web/src/stores/org.ts
@@ -793,13 +793,15 @@ export const useOrgStore = defineStore('org', () => {
     const totalAmount = nsfInvoices?.totalAmount || 0
     const totalAmountRemaining = nsfInvoices?.totalAmountRemaining || 0
     const nsfAmount = nsfInvoices?.nsfAmount || 0
+    const reason = nsfInvoices?.reason || ''
 
     return {
       invoices: invoices,
       statements: statements,
       nsfFee: nsfAmount,
       totalAmountToPay: totalAmountRemaining,
-      totalTransactionAmount: totalAmount
+      totalTransactionAmount: totalAmount,
+      reason: reason
     }
   }
 

From 69035c0b6be3c19b2af35c5249392ee674117a11 Mon Sep 17 00:00:00 2001
From: Rodrigo Barraza <hello@rod.dev>
Date: Fri, 17 Jan 2025 08:18:46 -0800
Subject: [PATCH 6/7] Cleaning up date type

---
 auth-web/src/util/common-util.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/auth-web/src/util/common-util.ts b/auth-web/src/util/common-util.ts
index b0c647f4e6..ab84a57bb9 100644
--- a/auth-web/src/util/common-util.ts
+++ b/auth-web/src/util/common-util.ts
@@ -4,6 +4,8 @@ import { NrRequestActionCodes, NrRequestTypeCodes } from '@bcrs-shared-component
 import { NrRequestTypeStrings, Permission } from '@/util/constants'
 import moment from 'moment'
 
+type DateLike = string | Date | moment.Moment
+
 /**
  * A class to put all the common utility methods.
  */
@@ -11,7 +13,7 @@ export default class CommonUtils {
   // formats two dates into a range string, takes in most date formats
   // eg1. formatDateRange('2021-01-01', new Date()) => 'January 01, 2021 - May 27, 2024'
   // eg2. formatDateRange('March 1 2024', moment()) => 'March 01 - May 27, 2024'
-  static formatDateRange (date1: string | Date | moment.Moment, date2: string | Date): string {
+  static formatDateRange (date1: DateLike, date2: DateLike): string {
     const dateObj1 = moment(date1)
     const dateObj2 = moment(date2)
     const year = (dateObj1.year() === dateObj2.year()) ? dateObj1.year() : ''
@@ -138,7 +140,7 @@ export default class CommonUtils {
   }
 
   // Formatting date in the desired format for displaying in the template
-  static formatDisplayDate (date: Date | string | moment.Moment, format?: string) {
+  static formatDisplayDate (date: DateLike, format?: string) {
     // not working in CI (getting UTC datetime)
     return (date) ? moment(date.toLocaleString('en-US', { timeZone: 'America/Vancouver' }))
       .format(format || 'YYYY-MM-DD') : ''
@@ -149,7 +151,7 @@ export default class CommonUtils {
     return moment(date || new Date()).format('YYYY-MM-DD')
   }
 
-  static formatDateToHumanReadable (date: Date | string | moment.Moment) {
+  static formatDateToHumanReadable (date: DateLike) {
     return moment(date).format('MMMM DD, YYYY')
   }
 

From bf4cbdd1fc23542f02bf1f1af290c69289d1b3f8 Mon Sep 17 00:00:00 2001
From: Rodrigo Barraza <hello@rod.dev>
Date: Mon, 20 Jan 2025 16:26:22 -0800
Subject: [PATCH 7/7] Small typo fix

---
 auth-web/src/components/auth/common/AccountSuspendAlert.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/auth-web/src/components/auth/common/AccountSuspendAlert.vue b/auth-web/src/components/auth/common/AccountSuspendAlert.vue
index 01bc92e4c0..e9187020c0 100644
--- a/auth-web/src/components/auth/common/AccountSuspendAlert.vue
+++ b/auth-web/src/components/auth/common/AccountSuspendAlert.vue
@@ -21,7 +21,7 @@
             Account Suspended
           </div>
           <div>
-            This acount has been suspended. Returned system error message: {{ reason }}.
+            This account has been suspended. Returned system error message: {{ reason }}.
           </div>
           <div class="mt-6 title font-weight-bold">
             BALANCE DUE:  ${{ totalAmountToPay.toFixed(2) }}