@veloceapps/sdk 7.0.2-72 → 7.0.2-73

package/fesm2015/veloceapps-sdk.mjs

@@ -13,7 +13,7 @@ import { isLineItemModified, getOriginParent, SdkPipesModule, RuntimeOperation,
 import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1 from 'primeng/dynamicdialog';
-import { UITemplateComponentType, UITemplateType, SalesforceIdUtils, ConfigurationContextMode, EntityUtil, UUID } from '@veloceapps/core';
+import { UITemplateComponentType, UITemplateType, SalesforceIdUtils, ConfigurationContextMode, EntityUtil, isLegacyUIDefinition, getUIDefinitionProperties, UUID } from '@veloceapps/core';
 import { Subject, BehaviorSubject, tap, takeUntil, first, catchError, of, map, switchMap, filter, shareReplay, startWith, distinctUntilChanged, combineLatest, finalize, noop, forkJoin, from, throwError } from 'rxjs';
 import * as i7 from 'primeng/overlaypanel';
 import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
@@ -227,7 +227,7 @@ class DocGenComponent {
     }
 }
 DocGenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DocGenComponent, deps: [{ token: i1$1.QuoteDraftService }, { token: i1$1.ContextService }, { token: i2.UITemplatesApiService }, { token: FlowDocGenService }, { token: i3$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DocGenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: DocGenComponent, selector: "vl-flow-doc-gen", ngImport: i0, template: "<ng-container *ngIf=\"isVisible$ | async\">\n  <ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n    <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n  </ng-container>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DocGenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: DocGenComponent, selector: "vl-flow-doc-gen", ngImport: i0, template: "<ng-container *ngIf=\"isVisible$ | async\">\n  <ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n    <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n  </ng-container>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DocGenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-doc-gen', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isVisible$ | async\">\n  <ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n    <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n  </ng-container>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"] }]
