@vertebr/react 0.4.0 → 0.5.0

package/dist/components/emails/EmailRecipientSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailRecipientSelect.d.ts","sourceRoot":"","sources":["../../../src/components/emails/EmailRecipientSelect.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,yBAAyB,+BAmB3B"}

package/dist/components/emails/EmailRecipientSelect.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MultiCheckSelect } from "./MultiCheckSelect";
+export function EmailRecipientSelect({ options, value, loading, disabled, onChange, }) {
+    const mapped = options.map((option) => ({
+        id: option.email.trim().toLowerCase(),
+        label: option.email,
+        secondary: option.label,
+    }));
+    return (_jsx(MultiCheckSelect, { options: mapped, value: value, loading: loading, disabled: disabled, placeholder: "Select emails\u2026", emptyLabel: "No emails on this list", searchPlaceholder: "Search emails\u2026", onChange: onChange }));
+}

package/dist/components/emails/EmailsActivityPanel.d.ts

@@ -0,0 +1,11 @@
+import type { MailCampaign, MailHistoryEntry } from "@vertebr/client";
+export type EmailsActivityPanelProps = {
+    campaigns: MailCampaign[];
+    history: MailHistoryEntry[];
+    canSchedule?: boolean;
+    canHistory?: boolean;
+    busy?: boolean;
+    onCancel?: (id: string) => Promise<void>;
+};
+export declare function EmailsActivityPanel({ campaigns, history, canSchedule, canHistory, busy, onCancel, }: EmailsActivityPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=EmailsActivityPanel.d.ts.map

package/dist/components/emails/EmailsActivityPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailsActivityPanel.d.ts","sourceRoot":"","sources":["../../../src/components/emails/EmailsActivityPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEtE,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAqFF,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAO,EACP,WAAW,EACX,UAAU,EACV,IAAI,EACJ,QAAQ,GACT,EAAE,wBAAwB,+BA6L1B"}

package/dist/components/emails/EmailsActivityPanel.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+function formatWhen(iso) {
+    const ms = Date.parse(iso);
+    if (!Number.isFinite(ms))
+        return iso;
+    return new Intl.DateTimeFormat(undefined, {
+        dateStyle: "medium",
+        timeStyle: "short",
+    }).format(ms);
+}
+function humanize(value) {
+    return value
+        .replace(/^library:/i, "")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/[_-]+/g, " ")
+        .trim();
+}
+function sourceLabel(source) {
+    if (source === "row")
+        return "Row";
+    if (source === "campaign")
+        return "Schedule";
+    return "Board";
+}
+function confirmationOf(entry) {
+    const stored = entry.reference?.trim();
+    if (stored && stored.toUpperCase() !== "MM-PENDING")
+        return stored;
+    const subject = entry.subject ?? "";
+    const match = subject.match(/(?:—|-|–)\s*((?:MM|ORD|ORDER)[-_][A-Z0-9-]+|[A-Z]{2,}[-_][A-Z0-9-]{3,})\s*$/i);
+    const value = match?.[1]?.trim();
+    if (!value || value.toUpperCase() === "MM-PENDING")
+        return "";
+    return value;
+}
+function subjectOf(entry) {
+    const confirmation = confirmationOf(entry);
+    const raw = entry.subject?.trim() ?? "";
+    if (!raw)
+        return entry.templateLabel ?? "Email";
+    let next = raw;
+    if (confirmation) {
+        next = next
+            .replace(new RegExp(`\\s*[—\\-–]\\s*${confirmation}\\s*$`, "i"), "")
+            .trim();
+    }
+    return next.replace(/\s*[—\-–]\s*MM-PENDING\s*$/i, "").trim() || raw;
+}
+function recipientOf(entry) {
+    if (entry.recipients?.[0]) {
+        const extra = Math.max(0, entry.recipientCount - 1);
+        return extra > 0
+            ? `${entry.recipients[0]} +${extra}`
+            : entry.recipients[0];
+    }
+    if (entry.recipientCount > 1)
+        return `${entry.recipientCount} recipients`;
+    return "";
+}
+function deliveryOf(entry) {
+    if (entry.failed && entry.failed > 0) {
+        return `${entry.sent} / ${entry.failed} failed`;
+    }
+    return `${entry.sent} / ${entry.recipientCount}`;
+}
+function statusBadge(status) {
+    if (status === "sent")
+        return { label: "Sent", tone: "ok" };
+    if (status === "partial")
+        return { label: "Partial" };
+    if (status === "failed")
+        return { label: "Failed" };
+    return { label: "Scheduled", tone: "neutral" };
+}
+function CellEmpty() {
+    return _jsx("span", { className: "vertebr-cell-empty", children: "\u2014" });
+}
+export function EmailsActivityPanel({ campaigns, history, canSchedule, canHistory, busy, onCancel, }) {
+    const [filter, setFilter] = useState("all");
+    const upcoming = useMemo(() => campaigns
+        .filter((campaign) => campaign.status === "scheduled")
+        .slice()
+        .sort((a, b) => Date.parse(a.sendAt) - Date.parse(b.sendAt)), [campaigns]);
+    const rows = useMemo(() => {
+        const scheduled = upcoming.map((campaign) => ({
+            kind: "scheduled",
+            id: campaign.id,
+            campaign,
+        }));
+        const sent = history.map((entry) => ({
+            kind: "history",
+            id: entry.id,
+            entry,
+        }));
+        if (filter === "scheduled")
+            return scheduled;
+        if (filter === "history")
+            return sent;
+        return [...scheduled, ...sent];
+    }, [filter, upcoming, history]);
+    const showActions = Boolean(onCancel) && filter !== "history";
+    const cancel = async (campaign) => {
+        if (!onCancel)
+            return;
+        if (!window.confirm(`Cancel scheduled email to ${campaign.resourceLabel ?? campaign.resourceId}?`)) {
+            return;
+        }
+        await onCancel(campaign.id);
+    };
+    const emptyCopy = (() => {
+        if (filter === "scheduled") {
+            return canSchedule
+                ? "No drops scheduled yet."
+                : "Host has not enabled scheduling.";
+        }
+        if (filter === "history") {
+            return canHistory
+                ? "No sends recorded yet."
+                : "Host has not enabled send history.";
+        }
+        if (!canSchedule && !canHistory) {
+            return "Host has not enabled activity.";
+        }
+        return "No activity yet.";
+    })();
+    return (_jsxs("div", { className: "vertebr-emails-activity", children: [_jsxs("div", { className: "vertebr-table-toolbar", children: [_jsx("div", { className: "vertebr-table-toolbar-start", children: _jsxs("div", { className: "vertebr-emails-segment", role: "group", "aria-label": "Activity", children: [_jsx("button", { type: "button", "data-active": filter === "all" ? "true" : undefined, onClick: () => setFilter("all"), children: "All" }), _jsx("button", { type: "button", "data-active": filter === "scheduled" ? "true" : undefined, onClick: () => setFilter("scheduled"), children: "Scheduled" }), _jsx("button", { type: "button", "data-active": filter === "history" ? "true" : undefined, onClick: () => setFilter("history"), children: "History" })] }) }), _jsx("span", { className: "vertebr-count", children: rows.length })] }), rows.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: emptyCopy })) : (_jsx("div", { className: "vertebr-table-wrap", children: _jsxs("table", { className: "vertebr-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "When" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Subject" }), _jsx("th", { children: "Confirmation" }), _jsx("th", { children: "To" }), _jsx("th", { children: "Audience" }), _jsx("th", { children: "Template" }), _jsx("th", { children: "Via" }), _jsx("th", { children: "Delivery" }), showActions ? _jsx("th", { className: "vertebr-col-actions", children: "Actions" }) : null] }) }), _jsx("tbody", { children: rows.map((row) => {
+                                if (row.kind === "scheduled") {
+                                    const campaign = row.campaign;
+                                    const badge = statusBadge("scheduled");
+                                    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("span", { className: "vertebr-cell-datetime", children: formatWhen(campaign.sendAt) }) }), _jsx("td", { children: _jsx("span", { className: "vertebr-badge", "data-tone": badge.tone, children: badge.label }) }), _jsx("td", { children: campaign.subject?.trim() || _jsx(CellEmpty, {}) }), _jsx("td", { children: _jsx(CellEmpty, {}) }), _jsx("td", { children: campaign.recipientCount ?? _jsx(CellEmpty, {}) }), _jsx("td", { children: campaign.resourceLabel ?? campaign.resourceId }), _jsx("td", { children: campaign.templateLabel ?? campaign.templateId }), _jsx("td", { children: "Schedule" }), _jsx("td", { children: _jsx(CellEmpty, {}) }), showActions ? (_jsx("td", { className: "vertebr-col-actions", children: _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busy, onClick: () => void cancel(campaign), children: "Cancel" }) })) : null] }, `scheduled:${row.id}`));
+                                }
+                                const entry = row.entry;
+                                const badge = statusBadge(entry.status);
+                                const confirmation = confirmationOf(entry);
+                                const recipient = recipientOf(entry);
+                                return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("span", { className: "vertebr-cell-datetime", children: formatWhen(entry.at) }) }), _jsx("td", { children: _jsx("span", { className: "vertebr-badge", "data-tone": badge.tone, children: badge.label }) }), _jsx("td", { children: subjectOf(entry) }), _jsx("td", { children: confirmation || _jsx(CellEmpty, {}) }), _jsx("td", { children: recipient || _jsx(CellEmpty, {}) }), _jsx("td", { children: entry.resourceLabel ?? entry.resourceId }), _jsx("td", { children: entry.templateLabel ?? humanize(entry.templateId) }), _jsx("td", { children: sourceLabel(entry.source) }), _jsx("td", { children: deliveryOf(entry) }), showActions ? (_jsx("td", { className: "vertebr-col-actions" })) : null] }, `history:${row.id}`));
+                            }) })] }) }))] }));
+}

