@burdenoff/microfe-channel 2026.624.3 → 2026.625.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/channel/modules/channels/pages/ChannelDashboardPage.js +108 -98
  2. package/dist/channel/modules/channels/pages/ChannelDashboardPage.js.map +1 -1
  3. package/dist/channel/modules/channels/pages/ChannelDetailsPage.js +287 -277
  4. package/dist/channel/modules/channels/pages/ChannelDetailsPage.js.map +1 -1
  5. package/dist/channel/modules/channels/pages/ChannelSettingsPage.js +140 -131
  6. package/dist/channel/modules/channels/pages/ChannelSettingsPage.js.map +1 -1
  7. package/dist/channel/modules/channels/pages/ChannelUsersPage.js +170 -173
  8. package/dist/channel/modules/channels/pages/ChannelUsersPage.js.map +1 -1
  9. package/dist/channel/modules/channels/pages/ChannelsListPage.js +127 -120
  10. package/dist/channel/modules/channels/pages/ChannelsListPage.js.map +1 -1
  11. package/dist/channel/modules/channels/pages/ConnectionDetailsPage.js +161 -155
  12. package/dist/channel/modules/channels/pages/ConnectionDetailsPage.js.map +1 -1
  13. package/dist/channel/modules/channels/pages/ConnectionsListPage.js +70 -68
  14. package/dist/channel/modules/channels/pages/ConnectionsListPage.js.map +1 -1
  15. package/dist/channel/modules/channels/pages/CreateChannelPage.js +27 -24
  16. package/dist/channel/modules/channels/pages/CreateChannelPage.js.map +1 -1
  17. package/dist/channel/modules/channels/pages/CreateConnectionPage.js +161 -156
  18. package/dist/channel/modules/channels/pages/CreateConnectionPage.js.map +1 -1
  19. package/dist/channel/modules/channels/pages/DeliveryHistoryPage.js +179 -182
  20. package/dist/channel/modules/channels/pages/DeliveryHistoryPage.js.map +1 -1
  21. package/dist/channel/modules/channels/pages/EditChannelPage.js +130 -122
  22. package/dist/channel/modules/channels/pages/EditChannelPage.js.map +1 -1
  23. package/dist/channel/modules/channels/pages/EditConnectionPage.js +137 -132
  24. package/dist/channel/modules/channels/pages/EditConnectionPage.js.map +1 -1
  25. package/dist/channel/modules/channels/pages/SendMessagePage.js +87 -84
  26. package/dist/channel/modules/channels/pages/SendMessagePage.js.map +1 -1
  27. package/dist/channel/modules/channels/pages/WebhookEventsPage.js +193 -194
  28. package/dist/channel/modules/channels/pages/WebhookEventsPage.js.map +1 -1
  29. package/package.json +2 -2
package/dist/channel/modules/channels/pages/SendMessagePage.js CHANGED
@@ -5,64 +5,65 @@ import { useChannels as r } from "../../../hooks/useChannels.js";
5
5
  import { PermissionGuard as i } from "../../../components/PermissionGuard.js";
6
6
  import { CHANNEL_PERMISSIONS as a } from "../../../constants/permissions.js";
7
7
  import { NotificationChannel as o, NotificationPriority as s } from "../../../../generated/global-types.js";
8
- import { useCallback as c, useRef as ee, useState as l } from "react";
9
- import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
10
- 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";
8
+ import { useCallback as c, useRef as l, useState as u } from "react";
9
+ import { useI18n as d } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
10
+ 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";
11
11
  import { useNavigate as re } from "react-router-dom";
12
12
  import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
13
+ import { EmphasisPanel as ie, GlassCard as D } from "@burdenoff/fe-libs/ui";
13
14
  //#region src/channel/modules/channels/pages/SendMessagePage.tsx
