@nozle-js/react 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -1,157 +1,636 @@
+import React, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, HTMLAttributes } from 'react';
-import * as _stripe_stripe_js from '@stripe/stripe-js';
-import { Stripe } from '@stripe/stripe-js';
-
-interface EntitlementsResponse {
-    plan_slug: string;
-    subscription_status: string;
-    features: Record<string, {
-        enabled: boolean;
-    }>;
-    limits: Record<string, {
-        limit: number;
-        used: number;
-        source?: string;
-    }>;
-}
-interface BillingState {
-    entitlements: EntitlementsResponse | null;
-    credits: null;
-    usage: Record<string, {
-        used: number;
-        limit: number;
-        remaining: number;
-    }>;
-    connectionState: "connecting" | "connected" | "disconnected";
-    error: Error | null;
-}
-interface UseCanResult {
+
+interface CanResult {
     allowed: boolean;
-    isLoading: boolean;
-    error: Error | null;
+    remaining: number | null;
+    limit: number | null;
+    used: number;
+    error?: string | null;
 }
-interface UseUsageResult {
-    data: {
-        used: number;
-        limit: number;
-        remaining: number;
-    } | null;
-    isLoading: boolean;
-    error: Error | null;
+interface NozleClient {
+    apiKey: string;
+    baseUrl: string;
+    fetch(path: string, init?: RequestInit): Promise<Response>;
+    can(customerId: string, feature: string): Promise<CanResult>;
 }
-interface UsePlanResult {
-    data: {
-        plan_slug: string;
-        subscription_status: string;
-    } | null;
-    isLoading: boolean;
-    error: Error | null;
+interface BillingContextValue {
+    client: NozleClient | null;
+    workspaceId: string;
+    centrifugoUrl: string;
+    centrifugoToken: string | null;
 }
-interface CheckoutResult {
-    client_secret: string;
-    invoice_id: string;
-    amount_cents: number;
-    currency: string;
+declare const BillingContext: React.Context<BillingContextValue>;
+interface BillingProviderProps {
+    apiKey: string;
+    baseUrl?: string;
+    workspaceId?: string;
+    centrifugoUrl?: string;
+    children: ReactNode;
 }
+declare function BillingProvider({ apiKey, baseUrl, workspaceId, centrifugoUrl, children, }: BillingProviderProps): React.ReactElement;
+declare function useBillingContext(): BillingContextValue;
+declare function useNozleClient(): NozleClient;
 
-declare class BillingStore {
-    readonly baseUrl: string;
-    readonly apiKey: string;
-    readonly customerId: string;
-    private state;
-    private listeners;
-    constructor(baseUrl: string, apiKey: string, customerId: string);
-    getSnapshot: () => BillingState;
-    getServerSnapshot: () => BillingState;
-    subscribe: (listener: () => void) => (() => void);
-    private emit;
-    setConnectionState(state: BillingState["connectionState"]): void;
-    setError(error: Error | null): void;
-    updateUsage(metric: string, used: number, limit: number, remaining: number): void;
-    fetchUsage(feature: string): Promise<void>;
-    fetchCheckoutSecret(planCode: string, successUrl?: string): Promise<CheckoutResult>;
-    fetchPlans(): Promise<Array<{
-        code: string;
-        name: string;
-        amount_cents: number;
-        amount_currency: string;
-        interval: string;
-    }>>;
-    handleEvent(event: {
-        type: string;
-        [key: string]: unknown;
-    }): void;
+/**
+ * useCan hook — check whether a customer can use a feature.
+ * SDK-03: Calls client.can() for initial state, then subscribes to Centrifugo
+ * workspace:{id}:entitlements channel for live updates.
+ *
+ * CONTEXT.md hard requirement: NO setInterval polling — Centrifugo WebSocket only.
+ */
+interface CanState {
+    allowed: boolean;
+    remaining: number | null;
+    limit: number | null;
+    loading: boolean;
+    error: string | null;
 }
+/**
+ * Check whether a customer is entitled to a feature.
+ * Subscribes to Centrifugo workspace:{workspaceId}:entitlements channel for live updates.
+ * No polling — WebSocket only per CONTEXT.md locked decision.
+ *
+ * @param customerId - Customer ID to check entitlement for
+ * @param featureKey - Feature key to check
+ * @returns CanState with allowed, remaining, limit, loading, error
+ */
+declare function useCan(customerId: string, featureKey: string): CanState;
 
-interface BillingContextValue {
-    store: BillingStore;
-    stripePromise: Promise<Stripe | null> | null;
+/**
+ * useUsage hook — fetch usage data for a customer metric.
+ * Calls GET /api/v1/usage/:customerId/:metricKey via client's fetch wrapper.
+ */
+interface UsageState {
+    value: number | null;
+    loading: boolean;
+    error: string | null;
 }
-interface BillingProviderProps {
+/**
+ * Fetch usage for a customer metric.
+ *
+ * @param customerId - Customer ID to fetch usage for
+ * @param metricKey - Metric key to fetch
+ * @returns UsageState with value, loading, error
+ */
+declare function useUsage(customerId: string, metricKey: string): UsageState;
+
+/**
+ * useCredits hook — fetch credit balance for a customer.
+ * Calls GET /api/v1/credits/:customerId/balance via client's fetch wrapper.
+ */
+interface CreditsState {
+    balance: number | null;
+    loading: boolean;
+    error: string | null;
+}
+/**
+ * Fetch credit balance for a customer.
+ *
+ * @param customerId - Customer ID to fetch credit balance for
+ * @returns CreditsState with balance, loading, error
+ */
+declare function useCredits(customerId: string): CreditsState;
+
+/**
+ * BillingPortalProvider — Context wrapper for embeddable SDK components.
+ * UI-01: Wraps children and exposes a React context with { customerId, apiKey }.
+ * Components inside can consume this via the useBillingPortal() hook.
+ *
+ * Internally renders BillingProvider so all billing hooks work inside.
+ */
+
+interface BillingPortalContextValue {
+    customerId: string;
     apiKey: string;
+}
+declare function useBillingPortal(): BillingPortalContextValue;
+interface BillingPortalProviderProps {
     customerId: string;
-    baseUrl?: string;
-    wsUrl?: string;
-    stripeKey?: string;
-    features?: string[];
+    apiKey: string;
     children: ReactNode;
 }
-declare function BillingProvider({ apiKey, customerId, baseUrl, wsUrl, stripeKey, features, children, }: BillingProviderProps): react_jsx_runtime.JSX.Element;
-declare function useBillingContext(): BillingContextValue;
+/**
+ * BillingPortalProvider wraps your embedded billing UI and provides
+ * { customerId, apiKey } context to all nested SDK components.
+ *
+ * Usage:
+ * ```tsx
+ * <BillingPortalProvider customerId="cus_xxx" apiKey="bsr_pk_xxx">
+ *   <PricingTable plans={plans} />
+ *   <FeatureGate feature="analytics" />
+ * </BillingPortalProvider>
+ * ```
+ */
+declare function BillingPortalProvider({ customerId, apiKey, children, }: BillingPortalProviderProps): React.ReactElement;
 
-declare function useCan(feature: string): UseCanResult;
+/**
+ * PlanCard — Individual pricing plan card component.
+ * UI-01: Shows plan name, price, interval, features list, and CTA button.
+ * Uses CSS variable theming with --nozle-* namespace.
+ */
 
-declare function useUsage(metric: string): UseUsageResult;
+interface Plan {
+    id: string;
+    name: string;
+    monthlyPrice: number;
+    annualPrice: number;
+    features: string[];
+    description?: string;
+}
+interface PlanCardProps extends Plan {
+    isAnnual: boolean;
+    isCurrent: boolean;
+    onSelect?: () => void;
+    children?: ReactNode;
+}
+/**
+ * PlanCard renders a single pricing plan.
+ * Highlighted with aria-current="true" when isCurrent=true.
+ */
+declare function PlanCard({ id, name, monthlyPrice, annualPrice, features, description, isAnnual, isCurrent, onSelect, }: PlanCardProps): React.ReactElement;
+
+/**
+ * PricingTable — Renders plan cards with monthly/annual toggle.
+ * UI-01: Responsive grid, monthly/annual toggle, highlights currentPlanId.
+ * Uses CSS variable theming with --nozle-* namespace.
+ */
+
+interface PricingTableProps {
+    plans: Plan[];
+    currentPlanId?: string;
+    onSelect?: (planId: string) => void;
+}
+/**
+ * PricingTable renders plan cards in a responsive grid with monthly/annual toggle.
+ * The current plan is highlighted with aria-current="true" and border-primary class.
+ *
+ * Usage:
+ * ```tsx
+ * <PricingTable
+ *   plans={plans}
+ *   currentPlanId="pro"
+ *   onSelect={(planId) => handleUpgrade(planId)}
+ * />
+ * ```
+ */
+declare function PricingTable({ plans, currentPlanId, onSelect, }: PricingTableProps): React.ReactElement;
+
+/**
+ * PlanComparison — Side-by-side feature comparison table.
+ * UI-01: Renders shadcn-style table with plan names as headers and features as rows.
+ * Check/cross icons for boolean values. Uses CSS variable theming.
+ */
+
+interface ComparisonFeature {
+    key: string;
+    label: string;
+    values: Record<string, string | boolean>;
+}
+interface PlanComparisonProps {
+    plans: Plan[];
+    features: ComparisonFeature[];
+}
+/**
+ * PlanComparison renders a side-by-side feature comparison table.
+ *
+ * Usage:
+ * ```tsx
+ * <PlanComparison
+ *   plans={plans}
+ *   features={[
+ *     { key: 'api_calls', label: 'API Calls', values: { starter: '10K', pro: '100K' } },
+ *     { key: 'analytics', label: 'Analytics', values: { starter: false, pro: true } },
+ *   ]}
+ * />
+ * ```
+ */
+declare function PlanComparison({ plans, features, }: PlanComparisonProps): React.ReactElement;
 
-declare function usePlan(): UsePlanResult;
+/**
+ * CheckoutButton — Initiates checkout for a plan.
+ * UI-02: Calls POST /api/v1/checkout, detects processor type from the response,
+ * and branches to the appropriate payment flow:
+ *   - Stripe hosted checkout: redirect to url
+ *   - Stripe embedded Elements: emit clientSecret via onStripeClientSecret callback
+ *   - Razorpay: inject Razorpay.js and open the checkout modal
+ *   - Legacy (no type): redirect to url for backwards compatibility
+ * Uses CSS variable theming with --nozle-* namespace.
+ */
 
+interface CheckoutButtonProps {
+    planId: string;
+    label?: string;
+    apiBaseUrl?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onError?: (error: Error) => void;
+    /** Required for Razorpay checkout path — the Razorpay publishable key (key_id). */
+    razorpayKeyId?: string;
+    /** Called with the Stripe Payment Intent / Checkout Session client secret
+     *  when the BFF returns type:'stripe' without a hosted url.
+     *  The host app is responsible for mounting Stripe Elements. */
+    onStripeClientSecret?: (clientSecret: string) => void;
+    /** Called with the Razorpay payment ID after a successful Razorpay payment. */
+    onSuccess?: (paymentId: string) => void;
+}
+interface RazorpayOptions {
+    key: string;
+    order_id: string;
+    name?: string;
+    description?: string;
+    handler: (response: {
+        razorpay_payment_id: string;
+    }) => void;
+    modal?: {
+        ondismiss?: () => void;
+    };
+}
+declare global {
+    interface Window {
+        Razorpay: new (opts: RazorpayOptions) => {
+            open(): void;
+        };
+    }
+}
+/**
+ * CheckoutButton initiates a checkout session and routes to the appropriate
+ * payment processor path.
+ *
+ * Must be used inside a BillingPortalProvider.
+ */
+declare function CheckoutButton({ planId, label, apiBaseUrl, className, style, onError, razorpayKeyId, onStripeClientSecret, onSuccess, }: CheckoutButtonProps): React.ReactElement;
+
+interface CheckoutProps {
+    /** Stripe PaymentIntent client secret */
+    clientSecret: string;
+    /** Stripe publishable key */
+    publishableKey: string;
+    /** Optional Stripe Connect account ID */
+    stripeAccount?: string;
+    /** Custom label for the submit button (default: "Pay now") */
+    submitLabel?: string;
+    /** Called with the paymentIntentId when payment succeeds without redirect */
+    onSuccess?: (paymentIntentId: string) => void;
+    /** Called with the error when payment fails */
+    onError?: (error: Error) => void;
+    /** Called when the PaymentElement becomes interactive */
+    onReady?: () => void;
+    /** Additional CSS class for the outer wrapper */
+    className?: string;
+    /** Inline styles for the outer wrapper */
+    style?: React.CSSProperties;
+}
 interface UseCheckoutResult {
-    fetchClientSecret: (planCode: string, successUrl?: string) => Promise<string>;
-    checkout: CheckoutResult | null;
-    stripePromise: ReturnType<typeof _stripe_stripe_js.loadStripe> | null;
-    isLoading: boolean;
+    /** Trigger payment confirmation programmatically */
+    confirmPayment: () => Promise<void>;
+    /** True while a payment confirmation is in-flight */
+    isProcessing: boolean;
+    /** Last payment error, or null if no error */
     error: Error | null;
 }
 declare function useCheckout(): UseCheckoutResult;
+declare function Checkout({ clientSecret, publishableKey, stripeAccount, submitLabel, onSuccess, onError, onReady, className, style, }: CheckoutProps): react_jsx_runtime.JSX.Element;
 
-interface UseSubscribeResult {
-    subscribe: (planCode: string) => Promise<any>;
-    isLoading: boolean;
-    error: Error | null;
+/**
+ * UpgradeButton — Opens UpgradeModal on click.
+ * UI-02: Triggers plan upgrade flow with proration preview.
+ * Uses CSS variable theming with --nozle-* namespace.
+ */
+
+interface UpgradeButtonProps {
+    targetPlanId: string;
+    label?: string;
+    apiBaseUrl?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onUpgraded?: () => void;
 }
-declare function useSubscribe(): UseSubscribeResult;
+/**
+ * UpgradeButton opens an UpgradeModal with live proration preview.
+ * Must be used inside a BillingPortalProvider.
+ */
+declare function UpgradeButton({ targetPlanId, label, apiBaseUrl, className, style, onUpgraded, }: UpgradeButtonProps): React.ReactElement;
 
-interface Plan {
-    code: string;
-    name: string;
-    amount_cents: number;
-    amount_currency: string;
-    interval: string;
+/**
+ * CreditTopUpButton — Opens a dialog for purchasing credits.
+ * UI-02: Allows customers to top up their credit balance.
+ * Uses CSS variable theming with --nozle-* namespace.
+ */
+
+interface CreditTopUpButtonProps {
+    label?: string;
+    apiBaseUrl?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onSuccess?: (amount: number) => void;
+    onError?: (error: Error) => void;
 }
-declare function usePlans(): {
-    plans: Plan[];
-    isLoading: boolean;
-};
+/**
+ * CreditTopUpButton opens a dialog to purchase credits.
+ * Must be used inside a BillingPortalProvider.
+ */
+declare function CreditTopUpButton({ label, apiBaseUrl, className, style, onSuccess, onError, }: CreditTopUpButtonProps): React.ReactElement;
+
+/**
+ * UpgradeModal — Shows live proration preview before confirming plan upgrade.
+ * UI-02: Fetches proration preview from POST /api/v1/subscriptions/preview.
+ * Shows credit, debit, net, and next billing date before confirming.
+ * Uses CSS variable theming with --nozle-* namespace.
+ */
 
-interface UsageMeterProps extends HTMLAttributes<HTMLDivElement> {
-    metric: string;
-    variant?: "bar" | "ring" | "minimal";
+interface ProrationPreview {
+    credit: number;
+    debit: number;
+    net: number;
+    nextBillingDate: string;
 }
-interface PlanBadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    variant?: "pill" | "text" | "icon";
+interface UpgradeModalProps {
+    isOpen: boolean;
+    targetPlanId: string;
+    customerId: string;
+    apiBaseUrl?: string;
+    apiKey?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}
+/**
+ * UpgradeModal shows proration preview from POST /api/v1/subscriptions/preview
+ * before the customer confirms a plan upgrade.
+ */
+declare function UpgradeModal({ isOpen, targetPlanId, customerId, apiBaseUrl, apiKey, onConfirm, onCancel, }: UpgradeModalProps): React.ReactElement | null;
+
+/**
+ * FeatureGate — Renders children if customer has access to a feature.
+ * UI-03: Uses useCan hook; renders fallback when allowed=false.
+ * Renders null while loading to avoid layout shift.
+ */
+
+interface FeatureGateProps {
+    /** Customer ID to check entitlement for */
+    customerId: string;
+    /** Feature key to check */
+    feature: string;
+    /** Rendered when customer does not have access. Defaults to null. */
+    fallback?: ReactNode;
+    /** Content to show when customer has access */
+    children: ReactNode;
+}
+/**
+ * FeatureGate renders children only when the customer is entitled to the feature.
+ * Returns null while the entitlement check is loading.
+ *
+ * Usage:
+ * ```tsx
+ * <FeatureGate customerId="cus_123" feature="analytics" fallback={<UpgradePrompt />}>
+ *   <AnalyticsDashboard />
+ * </FeatureGate>
+ * ```
+ */
+declare function FeatureGate({ customerId, feature, fallback, children, }: FeatureGateProps): React.ReactElement | null;
+
+/**
+ * UsageGate — Renders children if usage is below limit.
+ * UI-03: Renders fallback when usage >= limit.
+ * Pure render logic — caller provides usage and limit values.
+ */
+
+interface UsageGateProps {
+    /** Current usage value */
+    usage: number;
+    /** Usage limit */
+    limit: number;
+    /** Rendered when usage is at or above limit. Defaults to null. */
+    fallback?: ReactNode;
+    /** Content to show when usage is below limit */
+    children: ReactNode;
+}
+/**
+ * UsageGate renders children only when current usage is below the limit.
+ * When usage >= limit, renders fallback.
+ *
+ * Usage:
+ * ```tsx
+ * <UsageGate usage={currentUsage} limit={plan.apiCallLimit} fallback={<UpgradePrompt />}>
+ *   <ApiCallButton />
+ * </UsageGate>
+ * ```
+ */
+declare function UsageGate({ usage, limit, fallback, children, }: UsageGateProps): React.ReactElement;
+
+/**
+ * PlanGate — Renders children if customer's plan is in the allowed list.
+ * UI-03: Pure render logic — caller provides currentPlan and allowedPlans.
+ * Renders fallback when customer is not on an allowed plan tier.
+ */
+
+interface PlanGateProps {
+    /** The customer's current plan identifier */
+    currentPlan: string;
+    /** List of plan identifiers that are allowed to see the children */
+    allowedPlans: string[];
+    /** Rendered when customer is not on an allowed plan. Defaults to null. */
+    fallback?: ReactNode;
+    /** Content to show when customer is on an allowed plan */
+    children: ReactNode;
+}
+/**
+ * PlanGate renders children only when the customer's currentPlan is in allowedPlans.
+ * When not on an allowed plan, renders fallback.
+ *
+ * Usage:
+ * ```tsx
+ * <PlanGate
+ *   currentPlan={customer.plan}
+ *   allowedPlans={['pro', 'enterprise']}
+ *   fallback={<UpgradePrompt planName="Pro" />}
+ * >
+ *   <ProFeature />
+ * </PlanGate>
+ * ```
+ */
+declare function PlanGate({ currentPlan, allowedPlans, fallback, children, }: PlanGateProps): React.ReactElement;
+
+/**
+ * UpgradePrompt — Reusable upgrade message component.
+ * UI-03: Shows plan name + upgrade button; used as default fallback for LockedOverlay.
+ * Uses CSS variable theming with --nozle-* namespace.
+ */
+
+interface UpgradePromptProps {
+    text?: string;
+    planName?: string;
+    onUpgrade?: () => void;
+}
+/**
+ * UpgradePrompt renders an upgrade call-to-action with a message and button.
+ * Used as default fallback in LockedOverlay and gate components.
+ */
+declare function UpgradePrompt({ text, planName, onUpgrade, }: UpgradePromptProps): React.ReactElement;
+
+/**
+ * LockedOverlay — Wraps children with a blur filter + upgrade CTA overlay when locked.
+ * UI-03: Applies CSS blur(4px) to children with an upgrade prompt overlay.
+ * Uses CSS variable theming with --nozle-* namespace.
+ */
+
+interface LockedOverlayProps {
+    /** Whether to apply the locked blur + overlay state */
+    locked: boolean;
+    /** Text to show in the upgrade prompt */
+    upgradeText?: string;
+    /** Plan name to show in the upgrade prompt */
+    upgradePlanName?: string;
+    /** Called when the upgrade button is clicked */
+    onUpgrade?: () => void;
+    /** Content to blur when locked */
+    children: ReactNode;
+}
+/**
+ * LockedOverlay wraps children in a relative container.
+ * When locked=true:
+ *   - Children receive CSS blur(4px) and pointer-events: none
+ *   - An upgrade CTA overlay is positioned on top
+ *
+ * When locked=false, children render normally without any overlay.
+ *
+ * Usage:
+ * ```tsx
+ * <LockedOverlay locked={!canAccessFeature} upgradeText="Upgrade to Pro" onUpgrade={openUpgradeModal}>
+ *   <FeatureContent />
+ * </LockedOverlay>
+ * ```
+ */
+declare function LockedOverlay({ locked, upgradeText, upgradePlanName, onUpgrade, children, }: LockedOverlayProps): React.ReactElement;
+
+/**
+ * UsageMeter — embeddable usage progress bar with automatic color thresholds.
+ * Uses --nozle-* CSS variables for theming (customer-facing portal layer).
+ *
+ * Color thresholds:
+ *   < 80%  → primary (normal)
+ *   80-94% → warning (amber)
+ *   ≥ 95%  → destructive (red)
+ */
+declare function getUsageMeterColor(percentage: number): string;
+interface UsageMeterProps {
+    used: number;
+    limit: number;
+    label?: string;
+    showText?: boolean;
+}
+declare function UsageMeter({ used, limit, label, showText, }: UsageMeterProps): react_jsx_runtime.JSX.Element;
+
+interface UsageDashboardFeature {
+    key: string;
+    label: string;
+    used: number;
+    limit: number;
+}
+interface UsageDashboardProps {
+    features?: UsageDashboardFeature[];
+    loading?: boolean;
 }
-interface UpgradePromptProps extends HTMLAttributes<HTMLDivElement> {
-    feature?: string;
-    variant?: "card" | "banner" | "inline";
-    upgradeUrl?: string;
-    message?: string;
+declare function UsageDashboard({ features, loading, }: UsageDashboardProps): react_jsx_runtime.JSX.Element;
+
+interface UsageAlertFeature {
+    key: string;
+    label: string;
+    percentage: number;
+}
+interface UsageAlertProps {
+    features: UsageAlertFeature[];
+    threshold?: number;
+    upgradeHref?: string;
+}
+declare function UsageAlert({ features, threshold, upgradeHref, }: UsageAlertProps): react_jsx_runtime.JSX.Element | null;
+
+interface CreditBalanceProps {
+    customerId: string;
+    currency?: string;
+}
+declare function CreditBalance({ customerId, currency, }: CreditBalanceProps): react_jsx_runtime.JSX.Element;
+
+interface CreditTransaction {
+    id: string;
+    amount: number;
+    type: string;
+    description: string;
+    createdAt: string;
+}
+interface CreditHistoryProps {
+    customerId: string;
+    viewAllHref?: string;
+}
+declare function CreditHistory({ customerId, viewAllHref, }: CreditHistoryProps): react_jsx_runtime.JSX.Element;
+
+interface PlanBadgeProps {
+    plan: string;
+    tier?: "free" | "starter" | "pro" | "enterprise";
+}
+declare function PlanBadge({ plan, tier }: PlanBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface BillingPortalProps {
+    customerId: string;
+    usageFeatures?: UsageDashboardFeature[];
+    usageLoading?: boolean;
+    onChangePlan?: () => void;
+    subscriptionId?: string;
+    onCancelled?: () => void;
 }
+declare function BillingPortal({ customerId, usageFeatures, usageLoading, onChangePlan, }: BillingPortalProps): react_jsx_runtime.JSX.Element;
 
-declare function UsageMeter({ metric, variant, className, style, ...props }: UsageMeterProps): react_jsx_runtime.JSX.Element | null;
+interface CurrentPlanData {
+    id: string;
+    planName: string;
+    interval: string;
+    status: string;
+    nextBillingDate?: string;
+    tier?: "free" | "starter" | "pro" | "enterprise";
+}
+interface CurrentPlanProps {
+    customerId: string;
+    onChangePlan?: () => void;
+    changePlanHref?: string;
+}
+declare function CurrentPlan({ customerId, onChangePlan, changePlanHref, }: CurrentPlanProps): react_jsx_runtime.JSX.Element;
 
-declare function PlanBadge({ variant, className, style, ...props }: PlanBadgeProps): react_jsx_runtime.JSX.Element | null;
+interface Invoice {
+    id: string;
+    number: string;
+    date: string;
+    amount: number;
+    currency: string;
+    status: "draft" | "open" | "paid" | "void" | "uncollectible";
+    pdf_url?: string;
+}
+interface InvoiceListProps {
+    customerId: string;
+}
+declare function InvoiceList({ customerId }: InvoiceListProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * PaymentMethodDisplay — shows saved payment method details.
+ * Displays last4, brand, expiry. "Update Payment Method" button opens checkout.
+ */
+interface PaymentMethod {
+    last4: string;
+    brand: string;
+    expMonth: number;
+    expYear: number;
+}
+interface PaymentMethodDisplayProps {
+    paymentMethod?: PaymentMethod;
+    onUpdatePaymentMethod?: () => void;
+    updateHref?: string;
+}
+declare function PaymentMethodDisplay({ paymentMethod, onUpdatePaymentMethod, updateHref, }: PaymentMethodDisplayProps): react_jsx_runtime.JSX.Element;
 
-declare function UpgradePrompt({ feature, variant, upgradeUrl, message, className, style, ...props }: UpgradePromptProps): react_jsx_runtime.JSX.Element | null;
+declare const CANCEL_REASONS: readonly ["Too expensive", "Missing features", "Switching to competitor", "Not using it enough", "Other"];
+interface CancelSubscriptionButtonProps {
+    subscriptionId: string;
+    onCancelled?: () => void;
+}
+declare function CancelSubscriptionButton({ subscriptionId, onCancelled, }: CancelSubscriptionButtonProps): react_jsx_runtime.JSX.Element;
 
-export { BillingProvider, type BillingState, type CheckoutResult, type Plan, PlanBadge, type PlanBadgeProps, UpgradePrompt, type UpgradePromptProps, UsageMeter, type UsageMeterProps, type UseCanResult, type UseCheckoutResult, type UsePlanResult, type UseUsageResult, useBillingContext, useCan, useCheckout, usePlan, usePlans, useSubscribe, useUsage };
+export { BillingContext, type BillingContextValue, BillingPortal, type BillingPortalContextValue, type BillingPortalProps, BillingPortalProvider, type BillingPortalProviderProps, BillingProvider, type BillingProviderProps, CANCEL_REASONS, type CanState, CancelSubscriptionButton, type CancelSubscriptionButtonProps, Checkout, CheckoutButton, type CheckoutButtonProps, type CheckoutProps, type ComparisonFeature, CreditBalance, type CreditBalanceProps, CreditHistory, type CreditHistoryProps, CreditTopUpButton, type CreditTopUpButtonProps, type CreditTransaction, type CreditsState, CurrentPlan, type CurrentPlanData, type CurrentPlanProps, FeatureGate, type FeatureGateProps, type Invoice, InvoiceList, type InvoiceListProps, LockedOverlay, type LockedOverlayProps, type NozleClient, type PaymentMethod, PaymentMethodDisplay, type PaymentMethodDisplayProps, type Plan, PlanBadge, type PlanBadgeProps, PlanCard, type PlanCardProps, PlanComparison, type PlanComparisonProps, PlanGate, type PlanGateProps, PricingTable, type PricingTableProps, type ProrationPreview, UpgradeButton, type UpgradeButtonProps, UpgradeModal, type UpgradeModalProps, UpgradePrompt, type UpgradePromptProps, UsageAlert, type UsageAlertFeature, type UsageAlertProps, UsageDashboard, type UsageDashboardFeature, type UsageDashboardProps, UsageGate, type UsageGateProps, UsageMeter, type UsageMeterProps, type UsageState, type UseCheckoutResult, getUsageMeterColor, useBillingContext, useBillingPortal, useCan, useCheckout, useCredits, useNozleClient, useUsage };