@carlonicora/nextjs-jsonapi 6.15.0 → 6.17.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.15.0",
+  "version": "6.17.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

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

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

@@ -12,6 +12,7 @@ import { useI18nRouter } from "../../../../i18n";
 import { EmailAutomationInput, EmailAutomationInterface } from "../../data/EmailAutomationInterface";
 import { EmailAutomationService } from "../../data/EmailAutomationService";
 import { EmailAutomationTriggerInterface } from "../../data/EmailAutomationTriggerInterface";
+import { EmailPurpose } from "../../data/EmailPurpose";
 
 export type EmailAutomationEditorProps = {
   automation?: EmailAutomationInterface;
@@ -65,6 +66,7 @@ function EmailAutomationEditorInternal({
           message: t("emailAutomations.fields.replyTo.error"),
         }),
         isActive: z.boolean(),
+        purpose: z.enum(["service", "marketing"], { message: t("emailPurpose.error") }),
       }),
     [t],
   );
@@ -77,6 +79,8 @@ function EmailAutomationEditorInternal({
       exitTrigger: automation?.exitTrigger ?? "",
       replyTo: automation?.replyTo ?? "",
       isActive: automation?.isActive ?? false,
+      // No preselected value on create: the form refuses to save without a choice.
+      purpose: (automation?.purpose ?? "") as EmailPurpose,
     }),
     [automation],
   );
@@ -86,6 +90,15 @@ function EmailAutomationEditorInternal({
     defaultValues: getDefaultValues(),
   });
 
+  const purpose = form.watch("purpose");
+  const purposeValues = useMemo(
+    () => [
+      { id: "service", text: t("emailPurpose.service") },
+      { id: "marketing", text: t("emailPurpose.marketing") },
+    ],
+    [t],
+  );
+
   return (
     <EditorSheet
       form={form}
@@ -106,6 +119,7 @@ function EmailAutomationEditorInternal({
           exitTrigger: values.exitTrigger || undefined,
           replyTo: values.replyTo || undefined,
           isActive: values.isActive,
+          purpose: values.purpose,
         };
         return isEdit ? await EmailAutomationService.update(payload) : await EmailAutomationService.create(payload);
       }}
@@ -118,6 +132,15 @@ function EmailAutomationEditorInternal({
     >
       <div className="flex w-full flex-col gap-y-4">
         <FormInput form={form} id="name" name={t("emailAutomations.fields.name.label")} isRequired />
+        <FormSelect
+          form={form}
+          id="purpose"
+          name={t("emailPurpose.label")}
+          placeholder={t("emailPurpose.placeholder")}
+          values={purposeValues}
+          description={purpose === "service" ? t("emailPurpose.serviceWarning") : undefined}
+          isRequired
+        />
         <FormSelect
           form={form}
           id="trigger"

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

@@ -13,7 +13,9 @@ import { EmailAutomationStepInput, EmailAutomationStepInterface } from "../../da
 import { EmailAutomationStepService } from "../../data/EmailAutomationStepService";
 
 /** The fixed variable set the renderer fills (spec § "Rendering"). */
-const TEMPLATE_VARIABLES = ["{{name}}", "{{email}}", "{{url}}", "{{unsubscribeUrl}}", "{{unsubscribeAllUrl}}"];
+const TEMPLATE_VARIABLES = ["{{name}}", "{{email}}", "{{url}}", "{{unsubscribeUrl}}"];
+/** Only a Marketing automation fills it: a Service email has no "stop all marketing emails" link. */
+const MARKETING_ONLY_VARIABLES = ["{{unsubscribeAllUrl}}"];
 
 export type EmailStepEditorProps = {
   step?: EmailAutomationStepInterface;
@@ -43,8 +45,10 @@ function EmailStepEditorInternal({
   onSuccess,
 }: EmailStepEditorProps) {
   const t = useTranslations();
-  const { reload } = useEmailAutomation();
+  const { automation, reload } = useEmailAutomation();
   const isEdit = !!step;
+  const templateVariables =
+    automation?.purpose === "service" ? TEMPLATE_VARIABLES : [...TEMPLATE_VARIABLES, ...MARKETING_ONLY_VARIABLES];
 
   const formSchema = useMemo(
     () =>
@@ -129,7 +133,7 @@ function EmailStepEditorInternal({
             <>
               <span className="block">
                 {t("emailAutomations.step.variablesHint")}{" "}
-                {TEMPLATE_VARIABLES.map((variable) => (
+                {templateVariables.map((variable) => (
                   <span key={variable} className="me-2 text-foreground">
                     {variable}
                   </span>

package/src/features/email-automation/components/index.ts

@@ -4,6 +4,7 @@ export * from "./lists/EmailAutomationsList";
 export * from "./lists/EmailAutomationRecipientsList";
 export * from "./forms/EmailAutomationEditor";
 export * from "./forms/EmailStepEditor";
+export * from "./forms/EmailAutomationAddPersonDialog";
 export * from "./canvas/EmailAutomationActiveSwitch";
 export * from "./canvas/EmailAutomationCanvasTab";
 export * from "./canvas/EmailAutomationCanvas";