@thecb/components 11.3.2 → 11.3.3-beta.0

package/package.json

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

package/src/components/atoms/icons/CustomerSearchIcon.js

@@ -1,6 +1,9 @@
 import React from "react";
+import { MATISSE_BLUE } from "../../../constants/colors";
 
-const CustomerSearchIcon = () => {
+const CustomerSearchIcon = ({
+  fillPrimary = MATISSE_BLUE
+}) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -75,7 +78,7 @@ const CustomerSearchIcon = () => {
                 d="M185 185c28.719 0 52 5.373 52 12s-23.281 12-52 12c-28.718 0-52-5.373-52-12s23.282-12 52-12zM97 44a2 2 0 012 2v52a2 2 0 01-2 2H45a2 2 0 01-2-2V46a2 2 0 012-2h52zM80 70c-3.535 0-6.145 1.941-7.827 5.824C70.192 73.274 67.633 72 64.5 72c-5.912 0-9.773 4.536-11.585 13.608a2 2 0 001.83 2.388l.13.004h19.25l.148-.005a2 2 0 001.812-2.387 37.807 37.807 0 00-.733-3.045L75.184 82h11.893l.15-.005a2 2 0 001.797-2.451C87.534 73.18 84.526 70 80 70zm136-26c10.493 0 19 8.507 19 19s-8.507 19-19 19-19-8.507-19-19 8.507-19 19-19zM64.5 56a7 7 0 100 14 7 7 0 000-14zM216 58c-4.206 0-7.903 2.689-9.348 6.641a2.5 2.5 0 004.635 1.87l.061-.152.083-.214c.786-1.896 2.575-3.145 4.57-3.145 1.994 0 3.782 1.249 4.568 3.145l.083.214.061.152a2.5 2.5 0 004.635-1.87C223.903 60.69 220.207 58 216.001 58zM80 57a5.5 5.5 0 100 11 5.5 5.5 0 000-11z"
               ></path>
               <path
-                fill="#15749D"
+                fill={fillPrimary}
                 fillRule="nonzero"
                 d="M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.605 3.593v.035-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zM263.644 96c6.184 0 11.24 4.838 11.586 10.936l38.713 7.13c3.304.609 4.407 4.749 1.927 6.93l-.15.125L301 133v-10.5l2.891-2.151-31.014-5.712a11.586 11.586 0 01-8.881 4.569l-.352.005H257l-.2-.005a4 4 0 010-7.99l.2-.005h6.644l.191-.005a3.606 3.606 0 003.414-3.601c0-1.99-.358-3.259-2.403-5.238a361.04 361.04 0 00-4.65-4.395A3.998 3.998 0 01263.644 96zM97 40a6 6 0 016 6v52a6 6 0 01-6 6H45a6 6 0 01-6-6V46a6 6 0 016-6h52zm0 4H45a2 2 0 00-1.995 1.85L43 46v52a2 2 0 001.85 1.995L45 100h52a2 2 0 001.995-1.85L99 98V46a2 2 0 00-1.85-1.995L97 44zM80 70c4.526 0 7.534 3.181 9.024 9.544a2 2 0 01-1.798 2.45l-.149.006H75.184c.342 1.11.643 2.313.901 3.608a2 2 0 01-1.812 2.387l-.149.005H54.876a2 2 0 01-1.961-2.392C54.727 76.536 58.588 72 64.5 72c3.134 0 5.692 1.275 7.673 3.824C73.855 71.941 76.465 70 80 70zM64.5 56a7 7 0 110 14 7 7 0 010-14zM80 57a5.5 5.5 0 110 11 5.5 5.5 0 010-11z"
               ></path>

package/src/components/atoms/icons/PaymentSearchIcon.js

@@ -1,6 +1,10 @@
 import React from "react";
+import { SEA_GREEN, HINT_GREEN } from "../../../constants/colors";
 
-const PaymentSearchIcon = () => {
+const PaymentSearchIcon = ({
+  fillPrimary = SEA_GREEN,
+  fillSecondary = HINT_GREEN
+}) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -75,11 +79,11 @@ const PaymentSearchIcon = () => {
                 xlinkHref="#payment-search-path-1"
               ></use>
               <path
-                fill="#E8FFEF"
+                fill={fillSecondary}
                 d="M185 185c28.719 0 52 5.373 52 12s-23.281 12-52 12c-28.718 0-52-5.373-52-12s23.282-12 52-12zM97 44a2 2 0 012 2v52a2 2 0 01-2 2H45a2 2 0 01-2-2V46a2 2 0 012-2h52zM74.134 56h-5.268c-.441 0-.806.304-.86.696l-.006.1v2.456c-4.391.845-7.029 3.74-7.144 7.532l-.004.26v.072c0 5.135 4.208 6.644 9.66 7.865 3.408.801 4.302 1.333 4.351 2.348l.002.093v.073c0 1.077-1.025 1.723-2.963 1.723-2.717 0-5.28-.875-7.66-2.542a.896.896 0 00-1.112.082l-.078.081-2.845 3.336a.84.84 0 00.11 1.21c2.061 1.596 4.522 2.668 7.182 3.207l.5.095.001 2.581c0 .37.3.677.688.725l.108.007h5.407c.403 0 .737-.275.79-.632l.007-.1v-2.602c4.212-.902 6.88-3.587 6.996-7.58l.004-.273v-.072c0-4.705-3.659-6.572-9.513-7.83-3.483-.767-4.411-1.263-4.462-2.344l-.002-.097v-.072c0-.934.842-1.616 2.562-1.616 2.041 0 4.32.669 6.462 2.007a.9.9 0 001.13-.126l.073-.089 2.566-3.556a.841.841 0 00-.185-1.18 14.999 14.999 0 00-5.178-2.318l-.451-.103-.002-2.62c0-.44-.388-.797-.866-.797z"
               ></path>
               <path
-                fill="#317D4F"
+                fill={fillPrimary}
                 fillRule="nonzero"
                 d="M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.605 3.593v.035-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zM263.644 96c6.184 0 11.24 4.838 11.586 10.936l38.713 7.13c3.304.609 4.407 4.749 1.927 6.93l-.15.125L301 133v-10.5l2.891-2.151-31.014-5.712a11.586 11.586 0 01-8.881 4.569l-.352.005H257l-.2-.005a4 4 0 010-7.99l.2-.005h6.644l.191-.005a3.606 3.606 0 003.414-3.601c0-1.99-.358-3.259-2.403-5.238a361.04 361.04 0 00-4.65-4.395A3.998 3.998 0 01263.644 96zM97 40a6 6 0 016 6v52a6 6 0 01-6 6H45a6 6 0 01-6-6V46a6 6 0 016-6h52zm0 4H45a2 2 0 00-1.995 1.85L43 46v52a2 2 0 001.85 1.995L45 100h52a2 2 0 001.995-1.85L99 98V46a2 2 0 00-1.85-1.995L97 44zM74.134 56c.478 0 .866.356.866.796l.002 2.621c2.128.452 3.983 1.265 5.629 2.42.383.27.457.804.185 1.181l-2.566 3.556c-.275.382-.801.466-1.203.215-2.142-1.338-4.42-2.007-6.462-2.007-1.72 0-2.562.682-2.562 1.616v.072c0 1.15.879 1.652 4.464 2.442C78.341 70.169 82 72.036 82 76.742v.07c0 4.144-2.692 6.932-7 7.854v2.602c0 .404-.357.732-.797.732h-5.407c-.44 0-.796-.328-.796-.732v-2.581c-2.852-.502-5.493-1.606-7.684-3.302a.84.84 0 01-.11-1.21l2.846-3.336a.898.898 0 011.19-.163c2.38 1.667 4.943 2.542 7.66 2.542 1.938 0 2.963-.646 2.963-1.723v-.073c0-1.076-.841-1.615-4.353-2.44-5.452-1.222-9.66-2.73-9.66-7.866v-.072c0-3.92 2.657-6.928 7.148-7.792v-2.456c0-.44.388-.796.866-.796h5.268z"
               ></path>

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

@@ -6,42 +6,17 @@ 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;
   padding: ${({ padding }) => padding};
   justify-content: ${({ justify }) => justify};
-  align-items: ${({ align }) => align};
   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(
   (
     {
@@ -52,11 +27,10 @@ const TurnstileWidget = forwardRef(
       onExpired = noop,
       padding = "1rem",
       justify = "flex-end",
-      align = "flex-end",
       size = "normal",
       tabindex = 0,
-      retry = "never",
-      theme = "light",
+      retry = "auto",
+      theme = "auto",
       extraStyles = ""
     },
     ref
@@ -64,118 +38,53 @@ const TurnstileWidget = forwardRef(
     if (!verifyURL || !siteKey) return null;
 
     const widgetRef = useRef(null);
-    const widgetIdRef = useRef(null);
-    const [error, setError] = useState(null);
-
-    const { scriptLoaded, scriptError } = useTurnstileScript(verifyURL);
-
-    // Clear the error state
-    const clearError = () => {
-      setError(null);
-    };
-
-    // Handle errors based on the retry strategy
-    const handleError = 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 try a different browser.";
-      }
-      return "Something went wrong. Please refresh and try again.";
-    };
+    const [widgetId, setWidgetId] = useState(null);
+    const isTurnstileLoaded = useTurnstileScript(verifyURL);
 
     // Allow the parent component to reset the Turnstile widget
     useImperativeHandle(
       ref,
       () => ({
         reset: () => {
-          if (widgetIdRef.current && window.turnstile) {
-            window.turnstile.reset(widgetIdRef.current);
-            clearError();
+          if (widgetId && window.turnstile) {
+            window.turnstile.reset(widgetId);
           }
         }
       }),
-      []
+      [widgetId]
     );
 
     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;
-
-      try {
-        widgetIdRef.current = window.turnstile.render(widgetRef.current, {
+      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 => {
-            clearError();
-            onSuccess?.(token);
-          },
-          "error-callback": errorCode => {
-            handleError(errorCode);
-            onError?.(errorCode);
-          },
-          "expired-callback": () => {
-            clearError();
-            onExpired?.();
-          }
+          callback: token => onSuccess(token),
+          "error-callback": () => onError(),
+          "expired-callback": () => onExpired()
         });
-      } catch (error) {
-        setError(
-          "Unable to load security verification. Please refresh the page."
-        );
-        onError?.("render_failed");
+        setWidgetId(newWidgetId);
       }
-
       return () => {
-        if (widgetIdRef.current && window.turnstile) {
-          window.turnstile.remove(widgetIdRef.current);
-          widgetIdRef.current = null;
-          clearError();
+        if (widgetId && window.turnstile) {
+          window.turnstile.remove(widgetId);
+          setWidgetId(null);
         }
       };
-    }, [scriptLoaded, scriptError, siteKey]);
+    }, [isTurnstileLoaded, siteKey, widgetId]);
 
     return (
-      <>
-        <TurnstileWidgetContainer
-          padding={padding}
-          justify={justify}
-          align={align}
-          extraStyles={extraStyles}
-        >
-          <div ref={widgetRef} />
-          {error && (
-            <Text
-              color={ERROR_COLOR}
-              variant="pXS"
-              extraStyles={`
-                word-break: break-word;
-                text-align: end;
-                padding-top: 0.5rem;
-              `}
-            >
-              {error}
-            </Text>
-          )}
-        </TurnstileWidgetContainer>
-      </>
+      <TurnstileWidgetContainer
+        padding={padding}
+        justify={justify}
+        extraStyles={extraStyles}
+      >
+        <div ref={widgetRef} />
+      </TurnstileWidgetContainer>
     );
   }
 );

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

@@ -6,44 +6,31 @@ import { useEffect, useState } from "react";
  * @param {string} verifyURL - The URL of the Turnstile verification script.
  */
 const useTurnstileScript = verifyURL => {
-  const [scriptLoaded, setScriptLoaded] = useState(false);
-  const [scriptError, setScriptError] = useState(false);
-
-  const handleScriptError = () => {
-    setScriptError(true);
-    setScriptLoaded(false);
-  };
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
     if (typeof window === "undefined") {
-      setScriptLoaded(false);
+      setIsLoaded(false);
       return;
     }
     if (window.turnstile && window.turnstile.render) {
-      setScriptLoaded(true);
+      setIsLoaded(true);
       return;
     }
 
     const script = document.createElement("script");
     script.src = `${verifyURL}?render=explicit`;
     script.onload = () => {
-      setScriptLoaded(true);
-    };
-    script.onerror = () => {
-      handleScriptError();
-    };
-    script.onabort = () => {
-      handleScriptError();
+      setIsLoaded(true);
     };
     script.defer = true;
     document.getElementsByTagName("head")[0].appendChild(script);
 
     return () => {
-      setScriptLoaded(false);
-      setScriptError(false);
+      setIsLoaded(false);
     };
   }, [verifyURL]);
 
-  return { scriptLoaded, scriptError };
+  return isLoaded;
 };
 export default useTurnstileScript;