Feature/5095 (#1219)

* Update payment method for the premium account linked to BCOL: From PAD to BCOL

Author: shabeeb-aot

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

@@ -18,6 +18,7 @@
       @payment-method-selected="setSelectedPayment"
       @get-PAD-info="getPADInfo"
       @is-pad-valid="isPADValid"
+      isTouchedUpdate="true"
     ></PaymentMethods>
     <v-divider class="my-10"></v-divider>
     <div class="form__btns d-flex">
@@ -112,22 +113,24 @@ export default class AccountPaymentMethods extends Mixins(AccountChangeMixin) {
   private errorText = ''
   private isLoading: boolean = false
   private padValid: boolean = false
-  private paymentMethodChanged:boolean = true // false // now always enable save button after discussion need to change
+  private paymentMethodChanged:boolean = false
 
   $refs: {
       errorDialog: ModalDialog
     }
 
   private setSelectedPayment (payment) {
-    this.selectedPaymentMethod = payment
-    this.isBtnSaved = false
-    this.paymentMethodChanged = true
+    this.selectedPaymentMethod = payment.selectedPaymentMethod
+    this.isBtnSaved = (this.isBtnSaved && !payment.isTouched) || false
+    this.paymentMethodChanged = payment.isTouched || false
   }
 
   private get isDisableSaveBtn () {
     let disableSaveBtn = false
 
-    if ((this.selectedPaymentMethod === PaymentTypes.PAD && !this.padValid) || (!this.paymentMethodChanged)) {
+    if (this.isBtnSaved) {
+      disableSaveBtn = false
+    } else if ((this.selectedPaymentMethod === PaymentTypes.PAD && !this.padValid) || (!this.paymentMethodChanged)) {
       disableSaveBtn = true
     }
 

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

@@ -144,6 +144,7 @@ export default class PaymentMethods extends Vue {
   @Prop({ default: '' }) currentSelectedPaymentMethod: string
   @Prop({ default: false }) isChangeView: boolean
   @Prop({ default: true }) isAcknowledgeNeeded: boolean
+  @Prop({ default: false }) isTouchedUpdate: boolean
   private selectedPaymentMethod: string = ''
   private paymentTypes = PaymentTypes
   private padInfo: PADInfo = {} as PADInfo
@@ -168,7 +169,7 @@ export default class PaymentMethods extends Vue {
 
   private mounted () {
     if (!this.isPADOnly) {
-      this.paymentMethodSelected({ type: this.currentSelectedPaymentMethod })
+      this.paymentMethodSelected({ type: this.currentSelectedPaymentMethod }, false)
     }
   }
 
@@ -177,8 +178,12 @@ export default class PaymentMethods extends Vue {
   }
 
   @Emit()
-  private paymentMethodSelected (payment) {
+  private paymentMethodSelected (payment, isTouched = true) {
     this.selectedPaymentMethod = payment.type
+    // emit touched flag for parent element
+    if (this.isTouchedUpdate) {
+      return { selectedPaymentMethod: this.selectedPaymentMethod, isTouched }
+    }
     return this.selectedPaymentMethod
   }
 

auth-web/src/store/modules/org.ts

@@ -695,7 +695,7 @@ export default class OrgModule extends VuexModule {
   public async getOrgPayments (orgId?: number): Promise<OrgPaymentDetails> {
     const id = orgId || this.context.state['currentOrganization'].id
     const response = await OrgService.getOrgPayments(id)
-    let paymentType = response?.data?.paymentMethod || undefined
+    let paymentType = response?.data?.futurePaymentMethod ? response?.data?.futurePaymentMethod : response?.data?.paymentMethod || undefined
     paymentType = (paymentType === PaymentTypes.DIRECT_PAY) ? PaymentTypes.CREDIT_CARD : paymentType
     this.context.commit('setCurrentOrganizationPaymentType', paymentType)
     // setting padinfo for showing details