@carlonicora/nextjs-jsonapi 5.2.0 → 5.3.0

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

@@ -0,0 +1,153 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import { EditorSheet, FormInput, FormSelect, FormSwitch } from "../../../../components";
+import { Modules } from "../../../../core";
+import { useI18nRouter } from "../../../../i18n";
+import { EmailAutomationInput, EmailAutomationInterface } from "../../data/EmailAutomationInterface";
+import { EmailAutomationService } from "../../data/EmailAutomationService";
+import { EmailAutomationTriggerInterface } from "../../data/EmailAutomationTriggerInterface";
+
+export type EmailAutomationEditorProps = {
+  automation?: EmailAutomationInterface;
+  propagateChanges?: (automation: EmailAutomationInterface) => void;
+  onSuccess?: () => void | Promise<void>;
+  trigger?: ReactNode;
+  forceShow?: boolean;
+  onClose?: () => void;
+  dialogOpen?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
+};
+
+function EmailAutomationEditorInternal({
+  automation,
+  propagateChanges,
+  onSuccess,
+  trigger,
+  forceShow,
+  onClose,
+  dialogOpen,
+  onDialogOpenChange,
+}: EmailAutomationEditorProps) {
+  const t = useTranslations();
+  const router = useI18nRouter();
+  const isEdit = !!automation;
+  const [triggers, setTriggers] = useState<EmailAutomationTriggerInterface[]>([]);
+
+  // Trigger labels are plain strings from the app config, not i18n keys.
+  useEffect(() => {
+    let active = true;
+    EmailAutomationService.findTriggers()
+      .then((list) => {
+        if (active) setTriggers(list);
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const triggerValues = useMemo(() => triggers.map((entry) => ({ id: entry.key, text: entry.label })), [triggers]);
+
+  const formSchema = useMemo(
+    () =>
+      z.object({
+        id: z.uuidv4(),
+        name: z.string().min(1, { message: t("emailAutomations.fields.name.error") }),
+        trigger: z.string().optional(),
+        exitTrigger: z.string().optional(),
+        replyTo: z.string().refine((value) => value === "" || z.email().safeParse(value).success, {
+          message: t("emailAutomations.fields.replyTo.error"),
+        }),
+        isActive: z.boolean(),
+      }),
+    [t],
+  );
+
+  const getDefaultValues = useCallback(
+    () => ({
+      id: automation?.id ?? v4(),
+      name: automation?.name ?? "",
+      trigger: automation?.trigger ?? "",
+      exitTrigger: automation?.exitTrigger ?? "",
+      replyTo: automation?.replyTo ?? "",
+      isActive: automation?.isActive ?? false,
+    }),
+    [automation],
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("emailAutomations.admin.title")}
+      entityName={automation?.name}
+      title={isEdit ? t("emailAutomations.admin.editAutomation") : t("emailAutomations.admin.newAutomation")}
+      isEdit={isEdit}
+      module={Modules.EmailAutomation}
+      size="md"
+      propagateChanges={propagateChanges}
+      onSuccess={onSuccess}
+      onNavigate={(url) => router.push(url)}
+      onSubmit={async (values) => {
+        const payload: EmailAutomationInput = {
+          id: values.id,
+          name: values.name,
+          trigger: values.trigger || undefined,
+          exitTrigger: values.exitTrigger || undefined,
+          replyTo: values.replyTo || undefined,
+          isActive: values.isActive,
+        };
+        return isEdit ? await EmailAutomationService.update(payload) : await EmailAutomationService.create(payload);
+      }}
+      onReset={getDefaultValues}
+      trigger={trigger}
+      forceShow={forceShow}
+      onClose={onClose}
+      dialogOpen={dialogOpen}
+      onDialogOpenChange={onDialogOpenChange}
+    >
+      <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="trigger"
+          name={t("emailAutomations.fields.trigger.label")}
+          placeholder={t("emailAutomations.fields.trigger.none")}
+          values={triggerValues}
+          allowEmpty
+        />
+        <FormSelect
+          form={form}
+          id="exitTrigger"
+          name={t("emailAutomations.fields.exitTrigger.label")}
+          placeholder={t("emailAutomations.fields.trigger.none")}
+          values={triggerValues}
+          allowEmpty
+        />
+        <FormInput form={form} id="replyTo" name={t("emailAutomations.fields.replyTo.label")} />
+        <FormSwitch
+          form={form}
+          id="isActive"
+          name={t("emailAutomations.fields.isActive.label")}
+          description={t("emailAutomations.fields.isActive.help")}
+        />
+      </div>
+    </EditorSheet>
+  );
+}
+
+export function EmailAutomationEditor(props: EmailAutomationEditorProps) {
+  return <EmailAutomationEditorInternal {...props} />;
+}
+
+export default EmailAutomationEditor;

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

@@ -0,0 +1,151 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import { EditorSheet, FormInput, FormTextarea } from "../../../../components";
+import { Modules } from "../../../../core";
+import { useEmailAutomation } from "../../contexts/EmailAutomationContext";
+import { EmailAutomationStepInput, EmailAutomationStepInterface } from "../../data/EmailAutomationStepInterface";
+import { EmailAutomationStepService } from "../../data/EmailAutomationStepService";
+
+/** The fixed variable set the renderer fills (spec § "Rendering"). */
+const TEMPLATE_VARIABLES = ["{{name}}", "{{email}}", "{{url}}", "{{unsubscribeUrl}}", "{{unsubscribeAllUrl}}"];
+
+export type EmailStepEditorProps = {
+  step?: EmailAutomationStepInterface;
+  automationId: string;
+  /** Canvas position for a step created from the editor. */
+  initialPosition?: { x: number; y: number };
+  /** The head step's delay counts from entering the automation, not from a previous email. */
+  isHead?: boolean;
+  trigger?: ReactNode;
+  forceShow?: boolean;
+  onClose?: () => void;
+  dialogOpen?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
+  onSuccess?: () => void | Promise<void>;
+};
+
+function EmailStepEditorInternal({
+  step,
+  automationId,
+  initialPosition,
+  isHead,
+  trigger,
+  forceShow,
+  onClose,
+  dialogOpen,
+  onDialogOpenChange,
+  onSuccess,
+}: EmailStepEditorProps) {
+  const t = useTranslations();
+  const { reload } = useEmailAutomation();
+  const isEdit = !!step;
+
+  const formSchema = useMemo(
+    () =>
+      z.object({
+        id: z.uuidv4(),
+        subject: z.string().min(1, { message: t("emailAutomations.step.fields.subject.error") }),
+        delayHours: z.number().int().min(0),
+        body: z.string().min(1, { message: t("emailAutomations.step.fields.body.error") }),
+      }),
+    [t],
+  );
+
+  const getDefaultValues = useCallback(
+    () => ({
+      id: step?.id ?? v4(),
+      subject: step?.subject ?? "",
+      delayHours: step?.delayHours ?? 24,
+      body: step?.body ?? "",
+    }),
+    [step],
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("emailAutomations.step.title")}
+      entityName={step?.subject}
+      title={isEdit ? t("emailAutomations.step.editTitle") : t("emailAutomations.step.title")}
+      isEdit={isEdit}
+      module={Modules.EmailAutomationStep}
+      size="lg"
+      onSubmit={async (values) => {
+        const payload: EmailAutomationStepInput = {
+          id: values.id,
+          automationId,
+          subject: values.subject,
+          body: values.body,
+          delayHours: values.delayHours,
+          positionX: step ? step.positionX : initialPosition?.x,
+          positionY: step ? step.positionY : initialPosition?.y,
+        };
+        return isEdit
+          ? await EmailAutomationStepService.update(payload)
+          : await EmailAutomationStepService.create(payload);
+      }}
+      // Save → reload the canvas, then whatever the caller adds.
+      onSuccess={async () => {
+        await reload();
+        await onSuccess?.();
+      }}
+      onReset={getDefaultValues}
+      trigger={trigger}
+      forceShow={forceShow}
+      onClose={onClose}
+      dialogOpen={dialogOpen}
+      onDialogOpenChange={onDialogOpenChange}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        <FormInput form={form} id="subject" name={t("emailAutomations.step.fields.subject.label")} isRequired />
+        <FormInput
+          form={form}
+          id="delayHours"
+          type="number"
+          name={t("emailAutomations.step.fields.delayHours.label")}
+          description={
+            isHead ? t("emailAutomations.canvas.hoursAfterEntering") : t("emailAutomations.canvas.hoursAfterPrevious")
+          }
+        />
+        {/* FormTextarea has no `rows` prop; min-h-72 is the height of ~14 rows. */}
+        <FormTextarea
+          form={form}
+          id="body"
+          name={t("emailAutomations.step.fields.body.label")}
+          className="min-h-72"
+          isRequired
+          description={
+            <>
+              <span className="block">
+                {t("emailAutomations.step.variablesHint")}{" "}
+                {TEMPLATE_VARIABLES.map((variable) => (
+                  <span key={variable} className="me-2 text-foreground">
+                    {variable}
+                  </span>
+                ))}
+              </span>
+              <span className="mt-1 block">{t("emailAutomations.step.unsubscribeHint")}</span>
+            </>
+          }
+        />
+      </div>
+    </EditorSheet>
+  );
+}
+
+export function EmailStepEditor(props: EmailStepEditorProps) {
+  return <EmailStepEditorInternal {...props} />;
+}
+
+export default EmailStepEditor;

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

@@ -0,0 +1,15 @@
+export * from "./containers/EmailAutomationsListContainer";
+export * from "./containers/EmailAutomationContainer";
+export * from "./lists/EmailAutomationsList";
+export * from "./lists/EmailAutomationRecipientsList";
+export * from "./forms/EmailAutomationEditor";
+export * from "./forms/EmailStepEditor";
+export * from "./canvas/EmailAutomationActiveSwitch";
+export * from "./canvas/EmailAutomationCanvasTab";
+export * from "./canvas/EmailAutomationCanvas";
+export * from "./canvas/EmailAutomationCanvasInspector";
+export * from "./canvas/nodes/TriggerNode";
+export * from "./canvas/nodes/EmailStepNode";
+export * from "./canvas/edges/DelayEdge";
+export * from "./canvas/buildCanvasGraph";
+export * from "./unsubscribe/EmailUnsubscribe";

package/src/features/email-automation/components/lists/EmailAutomationRecipientsList.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { RefreshCw } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useMemo, useState } from "react";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../shadcnui";
+import { useEmailAutomation } from "../../contexts/EmailAutomationContext";
+import { EmailAutomationEnrollmentFields } from "../../data/email-automation-enrollment.fields";
+import { EmailAutomationEnrollmentInterface } from "../../data/EmailAutomationEnrollmentInterface";
+import { EmailAutomationService } from "../../data/EmailAutomationService";
+
+/**
+ * Read-only list of the people in this automation (owner decision 6: no row
+ * actions). Rendered inside a tab, so it keeps its own bordered card (no
+ * `fullWidth`), as PricesList does inside ProductContainer.
+ */
+export function EmailAutomationRecipientsList() {
+  const t = useTranslations();
+  const { automation } = useEmailAutomation();
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+
+  const data: DataListRetriever<EmailAutomationEnrollmentInterface> = useDataListRetriever({
+    retriever: (params) => EmailAutomationService.findEnrollments(params),
+    retrieverParams: { automationId: automation?.id },
+    module: Modules.EmailAutomationEnrollment,
+  });
+
+  const handleStatusChange = (value: string | null) => {
+    const status = value ?? "all";
+    setStatusFilter(status);
+    data.addAdditionalParameter("status", status === "all" ? null : status);
+  };
+
+  const statusItems = useMemo(
+    () => ({
+      all: t("emailAutomations.recipients.status.all"),
+      active: t("emailAutomations.recipients.status.active"),
+      completed: t("emailAutomations.recipients.status.completed"),
+      unsubscribed: t("emailAutomations.recipients.status.unsubscribed"),
+      exited: t("emailAutomations.recipients.status.exited"),
+      failed: t("emailAutomations.recipients.status.failed"),
+    }),
+    [t],
+  );
+
+  const filters = (
+    <div className="flex items-center gap-4">
+      <Select items={statusItems} value={statusFilter} onValueChange={handleStatusChange}>
+        <SelectTrigger className="w-40">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">{t("emailAutomations.recipients.status.all")}</SelectItem>
+          <SelectItem value="active">{t("emailAutomations.recipients.status.active")}</SelectItem>
+          <SelectItem value="completed">{t("emailAutomations.recipients.status.completed")}</SelectItem>
+          <SelectItem value="unsubscribed">{t("emailAutomations.recipients.status.unsubscribed")}</SelectItem>
+          <SelectItem value="exited">{t("emailAutomations.recipients.status.exited")}</SelectItem>
+          <SelectItem value="failed">{t("emailAutomations.recipients.status.failed")}</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Button variant="outline" size="icon" onClick={() => void data.refresh()} disabled={!data.isLoaded}>
+        <RefreshCw className={`h-4 w-4 ${!data.isLoaded ? "animate-spin" : ""}`} />
+      </Button>
+    </div>
+  );
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[
+        EmailAutomationEnrollmentFields.email,
+        EmailAutomationEnrollmentFields.name,
+        EmailAutomationEnrollmentFields.status,
+        EmailAutomationEnrollmentFields.currentStep,
+        EmailAutomationEnrollmentFields.nextSendAt,
+        EmailAutomationEnrollmentFields.sentCount,
+      ]}
+      tableGeneratorType={Modules.EmailAutomationEnrollment}
+      filters={filters}
+      /* The enrolments endpoint takes no search term, so rendering the box would
+         give the page a control that silently does nothing. */
+      allowSearch={false}
+      emptyState={t("emailAutomations.recipients.empty")}
+    />
+  );
+}

