@crediball/react 0.15.0 → 0.17.0

package/dist/CrediballProvider.js

@@ -65,6 +65,11 @@ function symbolForCurrency(iso) {
  */
 export function CrediballProvider({ children, publishableKey, userId, apiUrl, pollIntervalMs, lowCreditThreshold, amounts = [5, 10, 20], onTopup, onSelectPackage, onSelectPlan, onCancelSubscription, onEnableAutoTopup, watchFetch = true, allowCustom, customMin, customMax, allowPromoCode, promoCodeLabel, currencySymbol: currencySymbolProp, title, description, accentColor, applyRemoteTheme = true, captureReferrals = true, }) {
     const [open, setOpen] = useState(false);
+    // Surfaced in the paywall itself (not just the console) when the built-in
+    // checkout fails — e.g. an invalid/expired promo code — so a user isn't
+    // left clicking a "dead" button with no visible feedback. Cleared at the
+    // start of every attempt so it always reflects the latest one.
+    const [checkoutError, setCheckoutError] = useState(null);
     // Referral auto-capture: pick up a `?ref=CODE` visit into localStorage (and
     // count the click) as soon as the provider mounts — the visitor usually has
     // no account yet at this point.
@@ -104,7 +109,10 @@ export function CrediballProvider({ children, publishableKey, userId, apiUrl, po
             cancelled = true;
         };
     }, [publishableKey, userId, apiUrl]);
-    const showPaywall = useCallback(() => setOpen(true), []);
+    const showPaywall = useCallback(() => {
+        setCheckoutError(null);
+        setOpen(true);
+    }, []);
     const hidePaywall = useCallback(() => setOpen(false), []);
     // Keep a ref so the fetch-watcher closure always calls the latest version.
     const showPaywallRef = useRef(showPaywall);
@@ -209,11 +217,13 @@ export function CrediballProvider({ children, publishableKey, userId, apiUrl, po
             return;
         }
         if (client) {
+            setCheckoutError(null);
             try {
                 await builtIn();
             }
             catch (err) {
                 console.error(`[crediball] ${errorLabel} failed:`, err);
+                setCheckoutError(err instanceof Error ? err.message : `Could not start ${errorLabel}. Please try again.`);
             }
             return;
         }
@@ -269,7 +279,7 @@ export function CrediballProvider({ children, publishableKey, userId, apiUrl, po
     // layout box. Host props/CSS are overridden by design (dashboard wins).
     const themeVars = applyRemoteTheme ? themeToCssVars(uiTheme) : {};
     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, referralLabel: uiContent?.referralLabel, 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, 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 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/dist/PaywallModal.d.ts

@@ -100,6 +100,13 @@ export interface PaywallModalProps extends CrediballThemeOverrides {
      * the promo code the user entered, same as `onSelectPackage`'s. */
     onAdd?: (amount: number, code?: string) => void;
     onClose?: () => void;
+    /**
+     * An error from the last checkout attempt (e.g. "Invalid or expired promo
+     * code.") to show inline, so a failed purchase isn't silently invisible.
+     * Wired automatically by <CrediballProvider> when its built-in checkout
+     * fails; pass it yourself when using the modal standalone.
+     */
+    checkoutError?: string | null;
     /** When true, show a free-form amount field in addition to the preset buttons. */
     allowCustom?: boolean;
     /**
@@ -154,9 +161,18 @@ export interface PaywallModalProps extends CrediballThemeOverrides {
     /** Credits earned per successful referral, shown in the refer-a-friend blurb. */
     referralReward?: number;
     /**
-     * Label above the referral link. `{credits}` is replaced with `referralReward`.
-     * Default "Refer a friend · earn {credits} credits". Shown as written (not
-     * uppercased), so lowercase/sentence case is preserved.
+     * Credits the referred friend earns, shown alongside `referralReward` in the
+     * refer-a-friend blurb (0/undefined omits that clause). Wired automatically
+     * by <CrediballProvider> when referrals are enabled in the dashboard.
+     */
+    referredReward?: number;
+    /**
+     * Label above the referral link. `{credits}` is replaced with `referralReward`,
+     * `{referredCredits}` with `referredReward`. A `\n` renders as a line break.
+     * Defaults to a two-line "Refer a friend.\nYou earn {credits} credits and
+     * your friend {referredCredits} credits" when `referredReward` is set, or a
+     * single-line "Refer a friend · earn {credits} credits" otherwise. Shown as
+     * written (not uppercased), so lowercase/sentence case is preserved.
      */
     referralLabel?: string;
     style?: CSSProperties;
@@ -166,4 +182,4 @@ export interface PaywallModalProps extends CrediballThemeOverrides {
  * continue. The host controls when it appears; shows a small "Powered by
  * Crediball" line by default (set `hideBranding` to remove it).
  */
-export declare function PaywallModal({ open, packages, onSelectPackage, subscriptionPlans, onSelectPlan, activeSubscription, onCancelSubscription, autoTopup, onEnableAutoTopup, amounts, amountPrefix, title, description, onAdd, onClose, allowCustom, allowPromoCode, promoCodeLabel, addButtonText, customMin, customMax, customTopupRate, currencySymbol, balance, balanceRate, currency, usage, usageLabel, hideBranding, referralLink, referralReward, referralLabel, accentColor, style, }: PaywallModalProps): import("react").JSX.Element | null;
+export declare function PaywallModal({ open, packages, onSelectPackage, subscriptionPlans, onSelectPlan, activeSubscription, onCancelSubscription, autoTopup, onEnableAutoTopup, amounts, amountPrefix, title, description, onAdd, onClose, checkoutError, allowCustom, allowPromoCode, promoCodeLabel, addButtonText, customMin, customMax, customTopupRate, currencySymbol, balance, balanceRate, currency, usage, usageLabel, hideBranding, referralLink, referralReward, referredReward, referralLabel, accentColor, style, }: PaywallModalProps): import("react").JSX.Element | null;

package/dist/PaywallModal.js

@@ -9,13 +9,12 @@ const PERIOD_SUFFIX = {
     monthly: "mo",
     yearly: "yr",
 };
-/** Shared uppercase eyebrow-label style used above the subscribe/buy-credits sections. */
+/** Shared eyebrow-label style used above the subscribe/buy-credits sections. */
 function sectionLabelStyle(marginBottom) {
     return {
         fontSize: 11,
         fontWeight: 600,
         letterSpacing: "0.06em",
-        textTransform: "uppercase",
         color: theme.inkMuted,
         marginBottom,
     };
@@ -25,7 +24,7 @@ function sectionLabelStyle(marginBottom) {
  * continue. The host controls when it appears; shows a small "Powered by
  * Crediball" line by default (set `hideBranding` to remove it).
  */
-export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlans, onSelectPlan, activeSubscription, onCancelSubscription, autoTopup, onEnableAutoTopup, amounts = [5, 10], amountPrefix = "Add €", title = "You need more credits to continue.", description = "Top up to keep using this feature.", onAdd, onClose, allowCustom = false, allowPromoCode = false, promoCodeLabel = "Have a promo code?", addButtonText = "Add", customMin = 1, customMax, customTopupRate, currencySymbol = "€", balance, balanceRate, currency = "EUR", usage, usageLabel = "Usage", hideBranding = false, referralLink, referralReward, referralLabel = "Refer a friend · earn {credits} credits", accentColor, style, }) {
+export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlans, onSelectPlan, activeSubscription, onCancelSubscription, autoTopup, onEnableAutoTopup, amounts = [5, 10], amountPrefix = "Add €", title = "You need more credits to continue.", description = "Top up to keep using this feature.", onAdd, onClose, checkoutError, allowCustom = false, allowPromoCode = false, promoCodeLabel = "Have a promo code?", addButtonText = "Add", customMin = 1, customMax, customTopupRate, currencySymbol = "€", balance, balanceRate, currency = "EUR", usage, usageLabel = "Usage", hideBranding = false, referralLink, referralReward, referredReward, referralLabel, accentColor, style, }) {
     // Stack the top-up buttons one-per-line when the dialog itself is narrow.
     // Measured off the dialog's own box (via ResizeObserver) rather than the
     // window — in normal use the two are the same width, but this also makes
@@ -43,6 +42,7 @@ export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlan
     const [autoTopupThreshold, setAutoTopupThreshold] = useState("");
     const [promoCodeOpen, setPromoCodeOpen] = useState(false);
     const [promoCode, setPromoCode] = useState("");
+    const [promoCodeTouched, setPromoCodeTouched] = useState(false);
     useEffect(() => {
         const el = overlayRef.current;
         if (!el || typeof ResizeObserver === "undefined")
@@ -90,6 +90,10 @@ export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlan
         const trimmed = promoCode.trim();
         return trimmed || undefined;
     }
+    // Format-only — whether the code is actually active/redeemable is only known
+    // server-side when a purchase is made (see enteredCode()'s callers). This
+    // just catches an obvious typo/paste mistake before then.
+    const promoCodeFormatValid = !promoCode.trim() || /^[A-Z0-9_-]+$/.test(promoCode.trim());
     function submitCustom() {
         const amt = Number(customValue);
         if (!Number.isFinite(amt) || amt <= 0) {
@@ -127,7 +131,37 @@ export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlan
         padding: "8px 16px",
         borderRadius: theme.radiusPill,
     };
-    const resolvedReferralLabel = referralLabel.replace("{credits}", formatCredits(referralReward ?? 0));
+    // Package/plan buttons: name + credits stacked on the left, price on the right.
+    const optionButtonStyle = {
+        ...buttonStyle,
+        flex: "none",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 16,
+        padding: "10px 16px",
+    };
+    const optionLeftStyle = {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        flex: 1,
+        minWidth: 0,
+    };
+    const optionNameStyle = { fontSize: 17, fontWeight: 600, lineHeight: 1.2 };
+    const optionCreditsStyle = { fontSize: 13, opacity: 0.85, lineHeight: 1.2 };
+    const optionPriceStyle = {
+        fontSize: 17,
+        fontWeight: 600,
+        whiteSpace: "nowrap",
+        flexShrink: 0,
+    };
+    const defaultReferralLabel = referredReward != null && referredReward > 0
+        ? "Refer a friend.\nYou earn {credits} credits and your friend {referredCredits} credits"
+        : "Refer a friend · earn {credits} credits";
+    const resolvedReferralLabel = (referralLabel ?? defaultReferralLabel)
+        .replace("{credits}", formatCredits(referralReward ?? 0))
+        .replace("{referredCredits}", formatCredits(referredReward ?? 0));
     // Same rounding the actual charge uses (see /api/public/topup/checkout),
     // so this preview never promises a different number than what's granted.
     const customAmountParsed = Number(customValue);
@@ -154,6 +188,18 @@ export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlan
         }, onClick: onClose, children: _jsxs("div", { onClick: (e) => e.stopPropagation(), style: {
                 width: "100%",
                 maxWidth: 420,
+                // Cap the card to the overlay's own (already viewport-correct, since
+                // it's `position: fixed; inset: 0`) content box, and let it scroll
+                // internally past that — otherwise a host enabling many optional
+                // sections (balance, subscribe, promo code, packages, custom amount,
+                // auto top-up, referral) can produce a card taller than the mobile
+                // viewport, which the centered overlay then clips top and bottom
+                // with no way to reach the rest.
+                maxHeight: "100%",
+                overflowY: "auto",
+                WebkitOverflowScrolling: "touch",
+                overscrollBehavior: "contain",
+                boxSizing: "border-box",
                 padding: 32,
                 borderRadius: theme.radiusCard,
                 background: theme.canvas,
@@ -171,7 +217,7 @@ export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlan
                         ? "You've used all your credits for this period."
                         : title }), _jsx("p", { style: { marginTop: 8, marginBottom: 0, fontSize: 13, color: theme.inkMuted }, children: activeSubscription
                         ? `Your ${activeSubscription.planName} credits renew on ${new Date(activeSubscription.currentPeriodEnd).toLocaleDateString()}.`
-                        : description }), activeSubscription && (_jsxs("div", { style: {
+                        : description }), checkoutError ? (_jsx("p", { style: { marginTop: 12, marginBottom: 0, fontSize: 13, color: theme.accent }, children: checkoutError })) : null, activeSubscription && (_jsxs("div", { style: {
                         marginTop: 16,
                         padding: "12px 16px",
                         borderRadius: theme.radiusCard,
@@ -188,13 +234,22 @@ export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlan
                                 color: theme.inkMuted,
                                 fontFamily: theme.font,
                                 textDecoration: "underline",
-                            }, children: cancelPending ? "Canceling…" : "Cancel subscription" }))] })), !activeSubscription && subscriptionPlans && subscriptionPlans.length > 0 && (_jsxs("div", { style: { marginTop: 24 }, children: [_jsx("div", { style: sectionLabelStyle(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: [formatMoney(plan.price, currency), "/", PERIOD_SUFFIX[plan.period], " \u00B7 ", formatCredits(plan.credits), " cr"] })] }, plan.id))) })] })), allowPromoCode && !activeSubscription && (_jsx("div", { style: { marginTop: 16 }, children: promoCodeOpen ? (_jsxs("div", { children: [_jsx("div", { style: { ...sectionLabelStyle(6) }, children: promoCodeLabel }), _jsx("input", { value: promoCode, onChange: (e) => setPromoCode(e.target.value.toUpperCase()), placeholder: "PROMOCODE", style: {
+                            }, children: cancelPending ? "Canceling…" : "Cancel subscription" }))] })), !activeSubscription && subscriptionPlans && subscriptionPlans.length > 0 && (_jsxs("div", { style: { marginTop: 24 }, children: [_jsx("div", { style: sectionLabelStyle(8), children: "Subscribe" }), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: subscriptionPlans.map((plan) => (_jsxs("button", { onClick: () => onSelectPlan?.(plan), style: optionButtonStyle, children: [_jsxs("span", { style: optionLeftStyle, children: [_jsx("span", { style: optionNameStyle, children: plan.name }), _jsxs("span", { style: optionCreditsStyle, children: [formatCredits(plan.credits), " credits"] })] }), _jsxs("span", { style: optionPriceStyle, children: [formatMoney(plan.price, currency), "/", PERIOD_SUFFIX[plan.period]] })] }, plan.id))) })] })), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 24 }, children: [(!activeSubscription && subscriptionPlans && subscriptionPlans.length > 0) && (_jsx("div", { style: sectionLabelStyle(-2), children: "Or buy credits" })), activeSubscription && packages && packages.length > 0 && (_jsx("div", { style: sectionLabelStyle(-2), children: "Add extra credits" })), packages && packages.length > 0
+                            ? packages.map((pkg) => (_jsxs("button", { onClick: () => onSelectPackage?.(pkg, enteredCode()), style: optionButtonStyle, children: [_jsxs("span", { style: optionLeftStyle, children: [_jsx("span", { style: optionNameStyle, children: pkg.name }), _jsxs("span", { style: optionCreditsStyle, children: [formatCredits(pkg.credits), " credits"] })] }), _jsx("span", { style: optionPriceStyle, children: formatMoney(pkg.price, currency) })] }, pkg.id)))
+                            : (!activeSubscription && (_jsx("div", { style: { display: "flex", flexDirection: narrow ? "column" : "row", gap: 12 }, children: amounts.map((amount) => (_jsxs("button", { onClick: () => onAdd?.(amount, enteredCode()), 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: 14, color: theme.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",
+                                        fontFamily: theme.font,
+                                        fontSize: 14,
+                                        lineHeight: "20px",
+                                        padding: "8px 12px",
+                                        borderRadius: theme.radiusPill,
+                                        border: `1px solid ${theme.hairline}`,
+                                        color: theme.ink,
+                                        background: theme.canvas,
+                                        outline: "none",
+                                    } }), _jsx("button", { onClick: submitCustom, style: { ...buttonStyle, flex: "none" }, children: addButtonText })] }), customCreditsPreview != null ? (_jsxs("p", { style: { margin: "6px 0 0", fontSize: 12, color: theme.inkMuted }, children: ["\u2248 ", formatCredits(customCreditsPreview), " credits"] })) : null, customError ? (_jsx("p", { style: { margin: "8px 0 0", fontSize: 13, color: theme.accent }, children: customError })) : null] })) : null, allowPromoCode && !activeSubscription && (_jsx("div", { style: { marginTop: 16 }, children: promoCodeOpen ? (_jsxs("div", { children: [_jsx("div", { style: { ...sectionLabelStyle(6) }, children: promoCodeLabel }), _jsx("input", { value: promoCode, onChange: (e) => setPromoCode(e.target.value.toUpperCase()), onBlur: () => setPromoCodeTouched(true), placeholder: "PROMOCODE", style: {
                                     width: "100%",
                                     boxSizing: "border-box",
                                     appearance: "none",
@@ -203,11 +258,11 @@ export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlan
                                     lineHeight: "20px",
                                     padding: "8px 12px",
                                     borderRadius: theme.radiusPill,
-                                    border: `1px solid ${theme.hairline}`,
+                                    border: `1px solid ${promoCodeTouched && !promoCodeFormatValid ? theme.accent : theme.hairline}`,
                                     color: theme.ink,
                                     background: theme.canvas,
                                     outline: "none",
-                                } })] })) : (_jsx("button", { onClick: () => setPromoCodeOpen(true), style: {
+                                } }), promoCodeTouched && !promoCodeFormatValid ? (_jsx("p", { style: { margin: "6px 0 0", fontSize: 12, color: theme.accent }, children: "Promo codes only contain letters, numbers, - and _." })) : null] })) : (_jsx("button", { onClick: () => setPromoCodeOpen(true), style: {
                             appearance: "none",
                             border: "none",
                             background: "transparent",
@@ -217,22 +272,7 @@ export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlan
                             color: theme.inkMuted,
                             fontFamily: theme.font,
                             textDecoration: "underline",
-                        }, children: promoCodeLabel })) })), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 24 }, children: [(!activeSubscription && subscriptionPlans && subscriptionPlans.length > 0) && (_jsx("div", { style: sectionLabelStyle(-2), children: "Or buy credits" })), activeSubscription && packages && packages.length > 0 && (_jsx("div", { style: sectionLabelStyle(-2), children: "Add extra credits" })), packages && packages.length > 0
-                            ? packages.map((pkg) => (_jsxs("button", { onClick: () => onSelectPackage?.(pkg, enteredCode()), 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: [formatMoney(pkg.price, currency), " \u00B7 ", formatCredits(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, enteredCode()), 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: 14, color: theme.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",
-                                        fontFamily: theme.font,
-                                        fontSize: 14,
-                                        lineHeight: "20px",
-                                        padding: "8px 12px",
-                                        borderRadius: theme.radiusPill,
-                                        border: `1px solid ${theme.hairline}`,
-                                        color: theme.ink,
-                                        background: theme.canvas,
-                                        outline: "none",
-                                    } }), _jsx("button", { onClick: submitCustom, style: { ...buttonStyle, flex: "none" }, children: addButtonText })] }), customCreditsPreview != null ? (_jsxs("p", { style: { margin: "6px 0 0", fontSize: 12, color: theme.inkMuted }, children: ["\u2248 ", formatCredits(customCreditsPreview), " credits"] })) : null, customError ? (_jsx("p", { style: { margin: "8px 0 0", fontSize: 13, color: theme.accent }, children: customError })) : null] })) : null, packages && packages.length > 0 && (_jsx("div", { style: { marginTop: 16 }, children: autoTopup?.enabled && autoTopup.status === "active" ? (_jsxs("p", { style: { margin: 0, fontSize: 12, color: theme.inkMuted }, children: ["Auto top-up is on \u2014 buying", " ", packages.find((p) => p.id === autoTopup.packageId)?.name ?? "your package", " whenever your balance drops below ", formatCredits(autoTopup.thresholdCredits), " credits."] })) : autoTopup?.enabled && (autoTopup.status === "needs_auth" || autoTopup.status === "failed") ? (_jsxs("div", { children: [_jsx("p", { style: { margin: 0, fontSize: 12, color: theme.accent }, children: autoTopup.status === "needs_auth"
+                        }, children: promoCodeLabel })) })), packages && packages.length > 0 && (_jsx("div", { style: { marginTop: 16 }, children: autoTopup?.enabled && autoTopup.status === "active" ? (_jsxs("p", { style: { margin: 0, fontSize: 12, color: theme.inkMuted }, children: ["Auto top-up is on \u2014 buying", " ", packages.find((p) => p.id === autoTopup.packageId)?.name ?? "your package", " whenever your balance drops below ", formatCredits(autoTopup.thresholdCredits), " credits."] })) : autoTopup?.enabled && (autoTopup.status === "needs_auth" || autoTopup.status === "failed") ? (_jsxs("div", { children: [_jsx("p", { style: { margin: 0, fontSize: 12, color: theme.accent }, children: autoTopup.status === "needs_auth"
                                     ? "Auto top-up needs you to re-confirm your payment method."
                                     : "Auto top-up's last charge failed." }), _jsx("button", { onClick: () => onEnableAutoTopup?.({
                                     packageId: autoTopup.packageId,
@@ -298,6 +338,7 @@ export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlan
                                 fontWeight: 600,
                                 color: theme.inkMuted,
                                 marginBottom: 8,
+                                whiteSpace: "pre-line",
                             }, children: resolvedReferralLabel }), _jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [_jsx("div", { title: referralLink, style: {
                                         flex: 1,
                                         minWidth: 0,
@@ -322,5 +363,5 @@ export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlan
                                         padding: "8px 16px",
                                         borderRadius: theme.radiusPill,
                                         whiteSpace: "nowrap",
-                                    }, children: referralCopied ? "Copied!" : "Copy" })] })] })) : null, !hideBranding && (_jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 10 }, children: _jsx("span", { style: { fontSize: 10, color: theme.inkMuted }, children: "Powered by Crediball." }) }))] }) }));
+                                    }, children: referralCopied ? "Copied!" : "Copy" })] })] })) : null, !hideBranding && (_jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 20 }, children: _jsx("span", { style: { fontSize: 10, color: theme.inkMuted }, children: "Powered by Crediball." }) }))] }) }));
 }

package/package.json

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