import { CalendarDays, Clock4, LifeBuoy, PiggyBank, ShieldCheck, Sparkles, } from "lucide-react"; import * as React from "react"; import { SubscriptionPlanAccountCenterSummarySidebarOne } from "@/registry/subscription-plan-account-center-summary-sidebar-one/subscription-plan-account-center-summary-sidebar-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 SubscriptionPlanAccountCenterSummarySidebarOne >; type PlanSummary = NonNullable; type PlanCtaAction = NonNullable[number]; const summary: PlanSummary = { name: "Growth", renewalDate: "Renews Dec 28, 2024", renewalCaption: "Billing cycle", statusBadge: { label: "Active", variant: "secondary", }, usage: { current: 82, limit: 120, unit: "seats", caption: "Workspace seats", thresholdLabel: "80% threshold reached 3 additional seats pending provisioning", }, alerts: [ { id: "usage-warning", title: "Seat expansion pending", description: "Upgrade to Business to unlock unlimited read-only reviewers and adaptive limits.", variant: "default", }, ], highlights: [ { id: "renewal", label: "Next invoice", value: "$2,964 (prorated)", icon: , }, { id: "usage", label: "Usage watchlist", value: "AI credits at 65% of limit", icon: , }, ], supportItems: [ { id: "success-manager", label: "Message Lauren, your success partner", description: "Response time under 30 minutes", }, { id: "billing-desk", label: "Contact billing desk", href: "mailto:billing@example.com", }, ], }; const plans = [ { id: "starter", name: "Starter", description: "For teams validating workflows and experimenting with automations.", monthlyPrice: "$39", annualPrice: "$32", priceCaption: "per seat", features: [ { id: "automation", label: "Automation", description: "Launch up to three automations with real-time event triggers.", benefits: [ "Workflow templates with guided onboarding", "10K API calls included", "Slack alerts for anomalies", ], }, { id: "support", label: "Support", description: "Email and in-product messaging coverage during business hours.", benefits: [ "Community office hours", "Ticket response in under 12 hours", ], }, ], }, { id: "growth", name: "Growth", description: "Upgrade for deeper integrations, usage orchestration, and revenue squads.", monthlyPrice: "$79", annualPrice: "$64", priceCaption: "per seat", badge: "Most popular", recommended: true, highlight: "Includes success architect", features: [ { id: "journeys", label: "Customer journeys", description: "Conditional branching with session replay overlays and multi-channel orchestration.", benefits: [ "Unlimited automation paths", "Audience traits sync", "Experiment-grade reporting", ], }, { id: "security", label: "Security and access", description: "SOC 2 Type II, granular RBAC, and 365-day event retention.", benefits: [ "SAML/OIDC connections", "User provisioning via SCIM", "Audit exports to your lakehouse", ], }, ], }, { id: "business", name: "Business", description: "Govern global workspaces, advanced compliance, and orchestration at scale.", monthlyPrice: "Custom", annualPrice: "Custom", priceCaption: "billed annually", highlight: "Procurement-ready", features: [ { id: "compliance", label: "Compliance", description: "Meet banking-grade policies with adaptive logging and isolation.", benefits: [ "Dedicated data region", "Admin activity heatmaps", "Automated evidence exports", ], }, { id: "governance", label: "Governance", description: "Delegate approvals, field-level encryption, and in-app procurement workflows.", benefits: [ "Account hierarchy controls", "Procurement seats", "Field masking with audit trails", ], }, ], }, ]; const addOns = [ { id: "analytics", name: "Advanced analytics", price: "+$249/mo", description: "Segment dashboards with predictive revenue scoring and API export.", status: "Recommended", benefits: ["Scenario modeling", "Attribution matrix", "SQL warehouse sync"], }, { id: "premium-support", name: "Premium success", price: "+$599/mo", description: "Named advisor, playbook design, and quarterly architecture reviews.", status: "Waitlist", benefits: [ "Dedicated Slack channel", "Incident war room access", "Monthly adoption workshops", ], }, ]; const billingHistory = [ { id: "inv-1005", label: "Invoice #1005", amount: "$2,442.00", date: "Oct 28, 2024", status: "Paid", receiptUrl: "#", }, { id: "inv-1004", label: "Invoice #1004", amount: "$2,218.00", date: "Sep 28, 2024", status: "Paid", receiptUrl: "#", }, { id: "inv-1003", label: "Invoice #1003", amount: "$2,104.00", date: "Aug 28, 2024", status: "Paid", receiptUrl: "#", }, { id: "inv-1002", label: "Invoice #1002", amount: "$1,978.00", date: "Jul 28, 2024", status: "Paid", receiptUrl: "#", }, { id: "inv-1001", label: "Invoice #1001", amount: "$1,642.00", date: "Jun 28, 2024", status: "Paid", receiptUrl: "#", }, ]; const ctaActions: PlanCtaAction[] = [ { id: "upgrade", label: "Upgrade plan", popover: { title: "Pro-rated upgrade preview", description: "Switch to Business today and we adjust the invoice automatically.", highlights: [ "$612 credit applied", "Seat limits reset instantly", "Dedicated advisor unlocked", ], }, }, { id: "downgrade", label: "Downgrade", variant: "outline", tooltip: "Some add-ons require Growth or higher. Contact support to maintain automations.", }, { id: "cancel", label: "Cancel subscription", variant: "ghost", tooltip: "Your workspace stays accessible until the end of the billing cycle.", }, ]; export function SubscriptionPlanAccountCenterSummarySidebarOneDemo() { const [selectedPlan, setSelectedPlan] = React.useState(null); return (

setSelectedPlan(planId)} />

); } export default SubscriptionPlanAccountCenterSummarySidebarOneDemo;

Simple