@thecb/components 11.2.17 → 11.3.0-beta.0

package/package.json

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

package/src/components/atoms/jumbo/Jumbo.js

@@ -2,17 +2,14 @@ import React, { useContext } from "react";
 import { ThemeContext } from "styled-components";
 
 import ButtonWithLink from "../button-with-link";
-import Spinner from "../spinner";
 import { Box, Cluster, Center, Cover, Switcher } from "../layouts";
 import Heading from "../heading";
 import Title from "../title";
 import withWindowSize from "../../withWindowSize";
-import { WHITE } from "../../../constants/colors";
 
 const Jumbo = ({
   showButton,
   heading,
-  isHeadingLoading = false,
   buttonLink,
   subHeading,
   buttonText,
@@ -58,28 +55,16 @@ const Jumbo = ({
               <Title
                 variant={isMobile ? "small" : "large"}
                 as="h1"
-                color={WHITE}
+                color="#ffffff"
                 className="themeJumboHeading"
                 extraStyles={showCartStatus && isMobile && `max-width: 60%;`}
               >
-                {isHeadingLoading ? (
-                  <Spinner
-                    size="50"
-                    cx="25"
-                    cy="25"
-                    radius="12.5"
-                    strokeWidth="3"
-                    centerSpinner
-                    color={WHITE}
-                  />
-                ) : (
-                  heading
-                )}
+                {heading}
               </Title>
               {subHeading && (
                 <Heading
                   variant={isMobile ? "h6" : "h2"}
-                  color={WHITE}
+                  color="#ffffff"
                   className="themeJumboSubheading"
                 >
                   {subHeading}

package/src/components/atoms/spinner/Spinner.js

@@ -65,7 +65,6 @@ const Spinner = ({
   size = "24",
   centerSpinner = false,
   themeValues,
-  color = themeValues.color,
   cx = "50",
   cy = "50",
   radius = "25",
@@ -74,7 +73,7 @@ const Spinner = ({
   <SpinnerContainer centerSpinner={centerSpinner} size={size}>
     <SpinnerSvgAnimation
       size={size}
-      color={color}
+      color={themeValues.color}
       centerSpinner={centerSpinner}
     >
       <circle

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,86 @@
+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 containerRef = 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 !== null) {
+          window.turnstile?.reset(widgetId);
+        }
+      }
+    }));
+
+    useEffect(() => {
+      if (window.turnstile && containerRef.current && widgetId === null) {
+        const newWidgetId = window.turnstile.render(containerRef.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 !== null) {
+          window.turnstile?.reset(widgetId);
+        }
+      };
+    }, [isTurnstileLoaded, siteKey, widgetId]);
+
+    return (
+      <TurnstileWidgetContainer
+        padding={padding}
+        justify={justify}
+        extraStyles={extraStyles}
+      >
+        <div ref={containerRef} />
+      </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;