[FIX] website_sale: fix behaviors for loading recently viewed products

If there is no product in the recently viewed product snippet, it will
simply not be shown. It appears only if there are products (with some
flickering we may decide to improve in future versions).

Also fix the behavior when the last product of the snippet is moved to
the cart.

task-2076271

closes odoo/odoo#38438

X-original-commit: 02037bc20c6d3f5f2bad70a1a30b424ec432eb6b
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>

5 files changed, 116 insertions, 117 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 84acbbc1008..e4f271604b5 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -392,50 +392,4 @@ options.registry.ProductsSearchBar = options.Class.extend({
         }).open();
     },
 });
-
-/**
- * Handles the edition of products search bar snippet.
- */
-options.registry.ProductsRecentlyViewed = options.Class.extend({
-    xmlDependencies: ['/website_sale/static/src/xml/website_sale_recently_viewed.xml'],
-
-    /**
-     * @override
-     */
-    start: function () {
-        var carouselOptions = {
-            productsGroups: [[{
-                    id: 0,
-                    website_url: '#',
-                    display_name: 'Product 1',
-                    price: '$ <span class="oe_currency_value">750.00</span>',
-                }, {
-                    id: 0,
-                    website_url: '#',
-                    display_name: 'Product 2',
-                    price: '$ <span class="oe_currency_value">750.00</span>',
-                }, {
-                    id: 0,
-                    website_url: '#',
-                    display_name: 'Product 3',
-                    price: '$ <span class="oe_currency_value">750.00</span>',
-                }, {
-                    id: 0,
-                    website_url: '#',
-                    display_name: 'Product 4',
-                    price: '$ <span class="oe_currency_value">750.00</span>',
-                }]],
-            uniqueId: 1,
-            productFrame: 4
-        };
-        this.$target.find('.slider').html($(qweb.render('website_sale.productsRecentlyViewed', carouselOptions))).fadeIn();
-        return this._super.apply(this, arguments);
-    },
-    /**
-     * @override
-     */
-    cleanForSave: function () {
-        this.$target.find('.slider').html('').css('display', 'none');
-    },
-});
 });
diff --git a/addons/website_sale/static/src/js/website_sale_recently_viewed.js b/addons/website_sale/static/src/js/website_sale_recently_viewed.js
index f0c0b9353c2..b27ba243aa4 100644
--- a/addons/website_sale/static/src/js/website_sale_recently_viewed.js
+++ b/addons/website_sale/static/src/js/website_sale_recently_viewed.js
@@ -12,6 +12,7 @@ var qweb = core.qweb;
 publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend({
     selector: '.s_wsale_products_recently_viewed',
     xmlDependencies: ['/website_sale/static/src/xml/website_sale_recently_viewed.xml'],
+    disabledInEditableMode: false,
     events: {
         'click .js_add_cart': '_onAddToCart',
         'click .js_remove': '_onRemove',
@@ -36,6 +37,14 @@ publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend
         });
         return this._super.apply(this, arguments);
     },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this._super(...arguments);
