@colijnit/product 12.0.3 → 12.0.5

package/bundles/colijnit-product.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/mainapi'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@angular/common'), require('@angular/platform-browser/animations'), require('@angular/animations'), require('@angular/platform-browser'), require('@colijnit/corecomponents'), require('@colijnit/mainapi/build/model/co-document'), require('@colijnit/articleapi/build/model/configurator-statistics-environment')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/transactionapi/build/transaction', '@colijnit/mainapi', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@angular/common', '@angular/platform-browser/animations', '@angular/animations', '@angular/platform-browser', '@colijnit/corecomponents', '@colijnit/mainapi/build/model/co-document', '@colijnit/articleapi/build/model/configurator-statistics-environment'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.rxjs, global.options, global.articleFullObject, global.superArticle, global.articles, global.deliveryPrognosis, global.documentContent, global.businessObjectFactory, global.transaction, global.mainapi, global.ng.common.http, global.stringUtils, global.ng.common, global.ng.platformBrowser.animations, global.ng.animations, global.ng.platformBrowser, global.corecomponents, global.coDocument, global.configuratorStatisticsEnvironment));
-})(this, (function (exports, i0, rxjs, options, articleFullObject, superArticle, articles, deliveryPrognosis, documentContent, businessObjectFactory, transaction, mainapi, i1, stringUtils, common, animations$1, animations, i1$1, corecomponents, coDocument, configuratorStatisticsEnvironment) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/mainapi'), require('@colijnit/transactionapi/build/model/transaction-info-response.bo'), require('@colijnit/articleapi/build/model/article-extended.bo'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@angular/common'), require('@angular/animations'), require('@angular/platform-browser'), require('@colijnit/corecomponents'), require('@colijnit/mainapi/build/model/co-document'), require('@colijnit/articleapi/build/model/configurator-statistics-environment')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/transactionapi/build/transaction', '@colijnit/mainapi', '@colijnit/transactionapi/build/model/transaction-info-response.bo', '@colijnit/articleapi/build/model/article-extended.bo', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@angular/common', '@angular/animations', '@angular/platform-browser', '@colijnit/corecomponents', '@colijnit/mainapi/build/model/co-document', '@colijnit/articleapi/build/model/configurator-statistics-environment'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.rxjs, global.options, global.articleFullObject, global.superArticle, global.articles, global.deliveryPrognosis, global.documentContent, global.businessObjectFactory, global.transaction, global.mainapi, global.transactionInfoResponse_bo, global.articleExtended_bo, global.ng.common.http, global.stringUtils, global.ng.common, global.ng.animations, global.ng.platformBrowser, global.corecomponents, global.coDocument, global.configuratorStatisticsEnvironment));
+})(this, (function (exports, i0, rxjs, options, articleFullObject, superArticle, articles, deliveryPrognosis, documentContent, businessObjectFactory, transaction, mainapi, transactionInfoResponse_bo, articleExtended_bo, i1, stringUtils, common, animations, i1$1, corecomponents, coDocument, configuratorStatisticsEnvironment) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -31,8 +31,8 @@
         function Version() {
             this.name = "@colijnit/product";
             this.description = "Product detail page project for iOne";
-            this.symVer = "12.0.3";
-            this.publishDate = "14-10-2023 14:22:44";
+            this.symVer = "12.0.5";
+            this.publishDate = "30-11-2023 11:58:33";
         }
         return Version;
     }());
@@ -636,6 +636,11 @@
                 });
             });
         };
+        ProductConnectorAdapterService.prototype.convertArticleFullObjectToArticleExtended = function (article) {
+            if (article) {
+                return this._boFactory.makeWithRawBackendData(articleExtended_bo.ArticleExtended, article);
+            }
+        };
         ProductConnectorAdapterService.prototype.getDeliveryPrognosis = function (goodId, branchNr) {
             return __awaiter(this, void 0, void 0, function () {
                 var deliveryPrognosis;
@@ -671,6 +676,25 @@
                 });
             });
         };
