From 5a5f8ed4135ccc0efe4c40ddeca7ab7d6c28f130 Mon Sep 17 00:00:00 2001
From: Travis Semple <travis8814@gmail.com>
Date: Wed, 11 Sep 2024 14:40:27 -0700
Subject: [PATCH] 23072 - EFT - Consolidated invoices / unlock - frontend
 changes (#3005)

---
 auth-web/package-lock.json                    |  4 +-
 auth-web/package.json                         |  2 +-
 .../auth/account-freeze/AccountOverview.vue   | 19 ++++++++--
 .../auth/account-freeze/MakePayment.vue       | 15 +++++++-
 .../account-settings/statement/Statements.vue | 21 +++-------
 .../components/auth/common/PaymentMethods.vue | 18 +++------
 .../components/pay/OutstandingBalances.vue    | 16 +-------
 auth-web/src/composables/downloader.ts        | 38 +++++++++++++++++++
 auth-web/src/util/constants.ts                |  3 +-
 .../views/auth/AccountLoginOptionsChooser.vue |  4 ++
 .../AccountFreezeUnlockView.vue               | 32 ++++++++++++++--
 .../auth/account-freeze/AccountHoldView.vue   | 17 +++++++--
 12 files changed, 130 insertions(+), 59 deletions(-)
 create mode 100644 auth-web/src/composables/downloader.ts

diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
index 1a03e752f9..68bd8269e0 100644
--- a/auth-web/package-lock.json
+++ b/auth-web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "auth-web",
-  "version": "2.6.84",
+  "version": "2.6.85",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "auth-web",
-      "version": "2.6.84",
+      "version": "2.6.85",
       "dependencies": {
         "@bcrs-shared-components/base-address": "2.0.3",
         "@bcrs-shared-components/bread-crumb": "1.0.8",
diff --git a/auth-web/package.json b/auth-web/package.json
index 6e8eeba8fd..ad17fb4094 100644
--- a/auth-web/package.json
+++ b/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,
diff --git a/auth-web/src/components/auth/account-freeze/AccountOverview.vue b/auth-web/src/components/auth/account-freeze/AccountOverview.vue
index 1f9dae1954..8d60e1f323 100644
--- a/auth-web/src/components/auth/account-freeze/AccountOverview.vue
+++ b/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;
diff --git a/auth-web/src/components/auth/account-freeze/MakePayment.vue b/auth-web/src/components/auth/account-freeze/MakePayment.vue
index 0002a606a7..6b6b775b90 100644
--- a/auth-web/src/components/auth/account-freeze/MakePayment.vue
+++ b/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);
 }
diff --git a/auth-web/src/components/auth/account-settings/statement/Statements.vue b/auth-web/src/components/auth/account-settings/statement/Statements.vue
index a48c4517a5..06319d5d82 100644
--- a/auth-web/src/components/auth/account-settings/statement/Statements.vue
+++ b/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,
diff --git a/auth-web/src/components/auth/common/PaymentMethods.vue b/auth-web/src/components/auth/common/PaymentMethods.vue
index 6a42e188e3..6fbdd3abce 100644
--- a/auth-web/src/components/auth/common/PaymentMethods.vue
+++ b/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,
diff --git a/auth-web/src/components/pay/OutstandingBalances.vue b/auth-web/src/components/pay/OutstandingBalances.vue
index 1f83e4d34d..cb1c206f7f 100644
--- a/auth-web/src/components/pay/OutstandingBalances.vue
+++ b/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.'
diff --git a/auth-web/src/composables/downloader.ts b/auth-web/src/composables/downloader.ts
new file mode 100644
index 0000000000..0467f9f13a
--- /dev/null
+++ b/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
+  }
+}
diff --git a/auth-web/src/util/constants.ts b/auth-web/src/util/constants.ts
index 592a05ed14..ea9a458269 100644
--- a/auth-web/src/util/constants.ts
+++ b/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 {
diff --git a/auth-web/src/views/auth/AccountLoginOptionsChooser.vue b/auth-web/src/views/auth/AccountLoginOptionsChooser.vue
index 30d0cae36a..2040769cee 100644
--- a/auth-web/src/views/auth/AccountLoginOptionsChooser.vue
+++ b/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;
 }
