@startsimpli/ui 0.4.15 → 0.4.17

package/src/components/team/__tests__/team-settings-page.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * Smoke tests for the shared TeamSettingsPage composer (startsim-o7s).
+ *
+ * The real auth hooks are mocked so the test doesn't spin up an AuthProvider
+ * — we just confirm the page wires the supplied api shape through to the
+ * presentational components (MembersTable, invitations table, danger zone).
+ */
+import { render, screen, waitFor, fireEvent, act } from '@testing-library/react'
+import { TeamSettingsPage } from '../pages/TeamSettingsPage'
+import { DomainsSettingsPage } from '../pages/DomainsSettingsPage'
+
+jest.mock('@startsimpli/auth', () => {
+  const noop = () => {}
+  return {
+    __esModule: true,
+    useAuth: () => ({
+      user: { id: 'u1', email: 'q@x.com' },
+      logout: jest.fn().mockResolvedValue(undefined),
+    }),
+    buildCentralAuthUrl: (flow: string, opts: { app: string }) =>
+      `https://auth.startsimpli.com/${flow}?app=${opts.app}`,
+    useMembershipFromApi: () => ({
+      company: { id: 'c1', slug: 'acme', name: 'Acme' },
+      currentTeam: { id: 't1', slug: 'core', name: 'Core', companyId: 'c1' },
+      role: 'owner',
+      isOwner: true,
+      isAdmin: true,
+      isMemberOrAbove: true,
+      canInvite: true,
+      memberships: [],
+      isLoading: false,
+      error: null,
+      refresh: jest.fn().mockResolvedValue(undefined),
+    }),
+    useInvitations: ({ fetchInvitations, autoFetch: _ }: { fetchInvitations: () => Promise<unknown>; autoFetch?: boolean }) => ({
+      pending: [],
+      isLoading: false,
+      error: null,
+      refresh: async () => {
+        await fetchInvitations()
+      },
+      revoke: noop,
+      bulkInvite: async () => ({ invited: [] }),
+    }),
+    useDomainClaims: () => ({
+      claims: [],
+      isLoading: false,
+      error: null,
+      refresh: jest.fn().mockResolvedValue(undefined),
+      create: jest.fn(),
+      verifyDns: jest.fn(),
+      initiateEmail: jest.fn(),
+      verifyEmail: jest.fn(),
+      revoke: jest.fn(),
+    }),
+  }
+})
+
+function buildApi() {
+  return {
+    teams: {
+      myTeams: jest.fn().mockResolvedValue([]),
+      retrieve: jest.fn(),
+      members: jest.fn().mockResolvedValue([
+        {
+          id: 'm1',
+          userId: 'u1',
+          teamId: 't1',
+          role: 'owner',
+          joinedAt: '2025-01-01',
+          user: { id: 'u1', email: 'q@x.com', firstName: 'Quinn' },
+        },
+      ]),
+      updateRole: jest.fn().mockResolvedValue(undefined),
+      removeMember: jest.fn().mockResolvedValue(undefined),
+      bulkInvite: jest.fn().mockResolvedValue({ invited: [], skipped: [] }),
+    },
+    teamInvitations: {
+      list: jest.fn().mockResolvedValue({ results: [] }),
+      create: jest.fn(),
+      revoke: jest.fn().mockResolvedValue(undefined),
+    },
+    companies: {
+      retrieve: jest.fn(),
+    },
+    domainClaims: {
+      list: jest.fn().mockResolvedValue({ results: [] }),
+      create: jest.fn(),
+      verifyDns: jest.fn(),
+      verifyEmailInitiate: jest.fn(),
+      verifyEmailCode: jest.fn(),
+      revoke: jest.fn(),
+    },
+  } as any
+}
+
+describe('TeamSettingsPage', () => {
+  it('renders header + members table after fetch', async () => {
+    const api = buildApi()
+    render(<TeamSettingsPage api={api} centralAuthApp="vault" />)
+    expect(screen.getByText('Team & members')).toBeInTheDocument()
+    expect(screen.getByText('Acme · Core')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(api.teams.members).toHaveBeenCalledWith('core')
+    })
+    expect(screen.getByText(/Quinn/)).toBeInTheDocument()
+  })
+
+  it('shows the danger-zone Leave button for the current team', async () => {
+    const api = buildApi()
+    render(<TeamSettingsPage api={api} centralAuthApp="vault" />)
+    await waitFor(() => expect(api.teams.members).toHaveBeenCalled())
+    expect(screen.getByText('Danger zone')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Leave team/i })).toBeInTheDocument()
+  })
+
+  it('exposes the +Invite trigger when the current user is admin', async () => {
+    const api = buildApi()
+    render(<TeamSettingsPage api={api} centralAuthApp="vault" />)
+    await waitFor(() => expect(api.teams.members).toHaveBeenCalled())
+    expect(screen.getByRole('button', { name: '+ Invite' })).toBeInTheDocument()
+  })
+})
+
+describe('DomainsSettingsPage', () => {
+  it('renders the title + Add Domain trigger when admin + has companyId', async () => {
+    const api = buildApi()
+    render(<DomainsSettingsPage api={api} />)
+    expect(screen.getByText('Email domains')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Add domain/i })).toBeInTheDocument()
+  })
+
+  it('opens the add-domain form when clicked + validates input', async () => {
+    const api = buildApi()
+    render(<DomainsSettingsPage api={api} />)
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: /Add domain/i }))
+    })
+    const input = screen.getByLabelText(/Domain/i) as HTMLInputElement
+    fireEvent.change(input, { target: { value: 'nope' } })
+    fireEvent.click(screen.getByRole('button', { name: /Add domain/i }))
+    expect(
+      await screen.findByText(/valid domain/i),
+    ).toBeInTheDocument()
+  })
+})

