@mosierdata/emdash-plugin-analytics 1.0.1 → 1.0.3

package/dist/admin.mjs

@@ -1,10 +1,36 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { usePluginAPI } from "@emdash-cms/admin";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { API_BASE, apiFetch, parseApiResponse } from "@emdash-cms/admin";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
+//#region src/lib/usePluginAPI.ts
+const PLUGIN_ID = "roi-insights";
+/**
+* Shim for usePluginAPI — @emdash-cms/admin 0.1.0 does not export this hook.
+* Builds a stable { get, post } helper that routes through the plugin API
+* at /_emdash/api/plugins/roi-insights/<path> using the admin apiFetch
+* wrapper (adds CSRF header) and parseApiResponse (handles error shapes).
+*
+* Remove this file once @emdash-cms/admin exports usePluginAPI natively.
+*/
+function usePluginAPI() {
+	return useMemo(() => ({
+		get(path) {
+			return apiFetch(`${API_BASE}/plugins/${PLUGIN_ID}/${path}`).then((r) => parseApiResponse(r));
+		},
+		post(path, body) {
+			return apiFetch(`${API_BASE}/plugins/${PLUGIN_ID}/${path}`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify(body)
+			}).then((r) => parseApiResponse(r));
+		}
+	}), []);
+}
+
+//#endregion
 //#region src/admin/Dashboard.tsx
 const DASHBOARD_BASE_URL = "https://my.roiknowledge.com/embed";