package/dist/components/emails/EmailsBoard.d.ts

@@ -0,0 +1,47 @@
+import type { EmailsBoardResponse, MailLibraryTemplate, MailPreviewResponse } from "@vertebr/client";
+import { type EmailRecipientOption } from "./EmailRecipientSelect";
+export type EmailsBoardProps = {
+    data: EmailsBoardResponse;
+    loading?: boolean;
+    /** Controlled section from the admin sidebar (Compose / Templates / Activity). */
+    tab?: "compose" | "templates" | "activity";
+    onRefresh: () => void | Promise<void>;
+    onLoadRecipients: (resourceId: string) => Promise<EmailRecipientOption[]>;
+    onPreview: (payload: {
+        resourceId: string;
+        templateId: string;
+        rowId?: string;
+        input?: Record<string, unknown>;
+    }) => Promise<MailPreviewResponse>;
+    onSend: (payload: {
+        resourceId: string;
+        templateId: string;
+        input?: Record<string, unknown>;
+        audience: {
+            mode: "all";
+        } | {
+            mode: "emails";
+            emails: string[];
+        };
+    }) => Promise<{
+        sent: number;
+        failed: number;
+    }>;
+    onSchedule?: (payload: {
+        resourceId: string;
+        templateId: string;
+        input?: Record<string, unknown>;
+        audience: {
+            mode: "all";
+        } | {
+            mode: "emails";
+            emails: string[];
+        };
+        sendAt: string;
+    }) => Promise<void>;
+    onCancel?: (id: string) => Promise<void>;
+    onSaveLibrary?: (template: MailLibraryTemplate) => Promise<void>;
+    onDeleteLibrary?: (id: string) => Promise<void>;
+};
+export declare function EmailsBoard({ data, loading, tab: tabProp, onRefresh, onLoadRecipients, onPreview, onSend, onSchedule, onCancel, onSaveLibrary, onDeleteLibrary, }: EmailsBoardProps): import("react").JSX.Element;
+//# sourceMappingURL=EmailsBoard.d.ts.map

