@fewchurs/react 1.3.0 → 1.5.0

package/dist/index.js

@@ -38,6 +38,7 @@ __export(src_exports, {
   FewchursProvider: () => FewchursProvider,
   FollowForm: () => FollowForm,
   LIMITS: () => LIMITS,
+  NOT_CONFIGURED_MESSAGE: () => NOT_CONFIGURED_MESSAGE,
   ROADMAP_STATUSES: () => ROADMAP_STATUSES,
   SDK_HEADER: () => SDK_HEADER,
   SDK_VERSION: () => SDK_VERSION,
@@ -85,7 +86,7 @@ module.exports = __toCommonJS(src_exports);
 var import_react = require("react");
 
 // src/client/version.ts
-var SDK_VERSION = "1.3.0";
+var SDK_VERSION = "1.5.0";
 
 // src/client/constants.ts
 var SDK_HEADER = `react/${SDK_VERSION}`;
@@ -103,17 +104,28 @@ var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var ROADMAP_STATUSES = ["planned", "in_progress", "done"];
 
 // src/client/errors.ts
+var NOT_CONFIGURED_MESSAGE = "Fewchurs is not configured.";
 var USER_MESSAGES = {
-  invalid_key: "Feedback is unavailable right now.",
-  validation_failed: "Please check what you entered and try again.",
-  rate_limited: "You have reached today's limit. Try again tomorrow.",
-  not_found: "That request no longer exists.",
-  limit_reached: "Feedback is unavailable right now.",
-  server: "Something went wrong. Please try again.",
-  network: "Could not reach the server. Check your connection."
+  invalid_key: "Invalid API key. Check the key in your Fewchurs dashboard.",
+  validation_failed: "Invalid input.",
+  rate_limited: "You've reached today's limit. Try again tomorrow.",
+  not_found: "This request no longer exists.",
+  limit_reached: "This board isn't accepting requests right now.",
+  server: "Something went wrong. Try again.",
+  network: "You're offline."
 };
+function isWrongApp(error) {
+  return error.code === "invalid_key" && error.status === 403;
+}
+function isNotConfigured(error) {
+  return error.code === "server" && error.message === NOT_CONFIGURED_MESSAGE;
+}
+function notConfiguredError() {
+  return { code: "server", status: 500, message: NOT_CONFIGURED_MESSAGE };
+}
 function userMessage(error) {
   if (error.code === "validation_failed" && error.message) return error.message;
+  if (isWrongApp(error) && error.message) return error.message;
   return USER_MESSAGES[error.code];
 }
 function networkError(message = "Network request failed.") {
@@ -124,17 +136,17 @@ function validationError(message) {
 }
 function errorFromResponse(status, body) {
   const code = body?.error?.code;
-  const message = body?.error?.message ?? `Request failed (${status}).`;
+  const serverMessage = body?.error?.message;
+  const message = serverMessage ?? `Request failed (${status}).`;
   switch (code) {
     case "invalid_key":
       return { code: "invalid_key", status: 401, message };
     case "wrong_app":
       return { code: "invalid_key", status: 403, message };
-    // missing_device_id is a client mistake the caller fixes the same way a bad field is fixed,
-    // so it collapses into validation_failed rather than widening the public union.
     case "missing_device_id":
+      return { code: "server", status: 400, message };
     case "validation_failed":
-      return { code: "validation_failed", status: 400, message };
+      return { code: "validation_failed", status: 400, message: serverMessage ?? "Invalid input." };
     case "rate_limited":
       return { code: "rate_limited", status: 429, message };
     case "not_found":
@@ -228,11 +240,8 @@ function normalizeVote(value) {
 // src/client/validate.ts
 function validateFeatureInput(input) {
   const title = input.title.trim();
-  if (title.length < LIMITS.titleMin) {
-    return validationError(`Title must be at least ${LIMITS.titleMin} characters.`);
-  }
-  if (title.length > LIMITS.titleMax) {
-    return validationError(`Title must be at most ${LIMITS.titleMax} characters.`);
+  if (title.length < LIMITS.titleMin || title.length > LIMITS.titleMax) {
+    return validationError(`Title must be ${LIMITS.titleMin}\u2013${LIMITS.titleMax} characters.`);
   }
   if ((input.description ?? "").trim().length > LIMITS.descriptionMax) {
     return validationError(`Description must be at most ${LIMITS.descriptionMax} characters.`);
@@ -244,9 +253,8 @@ function validateFeatureInput(input) {
 }
 function validateCommentInput(input) {
   const text = input.text.trim();
-  if (text.length < LIMITS.commentMin) return validationError("Write a comment first.");
-  if (text.length > LIMITS.commentMax) {
-    return validationError(`Comment must be at most ${LIMITS.commentMax} characters.`);
+  if (text.length < LIMITS.commentMin || text.length > LIMITS.commentMax) {
+    return validationError(`Comment must be ${LIMITS.commentMin}\u2013${LIMITS.commentMax} characters.`);
   }
   if ((input.authorName ?? "").trim().length > LIMITS.authorNameMax) {
     return validationError(`Name must be at most ${LIMITS.authorNameMax} characters.`);
@@ -266,6 +274,7 @@ function createFewchursClient(options = {}) {
   const doFetch = options.fetch ?? globalThis.fetch?.bind(globalThis);
   const retries = options.retries ?? 1;
   const retryDelayMs = options.retryDelayMs ?? 250;
+  if (options.apiKey && !options.apiKey.startsWith("fr_")) logOnce(BAD_KEY_PREFIX);
   function getDeviceId() {
     return typeof options.deviceId === "function" ? options.deviceId() : options.deviceId ?? null;
   }
@@ -292,6 +301,11 @@ function createFewchursClient(options = {}) {
   }
   async function request(path, map, { method = "GET", body, query, signal } = {}) {
     if (!doFetch) return { ok: false, error: networkError("No fetch implementation available.") };
+    if (!options.apiKey && options.baseUrl === void 0) {
+      const failure = notConfiguredError();
+      logError(failure);
+      return { ok: false, error: failure };
+    }
     const target = url(path, query);
     const init = { method, headers: headers(body !== void 0) };
     if (body !== void 0) init.body = JSON.stringify(body);
@@ -307,7 +321,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 +334,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 +425,20 @@ 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 = "Fewchurs rejected the API key. Check the key in your dashboard (Apps \u2192 API keys).";
+var NOT_CONFIGURED_HELP = "Fewchurs is not configured. Pass apiKey to FewchursProvider, or set FEWCHURS_API_KEY on your server.";
+var BAD_KEY_PREFIX = 'The Fewchurs API key should start with "fr_". Copy it from your dashboard.';
+var loggedErrors = /* @__PURE__ */ new Set();
+function logOnce(detail) {
   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."
-  );
+  if (loggedErrors.has(detail)) return;
+  loggedErrors.add(detail);
+  console.warn(`[fewchurs] : ${detail}`);
+}
+function logError(error) {
+  if (isNotConfigured(error)) return logOnce(NOT_CONFIGURED_HELP);
+  const isInvalidKey = error.code === "invalid_key" && error.status === 401;
+  logOnce(isInvalidKey ? INVALID_KEY_HELP : error.message);
 }
 
 // src/identity/deviceId.ts
@@ -846,6 +868,20 @@ var DEFAULT_LABELS = {
   loading: "Loading\u2026",
   loadMore: "Load more",
   retry: "Try again",
+  errorInvalidKeyTitle: "Invalid API key",
+  errorInvalidKeyDetail: "Copy the key from your Fewchurs dashboard (Apps \u2192 API keys) and pass it to FewchursProvider, or set FEWCHURS_API_KEY on your server.",
+  errorWrongAppTitle: "Invalid API key",
+  errorWrongAppDetail: "",
+  errorTitle: "Couldn't load requests",
+  errorDetail: "Something went wrong. Try again.",
+  errorOfflineTitle: "You're offline",
+  errorOfflineDetail: "Check your connection and try again.",
+  errorNotSetUpTitle: "Fewchurs isn't set up",
+  errorNotSetUpDetail: "Pass apiKey to FewchursProvider, or set FEWCHURS_API_KEY on your server.",
+  errorLoadMore: "Couldn't load more.",
+  errorComments: "Couldn't load comments.",
+  fieldTitleTooShort: "At least 3 characters.",
+  fieldEmailInvalid: "Enter a valid email address.",
   comments: "Comments",
   commentPlaceholder: "Add a comment",
   postComment: "Post",
@@ -1044,6 +1080,7 @@ function useComments(featureId, { enabled = true } = {}) {
     store.ensureComments(featureId);
   }, [store, featureId, enabled, isReady]);
   const loadMore = (0, import_react9.useCallback)(() => store.loadMoreComments(featureId), [store, featureId]);
+  const refresh = (0, import_react9.useCallback)(() => store.refreshComments(featureId), [store, featureId]);
   const add = (0, import_react9.useCallback)(
     async (text, authorName) => {
       setIsSubmitting(true);
@@ -1064,6 +1101,7 @@ function useComments(featureId, { enabled = true } = {}) {
     submitError,
     hasMore: comments.cursor !== null,
     loadMore,
+    refresh,
     add
   };
 }
@@ -1083,10 +1121,15 @@ function formatDate(iso) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function CommentList({ featureId }) {
   const { labels, cx } = useBoard();
-  const { comments, isLoading, isLoadingMore, error, hasMore, loadMore } = useComments(featureId);
+  const { comments, isLoading, isLoadingMore, error, hasMore, loadMore, refresh } = useComments(featureId);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("fw-comments"), children: [
     isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-muted"), children: labels.loading }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) }),
+    error && comments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("fw-empty", "fw-empty--compact"), role: "alert", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-empty__title"), children: labels.errorComments }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-empty__detail"), children: isNotConfigured(error) ? labels.errorNotSetUpTitle : userMessage(error) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void refresh(), children: labels.retry })
+    ] }),
+    error && comments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) }),
     !isLoading && !error && comments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-muted"), children: labels.noComments }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: cx("fw-comment-list"), children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: cx("fw-comment"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("fw-comment__author"), children: comment.authorName }),
@@ -1157,7 +1200,7 @@ function CommentForm({ featureId }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isSubmitting, children: labels.postComment }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isSubmitting || !text.trim(), children: labels.postComment }),
         submitError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(submitError) })
       ]
     }
@@ -1173,20 +1216,24 @@ function FollowForm({ feature }) {
   const [email, setEmail] = (0, import_react11.useState)(userEmail ?? "");
   const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
   if (isFollowing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "button",
-      {
-        type: "button",
-        className: cx("fw-link"),
-        disabled: isPending,
-        onClick: () => void unfollow(),
-        children: labels.following
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: cx("fw-link"),
+          disabled: isPending,
+          onClick: () => void unfollow(),
+          children: labels.following
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) })
+    ] });
   }
   if (!isOpen) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: cx("fw-link"), onClick: () => setIsOpen(true), children: labels.follow });
   }
