@crediball/react 0.3.1 → 0.3.2

package/dist/PaywallModal.d.ts

@@ -7,6 +7,21 @@ export interface PackageOption {
     price: number;
     credits: number;
 }
+/** A recurring subscription plan (returned by listPackages()). */
+export interface SubscriptionPlanOption {
+    id: string;
+    name: string;
+    price: number;
+    credits: number;
+    period: "monthly" | "yearly";
+}
+/** The end user's current active subscription (returned by listPackages() with userId). */
+export interface ActiveSubscriptionInfo {
+    subscriptionId: string;
+    planName: string;
+    planPeriod: string;
+    currentPeriodEnd: string;
+}
 export interface PaywallModalProps extends CrediballThemeOverrides {
     open: boolean;
     /**
@@ -21,6 +36,28 @@ export interface PaywallModalProps extends CrediballThemeOverrides {
      * calculation needed; Crediball derives it from the package.
      */
     onSelectPackage?: (pkg: PackageOption) => void;
+    /**
+     * Subscription plans from `meter.listPackages()`. When provided (and the user
+     * has no active subscription), the modal shows a "Subscribe" section above
+     * one-time packages.
+     */
+    subscriptionPlans?: SubscriptionPlanOption[];
+    /**
+     * Called when the user selects a subscription plan. Call
+     * `meter.subscribe({ userId, planId: plan.id })` in your backend.
+     */
+    onSelectPlan?: (plan: SubscriptionPlanOption) => void;
+    /**
+     * The end user's active subscription (from `meter.listPackages({ userId })`).
+     * When provided, the subscription section is replaced by a subscription-status
+     * banner and a cancel option.
+     */
+    activeSubscription?: ActiveSubscriptionInfo | null;
+    /**
+     * Called when the user clicks "Cancel subscription" in the paywall.
+     * Call `meter.cancelSubscription({ userId, subscriptionId })` in your backend.
+     */
+    onCancelSubscription?: (subscriptionId: string) => void | Promise<void>;
     /**
      * Legacy: flat list of euro amounts. Prefer `packages` + `onSelectPackage`.
      * When both are provided, `packages` takes precedence.
@@ -52,4 +89,4 @@ export interface PaywallModalProps extends CrediballThemeOverrides {
     currency?: string;
     style?: CSSProperties;
 }
-export declare function PaywallModal({ open, packages, onSelectPackage, amounts, amountPrefix, title, description, onAdd, onClose, allowCustom, customMin, customMax, currencySymbol, balance, balanceRate, currency, accentColor, style, }: PaywallModalProps): import("react").JSX.Element | null;
+export declare function PaywallModal({ open, packages, onSelectPackage, subscriptionPlans, onSelectPlan, activeSubscription, onCancelSubscription, amounts, amountPrefix, title, description, onAdd, onClose, allowCustom, customMin, customMax, currencySymbol, balance, balanceRate, currency, accentColor, style, }: PaywallModalProps): import("react").JSX.Element | null;

package/dist/PaywallModal.js

@@ -17,11 +17,13 @@ function fmtMoney(n, currency) {
         return `${n.toFixed(2)} ${currency}`;
     }
 }
-export function PaywallModal({ open, packages, onSelectPackage, amounts = [5, 10], amountPrefix = "Add €", title = "You need more credits to continue.", description = "Top up to keep using this feature.", onAdd, onClose, allowCustom = false, customMin = 1, customMax, currencySymbol = "€", balance, balanceRate, currency = "EUR", accentColor = tokens.primary, style, }) {
+export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlans, onSelectPlan, activeSubscription, onCancelSubscription, amounts = [5, 10], amountPrefix = "Add €", title = "You need more credits to continue.", description = "Top up to keep using this feature.", onAdd, onClose, allowCustom = false, customMin = 1, customMax, currencySymbol = "€", balance, balanceRate, currency = "EUR", accentColor = tokens.primary, style, }) {
     // Stack the top-up buttons one-per-line on narrow (mobile) screens.
     const [narrow, setNarrow] = useState(false);
     const [customValue, setCustomValue] = useState("");
     const [customError, setCustomError] = useState(null);
+    const [cancelPending, setCancelPending] = useState(false);
+    const [cancelDone, setCancelDone] = useState(false);
     useEffect(() => {
         if (typeof window === "undefined" || !window.matchMedia)
             return;
@@ -33,6 +35,18 @@ export function PaywallModal({ open, packages, onSelectPackage, amounts = [5, 10
     }, []);
     if (!open)
         return null;
+    async function handleCancelSubscription() {
+        if (!activeSubscription || cancelPending)
+            return;
+        setCancelPending(true);
+        try {
+            await onCancelSubscription?.(activeSubscription.subscriptionId);
+            setCancelDone(true);
+        }
+        finally {
+            setCancelPending(false);
+        }
+    }
     function submitCustom() {
         const amt = Number(customValue);
         if (!Number.isFinite(amt) || amt <= 0) {
@@ -90,14 +104,57 @@ export function PaywallModal({ open, packages, onSelectPackage, amounts = [5, 10
                                 textTransform: "uppercase",
                                 color: tokens.inkMuted,
                                 marginBottom: 4,
-                            }, children: "Your balance" }), _jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }, children: [_jsxs("span", { style: { fontSize: 22, fontWeight: 600, color: tokens.ink }, children: [fmtCredits(balance), " credits"] }), balanceRate && balanceRate > 0 ? (_jsxs("span", { style: { fontSize: 13, color: tokens.inkMuted }, children: ["\u2248 ", fmtMoney(balance / balanceRate, currency)] })) : null] })] })), _jsx("h3", { style: { margin: 0, fontSize: 24, fontWeight: 600, color: tokens.ink, letterSpacing: "-0.01em" }, children: title }), _jsx("p", { style: { marginTop: 8, marginBottom: 0, fontSize: 14, color: tokens.inkMuted }, children: description }), _jsx("div", { style: {
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: 10,
-                        marginTop: 24,
-                    }, children: packages && packages.length > 0
-                        ? packages.map((pkg) => (_jsxs("button", { onClick: () => onSelectPackage?.(pkg), style: { ...buttonStyle, flex: "none", display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [_jsx("span", { children: pkg.name }), _jsxs("span", { style: { opacity: 0.85, fontSize: 14 }, children: [fmtMoney(pkg.price, currency), " \u00B7 ", fmtCredits(pkg.credits), " cr"] })] }, pkg.id)))
-                        : (_jsx("div", { style: { display: "flex", flexDirection: narrow ? "column" : "row", gap: 12 }, children: amounts.map((amount) => (_jsxs("button", { onClick: () => onAdd?.(amount), style: buttonStyle, children: [amountPrefix, amount] }, amount))) })) }), allowCustom ? (_jsxs("div", { style: { marginTop: 12 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [_jsx("span", { style: { fontSize: 17, color: tokens.inkMuted }, children: currencySymbol }), _jsx("input", { value: customValue, onChange: (e) => setCustomValue(e.target.value), inputMode: "decimal", placeholder: String(customMin), style: {
+                            }, children: "Your balance" }), _jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }, children: [_jsxs("span", { style: { fontSize: 22, fontWeight: 600, color: tokens.ink }, children: [fmtCredits(balance), " credits"] }), balanceRate && balanceRate > 0 ? (_jsxs("span", { style: { fontSize: 13, color: tokens.inkMuted }, children: ["\u2248 ", fmtMoney(balance / balanceRate, currency)] })) : null] })] })), _jsx("h3", { style: { margin: 0, fontSize: 24, fontWeight: 600, color: tokens.ink, letterSpacing: "-0.01em" }, children: activeSubscription
+                        ? "You've used all your credits for this period."
+                        : title }), _jsx("p", { style: { marginTop: 8, marginBottom: 0, fontSize: 14, color: tokens.inkMuted }, children: activeSubscription
+                        ? `Your ${activeSubscription.planName} credits renew on ${new Date(activeSubscription.currentPeriodEnd).toLocaleDateString()}.`
+                        : description }), activeSubscription && (_jsxs("div", { style: {
+                        marginTop: 16,
+                        padding: "12px 16px",
+                        borderRadius: tokens.radiusCard,
+                        background: "#f5f5f7",
+                        border: `1px solid ${tokens.hairline}`,
+                    }, children: [_jsx("div", { style: { fontSize: 13, fontWeight: 600, color: tokens.ink }, children: cancelDone ? "Subscription canceled" : `${activeSubscription.planName} · ${activeSubscription.planPeriod}` }), !cancelDone && (_jsx("button", { onClick: handleCancelSubscription, disabled: cancelPending, style: {
+                                marginTop: 8,
+                                appearance: "none",
+                                border: "none",
+                                background: "transparent",
+                                cursor: cancelPending ? "default" : "pointer",
+                                padding: 0,
+                                fontSize: 13,
+                                color: tokens.inkMuted,
+                                fontFamily: tokens.fontStack,
+                                textDecoration: "underline",
+                            }, children: cancelPending ? "Canceling…" : "Cancel subscription" }))] })), !activeSubscription && subscriptionPlans && subscriptionPlans.length > 0 && (_jsxs("div", { style: { marginTop: 24 }, children: [_jsx("div", { style: {
+                                fontSize: 11,
+                                fontWeight: 600,
+                                letterSpacing: "0.06em",
+                                textTransform: "uppercase",
+                                color: tokens.inkMuted,
+                                marginBottom: 8,
+                            }, children: "Subscribe" }), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: subscriptionPlans.map((plan) => (_jsxs("button", { onClick: () => onSelectPlan?.(plan), style: {
+                                    ...buttonStyle,
+                                    flex: "none",
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    alignItems: "center",
+                                }, children: [_jsx("span", { children: plan.name }), _jsxs("span", { style: { opacity: 0.85, fontSize: 14 }, children: [fmtMoney(plan.price, currency), "/", plan.period === "monthly" ? "mo" : "yr", " \u00B7 ", fmtCredits(plan.credits), " cr"] })] }, plan.id))) })] })), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 24 }, children: [(!activeSubscription && subscriptionPlans && subscriptionPlans.length > 0) && (_jsx("div", { style: {
+                                fontSize: 11,
+                                fontWeight: 600,
+                                letterSpacing: "0.06em",
+                                textTransform: "uppercase",
+                                color: tokens.inkMuted,
+                                marginBottom: -2,
+                            }, children: activeSubscription ? "Add extra credits" : "Or buy credits" })), activeSubscription && packages && packages.length > 0 && (_jsx("div", { style: {
+                                fontSize: 11,
+                                fontWeight: 600,
+                                letterSpacing: "0.06em",
+                                textTransform: "uppercase",
+                                color: tokens.inkMuted,
+                                marginBottom: -2,
+                            }, children: "Add extra credits" })), packages && packages.length > 0
+                            ? packages.map((pkg) => (_jsxs("button", { onClick: () => onSelectPackage?.(pkg), style: { ...buttonStyle, flex: "none", display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [_jsx("span", { children: pkg.name }), _jsxs("span", { style: { opacity: 0.85, fontSize: 14 }, children: [fmtMoney(pkg.price, currency), " \u00B7 ", fmtCredits(pkg.credits), " cr"] })] }, pkg.id)))
+                            : (!activeSubscription && (_jsx("div", { style: { display: "flex", flexDirection: narrow ? "column" : "row", gap: 12 }, children: amounts.map((amount) => (_jsxs("button", { onClick: () => onAdd?.(amount), style: buttonStyle, children: [amountPrefix, amount] }, amount))) })))] }), allowCustom ? (_jsxs("div", { style: { marginTop: 12 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [_jsx("span", { style: { fontSize: 17, color: tokens.inkMuted }, children: currencySymbol }), _jsx("input", { value: customValue, onChange: (e) => setCustomValue(e.target.value), inputMode: "decimal", placeholder: String(customMin), style: {
                                         flex: 1,
                                         minWidth: 0,
                                         appearance: "none",

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { CreditsBadge, type CreditsBadgeProps } from "./CreditsBadge";
-export { PaywallModal, type PaywallModalProps, type PackageOption } from "./PaywallModal";
+export { PaywallModal, type PaywallModalProps, type PackageOption, type SubscriptionPlanOption, type ActiveSubscriptionInfo, } from "./PaywallModal";
 export { CreditIndicator, type CreditIndicatorProps } from "./CreditIndicator";
 export { CrediballProvider, useCrediball, type CrediballProviderProps, } from "./CrediballProvider";
 export { usePaywall, type UsePaywallProps, type UsePaywallResult, } from "./usePaywall";

package/dist/index.js

@@ -1,7 +1,7 @@
 // @crediball/react — drop-in, self-contained components for showing credits
 // inside a host AI app. No Crediball branding, no end-user login, no Tailwind.
 export { CreditsBadge } from "./CreditsBadge";
-export { PaywallModal } from "./PaywallModal";
+export { PaywallModal, } from "./PaywallModal";
 export { CreditIndicator } from "./CreditIndicator";
 export { CrediballProvider, useCrediball, } from "./CrediballProvider";
 export { usePaywall, } from "./usePaywall";

package/dist/usePaywall.d.ts

@@ -7,10 +7,12 @@ export type UsePaywallProps = Pick<PaywallModalProps, "amounts" | "amountPrefix"
     onSelectPackage?: (pkg: PackageOption) => void | Promise<void>;
     /**
      * Auto-detect HTTP 402 `insufficient_credits` responses from any fetch() call
-     * and open the paywall automatically. Defaults to true.
+     * and open the paywall automatically. Defaults to false.
      *
-     * Set to false if your app uses <CrediballProvider> (it already watches fetch)
-     * or if you want to trigger the paywall exclusively via trigger().
+     * Set to true only if you are NOT using <CrediballProvider> and want automatic
+     * interception. If your app already wraps with <CrediballProvider watchFetch>
+     * (the recommended pattern), leave this false — double-patching is harmless
+     * but unnecessary.
      *
      * Note: SSE/streaming routes surface credit errors as stream events (HTTP 200),
      * not HTTP 402 — call trigger() manually from your stream error handler.

package/dist/usePaywall.js

@@ -28,7 +28,7 @@ import { subscribeFetchWatcher } from "./fetchWatcher";
  *
  *   return <div>...<button onClick={generate}>Generate</button>...{paywall}</div>;
  */
-export function usePaywall({ amounts, amountPrefix, packages, onTopup, onSelectPackage, allowCustom, customMin, customMax, currencySymbol, title, description, accentColor, balance, balanceRate, currency, watchFetch = true, } = {}) {
+export function usePaywall({ amounts, amountPrefix, packages, onTopup, onSelectPackage, allowCustom, customMin, customMax, currencySymbol, title, description, accentColor, balance, balanceRate, currency, watchFetch = false, } = {}) {
     const [isOpen, setIsOpen] = useState(false);
     const trigger = useCallback(() => setIsOpen(true), []);
     const dismiss = useCallback(() => setIsOpen(false), []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/react",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Drop-in React components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",