@crediball/elements 0.6.0 → 0.7.0

package/dist/{chunk-MWB56UEW.js → chunk-KRSZ3FQQ.js}

@@ -283,8 +283,29 @@ var STYLE = `
     padding: 11px 22px;
     border-radius: var(--crediball-radius, 9999px);
   }
-  .referral { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--crediball-hairline, #e0e0e0); }
-  .referral .eyebrow { margin-bottom: 8px; }
+  .autotopup { margin-top: 16px; }
+  .autotopup-toggle {
+    appearance: none; border: none; cursor: pointer; background: transparent; padding: 0;
+    font: inherit; font-size: 12px; color: var(--crediball-ink-muted, #7a7a7a); text-decoration: underline;
+  }
+  .autotopup-status { margin: 0; font-size: 12px; color: var(--crediball-ink-muted, #7a7a7a); }
+  .autotopup-warning { margin: 0; font-size: 12px; color: var(--crediball-accent, #0066cc); }
+  .autotopup-row { display: flex; gap: 8px; align-items: center; }
+  .autotopup-row select, .autotopup-row input {
+    font: inherit; font-size: 13px; padding: 6px 10px;
+    border-radius: var(--crediball-radius, 9999px); border: 1px solid var(--crediball-hairline, #e0e0e0);
+    background: var(--crediball-canvas, #ffffff); color: var(--crediball-ink, #1d1d1f);
+  }
+  .autotopup-row select { flex: 1; min-width: 0; }
+  .autotopup-row input { width: 72px; }
+  button.autotopup-submit {
+    appearance: none; border: none; cursor: pointer; flex: none;
+    background: var(--crediball-accent, #0066cc); color: var(--crediball-on-accent, #ffffff);
+    font: inherit; font-size: 13px; padding: 6px 14px; border-radius: var(--crediball-radius, 9999px);
+  }
+  .autotopup-hint { margin: 6px 0 0; font-size: 11px; color: var(--crediball-ink-muted, #7a7a7a); }
+  .referral { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--crediball-hairline, #e0e0e0); }
+  .referral-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--crediball-ink-muted, #7a7a7a); }
   .referral-row { display: flex; gap: 8px; align-items: center; }
   .referral-row .link {
     flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -304,6 +325,7 @@ var CrediballPaywallElement = class extends CrediballElement {
     super();
     this.referral = null;
     this.referralCopied = false;
+    this.autoTopupOpen = false;
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
@@ -400,15 +422,21 @@ var CrediballPaywallElement = class extends CrediballElement {
                    <input class="custom-input" inputmode="decimal" placeholder="${custom?.minEur ?? ""}" aria-label="Custom amount" />
                    <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
                  </div>` : ""}
+          ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
           <p class="error" hidden></p>
+          <button class="close" part="close" type="button">Not now</button>
           ${this.referral?.link ? `<div class="referral">
-                   <div class="eyebrow">${this.referral.rewardCredits && this.referral.rewardCredits > 0 ? `Refer a friend \xB7 earn ${formatCredits(this.referral.rewardCredits)} credits` : "Refer a friend"}</div>
+                   <div class="referral-label">${escapeHtml(
+      (this.getAttribute("referral-label") ?? "Refer a friend \xB7 earn {credits} credits").replace(
+        "{credits}",
+        formatCredits(this.referral.rewardCredits ?? 0)
+      )
+    )}</div>
                    <div class="referral-row">
                      <div class="link" title="${escapeHtml(this.referral.link)}">${escapeHtml(this.referral.link)}</div>
                      <button class="referral-copy" type="button">${this.referralCopied ? "Copied!" : "Copy"}</button>
                    </div>
                  </div>` : ""}
