@colijnit/product 257.1.3 → 257.1.4

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

@@ -7,6 +7,7 @@ import { ProductEventService } from '../../service/product-event.service';
 import { CatalogDefinition } from '@colijnit/articleapi/build/model/catalog-definition.bo';
 import { ExternalSourceArticleAddInterface } from '@colijnit/articleapi/build/interface/external-source-article-add.interface';
 import { ExternalCatalogStartupInfo } from '@colijnit/articleapi/build/model/external-catalog-startup-info';
+import { ExternalSourceParameter } from '@colijnit/articleapi/build/model/external-source-parameter.bo';
 export declare class ProductExternalSourceComponent implements OnInit, OnDestroy {
     private _sanitizer;
     private _productConnectorService;
@@ -32,6 +33,7 @@ export declare class ProductExternalSourceComponent implements OnInit, OnDestroy
     externalSettings: any;
     token: string;
     variant: string;
+    urlParams: ExternalSourceParameter[];
     private _externalSource;
     private _externalCatalogStartupInfo;
     private _subs;

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

@@ -1,5 +1,6 @@
 import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { ProductScriptLoaderService } from '../../service/product-script-loader.service';
+import { ExternalSourceParameter } from '@colijnit/articleapi/build/model/external-source-parameter.bo';
 export declare class ProductHdComponent implements OnDestroy {
     private _scriptLoader;
     private _renderer;
@@ -8,6 +9,7 @@ export declare class ProductHdComponent implements OnDestroy {
     get sku(): string;
     token: string;
     variant: string;
+    urlParams: ExternalSourceParameter[];
     configuratorFinished: EventEmitter<string>;
     configurationError: EventEmitter<any>;
     showClass: boolean;
@@ -18,5 +20,6 @@ export declare class ProductHdComponent implements OnDestroy {
     handleConfigurationFinished(event: CustomEvent): void;
     handleError(event: CustomEvent): void;
     private _prepareAttributes;
+    private _prepareConfiguratorUrls;
     private _loadTheScripts;
 }

package/bundles/colijnit-product.umd.js

@@ -31,8 +31,8 @@
         function Version() {
             this.name = "@colijnit/product";
             this.description = "Product detail page project for iOne";
-            this.symVer = "257.1.3";
-            this.publishDate = "04/02/2025, 08:44:04";
+            this.symVer = "257.1.4";
+            this.publishDate = "8-2-2025 19:30:37";
         }
         return Version;
     }());
@@ -1421,7 +1421,7 @@
     IoneProductComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-ione-product',
-                    template: "\n      <app-product-page *ngIf=\"settingsLoaded\"\n                        [createFrozenArticle]=\"handleAddArticleInternally\"\n                        [isReturn]=\"isReturn\"\n                        (openStockEvent)=\"openStock()\"\n                        [sku]=\"sku\"\n                        [showRelatedProductsPopup]=\"showRelatedProductsPopup\"\n      ></app-product-page>\n<!--    <co-button [label]=\"'click'\" (click)=\"showHD = !showHD\"></co-button>\n      <co-product-hd [sku]=\"'657946ca-e1e1-41fd-7ae0-08dbf7df0cef'\" *ngIf=\"showHD\"></co-product-hd>-->\n  ",
+                    template: "\n     <app-product-page *ngIf=\"settingsLoaded\"\n                        [createFrozenArticle]=\"handleAddArticleInternally\"\n                        [isReturn]=\"isReturn\"\n                        (openStockEvent)=\"openStock()\"\n                        [sku]=\"sku\"\n                        [showRelatedProductsPopup]=\"showRelatedProductsPopup\"\n      ></app-product-page>\n    <!--  <co-button [label]=\"'click'\" (click)=\"showHD = !showHD\"></co-button>\n      <co-product-hd [sku]=\"'657946ca-e1e1-41fd-7ae0-08dbf7df0cef'\" *ngIf=\"showHD\"></co-product-hd>-->\n  ",
                     encapsulation: i0.ViewEncapsulation.Emulated,
                     styles: [""]
                 },] }
@@ -3407,6 +3407,7 @@
             this._scriptLoader = _scriptLoader;
             this._renderer = _renderer;
             this.variant = '';
+            this.urlParams = [];
             this.configuratorFinished = new i0.EventEmitter();
             this.configurationError = new i0.EventEmitter();
             this.showClass = true;
