import * as React from "react"; import { MultiStepFormSaasOnboardingStepperWithPersonaBranchingOne } from "@/registry/multi-step-form-saas-onboarding-stepper-with-persona-branching-one/multi-step-form-saas-onboarding-stepper-with-persona-branching-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 MultiStepFormSaasOnboardingStepperWithPersonaBranchingOne >; type OnboardingPersona = NonNullable[number]; type OnboardingIntegration = NonNullable< ComponentProps["integrations"] >[number]; type OnboardingIntegrationHint = NonNullable< ComponentProps["integrationHints"] >[number]; type OnboardingFormValues = Parameters< NonNullable >[0]; const PERSONAS: OnboardingPersona[] = [ { id: "marketing-lead", label: "Marketing lead", description: "Owns campaign strategy, attribution, and revenue reporting.", teamCount: "12 teammates", popularIntegrations: ["HubSpot", "Customer.io", "Segment"], personaHint: "Marketing leads receive pre-built attribution dashboards and nurture sequence templates.", }, { id: "revops-manager", label: "Revenue operations", description: "Connects go-to-market systems and enforces data governance.", teamCount: "6 teammates", popularIntegrations: ["Salesforce", "Gong", "NetSuite"], personaHint: "RevOps workspaces prioritize sync health, sandbox checks, and audit-ready exports.", }, { id: "product-analyst", label: "Product analyst", description: "Evaluates in-product usage to inform roadmap priorities.", teamCount: "4 teammates", popularIntegrations: ["Snowflake", "Amplitude", "dbt"], }, ]; const INTEGRATION_HINTS: OnboardingIntegrationHint[] = [ { id: "marketing-journey", label: "Lifecycle sequences", description: "Enable HubSpot journey sync to tailor pre-built nurture automations.", personaIds: ["marketing-lead"], }, { id: "revops-security", label: "Sandbox safety checks", description: "RevOps personas unlock sandbox drift detection before go-live.", personaIds: ["revops-manager"], }, { id: "product-warehouse", label: "Warehouse sync cadence", description: "Analysts benefit from hourly Snowflake updates for faster experimentation.", personaIds: ["product-analyst"], }, ]; const INTEGRATIONS: OnboardingIntegration[] = [ { id: "hubspot", title: "HubSpot", badge: "Popular", description: "Sync lifecycle stages, deals, and campaign attribution metrics.", hint: "Requires HubSpot admin permissions and marketing contacts add-on.", }, { id: "salesforce", title: "Salesforce", description: "Push opportunity milestones, pipeline health, and account notes to Nextbase.", }, { id: "segment", title: "Segment", description: "Ingest product events and traits to drive persona-specific activation.", }, { id: "snowflake", title: "Snowflake", description: "Mirror curated warehouse tables for unified reporting and guardrails.", badge: "Beta", }, { id: "slack", title: "Slack notifications", description: "Route automation alerts and onboarding progress updates to team channels.", }, ]; const INITIAL_VALUES: Partial = { companyName: "Tangent Labs", companyEmail: "ops@tangentlabs.io", companySize: "51-200", industry: "marketing", region: "north-america", invites: [ { email: "jordan@tangentlabs.io", role: "admin" }, { email: "casey@tangentlabs.io", role: "creator" }, ], }; export function MultiStepFormSaasOnboardingStepperWithPersonaBranchingOneDemo( props: Partial, ) { const [lastSubmission, setLastSubmission] = React.useState(null); return (

{ await new Promise((resolve) => setTimeout(resolve, 600)); setLastSubmission(values); }} {...props} /> {lastSubmission ? (

          {JSON.stringify(lastSubmission, null, 2)}

) : null}

); } export default MultiStepFormSaasOnboardingStepperWithPersonaBranchingOneDemo;

Simple