feat: Add wrapper component support to onboarding orchestrator

- Add wrapper property to OnboardingOrchestratorService
- Update onboarding/yield component to render wrapper using lazy-engine-component
- Clean up onboard.hbs template to remove styling constraints
- Enable extensions to provide custom wrapper components for onboarding flows
This commit is contained in:
roncodes
2025-12-08 20:38:59 -05:00
parent 0238632fdd
commit 6442644438
3 changed files with 8 additions and 7 deletions

View File

@@ -1,7 +1,9 @@
<section class="onboarding step-host">
{{#if this.initialized}}
{{#if this.currentComponent}}
{{component this.currentComponent context=this.context orchestrator=this.orchestrator brand=@brand}}
{{#if this.orchestrator.wrapper}}
{{component (lazy-engine-component this.orchestrator.wrapper) currentStepComponent=this.currentComponent context=this.context orchestrator=this.orchestrator brand=@brand}}
{{else if this.currentComponent}}
{{component (lazy-engine-component this.currentComponent) context=this.context orchestrator=this.orchestrator brand=@brand}}
{{/if}}
{{else}}
<div class="flex items-center justify-center min-h-24">

View File

@@ -7,6 +7,7 @@ export default class OnboardingOrchestratorService extends Service {
@service onboardingContext;
@tracked flow = null;
@tracked wrapper = null;
@tracked current = null;
@tracked history = [];
@tracked sessionId = null;
@@ -15,6 +16,7 @@ export default class OnboardingOrchestratorService extends Service {
const flow = this.onboardingRegistry.getFlow(flowId ?? this.onboardingRegistry.defaultFlow);
if (!flow) throw new Error(`Onboarding flow '${flowId}' not found`);
this.flow = flow;
this.wrapper = flow.wrapper || null;
this.sessionId = opts.sessionId || null;
this.history = [];
this.goto(flow.entry);

View File

@@ -1,6 +1,3 @@
<div class="flex items-center justify-center h-screen min-h-screen px-4 py-12 bg-gray-50 dark:bg-gray-900 sm:px-6 lg:px-8 overflow-y-scroll">
<div class="w-full max-w-md h-screen flex items-center justify-center py-4">
{{outlet}}
</div>
<Spacer @height="300px" />
<div class="onboard-route-wrapper">
{{outlet}}
</div>