@crediball/react 0.18.0 → 0.19.0

package/dist/CrediballProvider.d.ts

@@ -22,8 +22,12 @@ export interface CrediballProviderProps {
     lowCreditThreshold?: number;
     /**
      * Top-up amounts to offer in the paywall (host decides the meaning, e.g. euros).
-     * Match these to the packages you configured in the Crediball dashboard.
-     * Ignored once real packages are available (with publishableKey/userId set).
+     * Only used in data-less mode (no publishableKey/userId), where there's no
+     * dashboard catalog to fall back to and the host is fully responsible for
+     * `onTopup`. Ignored whenever publishableKey + userId are set — the paywall
+     * then shows your dashboard's real packages, or no top-up button at all if
+     * you haven't configured any yet, rather than a button that can't actually
+     * charge anything.
      */
     amounts?: number[];
     /**
@@ -88,7 +92,7 @@ export interface CrediballProviderProps {
     customMax?: number;
     /**
      * Show a "Have a promo code?" field in the paywall. Auto-derived from your
-     * dashboard's Growth → Promotions config: shown automatically once you have
+     * dashboard's Promos → Promotions config: shown automatically once you have
      * an active Checkout promotion, same as `allowCustom`/custom top-up. Pass
      * this only to override (e.g. `false` to force-hide it, or `true` to show it
      * before you've set one up). The code is passed through to

package/dist/CrediballProvider.js

@@ -291,14 +291,20 @@ export function CrediballProvider({ children, publishableKey, userId, apiUrl, po
     const effectiveCustomMin = customMin ?? customCfg?.minEur;
     const effectiveCustomMax = customMax ?? customCfg?.maxEur ?? undefined;
     // Same auto-derivation for the promo-code field: a developer who set up a
-    // Checkout promotion in Growth gets the field for free, no code change.
+    // Checkout promotion in Promos gets the field for free, no code change.
     const effectiveAllowPromoCode = allowPromoCode ?? pkgs?.hasActiveCheckoutPromotion ?? false;
     // Published theme → --crediball-* CSS vars, applied on a display:contents
     // wrapper so it themes every descendant (and the paywall) without adding a
     // layout box. Host props/CSS are overridden by design (dashboard wins).
     const themeVars = applyRemoteTheme ? themeToCssVars(uiTheme, resolvedColorScheme) : {};
     const hasThemeVars = Object.keys(themeVars).length > 0;
-    const inner = (_jsxs(_Fragment, { children: [children, _jsx(PaywallModal, { open: open, packages: pkgs?.packages, onSelectPackage: handleSelectPackage, subscriptionPlans: pkgs?.subscriptionPlans, onSelectPlan: handleSelectPlan, activeSubscription: pkgs?.activeSubscription, onCancelSubscription: onCancelSubscription ? handleCancelSubscription : undefined, autoTopup: pkgs?.autoTopup, onEnableAutoTopup: handleEnableAutoTopup, amounts: amounts, amountPrefix: `Add ${currencySymbol}`, onAdd: handleAdd, onClose: hidePaywall, allowCustom: effectiveAllowCustom, customMin: effectiveCustomMin, customMax: effectiveCustomMax, allowPromoCode: effectiveAllowPromoCode, promoCodeLabel: promoCodeLabel, customTopupRate: pkgs?.customTopup.enabled ? pkgs.customTopup.rate : undefined, currencySymbol: currencySymbol, balance: snapshot.balance ?? undefined, balanceRate: pkgs?.customTopup.enabled ? pkgs.customTopup.rate : undefined, currency: pkgs?.currency, usage: snapshot.usage?.usedCredits ?? undefined, title: title ?? uiContent?.paywallTitle, description: description ?? uiContent?.paywallDescription, addButtonText: uiContent?.paywallButtonText, referralLink: referral?.link ?? undefined, referralReward: referral?.rewardCredits, referredReward: referral?.referredRewardCredits, referralLabel: uiContent?.referralLabel, checkoutError: checkoutError, accentColor: accentColor })] }));
+    const inner = (_jsxs(_Fragment, { children: [children, _jsx(PaywallModal, { open: open, packages: pkgs?.packages, onSelectPackage: handleSelectPackage, subscriptionPlans: pkgs?.subscriptionPlans, onSelectPlan: handleSelectPlan, activeSubscription: pkgs?.activeSubscription, onCancelSubscription: onCancelSubscription ? handleCancelSubscription : undefined, autoTopup: pkgs?.autoTopup, onEnableAutoTopup: handleEnableAutoTopup, 
+                // Connected to live dashboard data: the legacy flat-amounts fallback
+                // only makes sense when there's no catalog to consult at all (see the
+                // `amounts` prop doc). Once a client exists, no packages configured
+                // means no top-up button — never a button whose checkout is
+                // guaranteed to fail.
+                amounts: client ? [] : amounts, amountPrefix: `Add ${currencySymbol}`, onAdd: handleAdd, onClose: hidePaywall, allowCustom: effectiveAllowCustom, customMin: effectiveCustomMin, customMax: effectiveCustomMax, allowPromoCode: effectiveAllowPromoCode, promoCodeLabel: promoCodeLabel, customTopupRate: pkgs?.customTopup.enabled ? pkgs.customTopup.rate : undefined, currencySymbol: currencySymbol, balance: snapshot.balance ?? undefined, balanceRate: pkgs?.customTopup.enabled ? pkgs.customTopup.rate : undefined, currency: pkgs?.currency, usage: snapshot.usage?.usedCredits ?? undefined, title: title ?? uiContent?.paywallTitle, description: description ?? uiContent?.paywallDescription, addButtonText: uiContent?.paywallButtonText, referralLink: referral?.link ?? undefined, referralReward: referral?.rewardCredits, referredReward: referral?.referredRewardCredits, referralLabel: uiContent?.referralLabel, checkoutError: checkoutError, accentColor: accentColor })] }));
     const configCtx = useMemo(() => ({ publishableKey, userId, apiUrl }), [publishableKey, userId, apiUrl]);
     return (_jsx(CrediballContext.Provider, { value: ctx, children: _jsx(CrediballConfigContext.Provider, { value: configCtx, children: hasThemeVars ? (_jsx("div", { style: { display: "contents", ...themeVars }, children: inner })) : (inner) }) }));
 }

package/package.json

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