25550 - Remove BCOL if feature flag is toggled and payment method i… (#3247)

Author: seeker25

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

@@ -51,6 +51,36 @@
         Cancel
       </v-btn>
     </div>
+    <!-- Warning Dialog BCOL -->
+    <ModalDialog
+      ref="bcolWarningDialog"
+      title="BC Online Payment Option Alert"
+      text="After saving your updated payment method, BC Online will no longer be available as a payment option."
+      max-width="640"
+      :showIcon="false"
+      dialog-class="notify-dialog"
+    >
+      <template #icon>
+        <v-icon
+          large
+          color="error"
+        >
+          mdi-alert-circle-outline
+        </v-icon>
+      </template>
+      <template #actions>
+        <div class="d-flex align-center justify-center w-100 h-100 ga-3">
+          <v-btn
+            large
+            color="primary"
+            class="font-weight-bold"
+            @click="closeBcolWarningDialog"
+          >
+            OK
+          </v-btn>
+        </div>
+      </template>
+    </ModalDialog>
     <!-- Alert Dialog (Error) -->
     <ModalDialog
       ref="errorDialog"
@@ -108,12 +138,13 @@
 </template>
 
 <script lang="ts">
-import { AccessType, Account, LoginSource, Pages, PaymentTypes, Permission } from '@/util/constants'
+import { AccessType, Account, LDFlags, LoginSource, Pages, PaymentTypes, Permission } from '@/util/constants'
 import {
   CreateRequestBody, Member, MembershipType, OrgPaymentDetails, Organization, PADInfo, PADInfoValidation
 } from '@/models/Organization'
 import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from '@vue/composition-api'
 import { BcolProfile } from '@/models/bcol'
+import LaunchDarklyService from 'sbc-common-components/src/services/launchdarkly.services'
 import ModalDialog from '@/components/auth/common/ModalDialog.vue'
 import PaymentMethods from '@/components/auth/common/PaymentMethods.vue'
 import { StatementNotificationSettings } from '@/models/statement'
@@ -170,12 +201,18 @@ export default defineComponent({
 
     const errorDialog = ref<InstanceType<typeof ModalDialog>>()
     const unsavedChangesDialog = ref<InstanceType<typeof ModalDialog>>()
+    const bcolWarningDialog = ref<InstanceType<typeof ModalDialog>>()
 
     const { currentOrganization, currentOrgPaymentType, currentOrgAddress, currentMembership, permissions, currentOrgGLInfo } = useAccount()
 
     const currentUser = computed(() => userStore.currentUser)
 
     function setSelectedPayment (payment) {
+      if (LaunchDarklyService.getFlag(LDFlags.HideBCOLProductSettings, false) &&
+          state.selectedPaymentMethod === PaymentTypes.BCOL &&
+          payment.selectedPaymentMethod !== PaymentTypes.BCOL) {
+        bcolWarningDialog.value.open()
+      }
       state.selectedPaymentMethod = payment.selectedPaymentMethod
       state.isBtnSaved = (state.isBtnSaved && !payment.isTouched) || false
       setHasPaymentMethodChanged(payment.isTouched || false)
@@ -231,7 +268,7 @@ export default defineComponent({
 
     const isPaymentViewAllowed = computed(() => {
       // checking permission instead of roles to give access for staff
-      return [Permission.VIEW_REQUEST_PRODUCT_PACKAGE, Permission.MAKE_PAYMENT].some(per => permissions.value.includes(per))
+      return [Permission.VIEW_REQUEST_PRODUCT_PACKAGE].some(per => permissions.value.includes(per))
     })
 
     async function initialize () {
@@ -440,6 +477,10 @@ export default defineComponent({
       errorDialog.value.close()
     }
 
+    function closeBcolWarningDialog () {
+      bcolWarningDialog.value.close()
+    }
+
     function setBcolInfo (bcolProfile: BcolProfile) {
       state.bcolInfo = bcolProfile
       emit('emit-bcol-info', state.bcolInfo)
@@ -479,7 +520,9 @@ export default defineComponent({
       verifyPAD,
       cancel,
       save,
+      bcolWarningDialog,
       closeError,
+      closeBcolWarningDialog,
       errorDialog,
       currentOrganization,
       currentOrgPaymentType,

auth-web/src/components/auth/account-settings/product/ProductPayment.vue

@@ -1,5 +1,6 @@
 <template>
   <v-container
+    :key="accountChangeKey"
     v-can:EDIT_REQUEST_PRODUCT_PACKAGE.disable.card
     class="view-container"
   >
@@ -286,7 +287,8 @@ export default defineComponent({
         return !state.isEditing && (![AccessType.GOVM].includes(accessType) || state.isBcolAdmin)
       }),
       displaySavePaymentMethodsFirst: false,
-      productPaymentReady: false
+      productPaymentReady: false,
+      accountChangeKey: 0
     })
 
     const loadProduct = async () => {
@@ -482,6 +484,8 @@ export default defineComponent({
     // Reload product list when organization changes
     watch(() => currentOrganization.value.id, async () => {
       await setup()
+      // Required otherwise changing from USER -> ADMIN will leave it disabled
+      state.accountChangeKey++
     })
 
     watch(() => state.isEditing, (newValue) => {

auth-web/src/components/auth/account-settings/transaction/Transactions.vue

@@ -117,7 +117,7 @@
 <script lang="ts">
 import { Account, Pages } from '@/util/constants'
 import { MembershipType, OrgPaymentDetails } from '@/models/Organization'
-import { Ref, computed, defineComponent, onBeforeUnmount, onMounted, ref, reactive, toRefs, watch } from '@vue/composition-api'
+import { Ref, computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from '@vue/composition-api'
 import { useAccountChangeHandler, useTransactions } from '@/composables'
 import { BaseTableHeaderI } from '@/components/datatable/interfaces'
 import CommonUtils from '@/util/common-util'

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

@@ -183,7 +183,6 @@
       ref="warningDialog"
       max-width="650"
       :show-icon="false"
-      :showCloseIcon="true"
       :title="dialogTitle"
       :text="dialogText"
       dialog-class="warning-dialog"
@@ -339,6 +338,7 @@ export default defineComponent({
         })
       }
     }
+
     const paymentMethodSelected = async (payment, isTouch = true) => {
       if (payment.type === PaymentTypes.BCOL && isTouch && state.selectedPaymentMethod !== PaymentTypes.BCOL) {
         openBCOnlineDialog()

auth-web/src/composables/product-payment-factory.ts

@@ -1,5 +1,6 @@
-import { AccessType, PaymentTypes, ProductStatus } from '@/util/constants'
+import { AccessType, LDFlags, PaymentTypes, ProductStatus } from '@/util/constants'
 import { useCodesStore, useOrgStore } from '@/stores'
+import LaunchDarklyService from 'sbc-common-components/src/services/launchdarkly.services'
 import { computed } from '@vue/composition-api'
 import { storeToRefs } from 'pinia'
 
@@ -96,6 +97,11 @@ export const useProductPayment = (props, state) => {
       exclusionSet = [PaymentTypes.INTERNAL, PaymentTypes.EJV]
     }
 
+    if (LaunchDarklyService.getFlag(LDFlags.HideBCOLProductSettings, false) &&
+        orgStore.currentOrgPaymentType !== PaymentTypes.BCOL) {
+      exclusionSet.push(PaymentTypes.BCOL)
+    }
+
     Object.keys(ppMethods).forEach((product) => {
       ppMethods[product] = ppMethods[product].filter((method) => {
         if (inclusionSet.length > 0) {
@@ -145,7 +151,7 @@ export const useProductPayment = (props, state) => {
       return [PAYMENT_METHODS[state.selectedPaymentMethod]]
     }
     const methodSupportPerProduct = paymentMethodSupportedForProducts.value
-    const paymentMethods = []
+    let paymentMethods = []
     const isGovmOrg = orgStore.currentOrganization?.accessType === AccessType.GOVM
     const paymentTypes = isGovmOrg ? [PaymentTypes.EJV] : [PaymentTypes.PAD, PaymentTypes.CREDIT_CARD,
       PaymentTypes.ONLINE_BANKING, PaymentTypes.BCOL, PaymentTypes.EFT]
@@ -164,6 +170,10 @@ export const useProductPayment = (props, state) => {
         paymentMethods.push(paymentMethod)
       }
     })
+    if (LaunchDarklyService.getFlag(LDFlags.HideBCOLProductSettings, false) &&
+        orgStore.currentOrgPaymentType !== PaymentTypes.BCOL) {
+      paymentMethods = paymentMethods.filter(item => item.type !== PaymentTypes.BCOL)
+    }
     return paymentMethods
   })
 

auth-web/src/util/constants.ts

@@ -484,6 +484,7 @@ export enum LDFlags {
     EnableAffiliationDelegation = 'enable-affiliation-delegation',
     EnableEFTBalanceByPAD = 'enable-eft-balance-by-pad',
     EnableDRSLookup = 'enable-drs-lookup', // Document Record Services
+    HideBCOLProductSettings = 'hide-bcol-product-settings',
 }
 
 export enum DateFilterCodes {

auth-web/tests/unit/components/ProductPayment.spec.ts

@@ -34,7 +34,7 @@ describe('Account settings ProductPackage.vue', () => {
       loginSource: LoginSource.BCROS
     } as any
     const orgStore = useOrgStore()
-    orgStore.permissions = [Permission.VIEW_REQUEST_PRODUCT_PACKAGE, Permission.MAKE_PAYMENT]
+    orgStore.permissions = [Permission.VIEW_REQUEST_PRODUCT_PACKAGE]
     orgStore.currentOrganization = {
       name: 'test org'
     }