@rapidmx/crm-plugin 0.1.0

package/dist/apps/shared/components/admin/CrmAdmin.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { adminStats, adminWorkspaces, errorMessage, setWorkspaceSending } from "../../crmApi.js";
+/** Workspaces per page. */
+export const ADMIN_PAGE_SIZE = 50;
+function Stat({ label, value }) {
+    return (_jsxs("div", { className: "border border-border rounded-sm p-3", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-text-muted", children: label }), _jsx("div", { className: "text-xl font-bold", children: value.toLocaleString() })] }));
+}
+/**
+ * The deployment's CRM, for its administrators: how many workspaces and contacts there are and how much mail is going out, every
+ * workspace with its size, and the switch that stops a workspace's campaign and automation email (its messages wait, queued, until
+ * it is switched back on). Administrators see no workspace's contents here.
+ */
+export default function CrmAdmin() {
+    const [stats, setStats] = useState(null);
+    const [workspaces, setWorkspaces] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState(0);
+    const [error, setError] = useState(null);
+    async function load() {
+        try {
+            const [nextStats, listed] = await Promise.all([adminStats(), adminWorkspaces(page, ADMIN_PAGE_SIZE)]);
+            setStats(nextStats);
+            setWorkspaces(listed.items);
+            setTotal(listed.total);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the CRM's workspaces."));
+        }
+    }
+    useEffect(() => {
+        void load();
+    }, [page]);
+    async function toggle(workspace) {
+        const stopping = !workspace.sendingDisabled;
+        if (stopping && !window.confirm(`Stop all campaign and automation email from "${workspace.name}"? Its messages wait until you let it send again.`)) {
+            return;
+        }
+        setError(null);
+        try {
+            await setWorkspaceSending(workspace.uid, stopping);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not change the workspace."));
+        }
+    }
+    const pages = Math.max(1, Math.ceil(total / ADMIN_PAGE_SIZE));
+    return (_jsxs("div", { className: "p-6", children: [_jsx("h1", { className: "text-xl font-bold mb-1", children: "CRM" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Every CRM workspace on this deployment. Stopping a workspace's sending holds its campaign and automation email - for abuse, or a compromised account - without touching its data." }), error && _jsx(Alert, { children: error }), stats && (_jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6", children: [_jsx(Stat, { label: "Workspaces", value: stats.workspaces }), _jsx(Stat, { label: "Contacts", value: stats.contacts }), _jsx(Stat, { label: "Sent in the last day", value: stats.sentLastDay }), _jsx(Stat, { label: "Waiting to send", value: stats.queued })] })), stats && workspaces.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No workspaces yet." })) : (_jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-left text-text-muted", children: [_jsx("th", { className: "font-normal py-1", children: "Workspace" }), _jsx("th", { className: "font-normal py-1", children: "Created" }), _jsx("th", { className: "font-normal py-1 text-right", children: "Members" }), _jsx("th", { className: "font-normal py-1 text-right", children: "Contacts" }), _jsx("th", { className: "font-normal py-1 text-right", children: "Campaigns sent" }), _jsx("th", { className: "font-normal py-1", children: "Sending" }), _jsx("th", {})] }) }), _jsx("tbody", { children: workspaces.map((workspace) => (_jsxs("tr", { className: "border-t border-border", children: [_jsx("td", { className: "py-1", children: workspace.name }), _jsx("td", { className: "py-1", children: new Date(workspace.dateCreated).toLocaleDateString() }), _jsx("td", { className: "py-1 text-right tabular-nums", children: workspace.members.toLocaleString() }), _jsx("td", { className: "py-1 text-right tabular-nums", children: workspace.contacts.toLocaleString() }), _jsx("td", { className: "py-1 text-right tabular-nums", children: workspace.campaignsSent.toLocaleString() }), _jsx("td", { className: "py-1", children: workspace.sendingDisabled ? _jsx("span", { className: "font-semibold text-danger", children: "Stopped" }) : "Allowed" }), _jsx("td", { className: "py-1 text-right", children: _jsx(Button, { variant: "text", onClick: () => void toggle(workspace), children: workspace.sendingDisabled ? "Let it send" : "Stop sending" }) })] }, workspace.uid))) })] })), pages > 1 && (_jsxs("div", { className: "flex items-center gap-3 mt-3 text-sm", children: [_jsx(Button, { variant: "text", disabled: page === 0, onClick: () => setPage(page - 1), children: "Previous" }), _jsxs("span", { children: ["Page ", page + 1, " of ", pages] }), _jsx(Button, { variant: "text", disabled: page + 1 >= pages, onClick: () => setPage(page + 1), children: "Next" })] }))] }));
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { AutomationNode } from "../../crmApi.js";
+import { AutomationData } from "./StepInspector.js";
+/** A date trigger in a sentence: "7 days before Birthday, every year, from 09:00". */
+export declare function describeDateTrigger(config: Record<string, unknown>): string;
+/** A step in a sentence, for its box on the flow. */
+export declare function describeStep(node: AutomationNode, data: AutomationData): string;
+/**
+ * One automation: its flow - the trigger and the steps after it, branches side by side, each step's settings beside - with its
+ * live numbers once published, the settings of the whole automation (re-entry, goal), and the contacts in it. The flow is a draft
+ * until published; contacts already in go on through the version they entered.
+ */
+export default function AutomationEditor({ uid }: {
+    uid: string;
+}): React.JSX.Element;

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

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { automationReport, changeAutomation, errorMessage, exitEnrollment, getAutomation, listEnrollments, updateAutomation, } from "../../crmApi.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+import FilterBuilder, { buildFilter, draftOf } from "../FilterBuilder.js";
+import { useSegmentFields } from "../SegmentManager.js";
+import { PORT_LABELS, STEP_TYPES, configure, connect, insertStep, layout, removeStep, stepLabel } from "./flowModel.js";
+import StepInspector, { OWN_DATES, TRIGGER_EVENTS, hourLabel, useAutomationData } from "./StepInspector.js";
+const STATUS_LABELS = { draft: "Draft", active: "Active", paused: "Paused" };
+/** A date trigger in a sentence: "7 days before Birthday, every year, from 09:00". */
+export function describeDateTrigger(config) {
+    const field = typeof config.dateField === "string" ? config.dateField : "";
+    const name = OWN_DATES.find((entry) => entry.value === field)?.label ?? (field ? field.replace(/^properties\./, "") : "a date…");
+    const offset = typeof config.offsetDays === "number" ? config.offsetDays : 0;
+    const days = (count) => `${count} day${count === 1 ? "" : "s"}`;
+    const when = offset === 0 ? `On ${name}` : offset < 0 ? `${days(-offset)} before ${name}` : `${days(offset)} after ${name}`;
+    return `${when}, ${config.repeat === "once" ? "once" : "every year"}, from ${hourLabel(typeof config.hour === "number" ? config.hour : 9)}`;
+}
+/** A step in a sentence, for its box on the flow. */
+export function describeStep(node, data) {
+    const config = node.config;
+    const name = (records, uid, fallback) => records.find((record) => record.uid === uid)?.name ?? fallback;
+    switch (node.type) {
+        case "trigger":
+            if (config.event === "date.reached") {
+                return describeDateTrigger(config);
+            }
+            return `When a contact ${(TRIGGER_EVENTS.find((entry) => entry.value === config.event)?.label ?? "…").toLowerCase()}${config.event === "custom" && config.name ? ` named "${config.name}"` : ""}`;
+        case "delay":
+            return `Wait ${config.amount ?? "?"} ${config.unit ?? ""}`;
+        case "wait":
+            return `Wait up to ${config.timeoutAmount ?? "?"} ${config.timeoutUnit ?? ""} for ${String(config.event ?? "").replace("email.", "")} of ${config.sendNodeId ?? "?"}`;
+        case "condition":
+            return config.filter ? "If the contact matches the conditions" : "If … (set the conditions)";
+        case "split":
+            return `${config.percent ?? 50}% take path A, the rest path B`;
+        case "send_email":
+            return `Send "${name(data.templates, config.templateUid, "…")}"`;
+        case "set_field":
+            return `Set ${config.field} to ${config.value ?? "nothing"}`;
+        case "add_tag":
+            return `Add the tag "${config.tag ?? "…"}"`;
+        case "remove_tag":
+            return `Remove the tag "${config.tag ?? "…"}"`;
+        case "subscribe":
+            return `Subscribe to ${name(data.lists, config.listUid, "…")}`;
+        case "unsubscribe":
+            return `Unsubscribe from ${name(data.lists, config.listUid, "…")}`;
+        case "create_task":
+            return `Create the task "${config.title ?? "…"}"`;
+        case "notify":
+            return `Notify ${data.members.find((member) => member.userUid === config.userUid)?.displayName ?? "a member"}`;
+        case "enroll":
+            return `Put into "${name(data.automations, config.automationUid, "…")}"`;
+        case "webhook": {
+            const endpoint = data.webhooks.find((entry) => entry.uid === config.endpointUid);
+            return `Post to ${endpoint ? endpoint.description || endpoint.url : "a webhook…"}`;
+        }
+        default:
+            return "End";
+    }
+}
+/** The "+" that adds a step (or a jump to one) on a way out of a step. */
+function AddStep({ from, port, onAdd, onJump, jumpTargets }) {
+    return (_jsx("div", { className: "flex justify-center my-1", children: _jsxs("select", { "aria-label": `Add a step after ${from}${port === "next" ? "" : ` (${PORT_LABELS[port]})`}`, className: "text-xs border border-dashed border-border rounded-full px-2 py-0.5 bg-surface text-text-muted", value: "", onChange: (event) => {
+                const value = event.target.value;
+                if (value.startsWith("goto:")) {
+                    onJump(value.slice(5));
+                }
+                else if (value) {
+                    onAdd(value);
+                }
+            }, children: [_jsx("option", { value: "", children: "+ Add step" }), STEP_TYPES.map((group) => (_jsx("optgroup", { label: group.group, children: group.types.map((entry) => (_jsx("option", { value: entry.type, children: entry.label }, entry.type))) }, group.group))), jumpTargets.length > 0 && (_jsx("optgroup", { label: "Go to a step", children: jumpTargets.map((node) => (_jsxs("option", { value: `goto:${node.id}`, children: ["Go to ", node.id] }, node.id))) }))] }) }));
+}
+/** A step's box, and what follows each of its ways out - branches side by side. */
+function FlowBox({ step, props }) {
+    const { graph, data, report, selected, readOnly, onSelect, onChange } = props;
+    const { node } = step;
+    const numbers = report?.nodes[node.id];
+    return (_jsxs("div", { className: "flex flex-col items-center", children: [_jsxs("button", { type: "button", "aria-label": `Step ${node.id}`, "aria-pressed": selected === node.id, onClick: () => onSelect(node.id), className: `w-64 text-left rounded-sm border p-2 bg-surface ${selected === node.id ? "border-primary ring-2 ring-primary/30" : "border-border hover:border-primary"}`, children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-text-muted", children: stepLabel(node.type) }), _jsx("div", { className: "text-sm", children: describeStep(node, data) }), numbers && (numbers.current > 0 || numbers.sent !== undefined) && (_jsxs("div", { className: "text-xs text-primary-dark mt-1", children: [numbers.current > 0 && `${numbers.current} here now`, numbers.sent !== undefined && `${numbers.current > 0 ? " · " : ""}${numbers.sent} sent · ${numbers.opened} opened · ${numbers.clicked} clicked · ${numbers.replied} replied`] }))] }), step.outs.length > 0 && (_jsx("div", { className: "flex gap-6 items-start", children: step.outs.map((out) => (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "w-px h-3 bg-border" }), PORT_LABELS[out.port] && _jsx("div", { className: "text-xs font-semibold text-text-muted", children: PORT_LABELS[out.port] }), !readOnly && (_jsx(AddStep, { from: node.id, port: out.port, jumpTargets: graph.nodes.filter((entry) => entry.type !== "trigger" && entry.id !== node.id), onAdd: (type) => {
+                                const added = insertStep(graph, node.id, out.port, type);
+                                onChange(added.graph, added.id);
+                            }, onJump: (to) => onChange(connect(graph, node.id, out.port, to)) })), out.next && _jsx(FlowBox, { step: out.next, props: props }), out.goto && (_jsxs("button", { type: "button", className: "text-xs text-primary-dark hover:underline", onClick: () => onSelect(out.goto), children: ["\u21AA Go to ", out.goto] })), !out.next && !out.goto && _jsx("div", { className: "text-xs text-text-muted", children: "End" })] }, out.port))) }))] }));
+}
+/**
+ * One automation: its flow - the trigger and the steps after it, branches side by side, each step's settings beside - with its
+ * live numbers once published, the settings of the whole automation (re-entry, goal), and the contacts in it. The flow is a draft
+ * until published; contacts already in go on through the version they entered.
+ */
+export default function AutomationEditor({ uid }) {
+    const { workspace, canWrite, href } = useCrm();
+    const data = useAutomationData();
+    const fields = useSegmentFields(true);
+    const [automation, setAutomation] = useState(null);
+    const [graph, setGraph] = useState(null);
+    const [selected, setSelected] = useState(null);
+    const [dirty, setDirty] = useState(false);
+    const [report, setReport] = useState(null);
+    const [tab, setTab] = useState("flow");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    const [goalDraft, setGoalDraft] = useState(() => draftOf(undefined));
+    async function loadReport(current) {
+        if (!current.publishedVersionUid) {
+            return;
+        }
+        try {
+            setReport(await automationReport(workspace.uid, current.uid));
+        }
+        catch {
+            setReport(null);
+        }
+    }
+    useEffect(() => {
+        getAutomation(workspace.uid, uid).then((loaded) => {
+            setAutomation(loaded);
+            setGraph(loaded.graph);
+            setGoalDraft(draftOf(loaded.goalFilter));
+            void loadReport(loaded);
+        }, (err) => setError(errorMessage(err, "Could not load the automation.")));
+    }, [workspace.uid, uid]);
+    if (!automation || !graph) {
+        return error ? _jsx(Alert, { children: error }) : _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    const readOnly = !canWrite;
+    const flow = layout(graph);
+    const selectedNode = graph.nodes.find((node) => node.id === selected);
+    function change(next, select) {
+        setGraph(next);
+        setDirty(true);
+        setNotice(null);
+        if (select) {
+            setSelected(select);
+        }
+        else if (selected && !next.nodes.some((node) => node.id === selected)) {
+            setSelected(null);
+        }
+    }
+    async function act(action) {
+        setBusy(true);
+        setError(null);
+        setNotice(null);
+        try {
+            await action();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Something went wrong."));
+        }
+        setBusy(false);
+    }
+    const save = async (changes = {}) => {
+        const saved = await updateAutomation(workspace.uid, automation.uid, { graph: graph, version: automation.version, ...changes });
+        setAutomation(saved);
+        setDirty(false);
+        return saved;
+    };
+    const publish = () => act(async () => {
+        if (dirty) {
+            await save();
+        }
+        const published = await changeAutomation(workspace.uid, automation.uid, "publish");
+        setAutomation(published);
+        setNotice("Published. New contacts go through this version; those already in carry on with theirs.");
+        await loadReport(published);
+    });
+    const pauseOrResume = () => act(async () => {
+        setAutomation(await changeAutomation(workspace.uid, automation.uid, automation.status === "active" ? "pause" : "resume"));
+    });
+    return (_jsxs("div", { className: "flex flex-col h-full -m-6", children: [_jsxs("header", { className: "flex flex-wrap items-center gap-2 px-4 py-2 border-b border-border", children: [_jsx("a", { href: href("/crm/automations"), className: "text-sm text-primary-dark hover:underline", children: "\u2190 Automations" }), _jsx("input", { "aria-label": "Automation name", className: `${INPUT_CLASS} !w-64 font-semibold`, value: automation.name, readOnly: readOnly, onChange: (event) => {
+                            setAutomation({ ...automation, name: event.target.value });
+                            setDirty(true);
+                        } }), _jsx("span", { className: "text-xs rounded-full px-2 py-0.5 bg-surface-alt", children: STATUS_LABELS[automation.status] }), _jsx("div", { role: "tablist", className: "flex ml-4 text-sm", children: ["flow", "settings", "contacts"].map((entry) => (_jsx("button", { type: "button", role: "tab", "aria-selected": tab === entry, onClick: () => setTab(entry), className: `px-3 py-1 capitalize ${tab === entry ? "border-b-2 border-primary font-semibold" : "text-text-muted"}`, children: entry === "contacts" ? "Contacts in it" : entry }, entry))) }), !readOnly && (_jsxs("div", { className: "flex gap-2 ml-auto", children: [automation.status !== "draft" && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1.5", disabled: busy, onClick: () => void pauseOrResume(), children: automation.status === "active" ? "Pause" : "Resume" })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1.5", disabled: busy || !dirty, onClick: () => void act(async () => void (await save({ name: automation.name }))), children: dirty ? "Save draft" : "Saved" }), _jsx(Button, { type: "button", className: "!w-auto !py-1.5", loading: busy, disabled: busy, onClick: () => void publish(), children: "Publish" })] }))] }), (error || notice) && _jsx("div", { className: "px-4 pt-2", children: error ? _jsx(Alert, { children: error }) : _jsx("p", { role: "status", className: "text-sm text-success", children: notice }) }), tab === "flow" && (_jsxs("div", { className: "flex flex-1 min-h-0", children: [_jsxs("div", { className: "flex-1 min-w-0 overflow-auto p-6", children: [report && (_jsxs("p", { className: "text-sm text-text-muted mb-4", children: [report.states.active + report.states.waiting, " in it now \u00B7 ", report.states.completed, " finished \u00B7 ", report.states.exited, " taken out \u00B7 ", report.states.failed, " failed"] })), flow && (_jsx(FlowBox, { step: flow, props: { graph, data, report, selected, readOnly, onSelect: setSelected, onChange: change } }))] }), _jsx("aside", { "aria-label": "Step settings", className: "w-80 shrink-0 border-l border-border p-3 overflow-y-auto", children: selectedNode ? (_jsxs("fieldset", { disabled: readOnly, children: [_jsx(StepInspector, { node: selectedNode, graph: graph, automationUid: automation.uid, data: data, onChange: (patch) => change(configure(graph, selectedNode.id, patch)) }, selectedNode.id), selectedNode.type !== "trigger" && (_jsx("button", { type: "button", className: "text-sm text-danger hover:underline", onClick: () => change(removeStep(graph, selectedNode.id)), children: "Remove this step" }))] })) : (_jsx("p", { className: "text-sm text-text-muted", children: "Select a step to change it, or add one with a \u201C+ Add step\u201D menu." })) })] })), tab === "settings" && (_jsxs("fieldset", { disabled: readOnly, className: "p-6 max-w-2xl", children: [_jsx("label", { className: "block text-xs font-semibold text-text-muted mb-1", htmlFor: "crm-automation-description", children: "Description" }), _jsx("input", { id: "crm-automation-description", className: `${INPUT_CLASS} mb-4`, value: automation.description ?? "", onChange: (event) => {
+                            setAutomation({ ...automation, description: event.target.value });
+                            setDirty(true);
+                        } }), _jsxs("fieldset", { className: "mb-4 text-sm", children: [_jsx("legend", { className: "text-xs font-semibold text-text-muted mb-1", children: "A contact may go through it" }), [
+                                ["never", "Once only"],
+                                ["after_exit", "Again, once they've finished"],
+                            ].map(([value, label]) => (_jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "radio", name: "crm-automation-reentry", checked: automation.reentry === value, onChange: () => {
+                                            setAutomation({ ...automation, reentry: value });
+                                            setDirty(true);
+                                        } }), label] }, value)))] }), _jsx("div", { className: "text-xs font-semibold text-text-muted mb-1", children: "Goal: contacts matching this leave the automation" }), _jsx(FilterBuilder, { fields: fields, draft: goalDraft, onChange: (next) => {
+                            setGoalDraft(next);
+                            setAutomation({ ...automation, goalFilter: buildFilter(next, fields) ?? null });
+                            setDirty(true);
+                        } }), !readOnly && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-4", disabled: busy || !dirty, onClick: () => void act(async () => {
+                            await save({ name: automation.name, description: automation.description || null, reentry: automation.reentry, goalFilter: automation.goalFilter ?? null });
+                            setNotice("Saved.");
+                        }), children: "Save settings" }))] })), tab === "contacts" && _jsx(Enrollments, { automation: automation, readOnly: readOnly })] }));
+}
+const STATES = ["active", "waiting", "completed", "exited", "failed"];
+/** The contacts that went through an automation, filterable by where they are, with a way to take one out. */
+function Enrollments({ automation, readOnly }) {
+    const { workspace, href } = useCrm();
+    const [state, setState] = useState("");
+    const [page, setPage] = useState(0);
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState(null);
+    const [reload, setReload] = useState(0);
+    useEffect(() => {
+        listEnrollments(workspace.uid, automation.uid, { state: state || undefined, page, limit: 50 }).then(setResult, (err) => setError(errorMessage(err, "Could not load the contacts.")));
+    }, [state, page, reload]);
+    async function exit(enrollment) {
+        try {
+            await exitEnrollment(workspace.uid, automation.uid, enrollment.uid);
+            setReload(reload + 1);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not take the contact out."));
+        }
+    }
+    return (_jsxs("div", { className: "p-6 max-w-5xl", children: [_jsxs("select", { "aria-label": "Where", className: `${INPUT_CLASS} !w-48 mb-3`, value: state, onChange: (event) => { setState(event.target.value); setPage(0); }, children: [_jsx("option", { value: "", children: "Everyone" }), STATES.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] }), error && _jsx(Alert, { children: error }), result && result.items.length === 0 && _jsx("p", { className: "text-sm text-text-muted", children: "Nobody yet." }), result && result.items.length > 0 && (_jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Contact", "Where", "At step", "Entered", ""].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: result.items.map((enrollment) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2 px-2.5 border-b border-border", children: _jsx("a", { className: "text-primary-dark hover:underline", href: href(`/crm/contacts/${encodeURIComponent(enrollment.contactUid)}`), children: enrollment.email ?? enrollment.contactUid }) }), _jsxs("td", { className: "py-2 px-2.5 border-b border-border", children: [enrollment.state, enrollment.error && _jsx("div", { className: "text-xs text-danger", children: enrollment.error })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: enrollment.currentNodeId }), _jsx("td", { className: "py-2 px-2.5 border-b border-border whitespace-nowrap", children: new Date(enrollment.enteredAt).toLocaleString() }), _jsx("td", { className: "py-2 px-2.5 border-b border-border text-right", children: !readOnly && (enrollment.state === "active" || enrollment.state === "waiting") && (_jsx("button", { type: "button", className: "text-danger hover:underline", onClick: () => void exit(enrollment), children: "Take out" })) })] }, enrollment.uid))) })] })), result && result.total > (page + 1) * 50 && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-3", onClick: () => setPage(page + 1), children: "Next page" })), page > 0 && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-3 ml-2", onClick: () => setPage(page - 1), children: "Previous page" }))] }));
+}

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

