@crediball/elements 0.8.0 → 0.10.0

package/dist/{chunk-YCLIZG7D.js → chunk-YP5JNDTD.js}

@@ -285,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;
@@ -328,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();
@@ -405,6 +433,7 @@ var CrediballPaywallElement = class extends CrediballElement {
                      </button>`
     ).join("")}
                  </div>` : ""}
+          ${this.renderPromoCode(Boolean(pkgs?.hasActiveCheckoutPromotion))}
           <div class="list">
             ${packages.length ? packages.map(
       (p) => `
@@ -454,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);
@@ -464,12 +494,17 @@ 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");
@@ -499,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);
@@ -532,6 +568,33 @@ var CrediballPaywallElement = class extends CrediballElement {
       }
     });
   }
+  /** HTML for the "Have a promo code?" toggle-open field. Shown automatically
+   * once the app has an active Checkout promotion (same as the custom-amount
+   * field auto-following the dashboard's custom-topup config) — the
+   * `allow-promo-code` attribute is only needed to force it on before you've
+   * set one up. Not validated client-side — an invalid code simply doesn't
+   * grant a bonus when the top-up is processed. */
+  renderPromoCode(hasActiveCheckoutPromotion) {
+    if (!this.hasAttribute("allow-promo-code") && !hasActiveCheckoutPromotion) 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

@@ -699,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;
@@ -742,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();
@@ -819,6 +847,7 @@ var Crediball = (() => {
                      </button>`
       ).join("")}
                  </div>` : ""}
+          ${this.renderPromoCode(Boolean(pkgs?.hasActiveCheckoutPromotion))}
           <div class="list">
             ${packages.length ? packages.map(
         (p) => `
@@ -868,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);
@@ -878,12 +908,17 @@ 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");
@@ -913,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);
@@ -946,6 +982,33 @@ var Crediball = (() => {
         }
       });
     }
+    /** HTML for the "Have a promo code?" toggle-open field. Shown automatically
+     * once the app has an active Checkout promotion (same as the custom-amount
+     * field auto-following the dashboard's custom-topup config) — the
+     * `allow-promo-code` attribute is only needed to force it on before you've
+     * set one up. Not validated client-side — an invalid code simply doesn't
+     * grant a bonus when the top-up is processed. */
+    renderPromoCode(hasActiveCheckoutPromotion) {
+      if (!this.hasAttribute("allow-promo-code") && !hasActiveCheckoutPromotion) 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,17 @@ declare class CrediballPaywallElement extends CrediballElement {
     open(): void;
     close(): void;
     protected render(): void;
+    /** HTML for the "Have a promo code?" toggle-open field. Shown automatically
+     * once the app has an active Checkout promotion (same as the custom-amount
+     * field auto-following the dashboard's custom-topup config) — the
+     * `allow-promo-code` attribute is only needed to force it on before you've
+     * set one up. 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-YCLIZG7D.js";
+} from "./chunk-YP5JNDTD.js";
 export {
   CrediballBalanceElement,
   CrediballElement,

package/dist/register.js

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

package/package.json

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