ng-miam 10.7.0 → 10.8.0

package/bundles/ng-miam.umd.js

@@ -1647,7 +1647,7 @@
         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,135 @@
         };
     }
 
+    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;
+        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
+        };
+    }
+    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, _o = options.analyticsPath, analyticsPath = _o === void 0 ? "/recipes/" + recipeId + PRODUCT_SHOW_ANALYTICS_PATH_SUFFIX : _o;
+        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 +3775,7 @@
         EventJourney["EMPTY"] = "";
     })(EventJourney || (EventJourney = {}));
 
-    var VERSION = "10.7.0"; // TODO: replace by ##VERSION## and update it in the CI/CD
+    var VERSION = "10.8.0"; // TODO: replace by ##VERSION## and update it in the CI/CD
 
     var ContextRegistryService = /** @class */ (function () {
         function ContextRegistryService() {
@@ -3655,6 +3784,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 +3924,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;
                 try {
                     var params = action.params;
                     // Determine add_source: replacement if previousItem exists, otherwise unit or bulk based on actions count
@@ -3827,6 +3957,7 @@
                         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
                     }, detectedJourney);
@@ -3840,12 +3971,14 @@
             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(),
+                    product_base_price: ((_a = action.params.basketEntry.price) !== null && _a !== void 0 ? _a : 0).toString(),
                     recipe_id: action.params.recipeId
                 }, detectedJourney);
             });
@@ -4078,10 +4211,11 @@
 
     var IgnoredIngredientsService = /** @class */ (function () {
         function IgnoredIngredientsService() {
+            this.storageKey = '_miam/ignoredBasketEntries';
         }
         Object.defineProperty(IgnoredIngredientsService.prototype, "ignoredIngredients", {
             get: function () {
-                return JSON.parse(sessionStorage.getItem('_miam/ignoredBasketEntries') || '[]');
+                return JSON.parse(localStorage.getItem(this.storageKey) || '[]');
             },
             enumerable: false,
             configurable: true
@@ -4092,16 +4226,16 @@
                 newIgnoredIngredients = [newIgnoredIngredients];
             }
             newIgnoredIngredients = newIgnoredIngredients.filter(function (e) { return !_this.isIngredientIgnored(e); });
-            sessionStorage.setItem('_miam/ignoredBasketEntries', JSON.stringify(__spread(this.ignoredIngredients, newIgnoredIngredients)));
+            localStorage.setItem(this.storageKey, JSON.stringify(__spread(this.ignoredIngredients, newIgnoredIngredients)));
         };
         IgnoredIngredientsService.prototype.isIngredientIgnored = function (ingredientId) {
             return this.ignoredIngredients.includes(ingredientId);
         };
         IgnoredIngredientsService.prototype.removeIngredientFromIgnored = function (ingredientId) {
-            sessionStorage.setItem('_miam/ignoredBasketEntries', JSON.stringify(this.ignoredIngredients.filter(function (e) { return e !== ingredientId; })));
+            localStorage.setItem(this.storageKey, JSON.stringify(this.ignoredIngredients.filter(function (e) { return e !== ingredientId; })));
         };
         IgnoredIngredientsService.prototype.resetIgnoredIngredients = function () {
-            sessionStorage.removeItem('_miam/ignoredBasketEntries');
+            localStorage.removeItem(this.storageKey);
         };
         return IgnoredIngredientsService;
     }());
@@ -5901,6 +6035,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 });
@@ -9268,6 +9405,7 @@
     var StoreOutOfStockService = /** @class */ (function () {
         function StoreOutOfStockService() {
             this.outOfStockEntries = [];
+            this.outOfStockPersisted$ = new rxjs.Subject();
             this.fetchCurrentOutOfStocks();
         }
         StoreOutOfStockService.prototype.fetchCurrentOutOfStocks = function () {
@@ -9286,13 +9424,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) {
@@ -9300,12 +9442,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));
             }
@@ -9875,9 +10030,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;
@@ -9939,7 +10093,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;
@@ -9987,8 +10143,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;
@@ -9998,6 +10162,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);
@@ -10031,14 +10197,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) {
@@ -10046,15 +10218,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);
                             }
                         });
                     }
@@ -10096,7 +10270,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);
                 }));
             }));
         };
@@ -10127,18 +10302,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);
         };
         /**
@@ -10163,43 +10333,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) {
@@ -10225,18 +10407,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.
@@ -10258,7 +10484,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;
@@ -10269,19 +10495,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.
@@ -10326,7 +10544,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
@@ -10365,7 +10583,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, [{
@@ -10373,17 +10591,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: []
@@ -10394,6 +10614,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();
@@ -10445,6 +10669,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
@@ -10489,6 +10714,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);
                     }
@@ -10509,6 +10735,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';
@@ -10517,7 +10754,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') {
@@ -10570,7 +10807,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, [{
@@ -10578,7 +10815,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 () {
@@ -10953,7 +11190,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;
@@ -10969,6 +11206,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);
@@ -11117,7 +11355,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);
                 }
@@ -11125,7 +11363,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();
                 }
@@ -11190,14 +11428,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,
@@ -11235,20 +11473,34 @@
                             productsToAdd_1.push(re);
                         }
                     }); });
-                    var addRecipes = productsToAdd_1.map(function (re) { return new AddRecipeAction(re.entry, {
+                    var addRecipes_1 = 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 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);
@@ -11278,7 +11530,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;
@@ -11361,7 +11619,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, [{
@@ -11370,7 +11628,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]
                         }] }];
@@ -11446,7 +11704,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; })),
@@ -11760,6 +12019,9 @@
                 config: {
                     logLevel: this.logLevel$
                 },
+                drawer: {
+                    errorToast: function () { return _this.contextRegistryService.drawerErrorToast; }
+                },
                 planner: {
                     itemToReplace$: this.recipeDetailsProductsPlannerService.itemToReplace$,
                     itemsWithPricesList$: this.recipeDetailsProductsPlannerService.itemsWithPricesList$,
@@ -12156,6 +12418,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) {
@@ -16109,10 +16372,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;
@@ -17065,12 +17335,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);