[CLN] payment: lint newly-introduced payment form

This commit performs just some linting in order to ease code reading and
prepare future updates.

 * extract duplicate variable computation;
 * link spaces and indentation;
 * light renaming to ease code understanding;

1 files changed, 131 insertions, 111 deletions

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('<p>Please fill all the inputs required.</p>'));
+                    if (empty_inputs) {
+                        this.displayError(
+                            _t('Missing values'),
+                            _t('<p>Please fill all the inputs required.</p>')
+                        );
                         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("<p>We are not able to add your payment method at the moment.</p>"));
                         }
                         // 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("<p>We are not able to add your payment method at the moment.</p>") + (core.debug ? data.data.message : ''));
+                        self.displayError(
+                            _t('Server Error'),
+                            _t("<p>We are not able to add your payment method at the moment.</p>") + (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("<p>We are not able to redirect you to the payment form.</p>"));
+                                self.displayError(
+                                    _t('Server Error'),
+                                    _t("<p>We are not able to redirect you to the payment form.</p>")
+                                );
                             }
-                        }).fail(function(message, data){
-                            self.error(_t('Server Error'),
-                            _t("<p>We are not able to redirect you to the payment form.</p>") + (core.debug ? data.data.message : ''));
+                        }).fail(function (message, data) {
+                            self.displayError(
+                                _t('Server Error'),
+                                _t("<p>We are not able to redirect you to the payment form.</p>") + (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("<p>We're unable to process your payment.</p>"));
+                        this.displayError(
+                            _t("Cannot set-up the payment"),
+                            _t("<p>We're unable to process your payment.</p>")
+                        );
                     }
                 }
-                // 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('<p>Please select a payment method.</p>'));
+                this.displayError(
+                    _t('No payment method selected'),
+                    _t('<p>Please select a payment method.</p>')
+                );
             }
         },
         // 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('<p>Please fill all the inputs required.</p>'));
+                if (empty_inputs) {
+                    this.displayError(
+                        _t('Missing values'),
+                        _t('<p>Please fill all the inputs required.</p>')
+                    );
                     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("<p>We are not able to add your payment method at the moment.</p>"));
+                        self.displayError(
+                            _t('Server Error'),
+                            _t("<p>We are not able to add your payment method at the moment.</p>")
+                        );
                     }
                     // 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("<p>We are not able to add your payment method at the moment.</p>") + (core.debug ? data.data.message : ''));
+                    self.displayError(
+                        _t('Server error'),
+                        _t("<p>We are not able to add your payment method at the moment.</p>") + (core.debug ? data.data.message : '')
+                    );
                 });
             }
             else {
-                this.error(_t('No payment method selected'),
-                    _t('<p>Please select the option to add a new payment method.</p>'));
+                this.displayError(
+                    _t('No payment method selected'),
+                    _t('<p>Please select the option to add a new payment method.</p>')
+                );
             }
         },
         // 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("<p>We are not able to delete your payment method at the moment.</p>"));
+                    }, function () {
+                        self.displayError(
+                            _t('Server Error'),
+                            _t("<p>We are not able to delete your payment method at the moment.</p>")
+                        );
                     });
             };
 
@@ -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 += '<p><a href="' + sub.url + '" title="' + _.str.escapeHTML(sub.description) + '">' + _.str.escapeHTML(sub.name) + '</a><p/>';
                     });
 
                     content = $('<div>').html(_t('<p>This card is currently linked to the following records:<p/>') + 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("<p>We are not able to delete your payment method at the moment.</p>") + (core.debug ? err.data.message : ''));
+            }, function (type, err) {
+                self.displayError(
+                    _t('Server Error'),
+                    _t("<p>We are not able to delete your payment method at the moment.</p>") + (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();
-
-        },
     });