21536 - Approval/rejection review (#3079)

auth-web/package.json

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

auth-web/src/components/pay/ShortNameSummaryTable.vue

@@ -94,11 +94,11 @@
       <template #item-slot-creditsRemaining="{ item }">
         <span class="pr-2">{{ formatAmount(item.creditsRemaining) }}</span>
         <v-chip
-            v-if="item.refundStatus === ShortNameRefundStatus.PENDING_APPROVAL"
-            small
-            label
-            text-color="white"
-            class="primary pl-2 pr-2"
+          v-if="item.refundStatus === ShortNameRefundStatus.PENDING_APPROVAL"
+          small
+          label
+          text-color="white"
+          class="primary pl-2 pr-2"
         >
           {{ ShortNameRefundLabel.PENDING_APPROVAL }}
         </v-chip>

auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue

@@ -133,6 +133,7 @@
           </template>
           <template v-if="showRefundDetailAction(item)">
             <v-btn
+              v-if="isEftRefundApprover"
               small
               color="primary"
               min-width="5rem"
@@ -151,8 +152,9 @@
   </div>
 </template>
 <script lang="ts">
-import { Ref, defineComponent, nextTick, reactive, ref, toRefs, watch } from '@vue/composition-api'
+import { Ref, computed, defineComponent, nextTick, reactive, ref, toRefs, watch } from '@vue/composition-api'
 import {
+  Role,
   ShortNameHistoryType,
   ShortNameHistoryTypeDescription,
   ShortNamePaymentActions,
@@ -161,10 +163,10 @@ import {
 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 { useUserStore } from '@/stores/user'
 
 export default defineComponent({
   name: 'ShortNamePaymentHistory',
@@ -175,9 +177,14 @@ export default defineComponent({
       default: () => ({
         shortName: null
       })
+    },
+    lastRefundId: {
+      type: Number,
+      default: null
     }
   },
   setup (props, { emit, root }) {
+    const userStore = useUserStore()
     const dateDisplayFormat = 'MMMM D, YYYY'
     const enum ConfirmationType {
       REVERSE_PAYMENT = 'reversePayment',
@@ -222,7 +229,8 @@ export default defineComponent({
       }
     ]
 
-    const state = reactive<EFTTransactionState>({
+    const state = reactive({
+      isEftRefundApprover: computed(() => userStore.currentUser.roles.includes(Role.EftRefundApprover)),
       errorDialogTitle: '',
       errorDialogText: '',
       confirmDialogTitle: '',
@@ -243,6 +251,11 @@ export default defineComponent({
       return loadTransactions(props.shortNameDetails.id, false)
     }, { deep: true })
 
+    watch(() => props.lastRefundId, () => {
+      state.filters.pageNumber = 1
+      return loadTransactions(props.shortNameDetails.id, false)
+    }, { deep: true })
+
     async function loadTransactions (shortnameId: string, appendToResults: boolean = false): Promise<void> {
       try {
         state.loading = true