From e00acfbebc19b9521bdc91402cb30ad40d154f3c Mon Sep 17 00:00:00 2001 From: Jia Xu Date: Tue, 20 Aug 2024 07:34:03 -0700 Subject: [PATCH] 22841 - Add tooltip and pop-up window reminder to EFT payment (#2971) --- auth-web/package-lock.json | 4 +- auth-web/package.json | 2 +- auth-web/src/assets/scss/tooltip.scss | 57 ++++++++ .../payment/AccountPaymentMethods.vue | 1 + .../auth/common/AccountBusinessType.vue | 58 +-------- .../components/auth/common/PaymentMethods.vue | 122 +++++++++++++----- 6 files changed, 154 insertions(+), 90 deletions(-) create mode 100644 auth-web/src/assets/scss/tooltip.scss diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json index 7ba22c8f37..904005e92a 100644 --- a/auth-web/package-lock.json +++ b/auth-web/package-lock.json @@ -1,12 +1,12 @@ { "name": "auth-web", - "version": "2.6.71", + "version": "2.6.72", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "auth-web", - "version": "2.6.71", + "version": "2.6.72", "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 e98a78ac52..f0eccdec63 100644 --- a/auth-web/package.json +++ b/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, diff --git a/auth-web/src/assets/scss/tooltip.scss b/auth-web/src/assets/scss/tooltip.scss new file mode 100644 index 0000000000..7092a5e350 --- /dev/null +++ b/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; +} diff --git a/auth-web/src/components/auth/account-settings/payment/AccountPaymentMethods.vue b/auth-web/src/components/auth/account-settings/payment/AccountPaymentMethods.vue index d3a1da5f21..28ed0cb020 100644 --- a/auth-web/src/components/auth/account-settings/payment/AccountPaymentMethods.vue +++ b/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" />
@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; diff --git a/auth-web/src/components/auth/common/PaymentMethods.vue b/auth-web/src/components/auth/common/PaymentMethods.vue index 5219c04560..228bfa3c1b 100644 --- a/auth-web/src/components/auth/common/PaymentMethods.vue +++ b/auth-web/src/components/auth/common/PaymentMethods.vue @@ -19,7 +19,7 @@ :data-test="`div-payment-${payment.type}`" >
-
+
-
+

{{ payment.title }}

{{ payment.subtitle }}
+ + + This payment method is not available after EFT is selected. + {{ (isPaymentSelected(payment)) ? 'SELECTED' : 'SELECT' }} @@ -138,7 +166,7 @@ = ref(null) + const warningDialog: InstanceType = 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({