From 6aaf9b6c0e713dd2f5966d539335c613cbfcf53a Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Mon, 5 Jul 2021 13:40:43 +0000
Subject: [PATCH] [IMP] website_sale: increase cart quantity after animation

After this commit, the cart quantity (in the navbar) increase after
the animation instead of before the animation.

We also changed the animation of the cart quantity to have a small
zoom when the number changes instead of an hide followed by a fade in.

task-2574300

PR-73234
---
 addons/website_sale/static/src/js/website_sale.js        | 2 +-
 addons/website_sale/static/src/js/website_sale_utils.js  | 9 ++++++---
 addons/website_sale/static/src/scss/website_sale.scss    | 5 +++++
 .../src/snippets/s_dynamic_snippet_products/000.js       | 2 +-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index e9db7618271..10278398e13 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -324,7 +324,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, car
             }
             wSaleUtils.updateCartNavBar(data);
             $input.val(data.quantity);
-            $('.js_quantity[data-line-id='+line_id+']').val(data.quantity).html(data.quantity);
+            $('.js_quantity[data-line-id='+line_id+']').val(data.quantity).text(data.quantity);
 
             if (data.warning) {
                 var cart_alert = $('.oe_cart').parent().find('#data_warning');
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 3d7aa5780f5..c4618716f7e 100644
--- a/addons/website_sale/static/src/js/website_sale_utils.js
+++ b/addons/website_sale/static/src/js/website_sale_utils.js
@@ -32,9 +32,9 @@ const cartHandlerMixin = {
         this._rpc({
             route: "/shop/cart/update_json",
             params: params,
-        }).then(data => {
+        }).then(async data => {
+            await animateClone($('header .o_wsale_my_cart').first(), this.$itemImgContainer, 25, 40);
             updateCartNavBar(data);
-            animateClone($('header .o_wsale_my_cart').first(), this.$itemImgContainer, 25, 40);
         });
     },
 };
@@ -89,7 +89,10 @@ function updateCartNavBar(data) {
     _.each($qtyNavBar, function (qty) {
         var $qty = $(qty);
         $qty.parents('li:first').removeClass('d-none');
-        $qty.html(data.cart_quantity).hide().fadeIn(600);
+        $qty.addClass('o_mycart_zoom_animation').delay(300).queue(function () {
+            $(this).text(data.cart_quantity);
+            $(this).removeClass("o_mycart_zoom_animation").dequeue();
+        });
     });
     $(".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.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 3e038175af7..6213480ff2a 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -739,6 +739,11 @@ a.no-decoration {
     box-shadow: 0 0 5px 10px rgba(240,8,0,0.4)!important;
 }
 
+.o_mycart_zoom_animation {
+    transform: scale(1.4);
+    transition: all 0.3s ease-in-out;
+}
+
 /* product recently viewed snippet */
 
 .o_carousel_product_card {
diff --git a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js
index 4d6fd8c1569..65f107f1326 100644
--- a/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js
+++ b/addons/website_sale/static/src/snippets/s_dynamic_snippet_products/000.js
@@ -92,11 +92,11 @@ const DynamicSnippetProducts = DynamicSnippetCarousel.extend({
                 add_qty: 1
             },
         }).then(function (data) {
-            wSaleUtils.updateCartNavBar(data);
             var $navButton = $('header .o_wsale_my_cart').first();
             var fetch = self._fetchData();
             var animation = wSaleUtils.animateClone($navButton, $(ev.currentTarget).parents('.card'), 25, 40);
             Promise.all([fetch, animation]).then(function (values) {
+                wSaleUtils.updateCartNavBar(data);
                 self._render();
             });
         });