[FIX] website_sale_wishlist: prevent flicker and make tour deterministic

Before this commit, there was a slight chance that the "add to wishlist" button
would flicker `disabled` off, which caused the tour to go next step too early.

The flicker was because the `_onChangeVariant` could be triggered by the
`website_sale` code before the variable `this.wishlistProductIDs` was actually
set, so it wrongly computed the state and enabled the button.

Now the RPC is done on the `willStart` instead of `start` to solve this issue.

The tour has been edited to check the button is actually disabled initially.

The view has been edited because the existing condition was too lazy: it checked
if any variant of the current template was in the wishlist, instead of checking
for the variant actually displayed. That also caused a flicker when the JS
correctly computed the state for the variant afterwards.

The widget has also been edited to trigger `input.product_id` instead of
`input.js_variant_change:checked` to avoid calling `get_combination_info` twice
from `website_sale` code.

PR: #29675
task-1920036

2 files changed, 44 insertions, 13 deletions

diff --git a/addons/website_sale_wishlist/static/src/js/website_sale_tour_wishlist.js b/addons/website_sale_wishlist/static/src/js/website_sale_tour_wishlist.js
index 66a2451fe66..b03e0108fb2 100644
--- a/addons/website_sale_wishlist/static/src/js/website_sale_tour_wishlist.js
+++ b/addons/website_sale_wishlist/static/src/js/website_sale_tour_wishlist.js
@@ -61,13 +61,18 @@ tour.register('shop_wishlist', {
             trigger: '.oe_product_cart a:contains("Customizable Desk")',
         },
         {
-            content: "select desk cutomizable",
+            content: "check the first variant is already in wishlist",
+            trigger: '#product_detail .o_add_wishlist_dyn:disabled',
+            run: function () {},
+        },
+        {
+            content: "change variant",
             extra_trigger: '#product_detail label:contains(Aluminium) input',
             trigger: 'label:contains(Aluminium) input',
         },
         {
-            content: "Change variant, wait button enable and click on add to wishlist",
-            extra_trigger: '#product_detail .o_add_wishlist_dyn:not(".disabled")',
+            content: "wait button enable and click on add to wishlist",
+            extra_trigger: '#product_detail .o_add_wishlist_dyn:not(:disabled)',
             trigger: '#product_detail .o_add_wishlist_dyn',
         },
         {
diff --git a/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js b/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
index a6d7a27f727..947500a7106 100644
--- a/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
+++ b/addons/website_sale_wishlist/static/src/js/website_sale_wishlist.js
@@ -20,30 +20,56 @@ sAnimations.registry.ProductWishlist = sAnimations.Class.extend(ProductConfigura
     },
     events: sAnimations.Class.events,
 
-    start: function () {
+    /**
+     * @constructor
+     */
+    init: function (parent) {
+        this._super.apply(this, arguments);
+        this.wishlistProductIDs = [];
+    },
+    /**
+     * Gets the current wishlist items.
+     * In editable mode, do nothing instead.
+     *
+     * @override
+     */
+    willStart: function () {
         var self = this;
         var def = this._super.apply(this, arguments);
         if (this.editableMode) {
             return def;
         }
 
-        this.wishlistProductIDs = [];
-
         var wishDef = $.get('/shop/wishlist', {
             count: 1,
         }).then(function (res) {
             self.wishlistProductIDs = JSON.parse(res);
-            self._updateWishlistView();
-            // trigger change on only one input
-            if (self.$('input.js_product_change').length) { // manage "List View of variants"
-                self.$('input.js_product_change:checked').first().trigger('change');
-            } else {
-                self.$('input.js_variant_change:checked').first().trigger('change');
-            }
         });
 
         return $.when(def, wishDef);
     },
+    /**
+     * Updates the wishlist view (navbar) & the wishlist button (product page).
+     * In editable mode, do nothing instead.
+     *
+     * @override
+     */
+    start: function () {
+        var def = this._super.apply(this, arguments);
+        if (this.editableMode) {
+            return def;
+        }
+
+        this._updateWishlistView();
+        // trigger change on only one input
+        if (this.$('input.js_product_change').length) { // manage "List View of variants"
+            this.$('input.js_product_change:checked').first().trigger('change');
+        } else {
+            this.$('input.product_id').first().trigger('change');
+        }
+
+        return def;
+    },
 
     //--------------------------------------------------------------------------
     // Private