@voyantjs/notifications-react 0.106.0 → 0.108.0

package/dist/admin/notification-reminder-rules-host.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdminHref, useAdminNavigate } from "@voyantjs/admin";
+import { Badge, Button, buttonVariants, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { Layers, Loader2, Pencil, Plus, Search } from "lucide-react";
+import { useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { useNotificationReminderRules, } from "../index.js";
+import { NotificationReminderRuleDialog } from "./notification-reminder-rule-dialog.js";
+import { DestinationLink } from "./notifications-admin-shared.js";
+const reminderTargetKeys = [
+    "booking_confirmed",
+    "booking_payment_schedule",
+    "payment_complete",
+    "booking_cancelled_non_payment",
+];
+function getReminderTargetLabel(targets, targetType) {
+    return targets[targetType] ?? targetType;
+}
+/**
+ * Packaged admin host for the reminder rules list page (packaged-admin RFC
+ * Phase 3). Zero-prop: list/filter state stays component-local and the
+ * per-rule "Manage stages" link resolves through the
+ * `notificationReminderRule.detail` semantic destination.
+ */
+export function NotificationReminderRulesHost() {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const t = messages.admin.reminderRulesPage;
+    const common = messages.admin.common;
+    const resolveHref = useAdminHref();
+    const navigateTo = useAdminNavigate();
+    const [search, setSearch] = useState("");
+    const [channel, setChannel] = useState("all");
+    const [status, setStatus] = useState("all");
+    const [targetType, setTargetType] = useState("all");
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editing, setEditing] = useState();
+    const { data, isPending, refetch } = useNotificationReminderRules({
+        search,
+        channel: channel === "all" ? undefined : channel,
+        status: status === "all" ? undefined : status,
+        targetType: targetType === "all" ? undefined : targetType,
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: t.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: t.description })] }), _jsxs(Button, { onClick: () => {
+                            setEditing(undefined);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t.newRule] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "relative max-w-sm flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: t.searchPlaceholder, value: search, onChange: (event) => setSearch(event.target.value), className: "pl-9" })] }), _jsxs(Select, { value: targetType, onValueChange: (value) => setTargetType(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[190px]", children: _jsx(SelectValue, { placeholder: t.targetFilterPlaceholder }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: t.allTargets }), reminderTargetKeys.map((value) => (_jsx(SelectItem, { value: value, children: t.targets[value] }, value)))] })] }), _jsxs(Select, { value: channel, onValueChange: (value) => setChannel(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: common.channelFilterPlaceholder }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: common.allChannels }), _jsx(SelectItem, { value: "email", children: common.channelEmail }), _jsx(SelectItem, { value: "sms", children: common.channelSms })] })] }), _jsxs(Select, { value: status, onValueChange: (value) => setStatus(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: common.statusFilterPlaceholder }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: common.allStatuses }), _jsx(SelectItem, { value: "draft", children: common.statusDraft }), _jsx(SelectItem, { value: "active", children: common.statusActive }), _jsx(SelectItem, { value: "archived", children: common.statusArchived })] })] })] }), isPending ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })) : null, !isPending && (!data?.data || data.data.length === 0) ? (_jsx("div", { className: "rounded-md border border-dashed p-8 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: t.empty }) })) : null, !isPending && data?.data && data.data.length > 0 ? (_jsx("div", { className: "rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-4 py-3", children: "Rule" }), _jsx("th", { className: "px-4 py-3", children: "Target" }), _jsx("th", { className: "px-4 py-3", children: "Channel" }), _jsx("th", { className: "px-4 py-3", children: "Status" }), _jsx("th", { className: "px-4 py-3 text-right", children: "Actions" })] }) }), _jsx("tbody", { children: data.data.map((rule) => (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "px-4 py-3", children: _jsx("div", { className: "font-medium", children: rule.name }) }), _jsx("td", { className: "px-4 py-3", children: getReminderTargetLabel(t.targets, rule.targetType) }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: "outline", children: rule.channel }) }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: rule.status === "active" ? "default" : "secondary", children: rule.status }) }), _jsx("td", { className: "px-4 py-3 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsxs(DestinationLink, { href: resolveHref("notificationReminderRule.detail", {
+                                                        ruleId: rule.id,
+                                                    }), onNavigate: () => navigateTo("notificationReminderRule.detail", { ruleId: rule.id }), className: buttonVariants({ variant: "ghost", size: "sm" }), children: [_jsx(Layers, { className: "mr-2 h-4 w-4" }), t.manageStages] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                        setEditing(rule);
+                                                        setDialogOpen(true);
+                                                    }, children: _jsx(Pencil, { className: "h-4 w-4" }) })] }) })] }, rule.id))) })] }) })) : null, _jsx(NotificationReminderRuleDialog, { open: dialogOpen, onOpenChange: setDialogOpen, rule: editing, onSuccess: () => {
+                    setDialogOpen(false);
+                    setEditing(undefined);
+                    void refetch();
+                } })] }));
+}