-function AdminDashboard() {
+function AdminDashboard({ onNavigateToSettings }) {
 	const api = usePluginAPI();
 	const [dashboardUrl, setDashboardUrl] = useState(null);
 	const [error, setError] = useState(null);
@@ -41,9 +67,17 @@ function AdminDashboard() {
 		children: [
 			/* @__PURE__ */ jsx("h3", { children: "ROI Insights Dashboard" }),
 			/* @__PURE__ */ jsx("p", { children: error }),
-			/* @__PURE__ */ jsx("a", {
-				href: "../settings",
-				children: "Go to Settings →"
+			onNavigateToSettings && /* @__PURE__ */ jsx("button", {
+				onClick: onNavigateToSettings,
+				style: {
+					background: "none",
+					border: "none",
+					color: "#2563eb",
+					cursor: "pointer",
+					padding: 0,
+					fontSize: "inherit"
+				},
+				children: "Go to License & Google →"
 			})
 		]
 	});
@@ -74,146 +108,6 @@ function AdminDashboard() {
 	});
 }
 
-//#endregion
-//#region src/admin/Settings.tsx
-function SettingsPage() {
-	const api = usePluginAPI();
-	const [license, setLicense] = useState(null);
-	const [googleConnected, setGoogleConnected] = useState(false);
-	const [activating, setActivating] = useState(false);
-	const [message, setMessage] = useState("");
-	useEffect(() => {
-		Promise.all([api.get("license/status").then(setLicense), api.get("google-oauth/status").then((r) => setGoogleConnected(r.connected))]);
-	}, [api]);
-	useEffect(() => {
-		const params = new URLSearchParams(window.location.search);
-		if (params.get("oauth_callback") !== "1" || params.get("google_connected") !== "true") return;
-		api.post("google-oauth/connected", {}).then(() => {
-			setGoogleConnected(true);
-			setMessage("Google Services connected successfully.");
-		});
-	}, [api]);
-	const handleActivateLicense = useCallback(async () => {
-		setActivating(true);
-		setMessage("");
-		try {
-			const fresh = await api.get("license/validate");
-			setLicense(fresh);
-			setMessage(fresh.isValid ? "License activated." : `License invalid: ${fresh.reason ?? "unknown"}`);
-		} catch {
-			setMessage("Error validating license.");
-		} finally {
-			setActivating(false);
-		}
-	}, [api]);
-	const handleGoogleOAuth = useCallback(async () => {
-		try {
-			const result = await api.post("google-oauth/initiate", {});
-			if (result.error) {
-				setMessage(result.error);
-				return;
-			}
-			if (result.authUrl) window.location.href = result.authUrl;
-		} catch {
-			setMessage("Error initiating Google connection.");
-		}
-	}, [api]);
-	const licenseStatusLabel = () => {
-		if (!license) return "Not checked";
-		if (license.isFallback) return "Active (offline)";
-		if (!license.isValid) return `Invalid — ${license.reason ?? "unknown"}`;
-		return `Active — ${license.tier ?? "free"} tier`;
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		style: {
-			maxWidth: 640,
-			padding: "1.5rem"
-		},
-		children: [
-			/* @__PURE__ */ jsx("h2", { children: "License & Google" }),
-			/* @__PURE__ */ jsxs("p", {
-				style: {
-					fontSize: "0.9rem",
-					color: "#555",
-					marginBottom: "1.5rem"
-				},
-				children: [
-					"Enter your license key in the ",
-					/* @__PURE__ */ jsx("strong", { children: "Settings" }),
-					" tab above, then click Activate below."
-				]
-			}),
-			/* @__PURE__ */ jsxs("section", {
-				style: { marginBottom: "1.5rem" },
-				children: [
-					/* @__PURE__ */ jsx("h3", { children: "License" }),
-					license && /* @__PURE__ */ jsxs("p", {
-						style: {
-							fontSize: "0.9rem",
-							marginBottom: "0.75rem"
-						},
-						children: ["Status: ", /* @__PURE__ */ jsx("strong", { children: licenseStatusLabel() })]
-					}),
-					/* @__PURE__ */ jsx("button", {
-						onClick: () => void handleActivateLicense(),
-						disabled: activating,
-						children: activating ? "Activating…" : "Activate License"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("section", {
-				style: { marginBottom: "1.5rem" },
-				children: [/* @__PURE__ */ jsx("h3", { children: "Google Services (Free Tier)" }), googleConnected ? /* @__PURE__ */ jsx("p", { children: "Connected to Google Analytics & Search Console ✅" }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
-					style: {
-						fontSize: "0.9rem",
-						color: "#555"
-					},
-					children: "Grant read access to GA4 and Search Console. Tokens are stored securely on the MosierData backend."
-				}), /* @__PURE__ */ jsx("button", {
-					onClick: () => void handleGoogleOAuth(),
-					children: "Connect Google Services"
-				})] })]
-			}),
-			message && /* @__PURE__ */ jsx("p", {
-				style: {
-					fontSize: "0.9rem",
-					color: "#444",
-					marginTop: "1rem"
-				},
-				children: message
-			}),
-			license?.isValid && license.tier === "free" && /* @__PURE__ */ jsxs("div", {
-				style: {
-					marginTop: "2rem",
-					padding: "1rem",
-					background: "#f0f7ff",
-					border: "1px solid #c0d8f5",
-					borderRadius: 6
-				},
-				children: [
-					/* @__PURE__ */ jsx("h4", {
-						style: { margin: "0 0 0.5rem" },
-						children: "Upgrade to Professional"
-					}),
-					/* @__PURE__ */ jsx("p", {
-						style: {
-							margin: "0 0 0.75rem",
-							fontSize: "0.9rem"
-						},
-						children: "Unlock AI Call Transcription, Lead Scoring, and Call Recording."
-					}),
-					/* @__PURE__ */ jsx("a", {
-						href: "https://quotedash.io/upgrade",
-						target: "_blank",
-						rel: "noreferrer",
-						children: "Upgrade Now →"
-					})
-				]
-			})
-		]
-	});
-}
-
 //#endregion
 //#region src/admin/TrackingSettings.tsx
 const HELP_CONTENT = {
@@ -1526,18 +1420,469 @@ function TrackingSettingsAdmin() {
 	})] });
 }
 
