20417-EFT Short Name details (#2814)

* 20417 - EFT Short name details

* linting / test updates

* PR Feedback / clean up

auth-web/package.json

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

auth-web/src/assets/scss/ShortnameTables.scss

@@ -25,3 +25,23 @@
     vertical-align: middle;
   }
 }
+
+.open-action-btn {
+  height: 40px !important;
+  padding: 0 24px 0 24px !important;
+  top: -5px
+}
+
+.more-actions-btn {
+  height: 40px !important;
+  top: -5px
+}
+
+.actions-dropdown_item {
+  border-radius: 4px 4px 0px 0px !important;
+  padding: 0.5rem 1rem;
+  &:hover {
+    background-color: $gray1;
+    color: $app-blue !important;
+  }
+}

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

@@ -412,16 +412,7 @@ export default defineComponent({
 @import '@/assets/scss/actions.scss';
 @import '@/assets/scss/ShortnameTables.scss';
 
-.actions-dropdown_item {
-  padding: 0.5rem 1rem;
-  &:hover {
-    background-color: $gray1;
-    color: $app-blue !important;
-  }
-}
-
 #short-name-summaries {
   border: 1px solid #e9ecef
 }
-
 </style>

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

@@ -14,7 +14,7 @@
       >
         mdi-bank-transfer
       </v-icon>
-      Short Name and Account Linkage
+      Accounts Linked to {{ shortNameDetails.shortName }}
     </v-card-title>
 
     <v-card-text
@@ -32,17 +32,85 @@
       >
         + Link a New Account
       </v-btn>
-      <!-- move highlight index to data table when multi-linking is implemented -->
-      <div :class="{'base-table__item-row-green': highlightIndex === 1}">
-        All payments from {{ shortNameDetails.shortName }} will be applied to: <b>{{ accountDisplayText }}</b>
-      </div>
+      <BaseVDataTable
+        id="eft-account-linking-table"
+        class="eft-account-links-list pt-2"
+        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="false"
+        :highlight-index="highlightIndex"
+        highlight-class="base-table__item-row-green"
+        @update-table-options="state.options = $event"
+      >
+        <template #item-slot-linkedAccount="{ item }">
+          <span>{{ formatAccountDisplayName(item) }}</span>
+        </template>
+        <template #item-slot-amountOwing="{ item }">
+          <span>{{ formatCurrency(item.amountOwing) }}</span>
+        </template>
+        <template #item-slot-actions="{ index }">
+          <div
+            :id="`action-menu-${index}`"
+            class="new-actions mx-auto"
+          >
+            <v-btn
+              small
+              color="primary"
+              min-width="5rem"
+              min-height="2rem"
+              class="open-action-btn"
+            >
+              Cancel Payment
+            </v-btn>
+            <span class="more-actions">
+              <v-menu
+                v-model="actionDropdown[index]"
+                :attach="`#action-menu-${index}`"
+                offset-y
+                nudge-left="74"
+              >
+                <template #activator="{ on }">
+                  <v-btn
+                    small
+                    color="primary"
+                    min-height="2rem"
+                    class="more-actions-btn"
+                    v-on="on"
+                  >
+                    <v-icon>{{ actionDropdown[index] ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
+                  </v-btn>
+                </template>
+                <v-list>
+                  <v-list-item
+                    class="actions-dropdown_item"
+                    data-test="link-account-button"
+                  >
+                    <v-list-item-subtitle>
+                      <span class="pl-1 cursor-pointer">Cancel payment and remove linkage</span>
+                    </v-list-item-subtitle>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </span>
+          </div>
+        </template>
+      </BaseVDataTable>
     </v-card-text>
 
     <v-card-text
       v-else
       class="d-flex justify-space-between pa-5 unlinked-text"
     >
-      Payment from this short name is not linked with an account yet.
+      This short name is not linked with an account.
       <v-btn
         id="link-shortname-btn"
         color="primary"
@@ -56,12 +124,16 @@
 <script lang="ts">
 
 import { computed, defineComponent, reactive, toRefs, watch } from '@vue/composition-api'
+import { BaseVDataTable } from '@/components'
+import CommonUtils from '@/util/common-util'
+import { DEFAULT_DATA_OPTIONS } from '@/components/datatable/resources'
 import PaymentService from '@/services/payment.services'
 import ShortNameLinkingDialog from '@/components/pay/eft/ShortNameLinkingDialog.vue'
+import _ from 'lodash'
 
 export default defineComponent({
   name: 'ShortNameAccountLinkage',
-  components: { ShortNameLinkingDialog },
+  components: { BaseVDataTable, ShortNameLinkingDialog },
   props: {
     shortNameDetails: {
       type: Object,
@@ -74,13 +146,55 @@ export default defineComponent({
   },
   emits: ['on-link-account'],
   setup (props, { emit }) {
+    const headers = [
+      {
+        col: 'linkedAccount',
+        hasFilter: false,
+        minWidth: '200px',
+        value: 'Linked Account'
+      },
+      {
+        col: 'accountBranch',
+        hasFilter: false,
+        minWidth: '200px',
+        value: 'Branch'
+      },
+      {
+        col: 'statementId',
+        hasFilter: false,
+        minWidth: '200px',
+        value: 'Latest Statement Number'
+      },
+      {
+        col: 'amountOwing',
+        hasFilter: false,
+        minWidth: '175px',
+        value: 'Amount Owing'
+      },
+      {
+        col: 'actions',
+        hasFilter: false,
+        value: 'Actions',
+        minWidth: '150px'
+      }
+    ]
+
     const state = reactive({
+      actionDropdown: [],
       isShortNameLinkingDialogOpen: false,
-      eftShortNameSummary: {}
+      eftShortNameSummary: {},
+      results: [],
+      totalResults: 0,
+      filters: {
+        pageNumber: 1,
+        pageLimit: 5
+      },
+      loading: false,
+      options: _.cloneDeep(DEFAULT_DATA_OPTIONS)
     })
 
     const isLinked = computed<boolean>(() => {
-      return props.shortNameDetails?.accountId
+      return state.totalResults > 0 || state.loading
     })
 
     const accountDisplayText = computed<string>(() => {
@@ -96,13 +210,14 @@ export default defineComponent({
     }
 
     function onLinkAccount (account: any) {
+      loadShortNameLinks()
       emit('on-link-account', account)
     }
 
     async function getEFTShortNameSummaries () {
       const filters = {
         filterPayload: {
-          shortName: props.shortNameDetails.shortName
+          shortNameId: props.shortNameDetails.id
         }
       }
       const EFTShortNameSummaries = await PaymentService.getEFTShortNameSummaries(filters)
@@ -111,25 +226,50 @@ export default defineComponent({
       }
     }
 
-    watch(() => props.shortNameDetails.shortName, () => {
+    async function loadShortNameLinks () {
+      try {
+        state.loading = true
+        const response = await PaymentService.getEFTShortNameLinks(props.shortNameDetails.id)
+        if (response?.data) {
+          /* We use appendToResults for infinite scroll, so we keep the existing results. */
+          state.results = response.data.items
+          state.totalResults = response.data.items.length
+        } else {
+          throw new Error('No response from loadShortNameLinks')
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to loadShortNameLinks list.', error)
+      }
+      state.loading = false
+    }
+
+    watch(() => props.shortNameDetails.id, () => {
       getEFTShortNameSummaries()
+      loadShortNameLinks()
     })
 
     return {
       ...toRefs(state),
+      state,
+      headers,
       isLinked,
       accountDisplayText,
       openAccountLinkingDialog,
       closeShortNameLinkingDialog,
       onLinkAccount,
-      getEFTShortNameSummaries
+      getEFTShortNameSummaries,
+      formatCurrency: CommonUtils.formatAmount,
+      formatAccountDisplayName: CommonUtils.formatAccountDisplayName
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
 @import '@/assets/scss/theme.scss';
+@import '@/assets/scss/actions.scss';
+@import '@/assets/scss/ShortnameTables.scss';
 
 .card-title {
   background-color: $app-lt-blue;
@@ -142,8 +282,15 @@ export default defineComponent({
     font-size: 36px;
   }
 }
+
 .base-table__item-row-green {
   background-color: $table-green !important;
 }
 
+::v-deep {
+  .base-table__item-cell {
+    padding: 16px 0 16px 0
+  }
+}
+
 </style>

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

@@ -183,7 +183,7 @@ export default defineComponent({
       } catch (error) {
         if (error.response.data.type === ShortNameResponseStatus.EFT_SHORT_NAME_ALREADY_MAPPED) {
           state.accountLinkingErrorDialogTitle = 'Account Already Linked'
-          state.accountLinkingErrorDialogText = 'The selected bank short name is already linked to an account.'
+          state.accountLinkingErrorDialogText = 'The selected account is already linked to a bank short name.'
           cancelAndResetAccountLinkingDialog()
           accountLinkingErrorDialog.value.open()
         } else {