@@ -0,0 +1,3 @@
+import React from "react";
+/** A workspace's automations: their state, and creating (from a recipe) and deleting them. */
+export default function AutomationList(): React.JSX.Element;

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { createAutomation, deleteAutomation, errorMessage, listAutomations } from "../../crmApi.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+import { RECIPES } from "./flowModel.js";
+const STATUS_LABELS = { draft: "Draft", active: "Active", paused: "Paused" };
+/** A workspace's automations: their state, and creating (from a recipe) and deleting them. */
+export default function AutomationList() {
+    const { workspace, canWrite, href } = useCrm();
+    const [automations, setAutomations] = useState([]);
+    const [creating, setCreating] = useState(false);
+    const [error, setError] = useState(null);
+    async function load() {
+        try {
+            setAutomations(await listAutomations(workspace.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the automations."));
+        }
+    }
+    useEffect(() => {
+        void load();
+    }, [workspace.uid]);
+    async function remove(automation) {
+        if (!window.confirm(`Delete the automation "${automation.name}"? Contacts in it leave it, and emails not sent yet aren't.`)) {
+            return;
+        }
+        try {
+            await deleteAutomation(workspace.uid, automation.uid);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not delete the automation."));
+        }
+    }
+    return (_jsxs("div", { className: "max-w-5xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: "Automations" }), canWrite && (_jsx(Button, { type: "button", className: "!w-auto", onClick: () => setCreating(true), children: "+ New automation" }))] }), error && _jsx(Alert, { children: error }), automations.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No automations yet. An automation reacts to what contacts do - welcoming subscribers, following up, tagging and assigning leads." })) : (_jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Status", "Published", ""].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: automations.map((automation) => (_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/automations/${encodeURIComponent(automation.uid)}`), children: automation.name }), automation.description && _jsx("div", { className: "text-xs text-text-muted", children: automation.description })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: STATUS_LABELS[automation.status] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border whitespace-nowrap", children: automation.publishedAt ? new Date(automation.publishedAt).toLocaleString() : "–" }), _jsx("td", { className: "py-2 px-2.5 border-b border-border text-right", children: canWrite && (_jsx("button", { type: "button", className: "text-danger hover:underline", onClick: () => void remove(automation), children: "Delete" })) })] }, automation.uid))) })] })), _jsx(NewAutomationModal, { open: creating, onClose: () => setCreating(false), onCreated: (automation) => window.location.assign(href(`/crm/automations/${encodeURIComponent(automation.uid)}`)) })] }));
+}
+/** Asks for a new automation's name and what to start from. */
+function NewAutomationModal({ open, onClose, onCreated }) {
+    const { workspace } = useCrm();
+    const [name, setName] = useState("");
+    const [recipe, setRecipe] = useState(0);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    async function submit(event) {
+        event.preventDefault();
+        setSaving(true);
+        try {
+            onCreated(await createAutomation(workspace.uid, { name: name.trim(), graph: RECIPES[recipe].graph, ...(RECIPES[recipe].reentry ? { reentry: RECIPES[recipe].reentry } : {}) }));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not create the automation."));
+            setSaving(false);
+        }
+    }
+    return (_jsx(Modal, { open: open, onClose: onClose, title: "New automation", children: _jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3 min-w-[28rem]", children: [error && _jsx(Alert, { children: error }), _jsx(FormField, { label: "Name", htmlFor: "crm-automation-name", children: _jsx("input", { id: "crm-automation-name", className: INPUT_CLASS, value: name, onChange: (event) => setName(event.target.value), required: true }) }), _jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-xs font-semibold text-text-muted mb-1", children: "Start from" }), RECIPES.map((entry, index) => (_jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx("input", { type: "radio", name: "crm-automation-recipe", className: "mt-1", checked: recipe === index, onChange: () => setRecipe(index) }), _jsxs("span", { children: [_jsx("span", { className: "font-medium", children: entry.name }), _jsx("span", { className: "block text-xs text-text-muted", children: entry.description })] })] }, entry.name)))] }), _jsx(Button, { type: "submit", loading: saving, disabled: saving || !name.trim(), className: "!w-auto self-start", children: "Create" })] }) }));
+}

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { Automation, AutomationGraph, AutomationNode, CrmForm, EmailTemplate, MailingList, Pipeline, Segment, WorkspaceMember, WebhookEndpoint, WorkspaceSender } from "../../crmApi.js";
+/** What the step settings pick from: the workspace's lists, forms, segments, templates, senders, members, automations, pipelines and webhooks. */
+export interface AutomationData {
+    lists: MailingList[];
+    forms: CrmForm[];
+    segments: Segment[];
+    templates: EmailTemplate[];
+    senders: WorkspaceSender[];
+    members: WorkspaceMember[];
+    automations: Automation[];
+    pipelines: Pipeline[];
+    webhooks: WebhookEndpoint[];
+}
+/** Loads what the step settings pick from. Anything that fails to load is left empty. */
+export declare function useAutomationData(): AutomationData;
+/** What each trigger event is called. */
+export declare const TRIGGER_EVENTS: {
+    value: string;
+    label: string;
+}[];
+export declare const WAIT_EVENTS: {
+    value: string;
+    label: string;
+}[];
+/** The contact's own dates a date trigger can start from, besides its date properties. */
+export declare const OWN_DATES: {
+    value: string;
+    label: string;
+}[];
+/** `hour` as a time of day ("09:00"). */
+export declare function hourLabel(hour: number): string;
+/** The settings of one step. `onChange` gets the settings to merge into the step's. */
+export default function StepInspector({ node, graph, automationUid, data, onChange, }: {
+    node: AutomationNode;
+    graph: AutomationGraph;
+    automationUid: string;
+    data: AutomationData;
+    onChange: (patch: Record<string, unknown>) => void;
+}): React.JSX.Element;

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

