Adding animation when linked (#2804)

auth-web/package.json

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

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

@@ -17,8 +17,6 @@
       :updateFilter="updateFilter"
       :useObserver="true"
       :observerCallback="infiniteScrollCallback"
-      :highlight-index="state.highlightIndex"
-      highlight-class="base-table__item-row-green"
       @update-table-options="tableDataOptions = $event"
     >
       <template #header-title>

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

@@ -40,6 +40,8 @@
       :updateFilter="updateFilter"
       :useObserver="true"
       :observerCallback="() => infiniteScrollCallback(true)"
+      :highlight-index="highlightIndex"
+      highlight-class="base-table__item-row-green"
       @update-table-options="options = $event"
     >
       <template #header-title>
@@ -196,7 +198,7 @@ export default defineComponent({
       snackbarText: ''
     })
     const {
-      infiniteScrollCallback, loadTableData, loadTableSummaryData, updateFilter
+      infiniteScrollCallback, loadTableSummaryData, updateFilter
     } = useShortNameTable(state, emit)
     const createHeader = (col, label, type, value, filterValue = '', hasFilter = true, minWidth = '125px') => ({
       col,
@@ -340,15 +342,20 @@ export default defineComponent({
     }
 
     async function onLinkedAccount (account: EFTShortnameResponse) {
-      if (account) {
-        await loadTableData()
-        state.snackbarText = `Bank short name ${account.shortName} was successfully linked.`
-        state.highlightIndex = state.results.findIndex((result) => result.id === account.id)
-        state.snackbar = true
-        setTimeout(() => {
-          state.highlightIndex = -1
-        }, 4000)
-      }
+      if (!account) return
+
+      const { results } = state
+      const shortName = results.find(result => result.id === account.shortNameId)
+
+      if (!shortName) return
+
+      state.snackbarText = `Bank short name ${shortName.shortName} was successfully linked.`
+      state.highlightIndex = results.indexOf(shortName)
+      state.snackbar = true
+
+      setTimeout(() => {
+        state.highlightIndex = -1
+      }, 4000)
     }
 
     watch(() => props.linkedAccount, (account: EFTShortnameResponse) => {

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

@@ -2,7 +2,7 @@
   <v-card v-if="shortNameDetails.shortName">
     <ShortNameLinkingDialog
       :isShortNameLinkingDialogOpen="isShortNameLinkingDialogOpen"
-      :selectedShortName="shortNameDetails"
+      :selectedShortName="eftShortNameSummary"
       @close-short-name-linking-dialog="closeShortNameLinkingDialog"
       @on-link-account="onLinkAccount"
     />
@@ -32,7 +32,8 @@
       >
         + Link a New Account
       </v-btn>
-      <div>
+      <!-- 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>
     </v-card-text>
@@ -54,9 +55,8 @@
 </template>
 <script lang="ts">
 
-import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
-import ConfigHelper from '@/util/config-helper'
-import { SessionStorageKeys } from '@/util/constants'
+import { computed, defineComponent, reactive, toRefs, watch } from '@vue/composition-api'
+import PaymentService from '@/services/payment.services'
 import ShortNameLinkingDialog from '@/components/pay/eft/ShortNameLinkingDialog.vue'
 
 export default defineComponent({
@@ -66,11 +66,17 @@ export default defineComponent({
     shortNameDetails: {
       type: Object,
       default: () => ({})
+    },
+    highlightIndex: {
+      type: Number,
+      default: -1
     }
   },
-  setup (props, { root }) {
+  emits: ['on-link-account'],
+  setup (props, { emit }) {
     const state = reactive({
-      isShortNameLinkingDialogOpen: false
+      isShortNameLinkingDialogOpen: false,
+      eftShortNameSummary: {}
     })
 
     const isLinked = computed<boolean>(() => {
@@ -90,18 +96,33 @@ export default defineComponent({
     }
 
     function onLinkAccount (account: any) {
-      ConfigHelper.addToSession(SessionStorageKeys.LinkedAccount, JSON.stringify(account))
-      ConfigHelper.addToSession(SessionStorageKeys.ShortNamesTabIndex, 0)
-      root.$router.push('/pay/manage-shortnames')
+      emit('on-link-account', account)
     }
 
+    async function getEFTShortNameSummaries () {
+      const filters = {
+        filterPayload: {
+          shortName: props.shortNameDetails.shortName
+        }
+      }
+      const EFTShortNameSummaries = await PaymentService.getEFTShortNameSummaries(filters)
+      if (EFTShortNameSummaries.data && EFTShortNameSummaries.data.items.length > 0) {
+        state.eftShortNameSummary = EFTShortNameSummaries.data.items[0]
+      }
+    }
+
+    watch(() => props.shortNameDetails.shortName, () => {
+      getEFTShortNameSummaries()
+    })
+
     return {
       ...toRefs(state),
       isLinked,
       accountDisplayText,
       openAccountLinkingDialog,
       closeShortNameLinkingDialog,
-      onLinkAccount
+      onLinkAccount,
+      getEFTShortNameSummaries
     }
   }
 })
@@ -121,5 +142,8 @@ export default defineComponent({
     font-size: 36px;
   }
 }
+.base-table__item-row-green {
+  background-color: $table-green !important;
+}
 
 </style>

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

@@ -254,7 +254,6 @@ export default class PaymentService {
     if (viewAll) {
       params.append('viewAll', `${viewAll}`)
     }
-
     if (filterParams.filterPayload) {
       for (const [key, value] of Object.entries(filterParams.filterPayload)) {
         if (value) {

auth-web/src/views/pay/ShortNameMappingView.vue

@@ -93,7 +93,7 @@ export default defineComponent({
     })
 
     function onLinkAccount (account: any) {
-      tab.value = 1
+      tab.value = 0
       state.linkedAccount = account
       ConfigHelper.addToSession(SessionStorageKeys.ShortNamesTabIndex, tab.value)
     }

auth-web/src/views/pay/eft/ShortNameDetailsView.vue

@@ -3,6 +3,14 @@
     id="shortname-details"
     class="view-container"
   >
+    <v-snackbar
+      id="linked-account-snackbar"
+      v-model="snackbar"
+      :timeout="4000"
+      transition="fade"
+    >
+      {{ snackbarText }}
+    </v-snackbar>
     <div class="view-header flex-column">
       <h1 class="view-header__title">
         Payment Details
@@ -12,16 +20,20 @@
       </p>
     </div>
 
-    <ShortNameTransactions
+    <ShortNameAccountLinkage
       class="mb-12"
-      :shortNameDetails="state.shortNameDetails"
+      :shortNameDetails="shortNameDetails"
+      :highlightIndex="highlightIndex"
+      @on-link-account="onLinkAccount"
     />
 
-    <ShortNameAccountLinkage :shortNameDetails="state.shortNameDetails" />
+    <ShortNameTransactions
+      :shortNameDetails="shortNameDetails"
+    />
   </v-container>
 </template>
 <script lang="ts">
-import { PropType, defineComponent, onMounted, reactive } from '@vue/composition-api'
+import { PropType, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
 import PaymentService from '@/services/payment.services'
 import ShortNameAccountLinkage from '@/components/pay/eft/ShortNameAccountLink.vue'
 import ShortNameTransactions from '@/components/pay/eft/ShortNameTransactions.vue'
@@ -37,13 +49,27 @@ export default defineComponent({
   },
   setup (props) {
     const state = reactive({
-      shortNameDetails: {}
+      shortNameDetails: {},
+      highlightIndex: -1,
+      snackbar: false,
+      snackbarText: ''
     })
 
     onMounted(async () => {
       await loadShortname(props.shortNameId)
     })
 
+    async function onLinkAccount () {
+      await loadShortname(props.shortNameId)
+      state.snackbarText = `Bank short name ${state.shortNameDetails.shortName} was successfully linked.`
+      state.highlightIndex = 1 // highlight indexOf when multi-linking is implemented
+      state.snackbar = true
+
+      setTimeout(() => {
+        state.highlightIndex = -1
+      }, 4000)
+    }
+
     async function loadShortname (shortnameId: string): Promise<void> {
       try {
         const response = await PaymentService.getEFTShortname(shortnameId)
@@ -59,7 +85,8 @@ export default defineComponent({
     }
 
     return {
-      state
+      ...toRefs(state),
+      onLinkAccount
     }
   }
 })