+        this.$el.addClass('d-none');
+        this.$el.find('.slider').html('');
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -47,42 +56,70 @@ publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend
     _fetch: function () {
         return this._rpc({
             route: '/shop/products/recently_viewed',
+        }).then(res => {
+            var products = res['products'];
+
+            // In edit mode, if the current visitor has no recently viewed
+            // products, use demo data.
+            if (this.editableMode && (!products || !products.length)) {
+                return {
+                    'products': [{
+                        id: 0,
+                        website_url: '#',
+                        display_name: 'Product 1',
+                        price: '$ <span class="oe_currency_value">750.00</span>',
+                    }, {
+                        id: 0,
+                        website_url: '#',
+                        display_name: 'Product 2',
+                        price: '$ <span class="oe_currency_value">750.00</span>',
+                    }, {
+                        id: 0,
+                        website_url: '#',
+                        display_name: 'Product 3',
+                        price: '$ <span class="oe_currency_value">750.00</span>',
+                    }, {
+                        id: 0,
+                        website_url: '#',
+                        display_name: 'Product 4',
+                        price: '$ <span class="oe_currency_value">750.00</span>',
+                    }],
+                };
+            }
+
+            return res;
         });
     },
     /**
      * @private
      */
     _render: function (res) {
-        if (!res) {
-            return;
-        }
         var products = res['products'];
-        if (products && products.length) {
-            var mobileProducts = [], webProducts = [], productsTemp = [];
-            _.each(products, function (product) {
-                if (productsTemp.length === 4) {
-                    webProducts.push(productsTemp);
-                    productsTemp = [];
-                }
-                productsTemp.push(product);
-                mobileProducts.push([product]);
-            });
-            if (productsTemp.length) {
+        var mobileProducts = [], webProducts = [], productsTemp = [];
+        _.each(products, function (product) {
+            if (productsTemp.length === 4) {
                 webProducts.push(productsTemp);
+                productsTemp = [];
             }
-
-            this.mobileCarousel = $(qweb.render('website_sale.productsRecentlyViewed', {
-                uniqueId: this.uniqueId,
-                productFrame: 1,
-                productsGroups: mobileProducts,
-            }));
-            this.webCarousel = $(qweb.render('website_sale.productsRecentlyViewed', {
-                uniqueId: this.uniqueId,
-                productFrame: 4,
-                productsGroups: webProducts,
-            }));
-            this._addCarousel();
+            productsTemp.push(product);
+            mobileProducts.push([product]);
+        });
+        if (productsTemp.length) {
+            webProducts.push(productsTemp);
         }
+
+        this.mobileCarousel = $(qweb.render('website_sale.productsRecentlyViewed', {
+            uniqueId: this.uniqueId,
+            productFrame: 1,
+            productsGroups: mobileProducts,
+        }));
+        this.webCarousel = $(qweb.render('website_sale.productsRecentlyViewed', {
+            uniqueId: this.uniqueId,
+            productFrame: 4,
+            productsGroups: webProducts,
+        }));
+        this._addCarousel();
+        this.$el.toggleClass('d-none', !(products && products.length));
     },
     /**
      * Add the right carousel depending on screen size.
@@ -90,7 +127,7 @@ publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend
      */
     _addCarousel: function () {
         var carousel = config.device.size_class <= config.device.SIZES.SM ? this.mobileCarousel : this.webCarousel;
-        this.$('.slider').html(carousel).fadeIn(1000);
+        this.$('.slider').html(carousel).css('display', ''); // Removing display is kept for compatibility (it was hidden before)
     },
 
     //--------------------------------------------------------------------------
@@ -114,9 +151,11 @@ publicWidget.registry.productsRecentlyViewedSnippet = publicWidget.Widget.extend
         }).then(function (data) {
             wSaleUtils.updateCartNavBar(data);
             var $navButton = wSaleUtils.getNavBarButton('.o_wsale_my_cart');
-            wSaleUtils.animateClone($navButton, $(ev.currentTarget).parents('.o_carousel_product_card'), 25, 40);
-
-            self._dp.add(self._fetch()).then(self._render.bind(self));
+            var fetch = self._fetch();
+            var animation = wSaleUtils.animateClone($navButton, $(ev.currentTarget).parents('.o_carousel_product_card'), 25, 40);
+            Promise.all([fetch, animation]).then(function (values) {
+                self._render(values[0]);
+            });
         });
     },
 
