@crediball/react 0.3.0 → 0.3.2

package/dist/CrediballProvider.js

@@ -2,10 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { PaywallModal } from "./PaywallModal";
+import { subscribeFetchWatcher } from "./fetchWatcher";
 const CrediballContext = createContext(null);
-// Symbol used to mark a patched fetch so double-mount in React Strict Mode (dev)
-// or a second <CrediballProvider> doesn't stack intercepts.
-const CREDIBALL_FETCH_PATCHED = Symbol.for("crediball.fetch.patched");
 /**
  * Pattern B, automated. Wrap your app once:
  *
@@ -22,46 +20,15 @@ const CREDIBALL_FETCH_PATCHED = Symbol.for("crediball.fetch.patched");
  */
 export function CrediballProvider({ children, amounts = [5, 10, 20], onTopup, watchFetch = true, allowCustom = false, customMin, customMax, currencySymbol = "€", title, description, accentColor, }) {
     const [open, setOpen] = useState(false);
-    // Stable callback refs so the fetch interceptor closure doesn't go stale.
     const showPaywall = useCallback(() => setOpen(true), []);
     const hidePaywall = useCallback(() => setOpen(false), []);
+    // Keep a ref so the fetch-watcher closure always calls the latest version.
     const showPaywallRef = useRef(showPaywall);
     showPaywallRef.current = showPaywall;
     useEffect(() => {
-        if (!watchFetch || typeof window === "undefined")
+        if (!watchFetch)
             return;
-        // If another provider (or a double-invoke from React Strict Mode) already
-        // patched this window.fetch in the same tick, skip — the cleanup will restore.
-        const win = window;
-        if (win[CREDIBALL_FETCH_PATCHED])
-            return;
-        const original = window.fetch;
-        win[CREDIBALL_FETCH_PATCHED] = true;
-        window.fetch = async (...args) => {
-            const res = await original(...args);
-            if (res.status === 402) {
-                // Clone so the original response body is still readable by the caller.
-                res
-                    .clone()
-                    .json()
-                    .then((body) => {
-                    if (body && body.code === "insufficient_credits") {
-                        showPaywallRef.current();
-                    }
-                })
-                    .catch(() => {
-                    // Non-JSON 402 (e.g. Stripe webhook): open paywall anyway since any
-                    // 402 from the app's own API routes is very likely a credit shortage.
-                    // If the app has other 402 uses, set watchFetch=false and call
-                    // showPaywall() manually.
-                });
-            }
-            return res;
-        };
-        return () => {
-            window.fetch = original;
-            delete win[CREDIBALL_FETCH_PATCHED];
-        };
+        return subscribeFetchWatcher(() => showPaywallRef.current());
     }, [watchFetch]);
     const ctx = useMemo(() => ({ showPaywall, hidePaywall, open }), [showPaywall, hidePaywall, open]);
     async function handleAdd(amount) {

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) {
@@ -65,7 +79,7 @@ export function PaywallModal({ open, packages, onSelectPackage, amounts = [5, 10
     return (_jsx("div", { role: "dialog", "aria-modal": "true", style: {
             position: "fixed",
             inset: 0,
-            zIndex: 1000,
+            zIndex: 2147483647,
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
@@ -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/fetchWatcher.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Module-level singleton that patches window.fetch once and fans out to all
+ * registered listeners (from CrediballProvider and/or usePaywall). Only one
+ * fetch patch exists at a time regardless of how many components subscribe.
+ * Reference-counted: the patch is removed when the last listener unsubscribes.
+ */
+type Listener = () => void;
+/**
+ * Subscribe to insufficient-credits 402 events detected in window.fetch.
+ * Returns an unsubscribe function — call it in your useEffect cleanup.
+ */
+export declare function subscribeFetchWatcher(listener: Listener): () => void;
+export {};

package/dist/fetchWatcher.js

@@ -0,0 +1,57 @@
+/**
+ * Module-level singleton that patches window.fetch once and fans out to all
+ * registered listeners (from CrediballProvider and/or usePaywall). Only one
+ * fetch patch exists at a time regardless of how many components subscribe.
+ * Reference-counted: the patch is removed when the last listener unsubscribes.
+ */
+let _original = null;
+const _listeners = new Set();
+function install() {
+    if (typeof window === "undefined" || _original !== null)
+        return;
+    _original = window.fetch;
+    window.fetch = async (...args) => {
+        const res = await _original(...args);
+        if (res.status === 402) {
+            res
+                .clone()
+                .json()
+                .then((body) => {
+                if (body != null &&
+                    typeof body === "object" &&
+                    body.code === "insufficient_credits") {
+                    _listeners.forEach((fn) => fn());
+                }
+            })
+                .catch(() => {
+                // Non-JSON 402. Fire listeners anyway — a 402 from the app's own API
+                // route is almost certainly a credit shortage. Set watchFetch=false
+                // and call trigger() manually if your app uses 402 for other purposes.
+                _listeners.forEach((fn) => fn());
+            });
+        }
+        return res;
+    };
+}
+function uninstall() {
+    if (typeof window === "undefined" || _original === null)
+        return;
+    window.fetch = _original;
+    _original = null;
+}
+/**
+ * Subscribe to insufficient-credits 402 events detected in window.fetch.
+ * Returns an unsubscribe function — call it in your useEffect cleanup.
+ */
+export function subscribeFetchWatcher(listener) {
+    if (typeof window === "undefined")
+        return () => { };
+    if (_listeners.size === 0)
+        install();
+    _listeners.add(listener);
+    return () => {
+        _listeners.delete(listener);
+        if (_listeners.size === 0)
+            uninstall();
+    };
+}

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

@@ -5,6 +5,19 @@ export type UsePaywallProps = Pick<PaywallModalProps, "amounts" | "amountPrefix"
     onTopup?: (amount: number) => void | Promise<void>;
     /** Called when the user picks a package from `packages`. */
     onSelectPackage?: (pkg: PackageOption) => void | Promise<void>;
+    /**
+     * Auto-detect HTTP 402 `insufficient_credits` responses from any fetch() call
+     * and open the paywall automatically. Defaults to false.
+     *
+     * 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.
+     */
+    watchFetch?: boolean;
 };
 export interface UsePaywallResult {
     /**
@@ -57,4 +70,4 @@ export interface UsePaywallResult {
  *
  *   return <div>...<button onClick={generate}>Generate</button>...{paywall}</div>;
  */
-export declare function usePaywall({ amounts, amountPrefix, packages, onTopup, onSelectPackage, allowCustom, customMin, customMax, currencySymbol, title, description, accentColor, balance, balanceRate, currency, }?: UsePaywallProps): UsePaywallResult;
+export declare function usePaywall({ amounts, amountPrefix, packages, onTopup, onSelectPackage, allowCustom, customMin, customMax, currencySymbol, title, description, accentColor, balance, balanceRate, currency, watchFetch, }?: UsePaywallProps): UsePaywallResult;

package/dist/usePaywall.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { PaywallModal } from "./PaywallModal";
+import { subscribeFetchWatcher } from "./fetchWatcher";
 /**
  * Manages a Crediball paywall modal with a simple, misuse-proof API.
  *
@@ -27,10 +28,18 @@ import { PaywallModal } from "./PaywallModal";
  *
  *   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, } = {}) {
+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), []);
+    // Keep a ref so the fetch-watcher closure always calls the latest trigger.
+    const triggerRef = useRef(trigger);
+    triggerRef.current = trigger;
+    useEffect(() => {
+        if (!watchFetch)
+            return;
+        return subscribeFetchWatcher(() => triggerRef.current());
+    }, [watchFetch]);
     const handleTopup = useCallback(async (amount) => {
         setIsOpen(false);
         await onTopup?.(amount);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/react",
-  "version": "0.3.0",
+  "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>",