@veloceapps/sdk 11.0.0-7 → 11.0.0-71

package/fesm2020/veloceapps-sdk.mjs

@@ -2,31 +2,31 @@ import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, Optional, Inject, Injectable, inject } from '@angular/core';
-import * as i1$1 from '@veloceapps/api';
 import { ApiModule } from '@veloceapps/api';
-import * as i2$1 from '@veloceapps/components';
+import * as i2 from '@veloceapps/components';
 import { ToastType, LoaderModule, LetDirectiveModule } from '@veloceapps/components';
 import * as i5 from '@veloceapps/sdk/cms';
 import { btoaSafe, PreviewModule, FlowAction, LauncherModule } from '@veloceapps/sdk/cms';
-import * as i2 from '@veloceapps/sdk/core';
-import { FLOW_CUSTOMIZATION, ContextService, FlowStateService, FlowInfoService, QuoteDraftService, ConfigurationService, IntegrationState, SdkCoreModule } from '@veloceapps/sdk/core';
+import * as i3$1 from '@veloceapps/sdk/core';
+import { FLOW_CUSTOMIZATION, RuntimeSettingsService, FlowStateService, FlowInfoService, SalesTransactionService, ConfigurationService, IntegrationState, ConfigurationRuntimeService, SdkCoreModule } from '@veloceapps/sdk/core';
 import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1 from 'primeng/dynamicdialog';
-import { BehaviorSubject, Subject, filter, first, tap, takeUntil, catchError, of, map, switchMap, shareReplay, startWith, distinctUntilChanged, from, take, combineLatest, forkJoin, throwError } from 'rxjs';
+import * as i1$1 from '@veloceapps/api/v2';
+import { UIDefinitionsAdminApiService } from '@veloceapps/api/v2';
+import { BehaviorSubject, Subject, filter, first, tap, takeUntil, catchError, of, map, switchMap, shareReplay, startWith, distinctUntilChanged, from, take, combineLatest } from 'rxjs';
 import { DomHandler } from 'primeng/dom';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd, NavigationStart, NavigationCancel, NavigationError, RouterModule } from '@angular/router';
-import { mapShoppingCartSettings, getMaxRenewalTermsValue, UITemplateType, SalesforceIdUtils, ConfigurationContextMode, isVeloceError, extractErrorDetails, UUID } from '@veloceapps/core';
+import { mapShoppingCartSettings, getMaxRenewalTermsValue, SalesforceIdUtils, UITemplateType, isVeloceError, extractErrorDetails } from '@veloceapps/core';
 import { HttpErrorResponse, HttpParams } from '@angular/common/http';
-import * as i5$1 from '@angular/forms';
+import * as i4$1 from '@angular/forms';
 import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DropdownModule } from 'primeng/dropdown';
-import * as i8 from 'primeng/inputtext';
+import * as i7 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i6 from 'primeng/radiobutton';
+import * as i5$1 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i2$2 from 'primeng/api';
 import { catchError as catchError$1 } from 'rxjs/operators';
 
 const VELOCE_FLOW_ROOT_ROUTE = 'VELOCE_FLOW_ROOT_ROUTE';
