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

package/package.json

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

@@ -6,17 +6,43 @@ import React, {
   useImperativeHandle
 } from "react";
 import { Box } from "../../atoms/layouts";
+import Text from "../../atoms/text";
 import styled from "styled-components";
 import { useTurnstileScript } from "../../../hooks";
 import { noop } from "../../../util/general";
+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};
   width: 100%;
 `;
 
+const 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/
+];
+
 const TurnstileWidget = forwardRef(
   (
     {
@@ -29,62 +55,140 @@ const TurnstileWidget = forwardRef(
       justify = "flex-end",
       size = "normal",
       tabindex = 0,
-      retry = "auto",
-      theme = "auto",
-      extraStyles = ""
+      retry = "never",
+      theme = "light",
+      extraStyles = "",
+      maxErrorRetries = 3
     },
     ref
   ) => {
     if (!verifyURL || !siteKey) return null;
 
     const widgetRef = useRef(null);
-    const [widgetId, setWidgetId] = useState(null);
-    const isTurnstileLoaded = useTurnstileScript(verifyURL);
+    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
+    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 => {
+      const isFatalError = FATAL_ERROR_CODES.some(pattern =>
+        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,
       () => ({
         reset: () => {
-          if (widgetId && window.turnstile) {
-            window.turnstile.reset(widgetId);
+          if (widgetIdRef.current && window.turnstile) {
+            window.turnstile.reset(widgetIdRef.current);
+            clearError();
           }
         }
       }),
-      [widgetId]
+      []
     );
 
     useEffect(() => {
-      if (!widgetRef.current || !window.turnstile) return;
-      if (!widgetId) {
-        const newWidgetId = window.turnstile.render(widgetRef.current, {
-          sitekey: siteKey,
-          size: size,
-          retry: retry,
-          tabindex: tabindex,
-          theme: theme,
-          callback: token => onSuccess(token),
-          "error-callback": () => onError(),
-          "expired-callback": () => onExpired()
-        });
-        setWidgetId(newWidgetId);
-      }
+      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);
+          }
+          onError?.(errorCode);
+        },
+        "expired-callback": () => {
+          clearError();
+          onExpired?.();
+        }
+      });
+
       return () => {
-        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]);
+    }, [scriptLoaded, siteKey]);
 
     return (
-      <TurnstileWidgetContainer
-        padding={padding}
-        justify={justify}
-        extraStyles={extraStyles}
-      >
-        <div ref={widgetRef} />
-      </TurnstileWidgetContainer>
+      <>
+        <TurnstileWidgetContainer
+          padding={padding}
+          justify={justify}
+          extraStyles={extraStyles}
+        >
+          <div ref={widgetRef} />
+          {error && (
+            <Text
+              color={ERROR_COLOR}
+              variant="pXS"
+              extraStyles={`
+                word-break: break-word;
+                text-align: end;
+              `}
+            >
+              {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

@@ -6,31 +6,40 @@ import { useEffect, useState } from "react";
  * @param {string} verifyURL - The URL of the Turnstile verification script.
  */
 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 };
 };
 export default useTurnstileScript;