@burdenoff/microfe-channel 2026.625.2 → 2026.626.1

package/dist/channel/modules/channels/pages/SendMessagePage.js

@@ -3,67 +3,67 @@ import { getGlobalChannelClient as t } from "../../../graphql/global-client.js";
 import { useSendNotificationMutation as n } from "../../../../generated/global-operations.js";
 import { useChannels as r } from "../../../hooks/useChannels.js";
 import { PermissionGuard as i } from "../../../components/PermissionGuard.js";
-import { CHANNEL_PERMISSIONS as a } from "../../../constants/permissions.js";
-import { NotificationChannel as o, NotificationPriority as s } from "../../../../generated/global-types.js";
-import { useCallback as c, useRef as l, useState as u } from "react";
-import { useI18n as d } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as f, ArrowLeft as p, Bell as m, CheckCircle2 as h, Hash as g, Loader2 as ee, Mail as _, MessageCircle as v, MessageSquare as y, Plus as te, Send as b, Smartphone as x, Users as S, X as C, XCircle as ne } from "lucide-react";
+import { CHANNEL_PERMISSIONS as ee } from "../../../constants/permissions.js";
+import { NotificationChannel as a, NotificationPriority as o } from "../../../../generated/global-types.js";
+import { useCallback as s, useRef as c, useState as l } from "react";
+import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as d, ArrowLeft as f, Bell as p, CheckCircle2 as m, Hash as h, Loader2 as g, Mail as _, MessageCircle as v, MessageSquare as y, Plus as b, Send as x, Smartphone as S, Users as C, X as te, XCircle as ne } from "lucide-react";
 import { useNavigate as re } from "react-router-dom";
 import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
-import { EmphasisPanel as ie, GlassCard as D } from "@burdenoff/fe-libs/ui";
+import { EmphasisPanel as D, GlassCard as O, IllustratedEmptyState as k, PagePurpose as ie } from "@burdenoff/fe-libs/ui";
 //#region src/channel/modules/channels/pages/SendMessagePage.tsx
