@colijnit/product 12.0.3 → 12.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,7 +15,6 @@ import * as i1 from '@angular/common/http';
15
15
  import { HttpClient } from '@angular/common/http';
16
16
  import { StringUtils } from '@colijnit/ioneconnector/build/utils/string-utils';
17
17
  import { CommonModule } from '@angular/common';
18
- import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
19
18
  import { trigger, state, style, transition, animate } from '@angular/animations';
20
19
  import * as i1$1 from '@angular/platform-browser';
21
20
  import { DomSanitizer } from '@angular/platform-browser';
@@ -28,8 +27,8 @@ class Version {
28
27
  constructor() {
29
28
  this.name = "@colijnit/product";
30
29
  this.description = "Product detail page project for iOne";
31
- this.symVer = "12.0.3";
32
- this.publishDate = "14-10-2023 14:22:44";
30
+ this.symVer = "12.0.4";
31
+ this.publishDate = "16-10-2023 12:31:14";
33
32
  }
34
33
  }
35
34
 
@@ -156,6 +155,17 @@ class ProductConnectorAdapterService {
156
155
  }
157
156
  });
158
157
  }
158
+ getArtStockStatus(goodId) {
159
+ return __awaiter(this, void 0, void 0, function* () {
160
+ const response = yield this.articleConnector.getArtStockStatus(goodId);
161
+ if (response && response.validationResult && response.validationResult.success) {
162
+ return response.resultObject;
163
+ }
164
+ else {
165
+ return null;
166
+ }
167
+ });
168
+ }
159
169
  getDeliveryDate2(goodId) {
160
170
  return __awaiter(this, void 0, void 0, function* () {
161
171
  const response = yield this.articleConnector.getDeliveryDate2(goodId);
@@ -269,6 +279,7 @@ class Dictionary {
269
279
  "HEIGHT": "Hoogte",
270
280
  "MATERIAL": "Materiaal",
271
281
  "PRODUCT_IN_STOCK": "Op voorraad",
282
+ "PRODUCT_LIMITED_STOCK": "Beperkt op voorraad",
272
283
  "PRODUCT_NOT_IN_STOCK": "Niet op voorraad",
273
284
  "PROPERTIES": "Eigenschappen",
274
285
  "QUOTATION": "Quotatie",
@@ -298,6 +309,7 @@ class Dictionary {
298
309
  "HEIGHT": "Höhe",
299
310
  "MATERIAL": "Material",
300
311
  "PRODUCT_IN_STOCK": "Auf lager",
312
+ "PRODUCT_LIMITED_STOCK": "Begrentzt auf lager",
301
313
  "PRODUCT_NOT_IN_STOCK": "Nicht auf lager",
302
314
  "PROPERTIES": "Eigenschaften",
303
315
  "QUOTATION": "Angebot",
@@ -547,6 +559,9 @@ class ProductConnectorService {
547
559
  return this._adapterService.getSelectorDeliveryDate();
548
560
  });
549
561
  }
562
+ getArtStockStatus(goodId) {
563
+ return this._adapterService.getArtStockStatus(goodId);
564
+ }
550
565
  getDeliveryDate2(goodId) {
551
566
  return this._adapterService.getDeliveryDate2(goodId);
552
567
  }
@@ -617,6 +632,8 @@ class IoneProductComponent {
617
632
  // this.sku = '1000234793';
618
633
  // this.sku = '1066';
619
634
  // this.sku = '104';
635
+ // this.sku = "70000107";
636
+ // this.sku = "grover";
620
637
  this._dictionary = _dictionary;
621
638
  this._jsonUtils = _jsonUtils;
622
639
  this._ione = _ione;
@@ -633,7 +650,6 @@ class IoneProductComponent {
633
650
  this.openStockEvent = new EventEmitter();
634
651
  this.settingsLoaded = false;
635
652
  this._subs = [];
636
- // this.sku = "70000107";
637
653
  this._subs.push(
638
654
  // this._dictionary.dictionaryLoaded.subscribe(d => this.upAndLoaded = true),
639
655
  this._appEventService.onAddToCart.subscribe((json) => {
@@ -657,7 +673,7 @@ class IoneProductComponent {
657
673
  }
658
674
  ngOnInit() {
659
675
  return __awaiter(this, void 0, void 0, function* () {
660
- yield this._settingsService.initializeSettings(this._settings !== undefined);
676
+ yield this._settingsService.initializeSettings(this._settings === undefined);
661
677
  if (this._settings) {
662
678
  this._settingsService.createSettingsFromObject(this._settings);
663
679
  }
@@ -979,7 +995,7 @@ class ProductPageComponent {
979
995
  ProductPageComponent.decorators = [
980
996
  { type: Component, args: [{
981
997
  selector: 'app-product-page',
982
- 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",
998
+ 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",
983
999
  animations: [
984
1000
  trigger('toggleFullScreen', [
985
1001
  state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
@@ -1806,18 +1822,39 @@ class ProductStockComponent {
1806
1822
  this._iconCache = _iconCache;
1807
1823
  this.icon = IconEnum;
1808
1824
  this.openStockEvent = new EventEmitter();
1825
+ this.inStock = false;
1809
1826
  this.iconData = this._iconCache.getIcon(this.icon.Warehouse);
1810
1827
  }
1811
- set stockAndDelivery(value) {
1812
- if (value) {
1813
- this.numberInStock = value.stock;
1814
- }
1828
+ set goodId(value) {
1829
+ this._goodId = value;
1830
+ this._getStockStatus();
1815
1831
  }
1816
- ngOnInit() {
1832
+ get goodId() {
1833
+ return this._goodId;
1817
1834
  }
1818
1835
  openStock() {
1819
1836
  this.openStockEvent.emit();
1820
1837
  }
1838
+ _getStockStatus() {
1839
+ if (this.goodId) {
1840
+ this._iOne.getArtStockStatus(this.goodId).then((result) => {
1841
+ switch (result) {
1842
+ case 1: // niet op voorraad
1843
+ this.stockLabel = 'PRODUCT_LIMITED_STOCK';
1844
+ this.inStock = true;
1845
+ break;
1846
+ case 2:
1847
+ this.stockLabel = 'PRODUCT_IN_STOCK';
1848
+ this.inStock = true;
1849
+ break;
1850
+ default:
1851
+ this.stockLabel = 'PRODUCT_NOT_IN_STOCK';
1852
+ this.inStock = false;
1853
+ break;
1854
+ }
1855
+ });
1856
+ }
1857
+ }
1821
1858
  }
1822
1859
  ProductStockComponent.decorators = [
1823
1860
  { type: Component, args: [{
@@ -1828,12 +1865,11 @@ ProductStockComponent.decorators = [
1828
1865
  <div class="product-stock-wrapper">
1829
1866
  <co-icon class="stock-icon" [iconData]="iconData"></co-icon>
1830
1867
  <div class="product-stock-fields" (click)="openStock()">
1831
- <div class="pp-default-label in-stock" [textContent]="'PRODUCT_IN_STOCK' | localize" *ngIf="numberInStock > 0"></div>
1832
- <div class="pp-default-label not-in-stock" [textContent]="'PRODUCT_NOT_IN_STOCK' | localize" *ngIf="!(numberInStock > 0)"></div>
1868
+ <div class="pp-default-label" [class.in-stock]="inStock" [textContent]="stockLabel | localize"></div>
1833
1869
  </div>
1834
1870
  </div>
1835
1871
  `,
1836
- 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"]
1872
+ 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"]
1837
1873
  },] }
1838
1874
  ];
1839
1875
  ProductStockComponent.ctorParameters = () => [
@@ -1841,7 +1877,7 @@ ProductStockComponent.ctorParameters = () => [
1841
1877
  { type: IconCacheService }
1842
1878
  ];
1843
1879
  ProductStockComponent.propDecorators = {
1844
- stockAndDelivery: [{ type: Input }],
1880
+ goodId: [{ type: Input }],
1845
1881
  openStockEvent: [{ type: Output }]
1846
1882
  };
1847
1883
 
@@ -2372,7 +2408,7 @@ class IoneProductModule {
2372
2408
  IoneProductModule.decorators = [
2373
2409
  { type: NgModule, args: [{
2374
2410
  imports: [
2375
- BrowserAnimationsModule,
2411
+ // BrowserAnimationsModule,
2376
2412
  CommonModule,
2377
2413
  ProductPageModule
2378
2414
  ],
@@ -2384,6 +2420,9 @@ IoneProductModule.decorators = [
2384
2420
  ],
2385
2421
  bootstrap: [
2386
2422
  IoneProductComponent
2423
+ ],
2424
+ providers: [
2425
+ ProductSettingsService
2387
2426
  ]
2388
2427
  },] }
2389
2428
  ];