UNPKG

@teerai/teer-react

Version:

React components and hooks for Teer billing integration

307 lines (301 loc) 7.05 kB
import * as React from 'react'; /** * Teer React SDK Types */ /** * Configuration for the Teer provider */ interface TeerProviderConfig { /** * Publishable API key for Teer */ publishableKey: string; /** * Optional customer ID to associate with the session */ customerId?: string; /** * Optional customer email to associate with the session */ customerEmail?: string; /** * Success URL for checkout redirects */ successUrl?: string; /** * Cancel URL for checkout redirects */ cancelUrl?: string; /** * Whether to fetch billing configuration on mount */ fetchOnMount?: boolean; } /** * Teer billing plan */ interface BillingPlan { id: string; name: string; description?: string; prices: BillingPrice[]; features?: BillingFeature[]; metadata?: Record<string, any>; } /** * Teer billing price */ interface BillingPrice { id: string; currency: string; unitAmount: number; interval?: 'day' | 'week' | 'month' | 'year'; intervalCount?: number; isRecurring: boolean; metadata?: Record<string, any>; /** * Formatted price for display (provided by the API) */ formatted: { unitAmount: string; intervals?: Record<string, string>; }; } /** * Teer billing feature */ interface BillingFeature { id: string; name: string; description?: string; value?: string | number | boolean; metadata?: Record<string, any>; } /** * Teer billing configuration */ interface BillingConfig { plans: BillingPlan[]; features?: BillingFeature[]; metadata?: Record<string, any>; } /** * Teer customer */ interface Customer { id: string; email?: string; name?: string; metadata?: Record<string, any>; } /** * Teer subscription */ interface Subscription { id: string; status: 'active' | 'canceled' | 'incomplete' | 'incomplete_expired' | 'past_due' | 'trialing' | 'unpaid'; currentPeriodStart: number; currentPeriodEnd: number; cancelAtPeriodEnd: boolean; planId: string; priceId: string; metadata?: Record<string, any>; } /** * Checkout options */ interface CheckoutOptions { priceId: string; successUrl?: string; cancelUrl?: string; customerId?: string; customerEmail?: string; metadata?: Record<string, any>; } /** * Checkout session */ interface CheckoutSession { id: string; url: string; } /** * Billing portal options */ interface BillingPortalOptions { customerId?: string; returnUrl?: string; } /** * Billing portal session */ interface BillingPortalSession { id: string; url: string; } /** * Usage data */ interface UsageData { id: string; subscriptionItemId: string; quantity: number; timestamp: number; } /** * Teer context state */ interface TeerState { /** * Whether the context is loading */ isLoading: boolean; /** * Whether the context is ready */ isReady: boolean; /** * Error if any */ error: Error | null; /** * Billing configuration */ billingConfig: BillingConfig | null; /** * Current customer */ customer: Customer | null; /** * Current subscriptions */ subscriptions: Subscription[]; } /** * Teer context value */ interface TeerContextValue extends TeerState { /** * Refetch billing configuration */ refetch: () => Promise<void>; /** * Create a checkout session */ checkout: (options: CheckoutOptions | string) => Promise<CheckoutSession>; /** * Create a billing portal session */ billingPortal: (options?: BillingPortalOptions) => Promise<BillingPortalSession>; /** * Report usage */ reportUsage: (subscriptionItemId: string, quantity: number) => Promise<UsageData>; } declare const TeerContext: React.Context<TeerContextValue | undefined>; interface TeerProviderProps { /** * Provider configuration */ publishableKey: string; /** * Optional customer ID */ customerId?: string; /** * Optional customer email */ customerEmail?: string; /** * Success URL for checkout redirects */ successUrl?: string; /** * Cancel URL for checkout redirects */ cancelUrl?: string; /** * Whether to fetch billing configuration on mount */ fetchOnMount?: boolean; /** * Children components */ children: React.ReactNode; } /** * Teer Provider Component */ declare const TeerProvider: React.FC<TeerProviderProps>; /** * Hook to access the Teer context */ declare function useTeer(): TeerContextValue; /** * Hook to access billing configuration */ declare function useBillingConfig(): { billingConfig: BillingConfig | null; isLoading: boolean; error: Error | null; }; /** * Hook to access customer data */ declare function useCustomer(): { customer: Customer | null; isLoading: boolean; error: Error | null; }; /** * Hook to access subscriptions */ declare function useSubscriptions(): { subscriptions: Subscription[]; isLoading: boolean; error: Error | null; }; /** * Hook to access checkout functionality */ declare function useCheckout(): { checkout: (options: CheckoutOptions | string) => Promise<CheckoutSession>; isLoading: boolean; error: Error | null; }; /** * Hook to access billing portal functionality */ declare function useBillingPortal(): { billingPortal: (options?: BillingPortalOptions) => Promise<BillingPortalSession>; isLoading: boolean; error: Error | null; }; /** * Hook to access usage reporting functionality */ declare function useUsageReporting(): { reportUsage: (subscriptionItemId: string, quantity: number) => Promise<UsageData>; isLoading: boolean; error: Error | null; }; /** * Get active subscriptions (active or trialing) */ declare function getActiveSubscriptions(subscriptions: Subscription[]): Subscription[]; /** * Get a plan by ID */ declare function getPlanById(plans: BillingPlan[], planId: string): BillingPlan | undefined; /** * Get a price by ID */ declare function getPriceById(plans: BillingPlan[], priceId: string): BillingPrice | undefined; /** * Get active price for a plan based on currency and interval */ declare function getActivePlanPrice(plan: BillingPlan, options?: { currency?: string; interval?: string; }): BillingPrice | undefined; export { type BillingConfig, type BillingFeature, type BillingPlan, type BillingPortalOptions, type BillingPortalSession, type BillingPrice, type CheckoutOptions, type CheckoutSession, type Customer, type Subscription, TeerContext, type TeerContextValue, TeerProvider, type TeerProviderConfig, type TeerState, type UsageData, getActivePlanPrice, getActiveSubscriptions, getPlanById, getPriceById, useBillingConfig, useBillingPortal, useCheckout, useCustomer, useSubscriptions, useTeer, useUsageReporting };