@burdenoff/microfe-organization 2026.527.4 → 2026.527.5
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.
- package/dist/generated/global-types.js +3 -1
- package/dist/generated/global-types.js.map +1 -1
- package/dist/organization-management/modules/members/components/BulkInviteForm.js +291 -0
- package/dist/organization-management/modules/members/components/BulkInviteForm.js.map +1 -0
- package/dist/organization-management/modules/members/pages/InviteMemberPage.js +65 -42
- package/dist/organization-management/modules/members/pages/InviteMemberPage.js.map +1 -1
- package/dist/organization-management/modules/members/pages/InvitePeoplePage.js.map +1 -1
- package/dist/organization-management/modules/members/utils/bulkInviteCsv.js +52 -0
- package/dist/organization-management/modules/members/utils/bulkInviteCsv.js.map +1 -0
- package/dist/organization-management/modules/workspaces/components/AddWorkspaceMemberDialog.js +16 -0
- package/dist/organization-management/modules/workspaces/components/AddWorkspaceMemberDialog.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
import { toast as e } from "../../../../node_modules/sonner/dist/index.js";
|
|
2
|
+
import { useTr as t } from "../../../shared/hooks/useTr.js";
|
|
3
|
+
import { downloadTemplate as n, formatInviteError as r, parseBulkInviteCsv as i } from "../utils/bulkInviteCsv.js";
|
|
4
|
+
import { useCallback as a, useMemo as o, useRef as s, useState as c } from "react";
|
|
5
|
+
import { CheckCircle2 as l, Download as u, Loader2 as d, Send as f, Upload as p, XCircle as m } from "lucide-react";
|
|
6
|
+
import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
|
|
7
|
+
//#region src/organization-management/modules/members/components/BulkInviteForm.tsx
|
|
8
|
+
function v({ organizationId: v, inviteMember: y, onCancel: b, loading: x }) {
|
|
9
|
+
let S = t(), C = s(null), [w, T] = c([]), [E, D] = c(null), [O, k] = c(!1), [A, j] = c(!1), M = a((t) => {
|
|
10
|
+
let n = new FileReader();
|
|
11
|
+
n.onload = () => {
|
|
12
|
+
T(i(typeof n.result == "string" ? n.result : "").map((e) => ({
|
|
13
|
+
...e,
|
|
14
|
+
status: { kind: "idle" }
|
|
15
|
+
}))), D(t.name);
|
|
16
|
+
}, n.onerror = () => {
|
|
17
|
+
e.error(S("members.bulkInvite.readError", "Failed to read CSV file."));
|
|
18
|
+
}, n.readAsText(t);
|
|
19
|
+
}, [S]), N = (e) => {
|
|
20
|
+
let t = e.target.files?.[0];
|
|
21
|
+
t && M(t), e.target.value = "";
|
|
22
|
+
}, P = (e) => {
|
|
23
|
+
e.preventDefault(), j(!1);
|
|
24
|
+
let t = e.dataTransfer.files?.[0];
|
|
25
|
+
t && M(t);
|
|
26
|
+
}, F = o(() => ({
|
|
27
|
+
total: w.length,
|
|
28
|
+
withErrors: w.filter((e) => e.errors.length > 0).length,
|
|
29
|
+
sendable: w.filter((e) => e.errors.length === 0).length,
|
|
30
|
+
invited: w.filter((e) => e.status.kind === "invited").length,
|
|
31
|
+
failed: w.filter((e) => e.status.kind === "failed").length
|
|
32
|
+
}), [w]), I = async () => {
|
|
33
|
+
if (F.sendable === 0 || O) return;
|
|
34
|
+
k(!0);
|
|
35
|
+
let t = w.map((e, t) => ({
|
|
36
|
+
r: e,
|
|
37
|
+
idx: t
|
|
38
|
+
})).filter(({ r: e }) => e.errors.length === 0 && e.status.kind !== "invited");
|
|
39
|
+
for (let { idx: e } of t) {
|
|
40
|
+
T((t) => t.map((t, n) => n === e ? {
|
|
41
|
+
...t,
|
|
42
|
+
status: { kind: "sending" }
|
|
43
|
+
} : t));
|
|
44
|
+
let t = w[e];
|
|
45
|
+
try {
|
|
46
|
+
await y({
|
|
47
|
+
organizationId: v,
|
|
48
|
+
email: t.email,
|
|
49
|
+
message: t.message
|
|
50
|
+
}), T((t) => t.map((t, n) => n === e ? {
|
|
51
|
+
...t,
|
|
52
|
+
status: { kind: "invited" }
|
|
53
|
+
} : t));
|
|
54
|
+
} catch (t) {
|
|
55
|
+
let n = r(t, S);
|
|
56
|
+
T((t) => t.map((t, r) => r === e ? {
|
|
57
|
+
...t,
|
|
58
|
+
status: {
|
|
59
|
+
kind: "failed",
|
|
60
|
+
message: n
|
|
61
|
+
}
|
|
62
|
+
} : t));
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
k(!1), T((t) => {
|
|
66
|
+
let n = t.filter((e) => e.status.kind === "invited").length, r = t.filter((e) => e.status.kind === "failed").length;
|
|
67
|
+
return e.success(`${S("members.bulkInvite.summaryInvited", "Invited")} ${n} ${S("members.bulkInvite.summaryOf", "of")} ${t.length}. ${r} ${S("members.bulkInvite.summaryFailed", "failed")}.`), t;
|
|
68
|
+
});
|
|
69
|
+
}, L = w.length > 0, R = F.sendable > 0 && !O && !x;
|
|
70
|
+
return /* @__PURE__ */ _("div", {
|
|
71
|
+
className: "space-y-5",
|
|
72
|
+
children: [
|
|
73
|
+
/* @__PURE__ */ _("div", {
|
|
74
|
+
className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
|
|
75
|
+
children: [/* @__PURE__ */ g("p", {
|
|
76
|
+
className: "text-sm text-[var(--color-text-muted)]",
|
|
77
|
+
children: S("members.bulkInvite.description", "Upload a CSV with one row per person. Required column: email. Optional: role, message.")
|
|
78
|
+
}), /* @__PURE__ */ _("button", {
|
|
79
|
+
type: "button",
|
|
80
|
+
onClick: n,
|
|
81
|
+
className: "inline-flex min-h-10 items-center justify-center gap-2 rounded-lg border border-[var(--color-border-default)] px-3 py-2 text-sm text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)]",
|
|
82
|
+
children: [/* @__PURE__ */ g(u, {
|
|
83
|
+
size: 16,
|
|
84
|
+
"aria-hidden": "true"
|
|
85
|
+
}), S("members.bulkInvite.downloadTemplate", "Download template")]
|
|
86
|
+
})]
|
|
87
|
+
}),
|
|
88
|
+
/* @__PURE__ */ _("div", {
|
|
89
|
+
onDragOver: (e) => {
|
|
90
|
+
e.preventDefault(), j(!0);
|
|
91
|
+
},
|
|
92
|
+
onDragLeave: () => j(!1),
|
|
93
|
+
onDrop: P,
|
|
94
|
+
className: `flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-8 transition-colors ${A ? "border-[var(--color-action-primary-bg)] bg-[var(--color-status-info-bgSubtle)]" : "border-[var(--color-border-default)] bg-[var(--color-bg-canvas)]"}`,
|
|
95
|
+
children: [
|
|
96
|
+
/* @__PURE__ */ g(p, {
|
|
97
|
+
size: 28,
|
|
98
|
+
className: "text-[var(--color-text-secondary)]",
|
|
99
|
+
"aria-hidden": "true"
|
|
100
|
+
}),
|
|
101
|
+
/* @__PURE__ */ _("div", {
|
|
102
|
+
className: "text-center",
|
|
103
|
+
children: [/* @__PURE__ */ g("p", {
|
|
104
|
+
className: "text-sm font-medium text-[var(--color-text-primary)]",
|
|
105
|
+
children: E || S("members.bulkInvite.dropHere", "Drop a CSV file here or click to browse")
|
|
106
|
+
}), /* @__PURE__ */ g("p", {
|
|
107
|
+
className: "mt-1 text-xs text-[var(--color-text-muted)]",
|
|
108
|
+
children: S("members.bulkInvite.csvOnly", "CSV files only. Max 1000 rows recommended.")
|
|
109
|
+
})]
|
|
110
|
+
}),
|
|
111
|
+
/* @__PURE__ */ g("input", {
|
|
112
|
+
ref: C,
|
|
113
|
+
type: "file",
|
|
114
|
+
accept: ".csv,text/csv",
|
|
115
|
+
onChange: N,
|
|
116
|
+
className: "hidden",
|
|
117
|
+
"aria-label": S("members.bulkInvite.fileInputLabel", "Choose CSV file")
|
|
118
|
+
}),
|
|
119
|
+
/* @__PURE__ */ g("button", {
|
|
120
|
+
type: "button",
|
|
121
|
+
onClick: () => C.current?.click(),
|
|
122
|
+
className: "inline-flex min-h-10 items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-4 py-2 text-sm text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90",
|
|
123
|
+
children: S("members.bulkInvite.chooseFile", "Choose file")
|
|
124
|
+
})
|
|
125
|
+
]
|
|
126
|
+
}),
|
|
127
|
+
L && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", {
|
|
128
|
+
className: "flex flex-wrap gap-4 text-xs text-[var(--color-text-secondary)]",
|
|
129
|
+
children: [
|
|
130
|
+
/* @__PURE__ */ _("span", { children: [
|
|
131
|
+
S("members.bulkInvite.statsTotal", "Total rows"),
|
|
132
|
+
": ",
|
|
133
|
+
F.total
|
|
134
|
+
] }),
|
|
135
|
+
/* @__PURE__ */ _("span", { children: [
|
|
136
|
+
S("members.bulkInvite.statsValid", "Ready"),
|
|
137
|
+
": ",
|
|
138
|
+
F.sendable
|
|
139
|
+
] }),
|
|
140
|
+
F.withErrors > 0 && /* @__PURE__ */ _("span", {
|
|
141
|
+
className: "text-[var(--color-status-error-text)]",
|
|
142
|
+
children: [
|
|
143
|
+
S("members.bulkInvite.statsErrors", "With errors"),
|
|
144
|
+
": ",
|
|
145
|
+
F.withErrors
|
|
146
|
+
]
|
|
147
|
+
}),
|
|
148
|
+
F.invited > 0 && /* @__PURE__ */ _("span", {
|
|
149
|
+
className: "text-[var(--color-status-success-text)]",
|
|
150
|
+
children: [
|
|
151
|
+
S("members.bulkInvite.statsInvited", "Invited"),
|
|
152
|
+
": ",
|
|
153
|
+
F.invited
|
|
154
|
+
]
|
|
155
|
+
}),
|
|
156
|
+
F.failed > 0 && /* @__PURE__ */ _("span", {
|
|
157
|
+
className: "text-[var(--color-status-error-text)]",
|
|
158
|
+
children: [
|
|
159
|
+
S("members.bulkInvite.statsFailed", "Failed"),
|
|
160
|
+
": ",
|
|
161
|
+
F.failed
|
|
162
|
+
]
|
|
163
|
+
})
|
|
164
|
+
]
|
|
165
|
+
}), /* @__PURE__ */ g("div", {
|
|
166
|
+
className: "overflow-hidden rounded-xl border border-[var(--color-border-default)]",
|
|
167
|
+
children: /* @__PURE__ */ g("div", {
|
|
168
|
+
className: "overflow-x-auto",
|
|
169
|
+
children: /* @__PURE__ */ _("table", {
|
|
170
|
+
className: "min-w-full",
|
|
171
|
+
children: [/* @__PURE__ */ g("thead", {
|
|
172
|
+
className: "bg-[var(--color-bg-subtle)]",
|
|
173
|
+
children: /* @__PURE__ */ _("tr", { children: [
|
|
174
|
+
/* @__PURE__ */ g("th", {
|
|
175
|
+
className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
|
|
176
|
+
children: "#"
|
|
177
|
+
}),
|
|
178
|
+
/* @__PURE__ */ g("th", {
|
|
179
|
+
className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
|
|
180
|
+
children: S("members.bulkInvite.colEmail", "Email")
|
|
181
|
+
}),
|
|
182
|
+
/* @__PURE__ */ g("th", {
|
|
183
|
+
className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
|
|
184
|
+
children: S("members.bulkInvite.colRole", "Role")
|
|
185
|
+
}),
|
|
186
|
+
/* @__PURE__ */ g("th", {
|
|
187
|
+
className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
|
|
188
|
+
children: S("members.bulkInvite.colStatus", "Status")
|
|
189
|
+
})
|
|
190
|
+
] })
|
|
191
|
+
}), /* @__PURE__ */ g("tbody", {
|
|
192
|
+
className: "divide-y divide-[var(--color-border-default)]",
|
|
193
|
+
children: w.map((e) => {
|
|
194
|
+
let t = e.errors.length > 0;
|
|
195
|
+
return /* @__PURE__ */ _("tr", {
|
|
196
|
+
className: "bg-[var(--color-bg-surface)]",
|
|
197
|
+
children: [
|
|
198
|
+
/* @__PURE__ */ g("td", {
|
|
199
|
+
className: "px-3 py-2 text-xs text-[var(--color-text-secondary)]",
|
|
200
|
+
children: e.rowNumber
|
|
201
|
+
}),
|
|
202
|
+
/* @__PURE__ */ g("td", {
|
|
203
|
+
className: "px-3 py-2 text-sm text-[var(--color-text-primary)]",
|
|
204
|
+
children: e.email || /* @__PURE__ */ g("span", {
|
|
205
|
+
className: "italic text-[var(--color-text-muted)]",
|
|
206
|
+
children: S("members.bulkInvite.empty", "(empty)")
|
|
207
|
+
})
|
|
208
|
+
}),
|
|
209
|
+
/* @__PURE__ */ g("td", {
|
|
210
|
+
className: "px-3 py-2 text-xs text-[var(--color-text-secondary)]",
|
|
211
|
+
children: e.role || /* @__PURE__ */ g("span", {
|
|
212
|
+
className: "text-[var(--color-text-muted)]",
|
|
213
|
+
children: "MEMBER"
|
|
214
|
+
})
|
|
215
|
+
}),
|
|
216
|
+
/* @__PURE__ */ g("td", {
|
|
217
|
+
className: "px-3 py-2 text-xs",
|
|
218
|
+
children: t ? /* @__PURE__ */ _("span", {
|
|
219
|
+
className: "inline-flex items-center gap-1 text-[var(--color-status-error-text)]",
|
|
220
|
+
children: [/* @__PURE__ */ g(m, {
|
|
221
|
+
size: 14,
|
|
222
|
+
"aria-hidden": "true"
|
|
223
|
+
}), e.errors.join(" ")]
|
|
224
|
+
}) : e.status.kind === "sending" ? /* @__PURE__ */ _("span", {
|
|
225
|
+
className: "inline-flex items-center gap-1 text-[var(--color-text-secondary)]",
|
|
226
|
+
children: [/* @__PURE__ */ g(d, {
|
|
227
|
+
size: 14,
|
|
228
|
+
className: "animate-spin",
|
|
229
|
+
"aria-hidden": "true"
|
|
230
|
+
}), S("members.bulkInvite.statusSending", "Sending...")]
|
|
231
|
+
}) : e.status.kind === "invited" ? /* @__PURE__ */ _("span", {
|
|
232
|
+
className: "inline-flex items-center gap-1 text-[var(--color-status-success-text)]",
|
|
233
|
+
children: [/* @__PURE__ */ g(l, {
|
|
234
|
+
size: 14,
|
|
235
|
+
"aria-hidden": "true"
|
|
236
|
+
}), S("members.bulkInvite.statusInvited", "Invited")]
|
|
237
|
+
}) : e.status.kind === "failed" ? /* @__PURE__ */ _("span", {
|
|
238
|
+
className: "inline-flex items-center gap-1 text-[var(--color-status-error-text)]",
|
|
239
|
+
children: [/* @__PURE__ */ g(m, {
|
|
240
|
+
size: 14,
|
|
241
|
+
"aria-hidden": "true"
|
|
242
|
+
}), e.status.message]
|
|
243
|
+
}) : /* @__PURE__ */ g("span", {
|
|
244
|
+
className: "text-[var(--color-text-secondary)]",
|
|
245
|
+
children: S("members.bulkInvite.statusReady", "Ready")
|
|
246
|
+
})
|
|
247
|
+
})
|
|
248
|
+
]
|
|
249
|
+
}, `${e.rowNumber}-${e.email}`);
|
|
250
|
+
})
|
|
251
|
+
})]
|
|
252
|
+
})
|
|
253
|
+
})
|
|
254
|
+
})] }),
|
|
255
|
+
/* @__PURE__ */ _("div", {
|
|
256
|
+
className: "flex flex-col gap-3 border-t border-[var(--color-border-default)] pt-4 sm:flex-row",
|
|
257
|
+
children: [/* @__PURE__ */ _("button", {
|
|
258
|
+
type: "button",
|
|
259
|
+
onClick: I,
|
|
260
|
+
disabled: !R,
|
|
261
|
+
className: "inline-flex items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-6 py-2.5 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90 hover:scale-[1.02] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[200px]",
|
|
262
|
+
children: [
|
|
263
|
+
O ? /* @__PURE__ */ g(d, {
|
|
264
|
+
size: 16,
|
|
265
|
+
className: "animate-spin",
|
|
266
|
+
"aria-hidden": "true"
|
|
267
|
+
}) : /* @__PURE__ */ g(f, {
|
|
268
|
+
size: 16,
|
|
269
|
+
"aria-hidden": "true"
|
|
270
|
+
}),
|
|
271
|
+
S("members.bulkInvite.send", "Send"),
|
|
272
|
+
" ",
|
|
273
|
+
F.sendable,
|
|
274
|
+
" ",
|
|
275
|
+
S("members.bulkInvite.sendSuffix", "invites")
|
|
276
|
+
]
|
|
277
|
+
}), /* @__PURE__ */ g("button", {
|
|
278
|
+
type: "button",
|
|
279
|
+
onClick: b,
|
|
280
|
+
disabled: O,
|
|
281
|
+
className: "rounded-lg border border-[var(--color-border-default)] bg-transparent px-6 py-2.5 font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[140px]",
|
|
282
|
+
children: S("common.cancel", "Cancel")
|
|
283
|
+
})]
|
|
284
|
+
})
|
|
285
|
+
]
|
|
286
|
+
});
|
|
287
|
+
}
|
|
288
|
+
//#endregion
|
|
289
|
+
export { v as BulkInviteForm };
|
|
290
|
+
|
|
291
|
+
//# sourceMappingURL=BulkInviteForm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BulkInviteForm.js","names":[],"sources":["../../../../../src/organization-management/modules/members/components/BulkInviteForm.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { CheckCircle2, Download, Loader2, Send, Upload, XCircle } from 'lucide-react';\nimport { toast } from 'sonner';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport {\n type BulkInviteRow,\n downloadTemplate,\n formatInviteError,\n parseBulkInviteCsv,\n} from '../utils/bulkInviteCsv';\n\ninterface BulkInviteFormProps {\n organizationId: string;\n inviteMember: (input: {\n organizationId: string;\n email: string;\n message?: string;\n }) => Promise<unknown>;\n onCancel: () => void;\n loading?: boolean;\n}\n\ntype RowStatus =\n | { kind: 'idle' }\n | { kind: 'sending' }\n | { kind: 'invited' }\n | { kind: 'failed'; message: string };\n\ninterface PreviewRow extends BulkInviteRow {\n status: RowStatus;\n}\n\n/**\n * Bulk-invite via CSV upload. Sequentially fires the per-row invite\n * mutation (concurrency 1) so we don't hammer the gateway and so per-row\n * errors are deterministic. Reuses the same mutation as single-invite,\n * which keeps backend behaviour (refetch, OTel events) identical.\n */\nexport function BulkInviteForm({\n organizationId,\n inviteMember,\n onCancel,\n loading,\n}: BulkInviteFormProps) {\n const tr = useTr();\n const fileInputRef = useRef<HTMLInputElement>(null);\n const [rows, setRows] = useState<PreviewRow[]>([]);\n const [fileName, setFileName] = useState<string | null>(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [dragActive, setDragActive] = useState(false);\n\n const handleFile = useCallback(\n (file: File) => {\n const reader = new FileReader();\n reader.onload = () => {\n const text = typeof reader.result === 'string' ? reader.result : '';\n const parsed = parseBulkInviteCsv(text);\n setRows(parsed.map((r) => ({ ...r, status: { kind: 'idle' } })));\n setFileName(file.name);\n };\n reader.onerror = () => {\n toast.error(tr('members.bulkInvite.readError', 'Failed to read CSV file.'));\n };\n reader.readAsText(file);\n },\n [tr]\n );\n\n const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const file = e.target.files?.[0];\n if (file) handleFile(file);\n // Reset so re-uploading the same file fires onChange again\n e.target.value = '';\n };\n\n const onDrop = (e: React.DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragActive(false);\n const file = e.dataTransfer.files?.[0];\n if (file) handleFile(file);\n };\n\n const summary = useMemo(() => {\n const total = rows.length;\n const withErrors = rows.filter((r) => r.errors.length > 0).length;\n const sendable = rows.filter((r) => r.errors.length === 0).length;\n const invited = rows.filter((r) => r.status.kind === 'invited').length;\n const failed = rows.filter((r) => r.status.kind === 'failed').length;\n return { total, withErrors, sendable, invited, failed };\n }, [rows]);\n\n const handleSend = async () => {\n if (summary.sendable === 0 || isSubmitting) return;\n setIsSubmitting(true);\n\n const sendableIndices = rows\n .map((r, idx) => ({ r, idx }))\n .filter(({ r }) => r.errors.length === 0 && r.status.kind !== 'invited');\n\n for (const { idx } of sendableIndices) {\n setRows((prev) =>\n prev.map((row, i) => (i === idx ? { ...row, status: { kind: 'sending' } } : row))\n );\n const row = rows[idx];\n try {\n await inviteMember({\n organizationId,\n email: row.email,\n message: row.message,\n });\n setRows((prev) =>\n prev.map((r, i) => (i === idx ? { ...r, status: { kind: 'invited' } } : r))\n );\n } catch (err) {\n const message = formatInviteError(err, tr);\n setRows((prev) =>\n prev.map((r, i) => (i === idx ? { ...r, status: { kind: 'failed', message } } : r))\n );\n }\n }\n\n setIsSubmitting(false);\n setRows((prev) => {\n const invited = prev.filter((r) => r.status.kind === 'invited').length;\n const failed = prev.filter((r) => r.status.kind === 'failed').length;\n toast.success(\n `${tr('members.bulkInvite.summaryInvited', 'Invited')} ${invited} ${tr('members.bulkInvite.summaryOf', 'of')} ${prev.length}. ${failed} ${tr('members.bulkInvite.summaryFailed', 'failed')}.`\n );\n return prev;\n });\n };\n\n const hasRows = rows.length > 0;\n const canSubmit = summary.sendable > 0 && !isSubmitting && !loading;\n\n return (\n <div className=\"space-y-5\">\n <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n <p className=\"text-sm text-[var(--color-text-muted)]\">\n {tr(\n 'members.bulkInvite.description',\n 'Upload a CSV with one row per person. Required column: email. Optional: role, message.'\n )}\n </p>\n <button\n type=\"button\"\n onClick={downloadTemplate}\n className=\"inline-flex min-h-10 items-center justify-center gap-2 rounded-lg border border-[var(--color-border-default)] px-3 py-2 text-sm text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)]\"\n >\n <Download size={16} aria-hidden=\"true\" />\n {tr('members.bulkInvite.downloadTemplate', 'Download template')}\n </button>\n </div>\n\n <div\n onDragOver={(e) => {\n e.preventDefault();\n setDragActive(true);\n }}\n onDragLeave={() => setDragActive(false)}\n onDrop={onDrop}\n className={`flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-8 transition-colors ${\n dragActive\n ? 'border-[var(--color-action-primary-bg)] bg-[var(--color-status-info-bgSubtle)]'\n : 'border-[var(--color-border-default)] bg-[var(--color-bg-canvas)]'\n }`}\n >\n <Upload size={28} className=\"text-[var(--color-text-secondary)]\" aria-hidden=\"true\" />\n <div className=\"text-center\">\n <p className=\"text-sm font-medium text-[var(--color-text-primary)]\">\n {fileName\n ? fileName\n : tr('members.bulkInvite.dropHere', 'Drop a CSV file here or click to browse')}\n </p>\n <p className=\"mt-1 text-xs text-[var(--color-text-muted)]\">\n {tr('members.bulkInvite.csvOnly', 'CSV files only. Max 1000 rows recommended.')}\n </p>\n </div>\n <input\n ref={fileInputRef}\n type=\"file\"\n accept=\".csv,text/csv\"\n onChange={onFileChange}\n className=\"hidden\"\n aria-label={tr('members.bulkInvite.fileInputLabel', 'Choose CSV file')}\n />\n <button\n type=\"button\"\n onClick={() => fileInputRef.current?.click()}\n className=\"inline-flex min-h-10 items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-4 py-2 text-sm text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90\"\n >\n {tr('members.bulkInvite.chooseFile', 'Choose file')}\n </button>\n </div>\n\n {hasRows && (\n <>\n <div className=\"flex flex-wrap gap-4 text-xs text-[var(--color-text-secondary)]\">\n <span>\n {tr('members.bulkInvite.statsTotal', 'Total rows')}: {summary.total}\n </span>\n <span>\n {tr('members.bulkInvite.statsValid', 'Ready')}: {summary.sendable}\n </span>\n {summary.withErrors > 0 && (\n <span className=\"text-[var(--color-status-error-text)]\">\n {tr('members.bulkInvite.statsErrors', 'With errors')}: {summary.withErrors}\n </span>\n )}\n {summary.invited > 0 && (\n <span className=\"text-[var(--color-status-success-text)]\">\n {tr('members.bulkInvite.statsInvited', 'Invited')}: {summary.invited}\n </span>\n )}\n {summary.failed > 0 && (\n <span className=\"text-[var(--color-status-error-text)]\">\n {tr('members.bulkInvite.statsFailed', 'Failed')}: {summary.failed}\n </span>\n )}\n </div>\n\n <div className=\"overflow-hidden rounded-xl border border-[var(--color-border-default)]\">\n <div className=\"overflow-x-auto\">\n <table className=\"min-w-full\">\n <thead className=\"bg-[var(--color-bg-subtle)]\">\n <tr>\n <th className=\"px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]\">\n #\n </th>\n <th className=\"px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]\">\n {tr('members.bulkInvite.colEmail', 'Email')}\n </th>\n <th className=\"px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]\">\n {tr('members.bulkInvite.colRole', 'Role')}\n </th>\n <th className=\"px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]\">\n {tr('members.bulkInvite.colStatus', 'Status')}\n </th>\n </tr>\n </thead>\n <tbody className=\"divide-y divide-[var(--color-border-default)]\">\n {rows.map((row) => {\n const hasParseErrors = row.errors.length > 0;\n return (\n <tr\n key={`${row.rowNumber}-${row.email}`}\n className=\"bg-[var(--color-bg-surface)]\"\n >\n <td className=\"px-3 py-2 text-xs text-[var(--color-text-secondary)]\">\n {row.rowNumber}\n </td>\n <td className=\"px-3 py-2 text-sm text-[var(--color-text-primary)]\">\n {row.email || (\n <span className=\"italic text-[var(--color-text-muted)]\">\n {tr('members.bulkInvite.empty', '(empty)')}\n </span>\n )}\n </td>\n <td className=\"px-3 py-2 text-xs text-[var(--color-text-secondary)]\">\n {row.role || (\n <span className=\"text-[var(--color-text-muted)]\">MEMBER</span>\n )}\n </td>\n <td className=\"px-3 py-2 text-xs\">\n {hasParseErrors ? (\n <span className=\"inline-flex items-center gap-1 text-[var(--color-status-error-text)]\">\n <XCircle size={14} aria-hidden=\"true\" />\n {row.errors.join(' ')}\n </span>\n ) : row.status.kind === 'sending' ? (\n <span className=\"inline-flex items-center gap-1 text-[var(--color-text-secondary)]\">\n <Loader2 size={14} className=\"animate-spin\" aria-hidden=\"true\" />\n {tr('members.bulkInvite.statusSending', 'Sending...')}\n </span>\n ) : row.status.kind === 'invited' ? (\n <span className=\"inline-flex items-center gap-1 text-[var(--color-status-success-text)]\">\n <CheckCircle2 size={14} aria-hidden=\"true\" />\n {tr('members.bulkInvite.statusInvited', 'Invited')}\n </span>\n ) : row.status.kind === 'failed' ? (\n <span className=\"inline-flex items-center gap-1 text-[var(--color-status-error-text)]\">\n <XCircle size={14} aria-hidden=\"true\" />\n {row.status.message}\n </span>\n ) : (\n <span className=\"text-[var(--color-text-secondary)]\">\n {tr('members.bulkInvite.statusReady', 'Ready')}\n </span>\n )}\n </td>\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n </div>\n </>\n )}\n\n <div className=\"flex flex-col gap-3 border-t border-[var(--color-border-default)] pt-4 sm:flex-row\">\n <button\n type=\"button\"\n onClick={handleSend}\n disabled={!canSubmit}\n className=\"inline-flex items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-6 py-2.5 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90 hover:scale-[1.02] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[200px]\"\n >\n {isSubmitting ? (\n <Loader2 size={16} className=\"animate-spin\" aria-hidden=\"true\" />\n ) : (\n <Send size={16} aria-hidden=\"true\" />\n )}\n {tr('members.bulkInvite.send', 'Send')} {summary.sendable}{' '}\n {tr('members.bulkInvite.sendSuffix', 'invites')}\n </button>\n <button\n type=\"button\"\n onClick={onCancel}\n disabled={isSubmitting}\n className=\"rounded-lg border border-[var(--color-border-default)] bg-transparent px-6 py-2.5 font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[140px]\"\n >\n {tr('common.cancel', 'Cancel')}\n </button>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -5,89 +5,112 @@ import { useTr as r } from "../../../shared/hooks/useTr.js";
|
|
|
5
5
|
import { LoadingState as i } from "../../../shared/components/feedback/LoadingState.js";
|
|
6
6
|
import { PERMISSIONS as a } from "../../../constants/permissions.js";
|
|
7
7
|
import { InviteMemberForm as o } from "../components/InviteMemberForm.js";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
8
|
+
import { BulkInviteForm as s } from "../components/BulkInviteForm.js";
|
|
9
|
+
import { PendingInvitesList as c } from "../components/PendingInvitesList.js";
|
|
10
|
+
import { useState as l } from "react";
|
|
11
|
+
import { ArrowLeft as u, UserPlus as d } from "lucide-react";
|
|
12
|
+
import { usePermissions as f } from "@burdenoff/fe-libs/shared/providers/shell";
|
|
13
|
+
import { jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
14
|
+
import { useParams as h } from "react-router-dom";
|
|
13
15
|
//#region src/organization-management/modules/members/pages/InviteMemberPage.tsx
|
|
14
|
-
function
|
|
15
|
-
let
|
|
16
|
-
await
|
|
17
|
-
},
|
|
18
|
-
|
|
16
|
+
function g() {
|
|
17
|
+
let g = r(), { organizationId: _ } = h(), { navigate: v, basePath: y = "/organizations" } = e(), { hasPermission: b, isLoading: x } = f(), { inviteMember: S, loading: C, error: w } = n(), [T, E] = l("single"), D = async (e) => {
|
|
18
|
+
await S(e), t.success(`${g("members.invite.success", "Invitation sent to")} ${e.email}`);
|
|
19
|
+
}, O = () => {
|
|
20
|
+
v(`${y}/${_}/members`);
|
|
19
21
|
};
|
|
20
|
-
return
|
|
22
|
+
return x ? /* @__PURE__ */ p("div", {
|
|
21
23
|
className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
|
|
22
|
-
children: /* @__PURE__ */
|
|
23
|
-
}) :
|
|
24
|
+
children: /* @__PURE__ */ p(i, { message: g("common.loadingPermissions", "Loading permissions...") })
|
|
25
|
+
}) : b(a.MEMBER_INVITE) ? /* @__PURE__ */ p("div", {
|
|
24
26
|
className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
|
|
25
|
-
children: /* @__PURE__ */
|
|
27
|
+
children: /* @__PURE__ */ m("div", {
|
|
26
28
|
className: "mx-auto max-w-3xl space-y-8",
|
|
27
29
|
children: [
|
|
28
|
-
/* @__PURE__ */
|
|
30
|
+
/* @__PURE__ */ m("div", {
|
|
29
31
|
className: "flex items-center gap-3",
|
|
30
|
-
children: [/* @__PURE__ */
|
|
32
|
+
children: [/* @__PURE__ */ p("button", {
|
|
31
33
|
type: "button",
|
|
32
|
-
onClick:
|
|
34
|
+
onClick: O,
|
|
33
35
|
className: "rounded-lg p-2 transition-colors hover:bg-[var(--color-bg-subtle)]",
|
|
34
|
-
"aria-label":
|
|
35
|
-
children: /* @__PURE__ */
|
|
36
|
+
"aria-label": g("members.invite.backToMembers", "Back to members"),
|
|
37
|
+
children: /* @__PURE__ */ p(u, {
|
|
36
38
|
size: 20,
|
|
37
39
|
className: "text-[var(--color-text-secondary)]"
|
|
38
40
|
})
|
|
39
|
-
}), /* @__PURE__ */
|
|
41
|
+
}), /* @__PURE__ */ m("div", {
|
|
40
42
|
className: "flex items-center gap-2",
|
|
41
|
-
children: [/* @__PURE__ */ d
|
|
43
|
+
children: [/* @__PURE__ */ p(d, {
|
|
42
44
|
size: 24,
|
|
43
45
|
className: "text-[var(--color-text-primary)]"
|
|
44
|
-
}), /* @__PURE__ */
|
|
46
|
+
}), /* @__PURE__ */ p("h1", {
|
|
45
47
|
className: "text-2xl font-bold text-[var(--color-text-primary)]",
|
|
46
|
-
children:
|
|
48
|
+
children: g("members.invite.title", "Invite Member")
|
|
47
49
|
})]
|
|
48
50
|
})]
|
|
49
51
|
}),
|
|
50
|
-
/* @__PURE__ */
|
|
52
|
+
/* @__PURE__ */ p("div", {
|
|
53
|
+
className: "inline-flex rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-1",
|
|
54
|
+
role: "tablist",
|
|
55
|
+
"aria-label": g("members.invite.modeToggle", "Invite mode"),
|
|
56
|
+
children: ["single", "bulk"].map((e) => {
|
|
57
|
+
let t = T === e, n = e === "single" ? g("members.invite.modeSingle", "Single") : g("members.invite.modeBulk", "Bulk (CSV)");
|
|
58
|
+
return /* @__PURE__ */ p("button", {
|
|
59
|
+
type: "button",
|
|
60
|
+
role: "tab",
|
|
61
|
+
"aria-selected": t,
|
|
62
|
+
onClick: () => E(e),
|
|
63
|
+
className: `min-h-9 rounded-md px-4 py-1.5 text-sm font-medium transition-colors ${t ? "bg-[var(--color-action-primary-bg)] text-[var(--color-action-primary-text)]" : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"}`,
|
|
64
|
+
children: n
|
|
65
|
+
}, e);
|
|
66
|
+
})
|
|
67
|
+
}),
|
|
68
|
+
/* @__PURE__ */ m("div", {
|
|
51
69
|
className: "bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)] p-6",
|
|
52
70
|
children: [
|
|
53
|
-
/* @__PURE__ */
|
|
71
|
+
/* @__PURE__ */ p("h2", {
|
|
54
72
|
className: "text-lg font-semibold text-[var(--color-text-primary)] mb-4",
|
|
55
|
-
children:
|
|
73
|
+
children: T === "single" ? g("members.invite.send", "Send Invite") : g("members.bulkInvite.title", "Bulk Invite from CSV")
|
|
56
74
|
}),
|
|
57
|
-
/* @__PURE__ */
|
|
75
|
+
/* @__PURE__ */ p("p", {
|
|
58
76
|
className: "text-sm text-[var(--color-text-muted)] mb-6",
|
|
59
|
-
children:
|
|
77
|
+
children: T === "single" ? g("members.invite.description", "Enter the email address of the person you want to invite. They will receive an email notification and can accept or decline from their account.") : g("members.bulkInvite.pageDescription", "Upload a CSV to invite many people at once. Download the template below to see the expected format.")
|
|
60
78
|
}),
|
|
61
|
-
|
|
79
|
+
T === "single" && w && /* @__PURE__ */ p("div", {
|
|
62
80
|
className: "mb-4 rounded-lg border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)] p-3",
|
|
63
|
-
children: /* @__PURE__ */
|
|
81
|
+
children: /* @__PURE__ */ p("p", {
|
|
64
82
|
className: "text-sm text-[var(--color-status-error-text)]",
|
|
65
|
-
children:
|
|
83
|
+
children: w.message.includes("CONFLICT") ? g("members.invite.error.conflict", "An invite already exists for this email address.") : w.message.includes("already a member") ? g("members.invite.error.alreadyMember", "This user is already a member of the organization.") : w.message
|
|
66
84
|
})
|
|
67
85
|
}),
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
organizationId:
|
|
70
|
-
onSubmit:
|
|
71
|
-
onCancel:
|
|
72
|
-
loading:
|
|
86
|
+
T === "single" ? /* @__PURE__ */ p(o, {
|
|
87
|
+
organizationId: _,
|
|
88
|
+
onSubmit: D,
|
|
89
|
+
onCancel: O,
|
|
90
|
+
loading: C
|
|
91
|
+
}) : /* @__PURE__ */ p(s, {
|
|
92
|
+
organizationId: _,
|
|
93
|
+
inviteMember: S,
|
|
94
|
+
onCancel: O,
|
|
95
|
+
loading: C
|
|
73
96
|
})
|
|
74
97
|
]
|
|
75
98
|
}),
|
|
76
|
-
/* @__PURE__ */
|
|
99
|
+
/* @__PURE__ */ p("div", {
|
|
77
100
|
className: "bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)] p-6",
|
|
78
|
-
children: /* @__PURE__ */
|
|
101
|
+
children: /* @__PURE__ */ p(c, { organizationId: _ })
|
|
79
102
|
})
|
|
80
103
|
]
|
|
81
104
|
})
|
|
82
|
-
}) : /* @__PURE__ */
|
|
105
|
+
}) : /* @__PURE__ */ p("div", {
|
|
83
106
|
className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
|
|
84
|
-
children: /* @__PURE__ */
|
|
107
|
+
children: /* @__PURE__ */ p("div", {
|
|
85
108
|
className: "p-8 text-center text-[var(--color-text-secondary)]",
|
|
86
|
-
children:
|
|
109
|
+
children: g("members.invite.noPermission", "You don't have permission to invite members.")
|
|
87
110
|
})
|
|
88
111
|
});
|
|
89
112
|
}
|
|
90
113
|
//#endregion
|
|
91
|
-
export {
|
|
114
|
+
export { g as InviteMemberPage };
|
|
92
115
|
|
|
93
116
|
//# sourceMappingURL=InviteMemberPage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InviteMemberPage.js","names":[],"sources":["../../../../../src/organization-management/modules/members/pages/InviteMemberPage.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\nimport { ArrowLeft, UserPlus } from 'lucide-react';\nimport { toast } from 'sonner';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useOrgConsole } from '../../../providers/OrgConsoleProvider';\nimport { useInviteMember } from '../hooks/useInvites';\nimport { InviteMemberForm } from '../components/InviteMemberForm';\nimport { PendingInvitesList } from '../components/PendingInvitesList';\nimport { LoadingState } from '../../../shared/components/feedback/LoadingState';\nimport { PERMISSIONS } from '../../../constants/permissions';\nimport { useTr } from '../../../shared/hooks/useTr';\n\n/**\n * Invite Member Page\n * Email-based invite form with pending invites list below\n */\nexport function InviteMemberPage() {\n const tr = useTr();\n const { organizationId } = useParams<{ organizationId: string }>();\n const { navigate, basePath = '/organizations' } = useOrgConsole();\n const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n const { inviteMember, loading, error } = useInviteMember();\n\n const handleSubmit = async (data: {\n organizationId: string;\n email: string;\n message?: string;\n }) => {\n await inviteMember(data);\n toast.success(`${tr('members.invite.success', 'Invitation sent to')} ${data.email}`);\n };\n\n const handleCancel = () => {\n navigate(`${basePath}/${organizationId}/members`);\n };\n\n if (permissionsLoading) {\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n <LoadingState message={tr('common.loadingPermissions', 'Loading permissions...')} />\n </div>\n );\n }\n\n if (!hasPermission(PERMISSIONS.MEMBER_INVITE)) {\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n <div className=\"p-8 text-center text-[var(--color-text-secondary)]\">\n {tr('members.invite.noPermission', \"You don't have permission to invite members.\")}\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6\">\n <div className=\"mx-auto max-w-3xl space-y-8\">\n {/* Header */}\n <div className=\"flex items-center gap-3\">\n <button\n type=\"button\"\n onClick={handleCancel}\n className=\"rounded-lg p-2 transition-colors hover:bg-[var(--color-bg-subtle)]\"\n aria-label={tr('members.invite.backToMembers', 'Back to members')}\n >\n <ArrowLeft size={20} className=\"text-[var(--color-text-secondary)]\" />\n </button>\n <div className=\"flex items-center gap-2\">\n <UserPlus size={24} className=\"text-[var(--color-text-primary)]\" />\n <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n {tr('members.invite.title', 'Invite Member')}\n </h1>\n </div>\n </div>\n\n {/* Invite Form Card */}\n <div className=\"bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)] p-6\">\n <h2 className=\"text-lg font-semibold text-[var(--color-text-primary)] mb-4\">\n {tr('members.invite.send', 'Send Invite')}\n </h2>\n <p className=\"text-sm text-[var(--color-text-muted)] mb-6\">\n {tr(\n
|
|
1
|
+
{"version":3,"file":"InviteMemberPage.js","names":[],"sources":["../../../../../src/organization-management/modules/members/pages/InviteMemberPage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, UserPlus } from 'lucide-react';\nimport { toast } from 'sonner';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useOrgConsole } from '../../../providers/OrgConsoleProvider';\nimport { useInviteMember } from '../hooks/useInvites';\nimport { InviteMemberForm } from '../components/InviteMemberForm';\nimport { BulkInviteForm } from '../components/BulkInviteForm';\nimport { PendingInvitesList } from '../components/PendingInvitesList';\nimport { LoadingState } from '../../../shared/components/feedback/LoadingState';\nimport { PERMISSIONS } from '../../../constants/permissions';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ntype InviteMode = 'single' | 'bulk';\n\n/**\n * Invite Member Page\n * Email-based invite form with pending invites list below\n */\nexport function InviteMemberPage() {\n const tr = useTr();\n const { organizationId } = useParams<{ organizationId: string }>();\n const { navigate, basePath = '/organizations' } = useOrgConsole();\n const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n const { inviteMember, loading, error } = useInviteMember();\n const [mode, setMode] = useState<InviteMode>('single');\n\n const handleSubmit = async (data: {\n organizationId: string;\n email: string;\n message?: string;\n }) => {\n await inviteMember(data);\n toast.success(`${tr('members.invite.success', 'Invitation sent to')} ${data.email}`);\n };\n\n const handleCancel = () => {\n navigate(`${basePath}/${organizationId}/members`);\n };\n\n if (permissionsLoading) {\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n <LoadingState message={tr('common.loadingPermissions', 'Loading permissions...')} />\n </div>\n );\n }\n\n if (!hasPermission(PERMISSIONS.MEMBER_INVITE)) {\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n <div className=\"p-8 text-center text-[var(--color-text-secondary)]\">\n {tr('members.invite.noPermission', \"You don't have permission to invite members.\")}\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6\">\n <div className=\"mx-auto max-w-3xl space-y-8\">\n {/* Header */}\n <div className=\"flex items-center gap-3\">\n <button\n type=\"button\"\n onClick={handleCancel}\n className=\"rounded-lg p-2 transition-colors hover:bg-[var(--color-bg-subtle)]\"\n aria-label={tr('members.invite.backToMembers', 'Back to members')}\n >\n <ArrowLeft size={20} className=\"text-[var(--color-text-secondary)]\" />\n </button>\n <div className=\"flex items-center gap-2\">\n <UserPlus size={24} className=\"text-[var(--color-text-primary)]\" />\n <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n {tr('members.invite.title', 'Invite Member')}\n </h1>\n </div>\n </div>\n\n {/* Mode toggle */}\n <div\n className=\"inline-flex rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-1\"\n role=\"tablist\"\n aria-label={tr('members.invite.modeToggle', 'Invite mode')}\n >\n {(['single', 'bulk'] as const).map((m) => {\n const isActive = mode === m;\n const label =\n m === 'single'\n ? tr('members.invite.modeSingle', 'Single')\n : tr('members.invite.modeBulk', 'Bulk (CSV)');\n return (\n <button\n key={m}\n type=\"button\"\n role=\"tab\"\n aria-selected={isActive}\n onClick={() => setMode(m)}\n className={`min-h-9 rounded-md px-4 py-1.5 text-sm font-medium transition-colors ${\n isActive\n ? 'bg-[var(--color-action-primary-bg)] text-[var(--color-action-primary-text)]'\n : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'\n }`}\n >\n {label}\n </button>\n );\n })}\n </div>\n\n {/* Invite Form Card */}\n <div className=\"bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)] p-6\">\n <h2 className=\"text-lg font-semibold text-[var(--color-text-primary)] mb-4\">\n {mode === 'single'\n ? tr('members.invite.send', 'Send Invite')\n : tr('members.bulkInvite.title', 'Bulk Invite from CSV')}\n </h2>\n <p className=\"text-sm text-[var(--color-text-muted)] mb-6\">\n {mode === 'single'\n ? tr(\n 'members.invite.description',\n 'Enter the email address of the person you want to invite. They will receive an email notification and can accept or decline from their account.'\n )\n : tr(\n 'members.bulkInvite.pageDescription',\n 'Upload a CSV to invite many people at once. Download the template below to see the expected format.'\n )}\n </p>\n\n {mode === 'single' && error && (\n <div className=\"mb-4 rounded-lg border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)] p-3\">\n <p className=\"text-sm text-[var(--color-status-error-text)]\">\n {error.message.includes('CONFLICT')\n ? tr(\n 'members.invite.error.conflict',\n 'An invite already exists for this email address.'\n )\n : error.message.includes('already a member')\n ? tr(\n 'members.invite.error.alreadyMember',\n 'This user is already a member of the organization.'\n )\n : error.message}\n </p>\n </div>\n )}\n\n {mode === 'single' ? (\n <InviteMemberForm\n organizationId={organizationId!}\n onSubmit={handleSubmit}\n onCancel={handleCancel}\n loading={loading}\n />\n ) : (\n <BulkInviteForm\n organizationId={organizationId!}\n inviteMember={inviteMember}\n onCancel={handleCancel}\n loading={loading}\n />\n )}\n </div>\n\n {/* Pending Invites */}\n <div className=\"bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)] p-6\">\n <PendingInvitesList organizationId={organizationId!} />\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,SAAgB,IAAmB;CACjC,IAAM,IAAK,GAAO,EACZ,EAAE,sBAAmB,GAAuC,EAC5D,EAAE,aAAU,cAAW,qBAAqB,GAAe,EAC3D,EAAE,kBAAe,WAAW,MAAuB,GAAgB,EACnE,EAAE,iBAAc,YAAS,aAAU,GAAiB,EACpD,CAAC,GAAM,KAAW,EAAqB,SAAS,EAEhD,IAAe,OAAO,MAItB;AAEJ,EADA,MAAM,EAAa,EAAK,EACxB,EAAM,QAAQ,GAAG,EAAG,0BAA0B,qBAAqB,CAAC,GAAG,EAAK,QAAQ;IAGhF,UAAqB;AACzB,IAAS,GAAG,EAAS,GAAG,EAAe,UAAU;;AAqBnD,QAlBI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAc,SAAS,EAAG,6BAA6B,yBAAyB,EAAI,CAAA;EAChF,CAAA,GAIL,EAAc,EAAY,cAAc,GAW3C,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;MACV,cAAY,EAAG,gCAAgC,kBAAkB;gBAEjE,kBAAC,GAAD;OAAW,MAAM;OAAI,WAAU;OAAuC,CAAA;MAC/D,CAAA,EACT,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD;OAAU,MAAM;OAAI,WAAU;OAAqC,CAAA,EACnE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAG,wBAAwB,gBAAgB;OACzC,CAAA,CACD;QACF;;IAGN,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,cAAY,EAAG,6BAA6B,cAAc;eAExD,CAAC,UAAU,OAAO,CAAW,KAAK,MAAM;MACxC,IAAM,IAAW,MAAS,GACpB,IACJ,MAAM,WACF,EAAG,6BAA6B,SAAS,GACzC,EAAG,2BAA2B,aAAa;AACjD,aACE,kBAAC,UAAD;OAEE,MAAK;OACL,MAAK;OACL,iBAAe;OACf,eAAe,EAAQ,EAAE;OACzB,WAAW,wEACT,IACI,gFACA;iBAGL;OACM,EAZF,EAYE;OAEX;KACE,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,MAAD;OAAI,WAAU;iBACX,MAAS,WACN,EAAG,uBAAuB,cAAc,GACxC,EAAG,4BAA4B,uBAAuB;OACvD,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;iBACV,MAAS,WACN,EACE,8BACA,kJACD,GACD,EACE,sCACA,sGACD;OACH,CAAA;MAEH,MAAS,YAAY,KACpB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAM,QAAQ,SAAS,WAAW,GAC/B,EACE,iCACA,mDACD,GACD,EAAM,QAAQ,SAAS,mBAAmB,GACxC,EACE,sCACA,qDACD,GACD,EAAM;QACV,CAAA;OACA,CAAA;MAGP,MAAS,WACR,kBAAC,GAAD;OACkB;OAChB,UAAU;OACV,UAAU;OACD;OACT,CAAA,GAEF,kBAAC,GAAD;OACkB;OACF;OACd,UAAU;OACD;OACT,CAAA;MAEA;;IAGN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAoC,mBAAmB,CAAA;KACnD,CAAA;IACF;;EACF,CAAA,GAvHJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAG,+BAA+B,+CAA+C;GAC9E,CAAA;EACF,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InvitePeoplePage.js","names":[],"sources":["../../../../../src/organization-management/modules/members/pages/InvitePeoplePage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Building, ChevronRight, UserPlus } from 'lucide-react';\nimport { useOrgConsole } from '../../../providers/OrgConsoleProvider';\nimport { useMyOrganizations } from '../../organizations/hooks/useOrganizations';\nimport { useOrgsWithPermission } from '../../organizations/hooks/useOrgsWithPermission';\nimport { LoadingState } from '../../../shared/components/feedback/LoadingState';\nimport { ErrorState } from '../../../shared/components/feedback/ErrorState';\nimport { EmptyState } from '../../../shared/components/feedback/EmptyState';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport { useOrganizationPageView } from '../../../hooks/useOrganizationPageView';\n\n/**\n * InvitePeoplePage\n *\n * Globally-reachable entry point (sidebar nav item) for inviting users.\n * Lists the orgs the current user can invite into, then deep-links into\n * each org's existing `members/invite` page so the invite flow itself\n * remains a single source of truth.\n *\n * If the user has exactly one org with invite permission, redirect\n * straight to that org's invite page — saves a click for the common case.\n */\nexport function InvitePeoplePage() {\n useOrganizationPageView('organizations.invite-people');\n const tr = useTr();\n const { navigate, basePath = '/organizations' } = useOrgConsole();\n const { organizations, loading, error } = useMyOrganizations(100, 0);\n\n const orgIds = useMemo(() => organizations.map((o) => o.id), [organizations]);\n const {\n allowedIds,\n loading: permLoading,\n isError: permError,\n } = useOrgsWithPermission(orgIds, 'member', 'create');\n\n const invitable = useMemo(\n () => organizations.filter((o) => allowedIds.has(o.id)),\n [organizations, allowedIds]\n );\n\n const [autoRedirected, setAutoRedirected] = useState(false);\n useEffect(() => {\n if (autoRedirected) return;\n if (loading || permLoading) return;\n if (invitable.length === 1) {\n setAutoRedirected(true);\n navigate(`${basePath}/${invitable[0].id}/members/invite`);\n }\n }, [autoRedirected, loading, permLoading, invitable, navigate, basePath]);\n\n if (loading || permLoading) {\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n <LoadingState message={tr('common.loading', 'Loading...')} />\n </div>\n );\n }\n\n if (error || permError) {\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n <ErrorState\n message={\n error?.message ||\n tr('members.invitePeople.error', 'Failed to load organizations for invite.')\n }\n />\n </div>\n );\n }\n\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6 animate-in fade-in duration-300\">\n <div className=\"mx-auto max-w-3xl space-y-6\">\n <div className=\"flex items-center gap-3\">\n <UserPlus size={24} className=\"text-[var(--color-text-primary)]\" aria-hidden=\"true\" />\n <div>\n <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n {tr('members.invitePeople.title', 'Invite People')}\n </h1>\n <p className=\"mt-1 text-sm text-[var(--color-text-secondary)]\">\n {tr(\n 'members.invitePeople.subtitle',\n 'Pick an organization to send an invite into. You can also invite from any organization or workspace detail page.'\n )}\n </p>\n </div>\n </div>\n\n {invitable.length === 0 ? (\n <div className=\"rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-6\">\n <EmptyState\n icon={<UserPlus size={40} aria-hidden=\"true\" />}\n title={tr(
|
|
1
|
+
{"version":3,"file":"InvitePeoplePage.js","names":[],"sources":["../../../../../src/organization-management/modules/members/pages/InvitePeoplePage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Building, ChevronRight, UserPlus } from 'lucide-react';\nimport { useOrgConsole } from '../../../providers/OrgConsoleProvider';\nimport { useMyOrganizations } from '../../organizations/hooks/useOrganizations';\nimport { useOrgsWithPermission } from '../../organizations/hooks/useOrgsWithPermission';\nimport { LoadingState } from '../../../shared/components/feedback/LoadingState';\nimport { ErrorState } from '../../../shared/components/feedback/ErrorState';\nimport { EmptyState } from '../../../shared/components/feedback/EmptyState';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport { useOrganizationPageView } from '../../../hooks/useOrganizationPageView';\n\n/**\n * InvitePeoplePage\n *\n * Globally-reachable entry point (sidebar nav item) for inviting users.\n * Lists the orgs the current user can invite into, then deep-links into\n * each org's existing `members/invite` page so the invite flow itself\n * remains a single source of truth.\n *\n * If the user has exactly one org with invite permission, redirect\n * straight to that org's invite page — saves a click for the common case.\n */\nexport function InvitePeoplePage() {\n useOrganizationPageView('organizations.invite-people');\n const tr = useTr();\n const { navigate, basePath = '/organizations' } = useOrgConsole();\n const { organizations, loading, error } = useMyOrganizations(100, 0);\n\n const orgIds = useMemo(() => organizations.map((o) => o.id), [organizations]);\n const {\n allowedIds,\n loading: permLoading,\n isError: permError,\n } = useOrgsWithPermission(orgIds, 'member', 'create');\n\n const invitable = useMemo(\n () => organizations.filter((o) => allowedIds.has(o.id)),\n [organizations, allowedIds]\n );\n\n const [autoRedirected, setAutoRedirected] = useState(false);\n useEffect(() => {\n if (autoRedirected) return;\n if (loading || permLoading) return;\n if (invitable.length === 1) {\n setAutoRedirected(true);\n navigate(`${basePath}/${invitable[0].id}/members/invite`);\n }\n }, [autoRedirected, loading, permLoading, invitable, navigate, basePath]);\n\n if (loading || permLoading) {\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n <LoadingState message={tr('common.loading', 'Loading...')} />\n </div>\n );\n }\n\n if (error || permError) {\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n <ErrorState\n message={\n error?.message ||\n tr('members.invitePeople.error', 'Failed to load organizations for invite.')\n }\n />\n </div>\n );\n }\n\n return (\n <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6 animate-in fade-in duration-300\">\n <div className=\"mx-auto max-w-3xl space-y-6\">\n <div className=\"flex items-center gap-3\">\n <UserPlus size={24} className=\"text-[var(--color-text-primary)]\" aria-hidden=\"true\" />\n <div>\n <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n {tr('members.invitePeople.title', 'Invite People')}\n </h1>\n <p className=\"mt-1 text-sm text-[var(--color-text-secondary)]\">\n {tr(\n 'members.invitePeople.subtitle',\n 'Pick an organization to send an invite into. You can also invite from any organization or workspace detail page.'\n )}\n </p>\n </div>\n </div>\n\n {invitable.length === 0 ? (\n <div className=\"rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-6\">\n <EmptyState\n icon={<UserPlus size={40} aria-hidden=\"true\" />}\n title={tr('members.invitePeople.emptyTitle', 'No organizations where you can invite')}\n description={tr(\n 'members.invitePeople.emptyDescription',\n \"You don't currently have permission to invite members into any organization. Ask an organization admin to grant you invite access.\"\n )}\n />\n </div>\n ) : (\n <ul className=\"divide-y divide-[var(--color-border-default)] rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-[var(--shadow-elevation-1)]\">\n {invitable.map((org) => (\n <li key={org.id}>\n <button\n type=\"button\"\n onClick={() => navigate(`${basePath}/${org.id}/members/invite`)}\n className=\"flex w-full items-center justify-between gap-4 px-5 py-4 text-left transition-colors hover:bg-[var(--color-bg-subtle)]\"\n >\n <div className=\"flex min-w-0 items-center gap-3\">\n <div className=\"flex size-10 items-center justify-center rounded-lg bg-[var(--color-status-info-bgSubtle)] text-[var(--color-status-info-text)]\">\n <Building size={20} aria-hidden=\"true\" />\n </div>\n <div className=\"min-w-0\">\n <p className=\"truncate text-sm font-semibold text-[var(--color-text-primary)]\">\n {org.name}\n </p>\n <p className=\"truncate font-mono text-xs text-[var(--color-text-secondary)]\">\n /{org.slug}\n </p>\n </div>\n </div>\n <ChevronRight\n size={18}\n className=\"shrink-0 text-[var(--color-text-secondary)]\"\n aria-hidden=\"true\"\n />\n </button>\n </li>\n ))}\n </ul>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;AAsBA,SAAgB,IAAmB;AACjC,GAAwB,8BAA8B;CACtD,IAAM,IAAK,GAAO,EACZ,EAAE,aAAU,cAAW,qBAAqB,GAAe,EAC3D,EAAE,kBAAe,YAAS,aAAU,EAAmB,KAAK,EAAE,EAG9D,EACJ,eACA,SAAS,GACT,SAAS,MACP,EALW,QAAc,EAAc,KAAK,MAAM,EAAE,GAAG,EAAE,CAAC,EAAc,CAAC,EAK3C,UAAU,SAAS,EAE/C,IAAY,QACV,EAAc,QAAQ,MAAM,EAAW,IAAI,EAAE,GAAG,CAAC,EACvD,CAAC,GAAe,EAAW,CAC5B,EAEK,CAAC,GAAgB,KAAqB,EAAS,GAAM;AA+B3D,QA9BA,QAAgB;AACV,OACA,KAAW,KACX,EAAU,WAAW,MACvB,EAAkB,GAAK,EACvB,EAAS,GAAG,EAAS,GAAG,EAAU,GAAG,GAAG,iBAAiB;IAE1D;EAAC;EAAgB;EAAS;EAAa;EAAW;EAAU;EAAS,CAAC,EAErE,KAAW,IAEX,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAc,SAAS,EAAG,kBAAkB,aAAa,EAAI,CAAA;EACzD,CAAA,GAIN,KAAS,IAET,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EACE,SACE,GAAO,WACP,EAAG,8BAA8B,2CAA2C,EAE9E,CAAA;EACE,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAU,MAAM;KAAI,WAAU;KAAmC,eAAY;KAAS,CAAA,EACtF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,gBAAgB;KAC/C,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,iCACA,mHACD;KACC,CAAA,CACA,EAAA,CAAA,CACF;OAEL,EAAU,WAAW,IACpB,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,MAAM,kBAAC,GAAD;MAAU,MAAM;MAAI,eAAY;MAAS,CAAA;KAC/C,OAAO,EAAG,mCAAmC,wCAAwC;KACrF,aAAa,EACX,yCACA,qIACD;KACD,CAAA;IACE,CAAA,GAEN,kBAAC,MAAD;IAAI,WAAU;cACX,EAAU,KAAK,MACd,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAS,GAAG,EAAS,GAAG,EAAI,GAAG,iBAAiB;KAC/D,WAAU;eAHZ,CAKE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD;QAAU,MAAM;QAAI,eAAY;QAAS,CAAA;OACrC,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAI;QACH,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAb,CAA6E,KACzE,EAAI,KACJ;UACA;SACF;SACN,kBAAC,GAAD;MACE,MAAM;MACN,WAAU;MACV,eAAY;MACZ,CAAA,CACK;QACN,EAzBI,EAAI,GAyBR,CACL;IACC,CAAA,CAEH;;EACF,CAAA"}
|