package/src/features/email-automation/components/lists/EmailAutomationsList.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { MailIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode, useEffect, useMemo, useState } from "react";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { EmptyState } from "../../../../shadcnui";
+import { EmailAutomationFields } from "../../data/email-automation.fields";
+import { EmailAutomationInterface } from "../../data/EmailAutomationInterface";
+import { EmailAutomationService } from "../../data/EmailAutomationService";
+import { EmailAutomationTriggerInterface } from "../../data/EmailAutomationTriggerInterface";
+import EmailAutomationEditor from "../forms/EmailAutomationEditor";
+
+type EmailAutomationsListProps = {
+  /**
+   * Pass this whenever the list is the page's own content inside a
+   * `RoundPageContainer fullWidth`. Without it ContentListTable wraps itself in
+   * `rounded-md border`, drawing a second bordered card inside the page's
+   * rounded shell.
+   */
+  fullWidth?: boolean;
+};
+
+export function EmailAutomationsList({ fullWidth }: EmailAutomationsListProps = {}) {
+  const t = useTranslations();
+  const [triggers, setTriggers] = useState<EmailAutomationTriggerInterface[]>([]);
+
+  const data: DataListRetriever<EmailAutomationInterface> = useDataListRetriever({
+    retriever: (params) => EmailAutomationService.findMany(params),
+    retrieverParams: {},
+    module: Modules.EmailAutomation,
+  });
+
+  // The trigger column shows the label the app declares, not the stored key.
+  useEffect(() => {
+    let active = true;
+    EmailAutomationService.findTriggers()
+      .then((list) => {
+        if (active) setTriggers(list);
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const triggerLabels = useMemo(
+    () => Object.fromEntries(triggers.map((trigger) => [trigger.key, trigger.label])),
+    [triggers],
+  );
+
+  const functions: ReactNode[] = [<EmailAutomationEditor key="create-email-automation" />];
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[
+        EmailAutomationFields.name,
+        EmailAutomationFields.trigger,
+        EmailAutomationFields.status,
+        EmailAutomationFields.steps,
+        EmailAutomationFields.active,
+        EmailAutomationFields.completed,
+        EmailAutomationFields.unsubscribed,
+      ]}
+      tableGeneratorType={Modules.EmailAutomation}
+      functions={functions}
+      fullWidth={fullWidth}
+      title={t("emailAutomations.admin.title")}
+      context={{ triggerLabels }}
+      emptyState={<EmptyState icon={MailIcon} title={t("emailAutomations.admin.empty")} />}
+    />
+  );
+}

package/src/features/email-automation/components/unsubscribe/EmailUnsubscribe.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { CheckCircle, Loader2, XCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import { Button } from "../../../../shadcnui";
+import { SectionHeader } from "../../../../components/typography";
+import { EmailAutomationEnrollmentService } from "../../data/EmailAutomationEnrollmentService";
+
+type UnsubscribeScope = "automation" | "all";
+
+interface Props {
+  token: string;
+  scope: UnsubscribeScope;
+}
+
+type UnsubscribeState = "loading" | "success" | "error";
+
+export function EmailUnsubscribe({ token, scope }: Props) {
+  const t = useTranslations();
+  const [state, setState] = useState<UnsubscribeState>("loading");
+  const [stoppedScope, setStoppedScope] = useState<UnsubscribeScope>(scope);
+  const [automationName, setAutomationName] = useState<string>("");
+  const [isStoppingAll, setIsStoppingAll] = useState<boolean>(false);
+
+  useEffect(() => {
+    async function unsubscribe() {
+      try {
+        const enrollment = await EmailAutomationEnrollmentService.unsubscribe({ token, scope });
+        setAutomationName(enrollment?.automation?.name ?? "");
+        setStoppedScope(scope);
+        setState("success");
+      } catch {
+        setState("error");
+      }
+    }
+
+    unsubscribe();
+  }, [token, scope]);
+
+  const stopAll = async () => {
+    setIsStoppingAll(true);
+    try {
+      await EmailAutomationEnrollmentService.unsubscribe({ token, scope: "all" });
+      setStoppedScope("all");
+    } catch {
+      setState("error");
+    } finally {
+      setIsStoppingAll(false);
+    }
+  };
+
+  if (state === "loading") {
+    return (
+      <div className="flex flex-col items-center justify-center space-y-4 py-16 text-center">
+        <Loader2 className="text-primary h-12 w-12 animate-spin" />
+        <p className="text-muted-foreground text-sm">{t("emailAutomations.unsubscribe.loading")}</p>
+      </div>
+    );
+  }
+
+  if (state === "error") {
+    return (
+      <div className="flex flex-col items-center justify-center space-y-4 py-16 text-center">
+        <div className="bg-destructive/10 rounded-full p-4">
+          <XCircle className="text-destructive h-12 w-12" />
+        </div>
+        <SectionHeader level={2}>{t("emailAutomations.unsubscribe.invalidTitle")}</SectionHeader>
+        <p className="text-muted-foreground max-w-md text-sm leading-relaxed">
+          {t("emailAutomations.unsubscribe.invalidBody")}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-4 py-16 text-center">
+      <div className="bg-primary/10 rounded-full p-4">
+        <CheckCircle className="text-primary h-12 w-12" />
+      </div>
+      <SectionHeader level={2}>{t("emailAutomations.unsubscribe.title")}</SectionHeader>
+      {stoppedScope === "all" ? (
+        <p className="text-muted-foreground max-w-md text-sm leading-relaxed">
+          {t("emailAutomations.unsubscribe.stoppedAll")}
+        </p>
+      ) : (
+        <>
+          <p className="text-muted-foreground max-w-md text-sm leading-relaxed">
+            {t("emailAutomations.unsubscribe.stoppedAutomation", { name: automationName })}
+          </p>
+          <Button variant="secondary" onClick={stopAll} disabled={isStoppingAll}>
+            {isStoppingAll && <Loader2 className="h-4 w-4 animate-spin" />}
+            {t("emailAutomations.unsubscribe.alsoStopAll")}
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { EmailUnsubscribe } from "../EmailUnsubscribe";
+
+const { unsubscribe } = vi.hoisted(() => ({
+  unsubscribe: vi.fn(),
+}));
+
+vi.mock("../../../data/EmailAutomationEnrollmentService", () => ({
+  EmailAutomationEnrollmentService: {
+    unsubscribe: (params: unknown) => unsubscribe(params),
+  },
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("EmailUnsubscribe", () => {
+  it("stops the automation and offers to stop every marketing email", async () => {
+    unsubscribe.mockResolvedValue({ automation: { name: "Welcome" } });
+
+    render(<EmailUnsubscribe token="tok" scope="automation" />);
+
+    expect(await screen.findByText("emailAutomations.unsubscribe.stoppedAutomation")).toBeInTheDocument();
+    expect(unsubscribe).toHaveBeenCalledWith({ token: "tok", scope: "automation" });
+
+    fireEvent.click(screen.getByRole("button", { name: "emailAutomations.unsubscribe.alsoStopAll" }));
+
+    expect(await screen.findByText("emailAutomations.unsubscribe.stoppedAll")).toBeInTheDocument();
+    expect(unsubscribe).toHaveBeenLastCalledWith({ token: "tok", scope: "all" });
+    expect(screen.queryByRole("button", { name: "emailAutomations.unsubscribe.alsoStopAll" })).not.toBeInTheDocument();
+  });
+
+  it("shows only the stopped-all message when the link already asks for every email", async () => {
+    unsubscribe.mockResolvedValue({ automation: { name: "Welcome" } });
+
+    render(<EmailUnsubscribe token="tok" scope="all" />);
+
+    expect(await screen.findByText("emailAutomations.unsubscribe.stoppedAll")).toBeInTheDocument();
+    expect(unsubscribe).toHaveBeenCalledWith({ token: "tok", scope: "all" });
+    expect(screen.queryByRole("button", { name: "emailAutomations.unsubscribe.alsoStopAll" })).not.toBeInTheDocument();
+  });
+
+  it("shows the invalid-link state when the call is rejected", async () => {
+    unsubscribe.mockRejectedValue(new Error("Not found"));
+
+    render(<EmailUnsubscribe token="unknown" scope="automation" />);
+
+    await waitFor(() => {
+      expect(screen.getByText("emailAutomations.unsubscribe.invalidTitle")).toBeInTheDocument();
+    });
+    expect(screen.getByText("emailAutomations.unsubscribe.invalidBody")).toBeInTheDocument();
+  });
+});