17950 - Display a credit being applied in transactions list (#3128)

auth-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.102",
+  "version": "2.6.103",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

auth-web/src/components/auth/account-settings/transaction/Transactions.vue

@@ -178,7 +178,7 @@ export default defineComponent({
         [MembershipType.Admin, MembershipType.Coordinator].includes(currentMembership.value.membershipTypeCode)
     })
 
-    const getPaymentDetails = async () => {
+    const getCredits = async () => {
       const accountId = currentOrgPaymentDetails.value?.accountId
       if (!accountId || Number(accountId) !== currentOrganization.value?.id) {
         const paymentDetails: OrgPaymentDetails = await orgStore.getOrgPayments(currentOrganization.value?.id)
@@ -189,22 +189,14 @@ export default defineComponent({
     }
 
     const initUser = () => {
-      if (isTransactionsAllowed.value) getPaymentDetails()
+      if (isTransactionsAllowed.value) getCredits()
       else {
-        // if the account switing happening when the user is already in the transaction page,
+        // if the account switching happening when the user is already in the transaction page,
         // redirect to account info if its a basic account
         root.$router.push(`/${Pages.MAIN}/${currentOrganization.value.id}/settings/account-info`)
       }
     }
 
-    onMounted(() => {
-      setAccountChangedHandler(initUser)
-      setViewAll(props.extended)
-      clearAllFilters()
-      loadTransactionList()
-    })
-    onBeforeUnmount(() => { beforeDestroy() })
-
     const exportCSV = async () => {
       isLoading.value = true
       // grab from composable**
@@ -220,6 +212,15 @@ export default defineComponent({
       isLoading.value = false
     }
 
+    onMounted(() => {
+      initUser()
+      setAccountChangedHandler(initUser)
+      setViewAll(props.extended)
+      clearAllFilters()
+      loadTransactionList()
+    })
+    onBeforeUnmount(() => { beforeDestroy() })
+
     return {
       csvErrorDialog,
       csvErrorDialogText,

auth-web/src/components/auth/account-settings/transaction/TransactionsDataTable.vue

@@ -127,7 +127,7 @@
             align-self="center"
           >
             <IconTooltip
-              v-if="[InvoiceStatus.OVERDUE, InvoiceStatus.REFUND_REQUESTED, InvoiceStatus.REFUNDED].includes(item.statusCode)"
+              v-if="[InvoiceStatus.OVERDUE, InvoiceStatus.REFUND_REQUESTED, InvoiceStatus.REFUNDED, InvoiceStatus.CREDITED].includes(item.statusCode)"
               icon="mdi-information-outline"
               maxWidth="300px"
               :location="{top: true}"
@@ -224,16 +224,18 @@ export default defineComponent({
       return `${text}<div class="mt-1">${statusCode.value} - ${statusCode.description}</div>`
     }, '')
     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.'
+      switch (item?.statusCode) {
+        case InvoiceStatus.REFUND_REQUESTED:
+          return 'We are processing your refund request.<br/>It may take up to 7 business days to refund your total amount.'
+        case InvoiceStatus.REFUNDED:
+          return '$' + (item?.total?.toFixed(2) || '') + ' has been refunded to the account used for this transaction.'
+        case InvoiceStatus.CREDITED:
+          return '$' + (item?.total?.toFixed(2) || '') + ' has been credited to the account used for this transaction.'
+        case InvoiceStatus.OVERDUE:
+          return 'Your monthly statement is overdue.<br/>Please make your payment as soon as possible.'
+        default:
+          return ''
       }
-      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 ''
     }
 
     const tableDataOptions: Ref<DataOptions> = ref(_.cloneDeep(DEFAULT_DATA_OPTIONS) as DataOptions)

auth-web/src/composables/transactions-factory.ts

@@ -1,4 +1,4 @@
-import { LDFlags, Role } from '@/util/constants'
+import { InvoiceStatus, LDFlags, PaymentTypes, Role } from '@/util/constants'
 import { Transaction, TransactionFilterParams, TransactionState } from '@/models/transaction'
 import { computed, reactive, ref } from '@vue/composition-api'
 import LaunchDarklyService from 'sbc-common-components/src/services/launchdarkly.services'
@@ -73,6 +73,28 @@ export const useTransactions = () => {
       if (response?.data) {
         transactions.results = response.data.items || []
         transactions.totalResults = response.data.total
+
+        const transactionClone = [...transactions.results]
+        const allowedRefundedStatuses = [InvoiceStatus.PAID, InvoiceStatus.REFUNDED, InvoiceStatus.CREDITED]
+        const allowedPaymentMethods = [PaymentTypes.PAD, PaymentTypes.ONLINE_BANKING]
+        transactionClone.forEach((transaction: Transaction, i: number) => {
+          if (transaction.refundDate && transaction.refund &&
+            allowedPaymentMethods.includes(transaction.paymentMethod) &&
+            allowedRefundedStatuses.includes(transaction.statusCode)) {
+            const newTransaction = { ...transaction }
+            newTransaction.statusCode = InvoiceStatus.PAID
+            newTransaction.paymentMethod = PaymentTypes.CREDIT
+            newTransaction.total = newTransaction.refund
+            newTransaction.createdOn = newTransaction.refundDate
+            transactions.totalResults++
+            transactions.results.splice(i + 1, 0, newTransaction)
+          }
+        })
+        if (transactions.results.some((transaction: Transaction) => transaction.refundDate)) {
+          transactions.results.sort((transaction1: Transaction, transaction2: Transaction) => {
+            return new Date(transaction2.createdOn).getTime() - new Date(transaction1.createdOn).getTime()
+          })
+        }
       } else throw new Error('No response from getTransactions')
     } catch (error) {
       // eslint-disable-next-line no-console

auth-web/src/models/transaction.ts

@@ -22,6 +22,7 @@ export interface Transaction {
   statusCode: InvoiceStatus
   total: number
   updatedOn: string
+  refundDate: string
 }
 
 export interface TransactionFilter {

auth-web/src/resources/display-mappers/payment-type-display.ts

@@ -12,5 +12,5 @@ export const paymentTypeDisplay = {
   [PaymentTypes.NO_FEE]: 'No Fee',
   [PaymentTypes.ONLINE_BANKING]: 'Online Banking',
   [PaymentTypes.PAD]: 'Pre-Authorized Debit',
-  [PaymentTypes.WIRE]: 'Wire Transfer'
+  [PaymentTypes.CREDIT]: 'Account Credit'
 }

auth-web/src/services/payment.services.ts

@@ -347,7 +347,7 @@ export default class PaymentService {
     const url = `${ConfigHelper.getPayAPIURL()}/eft-shortnames/${shortNameId}/payment`
     return axios.post(url, bodyParams)
   }
-  
+
   static async isValidRedirectUrl (redirectUrl: string): AxiosPromise<boolean> {
     const body = {
       redirectUrl: redirectUrl

auth-web/src/util/constants.ts

@@ -513,7 +513,8 @@ export enum PaymentTypes {
     ONLINE_BANKING = 'ONLINE_BANKING',
     PAD = 'PAD',
     EJV = 'EJV',
-    WIRE = 'WIRE'
+    WIRE = 'WIRE',
+    CREDIT = 'CREDIT'
 }
 
 export enum paymentErrorType {