-var O = {
+var ae = {
 	EMAIL: _,
-	SMS: x,
-	PUSH: m,
+	SMS: S,
+	PUSH: p,
 	WHATSAPP: y,
-	SLACK: g,
-	TEAMS: S,
+	SLACK: h,
+	TEAMS: C,
 	DISCORD: v,
-	INAPP: m,
+	INAPP: p,
 	WEBCHAT: y,
-	WEBHOOK: b
+	WEBHOOK: x
 };
-function k() {
-	let m = re(), { channels: g } = r(), { organizationId: _, authToken: v, apiGatewayUrl: y } = e(), { t: x } = d(), S = (e, t) => {
-		let n = x(e);
+function A() {
+	let p = re(), { channels: h } = r(), { organizationId: _, authToken: v, apiGatewayUrl: y } = e(), { t: S } = u(), C = (e, t) => {
+		let n = S(e);
 		return n === e ? t : n;
-	}, [k, { loading: A }] = n({ client: t(y, v, _) }), [j, M] = u(""), [N, P] = u("EMAIL"), [F, I] = u([]), ae = l(0), [L, R] = u(""), [z, B] = u(""), [V, H] = u(""), [U, W] = u(""), [G, K] = u(s.Medium), [q, J] = u(null), [Y, X] = u(null), Z = g.filter((e) => e.platform === N), oe = c(() => {
-		if (!L.trim()) return;
+	}, [A, { loading: j }] = n({ client: t(y, v, _) }), [M, N] = l(""), [P, F] = l("EMAIL"), [I, L] = l([]), oe = c(0), [R, z] = l(""), [B, V] = l(""), [H, U] = l(""), [W, G] = l(""), [K, se] = l(o.Medium), [q, J] = l(null), [Y, X] = l(null), Z = h.filter((e) => e.platform === P), ce = s(() => {
+		if (!R.trim()) return;
 		let e = {
-			id: `r-${++ae.current}`,
-			address: L.trim(),
-			name: z.trim() || void 0
+			id: `r-${++oe.current}`,
+			address: R.trim(),
+			name: B.trim() || void 0
 		};
-		I((t) => [...t, e]), R(""), B("");
-	}, [L, z]), se = c((e) => {
-		I((t) => t.filter((t) => t.id !== e));
-	}, []), ce = c(() => {
-		J(null), X(null), H(""), W(""), I([]);
-	}, []), le = async () => {
-		if (!j) {
-			X(S("channel.validation.selectChannel", "Please select a channel"));
+		L((t) => [...t, e]), z(""), V("");
+	}, [R, B]), le = s((e) => {
+		L((t) => t.filter((t) => t.id !== e));
+	}, []), ue = s(() => {
+		J(null), X(null), U(""), G(""), L([]);
+	}, []), de = async () => {
+		if (!M) {
+			X(C("channel.validation.selectChannel", "Please select a channel"));
 			return;
 		}
-		if (F.length === 0) {
-			X(S("channel.validation.addRecipient", "Please add at least one recipient"));
+		if (I.length === 0) {
+			X(C("channel.validation.addRecipient", "Please add at least one recipient"));
 			return;
 		}
-		if (!U.trim()) {
-			X(S("channel.validation.enterMessage", "Please enter a message"));
+		if (!W.trim()) {
+			X(C("channel.validation.enterMessage", "Please enter a message"));
 			return;
 		}
 		X(null), J(null);
 		try {
-			let e = g.find((e) => e.id === j);
+			let e = h.find((e) => e.id === M);
 			if (!e) {
-				X(S("channel.error.channelNotFound", "Selected channel not found"));
+				X(C("channel.error.channelNotFound", "Selected channel not found"));
 				return;
 			}
-			let t = N === "INAPP" ? o.InApp : N;
-			J(await Promise.all(F.map(async (n) => {
+			let t = P === "INAPP" ? a.InApp : P;
+			J(await Promise.all(I.map(async (n) => {
 				let r = {};
-				switch (N) {
+				switch (P) {
 					case "EMAIL":
 						r.email = n.address;
 						break;
@@ -89,15 +89,15 @@ function k() {
 					channelId: e.id,
 					platform: t,
 					notification: {
-						body: U,
+						body: W,
 						channel: t,
 						recipient: r,
-						subject: N === "EMAIL" ? V : void 0,
-						priority: G
+						subject: P === "EMAIL" ? H : void 0,
+						priority: K
 					}
 				};
 				try {
-					let e = await k({ variables: { input: i } });
+					let e = await A({ variables: { input: i } });
 					if (e.data?.triggerNotification) {
 						let t = e.data.triggerNotification, r = t.status === "FAILED" || t.triggerStatus === "FAILED", i = t.errorMessage || t.errorCode;
 						return {
@@ -125,7 +125,7 @@ function k() {
 		}
 	}, Q = q?.filter((e) => e.success).length ?? 0, $ = q?.filter((e) => !e.success).length ?? 0;
 	return /* @__PURE__ */ T(i, {
-		permission: a.CHANNEL_DELIVERY_SEND,
+		permission: ee.CHANNEL_DELIVERY_SEND,
 		children: /* @__PURE__ */ E("div", {
 			className: "min-h-screen bg-bg-surface",
 			children: [/* @__PURE__ */ T("div", {
@@ -136,26 +136,32 @@ function k() {
 						className: "flex items-center gap-4",
 						children: [/* @__PURE__ */ T("button", {
 							type: "button",
-							onClick: () => m("/channels/list"),
+							onClick: () => p("/channels/list"),
 							className: "p-2 hover:bg-bg-sunken rounded-lg transition-colors",
-							children: /* @__PURE__ */ T(p, { className: "size-5 " })
+							children: /* @__PURE__ */ T(f, { className: "size-5 " })
 						}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("h1", {
 							className: "text-2xl font-bold",
-							children: S("channel.sendMessage", "Send Message")
+							children: C("channel.sendMessage", "Send Message")
 						}), /* @__PURE__ */ T("p", {
 							className: "text-sm text-text-secondary",
-							children: S("channel.sendMessageSubtitle", "Send notifications through configured channels")
+							children: C("channel.sendMessageSubtitle", "Send notifications through configured channels")
 						})] })]
 					})
 				})
-			}), /* @__PURE__ */ T("div", {
-				className: "container mx-auto px-6 py-8 max-w-3xl",
-				children: q === null ? /* @__PURE__ */ E("div", {
+			}), /* @__PURE__ */ E("div", {
+				className: "container mx-auto px-6 py-8 max-w-3xl space-y-6",
+				children: [/* @__PURE__ */ T(ie, {
+					icon: /* @__PURE__ */ T(x, {
+						size: 15,
+						"aria-hidden": "true"
+					}),
+					children: C("channel.sendMessagePurpose", "Compose and fire off a one-off notification through any configured channel — handy for testing a freshly set-up channel, sending a quick announcement, or reproducing a delivery problem. Pick the platform and channel, add one or more recipients, write your message, and send; you will get a per-recipient success/failure breakdown so you know exactly what got through.")
+				}), q === null ? /* @__PURE__ */ E("div", {
 					className: "space-y-6",
 					children: [
 						Y && /* @__PURE__ */ E("div", {
 							className: "p-4 rounded-lg bg-status-error-bg/10 border border-status-error-border/20 flex items-center gap-3",
-							children: [/* @__PURE__ */ T(f, { className: "size-5 text-status-error-text shrink-0" }), /* @__PURE__ */ T("p", {
+							children: [/* @__PURE__ */ T(d, { className: "size-5 text-status-error-text shrink-0" }), /* @__PURE__ */ T("p", {
 								className: "text-sm text-status-error-text",
 								children: Y
 							})]
@@ -164,7 +170,7 @@ function k() {
 							className: "space-y-3",
 							children: [/* @__PURE__ */ T("label", {
 								className: "text-sm font-medium",
-								children: S("channel.platform", "Platform")
+								children: C("channel.platform", "Platform")
 							}), /* @__PURE__ */ T("div", {
 								className: "flex flex-wrap gap-2",
 								children: [
@@ -176,13 +182,13 @@ function k() {
 									"TEAMS",
 									"WEBHOOK"
 								].map((e) => {
-									let t = O[e] || b;
+									let t = ae[e] || x;
 									return /* @__PURE__ */ E("button", {
 										type: "button",
 										onClick: () => {
-											P(e), M("");
+											F(e), N("");
 										},
-										className: `px-4 py-2 rounded-lg border flex items-center gap-2 transition-all ${N === e ? "bg-action-primary-bg text-action-primary-text border-primary" : "bg-bg-surface hover:bg-bg-sunken border-border-subtle"}`,
+										className: `px-4 py-2 rounded-lg border flex items-center gap-2 transition-all ${P === e ? "bg-action-primary-bg text-action-primary-text border-primary" : "bg-bg-surface hover:bg-bg-sunken border-border-subtle"}`,
 										children: [/* @__PURE__ */ T(t, { className: "size-4 " }), /* @__PURE__ */ T("span", {
 											className: "text-sm",
 											children: e
@@ -195,30 +201,30 @@ function k() {
 							className: "space-y-2",
 							children: [/* @__PURE__ */ E("label", {
 								className: "text-sm font-medium",
-								children: [S("channel.channel", "Channel"), " *"]
+								children: [C("channel.channel", "Channel"), " *"]
 							}), Z.length === 0 ? /* @__PURE__ */ T("div", {
-								className: "p-4 rounded-lg border border-dashed text-center",
-								children: /* @__PURE__ */ E("p", {
-									className: "text-sm text-text-secondary",
-									children: [
-										"No ",
-										N,
-										" channels configured.",
-										/* @__PURE__ */ T("button", {
-											type: "button",
-											onClick: () => m("./create"),
-											className: "text-primary hover:underline ml-1",
-											children: "Create one"
-										})
-									]
+								className: "rounded-lg border border-dashed",
+								children: /* @__PURE__ */ T(k, {
+									illustration: "empty-data",
+									title: C("channel.noPlatformChannels", `No ${P} channels configured`),
+									description: C("channel.noPlatformChannelsHint", "Create a channel for this platform to be able to send through it."),
+									action: /* @__PURE__ */ E("button", {
+										type: "button",
+										onClick: () => p("./create"),
+										className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg-hover",
+										children: [/* @__PURE__ */ T(b, {
+											className: "size-4",
+											"aria-hidden": "true"
+										}), C("channel.createChannel", "Create Channel")]
+									})
 								})
 							}) : /* @__PURE__ */ E("select", {
-								value: j,
-								onChange: (e) => M(e.target.value),
+								value: M,
+								onChange: (e) => N(e.target.value),
 								className: "w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary",
 								children: [/* @__PURE__ */ T("option", {
 									value: "",
-									children: S("channel.selectChannel", "Select a channel...")
+									children: C("channel.selectChannel", "Select a channel...")
 								}), Z.map((e) => /* @__PURE__ */ E("option", {
 									value: e.id,
 									children: [
@@ -235,40 +241,40 @@ function k() {
 							children: [
 								/* @__PURE__ */ T("label", {
 									className: "text-sm font-medium",
-									children: S("channel.recipients", "Recipients")
+									children: C("channel.recipients", "Recipients")
 								}),
 								/* @__PURE__ */ E("div", {
 									className: "flex gap-2",
 									children: [
 										/* @__PURE__ */ T("input", {
-											"aria-label": N === "EMAIL" ? "email@example.com" : "+1234567890",
+											"aria-label": P === "EMAIL" ? "email@example.com" : "+1234567890",
 											type: "text",
-											value: L,
-											onChange: (e) => R(e.target.value),
-											placeholder: N === "EMAIL" ? "email@example.com" : "+1234567890",
+											value: R,
+											onChange: (e) => z(e.target.value),
+											placeholder: P === "EMAIL" ? "email@example.com" : "+1234567890",
 											className: "flex-1 px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary"
 										}),
 										/* @__PURE__ */ T("input", {
-											"aria-label": S("channel.nameOptional", "Name (optional)"),
+											"aria-label": C("channel.nameOptional", "Name (optional)"),
 											type: "text",
-											value: z,
-											onChange: (e) => B(e.target.value),
-											placeholder: S("channel.nameOptional", "Name (optional)"),
+											value: B,
+											onChange: (e) => V(e.target.value),
+											placeholder: C("channel.nameOptional", "Name (optional)"),
 											className: "w-full sm:w-48 px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary"
 										}),
 										/* @__PURE__ */ E("button", {
 											type: "button",
-											onClick: oe,
-											disabled: !L.trim(),
+											onClick: ce,
+											disabled: !R.trim(),
 											className: "px-4 py-2 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50 flex items-center gap-2",
-											children: [/* @__PURE__ */ T(te, { className: "size-4 " }), S("channel.add", "Add")]
+											children: [/* @__PURE__ */ T(b, { className: "size-4 " }), C("channel.add", "Add")]
 										})
 									]
 								}),
-								F.length > 0 ? /* @__PURE__ */ T(D, {
+								I.length > 0 ? /* @__PURE__ */ T(O, {
 									treatment: "plain",
 									className: "border-border-seam rounded-lg p-0 divide-y divide-[var(--color-border-seam)] overflow-hidden",
-									children: F.map((e) => /* @__PURE__ */ E("div", {
+									children: I.map((e) => /* @__PURE__ */ E("div", {
 										className: "p-3 flex items-center justify-between",
 										children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
 											className: "text-sm font-medium",
@@ -278,14 +284,15 @@ function k() {
 											children: e.name
 										})] }), /* @__PURE__ */ T("button", {
 											type: "button",
-											onClick: () => se(e.id),
+											onClick: () => le(e.id),
 											className: "p-1 hover:bg-bg-sunken rounded transition-colors",
-											children: /* @__PURE__ */ T(C, { className: "size-4 text-text-secondary" })
+											children: /* @__PURE__ */ T(te, { className: "size-4 text-text-secondary" })
 										})]
 									}, e.id))
-								}) : /* @__PURE__ */ T("p", {
-									className: "text-sm text-text-secondary text-center py-4",
-									children: S("channel.noRecipientsYet", "No recipients added yet")
+								}) : /* @__PURE__ */ T(k, {
+									illustration: "empty-people",
+									title: C("channel.noRecipientsYet", "No recipients added yet"),
+									description: C("channel.addRecipientsHint", "Add one or more recipients above to send this message to.")
 								})
 							]
 						}),
@@ -294,20 +301,20 @@ function k() {
 							children: [
 								/* @__PURE__ */ E("label", {
 									className: "text-sm font-medium",
-									children: [S("channel.messageContent", "Message Content"), " *"]
+									children: [C("channel.messageContent", "Message Content"), " *"]
 								}),
-								N === "EMAIL" && /* @__PURE__ */ T("input", {
+								P === "EMAIL" && /* @__PURE__ */ T("input", {
 									"aria-label": "Subject",
 									type: "text",
-									value: V,
-									onChange: (e) => H(e.target.value),
+									value: H,
+									onChange: (e) => U(e.target.value),
 									placeholder: "Subject",
 									className: "w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary"
 								}),
 								/* @__PURE__ */ T("textarea", {
 									"aria-label": "Enter your message...",
-									value: U,
-									onChange: (e) => W(e.target.value),
+									value: W,
+									onChange: (e) => G(e.target.value),
 									placeholder: "Enter your message...",
 									rows: 6,
 									className: "w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary resize-none"
@@ -318,18 +325,18 @@ function k() {
 							className: "space-y-2",
 							children: [/* @__PURE__ */ T("label", {
 								className: "text-sm font-medium",
-								children: S("channel.priority", "Priority")
+								children: C("channel.priority", "Priority")
 							}), /* @__PURE__ */ T("div", {
 								className: "flex gap-2",
 								children: [
-									s.Low,
-									s.Medium,
-									s.High,
-									s.Urgent
+									o.Low,
+									o.Medium,
+									o.High,
+									o.Urgent
 								].map((e) => /* @__PURE__ */ T("button", {
 									type: "button",
-									onClick: () => K(e),
-									className: `px-4 py-2 rounded-lg border text-sm transition-all ${G === e ? "bg-action-primary-bg text-action-primary-text border-primary" : "bg-bg-surface hover:bg-bg-sunken border-border-subtle"}`,
+									onClick: () => se(e),
+									className: `px-4 py-2 rounded-lg border text-sm transition-all ${K === e ? "bg-action-primary-bg text-action-primary-text border-primary" : "bg-bg-surface hover:bg-bg-sunken border-border-subtle"}`,
 									children: e
 								}, e))
 							})]
@@ -338,52 +345,52 @@ function k() {
 							className: "flex justify-end pt-4",
 							children: /* @__PURE__ */ T("button", {
 								type: "button",
-								onClick: le,
-								disabled: A || !j || F.length === 0 || !U.trim(),
+								onClick: de,
+								disabled: j || !M || I.length === 0 || !W.trim(),
 								className: "px-6 py-3 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50 flex items-center gap-2",
-								children: A ? /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(ee, { className: "size-5 animate-spin" }), S("channel.sending", "Sending...")] }) : /* @__PURE__ */ E(w, { children: [
-									/* @__PURE__ */ T(b, { className: "size-5 " }),
-									S("channel.sendTo", "Send to"),
+								children: j ? /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(g, { className: "size-5 animate-spin" }), C("channel.sending", "Sending...")] }) : /* @__PURE__ */ E(w, { children: [
+									/* @__PURE__ */ T(x, { className: "size-5 " }),
+									C("channel.sendTo", "Send to"),
 									" ",
-									F.length,
+									I.length,
 									" ",
-									F.length === 1 ? S("channel.recipient", "recipient") : S("channel.recipients", "recipients")
+									I.length === 1 ? C("channel.recipient", "recipient") : C("channel.recipients", "recipients")
 								] })
 							})
 						})
 					]
 				}) : /* @__PURE__ */ E("div", {
 					className: "space-y-6",
-					children: [/* @__PURE__ */ E(ie, {
+					children: [/* @__PURE__ */ E(D, {
 						className: "p-4 flex items-center justify-between",
 						children: [/* @__PURE__ */ E("div", {
 							className: "flex items-center gap-4",
-							children: [$ === 0 ? /* @__PURE__ */ T(h, { className: "size-8 text-status-success-text" }) : /* @__PURE__ */ T(f, { className: "size-8 text-status-warning-text" }), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("h2", {
+							children: [$ === 0 ? /* @__PURE__ */ T(m, { className: "size-8 text-status-success-text" }) : /* @__PURE__ */ T(d, { className: "size-8 text-status-warning-text" }), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("h2", {
 								className: "text-lg font-semibold",
-								children: $ === 0 ? S("channel.allMessagesSent", "All messages sent!") : `${Q} of ${F.length} sent`
+								children: $ === 0 ? C("channel.allMessagesSent", "All messages sent!") : `${Q} of ${I.length} sent`
 							}), /* @__PURE__ */ E("p", {
 								className: "text-sm text-text-secondary",
 								children: [
 									Q,
 									" ",
-									S("channel.successful", "successful"),
+									C("channel.successful", "successful"),
 									", ",
 									$,
 									" ",
-									S("channel.failed", "failed")
+									C("channel.failed", "failed")
 								]
 							})] })]
 						}), /* @__PURE__ */ T("button", {
 							type: "button",
-							onClick: ce,
+							onClick: ue,
 							className: "px-4 py-2 rounded-lg border hover:bg-bg-sunken transition-colors",
-							children: S("channel.sendAnother", "Send Another")
+							children: C("channel.sendAnother", "Send Another")
 						})]
-					}), /* @__PURE__ */ T(D, {
+					}), /* @__PURE__ */ T(O, {
 						treatment: "plain",
 						className: "border-border-seam rounded-lg p-0 divide-y divide-[var(--color-border-seam)] overflow-hidden",
 						children: q.map((e) => {
-							let t = F.find((t) => t.id === e.recipientId);
+							let t = I.find((t) => t.id === e.recipientId);
 							return /* @__PURE__ */ E("div", {
 								className: "p-4 flex items-center justify-between",
 								children: [/* @__PURE__ */ E("div", { children: [
@@ -403,16 +410,16 @@ function k() {
 										className: "text-xs text-status-error-text",
 										children: e.error
 									})
-								] }), e.success ? /* @__PURE__ */ T(h, { className: "size-5 text-status-success-text" }) : /* @__PURE__ */ T(ne, { className: "size-5 text-status-error-text" })]
+								] }), e.success ? /* @__PURE__ */ T(m, { className: "size-5 text-status-success-text" }) : /* @__PURE__ */ T(ne, { className: "size-5 text-status-error-text" })]
 							}, e.recipientId);
 						})
 					})]
-				})
+				})]
 			})]
 		})
 	});
 }
 //#endregion
-export { k as SendMessagePage };
+export { A as SendMessagePage };
 
 //# sourceMappingURL=SendMessagePage.js.map