@carlonicora/nextjs-jsonapi 6.14.1 → 6.16.0

package/messages/en.json

@@ -1212,7 +1212,8 @@
         "status": "Status",
         "steps": "Emails",
         "trigger": "Trigger",
-        "unsubscribed": "Left"
+        "unsubscribed": "Left",
+        "purpose": "Purpose"
       },
       "status": {
         "off": "Off",
@@ -1236,6 +1237,27 @@
         "exited": "Exited",
         "failed": "Failed",
         "unsubscribed": "Unsubscribed"
+      },
+      "addPerson": "Add person",
+      "addPersonNoSteps": "Add an email first.",
+      "addDialog": {
+        "title": "Add a person",
+        "search": "Search by name or email",
+        "empty": "Nobody found.",
+        "kind": {
+          "user": "User",
+          "waitlist": "Waitlist"
+        },
+        "reason": {
+          "already_enrolled": "Already in this automation",
+          "opted_out": "Unsubscribed from marketing",
+          "no_consent": "No marketing consent"
+        },
+        "added": "{email} added",
+        "groups": {
+          "addable": "Can be added",
+          "blocked": "Can't be added"
+        }
       }
     },
     "step": {
@@ -1283,7 +1305,8 @@
         "sentAt": "Sent",
         "sent": "Sent to",
         "failed": "Failed",
-        "unsubscribed": "Unsubscribed"
+        "unsubscribed": "Unsubscribed",
+        "purpose": "Purpose"
       },
       "status": {
         "draft": "Draft",
@@ -1309,7 +1332,8 @@
         }
       },
       "variablesHint": "You can use:",
-      "unsubscribeHint": "Every email ends with a link to stop all marketing emails."
+      "unsubscribeHint": "Every email ends with a link to stop all marketing emails.",
+      "serviceHint": "Service emails go to every user and carry no unsubscribe link."
     },
     "detail": {
       "recipients": "Recipients",
@@ -2190,5 +2214,13 @@
       "hint": "Did not receive the email? Check your spam folder or try again later.",
       "title": "You are on the list!"
     }
+  },
+  "emailPurpose": {
+    "label": "Purpose",
+    "placeholder": "Choose a purpose",
+    "error": "Choose a purpose",
+    "service": "Service",
+    "marketing": "Marketing",
+    "serviceWarning": "Only information about their waitlist spot or account. Anything that promotes the product is Marketing."
   }
 }

package/messages/it.json

@@ -1212,7 +1212,8 @@
         "status": "Stato",
         "steps": "Email",
         "trigger": "Evento",
-        "unsubscribed": "Disiscritti"
+        "unsubscribed": "Disiscritti",
+        "purpose": "Scopo"
       },
       "status": {
         "off": "Spenta",
@@ -1236,6 +1237,27 @@
         "exited": "Usciti",
         "failed": "Non riusciti",
         "unsubscribed": "Disiscritti"
+      },
+      "addPerson": "Aggiungi persona",
+      "addPersonNoSteps": "Aggiungi prima un'email.",
+      "addDialog": {
+        "title": "Aggiungi una persona",
+        "search": "Cerca per nome o email",
+        "empty": "Nessuno trovato.",
+        "kind": {
+          "user": "Utente",
+          "waitlist": "Lista d'attesa"
+        },
+        "reason": {
+          "already_enrolled": "Già in questa automazione",
+          "opted_out": "Disiscritto dal marketing",
+          "no_consent": "Nessun consenso marketing"
+        },
+        "added": "{email} aggiunto",
+        "groups": {
+          "addable": "Possono essere aggiunti",
+          "blocked": "Non possono essere aggiunti"
+        }
       }
     },
     "step": {
@@ -1283,7 +1305,8 @@
         "sentAt": "Inviata",
         "sent": "Inviata a",
         "failed": "Non riuscite",
-        "unsubscribed": "Disiscritti"
+        "unsubscribed": "Disiscritti",
+        "purpose": "Scopo"
       },
       "status": {
         "draft": "Bozza",
@@ -1309,7 +1332,8 @@
         }
       },
       "variablesHint": "Puoi usare:",