diff --git a/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue b/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue
index 1a2627d6c3..e9cbebb0bf 100644
--- a/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue
+++ b/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue
@@ -156,8 +156,9 @@ export default defineComponent({
     ModalDialog
   },
   setup (props, { root }) {
-    const { createAccountPayment, createOutstandingAccountPayment, getOrgPayments } = useOrgStore()
-    const { currentOrganization } = storeToRefs(useOrgStore())
+    const orgStore = useOrgStore()
+    const { createAccountPayment, createOutstandingAccountPayment, getOrgPayments } = orgStore
+    const { currentOrganization } = storeToRefs(orgStore)
     const errorDialog = ref(null)
     const stepper = ref(null)
 
@@ -179,10 +180,15 @@ export default defineComponent({
       isAccountStatusNsfSuspended: false
     })
 
-    async function unlockAccount () {
+    async function unlockAccount (alternateFlow: string) {
       if (state.isLoading) {
         return
       }
+
+      if (alternateFlow === 'eft-payment-instructions') {
+        await root.$router.push(`${Pages.ACCOUNT_HOLD}`)
+        return
+      }
       state.isLoading = true
       let payment
       try {
@@ -227,6 +233,23 @@ export default defineComponent({
       stepper.value.stepBack()
     }
 
+    // Check on a polling basis if our account is unlocked, if it's unlocked redirect to account unlocked.
+    async function pollForAccountUnlock (tries = 0) {
+      tries++
+      if (tries >= 5) {
+        return
+      }
+      await orgStore.syncOrganization(currentOrganization.value?.id)
+      if ([AccountStatus.NSF_SUSPENDED, AccountStatus.SUSPENDED]
+        .includes(currentOrganization.value.statusCode as AccountStatus)) {
+        setTimeout(async () => {
+          await pollForAccountUnlock(tries)
+        }, 2000)
+      } else {
+        await root.$router.push(`${Pages.ACCOUNT_UNLOCK_SUCCESS}`)
+      }
+    }
+
     onMounted(async () => {
       state.isAccountStatusNsfSuspended = currentOrganization.value.statusCode === AccountStatus.NSF_SUSPENDED
       await checkPaymentMethods()
@@ -268,6 +291,9 @@ export default defineComponent({
         ]
       }
       state.isViewLoading = false
+      setTimeout(async () => {
+        await pollForAccountUnlock(0)
+      }, 2000)
     })
 
     return {
diff --git a/auth-web/src/views/auth/account-freeze/AccountHoldView.vue b/auth-web/src/views/auth/account-freeze/AccountHoldView.vue
index f956755651..a963019017 100644
--- a/auth-web/src/views/auth/account-freeze/AccountHoldView.vue
+++ b/auth-web/src/views/auth/account-freeze/AccountHoldView.vue
@@ -1,6 +1,8 @@
 <template>
   <v-container class="view-container">
-    <v-row justify="center">
+    <v-row
+      justify="center"
+    >
       <v-col
         cols="12"
         sm="6"
@@ -34,7 +36,12 @@
             :key="statement.id"
             class="mb-2 link"
           >
-            {{ formatDateRange(statement.fromDate, statement.toDate) }}
+            <a
+              class="text-decoration-underline"
+              @click="downloadStatement(statement)"
+            >
+              {{ formatDateRange(statement.fromDate, statement.toDate) }}
+            </a>
           </p>
         </div>
         <div
@@ -62,6 +69,7 @@ import CommonUtils from '@/util/common-util'
 import { FailedInvoice } from '@/models/invoice'
 import moment from 'moment'
 import sanitizeHtml from 'sanitize-html'
+import { useDownloader } from '@/composables/downloader'
 import { useOrgStore } from '@/stores/org'
 
 export default defineComponent({
@@ -81,10 +89,12 @@ export default defineComponent({
     const formatDateRange = CommonUtils.formatDateRange
 
     const state = reactive({
+      loading: false, //  unused, but still used in our downloader.
       statements: [],
       suspendedDate: (currentOrganization.value?.suspendedOn) ? formatDate(moment(currentOrganization.value.suspendedOn)) : '',
       accountAdministratorEmail: ''
     })
+    const { downloadStatement } = useDownloader(orgStore, state)
 
     async function setAdminContact () {
       const adminContact = await getAccountAdministrator()
@@ -104,7 +114,8 @@ export default defineComponent({
     return {
       ...toRefs(state),
       formatDateRange,
-      accountAdministratorEmail
+      accountAdministratorEmail,
+      downloadStatement
     }
   }
 })