@@ -76,8 +76,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class FlowHeaderComponent {
-    constructor(templatesApi, flowStateService, flowInfo, toastService, customizationService) {
-        this.templatesApi = templatesApi;
+    constructor(templatesAdminApiService, flowStateService, flowInfo, toastService, customizationService) {
+        this.templatesAdminApiService = templatesAdminApiService;
         this.flowStateService = flowStateService;
         this.flowInfo = flowInfo;
         this.toastService = toastService;
@@ -97,9 +97,6 @@ class FlowHeaderComponent {
     }
     initialize() {
         this.templateApiName = this.flowInfo.flow?.properties.templates?.flowHeader ?? '';
-        if (this.flowInfo.isLegacy && !this.templateApiName) {
-            return;
-        }
         this.generateUIDefinition$()
             .pipe(tap(uiDef => {
             if (!uiDef) {
@@ -134,7 +131,7 @@ class FlowHeaderComponent {
         if (!template) {
             return of(undefined);
         }
-        return this.templatesApi.fetchComponentsAttachments$(template.id);
+        return this.templatesAdminApiService.fetchComponentsAttachments$(template.id);
     }
     generateUIDefinition$() {
         return of(undefined).pipe(tap(() => {
@@ -148,7 +145,6 @@ class FlowHeaderComponent {
             const uiDef = {
                 name: '',
                 createdTimestamp: 0,
-                primary: true,
                 type: 'DEFAULT',
                 version: 2,
                 children: metaList.map(meta => ({
@@ -162,12 +158,12 @@ class FlowHeaderComponent {
         }));
     }
 }
-FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i2.FlowStateService }, { token: i2.FlowInfoService }, { token: i2$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderComponent, deps: [{ token: i1$1.UITemplatesAdminApiService }, { token: i3$1.FlowStateService }, { token: i3$1.FlowInfoService }, { token: i2.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 FlowHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FlowHeaderComponent, selector: "vl-flow-new-header", 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.9", ngImport: i0, type: FlowHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-new-header', 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"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i2.FlowStateService }, { type: i2.FlowInfoService }, { type: i2$1.ToastService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesAdminApiService }, { type: i3$1.FlowStateService }, { type: i3$1.FlowInfoService }, { type: i2.ToastService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -189,8 +185,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class GuidedSellingComponent {
-    constructor(templatesApi, flowStateService, flowInfo, toastService, customizationService) {
-        this.templatesApi = templatesApi;
+    constructor(templatesAdminApiService, flowStateService, flowInfo, toastService, customizationService) {
+        this.templatesAdminApiService = templatesAdminApiService;
         this.flowStateService = flowStateService;
         this.flowInfo = flowInfo;
         this.toastService = toastService;
@@ -210,9 +206,6 @@ class GuidedSellingComponent {
     }
     initialize() {
         this.templateApiName = this.flowInfo.flow?.properties.templates?.guidedSelling ?? '';
-        if (this.flowInfo.isLegacy && !this.templateApiName) {
-            return;
-        }
         this.generateUIDefinition$()
             .pipe(tap(uiDef => {
             if (!uiDef) {
@@ -247,7 +240,7 @@ class GuidedSellingComponent {
         if (!template) {
             return of(undefined);
         }
-        return this.templatesApi.fetchComponentsAttachments$(template.id);
+        return this.templatesAdminApiService.fetchComponentsAttachments$(template.id);
     }
     generateUIDefinition$() {
         return of(undefined).pipe(tap(() => {
@@ -261,7 +254,6 @@ class GuidedSellingComponent {
             const uiDef = {
                 name: '',
                 createdTimestamp: 0,
-                primary: true,
                 type: 'DEFAULT',
                 version: 2,
                 children: metaList.map(meta => ({
@@ -275,12 +267,12 @@ class GuidedSellingComponent {
         }));
     }
 }
-GuidedSellingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GuidedSellingComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i2.FlowStateService }, { token: i2.FlowInfoService }, { token: i2$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+GuidedSellingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GuidedSellingComponent, deps: [{ token: i1$1.UITemplatesAdminApiService }, { token: i3$1.FlowStateService }, { token: i3$1.FlowInfoService }, { token: i2.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 GuidedSellingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i2.FlowStateService }, { type: i2.FlowInfoService }, { type: i2$1.ToastService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesAdminApiService }, { type: i3$1.FlowStateService }, { type: i3$1.FlowInfoService }, { type: i2.ToastService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -334,10 +326,10 @@ const configurePrimengShadowDOM = () => {
 };
 
 class FlowDialogService {
-    constructor(dialogService, contextService, runtimeSettings) {
+    constructor(dialogService, runtimeSettings, flowInfoService) {
         this.dialogService = dialogService;
-        this.contextService = contextService;
         this.runtimeSettings = runtimeSettings;
+        this.flowInfoService = flowInfoService;
     }
     show(config) {
         return this.dialogService.open(FlowDialogComponent, {
@@ -358,8 +350,8 @@ class FlowDialogService {
         });
     }
     showReadonlyModeDialog() {
-        const ctx = this.contextService.resolve();
-        const objectName = ctx.mode ? ctx.mode[0]?.toUpperCase() + ctx.mode.substring(1).toLowerCase() : 'Object';
+        const mode = this.flowInfoService.context.mode;
+        const objectName = mode ? mode[0]?.toUpperCase() + mode.substring(1).toLowerCase() : 'Object';
         return this.show({
             title: 'Error',
             description: `${objectName} Cannot be Saved`,
@@ -431,20 +423,18 @@ class FlowDialogService {
         return dialogFunction(dialog);
     }
 }
-FlowDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDialogService, deps: [{ token: i1.DialogService }, { token: i2.ContextService }, { token: i2.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
+FlowDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDialogService, deps: [{ token: i1.DialogService }, { token: i3$1.RuntimeSettingsService }, { token: i3$1.FlowInfoService }], target: i0.ɵɵFactoryTarget.Injectable });
 FlowDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDialogService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDialogService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.ContextService }, { type: i2.RuntimeSettingsService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i3$1.RuntimeSettingsService }, { type: i3$1.FlowInfoService }]; } });
 
 class FlowRouterService {
-    constructor(router, route, contextService, integrationState, flowInfoService, flowStateService) {
+    constructor(router, route, integrationState, flowInfoService) {
         this.router = router;
         this.route = route;
-        this.contextService = contextService;
         this.integrationState = integrationState;
         this.flowInfoService = flowInfoService;
-        this.flowStateService = flowStateService;
         this.urlHistory = [];
         this.getLastChildRoute = (route) => {
             return route.firstChild ? this.getLastChildRoute(route.firstChild) : route;
@@ -538,7 +528,7 @@ class FlowRouterService {
             this.router.navigateByUrl(prevUrl);
         }
     }
-    navigateTo(path, productId, lineItemId) {
+    navigateTo(path, productId, transactionItemId) {
         if (path === 'shopping-cart') {
             this.navigateToShoppingCart();
         }
@@ -549,31 +539,16 @@ class FlowRouterService {
             this.navigateToAssets();
         }
         else if (path === 'product' && productId) {
-            this.navigateToProductConfiguration(productId, lineItemId);
+            this.navigateToProductConfiguration(productId, transactionItemId);
         }
     }
-    navigateToProductConfiguration(productId, lineItemId) {
-        let updateContext$;
-        if (this.flowInfoService.isLegacy) {
-            updateContext$ = of(undefined).pipe(tap(() => {
-                this.contextService.update({ properties: { productId, lineItemId: lineItemId ?? '' } });
-            }));
-        }
-        else {
-            updateContext$ = this.flowStateService.dispatch$(UITemplateType.FLOW_ENGINE, 'UPDATE_CONTEXT_PROPERTIES', {
-                productId,
-                lineItemId: lineItemId ?? '',
-            });
-        }
-        updateContext$
-            .pipe(tap(() => {
-            const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
-            const flowRouteUrl = this.getFlowRootPath(routeSnapshot);
-            this.router.navigate([flowRouteUrl, 'product'], {
-                queryParams: { ...routeSnapshot.queryParams, productId },
-            });
-        }))
-            .subscribe();
+    navigateToProductConfiguration(productId, transactionItemId) {
+        this.flowInfoService.updateContext({ productId, transactionItemId });
+        const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
+        const flowRouteUrl = this.getFlowRootPath(routeSnapshot);
+        this.router.navigate([flowRouteUrl, 'product'], {
+            queryParams: { ...routeSnapshot.queryParams, productId, transactionItemId },
+        });
     }
     navigateToShoppingCart() {
         const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
@@ -610,23 +585,20 @@ class FlowRouterService {
         this.router.navigate([], { relativeTo: route, queryParams: { ...routeSnapshot.queryParams, ...queryParams } });
     }
 }
-FlowRouterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRouterService, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i2.ContextService }, { token: i2.IntegrationState }, { token: i2.FlowInfoService }, { token: i2.FlowStateService }], target: i0.ɵɵFactoryTarget.Injectable });
+FlowRouterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRouterService, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i3$1.IntegrationState }, { token: i3$1.FlowInfoService }], target: i0.ɵɵFactoryTarget.Injectable });
 FlowRouterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRouterService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRouterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i2.ContextService }, { type: i2.IntegrationState }, { type: i2.FlowInfoService }, { type: i2.FlowStateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i3$1.IntegrationState }, { type: i3$1.FlowInfoService }]; } });
 
 class FlowService {
-    constructor(integrationState, flowRouterService, quoteDraftService, configurationService, configurationStateService, flowDialogService, flowConfigurationService, flowInfoService, flowStateService) {
+    constructor(integrationState, flowRouterService, configurationService, configurationStateService, flowDialogService, flowStateService) {
         this.integrationState = integrationState;
         this.flowRouterService = flowRouterService;
-        this.quoteDraftService = quoteDraftService;
         this.configurationService = configurationService;
         this.configurationStateService = configurationStateService;
         this.flowDialogService = flowDialogService;
-        this.flowConfigurationService = flowConfigurationService;
-        this.flowInfoService = flowInfoService;
         this.flowStateService = flowStateService;
         this.cleanup$ = new Subject();
     }
@@ -636,16 +608,9 @@ class FlowService {
     initSubscriptions() {
         this.integrationState
             .listen$(FlowAction.FLOW_CONFIGURE_PRODUCT)
-            .pipe(switchMap(payload => {
-            if (this.flowInfoService.isLegacy) {
-                const productId = payload.productId ??
-                    this.quoteDraftService.currentState.find(li => li.id === payload.lineItemId)?.productId;
-                return of({ ...payload, productId });
-            }
-            return this.prepareConfiguration$(payload.lineItemId).pipe(map(() => payload));
-        }), tap(payload => {
+            .pipe(tap(payload => {
             if (payload.productId) {
-                this.flowRouterService.navigateToProductConfiguration(payload.productId, payload.lineItemId);
+                this.flowRouterService.navigateToProductConfiguration(payload.productId, payload.transactionItemId);
             }
             else {
                 console.warn("Parameter 'productId' is needed to start configuration");
@@ -669,7 +634,7 @@ class FlowService {
                 this.integrationState.dispatch(FlowAction.ConfigureProductAction(payload));
             }
             else {
-                this.flowRouterService.navigateTo(payload.path, payload.productId, payload.lineItemId);
+                this.flowRouterService.navigateTo(payload.path, payload.productId, payload.transactionItemId);
             }
         }), takeUntil(this.cleanup$))
             .subscribe();
@@ -689,17 +654,10 @@ class FlowService {
             .subscribe();
         this.integrationState
             .listen$(FlowAction.FLOW_APPLY_PRODUCT_CONFIGURATION)
-            .pipe(switchMap(() => {
-            if (this.flowInfoService.isLegacy) {
-                return this.legacyApplyConfiguration();
-            }
-            else {
-                return this.configurationStateService.saveConfiguration(true).pipe(switchMap(() => this.configurationStateService.cancelConfiguration()), switchMap(() => this.flowStateService.dispatch$(UITemplateType.FLOW_ENGINE, 'MODIFY_ASSETS', {
-                    addConfiguringAssetId: true,
-                    enable: true,
-                })));
-            }
-        }), tap(() => {
+            .pipe(switchMap(() => this.configurationStateService.saveConfiguration()), switchMap(() => this.configurationStateService.cancelConfiguration()), switchMap(() => this.flowStateService.dispatch$(UITemplateType.FLOW_ENGINE, 'MODIFY_ASSETS', {
+            addConfiguringAssetId: true,
+            enable: true,
+        })), tap(() => {
             this.configurationService.hasUnsavedChanges = false;
             this.flowRouterService.navigateToShoppingCart();
         }), takeUntil(this.cleanup$))
@@ -715,36 +673,12 @@ class FlowService {
             .pipe(map(path => path.queryParams['productId']), takeUntil(this.cleanup$))
             .subscribe(productId => this.integrationState.patchState({ productId }));
     }
-    prepareConfiguration$(lineItemId) {
-        if (!lineItemId) {
-            return of(undefined);
-        }
-        return this.flowStateService.dispatch$(UITemplateType.FLOW_ENGINE, 'UPDATE_PRICE_LIST', {
-            lineItemId,
-        });
-    }
-    legacyApplyConfiguration() {
-        const quoteDraft = this.quoteDraftService.quoteDraft;
-        const lineItem = this.configurationService.getSnapshot();
-        if (!quoteDraft || !lineItem) {
-            return of(undefined);
-        }
-        const isNewLineItem = quoteDraft.currentState.every(li => li.id !== lineItem.id);
-        let updatedState;
-        if (isNewLineItem) {
-            updatedState = [...quoteDraft.currentState, lineItem];
-        }
-        else {
-            updatedState = quoteDraft.currentState.map(li => (li.id === lineItem.id ? lineItem : li));
-        }
-        return this.flowConfigurationService.calculate$({ ...quoteDraft, currentState: updatedState });
-    }
 }
-FlowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowService, deps: [{ token: i5.IntegrationState }, { token: FlowRouterService }, { token: i2.QuoteDraftService }, { token: i2.ConfigurationService }, { token: i2.ConfigurationStateService }, { token: FlowDialogService }, { token: i2.FlowConfigurationService }, { token: i2.FlowInfoService }, { token: i2.FlowStateService }], target: i0.ɵɵFactoryTarget.Injectable });
+FlowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowService, deps: [{ token: i5.IntegrationState }, { token: FlowRouterService }, { token: i3$1.ConfigurationService }, { token: i3$1.ConfigurationStateService }, { token: FlowDialogService }, { token: i3$1.FlowStateService }], target: i0.ɵɵFactoryTarget.Injectable });
 FlowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i5.IntegrationState }, { type: FlowRouterService }, { type: i2.QuoteDraftService }, { type: i2.ConfigurationService }, { type: i2.ConfigurationStateService }, { type: FlowDialogService }, { type: i2.FlowConfigurationService }, { type: i2.FlowInfoService }, { type: i2.FlowStateService }]; } });
+        }], ctorParameters: function () { return [{ type: i5.IntegrationState }, { type: FlowRouterService }, { type: i3$1.ConfigurationService }, { type: i3$1.ConfigurationStateService }, { type: FlowDialogService }, { type: i3$1.FlowStateService }]; } });
 
 class FlowGuidedSellingService {
     constructor(integrationState) {
@@ -768,21 +702,21 @@ class FlowGuidedSellingService {
             .subscribe();
     }
 }
-FlowGuidedSellingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowGuidedSellingService, deps: [{ token: i2.IntegrationState }], target: i0.ɵɵFactoryTarget.Injectable });
+FlowGuidedSellingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowGuidedSellingService, deps: [{ token: i3$1.IntegrationState }], target: i0.ɵɵFactoryTarget.Injectable });
 FlowGuidedSellingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowGuidedSellingService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowGuidedSellingService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2.IntegrationState }]; } });
+        }], ctorParameters: function () { return [{ type: i3$1.IntegrationState }]; } });
 
 class FlowComponent {
-    constructor(routerService, flowService, flowInfo, guidedSellingService) {
+    constructor(routerService, flowService, flowInfoService, guidedSellingService) {
         this.routerService = routerService;
         this.flowService = flowService;
-        this.flowInfo = flowInfo;
+        this.flowInfoService = flowInfoService;
         this.guidedSellingService = guidedSellingService;
         this.isLoading$ = this.routerService.loading$;
-        this.showHeader$ = combineLatest([this.routerService.route$, this.flowInfo.flow$]).pipe(map(([route, flow]) => route.data['showHeader'] && !flow?.properties.standalone));
-        this.isStandalone$ = this.flowInfo.flow$.pipe(map(flow => Boolean(flow?.properties.standalone)));
+        this.showHeader$ = combineLatest([this.routerService.route$, this.flowInfoService.flow$]).pipe(map(([route, flow]) => route.data['showHeader'] && !flow?.properties.standalone));
+        this.isStandalone$ = this.flowInfoService.flow$.pipe(map(flow => Boolean(flow?.properties.standalone)));
         this.guidedSellingVisible$ = this.guidedSellingService.isVisible$;
         this.flowService.initSubscriptions();
     }
@@ -790,140 +724,36 @@ class FlowComponent {
         this.flowService.cleanup();
     }
 }
-FlowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowComponent, deps: [{ token: FlowRouterService }, { token: FlowService }, { token: i2.FlowInfoService }, { token: FlowGuidedSellingService }], target: i0.ɵɵFactoryTarget.Component });
-FlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FlowComponent, selector: "vl-flow", ngImport: i0, template: "<vl-flow-new-header *ngIf=\"showHeader$ | async\"></vl-flow-new-header>\n\n<div class=\"flow-content\">\n  <div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n    <vl-loader label=\"LOADING\"></vl-loader>\n  </div>\n\n  <router-outlet></router-outlet>\n\n  <div class=\"guided-selling\" [ngClass]=\"{ hidden: (guidedSellingVisible$ | async) === false }\">\n    <vl-flow-guided-selling *ngIf=\"(isStandalone$ | async) !== true\"></vl-flow-guided-selling>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.flow-content{flex-grow:1;position:relative;overflow:hidden}.loading-overlay{position:absolute;height:100%;width:100%;inset:0;background-color:#fff;z-index:999}.guided-selling{position:absolute;top:0;width:100%;height:100%;z-index:100}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "component", type: FlowHeaderComponent, selector: "vl-flow-new-header" }, { kind: "component", type: GuidedSellingComponent, selector: "vl-flow-guided-selling" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FlowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowComponent, deps: [{ token: FlowRouterService }, { token: FlowService }, { token: i3$1.FlowInfoService }, { token: FlowGuidedSellingService }], target: i0.ɵɵFactoryTarget.Component });
+FlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FlowComponent, selector: "vl-flow", ngImport: i0, template: "<vl-flow-new-header *ngIf=\"showHeader$ | async\"></vl-flow-new-header>\n\n<div class=\"flow-content\">\n  <div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n    <vl-loader label=\"LOADING\"></vl-loader>\n  </div>\n\n  <router-outlet></router-outlet>\n\n  <div class=\"guided-selling\" [ngClass]=\"{ hidden: (guidedSellingVisible$ | async) === false }\">\n    <vl-flow-guided-selling *ngIf=\"(isStandalone$ | async) !== true\"></vl-flow-guided-selling>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.flow-content{flex-grow:1;position:relative;overflow:hidden}.loading-overlay{position:absolute;height:100%;width:100%;inset:0;background-color:#fff;z-index:999}.guided-selling{position:absolute;top:0;width:100%;height:100%;z-index:100}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "component", type: FlowHeaderComponent, selector: "vl-flow-new-header" }, { kind: "component", type: GuidedSellingComponent, selector: "vl-flow-guided-selling" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vl-flow-new-header *ngIf=\"showHeader$ | async\"></vl-flow-new-header>\n\n<div class=\"flow-content\">\n  <div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n    <vl-loader label=\"LOADING\"></vl-loader>\n  </div>\n\n  <router-outlet></router-outlet>\n\n  <div class=\"guided-selling\" [ngClass]=\"{ hidden: (guidedSellingVisible$ | async) === false }\">\n    <vl-flow-guided-selling *ngIf=\"(isStandalone$ | async) !== true\"></vl-flow-guided-selling>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.flow-content{flex-grow:1;position:relative;overflow:hidden}.loading-overlay{position:absolute;height:100%;width:100%;inset:0;background-color:#fff;z-index:999}.guided-selling{position:absolute;top:0;width:100%;height:100%;z-index:100}.hidden{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: FlowRouterService }, { type: FlowService }, { type: i2.FlowInfoService }, { type: FlowGuidedSellingService }]; } });
-
-const getFlowObjectIdPropertyName = (id) => {
-    const objectName = SalesforceIdUtils.getSfObjectNameById(id);
-    switch (objectName) {
-        case 'Account':
-            return 'accountId';
-        case 'Order':
-            return 'orderId';
-        case 'Quote':
-        default:
-            return 'quoteId';
-    }
-};
-const getDefaultProperties = (params) => {
-    const properties = {};
-    let standalone = params.flowParams?.standalone;
-    if (params.flowParams?.entryPath.includes('/product') || params.mode === ConfigurationContextMode.REMOTE) {
-        standalone = standalone ?? true;
-    }
-    if (standalone != null) {
-        properties.standalone = standalone ? 'true' : 'false';
-    }
-    return properties;
-};
-
-class ContextGuard {
-    constructor(router, routerService, contextService, runtimeSettingsService) {
-        this.router = router;
-        this.routerService = routerService;
-        this.contextService = contextService;
-        this.runtimeSettingsService = runtimeSettingsService;
-    }
-    checkActivation(route) {
-        const { queryParams } = route;
-        const { accountId, quoteId, orderId } = queryParams;
-        const rpcMessage = window.RPC_MESSAGE;
-        const mode = this.getConfigurationContextMode(accountId, quoteId, orderId, rpcMessage);
-        // Restrict if mode is not defined
-        if (mode == null) {
-            return this.routerService.showErrorPage$('Mode is undefined');
-        }
-        const headerId = accountId || quoteId || orderId || this.rpcMessageId || 'empty-for-test-mode';
-        // Allow if context is already initialized with the same headerId
-        if (this.contextService.isInitialized) {
-            const currentContext = this.contextService.resolve();
-            if (headerId && currentContext.headerId === headerId) {
-                return of(true);
-            }
-        }
-        // Initialize context and runtime settings
-        return forkJoin([this.contextService.create(headerId, mode), this.runtimeSettingsService.create()]).pipe(tap(([context]) => {
-            this.contextService.update({
-                ...context,
-                properties: {
-                    ...context.properties,
-                    ...(queryParams ?? {}),
-                    ...getDefaultProperties({ mode }),
-                },
-            });
-            // Init currency settings
-            this.runtimeSettingsService.initCurrency(context.properties['CurrencyIsoCode']);
-        }), map(() => true), catchError(e => {
-            const message = e instanceof HttpErrorResponse ? e.error.message : e;
-            const errorDetails = isVeloceError(e.error) ? extractErrorDetails(e.error) : [];
-            return this.routerService.showErrorPage$(message, errorDetails);
-        }));
-    }
-    canActivate(route) {
-        return this.checkActivation(route);
-    }
-    canActivateChild(childRoute) {
-        return this.checkActivation(childRoute);
-    }
-    get rpcMessageId() {
-        if (!window.RPC_MESSAGE) {
-            return;
-        }
-        const rpcMessage = JSON.parse(window.RPC_MESSAGE);
-        const veloceReferenceId = rpcMessage.configuration?.VeloceReferenceId;
-        const quoteId = rpcMessage.quote?.Id;
-        return veloceReferenceId || quoteId;
-    }
-    getConfigurationContextMode(accountId, quoteId, orderId, rpcMessage) {
-        if (accountId) {
-            return ConfigurationContextMode.ACCOUNT;
-        }
-        if (quoteId) {
-            return ConfigurationContextMode.QUOTE;
-        }
-        if (orderId) {
-            return ConfigurationContextMode.ORDER;
-        }
-        if (rpcMessage) {
-            return ConfigurationContextMode.REMOTE;
-        }
-        return;
-    }
-}
-ContextGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContextGuard, deps: [{ token: i1$2.Router }, { token: FlowRouterService }, { token: i2.ContextService }, { token: i2.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
-ContextGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContextGuard });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContextGuard, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i2.ContextService }, { type: i2.RuntimeSettingsService }]; } });
+        }], ctorParameters: function () { return [{ type: FlowRouterService }, { type: FlowService }, { type: i3$1.FlowInfoService }, { type: FlowGuidedSellingService }]; } });
 
 const keepFlowInitialized = (route) => {
-    const contextService = inject(ContextService);
+    const routerService = inject(FlowRouterService);
+    const runtimeSettingsService = inject(RuntimeSettingsService);
     const flowState = inject(FlowStateService);
     const flowInfoService = inject(FlowInfoService);
-    const routerService = inject(FlowRouterService);
-    const quoteDraft = inject(QuoteDraftService);
+    const salesTrasnsactionService = inject(SalesTransactionService);
     const configurationService = inject(ConfigurationService);
     const integrationState = inject(IntegrationState);
     const { flowId } = route.queryParams;
-    const flow = flowInfoService.flow;
-    if (flow && flow?.id === flowId) {
+    if (flowInfoService.isFlowInitialized && flowInfoService.flow.id === flowId) {
         return true;
     }
     // Cleanup
-    flowState.cleanup();
-    quoteDraft.reset();
+    flowState.reset();
+    salesTrasnsactionService.reset();
     configurationService.reset();
-    integrationState.clear();
-    flowInfoService.cleanup();
-    contextService.delete();
+    integrationState.reset();
+    flowInfoService.reset();
     if (!flowId) {
         return true;
     }
-    return flowInfoService.init$(flowId, route.queryParams).pipe(map(() => true), catchError(e => {
+    return runtimeSettingsService.create().pipe(tap(() => runtimeSettingsService.initCurrency('USD')), switchMap(() => flowInfoService.init$(flowId, route.queryParams)), map(() => true), catchError(e => {
+        console.error(e);
         const message = e instanceof HttpErrorResponse ? e.error.message : e;
         const errorDetails = isVeloceError(e.error) ? extractErrorDetails(e.error) : [];
         return routerService.showErrorPage$(message, errorDetails);
@@ -931,22 +761,20 @@ const keepFlowInitialized = (route) => {
 };
 
 class ProductUnloadGuard {
-    constructor(router, contextService, quoteDraftService, configurationService, flowDialogService) {
+    constructor(router, flowInfoService, configurationService, flowDialogService) {
         this.router = router;
-        this.contextService = contextService;
-        this.quoteDraftService = quoteDraftService;
+        this.flowInfoService = flowInfoService;
         this.configurationService = configurationService;
         this.flowDialogService = flowDialogService;
     }
     canDeactivate(_, route, currentState, nextState) {
         let observable = of(true);
-        if (!this.quoteDraftService.isStandalone && this.configurationService.hasUnsavedChanges) {
+        if (!this.flowInfoService.flow.properties.standalone && this.configurationService.hasUnsavedChanges) {
             observable = this.flowDialogService.showUnsavedChangesDialog();
         }
         return observable.pipe(map(unload => {
             if (unload) {
                 this.configurationService.reset();
-                this.contextService.update({ properties: { productId: undefined, lineItemId: undefined } });
                 if (!nextState || currentState.url === nextState.url) {
                     return true;
                 }
@@ -964,11 +792,11 @@ class ProductUnloadGuard {
         }));
     }
 }
-ProductUnloadGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductUnloadGuard, deps: [{ token: i1$2.Router }, { token: i2.ContextService }, { token: i2.QuoteDraftService }, { token: i2.ConfigurationService }, { token: FlowDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
+ProductUnloadGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductUnloadGuard, deps: [{ token: i1$2.Router }, { token: i3$1.FlowInfoService }, { token: i3$1.ConfigurationService }, { token: FlowDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
 ProductUnloadGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductUnloadGuard });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductUnloadGuard, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i2.ContextService }, { type: i2.QuoteDraftService }, { type: i2.ConfigurationService }, { type: FlowDialogService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i3$1.FlowInfoService }, { type: i3$1.ConfigurationService }, { type: FlowDialogService }]; } });
 
 class RootGuard {
     constructor(router, routerService) {
@@ -1011,8 +839,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }]; } });
 
 class AssetsComponent {
-    constructor(templatesApi, cdr, toastService, flowInfo, customizationService) {
-        this.templatesApi = templatesApi;
+    constructor(templatesAdminApiService, cdr, toastService, flowInfo, customizationService) {
+        this.templatesAdminApiService = templatesAdminApiService;
         this.cdr = cdr;
         this.toastService = toastService;
         this.flowInfo = flowInfo;
@@ -1065,7 +893,7 @@ class AssetsComponent {
         if (!template) {
             return of(undefined);
         }
-        return this.templatesApi.fetchComponentsAttachments$(template.id);
+        return this.templatesAdminApiService.fetchComponentsAttachments$(template.id);
     }
     generateUIDefinition$() {
         return of(undefined).pipe(tap(() => {
@@ -1079,7 +907,6 @@ class AssetsComponent {
             const uiDef = {
                 name: '',
                 createdTimestamp: 0,
-                primary: true,
                 type: 'DEFAULT',
                 version: 2,
                 children: metaList.map(meta => ({
@@ -1093,12 +920,12 @@ class AssetsComponent {
         }));
     }
 }
-AssetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AssetsComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i0.ChangeDetectorRef }, { token: i2$1.ToastService }, { token: i2.FlowInfoService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AssetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AssetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AssetsComponent, deps: [{ token: i1$1.UITemplatesAdminApiService }, { token: i0.ChangeDetectorRef }, { token: i2.ToastService }, { token: i3$1.FlowInfoService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AssetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i2.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.9", 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" }]
-        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i0.ChangeDetectorRef }, { type: i2$1.ToastService }, { type: i2.FlowInfoService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesAdminApiService }, { type: i0.ChangeDetectorRef }, { type: i2.ToastService }, { type: i3$1.FlowInfoService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1120,8 +947,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class CatalogComponent {
-    constructor(templatesApi, cdr, toastService, flowInfo, customizationService) {
-        this.templatesApi = templatesApi;
+    constructor(templatesAdminApiService, cdr, toastService, flowInfo, customizationService) {
+        this.templatesAdminApiService = templatesAdminApiService;
         this.cdr = cdr;
         this.toastService = toastService;
         this.flowInfo = flowInfo;
@@ -1174,7 +1001,7 @@ class CatalogComponent {
         if (!template) {
             return of(undefined);
         }
-        return this.templatesApi.fetchComponentsAttachments$(template.id);
+        return this.templatesAdminApiService.fetchComponentsAttachments$(template.id);
     }
     generateUIDefinition$() {
         return of(undefined).pipe(tap(() => {
@@ -1188,7 +1015,6 @@ class CatalogComponent {
             const uiDef = {
                 name: '',
                 createdTimestamp: 0,
-                primary: true,
                 type: 'DEFAULT',
                 version: 2,
                 children: metaList.map(meta => ({
@@ -1202,12 +1028,12 @@ class CatalogComponent {
         }));
     }
 }
-CatalogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CatalogComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i0.ChangeDetectorRef }, { token: i2$1.ToastService }, { token: i2.FlowInfoService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CatalogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CatalogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CatalogComponent, deps: [{ token: i1$1.UITemplatesAdminApiService }, { token: i0.ChangeDetectorRef }, { token: i2.ToastService }, { token: i3$1.FlowInfoService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CatalogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i2.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.9", 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" }]
-        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i0.ChangeDetectorRef }, { type: i2$1.ToastService }, { type: i2.FlowInfoService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesAdminApiService }, { type: i0.ChangeDetectorRef }, { type: i2.ToastService }, { type: i3$1.FlowInfoService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1229,12 +1055,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class DebugComponent {
-    constructor(flowsApiService, router, activatedRoute, context, quoteDraftService) {
+    constructor(flowsApiService, router, activatedRoute) {
         this.flowsApiService = flowsApiService;
         this.router = router;
         this.activatedRoute = activatedRoute;
-        this.context = context;
-        this.quoteDraftService = quoteDraftService;
         this.form = new FormGroup({
             id: new FormControl(''),
         });
@@ -1242,17 +1066,13 @@ class DebugComponent {
     }
     runFlow() {
         const { id } = this.form.value;
-        const objectPropertyName = id && getFlowObjectIdPropertyName(id);
-        if (!id || !objectPropertyName || !this.selectedFlow) {
+        if (!id || !this.selectedFlow) {
             return;
         }
-        // Delete context before starting a new flow
-        this.context.delete();
-        this.quoteDraftService.reset();
         this.router.navigate(['..', 'flows'], {
             queryParams: {
                 flowId: this.selectedFlow.id,
-                [objectPropertyName]: id,
+                headerId: id,
                 ...this.selectedFlow.properties.queryParams,
             },
             relativeTo: this.activatedRoute,
@@ -1262,12 +1082,12 @@ class DebugComponent {
         return new HttpParams({ fromObject: params }).toString();
     }
 }
-DebugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DebugComponent, deps: [{ token: i1$1.FlowsApiService }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i2.ContextService }, { token: i2.QuoteDraftService }], target: i0.ɵɵFactoryTarget.Component });
-DebugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DebugComponent, selector: "vl-flow-debug", ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div class=\"fields-container\">\n    <div class=\"field\">\n      <label>SF Object ID</label>\n      <input formControlName=\"id\" pInputText type=\"text\" />\n    </div>\n  </div>\n\n  <p-button\n    styleClass=\"p-button-primary\"\n    label=\"Run Flow\"\n    [disabled]=\"!form.value.id || !selectedFlow\"\n    (onClick)=\"runFlow()\"\n  ></p-button>\n</form>\n\n<table>\n  <thead>\n    <tr>\n      <th [width]=\"30\"></th>\n      <th [width]=\"160\">ID</th>\n      <th [width]=\"160\">Entry Path</th>\n      <th>QueryParams</th>\n      <th [width]=\"100\">Standalone</th>\n      <th [width]=\"100\">Stateful</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let flow of flows$ | async\" (click)=\"selectedFlow = flow\">\n      <td><p-radioButton [inputId]=\"flow.id\" name=\"flow\" [value]=\"flow\" [(ngModel)]=\"selectedFlow\"></p-radioButton></td>\n      <td>{{ flow.id }}</td>\n      <td>{{ flow.properties.entryPath }}</td>\n      <td class=\"cell-query-params\">{{ getQueryParamsString(flow.properties.queryParams) }}</td>\n      <td>{{ flow.properties.standalone }}</td>\n      <td>{{ flow.properties.stateful }}</td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{display:block;padding:24px 54px}form{display:flex;align-items:center;justify-content:space-between}.fields-container{display:flex;gap:24px}.field{display:flex;flex-direction:column;width:200px;flex-shrink:0}:host ::ng-deep .p-dropdown{width:100%}table{width:100%;border-collapse:collapse;table-layout:fixed}tbody>tr{cursor:pointer}tbody>tr:hover{background-color:#f0f5fa}th{text-align:left;font-weight:600}th,td{padding:0 10px;height:30px;border-bottom:1px solid var(--vl-border-color);margin-right:16px;line-height:18px}.cell-query-params{word-break:break-all}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i8.InputText, selector: "[pInputText]" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DebugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DebugComponent, deps: [{ token: i1$1.FlowsApiService }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+DebugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DebugComponent, selector: "vl-flow-debug", ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div class=\"fields-container\">\n    <div class=\"field\">\n      <label>SF Object ID</label>\n      <input formControlName=\"id\" pInputText type=\"text\" />\n    </div>\n  </div>\n\n  <p-button\n    styleClass=\"p-button-primary\"\n    label=\"Run Flow\"\n    [disabled]=\"!form.value.id || !selectedFlow\"\n    (onClick)=\"runFlow()\"\n  ></p-button>\n</form>\n\n<table>\n  <thead>\n    <tr>\n      <th [width]=\"30\"></th>\n      <th [width]=\"160\">ID</th>\n      <th [width]=\"160\">Entry Path</th>\n      <th>QueryParams</th>\n      <th [width]=\"100\">Standalone</th>\n      <th [width]=\"100\">Stateful</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let flow of flows$ | async\" (click)=\"selectedFlow = flow\">\n      <td><p-radioButton [inputId]=\"flow.id\" name=\"flow\" [value]=\"flow\" [(ngModel)]=\"selectedFlow\"></p-radioButton></td>\n      <td>{{ flow.id }}</td>\n      <td>{{ flow.properties.entryPath }}</td>\n      <td class=\"cell-query-params\">{{ getQueryParamsString(flow.properties.queryParams) }}</td>\n      <td>{{ flow.properties.standalone }}</td>\n      <td>{{ flow.properties.stateful }}</td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{display:block;padding:24px 54px}form{display:flex;align-items:center;justify-content:space-between}.fields-container{display:flex;gap:24px}.field{display:flex;flex-direction:column;width:200px;flex-shrink:0}:host ::ng-deep .p-dropdown{width:100%}table{width:100%;border-collapse:collapse;table-layout:fixed}tbody>tr{cursor:pointer}tbody>tr:hover{background-color:#f0f5fa}th{text-align:left;font-weight:600}th,td{padding:0 10px;height:30px;border-bottom:1px solid var(--vl-border-color);margin-right:16px;line-height:18px}.cell-query-params{word-break:break-all}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i7.InputText, selector: "[pInputText]" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DebugComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-debug', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\">\n  <div class=\"fields-container\">\n    <div class=\"field\">\n      <label>SF Object ID</label>\n      <input formControlName=\"id\" pInputText type=\"text\" />\n    </div>\n  </div>\n\n  <p-button\n    styleClass=\"p-button-primary\"\n    label=\"Run Flow\"\n    [disabled]=\"!form.value.id || !selectedFlow\"\n    (onClick)=\"runFlow()\"\n  ></p-button>\n</form>\n\n<table>\n  <thead>\n    <tr>\n      <th [width]=\"30\"></th>\n      <th [width]=\"160\">ID</th>\n      <th [width]=\"160\">Entry Path</th>\n      <th>QueryParams</th>\n      <th [width]=\"100\">Standalone</th>\n      <th [width]=\"100\">Stateful</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let flow of flows$ | async\" (click)=\"selectedFlow = flow\">\n      <td><p-radioButton [inputId]=\"flow.id\" name=\"flow\" [value]=\"flow\" [(ngModel)]=\"selectedFlow\"></p-radioButton></td>\n      <td>{{ flow.id }}</td>\n      <td>{{ flow.properties.entryPath }}</td>\n      <td class=\"cell-query-params\">{{ getQueryParamsString(flow.properties.queryParams) }}</td>\n      <td>{{ flow.properties.standalone }}</td>\n      <td>{{ flow.properties.stateful }}</td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{display:block;padding:24px 54px}form{display:flex;align-items:center;justify-content:space-between}.fields-container{display:flex;gap:24px}.field{display:flex;flex-direction:column;width:200px;flex-shrink:0}:host ::ng-deep .p-dropdown{width:100%}table{width:100%;border-collapse:collapse;table-layout:fixed}tbody>tr{cursor:pointer}tbody>tr:hover{background-color:#f0f5fa}th{text-align:left;font-weight:600}th,td{padding:0 10px;height:30px;border-bottom:1px solid var(--vl-border-color);margin-right:16px;line-height:18px}.cell-query-params{word-break:break-all}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.FlowsApiService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i2.ContextService }, { type: i2.QuoteDraftService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.FlowsApiService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }]; } });
 
 const routes$1 = [{ path: '', component: DebugComponent }];
 class DebugModule {
@@ -1305,121 +1125,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class ProductComponent {
-    constructor(contextService, configurationRuntimeService, configurationService, configurationStateService, quoteDraftService, flowInfoService, flowStateService, integrationState, customizationService) {
-        this.contextService = contextService;
+    constructor(configurationRuntimeService, configurationStateService) {
         this.configurationRuntimeService = configurationRuntimeService;
-        this.configurationService = configurationService;
         this.configurationStateService = configurationStateService;
-        this.quoteDraftService = quoteDraftService;
-        this.flowInfoService = flowInfoService;
-        this.flowStateService = flowStateService;
-        this.integrationState = integrationState;
-        this.customizationService = customizationService;
-        this.uiDefinition$ = new BehaviorSubject(undefined);
+        this.uiDefinitionContainer$ = new BehaviorSubject(null);
+        this.uiDefinitionContainer$.next(this.configurationRuntimeService.uiDefinitionContainer);
         this.config = {
             init$: () => this.init$(),
         };
     }
-    customizeUI$() {
-        const { productId } = this.configurationRuntimeService.runtimeContext ?? {};
-        if (!productId || !this.customizationService?.getUiDefinition) {
-            return of(undefined);
-        }
-        return this.customizationService.getUiDefinition(productId).pipe(map(uiDefinitionContainer => {
-            if (uiDefinitionContainer) {
-                this.configurationRuntimeService.overrideUIDefinition(uiDefinitionContainer);
-            }
-        }));
-    }
     init$() {
-        let quoteDraft$;
-        if (this.flowInfoService.isLegacy || !this.flowInfoService.isStateful) {
-            quoteDraft$ = this.quoteDraftService.quoteDraft$;
-        }
-        else {
-            quoteDraft$ = of(undefined);
-        }
-        return quoteDraft$.pipe(first(), switchMap(quote => {
-            const contextProperties = this.contextService.resolve().properties;
-            const productId = contextProperties.productId ?? this.flowInfoService.flow?.properties.queryParams['productId'];
-            const defaultUIDefinitionId = this.flowInfoService.flow?.properties.queryParams['defaultUIDefinitionId'];
-            const requiredUIDefinitionId = this.flowInfoService.flow?.properties.queryParams['requiredUIDefinitionId'];
-            if (!productId) {
-                throw new Error(`Unable to start configuration for 'productId == null'`);
-            }
-            if (!quote) {
-                const offeringId = contextProperties.offeringId;
-                return this.configurationRuntimeService.init({ productId, offeringId });
-            }
-            const lineItem = this.getLineItem(quote, productId, contextProperties.lineItemId);
-            if (lineItem) {
-                this.configurationService.setConfigurableRamp(lineItem);
-            }
-            const { offeringId } = lineItem ?? {};
-            return this.configurationRuntimeService.init({
-                productId,
-                offeringId,
-                defaultUIDefinitionId,
-                requiredUIDefinitionId,
-            });
-        }), switchMap(() => this.customizeUI$()), tap(() => {
-            const uiDefinition = this.configurationRuntimeService.runtimeContext?.uiDefinitionContainer?.source;
-            if (uiDefinition) {
-                this.uiDefinition$.next(uiDefinition);
-            }
-            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.configurationStateService.init$()));
-    }
-    getLineItem(quote, productId, lineItemId) {
-        // search by lineItemId first
-        let li = quote.currentState.find(li => li.id === lineItemId);
-        if (!li && this.quoteDraftService.isStandalone) {
-            li = quote.currentState.find(li => li.productId === productId);
-        }
-        // If still not found, is could be an asset
-        if (!li) {
-            li = this.quoteDraftService.assetsState?.currentState.find(li => li.id === lineItemId);
-        }
-        return li;
+        return this.configurationStateService.init$();
     }
 }
-ProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductComponent, deps: [{ token: i2.ContextService }, { token: i2.ConfigurationRuntimeService }, { token: i2.ConfigurationService }, { token: i2.ConfigurationStateService }, { token: i2.QuoteDraftService }, { token: i2.FlowInfoService }, { token: i2.FlowStateService }, { token: i2.IntegrationState }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 });
+ProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductComponent, deps: [{ token: i3$1.ConfigurationRuntimeService }, { token: i3$1.ConfigurationStateService }], target: i0.ɵɵFactoryTarget.Component });
+ProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ProductComponent, selector: "vl-flow-product", ngImport: i0, template: "<vl-cms-preview [uiDefinition]=\"(uiDefinitionContainer$ | async)?.source\" [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.9", ngImport: i0, type: ProductComponent, decorators: [{
             type: Component,
-            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: i2.ContextService }, { type: i2.ConfigurationRuntimeService }, { type: i2.ConfigurationService }, { type: i2.ConfigurationStateService }, { type: i2.QuoteDraftService }, { type: i2.FlowInfoService }, { type: i2.FlowStateService }, { type: i2.IntegrationState }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [FLOW_CUSTOMIZATION]
-                }] }]; } });
+            args: [{ selector: 'vl-flow-product', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vl-cms-preview [uiDefinition]=\"(uiDefinitionContainer$ | async)?.source\" [config]=\"config\"></vl-cms-preview>\n" }]
+        }], ctorParameters: function () { return [{ type: i3$1.ConfigurationRuntimeService }, { type: i3$1.ConfigurationStateService }]; } });
 
 class ProductModule {
 }
 ProductModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ProductModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ProductModule, declarations: [ProductComponent], imports: [CommonModule, PreviewModule, LoaderModule], exports: [ProductComponent] });
-ProductModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductModule, imports: [CommonModule, PreviewModule, LoaderModule] });
+ProductModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ProductModule, declarations: [ProductComponent], imports: [CommonModule, PreviewModule, LoaderModule, LetDirectiveModule], exports: [ProductComponent] });
+ProductModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductModule, imports: [CommonModule, PreviewModule, LoaderModule, LetDirectiveModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ProductComponent],
-                    imports: [CommonModule, PreviewModule, LoaderModule],
+                    imports: [CommonModule, PreviewModule, LoaderModule, LetDirectiveModule],
                     exports: [ProductComponent],
                 }]
         }] });
 
 class RecordNotFoundComponent {
-    constructor(router, route) {
+    constructor(router) {
         this.router = router;
-        this.route = route;
         this.subMessage = '';
         this.type = '';
         const navigation = this.router.getCurrentNavigation();
@@ -1432,12 +1174,12 @@ class RecordNotFoundComponent {
         }
     }
 }
-RecordNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RecordNotFoundComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+RecordNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RecordNotFoundComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
 RecordNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RecordNotFoundComponent, selector: "vl-flow-record-not-found", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-md-12\">\n    <div class=\"message-wrapper\">\n      <div *ngIf=\"message; else defaultMessage\">\n        <p class=\"text message-text\" [class]=\"type\">{{ message }}</p>\n\n        <p *ngIf=\"subMessage\" class=\"text\">{{ subMessage }}</p>\n\n        <div *ngIf=\"details && details.length > 0\">\n          <div *ngFor=\"let detail of details\" class=\"text\">{{ detail }}</div>\n        </div>\n      </div>\n\n      <ng-template #defaultMessage>Record not found</ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;padding:24px 54px}:host .text{white-space:pre-line;word-break:break-word}:host .message-text.error{color:var(--vl-error-text-color)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RecordNotFoundComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-record-not-found', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row\">\n  <div class=\"col-md-12\">\n    <div class=\"message-wrapper\">\n      <div *ngIf=\"message; else defaultMessage\">\n        <p class=\"text message-text\" [class]=\"type\">{{ message }}</p>\n\n        <p *ngIf=\"subMessage\" class=\"text\">{{ subMessage }}</p>\n\n        <div *ngIf=\"details && details.length > 0\">\n          <div *ngFor=\"let detail of details\" class=\"text\">{{ detail }}</div>\n        </div>\n      </div>\n\n      <ng-template #defaultMessage>Record not found</ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;padding:24px 54px}:host .text{white-space:pre-line;word-break:break-word}:host .message-text.error{color:var(--vl-error-text-color)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }]; } });
 
 const routes = [{ path: '', component: RecordNotFoundComponent }];
 class RecordNotFoundModule {
@@ -1453,352 +1195,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
-class RemoteComponent {
-    constructor(contextService, quoteDraftService, runtimeService, configurationService, configurationState, messageService, integrationState, location) {
-        this.contextService = contextService;
-        this.quoteDraftService = quoteDraftService;
-        this.runtimeService = runtimeService;
-        this.configurationService = configurationService;
-        this.configurationState = configurationState;
-        this.messageService = messageService;
-        this.integrationState = integrationState;
-        this.location = location;
-        this.state$ = new BehaviorSubject({ loading: true, failure: false });
-        this.DYNAMIC_OPTION_PRODUCTS_KEY = 'Dynamic';
-        this.destroyed$ = new Subject();
-        this.rpcMessage = JSON.parse(window.RPC_MESSAGE);
-        this.rpcMessage.options.sort((a, b) => (a.featureNumber ?? 99999) - (b.featureNumber ?? 99999));
-        this.updateHasChildrenFlag(this.rpcMessage.product.configuredProductId);
-        // update context properties
-        if (this.rpcMessage.quote) {
-            const properties = {};
-            if (this.rpcMessage.quote['SBQQ__Opportunity2__c']) {
-                properties.OpportunityId = this.rpcMessage.quote['SBQQ__Opportunity2__c'];
-            }
-            Object.entries(this.rpcMessage.quote).forEach(([key, value]) => {
-                if (value !== undefined && !(value instanceof Object)) {
-                    properties[key] = value;
-                }
-            });
-            this.contextService.update({ properties });
-        }
-        this.initSubscriptions();
-        this.initConfiguration();
-    }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
-    }
-    initConfiguration() {
-        const productId = this.rpcMessage.product.configuredProductId;
-        const quote = this.quoteDraftService.quoteDraft;
-        if (!productId || !quote) {
-            return;
-        }
-        this.runtimeService
-            .init({ productId })
-            .pipe(first(), tap(context => {
-            const uiDefinitionProperties = context.uiDefinitionContainer?.source.properties ?? {};
-            this.uiDefinition = context.uiDefinitionContainer?.source;
-            const pricingEnabled = uiDefinitionProperties.pricingEnabled ? 'true' : 'false';
-            const priceListId = uiDefinitionProperties.priceList;
-            const runtimeContextProperties = this.runtimeService.runtimeContext?.properties;
-            if (runtimeContextProperties) {
-                runtimeContextProperties.PriceListId = priceListId;
-                runtimeContextProperties.PricingEnabled = pricingEnabled;
-            }
-            this.contextService.update({
-                properties: {
-                    ModelId: context.modelId,
-                    RuntimeMode: 'TEST',
-                    PricingEnabled: pricingEnabled,
-                    PriceListId: priceListId,
-                },
-            });
-            this.configurationService.setConfigurableRamp(this.createLineItem());
-        }), this.throwIfNoUIDefinition(), switchMap(() => this.configurationState.init$()), tap(() => this.state$.next({ loading: false, failure: false })), catchError(error => {
-            if (!this.uiDefinition?.properties?.suppressToastMessages) {
-                this.messageService.add({ severity: 'error', summary: error });
-            }
-            this.state$.next({ loading: false, failure: true });
-            return of();
-        }), takeUntil(this.destroyed$))
-            .subscribe();
-    }
-    throwIfNoUIDefinition() {
-        return (source$) => {
-            return source$.pipe(switchMap(() => {
-                if (!this.uiDefinition) {
-                    return throwError(() => 'Product does not have Configuration UI');
-                }
-                return source$;
-            }));
-        };
-    }
-    initSubscriptions() {
-        this.integrationState
-            .listen$(FlowAction.REMOTE_CANCEL)
-            .pipe(tap(() => this.location.back()), takeUntil(this.destroyed$))
-            .subscribe();
-        this.integrationState
-            .listen$(FlowAction.REMOTE_APPLY)
-            .pipe(tap(() => this.saveRpcMessage()), takeUntil(this.destroyed$))
-            .subscribe();
-    }
-    createLineItem() {
-        const [quoteDraftLineItem] = this.quoteDraftService.quoteDraft?.currentState ?? [];
-        if (quoteDraftLineItem && (quoteDraftLineItem.attributes.length > 0 || quoteDraftLineItem.lineItems.length > 0)) {
-            return quoteDraftLineItem;
-        }
-        const lineItem = this.createRootLineItem();
-        const dynamicOptionProducts = this.rpcMessage.product.optionConfigurations[this.DYNAMIC_OPTION_PRODUCTS_KEY];
-        if (dynamicOptionProducts) {
-            const options = this.toParentChildMap(dynamicOptionProducts);
-            let items = [lineItem];
-            for (let i = 0; i < items.length; i++) {
-                const item = items[i];
-                const children = item && options.get(item.id);
-                if (children) {
-                    item.lineItems = children;
-                    items = items.concat(children);
-                }
-            }
-        }
-        return lineItem;
-    }
-    createRootLineItem() {
-        const product = this.rpcMessage.product;
-        const runtimeContext = this.runtimeService.runtimeContext;
-        const veloceInstanceId = product.configurationAttributes['VeloceInstanceId__c'];
-        const quoteId = this.quoteDraftService.quoteDraft?.currentState[0]?.id;
-        return {
-            id: quoteId || veloceInstanceId || UUID.UUID(),
-            type: runtimeContext.productType ?? '',
-            name: runtimeContext.properties?.['displayName'] || runtimeContext.productName,
-            productName: runtimeContext.productName,
-            productId: runtimeContext.productId,
-            cfgStatus: 'Default',
-            actionCode: 'ADD',
-            qty: 1,
-        };
-    }
-    toParentChildMap(remoteOptionProducts) {
-        const result = new Map();
-        for (const option of remoteOptionProducts) {
-            const configurationData = option?.readOnly?.line;
-            const id = configurationData?.VeloceInstanceId__c;
-            const parentId = configurationData?.VeloceParentInstanceId__c;
-            if (!option.selected || !configurationData || !id || !parentId) {
-                continue;
-            }
-            const productId = option.productId;
-            const lineItem = {
-                id,
-                productId,
-                parentId,
-                type: configurationData.ModelType__c,
-                port: configurationData.ModelPort__c,
-                cfgStatus: configurationData.ConfigurationStatus__c,
-                actionCode: configurationData.ActionCode__c,
-                qty: option.Quantity,
-            };
-            let siblings = result.get(productId);
-            if (!siblings) {
-                result.set(parentId, (siblings = []));
-            }
-            siblings.push(lineItem);
-        }
-        return result;
-    }
-    saveRpcMessage() {
-        const quote = this.quoteDraftService.quoteDraft;
-        const lineItem = this.configurationService.getSnapshot();
-        if (!quote || !lineItem) {
-            return;
-        }
-        this.rpcMessage.VeloceReferenceId = quote.quoteId;
-        this.rpcMessage.product.configurationData.VeloceInstanceId__c = lineItem.id;
-        const childItems = this.flattenChildLineItems(lineItem);
-        const savingMode = window.SavingMode;
-        this.updateContentData(this.rpcMessage.product, lineItem);
-        this.rpcMessage.quote = this.mapAttributesTo('Quote', lineItem);
-        if (savingMode === 'ALL') {
-            const optionConfigurations = this.getOptionConfigurations(this.rpcMessage.product);
-            const rootProductOptions = this.rpcMessage.options.filter(po => po.configuredProductId === lineItem.productId);
-            childItems.forEach(lineItem => {
-                const rootOption = rootProductOptions.find(po => po.optionalProductId === lineItem.productId);
-                if (rootOption) {
-                    const featureOptions = optionConfigurations[rootOption.featureName] ?? (optionConfigurations[rootOption.featureName] = []);
-                    const originOption = !rootOption.hasChildren
-                        ? optionConfigurations[rootOption.featureName]?.find(({ optionId }) => optionId === rootOption.optionId)
-                        : undefined;
-                    const option = originOption ?? {};
-                    option.optionId = option.optionId ?? rootOption.optionId;
-                    this.updateContentData(option, lineItem);
-                    option.index = option.index ?? featureOptions.length;
-                    option.selected = true;
-                    if (!originOption) {
-                        featureOptions.push(option);
-                    }
-                    if (lineItem.parentLineItem) {
-                        const nestedProductOption = this.rpcMessage.options.find(po => po.configuredProductId === lineItem.parentLineItem?.productId &&
-                            po.optionalProductId === lineItem.productId);
-                        if (nestedProductOption) {
-                            option.configurationData = {
-                                ...option.configurationData,
-                                VeloceParentInstanceId__c: lineItem.parentLineItem.id,
-                                VeloceNestedOptionId__c: nestedProductOption.optionId,
-                                VeloceNestedFeatureId__c: nestedProductOption.featureId,
-                            };
-                        }
-                    }
-                }
-                else {
-                    this.rpcMessage.dynamicFeatures.forEach(feature => {
-                        const featureOptions = optionConfigurations[feature.name] ?? (optionConfigurations[feature.name] = []);
-                        const originOption = featureOptions.find(({ productId }) => productId === lineItem.productId);
-                        const option = originOption ?? {};
-                        this.updateContentData(option, lineItem);
-                        option.index = option.index ?? featureOptions.length;
-                        option.selected = true;
-                        if (!originOption) {
-                            featureOptions.push(option);
-                        }
-                    });
-                }
-            });
-            this.rpcMessage.product = { ...this.rpcMessage.product, optionConfigurations };
-        }
-        window.RPC_BROADCAST?.apply(null, [this.rpcMessage]);
-    }
-    updateHasChildrenFlag(bundleProductId) {
-        const bundleOptionsByOptionId = {};
-        const notBundleOptions = [];
-        for (const productOption of this.rpcMessage.options) {
-            if (productOption.configuredProductId === bundleProductId) {
-                bundleOptionsByOptionId[productOption.optionalProductId] = productOption;
-            }
-            else {
-                notBundleOptions.push(productOption);
-            }
-        }
-        for (const option of notBundleOptions) {
-            const bundleOption = bundleOptionsByOptionId[option.configuredProductId];
-            if (bundleOption) {
-                bundleOption.hasChildren = true;
-            }
-        }
-    }
-    flattenChildLineItems(lineItem) {
-        let items = lineItem.lineItems ?? [];
-        for (let i = 0; i < items.length; i++) {
-            const item = items[i];
-            if (item?.lineItems) {
-                items = items.concat(item.lineItems.map(li => ({ ...li, parentLineItem: item })));
-            }
-        }
-        return items;
-    }
-    updateContentData(entity, lineItem) {
-        if (lineItem.productId) {
-            entity.productId = lineItem.productId;
-        }
-        const quantityAttribute = lineItem.properties['quantityAttribute'];
-        entity.Quantity = quantityAttribute
-            ? lineItem.attributes.find(attribute => attribute.name === quantityAttribute)?.value ?? 1
-            : lineItem.qty;
-        const totalPrice = this.computeNetPrice(lineItem);
-        const targetTotalPriceField = lineItem.properties['TargetTotalPriceField'] || 'TotalPrice__c';
-        entity.configurationData[targetTotalPriceField] = entity.configurationData[targetTotalPriceField]
-            ? entity.configurationData[targetTotalPriceField] + totalPrice
-            : totalPrice;
-        const targetPriceField = lineItem.properties['TargetPriceField'] || 'SBQQ__ListPrice__c';
-        const price = entity.Quantity != null ? entity.configurationData[targetTotalPriceField] / entity.Quantity || 0 : 0;
-        const targetPriceValue = Number(entity.configurationData[targetPriceField]) || 0;
-        entity.configurationData[targetPriceField] = targetPriceValue
-            ? (targetPriceValue + price).toFixed(2)
-            : price.toFixed(2);
-        entity.configurationAttributes = this.mapAttributesTo('Attribute', lineItem);
-        entity.configurationData = {
-            ...entity.configurationData,
-            ...this.mapAttributesTo('Field', lineItem),
-            ...this.mapAttributesTo('', lineItem),
-            VeloceInstanceId__c: lineItem.id,
-        };
-    }
-    computeNetPrice(lineItem) {
-        if (lineItem.properties['GroupCharges']) {
-            return this.sumNetPrice(lineItem.chargeGroupItems, this.getChargeNameSet(lineItem.properties['GroupCharges']));
-        }
-        return this.sumNetPrice(lineItem.chargeItems, this.getChargeNameSet(lineItem.properties['Charges']));
-    }
-    getChargeNameSet(property) {
-        if (property && property.length > 0) {
-            return new Set(property.split(','));
-        }
-        return new Set();
-    }
-    sumNetPrice(chargeItems, charges) {
-        let netPrice = 0;
-        for (const chargeItem of chargeItems) {
-            if (!charges || charges.has(chargeItem.chargeType)) {
-                netPrice += chargeItem.netPrice ?? 0;
-            }
-        }
-        return netPrice;
-    }
-    mapAttributesTo(target, lineItem) {
-        const result = {};
-        const component = this.runtimeService.runtimeModel?.components.get(lineItem.type);
-        if (!component) {
-            return result;
-        }
-        const propertyName = 'mapTo' + target;
-        component.attributes
-            .filter(a => a.properties && a.properties[propertyName])
-            .forEach(mapping => {
-            const attribute = lineItem.attributes.find(a => a.name === mapping.name);
-            if (attribute) {
-                new Set(mapping.properties[propertyName]?.split(',')).forEach(k => (result[k] = attribute.value));
-            }
-        });
-        return result;
-    }
-    getOptionConfigurations(product) {
-        const optionConfigurations = {};
-        const requestOptionConfigurations = product.optionConfigurations ?? {};
-        Object.keys(requestOptionConfigurations).forEach(k => {
-            optionConfigurations[k] = (requestOptionConfigurations[k] ?? []).map(opt => {
-                return { ...opt, selected: false };
-            });
-        });
-        return optionConfigurations;
-    }
-}
-RemoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RemoteComponent, deps: [{ token: i2.ContextService }, { token: i2.QuoteDraftService }, { token: i2.ConfigurationRuntimeService }, { token: i2.ConfigurationService }, { token: i2.ConfigurationStateService }, { token: i2$2.MessageService }, { token: i2.IntegrationState }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
-RemoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i2$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.9", 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: i2.ContextService }, { type: i2.QuoteDraftService }, { type: i2.ConfigurationRuntimeService }, { type: i2.ConfigurationService }, { type: i2.ConfigurationStateService }, { type: i2$2.MessageService }, { type: i2.IntegrationState }, { type: i4.Location }]; } });
-
-class RemoteModule {
-}
-RemoteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RemoteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RemoteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: RemoteModule, declarations: [RemoteComponent], imports: [CommonModule, PreviewModule, LoaderModule], exports: [RemoteComponent] });
-RemoteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RemoteModule, imports: [CommonModule, PreviewModule, LoaderModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RemoteModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [RemoteComponent],
-                    imports: [CommonModule, PreviewModule, LoaderModule],
-                    exports: [RemoteComponent],
-                }]
-        }] });
-
 class ShoppingCartComponent {
-    constructor(templatesApi, cdr, toastService, flowInfo, customizationService) {
-        this.templatesApi = templatesApi;
+    constructor(templatesAdminApiService, cdr, toastService, flowInfo, customizationService) {
+        this.templatesAdminApiService = templatesAdminApiService;
         this.cdr = cdr;
         this.toastService = toastService;
         this.flowInfo = flowInfo;
@@ -1851,7 +1250,7 @@ class ShoppingCartComponent {
         if (!template) {
             return of(undefined);
         }
-        return this.templatesApi.fetchComponentsAttachments$(template.id);
+        return this.templatesAdminApiService.fetchComponentsAttachments$(template.id);
     }
     generateUIDefinition$() {
         return of(undefined).pipe(tap(() => {
@@ -1865,7 +1264,6 @@ class ShoppingCartComponent {
             const uiDef = {
                 name: '',
                 createdTimestamp: 0,
-                primary: true,
                 type: 'DEFAULT',
                 version: 2,
                 children: metaList.map(meta => ({
@@ -1879,12 +1277,12 @@ class ShoppingCartComponent {
         }));
     }
 }
-ShoppingCartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ShoppingCartComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i0.ChangeDetectorRef }, { token: i2$1.ToastService }, { token: i2.FlowInfoService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ShoppingCartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ShoppingCartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ShoppingCartComponent, deps: [{ token: i1$1.UITemplatesAdminApiService }, { token: i0.ChangeDetectorRef }, { token: i2.ToastService }, { token: i3$1.FlowInfoService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ShoppingCartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i2.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.9", 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" }]
-        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i0.ChangeDetectorRef }, { type: i2$1.ToastService }, { type: i2.FlowInfoService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesAdminApiService }, { type: i0.ChangeDetectorRef }, { type: i2.ToastService }, { type: i3$1.FlowInfoService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1906,30 +1304,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class FlowResolver {
-    constructor(router, routerService, contextService, flowInfo) {
+    constructor(router, routerService, flowInfoService) {
         this.router = router;
         this.routerService = routerService;
-        this.contextService = contextService;
-        this.flowInfo = flowInfo;
+        this.flowInfoService = flowInfoService;
     }
     resolve(route) {
-        const { queryParams } = route;
-        const flow = this.flowInfo.flow;
-        if (!flow) {
+        if (!this.flowInfoService.isFlowInitialized) {
             return of(false);
         }
-        const { properties } = flow;
+        const { queryParams } = route;
+        const { properties } = this.flowInfoService.flow;
         const { queryParams: flowQueryParams, entryPath } = properties;
         const mergedQueryParams = {
             ...queryParams,
             ...flowQueryParams,
         };
-        const contextProperties = Object.entries({
-            ...mergedQueryParams,
-            ...getDefaultProperties({ flowParams: properties }),
-        }).reduce((trunk, [key, value]) => ({ ...trunk, [key]: String(value) }), {});
-        this.contextService.update({ properties: contextProperties });
-        this.flowInfo.flow = flow;
         const parentUrl = this.routerService.getFlowRootPath(route);
         const entryUrl = String(entryPath ?? '')
             .split('/')
@@ -1938,29 +1328,39 @@ class FlowResolver {
             queryParams: mergedQueryParams,
             replaceUrl: true,
         })).pipe(catchError$1(e => {
+            console.error(e);
             const message = e instanceof HttpErrorResponse ? e.error.message : e;
             const errorDetails = isVeloceError(e.error) ? extractErrorDetails(e.error) : [];
             return this.routerService.showErrorPage$(message, errorDetails);
         }));
     }
 }
-FlowResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowResolver, deps: [{ token: i1$2.Router }, { token: FlowRouterService }, { token: i2.ContextService }, { token: i2.FlowInfoService }], target: i0.ɵɵFactoryTarget.Injectable });
+FlowResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowResolver, deps: [{ token: i1$2.Router }, { token: FlowRouterService }, { token: i3$1.FlowInfoService }], target: i0.ɵɵFactoryTarget.Injectable });
 FlowResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowResolver });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowResolver, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i2.ContextService }, { type: i2.FlowInfoService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i3$1.FlowInfoService }]; } });