+//#endregion
+//#region src/admin/Settings.tsx
+function SettingsPage() {
+	const api = usePluginAPI();
+	const [license, setLicense] = useState(null);
+	const [googleConnected, setGoogleConnected] = useState(false);
+	const [activating, setActivating] = useState(false);
+	const [message, setMessage] = useState("");
+	const [licenseKeyInput, setLicenseKeyInput] = useState("");
+	const [savingKey, setSavingKey] = useState(false);
+	const [advanced, setAdvanced] = useState({
+		dniSwapNumber: "",
+		dniScriptUrl: "",
+		customHeadCode: "",
+		customFooterCode: "",
+		debug: false
+	});
+	const [savingAdvanced, setSavingAdvanced] = useState(false);
+	useEffect(() => {
+		Promise.all([
+			api.get("license/status").then(setLicense),
+			api.get("google-oauth/status").then((r) => setGoogleConnected(r.connected)),
+			api.get("settings/load").then(setAdvanced)
+		]);
+	}, [api]);
+	useEffect(() => {
+		const params = new URLSearchParams(window.location.search);
+		if (params.get("oauth_callback") !== "1" || params.get("google_connected") !== "true") return;
+		api.post("google-oauth/connected", {}).then(() => {
+			setGoogleConnected(true);
+			setMessage("Google Services connected successfully.");
+		});
+	}, [api]);
+	const handleActivateLicense = useCallback(async () => {
+		setActivating(true);
+		setMessage("");
+		try {
+			const fresh = await api.get("license/validate");
+			setLicense(fresh);
+			setMessage(fresh.isValid ? "License activated." : `License invalid: ${fresh.reason ?? "unknown"}`);
+		} catch {
+			setMessage("Error validating license.");
+		} finally {
+			setActivating(false);
+		}
+	}, [api]);
+	const handleSaveLicenseKey = useCallback(async () => {
+		if (!licenseKeyInput.trim()) return;
+		setSavingKey(true);
+		setMessage("");
+		try {
+			await api.post("settings/save", { licenseKey: licenseKeyInput.trim() });
+			setMessage("License key saved. Click Activate to validate.");
+			setLicenseKeyInput("");
+		} catch {
+			setMessage("Error saving license key.");
+		} finally {
+			setSavingKey(false);
+		}
+	}, [api, licenseKeyInput]);
+	const handleSaveAdvanced = useCallback(async () => {
+		setSavingAdvanced(true);
+		setMessage("");
+		try {
+			await api.post("settings/save", advanced);
+			setMessage("Settings saved.");
+		} catch {
+			setMessage("Error saving settings.");
+		} finally {
+			setSavingAdvanced(false);
+		}
+	}, [api, advanced]);
+	const handleGoogleOAuth = useCallback(async () => {
+		try {
+			const result = await api.post("google-oauth/initiate", {});
+			if (result.error) {
+				setMessage(result.error);
+				return;
+			}
+			if (result.authUrl) window.location.href = result.authUrl;
+		} catch {
+			setMessage("Error initiating Google connection.");
+		}
+	}, [api]);
+	const licenseStatusLabel = () => {
+		if (!license) return "Not checked";
+		if (license.isFallback) return "Active (offline)";
+		if (!license.isValid) return `Invalid — ${license.reason ?? "unknown"}`;
+		return `Active — ${license.tier ?? "free"} tier`;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			maxWidth: 640,
+			padding: "1.5rem"
+		},
+		children: [
+			/* @__PURE__ */ jsx("h2", { children: "License & Google" }),
+			/* @__PURE__ */ jsxs("section", {
+				style: { marginBottom: "1.5rem" },
+				children: [
+					/* @__PURE__ */ jsx("h3", { children: "License Key" }),
+					/* @__PURE__ */ jsxs("p", {
+						style: {
+							fontSize: "0.9rem",
+							color: "#555",
+							marginBottom: "0.75rem"
+						},
+						children: ["Paste your license key from the MosierData portal. Prefix: ", /* @__PURE__ */ jsx("code", { children: "qdsh_" })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							gap: "0.5rem",
+							alignItems: "center"
+						},
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "password",
+							value: licenseKeyInput,
+							onChange: (e) => setLicenseKeyInput(e.target.value),
+							placeholder: "qdsh_…",
+							style: {
+								flex: 1,
+								padding: "0.5rem 0.75rem",
+								border: "1px solid #d1d5db",
+								borderRadius: 4,
+								fontSize: "0.9rem"
+							}
+						}), /* @__PURE__ */ jsx("button", {
+							onClick: () => void handleSaveLicenseKey(),
+							disabled: savingKey || !licenseKeyInput.trim(),
+							children: savingKey ? "Saving…" : "Save Key"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				style: { marginBottom: "1.5rem" },
+				children: [
+					/* @__PURE__ */ jsx("h3", { children: "License" }),
+					license && /* @__PURE__ */ jsxs("p", {
+						style: {
+							fontSize: "0.9rem",
+							marginBottom: "0.75rem"
+						},
+						children: ["Status: ", /* @__PURE__ */ jsx("strong", { children: licenseStatusLabel() })]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => void handleActivateLicense(),
+						disabled: activating,
+						children: activating ? "Activating…" : "Activate License"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				style: { marginBottom: "1.5rem" },
+				children: [/* @__PURE__ */ jsx("h3", { children: "Google Services (Free Tier)" }), googleConnected ? /* @__PURE__ */ jsx("p", { children: "Connected to Google Analytics & Search Console ✅" }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+					style: {
+						fontSize: "0.9rem",
+						color: "#555"
+					},
+					children: "Grant read access to GA4 and Search Console. Tokens are stored securely on the MosierData backend."
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: () => void handleGoogleOAuth(),
+					children: "Connect Google Services"
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				style: { marginBottom: "1.5rem" },
+				children: [
+					/* @__PURE__ */ jsx("h3", { children: "Call Tracking (AvidTrak DNI)" }),
+					/* @__PURE__ */ jsx("p", {
+						style: {
+							fontSize: "0.9rem",
+							color: "#555",
+							marginBottom: "0.75rem"
+						},
+						children: "Dynamic Number Insertion replaces a phone number on your site with a tracked number."
+					}),
+					/* @__PURE__ */ jsx("label", {
+						style: {
+							display: "block",
+							fontSize: "0.875rem",
+							marginBottom: "0.25rem"
+						},
+						children: "Phone Number to Swap"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						type: "text",
+						value: advanced.dniSwapNumber,
+						onChange: (e) => setAdvanced((a) => ({
+							...a,
+							dniSwapNumber: e.target.value
+						})),
+						placeholder: "e.g. (555) 867-5309",
+						style: {
+							width: "100%",
+							padding: "0.5rem 0.75rem",
+							border: "1px solid #d1d5db",
+							borderRadius: 4,
+							fontSize: "0.9rem",
+							marginBottom: "0.75rem",
+							boxSizing: "border-box"
+						}
+					}),
+					/* @__PURE__ */ jsx("label", {
+						style: {
+							display: "block",
+							fontSize: "0.875rem",
+							marginBottom: "0.25rem"
+						},
+						children: "AvidTrak Script URL"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						type: "text",
+						value: advanced.dniScriptUrl,
+						onChange: (e) => setAdvanced((a) => ({
+							...a,
+							dniScriptUrl: e.target.value
+						})),
+						placeholder: "https://…",
+						style: {
+							width: "100%",
+							padding: "0.5rem 0.75rem",
+							border: "1px solid #d1d5db",
+							borderRadius: 4,
+							fontSize: "0.9rem",
+							boxSizing: "border-box"
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				style: { marginBottom: "1.5rem" },
+				children: [
+					/* @__PURE__ */ jsx("h3", { children: "Custom Code" }),
+					/* @__PURE__ */ jsx("label", {
+						style: {
+							display: "block",
+							fontSize: "0.875rem",
+							marginBottom: "0.25rem"
+						},
+						children: "Custom <head> Code"
+					}),
+					/* @__PURE__ */ jsx("textarea", {
+						value: advanced.customHeadCode,
+						onChange: (e) => setAdvanced((a) => ({
+							...a,
+							customHeadCode: e.target.value
+						})),
+						rows: 4,
+						style: {
+							width: "100%",
+							padding: "0.5rem 0.75rem",
+							border: "1px solid #d1d5db",
+							borderRadius: 4,
+							fontSize: "0.85rem",
+							fontFamily: "monospace",
+							marginBottom: "0.75rem",
+							boxSizing: "border-box"
+						}
+					}),
+					/* @__PURE__ */ jsx("label", {
+						style: {
+							display: "block",
+							fontSize: "0.875rem",
+							marginBottom: "0.25rem"
+						},
+						children: "Custom Footer Code"
+					}),
+					/* @__PURE__ */ jsx("textarea", {
+						value: advanced.customFooterCode,
+						onChange: (e) => setAdvanced((a) => ({
+							...a,
+							customFooterCode: e.target.value
+						})),
+						rows: 4,
+						style: {
+							width: "100%",
+							padding: "0.5rem 0.75rem",
+							border: "1px solid #d1d5db",
+							borderRadius: 4,
+							fontSize: "0.85rem",
+							fontFamily: "monospace",
+							boxSizing: "border-box"
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				style: { marginBottom: "1.5rem" },
+				children: [
+					/* @__PURE__ */ jsx("h3", { children: "Developer" }),
+					/* @__PURE__ */ jsxs("label", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "0.5rem",
+							fontSize: "0.9rem",
+							cursor: "pointer"
+						},
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							checked: advanced.debug,
+							onChange: (e) => setAdvanced((a) => ({
+								...a,
+								debug: e.target.checked
+							}))
+						}), "Debug Mode"]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						style: {
+							fontSize: "0.8rem",
+							color: "#888",
+							marginTop: "0.25rem"
+						},
+						children: "Logs injected script activity to the browser console on every page load."
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: () => void handleSaveAdvanced(),
+				disabled: savingAdvanced,
+				children: savingAdvanced ? "Saving…" : "Save Settings"
+			}),
+			message && /* @__PURE__ */ jsx("p", {
+				style: {
+					fontSize: "0.9rem",
+					color: "#444",
+					marginTop: "1rem"
+				},
+				children: message
+			}),
+			license?.isValid && license.tier === "free" && /* @__PURE__ */ jsxs("div", {
+				style: {
+					marginTop: "2rem",
+					padding: "1rem",
+					background: "#f0f7ff",
+					border: "1px solid #c0d8f5",
+					borderRadius: 6
+				},
+				children: [
+					/* @__PURE__ */ jsx("h4", {
+						style: { margin: "0 0 0.5rem" },
+						children: "Upgrade to Professional"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						style: {
+							margin: "0 0 0.75rem",
+							fontSize: "0.9rem"
+						},
+						children: "Unlock AI Call Transcription, Lead Scoring, and Call Recording."
+					}),
+					/* @__PURE__ */ jsx("a", {
+						href: "https://quotedash.io/upgrade",
+						target: "_blank",
+						rel: "noreferrer",
+						children: "Upgrade Now →"
+					})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/admin/PluginLayout.tsx
+const TABS = [
+	{
+		id: "dashboard",
+		label: "Marketing ROI"
+	},
+	{
+		id: "tracking",
+		label: "Tracking Pixels"
+	},
+	{
+		id: "settings",
+		label: "License & Google"
+	}
+];
+function getTabFromHash() {
+	const hash = window.location.hash.slice(1);
+	return hash === "tracking" || hash === "settings" ? hash : "dashboard";
+}
+function PluginLayout() {
+	const [activeTab, setActiveTab] = useState(getTabFromHash);
+	const handleTabChange = (tab) => {
+		setActiveTab(tab);
+		window.location.hash = tab === "dashboard" ? "" : tab;
+	};
+	useEffect(() => {
+		const onHashChange = () => setActiveTab(getTabFromHash());
+		window.addEventListener("hashchange", onHashChange);
+		return () => window.removeEventListener("hashchange", onHashChange);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			height: "100%"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "tablist",
+			style: {
+				display: "flex",
+				borderBottom: "1px solid #e2e8f0",
+				background: "#fff",
+				padding: "0 1.25rem",
+				gap: "0.25rem",
+				flexShrink: 0
+			},
+			children: TABS.map((tab) => /* @__PURE__ */ jsx("button", {
+				role: "tab",
+				"aria-selected": activeTab === tab.id,
+				onClick: () => handleTabChange(tab.id),
+				style: {
+					padding: "0.75rem 1rem",
+					border: "none",
+					borderBottom: activeTab === tab.id ? "2px solid #2563eb" : "2px solid transparent",
+					background: "none",
+					cursor: "pointer",
+					fontSize: "0.875rem",
+					fontWeight: activeTab === tab.id ? 600 : 400,
+					color: activeTab === tab.id ? "#2563eb" : "#64748b",
+					marginBottom: "-1px"
+				},
+				children: tab.label
+			}, tab.id))
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				flex: 1,
+				overflow: "auto"
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						display: activeTab === "dashboard" ? "block" : "none",
+						height: "100%"
+					},
+					children: /* @__PURE__ */ jsx(AdminDashboard, { onNavigateToSettings: () => handleTabChange("settings") })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: { display: activeTab === "tracking" ? "block" : "none" },
+					children: /* @__PURE__ */ jsx(TrackingSettingsAdmin, {})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: { display: activeTab === "settings" ? "block" : "none" },
+					children: /* @__PURE__ */ jsx(SettingsPage, {})
+				})
+			]
+		})]
+	});
+}
+
 //#endregion
 //#region src/admin.tsx
 /**
 * Admin UI entry point — loaded in the browser by EmDash's admin panel.
 * Exports `pages` (keyed by path) and `widgets` (keyed by ID).
-* Paths must match the `admin.pages` declared in src/index.ts.
+* All plugin tabs (Dashboard, Tracking Pixels, License & Google) are rendered
+* inside PluginLayout so only one sidebar entry appears.
 */
-const pages = {
-	"/dashboard": AdminDashboard,
-	"/settings": SettingsPage,
-	"/tracking": TrackingSettingsAdmin
-};
+const pages = { "/dashboard": PluginLayout };
 const widgets = {};
 
 //#endregion