@voyantjs/notifications-react 0.106.0 → 0.107.0

package/dist/components/stage-channel-editor-dialog.d.ts

@@ -0,0 +1,11 @@
+import { type ReminderStageChannelRecord } from "../index.js";
+export interface StageChannelEditorDialogProps {
+    reminderRuleId: string;
+    stageId: string;
+    channel: ReminderStageChannelRecord | null;
+    defaultOrderIndex?: number;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function StageChannelEditorDialog({ reminderRuleId, stageId, channel, defaultOrderIndex, open, onOpenChange, }: StageChannelEditorDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stage-channel-editor-dialog.d.ts.map

package/dist/components/stage-channel-editor-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-channel-editor-dialog.d.ts","sourceRoot":"","sources":["../../src/components/stage-channel-editor-dialog.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,KAAK,0BAA0B,EAAmC,MAAM,aAAa,CAAA;AAoC9F,MAAM,WAAW,6BAA6B;IAC5C,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,0BAA0B,GAAG,IAAI,CAAA;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACtC;AAED,wBAAgB,wBAAwB,CAAC,EACvC,cAAc,EACd,OAAO,EACP,OAAO,EACP,iBAAqB,EACrB,IAAI,EACJ,YAAY,GACb,EAAE,6BAA6B,2CA+J/B"}

package/dist/components/stage-channel-editor-dialog.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@voyantjs/ui/components/field";
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { useReminderStageChannelMutation } from "../index.js";
+import { TemplatePicker } from "./template-picker.js";
+function fromRecord(channel, orderIndex) {
+    if (!channel) {
+        return {
+            orderIndex,
+            channel: "email",
+            provider: "automatic",
+            templateId: null,
+            recipientKind: "primary",
+        };
+    }
+    const provider = channel.provider === "resend" || channel.provider === "twilio" ? channel.provider : "automatic";
+    return {
+        orderIndex: channel.orderIndex,
+        channel: channel.channel,
+        provider,
+        templateId: channel.templateId ?? null,
+        recipientKind: channel.recipientKind,
+    };
+}
+export function StageChannelEditorDialog({ reminderRuleId, stageId, channel, defaultOrderIndex = 0, open, onOpenChange, }) {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const { create, update } = useReminderStageChannelMutation(reminderRuleId, stageId);
+    const [form, setForm] = useState(() => fromRecord(channel, defaultOrderIndex));
+    const isEdit = Boolean(channel);
+    const isPending = create.isPending || update.isPending;
+    useEffect(() => {
+        if (open)
+            setForm(fromRecord(channel, defaultOrderIndex));
+    }, [open, channel, defaultOrderIndex]);
+    const setField = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));
+    const handleSubmit = async () => {
+        const input = {
+            orderIndex: form.orderIndex,
+            channel: form.channel,
+            provider: form.provider === "automatic" ? null : form.provider,
+            templateId: form.templateId,
+            templateSlug: null,
+            recipientKind: form.recipientKind,
+            recipientRole: null,
+        };
+        if (isEdit && channel) {
+            await update.mutateAsync({ channelId: channel.id, input });
+        }
+        else {
+            await create.mutateAsync(input);
+        }
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEdit ? messages.channel.titles.edit : messages.channel.titles.create }) }), _jsx(DialogBody, { children: _jsxs(FieldGroup, { children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-[1fr_8rem]", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "channel-channel", children: messages.channel.fields.channel }), _jsxs(Select, { value: form.channel, onValueChange: (v) => {
+                                                    if (!v)
+                                                        return;
+                                                    const next = v;
+                                                    setForm((prev) => ({
+                                                        ...prev,
+                                                        channel: next,
+                                                        // Picked template no longer matches the new channel — clear it.
+                                                        templateId: null,
+                                                    }));
+                                                }, children: [_jsx(SelectTrigger, { id: "channel-channel", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "email", children: messages.channel.channels.email }), _jsx(SelectItem, { value: "sms", children: messages.channel.channels.sms })] })] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "channel-order", children: messages.channel.fields.orderIndex }), _jsx(Input, { id: "channel-order", type: "number", value: form.orderIndex, onChange: (e) => setField("orderIndex", Number(e.target.value)) })] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { children: messages.channel.fields.template }), _jsx(TemplatePicker, { value: form.templateId, onChange: (value) => setField("templateId", value), channel: form.channel, placeholder: messages.channel.placeholders.template }), _jsx(FieldDescription, { children: "Filtered by the channel above. Resolved at send time so editing the template doesn't need a rule update." })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "channel-recipient-kind", children: messages.channel.fields.recipientKind }), _jsxs(Select, { value: form.recipientKind, onValueChange: (v) => {
+                                                    if (!v)
+                                                        return;
+                                                    setField("recipientKind", v);
+                                                }, children: [_jsx(SelectTrigger, { id: "channel-recipient-kind", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "primary", children: messages.channel.recipientKinds.primary }), _jsx(SelectItem, { value: "cc", children: messages.channel.recipientKinds.cc }), _jsx(SelectItem, { value: "bcc", children: messages.channel.recipientKinds.bcc })] })] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "channel-provider", children: messages.channel.fields.provider }), _jsxs(Select, { value: form.provider, onValueChange: (v) => {
+                                                    if (!v)
+                                                        return;
+                                                    setField("provider", v);
+                                                }, children: [_jsx(SelectTrigger, { id: "channel-provider", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "automatic", children: messages.channel.providers.automatic }), _jsx(SelectItem, { value: "resend", children: messages.channel.providers.resend }), _jsx(SelectItem, { value: "twilio", children: messages.channel.providers.twilio })] })] }), _jsx(FieldDescription, { children: messages.channel.descriptions.automaticProvider })] })] })] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: isPending, children: messages.common.cancel }), _jsxs(Button, { onClick: handleSubmit, disabled: isPending, children: [isPending ? _jsx(Loader2, { className: "size-4 animate-spin" }) : null, isEdit ? messages.common.save : messages.common.create] })] })] }) }));
+}

