From 6007264afb83dcfed1693d72179cb156ff2254b6 Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Fri, 21 Oct 2022 12:50:39 +0000
Subject: [PATCH] [FIX] website: put the popups shared on all pages in a
 separate section

Before this commit, when a popup was created and the user wanted to have
this popup on all the pages of his site, the popup was moved to the
footer. Unfortunately, this caused a lot of problems:
1) We had to disable the effects on the footer when the popup opened, so
that the popup would not block the page when the footer had a slideout
effect (see original commit).
2) The popup shared on all pages was attached to a footer template so
that if after setting the popup, the user changed the footer template,
he lost his popup.
3) Putting the popup in the footer led to an important limitation which
is that it was impossible to have a popup shared on all pages on a page
where the footer is voluntarily hidden (via the page visibility option).

This commit fixes all these problems by adding a shared section
dedicated to the shared popup on all pages.

Related to opw-2971181

X-original-commit: 0f131160097deb0693d7bdb4adc43fd69ea49c09
Part-of: odoo/odoo#107387
---
 addons/website/static/src/scss/website.scss          | 12 ++++++++++++
 .../website/static/src/snippets/s_popup/options.js   | 11 ++++++-----
 addons/website/views/snippets/s_popup.xml            |  4 ++--
 addons/website/views/website_templates.xml           |  7 +++++++
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index ebb756d1a47..ffeac83c761 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -206,6 +206,18 @@ $-seen-urls: ();
     }
 }
 
+// We don't want the area to be visible in edit mode when we edit the popup that
+// is shared on all pages, otherwise the .o_editable area has a minimum height
+// when it is focused.
+#o_shared_blocks {
+    min-height: 0px;
+    height: 0px;
+
+    &:empty {
+        display: none;
+    }
+}
+
 .navbar {
 
     .navbar-collapse {
diff --git a/addons/website/static/src/snippets/s_popup/options.js b/addons/website/static/src/snippets/s_popup/options.js
index 867de61bedc..277c510054a 100644
--- a/addons/website/static/src/snippets/s_popup/options.js
+++ b/addons/website/static/src/snippets/s_popup/options.js
@@ -95,14 +95,15 @@ options.registry.SnippetPopup = options.Class.extend({
     //--------------------------------------------------------------------------
 
     /**
-     * Moves the snippet in footer to be common to all pages
-     * or inside wrap to be on one page only
+     * Moves the snippet in #o_shared_blocks to be common to all pages or inside
+     * the first editable oe_structure in the main to be on current page only.
      *
      * @see this.selectClass for parameters
      */
     moveBlock: function (previewMode, widgetValue, params) {
-        const containerEl = this.$target[0].ownerDocument.querySelector(widgetValue === 'moveToFooter' ? 'footer' : 'main');
-        const whereEl = $(containerEl).find('.oe_structure:o_editable')[0];
+        const selector = widgetValue === 'allPages' ?
+            '#o_shared_blocks' : 'main .oe_structure:o_editable';
+        const whereEl = $(this.$target[0].ownerDocument).find(selector)[0];
         const popupEl = this.$target[0].closest('.s_popup');
         whereEl.prepend(popupEl);
     },
@@ -132,7 +133,7 @@ options.registry.SnippetPopup = options.Class.extend({
     _computeWidgetState: function (methodName, params) {
         switch (methodName) {
             case 'moveBlock':
-                return this.$target.closest('footer').length ? 'moveToFooter' : 'moveToBody';
+                return this.$target[0].closest('#o_shared_blocks') ? 'allPages' : 'currentPage';
         }
         return this._super(...arguments);
     },
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
index 56d428b66cb..73215922fdf 100644
--- a/addons/website/views/snippets/s_popup.xml
+++ b/addons/website/views/snippets/s_popup.xml
@@ -58,8 +58,8 @@
             <t t-set="unit_popup_duration">days</t>
             <we-input string="Hide For" title="Once the user closes the popup, it won't be shown again for that period of time." t-attf-data-select-data-attribute="7#{unit_popup_duration}" data-attribute-name="consentsDuration" t-att-data-unit="unit_popup_duration"/>
             <we-select string="Show on" data-no-preview="true">
-                <we-button data-move-block="moveToBody">This page</we-button>
-                <we-button data-move-block="moveToFooter">All pages</we-button>
+                <we-button data-move-block="currentPage">This page</we-button>
+                <we-button data-move-block="allPages">All pages</we-button>
             </we-select>
         </t>
         <div data-js="SnippetPopup"
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 52d906864bf..759f705bf1c 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1433,6 +1433,13 @@
     </xpath>
 </template>
 
+<!-- Area for blocks shared by all pages (e.g. all pages popups) -->
+<template id="shared_blocks" inherit_id="website.layout" name="Shared blocks">
+    <xpath expr="//main" position="inside">
+        <div id="o_shared_blocks" class="oe_unremovable"/>
+    </xpath>
+</template>
+
 <!-- Footer templates -->
 <template id="footer_custom" inherit_id="website.layout" name="Default" active="True">
     <xpath expr="//div[@id='footer']" position="replace">