+        ProductConnectorAdapterService.prototype.getArtStockStatus = function (goodId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.articleConnector.getArtStockStatus(goodId)];
+                        case 1:
+                            response = _a.sent();
+                            if (response && response.validationResult && response.validationResult.success) {
+                                return [2 /*return*/, response.resultObject];
+                            }
+                            else {
+                                return [2 /*return*/, null];
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         ProductConnectorAdapterService.prototype.getDeliveryDate2 = function (goodId) {
             return __awaiter(this, void 0, void 0, function () {
                 var response;
@@ -794,22 +818,19 @@
                 });
             });
         };
-        ProductConnectorAdapterService.prototype.addWebSessionTransactionLine = function (sku, quantity) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.transactionConnector.addWebSessionTransactionLine(sku, quantity)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
-                });
-            });
-        };
-        ProductConnectorAdapterService.prototype.getWebTransaction = function () {
+        ProductConnectorAdapterService.prototype.addWebSessionTransactionLine = function (transactionUuid, sku, quantity) {
             return __awaiter(this, void 0, void 0, function () {
+                var response, infoResponse;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.transactionConnector.getWebSessionSalesOrder()];
-                        case 1: return [2 /*return*/, _a.sent()];
+                        case 0: return [4 /*yield*/, this.transactionConnector.addWebSessionTransactionLine(transactionUuid, sku, quantity)];
+                        case 1:
+                            response = _a.sent();
+                            if (response && response.validationResult && response.validationResult.success) {
+                                infoResponse = this._boFactory.makeWithRawBackendData(transactionInfoResponse_bo.TransactionInfoResponse, response.resultObject);
+                                return [2 /*return*/, infoResponse.transactionInfo.uuid];
+                            }
+                            return [2 /*return*/, ""];
                     }
                 });
             });
@@ -847,6 +868,7 @@
                     "HEIGHT": "Hoogte",
                     "MATERIAL": "Materiaal",
                     "PRODUCT_IN_STOCK": "Op voorraad",
+                    "PRODUCT_LIMITED_STOCK": "Beperkt op voorraad",
                     "PRODUCT_NOT_IN_STOCK": "Niet op voorraad",
                     "PROPERTIES": "Eigenschappen",
                     "QUOTATION": "Quotatie",
@@ -876,6 +898,7 @@
                     "HEIGHT": "Höhe",
                     "MATERIAL": "Material",
                     "PRODUCT_IN_STOCK": "Auf lager",
+                    "PRODUCT_LIMITED_STOCK": "Begrentzt auf lager",
                     "PRODUCT_NOT_IN_STOCK": "Nicht auf lager",
                     "PROPERTIES": "Eigenschaften",
                     "QUOTATION": "Angebot",
@@ -1149,6 +1172,9 @@
             this._instanceId = instanceId;
             this._adapterService.setInstance(instanceId);
         };
+        ProductConnectorService.prototype.convertArticleFullObjectToArticleExtended = function (article) {
+            return this._adapterService.convertArticleFullObjectToArticleExtended(article);
+        };
         ProductConnectorService.prototype.getFullArticle = function (sku) {
             return __awaiter(this, void 0, void 0, function () {
                 var goodId;
@@ -1179,6 +1205,9 @@
                 });
             });
         };
+        ProductConnectorService.prototype.getArtStockStatus = function (goodId) {
+            return this._adapterService.getArtStockStatus(goodId);
+        };
         ProductConnectorService.prototype.getDeliveryDate2 = function (goodId) {
             return this._adapterService.getDeliveryDate2(goodId);
         };
@@ -1189,21 +1218,16 @@
             if (showLoader === void 0) { showLoader = true; }
             return this._adapterService.getJsonArticleFlatTree(goodId, goodType, quantity, showLoader, this._instanceId, configuratorStatistics);
         };
