@rapidmx/crm-plugin 0.1.0

package/dist/apps/shared/components/automations/flowModel.d.ts

@@ -0,0 +1,67 @@
+/**
+ * The automation editor's graph edits and layout, as pure functions over an `AutomationGraph`: each returns a new graph and leaves
+ * the one it was given alone.
+ */
+import type { AutomationGraph, AutomationNode, AutomationReentry, NodeType } from "../../crmApi.js";
+/** The ports out of each step type, as the server has them. */
+export declare const PORTS: Readonly<Record<NodeType, readonly string[]>>;
+/** What each port is called on screen. */
+export declare const PORT_LABELS: Readonly<Record<string, string>>;
+/** The steps a member can add, grouped as the add menu shows them. */
+export declare const STEP_TYPES: {
+    group: string;
+    types: {
+        type: NodeType;
+        label: string;
+    }[];
+}[];
+/** What a step type is called. */
+export declare function stepLabel(type: NodeType): string;
+/** A new step id, unlike those in `graph`. */
+export declare function newNodeId(graph: AutomationGraph, type: NodeType): string;
+/** The settings a new step of `type` starts with. */
+export declare function defaultConfig(type: NodeType): Record<string, unknown>;
+/** The node `port` of `nodeId` leads to, if any. */
+export declare function target(graph: AutomationGraph, nodeId: string, port: string): string | undefined;
+/**
+ * `graph` with a new step of `type` out of `fromId` by `port`. Whatever that port led to follows the new step (by its first port);
+ * a step with no way out (an end) takes nothing after it. Returns the graph and the new step's id.
+ */
+export declare function insertStep(graph: AutomationGraph, fromId: string, port: string, type: NodeType): {
+    graph: AutomationGraph;
+    id: string;
+};
+/**
+ * `graph` without step `id`: what led to it now leads where its first way out led (a branch's other ways, and anything only they
+ * reached, go with it). The trigger can't be removed.
+ */
+export declare function removeStep(graph: AutomationGraph, id: string): AutomationGraph;
+/** `graph` with step `id`'s settings changed by `patch`. */
+export declare function configure(graph: AutomationGraph, id: string, patch: Record<string, unknown>): AutomationGraph;
+/** `graph` without the steps the trigger can't reach, and their connections. */
+export declare function prune(graph: AutomationGraph): AutomationGraph;
+/** One step as the flow draws it: the step, and what each of its ways out leads to - a step, a jump to one drawn already, or nothing. */
+export interface FlowStep {
+    node: AutomationNode;
+    outs: {
+        port: string;
+        next?: FlowStep;
+        goto?: string;
+    }[];
+}
+/** The flow from the trigger, as a tree: a step reached a second time (a loop, or branches joining) is drawn as a jump to it. */
+export declare function layout(graph: AutomationGraph): FlowStep | undefined;
+/** `graph` with `port` of `fromId` leading to the existing step `toId` (a jump back, or joining another branch). */
+export declare function connect(graph: AutomationGraph, fromId: string, port: string, toId: string): AutomationGraph;
+/** The `send_email` steps before `nodeId`: what a wait can wait on. */
+export declare function earlierSends(graph: AutomationGraph, nodeId: string): AutomationNode[];
+/** A ready-made automation to start from. */
+export interface Recipe {
+    name: string;
+    description: string;
+    graph: AutomationGraph;
+    /** Whether contacts may go through again (a yearly date needs it). */
+    reentry?: AutomationReentry;
+}
+/** The automations the "New automation" dialog offers to start from. Their emails and lists are left for the member to choose. */
+export declare const RECIPES: Recipe[];

package/dist/apps/shared/components/automations/flowModel.js