14
- var D = {
15
+ var O = {
15
16
  EMAIL: _,
16
- SMS: S,
17
- PUSH: p,
17
+ SMS: x,
18
+ PUSH: m,
18
19
  WHATSAPP: y,
19
- SLACK: h,
20
- TEAMS: C,
20
+ SLACK: g,
21
+ TEAMS: S,
21
22
  DISCORD: v,
22
- INAPP: p,
23
+ INAPP: m,
23
24
  WEBCHAT: y,
24
- WEBHOOK: x
25
+ WEBHOOK: b
25
26
  };
26
- function O() {
27
- let p = re(), { channels: h } = r(), { organizationId: _, authToken: v, apiGatewayUrl: y } = e(), { t: S } = u(), C = (e, t) => {
28
- let n = S(e);
27
+ function k() {
28
+ let m = re(), { channels: g } = r(), { organizationId: _, authToken: v, apiGatewayUrl: y } = e(), { t: x } = d(), S = (e, t) => {
29
+ let n = x(e);
29
30
  return n === e ? t : n;
30
- }, [O, { loading: k }] = n({ client: t(y, v, _) }), [A, j] = l(""), [M, N] = l("EMAIL"), [P, F] = l([]), I = ee(0), [L, R] = l(""), [z, B] = l(""), [V, H] = l(""), [U, W] = l(""), [G, K] = l(s.Medium), [q, J] = l(null), [Y, X] = l(null), Z = h.filter((e) => e.platform === M), ie = c(() => {
31
+ }, [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(() => {
31
32
  if (!L.trim()) return;
32
33
  let e = {
33
- id: `r-${++I.current}`,
34
+ id: `r-${++ae.current}`,
34
35
  address: L.trim(),
35
36
  name: z.trim() || void 0
36
37
  };
37
- F((t) => [...t, e]), R(""), B("");
38
- }, [L, z]), ae = c((e) => {
39
- F((t) => t.filter((t) => t.id !== e));
40
- }, []), oe = c(() => {
41
- J(null), X(null), H(""), W(""), F([]);
42
- }, []), se = async () => {
43
- if (!A) {
44
- X(C("channel.validation.selectChannel", "Please select a channel"));
38
+ I((t) => [...t, e]), R(""), B("");
39
+ }, [L, z]), se = c((e) => {
40
+ I((t) => t.filter((t) => t.id !== e));
41
+ }, []), ce = c(() => {
42
+ J(null), X(null), H(""), W(""), I([]);
43
+ }, []), le = async () => {
44
+ if (!j) {
45
+ X(S("channel.validation.selectChannel", "Please select a channel"));
45
46
  return;
46
47
  }
47
- if (P.length === 0) {
48
- X(C("channel.validation.addRecipient", "Please add at least one recipient"));
48
+ if (F.length === 0) {
49
+ X(S("channel.validation.addRecipient", "Please add at least one recipient"));
49
50
  return;
50
51
  }
51
52
  if (!U.trim()) {
52
- X(C("channel.validation.enterMessage", "Please enter a message"));
53
+ X(S("channel.validation.enterMessage", "Please enter a message"));
53
54
  return;
54
55
  }
55
56
  X(null), J(null);
56
57
  try {
57
- let e = h.find((e) => e.id === A);
58
+ let e = g.find((e) => e.id === j);
58
59
  if (!e) {
59
- X(C("channel.error.channelNotFound", "Selected channel not found"));
60
+ X(S("channel.error.channelNotFound", "Selected channel not found"));
60
61
  return;
61
62
  }
62
- let t = M === "INAPP" ? o.InApp : M;
63
- J(await Promise.all(P.map(async (n) => {
63
+ let t = N === "INAPP" ? o.InApp : N;
64
+ J(await Promise.all(F.map(async (n) => {
64
65
  let r = {};
65
- switch (M) {
66
+ switch (N) {
66
67
  case "EMAIL":
67
68
  r.email = n.address;
68
69
  break;
@@ -91,12 +92,12 @@ function O() {
91
92
  body: U,
92
93
  channel: t,
93
94
  recipient: r,
94
- subject: M === "EMAIL" ? V : void 0,
95
+ subject: N === "EMAIL" ? V : void 0,
95
96
  priority: G
96
97
  }
97
98
  };
98
99
  try {
99
- let e = await O({ variables: { input: i } });
100
+ let e = await k({ variables: { input: i } });
100
101
  if (e.data?.triggerNotification) {
101
102
  let t = e.data.triggerNotification, r = t.status === "FAILED" || t.triggerStatus === "FAILED", i = t.errorMessage || t.errorCode;
102
103
  return {
@@ -135,15 +136,15 @@ function O() {
135
136
  className: "flex items-center gap-4",
136
137
  children: [/* @__PURE__ */ T("button", {
137
138
  type: "button",
138
- onClick: () => p("/channels/list"),
139
+ onClick: () => m("/channels/list"),
139
140
  className: "p-2 hover:bg-bg-sunken rounded-lg transition-colors",
140
- children: /* @__PURE__ */ T(f, { className: "size-5 " })
141
+ children: /* @__PURE__ */ T(p, { className: "size-5 " })
141
142
  }), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("h1", {
142
143
  className: "text-2xl font-bold",
143
- children: C("channel.sendMessage", "Send Message")
144
+ children: S("channel.sendMessage", "Send Message")
144
145
  }), /* @__PURE__ */ T("p", {
145
146
  className: "text-sm text-text-secondary",
146
- children: C("channel.sendMessageSubtitle", "Send notifications through configured channels")
147
+ children: S("channel.sendMessageSubtitle", "Send notifications through configured channels")
147
148
  })] })]
148
149
  })
149
150
  })
@@ -154,7 +155,7 @@ function O() {
154
155
  children: [
155
156
  Y && /* @__PURE__ */ E("div", {
156
157
  className: "p-4 rounded-lg bg-status-error-bg/10 border border-status-error-border/20 flex items-center gap-3",
157
- children: [/* @__PURE__ */ T(d, { className: "size-5 text-status-error-text shrink-0" }), /* @__PURE__ */ T("p", {
158
+ children: [/* @__PURE__ */ T(f, { className: "size-5 text-status-error-text shrink-0" }), /* @__PURE__ */ T("p", {
158
159
  className: "text-sm text-status-error-text",
159
160
  children: Y
160
161
  })]
@@ -163,7 +164,7 @@ function O() {
163
164
  className: "space-y-3",
164
165
  children: [/* @__PURE__ */ T("label", {
165
166
  className: "text-sm font-medium",
166
- children: C("channel.platform", "Platform")
167
+ children: S("channel.platform", "Platform")
167
168
  }), /* @__PURE__ */ T("div", {
168
169
  className: "flex flex-wrap gap-2",
169
170
  children: [
@@ -175,13 +176,13 @@ function O() {
175
176
  "TEAMS",
176
177
  "WEBHOOK"
177
178
  ].map((e) => {
178
- let t = D[e] || x;
179
+ let t = O[e] || b;
179
180
  return /* @__PURE__ */ E("button", {
180
181
  type: "button",
181
182
  onClick: () => {
182
- N(e), j("");
183
+ P(e), M("");
183
184
  },
184
- className: `px-4 py-2 rounded-lg border flex items-center gap-2 transition-all ${M === e ? "bg-action-primary-bg text-action-primary-text border-primary" : "bg-bg-surface hover:bg-bg-sunken border-border-subtle"}`,
185
+ 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"}`,
185
186
  children: [/* @__PURE__ */ T(t, { className: "size-4 " }), /* @__PURE__ */ T("span", {
186
187
  className: "text-sm",
187
188
  children: e
@@ -194,30 +195,30 @@ function O() {
194
195
  className: "space-y-2",
195
196
  children: [/* @__PURE__ */ E("label", {
196
197
  className: "text-sm font-medium",
197
- children: [C("channel.channel", "Channel"), " *"]
198
+ children: [S("channel.channel", "Channel"), " *"]
198
199
  }), Z.length === 0 ? /* @__PURE__ */ T("div", {
199
200
  className: "p-4 rounded-lg border border-dashed text-center",
200
201
  children: /* @__PURE__ */ E("p", {
201
202
  className: "text-sm text-text-secondary",
202
203
  children: [
203
204
  "No ",
204
- M,
205
+ N,
205
206
  " channels configured.",
206
207
  /* @__PURE__ */ T("button", {
207
208
  type: "button",
208
- onClick: () => p("./create"),
209
+ onClick: () => m("./create"),
209
210
  className: "text-primary hover:underline ml-1",
210
211
  children: "Create one"
211
212
  })
212
213
  ]
213
214
  })
214
215
  }) : /* @__PURE__ */ E("select", {
215
- value: A,
216
- onChange: (e) => j(e.target.value),
216
+ value: j,
217
+ onChange: (e) => M(e.target.value),
217
218
  className: "w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary",
218
219
  children: [/* @__PURE__ */ T("option", {
219
220
  value: "",
220
- children: C("channel.selectChannel", "Select a channel...")
221
+ children: S("channel.selectChannel", "Select a channel...")
221
222
  }), Z.map((e) => /* @__PURE__ */ E("option", {
222
223
  value: e.id,
223
224
  children: [
@@ -234,39 +235,40 @@ function O() {
234
235
  children: [
235
236
  /* @__PURE__ */ T("label", {
236
237
  className: "text-sm font-medium",
237
- children: C("channel.recipients", "Recipients")
238
+ children: S("channel.recipients", "Recipients")
238
239
  }),
239
240
  /* @__PURE__ */ E("div", {
240
241
  className: "flex gap-2",
241
242
  children: [
242
243
  /* @__PURE__ */ T("input", {
243
- "aria-label": M === "EMAIL" ? "email@example.com" : "+1234567890",
244
+ "aria-label": N === "EMAIL" ? "email@example.com" : "+1234567890",
244
245
  type: "text",
245
246
  value: L,
246
247
  onChange: (e) => R(e.target.value),
247
- placeholder: M === "EMAIL" ? "email@example.com" : "+1234567890",
248
+ placeholder: N === "EMAIL" ? "email@example.com" : "+1234567890",
248
249
  className: "flex-1 px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary"
249
250
  }),
250
251
  /* @__PURE__ */ T("input", {
251
- "aria-label": C("channel.nameOptional", "Name (optional)"),
252
+ "aria-label": S("channel.nameOptional", "Name (optional)"),
252
253
  type: "text",
253
254
  value: z,
254
255
  onChange: (e) => B(e.target.value),
255
- placeholder: C("channel.nameOptional", "Name (optional)"),
256
+ placeholder: S("channel.nameOptional", "Name (optional)"),
256
257
  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"
257
258
  }),
258
259
  /* @__PURE__ */ E("button", {
259
260
  type: "button",
260
- onClick: ie,
261
+ onClick: oe,
261
262
  disabled: !L.trim(),
262
263
  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",
263
- children: [/* @__PURE__ */ T(b, { className: "size-4 " }), C("channel.add", "Add")]
264
+ children: [/* @__PURE__ */ T(te, { className: "size-4 " }), S("channel.add", "Add")]
264
265
  })
265
266
  ]
266
267
  }),
267
- P.length > 0 ? /* @__PURE__ */ T("div", {
268
- className: "border rounded-lg divide-y",
269
- children: P.map((e) => /* @__PURE__ */ E("div", {
268
+ F.length > 0 ? /* @__PURE__ */ T(D, {
269
+ treatment: "plain",
270
+ className: "border-border-seam rounded-lg p-0 divide-y divide-[var(--color-border-seam)] overflow-hidden",
271
+ children: F.map((e) => /* @__PURE__ */ E("div", {
270
272
  className: "p-3 flex items-center justify-between",
271
273
  children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
272
274
  className: "text-sm font-medium",
@@ -276,14 +278,14 @@ function O() {
276
278
  children: e.name
277
279
  })] }), /* @__PURE__ */ T("button", {
278
280
  type: "button",
279
- onClick: () => ae(e.id),
281
+ onClick: () => se(e.id),
280
282
  className: "p-1 hover:bg-bg-sunken rounded transition-colors",
281
- children: /* @__PURE__ */ T(te, { className: "size-4 text-text-secondary" })
283
+ children: /* @__PURE__ */ T(C, { className: "size-4 text-text-secondary" })
282
284
  })]
283
285
  }, e.id))
284
286
  }) : /* @__PURE__ */ T("p", {
285
287
  className: "text-sm text-text-secondary text-center py-4",
286
- children: C("channel.noRecipientsYet", "No recipients added yet")
288
+ children: S("channel.noRecipientsYet", "No recipients added yet")
287
289
  })
288
290
  ]
289
291
  }),
@@ -292,9 +294,9 @@ function O() {
292
294
  children: [
293
295
  /* @__PURE__ */ E("label", {
294
296
  className: "text-sm font-medium",
295
- children: [C("channel.messageContent", "Message Content"), " *"]
297
+ children: [S("channel.messageContent", "Message Content"), " *"]
296
298
  }),
297
- M === "EMAIL" && /* @__PURE__ */ T("input", {
299
+ N === "EMAIL" && /* @__PURE__ */ T("input", {
298
300
  "aria-label": "Subject",
299
301
  type: "text",
300
302
  value: V,
@@ -316,7 +318,7 @@ function O() {
316
318
  className: "space-y-2",
317
319
  children: [/* @__PURE__ */ T("label", {
318
320
  className: "text-sm font-medium",
319
- children: C("channel.priority", "Priority")
321
+ children: S("channel.priority", "Priority")
320
322
  }), /* @__PURE__ */ T("div", {
321
323
  className: "flex gap-2",
322
324
  children: [
@@ -336,51 +338,52 @@ function O() {
336
338
  className: "flex justify-end pt-4",
337
339
  children: /* @__PURE__ */ T("button", {
338
340
  type: "button",
339
- onClick: se,
340
- disabled: k || !A || P.length === 0 || !U.trim(),
341
+ onClick: le,
342
+ disabled: A || !j || F.length === 0 || !U.trim(),
341
343
  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",
342
- children: k ? /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(g, { className: "size-5 animate-spin" }), C("channel.sending", "Sending...")] }) : /* @__PURE__ */ E(w, { children: [
343
- /* @__PURE__ */ T(x, { className: "size-5 " }),
344
- C("channel.sendTo", "Send to"),
344
+ children: A ? /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(ee, { className: "size-5 animate-spin" }), S("channel.sending", "Sending...")] }) : /* @__PURE__ */ E(w, { children: [
345
+ /* @__PURE__ */ T(b, { className: "size-5 " }),
346
+ S("channel.sendTo", "Send to"),
345
347
  " ",
346
- P.length,
348
+ F.length,
347
349
  " ",
348
- P.length === 1 ? C("channel.recipient", "recipient") : C("channel.recipients", "recipients")
350
+ F.length === 1 ? S("channel.recipient", "recipient") : S("channel.recipients", "recipients")
349
351
  ] })
350
352
  })
351
353
  })
352
354
  ]
353
355
  }) : /* @__PURE__ */ E("div", {
354
356
  className: "space-y-6",
355
- children: [/* @__PURE__ */ E("div", {
356
- className: "p-4 rounded-lg border flex items-center justify-between",
357
+ children: [/* @__PURE__ */ E(ie, {
358
+ className: "p-4 flex items-center justify-between",
357
359
  children: [/* @__PURE__ */ E("div", {
358
360
  className: "flex items-center gap-4",
359
- 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", {
361
+ 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", {
360
362
  className: "text-lg font-semibold",
361
- children: $ === 0 ? C("channel.allMessagesSent", "All messages sent!") : `${Q} of ${P.length} sent`
363
+ children: $ === 0 ? S("channel.allMessagesSent", "All messages sent!") : `${Q} of ${F.length} sent`
362
364
  }), /* @__PURE__ */ E("p", {
363
365
  className: "text-sm text-text-secondary",
364
366
  children: [
365
367
  Q,
366
368
  " ",
367
- C("channel.successful", "successful"),
369
+ S("channel.successful", "successful"),
368
370
  ", ",
369
371
  $,
370
372
  " ",
371
- C("channel.failed", "failed")
373
+ S("channel.failed", "failed")
372
374
  ]
373
375
  })] })]
374
376
  }), /* @__PURE__ */ T("button", {
375
377
  type: "button",
376
- onClick: oe,
378
+ onClick: ce,
377
379
  className: "px-4 py-2 rounded-lg border hover:bg-bg-sunken transition-colors",
378
- children: C("channel.sendAnother", "Send Another")
380
+ children: S("channel.sendAnother", "Send Another")
379
381
  })]
380
- }), /* @__PURE__ */ T("div", {
381
- className: "border rounded-lg divide-y",
382
+ }), /* @__PURE__ */ T(D, {
383
+ treatment: "plain",
384
+ className: "border-border-seam rounded-lg p-0 divide-y divide-[var(--color-border-seam)] overflow-hidden",
382
385
  children: q.map((e) => {
383
- let t = P.find((t) => t.id === e.recipientId);
386
+ let t = F.find((t) => t.id === e.recipientId);
384
387
  return /* @__PURE__ */ E("div", {
385
388
  className: "p-4 flex items-center justify-between",
386
389
  children: [/* @__PURE__ */ E("div", { children: [
@@ -400,7 +403,7 @@ function O() {
400
403
  className: "text-xs text-status-error-text",
401
404
  children: e.error
402
405
  })
403
- ] }), e.success ? /* @__PURE__ */ T(m, { className: "size-5 text-status-success-text" }) : /* @__PURE__ */ T(ne, { className: "size-5 text-status-error-text" })]
406
+ ] }), e.success ? /* @__PURE__ */ T(h, { className: "size-5 text-status-success-text" }) : /* @__PURE__ */ T(ne, { className: "size-5 text-status-error-text" })]
404
407
  }, e.recipientId);
405
408
  })
406
409
  })]
@@ -410,6 +413,6 @@ function O() {
410
413
  });
411
414
  }
412
415
  //#endregion
413
- export { O as SendMessagePage };
416
+ export { k as SendMessagePage };
414
417
 
415
418
  //# sourceMappingURL=SendMessagePage.js.map
package/dist/channel/modules/channels/pages/SendMessagePage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SendMessagePage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/SendMessagePage.tsx"],"sourcesContent":["/**\n * Send Message Page\n *\n * UI for sending notifications/messages through channels.\n * Supports single and bulk delivery with recipient management.\n */\n\nimport { useState, useCallback, useRef } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n ArrowLeft,\n Send,\n Loader2,\n AlertCircle,\n CheckCircle2,\n XCircle,\n Plus,\n X,\n Mail,\n Smartphone,\n Bell,\n MessageSquare,\n Hash,\n Users,\n MessageCircle,\n} from 'lucide-react';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { useChannels } from '../../../hooks/useChannels';\nimport { getGlobalChannelClient } from '../../../graphql/global-client';\nimport { useSendNotificationMutation } from '../../../../generated/global-operations';\nimport {\n ChannelPlatform,\n NotificationChannel,\n NotificationPriority,\n RecipientInput,\n TriggerNotificationInput,\n} from '../../../../generated/global-types';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface Recipient {\n id: string;\n address: string;\n name?: string;\n}\n\ninterface DeliveryResult {\n recipientId: string;\n success: boolean;\n messageId?: string;\n error?: string;\n}\n\n// ============================================================================\n// PLATFORM CONFIG\n// ============================================================================\n\nconst PLATFORM_ICONS: Record<string, typeof Mail> = {\n EMAIL: Mail,\n SMS: Smartphone,\n PUSH: Bell,\n WHATSAPP: MessageSquare,\n SLACK: Hash,\n TEAMS: Users,\n DISCORD: MessageCircle,\n INAPP: Bell,\n WEBCHAT: MessageSquare,\n WEBHOOK: Send,\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport function SendMessagePage() {\n const navigate = useNavigate();\n const { channels } = useChannels();\n const { organizationId, authToken, apiGatewayUrl } = useChannelContext();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n\n // Get Apollo client for notification mutations\n const client = getGlobalChannelClient(apiGatewayUrl, authToken, organizationId);\n\n // Send notification via notification-svc (which calls channel-svc with service actor)\n const [sendNotification, { loading: isSending }] = useSendNotificationMutation({ client });\n\n // Channel selection\n const [selectedChannelId, setSelectedChannelId] = useState('');\n const [platform, setPlatform] = useState<ChannelPlatform>('EMAIL' as ChannelPlatform);\n\n // Recipients\n const [recipients, setRecipients] = useState<Recipient[]>([]);\n const recipientIdCounter = useRef(0);\n const [newAddress, setNewAddress] = useState('');\n const [newName, setNewName] = useState('');\n\n // Message content\n const [subject, setSubject] = useState('');\n const [body, setBody] = useState('');\n const [priority, setPriority] = useState<NotificationPriority>(NotificationPriority.Medium);\n\n // UI state\n const [results, setResults] = useState<DeliveryResult[] | null>(null);\n const [error, setError] = useState<string | null>(null);\n\n // Filter channels by platform\n const filteredChannels = channels.filter((ch) => ch.platform === platform);\n\n // Add recipient\n const addRecipient = useCallback(() => {\n if (!newAddress.trim()) return;\n\n const recipient: Recipient = {\n id: `r-${++recipientIdCounter.current}`,\n address: newAddress.trim(),\n name: newName.trim() || undefined,\n };\n\n setRecipients((prev) => [...prev, recipient]);\n setNewAddress('');\n setNewName('');\n }, [newAddress, newName]);\n\n // Remove recipient\n const removeRecipient = useCallback((id: string) => {\n setRecipients((prev) => prev.filter((r) => r.id !== id));\n }, []);\n\n // Clear results and reset\n const handleReset = useCallback(() => {\n setResults(null);\n setError(null);\n setSubject('');\n setBody('');\n setRecipients([]);\n }, []);\n\n // Send message via notification-svc (which handles service actor auth to channel-svc)\n const handleSend = async () => {\n if (!selectedChannelId) {\n setError(tr('channel.validation.selectChannel', 'Please select a channel'));\n return;\n }\n\n if (recipients.length === 0) {\n setError(tr('channel.validation.addRecipient', 'Please add at least one recipient'));\n return;\n }\n\n if (!body.trim()) {\n setError(tr('channel.validation.enterMessage', 'Please enter a message'));\n return;\n }\n\n setError(null);\n setResults(null);\n\n try {\n // Find the selected channel to get platform and connection info\n const selectedChannel = channels.find((ch) => ch.id === selectedChannelId);\n if (!selectedChannel) {\n setError(tr('channel.error.channelNotFound', 'Selected channel not found'));\n return;\n }\n\n // Map ChannelPlatform to NotificationChannel\n // Most platforms have the same name (EMAIL, SMS, PUSH, etc.)\n // ChannelPlatform uses 'INAPP' but there's no INAPP in ChannelPlatform enum\n // (only in PLATFORM_ICONS). We check using string literal.\n const platformStr = platform as string;\n const notificationChannel =\n platformStr === 'INAPP'\n ? NotificationChannel.InApp\n : (platform as unknown as NotificationChannel);\n\n // Send to each recipient in parallel via notification-svc\n const deliveryResults: DeliveryResult[] = await Promise.all(\n recipients.map(async (recipient): Promise<DeliveryResult> => {\n // Build recipient input for notification-svc\n const recipientInput: RecipientInput = {};\n switch (platform) {\n case 'EMAIL':\n recipientInput.email = recipient.address;\n break;\n case 'SMS':\n case 'WHATSAPP':\n recipientInput.phoneNumber = recipient.address;\n break;\n case 'PUSH':\n recipientInput.pushToken = recipient.address;\n break;\n case 'SLACK':\n recipientInput.slackUserId = recipient.address;\n break;\n case 'TEAMS':\n recipientInput.teamsUserId = recipient.address;\n break;\n case 'WEBHOOK':\n recipientInput.webhookUrl = recipient.address;\n break;\n default:\n recipientInput.email = recipient.address;\n }\n\n // Build TriggerNotificationInput - creates notification AND triggers delivery\n const triggerInput: TriggerNotificationInput = {\n channelId: selectedChannel.id,\n platform: notificationChannel,\n notification: {\n body: body,\n channel: notificationChannel,\n recipient: recipientInput,\n subject: platform === 'EMAIL' ? subject : undefined,\n priority: priority,\n },\n };\n\n try {\n const result = await sendNotification({ variables: { input: triggerInput } });\n\n if (result.data?.triggerNotification) {\n const notification = result.data.triggerNotification;\n // deliveryStatus is null at trigger time (async delivery hasn't completed yet).\n // Use triggerStatus + status to determine immediate send success.\n const failed =\n notification.status === 'FAILED' || notification.triggerStatus === 'FAILED';\n const errorDetail = notification.errorMessage || notification.errorCode;\n return {\n recipientId: recipient.id,\n success: !failed,\n messageId: notification.id,\n error: failed\n ? errorDetail\n ? `Delivery failed: ${errorDetail}`\n : 'Delivery failed'\n : undefined,\n };\n }\n return {\n recipientId: recipient.id,\n success: false,\n error: result.error?.message || 'Failed to send notification',\n };\n } catch (err: unknown) {\n return {\n recipientId: recipient.id,\n success: false,\n error: err instanceof Error ? err.message : 'Failed to send notification',\n };\n }\n })\n );\n\n setResults(deliveryResults);\n } catch (err: unknown) {\n const message = err instanceof Error ? err.message : 'Failed to send message';\n setError(message);\n }\n };\n\n const successCount = results?.filter((r) => r.success).length ?? 0;\n const failCount = results?.filter((r) => !r.success).length ?? 0;\n\n return (\n <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELIVERY_SEND}>\n <div className=\"min-h-screen bg-bg-surface\">\n {/* Header */}\n <div className=\"border-b bg-bg-surface\">\n <div className=\"container mx-auto px-6 py-4\">\n <div className=\"flex items-center gap-4\">\n <button\n type=\"button\"\n onClick={() => navigate('/channels/list')}\n className=\"p-2 hover:bg-bg-sunken rounded-lg transition-colors\"\n >\n <ArrowLeft className=\"size-5 \" />\n </button>\n <div>\n <h1 className=\"text-2xl font-bold\">{tr('channel.sendMessage', 'Send Message')}</h1>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'channel.sendMessageSubtitle',\n 'Send notifications through configured channels'\n )}\n </p>\n </div>\n </div>\n </div>\n </div>\n\n {/* Content */}\n <div className=\"container mx-auto px-6 py-8 max-w-3xl\">\n {results === null ? (\n <div className=\"space-y-6\">\n {/* Error Alert */}\n {error && (\n <div className=\"p-4 rounded-lg bg-status-error-bg/10 border border-status-error-border/20 flex items-center gap-3\">\n <AlertCircle className=\"size-5 text-status-error-text shrink-0\" />\n <p className=\"text-sm text-status-error-text\">{error}</p>\n </div>\n )}\n\n {/* Platform Selection */}\n <div className=\"space-y-3\">\n <label className=\"text-sm font-medium\">{tr('channel.platform', 'Platform')}</label>\n <div className=\"flex flex-wrap gap-2\">\n {(\n [\n 'EMAIL',\n 'SMS',\n 'PUSH',\n 'WHATSAPP',\n 'SLACK',\n 'TEAMS',\n 'WEBHOOK',\n ] as ChannelPlatform[]\n ).map((p) => {\n const Icon = PLATFORM_ICONS[p] || Send;\n const isSelected = platform === p;\n return (\n <button\n type=\"button\"\n key={p}\n onClick={() => {\n setPlatform(p);\n setSelectedChannelId('');\n }}\n className={`px-4 py-2 rounded-lg border flex items-center gap-2 transition-all ${\n isSelected\n ? 'bg-action-primary-bg text-action-primary-text border-primary'\n : 'bg-bg-surface hover:bg-bg-sunken border-border-subtle'\n }`}\n >\n <Icon className=\"size-4 \" />\n <span className=\"text-sm\">{p}</span>\n </button>\n );\n })}\n </div>\n </div>\n\n {/* Channel Selection */}\n <div className=\"space-y-2\">\n <label className=\"text-sm font-medium\">{tr('channel.channel', 'Channel')} *</label>\n {filteredChannels.length === 0 ? (\n <div className=\"p-4 rounded-lg border border-dashed text-center\">\n <p className=\"text-sm text-text-secondary\">\n No {platform} channels configured.\n <button\n type=\"button\"\n onClick={() => navigate('./create')}\n className=\"text-primary hover:underline ml-1\"\n >\n Create one\n </button>\n </p>\n </div>\n ) : (\n <select\n value={selectedChannelId}\n onChange={(e) => setSelectedChannelId(e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n >\n <option value=\"\">{tr('channel.selectChannel', 'Select a channel...')}</option>\n {filteredChannels.map((ch) => (\n <option key={ch.id} value={ch.id}>\n {ch.name} ({ch.adapterType})\n </option>\n ))}\n </select>\n )}\n </div>\n\n {/* Recipients */}\n <div className=\"space-y-3\">\n <label className=\"text-sm font-medium\">\n {tr('channel.recipients', 'Recipients')}\n </label>\n\n {/* Add recipient form */}\n <div className=\"flex gap-2\">\n <input\n aria-label={platform === 'EMAIL' ? 'email@example.com' : '+1234567890'}\n type=\"text\"\n value={newAddress}\n onChange={(e) => setNewAddress(e.target.value)}\n placeholder={platform === 'EMAIL' ? 'email@example.com' : '+1234567890'}\n className=\"flex-1 px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n />\n <input\n aria-label={tr('channel.nameOptional', 'Name (optional)')}\n type=\"text\"\n value={newName}\n onChange={(e) => setNewName(e.target.value)}\n placeholder={tr('channel.nameOptional', 'Name (optional)')}\n 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\"\n />\n <button\n type=\"button\"\n onClick={addRecipient}\n disabled={!newAddress.trim()}\n 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\"\n >\n <Plus className=\"size-4 \" />\n {tr('channel.add', 'Add')}\n </button>\n </div>\n\n {/* recipient list */}\n {recipients.length > 0 ? (\n <div className=\"border rounded-lg divide-y\">\n {recipients.map((r) => (\n <div key={r.id} className=\"p-3 flex items-center justify-between\">\n <div>\n <p className=\"text-sm font-medium\">{r.address}</p>\n {r.name && <p className=\"text-xs text-text-secondary\">{r.name}</p>}\n </div>\n <button\n type=\"button\"\n onClick={() => removeRecipient(r.id)}\n className=\"p-1 hover:bg-bg-sunken rounded transition-colors\"\n >\n <X className=\"size-4 text-text-secondary\" />\n </button>\n </div>\n ))}\n </div>\n ) : (\n <p className=\"text-sm text-text-secondary text-center py-4\">\n {tr('channel.noRecipientsYet', 'No recipients added yet')}\n </p>\n )}\n </div>\n\n {/* Message Content */}\n <div className=\"space-y-3\">\n <label className=\"text-sm font-medium\">\n {tr('channel.messageContent', 'Message Content')} *\n </label>\n\n {platform === 'EMAIL' && (\n <input\n aria-label=\"Subject\"\n type=\"text\"\n value={subject}\n onChange={(e) => setSubject(e.target.value)}\n placeholder=\"Subject\"\n className=\"w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n />\n )}\n\n <textarea\n aria-label=\"Enter your message...\"\n value={body}\n onChange={(e) => setBody(e.target.value)}\n placeholder=\"Enter your message...\"\n rows={6}\n className=\"w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary resize-none\"\n />\n </div>\n\n {/* Priority */}\n <div className=\"space-y-2\">\n <label className=\"text-sm font-medium\">{tr('channel.priority', 'Priority')}</label>\n <div className=\"flex gap-2\">\n {(\n [\n NotificationPriority.Low,\n NotificationPriority.Medium,\n NotificationPriority.High,\n NotificationPriority.Urgent,\n ] as const\n ).map((p) => (\n <button\n type=\"button\"\n key={p}\n onClick={() => setPriority(p)}\n className={`px-4 py-2 rounded-lg border text-sm transition-all ${\n priority === p\n ? 'bg-action-primary-bg text-action-primary-text border-primary'\n : 'bg-bg-surface hover:bg-bg-sunken border-border-subtle'\n }`}\n >\n {p}\n </button>\n ))}\n </div>\n </div>\n\n {/* Send Button */}\n <div className=\"flex justify-end pt-4\">\n <button\n type=\"button\"\n onClick={handleSend}\n disabled={\n isSending || !selectedChannelId || recipients.length === 0 || !body.trim()\n }\n 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\"\n >\n {isSending ? (\n <>\n <Loader2 className=\"size-5 animate-spin\" />\n {tr('channel.sending', 'Sending...')}\n </>\n ) : (\n <>\n <Send className=\"size-5 \" />\n {tr('channel.sendTo', 'Send to')} {recipients.length}{' '}\n {recipients.length !== 1\n ? tr('channel.recipients', 'recipients')\n : tr('channel.recipient', 'recipient')}\n </>\n )}\n </button>\n </div>\n </div>\n ) : (\n /* Results View */\n <div className=\"space-y-6\">\n {/* Summary */}\n <div className=\"p-4 rounded-lg border flex items-center justify-between\">\n <div className=\"flex items-center gap-4\">\n {failCount === 0 ? (\n <CheckCircle2 className=\"size-8 text-status-success-text\" />\n ) : (\n <AlertCircle className=\"size-8 text-status-warning-text\" />\n )}\n <div>\n <h2 className=\"text-lg font-semibold\">\n {failCount === 0\n ? tr('channel.allMessagesSent', 'All messages sent!')\n : `${successCount} of ${recipients.length} sent`}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {successCount} {tr('channel.successful', 'successful')}, {failCount}{' '}\n {tr('channel.failed', 'failed')}\n </p>\n </div>\n </div>\n <button\n type=\"button\"\n onClick={handleReset}\n className=\"px-4 py-2 rounded-lg border hover:bg-bg-sunken transition-colors\"\n >\n {tr('channel.sendAnother', 'Send Another')}\n </button>\n </div>\n\n {/* Results List */}\n <div className=\"border rounded-lg divide-y\">\n {results.map((result) => {\n const recipient = recipients.find((r) => r.id === result.recipientId);\n return (\n <div key={result.recipientId} className=\"p-4 flex items-center justify-between\">\n <div>\n <p className=\"text-sm font-medium\">{recipient?.address}</p>\n {recipient?.name && (\n <p className=\"text-xs text-text-secondary\">{recipient.name}</p>\n )}\n {result.messageId && (\n <p className=\"text-xs text-text-secondary font-mono\">\n {result.messageId}\n </p>\n )}\n {result.error && <p className=\"text-xs text-status-error-text\">{result.error}</p>}\n </div>\n {result.success ? (\n <CheckCircle2 className=\"size-5 text-status-success-text\" />\n ) : (\n <XCircle className=\"size-5 text-status-error-text\" />\n )}\n </div>\n );\n })}\n </div>\n </div>\n )}\n </div>\n </div>\n </PermissionGuard>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"SendMessagePage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/SendMessagePage.tsx"],"sourcesContent":["/**\n * Send Message Page\n *\n * UI for sending notifications/messages through channels.\n * Supports single and bulk delivery with recipient management.\n */\n\nimport { useState, useCallback, useRef } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n ArrowLeft,\n Send,\n Loader2,\n AlertCircle,\n CheckCircle2,\n XCircle,\n Plus,\n X,\n Mail,\n Smartphone,\n Bell,\n MessageSquare,\n Hash,\n Users,\n MessageCircle,\n} from 'lucide-react';\nimport { EmphasisPanel, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { useChannels } from '../../../hooks/useChannels';\nimport { getGlobalChannelClient } from '../../../graphql/global-client';\nimport { useSendNotificationMutation } from '../../../../generated/global-operations';\nimport {\n ChannelPlatform,\n NotificationChannel,\n NotificationPriority,\n RecipientInput,\n TriggerNotificationInput,\n} from '../../../../generated/global-types';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface Recipient {\n id: string;\n address: string;\n name?: string;\n}\n\ninterface DeliveryResult {\n recipientId: string;\n success: boolean;\n messageId?: string;\n error?: string;\n}\n\n// ============================================================================\n// PLATFORM CONFIG\n// ============================================================================\n\nconst PLATFORM_ICONS: Record<string, typeof Mail> = {\n EMAIL: Mail,\n SMS: Smartphone,\n PUSH: Bell,\n WHATSAPP: MessageSquare,\n SLACK: Hash,\n TEAMS: Users,\n DISCORD: MessageCircle,\n INAPP: Bell,\n WEBCHAT: MessageSquare,\n WEBHOOK: Send,\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport function SendMessagePage() {\n const navigate = useNavigate();\n const { channels } = useChannels();\n const { organizationId, authToken, apiGatewayUrl } = useChannelContext();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n\n // Get Apollo client for notification mutations\n const client = getGlobalChannelClient(apiGatewayUrl, authToken, organizationId);\n\n // Send notification via notification-svc (which calls channel-svc with service actor)\n const [sendNotification, { loading: isSending }] = useSendNotificationMutation({ client });\n\n // Channel selection\n const [selectedChannelId, setSelectedChannelId] = useState('');\n const [platform, setPlatform] = useState<ChannelPlatform>('EMAIL' as ChannelPlatform);\n\n // Recipients\n const [recipients, setRecipients] = useState<Recipient[]>([]);\n const recipientIdCounter = useRef(0);\n const [newAddress, setNewAddress] = useState('');\n const [newName, setNewName] = useState('');\n\n // Message content\n const [subject, setSubject] = useState('');\n const [body, setBody] = useState('');\n const [priority, setPriority] = useState<NotificationPriority>(NotificationPriority.Medium);\n\n // UI state\n const [results, setResults] = useState<DeliveryResult[] | null>(null);\n const [error, setError] = useState<string | null>(null);\n\n // Filter channels by platform\n const filteredChannels = channels.filter((ch) => ch.platform === platform);\n\n // Add recipient\n const addRecipient = useCallback(() => {\n if (!newAddress.trim()) return;\n\n const recipient: Recipient = {\n id: `r-${++recipientIdCounter.current}`,\n address: newAddress.trim(),\n name: newName.trim() || undefined,\n };\n\n setRecipients((prev) => [...prev, recipient]);\n setNewAddress('');\n setNewName('');\n }, [newAddress, newName]);\n\n // Remove recipient\n const removeRecipient = useCallback((id: string) => {\n setRecipients((prev) => prev.filter((r) => r.id !== id));\n }, []);\n\n // Clear results and reset\n const handleReset = useCallback(() => {\n setResults(null);\n setError(null);\n setSubject('');\n setBody('');\n setRecipients([]);\n }, []);\n\n // Send message via notification-svc (which handles service actor auth to channel-svc)\n const handleSend = async () => {\n if (!selectedChannelId) {\n setError(tr('channel.validation.selectChannel', 'Please select a channel'));\n return;\n }\n\n if (recipients.length === 0) {\n setError(tr('channel.validation.addRecipient', 'Please add at least one recipient'));\n return;\n }\n\n if (!body.trim()) {\n setError(tr('channel.validation.enterMessage', 'Please enter a message'));\n return;\n }\n\n setError(null);\n setResults(null);\n\n try {\n // Find the selected channel to get platform and connection info\n const selectedChannel = channels.find((ch) => ch.id === selectedChannelId);\n if (!selectedChannel) {\n setError(tr('channel.error.channelNotFound', 'Selected channel not found'));\n return;\n }\n\n // Map ChannelPlatform to NotificationChannel\n // Most platforms have the same name (EMAIL, SMS, PUSH, etc.)\n // ChannelPlatform uses 'INAPP' but there's no INAPP in ChannelPlatform enum\n // (only in PLATFORM_ICONS). We check using string literal.\n const platformStr = platform as string;\n const notificationChannel =\n platformStr === 'INAPP'\n ? NotificationChannel.InApp\n : (platform as unknown as NotificationChannel);\n\n // Send to each recipient in parallel via notification-svc\n const deliveryResults: DeliveryResult[] = await Promise.all(\n recipients.map(async (recipient): Promise<DeliveryResult> => {\n // Build recipient input for notification-svc\n const recipientInput: RecipientInput = {};\n switch (platform) {\n case 'EMAIL':\n recipientInput.email = recipient.address;\n break;\n case 'SMS':\n case 'WHATSAPP':\n recipientInput.phoneNumber = recipient.address;\n break;\n case 'PUSH':\n recipientInput.pushToken = recipient.address;\n break;\n case 'SLACK':\n recipientInput.slackUserId = recipient.address;\n break;\n case 'TEAMS':\n recipientInput.teamsUserId = recipient.address;\n break;\n case 'WEBHOOK':\n recipientInput.webhookUrl = recipient.address;\n break;\n default:\n recipientInput.email = recipient.address;\n }\n\n // Build TriggerNotificationInput - creates notification AND triggers delivery\n const triggerInput: TriggerNotificationInput = {\n channelId: selectedChannel.id,\n platform: notificationChannel,\n notification: {\n body: body,\n channel: notificationChannel,\n recipient: recipientInput,\n subject: platform === 'EMAIL' ? subject : undefined,\n priority: priority,\n },\n };\n\n try {\n const result = await sendNotification({ variables: { input: triggerInput } });\n\n if (result.data?.triggerNotification) {\n const notification = result.data.triggerNotification;\n // deliveryStatus is null at trigger time (async delivery hasn't completed yet).\n // Use triggerStatus + status to determine immediate send success.\n const failed =\n notification.status === 'FAILED' || notification.triggerStatus === 'FAILED';\n const errorDetail = notification.errorMessage || notification.errorCode;\n return {\n recipientId: recipient.id,\n success: !failed,\n messageId: notification.id,\n error: failed\n ? errorDetail\n ? `Delivery failed: ${errorDetail}`\n : 'Delivery failed'\n : undefined,\n };\n }\n return {\n recipientId: recipient.id,\n success: false,\n error: result.error?.message || 'Failed to send notification',\n };\n } catch (err: unknown) {\n return {\n recipientId: recipient.id,\n success: false,\n error: err instanceof Error ? err.message : 'Failed to send notification',\n };\n }\n })\n );\n\n setResults(deliveryResults);\n } catch (err: unknown) {\n const message = err instanceof Error ? err.message : 'Failed to send message';\n setError(message);\n }\n };\n\n const successCount = results?.filter((r) => r.success).length ?? 0;\n const failCount = results?.filter((r) => !r.success).length ?? 0;\n\n return (\n <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELIVERY_SEND}>\n <div className=\"min-h-screen bg-bg-surface\">\n {/* Header */}\n <div className=\"border-b bg-bg-surface\">\n <div className=\"container mx-auto px-6 py-4\">\n <div className=\"flex items-center gap-4\">\n <button\n type=\"button\"\n onClick={() => navigate('/channels/list')}\n className=\"p-2 hover:bg-bg-sunken rounded-lg transition-colors\"\n >\n <ArrowLeft className=\"size-5 \" />\n </button>\n <div>\n <h1 className=\"text-2xl font-bold\">{tr('channel.sendMessage', 'Send Message')}</h1>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'channel.sendMessageSubtitle',\n 'Send notifications through configured channels'\n )}\n </p>\n </div>\n </div>\n </div>\n </div>\n\n {/* Content */}\n <div className=\"container mx-auto px-6 py-8 max-w-3xl\">\n {results === null ? (\n <div className=\"space-y-6\">\n {/* Error Alert */}\n {error && (\n <div className=\"p-4 rounded-lg bg-status-error-bg/10 border border-status-error-border/20 flex items-center gap-3\">\n <AlertCircle className=\"size-5 text-status-error-text shrink-0\" />\n <p className=\"text-sm text-status-error-text\">{error}</p>\n </div>\n )}\n\n {/* Platform Selection */}\n <div className=\"space-y-3\">\n <label className=\"text-sm font-medium\">{tr('channel.platform', 'Platform')}</label>\n <div className=\"flex flex-wrap gap-2\">\n {(\n [\n 'EMAIL',\n 'SMS',\n 'PUSH',\n 'WHATSAPP',\n 'SLACK',\n 'TEAMS',\n 'WEBHOOK',\n ] as ChannelPlatform[]\n ).map((p) => {\n const Icon = PLATFORM_ICONS[p] || Send;\n const isSelected = platform === p;\n return (\n <button\n type=\"button\"\n key={p}\n onClick={() => {\n setPlatform(p);\n setSelectedChannelId('');\n }}\n className={`px-4 py-2 rounded-lg border flex items-center gap-2 transition-all ${\n isSelected\n ? 'bg-action-primary-bg text-action-primary-text border-primary'\n : 'bg-bg-surface hover:bg-bg-sunken border-border-subtle'\n }`}\n >\n <Icon className=\"size-4 \" />\n <span className=\"text-sm\">{p}</span>\n </button>\n );\n })}\n </div>\n </div>\n\n {/* Channel Selection */}\n <div className=\"space-y-2\">\n <label className=\"text-sm font-medium\">{tr('channel.channel', 'Channel')} *</label>\n {filteredChannels.length === 0 ? (\n <div className=\"p-4 rounded-lg border border-dashed text-center\">\n <p className=\"text-sm text-text-secondary\">\n No {platform} channels configured.\n <button\n type=\"button\"\n onClick={() => navigate('./create')}\n className=\"text-primary hover:underline ml-1\"\n >\n Create one\n </button>\n </p>\n </div>\n ) : (\n <select\n value={selectedChannelId}\n onChange={(e) => setSelectedChannelId(e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n >\n <option value=\"\">{tr('channel.selectChannel', 'Select a channel...')}</option>\n {filteredChannels.map((ch) => (\n <option key={ch.id} value={ch.id}>\n {ch.name} ({ch.adapterType})\n </option>\n ))}\n </select>\n )}\n </div>\n\n {/* Recipients */}\n <div className=\"space-y-3\">\n <label className=\"text-sm font-medium\">\n {tr('channel.recipients', 'Recipients')}\n </label>\n\n {/* Add recipient form */}\n <div className=\"flex gap-2\">\n <input\n aria-label={platform === 'EMAIL' ? 'email@example.com' : '+1234567890'}\n type=\"text\"\n value={newAddress}\n onChange={(e) => setNewAddress(e.target.value)}\n placeholder={platform === 'EMAIL' ? 'email@example.com' : '+1234567890'}\n className=\"flex-1 px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n />\n <input\n aria-label={tr('channel.nameOptional', 'Name (optional)')}\n type=\"text\"\n value={newName}\n onChange={(e) => setNewName(e.target.value)}\n placeholder={tr('channel.nameOptional', 'Name (optional)')}\n 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\"\n />\n <button\n type=\"button\"\n onClick={addRecipient}\n disabled={!newAddress.trim()}\n 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\"\n >\n <Plus className=\"size-4 \" />\n {tr('channel.add', 'Add')}\n </button>\n </div>\n\n {/* recipient list */}\n {recipients.length > 0 ? (\n <GlassCard\n treatment=\"plain\"\n className=\"border-border-seam rounded-lg p-0 divide-y divide-[var(--color-border-seam)] overflow-hidden\"\n >\n {recipients.map((r) => (\n <div key={r.id} className=\"p-3 flex items-center justify-between\">\n <div>\n <p className=\"text-sm font-medium\">{r.address}</p>\n {r.name && <p className=\"text-xs text-text-secondary\">{r.name}</p>}\n </div>\n <button\n type=\"button\"\n onClick={() => removeRecipient(r.id)}\n className=\"p-1 hover:bg-bg-sunken rounded transition-colors\"\n >\n <X className=\"size-4 text-text-secondary\" />\n </button>\n </div>\n ))}\n </GlassCard>\n ) : (\n <p className=\"text-sm text-text-secondary text-center py-4\">\n {tr('channel.noRecipientsYet', 'No recipients added yet')}\n </p>\n )}\n </div>\n\n {/* Message Content */}\n <div className=\"space-y-3\">\n <label className=\"text-sm font-medium\">\n {tr('channel.messageContent', 'Message Content')} *\n </label>\n\n {platform === 'EMAIL' && (\n <input\n aria-label=\"Subject\"\n type=\"text\"\n value={subject}\n onChange={(e) => setSubject(e.target.value)}\n placeholder=\"Subject\"\n className=\"w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n />\n )}\n\n <textarea\n aria-label=\"Enter your message...\"\n value={body}\n onChange={(e) => setBody(e.target.value)}\n placeholder=\"Enter your message...\"\n rows={6}\n className=\"w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary resize-none\"\n />\n </div>\n\n {/* Priority */}\n <div className=\"space-y-2\">\n <label className=\"text-sm font-medium\">{tr('channel.priority', 'Priority')}</label>\n <div className=\"flex gap-2\">\n {(\n [\n NotificationPriority.Low,\n NotificationPriority.Medium,\n NotificationPriority.High,\n NotificationPriority.Urgent,\n ] as const\n ).map((p) => (\n <button\n type=\"button\"\n key={p}\n onClick={() => setPriority(p)}\n className={`px-4 py-2 rounded-lg border text-sm transition-all ${\n priority === p\n ? 'bg-action-primary-bg text-action-primary-text border-primary'\n : 'bg-bg-surface hover:bg-bg-sunken border-border-subtle'\n }`}\n >\n {p}\n </button>\n ))}\n </div>\n </div>\n\n {/* Send Button */}\n <div className=\"flex justify-end pt-4\">\n <button\n type=\"button\"\n onClick={handleSend}\n disabled={\n isSending || !selectedChannelId || recipients.length === 0 || !body.trim()\n }\n 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\"\n >\n {isSending ? (\n <>\n <Loader2 className=\"size-5 animate-spin\" />\n {tr('channel.sending', 'Sending...')}\n </>\n ) : (\n <>\n <Send className=\"size-5 \" />\n {tr('channel.sendTo', 'Send to')} {recipients.length}{' '}\n {recipients.length !== 1\n ? tr('channel.recipients', 'recipients')\n : tr('channel.recipient', 'recipient')}\n </>\n )}\n </button>\n </div>\n </div>\n ) : (\n /* Results View */\n <div className=\"space-y-6\">\n {/* Summary */}\n <EmphasisPanel className=\"p-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-4\">\n {failCount === 0 ? (\n <CheckCircle2 className=\"size-8 text-status-success-text\" />\n ) : (\n <AlertCircle className=\"size-8 text-status-warning-text\" />\n )}\n <div>\n <h2 className=\"text-lg font-semibold\">\n {failCount === 0\n ? tr('channel.allMessagesSent', 'All messages sent!')\n : `${successCount} of ${recipients.length} sent`}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {successCount} {tr('channel.successful', 'successful')}, {failCount}{' '}\n {tr('channel.failed', 'failed')}\n </p>\n </div>\n </div>\n <button\n type=\"button\"\n onClick={handleReset}\n className=\"px-4 py-2 rounded-lg border hover:bg-bg-sunken transition-colors\"\n >\n {tr('channel.sendAnother', 'Send Another')}\n </button>\n </EmphasisPanel>\n\n {/* Results List */}\n <GlassCard\n treatment=\"plain\"\n className=\"border-border-seam rounded-lg p-0 divide-y divide-[var(--color-border-seam)] overflow-hidden\"\n >\n {results.map((result) => {\n const recipient = recipients.find((r) => r.id === result.recipientId);\n return (\n <div key={result.recipientId} className=\"p-4 flex items-center justify-between\">\n <div>\n <p className=\"text-sm font-medium\">{recipient?.address}</p>\n {recipient?.name && (\n <p className=\"text-xs text-text-secondary\">{recipient.name}</p>\n )}\n {result.messageId && (\n <p className=\"text-xs text-text-secondary font-mono\">\n {result.messageId}\n </p>\n )}\n {result.error && <p className=\"text-xs text-status-error-text\">{result.error}</p>}\n </div>\n {result.success ? (\n <CheckCircle2 className=\"size-5 text-status-success-text\" />\n ) : (\n <XCircle className=\"size-5 text-status-error-text\" />\n )}\n </div>\n );\n })}\n </GlassCard>\n </div>\n )}\n </div>\n </div>\n </PermissionGuard>\n );\n}\n"],"mappings":"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"}