package/dist/components/stage-channel-list.d.ts

@@ -0,0 +1,6 @@
+export interface StageChannelListProps {
+    reminderRuleId: string;
+    stageId: string;
+}
+export declare function StageChannelList({ reminderRuleId, stageId }: StageChannelListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stage-channel-list.d.ts.map

package/dist/components/stage-channel-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-channel-list.d.ts","sourceRoot":"","sources":["../../src/components/stage-channel-list.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CAyElF"}

package/dist/components/stage-channel-list.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { useReminderStageChannelMutation, useReminderStageChannels, } from "../index.js";
+import { StageChannelEditorDialog } from "./stage-channel-editor-dialog.js";
+export function StageChannelList({ reminderRuleId, stageId }) {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const { data: channels, isLoading } = useReminderStageChannels(reminderRuleId, stageId);
+    const { remove } = useReminderStageChannelMutation(reminderRuleId, stageId);
+    const [editing, setEditing] = useState(null);
+    const [creating, setCreating] = useState(false);
+    return (_jsxs(Card, { className: "border-dashed", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [_jsx(CardTitle, { className: "text-sm font-medium", children: messages.channel.listHeading }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => setCreating(true), children: [_jsx(Plus, { className: "size-4" }), " ", messages.channel.addChannel] })] }), _jsxs(CardContent, { className: "space-y-2", children: [isLoading && _jsx("p", { className: "text-sm text-muted-foreground", children: messages.common.loading }), channels && channels.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.channel.listEmpty })), channels?.map((channel) => (_jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Badge, { variant: "outline", children: messages.channel.channels[channel.channel] }), _jsx(Badge, { variant: "secondary", children: messages.channel.recipientKinds[channel.recipientKind] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { size: "icon", variant: "ghost", onClick: () => setEditing(channel), children: _jsx(Pencil, { className: "size-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => {
+                                            if (window.confirm(messages.channel.deleteConfirm)) {
+                                                void remove.mutateAsync(channel.id);
+                                            }
+                                        }, children: _jsx(Trash2, { className: "size-4" }) })] })] }, channel.id)))] }), creating && (_jsx(StageChannelEditorDialog, { reminderRuleId: reminderRuleId, stageId: stageId, channel: null, defaultOrderIndex: channels?.length ?? 0, open: creating, onOpenChange: setCreating })), editing && (_jsx(StageChannelEditorDialog, { reminderRuleId: reminderRuleId, stageId: stageId, channel: editing, open: Boolean(editing), onOpenChange: (open) => !open && setEditing(null) }))] }));
+}

