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

4 files changed, 55 insertions, 7 deletions

diff --git a/addons/website/views/res_config_settings_views.xml b/addons/website/views/res_config_settings_views.xml
index 6a32d2b55a7..870eb8cd59e 100644
--- a/addons/website/views/res_config_settings_views.xml
+++ b/addons/website/views/res_config_settings_views.xml
@@ -127,7 +127,18 @@
                                     </div>
                                 </div>
                             </div>
-
+                            <div class="col-12 col-lg-6 o_setting_box" id="website_cookies_bar_setting">
+                                <div class="o_setting_left_pane">
+                                    <field name="website_cookies_bar" widget="website_cookiesbar_field"/>
+                                </div>
+                                <div class="o_setting_right_pane">
+                                    <label for="website_cookies_bar"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Display a customizable cookies bar on your website.
+                                    </div>
+                                </div>
+                            </div>
                             <div class="col-12 col-lg-6 o_setting_box" id="cdn_setting" title="A CDN helps you serve your website’s content with high availability and high performance to any visitor wherever they are located." groups="base.group_no_one">
                                 <div class="o_setting_left_pane">
                                     <field name="cdn_activated"/>
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
index 3ca662e8ff6..ea0b13a1c14 100644
--- a/addons/website/views/snippets/s_popup.xml
+++ b/addons/website/views/snippets/s_popup.xml
@@ -4,10 +4,10 @@
 <template id="s_popup" name="Popup">
     <div class="s_popup o_snippet_invisible">
         <div class='modal s_popup_main popup_backdrop s_popup_center o_one_page bg-black-25 '
-             data-show-after="5000" data-display="afterDelay" data-consents-delay="7">
+             data-show-after="5000" data-display="afterDelay" data-consents-duration="7">
             <div class='modal-dialog modal-dialog-centered s_popup_frame modal-md'>
                 <div class='oe_structure modal-content s_popup_content oe_img_bg oe_custom_bg' style="background-color: #FFFFFF">
-                    <div class='s_popup_close o_we_no_overlay o_not_editable'>&amp;times;</div>
+                    <div class='js_close_popup s_popup_close o_we_no_overlay o_not_editable'>&amp;times;</div>
                     <section class="s_banner parallax pt96 pb96">
                         <span class="s_parallax_bg oe_img_bg oe_custom_bg" style="background-image: url('/web/image/website.s_banner_default_image');"></span>
                         <div class="container">
@@ -37,24 +37,27 @@
         <div data-js="SnippetPopup" data-selector=".s_popup" data-target=".s_popup_main">
             <we-select string="Position">
                 <we-button data-set-layout="modal" data-name="position_centered">Center</we-button>
-                <we-button data-set-layout="fixed">Bottom</we-button>
+                <we-button data-set-layout="fixed" data-name="position_bottom">Bottom</we-button>
             </we-select>
             <we-select string="Size" data-apply-to=".s_popup_frame">
                 <we-button data-select-class="modal-sm">Small</we-button>
-                <we-button data-select-class="modal-md">Medium</we-button>
+                <we-button data-select-class="modal-md" data-name="s_popup_size_md">Medium</we-button>
                 <we-button data-select-class="modal-lg">Large</we-button>
                 <we-button data-select-class="modal-xl">Big</we-button>
-                <we-button data-select-class="s_popup_full">Full</we-button>
+                <we-button data-select-class="s_popup_full" data-name="s_popup_size_full">Full</we-button>
             </we-select>
             <we-colorpicker string="Backdrop Color" data-select-style="true"
                 data-css-property="background-color" data-color-prefix="bg-" data-dependencies="position_centered"/>
+        </div>
+        <div data-js="SnippetPopup" data-selector=".s_popup" data-exclude="#website_cookies_bar" data-target=".s_popup_main">
             <we-colorpicker string="Text Color" data-select-style="true" data-css-property="color" data-color-prefix="text-"/>
             <we-select string="Display" data-attribute-name="display" data-attribute-default-value="always">
                 <we-button data-select-data-attribute="afterDelay" data-name="show_delay">Delay</we-button>
                 <we-button data-select-data-attribute="mouseExit">On Exit</we-button>
             </we-select>
             <we-input string="Delay" data-select-data-attribute="" data-attribute-name="showAfter" data-unit="s" data-save-unit="ms" data-dependencies="show_delay"/>
-            <we-input string="Period between consents" data-select-data-attribute="7days" data-attribute-name="consentsDelay" data-unit="days"/>
+            <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>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 7838a0da9e5..3ef28a99e45 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -467,5 +467,14 @@
                 data-name="scroll_button_opt"/>
         </we-row>
     </div>
+
+    <!-- Cookies Bar -->
+    <div data-selector="#website_cookies_bar" data-js="CookiesBar" data-target=".s_popup_main">
+        <we-select string="Layout" class="o_we_inline">
+            <we-button data-select-class="o_cookies_discrete" data-select-layout="discrete" data-trigger="position_bottom,s_popup_size_full">Discrete</we-button>
+            <we-button data-select-class="o_cookies_classic" data-select-layout="classic" data-trigger="position_bottom,s_popup_size_full">Classic</we-button>
+            <we-button data-select-class="o_cookies_popup" data-select-layout="popup" data-trigger="position_centered,s_popup_size_md">Popup</we-button>
+        </we-select>
+    </div>
 </template>
 </odoo>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index b40c459e081..dd6092435dc 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -271,6 +271,31 @@
     </xpath>
 </template>
 
+<template id="cookies_bar" inherit_id="website.footer_custom" name="Cookies Bar">
+    <xpath expr="//div[@id='footer']" position="before">
+        <div id="website_cookies_bar" t-if="website.cookies_bar" class="s_popup o_snippet_invisible" data-name="Cookies Bar">
+            <div class='s_popup_main s_popup_fixed popup_backdrop d-none o_cookies_discrete'
+                 data-show-after="500" data-display="afterDelay" data-consents-duration="999">
+                <div class='s_popup_frame s_popup_full'>
+                    <div class='oe_structure s_popup_content bg-white'>
+                        <section class="pt4 pb4">
+                            <div class="container text-600 d-flex align-items-center">
+                                <div class="mb0">
+                                    <div class="o_cookies_bar_text_primary">
+                                        We use cookies to provide you a better user experience.
+                                    </div>
+                                </div>
+                                <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm text-nowrap ml-auto">Cookie Policy</a>
+                                <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm text-nowrap">I agree</a>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </xpath>
+</template>
+
 <template id="language_selector" name="Language Selector">
     <ul class="js_language_selector mb0 list-inline" t-if="(request and request.is_frontend_multilang and len(languages) &gt; 1) or (website and (editable or translatable))">
         <li class="list-inline-item">