23072 - EFT - Consolidated invoices / unlock - frontend changes (#3005)

auth-web/package.json

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

auth-web/src/components/auth/account-freeze/AccountOverview.vue

@@ -15,6 +15,7 @@
       outlined
       flat
       class="suspended-info-card mb-12"
+      :loading="loading"
     >
       <v-card-text class="py-2 px-6">
         <v-row>
@@ -36,9 +37,12 @@
           :key="statement.id"
         >
           <v-col class="pt-0">
-            <div class="link">
+            <a
+              class="text-decoration-underline"
+              @click="downloadStatement(statement)"
+            >
               {{ formatDateRange(statement.fromDate, statement.toDate) }}
-            </div>
+            </a>
           </v-col>
         </v-row>
         <v-divider class="my-2" />
@@ -79,6 +83,7 @@
 import { computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
 import CommonUtils from '@/util/common-util'
 import { FailedInvoice } from '@/models/invoice'
+import { useDownloader } from '@/composables/downloader'
 import { useOrgStore } from '@/stores/org'
 
 export default defineComponent({
@@ -93,11 +98,12 @@ export default defineComponent({
     const formatDate = CommonUtils.formatDisplayDate
     const formatDateRange = CommonUtils.formatDateRange
     const suspendedDate = (currentOrganization.value?.suspendedOn) ? formatDate(new Date(currentOrganization.value.suspendedOn)) : ''
-
     const state = reactive({
       statements: [],
-      totalAmountDue: 0
+      totalAmountDue: 0,
+      loading: false
     })
+    const { downloadStatement } = useDownloader(orgStore, state)
 
     const goNext = () => {
       emit('step-forward')
@@ -113,6 +119,7 @@ export default defineComponent({
       ...toRefs(state),
       currentOrganization,
       currentMembership,
+      downloadStatement,
       suspendedDate,
       downloadNSFInvoicesPDF,
       goNext,
@@ -126,6 +133,10 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "$assets/scss/theme.scss";
 
+.text-decoration-underline {
+  text-decoration: underline;
+}
+
 .link {
   color: var(--v-primary-base) !important;
   text-decoration: underline;

auth-web/src/components/auth/account-freeze/MakePayment.vue

@@ -30,7 +30,10 @@
           <div>
             <h2>Electronic Funds Transfer</h2>
             <p>
-              Follow the <span class="link">payment instruction</span> to make a payment.
+              Follow the                     <a
+                class="text-decoration-underline"
+                @click="downloadEFTInstructions"
+              >payment instructions </a>to make a payment.
               Processing may take 2-5 business days after you paid.
               You will receive an email notification once your account is unlocked.
             </p>
@@ -104,6 +107,7 @@
 import { CreateRequestBody, OrgPaymentDetails, PADInfo, PADInfoValidation } from '@/models/Organization'
 import { defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
 import { PaymentTypes } from '@/util/constants'
+import { useDownloader } from '@/composables/downloader'
 import { useOrgStore } from '@/stores/org'
 
 export default defineComponent({
@@ -162,7 +166,7 @@ export default defineComponent({
 
     async function goNext () {
       if (!state.isTouched) {
-        emit('final-step-action')
+        emit('final-step-action', state.paymentMethod === PaymentTypes.EFT ? 'eft-payment-instructions' : '')
       } else {
         state.isLoading = true
         let isValid = state.isTouched ? await verifyPAD() : true
@@ -192,8 +196,11 @@ export default defineComponent({
       emit('step-back')
     }
 
+    const { downloadEFTInstructions } = useDownloader(orgStore, state)
+
     return {
       ...toRefs(state),
+      downloadEFTInstructions,
       onPaymentMethodChange,
       goNext,
       goBack
@@ -205,6 +212,10 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
 
+.text-decoration-underline {
+  text-decoration: underline;
+}
+
 .radio {
   transform: scale(1.5);
 }

auth-web/src/components/auth/account-settings/statement/Statements.vue

@@ -59,7 +59,7 @@
         </div>
         <div class="instructions d-flex ma-0 justify-end align-end">
           <p class="text-right ma-0">
-            <a @click="getEftInstructions">How to pay with electronic funds transfer</a>
+            <a @click="downloadEFTInstructions">How to pay with electronic funds transfer</a>
           </p>
         </div>
       </div>
@@ -187,13 +187,13 @@ import { PropType, computed, defineComponent, onMounted, reactive, toRefs, watch
 import { StatementFilterParams, StatementListItem } from '@/models/statement'
 import AccountChangeMixin from '@/components/auth/mixins/AccountChangeMixin.vue'
 import CommonUtils from '@/util/common-util'
-import DocumentService from '@/services/document.services'
 import LaunchDarklyService from 'sbc-common-components/src/services/launchdarkly.services'
 
 import StatementsSettings from '@/components/auth/account-settings/statement/StatementsSettings.vue'
 import moment from 'moment'
 import { paymentTypeDisplay } from '../../../../resources/display-mappers'
 import { useAccountChangeHandler } from '@/composables'
+import { useDownloader } from '@/composables/downloader'
 import { useOrgStore } from '@/stores/org'
 
 export default defineComponent({
@@ -268,6 +268,8 @@ export default defineComponent({
       })
     })
 
+    const { downloadEFTInstructions } = useDownloader(orgStore, state)
+
     const isStatementNew = (item: StatementListItem) => {
       let isNew = item.isNew
       const statementsDownloaded = JSON.parse(sessionStorage.getItem(SessionStorageKeys.StatementsDownloaded)) || []
@@ -281,19 +283,6 @@ export default defineComponent({
       return item.isOverdue
     }
 
-    const getEftInstructions = async (): Promise<any> => {
-      state.isLoading = true
-      try {
-        const downloadData = await DocumentService.getEftInstructions()
-        CommonUtils.fileDownload(downloadData?.data, `bcrs_eft_instructions.pdf`, downloadData?.headers['content-type'])
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.log(error)
-      } finally {
-        state.isLoading = false
-      }
-    }
-
     const getStatementsList = async (filterParams: any): Promise<any> => {
       const data = await orgStore.getStatementsList(filterParams)
       return data
@@ -455,10 +444,10 @@ export default defineComponent({
       formatDate,
       formatAmount,
       downloadStatement,
+      downloadEFTInstructions,
       enableEFTPaymentMethod,
       isStatementNew,
       isStatementOverdue,
-      getEftInstructions,
       getPaginationOptions,
       customSortActive,
       formatDateRange,

auth-web/src/components/auth/common/PaymentMethods.vue

@@ -123,7 +123,7 @@
                     To send us a payment through electronic funds transfer (EFT), please read the
                     <a
                       class="text-decoration-underline"
-                      @click="getEftInstructions"
+                      @click="downloadEFTInstructions"
                     >Electronic Funds Transfer Payment Instructions</a>.
                   </div>
                 </div>
@@ -213,14 +213,13 @@
 import { LDFlags, Pages, PaymentTypes } from '@/util/constants'
 import { computed, defineComponent, onMounted, reactive, ref, toRefs } from '@vue/composition-api'
 import { BcolProfile } from '@/models/bcol'
-import CommonUtils from '@/util/common-util'
 import ConfigHelper from '@/util/config-helper'
-import DocumentService from '@/services/document.services'
 import GLPaymentForm from '@/components/auth/common/GLPaymentForm.vue'
 import LaunchDarklyService from 'sbc-common-components/src/services/launchdarkly.services'
 import LinkedBCOLBanner from '@/components/auth/common/LinkedBCOLBanner.vue'
 import ModalDialog from '@/components/auth/common/ModalDialog.vue'
 import PADInfoForm from '@/components/auth/common/PADInfoForm.vue'
+import { useDownloader } from '@/composables/downloader'
 import { useOrgStore } from '@/stores/org'
 
 const PAYMENT_METHODS = {
@@ -314,6 +313,7 @@ export default defineComponent({
     const { fetchCurrentOrganizationGLInfo, currentOrgPaymentDetails, getStatementsSummary } = useOrgStore()
     const warningDialog: InstanceType<typeof ModalDialog> = ref(null)
 
+    const orgStore = useOrgStore()
     const state = reactive({
       bcOnlineWarningMessage: 'This payment method will soon be retired.',
       dialogTitle: '',
@@ -375,15 +375,7 @@ export default defineComponent({
       return (selectedPaymentMethod.value === payment.type)
     }
 
-    const getEftInstructions = async () => {
-      try {
-        const downloadData = await DocumentService.getEftInstructions()
-        CommonUtils.fileDownload(downloadData?.data, `bcrs_eft_instructions.pdf`, downloadData?.headers['content-type'])
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.log(error)
-      }
-    }
+    const { downloadEFTInstructions } = useDownloader(orgStore, state)
 
     const hasBalanceOwing = async () => {
       try {
@@ -496,7 +488,7 @@ export default defineComponent({
       allowedPaymentMethods,
       forceEditModeBCOL,
       isPaymentEJV,
-      getEftInstructions,
+      downloadEFTInstructions,
       paymentMethodSelected,
       getPADInfo,
       setBcolInfo,

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

@@ -209,8 +209,8 @@ import CommonUtils from '@/util/common-util'
 import ConfigHelper from 'sbc-common-components/src/util/config-helper'
 import { Pages } from '@/util/constants'
 import { Payment } from '@/models/Payment'
-import { StatementListItem } from '@/models/statement'
 import moment from 'moment'
+import { useDownloader } from '@/composables/downloader'
 import { useOrgStore } from '@/stores'
 
 export default defineComponent({
@@ -248,6 +248,7 @@ export default defineComponent({
       statementOwingError: false,
       selectedPaymentMethod: 'cc'
     })
+    const { downloadStatement } = useDownloader(orgStore, state)
 
     const handlePayment = async () => {
       state.handlingPayment = true
@@ -308,19 +309,6 @@ export default defineComponent({
       return CommonUtils.formatDisplayDate(moment(), 'MMMM DD, YYYY')
     }
 
-    async function downloadStatement (statement: StatementListItem) {
-      try {
-        const fileType = 'application/pdf'
-        const response = await orgStore.getStatement({ statementId: statement.id, type: fileType })
-        const contentDispArr = response?.headers['content-disposition'].split('=')
-        const fileName = (contentDispArr.length && contentDispArr[1]) ? contentDispArr[1] : `bcregistry-statement-pdf`
-        CommonUtils.fileDownload(response.data, fileName, 'application/pdf')
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.log(error)
-      }
-    }
-
     function alertMessage () {
       return 'Please settle any outstanding statements and transactions before changing your payment method, ' +
           'or wait until all unpaid transactions are settled by your current method.'

auth-web/src/composables/downloader.ts

@@ -0,0 +1,38 @@
+import CommonUtils from '@/util/common-util'
+import DocumentService from '@/services/document.services'
+import { StatementListItem } from '@/models/statement'
+
+export function useDownloader (orgStore, state) {
+  async function downloadStatement (statement: StatementListItem) {
+    try {
+      state.loading = true
+      const fileType = 'application/pdf'
+      const response = await orgStore.getStatement({ statementId: statement.id, type: fileType })
+      const contentDispArr = response?.headers['content-disposition'].split('=')
+      const fileName = (contentDispArr.length && contentDispArr[1]) ? contentDispArr[1] : `bcregistry-statement-pdf`
+      CommonUtils.fileDownload(response.data, fileName, 'application/pdf')
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error)
+    } finally {
+      state.loading = false
+    }
+  }
+
+  async function downloadEFTInstructions () {
+    state.isLoading = true
+    try {
+      const downloadData = await DocumentService.getEftInstructions()
+      CommonUtils.fileDownload(downloadData?.data, `bcrs_eft_instructions.pdf`, downloadData?.headers['content-type'])
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error)
+    } finally {
+      state.isLoading = false
+    }
+  }
+  return {
+    downloadEFTInstructions,
+    downloadStatement
+  }
+}

auth-web/src/util/constants.ts

@@ -108,7 +108,8 @@ export enum Pages {
     AFFIDAVIT_COMPLETE = 'upload-affidavit',
     LOGIN = 'login',
     PAY_OUTSTANDING_BALANCE = 'pay-outstanding-balance',
-    PAYMENT_OPTION = 'payment-option'
+    PAYMENT_OPTION = 'payment-option',
+    ACCOUNT_HOLD = 'account-hold'
 }
 
 export enum Account {

auth-web/src/views/auth/AccountLoginOptionsChooser.vue

@@ -80,6 +80,10 @@ export default class AccountLoginOptionsChooser extends Mixins(AccountChangeMixi
 <style lang="scss" scoped>
 @import '$assets/scss/theme.scss';
 
+.text-decoration-underline {
+  text-decoration: underline;
+}
+
 .view-container {
   max-width: 60rem;
 }