22841 - Add tooltip and pop-up window reminder to EFT payment

auth-web/package.json

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

auth-web/src/assets/scss/tooltip.scss

@@ -0,0 +1,57 @@
+.tooltip-activator {
+  width: 100%;
+}
+.tooltip {
+  background-color: transparent;
+  opacity: 1 !important;
+
+  .tooltip-content {
+    min-width: 30rem;
+    padding: 2rem;
+  }
+}
+.tooltip-text {
+  border-bottom: 2px dotted;
+}
+.tooltip-text:hover {
+    cursor: pointer;
+}
+.v-tooltip__content {
+  background-color: RGBA(73, 80, 87, 0.95) !important;
+  color: white !important;
+  border-radius: 4px;
+  font-size: 14px !important;
+  line-height: 18px !important;
+  padding: 15px !important;
+  letter-spacing: 0;
+  max-width: 360px !important;
+}
+.v-tooltip__content:after {
+  content: "" !important;
+  position: absolute !important;
+  top: 50% !important;
+  right: 100% !important;
+  margin-top: -10px !important;
+  border-top: 10px solid transparent !important;
+  border-bottom: 10px solid transparent !important;
+  border-right: 8px solid RGBA(73, 80, 87, .95) !important;
+}
+
+.top-tooltip:after {
+  top: 100% !important;
+  left: 45% !important;
+  margin-top: 0 !important;
+  border-right: 10px solid transparent !important;
+  border-left: 10px solid transparent !important;
+  border-top: 8px solid RGBA(73, 80, 87, 0.95) !important;
+}
+
+.right-tooltip:after {
+  top: 50% !important;
+  right: 100% !important;
+  margin-top: -10px !important;
+  border-bottom: 10px solid transparent !important;
+  border-left: 10px solid transparent !important;
+  border-top: 10px solid transparent !important;
+  border-right: 8px solid RGBA(73, 80, 87, 0.95) !important;
+}

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

@@ -28,6 +28,7 @@
       @emit-bcol-info="setBcolInfo"
       @is-pad-valid="isPADValid"
       @is-ejv-valid="isEJVValid"
+      @cancel="cancel"
     />
     <v-slide-y-transition>
       <div

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

@@ -451,6 +451,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '$assets/scss/theme.scss';
+@import '@/assets/scss/tooltip.scss';
 .view-container {
     padding: 0 !important;
 }
@@ -467,63 +468,6 @@ export default defineComponent({
       background-color: $BCgovInputBG !important;
   }
 }