package/dist/components/stage-editor-dialog.d.ts

@@ -0,0 +1,10 @@
+import { type ReminderRuleStageRecord } from "../index.js";
+export interface StageEditorDialogProps {
+    reminderRuleId: string;
+    stage: ReminderRuleStageRecord | null;
+    defaultOrderIndex?: number;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function StageEditorDialog({ reminderRuleId, stage, defaultOrderIndex, open, onOpenChange, }: StageEditorDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stage-editor-dialog.d.ts.map

package/dist/components/stage-editor-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-editor-dialog.d.ts","sourceRoot":"","sources":["../../src/components/stage-editor-dialog.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAAE,KAAK,uBAAuB,EAAgC,MAAM,aAAa,CAAA;AAuExF,MAAM,WAAW,sBAAsB;IACrC,cAAc,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,uBAAuB,GAAG,IAAI,CAAA;IACrC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACtC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,KAAK,EACL,iBAAqB,EACrB,IAAI,EACJ,YAAY,GACb,EAAE,sBAAsB,2CAkTxB"}

package/dist/components/stage-editor-dialog.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet, FieldTitle, } from "@voyantjs/ui/components/field";
+import { Switch } from "@voyantjs/ui/components/switch";
+import { Loader2, Plus, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { useReminderRuleStageMutation } from "../index.js";
+let intervalRowSeq = 0;
+const nextIntervalRowKey = () => `iv-${++intervalRowSeq}`;
+const ANCHORS = [
+    "due_date",
+    "booking_created_at",
+    "departure_date",
+    "invoice_issued_at",
+    "last_send_at",
+];
+const CADENCES = ["once", "every_n_days", "escalating"];
+function fromRecord(stage, orderIndex) {
+    if (!stage) {
+        return {
+            name: "",
+            orderIndex,
+            anchor: "due_date",
+            windowStartDays: -7,
+            windowEndDays: 0,
+            cadenceKind: "once",
+            cadenceEveryDays: null,
+            cadenceIntervals: [],
+            maxSendsInStage: null,
+            respectQuietHours: true,
+        };
+    }
+    return {
+        name: stage.name ?? "",
+        orderIndex: stage.orderIndex,
+        anchor: stage.anchor,
+        windowStartDays: stage.windowStartDays,
+        windowEndDays: stage.windowEndDays,
+        cadenceKind: stage.cadenceKind,
+        cadenceEveryDays: stage.cadenceEveryDays,
+        cadenceIntervals: stage.cadenceIntervals?.map((i) => ({
+            rowKey: nextIntervalRowKey(),
+            whenDaysUntilDueGT: i.whenDaysUntilDueGT ?? null,
+            repeatEveryDays: i.repeatEveryDays,
+        })) ?? [],
+        maxSendsInStage: stage.maxSendsInStage,
+        respectQuietHours: stage.respectQuietHours,
+    };
+}
+export function StageEditorDialog({ reminderRuleId, stage, defaultOrderIndex = 0, open, onOpenChange, }) {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const { create, update } = useReminderRuleStageMutation(reminderRuleId);
+    const [form, setForm] = useState(() => fromRecord(stage, defaultOrderIndex));
+    const isEdit = Boolean(stage);
+    const isPending = create.isPending || update.isPending;
+    useEffect(() => {
+        if (open)
+            setForm(fromRecord(stage, defaultOrderIndex));
+    }, [open, stage, defaultOrderIndex]);
+    const setField = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));
+    const addInterval = () => setField("cadenceIntervals", [
+        ...form.cadenceIntervals,
+        { rowKey: nextIntervalRowKey(), whenDaysUntilDueGT: null, repeatEveryDays: 7 },
+    ]);
+    const removeInterval = (rowKey) => setField("cadenceIntervals", form.cadenceIntervals.filter((row) => row.rowKey !== rowKey));
+    const handleSubmit = async () => {
+        const input = {
+            name: form.name || null,
+            orderIndex: form.orderIndex,
+            anchor: form.anchor,
+            windowStartDays: form.windowStartDays,
+            windowEndDays: form.windowEndDays,
+            cadenceKind: form.cadenceKind,
+            cadenceEveryDays: form.cadenceKind === "every_n_days" ? form.cadenceEveryDays : null,
+            cadenceIntervals: form.cadenceKind === "escalating"
+                ? form.cadenceIntervals.map((row) => ({
+                    whenDaysUntilDueGT: row.whenDaysUntilDueGT,
+                    repeatEveryDays: row.repeatEveryDays,
+                }))
+                : null,
+            maxSendsInStage: form.maxSendsInStage,
+            respectQuietHours: form.respectQuietHours,
+        };
+        if (isEdit && stage) {
+            await update.mutateAsync({ stageId: stage.id, input });
+        }
+        else {
+            await create.mutateAsync(input);
+        }
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-2xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEdit ? messages.stage.titles.edit : messages.stage.titles.create }) }), _jsx(DialogBody, { children: _jsxs(FieldGroup, { children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-[1fr_8rem]", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "stage-name", children: messages.stage.fields.name }), _jsx(Input, { id: "stage-name", value: form.name, onChange: (e) => setField("name", e.target.value), placeholder: messages.stage.placeholders.name })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "stage-order", children: messages.stage.fields.orderIndex }), _jsx(Input, { id: "stage-order", type: "number", value: form.orderIndex, onChange: (e) => setField("orderIndex", Number(e.target.value)) })] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { variant: "label", children: messages.stage.fields.anchor }), _jsx(FieldDescription, { children: messages.stage.descriptions.window }), _jsxs(FieldGroup, { className: "gap-4", children: [_jsx(Field, { children: _jsxs(Select, { value: form.anchor, onValueChange: (v) => setField("anchor", v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ANCHORS.map((a) => (_jsx(SelectItem, { value: a, children: messages.stage.anchors[a] }, a))) })] }) }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "window-start", children: messages.stage.fields.windowStartDays }), _jsx(Input, { id: "window-start", type: "number", value: form.windowStartDays, onChange: (e) => setField("windowStartDays", Number(e.target.value)) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "window-end", children: messages.stage.fields.windowEndDays }), _jsx(Input, { id: "window-end", type: "number", value: form.windowEndDays, onChange: (e) => setField("windowEndDays", Number(e.target.value)) })] })] })] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { variant: "label", children: messages.stage.fields.cadenceKind }), _jsx(FieldDescription, { children: messages.stage.descriptions.cadence }), _jsxs(FieldGroup, { className: "gap-4", children: [_jsx(Field, { children: _jsxs(Select, { value: form.cadenceKind, onValueChange: (v) => setField("cadenceKind", v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: CADENCES.map((c) => (_jsx(SelectItem, { value: c, children: messages.stage.cadences[c] }, c))) })] }) }), form.cadenceKind === "every_n_days" && (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "cadence-every", children: messages.stage.fields.cadenceEveryDays }), _jsx(Input, { id: "cadence-every", type: "number", min: 1, value: form.cadenceEveryDays ?? "", onChange: (e) => setField("cadenceEveryDays", e.target.value ? Number(e.target.value) : null) })] })), form.cadenceKind === "escalating" && (_jsxs(Field, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(FieldLabel, { children: messages.stage.fields.cadenceIntervals }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: addInterval, children: [_jsx(Plus, { className: "size-4" }), messages.stage.intervalRow.addInterval] })] }), form.cadenceIntervals.length === 0 ? (_jsx(FieldDescription, { children: messages.stage.descriptions.emptyIntervals })) : null, _jsx("div", { className: "space-y-2", children: form.cadenceIntervals.map((interval) => (_jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] items-end gap-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { className: "text-xs", children: messages.stage.intervalRow.whenDaysUntilDueGT }), _jsx(Input, { type: "number", value: interval.whenDaysUntilDueGT ?? "", onChange: (e) => setField("cadenceIntervals", form.cadenceIntervals.map((row) => row.rowKey === interval.rowKey
+                                                                                ? {
+                                                                                    ...row,
+                                                                                    whenDaysUntilDueGT: e.target.value
+                                                                                        ? Number(e.target.value)
+                                                                                        : null,
+                                                                                }
+                                                                                : row)) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { className: "text-xs", children: messages.stage.intervalRow.repeatEveryDays }), _jsx(Input, { type: "number", min: 1, value: interval.repeatEveryDays, onChange: (e) => setField("cadenceIntervals", form.cadenceIntervals.map((row) => row.rowKey === interval.rowKey
+                                                                                ? { ...row, repeatEveryDays: Number(e.target.value) }
+                                                                                : row)) })] }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", onClick: () => removeInterval(interval.rowKey), "aria-label": messages.stage.intervalRow.removeInterval, children: _jsx(Trash2, { className: "size-4" }) })] }, interval.rowKey))) })] }))] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { variant: "label", children: messages.stage.descriptions.stopConditions }), _jsxs(FieldGroup, { className: "gap-4", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "max-sends", children: messages.stage.fields.maxSendsInStage }), _jsx(Input, { id: "max-sends", type: "number", min: 1, value: form.maxSendsInStage ?? "", onChange: (e) => setField("maxSendsInStage", e.target.value ? Number(e.target.value) : null), placeholder: messages.common.optionalPlaceholder }), _jsx(FieldDescription, { children: messages.stage.descriptions.maxSendsInStage })] }), _jsxs(Field, { orientation: "horizontal", children: [_jsx(Switch, { id: "respect-quiet-hours", checked: form.respectQuietHours, onCheckedChange: (v) => setField("respectQuietHours", Boolean(v)) }), _jsxs(FieldLabel, { htmlFor: "respect-quiet-hours", className: "!w-auto !flex-row", children: [_jsx(FieldTitle, { children: messages.stage.fields.respectQuietHours }), _jsx(FieldDescription, { children: messages.stage.descriptions.respectQuietHours })] })] })] })] })] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: isPending, children: messages.common.cancel }), _jsxs(Button, { onClick: handleSubmit, disabled: isPending, children: [isPending ? _jsx(Loader2, { className: "size-4 animate-spin" }) : null, isEdit ? messages.common.save : messages.common.create] })] })] }) }));
+}

