@churnkey/react 0.1.0

package/dist/step-graph-ChdI-VXV.d.ts

@@ -0,0 +1,540 @@
+import { ReactNode, ReactElement, ComponentType } from 'react';
+
+interface DirectAddress {
+    line1?: string;
+    line2?: string;
+    city?: string;
+    state?: string;
+    postalCode?: string;
+    /** ISO 3166-1 alpha-2 */
+    country?: string;
+}
+interface DirectCustomer {
+    id: string;
+    email?: string;
+    name?: string;
+    lastName?: string;
+    phone?: string;
+    /** ISO 4217 */
+    currency?: string;
+    addresses?: DirectAddress[];
+    metadata?: Record<string, unknown>;
+}
+interface DirectPrice {
+    id: string;
+    type?: 'standalone' | 'product';
+    active?: boolean;
+    productId?: string;
+    name?: string;
+    description?: string;
+    duration?: {
+        interval: 'day' | 'week' | 'month' | 'year';
+        intervalCount?: number;
+    };
+    amount: {
+        model?: 'fixed' | 'tiered';
+        /** Smallest currency unit (cents for USD). */
+        value: number;
+        currency?: string;
+    };
+    metadata?: Record<string, unknown>;
+}
+interface DirectCoupon {
+    id?: string;
+    name?: string;
+    percentOff?: number;
+    /** Smallest currency unit (cents for USD). */
+    amountOff?: number;
+    currency?: string;
+    duration?: 'once' | 'repeating' | 'forever';
+    durationInMonths?: number;
+    metadata?: Record<string, unknown>;
+}
+type SubscriptionStatus = {
+    name: 'active';
+    currentPeriod: {
+        start: Date | string;
+        end: Date | string;
+    };
+} | {
+    name: 'trial';
+    trial: {
+        start: Date | string;
+        end: Date | string;
+    };
+    currentPeriod?: {
+        start: Date | string;
+        end: Date | string;
+    };
+} | {
+    name: 'paused';
+    pause: {
+        start: Date | string;
+        end?: Date | string;
+    };
+    currentPeriod?: {
+        start: Date | string;
+        end: Date | string;
+    };
+} | {
+    name: 'canceled';
+    canceledAt: Date | string;
+} | {
+    name: 'unpaid';
+    currentPeriod?: {
+        start: Date | string;
+        end: Date | string;
+    };
+} | {
+    name: 'future';
+    currentPeriod?: {
+        start: Date | string;
+        end: Date | string;
+    };
+};
+interface DirectSubscriptionItem {
+    id?: string;
+    price: DirectPrice;
+    quantity?: number;
+}
+interface DirectSubscription {
+    id: string;
+    customerId?: string;
+    start: Date | string;
+    status: SubscriptionStatus;
+    items: DirectSubscriptionItem[];
+    duration?: {
+        interval: 'day' | 'week' | 'month' | 'year';
+        intervalCount?: number;
+    };
+    end?: Date | string;
+    discounts?: Array<{
+        id?: string;
+        coupon?: DirectCoupon;
+        start?: Date | string;
+        end?: Date | string;
+    }>;
+    metadata?: Record<string, unknown>;
+}
+interface DiscountOffer {
+    type: 'discount';
+    couponId?: string;
+    percentOff?: number;
+    /** Smallest currency unit (cents for USD). */
+    amountOff?: number;
+    currency?: string;
+    durationInMonths?: number;
+}
+interface PauseOffer {
+    type: 'pause';
+    months: number;
+    interval?: 'month' | 'week';
+    datePicker?: boolean;
+}
+interface PlanChangeOffer {
+    type: 'plan_change';
+    plans: PlanOption[];
+    currentPlanId?: string;
+}
+/**
+ * Plan option in a `plan_change` offer — `DirectPrice` plus optional
+ * cancel-flow merchandising fields. Marketing fields are presentation-only
+ * and live on `PlanOption` rather than `DirectPrice` so `Direct` stays a
+ * clean billing-data shape reusable outside the cancel-flow context.
+ */
+interface PlanOption extends DirectPrice {
+    /** Short marketing line (e.g. "Most popular"). */
+    tagline?: string;
+    /** Bullet list of plan features shown on the card. */
+    features?: string[];
+    /** Pre-formatted "before" price rendered struck-through (e.g. "$49/mo"). */
+    msrp?: string;
+}
+interface TrialExtensionOffer {
+    type: 'trial_extension';
+    days: number;
+}
+interface ContactOffer {
+    type: 'contact';
+    url?: string;
+    label?: string;
+}
+interface RedirectOffer {
+    type: 'redirect';
+    url: string;
+    label: string;
+}
+interface CustomOfferConfig {
+    type: string;
+    data?: Record<string, unknown>;
+}
+type BuiltInOfferConfig = DiscountOffer | PauseOffer | PlanChangeOffer | TrialExtensionOffer | ContactOffer | RedirectOffer;
+type OfferConfig = BuiltInOfferConfig | CustomOfferConfig;
+type OfferDecision = OfferConfig & {
+    copy: OfferCopy;
+    decisionId?: string;
+};
+interface OfferCopy {
+    headline: string;
+    body: string;
+    cta: string;
+    declineCta: string;
+}
+type AcceptedOffer = OfferConfig & {
+    reasonId: string;
+    decisionId?: string;
+    result?: Record<string, unknown>;
+};
+interface ReasonConfig {
+    id: string;
+    label: string;
+    freeform?: boolean;
+    offer?: OfferConfig;
+}
+interface SurveyStep {
+    type: 'survey';
+    guid?: string;
+    title?: string;
+    description?: string;
+    reasons: ReasonConfig[];
+    classNames?: SurveyClassNames;
+}
+interface OfferStep {
+    type: 'offer';
+    guid?: string;
+    title?: string;
+    description?: string;
+    /**
+     * Offer attached to this step. Set this for proactive save offers shown
+     * outside a survey; the SDK also populates it automatically on synthetic
+     * offer steps spawned from survey choices.
+     */
+    offer?: OfferDecision;
+    classNames?: OfferClassNames;
+}
+interface FeedbackStep {
+    type: 'feedback';
+    guid?: string;
+    title?: string;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    minLength?: number;
+    classNames?: FeedbackClassNames;
+}
+interface ConfirmStep {
+    type: 'confirm';
+    guid?: string;
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    goBackLabel?: string;
+    classNames?: ConfirmClassNames;
+}
+interface SuccessStep {
+    type: 'success';
+    guid?: string;
+    savedTitle?: string;
+    savedDescription?: string;
+    cancelledTitle?: string;
+    cancelledDescription?: string;
+    classNames?: SuccessClassNames;
+}
+interface CustomStepConfig {
+    type: string;
+    guid?: string;
+    title?: string;
+    description?: string;
+    data?: Record<string, unknown>;
+}
+type BuiltInStep = SurveyStep | OfferStep | FeedbackStep | ConfirmStep | SuccessStep;
+type Step = BuiltInStep | CustomStepConfig;
+type BuiltInStepType = 'survey' | 'offer' | 'feedback' | 'confirm' | 'success';
+interface SurveyClassNames {
+    root?: string;
+    title?: string;
+    description?: string;
+    reasonList?: string;
+    reasonButton?: string;
+    reasonButtonSelected?: string;
+    reasonLabel?: string;
+    freeformInput?: string;
+    continueButton?: string;
+}
+interface OfferClassNames {
+    root?: string;
+    title?: string;
+    description?: string;
+    card?: string;
+    headline?: string;
+    body?: string;
+    acceptButton?: string;
+    declineButton?: string;
+    discountBadge?: string;
+    priceComparison?: string;
+    pauseSlider?: string;
+    planGrid?: string;
+    planCard?: string;
+    planCardSelected?: string;
+}
+interface FeedbackClassNames {
+    root?: string;
+    title?: string;
+    description?: string;
+    textarea?: string;
+    characterCount?: string;
+    submitButton?: string;
+}
+interface ConfirmClassNames {
+    root?: string;
+    title?: string;
+    description?: string;
+    confirmButton?: string;
+    goBackButton?: string;
+    periodEndNotice?: string;
+}
+interface SuccessClassNames {
+    root?: string;
+    icon?: string;
+    title?: string;
+    description?: string;
+    closeButton?: string;
+}
+interface StructuralClassNames {
+    overlay?: string;
+    modal?: string;
+    closeButton?: string;
+    backButton?: string;
+}
+interface AppearanceVariables {
+    colorPrimary: string;
+    colorPrimaryHover: string;
+    colorBackground: string;
+    colorText: string;
+    colorTextSecondary: string;
+    colorBorder: string;
+    colorDanger: string;
+    colorSuccess: string;
+    fontFamily: string;
+    fontSize: string;
+    borderRadius: string;
+}
+interface Appearance {
+    /**
+     * `'auto'` follows the user's OS preference (`prefers-color-scheme`) and
+     * watches for changes. Default: `'light'`.
+     */
+    colorScheme?: 'auto' | 'light' | 'dark';
+    variables?: Partial<AppearanceVariables>;
+}
+interface CustomStepProps {
+    step: CustomStepConfig;
+    customer: DirectCustomer | null;
+    onNext: (result?: Record<string, unknown>) => void;
+    onBack: () => void;
+}
+interface CustomOfferProps {
+    offer: OfferDecision;
+    customer: DirectCustomer | null;
+    onAccept: (result?: Record<string, unknown>) => Promise<void>;
+    onDecline: () => void;
+    isProcessing: boolean;
+}
+interface ComponentOverrides {
+    Modal?: (props: ModalProps) => ReactElement;
+    CloseButton?: (props: CloseButtonProps) => ReactElement;
+    BackButton?: (props: BackButtonProps) => ReactElement;
+    Survey?: (props: SurveyStepProps) => ReactElement;
+    Offer?: (props: OfferStepProps) => ReactElement;
+    Feedback?: (props: FeedbackStepProps) => ReactElement;
+    Confirm?: (props: ConfirmStepProps) => ReactElement;
+    Success?: (props: SuccessStepProps) => ReactElement;
+    ReasonButton?: (props: ReasonButtonProps) => ReactElement;
+    DiscountOffer?: (props: OfferStepProps) => ReactElement;
+    PauseOffer?: (props: OfferStepProps) => ReactElement;
+    PlanChangeOffer?: (props: OfferStepProps) => ReactElement;
+    TrialExtensionOffer?: (props: OfferStepProps) => ReactElement;
+    ContactOffer?: (props: OfferStepProps) => ReactElement;
+    RedirectOffer?: (props: OfferStepProps) => ReactElement;
+}
+type CustomComponents = Record<string, ComponentType<CustomStepProps> | ComponentType<CustomOfferProps>>;
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string;
+}
+interface CloseButtonProps {
+    onClose: () => void;
+    className?: string;
+}
+interface BackButtonProps {
+    onBack: () => void;
+    className?: string;
+}
+interface SurveyStepProps {
+    title: string;
+    description?: string;
+    reasons: ReasonConfig[];
+    selectedReason: string | null;
+    onSelectReason: (id: string) => void;
+    onNext: () => void;
+    classNames?: SurveyClassNames;
+    components?: Partial<ComponentOverrides>;
+}
+interface OfferStepProps {
+    title?: string;
+    description?: string;
+    offer: OfferDecision;
+    /**
+     * Accept the offer. The optional `result` is included on the resulting
+     * `AcceptedOffer` payload — used by offers that need a user choice (e.g.
+     * `plan_change` passes `{ planId }`).
+     */
+    onAccept: (result?: Record<string, unknown>) => Promise<void>;
+    onDecline: () => void;
+    isProcessing: boolean;
+    classNames?: OfferClassNames;
+    /**
+     * Forwarded to the default `Offer` switcher so it can dispatch to per-type
+     * overrides (`DiscountOffer`, `PauseOffer`, etc). Custom `Offer`
+     * implementations can ignore this.
+     */
+    components?: Partial<ComponentOverrides>;
+}
+interface FeedbackStepProps {
+    title: string;
+    description?: string;
+    placeholder?: string;
+    required: boolean;
+    minLength: number;
+    value: string;
+    onChange: (text: string) => void;
+    onSubmit: () => void;
+    classNames?: FeedbackClassNames;
+}
+interface ConfirmStepProps {
+    title: string;
+    description?: string;
+    confirmLabel: string;
+    goBackLabel: string;
+    periodEnd?: string;
+    onConfirm: () => Promise<void>;
+    onGoBack: () => void;
+    isProcessing: boolean;
+    classNames?: ConfirmClassNames;
+}
+interface SuccessStepProps {
+    outcome: 'saved' | 'cancelled';
+    offer?: OfferDecision;
+    title: string;
+    description?: string;
+    onClose: () => void;
+    classNames?: SuccessClassNames;
+}
+interface ReasonButtonProps {
+    reason: ReasonConfig;
+    index: number;
+    isSelected: boolean;
+    onSelect: (id: string) => void;
+}
+interface FlowState {
+    step: string;
+    currentStepId: string;
+    selectedReason: string | null;
+    feedback: string;
+    outcome: 'saved' | 'cancelled' | null;
+    isProcessing: boolean;
+    error: Error | null;
+    customer: DirectCustomer | null;
+}
+interface FlowConfig extends FlowCallbacks {
+    appId?: string;
+    customer?: DirectCustomer;
+    subscriptions?: DirectSubscription[];
+    session?: string;
+    apiBaseUrl?: string;
+    steps?: Step[];
+    /**
+     * Tags the session as live or test. Use `'test'` from staging so your
+     * dashboard can filter out non-production traffic. Defaults to `'live'`.
+     * In token mode the mode is encoded in the signed token and overrides
+     * this field.
+     */
+    mode?: 'live' | 'test';
+}
+type OfferCallback = (offer: AcceptedOffer, customer: DirectCustomer | null) => Promise<void> | void;
+type CancelCallback = (customer: DirectCustomer | null) => Promise<void> | void;
+/**
+ * Two kinds of callbacks, distinguished by name:
+ *
+ * - `handle<Type>` runs the action. When defined, it replaces whatever
+ *   Churnkey would do on the server — the consumer takes responsibility.
+ *   In local mode (no token), handlers are the only path that does anything.
+ * - `on<Type>` is a listener that fires after the action. Side effects only —
+ *   refetch state, log analytics, show a toast. Errors thrown here are
+ *   swallowed; listeners can't flip the flow into an error state.
+ *
+ * `onAccept` is a catch-all that fires alongside the per-type listener.
+ */
+interface FlowCallbacks {
+    handleDiscount?: OfferCallback;
+    handlePause?: OfferCallback;
+    handlePlanChange?: OfferCallback;
+    handleTrialExtension?: OfferCallback;
+    handleCancel?: CancelCallback;
+    onAccept?: OfferCallback;
+    onDiscount?: OfferCallback;
+    onPause?: OfferCallback;
+    onPlanChange?: OfferCallback;
+    onTrialExtension?: OfferCallback;
+    onCancel?: CancelCallback;
+    onClose?: () => void;
+    onStepChange?: (step: string, prevStep: string) => void;
+}
+interface CancelFlowProps extends FlowCallbacks {
+    appId?: string;
+    customer?: DirectCustomer;
+    subscriptions?: DirectSubscription[];
+    session?: string;
+    steps?: Step[];
+    apiBaseUrl?: string;
+    /** See FlowConfig.mode. Ignored in token mode (the token is authoritative). */
+    mode?: 'live' | 'test';
+    appearance?: Appearance;
+    classNames?: StructuralClassNames;
+    components?: Partial<ComponentOverrides>;
+    customComponents?: CustomComponents;
+    layout?: {
+        desktop?: 'modal' | 'inline' | 'drawer';
+        mobile?: 'sheet' | 'fullscreen' | 'inline';
+        breakpoint?: number;
+    };
+    animation?: 'css' | 'framer' | 'none';
+}
+
+interface ResolvedStep {
+    guid: string;
+    type: string;
+    defaultNextStep?: string;
+    defaultPreviousStep?: string;
+    title?: string;
+    description?: string;
+    reasons?: ReasonConfig[];
+    offersAttached?: Record<string, string>;
+    numChoices?: number;
+    offer?: OfferDecision;
+    /** True if this step was synthesized from a survey choice. Used by stepIndex so synthetic offers share the survey's progress slot. */
+    surveyOffer?: boolean;
+    placeholder?: string;
+    required?: boolean;
+    minLength?: number;
+    savedTitle?: string;
+    savedDescription?: string;
+    cancelledTitle?: string;
+    cancelledDescription?: string;
+    data?: Record<string, unknown>;
+    classNames?: unknown;
+}
+
+export type { SurveyStep as $, AcceptedOffer as A, BackButtonProps as B, CancelFlowProps as C, DirectAddress as D, FlowState as E, FeedbackStepProps as F, OfferClassNames as G, OfferConfig as H, OfferCopy as I, OfferDecision as J, OfferStep as K, PlanChangeOffer as L, ModalProps as M, PlanOption as N, OfferStepProps as O, PauseOffer as P, ReasonConfig as Q, ReasonButtonProps as R, SuccessStepProps as S, RedirectOffer as T, ResolvedStep as U, Step as V, StructuralClassNames as W, SubscriptionStatus as X, SuccessClassNames as Y, SuccessStep as Z, SurveyClassNames as _, ConfirmStepProps as a, TrialExtensionOffer as a0, SurveyStepProps as b, CloseButtonProps as c, Appearance as d, AppearanceVariables as e, BuiltInOfferConfig as f, BuiltInStep as g, BuiltInStepType as h, ComponentOverrides as i, ConfirmClassNames as j, ConfirmStep as k, ContactOffer as l, CustomComponents as m, CustomOfferConfig as n, CustomOfferProps as o, CustomStepConfig as p, CustomStepProps as q, DirectCoupon as r, DirectCustomer as s, DirectPrice as t, DirectSubscription as u, DirectSubscriptionItem as v, DiscountOffer as w, FeedbackClassNames as x, FeedbackStep as y, FlowConfig as z };