diff --git a/addons/website_sale/static/src/js/website_sale_utils.js b/addons/website_sale/static/src/js/website_sale_utils.js
index 3b672063551..2c30cd8b3b6 100644
--- a/addons/website_sale/static/src/js/website_sale_utils.js
+++ b/addons/website_sale/static/src/js/website_sale_utils.js
@@ -20,43 +20,52 @@ function getNavBarButton(selector) {
 }
 
 function animateClone($cart, $elem, offsetTop, offsetLeft) {
-    $cart.find('.o_animate_blink').addClass('o_red_highlight o_shadow_animation').delay(500).queue(function(){
+    $cart.find('.o_animate_blink').addClass('o_red_highlight o_shadow_animation').delay(500).queue(function () {
         $(this).removeClass("o_shadow_animation").dequeue();
-    }).delay(2000).queue(function(){
+    }).delay(2000).queue(function () {
         $(this).removeClass("o_red_highlight").dequeue();
     });
-    var $imgtodrag = $elem.find('img').eq(0);
-    if ($imgtodrag.length) {
-        var $imgclone = $imgtodrag.clone()
-            .offset({
-                top: $imgtodrag.offset().top,
-                left: $imgtodrag.offset().left
-            })
-            .addClass('o_website_sale_animate')
-            .appendTo(document.body)
-            .animate({
-                top: $cart.offset().top + offsetTop,
-                left: $cart.offset().left + offsetLeft,
-                width: 75,
-                height: 75,
-            }, 1000, 'easeInOutExpo');
+    return new Promise(function (resolve, reject) {
+        var $imgtodrag = $elem.find('img').eq(0);
+        if ($imgtodrag.length) {
+            var $imgclone = $imgtodrag.clone()
+                .offset({
+                    top: $imgtodrag.offset().top,
+                    left: $imgtodrag.offset().left
+                })
+                .addClass('o_website_sale_animate')
+                .appendTo(document.body)
+                .animate({
+                    top: $cart.offset().top + offsetTop,
+                    left: $cart.offset().left + offsetLeft,
+                    width: 75,
+                    height: 75,
+                }, 1000, 'easeInOutExpo');
 
-        $imgclone.animate({
-            width: 0,
-            height: 0,
-        }, function () {
-            $(this).detach();
-        });
-    }
+            $imgclone.animate({
+                width: 0,
+                height: 0,
+            }, function () {
+                resolve();
+                $(this).detach();
+            });
+        } else {
+            resolve();
+        }
+    });
 }
 
 /**
+ * Updates both navbar cart
  * @param {Object} data
  */
 function updateCartNavBar(data) {
-    var $q = $(".my_cart_quantity");
-    $q.parents('li:first').removeClass('d-none');
-    $q.html(data.cart_quantity).hide().fadeIn(600);
+    var $qtyNavBar = $(".my_cart_quantity");
+    _.each($qtyNavBar, function (qty) {
+        var $qty = $(qty);
+        $qty.parents('li:first').removeClass('d-none');
+        $qty.html(data.cart_quantity).hide().fadeIn(600);
+    });
     $(".js_cart_lines").first().before(data['website_sale.cart_lines']).end().remove();
     $(".js_cart_summary").first().before(data['website_sale.short_cart_summary']).end().remove();
 }
diff --git a/addons/website_sale/static/src/scss/website_sale.editor.scss b/addons/website_sale/static/src/scss/website_sale.editor.scss
index 9a4f59d52f0..729bde03af2 100644
--- a/addons/website_sale/static/src/scss/website_sale.editor.scss
+++ b/addons/website_sale/static/src/scss/website_sale.editor.scss
@@ -25,3 +25,7 @@
         }
     }
 }
+
+.oe_drop_zone + .s_wsale_products_recently_viewed {
+    display: block !important;
+}
diff --git a/addons/website_sale/views/snippets.xml b/addons/website_sale/views/snippets.xml
index 17fc75eb0d6..31d40dd882e 100644
--- a/addons/website_sale/views/snippets.xml
+++ b/addons/website_sale/views/snippets.xml
@@ -25,19 +25,16 @@
 </template>
 
 <template id="s_products_recently_viewed" name="Products Recently Viewed">
-    <section class="s_wsale_products_recently_viewed pt24 pb24" style="min-height: 400px;">
-        <div class="alert alert-info alert-dismissible rounded-0 fade show d-print-none css_non_editable_mode_hidden">
-            <div class="container">
-                <div class="text-center">
-                    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.
-                </div>
+    <section class="s_wsale_products_recently_viewed d-none pt24 pb24" 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>
-        </div>
-        <div class="container">
+
             <h3 class="text-center mb32">Recently viewed Products</h3>
-            <div class="slider o_not_editable" style="display: none;"/>
+            <div class="slider o_not_editable"/>
         </div>
     </section>
 </template>
@@ -121,10 +118,6 @@
                 <i class="fa fa-search"/> Products Search Bar
             </we-button>
         </div>
-
-        <div data-js="ProductsRecentlyViewed"
-            data-selector=".s_wsale_products_recently_viewed">
-        </div>
     </xpath>
     <xpath expr="//div[@id='so_content_addition']" position="attributes">
         <attribute name="data-selector" add=".s_wsale_products_searchbar_input" separator=","/>