feat: self-serve signup Phase 2 (frontend cutover) (#162)

Co-authored-by: Michael Chihlas <michael@resolutionflow.com>
Co-committed-by: Michael Chihlas <michael@resolutionflow.com>

frontend/src/pages/welcome/WelcomeStep3.tsx

@@ -0,0 +1,374 @@
+import { useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Loader2, Plus, X } from 'lucide-react'
+import { useAuthStore } from '@/store/authStore'
+import { onboardingApi } from '@/api/onboarding'
+import { accountsApi, type BulkInviteRow } from '@/api/accounts'
+import { toast } from '@/lib/toast'
+import { cn } from '@/lib/utils'
+
+const MAX_ROWS = 10
+const DEFAULT_ROW_COUNT = 3
+
+type RowRole = 'engineer' | 'viewer'
+
+interface InviteRow {
+  email: string
+  role: RowRole
+  /**
+   * Server-returned per-row error (from `failed[]`). Kept on the row so
+   * users can fix and retry without losing the rest of their input.
+   */
+  error?: string
+}
+
+const ROLE_OPTIONS: { value: RowRole; label: string }[] = [
+  { value: 'engineer', label: 'Tech' },
+  { value: 'viewer', label: 'Viewer' },
+]
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+function makeEmptyRow(): InviteRow {
+  return { email: '', role: 'engineer' }
+}
+
+/**
+ * `/welcome/step-3` — final step of the welcome wizard. Captures up to
+ * `MAX_ROWS` teammate invites. On submit:
+ *
+ *   1. POST `/accounts/me/invites/bulk` with populated rows.
+ *   2. PATCH `/users/me/onboarding-step` `{step: 3, action: "complete"}`.
+ *   3. Navigate to `/?welcome=true` and fire a "You're all set" toast.
+ *
+ * Partial-failure UX: rows in `failed[]` keep their input and show an
+ * inline error. The wizard does NOT auto-advance when there are failures —
+ * the user can edit and retry, OR click "Continue anyway" to mark step 3
+ * complete and head to the dashboard.
+ *
+ * Empty rows are filtered before submit, so empty-form + "Send" is a no-op
+ * that just marks the step complete. (Skip does the same with `action: skip`.)
+ */
+export function WelcomeStep3() {
+  const navigate = useNavigate()
+  const fetchUser = useAuthStore((s) => s.fetchUser)
+
+  const [rows, setRows] = useState<InviteRow[]>(() =>
+    Array.from({ length: DEFAULT_ROW_COUNT }, makeEmptyRow),
+  )
+  const [submitting, setSubmitting] = useState<
+    'send' | 'skip' | 'dismiss' | 'continue-anyway' | null
+  >(null)
+  const [error, setError] = useState<string | null>(null)
+  const [hasUnresolvedFailures, setHasUnresolvedFailures] = useState(false)
+
+  const isBusy = submitting !== null
+
+  const updateRow = (idx: number, patch: Partial<InviteRow>) => {
+    setRows((prev) =>
+      prev.map((row, i) => (i === idx ? { ...row, ...patch } : row)),
+    )
+  }
+
+  const removeRow = (idx: number) => {
+    setRows((prev) => {
+      if (prev.length <= 1) return [makeEmptyRow()]
+      return prev.filter((_, i) => i !== idx)
+    })
+  }
+
+  const addRow = () => {
+    setRows((prev) =>
+      prev.length >= MAX_ROWS ? prev : [...prev, makeEmptyRow()],
+    )
+  }
+
+  /**
+   * Validate populated rows. Empty-email rows are dropped silently.
+   * Returns either the list of valid rows OR a per-index error map.
+   */
+  const validatePopulated = useMemo(
+    () => () => {
+      const errs: Record<number, string> = {}
+      const populated: { idx: number; row: BulkInviteRow }[] = []
+      rows.forEach((row, idx) => {
+        const email = row.email.trim()
+        if (!email) return
+        if (!EMAIL_RE.test(email)) {
+          errs[idx] = 'Invalid email'
+          return
+        }
+        populated.push({ idx, row: { email, role: row.role } })
+      })
+      return { errs, populated }
+    },
+    [rows],
+  )
+
+  const completeWizardAndExit = async () => {
+    await onboardingApi.updateStep({ step: 3, action: 'complete' })
+    await fetchUser()
+    toast.success("You're all set!")
+    navigate('/?welcome=true')
+  }
+
+  const handleSendInvites = async () => {
+    if (isBusy) return
+    setError(null)
+
+    const { errs, populated } = validatePopulated()
+    if (Object.keys(errs).length > 0) {
+      // Surface client-side validation errors inline.
+      setRows((prev) =>
+        prev.map((row, idx) =>
+          errs[idx] ? { ...row, error: errs[idx] } : { ...row, error: undefined },
+        ),
+      )
+      return
+    }
+
+    setSubmitting('send')
+    try {
+      let failedSet = new Map<string, string>()
+      if (populated.length > 0) {
+        const result = await accountsApi.bulkInvite(populated.map((p) => p.row))
+        failedSet = new Map(result.failed.map((f) => [f.email, f.error]))
+      }
+
+      if (failedSet.size > 0) {
+        // Stamp errors on the matching rows; do NOT auto-advance.
+        setRows((prev) =>
+          prev.map((row) => {
+            const email = row.email.trim()
+            const err = email ? failedSet.get(email) : undefined
+            return { ...row, error: err }
+          }),
+        )
+        setHasUnresolvedFailures(true)
+        setSubmitting(null)
+        return
+      }
+
+      // All-clear (or zero invites sent): mark step complete and exit.
+      await completeWizardAndExit()
+    } catch {
+      setError('Could not send invites. Please try again.')
+      setSubmitting(null)
+    }
+  }
+
+  const handleContinueAnyway = async () => {
+    if (isBusy) return
+    setError(null)
+    setSubmitting('continue-anyway')
+    try {
+      await completeWizardAndExit()
+    } catch {
+      setError('Could not save. Please try again.')
+      setSubmitting(null)
+    }
+  }
+
+  const handleSkipStep = async () => {
+    if (isBusy) return
+    setError(null)
+    setSubmitting('skip')
+    try {
+      await onboardingApi.updateStep({ step: 3, action: 'skip' })
+      await fetchUser()
+      toast.success("You're all set!")
+      navigate('/?welcome=true')
+    } catch {
+      setError('Could not save. Please try again.')
+      setSubmitting(null)
+    }
+  }
+
+  const handleDismissRest = async () => {
+    if (isBusy) return
+    setError(null)
+    setSubmitting('dismiss')
+    try {
+      await onboardingApi.dismissRest()
+      await fetchUser()
+      navigate('/')
+    } catch {
+      setError('Could not save. Please try again.')
+      setSubmitting(null)
+    }
+  }
+
+  const inputClass = cn(
+    'block w-full rounded-xl border border-border bg-card px-3 py-2',
+    'text-foreground placeholder:text-muted-foreground',
+    'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+  )
+
+  return (
+    <div className="mx-auto w-full max-w-2xl px-4 py-10">
+      <header className="mb-8">
+        <p className="text-xs uppercase tracking-wider text-muted-foreground">
+          Step 3 of 3
+        </p>
+        <h1 className="mt-2 text-2xl font-heading font-bold text-text-heading">
+          Invite your team
+        </h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Add up to {MAX_ROWS} teammates. They'll get an email with a link to
+          join. Leave blank to do this later.
+        </p>
+      </header>
+
+      <div
+        className="rounded-2xl border border-border bg-card p-6 space-y-4"
+        data-testid="welcome-step-3-form"
+      >
+        <div className="space-y-3">
+          {rows.map((row, idx) => (
+            <div key={idx} className="space-y-1">
+              <div className="flex items-start gap-2">
+                <input
+                  type="email"
+                  value={row.email}
+                  onChange={(e) => updateRow(idx, { email: e.target.value, error: undefined })}
+                  placeholder="teammate@example.com"
+                  className={cn(inputClass, 'flex-1')}
+                  data-testid={`welcome-step-3-email-${idx}`}
+                  disabled={isBusy}
+                />
+                <select
+                  value={row.role}
+                  onChange={(e) =>
+                    updateRow(idx, { role: e.target.value as RowRole })
+                  }
+                  className={cn(inputClass, 'w-32 flex-shrink-0')}
+                  data-testid={`welcome-step-3-role-${idx}`}
+                  disabled={isBusy}
+                >
+                  {ROLE_OPTIONS.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </select>
+                <button
+                  type="button"
+                  onClick={() => removeRow(idx)}
+                  disabled={isBusy || rows.length <= 1}
+                  data-testid={`welcome-step-3-remove-${idx}`}
+                  aria-label="Remove row"
+                  className={cn(
+                    'inline-flex h-10 w-10 items-center justify-center rounded-xl',
+                    'text-muted-foreground hover:bg-foreground/5 hover:text-foreground',
+                    'focus:outline-hidden focus:ring-2 focus:ring-primary/20',
+                    'disabled:opacity-30 disabled:hover:bg-transparent',
+                  )}
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+              {row.error && (
+                <p
+                  className="pl-1 text-xs text-red-400"
+                  data-testid={`welcome-step-3-row-error-${idx}`}
+                >
+                  {row.error}
+                </p>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <button
+          type="button"
+          onClick={addRow}
+          disabled={isBusy || rows.length >= MAX_ROWS}
+          data-testid="welcome-step-3-add-row"
+          className={cn(
+            'inline-flex items-center gap-1.5 rounded-xl px-2 py-1 text-xs font-medium',
+            'text-muted-foreground hover:bg-foreground/5 hover:text-foreground',
+            'focus:outline-hidden focus:ring-2 focus:ring-primary/20',
+            'disabled:opacity-50',
+          )}
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Add another
+        </button>
+
+        {error && (
+          <p className="text-xs text-red-400" data-testid="welcome-step-3-error">
+            {error}
+          </p>
+        )}
+
+        <div className="flex flex-wrap items-center gap-3 pt-2">
+          <button
+            type="button"
+            onClick={handleSendInvites}
+            disabled={isBusy}
+            data-testid="welcome-step-3-send"
+            className={cn(
+              'inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
+              'bg-primary text-primary-foreground hover:bg-primary/90',
+              'focus:outline-hidden focus:ring-2 focus:ring-primary/30',
+              'disabled:opacity-60',
+            )}
+          >
+            {submitting === 'send' && (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            )}
+            Send invites and continue
+          </button>
+          {hasUnresolvedFailures && (
+            <button
+              type="button"
+              onClick={handleContinueAnyway}
+              disabled={isBusy}
+              data-testid="welcome-step-3-continue-anyway"
+              className={cn(
+                'inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium btn-press',
+                'bg-card border border-border text-foreground hover:bg-foreground/5',
+                'focus:outline-hidden focus:ring-2 focus:ring-primary/20',
+                'disabled:opacity-60',
+              )}
+            >
+              {submitting === 'continue-anyway' && (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              )}
+              Continue anyway
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={handleSkipStep}
+            disabled={isBusy}
+            data-testid="welcome-step-3-skip"
+            className={cn(
+              'text-sm text-muted-foreground hover:underline',
+              'disabled:opacity-60',
+            )}
+          >
+            {submitting === 'skip' ? 'Saving…' : 'Skip'}
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-6 text-center">
+        <button
+          type="button"
+          onClick={handleDismissRest}
+          disabled={isBusy}
+          data-testid="welcome-step-3-dismiss-rest"
+          className={cn(
+            'text-xs text-muted-foreground hover:underline',
+            'disabled:opacity-60',
+          )}
+        >
+          {submitting === 'dismiss' ? 'Saving…' : 'Skip the rest'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default WelcomeStep3