@thecb/components 11.2.17 → 11.3.0

package/package.json

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

package/src/components/molecules/index.js

@@ -46,3 +46,4 @@ export { default as PopupMenu } from "./popup-menu";
 export { default as MultipleSelectFilter } from "./multiple-select-filter";
 export { default as ContactCard } from "./contact-card";
 export { default as HeroImage } from "./hero-image";
+export { default as TurnstileWidget } from "./turnstile-widget/TurnstileWidget";

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

@@ -0,0 +1,92 @@
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import { Box } from "../../atoms/layouts";
+import styled from "styled-components";
+import { useTurnstileScript } from "../../../hooks";
+import { noop } from "../../../util/general";
+
+const TurnstileWidgetContainer = styled(Box)`
+  display: flex;
+  padding: ${({ padding }) => padding};
+  justify-content: ${({ justify }) => justify};
+  width: 100%;
+`;
+
+const TurnstileWidget = forwardRef(
+  (
+    {
+      verifyURL, // URL to load the Turnstile script from
+      siteKey, // Turnstile site key
+      onSuccess = noop,
+      onError = noop,
+      onExpired = noop,
+      padding = "1rem",
+      justify = "flex-end",
+      size = "normal",
+      tabindex = 0,
+      retry = "auto",
+      theme = "auto",
+      extraStyles = ""
+    },
+    ref
+  ) => {
+    if (!verifyURL || !siteKey) return null;
+
+    const widgetRef = useRef(null);
+    const [widgetId, setWidgetId] = useState(null);
+    const isTurnstileLoaded = useTurnstileScript(verifyURL);
+
+    // Allow the parent component to reset the Turnstile widget
+    useImperativeHandle(
+      ref,
+      () => ({
+        reset: () => {
+          if (widgetId && window.turnstile) {
+            window.turnstile.reset(widgetId);
+          }
+        }
+      }),
+      [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);
+      }
+      return () => {
+        if (widgetId && window.turnstile) {
+          window.turnstile.remove(widgetId);
+          setWidgetId(null);
+        }
+      };
+    }, [isTurnstileLoaded, siteKey, widgetId]);
+
+    return (
+      <TurnstileWidgetContainer
+        padding={padding}
+        justify={justify}
+        extraStyles={extraStyles}
+      >
+        <div ref={widgetRef} />
+      </TurnstileWidgetContainer>
+    );
+  }
+);
+
+export default TurnstileWidget;

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

@@ -0,0 +1,3 @@
+import TurnstileWidget from "./TurnstileWidget";
+
+export default TurnstileWidget;

package/src/hooks/index.js

@@ -2,3 +2,4 @@ export { default as useOutsideClick } from "./use-outside-click";
 export { default as useScrollTo } from "./use-scroll-to";
 export { default as useToastNotification } from "./use-toast-notification";
 export { default as useConditionallyAddValidator } from "./use-conditionally-add-validator";
+export { default as useTurnstileScript } from "./use-turnstile-script";

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

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+
+/**
+ * A custom hook to dynamically load the Cloudflare Turnstile script.
+ *
+ * @param {string} verifyURL - The URL of the Turnstile verification script.
+ */
+const useTurnstileScript = verifyURL => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      setIsLoaded(false);
+      return;
+    }
+    if (window.turnstile && window.turnstile.render) {
+      setIsLoaded(true);
+      return;
+    }
+
+    const script = document.createElement("script");
+    script.src = `${verifyURL}?render=explicit`;
+    script.onload = () => {
+      setIsLoaded(true);
+    };
+    script.defer = true;
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    return () => {
+      setIsLoaded(false);
+    };
+  }, [verifyURL]);
+
+  return isLoaded;
+};
+export default useTurnstileScript;