17327 & 17856 - Add in overdue to the transactions table & fix status…

… for Online Banking (#2578) * Add in overdue to the transactions table. * minor cleanup * Fix missing description. * UX fixes * small ux tweaks
bcgov · Sep 29, 2023 · 1db921a · 1db921a
1 parent 8c247f5
commit 1db921a
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 9 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.4.29",
+  "version": "2.4.30",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

diff --git a/auth-web/src/components/auth/account-settings/transaction/TransactionsDataTable.vue b/auth-web/src/components/auth/account-settings/transaction/TransactionsDataTable.vue
@@ -108,6 +108,13 @@
             >
               mdi-check
             </v-icon>
+            <v-icon
+              v-if="InvoiceStatus.OVERDUE === item.statusCode"
+              color="error"
+              :style="{ 'margin-right': '2px' }"
+            >
+              mdi-alert
+            </v-icon>
             <b>{{ invoiceStatusDisplay[item.statusCode] }}</b>
             <br>
             <span
@@ -116,15 +123,16 @@
             />
           </v-col>
           <v-col
-            class="pl-2"
+            class="pl-1"
             align-self="center"
           >
             <icon-tooltip
-              v-if="[InvoiceStatus.REFUND_REQUESTED, InvoiceStatus.REFUNDED].includes(item.statusCode)"
+              v-if="[InvoiceStatus.OVERDUE, InvoiceStatus.REFUND_REQUESTED, InvoiceStatus.REFUNDED].includes(item.statusCode)"
               icon="mdi-information-outline"
               maxWidth="300px"
+              :location="{top: true}"
             >
-              <div v-html="getRefundHelpText(item)" />
+              <div v-sanitize="getHelpText(item)" />
             </icon-tooltip>
           </v-col>
         </v-row>
@@ -196,6 +204,7 @@ export default defineComponent({
     const statusCodeDescs = [
       { description: 'Transaction is cancelled', value: invoiceStatusDisplay[InvoiceStatus.CANCELLED].toUpperCase() },
       { description: 'Funds received', value: invoiceStatusDisplay[InvoiceStatus.PAID].toUpperCase() },
+      { description: 'Transaction created', value: invoiceStatusDisplay[InvoiceStatus.CREATED].toUpperCase() },
       { description: 'Funds have been credited', value: invoiceStatusDisplay[InvoiceStatus.CREDITED].toUpperCase() },
       { description: 'Transaction is waiting to be processed', value: invoiceStatusDisplay[InvoiceStatus.PENDING].toUpperCase() },
       { description: 'Transaction is in progress', value: invoiceStatusDisplay[InvoiceStatus.APPROVED].toUpperCase() },
@@ -205,13 +214,16 @@ export default defineComponent({
     const getStatusCodeHelpText = () => statusCodeDescs.reduce((text, statusCode) => {
       return `${text}<div class="mt-1">${statusCode.value} - ${statusCode.description}</div>`
     }, '')
-    const getRefundHelpText = (item: Transaction) => {
+    const getHelpText = (item: Transaction) => {
       if (item?.statusCode === InvoiceStatus.REFUND_REQUESTED) {
         return 'We are processing your refund request.<br/>It may take up to 7 business days to refund your total amount.'
       }
       if (item?.statusCode === InvoiceStatus.REFUNDED) {
         return '$' + (item?.total?.toFixed(2) || '') + ' has been refunded to the account used for this transaction.'
       }
+      if (item?.statusCode === InvoiceStatus.OVERDUE) {
+        return 'Your monthly statement is overdue.<br/>Please make your payment as soon as possible.'
+      }
       return ''
     }
 
@@ -245,7 +257,7 @@ export default defineComponent({
       invoiceStatusDisplay,
       showDatePicker,
       statusCodeDescs,
-      getRefundHelpText,
+      getHelpText,
       getStatusCodeHelpText,
       tableDataOptions,
       transactions,

diff --git a/auth-web/src/resources/display-mappers/invoice-status-display.ts b/auth-web/src/resources/display-mappers/invoice-status-display.ts
@@ -8,6 +8,7 @@ export const invoiceStatusDisplay = {
   [InvoiceStatus.CREDITED]: 'Credited',
   [InvoiceStatus.DELETED]: 'Deleted',
   [InvoiceStatus.DELETE_ACCEPTED]: 'Deleted',
+  [InvoiceStatus.OVERDUE]: 'Overdue',
   [InvoiceStatus.PAID]: 'Completed',
   [InvoiceStatus.PARTIAL]: 'Partial Paid',
   [InvoiceStatus.PENDING]: 'Pending',

diff --git a/auth-web/src/resources/table-headers/transactions-table/headers.ts b/auth-web/src/resources/table-headers/transactions-table/headers.ts
@@ -204,7 +204,14 @@ export const TransactionTableHeaders: BaseTableHeaderI[] = [
       type: 'select',
       value: ''
     },
-    itemFn: (val: Transaction) => invoiceStatusDisplay[val.statusCode],
+    itemFn: (val: Transaction) => {
+      // Special case for Online Banking - it shouldn't show NSF, should show Pending.
+      if (val.paymentMethod === PaymentTypes.ONLINE_BANKING &&
+          val.statusCode === InvoiceStatus.SETTLEMENT_SCHEDULED) {
+        return invoiceStatusDisplay[InvoiceStatus.PENDING]
+      }
+      return invoiceStatusDisplay[val.statusCode]
+    },
     hasFilter: true,
     minWidth: '195px',
     value: 'Payment Status'

diff --git a/auth-web/src/util/constants.ts b/auth-web/src/util/constants.ts
@@ -134,6 +134,7 @@ export enum InvoiceStatus {
     COMPLETED = 'COMPLETED', // NOTE: this === PAID value (api alters it from PAID to COMPLETED in postdump)
     DELETE_ACCEPTED = 'DELETE_ACCEPTED',
     DELETED = 'DELETED',
+    OVERDUE = 'OVERDUE',
     PAID = 'PAID',
     PARTIAL = 'PARTIAL_PAID',
     PENDING = 'PENDING',