package/dist/components/stage-list.d.ts

@@ -0,0 +1,5 @@
+export interface StageListProps {
+    reminderRuleId: string;
+}
+export declare function StageList({ reminderRuleId }: StageListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stage-list.d.ts.map

package/dist/components/stage-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-list.d.ts","sourceRoot":"","sources":["../../src/components/stage-list.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,wBAAgB,SAAS,CAAC,EAAE,cAAc,EAAE,EAAE,cAAc,2CAqH3D"}

package/dist/components/stage-list.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
+import { ArrowDown, ArrowUp, Pencil, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { useReminderRuleStageMutation, useReminderRuleStages, } from "../index.js";
+import { StageChannelList } from "./stage-channel-list.js";
+import { StageEditorDialog } from "./stage-editor-dialog.js";
+export function StageList({ reminderRuleId }) {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const { data: stages, isLoading } = useReminderRuleStages(reminderRuleId);
+    const { remove, reorder } = useReminderRuleStageMutation(reminderRuleId);
+    const [editing, setEditing] = useState(null);
+    const [creating, setCreating] = useState(false);
+    const move = async (index, direction) => {
+        if (!stages)
+            return;
+        const target = index + direction;
+        if (target < 0 || target >= stages.length)
+            return;
+        const next = [...stages];
+        const [item] = next.splice(index, 1);
+        if (!item)
+            return;
+        next.splice(target, 0, item);
+        await reorder.mutateAsync({ stageIds: next.map((s) => s.id) });
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-base font-semibold", children: messages.stage.listHeading }), _jsxs(Button, { size: "sm", onClick: () => setCreating(true), children: [_jsx(Plus, { className: "size-4" }), " ", messages.stage.addStage] })] }), isLoading && _jsx("p", { className: "text-sm text-muted-foreground", children: messages.common.loading }), stages && stages.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.stage.listEmpty })), stages?.map((stage, index) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs(CardTitle, { className: "flex items-center gap-2 text-sm font-medium", children: [_jsxs(Badge, { variant: "outline", children: ["#", stage.orderIndex] }), stage.name ?? messages.stage.placeholders.name, _jsx(Badge, { variant: "secondary", children: messages.stage.anchors[stage.anchor] }), _jsx(Badge, { children: messages.stage.cadences[stage.cadenceKind] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { size: "icon", variant: "ghost", onClick: () => move(index, -1), disabled: index === 0, children: _jsx(ArrowUp, { className: "size-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => move(index, 1), disabled: index === stages.length - 1, children: _jsx(ArrowDown, { className: "size-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => setEditing(stage), children: _jsx(Pencil, { className: "size-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => {
+                                            if (window.confirm(messages.stage.deleteConfirm)) {
+                                                void remove.mutateAsync(stage.id);
+                                            }
+                                        }, children: _jsx(Trash2, { className: "size-4" }) })] })] }), _jsxs(CardContent, { className: "space-y-3 text-sm", children: [_jsxs("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-muted-foreground", children: [_jsxs("span", { children: [messages.stage.fields.windowStartDays, ": ", stage.windowStartDays] }), _jsxs("span", { children: [messages.stage.fields.windowEndDays, ": ", stage.windowEndDays] }), stage.cadenceKind === "every_n_days" && (_jsxs("span", { children: [messages.stage.fields.cadenceEveryDays, ": ", stage.cadenceEveryDays] })), stage.maxSendsInStage != null && (_jsxs("span", { children: [messages.stage.fields.maxSendsInStage, ": ", stage.maxSendsInStage] }))] }), _jsx(StageChannelList, { reminderRuleId: reminderRuleId, stageId: stage.id })] })] }, stage.id))), creating && (_jsx(StageEditorDialog, { reminderRuleId: reminderRuleId, stage: null, defaultOrderIndex: stages?.length ?? 0, open: creating, onOpenChange: setCreating })), editing && (_jsx(StageEditorDialog, { reminderRuleId: reminderRuleId, stage: editing, open: Boolean(editing), onOpenChange: (open) => !open && setEditing(null) }))] }));
+}

