@slyxup/ui 0.2.7 → 0.2.9

package/src/components/UserProfile/UserProfile.tsx

@@ -11,15 +11,31 @@ export interface UserProfileProps {
   onDeleted?: () => void;
 }
 
-type Tab = 'profile' | 'security';
+type Tab = 'profile' | 'security' | 'billing';
 
-function initials(user: { firstName: string | null; email: string }): string {
-  const n = user.firstName?.trim();
-  if (n) return n.slice(0, 1).toUpperCase();
+function initials(user: {
+  firstName: string | null;
+  lastName?: string | null;
+  email: string;
+}): string {
+  const f = user.firstName?.trim();
+  const l = user.lastName?.trim();
+  if (f && l) return (f[0] + l[0]).toUpperCase();
+  if (f) return f.slice(0, 1).toUpperCase();
+  if (l) return l.slice(0, 1).toUpperCase();
   return user.email.slice(0, 1).toUpperCase();
 }
 
-/** Best-effort device label from a user agent string. */
+function displayName(user: {
+  firstName: string | null;
+  lastName: string | null;
+  email: string;
+}): string {
+  const parts = [user.firstName?.trim(), user.lastName?.trim()].filter(Boolean);
+  const name = parts.join(' ');
+  return name || user.email;
+}
+
 function deviceLabel(ua: string | null): string {
   if (!ua) return 'Unknown device';
   const os = /Windows/i.test(ua)
@@ -56,6 +72,28 @@ function formatDate(iso: string): string {
       });
 }
 