@@ -3445,7 +3446,10 @@
             this.configurationError.emit(event.detail.status);
         };
         ProductHdComponent.prototype._prepareAttributes = function () {
-            if (this.hdeConfigurator && this.hdeConfigurator.nativeElement && this.token && (this.sku || this.variant)) {
+            if (this.hdeConfigurator && this.hdeConfigurator.nativeElement && this.urlParams && this.token && (this.sku || this.variant)) {
+                //for local testing please turn off for packing and publishing!
+                //this.prepareTestingUrlparams();
+                this._prepareConfiguratorUrls();
                 this.hdeConfigurator.nativeElement.setAttribute('bearerToken', this.token);
                 if (this._sku) {
                     this.hdeConfigurator.nativeElement.setAttribute('data-productId', this._sku);
@@ -3456,34 +3460,54 @@
                 this._loadTheScripts();
             }
         };
-        // load external scripts
+        //set necessary references to configurator.
+        ProductHdComponent.prototype._prepareConfiguratorUrls = function () {
+            //fetch the setting from the external source
+            var apiurl = this.urlParams.find(function (item) { return item.key === 'apiurl'; }).value;
+            var productVariantCommandApiUrl = this.urlParams.find(function (item) { return item.key === 'productVariantCommandApiUrl'; }).value;
+            var productVariantQueryApiUrl = this.urlParams.find(function (item) { return item.key === 'productVariantQueryApiUrl'; }).value;
+            var localizationApiUrl = this.urlParams.find(function (item) { return item.key === 'localizationApiUrl'; }).value;
+            //apply to configurator
+            this.hdeConfigurator.nativeElement.setAttribute('apiurl', apiurl);
+            this.hdeConfigurator.nativeElement.setAttribute('productVariantCommandApiUrl', productVariantCommandApiUrl);
+            this.hdeConfigurator.nativeElement.setAttribute('productVariantQueryApiUrl', productVariantQueryApiUrl);
+            this.hdeConfigurator.nativeElement.setAttribute('localizationApiUrl', localizationApiUrl);
+        };
+        // load external scripts into client
         ProductHdComponent.prototype._loadTheScripts = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var scripts, i;
+                var headerUrls, headerArray, i, styles, stylesArray, j;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            scripts = [
-                                // hard-coded for now, should come from the external source
-                                'https://hde-cdn.azureedge.net/libs/components/Configurator/1.0.33/polyfills.js',
-                                'https://hde-cdn.azureedge.net/libs/components/Configurator/1.0.33/runtime.js',
-                                'https://hde-cdn.azureedge.net/libs/components/Configurator/1.0.33/main.js'
-                            ];
+                            headerUrls = this.urlParams.find(function (item) { return item.key === 'header'; }).value;
+                            headerArray = headerUrls.replace(/\s+/g, '').split(',');
                             i = 0;
                             _a.label = 1;
                         case 1:
-                            if (!(i < scripts.length)) return [3 /*break*/, 4];
-                            return [4 /*yield*/, this._scriptLoader.loadScript(scripts[i], this._renderer).catch(function (error) { return console.error(error); })];
+                            if (!(i < headerArray.length)) return [3 /*break*/, 4];
+                            return [4 /*yield*/, this._scriptLoader.loadScript(headerArray[i], this._renderer).catch(function (error) { return console.error(error); })];
                         case 2:
                             _a.sent();
                             _a.label = 3;
                         case 3:
                             i++;
                             return [3 /*break*/, 1];
-                        case 4: return [4 /*yield*/, this._scriptLoader.addStyleSheet('https://hde-cdn.azureedge.net/libs/components/Configurator/1.0.33/styles.css', this._renderer)];
+                        case 4:
+                            styles = this.urlParams.find(function (item) { return item.key === 'stylesheet'; }).value;
+                            stylesArray = styles.replace(/\s+/g, '').split(',');
+                            j = 0;
+                            _a.label = 5;
                         case 5:
+                            if (!(j < stylesArray.length)) return [3 /*break*/, 8];
+                            return [4 /*yield*/, this._scriptLoader.addStyleSheet(stylesArray[j], this._renderer)];
+                        case 6:
                             _a.sent();
-                            return [2 /*return*/];
+                            _a.label = 7;
+                        case 7:
+                            j++;
+                            return [3 /*break*/, 5];
+                        case 8: return [2 /*return*/];
                     }
                 });
             });