-      "unsubscribeHint": "Ogni email finisce con un link per non ricevere più email di marketing."
+      "unsubscribeHint": "Ogni email finisce con un link per non ricevere più email di marketing.",
+      "serviceHint": "Le email di servizio arrivano a tutti gli utenti e non hanno il link di disiscrizione."
     },
     "detail": {
       "recipients": "Destinatari",
@@ -2190,5 +2214,13 @@
       "hint": "Non hai ricevuto l'email? Controlla lo spam o riprova più tardi.",
       "title": "Sei in lista!"
     }
+  },
+  "emailPurpose": {
+    "label": "Scopo",
+    "placeholder": "Scegli lo scopo",
+    "error": "Scegli lo scopo",
+    "service": "Servizio",
+    "marketing": "Marketing",
+    "serviceWarning": "Solo informazioni sul loro posto in lista d'attesa o sul loro account. Tutto ciò che promuove il prodotto è Marketing."
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "6.14.1",
+  "version": "6.16.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/components/editors/server/__tests__/renderBlockNoteMarkdown.spec.ts

@@ -0,0 +1,45 @@
+// @vitest-environment node
+// The server render runs in Node, where there is no window or document of our own:
+// BlockNote's ServerBlockNoteEditor brings its JSDOM.
+import type { PartialBlock } from "@blocknote/core";
+import { describe, expect, it } from "vitest";
+import { renderBlockNoteHTML } from "../renderBlockNoteHTML";
+import { renderBlockNoteMarkdown } from "../renderBlockNoteMarkdown";
+
+const blocks: PartialBlock[] = [
+  { type: "heading", props: { level: 2 }, content: "Think of the Campaign as the lid on the box" },
+  { type: "paragraph", content: "One Campaign is one story arc." },
+  { type: "bulletListItem", content: "Characters" },
+  {
+    type: "paragraph",
+    content: [{ type: "link", href: "https://wyrd.li/help", content: "help" }],
+  },
+  { type: "image", props: { url: "https://wyrd.li/marketing/og.png", caption: "Wyrdli" } },
+  { type: "image", props: { url: "https://wyrd.li/marketing/plain.png" } },
+];
+
+describe("renderBlockNoteMarkdown", () => {
+  it("renders headings, paragraphs, bullet lists and links", async () => {
+    const markdown = await renderBlockNoteMarkdown(blocks);
+
+    expect(markdown).toContain("## Think of the Campaign as the lid on the box");
+    expect(markdown).toContain("One Campaign is one story arc.");
+    expect(markdown).toMatch(/^\s*[-*+] Characters\s*$/m);
+    expect(markdown).toContain("[help](https://wyrd.li/help)");
+    // blocksToMarkdownLossy keeps a captioned image as an HTML <figure> (valid
+    // CommonMark HTML block); an image with no caption becomes ![](url).
+    expect(markdown).toMatch(/<img[^>]*src="https:\/\/wyrd\.li\/marketing\/og\.png"/);
+    expect(markdown).toContain("<figcaption>Wyrdli</figcaption>");
+    expect(markdown).toMatch(/!\[[^\]]*\]\(https:\/\/wyrd\.li\/marketing\/plain\.png\)/);
+  });
+
+  it("two overlapping calls both resolve and leave no JSDOM window on globalThis", async () => {
+    const before = typeof (globalThis as { window?: unknown }).window;
+
+    const [markdown, html] = await Promise.all([renderBlockNoteMarkdown(blocks), renderBlockNoteHTML(blocks)]);
+
+    expect(markdown).toContain("One Campaign is one story arc.");
+    expect(html).toContain("One Campaign is one story arc.");
+    expect(typeof (globalThis as { window?: unknown }).window).toBe(before);
+  });
+});

package/src/components/editors/server/renderBlockNoteHTML.ts

@@ -1,26 +1,10 @@
 import type { PartialBlock } from "@blocknote/core";
