@crediball/react 0.6.0 → 0.7.0

package/dist/CrediballProvider.d.ts

@@ -73,7 +73,12 @@ export interface CrediballProviderProps {
     customMin?: number;
     /** Override the custom-amount maximum (defaults to the dashboard's configured maximum). */
     customMax?: number;
-    /** Currency symbol shown in the paywall (default "€"). Match your app's billing currency. */
+    /**
+     * Currency symbol shown in the paywall. Auto-derived (via Intl) from the ISO
+     * currency you configured on the dashboard's Packages page once packages load,
+     * so it never drifts out of sync if you switch currencies there. Pass this only
+     * to force a specific symbol instead. Falls back to "€" before the first fetch.
+     */
     currencySymbol?: string;
     title?: string;
     description?: string;
@@ -132,7 +137,7 @@ interface CrediballContextValue {
  * SSE/streaming routes (text/event-stream, ndjson) are also handled automatically —
  * the watcher scans each chunk for credit errors, so no manual wiring is needed.
  */
-export declare function CrediballProvider({ children, publishableKey, userId, apiUrl, pollIntervalMs, lowCreditThreshold, amounts, onTopup, onSelectPackage, onSelectPlan, onCancelSubscription, watchFetch, allowCustom, customMin, customMax, currencySymbol, title, description, accentColor, }: CrediballProviderProps): import("react").JSX.Element;
+export declare function CrediballProvider({ children, publishableKey, userId, apiUrl, pollIntervalMs, lowCreditThreshold, amounts, onTopup, onSelectPackage, onSelectPlan, onCancelSubscription, watchFetch, allowCustom, customMin, customMax, currencySymbol: currencySymbolProp, title, description, accentColor, }: CrediballProviderProps): import("react").JSX.Element;
 /**
  * Access the paywall + live data from anywhere inside <CrediballProvider>.
  *

package/dist/CrediballProvider.js

@@ -18,6 +18,22 @@ const EMPTY_SNAPSHOT = {
 };
 const noopSubscribe = () => () => { };
 const getEmptySnapshot = () => EMPTY_SNAPSHOT;
+/**
+ * Map an ISO 4217 code (as returned by the dashboard's packages config) to a
+ * display symbol via Intl, so the paywall doesn't need a hand-maintained
+ * currency → symbol table that can fall out of sync with the dashboard.
+ */
+function symbolForCurrency(iso) {
+    try {
+        const part = new Intl.NumberFormat(undefined, { style: "currency", currency: iso })
+            .formatToParts(0)
+            .find((p) => p.type === "currency");
+        return part?.value ?? iso;
+    }
+    catch {
+        return iso;
+    }
+}
 /**
  * Pattern B, automated. Wrap your app once:
  *
@@ -38,7 +54,7 @@ const getEmptySnapshot = () => EMPTY_SNAPSHOT;
  * SSE/streaming routes (text/event-stream, ndjson) are also handled automatically —
  * the watcher scans each chunk for credit errors, so no manual wiring is needed.
  */
-export function CrediballProvider({ children, publishableKey, userId, apiUrl, pollIntervalMs, lowCreditThreshold, amounts = [5, 10, 20], onTopup, onSelectPackage, onSelectPlan, onCancelSubscription, watchFetch = true, allowCustom, customMin, customMax, currencySymbol = "€", title, description, accentColor, }) {
+export function CrediballProvider({ children, publishableKey, userId, apiUrl, pollIntervalMs, lowCreditThreshold, amounts = [5, 10, 20], onTopup, onSelectPackage, onSelectPlan, onCancelSubscription, watchFetch = true, allowCustom, customMin, customMax, currencySymbol: currencySymbolProp, title, description, accentColor, }) {
     const [open, setOpen] = useState(false);
     const showPaywall = useCallback(() => setOpen(true), []);
     const hidePaywall = useCallback(() => setOpen(false), []);
@@ -193,6 +209,11 @@ export function CrediballProvider({ children, publishableKey, userId, apiUrl, po
         await client?.refresh();
     }
     const pkgs = snapshot.packages;
+    // Follow the dashboard's configured currency once packages load, unless the
+    // host pins an explicit symbol. Falls back to "€" only until the first fetch
+    // resolves, so switching currencies on the Packages page never requires a
+    // matching code change/redeploy here.
+    const currencySymbol = currencySymbolProp ?? (pkgs?.currency ? symbolForCurrency(pkgs.currency) : "€");
     // Auto-derive the custom-amount field from the dashboard's custom-topup config,
     // so a developer who enabled it doesn't also have to pass allowCustom/min/max.
     // Explicit props still win (allowCustom={false} force-hides it).

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@crediball/react",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Drop-in React components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",
-  "homepage": "https://crediball.app",
+  "homepage": "https://crediball.ai",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/filipporezzadore/Crediball.git",