@rapidmx/crm-plugin 0.1.0

package/apps/shared/components/FormManager.tsx

@@ -0,0 +1,326 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, 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 {
+    CrmForm,
+    FormField as CrmFormField,
+    MailingList,
+    PropertyDefinition,
+    WorkspaceSender,
+    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: string; label: string }[] = [
+    { 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: string): string {
+    return `${window.location.origin}/f/${encodeURIComponent(formUid)}`;
+}
+
+/** The HTML that embeds a form in another site. */
+export function embedCode(formUid: string): string {
+    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<CrmForm[]>([]);
+    const [editing, setEditing] = useState<CrmForm | "new" | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    async function load(): Promise<void> {
+        try {
+            setForms(await listForms(workspace.uid));
+        } catch (err) {
+            setError(errorMessage(err, "Could not load the forms."));
+        }
+    }
+
+    useEffect(() => {
+        void load();
+    }, [workspace.uid]);
+
+    return (
+        <div className="max-w-5xl">
+            <div className="flex items-center justify-between mb-4">
+                <h1 className="text-lg font-bold tracking-tight">Forms</h1>
+                {canManage && (
+                    <Button type="button" className="!w-auto" onClick={() => setEditing("new")}>
+                        + New form
+                    </Button>
+                )}
+            </div>
+            {error && <Alert>{error}</Alert>}
+            {forms.length === 0 ? (
+                <p className="text-sm text-text-muted">No forms yet.</p>
+            ) : (
+                <ul className="flex flex-col gap-3">
+                    {forms.map((form) => (
+                        <li key={form.uid} className="border border-border rounded-sm p-3 text-sm">
+                            <div className="flex items-center justify-between gap-3">
+                                <span className="font-medium">
+                                    {form.name}
+                                    {!form.enabled && <span className="ml-2 text-xs text-text-muted">off</span>}
+                                </span>
+                                <span className="text-text-muted">{form.submissionCount} submissions</span>
+                            </div>
+                            <div className="flex flex-wrap gap-4 mt-2">
+                                <a className="text-primary-dark hover:underline" href={formUrl(form.uid)} target="_blank" rel="noreferrer">
+                                    Open form
+                                </a>
+                                <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.");
+                                        }
+                                    }}
+                                >
+                                    Copy embed code
+                                </button>
+                                {canManage && (
+                                    <>
+                                        <button type="button" className="text-primary-dark hover:underline" onClick={() => setEditing(form)}>
+                                            Edit
+                                        </button>
+                                        <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();
+                                                }
+                                            }}
+                                        >
+                                            Delete
+                                        </button>
+                                    </>
+                                )}
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            )}
+            {editing && (
+                <FormEditor
+                    form={editing === "new" ? undefined : editing}
+                    onClose={() => setEditing(null)}
+                    onSaved={async () => {
+                        setEditing(null);
+                        await load();
+                    }}
+                />
+            )}
+        </div>
+    );
+}
+
+/** The editor of a new form, or of `form`. */
+function FormEditor({ form, onClose, onSaved }: { form?: CrmForm; onClose: () => void; onSaved: () => Promise<void> }) {
+    const { workspace } = useCrm();
+    const [lists, setLists] = useState<MailingList[]>([]);
+    const [senders, setSenders] = useState<WorkspaceSender[]>([]);
+    const [properties, setProperties] = useState<PropertyDefinition[]>([]);
+    const [name, setName] = useState(form?.name ?? "");
+    const [title, setTitle] = useState(form?.title ?? "");
+    const [description, setDescription] = useState(form?.description ?? "");
+    const [fields, setFields] = useState<CrmFormField[]>(form?.fields ?? [{ target: "email", label: "Email", required: true }]);
+    const [listUids, setListUids] = useState<string[]>(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<string | null>(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: { target: string; label: string }[] = [
+        ...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: FormEvent): Promise<void> {
+        event.preventDefault();
+        const body: Partial<CrmForm> = {
+            name,
+            title: title || name,
+            description: description || (null as any),
+            fields,
+            listUids,
+            doubleOptIn,
+            senderUid: senderUid || (null as any),
+            successMessage,
+            redirectUrl: redirectUrl || (null as any),
+            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: number, change: Partial<CrmFormField>) =>
+        setFields((current) => current.map((field, position) => (position === index ? { ...field, ...change } : field)));
+
+    return (
+        <Modal open onClose={onClose} title={form ? "Edit form" : "New form"}>
+            <form onSubmit={submit} className="flex flex-col gap-3" aria-label="Form editor">
+                {error && <Alert>{error}</Alert>}
+                <FormField label="Name (only members see it)" htmlFor="form-name">
+                    <input id="form-name" className={INPUT_CLASS} value={name} onChange={(event) => setName(event.target.value)} required />
+                </FormField>
+                <FormField label="Heading" htmlFor="form-title">
+                    <input id="form-title" className={INPUT_CLASS} value={title} onChange={(event) => setTitle(event.target.value)} />
+                </FormField>
+                <FormField label="Text under the heading" htmlFor="form-description">
+                    <input id="form-description" className={INPUT_CLASS} value={description} onChange={(event) => setDescription(event.target.value)} />
+                </FormField>
+                <fieldset className="flex flex-col gap-2">
+                    <legend className="text-sm font-medium mb-1">Fields</legend>
+                    {fields.map((field, index) => (
+                        <div key={field.target} className="flex items-center gap-2">
+                            <span className="text-xs text-text-muted w-28 truncate">{targets.find((entry) => entry.target === field.target)?.label ?? field.target}</span>
+                            <input
+                                aria-label={`Label of ${field.target}`}
+                                className={`${INPUT_CLASS} !w-48`}
+                                value={field.label}
+                                onChange={(event) => setField(index, { label: event.target.value })}
+                            />
+                            <label className="text-xs flex items-center gap-1">
+                                <input
+                                    type="checkbox"
+                                    checked={field.required}
+                                    disabled={field.target === "email"}
+                                    onChange={(event) => setField(index, { required: event.target.checked })}
+                                />
+                                Required
+                            </label>
+                            {field.target !== "email" && (
+                                <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))}
+                                >
+                                    Remove
+                                </button>
+                            )}
+                        </div>
+                    ))}
+                    {unused.length > 0 && (
+                        <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 }]);
+                            }}
+                        >
+                            <option value="">+ Add a field&hellip;</option>
+                            {unused.map((entry) => (
+                                <option key={entry.target} value={entry.target}>
+                                    {entry.label}
+                                </option>
+                            ))}
+                        </select>
+                    )}
+                </fieldset>
+                <fieldset className="flex flex-col gap-1">
+                    <legend className="text-sm font-medium mb-1">Subscribe to</legend>
+                    {lists.length === 0 && <p className="text-xs text-text-muted">No lists yet: the form only collects contacts.</p>}
+                    {lists.map((list) => (
+                        <label key={list.uid} className="text-sm flex items-center gap-2">
+                            <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}
+                        </label>
+                    ))}
+                </fieldset>
+                <label className="text-sm flex items-center gap-2">
+                    <input type="checkbox" checked={doubleOptIn} onChange={(event) => setDoubleOptIn(event.target.checked)} />
+                    Ask signups to confirm by email (double opt-in)
+                </label>
+                <FormField label="Confirmation emails come from" htmlFor="form-sender">
+                    <select id="form-sender" className={INPUT_CLASS} value={senderUid} onChange={(event) => setSenderUid(event.target.value)}>
+                        <option value="">Nobody</option>
+                        {senders.map((sender) => (
+                            <option key={sender.uid} value={sender.uid}>
+                                {sender.fromName} &lt;{sender.fromAddress}&gt;
+                            </option>
+                        ))}
+                    </select>
+                </FormField>
+                <FormField label="Message once submitted" htmlFor="form-success">
+                    <input id="form-success" className={INPUT_CLASS} value={successMessage} onChange={(event) => setSuccessMessage(event.target.value)} />
+                </FormField>
+                <FormField label="Or go to this page (https://)" htmlFor="form-redirect">
+                    <input id="form-redirect" className={INPUT_CLASS} value={redirectUrl} onChange={(event) => setRedirectUrl(event.target.value)} />
+                </FormField>
+                <FormField label="Tag contacts with (comma-separated)" htmlFor="form-tags">
+                    <input id="form-tags" className={INPUT_CLASS} value={tags} onChange={(event) => setTags(event.target.value)} />
+                </FormField>
+                <label className="text-sm flex items-center gap-2">
+                    <input type="checkbox" checked={enabled} onChange={(event) => setEnabled(event.target.checked)} />
+                    Take submissions
+                </label>
+                <Button type="submit" className="!w-auto self-end">
+                    Save
+                </Button>
+            </form>
+        </Modal>
+    );
+}