@@ -0,0 +1,177 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useId, useState } from "react";
+import { listAutomations, listForms, listLists, listMembers, listPipelines, listSegments, listSenders, listWebhooks, searchTemplates, } from "../../crmApi.js";
+import { LIFECYCLE_STAGES } from "../../fields.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+import FilterBuilder, { buildFilter, draftOf } from "../FilterBuilder.js";
+import { useSegmentFields } from "../SegmentManager.js";
+import { earlierSends, stepLabel } from "./flowModel.js";
+const EMPTY = { lists: [], forms: [], segments: [], templates: [], senders: [], members: [], automations: [], pipelines: [], webhooks: [] };
+/** Loads what the step settings pick from. Anything that fails to load is left empty. */
+export function useAutomationData() {
+    const { workspace } = useCrm();
+    const [data, setData] = useState(EMPTY);
+    useEffect(() => {
+        const settle = (promise, fallback) => promise.catch(() => fallback);
+        void Promise.all([
+            settle(listLists(workspace.uid), []),
+            settle(listForms(workspace.uid), []),
+            settle(listSegments(workspace.uid), []),
+            settle(searchTemplates(workspace.uid, 0, 200).then((result) => result.items), []),
+            settle(listSenders(workspace.uid), []),
+            settle(listMembers(workspace.uid), []),
+            settle(listAutomations(workspace.uid), []),
+            settle(listPipelines(workspace.uid), []),
+            settle(listWebhooks(workspace.uid), []),
+        ]).then(([lists, forms, segments, templates, senders, members, automations, pipelines, webhooks]) => setData({ lists, forms, segments, templates, senders, members, automations, pipelines, webhooks }));
+    }, [workspace.uid]);
+    return data;
+}
+/** What each trigger event is called. */
+export const TRIGGER_EVENTS = [
+    { value: "list.subscribed", label: "Subscribes to a list" },
+    { value: "list.unsubscribed", label: "Unsubscribes from a list" },
+    { value: "form.submitted", label: "Submits a form" },
+    { value: "segment.entered", label: "Enters a segment" },
+    { value: "segment.left", label: "Leaves a segment" },
+    { value: "contact.created", label: "Is created" },
+    { value: "contact.updated", label: "Is changed" },
+    { value: "email.opened", label: "Opens an email" },
+    { value: "email.clicked", label: "Clicks a link in an email" },
+    { value: "email.replied", label: "Replies to an email" },
+    { value: "email.bounced", label: "Has an email bounce" },
+    { value: "email.unsubscribed", label: "Unsubscribes through an email" },
+    { value: "deal.created", label: "Gets a new deal" },
+    { value: "deal.stage_changed", label: "Has a deal move to another stage" },
+    { value: "deal.won", label: "Has a deal won" },
+    { value: "deal.lost", label: "Has a deal lost" },
+    { value: "date.reached", label: "Reaches a date (birthday, renewal, anniversary…)" },
+    { value: "custom", label: "Has an event reported by your systems (API)" },
+    { value: "manual", label: "Is put in by hand (or by another automation)" },
+];
+export const WAIT_EVENTS = [
+    { value: "email.opened", label: "Opens" },
+    { value: "email.clicked", label: "Clicks a link in" },
+    { value: "email.replied", label: "Replies to" },
+];
+const UNITS = [
+    { value: "minutes", label: "minutes" },
+    { value: "hours", label: "hours" },
+    { value: "days", label: "days" },
+];
+/** The contact's own dates a date trigger can start from, besides its date properties. */
+export const OWN_DATES = [
+    { value: "dateCreated", label: "Date added" },
+    { value: "lastEngagedAt", label: "Last engaged" },
+];
+const DATE_WHEN = [
+    { value: "on", label: "On the date" },
+    { value: "before", label: "Days before" },
+    { value: "after", label: "Days after" },
+];
+const REPEATS = [
+    { value: "yearly", label: "Every year" },
+    { value: "once", label: "Once" },
+];
+/** `hour` as a time of day ("09:00"). */
+export function hourLabel(hour) {
+    return `${String(hour).padStart(2, "0")}:00`;
+}
+const HOURS = Array.from({ length: 24 }, (_value, hour) => ({ value: String(hour), label: hourLabel(hour) }));
+/** A date trigger's settings: the date, days before or after it, every year or once, and from what hour. */
+function DateSettings({ config, onChange }) {
+    const fields = useSegmentFields();
+    const dates = [...OWN_DATES, ...fields.filter((field) => field.kind === "date" && field.name.startsWith("properties.")).map((field) => ({ value: field.name, label: field.label }))];
+    const offset = typeof config.offsetDays === "number" ? config.offsetDays : 0;
+    const when = offset < 0 ? "before" : offset > 0 ? "after" : "on";
+    return (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Date", value: config.dateField, options: dates, empty: "Choose a date\u2026", onChange: (dateField) => onChange({ dateField: dateField || undefined }) }), _jsx(Select, { label: "When", value: when, options: DATE_WHEN, onChange: (next) => onChange({ offsetDays: next === "on" ? 0 : (next === "before" ? -1 : 1) * Math.max(1, Math.abs(offset)) }) }), when !== "on" && _jsx(WholeNumber, { label: "Days", value: Math.abs(offset), onChange: (days) => onChange({ offsetDays: (when === "before" ? -1 : 1) * Math.min(365, Math.max(1, days ?? 1)) }) }), _jsx(Select, { label: "Repeat", value: config.repeat ?? "yearly", options: REPEATS, onChange: (repeat) => onChange({ repeat }) }), _jsx(Select, { label: "From (workspace time)", value: String(config.hour ?? 9), options: HOURS, onChange: (hour) => onChange({ hour: Number(hour) }) }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Contacts are put in once a day. For a date that comes round every year, let contacts go through again (the automation's settings) or they only get it the first time." })] }));
+}
+const SETTABLE = [
+    { value: "lifecycleStage", label: "Lifecycle stage" },
+    { value: "leadStatus", label: "Lead status" },
+    { value: "ownerUserUid", label: "Owner" },
+];
+function Field({ label, children }) {
+    const id = useId();
+    return (_jsxs("div", { className: "mb-3", children: [_jsx("label", { htmlFor: id, className: "block text-xs font-semibold text-text-muted mb-1", children: label }), children(id)] }));
+}
+function Select({ label, value, options, onChange, empty }) {
+    return (_jsx(Field, { label: label, children: (id) => (_jsxs("select", { id: id, className: INPUT_CLASS, value: String(value ?? ""), onChange: (event) => onChange(event.target.value), children: [empty !== undefined && _jsx("option", { value: "", children: empty }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })) }));
+}
+function Text({ label, value, onChange, type = "text" }) {
+    return _jsx(Field, { label: label, children: (id) => _jsx("input", { id: id, type: type, className: INPUT_CLASS, value: value === undefined || value === null ? "" : String(value), onChange: (event) => onChange(event.target.value) }) });
+}
+/** A whole number setting; emptying it clears it. */
+function WholeNumber({ label, value, onChange }) {
+    return _jsx(Text, { label: label, type: "number", value: value, onChange: (raw) => onChange(raw === "" ? undefined : Math.max(0, Math.round(Number(raw)))) });
+}
+/** A contact filter setting, edited with the filter builder. */
+function Conditions({ label, value, onChange }) {
+    const fields = useSegmentFields(true);
+    const [draft, setDraft] = useState(() => draftOf(value));
+    return (_jsxs("div", { className: "mb-3", children: [_jsx("div", { className: "text-xs font-semibold text-text-muted mb-1", children: label }), _jsx(FilterBuilder, { fields: fields, draft: draft, onChange: (next) => {
+                    setDraft(next);
+                    onChange(buildFilter(next, fields) ?? null);
+                } })] }));
+}
+const names = (records) => records.map((record) => ({ value: record.uid, label: record.name }));
+/** The settings of one step. `onChange` gets the settings to merge into the step's. */
+export default function StepInspector({ node, graph, automationUid, data, onChange, }) {
+    const config = node.config;
+    const set = (field) => (value) => onChange({ [field]: value === "" ? undefined : value });
+    const members = data.members.map((member) => ({ value: member.userUid, label: member.displayName || member.address || member.userUid }));
+    let fields;
+    switch (node.type) {
+        case "trigger":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Select, { label: "When a contact", value: config.event, options: TRIGGER_EVENTS, onChange: (event) => onChange({ event, listUid: undefined, formUid: undefined, segmentUid: undefined, pipelineUid: undefined, stageId: undefined, fields: undefined, name: undefined, ...(event === "date.reached" ? { repeat: "yearly", offsetDays: 0, hour: 9 } : { dateField: undefined, repeat: undefined, offsetDays: undefined, hour: undefined }) }) }), config.event === "date.reached" && _jsx(DateSettings, { config: config, onChange: onChange }), config.event === "custom" && _jsx(Text, { label: "Event name (empty: any event)", value: config.name, onChange: set("name") }), (config.event === "list.subscribed" || config.event === "list.unsubscribed") && (_jsx(Select, { label: "List", value: config.listUid, options: names(data.lists), empty: "Any list", onChange: set("listUid") })), config.event === "form.submitted" && _jsx(Select, { label: "Form", value: config.formUid, options: names(data.forms), empty: "Any form", onChange: set("formUid") }), (config.event === "segment.entered" || config.event === "segment.left") && (_jsx(Select, { label: "Segment", value: config.segmentUid, options: names(data.segments), empty: "Any segment", onChange: set("segmentUid") })), String(config.event).startsWith("deal.") && (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Pipeline", value: config.pipelineUid, options: names(data.pipelines), empty: "Any pipeline", onChange: (pipelineUid) => onChange({ pipelineUid: pipelineUid || undefined, stageId: undefined }) }), config.event === "deal.stage_changed" && config.pipelineUid && (_jsx(Select, { label: "Moved to", value: config.stageId, options: (data.pipelines.find((pipeline) => pipeline.uid === config.pipelineUid)?.stages ?? []).map((stage) => ({ value: stage.id, label: stage.name })), empty: "Any stage", onChange: set("stageId") }))] })), config.event === "contact.updated" && (_jsx(Text, { label: "Only when these fields change (comma-separated, empty: any)", value: Array.isArray(config.fields) ? config.fields.join(", ") : "", onChange: (raw) => {
+                            const list = raw.split(",").map((entry) => entry.trim()).filter(Boolean);
+                            onChange({ fields: list.length > 0 ? list : undefined });
+                        } })), _jsx(Conditions, { label: "Only contacts matching (optional)", value: config.filter, onChange: (filter) => onChange({ filter: filter ?? undefined }) }, `${node.id}-trigger`)] }));
+            break;
+        case "delay":
+            fields = (_jsxs("div", { className: "flex gap-2", children: [_jsx(WholeNumber, { label: "Wait", value: config.amount, onChange: set("amount") }), _jsx(Select, { label: "Unit", value: config.unit, options: UNITS, onChange: set("unit") })] }));
+            break;
+        case "wait":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Until the contact", value: config.event, options: WAIT_EVENTS, onChange: set("event") }), _jsx(Select, { label: "The email sent by", value: config.sendNodeId, options: earlierSends(graph, node.id).map((send) => ({ value: send.id, label: send.id })), empty: "Choose an earlier email step\u2026", onChange: set("sendNodeId") }), _jsxs("div", { className: "flex gap-2", children: [_jsx(WholeNumber, { label: "At most", value: config.timeoutAmount, onChange: set("timeoutAmount") }), _jsx(Select, { label: "Unit", value: config.timeoutUnit, options: UNITS, onChange: set("timeoutUnit") })] })] }));
+            break;
+        case "condition":
+            fields = _jsx(Conditions, { label: "Is the contact matching", value: config.filter, onChange: set("filter") }, node.id);
+            break;
+        case "split":
+            fields = _jsx(WholeNumber, { label: "Share taking path A (%)", value: config.percent, onChange: set("percent") });
+            break;
+        case "send_email":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Email", value: config.templateUid, options: names(data.templates), empty: "Choose a template\u2026", onChange: set("templateUid") }), _jsx(Select, { label: "From", value: config.senderUid, options: data.senders.map((sender) => ({ value: sender.uid, label: sender.fromName ? `${sender.fromName} <${sender.fromAddress}>` : sender.fromAddress })), empty: "Choose a sender\u2026", onChange: set("senderUid") }), _jsx(Text, { label: "Subject (empty: the template's)", value: config.subject, onChange: set("subject") })] }));
+            break;
+        case "set_field":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Field", value: config.field, options: SETTABLE, onChange: (field) => onChange({ field, value: null }) }), config.field === "lifecycleStage" ? (_jsx(Select, { label: "Value", value: config.value, options: LIFECYCLE_STAGES, onChange: set("value") })) : config.field === "ownerUserUid" ? (_jsx(Select, { label: "Member", value: config.value, options: members, empty: "Nobody", onChange: (value) => onChange({ value: value || null }) })) : (_jsx(Text, { label: "Value", value: config.value, onChange: (value) => onChange({ value: value || null }) }))] }));
+            break;
+        case "add_tag":
+        case "remove_tag":
+            fields = _jsx(Text, { label: "Tag", value: config.tag, onChange: set("tag") });
+            break;
+        case "subscribe":
+        case "unsubscribe":
+            fields = _jsx(Select, { label: "List", value: config.listUid, options: names(data.lists), empty: "Choose a list\u2026", onChange: set("listUid") });
+            break;
+        case "create_task":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Text, { label: "Title", value: config.title, onChange: set("title") }), _jsx(WholeNumber, { label: "Due in (days, empty: no due date)", value: config.dueInDays, onChange: set("dueInDays") }), _jsx(Select, { label: "Assigned to", value: config.assigneeUserUid, options: members, empty: "Nobody", onChange: set("assigneeUserUid") })] }));
+            break;
+        case "notify":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Member", value: config.userUid, options: members, empty: "Choose a member\u2026", onChange: set("userUid") }), _jsx(Text, { label: "Message", value: config.message, onChange: set("message") })] }));
+            break;
+        case "enroll":
+            fields = (_jsx(Select, { label: "Automation", value: config.automationUid, options: names(data.automations.filter((automation) => automation.uid !== automationUid)), empty: "Choose an automation\u2026", onChange: set("automationUid") }));
+            break;
+        case "webhook":
+            fields = (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Webhook", value: config.endpointUid, options: data.webhooks.map((endpoint) => ({ value: endpoint.uid, label: endpoint.description || endpoint.url })), empty: "Choose a webhook\u2026", onChange: set("endpointUid") }), _jsxs("p", { className: "text-xs text-text-muted", children: ["Posts an ", _jsx("code", { children: "automation.webhook" }), " event about the contact. Add webhooks under Integrations."] })] }));
+            break;
+        default:
+            fields = _jsx("p", { className: "text-sm text-text-muted", children: "The contact leaves the automation here." });
+    }
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-1", children: stepLabel(node.type) }), _jsxs("p", { className: "text-xs text-text-muted mb-3", children: ["Step ", node.id] }), fields] }));
+}