@vertebr/react 0.3.0 → 0.5.0

package/dist/components/resources/ResourceMailModal.js

@@ -0,0 +1,196 @@
+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 "./ResourceActionModal";
+/** Presets that still need subject + body from the operator. */
+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 formatRecipients(to) {
+    return Array.isArray(to) ? to.join(", ") : to;
+}
+function fieldValue(value) {
+    return typeof value === "string" ? value : String(value ?? "");
+}
+function isMultiline(key, field) {
+    const hay = `${key} ${field.label ?? ""}`;
+    return field.type === "richtext" || /(body|message|html|notes)/i.test(hay);
+}
+function needsFreeformCopy(schema, value) {
+    if (!schema.preset)
+        return true;
+    const preset = fieldValue(value.preset);
+    return !preset || FREEFORM_PRESETS.has(preset);
+}
+function isDiscountPreset(preset) {
+    return DISCOUNT_PRESETS.has(preset);
+}
+function fieldVisible(key, schema, value) {
+    if (key === "subject" || key === "body") {
+        return needsFreeformCopy(schema, value);
+    }
+    if (DISCOUNT_FIELD_KEYS.has(key)) {
+        const preset = fieldValue(value.preset);
+        if (!isDiscountPreset(preset))
+            return false;
+        if (key === "discountId" && !(schema.discountId?.options?.length)) {
+            return false;
+        }
+        return true;
+    }
+    return true;
+}
+function requiredFilled(schema, value) {
+    return Object.entries(schema).every(([key, field]) => {
+        if (!fieldVisible(key, schema, value))
+            return true;
+        const freeformCopy = (key === "subject" || key === "body") &&
+            needsFreeformCopy(schema, value);
+        const discountRequired = (key === "discountCode" || key === "discountOffer") &&
+            isDiscountPreset(fieldValue(value.preset));
+        if (field.required === false && !freeformCopy && !discountRequired) {
+            return true;
+        }
+        if (field.type !== "string" &&
+            field.type !== "richtext" &&
+            field.type !== "enum") {
+            return true;
+        }
+        return Boolean(fieldValue(value[key]).trim());
+    });
+}
+function errorMessage(error) {
+    if (!(error instanceof Error))
+        return "Request failed";
+    const raw = error.message.trim();
+    if (!raw.startsWith("{"))
+        return raw;
+    try {
+        const parsed = JSON.parse(raw);
+        if (typeof parsed.error === "string" && parsed.error.trim()) {
+            return parsed.error;
+        }
+        if (parsed.error &&
+            typeof parsed.error === "object" &&
+            typeof parsed.error.message === "string" &&
+            parsed.error.message.trim()) {
+            return parsed.error.message;
+        }
+        if (typeof parsed.message === "string" && parsed.message.trim()) {
+            return parsed.message;
+        }
+    }
+    catch {
+        /* keep raw */
+    }
+    return raw;
+}
+export function ResourceMailModal({ title, count, schema, submitLabel, onClose, onPreview, onSubmit, }) {
+    const defaults = useMemo(() => actionInputDefaults(schema), [schema]);
+    const fields = useMemo(() => Object.entries(schema), [schema]);
+    const hasFields = fields.length > 0;
+    const [draft, setDraft] = useState(defaults);
+    const [preview, setPreview] = useState(null);
+    const [previewError, setPreviewError] = useState(null);
+    const [previewing, setPreviewing] = useState(false);
+    const [sending, setSending] = useState(false);
+    const canSend = !sending && (!hasFields || requiredFilled(schema, draft));
+    const visibleFields = fields.filter(([key]) => fieldVisible(key, schema, draft));
+    const loadPreview = useCallback(async (value) => {
+        if (hasFields && !requiredFilled(schema, value)) {
+            setPreview(null);
+            setPreviewError(null);
+            return;
+        }
+        setPreviewing(true);
+        setPreviewError(null);
+        try {
+            const next = await onPreview(value);
+            setPreview(next);
+        }
+        catch (error) {
+            setPreview(null);
+            setPreviewError(errorMessage(error));
+        }
+        finally {
+            setPreviewing(false);
+        }
+    }, [hasFields, onPreview, schema]);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            window.removeEventListener("keydown", onKeyDown);
+            document.body.style.overflow = previous;
+        };
+    }, [onClose]);
+    useEffect(() => {
+        if (!hasFields) {
+            void loadPreview({});
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            void loadPreview(draft);
+        }, 280);
+        return () => window.clearTimeout(timer);
+    }, [draft, hasFields, loadPreview]);
+    const send = async () => {
+        if (!canSend)
+            return;
+        setSending(true);
+        try {
+            await onSubmit(hasFields ? draft : {});
+            onClose();
+        }
+        catch (error) {
+            setPreviewError(errorMessage(error));
+        }
+        finally {
+            setSending(false);
+        }
+    };
+    return (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal vertebr-modal-form vertebr-mail-modal", role: "dialog", "aria-modal": "true", "aria-label": title, onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("p", { className: "vertebr-modal-eyebrow", children: count === 1 ? "1 person" : `${count} people` }), _jsx("h2", { children: title })] }), _jsx("div", { className: "vertebr-modal-actions", children: _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, "aria-label": "Close", children: "Close" }) })] }), _jsxs("div", { className: "vertebr-mail-layout", children: [_jsxs("form", { className: "vertebr-mail-compose", onSubmit: (event) => {
+                                event.preventDefault();
+                                void send();
+                            }, children: [hasFields ? (_jsxs("div", { className: "vertebr-mail-fields", children: [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: `mail-${key}`, value: draft[key], field: field, onChange: (next) => setDraft((current) => ({
+                                                            ...current,
+                                                            [key]: next,
+                                                        })) })) : multiline ? (_jsx("textarea", { rows: 7, value: fieldValue(draft[key]), placeholder: "Plain text \u2014 the host template styles it.", onChange: (event) => setDraft((current) => ({
+                                                            ...current,
+                                                            [key]: event.target.value,
+                                                        })) })) : (_jsx("input", { type: "text", value: fieldValue(draft[key]), onChange: (event) => setDraft((current) => ({
+                                                            ...current,
+                                                            [key]: event.target.value,
+                                                        })) }))] }, key));
+                                        }), schema.preset && !needsFreeformCopy(schema, draft) ? (_jsx("p", { className: "vertebr-mail-compose-hint", children: "Preview updates from the selected preset. Switch to Custom to write your own copy." })) : null] })) : (_jsx("p", { className: "vertebr-mail-compose-note", children: "Host template \u2014 Vertebr only delivers it." })), previewError ? (_jsx("p", { className: "vertebr-mail-compose-error", children: previewError })) : null, _jsx("div", { className: "vertebr-mail-compose-foot", children: _jsx("button", { type: "submit", className: "vertebr-btn vertebr-btn-primary", disabled: !canSend, children: sending ? "Sending…" : submitLabel }) })] }), _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)
+                                                        : count === 1
+                                                            ? "—"
+                                                            : `${count} recipients` })] }), _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: previewError ??
+                                                (previewing
+                                                    ? "Rendering host template…"
+                                                    : hasFields
+                                                        ? schema.preset && needsFreeformCopy(schema, draft)
+                                                            ? "Write a subject and body to preview."
+                                                            : schema.preset
+                                                                ? "Pick a preset to preview."
+                                                                : "Write a subject and body to preview."
+                                                        : "Loading preview…") })) }) })] })] })] }) }));
+}

