@colijnit/product 12.0.3 → 12.0.5

package/fesm2015/colijnit-product.js

@@ -11,11 +11,12 @@ import { DocumentContent } from '@colijnit/articleapi/build/model/document-conte
 import { BusinessObjectFactory } from '@colijnit/ioneconnector/build/service/business-object-factory';
 import { Transaction } from '@colijnit/transactionapi/build/transaction';
 import { MainApi } from '@colijnit/mainapi';
+import { TransactionInfoResponse } from '@colijnit/transactionapi/build/model/transaction-info-response.bo';
+import { ArticleExtended } from '@colijnit/articleapi/build/model/article-extended.bo';
 import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import { StringUtils } from '@colijnit/ioneconnector/build/utils/string-utils';
 import { CommonModule } from '@angular/common';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -28,8 +29,8 @@ class Version {
     constructor() {
         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";
     }
 }
 
@@ -136,6 +137,11 @@ class ProductConnectorAdapterService {
             return "";
         });
     }
+    convertArticleFullObjectToArticleExtended(article) {
+        if (article) {
+            return this._boFactory.makeWithRawBackendData(ArticleExtended, article);
+        }
+    }
     getDeliveryPrognosis(goodId, branchNr) {
         return __awaiter(this, void 0, void 0, function* () {
             const deliveryPrognosis = yield this.getSelectorDeliveryDate();
@@ -156,6 +162,17 @@ class ProductConnectorAdapterService {
             }
         });
     }
+    getArtStockStatus(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.articleConnector.getArtStockStatus(goodId);
+            if (response && response.validationResult && response.validationResult.success) {
+                return response.resultObject;
+            }
+            else {
+                return null;
+            }
+        });
+    }
     getDeliveryDate2(goodId) {
         return __awaiter(this, void 0, void 0, function* () {
             const response = yield this.articleConnector.getDeliveryDate2(goodId);
@@ -227,14 +244,14 @@ class ProductConnectorAdapterService {
             }
         });
     }
-    addWebSessionTransactionLine(sku, quantity) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.transactionConnector.addWebSessionTransactionLine(sku, quantity);
-        });
-    }
-    getWebTransaction() {
+    addWebSessionTransactionLine(transactionUuid, sku, quantity) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this.transactionConnector.getWebSessionSalesOrder();
+            const response = yield this.transactionConnector.addWebSessionTransactionLine(transactionUuid, sku, quantity);
+            if (response && response.validationResult && response.validationResult.success) {
+                const infoResponse = this._boFactory.makeWithRawBackendData(TransactionInfoResponse, response.resultObject);
+                return infoResponse.transactionInfo.uuid;
+            }
+            return "";
         });
     }
 }