package/dist/components/emails/EmailsBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailsBoard.d.ts","sourceRoot":"","sources":["../../../src/components/emails/EmailsBoard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,mBAAmB,EAEnB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,wBAAwB,CAAC;AAKhC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kFAAkF;IAClF,GAAG,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC3C,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,gBAAgB,EAAE,CAChB,UAAU,EAAE,MAAM,KACf,OAAO,CAAC,oBAAoB,EAAE,CAAC,CAAC;IACrC,SAAS,EAAE,CAAC,OAAO,EAAE;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACjC,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACnC,MAAM,EAAE,CAAC,OAAO,EAAE;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAChC,QAAQ,EAAE;YAAE,IAAI,EAAE,KAAK,CAAA;SAAE,GAAG;YAAE,IAAI,EAAE,QAAQ,CAAC;YAAC,MAAM,EAAE,MAAM,EAAE,CAAA;SAAE,CAAC;KAClE,KAAK,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChD,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAChC,QAAQ,EAAE;YAAE,IAAI,EAAE,KAAK,CAAA;SAAE,GAAG;YAAE,IAAI,EAAE,QAAQ,CAAC;YAAC,MAAM,EAAE,MAAM,EAAE,CAAA;SAAE,CAAC;QACjE,MAAM,EAAE,MAAM,CAAC;KAChB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjE,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACjD,CAAC;AA+PF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,GAAG,EAAE,OAAO,EACZ,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,MAAM,EACN,UAAU,EACV,QAAQ,EACR,aAAa,EACb,eAAe,GAChB,EAAE,gBAAgB,+BAgqBlB"}