@thecb/components 11.3.2-beta.0 → 11.3.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.3.2-beta.0",
+  "version": "11.3.2-beta.1",
   "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,7 +3,8 @@ import React, {
   useEffect,
   useRef,
   forwardRef,
-  useImperativeHandle
+  useImperativeHandle,
+  useCallback
 } from "react";
 import { Box } from "../../atoms/layouts";
 import Text from "../../atoms/text";
@@ -15,10 +16,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,6 +53,7 @@ const TurnstileWidget = forwardRef(
       onExpired = noop,
       padding = "1rem",
       justify = "flex-end",
+      align = "flex-end",
       size = "normal",
       tabindex = 0,
       retry = "never",
@@ -107,44 +108,62 @@ const TurnstileWidget = forwardRef(
       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: () => {
-          if (widgetIdRef.current && window.turnstile) {
-            window.turnstile.reset(widgetIdRef.current);
-            clearError();
-          }
-        }
+        reset: resetWidget
       }),
-      []
+      [resetWidget]
     );
 
     useEffect(() => {
+      if (scriptError) {
+        setError(
+          "Unable to load security verification. Please refresh the page."
+        );
+        onError?.({ type: "script_load_failed", error: scriptError });
+        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") {
-            handleError(errorCode);
+      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 => {
+            if (retry === "never") {
+              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?.({ type: "render_failed", error });
+      }
 
       return () => {
         if (widgetIdRef.current && window.turnstile) {
@@ -160,6 +179,7 @@ const TurnstileWidget = forwardRef(
         <TurnstileWidgetContainer
           padding={padding}
           justify={justify}
+          align={align}
           extraStyles={extraStyles}
         >
           <div ref={widgetRef} />
@@ -175,18 +195,6 @@ const TurnstileWidget = forwardRef(
               {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]);