20721 - Client changes from EFT to PAD (#2952)

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

@@ -118,6 +118,12 @@ export default defineComponent({
     PaymentMethods,
     ModalDialog
   },
+  props: {
+    hasPaymentChanged: {
+      type: Boolean,
+      default: false
+    }
+  },
   emits: ['emit-bcol-info'],
   setup (props, { emit, root }) {
     const orgStore = useOrgStore()
@@ -127,7 +133,7 @@ export default defineComponent({
       savedOrganizationType: '',
       selectedPaymentMethod: '',
       padInfo: {} as PADInfo,
-      isBtnSaved: false,
+      isBtnSaved: props.hasPaymentChanged,
       disableSaveBtn: false,
       errorMessage: '',
       errorTitle: 'Payment Update Failed',
@@ -136,7 +142,7 @@ export default defineComponent({
       isLoading: false,
       padValid: false,
       ejvValid: false,
-      paymentMethodChanged: false,
+      paymentMethodChanged: props.hasPaymentChanged,
       isFuturePaymentMethodAvailable: false, // set true if in between 3 days cooling period
       isTOSandAcknowledgeCompleted: false // set true if TOS already accepted
     })

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

@@ -123,7 +123,7 @@
               @change="emitPreAuthDebitInfo"
             >
               <template #label>
-                {{ acknowledgementLabel }}
+                <span :class="acknowledgeColor">{{ acknowledgementLabel }}</span>
               </template>
             </v-checkbox>
           </v-col>
@@ -136,6 +136,7 @@
             <div class="terms-container">
               <TermsOfUseDialog
                 :isAlreadyAccepted="isTOSAccepted"
+                :checkErrors="checkErrors"
                 :tosText="'terms and conditions'"
                 :tosType="'termsofuse_pad'"
                 :tosHeading="'Business Pre-Authorized Debit Terms and Conditions Agreement BC Registries and Online Services'"
@@ -170,7 +171,9 @@ interface PADInfoFormState {
   transitNumber: string,
   showPremiumPADInfo: ComputedRef<boolean>,
   acknowledgementLabel: ComputedRef<string>,
-  padInfoSubtitle: ComputedRef<string>
+  padInfoSubtitle: ComputedRef<string>,
+  acknowledgeColor: ComputedRef<string>,
+  accountNumberRules: ComputedRef<((v: any) => true | string)[]>
 }
 
 export default defineComponent({
@@ -183,7 +186,8 @@ export default defineComponent({
     isInitialAcknowledged: { type: Boolean, default: false },
     isInitialTOSAccepted: { type: Boolean, default: false },
     isTOSNeeded: { type: Boolean, default: true },
-    padInformation: { default: () => { return {} as PADInfo } }
+    padInformation: { default: () => { return {} as PADInfo } },
+    checkErrors: { type: Boolean, default: false }
   },
   emits: ['emit-pre-auth-debit-info', 'is-pre-auth-debit-form-valid', 'is-pad-info-touched'],
   setup (props, { emit }) {
@@ -227,20 +231,20 @@ export default defineComponent({
           ' (3) day confirmation period has ended.'
           : 'This account will not be able to perform any transactions until the mandatory' +
           ' (3) day confirmation period has ended.'
+      }),
+      acknowledgeColor: computed((): string => props.checkErrors && !state.isAcknowledged ? 'error--text' : ''),
+      accountNumberRules: computed((): ((v: any) => true | string)[] => {
+        const rules: ((v: any) => true | string)[] = [
+          v => !!v || 'Account Number is required',
+          v => (v.length >= 7 && v.length <= 12) || 'Account Number should be between 7 to 12 digits'
+        ]
+        if (state.isTouched) {
+          rules.push(v => (!v.includes('X') || 'Edited payment information should not contain masked digits (i.e. XXX)'))
+        }
+        return rules
       })
     }) as unknown) as PADInfoFormState
 
-    const accountNumberRules = computed((): ((v: any) => true | string)[] => {
-      const rules: ((v: any) => true | string)[] = [
-        v => !!v || 'Account Number is required',
-        v => (v.length >= 7 && v.length <= 12) || 'Account Number should be between 7 to 12 digits'
-      ]
-      if (state.isTouched) {
-        rules.push(v => (!v.includes('X') || 'Edited payment information should not contain masked digits (i.e. XXX)'))
-      }
-      return rules
-    })
-
     // emits
     const emitIsPreAuthDebitFormValid = () => {
       const acknowledge = (props.isAcknowledgeNeeded) ? state.isAcknowledged : true
@@ -298,7 +302,6 @@ export default defineComponent({
 
     return {
       accountMask,
-      accountNumberRules,
       institutionNumberRules,
       transitNumberRules,
       ...toRefs(state),
@@ -334,4 +337,8 @@ export default defineComponent({
   .help-btn {
     margin-top: -2px;
   }
+
+  .error--text ::v-deep .v-icon {
+    color: var(--v-error-base) !important;
+  }
 </style>

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

@@ -17,7 +17,6 @@
         class="payment-card py-8 px-8 mb-4 elevation-1"
         :class="{'selected': isPaymentSelected(payment)}"
         :data-test="`div-payment-${payment.type}`"
-        @click="paymentMethodSelected(payment)"
       >
         <div>
           <header class="d-flex align-center">
@@ -340,8 +339,27 @@ export default defineComponent({
       }
     }
 
-    const paymentMethodSelected = (payment, isTouch = true) => {
-      if (payment.type === PaymentTypes.BCOL && isTouch && selectedPaymentMethod.value !== PaymentTypes.BCOL) {
+    const hasBalanceOwing = async () => {
+      try {
+        const responseData = await getStatementsSummary(props.currentOrganization.id)
+        return responseData?.totalDue || responseData?.totalInvoiceDue
+      } catch (error) {
+        console.log(error)
+      }
+    }
+
+    const paymentMethodSelected = async (payment, isTouch = true) => {
+      const isFromEFT = props.currentOrgPaymentType === PaymentTypes.EFT
+      if (payment.type === PaymentTypes.PAD && isFromEFT) {
+        const hasOutstandingBalance = await hasBalanceOwing()
+        if (hasOutstandingBalance) {
+          await root.$router.push({
+            name: Pages.PAY_OUTSTANDING_BALANCE,
+            params: { orgId: props.currentOrganization.id },
+            query: { changePaymentType: payment.type }
+          })
+        }
+      } else if (payment.type === PaymentTypes.BCOL && isTouch && selectedPaymentMethod.value !== PaymentTypes.BCOL) {
         bcOnlineDialog.value.open()
       } else {
         state.bcOnlineWarningMessage = 'This payment method will soon be retired.'
@@ -381,15 +399,6 @@ export default defineComponent({
       selectedPaymentMethod.value = ''
     }
 
-    const hasBalanceOwing = async () => {
-      try {
-        const responseData = await getStatementsSummary(props.currentOrganization.id)
-        return responseData?.totalDue || responseData?.totalInvoiceDue
-      } catch (error) {
-        console.log(error)
-      }
-    }
-
     const continueModal = async () => {
       const hasOutstandingBalance = await hasBalanceOwing()
       const isFromEFT = props.currentOrgPaymentType === PaymentTypes.EFT

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

@@ -12,14 +12,13 @@
       v-model="termsAccepted"
       color="primary"
       class="terms-checkbox align-checkbox-label--top ma-0 pa-0"
-      hide-details
       :disabled="!canCheckTerms"
       required
       data-test="check-termsAccepted"
       @change="emitTermsAcceptanceStatus"
     >
       <template #label>
-        <span>I have read, understood and agree to the
+        <span :class="termsColor">I have read, understood and agree to the
           <strong
             class="faux-link"
             role="button"
@@ -105,7 +104,8 @@ export default defineComponent({
     tosCheckBoxLabelAppend: { type: String, default: '' },
     tosText: { type: String, default: '' },
     isUserTOS: { type: Boolean, default: false },
-    isAlreadyAccepted: { type: Boolean, default: false }
+    isAlreadyAccepted: { type: Boolean, default: false },
+    checkErrors: { type: Boolean, default: false }
   },
   setup (props, { emit }) {
     const userStore = useUserStore()
@@ -116,6 +116,7 @@ export default defineComponent({
     const atBottom = ref(false)
 
     const tooltipTxt = computed(() => 'Please read and agree to the Terms Of Use')
+    const termsColor = computed(() => !termsAccepted.value && props.checkErrors ? 'error--text' : '')
 
     onMounted(() => {
       termsDialog.value = false
@@ -163,6 +164,7 @@ export default defineComponent({
     }
 
     return {
+      termsColor,
       termsDialog,
       termsAccepted,
       canCheckTerms,
@@ -274,5 +276,4 @@ h2 {
 .agree-btn {
   font-weight: 600;
 }
-
 </style>