@@ -376,7 +376,7 @@ class GuidedSellingComponent {
     }
 }
 GuidedSellingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: GuidedSellingComponent, deps: [{ token: i1$1.QuoteDraftService }, { token: i1$1.ContextService }, { token: i2.UITemplatesApiService }, { token: FlowGuidedSellingService }, { token: i3$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-GuidedSellingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: GuidedSellingComponent, selector: "vl-flow-guided-selling", ngImport: i0, template: "<ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n  <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+GuidedSellingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: GuidedSellingComponent, selector: "vl-flow-guided-selling", ngImport: i0, template: "<ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n  <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: GuidedSellingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-guided-selling', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n  <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"] }]
@@ -1833,7 +1833,7 @@ class AssetsComponent {
     }
 }
 AssetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: AssetsComponent, deps: [{ token: i2.UITemplatesApiService }, { token: i1$1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AssetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: AssetsComponent, selector: "vl-flow-assets", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AssetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: AssetsComponent, selector: "vl-flow-assets", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: AssetsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-assets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n" }]
@@ -1950,7 +1950,7 @@ class CatalogComponent {
     }
 }
 CatalogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CatalogComponent, deps: [{ token: i2.UITemplatesApiService }, { token: i1$1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CatalogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: CatalogComponent, selector: "vl-flow-catalog", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CatalogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: CatalogComponent, selector: "vl-flow-catalog", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CatalogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-catalog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n" }]
@@ -2175,7 +2175,7 @@ class LegacyProductComponent {
         if (!((_a = this.customizationService) === null || _a === void 0 ? void 0 : _a.getLegacyUiDefinition)) {
             return of(context);
         }
-        return this.customizationService.getLegacyUiDefinition(productId).pipe(map$1(uiDef => (Object.assign(Object.assign({}, context), { uiDefinition: uiDef !== null && uiDef !== void 0 ? uiDef : context.uiDefinition }))));
+        return this.customizationService.getLegacyUiDefinition(productId).pipe(map$1(uiDefinitionContainer => (Object.assign(Object.assign({}, context), { uiDefinitionContainer: uiDefinitionContainer !== null && uiDefinitionContainer !== void 0 ? uiDefinitionContainer : undefined }))));
     }
     getRuntimeContext(productId, offeringId, runtimeOperation) {
         return this.runtimeContextService.getRuntimeContext(productId, offeringId).pipe(map$1(runtimeContext => {
@@ -2213,75 +2213,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
         }] });
 
 class ProductComponent {
-    constructor(contextService, runtimeService, configurationService, quoteDraftService, messageService, integrationState, customizationService) {
+    constructor(contextService, configurationRuntimeService, configurationService, configurationState, quoteDraftService, integrationState, customizationService) {
         this.contextService = contextService;
-        this.runtimeService = runtimeService;
+        this.configurationRuntimeService = configurationRuntimeService;
         this.configurationService = configurationService;
+        this.configurationState = configurationState;
         this.quoteDraftService = quoteDraftService;
-        this.messageService = messageService;
         this.integrationState = integrationState;
         this.customizationService = customizationService;
-        this.destroy$ = new Subject();
-        this.state$ = new BehaviorSubject({ loading: true, failure: false });
-    }
-    ngOnInit() {
-        this.quoteDraftService.quoteDraft$.pipe(first(), takeUntil(this.destroy$)).subscribe(quote => this.init(quote));
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+        this.uiDefinition$ = new BehaviorSubject(undefined);
+        this.config = {
+            init$: () => this.init$(),
+        };
     }
-    customize(productId) {
-        var _a;
-        if (!((_a = this.customizationService) === null || _a === void 0 ? void 0 : _a.getUiDefinition)) {
-            return of(null);
+    customizeUI$() {
+        var _a, _b;
+        const { productId } = (_a = this.configurationRuntimeService.runtimeContext) !== null && _a !== void 0 ? _a : {};
+        if (!productId || !((_b = this.customizationService) === null || _b === void 0 ? void 0 : _b.getUiDefinition)) {
+            return of(undefined);
         }
-        return this.customizationService.getUiDefinition(productId).pipe(tap(uiDef => {
-            var _a;
-            if (uiDef) {
-                this.uiDefinition = uiDef;
-                this.runtimeService.uiDefinitionProperties = (_a = uiDef.properties) !== null && _a !== void 0 ? _a : {};
+        return this.customizationService.getUiDefinition(productId).pipe(map(uiDefinitionContainer => {
+            if (uiDefinitionContainer) {
+                this.configurationRuntimeService.overrideUIDefinition(uiDefinitionContainer);
             }
         }));
     }
-    init(quote) {
-        const contextProperties = this.contextService.resolve().properties;
-        const productId = contextProperties.productId;
-        if (!productId) {
-            return;
-        }
-        const lineItemId = this.getLineItemId(quote, productId, contextProperties.lineItemId);
-        const currentStateItem = quote.currentState.find(({ id }) => id === lineItemId);
-        if (currentStateItem) {
-            this.configurationService.setConfigurableRamp(currentStateItem);
-        }
-        const { offeringId } = currentStateItem !== null && currentStateItem !== void 0 ? currentStateItem : {};
-        this.runtimeService
-            .init({ productId, offeringId })
-            .pipe(tap(context => (this.uiDefinition = context === null || context === void 0 ? void 0 : context.uiDefinition)), switchMap(() => this.customize(productId)), this.throwIfNoUIDefinition(), switchMap(() => {
-            if (this.runtimeService.initializationProps) {
-                this.runtimeService.initializationProps.attributesMap = this.integrationState.state.guidedSelling;
-            }
-            return this.configurationService.configure();
-        }), tap(() => this.state$.next({ loading: false, failure: false })), catchError(error => {
+    init$() {
+        return this.quoteDraftService.quoteDraft$.pipe(first(), switchMap(quote => {
+            const contextProperties = this.contextService.resolve().properties;
+            const productId = contextProperties.productId;
+            if (!productId) {
+                throw new Error(`Unable to start configuration for 'productId == null'`);
+            }
+            const lineItemId = this.getLineItemId(quote, productId, contextProperties.lineItemId);
+            const currentStateItem = quote.currentState.find(({ id }) => id === lineItemId);
+            if (currentStateItem) {
+                this.configurationService.setConfigurableRamp(currentStateItem);
+            }
+            const { offeringId } = currentStateItem !== null && currentStateItem !== void 0 ? currentStateItem : {};
+            return this.configurationRuntimeService.init({ productId, offeringId });
+        }), switchMap(() => this.customizeUI$()), tap(() => {
             var _a, _b;
-            if (!((_b = (_a = this.uiDefinition) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.suppressToastMessages)) {
-                this.messageService.add({ severity: 'error', summary: error });
+            const uiDefinition = (_b = (_a = this.configurationRuntimeService.runtimeContext) === null || _a === void 0 ? void 0 : _a.uiDefinitionContainer) === null || _b === void 0 ? void 0 : _b.source;
+            if (uiDefinition && !isLegacyUIDefinition(uiDefinition)) {
+                this.uiDefinition$.next(uiDefinition);
             }
-            this.state$.next({ loading: false, failure: true });
-            return of();
-        }), takeUntil(this.destroy$))
-            .subscribe();
-    }
-    throwIfNoUIDefinition() {
-        return (source$) => {
-            return source$.pipe(switchMap(() => {
-                if (!this.uiDefinition) {
-                    return throwError(() => 'Product does not have Configuration UI');
-                }
-                return source$;
-            }));
-        };
+            else {
+                throw new Error('Product does not have Configuration UI');
+            }
+        }), tap(() => {
+            if (this.configurationRuntimeService.initializationProps) {
+                this.configurationRuntimeService.initializationProps.attributesMap =
+                    this.integrationState.state.guidedSelling;
+            }
+        }), switchMap(() => this.configurationState.init$()));
     }
     getLineItemId(quote, productId, lineItemId) {
         var _a, _b;
@@ -2293,13 +2278,13 @@ class ProductComponent {
         return id;
     }
 }
-ProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.ConfigurationRuntimeService }, { token: i1$1.ConfigurationService }, { token: i1$1.QuoteDraftService }, { token: i8.MessageService }, { token: i5.IntegrationState }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ProductComponent, selector: "vl-flow-product", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.ConfigurationRuntimeService }, { token: i1$1.ConfigurationService }, { token: i1$1.ConfigurationState }, { token: i1$1.QuoteDraftService }, { token: i5.IntegrationState }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ProductComponent, selector: "vl-flow-product", ngImport: i0, template: "<vl-cms-preview [uiDefinition]=\"$any(uiDefinition$ | async)\" [config]=\"config\"></vl-cms-preview>\n", styles: [""], dependencies: [{ kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-flow-product', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n" }]
+            args: [{ selector: 'vl-flow-product', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vl-cms-preview [uiDefinition]=\"$any(uiDefinition$ | async)\" [config]=\"config\"></vl-cms-preview>\n" }]
         }], ctorParameters: function () {
-        return [{ type: i1$1.ContextService }, { type: i1$1.ConfigurationRuntimeService }, { type: i1$1.ConfigurationService }, { type: i1$1.QuoteDraftService }, { type: i8.MessageService }, { type: i5.IntegrationState }, { type: undefined, decorators: [{
+        return [{ type: i1$1.ContextService }, { type: i1$1.ConfigurationRuntimeService }, { type: i1$1.ConfigurationService }, { type: i1$1.ConfigurationState }, { type: i1$1.QuoteDraftService }, { type: i5.IntegrationState }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -2356,12 +2341,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
         }] });
 
 class RemoteComponent {
-    constructor(contextService, quoteDraftService, quoteApiService, runtimeService, configurationService, messageService, integrationState, location) {
+    constructor(contextService, quoteDraftService, runtimeService, configurationService, configurationState, messageService, integrationState, location) {
         this.contextService = contextService;
         this.quoteDraftService = quoteDraftService;
-        this.quoteApiService = quoteApiService;
         this.runtimeService = runtimeService;
         this.configurationService = configurationService;
+        this.configurationState = configurationState;
         this.messageService = messageService;
         this.integrationState = integrationState;
         this.location = location;
@@ -2400,25 +2385,27 @@ class RemoteComponent {
         this.runtimeService
             .init({ productId })
             .pipe(first(), tap(context => {
-            var _a, _b, _c, _d, _e;
-            const pricingEnabled = ((_b = (_a = context === null || context === void 0 ? void 0 : context.uiDefinition) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.pricingEnabled) ? 'true' : 'false';
-            const priceListId = (_d = (_c = context === null || context === void 0 ? void 0 : context.uiDefinition) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.priceList;
-            const runtimeContextProperties = (_e = this.runtimeService.runtimeContext) === null || _e === void 0 ? void 0 : _e.properties;
+            var _a, _b;
+            const uiDefinitionProperties = getUIDefinitionProperties(context.uiDefinitionContainer);
+            const uiDefinition = (_a = context.uiDefinitionContainer) === null || _a === void 0 ? void 0 : _a.source;
+            this.uiDefinition = uiDefinition && !isLegacyUIDefinition(uiDefinition) ? uiDefinition : undefined;
+            const pricingEnabled = uiDefinitionProperties.pricingEnabled ? 'true' : 'false';
+            const priceListId = uiDefinitionProperties.priceList;
+            const runtimeContextProperties = (_b = this.runtimeService.runtimeContext) === null || _b === void 0 ? void 0 : _b.properties;
             if (runtimeContextProperties) {
                 runtimeContextProperties.PriceListId = priceListId;
                 runtimeContextProperties.PricingEnabled = pricingEnabled;
             }
             this.contextService.update({
                 properties: {
-                    ModelId: context === null || context === void 0 ? void 0 : context.modelId,
+                    ModelId: context.modelId,
                     RuntimeMode: 'TEST',
                     PricingEnabled: pricingEnabled,
                     PriceListId: priceListId,
                 },
             });
-            this.uiDefinition = context === null || context === void 0 ? void 0 : context.uiDefinition;
             this.configurationService.setConfigurableRamp(this.createLineItem());
-        }), this.throwIfNoUIDefinition(), switchMap(() => this.configurationService.configure()), tap(() => this.state$.next({ loading: false, failure: false })), catchError(error => {
+        }), this.throwIfNoUIDefinition(), switchMap(() => this.configurationState.init$()), tap(() => this.state$.next({ loading: false, failure: false })), catchError(error => {
             var _a, _b;
             if (!((_b = (_a = this.uiDefinition) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.suppressToastMessages)) {
                 this.messageService.add({ severity: 'error', summary: error });
@@ -2682,12 +2669,12 @@ class RemoteComponent {
         return optionConfigurations;
     }
 }
-RemoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RemoteComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i2.QuoteApiService }, { token: i1$1.ConfigurationRuntimeService }, { token: i1$1.ConfigurationService }, { token: i8.MessageService }, { token: i5.IntegrationState }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
-RemoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: RemoteComponent, selector: "vl-flow-remote", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RemoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RemoteComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i1$1.ConfigurationRuntimeService }, { token: i1$1.ConfigurationService }, { token: i1$1.ConfigurationState }, { token: i8.MessageService }, { token: i5.IntegrationState }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
+RemoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: RemoteComponent, selector: "vl-flow-remote", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RemoteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-remote', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.ContextService }, { type: i1$1.QuoteDraftService }, { type: i2.QuoteApiService }, { type: i1$1.ConfigurationRuntimeService }, { type: i1$1.ConfigurationService }, { type: i8.MessageService }, { type: i5.IntegrationState }, { type: i4.Location }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.ContextService }, { type: i1$1.QuoteDraftService }, { type: i1$1.ConfigurationRuntimeService }, { type: i1$1.ConfigurationService }, { type: i1$1.ConfigurationState }, { type: i8.MessageService }, { type: i5.IntegrationState }, { type: i4.Location }]; } });
 
 class RemoteModule {
 }
@@ -2793,7 +2780,7 @@ class ShoppingCartComponent {
     }
 }
 ShoppingCartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ShoppingCartComponent, deps: [{ token: i2.UITemplatesApiService }, { token: i1$1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ShoppingCartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ShoppingCartComponent, selector: "vl-flow-shopping-cart", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ShoppingCartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ShoppingCartComponent, selector: "vl-flow-shopping-cart", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ShoppingCartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-shopping-cart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n" }]