-        ProductConnectorService.prototype.addWebSessionTransactionLine = function (sku, quantity) {
+        ProductConnectorService.prototype.addWebSessionTransactionLine = function (transactionUuid, sku, quantity) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._adapterService.addWebSessionTransactionLine(sku, quantity)];
+                        case 0: return [4 /*yield*/, this._adapterService.addWebSessionTransactionLine(transactionUuid, sku, quantity)];
                         case 1: return [2 /*return*/, _a.sent()];
                     }
                 });
             });
         };
-        ProductConnectorService.prototype.getWebTransaction = function () {
-            this._adapterService.getWebTransaction().then(function (response) {
-                console.log(response);
-            });
-        };
         ProductConnectorService.prototype.onShowLoaderChange = function (showLoader) {
             this._shouldShowLoader = showLoader;
         };
@@ -1258,12 +1282,15 @@
             // this.sku = '1000234793';
             // this.sku = '1066';
             // this.sku = '104';
+            // this.sku = "70000107";
+            // this.sku = "grover";
             this._dictionary = _dictionary;
             this._jsonUtils = _jsonUtils;
             this._ione = _ione;
             this._changeDetector = _changeDetector;
             this._appEventService = _appEventService;
             this._settingsService = _settingsService;
+            this.handleAddArticleInternally = true;
             this.onAddToCart = new i0.EventEmitter();
             this.forceRenderImage = new i0.EventEmitter();
             this.onAlternativeClick = new i0.EventEmitter();
@@ -1274,11 +1301,10 @@
             this.openStockEvent = new i0.EventEmitter();
             this.settingsLoaded = false;
             this._subs = [];
-            // this.sku = "70000107";
             this._subs.push(
             // this._dictionary.dictionaryLoaded.subscribe(d => this.upAndLoaded = true),
-            this._appEventService.onAddToCart.subscribe(function (json) {
-                _this._handleAddToCart(json);
+            this._appEventService.onAddToCart.subscribe(function (data) {
+                _this._handleAddToCart(data);
             }), this._appEventService.onAddToQuote.subscribe(function (json) { return _this.onAddToQuote.emit(json); }), this._appEventService.onAlternativeClick.subscribe(function (article) { return _this.onAlternativeClick.emit(article); }), this._appEventService.onArticleInfoReceived.subscribe(function (info) { return _this._handleAnswerInfoReceived(info); }), this._appEventService.onArticleReceived.subscribe(function (article) { return _this.onArticleReceived.emit(article); }), this._appEventService.onSelectionsReceived.subscribe(function (selections) { return _this.onSelectionsReceived.emit(selections); }), this._settingsService.settingsLoaded.subscribe(function (loaded) {
                 _this.settingsLoaded = loaded;
             }));
@@ -1304,7 +1330,7 @@
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._settingsService.initializeSettings(this._settings !== undefined)];
+                        case 0: return [4 /*yield*/, this._settingsService.initializeSettings(this._settings === undefined)];
                         case 1:
                             _a.sent();
                             if (this._settings) {
@@ -1324,58 +1350,11 @@
         IoneProductComponent.prototype._handleAnswerInfoReceived = function (info) {
             this.onArticleInfoReceived.next(info);
         };
-        IoneProductComponent.prototype._handleAddToCart = function (json) {
+        IoneProductComponent.prototype._handleAddToCart = function (data) {
             return __awaiter(this, void 0, void 0, function () {
-                var articleTreeData, compositeGoods, _loop_1, this_1, i;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!this._settingsService.settings.createWebOrder) return [3 /*break*/, 7];
-                            if (!json) return [3 /*break*/, 7];
-                            articleTreeData = JSON.parse(json);
-                            if (!(articleTreeData.articleTree && articleTreeData.articleTree.article)) return [3 /*break*/, 7];
-                            if (!(articleTreeData.articleTree.compositeGoods && Array.isArray(articleTreeData.articleTree.compositeGoods) &&
-                                articleTreeData.articleTree.compositeGoods.length > 0 &&
-                                articleTreeData.articleTree.subArticles && Array.isArray(articleTreeData.articleTree.subArticles))) return [3 /*break*/, 5];
-                            compositeGoods = articleTreeData.articleTree.compositeGoods;
-                            compositeGoods.sort(function (a, b) { return a.versionNumber < b.versionNumber ? -1 : 1; });
-                            _loop_1 = function (i) {
-                                var good, subArticle;
-                                return __generator(this, function (_b) {
-                                    switch (_b.label) {
-                                        case 0:
-                                            good = compositeGoods[i];
-                                            subArticle = articleTreeData.articleTree.subArticles.find(function (s) { return s.goodId === good.memberGoodId; });
-                                            if (!subArticle) return [3 /*break*/, 2];
-                                            return [4 /*yield*/, this_1._ione.addWebSessionTransactionLine(subArticle.articleNumber, good.quantity)];
-                                        case 1:
-                                            _b.sent();
-                                            _b.label = 2;
-                                        case 2: return [2 /*return*/];
-                                    }
-                                });
-                            };
-                            this_1 = this;
-                            i = 0;
-                            _a.label = 1;
-                        case 1:
-                            if (!(i < compositeGoods.length)) return [3 /*break*/, 4];
-                            return [5 /*yield**/, _loop_1(i)];
-                        case 2:
-                            _a.sent();
-                            _a.label = 3;
-                        case 3:
-                            i++;
-                            return [3 /*break*/, 1];
-                        case 4: return [3 /*break*/, 7];
-                        case 5: return [4 /*yield*/, this._ione.addWebSessionTransactionLine(articleTreeData.articleTree.article.articleNumber, 1)];
-                        case 6:
-                            _a.sent();
-                            _a.label = 7;
-                        case 7:
-                            this.onAddToCart.emit(json);
-                            return [2 /*return*/];
-                    }
+                    this.onAddToCart.emit(data);
+                    return [2 /*return*/];
                 });
             });
         };