package/dist/components/template-picker.d.ts

@@ -0,0 +1,19 @@
+import { type NotificationTemplateRecord } from "../index.js";
+export interface TemplatePickerProps {
+    /** Currently selected template id (or null when nothing is picked). */
+    value: string | null;
+    onChange: (value: string | null) => void;
+    /** Restrict results to templates registered for this channel. */
+    channel?: NotificationTemplateRecord["channel"];
+    placeholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+}
+/**
+ * Async-friendly template picker. Searches active templates by name / slug
+ * filtered by the chosen channel and resolves to the template id. The
+ * currently selected template is fetched separately so its label keeps
+ * rendering even after the search list filters it out.
+ */
+export declare function TemplatePicker({ value, onChange, channel, placeholder, emptyText, disabled, }: TemplatePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=template-picker.d.ts.map

package/dist/components/template-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-picker.d.ts","sourceRoot":"","sources":["../../src/components/template-picker.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,0BAA0B,EAGhC,MAAM,aAAa,CAAA;AAEpB,MAAM,WAAW,mBAAmB;IAClC,uEAAuE;IACvE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,iEAAiE;IACjE,OAAO,CAAC,EAAE,0BAA0B,CAAC,SAAS,CAAC,CAAA;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,SAAS,EACT,QAAQ,GACT,EAAE,mBAAmB,2CA8BrB"}

package/dist/components/template-picker.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AsyncCombobox } from "@voyantjs/ui/components/async-combobox";
+import * as React from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { useNotificationTemplate, useNotificationTemplates, } from "../index.js";
+/**
+ * Async-friendly template picker. Searches active templates by name / slug
+ * filtered by the chosen channel and resolves to the template id. The
+ * currently selected template is fetched separately so its label keeps
+ * rendering even after the search list filters it out.
+ */
+export function TemplatePicker({ value, onChange, channel, placeholder, emptyText, disabled, }) {
+    const messages = useNotificationsUiMessagesOrDefault().pickers.templates;
+    const [search, setSearch] = React.useState("");
+    const { data } = useNotificationTemplates({
+        channel,
+        status: "active",
+        search: search || undefined,
+        limit: 20,
+        offset: 0,
+    });
+    const { data: selected } = useNotificationTemplate(value ?? "", { enabled: Boolean(value) });
+    const items = data?.data ?? [];
+    return (_jsx(AsyncCombobox, { value: value, onChange: onChange, items: items, selectedItem: selected ?? null, getKey: (template) => template.id, getLabel: (template) => template.name, getSecondary: (template) => template.slug, onSearchChange: setSearch, placeholder: placeholder ?? messages.placeholder, emptyText: emptyText ?? messages.empty, disabled: disabled, clearable: true }));
+}

