@rapidmx/crm-plugin 0.1.0

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { FieldInfo } from "../fields.js";
+/**
+ * A workspace's segments: how many contacts each holds and when that was worked out, a link to its members, and (for editors)
+ * creating, changing, refreshing and deleting them. A dynamic segment keeps up with its filter by itself; a static one is a snapshot,
+ * refreshed only by hand.
+ */
+export default function SegmentManager(): React.JSX.Element;
+/** The fields a contact filter may use: every contact field - but segments, unless `withSegments` (a segment's own filter can't). */
+export declare function useSegmentFields(withSegments?: boolean): FieldInfo[];

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

@@ -0,0 +1,119 @@
+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, useMemo, 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 { createSegment, deleteSegment, errorMessage, listLists, listProperties, listSegments, previewSegment, refreshSegment, updateSegment, } from "../crmApi.js";
+import { recordFields } from "../fields.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+import FilterBuilder, { buildFilter, draftOf } from "./FilterBuilder.js";
+/**
+ * A workspace's segments: how many contacts each holds and when that was worked out, a link to its members, and (for editors)
+ * creating, changing, refreshing and deleting them. A dynamic segment keeps up with its filter by itself; a static one is a snapshot,
+ * refreshed only by hand.
+ */
+export default function SegmentManager() {
+    const { workspace, canWrite, href } = useCrm();
+    const [segments, setSegments] = useState([]);
+    const [editing, setEditing] = useState(null);
+    const [error, setError] = useState(null);
+    async function load() {
+        try {
+            setSegments(await listSegments(workspace.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the segments."));
+        }
+    }
+    useEffect(() => {
+        void load();
+    }, [workspace.uid]);
+    async function refresh(segment) {
+        try {
+            const refreshed = await refreshSegment(workspace.uid, segment.uid);
+            setSegments(segments.map((entry) => (entry.uid === refreshed.uid ? refreshed : entry)));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not refresh the segment."));
+        }
+    }
+    async function remove(segment) {
+        if (!window.confirm(`Delete the segment "${segment.name}"? Its contacts stay.`)) {
+            return;
+        }
+        try {
+            await deleteSegment(workspace.uid, segment.uid);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not delete the segment."));
+        }
+    }
+    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: "Segments" }), canWrite && (_jsx(Button, { type: "button", className: "!w-auto", onClick: () => setEditing("new"), children: "+ New segment" }))] }), error && _jsx(Alert, { children: error }), segments.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No segments yet. A segment groups the contacts matching a filter, to find them again or email them." })) : (_jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Kind", "Contacts", "Worked out", ""].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: segments.map((segment) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2 px-2.5 border-b border-border", children: [_jsx("span", { className: "font-medium", children: segment.name }), segment.description && _jsx("div", { className: "text-xs text-text-muted", children: segment.description })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: segment.kind === "dynamic" ? "Dynamic" : "Static" }), _jsxs("td", { className: "py-2 px-2.5 border-b border-border", children: [segment.memberCount.toLocaleString(), segment.capped && _jsx("span", { className: "ml-1 text-xs text-warning", children: "(limit reached)" })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border whitespace-nowrap", children: segment.refreshedAt ? new Date(segment.refreshedAt).toLocaleString() : "–" }), _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?segment=${encodeURIComponent(segment.uid)}`), children: "Contacts" }), canWrite && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "text-primary-dark hover:underline font-medium mr-4", onClick: () => void refresh(segment), children: "Refresh" }), _jsx("button", { type: "button", className: "text-primary-dark hover:underline font-medium mr-4", onClick: () => setEditing(segment), children: "Edit" }), _jsx("button", { type: "button", className: "text-danger hover:underline", onClick: () => void remove(segment), children: "Delete" })] }))] })] }, segment.uid))) })] })), editing && (_jsx(SegmentEditor, { segment: editing === "new" ? undefined : editing, onClose: () => setEditing(null), onSaved: () => {
+                    setEditing(null);
+                    void load();
+                } }))] }));
+}
+/** The fields a contact filter may use: every contact field - but segments, unless `withSegments` (a segment's own filter can't). */
+export function useSegmentFields(withSegments = false) {
+    const { workspace } = useCrm();
+    const [definitions, setDefinitions] = useState([]);
+    const [lists, setLists] = useState([]);
+    const [segments, setSegments] = useState([]);
+    useEffect(() => {
+        listProperties(workspace.uid, "contact").then(setDefinitions, () => setDefinitions([]));
+        listLists(workspace.uid).then(setLists, () => setLists([]));
+        if (withSegments) {
+            listSegments(workspace.uid).then(setSegments, () => setSegments([]));
+        }
+    }, [workspace.uid]);
+    return useMemo(() => recordFields("contact", definitions, lists, withSegments ? segments : null), [definitions, lists, segments]);
+}
+/** Creates or changes a segment, counting the contacts its filter matches as it is edited. */
+function SegmentEditor({ segment, onClose, onSaved }) {
+    const { workspace } = useCrm();
+    const fields = useSegmentFields();
+    const [name, setName] = useState(segment?.name ?? "");
+    const [description, setDescription] = useState(segment?.description ?? "");
+    const [kind, setKind] = useState(segment?.kind ?? "dynamic");
+    const [draft, setDraft] = useState(() => draftOf(segment?.filter));
+    const [preview, setPreview] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const filter = buildFilter(draft, fields);
+    const filterKey = JSON.stringify(filter ?? null);
+    useEffect(() => {
+        if (!filter) {
+            setPreview(null);
+            return;
+        }
+        let current = true;
+        previewSegment(workspace.uid, filter).then((result) => current && setPreview(result), () => current && setPreview(null));
+        return () => {
+            current = false;
+        };
+    }, [filterKey]);
+    async function submit(event) {
+        event.preventDefault();
+        setSaving(true);
+        const input = { name: name.trim(), description: description.trim() || null, kind, filter };
+        try {
+            await (segment ? updateSegment(workspace.uid, segment.uid, input) : createSegment(workspace.uid, input));
+            onSaved();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not save the segment."));
+            setSaving(false);
+        }
+    }
+    return (_jsx(Modal, { open: true, onClose: onClose, title: segment ? "Edit segment" : "New segment", children: _jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3 min-w-[36rem]", children: [error && _jsx(Alert, { children: error }), _jsx(FormField, { label: "Name", htmlFor: "crm-segment-name", children: _jsx("input", { id: "crm-segment-name", className: INPUT_CLASS, value: name, onChange: (event) => setName(event.target.value), required: true }) }), _jsx(FormField, { label: "Description", htmlFor: "crm-segment-description", children: _jsx("input", { id: "crm-segment-description", className: INPUT_CLASS, value: description, onChange: (event) => setDescription(event.target.value) }) }), _jsxs("fieldset", { className: "flex gap-4 text-sm", children: [_jsx("legend", { className: "text-xs font-semibold text-text-muted mb-1", children: "Kind" }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "radio", name: "crm-segment-kind", checked: kind === "dynamic", onChange: () => setKind("dynamic") }), "Dynamic - keeps up with the filter"] }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "radio", name: "crm-segment-kind", checked: kind === "static", onChange: () => setKind("static") }), "Static - the contacts matching now"] })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-text-muted mb-1", children: "Contacts matching" }), _jsx(FilterBuilder, { fields: fields, draft: draft, onChange: setDraft })] }), _jsx("div", { role: "status", className: "text-sm text-text-muted", children: !filter
+                        ? "Add a condition to choose the contacts."
+                        : preview
+                            ? `${preview.capped ? "More than " : ""}${preview.count.toLocaleString()} ${preview.count === 1 ? "contact matches" : "contacts match"} now${preview.contacts.length > 0 ? `, such as ${preview.contacts.map((entry) => entry.email).join(", ")}` : ""}.`
+                            : "Counting…" }), _jsx(Button, { type: "submit", loading: saving, disabled: saving || !name.trim() || !filter, className: "!w-auto self-start", children: segment ? "Save" : "Create" })] }) }));
+}

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

@@ -0,0 +1,3 @@
+import React from "react";
+/** The workspace's tasks: open or done, anyone's or one member's, with a form for a new one. A task about a record links to it. */
+export default function TaskList(): React.JSX.Element;

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

@@ -0,0 +1,62 @@
+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 { createTask, deleteTask, errorMessage, listMembers, listTasks, updateTask } from "../crmApi.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+/** The workspace's tasks: open or done, anyone's or one member's, with a form for a new one. A task about a record links to it. */
+export default function TaskList() {
+    const { workspace, canWrite, href } = useCrm();
+    const [status, setStatus] = useState("open");
+    const [assignee, setAssignee] = useState("");
+    const [tasks, setTasks] = useState([]);
+    const [members, setMembers] = useState([]);
+    const [title, setTitle] = useState("");
+    const [priority, setPriority] = useState("normal");
+    const [dueAt, setDueAt] = useState("");
+    const [error, setError] = useState(null);
+    async function load() {
+        try {
+            setTasks(await listTasks(workspace.uid, { status, assigneeUserUid: assignee || undefined }));
+            setError(null);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the tasks."));
+        }
+    }
+    useEffect(() => {
+        listMembers(workspace.uid)
+            .then(setMembers)
+            .catch(() => setMembers([]));
+    }, [workspace.uid]);
+    useEffect(() => {
+        void load();
+    }, [workspace.uid, status, assignee]);
+    async function add(event) {
+        event.preventDefault();
+        try {
+            await createTask(workspace.uid, { title, priority, ...(dueAt ? { dueAt: new Date(dueAt).toISOString() } : {}), ...(assignee ? { assigneeUserUid: assignee } : {}) });
+            setTitle("");
+            setDueAt("");
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not add the task."));
+        }
+    }
+    const memberName = (userUid) => {
+        const member = members.find((entry) => entry.userUid === userUid);
+        return member?.displayName || member?.address || userUid || "";
+    };
+    return (_jsxs("div", { className: "max-w-4xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-4", children: "Tasks" }), _jsxs("div", { className: "flex flex-wrap gap-2 mb-4", children: [_jsxs("select", { "aria-label": "Status", className: `${INPUT_CLASS} !w-36`, value: status, onChange: (event) => setStatus(event.target.value), children: [_jsx("option", { value: "open", children: "Open" }), _jsx("option", { value: "done", children: "Done" })] }), _jsxs("select", { "aria-label": "Assignee", className: `${INPUT_CLASS} !w-56`, value: assignee, onChange: (event) => setAssignee(event.target.value), children: [_jsx("option", { value: "", children: "Everyone" }), members.map((member) => (_jsx("option", { value: member.userUid, children: memberName(member.userUid) }, member.userUid)))] })] }), error && _jsx(Alert, { children: error }), canWrite && (_jsxs("form", { onSubmit: add, className: "flex flex-wrap gap-2 mb-4", "aria-label": "New task", children: [_jsx("input", { "aria-label": "Title", placeholder: "New task", className: `${INPUT_CLASS} !w-72`, value: title, onChange: (event) => setTitle(event.target.value) }), _jsxs("select", { "aria-label": "Priority", className: `${INPUT_CLASS} !w-32`, value: priority, onChange: (event) => setPriority(event.target.value), children: [_jsx("option", { value: "low", children: "Low" }), _jsx("option", { value: "normal", children: "Normal" }), _jsx("option", { value: "high", children: "High" })] }), _jsx("input", { "aria-label": "Due", type: "date", className: `${INPUT_CLASS} !w-40`, value: dueAt, onChange: (event) => setDueAt(event.target.value) }), _jsx(Button, { type: "submit", disabled: title.trim() === "", className: "!w-auto", children: "Add task" })] })), tasks.length === 0 ? (_jsxs("p", { className: "text-sm text-text-muted", children: ["No ", status, " tasks."] })) : (_jsx("ul", { className: "flex flex-col divide-y divide-border border-y border-border", children: tasks.map((task) => (_jsxs("li", { className: "flex items-center gap-3 py-2 text-sm", children: [_jsx("input", { type: "checkbox", "aria-label": `Done: ${task.title}`, checked: task.status === "done", disabled: !canWrite, onChange: async () => {
+                                await updateTask(workspace.uid, task.uid, { status: task.status === "done" ? "open" : "done" });
+                                await load();
+                            } }), _jsxs("span", { className: "flex-1", children: [task.title, task.priority === "high" && _jsx("span", { className: "ml-2 text-xs text-danger font-semibold", children: "High" }), task.subjectUid && (_jsxs("a", { className: "ml-2 text-xs text-primary-dark hover:underline", href: href(`/crm/${task.subjectType === "company" ? "companies" : "contacts"}/${encodeURIComponent(task.subjectUid)}`), children: ["Open ", task.subjectType] }))] }), _jsx("span", { className: "text-xs text-text-muted", children: memberName(task.assigneeUserUid) }), _jsx("span", { className: "text-xs text-text-muted w-24 text-right", children: task.dueAt ? new Date(task.dueAt).toLocaleDateString() : "" }), canWrite && (_jsx("button", { type: "button", "aria-label": `Delete ${task.title}`, className: "text-xs text-text-muted hover:text-danger", onClick: async () => {
+                                await deleteTask(workspace.uid, task.uid);
+                                await load();
+                            }, children: "Delete" }))] }, task.uid))) }))] }));
+}

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

@@ -0,0 +1,3 @@
+import React from "react";
+/** A workspace's email templates, by name: opening one in the designer, creating, duplicating and deleting them. */
+export default function TemplateList(): React.JSX.Element;

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

@@ -0,0 +1,81 @@
+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 { createTemplate, deleteTemplate, duplicateTemplate, errorMessage, searchTemplates } from "../crmApi.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+const PAGE_SIZE = 100;
+/** A workspace's email templates, by name: opening one in the designer, creating, duplicating and deleting them. */
+export default function TemplateList() {
+    const { workspace, canWrite, href } = useCrm();
+    const [templates, setTemplates] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState(0);
+    const [filter, setFilter] = useState("");
+    const [creating, setCreating] = useState(false);
+    const [error, setError] = useState(null);
+    async function load(upTo) {
+        try {
+            const pages = await Promise.all(Array.from({ length: upTo + 1 }, (_unused, index) => searchTemplates(workspace.uid, index, PAGE_SIZE)));
+            setTemplates(pages.flatMap((result) => result.items));
+            setTotal(pages[0].total);
+            setPage(upTo);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the templates."));
+        }
+    }
+    useEffect(() => {
+        void load(0);
+    }, [workspace.uid]);
+    const open = (template) => window.location.assign(href(`/crm/templates/${encodeURIComponent(template.uid)}`));
+    async function duplicate(template) {
+        try {
+            open(await duplicateTemplate(workspace.uid, template.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not duplicate the template."));
+        }
+    }
+    async function remove(template) {
+        if (!window.confirm(`Delete the template "${template.name}"?`)) {
+            return;
+        }
+        try {
+            await deleteTemplate(workspace.uid, template.uid);
+            await load(page);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not delete the template."));
+        }
+    }
+    const needle = filter.trim().toLowerCase();
+    const shown = templates.filter((template) => !needle || [template.name, template.subject, template.category ?? ""].some((text) => text.toLowerCase().includes(needle)));
+    return (_jsxs("div", { className: "max-w-5xl", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 mb-4", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: "Templates" }), _jsx("input", { "aria-label": "Filter templates", placeholder: "Filter\u2026", className: `${INPUT_CLASS} !w-56 ml-auto`, value: filter, onChange: (event) => setFilter(event.target.value) }), canWrite && (_jsx(Button, { type: "button", className: "!w-auto", onClick: () => setCreating(true), children: "+ New template" }))] }), error && _jsx(Alert, { children: error }), shown.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: templates.length === 0 ? "No templates yet." : "No templates match." })) : (_jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Subject", "Category", "Changed", ""].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: shown.map((template) => (_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/templates/${encodeURIComponent(template.uid)}`), children: template.name }), !template.hasUnsubscribeLink && (_jsx("span", { className: "ml-2 text-xs text-warning", title: "Campaigns need a footer or an unsubscribe link.", children: "no unsubscribe link" }))] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border truncate max-w-xs", children: template.subject }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: template.category ?? "" }), _jsx("td", { className: "py-2 px-2.5 border-b border-border whitespace-nowrap", children: new Date(template.dateModified).toLocaleDateString() }), _jsx("td", { className: "py-2 px-2.5 border-b border-border text-right whitespace-nowrap", children: canWrite && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "text-primary-dark hover:underline font-medium mr-4", onClick: () => void duplicate(template), children: "Duplicate" }), _jsx("button", { type: "button", className: "text-danger hover:underline", onClick: () => void remove(template), children: "Delete" })] })) })] }, template.uid))) })] })), templates.length < total && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-3", onClick: () => void load(page + 1), children: "Show more" })), _jsx(NewTemplateModal, { open: creating, onClose: () => setCreating(false), onCreated: open })] }));
+}
+/** Asks for a new template's name and subject, and creates it from the starter design. */
+function NewTemplateModal({ open, onClose, onCreated }) {
+    const { workspace } = useCrm();
+    const [name, setName] = useState("");
+    const [subject, setSubject] = useState("");
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    async function submit(event) {
+        event.preventDefault();
+        setSaving(true);
+        try {
+            onCreated(await createTemplate(workspace.uid, { name: name.trim(), subject: subject.trim() }));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not create the template."));
+            setSaving(false);
+        }
+    }
+    return (_jsx(Modal, { open: open, onClose: onClose, title: "New template", children: _jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3 min-w-[20rem]", children: [error && _jsx(Alert, { children: error }), _jsx(FormField, { label: "Name", htmlFor: "crm-template-name", children: _jsx("input", { id: "crm-template-name", className: INPUT_CLASS, value: name, onChange: (event) => setName(event.target.value), required: true }) }), _jsx(FormField, { label: "Subject", htmlFor: "crm-template-new-subject", children: _jsx("input", { id: "crm-template-new-subject", className: INPUT_CLASS, value: subject, onChange: (event) => setSubject(event.target.value), required: true }) }), _jsx(Button, { type: "submit", loading: saving, disabled: saving || !name.trim() || !subject.trim(), className: "!w-auto self-start", children: "Create and design" })] }) }));
+}

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

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * A workspace's settings: its details, members and their roles, the addresses it sends as, and its custom properties - changeable by
+ * its admins and owners (everyone else sees them read-only) - and, for owners, deleting it.
+ */
+export default function WorkspaceSettings(): React.JSX.Element;

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

@@ -0,0 +1,239 @@
+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 { addMember, addSender, createProperty, createSuppression, deleteSuppression, listSuppressions, deleteProperty, deleteWorkspace, errorMessage, listMembers, listProperties, listSenders, removeMember, removeSender, updateMember, updateWorkspace, updateSender, } from "../crmApi.js";
+import { INPUT_CLASS, WORKSPACE_STORAGE_KEY, useCrm } from "./CrmShell.js";
+const ROLES = [
+    { value: "owner", label: "Owner" },
+    { value: "admin", label: "Admin" },
+    { value: "editor", label: "Editor" },
+    { value: "viewer", label: "Viewer" },
+];
+const PROPERTY_TYPES = [
+    { value: "text", label: "Text" },
+    { value: "number", label: "Number" },
+    { value: "date", label: "Date" },
+    { value: "boolean", label: "Yes / no" },
+    { value: "select", label: "Dropdown" },
+    { value: "multi_select", label: "Multiple choice" },
+];
+/**
+ * A workspace's settings: its details, members and their roles, the addresses it sends as, and its custom properties - changeable by
+ * its admins and owners (everyone else sees them read-only) - and, for owners, deleting it.
+ */
+export default function WorkspaceSettings() {
+    const { workspace, canManage } = useCrm();
+    return (_jsxs("div", { className: "max-w-3xl flex flex-col gap-10", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: "Settings" }), _jsx(Details, {}), _jsx(Members, {}), _jsx(Senders, {}), _jsx(Properties, {}), _jsx(Suppressions, {}), workspace.role === "owner" && canManage && _jsx(DangerZone, {})] }));
+}
+function Details() {
+    const { workspace, canManage, reload } = useCrm();
+    const [values, setValues] = useState({
+        name: workspace.name,
+        description: workspace.description ?? "",
+        timezone: workspace.timezone,
+        postalAddress: workspace.postalAddress ?? "",
+        website: workspace.website ?? "",
+    });
+    const [message, setMessage] = useState(null);
+    const [error, setError] = useState(null);
+    async function save(event) {
+        event.preventDefault();
+        try {
+            await updateWorkspace(workspace.uid, values);
+            setMessage("Saved.");
+            setError(null);
+            await reload();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not save the workspace."));
+        }
+    }
+    const fields = [
+        ["name", "Name"],
+        ["description", "Description"],
+        ["timezone", "Time zone"],
+        ["postalAddress", "Postal address (shown in marketing email footers)"],
+        ["website", "Website"],
+    ];
+    return (_jsxs("form", { onSubmit: save, className: "flex flex-col gap-3", "aria-label": "Workspace details", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted", children: "Workspace" }), error && _jsx(Alert, { children: error }), message && _jsx("p", { className: "text-sm text-success", children: message }), fields.map(([field, label]) => (_jsx(FormField, { label: label, htmlFor: `workspace-${field}`, children: _jsx("input", { id: `workspace-${field}`, className: INPUT_CLASS, value: values[field], disabled: !canManage, onChange: (event) => setValues((current) => ({ ...current, [field]: event.target.value })) }) }, field))), canManage && (_jsx(Button, { type: "submit", className: "!w-auto self-start", children: "Save" }))] }));
+}
+function Members() {
+    const { workspace, canManage } = useCrm();
+    const [members, setMembers] = useState([]);
+    const [address, setAddress] = useState("");
+    const [role, setRole] = useState("editor");
+    const [error, setError] = useState(null);
+    async function load() {
+        setMembers(await listMembers(workspace.uid));
+    }
+    useEffect(() => {
+        load().catch((err) => setError(errorMessage(err, "Could not load the members.")));
+    }, [workspace.uid]);
+    async function act(action, failure) {
+        try {
+            await action();
+            setError(null);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, failure));
+        }
+    }
+    return (_jsxs("section", { "aria-label": "Members", className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted", children: "Members" }), error && _jsx(Alert, { children: error }), _jsx("ul", { className: "flex flex-col divide-y divide-border border-y border-border", children: members.map((member) => (_jsxs("li", { className: "flex items-center gap-3 py-2 text-sm", children: [_jsx("span", { className: "flex-1", children: member.displayName || member.address || member.userUid }), canManage ? (_jsx("select", { "aria-label": `Role of ${member.displayName || member.address || member.userUid}`, className: `${INPUT_CLASS} !w-32`, value: member.role, onChange: (event) => void act(() => updateMember(workspace.uid, member.userUid, event.target.value), "Could not change the role."), children: ROLES.map((entry) => (_jsx("option", { value: entry.value, children: entry.label }, entry.value))) })) : (_jsx("span", { className: "text-text-muted", children: member.role })), canManage && (_jsx("button", { type: "button", className: "text-xs text-text-muted hover:text-danger", onClick: () => void act(() => removeMember(workspace.uid, member.userUid), "Could not remove the member."), children: "Remove" }))] }, member.userUid))) }), canManage && (_jsxs("form", { className: "flex flex-wrap gap-2", "aria-label": "Add member", onSubmit: (event) => {
+                    event.preventDefault();
+                    void act(async () => {
+                        await addMember(workspace.uid, { address, role });
+                        setAddress("");
+                    }, "Could not add the member.");
+                }, children: [_jsx("input", { "aria-label": "Member address", placeholder: "colleague@example.com", className: `${INPUT_CLASS} !w-72`, value: address, onChange: (event) => setAddress(event.target.value) }), _jsx("select", { "aria-label": "New member role", className: `${INPUT_CLASS} !w-32`, value: role, onChange: (event) => setRole(event.target.value), children: ROLES.map((entry) => (_jsx("option", { value: entry.value, children: entry.label }, entry.value))) }), _jsx(Button, { type: "submit", variant: "secondary", disabled: address.trim() === "", className: "!w-auto", children: "Add member" })] }))] }));
+}
+function Senders() {
+    const { workspace, canManage } = useCrm();
+    const [senders, setSenders] = useState([]);
+    const [fromAddress, setFromAddress] = useState("");
+    const [fromName, setFromName] = useState("");
+    const [error, setError] = useState(null);
+    async function load() {
+        setSenders(await listSenders(workspace.uid));
+    }
+    useEffect(() => {
+        load().catch((err) => setError(errorMessage(err, "Could not load the senders.")));
+    }, [workspace.uid]);
+    async function add(event) {
+        event.preventDefault();
+        try {
+            await addSender(workspace.uid, { fromAddress, ...(fromName.trim() ? { fromName } : {}) });
+            setFromAddress("");
+            setFromName("");
+            setError(null);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not add the sender."));
+        }
+    }
+    return (_jsxs("section", { "aria-label": "Senders", className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted", children: "Send as" }), _jsx("p", { className: "text-sm text-text-muted", children: "Addresses of mailboxes you can send from. Replies to mail sent from the CRM arrive in these mailboxes." }), error && _jsx(Alert, { children: error }), _jsx("ul", { className: "flex flex-col gap-1", children: senders.map((sender) => (_jsxs("li", { className: "flex items-center gap-3 text-sm", children: [_jsxs("span", { className: "flex-1", children: [sender.fromName, " <", sender.fromAddress, ">"] }), _jsxs("label", { className: "flex items-center gap-1 text-xs text-text-muted", title: "Mail this mailbox exchanges with contacts goes on their timelines", children: [_jsx("input", { type: "checkbox", disabled: !canManage, checked: !!sender.logEmail, onChange: async (event) => {
+                                        try {
+                                            await updateSender(workspace.uid, sender.uid, { logEmail: event.target.checked });
+                                        }
+                                        catch (err) {
+                                            setError(errorMessage(err, "Could not change the sender."));
+                                        }
+                                        await load();
+                                    } }), "Log email with contacts"] }), canManage && (_jsx("button", { type: "button", className: "text-xs text-text-muted hover:text-danger", onClick: async () => {
+                                await removeSender(workspace.uid, sender.uid);
+                                await load();
+                            }, children: "Remove" }))] }, sender.uid))) }), canManage && (_jsxs("form", { className: "flex flex-wrap gap-2", "aria-label": "Add sender", onSubmit: add, children: [_jsx("input", { "aria-label": "Sender address", placeholder: "sales@example.com", className: `${INPUT_CLASS} !w-64`, value: fromAddress, onChange: (event) => setFromAddress(event.target.value) }), _jsx("input", { "aria-label": "Sender name", placeholder: "Name shown to recipients", className: `${INPUT_CLASS} !w-56`, value: fromName, onChange: (event) => setFromName(event.target.value) }), _jsx(Button, { type: "submit", variant: "secondary", disabled: fromAddress.trim() === "", className: "!w-auto", children: "Add sender" })] }))] }));
+}
+function Properties() {
+    const { workspace, canManage } = useCrm();
+    const [definitions, setDefinitions] = useState([]);
+    const [objectType, setObjectType] = useState("contact");
+    const [label, setLabel] = useState("");
+    const [type, setType] = useState("text");
+    const [options, setOptions] = useState("");
+    const [error, setError] = useState(null);
+    async function load() {
+        setDefinitions(await listProperties(workspace.uid));
+    }
+    useEffect(() => {
+        load().catch((err) => setError(errorMessage(err, "Could not load the properties.")));
+    }, [workspace.uid]);
+    async function add(event) {
+        event.preventDefault();
+        const key = label
+            .trim()
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, "_")
+            .replace(/^[^a-z]+|_+$/g, "")
+            .slice(0, 64);
+        const isSelect = type === "select" || type === "multi_select";
+        try {
+            await createProperty(workspace.uid, {
+                objectType,
+                key,
+                label,
+                type,
+                ...(isSelect
+                    ? {
+                        options: options
+                            .split(",")
+                            .map((entry) => entry.trim())
+                            .filter(Boolean),
+                    }
+                    : {}),
+            });
+            setLabel("");
+            setOptions("");
+            setError(null);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not add the property."));
+        }
+    }
+    return (_jsxs("section", { "aria-label": "Properties", className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted", children: "Custom properties" }), error && _jsx(Alert, { children: error }), _jsx("ul", { className: "flex flex-col gap-1", children: definitions.map((definition) => (_jsxs("li", { className: "flex items-center gap-3 text-sm", children: [_jsxs("span", { className: "flex-1", children: [definition.label, " ", _jsxs("span", { className: "text-text-muted", children: ["(", definition.objectType, ", ", definition.type, ")"] })] }), canManage && (_jsx("button", { type: "button", className: "text-xs text-text-muted hover:text-danger", onClick: async () => {
+                                if (window.confirm(`Delete "${definition.label}" and every value of it?`)) {
+                                    await deleteProperty(workspace.uid, definition.uid);
+                                    await load();
+                                }
+                            }, children: "Delete" }))] }, definition.uid))) }), canManage && (_jsxs("form", { className: "flex flex-wrap gap-2", "aria-label": "Add property", onSubmit: add, children: [_jsxs("select", { "aria-label": "Property of", className: `${INPUT_CLASS} !w-32`, value: objectType, onChange: (event) => setObjectType(event.target.value), children: [_jsx("option", { value: "contact", children: "Contacts" }), _jsx("option", { value: "company", children: "Companies" })] }), _jsx("input", { "aria-label": "Property label", placeholder: "Label", className: `${INPUT_CLASS} !w-48`, value: label, onChange: (event) => setLabel(event.target.value) }), _jsx("select", { "aria-label": "Property type", className: `${INPUT_CLASS} !w-40`, value: type, onChange: (event) => setType(event.target.value), children: PROPERTY_TYPES.map((entry) => (_jsx("option", { value: entry.value, children: entry.label }, entry.value))) }), (type === "select" || type === "multi_select") && (_jsx("input", { "aria-label": "Property options", placeholder: "Options, comma-separated", className: `${INPUT_CLASS} !w-64`, value: options, onChange: (event) => setOptions(event.target.value) })), _jsx(Button, { type: "submit", variant: "secondary", disabled: label.trim() === "", className: "!w-auto", children: "Add property" })] }))] }));
+}
+const REASONS = { hard_bounce: "bounced", complaint: "marked as spam", manual: "added by hand" };
+/** The addresses the workspace never sends marketing mail to. */
+function Suppressions() {
+    const { workspace, canManage } = useCrm();
+    const [entries, setEntries] = useState([]);
+    const [email, setEmail] = useState("");
+    const [error, setError] = useState(null);
+    async function load() {
+        setEntries(await listSuppressions(workspace.uid));
+    }
+    useEffect(() => {
+        load().catch((err) => setError(errorMessage(err, "Could not load the suppression list.")));
+    }, [workspace.uid]);
+    async function add(event) {
+        event.preventDefault();
+        try {
+            await createSuppression(workspace.uid, { email });
+            setEmail("");
+            setError(null);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not add the address."));
+        }
+    }
+    return (_jsxs("section", { "aria-label": "Suppressions", className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted", children: "Do not email" }), _jsx("p", { className: "text-sm text-text-muted", children: "Addresses no campaign is ever sent to. Bounces and spam complaints are added here on their own." }), error && _jsx(Alert, { children: error }), _jsx("ul", { className: "flex flex-col gap-1", children: entries.map((entry) => (_jsxs("li", { className: "flex items-center gap-3 text-sm", children: [_jsxs("span", { className: "flex-1", children: [entry.email, " ", _jsxs("span", { className: "text-text-muted", children: ["(", REASONS[entry.reason] ?? entry.reason, ")"] })] }), canManage && (_jsx("button", { type: "button", className: "text-xs text-text-muted hover:text-danger", onClick: async () => {
+                                await deleteSuppression(workspace.uid, entry.uid);
+                                await load();
+                            }, children: "Remove" }))] }, entry.uid))) }), canManage && (_jsxs("form", { className: "flex flex-wrap gap-2", "aria-label": "Add suppression", onSubmit: add, children: [_jsx("input", { "aria-label": "Suppressed address", placeholder: "someone@example.com", className: `${INPUT_CLASS} !w-72`, value: email, onChange: (event) => setEmail(event.target.value) }), _jsx(Button, { type: "submit", variant: "secondary", disabled: email.trim() === "", className: "!w-auto", children: "Add address" })] }))] }));
+}
+function DangerZone() {
+    const { workspace } = useCrm();
+    const [error, setError] = useState(null);
+    return (_jsxs("section", { "aria-label": "Delete workspace", className: "flex flex-col gap-2 border border-danger rounded-sm p-4", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-danger", children: "Delete workspace" }), _jsx("p", { className: "text-sm", children: "Deletes the workspace and everything in it, for every member. This can't be undone." }), error && _jsx(Alert, { children: error }), _jsx("button", { type: "button", className: "text-sm text-danger font-semibold self-start hover:underline", onClick: async () => {
+                    if (window.prompt(`Type the workspace's name, ${workspace.name}, to delete it.`) !== workspace.name) {
+                        return;
+                    }
+                    try {
+                        await deleteWorkspace(workspace.uid);
+                        try {
+                            window.localStorage.removeItem(WORKSPACE_STORAGE_KEY);
+                        }
+                        catch {
+                            // Storage blocked: nothing was remembered.
+                        }
+                        window.location.assign("/crm");
+                    }
+                    catch (err) {
+                        setError(errorMessage(err, "Could not delete the workspace."));
+                    }
+                }, children: "Delete this workspace" })] }));
+}

package/dist/apps/shared/components/admin/CrmAdmin.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/** Workspaces per page. */
+export declare const ADMIN_PAGE_SIZE = 50;
+/**
+ * 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(): React.JSX.Element;