package/apps/shared/components/ImportWizard.tsx

@@ -0,0 +1,251 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, 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 {
+    CrmImport,
+    CrmObjectType,
+    ImportColumnMapping,
+    ImportUpload,
+    MailingList,
+    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: string): string {
+    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<CrmObjectType>("contact");
+    const [file, setFile] = useState<File | null>(null);
+    const [upload, setUpload] = useState<ImportUpload | null>(null);
+    const [mapping, setMapping] = useState<ImportColumnMapping[]>([]);
+    const [updateExisting, setUpdateExisting] = useState(true);
+    const [tags, setTags] = useState("");
+    const [lists, setLists] = useState<MailingList[]>([]);
+    const [listUid, setListUid] = useState("");
+    const [imports, setImports] = useState<CrmImport[]>([]);
+    const [error, setError] = useState<string | null>(null);
+    const [busy, setBusy] = useState(false);
+
+    async function loadImports(): Promise<void> {
+        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: boolean = 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: FormEvent): Promise<void> {
+        event.preventDefault();
+        setBusy(true);
+        try {
+            const uploaded: ImportUpload = 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: FormEvent): Promise<void> {
+        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 (
+        <div className="max-w-4xl">
+            <h1 className="text-lg font-bold tracking-tight mb-4">Import</h1>
+            {error && <Alert>{error}</Alert>}
+            {!upload ? (
+                <form onSubmit={send} className="flex flex-col gap-3 mb-8" aria-label="Upload">
+                    <FormField label="The file holds" htmlFor="import-type">
+                        <select id="import-type" className={`${INPUT_CLASS} !w-48`} value={objectType} onChange={(event) => setObjectType(event.target.value as CrmObjectType)}>
+                            <option value="contact">Contacts</option>
+                            <option value="company">Companies</option>
+                        </select>
+                    </FormField>
+                    <FormField label="CSV file" htmlFor="import-file">
+                        <input id="import-file" type="file" accept=".csv,text/csv" onChange={(event) => setFile(event.target.files?.[0] ?? null)} />
+                    </FormField>
+                    <Button type="submit" disabled={!file || busy} loading={busy} className="!w-auto self-start">
+                        Upload
+                    </Button>
+                </form>
+            ) : (
+                <form onSubmit={start} className="flex flex-col gap-3 mb-8" aria-label="Map columns">
+                    <p className="text-sm">
+                        {upload.import.fileName}: {upload.import.totalRows} rows. Choose where each column goes.
+                    </p>
+                    <table className="text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                <th className="text-left py-1 px-2 border-b border-border">Column</th>
+                                <th className="text-left py-1 px-2 border-b border-border">First value</th>
+                                <th className="text-left py-1 px-2 border-b border-border">Import as</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {mapping.map((entry, index) => (
+                                <tr key={entry.column}>
+                                    <td className="py-1 px-2 border-b border-border">{entry.column}</td>
+                                    <td className="py-1 px-2 border-b border-border text-text-muted">{upload.preview[0]?.[index] ?? ""}</td>
+                                    <td className="py-1 px-2 border-b border-border">
+                                        <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)),
+                                                )
+                                            }
+                                        >
+                                            <option value="">Don&apos;t import</option>
+                                            {upload.targets.map((target) => (
+                                                <option key={target} value={target}>
+                                                    {targetLabel(target)}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                    <label className="text-sm flex items-center gap-2">
+                        <input type="checkbox" checked={updateExisting} onChange={(event) => setUpdateExisting(event.target.checked)} />
+                        Update records that are already here
+                    </label>
+                    <FormField label="Tag everything imported with (comma-separated)" htmlFor="import-tags">
+                        <input id="import-tags" className={`${INPUT_CLASS} !w-72`} value={tags} onChange={(event) => setTags(event.target.value)} />
+                    </FormField>
+                    {upload.import.objectType === "contact" && lists.length > 0 && (
+                        <FormField label="Subscribe everyone imported to" htmlFor="import-list">
+                            <select id="import-list" className={`${INPUT_CLASS} !w-72`} value={listUid} onChange={(event) => setListUid(event.target.value)}>
+                                <option value="">No list</option>
+                                {lists.map((list) => (
+                                    <option key={list.uid} value={list.uid}>
+                                        {list.name}
+                                    </option>
+                                ))}
+                            </select>
+                        </FormField>
+                    )}
+                    <div className="flex gap-2">
+                        <Button type="submit" disabled={busy} loading={busy} className="!w-auto">
+                            Start import
+                        </Button>
+                        <Button type="button" variant="secondary" className="!w-auto" onClick={() => setUpload(null)}>
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            )}
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-text-muted mb-2">Recent imports</h2>
+            {imports.length === 0 ? (
+                <p className="text-sm text-text-muted">No imports yet.</p>
+            ) : (
+                <ul className="flex flex-col gap-3">
+                    {imports.map((entry) => (
+                        <li key={entry.uid} className="text-sm border border-border rounded-sm p-3">
+                            <div className="flex items-center justify-between">
+                                <span className="font-medium">
+                                    {entry.fileName} &middot; {entry.objectType === "contact" ? "contacts" : "companies"}
+                                </span>
+                                <span className="text-text-muted">{entry.status}</span>
+                            </div>
+                            <div className="text-text-muted">
+                                {entry.processedRows} of {entry.totalRows} rows: {entry.createdCount} created, {entry.updatedCount} updated, {entry.skippedCount} skipped
+                            </div>
+                            {entry.errors.length > 0 && (
+                                <details className="mt-1">
+                                    <summary className="cursor-pointer">Skipped rows</summary>
+                                    <ul className="mt-1">
+                                        {entry.errors.map((rowError) => (
+                                            <li key={`${rowError.row}-${rowError.message}`}>
+                                                Row {rowError.row}: {rowError.message}
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </details>
+                            )}
+                            {entry.status !== "running" && (
+                                <button
+                                    type="button"
+                                    className="text-xs text-text-muted hover:text-danger mt-1"
+                                    onClick={async () => {
+                                        await deleteImport(workspace.uid, entry.uid);
+                                        await loadImports();
+                                    }}
+                                >
+                                    Remove
+                                </button>
+                            )}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}