diff --git a/addons/payment/static/src/js/checkout_form.js b/addons/payment/static/src/js/checkout_form.js index ca2d6b96d5a..51b17b4777b 100644 --- a/addons/payment/static/src/js/checkout_form.js +++ b/addons/payment/static/src/js/checkout_form.js @@ -19,6 +19,7 @@ * @constructor */ init: function () { + this.formType = 'checkout'; const preventDoubleClick = handlerMethod => { return debounce(handlerMethod, 500, true); }; @@ -62,9 +63,8 @@ // Update the tx context with the value of the "Save my payment details" checkbox if (flow !== 'token') { - const $tokenizeCheckbox = this.$( - `#o_payment_provider_inline_form_${paymentOptionId}` // Only match provider radios - ).find('input[name="o_payment_save_as_token"]'); + const $inlineForm = this._getInlineFormFromRadio(checkedRadio); + const $tokenizeCheckbox = $inlineForm.find('input[name="o_payment_save_as_token"]'); this.txContext.tokenizationRequested = $tokenizeCheckbox.length === 1 && $tokenizeCheckbox[0].checked; } else { diff --git a/addons/payment/static/src/js/manage_form.js b/addons/payment/static/src/js/manage_form.js index c0a6f56b93c..9544bf30da1 100644 --- a/addons/payment/static/src/js/manage_form.js +++ b/addons/payment/static/src/js/manage_form.js @@ -24,6 +24,7 @@ import { debounce } from "@web/core/utils/timing"; * @constructor */ init: function () { + this.formType = 'manage'; const preventDoubleClick = handlerMethod => { return debounce(handlerMethod, 500, true); }; @@ -136,7 +137,7 @@ import { debounce } from "@web/core/utils/timing"; `input[name="o_payment_radio"][data-payment-option-id="${tokenId}"]` + `[data-payment-option-type="token"]` ).closest('div[name="o_payment_option_card"]'); - $tokenCard.siblings(`#o_payment_token_inline_form_${tokenId}`).remove(); + $tokenCard.siblings(`#o_payment_token_inline_manage_form_${tokenId}`).remove(); $tokenCard.remove(); this._disableButton(false); }).guardedCatch(error => { diff --git a/addons/payment/static/src/js/payment_form_mixin.js b/addons/payment/static/src/js/payment_form_mixin.js index 022a2ef9b56..c0ec62d6223 100644 --- a/addons/payment/static/src/js/payment_form_mixin.js +++ b/addons/payment/static/src/js/payment_form_mixin.js @@ -116,9 +116,7 @@ // Append error to inline form and center the page on the error const checkedRadio = $checkedRadios[0]; - const paymentOptionId = this._getPaymentOptionIdFromRadio(checkedRadio); - const formType = $(checkedRadio).data('payment-option-type'); - const $inlineForm = this.$(`#o_payment_${formType}_inline_form_${paymentOptionId}`); + const $inlineForm = this._getInlineFormFromRadio(checkedRadio); $inlineForm.removeClass('d-none'); // Show the inline form even if it was empty $inlineForm.append(errorHtml).find('div[name="o_payment_error"]')[0] .scrollIntoView({behavior: 'smooth', block: 'center'}); @@ -146,8 +144,7 @@ // Prepare the inline form of the selected payment option and display it if not empty this._prepareInlineForm(provider, paymentOptionId, flow); - const formType = $(radio).data('payment-option-type'); - const $inlineForm = this.$(`#o_payment_${formType}_inline_form_${paymentOptionId}`); + const $inlineForm = this._getInlineFormFromRadio(radio); if ($inlineForm.children().length > 0) { $inlineForm.removeClass('d-none'); } @@ -198,6 +195,22 @@ return true; }, + /** + * Find and return the inline form of the selected payment option. + * + * @private + * @param {HTMLInputElement} radio - The radio button linked to the payment option. + * @return {jQuery} The inline form of the selected payment option. + */ + _getInlineFormFromRadio: function (radio) { + const paymentOptionId = this._getPaymentOptionIdFromRadio(radio); + const paymentOptionType = $(radio).data('payment-option-type'); + const $inlineForm = this.$( + `#o_payment_${paymentOptionType}_inline_${this.formType}_form_${paymentOptionId}` + ); + return $inlineForm; + }, + /** * Determine and return the online payment flow of the selected payment option. * @@ -247,23 +260,23 @@ }, /** - * Remove the error in the provider form. + * Remove the error in the inline form of the current widget. * * @private * @return {jQuery} The removed error */ _hideError() { - return $('div[name="o_payment_error"]').remove(); + return this.$('div[name="o_payment_error"]').remove(); }, /** - * Collapse all inline forms. + * Collapse all inline forms of the current widget. * * @private * @return {undefined}. */ _hideInlineForms() { - return $('[name="o_payment_inline_form"]').addClass('d-none'); + return this.$('[name="o_payment_inline_form"]').addClass('d-none'); }, /** diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml index 40fd5942ab9..5e158172a3c 100644 --- a/addons/payment/views/payment_templates.xml +++ b/addons/payment/views/payment_templates.xml @@ -97,7 +97,7 @@ - - - -