@thecb/components 11.3.2-beta.1 → 11.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.3.2-beta.1",
+  "version": "11.3.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/turnstile-widget/TurnstileWidget.js

@@ -3,8 +3,7 @@ import React, {
   useEffect,
   useRef,
   forwardRef,
-  useImperativeHandle,
-  useCallback
+  useImperativeHandle
 } from "react";
 import { Box } from "../../atoms/layouts";
 import Text from "../../atoms/text";
@@ -58,8 +57,7 @@ const TurnstileWidget = forwardRef(
       tabindex = 0,
       retry = "never",
       theme = "light",
-      extraStyles = "",
-      maxErrorRetries = 3
+      extraStyles = ""
     },
     ref
   ) => {
@@ -67,62 +65,44 @@ const TurnstileWidget = forwardRef(
 
     const widgetRef = useRef(null);
     const widgetIdRef = useRef(null);
-    const retryCountRef = useRef(0);
     const [error, setError] = useState(null);
 
     const { scriptLoaded, scriptError } = useTurnstileScript(verifyURL);
 
-    // Clear the error state and reset retry count
+    // Clear the error state
     const clearError = () => {
       setError(null);
-      retryCountRef.current = 0;
     };
 
     // Handle errors based on the retry strategy
     const handleError = errorCode => {
-      retryCountRef.current += 1;
-      const 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) {
-        const errorMessage = getErrorMessage(errorCode);
-        setError(errorMessage);
-      }
-    };
-
-    const getErrorMessage = errorCode => {
+      if (!errorCode) return;
       const isFatalError = FATAL_ERROR_CODES.some(pattern =>
         pattern.test(errorCode)
       );
+      const errorMessage = getErrorMessage(isFatalError);
+      setError(errorMessage);
+    };
 
+    const getErrorMessage = isFatalError => {
       if (isFatalError) {
-        return "Browser or system error. Please refresh the page or update your browser.";
+        return "Browser or system error. Please refresh the page or try a different browser.";
       }
       return "Something went wrong. Please refresh and try again.";
     };
 
-    // Reset the Turnstile widget when requested
-    const resetWidget = useCallback(() => {
-      if (widgetIdRef.current && window.turnstile) {
-        window.turnstile.reset(widgetIdRef.current);
-        clearError();
-      }
-    }, [clearError]);
-
     // Allow the parent component to reset the Turnstile widget
     useImperativeHandle(
       ref,
       () => ({
-        reset: resetWidget
+        reset: () => {
+          if (widgetIdRef.current && window.turnstile) {
+            window.turnstile.reset(widgetIdRef.current);
+            clearError();
+          }
+        }
       }),
-      [resetWidget]
+      []
     );
 
     useEffect(() => {
@@ -130,7 +110,7 @@ const TurnstileWidget = forwardRef(
         setError(
           "Unable to load security verification. Please refresh the page."
         );
-        onError?.({ type: "script_load_failed", error: scriptError });
+        onError?.("script_load_failed");
         return;
       }
 
@@ -145,12 +125,10 @@ const TurnstileWidget = forwardRef(
           theme: theme,
           callback: token => {
             clearError();
-            onSuccess(token);
+            onSuccess?.(token);
           },
           "error-callback": errorCode => {
-            if (retry === "never") {
-              handleError(errorCode);
-            }
+            handleError(errorCode);
             onError?.(errorCode);
           },
           "expired-callback": () => {
@@ -162,7 +140,7 @@ const TurnstileWidget = forwardRef(
         setError(
           "Unable to load security verification. Please refresh the page."
         );
-        onError?.({ type: "render_failed", error });
+        onError?.("render_failed");
       }
 
       return () => {
@@ -172,7 +150,7 @@ const TurnstileWidget = forwardRef(
           clearError();
         }
       };
-    }, [scriptLoaded, siteKey]);
+    }, [scriptLoaded, scriptError, siteKey]);
 
     return (
       <>
@@ -190,6 +168,7 @@ const TurnstileWidget = forwardRef(
               extraStyles={`
                 word-break: break-word;
                 text-align: end;
+                padding-top: 0.5rem;
               `}
             >
               {error}