@fewchurs/react 1.2.1 → 1.4.0

package/dist/index.mjs

@@ -4,7 +4,7 @@
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from "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}`;
@@ -226,7 +226,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);
@@ -237,7 +239,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() };
@@ -328,14 +330,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
@@ -765,6 +768,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",
@@ -1240,6 +1249,12 @@ function Bar({ width, height }) {
 
 // src/components/FeatureList.tsx
 import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "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__ */ jsxs6(Fragment, { children: [
@@ -1269,17 +1284,11 @@ function Listing({ excludeId }) {
     return showDeclined || feature.status !== "declined";
   });
   if (error && visible.length === 0) {
+    const { title, detail } = errorCopy(error, labels);
     return /* @__PURE__ */ jsxs6("div", { className: cx("fw-empty"), role: "alert", children: [
-      /* @__PURE__ */ jsx9("p", { children: userMessage(error) }),
-      /* @__PURE__ */ jsx9(
-        "button",
-        {
-          type: "button",
-          className: cx("fw-btn", "fw-btn--ghost"),
-          onClick: () => void refresh(),
-          children: labels.retry
-        }
-      )
+      /* @__PURE__ */ jsx9("p", { className: cx("fw-empty__title"), children: title }),
+      /* @__PURE__ */ jsx9("p", { className: cx("fw-empty__detail"), children: detail }),
+      /* @__PURE__ */ jsx9("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void refresh(), children: labels.retry })
     ] });
   }
   if (isLoading && visible.length === 0) {
@@ -1693,16 +1702,22 @@ function FewchursBoardDialog({
 import { useCallback as useCallback7, useState as useState11 } from "react";
 import { createPortal } from "react-dom";
 import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "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] = useState11(false);
   const close = useCallback7(() => setOpen(false), []);
-  const classes = [board.unstyled ? "" : "fw-launcher", className].filter(Boolean).join(" ");
+  const classes = [board.unstyled ? "" : launcherClasses(floating), className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs10(Fragment3, { children: [
     /* @__PURE__ */ jsx13(
       "button",