@@ -1387,12 +1366,7 @@
     IoneProductComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-ione-product',
-                    template: "\n      <app-product-page *ngIf=\"settingsLoaded\"\n                        (openStockEvent)=\"openStock()\" [sku]=\"sku\"\n      ></app-product-page>\n  ",
-                    providers: [
-                        ProductEventService,
-                        ProductConnectorAdapterService,
-                        ProductConnectorService
-                    ],
+                    template: "\n      <app-product-page *ngIf=\"settingsLoaded\"\n                        [createFrozenArticle]=\"handleAddArticleInternally\"\n                        (openStockEvent)=\"openStock()\" [sku]=\"sku\"\n      ></app-product-page>\n  ",
                     encapsulation: i0.ViewEncapsulation.Emulated,
                     styles: [""]
                 },] }
@@ -1408,6 +1382,7 @@
     IoneProductComponent.propDecorators = {
         sku: [{ type: i0.Input }],
         settings: [{ type: i0.Input }],
+        handleAddArticleInternally: [{ type: i0.Input }],
         onAddToCart: [{ type: i0.Output }],
         forceRenderImage: [{ type: i0.Output }],
         onAlternativeClick: [{ type: i0.Output }],
@@ -1521,6 +1496,7 @@
             this.settingsService = settingsService;
             this.appEventService = appEventService;
             this.icon = IconEnum;
+            this.createFrozenArticle = true;
             this.openStockEvent = new i0.EventEmitter();
             this.configurable = false;
             this.threeD = false;
@@ -1691,7 +1667,7 @@
     ProductPageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-product-page',
-                    template: "<ng-container *ngIf=\"settingsLoaded\">\r\n  <div class=\"page-wrapper\">\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <div class=\"product-image-container\">\r\n          <div class=\"product-page-block-selector-type\">\r\n            <app-product-selector-type class=\"default-padding\"\r\n              [(currentType)]=\"currentView\"\r\n              [show2D]=\"configurable\"\r\n              [show3D]=\"threeD\"\r\n            ></app-product-selector-type>\r\n          </div>\r\n          <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n            <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-configurator #configurator class=\"threed-configurator\"\r\n                                   [class.configurator-full-screen]=\"fullScreen\"\r\n                                   [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n                                   [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n              ></threed-configurator>\r\n            </ng-container>\r\n            <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n                     [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                     [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n                     (click)=\"showFullScreen()\"></co-icon>\r\n            <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n                     [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-description\">\r\n          <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n        </div>\r\n        <div class=\"product-page-block-additional\">\r\n          <div class=\"product-page-block-additional-description\">\r\n            <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n          </div>\r\n          <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n            <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n                               [pricing]=\"article?.pricing\"\r\n                               [configurable]=\"configurable\"\r\n            ></app-product-price>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-selections #selections class=\"threed-selections\" [class.show-selections]=\"configuring\" [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                                 [class.default-padding]=\"!fullScreen\"\r\n                                 [class.show-full-screen]=\"fullScreen\"\r\n                                 [class.mini-scrollbar]=\"fullScreen\"\r\n                                 [sku]=\"sku\"\r\n                                 [settings]=\"settings\"\r\n                                 (onUserActionFromThreeD)=\"configuring = true\"\r\n                                 (instanceSet)=\"setInstance($event)\"\r\n                                 (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n                                 (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n                                 (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n                                 (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n                                 (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n                                 (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n              ></threed-selections>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n            <app-product-addtocart\r\n                                   [configurable]=\"configurable\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n            <app-product-addtocart class=\"default-padding\"\r\n                                   [configurable]=\"false\"\r\n                                   [fullscreen]=\"fullScreen\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"product-page-block-variants\">\r\n            <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n          </div>\r\n          <div class=\"product-page-block-stock\">\r\n            <app-product-stock class=\"no-padding\" (openStockEvent)=\"openStock()\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-stock>\r\n          </div>\r\n          <div class=\"product-page-block-delivery\">\r\n            <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-related s-padding\">\r\n            <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"1\" [label]=\"'RELATED_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content no-top-margin\">\r\n      <div class=\"page-wrapper-full\">\r\n        <div class=\"product-page-block-alternatives s-padding\">\r\n          <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                               [articles]=\"article?.relatedArticles\" [refType]=\"4\" [isSmallModus]=\"false\" [label]=\"'ALTERNATIVE_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n",
+                    template: "<ng-container *ngIf=\"settingsLoaded\">\r\n  <div class=\"page-wrapper\">\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <div class=\"product-image-container\">\r\n          <div class=\"product-page-block-selector-type\">\r\n            <app-product-selector-type class=\"default-padding\"\r\n              [(currentType)]=\"currentView\"\r\n              [show2D]=\"configurable\"\r\n              [show3D]=\"threeD\"\r\n            ></app-product-selector-type>\r\n          </div>\r\n          <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n            <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-configurator #configurator class=\"threed-configurator\"\r\n                                   [class.configurator-full-screen]=\"fullScreen\"\r\n                                   [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n                                   [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n              ></threed-configurator>\r\n            </ng-container>\r\n            <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n                     [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                     [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n                     (click)=\"showFullScreen()\"></co-icon>\r\n            <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n                     [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-description\">\r\n          <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n        </div>\r\n        <div class=\"product-page-block-additional\">\r\n          <div class=\"product-page-block-additional-description\">\r\n            <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n          </div>\r\n          <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n            <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n                               [pricing]=\"article?.pricing\"\r\n                               [configurable]=\"configurable\"\r\n            ></app-product-price>\r\n            <ng-container *ngIf=\"settingsLoaded\">\r\n              <threed-selections #selections class=\"threed-selections\" [class.show-selections]=\"configuring\" [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n                                 [class.default-padding]=\"!fullScreen\"\r\n                                 [class.show-full-screen]=\"fullScreen\"\r\n                                 [class.mini-scrollbar]=\"fullScreen\"\r\n                                 [sku]=\"sku\"\r\n                                 [settings]=\"settings\"\r\n                                 (onUserActionFromThreeD)=\"configuring = true\"\r\n                                 (instanceSet)=\"setInstance($event)\"\r\n                                 (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n                                 (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n                                 (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n                                 (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n                                 (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n                                 (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n              ></threed-selections>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n            <app-product-addtocart\r\n                                   [configurable]=\"configurable\"\r\n                                   [createFrozenArticle]=\"createFrozenArticle\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n            <app-product-addtocart class=\"default-padding\"\r\n                                   [configurable]=\"false\"\r\n                                   [fullscreen]=\"fullScreen\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\r\n            ></app-product-addtocart>\r\n          </div>\r\n          <div class=\"product-page-block-variants\">\r\n            <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n          </div>\r\n          <div class=\"product-page-block-stock\">\r\n            <app-product-stock class=\"no-padding\" [goodId]=\"article?.goodId\" (openStockEvent)=\"openStock()\"></app-product-stock>\r\n          </div>\r\n          <div class=\"product-page-block-delivery\">\r\n            <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content\">\r\n      <div class=\"page-wrapper-left\">\r\n        <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n      </div>\r\n      <div class=\"page-wrapper-right\">\r\n        <div class=\"product-page-block-related s-padding\">\r\n            <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"1\" [label]=\"'RELATED_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"page-wrapper-content no-top-margin\">\r\n      <div class=\"page-wrapper-full\">\r\n        <div class=\"product-page-block-alternatives s-padding\">\r\n          <app-product-related *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                               [articles]=\"article?.relatedArticles\" [refType]=\"4\" [isSmallModus]=\"false\" [label]=\"'ALTERNATIVE_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n",
                     animations: [
                         animations.trigger('toggleFullScreen', [
                             animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
@@ -1741,6 +1717,7 @@
         fullscreenbutton: [{ type: i0.ViewChild, args: ['fullscreenbutton', { read: i0.ElementRef },] }],
         sku: [{ type: i0.Input }],
         settings: [{ type: i0.Input }],
+        createFrozenArticle: [{ type: i0.Input }],
         openStockEvent: [{ type: i0.Output }]
     };
 
@@ -2257,6 +2234,7 @@
             this._appEventService = _appEventService;
             this._settingsService = _settingsService;
             this.icon = IconEnum;
+            this.createFrozenArticle = true;
             this.configurable = false;
             this.configuring = false;
             this.fullscreen = false;
@@ -2283,15 +2261,22 @@
         };
         ProductAddtocartComponent.prototype.handleAddToCartClick = function (quantity) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, _b;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var _a, _b, _c, article;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
+                            if (!this.createFrozenArticle) return [3 /*break*/, 2];
                             _b = (_a = this._appEventService.onAddToCart).next;
+                            _c = {};
                             return [4 /*yield*/, this._getJSONFromArticleObject({ article: this.article, quantity: quantity })];
                         case 1:
-                            _b.apply(_a, [_c.sent()]);
-                            return [2 /*return*/];
+                            _b.apply(_a, [(_c.article = _d.sent(), _c.quantity = quantity, _c)]);
+                            return [3 /*break*/, 3];
+                        case 2:
+                            article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
+                            this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
+                            _d.label = 3;
+                        case 3: return [2 /*return*/];
                     }
                 });
             });