package/dist/components/timezone-combobox.d.ts

@@ -0,0 +1,9 @@
+export interface TimezoneComboboxProps {
+    value: string | null | undefined;
+    onChange: (value: string | null) => void;
+    placeholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+}
+export declare function TimezoneCombobox({ value, onChange, placeholder, emptyText, disabled, }: TimezoneComboboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=timezone-combobox.d.ts.map

package/dist/components/timezone-combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone-combobox.d.ts","sourceRoot":"","sources":["../../src/components/timezone-combobox.tsx"],"names":[],"mappings":"AA+DA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,QAAQ,GACT,EAAE,qBAAqB,2CAyCvB"}

package/dist/components/timezone-combobox.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
+import * as React from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+const TIMEZONES = (() => {
+    const intl = Intl;
+    if (typeof intl.supportedValuesOf === "function") {
+        try {
+            return [...intl.supportedValuesOf("timeZone")].sort();
+        }
+        catch {
+            // fall through
+        }
+    }
+    return [
+        "UTC",
+        "Africa/Cairo",
+        "Africa/Johannesburg",
+        "Africa/Lagos",
+        "America/Chicago",
+        "America/Denver",
+        "America/Los_Angeles",
+        "America/Mexico_City",
+        "America/New_York",
+        "America/Sao_Paulo",
+        "Asia/Bangkok",
+        "Asia/Dubai",
+        "Asia/Hong_Kong",
+        "Asia/Jakarta",
+        "Asia/Kolkata",
+        "Asia/Manila",
+        "Asia/Seoul",
+        "Asia/Shanghai",
+        "Asia/Singapore",
+        "Asia/Tokyo",
+        "Australia/Sydney",
+        "Europe/Amsterdam",
+        "Europe/Berlin",
+        "Europe/Bucharest",
+        "Europe/Istanbul",
+        "Europe/Lisbon",
+        "Europe/London",
+        "Europe/Madrid",
+        "Europe/Moscow",
+        "Europe/Paris",
+        "Europe/Rome",
+        "Europe/Vienna",
+        "Pacific/Auckland",
+    ];
+})();
+export function TimezoneCombobox({ value, onChange, placeholder, emptyText, disabled, }) {
+    const messages = useNotificationsUiMessagesOrDefault().pickers.timezones;
+    const [inputValue, setInputValue] = React.useState(value ?? "");
+    React.useEffect(() => {
+        setInputValue(value ?? "");
+    }, [value]);
+    return (_jsxs(Combobox, { items: TIMEZONES, value: value ?? null, inputValue: inputValue, autoHighlight: true, disabled: disabled, itemToStringLabel: (item) => item, itemToStringValue: (item) => item, onInputValueChange: (next) => {
+            setInputValue(next);
+            if (!next)
+                onChange(null);
+        }, onValueChange: (next) => {
+            const tz = next ?? null;
+            onChange(tz);
+            setInputValue(tz ?? "");
+        }, children: [_jsx(ComboboxInput, { placeholder: placeholder ?? messages.placeholder, showClear: Boolean(value) }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: emptyText ?? messages.empty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (tz) => (_jsx(ComboboxItem, { value: tz, children: tz }, tz)) }) })] })] }));
+}

package/dist/i18n/en.d.ts

@@ -0,0 +1,3 @@
+import type { NotificationsUiMessages } from "./messages.js";
+export declare const notificationsUiEn: NotificationsUiMessages;
+//# sourceMappingURL=en.d.ts.map

package/dist/i18n/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AAE5D,eAAO,MAAM,iBAAiB,EAAE,uBA6Y/B,CAAA"}