[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

@@ -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');

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();

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 {

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();
             });
         });