@verbumia/feedback 0.2.6 → 0.2.8

package/dist/native/index.cjs

@@ -80,11 +80,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;
@@ -156,9 +206,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: {
@@ -195,6 +254,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/native/panel.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var SafeAreaView;
@@ -314,11 +434,14 @@ var C = {
   emeraldSoft: "#34d399"
 };
 function FeedbackModal(props) {
-  const { client, visible, keys, namespace, onClose } = props;
-  const [consented, setConsented] = (0, import_react.useState)(client.hasConsented);
+  const { client, visible, 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);
@@ -416,14 +539,49 @@ function FeedbackModal(props) {
                   // to its intrinsic height and the panel left a large empty
                   // area below the last row (the second half of the
                   // SeedSower repro).
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { style: { flex: 1 }, children: !strings.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { color: C.dim }, children: busy ? "Loading\u2026" : "No strings to review on this view." }) : strings.map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    StringRow,
-                    {
-                      s,
-                      client
-                    },
-                    `${s.namespace}:${s.key}`
-                  )) })
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { style: { flex: 1 }, children: !strings.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { color: C.dim }, children: busy ? "Loading\u2026" : "No strings to review on this view." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_react_native.TouchableOpacity,
+                      {
+                        onPress: () => setShowSource((v) => !v),
+                        accessibilityLabel: t(client.language, "showOriginal"),
+                        style: {
+                          alignSelf: "flex-end",
+                          flexDirection: "row",
+                          alignItems: "center",
+                          marginBottom: 10,
+                          paddingVertical: 4,
+                          paddingHorizontal: 8,
+                          borderWidth: 1,
+                          borderColor: C.border,
+                          borderRadius: 6
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_react_native.Text,
+                            {
+                              style: {
+                                color: showSource ? C.emeraldSoft : C.dim,
+                                fontSize: 12,
+                                marginRight: 6
+                              },
+                              children: showSource ? "\u2611" : "\u2610"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { color: C.dim, fontSize: 12 }, children: t(client.language, "showOriginal") })
+                        ]
+                      }
+                    ),
+                    strings.map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      StringRow,
+                      {
+                        s,
+                        client,
+                        showSource
+                      },
+                      `${s.namespace}:${s.key}`
+                    ))
+                  ] }) })
                 )
               ] })
             }
@@ -434,11 +592,42 @@ function FeedbackModal(props) {
   );
 }
 function StringRow(props) {
-  const { s, client } = props;
+  const { s, client, showSource } = props;
   const [mine, setMine] = (0, import_react.useState)(s.my_rating);
   const [show, setShow] = (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 submit = 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);
+      setShow(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)(
     import_react_native.View,
     {
@@ -456,6 +645,19 @@ function StringRow(props) {
           " \xB7 ",
           s.key
         ] }),
+        showSourceRow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_native.Text,
+          {
+            accessibilityLabel: "source",
+            style: {
+              color: C.dim,
+              fontSize: 12,
+              fontStyle: "italic",
+              marginTop: 4
+            },
+            children: s.source_text
+          }
+        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { color: C.text, fontSize: 15, marginVertical: 6 }, children: s.value }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: { flexDirection: "row" }, children: [
           [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -491,7 +693,7 @@ function StringRow(props) {
             {
               onPress: () => setShow(!show),
               style: { marginLeft: "auto" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { color: C.emeraldSoft }, children: sent ? "Suggested \u2713" : "Suggest" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { color: C.emeraldSoft }, children: sent ? "Suggested \u2713" : submitLabel })
             }
           )
         ] }),
@@ -515,29 +717,18 @@ function StringRow(props) {
               }
             }
           ),
+          editError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { color: "#f87171", fontSize: 12, marginTop: 6 }, children: editError }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_react_native.TouchableOpacity,
             {
-              onPress: () => {
-                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);
-                setShow(false);
-                setText("");
-              },
+              onPress: () => void submit(),
               style: {
                 marginTop: 6,
                 backgroundColor: C.emerald,
                 borderRadius: 6,
                 padding: 10
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { color: "#03110c", fontWeight: "700", textAlign: "center" }, children: "Send suggestion" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { color: "#03110c", fontWeight: "700", textAlign: "center" }, children: submitLabel })
             }
           )
         ] }) : null
@@ -549,42 +740,73 @@ function StringRow(props) {
 // src/native/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 (!client) return null;
     const c = client;
+    const panelKeys = options.keys ?? state.snapshotKeys;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       FeedbackModal,
       {
         client: c,
-        visible: isOpen,
-        keys: options.keys,
+        visible: state.isOpen,
+        keys: panelKeys,
         namespace: options.namespace,
+        tos: options.tos ?? "modal",
         onClose: () => {
-          store.set(false);
+          store.setOpen(false);
           void c.flush();
         }
       }
@@ -594,24 +816,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;