recur-tw 0.6.1 → 0.7.1

package/dist/index.js

@@ -2226,6 +2226,271 @@ var init_checkout_button = __esm({
   }
 });
 
+// src/components/portal-button.ts
+var portal_button_exports = {};
+__export(portal_button_exports, {
+  RecurPortalButton: () => RecurPortalButton
+});
+var RecurPortalButton;
+var init_portal_button = __esm({
+  "src/components/portal-button.ts"() {
+    RecurPortalButton = class extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_isLoading", false);
+        __publicField(this, "handleClick", async (e) => {
+          e.preventDefault();
+          if (this._isLoading || this.hasAttribute("disabled")) {
+            return;
+          }
+          const portalUrl = this.getAttribute("portal-url");
+          const apiEndpoint = this.getAttribute("api-endpoint");
+          if (portalUrl) {
+            this.redirectToPortal(portalUrl);
+            return;
+          }
+          if (apiEndpoint) {
+            await this.fetchAndRedirect(apiEndpoint);
+            return;
+          }
+          this.dispatchError("Missing required attribute: either portal-url or api-endpoint must be provided");
+        });
+        this.attachShadow({ mode: "open" });
+      }
+      static get observedAttributes() {
+        return [
+          "portal-url",
+          "api-endpoint",
+          "customer-id",
+          "return-url",
+          "button-text",
+          "button-style",
+          "disabled",
+          "target"
+        ];
+      }
+      connectedCallback() {
+        this.render();
+        this.setupEventListeners();
+      }
+      disconnectedCallback() {
+        const button = this.shadowRoot?.querySelector("button");
+        if (button) {
+          button.removeEventListener("click", this.handleClick);
+        }
+      }
+      attributeChangedCallback(_name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+          this.render();
+        }
+      }
+      render() {
+        const buttonText = this.getAttribute("button-text") || this.textContent?.trim() || "\u7BA1\u7406\u8A02\u95B1";
+        const buttonStyle = this.getAttribute("button-style") || "primary";
+        const isDisabled = this.hasAttribute("disabled") || this._isLoading;
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+        }
+
+        button {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          font-size: 16px;
+          font-weight: 500;
+          padding: 12px 24px;
+          border-radius: 8px;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          min-width: 120px;
+          border: none;
+        }
+
+        button:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        /* Primary style (default) */
+        button.primary {
+          background: #18181b;
+          color: #ffffff;
+        }
+
+        button.primary:hover:not(:disabled) {
+          background: #27272a;
+        }
+
+        button.primary:active:not(:disabled) {
+          background: #3f3f46;
+        }
+
+        /* Outline style */
+        button.outline {
+          background: transparent;
+          color: #18181b;
+          border: 2px solid #18181b;
+        }
+
+        button.outline:hover:not(:disabled) {
+          background: #f4f4f5;
+        }
+
+        button.outline:active:not(:disabled) {
+          background: #e4e4e7;
+        }
+
+        /* Gradient style */
+        button.gradient {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: #ffffff;
+        }
+
+        button.gradient:hover:not(:disabled) {
+          opacity: 0.9;
+        }
+
+        button.gradient:active:not(:disabled) {
+          opacity: 0.8;
+        }
+
+        /* Link style */
+        button.link {
+          background: transparent;
+          color: #3b82f6;
+          padding: 4px 8px;
+          min-width: auto;
+          text-decoration: underline;
+        }
+
+        button.link:hover:not(:disabled) {
+          color: #2563eb;
+        }
+
+        button.link:active:not(:disabled) {
+          color: #1d4ed8;
+        }
+
+        /* Loading spinner */
+        .spinner {
+          width: 16px;
+          height: 16px;
+          border: 2px solid currentColor;
+          border-top-color: transparent;
+          border-radius: 50%;
+          animation: spin 0.6s linear infinite;
+        }
+
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+
+        /* Focus state */
+        button:focus-visible {
+          outline: 2px solid #3b82f6;
+          outline-offset: 2px;
+        }
+
+        /* Portal icon */
+        .portal-icon {
+          width: 18px;
+          height: 18px;
+        }
+      </style>
+
+      <button
+        class="${buttonStyle}"
+        ${isDisabled ? "disabled" : ""}
+        aria-busy="${this._isLoading}"
+      >
+        ${this._isLoading ? '<span class="spinner"></span>' : this.getPortalIcon()}
+        <span>${this._isLoading ? "\u8655\u7406\u4E2D..." : buttonText}</span>
+      </button>
+    `;
+      }
+      getPortalIcon() {
+        return `
+      <svg class="portal-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>
+        <circle cx="12" cy="7" r="4"/>
+      </svg>
+    `;
+      }
+      setupEventListeners() {
+        const button = this.shadowRoot?.querySelector("button");
+        if (button) {
+          button.addEventListener("click", this.handleClick);
+        }
+      }
+      redirectToPortal(url) {
+        const target = this.getAttribute("target");
+        this.dispatchEvent(new CustomEvent("portal-redirect", {
+          detail: { url },
+          bubbles: true,
+          composed: true
+        }));
+        if (target === "_blank") {
+          window.open(url, "_blank", "noopener,noreferrer");
+        } else {
+          window.location.href = url;
+        }
+      }
+      async fetchAndRedirect(apiEndpoint) {
+        const customerId = this.getAttribute("customer-id");
+        const returnUrl = this.getAttribute("return-url");
+        this._isLoading = true;
+        this.render();
+        this.setupEventListeners();
+        try {
+          const requestBody = {};
+          if (customerId) requestBody.customerId = customerId;
+          if (returnUrl) requestBody.returnUrl = returnUrl;
+          const response = await fetch(apiEndpoint, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify(requestBody)
+          });
+          if (!response.ok) {
+            const error = await response.json().catch(() => ({}));
+            throw new Error(error.error?.message || error.message || `HTTP ${response.status}: Failed to create portal session`);
+          }
+          const data = await response.json();
+          const portalUrl = data.url || data.portalUrl;
+          if (!portalUrl) {
+            throw new Error("Portal URL not found in response");
+          }
+          this._isLoading = false;
+          this.render();
+          this.setupEventListeners();
+          this.redirectToPortal(portalUrl);
+        } catch (error) {
+          this._isLoading = false;
+          this.render();
+          this.setupEventListeners();
+          this.dispatchError(error.message || "Failed to create portal session");
+        }
+      }
+      dispatchError(message) {
+        console.error("[recur-portal]", message);
+        this.dispatchEvent(new CustomEvent("portal-error", {
+          detail: { message },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    };
+    if (typeof window !== "undefined" && !customElements.get("recur-portal")) {
+      customElements.define("recur-portal", RecurPortalButton);
+    }
+  }
+});
+
 // src/components/index.ts
 async function registerComponents() {
   if (typeof window === "undefined") {
@@ -2240,7 +2505,8 @@ async function registerComponents() {
     Promise.resolve().then(() => (init_payment_form_skeleton(), payment_form_skeleton_exports)),
     Promise.resolve().then(() => (init_toast(), toast_exports)),
     Promise.resolve().then(() => (init_payment_form(), payment_form_exports)),
-    Promise.resolve().then(() => (init_checkout_button(), checkout_button_exports))
+    Promise.resolve().then(() => (init_checkout_button(), checkout_button_exports)),
+    Promise.resolve().then(() => (init_portal_button(), portal_button_exports))
   ]);
   const components = [
     "recur-loading-spinner",
@@ -2251,7 +2517,8 @@ async function registerComponents() {
     "recur-toast",
     "recur-toast-container",
     "recur-payment-form",
-    "recur-checkout"
+    "recur-checkout",
+    "recur-portal"
   ];
   const unregistered = components.filter((name) => !customElements.get(name));
   if (unregistered.length > 0) {