@webority/support-react 0.13.0

package/dist/support-react.js

@@ -0,0 +1,1225 @@
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+import { AppAlert as c, AppAvatar as l, AppBadge as u, AppButton as d, AppCard as f, AppCopyButton as p, AppDataTable as m, AppFileAttachment as h, AppIcon as g, AppInfoList as _, AppInput as v, AppLink as y, AppModal as b, AppSearch as x, AppSelect as S, AppSkeleton as C, AppSpinner as w, AppStatusBadge as T, AppTableEmptyState as E, AppTabs as D, AppTextarea as O, usePagination as k } from "@webority/ui-react";
+import { toBlob as A } from "html-to-image";
+import { Fragment as ee, jsx as j, jsxs as M } from "react/jsx-runtime";
+//#region src/client.js
+var N = "Something went wrong. Please try again.", P = class extends Error {
+	constructor(e, t, n) {
+		super(t), this.name = "SupportApiError", this.code = e, this.status = n;
+	}
+};
+async function te(e) {
+	if (e && typeof Blob < "u" && e instanceof Blob) try {
+		return JSON.parse(await e.text());
+	} catch {
+		return null;
+	}
+	if (typeof e == "string") try {
+		return JSON.parse(e);
+	} catch {
+		return null;
+	}
+	return e ?? null;
+}
+async function ne(e) {
+	if (e instanceof P) return e;
+	let t = e?.response;
+	if (!t) return new P("network", N);
+	let n = await te(t.data);
+	return new P(typeof n?.code == "string" && n.code ? n.code : "unknown", typeof n?.message == "string" && n.message ? n.message : N, t.status);
+}
+async function F(e) {
+	try {
+		return (await e()).data;
+	} catch (e) {
+		throw await ne(e);
+	}
+}
+function I(e, t, n) {
+	n != null && String(n).trim() !== "" && e.append(t, String(n));
+}
+function L(e, t, n, r) {
+	(n ?? []).forEach((n, i) => {
+		let a = n?.name || `${r}-${i + 1}.png`;
+		e.append(t, n, a);
+	});
+}
+function re(e, t = "/api/support") {
+	let n = t.replace(/\/+$/, ""), r = (e) => `${n}/tickets/${encodeURIComponent(e)}`;
+	return {
+		getConfig: () => F(() => e.get(`${n}/config`)),
+		listTickets: () => F(() => e.get(`${n}/tickets`)),
+		getTicket: (t) => F(() => e.get(r(t))),
+		createTicket: ({ category: t, subject: r, body: i, pageUrl: a, userAgent: o, appVersion: s, files: c, screenshots: l }) => {
+			let u = new FormData();
+			return u.append("category", t ?? ""), u.append("subject", r ?? ""), u.append("body", i ?? ""), I(u, "pageUrl", a), I(u, "userAgent", o), I(u, "appVersion", s), L(u, "files", c, "file"), L(u, "screenshots", l, "screenshot"), F(() => e.post(`${n}/tickets`, u));
+		},
+		reply: (t, { body: n, files: i, screenshots: a }) => {
+			let o = new FormData();
+			return o.append("body", n ?? ""), L(o, "files", i, "file"), L(o, "screenshots", a, "screenshot"), F(() => e.post(`${r(t)}/replies`, o));
+		},
+		reopen: (t) => F(() => e.post(`${r(t)}/reopen`)),
+		rate: (t, { satisfaction: n, comment: i }) => {
+			let a = { satisfaction: n };
+			return i != null && i.trim() !== "" && (a.comment = i.trim()), F(() => e.post(`${r(t)}/rating`, a));
+		},
+		fetchAttachment: (t) => F(() => e.get(`${n}/attachments/${encodeURIComponent(t)}`, { responseType: "blob" }))
+	};
+}
+//#endregion
+//#region src/context.js
+var ie = e(null);
+function ae() {
+	let e = n(ie);
+	if (!e) throw Error("Support components and hooks must be used inside <SupportProvider>.");
+	return e;
+}
+function R() {
+	return ae().client;
+}
+function z(e, n, i = !0) {
+	let [a, c] = s({
+		data: null,
+		loading: i,
+		error: null
+	}), [l, u] = s(0), d = o(e);
+	d.current = e;
+	let f = o(n);
+	r(() => {
+		let e = f.current !== n;
+		if (f.current = n, !i) {
+			c({
+				data: null,
+				loading: !1,
+				error: null
+			});
+			return;
+		}
+		let t = !0;
+		return c((t) => ({
+			data: e ? null : t.data,
+			loading: !0,
+			error: null
+		})), d.current(l > 0).then((e) => t && c({
+			data: e,
+			loading: !1,
+			error: null
+		}), (e) => t && c((t) => ({
+			...t,
+			loading: !1,
+			error: e
+		}))), () => {
+			t = !1;
+		};
+	}, [
+		n,
+		i,
+		l
+	]);
+	let p = t(() => u((e) => e + 1), []), m = t((e) => c((t) => ({
+		...t,
+		data: e
+	})), []);
+	return {
+		...a,
+		reload: p,
+		setData: m
+	};
+}
+function B() {
+	let { loadConfig: e } = ae(), { data: t, loading: n, error: r, reload: i } = z(e, "config");
+	return {
+		config: t,
+		loading: n,
+		error: r,
+		reload: i
+	};
+}
+function V() {
+	let e = R(), { data: t, loading: n, error: r, reload: i } = z(() => e.listTickets(), "tickets");
+	return {
+		tickets: t ?? [],
+		loading: n,
+		error: r,
+		reload: i
+	};
+}
+function H(e) {
+	let n = R(), { data: r, loading: i, error: a, reload: o, setData: s } = z(() => n.getTicket(e), e ?? "", !!e), c = t(async (e) => {
+		let t = await e();
+		return s(t), t;
+	}, [s]);
+	return {
+		ticket: r,
+		loading: i,
+		error: a,
+		reload: o,
+		reply: t((t) => c(() => n.reply(e, t)), [
+			c,
+			n,
+			e
+		]),
+		reopen: t(() => c(() => n.reopen(e)), [
+			c,
+			n,
+			e
+		]),
+		rate: t((t) => c(() => n.rate(e, t)), [
+			c,
+			n,
+			e
+		])
+	};
+}
+//#endregion
+//#region src/lib/format.js
+var oe = new Intl.DateTimeFormat(void 0, {
+	day: "numeric",
+	month: "short",
+	year: "numeric",
+	hour: "numeric",
+	minute: "2-digit",
+	timeZoneName: "short"
+});
+function U(e) {
+	if (!e) return "-";
+	let t = new Date(e);
+	return Number.isNaN(t.getTime()) ? "-" : oe.format(t);
+}
+function W(e) {
+	if (!Number.isFinite(e) || e < 0) return "-";
+	if (e < 1024) return `${e} B`;
+	if (e < 1024 * 1024) return `${Math.round(e / 1024)} KB`;
+	let t = e / (1024 * 1024);
+	return `${Number.isInteger(t) ? t : t.toFixed(1)} MB`;
+}
+//#endregion
+//#region src/lib/files.js
+function se(e) {
+	let t = e?.allowedContentTypes ?? [];
+	return t.length > 0 ? t.join(",") : void 0;
+}
+function ce(e, t) {
+	if (t.length === 0) return !0;
+	let n = (e || "").toLowerCase();
+	return t.some((e) => {
+		let t = e.toLowerCase();
+		return t.endsWith("/*") ? n.startsWith(t.slice(0, -1)) : n === t;
+	});
+}
+function G(e, t) {
+	let n = e ?? [], r = t?.maxAttachmentsPerMessage ?? 0, i = t?.maxAttachmentBytes ?? 0, a = t?.allowedContentTypes ?? [];
+	if (r > 0 && n.length > r) return r === 1 ? "You can attach one file." : `You can attach up to ${r} files.`;
+	for (let e of n) {
+		let t = e.name || "This file";
+		if (!ce(e.type, a)) return `${t} is a file type we cannot accept.`;
+		if (i > 0 && e.size > i) return `${t} is larger than ${W(i)}.`;
+	}
+	return null;
+}
+function K(e) {
+	let t = Array.from(e.clipboardData?.items ?? []), n = Date.now();
+	return t.filter((e) => e.kind === "file" && e.type.startsWith("image/")).map((e) => e.getAsFile()).filter(Boolean).map((e, t) => {
+		let r = (e.type.split("/")[1] || "png").replace("jpeg", "jpg");
+		return new File([e], `pasted-image-${n}-${t + 1}.${r}`, { type: e.type });
+	});
+}
+//#endregion
+//#region src/components/AttachmentField.jsx
+function q({ id: e, label: t = "Attachments", files: n, onChange: r, config: i, error: a }) {
+	let o = i?.maxAttachmentBytes ?? 0, s = o > 0 ? Math.round(o / (1024 * 1024) * 10) / 10 : void 0;
+	return /* @__PURE__ */ j(h, {
+		id: e,
+		label: t,
+		optional: !0,
+		multiple: !0,
+		value: n,
+		onChange: r,
+		accept: se(i),
+		maxSizeMb: s,
+		error: a || void 0
+	});
+}
+//#endregion
+//#region src/components/TicketForm.jsx
+function le(e, t) {
+	return t && e.includes(t) ? t : e[0] ?? "";
+}
+function J({ id: e, config: t, defaultCategory: n, extraFiles: r = [], onSubmit: i, onBusyChange: a, children: o }) {
+	let l = t?.categories ?? [], [u, d] = s(() => le(l, n)), [f, p] = s(""), [m, h] = s(""), [g, _] = s([]), [y, b] = s({}), [x, C] = s(""), w = (e) => {
+		_(e), b((n) => ({
+			...n,
+			files: G([...r, ...e], t) ?? void 0
+		}));
+	}, T = (e) => {
+		let t = K(e);
+		t.length > 0 && w([...g, ...t]);
+	};
+	function E() {
+		let e = {};
+		u || (e.category = "Choose a category."), f.trim() || (e.subject = "Give your ticket a subject."), m.trim() || (e.body = "Tell us what happened.");
+		let n = G([...r, ...g], t);
+		return n && (e.files = n), b(e), Object.keys(e).length === 0;
+	}
+	async function D(e) {
+		if (e.preventDefault(), C(""), E()) {
+			a?.(!0);
+			try {
+				await i({
+					category: u,
+					subject: f.trim(),
+					body: m.trim(),
+					files: g
+				});
+			} catch (e) {
+				C(e?.message || "Your ticket did not send. Please try again.");
+			} finally {
+				a?.(!1);
+			}
+		}
+	}
+	return /* @__PURE__ */ M("form", {
+		id: e,
+		onSubmit: D,
+		noValidate: !0,
+		className: "d-flex flex-column gap-3",
+		children: [
+			x && /* @__PURE__ */ j(c, {
+				variant: "danger",
+				children: x
+			}),
+			/* @__PURE__ */ j(S, {
+				id: `${e}-category`,
+				label: "Category",
+				required: !0,
+				value: u,
+				onChange: d,
+				options: l.map((e) => ({
+					value: e,
+					label: e
+				})),
+				placeholder: "Choose a category",
+				error: y.category
+			}),
+			/* @__PURE__ */ j(v, {
+				id: `${e}-subject`,
+				label: "Subject",
+				required: !0,
+				maxLength: t?.subjectMaxLength,
+				placeholder: "A short summary",
+				value: f,
+				onChange: (e) => p(e.target.value),
+				error: y.subject
+			}),
+			/* @__PURE__ */ j(O, {
+				id: `${e}-body`,
+				label: "Message",
+				required: !0,
+				rows: 6,
+				maxLength: t?.bodyMaxLength,
+				placeholder: "What happened, and what did you expect to happen?",
+				value: m,
+				onChange: (e) => h(e.target.value),
+				onPaste: T,
+				hint: "You can paste an image into the message.",
+				error: y.body
+			}),
+			o,
+			/* @__PURE__ */ j(q, {
+				id: `${e}-files`,
+				files: g,
+				onChange: w,
+				config: t,
+				error: y.files
+			})
+		]
+	});
+}
+//#endregion
+//#region src/ReportIssue.jsx
+var ue = "supportCapture", de = { zIndex: "var(--wui-z-fixed)" }, fe = (e) => e?.dataset?.[ue] !== "exclude";
+async function pe() {
+	let e = await A(document.body, {
+		filter: fe,
+		pixelRatio: Math.min(window.devicePixelRatio || 1, 2)
+	});
+	if (!e) throw Error("The page capture came back empty.");
+	return new File([e], "screenshot.png", { type: "image/png" });
+}
+function me({ file: e, onRemove: t }) {
+	let [n, i] = s(null);
+	return r(() => {
+		let t = URL.createObjectURL(e);
+		return i(t), () => URL.revokeObjectURL(t);
+	}, [e]), /* @__PURE__ */ M("figure", {
+		className: "mb-0 d-flex flex-column gap-2",
+		children: [
+			/* @__PURE__ */ j("figcaption", {
+				className: "wui-text-sm fw-semibold",
+				children: "Screenshot of this page"
+			}),
+			n && /* @__PURE__ */ j("img", {
+				src: n,
+				alt: "Screenshot of the page you were on",
+				className: "d-block w-100 border rounded"
+			}),
+			/* @__PURE__ */ j(d, {
+				variant: "ghost",
+				size: "sm",
+				leftIcon: "x",
+				onClick: t,
+				className: "align-self-start",
+				children: "Remove screenshot"
+			})
+		]
+	});
+}
+function he({ label: e = "Report an issue", floating: t = !1, defaultCategory: n = "Bug report", appVersion: r, getTicketHref: a, onOpenTicket: o, onCreated: l }) {
+	let u = R(), { config: f, error: p } = B(), m = `support-report-${i().replace(/[^a-zA-Z0-9-]/g, "")}`, [h, g] = s(!1), [_, v] = s(!1), [y, x] = s(null), [S, C] = s(!1), [w, T] = s(!1), [E, D] = s(null);
+	async function O() {
+		v(!0), D(null);
+		try {
+			x(await pe()), C(!1);
+		} catch {
+			x(null), C(!0);
+		} finally {
+			v(!1), g(!0);
+		}
+	}
+	let k = () => {
+		w || (g(!1), x(null), D(null));
+	};
+	async function A(e) {
+		let t = await u.createTicket({
+			...e,
+			pageUrl: window.location.href,
+			userAgent: navigator.userAgent,
+			appVersion: r,
+			screenshots: y ? [y] : []
+		});
+		D(t), x(null), l?.(t);
+	}
+	let N = E && a ? a(E.id) : void 0;
+	return /* @__PURE__ */ M(ee, { children: [/* @__PURE__ */ j("span", {
+		"data-support-capture": "exclude",
+		className: t ? "position-fixed bottom-0 end-0 m-3" : "d-inline-block",
+		style: t ? de : void 0,
+		children: /* @__PURE__ */ j(d, {
+			leftIcon: "bug",
+			variant: t ? "primary" : "outline",
+			loading: _,
+			onClick: O,
+			"aria-haspopup": "dialog",
+			children: e
+		})
+	}), /* @__PURE__ */ j(b, {
+		open: h,
+		size: "lg",
+		title: "Report an issue",
+		subtitle: "Tell us what went wrong. We attach a screenshot of this page to help us see it.",
+		headerIcon: "bug",
+		staticBackdrop: !0,
+		onClose: k,
+		footer: E ? /* @__PURE__ */ M("div", {
+			className: "d-flex justify-content-end gap-2 w-100",
+			children: [/* @__PURE__ */ j(d, {
+				variant: "secondary",
+				onClick: k,
+				children: "Close"
+			}), E && (N || o) ? /* @__PURE__ */ j(d, {
+				href: N,
+				onClick: N ? void 0 : () => {
+					g(!1), D(null), o(E);
+				},
+				children: "View ticket"
+			}) : null]
+		}) : /* @__PURE__ */ M("div", {
+			className: "d-flex justify-content-end gap-2 w-100",
+			children: [/* @__PURE__ */ j(d, {
+				variant: "secondary",
+				onClick: k,
+				disabled: w,
+				children: "Cancel"
+			}), /* @__PURE__ */ j(d, {
+				type: "submit",
+				form: m,
+				loading: w,
+				disabled: !f,
+				children: "Send report"
+			})]
+		}),
+		children: E ? /* @__PURE__ */ j(c, {
+			variant: "success",
+			role: "status",
+			title: `Ticket ${E.number} is with the support team`,
+			children: "We reply by email. You can follow the ticket on your support page."
+		}) : f ? /* @__PURE__ */ j(J, {
+			id: m,
+			config: f,
+			defaultCategory: n,
+			extraFiles: y ? [y] : [],
+			onSubmit: A,
+			onBusyChange: T,
+			children: y ? /* @__PURE__ */ j(me, {
+				file: y,
+				onRemove: () => x(null)
+			}) : S ? /* @__PURE__ */ j(c, {
+				variant: "info",
+				children: "We could not take a screenshot of this page. You can attach an image instead."
+			}) : null
+		}) : /* @__PURE__ */ j(c, {
+			variant: p ? "danger" : "info",
+			children: p ? p.message || "We could not load the support settings." : "Loading the form."
+		})
+	})] });
+}
+//#endregion
+//#region src/components/NewTicketModal.jsx
+function ge({ open: e, onClose: t, onCreated: n, config: r, defaultCategory: a, appVersion: o }) {
+	let c = R(), l = `support-new-${i().replace(/[^a-zA-Z0-9-]/g, "")}`, [u, f] = s(!1);
+	async function p(e) {
+		n(await c.createTicket({
+			...e,
+			userAgent: typeof navigator > "u" ? void 0 : navigator.userAgent,
+			appVersion: o
+		}));
+	}
+	return /* @__PURE__ */ j(b, {
+		open: e,
+		size: "lg",
+		title: "New ticket",
+		subtitle: "Tell us what you need. We reply by email and on this page.",
+		headerIcon: "message-square",
+		staticBackdrop: !0,
+		onClose: () => {
+			u || t();
+		},
+		footer: /* @__PURE__ */ M("div", {
+			className: "d-flex justify-content-end gap-2 w-100",
+			children: [/* @__PURE__ */ j(d, {
+				variant: "secondary",
+				onClick: t,
+				disabled: u,
+				children: "Cancel"
+			}), /* @__PURE__ */ j(d, {
+				type: "submit",
+				form: l,
+				loading: u,
+				children: "Send ticket"
+			})]
+		}),
+		children: e && /* @__PURE__ */ j(J, {
+			id: l,
+			config: r,
+			defaultCategory: a,
+			onSubmit: p,
+			onBusyChange: f
+		})
+	});
+}
+//#endregion
+//#region src/lib/status.js
+var _e = {
+	Open: "warning",
+	InProgress: "info",
+	Resolved: "success",
+	Closed: "neutral"
+};
+function Y(e) {
+	return _e[e] ?? "neutral";
+}
+//#endregion
+//#region src/components/AttachmentThumb.jsx
+var ve = {
+	width: 140,
+	maxWidth: "100%"
+}, ye = { height: 84 };
+function be({ attachment: e }) {
+	let t = R(), n = (e.contentType || "").startsWith("image/"), [i, a] = s(null), [o, c] = s(!1);
+	r(() => {
+		let n = !0, r = null;
+		return a(null), c(!1), t.fetchAttachment(e.id).then((e) => {
+			r = URL.createObjectURL(e), n ? a(r) : URL.revokeObjectURL(r);
+		}, () => n && c(!0)), () => {
+			n = !1, r && URL.revokeObjectURL(r);
+		};
+	}, [t, e.id]);
+	let l = `Open ${e.fileName}`, u = /* @__PURE__ */ M("span", {
+		className: "d-block text-truncate px-2 py-1 wui-text-xs text-body-secondary",
+		children: [
+			e.fileName,
+			", ",
+			W(e.sizeBytes)
+		]
+	});
+	return o ? /* @__PURE__ */ M("span", {
+		className: "d-inline-flex flex-column border rounded overflow-hidden",
+		style: ve,
+		children: [/* @__PURE__ */ M("span", {
+			className: "d-flex align-items-center justify-content-center gap-1 p-2 wui-text-xs text-body-secondary",
+			children: [/* @__PURE__ */ j(g, {
+				name: "x-circle",
+				size: 14
+			}), "Could not load this file."]
+		}), u]
+	}) : /* @__PURE__ */ M("a", {
+		className: "d-inline-flex flex-column border rounded overflow-hidden text-decoration-none",
+		style: ve,
+		href: i ?? void 0,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		"aria-label": l,
+		"aria-busy": !i || void 0,
+		children: [/* @__PURE__ */ j("span", {
+			className: "d-flex align-items-center justify-content-center bg-body-tertiary",
+			style: ye,
+			children: i ? n ? /* @__PURE__ */ j("img", {
+				src: i,
+				alt: e.fileName,
+				className: "d-block w-100 h-100 object-fit-cover"
+			}) : /* @__PURE__ */ j(g, {
+				name: "file-text",
+				size: 28
+			}) : /* @__PURE__ */ j(w, {
+				size: "sm",
+				label: `Loading ${e.fileName}`
+			})
+		}), u]
+	});
+}
+//#endregion
+//#region src/components/MessageThread.jsx
+var xe = {
+	whiteSpace: "pre-wrap",
+	overflowWrap: "anywhere"
+};
+function Se({ messages: e }) {
+	return /* @__PURE__ */ j("ol", {
+		className: "list-unstyled d-flex flex-column gap-3 mb-0",
+		"aria-label": "Conversation",
+		children: e.map((e) => {
+			let t = /* @__PURE__ */ j("time", {
+				dateTime: e.createdDateTimeUtc,
+				className: "wui-text-xs text-body-secondary text-nowrap",
+				children: U(e.createdDateTimeUtc)
+			});
+			if (e.authorKind === "System") return /* @__PURE__ */ M("li", {
+				className: "text-center wui-text-xs text-body-secondary",
+				"data-author": "system",
+				children: [/* @__PURE__ */ j("span", {
+					className: "d-block",
+					children: e.body
+				}), t]
+			}, e.id);
+			let n = e.authorKind === "Customer", r = e.authorName || (n ? "You" : "Support team");
+			return /* @__PURE__ */ M("li", {
+				className: `d-flex align-items-start gap-2${n ? " flex-row-reverse" : ""}`,
+				"data-author": n ? "customer" : "agent",
+				children: [/* @__PURE__ */ j(l, {
+					name: r,
+					size: 32,
+					tone: n ? "neutral" : "primary"
+				}), /* @__PURE__ */ M(f, {
+					className: "flex-grow-1 border",
+					padding: "sm",
+					variant: n ? "default" : "accent",
+					style: { minWidth: 0 },
+					children: [
+						/* @__PURE__ */ M("div", {
+							className: "d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2",
+							children: [/* @__PURE__ */ M("span", {
+								className: "d-inline-flex flex-wrap align-items-center gap-2 fw-semibold wui-text-sm text-break",
+								children: [r, !n && /* @__PURE__ */ j(u, {
+									tone: "primary",
+									children: "Support"
+								})]
+							}), t]
+						}),
+						/* @__PURE__ */ j("div", {
+							className: "wui-text-sm",
+							style: xe,
+							children: e.body
+						}),
+						e.attachments?.length > 0 && /* @__PURE__ */ j("div", {
+							className: "d-flex flex-wrap gap-2 mt-2",
+							children: e.attachments.map((e) => /* @__PURE__ */ j(be, { attachment: e }, e.id))
+						})
+					]
+				})]
+			}, e.id);
+		})
+	});
+}
+//#endregion
+//#region src/components/RatingPanel.jsx
+function Ce({ satisfaction: e, comment: t, canRate: n = !1, commentMaxLength: r, onRate: a }) {
+	let o = i(), [l, u] = s(""), [p, m] = s(null), [h, g] = s("");
+	if (e) return /* @__PURE__ */ M(c, {
+		variant: e === "Satisfied" ? "success" : "info",
+		role: "status",
+		children: [e === "Satisfied" ? "You told us this solved your problem." : "You told us this did not solve your problem.", t ? /* @__PURE__ */ M("span", {
+			className: "d-block mt-1",
+			children: ["Your comment: ", t]
+		}) : null]
+	});
+	if (!n) return null;
+	async function _(e) {
+		g(""), m(e);
+		try {
+			await a({
+				satisfaction: e,
+				comment: l
+			});
+		} catch (e) {
+			g(e?.message || "Your rating did not send. Please try again.");
+		} finally {
+			m(null);
+		}
+	}
+	return /* @__PURE__ */ j(f, {
+		padding: "sm",
+		className: "border",
+		title: "Did this solve your problem?",
+		children: /* @__PURE__ */ M("div", {
+			className: "d-flex flex-column gap-2",
+			children: [
+				h && /* @__PURE__ */ j(c, {
+					variant: "danger",
+					children: h
+				}),
+				/* @__PURE__ */ j(O, {
+					id: `${o}-comment`,
+					label: "Anything to add?",
+					rows: 2,
+					maxLength: r,
+					value: l,
+					onChange: (e) => u(e.target.value),
+					hint: "Optional. Your comment goes to the support team."
+				}),
+				/* @__PURE__ */ M("div", {
+					className: "d-flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ j(d, {
+						variant: "outline",
+						leftIcon: "check-circle",
+						loading: p === "Satisfied",
+						disabled: p !== null,
+						onClick: () => _("Satisfied"),
+						children: "Yes, it is solved"
+					}), /* @__PURE__ */ j(d, {
+						variant: "outline",
+						leftIcon: "x-circle",
+						loading: p === "Unsatisfied",
+						disabled: p !== null,
+						onClick: () => _("Unsatisfied"),
+						children: "No, it is not"
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/ReplyBox.jsx
+function we({ onSend: e, config: t, reopens: n = !1 }) {
+	let r = i(), [a, o] = s(""), [l, u] = s([]), [f, p] = s(""), [m, h] = s(""), [g, _] = s(!1), v = (e) => {
+		u(e), p(G(e, t) ?? "");
+	}, y = (e) => {
+		let t = K(e);
+		t.length > 0 && v([...l, ...t]);
+	};
+	async function b(n) {
+		n.preventDefault();
+		let r = a.trim();
+		if (!r) {
+			h("Write a message before you send it.");
+			return;
+		}
+		let i = G(l, t);
+		if (i) {
+			p(i);
+			return;
+		}
+		h(""), _(!0);
+		try {
+			await e({
+				body: r,
+				files: l
+			}), o(""), u([]), p("");
+		} catch (e) {
+			h(e?.message || "Your reply did not send. Please try again.");
+		} finally {
+			_(!1);
+		}
+	}
+	return /* @__PURE__ */ M("form", {
+		onSubmit: b,
+		noValidate: !0,
+		className: "d-flex flex-column gap-2",
+		"aria-label": "Reply to this ticket",
+		children: [
+			m && /* @__PURE__ */ j(c, {
+				variant: "danger",
+				children: m
+			}),
+			/* @__PURE__ */ j(O, {
+				id: `${r}-body`,
+				label: "Your reply",
+				rows: 4,
+				autoGrow: !0,
+				maxLength: t?.bodyMaxLength,
+				value: a,
+				onChange: (e) => o(e.target.value),
+				onPaste: y,
+				hint: n ? "Sending a reply reopens this ticket. You can paste an image into the message." : "You can paste an image into the message.",
+				required: !0
+			}),
+			/* @__PURE__ */ j(q, {
+				id: `${r}-files`,
+				files: l,
+				onChange: v,
+				config: t,
+				error: f
+			}),
+			/* @__PURE__ */ j("div", {
+				className: "d-flex justify-content-end",
+				children: /* @__PURE__ */ j(d, {
+					type: "submit",
+					leftIcon: "send",
+					loading: g,
+					children: "Send reply"
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/TicketDetail.jsx
+function X({ label: e, children: t }) {
+	return /* @__PURE__ */ M("div", {
+		className: "d-flex flex-column",
+		children: [/* @__PURE__ */ j("span", {
+			className: "wui-text-xs fw-semibold text-body-secondary",
+			children: e
+		}), /* @__PURE__ */ j("span", {
+			className: "wui-text-sm",
+			children: t
+		})]
+	});
+}
+function Te({ ticketId: e, onBack: t, onChanged: n }) {
+	let { config: r } = B(), { ticket: i, loading: a, error: o, reload: l, reply: u, reopen: f, rate: p } = H(e), [m, h] = s(!1), [g, _] = s(""), v = async (e) => {
+		let t = await e();
+		return n?.(), t;
+	};
+	async function y() {
+		_(""), h(!0);
+		try {
+			await v(f);
+		} catch (e) {
+			_(e?.message || "The ticket did not reopen. Please try again.");
+		} finally {
+			h(!1);
+		}
+	}
+	let b = /* @__PURE__ */ j(d, {
+		variant: "ghost",
+		size: "sm",
+		leftIcon: "arrow-left",
+		onClick: t,
+		className: "align-self-start",
+		children: "Back to tickets"
+	});
+	if (!i) return /* @__PURE__ */ M("section", {
+		className: "d-flex flex-column gap-3",
+		"aria-busy": a || void 0,
+		children: [b, o ? /* @__PURE__ */ M(c, {
+			variant: "danger",
+			children: [
+				o.message || "We could not load this ticket.",
+				" ",
+				/* @__PURE__ */ j(d, {
+					variant: "ghost",
+					size: "sm",
+					onClick: l,
+					children: "Try again"
+				})
+			]
+		}) : /* @__PURE__ */ j(C, { height: 160 })]
+	});
+	let x = i.status === "Resolved" || i.status === "Closed";
+	return /* @__PURE__ */ M("section", {
+		className: "d-flex flex-column gap-3",
+		"aria-labelledby": `support-ticket-${i.id}`,
+		children: [
+			b,
+			/* @__PURE__ */ M("header", {
+				className: "d-flex flex-column gap-2",
+				children: [
+					/* @__PURE__ */ M("div", {
+						className: "d-flex flex-wrap align-items-center gap-2",
+						children: [/* @__PURE__ */ j("h2", {
+							id: `support-ticket-${i.id}`,
+							className: "h5 mb-0 text-break",
+							children: i.subject
+						}), i.statusLabel && /* @__PURE__ */ j(T, {
+							label: i.statusLabel,
+							tone: Y(i.status)
+						})]
+					}),
+					/* @__PURE__ */ M("div", {
+						className: "row row-cols-2 row-cols-md-4 g-3",
+						children: [
+							/* @__PURE__ */ j(X, {
+								label: "Ticket",
+								children: i.number
+							}),
+							/* @__PURE__ */ j(X, {
+								label: "Category",
+								children: i.category || "-"
+							}),
+							/* @__PURE__ */ j(X, {
+								label: "Opened",
+								children: /* @__PURE__ */ j("time", {
+									dateTime: i.createdDateTimeUtc,
+									children: U(i.createdDateTimeUtc)
+								})
+							}),
+							/* @__PURE__ */ j(X, {
+								label: "Last update",
+								children: /* @__PURE__ */ j("time", {
+									dateTime: i.updatedDateTimeUtc,
+									children: U(i.updatedDateTimeUtc)
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ j("p", {
+						className: "wui-text-xs text-body-secondary mb-0",
+						children: "Times are shown in your time zone."
+					})
+				]
+			}),
+			g && /* @__PURE__ */ j(c, {
+				variant: "danger",
+				children: g
+			}),
+			x && /* @__PURE__ */ j(c, {
+				variant: "success",
+				role: "status",
+				children: "If you still need help, reopen the ticket or send a reply."
+			}),
+			i.canReopen && /* @__PURE__ */ j(d, {
+				variant: "secondary",
+				leftIcon: "history",
+				loading: m,
+				onClick: y,
+				className: "align-self-start",
+				children: "Reopen ticket"
+			}),
+			/* @__PURE__ */ j(Ce, {
+				satisfaction: i.satisfaction,
+				comment: i.satisfactionComment,
+				canRate: i.canRate,
+				commentMaxLength: r?.satisfactionCommentMaxLength,
+				onRate: (e) => v(() => p(e))
+			}),
+			/* @__PURE__ */ j(Se, { messages: i.messages ?? [] }),
+			/* @__PURE__ */ j(we, {
+				config: r,
+				reopens: x,
+				onSend: (e) => v(() => u(e))
+			})
+		]
+	});
+}
+//#endregion
+//#region src/lib/url.js
+var Z = "ticket";
+function Ee() {
+	return typeof window > "u" ? null : new URLSearchParams(window.location.search).get(Z);
+}
+function De(e) {
+	if (typeof window > "u") return e ? `?${Z}=${encodeURIComponent(e)}` : "?";
+	let t = new URL(window.location.href);
+	return e ? t.searchParams.set(Z, e) : t.searchParams.delete(Z), `${t.pathname}${t.search}${t.hash}`;
+}
+function Oe(e) {
+	if (typeof window > "u") return;
+	let t = De(e);
+	t !== `${window.location.pathname}${window.location.search}${window.location.hash}` && window.history.replaceState(window.history.state, "", t);
+}
+//#endregion
+//#region src/components/TicketList.jsx
+var Q = [
+	{
+		key: "active",
+		label: "Active"
+	},
+	{
+		key: "Open",
+		label: "Open"
+	},
+	{
+		key: "InProgress",
+		label: "In progress"
+	},
+	{
+		key: "Resolved",
+		label: "Resolved"
+	},
+	{
+		key: "Closed",
+		label: "Closed"
+	},
+	{
+		key: "all",
+		label: "All"
+	}
+];
+function ke(e, t) {
+	return t === "all" ? !0 : t === "active" ? e.status === "Open" || e.status === "InProgress" : e.status === t;
+}
+function Ae(e, t) {
+	return !t || [
+		e.number,
+		e.subject,
+		e.category
+	].some((e) => (e || "").toLowerCase().includes(t));
+}
+function je({ tickets: e, loading: t, error: n, onRetry: r, onOpen: i }) {
+	let [o, l] = s("active"), [u, f] = s(""), p = u.trim().toLowerCase(), h = a(() => e.filter((e) => Ae(e, p)), [e, p]), g = a(() => Object.fromEntries(Q.map((e) => [e.key, h.filter((t) => ke(t, e.key)).length])), [h]), _ = k(a(() => h.filter((e) => ke(e, o)), [h, o]));
+	return /* @__PURE__ */ M("div", {
+		className: "d-flex flex-column gap-3",
+		children: [
+			n && /* @__PURE__ */ M(c, {
+				variant: "danger",
+				children: [
+					n.message || "We could not load your tickets.",
+					" ",
+					/* @__PURE__ */ j(d, {
+						variant: "ghost",
+						size: "sm",
+						onClick: r,
+						children: "Try again"
+					})
+				]
+			}),
+			/* @__PURE__ */ M("div", {
+				className: "d-flex flex-column flex-md-row gap-2 align-items-md-center justify-content-between",
+				children: [/* @__PURE__ */ j(D, {
+					tabs: Q.map((e) => ({
+						...e,
+						count: g[e.key]
+					})),
+					value: o,
+					onChange: l,
+					ariaLabel: "Filter tickets by status",
+					className: "flex-grow-1"
+				}), /* @__PURE__ */ j(x, {
+					value: u,
+					onChange: f,
+					placeholder: "Search tickets",
+					ariaLabel: "Search tickets"
+				})]
+			}),
+			/* @__PURE__ */ j(m, {
+				columns: [
+					{
+						key: "subject",
+						label: "Subject",
+						render: (e) => /* @__PURE__ */ M("div", {
+							className: "d-flex flex-column",
+							style: { minWidth: 0 },
+							children: [/* @__PURE__ */ j(y, {
+								href: De(e.id),
+								animation: "none",
+								className: "fw-semibold text-break",
+								onClick: (t) => {
+									t.metaKey || t.ctrlKey || t.shiftKey || t.altKey || (t.preventDefault(), i(e.id));
+								},
+								children: e.subject
+							}), /* @__PURE__ */ M("span", {
+								className: "wui-text-xs text-body-secondary",
+								children: [
+									e.number,
+									", ",
+									e.category,
+									e.awaitingCustomer ? ". Waiting for your reply" : ""
+								]
+							})]
+						})
+					},
+					{
+						key: "status",
+						label: "Status",
+						render: (e) => e.statusLabel ? /* @__PURE__ */ j(T, {
+							label: e.statusLabel,
+							tone: Y(e.status)
+						}) : "-"
+					},
+					{
+						key: "messageCount",
+						label: "Messages",
+						cellClassName: "wui-text-sm text-body-secondary",
+						render: (e) => e.messageCount
+					},
+					{
+						key: "updatedDateTimeUtc",
+						label: "Last update",
+						cellClassName: "wui-text-sm text-body-secondary text-nowrap",
+						render: (e) => /* @__PURE__ */ j("time", {
+							dateTime: e.updatedDateTimeUtc,
+							children: U(e.updatedDateTimeUtc)
+						})
+					}
+				],
+				rows: _.pageRows,
+				loading: t,
+				skeletonRows: 4,
+				ariaLabel: "Support tickets",
+				sourceCount: e.length,
+				pagination: _,
+				empty: /* @__PURE__ */ j(E, {
+					icon: "message-square",
+					title: "No tickets yet",
+					text: "When you raise a ticket, it shows here with its status."
+				}),
+				emptyFiltered: /* @__PURE__ */ j(E, {
+					icon: "search",
+					title: "No tickets match",
+					text: "Try another search or status."
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/SupportCenter.jsx
+function Me({ initialTicketId: e, defaultCategory: t, appVersion: n }) {
+	let { config: r, error: i, reload: a } = B(), { tickets: o, loading: l, error: u, reload: f } = V(), [p, m] = s(() => e || Ee()), [h, g] = s(!1), _ = (e) => {
+		m(e), Oe(e);
+	};
+	return p ? /* @__PURE__ */ j(Te, {
+		ticketId: p,
+		onBack: () => _(null),
+		onChanged: f
+	}, p) : /* @__PURE__ */ M("section", {
+		className: "d-flex flex-column gap-3",
+		"aria-labelledby": "support-center-title",
+		children: [
+			/* @__PURE__ */ M("div", {
+				className: "d-flex flex-wrap align-items-center justify-content-between gap-2",
+				children: [/* @__PURE__ */ j("h2", {
+					id: "support-center-title",
+					className: "h5 mb-0",
+					children: "Your tickets"
+				}), /* @__PURE__ */ j(d, {
+					leftIcon: "plus",
+					onClick: () => g(!0),
+					disabled: !r,
+					children: "New ticket"
+				})]
+			}),
+			i && /* @__PURE__ */ M(c, {
+				variant: "warning",
+				children: [
+					i.message || "We could not load the support settings.",
+					" ",
+					/* @__PURE__ */ j(d, {
+						variant: "ghost",
+						size: "sm",
+						onClick: a,
+						children: "Try again"
+					})
+				]
+			}),
+			/* @__PURE__ */ j(je, {
+				tickets: o,
+				loading: l,
+				error: u,
+				onRetry: f,
+				onOpen: _
+			}),
+			r && /* @__PURE__ */ j(ge, {
+				open: h,
+				onClose: () => g(!1),
+				config: r,
+				defaultCategory: t,
+				appVersion: n,
+				onCreated: (e) => {
+					g(!1), f(), _(e.id);
+				}
+			})
+		]
+	});
+}
+//#endregion
+//#region src/SupportContact.jsx
+var $ = (e) => typeof e == "string" && e.trim() !== "";
+function Ne({ className: e }) {
+	let { config: t } = B();
+	if (!t) return null;
+	let n = [];
+	return $(t.supportEmail) && n.push({
+		key: "email",
+		icon: "mail",
+		label: "Email",
+		value: /* @__PURE__ */ M("span", {
+			className: "d-inline-flex flex-wrap align-items-center gap-2",
+			children: [/* @__PURE__ */ j("a", {
+				href: `mailto:${t.supportEmail}`,
+				className: "text-break",
+				children: t.supportEmail
+			}), /* @__PURE__ */ j(p, {
+				text: t.supportEmail,
+				size: "sm",
+				label: "Copy email",
+				copiedLabel: "Email copied"
+			})]
+		})
+	}), $(t.supportPhone) && n.push({
+		key: "phone",
+		icon: "phone",
+		label: "Phone",
+		value: t.supportPhone,
+		href: `tel:${t.supportPhone.replace(/[^\d+]/g, "")}`
+	}), $(t.supportHours) && n.push({
+		key: "hours",
+		icon: "clock",
+		label: "Hours",
+		value: t.supportHours
+	}), n.length === 0 ? null : /* @__PURE__ */ M("section", {
+		className: e,
+		"aria-label": $(t.supportName) ? `Contact ${t.supportName}` : "Contact support",
+		children: [$(t.supportName) && /* @__PURE__ */ j("p", {
+			className: "fw-semibold mb-2",
+			children: t.supportName
+		}), /* @__PURE__ */ j(_, { items: n })]
+	});
+}
+//#endregion
+//#region src/SupportProvider.jsx
+function Pe({ client: e, children: n }) {
+	let r = o(null), i = t((t = !1) => {
+		let n = r.current;
+		if (t || !n || n.client !== e) {
+			let t = e.getConfig(), n = {
+				client: e,
+				pending: t
+			};
+			return r.current = n, t.catch(() => {
+				r.current === n && (r.current = null);
+			}), t;
+		}
+		return n.pending;
+	}, [e]), s = a(() => ({
+		client: e,
+		loadConfig: i
+	}), [e, i]);
+	return /* @__PURE__ */ j(ie.Provider, {
+		value: s,
+		children: n
+	});
+}
+//#endregion
+export { he as ReportIssue, P as SupportApiError, Me as SupportCenter, Ne as SupportContact, Pe as SupportProvider, re as createSupportClient, R as useSupportClient, B as useSupportConfig, H as useSupportTicket, V as useSupportTickets };