@@ -0,0 +1,292 @@
+/** The ports out of each step type, as the server has them. */
+export const PORTS = {
+    trigger: ["next"],
+    delay: ["next"],
+    wait: ["matched", "timeout"],
+    condition: ["yes", "no"],
+    split: ["a", "b"],
+    send_email: ["next"],
+    set_field: ["next"],
+    add_tag: ["next"],
+    remove_tag: ["next"],
+    subscribe: ["next"],
+    unsubscribe: ["next"],
+    create_task: ["next"],
+    notify: ["next"],
+    enroll: ["next"],
+    webhook: ["next"],
+    exit: [],
+};
+/** What each port is called on screen. */
+export const PORT_LABELS = {
+    next: "",
+    yes: "Yes",
+    no: "No",
+    a: "Path A",
+    b: "Path B",
+    matched: "It happened",
+    timeout: "It didn't",
+};
+/** The steps a member can add, grouped as the add menu shows them. */
+export const STEP_TYPES = [
+    {
+        group: "Timing",
+        types: [
+            { type: "delay", label: "Wait a while" },
+            { type: "wait", label: "Wait for an email to be opened, clicked or replied to" },
+        ],
+    },
+    {
+        group: "Branches",
+        types: [
+            { type: "condition", label: "If / else" },
+            { type: "split", label: "Random split" },
+        ],
+    },
+    {
+        group: "Actions",
+        types: [
+            { type: "send_email", label: "Send an email" },
+            { type: "set_field", label: "Set a field" },
+            { type: "add_tag", label: "Add a tag" },
+            { type: "remove_tag", label: "Remove a tag" },
+            { type: "subscribe", label: "Subscribe to a list" },
+            { type: "unsubscribe", label: "Unsubscribe from a list" },
+            { type: "create_task", label: "Create a task" },
+            { type: "notify", label: "Notify a member" },
+            { type: "enroll", label: "Put into another automation" },
+            { type: "webhook", label: "Post to a webhook" },
+            { type: "exit", label: "End" },
+        ],
+    },
+];
+/** What a step type is called. */
+export function stepLabel(type) {
+    return type === "trigger" ? "Trigger" : STEP_TYPES.flatMap((group) => group.types).find((entry) => entry.type === type).label;
+}
+/** A new step id, unlike those in `graph`. */
+export function newNodeId(graph, type) {
+    for (let index = 1;; index++) {
+        const id = `${type.replace(/_/g, "-")}-${index}`;
+        if (!graph.nodes.some((node) => node.id === id)) {
+            return id;
+        }
+    }
+}
+/** The settings a new step of `type` starts with. */
+export function defaultConfig(type) {
+    switch (type) {
+        case "delay":
+            return { amount: 1, unit: "days" };
+        case "wait":
+            return { event: "email.opened", timeoutAmount: 3, timeoutUnit: "days" };
+        case "split":
+            return { percent: 50 };
+        case "set_field":
+            return { field: "lifecycleStage", value: "lead" };
+        case "trigger":
+            return { event: "list.subscribed" };
+        default:
+            return {};
+    }
+}
+/** The node `port` of `nodeId` leads to, if any. */
+export function target(graph, nodeId, port) {
+    return graph.edges.find((edge) => edge.from === nodeId && edge.port === port)?.to;
+}
+/**
+ * `graph` with a new step of `type` out of `fromId` by `port`. Whatever that port led to follows the new step (by its first port);
+ * a step with no way out (an end) takes nothing after it. Returns the graph and the new step's id.
+ */
+export function insertStep(graph, fromId, port, type) {
+    const id = newNodeId(graph, type);
+    const node = { id, type, config: defaultConfig(type) };
+    const after = target(graph, fromId, port);
+    const edges = graph.edges.filter((edge) => !(edge.from === fromId && edge.port === port));
+    edges.push({ from: fromId, to: id, port });
+    if (after && PORTS[type].length > 0) {
+        edges.push({ from: id, to: after, port: PORTS[type][0] });
+    }
+    return { graph: prune({ nodes: [...graph.nodes, node], edges }), id };
+}
+/**
+ * `graph` without step `id`: what led to it now leads where its first way out led (a branch's other ways, and anything only they
+ * reached, go with it). The trigger can't be removed.
+ */
+export function removeStep(graph, id) {
+    const node = graph.nodes.find((entry) => entry.id === id);
+    if (!node || node.type === "trigger") {
+        return graph;
+    }
+    const after = PORTS[node.type].length > 0 ? target(graph, id, PORTS[node.type][0]) : undefined;
+    const edges = [];
+    for (const edge of graph.edges) {
+        if (edge.from === id) {
+            continue;
+        }
+        if (edge.to === id) {
+            if (after && after !== edge.from) {
+                edges.push({ ...edge, to: after });
+            }
+            continue;
+        }
+        edges.push(edge);
+    }
+    return prune({ nodes: graph.nodes.filter((entry) => entry.id !== id), edges });
+}
+/** `graph` with step `id`'s settings changed by `patch`. */
+export function configure(graph, id, patch) {
+    return { ...graph, nodes: graph.nodes.map((node) => (node.id === id ? { ...node, config: { ...node.config, ...patch } } : node)) };
+}
+/** `graph` without the steps the trigger can't reach, and their connections. */
+export function prune(graph) {
+    const trigger = graph.nodes.find((node) => node.type === "trigger");
+    if (!trigger) {
+        return graph;
+    }
+    const reached = new Set([trigger.id]);
+    const queue = [trigger.id];
+    while (queue.length > 0) {
+        const current = queue.shift();
+        for (const edge of graph.edges) {
+            if (edge.from === current && !reached.has(edge.to)) {
+                reached.add(edge.to);
+                queue.push(edge.to);
+            }
+        }
+    }
+    return {
+        nodes: graph.nodes.filter((node) => reached.has(node.id)),
+        edges: graph.edges.filter((edge) => reached.has(edge.from) && reached.has(edge.to)),
+    };
+}
+/** The flow from the trigger, as a tree: a step reached a second time (a loop, or branches joining) is drawn as a jump to it. */
+export function layout(graph) {
+    const trigger = graph.nodes.find((node) => node.type === "trigger");
+    if (!trigger) {
+        return undefined;
+    }
+    const drawn = new Set();
+    const draw = (node) => {
+        drawn.add(node.id);
+        return {
+            node,
+            outs: PORTS[node.type].map((port) => {
+                const to = target(graph, node.id, port);
+                if (!to) {
+                    return { port };
+                }
+                if (drawn.has(to)) {
+                    return { port, goto: to };
+                }
+                return { port, next: draw(graph.nodes.find((entry) => entry.id === to)) };
+            }),
+        };
+    };
+    return draw(trigger);
+}
+/** `graph` with `port` of `fromId` leading to the existing step `toId` (a jump back, or joining another branch). */
+export function connect(graph, fromId, port, toId) {
+    return prune({ nodes: graph.nodes, edges: [...graph.edges.filter((edge) => !(edge.from === fromId && edge.port === port)), { from: fromId, to: toId, port }] });
+}
+/** The `send_email` steps before `nodeId`: what a wait can wait on. */
+export function earlierSends(graph, nodeId) {
+    const found = new Set();
+    const queue = [nodeId];
+    while (queue.length > 0) {
+        const current = queue.shift();
+        for (const edge of graph.edges) {
+            if (edge.to === current && !found.has(edge.from)) {
+                found.add(edge.from);
+                queue.push(edge.from);
+            }
+        }
+    }
+    return graph.nodes.filter((node) => found.has(node.id) && node.type === "send_email");
+}
+/** The automations the "New automation" dialog offers to start from. Their emails and lists are left for the member to choose. */
+export const RECIPES = [
+    { name: "Start from scratch", description: "Just a trigger.", graph: { nodes: [{ id: "trigger", type: "trigger", config: { event: "list.subscribed" } }], edges: [] } },
+    {
+        name: "Welcome, and follow up if there's no reply",
+        description: "Sends a welcome to new subscribers; three days on, those who haven't replied get a follow-up.",
+        graph: {
+            nodes: [
+                { id: "trigger", type: "trigger", config: { event: "list.subscribed" } },
+                { id: "welcome", type: "send_email", config: {} },
+                { id: "wait-1", type: "wait", config: { event: "email.replied", sendNodeId: "welcome", timeoutAmount: 3, timeoutUnit: "days" } },
+                { id: "follow-up", type: "send_email", config: {} },
+            ],
+            edges: [
+                { from: "trigger", to: "welcome", port: "next" },
+                { from: "welcome", to: "wait-1", port: "next" },
+                { from: "wait-1", to: "follow-up", port: "timeout" },
+            ],
+        },
+    },
+    {
+        name: "Birthday greeting",
+        description: "An email on each contact's birthday, every year. Choose the date property that holds it.",
+        reentry: "after_exit",
+        graph: {
+            nodes: [
+                { id: "trigger", type: "trigger", config: { event: "date.reached", repeat: "yearly", offsetDays: 0, hour: 9 } },
+                { id: "greeting", type: "send_email", config: {} },
+            ],
+            edges: [{ from: "trigger", to: "greeting", port: "next" }],
+        },
+    },
+    {
+        name: "Welcome series",
+        description: "Three emails over a week to new subscribers.",
+        graph: {
+            nodes: [
+                { id: "trigger", type: "trigger", config: { event: "list.subscribed" } },
+                { id: "email-1", type: "send_email", config: {} },
+                { id: "delay-1", type: "delay", config: { amount: 2, unit: "days" } },
+                { id: "email-2", type: "send_email", config: {} },
+                { id: "delay-2", type: "delay", config: { amount: 5, unit: "days" } },
+                { id: "email-3", type: "send_email", config: {} },
+            ],
+            edges: [
+                { from: "trigger", to: "email-1", port: "next" },
+                { from: "email-1", to: "delay-1", port: "next" },
+                { from: "delay-1", to: "email-2", port: "next" },
+                { from: "email-2", to: "delay-2", port: "next" },
+                { from: "delay-2", to: "email-3", port: "next" },
+            ],
+        },
+    },
+    {
+        name: "Follow up on a form",
+        description: "When someone fills in a form, a member gets a task to call them and an email goes out.",
+        graph: {
+            nodes: [
+                { id: "trigger", type: "trigger", config: { event: "form.submitted" } },
+                { id: "task", type: "create_task", config: { title: "Call the new lead", dueInDays: 1 } },
+                { id: "email", type: "send_email", config: {} },
+            ],
+            edges: [
+                { from: "trigger", to: "task", port: "next" },
+                { from: "task", to: "email", port: "next" },
+            ],
+        },
+    },
+    {
+        name: "Win back",
+        description: "When a contact leaves a segment of engaged contacts, send them an email and tag them if they don't open it.",
+        graph: {
+            nodes: [
+                { id: "trigger", type: "trigger", config: { event: "segment.left" } },
+                { id: "email", type: "send_email", config: {} },
+                { id: "wait-1", type: "wait", config: { event: "email.opened", sendNodeId: "email", timeoutAmount: 7, timeoutUnit: "days" } },
+                { id: "tag", type: "add_tag", config: { tag: "lapsed" } },
+            ],
+            edges: [
+                { from: "trigger", to: "email", port: "next" },
+                { from: "email", to: "wait-1", port: "next" },
+                { from: "wait-1", to: "tag", port: "timeout" },
+            ],
+        },
+    },
+];

