@crediball/elements 0.5.0 → 0.6.0

package/dist/{chunk-6CNCZGCF.js → chunk-MWB56UEW.js}

@@ -185,7 +185,7 @@ var CrediballLowCreditWarningElement = class extends CrediballElement {
 };
 
 // src/paywall.ts
-import { formatMoney } from "@crediball/core";
+import { formatMoney, fetchReferral } from "@crediball/core";
 var CURRENCY_SYMBOLS = { EUR: "\u20AC", USD: "$", GBP: "\xA3" };
 function currencySymbolFor(currency) {
   return CURRENCY_SYMBOLS[currency.toUpperCase()] ?? currency;
@@ -283,15 +283,59 @@ 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; }
+  .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;
+    font-size: 13px; color: var(--crediball-ink, #1d1d1f);
+    border: 1px solid var(--crediball-hairline, #e0e0e0);
+    border-radius: var(--crediball-radius, 9999px); padding: 8px 14px;
+  }
+  button.referral-copy {
+    flex: none; appearance: none; cursor: pointer; background: transparent;
+    color: var(--crediball-ink, #1d1d1f); border: 1px solid var(--crediball-hairline, #e0e0e0);
+    font: inherit; font-size: 14px; padding: 8px 16px; border-radius: var(--crediball-radius, 9999px);
+    white-space: nowrap;
+  }
 `;
 var CrediballPaywallElement = class extends CrediballElement {
-  static get observedAttributes() {
-    return [...CrediballElement.observedAttributes, "open", "title", "description", "amounts"];
-  }
   constructor() {
     super();
+    this.referral = null;
+    this.referralCopied = false;
     this.shadow = this.attachShadow({ mode: "open" });
   }
+  static get observedAttributes() {
+    return [...CrediballElement.observedAttributes, "open", "title", "description", "amounts"];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    void this.loadReferral();
+  }
+  attributeChangedCallback(name) {
+    super.attributeChangedCallback(name);
+    if (this.isConnected && (name === "publishable-key" || name === "user-id" || name === "api-url")) {
+      void this.loadReferral();
+    }
+  }
+  /** Fetch the user's invite link for the "Refer a friend" row (best-effort). */
+  async loadReferral() {
+    const publishableKey = this.getAttribute("publishable-key");
+    const userId = this.getAttribute("user-id");
+    const apiUrl = this.getAttribute("api-url") ?? void 0;
+    if (!publishableKey || !userId) {
+      this.referral = null;
+      return;
+    }
+    try {
+      const data = await fetchReferral({ publishableKey, userId, apiUrl });
+      this.referral = data.enabled ? data : null;
+    } catch {
+      this.referral = null;
+    }
+    if (this.hasAttribute("open")) this.render();
+  }
   open() {
     this.setAttribute("open", "");
   }
@@ -357,6 +401,13 @@ var CrediballPaywallElement = class extends CrediballElement {
                    <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
                  </div>` : ""}
           <p class="error" hidden></p>
+          ${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-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>
@@ -365,6 +416,7 @@ var CrediballPaywallElement = class extends CrediballElement {
       if (e.target === e.currentTarget) this.close();
     });
     this.shadow.querySelector(".close")?.addEventListener("click", () => this.close());
+    this.shadow.querySelector(".referral-copy")?.addEventListener("click", () => void this.copyReferral());
     this.shadow.querySelectorAll("button.option").forEach((el) => {
       const btn = el;
       btn.addEventListener("click", () => {
@@ -414,6 +466,18 @@ var CrediballPaywallElement = class extends CrediballElement {
       });
     }
   }
+  /** Copy the invite link to the clipboard, with a 2s "Copied!" confirmation. */
+  async copyReferral() {
+    const link = this.referral?.link;
+    if (!link || typeof navigator === "undefined" || !navigator.clipboard) return;
+    await navigator.clipboard.writeText(link);
+    this.referralCopied = true;
+    this.render();
+    setTimeout(() => {
+      this.referralCopied = false;
+      if (this.hasAttribute("open")) this.render();
+    }, 2e3);
+  }
   /** Dispatch a cancelable option event; returns true when the host did NOT preventDefault. */
   emit(name, detail) {
     const ev = new CustomEvent(name, { detail, bubbles: true, composed: true, cancelable: true });
@@ -458,7 +522,7 @@ function showError(el, message) {
 
 // src/referral-card.ts
 import {
-  fetchReferral,
+  fetchReferral as fetchReferral2,
   captureReferral,
   completeStoredReferral
 } from "@crediball/core";
@@ -563,7 +627,7 @@ var CrediballReferralCardElement = class extends CrediballElement {
       return;
     }
     try {
-      this.data = await fetchReferral({ publishableKey, userId, apiUrl });
+      this.data = await fetchReferral2({ publishableKey, userId, apiUrl });
     } catch {
       this.data = null;
     }

package/dist/crediball-elements.iife.js

@@ -694,15 +694,59 @@ 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; }
+  .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;
+    font-size: 13px; color: var(--crediball-ink, #1d1d1f);
+    border: 1px solid var(--crediball-hairline, #e0e0e0);
+    border-radius: var(--crediball-radius, 9999px); padding: 8px 14px;
+  }
+  button.referral-copy {
+    flex: none; appearance: none; cursor: pointer; background: transparent;
+    color: var(--crediball-ink, #1d1d1f); border: 1px solid var(--crediball-hairline, #e0e0e0);
+    font: inherit; font-size: 14px; padding: 8px 16px; border-radius: var(--crediball-radius, 9999px);
+    white-space: nowrap;
+  }
 `;
   var CrediballPaywallElement = class extends CrediballElement {
-    static get observedAttributes() {
-      return [...CrediballElement.observedAttributes, "open", "title", "description", "amounts"];
-    }
     constructor() {
       super();
+      this.referral = null;
+      this.referralCopied = false;
       this.shadow = this.attachShadow({ mode: "open" });
     }
+    static get observedAttributes() {
+      return [...CrediballElement.observedAttributes, "open", "title", "description", "amounts"];
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      void this.loadReferral();
+    }
+    attributeChangedCallback(name) {
+      super.attributeChangedCallback(name);
+      if (this.isConnected && (name === "publishable-key" || name === "user-id" || name === "api-url")) {
+        void this.loadReferral();
+      }
+    }
+    /** Fetch the user's invite link for the "Refer a friend" row (best-effort). */
+    async loadReferral() {
+      const publishableKey = this.getAttribute("publishable-key");
+      const userId = this.getAttribute("user-id");
+      const apiUrl = this.getAttribute("api-url") ?? void 0;
+      if (!publishableKey || !userId) {
+        this.referral = null;
+        return;
+      }
+      try {
+        const data = await fetchReferral({ publishableKey, userId, apiUrl });
+        this.referral = data.enabled ? data : null;
+      } catch {
+        this.referral = null;
+      }
+      if (this.hasAttribute("open")) this.render();
+    }
     open() {
       this.setAttribute("open", "");
     }
@@ -768,6 +812,13 @@ var Crediball = (() => {
                    <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
                  </div>` : ""}
           <p class="error" hidden></p>
+          ${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-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>
@@ -776,6 +827,7 @@ var Crediball = (() => {
         if (e.target === e.currentTarget) this.close();
       });
       this.shadow.querySelector(".close")?.addEventListener("click", () => this.close());
+      this.shadow.querySelector(".referral-copy")?.addEventListener("click", () => void this.copyReferral());
       this.shadow.querySelectorAll("button.option").forEach((el) => {
         const btn = el;
         btn.addEventListener("click", () => {
@@ -825,6 +877,18 @@ var Crediball = (() => {
         });
       }
     }
+    /** Copy the invite link to the clipboard, with a 2s "Copied!" confirmation. */
+    async copyReferral() {
+      const link = this.referral?.link;
+      if (!link || typeof navigator === "undefined" || !navigator.clipboard) return;
+      await navigator.clipboard.writeText(link);
+      this.referralCopied = true;
+      this.render();
+      setTimeout(() => {
+        this.referralCopied = false;
+        if (this.hasAttribute("open")) this.render();
+      }, 2e3);
+    }
     /** Dispatch a cancelable option event; returns true when the host did NOT preventDefault. */
     emit(name, detail) {
       const ev = new CustomEvent(name, { detail, bubbles: true, composed: true, cancelable: true });

package/dist/index.d.ts

@@ -110,11 +110,19 @@ declare class CrediballLowCreditWarningElement extends CrediballElement {
  */
 declare class CrediballPaywallElement extends CrediballElement {
     private shadow;
+    private referral;
+    private referralCopied;
     static get observedAttributes(): string[];
     constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** Fetch the user's invite link for the "Refer a friend" row (best-effort). */
+    private loadReferral;
     open(): void;
     close(): void;
     protected render(): void;
+    /** 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. */
     private emit;
     private returnPath;

package/dist/index.js

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

package/dist/register.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/elements",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Framework-agnostic web components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",