+function formatCurrency(amount: number, currency: string): string {
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency: currency.toUpperCase(),
+    }).format(amount / 100);
+  } catch {
+    return `${(amount / 100).toFixed(2)} ${currency.toUpperCase()}`;
+  }
+}
+
+interface Plan {
+  id: string;
+  name: string;
+  amount: number;
+  currency: string;
+  interval: string;
+  trialDays: number | null;
+  features: string[] | null;
+  isPopular: boolean;
+}
+
 export function UserProfile({
   modal = true,
   onClose,
@@ -90,18 +128,43 @@ export function UserProfile({
   const [revokingId, setRevokingId] = useState<string | null>(null);
   const [othersRevoking, setOthersRevoking] = useState(false);
 
+  // ── Billing state ──
+  const [billingLoading, setBillingLoading] = useState(true);
+  const [subscription, setSubscription] = useState<{
+    id: string;
+    status: string;
+    planId?: string | null;
+    planName: string | null;
+    currentPeriodEnd: string | null;
+    cancelAtPeriodEnd: boolean;
+  } | null>(null);
+  const [invoices, setInvoices] = useState<
+    {
+      id: string;
+      amount: number;
+      currency: string;
+      status: string;
+      billedAt: string | null;
+    }[]
+  >([]);
+  const [plans, setPlans] = useState<Plan[]>([]);
+  const [plansLoading, setPlansLoading] = useState(false);
+  const [checkoutId, setCheckoutId] = useState<string | null>(null);
+
   // ── Danger zone state ──
   const [confirmText, setConfirmText] = useState('');
   const [deleteBusy, setDeleteBusy] = useState(false);
   const [deleteError, setDeleteError] = useState<string | null>(null);
 
+  // Sync form fields when user loads/updates (ensures firstName/lastName show correctly
+  // after SlyxUpProvider fetches client.users.me()). Guard against stale overwrites.
   useEffect(() => {
     if (user) {
       setFirstName(user.firstName ?? '');
       setLastName(user.lastName ?? '');
       setAvatarUrl(user.avatarUrl ?? '');
     }
-  }, [user]);
+  }, [user?.firstName, user?.lastName, user?.avatarUrl]);
 
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
@@ -123,9 +186,130 @@ export function UserProfile({
     }
   }, [client]);
 
+  const loadBilling = useCallback(async () => {
+    setBillingLoading(true);
+    setPlansLoading(true);
+    try {
+      const rawApiUrl =
+        (client as unknown as { apiUrl: string }).apiUrl ?? 'https://auth.slyxup.online';
+      const billingUrl = rawApiUrl.replace('auth.slyxup.online', 'billing.slyxup.online');
+      const token = (client as unknown as { _token?: string; getToken?: () => string | undefined })?._token
+        ?? (client as unknown as { getToken?: () => string | undefined })?.getToken?.();
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+      if (token) headers.Authorization = `Bearer ${token}`;
+      // Also forward publishable key if available (helps billing resolve project)
+      const pubKey = (client as unknown as { publishableKey?: string })?.publishableKey;
+      if (pubKey && pubKey !== 'pk_test_missing') headers['X-Publishable-Key'] = pubKey;
+
+      // Derive projectId for plans: prefer user.projectId, then try subscription's projectId, fallback none
+      const projectId = (user as unknown as { projectId?: string | null })?.projectId ?? null;
+
+      // Fetch subscription + invoices (new /v1/billing/* with fallback to legacy /v1/*)
+      async function fetchJson(url: string) {
+        const res = await fetch(url, { headers, credentials: 'include' });
+        if (!res.ok) throw new Error(String(res.status));
+        return res.json();
+      }
+
+      // Subscription
+      let subData: unknown = null;
+      for (const path of [
+        `${billingUrl}/v1/billing/subscription${projectId ? `?projectId=${projectId}` : ''}`,
+        `${billingUrl}/v1/subscription`,
+      ]) {
+        try {
+          const j = await fetchJson(path) as Record<string, unknown>;
+          if (j && (j as { ok?: boolean }).ok !== false) {
+            subData = j;
+            break;
+          }
+        } catch {
+          // try next path
+        }
+      }
+      if (subData) {
+        const sd = subData as {
+          ok?: boolean;
+          subscription?: Record<string, unknown> | null;
+          subscriptions?: Record<string, unknown>[];
+        };
+        let sub: Record<string, unknown> | null = null;
+        if (sd.subscription !== undefined) sub = sd.subscription as Record<string, unknown> | null;
+        else if (Array.isArray(sd.subscriptions) && sd.subscriptions.length > 0) sub = sd.subscriptions[0] as Record<string, unknown>;
+
+        if (sub) {
+          setSubscription({
+            id: String(sub.id ?? ''),
+            status: String(sub.status ?? 'active'),
+            planId: (sub.planId as string | null) ?? (sub.plan_id as string | null) ?? null,
+            planName: (sub.planName as string | null) ?? (sub.plan_name as string | null) ?? (sub.name as string | null) ?? null,
+            currentPeriodEnd: (sub.currentPeriodEnd as string | null) ?? (sub.current_period_end as string | null) ?? (sub.currentPeriod_end as string | null) ?? null,
+            cancelAtPeriodEnd: Boolean(sub.cancelAtPeriodEnd ?? sub.cancel_at_period_end ?? false),
+          });
+        } else {
+          setSubscription(null);
+        }
+      } else {
+        setSubscription(null);
+      }
+
+      // Invoices
+      for (const path of [`${billingUrl}/v1/billing/invoices`, `${billingUrl}/v1/invoices`]) {
+        try {
+          const invJ = (await fetchJson(path)) as { ok?: boolean; invoices?: unknown[] };
+          if (invJ?.ok !== false && Array.isArray(invJ.invoices)) {
+            setInvoices(
+              (invJ.invoices as Record<string, unknown>[]).map((inv) => ({
+                id: String(inv.id),
+                amount: Number(inv.amount ?? 0),
+                currency: String(inv.currency ?? 'USD'),
+                status: String(inv.status ?? 'pending'),
+                billedAt: (inv.billedAt as string | null) ?? (inv.billed_at as string | null) ?? null,
+              }))
+            );
+            break;
+          }
+        } catch {
+          // try next
+        }
+      }
+
+      // Plans (needs projectId — if missing, try without and degrade gracefully)
+      const planPaths: string[] = [];
+      if (projectId) planPaths.push(`${billingUrl}/v1/billing/plans?projectId=${projectId}`);
+      // Also try without projectId as last resort (will 400 but we catch)
+      planPaths.push(`${billingUrl}/v1/billing/plans?projectId=${projectId ?? ''}`);
+      planPaths.push(`${billingUrl}/v1/plans`);
+
+      let gotPlans = false;
+      for (const p of planPaths) {
+        try {
+          const pj = (await fetchJson(p)) as { ok?: boolean; plans?: Plan[] };
+          if (pj?.ok !== false && Array.isArray(pj.plans)) {
+            setPlans(pj.plans);
+            gotPlans = true;
+            break;
+          }
+        } catch {
+          // continue
+        }
+      }
+      if (!gotPlans) setPlans([]);
+    } catch {
+      // Billing unavailable — show empty state, keep plans empty
+      setPlans([]);
+    } finally {
+      setBillingLoading(false);
+      setPlansLoading(false);
+    }
+  }, [client, user]);
+
   useEffect(() => {
     if (tab === 'security') void loadSessions();
-  }, [tab, loadSessions]);
+    if (tab === 'billing') void loadBilling();
+  }, [tab, loadSessions, loadBilling]);
 
   async function onProfileSubmit(e: FormEvent) {
     e.preventDefault();
@@ -174,9 +358,7 @@ export function UserProfile({
       setConfirmPassword('');
       setTimeout(() => setPwSaved(false), 3000);
     } catch (err) {
-      setPwError(
-        err instanceof Error ? err.message : 'Failed to change password'
-      );
+      setPwError(err instanceof Error ? err.message : 'Failed to change password');
     } finally {
       setPwBusy(false);
     }
@@ -210,33 +392,69 @@ export function UserProfile({
       await client.auth.signOut().catch(() => undefined);
       onDeleted?.();
     } catch (err) {
-      setDeleteError(
-        err instanceof Error ? err.message : 'Failed to delete account'
-      );
+      setDeleteError(err instanceof Error ? err.message : 'Failed to delete account');
     } finally {
       setDeleteBusy(false);
     }
   }
 
+  async function handleCheckout(planId: string) {
+    setCheckoutId(planId);
+    try {
+      const rawApiUrl =
+        (client as unknown as { apiUrl: string }).apiUrl ?? 'https://auth.slyxup.online';
+      const billingUrl = rawApiUrl.replace('auth.slyxup.online', 'billing.slyxup.online');
+      const token = (client as unknown as { _token?: string; getToken?: () => string | undefined })?._token
+        ?? (client as unknown as { getToken?: () => string | undefined })?.getToken?.();
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+      if (token) headers.Authorization = `Bearer ${token}`;
+      const pubKey = (client as unknown as { publishableKey?: string })?.publishableKey;
+      if (pubKey && pubKey !== 'pk_test_missing') headers['X-Publishable-Key'] = pubKey;
+
+      const res = await fetch(`${billingUrl}/v1/billing/checkout`, {
+        method: 'POST',
+        headers,
+        credentials: 'include',
+        body: JSON.stringify({ planId }),
+      });
+      const data = (await res.json().catch(() => ({}))) as Record<string, unknown>;
+      if (res.ok && typeof data.checkoutUrl === 'string' && data.checkoutUrl) {
+        window.location.href = data.checkoutUrl as string;
+        return;
+      }
+      if (!res.ok) throw new Error(typeof data.error === 'string' ? data.error : `Checkout failed (${res.status})`);
+    } catch (err) {
+      // Fallback: if billing checkout isn't configured, just log. Parent can handle via window redirect.
+      console.error('[SlyxUp] checkout failed', err);
+    } finally {
+      setCheckoutId(null);
+    }
+  }
+
   if (!isLoaded) return <div className="slx-card" aria-busy="true" />;
   if (!user) return null;
 
   const emailVerified = user.emailVerified;
+  const name = displayName(user as { firstName: string | null; lastName: string | null; email: string });
 
-  const body = (
-    <div
-      // biome-ignore lint/a11y/useSemanticElements: rendered inside a popover, not a top-level dialog
-      role="dialog"
-      aria-modal={modal || undefined}
-      aria-label="Account settings"
-    >
+  // Resolve current plan name via plans lookup if subscription has planId but no planName
+  const currentPlan = subscription
+    ? plans.find((p) => p.id === subscription.planId) ?? null
+    : null;
+  const resolvedPlanName = subscription?.planName ?? currentPlan?.name ?? null;
+
+  const bodyInner = (
+    <>
       <div className="slx-profile-head">
         <h2 className="slx-profile-title">Account settings</h2>
         {modal && (
           <button
             type="button"
             className="slx-profile-close"
-            onClick={onClose}
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose?.();
+            }}
             aria-label="Close account settings"
           >
             ✕
@@ -262,28 +480,37 @@ export function UserProfile({
           >
             <ShieldIcon /> Security
           </button>
+          <button
+            type="button"
+            className={`slx-profile-nav-btn${tab === 'billing' ? ' on' : ''}`}
+            onClick={() => setTab('billing')}
+            aria-current={tab === 'billing' ? 'page' : undefined}
+          >
+            <CreditCardIcon /> Billing
+          </button>
         </nav>
 
         <div className="slx-profile-content">
-          {tab === 'profile' ? (
+          {/* ── Profile Tab ── */}
+          {tab === 'profile' && (
             <>
               <section className="slx-profile-sec">
                 <div className="slx-avatar-row">
                   <div className="slx-avatar-lg" aria-hidden="true">
-                    {user.avatarUrl ? (
-                      <img src={user.avatarUrl} alt="" />
-                    ) : (
-                      initials(user)
-                    )}
+                    {user.avatarUrl ? <img src={user.avatarUrl} alt="" /> : initials(user as { firstName: string | null; lastName: string | null; email: string })}
+                  </div>
+                  <div style={{ minWidth: 0 }}>
+                    <p className="slx-row-value" style={{ margin: 0, wordBreak: 'break-word' }}>
+                      {name}
+                    </p>
+                    <p className="slx-row-label" style={{ wordBreak: 'break-all' }}>
+                      {user.email}
+                    </p>
                   </div>
-                  <p className="slx-hint" style={{ margin: 0 }}>
-                    Your avatar is loaded from its URL. Paste any public image
-                    link below.
-                  </p>
                 </div>
 
                 {saved && (
-                  <p className="slx-error-text" style={{ color: '#34a853' }}>
+                  <p className="slx-error-text" style={{ color: 'var(--slx-success)' }}>
                     Profile saved.
                   </p>
                 )}
@@ -297,6 +524,7 @@ export function UserProfile({
                       id="slx-up-first"
                       className="slx-input"
                       type="text"
+                      autoComplete="given-name"
                       value={firstName}
                       onChange={(e) => setFirstName(e.target.value)}
                     />
@@ -309,6 +537,7 @@ export function UserProfile({
                       id="slx-up-last"
                       className="slx-input"
                       type="text"
+                      autoComplete="family-name"
                       value={lastName}
                       onChange={(e) => setLastName(e.target.value)}
                     />
@@ -325,6 +554,7 @@ export function UserProfile({
                       value={avatarUrl}
                       onChange={(e) => setAvatarUrl(e.target.value)}
                     />
+                    <p className="slx-hint">Paste a public image URL for your avatar.</p>
                   </div>
                   <button className="slx-btn" type="submit" disabled={busy}>
                     {busy ? 'Saving…' : 'Save changes'}
@@ -334,24 +564,25 @@ export function UserProfile({
 
               <section className="slx-profile-sec">
                 <h3 className="slx-sec-title">Email</h3>
-                <div className="slx-row">
-                  <div>
-                    <p className="slx-row-value">{user.email}</p>
+                <div className="slx-row" style={{ flexWrap: 'wrap', gap: 8 }}>
+                  <div style={{ minWidth: 0 }}>
+                    <p className="slx-row-value" style={{ wordBreak: 'break-all' }}>
+                      {user.email}
+                    </p>
                     <p className="slx-row-label">Primary email</p>
                   </div>
                   {emailVerified ? (
-                    <span className="slx-badge slx-badge-ok">✓ Verified</span>
+                    <span className="slx-badge slx-badge-ok">Verified</span>
                   ) : (
                     <span
                       style={{
                         display: 'inline-flex',
                         alignItems: 'center',
                         gap: 8,
+                        flexWrap: 'wrap',
                       }}
                     >
-                      <span className="slx-badge slx-badge-warn">
-                        Unverified
-                      </span>
+                      <span className="slx-badge slx-badge-warn">Unverified</span>
                       <button
                         type="button"
                         className="slx-link"
@@ -365,12 +596,15 @@ export function UserProfile({
                 </div>
               </section>
             </>
-          ) : (
+          )}
+
+          {/* ── Security Tab ── */}
+          {tab === 'security' && (
             <>
               <section className="slx-profile-sec">
                 <h3 className="slx-sec-title">Change password</h3>
                 {pwSaved && (
-                  <p className="slx-error-text" style={{ color: '#34a853' }}>
+                  <p className="slx-error-text" style={{ color: 'var(--slx-success)' }}>
                     Password updated.
                   </p>
                 )}
@@ -430,6 +664,8 @@ export function UserProfile({
                 <h3 className="slx-sec-title">Active sessions</h3>
                 {sessionsLoading ? (
                   <p className="slx-hint">Loading sessions…</p>
+                ) : sessions.length === 0 ? (
+                  <p className="slx-hint">No active sessions.</p>
                 ) : (
                   <>
                     {sessions.map((s) => (
@@ -437,18 +673,10 @@ export function UserProfile({
                         <div className="slx-session-meta">
                           <p className="slx-session-device">
                             {deviceLabel(s.userAgent)}
-                            {s.isCurrent && (
-                              <span className="slx-badge slx-badge-accent">
-                                This device
-                              </span>
-                            )}
+                            {s.isCurrent && <span className="slx-badge slx-badge-accent">This device</span>}
                           </p>
                           <p className="slx-session-sub">
-                            {[
-                              s.ipAddress,
-                              `created ${formatDate(s.createdAt)}`,
-                              `expires ${formatDate(s.expiresAt)}`,
-                            ]
+                            {[s.ipAddress, `created ${formatDate(s.createdAt)}`, `expires ${formatDate(s.expiresAt)}`]
                               .filter(Boolean)
                               .join(' · ')}
                           </p>
@@ -469,13 +697,11 @@ export function UserProfile({
                       <button
                         type="button"
                         className="slx-btn-danger-outline"
-                        style={{ width: '100%', padding: '9px 11px' }}
+                        style={{ width: '100%', marginTop: 4 }}
                         onClick={onRevokeOthers}
                         disabled={othersRevoking}
                       >
-                        {othersRevoking
-                          ? 'Signing out…'
-                          : 'Sign out other devices'}
+                        {othersRevoking ? 'Signing out…' : 'Sign out other devices'}
                       </button>
                     )}
                   </>
@@ -485,9 +711,8 @@ export function UserProfile({
               <section className="slx-danger-zone">
                 <p className="slx-danger-title">Danger zone</p>
                 <p className="slx-danger-desc">
-                  Permanently deletes your account and all associated data.
-                  Active sessions are revoked immediately. This cannot be
-                  undone.
+                  Permanently deletes your account and all associated data. Active sessions are revoked immediately. This
+                  cannot be undone.
                 </p>
                 {deleteError && <p className="slx-error-text">{deleteError}</p>}
                 <div className="slx-field">
@@ -518,21 +743,272 @@ export function UserProfile({
               </section>
             </>
           )}
+
+          {/* ── Billing Tab ── */}
+          {tab === 'billing' &&
+            (billingLoading ? (
+              <section className="slx-profile-sec">
+                <p className="slx-hint">Loading billing information…</p>
+              </section>
+            ) : !subscription ? (
+              <>
+                <section className="slx-profile-sec">
+                  <h3 className="slx-sec-title">Subscription</h3>
+                  <div className="slx-billing-card">
+                    <p className="slx-billing-plan">No active subscription</p>
+                    <p className="slx-billing-detail">You don&apos;t have a subscription yet. Choose a plan to get started.</p>
+                  </div>
+                </section>
+
+                <section className="slx-profile-sec">
+                  <h3 className="slx-sec-title">Available plans</h3>
+                  {plansLoading ? (
+                    <p className="slx-hint">Loading plans…</p>
+                  ) : plans.length === 0 ? (
+                    <div className="slx-billing-card" style={{ textAlign: 'center' }}>
+                      <p className="slx-billing-detail">No plans configured for this project yet.</p>
+                      <p className="slx-hint" style={{ marginTop: 6 }}>
+                        Ask your admin to create a plan in billing.
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="slx-billing-plans">
+                      {plans.map((plan) => (
+                        <div key={plan.id} className={`slx-plan-card${plan.isPopular ? ' popular' : ''}`}>
+                          {plan.isPopular && <span className="slx-plan-badge">POPULAR</span>}
+                          <p className="slx-plan-name">{plan.name}</p>
+                          <p style={{ margin: '2px 0 0' }}>
+                            <span className="slx-plan-price">{formatCurrency(plan.amount, plan.currency)}</span>
+                            <span className="slx-plan-interval">/{plan.interval}</span>
+                          </p>
+                          {plan.trialDays ? (
+                            <p className="slx-billing-detail" style={{ color: 'var(--slx-accent)', marginTop: 4 }}>
+                              {plan.trialDays} day free trial
+                            </p>
+                          ) : (
+                            <p className="slx-billing-detail" style={{ visibility: 'hidden', marginTop: 4 }}>
+                              &nbsp;
+                            </p>
+                          )}
+                          <ul className="slx-plan-features">
+                            {(plan.features ?? []).map((f) => (
+                              <li key={f}>{f}</li>
+                            ))}
+                          </ul>
+                          <button
+                            type="button"
+                            className="slx-btn slx-plan-cta"
+                            onClick={() => handleCheckout(plan.id)}
+                            disabled={checkoutId === plan.id}
+                          >
+                            {checkoutId === plan.id ? 'Redirecting…' : 'Choose plan'}
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </section>
+
+                {invoices.length > 0 && (
+                  <section className="slx-profile-sec">
+                    <h3 className="slx-sec-title">Invoices</h3>
+                    {invoices.map((inv) => (
+                      <div key={inv.id} className="slx-invoice-row">
+                        <span className="slx-invoice-date">{inv.billedAt ? formatDate(inv.billedAt) : '—'}</span>
+                        <span className="slx-invoice-amount">{formatCurrency(inv.amount, inv.currency)}</span>
+                        <span
+                          className={`slx-badge ${
+                            inv.status === 'paid' ? 'slx-badge-ok' : inv.status === 'overdue' ? 'slx-badge-warn' : 'slx-badge-accent'
+                          }`}
+                        >
+                          {inv.status}
+                        </span>
+                      </div>
+                    ))}
+                  </section>
+                )}
+              </>
+            ) : (
+              <>
+                <section className="slx-profile-sec">
+                  <h3 className="slx-sec-title">Current plan</h3>
+                  <div className="slx-billing-card">
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'flex-start',
+                        gap: 12,
+                        flexWrap: 'wrap',
+                      }}
+                    >
+                      <div style={{ minWidth: 0 }}>
+                        <p className="slx-billing-plan">{resolvedPlanName ?? 'Subscription'}</p>
+                        <p className="slx-billing-detail">
+                          Status:{' '}
+                          <span className={`slx-billing-status slx-billing-status-${subscription.status}`}>
+                            {subscription.status}
+                          </span>
+                        </p>
+                        {subscription.currentPeriodEnd && (
+                          <p className="slx-billing-detail">
+                            {subscription.cancelAtPeriodEnd
+                              ? `Cancels ${formatDate(subscription.currentPeriodEnd)}`
+                              : `Renews ${formatDate(subscription.currentPeriodEnd)}`}
+                          </p>
+                        )}
+                        {subscription.cancelAtPeriodEnd && (
+                          <p className="slx-billing-detail" style={{ color: 'var(--slx-danger)', fontWeight: 600 }}>
+                            Scheduled to cancel at period end
+                          </p>
+                        )}
+                      </div>
+                      {currentPlan && (
+                        <span className="slx-badge slx-badge-accent" style={{ flexShrink: 0 }}>
+                          {formatCurrency(currentPlan.amount, currentPlan.currency)}/{currentPlan.interval}
+                        </span>
+                      )}
+                    </div>
+                    {currentPlan?.features && currentPlan.features.length > 0 && (
+                      <ul className="slx-plan-features" style={{ margin: '12px 0 0' }}>
+                        {currentPlan.features.map((f) => (
+                          <li key={f}>{f}</li>
+                        ))}
+                      </ul>
+                    )}
+                    <div className="slx-billing-actions">
+                      <button type="button" className="slx-btn-secondary" onClick={() => void loadBilling()}>
+                        Refresh
+                      </button>
+                    </div>
+                  </div>
+                </section>
+
+                {/* Upgrade / Downgrade plans */}
+                {plansLoading ? (
+                  <section className="slx-profile-sec">
+                    <p className="slx-hint">Loading available plans…</p>
+                  </section>
+                ) : plans.length > 0 ? (
+                  <section className="slx-profile-sec">
+                    <h3 className="slx-sec-title">Available plans</h3>
+                    <p className="slx-hint" style={{ marginBottom: 8 }}>
+                      Switch plans anytime. Changes apply at the next billing cycle.
+                    </p>
+                    <div className="slx-billing-plans">
+                      {plans.map((plan) => {
+                        const isCurrent = subscription.planId
+                          ? subscription.planId === plan.id
+                          : resolvedPlanName === plan.name;
+                        const currentAmount = currentPlan?.amount ?? 0;
+                        const isUpgrade = plan.amount > currentAmount;
+                        const isDowngrade = plan.amount < currentAmount && !isCurrent;
+                        return (
+                          <div
+                            key={plan.id}
+                            className={`slx-plan-card${plan.isPopular ? ' popular' : ''}`}
+                            style={isCurrent ? { opacity: 0.92 } : undefined}
+                          >
+                            {plan.isPopular && !isCurrent && <span className="slx-plan-badge">POPULAR</span>}
+                            {isCurrent && <span className="slx-plan-badge" style={{ background: 'var(--slx-success)' }}>CURRENT</span>}
+                            <p className="slx-plan-name">{plan.name}</p>
+                            <p style={{ margin: '2px 0 0' }}>
+                              <span className="slx-plan-price">{formatCurrency(plan.amount, plan.currency)}</span>
+                              <span className="slx-plan-interval">/{plan.interval}</span>
+                            </p>
+                            {plan.trialDays ? (
+                              <p className="slx-billing-detail" style={{ color: 'var(--slx-accent)', marginTop: 4 }}>
+                                {plan.trialDays} day trial
+                              </p>
+                            ) : (
+                              <p className="slx-billing-detail" style={{ visibility: 'hidden', marginTop: 4 }}>
+                                &nbsp;
+                              </p>
+                            )}
+                            <ul className="slx-plan-features">
+                              {(plan.features ?? []).map((f) => (
+                                <li key={f}>{f}</li>
+                              ))}
+                            </ul>
+                            <button
+                              type="button"
+                              className={isCurrent ? 'slx-btn-secondary slx-plan-cta' : 'slx-btn slx-plan-cta'}
+                              disabled={isCurrent || checkoutId === plan.id}
+                              onClick={() => handleCheckout(plan.id)}
+                            >
+                              {isCurrent
+                                ? 'Current plan'
+                                : checkoutId === plan.id
+                                  ? 'Redirecting…'
+                                  : isUpgrade
+                                    ? 'Upgrade'
+                                    : isDowngrade
+                                      ? 'Downgrade'
+                                      : 'Switch plan'}
+                            </button>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </section>
+                ) : null}
+
+                {invoices.length > 0 && (
+                  <section className="slx-profile-sec">
+                    <h3 className="slx-sec-title">Invoices</h3>
+                    {invoices.map((inv) => (
+                      <div key={inv.id} className="slx-invoice-row">
+                        <span className="slx-invoice-date">{inv.billedAt ? formatDate(inv.billedAt) : '—'}</span>
+                        <span className="slx-invoice-amount">{formatCurrency(inv.amount, inv.currency)}</span>
+                        <span
+                          className={`slx-badge ${
+                            inv.status === 'paid' ? 'slx-badge-ok' : inv.status === 'overdue' ? 'slx-badge-warn' : 'slx-badge-accent'
+                          }`}
+                        >
+                          {inv.status}
+                        </span>
+                      </div>
+                    ))}
+                  </section>
+                )}
+              </>
+            ))}
         </div>
       </div>
-    </div>
+    </>
   );
 
-  if (!modal) return body;
+  if (!modal) {
+    return (
+      <div className="slx-profile-modal" style={{ maxHeight: 'none' }}>
+        {bodyInner}
+      </div>
+    );
+  }
 
+  // Modal overlay — click on backdrop closes, click inside modal does not.
+  // Use onMouseDown + onClick for desktop + mobile reliability; close button also works via stopPropagation.
   return (
     <div
       className="slx-overlay"
       onMouseDown={(e) => {
         if (e.target === e.currentTarget) onClose?.();
       }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose?.();
+      }}
+      role="presentation"
     >
-      {body}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Account settings"
+        className="slx-profile-modal"
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {bodyInner}
+      </div>
     </div>
   );
 }
@@ -573,3 +1049,22 @@ function ShieldIcon() {
     </svg>
   );
 }
+
+function CreditCardIcon() {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+      <line x1="1" y1="10" x2="23" y2="10" />
+    </svg>
+  );
+}