-          <button class="close" part="close" type="button">Not now</button>
         </div>
       </div>
     `;
@@ -465,6 +493,66 @@ var CrediballPaywallElement = class extends CrediballElement {
         if (e.key === "Enter") submit();
       });
     }
+    this.shadow.querySelector("[data-open-autotopup]")?.addEventListener("click", () => {
+      this.autoTopupOpen = true;
+      this.render();
+    });
+    this.shadow.querySelector(".autotopup-submit")?.addEventListener("click", () => {
+      const packageId = this.shadow.querySelector(".autotopup-package")?.value;
+      const thresholdCredits = Number(
+        this.shadow.querySelector(".autotopup-threshold")?.value
+      );
+      if (!packageId || !Number.isFinite(thresholdCredits) || thresholdCredits < 0) return;
+      if (this.emit("crediball-enable-autotopup", { packageId, thresholdCredits })) {
+        void this.startAutoTopupCheckout(packageId, thresholdCredits);
+      }
+    });
+    const fixBtn = this.shadow.querySelector("[data-fix-package]");
+    fixBtn?.addEventListener("click", () => {
+      const packageId = fixBtn.dataset.fixPackage;
+      const thresholdCredits = Number(fixBtn.dataset.fixThreshold);
+      if (!packageId || !Number.isFinite(thresholdCredits)) return;
+      if (this.emit("crediball-enable-autotopup", { packageId, thresholdCredits })) {
+        void this.startAutoTopupCheckout(packageId, thresholdCredits);
+      }
+    });
+  }
+  /** HTML for the auto-topup opt-in row / status line / needs_auth-fix prompt. */
+  renderAutoTopup(packages, autoTopup, currency) {
+    if (!packages.length) return "";
+    if (autoTopup?.enabled && autoTopup.status === "active") {
+      const pkg = packages.find((p) => p.id === autoTopup.packageId);
+      return `<div class="autotopup"><p class="autotopup-status">Auto top-up is on \u2014 buying ${escapeHtml(
+        pkg?.name ?? "your package"
+      )} whenever your balance drops below ${formatCredits(autoTopup.thresholdCredits)} credits.</p></div>`;
+    }
+    if (autoTopup?.enabled && (autoTopup.status === "needs_auth" || autoTopup.status === "failed")) {
+      const message = autoTopup.status === "needs_auth" ? "Auto top-up needs you to re-confirm your payment method." : "Auto top-up's last charge failed.";
+      return `<div class="autotopup">
+        <p class="autotopup-warning">${escapeHtml(message)}</p>
+        <button class="autotopup-toggle" type="button" data-fix-package="${escapeHtml(
+        autoTopup.packageId
+      )}" data-fix-threshold="${autoTopup.thresholdCredits}">Fix auto top-up</button>
+      </div>`;
+    }
+    if (this.autoTopupOpen) {
+      const cheapest = packages.reduce((min, p) => p.price < min.price ? p : min, packages[0]);
+      return `<div class="autotopup">
+        <div class="autotopup-row">
+          <select class="autotopup-package" aria-label="Package">
+            ${packages.map(
+        (p) => `<option value="${escapeHtml(p.id)}">${escapeHtml(p.name)} \xB7 ${formatMoney(p.price, currency)}</option>`
+      ).join("")}
+          </select>
+          <input class="autotopup-threshold" inputmode="numeric" aria-label="Threshold credits" value="${cheapest.credits}" />
+          <button class="autotopup-submit" type="button">Turn on</button>
+        </div>
+        <p class="autotopup-hint">Buy that package automatically whenever your balance drops below the credit amount above.</p>
+      </div>`;
+    }
+    return `<div class="autotopup">
+      <button class="autotopup-toggle" type="button" data-open-autotopup>Keep me topped up automatically</button>
+    </div>`;
   }
   /** Copy the invite link to the clipboard, with a 2s "Copied!" confirmation. */
   async copyReferral() {
@@ -499,6 +587,17 @@ var CrediballPaywallElement = class extends CrediballElement {
       this.client.createSubscriptionCheckout({ planId, returnPath: this.returnPath() })
     );
   }
+  /**
+   * Start the built-in auto-topup setup Checkout and redirect. No money changes
+   * hands here — it only saves a payment method Crediball charges later,
+   * off-session, whenever the balance drops below `thresholdCredits`.
+   */
+  startAutoTopupCheckout(packageId, thresholdCredits) {
+    if (!this.client) return Promise.resolve();
+    return this.redirect(
+      this.client.createAutoTopupCheckout({ packageId, thresholdCredits, returnPath: this.returnPath() })
+    );
+  }
   async redirect(session) {
     try {
       const { url } = await session;

package/dist/crediball-elements.iife.js

@@ -133,6 +133,9 @@ var Crediball = (() => {
       this.createSubscriptionCheckout = (input) => {
         return this.postCheckout("/public/subscriptions/checkout", input);
       };
+      this.createAutoTopupCheckout = (input) => {
+        return this.postCheckout("/public/autotopup/setup", input);
+      };
       this.refresh = async () => {
         const { publishableKey, userId } = this.config;
         const headers = { Authorization: `Bearer ${publishableKey}` };
@@ -694,8 +697,29 @@ var Crediball = (() => {
     padding: 11px 22px;
     border-radius: var(--crediball-radius, 9999px);
   }
-  .referral { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--crediball-hairline, #e0e0e0); }
-  .referral .eyebrow { margin-bottom: 8px; }
+  .autotopup { margin-top: 16px; }
+  .autotopup-toggle {
+    appearance: none; border: none; cursor: pointer; background: transparent; padding: 0;
+    font: inherit; font-size: 12px; color: var(--crediball-ink-muted, #7a7a7a); text-decoration: underline;
+  }
+  .autotopup-status { margin: 0; font-size: 12px; color: var(--crediball-ink-muted, #7a7a7a); }
+  .autotopup-warning { margin: 0; font-size: 12px; color: var(--crediball-accent, #0066cc); }
+  .autotopup-row { display: flex; gap: 8px; align-items: center; }
+  .autotopup-row select, .autotopup-row input {
+    font: inherit; font-size: 13px; padding: 6px 10px;
+    border-radius: var(--crediball-radius, 9999px); border: 1px solid var(--crediball-hairline, #e0e0e0);
+    background: var(--crediball-canvas, #ffffff); color: var(--crediball-ink, #1d1d1f);
+  }
+  .autotopup-row select { flex: 1; min-width: 0; }
+  .autotopup-row input { width: 72px; }
+  button.autotopup-submit {
+    appearance: none; border: none; cursor: pointer; flex: none;
+    background: var(--crediball-accent, #0066cc); color: var(--crediball-on-accent, #ffffff);
+    font: inherit; font-size: 13px; padding: 6px 14px; border-radius: var(--crediball-radius, 9999px);
+  }
+  .autotopup-hint { margin: 6px 0 0; font-size: 11px; color: var(--crediball-ink-muted, #7a7a7a); }
+  .referral { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--crediball-hairline, #e0e0e0); }
+  .referral-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--crediball-ink-muted, #7a7a7a); }
   .referral-row { display: flex; gap: 8px; align-items: center; }
   .referral-row .link {
     flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -715,6 +739,7 @@ var Crediball = (() => {
       super();
       this.referral = null;
       this.referralCopied = false;
+      this.autoTopupOpen = false;
       this.shadow = this.attachShadow({ mode: "open" });
     }
     static get observedAttributes() {
@@ -811,15 +836,21 @@ var Crediball = (() => {
                    <input class="custom-input" inputmode="decimal" placeholder="${custom?.minEur ?? ""}" aria-label="Custom amount" />
                    <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
                  </div>` : ""}