-import { ServerBlockNoteEditor } from "@blocknote/server-util";
-
-// Default schema only, the same one BlockNoteViewer uses: the editor's mention
-// and diff inline specs are React specs from "use client" modules (next/link,
-// hover cards), so they cannot run here.
-let editor: ServerBlockNoteEditor | undefined;
-
-// ServerBlockNoteEditor swaps globalThis.window/document for its JSDOM around
-// each call and restores them after an await. Two overlapping calls would
-// restore each other's values and could leave the JSDOM window on the server's
-// globals, so calls run one at a time.
-let queue: Promise<unknown> = Promise.resolve();
+import { runWithServerEditor } from "./serverEditor";
 
 /**
  * Renders a BlockNote blocks array to the HTML the editor itself would render,
  * through BlockNote's own server editor (`blocksToFullHTML`). Server only.
  */
 export function renderBlockNoteHTML(blocks: PartialBlock[]): Promise<string> {
-  const run = queue.then(() => {
-    editor ??= ServerBlockNoteEditor.create();
-    return editor.blocksToFullHTML(blocks);
-  });
-  queue = run.catch(() => undefined);
-  return run;
+  return runWithServerEditor((editor) => editor.blocksToFullHTML(blocks));
 }

package/src/components/editors/server/renderBlockNoteMarkdown.ts

@@ -0,0 +1,10 @@
+import type { PartialBlock } from "@blocknote/core";
+import { runWithServerEditor } from "./serverEditor";
+
+/**
+ * Renders a BlockNote blocks array to Markdown through BlockNote's own server
+ * editor (`blocksToMarkdownLossy`). Server only.
+ */
+export function renderBlockNoteMarkdown(blocks: PartialBlock[]): Promise<string> {
+  return runWithServerEditor((editor) => editor.blocksToMarkdownLossy(blocks));
+}

package/src/components/editors/server/serverEditor.ts

@@ -0,0 +1,25 @@
+import { ServerBlockNoteEditor } from "@blocknote/server-util";
+
+// Default schema only, the same one BlockNoteViewer uses: the editor's mention
+// and diff inline specs are React specs from "use client" modules (next/link,
+// hover cards), so they cannot run here.
+let editor: ServerBlockNoteEditor | undefined;
+
+// ServerBlockNoteEditor swaps globalThis.window/document for its JSDOM around
+// each call and restores them after an await. Two overlapping calls would
+// restore each other's values and could leave the JSDOM window on the server's
+// globals, so calls run one at a time.
+let queue: Promise<unknown> = Promise.resolve();
+
+/**
+ * Runs `fn` with the shared server editor, one call at a time. Server only.
+ * Internal to the library: not exported from the barrel.
+ */
+export function runWithServerEditor<T>(fn: (editor: ServerBlockNoteEditor) => T | Promise<T>): Promise<T> {
+  const run = queue.then(() => {
+    editor ??= ServerBlockNoteEditor.create();
+    return fn(editor);
+  });
+  queue = run.catch(() => undefined);
+  return run;
+}

package/src/components/editors/server-entry.ts

@@ -5,3 +5,4 @@
 // `serverExternalPackages` so Node loads it instead of the bundler.
 
 export { BlockNoteServerContent } from "./server/BlockNoteServerContent";
+export { renderBlockNoteMarkdown } from "./server/renderBlockNoteMarkdown";

package/src/core/index.ts

@@ -81,6 +81,7 @@ export * from "../features/email-automation/EmailAutomationModule";
 export * from "../features/email-automation/EmailAutomationStepModule";
 export * from "../features/email-automation/EmailAutomationEnrollmentModule";
 export * from "../features/email-automation/EmailAutomationTriggerModule";
+export * from "../features/email-automation/EmailAutomationCandidateModule";
 // Email automation data (models, services, interfaces, fields): server-safe, so a
 // server page can wrap EmailAutomationService.findOne in cache(). The client-marked
 // ./email-automations entry carries only components, contexts and hooks.

package/src/core/registry/ModuleRegistry.ts

