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