package/dist/admin/notification-reminder-runs-host.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Packaged admin host for the reminder runs page (packaged-admin RFC
+ * Phase 3). Zero-prop, read-only: filter state stays component-local and
+ * there is no cross-route navigation.
+ */
+export declare function NotificationReminderRunsHost(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=notification-reminder-runs-host.d.ts.map

package/dist/admin/notification-reminder-runs-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-reminder-runs-host.d.ts","sourceRoot":"","sources":["../../src/admin/notification-reminder-runs-host.tsx"],"names":[],"mappings":"AAeA;;;;GAIG;AACH,wBAAgB,4BAA4B,4CA8F3C"}

package/dist/admin/notification-reminder-runs-host.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { useNotificationReminderRuns } from "../index.js";
+/**
+ * Packaged admin host for the reminder runs page (packaged-admin RFC
+ * Phase 3). Zero-prop, read-only: filter state stays component-local and
+ * there is no cross-route navigation.
+ */
+export function NotificationReminderRunsHost() {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const t = messages.admin.reminderRunsPage;
+    const common = messages.admin.common;
+    const [status, setStatus] = useState("all");
+    const { data, isPending } = useNotificationReminderRuns({
+        status: status === "all" ? undefined : status,
+        limit: 50,
+        offset: 0,
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: t.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: t.description })] }), _jsx("div", { className: "flex items-center gap-3", children: _jsxs(Select, { value: status, onValueChange: (value) => setStatus(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[160px]", children: _jsx(SelectValue, { placeholder: common.statusFilterPlaceholder }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: common.allStatuses }), _jsx(SelectItem, { value: "queued", children: common.statusQueued }), _jsx(SelectItem, { value: "processing", children: common.statusProcessing }), _jsx(SelectItem, { value: "sent", children: common.statusSent }), _jsx(SelectItem, { value: "skipped", children: common.statusSkipped }), _jsx(SelectItem, { value: "failed", children: common.statusFailed })] })] }) }), isPending ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })) : null, !isPending && (!data?.data || data.data.length === 0) ? (_jsx("div", { className: "rounded-md border border-dashed p-8 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: t.empty }) })) : null, !isPending && data?.data && data.data.length > 0 ? (_jsx("div", { className: "rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-4 py-3", children: "Rule" }), _jsx("th", { className: "px-4 py-3", children: "Target" }), _jsx("th", { className: "px-4 py-3", children: "Recipient" }), _jsx("th", { className: "px-4 py-3", children: "Status" }), _jsx("th", { className: "px-4 py-3", children: "Processed" })] }) }), _jsx("tbody", { children: data.data.map((run) => (_jsxs("tr", { className: "border-t", children: [_jsxs("td", { className: "px-4 py-3", children: [_jsx("div", { className: "font-medium", children: run.reminderRule.name }), _jsx("div", { className: "font-mono text-xs text-muted-foreground", children: run.reminderRule.slug })] }), _jsxs("td", { className: "px-4 py-3", children: [_jsx("div", { children: run.targetType }), _jsx("div", { className: "font-mono text-xs text-muted-foreground", children: run.targetId })] }), _jsx("td", { className: "px-4 py-3", children: run.recipient ?? "—" }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: run.status === "sent"
+                                                ? "default"
+                                                : run.status === "failed"
+                                                    ? "destructive"
+                                                    : "secondary", children: run.status }) }), _jsx("td", { className: "px-4 py-3", children: new Date(run.processedAt).toLocaleString() })] }, run.id))) })] }) })) : null] }));
+}

