21535 - Short Name Details - Choose amount for refund (#2904)

auth-web/package.json

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

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

@@ -0,0 +1,152 @@
+<template>
+  <v-card>
+    <v-card-title class="card-title">
+      <v-icon
+        class="pr-5"
+        color="link"
+        left
+      >
+        mdi-file-document
+      </v-icon>
+      Short Name Refund
+    </v-card-title>
+    <v-card-text class="d-flex justify-space-between align-center card-content mt-4">
+      <span>No refund initiated. SBC Finance can initiate refund if a CAS supplier number is created for the short name.</span>
+      <v-btn
+        class="mt-0 font-weight-regular"
+        color="primary"
+        outlined
+        dark
+        large
+        :unsettledAmount="unsettledAmount"
+        :shortNameDetails="shortNameDetails"
+        @click="initiateRefund"
+      >
+        Initiate Refund
+      </v-btn>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
+import CommonUtils from '@/util/common-util'
+import { DEFAULT_DATA_OPTIONS } from '@/components/datatable/resources'
+import _ from 'lodash'
+
+export default defineComponent({
+  name: 'ShortNameRefund',
+  props: {
+    shortNameDetails: {
+      type: Object,
+      default: () => ({})
+    },
+    unsettledAmount: {
+      type: String,
+      default: ''
+    }
+  },
+  setup (props, { root }) {
+    const state = reactive({
+      actionDropdown: [],
+      isShortNameLinkingDialogOpen: false,
+      eftShortNameSummary: {},
+      results: [],
+      totalResults: 0,
+      filters: {
+        pageNumber: 1,
+        pageLimit: 5
+      },
+      loading: false,
+      options: _.cloneDeep(DEFAULT_DATA_OPTIONS),
+      expanded: []
+    })
+
+    const isLinked = computed<boolean>(() => {
+      return state.totalResults > 0 || state.loading
+    })
+
+    function initiateRefund () {
+      root.$router?.push({
+        name: 'shortnamerefund',
+        query: {
+          shortNameDetails: JSON.stringify(props.shortNameDetails),
+          unsettledAmount: props.unsettledAmount
+        }
+      })
+    }
+
+    return {
+      ...toRefs(state),
+      state,
+      isLinked,
+      initiateRefund,
+      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;
+  justify-content: left;
+  height: 75px;
+  font-weight: bold;
+  font-size: 1.125rem;
+
+  .v-icon {
+    font-size: 36px;
+  }
+}
+
+.base-table__item-row-green {
+  background-color: $table-green !important;
+}
+
+::v-deep {
+  .base-table__item-cell {
+    padding: 16px 0 16px 0
+  }
+
+  // Remove border for rows that are expanded with additional information
+  tr:has(+ tr.expanded-item-row) td {
+    border-bottom: none !important;
+  }
+}
+
+.unlink-action-btn {
+  border-radius: 4px !important;
+}
+
+.expanded-item-row {
+  td {
+    .expanded-item {
+      display: grid;
+      max-width: 80%;
+      padding: 5px 0px 0px 0px;
+      font-size: 16px;
+      grid-template-columns: 35px 1fr;
+      align-items: start;
+
+      .v-icon {
+        justify-content: left;
+        grid-column: 1;
+        padding-right: 4px !important;
+        margin-right: 0px !important;
+      }
+    }
+
+    .alert-item {
+      .v-icon {
+        color: $app-alert-orange;
+      }
+    }
+  }
+}
+</style>

auth-web/src/models/refund.ts

@@ -8,3 +8,12 @@ export interface RefundRevenueType {
   refundAmount: number
   refundType: string
 }
+
+export interface EftRefundRequest {
+  shortNameId: number
+  refundAmount: number
+  casSupplierNum: string
+  refundEmail: string
+  comment?: string
+  shortName?: string
+}

auth-web/src/resources/BreadcrumbResources.ts

@@ -39,6 +39,11 @@ export const ShortNameDetailsBreadcrumb: BreadcrumbIF = {
   to: { name: 'shortnamedetails' }
 }
 
+export const ShortNameRefundBreadcrumb: BreadcrumbIF = {
+  text: 'Refund Information',
+  to: { name: 'shortnamerefund' }
+}
+
 export const CreatAccountBreadcrumb: BreadcrumbIF = {
   text: 'Create Account',
   to: { name: 'chooseauthmethodview' }

auth-web/src/routes/router.ts

@@ -4,6 +4,7 @@ import {
   MyBusinessRegistryBreadcrumb,
   RegistryDashboardBreadcrumb,
   RegistryHomeBreadcrumb, ShortNameDetailsBreadcrumb, ShortNameMappingBreadcrumb,
+  ShortNameRefundBreadcrumb,
   StaffBusinessRegistryBreadcrumb,
   StaffDashboardBreadcrumb
 } from '@/resources/BreadcrumbResources'
@@ -71,6 +72,7 @@ import SetupAccountView from '@/views/auth/staff/SetupAccountView.vue'
 import SetupGovmAccountView from '@/views/auth/staff/SetupGovmAccountView.vue'
 import ShortNameDetailsView from '@/views/pay/eft/ShortNameDetailsView.vue'
 import ShortNameMappingView from '@/views/pay/ShortNameMappingView.vue'
+import ShortNameRefundView from '@/views/pay/eft/ShortNameRefundView.vue'
 import SigninView from '@/views/auth/SigninView.vue'
 import SignoutView from '@/views/auth/SignoutView.vue'
 import StaffActiveAccountsTable from '@/components/auth/staff/account-management/StaffActiveAccountsTable.vue'
@@ -887,6 +889,26 @@ export function getRoutes (): RouteConfig[] {
       },
       props: (route) => ({ shortNameId: route.params.shortNameId })
     },
+    {
+      path: '/pay/shortname-details/:shortNameId/refund',
+      name: 'shortnamerefund',
+      component: ShortNameRefundView,
+      meta: {
+        requiresAuth: true,
+        allowedRoles: [Role.EftRefund],
+        breadcrumb: [
+          StaffDashboardBreadcrumb,
+          ShortNameMappingBreadcrumb,
+          ShortNameDetailsBreadcrumb,
+          ShortNameRefundBreadcrumb
+        ],
+        showNavBar: true
+      },
+      props: route => ({
+        shortNameDetails: JSON.parse(route.query.shortNameDetails || '{}'),
+        unsettledAmount: route.query.unsettledAmount || ''
+      })
+    },
     {
       path: '/pay/refund',
       name: 'refund',

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

@@ -1,4 +1,5 @@
 import { EFTShortnameResponse, EFTTransactionFilterParams, EFTTransactionListResponse } from '@/models/eft-transaction'
+import { EftRefundRequest, RefundRequest } from '@/models/refund'
 import { FilingTypeResponse, GLCode, GLCodeResponse } from '@/models/Staff'
 import { Invoice, InvoiceListResponse } from '@/models/invoice'
 import { LinkedShortNameFilterParams, ShortNameSummaryFilterParams } from '@/models/pay/short-name'
@@ -16,7 +17,6 @@ import { AxiosPromise } from 'axios'
 import ConfigHelper from '@/util/config-helper'
 import { Payment } from '@/models/Payment'
 import { PaymentTypes } from '@/util/constants'
-import { RefundRequest } from '@/models/refund'
 import { axios } from '@/util/http-util'
 
 export default class PaymentService {
@@ -51,6 +51,11 @@ export default class PaymentService {
     return axios.post(url, refundPayload)
   }
 
+  static refundEFT (refundPayload: EftRefundRequest): AxiosPromise<any> {
+    const url = `${ConfigHelper.getPayAPIURL()}/eft-shortnames/shortname_refund`
+    return axios.post(url, refundPayload)
+  }
+
   static downloadOBInvoice (paymentId: string): AxiosPromise<any> {
     const url = `${ConfigHelper.getPayAPIURL()}/payment-requests/${paymentId}/reports`
     const headers = {

auth-web/src/stores/org.ts

@@ -37,6 +37,7 @@ import {
 import { BcolAccountDetails, BcolProfile } from '@/models/bcol'
 import { CreateRequestBody as CreateInvitationRequestBody, Invitation } from '@/models/Invitation'
 import { EFTInvoiceListResponse, FailedEFTInvoice, FailedInvoice, NonSufficientFundsInvoiceListResponse } from '@/models/invoice'
+import { EftRefundRequest, RefundRequest } from './../models/refund'
 import { Products, ProductsRequestBody } from '@/models/Staff'
 import { StatementFilterParams, StatementNotificationSettings, StatementSettings, StatementsSummary } from '@/models/statement'
 import { computed, reactive, toRefs } from '@vue/composition-api'
@@ -53,7 +54,6 @@ import KeyCloakService from 'sbc-common-components/src/services/keycloak.service
 import OrgService from '@/services/org.services'
 import PaymentService from '@/services/payment.services'
 import PermissionService from '@/services/permission.services'
-import { RefundRequest } from './../models/refund'
 import StaffService from '@/services/staff.services'
 import UserService from '@/services/user.services'
 import { UserSettings } from 'sbc-common-components/src/models/userSettings'
@@ -856,6 +856,11 @@ export const useOrgStore = defineStore('org', () => {
     return response?.data || {}
   }
 
+  async function refundEFT (refundPayload: EftRefundRequest) {
+    const response = await PaymentService.refundEFT(refundPayload)
+    return response?.data || {}
+  }
+
   async function updateInvoicePaymentMethodAsCreditCard (invoicePayload) {
     const response = await PaymentService.updateInvoicePaymentMethodAsCreditCard(invoicePayload.paymentId, invoicePayload.accountId)
     return response?.data || {}
@@ -1157,6 +1162,7 @@ export const useOrgStore = defineStore('org', () => {
     addToCurrentSelectedProducts,
     resetoCurrentSelectedProducts,
     refundInvoice,
+    refundEFT,
     setSubscribedProducts,
     currentSelectedProductsPremiumOnly,
     fetchCurrentOrganizationGLInfo,

auth-web/src/util/constants.ts

@@ -54,6 +54,7 @@ export enum Role {
     FasSearch = 'fas_search',
     ViewAllTransactions = 'view_all_transactions',
     ManageEft = 'manage_eft',
+    EftRefund = 'eft_refund',
     CreateCredits = 'create_credits',
     FasRefund = 'fas_refund',
     BcolStaffAdmin = 'bcol_staff_admin'