[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, 0 deletions

diff --git a/addons/website/static/src/xml/website.cookies_bar.xml b/addons/website/static/src/xml/website.cookies_bar.xml
new file mode 100644
index 00000000000..8f43ccb3698
--- /dev/null
+++ b/addons/website/static/src/xml/website.cookies_bar.xml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-name="website.cookies_bar.text_title">
+        <div class="o_cookies_bar_text_title">
+            <p>Respecting your privacy is our priority.</p>
+        </div>
+    </t>
+    <t t-name="website.cookies_bar.text_primary">
+        <div class="o_cookies_bar_text_primary">
+            We use cookies to provide you a better user experience.
+        </div>
+    </t>
+    <t t-name="website.cookies_bar.text_secondary">
+        <div class="o_cookies_bar_text_secondary">
+            We use them to store info about your habits on our website. It will helps us to provide you the very best experience and customize what you see.
+            <br/>
+            By clicking on this banner, you give us permission to collect data.
+        </div>
+    </t>
+
+    <t t-name="website.cookies_bar.discrete">
+        <section class="pt4 pb4">
+            <div class="container text-600 d-flex align-items-center">
+                <div class="mb0">
+                    <t t-call="website.cookies_bar.text_primary"/>
+                </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>
+    </t>
+    <t t-name="website.cookies_bar.classic">
+        <section class="pt24 pb24">
+            <div class="container text-600 d-flex align-items-center">
+                <div>
+                    <div class="h3 text-900">
+                        <t t-call="website.cookies_bar.text_title"/>
+                    </div>
+                    <div class="small">
+                        <t t-call="website.cookies_bar.text_primary"/>
+                    </div>
+                    <div class="small">
+                        <t t-call="website.cookies_bar.text_secondary"/>
+                    </div>
+                </div>
+                <div class="ml-auto">
+                    <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-block text-nowrap">I agree</a>
+                    <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm text-nowrap">Cookie Policy</a>
+                </div>
+            </div>
+        </section>
+    </t>
+    <t t-name="website.cookies_bar.popup">
+        <section class="p-5">
+            <div class="container text-800 text-center">
+                <img t-attf-src="/web/image/website/#{websiteId}/logo/250x250" class="img img-fluid" alt="Website Logo"/>
+                <br/><br/>
+                <div class="h3">
+                    <t t-call="website.cookies_bar.text_title"/>
+                </div>
+                <br/>
+                <div class="mb0 text-left">
+                    <t t-call="website.cookies_bar.text_primary"/>
+                </div>
+                <div class="text-left">
+                    <t t-call="website.cookies_bar.text_secondary"/>
+                </div>
+                <br/>
+                <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-lg">Cookie Policy</a>
+                <br/>
+                <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link">I agree</a>
+            </div>
+        </section>
+    </t>
+</templates>
diff --git a/addons/website/static/src/xml/website.res_config_settings.xml b/addons/website/static/src/xml/website.res_config_settings.xml
new file mode 100644
index 00000000000..6b6d48172bd
--- /dev/null
+++ b/addons/website/static/src/xml/website.res_config_settings.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+<t t-name="website.res_config_settings.cookies_modal_main">
+    <main role="alert">
+        <p>
+            <b>Cookie bars may significantly impair the experience</b> of
+            your visitors. We recommend you avoid them unless you have
+            verified with a legal advisor that you absolutely need cookie
+            consent in your country.
+        </p>
+        <p>
+            For session cookies, authentification and analytics*,
+            <b>you do not need to ask for the consent</b> (see e.g. Opinion
+            04/2012 on Cookie Consent Exemption by the EU Art.29 WP).
+        </p>
+        <p>
+            * provided that your analytics is anonymized, which is not the
+            case by default with Google Analytics.
+        </p>
+    </main>
+</t>
+</templates>