[IMP] payment_*: payment acquirers error handling

This commit aims to improve the user experience when using payment acquirers. There currently are no error feedback with some acquirers, which leaves the user wondering what is going on and what is the real status of its payment.
In some cases, the user is currently being redirected to the home page even though the payment has failed. We want to make it more obvious to the user that something unexpected has happened by redirecting to an intermediate page that will provide good feedback on payments status.

Another goal of this commit is to order acquirers by sequence instead of by flow and to select the first acquirer by default. This feature was already implmented in commit fe294fd43e521bd2d339e962f43acf46c3d4cb97, some UI adaptations were needed though.

Related to task #36680
Closes #26958

1 files changed, 125 insertions, 0 deletions

diff --git a/addons/payment/static/src/js/payment_processing.js b/addons/payment/static/src/js/payment_processing.js
new file mode 100644
index 00000000000..b40c2074131
--- /dev/null
+++ b/addons/payment/static/src/js/payment_processing.js
@@ -0,0 +1,125 @@
+odoo.define('payment.processing', function (require) {
+    'use strict';
+
+    var Widget = require('web.Widget');
+    var Ajax = require('web.ajax');
+    var Core = require('web.core');
+    var Qweb = Core.qweb;
+    var _t = Core._t;
+
+    $.blockUI.defaults.css.border = '0';
+    $.blockUI.defaults.css["background-color"] = '';
+    $.blockUI.defaults.overlayCSS["opacity"] = '0.9';
+
+    return Widget.extend({
+        /* Members */
+        _payment_tx_ids: null,
+        _pollCount: 0,
+        /* Events */
+        events: {
+
+        },
+        /* deps */
+        xmlDependencies: ['/payment/static/src/xml/payment_processing.xml'],
+        /* Widget overrides */
+        init: function (parent, payment_tx_ids) {
+            this._super.apply(this, arguments);
+            //
+            this._payment_tx_ids = payment_tx_ids;
+        },
+        start: function() {
+            this.displayLoading();
+            this.poll();
+            return this._super.apply(this, arguments);
+        },
+        /* Methods */
+        startPolling: function () {
+            var timeout = 3000;
+            //
+            if(this._pollCount >= 10 && this._pollCount < 20) {
+                timeout = 10000;
+            }
+            else if(this._pollCount >= 20) {
+                timeout = 30000;
+            }
+            //
+            setTimeout(this.poll.bind(this), timeout);
+            this._pollCount ++;
+        },
+        poll: function () {
+            var self = this;
+            Ajax.jsonRpc('/payment/process/poll', 'call', {}).then(function(data) {
+                if(data.success === true) {
+                    self.processPolledData(data.transactions);
+                }
+                else {
+                    switch(data.error) {
+                    case "no_tx_found":
+                        self.displayContent("payment.no_tx_found", {});
+                        break;
+                    default: // if an exception is raised
+                        self.displayContent("payment.exception", {exception_msg: data.error});
+                        break;
+                    }
+                }
+                self.startPolling();
+            }).always(function(){
+                if ($.blockUI) {
+                    $.unblockUI();
+                }
+            }).fail(function(e) {
+                self.displayContent("payment.rpc_error", {});
+                self.startPolling();
+            });
+        },
+        processPolledData: function (transactions) {
+            var render_values = {
+                'tx_draft': [],
+                'tx_pending': [],
+                'tx_authorized': [],
+                'tx_done': [],
+                'tx_cancel': [],
+                'tx_error': [],
+            };
+            // group the transaction according to their state
+            transactions.forEach(tx => {
+                var key = 'tx_' + tx.state;
+                if(key in render_values) {
+                    render_values[key].push(tx);
+                }
+            });
+
+            function countTxInState(states) {
+                var nbTx = 0;
+                for (var prop in render_values) {
+                    if (states.indexOf(prop) > -1 && render_values.hasOwnProperty(prop)) {
+                        nbTx += render_values[prop].length;
+                    }
+                }
+                return nbTx;
+            }
+            // if there's only one tx to manage
+            if(countTxInState(['tx_done', 'tx_error']) === 1) {
+                var tx = render_values['tx_done'][0] || render_values['tx_error'][0];
+                if (tx) {
+                    window.location = tx.return_url;
+                    return;
+                }
+            }
+
+            this.displayContent("payment.display_tx_list", render_values);
+        },
+        displayContent: function (xmlid, render_values) {
+            var html = Qweb.render(xmlid, render_values);
+            this.$el.find('.o_payment_processing_content').html(html);
+        },
+        displayLoading: function () {
+            var msg = _t("We are processing your payments, please wait ...");
+            $.blockUI({
+                'message': '<h2 class="text-white"><img src="/web/static/src/img/spin.png" class="fa-pulse"/>' +
+                    '    <br />' + msg +
+                    '</h2>'
+            });
+        },
+    });
+});