package/dist/admin/notification-settings-host.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Packaged admin host for the tenant-wide notification settings page
+ * (packaged-admin RFC Phase 3). Zero-prop: the settings form owns its data
+ * wiring through `@voyantjs/notifications-react`.
+ */
+export declare function NotificationSettingsHost(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=notification-settings-host.d.ts.map

package/dist/admin/notification-settings-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-settings-host.d.ts","sourceRoot":"","sources":["../../src/admin/notification-settings-host.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,wBAAwB,4CAYvC"}

package/dist/admin/notification-settings-host.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NotificationSettingsForm } from "../components/notification-settings-form.js";
+/**
+ * Packaged admin host for the tenant-wide notification settings page
+ * (packaged-admin RFC Phase 3). Zero-prop: the settings form owns its data
+ * wiring through `@voyantjs/notifications-react`.
+ */
+export function NotificationSettingsHost() {
+    return (_jsxs("div", { className: "container mx-auto space-y-6 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Notification settings" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Tenant-wide quiet hours, blackout dates, recipient rate limits, and suppression window." })] }), _jsx(NotificationSettingsForm, {})] }));
+}

package/dist/admin/notification-template-authoring-help.d.ts

@@ -0,0 +1,25 @@
+import type { NotificationLiquidSnippet, NotificationTemplateVariableCategory, NotificationTemplateVariableDefinition } from "@voyantjs/notifications";
+type NotificationTemplateAuthoringHelpProps = {
+    variableGroups: NotificationTemplateVariableCategory[];
+    snippets?: NotificationLiquidSnippet[];
+    onInsertVariable?: (variable: NotificationTemplateVariableDefinition) => void;
+    onInsertSnippet?: (snippet: NotificationLiquidSnippet) => void;
+    className?: string;
+    messages?: {
+        title?: string;
+        description?: string;
+        tabs?: {
+            variables?: string;
+            liquid?: string;
+        };
+        searchPlaceholder?: string;
+        noVariables?: string;
+        example?: string;
+        insert?: string;
+        liquidUsage?: string;
+        noLiquidSnippets?: string;
+    };
+};
+export declare function NotificationTemplateAuthoringHelp({ variableGroups, snippets, onInsertVariable, onInsertSnippet, className, messages, }: NotificationTemplateAuthoringHelpProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=notification-template-authoring-help.d.ts.map

package/dist/admin/notification-template-authoring-help.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-template-authoring-help.d.ts","sourceRoot":"","sources":["../../src/admin/notification-template-authoring-help.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,yBAAyB,EACzB,oCAAoC,EACpC,sCAAsC,EACvC,MAAM,yBAAyB,CAAA;AAWhC,KAAK,sCAAsC,GAAG;IAC5C,cAAc,EAAE,oCAAoC,EAAE,CAAA;IACtD,QAAQ,CAAC,EAAE,yBAAyB,EAAE,CAAA;IACtC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,sCAAsC,KAAK,IAAI,CAAA;IAC7E,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAA;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,IAAI,CAAC,EAAE;YACL,SAAS,CAAC,EAAE,MAAM,CAAA;YAClB,MAAM,CAAC,EAAE,MAAM,CAAA;SAChB,CAAA;QACD,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF,CAAA;AAED,wBAAgB,iCAAiC,CAAC,EAChD,cAAc,EACd,QAAa,EACb,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,sCAAsC,2CAiBxC"}

package/dist/admin/notification-template-authoring-help.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContractTemplateAuthoringHelp, } from "@voyantjs/ui/components/contract-template-authoring-help";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+export function NotificationTemplateAuthoringHelp({ variableGroups, snippets = [], onInsertVariable, onInsertSnippet, className, messages, }) {
+    const defaults = useNotificationsUiMessagesOrDefault().admin.authoringHelp;
+    return (_jsx(ContractTemplateAuthoringHelp, { className: className, title: messages?.title ?? defaults.title, description: messages?.description ?? defaults.description, messages: messages, variableGroups: variableGroups, snippets: snippets, onInsertVariable: onInsertVariable, onInsertSnippet: onInsertSnippet }));
+}

package/dist/admin/notification-template-detail-host.d.ts

@@ -0,0 +1,11 @@
+export interface NotificationTemplateDetailHostProps {
+    id: string;
+}
+/**
+ * Packaged admin host for the notification template detail page
+ * (packaged-admin RFC Phase 3). Takes the template id as a prop — the host
+ * route file binds `Route.useParams()` onto it. Back links resolve through
+ * the `notificationTemplate.list` semantic destination.
+ */
+export declare function NotificationTemplateDetailHost({ id }: NotificationTemplateDetailHostProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=notification-template-detail-host.d.ts.map

package/dist/admin/notification-template-detail-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-template-detail-host.d.ts","sourceRoot":"","sources":["../../src/admin/notification-template-detail-host.tsx"],"names":[],"mappings":"AAgGA,MAAM,WAAW,mCAAmC;IAClD,EAAE,EAAE,MAAM,CAAA;CACX;AAED;;;;;GAKG;AACH,wBAAgB,8BAA8B,CAAC,EAAE,EAAE,EAAE,EAAE,mCAAmC,2CAyVzF"}

package/dist/admin/notification-template-detail-host.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAdminHref, useAdminNavigate } from "@voyantjs/admin";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Label, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, } from "@voyantjs/ui/components";
+import { ArrowLeft, Loader2, Pencil } from "lucide-react";
+import { lazy, Suspense, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { useNotificationDeliveries, useNotificationTemplate, useNotificationTemplateAuthoring, useNotificationTemplateTools, } from "../index.js";
+import { NotificationDeliveryDetailDialog } from "./notification-delivery-detail-dialog.js";
+import { DestinationLink } from "./notifications-admin-shared.js";
+// Lazy-load: the template dialog pulls the rich-text editor (tiptap +
+// prosemirror). Keeping it out of the detail-page chunk means those modules
+// only download when the user opens the edit dialog.
+const NotificationTemplateDialog = lazy(() => import("./notification-template-dialog.js").then((m) => ({
+    default: m.NotificationTemplateDialog,
+})));
+function parsePath(path) {
+    return path
+        .replace(/\[(\d+)\]/g, ".$1")
+        .split(".")
+        .filter(Boolean);
+}
+function setDeepValue(target, path, value) {
+    const segments = parsePath(path);
+    let current = target;
+    for (let index = 0; index < segments.length; index += 1) {
+        const segment = segments[index];
+        const isLast = index === segments.length - 1;
+        const nextSegment = segments[index + 1];
+        const nextIsIndex = nextSegment ? /^\d+$/.test(nextSegment) : false;
+        if (Array.isArray(current)) {
+            const arrayIndex = Number(segment);
+            if (Number.isNaN(arrayIndex))
+                return;
+            if (isLast) {
+                current[arrayIndex] = value;
+                return;
+            }
+            if (current[arrayIndex] == null) {
+                current[arrayIndex] = nextIsIndex ? [] : {};
+            }
+            current = current[arrayIndex];
+            continue;
+        }
+        if (typeof current !== "object" || current == null)
+            return;
+        const record = current;
+        if (isLast) {
+            record[segment] = value;
+            return;
+        }
+        if (record[segment] == null) {
+            record[segment] = nextIsIndex ? [] : {};
+        }
+        current = record[segment];
+    }
+}
+function buildSamplePayload(variableGroups) {
+    const sample = {};
+    for (const group of variableGroups) {
+        for (const variable of group.variables) {
+            setDeepValue(sample, variable.key, variable.example);
+        }
+    }
+    return sample;
+}
+/**
+ * Packaged admin host for the notification template detail page
+ * (packaged-admin RFC Phase 3). Takes the template id as a prop — the host
+ * route file binds `Route.useParams()` onto it. Back links resolve through
+ * the `notificationTemplate.list` semantic destination.
+ */
+export function NotificationTemplateDetailHost({ id }) {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const t = messages.admin.templateDetail;
+    const common = messages.admin.common;
+    const [editOpen, setEditOpen] = useState(false);
+    const [previewDataInput, setPreviewDataInput] = useState("");
+    const [selectedDeliveryId, setSelectedDeliveryId] = useState(null);
+    const resolveHref = useAdminHref();
+    const navigateTo = useAdminNavigate();
+    const { data: template, isPending, error, refetch } = useNotificationTemplate(id);
+    const { variableCatalog } = useNotificationTemplateAuthoring();
+    const variableGroups = useMemo(() => variableCatalog.map((group) => ({
+        ...group,
+        variables: group.variables.map((variable) => ({
+            ...variable,
+            example: String(variable.example),
+        })),
+    })), [variableCatalog]);
+    const defaultPreviewData = useMemo(() => JSON.stringify(buildSamplePayload(variableGroups), null, 2), [variableGroups]);
+    const { preview } = useNotificationTemplateTools();
+    const deliveries = useNotificationDeliveries({
+        templateSlug: template?.slug,
+        limit: 20,
+        offset: 0,
+        enabled: Boolean(template?.slug),
+    });
+    const parsePreviewData = () => {
+        try {
+            const parsed = previewDataInput.trim() ? JSON.parse(previewDataInput) : {};
+            if (typeof parsed !== "object" || parsed == null || Array.isArray(parsed)) {
+                throw new Error(common.previewDataNotObject);
+            }
+            return parsed;
+        }
+        catch (previewError) {
+            throw new Error(previewError instanceof Error ? previewError.message : common.previewInvalidJson);
+        }
+    };
+    const handlePreview = async () => {
+        if (!template)
+            return;
+        try {
+            const data = parsePreviewData();
+            await preview.mutateAsync({
+                channel: template.channel,
+                provider: null,
+                fromAddress: template.fromAddress,
+                subjectTemplate: template.subjectTemplate,
+                htmlTemplate: template.htmlTemplate,
+                textTemplate: template.textTemplate,
+                data,
+            });
+        }
+        catch (previewError) {
+            toast.error(previewError instanceof Error ? previewError.message : common.previewFailed);
+        }
+    };
+    if (isPending) {
+        return (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }));
+    }
+    if (error || !template) {
+        return (_jsxs("div", { className: "flex flex-col gap-4 p-6", children: [_jsxs(DestinationLink, { href: resolveHref("notificationTemplate.list", {}), onNavigate: () => navigateTo("notificationTemplate.list", {}), className: "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), t.backToTemplates] }), _jsx("div", { className: "rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive", children: error instanceof Error ? error.message : t.notFound })] }));
+    }
+    const renderedPreview = preview.data;
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(DestinationLink, { href: resolveHref("notificationTemplate.list", {}), onNavigate: () => navigateTo("notificationTemplate.list", {}), className: "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), t.backToTemplates] }), _jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: template.name }), _jsx("p", { className: "font-mono text-xs text-muted-foreground", children: template.slug })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: template.channel }), _jsx(Badge, { variant: template.status === "active" ? "default" : "secondary", children: template.status })] })] }), _jsxs(Button, { onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), t.editTemplate] })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4", children: [_jsx(MetaCard, { label: t.metaChannel, value: template.channel }), _jsx(MetaCard, { label: t.metaFrom, value: template.fromAddress ?? common.defaultSender }), _jsx(MetaCard, { label: t.metaUpdated, value: new Date(template.updatedAt).toLocaleString() })] }), _jsxs(Tabs, { defaultValue: "overview", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "overview", children: t.tabOverview }), _jsx(TabsTrigger, { value: "preview", children: t.tabPreview }), _jsx(TabsTrigger, { value: "deliveries", children: t.recentDeliveries })] }), _jsx(TabsContent, { value: "overview", className: "mt-4 space-y-4", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t.messageStructureTitle }) }), _jsxs(CardContent, { className: "space-y-3 text-sm", children: [_jsx(KeyValue, { label: t.subjectLabel, value: template.subjectTemplate ?? "—" }), _jsx(KeyValue, { label: t.textFallbackLabel, value: template.textTemplate ?? "—" }), _jsx(KeyValue, { label: t.descriptionLabel, value: template.metadata ? JSON.stringify(template.metadata) : "—" })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t.htmlBodyTitle }) }), _jsx(CardContent, { children: template.htmlTemplate ? (_jsx("div", { className: "prose prose-sm max-w-none rounded-md border bg-background px-4 py-4 dark:prose-invert", 
+                                                // biome-ignore lint/security/noDangerouslySetInnerHtml: Notification template HTML is rendered for preview.
+                                                dangerouslySetInnerHTML: { __html: template.htmlTemplate } })) : (_jsx("div", { className: "rounded-md border bg-muted/20 px-4 py-3 text-sm text-muted-foreground", children: t.noHtmlConfigured })) })] })] }) }), _jsx(TabsContent, { value: "preview", className: "mt-4", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t.sampleDataTitle }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx(Label, { children: t.customJsonLabel }), _jsx(Textarea, { value: previewDataInput || defaultPreviewData, onChange: (event) => setPreviewDataInput(event.target.value), rows: 16, className: "font-mono text-xs" }), _jsxs(Button, { type: "button", variant: "outline", onClick: handlePreview, disabled: preview.isPending, children: [preview.isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, t.renderPreview] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t.renderedOutputTitle }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx(KeyValue, { label: t.subjectLabel, value: renderedPreview?.subject ?? t.notRenderedYet }), template.channel === "email" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t.htmlBodyTitle }), renderedPreview?.html ? (_jsx("div", { className: "prose prose-sm max-w-none rounded-md border bg-background px-4 py-4 dark:prose-invert", 
+                                                                    // biome-ignore lint/security/noDangerouslySetInnerHtml: Rendered preview HTML is generated server-side for preview.
+                                                                    dangerouslySetInnerHTML: { __html: renderedPreview.html } })) : (_jsx("div", { className: "rounded-md border bg-muted/20 px-4 py-3 text-sm text-muted-foreground", children: t.noRenderedHtml }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t.textFallbackLabel }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: renderedPreview?.text ?? t.noRenderedText })] })] })) : (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t.smsBodyLabel }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: renderedPreview?.text ?? t.noRenderedText })] }))] })] })] }) }), _jsx(TabsContent, { value: "deliveries", className: "mt-4", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t.recentDeliveries }) }), _jsx(CardContent, { children: deliveries.isPending ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })) : deliveries.data?.data && deliveries.data.data.length > 0 ? (_jsx("div", { className: "rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-4 py-3", children: "Recipient" }), _jsx("th", { className: "px-4 py-3", children: "Provider" }), _jsx("th", { className: "px-4 py-3", children: "Status" }), _jsx("th", { className: "px-4 py-3", children: "Created" }), _jsx("th", { className: "px-4 py-3 text-right", children: "View" })] }) }), _jsx("tbody", { children: deliveries.data.data.map((delivery) => (_jsxs("tr", { className: "border-t", children: [_jsxs("td", { className: "px-4 py-3", children: [_jsx("div", { children: delivery.toAddress }), delivery.subject ? (_jsx("div", { className: "text-xs text-muted-foreground", children: delivery.subject })) : null] }), _jsx("td", { className: "px-4 py-3", children: delivery.provider }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: delivery.status === "sent"
+                                                                        ? "default"
+                                                                        : delivery.status === "failed"
+                                                                            ? "destructive"
+                                                                            : "secondary", children: delivery.status }) }), _jsx("td", { className: "px-4 py-3", children: new Date(delivery.createdAt).toLocaleString() }), _jsx("td", { className: "px-4 py-3 text-right", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedDeliveryId(delivery.id), children: t.inspect }) })] }, delivery.id))) })] }) })) : (_jsx("div", { className: "rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground", children: t.noDeliveriesForTemplate })) })] }) })] }), _jsx(Suspense, { fallback: null, children: _jsx(NotificationTemplateDialog, { open: editOpen, onOpenChange: setEditOpen, template: template, onSuccess: () => {
+                        setEditOpen(false);
+                        void refetch();
+                    } }) }), _jsx(NotificationDeliveryDetailDialog, { deliveryId: selectedDeliveryId, open: Boolean(selectedDeliveryId), onOpenChange: (open) => {
+                    if (!open)
+                        setSelectedDeliveryId(null);
+                } })] }));
+}
+function MetaCard({ label, value }) {
+    return (_jsxs("div", { className: "rounded-md border p-4", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: label }), _jsx("div", { className: "mt-2 text-sm", children: value })] }));
+}
+function KeyValue({ label, value }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: label }), _jsx("div", { className: "break-words text-sm", children: value })] }));
+}

package/dist/admin/notification-template-dialog.d.ts

@@ -0,0 +1,10 @@
+import { type NotificationTemplateRecord } from "../index.js";
+type NotificationTemplateDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    template?: NotificationTemplateRecord;
+    onSuccess: () => void;
+};
+export declare function NotificationTemplateDialog(props: NotificationTemplateDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=notification-template-dialog.d.ts.map

package/dist/admin/notification-template-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-template-dialog.d.ts","sourceRoot":"","sources":["../../src/admin/notification-template-dialog.tsx"],"names":[],"mappings":"AAkCA,OAAO,EACL,KAAK,0BAA0B,EAIhC,MAAM,aAAa,CAAA;AAoDpB,KAAK,+BAA+B,GAAG;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,0BAA0B,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AA2GD,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,kDAMhF"}