import * as React from "react"; import { FormBlockSubscriptionUpgradeFive } from "@/registry/form-block-subscription-upgrade-five/form-block-subscription-upgrade-five"; 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 FormBlockSubscriptionUpgradeFive >; type UpgradePlanOption = ComponentProps["plans"][number]; type UpgradeAddOnOption = NonNullable[number]; type CurrentPlanSummary = NonNullable; const CURRENT_PLAN: CurrentPlanSummary = { name: "Scale", priceLabel: "$1,280/mo", renewsOn: "Dec 1, 2025", seats: 35, usageHighlights: [ "95% workflow automation coverage", "Usage spikes handled with burst allowances", "Success pod response <4h", ], }; const PLANS: UpgradePlanOption[] = [ { id: "growth", name: "Growth", headline: "Playbooks + automation caps to scale post-Series B", description: "", valueProps: [ "Unlimited automations", "Workflow versioning", "Integrated success analytics", "Sandbox environments", ], priceCents: { monthly: 189000, annual: 1890000, }, badge: "Best for teams 20-100", recommended: true, }, { id: "enterprise", name: "Enterprise", headline: "Advanced governance, dedicated pod, and custom SLAs", description: "", valueProps: [ "Dedicated solutions architect", "Custom data residency", "SAML + SCIM provisioning", "Quarterly executive reviews", ], priceCents: { monthly: 289000, annual: 2890000, }, badge: "Includes concierge migrations", }, ]; const ADDONS: UpgradeAddOnOption[] = [ { id: "automation-studio", name: "Automation Studio", description: "Build multi-step automations with AI-assisted routing.", priceCents: { monthly: 39000, annual: 390000, }, badge: "New", requiresConfirmation: true, }, { id: "insights", name: "Insights Pro", description: "Advanced revenue dashboards with cohort segmentation.", priceCents: { monthly: 25000, annual: 250000, }, }, ]; export function FormBlockSubscriptionUpgradeFiveDemo() { const [submitted, setSubmitted] = React.useState(null); return (

{ await new Promise((resolve) => setTimeout(resolve, 800)); setSubmitted(JSON.stringify({ values, pricing }, null, 2)); }} /> {submitted ? (

          {submitted}

) : null}

); } export default FormBlockSubscriptionUpgradeFiveDemo;

Simple