package/dist/components/resources/ResourceTable.d.ts

@@ -1,4 +1,4 @@
-import type { FieldSchema, GalleryItem, ResourceActionMeta, ResourceUploadMeta } from "@vertebr/client";
+import type { FieldSchema, GalleryItem, MailPreviewResponse, ResourceActionMeta, ResourceUploadMeta } from "@vertebr/client";
 type ResourcePanelProps = {
     schema: Record<string, FieldSchema>;
     items: Record<string, unknown>[];
@@ -8,6 +8,8 @@ type ResourcePanelProps = {
         delete?: boolean;
     };
     actions?: Record<string, ResourceActionMeta>;
+    /** Resource label, e.g. `"Products"` → Add product. */
+    label?: string;
     uploads?: Record<string, ResourceUploadMeta>;
     rowIdKeys?: string[];
     /** Persist column visibility under this key (e.g. resource id). */
@@ -15,7 +17,11 @@ type ResourcePanelProps = {
     onUpdate?: (rowId: string, value: Record<string, unknown>) => Promise<void>;
     onCreate?: (value: Record<string, unknown>) => Promise<void>;
     onDelete?: (rowId: string) => Promise<void>;
-    onAction?: (rowId: string, actionId: string) => Promise<void>;
+    onAction?: (rowId: string, actionId: string, input?: Record<string, unknown>) => Promise<void>;
+    onActionDone?: () => Promise<void> | void;
+    onPreviewMail?: (rowId: string, actionId: string, input?: Record<string, unknown>) => Promise<MailPreviewResponse>;
+    collectionActions?: Record<string, ResourceActionMeta>;
+    onCollectionAction?: (actionId: string, input?: Record<string, unknown>) => Promise<void>;
     onUpload?: (field: string, files: File[]) => Promise<Array<{
         url: string;
         name?: string;
@@ -24,7 +30,7 @@ type ResourcePanelProps = {
     onListGallery?: () => Promise<GalleryItem[]>;
     onUploadGallery?: (files: File[]) => Promise<GalleryItem[]>;
 };
-export declare function ResourcePanel({ schema, items, permissions, actions, uploads, rowIdKeys, storageKey, onUpdate, onCreate, onDelete, onAction, onUpload, galleryUpload, onListGallery, onUploadGallery, }: ResourcePanelProps): import("react").JSX.Element;
+export declare function ResourcePanel({ schema, items, permissions, actions, label, uploads, rowIdKeys, storageKey, onUpdate, onCreate, onDelete, onAction, onActionDone, onPreviewMail, collectionActions, onCollectionAction, onUpload, galleryUpload, onListGallery, onUploadGallery, }: ResourcePanelProps): import("react").JSX.Element;
 /** @deprecated Prefer ResourcePanel */
 export declare function ResourceTable(props: {
     schema: Record<string, FieldSchema>;

package/dist/components/resources/ResourceTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAMzB,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IACjC,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3B,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;CAC7D,CAAC;AA+DF,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAY,EACZ,OAAO,EACP,SAA0C,EAC1C,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,GAChB,EAAE,kBAAkB,+BA+ZpB;AAED,uCAAuC;AACvC,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;CAClC,+BAEA"}
+{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"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"}