[IMP] account, portal, web, website: move chatter below invoice

No more modal because it's not visible and less handy. Use same behavior as
sales order portal.

Adapt the invoice style to properly adapt and align with the chatter block.

Part of task-37264

closes odoo/odoo#34360

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>


Co-authored-by: Pratima Gupta <pgu@odoo.com>
Co-authored-by: Sébastien Theys <seb@odoo.com>

8 files changed, 51 insertions, 40 deletions

diff --git a/addons/account/static/src/js/account_portal_sidebar.js b/addons/account/static/src/js/account_portal_sidebar.js
index ded90bb968e..0b48c0a9647 100644
--- a/addons/account/static/src/js/account_portal_sidebar.js
+++ b/addons/account/static/src/js/account_portal_sidebar.js
@@ -3,6 +3,7 @@ odoo.define('account.AccountPortalSidebar', function (require) {
 
 var publicWidget = require('web.public.widget');
 var PortalSidebar = require('portal.PortalSidebar');
+var utils = require('web.utils');
 
 publicWidget.registry.AccountPortalSidebar = PortalSidebar.extend({
     selector: '.o_portal_invoice_sidebar',
@@ -47,6 +48,16 @@ publicWidget.registry.AccountPortalSidebar = PortalSidebar.extend({
         // Set it to 0 first to handle the case where scrollHeight is too big for its content.
         $el.height(0);
         $el.height($wrapwrap[0].scrollHeight);
+
+        // scroll to the right place after iframe resize
+        if (!utils.isValidAnchor(window.location.hash)) {
+            return;
+        }
+        var $target = $(window.location.hash);
+        if (!$target.length) {
+            return;
+        }
+        $('html, body').scrollTop($target.offset().top);
     },
     /**
      * @private
diff --git a/addons/account/views/account_portal_templates.xml b/addons/account/views/account_portal_templates.xml
index ace31556b58..25cd8c84e34 100644
--- a/addons/account/views/account_portal_templates.xml
+++ b/addons/account/views/account_portal_templates.xml
@@ -113,7 +113,7 @@
                                     </div>
                                     <div class="col pl-0">
                                         <span t-field="invoice.invoice_user_id" t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
-                                        <a data-toggle="modal" href="#" data-target="#invoice_chatter" class="small"><i class="fa fa-fw fa-comments"/><b>Send message</b></a>
+                                        <a href="#discussion" class="small"><i class="fa fa-fw fa-comments"/><b>Send message</b></a>
                                     </div>
                                 </div>
                             </li>
@@ -122,40 +122,22 @@
                 </t>
 
                 <!-- Page Content -->
-                <div id="invoice_content" class="o_portal_page_content col-12 col-lg d-flex flex-column align-items-end">
-                    <div class="o_portal_page_size">
-                        <t t-if="error or warning" t-call="account.portal_invoice_error"/>
-                        <t t-if="success and (not error and not warning)" t-call="account.portal_invoice_success"/>
+                <div id="invoice_content" class="col-12 col-lg">
+                    <t t-if="error or warning" t-call="account.portal_invoice_error"/>
+                    <t t-if="success and (not error and not warning)" t-call="account.portal_invoice_success"/>
 
-                        <div class="o_portal_html_view shadow">
-                            <div class="o_portal_html_loader text-center">
-                                <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw text-black-50"></i>
-                            </div>
-                            <iframe id="invoice_html" class="mt8 mb8" width="100%" height="100%" frameborder="0" scrolling="no" t-att-src="invoice.get_portal_url(report_type='html')"/>
+                    <div class="o_portal_html_view shadow p-3">
+                        <div class="o_portal_html_loader text-center">
+                            <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw text-black-50"></i>
                         </div>
+                        <iframe id="invoice_html" class="mt8 mb8" width="100%" height="100%" frameborder="0" scrolling="no" t-att-src="invoice.get_portal_url(report_type='html')"/>
                     </div>
-                </div>
-            </div>
-        </xpath>
-    </template>
-
-    <template id="portal_invoice_chatter" name="Allow Comments &amp; History" inherit_id="account.portal_invoice_page">
-        <xpath expr="//div[@id='invoice_content']//div[hasclass('o_portal_html_view')]" position="after">
-            <div class="modal fade" id="invoice_chatter" role="dialog">
-                <div class="modal-dialog">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h3 class="mt0 ml16 mb0">History</h3>
-                            <button type="button" class="close" data-dismiss="modal">&amp;times;</button>
-                        </div>
-                        <div class="modal-body">
-                            <t t-call="portal.message_thread">
-                                <t t-set="token" t-value="invoice.access_token"/>
-                                <t t-set="object" t-value="invoice"/>
-                                <t t-set="pid" t-value="pid"/>
-                                <t t-set="hash" t-value="hash"/>
-                            </t>
-                        </div>
+                    <!-- chatter -->
+                    <div id="invoice_communication" class="mt-4">
+                        <h2>History</h2>
+                        <t t-call="portal.message_thread">
+                            <t t-set="object" t-value="invoice"/>
+                        </t>
                     </div>
                 </div>
             </div>
diff --git a/addons/portal/controllers/portal.py b/addons/portal/controllers/portal.py
index 581f2351e7d..5991b6bdc01 100644
--- a/addons/portal/controllers/portal.py
+++ b/addons/portal/controllers/portal.py
@@ -258,6 +258,7 @@ class CustomerPortal(Controller):
             # if no_breadcrumbs = False -> force breadcrumbs even if access_token to `invite` users to register if they click on it
             values['no_breadcrumbs'] = no_breadcrumbs
             values['access_token'] = access_token
+            values['token'] = access_token  # for portal chatter
 
         # Those are used notably whenever the payment form is implied in the portal.
         if kwargs.get('error'):
diff --git a/addons/portal/static/src/js/portal_chatter.js b/addons/portal/static/src/js/portal_chatter.js
index 56a833a03a7..9ef2e6e6c2a 100644
--- a/addons/portal/static/src/js/portal_chatter.js
+++ b/addons/portal/static/src/js/portal_chatter.js
@@ -304,10 +304,16 @@ publicWidget.registry.portalChatter = publicWidget.Widget.extend({
      * @override
      */
     start: function () {
+        var self = this;
         var defs = [this._super.apply(this, arguments)];
         var chatter = new PortalChatter(this, this.$el.data());
         defs.push(chatter.appendTo(this.$el));
-        return Promise.all(defs);
+        return Promise.all(defs).then(function () {
+            // scroll to the right place after chatter loaded
+            if (window.location.hash === '#' + self.$el.attr('id')) {
+                $('html, body').scrollTop(self.$el.offset().top);
+            }
+        });
     },
 });
 
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index 001b2b3da33..055fa1405c3 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -484,11 +484,6 @@ form label {
         }
     }
 
-    .o_portal_page_size {
-        width: 100%;
-        max-width: 210mm; // A4 page's width
-    }
-
     .o_portal_html_view {
         overflow: hidden;
         background: white;
diff --git a/addons/web/static/src/js/core/utils.js b/addons/web/static/src/js/core/utils.js
index 44e17324b85..e3911752aaa 100644
--- a/addons/web/static/src/js/core/utils.js
+++ b/addons/web/static/src/js/core/utils.js
@@ -440,6 +440,18 @@ var utils = {
         return (/^\d+(\.\d*)? [^0-9]+$/).test(v);
     },
     /**
+     * Returns whether the given anchor is valid.
+     *
+     * This test is useful to prevent a crash that would happen if using an invalid
+     * anchor as a selector.
+     *
+     * @param {string} anchor
+     * @returns {boolean}
+     */
+    isValidAnchor: function (anchor) {
+        return /^#[\w-]+$/.test(anchor);
+    },
+    /**
      * @param {any} node
      * @param {any} human_readable
      * @param {any} indent
diff --git a/addons/web/static/src/js/report/report.js b/addons/web/static/src/js/report/report.js
index b696b48571d..daf50c0ef46 100644
--- a/addons/web/static/src/js/report/report.js
+++ b/addons/web/static/src/js/report/report.js
@@ -8,7 +8,10 @@ if (window.self === window.top) {
     return;
 }
 
-$(document.body).addClass('o_in_iframe'); //  in order to apply css rules
+$(document.body)
+    .addClass('o_in_iframe')
+    .addClass('container-fluid')
+    .removeClass('container');
 
 var web_base_url = $('html').attr('web-base-url');
 var trusted_host = utils.get_host_from_url(web_base_url);
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index ab7f4218a5b..681f6719354 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -10,6 +10,7 @@ var core = require('web.core');
 var mixins = require('web.mixins');
 var utils = require('web.utils');
 var publicWidget = require('web.public.widget');
+var utils = require('web.utils');
 
 var qweb = core.qweb;
 
@@ -1018,7 +1019,7 @@ registry.anchorSlide = publicWidget.Widget.extend({
             return;
         }
         var hash = this.$target[0].hash;
-        if (!/^#[\w-]+$/.test(hash)) {
+        if (!utils.isValidAnchor(hash)) {
             return;
         }
         var $anchor = $(hash);