@thecb/components 11.3.1 → 11.3.2-beta.0

package/dist/index.d.ts

@@ -513,32 +513,41 @@ declare function useConditionallyAddValidator(
  * @param {string} verifyURL - The URL of the Turnstile verification script.
  */
 declare const useTurnstileScript = verifyURL => {
-  const [isLoaded, setIsLoaded] = useState(false);
+  const [scriptLoaded, setScriptLoaded] = useState(false);
+  const [scriptError, setScriptError] = useState(null);
 
   useEffect(() => {
     if (typeof window === "undefined") {
-      setIsLoaded(false);
+      setScriptLoaded(false);
       return;
     }
     if (window.turnstile && window.turnstile.render) {
-      setIsLoaded(true);
+      setScriptLoaded(true);
       return;
     }
 
     const script = document.createElement("script");
     script.src = `${verifyURL}?render=explicit`;
     script.onload = () => {
-      setIsLoaded(true);
+      setScriptLoaded(true);
+    };
+    script.onerror = () => {
+      setScriptError(true);
+      setScriptLoaded(false);
+    };
+    script.onabort = () => {
+      setScriptError(true);
+      setScriptLoaded(false);
     };
     script.defer = true;
     document.getElementsByTagName("head")[0].appendChild(script);
 
     return () => {
-      setIsLoaded(false);
+      setScriptLoaded(false);
     };
   }, [verifyURL]);
 
-  return isLoaded;
+  return { scriptLoaded, scriptError };
 };
 
 

package/dist/index.esm.js

@@ -24404,29 +24404,44 @@ function useConditionallyAddValidator(condition, validatorFn, addValidator, remo
 var useTurnstileScript = function useTurnstileScript(verifyURL) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isLoaded = _useState2[0],
-    setIsLoaded = _useState2[1];
+    scriptLoaded = _useState2[0],
+    setScriptLoaded = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scriptError = _useState4[0],
+    setScriptError = _useState4[1];
   useEffect$1(function () {
     if (typeof window === "undefined") {
-      setIsLoaded(false);
+      setScriptLoaded(false);
       return;
     }
     if (window.turnstile && window.turnstile.render) {
-      setIsLoaded(true);
+      setScriptLoaded(true);
       return;
     }
     var script = document.createElement("script");
     script.src = "".concat(verifyURL, "?render=explicit");
     script.onload = function () {
-      setIsLoaded(true);
+      setScriptLoaded(true);
+    };
+    script.onerror = function () {
+      setScriptError(true);
+      setScriptLoaded(false);
+    };
+    script.onabort = function () {
+      setScriptError(true);
+      setScriptLoaded(false);
     };
     script.defer = true;
     document.getElementsByTagName("head")[0].appendChild(script);
     return function () {
-      setIsLoaded(false);
+      setScriptLoaded(false);
     };
   }, [verifyURL]);
-  return isLoaded;
+  return {
+    scriptLoaded: scriptLoaded,
+    scriptError: scriptError
+  };
 };
 
 
@@ -49980,89 +49995,151 @@ var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallback
 var TurnstileWidgetContainer = styled(Box).withConfig({
   displayName: "TurnstileWidget__TurnstileWidgetContainer",
   componentId: "sc-btaugr-0"
-})(["display:flex;padding:", ";justify-content:", ";width:100%;"], function (_ref) {
+})(["display:flex;flex-direction:column;align-items:flex-end;padding:", ";justify-content:", ";align-items:", ";width:100%;"], function (_ref) {
   var padding = _ref.padding;
   return padding;
 }, function (_ref2) {
   var justify = _ref2.justify;
   return justify;
+}, function (_ref3) {
+  var justify = _ref3.justify;
+  return justify;
 });
-var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var verifyURL = _ref3.verifyURL,
-    siteKey = _ref3.siteKey,
-    _ref3$onSuccess = _ref3.onSuccess,
-    onSuccess = _ref3$onSuccess === void 0 ? noop$1 : _ref3$onSuccess,
-    _ref3$onError = _ref3.onError,
-    onError = _ref3$onError === void 0 ? noop$1 : _ref3$onError,
-    _ref3$onExpired = _ref3.onExpired,
-    onExpired = _ref3$onExpired === void 0 ? noop$1 : _ref3$onExpired,
-    _ref3$padding = _ref3.padding,
-    padding = _ref3$padding === void 0 ? "1rem" : _ref3$padding,
-    _ref3$justify = _ref3.justify,
-    justify = _ref3$justify === void 0 ? "flex-end" : _ref3$justify,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? "normal" : _ref3$size,
-    _ref3$tabindex = _ref3.tabindex,
-    tabindex = _ref3$tabindex === void 0 ? 0 : _ref3$tabindex,
-    _ref3$retry = _ref3.retry,
-    retry = _ref3$retry === void 0 ? "auto" : _ref3$retry,
-    _ref3$theme = _ref3.theme,
-    theme = _ref3$theme === void 0 ? "auto" : _ref3$theme,
-    _ref3$extraStyles = _ref3.extraStyles,
-    extraStyles = _ref3$extraStyles === void 0 ? "" : _ref3$extraStyles;
+var FATAL_ERROR_CODES = [
+// Configuration errors
+/^100/, /^105/, /^110100$/, /^110110$/, /^110200$/, /^110420$/, /^110430$/, /^400020$/, /^400030$/, /^400040$/,
+// Browser/environment errors
+/^110500$/, /^110510$/, /^200010$/, /^200100$/,
+// Internal errors
+/^120/];
+var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var verifyURL = _ref4.verifyURL,
+    siteKey = _ref4.siteKey,
+    _ref4$onSuccess = _ref4.onSuccess,
+    onSuccess = _ref4$onSuccess === void 0 ? noop$1 : _ref4$onSuccess,
+    _ref4$onError = _ref4.onError,
+    onError = _ref4$onError === void 0 ? noop$1 : _ref4$onError,
+    _ref4$onExpired = _ref4.onExpired,
+    onExpired = _ref4$onExpired === void 0 ? noop$1 : _ref4$onExpired,
+    _ref4$padding = _ref4.padding,
+    padding = _ref4$padding === void 0 ? "1rem" : _ref4$padding,
+    _ref4$justify = _ref4.justify,
+    justify = _ref4$justify === void 0 ? "flex-end" : _ref4$justify,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? "normal" : _ref4$size,
+    _ref4$tabindex = _ref4.tabindex,
+    tabindex = _ref4$tabindex === void 0 ? 0 : _ref4$tabindex,
+    _ref4$retry = _ref4.retry,
+    retry = _ref4$retry === void 0 ? "never" : _ref4$retry,
+    _ref4$theme = _ref4.theme,
+    theme = _ref4$theme === void 0 ? "light" : _ref4$theme,
+    _ref4$extraStyles = _ref4.extraStyles,
+    extraStyles = _ref4$extraStyles === void 0 ? "" : _ref4$extraStyles,
+    _ref4$maxErrorRetries = _ref4.maxErrorRetries,
+    maxErrorRetries = _ref4$maxErrorRetries === void 0 ? 3 : _ref4$maxErrorRetries;
   if (!verifyURL || !siteKey) return null;
   var widgetRef = useRef(null);
+  var widgetIdRef = useRef(null);
+  var retryCountRef = useRef(0);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    widgetId = _useState2[0],
-    setWidgetId = _useState2[1];
-  var isTurnstileLoaded = useTurnstileScript(verifyURL);
+    error = _useState2[0],
+    setError = _useState2[1];
+  var _useTurnstileScript = useTurnstileScript(verifyURL),
+    scriptLoaded = _useTurnstileScript.scriptLoaded,
+    scriptError = _useTurnstileScript.scriptError;
+
+  // Clear the error state and reset retry count
+  var clearError = function clearError() {
+    setError(null);
+    retryCountRef.current = 0;
+  };
+
+  // Handle errors based on the retry strategy
+  var handleError = function handleError(errorCode) {
+    retryCountRef.current += 1;
+    var currentRetryCount = retryCountRef.current;
+
+    // If we haven't exceeded max retries, reset and try again
+    if (currentRetryCount <= maxErrorRetries) {
+      window.turnstile.reset(widgetIdRef.current);
+      setError(null);
+      return;
+    }
+
+    // Max retries exceeded - show appropriate error message
+    if (errorCode) {
+      var errorMessage = getErrorMessage(errorCode);
+      setError(errorMessage);
+    }
+  };
+  var getErrorMessage = function getErrorMessage(errorCode) {
+    var isFatalError = FATAL_ERROR_CODES.some(function (pattern) {
+      return pattern.test(errorCode);
+    });
+    if (isFatalError) {
+      return "Browser or system error. Please refresh the page or update your browser.";
+    }
+    return "Something went wrong. Please refresh and try again.";
+  };
 
   // Allow the parent component to reset the Turnstile widget
   useImperativeHandle(ref, function () {
     return {
       reset: function reset() {
-        if (widgetId && window.turnstile) {
-          window.turnstile.reset(widgetId);
+        if (widgetIdRef.current && window.turnstile) {
+          window.turnstile.reset(widgetIdRef.current);
+          clearError();
         }
       }
     };
-  }, [widgetId]);
+  }, []);
   useEffect$1(function () {
-    if (!widgetRef.current || !window.turnstile) return;
-    if (!widgetId) {
-      var newWidgetId = window.turnstile.render(widgetRef.current, {
-        sitekey: siteKey,
-        size: size,
-        retry: retry,
-        tabindex: tabindex,
-        theme: theme,
-        callback: function callback(token) {
-          return onSuccess(token);
-        },
-        "error-callback": function errorCallback() {
-          return onError();
-        },
-        "expired-callback": function expiredCallback() {
-          return onExpired();
+    if (widgetIdRef.current || !window.turnstile || !scriptLoaded) return;
+    widgetIdRef.current = window.turnstile.render(widgetRef.current, {
+      sitekey: siteKey,
+      size: size,
+      retry: retry,
+      tabindex: tabindex,
+      theme: theme,
+      callback: function callback(token) {
+        clearError();
+        onSuccess(token);
+      },
+      "error-callback": function errorCallback(errorCode) {
+        if (retry === "never") {
+          handleError(errorCode);
         }
-      });
-      setWidgetId(newWidgetId);
-    }
+        onError === null || onError === void 0 || onError(errorCode);
+      },
+      "expired-callback": function expiredCallback() {
+        clearError();
+        onExpired === null || onExpired === void 0 || onExpired();
+      }
+    });
     return function () {
-      if (widgetId && window.turnstile) {
-        window.turnstile.remove(widgetId);
-        setWidgetId(null);
+      if (widgetIdRef.current && window.turnstile) {
+        window.turnstile.remove(widgetIdRef.current);
+        widgetIdRef.current = null;
+        clearError();
       }
     };
-  }, [isTurnstileLoaded, siteKey, widgetId]);
-  return /*#__PURE__*/React__default.createElement(TurnstileWidgetContainer, {
+  }, [scriptLoaded, siteKey]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TurnstileWidgetContainer, {
     padding: padding,
     justify: justify,
     extraStyles: extraStyles
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: widgetRef
-  }));
+  }), error && /*#__PURE__*/React__default.createElement(Text$1, {
+    color: ERROR_COLOR,
+    variant: "pXS",
+    extraStyles: "\n                word-break: break-word;\n                text-align: end;\n              "
+  }, error), scriptError && /*#__PURE__*/React__default.createElement(Text$1, {
+    color: ERROR_COLOR,
+    variant: "pXS",
+    extraStyles: "\n                word-break: break-word;\n                text-align: end;\n              "
+  }, "Unable to load security verification. Please refresh the page.")));
 });
 
 var pageBackground = "#FBFCFD";