@veloceapps/sdk 4.0.0 → 4.0.1

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.
@@ -710,11 +710,11 @@
710
710
  };
711
711
  CartPreviewComponent.prototype.ngAfterViewInit = function () {
712
712
  var _this = this;
713
- rxjs.combineLatest([this.readonlyProductId$, this.shouldUpdate$, this.overlayPanel.onShow])
713
+ rxjs.combineLatest([this.readonlyProductId$, this.isEditMode$, this.shouldUpdate$, this.overlayPanel.onShow])
714
714
  .pipe(rxjs.filter(function () { return _this.overlayPanel.overlayVisible; }), rxjs.takeUntil(this.destroyed$))
715
715
  .subscribe(function (_b) {
716
- var _c = __read(_b, 1), readonlyProductId = _c[0];
717
- return _this.updateControls(_this.products, readonlyProductId);
716
+ var _c = __read(_b, 2), readonlyProductId = _c[0], isEditMode = _c[1];
717
+ return _this.updateControls(_this.products, isEditMode, readonlyProductId);
718
718
  });
719
719
  };
720
720
  CartPreviewComponent.prototype.ngOnDestroy = function () {
@@ -749,7 +749,7 @@
749
749
  var productIds = this.products.map(function (product) { return product.id; });
750
750
  this.flowConfiguration.delete(productIds);
751
751
  };