-.tooltip-activator {
-  width: 100%;
-}
-.tooltip {
-  background-color: transparent;
-  opacity: 1 !important;
-
-  .tooltip-content {
-    min-width: 30rem;
-    padding: 2rem;
-  }
-}
-.tooltip-text {
-  border-bottom: 2px dotted;
-}
-.tooltip-text:hover {
-    cursor: pointer;
-}
-.v-tooltip__content {
-  background-color: RGBA(73, 80, 87, 0.95) !important;
-  color: white !important;
-  border-radius: 4px;
-  font-size: 14px !important;
-  line-height: 18px !important;
-  padding: 15px !important;
-  letter-spacing: 0;
-  max-width: 360px !important;
-}
-.v-tooltip__content:after {
-  content: "" !important;
-  position: absolute !important;
-  top: 50% !important;
-  right: 100% !important;
-  margin-top: -10px !important;
-  border-top: 10px solid transparent !important;
-  border-bottom: 10px solid transparent !important;
-  border-right: 8px solid RGBA(73, 80, 87, .95) !important;
-}
-
-.top-tooltip:after {
-  top: 100% !important;
-  left: 45% !important;
-  margin-top: 0 !important;
-  border-right: 10px solid transparent !important;
-  border-left: 10px solid transparent !important;
-  border-top: 8px solid RGBA(73, 80, 87, 0.95) !important;
-}
-
-.right-tooltip:after {
-  top: 50% !important;
-  right: 100% !important;
-  margin-top: -10px !important;
-  border-bottom: 10px solid transparent !important;
-  border-left: 10px solid transparent !important;
-  border-top: 10px solid transparent !important;
-  border-right: 8px solid RGBA(73, 80, 87, 0.95) !important;
-}
 
 .align-vertical {
   align-items: center;

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

@@ -19,7 +19,7 @@
         :data-test="`div-payment-${payment.type}`"
       >
         <div>
-          <header class="d-flex align-center">
+          <header class="d-flex align-center flex-grow-1">
             <div class="payment-icon-container mt-n2">
               <v-icon
                 x-large
@@ -28,22 +28,50 @@
                 {{ payment.icon }}
               </v-icon>
             </div>
-            <div class="pr-8">
+            <div class="pr-8 flex-grow-1">
               <h3 class="title font-weight-bold payment-title mt-n1">
                 {{ payment.title }}
               </h3>
               <div>{{ payment.subtitle }}</div>
             </div>
+            <v-tooltip
+              v-if="!isChangePaymentEnabled() && !isPaymentSelected(payment)"
+              top
+              content-class="top-tooltip"
+              transition="fade-transition"
+            >
+              <template #activator="{ on, attrs }">
+                <div
+                  v-bind="attrs"
+                  class="btn-tooltip-wrap"
+                  v-on="on"
+                >
+                  <v-btn
+                    large
+                    depressed
+                    color="primary"
+                    width="120"
+                    :class="['font-weight-bold', 'ml-auto', { 'disabled': !isChangePaymentEnabled() }]"
+                    :aria-label="'Select' + ' ' + payment.title"
+                    :data-test="`btn-payment-${payment.type}`"
+                    disabled
+                  >
+                    <span>{{ isPaymentSelected(payment) ? 'SELECTED' : 'SELECT' }}</span>
+                  </v-btn>
+                </div>
+              </template>
+              <span>This payment method is not available after EFT is selected.</span>
+            </v-tooltip>
             <v-btn
+              v-if="isPaymentSelected(payment) || isChangePaymentEnabled()"
               large
               depressed
               color="primary"
               width="120"
-              :class="['font-weight-bold', 'ml-auto', { 'disabled': !isChangeFromEFTEnabled() }]"
-              :outlined="!isPaymentSelected(payment) && isChangeFromEFTEnabled()"
+              :class="['font-weight-bold', 'ml-auto', { 'disabled': !isChangePaymentEnabled() }]"
+              :outlined="!isPaymentSelected(payment) && isChangePaymentEnabled()"
               :aria-label="'Select' + ' ' + payment.title"
               :data-test="`btn-payment-${payment.type}`"
-              :disabled="!isChangeFromEFTEnabled()"
               @click="paymentMethodSelected(payment)"
             >
               <span>{{ (isPaymentSelected(payment)) ? 'SELECTED' : 'SELECT' }}</span>
@@ -138,7 +166,7 @@
       </v-col>
     </v-row>
     <ModalDialog
-      ref="bcOnlineDialog"
+      ref="warningDialog"
       max-width="650"
       :show-icon="false"
       :showCloseIcon="true"
@@ -278,17 +306,30 @@ export default defineComponent({
     isInitialAcknowledged: { default: false },
     isBcolAdmin: { default: false }
   },
-  emits: ['get-PAD-info', 'emit-bcol-info', 'is-pad-valid', 'is-ejv-valid', 'payment-method-selected'],
+  emits: ['cancel', 'get-PAD-info', 'emit-bcol-info', 'is-pad-valid', 'is-ejv-valid', 'payment-method-selected'],
   setup (props, { emit, root }) {
     const { fetchCurrentOrganizationGLInfo, currentOrgPaymentDetails, getStatementsSummary } = useOrgStore()
-    const bcOnlineDialog: InstanceType<typeof ModalDialog> = ref(null)
+    const warningDialog: InstanceType<typeof ModalDialog> = ref(null)
 
     const state = reactive({
-      dialogTitle: 'BC Online Payment Option Ending Soon',
-      dialogText: 'The "BC Online" payment option will soon be retired. Are you sure you want to continue?',
-      bcOnlineWarningMessage: 'This payment method will soon be retired.'
+      bcOnlineWarningMessage: 'This payment method will soon be retired.',
+      dialogTitle: '',
+      dialogText: ''
     })
 
+    const openBCOnlineDialog = () => {
+      state.dialogTitle = 'BC Online Payment Option Ending Soon'
+      state.dialogText = 'The "BC Online" payment option will soon be retired. Are you sure you want to continue?'
+      warningDialog.value.open()
+    }
+
+    const openEFTWarningDialog = () => {
+      state.dialogTitle = 'Confirm Payment Method Change'
+      state.dialogText = `Are you sure you want to change your payment method to Electronic Funds Transfer?
+                This action cannot be undone, and you will not be able to select a different payment method later.`
+      warningDialog.value.open()
+    }
+
     const selectedPaymentMethod = ref('')
     const paymentTypes = PaymentTypes
     const padInfo = ref({})
@@ -350,9 +391,20 @@ export default defineComponent({
       }
     }
 
+    const enableEFTPaymentMethod = () => {
+      const enableEFTPayment: boolean = LaunchDarklyService.getFlag(LDFlags.EnablePaymentChangeFromEFT, false)
+      return enableEFTPayment
+    }
+
+    const isChangePaymentEnabled = () => {
+      return props.currentOrgPaymentType !== PaymentTypes.EFT || enableEFTPaymentMethod()
+    }
+
     const paymentMethodSelected = async (payment, isTouch = true) => {
       const isFromEFT = props.currentOrgPaymentType === PaymentTypes.EFT
-      if (payment.type === PaymentTypes.PAD && isFromEFT) {
+      if (payment.type === PaymentTypes.EFT && isTouch && selectedPaymentMethod.value !== PaymentTypes.EFT && !enableEFTPaymentMethod()) {
+        openEFTWarningDialog()
+      } else if (payment.type === PaymentTypes.PAD && isFromEFT) {
         const hasOutstandingBalance = await hasBalanceOwing()
         if (hasOutstandingBalance) {
           await root.$router.push({
@@ -362,7 +414,7 @@ export default defineComponent({
           })
         }
       } else if (payment.type === PaymentTypes.BCOL && isTouch && selectedPaymentMethod.value !== PaymentTypes.BCOL) {
-        bcOnlineDialog.value.open()
+        openBCOnlineDialog()
       } else {
         state.bcOnlineWarningMessage = 'This payment method will soon be retired.'
       }
@@ -397,28 +449,30 @@ export default defineComponent({
     }
 
     const cancelModal = () => {
-      bcOnlineDialog.value.close()
+      warningDialog.value.close()
       selectedPaymentMethod.value = ''
-    }
-
-    const isChangeFromEFTEnabled = () => {
-      const enableEFTPaymentMethod: boolean = LaunchDarklyService.getFlag(LDFlags.EnablePaymentChangeFromEFT, false)
-      return props.currentOrgPaymentType !== PaymentTypes.EFT || enableEFTPaymentMethod
+      emit('cancel')
     }
 
     const continueModal = async () => {
       const hasOutstandingBalance = await hasBalanceOwing()
       const isFromEFT = props.currentOrgPaymentType === PaymentTypes.EFT
-      if (!hasOutstandingBalance) {
-        bcOnlineDialog.value.close()
-      } else if (isFromEFT) {
-        await root.$router.push({
-          name: Pages.PAY_OUTSTANDING_BALANCE,
-          params: { orgId: props.currentOrganization.id },
-          query: { changePaymentType: props.currentSelectedPaymentMethod }
-        })
+      const isEFTSelected = selectedPaymentMethod.value === PaymentTypes.EFT
+
+      if (isEFTSelected) {
+        warningDialog.value.close()
+      } else {
+        if (!hasOutstandingBalance) {
+          warningDialog.value.close()
+        } else if (isFromEFT) {
+          await root.$router.push({
+            name: Pages.PAY_OUTSTANDING_BALANCE,
+            params: { orgId: props.currentOrganization.id },
+            query: { changePaymentType: props.currentSelectedPaymentMethod }
+          })
+        }
+        state.bcOnlineWarningMessage = 'This payment method will soon be retired. It is recommended to select a different payment method.'
       }
-      state.bcOnlineWarningMessage = 'This payment method will soon be retired. It is recommended to select a different payment method.'
     }
 
     onMounted(async () => {
@@ -445,11 +499,11 @@ export default defineComponent({
       isPADValid,
       isPadInfoTouched,
       isPaymentSelected,
-      bcOnlineDialog,
+      warningDialog,
       cancelModal,
       continueModal,
       isGLInfoValid,
-      isChangeFromEFTEnabled
+      isChangePaymentEnabled
     }
   }
 })
@@ -458,6 +512,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/assets/scss/theme.scss';
 @import '@/assets/scss/actions.scss';
+@import '@/assets/scss/tooltip.scss';
 .important {
   background-color: #fff7e3;
   border: 2px solid #fcba19;
@@ -530,4 +585,11 @@ export default defineComponent({
   pointer-events: none;
 }
 
+.d-flex {
+  display: flex;
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
 </style>