[IMP] website: introduce cookies bar on website

With this commit, it is now possible to activate a cookies bar on a
website through the res.settings.

The cookies bar can be edited in the frontend by entering edit mode.

The cookies bar will appear until the user clicks on 'I agree'.

Part of https://github.com/odoo/odoo/pull/41294
task-2087003

closes odoo/odoo#41294

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

3 files changed, 10 insertions, 6 deletions

diff --git a/addons/website/static/src/snippets/s_popup/000.js b/addons/website/static/src/snippets/s_popup/000.js
index 0e7983002f0..16820dcc988 100644
--- a/addons/website/static/src/snippets/s_popup/000.js
+++ b/addons/website/static/src/snippets/s_popup/000.js
@@ -8,14 +8,14 @@ const utils = require('web.utils');
 const PopupWidget = publicWidget.Widget.extend({
     selector: '.s_popup',
     events: {
-        'click .s_popup_close': '_onCloseClick',
+        'click .js_close_popup': '_onCloseClick',
     },
 
     /**
      * @override
      */
     start: function () {
-        if (!utils.get_cookie(this.$target.attr('id'))) {
+        if (!utils.get_cookie(this.$el.attr('id'))) {
             this._bindPopup();
         }
         return this._super(...arguments);
@@ -77,8 +77,8 @@ const PopupWidget = publicWidget.Widget.extend({
      * @private
      */
     _onCloseClick: function () {
-        const nbDays = this.$target.find('.s_popup_main').data('consentsDelay');
-        utils.set_cookie(this.$target.attr('id'), true, nbDays * 24 * 60 * 60);
+        const nbDays = this.$el.find('.s_popup_main').data('consentsDuration');
+        utils.set_cookie(this.$el.attr('id'), true, nbDays * 24 * 60 * 60);
         this._hidePopup();
     },
 });
diff --git a/addons/website/static/src/snippets/s_popup/000.scss b/addons/website/static/src/snippets/s_popup/000.scss
index bb14c100322..71566512868 100644
--- a/addons/website/static/src/snippets/s_popup/000.scss
+++ b/addons/website/static/src/snippets/s_popup/000.scss
@@ -1,7 +1,8 @@
 // s_popup
 .s_popup_main {
     .s_popup_content {
-        min-height: var(--o-we-toolbar-height);
+        // keep lower than <p> height (cookies bar)
+        min-height: $o-font-size-base * $o-line-height-base;
         box-shadow: $modal-content-box-shadow-sm-up;
         .container {
             // keep margin when fixed bottom
diff --git a/addons/website/static/src/snippets/s_popup/options.js b/addons/website/static/src/snippets/s_popup/options.js
index 4c43041c614..842cc284c83 100644
--- a/addons/website/static/src/snippets/s_popup/options.js
+++ b/addons/website/static/src/snippets/s_popup/options.js
@@ -8,7 +8,10 @@ options.registry.SnippetPopup = options.Class.extend({
      * @override
      */
     start: function () {
-        this.$target.find('.s_popup_close').on('click', () => {
+        // Note: the link are excluded here so that internal modal buttons do
+        // not close the popup as we want to allow edition of those buttons.
+        this.$target.find('.js_close_popup:not(a, .btn)').on('click', ev => {
+            ev.stopPropagation();
             this.onTargetHide();
             this.trigger_up('snippet_option_visibility_update', {show: false});
         });