@rapidmx/crm-plugin 0.1.0

package/dist/apps/shared/components/FormManager.js

@@ -0,0 +1,132 @@
+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 { createForm, deleteForm, errorMessage, listForms, listLists, listProperties, listSenders, updateForm, } from "../crmApi.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+/** The contact fields a form can ask for, besides custom properties. */
+const BASE_TARGETS = [
+    { target: "email", label: "Email" },
+    { target: "firstName", label: "First name" },
+    { target: "lastName", label: "Last name" },
+    { target: "phone", label: "Phone" },
+    { target: "jobTitle", label: "Job title" },
+    { target: "company", label: "Company" },
+];
+/** The public address of a form, on this site. Browser only. */
+export function formUrl(formUid) {
+    return `${window.location.origin}/f/${encodeURIComponent(formUid)}`;
+}
+/** The HTML that embeds a form in another site. */
+export function embedCode(formUid) {
+    return `<iframe src="${formUrl(formUid)}" title="Signup form" style="width:100%;max-width:560px;height:520px;border:0"></iframe>`;
+}
+/** A workspace's signup forms: their links and embed code, how often each was submitted, and (for admins) the form editor. */
+export default function FormManager() {
+    const { workspace, canManage } = useCrm();
+    const [forms, setForms] = useState([]);
+    const [editing, setEditing] = useState(null);
+    const [error, setError] = useState(null);
+    async function load() {
+        try {
+            setForms(await listForms(workspace.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the forms."));
+        }
+    }
+    useEffect(() => {
+        void load();
+    }, [workspace.uid]);
+    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: "Forms" }), canManage && (_jsx(Button, { type: "button", className: "!w-auto", onClick: () => setEditing("new"), children: "+ New form" }))] }), error && _jsx(Alert, { children: error }), forms.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No forms yet." })) : (_jsx("ul", { className: "flex flex-col gap-3", children: forms.map((form) => (_jsxs("li", { className: "border border-border rounded-sm p-3 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("span", { className: "font-medium", children: [form.name, !form.enabled && _jsx("span", { className: "ml-2 text-xs text-text-muted", children: "off" })] }), _jsxs("span", { className: "text-text-muted", children: [form.submissionCount, " submissions"] })] }), _jsxs("div", { className: "flex flex-wrap gap-4 mt-2", children: [_jsx("a", { className: "text-primary-dark hover:underline", href: formUrl(form.uid), target: "_blank", rel: "noreferrer", children: "Open form" }), _jsx("button", { type: "button", className: "text-primary-dark hover:underline", onClick: async () => {
+                                        try {
+                                            await navigator.clipboard.writeText(embedCode(form.uid));
+                                        }
+                                        catch {
+                                            setError("Could not copy the embed code.");
+                                        }
+                                    }, children: "Copy embed code" }), canManage && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "text-primary-dark hover:underline", onClick: () => setEditing(form), children: "Edit" }), _jsx("button", { type: "button", className: "text-danger hover:underline", onClick: async () => {
+                                                if (window.confirm(`Delete the form "${form.name}"? Its link stops working.`)) {
+                                                    await deleteForm(workspace.uid, form.uid);
+                                                    await load();
+                                                }
+                                            }, children: "Delete" })] }))] })] }, form.uid))) })), editing && (_jsx(FormEditor, { form: editing === "new" ? undefined : editing, onClose: () => setEditing(null), onSaved: async () => {
+                    setEditing(null);
+                    await load();
+                } }))] }));
+}
+/** The editor of a new form, or of `form`. */
+function FormEditor({ form, onClose, onSaved }) {
+    const { workspace } = useCrm();
+    const [lists, setLists] = useState([]);
+    const [senders, setSenders] = useState([]);
+    const [properties, setProperties] = useState([]);
+    const [name, setName] = useState(form?.name ?? "");
+    const [title, setTitle] = useState(form?.title ?? "");
+    const [description, setDescription] = useState(form?.description ?? "");
+    const [fields, setFields] = useState(form?.fields ?? [{ target: "email", label: "Email", required: true }]);
+    const [listUids, setListUids] = useState(form?.listUids ?? []);
+    const [doubleOptIn, setDoubleOptIn] = useState(form?.doubleOptIn ?? true);
+    const [senderUid, setSenderUid] = useState(form?.senderUid ?? "");
+    const [successMessage, setSuccessMessage] = useState(form?.successMessage ?? "Thanks for signing up!");
+    const [redirectUrl, setRedirectUrl] = useState(form?.redirectUrl ?? "");
+    const [tags, setTags] = useState((form?.tags ?? []).join(", "));
+    const [enabled, setEnabled] = useState(form?.enabled ?? true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        Promise.all([listLists(workspace.uid), listSenders(workspace.uid), listProperties(workspace.uid, "contact")])
+            .then(([listResult, senderResult, propertyResult]) => {
+            setLists(listResult);
+            setSenders(senderResult);
+            setProperties(propertyResult);
+        })
+            .catch((err) => setError(errorMessage(err, "Could not load the lists, senders and properties.")));
+    }, [workspace.uid]);
+    const targets = [
+        ...BASE_TARGETS,
+        ...properties.map((definition) => ({ target: `properties.${definition.key}`, label: definition.label })),
+    ];
+    const unused = targets.filter((entry) => !fields.some((field) => field.target === entry.target));
+    async function submit(event) {
+        event.preventDefault();
+        const body = {
+            name,
+            title: title || name,
+            description: description || null,
+            fields,
+            listUids,
+            doubleOptIn,
+            senderUid: senderUid || null,
+            successMessage,
+            redirectUrl: redirectUrl || null,
+            tags: tags
+                .split(",")
+                .map((tag) => tag.trim())
+                .filter(Boolean),
+            enabled,
+        };
+        try {
+            if (form) {
+                await updateForm(workspace.uid, form.uid, body);
+            }
+            else {
+                await createForm(workspace.uid, body);
+            }
+            await onSaved();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not save the form."));
+        }
+    }
+    const setField = (index, change) => setFields((current) => current.map((field, position) => (position === index ? { ...field, ...change } : field)));
+    return (_jsx(Modal, { open: true, onClose: onClose, title: form ? "Edit form" : "New form", children: _jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3", "aria-label": "Form editor", children: [error && _jsx(Alert, { children: error }), _jsx(FormField, { label: "Name (only members see it)", htmlFor: "form-name", children: _jsx("input", { id: "form-name", className: INPUT_CLASS, value: name, onChange: (event) => setName(event.target.value), required: true }) }), _jsx(FormField, { label: "Heading", htmlFor: "form-title", children: _jsx("input", { id: "form-title", className: INPUT_CLASS, value: title, onChange: (event) => setTitle(event.target.value) }) }), _jsx(FormField, { label: "Text under the heading", htmlFor: "form-description", children: _jsx("input", { id: "form-description", className: INPUT_CLASS, value: description, onChange: (event) => setDescription(event.target.value) }) }), _jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-medium mb-1", children: "Fields" }), fields.map((field, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-text-muted w-28 truncate", children: targets.find((entry) => entry.target === field.target)?.label ?? field.target }), _jsx("input", { "aria-label": `Label of ${field.target}`, className: `${INPUT_CLASS} !w-48`, value: field.label, onChange: (event) => setField(index, { label: event.target.value }) }), _jsxs("label", { className: "text-xs flex items-center gap-1", children: [_jsx("input", { type: "checkbox", checked: field.required, disabled: field.target === "email", onChange: (event) => setField(index, { required: event.target.checked }) }), "Required"] }), field.target !== "email" && (_jsx("button", { type: "button", "aria-label": `Remove ${field.target}`, className: "text-xs text-text-muted hover:text-danger", onClick: () => setFields((current) => current.filter((_entry, position) => position !== index)), children: "Remove" }))] }, field.target))), unused.length > 0 && (_jsxs("select", { "aria-label": "Add a field", className: `${INPUT_CLASS} !w-56`, value: "", onChange: (event) => {
+                                const entry = unused.find((candidate) => candidate.target === event.target.value);
+                                setFields((current) => [...current, { target: entry.target, label: entry.label, required: false }]);
+                            }, children: [_jsx("option", { value: "", children: "+ Add a field\u2026" }), unused.map((entry) => (_jsx("option", { value: entry.target, children: entry.label }, entry.target)))] }))] }), _jsxs("fieldset", { className: "flex flex-col gap-1", children: [_jsx("legend", { className: "text-sm font-medium mb-1", children: "Subscribe to" }), lists.length === 0 && _jsx("p", { className: "text-xs text-text-muted", children: "No lists yet: the form only collects contacts." }), lists.map((list) => (_jsxs("label", { className: "text-sm flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: listUids.includes(list.uid), onChange: (event) => setListUids((current) => (event.target.checked ? [...current, list.uid] : current.filter((uid) => uid !== list.uid))) }), list.name] }, list.uid)))] }), _jsxs("label", { className: "text-sm flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: doubleOptIn, onChange: (event) => setDoubleOptIn(event.target.checked) }), "Ask signups to confirm by email (double opt-in)"] }), _jsx(FormField, { label: "Confirmation emails come from", htmlFor: "form-sender", children: _jsxs("select", { id: "form-sender", className: INPUT_CLASS, value: senderUid, onChange: (event) => setSenderUid(event.target.value), children: [_jsx("option", { value: "", children: "Nobody" }), senders.map((sender) => (_jsxs("option", { value: sender.uid, children: [sender.fromName, " <", sender.fromAddress, ">"] }, sender.uid)))] }) }), _jsx(FormField, { label: "Message once submitted", htmlFor: "form-success", children: _jsx("input", { id: "form-success", className: INPUT_CLASS, value: successMessage, onChange: (event) => setSuccessMessage(event.target.value) }) }), _jsx(FormField, { label: "Or go to this page (https://)", htmlFor: "form-redirect", children: _jsx("input", { id: "form-redirect", className: INPUT_CLASS, value: redirectUrl, onChange: (event) => setRedirectUrl(event.target.value) }) }), _jsx(FormField, { label: "Tag contacts with (comma-separated)", htmlFor: "form-tags", children: _jsx("input", { id: "form-tags", className: INPUT_CLASS, value: tags, onChange: (event) => setTags(event.target.value) }) }), _jsxs("label", { className: "text-sm flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: enabled, onChange: (event) => setEnabled(event.target.checked) }), "Take submissions"] }), _jsx(Button, { type: "submit", className: "!w-auto self-end", children: "Save" })] }) }));
+}

package/dist/apps/shared/components/ImportWizard.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/** How often the import list is refreshed while an import is queued or running, in milliseconds. */
+export declare const IMPORT_POLL_MS = 3000;
+/**
+ * Imports contacts or companies from a CSV file in two steps - pick the file and what it holds, then check which column goes where
+ * (the server suggests a mapping) - and lists the workspace's imports with their progress and the rows they skipped.
+ */
+export default function ImportWizard(): React.JSX.Element;

package/dist/apps/shared/components/ImportWizard.js

@@ -0,0 +1,105 @@
+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 { deleteImport, errorMessage, listImports, listLists, startImport, uploadImport, } from "../crmApi.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+/** How often the import list is refreshed while an import is queued or running, in milliseconds. */
+export const IMPORT_POLL_MS = 3000;
+/** A readable name for an import target. */
+function targetLabel(target) {
+    return target.startsWith("properties.") ? `${target.slice("properties.".length)} (custom)` : target === "company" ? "company name" : target;
+}
+/**
+ * Imports contacts or companies from a CSV file in two steps - pick the file and what it holds, then check which column goes where
+ * (the server suggests a mapping) - and lists the workspace's imports with their progress and the rows they skipped.
+ */
+export default function ImportWizard() {
+    const { workspace } = useCrm();
+    const [objectType, setObjectType] = useState("contact");
+    const [file, setFile] = useState(null);
+    const [upload, setUpload] = useState(null);
+    const [mapping, setMapping] = useState([]);
+    const [updateExisting, setUpdateExisting] = useState(true);
+    const [tags, setTags] = useState("");
+    const [lists, setLists] = useState([]);
+    const [listUid, setListUid] = useState("");
+    const [imports, setImports] = useState([]);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    async function loadImports() {
+        try {
+            setImports(await listImports(workspace.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the imports."));
+        }
+    }
+    useEffect(() => {
+        void loadImports();
+        listLists(workspace.uid)
+            .then(setLists)
+            .catch(() => setLists([]));
+    }, [workspace.uid]);
+    // Keeps the progress current while something is still to finish.
+    const pending = imports.some((entry) => entry.status === "queued" || entry.status === "running");
+    useEffect(() => {
+        if (!pending) {
+            return undefined;
+        }
+        const timer = setInterval(() => void loadImports(), IMPORT_POLL_MS);
+        return () => clearInterval(timer);
+    }, [pending, workspace.uid]);
+    async function send(event) {
+        event.preventDefault();
+        setBusy(true);
+        try {
+            const uploaded = await uploadImport(workspace.uid, objectType, file);
+            setUpload(uploaded);
+            setMapping(uploaded.import.mapping);
+            setError(null);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not read the file."));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function start(event) {
+        event.preventDefault();
+        setBusy(true);
+        try {
+            await startImport(workspace.uid, upload.import.uid, {
+                mapping,
+                updateExisting,
+                tags: tags
+                    .split(",")
+                    .map((tag) => tag.trim())
+                    .filter(Boolean),
+                ...(listUid && upload.import.objectType === "contact" ? { listUid } : {}),
+            });
+            setUpload(null);
+            setListUid("");
+            setFile(null);
+            setTags("");
+            setError(null);
+            await loadImports();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not start the import."));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { className: "max-w-4xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-4", children: "Import" }), error && _jsx(Alert, { children: error }), !upload ? (_jsxs("form", { onSubmit: send, className: "flex flex-col gap-3 mb-8", "aria-label": "Upload", children: [_jsx(FormField, { label: "The file holds", htmlFor: "import-type", children: _jsxs("select", { id: "import-type", className: `${INPUT_CLASS} !w-48`, value: objectType, onChange: (event) => setObjectType(event.target.value), children: [_jsx("option", { value: "contact", children: "Contacts" }), _jsx("option", { value: "company", children: "Companies" })] }) }), _jsx(FormField, { label: "CSV file", htmlFor: "import-file", children: _jsx("input", { id: "import-file", type: "file", accept: ".csv,text/csv", onChange: (event) => setFile(event.target.files?.[0] ?? null) }) }), _jsx(Button, { type: "submit", disabled: !file || busy, loading: busy, className: "!w-auto self-start", children: "Upload" })] })) : (_jsxs("form", { onSubmit: start, className: "flex flex-col gap-3 mb-8", "aria-label": "Map columns", children: [_jsxs("p", { className: "text-sm", children: [upload.import.fileName, ": ", upload.import.totalRows, " rows. Choose where each column goes."] }), _jsxs("table", { className: "text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "text-left py-1 px-2 border-b border-border", children: "Column" }), _jsx("th", { className: "text-left py-1 px-2 border-b border-border", children: "First value" }), _jsx("th", { className: "text-left py-1 px-2 border-b border-border", children: "Import as" })] }) }), _jsx("tbody", { children: mapping.map((entry, index) => (_jsxs("tr", { children: [_jsx("td", { className: "py-1 px-2 border-b border-border", children: entry.column }), _jsx("td", { className: "py-1 px-2 border-b border-border text-text-muted", children: upload.preview[0]?.[index] ?? "" }), _jsx("td", { className: "py-1 px-2 border-b border-border", children: _jsxs("select", { "aria-label": `Import ${entry.column} as`, className: `${INPUT_CLASS} !w-56`, value: entry.target ?? "", onChange: (event) => setMapping((current) => current.map((item, position) => (position === index ? { column: item.column, target: event.target.value || undefined } : item))), children: [_jsx("option", { value: "", children: "Don't import" }), upload.targets.map((target) => (_jsx("option", { value: target, children: targetLabel(target) }, target)))] }) })] }, entry.column))) })] }), _jsxs("label", { className: "text-sm flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: updateExisting, onChange: (event) => setUpdateExisting(event.target.checked) }), "Update records that are already here"] }), _jsx(FormField, { label: "Tag everything imported with (comma-separated)", htmlFor: "import-tags", children: _jsx("input", { id: "import-tags", className: `${INPUT_CLASS} !w-72`, value: tags, onChange: (event) => setTags(event.target.value) }) }), upload.import.objectType === "contact" && lists.length > 0 && (_jsx(FormField, { label: "Subscribe everyone imported to", htmlFor: "import-list", children: _jsxs("select", { id: "import-list", className: `${INPUT_CLASS} !w-72`, value: listUid, onChange: (event) => setListUid(event.target.value), children: [_jsx("option", { value: "", children: "No list" }), lists.map((list) => (_jsx("option", { value: list.uid, children: list.name }, list.uid)))] }) })), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "submit", disabled: busy, loading: busy, className: "!w-auto", children: "Start import" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setUpload(null), children: "Cancel" })] })] })), _jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted mb-2", children: "Recent imports" }), imports.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No imports yet." })) : (_jsx("ul", { className: "flex flex-col gap-3", children: imports.map((entry) => (_jsxs("li", { className: "text-sm border border-border rounded-sm p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "font-medium", children: [entry.fileName, " \u00B7 ", entry.objectType === "contact" ? "contacts" : "companies"] }), _jsx("span", { className: "text-text-muted", children: entry.status })] }), _jsxs("div", { className: "text-text-muted", children: [entry.processedRows, " of ", entry.totalRows, " rows: ", entry.createdCount, " created, ", entry.updatedCount, " updated, ", entry.skippedCount, " skipped"] }), entry.errors.length > 0 && (_jsxs("details", { className: "mt-1", children: [_jsx("summary", { className: "cursor-pointer", children: "Skipped rows" }), _jsx("ul", { className: "mt-1", children: entry.errors.map((rowError) => (_jsxs("li", { children: ["Row ", rowError.row, ": ", rowError.message] }, `${rowError.row}-${rowError.message}`))) })] })), entry.status !== "running" && (_jsx("button", { type: "button", className: "text-xs text-text-muted hover:text-danger mt-1", onClick: async () => {
+                                await deleteImport(workspace.uid, entry.uid);
+                                await loadImports();
+                            }, children: "Remove" }))] }, entry.uid))) }))] }));
+}

