@slyxup/ui 0.2.9 → 0.2.11

package/src/index.ts

@@ -35,6 +35,7 @@ export {
   PricingTable,
   type PricingTableProps,
 } from './components/PricingTable/PricingTable';
+export { initPaddle, openPaddleCheckout } from './lib/paddle';
 
 import { useEffect } from 'react';
 import { injectStyles } from './styles';

package/src/lib/paddle.ts

@@ -0,0 +1,131 @@
+// Paddle.js loader — lazy-loads Paddle.js and initializes overlay checkout
+// Docs: https://developer.paddle.com/paddle-js
+
+declare global {
+  interface Window {
+    Paddle?: {
+      Initialize: (config: {
+        token: string;
+        eventCallback?: (data: Record<string, unknown>) => void;
+      }) => void;
+      Environment: { set: (env: 'sandbox' | 'production') => void };
+      Checkout: {
+        open: (options: {
+          items: Array<{ priceId: string; quantity: number }>;
+          customer?: { email?: string };
+          settings?: Record<string, unknown>;
+          customData?: Record<string, unknown>;
+        }) => void;
+      };
+    };
+  }
+}
+
+const PADDLE_JS_URL = 'https://cdn.paddle.com/paddle/v2/paddle.js';
+let paddleLoaded = false;
+let paddleInitPromise: Promise<void> | null = null;
+
+function loadScript(src: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (document.querySelector(`script[src="${src}"]`)) {
+      resolve();
+      return;
+    }
+    const s = document.createElement('script');
+    s.src = src;
+    s.onload = () => resolve();
+    s.onerror = () => reject(new Error(`Failed to load ${src}`));
+    document.head.appendChild(s);
+  });
+}
+
+/**
+ * Derive billing URL from auth API URL.
+ * localhost:8787 → localhost:8788, auth.slyxup.online → billing.slyxup.online
+ */
+function deriveBillingUrl(authApiUrl: string): string {
+  if (/^https?:\/\/localhost(:\d+)?$/.test(authApiUrl)) {
+    return authApiUrl.replace(/:(\d+)$/, ':8788');
+  }
+  return authApiUrl.replace('auth.slyxup.online', 'billing.slyxup.online');
+}
+
+interface BillingConfig {
+  environment: 'sandbox' | 'production';
+  clientToken: string;
+}
+
+let cachedConfig: BillingConfig | null = null;
+
+/**
+ * Fetch Paddle config from billing Worker's /v1/billing/config endpoint.
+ * Cached after first fetch.
+ */
+async function fetchBillingConfig(billingUrl: string): Promise<BillingConfig> {
+  if (cachedConfig) return cachedConfig;
+  const res = await fetch(`${billingUrl}/v1/billing/config`);
+  const data = (await res.json().catch(() => ({}))) as {
+    ok?: boolean;
+    environment?: string;
+    clientToken?: string;
+  };
+  if (!res.ok || !data.ok || !data.clientToken) {
+    throw new Error('Failed to fetch billing config');
+  }
+  cachedConfig = {
+    environment: (data.environment as 'sandbox' | 'production') ?? 'sandbox',
+    clientToken: data.clientToken,
+  };
+  return cachedConfig;
+}
+
+/**
+ * Load Paddle.js and initialize with config from billing Worker.
+ * Safe to call multiple times — only loads the script once.
+ */
+export async function initPaddle(authApiUrl: string): Promise<void> {
+  if (paddleLoaded && window.Paddle) return;
+
+  if (!paddleInitPromise) {
+    paddleInitPromise = (async () => {
+      const billingUrl = deriveBillingUrl(authApiUrl);
+      const config = await fetchBillingConfig(billingUrl);
+      await loadScript(PADDLE_JS_URL);
+      if (!window.Paddle) throw new Error('Paddle.js failed to load');
+      window.Paddle.Environment.set(config.environment);
+      window.Paddle.Initialize({
+        token: config.clientToken,
+        eventCallback: (data) => {
+          if (data && data.name === 'checkout.completed') {
+            // Subscription is created via webhook. Notify the host app so it can
+            // refresh billing state and show a success confirmation.
+            window.dispatchEvent(new CustomEvent('slyxup:checkout-completed'));
+          }
+        },
+      });
+      paddleLoaded = true;
+    })();
+  }
+  return paddleInitPromise;
+}
+
+/**
+ * Open Paddle overlay checkout for a given price ID.
+ * `customData` is copied to the created transaction (and, for recurring
+ * items, to the related subscription) — the billing webhook uses it to
+ * attribute the subscription to a SlyxUp user + project + plan.
+ */
+export function openPaddleCheckout(
+  priceId: string,
+  customerEmail?: string,
+  customData?: Record<string, unknown>
+): void {
+  if (!window.Paddle) {
+    throw new Error('Paddle.js not initialized — call initPaddle() first');
+  }
+  window.Paddle.Checkout.open({
+    items: [{ priceId, quantity: 1 }],
+    ...(customerEmail ? { customer: { email: customerEmail } } : {}),
+    ...(customData ? { customData } : {}),
+  });
+}

package/src/styles.ts

@@ -443,6 +443,14 @@ export const CSS = `
 .slx-session-device { font-size: 13.5px; font-weight: 550; color: var(--slx-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
 .slx-session-sub { font-size: 12px; color: var(--slx-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
+/* ── Pagination ── */
+.slx-pagination {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  margin-top: 14px; padding-top: 14px;
+  border-top: 1px solid var(--slx-border);
+}
+.slx-pagination-info { font-size: 12.5px; color: var(--slx-muted); white-space: nowrap; }
+
 /* ── Danger zone ── */
 .slx-danger-zone {
   border: 1px solid color-mix(in srgb, var(--slx-danger) 30%, transparent);
@@ -570,6 +578,8 @@ export const CSS = `
   .slx-billing-plans { grid-template-columns: 1fr; }
   .slx-session { flex-direction: column; align-items: flex-start; gap: 10px; }
   .slx-session .slx-btn-danger-outline { align-self: stretch; text-align: center; justify-content: center; }
+  .slx-pagination { flex-wrap: wrap; gap: 6px; }
+  .slx-pagination .slx-btn-secondary { font-size: 12px; padding: 4px 10px; }
   .slx-invoice-row { flex-wrap: wrap; gap: 6px; }
 }
 @media (max-width: 380px) {