@startsimpli/ui 0.4.14 → 0.4.16

package/src/components/team/members-table-default-class-names.ts

@@ -0,0 +1,39 @@
+/** Default Tailwind classes for {@link MembersTable}. startsim-o7s. */
+export interface MembersTableClassNames {
+  root?: string
+  table?: string
+  thead?: string
+  headerRow?: string
+  th?: string
+  tbody?: string
+  row?: string
+  cell?: string
+  avatar?: string
+  name?: string
+  email?: string
+  roleBadge?: string
+  actions?: string
+  removeButton?: string
+  emptyRow?: string
+}
+
+export const MEMBERS_TABLE_DEFAULTS: Required<MembersTableClassNames> = {
+  root: 'w-full overflow-x-auto rounded-lg border border-gray-200',
+  table: 'w-full text-sm text-left',
+  thead: 'bg-gray-50 text-xs uppercase tracking-wide text-gray-500',
+  headerRow: '',
+  th: 'px-4 py-2 font-medium',
+  tbody: 'divide-y divide-gray-100 bg-white',
+  row: 'hover:bg-gray-50',
+  cell: 'px-4 py-3 align-middle',
+  avatar:
+    'flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-xs font-medium text-gray-600',
+  name: 'font-medium text-gray-900',
+  email: 'text-gray-500',
+  roleBadge:
+    'inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700',
+  actions: 'flex items-center justify-end gap-2',
+  removeButton:
+    'rounded-md border border-gray-300 px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:opacity-50',
+  emptyRow: 'px-4 py-6 text-center text-sm text-gray-500',
+}

package/src/components/team/org-switcher-default-class-names.ts

@@ -0,0 +1,13 @@
+/** Default Tailwind classes for {@link OrgSwitcher}. startsim-o7s. */
+export interface OrgSwitcherClassNames {
+  root?: string
+  label?: string
+  select?: string
+}
+
+export const ORG_SWITCHER_DEFAULTS: Required<OrgSwitcherClassNames> = {
+  root: 'inline-flex items-center gap-2',
+  label: 'text-xs font-medium uppercase tracking-wide text-gray-500',
+  select:
+    'rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
+}

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>
+  )
+}