@colijnit/product 12.0.4 → 12.0.5

package/app/components/product-addtocart/product-addtocart.component.d.ts

@@ -13,6 +13,7 @@ export declare class ProductAddtocartComponent implements OnInit, OnDestroy {
     readonly icon: typeof IconEnum;
     addToCartButton: ElementRef;
     article: ArticleFullObject;
+    createFrozenArticle: boolean;
     configurable: boolean;
     configuring: boolean;
     fullscreen: boolean;

package/app/components/product-external-source/product-external-source.component.d.ts

@@ -4,6 +4,7 @@ import { ExternalSource } from '@colijnit/articleapi/build/model/external-source
 import { ProductConnectorService } from '../../service/product-connector.service';
 import { ArticleListObject } from '@colijnit/articleapi/build/model/article-list-object';
 import { ProductEventService } from '../../service/product-event.service';
+import { ArticleExtended } from '@colijnit/articleapi/build/model/article-extended.bo';
 export declare class ProductExternalSourceComponent implements OnInit, OnDestroy {
     private _sanitizer;
     private _productConnectorService;
@@ -12,7 +13,10 @@ export declare class ProductExternalSourceComponent implements OnInit, OnDestroy
     set externalSource(value: ExternalSource);
     get externalSource(): ExternalSource;
     options: {};
-    addToCart: EventEmitter<string>;
+    addToCart: EventEmitter<{
+        article: string | ArticleExtended;
+        quantity: number;
+    }>;
     addToQuote: EventEmitter<string>;
     alternativeClick: EventEmitter<ArticleListObject>;
     showClass(): boolean;

package/app/components/product-page/product-page.component.d.ts

@@ -21,6 +21,7 @@ export declare class ProductPageComponent implements OnInit, OnDestroy, AfterVie
     set sku(value: string);
     get sku(): string;
     set settings(value: any);
+    createFrozenArticle: boolean;
     openStockEvent: EventEmitter<void>;
     get settings(): any;
     set fullScreen(value: boolean);

package/app/ione-product.component.d.ts

@@ -7,6 +7,7 @@ import { ArticleListObject } from '@colijnit/articleapi/build/model/article-list
 import { ProductSettingsService } from './service/product-settings.service';
 import { Selection } from '@colijnit/articleapi/build/model/selection';
 import { ArticleQuickSel } from '@colijnit/articleapi/build/model/article-quick-sel';
+import { ArticleExtended } from '@colijnit/articleapi/build/model/article-extended.bo';
 export declare class IoneProductComponent implements OnInit, OnChanges, OnDestroy {
     private _dictionary;
     private _jsonUtils;
@@ -17,7 +18,11 @@ export declare class IoneProductComponent implements OnInit, OnChanges, OnDestro
     sku: string;
     set settings(value: any);
     get settings(): any;
-    onAddToCart: EventEmitter<string>;
+    handleAddArticleInternally: boolean;
+    onAddToCart: EventEmitter<{
+        article: string | ArticleExtended;
+        quantity: number;
+    }>;
     forceRenderImage: EventEmitter<void>;
     onAlternativeClick: EventEmitter<ArticleListObject>;
     onArticleInfoReceived: EventEmitter<string>;

package/app/service/product-connector-adapter.service.d.ts

@@ -5,10 +5,10 @@ import { SuperArticle } from '@colijnit/articleapi/build/model/super-article';
 import { ConfiguratorStatisticsEnvironment } from '@colijnit/articleapi/build/model/configurator-statistics-environment';
 import { Articles } from '@colijnit/articleapi/build/articles';
 import { Options } from '@colijnit/ioneconnector/build/model/options';
-import { DataServiceResponseData } from '@colijnit/ioneconnector/build/model/data-service-response-data';
 import { DeliveryPrognosis } from '@colijnit/articleapi/build/model/delivery-prognosis';
 import { DocumentContent } from '@colijnit/articleapi/build/model/document-content';
 import { Transaction } from '@colijnit/transactionapi/build/transaction';
+import { ArticleExtended } from '@colijnit/articleapi/build/model/article-extended.bo';
 export declare class ProductConnectorAdapterService implements OnDestroy {
     readonly showLoader: Subject<boolean>;
     articleConnector?: Articles;
@@ -19,6 +19,7 @@ export declare class ProductConnectorAdapterService implements OnDestroy {
     initConnector(options: Options): Promise<void>;
     setInstance(instanceId: string): void;
     getProductBundleSettings(url: string, upId: number): Promise<string>;
+    convertArticleFullObjectToArticleExtended(article: ArticleFullObject): ArticleExtended;
     getDeliveryPrognosis(goodId: number, branchNr?: string): Promise<any>;
     getSelectorDeliveryDate(): Promise<DeliveryPrognosis>;
     getArtStockStatus(goodId: number): Promise<number>;
@@ -29,6 +30,5 @@ export declare class ProductConnectorAdapterService implements OnDestroy {
     getArticleFullObject(goodId: number): Promise<ArticleFullObject>;
     getSuperArticle(id: string, branch?: string): Promise<SuperArticle>;
     getDocumentContent(docId: number, thumbnail?: boolean): Promise<DocumentContent>;
-    addWebSessionTransactionLine(sku: string, quantity: number): Promise<DataServiceResponseData>;
-    getWebTransaction(): Promise<DataServiceResponseData>;
+    addWebSessionTransactionLine(transactionUuid: string, sku: string, quantity: number): Promise<string>;
 }

package/app/service/product-connector.service.d.ts

@@ -7,7 +7,7 @@ import { ProductSettingsService } from './product-settings.service';
 import { ConfiguratorStatisticsEnvironment } from '@colijnit/articleapi/build/model/configurator-statistics-environment';
 import { DeliveryPrognosis } from '@colijnit/articleapi/build/model/delivery-prognosis';
 import { DocumentContent } from '@colijnit/articleapi/build/model/document-content';
-import { DataServiceResponseData } from '@colijnit/ioneconnector/build/model/data-service-response-data';
+import { ArticleExtended } from '@colijnit/articleapi/build/model/article-extended.bo';
 export declare class ProductConnectorService implements OnDestroy {
     private _adapterService;
     private _settingsService;
@@ -24,6 +24,7 @@ export declare class ProductConnectorService implements OnDestroy {
     initConnection(): Promise<void>;
     getProductBundleSettings(url: string, upId: number): Promise<string>;
     setInstance(instanceId: string): void;
+    convertArticleFullObjectToArticleExtended(article: ArticleFullObject): ArticleExtended;
     getFullArticle(sku: string): Promise<ArticleFullObject>;
     getDocumentContent(docId: number, thumbnail?: boolean): Promise<DocumentContent>;
     getDeliveryPrognosis(goodId: number): Promise<DeliveryPrognosis>;
@@ -32,7 +33,6 @@ export declare class ProductConnectorService implements OnDestroy {
     getDeliveryDate2(goodId: number): Promise<DeliveryPrognosis>;
     getSuperArticle(id: string): Promise<SuperArticle>;
     getJsonArticleFlatTree(goodId: number, goodType: string, quantity: number, showLoader?: boolean, configuratorStatistics?: ConfiguratorStatisticsEnvironment): Promise<string>;
-    addWebSessionTransactionLine(sku: string, quantity: number): Promise<DataServiceResponseData>;
-    getWebTransaction(): void;
+    addWebSessionTransactionLine(transactionUuid: string, sku: string, quantity: number): Promise<string>;
     onShowLoaderChange(showLoader: boolean): void;
 }

package/app/service/product-event.service.d.ts

@@ -2,8 +2,12 @@ import { Subject } from 'rxjs';
 import { ArticleListObject } from '@colijnit/articleapi/build/model/article-list-object';
 import { Selection } from '@colijnit/articleapi/build/model/selection';
 import { ArticleQuickSel } from '@colijnit/articleapi/build/model/article-quick-sel';
+import { ArticleExtended } from '@colijnit/articleapi/build/model/article-extended.bo';
 export declare class ProductEventService {
-    onAddToCart: Subject<string>;
+    onAddToCart: Subject<{
+        article: string | ArticleExtended;
+        quantity: number;
+    }>;
     onAlternativeClick: Subject<ArticleListObject>;
     onAddToQuote: Subject<string>;
     onForceRenderImage: Subject<void>;

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/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/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.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, 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.4";
-            this.publishDate = "16-10-2023 12:31:14";
+            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;
@@ -813,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*/, ""];
                     }
                 });
             });
@@ -1170,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;
@@ -1213,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;
         };
@@ -1290,6 +1290,7 @@
             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();
@@ -1302,8 +1303,8 @@
             this._subs = [];
             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;
             }));
@@ -1349,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*/];
                 });
             });
         };
@@ -1412,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: [""]
                 },] }
@@ -1433,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 }],
@@ -1546,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;
@@ -1716,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\" [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",
+                    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%' })),
@@ -1766,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 }]
     };
 
@@ -2282,6 +2234,7 @@
             this._appEventService = _appEventService;
             this._settingsService = _settingsService;
             this.icon = IconEnum;
+            this.createFrozenArticle = true;
             this.configurable = false;
             this.configuring = false;
             this.fullscreen = false;
@@ -2308,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*/];
                     }
                 });
             });
@@ -2373,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 }],