752
- CartPreviewComponent.prototype.updateControls = function (products, readonlyProductId) {
752
+ CartPreviewComponent.prototype.updateControls = function (products, isEditMode, readonlyProductId) {
753
753
  var _this = this;
754
754
  var ids = [];
755
755
  products.forEach(function (item) {
@@ -764,7 +764,7 @@
764
764
  else {
765
765
  (_a = _this.form.controls[item.id]) === null || _a === void 0 ? void 0 : _a.setValue(item.qty);
766
766
  }
767
- if (item.productId === readonlyProductId) {
767
+ if (!isEditMode || item.deleted || item.productId === readonlyProductId) {
768
768
  _this.form.controls[item.id].disable();
769
769
  }
770
770
  else {
@@ -777,7 +777,7 @@
777
777
  return CartPreviewComponent;
778
778
  }());
779
779
  CartPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CartPreviewComponent, deps: [{ token: i2__namespace$1.FlowConfigurationService }, { token: FlowRouterService }, { token: i2__namespace$1.ProductImagesService }, { token: i2__namespace$1.QuoteDraftService }], target: i0__namespace.ɵɵFactoryTarget.Component });
780
- CartPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: CartPreviewComponent, selector: "vl-cart-preview", inputs: { products: "products" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: i3$1.OverlayPanel, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<p-overlayPanel\n styleClass=\"navigation-settings-overlay flow-header-overlay center\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"flow-header-overlay__wrapper\" *vlLet=\"readonlyProductId$ | async as readonlyProductId\">\n <ng-container *vlLet=\"isEditMode$ | async as isEditMode\">\n <ng-container *ngIf=\"products.length > 0; else empty\">\n <h2 class=\"flow-header-overlay__title\">\n <span>Products ({{ products.length }})</span>\n <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n </h2>\n\n <div class=\"product header\">\n <span>Product</span>\n <span class=\"text-right\">Qty</span>\n <span class=\"text-right\">MRR</span>\n <span class=\"text-right\">NRR</span>\n </div>\n\n <div class=\"scrollable-wrapper\">\n <div class=\"product\" *ngFor=\"let product of products\">\n <div class=\"product__info\">\n <div class=\"product__image-wrapper\">\n <div\n *ngIf=\"getImageUrl(product.productId) | async as imageUrl; else noImage\"\n class=\"product__image\"\n [ngStyle]=\"{ 'background-image': 'url(' + imageUrl + ')' }\"\n ></div>\n </div>\n <div class=\"flex flex-column justify-content-center\">\n <div class=\"word-break\">{{ product.name }}</div>\n <div>\n <p-button\n label=\"Configure\"\n [disabled]=\"!isEditMode || !product.configurable || readonlyProductId === product.productId\"\n styleClass=\"p-button-link p-button-sm pl-0\"\n (onClick)=\"navigateToProductConfiguration(product.productId, product.id)\"\n ></p-button>\n <p-button\n label=\"Delete\"\n [disabled]=\"!isEditMode || readonlyProductId === product.productId\"\n styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n (onClick)=\"deleteHandler(product)\"\n ></p-button>\n </div>\n </div>\n </div>\n\n <span>\n <p-inputNumber\n *ngIf=\"form.controls[product.id] as control\"\n class=\"qty-control\"\n [formControl]=\"$any(control)\"\n [min]=\"1\"\n [required]=\"true\"\n [disabled]=\"!isEditMode\"\n (onBlur)=\"controlBlurHandler(product)\"\n ></p-inputNumber>\n </span>\n <span class=\"text-right pt-3\">${{ product.mrr }}</span>\n <span class=\"text-right pt-3\">${{ product.nrr }}</span>\n </div>\n\n <ng-template #noImage>\n <i class=\"vl-icon vl-icon-no-image no-image-icon\"></i>\n </ng-template>\n </div>\n\n <div class=\"flex justify-content-end mt-3\">\n <p-button\n label=\"Clear cart\"\n styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n [disabled]=\"!isEditMode || readonlyProductId\"\n (onClick)=\"deleteAllHandler()\"\n ></p-button>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #empty>\n <h2 class=\"flow-header-overlay__title\">\n <span>Empty Cart</span>\n <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n </h2>\n\n <span class=\"empty-state\">There are no products added to the Shopping Cart yet.</span>\n </ng-template>\n </div>\n </ng-template>\n</p-overlayPanel>\n", styles: [".flow-header-overlay__wrapper{display:flex;flex-direction:column;width:460px;max-height:600px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}.empty-state{color:var(--vl-text-color-deep-accent)}.scrollable-wrapper{overflow:auto}.product{display:grid;grid-template-columns:auto 60px 80px 80px;padding:16px 0}.product:not(.header){border-bottom:1px solid var(--vl-border-color)}.product.header{color:var(--vl-text-color-deep-accent);padding-bottom:0}.product__info{display:flex;grid-gap:16px;gap:16px}.product__image-wrapper{flex-shrink:0;height:64px;width:64px;display:flex;justify-content:center;align-items:center;background:var(--vl-primary-nav-overlay-bg);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .qty-control ::ng-deep .p-inputnumber-input{align-self:flex-start;text-align:right;width:100%}.word-break{word-break:break-word}.no-image-icon{color:#b4d1ef;height:18px;width:18px}\n"], components: [{ type: i3__namespace$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: i2__namespace.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5__namespace$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }], directives: [{ type: i2__namespace$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3__namespace.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
780
+ CartPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: CartPreviewComponent, selector: "vl-cart-preview", inputs: { products: "products" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: i3$1.OverlayPanel, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<p-overlayPanel\n styleClass=\"navigation-settings-overlay flow-header-overlay center\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"flow-header-overlay__wrapper\" *vlLet=\"readonlyProductId$ | async as readonlyProductId\">\n <ng-container *vlLet=\"isEditMode$ | async as isEditMode\">\n <ng-container *ngIf=\"products.length > 0; else empty\">\n <h2 class=\"flow-header-overlay__title\">\n <span>Products ({{ products.length }})</span>\n <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n </h2>\n\n <div class=\"product header\">\n <span>Product</span>\n <span class=\"text-right\">Qty</span>\n <span class=\"text-right\">MRR</span>\n <span class=\"text-right\">NRR</span>\n </div>\n\n <div class=\"scrollable-wrapper\">\n <div class=\"product\" *ngFor=\"let product of products\">\n <div\n class=\"product__info\"\n *vlLet=\"!isEditMode || product.deleted || readonlyProductId === product.productId as readonlyProduct\"\n >\n <div class=\"product__image-wrapper\">\n <div\n *ngIf=\"getImageUrl(product.productId) | async as imageUrl; else noImage\"\n class=\"product__image\"\n [ngStyle]=\"{ 'background-image': 'url(' + imageUrl + ')' }\"\n ></div>\n </div>\n <div class=\"flex flex-column justify-content-center\">\n <div class=\"word-break\">{{ product.name }}</div>\n <div>\n <p-button\n label=\"Configure\"\n [disabled]=\"readonlyProduct || !product.configurable\"\n styleClass=\"p-button-link p-button-sm pl-0\"\n (onClick)=\"navigateToProductConfiguration(product.productId, product.id)\"\n ></p-button>\n <p-button\n label=\"Delete\"\n [disabled]=\"readonlyProduct\"\n styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n (onClick)=\"deleteHandler(product)\"\n ></p-button>\n </div>\n </div>\n </div>\n\n <span>\n <p-inputNumber\n *ngIf=\"form.controls[product.id] as control\"\n class=\"qty-control\"\n [formControl]=\"$any(control)\"\n [min]=\"1\"\n [required]=\"true\"\n (onBlur)=\"controlBlurHandler(product)\"\n ></p-inputNumber>\n </span>\n <span class=\"text-right pt-3\">${{ product.mrr }}</span>\n <span class=\"text-right pt-3\">${{ product.nrr }}</span>\n </div>\n\n <ng-template #noImage>\n <i class=\"vl-icon vl-icon-no-image no-image-icon\"></i>\n </ng-template>\n </div>\n\n <div class=\"flex justify-content-end mt-3\">\n <p-button\n label=\"Clear cart\"\n styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n [disabled]=\"!isEditMode || readonlyProductId\"\n (onClick)=\"deleteAllHandler()\"\n ></p-button>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #empty>\n <h2 class=\"flow-header-overlay__title\">\n <span>Empty Cart</span>\n <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n </h2>\n\n <span class=\"empty-state\">There are no products added to the Shopping Cart yet.</span>\n </ng-template>\n </div>\n </ng-template>\n</p-overlayPanel>\n", styles: [".flow-header-overlay__wrapper{display:flex;flex-direction:column;width:460px;max-height:600px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}.empty-state{color:var(--vl-text-color-deep-accent)}.scrollable-wrapper{overflow:auto}.product{display:grid;grid-template-columns:auto 60px 80px 80px;padding:16px 0}.product:not(.header){border-bottom:1px solid var(--vl-border-color)}.product.header{color:var(--vl-text-color-deep-accent);padding-bottom:0}.product__info{display:flex;grid-gap:16px;gap:16px}.product__image-wrapper{flex-shrink:0;height:64px;width:64px;display:flex;justify-content:center;align-items:center;background:var(--vl-primary-nav-overlay-bg);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .qty-control ::ng-deep .p-inputnumber-input{align-self:flex-start;text-align:right;width:100%}.word-break{word-break:break-word}.no-image-icon{color:#b4d1ef;height:18px;width:18px}\n"], components: [{ type: i3__namespace$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: i2__namespace.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5__namespace$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }], directives: [{ type: i2__namespace$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3__namespace.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
781
781
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CartPreviewComponent, decorators: [{
782
782
  type: i0.Component,
783
783
  args: [{
@@ -952,7 +952,7 @@
952
952
  this.activePriceList$ = this.quoteDraftService.activePriceList$;
953
953
  this.status$ = this.contextService.resolve$().pipe(rxjs.map(function (context) { var _a; return (_a = context.properties.Status) !== null && _a !== void 0 ? _a : ''; }));
954
954
  this.isEditMode$ = this.quoteDraftService.isEditMode$();
955
- this.products$ = this.flowConfiguration.getActive().pipe(rxjs.map(function (lineItems) { return _this.generateProducts(lineItems); }));
955
+ this.products$ = this.flowConfiguration.get().pipe(rxjs.map(function (lineItems) { return _this.generateProducts(lineItems); }));
956
956
  this.isConfigurationRoute$ = this.routerService.isConfigurationRoute$();
957
957
  this.isCartRoute$ = this.routerService.isCartRoute$();
958
958
  this.isCatalogRoute$ = this.routerService.isCatalogRoute$();
@@ -1162,6 +1162,7 @@
1162
1162
  productId: target.productId,
1163
1163
  name: target.name,
1164
1164
  configurable: target.properties['#configurable'] === 'true',
1165
+ deleted: target.actionCode === 'DELETE',
1165
1166
  qty: target.qty,
1166
1167
  mrr: _this.formatMetric(target.properties.VDM_Total_MRR),
1167
1168
  nrr: _this.formatMetric(target.properties.VDM_Total_NRR),
@@ -1259,21 +1260,20 @@
1259
1260
  this.integrationState
1260
1261
  .listen$(i5$1.FlowAction.FLOW_APPLY_PRODUCT_CONFIGURATION)
1261
1262
  .pipe(rxjs.switchMap(function () {
1263
+ var quoteDraft = _this.quoteDraftService.quoteDraft;
1262
1264
  var lineItem = _this.configurationService.getSnapshot();
1263
- if (!lineItem) {
1265
+ if (!quoteDraft || !lineItem) {
1264
1266
  return rxjs.of(undefined);
1265
1267
  }
1266
- var currentState = _this.quoteDraftService.currentState;
1267
- var isNewLineItem = currentState.every(function (li) { return li.id !== lineItem.id; });
1268
+ var isNewLineItem = quoteDraft.currentState.every(function (li) { return li.id !== lineItem.id; });
1268
1269
  var updatedState;
1269
1270
  if (isNewLineItem) {
1270
- updatedState = __spreadArray(__spreadArray([], __read(currentState)), [lineItem]);
1271
+ updatedState = __spreadArray(__spreadArray([], __read(quoteDraft.currentState)), [lineItem]);
1271
1272
  }
1272
1273
  else {
1273
- updatedState = currentState.map(function (li) { return (li.id === lineItem.id ? lineItem : li); });
1274
+ updatedState = quoteDraft.currentState.map(function (li) { return (li.id === lineItem.id ? lineItem : li); });
1274
1275
  }
1275
- _this.quoteDraftService.setCurrentLineItemState(updatedState);
1276
- return _this.flowConfigurationService.calculate$();
1276
+ return _this.flowConfigurationService.calculate$(Object.assign(Object.assign({}, quoteDraft), { currentState: updatedState }));
1277
1277
  }), rxjs.tap(function () {
1278
1278
  _this.configurationService.hasUnsavedChanges = false;
1279
1279
  _this.flowRouterService.navigateToShoppingCart();
@@ -2224,8 +2224,9 @@
2224
2224
  return rxjs.from(this.router.navigate([parentUrl, '404'], { state: { message: message } }));
2225
2225
  };
2226
2226
  QuoteResolver.prototype.calculate$ = function () {
2227
- if (!this.quoteDraftService.isStandalone) {
2228
- return this.flowConfiguration.calculate$();
2227
+ var quoteDraft = this.quoteDraftService.quoteDraft;
2228
+ if (!this.quoteDraftService.isStandalone && quoteDraft) {
2229
+ return this.flowConfiguration.calculate$(quoteDraft);
2229
2230
  }
2230
2231
  return rxjs.of(undefined);
2231
2232
  };