reflet-sdk 0.6.4 → 0.6.6

package/dist/react.js

@@ -1,7 +1,115 @@
-import { n as Reflet } from "./client-DAdWdIFY.js";
-import { a as REFLET_Z_INDEX, i as useRefletContext, n as RefletProvider, r as useRefletClient, t as RefletContext } from "./react-context-Caq1fodf.js";
+import { i as surveyRegistryKey, n as Reflet, r as surveyControllers } from "./client-oFFfRxAM.js";
+import { a as SurveySession, c as displayOf, i as SurveyCard, n as useSurveySession, o as previewTransport, r as createRefletSurveyTransport, t as useSessionHandle } from "./use-survey-session-LK6sN1Fg.js";
+import { i as useRefletContext, n as RefletProvider, r as useRefletClient, t as RefletContext } from "./react-context-Kazo_JCz.js";
+import { t as REFLET_Z_INDEX } from "./z-index-CwokqVq_.js";
 import { cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region ../survey-core/src/targeting.ts
+const PATTERN_SEPARATOR = /[,\n]/;
+const REGEX_SPECIAL_CHARS = /[.+?^${}()|[\]\\]/g;
+const WILDCARD = /\*/g;
+const TRAILING_SLASHES = /\/+$/;
+const stripTrailingSlash = (path) => path.replace(TRAILING_SLASHES, "") || "/";
+const patternToRegex = (pattern) => {
+	const escaped = stripTrailingSlash(pattern).replace(REGEX_SPECIAL_CHARS, "\\$&").replace(WILDCARD, ".*");
+	return new RegExp(`^${escaped}/?$`, "i");
+};
+const HASH_ROUTE_PREFIX = "#/";
+const HASH_ROUTE_QUERY = /\?.*$/;
+const hashRoutePathOf = (url) => url.hash.startsWith(HASH_ROUTE_PREFIX) ? [stripTrailingSlash(url.hash.slice(1).replace(HASH_ROUTE_QUERY, ""))] : [];
+/**
+* Comma- or newline-separated patterns with `*` wildcards. A pattern starting
+* with `/` matches the path (or a `#/` hash route); one with a scheme matches
+* the full URL; anything else matches host and path. Empty matches every page.
+*/
+const matchesPageUrl = (patterns, href) => {
+	const list = (patterns ?? "").split(PATTERN_SEPARATOR).map((pattern) => pattern.trim()).filter(Boolean);
+	if (list.length === 0) return true;
+	let url;
+	try {
+		url = new URL(href);
+	} catch {
+		return false;
+	}
+	const path = stripTrailingSlash(url.pathname);
+	const paths = [path, ...hashRoutePathOf(url)];
+	const candidatesFor = (pattern) => {
+		if (pattern.startsWith("/")) return paths;
+		return pattern.includes("://") ? [`${url.origin}${path}`] : [`${url.host}${path}`];
+	};
+	return list.some((pattern) => {
+		const regex = patternToRegex(pattern);
+		return candidatesFor(pattern).some((candidate) => regex.test(candidate));
+	});
+};
+//#endregion
+//#region ../survey-core/src/triggers.ts
+const URL_POLL_INTERVAL_MS = 1e3;
+/**
+* Arms every survey's trigger on the page: page visits (including client-side
+* navigation), time on page, exit intent, custom events and submitted feedback.
+* Each survey fires at most once per page session.
+*/
+const createSurveyTriggers = (options) => {
+	const win = options.window ?? window;
+	const fired = /* @__PURE__ */ new Set();
+	const timers = /* @__PURE__ */ new Map();
+	let surveys = options.surveys;
+	let lastHref = win.location.href;
+	const onCurrentPage = (survey) => matchesPageUrl(survey.triggerConfig?.pageUrl, win.location.href);
+	const fire = (survey) => {
+		if (fired.has(survey._id) || !onCurrentPage(survey)) return;
+		if (options.onTrigger(survey)) fired.add(survey._id);
+	};
+	const clearTimers = () => {
+		for (const timer of timers.values()) win.clearTimeout(timer);
+		timers.clear();
+	};
+	const armPage = () => {
+		clearTimers();
+		for (const survey of surveys) {
+			if (fired.has(survey._id) || !onCurrentPage(survey)) continue;
+			if (survey.triggerType === "page_visit") fire(survey);
+			if (survey.triggerType === "time_delay") {
+				const delayMs = survey.triggerConfig?.delayMs ?? 5e3;
+				timers.set(survey._id, win.setTimeout(() => fire(survey), delayMs));
+			}
+		}
+	};
+	const fireAll = (matches) => {
+		for (const survey of surveys) if (matches(survey)) fire(survey);
+	};
+	const onMouseOut = (event) => {
+		if (event.relatedTarget === null && event.clientY <= 0) fireAll((survey) => survey.triggerType === "exit_intent");
+	};
+	const onNavigation = () => {
+		if (win.location.href === lastHref) return;
+		lastHref = win.location.href;
+		armPage();
+	};
+	win.document.addEventListener("mouseout", onMouseOut);
+	win.addEventListener("popstate", onNavigation);
+	win.addEventListener("hashchange", onNavigation);
+	const urlPoll = win.setInterval(onNavigation, URL_POLL_INTERVAL_MS);
+	armPage();
+	return {
+		destroy: () => {
+			clearTimers();
+			win.clearInterval(urlPoll);
+			win.document.removeEventListener("mouseout", onMouseOut);
+			win.removeEventListener("popstate", onNavigation);
+			win.removeEventListener("hashchange", onNavigation);
+		},
+		notifyFeedbackSubmitted: () => fireAll((survey) => survey.triggerType === "feedback_submitted"),
+		setSurveys: (next) => {
+			surveys = next;
+			armPage();
+		},
+		track: (eventName) => fireAll((survey) => survey.triggerType === "event" && survey.triggerConfig?.eventName === eventName)
+	};
+};
+//#endregion
 //#region src/react-changelog-widget.tsx
 /**
 * React component that wraps the Reflet Changelog Widget.
@@ -1217,6 +1325,284 @@ function useUnreadChangelogCount(publicKey) {
 	};
 }
 //#endregion
-export { ChangelogWidget, FeedbackButton, FeedbackDialog, Reflet, RefletContext, RefletProvider, useAddComment, useChangelog, useComments, useCreateFeedback, useFeedback, useFeedbackList, useOrganizationConfig, useRefletClient, useRefletContext, useRoadmap, useSubscription, useUnreadChangelogCount, useVote };
+//#region src/surveys/controller.ts
+/**
+* Owns in-app delivery for one Reflet project: eligible surveys, armed
+* triggers and the survey on screen. Lives outside React so signals sent
+* before `<RefletSurveys />` has loaded surveys are queued, not lost.
+*/
+var SurveyController = class {
+	callbacks = {};
+	active = null;
+	client = null;
+	generation = 0;
+	listeners = /* @__PURE__ */ new Set();
+	pending = [];
+	surveys = null;
+	triggers = null;
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	};
+	getActiveSession = () => this.active;
+	attach(client) {
+		this.generation += 1;
+		const generation = this.generation;
+		this.client = client;
+		this.triggers = createSurveyTriggers({
+			onTrigger: (survey) => this.activate(survey),
+			surveys: []
+		});
+		this.refresh();
+		return () => {
+			if (generation !== this.generation) return;
+			this.generation += 1;
+			this.triggers?.destroy();
+			this.triggers = null;
+			this.client = null;
+			this.surveys = null;
+			this.active?.dismiss();
+			this.setActive(null);
+		};
+	}
+	track(eventName) {
+		if (this.triggers && this.surveys) {
+			this.triggers.track(eventName);
+			return;
+		}
+		this.enqueue({
+			eventName,
+			kind: "track"
+		});
+	}
+	notifyFeedbackSubmitted() {
+		if (this.triggers && this.surveys) {
+			this.triggers.notifyFeedbackSubmitted();
+			return;
+		}
+		this.enqueue({ kind: "feedback_submitted" });
+	}
+	showSurvey(surveyId) {
+		if (!this.surveys) {
+			this.enqueue({
+				kind: "show",
+				surveyId
+			});
+			return;
+		}
+		const survey = this.surveys.find((candidate) => candidate._id === surveyId);
+		if (survey) this.activate(survey);
+	}
+	dismissSurvey() {
+		this.active?.dismiss();
+	}
+	async refresh() {
+		const client = this.client;
+		const generation = this.generation;
+		if (!client) return;
+		let surveys;
+		try {
+			surveys = await client.getEligibleSurveys();
+		} catch {
+			surveys = [];
+		}
+		if (generation !== this.generation) return;
+		this.surveys = surveys;
+		this.triggers?.setSurveys(surveys);
+		const pending = this.pending;
+		this.pending = [];
+		for (const call of pending) if (call.kind === "track") this.track(call.eventName);
+		else if (call.kind === "feedback_submitted") this.notifyFeedbackSubmitted();
+		else this.showSurvey(call.surveyId);
+	}
+	enqueue(call) {
+		this.pending = [...this.pending, call].slice(-50);
+	}
+	activate(survey) {
+		const client = this.client;
+		if (this.active || !client) return false;
+		const session = new SurveySession({
+			callbacks: {
+				onAnswer: (event) => this.callbacks.onSurveyAnswer?.(event),
+				onComplete: (event) => this.callbacks.onSurveyComplete?.(event),
+				onDismiss: (event) => this.callbacks.onSurveyDismiss?.(event),
+				onStart: (event) => this.callbacks.onSurveyStart?.(event)
+			},
+			survey,
+			transport: createRefletSurveyTransport(client)
+		});
+		const unsubscribe = session.subscribe(() => {
+			if (session.getSnapshot().phase !== "dismissed") return;
+			unsubscribe();
+			if (this.active === session) {
+				this.setActive(null);
+				this.refresh();
+			}
+		});
+		this.setActive(session);
+		session.start().then(() => {
+			if (session.getSnapshot().phase === "start_failed" && this.active === session) {
+				unsubscribe();
+				this.setActive(null);
+			}
+		});
+		return true;
+	}
+	setActive(session) {
+		this.active = session;
+		for (const listener of this.listeners) listener();
+	}
+};
+/** Shared by `<RefletSurveys />`, `useRefletSurveys()` and the client's feedback signal. */
+const surveyControllerFor = (publicKey, baseUrl) => {
+	const key = surveyRegistryKey(publicKey, baseUrl ?? "https://harmless-clam-802.convex.site");
+	let controller = surveyControllers.get(key);
+	if (!controller) {
+		controller = new SurveyController();
+		surveyControllers.set(key, controller);
+	}
+	return controller;
+};
+//#endregion
+//#region src/surveys/survey-portal.tsx
+const SURVEY_HOST_ATTRIBUTE = "data-reflet-survey";
+const LAYER_STYLES = `
+:host { all: initial; }
+.rfs-layer {
+  position: fixed;
+  z-index: ${REFLET_Z_INDEX.surveyLayer};
+  bottom: 20px;
+  width: min(360px, calc(100vw - 32px));
+}
+.rfs-layer[data-position="bottom_right"] { right: 20px; }
+.rfs-layer[data-position="bottom_left"] { left: 20px; }
+.rfs-layer[data-position="center"] {
+  inset: 0;
+  display: grid;
+  place-items: center;
+  width: auto;
+  padding: 16px;
+  background: rgb(15 15 15 / 28%);
+  animation: rfs-layer-fade 240ms ease-out;
+}
+.rfs-layer[data-position="center"] > .rf-survey { max-width: 420px; }
+@media (max-width: 480px) {
+  .rfs-layer[data-position^="bottom"] { right: 16px; bottom: 16px; left: 16px; width: auto; }
+}
+@keyframes rfs-layer-fade { from { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .rfs-layer { animation: none; } }
+`;
+/**
+* Hosts an in-app survey in its own shadow root so page CSS can't restyle it.
+* Direct DOM work is unavoidable: React can't create a shadow root declaratively.
+*/
+function SurveyPortal({ children, position }) {
+	const [shadowRoot, setShadowRoot] = useState(null);
+	useEffect(() => {
+		const host = document.createElement("div");
+		host.setAttribute(SURVEY_HOST_ATTRIBUTE, "");
+		const root = host.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = LAYER_STYLES;
+		root.append(style);
+		document.body.append(host);
+		setShadowRoot(root);
+		return () => host.remove();
+	}, []);
+	if (!shadowRoot) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "rfs-layer",
+		"data-position": position,
+		children
+	}), shadowRoot);
+}
+//#endregion
+//#region src/surveys/reflet-surveys.tsx
+const ENDING_AUTO_CLOSE_MS = 6e3;
+function useOrganizationColor(client, override) {
+	const [organizationColor, setOrganizationColor] = useState();
+	useEffect(() => {
+		if (override) return;
+		let cancelled = false;
+		client.getConfig().then((config) => {
+			if (!cancelled) setOrganizationColor(config.primaryColor);
+		}).catch(() => void 0);
+		return () => {
+			cancelled = true;
+		};
+	}, [client, override]);
+	return override ?? organizationColor;
+}
+function ActiveSurvey({ primaryColor, session, theme }) {
+	const handle = useSessionHandle(session);
+	const { ending, phase } = handle.snapshot;
+	const endsQuietly = ending !== null && !(ending.buttonUrl || ending.buttonLabel);
+	useEffect(() => {
+		if (!endsQuietly) return;
+		const timer = window.setTimeout(() => session.dismiss(), ENDING_AUTO_CLOSE_MS);
+		return () => window.clearTimeout(timer);
+	}, [endsQuietly, session]);
+	if (phase !== "question" && phase !== "ending") return null;
+	return /* @__PURE__ */ jsx(SurveyPortal, {
+		position: displayOf(session.survey.display).position ?? "bottom_right",
+		children: /* @__PURE__ */ jsx(SurveyCard, {
+			primaryColor,
+			session: handle,
+			theme,
+			variant: "floating"
+		})
+	});
+}
+/**
+* In-app survey delivery. Mount once inside `RefletProvider`: it loads the
+* surveys this visitor is eligible for, arms their triggers and shows one at a time.
+*/
+function RefletSurveys({ enabled = true, onSurveyAnswer, onSurveyComplete, onSurveyDismiss, onSurveyStart, primaryColor, theme = "auto" }) {
+	const { baseUrl, client, publicKey } = useRefletContext();
+	const controller = surveyControllerFor(publicKey, baseUrl);
+	const color = useOrganizationColor(client, primaryColor);
+	const session = useSyncExternalStore(controller.subscribe, controller.getActiveSession, () => null);
+	useEffect(() => {
+		controller.callbacks = {
+			onSurveyAnswer,
+			onSurveyComplete,
+			onSurveyDismiss,
+			onSurveyStart
+		};
+	});
+	useEffect(() => {
+		if (!enabled) return;
+		return controller.attach(client);
+	}, [
+		client,
+		controller,
+		enabled
+	]);
+	if (!session) return null;
+	return /* @__PURE__ */ jsx(ActiveSurvey, {
+		primaryColor: color,
+		session,
+		theme
+	}, session.survey._id);
+}
+//#endregion
+//#region src/surveys/use-reflet-surveys.ts
+/**
+* Drives `<RefletSurveys />` from anywhere inside `RefletProvider`. Calls made
+* before surveys load are queued and replayed once they do.
+*/
+function useRefletSurveys() {
+	const { baseUrl, publicKey } = useRefletContext();
+	const controller = surveyControllerFor(publicKey, baseUrl);
+	const activeSurveyId = useSyncExternalStore(controller.subscribe, () => controller.getActiveSession()?.survey._id ?? null, () => null);
+	return useMemo(() => ({
+		activeSurveyId,
+		dismissSurvey: () => controller.dismissSurvey(),
+		showSurvey: (surveyId) => controller.showSurvey(surveyId),
+		track: (eventName) => controller.track(eventName)
+	}), [activeSurveyId, controller]);
+}
+//#endregion
+export { ChangelogWidget, FeedbackButton, FeedbackDialog, Reflet, RefletContext, RefletProvider, RefletSurveys, SurveyCard, SurveySession, createRefletSurveyTransport, previewTransport, useAddComment, useChangelog, useComments, useCreateFeedback, useFeedback, useFeedbackList, useOrganizationConfig, useRefletClient, useRefletContext, useRefletSurveys, useRoadmap, useSubscription, useSurveySession, useUnreadChangelogCount, useVote };
 
 //# sourceMappingURL=react.js.map