diff --git a/addons/payment/static/src/js/payment_form.js b/addons/payment/static/src/js/payment_form.js index f95fd50f9fe..d2dd252f442 100644 --- a/addons/payment/static/src/js/payment_form.js +++ b/addons/payment/static/src/js/payment_form.js @@ -1,4 +1,4 @@ -odoo.define('payment.payment_form', function (require){ +odoo.define('payment.payment_form', function (require) { "use strict"; var ajax = require('web.ajax'); @@ -17,7 +17,13 @@ odoo.define('payment.payment_form', function (require){ 'click input[type="radio"]': 'radioClickEvent' }, - payEvent: function(ev) { + start: function () { + this.updateNewPaymentDisplayStatus(); + $('[data-toggle="tooltip"]').tooltip(); + + }, + + payEvent: function (ev) { ev.preventDefault(); var form = this.el; var checked_radio = this.$('input[type="radio"]:checked'); @@ -25,20 +31,27 @@ odoo.define('payment.payment_form', function (require){ var button = ev.target; // first we check that the user has selected a payment method - if(checked_radio.length == 1) { + if (checked_radio.length === 1) { checked_radio = checked_radio[0]; + + // we retrieve all the input inside the acquirer form and 'serialize' them to an indexed array + var acquirer_id = this.getAcquirerIdFromRadio(checked_radio); + var acquirer_form = false; + if (this.isNewPaymentRadio(checked_radio)) { + acquirer_form = this.$('#o_payment_add_token_acq_' + acquirer_id); + } else { + acquirer_form = this.$('#o_payment_form_acq_' + acquirer_id); + } + var inputs_form = $('input', acquirer_form); + var ds = $('input[name="data_set"]', acquirer_form)[0]; + // if the user is adding a new payment - if(this.isNewPaymentRadio(checked_radio)) { - var acquirer_id = this.getAcquirerIdFromRadio(checked_radio); - var acquirer_form = this.$('#o_payment_add_token_acq_' + acquirer_id); - // we retrieve all the input inside the acquirer form and 'serialize' them to an indexed array - var inputs_form = $('input', acquirer_form); + if (this.isNewPaymentRadio(checked_radio)) { var form_data = this.getFormData(inputs_form); - var ds = $('input[name="data_set"]', acquirer_form)[0]; var empty_inputs = false; - inputs_form.toArray().forEach(function(element) { - if(element.dataset.isRequired) { + inputs_form.toArray().forEach(function (element) { + if (element.dataset.isRequired) { if (element.value.length === 0) { $(element).closest('div.form-group').addClass('has-error'); empty_inputs = true; @@ -49,8 +62,11 @@ odoo.define('payment.payment_form', function (require){ } }); - if(empty_inputs) { - this.error(_t('Missing values'), _t('
Please fill all the inputs required.
')); + if (empty_inputs) { + this.displayError( + _t('Missing values'), + _t('Please fill all the inputs required.
') + ); return; } @@ -59,15 +75,16 @@ odoo.define('payment.payment_form', function (require){ var verify_validity = this.$el.find('input[name="verify_validity"]'); - if(verify_validity.length>0) + if (verify_validity.length>0) { form_data.verify_validity = verify_validity[0].value === "1"; + } // do the call to the route stored in the 'data_set' input of the acquirer form, the data must be called 'create-route' - ajax.jsonRpc(ds.dataset.createRoute, 'call', form_data).then(function(data) { + ajax.jsonRpc(ds.dataset.createRoute, 'call', form_data).then(function (data) { // if the server has returned true - if(data.result) { + if (data.result) { // and it need a 3DS authentication - if(data['3d_secure'] !== false) { + if (data['3d_secure'] !== false) { // then we display the 3DS page to the user $("body").html(data['3d_secure']); } @@ -78,48 +95,43 @@ odoo.define('payment.payment_form', function (require){ } // if the server has returned false, we display an error else { - self.error(_t('Server Error'), + self.displayError( + _t('Server Error'), _t("We are not able to add your payment method at the moment.
")); } // here we remove the 'processing' icon from the 'add a new payment' button $(button).attr('disabled', false); $(button).find('span.o_loader').remove(); - }).fail(function(message, data) { + }).fail(function (message, data) { // if the rpc fails, pretty obvious $(button).attr('disabled', false); $(button).find('span.o_loader').remove(); - self.error(_t('Server Error'), - _t("We are not able to add your payment method at the moment.
") + (core.debug ? data.data.message : '')); + self.displayError( + _t('Server Error'), + _t("We are not able to add your payment method at the moment.
") + (core.debug ? data.data.message : '') + ); }); } // if the user is going to pay with a form payment, then - else if(this.isFormPaymentRadio(checked_radio)) - { - var self = this; - // we retrieve the acquirer id and its form - var acquirer_id = this.getAcquirerIdFromRadio(checked_radio); - var acquirer_form = this.$('#o_payment_form_acq_' + acquirer_id); - var inputs_form = $('input', acquirer_form); - var ds = $('input[name="data_set"]', acquirer_form)[0]; - var form_save_token = false; - var $tx_url = this.$el.find('input[name="prepare_tx_url"]'); - + else if (this.isFormPaymentRadio(checked_radio)) { // if neither the dataset or the action url is defined, then we just stop the execution of the function - if(!ds || !ds.dataset.actionUrl) + if (!ds || !ds.dataset.actionUrl) { + console.warn('payment_form: invalid dataset / actionurl'); return; + } + var $tx_url = this.$el.find('input[name="prepare_tx_url"]'); // if there's a prepare tx url set - if($tx_url.length == 1) - { + if ($tx_url.length === 1) { // if the user wants to save his credit card info - form_save_token = $('input[name="o_payment_form_save_token"]').checked === true; + var form_save_token = $('input[name="o_payment_form_save_token"]').checked === true; // then we call the route to prepare the transaction ajax.jsonRpc($tx_url[0].value, 'call', { 'acquirer_id': parseInt(acquirer_id), - 'save_token': form_save_token - }).then(function(result){ - if(result) { + 'save_token': form_save_token, + }).then(function (result) { + if (result) { // if the server sent us the html form, we create a form element var newForm = document.createElement('form'); newForm.setAttribute("method", "post"); // set it to post @@ -131,42 +143,47 @@ odoo.define('payment.payment_form', function (require){ newForm.submit(); // and finally submit the form } else { - self.error(_t('Server Error'), - _t("We are not able to redirect you to the payment form.
")); + self.displayError( + _t('Server Error'), + _t("We are not able to redirect you to the payment form.
") + ); } - }).fail(function(message, data){ - self.error(_t('Server Error'), - _t("We are not able to redirect you to the payment form.
") + (core.debug ? data.data.message : '')); + }).fail(function (message, data) { + self.displayError( + _t('Server Error'), + _t("We are not able to redirect you to the payment form.
") + (core.debug ? data.data.message : '') + ); }); } - else - { + else { // we append the form to the body and send it. - this.error(_t("Cannot set-up the payment"), _t("We're unable to process your payment.
")); + this.displayError( + _t("Cannot set-up the payment"), + _t("We're unable to process your payment.
") + ); } } - // if the user is using an old payment - else { - // then we just submit the form + else { // if the user is using an old payment then we just submit the form form.submit(); } } else { - this.error(_t('No payment method selected'), - _t('Please select a payment method.
')); + this.displayError( + _t('No payment method selected'), + _t('Please select a payment method.
') + ); } }, // event handler when clicking on the button to add a new payment method - addPmEvent: function(ev) { + addPmEvent: function (ev) { ev.stopPropagation(); ev.preventDefault(); - var form = this.el; var checked_radio = this.$('input[type="radio"]:checked'); var self = this; var button = ev.target; // we check if the user has selected a 'add a new payment' option - if(checked_radio.length == 1 && this.isNewPaymentRadio(checked_radio[0])) { + if (checked_radio.length === 1 && this.isNewPaymentRadio(checked_radio[0])) { // we retrieve which acquirer is used checked_radio = checked_radio[0]; var acquirer_id = this.getAcquirerIdFromRadio(checked_radio); @@ -177,8 +194,8 @@ odoo.define('payment.payment_form', function (require){ var ds = $('input[name="data_set"]', acquirer_form)[0]; var empty_inputs = false; - inputs_form.toArray().forEach(function(element) { - if(element.dataset.isRequired) { + inputs_form.toArray().forEach(function (element) { + if (element.dataset.isRequired) { if (element.value.length === 0) { $(element).closest('div.form-group').addClass('has-error'); } @@ -189,8 +206,11 @@ odoo.define('payment.payment_form', function (require){ } }); - if(empty_inputs) { - this.error(_t('Missing values'), _t('Please fill all the inputs required.
')); + if (empty_inputs) { + this.displayError( + _t('Missing values'), + _t('Please fill all the inputs required.
') + ); return; } // We add a 'processing' icon into the 'add a new payment' button @@ -201,18 +221,18 @@ odoo.define('payment.payment_form', function (require){ form_data.verify_validity = true; // do the call to the route stored in the 'data_set' input of the acquirer form, the data must be called 'create-route' - ajax.jsonRpc(ds.dataset.createRoute, 'call', form_data).then(function(data) { + ajax.jsonRpc(ds.dataset.createRoute, 'call', form_data).then( function (data) { // if the server has returned true - if(data.result) { + if (data.result) { // and it need a 3DS authentication - if(data['3d_secure'] !== false) { + if (data['3d_secure'] !== false) { // then we display the 3DS page to the user $("body").html(data['3d_secure']); } // if it doesn't require 3DS else { // we just go to the return_url or reload the page - if(form_data.return_url) { + if (form_data.return_url) { window.location = form_data.return_url; } else { @@ -222,24 +242,30 @@ odoo.define('payment.payment_form', function (require){ } // if the server has returned false, we display an error else { - self.error(_t('Server Error'), - _t("We are not able to add your payment method at the moment.
")); + self.displayError( + _t('Server Error'), + _t("We are not able to add your payment method at the moment.
") + ); } // here we remove the 'processing' icon from the 'add a new payment' button $(button).attr('disabled', false); $(button).find('span.o_loader').remove(); - }).fail(function(message, data) { + }).fail(function (message, data) { // if the rpc fails, pretty obvious $(button).attr('disabled', false); $(button).find('span.o_loader').remove(); - self.error(_t('Server error'), - _t("We are not able to add your payment method at the moment.
") + (core.debug ? data.data.message : '')); + self.displayError( + _t('Server error'), + _t("We are not able to add your payment method at the moment.
") + (core.debug ? data.data.message : '') + ); }); } else { - this.error(_t('No payment method selected'), - _t('Please select the option to add a new payment method.
')); + this.displayError( + _t('No payment method selected'), + _t('Please select the option to add a new payment method.
') + ); } }, // event handler when clicking on a button to delete a payment method @@ -249,19 +275,21 @@ odoo.define('payment.payment_form', function (require){ var self = this; var pm_id = parseInt(ev.target.value); - var Delete = function() { + var tokenDelete = function () { rpc.query({ model: 'payment.token', method: 'unlink', args: [pm_id], }) - .then(function(result){ - if(result === true) { + .then(function (result) { + if ( result === true) { ev.target.closest('div').remove(); } - },function(type,err){ - self.error(_t('Server Error'), - _t("We are not able to delete your payment method at the moment.
")); + }, function () { + self.displayError( + _t('Server Error'), + _t("We are not able to delete your payment method at the moment.
") + ); }); }; @@ -269,73 +297,70 @@ odoo.define('payment.payment_form', function (require){ model: 'payment.token', method: 'get_linked_records', args: [pm_id], - }).then(function(result){ - if(result[pm_id].length > 0) { + }).then(function (result) { + if (result[pm_id].length > 0) { // if there's records linked to this payment method var content = ''; - result[pm_id].forEach(function(sub) { + result[pm_id].forEach(function (sub) { content += '' + _.str.escapeHTML(sub.name) + '
'; }); content = $('This card is currently linked to the following records:
') + content); - // Then we display the list of the records and ask the user if he really want to remove the ppayment method. + // Then we display the list of the records and ask the user if he really want to remove the payment method. new Dialog(self, { title: _t('Warning!'), size: 'medium', $content: content, buttons: [ - {text: _t('Confirm Deletion'), classes: 'btn-primary', close: true, click: Delete}, - {text: _t('Cancel'), close: true}]}).open(); + {text: _t('Confirm Deletion'), classes: 'btn-primary', close: true, click: tokenDelete}, + {text: _t('Cancel'), close: true}] + }).open(); } else { // if there's no records linked to this payment method, then we delete it - Delete(); + tokenDelete(); } - }, function(type, err){ - self.error(_t('Server Error'), - _t("We are not able to delete your payment method at the moment.
") + (core.debug ? err.data.message : '')); + }, function (type, err) { + self.displayError( + _t('Server Error'), + _t("We are not able to delete your payment method at the moment.
") + (core.debug ? err.data.message : '') + ); }); }, // event handler when clicking on a radio button - radioClickEvent: function(ev) { + radioClickEvent: function (ev) { this.updateNewPaymentDisplayStatus(); }, - updateNewPaymentDisplayStatus: function() + updateNewPaymentDisplayStatus: function () { var checked_radio = this.$('input[type="radio"]:checked'); // we hide all the acquirers form this.$('[id*="o_payment_add_token_acq_"]').addClass('hidden'); this.$('[id*="o_payment_form_acq_"]').addClass('hidden'); - if(checked_radio.length != 1) { + if (checked_radio.length !== 1) { return; } checked_radio = checked_radio[0]; - // if we clicked on an add new payment radio - if(this.isNewPaymentRadio(checked_radio)) - { - // then we retrieve the acquirer name - var acquirer_id = this.getAcquirerIdFromRadio(checked_radio); - // and display its form + var acquirer_id = this.getAcquirerIdFromRadio(checked_radio); + + // if we clicked on an add new payment radio, display its form + if (this.isNewPaymentRadio(checked_radio)) { this.$('#o_payment_add_token_acq_' + acquirer_id).removeClass('hidden'); } - else if(this.isFormPaymentRadio(checked_radio)) - { - // then we retrieve the acquirer name - var acquirer_id = this.getAcquirerIdFromRadio(checked_radio); - // and display its form + else if (this.isFormPaymentRadio(checked_radio)) { this.$('#o_payment_form_acq_' + acquirer_id).removeClass('hidden'); } }, - isNewPaymentRadio: function(element) { + isNewPaymentRadio: function (element) { return $(element).data('s2s-payment') === 'True'; }, - isFormPaymentRadio: function(element) { + isFormPaymentRadio: function (element) { return $(element).data('form-payment') === 'True'; }, - getAcquirerIdFromRadio: function(element) { + getAcquirerIdFromRadio: function (element) { return $(element).data('acquirer-id'); }, - error: function(title, message, url) { + displayError: function (title, message) { return new Dialog(null, { title: _t('Error: ') + title, size: 'medium', @@ -343,20 +368,15 @@ odoo.define('payment.payment_form', function (require){ buttons: [ {text: _t('Ok'), close: true}]}).open(); }, - getFormData: function($form){ + getFormData: function ($form) { var unindexed_array = $form.serializeArray(); var indexed_array = {}; - $.map(unindexed_array, function(n, i){ + $.map(unindexed_array, function (n, i) { indexed_array[n.name] = n.value; }); return indexed_array; }, - start: function() { - this.updateNewPaymentDisplayStatus(); - $('[data-toggle="tooltip"]').tooltip(); - - }, });