[IMP] website: add consent duration on s_popup snippet

This commit introduce a new snippet option for s_popup to control the
consent duration in days. This value will be used to know if the popup
should be shown or not.
If the user close the popup, it won't be shown until the consent
duration is over.

This will also avoid popup to be shown on exit (display mode) more than
once. Indeed, every mouseout of the screen (changing tab, changing app,
alt tab etc) would show the popup, as well as page navigation.

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

addons/website/static/src/snippets/s_popup/000.js

@@ -3,6 +3,7 @@ odoo.define('website.s_popup', function (require) {
 
 const config = require('web.config');
 const publicWidget = require('web.public.widget');
+const utils = require('web.utils');
 
 const PopupWidget = publicWidget.Widget.extend({
     selector: '.s_popup',
@@ -14,7 +15,9 @@ const PopupWidget = publicWidget.Widget.extend({
      * @override
      */
     start: function () {
-        this._bindPopup();
+        if (!utils.get_cookie(this.$target.attr('id'))) {
+            this._bindPopup();
+        }
         return this._super(...arguments);
     },
     /**
@@ -74,6 +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);
         this._hidePopup();
     },
 });

addons/website/static/src/snippets/s_popup/options.js

@@ -14,6 +14,18 @@ options.registry.SnippetPopup = options.Class.extend({
         });
         return this._super(...arguments);
     },
+    /**
+     * @override
+     */
+    onBuilt: function () {
+        this._assignUniqueID();
+    },
+    /**
+     * @override
+     */
+    onClone: function () {
+        this._assignUniqueID();
+    },
     /**
      * @override
      */
@@ -57,6 +69,14 @@ options.registry.SnippetPopup = options.Class.extend({
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * Creates a unique ID.
+     *
+     * @private
+     */
+    _assignUniqueID: function () {
+        this.$target.closest('.s_popup').attr('id', 'sPopup' + Date.now());
+    },
     /**
      * @override
      */

addons/website/views/snippets/s_popup.xml

@@ -3,7 +3,8 @@
 
 <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">
+        <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">
             <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>
@@ -53,6 +54,7 @@
                 <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"/>
             <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>