@@ -3493,7 +3517,7 @@
     ProductHdComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-product-hd',
-                    template: "\n    <hde-configurator #hdeConfigurator\n                      apiurl=\"https://bmsproductconfigurator-acceptance.azurewebsites.net/api/configurator/\"\n                      productVariantCommandApiUrl=\"https://bmsproductvariantcommand-acceptance.azurewebsites.net/\"\n                      productVariantQueryApiUrl=\"https://bmsproductvariantquery-acceptance.azurewebsites.net/\"\n                      language=\"nl\"\n                      localizationApiUrl=\"https://hde-cdn.azureedge.net/libs/BMS.DST.Localization/\"\n                      localizationFileExtension=\".json\"\n                      (configurationFinished)=\"handleConfigurationFinished($event)\"\n                      (configurationFailed)=\"handleError($event)\"\n    >\n      <hde-progress-bar></hde-progress-bar>\n    </hde-configurator>\n  ",
+                    template: "\n    <hde-configurator #hdeConfigurator\n                      language=\"nl\"\n                      localizationFileExtension=\".json\"\n                      (configurationFinished)=\"handleConfigurationFinished($event)\"\n                      (configurationFailed)=\"handleError($event)\"\n    >\n      <hde-progress-bar></hde-progress-bar>\n    </hde-configurator>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3506,6 +3530,7 @@
         sku: [{ type: i0.Input }],
         token: [{ type: i0.Input }],
         variant: [{ type: i0.Input }],
+        urlParams: [{ type: i0.Input }],
         configuratorFinished: [{ type: i0.Output }],
         configurationError: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-product-hd',] }]
