@reqdesk/widget 0.2.0 → 0.3.0

package/dist/react.js

@@ -1,4 +1,4 @@
-import { C as setOidcTokenProvider, S as configureWidgetClient, _ as submitReply, a as saveTrackingToken, b as trackTicket, c as getWidgetStyles, d as en, f as closeTicket, g as resolveWidgetUser, h as listMyTickets, i as loadWidgetEmail, l as themeToVars, m as getTicketDetail, n as getTrackingTokens, o as saveWidgetConfig, p as getCategories, r as loadWidgetConfig, s as saveWidgetEmail, t as clearWidgetEmail, u as ar, v as submitTicket, x as uploadAttachment, y as submitTrackingReply } from "./storage-PjDHb5v7.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", {
@@ -1552,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;
@@ -1794,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}`,