@empoweredvote/ev-ui 0.6.2 → 0.6.3

package/dist/index.js

@@ -82,6 +82,7 @@ __export(index_exports, {
   spacing: () => spacing,
   textStyles: () => textStyles,
   tierColors: () => tierColors,
+  useEvContextPromotion: () => useEvContextPromotion,
   useMediaQuery: () => useMediaQuery,
   zIndex: () => zIndex
 });
@@ -2990,6 +2991,9 @@ var evContext = {
     if (current.authed.compass !== void 0) out.compass = current.authed.compass;
     if (current.authed.address !== void 0) out.address = current.authed.address;
     if (current.authed.verdicts !== void 0) out.verdicts = current.authed.verdicts;
+    if (current.authed.promotionDismissed !== void 0) {
+      out.promotionDismissed = current.authed.promotionDismissed;
+    }
     return out;
   },
   /**
@@ -3014,6 +3018,9 @@ var evContext = {
     if (patch.compass !== void 0) allowed.compass = patch.compass;
     if (patch.address !== void 0) allowed.address = patch.address;
     if (patch.verdicts !== void 0) allowed.verdicts = patch.verdicts;
+    if (patch.promotionDismissed !== void 0) {
+      allowed.promotionDismissed = patch.promotionDismissed;
+    }
     if (Object.keys(allowed).length === 0) return false;
     const current = await this.get() || {};
     const priorAuthed = current.authed && current.authed.userId === userId ? current.authed : null;
@@ -3022,10 +3029,17 @@ var evContext = {
       if (priorAuthed.compass !== void 0) nextAuthed.compass = priorAuthed.compass;
       if (priorAuthed.address !== void 0) nextAuthed.address = priorAuthed.address;
       if (priorAuthed.verdicts !== void 0) nextAuthed.verdicts = priorAuthed.verdicts;
+      if (priorAuthed.promotionDismissed !== void 0) {
+        nextAuthed.promotionDismissed = priorAuthed.promotionDismissed;
+      }
     }
     if (allowed.compass !== void 0) nextAuthed.compass = allowed.compass;
     if (allowed.address !== void 0) nextAuthed.address = allowed.address;
     if (allowed.verdicts !== void 0) nextAuthed.verdicts = allowed.verdicts;
+    if (allowed.promotionDismissed !== void 0 && allowed.promotionDismissed !== null && typeof allowed.promotionDismissed === "object") {
+      const prior = priorAuthed && priorAuthed.promotionDismissed && typeof priorAuthed.promotionDismissed === "object" ? priorAuthed.promotionDismissed : {};
+      nextAuthed.promotionDismissed = { ...prior, ...allowed.promotionDismissed };
+    }
     return this.set({ ...current, authed: nextAuthed });
   },
   /**
@@ -5794,15 +5808,174 @@ function computeTierCoverage(topics) {
   return counts;
 }
 
+// src/useEvContextPromotion.js
+var import_react31 = require("react");
+function useEvContextPromotion({
+  domain,
+  isLoggedIn,
+  userId,
+  apiData,
+  apiWriter,
+  enabled = true
+}) {
+  const [shouldPrompt, setShouldPrompt] = (0, import_react31.useState)(false);
+  const [payload, setPayload] = (0, import_react31.useState)(null);
+  const [status, setStatus] = (0, import_react31.useState)("idle");
+  const [error, setError] = (0, import_react31.useState)(null);
+  const apiDataRef = (0, import_react31.useRef)(apiData);
+  apiDataRef.current = apiData;
+  const userIdRef = (0, import_react31.useRef)(userId);
+  userIdRef.current = userId;
+  const isLoggedInRef = (0, import_react31.useRef)(isLoggedIn);
+  isLoggedInRef.current = isLoggedIn;
+  const enabledRef = (0, import_react31.useRef)(enabled);
+  enabledRef.current = enabled;
+  const domainRef = (0, import_react31.useRef)(domain);
+  domainRef.current = domain;
+  const apiWriterRef = (0, import_react31.useRef)(apiWriter);
+  apiWriterRef.current = apiWriter;
+  const detect = (0, import_react31.useCallback)(async () => {
+    const _enabled = enabledRef.current;
+    const _isLoggedIn = isLoggedInRef.current;
+    const _userId = userIdRef.current;
+    const _apiData = apiDataRef.current;
+    const _domain = domainRef.current;
+    if (!_enabled || !_isLoggedIn || !_userId) {
+      setShouldPrompt(false);
+      setPayload(null);
+      return;
+    }
+    if (!isApiEmpty(_domain, _apiData)) {
+      setShouldPrompt(false);
+      setPayload(null);
+      return;
+    }
+    try {
+      const slice = await evContext.getAuthedSlice(_userId);
+      if (slice && slice.promotionDismissed && slice.promotionDismissed[_domain] === true) {
+        setShouldPrompt(false);
+        setPayload(null);
+        return;
+      }
+    } catch {
+    }
+    let guest = null;
+    try {
+      guest = await evContext.get();
+    } catch {
+      guest = null;
+    }
+    if (isGuestPopulated(_domain, guest)) {
+      setShouldPrompt(true);
+      setPayload(guest[_domain]);
+    } else {
+      setShouldPrompt(false);
+      setPayload(null);
+    }
+  }, []);
+  (0, import_react31.useEffect)(() => {
+    detect();
+  }, [detect, isLoggedIn, userId, apiData, enabled, domain]);
+  (0, import_react31.useEffect)(() => {
+    const unsub = evContext.subscribe(() => {
+      detect();
+    });
+    return unsub;
+  }, [detect]);
+  const promote = (0, import_react31.useCallback)(async () => {
+    const _userId = userIdRef.current;
+    const _domain = domainRef.current;
+    const _writer = apiWriterRef.current;
+    const _payload = payload;
+    if (!_userId || !_payload || typeof _writer !== "function") return;
+    setStatus("saving");
+    setError(null);
+    try {
+      await _writer(_payload);
+      try {
+        await evContext.setAuthedSlice(_userId, { [_domain]: _payload });
+      } catch {
+      }
+      try {
+        await evContext.setAuthedSlice(_userId, {
+          promotionDismissed: { [_domain]: false }
+        });
+      } catch {
+      }
+      setStatus("saved");
+      setShouldPrompt(false);
+    } catch (err) {
+      setStatus("error");
+      setError(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, [payload]);
+  const dismiss = (0, import_react31.useCallback)(async () => {
+    const _userId = userIdRef.current;
+    const _domain = domainRef.current;
+    if (!_userId) return;
+    try {
+      await evContext.setAuthedSlice(_userId, {
+        promotionDismissed: { [_domain]: true }
+      });
+    } catch {
+    }
+    setShouldPrompt(false);
+  }, []);
+  return { shouldPrompt, payload, promote, dismiss, status, error };
+}
+function isApiEmpty(domain, apiData) {
+  if (apiData === null || apiData === void 0) return true;
+  if (domain === "compass") {
+    if (typeof apiData !== "object") return false;
+    if (Array.isArray(apiData)) return apiData.length === 0;
+    if (apiData.answers && typeof apiData.answers === "object") {
+      return Object.keys(apiData.answers).length === 0;
+    }
+    return Object.keys(apiData).length === 0;
+  }
+  if (domain === "address") {
+    if (typeof apiData === "string") return apiData.trim().length === 0;
+    if (typeof apiData !== "object") return false;
+    const a = apiData;
+    const hasAddr = typeof a.formatted === "string" && a.formatted.length > 0;
+    const hasAddrAlt = typeof a.addr === "string" && a.addr.length > 0;
+    const hasLat = typeof a.lat === "number" || typeof a.latitude === "number";
+    return !(hasAddr || hasAddrAlt || hasLat);
+  }
+  if (domain === "verdicts") {
+    if (typeof apiData !== "object") return false;
+    if (Array.isArray(apiData)) return apiData.length === 0;
+    return Object.keys(apiData).length === 0;
+  }
+  return false;
+}
+function isGuestPopulated(domain, fullEvContext) {
+  if (!fullEvContext || typeof fullEvContext !== "object") return false;
+  const slice = fullEvContext[domain];
+  if (!slice || typeof slice !== "object") return false;
+  if (domain === "compass") {
+    const ans = slice.answers || slice.a;
+    if (ans && typeof ans === "object") return Object.keys(ans).length > 0;
+    return false;
+  }
+  if (domain === "address") {
+    return typeof slice.formatted === "string" && slice.formatted.length > 0 || typeof slice.addr === "string" && slice.addr.length > 0;
+  }
+  if (domain === "verdicts") {
+    return Object.keys(slice).length > 0;
+  }
+  return false;
+}
+
 // src/StanceAccordion.jsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 
 // src/Favicon.jsx
-var import_react31 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 function Favicon({ url, size = 16 }) {
   try {
     const domain = new URL(url).hostname;
-    return /* @__PURE__ */ import_react31.default.createElement(
+    return /* @__PURE__ */ import_react32.default.createElement(
       "img",
       {
         src: `https://www.google.com/s2/favicons?sz=${size}&domain=${domain}`,
@@ -5813,7 +5986,7 @@ function Favicon({ url, size = 16 }) {
       }
     );
   } catch {
-    return /* @__PURE__ */ import_react31.default.createElement(
+    return /* @__PURE__ */ import_react32.default.createElement(
       "svg",
       {
         width: size,
@@ -5824,8 +5997,8 @@ function Favicon({ url, size = 16 }) {
         strokeWidth: "1.5",
         style: { verticalAlign: "middle", flexShrink: 0 }
       },
-      /* @__PURE__ */ import_react31.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ import_react31.default.createElement("path", { d: "M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
+      /* @__PURE__ */ import_react32.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ import_react32.default.createElement("path", { d: "M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
     );
   }
 }
@@ -5856,11 +6029,11 @@ function StanceAccordion({
   apiUrl = "https://api.empowered.vote"
 }) {
   var _a;
-  const [expandedTopicId, setExpandedTopicId] = (0, import_react32.useState)(null);
-  const [loadingId, setLoadingId] = (0, import_react32.useState)(null);
-  const [showAll, setShowAll] = (0, import_react32.useState)(false);
-  const contextCache = (0, import_react32.useRef)(/* @__PURE__ */ new Map());
-  const quotesCache = (0, import_react32.useRef)(null);
+  const [expandedTopicId, setExpandedTopicId] = (0, import_react33.useState)(null);
+  const [loadingId, setLoadingId] = (0, import_react33.useState)(null);
+  const [showAll, setShowAll] = (0, import_react33.useState)(false);
+  const contextCache = (0, import_react33.useRef)(/* @__PURE__ */ new Map());
+  const quotesCache = (0, import_react33.useRef)(null);
   const polAnswerMap = {};
   if (polAnswers) {
     polAnswers.forEach((a) => {
@@ -5919,7 +6092,7 @@ function StanceAccordion({
       quotesCache.current = [];
     }
   }
-  const handleToggle = (0, import_react32.useCallback)(
+  const handleToggle = (0, import_react33.useCallback)(
     async (topicId) => {
       if (expandedTopicId === topicId) {
         setExpandedTopicId(null);
@@ -5936,7 +6109,7 @@ function StanceAccordion({
     },
     [expandedTopicId, politicianId, apiUrl]
   );
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (initialExpandedTopicId && topics && topics.length > 0) {
       handleToggle(String(initialExpandedTopicId));
     }
@@ -5952,13 +6125,13 @@ function StanceAccordion({
       visibleTopics = [pinned, ...baseTopics.filter((t) => String(t.id) !== String(initialExpandedTopicId))];
     }
   }
-  return /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(
     "div",
     {
       className: "flex flex-col",
       style: { fontFamily: "'Manrope', sans-serif" }
     },
-    /* @__PURE__ */ import_react32.default.createElement(
+    /* @__PURE__ */ import_react33.default.createElement(
       "h3",
       {
         className: "text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-2",
@@ -5980,15 +6153,15 @@ function StanceAccordion({
         if (topic.topic_key) return q.issue === topic.topic_key;
         return topic.short_title && q.issue.toLowerCase() === topic.short_title.toLowerCase();
       }) : [];
-      return /* @__PURE__ */ import_react32.default.createElement("div", { key: topicId, className: "border-b border-neutral-100" }, /* @__PURE__ */ import_react32.default.createElement(
+      return /* @__PURE__ */ import_react33.default.createElement("div", { key: topicId, className: "border-b border-neutral-100" }, /* @__PURE__ */ import_react33.default.createElement(
         "button",
         {
           type: "button",
           onClick: () => handleToggle(topicId),
           className: "w-full flex items-center justify-between py-3 px-2 text-left cursor-pointer hover:bg-neutral-50 transition-colors"
         },
-        /* @__PURE__ */ import_react32.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react32.default.createElement("span", { className: "text-sm font-medium text-neutral-800 truncate" }, topic.short_title), questionText && /* @__PURE__ */ import_react32.default.createElement("span", { className: "text-xs text-neutral-400 mt-0.5" }, questionText), /* @__PURE__ */ import_react32.default.createElement("span", { className: "text-xs text-neutral-500 mt-0.5" }, label)),
-        /* @__PURE__ */ import_react32.default.createElement(
+        /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-sm font-medium text-neutral-800 truncate" }, topic.short_title), questionText && /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-xs text-neutral-400 mt-0.5" }, questionText), /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-xs text-neutral-500 mt-0.5" }, label)),
+        /* @__PURE__ */ import_react33.default.createElement(
           "svg",
           {
             width: "16",
@@ -6005,9 +6178,9 @@ function StanceAccordion({
               transition: "transform 0.2s ease"
             }
           },
-          /* @__PURE__ */ import_react32.default.createElement("polyline", { points: "9 18 15 12 9 6" })
+          /* @__PURE__ */ import_react33.default.createElement("polyline", { points: "9 18 15 12 9 6" })
         )
-      ), /* @__PURE__ */ import_react32.default.createElement(
+      ), /* @__PURE__ */ import_react33.default.createElement(
         "div",
         {
           style: {
@@ -6016,7 +6189,7 @@ function StanceAccordion({
             transition: "grid-template-rows 0.25s ease"
           }
         },
-        /* @__PURE__ */ import_react32.default.createElement("div", { style: { overflow: "hidden" } }, /* @__PURE__ */ import_react32.default.createElement("div", { className: "px-2 pb-4" }, isLoading && /* @__PURE__ */ import_react32.default.createElement("div", { className: "flex items-center py-3" }, /* @__PURE__ */ import_react32.default.createElement(
+        /* @__PURE__ */ import_react33.default.createElement("div", { style: { overflow: "hidden" } }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "px-2 pb-4" }, isLoading && /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-center py-3" }, /* @__PURE__ */ import_react33.default.createElement(
           "div",
           {
             style: {
@@ -6028,14 +6201,14 @@ function StanceAccordion({
               animation: "ev-spin 0.8s linear infinite"
             }
           }
-        )), !isLoading && cached && /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, cached.reasoning ? /* @__PURE__ */ import_react32.default.createElement(
+        )), !isLoading && cached && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, cached.reasoning ? /* @__PURE__ */ import_react33.default.createElement(
           "p",
           {
             className: "text-sm text-neutral-700 mb-3",
             style: { whiteSpace: "pre-wrap", lineHeight: 1.6 }
           },
           cached.reasoning
-        ) : null, cached.sources && cached.sources.length > 0 && /* @__PURE__ */ import_react32.default.createElement("div", { className: "mt-2" }, /* @__PURE__ */ import_react32.default.createElement("p", { className: "text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-1.5" }, "References"), /* @__PURE__ */ import_react32.default.createElement("ol", { className: "list-decimal list-inside space-y-1" }, cached.sources.map((src, i) => /* @__PURE__ */ import_react32.default.createElement("li", { key: i, className: "text-xs text-neutral-600" }, /* @__PURE__ */ import_react32.default.createElement(
+        ) : null, cached.sources && cached.sources.length > 0 && /* @__PURE__ */ import_react33.default.createElement("div", { className: "mt-2" }, /* @__PURE__ */ import_react33.default.createElement("p", { className: "text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-1.5" }, "References"), /* @__PURE__ */ import_react33.default.createElement("ol", { className: "list-decimal list-inside space-y-1" }, cached.sources.map((src, i) => /* @__PURE__ */ import_react33.default.createElement("li", { key: i, className: "text-xs text-neutral-600" }, /* @__PURE__ */ import_react33.default.createElement(
           "a",
           {
             href: src,
@@ -6043,9 +6216,9 @@ function StanceAccordion({
             rel: "noreferrer",
             className: "inline-flex items-center gap-1.5 hover:text-[#00657c] transition-colors"
           },
-          /* @__PURE__ */ import_react32.default.createElement(Favicon, { url: src }),
-          /* @__PURE__ */ import_react32.default.createElement("span", { className: "underline underline-offset-2" }, getDisplayUrl(src))
-        ))))), topicQuotes.length > 0 && /* @__PURE__ */ import_react32.default.createElement("div", { style: { marginTop: "12px" } }, /* @__PURE__ */ import_react32.default.createElement(
+          /* @__PURE__ */ import_react33.default.createElement(Favicon, { url: src }),
+          /* @__PURE__ */ import_react33.default.createElement("span", { className: "underline underline-offset-2" }, getDisplayUrl(src))
+        ))))), topicQuotes.length > 0 && /* @__PURE__ */ import_react33.default.createElement("div", { style: { marginTop: "12px" } }, /* @__PURE__ */ import_react33.default.createElement(
           "p",
           {
             style: {
@@ -6062,7 +6235,7 @@ function StanceAccordion({
           const verdict = verdictsByQuote ? verdictsByQuote[quote.id] : void 0;
           const borderColor = verdict === "agreed" ? "#0e7490" : verdict === "disagreed" ? "#b45309" : "#e2e8f0";
           const sourceName = quote.source_name || quote.sourceName;
-          return /* @__PURE__ */ import_react32.default.createElement(
+          return /* @__PURE__ */ import_react33.default.createElement(
             "div",
             {
               key: quote.id,
@@ -6074,7 +6247,7 @@ function StanceAccordion({
                 marginBottom: "8px"
               }
             },
-            /* @__PURE__ */ import_react32.default.createElement(
+            /* @__PURE__ */ import_react33.default.createElement(
               "p",
               {
                 style: {
@@ -6087,7 +6260,7 @@ function StanceAccordion({
               },
               quote.text
             ),
-            verdict === "agreed" && /* @__PURE__ */ import_react32.default.createElement(
+            verdict === "agreed" && /* @__PURE__ */ import_react33.default.createElement(
               "span",
               {
                 style: {
@@ -6104,10 +6277,10 @@ function StanceAccordion({
                   flexShrink: 0
                 }
               },
-              /* @__PURE__ */ import_react32.default.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react32.default.createElement("path", { d: "M5 13l4 4L19 7" })),
+              /* @__PURE__ */ import_react33.default.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react33.default.createElement("path", { d: "M5 13l4 4L19 7" })),
               "Agreed"
             ),
-            verdict === "disagreed" && /* @__PURE__ */ import_react32.default.createElement(
+            verdict === "disagreed" && /* @__PURE__ */ import_react33.default.createElement(
               "span",
               {
                 style: {
@@ -6124,10 +6297,10 @@ function StanceAccordion({
                   flexShrink: 0
                 }
               },
-              /* @__PURE__ */ import_react32.default.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react32.default.createElement("path", { d: "M6 18L18 6M6 6l12 12" })),
+              /* @__PURE__ */ import_react33.default.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react33.default.createElement("path", { d: "M6 18L18 6M6 6l12 12" })),
               "Disagreed"
             ),
-            sourceName && /* @__PURE__ */ import_react32.default.createElement(
+            sourceName && /* @__PURE__ */ import_react33.default.createElement(
               "a",
               {
                 href: quote.source_url || quote.sourceUrl,
@@ -6144,10 +6317,10 @@ function StanceAccordion({
               sourceName
             )
           );
-        })), !cached.reasoning && (!cached.sources || cached.sources.length === 0) && topicQuotes.length === 0 && /* @__PURE__ */ import_react32.default.createElement("p", { className: "text-sm text-neutral-400 italic py-2" }, "No detailed reasoning available for this topic."))))
+        })), !cached.reasoning && (!cached.sources || cached.sources.length === 0) && topicQuotes.length === 0 && /* @__PURE__ */ import_react33.default.createElement("p", { className: "text-sm text-neutral-400 italic py-2" }, "No detailed reasoning available for this topic."))))
       ));
     }),
-    hasToggle && /* @__PURE__ */ import_react32.default.createElement(
+    hasToggle && /* @__PURE__ */ import_react33.default.createElement(
       "button",
       {
         type: "button",
@@ -6214,6 +6387,7 @@ function StanceAccordion({
   spacing,
   textStyles,
   tierColors,
+  useEvContextPromotion,
   useMediaQuery,
   zIndex
 });