@vertebr/react 0.3.0 → 0.5.0

package/dist/components/emails/EmailsBoard.js

@@ -0,0 +1,594 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { EnumInput } from "../config/EnumInput";
+import { actionInputDefaults } from "../resources/ResourceActionModal";
+import { EmailRecipientSelect, } from "./EmailRecipientSelect";
+import { EmailsActivityPanel } from "./EmailsActivityPanel";
+import { EmailsLibraryPanel } from "./EmailsLibraryPanel";
+import { MultiCheckSelect } from "./MultiCheckSelect";
+const FREEFORM_PRESETS = new Set(["custom", "promo", "custom_discount"]);
+const DISCOUNT_PRESETS = new Set([
+    "discount",
+    "welcome_offer",
+    "flash_sale",
+    "custom_discount",
+]);
+const DISCOUNT_FIELD_KEYS = new Set([
+    "discountId",
+    "discountCode",
+    "discountOffer",
+    "discountExpires",
+]);
+function fieldValue(value) {
+    return typeof value === "string" ? value : String(value ?? "");
+}
+function isLibraryPreset(preset) {
+    return preset.startsWith("library:");
+}
+function isFreeformPreset(preset) {
+    return FREEFORM_PRESETS.has(preset) || isLibraryPreset(preset);
+}
+function isDiscountPreset(preset, library) {
+    if (DISCOUNT_PRESETS.has(preset))
+        return true;
+    if (!isLibraryPreset(preset))
+        return false;
+    const id = preset.slice("library:".length);
+    return library.some((item) => item.id === id && item.kind === "discount");
+}
+function isMultiline(key, field) {
+    const hay = `${key} ${field.label ?? ""}`;
+    return field.type === "richtext" || /(body|message|html|notes)/i.test(hay);
+}
+function needsFreeform(schema, value) {
+    if (!schema.preset)
+        return true;
+    const preset = fieldValue(value.preset);
+    return !preset || isFreeformPreset(preset);
+}
+function fieldVisible(key, schema, value, library = []) {
+    if (key === "subject" || key === "body") {
+        return needsFreeform(schema, value);
+    }
+    if (DISCOUNT_FIELD_KEYS.has(key)) {
+        const preset = fieldValue(value.preset);
+        if (!isDiscountPreset(preset, library))
+            return false;
+        if (key === "discountId" && !(schema.discountId?.options?.length)) {
+            return false;
+        }
+        return true;
+    }
+    return true;
+}
+function requiredFilled(schema, value, library = []) {
+    return Object.entries(schema).every(([key, field]) => {
+        if (!fieldVisible(key, schema, value, library))
+            return true;
+        const freeform = (key === "subject" || key === "body") && needsFreeform(schema, value);
+        const discountRequired = (key === "discountCode" || key === "discountOffer") &&
+            isDiscountPreset(fieldValue(value.preset), library);
+        if (field.required === false && !freeform && !discountRequired)
+            return true;
+        if (field.type === "enum[]") {
+            if (field.required === false)
+                return true;
+            return Array.isArray(value[key]) && value[key].length > 0;
+        }
+        if (field.type !== "string" &&
+            field.type !== "richtext" &&
+            field.type !== "enum") {
+            return true;
+        }
+        return Boolean(fieldValue(value[key]).trim());
+    });
+}
+function normalizeInputSchema(input) {
+    if (!input)
+        return {};
+    return Object.fromEntries(Object.entries(input).map(([key, def]) => {
+        if (typeof def === "string") {
+            return [key, { type: def, label: key, required: true }];
+        }
+        return [key, def];
+    }));
+}
+function enrichComposeSchema(base, library, products, discounts) {
+    const next = { ...base };
+    if (next.preset?.type === "enum" && library.length > 0) {
+        const libraryIds = library.map((item) => `library:${item.id}`);
+        const libraryLabels = Object.fromEntries(library.map((item) => [`library:${item.id}`, item.label]));
+        const options = [...(next.preset.options ?? [])];
+        for (const id of libraryIds) {
+            if (!options.includes(id))
+                options.push(id);
+        }
+        next.preset = {
+            ...next.preset,
+            options,
+            optionLabels: {
+                ...(next.preset.optionLabels ?? {}),
+                ...libraryLabels,
+            },
+        };
+    }
+    if (next.productIds && products && products.length > 0) {
+        const options = products.map((item) => item.id);
+        const optionLabels = Object.fromEntries(products.map((item) => [item.id, item.label]));
+        next.productIds = {
+            ...next.productIds,
+            type: "enum[]",
+            options,
+            optionLabels: {
+                ...(next.productIds.optionLabels ?? {}),
+                ...optionLabels,
+            },
+            default: Array.isArray(next.productIds.default)
+                ? next.productIds.default
+                : [],
+        };
+    }
+    if (next.discountId && discounts && discounts.length > 0) {
+        const options = discounts.map((item) => item.id);
+        const optionLabels = Object.fromEntries(discounts.map((item) => [
+            item.id,
+            item.offerLabel
+                ? `${item.label}${item.code ? ` (${item.code})` : ""}`
+                : item.label,
+        ]));
+        next.discountId = {
+            ...next.discountId,
+            type: "enum",
+            options,
+            optionLabels: {
+                ...(next.discountId.optionLabels ?? {}),
+                ...optionLabels,
+            },
+            required: false,
+        };
+    }
+    return next;
+}
+function composeDefaults(schema) {
+    const base = actionInputDefaults(schema);
+    for (const [key, field] of Object.entries(schema)) {
+        if (field.type === "enum[]" && !Array.isArray(base[key])) {
+            base[key] = Array.isArray(field.default) ? field.default : [];
+        }
+    }
+    return base;
+}
+function applyLibraryPreset(draft, preset, library, schema) {
+    if (!isLibraryPreset(preset))
+        return draft;
+    const id = preset.slice("library:".length);
+    const item = library.find((entry) => entry.id === id);
+    if (!item)
+        return draft;
+    return {
+        ...draft,
+        preset,
+        subject: item.subject,
+        body: item.body,
+        ...(schema.productIds
+            ? { productIds: item.productIds ?? [] }
+            : {}),
+        ...(schema.discountId ? { discountId: item.discountId ?? "" } : {}),
+        ...(schema.discountCode
+            ? { discountCode: item.discountCode ?? "" }
+            : {}),
+        ...(schema.discountOffer
+            ? { discountOffer: item.discountOffer ?? "" }
+            : {}),
+        ...(schema.discountExpires
+            ? { discountExpires: item.discountExpires ?? "" }
+            : {}),
+    };
+}
+function formatRecipients(to) {
+    return Array.isArray(to) ? to.join(", ") : to;
+}
+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 defaultSendAt() {
+    const d = new Date(Date.now() + 60 * 60 * 1000);
+    d.setMinutes(0, 0, 0);
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function asStringList(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value.map((item) => String(item).trim()).filter(Boolean);
+}
+export function EmailsBoard({ data, loading, tab: tabProp, onRefresh, onLoadRecipients, onPreview, onSend, onSchedule, onCancel, onSaveLibrary, onDeleteLibrary, }) {
+    const audiences = data.audiences;
+    const library = data.library ?? [];
+    const products = data.products ?? [];
+    const discounts = data.discounts ?? [];
+    const history = data.history ?? [];
+    const [tabState] = useState("compose");
+    const tab = tabProp ?? tabState;
+    const audienceOptions = useMemo(() => audiences.map((item) => ({
+        id: item.id,
+        label: item.label,
+    })), [audiences]);
+    const [resourceIds, setResourceIds] = useState(() => audiences[0] ? [audiences[0].id] : []);
+    const selectedAudiences = useMemo(() => audiences.filter((item) => resourceIds.includes(item.id)), [audiences, resourceIds]);
+    const templates = useMemo(() => {
+        if (selectedAudiences.length === 0)
+            return [];
+        return data.templates.filter((template) => selectedAudiences.every((audience) => audience.templates.includes(template.id)));
+    }, [data.templates, selectedAudiences]);
+    const [templateId, setTemplateId] = useState(templates[0]?.id ?? "");
+    const template = templates.find((item) => item.id === templateId) ?? templates[0];
+    const schema = useMemo(() => enrichComposeSchema(normalizeInputSchema(template?.input), library, products, discounts), [discounts, library, products, template]);
+    const defaults = useMemo(() => composeDefaults(schema), [schema]);
+    const [draft, setDraft] = useState(defaults);
+    const [scope, setScope] = useState("all");
+    const [selectedEmails, setSelectedEmails] = useState([]);
+    const [recipients, setRecipients] = useState([]);
+    const [recipientsLoading, setRecipientsLoading] = useState(false);
+    const [when, setWhen] = useState("now");
+    const [sendAt, setSendAt] = useState(defaultSendAt);
+    const [preview, setPreview] = useState(null);
+    const [previewing, setPreviewing] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    useEffect(() => {
+        setResourceIds((current) => {
+            const valid = current.filter((id) => audiences.some((item) => item.id === id));
+            if (valid.length > 0)
+                return valid;
+            return audiences[0] ? [audiences[0].id] : [];
+        });
+    }, [audiences]);
+    useEffect(() => {
+        if (!template) {
+            setTemplateId("");
+            return;
+        }
+        if (!templates.some((item) => item.id === templateId)) {
+            setTemplateId(template.id);
+        }
+    }, [template, templateId, templates]);
+    useEffect(() => {
+        setDraft(defaults);
+    }, [defaults]);
+    useEffect(() => {
+        setSelectedEmails([]);
+    }, [resourceIds]);
+    const audienceKey = selectedAudiences.map((item) => item.id).join("|");
+    useEffect(() => {
+        if (selectedAudiences.length === 0) {
+            setRecipients([]);
+            return;
+        }
+        let cancelled = false;
+        setRecipientsLoading(true);
+        void Promise.all(selectedAudiences.map(async (audience) => {
+            const rows = await onLoadRecipients(audience.id);
+            return rows.map((row) => ({
+                ...row,
+                resourceId: audience.id,
+                label: row.label
+                    ? `${row.label} · ${audience.label}`
+                    : audience.label,
+            }));
+        }))
+            .then((groups) => {
+            if (cancelled)
+                return;
+            const seen = new Set();
+            const merged = [];
+            for (const group of groups) {
+                for (const row of group) {
+                    const email = row.email.trim().toLowerCase();
+                    if (!email || seen.has(email))
+                        continue;
+                    seen.add(email);
+                    merged.push({ ...row, email });
+                }
+            }
+            merged.sort((a, b) => a.email.localeCompare(b.email));
+            setRecipients(merged);
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                setRecipients([]);
+                setError(err instanceof Error ? err.message : "Failed to load emails");
+            }
+        })
+            .finally(() => {
+            if (!cancelled)
+                setRecipientsLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [audienceKey, onLoadRecipients, selectedAudiences]);
+    const primaryAudience = selectedAudiences[0];
+    const canSubmit = selectedAudiences.length > 0 &&
+        Boolean(template) &&
+        (!Object.keys(schema).length || requiredFilled(schema, draft, library)) &&
+        (scope === "all" || selectedEmails.length > 0) &&
+        (when === "now" || Boolean(sendAt)) &&
+        !busy;
+    const sampleRowId = useMemo(() => {
+        if (scope !== "emails" || selectedEmails.length === 0)
+            return undefined;
+        const hit = recipients.find((item) => item.email.trim().toLowerCase() === selectedEmails[0]?.toLowerCase());
+        return hit?.id ?? hit?.email ?? selectedEmails[0];
+    }, [recipients, scope, selectedEmails]);
+    const previewResourceId = useMemo(() => {
+        if (scope === "emails" && selectedEmails[0]) {
+            const hit = recipients.find((item) => item.email.trim().toLowerCase() === selectedEmails[0]?.toLowerCase());
+            if (hit?.resourceId)
+                return hit.resourceId;
+        }
+        return primaryAudience?.id;
+    }, [primaryAudience?.id, recipients, scope, selectedEmails]);
+    const loadPreview = useCallback(async () => {
+        if (tab !== "compose")
+            return;
+        if (!previewResourceId || !template) {
+            setPreview(null);
+            return;
+        }
+        if (Object.keys(schema).length && !requiredFilled(schema, draft, library)) {
+            setPreview(null);
+            return;
+        }
+        setPreviewing(true);
+        setError(null);
+        try {
+            const next = await onPreview({
+                resourceId: previewResourceId,
+                templateId: template.id,
+                rowId: sampleRowId,
+                input: Object.keys(schema).length ? draft : undefined,
+            });
+            setPreview(next);
+        }
+        catch (err) {
+            setPreview(null);
+            setError(err instanceof Error ? err.message : "Preview failed");
+        }
+        finally {
+            setPreviewing(false);
+        }
+    }, [
+        draft,
+        onPreview,
+        previewResourceId,
+        sampleRowId,
+        schema,
+        tab,
+        template,
+    ]);
+    useEffect(() => {
+        const timer = window.setTimeout(() => {
+            void loadPreview();
+        }, 280);
+        return () => window.clearTimeout(timer);
+    }, [loadPreview]);
+    const targetsForEmail = (email) => {
+        const hit = recipients.find((item) => item.email.trim().toLowerCase() === email.toLowerCase());
+        if (hit?.resourceId)
+            return [hit.resourceId];
+        return selectedAudiences.map((item) => item.id);
+    };
+    const submit = async () => {
+        if (!canSubmit || !template || selectedAudiences.length === 0)
+            return;
+        setBusy(true);
+        setError(null);
+        setNotice(null);
+        try {
+            const input = Object.keys(schema).length ? draft : undefined;
+            if (when === "later") {
+                if (!onSchedule)
+                    throw new Error("Scheduling is not available.");
+                const iso = new Date(sendAt).toISOString();
+                if (scope === "all") {
+                    for (const audience of selectedAudiences) {
+                        await onSchedule({
+                            resourceId: audience.id,
+                            templateId: template.id,
+                            input,
+                            audience: { mode: "all" },
+                            sendAt: iso,
+                        });
+                    }
+                }
+                else {
+                    const byResource = new Map();
+                    for (const email of selectedEmails) {
+                        for (const resourceId of targetsForEmail(email)) {
+                            const list = byResource.get(resourceId) ?? [];
+                            list.push(email);
+                            byResource.set(resourceId, list);
+                        }
+                    }
+                    for (const [resourceId, emails] of byResource) {
+                        await onSchedule({
+                            resourceId,
+                            templateId: template.id,
+                            input,
+                            audience: { mode: "emails", emails },
+                            sendAt: iso,
+                        });
+                    }
+                }
+                setNotice(`Scheduled for ${formatWhen(iso)}.`);
+            }
+            else {
+                let sent = 0;
+                let failed = 0;
+                if (scope === "all") {
+                    for (const audience of selectedAudiences) {
+                        const result = await onSend({
+                            resourceId: audience.id,
+                            templateId: template.id,
+                            input,
+                            audience: { mode: "all" },
+                        });
+                        sent += result.sent;
+                        failed += result.failed;
+                    }
+                }
+                else {
+                    const byResource = new Map();
+                    for (const email of selectedEmails) {
+                        for (const resourceId of targetsForEmail(email)) {
+                            const list = byResource.get(resourceId) ?? [];
+                            list.push(email);
+                            byResource.set(resourceId, list);
+                        }
+                    }
+                    for (const [resourceId, emails] of byResource) {
+                        const result = await onSend({
+                            resourceId,
+                            templateId: template.id,
+                            input,
+                            audience: { mode: "emails", emails },
+                        });
+                        sent += result.sent;
+                        failed += result.failed;
+                    }
+                }
+                setNotice(failed > 0 ? `Sent ${sent}. ${failed} failed.` : `Sent ${sent}.`);
+            }
+            await onRefresh();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Request failed");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const cancelCampaign = async (id) => {
+        if (!onCancel)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            await onCancel(id);
+            await onRefresh();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Cancel failed");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const saveLibrary = async (template) => {
+        if (!onSaveLibrary)
+            return;
+        await onSaveLibrary(template);
+        await onRefresh();
+    };
+    const deleteLibrary = async (id) => {
+        if (!onDeleteLibrary)
+            return;
+        await onDeleteLibrary(id);
+        await onRefresh();
+    };
+    const visibleFields = Object.entries(schema).filter(([key]) => fieldVisible(key, schema, draft, library));
+    const updateDraftField = (key, next) => {
+        setDraft((current) => {
+            let updated = { ...current, [key]: next };
+            if (key === "preset" && typeof next === "string") {
+                updated = applyLibraryPreset(updated, next, library, schema);
+                const wantsProducts = next === "drop_live" ||
+                    next === "restock" ||
+                    next === "promo" ||
+                    isDiscountPreset(next, library) ||
+                    library.some((item) => `library:${item.id}` === next &&
+                        (item.kind === "promo" || (item.productIds?.length ?? 0) > 0));
+                const currentProducts = Array.isArray(updated.productIds)
+                    ? updated.productIds
+                    : [];
+                if (wantsProducts &&
+                    currentProducts.length === 0 &&
+                    products[0] &&
+                    schema.productIds) {
+                    updated = { ...updated, productIds: [products[0].id] };
+                }
+            }
+            if (key === "discountId" && typeof next === "string") {
+                const hit = discounts.find((item) => item.id === next);
+                if (hit) {
+                    updated = {
+                        ...updated,
+                        discountCode: hit.code ?? updated.discountCode ?? "",
+                        discountOffer: hit.offerLabel ?? hit.label ?? updated.discountOffer ?? "",
+                        discountExpires: hit.expiresLabel ?? updated.discountExpires ?? "",
+                    };
+                }
+            }
+            return updated;
+        });
+    };
+    if (audiences.length === 0) {
+        return (_jsxs("div", { className: "vertebr-emails", children: [_jsx("div", { className: "vertebr-panel-head", children: _jsx("h2", { children: data.label }) }), _jsxs("div", { className: "vertebr-empty", children: ["No mail-enabled resources yet. Opt a resource in with", " ", _jsx("code", { children: "mail: [\"sendEmail\"]" }), "."] })] }));
+    }
+    return (_jsxs("div", { className: "vertebr-emails", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: data.label }), _jsx("div", { className: "vertebr-panel-head-actions", children: _jsx("button", { type: "button", className: "vertebr-btn", onClick: () => void onRefresh(), disabled: loading || busy, children: loading ? "Refreshing…" : "Refresh" }) })] }), tab === "compose" ? (_jsxs("div", { className: "vertebr-emails-layout", children: [_jsxs("form", { className: "vertebr-emails-compose", onSubmit: (event) => {
+                            event.preventDefault();
+                            void submit();
+                        }, children: [_jsxs("div", { className: "vertebr-emails-fields", children: [_jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Audience" }), _jsx(MultiCheckSelect, { options: audienceOptions, value: resourceIds, disabled: busy, placeholder: "Select audiences\u2026", emptyLabel: "No audiences", onChange: (next) => {
+                                                    if (next.length === 0 && audiences[0]) {
+                                                        setResourceIds([audiences[0].id]);
+                                                        return;
+                                                    }
+                                                    setResourceIds(next);
+                                                } })] }), _jsxs("div", { className: "vertebr-emails-segment", role: "group", "aria-label": "Scope", children: [_jsx("button", { type: "button", "data-active": scope === "all" ? "true" : undefined, onClick: () => setScope("all"), children: "Entire list" }), _jsx("button", { type: "button", "data-active": scope === "emails" ? "true" : undefined, onClick: () => setScope("emails"), children: "Specific emails" })] }), scope === "emails" ? (_jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Emails" }), _jsx(EmailRecipientSelect, { options: recipients, value: selectedEmails, loading: recipientsLoading, disabled: busy, onChange: setSelectedEmails })] })) : null, _jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Template" }), _jsx("select", { value: template?.id ?? "", onChange: (event) => setTemplateId(event.target.value), children: templates.map((item) => (_jsx("option", { value: item.id, children: item.label }, item.id))) })] }), visibleFields.map(([key, field]) => {
+                                        const multiline = isMultiline(key, field);
+                                        return (_jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: field.label ?? key }), field.type === "enum" ? (_jsx(EnumInput, { id: `emails-${key}`, value: draft[key], field: field, onChange: (next) => updateDraftField(key, next) })) : field.type === "enum[]" ? (_jsx(MultiCheckSelect, { options: (field.options ?? []).map((id) => {
+                                                        const product = key === "productIds"
+                                                            ? products.find((item) => item.id === id)
+                                                            : undefined;
+                                                        return {
+                                                            id,
+                                                            label: field.optionLabels?.[id] ?? id,
+                                                            secondary: product?.priceLabel,
+                                                            imageUrl: product?.imageUrl,
+                                                        };
+                                                    }), value: asStringList(draft[key]), disabled: busy, placeholder: key === "productIds"
+                                                        ? "Add products with photos…"
+                                                        : `Select ${field.label ?? key}…`, emptyLabel: "Nothing available", onChange: (next) => updateDraftField(key, next) })) : multiline ? (_jsx("textarea", { rows: 6, value: fieldValue(draft[key]), onChange: (event) => updateDraftField(key, event.target.value) })) : (_jsx("input", { type: "text", value: fieldValue(draft[key]), onChange: (event) => updateDraftField(key, event.target.value) }))] }, key));
+                                    }), _jsxs("div", { className: "vertebr-emails-segment", role: "group", "aria-label": "When", children: [_jsx("button", { type: "button", "data-active": when === "now" ? "true" : undefined, onClick: () => setWhen("now"), children: "Send now" }), _jsx("button", { type: "button", "data-active": when === "later" ? "true" : undefined, disabled: !data.canSchedule || !onSchedule, onClick: () => setWhen("later"), children: "Schedule" })] }), when === "later" ? (_jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Send at" }), _jsx("input", { type: "datetime-local", value: sendAt, onChange: (event) => setSendAt(event.target.value) })] })) : null, error ? _jsx("p", { className: "vertebr-mail-compose-error", children: error }) : null, notice ? _jsx("p", { className: "vertebr-emails-notice", children: notice }) : null] }), _jsx("div", { className: "vertebr-mail-compose-foot", children: _jsx("button", { type: "submit", className: "vertebr-btn vertebr-btn-primary", disabled: !canSubmit, children: busy
+                                        ? when === "later"
+                                            ? "Scheduling…"
+                                            : "Sending…"
+                                        : when === "later"
+                                            ? "Schedule email"
+                                            : scope === "all"
+                                                ? "Send to list"
+                                                : "Send" }) })] }), _jsx("div", { className: "vertebr-emails-side", children: _jsxs("div", { className: "vertebr-mail-preview", children: [_jsxs("div", { className: "vertebr-mail-preview-meta", children: [_jsxs("p", { children: [_jsx("span", { children: "To" }), _jsx("strong", { children: preview
+                                                        ? formatRecipients(preview.to)
+                                                        : scope === "all"
+                                                            ? selectedAudiences.length === 0
+                                                                ? "—"
+                                                                : selectedAudiences.length === 1
+                                                                    ? `Everyone on ${selectedAudiences[0]?.label}`
+                                                                    : `Everyone on ${selectedAudiences.length} lists`
+                                                            : selectedEmails.length > 0
+                                                                ? selectedEmails.length === 1
+                                                                    ? selectedEmails[0]
+                                                                    : `${selectedEmails.length} selected`
+                                                                : "—" })] }), _jsxs("p", { children: [_jsx("span", { children: "Subject" }), _jsx("strong", { children: preview?.subject ?? (previewing ? "Updating…" : "—") })] })] }), _jsx("div", { className: "vertebr-mail-preview-stage", children: _jsx("div", { className: "vertebr-mail-preview-frame", children: preview?.html ? (_jsx("iframe", { title: "Email preview", sandbox: "", srcDoc: preview.html })) : preview?.text ? (_jsx("pre", { children: preview.text })) : (_jsx("div", { className: "vertebr-mail-preview-empty", children: previewing
+                                                ? "Rendering host template…"
+                                                : "Pick an audience and template to preview." })) }) })] }) })] })) : null, tab === "templates" ? (_jsx(EmailsLibraryPanel, { templates: data.templates, library: library, products: products, discounts: discounts, canLibrary: data.canLibrary, busy: busy, previewResourceId: data.audiences[0]?.id, previewTemplateId: data.templates.find((item) => item.id === "sendEmail")?.id ??
+                    data.templates[0]?.id, onPreview: onPreview, onSaveLibrary: onSaveLibrary ? saveLibrary : undefined, onDeleteLibrary: onDeleteLibrary ? deleteLibrary : undefined })) : null, tab === "activity" ? (_jsx(EmailsActivityPanel, { campaigns: data.campaigns, history: history, canSchedule: data.canSchedule, canHistory: data.canHistory, busy: busy, onCancel: onCancel ? cancelCampaign : undefined })) : null] }));
+}

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