@@ -3550,6 +3575,7 @@
             this.externalSettings = {};
             this.token = ""; //= "eyJhbGciOiJSUzI1NiIsImtpZCI6IkYxOThERkVEOEUwQTQ1MzY3M0M1MUE2Rjk1QUVDQzU3RTM0NjM4RkRSUzI1NiIsInR5cCI6ImF0K2p3dCIsIng1dCI6IjhaamY3WTRLUlRaenhScHZsYTdNVi1OR09QMCJ9.eyJuYmYiOjE3MzIxOTkyOTUsImV4cCI6MTczMjIwMjg5NSwiaXNzIjoiaHR0cHM6Ly9ibXNpZGVudGl0eS1hY2NlcHRhbmNlLmF6dXJld2Vic2l0ZXMubmV0IiwiYXVkIjpbImNhdGFsb2dxdWVyeWFwaSIsImNvbmZpZ3VyYXRvcmFwaSIsInByb2R1Y3R2YXJpYW50Y29tbWFuZGFwaSIsInByb2R1Y3R2YXJpYW50cXVlcnlhcGkiXSwiY2xpZW50X2lkIjoiaW1wZXJzb25hdGlvbi5jbGllbnQiLCJzdWIiOiIwOTMwZDI4Mi05NGU4LTQ5MGEtOGI2NC1mYTk1YmIyYzE1ODIiLCJhdXRoX3RpbWUiOjE3MzIxOTkyOTUsImlkcCI6ImxvY2FsIiwiZW52aXJvbm1lbnQiOiJNU0wiLCJzZWxsZXIiOiJTRTAwMDA5NiIsInNlbGxlcmd1aWQiOiIxMDk1MWJjNS1hZmMzLTQ1MGEtNmVkMS0wOGQ4NDNlNmE5OTQiLCJwZXJtaXNzaW9uIjpbInNhbGVzLmV4cG9ydHRlbXBsYXRlcy5yZWFkIiwiZG9jdW1lbnRsaWJyYXJ5LnRhZy5yZWFkIiwiZG9jdW1lbnRsaWJyYXJ5LmRvY3VtZW50LnJlYWQiLCJkb2N1bWVudGxpYnJhcnkudGFnZ3JvdXAucmVhZCIsInNhbGVzLm9yZGVyLndyaXRlIiwic2FsZXMuY3VzdG9tZXIucmVhZCIsInNhbGVzLm9yZGVyLmRlbGl2ZXJ5YWRkcmVzcy53cml0ZSIsInNlcnZpY2UucmVxdWVzdC5yZWFkIiwiY2F0YWxvZy50YWcucmVhZCIsInNhbGVzLm9yZGVyLnJlYWQiLCJzYWxlcy5jdXN0b21lci53cml0ZSIsInJlcXVlc3Rmb3JxdW90ZS53cml0ZSIsInNhbGVzLm9yZGVyLmJvb2siLCJyZXF1ZXN0Zm9ycXVvdGUucmVhZCIsInNhbGVzLmxlYWQucmVhZCIsInB1cmNoYXNlLm9yZGVyLnJlYWQiLCJzYWxlcy5xdW90ZS5yZWFkIiwic2FsZXMucXVvdGUud3JpdGUiLCJjYXRhbG9nLml0ZW0ucmVhZCIsInNhbGVzLmxlYWQud3JpdGUiLCJzZXJ2aWNlLnJlcXVlc3Quc3VibWl0Iiwic2FsZXMub3JkZXIuZGVsaXZlcnlhZGRyZXNzLnJlYWQiLCJwdXJjaGFzZS5vcmRlci53cml0ZSIsInB1cmNoYXNlLm9yZGVyLnByaWNlcy53cml0ZSIsInB1cmNoYXNlLm9yZGVyLnByaWNlcy5yZWFkIiwic2VydmljZS5yZXF1ZXN0LndyaXRlIiwiY2F0YWxvZy5jYXRhbG9nLnJlYWQiLCJjYXRhbG9nLmNhdGFsb2cud3JpdGUiLCJjYXRhbG9nLmN1cnJlbmN5LnJlYWQiLCJjYXRhbG9nLmN1cnJlbmN5LndyaXRlIiwiY2F0YWxvZy5pdGVtLndyaXRlIiwiY2F0YWxvZy5sb2NhbGl6YXRpb24ucmVhZCIsImNhdGFsb2cubG9jYWxpemF0aW9uLndyaXRlIiwiY2F0YWxvZy5wcm9kdWN0LnJlYWQiLCJjYXRhbG9nLnByb2R1Y3Qud3JpdGUiLCJjYXRhbG9nLnByb2R1Y3RzZXR0aW5nLnJlYWQiLCJjYXRhbG9nLnByb2R1Y3RzZXR0aW5nLndyaXRlIiwiY2F0YWxvZy5zZWxsZXIucmVhZCIsImNhdGFsb2cuc2VsbGVyLndyaXRlIiwiY2F0YWxvZy50YWcud3JpdGUiLCJjYXRhbG9nLnVvbS5yZWFkIiwiY2F0YWxvZy51b20ud3JpdGUiLCJjYXRhbG9nLnZhdGNhdGVnb3J5LnJlYWQiLCJjYXRhbG9nLnZhdGNhdGVnb3J5LndyaXRlIiwiY2F0YWxvZy52ZW5kb3IucmVhZCIsImNhdGFsb2cudmVuZG9yLndyaXRlIiwicHVyY2hhc2Uuc2VsbGVyLnJlYWQiLCJwdXJjaGFzZS5zZWxsZXIud3JpdGUiLCJjYXRhbG9nLmFydGljbGUucmVhZCIsImNhdGFsb2cuYXJ0aWNsZS53cml0ZSIsInNhbGVzLnF1b3RlLmxpbmVzLnJlYWQiLCJzYWxlcy5xdW90ZS5saW5lcy53cml0ZSIsInNhbGVzLnNlbGxlci5yZWFkIiwic2FsZXMuc2VsbGVyLndyaXRlIiwiYWNjb3VudGluZy52ZW5kb3JpbnZvaWNlLnJlYWQiLCJpZGVudGl0eS51c2VyLnJlYWQiLCJpZGVudGl0eS51c2VyLndyaXRlIiwiaWRlbnRpdHkucm9sZS5yZWFkIiwic2VsbGVyLnByb2R1Y3RwcmljZS5zZXR0aW5ncy5yZWFkIiwic2VsbGVyLnByb2R1Y3RwcmljZS5zZXR0aW5ncy53cml0ZSIsImNvbmZpZ3VyYXRvci5wdXJjaGFzZXByaWNlLnJlYWQiLCJzdG9jay5mYWJyaWMucmVhZCJdLCJuYW1lIjoiUm9iaW4iLCJmYW1pbHlfbmFtZSI6ImRlIFdpbnRlciAoQ29saWpuLUlUKSIsInJvbGUiOlsic2VsbGVyIiwiZGVhbGVyX21hbmFnZXIiXSwiaWF0IjoxNzMyMTk5Mjk1LCJzY29wZSI6WyJjYXRhbG9ncXVlcnlhcGkiLCJjb25maWd1cmF0b3JhcGkiLCJwcm9kdWN0dmFyaWFudGNvbW1hbmRhcGkiLCJwcm9kdWN0dmFyaWFudHF1ZXJ5YXBpIl0sImFtciI6WyJpbXBlcnNvbmF0aW9uIl19.rbguVPnkXXDzsM6QKgXulhrF41jIjCuGDV13ig1GC8MewLCJ7wA038OSwT26sx2mCexjvuGYt45YScfPwfTkDy3ErPmHRods64X1dJWZnf-23NTP2iI32K_1vMZH5GOGbMzuFtbKAFQv4hgFAxoyWqFVWyJvuOtQcWyZStROyPHwjAnpnj-x1cVQpOhbO-kQUFvy_VUrPpF3aYVCcO2cFirQTXR6kxSGcYGGcsPY-_eiAd93UdG2EM6xLAocDLaFV72CQI6XEs0WQG1f4SqvH52v3OTkgWBLgYV35gpyIe0-2nazGL0R8pTNuDqrOb7OGmuTRMoTIiRi67-wTxx8cQ";
             this.variant = "";
