21107 - Add T&C to Selecting EFT Payment (#2818)

auth-web/package.json

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

auth-web/src/components/auth/account-settings/payment/AccountPaymentMethods.vue

@@ -26,6 +26,7 @@
       @get-PAD-info="getPADInfo"
       @emit-bcol-info="setBcolInfo"
       @is-pad-valid="isPADValid"
+      @is-eft-valid="isEFTValid"
     />
     <v-slide-y-transition>
       <div
@@ -162,6 +163,7 @@ export default class AccountPaymentMethods extends Mixins(AccountChangeMixin) {
   private errorText = ''
   private isLoading: boolean = false
   private padValid: boolean = false
+  private eftValid: boolean = false
   private paymentMethodChanged:boolean = false
   private isFuturePaymentMethodAvailable: boolean = false // set true if in between 3 days cooling period
   private isTOSandAcknowledgeCompleted:boolean = false // sert true if TOS already accepted
@@ -182,6 +184,7 @@ export default class AccountPaymentMethods extends Mixins(AccountChangeMixin) {
     if (this.isBtnSaved) {
       disableSaveBtn = false
     } else if ((this.selectedPaymentMethod === PaymentTypes.PAD && !this.padValid) ||
+               (this.selectedPaymentMethod === PaymentTypes.EFT && !this.eftValid) ||
                (!this.paymentMethodChanged) ||
                (this.selectedPaymentMethod === PaymentTypes.EJV) ||
                this.disableSaveButtonForBCOL()) {
@@ -204,6 +207,10 @@ export default class AccountPaymentMethods extends Mixins(AccountChangeMixin) {
     this.padValid = isValid
   }
 
+  private isEFTValid (isValid) {
+    this.eftValid = isValid
+  }
+
   private async mounted () {
     this.setAccountChangedHandler(await this.initialize)
     await this.initialize()

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

@@ -136,6 +136,7 @@
             <div class="terms-container">
               <TermsOfUseDialog
                 :isAlreadyAccepted="isTOSAccepted"
+                :tosText="'terms and conditions'"
                 :tosType="'termsofuse_pad'"
                 :tosHeading="'Business Pre-Authorized Debit Terms and Conditions Agreement BC Registries and Online Services'"
                 :tosCheckBoxLabelAppend="'of the Business Pre-Authorized Debit Terms and Conditions for BC Registry Services'"

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

@@ -88,10 +88,20 @@
                   class="pt-7"
                 >
                   <v-divider class="mb-7" />
-                  <div>
+                  <div class="mb-7">
                     To send us a payment through electronic funds transfer (EFT), please read the
                     <a @click="getEftInstructions">Electronic Funds Transfer Payment Instructions</a>.
                   </div>
+                  <div class="terms-container">
+                    <TermsOfUseDialog
+                      :isAlreadyAccepted="isEFTTOSAccepted"
+                      :tosText="'Terms and Conditions of the Electronic Funds Transfer'"
+                      :tosType="'termsofuse_pad'"
+                      :tosHeading="'Electronic Funds Transfer Terms and Conditions Agreement, BC Registry and Online Services'"
+                      :tosCheckBoxLabelAppend="'for BC Registry Services'"
+                      @terms-acceptance-status="updateEFTTermsAccepted($event)"
+                    />
+                  </div>
                 </div>
 
                 <!-- Other Payment Types -->
@@ -140,6 +150,7 @@ import GLPaymentForm from '@/components/auth/common/GLPaymentForm.vue'
 import LinkedBCOLBanner from '@/components/auth/common/LinkedBCOLBanner.vue'
 import PADInfoForm from '@/components/auth/common/PADInfoForm.vue'
 import { PaymentTypes } from '@/util/constants'
+import TermsOfUseDialog from '@/components/auth/common/TermsOfUseDialog.vue'
 import { useOrgStore } from '@/stores/org'
 
 const PAYMENT_METHODS = {
@@ -213,7 +224,8 @@ export default defineComponent({
   components: {
     PADInfoForm,
     LinkedBCOLBanner,
-    GLPaymentForm
+    GLPaymentForm,
+    TermsOfUseDialog
   },
   props: {
     currentOrgType: { default: '' },
@@ -226,7 +238,7 @@ export default defineComponent({
     isInitialTOSAccepted: { default: false },
     isInitialAcknowledged: { default: false }
   },
-  emits: ['get-PAD-info', 'emit-bcol-info', 'is-pad-valid', 'payment-method-selected'],
+  emits: ['get-PAD-info', 'emit-bcol-info', 'is-pad-valid', 'is-eft-valid', 'payment-method-selected'],
   setup (props, { emit }) {
     const { fetchCurrentOrganizationGLInfo, currentOrgPaymentDetails } = useOrgStore()
 
@@ -235,6 +247,7 @@ export default defineComponent({
     const padInfo = ref({})
     const isTouched = ref(false)
     const ejvPaymentInformationTitle = 'General Ledger Information'
+    const isEFTTOSAccepted = ref(false)
 
     // this object can define the payment methods allowed for each account tyoes
     const paymentsPerAccountType = ConfigHelper.paymentsAllowedPerAccountType()
@@ -309,6 +322,12 @@ export default defineComponent({
       emit('is-pad-valid', isValid && isTouched.value)
     }
 
+    const updateEFTTermsAccepted = (isAccepted: boolean) => {
+      isEFTTOSAccepted.value = isAccepted
+      isTouched.value = true
+      emit('is-eft-valid', isAccepted && isTouched.value)
+    }
+
     onMounted(async () => {
       paymentMethodSelected({ type: props.currentSelectedPaymentMethod }, false)
       if (isPaymentEJV.value) {
@@ -331,7 +350,9 @@ export default defineComponent({
       setBcolInfo,
       isPADValid,
       isPadInfoTouched,
-      isPaymentSelected
+      isPaymentSelected,
+      updateEFTTermsAccepted,
+      isEFTTOSAccepted
     }
   }
 })

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

@@ -27,7 +27,7 @@
             tabindex="0"
             @keyup.enter="openDialog()"
             @click.stop="openDialog()"
-          >terms and conditions</strong>
+          >{{ tosText }}</strong>
           {{ tosCheckBoxLabelAppend }}
         </span>
       </template>
@@ -91,90 +91,93 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'
+<script lang="ts" setup>
+import { computed, defineComponent, onMounted, ref } from '@vue/composition-api'
 import TermsOfUse from '@/components/auth/common/TermsOfUse.vue'
-import { mapState } from 'pinia'
 import { useUserStore } from '@/stores/user'
 
-@Component({
-  components: {
-    TermsOfUse
+export default defineComponent({
+  name: 'TermsOfUseDialog',
+  components: { TermsOfUse },
+  props: {
+    tosType: { type: String, default: 'termsofuse' },
+    tosHeading: { type: String, default: 'Terms of Use Agreement' },
+    tosCheckBoxLabelAppend: { type: String, default: '' },
+    tosText: { type: String, default: '' },
+    isUserTOS: { type: Boolean, default: false },
+    isAlreadyAccepted: { type: Boolean, default: false }
   },
-  computed: {
-    ...mapState(useUserStore, [
-      'userHasToAcceptTOS'
-    ])
-  }
-})
-export default class TermsOfUseDialog extends Vue {
-  @Prop({ default: 'termsofuse' }) tosType: string
-  @Prop({ default: 'Terms of Use Agreement' }) tosHeading: string
-  @Prop({ default: '' }) tosCheckBoxLabelAppend: string
-  @Prop({ default: false }) isUserTOS: boolean
-  @Prop({ default: false }) isAlreadyAccepted: boolean
-  protected readonly userHasToAcceptTOS!: boolean
-  private termsDialog: boolean = true
-  private termsAccepted: boolean = false
-  private canCheckTerms: boolean = false
-  private atBottom: boolean = false
+  setup(props, { emit }) {
+    const userStore = useUserStore()
+    const userHasToAcceptTOS = computed(() => userStore.userHasToAcceptTOS)
+    const termsDialog = ref(false)
+    const termsAccepted = ref(false)
+    const canCheckTerms = ref(false)
+    const atBottom = ref(false)
 
-  get tooltipTxt () {
-    return 'Please read and agree to the Terms Of Use'
-  }
+    const tooltipTxt = computed(() => 'Please read and agree to the Terms Of Use')
 
-  private mounted () {
-    this.termsDialog = false
-    if (this.isUserTOS && this.userHasToAcceptTOS) {
-      this.agreeToTerms()
-    }
-    if (this.isAlreadyAccepted) {
-      this.termsAccepted = this.canCheckTerms = true
+    onMounted(() => {
+      termsDialog.value = false
+      if (props.isUserTOS && userHasToAcceptTOS.value) {
+        agreeToTerms()
+      }
+      if (props.isAlreadyAccepted) {
+        termsAccepted.value = canCheckTerms.value = true
+      }
+    })
+
+    function updateTermsAccepted(val) {
+      if (props.isUserTOS && val) {
+        agreeToTerms()
+      }
     }
-  }
 
-  @Watch('userHasToAcceptTOS', { deep: true })
-  updateTermsAccepted (val) {
-    if (this.isUserTOS && val) {
-      this.agreeToTerms()
+    function updateIsAlreadyAccepted(val, oldVal) {
+      if (oldVal !== val) {
+        termsAccepted.value = canCheckTerms.value = val
+      }
     }
-  }
 
-  /**
-   * watching isAlreadyAccepted to make changes for edit
-  */
-  @Watch('isAlreadyAccepted', { deep: true })
-  updateIsAlreadyAccepted (val, oldVal) {
-    // mark checked as props
-    if (oldVal !== val) {
-      this.termsAccepted = this.canCheckTerms = val
+    function openDialog() {
+      termsDialog.value = true
     }
-  }
 
-  private openDialog () {
-    this.termsDialog = true
-  }
+    function closeDialog() {
+      termsDialog.value = false
+    }
 
-  private closeDialog () {
-    this.termsDialog = false
-  }
+    function onScroll(e) {
+      atBottom.value = (e.target.scrollHeight - e.target.scrollTop) <= (e.target.offsetHeight + 25)
+    }
 
-  private onScroll (e) {
-    this.atBottom = (e.target.scrollHeight - e.target.scrollTop) <= (e.target.offsetHeight + 25)
-  }
+    function agreeToTerms() {
+      termsDialog.value = false
+      termsAccepted.value = true
+      canCheckTerms.value = true
+      emitTermsAcceptanceStatus()
+    }
 
-  private agreeToTerms () {
-    this.termsDialog = false
-    this.termsAccepted = true
-    this.canCheckTerms = true
-    this.emitTermsAcceptanceStatus()
-  }
+    function emitTermsAcceptanceStatus() {
+      emit('terms-acceptance-status', termsAccepted.value)
+    }
 
-  @Emit('terms-acceptance-status')
-  private emitTermsAcceptanceStatus () {
-    return this.termsAccepted
+    return {
+      termsDialog,
+      termsAccepted,
+      canCheckTerms,
+      atBottom,
+      tooltipTxt,
+      openDialog,
+      closeDialog,
+      onScroll,
+      agreeToTerms,
+      updateTermsAccepted,
+      updateIsAlreadyAccepted,
+      emitTermsAcceptanceStatus
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -50,7 +50,7 @@
           color="error"
           class="item-chip"
         >
-          {{ AccountStatus.NSF_SUSPENDED }}
+          {{ SuspensionReason.NSF_SUSPENDED }}
         </v-chip>
       </template>
       <template #item-slot-amountOwing="{ item }">
@@ -77,7 +77,7 @@
   </div>
 </template>
 <script lang="ts">
-import { AccountStatus, CfsAccountStatus, SessionStorageKeys, ShortNameStatus } from '@/util/constants'
+import { AccountStatus, CfsAccountStatus, SessionStorageKeys, ShortNameStatus, SuspensionReason } from '@/util/constants'
 import { defineComponent, onMounted, reactive, watch } from '@vue/composition-api'
 import { BaseVDataTable } from '..'
 import CommonUtils from '@/util/common-util'
@@ -251,7 +251,8 @@ export default defineComponent({
       viewDetails,
       formatAmount,
       CfsAccountStatus,
-      AccountStatus
+      AccountStatus,
+      SuspensionReason
     }
   }
 })