+          ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
           <p class="error" hidden></p>
+          <button class="close" part="close" type="button">Not now</button>
           ${this.referral?.link ? `<div class="referral">
-                   <div class="eyebrow">${this.referral.rewardCredits && this.referral.rewardCredits > 0 ? `Refer a friend \xB7 earn ${formatCredits(this.referral.rewardCredits)} credits` : "Refer a friend"}</div>
+                   <div class="referral-label">${escapeHtml(
+        (this.getAttribute("referral-label") ?? "Refer a friend \xB7 earn {credits} credits").replace(
+          "{credits}",
+          formatCredits(this.referral.rewardCredits ?? 0)
+        )
+      )}</div>
                    <div class="referral-row">
                      <div class="link" title="${escapeHtml(this.referral.link)}">${escapeHtml(this.referral.link)}</div>
                      <button class="referral-copy" type="button">${this.referralCopied ? "Copied!" : "Copy"}</button>
                    </div>
                  </div>` : ""}
-          <button class="close" part="close" type="button">Not now</button>
         </div>
       </div>
     `;
@@ -876,6 +907,66 @@ var Crediball = (() => {
           if (e.key === "Enter") submit();
         });
       }
+      this.shadow.querySelector("[data-open-autotopup]")?.addEventListener("click", () => {
+        this.autoTopupOpen = true;
+        this.render();
+      });
+      this.shadow.querySelector(".autotopup-submit")?.addEventListener("click", () => {
+        const packageId = this.shadow.querySelector(".autotopup-package")?.value;
+        const thresholdCredits = Number(
+          this.shadow.querySelector(".autotopup-threshold")?.value
+        );
+        if (!packageId || !Number.isFinite(thresholdCredits) || thresholdCredits < 0) return;
+        if (this.emit("crediball-enable-autotopup", { packageId, thresholdCredits })) {
+          void this.startAutoTopupCheckout(packageId, thresholdCredits);
+        }
+      });
+      const fixBtn = this.shadow.querySelector("[data-fix-package]");
+      fixBtn?.addEventListener("click", () => {
+        const packageId = fixBtn.dataset.fixPackage;
+        const thresholdCredits = Number(fixBtn.dataset.fixThreshold);
+        if (!packageId || !Number.isFinite(thresholdCredits)) return;
+        if (this.emit("crediball-enable-autotopup", { packageId, thresholdCredits })) {
+          void this.startAutoTopupCheckout(packageId, thresholdCredits);
+        }
+      });
+    }
+    /** HTML for the auto-topup opt-in row / status line / needs_auth-fix prompt. */
+    renderAutoTopup(packages, autoTopup, currency) {
+      if (!packages.length) return "";
+      if (autoTopup?.enabled && autoTopup.status === "active") {
+        const pkg = packages.find((p) => p.id === autoTopup.packageId);
+        return `<div class="autotopup"><p class="autotopup-status">Auto top-up is on \u2014 buying ${escapeHtml(
+          pkg?.name ?? "your package"
+        )} whenever your balance drops below ${formatCredits(autoTopup.thresholdCredits)} credits.</p></div>`;
+      }
+      if (autoTopup?.enabled && (autoTopup.status === "needs_auth" || autoTopup.status === "failed")) {
+        const message = autoTopup.status === "needs_auth" ? "Auto top-up needs you to re-confirm your payment method." : "Auto top-up's last charge failed.";
+        return `<div class="autotopup">
+        <p class="autotopup-warning">${escapeHtml(message)}</p>
+        <button class="autotopup-toggle" type="button" data-fix-package="${escapeHtml(
+          autoTopup.packageId
+        )}" data-fix-threshold="${autoTopup.thresholdCredits}">Fix auto top-up</button>
+      </div>`;
+      }
+      if (this.autoTopupOpen) {
+        const cheapest = packages.reduce((min, p) => p.price < min.price ? p : min, packages[0]);
+        return `<div class="autotopup">
+        <div class="autotopup-row">
+          <select class="autotopup-package" aria-label="Package">
+            ${packages.map(
+          (p) => `<option value="${escapeHtml(p.id)}">${escapeHtml(p.name)} \xB7 ${formatMoney(p.price, currency)}</option>`
+        ).join("")}
+          </select>
+          <input class="autotopup-threshold" inputmode="numeric" aria-label="Threshold credits" value="${cheapest.credits}" />
+          <button class="autotopup-submit" type="button">Turn on</button>
+        </div>
+        <p class="autotopup-hint">Buy that package automatically whenever your balance drops below the credit amount above.</p>
+      </div>`;
+      }
+      return `<div class="autotopup">
+      <button class="autotopup-toggle" type="button" data-open-autotopup>Keep me topped up automatically</button>
+    </div>`;
     }
     /** Copy the invite link to the clipboard, with a 2s "Copied!" confirmation. */
     async copyReferral() {
@@ -910,6 +1001,17 @@ var Crediball = (() => {
         this.client.createSubscriptionCheckout({ planId, returnPath: this.returnPath() })
       );
     }
+    /**
+     * Start the built-in auto-topup setup Checkout and redirect. No money changes
+     * hands here — it only saves a payment method Crediball charges later,
+     * off-session, whenever the balance drops below `thresholdCredits`.
+     */
+    startAutoTopupCheckout(packageId, thresholdCredits) {
+      if (!this.client) return Promise.resolve();
+      return this.redirect(
+        this.client.createAutoTopupCheckout({ packageId, thresholdCredits, returnPath: this.returnPath() })
+      );
+    }
     async redirect(session) {
       try {
         const { url } = await session;

package/dist/index.d.ts

@@ -112,6 +112,7 @@ declare class CrediballPaywallElement extends CrediballElement {
     private shadow;
     private referral;
     private referralCopied;
+    private autoTopupOpen;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
@@ -121,6 +122,8 @@ declare class CrediballPaywallElement extends CrediballElement {
     open(): void;
     close(): void;
     protected render(): void;
+    /** HTML for the auto-topup opt-in row / status line / needs_auth-fix prompt. */
+    private renderAutoTopup;
     /** Copy the invite link to the clipboard, with a 2s "Copied!" confirmation. */
     private copyReferral;
     /** Dispatch a cancelable option event; returns true when the host did NOT preventDefault. */
@@ -130,6 +133,12 @@ declare class CrediballPaywallElement extends CrediballElement {
     private startCheckout;
     /** Start the built-in recurring subscription Checkout and redirect. */
     private startSubscriptionCheckout;
+    /**
+     * Start the built-in auto-topup setup Checkout and redirect. No money changes
+     * hands here — it only saves a payment method Crediball charges later,
+     * off-session, whenever the balance drops below `thresholdCredits`.
+     */
+    private startAutoTopupCheckout;
     private redirect;
 }
 

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   CrediballReferralCardElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
-} from "./chunk-MWB56UEW.js";
+} from "./chunk-KRSZ3FQQ.js";
 export {
   CrediballBalanceElement,
   CrediballElement,

package/dist/register.js

@@ -5,7 +5,7 @@ import {
   CrediballReferralCardElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
-} from "./chunk-MWB56UEW.js";
+} from "./chunk-KRSZ3FQQ.js";
 
 // src/register.ts
 function define(name, ctor) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/elements",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Framework-agnostic web components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",
@@ -56,7 +56,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@crediball/core": "^0.4.0"
+    "@crediball/core": "^0.6.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5",