@@ -49,6 +49,7 @@ export interface FoundationModuleDefinitions {
   EmailAutomationStep: ModuleWithPermissions;
   EmailAutomationEnrollment: ModuleWithPermissions;
   EmailAutomationTrigger: ModuleWithPermissions;
+  EmailAutomationCandidate: ModuleWithPermissions;
   // Email blast modules
   EmailBlast: ModuleWithPermissions;
   EmailBlastDelivery: ModuleWithPermissions;

package/src/features/email-automation/EmailAutomationCandidateModule.ts

@@ -0,0 +1,12 @@
+import { UserPlusIcon } from "lucide-react";
+import { ModuleFactory } from "../../permissions";
+import { EmailAutomationCandidate } from "./data/EmailAutomationCandidate";
+
+export const EmailAutomationCandidateModule = (factory: ModuleFactory) =>
+  factory({
+    moduleId: "5c3e9a71-2b84-4f06-9d1e-7a4b6c8e0f25",
+    pageUrl: undefined,
+    name: "email-automation-candidates",
+    model: EmailAutomationCandidate,
+    icon: UserPlusIcon,
+  });

package/src/features/email-automation/EmailAutomationModule.ts

@@ -15,6 +15,7 @@ export const EmailAutomationModule = (factory: ModuleFactory) =>
         fields: [
           createJsonApiInclusion("email-automations", [
             "name",
+            "purpose",
             "trigger",
             "exitTrigger",
             "replyTo",

package/src/features/email-automation/components/__tests__/EmailAutomationEditor.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import { ModuleRegistry } from "../../../../core/registry/ModuleRegistry";
 import { configureI18n } from "../../../../i18n";
@@ -22,31 +22,51 @@ vi.mock("../../data/EmailAutomationService", () => ({
 
 // Base UI renders a closed Select's options nowhere in the DOM, so FormSelect
 // is replaced by a stub that prints its label, its empty option and its
-// values. Everything else in the barrel stays real.
+// values. The stub keeps the real FormFieldWrapper (so the description and the
+// validation error render as in production) and turns each value into a
+// button that sets the field. Everything else in the barrel stays real.
 vi.mock("../../../../components", async () => {
   const actual = await vi.importActual<typeof import("../../../../components")>("../../../../components");
   return {
     ...actual,
     FormSelect: (props: {
+      form: any;
       id: string;
       name?: string;
+      description?: string;
       placeholder?: string;
       allowEmpty?: boolean;
+      isRequired?: boolean;
       values: { id: string; text: string }[];
     }) => (
       <div data-testid={`form-select-${props.id}`}>
-        <span>{props.name}</span>
-        {props.allowEmpty && <span data-value="">{props.placeholder}</span>}
-        {props.values.map((value) => (
-          <span key={value.id} data-value={value.id}>
-            {value.text}
-          </span>
-        ))}
+        <actual.FormFieldWrapper
+          form={props.form}
+          name={props.id}
+          label={props.name}
+          description={props.description}
+          isRequired={props.isRequired}
+        >
+          {(field: any) => (
+            <>
+              {props.allowEmpty && <span data-value="">{props.placeholder}</span>}
+              {props.values.map((value) => (
+                <button key={value.id} type="button" data-value={value.id} onClick={() => field.onChange(value.id)}>
+                  {value.text}
+                </button>
+              ))}
+            </>
+          )}
+        </actual.FormFieldWrapper>
       </div>
     ),
   };
 });
 
+// The sheet is portaled into document.body and its label is not tied to the
+// input, so the name field is found by the field name react-hook-form sets.
+const nameInput = () => document.querySelector<HTMLInputElement>('input[name="name"]')!;
+
 const TRIGGERS = [
   { id: "waitlist-confirmed", key: "waitlist-confirmed", label: "Waitlist confirmed" },
   { id: "registration-completed", key: "registration-completed", label: "Registration completed" },
@@ -101,4 +121,49 @@ describe("EmailAutomationEditor", () => {
     // The option values are the trigger keys, the visible text the plain label.
     expect(within(triggerSelect).getByText("Waitlist confirmed")).toHaveAttribute("data-value", "waitlist-confirmed");
   });
+  it("purpose select is required on create", async () => {
+    render(<EmailAutomationEditor forceShow dialogOpen />);
+
+    const purposeSelect = await screen.findByTestId("form-select-purpose");
+    expect(within(purposeSelect).getByText("emailPurpose.service")).toHaveAttribute("data-value", "service");
+    expect(within(purposeSelect).getByText("emailPurpose.marketing")).toHaveAttribute("data-value", "marketing");
+
+    fireEvent.change(nameInput(), {
+      target: { value: "Welcome" },
+    });
+    fireEvent.click(screen.getByTestId("modal-button-create"));
+
+    expect(await within(purposeSelect).findByText("emailPurpose.error")).toBeInTheDocument();
+    expect(mocks.create).not.toHaveBeenCalled();
+  });
+
+  it("service purpose shows the warning", async () => {
+    render(<EmailAutomationEditor forceShow dialogOpen />);
+
+    const purposeSelect = await screen.findByTestId("form-select-purpose");
+    expect(within(purposeSelect).queryByText("emailPurpose.serviceWarning")).not.toBeInTheDocument();
+
+    fireEvent.click(within(purposeSelect).getByText("emailPurpose.service"));
+    expect(await within(purposeSelect).findByText("emailPurpose.serviceWarning")).toBeInTheDocument();
+
+    fireEvent.click(within(purposeSelect).getByText("emailPurpose.marketing"));
+    await waitFor(() =>
+      expect(within(purposeSelect).queryByText("emailPurpose.serviceWarning")).not.toBeInTheDocument(),
+    );
+  });
+
+  it("payload carries purpose", async () => {
+    mocks.create.mockResolvedValue({ id: "a1" });
+    render(<EmailAutomationEditor forceShow dialogOpen />);
+
+    const purposeSelect = await screen.findByTestId("form-select-purpose");
+    fireEvent.change(nameInput(), {
+      target: { value: "Welcome" },
+    });
+    fireEvent.click(within(purposeSelect).getByText("emailPurpose.service"));
+    fireEvent.click(screen.getByTestId("modal-button-create"));
+
+    await waitFor(() => expect(mocks.create).toHaveBeenCalled());
+    expect(mocks.create.mock.calls[0][0]).toMatchObject({ name: "Welcome", purpose: "service" });
+  });
 });

package/src/features/email-automation/components/forms/EmailAutomationAddPersonDialog.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import { UserPlusIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { v4 } from "uuid";
+import { errorToast } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever, useDebounce } from "../../../../hooks";
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Button,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../../shadcnui";
+import { getInitials } from "../../../../utils/getInitials";
+import { showToast } from "../../../../utils/toast";
+import { EmailAutomationCandidateInterface } from "../../data/EmailAutomationCandidateInterface";
+import { EmailAutomationService } from "../../data/EmailAutomationService";
+
+export type EmailAutomationAddPersonDialogProps = {
+  automationId: string;
+  disabled: boolean;
+  onAdded: () => void;
+};
+
+/**
+ * "Add person" on the Recipients tab: searches users and waitlist entries and
+ * enrols the picked one. The API decides who is addable and why not; this
+ * dialog only shows it (addable rows first, then dimmed rows with the reason).
+ */
+export function EmailAutomationAddPersonDialog({
+  automationId,
+  disabled,
+  onAdded,
+}: EmailAutomationAddPersonDialogProps) {
+  const t = useTranslations();
+  const [open, setOpen] = useState<boolean>(false);
+  const searchTermRef = useRef<string>("");
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+
+  const data: DataListRetriever<EmailAutomationCandidateInterface> = useDataListRetriever({
+    ready: open,
+    retriever: (params) => EmailAutomationService.findCandidates(params),
+    retrieverParams: { automationId },
+    module: Modules.EmailAutomationCandidate,
+  });
+
+  useEffect(() => {
+    if (open) data.setReady(true);
+  }, [data, open]);
+
+  const refreshList = useCallback(
+    async (searchedTerm: string) => {
+      if (searchedTerm === searchTermRef.current) return;
+      searchTermRef.current = searchedTerm;
+      await data.search(searchedTerm);
+    },
+    [data],
+  );
+
+  const updateSearchTerm = useDebounce(refreshList, 500);
+
+  useEffect(() => {
+    if (open) updateSearchTerm(searchTerm);
+  }, [open, searchTerm]);
+
+  useEffect(() => () => updateSearchTerm.cancel(), [updateSearchTerm]);
+
+  useEffect(() => {
+    if (!data.next || !sentinelRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) data.next?.();
+      },
+      { threshold: 0.1, rootMargin: "200px" },
+    );
+    observer.observe(sentinelRef.current);
+    return () => observer.disconnect();
+  }, [data.next]);
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      updateSearchTerm.cancel();
+      return;
+    }
+
+    // Reopening starts from an empty search and re-reads the list: someone added
+    // last time is now "already in this automation".
+    setSearchTerm("");
+    if (data.isLoaded) {
+      if (searchTermRef.current !== "") {
+        searchTermRef.current = "";
+        void data.search("");
+      } else {
+        void data.refresh();
+      }
+    }
+  };
+
+  const add = async (candidate: EmailAutomationCandidateInterface) => {
+    if (!candidate.addable) return;
+    try {
+      await EmailAutomationService.addEnrollment({
+        automationId,
+        input: { id: v4(), recipientType: candidate.recipientType, recipientId: candidate.recipientId },
+      });
+      setOpen(false);
+      showToast(t("emailAutomations.recipients.addDialog.added", { email: candidate.email }));
+      onAdded();
+    } catch (error) {
+      errorToast({ title: t("common.errors.error"), error });
+    }
+  };
+
+  const candidates = data.data ?? [];
+  const addable = candidates.filter((candidate) => candidate.addable);
+  const blocked = candidates.filter((candidate) => !candidate.addable);
+
+  const renderCandidate = (candidate: EmailAutomationCandidateInterface) => (
+    <CommandItem
+      key={candidate.id}
+      className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
+      value={candidate.id}
+      disabled={!candidate.addable}
+      data-testid={`email-automation-candidate-${candidate.recipientId}`}
+      data-addable={candidate.addable ? "true" : "false"}
+      onSelect={() => void add(candidate)}
+    >
+      <div className="flex min-w-0 flex-1 flex-row items-center px-4 py-1">
+        <div className="*:ring-border *:ring-1">
+          <Avatar className="h-6 w-6">
+            <AvatarFallback>{getInitials(candidate.name || candidate.email)}</AvatarFallback>
+          </Avatar>
+        </div>
+        <div className="ms-5 me-3 flex min-w-0 flex-1 flex-col">
+          {candidate.name ? (
+            <>
+              <div className="truncate text-sm font-medium">{candidate.name}</div>
+              <div className="truncate text-xs font-normal">{candidate.email}</div>
+            </>
+          ) : (
+            <div className="truncate text-sm font-medium">{candidate.email}</div>
+          )}
+        </div>
+        {candidate.addable ? (
+          <Badge
+            variant={candidate.recipientType === "waitlist" ? "softBlue" : "softGray"}
+            className="ms-auto shrink-0"
+          >
+            {t(`emailAutomations.recipients.addDialog.kind.${candidate.recipientType}`)}
+          </Badge>
+        ) : (
+          candidate.reason && (
+            <Badge
+              variant="softAmber"
+              className="ms-auto shrink-0"
+              data-testid={`email-automation-candidate-reason-${candidate.recipientId}`}
+            >
+              {t(`emailAutomations.recipients.addDialog.reason.${candidate.reason}`)}
+            </Badge>
+          )
+        )}
+      </div>
+    </CommandItem>
+  );
+
+  return (
+    <div className="flex items-center gap-2">
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogTrigger
+          render={<Button variant="outline" size="sm" data-testid="email-automation-add-person" />}
+          disabled={disabled}
+        >
+          <UserPlusIcon className="h-3.5 w-3.5" />
+          {t("emailAutomations.recipients.addPerson")}
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-2xl" data-testid="email-automation-add-person-dialog">
+          <DialogHeader>
+            <DialogTitle>{t("emailAutomations.recipients.addDialog.title")}</DialogTitle>
+          </DialogHeader>
+          <Command shouldFilter={false}>
+            <CommandInput
+              data-testid="email-automation-add-person-search"
+              placeholder={t("emailAutomations.recipients.addDialog.search")}
+              value={searchTerm}
+              onValueChange={setSearchTerm}
+            />
+            <CommandList className="mt-2">
+              <CommandEmpty>{t("emailAutomations.recipients.addDialog.empty")}</CommandEmpty>
+              {addable.length > 0 && (
+                <CommandGroup heading={t("emailAutomations.recipients.addDialog.groups.addable")}>
+                  {addable.map(renderCandidate)}
+                </CommandGroup>
+              )}
+              {blocked.length > 0 && (
+                <CommandGroup heading={t("emailAutomations.recipients.addDialog.groups.blocked")}>
+                  {blocked.map(renderCandidate)}
+                </CommandGroup>
+              )}
+              {data.next && <div ref={sentinelRef} style={{ height: 1 }} />}
+            </CommandList>
+          </Command>
+        </DialogContent>
+      </Dialog>
+      {disabled && (
+        <span className="text-muted-foreground text-xs font-normal">
+          {t("emailAutomations.recipients.addPersonNoSteps")}
+        </span>
+      )}
+    </div>
+  );
+}