[IMP] website: make rvp and countdown closer to wysiwyg

Replacing 'in page' message for the "RVP" and the
countdown snippets so that we avoid to display some element that won't
be there on the saved page.

task-2261649

closes odoo/odoo#51632

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

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

@@ -109,7 +109,7 @@ const CountdownWidget = publicWidget.Widget.extend({
                     );
                 }
             }
-        } else if (this.endAction === 'message') {
+        } else if (this.endAction === 'message' || this.endAction === 'message_no_countdown') {
             this.$('.s_countdown_end_message').removeClass('d-none');
         }
     },

addons/website/static/src/snippets/s_countdown/000.xml

@@ -5,11 +5,8 @@
     </t>
     <t t-name="website.s_countdown.end_message">
         <div class="s_countdown_end_message d-none">
-            <div class="text-center alert alert-info css_non_editable_mode_hidden o_not_editable" t-ignore="True" role="status">
-                The following message will become visible <strong>only</strong> once the countdown ends.
-            </div>
             <div class="oe_structure">
-                <section class="s_picture bg-200 pt48 pb24" data-snippet="s_picture">
+                <section class="s_picture pt48 pb24" data-snippet="s_picture">
                     <div class="container">
                         <h2 style="text-align: center;">Happy Odoo Anniversary!</h2>
                         <p style="text-align: center;">As promised, we will offer 4 free tickets to our next summit.<br/>Visit our Facebook page to know if you are one of the lucky winners.</p>

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

@@ -22,11 +22,12 @@ options.registry.countdown = options.Class.extend({
      */
     endAction: function (previewMode, widgetValue, params) {
         this.$target[0].dataset.endAction = widgetValue;
-        if (widgetValue === 'message') {
+        if (widgetValue === 'message' || widgetValue === 'message_no_countdown') {
             if (!this.$target.find('.s_countdown_end_message').length) {
                 const message = this.endMessage || qweb.render('website.s_countdown.end_message');
                 this.$target.append(message);
             }
+            this.$target.toggleClass('hide-countdown', widgetValue === 'message_no_countdown');
         } else {
             const $message = this.$target.find('.s_countdown_end_message').detach();
             if ($message.length) {
@@ -75,7 +76,7 @@ options.registry.countdown = options.Class.extend({
 
         // End Action UI
         this.$el.find('.toggle-edit-message')
-            .toggleClass('d-none', dataset.endAction !== 'message');
+            .toggleClass('d-none', dataset.endAction === 'nothing' || dataset.endAction === 'redirect');
 
         // End Message UI
         this.updateUIEndMessage();

addons/website/views/snippets/s_countdown.xml

@@ -19,15 +19,16 @@
         <div data-js="countdown" data-selector=".s_countdown">
             <we-datetimepicker string="Due Date" data-select-data-attribute="" data-attribute-name="endTime"/>
             <we-row>
-                <we-select string="What should happen at the end?" data-no-preview="true">
+                <we-select string="At The End" data-no-preview="true">
                     <we-button data-end-action="nothing" data-name="no_end_action_opt">Nothing</we-button>
                     <we-button data-end-action="redirect" data-name="redirect_end_action_opt">Redirect</we-button>
-                    <we-button data-end-action="message">Show Message</we-button>
+                    <we-button data-end-action="message_no_countdown">Show Message and hide countdown</we-button>
+                    <we-button data-end-action="message">Show Message and keep countdown</we-button>
                 </we-select>
-                <we-button class="align-self-end toggle-edit-message" title="Edit Message"><i class="fa fa-eye fa-fw"/></we-button>
+                <we-button class="align-self-end toggle-edit-message" title="The message will be visible once the countdown ends">
+                    <i class="fa fa-fw fa-eye"/>
+                </we-button>
             </we-row>
-            <we-checkbox string="Hide countdown at the end" data-dependencies="!no_end_action_opt"
-                        data-select-class="hide-countdown"/>
             <we-urlpicker string="URL" data-dependencies="redirect_end_action_opt"
                         data-select-data-attribute="" placeholder="e.g. /my-awesome-page" data-attribute-name="redirectUrl"/>
             <we-select string="Size" data-attribute-name="size">

addons/website_sale/static/src/js/website_sale.editor.js

@@ -55,7 +55,7 @@ odoo.define('website_sale.editor', function (require) {
 var options = require('web_editor.snippets.options');
 var publicWidget = require('web.public.widget');
 const {Class: EditorMenuBar} = require('web_editor.editor');
-const {qweb} = require('web.core');
+const {qweb, _t} = require('web.core');
 
 EditorMenuBar.include({
     custom_events: Object.assign(EditorMenuBar.prototype.custom_events, {
@@ -677,4 +677,29 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
         }).then(reload);
     },
 });
+
+options.registry.ProductsRecentlyViewed = options.Class.extend({
+    /**
+     * @override
+     */
+    onBuilt: function () {
+        this.displayNotification({
+            type: 'info',
+            title: '',
+            message: _t('The snippet will be visible once one has seen one product'),
+        });
+    },
+    /**
+     * @override
+     */
+    onTargetShow: async function () {
+        this.$target.removeClass('d-none');
+    },
+    /**
+     * @override
+     */
+    onTargetHide: function () {
+        this.$target.addClass('d-none');
+    },
+});
 });

addons/website_sale/views/snippets/snippets.xml

@@ -2,15 +2,9 @@
 <odoo>
 
 <template id="s_products_recently_viewed" name="Viewed Products">
-    <section class="s_wsale_products_recently_viewed d-none pt24 pb24" style="min-height: 400px;">
+    <section class="s_wsale_products_recently_viewed o_snippet_invisible pt24 pb24 d-none" style="min-height: 400px;">
         <div class="container">
-            <div class="alert alert-info alert-dismissible rounded-0 fade show d-print-none css_non_editable_mode_hidden o_not_editable">
-                This is a preview of the recently viewed products by the user.<br/>
-                Once the user has seen at least one product this snippet will be visible.
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close"> × </button>
-            </div>
-
-            <h3 class="text-center mb32">Recently viewed Products</h3>
+            <h3 class="text-center mb32">Recently Viewed Products</h3>
             <div class="slider o_not_editable"/>
         </div>
     </section>
@@ -106,6 +100,8 @@
                         data-no-preview="true"
                         data-reload="/"/>
         </div>
+
+        <div data-js="ProductsRecentlyViewed" data-selector=".s_wsale_products_recently_viewed"/>
     </xpath>
 </template>