@reqdesk/widget 0.1.0 → 0.3.0

package/dist/react.js

@@ -1,4 +1,4 @@
-import { _ as submitTrackingReply, a as saveTrackingToken, b as configureWidgetClient, c as getWidgetStyles, d as en, f as getTicketDetail, g as submitTicket, h as submitReply, i as loadWidgetEmail, l as themeToVars, m as resolveWidgetUser, n as getTrackingTokens, o as saveWidgetConfig, p as listMyTickets, r as loadWidgetConfig, s as saveWidgetEmail, t as clearWidgetEmail, u as ar, v as trackTicket, x as setOidcTokenProvider, y as uploadAttachment } from "./storage-CC5BCsxP.js";
+import { C as configureWidgetClient, S as uploadAttachment, _ as resolveWidgetUser, a as saveTrackingToken, b as submitTrackingReply, c as getWidgetStyles, d as ar, f as en, g as listMyTickets, h as getTicketDetail, i as loadWidgetEmail, l as themeToStyle, m as getCategories, n as getTrackingTokens, o as saveWidgetConfig, p as closeTicket, r as loadWidgetConfig, s as saveWidgetEmail, t as clearWidgetEmail, v as submitReply, w as setOidcTokenProvider, x as trackTicket, y as submitTicket } from "./storage-BG7rsgWE.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { QueryClient, QueryClientProvider, keepPreviousData, queryOptions, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -31,7 +31,11 @@ function onAuthStateChange(listener) {
 		listeners = listeners.filter((l) => l !== listener);
 	};
 }
-async function initWidgetAuth(config) {
+function initWidgetAuth(config) {
+	initPromise = _initWidgetAuth(config);
+	return initPromise;
+}
+async function _initWidgetAuth(config) {
 	setState({ isLoading: true });
 	try {
 		const { createOidc } = await import("oidc-spa/core");
@@ -68,8 +72,13 @@ async function initWidgetAuth(config) {
 		});
 	}
 }