package/src/components/team/index.ts

@@ -55,3 +55,8 @@ export {
   type DomainVerificationMethod,
   type DomainClaimLite,
 } from './types'
+
+// Page-level composers (startsim-o7s) — drop-in /settings/team and
+// /settings/domains pages. Each app wires `api` + a className-slot
+// override map; total ≤10 LOC per page.
+export * from './pages'

package/src/components/team/pages/DomainsSettingsPage.tsx

@@ -0,0 +1,289 @@
+'use client'
+
+/**
+ * DomainsSettingsPage — shared composer for /settings/domains (startsim-o7s).
+ *
+ * Renders the list of EmailDomainClaim rows for the active company, the
+ * add-domain form, and the per-card verify-DNS / verify-email actions.
+ * Admin gating is read off useMembership; only admins see Add + Revoke.
+ */
+
+import * as React from 'react'
+import { useDomainClaims, useMembershipFromApi } from '@startsimpli/auth'
+import type { DomainClaimRow } from '@startsimpli/auth'
+import { DomainClaimCard } from '../DomainClaimCard'
+import type { DomainClaimLite } from '../types'
+import {
+  DOMAINS_SETTINGS_PAGE_DEFAULTS,
+  type DomainsSettingsPageClassNames,
+} from './domains-settings-page-default-class-names'
+import type { DomainsSettingsApi } from './types'
+
+export interface DomainsSettingsPageProps {
+  /** The @startsimpli/api client. */
+  api: DomainsSettingsApi
+  /** Per-slot className overrides. */
+  classNames?: DomainsSettingsPageClassNames
+  /**
+   * Optional override for the company id. Defaults to the company resolved
+   * by useMembership() on the current user.
+   */
+  companyId?: string
+  /** Back link href. Defaults to '/'. */
+  backHref?: string
+  /** Back link text. Defaults to '← Back'. */
+  backLabel?: string
+  /** Title. Defaults to 'Email domains'. */
+  title?: string
+}
+
+/** Loose domain pattern — backend is the canonical validator. */
+const DOMAIN_RE = /^[a-z0-9.-]+\.[a-z]{2,}$/i
+
+function toClaimLite(c: DomainClaimRow): DomainClaimLite {
+  return {
+    id: c.id,
+    companyId: c.companyId,
+    domain: c.domain,
+    verified: c.verified,
+    verificationMethod: c.verificationMethod,
+    verificationToken: c.verificationToken,
+    verifiedAt: c.verifiedAt,
+    createdAt: c.createdAt,
+  }
+}
+
+export function DomainsSettingsPage({
+  api,
+  classNames,
+  companyId: companyIdProp,
+  backHref = '/',
+  backLabel = '← Back',
+  title = 'Email domains',
+}: DomainsSettingsPageProps) {
+  const cls = { ...DOMAINS_SETTINGS_PAGE_DEFAULTS, ...(classNames ?? {}) }
+  const membership = useMembershipFromApi(api)
+  const { company, isAdmin, isLoading: membershipLoading } = membership
+  const companyId = companyIdProp ?? company?.id
+
+  const claims = useDomainClaims({
+    fetchClaims: async () => {
+      if (!companyId) return []
+      const res = await api.domainClaims.list({ companyId })
+      return res.results.map((c) => ({
+        id: c.id,
+        companyId: c.companyId,
+        domain: c.domain,
+        verified: c.verified,
+        verificationMethod: c.verificationMethod,
+        verificationToken: c.verificationToken,
+        verifiedAt: c.verifiedAt,
+        createdAt: c.createdAt,
+      }))
+    },
+    createClaim: async ({ companyId: cid, domain }) => {
+      const c = await api.domainClaims.create({ companyId: cid, domain })
+      return {
+        id: c.id,
+        companyId: c.companyId,
+        domain: c.domain,
+        verified: c.verified,
+        verificationMethod: c.verificationMethod,
+        verificationToken: c.verificationToken,
+        verifiedAt: c.verifiedAt,
+        createdAt: c.createdAt,
+      }
+    },
+    verifyDns: async (id) => {
+      const c = await api.domainClaims.verifyDns(id)
+      return {
+        id: c.id,
+        companyId: c.companyId,
+        domain: c.domain,
+        verified: c.verified,
+        verificationMethod: c.verificationMethod,
+        verificationToken: c.verificationToken,
+        verifiedAt: c.verifiedAt,
+        createdAt: c.createdAt,
+      }
+    },
+    initiateEmailVerification: (id) => api.domainClaims.verifyEmailInitiate(id),
+    submitEmailCode: async (id, code) => {
+      const c = await api.domainClaims.verifyEmailCode(id, code)
+      return {
+        id: c.id,
+        companyId: c.companyId,
+        domain: c.domain,
+        verified: c.verified,
+        verificationMethod: c.verificationMethod,
+        verificationToken: c.verificationToken,
+        verifiedAt: c.verifiedAt,
+        createdAt: c.createdAt,
+      }
+    },
+    revokeClaim: (id) => api.domainClaims.revoke(id),
+    autoFetch: !!companyId,
+  })
+
+  const [showAdd, setShowAdd] = React.useState(false)
+  const [domain, setDomain] = React.useState('')
+  const [addError, setAddError] = React.useState('')
+  const [submitting, setSubmitting] = React.useState(false)
+
+  async function handleAdd(e: React.FormEvent) {
+    e.preventDefault()
+    setAddError('')
+    const clean = domain.trim().toLowerCase()
+    if (!clean) {
+      setAddError('Domain is required')
+      return
+    }
+    if (!DOMAIN_RE.test(clean)) {
+      setAddError('Enter a valid domain like "example.com"')
+      return
+    }
+    if (!companyId) {
+      setAddError('No company in scope')
+      return
+    }
+    setSubmitting(true)
+    try {
+      await claims.create({ companyId, domain: clean })
+      setDomain('')
+      setShowAdd(false)
+    } catch (err) {
+      setAddError(err instanceof Error ? err.message : 'Could not add domain')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (membershipLoading) {
+    return <p className={cls.loadingText}>Loading…</p>
+  }
+
+  if (!companyId) {
+    return (
+      <div className={cls.root}>
+        <a href={backHref} className={cls.backLink}>
+          {backLabel}
+        </a>
+        <h1 className={cls.title}>{title}</h1>
+        <p className={cls.subtitle}>
+          You need a company to claim domains. Accept a team invitation first.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cls.root}>
+      <div className={cls.header}>
+        <a href={backHref} className={cls.backLink}>
+          {backLabel}
+        </a>
+        <div className={cls.titleRow}>
+          <div>
+            <h1 className={cls.title}>{title}</h1>
+            <p className={cls.subtitle}>
+              Verified domains auto-join new signups to your team. Add a domain
+              you own.
+            </p>
+          </div>
+          {isAdmin && !showAdd && (
+            <button
+              type="button"
+              onClick={() => setShowAdd(true)}
+              className={cls.primaryButton}
+            >
+              + Add domain
+            </button>
+          )}
+        </div>
+      </div>
+
+      {showAdd && (
+        <form onSubmit={handleAdd} className={cls.formCard}>
+          <label htmlFor="domain" className={cls.label}>
+            Domain
+          </label>
+          <input
+            id="domain"
+            type="text"
+            value={domain}
+            onChange={(e) => setDomain(e.target.value)}
+            placeholder="acme.com"
+            className={cls.input}
+            disabled={submitting}
+            autoFocus
+          />
+          {addError && <p className={cls.errorText}>{addError}</p>}
+          <div className={cls.formActions}>
+            <button type="submit" disabled={submitting} className={cls.primaryButton}>
+              {submitting ? 'Adding…' : 'Add domain'}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setShowAdd(false)
+                setDomain('')
+                setAddError('')
+              }}
+              className={cls.cancelButton}
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      )}
+
+      {claims.isLoading ? (
+        <p className={cls.loadingText}>Loading domains…</p>
+      ) : claims.error ? (
+        <div className="space-y-2">
+          <p className={cls.errorText}>Could not load domains.</p>
+          <button
+            type="button"
+            onClick={() => void claims.refresh()}
+            className={cls.retryButton}
+          >
+            Retry
+          </button>
+        </div>
+      ) : claims.claims.length === 0 ? (
+        <div className={cls.emptyState}>
+          <p className={cls.emptyText}>
+            No domains claimed yet. Add one to auto-join new signups from your
+            team&apos;s email domain.
+          </p>
+        </div>
+      ) : (
+        <div className={cls.list}>
+          {claims.claims.map((c) => (
+            <DomainClaimCard
+              key={c.id}
+              claim={toClaimLite(c)}
+              classNames={cls.claimCard}
+              onVerifyDns={async () => {
+                await claims.verifyDns(c.id)
+              }}
+              onInitiateEmail={async () => {
+                await claims.initiateEmail(c.id)
+              }}
+              onVerifyEmail={async (_claim, code) => {
+                await claims.verifyEmail(c.id, code)
+              }}
+              onRevoke={
+                isAdmin
+                  ? async () => {
+                      await claims.revoke(c.id)
+                    }
+                  : undefined
+              }
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}