+
+const resolvePCMModel = () => {
+    const flowInfoService = inject(FlowInfoService);
+    const configurationRuntimeService = inject(ConfigurationRuntimeService);
+    const { productId } = flowInfoService.context;
+    if (!productId) {
+        throw new Error(`Unable to start configuration for 'productId == null'`);
+    }
+    return configurationRuntimeService.init$({ productId });
+};
 
-class QuoteResolver {
-    constructor(router, quoteDraftService, routerService, contextService, flowInfo, flowStateService) {
+class SalesTransactionResolver {
+    constructor(router, routerService, flowInfoService, flowStateService, salesTransactionService) {
         this.router = router;
-        this.quoteDraftService = quoteDraftService;
         this.routerService = routerService;
-        this.contextService = contextService;
-        this.flowInfo = flowInfo;
+        this.flowInfoService = flowInfoService;
         this.flowStateService = flowStateService;
+        this.salesTransactionService = salesTransactionService;
     }
     resolve(route) {
-        const flow = this.flowInfo.flow;
+        const flow = this.flowInfoService.flow;
         if (!flow) {
             return of(false);
         }
@@ -1968,13 +1368,14 @@ class QuoteResolver {
             return of(true);
         }
         return this.flowStateService.init$().pipe(switchMap(() => this.checkDynamicNavigation$(route)), catchError(e => {
+            console.error(e);
             const message = e instanceof HttpErrorResponse ? e.error.message : e;
             const errorDetails = isVeloceError(e.error) ? extractErrorDetails(e.error) : [];
             return this.routerService.showErrorPage$(message, errorDetails);
         }));
     }
     checkDynamicNavigation$(route) {
-        const flow = this.flowInfo.flow;
+        const flow = this.flowInfoService.flow;
         if (!flow) {
             return of(true);
         }
@@ -1993,33 +1394,53 @@ class QuoteResolver {
         }));
     }
     getNavigateTo() {
-        const flow = this.flowInfo.flow;
-        let navigateTo;
-        if (flow?.properties.stateful) {
-            return this.flowStateService.select$(UITemplateType.FLOW_ENGINE, 'NAVIGATE_TO').pipe(map(r => {
-                if (r.success) {
-                    return r.result;
-                }
-                return '';
-            }));
-        }
-        else {
-            const isAccountMode = this.contextService.mode === ConfigurationContextMode.ACCOUNT;
-            if (isAccountMode || this.quoteDraftService.hasAssets) {
-                navigateTo = '/assets';
-            }
-            else if (this.quoteDraftService.hasProducts) {
-                navigateTo = '/cart';
-            }
-        }
-        return of(navigateTo);
+        // Implement when needed
+        return of('');
     }
 }
-QuoteResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: QuoteResolver, deps: [{ token: i1$2.Router }, { token: i2.QuoteDraftService }, { token: FlowRouterService }, { token: i2.ContextService }, { token: i2.FlowInfoService }, { token: i2.FlowStateService }], target: i0.ɵɵFactoryTarget.Injectable });
-QuoteResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: QuoteResolver });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: QuoteResolver, decorators: [{
+SalesTransactionResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SalesTransactionResolver, deps: [{ token: i1$2.Router }, { token: FlowRouterService }, { token: i3$1.FlowInfoService }, { token: i3$1.FlowStateService }, { token: i3$1.SalesTransactionService }], target: i0.ɵɵFactoryTarget.Injectable });
+SalesTransactionResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SalesTransactionResolver });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SalesTransactionResolver, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i2.QuoteDraftService }, { type: FlowRouterService }, { type: i2.ContextService }, { type: i2.FlowInfoService }, { type: i2.FlowStateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i3$1.FlowInfoService }, { type: i3$1.FlowStateService }, { type: i3$1.SalesTransactionService }]; } });
+
+const resolveUIDefinition = () => {
+    const customizationService = inject(FLOW_CUSTOMIZATION, { optional: true });
+    const flowInfoService = inject(FlowInfoService);
+    const uiDefinitionsAdminApiService = inject(UIDefinitionsAdminApiService);
+    const configurationRuntimeService = inject(ConfigurationRuntimeService);
+    const { productId } = flowInfoService.context;
+    if (!productId) {
+        throw new Error(`Unable to start configuration for 'productId == null'`);
+    }
+    return of(undefined).pipe(switchMap(() => {
+        // Try resolving via customization service
+        if (!productId || !customizationService?.getUiDefinition) {
+            return of(undefined);
+        }
+        return customizationService.getUiDefinition(flowInfoService.context);
+    }), switchMap(uiDefContainer => {
+        // Resolve UIDefinition from the org
+        if (uiDefContainer) {
+            return of(uiDefContainer);
+        }
+        if (flowInfoService.context.requiredUIDefinitionId) {
+            return uiDefinitionsAdminApiService.fetch$(flowInfoService.context.requiredUIDefinitionId);
+        }
+        return uiDefinitionsAdminApiService
+            .fetchAll$({
+            productId,
+            defaultUIDefinitionId: flowInfoService.context.defaultUIDefinitionId,
+        })
+            .pipe(map((uiDefinitionContainers) => {
+            const uiDefContainer = uiDefinitionContainers[0];
+            if (!uiDefContainer) {
+                throw new Error(`UI Definition for productId=${productId} is not resolved`);
+            }
+            return uiDefContainer;
+        }));
+    }), tap(uiDefContainer => (configurationRuntimeService.uiDefinitionContainer = uiDefContainer)));
+};
 
 const rootRoute = {
     id: VELOCE_FLOW_ROOT_ROUTE,
@@ -2037,15 +1458,13 @@ const rootRoute = {
                     path: 'flows',
                     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
                     resolve: { flow: FlowResolver },
-                    canActivate: [ContextGuard],
                     children: [],
                 },
                 {
                     path: 'product',
                     component: ProductComponent,
                     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-                    resolve: { quote: QuoteResolver },
-                    canActivate: [ContextGuard],
+                    resolve: { salesTransaction: SalesTransactionResolver, uiDef: resolveUIDefinition, pcm: resolvePCMModel },
                     canDeactivate: [ProductUnloadGuard],
                     data: { showHeader: true },
                 },
@@ -2053,33 +1472,23 @@ const rootRoute = {
                     path: 'cart',
                     component: ShoppingCartComponent,
                     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-                    resolve: { quote: QuoteResolver },
-                    canActivate: [ContextGuard],
+                    resolve: { salesTransaction: SalesTransactionResolver },
                     data: { showHeader: true },
                 },
                 {
                     path: 'catalog',
                     component: CatalogComponent,
                     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-                    resolve: { quote: QuoteResolver },
-                    canActivate: [ContextGuard],
+                    resolve: { salesTransaction: SalesTransactionResolver },
                     data: { showHeader: true },
                 },
                 {
                     path: 'assets',
                     component: AssetsComponent,
                     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-                    resolve: { quote: QuoteResolver },
-                    canActivate: [ContextGuard],
+                    resolve: { salesTransaction: SalesTransactionResolver },
                     data: { showHeader: true },
                 },
-                {
-                    path: 'remote',
-                    component: RemoteComponent,
-                    runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-                    resolve: { quote: QuoteResolver },
-                    canActivate: [ContextGuard],
-                },
                 {
                     path: 'debug',
                     loadChildren: () => DebugModule,
@@ -2095,30 +1504,14 @@ const rootRoute = {
 class FlowRoutingModule {
 }
 FlowRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FlowRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FlowRoutingModule, imports: [i1$2.RouterModule, ProductModule,
-        ShoppingCartModule,
-        CatalogModule,
-        AssetsModule,
-        RemoteModule], exports: [RouterModule] });
-FlowRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRoutingModule, providers: [FlowRouterService, RootGuard, ContextGuard, ProductUnloadGuard, FlowResolver, QuoteResolver], imports: [RouterModule.forChild([rootRoute]),
-        ProductModule,
-        ShoppingCartModule,
-        CatalogModule,
-        AssetsModule,
-        RemoteModule, RouterModule] });
+FlowRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FlowRoutingModule, imports: [i1$2.RouterModule, ProductModule, ShoppingCartModule, CatalogModule, AssetsModule], exports: [RouterModule] });
+FlowRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRoutingModule, providers: [FlowRouterService, RootGuard, ProductUnloadGuard, FlowResolver, SalesTransactionResolver], imports: [RouterModule.forChild([rootRoute]), ProductModule, ShoppingCartModule, CatalogModule, AssetsModule, RouterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRoutingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        RouterModule.forChild([rootRoute]),
-                        ProductModule,
-                        ShoppingCartModule,
-                        CatalogModule,
-                        AssetsModule,
-                        RemoteModule,
-                    ],
+                    imports: [RouterModule.forChild([rootRoute]), ProductModule, ShoppingCartModule, CatalogModule, AssetsModule],
                     exports: [RouterModule],
-                    providers: [FlowRouterService, RootGuard, ContextGuard, ProductUnloadGuard, FlowResolver, QuoteResolver],
+                    providers: [FlowRouterService, RootGuard, ProductUnloadGuard, FlowResolver, SalesTransactionResolver],
                 }]
         }] });
 
@@ -2170,5 +1563,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ContextGuard, FlowDialogService, FlowModule, FlowRouterService, FlowService, VELOCE_FLOW_ROOT_ROUTE, getDefaultProperties, getFlowObjectIdPropertyName };
+export { FlowDialogService, FlowModule, FlowRouterService, FlowService, VELOCE_FLOW_ROOT_ROUTE };
 //# sourceMappingURL=veloceapps-sdk.mjs.map