@carlonicora/nextjs-jsonapi 6.8.0 → 6.10.0

package/src/features/assistant/components/parts/AssistantThread.tsx

@@ -10,7 +10,8 @@ interface Props {
   messages: AssistantMessageInterface[];
   sending: boolean;
   status?: string;
-  onSelectFollowUp: (q: string) => void;
+  /** Omitted, the thread is read-only: suggested questions render disabled. */
+  onSelectFollowUp?: (q: string) => void;
   failedMessageIds?: Set<string>;
   onRetry?: (tempId: string) => void;
   renderApprovalAction?: ApprovalActionRenderer;

package/src/features/assistant-message/components/MessageItem.tsx

@@ -36,7 +36,7 @@ function mentionUrlTransform(url: string): string {
 interface Props {
   message: AssistantMessageInterface;
   isLatestAssistant: boolean;
-  onSelectFollowUp: (q: string) => void;
+  onSelectFollowUp?: (q: string) => void;
   failedMessageIds?: Set<string>;
   onRetry?: (tempId: string) => void;
   renderApprovalAction?: ApprovalActionRenderer;

package/src/features/assistant-message/components/MessageList.tsx

@@ -6,7 +6,7 @@ import { MessageItem, type ApprovalActionRenderer, type MentionRenderer } from "
 
 interface Props {
   messages: AssistantMessageInterface[];
-  onSelectFollowUp: (q: string) => void;
+  onSelectFollowUp?: (q: string) => void;
   failedMessageIds?: Set<string>;
   onRetry?: (tempId: string) => void;
   renderApprovalAction?: ApprovalActionRenderer;

package/src/features/assistant-message/components/parts/MessageSourcesContainer.tsx

@@ -9,7 +9,7 @@ import { MessageSourcesPanel } from "./MessageSourcesPanel";
 interface Props {
   message: AssistantMessageInterface;
   isLatestAssistant: boolean;
-  onSelectFollowUp: (q: string) => void;
+  onSelectFollowUp?: (q: string) => void;
 }
 
 class SourcesFetcher extends ClientAbstractService {

package/src/features/assistant-message/components/parts/MessageSourcesPanel.tsx

@@ -16,7 +16,7 @@ import { SuggestedQuestionsTab } from "./tabs/SuggestedQuestionsTab";
 interface Props {
   message: AssistantMessageInterface;
   isLatestAssistant: boolean;
-  onSelectFollowUp: (q: string) => void;
+  onSelectFollowUp?: (q: string) => void;
   /**
    * Map of resolved source entities keyed by `chunk.nodeId`. When provided, the
    * Contents and Citations tabs use these to render real entity names. The

package/src/features/assistant-message/components/parts/__tests__/MessageSourcesPanel.spec.tsx

@@ -1,5 +1,5 @@
 import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { ModuleRegistry } from "../../../../../core/registry/ModuleRegistry";
 import { MessageSourcesPanel } from "../MessageSourcesPanel";
 
@@ -62,6 +62,22 @@ describe("MessageSourcesPanel", () => {
     expect(screen.getByText("Why?")).toBeInTheDocument();
   });
 
+  it("suggested questions call onSelectFollowUp when it is given", () => {
+    const onSelectFollowUp = vi.fn();
+    const msg = { ...baseMessage, suggestedQuestions: ["Why?"] };
+    render(<MessageSourcesPanel message={msg} isLatestAssistant={true} onSelectFollowUp={onSelectFollowUp} />);
+    const button = screen.getByRole("button", { name: "Why?" });
+    expect(button).toBeEnabled();
+    fireEvent.click(button);
+    expect(onSelectFollowUp).toHaveBeenCalledWith("Why?");
+  });
+
+  it("suggested questions render disabled without onSelectFollowUp (read-only)", () => {
+    const msg = { ...baseMessage, suggestedQuestions: ["Why?"] };
+    render(<MessageSourcesPanel message={msg} isLatestAssistant={true} />);
+    expect(screen.getByRole("button", { name: "Why?" })).toBeDisabled();
+  });
+
   it("does not show Suggested questions tab on non-latest message", () => {
     const msg = { ...baseMessage, suggestedQuestions: ["Why?"] };
     render(<MessageSourcesPanel message={msg} isLatestAssistant={false} onSelectFollowUp={vi.fn()} />);

package/src/features/assistant-message/components/parts/__tests__/SuggestedQuestionsTab.spec.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SuggestedQuestionsTab } from "../tabs/SuggestedQuestionsTab";
+
+describe("SuggestedQuestionsTab", () => {
+  it("renders enabled buttons that call onSelect with the question", async () => {
+    const onSelect = vi.fn();
+    render(<SuggestedQuestionsTab questions={["Why?", "How?"]} onSelect={onSelect} />);
+    const button = screen.getByRole("button", { name: "Why?" });
+    expect(button).toBeEnabled();
+    await userEvent.setup().click(button);
+    expect(onSelect).toHaveBeenCalledWith("Why?");
+  });
+
+  it("renders the buttons disabled when no onSelect is given (read-only)", () => {
+    render(<SuggestedQuestionsTab questions={["Why?", "How?"]} />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons).toHaveLength(2);
+    for (const button of buttons) expect(button).toBeDisabled();
+  });
+});

package/src/features/assistant-message/components/parts/tabs/SuggestedQuestionsTab.tsx

@@ -2,7 +2,8 @@
 
 interface Props {
   questions: string[];
-  onSelect: (question: string) => void;
+  /** Omitted, the questions render disabled (read-only thread, no sending). */
+  onSelect?: (question: string) => void;
 }
 
 export function SuggestedQuestionsTab({ questions, onSelect }: Props) {
@@ -13,8 +14,9 @@ export function SuggestedQuestionsTab({ questions, onSelect }: Props) {
         <button
           key={q}
           type="button"
-          onClick={() => onSelect(q)}
-          className="border-border bg-muted/30 hover:bg-muted rounded-md border px-3 py-1.5 text-start text-sm"
+          disabled={!onSelect}
+          onClick={() => onSelect?.(q)}
+          className="border-border bg-muted/30 hover:bg-muted disabled:hover:bg-muted/30 rounded-md border px-3 py-1.5 text-start text-sm disabled:cursor-not-allowed disabled:opacity-50"
         >
           {q}
         </button>

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

@@ -5,6 +5,7 @@ import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { Button } from "../../../../shadcnui";
 import { SectionHeader } from "../../../../components/typography";
+import { EmailBlastDeliveryService } from "../../../email-blast/data/EmailBlastDeliveryService";
 import { EmailAutomationEnrollmentService } from "../../data/EmailAutomationEnrollmentService";
 
 type UnsubscribeScope = "automation" | "all";
@@ -12,11 +13,16 @@ type UnsubscribeScope = "automation" | "all";
 interface Props {
   token: string;
   scope: UnsubscribeScope;
+  /**
+   * Which email the link came from. A blast link always stops every marketing
+   * email (the shared opt-out), so it lands straight on the "stopped all" state.
+   */
+  source?: "automation" | "blast";
 }
 
 type UnsubscribeState = "loading" | "success" | "error";
 
-export function EmailUnsubscribe({ token, scope }: Props) {
+export function EmailUnsubscribe({ token, scope, source = "automation" }: Props) {
   const t = useTranslations();
   const [state, setState] = useState<UnsubscribeState>("loading");
   const [stoppedScope, setStoppedScope] = useState<UnsubscribeScope>(scope);
@@ -26,6 +32,12 @@ export function EmailUnsubscribe({ token, scope }: Props) {
   useEffect(() => {
     async function unsubscribe() {
       try {
+        if (source === "blast") {
+          await EmailBlastDeliveryService.unsubscribe({ token });
+          setStoppedScope("all");
+          setState("success");
+          return;
+        }
         const enrollment = await EmailAutomationEnrollmentService.unsubscribe({ token, scope });
         setAutomationName(enrollment?.automation?.name ?? "");
         setStoppedScope(scope);
@@ -36,7 +48,7 @@ export function EmailUnsubscribe({ token, scope }: Props) {
     }
 
     unsubscribe();
-  }, [token, scope]);
+  }, [token, scope, source]);
 
   const stopAll = async () => {
     setIsStoppingAll(true);

package/src/features/email-blast/EmailBlastAudienceModule.ts

@@ -0,0 +1,12 @@
+import { UsersIcon } from "lucide-react";
+import { ModuleFactory } from "../../permissions";
+import { EmailBlastAudience } from "./data/EmailBlastAudience";
+
+export const EmailBlastAudienceModule = (factory: ModuleFactory) =>
+  factory({
+    moduleId: "e2b6d8f0-4c19-4a7e-8d35-6f9a0c2b7e14",
+    pageUrl: undefined,
+    name: "email-blast-audiences",
+    model: EmailBlastAudience,
+    icon: UsersIcon,
+  });

package/src/features/email-blast/EmailBlastDeliveryModule.ts

@@ -0,0 +1,12 @@
+import { MailIcon } from "lucide-react";
+import { ModuleFactory } from "../../permissions";
+import { EmailBlastDelivery } from "./data/EmailBlastDelivery";
+
+export const EmailBlastDeliveryModule = (factory: ModuleFactory) =>
+  factory({
+    moduleId: "c47e9b1d-2a5f-4c83-9e60-1b7d4a3f8e25",
+    pageUrl: undefined,
+    name: "email-blast-deliveries",
+    model: EmailBlastDelivery,
+    icon: MailIcon,
+  });

package/src/features/email-blast/EmailBlastModule.ts

@@ -0,0 +1,28 @@
+import { SendIcon } from "lucide-react";
+import { createJsonApiInclusion } from "../../core";
+import { ModuleFactory } from "../../permissions";
+import { EmailBlast } from "./data/EmailBlast";
+
+export const EmailBlastModule = (factory: ModuleFactory) =>
+  factory({
+    moduleId: "8a1f4c2e-6b3d-4e9a-b7c5-2d0e9f1a6b48",
+    pageUrl: "/administration/email-blasts",
+    name: "email-blasts",
+    model: EmailBlast,
+    icon: SendIcon,
+    inclusions: {
+      lists: {
+        fields: [
+          createJsonApiInclusion("email-blasts", [
+            "subject",
+            "status",
+            "sentAt",
+            "recipientCount",
+            "sentCount",
+            "failedCount",
+            "unsubscribedCount",
+          ]),
+        ],
+      },
+    },
+  });

package/src/features/email-blast/components/containers/EmailBlastContainer.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { LoaderCircleIcon, MailCheckIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useEffect, useState } from "react";
+import { CommonDeleter, RoundPageContainer } from "../../../../components";
+import { errorToast } from "../../../../components/errors/errorToast";
+import { DetailField } from "../../../../components/typography";
+import { SharedProvider } from "../../../../contexts/SharedContext";
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { useI18nLocale } from "../../../../i18n";
+import { BreadcrumbItemData } from "../../../../interfaces";
+import { Badge, Button } from "../../../../shadcnui";
+import { showToast } from "../../../../utils/toast";
+import { EmailBlastInterface, EmailBlastStatus } from "../../data/EmailBlastInterface";
+import { EmailBlastService } from "../../data/EmailBlastService";
+import { EmailBlastEditor } from "../forms/EmailBlastEditor";
+import { EmailBlastSendDialog } from "../forms/EmailBlastSendDialog";
+
+const STATUS_VARIANTS: Record<EmailBlastStatus, "softGray" | "softAmber" | "softGreen"> = {
+  draft: "softGray",
+  sending: "softAmber",
+  sent: "softGreen",
+};
+
+export type EmailBlastContainerProps = {
+  blastId: string;
+};
+
+function EmailBlastSendTestButton({ blast }: { blast: EmailBlastInterface }) {
+  const t = useTranslations();
+  const [isSending, setIsSending] = useState<boolean>(false);
+
+  const handleClick = async () => {
+    setIsSending(true);
+    try {
+      await EmailBlastService.sendTest({ id: blast.id });
+      showToast(t("emailBlasts.test.sent"));
+    } catch (error) {
+      errorToast({ title: t("common.errors.error"), error });
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <Button size="sm" variant="outline" type="button" onClick={handleClick} disabled={isSending}>
+      {isSending ? <LoaderCircleIcon className="animate-spin-slow" /> : <MailCheckIcon />}
+      {t("emailBlasts.test.button")}
+    </Button>
+  );
+}
+
+export function EmailBlastContainer({ blastId }: EmailBlastContainerProps) {
+  const t = useTranslations();
+  const locale = useI18nLocale();
+  const generateUrl = usePageUrlGenerator();
+  const [blast, setBlast] = useState<EmailBlastInterface | undefined>(undefined);
+
+  const reload = useCallback(async () => {
+    setBlast(await EmailBlastService.findOne({ id: blastId }));
+  }, [blastId]);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  if (!blast) return null;
+
+  const listUrl = generateUrl({ page: Modules.EmailBlast });
+
+  const breadcrumbs: BreadcrumbItemData[] = [
+    { name: t("emailBlasts.admin.title"), href: listUrl },
+    { name: blast.subject },
+  ];
+
+  // Only a draft can be edited, test-sent, sent or deleted (the API refuses the rest).
+  const functions: ReactNode[] =
+    blast.status === "draft"
+      ? [
+          <EmailBlastEditor key="emailBlastEditor" blast={blast} onSuccess={reload} />,
+          <EmailBlastSendTestButton key="emailBlastSendTest" blast={blast} />,
+          <EmailBlastSendDialog key="emailBlastSendDialog" blast={blast} onSuccess={reload} />,
+          <CommonDeleter
+            key="emailBlastDeleter"
+            type="email-blasts"
+            deleteFunction={() => EmailBlastService.delete({ id: blast.id })}
+            redirectTo={listUrl}
+          />,
+        ]
+      : [];
+
+  // The page chrome (title + header functions) is published here rather than by
+  // AdministrationProvider: SharedProvider replaces its value for the subtree,
+  // so this one carries the administration title type plus the blast subject.
+  return (
+    <SharedProvider
+      value={{
+        breadcrumbs,
+        title: {
+          type: t("emailBlasts.admin.title"),
+          element: blast.subject,
+          functions,
+        },
+      }}
+    >
+      <RoundPageContainer module={Modules.EmailBlast} id={blast.id} fullWidth forceHeader>
+        <div className="flex w-full flex-col gap-y-6 p-4">
+          <div>
+            <Badge variant={STATUS_VARIANTS[blast.status]}>{t(`emailBlasts.list.status.${blast.status}`)}</Badge>
+          </div>
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+            <DetailField
+              label={t("emailBlasts.detail.recipients")}
+              value={<span className="tabular-nums">{blast.recipientCount ?? "—"}</span>}
+            />
+            <DetailField
+              label={t("emailBlasts.detail.sentTo")}
+              value={<span className="tabular-nums">{blast.sentCount}</span>}
+            />
+            <DetailField
+              label={t("emailBlasts.detail.failed")}
+              value={<span className="tabular-nums">{blast.failedCount}</span>}
+            />
+            <DetailField
+              label={t("emailBlasts.detail.unsubscribed")}
+              value={<span className="tabular-nums">{blast.unsubscribedCount}</span>}
+            />
+          </div>
+          <DetailField
+            label={t("emailBlasts.detail.sentAt")}
+            value={blast.sentAt ? blast.sentAt.toLocaleString(locale) : "—"}
+          />
+          <DetailField label={t("emailBlasts.list.columns.subject")} value={blast.subject} />
+          <DetailField label={t("emailBlasts.detail.replyTo")} value={blast.replyTo ?? "—"} />
+          <DetailField
+            label={t("emailBlasts.detail.body")}
+            value={<div className="whitespace-pre-wrap leading-relaxed">{blast.body}</div>}
+          />
+        </div>
+      </RoundPageContainer>
+    </SharedProvider>
+  );
+}

package/src/features/email-blast/components/containers/EmailBlastsListContainer.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { RoundPageContainer } from "../../../../components";
+import { SharedProvider } from "../../../../contexts/SharedContext";
+import { Modules } from "../../../../core";
+import { BreadcrumbItemData } from "../../../../interfaces";
+import { EmailBlastsList } from "../lists/EmailBlastsList";
+
+/**
+ * Page container for the administrative email-blast list.
+ *
+ * Client component by necessity: `module={Modules.EmailBlast}` is a
+ * registry entry carrying an icon component and methods, which a Server
+ * Component cannot pass across the boundary. Routes mount this container
+ * instead — the same shape as every other list page.
+ *
+ * No `forceHeader`: ContentListTable draws its own header row with the title
+ * and the create action, exactly as the company and user list pages do.
+ *
+ * Publishes its own breadcrumb, as CompanyProvider does for the companies list:
+ * the list root comes first and has no href because it is the current page.
+ */
+export function EmailBlastsListContainer() {
+  const t = useTranslations();
+
+  const breadcrumbs: BreadcrumbItemData[] = [{ name: t("emailBlasts.admin.title") }];
+
+  return (
+    <SharedProvider value={{ breadcrumbs, title: { type: t("emailBlasts.admin.title") } }}>
+      <RoundPageContainer module={Modules.EmailBlast} fullWidth>
+        <EmailBlastsList fullWidth />
+      </RoundPageContainer>
+    </SharedProvider>
+  );
+}

package/src/features/email-blast/components/forms/EmailBlastEditor.tsx

@@ -0,0 +1,132 @@
+"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 { useI18nRouter } from "../../../../i18n";
+import { EmailBlastInput, EmailBlastInterface } from "../../data/EmailBlastInterface";
+import { EmailBlastService } from "../../data/EmailBlastService";
+
+/** The fixed variable set the blast renderer fills. */
+const TEMPLATE_VARIABLES = ["{{name}}", "{{email}}", "{{url}}", "{{unsubscribeAllUrl}}"];
+
+export type EmailBlastEditorProps = {
+  blast?: EmailBlastInterface;
+  propagateChanges?: (blast: EmailBlastInterface) => void;
+  onSuccess?: () => void | Promise<void>;
+  trigger?: ReactNode;
+  forceShow?: boolean;
+  onClose?: () => void;
+  dialogOpen?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
+};
+
+function EmailBlastEditorInternal({
+  blast,
+  propagateChanges,
+  onSuccess,
+  trigger,
+  forceShow,
+  onClose,
+  dialogOpen,
+  onDialogOpenChange,
+}: EmailBlastEditorProps) {
+  const t = useTranslations();
+  const router = useI18nRouter();
+  const isEdit = !!blast;
+
+  const formSchema = useMemo(
+    () =>
+      z.object({
+        id: z.uuidv4(),
+        subject: z.string().min(1, { message: t("emailBlasts.editor.fields.subject.error") }),
+        body: z.string().min(1, { message: t("emailBlasts.editor.fields.body.error") }),
+        replyTo: z.string().refine((value) => value === "" || z.email().safeParse(value).success, {
+          message: t("emailBlasts.editor.fields.replyTo.error"),
+        }),
+      }),
+    [t],
+  );
+
+  const getDefaultValues = useCallback(
+    () => ({
+      id: blast?.id ?? v4(),
+      subject: blast?.subject ?? "",
+      body: blast?.body ?? "",
+      replyTo: blast?.replyTo ?? "",
+    }),
+    [blast],
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("emailBlasts.editor.title")}
+      entityName={blast?.subject}
+      title={isEdit ? t("emailBlasts.editor.editTitle") : t("emailBlasts.editor.title")}
+      isEdit={isEdit}
+      module={Modules.EmailBlast}
+      size="lg"
+      propagateChanges={propagateChanges}
+      onSuccess={onSuccess}
+      onNavigate={(url) => router.push(url)}
+      onSubmit={async (values) => {
+        const payload: EmailBlastInput = {
+          id: values.id,
+          subject: values.subject,
+          body: values.body,
+          replyTo: values.replyTo || undefined,
+        };
+        return isEdit ? await EmailBlastService.update(payload) : await EmailBlastService.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="subject" name={t("emailBlasts.editor.fields.subject.label")} isRequired />
+        <FormInput form={form} id="replyTo" name={t("emailBlasts.editor.fields.replyTo.label")} />
+        {/* FormTextarea has no `rows` prop; min-h-72 is the height of ~14 rows. */}
+        <FormTextarea
+          form={form}
+          id="body"
+          name={t("emailBlasts.editor.fields.body.label")}
+          className="min-h-72"
+          isRequired
+          description={
+            <>
+              <span className="block">
+                {t("emailBlasts.editor.variablesHint")}{" "}
+                {TEMPLATE_VARIABLES.map((variable) => (
+                  <span key={variable} className="me-2 text-foreground">
+                    {variable}
+                  </span>
+                ))}
+              </span>
+              <span className="mt-1 block">{t("emailBlasts.editor.unsubscribeHint")}</span>
+            </>
+          }
+        />
+      </div>
+    </EditorSheet>
+  );
+}
+
+export function EmailBlastEditor(props: EmailBlastEditorProps) {
+  return <EmailBlastEditorInternal {...props} />;
+}
+
+export default EmailBlastEditor;

package/src/features/email-blast/components/forms/EmailBlastSendDialog.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { LoaderCircleIcon, SendIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import { errorToast } from "../../../../components/errors/errorToast";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../../../../shadcnui/ui/alert-dialog";
+import { Button } from "../../../../shadcnui/ui/button";
+import { EmailBlastInterface } from "../../data/EmailBlastInterface";
+import { EmailBlastService } from "../../data/EmailBlastService";
+
+export type EmailBlastSendDialogProps = {
+  blast: EmailBlastInterface;
+  onSuccess?: () => void | Promise<void>;
+};
+
+/**
+ * Header action on a draft blast: asks how many people it reaches now, then sends.
+ * Same AlertDialog shape as AccountDeletionAdminTrigger.
+ */
+export function EmailBlastSendDialog({ blast, onSuccess }: EmailBlastSendDialogProps) {
+  const t = useTranslations();
+  const [open, setOpen] = useState<boolean>(false);
+  const [count, setCount] = useState<number | undefined>(undefined);
+  const [isSending, setIsSending] = useState<boolean>(false);
+
+  // The count is read each time the dialog opens: consent and opt-outs change.
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setCount(undefined);
+    EmailBlastService.findAudience({ id: blast.id })
+      .then((audience) => {
+        if (!cancelled) setCount(audience.recipientCount);
+      })
+      .catch((error) => {
+        if (!cancelled) errorToast({ title: t("common.errors.error"), error });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, blast.id, t]);
+
+  const isLoading = count === undefined;
+  const canSend = !isLoading && count > 0 && !isSending;
+
+  const handleSend = async () => {
+    setIsSending(true);
+    try {
+      await EmailBlastService.send({ id: blast.id });
+      await onSuccess?.();
+      setOpen(false);
+    } catch (error) {
+      errorToast({ title: t("common.errors.error"), error });
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger render={<Button size="sm" variant="default" />}>
+        <SendIcon />
+        {t("emailBlasts.send.button")}
+      </AlertDialogTrigger>
+      <AlertDialogContent className="flex max-h-[70vh] max-w-3xl flex-col overflow-y-auto">
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t("emailBlasts.send.title")}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {isLoading ? (
+              <LoaderCircleIcon className="animate-spin-slow h-5 w-5" />
+            ) : count === 0 ? (
+              t("emailBlasts.send.nobody")
+            ) : (
+              t("emailBlasts.send.confirm", { count })
+            )}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <div className="flex justify-end">
+          <Button className="me-2" variant="outline" type="button" onClick={() => setOpen(false)} disabled={isSending}>
+            {t("emailBlasts.send.cancel")}
+          </Button>
+          <Button type="button" variant="default" onClick={handleSend} disabled={!canSend}>
+            {isSending ? (
+              <>
+                {t("emailBlasts.send.action")}
+                <LoaderCircleIcon className="animate-spin-slow h-5 w-5" />
+              </>
+            ) : (
+              t("emailBlasts.send.action")
+            )}
+          </Button>
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -0,0 +1,5 @@
+export * from "./containers/EmailBlastsListContainer";
+export * from "./containers/EmailBlastContainer";
+export * from "./lists/EmailBlastsList";
+export * from "./forms/EmailBlastEditor";
+export * from "./forms/EmailBlastSendDialog";