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 178f0b854..342348f3d 100644 --- a/auth-web/src/components/auth/account-settings/payment/AccountPaymentMethods.vue +++ b/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" >
@@ -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 } diff --git a/auth-web/src/components/auth/common/PaymentMethods.vue b/auth-web/src/components/auth/common/PaymentMethods.vue index 7e3823e4f..4fbde5d27 100644 --- a/auth-web/src/components/auth/common/PaymentMethods.vue +++ b/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 } diff --git a/auth-web/src/store/modules/org.ts b/auth-web/src/store/modules/org.ts index 291ec0d75..5e8dee1fa 100644 --- a/auth-web/src/store/modules/org.ts +++ b/auth-web/src/store/modules/org.ts @@ -695,7 +695,7 @@ export default class OrgModule extends VuexModule { public async getOrgPayments (orgId?: number): Promise { 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