From 3723d7310ca9f62e3a59bf77681cda23ca4d2f8b Mon Sep 17 00:00:00 2001
From: Rodrigo Barraza <rodrigo.barraza@gov.bc.ca>
Date: Mon, 20 Jan 2025 17:11:27 -0800
Subject: [PATCH] 24576 - Updates to NSF messaging (#3207)

---
 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     | 34 +++++---
 .../auth/common/AccountSuspendAlert.vue       | 85 ++++++++-----------
 auth-web/src/models/invoice.ts                |  2 +
 auth-web/src/stores/org.ts                    |  4 +-
 auth-web/src/util/common-util.ts              | 11 ++-
 auth-web/src/views/auth/AccountSettings.vue   |  9 +-
 .../AccountFreezeUnlockView.vue               | 36 ++++----
 .../views/AccountFreezeUnlockView.spec.ts     |  5 +-
 11 files changed, 99 insertions(+), 93 deletions(-)

diff --git a/auth-web/package.json b/auth-web/package.json
index f516ebe4f..d92f2045c 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 8f2cb6a70..0df18d0db 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 6a7ab5e90..149ce9db9 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 f9685d9a3..91790933d 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: {{ reason }}.
     </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,7 +93,6 @@
 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 { useOrgStore } from '@/stores/org'
 
 export default defineComponent({
@@ -99,14 +104,15 @@ export default defineComponent({
     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,
+      reason: '',
+      suspendedDate: currentOrganization.value?.suspendedOn
+        ? CommonUtils.formatDateToHumanReadable(currentOrganization.value.suspendedOn) : ''
     })
 
     const goNext = () => {
@@ -118,13 +124,13 @@ export default defineComponent({
       state.totalAmount = failedInvoices?.totalTransactionAmount || 0
       state.nsfAmount = failedInvoices?.nsfFee || 0
       state.totalAmountRemaining = failedInvoices?.totalAmountToPay || 0
+      state.reason = failedInvoices.reason || ''
     })
 
     return {
       ...toRefs(state),
       currentOrganization,
       currentMembership,
-      suspendedDate,
       downloadNSFInvoicesPDF,
       goNext
     }
@@ -136,6 +142,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 028ccecf1..e9187020c 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 account has been suspended. Returned system error message: {{ reason }}.
           </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,49 @@
 </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,
+      reason: '',
+      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
+        state.reason = failedInvoices.reason || ''
+      }
+    })
+    return {
+      ...toRefs(state)
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/auth-web/src/models/invoice.ts b/auth-web/src/models/invoice.ts
index 677d8f90a..dfe6393dd 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 e0f2ec87d..b3ae50965 100644
--- a/auth-web/src/stores/org.ts
+++ b/auth-web/src/stores/org.ts
@@ -789,13 +789,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
     }
   }
 
diff --git a/auth-web/src/util/common-util.ts b/auth-web/src/util/common-util.ts
index 48c347770..6e331cef8 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') : ''
@@ -148,6 +150,11 @@ export default class CommonUtils {
   static formatDatePickerDate (date?: Date) {
     return moment(date || new Date()).format('YYYY-MM-DD')
   }
+
+  static formatDateToHumanReadable (date: DateLike) {
+    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 f7f90282d..b45800e81 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 e9cbebb0b..63176b7e8 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>
diff --git a/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts b/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
index cb261c006..fa23dbf8d 100644
--- a/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
+++ b/auth-web/tests/unit/views/AccountFreezeUnlockView.spec.ts
@@ -67,9 +67,8 @@ 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('p').text()).toBe('To unlock your account, please complete the following steps.')
-    expect(wrapper.find('.view-header__icon .v-icon').exists()).toBe(true)
+    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.')
   })
 
   it('Should render <Stepper>', () => {