From d8117750ce6e2c33cf4b786f91fc8b994b929346 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Mon, 5 Oct 2020 08:11:12 +0000
Subject: [PATCH] [FIX] website_sale: fix ribbon modifications not being
 previewed

Previously, editing a ribbon in the options panel had no preview inside
of the page until the change was validated. This commit fixes that issue
by making the real ribbon invisible, and making the ribbon dummy
visible. The preview still only affects the current ribbon being edited
until it is validated. Unvalidated changes are discarded when clicking
elsewhere in the page.

task-2339986

closes odoo/odoo#59806

X-original-commit: 922f3b67523e24204f15f38517c3dd207884ba66
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/website_sale.editor.js      | 20 ++++++++++++++++++-
 .../website_sale/views/snippets/snippets.xml  |  8 ++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index 608f6c632b6..ef24939829b 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -380,6 +380,15 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
         // Ribbons may have been edited or deleted in another products' option, need to make sure they're up to date
         this.rerender = true;
     },
+    /**
+     * @override
+     */
+    onBlur: function () {
+        // Since changes will not be saved unless they are validated, reset the
+        // previewed ribbon onBlur to communicate that to the user
+        this._resetRibbonDummy();
+        this._toggleEditingUI(false);
+    },
 
     //--------------------------------------------------------------------------
     // Options
@@ -400,6 +409,11 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
      * @see this.selectClass for params
      */
     async setRibbon(previewMode, widgetValue, params) {
+        if (previewMode === 'reset') {
+            widgetValue = this.prevRibbonId;
+        } else {
+            this.prevRibbonId = this.$target[0].dataset.ribbonId;
+        }
         this.$target[0].dataset.ribbonId = widgetValue;
         this.trigger_up('set_product_ribbon', {
             templateId: this.productTemplateID,
@@ -420,6 +434,7 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
             $(`[data-ribbon-id="${widgetValue}"]`).each((index, product) => delete product.dataset.ribbonId);
         }
         this._resetRibbonDummy();
+        this._toggleEditingUI(false);
     },
     /**
      * @see this.selectClass for params
@@ -608,6 +623,8 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
     _toggleEditingUI(state) {
         this.$el.find('[data-name="ribbon_options"]').toggleClass('d-none', state);
         this.$el.find('[data-name="ribbon_customize_opt"]').toggleClass('d-none', !state);
+        this.$('.o_ribbon:not(.o_wsale_ribbon_dummy)').toggleClass('d-none', state);
+        this.$ribbon.toggleClass('d-none', !state);
     },
     /**
      * Creates a copy of current ribbon to manipulate for edition/creation.
@@ -618,7 +635,8 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
         if (this.$ribbon) {
             this.$ribbon.remove();
         }
-        this.$ribbon = this.$('.o_ribbon').clone().addClass('d-none o_wsale_ribbon_dummy').appendTo(this.$target);
+        const $original = this.$('.o_ribbon');
+        this.$ribbon = $original.clone().addClass('d-none o_wsale_ribbon_dummy').appendTo($original.parent());
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index 8270be6aa3d..22513b2e09f 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -60,7 +60,7 @@
             </div>
 
             <we-row data-name="ribbon_options">
-                <we-select string="Ribbon" data-no-preview="true" class="o_wsale_ribbon_select">
+                <we-select string="Ribbon" class="o_wsale_ribbon_select">
                     <we-button data-set-ribbon="" data-name="no_ribbon_opt">None</we-button>
                     <!-- Ribbons are filled in JS -->
                 </we-select>
@@ -69,12 +69,12 @@
             </we-row>
             <div class="d-none" data-name="ribbon_customize_opt">
                 <we-row string="Ribbon">
-                    <we-input data-set-ribbon-html="" class="o_we_large_input" data-apply-to=".o_wsale_ribbon_dummy" data-no-preview="true"/>
+                    <we-input data-set-ribbon-html="" class="o_we_large_input" data-apply-to=".o_wsale_ribbon_dummy"/>
                     <we-button class="fa fa-check" data-save-ribbon="" title="Validate" data-no-preview="true"/>
                     <we-button class="fa fa-trash" data-delete-ribbon="" title="Delete" data-no-preview="true"/>
                 </we-row>
-                <we-colorpicker string="⌙ Background" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="background-color" data-color-prefix="bg-" data-no-preview="true"/>
-                <we-colorpicker string="⌙ Text" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="color" data-no-preview="true"/>
+                <we-colorpicker string="⌙ Background" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="background-color" data-color-prefix="bg-"/>
+                <we-colorpicker string="⌙ Text" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="color"/>
                 <we-select string="⌙ Mode">
                     <we-button data-set-ribbon-mode="ribbon">Slanted</we-button>
                     <we-button data-set-ribbon-mode="tag">Tag</we-button>