ng-miam 10.7.1 → 10.9.0

package/bundles/ng-miam.umd.js

@@ -1641,13 +1641,13 @@
         env: 'prod',
         miamAPI: 'https://api.miam.tech',
         miamWeb: 'https://miam.tech',
-        mealzComponents: 'https://cdn.jsdelivr.net/npm/mealz-components@2.11/dist',
+        mealzComponents: 'https://cdn.jsdelivr.net/npm/mealz-components@2.12/dist',
         mealzSsrApi: 'https://ssr-api.mealz.ai',
         lang: 'fr',
         analyticsEnabled: true // Only used in DEV mode
     };
 
-    var WINDOW_SINGLETON_KEY = '__mealzRecipeCardShowTracker__';
+    var WINDOW_SINGLETON_KEY$1 = '__mealzRecipeCardShowTracker__';
     /**
      * Tracks recipe.show events and prevents duplicates (first show, or again after scroll).
      * Shared across SDK and Lit recipe cards via {@link WINDOW_SINGLETON_KEY} on window.
@@ -1672,7 +1672,7 @@
             var w = typeof window !== 'undefined'
                 ? window
                 : undefined;
-            var fromWindow = w === null || w === void 0 ? void 0 : w[WINDOW_SINGLETON_KEY];
+            var fromWindow = w === null || w === void 0 ? void 0 : w[WINDOW_SINGLETON_KEY$1];
             if (fromWindow) {
                 RecipeCardShowTracker.instance = fromWindow;
                 return fromWindow;
@@ -1680,7 +1680,7 @@
             if (!RecipeCardShowTracker.instance) {
                 RecipeCardShowTracker.instance = new RecipeCardShowTracker();
                 if (w) {
-                    w[WINDOW_SINGLETON_KEY] = RecipeCardShowTracker.instance;
+                    w[WINDOW_SINGLETON_KEY$1] = RecipeCardShowTracker.instance;
                 }
             }
             return RecipeCardShowTracker.instance;
@@ -1740,7 +1740,7 @@
             this.hasScrolled = false;
             RecipeCardShowTracker.instance = null;
             if (typeof window !== 'undefined') {
-                delete window[WINDOW_SINGLETON_KEY];
+                delete window[WINDOW_SINGLETON_KEY$1];
             }
         };
         RecipeCardShowTracker.prototype.setupScrollListener = function () {
@@ -1843,6 +1843,136 @@
         };
     }
 
+    var WINDOW_SINGLETON_KEY = '__mealzProductShowTracker__';
+    /**
+     * Dedupes product.show per recipe visit (recipeId:itemId).
+     * Cleared at the start of each openRecipeDetails visit and by ContextService.loadAndSetupRecipe
+     * at the start of each recipe-to-basket visit.
+     */
+    var ProductShowTracker = /** @class */ (function () {
+        function ProductShowTracker() {
+            var _this = this;
+            this.trackedKeys = new Set();
+            this.handlePageUnload = function () {
+                _this.destroy();
+            };
+            if (typeof window !== 'undefined') {
+                window.addEventListener('beforeunload', this.handlePageUnload);
+            }
+        }
+        ProductShowTracker.getInstance = function () {
+            var windowRef = typeof window !== 'undefined' ? window : undefined;
+            var fromWindow = windowRef === null || windowRef === void 0 ? void 0 : windowRef[WINDOW_SINGLETON_KEY];
+            if (fromWindow) {
+                ProductShowTracker.instance = fromWindow;
+                return fromWindow;
+            }
+            if (!ProductShowTracker.instance) {
+                ProductShowTracker.instance = new ProductShowTracker();
+                if (windowRef) {
+                    windowRef[WINDOW_SINGLETON_KEY] = ProductShowTracker.instance;
+                }
+            }
+            return ProductShowTracker.instance;
+        };
+        ProductShowTracker.prototype.trackProductShow = function (analyticsPath, props) {
+            var _a, _b;
+            var trackingKey = props.recipe_id + ":" + props.item_id;
+            if (this.trackedKeys.has(trackingKey)) {
+                return;
+            }
+            this.trackedKeys.add(trackingKey);
+            (_b = (_a = window.mealzInternal) === null || _a === void 0 ? void 0 : _a.analytics) === null || _b === void 0 ? void 0 : _b.sendEvent('product.show', analyticsPath, props);
+        };
+        ProductShowTracker.prototype.clearForRecipe = function (recipeId) {
+            var e_1, _c;
+            var prefix = recipeId + ":";
+            try {
+                for (var _d = __values(this.trackedKeys), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var key = _e.value;
+                    if (key.startsWith(prefix)) {
+                        this.trackedKeys.delete(key);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        ProductShowTracker.prototype.clearAll = function () {
+            this.trackedKeys.clear();
+        };
+        ProductShowTracker.prototype.destroy = function () {
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('beforeunload', this.handlePageUnload);
+                delete window[WINDOW_SINGLETON_KEY];
+            }
+            this.trackedKeys.clear();
+            ProductShowTracker.instance = null;
+        };
+        return ProductShowTracker;
+    }());
+    ProductShowTracker.instance = null;
+
+    var PRODUCT_SHOW_ANALYTICS_PATH_SUFFIX = '/shopping';
+    var PRODUCT_SHOW_VISIBILITY_THRESHOLD = 0.8;
+    var PRODUCT_SHOW_DEBOUNCE_MS = 1000;
+    var SKIP_PRODUCT_SHOW_STATUSES = ['unavailable', 'out_of_stock', 'ignored', 'deleted', 'often_deleted'];
+    function buildProductShowProps(product, recipeId) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var basketEntry = product === null || product === void 0 ? void 0 : product.basketEntry;
+        var selectedItem = basketEntry === null || basketEntry === void 0 ? void 0 : basketEntry.selectedItem;
+        var item = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) != null ? selectedItem : product === null || product === void 0 ? void 0 : product.item;
+        if ((item === null || item === void 0 ? void 0 : item.id) == null) {
+            return null;
+        }
+        var itemAttributes = item.attributes || {};
+        var entryName = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) != null
+            ? ((_c = (_a = basketEntry.name) !== null && _a !== void 0 ? _a : (_b = basketEntry.attributes) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : '')
+            : ((_h = (_f = (_e = (_d = product.ingredient) === null || _d === void 0 ? void 0 : _d.attributes) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : (_g = product.ingredient) === null || _g === void 0 ? void 0 : _g.name) !== null && _h !== void 0 ? _h : '');
+        var productBasePrice = ((_j = product === null || product === void 0 ? void 0 : product.price) === null || _j === void 0 ? void 0 : _j.unit) != null ? String(product.price.unit) : '0.0';
+        return {
+            entry_name: entryName,
+            item_id: String(item.id),
+            ext_item_id: String((_k = itemAttributes['ext-id']) !== null && _k !== void 0 ? _k : ''),
+            item_ean: String((_m = (_l = item.ean) !== null && _l !== void 0 ? _l : itemAttributes.ean) !== null && _m !== void 0 ? _m : ''),
+            recipe_id: recipeId,
+            product_base_price: productBasePrice,
+            index: (_p = (_o = product === null || product === void 0 ? void 0 : product.ingredient) === null || _o === void 0 ? void 0 : _o.index) === null || _p === void 0 ? void 0 : _p.toString()
+        };
+    }
+    function isProductShowEligible(status) {
+        return !!status && !SKIP_PRODUCT_SHOW_STATUSES.includes(status);
+    }
+    function getProductShowStatus(product) {
+        var _a, _b;
+        return (_b = (_a = product.basketEntry) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : product.status;
+    }
+    function attachProductShowTracking(options) {
+        var element = options.element, product = options.product, recipeId = options.recipeId, _q = options.analyticsPath, analyticsPath = _q === void 0 ? "/recipes/" + recipeId + PRODUCT_SHOW_ANALYTICS_PATH_SUFFIX : _q;
+        ProductShowTracker.getInstance();
+        var listener = new ViewportListener(element, function () {
+            if (!isProductShowEligible(getProductShowStatus(product))) {
+                return;
+            }
+            var props = buildProductShowProps(product, recipeId);
+            if (!props) {
+                return;
+            }
+            ProductShowTracker.getInstance().trackProductShow(analyticsPath, props);
+        }, {
+            threshold: PRODUCT_SHOW_VISIBILITY_THRESHOLD,
+            debounce: PRODUCT_SHOW_DEBOUNCE_MS
+        });
+        return {
+            disconnect: function () { return listener.disconnect(); }
+        };
+    }
+
     var Ingredient = /** @class */ (function (_super) {
         __extends(Ingredient, _super);
         function Ingredient() {
@@ -3646,7 +3776,7 @@
         EventJourney["EMPTY"] = "";
     })(EventJourney || (EventJourney = {}));
 
-    var VERSION = "10.7.1"; // TODO: replace by ##VERSION## and update it in the CI/CD
+    var VERSION = "10.9.0"; // TODO: replace by ##VERSION## and update it in the CI/CD
 
     var ContextRegistryService = /** @class */ (function () {
         function ContextRegistryService() {
@@ -3655,6 +3785,7 @@
             this.guestsChanged = new i0.EventEmitter();
             this.recipePriceChanged = new i0.EventEmitter();
             this.addAllProductsWasClicked = new i0.EventEmitter();
+            this.drawerErrorToast = new i0.EventEmitter();
             // CALLBACKS
             this.hookCallback = function (isLogged, isPosValid) {
                 mealzWarn('[Mealz] hookCallback (used to force user login) not set');
@@ -3794,7 +3925,7 @@
             var detectedJourney = journey !== null && journey !== void 0 ? journey : detectJourney();
             var isBulk = actions.length > 1;
             actions.forEach(function (action) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                 try {
                     var params = action.params;
                     // Determine add_source: replacement if previousItem exists, otherwise unit or bulk based on actions count
@@ -3827,8 +3958,10 @@
                         ext_item_id: (_j = item.attributes) === null || _j === void 0 ? void 0 : _j['ext-id'],
                         item_ean: item.ean,
                         product_quantity: quantity.toString(),
+                        product_base_price: ((_k = basketEntry === null || basketEntry === void 0 ? void 0 : basketEntry.price) !== null && _k !== void 0 ? _k : 0).toString(),
                         recipe_id: recipeId,
-                        add_source: addSource
+                        add_source: addSource,
+                        index: (_m = (_l = params.eventTrace) === null || _l === void 0 ? void 0 : _l.props) === null || _m === void 0 ? void 0 : _m.index
                     }, detectedJourney);
                 }
                 catch (error) {
@@ -3840,13 +3973,16 @@
             var _this = this;
             var detectedJourney = journey !== null && journey !== void 0 ? journey : detectJourney();
             actions.forEach(function (action) {
+                var _a;
                 _this.sendEvent('entry.deleted', action.params.eventTrace.originPath, {
                     entry_name: action.params.basketEntry.name,
                     item_id: action.params.basketEntry.selectedItem.id,
                     ext_item_id: action.params.basketEntry.selectedItem.attributes['ext-id'],
                     item_ean: action.params.basketEntry.selectedItem.ean,
                     product_quantity: action.params.basketEntry.quantity.toString(),
-                    recipe_id: action.params.recipeId
+                    product_base_price: ((_a = action.params.basketEntry.price) !== null && _a !== void 0 ? _a : 0).toString(),
+                    recipe_id: action.params.recipeId,
+                    index: action.params.eventTrace.props.index
                 }, detectedJourney);
             });
         };
@@ -5902,6 +6038,9 @@
         RecipesService.prototype.openRecipeDetails = function (recipeId, guests, initialTabIndex, path, categoryId) {
             if (path === void 0) { path = ''; }
             if (categoryId === void 0) { categoryId = null; }
+            if (recipeId) {
+                ProductShowTracker.getInstance().clearForRecipe(String(recipeId));
+            }
             this.display(recipeId, { previewAllowed: true, previewMode: false, guests: guests });
             this.recipeDetailsTabIndex$.next(initialTabIndex);
             this.analyticsService.sendEvent('recipe.display', path, { recipe_id: recipeId, category_id: categoryId });
@@ -9269,6 +9408,7 @@
     var StoreOutOfStockService = /** @class */ (function () {
         function StoreOutOfStockService() {
             this.outOfStockEntries = [];
+            this.outOfStockPersisted$ = new rxjs.Subject();
             this.fetchCurrentOutOfStocks();
         }
         StoreOutOfStockService.prototype.fetchCurrentOutOfStocks = function () {
@@ -9287,13 +9427,17 @@
             var _a;
             if (entry.status === 'active') {
                 this.removeEntryFromStorage(entry);
-                return;
+                return false;
             }
             if ((_a = entry === null || entry === void 0 ? void 0 : entry.selectedItem) === null || _a === void 0 ? void 0 : _a.id) {
-                return this.outOfStockEntries.includes(entry.selectedItem.id.toString());
+                return this.isItemOutOfStock(entry.selectedItem.id);
             }
             return false;
         };
+        StoreOutOfStockService.prototype.isItemOutOfStock = function (itemId) {
+            this.fetchCurrentOutOfStocks();
+            return this.outOfStockEntries.includes(itemId);
+        };
         StoreOutOfStockService.prototype.removeEntryFromStorage = function (entry) {
             var _a;
             if ((_a = entry === null || entry === void 0 ? void 0 : entry.selectedItem) === null || _a === void 0 ? void 0 : _a.id) {
@@ -9301,12 +9445,25 @@
                 sessionStorage.setItem('_miam/outOfStockEntry', JSON.stringify(this.outOfStockEntries));
             }
         };
+        /**
+         * Marks an entry as out of stock in session storage.
+         */
+        StoreOutOfStockService.prototype.persistOutOfStock = function (entry) {
+            var _a;
+            if (!((_a = entry.selectedItem) === null || _a === void 0 ? void 0 : _a.id)) {
+                return;
+            }
+            entry.status = 'out_of_stock';
+            this.addEntryToStorage(entry);
+            this.outOfStockPersisted$.next(entry);
+        };
         StoreOutOfStockService.prototype.addEntryToStorage = function (entry) {
             var _a;
             if ((_a = entry.selectedItem) === null || _a === void 0 ? void 0 : _a.id) {
                 this.fetchCurrentOutOfStocks();
-                if (!this.outOfStockEntries.includes(entry.selectedItem.id)) {
-                    this.outOfStockEntries.push(entry.selectedItem.id);
+                var itemId = entry.selectedItem.id.toString();
+                if (!this.outOfStockEntries.includes(itemId)) {
+                    this.outOfStockEntries.push(itemId);
                 }
                 sessionStorage.setItem('_miam/outOfStockEntry', JSON.stringify(this.outOfStockEntries));
             }
@@ -9651,11 +9808,17 @@
                             productsToAdd_1.push(re);
                         }
                     }); });
-                    var addRecipes = productsToAdd_1.map(function (re) { return new AddRecipeAction(re.entry, {
-                        recipeId: _this.recipe.id,
-                        ingredientId: re.ingredientId,
-                        eventTrace: eventTrace,
-                    }, _this.basketsService); });
+                    var addRecipes = productsToAdd_1.map(function (re) {
+                        var _a;
+                        return new AddRecipeAction(re.entry, {
+                            recipeId: _this.recipe.id,
+                            ingredientId: re.ingredientId,
+                            eventTrace: {
+                                originPath: eventTrace.originPath,
+                                props: Object.assign(Object.assign({}, eventTrace.props), { index: (_a = re.index) === null || _a === void 0 ? void 0 : _a.toString() })
+                            },
+                        }, _this.basketsService);
+                    });
                     _this.basketSynchroService.addToActionList(addRecipes);
                     var onTimeouts = addRecipes.map(function (action) { return action.onTimeout; });
                     var onErrors = addRecipes.map(function (action) { return action.onError; });
@@ -9768,9 +9931,14 @@
         RecipeDetailsService.prototype.remainingProducts = function () {
             var _this = this;
             return this.remainingBasketEntries.reduce(function (result, be) {
+                var _a;
                 var p = _this.products.find(function (product) { return product.basketEntry.name === be.name; });
                 if (p) {
-                    result.push({ ingredientId: p.ingredient.id, entry: p.basketEntry });
+                    result.push({
+                        ingredientId: p.ingredient.id,
+                        entry: p.basketEntry,
+                        index: (_a = p.ingredient) === null || _a === void 0 ? void 0 : _a.index
+                    });
                 }
                 return result;
             }, []);
@@ -9834,6 +10002,7 @@
             }
         };
         RecipeDetailsService.prototype.categorizeProducts = function () {
+            var e_1, _c, e_2, _d;
             var _this = this;
             // Iterate over each product in the entriesWithIngredients array
             this.products.forEach(function (product) {
@@ -9856,6 +10025,37 @@
                     _this.updateRecipePrice(product);
                 }
             });
+            var displayIndex = 0;
+            try {
+                for (var _e = __values(this.productsByCategory.toPickProducts), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var product = _f.value;
+                    if (product.ingredient) {
+                        product.ingredient.index = displayIndex++;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_c = _e.return)) _c.call(_e);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            try {
+                for (var _g = __values(this.productsByCategory.oftenIgnoredProducts), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var product = _h.value;
+                    if (product.ingredient) {
+                        product.ingredient.index = displayIndex++;
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_d = _g.return)) _d.call(_g);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
             this.sendEmitToUpdateRecipePrice();
             this.updateIngredientFromBasketLoading = false;
             this.ingredientToBasketLoading = false;
@@ -9876,9 +10076,8 @@
         RecipeDetailsService.prototype.setProductOutOfStockInSession = function (products) {
             var _this = this;
             products.forEach(function (_c) {
-                var entry = _c.entry;
-                entry.status = 'out_of_stock';
-                _this.storeOutOfStockService.addEntryToStorage(entry);
+                var ingredientId = _c.ingredientId, entry = _c.entry;
+                _this.storeOutOfStockService.persistOutOfStock(entry);
             });
         };
         return RecipeDetailsService;
@@ -9940,7 +10139,9 @@
             }
             this.basketEntry.addRelationship(this.updateMealzParams.item, 'selected-item');
             this.basketEntriesService.selectItem(this.basketEntry.id, this.updateMealzParams.item.id, this.quantity)
-                .pipe(operators.switchMap(function () { return _this.basketsService.refreshCurrentBasket(); }), operators.take(1)).subscribe();
+                .pipe(operators.switchMap(function () { return _this.basketsService.refreshCurrentBasket(); }), operators.take(1)).subscribe({
+                error: function () { return _this.onError.next(); }
+            });
         };
         AddIngredientFromReplaceAction.prototype.createActionForRetailer = function () {
             var _this = this;
@@ -9988,8 +10189,16 @@
         return AddIngredientAction;
     }(BasketAction));
 
+    var UNAVAILABLE_PRODUCT_ADD_ERROR_CODE = 'unavailableProductAdd';
+    var UNAVAILABLE_PRODUCTS_ADD_ERROR_CODE = 'unavailableProductsAdd';
+    function unavailableProductAddErrorCode(failureCount) {
+        return failureCount <= 1
+            ? UNAVAILABLE_PRODUCT_ADD_ERROR_CODE
+            : UNAVAILABLE_PRODUCTS_ADD_ERROR_CODE;
+    }
+
     var ReplaceItemService = /** @class */ (function () {
-        function ReplaceItemService(basketsService, basketEntriesService, itemsService, recipeDetailsService, basketSynchroService, ignoredBasketsService, recipesService, analyticsService) {
+        function ReplaceItemService(basketsService, basketEntriesService, itemsService, recipeDetailsService, basketSynchroService, ignoredBasketsService, recipesService, analyticsService, storeOutOfStockService, contextRegistryService) {
             var _this = this;
             this.basketsService = basketsService;
             this.basketEntriesService = basketEntriesService;
@@ -9999,6 +10208,8 @@
             this.ignoredBasketsService = ignoredBasketsService;
             this.recipesService = recipesService;
             this.analyticsService = analyticsService;
+            this.storeOutOfStockService = storeOutOfStockService;
+            this.contextRegistryService = contextRegistryService;
             this.basketEntry = new BasketEntry();
             this.itemsWithPricesList$ = new rxjs.BehaviorSubject([]);
             this.fetchingItemLoading$ = new rxjs.BehaviorSubject(false);
@@ -10032,14 +10243,20 @@
                 _this.recipe = recipeDisplay === null || recipeDisplay === void 0 ? void 0 : recipeDisplay.recipe;
             });
             this.replaceProductFromPreviewOpen$.pipe(operators.filter(function (isOpen) { return !!isOpen; }), operators.switchMap(function () { return _this.fetchItems(); })).subscribe();
+            this.storeOutOfStockService.outOfStockPersisted$.subscribe(function () {
+                _this.refreshItemsOutOfStockFlags();
+            });
         }
-        ReplaceItemService.prototype.handleItemSelection = function (item, searchString, onComplete, eventTrace, timeOutAction) {
+        ReplaceItemService.prototype.handleItemSelection = function (item, searchString, onComplete, eventTrace) {
             var _this = this;
             var fromRecipeDetails = !!this.recipe;
-            this.timeOutAction = timeOutAction;
+            this.onComplete = onComplete;
             this.onSelectItem(item, searchString, eventTrace)
                 .pipe(operators.take(1))
                 .subscribe(function (action) {
+                if (!action) {
+                    return;
+                }
                 action.onSuccess.pipe(operators.take(1)).subscribe(function () {
                     _this.recipeDetailsService.hasReplaced = true;
                     if (eventTrace && fromRecipeDetails && !_this.addProductMode) {
@@ -10047,15 +10264,17 @@
                     }
                     if (_this.addProductMode || !fromRecipeDetails) {
                         _this.basketsService.itemWillBeAdded(item.id).subscribe(function (addItem) {
-                            if (!addItem && _this.replaceItemLoading$.value) {
+                            if (!addItem) {
+                                _this.replaceItemLoading$.next(undefined);
                                 onComplete(item.id);
                             }
                         });
                     }
                     else {
                         _this.basketsService.ingredientWillBeAdded(_this.ingredient.id).subscribe(function (addIngredient) {
-                            if (!addIngredient && _this.replaceItemLoading$.value) {
-                                onComplete(_this.basketEntry.id);
+                            if (!addIngredient) {
+                                _this.replaceItemLoading$.next(undefined);
+                                onComplete(item.id);
                             }
                         });
                     }
@@ -10097,7 +10316,8 @@
                 var priceObservables = items.map(function (item) { return _this.itemsService.getPriceForItem(item.id).pipe(operators.map(function (price) { return ({ item: item, price: price }); })); });
                 return (priceObservables.length === 0 ? rxjs.of([]) : rxjs.forkJoin(priceObservables)).pipe(operators.map(function (itemsWithPrices) {
                     _this.fetchingItemLoading$.next(false);
-                    return _this.itemsWithPricesList$.next(itemsWithPrices);
+                    var itemsWithOutOfStockFlags = _this.withOutOfStockFlags(itemsWithPrices);
+                    return _this.itemsWithPricesList$.next(itemsWithOutOfStockFlags);
                 }));
             }));
         };
@@ -10128,18 +10348,13 @@
          * Adds the action to the synchronization service's action list for processing.
          */
         ReplaceItemService.prototype.handleAddProductMode = function (item, eventTrace) {
-            var _this = this;
             this.replaceItemLoading$.next(item);
             var newBasketEntry = new BasketEntry();
             newBasketEntry.quantity = 1;
             newBasketEntry.quantityToAdd = 0;
             this.replaceRelationship(newBasketEntry, item);
             var addIngredientWithoutRecipe = new AddIngredientAction(newBasketEntry, { eventTrace: eventTrace, item: item }, this.basketsService, this.basketEntriesService);
-            rxjs.merge(addIngredientWithoutRecipe.onTimeout, addIngredientWithoutRecipe.onError)
-                .pipe(operators.take(1))
-                .subscribe(function () {
-                _this.rollbackReplace();
-            });
+            this.listenToAddActionFailure(addIngredientWithoutRecipe, item, newBasketEntry);
             return rxjs.of(addIngredientWithoutRecipe);
         };
         /**
@@ -10164,43 +10379,55 @@
                 var priceObservables = items.map(function (item) { return _this.itemsService.getPriceForItem(item.id).pipe(operators.map(function (price) { return ({ item: item, price: price }); })); });
                 return (priceObservables.length === 0 ? rxjs.of([]) : rxjs.forkJoin(priceObservables));
             }), operators.map(function (itemsWithPrices) {
-                _this.itemsWithPricesList$.next(_this.moveSelectedItemToFront(itemsWithPrices));
+                var sortedItems = _this.withOutOfStockFlags(_this.moveSelectedItemToFront(itemsWithPrices));
+                _this.itemsWithPricesList$.next(sortedItems);
                 _this.fetchingItemLoading$.next(false);
-                return itemsWithPrices;
+                return sortedItems;
             }));
         };
         /**
-         * Replace the current basket entry with the given item
+         * Replace the current basket entry with the given item.
+         * Removes the previous item from the retailer cart first; the add action is only enqueued after remove succeeds.
          */
         ReplaceItemService.prototype.selectItem = function (item) {
             var _this = this;
-            var _a, _b;
+            var _a;
             var deletedBasketEntry = deepCloneWithClass(this.basketEntry);
             deletedBasketEntry.quantity = 0;
             deletedBasketEntry.selectedItem.extId = this.previousItem.extId;
-            var removeIngredient = new RemoveIngredientFromReplaceAction(deletedBasketEntry, {}, this.basketsService);
-            rxjs.merge(removeIngredient.onTimeout, removeIngredient.onError).pipe(operators.take(1)).subscribe(function () {
-                _this.rollbackReplace();
-            });
-            this.basketSynchroService.addToActionList([removeIngredient]);
-            var guests = +((_a = this.recipe) === null || _a === void 0 ? void 0 : _a.modifiedGuests) || +((_b = this.recipe) === null || _b === void 0 ? void 0 : _b.guests) || 4;
-            return (this.ingredient && this.recipe ?
-                this.basketsService.basketEntryFromIngredient(this.ingredient.id, guests, true, item.id) :
-                rxjs.of(this.basketEntry)).pipe(operators.switchMap(function (newEntry) {
-                var newBasketEntry = deepCloneWithClass(_this.basketEntry);
-                newBasketEntry.quantityToAdd = newEntry.quantityToAdd;
-                _this.replaceRelationship(newBasketEntry, item);
-                var addIngredientFromReplace = new AddIngredientFromReplaceAction(newBasketEntry, {
-                    item: item
-                }, _this.basketsService, _this.basketEntriesService);
-                rxjs.merge(addIngredientFromReplace.onTimeout, addIngredientFromReplace.onError).pipe(operators.take(1)).subscribe(function () {
-                    _this.rollbackReplace();
+            var removeIngredient = new RemoveIngredientFromReplaceAction(deletedBasketEntry, { ingredientId: (_a = this.ingredient) === null || _a === void 0 ? void 0 : _a.id }, this.basketsService);
+            return new rxjs.Observable(function (observer) {
+                rxjs.merge(removeIngredient.onError, removeIngredient.onTimeout).pipe(operators.take(1)).subscribe(function () {
+                    _this.clearReplaceLoadingState();
+                    observer.complete();
                 });
-                addIngredientFromReplace.onSuccess.pipe(operators.take(1)).subscribe(function () {
-                    _this.recipeDetailsService.updateIngredientFromBasketLoading = false;
+                removeIngredient.onSuccess.pipe(operators.take(1), operators.switchMap(function () { return _this.createAddIngredientFromReplaceAction(item); })).subscribe({
+                    next: function (addIngredientFromReplace) {
+                        _this.listenToAddActionFailure(addIngredientFromReplace, item);
+                        addIngredientFromReplace.onSuccess.pipe(operators.take(1)).subscribe(function () {
+                            _this.recipeDetailsService.updateIngredientFromBasketLoading = false;
+                        });
+                        observer.next(addIngredientFromReplace);
+                        observer.complete();
+                    },
+                    error: function () {
+                        _this.confirmMealzRemoveAfterReplaceAddFailure();
+                        _this.clearReplaceLoadingState();
+                        observer.complete();
+                    }
                 });
-                return rxjs.of(addIngredientFromReplace);
-            }));
+                _this.basketSynchroService.addToActionList([removeIngredient]);
+            });
+        };
+        ReplaceItemService.prototype.withOutOfStockFlags = function (items) {
+            var _this = this;
+            return items.map(function (itemWithPrice) { return (Object.assign(Object.assign({}, itemWithPrice), { isOutOfStock: _this.storeOutOfStockService.isItemOutOfStock(itemWithPrice.item.id) })); });
+        };
+        ReplaceItemService.prototype.refreshItemsOutOfStockFlags = function () {
+            if (this.itemsWithPricesList$.value.length === 0) {
+                return;
+            }
+            this.itemsWithPricesList$.next(this.withOutOfStockFlags(this.itemsWithPricesList$.value));
         };
         ReplaceItemService.prototype.changeReplaceModalState = function (state, basketEntryToReplace) {
             if (basketEntryToReplace) {
@@ -10226,18 +10453,62 @@
             }
             basketEntry.addRelationship(item, 'selected-item');
         };
+        ReplaceItemService.prototype.createAddIngredientFromReplaceAction = function (item) {
+            var _this = this;
+            var _a, _b;
+            var guests = +((_a = this.recipe) === null || _a === void 0 ? void 0 : _a.modifiedGuests) || +((_b = this.recipe) === null || _b === void 0 ? void 0 : _b.guests) || 4;
+            var newEntry$ = this.ingredient && this.recipe ?
+                this.basketsService.basketEntryFromIngredient(this.ingredient.id, guests, true, item.id) :
+                rxjs.of(this.basketEntry);
+            return newEntry$.pipe(operators.map(function (newEntry) {
+                var newBasketEntry = deepCloneWithClass(_this.basketEntry);
+                newBasketEntry.quantityToAdd = newEntry.quantityToAdd;
+                _this.replaceRelationship(newBasketEntry, item);
+                return new AddIngredientFromReplaceAction(newBasketEntry, { item: item }, _this.basketsService, _this.basketEntriesService);
+            }));
+        };
+        ReplaceItemService.prototype.listenToAddActionFailure = function (addAction, attemptedItem, basketEntry) {
+            var _this = this;
+            if (basketEntry === void 0) { basketEntry = this.basketEntry; }
+            var isReplaceAdd = addAction instanceof AddIngredientFromReplaceAction;
+            addAction.onTimeout.pipe(operators.take(1)).subscribe(function () {
+                _this.handleAddTimeout(attemptedItem, basketEntry, isReplaceAdd);
+            });
+            addAction.onError.pipe(operators.take(1)).subscribe(function () {
+                _this.clearReplaceLoadingState();
+            });
+        };
         /**
-         * Rolls back the replacement process by resetting loading states and
-         * restoring the previous selected item in the basket entry.
+         * After a failed replace-add, the retailer already removed the old product but Mealz was never updated
+         * (remove-from-replace is retailer-only). reloadBasket would re-fetch Mealz and still show the old product
+         * as active. syncMealzBasketWithRetailerCart is too broad and risky while other actions may be pending.
+         * A targeted remove-recipe aligns Mealz with the retailer for this ingredient only.
          */
-        ReplaceItemService.prototype.rollbackReplace = function () {
+        ReplaceItemService.prototype.confirmMealzRemoveAfterReplaceAddFailure = function () {
+            var _a;
+            if (!((_a = this.ingredient) === null || _a === void 0 ? void 0 : _a.id)) {
+                return;
+            }
+            var basketEntryToRemove = deepCloneWithClass(this.basketEntry);
+            this.basketsService.removeIngredientFromRecipe(basketEntryToRemove, this.ingredient.id, 0).pipe(operators.take(1)).subscribe();
+        };
+        ReplaceItemService.prototype.handleAddTimeout = function (attemptedItem, basketEntry, isReplaceAdd) {
+            if (basketEntry === void 0) { basketEntry = this.basketEntry; }
+            if (isReplaceAdd === void 0) { isReplaceAdd = false; }
+            if (isReplaceAdd) {
+                this.confirmMealzRemoveAfterReplaceAddFailure();
+            }
+            this.clearReplaceLoadingState();
+            this.replaceRelationship(basketEntry, attemptedItem);
+            this.storeOutOfStockService.persistOutOfStock(basketEntry);
+            this.contextRegistryService.drawerErrorToast.emit({
+                code: UNAVAILABLE_PRODUCT_ADD_ERROR_CODE
+            });
+        };
+        ReplaceItemService.prototype.clearReplaceLoadingState = function () {
             this.recipeDetailsService.ingredientToBasketLoading = false;
             this.recipeDetailsService.updateIngredientFromBasketLoading = false;
             this.replaceItemLoading$.next(undefined);
-            this.basketEntry.relationships['selected-item'].data = this.previousItem;
-            if (this.timeOutAction) {
-                this.timeOutAction();
-            }
         };
         /**
          * Creates a ParsedMethod for adding an ingredient to a basket.
@@ -10259,7 +10530,7 @@
          * Updates loading states, creates an AddIngredientAction for the new basket entry,
          * and adds it to the synchronization service's action list.
          */
-        ReplaceItemService.prototype.handleAddToBasketResponse = function (newEntry, searchString, eventTrace) {
+        ReplaceItemService.prototype.handleAddToBasketResponse = function (newEntry, searchString, eventTrace, attemptedItem) {
             this.updateLoadingStates();
             var newBasketEntry = deepCloneWithClass(this.basketEntry);
             newBasketEntry.quantityToAdd = newEntry.quantityToAdd;
@@ -10270,19 +10541,11 @@
                 previousItem: this.previousItem,
                 searchString: searchString
             }, this.basketsService);
-            this.handleAddIngredientActionErrors(addIngredient);
-            // No need to send entry.added event, because it is done in the action
+            this.handleAddIngredientActionErrors(addIngredient, attemptedItem);
             return rxjs.of(addIngredient);
         };
-        /**
-         * Listens for errors or timeouts in the given AddIngredientAction and
-         * calls rollbackReplace() when one is encountered.
-         */
-        ReplaceItemService.prototype.handleAddIngredientActionErrors = function (addIngredient) {
-            var _this = this;
-            rxjs.merge(addIngredient.onError, addIngredient.onTimeout).pipe(operators.take(1)).subscribe(function () {
-                _this.rollbackReplace();
-            });
+        ReplaceItemService.prototype.handleAddIngredientActionErrors = function (addIngredient, attemptedItem) {
+            this.listenToAddActionFailure(addIngredient, attemptedItem);
         };
         /**
          * Updates the loading states for ingredient and basket operations.
@@ -10327,7 +10590,7 @@
          */
         ReplaceItemService.prototype.addToBasket = function (item, searchString, eventTrace) {
             var _this = this;
-            return this.recipeDetailsService.canAddProductToBasket(this.getAddIngredientMethod(eventTrace, searchString), eventTrace, this.recipe).pipe(operators.filter(function (passed) { return passed; }), operators.switchMap(function () { return _this.basketsService.basketEntryFromIngredient(_this.ingredient.id, +_this.recipe.modifiedGuests, true, item.id); }), operators.switchMap(function (newEntry) { return _this.handleAddToBasketResponse(newEntry, searchString, eventTrace); }));
+            return this.recipeDetailsService.canAddProductToBasket(this.getAddIngredientMethod(eventTrace, searchString), eventTrace, this.recipe).pipe(operators.filter(function (passed) { return passed; }), operators.switchMap(function () { return _this.basketsService.basketEntryFromIngredient(_this.ingredient.id, +_this.recipe.modifiedGuests, true, item.id); }), operators.switchMap(function (newEntry) { return _this.handleAddToBasketResponse(newEntry, searchString, eventTrace, item); }));
         };
         /**
          * Replaces the item in the given basket entry with the given item
@@ -10366,7 +10629,7 @@
         };
         return ReplaceItemService;
     }());
-    ReplaceItemService.ɵfac = function ReplaceItemService_Factory(t) { return new (t || ReplaceItemService)(i0__namespace.ɵɵinject(BasketsService), i0__namespace.ɵɵinject(BasketEntriesService), i0__namespace.ɵɵinject(ItemsService), i0__namespace.ɵɵinject(RecipeDetailsService), i0__namespace.ɵɵinject(BasketsSynchronizerService), i0__namespace.ɵɵinject(IgnoredIngredientsService), i0__namespace.ɵɵinject(RecipesService), i0__namespace.ɵɵinject(AnalyticsService)); };
+    ReplaceItemService.ɵfac = function ReplaceItemService_Factory(t) { return new (t || ReplaceItemService)(i0__namespace.ɵɵinject(BasketsService), i0__namespace.ɵɵinject(BasketEntriesService), i0__namespace.ɵɵinject(ItemsService), i0__namespace.ɵɵinject(RecipeDetailsService), i0__namespace.ɵɵinject(BasketsSynchronizerService), i0__namespace.ɵɵinject(IgnoredIngredientsService), i0__namespace.ɵɵinject(RecipesService), i0__namespace.ɵɵinject(AnalyticsService), i0__namespace.ɵɵinject(StoreOutOfStockService), i0__namespace.ɵɵinject(ContextRegistryService)); };
     ReplaceItemService.ɵprov = i0__namespace.ɵɵdefineInjectable({ token: ReplaceItemService, factory: ReplaceItemService.ɵfac, providedIn: 'root' });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ReplaceItemService, [{
@@ -10374,17 +10637,19 @@
                 args: [{
                         providedIn: 'root'
                     }]
-            }], function () { return [{ type: BasketsService }, { type: BasketEntriesService }, { type: ItemsService }, { type: RecipeDetailsService }, { type: BasketsSynchronizerService }, { type: IgnoredIngredientsService }, { type: RecipesService }, { type: AnalyticsService }]; }, null);
+            }], function () { return [{ type: BasketsService }, { type: BasketEntriesService }, { type: ItemsService }, { type: RecipeDetailsService }, { type: BasketsSynchronizerService }, { type: IgnoredIngredientsService }, { type: RecipesService }, { type: AnalyticsService }, { type: StoreOutOfStockService }, { type: ContextRegistryService }]; }, null);
     })();
 
     var RecipeDetailsProductsService = /** @class */ (function () {
-        function RecipeDetailsProductsService(basketsService, priceService, ignoredBasketsService, replaceItemService, contextRegistryService, basketSynchroService) {
+        function RecipeDetailsProductsService(basketsService, priceService, ignoredBasketsService, replaceItemService, contextRegistryService, basketSynchroService, storeOutOfStockService) {
+            var _this = this;
             this.basketsService = basketsService;
             this.priceService = priceService;
             this.ignoredBasketsService = ignoredBasketsService;
             this.replaceItemService = replaceItemService;
             this.contextRegistryService = contextRegistryService;
             this.basketSynchroService = basketSynchroService;
+            this.storeOutOfStockService = storeOutOfStockService;
             this.productsByCategory = {
                 toPickProducts: [],
                 oftenIgnoredProducts: []
@@ -10395,6 +10660,10 @@
             this.productsLoading$ = new rxjs.BehaviorSubject(false);
             this.ingredientToBasketLoading$ = new rxjs.BehaviorSubject(false);
             this.updateIngredientFromBasketLoading$ = new rxjs.BehaviorSubject(false);
+            this.storeOutOfStockService.outOfStockPersisted$.subscribe(function () {
+                _this.products$.value.forEach(function (product) { return _this.applyOutOfStockFromStorage(product); });
+                _this.emitProductsUpdate();
+            });
         }
         RecipeDetailsProductsService.prototype.initDefaultState = function () {
             this.resetProductsByCategory();
@@ -10439,6 +10708,7 @@
             return this.basketSynchroService.entryWillBeAdded((_a = basketEntry.selectedItem) === null || _a === void 0 ? void 0 : _a.extId);
         };
         RecipeDetailsProductsService.prototype.setProductsByCategory = function (products) {
+            var e_1, _b, e_2, _c;
             var _this = this;
             this.resetProductsByCategory();
             // Iterate over each product in the entriesWithIngredients array
@@ -10446,6 +10716,7 @@
                 var basketEntry = product.basketEntry;
                 var status = basketEntry.status;
                 _this.updateIngredientIgnoredStatus(product);
+                _this.applyOutOfStockFromStorage(product);
                 _this.updateProductAvailabilityStatus(product);
                 _this.computeProductPriceDetails(product, _this.priceService.getPriceFromBasketEntry(basketEntry));
                 // Check if the product is often ignored based on basketEntryStatus
@@ -10458,6 +10729,37 @@
                     _this.updateRecipePrice(product);
                 }
             });
+            var displayIndex = 0;
+            try {
+                for (var _d = __values(this.productsByCategory.toPickProducts), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var product = _e.value;
+                    if (product.ingredient) {
+                        product.ingredient.index = displayIndex++;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            try {
+                for (var _f = __values(this.productsByCategory.oftenIgnoredProducts), _g = _f.next(); !_g.done; _g = _f.next()) {
+                    var product = _g.value;
+                    if (product.ingredient) {
+                        product.ingredient.index = displayIndex++;
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_g && !_g.done && (_c = _f.return)) _c.call(_f);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
             this.sendEmitToUpdateRecipePrice();
             this.products$.next(products);
             this.updateIngredientFromBasketLoading$.next(false);
@@ -10490,6 +10792,7 @@
                 if (currentProduct) {
                     currentProduct.basketEntry.quantity = product.basketEntry.quantity;
                     currentProduct.basketEntry.quantityToAdd = product.basketEntry.quantityToAdd;
+                    _this.applyOutOfStockFromStorage(currentProduct);
                     if (currentProduct.price) {
                         _this.computeProductPriceDetails(currentProduct, currentProduct.price);
                     }
@@ -10510,6 +10813,17 @@
                 }
             });
         };
+        RecipeDetailsProductsService.prototype.emitProductsUpdate = function () {
+            this.products$.next(__spread(this.products$.value));
+            this.productsByCategory$.next(this.productsByCategory);
+            this.ingredientToBasketLoading$.next(false);
+            this.updateIngredientFromBasketLoading$.next(false);
+        };
+        RecipeDetailsProductsService.prototype.applyOutOfStockFromStorage = function (product) {
+            if (this.storeOutOfStockService.isOutOfStockFromStorage(product.basketEntry)) {
+                product.basketEntry.status = 'out_of_stock';
+            }
+        };
         RecipeDetailsProductsService.prototype.updateIngredientIgnoredStatus = function (product) {
             if (this.ignoredBasketsService.isIngredientIgnored(product.ingredient.id)) {
                 product.basketEntry.status = 'ignored';
@@ -10518,7 +10832,7 @@
         RecipeDetailsProductsService.prototype.updateProductAvailabilityStatus = function (product) {
             var basketEntry = product.basketEntry;
             var id = basketEntry.id, selectedItem = basketEntry.selectedItem, recipesIds = basketEntry.recipesIds, status = basketEntry.status;
-            if (['often_deleted', 'deleted', 'ignored'].includes(status)) {
+            if (['often_deleted', 'deleted', 'ignored', 'out_of_stock'].includes(status)) {
                 return;
             }
             if (id === '-1') {
@@ -10571,7 +10885,7 @@
         };
         return RecipeDetailsProductsService;
     }());
-    RecipeDetailsProductsService.ɵfac = function RecipeDetailsProductsService_Factory(t) { return new (t || RecipeDetailsProductsService)(i0__namespace.ɵɵinject(BasketsService), i0__namespace.ɵɵinject(PriceService), i0__namespace.ɵɵinject(IgnoredIngredientsService), i0__namespace.ɵɵinject(ReplaceItemService), i0__namespace.ɵɵinject(ContextRegistryService), i0__namespace.ɵɵinject(BasketsSynchronizerService)); };
+    RecipeDetailsProductsService.ɵfac = function RecipeDetailsProductsService_Factory(t) { return new (t || RecipeDetailsProductsService)(i0__namespace.ɵɵinject(BasketsService), i0__namespace.ɵɵinject(PriceService), i0__namespace.ɵɵinject(IgnoredIngredientsService), i0__namespace.ɵɵinject(ReplaceItemService), i0__namespace.ɵɵinject(ContextRegistryService), i0__namespace.ɵɵinject(BasketsSynchronizerService), i0__namespace.ɵɵinject(StoreOutOfStockService)); };
     RecipeDetailsProductsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ token: RecipeDetailsProductsService, factory: RecipeDetailsProductsService.ɵfac, providedIn: 'root' });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RecipeDetailsProductsService, [{
@@ -10579,7 +10893,7 @@
                 args: [{
                         providedIn: 'root'
                     }]
-            }], function () { return [{ type: BasketsService }, { type: PriceService }, { type: IgnoredIngredientsService }, { type: ReplaceItemService }, { type: ContextRegistryService }, { type: BasketsSynchronizerService }]; }, null);
+            }], function () { return [{ type: BasketsService }, { type: PriceService }, { type: IgnoredIngredientsService }, { type: ReplaceItemService }, { type: ContextRegistryService }, { type: BasketsSynchronizerService }, { type: StoreOutOfStockService }]; }, null);
     })();
 
     var RecipeDetailsProductsPlannerService = /** @class */ (function () {
@@ -10954,7 +11268,7 @@
     };
     var NewRecipeDetailsService = /** @class */ (function () {
         /** ********* END VARIABLES FROM COMPONENT ********* **/
-        function NewRecipeDetailsService(analyticsService, basketsService, recipeService, pendingBasketMethodsService, posService, basketSynchroService, priceService, contextRegistryService, sponsorBlocksService, recipesService, seoService, storeLocatorService, recipeDetailsProductsService, recipeDetailsProductsPlannerService, ignoredBasketsService, locale) {
+        function NewRecipeDetailsService(analyticsService, basketsService, recipeService, pendingBasketMethodsService, posService, basketSynchroService, priceService, contextRegistryService, sponsorBlocksService, recipesService, seoService, storeLocatorService, recipeDetailsProductsService, recipeDetailsProductsPlannerService, ignoredBasketsService, storeOutOfStockService, locale) {
             this.analyticsService = analyticsService;
             this.basketsService = basketsService;
             this.recipeService = recipeService;
@@ -10970,6 +11284,7 @@
             this.recipeDetailsProductsService = recipeDetailsProductsService;
             this.recipeDetailsProductsPlannerService = recipeDetailsProductsPlannerService;
             this.ignoredBasketsService = ignoredBasketsService;
+            this.storeOutOfStockService = storeOutOfStockService;
             this.locale = locale;
             this.totalProducts$ = new rxjs.BehaviorSubject(0);
             this.allIngredientsToBasketLoading$ = new rxjs.BehaviorSubject(false);
@@ -11118,7 +11433,7 @@
                     return _this.setupRecipe(recipeDisplay.recipe);
                 }
                 else {
-                    _this.initDefaultState(); // This can also reset the state when no recipe is displayed
+                    _this.initDefaultState();
                     _this.checkIfPosIsInitializedAndValid();
                     return rxjs.of(null);
                 }
@@ -11126,7 +11441,7 @@
         };
         NewRecipeDetailsService.prototype.listenToBasket = function () {
             var _this = this;
-            this.subscriptions.push(this.basketsService._basket$.pipe(operators.filter(function () { return !!_this.recipe; }), operators.switchMap(function () {
+            this.subscriptions.push(this.basketsService._basket$.pipe(operators.filter(function () { var _a; return !!((_a = _this.recipesService.displayedRecipe$.value) === null || _a === void 0 ? void 0 : _a.recipe); }), operators.switchMap(function () {
                 if (_this.recipesService.isRecipeDetailsFromPlanner) {
                     return _this.loadPlannerProducts();
                 }
@@ -11191,14 +11506,14 @@
                 _this.basketsService.updateRecipesInBasket([_this.recipe.id], _this.recipe.modifiedGuests, eventTrace, true);
                 _this.recipeDetailsProductsService.getIngredientsBasketEntries(_this.recipe.ingredients, _this.recipe.modifiedGuests, false).pipe(operators.take(1)).subscribe(function (products) {
                     if (inBasket) {
-                        var filteredProducts = products.filter(function (_a) {
-                            var basketEntry = _a.basketEntry;
+                        var filteredProducts = products.filter(function (_b) {
+                            var basketEntry = _b.basketEntry;
                             return basketEntry.status === 'active' &&
                                 basketEntry.id !== '-1' &&
                                 basketEntry.recipesIds.includes(+_this.recipe.id);
                         });
-                        var updateActions = filteredProducts.map(function (_a) {
-                            var basketEntry = _a.basketEntry;
+                        var updateActions = filteredProducts.map(function (_b) {
+                            var basketEntry = _b.basketEntry;
                             var newBasketEntry = deepCloneWithClass(basketEntry); // Clone for immutability
                             return new UpdateRecipeFromGuestAction(newBasketEntry, {
                                 eventTrace: eventTrace,
@@ -11236,20 +11551,40 @@
                             productsToAdd_1.push(re);
                         }
                     }); });
-                    var addRecipes = productsToAdd_1.map(function (re) { return new AddRecipeAction(re.entry, {
-                        recipeId: _this.recipe.id,
-                        ingredientId: re.ingredientId,
-                        eventTrace: eventTrace
-                    }, _this.basketsService); });
-                    var onTimeouts = addRecipes.map(function (action) { return action.onTimeout; });
-                    var onErrors = addRecipes.map(function (action) { return action.onError; });
-                    var onSuccesses = addRecipes.map(function (action) { return action.onSuccess; });
-                    if (addRecipes.length > 0) {
-                        rxjs.merge.apply(void 0, __spread(onSuccesses, onTimeouts, onErrors)).pipe(operators.take(addRecipes.length)) // Take the same number of emissions as actions
+                    var addRecipes_1 = productsToAdd_1.map(function (re) {
+                        var _a;
+                        return new AddRecipeAction(re.entry, {
+                            recipeId: _this.recipe.id,
+                            ingredientId: re.ingredientId,
+                            eventTrace: {
+                                originPath: eventTrace.originPath,
+                                props: Object.assign(Object.assign({}, eventTrace.props), { index: (_a = re.index) === null || _a === void 0 ? void 0 : _a.toString() })
+                            }
+                        }, _this.basketsService);
+                    });
+                    var failedAddCount_1 = 0;
+                    productsToAdd_1.forEach(function (productToAdd, index) {
+                        addRecipes_1[index].onTimeout.pipe(operators.take(1)).subscribe(function () {
+                            failedAddCount_1 += 1;
+                            _this.storeOutOfStockService.persistOutOfStock(productToAdd.entry);
+                        });
+                    });
+                    var onTimeouts = addRecipes_1.map(function (action) { return action.onTimeout; });
+                    var onErrors = addRecipes_1.map(function (action) { return action.onError; });
+                    var onSuccesses = addRecipes_1.map(function (action) { return action.onSuccess; });
+                    if (addRecipes_1.length > 0) {
+                        rxjs.merge.apply(void 0, __spread(onSuccesses, onTimeouts, onErrors)).pipe(operators.take(addRecipes_1.length)) // Take the same number of emissions as actions
                             .subscribe({
-                            complete: function () { return _this.allIngredientsToBasketLoading$.next(false); }
+                            complete: function () {
+                                _this.allIngredientsToBasketLoading$.next(false);
+                                if (failedAddCount_1 > 0) {
+                                    _this.contextRegistryService.drawerErrorToast.emit({
+                                        code: unavailableProductAddErrorCode(failedAddCount_1)
+                                    });
+                                }
+                            }
                         });
-                        _this.basketSynchroService.addToActionList(addRecipes);
+                        _this.basketSynchroService.addToActionList(addRecipes_1);
                     }
                     else {
                         _this.allIngredientsToBasketLoading$.next(false);
@@ -11279,7 +11614,13 @@
                 searchString: null
             }, _this.basketsService); }), operators.tap(function (addIngredient) {
                 _this.basketSynchroService.addToActionList([addIngredient]);
-            }), operators.switchMap(function (addIngredient) { return rxjs.merge(addIngredient.onError, addIngredient.onTimeout).pipe(operators.take(1), operators.tap(function () { return _this.recipeDetailsProductsService.ingredientToBasketLoading$.next(false); })); })).subscribe());
+            }), operators.switchMap(function (addIngredient) { return rxjs.merge(addIngredient.onTimeout.pipe(operators.take(1), operators.tap(function () {
+                _this.storeOutOfStockService.persistOutOfStock(product.basketEntry);
+                _this.recipeDetailsProductsService.ingredientToBasketLoading$.next(false);
+                _this.contextRegistryService.drawerErrorToast.emit({
+                    code: unavailableProductAddErrorCode(1)
+                });
+            })), addIngredient.onError.pipe(operators.take(1), operators.tap(function () { return _this.recipeDetailsProductsService.ingredientToBasketLoading$.next(false); }))); })).subscribe());
         };
         NewRecipeDetailsService.prototype.ingredientRemoved = function (ingredient, eventTrace) {
             var _this = this;
@@ -11337,9 +11678,14 @@
         NewRecipeDetailsService.prototype.remainingProducts = function () {
             var _this = this;
             return this.remainingBasketEntries.reduce(function (result, be) {
+                var _a;
                 var matchingProduct = _this.recipeDetailsProductsService.products$.value.find(function (product) { return product.basketEntry.name === be.name; });
                 if (matchingProduct) {
-                    result.push({ ingredientId: matchingProduct.ingredient.id, entry: matchingProduct.basketEntry });
+                    result.push({
+                        ingredientId: matchingProduct.ingredient.id,
+                        entry: matchingProduct.basketEntry,
+                        index: (_a = matchingProduct.ingredient) === null || _a === void 0 ? void 0 : _a.index
+                    });
                 }
                 return result;
             }, []);
@@ -11362,7 +11708,7 @@
         };
         return NewRecipeDetailsService;
     }());
-    NewRecipeDetailsService.ɵfac = function NewRecipeDetailsService_Factory(t) { return new (t || NewRecipeDetailsService)(i0__namespace.ɵɵinject(AnalyticsService), i0__namespace.ɵɵinject(BasketsService), i0__namespace.ɵɵinject(RecipesService), i0__namespace.ɵɵinject(PendingBasketMethodsService), i0__namespace.ɵɵinject(PointOfSalesService), i0__namespace.ɵɵinject(BasketsSynchronizerService), i0__namespace.ɵɵinject(PriceService), i0__namespace.ɵɵinject(ContextRegistryService), i0__namespace.ɵɵinject(SponsorBlockService), i0__namespace.ɵɵinject(RecipesService), i0__namespace.ɵɵinject(SeoService), i0__namespace.ɵɵinject(StoreLocatorService), i0__namespace.ɵɵinject(RecipeDetailsProductsService), i0__namespace.ɵɵinject(RecipeDetailsProductsPlannerService), i0__namespace.ɵɵinject(IgnoredIngredientsService), i0__namespace.ɵɵinject(i0.LOCALE_ID)); };
+    NewRecipeDetailsService.ɵfac = function NewRecipeDetailsService_Factory(t) { return new (t || NewRecipeDetailsService)(i0__namespace.ɵɵinject(AnalyticsService), i0__namespace.ɵɵinject(BasketsService), i0__namespace.ɵɵinject(RecipesService), i0__namespace.ɵɵinject(PendingBasketMethodsService), i0__namespace.ɵɵinject(PointOfSalesService), i0__namespace.ɵɵinject(BasketsSynchronizerService), i0__namespace.ɵɵinject(PriceService), i0__namespace.ɵɵinject(ContextRegistryService), i0__namespace.ɵɵinject(SponsorBlockService), i0__namespace.ɵɵinject(RecipesService), i0__namespace.ɵɵinject(SeoService), i0__namespace.ɵɵinject(StoreLocatorService), i0__namespace.ɵɵinject(RecipeDetailsProductsService), i0__namespace.ɵɵinject(RecipeDetailsProductsPlannerService), i0__namespace.ɵɵinject(IgnoredIngredientsService), i0__namespace.ɵɵinject(StoreOutOfStockService), i0__namespace.ɵɵinject(i0.LOCALE_ID)); };
     NewRecipeDetailsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ token: NewRecipeDetailsService, factory: NewRecipeDetailsService.ɵfac, providedIn: 'root' });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NewRecipeDetailsService, [{
@@ -11371,7 +11717,7 @@
                         providedIn: 'root'
                     }]
             }], function () {
-            return [{ type: AnalyticsService }, { type: BasketsService }, { type: RecipesService }, { type: PendingBasketMethodsService }, { type: PointOfSalesService }, { type: BasketsSynchronizerService }, { type: PriceService }, { type: ContextRegistryService }, { type: SponsorBlockService }, { type: RecipesService }, { type: SeoService }, { type: StoreLocatorService }, { type: RecipeDetailsProductsService }, { type: RecipeDetailsProductsPlannerService }, { type: IgnoredIngredientsService }, { type: undefined, decorators: [{
+            return [{ type: AnalyticsService }, { type: BasketsService }, { type: RecipesService }, { type: PendingBasketMethodsService }, { type: PointOfSalesService }, { type: BasketsSynchronizerService }, { type: PriceService }, { type: ContextRegistryService }, { type: SponsorBlockService }, { type: RecipesService }, { type: SeoService }, { type: StoreLocatorService }, { type: RecipeDetailsProductsService }, { type: RecipeDetailsProductsPlannerService }, { type: IgnoredIngredientsService }, { type: StoreOutOfStockService }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [i0.LOCALE_ID]
                         }] }];
@@ -11447,7 +11793,8 @@
                     },
                     eventSent$: this.analyticsService.eventEmitter,
                     setAbTestKey: function (key) { return _this.analyticsService.setAbTestKey(key); },
-                    attachRecipeCardShowTracking: attachRecipeCardShowTracking
+                    attachRecipeCardShowTracking: attachRecipeCardShowTracking,
+                    attachProductShowTracking: attachProductShowTracking
                 },
                 basket: {
                     basketIsReady$: this.basketsService.basketStats$.pipe(operators.skipWhile(function (stats) { return !stats; }), operators.take(1), operators.map(function () { return true; })),
@@ -11761,6 +12108,9 @@
                 config: {
                     logLevel: this.logLevel$
                 },
+                drawer: {
+                    errorToast: function () { return _this.contextRegistryService.drawerErrorToast; }
+                },
                 planner: {
                     itemToReplace$: this.recipeDetailsProductsPlannerService.itemToReplace$,
                     itemsWithPricesList$: this.recipeDetailsProductsPlannerService.itemsWithPricesList$,
@@ -12157,6 +12507,7 @@
             if (!recipeId) {
                 return rxjs.of(void 0);
             }
+            ProductShowTracker.getInstance().clearForRecipe(recipeId);
             return this.recipesService.get(recipeId, { include: ['ingredients', 'recipe-steps', 'recipe-type', 'sponsors', 'tags', 'recipe-provider'] })
                 .pipe(operators.take(1), operators.switchMap(function (recipe) {
                 if (guests != null) {
@@ -13458,7 +13809,7 @@
         env: 'prod',
         miamAPI: 'https://api.miam.tech',
         miamWeb: 'https://miam.tech',
-        mealzComponents: 'https://cdn.jsdelivr.net/npm/mealz-components@2.11/dist',
+        mealzComponents: 'https://cdn.jsdelivr.net/npm/mealz-components@2.12/dist',
         mealzSsrApi: 'https://ssr-api.mealz.ai',
         lang: 'fr',
         analyticsEnabled: true // Only used in DEV mode
@@ -16110,10 +16461,17 @@
             var _this = this;
             this.subscriptions.push(this.recipeDetailsService.productsByCategory$.subscribe(function () { return _this.isProductSponsored(); }), this.executeActionFromStorage(), this.loadOnRecipesActions(), this.loadOnIngredientsUpdate(), this.updateIngredientQuantityOnRecipeChange(), this.productIsBeingAdded(), this.scrollBackOnProductReplaced());
             this.getHeaderHeight();
+            this.productShowTrackingHandle = attachProductShowTracking({
+                element: this.elementRef.nativeElement,
+                product: this.product,
+                recipeId: this.recipeDetailsService.recipe.id,
+                analyticsPath: this.path || undefined
+            });
         };
         ProductCardComponent.prototype.ngOnDestroy = function () {
-            var _a;
-            (_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.forEach(function (sub) { return sub.unsubscribe(); });
+            var _a, _b;
+            (_a = this.productShowTrackingHandle) === null || _a === void 0 ? void 0 : _a.disconnect();
+            (_b = this.subscriptions) === null || _b === void 0 ? void 0 : _b.forEach(function (sub) { return sub.unsubscribe(); });
         };
         ProductCardComponent.prototype.scrollBackOnProductReplaced = function () {
             var _this = this;
@@ -17066,12 +17424,14 @@
             }
         };
         BasketPreviewProductComponent.prototype.removeProduct = function () {
+            var _a;
             this.analyticsService.sendEvent('entry.deleted', this.path, {
                 entry_name: this.basketEntry.name,
                 item_id: this.basketEntry.selectedItem.id,
                 ext_item_id: this.basketEntry.selectedItem.attributes['ext-id'],
                 item_ean: this.basketEntry.selectedItem.ean,
                 product_quantity: this.basketEntry.quantity.toString(),
+                product_base_price: ((_a = this.basketEntry.price) !== null && _a !== void 0 ? _a : 0).toString(),
                 recipe_id: this.basketEntry.recipesIds.length > 0 ? this.basketEntry.recipesIds[0].toString() : null
             });
             var deletedBasketEntry = deepCloneWithClass(this.basketEntry);