@@ -0,0 +1,25 @@
+import type { EmailsBoardResponse, MailDiscountOption, MailLibraryTemplate, MailPreviewResponse, MailProductOption } from "@vertebr/client";
+export type SystemMailPreset = {
+    id: string;
+    label: string;
+};
+export type EmailsLibraryPanelProps = {
+    templates: EmailsBoardResponse["templates"];
+    library: MailLibraryTemplate[];
+    products: MailProductOption[];
+    discounts?: MailDiscountOption[];
+    canLibrary?: boolean;
+    busy?: boolean;
+    previewResourceId?: string;
+    previewTemplateId?: string;
+    onPreview?: (payload: {
+        resourceId: string;
+        templateId: string;
+        input?: Record<string, unknown>;
+    }) => Promise<MailPreviewResponse>;
+    onSaveLibrary?: (template: MailLibraryTemplate) => Promise<void>;
+    onDeleteLibrary?: (id: string) => Promise<void>;
+};
+export declare function systemPresetsFromTemplates(templates: EmailsBoardResponse["templates"]): SystemMailPreset[];
+export declare function EmailsLibraryPanel({ templates, library, products, discounts, canLibrary, busy, previewResourceId, previewTemplateId, onPreview, onSaveLibrary, onDeleteLibrary, }: EmailsLibraryPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=EmailsLibraryPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailsLibraryPanel.d.ts","sourceRoot":"","sources":["../../../src/components/emails/EmailsLibraryPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,iBAAiB,CAAC;AAMzB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC5C,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE;QACpB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACjC,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACnC,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;AASF,wBAAgB,0BAA0B,CACxC,SAAS,EAAE,mBAAmB,CAAC,WAAW,CAAC,GAC1C,gBAAgB,EAAE,CAoBpB;AAgGD,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAc,EACd,UAAU,EACV,IAAI,EACJ,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,eAAe,GAChB,EAAE,uBAAuB,+BA8tBzB"}