@crediball/elements 0.7.0 → 0.9.0

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

@@ -187,6 +187,7 @@ var CrediballLowCreditWarningElement = class extends CrediballElement {
 // src/paywall.ts
 import { formatMoney, fetchReferral } from "@crediball/core";
 var CURRENCY_SYMBOLS = { EUR: "\u20AC", USD: "$", GBP: "\xA3" };
+var PERIOD_SUFFIX = { weekly: "wk", monthly: "mo", yearly: "yr" };
 function currencySymbolFor(currency) {
   return CURRENCY_SYMBOLS[currency.toUpperCase()] ?? currency;
 }
@@ -269,6 +270,7 @@ var STYLE = `
     padding: 10px 18px;
     border-radius: var(--crediball-radius, 9999px);
   }
+  p.custom-preview { margin: 6px 0 0; font-size: 12px; color: var(--crediball-ink-muted, #7a7a7a); }
   p.error { margin: 8px 0 0; font-size: 13px; color: var(--crediball-accent, #0066cc); }
   button.close {
     width: 100%;
@@ -283,6 +285,25 @@ var STYLE = `
     padding: 11px 22px;
     border-radius: var(--crediball-radius, 9999px);
   }
+  .promo-code { margin-top: 16px; }
+  .promo-code-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;
+  }
+  .promo-code-label { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--crediball-ink-muted, #7a7a7a); }
+  .promo-code-input {
+    width: 100%;
+    box-sizing: border-box;
+    appearance: none;
+    font: inherit;
+    font-size: 14px;
+    padding: 8px 12px;
+    border-radius: var(--crediball-radius, 9999px);
+    border: 1px solid var(--crediball-hairline, #e0e0e0);
+    background: var(--crediball-canvas, #ffffff);
+    color: var(--crediball-ink, #1d1d1f);
+    outline: none;
+  }
   .autotopup { margin-top: 16px; }
   .autotopup-toggle {
     appearance: none; border: none; cursor: pointer; background: transparent; padding: 0;
@@ -326,10 +347,19 @@ var CrediballPaywallElement = class extends CrediballElement {
     this.referral = null;
     this.referralCopied = false;
     this.autoTopupOpen = false;
+    this.promoCodeOpen = false;
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return [...CrediballElement.observedAttributes, "open", "title", "description", "amounts"];
+    return [
+      ...CrediballElement.observedAttributes,
+      "open",
+      "title",
+      "description",
+      "amounts",
+      "allow-promo-code",
+      "promo-code-label"
+    ];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -399,10 +429,11 @@ var CrediballPaywallElement = class extends CrediballElement {
       (p) => `
                      <button class="option" data-kind="plan" data-id="${escapeHtml(p.id)}">
                        <span>${escapeHtml(p.name)}</span>
-                       <span class="meta">${formatMoney(p.price, currency)}/${p.period === "monthly" ? "mo" : "yr"} \xB7 ${formatCredits(p.credits)} cr</span>
+                       <span class="meta">${formatMoney(p.price, currency)}/${PERIOD_SUFFIX[p.period] ?? p.period} \xB7 ${formatCredits(p.credits)} cr</span>
                      </button>`
     ).join("")}
                  </div>` : ""}
+          ${this.renderPromoCode()}
           <div class="list">
             ${packages.length ? packages.map(
       (p) => `
@@ -421,7 +452,8 @@ var CrediballPaywallElement = class extends CrediballElement {
                    <span class="sym">${escapeHtml(currencySymbolFor(currency))}</span>
                    <input class="custom-input" inputmode="decimal" placeholder="${custom?.minEur ?? ""}" aria-label="Custom amount" />
                    <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
-                 </div>` : ""}
+                 </div>
+                 <p class="custom-preview" hidden></p>` : ""}
           ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
           <p class="error" hidden></p>
           <button class="close" part="close" type="button">Not now</button>
@@ -451,8 +483,9 @@ var CrediballPaywallElement = class extends CrediballElement {
         const kind = btn.dataset.kind;
         if (kind === "package") {
           const pkg = packages.find((p) => p.id === btn.dataset.id);
-          if (pkg && this.emit("crediball-select-package", pkg)) {
-            void this.startCheckout({ packageId: pkg.id });
+          const code = this.currentPromoCode();
+          if (pkg && this.emit("crediball-select-package", { ...pkg, code })) {
+            void this.startCheckout({ packageId: pkg.id, code });
           }
         } else if (kind === "plan") {
           const plan = plans.find((p) => p.id === btn.dataset.id);
@@ -461,16 +494,33 @@ var CrediballPaywallElement = class extends CrediballElement {
           }
         } else if (kind === "amount") {
           const amount = Number(btn.dataset.amount);
-          if (this.emit("crediball-topup", { amount })) {
-            void this.startCheckout({ eurAmount: amount });
+          const code = this.currentPromoCode();
+          if (this.emit("crediball-topup", { amount, code })) {
+            void this.startCheckout({ eurAmount: amount, code });
           }
         }
       });
     });
+    this.shadow.querySelector("[data-open-promo-code]")?.addEventListener("click", () => {
+      this.promoCodeOpen = true;
+      this.render();
+    });
     if (showCustom) {
       const input = this.shadow.querySelector(".custom-input");
       const addBtn = this.shadow.querySelector(".custom-add");
       const errEl = this.shadow.querySelector(".error");
+      const previewEl = this.shadow.querySelector(".custom-preview");
+      const rate = custom?.rate;
+      input?.addEventListener("input", () => {
+        if (!previewEl) return;
+        const amount = Number(input.value);
+        if (!rate || rate <= 0 || !Number.isFinite(amount) || amount <= 0) {
+          previewEl.hidden = true;
+          return;
+        }
+        previewEl.hidden = false;
+        previewEl.textContent = `\u2248 ${formatCredits(Math.round(amount * rate))} credits`;
+      });
       const submit = () => {
         const amount = Number(input?.value);
         const sym = currencySymbolFor(currency);
@@ -484,8 +534,9 @@ var CrediballPaywallElement = class extends CrediballElement {
           return showError(errEl, `Maximum is ${sym}${custom.maxEur}.`);
         }
         showError(errEl, null);
-        if (this.emit("crediball-topup", { amount })) {
-          void this.startCheckout({ eurAmount: amount });
+        const code = this.currentPromoCode();
+        if (this.emit("crediball-topup", { amount, code })) {
+          void this.startCheckout({ eurAmount: amount, code });
         }
       };
       addBtn?.addEventListener("click", submit);
@@ -517,6 +568,30 @@ var CrediballPaywallElement = class extends CrediballElement {
       }
     });
   }
+  /** HTML for the "Have a promo code?" toggle-open field. Gated on the
+   * `allow-promo-code` attribute (off by default). Not validated client-side —
+   * an invalid code simply doesn't grant a bonus when the top-up is processed. */
+  renderPromoCode() {
+    if (!this.hasAttribute("allow-promo-code")) return "";
+    const label = this.getAttribute("promo-code-label") ?? "Have a promo code?";
+    if (!this.promoCodeOpen) {
+      return `<div class="promo-code">
+        <button class="promo-code-toggle" type="button" data-open-promo-code>${escapeHtml(label)}</button>
+      </div>`;
+    }
+    return `<div class="promo-code">
+      <div class="promo-code-label">${escapeHtml(label)}</div>
+      <input class="promo-code-input" placeholder="PROMOCODE" aria-label="Promo code" />
+    </div>`;
+  }
+  /** The current promo code input value (uppercased, trimmed), or undefined
+   * when the field isn't shown/filled in. Read at click time — never re-render
+   * on keystroke, same reasoning as the custom-amount field. */
+  currentPromoCode() {
+    const input = this.shadow.querySelector(".promo-code-input");
+    const value = input?.value.trim().toUpperCase();
+    return value || void 0;
+  }
   /** HTML for the auto-topup opt-in row / status line / needs_auth-fix prompt. */
   renderAutoTopup(packages, autoTopup, currency) {
     if (!packages.length) return "";

package/dist/crediball-elements.iife.js

@@ -601,6 +601,7 @@ var Crediball = (() => {
 
   // src/paywall.ts
   var CURRENCY_SYMBOLS = { EUR: "\u20AC", USD: "$", GBP: "\xA3" };
+  var PERIOD_SUFFIX = { weekly: "wk", monthly: "mo", yearly: "yr" };
   function currencySymbolFor(currency) {
     return CURRENCY_SYMBOLS[currency.toUpperCase()] ?? currency;
   }
@@ -683,6 +684,7 @@ var Crediball = (() => {
     padding: 10px 18px;
     border-radius: var(--crediball-radius, 9999px);
   }
+  p.custom-preview { margin: 6px 0 0; font-size: 12px; color: var(--crediball-ink-muted, #7a7a7a); }
   p.error { margin: 8px 0 0; font-size: 13px; color: var(--crediball-accent, #0066cc); }
   button.close {
     width: 100%;
@@ -697,6 +699,25 @@ var Crediball = (() => {
     padding: 11px 22px;
     border-radius: var(--crediball-radius, 9999px);
   }
+  .promo-code { margin-top: 16px; }
+  .promo-code-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;
+  }
+  .promo-code-label { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--crediball-ink-muted, #7a7a7a); }
+  .promo-code-input {
+    width: 100%;
+    box-sizing: border-box;
+    appearance: none;
+    font: inherit;
+    font-size: 14px;
+    padding: 8px 12px;
+    border-radius: var(--crediball-radius, 9999px);
+    border: 1px solid var(--crediball-hairline, #e0e0e0);
+    background: var(--crediball-canvas, #ffffff);
+    color: var(--crediball-ink, #1d1d1f);
+    outline: none;
+  }
   .autotopup { margin-top: 16px; }
   .autotopup-toggle {
     appearance: none; border: none; cursor: pointer; background: transparent; padding: 0;
@@ -740,10 +761,19 @@ var Crediball = (() => {
       this.referral = null;
       this.referralCopied = false;
       this.autoTopupOpen = false;
+      this.promoCodeOpen = false;
       this.shadow = this.attachShadow({ mode: "open" });
     }
     static get observedAttributes() {
-      return [...CrediballElement.observedAttributes, "open", "title", "description", "amounts"];
+      return [
+        ...CrediballElement.observedAttributes,
+        "open",
+        "title",
+        "description",
+        "amounts",
+        "allow-promo-code",
+        "promo-code-label"
+      ];
     }
     connectedCallback() {
       super.connectedCallback();
@@ -813,10 +843,11 @@ var Crediball = (() => {
         (p) => `
                      <button class="option" data-kind="plan" data-id="${escapeHtml(p.id)}">
                        <span>${escapeHtml(p.name)}</span>
-                       <span class="meta">${formatMoney(p.price, currency)}/${p.period === "monthly" ? "mo" : "yr"} \xB7 ${formatCredits(p.credits)} cr</span>
+                       <span class="meta">${formatMoney(p.price, currency)}/${PERIOD_SUFFIX[p.period] ?? p.period} \xB7 ${formatCredits(p.credits)} cr</span>
                      </button>`
       ).join("")}
                  </div>` : ""}
+          ${this.renderPromoCode()}
           <div class="list">
             ${packages.length ? packages.map(
         (p) => `
@@ -835,7 +866,8 @@ var Crediball = (() => {
                    <span class="sym">${escapeHtml(currencySymbolFor(currency))}</span>
                    <input class="custom-input" inputmode="decimal" placeholder="${custom?.minEur ?? ""}" aria-label="Custom amount" />
                    <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
-                 </div>` : ""}
+                 </div>
+                 <p class="custom-preview" hidden></p>` : ""}
           ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
           <p class="error" hidden></p>
           <button class="close" part="close" type="button">Not now</button>
@@ -865,8 +897,9 @@ var Crediball = (() => {
           const kind = btn.dataset.kind;
           if (kind === "package") {
             const pkg = packages.find((p) => p.id === btn.dataset.id);
-            if (pkg && this.emit("crediball-select-package", pkg)) {
-              void this.startCheckout({ packageId: pkg.id });
+            const code = this.currentPromoCode();
+            if (pkg && this.emit("crediball-select-package", { ...pkg, code })) {
+              void this.startCheckout({ packageId: pkg.id, code });
             }
           } else if (kind === "plan") {
             const plan = plans.find((p) => p.id === btn.dataset.id);
@@ -875,16 +908,33 @@ var Crediball = (() => {
             }
           } else if (kind === "amount") {
             const amount = Number(btn.dataset.amount);
-            if (this.emit("crediball-topup", { amount })) {
-              void this.startCheckout({ eurAmount: amount });
+            const code = this.currentPromoCode();
+            if (this.emit("crediball-topup", { amount, code })) {
+              void this.startCheckout({ eurAmount: amount, code });
             }
           }
         });
       });
+      this.shadow.querySelector("[data-open-promo-code]")?.addEventListener("click", () => {
+        this.promoCodeOpen = true;
+        this.render();
+      });
       if (showCustom) {
         const input = this.shadow.querySelector(".custom-input");
         const addBtn = this.shadow.querySelector(".custom-add");
         const errEl = this.shadow.querySelector(".error");
+        const previewEl = this.shadow.querySelector(".custom-preview");
+        const rate = custom?.rate;
+        input?.addEventListener("input", () => {
+          if (!previewEl) return;
+          const amount = Number(input.value);
+          if (!rate || rate <= 0 || !Number.isFinite(amount) || amount <= 0) {
+            previewEl.hidden = true;
+            return;
+          }
+          previewEl.hidden = false;
+          previewEl.textContent = `\u2248 ${formatCredits(Math.round(amount * rate))} credits`;
+        });
         const submit = () => {
           const amount = Number(input?.value);
           const sym = currencySymbolFor(currency);
@@ -898,8 +948,9 @@ var Crediball = (() => {
             return showError(errEl, `Maximum is ${sym}${custom.maxEur}.`);
           }
           showError(errEl, null);
-          if (this.emit("crediball-topup", { amount })) {
-            void this.startCheckout({ eurAmount: amount });
+          const code = this.currentPromoCode();
+          if (this.emit("crediball-topup", { amount, code })) {
+            void this.startCheckout({ eurAmount: amount, code });
           }
         };
         addBtn?.addEventListener("click", submit);
@@ -931,6 +982,30 @@ var Crediball = (() => {
         }
       });
     }
+    /** HTML for the "Have a promo code?" toggle-open field. Gated on the
+     * `allow-promo-code` attribute (off by default). Not validated client-side —
+     * an invalid code simply doesn't grant a bonus when the top-up is processed. */
+    renderPromoCode() {
+      if (!this.hasAttribute("allow-promo-code")) return "";
+      const label = this.getAttribute("promo-code-label") ?? "Have a promo code?";
+      if (!this.promoCodeOpen) {
+        return `<div class="promo-code">
+        <button class="promo-code-toggle" type="button" data-open-promo-code>${escapeHtml(label)}</button>
+      </div>`;
+      }
+      return `<div class="promo-code">
+      <div class="promo-code-label">${escapeHtml(label)}</div>
+      <input class="promo-code-input" placeholder="PROMOCODE" aria-label="Promo code" />
+    </div>`;
+    }
+    /** The current promo code input value (uppercased, trimmed), or undefined
+     * when the field isn't shown/filled in. Read at click time — never re-render
+     * on keystroke, same reasoning as the custom-amount field. */
+    currentPromoCode() {
+      const input = this.shadow.querySelector(".promo-code-input");
+      const value = input?.value.trim().toUpperCase();
+      return value || void 0;
+    }
     /** HTML for the auto-topup opt-in row / status line / needs_auth-fix prompt. */
     renderAutoTopup(packages, autoTopup, currency) {
       if (!packages.length) return "";

package/dist/index.d.ts

@@ -113,6 +113,7 @@ declare class CrediballPaywallElement extends CrediballElement {
     private referral;
     private referralCopied;
     private autoTopupOpen;
+    private promoCodeOpen;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
@@ -122,6 +123,14 @@ declare class CrediballPaywallElement extends CrediballElement {
     open(): void;
     close(): void;
     protected render(): void;
+    /** HTML for the "Have a promo code?" toggle-open field. Gated on the
+     * `allow-promo-code` attribute (off by default). Not validated client-side —
+     * an invalid code simply doesn't grant a bonus when the top-up is processed. */
+    private renderPromoCode;
+    /** The current promo code input value (uppercased, trimmed), or undefined
+     * when the field isn't shown/filled in. Read at click time — never re-render
+     * on keystroke, same reasoning as the custom-amount field. */
+    private currentPromoCode;
     /** 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. */

package/dist/index.js

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

package/dist/register.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/elements",
-  "version": "0.7.0",
+  "version": "0.9.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.6.0"
+    "@crediball/core": "^0.8.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5",