[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

@@ -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 {

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);
     },

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"

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">