20138 - Suspended EFT Account Views (#2827)

* Suspended EFT Account Views * Test changes * Fixes and composition-api * package * Test fixes * Text update, replacing new date with moment, test fix * Sanitization, cleanup
bcgov · May 28, 2024 · 281ff67 · 281ff67
1 parent add8d57
commit 281ff67
Show file tree

Hide file tree

Showing 18 changed files with 985 additions and 69 deletions.
diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
diff --git a/auth-web/package.json b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.16",
+  "version": "2.6.17",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,
@@ -33,6 +33,7 @@
     "moment": "^2.29.4",
     "pinia": "^2.1.6",
     "pinia-class": "^0.0.3",
+    "sanitize-html": "^2.13.0",
     "sbc-common-components": "3.0.12",
     "vue": "2.6.14",
     "vue-debounce-decorator": "^1.0.1",
@@ -55,6 +56,7 @@
     "@pinia/testing": "^0.1.3",
     "@types/lodash": "^4.14.202",
     "@types/mime-types": "^2.1.0",
+    "@types/sanitize-html": "^2.11.0",
     "@types/vuelidate": "^0.7.13",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",

diff --git a/auth-web/src/components/auth/account-freeze/AccountOverview.vue b/auth-web/src/components/auth/account-freeze/AccountOverview.vue
@@ -1,7 +1,14 @@
 <template>
   <div>
-    <p class="mb-10">
-      This account has been suspended for a failed payment.
+    <p class="mb-10 red--text">
+      <v-icon
+        color="red"
+        class="pr-1"
+        small
+      >
+        mdi-alert
+      </v-icon>
+      You have overdue payments for your account. Please settle outstanding payments to reactivate your account.
     </p>
 
     <v-card
@@ -21,21 +28,17 @@
         <v-divider class="my-2" />
         <v-row>
           <v-col cols="9">
-            <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
-            </div>
-          </v-col>
-          <v-col class="text-end">
-            ${{ nsfAmount.toFixed(2) }}
+            <div>Overdue statements</div>
           </v-col>
         </v-row>
-        <v-row>
-          <v-col cols="9">
-            Total Transactions
-          </v-col>
-          <v-col class="text-end">
-            ${{ totalAmount.toFixed(2) }}
+        <v-row
+          v-for="invoice in invoices"
+          :key="invoice.id"
+        >
+          <v-col class="pt-0">
+            <div class="link">
+              {{ formatDateRange(invoice.fromDate, invoice.toDate) }}
+            </div>
           </v-col>
         </v-row>
         <v-divider class="my-2" />
@@ -44,7 +47,7 @@
             Total Amount Due
           </v-col>
           <v-col class="text-end">
-            ${{ totalAmountRemaining.toFixed(2) }}
+            ${{ totalAmountDue.toFixed(2) }}
           </v-col>
         </v-row>
       </v-card-text>
@@ -56,17 +59,6 @@
         cols="12"
         class="mt-5 pb-0 d-inline-flex"
       >
-        <v-btn
-          large
-          text
-          color="primary"
-          @click="downloadNSFInvoicesPDF"
-        >
-          <v-icon class="ml-n2">
-            mdi-download
-          </v-icon>
-          <span>Download Transaction Invoice (PDF)</span>
-        </v-btn>
         <v-spacer />
         <v-btn
           large
@@ -86,37 +78,35 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
 import CommonUtils from '@/util/common-util'
-import { FailedInvoice } from '@/models/invoice'
+import { FailedEFTInvoice } from '@/models/invoice'
 import { useOrgStore } from '@/stores/org'
 
 export default defineComponent({
-  name: 'AccountOverviewView',
+  name: 'AccountOverviewNSFView',
   emits: ['step-forward'],
   setup (_, { emit }) {
     const orgStore = useOrgStore()
     const currentOrganization = computed(() => orgStore.currentOrganization)
     const currentMembership = computed(() => orgStore.currentMembership)
-    const calculateFailedInvoices: any = orgStore.calculateFailedInvoices
+    const calculateFailedInvoices: any = orgStore.calculateFailedEFTInvoices
     const downloadNSFInvoicesPDF: any = orgStore.downloadNSFInvoicesPDF
     const formatDate = CommonUtils.formatDisplayDate
+    const formatDateRange = CommonUtils.formatDateRange
     const suspendedDate = (currentOrganization.value?.suspendedOn) ? formatDate(new Date(currentOrganization.value.suspendedOn)) : ''
 
     const state = reactive({
-      nsfAmount: 0,
-      totalAmount: 0,
-      totalAmountRemaining: 0,
-      totalPaidAmount: 0
+      invoices: [],
+      totalAmountDue: 0
     })
 
     const goNext = () => {
       emit('step-forward')
     }
 
     onMounted(async () => {
-      const failedInvoices: FailedInvoice = await calculateFailedInvoices()
-      state.totalAmount = failedInvoices?.totalTransactionAmount || 0
-      state.nsfAmount = failedInvoices?.nsfFee || 0
-      state.totalAmountRemaining = failedInvoices?.totalAmountToPay || 0
+      const failedInvoices: FailedEFTInvoice = await calculateFailedInvoices()
+      state.invoices = failedInvoices?.invoices || []
+      state.totalAmountDue = failedInvoices?.totalAmountDue || 0
     })
 
     return {
@@ -125,7 +115,8 @@ export default defineComponent({
       currentMembership,
       suspendedDate,
       downloadNSFInvoicesPDF,
-      goNext
+      goNext,
+      formatDateRange
     }
   }
 })
@@ -135,6 +126,12 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "$assets/scss/theme.scss";
 
+.link {
+  color: var(--v-primary-base) !important;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 .suspended-info-card {
   border-color: $BCgovInputError !important;
   border-width: 2px !important;