@slyxup/ui 0.2.6 → 0.2.8

package/src/components/UserProfile/UserProfile.tsx

@@ -11,7 +11,7 @@ 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();
@@ -19,7 +19,6 @@ function initials(user: { firstName: string | null; email: string }): string {
   return user.email.slice(0, 1).toUpperCase();
 }
 
-/** Best-effort device label from a user agent string. */
 function deviceLabel(ua: string | null): string {
   if (!ua) return 'Unknown device';
   const os = /Windows/i.test(ua)
@@ -56,6 +55,13 @@ function formatDate(iso: string): string {
       });
 }
 
+function formatCurrency(amount: number, currency: string): string {
+  return new Intl.NumberFormat(undefined, {
+    style: 'currency',
+    currency: currency.toUpperCase(),
+  }).format(amount / 100);
+}
+
 export function UserProfile({
   modal = true,
   onClose,
@@ -90,6 +96,25 @@ 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;
+    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;
+    }[]
+  >([]);
+
   // ── Danger zone state ──
   const [confirmText, setConfirmText] = useState('');
   const [deleteBusy, setDeleteBusy] = useState(false);
@@ -123,9 +148,47 @@ export function UserProfile({
     }
   }, [client]);
 
+  const loadBilling = useCallback(async () => {
+    setBillingLoading(true);
+    try {
+      const billingUrl =
+        (client as unknown as { apiUrl: string }).apiUrl?.replace(
+          'auth.slyxup.online',
+          'billing.slyxup.online'
+        ) ?? 'https://billing.slyxup.online';
+      const token = (client as unknown as { _token?: string })?._token;
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+      if (token) headers.Authorization = `Bearer ${token}`;
+
+      const [subRes, invRes] = await Promise.allSettled([
+        fetch(`${billingUrl}/v1/subscription`, {
+          headers,
+          credentials: 'include',
+        }),
+        fetch(`${billingUrl}/v1/invoices`, { headers, credentials: 'include' }),
+      ]);
+
+      if (subRes.status === 'fulfilled' && subRes.value.ok) {
+        const sub = await subRes.value.json();
+        if (sub.ok) setSubscription(sub.subscription ?? null);
+      }
+      if (invRes.status === 'fulfilled' && invRes.value.ok) {
+        const inv = await invRes.value.json();
+        if (inv.ok) setInvoices(inv.invoices ?? []);
+      }
+    } catch {
+      // Billing unavailable — show empty state
+    } finally {
+      setBillingLoading(false);
+    }
+  }, [client]);
+
   useEffect(() => {
     if (tab === 'security') void loadSessions();
-  }, [tab, loadSessions]);
+    if (tab === 'billing') void loadBilling();
+  }, [tab, loadSessions, loadBilling]);
 
   async function onProfileSubmit(e: FormEvent) {
     e.preventDefault();
@@ -262,10 +325,19 @@ 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">
@@ -276,14 +348,21 @@ export function UserProfile({
                       initials(user)
                     )}
                   </div>
-                  <p className="slx-hint" style={{ margin: 0 }}>
-                    Your avatar is loaded from its URL. Paste any public image
-                    link below.
-                  </p>
+                  <div>
+                    <p className="slx-row-value" style={{ margin: 0 }}>
+                      {user.firstName
+                        ? `${user.firstName}${user.lastName ? ` ${user.lastName}` : ''}`
+                        : user.email}
+                    </p>
+                    <p className="slx-row-label">{user.email}</p>
+                  </div>
                 </div>
 
                 {saved && (
-                  <p className="slx-error-text" style={{ color: '#34a853' }}>
+                  <p
+                    className="slx-error-text"
+                    style={{ color: 'var(--slx-success)' }}
+                  >
                     Profile saved.
                   </p>
                 )}
@@ -325,6 +404,9 @@ 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'}
@@ -340,7 +422,7 @@ export function UserProfile({
                     <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={{
@@ -365,12 +447,18 @@ 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 +518,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) => (
@@ -469,7 +559,7 @@ 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}
                       >
@@ -518,6 +608,88 @@ 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">Current plan</h3>
+                  <div className="slx-billing-card">
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'flex-start',
+                      }}
+                    >
+                      <div>
+                        <p className="slx-billing-plan">
+                          {subscription.planName ?? '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>
+                        )}
+                      </div>
+                    </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>
+                )}
+              </>
+            ))}
         </div>
       </div>
     </div>
