@fewchurs/react 1.2.1 → 1.4.0

package/dist/index.js

@@ -85,7 +85,7 @@ module.exports = __toCommonJS(src_exports);
 var import_react = require("react");
 
 // src/client/version.ts
-var SDK_VERSION = "1.2.1";
+var SDK_VERSION = "1.4.0";
 
 // src/client/constants.ts
 var SDK_HEADER = `react/${SDK_VERSION}`;
@@ -307,7 +307,9 @@ function createFewchursClient(options = {}) {
           await delay(retryDelayMs);
           continue;
         }
-        return { ok: false, error: networkError(messageOf(error)) };
+        const failure2 = networkError(messageOf(error));
+        logError(failure2);
+        return { ok: false, error: failure2 };
       }
       if (response.ok) {
         const payload = await readJson(response);
@@ -318,7 +320,7 @@ function createFewchursClient(options = {}) {
         continue;
       }
       const failure = errorFromResponse(response.status, await readJson(response));
-      warnAboutKey(failure);
+      logError(failure);
       return { ok: false, error: failure };
     }
     return { ok: false, error: networkError() };
@@ -409,14 +411,15 @@ function delay(ms) {
 function messageOf(error) {
   return error instanceof Error ? error.message : "Network request failed.";
 }
-var warnedAboutKey = false;
-function warnAboutKey(error) {
-  if (error.code !== "invalid_key" || warnedAboutKey) return;
+var INVALID_KEY_HELP = "The API key was rejected. Check FEWCHURS_API_KEY (server) or the apiKey passed to FewchursProvider, and that the key is active in your Fewchurs dashboard.";
+var loggedErrors = /* @__PURE__ */ new Set();
+function logError(error) {
   if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
-  warnedAboutKey = true;
-  console.warn(
-    error.status === 403 ? `[fewchurs] ${error.message}` : "[fewchurs] The API key was rejected. Check FEWCHURS_API_KEY (server) or the apiKey passed to FewchursProvider, and that the key is active in your Fewchurs dashboard."
-  );
+  const isInvalidKey = error.code === "invalid_key" && error.status === 401;
+  const detail = isInvalidKey ? INVALID_KEY_HELP : error.message;
+  if (loggedErrors.has(detail)) return;
+  loggedErrors.add(detail);
+  console.warn(`[fewchurs] : ${detail}`);
 }
 
 // src/identity/deviceId.ts
@@ -846,6 +849,12 @@ var DEFAULT_LABELS = {
   loading: "Loading\u2026",
   loadMore: "Load more",
   retry: "Try again",
+  errorInvalidKeyTitle: "Invalid API key",
+  errorInvalidKeyDetail: "We can't connect to this board right now. The owner of this site needs to check its setup.",
+  errorWrongAppTitle: "Wrong platform",
+  errorWrongAppDetail: "This board isn't set up for this site or app yet. Its owner needs to add it in Fewchurs.",
+  errorTitle: "Something went wrong",
+  errorDetail: "We couldn't load the requests. Please try again.",
   comments: "Comments",
   commentPlaceholder: "Add a comment",
   postComment: "Post",
@@ -1321,6 +1330,12 @@ function Bar({ width, height }) {
 
 // src/components/FeatureList.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+function errorCopy(error, labels) {
+  if (error.code !== "invalid_key") {
+    return { title: labels.errorTitle, detail: labels.errorDetail };
+  }
+  return error.status === 403 ? { title: labels.errorWrongAppTitle, detail: labels.errorWrongAppDetail } : { title: labels.errorInvalidKeyTitle, detail: labels.errorInvalidKeyDetail };
+}
 function FeatureList() {
   const { initialFeatureId } = useBoard();
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
@@ -1350,17 +1365,11 @@ function Listing({ excludeId }) {
     return showDeclined || feature.status !== "declined";
   });
   if (error && visible.length === 0) {
+    const { title, detail } = errorCopy(error, labels);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx("fw-empty"), role: "alert", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: userMessage(error) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "button",
-        {
-          type: "button",
-          className: cx("fw-btn", "fw-btn--ghost"),
-          onClick: () => void refresh(),
-          children: labels.retry
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cx("fw-empty__title"), children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cx("fw-empty__detail"), children: detail }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void refresh(), children: labels.retry })
     ] });
   }
   if (isLoading && visible.length === 0) {
@@ -1774,16 +1783,22 @@ function FewchursBoardDialog({
 var import_react17 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime13 = require("react/jsx-runtime");
+function launcherClasses(floating) {
+  if (!floating) return "fw-launcher";
+  const side = floating === "left" ? " fw-launcher--left" : "";
+  return `fw-launcher fw-launcher--floating${side}`;
+}
 function FewchursButton({
   children = "Feedback",
   className,
   style,
   ariaLabel,
+  floating = false,
   ...board
 }) {
   const [open, setOpen] = (0, import_react17.useState)(false);
   const close = (0, import_react17.useCallback)(() => setOpen(false), []);
-  const classes = [board.unstyled ? "" : "fw-launcher", className].filter(Boolean).join(" ");
+  const classes = [board.unstyled ? "" : launcherClasses(floating), className].filter(Boolean).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",