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

2 files changed, 97 insertions, 2 deletions

diff --git a/addons/website/static/src/js/backend/res_config_settings.js b/addons/website/static/src/js/backend/res_config_settings.js
index 47a52579447..ad9373d26f1 100644
--- a/addons/website/static/src/js/backend/res_config_settings.js
+++ b/addons/website/static/src/js/backend/res_config_settings.js
@@ -1,7 +1,14 @@
 odoo.define('website.settings', function (require) {
 
-var BaseSettingController = require('base.settings').Controller;
-var FormController = require('web.FormController');
+const BaseSettingController = require('base.settings').Controller;
+const core = require('web.core');
+const Dialog = require('web.Dialog');
+const FieldBoolean = require('web.basic_fields').FieldBoolean;
+const fieldRegistry = require('web.field_registry');
+const FormController = require('web.FormController');
+
+const QWeb = core.qweb;
+const _t = core._t;
 
 BaseSettingController.include({
 
@@ -33,4 +40,34 @@ BaseSettingController.include({
     },
 });
 
+const WebsiteCookiesbarField = FieldBoolean.extend({
+    xmlDependencies: ['/website/static/src/xml/website.res_config_settings.xml'],
+
+    _onChange: function () {
+        const checked = this.$input[0].checked;
+        if (!checked) {
+            return this._setValue(checked);
+        }
+
+        const cancelCallback = () => this.$input[0].checked = !checked;
+        Dialog.confirm(this, null, {
+            title: _t("Please confirm"),
+            $content: QWeb.render('website.res_config_settings.cookies_modal_main'),
+            buttons: [{
+                text: 'Do not activate',
+                classes: 'btn-primary',
+                close: true,
+                click: cancelCallback,
+            },
+            {
+                text: 'Activate anyway',
+                close: true,
+                click: () => this._setValue(checked),
+            }],
+            cancel_callback: cancelCallback,
+        });
+    },
+});
+
+fieldRegistry.add('website_cookiesbar_field', WebsiteCookiesbarField);
 });
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 9765bc57473..0ef07ccc12e 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1,6 +1,7 @@
 odoo.define('website.editor.snippets.options', function (require) {
 'use strict';
 
+require('website.s_popup_options');
 var core = require('web.core');
 var Dialog = require('web.Dialog');
 const wUtils = require('website.utils');
@@ -913,6 +914,63 @@ options.registry.anchor = options.Class.extend({
     },
 });
 
+options.registry.CookiesBar = options.registry.SnippetPopup.extend({
+    xmlDependencies: (options.registry.SnippetPopup.prototype.xmlDependencies || []).concat(
+        ['/website/static/src/xml/website.cookies_bar.xml']
+    ),
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Change the cookies bar layout.
+     *
+     * @see this.selectClass for parameters
+     */
+    selectLayout: function (previewMode, widgetValue, params) {
+        let websiteId;
+        this.trigger_up('context_get', {
+            callback: function (ctx) {
+                websiteId = ctx['website_id'];
+            },
+        });
+
+        const $template = $(qweb.render(`website.cookies_bar.${widgetValue}`, {
+            websiteId: websiteId,
+        }));
+
+        const $content = this.$target.find('.s_popup_content');
+        const selectorsToKeep = [
+            '.o_cookies_bar_text_button',
+            '.o_cookies_bar_text_policy',
+            '.o_cookies_bar_text_title',
+            '.o_cookies_bar_text_primary',
+            '.o_cookies_bar_text_secondary',
+        ];
+
+        if (this.$savedSelectors === undefined) {
+            this.$savedSelectors = [];
+        }
+
+        for (const selector of selectorsToKeep) {
+            const $currentLayoutEls = $content.find(selector).contents();
+            const $newLayoutEl = $template.find(selector);
+            if ($currentLayoutEls.length) {
+                // save value before change, eg 'title' is not inside 'discrete' template
+                // but we want to preserve it in case of select another layout later
+                this.$savedSelectors[selector] = $currentLayoutEls;
+            }
+            const $savedSelector = this.$savedSelectors[selector];
+            if ($newLayoutEl.length && $savedSelector && $savedSelector.length) {
+                $newLayoutEl.empty().append($savedSelector);
+            }
+        }
+
+        $content.empty().append($template);
+    },
+});
+
 /**
  * Allows edition of 'cover_properties' in website models which have such
  * fields (blogs, posts, events, ...).