+            this.urlParams = [];
             this._subs = [];
         }
         Object.defineProperty(ProductExternalSourceComponent.prototype, "externalSource", {
@@ -3569,10 +3595,12 @@
                 return this._externalCatalogStartupInfo;
             },
             set: function (value) {
-                this._externalCatalogStartupInfo = value;
-                this.externalSource = value.externalSource;
-                this.loaded = false;
-                this._prepareExternalSource();
+                if (value) {
+                    this._externalCatalogStartupInfo = value;
+                    this.externalSource = value.externalSource;
+                    this.loaded = false;
+                    this._prepareExternalSource();
+                }
             },
             enumerable: false,
             configurable: true
@@ -3664,6 +3692,7 @@
                 this.token = this.externalCatalogStartupInfo.token;
                 this.sku = this.externalCatalogStartupInfo.externalGoodId;
                 this.variant = this.externalCatalogStartupInfo.flattenedGoodId;
+                this.urlParams = this.externalCatalogStartupInfo.externalSource.parameters;
                 this.switchToConfigurator();
                 this.loaded = true;
             }
@@ -3694,7 +3723,7 @@
     ProductExternalSourceComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-product-external-source',
-                    template: "\n        <ng-container *ngIf=\"loaded\">\n            <ng-container *ngIf=\"showProduct\">\n                <app-product-page\n                        [sku]=\"sku\"\n                        [settings]=\"externalSettings\"\n                        [externalSource]=\"externalSource\"\n                ></app-product-page>\n            </ng-container>\n            <ng-container *ngIf=\"showSource\">\n                <iframe width=\"100%\" height=\"100%\" [src]=\"safeUrl\" frameborder=\"0\" allowfullscreen></iframe>\n            </ng-container>\n            <ng-container *ngIf=\"showConfigurator\">\n              <co-product-hd width=\"100%\" height=\"100%\"\n                             [sku]=\"sku\"\n                             [variant]=\"variant\"\n                             [token]=\"token\"\n                             (configuratorFinished)=\"handleConfigurationFinished($event)\"></co-product-hd>\n            </ng-container>\n        </ng-container>\n    ",
+                    template: "\n        <ng-container *ngIf=\"loaded\">\n            <ng-container *ngIf=\"showProduct\">\n                <app-product-page\n                        [sku]=\"sku\"\n                        [settings]=\"externalSettings\"\n                        [externalSource]=\"externalSource\"\n                ></app-product-page>\n            </ng-container>\n            <ng-container *ngIf=\"showSource\">\n                <iframe width=\"100%\" height=\"100%\" [src]=\"safeUrl\" frameborder=\"0\" allowfullscreen></iframe>\n            </ng-container>\n            <ng-container *ngIf=\"showConfigurator\">\n              <co-product-hd width=\"100%\" height=\"100%\"\n                             [sku]=\"sku\"\n                             [variant]=\"variant\"\n                             [token]=\"token\"\n                             [urlParams]=\"urlParams\"\n                             (configuratorFinished)=\"handleConfigurationFinished($event)\"></co-product-hd>\n            </ng-container>\n        </ng-container>\n    ",
                     providers: [
                         ProductSettingsService,
                         ProductConnectorAdapterService,