From 041e4ff7bc794fe4b90e50ad495c4043ae0e23e4 Mon Sep 17 00:00:00 2001
From: Odysseus Chiu <odysseus@highwaythreesolutions.com>
Date: Wed, 7 Aug 2024 09:14:42 -0700
Subject: [PATCH] 22061, 21522 - EFT shortname history (#2940)

---
 auth-web/package-lock.json                    |   4 +-
 auth-web/package.json                         |   2 +-
 .../pay/eft/ShortNameAccountLink.vue          |  52 +--
 .../pay/eft/ShortNamePaymentHistory.vue       | 420 ++++++++++++++++++
 .../pay/eft/ShortNameTransactions.vue         | 211 ---------
 auth-web/src/models/eft-transaction.ts        |   5 +
 auth-web/src/services/payment.services.ts     |  12 +-
 auth-web/src/util/constants.ts                |  19 +-
 .../views/pay/eft/ShortNameDetailsView.vue    |   7 +-
 ...pec.ts => ShortNamePaymentHistory.spec.ts} |  90 ++--
 10 files changed, 524 insertions(+), 298 deletions(-)
 create mode 100644 auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue
 delete mode 100644 auth-web/src/components/pay/eft/ShortNameTransactions.vue
 rename auth-web/tests/unit/components/{ShortNameTransactions.spec.ts => ShortNamePaymentHistory.spec.ts} (54%)

diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
index f3fcbc9e18..fb86f5c710 100644
--- a/auth-web/package-lock.json
+++ b/auth-web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "auth-web",
-  "version": "2.6.61",
+  "version": "2.6.62",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "auth-web",
-      "version": "2.6.61",
+      "version": "2.6.62",
       "dependencies": {
         "@bcrs-shared-components/base-address": "2.0.3",
         "@bcrs-shared-components/bread-crumb": "1.0.8",
diff --git a/auth-web/package.json b/auth-web/package.json
index cbc655928e..f56b4183cd 100644
--- a/auth-web/package.json
+++ b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.61",
+  "version": "2.6.62",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,
diff --git a/auth-web/src/components/pay/eft/ShortNameAccountLink.vue b/auth-web/src/components/pay/eft/ShortNameAccountLink.vue
index 1782450c9f..2490105a70 100644
--- a/auth-web/src/components/pay/eft/ShortNameAccountLink.vue
+++ b/auth-web/src/components/pay/eft/ShortNameAccountLink.vue
@@ -27,7 +27,7 @@
             depressed
             class="mr-3"
             color="primary"
-            data-test="btn-cancel-change-access-type-dialog"
+            data-test="btn-cancel-confirmation-dialog"
             @click="dialogConfirmClose"
           >
             Cancel
@@ -36,7 +36,7 @@
             large
             depressed
             class="font-weight-bold btn-dialog"
-            data-test="btn-confirm-change-access-type-dialog"
+            data-test="btn-confirm-confirmation-dialog"
             color="primary"
             @click="dialogConfirm"
           >
@@ -104,7 +104,7 @@
           >
             <td
               :colspan="headers.length"
-              class="pb-5 pl-0"
+              class="pb-5 pl-4"
             >
               <span class="expanded-item scheduled-item">
                 <v-icon>mdi-clock-outline</v-icon>
@@ -250,32 +250,32 @@ export default defineComponent({
       {
         col: 'linkedAccount',
         hasFilter: false,
-        minWidth: '200px',
+        width: '200px',
         value: 'Linked Account'
       },
       {
         col: 'accountBranch',
         hasFilter: false,
-        minWidth: '200px',
+        width: '210px',
         value: 'Branch'
       },
       {
         col: 'statementId',
         hasFilter: false,
-        minWidth: '200px',
+        width: '260px',
         value: 'Latest Statement Number'
       },
       {
         col: 'amountOwing',
         hasFilter: false,
-        minWidth: '175px',
+        width: '175px',
         value: 'Amount Owing'
       },
       {
         col: 'actions',
         hasFilter: false,
         value: 'Actions',
-        minWidth: '150px'
+        width: '150px'
       }
     ]
 
@@ -350,8 +350,11 @@ export default defineComponent({
     async function applyPayment (item) {
       state.loading = true
       try {
-        await PaymentService.postShortnamePaymentAction(props.shortNameDetails.id,
-          item.accountId, ShortNamePaymentActions.APPLY_CREDITS)
+        const params = {
+          action: ShortNamePaymentActions.APPLY_CREDITS,
+          accountId: item.accountId
+        }
+        await PaymentService.postShortnamePaymentAction(props.shortNameDetails.id, params)
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error('An errored occurred applying payments.', error)
@@ -383,8 +386,11 @@ export default defineComponent({
     async function cancelPayment (item) {
       state.loading = true
       try {
-        await PaymentService.postShortnamePaymentAction(props.shortNameDetails.id,
-          item.accountId, ShortNamePaymentActions.CANCEL)
+        const params = {
+          action: ShortNamePaymentActions.CANCEL,
+          accountId: item.accountId
+        }
+        await PaymentService.postShortnamePaymentAction(props.shortNameDetails.id, params)
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error('An errored occurred cancelling payments pending.', error)
@@ -494,26 +500,9 @@ export default defineComponent({
 }
 
 ::v-deep {
-  table {
-    box-sizing: content-box;
-    thead {
-      tr {
-        th:first-of-type {
-        }
-      }
-    }
-    tbody {
-      tr {
-        td:first-of-type {
-          padding-left: 20px !important;
-        }
-      }
-    }
+  .base-table__header__title{
+    padding: 16px
   }
-  .base-table__item-cell {
-    padding: 16px 0 16px 0
-  }
-
   .new-actions {
     .v-list {
       width:206px
@@ -535,7 +524,6 @@ export default defineComponent({
     .expanded-item {
       display: grid;
       max-width: 80%;
-      padding: 5px 0px 0px 0px;
       font-size: 16px;
       grid-template-columns: 35px 1fr;
       align-items: start;
diff --git a/auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue b/auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue
new file mode 100644
index 0000000000..63a24ac01c
--- /dev/null
+++ b/auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue
@@ -0,0 +1,420 @@
+<template>
+  <div>
+    <ModalDialog
+      ref="confirmationDialog"
+      max-width="720"
+      :show-icon="false"
+      :showCloseIcon="true"
+      dialog-class="confirmation-dialog"
+      :title="`${confirmDialogTitle}`"
+    >
+      <template #text>
+        <p class="pt-4">
+          {{ confirmDialogText }}
+        </p>
+      </template>
+      <template #actions>
+        <div class="d-flex justify-center dialog-button-container">
+          <v-btn
+            outlined
+            large
+            depressed
+            class="mr-3"
+            color="primary"
+            data-test="btn-cancel-confirmation-dialog"
+            @click="dialogConfirmClose"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            large
+            depressed
+            class="font-weight-bold btn-dialog"
+            data-test="btn-confirm-confirmation-dialog"
+            color="primary"
+            @click="dialogConfirm"
+          >
+            Confirm
+          </v-btn>
+        </div>
+      </template>
+    </ModalDialog>
+    <ModalDialog
+      ref="errorDialog"
+      max-width="720"
+      dialog-class="notify-dialog"
+      :title="errorDialogTitle"
+      :text="errorDialogText"
+    >
+      <template #icon>
+        <v-icon
+          large
+          color="error"
+        >
+          mdi-alert-circle-outline
+        </v-icon>
+      </template>
+      <template #actions>
+        <v-btn
+          large
+          color="primary"
+          data-test="dialog-ok-button"
+          @click="dialogErrorClose"
+        >
+          Close
+        </v-btn>
+      </template>
+    </ModalDialog>
+    <BaseVDataTable
+      id="eft-transactions-table"
+      class="transaction-list"
+      itemKey="id"
+      :loading="state.loading"
+      loadingText="Loading Records..."
+      noDataText="No Records."
+      :setItems="state.results"
+      :setHeaders="headers"
+      :setTableDataOptions="state.options"
+      :totalItems="state.totalResults"
+      :filters="state.filters"
+      :pageHide="true"
+      :hideFilters="true"
+      :hasTitleSlot="true"
+      :useObserver="true"
+      :observerCallback="infiniteScrollCallback"
+      :height="calculateTableHeight()"
+      @update-table-options="state.options = $event"
+    >
+      <template #header-title>
+        <h2 class="ml-4 py-6">
+          <v-icon
+            class="pr-4"
+            color="link"
+            left
+          >
+            mdi-format-list-bulleted
+          </v-icon>
+          Short Name Payment History
+        </h2>
+      </template>
+      <template #header-filter-slot />
+      <template #item-slot-transactionDate="{ item }">
+        <span>{{ formatDate(item.transactionDate, 'MMMM DD, YYYY') }}</span>
+      </template>
+      <template #item-slot-transactionDescription="{ item }">
+        <span>{{ formatDescription(item) }}</span>
+        <span
+          v-if="isStatementTransaction(item)"
+          class="transaction-details"
+        >
+          {{ formatAccountDisplayName(item) }}
+        </span>
+      </template>
+      <template #item-slot-transactionAmount="{ item }">
+        <span>{{ formatTransactionAmount(item) }}</span>
+        <span class="transaction-details">{{ formatBalanceAmount(item) }}</span>
+      </template>
+      <template #item-slot-actions="{ item, index }">
+        <div
+          :id="`action-menu-${index}`"
+          class="new-actions mx-auto"
+        >
+          <template v-if="item.isReversible">
+            <v-btn
+              small
+              color="primary"
+              min-width="5rem"
+              min-height="2rem"
+              class="open-action-btn single-action-btn"
+              data-test="reverse-payment-button"
+              :loading="loading"
+              @click="showConfirmReversePaymentModal(item)"
+            >
+              Reverse Payment
+            </v-btn>
+          </template>
+        </div>
+      </template>
+    </BaseVDataTable>
+  </div>
+</template>
+<script lang="ts">
+import { Ref, defineComponent, reactive, ref, toRefs, watch } from '@vue/composition-api'
+import {
+  ShortNameHistoryType,
+  ShortNameHistoryTypeDescription,
+  ShortNamePaymentActions,
+  ShortNameReversePaymentErrors
+} from '@/util/constants'
+import { BaseVDataTable } from '@/components'
+import CommonUtils from '@/util/common-util'
+import { DEFAULT_DATA_OPTIONS } from '../../datatable/resources'
+import { EFTTransactionState } from '@/models/eft-transaction'
+import ModalDialog from '@/components/auth/common/ModalDialog.vue'
+import PaymentService from '@/services/payment.services'
+import _ from 'lodash'
+import moment from 'moment-timezone'
+
+export default defineComponent({
+  name: 'ShortNamePaymentHistory',
+  components: { ModalDialog, BaseVDataTable },
+  props: {
+    shortNameDetails: {
+      type: Object,
+      default: () => ({
+        shortName: null
+      })
+    }
+  },
+  setup (props, { emit }) {
+    const enum ConfirmationType {
+      REVERSE_PAYMENT = 'reversePayment',
+    }
+    const confirmationDialog: Ref<InstanceType<typeof ModalDialog>> = ref(null)
+    const errorDialog: Ref<InstanceType<typeof ModalDialog>> = ref(null)
+    const headers = [
+      {
+        col: 'transactionDate',
+        hasFilter: false,
+        width: '200px',
+        value: 'Date'
+      },
+      {
+        col: 'transactionDescription',
+        hasFilter: false,
+        width: '195px',
+        value: 'Description'
+      },
+      {
+        col: 'statementNumber',
+        hasFilter: false,
+        width: '250px',
+        value: 'Related Statement Number'
+      },
+      {
+        col: 'transactionAmount',
+        hasFilter: false,
+        width: '175px',
+        value: 'Amount'
+      },
+      {
+        col: 'actions',
+        hasFilter: false,
+        value: 'Actions',
+        width: '150px'
+      }
+    ]
+
+    const state = reactive<EFTTransactionState>({
+      errorDialogTitle: '',
+      errorDialogText: '',
+      confirmDialogTitle: '',
+      confirmDialogText: '',
+      confirmObject: undefined,
+      results: [],
+      totalResults: 0,
+      filters: {
+        pageNumber: 1,
+        pageLimit: 5
+      },
+      loading: false,
+      options: _.cloneDeep(DEFAULT_DATA_OPTIONS)
+    })
+
+    watch(() => props.shortNameDetails, () => {
+      return loadTransactions(props.shortNameDetails.id, false)
+    }, { deep: true })
+
+    async function loadTransactions (shortnameId: string, appendToResults: boolean = false): Promise<void> {
+      try {
+        state.loading = true
+        const response = await PaymentService.getEFTShortnameHistory(shortnameId, state.filters)
+        if (response?.data) {
+          /* We use appendToResults for infinite scroll, so we keep the existing results. */
+          state.results = appendToResults ? state.results.concat(response.data.items) : response.data.items
+          state.totalResults = response.data.total
+        } else {
+          throw new Error('No response from getEFTTransactions')
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to getEFTTransactions list.', error)
+      }
+      state.loading = false
+    }
+
+    async function infiniteScrollCallback () {
+      if (state.totalResults < (state.filters.pageLimit * state.filters.pageNumber)) return true
+      state.filters.pageNumber++
+      await loadTransactions(props.shortNameDetails.id, true)
+      return false
+    }
+
+    function calculateTableHeight () {
+      if (state.results.length <= state.filters.pageLimit) return null
+      const height = state.results.length * 40
+      if (height > 400) return '400px'
+
+      return `${height}px`
+    }
+
+    function isStatementTransaction (item: any) {
+      return item?.statementNumber
+    }
+
+    function formatTransactionAmount (item: any) {
+      if (item.amount === undefined) return ''
+      let amount = CommonUtils.formatAmount(item.amount)
+      if (item.transactionType === ShortNameHistoryType.STATEMENT_REVERSE) {
+        amount = `-${amount}`
+      }
+      return amount
+    }
+
+    function formatBalanceAmount (item: any) {
+      if (item.shortNameBalance === undefined) return ''
+      return `Balance: ${CommonUtils.formatAmount(item.shortNameBalance)}`
+    }
+
+    function formatDescription (item: any) {
+      if (item.isProcessing) return `${ShortNameHistoryTypeDescription[item.transactionType]} (Processing)`
+      return ShortNameHistoryTypeDescription[item.transactionType]
+    }
+
+    function formatTransactionDate (str: string): string {
+      const date = moment.utc(str).toDate()
+      return (date) ? moment(date).tz('America/Vancouver').format('MMMM D, YYYY') : ''
+    }
+
+    async function reversePayment (item: any) {
+      state.loading = true
+      try {
+        const params = {
+          action: ShortNamePaymentActions.REVERSE,
+          statementId: item.statementNumber
+        }
+        await PaymentService.postShortnamePaymentAction(props.shortNameDetails.id, params)
+      } catch (error) {
+        state.loading = false
+        handleReversePaymentError(error)
+        console.error('An errored occurred reversing payment.', error)
+      }
+      emit('on-payment-action')
+    }
+
+    function handleReversePaymentError (error) {
+      state.errorDialogTitle = 'Unable to Reverse Payment'
+      switch (error.response?.data?.type) {
+        case ShortNameReversePaymentErrors.INVALID_STATE:
+          state.errorDialogText = 'Unable to reverse the payment due to an unprocessable state.'
+          break
+        case ShortNameReversePaymentErrors.UNPAID_STATEMENT:
+          state.errorDialogText = 'Unpaid statement cannot be reversed.'
+          break
+        case ShortNameReversePaymentErrors.UNPAID_STATEMENT_INVOICE:
+          state.errorDialogText = 'Unpaid statement invoice cannot be reversed.'
+          break
+        case ShortNameReversePaymentErrors.EXCEEDS_SIXTY_DAYS:
+          state.errorDialogText = 'This statement exceeds the allowable reverse period of 60 days.'
+          break
+        default:
+          state.errorDialogTitle = 'Something Went Wrong'
+          state.errorDialogText = 'An error occurred while trying to reverse a payment.'
+          break
+      }
+
+      errorDialog.value.open()
+    }
+
+    function dialogConfirm () {
+      confirmationDialog.value.close()
+      const confirmationType = state.confirmObject.type
+      if (confirmationType === ConfirmationType.REVERSE_PAYMENT) {
+        reversePayment(state.confirmObject.item)
+      }
+      resetConfirmationDialog()
+    }
+
+    function dialogConfirmClose () {
+      confirmationDialog.value.close()
+    }
+
+    function resetConfirmationDialog () {
+      state.confirmDialogTitle = ''
+      state.confirmDialogText = ''
+      state.confirmObject = undefined
+    }
+
+    function showConfirmReversePaymentModal (item) {
+      state.confirmDialogTitle = 'Reverse Payment'
+      state.confirmDialogText = 'The paid amount will be reversed to the short name, marking the transactions ' +
+          'and statement as unpaid. The System will then notify the client with a payment reminder.'
+      state.confirmObject = { item: item, type: ConfirmationType.REVERSE_PAYMENT }
+      confirmationDialog.value.open()
+    }
+
+    function dialogErrorClose () {
+      errorDialog.value.close()
+    }
+
+    return {
+      ...toRefs(state),
+      errorDialog,
+      confirmationDialog,
+      formatBalanceAmount,
+      formatTransactionAmount,
+      formatDate: formatTransactionDate,
+      formatAccountDisplayName: CommonUtils.formatAccountDisplayName,
+      formatDescription,
+      dialogConfirm,
+      dialogConfirmClose,
+      dialogErrorClose,
+      showConfirmReversePaymentModal,
+      headers,
+      state,
+      infiniteScrollCallback,
+      calculateTableHeight,
+      isStatementTransaction
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/theme.scss';
+@import '@/assets/scss/actions.scss';
+@import '@/assets/scss/ShortnameTables.scss';
+
+::v-deep{
+  #table-title-cell {
+    background-color: $app-lt-blue;
+  }
+
+  .v-data-table__wrapper {
+    overflow-y: auto;
+  }
+
+  .v-data-table__empty-wrapper {
+    background-color: transparent !important; // remove highlight on no records row
+  }
+
+  .base-table__header__title {
+    padding-bottom: 16px;
+    top: 75px !important; // prevent fixed header sliding when there is a title
+  }
+}
+
+.transaction-details {
+  display: block;
+  width: 100%;
+  font-weight: normal;
+}
+
+.dialog-button-container {
+  width: 100%;
+  .v-btn {
+    width: 106px
+  }
+}
+
+</style>
diff --git a/auth-web/src/components/pay/eft/ShortNameTransactions.vue b/auth-web/src/components/pay/eft/ShortNameTransactions.vue
deleted file mode 100644
index 309c31b6fc..0000000000
--- a/auth-web/src/components/pay/eft/ShortNameTransactions.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<template>
-  <BaseVDataTable
-    id="eft-transactions-table"
-    class="transaction-list"
-    itemKey="id"
-    :loading="state.loading"
-    loadingText="Loading Records..."
-    noDataText="No Records."
-    :setItems="state.results"
-    :setHeaders="headers"
-    :setTableDataOptions="state.options"
-    :totalItems="state.totalResults"
-    :filters="state.filters"
-    :pageHide="true"
-    :hideFilters="true"
-    :hasTitleSlot="true"
-    :useObserver="true"
-    :observerCallback="infiniteScrollCallback"
-    :height="calculateTableHeight()"
-    @update-table-options="state.options = $event"
-  >
-    <template #header-title>
-      <h2 class="ml-4 py-6">
-        <v-icon
-          class="pr-4"
-          color="link"
-          left
-        >
-          mdi-format-list-bulleted
-        </v-icon>
-        Short Name Payment History
-      </h2>
-    </template>
-    <template #header-filter-slot />
-    <template #item-slot-transactionDate="{ item }">
-      <span>{{ formatDate(item.transactionDate, 'MMMM DD, YYYY') }}</span>
-    </template>
-    <template #item-slot-transactionDescription="{ item }">
-      <span>{{ item.transactionDescription }}</span>
-      <span
-        v-if="isStatementPaid(item)"
-        class="transaction-details"
-      >
-        {{ formatAccountDisplayName(item) }}
-      </span>
-    </template>
-    <template #item-slot-transactionAmount="{ item }">
-      <span>{{ formatTransactionAmount(item) }}</span>
-      <span class="transaction-details">{{ formatBalanceAmount(item) }}</span>
-    </template>
-  </BaseVDataTable>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, watch } from '@vue/composition-api'
-import { BaseVDataTable } from '@/components'
-import CommonUtils from '@/util/common-util'
-import { DEFAULT_DATA_OPTIONS } from '../../datatable/resources'
-import { EFTTransactionState } from '@/models/eft-transaction'
-import PaymentService from '@/services/payment.services'
-import { ShortNameTransactionRowType } from '@/util/constants'
-import _ from 'lodash'
-
-export default defineComponent({
-  name: 'ShortNameTransactions',
-  components: { BaseVDataTable },
-  props: {
-    shortNameDetails: {
-      type: Object,
-      default: () => ({
-        shortName: null
-      })
-    }
-  },
-  setup (props) {
-    const headers = [
-      {
-        col: 'transactionDate',
-        hasFilter: false,
-        minWidth: '125px',
-        value: 'Date'
-      },
-      {
-        col: 'transactionDescription',
-        hasFilter: false,
-        minWidth: '200px',
-        value: 'Description'
-      },
-      {
-        col: 'statementId',
-        hasFilter: false,
-        minWidth: '175px',
-        value: 'Related Statement Number'
-      },
-      {
-        col: 'transactionAmount',
-        hasFilter: false,
-        minWidth: '355px',
-        value: 'Amount'
-      }
-    ]
-
-    const state = reactive<EFTTransactionState>({
-      results: [],
-      totalResults: 0,
-      filters: {
-        pageNumber: 1,
-        pageLimit: 5
-      },
-      loading: false,
-      options: _.cloneDeep(DEFAULT_DATA_OPTIONS)
-    })
-
-    watch(() => props.shortNameDetails, () => {
-      return loadTransactions(props.shortNameDetails.id, false)
-    }, { deep: true })
-
-    async function loadTransactions (shortnameId: string, appendToResults: boolean = false): Promise<void> {
-      try {
-        state.loading = true
-        const response = await PaymentService.getEFTTransactions(shortnameId, state.filters)
-        if (response?.data) {
-          /* We use appendToResults for infinite scroll, so we keep the existing results. */
-          state.results = appendToResults ? state.results.concat(response.data.items) : response.data.items
-          state.totalResults = response.data.total
-        } else {
-          throw new Error('No response from getEFTTransactions')
-        }
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error('Failed to getEFTTransactions list.', error)
-      }
-      state.loading = false
-    }
-
-    async function infiniteScrollCallback () {
-      if (state.totalResults < (state.filters.pageLimit * state.filters.pageNumber)) return true
-      state.filters.pageNumber++
-      await loadTransactions(props.shortNameDetails.id, true)
-      return false
-    }
-
-    function calculateTableHeight () {
-      if (state.results.length <= state.filters.pageLimit) return null
-      const height = state.results.length * 40
-      if (height > 400) return '400px'
-
-      return `${height}px`
-    }
-
-    function isStatementPaid (item: any) {
-      return item?.transactionDescription === ShortNameTransactionRowType.STATEMENT_PAID
-    }
-
-    function formatTransactionAmount (item: any) {
-      if (item.transactionAmount === undefined) return ''
-      let amount = CommonUtils.formatAmount(item.transactionAmount)
-      if (isStatementPaid(item)) {
-        amount = `-${amount}`
-      }
-      return amount
-    }
-    function formatBalanceAmount (item: any) {
-      if (item.balance === undefined) return ''
-      return `Balance: ${CommonUtils.formatAmount(item.balance)}`
-    }
-
-    return {
-      formatBalanceAmount,
-      formatTransactionAmount,
-      formatDate: CommonUtils.formatDisplayDate,
-      formatAccountDisplayName: CommonUtils.formatAccountDisplayName,
-      headers,
-      state,
-      infiniteScrollCallback,
-      calculateTableHeight,
-      isStatementPaid
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/theme.scss';
-@import '@/assets/scss/ShortnameTables.scss';
-
-::v-deep{
-  #table-title-cell {
-    background-color: $app-lt-blue;
-  }
-
-  .v-data-table__wrapper {
-    overflow-y: auto;
-  }
-
-  .v-data-table__empty-wrapper {
-    background-color: transparent !important; // remove highlight on no records row
-  }
-
-  .base-table__header__title {
-    padding-bottom: 16px;
-    top: 75px !important; // prevent fixed header sliding when there is a title
-  }
-}
-
-.transaction-details {
-  display: block;
-  width: 100%;
-  font-weight: normal;
-}
-
-</style>
diff --git a/auth-web/src/models/eft-transaction.ts b/auth-web/src/models/eft-transaction.ts
index 405ea008d0..b5d1202e6d 100644
--- a/auth-web/src/models/eft-transaction.ts
+++ b/auth-web/src/models/eft-transaction.ts
@@ -22,6 +22,11 @@ export interface EFTTransactionListResponse {
 }
 
 export interface EFTTransactionState {
+  errorDialogTitle?: string,
+  errorDialogText?: string,
+  confirmDialogTitle?: string
+  confirmDialogText?: string
+  confirmObject?: object
   filters: EFTTransactionFilterParams
   loading: boolean
   results: EFTTransaction[]
diff --git a/auth-web/src/services/payment.services.ts b/auth-web/src/services/payment.services.ts
index 0dee0a2597..667b35c763 100644
--- a/auth-web/src/services/payment.services.ts
+++ b/auth-web/src/services/payment.services.ts
@@ -284,7 +284,7 @@ export default class PaymentService {
     return axios.get(`${ConfigHelper.getPayAPIURL()}/eft-shortnames/${shortNameId}/links`)
   }
 
-  static getEFTTransactions (shortNameId: string, filterParams: EFTTransactionFilterParams): AxiosPromise<EFTTransactionListResponse> {
+  static getEFTShortnameHistory (shortNameId: string, filterParams: EFTTransactionFilterParams): AxiosPromise<EFTTransactionListResponse> {
     const params = new URLSearchParams()
     if (filterParams.pageNumber) {
       params.append('page', filterParams.pageNumber.toString())
@@ -293,7 +293,7 @@ export default class PaymentService {
       params.append('limit', filterParams.pageLimit.toString())
     }
 
-    const url = `${ConfigHelper.getPayAPIURL()}/eft-shortnames/${shortNameId}/transactions`
+    const url = `${ConfigHelper.getPayAPIURL()}/eft-shortnames/${shortNameId}/history`
     return axios.get(url, { params })
   }
 
@@ -318,12 +318,8 @@ export default class PaymentService {
     return axios.patch(url, body)
   }
 
-  static async postShortnamePaymentAction (shortNameId: string, accountId: string, action: string): AxiosPromise<void> {
+  static async postShortnamePaymentAction (shortNameId: string, bodyParams: any): AxiosPromise<void> {
     const url = `${ConfigHelper.getPayAPIURL()}/eft-shortnames/${shortNameId}/payment`
-    const body = {
-      action: action,
-      accountId: accountId
-    }
-    return axios.post(url, body)
+    return axios.post(url, bodyParams)
   }
 }
diff --git a/auth-web/src/util/constants.ts b/auth-web/src/util/constants.ts
index 508a9e41a6..487f0d3c13 100644
--- a/auth-web/src/util/constants.ts
+++ b/auth-web/src/util/constants.ts
@@ -661,6 +661,13 @@ export enum ShortNamePaymentActions {
     REVERSE = 'REVERSE'
 }
 
+export enum ShortNameReversePaymentErrors {
+    INVALID_STATE = 'EFT_PAYMENT_ACTION_CREDIT_LINK_STATUS_INVALID',
+    UNPAID_STATEMENT = 'EFT_PAYMENT_ACTION_UNPAID_STATEMENT',
+    UNPAID_STATEMENT_INVOICE = 'EFT_PAYMENT_INVOICE_REVERSE_UNEXPECTED_STATUS',
+    EXCEEDS_SIXTY_DAYS = 'EFT_PAYMENT_ACTION_REVERSAL_EXCEEDS_SIXTY_DAYS'
+}
+
 export enum ShortNameLinkStatus {
     PENDING = 'PENDING',
     LINKED = 'LINKED',
@@ -671,8 +678,16 @@ export enum ShortNameResponseStatus {
     EFT_SHORT_NAME_ALREADY_MAPPED = 'EFT_SHORT_NAME_ALREADY_MAPPED'
 }
 
-export enum ShortNameTransactionRowType {
-    STATEMENT_PAID = 'Statement Paid'
+export enum ShortNameHistoryType {
+    FUNDS_RECEIVED = 'FUNDS_RECEIVED',
+    STATEMENT_PAID = 'STATEMENT_PAID',
+    STATEMENT_REVERSE = 'STATEMENT_REVERSE'
+}
+
+export enum ShortNameHistoryTypeDescription {
+    FUNDS_RECEIVED = 'Funds Received',
+    STATEMENT_PAID = 'Statement Paid',
+    STATEMENT_REVERSE = 'Payment Reversed'
 }
 
 export enum CfsAccountStatus {
diff --git a/auth-web/src/views/pay/eft/ShortNameDetailsView.vue b/auth-web/src/views/pay/eft/ShortNameDetailsView.vue
index f1b9a473c6..716547b221 100644
--- a/auth-web/src/views/pay/eft/ShortNameDetailsView.vue
+++ b/auth-web/src/views/pay/eft/ShortNameDetailsView.vue
@@ -54,8 +54,9 @@
       @on-payment-action="onPaymentAction"
     />
 
-    <ShortNameTransactions
+    <ShortNamePaymentHistory
       :shortNameDetails="shortNameDetails"
+      @on-payment-action="onPaymentAction"
     />
   </v-container>
 </template>
@@ -65,8 +66,8 @@ import CommonUtils from '@/util/common-util'
 import PaymentService from '@/services/payment.services'
 import { Role } from '@/util/constants'
 import ShortNameAccountLink from '@/components/pay/eft/ShortNameAccountLink.vue'
+import ShortNamePaymentHistory from '@/components/pay/eft/ShortNamePaymentHistory.vue'
 import ShortNameRefund from '@/components/pay/eft/ShortNameRefund.vue'
-import ShortNameTransactions from '@/components/pay/eft/ShortNameTransactions.vue'
 import moment from 'moment'
 import { useUserStore } from '@/stores/user'
 
@@ -79,7 +80,7 @@ interface ShortNameDetails {
 
 export default defineComponent({
   name: 'ShortNameMappingView',
-  components: { ShortNameAccountLink, ShortNameTransactions, ShortNameRefund },
+  components: { ShortNameAccountLink, ShortNamePaymentHistory, ShortNameRefund },
   props: {
     shortNameId: {
       type: String as PropType<string>,
diff --git a/auth-web/tests/unit/components/ShortNameTransactions.spec.ts b/auth-web/tests/unit/components/ShortNamePaymentHistory.spec.ts
similarity index 54%
rename from auth-web/tests/unit/components/ShortNameTransactions.spec.ts
rename to auth-web/tests/unit/components/ShortNamePaymentHistory.spec.ts
index 178b53634c..c97ee5ebf5 100644
--- a/auth-web/tests/unit/components/ShortNameTransactions.spec.ts
+++ b/auth-web/tests/unit/components/ShortNamePaymentHistory.spec.ts
@@ -1,7 +1,6 @@
 import { Wrapper, createLocalVue, mount } from '@vue/test-utils'
 import { BaseVDataTable } from '@/components'
-import CommonUtils from '@/util/common-util'
-import ShortNameTransactions from '@/components/pay/eft/ShortNameTransactions.vue'
+import ShortNameTransactions from '@/components/pay/eft/ShortNamePaymentHistory.vue'
 import { VueConstructor } from 'vue'
 import Vuetify from 'vuetify'
 import { axios } from '@/util/http-util'
@@ -17,51 +16,60 @@ sessionStorage.setItem('AUTH_API_CONFIG', JSON.stringify({
 const vuetify = new Vuetify({})
 // Selectors
 const { header, headerTitles, itemRow, itemCell } = baseVdataTable
-const headers = ['Date', 'Description', 'Related Statement Number', 'Amount']
+const headers = ['Date', 'Description', 'Related Statement Number', 'Amount', 'Actions']
 
-describe('ShortNameTransactions.vue', () => {
+describe('ShortNamePaymentHistory.vue', () => {
   setupIntersectionObserverMock()
   let wrapper: Wrapper<any>
   let sandbox: any
   let localVue: VueConstructor<any>
-  let transactionsResponse: any
+  let historyResponse: any
 
   beforeEach(async () => {
     localVue = createLocalVue()
-    transactionsResponse = {
+    historyResponse = {
       items: [
         {
-          'accountBranch': 'Test Branch',
+          'accountBranch': 'Sushi Division',
           'accountId': '3202',
-          'accountName': 'ABC 123',
+          'accountName': 'Odysseus Chiu',
+          'amount': 351.5,
+          'historicalId': 5,
+          'isProcessing': true,
+          'isReversible': false,
+          'shortNameBalance': 368.5,
           'shortNameId': 2,
-          'statementId': 5374449,
-          'transactionAmount': 451.5,
-          'transactionDate': '2023-11-27T16:24:37.522500',
-          'transactionDescription': 'Statement Paid',
-          'transactionId': null
+          'statementNumber': 5374449,
+          'transactionDate': '2024-08-01T00:01:30.885474',
+          'transactionType': 'STATEMENT_REVERSE'
         },
         {
-          'accountBranch': null,
-          'accountId': null,
-          'accountName': null,
+          'accountBranch': 'Sushi Division',
+          'accountId': '3202',
+          'accountName': 'Odysseus Chiu',
+          'amount': 131.5,
+          'historicalId': 3,
+          'isProcessing': false,
+          'isReversible': false,
+          'shortNameBalance': 368.5,
           'shortNameId': 2,
-          'statementId': null,
-          'transactionAmount': 151.5,
-          'transactionDate': '2023-11-24T13:47:47',
-          'transactionDescription': 'Funds Received',
-          'transactionId': 6
+          'statementNumber': 5455966,
+          'transactionDate': '2024-07-31T22:22:31.058547',
+          'transactionType': 'STATEMENT_PAID'
         },
         {
-          'accountBranch': null,
-          'accountId': null,
-          'accountName': null,
+          'accountBranch': 'Sushi Division',
+          'accountId': '3202',
+          'accountName': 'Odysseus Chiu',
+          'amount': 351.5,
+          'historicalId': 4,
+          'isProcessing': false,
+          'isReversible': false,
+          'shortNameBalance': 17.0,
           'shortNameId': 2,
-          'statementId': null,
-          'transactionAmount': 300.0,
-          'transactionDate': '2023-11-22T13:47:47',
-          'transactionDescription': 'Funds Received',
-          'transactionId': 2
+          'statementNumber': 5374449,
+          'transactionDate': '2024-07-31T00:00:00',
+          'transactionType': 'STATEMENT_PAID'
         }
       ],
       'limit': 5,
@@ -71,7 +79,7 @@ describe('ShortNameTransactions.vue', () => {
 
     sandbox = sinon.createSandbox()
     const get = sandbox.stub(axios, 'get')
-    get.returns(new Promise(resolve => resolve({ data: transactionsResponse })))
+    get.returns(Promise.resolve({ data: historyResponse }))
 
     wrapper = mount(ShortNameTransactions, {
       propsData: {
@@ -97,7 +105,7 @@ describe('ShortNameTransactions.vue', () => {
     await wrapper.setProps({ shortNameDetails: { id: 1, shortName: 'SHORTNAME' } })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.find('#table-title-cell').text()).toContain('Payment History')
+    expect(wrapper.find('#table-title-cell').text()).toContain('Short Name Payment History')
 
     // verify table
     expect(wrapper.findComponent(BaseVDataTable).exists()).toBe(true)
@@ -113,16 +121,20 @@ describe('ShortNameTransactions.vue', () => {
     await wrapper.vm.$nextTick()
     // verify data
     const itemRows = wrapper.findComponent(BaseVDataTable).findAll(itemRow)
-    expect(itemRows.length).toBe(transactionsResponse.items.length)
-    for (let i = 0; i < transactionsResponse.items.length; i++) {
+    expect(itemRows.length).toBe(historyResponse.items.length)
+    for (let i = 0; i < historyResponse.items.length; i++) {
       const columns = itemRows.at(i).findAll(itemCell)
-      expect(columns.at(0).text()).toBe(
-        CommonUtils.formatDisplayDate(transactionsResponse.items[i].transactionDate, 'MMMM DD, YYYY'))
-      expect(columns.at(1).text()).toContain(transactionsResponse.items[i].transactionDescription)
-      expect(columns.at(2).text()).toBe(transactionsResponse.items[i].statementId
-        ? transactionsResponse.items[i].statementId.toString() : '')
+      expect(columns.at(0).text()).toBe(wrapper.vm.formatDate(historyResponse.items[i].transactionDate))
+      expect(columns.at(1).text()).toContain(wrapper.vm.formatDescription(historyResponse.items[i]))
+      expect(columns.at(2).text()).toBe(historyResponse.items[i].statementNumber
+        ? historyResponse.items[i].statementNumber.toString() : '')
       expect(columns.at(3).text()).toContain(
-        CommonUtils.formatAmount(transactionsResponse.items[i].transactionAmount))
+        wrapper.vm.formatTransactionAmount(historyResponse.items[i].amount))
+      if (historyResponse.items[i].isReversible) {
+        expect(columns.at(4).find("[data-test='reverse-payment-btn']").exists()).toBeTruthy()
+      } else {
+        expect(columns.at(4).find("[data-test='reverse-payment-btn']").exists()).toBeFalsy()
+      }
     }
   })
 })