+  const isEmailValid = EMAIL_PATTERN.test(email.trim());
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "form",
     {
@@ -1210,7 +1257,8 @@ function FollowForm({ feature }) {
             required: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isPending, children: labels.follow }),
+        email !== "" && !isEmailValid && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: cx("fw-error"), children: labels.fieldEmailInvalid }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isPending || !isEmailValid, children: labels.follow }),
         error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) })
       ]
     }
@@ -1253,7 +1301,7 @@ function FeatureCard({
   defaultCommentsOpen = false
 }) {
   const { labels, allowComments, cx } = useBoard();
-  const { isPending, toggle } = useVote(feature.id);
+  const { isPending, toggle, error: voteError } = useVote(feature.id);
   const [showComments, setShowComments] = (0, import_react12.useState)(defaultCommentsOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { className: cx("fw-card"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VoteButton, { feature, isPending, onToggle: () => void toggle() }),
@@ -1281,6 +1329,7 @@ function FeatureCard({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FollowForm, { feature })
       ] }),
+      voteError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(voteError) }),
       allowComments && showComments && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: `fw-comments-${feature.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CommentList, { featureId: feature.id }) })
     ] })
   ] });
@@ -1321,6 +1370,27 @@ function Bar({ width, height }) {
 
 // src/components/FeatureList.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+function errorCopy(error, labels) {
+  if (isNotConfigured(error)) {
+    return { title: labels.errorNotSetUpTitle, detail: labels.errorNotSetUpDetail };
+  }
+  if (error.code === "network") {
+    return { title: labels.errorOfflineTitle, detail: labels.errorOfflineDetail };
+  }
+  if (isWrongApp(error)) {
+    return {
+      title: labels.errorWrongAppTitle,
+      detail: labels.errorWrongAppDetail || userMessage(error)
+    };
+  }
+  if (error.code === "invalid_key") {
+    return { title: labels.errorInvalidKeyTitle, detail: labels.errorInvalidKeyDetail };
+  }
+  return {
+    title: labels.errorTitle,
+    detail: error.code === "server" ? labels.errorDetail : userMessage(error)
+  };
+}
 function FeatureList() {
   const { initialFeatureId } = useBoard();
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
@@ -1330,8 +1400,11 @@ function FeatureList() {
 }
 function PinnedFeature({ featureId }) {
   const { cx } = useBoard();
-  const { feature, isLoading } = useFeature(featureId);
+  const { feature, isLoading, error } = useFeature(featureId);
   if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FeatureListSkeleton, { rows: 1 });
+  if (!feature && error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cx("fw-error", "fw-pinned"), role: "alert", children: userMessage(error) });
+  }
   if (!feature) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cx("fw-pinned"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: cx("fw-list"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FeatureCard, { feature, defaultCommentsOpen: true }) }) });
 }
@@ -1350,17 +1423,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 }),
+      !isNotConfigured(error) && /* @__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) {
@@ -1375,7 +1442,11 @@ function Listing({ excludeId }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     isRoadmap ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RoadmapColumns, { features: visible }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Rows2, { features: visible }),
-    hasMore && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cx("fw-pagination"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    hasMore && error && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx("fw-pagination"), role: "alert", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: labels.errorLoadMore }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void loadMore(), children: labels.retry })
+    ] }),
+    hasMore && !error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cx("fw-pagination"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         type: "button",
@@ -1456,6 +1527,10 @@ function SubmitForm() {
   const [title, setTitle] = (0, import_react14.useState)("");
   const [description, setDescription] = (0, import_react14.useState)("");
   const [email, setEmail] = (0, import_react14.useState)(userEmail ?? "");
+  const isTitleValid = title.trim().length >= LIMITS.titleMin;
+  const isEmailInvalid = emailField !== "off" && email !== "" && !EMAIL_PATTERN.test(email.trim());
+  const isEmailMissing = emailField === "required" && !email.trim();
+  const canSubmit = isTitleValid && !isEmailInvalid && !isEmailMissing;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "form",
     {
@@ -1489,7 +1564,15 @@ function SubmitForm() {
               onChange: (event) => setTitle(event.target.value),
               required: true
             }
-          )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx("fw-field__foot"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cx("fw-error"), children: title !== "" && !isTitleValid ? labels.fieldTitleTooShort : "" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: cx("fw-muted"), children: [
+              title.length,
+              "/",
+              LIMITS.titleMax
+            ] })
+          ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx("fw-field"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: cx("fw-label"), htmlFor: "fw-description", children: labels.fieldDescription }),
@@ -1503,7 +1586,15 @@ function SubmitForm() {
               placeholder: labels.fieldDescriptionPlaceholder,
               onChange: (event) => setDescription(event.target.value)
             }
-          )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx("fw-field__foot"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: cx("fw-muted"), children: [
+              description.length,
+              "/",
+              LIMITS.descriptionMax
+            ] })
+          ] })
         ] }),
         emailField !== "off" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx("fw-field"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: cx("fw-label"), htmlFor: "fw-email", children: labels.fieldEmail }),
@@ -1520,11 +1611,11 @@ function SubmitForm() {
               required: emailField === "required"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { id: "fw-email-hint", className: cx("fw-muted"), children: labels.fieldEmailHint })
+          isEmailInvalid ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { id: "fw-email-hint", className: cx("fw-error"), children: labels.fieldEmailInvalid }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { id: "fw-email-hint", className: cx("fw-muted"), children: labels.fieldEmailHint })
         ] }),
         error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx("fw-form__actions"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isPending, children: isPending ? labels.submitting : labels.submit }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isPending || !canSubmit, children: isPending ? labels.submitting : labels.submit }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
@@ -1837,6 +1928,7 @@ function FewchursButton({
   FewchursProvider,
   FollowForm,
   LIMITS,
+  NOT_CONFIGURED_MESSAGE,
   ROADMAP_STATUSES,
   SDK_HEADER,
   SDK_VERSION,