@@ -2348,6 +2333,7 @@
     ProductAddtocartComponent.propDecorators = {
         addToCartButton: [{ type: i0.ViewChild, args: ['addtocartbutton', { read: i0.ElementRef },] }],
         article: [{ type: i0.Input }],
+        createFrozenArticle: [{ type: i0.Input }],
         configurable: [{ type: i0.Input }],
         configuring: [{ type: i0.Input }],
         fullscreen: [{ type: i0.HostBinding, args: ['class.full-screen',] }, { type: i0.Input }],
@@ -2513,29 +2499,51 @@
             this._iconCache = _iconCache;
             this.icon = IconEnum;
             this.openStockEvent = new i0.EventEmitter();
+            this.inStock = false;
             this.iconData = this._iconCache.getIcon(this.icon.Warehouse);
         }
-        Object.defineProperty(ProductStockComponent.prototype, "stockAndDelivery", {
+        Object.defineProperty(ProductStockComponent.prototype, "goodId", {
+            get: function () {
+                return this._goodId;
+            },
             set: function (value) {
-                if (value) {
-                    this.numberInStock = value.stock;
-                }
+                this._goodId = value;
+                this._getStockStatus();
             },
             enumerable: false,
             configurable: true
         });
-        ProductStockComponent.prototype.ngOnInit = function () {
-        };
         ProductStockComponent.prototype.openStock = function () {
             this.openStockEvent.emit();
         };
+        ProductStockComponent.prototype._getStockStatus = function () {
+            var _this = this;
+            if (this.goodId) {
+                this._iOne.getArtStockStatus(this.goodId).then(function (result) {
+                    switch (result) {
+                        case 1: // niet op voorraad
+                            _this.stockLabel = 'PRODUCT_LIMITED_STOCK';
+                            _this.inStock = true;
+                            break;
+                        case 2:
+                            _this.stockLabel = 'PRODUCT_IN_STOCK';
+                            _this.inStock = true;
+                            break;
+                        default:
+                            _this.stockLabel = 'PRODUCT_NOT_IN_STOCK';
+                            _this.inStock = false;
+                            break;
+                    }
+                });
+            }
+        };
         return ProductStockComponent;
     }());
     ProductStockComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-product-stock',