package/dist/apps/shared/components/Integrations.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+/**
+ * A workspace's webhook endpoints: adding one (an https address, and every event or chosen ones), switching it off and on, pinging
+ * it, rotating its signing secret, its recent deliveries, and deleting it. Only admins change them.
+ */
+export declare function Webhooks(): React.JSX.Element;
+/**
+ * A workspace's API keys, for its own systems to add contacts, change subscriptions and report events: making one (named, with
+ * its scopes - shown once), and revoking it. Only admins see and change them.
+ */
+export declare function ApiKeys(): React.JSX.Element;
+/** The workspace's integrations: webhooks, and - for admins - API keys. */
+export default function Integrations(): React.JSX.Element;

package/dist/apps/shared/components/Integrations.js

@@ -0,0 +1,164 @@
+import { jsxs as _jsxs, jsx as _jsx, 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 { API_KEY_SCOPES, WEBHOOK_EVENTS, createApiKey, createWebhook, deleteApiKey, deleteWebhook, errorMessage, listApiKeys, listWebhooks, rotateWebhookSecret, testWebhook, updateWebhook, webhookDeliveries, } from "../crmApi.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+import { when } from "./campaigns/campaignUi.js";
+const SCOPE_LABELS = {
+    contacts: "Add and update contacts",
+    subscriptions: "Subscribe and unsubscribe",
+    events: "Report events",
+};
+/** A secret or key shown once, to copy now. */
+function ShownOnce({ label, value, onDone }) {
+    return (_jsxs("div", { role: "alert", className: "border border-accent rounded-sm p-3 mb-3 text-sm", children: [_jsxs("p", { className: "mb-2", children: [label, " It won't be shown again."] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "flex-1 min-w-0 break-all bg-surface-alt rounded-sm px-2 py-1", children: value }), _jsx(Button, { variant: "text", type: "button", onClick: () => void navigator.clipboard?.writeText(value), children: "Copy" }), _jsx(Button, { variant: "text", type: "button", onClick: onDone, children: "Done" })] })] }));
+}
+/** The last deliveries to an endpoint. */
+function Deliveries({ workspaceUid, endpointUid }) {
+    const [deliveries, setDeliveries] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        webhookDeliveries(workspaceUid, endpointUid).then(setDeliveries, (err) => setError(errorMessage(err, "Could not load the deliveries.")));
+    }, [workspaceUid, endpointUid]);
+    if (error) {
+        return _jsx(Alert, { children: error });
+    }
+    if (!deliveries) {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    if (deliveries.length === 0) {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "Nothing has been sent to it yet." });
+    }
+    return (_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: "Event" }), _jsx("th", { className: "font-normal py-1", children: "Status" }), _jsx("th", { className: "font-normal py-1", children: "Attempts" }), _jsx("th", { className: "font-normal py-1", children: "Queued" })] }) }), _jsx("tbody", { children: deliveries.map((delivery) => (_jsxs("tr", { className: "border-t border-border align-top", children: [_jsx("td", { className: "py-1", children: delivery.eventType }), _jsxs("td", { className: "py-1", children: [delivery.status, delivery.responseStatus ? ` (${delivery.responseStatus})` : "", delivery.lastError && delivery.status !== "delivered" && _jsx("div", { className: "text-xs text-text-muted", children: delivery.lastError })] }), _jsx("td", { className: "py-1", children: delivery.attempts }), _jsx("td", { className: "py-1", children: when(delivery.dateCreated) })] }, delivery.uid))) })] }));
+}
+/**
+ * A workspace's webhook endpoints: adding one (an https address, and every event or chosen ones), switching it off and on, pinging
+ * it, rotating its signing secret, its recent deliveries, and deleting it. Only admins change them.
+ */
+export function Webhooks() {
+    const { workspace, canManage } = useCrm();
+    const [endpoints, setEndpoints] = useState([]);
+    const [error, setError] = useState(null);
+    const [secret, setSecret] = useState(null);
+    const [results, setResults] = useState({});
+    const [open, setOpen] = useState(null);
+    const [url, setUrl] = useState("");
+    const [description, setDescription] = useState("");
+    const [allEvents, setAllEvents] = useState(true);
+    const [events, setEvents] = useState([]);
+    async function load() {
+        try {
+            setEndpoints(await listWebhooks(workspace.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the webhooks."));
+        }
+    }
+    useEffect(() => {
+        void load();
+    }, [workspace.uid]);
+    async function run(action, failure) {
+        setError(null);
+        try {
+            await action();
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, failure));
+        }
+    }
+    async function add(event) {
+        event.preventDefault();
+        await run(async () => {
+            const created = await createWebhook(workspace.uid, { url: url.trim(), events: allEvents ? ["*"] : events, description: description.trim() || undefined });
+            setSecret(created.secret ?? null);
+            setUrl("");
+            setDescription("");
+            setEvents([]);
+            setAllEvents(true);
+        }, "Could not add the webhook.");
+    }
+    async function test(endpoint) {
+        setResults({ ...results, [endpoint.uid]: "Sending…" });
+        try {
+            const result = await testWebhook(workspace.uid, endpoint.uid);
+            const text = result.error !== undefined ? `Failed: ${result.error}` : result.status >= 200 && result.status < 300 ? `Delivered (${result.status})` : `The endpoint answered ${result.status}.`;
+            setResults((current) => ({ ...current, [endpoint.uid]: text }));
+        }
+        catch (err) {
+            setResults((current) => ({ ...current, [endpoint.uid]: errorMessage(err, "Could not send the test.") }));
+        }
+    }
+    return (_jsxs("section", { "aria-labelledby": "crm-webhooks", className: "mb-10", children: [_jsx("h2", { id: "crm-webhooks", className: "text-lg font-semibold mb-1", children: "Webhooks" }), _jsxs("p", { className: "text-sm text-text-muted mb-3", children: ["Posts what happens in the workspace to your systems as signed JSON (the ", _jsx("code", { children: "X-RapidMX-Signature" }), " header holds ", _jsx("code", { children: "t=" }), ", the time, and", " ", _jsx("code", { children: "v1=" }), ", the HMAC-SHA256 of ", _jsx("code", { children: "time.body" }), " with the endpoint's secret). Failed posts are retried; an endpoint that keeps failing is switched off."] }), error && _jsx(Alert, { children: error }), secret && _jsx(ShownOnce, { label: "The endpoint's signing secret:", value: secret, onDone: () => setSecret(null) }), endpoints.length === 0 && _jsx("p", { className: "text-sm text-text-muted mb-3", children: "No webhooks yet." }), _jsx("ul", { className: "list-none m-0 p-0 mb-4", children: endpoints.map((endpoint) => (_jsxs("li", { className: "border border-border rounded-sm p-3 mb-2", children: [_jsxs("div", { className: "flex items-start gap-2 flex-wrap", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-mono text-sm break-all", children: endpoint.url }), _jsxs("div", { className: "text-xs text-text-muted", children: [endpoint.events.includes("*") ? "Every event" : endpoint.events.join(", "), endpoint.description ? ` · ${endpoint.description}` : "", " \u00B7 secret ", endpoint.secretHint] }), _jsxs("div", { className: "text-xs mt-1", children: [endpoint.enabled ? _jsx("span", { children: "On" }) : _jsx("span", { className: "font-semibold", children: "Off" }), endpoint.failureCount > 0 && ` · ${endpoint.failureCount} failed in a row`, endpoint.lastError && _jsxs("span", { className: "text-text-muted", children: [" \u00B7 ", endpoint.lastError] })] }), results[endpoint.uid] && _jsx("div", { className: "text-xs mt-1", role: "status", children: results[endpoint.uid] })] }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx("button", { type: "button", className: "text-sm text-primary-dark hover:underline", onClick: () => setOpen(open === endpoint.uid ? null : endpoint.uid), "aria-expanded": open === endpoint.uid, children: "Deliveries" }), canManage && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "text-sm text-primary-dark hover:underline", onClick: () => void test(endpoint), children: "Test" }), _jsx("button", { type: "button", className: "text-sm text-primary-dark hover:underline", onClick: () => void run(() => updateWebhook(workspace.uid, endpoint.uid, { enabled: !endpoint.enabled }), "Could not change the webhook."), children: endpoint.enabled ? "Switch off" : "Switch on" }), _jsx("button", { type: "button", className: "text-sm text-primary-dark hover:underline", onClick: () => {
+                                                        if (window.confirm("Make a new signing secret? The current one stops working at once.")) {
+                                                            void run(async () => setSecret((await rotateWebhookSecret(workspace.uid, endpoint.uid)).secret), "Could not make a new secret.");
+                                                        }
+                                                    }, children: "New secret" }), _jsx("button", { type: "button", className: "text-sm text-primary-dark hover:underline", onClick: () => {
+                                                        if (window.confirm(`Delete the webhook to ${endpoint.url}?`)) {
+                                                            void run(() => deleteWebhook(workspace.uid, endpoint.uid), "Could not delete the webhook.");
+                                                        }
+                                                    }, children: "Delete" })] }))] })] }), open === endpoint.uid && (_jsx("div", { className: "mt-3", children: _jsx(Deliveries, { workspaceUid: workspace.uid, endpointUid: endpoint.uid }) }))] }, endpoint.uid))) }), canManage && (_jsxs("form", { onSubmit: (event) => void add(event), className: "border border-border rounded-sm p-3", "aria-label": "Add a webhook", children: [_jsx("h3", { className: "text-sm font-semibold mb-2", children: "Add a webhook" }), _jsx(FormField, { label: "Address (https)", htmlFor: "crm-webhook-url", children: _jsx("input", { id: "crm-webhook-url", className: INPUT_CLASS, type: "url", required: true, value: url, onChange: (event) => setUrl(event.target.value), placeholder: "https://example.com/hooks/crm" }) }), _jsx(FormField, { label: "Description", htmlFor: "crm-webhook-description", children: _jsx("input", { id: "crm-webhook-description", className: INPUT_CLASS, value: description, onChange: (event) => setDescription(event.target.value) }) }), _jsxs("label", { className: "text-sm flex items-center gap-2 mb-2", children: [_jsx("input", { type: "checkbox", checked: allEvents, onChange: (event) => setAllEvents(event.target.checked) }), "Every event"] }), !allEvents && (_jsxs("fieldset", { className: "grid grid-cols-1 sm:grid-cols-2 gap-1 mb-2 text-sm", children: [_jsx("legend", { className: "sr-only", children: "Events" }), WEBHOOK_EVENTS.map((type) => (_jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: events.includes(type), onChange: (event) => setEvents(event.target.checked ? [...events, type] : events.filter((entry) => entry !== type)) }), _jsx("code", { children: type })] }, type)))] })), _jsx(Button, { type: "submit", className: "!w-auto", disabled: !url.trim() || (!allEvents && events.length === 0), children: "Add webhook" })] }))] }));
+}
+/**
+ * A workspace's API keys, for its own systems to add contacts, change subscriptions and report events: making one (named, with
+ * its scopes - shown once), and revoking it. Only admins see and change them.
+ */
+export function ApiKeys() {
+    const { workspace } = useCrm();
+    const [keys, setKeys] = useState([]);
+    const [error, setError] = useState(null);
+    const [issued, setIssued] = useState(null);
+    const [name, setName] = useState("");
+    const [scopes, setScopes] = useState([...API_KEY_SCOPES]);
+    async function load() {
+        try {
+            setKeys(await listApiKeys(workspace.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the API keys."));
+        }
+    }
+    useEffect(() => {
+        void load();
+    }, [workspace.uid]);
+    async function add(event) {
+        event.preventDefault();
+        setError(null);
+        try {
+            const created = await createApiKey(workspace.uid, { name: name.trim(), scopes });
+            setIssued(created.key ?? null);
+            setName("");
+            setScopes([...API_KEY_SCOPES]);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not make the API key."));
+        }
+    }
+    async function revoke(key) {
+        if (!window.confirm(`Revoke the key "${key.name}"? Anything using it stops working.`)) {
+            return;
+        }
+        setError(null);
+        try {
+            await deleteApiKey(workspace.uid, key.uid);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not revoke the API key."));
+        }
+    }
+    const base = `${window.location.origin}/api/mail/crm/integrations/${workspace.uid}`;
+    return (_jsxs("section", { "aria-labelledby": "crm-api-keys", children: [_jsx("h2", { id: "crm-api-keys", className: "text-lg font-semibold mb-1", children: "API keys" }), _jsxs("p", { className: "text-sm text-text-muted mb-3", children: ["Your systems call ", _jsx("code", { className: "break-all", children: base }), " with ", _jsx("code", { children: "Authorization: Bearer <key>" }), ": ", _jsx("code", { children: "POST /contacts" }), ",", " ", _jsx("code", { children: "POST /subscribe" }), ", ", _jsx("code", { children: "POST /unsubscribe" }), ", ", _jsx("code", { children: "POST /events" }), " (which can start automations) and ", _jsx("code", { children: "GET /lists" }), "."] }), error && _jsx(Alert, { children: error }), issued && _jsx(ShownOnce, { label: "The new API key:", value: issued, onDone: () => setIssued(null) }), keys.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted mb-3", children: "No API keys yet." })) : (_jsxs("table", { className: "w-full text-sm mb-4", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-left text-text-muted", children: [_jsx("th", { className: "font-normal py-1", children: "Name" }), _jsx("th", { className: "font-normal py-1", children: "Key" }), _jsx("th", { className: "font-normal py-1", children: "Can" }), _jsx("th", { className: "font-normal py-1", children: "Last used" }), _jsx("th", {})] }) }), _jsx("tbody", { children: keys.map((key) => (_jsxs("tr", { className: "border-t border-border align-top", children: [_jsx("td", { className: "py-1", children: key.name }), _jsxs("td", { className: "py-1 font-mono", children: [key.prefix, "\u2026"] }), _jsx("td", { className: "py-1", children: key.scopes.map((scope) => SCOPE_LABELS[scope]).join(", ") }), _jsx("td", { className: "py-1", children: when(key.lastUsedAt) }), _jsx("td", { className: "py-1 text-right", children: _jsx("button", { type: "button", className: "text-sm text-primary-dark hover:underline", onClick: () => void revoke(key), children: "Revoke" }) })] }, key.uid))) })] })), _jsxs("form", { onSubmit: (event) => void add(event), className: "border border-border rounded-sm p-3", "aria-label": "Make an API key", children: [_jsx("h3", { className: "text-sm font-semibold mb-2", children: "Make an API key" }), _jsx(FormField, { label: "Name", htmlFor: "crm-api-key-name", children: _jsx("input", { id: "crm-api-key-name", className: INPUT_CLASS, required: true, value: name, onChange: (event) => setName(event.target.value), placeholder: "Website signup" }) }), _jsxs("fieldset", { className: "mb-2 text-sm", children: [_jsx("legend", { className: "mb-1", children: "It can" }), API_KEY_SCOPES.map((scope) => (_jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: scopes.includes(scope), onChange: (event) => setScopes(event.target.checked ? [...scopes, scope] : scopes.filter((entry) => entry !== scope)) }), SCOPE_LABELS[scope]] }, scope)))] }), _jsx(Button, { type: "submit", className: "!w-auto", disabled: !name.trim() || scopes.length === 0, children: "Make key" })] })] }));
+}
+/** The workspace's integrations: webhooks, and - for admins - API keys. */
+export default function Integrations() {
+    const { canManage } = useCrm();
+    return (_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold mb-4", children: "Integrations" }), _jsx(Webhooks, {}), canManage ? _jsx(ApiKeys, {}) : _jsx("p", { className: "text-sm text-text-muted", children: "Only the workspace's admins can see and make API keys." })] }));
+}

package/dist/apps/shared/components/ListManager.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * A workspace's mailing lists: how many are subscribed and waiting to confirm, a link to each list's subscribers, and (for admins)
+ * creating, changing and deleting lists.
+ */
+export default function ListManager(): React.JSX.Element;

package/dist/apps/shared/components/ListManager.js

@@ -0,0 +1,95 @@
+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 { createList, deleteList, errorMessage, listLists, listSenders, updateList } from "../crmApi.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+const EMPTY = { name: "", publicName: "", description: "", publicDescription: "", doubleOptIn: false, visible: true, senderUid: "" };
+function draftOf(list) {
+    return {
+        name: list.name,
+        publicName: list.publicName,
+        description: list.description ?? "",
+        publicDescription: list.publicDescription ?? "",
+        doubleOptIn: list.doubleOptIn,
+        visible: list.visible,
+        senderUid: list.senderUid ?? "",
+    };
+}
+/**
+ * A workspace's mailing lists: how many are subscribed and waiting to confirm, a link to each list's subscribers, and (for admins)
+ * creating, changing and deleting lists.
+ */
+export default function ListManager() {
+    const { workspace, canManage, href } = useCrm();
+    const [lists, setLists] = useState([]);
+    const [senders, setSenders] = useState([]);
+    const [editing, setEditing] = useState(null);
+    const [error, setError] = useState(null);
+    async function load() {
+        try {
+            setLists(await listLists(workspace.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the lists."));
+        }
+    }
+    useEffect(() => {
+        void load();
+        listSenders(workspace.uid)
+            .then(setSenders)
+            .catch(() => setSenders([]));
+    }, [workspace.uid]);
+    async function remove(list) {
+        if (!window.confirm(`Delete the list "${list.name}"? Its ${list.subscribedCount} subscriptions go with it.`)) {
+            return;
+        }
+        try {
+            await deleteList(workspace.uid, list.uid);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not delete the list."));
+        }
+    }
+    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: "Lists" }), canManage && (_jsx(Button, { type: "button", className: "!w-auto", onClick: () => setEditing("new"), children: "+ New list" }))] }), error && _jsx(Alert, { children: error }), lists.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No lists yet." })) : (_jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Subscribed", "Awaiting confirmation", "Double opt-in", ""].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: lists.map((list) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2 px-2.5 border-b border-border", children: [_jsx("span", { className: "font-medium", children: list.name }), !list.visible && _jsx("span", { className: "ml-2 text-xs text-text-muted", children: "hidden from subscribers" })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: list.subscribedCount }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: list.pendingCount }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: list.doubleOptIn ? "Yes" : "No" }), _jsxs("td", { className: "py-2 px-2.5 border-b border-border text-right whitespace-nowrap", children: [_jsx("a", { className: "text-primary-dark hover:underline font-medium mr-4", href: href(`/crm?list=${encodeURIComponent(list.uid)}`), children: "Subscribers" }), canManage && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "text-primary-dark hover:underline font-medium mr-4", onClick: () => setEditing(list), children: "Edit" }), _jsx("button", { type: "button", className: "text-danger hover:underline", onClick: () => void remove(list), children: "Delete" })] }))] })] }, list.uid))) })] })), editing && (_jsx(ListForm, { list: editing === "new" ? undefined : editing, senders: senders, onClose: () => setEditing(null), onSaved: async () => {
+                    setEditing(null);
+                    await load();
+                } }))] }));
+}
+/** The form for a new list, or for changing `list`. */
+function ListForm({ list, senders, onClose, onSaved }) {
+    const { workspace } = useCrm();
+    const [draft, setDraft] = useState(list ? draftOf(list) : EMPTY);
+    const [error, setError] = useState(null);
+    const set = (change) => setDraft((current) => ({ ...current, ...change }));
+    async function submit(event) {
+        event.preventDefault();
+        const body = { ...draft, senderUid: draft.senderUid || null, publicName: draft.publicName || null };
+        try {
+            if (list) {
+                await updateList(workspace.uid, list.uid, body);
+            }
+            else {
+                await createList(workspace.uid, body);
+            }
+            await onSaved();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not save the list."));
+        }
+    }
+    const texts = [
+        ["name", "Name"],
+        ["publicName", "Name subscribers see (optional)"],
+        ["description", "Description"],
+        ["publicDescription", "Description subscribers see"],
+    ];
+    return (_jsx(Modal, { open: true, onClose: onClose, title: list ? "Edit list" : "New list", children: _jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3", children: [error && _jsx(Alert, { children: error }), texts.map(([field, label]) => (_jsx(FormField, { label: label, htmlFor: `list-${field}`, children: _jsx("input", { id: `list-${field}`, className: INPUT_CLASS, value: draft[field], onChange: (event) => set({ [field]: event.target.value }) }) }, field))), _jsxs("label", { className: "text-sm flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: draft.visible, onChange: (event) => set({ visible: event.target.checked }) }), "Offer it in the preference center"] }), _jsxs("label", { className: "text-sm flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: draft.doubleOptIn, onChange: (event) => set({ doubleOptIn: event.target.checked }) }), "Ask signups to confirm by email (double opt-in)"] }), _jsx(FormField, { label: "Confirmation emails come from", htmlFor: "list-sender", children: _jsxs("select", { id: "list-sender", className: INPUT_CLASS, value: draft.senderUid, onChange: (event) => set({ senderUid: event.target.value }), children: [_jsx("option", { value: "", children: "Nobody" }), senders.map((sender) => (_jsxs("option", { value: sender.uid, children: [sender.fromName, " <", sender.fromAddress, ">"] }, sender.uid)))] }) }), _jsx(Button, { type: "submit", className: "!w-auto self-end", children: "Save" })] }) }));
+}

package/dist/apps/shared/components/RecordDetail.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { CrmObjectType, Note, Task, TimelineEvent, SubjectType } from "../crmApi.js";
+/**
+ * One contact or company: its fields and custom properties (editable by members who can write), its tags and owner, its notes and
+ * tasks, and its activity timeline.
+ */
+export default function RecordDetail({ objectType, uid }: {
+    objectType: CrmObjectType;
+    uid: string;
+}): React.JSX.Element;
+/** The record's notes, and a box for a new one. */
+/** A record's activity timeline, newest first. */
+export declare function Activity({ timeline }: {
+    timeline: TimelineEvent[];
+}): React.JSX.Element;
+/** A record's notes, and adding and deleting them. */
+export declare function Notes({ objectType, uid, notes, onChange }: {
+    objectType: SubjectType;
+    uid: string;
+    notes: Note[];
+    onChange: () => Promise<void>;
+}): React.JSX.Element;
+/** The record's tasks: tick one off, or add one. */
+/** A record's tasks, and adding and completing them. */
+export declare function Tasks({ objectType, uid, tasks, onChange }: {
+    objectType: SubjectType;
+    uid: string;
+    tasks: Task[];
+    onChange: () => Promise<void>;
+}): React.JSX.Element;