@@ -573,3 +745,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>
+  );
+}

package/src/index.ts

@@ -3,7 +3,10 @@ export { KeyholeMark, GoogleIcon, GitHubIcon, CheckIcon } from './icons';
 
 export { SignIn, type SignInProps } from './components/SignIn/SignIn';
 export { SignUp, type SignUpProps } from './components/SignUp/SignUp';
-export { UserButton } from './components/UserButton/UserButton';
+export {
+  UserButton,
+  type UserButtonProps,
+} from './components/UserButton/UserButton';
 export {
   UserProfile,
   type UserProfileProps,
@@ -24,6 +27,14 @@ export {
   SocialButtons,
   type SocialButtonsProps,
 } from './components/SocialButtons/SocialButtons';
+export {
+  BillingPortal,
+  type BillingPortalProps,
+} from './components/BillingPortal/BillingPortal';
+export {
+  PricingTable,
+  type PricingTableProps,
+} from './components/PricingTable/PricingTable';
 
 import { useEffect } from 'react';
 import { injectStyles } from './styles';

package/src/styles.ts

@@ -308,6 +308,169 @@ export const CSS = `
   background: color-mix(in srgb, var(--slx-success) 9%, transparent);
   border: 1px solid color-mix(in srgb, var(--slx-success) 30%, transparent);
 }
+.slx-badge-ok { color: var(--slx-success); background: color-mix(in srgb, var(--slx-success) 9%, transparent); border-color: color-mix(in srgb, var(--slx-success) 30%, transparent); }
+.slx-badge-warn { color: #b45309; background: color-mix(in srgb, #f59e0b 10%, transparent); border-color: color-mix(in srgb, #f59e0b 30%, transparent); }
+.slx-badge-accent { color: var(--slx-accent); background: var(--slx-accent-soft); border-color: color-mix(in srgb, var(--slx-accent) 30%, transparent); }
+.slyxup-root:not(.slyxup-light) .slx-badge-warn { color: #fbbf24; }
+
+/* ── Modal overlay ── */
+.slx-overlay {
+  position: fixed; inset: 0; z-index: 9999;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(12, 12, 18, 0.55);
+  backdrop-filter: blur(6px);
+  animation: slx-rise .2s cubic-bezier(.22,.9,.32,1) both;
+}
+
+/* ── UserProfile ── */
+.slx-profile-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 22px 28px 18px;
+  border-bottom: 1px solid var(--slx-border);
+}
+.slx-profile-title {
+  font-family: var(--slx-display);
+  font-size: 18px; font-weight: 650; letter-spacing: -0.02em;
+  color: var(--slx-ink-strong);
+  margin: 0;
+}
+.slx-profile-close {
+  width: 32px; height: 32px; border-radius: 8px;
+  display: flex; align-items: center; justify-content: center;
+  background: none; border: 1px solid var(--slx-border);
+  color: var(--slx-muted); cursor: pointer; font-size: 16px;
+  transition: background .12s, color .12s, border-color .12s;
+}
+.slx-profile-close:hover { background: var(--slx-bg-subtle); color: var(--slx-ink); border-color: var(--slx-border-strong); }
+.slx-profile-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--slx-accent-soft); }
+
+.slx-profile-body {
+  display: flex; min-height: 480px; max-height: 80vh;
+  width: 720px; max-width: calc(100vw - 48px);
+  background: var(--slx-bg);
+  border-radius: var(--slx-radius-lg);
+  box-shadow: var(--slx-shadow-pop);
+  overflow: hidden;
+}
+
+/* ── Left nav ── */
+.slx-profile-nav {
+  width: 200px; flex-shrink: 0;
+  display: flex; flex-direction: column; gap: 2px;
+  padding: 12px 8px;
+  border-right: 1px solid var(--slx-border);
+  background: var(--slx-bg-subtle);
+}
+.slx-profile-nav-btn {
+  display: flex; align-items: center; gap: 9px;
+  font: inherit; font-size: 13.5px; font-weight: 500;
+  color: var(--slx-muted); background: none; border: none;
+  border-radius: var(--slx-radius-sm);
+  padding: 9px 12px; cursor: pointer; text-align: left;
+  transition: background .12s, color .12s;
+}
+.slx-profile-nav-btn:hover { background: color-mix(in srgb, var(--slx-ink) 5%, transparent); color: var(--slx-ink); }
+.slx-profile-nav-btn.on { background: var(--slx-bg); color: var(--slx-ink-strong); font-weight: 600; box-shadow: 0 1px 3px rgba(18,18,28,.06); }
+.slx-profile-nav-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--slx-accent-soft); }
+
+/* ── Content area ── */
+.slx-profile-content {
+  flex: 1; overflow-y: auto; padding: 24px 28px 28px;
+}
+.slx-profile-sec { margin-bottom: 28px; }
+.slx-profile-sec:last-child { margin-bottom: 0; }
+.slx-sec-title {
+  font-family: var(--slx-display);
+  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
+  color: var(--slx-ink-strong);
+  margin: 0 0 14px; padding-bottom: 10px;
+  border-bottom: 1px solid var(--slx-border);
+}
+
+/* ── Avatar ── */
+.slx-avatar-row {
+  display: flex; align-items: center; gap: 16px;
+  margin-bottom: 20px;
+}
+.slx-avatar-lg {
+  width: 64px; height: 64px; border-radius: 50%;
+  flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 24px; font-weight: 700; color: #fff;
+  background: linear-gradient(135deg, var(--slx-accent), #8b5cf6);
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(91,91,214,.3);
+}
+.slx-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
+
+/* ── Row (email etc.) ── */
+.slx-row-value { font-size: 14px; font-weight: 500; color: var(--slx-ink-strong); margin: 0; }
+.slx-row-label { font-size: 12px; color: var(--slx-muted); margin: 2px 0 0; }
+
+/* ── Sessions ── */
+.slx-session {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 14px; border-radius: var(--slx-radius-sm);
+  border: 1px solid var(--slx-border);
+  background: var(--slx-bg-subtle);
+  margin-bottom: 8px;
+  transition: border-color .12s;
+}
+.slx-session:hover { border-color: var(--slx-border-strong); }
+.slx-session-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.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; }
+
+/* ── Danger zone ── */
+.slx-danger-zone {
+  border: 1px solid color-mix(in srgb, var(--slx-danger) 30%, transparent);
+  border-radius: var(--slx-radius);
+  padding: 18px 20px;
+  background: color-mix(in srgb, var(--slx-danger) 4%, transparent);
+}
+.slx-danger-title {
+  font-size: 14px; font-weight: 650; color: var(--slx-danger);
+  margin: 0 0 6px;
+}
+.slx-danger-desc {
+  font-size: 13px; color: var(--slx-muted); line-height: 1.5;
+  margin: 0 0 16px;
+}
+.slx-btn-danger-outline {
+  font: inherit; font-size: 13px; font-weight: 550;
+  color: var(--slx-danger); background: none;
+  border: 1px solid color-mix(in srgb, var(--slx-danger) 35%, transparent);
+  border-radius: var(--slx-radius-sm);
+  padding: 7px 14px; cursor: pointer;
+  transition: background .12s, border-color .12s;
+}
+.slx-btn-danger-outline:hover { background: color-mix(in srgb, var(--slx-danger) 8%, transparent); border-color: var(--slx-danger); }
+.slx-btn-danger-outline:active { transform: scale(.98); }
+.slx-btn-danger-outline:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--slx-danger) 20%, transparent); }
+.slx-btn-danger-outline[disabled] { opacity: .5; cursor: not-allowed; }
+
+/* ── Billing (inside UserProfile) ── */
+.slx-billing-card {
+  border: 1px solid var(--slx-border);
+  border-radius: var(--slx-radius);
+  padding: 18px 20px;
+  background: var(--slx-bg-subtle);
+  margin-bottom: 16px;
+}
+.slx-billing-plan { font-size: 15px; font-weight: 650; color: var(--slx-ink-strong); margin: 0 0 4px; }
+.slx-billing-detail { font-size: 13px; color: var(--slx-muted); margin: 2px 0; }
+.slx-billing-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
+.slx-billing-status-active { color: var(--slx-success); }
+.slx-billing-status-trialing { color: var(--slx-accent); }
+.slx-billing-status-canceled { color: var(--slx-danger); }
+.slx-invoice-row {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 0; border-bottom: 1px solid var(--slx-border);
+  font-size: 13px;
+}
+.slx-invoice-row:last-child { border-bottom: none; }
+.slx-invoice-date { color: var(--slx-muted); }
+.slx-invoice-amount { font-weight: 600; color: var(--slx-ink-strong); }
 `;
 
 let injected = false;