[REF] *: handle inline scripts preparing for frontend JS lazy loading

* payment, im_livechat

Inline scripts using `odoo.define` cannot work anymore as the boot.js
file loading will be deferred.
Most of features which used an inline script should probably be entirely
refactored. This commit focuses on removing the inline scripts
with a minimal diff (or at least tried to).

Note: for the website livechat, the inline script was kept as it seems
to be a longer refactoring to get rid of it (even though it is clearly
possible). The inline script was however adapted to make sure it works
with lazy loaded JS in the frontend.

Part of https://github.com/odoo/odoo/pull/32181
task-1961045

3 files changed, 14 insertions, 35 deletions

diff --git a/addons/im_livechat/views/im_livechat_channel_templates.xml b/addons/im_livechat/views/im_livechat_channel_templates.xml
index 130e9d85478..b55cc1f9f49 100644
--- a/addons/im_livechat/views/im_livechat_channel_templates.xml
+++ b/addons/im_livechat/views/im_livechat_channel_templates.xml
@@ -189,7 +189,7 @@
         <!-- the js code to initialize the LiveSupport object -->
         <template id="loader" name="Livechat : Javascript appending the livechat button">
             <t t-translation="off">
-                document.addEventListener("DOMContentLoaded", function(event) {
+                window.addEventListener('load', function () {
                     <t t-if="web_session_required">
                     odoo.define('web.session', function (require) {
                         var Session = require('web.Session');
@@ -207,7 +207,7 @@
                             "<t t-esc="info['server_url']"/>",
                             <t t-raw="json.dumps(info.get('options', {}))"/>
                         );
-                        button.appendTo($('body'));
+                        button.appendTo(document.body);
                         window.livechat_button = button;
             </t>
                     });
diff --git a/addons/payment/static/src/js/payment_processing.js b/addons/payment/static/src/js/payment_processing.js
index 0fcfbc7ce81..4bad7fcb4ef 100644
--- a/addons/payment/static/src/js/payment_processing.js
+++ b/addons/payment/static/src/js/payment_processing.js
@@ -1,32 +1,22 @@
 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;
+    var publicWidget = require('web.public.widget');
+    var ajax = require('web.ajax');
+    var core = require('web.core');
+
+    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,
+    publicWidget.registry.PaymentProcessing = publicWidget.Widget.extend({
+        selector: '.o_payment_processing',
+        xmlDependencies: ['/payment/static/src/xml/payment_processing.xml'],
+
         _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();
@@ -48,7 +38,7 @@ odoo.define('payment.processing', function (require) {
         },
         poll: function () {
             var self = this;
-            Ajax.jsonRpc('/payment/process/poll', 'call', {}).then(function(data) {
+            ajax.jsonRpc('/payment/process/poll', 'call', {}).then(function(data) {
                 if(data.success === true) {
                     self.processPolledData(data.transactions);
                 }
@@ -119,7 +109,7 @@ odoo.define('payment.processing', function (require) {
             this.displayContent("payment.display_tx_list", render_values);
         },
         displayContent: function (xmlid, render_values) {
-            var html = Qweb.render(xmlid, render_values);
+            var html = core.qweb.render(xmlid, render_values);
             this.$el.find('.o_payment_processing_content').html(html);
         },
         displayLoading: function () {
diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index 7609b913069..fdf2425d498 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -157,29 +157,18 @@
     </template>
 
     <template id="payment_process_page" name="Payment processing page">
-        <!-- If you are looking at this template and tries to understand how it works,
-            You should take a look at the file located in /static/src/js/payment_processing.js
-        -->
         <t t-call="portal.frontend_layout">
             <div class="wrap">
                 <div class="container o_website_payment">
                     <div class="o_payment_processing">
                         <div class="row">
                             <div class="o_payment_processing_content col-sm-6 col-sm-offset-3">
-                                <!-- here should be the content generated by payment_processing.js -->
+                                <!-- The content here is generated in JS -->
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <!-- We load and attach the payment processing widget -->
-            <script>
-                odoo.define('payment.processing_bootstrap', function(require) {
-                    var PaymentProcessing = require('payment.processing');
-                    var processingWidget = new PaymentProcessing(null, <t t-esc="payment_tx_ids"/>);
-                    processingWidget.attachTo($('.o_payment_processing'));
-                });
-            </script>
         </t>
     </template>
 </odoo>