@thecb/components 11.3.3-beta.1 → 11.3.4

package/dist/index.d.ts

@@ -513,32 +513,45 @@ 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(false);
+
+  const handleScriptError = () => {
+    setScriptError(true);
+    setScriptLoaded(false);
+  };
 
   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 = () => {
+      handleScriptError();
+    };
+    script.onabort = () => {
+      handleScriptError();
     };
     script.defer = true;
     document.getElementsByTagName("head")[0].appendChild(script);
 
     return () => {
-      setIsLoaded(false);
+      setScriptLoaded(false);
+      setScriptError(false);
     };
   }, [verifyURL]);
 
-  return isLoaded;
+  return { scriptLoaded, scriptError };
 };
 
 
@@ -674,7 +687,7 @@ interface FormInputProps {
   showErrors?: boolean;
   type?: string;
   formatter?: string | null;
-  decorator?: boolean;
+  decorator?: string;
   themeValues?: object;
   background?: string;
   customHeight?: string;

package/dist/index.esm.js

@@ -24336,29 +24336,47 @@ 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(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scriptError = _useState4[0],
+    setScriptError = _useState4[1];
+  var handleScriptError = function handleScriptError() {
+    setScriptError(true);
+    setScriptLoaded(false);
+  };
   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 () {
+      handleScriptError();
+    };
+    script.onabort = function () {
+      handleScriptError();
     };
     script.defer = true;
     document.getElementsByTagName("head")[0].appendChild(script);
     return function () {
-      setIsLoaded(false);
+      setScriptLoaded(false);
+      setScriptError(false);
     };
   }, [verifyURL]);
-  return isLoaded;
+  return {
+    scriptLoaded: scriptLoaded,
+    scriptError: scriptError
+  };
 };
 
 
@@ -49912,89 +49930,142 @@ 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;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 align = _ref3.align;
+  return align;
 });
-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$align = _ref4.align,
+    align = _ref4$align === void 0 ? "flex-end" : _ref4$align,
+    _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;
   if (!verifyURL || !siteKey) return null;
   var widgetRef = useRef(null);
+  var widgetIdRef = useRef(null);
   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
+  var clearError = function clearError() {
+    setError(null);
+  };
+
+  // Handle errors based on the retry strategy
+  var handleError = function handleError(errorCode) {
+    if (!errorCode) return;
+    var isFatalError = FATAL_ERROR_CODES.some(function (pattern) {
+      return pattern.test(errorCode);
+    });
+    var errorMessage = getErrorMessage(isFatalError);
+    setError(errorMessage);
+  };
+  var getErrorMessage = function getErrorMessage(isFatalError) {
+    if (isFatalError) {
+      return "Browser or system error. Please refresh the page or try a different 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, {
+    if (scriptError) {
+      setError("Unable to load security verification. Please refresh the page.");
+      onError === null || onError === void 0 || onError("script_load_failed");
+      return;
+    }
+    if (widgetIdRef.current || !window.turnstile || !scriptLoaded) return;
+    try {
+      widgetIdRef.current = window.turnstile.render(widgetRef.current, {
         sitekey: siteKey,
         size: size,
         retry: retry,
         tabindex: tabindex,
         theme: theme,
         callback: function callback(token) {
-          return onSuccess(token);
+          clearError();
+          onSuccess === null || onSuccess === void 0 || onSuccess(token);
         },
-        "error-callback": function errorCallback() {
-          return onError();
+        "error-callback": function errorCallback(errorCode) {
+          handleError(errorCode);
+          onError === null || onError === void 0 || onError(errorCode);
         },
         "expired-callback": function expiredCallback() {
-          return onExpired();
+          clearError();
+          onExpired === null || onExpired === void 0 || onExpired();
         }
       });
-      setWidgetId(newWidgetId);
+    } catch (error) {
+      setError("Unable to load security verification. Please refresh the page.");
+      onError === null || onError === void 0 || onError("render_failed");
     }
     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, scriptError, siteKey]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TurnstileWidgetContainer, {
     padding: padding,
     justify: justify,
+    align: align,
     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                padding-top: 0.5rem;\n              "
+  }, error)));
 });
 
 var pageBackground = "#FBFCFD";