Merge branch 'dev' into fix/ab/sh-364-inline-technician-registration

src/api/api-paths.ts

@@ -79,6 +79,7 @@ export const API_PATHS = {
   },
   teamMember: {
     getList: "User",
+    create: "team-members",
   },
   contact: {
     getList: "Contact/GetContactList",

src/app/(protected)/team-members/_components/add-team-member-dialog.tsx

@@ -0,0 +1,473 @@
+import { useEffect, useMemo, useRef, useState, type Dispatch, type SetStateAction } from "react";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  Box,
+  Button,
+  Checkbox,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { AREA_ZONES } from "@/data/areas";
+import { useCreateTeamMember } from "@/domain/team-members/use-cases/use-create-team-member";
+import type {
+  CreateTeamMemberInput,
+  TeamMemberRole,
+} from "@/domain/team-members/types/team-member";
+
+const ROLES: TeamMemberRole[] = ["Dispatcher", "Scheduler", "Admin"];
+const COLORS = [
+  "#F59E0B",
+  "#0D9488",
+  "#6366F1",
+  "#F43F5E",
+  "#7C3AED",
+  "#0EA5E9",
+  "#16A34A",
+  "#EA580C",
+  "#0891B2",
+  "#C026D3",
+] as const;
+
+const PERMISSION_GROUPS = [
+  {
+    label: "Team Members",
+    keys: ["manageTeamMembers", "changeTeamMemberRole"],
+  },
+  {
+    label: "Vendors",
+    keys: ["createVendors", "editVendors", "deactivateVendors"],
+  },
+  {
+    label: "Sites",
+    keys: ["createSites", "editSites", "deleteSites"],
+  },
+  {
+    label: "Services",
+    keys: ["createServices", "editServices", "deactivateServices"],
+  },
+  {
+    label: "Completion Document Templates",
+    keys: [
+      "createCompletionDocTemplates",
+      "editCompletionDocTemplates",
+      "deleteCompletionDocTemplates",
+    ],
+  },
+  {
+    label: "Work Orders",
+    keys: ["createWorkOrders", "editOthersWorkOrders", "cancelWorkOrders", "deleteWorkOrders"],
+  },
+  {
+    label: "Uplifts",
+    keys: ["requestUplifts", "autoApproveUplifts", "reviewUplifts"],
+  },
+  {
+    label: "Dashboard",
+    keys: ["viewAllDispatchersOnDashboard"],
+  },
+] as const;
+
+const PERMISSION_LABELS: Record<string, string> = {
+  manageTeamMembers: "Manage team members",
+  changeTeamMemberRole: "Change team member role",
+  createVendors: "Create vendors",
+  editVendors: "Edit vendors",
+  deactivateVendors: "Deactivate vendors",
+  createSites: "Create sites",
+  editSites: "Edit sites",
+  deleteSites: "Delete sites",
+  createServices: "Create services",
+  editServices: "Edit services",
+  deactivateServices: "Deactivate services",
+  createCompletionDocTemplates: "Create completion document templates",
+  editCompletionDocTemplates: "Edit completion document templates",
+  deleteCompletionDocTemplates: "Delete completion document templates",
+  createWorkOrders: "Create work orders",
+  editOthersWorkOrders: "Edit other users' work orders",
+  cancelWorkOrders: "Cancel work orders",
+  deleteWorkOrders: "Delete work orders",
+  requestUplifts: "Request uplifts",
+  autoApproveUplifts: "Automatically approve uplifts",
+  reviewUplifts: "Review uplifts",
+  viewAllDispatchersOnDashboard: "View all Dispatchers on dashboard",
+};
+
+const ALL_PERMISSION_KEYS = PERMISSION_GROUPS.flatMap((group) => group.keys);
+const DISPATCHER_DEFAULTS = new Set([
+  "createVendors",
+  "editVendors",
+  "deactivateVendors",
+  "createSites",
+  "editSites",
+  "createWorkOrders",
+  "editOthersWorkOrders",
+  "cancelWorkOrders",
+  "requestUplifts",
+  "autoApproveUplifts",
+]);
+const SCHEDULER_DEFAULTS = new Set([
+  ...Array.from(DISPATCHER_DEFAULTS).filter(
+    (key) => key !== "requestUplifts" && key !== "autoApproveUplifts",
+  ),
+  "deleteSites",
+  "createServices",
+  "editServices",
+  "createCompletionDocTemplates",
+  "editCompletionDocTemplates",
+  "viewAllDispatchersOnDashboard",
+]);
+
+function defaultsForRole(role: TeamMemberRole): Set<string> {
+  if (role === "Admin") return new Set(ALL_PERMISSION_KEYS);
+  return role === "Scheduler" ? new Set(SCHEDULER_DEFAULTS) : new Set(DISPATCHER_DEFAULTS);
+}
+
+function emptyForm() {
+  return {
+    name: "",
+    role: "Dispatcher" as TeamMemberRole,
+    color: "",
+    email: "",
+    phone: "",
+    serviceAreas: [] as string[],
+    permissions: defaultsForRole("Dispatcher"),
+  };
+}
+
+function permissionOverrides(role: TeamMemberRole, selected: Set<string>) {
+  const defaults = defaultsForRole(role);
+  return Object.fromEntries(
+    ALL_PERMISSION_KEYS.filter((key) => defaults.has(key) !== selected.has(key)).map((key) => [
+      key,
+      selected.has(key) ? 1 : 2,
+    ]),
+  ) as Record<string, 1 | 2>;
+}
+
+type TeamMemberForm = ReturnType<typeof emptyForm>;
+type FormErrors = ReturnType<typeof getFormErrors>;
+
+function getFormErrors(form: TeamMemberForm, submitted: boolean, emailIsValid: boolean) {
+  return {
+    name: submitted && !form.name.trim() ? "Name is required." : "",
+    role: submitted && !form.role ? "Role is required." : "",
+    color: submitted && !form.color ? "Color is required." : "",
+    email:
+      submitted && !form.email.trim()
+        ? "Email is required."
+        : submitted && !emailIsValid
+          ? "Enter a valid email address."
+          : "",
+    serviceAreas:
+      submitted && form.role === "Dispatcher" && form.serviceAreas.length === 0
+        ? "Select at least one service area."
+        : "",
+  };
+}
+
+function PermissionsSection({
+  form,
+  togglePermission,
+}: {
+  form: TeamMemberForm;
+  togglePermission: (key: string) => void;
+}) {
+  return (
+    <Box>
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Permissions
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+        Permissions start with the selected role's defaults. Customize them before saving.
+      </Typography>
+      {PERMISSION_GROUPS.map((group) => (
+        <Accordion key={group.label} disableGutters>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography>{group.label}</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Stack>
+              {group.keys.map((key) => (
+                <FormControlLabel
+                  key={key}
+                  control={
+                    <Checkbox
+                      checked={form.permissions.has(key)}
+                      onChange={() => togglePermission(key)}
+                    />
+                  }
+                  label={PERMISSION_LABELS[key]}
+                />
+              ))}
+            </Stack>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </Box>
+  );
+}
+
+function TeamMemberFormFields({
+  form,
+  setForm,
+  errors,
+  updateRole,
+  toggleArea,
+  togglePermission,
+}: {
+  form: TeamMemberForm;
+  setForm: Dispatch<SetStateAction<TeamMemberForm>>;
+  errors: FormErrors;
+  updateRole: (role: TeamMemberRole) => void;
+  toggleArea: (area: string) => void;
+  togglePermission: (key: string) => void;
+}) {
+  return (
+    <Stack spacing={2.5}>
+      <TextField
+        label="Name"
+        placeholder="Team member name"
+        value={form.name}
+        onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))}
+        error={Boolean(errors.name)}
+        helperText={errors.name}
+        required
+        fullWidth
+      />
+      <FormControl fullWidth required error={Boolean(errors.role)}>
+        <InputLabel id="team-member-role-label">Role</InputLabel>
+        <Select
+          labelId="team-member-role-label"
+          label="Role"
+          value={form.role}
+          onChange={(event) => updateRole(event.target.value as TeamMemberRole)}
+        >
+          {ROLES.map((role) => (
+            <MenuItem key={role} value={role}>
+              {role}
+            </MenuItem>
+          ))}
+        </Select>
+        {Boolean(errors.role) && <FormHelperText>{errors.role}</FormHelperText>}
+      </FormControl>
+
+      <Box>
+        <Typography component="p" variant="body2" sx={{ mb: 1, fontWeight: 600 }}>
+          Color <span aria-hidden="true">*</span>
+        </Typography>
+        <Stack direction="row" spacing={1} useFlexGap sx={{ flexWrap: "wrap" }}>
+          {COLORS.map((color) => (
+            <Button
+              key={color}
+              type="button"
+              aria-label={`Select color ${color}`}
+              aria-pressed={form.color === color}
+              onClick={() => setForm((current) => ({ ...current, color }))}
+              sx={{
+                minWidth: 32,
+                width: 32,
+                height: 32,
+                borderRadius: "50%",
+                backgroundColor: color,
+                border: form.color === color ? "3px solid" : "2px solid transparent",
+                borderColor: form.color === color ? "text.primary" : "transparent",
+                boxShadow: form.color === color ? "0 0 0 2px white" : "none",
+                p: 0,
+                "&:hover": { backgroundColor: color, opacity: 0.85 },
+              }}
+            />
+          ))}
+        </Stack>
+        {Boolean(errors.color) && <FormHelperText error>{errors.color}</FormHelperText>}
+      </Box>
+
+      {form.role === "Dispatcher" && (
+        <Box>
+          <Typography component="p" variant="body2" sx={{ mb: 1, fontWeight: 600 }}>
+            Service Area <span aria-hidden="true">*</span>
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+            {form.serviceAreas.length ? form.serviceAreas.join(", ") : "Select service areas…"}
+          </Typography>
+          <Stack direction="row" useFlexGap sx={{ flexWrap: "wrap", columnGap: 1 }}>
+            {AREA_ZONES.map((area) => (
+              <FormControlLabel
+                key={area}
+                control={
+                  <Checkbox
+                    checked={form.serviceAreas.includes(area)}
+                    onChange={() => toggleArea(area)}
+                  />
+                }
+                label={area}
+              />
+            ))}
+          </Stack>
+          {Boolean(errors.serviceAreas) && (
+            <FormHelperText error>{errors.serviceAreas}</FormHelperText>
+          )}
+        </Box>
+      )}
+      {form.role !== "Dispatcher" && (
+        <Typography variant="body2" color="text.secondary">
+          Not applicable for this role
+        </Typography>
+      )}
+
+      <TextField
+        label="Phone"
+        placeholder="(555) 555-0100"
+        value={form.phone}
+        onChange={(event) => setForm((current) => ({ ...current, phone: event.target.value }))}
+        fullWidth
+      />
+      <TextField
+        label="Email"
+        placeholder="name@seahavenind.com"
+        value={form.email}
+        onChange={(event) => setForm((current) => ({ ...current, email: event.target.value }))}
+        error={Boolean(errors.email)}
+        helperText={errors.email || "A valid email is required to send the invite"}
+        required
+        type="email"
+        fullWidth
+      />
+
+      <PermissionsSection form={form} togglePermission={togglePermission} />
+    </Stack>
+  );
+}
+
+export function AddTeamMemberDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const [form, setForm] = useState(emptyForm);
+  const [submitted, setSubmitted] = useState(false);
+  const submissionId = useRef(0);
+  const { error: mutationError, isPending, mutate, reset } = useCreateTeamMember();
+
+  useEffect(() => {
+    submissionId.current += 1;
+    reset();
+    if (open) {
+      setForm(emptyForm());
+      setSubmitted(false);
+    }
+  }, [open, reset]);
+
+  const handleClose = () => {
+    if (isPending) return;
+
+    submissionId.current += 1;
+    reset();
+    onClose();
+  };
+
+  const emailIsValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim());
+  const errors = useMemo(
+    () => getFormErrors(form, submitted, emailIsValid),
+    [emailIsValid, form, submitted],
+  );
+  const isValid =
+    Boolean(form.name.trim()) &&
+    Boolean(form.role) &&
+    Boolean(form.color) &&
+    emailIsValid &&
+    (form.role !== "Dispatcher" || form.serviceAreas.length > 0);
+
+  const updateRole = (role: TeamMemberRole) => {
+    setForm((current) => ({
+      ...current,
+      role,
+      serviceAreas: [],
+      permissions: defaultsForRole(role),
+    }));
+  };
+
+  const togglePermission = (key: string) => {
+    setForm((current) => {
+      const permissions = new Set(current.permissions);
+      if (permissions.has(key)) permissions.delete(key);
+      else permissions.add(key);
+      return { ...current, permissions };
+    });
+  };
+
+  const toggleArea = (area: string) => {
+    setForm((current) => ({
+      ...current,
+      serviceAreas: current.serviceAreas.includes(area)
+        ? current.serviceAreas.filter((value) => value !== area)
+        : [...current.serviceAreas, area],
+    }));
+  };
+
+  const submit = () => {
+    setSubmitted(true);
+    if (!isValid) return;
+
+    const input: CreateTeamMemberInput = {
+      name: form.name.trim(),
+      role: form.role,
+      color: form.color,
+      email: form.email.trim(),
+      phone: form.phone.trim() || undefined,
+      serviceAreas: form.serviceAreas,
+      permissionOverrides: permissionOverrides(form.role, form.permissions),
+    };
+    const currentSubmissionId = submissionId.current;
+    mutate(input, {
+      onSuccess: () => {
+        if (submissionId.current !== currentSubmissionId) return;
+        reset();
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} fullWidth maxWidth="md" scroll="paper">
+      <DialogTitle>Add Member</DialogTitle>
+      <DialogContent dividers>
+        <Typography color="text.secondary" sx={{ mb: 3 }}>
+          Register a new team member.
+        </Typography>
+        {Boolean(mutationError) && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {mutationError?.message}
+          </Alert>
+        )}
+        <TeamMemberFormFields
+          form={form}
+          setForm={setForm}
+          errors={errors}
+          updateRole={updateRole}
+          toggleArea={toggleArea}
+          togglePermission={togglePermission}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} disabled={isPending}>
+          Cancel
+        </Button>
+        <Button variant="contained" onClick={submit} disabled={isPending}>
+          {isPending ? <CircularProgress size={20} color="inherit" /> : "Add Member"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/app/(protected)/team-members/_components/team-members-table.tsx

@@ -15,8 +15,8 @@ import type { TeamMemberListItem } from "@/domain/team-members/types/team-member
 
 const HEADINGS = ["Team Member", "Role", "Service Area", "Phone", "Email", "Color", "Status"];
 
-function memberStatusLabel(status: TeamMemberListItem["status"]) {
-  return status === "Active" ? "Active" : "Inactive";
+function memberStatusLabel(member: TeamMemberListItem) {
+  return member.pendingRegistration ? "Pending registration" : member.status;
 }
 
 export function TeamMembersTable({
@@ -88,7 +88,7 @@ export function TeamMembersTable({
                 <TableCell>
                   <Avatar sx={{ width: 22, height: 22, bgcolor: member.color || "primary.main" }} />
                 </TableCell>
-                <TableCell>{memberStatusLabel(member.status)}</TableCell>
+                <TableCell>{memberStatusLabel(member)}</TableCell>
                 <TableCell align="right">
                   <Button
                     size="small"

src/app/(protected)/team-members/index.tsx

@@ -8,10 +8,6 @@ import {
   Box,
   Button,
   Chip,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
   Drawer,
   IconButton,
   Stack,
@@ -22,6 +18,7 @@ import {
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { TeamMembersTable } from "./_components/team-members-table";
+import { AddTeamMemberDialog } from "./_components/add-team-member-dialog";
 
 type StatusTab = "active" | "inactive";
 
@@ -181,13 +178,7 @@ export default function TeamMembersListPage() {
       </Stack>
 
       <TeamMemberDrawer member={selectedMember} onClose={() => setSelectedMember(null)} />
-      <Dialog open={addMemberOpen} onClose={() => setAddMemberOpen(false)}>
-        <DialogTitle>Add Member</DialogTitle>
-        <DialogContent>Member details will be added here.</DialogContent>
-        <DialogActions>
-          <Button onClick={() => setAddMemberOpen(false)}>Close</Button>
-        </DialogActions>
-      </Dialog>
+      <AddTeamMemberDialog open={addMemberOpen} onClose={() => setAddMemberOpen(false)} />
     </Box>
   );
 }

src/domain/team-members/api/team-members-api.ts

@@ -1,8 +1,12 @@
-import { apiGet } from "@/api/api";
+import { apiGet, apiPost } from "@/api/api";
 import { API_PATHS } from "@/api/api-paths";
 import { handleApiResponse } from "@/api/handle-api-response";
 import { mapTeamMemberListItems } from "@/domain/team-members/mappers/team-member-mapper";
-import type { TeamMemberListResult } from "@/domain/team-members/types/team-member";
+import type {
+  CreateTeamMemberInput,
+  TeamMemberCreated,
+  TeamMemberListResult,
+} from "@/domain/team-members/types/team-member";
 
 export const teamMembersApi = {
   getList: async (): Promise<TeamMemberListResult> => {
@@ -10,4 +14,9 @@ export const teamMembersApi = {
     const items = handleApiResponse<unknown[]>(data);
     return { items: mapTeamMemberListItems(Array.isArray(items) ? items : []) };
   },
+
+  create: async (input: CreateTeamMemberInput): Promise<TeamMemberCreated> => {
+    const data = await apiPost<unknown>(API_PATHS.teamMember.create, input);
+    return handleApiResponse<TeamMemberCreated>(data);
+  },
 };

src/domain/team-members/mappers/team-member-mapper.ts

@@ -37,6 +37,7 @@ export function mapTeamMemberListItem(raw: unknown): TeamMemberListItem {
     color: readString(record, "color", "Color"),
     status,
     isAccountOwner: readBoolean(record, "isAccountOwner", "IsAccountOwner"),
+    pendingRegistration: readBoolean(record, "pendingRegistration", "PendingRegistration"),
   };
 }
 

src/domain/team-members/types/team-member.ts

@@ -8,6 +8,30 @@ export interface TeamMemberListItem {
   color: string;
   status: "Active" | "Inactive";
   isAccountOwner: boolean;
+  pendingRegistration: boolean;
+}
+
+export type TeamMemberRole = "Dispatcher" | "Scheduler" | "Admin";
+
+export interface CreateTeamMemberInput {
+  name: string;
+  role: TeamMemberRole;
+  color: string;
+  email: string;
+  phone?: string;
+  serviceAreas: string[];
+  permissionOverrides: Record<string, 1 | 2>;
+}
+
+export interface TeamMemberCreated {
+  id: string;
+  name: string;
+  role: TeamMemberRole;
+  color: string;
+  email: string;
+  phone: string;
+  serviceAreas: string[];
+  pendingRegistration: boolean;
 }
 
 export interface TeamMemberListResult {

src/domain/team-members/use-cases/use-create-team-member.ts

@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { teamMembersApi } from "@/domain/team-members/api/team-members-api";
+import type {
+  CreateTeamMemberInput,
+  TeamMemberCreated,
+} from "@/domain/team-members/types/team-member";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateTeamMember(): UseMutationResult<
+  TeamMemberCreated,
+  Error,
+  CreateTeamMemberInput
+> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: teamMembersApi.create,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.teamMembers.all });
+      toast.success("Team member created with pending registration.");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create team member");
+    },
+  });
+}

src/test/app/(protected)/team-members/add-team-member-dialog.test.tsx

@@ -0,0 +1,104 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "@/test/test-utils";
+import { AddTeamMemberDialog } from "@/app/(protected)/team-members/_components/add-team-member-dialog";
+import { useCreateTeamMember } from "@/domain/team-members/use-cases/use-create-team-member";
+
+vi.mock("@/domain/team-members/use-cases/use-create-team-member", () => ({
+  useCreateTeamMember: vi.fn(),
+}));
+
+describe("AddTeamMemberDialog", () => {
+  const mutate = vi.fn();
+  const reset = vi.fn();
+
+  beforeEach(() => {
+    mutate.mockReset();
+    reset.mockReset();
+    vi.mocked(useCreateTeamMember).mockReturnValue({
+      mutate,
+      reset,
+      isPending: false,
+      error: null,
+    } as unknown as ReturnType<typeof useCreateTeamMember>);
+  });
+
+  it("requires the required fields and a Dispatcher service area", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<AddTeamMemberDialog open onClose={vi.fn()} />, { withAuth: false });
+
+    await user.click(screen.getByRole("button", { name: "Add Member" }));
+
+    expect(screen.getByText("Name is required.")).toBeInTheDocument();
+    expect(screen.getByText("Color is required.")).toBeInTheDocument();
+    expect(screen.getByText("Email is required.")).toBeInTheDocument();
+    expect(screen.getByText("Select at least one service area.")).toBeInTheDocument();
+    expect(mutate).not.toHaveBeenCalled();
+  });
+
+  it("resets role defaults and submits customized permissions", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<AddTeamMemberDialog open onClose={vi.fn()} />, { withAuth: false });
+
+    await user.type(screen.getByRole("textbox", { name: "Name" }), "Taylor Dispatcher");
+    await user.type(screen.getByRole("textbox", { name: "Email" }), "taylor@example.com");
+    await user.click(screen.getByRole("button", { name: "Select color #F59E0B" }));
+    await user.click(screen.getByRole("combobox", { name: "Role" }));
+    await user.click(screen.getByRole("option", { name: "Scheduler" }));
+
+    expect(screen.queryByLabelText("East")).not.toBeInTheDocument();
+    const createSites = screen.getByLabelText("Create sites");
+    expect(createSites).toBeChecked();
+    await user.click(createSites);
+    await user.click(screen.getByRole("button", { name: "Add Member" }));
+
+    expect(mutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: "Taylor Dispatcher",
+        role: "Scheduler",
+        color: "#F59E0B",
+        email: "taylor@example.com",
+        serviceAreas: [],
+        permissionOverrides: { createSites: 2 },
+      }),
+      expect.any(Object),
+    );
+  }, 15000);
+
+  it("does not close while a member is being created", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    vi.mocked(useCreateTeamMember).mockReturnValue({
+      mutate,
+      reset,
+      isPending: true,
+      error: null,
+    } as unknown as ReturnType<typeof useCreateTeamMember>);
+    renderWithProviders(<AddTeamMemberDialog open onClose={onClose} />, { withAuth: false });
+
+    await user.keyboard("{Escape}");
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("clears a previous mutation error when reopened", () => {
+    const mutation = {
+      mutate,
+      reset,
+      isPending: false,
+      error: new Error("Email is already in use."),
+    } as unknown as ReturnType<typeof useCreateTeamMember>;
+    vi.mocked(useCreateTeamMember).mockReturnValue(mutation);
+    const { rerender } = renderWithProviders(<AddTeamMemberDialog open onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    expect(screen.getByText("Email is already in use.")).toBeInTheDocument();
+    mutation.error = null;
+    rerender(<AddTeamMemberDialog open={false} onClose={vi.fn()} />);
+    rerender(<AddTeamMemberDialog open onClose={vi.fn()} />);
+
+    expect(screen.queryByText("Email is already in use.")).not.toBeInTheDocument();
+  });
+});

