@verbumia/feedback 0.2.6 → 0.2.8

package/dist/react/index.cjs

@@ -81,11 +81,61 @@ var FeedbackClient = class {
   get hasConsented() {
     return this.tokens !== null;
   }
+  /** Alias of `hasConsented` exposed under the 0.2.7 naming used by the
+   *  `controller.hasAcceptedTos` getter (the SDK's built-in modal and a
+   *  host's external ToS page share the same persisted token bundle, so
+   *  both flip this boolean once a session is bootstrapped). */
+  get hasAcceptedTos() {
+    return this.tokens !== null;
+  }
   /** Server-minted sessionId / grouping_key (from the token bundle).
    * Available only after `acceptTos()`; never client-generated. */
   get sessionId() {
     return this.tokens?.grouping_key;
   }
+  /**
+   * 0.2.7 — `GET /v1/projects/{projectId}/feedback-addon/state`.
+   *
+   * Auth selection (matches backend's dual-acceptance after task 836's
+   * follow-up PR — see CONTRACT note in the response type):
+   *   - If `cfg.apiKey` is set → `Authorization: ApiKey <key>` (so the
+   *     plugin can fetch state at `setup()` time, before the user has
+   *     accepted ToS).
+   *   - Else if a user-session bundle exists → `Authorization: Bearer
+   *     <access_token>` (the deferred-after-acceptTos path).
+   *   - Else → throw `FeedbackError("addon state requires apiKey or
+   *     acceptTos")`. The plugin's setup catches and surfaces a
+   *     console.warn the first time, then re-attempts on the
+   *     bundle-mint that follows `acceptTos()`.
+   *
+   * Best-effort: a transport error returns `null` instead of throwing,
+   * so the controller's `isActive` falls back to whatever was last
+   * known (or its initial value) without flipping the host's CTA into
+   * an inconsistent state on a transient blip.
+   */
+  async getAddonState() {
+    let auth;
+    if (this.cfg.apiKey) {
+      auth = `ApiKey ${this.cfg.apiKey}`;
+    } else if (this.tokens) {
+      auth = `Bearer ${this.tokens.access_token}`;
+    } else {
+      throw new FeedbackError(
+        "addon state requires apiKey or acceptTos"
+      );
+    }
+    const url = `${this.base()}/v1/projects/${this.cfg.projectId}/feedback-addon/state`;
+    try {
+      const res = await this.fetchImpl(url, {
+        method: "GET",
+        headers: { Authorization: auth }
+      });
+      if (!res.ok) return null;
+      return await res.json();
+    } catch {
+      return null;
+    }
+  }
   /** BCP-47 language the widget is rating strings in. */
   get language() {
     return this.cfg.language;
@@ -157,9 +207,18 @@ var FeedbackClient = class {
     }
     this.tokens = await res.json();
   }
-  /** Authenticated fetch with a single transparent refresh-on-401 retry. */
+  /** Authenticated fetch with a single transparent refresh-on-401 retry.
+   *  When `cfg.autoAcceptTos === false` (the plugin's `tos: "skip"` opt-in
+   *  / 0.2.7) and no token has been minted yet, throws a `not consented`
+   *  error instead of silently calling `acceptTos()` — the host promises
+   *  to handle consent externally via `controller.acceptTos()`. */
   async authed(path, init, retry = true) {
-    if (!this.tokens) await this.acceptTos();
+    if (!this.tokens) {
+      if (this.cfg.autoAcceptTos === false) {
+        throw new FeedbackError("not consented");
+      }
+      await this.acceptTos();
+    }
     const res = await this.fetchImpl(`${this.base()}${path}`, {
       ...init,
       headers: {
@@ -196,6 +255,31 @@ var FeedbackClient = class {
   suggest(payload) {
     this.enqueue({ kind: "suggestion", payload });
   }
+  /**
+   * 0.2.8 — `PATCH /v1/feedback/suggestions/{id}` (backend task 847,
+   * deploy `45190c8`). Used by the panel's edit-mode editor when the
+   * end-user already has a pending suggestion for a string (the
+   * `FeedbackString.my_suggestion.id` from a prior submit). Submits
+   * synchronously rather than going through the rating/suggestion
+   * batch queue — the host triggered an explicit edit, not a passive
+   * rating, so we want the round-trip to surface before the panel
+   * closes. Best-effort failures bubble; the caller catches and
+   * shows an error row in the panel.
+   *
+   * Wire body: `{ text: string }` (backend probe confirmed). NOT the
+   * legacy `{ suggested_text }` of the batched POST path.
+   */
+  async editSuggestion(id, text) {
+    if (!id) throw new FeedbackError("editSuggestion: id is required");
+    const trimmed = (text ?? "").trim();
+    if (!trimmed) throw new FeedbackError("editSuggestion: text is required");
+    const res = await this.authed(`/v1/feedback/suggestions/${encodeURIComponent(id)}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text: trimmed })
+    });
+    if (!res.ok) throw await this.problem(res, "failed to update suggestion");
+  }
   enqueue(item) {
     this.queue.push(item);
     if (this.queue.length >= this.cfg.maxBatch) {
@@ -291,6 +375,42 @@ function dedupe(keys) {
   return out;
 }
 
+// src/core/locales.ts
+var MESSAGES = {
+  en: {
+    showOriginal: "Show original",
+    submitSuggestion: "Submit a suggestion",
+    updateMySuggestion: "Update my suggestion"
+  },
+  fr: {
+    showOriginal: "Voir l'original",
+    submitSuggestion: "Soumettre une suggestion",
+    updateMySuggestion: "Mettre \xE0 jour ma suggestion"
+  },
+  es: {
+    showOriginal: "Ver el original",
+    submitSuggestion: "Enviar una sugerencia",
+    updateMySuggestion: "Actualizar mi sugerencia"
+  },
+  de: {
+    showOriginal: "Original anzeigen",
+    submitSuggestion: "Vorschlag einreichen",
+    updateMySuggestion: "Meinen Vorschlag aktualisieren"
+  }
+};
+function t(locale, key) {
+  if (locale) {
+    const exact = MESSAGES[locale];
+    if (exact) return exact[key];
+    const base = locale.split("-")[0];
+    if (base) {
+      const baseMsgs = MESSAGES[base];
+      if (baseMsgs) return baseMsgs[key];
+    }
+  }
+  return MESSAGES.en[key];
+}
+
 // src/react/panel.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var C = {
@@ -303,11 +423,14 @@ var C = {
   emeraldSoft: "#34d399"
 };
 function FeedbackPanel(props) {
-  const { client, keys, namespace, onClose } = props;
-  const [consented, setConsented] = (0, import_react.useState)(client.hasConsented);
+  const { client, keys, namespace, tos = "modal", onClose } = props;
+  const [consented, setConsented] = (0, import_react.useState)(
+    tos === "skip" ? true : client.hasConsented
+  );
   const [busy, setBusy] = (0, import_react.useState)(false);
   const [error, setError] = (0, import_react.useState)(null);
   const [strings, setStrings] = (0, import_react.useState)([]);
+  const [showSource, setShowSource] = (0, import_react.useState)(false);
   const loadStrings = (0, import_react.useCallback)(async () => {
     setBusy(true);
     setError(null);
@@ -414,7 +537,52 @@ function FeedbackPanel(props) {
                   busy,
                   onAccept: accept
                 }
-              ) : busy && !strings.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.dim }, children: "Loading\u2026" }) : !strings.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.dim }, children: "No strings to review on this view." }) : strings.map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StringRow, { s, client }, `${s.namespace}:${s.key}`))
+              ) : busy && !strings.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.dim }, children: "Loading\u2026" }) : !strings.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.dim }, children: "No strings to review on this view." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "flex-end",
+                      marginBottom: 10
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "label",
+                      {
+                        style: {
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 8,
+                          color: C.dim,
+                          fontSize: 12,
+                          cursor: "pointer"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "input",
+                            {
+                              type: "checkbox",
+                              checked: showSource,
+                              onChange: (e) => setShowSource(e.target.checked)
+                            }
+                          ),
+                          t(client.language, "showOriginal")
+                        ]
+                      }
+                    )
+                  }
+                ),
+                strings.map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  StringRow,
+                  {
+                    s,
+                    client,
+                    showSource
+                  },
+                  `${s.namespace}:${s.key}`
+                ))
+              ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "footer",
@@ -461,11 +629,13 @@ function ConsentStep(props) {
   ] });
 }
 function StringRow(props) {
-  const { s, client } = props;
+  const { s, client, showSource } = props;
   const [mine, setMine] = (0, import_react.useState)(s.my_rating);
   const [showSuggest, setShowSuggest] = (0, import_react.useState)(false);
-  const [text, setText] = (0, import_react.useState)("");
+  const mySuggestionId = s.my_suggestion ? s.my_suggestion.id : null;
+  const [text, setText] = (0, import_react.useState)(s.my_suggestion?.text ?? "");
   const [sent, setSent] = (0, import_react.useState)(false);
+  const [editError, setEditError] = (0, import_react.useState)(null);
   const rate = (stars) => {
     setMine(stars);
     client.rate({
@@ -476,19 +646,35 @@ function StringRow(props) {
       stars
     });
   };
-  const submitSuggestion = () => {
-    if (!text.trim()) return;
-    client.suggest({
-      namespace: s.namespace,
-      key: s.key,
-      language: client.language,
-      translation_hash: s.translation_hash,
-      suggested_text: text.trim()
-    });
-    setSent(true);
-    setShowSuggest(false);
-    setText("");
+  const submitSuggestion = async () => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    setEditError(null);
+    try {
+      if (mySuggestionId) {
+        await client.editSuggestion(mySuggestionId, trimmed);
+      } else {
+        client.suggest({
+          namespace: s.namespace,
+          key: s.key,
+          language: client.language,
+          translation_hash: s.translation_hash,
+          suggested_text: trimmed
+        });
+      }
+      setSent(true);
+      setShowSuggest(false);
+    } catch (e) {
+      setEditError(
+        e instanceof Error ? e.message : "Could not update the suggestion"
+      );
+    }
   };
+  const showSourceRow = showSource && s.source_locale !== client.language;
+  const submitLabel = t(
+    client.language,
+    mySuggestionId ? "updateMySuggestion" : "submitSuggestion"
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -505,6 +691,19 @@ function StringRow(props) {
           " \xB7 ",
           s.key
         ] }),
+        showSourceRow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-testid": "source-row",
+            style: {
+              margin: "4px 0 2px",
+              fontSize: 12,
+              color: C.dim,
+              fontStyle: "italic"
+            },
+            children: s.source_text
+          }
+        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { margin: "6px 0 10px", fontSize: 15 }, children: s.value }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 4 }, children: [
           [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -539,7 +738,7 @@ function StringRow(props) {
                 fontSize: 12,
                 cursor: "pointer"
               },
-              children: sent ? "Suggested \u2713" : "Suggest"
+              children: sent ? "Suggested \u2713" : submitLabel
             }
           )
         ] }),
@@ -563,11 +762,12 @@ function StringRow(props) {
               }
             }
           ),
+          editError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: "#f87171", fontSize: 12, marginTop: 6 }, children: editError }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "button",
             {
               type: "button",
-              onClick: submitSuggestion,
+              onClick: () => void submitSuggestion(),
               style: {
                 marginTop: 6,
                 background: C.emerald,
@@ -578,7 +778,7 @@ function StringRow(props) {
                 fontWeight: 700,
                 cursor: "pointer"
               },
-              children: "Send suggestion"
+              children: submitLabel
             }
           )
         ] })
@@ -590,42 +790,73 @@ function StringRow(props) {
 // src/react/plugin.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function makeStore() {
-  let open = false;
+  let state = { isOpen: false, snapshotKeys: void 0 };
   const listeners = /* @__PURE__ */ new Set();
   return {
-    isOpen: () => open,
-    set(v) {
-      if (open !== v) {
-        open = v;
-        listeners.forEach((l) => l());
+    getState: () => state,
+    setOpen(open, snapshotKeys) {
+      const next = {
+        isOpen: open,
+        snapshotKeys: open ? snapshotKeys : void 0
+      };
+      if (state.isOpen === next.isOpen && state.snapshotKeys === next.snapshotKeys) {
+        return;
       }
+      state = next;
+      listeners.forEach((l) => l());
     },
     subscribe(l) {
       listeners.add(l);
-      return () => listeners.delete(l);
+      return () => {
+        listeners.delete(l);
+      };
     }
   };
 }
+async function captureCurrentViewSnapshot(i18next) {
+  const reg = globalThis.__verbumia_key_registry__;
+  if (!reg) return [];
+  const lng = i18next?.language;
+  const change = i18next?.changeLanguage;
+  if (typeof change === "function" && typeof lng === "string" && lng) {
+    reg.reset?.();
+    try {
+      await change(lng);
+    } catch {
+    }
+    await new Promise((r) => {
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(() => r());
+      } else {
+        setTimeout(() => r(), 16);
+      }
+    });
+    return reg.snapshot();
+  }
+  return reg.snapshot();
+}
 function feedbackPlugin(options) {
   const store = makeStore();
   let client = null;
   function Outlet() {
-    const isOpen = (0, import_react2.useSyncExternalStore)(
+    const state = (0, import_react2.useSyncExternalStore)(
       store.subscribe,
-      store.isOpen,
-      store.isOpen
+      store.getState,
+      store.getState
     );
-    if (!isOpen || !client || typeof document === "undefined") return null;
+    if (!state.isOpen || !client || typeof document === "undefined") return null;
     const c = client;
+    const panelKeys = options.keys ?? state.snapshotKeys;
     return (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         FeedbackPanel,
         {
           client: c,
-          keys: options.keys,
+          keys: panelKeys,
           namespace: options.namespace,
+          tos: options.tos ?? "modal",
           onClose: () => {
-            store.set(false);
+            store.setOpen(false);
             void c.flush();
           }
         }
@@ -637,24 +868,71 @@ function feedbackPlugin(options) {
     name: "@verbumia/feedback",
     setup(ctx) {
       const initialLanguage = options.language ?? ctx.i18n?.language ?? ctx.config.defaultLocale;
+      const tos = options.tos ?? "modal";
       client = new FeedbackClient({
         apiBase: options.apiBase ?? ctx.config.apiBase ?? "https://api.verbumia.dev",
         projectId: options.projectId ?? ctx.config.projectUuid,
         language: initialLanguage,
         endUserId: options.endUserId,
-        fetchImpl: options.fetchImpl
+        fetchImpl: options.fetchImpl,
+        apiKey: options.apiKey,
+        autoAcceptTos: tos !== "skip"
       });
+      const clientRef = client;
+      let addonState = null;
+      const cta = options.cta ?? "auto";
+      const scope = options.scope ?? "current-view";
+      const ctxI18next = ctx.i18n?.i18next;
+      const refreshState = async () => {
+        try {
+          const next = await clientRef.getAddonState();
+          if (next !== null) addonState = next;
+        } catch {
+        }
+      };
+      if (options.apiKey) void refreshState();
       let langUnsub;
       if (typeof ctx.onLanguageChange === "function") {
-        langUnsub = ctx.onLanguageChange((lng) => client?.setLanguage(lng));
+        langUnsub = ctx.onLanguageChange((lng) => {
+          clientRef.setLanguage(lng);
+          void refreshState();
+        });
       }
       const controller = {
-        open: () => store.set(true),
+        open: async () => {
+          if (scope === "current-view") {
+            const snapshot = await captureCurrentViewSnapshot(ctxI18next);
+            store.setOpen(true, snapshot);
+            return;
+          }
+          store.setOpen(true);
+        },
         close: () => {
-          store.set(false);
-          void client?.flush();
+          store.setOpen(false);
+          void clientRef?.flush();
+        },
+        client: clientRef,
+        get tosVersion() {
+          return clientRef.tosVersion;
+        },
+        get hasAcceptedTos() {
+          return clientRef.hasAcceptedTos;
+        },
+        acceptTos: async () => {
+          await clientRef.acceptTos();
+          if (!options.apiKey) await refreshState();
         },
-        client
+        get isActive() {
+          if (cta === "show") return true;
+          if (cta === "hide") return false;
+          return addonState ? addonState.isActive : null;
+        },
+        get enabledLanguages() {
+          return addonState ? addonState.enabledLanguages : null;
+        },
+        get sku() {
+          return addonState ? addonState.sku : null;
+        }
       };
       options.onReady?.(controller);
       if (options.controllerRef) options.controllerRef.current = controller;