@thecb/components 11.3.2-beta.0 → 11.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.3.2-beta.0",
+  "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

@@ -15,10 +15,9 @@ import { ERROR_COLOR } from "../../../constants/colors";
 const TurnstileWidgetContainer = styled(Box)`
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
   padding: ${({ padding }) => padding};
   justify-content: ${({ justify }) => justify};
-  align-items: ${({ justify }) => justify};
+  align-items: ${({ align }) => align};
   width: 100%;
 `;
 
@@ -53,12 +52,12 @@ const TurnstileWidget = forwardRef(
       onExpired = noop,
       padding = "1rem",
       justify = "flex-end",
+      align = "flex-end",
       size = "normal",
       tabindex = 0,
       retry = "never",
       theme = "light",
-      extraStyles = "",
-      maxErrorRetries = 3
+      extraStyles = ""
     },
     ref
   ) => {
@@ -66,43 +65,28 @@ 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.";
     };
@@ -122,29 +106,42 @@ const TurnstileWidget = forwardRef(
     );
 
     useEffect(() => {
+      if (scriptError) {
+        setError(
+          "Unable to load security verification. Please refresh the page."
+        );
+        onError?.("script_load_failed");
+        return;
+      }
+
       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: token => {
-          clearError();
-          onSuccess(token);
-        },
-        "error-callback": errorCode => {
-          if (retry === "never") {
+      try {
+        widgetIdRef.current = window.turnstile.render(widgetRef.current, {
+          sitekey: siteKey,
+          size: size,
+          retry: retry,
+          tabindex: tabindex,
+          theme: theme,
+          callback: token => {
+            clearError();
+            onSuccess?.(token);
+          },
+          "error-callback": errorCode => {
             handleError(errorCode);
+            onError?.(errorCode);
+          },
+          "expired-callback": () => {
+            clearError();
+            onExpired?.();
           }
-          onError?.(errorCode);
-        },
-        "expired-callback": () => {
-          clearError();
-          onExpired?.();
-        }
-      });
+        });
+      } catch (error) {
+        setError(
+          "Unable to load security verification. Please refresh the page."
+        );
+        onError?.("render_failed");
+      }
 
       return () => {
         if (widgetIdRef.current && window.turnstile) {
@@ -153,13 +150,14 @@ const TurnstileWidget = forwardRef(
           clearError();
         }
       };
-    }, [scriptLoaded, siteKey]);
+    }, [scriptLoaded, scriptError, siteKey]);
 
     return (
       <>
         <TurnstileWidgetContainer
           padding={padding}
           justify={justify}
+          align={align}
           extraStyles={extraStyles}
         >
           <div ref={widgetRef} />
@@ -170,23 +168,12 @@ const TurnstileWidget = forwardRef(
               extraStyles={`
                 word-break: break-word;
                 text-align: end;
+                padding-top: 0.5rem;
               `}
             >
               {error}
             </Text>
           )}
-          {scriptError && (
-            <Text
-              color={ERROR_COLOR}
-              variant="pXS"
-              extraStyles={`
-                word-break: break-word;
-                text-align: end;
-              `}
-            >
-              Unable to load security verification. Please refresh the page.
-            </Text>
-          )}
         </TurnstileWidgetContainer>
       </>
     );

package/src/hooks/use-turnstile-script/index.js

@@ -7,7 +7,12 @@ import { useEffect, useState } from "react";
  */
 const useTurnstileScript = verifyURL => {
   const [scriptLoaded, setScriptLoaded] = useState(false);
-  const [scriptError, setScriptError] = useState(null);
+  const [scriptError, setScriptError] = useState(false);
+
+  const handleScriptError = () => {
+    setScriptError(true);
+    setScriptLoaded(false);
+  };
 
   useEffect(() => {
     if (typeof window === "undefined") {
@@ -25,18 +30,17 @@ const useTurnstileScript = verifyURL => {
       setScriptLoaded(true);
     };
     script.onerror = () => {
-      setScriptError(true);
-      setScriptLoaded(false);
+      handleScriptError();
     };
     script.onabort = () => {
-      setScriptError(true);
-      setScriptLoaded(false);
+      handleScriptError();
     };
     script.defer = true;
     document.getElementsByTagName("head")[0].appendChild(script);
 
     return () => {
       setScriptLoaded(false);
+      setScriptError(false);
     };
   }, [verifyURL]);