import * as React from "react"; import { OnboardingFlowDashboardAlignedGuidedStepperOne } from "@/registry/onboarding-flow-dashboard-aligned-guided-stepper-one/onboarding-flow-dashboard-aligned-guided-stepper-one"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof OnboardingFlowDashboardAlignedGuidedStepperOne >; type GuidedStepperStep = NonNullable[number]; type GuidedStepperSubtask = NonNullable[number]; type GuidedStepperBreadcrumb = NonNullable< ComponentProps["breadcrumbs"] >[number]; type GuidedStepperTab = NonNullable[number]; type GuidedStepperResource = NonNullable[number]; type GuidedQuickAction = NonNullable[number]; type GuidedCta = NonNullable[number]; const steps: GuidedStepperStep[] = [ { id: "branding", title: "Brand identity", description: "Apply workspace theme and CTA styling", status: "complete", badgeLabel: "Ready", tooltip: "Updated yesterday by Jessica Lee", }, { id: "integrations", title: "Connect integrations", description: "Sync data sources powering activation KPIs", status: "current", badgeLabel: "In review", prerequisites: ["Brand identity"], tooltip: "Owner approval needed for billing API", }, { id: "invite", title: "Invite collaborators", description: "Assign teammates to onboarding tasks", status: "upcoming", }, { id: "automation", title: "Automate journeys", description: "Publish lifecycle automations", status: "upcoming", }, ]; const subtasks: GuidedStepperSubtask[] = [ { id: "crm", label: "Authenticate Salesforce sandbox", status: "done", helperText: "Scopes validated 5 minutes ago.", }, { id: "billing", label: "Connect Stripe billing", status: "in-progress", helperText: "Owner MFA requested. We'll keep trying in the background.", }, { id: "analytics", label: "Enable warehouse streaming", status: "blocked", helperText: "Grant access to the analytics schema before continuing.", }, ]; const tabs: GuidedStepperTab[] = [ { id: "integrations", label: "Integrations", description: "High-impact systems to unlock activation dashboards", content: (

Salesforce sandbox

Mapped to accounts + opportunities

Verified

Auto-refreshing every 15 minutes. Editing field mapping will pause syncing until saved.

Stripe billing

Waiting for owner confirmation

Approval needed

We'll notify your finance admin when the connection is ready for verification.

), }, { id: "branding", label: "Branding", description: "Theme assets and communication defaults", content: (

Color system

Imported from marketing site. Adjust accents for dashboard chips.

{["#18181B", "#312E81", "#4338CA", "#6366F1", "#E0E7FF"].map( (hex) => (

), )}

Email defaults

Ensure reply-to routing matches your shared inbox.

), }, ]; const resources: GuidedStepperResource[] = [ { id: "playbook", title: "Workspace activation playbook", description: "Your 14-day plan for achieving minimum viable configuration", actionLabel: "Open playbook", }, { id: "office-hours", title: "CSM office hours", description: "Meet with an onboarding manager for integration help", actionLabel: "Reserve a seat", }, ]; const breadcrumbs: GuidedStepperBreadcrumb[] = [ { id: "home", label: "Home" }, { id: "workspace", label: "Workspace" }, { id: "onboarding", label: "Onboarding" }, ]; const quickActions: GuidedQuickAction[] = [ { id: "invite", title: "Invite teammates", description: "Send workspace invites with recommended roles", ctaLabel: "Open invites", }, { id: "import", title: "Import sample data", description: "Preview dashboards with demo metrics", ctaLabel: "Load samples", }, { id: "chat", title: "Message CSM", description: "Ask questions in the dedicated Slack channel", ctaLabel: "Open channel", }, ]; const ctas: GuidedCta[] = [ { id: "complete", label: "Complete step" }, { id: "skip", label: "Skip for now", variant: "secondary" }, ]; export function OnboardingFlowDashboardAlignedGuidedStepperOneDemo() { return ( ); } export default OnboardingFlowDashboardAlignedGuidedStepperOneDemo;

Simple