gatsby-core-theme 44.10.1 → 44.10.12-beta.1

package/src/components/molecules/newsletter/index.js

@@ -1,26 +1,26 @@
-import React, { useState } from 'react';
-import { MdClose } from '@react-icons/all-files/md/MdClose';
-import PropTypes from 'prop-types';
-import { getUrl } from 'gatsby-core-theme/src/helpers/getters';
-import Button from './toggle-button/index';
-import useTranslate from '~hooks/useTranslate/useTranslate';
-import NewsletterForm from './form/index';
-import styles from './newsletter.module.scss';
+import React, { useState } from "react";
+import { MdClose } from "@react-icons/all-files/md/MdClose";
+import PropTypes from "prop-types";
+import { getUrl } from "~helpers/getters";
+import Button from "./toggle-button/index";
+import useTranslate from "~hooks/useTranslate/useTranslate";
+import NewsletterForm from "./form/index";
+import styles from "./newsletter.module.scss";
 
 const Newsletter = ({
   page,
-  openBtnText = 'Unlock Bonuses',
+  openBtnText = "Unlock Bonuses",
   isSticky = false,
   showLabels = true,
-  titleType = 'h2',
+  titleType = "h2",
 }) => {
   const [toggleNewsetter, setToggleNewsletter] = useState(false);
   const [isClicked, setIsClicked] = useState(false);
-  const country = page?.market?.split('_')[0].toUpperCase();
-  const newsletterOpenBtn = useTranslate('newsletter_open_btn', openBtnText)
+  const country = page?.market?.split("_")[0].toUpperCase();
+  const newsletterOpenBtn = useTranslate("newsletter_open_btn", openBtnText);
 
   const redirectUrl =
-    page?.path === '/'
+    page?.path === "/"
       ? `${getUrl(page?.path)}?subscribed=true`
       : `${getUrl(page?.path)}/?subscribed=true`;
 
@@ -33,12 +33,14 @@ const Newsletter = ({
     <>
       {toggleNewsetter && (
         <div
-          className={styles?.layer || '' }
+          className={styles?.layer || ""}
           onClick={() => setToggleNewsletter(false)}
           aria-hidden="true"
         />
       )}
-      <div className={!isSticky ? styles.contentPage || '' : styles.content || ''}>
+      <div
+        className={!isSticky ? styles.contentPage || "" : styles.content || ""}
+      >
         {isSticky && (
           <Button
             active={!toggleNewsetter}
@@ -51,8 +53,10 @@ const Newsletter = ({
         <div
           className={
             !isSticky
-              ? styles?.formPage || ''
-              : `${styles?.form || ''} ${toggleNewsetter ? styles?.active || '' : ''}`
+              ? styles?.formPage || ""
+              : `${styles?.form || ""} ${
+                  toggleNewsetter ? styles?.active || "" : ""
+                }`
           }
         >
           <NewsletterForm
@@ -62,11 +66,11 @@ const Newsletter = ({
             redirectUrl={redirectUrl}
             showLabels={showLabels}
             titleType={titleType}
-            customClass={styles.newsletterForm || ''}
+            customClass={styles.newsletterForm || ""}
           />
           {isSticky && (
             <MdClose
-              className={styles?.closeBtn || ''}
+              className={styles?.closeBtn || ""}
               onClick={() => setToggleNewsletter(false)}
               title="Close Icon"
             />

package/src/components/molecules/tnc/index.js

@@ -4,8 +4,9 @@ import PropTypes from 'prop-types';
 import styles from './tnc.module.scss';
 import { getOperatorTnc } from '~helpers/getters';
 
-const Tnc = ({ operator, isFixed = false }) => {
-  const termsConditions = getOperatorTnc(operator);
+const Tnc = ({ operator, isFixed = false, tracker }) => {
+  
+  const termsConditions = getOperatorTnc(operator, tracker);
   return (
     termsConditions &&
     ((!isFixed && (
@@ -35,6 +36,7 @@ Tnc.propTypes = {
       main: PropTypes.string,
     }),
   }),
+  tracker: PropTypes.string,
 };
 
 export default Tnc;

package/src/components/organisms/anchor/template-two/index.js

@@ -3,49 +3,64 @@
 /* eslint-disable no-unused-expressions */
 /* eslint-disable prefer-destructuring */
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useRef } from 'react';
+import React, { useRef } from "react";
 
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-import ScollX from 'gatsby-core-theme/src/hooks/scroll-x';
-import keygen from '~helpers/keygen';
-import useTranslate from '~hooks/useTranslate/useTranslate';
+import ScollX from "~hooks/scroll-x";
+import keygen from "~helpers/keygen";
+import useTranslate from "~hooks/useTranslate/useTranslate";
 import { generatePlaceholderString } from "~helpers/generators";
 
-import styles from './template-two.module.scss';
+import styles from "./template-two.module.scss";
 
-function Anchor({ module: { items }, icon = null, showTitle = true, exclOperator = false, page }) {
+function Anchor({
+  module: { items },
+  icon = null,
+  showTitle = true,
+  exclOperator = false,
+  page,
+}) {
   const itemsRef = useRef([]);
   const anchorContainerRef = useRef(null);
   const anchorListRef = useRef(null);
 
   return (
-    <div className={styles.containerAnchor || ''} ref={anchorContainerRef}>
+    <div className={styles.containerAnchor || ""} ref={anchorContainerRef}>
       {showTitle ? (
-        <div className={`${styles.anchorTitle || ''}`}>
+        <div className={`${styles.anchorTitle || ""}`}>
           <span>
-            {useTranslate('anchor_title_responsible_gambling', 'You Might Wanna Jump To:)')}
+            {useTranslate(
+              "anchor_title_responsible_gambling",
+              "You Might Wanna Jump To:)"
+            )}
           </span>
         </div>
       ) : null}
       <div
-        className={`${styles.defaultConatiner || ''} ${
-          exclOperator ? styles.usingExclOperator || '' : ''
+        className={`${styles.defaultConatiner || ""} ${
+          exclOperator ? styles.usingExclOperator || "" : ""
         } `}
       >
         <ScollX refTag={anchorListRef}>
-          <ul ref={anchorListRef} className={`${styles.anchor || ''}`}>
+          <ul ref={anchorListRef} className={`${styles.anchor || ""}`}>
             {items?.map((item, index) => (
-              <li className={styles.anchorItem || ''}>
+              <li className={styles.anchorItem || ""}>
                 <a
-                  className={`${styles.link || ''} anchor-carousel-gtm anchor-menu-gtm`}
+                  className={`${
+                    styles.link || ""
+                  } anchor-carousel-gtm anchor-menu-gtm`}
                   key={keygen()}
                   draggable="false"
                   // eslint-disable-next-line no-return-assign
                   ref={(el) => (itemsRef.current[index] = el)}
                   href={`#${item?.id && item.id}`}
                 >
-                  {generatePlaceholderString(useTranslate(item.slug, item.label), null, page?.relation)}
+                  {generatePlaceholderString(
+                    useTranslate(item.slug, item.label),
+                    null,
+                    page?.relation
+                  )}
                   {icon}
                 </a>
               </li>
@@ -68,9 +83,9 @@ Anchor.propTypes = {
   }).isRequired,
   styles: PropTypes.shape({}),
   icon: PropTypes.element,
-  showTitle: PropTypes.bool,  
+  showTitle: PropTypes.bool,
   page: PropTypes.shape({
-    relation: PropTypes.shape({})
+    relation: PropTypes.shape({}),
   }),
 };
 

package/src/components/organisms/footer-navigation/index.js

@@ -1,20 +1,20 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React from 'react';
+import React from "react";
 // eslint-disable-next-line import/no-extraneous-dependencies
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-import LinkList from 'gatsby-core-theme/src/components/molecules/link-list';
-import { getFirstModuleByName } from 'gatsby-core-theme/src/helpers/getters';
-import styles from './footer-navigation.module.scss';
+import LinkList from "~molecules/link-list";
+import { getFirstModuleByName } from "~helpers/getters";
+import styles from "./footer-navigation.module.scss";
 
 const FooterNavigation = ({ section, isStorybook = false }) => {
-  const menuArray = getFirstModuleByName(section, 'menu');
+  const menuArray = getFirstModuleByName(section, "menu");
   return (
     menuArray?.children?.length > 0 && (
       <div
-        className={`${styles?.footerLinks || ''} 
-          ${isStorybook ? styles?.isStoryBook : ''} 
-          ${styles?.showFooterNav || ''}
+        className={`${styles?.footerLinks || ""} 
+          ${isStorybook ? styles?.isStoryBook : ""} 
+          ${styles?.showFooterNav || ""}
           ${styles[section.style]}
           `}
       >
@@ -38,6 +38,7 @@ FooterNavigation.propTypes = {
         name: PropTypes.string,
       })
     ),
+    style: PropTypes.string,
   }).isRequired,
   isStorybook: PropTypes.bool,
 };

package/src/components/organisms/navigation/navigationContext.js

@@ -1,16 +1,40 @@
-import React, { useState, createContext } from 'react';
+import React, { useState, createContext, startTransition } from 'react';
+import PropTypes from 'prop-types';
 
 export const NavigationContext = createContext(false);
 
-const NavigationProvider = (props) => {
+const NavigationProvider = ({ children }) => {
   const [showMenu, setShowMenu] = useState(false);
   const [showSearch, setShowSearch] = useState(false);
 
+  const setShowMenuTransition = (value) => {
+    startTransition(() => {
+      setShowMenu(value);
+    });
+  };
+
+  const setShowSearchTransition = (value) => {
+    startTransition(() => {
+      setShowSearch(value);
+    });
+  };
+
   return (
-    <NavigationContext.Provider value={{ showMenu, setShowMenu, showSearch, setShowSearch }}>
-      {props.children}
+    <NavigationContext.Provider
+      value={{
+        showMenu,
+        setShowMenu: setShowMenuTransition,
+        showSearch,
+        setShowSearch: setShowSearchTransition,
+      }}
+    >
+      {children}
     </NavigationContext.Provider>
   );
 };
 
 export default NavigationProvider;
+
+NavigationProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};

package/src/components/organisms/search/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-expressions */
 /* eslint-disable no-console */
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, startTransition } from "react";
 import PropTypes from "prop-types";
 import { BiSearchAlt } from "@react-icons/all-files/bi/BiSearchAlt";
 import { IoIosArrowForward } from "@react-icons/all-files/io/IoIosArrowForward";
@@ -34,6 +34,7 @@ const SearchForm = ({
   const topSearches =
     pageContext?.marketSections?.top_searches?.modules?.[0]?.items;
   const [localSearch, setLocalSearch] = useState(false);
+  const [showVariableComponent, setShowVariableComponent] = useState(false);
 
   const loadedCounts = {
     page: loadAutoComplete,
@@ -63,14 +64,25 @@ const SearchForm = ({
   const searchFormRef = useRef();
 
   const handleOnSearchIconClick = () => {
-    setLocalSearch(!localSearch);
-    toggleScroll("search");
+      setLocalSearch(!localSearch);
+      toggleScroll("search");
+      
+      // Defer VariableComponent rendering to reduce processing duration on first click
+      // This allows the overlay to appear immediately, then render the heavy component
+      if (!localSearch) {
+        startTransition(() => {
+          setShowVariableComponent(true);
+        });
+      } else {
+        setShowVariableComponent(false);
+      }
   };
 
   const handleOverlayClickClose = (event) => {
     if (event.target.classList.contains(styles.searchForm)) {
       toggleScroll("search");
       setLocalSearch(false);
+      setShowVariableComponent(false);
     }
   };
 
@@ -126,6 +138,7 @@ const SearchForm = ({
         !searchFormRef.current.contains(event.target)
       ) {
         setLocalSearch(false);
+        setShowVariableComponent(false);
         toggleScroll("search");
       }
     };
@@ -275,7 +288,7 @@ const SearchForm = ({
                 )}
               </div>
             )}
-            {(showRecommendedCasinos || showTopSearches) && (!filteredData || filteredData.length === 0) && !autoCompleteLoading && (
+            {(showRecommendedCasinos || showTopSearches) && (!filteredData || filteredData.length === 0) && !autoCompleteLoading && showVariableComponent && (
               <VariableComponent
                 recommendedCasinos={recommendedCasinos}
                 topSearches={topSearches}

package/src/constants/ratings-constant.js

@@ -1,10 +1,10 @@
 /* eslint-disable react/react-in-jsx-scope */
 /* eslint-disable import/prefer-default-export */
 import React from "react";
-import StarRating from "gatsby-core-theme/src/components/molecules/star-rating/one-star";
 import { FaStar } from "@react-icons/all-files/fa/FaStar";
-import CloseCircleIcon from '~images/icons/close-circle';
-import CheckCircleIcon from '~images/icons/check-circle';
+import StarRating from "~molecules/star-rating/one-star";
+import CloseCircleIcon from "~images/icons/close-circle";
+import CheckCircleIcon from "~images/icons/check-circle";
 
 export const operatorRatings = {
   operator: [
@@ -223,13 +223,11 @@ export const operatorRatings = {
       translationKey: "min_deposit",
       fieldValue: "min_deposit",
       componentToUse: (numOfStars, value, currency) => {
-        if ((/N\/A|NA/i).test(value)) {
-          return '-';
+        if (/N\/A|NA/i.test(value)) {
+          return "-";
         }
-        
-        return (
-          <>{value ? `${currency}${value}` : "-"}</>
-        )
+
+        return <>{value ? `${currency}${value}` : "-"}</>;
       },
     },
     {

package/src/helpers/getters.mjs

@@ -347,9 +347,9 @@ export function getGameIframe(relation, language = null) {
   return null;
 }
 
-export function getOperatorTnc(operator) {
-  return operator?.bonuses?.main?.terms_and_conditions_enabled
-    ? operator.bonuses?.main?.terms_and_conditions
+export function getOperatorTnc(operator, tracker = "main") {
+  return operator?.bonuses?.[tracker]?.terms_and_conditions_enabled
+    ? operator.bonuses?.[tracker]?.terms_and_conditions
     : null;
 }
 

package/src/helpers/processImageNode.js

@@ -1,12 +1,15 @@
 // imageProcessor.js
-import React from 'react';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import { parseContentImageUrl } from 'gatsby-core-theme/src/helpers/strings';
-import { parseCss } from 'gatsby-core-theme/src/helpers/css-parser';
-import styles from '../components/molecules/content/content.module.scss';
+import React from "react";
+import LazyImage from "~hooks/lazy-image";
+import { parseContentImageUrl } from "~helpers/strings";
+import { parseCss } from "~helpers/css-parser";
+import styles from "../components/molecules/content/content.module.scss";
 
 const getValueFromStyle = (style, cssAttribute) => {
-  const regex = new RegExp(`${cssAttribute}:\\s*([0-9]+(?:\\.[0-9]+)?)px?`, 'i');
+  const regex = new RegExp(
+    `${cssAttribute}:\\s*([0-9]+(?:\\.[0-9]+)?)px?`,
+    "i"
+  );
   const match = style?.match(regex);
   return match ? Math?.floor(parseFloat(match[1])) : null;
 };
@@ -14,44 +17,49 @@ const getValueFromStyle = (style, cssAttribute) => {
 const processImageNode = (node, moduleWidth = 960, loading) => {
   let stylesClass = null;
   const classes = node.attribs.class;
-  if (classes?.includes('content-image--float-left')) {
-    stylesClass = 'floatLeft';
-  } else if (classes?.includes('content-image--float-right')) {
-    stylesClass = 'floatRight';
-  } else if (classes?.includes('content-image--align-center')) {
-    stylesClass = 'alignCenter';
-  } else if (classes?.includes('content-image--align-left')) {
-    stylesClass = 'alignLeft';
-  } else if (classes?.includes('content-image--align-right')) {
-    stylesClass = 'alignRight';
+  if (classes?.includes("content-image--float-left")) {
+    stylesClass = "floatLeft";
+  } else if (classes?.includes("content-image--float-right")) {
+    stylesClass = "floatRight";
+  } else if (classes?.includes("content-image--align-center")) {
+    stylesClass = "alignCenter";
+  } else if (classes?.includes("content-image--align-left")) {
+    stylesClass = "alignLeft";
+  } else if (classes?.includes("content-image--align-right")) {
+    stylesClass = "alignRight";
   }
 
-  const imgWidthData = node?.attribs?.width
-    || node?.attribs?.['data-width']
-    || getValueFromStyle(node?.attribs?.style, 'width')
-    || '';
+  const imgWidthData =
+    node?.attribs?.width ||
+    node?.attribs?.["data-width"] ||
+    getValueFromStyle(node?.attribs?.style, "width") ||
+    "";
 
-  const imgHeightData = node?.attribs?.height
-    || node?.attribs?.['data-height']
-    || getValueFromStyle(node?.attribs?.style, 'height')
-    || '';
+  const imgHeightData =
+    node?.attribs?.height ||
+    node?.attribs?.["data-height"] ||
+    getValueFromStyle(node?.attribs?.style, "height") ||
+    "";
 
   // Parse the width and height as numbers
   const originalWidth = parseFloat(imgWidthData);
-  const originalHeight = (imgHeightData === 'auto') ? 298 : parseFloat(imgHeightData);
+  const originalHeight =
+    imgHeightData === "auto" ? 298 : parseFloat(imgHeightData);
 
   // If width is greater than moduleWidth, adjust the width to moduleWidth and scale height accordingly
-  const imgWidth = originalWidth > moduleWidth ? moduleWidth : originalWidth || '';
-  const imgHeight = originalWidth > moduleWidth
-    ? Math.round((originalHeight / originalWidth) * moduleWidth)
-    : originalHeight || '';
+  const imgWidth =
+    originalWidth > moduleWidth ? moduleWidth : originalWidth || "";
+  const imgHeight =
+    originalWidth > moduleWidth
+      ? Math.round((originalHeight / originalWidth) * moduleWidth)
+      : originalHeight || "";
 
   const lazyProps = {
     src: parseContentImageUrl(node.attribs.src, imgWidth, imgHeight),
     width: imgWidth,
     height: imgHeight,
     style: node.attribs.style ? parseCss(node.attribs.style) : null,
-    alt: node.attribs.alt ? node.attribs.alt : '',
+    alt: node.attribs.alt ? node.attribs.alt : "",
     className: styles[stylesClass],
   };
 

package/src/helpers/processImageNode.test.js

@@ -1,41 +1,50 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import processImageNode from './processImageNode';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import { parseContentImageUrl } from 'gatsby-core-theme/src/helpers/strings';
+import React from "react";
+import { render } from "@testing-library/react";
+import processImageNode from "./processImageNode";
+import LazyImage from "~hooks/lazy-image";
+import { parseContentImageUrl } from "~helpers/strings";
 
-jest.mock('gatsby-core-theme/src/hooks/lazy-image', () => jest.fn());
-jest.mock('gatsby-core-theme/src/helpers/strings', () => ({
+jest.mock("~hooks/lazy-image", () => jest.fn());
+jest.mock("~helpers/strings", () => ({
   parseContentImageUrl: jest.fn(),
 }));
 
-describe('processImageNode', () => {
+describe("processImageNode", () => {
   const node = {
     attribs: {
-      class: 'content-image--align-center',
-      src: 'image-src',
-      width: '500px',
-      height: 'auto',
-      style: 'width: 500px; height: auto;',
-      alt: 'image description',
+      class: "content-image--align-center",
+      src: "image-src",
+      width: "500px",
+      height: "auto",
+      style: "width: 500px; height: auto;",
+      alt: "image description",
     },
   };
 
   beforeEach(() => {
-    LazyImage.mockImplementation(({ src, width, height, style, alt, className }) => (
-      <img src={src} width={width} height={height} style={style} alt={alt} className={className} />
-    ));
+    LazyImage.mockImplementation(
+      ({ src, width, height, style, alt, className }) => (
+        <img
+          src={src}
+          width={width}
+          height={height}
+          style={style}
+          alt={alt}
+          className={className}
+        />
+      )
+    );
   });
 
-  test('renders LazyImage with correct props', () => {
-    parseContentImageUrl.mockReturnValue('parsed-image-url');
+  test("renders LazyImage with correct props", () => {
+    parseContentImageUrl.mockReturnValue("parsed-image-url");
 
     const { getByAltText } = render(processImageNode(node));
-    const img = getByAltText('image description');
+    const img = getByAltText("image description");
 
-    expect(img).toHaveAttribute('src', 'parsed-image-url');
-    expect(img).toHaveAttribute('width', '500');
-    expect(img).toHaveAttribute('height', '298');
-    expect(img).toHaveClass('alignCenter');
+    expect(img).toHaveAttribute("src", "parsed-image-url");
+    expect(img).toHaveAttribute("width", "500");
+    expect(img).toHaveAttribute("height", "298");
+    expect(img).toHaveClass("alignCenter");
   });
 });

package/src/helpers/replaceMedia.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 import React from "react";
-import Iframe from "gatsby-core-theme/src/components/atoms/iframe";
-import { isTrackerLink } from "gatsby-core-theme/src/helpers/tracker.mjs";
+import Iframe from "~atoms/iframe";
+import { isTrackerLink } from "~helpers/tracker.mjs";
 import processImageNode from "./processImageNode.js";
 import { TrackingKeys } from "~constants/tracking-api";
 import PrettyLink from "~atoms/pretty-link";

package/src/resolver/games.mjs

@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import loadash from "lodash/index.js";
-import { filterNonNullValues } from "gatsby-core-theme/src/helpers/getters.mjs";
+import { filterNonNullValues } from "../helpers/getters.mjs";
 import { pickRelationKeys } from "../constants/pick-keys.mjs";
 import { getProviderData } from "./providers.mjs";