import * as React from "react"; import { Briefcase, Building2, ChartLine, Group, Link2, PieChart, Sparkles, } from "lucide-react"; import { EmptyStateSubscriptionAnalyticsProgressiveDisclosureFive } from "@/registry/empty-state-subscription-analytics-progressive-disclosure-five/empty-state-subscription-analytics-progressive-disclosure-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 EmptyStateSubscriptionAnalyticsProgressiveDisclosureFive >; type AnalyticsPreview = ComponentProps["previews"][number]; type IntegrationChecklist = ComponentProps["integrationChecklist"]; type AdvancedConfiguration = NonNullable< ComponentProps["advancedConfiguration"] >; type StakeholderInviteCard = NonNullable; type WebinarResource = NonNullable; type LearningAlert = NonNullable; const previews: AnalyticsPreview[] = [ { id: "weekly", label: "Weekly", summary: "Weekly recurring revenue outlook", description: "Track net-new ARR, expansion, and contraction in a single glance while integrations warm up.", icon: ChartLine, highlights: [ { id: "net-arr", label: "Net ARR", value: "$182K", helper: "Projected after billing sync", trend: "up", }, { id: "expansion", label: "Expansion", value: "$64K", helper: "Usage-based uplift from pro plans", trend: "steady", }, ], footnote: "Figures auto-populate after your data warehouse refresh completes. Historical cohorts remain queryable in the analytics explorer.", }, { id: "monthly", label: "Monthly", summary: "Monthly revenue composition", description: "Surface retention, downgrades, and leading indicators before statements close.", icon: PieChart, highlights: [ { id: "retention", label: "Logo retention", value: "96.2%", helper: "Early projection", trend: "up", }, { id: "downgrade", label: "Downgrades", value: "-$11K", helper: "Churn flagged for success team", trend: "down", }, ], }, ]; const integrationChecklist: IntegrationChecklist = { title: "Connect revenue sources", description: "Enable billing, product usage, and CRM telemetry to unlock self-serve subscription analytics.", badgeLabel: "3-step flow", steps: [ { id: "billing", title: "Link billing provider", description: "Authenticate Stripe or Chargebee to ingest subscription invoices nightly.", helper: "Use read-only API keys scoped to reporting. We'll validate permissions on import.", documentation: { label: "Billing setup guide", href: "https://docs.usenextbase.com/subscription-analytics/billing", }, }, { id: "warehouse", title: "Authorize warehouse schema", description: "Map contract tables from Snowflake so ARR snapshots stay in sync with finance.", helper: "Choose the default database and schema. We support dbt sources and custom views.", documentation: { label: "Warehouse best practices", href: "https://docs.usenextbase.com/subscription-analytics/warehouse", }, escalation: { label: "Schedule data engineer office hours", href: "https://cal.com/nextbase/data-onboarding", }, }, { id: "usage", title: "Stream product usage", description: "Send daily active seat counts and key feature events to project expansion cohorts.", helper: "Drop in our Segment destination or stream events via Kafka. We'll normalize payloads automatically.", documentation: { label: "Usage schema template", href: "https://docs.usenextbase.com/subscription-analytics/usage", }, }, ], }; const webinar: WebinarResource = { title: "From integrations to board-ready dashboards", description: "Watch how RevOps teams operationalize the subscription analytics command center.", presenters: ["Sofia Patel, Principal CSM", "Luka Marin, Head of RevOps"], agenda: [ "Mapping billing objects to ARR movements", "Automating stakeholder digests", "Layering product usage for expansion calls", ], ctaLabel: "Preview 7-minute walkthrough", onCta: () => console.info("Play webinar from demo"), }; const stakeholderInvite: StakeholderInviteCard = { title: "Invite collaborators", description: "Loop in finance, lifecycle marketing, and CS leaders so insights stay actionable.", helper: "Permissions mirror your workspace roles—viewers get dashboards, editors can tune metric logic.", actions: [ { id: "finance", label: "Finance workspace", description: "Budget variance dashboards and ARR waterfalls.", icon: Briefcase, href: "https://usenextbase.com/workspaces/finance", }, { id: "success", label: "Success leadership", description: "Renewal forecasts, usage digests, and risk heatmaps.", icon: Group, href: "https://usenextbase.com/workspaces/success", }, { id: "revops", label: "RevOps automation", description: "Push alerts into Slack when cohorts slip.", icon: Sparkles, onClick: () => console.info("Invite RevOps from demo"), }, ], }; const advancedConfiguration: AdvancedConfiguration = { title: "Progressively unlock advanced revenue intelligence", description: "Once integrations complete, expose custom cohorts, dynamic benchmarks, and stakeholder digests without overwhelming new admins.", sections: [ { id: "cohorts", title: "Custom cohort builder", description: "Blend billing plans, lifecycle stages, and industry segments to understand retention resilience.", bullets: [ "Auto-generated labels based on product metadata", "Compare trailing 3-month vs. 12-month movements", "Export definitions to share with finance and investors", ], }, { id: "benchmarks", title: "Benchmarks & alerts", description: "Alert teams when indicators drift from goals. Keep communication progressive by revealing advanced levers only after setup completes.", }, ], action: { label: "Explore automation recipes", href: "https://usenextbase.com/automation-recipes", icon: Link2, }, }; const learningAlert: LearningAlert = { title: "Need architectural guidance?", description: "Access the billing integration checklist, schema references, and event blueprints. We keep documentation scoped to your enabled features.", actionLabel: "Open integration docs", href: "https://docs.usenextbase.com/subscription-analytics", }; export function EmptyStateSubscriptionAnalyticsProgressiveDisclosureFiveDemo() { const [completedSteps, setCompletedSteps] = React.useState([ "billing", ]); return (

Subscription analytics empty states guide admins through integrations while protecting focus for mobile adopters.

console.info("Connect billing clicked"), }} secondaryAction={{ label: "Share onboarding guide", icon: Sparkles, href: "https://usenextbase.com/onboarding", }} integrationChecklist={integrationChecklist} webinar={webinar} stakeholderInvite={stakeholderInvite} advancedConfiguration={advancedConfiguration} learningAlert={learningAlert} initialCompletedStepIds={completedSteps} onStepCompletionChange={(ids) => setCompletedSteps(ids)} onPreviewChange={(previewId) => console.info("Preview changed", previewId) } />

); } export default EmptyStateSubscriptionAnalyticsProgressiveDisclosureFiveDemo;

Simple