-                    template: "\n    <!--<app-header [label]=\"'STOCK' | localize\"></app-header>-->\n    <!--<co-level-indicator [model]=\"'medium'\"></co-level-indicator>-->\n    <div class=\"product-stock-wrapper\">\n      <co-icon class=\"stock-icon\" [iconData]=\"iconData\"></co-icon>\n      <div class=\"product-stock-fields\" (click)=\"openStock()\">\n        <div class=\"pp-default-label in-stock\" [textContent]=\"'PRODUCT_IN_STOCK' | localize\" *ngIf=\"numberInStock > 0\"></div>\n        <div class=\"pp-default-label not-in-stock\" [textContent]=\"'PRODUCT_NOT_IN_STOCK' | localize\" *ngIf=\"!(numberInStock > 0)\"></div>\n      </div>\n    </div>\n  ",
-                    styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4;padding:20px 15px;cursor:pointer}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0;color:#2b60a7;text-decoration:underline}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#74B77F;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.not-in-stock:after{background:#f15152}@media screen and (max-width: 400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}\n"]
+                    template: "\n    <!--<app-header [label]=\"'STOCK' | localize\"></app-header>-->\n    <!--<co-level-indicator [model]=\"'medium'\"></co-level-indicator>-->\n    <div class=\"product-stock-wrapper\">\n      <co-icon class=\"stock-icon\" [iconData]=\"iconData\"></co-icon>\n      <div class=\"product-stock-fields\" (click)=\"openStock()\">\n        <div class=\"pp-default-label\" [class.in-stock]=\"inStock\" [textContent]=\"stockLabel | localize\"></div>\n      </div>\n    </div>\n  ",
+                    styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4;padding:20px 15px;cursor:pointer}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0;color:#2b60a7;text-decoration:underline}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#f15152;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.in-stock:after{background:#74B77F}@media screen and (max-width: 400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}\n"]
                 },] }
     ];
     ProductStockComponent.ctorParameters = function () { return [
@@ -2543,7 +2551,7 @@
         { type: IconCacheService }
     ]; };
     ProductStockComponent.propDecorators = {
-        stockAndDelivery: [{ type: i0.Input }],
+        goodId: [{ type: i0.Input }],
         openStockEvent: [{ type: i0.Output }]
     };
 
@@ -3095,7 +3103,7 @@
     IoneProductModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
-                        animations$1.BrowserAnimationsModule,
+                        // BrowserAnimationsModule,
                         common.CommonModule,
                         ProductPageModule
                     ],
@@ -3107,6 +3115,9 @@
                     ],
                     bootstrap: [
                         IoneProductComponent
+                    ],
+                    providers: [
+                        ProductSettingsService
                     ]
                 },] }
     ];