21570 - Display CAS supplier number and email address for a short name (

#3014)
bcgov · Sep 17, 2024 · 6855847 · 6855847
1 parent 9078259
commit 6855847
Show file tree

Hide file tree

Showing 6 changed files with 339 additions and 36 deletions.
diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
diff --git a/auth-web/package.json b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.89",
+  "version": "2.6.90",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

diff --git a/auth-web/src/components/pay/eft/ShortNameFinancialDialog.vue b/auth-web/src/components/pay/eft/ShortNameFinancialDialog.vue
@@ -0,0 +1,196 @@
+<template>
+  <div
+    id="short-name-financial-dialog"
+  >
+    <ModalDialog
+      ref="modalDialog"
+      max-width="720"
+      :show-icon="false"
+      :showCloseIcon="true"
+      dialog-class="lookup-dialog"
+      :title="dialogTitle()"
+      @close-dialog="resetAccountLinkingDialog"
+    >
+      <template #text>
+        <p v-if="isDialogTypeEmail">
+          Enter the contact email provided in the client's Direct Deposit Application form
+        </p>
+        <p v-if="isDialogTypeCasSupplierNumber">
+          Enter the supplier number created in CAS for this short name
+        </p>
+        <v-text-field
+          v-if="isDialogTypeEmail"
+          v-model="email"
+          filled
+          label="Email Address"
+          persistent-hint
+        />
+        <v-text-field
+          v-if="isDialogTypeCasSupplierNumber"
+          v-model="casSupplierNumber"
+          filled
+          label="CAS Supplier Number"
+          persistent-hint
+        />
+      </template>
+      <template #actions>
+        <div class="d-flex align-center justify-center w-100 h-100 ga-3">
+          <v-btn
+            large
+            outlined
+            color="outlined"
+            data-test="dialog-ok-button"
+            @click="cancelAndResetAccountLinkingDialog()"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            large
+            color="primary"
+            data-test="dialog-ok-button"
+            @click="patchShortName()"
+          >
+            Save
+          </v-btn>
+        </div>
+      </template>
+    </ModalDialog>
+  </div>
+</template>
+<script lang="ts">
+import { Ref, computed, defineComponent, reactive, ref, toRefs, watch } from '@vue/composition-api'
+import { EFTShortnameResponse } from '@/models/eft-transaction'
+import ModalDialog from '@/components/auth/common/ModalDialog.vue'
+import PaymentService from '@/services/payment.services'
+
+export default defineComponent({
+  name: 'ShortNameFinancialDialog',
+  components: { ModalDialog },
+  props: {
+    isShortNameFinancialDialogOpen: {
+      type: Boolean,
+      default: false
+    },
+    shortName: {
+      default: {}
+    },
+    shortNameFinancialDialogType: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['on-patch', 'close-short-name-email-dialog'],
+  setup (props, { emit }) {
+    const modalDialog: Ref<InstanceType<typeof ModalDialog>> = ref(null)
+    const accountLinkingErrorDialog: Ref<InstanceType<typeof ModalDialog>> = ref(null)
+    const state = reactive<any>({
+      email: '',
+      casSupplierNumber: '',
+      isDialogTypeEmail: computed(() => props.shortNameFinancialDialogType === 'EMAIL'),
+      isDialogTypeCasSupplierNumber: computed(() => props.shortNameFinancialDialogType === 'CAS_SUPPLIER_NUMBER')
+    })
+
+    function openAccountLinkingDialog (item: EFTShortnameResponse, dialogType) {
+      state.shortName = item
+      if (dialogType === 'EMAIL') {
+        state.email = state.shortName.email
+      } else if (dialogType === 'CAS_SUPPLIER_NUMBER') {
+        state.casSupplierNumber = state.shortName.casSupplierNumber
+      }
+      modalDialog.value.open()
+    }
+
+    function dialogTitle () {
+      if (state.isDialogTypeEmail) {
+        return 'Email'
+      } else if (state.isDialogTypeCasSupplierNumber) {
+        return 'CAS Supplier Number'
+      }
+    }
+
+    function resetAccountLinkingDialog () {
+      state.email = ''
+      state.casSupplierNumber = ''
+      emit('close-short-name-email-dialog')
+    }
+
+    function cancelAndResetAccountLinkingDialog () {
+      modalDialog.value.close()
+      resetAccountLinkingDialog()
+    }
+
+    async function patchShortName () {
+      if (state.isDialogTypeEmail) {
+        await PaymentService.patchEFTShortName(state.shortName.id, { email: state.email })
+      } else if (state.isDialogTypeCasSupplierNumber) {
+        await PaymentService.patchEFTShortName(state.shortName.id, { casSupplierNumber: state.casSupplierNumber })
+      }
+      emit('on-patch')
+      cancelAndResetAccountLinkingDialog()
+    }
+
+    watch(() => props.isShortNameFinancialDialogOpen, (shortNameNewValue) => {
+      if (shortNameNewValue && props.shortName) {
+        openAccountLinkingDialog(props.shortName, props.shortNameFinancialDialogType)
+      }
+    })
+
+    return {
+      ...toRefs(state),
+      modalDialog,
+      accountLinkingErrorDialog,
+      openAccountLinkingDialog,
+      resetAccountLinkingDialog,
+      cancelAndResetAccountLinkingDialog,
+      patchShortName,
+      dialogTitle
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/theme.scss';
+@import '@/assets/scss/actions.scss';
+@import '@/assets/scss/ShortnameTables.scss';
+
+.actions-dropdown_item {
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  &:hover {
+    background-color: $gray1;
+    color: $app-blue !important;
+  }
+}
+
+h4 {
+  color: black;
+}
+
+.important {
+  background-color: #fff7e3;
+  border: 2px solid #fcba19;
+  color: #495057;
+  font-size: 14px;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.ga-3 {
+  gap: 12px;
+}
+
+::v-deep {
+  .v-btn.v-btn--outlined {
+      border-color: var(--v-primary-base);
+      color: var(--v-primary-base);
+  }
+}
+
+</style>
diff --git a/auth-web/src/components/pay/eft/ShortNameLinkingDialog.vue b/auth-web/src/components/pay/eft/ShortNameLinkingDialog.vue
@@ -96,7 +96,7 @@
   </div>
 </template>
 <script lang="ts">
-import { Ref, defineComponent, onMounted, reactive, ref, toRefs, watch } from '@vue/composition-api'
+import { Ref, defineComponent, reactive, ref, toRefs, watch } from '@vue/composition-api'
 import CommonUtils from '@/util/common-util'
 import { EFTShortnameResponse } from '@/models/eft-transaction'
 import ModalDialog from '@/components/auth/common/ModalDialog.vue'
@@ -201,9 +201,6 @@ export default defineComponent({
       state.statementId = data.items[0].id
     }
 
-    onMounted(async () => {
-    })
-
     watch(() => [state.selectedAccount], ([selectedAccount]) => {
       if (selectedAccount?.accountId) {
         getStatementsList(selectedAccount.accountId)

diff --git a/auth-web/src/services/payment.services.ts b/auth-web/src/services/payment.services.ts
@@ -249,6 +249,14 @@ export default class PaymentService {
     return axios.get(`${ConfigHelper.getPayAPIURL()}/eft-shortnames?${params.toString()}`)
   }
 
+  static getEFTShortName (shortNameId: string): AxiosPromise<EFTShortnameResponse> {
+    return axios.get(`${ConfigHelper.getPayAPIURL()}/eft-shortnames/${shortNameId}`)
+  }
+
+  static patchEFTShortName (shortNameId: string, body: any): AxiosPromise<EFTShortnameResponse> {
+    return axios.patch(`${ConfigHelper.getPayAPIURL()}/eft-shortnames/${shortNameId}`, body)
+  }
+
   static getEFTShortNameSummaries (filterParams: ShortNameSummaryFilterParams, viewAll = false): AxiosPromise<any> {
     const params = new URLSearchParams()
     if (filterParams.pageNumber) {