src/test/domain/team-members/api/team-members-api.test.ts

@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { API_PATHS } from "@/api/api-paths";
+
+const apiGet = vi.fn();
+const apiPost = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+  apiPost: (...args: unknown[]) => apiPost(...args),
+}));
+
+import { teamMembersApi } from "@/domain/team-members/api/team-members-api";
+
+describe("teamMembersApi", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiPost.mockReset();
+  });
+
+  it("posts the pending team member contract without invitation fields", async () => {
+    apiPost.mockResolvedValueOnce({
+      data: {
+        id: "u-1",
+        name: "Taylor Dispatcher",
+        role: "Dispatcher",
+        pendingRegistration: true,
+      },
+    });
+
+    const input = {
+      name: "Taylor Dispatcher",
+      role: "Dispatcher" as const,
+      color: "#F59E0B",
+      email: "taylor@example.com",
+      phone: "555-0100",
+      serviceAreas: ["East"],
+      permissionOverrides: { deleteSites: 1 as const },
+    };
+
+    await expect(teamMembersApi.create(input)).resolves.toMatchObject({
+      id: "u-1",
+      pendingRegistration: true,
+    });
+    expect(apiPost).toHaveBeenCalledWith(API_PATHS.teamMember.create, input);
+    expect(apiPost.mock.calls[0]?.[1]).not.toHaveProperty("invite");
+    expect(apiPost.mock.calls[0]?.[1]).not.toHaveProperty("password");
+  });
+});

src/test/domain/team-members/team-member-mapper.test.ts

@@ -23,6 +23,7 @@ describe("mapTeamMemberListItem", () => {
       color: "",
       status: "Inactive",
       isAccountOwner: true,
+      pendingRegistration: false,
     });
   });
 });