@@ -269,6 +286,7 @@ class Dictionary {
                 "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",
@@ -298,6 +316,7 @@ class Dictionary {
                 "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",
@@ -527,6 +546,9 @@ class ProductConnectorService {
         this._instanceId = instanceId;
         this._adapterService.setInstance(instanceId);
     }
+    convertArticleFullObjectToArticleExtended(article) {
+        return this._adapterService.convertArticleFullObjectToArticleExtended(article);
+    }
     getFullArticle(sku) {
         return __awaiter(this, void 0, void 0, function* () {
             const goodId = yield this._adapterService.getGoodIdFromArticleNr(sku);
@@ -547,6 +569,9 @@ class ProductConnectorService {
             return this._adapterService.getSelectorDeliveryDate();
         });
     }
+    getArtStockStatus(goodId) {
+        return this._adapterService.getArtStockStatus(goodId);
+    }
     getDeliveryDate2(goodId) {
         return this._adapterService.getDeliveryDate2(goodId);
     }
@@ -556,14 +581,9 @@ class ProductConnectorService {
     getJsonArticleFlatTree(goodId, goodType, quantity, showLoader = true, configuratorStatistics) {
         return this._adapterService.getJsonArticleFlatTree(goodId, goodType, quantity, showLoader, this._instanceId, configuratorStatistics);
     }
-    addWebSessionTransactionLine(sku, quantity) {
+    addWebSessionTransactionLine(transactionUuid, sku, quantity) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this._adapterService.addWebSessionTransactionLine(sku, quantity);
-        });
-    }
-    getWebTransaction() {
-        this._adapterService.getWebTransaction().then((response) => {
-            console.log(response);
+            return yield this._adapterService.addWebSessionTransactionLine(transactionUuid, sku, quantity);
         });
     }
     onShowLoaderChange(showLoader) {
@@ -617,12 +637,15 @@ class IoneProductComponent {
         // 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 EventEmitter();
         this.forceRenderImage = new EventEmitter();
         this.onAlternativeClick = new EventEmitter();
@@ -633,11 +656,10 @@ class IoneProductComponent {
         this.openStockEvent = new EventEmitter();
         this.settingsLoaded = false;
         this._subs = [];
-        // this.sku = "70000107";
         this._subs.push(
         // this._dictionary.dictionaryLoaded.subscribe(d => this.upAndLoaded = true),
-        this._appEventService.onAddToCart.subscribe((json) => {
-            this._handleAddToCart(json);
+        this._appEventService.onAddToCart.subscribe((data) => {
+            this._handleAddToCart(data);
         }), this._appEventService.onAddToQuote.subscribe(json => this.onAddToQuote.emit(json)), this._appEventService.onAlternativeClick.subscribe(article => this.onAlternativeClick.emit(article)), this._appEventService.onArticleInfoReceived.subscribe(info => this._handleAnswerInfoReceived(info)), this._appEventService.onArticleReceived.subscribe(article => this.onArticleReceived.emit(article)), this._appEventService.onSelectionsReceived.subscribe(selections => this.onSelectionsReceived.emit(selections)), this._settingsService.settingsLoaded.subscribe(loaded => {
             this.settingsLoaded = loaded;
         }));
@@ -657,7 +679,7 @@ class IoneProductComponent {
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this._settingsService.initializeSettings(this._settings !== undefined);
+            yield this._settingsService.initializeSettings(this._settings === undefined);
             if (this._settings) {
                 this._settingsService.createSettingsFromObject(this._settings);
             }
@@ -672,32 +694,9 @@ class IoneProductComponent {
     _handleAnswerInfoReceived(info) {
         this.onArticleInfoReceived.next(info);
     }
-    _handleAddToCart(json) {
+    _handleAddToCart(data) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this._settingsService.settings.createWebOrder) {
-                if (json) {
-                    const articleTreeData = JSON.parse(json);
-                    if (articleTreeData.articleTree && articleTreeData.articleTree.article) {
-                        if (articleTreeData.articleTree.compositeGoods && Array.isArray(articleTreeData.articleTree.compositeGoods) &&
-                            articleTreeData.articleTree.compositeGoods.length > 0 &&
-                            articleTreeData.articleTree.subArticles && Array.isArray(articleTreeData.articleTree.subArticles)) {
-                            const compositeGoods = articleTreeData.articleTree.compositeGoods;
-                            compositeGoods.sort((a, b) => a.versionNumber < b.versionNumber ? -1 : 1);
-                            for (let i = 0; i < compositeGoods.length; i++) {
-                                const good = compositeGoods[i];
-                                const subArticle = articleTreeData.articleTree.subArticles.find(s => s.goodId === good.memberGoodId);
-                                if (subArticle) {
-                                    yield this._ione.addWebSessionTransactionLine(subArticle.articleNumber, good.quantity);
-                                }
-                            }
-                        }
-                        else {
-                            yield this._ione.addWebSessionTransactionLine(articleTreeData.articleTree.article.articleNumber, 1);
-                        }
-                    }
-                }
-            }
-            this.onAddToCart.emit(json);
+            this.onAddToCart.emit(data);
         });
     }
     openStock() {
@@ -709,14 +708,10 @@ IoneProductComponent.decorators = [
                 selector: 'app-ione-product',
                 template: `
       <app-product-page *ngIf="settingsLoaded"
+                        [createFrozenArticle]="handleAddArticleInternally"
                         (openStockEvent)="openStock()" [sku]="sku"
       ></app-product-page>
   `,
-                providers: [
-                    ProductEventService,
-                    ProductConnectorAdapterService,
-                    ProductConnectorService
-                ],
                 encapsulation: ViewEncapsulation.Emulated,
                 styles: [""]
             },] }
@@ -732,6 +727,7 @@ IoneProductComponent.ctorParameters = () => [
 IoneProductComponent.propDecorators = {
     sku: [{ type: Input }],
     settings: [{ type: Input }],
+    handleAddArticleInternally: [{ type: Input }],
     onAddToCart: [{ type: Output }],
     forceRenderImage: [{ type: Output }],
     onAlternativeClick: [{ type: Output }],
@@ -838,6 +834,7 @@ class ProductPageComponent {
         this.settingsService = settingsService;
         this.appEventService = appEventService;
         this.icon = IconEnum;
+        this.createFrozenArticle = true;
         this.openStockEvent = new EventEmitter();
         this.configurable = false;
         this.threeD = false;
@@ -979,7 +976,7 @@ class ProductPageComponent {
 ProductPageComponent.decorators = [
     { type: 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: [
                     trigger('toggleFullScreen', [
                         state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
@@ -1029,6 +1026,7 @@ ProductPageComponent.propDecorators = {
     fullscreenbutton: [{ type: ViewChild, args: ['fullscreenbutton', { read: ElementRef },] }],
     sku: [{ type: Input }],
     settings: [{ type: Input }],
+    createFrozenArticle: [{ type: Input }],
     openStockEvent: [{ type: Output }]
 };
 
@@ -1555,6 +1553,7 @@ class ProductAddtocartComponent {
         this._appEventService = _appEventService;
         this._settingsService = _settingsService;
         this.icon = IconEnum;
+        this.createFrozenArticle = true;
         this.configurable = false;
         this.configuring = false;
         this.fullscreen = false;
@@ -1577,7 +1576,13 @@ class ProductAddtocartComponent {
     }
     handleAddToCartClick(quantity) {
         return __awaiter(this, void 0, void 0, function* () {
-            this._appEventService.onAddToCart.next(yield this._getJSONFromArticleObject({ article: this.article, quantity: quantity }));
+            if (this.createFrozenArticle) {
+                this._appEventService.onAddToCart.next({ article: yield this._getJSONFromArticleObject({ article: this.article, quantity: quantity }), quantity: quantity });
+            }
+            else {
+                const article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
+                this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
+            }
         });
     }
     handleAddToQuoteClick(quantity) {
@@ -1635,6 +1640,7 @@ ProductAddtocartComponent.ctorParameters = () => [
 ProductAddtocartComponent.propDecorators = {
     addToCartButton: [{ type: ViewChild, args: ['addtocartbutton', { read: ElementRef },] }],
     article: [{ type: Input }],
+    createFrozenArticle: [{ type: Input }],
     configurable: [{ type: Input }],
     configuring: [{ type: Input }],
     fullscreen: [{ type: HostBinding, args: ['class.full-screen',] }, { type: Input }],
@@ -1806,18 +1812,39 @@ class ProductStockComponent {
         this._iconCache = _iconCache;
         this.icon = IconEnum;
         this.openStockEvent = new EventEmitter();
+        this.inStock = false;
         this.iconData = this._iconCache.getIcon(this.icon.Warehouse);
     }
-    set stockAndDelivery(value) {
-        if (value) {
-            this.numberInStock = value.stock;
-        }
+    set goodId(value) {
+        this._goodId = value;
+        this._getStockStatus();
     }
-    ngOnInit() {
+    get goodId() {
+        return this._goodId;
     }
     openStock() {
         this.openStockEvent.emit();
     }
+    _getStockStatus() {
+        if (this.goodId) {
+            this._iOne.getArtStockStatus(this.goodId).then((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;
+                }
+            });
+        }
+    }
 }
 ProductStockComponent.decorators = [
     { type: Component, args: [{
@@ -1828,12 +1855,11 @@ ProductStockComponent.decorators = [
     <div class="product-stock-wrapper">
       <co-icon class="stock-icon" [iconData]="iconData"></co-icon>
       <div class="product-stock-fields" (click)="openStock()">
-        <div class="pp-default-label in-stock" [textContent]="'PRODUCT_IN_STOCK' | localize" *ngIf="numberInStock > 0"></div>
-        <div class="pp-default-label not-in-stock" [textContent]="'PRODUCT_NOT_IN_STOCK' | localize" *ngIf="!(numberInStock > 0)"></div>
+        <div class="pp-default-label" [class.in-stock]="inStock" [textContent]="stockLabel | localize"></div>
       </div>
     </div>
   `,
-                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"]
+                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 = () => [
@@ -1841,7 +1867,7 @@ ProductStockComponent.ctorParameters = () => [
     { type: IconCacheService }
 ];
 ProductStockComponent.propDecorators = {
-    stockAndDelivery: [{ type: Input }],
+    goodId: [{ type: Input }],
     openStockEvent: [{ type: Output }]
 };
 
@@ -2372,7 +2398,7 @@ class IoneProductModule {
 IoneProductModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
-                    BrowserAnimationsModule,
+                    // BrowserAnimationsModule,
                     CommonModule,
                     ProductPageModule
                 ],
@@ -2384,6 +2410,9 @@ IoneProductModule.decorators = [
                 ],
                 bootstrap: [
                     IoneProductComponent
+                ],
+                providers: [
+                    ProductSettingsService
                 ]
             },] }
 ];