package/dist/apps/shared/components/campaigns/CampaignEditor.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Campaign } from "../../crmApi.js";
+/**
+ * A draft campaign: who it's from, who it goes to (with how many that reaches now), which email, tracking, an optional A/B test, and
+ * what still stands in the way of sending. Saving keeps it a draft; "Send" saves and schedules it, now or at a chosen time. A
+ * scheduled campaign shows when it goes, and can go back to being a draft.
+ */
+export default function CampaignEditor({ campaign, onChanged }: {
+    campaign: Campaign;
+    onChanged: (campaign: Campaign) => void;
+}): React.JSX.Element;

package/dist/apps/shared/components/campaigns/CampaignEditor.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import { campaignAudience, campaignChecklist, changeCampaign, errorMessage, getTemplate, listLists, listSegments, listSenders, scheduleCampaign, searchTemplates, updateCampaign, } from "../../crmApi.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+import PreviewModal from "../designer/PreviewModal.js";
+import TestSendModal from "../designer/TestSendModal.js";
+import { StatusBadge, when } from "./campaignUi.js";
+function draftOf(campaign) {
+    return {
+        name: campaign.name,
+        senderUid: campaign.senderUid ?? "",
+        templateUid: campaign.templateUid ?? "",
+        listUids: campaign.listUids,
+        excludeListUids: campaign.excludeListUids,
+        segmentUids: campaign.segmentUids ?? [],
+        excludeSegmentUids: campaign.excludeSegmentUids ?? [],
+        trackOpens: campaign.trackOpens,
+        trackClicks: campaign.trackClicks,
+        abTest: campaign.abTest ?? null,
+    };
+}
+const VARIANT_IDS = ["A", "B", "C", "D"];
+const METRICS = [
+    { value: "open", label: "Opens" },
+    { value: "click", label: "Clicks" },
+    { value: "reply", label: "Replies" },
+];
+function Section({ title, children }) {
+    return (_jsxs("section", { className: "border border-border rounded-sm p-4 mb-4", children: [_jsx("h2", { className: "text-sm font-semibold mb-3", children: title }), children] }));
+}
+/** Checkboxes for a set of lists or segments. */
+function ListPicker({ label, lists, chosen, onChange }) {
+    return (_jsxs("fieldset", { className: "mb-3", children: [_jsx("legend", { className: "text-xs font-semibold text-text-muted mb-1", children: label }), lists.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "The workspace has no lists yet." })) : (_jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: lists.map((list) => (_jsxs("label", { className: "flex items-center gap-1.5 text-sm", children: [_jsx("input", { type: "checkbox", checked: chosen.includes(list.uid), onChange: (event) => onChange(event.target.checked ? [...chosen, list.uid] : chosen.filter((uid) => uid !== list.uid)) }), list.name] }, list.uid))) }))] }));
+}
+/**
+ * A draft campaign: who it's from, who it goes to (with how many that reaches now), which email, tracking, an optional A/B test, and
+ * what still stands in the way of sending. Saving keeps it a draft; "Send" saves and schedules it, now or at a chosen time. A
+ * scheduled campaign shows when it goes, and can go back to being a draft.
+ */
+export default function CampaignEditor({ campaign, onChanged }) {
+    const { workspace, canWrite, href } = useCrm();
+    const [draft, setDraft] = useState(() => draftOf(campaign));
+    const [dirty, setDirty] = useState(false);
+    const [lists, setLists] = useState([]);
+    const [segments, setSegments] = useState([]);
+    const [senders, setSenders] = useState([]);
+    const [templates, setTemplates] = useState([]);
+    const [audience, setAudience] = useState(null);
+    const [problems, setProblems] = useState(null);
+    const [sendAt, setSendAt] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [preview, setPreview] = useState(null);
+    const [testing, setTesting] = useState(false);
+    const editable = canWrite && campaign.status === "draft";
+    useEffect(() => {
+        listLists(workspace.uid).then(setLists, () => setLists([]));
+        listSegments(workspace.uid).then(setSegments, () => setSegments([]));
+        listSenders(workspace.uid).then(setSenders, () => setSenders([]));
+        searchTemplates(workspace.uid, 0, 200).then((result) => setTemplates(result.items), () => setTemplates([]));
+    }, [workspace.uid]);
+    useEffect(() => {
+        campaignChecklist(workspace.uid, campaign.uid).then(setProblems, () => setProblems(null));
+    }, [campaign.uid, campaign.version]);
+    useEffect(() => {
+        if (draft.listUids.length === 0) {
+            setAudience({ count: 0, capped: false });
+            return;
+        }
+        let current = true;
+        campaignAudience(workspace.uid, {
+            listUids: draft.listUids,
+            excludeListUids: draft.excludeListUids,
+            segmentUids: draft.segmentUids,
+            excludeSegmentUids: draft.excludeSegmentUids,
+        }).then((result) => current && setAudience(result), () => current && setAudience(null));
+        return () => {
+            current = false;
+        };
+    }, [draft.listUids.join(","), draft.excludeListUids.join(","), draft.segmentUids.join(","), draft.excludeSegmentUids.join(",")]);
+    function change(patch) {
+        setDraft({ ...draft, ...patch });
+        setDirty(true);
+    }
+    function changeTest(patch) {
+        change({ abTest: { ...draft.abTest, ...patch } });
+    }
+    /** Saves the draft if it changed. Returns the campaign as saved, or `undefined` after an error. */
+    async function save() {
+        if (!dirty) {
+            return campaign;
+        }
+        try {
+            const saved = await updateCampaign(workspace.uid, campaign.uid, {
+                name: draft.name,
+                senderUid: draft.senderUid || null,
+                templateUid: draft.templateUid || null,
+                listUids: draft.listUids,
+                excludeListUids: draft.excludeListUids,
+                segmentUids: draft.segmentUids,
+                excludeSegmentUids: draft.excludeSegmentUids,
+                trackOpens: draft.trackOpens,
+                trackClicks: draft.trackClicks,
+                abTest: draft.abTest,
+                version: campaign.version,
+            });
+            setDirty(false);
+            onChanged(saved);
+            return saved;
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not save the campaign."));
+            return undefined;
+        }
+    }
+    async function run(action) {
+        setBusy(true);
+        setError(null);
+        await action();
+        setBusy(false);
+    }
+    const send = () => run(async () => {
+        const saved = await save();
+        if (!saved) {
+            return;
+        }
+        if (!window.confirm(sendAt ? `Send "${saved.name}" on ${new Date(sendAt).toLocaleString()}?` : `Send "${saved.name}" now?`)) {
+            return;
+        }
+        try {
+            onChanged(await scheduleCampaign(workspace.uid, saved.uid, sendAt ? new Date(sendAt).toISOString() : undefined));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not schedule the campaign."));
+        }
+    });
+    const unschedule = () => run(async () => {
+        try {
+            onChanged(await changeCampaign(workspace.uid, campaign.uid, "unschedule"));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not take the campaign back."));
+        }
+    });
+    async function openPreview(templateUid) {
+        try {
+            setPreview(await getTemplate(workspace.uid, templateUid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the template."));
+        }
+    }
+    const templateSelect = (value, onChange, label, empty) => (_jsxs("select", { "aria-label": label, className: INPUT_CLASS, value: value, disabled: !editable, onChange: (event) => onChange(event.target.value), children: [_jsx("option", { value: "", children: empty }), templates.map((template) => (_jsx("option", { value: template.uid, children: template.name }, template.uid)))] }));
+    return (_jsxs("div", { className: "max-w-4xl", children: [_jsx("a", { href: href("/crm/campaigns"), className: "text-sm text-primary-dark hover:underline", children: "\u2190 Campaigns" }), _jsxs("div", { className: "flex flex-wrap items-center gap-3 mt-2 mb-4", children: [_jsx("input", { "aria-label": "Campaign name", className: `${INPUT_CLASS} !w-80 text-lg font-semibold`, value: draft.name, readOnly: !editable, onChange: (event) => change({ name: event.target.value }) }), _jsx(StatusBadge, { status: campaign.status })] }), error && _jsx(Alert, { children: error }), campaign.status === "scheduled" && (_jsxs("div", { className: "flex items-center gap-3 mb-4 rounded-sm bg-primary-lightest p-3 text-sm", children: [_jsxs("span", { children: ["Goes out ", when(campaign.scheduledAt), "."] }), canWrite && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1", disabled: busy, onClick: () => void unschedule(), children: "Back to draft" }))] })), _jsxs("fieldset", { disabled: !editable, children: [_jsx(Section, { title: "From", children: _jsxs("select", { "aria-label": "Sender", className: INPUT_CLASS, value: draft.senderUid, onChange: (event) => change({ senderUid: event.target.value }), children: [_jsx("option", { value: "", children: "Choose who it's from\u2026" }), senders.map((sender) => (_jsx("option", { value: sender.uid, children: sender.fromName ? `${sender.fromName} <${sender.fromAddress}>` : sender.fromAddress }, sender.uid)))] }) }), _jsxs(Section, { title: "To", children: [_jsx(ListPicker, { label: "Send to the subscribers of", lists: lists, chosen: draft.listUids, onChange: (listUids) => change({ listUids }) }), _jsx(ListPicker, { label: "But not to the subscribers of", lists: lists.filter((list) => !draft.listUids.includes(list.uid)), chosen: draft.excludeListUids, onChange: (excludeListUids) => change({ excludeListUids }) }), segments.length > 0 && (_jsxs(_Fragment, { children: [_jsx(ListPicker, { label: "Only those in the segments", lists: segments.filter((segment) => !draft.excludeSegmentUids.includes(segment.uid)), chosen: draft.segmentUids, onChange: (segmentUids) => change({ segmentUids }) }), _jsx(ListPicker, { label: "Never those in the segments", lists: segments.filter((segment) => !draft.segmentUids.includes(segment.uid)), chosen: draft.excludeSegmentUids, onChange: (excludeSegmentUids) => change({ excludeSegmentUids }) })] })), _jsx("p", { role: "status", className: "text-sm text-text-muted", children: audience
+                                    ? `Reaches ${audience.capped ? "more than " : ""}${audience.count.toLocaleString()} ${audience.count === 1 ? "contact" : "contacts"} right now.`
+                                    : "Couldn't count who this reaches." })] }), _jsx(Section, { title: "Email", children: _jsxs("div", { className: "flex gap-2 items-center", children: [templateSelect(draft.templateUid, (templateUid) => change({ templateUid }), "Template", "Choose the email to send…"), draft.templateUid && (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "text", className: "!w-auto whitespace-nowrap", onClick: () => void openPreview(draft.templateUid), children: "Preview" }), _jsx("a", { className: "text-sm text-primary-dark hover:underline whitespace-nowrap", href: href(`/crm/templates/${encodeURIComponent(draft.templateUid)}`), children: "Edit" }), canWrite && (_jsx(Button, { type: "button", variant: "text", className: "!w-auto whitespace-nowrap", onClick: () => setTesting(true), children: "Send test" }))] }))] }) }), _jsxs(Section, { title: "Tracking", children: [_jsxs("label", { className: "flex items-center gap-1.5 text-sm mb-1", children: [_jsx("input", { type: "checkbox", checked: draft.trackOpens, onChange: (event) => change({ trackOpens: event.target.checked }) }), "Track opens (an invisible image)"] }), _jsxs("label", { className: "flex items-center gap-1.5 text-sm", children: [_jsx("input", { type: "checkbox", checked: draft.trackClicks, onChange: (event) => change({ trackClicks: event.target.checked }) }), "Track clicks (links go through a redirect)"] })] }), _jsxs(Section, { title: "A/B test", children: [_jsxs("label", { className: "flex items-center gap-1.5 text-sm mb-3", children: [_jsx("input", { type: "checkbox", checked: draft.abTest !== null, onChange: (event) => change({ abTest: event.target.checked ? { variants: [{ id: "A" }, { id: "B" }], testPercent: 20, metric: "open", testHours: 4 } : null }) }), "Test versions on part of the audience, then send the best to the rest"] }), draft.abTest && (_jsxs(_Fragment, { children: [draft.abTest.variants.map((variant, index) => (_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("span", { className: "w-6 font-semibold text-sm", children: variant.id }), _jsx("input", { "aria-label": `Subject of variant ${variant.id}`, placeholder: "The template's subject", className: INPUT_CLASS, value: variant.subject ?? "", onChange: (event) => changeTest({ variants: draft.abTest.variants.map((entry, at) => (at === index ? { ...entry, subject: event.target.value || undefined } : entry)) }) }), templateSelect(variant.templateUid ?? "", (templateUid) => changeTest({ variants: draft.abTest.variants.map((entry, at) => (at === index ? { ...entry, templateUid: templateUid || undefined } : entry)) }), `Template of variant ${variant.id}`, "The campaign's email"), draft.abTest.variants.length > 2 && (_jsx("button", { type: "button", "aria-label": `Remove variant ${variant.id}`, className: "px-2 text-danger", onClick: () => changeTest({ variants: draft.abTest.variants.filter((_entry, at) => at !== index).map((entry, at) => ({ ...entry, id: VARIANT_IDS[at] })) }), children: "\u00D7" }))] }, variant.id))), draft.abTest.variants.length < VARIANT_IDS.length && (_jsx("button", { type: "button", className: "text-sm text-primary-dark hover:underline mb-3", onClick: () => changeTest({ variants: [...draft.abTest.variants, { id: VARIANT_IDS[draft.abTest.variants.length] }] }), children: "+ Add variant" })), _jsxs("div", { className: "flex flex-wrap gap-4 items-end text-sm", children: [_jsxs("label", { className: "flex flex-col gap-1", children: ["Test on (% of the audience)", _jsx("input", { type: "number", min: 5, max: 50, className: `${INPUT_CLASS} !w-24`, value: draft.abTest.testPercent, onChange: (event) => changeTest({ testPercent: Number(event.target.value) }) })] }), _jsxs("label", { className: "flex flex-col gap-1", children: ["Pick the winner by", _jsx("select", { className: `${INPUT_CLASS} !w-32`, value: draft.abTest.metric, onChange: (event) => changeTest({ metric: event.target.value }), children: METRICS.map((metric) => (_jsx("option", { value: metric.value, children: metric.label }, metric.value))) })] }), _jsxs("label", { className: "flex flex-col gap-1", children: ["After (hours)", _jsx("input", { type: "number", min: 1, max: 168, className: `${INPUT_CLASS} !w-24`, value: draft.abTest.testHours, onChange: (event) => changeTest({ testHours: Number(event.target.value) }) })] })] })] }))] })] }), editable && (_jsxs(Section, { title: "Send", children: [problems && problems.length > 0 && (_jsx("ul", { className: "mb-3 text-sm list-disc pl-5 text-warning", children: problems.map((problem) => (_jsx("li", { children: problem.message }, problem.message))) })), problems && problems.length === 0 && !dirty && _jsx("p", { className: "mb-3 text-sm text-success", children: "Ready to send." }), _jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1 text-sm", children: ["When (empty: now)", _jsx("input", { type: "datetime-local", className: `${INPUT_CLASS} !w-56`, value: sendAt, onChange: (event) => setSendAt(event.target.value) })] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy || !dirty, onClick: () => void run(async () => void (await save())), children: "Save draft" }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void send(), children: sendAt ? "Schedule" : "Send now" })] })] })), preview && (_jsx(PreviewModal, { open: true, onClose: () => setPreview(null), workspaceUid: workspace.uid, design: preview.design, subject: preview.subject, preheader: preview.preheader ?? "" })), _jsx(TestSendModal, { open: testing, onClose: () => setTesting(false), workspaceUid: workspace.uid, templateUid: draft.templateUid, senders: senders })] }));
+}

package/dist/apps/shared/components/campaigns/CampaignList.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+/** A workspace's campaigns, newest first: their state, reach and results, and creating, duplicating and deleting them. */
+export default function CampaignList(): React.JSX.Element;

package/dist/apps/shared/components/campaigns/CampaignList.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import FormField from "@rapidmx/web-client/lib/components/forms/FormField.js";
+import Modal from "@rapidmx/web-client/lib/components/overlays/Modal.js";
+import { createCampaign, deleteCampaign, duplicateCampaign, errorMessage, searchCampaigns } from "../../crmApi.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+import { StatusBadge, percent, when } from "./campaignUi.js";
+const PAGE_SIZE = 50;
+/** The states a campaign can't be deleted in: it must be cancelled first. */
+const RUNNING = new Set(["preparing", "sending", "paused"]);
+/** A workspace's campaigns, newest first: their state, reach and results, and creating, duplicating and deleting them. */
+export default function CampaignList() {
+    const { workspace, canWrite, href } = useCrm();
+    const [campaigns, setCampaigns] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState(0);
+    const [creating, setCreating] = useState(false);
+    const [error, setError] = useState(null);
+    async function load(upTo) {
+        try {
+            const pages = await Promise.all(Array.from({ length: upTo + 1 }, (_unused, index) => searchCampaigns(workspace.uid, index, PAGE_SIZE)));
+            setCampaigns(pages.flatMap((result) => result.items));
+            setTotal(pages[0].total);
+            setPage(upTo);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the campaigns."));
+        }
+    }
+    useEffect(() => {
+        void load(0);
+    }, [workspace.uid]);
+    const open = (campaign) => window.location.assign(href(`/crm/campaigns/${encodeURIComponent(campaign.uid)}`));
+    async function duplicate(campaign) {
+        try {
+            open(await duplicateCampaign(workspace.uid, campaign.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not duplicate the campaign."));
+        }
+    }
+    async function remove(campaign) {
+        if (!window.confirm(`Delete the campaign "${campaign.name}" and its results?`)) {
+            return;
+        }
+        try {
+            await deleteCampaign(workspace.uid, campaign.uid);
+            await load(page);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not delete the campaign."));
+        }
+    }
+    return (_jsxs("div", { className: "max-w-6xl", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 mb-4", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: "Campaigns" }), canWrite && (_jsx(Button, { type: "button", className: "!w-auto", onClick: () => setCreating(true), children: "+ New campaign" }))] }), error && _jsx(Alert, { children: error }), campaigns.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No campaigns yet." })) : (_jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Status", "Sent or scheduled", "Recipients", "Opened", "Clicked", ""].map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: campaigns.map((campaign) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2 px-2.5 border-b border-border", children: [_jsx("a", { className: "font-medium text-primary-dark hover:underline", href: href(`/crm/campaigns/${encodeURIComponent(campaign.uid)}`), children: campaign.name }), campaign.abTest && _jsx("span", { className: "ml-2 text-xs text-text-muted", children: "A/B" })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: _jsx(StatusBadge, { status: campaign.status }) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border whitespace-nowrap", children: when(campaign.finishedAt ?? campaign.startedAt ?? campaign.scheduledAt) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: campaign.recipientCount }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: percent(campaign.stats.opened, campaign.stats.sent) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: percent(campaign.stats.clicked, campaign.stats.sent) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border text-right whitespace-nowrap", children: canWrite && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "text-primary-dark hover:underline font-medium mr-4", onClick: () => void duplicate(campaign), children: "Duplicate" }), !RUNNING.has(campaign.status) && (_jsx("button", { type: "button", className: "text-danger hover:underline", onClick: () => void remove(campaign), children: "Delete" }))] })) })] }, campaign.uid))) })] })), campaigns.length < total && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-3", onClick: () => void load(page + 1), children: "Show more" })), _jsx(NewCampaignModal, { open: creating, onClose: () => setCreating(false), onCreated: open })] }));
+}
+/** Asks for a new campaign's name and creates it as a draft. */
+function NewCampaignModal({ open, onClose, onCreated }) {
+    const { workspace } = useCrm();
+    const [name, setName] = useState("");
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    async function submit(event) {
+        event.preventDefault();
+        setSaving(true);
+        try {
+            onCreated(await createCampaign(workspace.uid, { name: name.trim() }));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not create the campaign."));
+            setSaving(false);
+        }
+    }
+    return (_jsx(Modal, { open: open, onClose: onClose, title: "New campaign", children: _jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3 min-w-[20rem]", children: [error && _jsx(Alert, { children: error }), _jsx(FormField, { label: "Name", htmlFor: "crm-campaign-name", children: _jsx("input", { id: "crm-campaign-name", className: INPUT_CLASS, value: name, onChange: (event) => setName(event.target.value), required: true }) }), _jsx(Button, { type: "submit", loading: saving, disabled: saving || !name.trim(), className: "!w-auto self-start", children: "Create" })] }) }));
+}

package/dist/apps/shared/components/campaigns/CampaignPage.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/** One campaign: the editor while it's a draft or scheduled, its report from when it starts going out. */
+export default function CampaignPage({ uid }: {
+    uid: string;
+}): React.JSX.Element;