+let initPromise = null;
 async function login() {
-	if (!oidcInstance) return;
+	if (!oidcInstance && initPromise) await initPromise;
+	if (!oidcInstance) {
+		console.warn("[reqdesk-widget] Cannot login: OIDC not initialized. Check auth config.");
+		return;
+	}
 	await oidcInstance.login({ doesCurrentHrefRequiresAuth: false });
 }
 async function logout() {
@@ -297,7 +306,7 @@ function TicketForm({ mode = "inline", onTicketCreated, onError, className, styl
 		onError,
 		t
 	]);
-	const cssVars = themeToVars(ctx.theme);
+	const cssVars = themeToStyle(ctx.theme);
 	const content = success ? /* @__PURE__ */ jsxs("div", {
 		className: "rqd-success",
 		style: {
@@ -435,7 +444,7 @@ function TicketForm({ mode = "inline", onTicketCreated, onError, className, styl
 		className,
 		style: {
 			...style,
-			cssText: cssVars
+			...cssVars
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			className: "rqd-body",
@@ -444,7 +453,7 @@ function TicketForm({ mode = "inline", onTicketCreated, onError, className, styl
 	}) });
 	return /* @__PURE__ */ jsx(ShadowRoot, { children: /* @__PURE__ */ jsx("div", {
 		className: `rqd-inline ${className ?? ""}`,
-		style: { cssText: cssVars },
+		style: cssVars,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "rqd-body",
 			children: content
@@ -456,10 +465,10 @@ function TicketForm({ mode = "inline", onTicketCreated, onError, className, styl
 function SupportPortal({ className }) {
 	const ctx = useReqdeskContext();
 	const { isLoading } = useReqdesk();
-	const cssVars = themeToVars(ctx.theme);
+	const cssVars = themeToStyle(ctx.theme);
 	return /* @__PURE__ */ jsx(ShadowRoot, { children: /* @__PURE__ */ jsx("div", {
 		className: `rqd-inline ${className ?? ""}`,
-		style: { cssText: cssVars },
+		style: cssVars,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "rqd-body",
 			children: isLoading ? /* @__PURE__ */ jsx("p", {
@@ -480,6 +489,132 @@ function SupportPortal({ className }) {
 	}) });
 }
 //#endregion
+//#region src/react/queries.ts
+const widgetTicketDetailOptions = (ticketId) => queryOptions({
+	queryKey: ["widget-ticket", ticketId],
+	queryFn: () => getTicketDetail(ticketId),
+	staleTime: 6e4,
+	enabled: !!ticketId
+});
+const widgetMyTicketsOptions = (projectId, userId) => queryOptions({
+	queryKey: [
+		"widget-tickets",
+		projectId,
+		userId
+	],
+	queryFn: () => listMyTickets(projectId, userId),
+	staleTime: 3e4,
+	placeholderData: keepPreviousData,
+	enabled: !!userId
+});
+const widgetUserOptions = (projectId, email) => queryOptions({
+	queryKey: [
+		"widget-user",
+		projectId,
+		email
+	],
+	queryFn: () => resolveWidgetUser(projectId, email),
+	staleTime: 5 * 6e4,
+	enabled: !!email
+});
+const widgetCategoriesOptions = (projectId, parentId) => queryOptions({
+	queryKey: [
+		"widget-categories",
+		projectId,
+		parentId ?? "root"
+	],
+	queryFn: () => getCategories(projectId, parentId),
+	staleTime: 5 * 6e4
+});
+//#endregion
+//#region src/client-metadata.ts
+const STORAGE_PREFIX = "reqdesk_diag_";
+const DEFAULT_PREFS = {
+	screenResolution: false,
+	deviceType: false,
+	timezone: false,
+	referrerUrl: false,
+	language: false,
+	platform: false
+};
+/** Always collected — minimal, non-sensitive */
+function collectMinimalMetadata() {
+	const meta = {};
+	try {
+		meta.pageUrl = window.location.href;
+		meta.userAgent = navigator.userAgent;
+	} catch {}
+	return meta;
+}
+/** Full diagnostic set — only included for opted-in fields */
+function collectDiagnosticMetadata(prefs) {
+	const meta = {};
+	try {
+		if (prefs.screenResolution) meta.screenResolution = `${screen.width}x${screen.height}`;
+		if (prefs.deviceType) meta.deviceType = detectDeviceType();
+		if (prefs.timezone) meta.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+		if (prefs.referrerUrl && document.referrer) meta.referrerUrl = document.referrer;
+		if (prefs.language) meta.language = navigator.language;
+		if (prefs.platform) meta.platform = navigator.platform;
+	} catch {}
+	return meta;
+}
+/** Combine minimal + opted-in diagnostic metadata */
+function collectAllMetadata(apiKey) {
+	const prefs = getMetadataPreferences(apiKey);
+	return {
+		...collectMinimalMetadata(),
+		...collectDiagnosticMetadata(prefs)
+	};
+}
+function getMetadataPreferences(apiKey) {
+	try {
+		const raw = localStorage.getItem(`${STORAGE_PREFIX}${apiKey}`);
+		if (raw) return {
+			...DEFAULT_PREFS,
+			...JSON.parse(raw)
+		};
+	} catch {}
+	return { ...DEFAULT_PREFS };
+}
+function saveMetadataPreferences(apiKey, prefs) {
+	try {
+		localStorage.setItem(`${STORAGE_PREFIX}${apiKey}`, JSON.stringify(prefs));
+	} catch {}
+}
+function detectDeviceType() {
+	const ua = navigator.userAgent.toLowerCase();
+	if (/tablet|ipad|playbook|silk/i.test(ua)) return "tablet";
+	if (/mobile|iphone|ipod|android.*mobile|windows phone/i.test(ua)) return "mobile";
+	return "desktop";
+}
+const DIAGNOSTIC_FIELDS = [
+	{
+		key: "screenResolution",
+		labelKey: "diag.screenResolution"
+	},
+	{
+		key: "deviceType",
+		labelKey: "diag.deviceType"
+	},
+	{
+		key: "timezone",
+		labelKey: "diag.timezone"
+	},
+	{
+		key: "referrerUrl",
+		labelKey: "diag.referrerUrl"
+	},
+	{
+		key: "language",
+		labelKey: "diag.language"
+	},
+	{
+		key: "platform",
+		labelKey: "diag.platform"
+	}
+];
+//#endregion
 //#region src/react/views/SubmitTicketView.tsx
 const translations$4 = {
 	en,
@@ -529,6 +664,19 @@ function SubmitTicketView({ projectId, onSuccess, onError, isAuthenticated, user
 	const [uploadProgress, setUploadProgress] = useState(null);
 	const [success, setSuccess] = useState(null);
 	const [rememberEmail, setRememberEmail] = useState(!!savedEmail);
+	const [categoryPath, setCategoryPath] = useState([]);
+	const [selectedCategory, setSelectedCategory] = useState(null);
+	const { data: categories = [] } = useQuery(widgetCategoriesOptions(projectId, categoryPath.length > 0 ? categoryPath[categoryPath.length - 1].id : null));
+	const [diagOpen, setDiagOpen] = useState(false);
+	const [diagPrefs, setDiagPrefs] = useState(getMetadataPreferences(ctx.apiKey));
+	const diagValues = collectDiagnosticMetadata({
+		screenResolution: true,
+		deviceType: true,
+		timezone: true,
+		referrerUrl: true,
+		language: true,
+		platform: true
+	});
 	const t = useCallback((key) => {
 		if (ctx.translations?.[key]) return ctx.translations[key];
 		return (translations$4[ctx.language] ?? translations$4.en)[key] ?? key;
@@ -615,12 +763,15 @@ function SubmitTicketView({ projectId, onSuccess, onError, isAuthenticated, user
 		}
 		setErrors({});
 		if (rememberEmail && email) saveWidgetEmail(ctx.apiKey, email);
+		saveMetadataPreferences(ctx.apiKey, diagPrefs);
 		const validFiles = files.filter((f) => !f.error);
 		const data = {
 			title,
 			description: formData.get("description")?.trim() || void 0,
 			email,
-			priority: formData.get("priority") ?? "medium"
+			priority: formData.get("priority") ?? "medium",
+			categoryId: selectedCategory?.id,
+			clientMetadata: collectAllMetadata(ctx.apiKey)
 		};
 		submitMutation.mutate({
 			data,
@@ -801,6 +952,97 @@ function SubmitTicketView({ projectId, onSuccess, onError, isAuthenticated, user
 					]
 				})]
 			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "rqd-form-group",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "rqd-label",
+					children: t("form.categorySelected")
+				}), selectedCategory ? /* @__PURE__ */ jsxs("div", {
+					className: "rqd-category-selected",
+					children: [/* @__PURE__ */ jsxs("span", { children: [
+						categoryPath.map((c) => c.name).join(" > "),
+						categoryPath.length > 0 ? " > " : "",
+						selectedCategory.name
+					] }), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							setSelectedCategory(null);
+							setCategoryPath([]);
+						},
+						children: "×"
+					})]
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [categoryPath.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "rqd-category-breadcrumb",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setCategoryPath([]),
+						children: t("form.categoryPlaceholder")
+					}), categoryPath.map((c, i) => /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+						className: "rqd-category-breadcrumb-sep",
+						children: "›"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setCategoryPath((prev) => prev.slice(0, i + 1)),
+						children: c.name
+					})] }, c.id))]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "rqd-category-list",
+					children: [categories.map((cat) => /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "rqd-category-item",
+						onClick: () => {
+							if (cat.hasChildren) setCategoryPath((prev) => [...prev, cat]);
+							else setSelectedCategory(cat);
+						},
+						children: [cat.name, cat.hasChildren && /* @__PURE__ */ jsx("span", {
+							className: "rqd-category-item-chevron",
+							children: "›"
+						})]
+					}, cat.id)), categories.length === 0 && categoryPath.length === 0 && /* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: 13,
+							color: "var(--rqd-text-secondary)"
+						},
+						children: t("form.categoryPlaceholder")
+					})]
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "rqd-form-group",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "rqd-diag-toggle",
+					onClick: () => setDiagOpen((prev) => !prev),
+					children: [/* @__PURE__ */ jsx("span", { children: t("diag.title") }), /* @__PURE__ */ jsx("span", { children: diagOpen ? "▲" : "▼" })]
+				}), diagOpen && /* @__PURE__ */ jsxs("div", {
+					className: "rqd-diag-panel",
+					children: [/* @__PURE__ */ jsx("p", {
+						style: {
+							fontSize: 12,
+							color: "var(--rqd-text-secondary)",
+							margin: "0 0 6px"
+						},
+						children: t("diag.hint")
+					}), DIAGNOSTIC_FIELDS.map((field) => /* @__PURE__ */ jsxs("label", {
+						className: "rqd-diag-item",
+						children: [
+							/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								checked: diagPrefs[field.key],
+								onChange: (e) => setDiagPrefs((prev) => ({
+									...prev,
+									[field.key]: e.target.checked
+								}))
+							}),
+							/* @__PURE__ */ jsx("span", { children: t(field.labelKey) }),
+							/* @__PURE__ */ jsx("span", {
+								className: "rqd-diag-item-value",
+								children: diagValues[field.key] ?? "—"
+							})
+						]
+					}, field.key))]
+				})]
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "rqd-form-group",
 				children: [
@@ -864,35 +1106,6 @@ function SubmitTicketView({ projectId, onSuccess, onError, isAuthenticated, user
 	});
 }
 //#endregion
-//#region src/react/queries.ts
-const widgetTicketDetailOptions = (ticketId) => queryOptions({
-	queryKey: ["widget-ticket", ticketId],
-	queryFn: () => getTicketDetail(ticketId),
-	staleTime: 6e4,
-	enabled: !!ticketId
-});
-const widgetMyTicketsOptions = (projectId, userId) => queryOptions({
-	queryKey: [
-		"widget-tickets",
-		projectId,
-		userId
-	],
-	queryFn: () => listMyTickets(projectId, userId),
-	staleTime: 3e4,
-	placeholderData: keepPreviousData,
-	enabled: !!userId
-});
-const widgetUserOptions = (projectId, email) => queryOptions({
-	queryKey: [
-		"widget-user",
-		projectId,
-		email
-	],
-	queryFn: () => resolveWidgetUser(projectId, email),
-	staleTime: 5 * 6e4,
-	enabled: !!email
-});
-//#endregion
 //#region src/react/views/MyTicketsView.tsx
 const translations$3 = {
 	en,
@@ -1074,6 +1287,24 @@ function TicketDetailView({ ticketId, onBack }) {
 			if (context?.previous) queryClient.setQueryData(["widget-ticket", ticketId], context.previous);
 		}
 	});
+	const resolveMutation = useMutation({
+		mutationFn: () => closeTicket(ticketId),
+		onMutate: async () => {
+			await queryClient.cancelQueries({ queryKey: ["widget-ticket", ticketId] });
+			const previous = queryClient.getQueryData(["widget-ticket", ticketId]);
+			if (previous) queryClient.setQueryData(["widget-ticket", ticketId], {
+				...previous,
+				status: "resolved"
+			});
+			return { previous };
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["widget-ticket", ticketId] });
+		},
+		onError: (_err, _vars, context) => {
+			if (context?.previous) queryClient.setQueryData(["widget-ticket", ticketId], context.previous);
+		}
+	});
 	if (isLoading) return /* @__PURE__ */ jsx("div", {
 		className: "rqd-loading",
 		children: t("detail.loading")
@@ -1182,11 +1413,28 @@ function TicketDetailView({ ticketId, onBack }) {
 				onChange: (e) => setReplyBody(e.target.value),
 				placeholder: t("detail.replyPlaceholder"),
 				rows: 3
-			}), /* @__PURE__ */ jsx("button", {
-				className: "rqd-btn rqd-btn-primary",
-				onClick: () => replyMutation.mutate(replyBody.trim()),
-				disabled: !replyBody.trim() || replyMutation.isPending,
-				children: replyMutation.isPending ? t("detail.sending") : t("detail.sendReply")
+			}), /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ jsx("button", {
+					className: "rqd-btn rqd-btn-primary",
+					style: { flex: 1 },
+					onClick: () => replyMutation.mutate(replyBody.trim()),
+					disabled: !replyBody.trim() || replyMutation.isPending,
+					children: replyMutation.isPending ? t("detail.sending") : t("detail.sendReply")
+				}), ticket.status !== "resolved" && ticket.status !== "closed" && /* @__PURE__ */ jsx("button", {
+					className: "rqd-btn rqd-btn-secondary",
+					style: {
+						flex: 0,
+						whiteSpace: "nowrap",
+						padding: "10px 16px"
+					},
+					onClick: () => resolveMutation.mutate(),
+					disabled: resolveMutation.isPending,
+					children: resolveMutation.isPending ? t("detail.resolving") : t("detail.resolve")
+				})]
 			})]
 		})
 	] });
@@ -1313,7 +1561,7 @@ function FloatingWidget({ position = "bottom-right", contained = false, onTicket
 		return (translations[activeLang] ?? translations.en)[key] ?? key;
 	}, [activeLang, ctx.translations]);
 	const isRtl = activeLang === "ar";
-	const cssVars = themeToVars(activeTheme);
+	const cssVars = themeToStyle(activeTheme);
 	const posClass = `rqd-${position}`;
 	const containedClass = contained ? " rqd-contained" : "";
 	const brandName = ctx.theme?.brandName;
@@ -1555,7 +1803,7 @@ function FloatingWidget({ position = "bottom-right", contained = false, onTicket
 	const canGoBack = view !== "home";
 	const goBackTarget = view === "ticket-detail" ? "my-tickets" : "home";
 	return /* @__PURE__ */ jsx(ShadowRoot, { children: /* @__PURE__ */ jsxs("div", {
-		style: { cssText: cssVars },
+		style: cssVars,
 		...isRtl ? { dir: "rtl" } : {},
 		children: [/* @__PURE__ */ jsx("button", {
 			className: `rqd-fab ${posClass}${containedClass}`,