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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.3.0-beta.0",
+  "version": "11.3.1-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,14 +2,17 @@ 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,
@@ -55,16 +58,28 @@ const Jumbo = ({
               <Title
                 variant={isMobile ? "small" : "large"}
                 as="h1"
-                color="#ffffff"
+                color={WHITE}
                 className="themeJumboHeading"
                 extraStyles={showCartStatus && isMobile && `max-width: 60%;`}
               >
-                {heading}
+                {isHeadingLoading ? (
+                  <Spinner
+                    size="50"
+                    cx="25"
+                    cy="25"
+                    radius="12.5"
+                    strokeWidth="3"
+                    centerSpinner
+                    color={WHITE}
+                  />
+                ) : (
+                  heading
+                )}
               </Title>
               {subHeading && (
                 <Heading
                   variant={isMobile ? "h6" : "h2"}
-                  color="#ffffff"
+                  color={WHITE}
                   className="themeJumboSubheading"
                 >
                   {subHeading}

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

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

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

@@ -37,22 +37,27 @@ const TurnstileWidget = forwardRef(
   ) => {
     if (!verifyURL || !siteKey) return null;
 
-    const containerRef = useRef(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 !== null) {
-          window.turnstile?.reset(widgetId);
+    useImperativeHandle(
+      ref,
+      () => ({
+        reset: () => {
+          if (widgetId && window.turnstile) {
+            window.turnstile.reset(widgetId);
+          }
         }
-      }
-    }));
+      }),
+      [widgetId]
+    );
 
     useEffect(() => {
-      if (window.turnstile && containerRef.current && widgetId === null) {
-        const newWidgetId = window.turnstile.render(containerRef.current, {
+      if (!widgetRef.current || !window.turnstile) return;
+      if (!widgetId) {
+        const newWidgetId = window.turnstile.render(widgetRef.current, {
           sitekey: siteKey,
           size: size,
           retry: retry,
@@ -65,8 +70,9 @@ const TurnstileWidget = forwardRef(
         setWidgetId(newWidgetId);
       }
       return () => {
-        if (widgetId !== null) {
-          window.turnstile?.reset(widgetId);
+        if (widgetId && window.turnstile) {
+          window.turnstile.remove(widgetId);
+          setWidgetId(null);
         }
       };
     }, [isTurnstileLoaded, siteKey, widgetId]);
@@ -77,7 +83,7 @@ const TurnstileWidget = forwardRef(
         justify={justify}
         extraStyles={extraStyles}
       >
-        <div ref={containerRef} />
+        <div ref={widgetRef} />
       </TurnstileWidgetContainer>
     );
   }

package/src/constants/colors.js

@@ -62,6 +62,7 @@ const ROYAL_BLUE_VIVID = "#3B5BDB";
 const ASTRAL_BLUE = "#3176AA";
 const SAPPHIRE_BLUE = "#116285";
 const PEACOCK_BLUE = "#0E506D";
+const HAWKES_BLUE = "#D9D9FB";
 // GREEN
 const FOREST_GREEN = "#19b03F";
 const MEADOW_GREEN = "#16C98D";
@@ -88,6 +89,9 @@ const RASPBERRY = "#ED125F";
 const FANTASY_RED = "#FCF4F4";
 const COSMOS_RED = "#FFD0D3";
 const BLUSH_RED = "#FFF0F5";
+// PURPLE
+const LUCKY_POINT = "#281978";
+const LUCKY_POINT_DARK = "#201460";
 
 // Second level color constants
 const ERROR_COLOR = RAZZMATAZZ_RED;
@@ -200,6 +204,7 @@ export {
   ASTRAL_BLUE,
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,
+  HAWKES_BLUE,
   FOREST_GREEN,
   MEADOW_GREEN,
   POLAR_GREEN,
@@ -225,5 +230,7 @@ export {
   ALERT_COLORS,
   PILL_COLORS,
   ERROR_COLOR,
-  ERROR_BACKGROUND_COLOR
+  ERROR_BACKGROUND_COLOR,
+  LUCKY_POINT,
+  LUCKY_POINT_DARK
 };