@rapidmx/crm-plugin 0.1.0

package/apps/shared/components/deals/PipelineManager.tsx

@@ -0,0 +1,207 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { 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 { Pipeline, PipelineStage, StageKind, createPipeline, deletePipeline, errorMessage, listPipelines, updatePipeline } from "../../crmApi.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+
+/** A stage as the editor holds it: a new one has no id yet. */
+type StageDraft = Omit<PipelineStage, "id"> & { id?: string };
+
+/**
+ * A workspace's pipelines and their stages: renaming, reordering, adding and removing stages (each with its probability, kind and
+ * "rotting" days), choosing the default pipeline, and creating and deleting pipelines. Changing them takes an admin; everyone sees
+ * them.
+ */
+export default function PipelineManager() {
+    const { workspace, canManage } = useCrm();
+    const [pipelines, setPipelines] = useState<Pipeline[]>([]);
+    const [error, setError] = useState<string | null>(null);
+
+    async function load(): Promise<void> {
+        try {
+            setPipelines(await listPipelines(workspace.uid));
+        } catch (err) {
+            setError(errorMessage(err, "Could not load the pipelines."));
+        }
+    }
+
+    useEffect(() => {
+        void load();
+    }, [workspace.uid]);
+
+    async function run(action: () => Promise<unknown>, failure: string): Promise<void> {
+        setError(null);
+        try {
+            await action();
+            await load();
+        } catch (err) {
+            setError(errorMessage(err, failure));
+        }
+    }
+
+    return (
+        <div className="max-w-4xl">
+            <div className="flex items-center justify-between mb-4">
+                <h1 className="text-lg font-bold tracking-tight">Pipelines</h1>
+                {canManage && (
+                    <Button
+                        type="button"
+                        className="!w-auto"
+                        onClick={() => {
+                            const name: string | null = window.prompt("Name of the new pipeline:", "");
+                            if (name?.trim()) {
+                                void run(() => createPipeline(workspace.uid, { name: name.trim() }), "Could not create the pipeline.");
+                            }
+                        }}
+                    >
+                        + New pipeline
+                    </Button>
+                )}
+            </div>
+            {error && <Alert>{error}</Alert>}
+            <div className="flex flex-col gap-6">
+                {pipelines.map((pipeline) => (
+                    <PipelineEditor
+                        key={`${pipeline.uid}-${pipeline.version}`}
+                        pipeline={pipeline}
+                        canManage={canManage}
+                        onSave={(input) => run(() => updatePipeline(workspace.uid, pipeline.uid, { ...input }), "Could not save the pipeline.")}
+                        onDelete={() => {
+                            if (window.confirm(`Delete the pipeline "${pipeline.name}"?`)) {
+                                void run(() => deletePipeline(workspace.uid, pipeline.uid), "Could not delete the pipeline.");
+                            }
+                        }}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+function PipelineEditor({
+    pipeline,
+    canManage,
+    onSave,
+    onDelete,
+}: {
+    pipeline: Pipeline;
+    canManage: boolean;
+    onSave: (input: { name?: string; stages?: StageDraft[]; isDefault?: boolean }) => Promise<void>;
+    onDelete: () => void;
+}) {
+    const [name, setName] = useState(pipeline.name);
+    const [stages, setStages] = useState<StageDraft[]>(pipeline.stages);
+    const change = (index: number, patch: Partial<StageDraft>) => setStages(stages.map((stage, at) => (at === index ? { ...stage, ...patch } : stage)));
+    const moveStage = (index: number, delta: -1 | 1) => {
+        const next: StageDraft[] = [...stages];
+        [next[index], next[index + delta]] = [next[index + delta], next[index]];
+        setStages(next);
+    };
+
+    return (
+        <section aria-label={pipeline.name} className="border border-border rounded-sm p-4">
+            <fieldset disabled={!canManage}>
+                <div className="flex items-center gap-2 mb-3">
+                    <input aria-label="Pipeline name" className={`${INPUT_CLASS} !w-64 font-semibold`} value={name} onChange={(event) => setName(event.target.value)} />
+                    {pipeline.isDefault ? (
+                        <span className="text-xs rounded-full px-2 py-0.5 bg-primary-lightest text-primary-dark">Default</span>
+                    ) : (
+                        canManage && (
+                            <button type="button" className="text-xs text-primary-dark hover:underline" onClick={() => void onSave({ isDefault: true })}>
+                                Make default
+                            </button>
+                        )
+                    )}
+                </div>
+                <table className="w-full text-sm border-collapse mb-3">
+                    <thead>
+                        <tr>
+                            {["Stage", "Probability %", "Kind", "Rotting after (days)", ""].map((heading) => (
+                                <th key={heading} className="text-left text-xs uppercase tracking-wide text-text-muted py-1 px-1.5 border-b border-border">
+                                    {heading}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {stages.map((stage, index) => (
+                            <tr key={stage.id ?? `new-${index}`}>
+                                <td className="py-1 px-1.5">
+                                    <input aria-label={`Stage ${index + 1} name`} className={INPUT_CLASS} value={stage.name} onChange={(event) => change(index, { name: event.target.value })} />
+                                </td>
+                                <td className="py-1 px-1.5">
+                                    <input
+                                        aria-label={`Stage ${index + 1} probability`}
+                                        type="number"
+                                        min={0}
+                                        max={100}
+                                        className={`${INPUT_CLASS} !w-20`}
+                                        value={stage.probability}
+                                        onChange={(event) => change(index, { probability: Number(event.target.value) })}
+                                    />
+                                </td>
+                                <td className="py-1 px-1.5">
+                                    <select aria-label={`Stage ${index + 1} kind`} className={`${INPUT_CLASS} !w-24`} value={stage.kind} onChange={(event) => change(index, { kind: event.target.value as StageKind })}>
+                                        <option value="open">Open</option>
+                                        <option value="won">Won</option>
+                                        <option value="lost">Lost</option>
+                                    </select>
+                                </td>
+                                <td className="py-1 px-1.5">
+                                    <input
+                                        aria-label={`Stage ${index + 1} rotting days`}
+                                        type="number"
+                                        min={1}
+                                        className={`${INPUT_CLASS} !w-20`}
+                                        value={stage.rottingDays ?? ""}
+                                        onChange={(event) => change(index, { rottingDays: event.target.value ? Number(event.target.value) : null })}
+                                    />
+                                </td>
+                                <td className="py-1 px-1.5 whitespace-nowrap text-right">
+                                    {canManage && (
+                                        <>
+                                            <button type="button" aria-label={`Move stage ${index + 1} up`} disabled={index === 0} className="px-1 disabled:opacity-30" onClick={() => moveStage(index, -1)}>
+                                                ↑
+                                            </button>
+                                            <button
+                                                type="button"
+                                                aria-label={`Move stage ${index + 1} down`}
+                                                disabled={index === stages.length - 1}
+                                                className="px-1 disabled:opacity-30"
+                                                onClick={() => moveStage(index, 1)}
+                                            >
+                                                ↓
+                                            </button>
+                                            <button type="button" aria-label={`Remove stage ${index + 1}`} className="px-1 text-danger" onClick={() => setStages(stages.filter((_stage, at) => at !== index))}>
+                                                &times;
+                                            </button>
+                                        </>
+                                    )}
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+                {canManage && (
+                    <div className="flex gap-2">
+                        <Button type="button" variant="secondary" className="!w-auto" onClick={() => setStages([...stages, { name: "New stage", probability: 50, kind: "open" }])}>
+                            + Add stage
+                        </Button>
+                        <Button type="button" className="!w-auto" onClick={() => void onSave({ name: name.trim(), stages: stages.map(({ rottingDays, ...stage }) => ({ ...stage, ...(rottingDays ? { rottingDays } : {}) })) })}>
+                            Save
+                        </Button>
+                        {!pipeline.isDefault && (
+                            <Button type="button" variant="secondary" className="!w-auto !text-danger ml-auto" onClick={onDelete}>
+                                Delete pipeline
+                            </Button>
+                        )}
+                    </div>
+                )}
+            </fieldset>
+        </section>
+    );
+}

package/apps/shared/components/deals/dealUi.ts

@@ -0,0 +1,24 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import type { Deal, PipelineStage } from "../../crmApi.js";
+
+/** An amount in `currency`, in the reader's locale, without cents. A code the browser doesn't know is shown as a suffix. */
+export function money(amount: number, currency: string): string {
+    try {
+        return new Intl.NumberFormat(undefined, { style: "currency", currency, maximumFractionDigits: 0 }).format(amount);
+    } catch {
+        return `${Math.round(amount).toLocaleString()} ${currency}`;
+    }
+}
+
+/** How many whole days a deal has been in its stage. */
+export function daysInStage(deal: Pick<Deal, "stageChangedAt">, now: Date = new Date()): number {
+    return Math.floor((now.getTime() - new Date(deal.stageChangedAt).getTime()) / 86_400_000);
+}
+
+/** Whether an open deal has been in its stage longer than the stage's rotting days. */
+export function isRotting(deal: Pick<Deal, "stageChangedAt" | "status">, stage: Pick<PipelineStage, "rottingDays"> | undefined, now: Date = new Date()): boolean {
+    return deal.status === "open" && !!stage?.rottingDays && daysInStage(deal, now) > stage.rottingDays;
+}

package/apps/shared/components/designer/BlockView.tsx

@@ -0,0 +1,92 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { CSSProperties } from "react";
+import type { DesignBlock, DesignTheme } from "../../crmApi.js";
+
+const HEADING_SIZES: Record<1 | 2 | 3, number> = { 1: 28, 2: 22, 3: 18 };
+
+/**
+ * A block drawn on the designer's canvas, close to how the email shows it (the preview shows exactly). Text is the block's saved, sanitized
+ * HTML; a hand-written HTML block is shown as its code, since only the sandboxed preview may draw arbitrary HTML.
+ */
+export default function BlockView({ block, theme }: { block: DesignBlock; theme: DesignTheme }) {
+    const box: CSSProperties = { textAlign: block.align, padding: block.padding ?? 8 };
+    switch (block.type) {
+        case "text":
+            return (
+                <div
+                    style={{ ...box, color: block.color ?? theme.textColor, fontSize: block.fontSize ?? 15, lineHeight: 1.5 }}
+                    // The server sanitizes text blocks on save, and the editor's schema only produces what it keeps.
+                    dangerouslySetInnerHTML={{ __html: block.html }}
+                />
+            );
+        case "heading":
+            return (
+                <div role="heading" aria-level={block.level} style={{ ...box, color: block.color ?? theme.textColor, fontSize: HEADING_SIZES[block.level], fontWeight: 700 }}>
+                    {block.text}
+                </div>
+            );
+        case "image":
+            return (
+                <div style={box}>
+                    {block.src ? (
+                        <img src={block.src} alt={block.alt} style={{ maxWidth: "100%", width: block.width, display: "inline-block" }} />
+                    ) : (
+                        <div className="border border-dashed border-border py-8 text-center text-sm text-text-muted">Choose an image in the settings</div>
+                    )}
+                </div>
+            );
+        case "button":
+            return (
+                <div style={{ ...box, textAlign: block.align ?? "center" }}>
+                    <span
+                        style={{
+                            display: "inline-block",
+                            padding: "10px 25px",
+                            background: block.backgroundColor ?? theme.buttonColor,
+                            color: block.color ?? theme.buttonTextColor,
+                            borderRadius: block.borderRadius ?? 4,
+                        }}
+                    >
+                        {block.text}
+                    </span>
+                </div>
+            );
+        case "divider":
+            return (
+                <div style={{ padding: block.padding ?? 8 }}>
+                    <hr style={{ border: 0, borderTop: `${block.thickness ?? 1}px solid ${block.color ?? "#e5e7eb"}` }} />
+                </div>
+            );
+        case "spacer":
+            return <div aria-label="Spacer" style={{ height: block.height }} />;
+        case "social":
+            return (
+                <div style={{ ...box, textAlign: block.align ?? "center" }} className="text-sm">
+                    {block.links.map((link, index) => (
+                        <span key={index} className="inline-block mx-1 px-2 py-0.5 rounded-full bg-surface-alt">
+                            {link.network}
+                        </span>
+                    ))}
+                </div>
+            );
+        case "html":
+            return (
+                <pre style={box} className="text-xs whitespace-pre-wrap break-all bg-surface-alt text-text-muted max-h-40 overflow-hidden">
+                    {block.html}
+                </pre>
+            );
+        default:
+            return (
+                <div style={{ ...box, textAlign: block.align ?? "center", color: block.color ?? "#6b7280", fontSize: 12 }}>
+                    {block.note && <p style={{ margin: "0 0 8px" }}>{block.note}</p>}
+                    <p style={{ margin: "0 0 8px" }}>{"{{ workspace.name }} · {{ workspace.postal_address }}"}</p>
+                    <p style={{ margin: 0 }}>
+                        <u>Unsubscribe</u> · <u>Email preferences</u>
+                    </p>
+                </div>
+            );
+    }
+}

package/apps/shared/components/designer/Canvas.tsx

@@ -0,0 +1,206 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { KeyboardEvent, ReactNode } from "react";
+import { DndContext, DragEndEvent, KeyboardSensor, PointerSensor, closestCenter, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { HiOutlineArrowDown, HiOutlineArrowUp, HiOutlineBookmark, HiOutlineDocumentDuplicate, HiOutlineTrash } from "react-icons/hi2";
+import { MdDragIndicator } from "react-icons/md";
+import type { IconType } from "react-icons";
+import type { DesignBlock, DesignColumn, DesignSection, MergeTag, TemplateDesign } from "../../crmApi.js";
+import BlockView from "./BlockView.js";
+import LazyTextBlockEditor from "./LazyTextBlockEditor.js";
+import { blockLabel, dropBlock, duplicateBlock, nudgeBlock, nudgeSection, removeBlock, removeSection, updateBlock } from "./designModel.js";
+
+/** What the designer has selected: a block, a section, or the theme. */
+export type Selection = { kind: "block"; id: string } | { kind: "section"; id: string } | { kind: "theme" };
+
+export interface CanvasProps {
+    design: TemplateDesign;
+    selection: Selection;
+    onSelect: (selection: Selection) => void;
+    /** A changed design; `mergeKey` names a run of edits (typing in one block) that undo takes back together. */
+    onChange: (design: TemplateDesign, mergeKey?: string) => void;
+    mergeTags: MergeTag[];
+    /** Blocks with something to fix before saving. */
+    problemIds: Set<string>;
+    /** Offers `block` for saving as a reusable block; `undefined` when the caller can't. */
+    onSaveBlock?: (block: DesignBlock) => void;
+    readOnly: boolean;
+}
+
+function ToolButton({ label, icon: Icon, onClick, disabled }: { label: string; icon: IconType; onClick: () => void; disabled?: boolean }) {
+    return (
+        <button
+            type="button"
+            title={label}
+            aria-label={label}
+            disabled={disabled}
+            onClick={(event) => {
+                event.stopPropagation();
+                onClick();
+            }}
+            className="p-1 rounded-sm text-text-muted hover:text-text hover:bg-surface-alt disabled:opacity-40"
+        >
+            <Icon aria-hidden className="w-4 h-4" />
+        </button>
+    );
+}
+
+/** Selects on Enter or Space, for elements that select on click. */
+function selectOnKey(select: () => void) {
+    return (event: KeyboardEvent) => {
+        if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            select();
+        }
+    };
+}
+
+function SortableBlock({ block, index, count, props }: { block: DesignBlock; index: number; count: number; props: CanvasProps }) {
+    const { design, selection, onSelect, onChange, mergeTags, problemIds, onSaveBlock, readOnly } = props;
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: block.id, disabled: readOnly });
+    const selected: boolean = selection.kind === "block" && selection.id === block.id;
+    const label: string = blockLabel(block.type);
+    return (
+        <div
+            ref={setNodeRef}
+            style={{ transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined, transition, opacity: isDragging ? 0.5 : 1 }}
+            className={`group relative outline-offset-[-1px] ${selected ? "outline outline-2 outline-primary" : "hover:outline hover:outline-1 hover:outline-primary/50"} ${
+                problemIds.has(block.id) ? "outline outline-2 outline-danger" : ""
+            }`}
+            role="group"
+            aria-label={`${label} block`}
+            tabIndex={0}
+            onClick={(event) => {
+                event.stopPropagation();
+                onSelect({ kind: "block", id: block.id });
+            }}
+            onKeyDown={selectOnKey(() => onSelect({ kind: "block", id: block.id }))}
+        >
+            {selected && !readOnly && (
+                <div className="absolute -top-7 right-0 z-10 flex items-center gap-0.5 bg-surface border border-border rounded-sm shadow-sm px-0.5">
+                    <button type="button" aria-label={`Drag ${label}`} title="Drag" className="p-1 cursor-grab text-text-muted" {...attributes} {...listeners}>
+                        <MdDragIndicator aria-hidden className="w-4 h-4" />
+                    </button>
+                    <ToolButton label="Move up" icon={HiOutlineArrowUp} disabled={index === 0} onClick={() => onChange(nudgeBlock(design, block.id, -1))} />
+                    <ToolButton label="Move down" icon={HiOutlineArrowDown} disabled={index === count - 1} onClick={() => onChange(nudgeBlock(design, block.id, 1))} />
+                    <ToolButton
+                        label="Duplicate"
+                        icon={HiOutlineDocumentDuplicate}
+                        onClick={() => {
+                            const copy = duplicateBlock(design, block.id);
+                            onChange(copy.design);
+                            onSelect({ kind: "block", id: copy.id });
+                        }}
+                    />
+                    {onSaveBlock && <ToolButton label="Save for reuse" icon={HiOutlineBookmark} onClick={() => onSaveBlock(block)} />}
+                    <ToolButton
+                        label="Delete block"
+                        icon={HiOutlineTrash}
+                        onClick={() => {
+                            onChange(removeBlock(design, block.id));
+                            onSelect({ kind: "theme" });
+                        }}
+                    />
+                </div>
+            )}
+            {selected && !readOnly && block.type === "text" ? (
+                <div style={{ padding: block.padding ?? 8, textAlign: block.align }}>
+                    <LazyTextBlockEditor
+                        key={block.id}
+                        value={block.html}
+                        mergeTags={mergeTags}
+                        onChange={(html) => onChange(updateBlock(design, block.id, { html }), `text:${block.id}`)}
+                    />
+                </div>
+            ) : (
+                <BlockView block={block} theme={design.theme} />
+            )}
+        </div>
+    );
+}
+
+function Column({ column, props }: { column: DesignColumn; props: CanvasProps }) {
+    const { setNodeRef, isOver } = useDroppable({ id: column.id, disabled: props.readOnly });
+    return (
+        <div ref={setNodeRef} className={`flex-1 min-w-0 min-h-[3rem] ${isOver ? "bg-primary-lightest/40" : ""}`}>
+            <SortableContext items={column.blocks.map((block) => block.id)} strategy={verticalListSortingStrategy}>
+                {column.blocks.map((block, index) => (
+                    <SortableBlock key={block.id} block={block} index={index} count={column.blocks.length} props={props} />
+                ))}
+            </SortableContext>
+            {column.blocks.length === 0 && <div className="m-2 border border-dashed border-border py-4 text-center text-xs text-text-muted">Empty column</div>}
+        </div>
+    );
+}
+
+function Section({ section, index, props }: { section: DesignSection; index: number; props: CanvasProps }) {
+    const { design, selection, onSelect, onChange, readOnly } = props;
+    const selected: boolean = selection.kind === "section" && selection.id === section.id;
+    const tools: ReactNode = selected && !readOnly && (
+        <div className="absolute top-0 -left-9 z-10 flex flex-col bg-surface border border-border rounded-sm shadow-sm">
+            <ToolButton label="Move section up" icon={HiOutlineArrowUp} disabled={index === 0} onClick={() => onChange(nudgeSection(design, section.id, -1))} />
+            <ToolButton label="Move section down" icon={HiOutlineArrowDown} disabled={index === design.sections.length - 1} onClick={() => onChange(nudgeSection(design, section.id, 1))} />
+            <ToolButton
+                label="Delete section"
+                icon={HiOutlineTrash}
+                onClick={() => {
+                    onChange(removeSection(design, section.id));
+                    onSelect({ kind: "theme" });
+                }}
+            />
+        </div>
+    );
+    return (
+        <div
+            role="group"
+            aria-label={`Section ${index + 1}`}
+            tabIndex={0}
+            className={`relative ${selected ? "outline outline-2 outline-dashed outline-primary" : "hover:outline hover:outline-1 hover:outline-dashed hover:outline-border"}`}
+            style={{ backgroundColor: section.backgroundColor ?? design.theme.contentBackgroundColor, padding: `${section.padding ?? 0}px 0` }}
+            onClick={() => onSelect({ kind: "section", id: section.id })}
+            onKeyDown={selectOnKey(() => onSelect({ kind: "section", id: section.id }))}
+        >
+            {tools}
+            <div className="flex gap-2">
+                {section.columns.map((column) => (
+                    <Column key={column.id} column={column} props={props} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+/**
+ * The email being designed, drawn close to how it will look: sections of columns of blocks. Clicking selects a block or a section
+ * (its settings show in the inspector); a text block is edited in place. Blocks move by dragging their handle - within or between
+ * columns, by pointer or keyboard (Space, the arrows, Space) - or with their up and down buttons.
+ */
+export default function Canvas(props: CanvasProps) {
+    const { design, onChange } = props;
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+
+    function dragEnd(event: DragEndEvent): void {
+        if (event.over) {
+            const next: TemplateDesign = dropBlock(design, String(event.active.id), String(event.over.id));
+            if (next !== design) {
+                onChange(next);
+            }
+        }
+    }
+
+    return (
+        <div className="py-8 px-10" style={{ backgroundColor: design.theme.backgroundColor, fontFamily: design.theme.fontFamily }} onClick={() => props.onSelect({ kind: "theme" })}>
+            <div className="mx-auto" style={{ maxWidth: design.theme.width }} onClick={(event) => event.stopPropagation()}>
+                <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={dragEnd}>
+                    {design.sections.map((section, index) => (
+                        <Section key={section.id} section={section} index={index} props={props} />
+                    ))}
+                </DndContext>
+                {design.sections.length === 0 && <p className="py-12 text-center text-sm text-text-muted bg-surface">Add a section from the panel on the left to start.</p>}
+            </div>
+        </div>
+    );
+}