gatsby-core-theme 44.10.0 → 44.10.11

package/src/components/molecules/leave-comment-form/index.js

@@ -1,94 +1,105 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import Form from "gatsby-core-theme/src/components/organisms/form";
-import PropTypes from 'prop-types';
-import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
-import { commentForm, replyForm } from '../../../constants/forms';
+import React from "react";
+import PropTypes from "prop-types";
+import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
+import Form from "~organisms/form";
+import { commentForm, replyForm } from "../../../constants/forms";
 
 const LeaveCommentForm = ({
-    page,
-    isReply = false,
-    parentCommentID = 0,
-    showLabels = true,
-    showButtonIcon = false,
-    buttonLabel = 'Add Comment',
-    successMessage = 'Comment Submitted for Approval',
-    failMessage = 'Comment Not Added',
-    validationMessage = 'Fill all required fields',
-    buttonIcon = <FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />,
-    titleTag = 'h2',
+  page,
+  isReply = false,
+  parentCommentID = 0,
+  showLabels = true,
+  showButtonIcon = false,
+  buttonLabel = "Add Comment",
+  successMessage = "Comment Submitted for Approval",
+  failMessage = "Comment Not Added",
+  validationMessage = "Fill all required fields",
+  buttonIcon = <FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />,
+  titleTag = "h2",
 }) => {
-    const activeMarket = page?.market;
-    const isDev = process.env.NODE_ENV === 'development';
+  const activeMarket = page?.market;
+  const isDev = process.env.NODE_ENV === "development";
 
-    const customSubmit = (form, resetForm) => {
-        const formData = new FormData(form);
-        const data = Object.fromEntries(formData.entries());        
-        const cleanedData = isReply
-        ? Object.entries(data).reduce((acc, [key, value]) => {
-            if (key.startsWith('post_anonymously_')) acc.post_anonymously = value;
-            else if (key.startsWith('tnc_')) acc.tnc = value;
-            else acc[key] = value;
-            return acc;
-            }, {})
-        : data;
-                
-        
-        if((cleanedData?.["g-recaptcha-response"] === '' || !cleanedData?.tnc) && !isDev) return;
-        
-        if(parentCommentID) cleanedData.parent_id = parentCommentID;
+  const customSubmit = (form, resetForm) => {
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData.entries());
+    const cleanedData = isReply
+      ? Object.entries(data).reduce((acc, [key, value]) => {
+          if (key.startsWith("post_anonymously_")) acc.post_anonymously = value;
+          else if (key.startsWith("tnc_")) acc.tnc = value;
+          else acc[key] = value;
+          return acc;
+        }, {})
+      : data;
 
-        cleanedData.reference_id = page?.id;
-        cleanedData.site_id = parseInt(process.env.SITE_ID);
-        cleanedData.rate = parseInt(data.rate);
+    if (
+      (cleanedData?.["g-recaptcha-response"] === "" || !cleanedData?.tnc) &&
+      !isDev
+    )
+      return;
 
-        cleanedData.market_short_code = activeMarket;
-        
-        if(!cleanedData?.post_anonymously) cleanedData.author_name = cleanedData?.name;
-        if(!cleanedData?.rate) delete cleanedData?.rate;
+    if (parentCommentID) cleanedData.parent_id = parentCommentID;
 
-        delete cleanedData?.post_anonymously;
-        delete cleanedData?.tnc;
+    cleanedData.reference_id = page?.id;
+    cleanedData.site_id = parseInt(process.env.SITE_ID);
+    cleanedData.rate = parseInt(data.rate);
 
-        return new Promise((resolve, reject) => {
-            fetch(`${process.env.GATSBY_API_COMMENT_URL}/api/post-comment`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cleanedData),
-            })
-            .then(async (response) => {
-                if (response.ok) {
-                    resetForm();
-                    resolve(response);
-                } else {
-                    const errorData = await response.json().catch(() => ({}));
-                    reject(errorData?.errors?.join() || response.statusText);
-                }
-            })
-            .catch((error) => reject(error.message));
-        });
-    };
+    cleanedData.market_short_code = activeMarket;
 
-    return activeMarket && 
-        <Form
-            formOptions={isReply ? (replyForm[activeMarket] || replyForm.default) : (commentForm[activeMarket] || commentForm.default)}
-            showLabels={showLabels}
-            hasButton
-            showButtonIcon={showButtonIcon}
-            buttonLabel={buttonLabel}
-            customeSubmit={customSubmit}
-            successMessage={successMessage}
-            failMessage={failMessage}
-            validationMessage={validationMessage}
-            path={page?.path}
-            buttonIcon={buttonIcon}
-            titleType={titleTag}
-            customClass='commentForm'
-        />
+    if (!cleanedData?.post_anonymously)
+      cleanedData.author_name = cleanedData?.name;
+    if (!cleanedData?.rate) delete cleanedData?.rate;
+
+    delete cleanedData?.post_anonymously;
+    delete cleanedData?.tnc;
+
+    return new Promise((resolve, reject) => {
+      fetch(`${process.env.GATSBY_API_COMMENT_URL}/api/post-comment`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(cleanedData),
+      })
+        .then(async (response) => {
+          if (response.ok) {
+            resetForm();
+            resolve(response);
+          } else {
+            const errorData = await response.json().catch(() => ({}));
+            reject(errorData?.errors?.join() || response.statusText);
+          }
+        })
+        .catch((error) => reject(error.message));
+    });
+  };
+
+  return (
+    activeMarket && (
+      <Form
+        formOptions={
+          isReply
+            ? replyForm[activeMarket] || replyForm.default
+            : commentForm[activeMarket] || commentForm.default
+        }
+        showLabels={showLabels}
+        hasButton
+        showButtonIcon={showButtonIcon}
+        buttonLabel={buttonLabel}
+        customeSubmit={customSubmit}
+        successMessage={successMessage}
+        failMessage={failMessage}
+        validationMessage={validationMessage}
+        path={page?.path}
+        buttonIcon={buttonIcon}
+        titleType={titleTag}
+        customClass="commentForm"
+      />
+    )
+  );
 };
 
 LeaveCommentForm.propTypes = {

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

@@ -1,6 +1,6 @@
 import React, { lazy, Suspense } from "react";
 import PropTypes from "prop-types";
-import { getURLParam } from "gatsby-core-theme/src/helpers/getters";
+import { getURLParam } from "~helpers/getters";
 import Module from "~molecules/module";
 import styles from "./main.module.scss";
 import keygen from "~helpers/keygen";
@@ -29,7 +29,8 @@ const Main = ({
       ) ||
       exclNewsletter
     ) && !process.env?.HIDE_NEWSLETTER;
-  const pathPrefixes = isSearchPath(allMarkets, page.path) || page.template === "search";
+  const pathPrefixes =
+    isSearchPath(allMarkets, page.path) || page.template === "search";
   const HtmlSitemap = pageContext.sitemapData
     ? lazy(() => import(`~atoms/sitemap`))
     : null;
@@ -37,7 +38,7 @@ const Main = ({
   const NotFound = page?.path?.includes("404")
     ? lazy(() => import(`~atoms/not-found`))
     : null;
-  
+
   const Newsletter = showNewsletter
     ? lazy(() => import("~molecules/newsletter"))
     : null;
@@ -83,10 +84,7 @@ const Main = ({
         />
       )}
       {pathPrefixes && (
-        <Search
-          serverData={serverData}
-          pageContext={pageContext}
-        />
+        <Search serverData={serverData} pageContext={pageContext} />
       )}
       {Newsletter && (
         <Suspense fallback={<></>}>

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

@@ -1,8 +1,8 @@
 /* eslint-disable arrow-body-style */
 import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
-import MegaItems from 'gatsby-core-theme/src/components/atoms/menu/mega-items';
-import Items from 'gatsby-core-theme/src/components/atoms/menu/items';
+import MegaItems from "~atoms/menu/mega-items";
+import Items from "~atoms/menu/items";
 
 import MenuIcon from "~atoms/menu/menu-icon";
 import { NavigationContext } from "~organisms/navigation/navigationContext";
@@ -22,10 +22,10 @@ const Menu = ({
   mobileAnimation = "collapseFull",
   stopScrollOnOpen = true,
   canOpenAllSubMenus = true,
-  enableMegaMenu = false
+  enableMegaMenu = false,
 }) => {
   let menuObject;
-  
+
   const currentPagePath = pageContext?.page?.path;
 
   const menuListRef = useRef(React.createRef());
@@ -73,30 +73,28 @@ const Menu = ({
         {menuObject &&
           menuObject?.children?.map((child) => {
             const level = 1;
-            return (
-              enableMegaMenu ? (
-                <MegaItems
-                  toplist={toplistModule}
-                  menuListRef={menuListRef}
-                  gtmClass={gtmClass}
-                  key={keygen()}
-                  item={child}
-                  canOpenAllSubMenus={canOpenAllSubMenus}
-                  level={level}
-                />
-              ) : (
-                <Items
-                  currentPage={currentPagePath}
-                  toplist={toplistModule}
-                  menuListRef={menuListRef}
-                  orientation={orientation}
-                  gtmClass={gtmClass}
-                  key={keygen()}
-                  item={child}
-                  canOpenAllSubMenus={canOpenAllSubMenus}
-                  level={level}
-                />
-              )
+            return enableMegaMenu ? (
+              <MegaItems
+                toplist={toplistModule}
+                menuListRef={menuListRef}
+                gtmClass={gtmClass}
+                key={keygen()}
+                item={child}
+                canOpenAllSubMenus={canOpenAllSubMenus}
+                level={level}
+              />
+            ) : (
+              <Items
+                currentPage={currentPagePath}
+                toplist={toplistModule}
+                menuListRef={menuListRef}
+                orientation={orientation}
+                gtmClass={gtmClass}
+                key={keygen()}
+                item={child}
+                canOpenAllSubMenus={canOpenAllSubMenus}
+                level={level}
+              />
             );
           })}
       </ul>
@@ -107,8 +105,8 @@ const Menu = ({
 Menu.propTypes = {
   pageContext: PropTypes.shape({
     page: PropTypes.shape({
-      path: PropTypes.string
-    })
+      path: PropTypes.string,
+    }),
   }),
   section: PropTypes.shape({
     modules: PropTypes.arrayOf(

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

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 
-import { getUrl } from "gatsby-core-theme/src/helpers/getters";
+import { getUrl } from "~helpers/getters";
 import Form from "../../../organisms/form";
 import { newsLetterForm } from "../../../../constants/forms";
 import useTranslate from "~hooks/useTranslate/useTranslate";
@@ -32,7 +32,7 @@ const NewsletterForm = ({
     })
       .then((response) => response.json())
       .then((data) => {
-        setIP(data.ip)
+        setIP(data.ip);
       })
       .catch((err) => {
         // eslint-disable-next-line no-console

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/index.js

@@ -40,7 +40,6 @@ const Navigation = ({
   disableSearch,
   megaMenu = false,
   menu,
-  menuPosition = "left",
 }) => {
   const navRef = useRef(React.createRef());
   const ariaLabelNavLogo = useTranslate("ariaLabel-navLogo", "Nav Logo");
@@ -79,21 +78,6 @@ const Navigation = ({
     }
   };
 
-  const menuComponent = (
-    <Menu
-      pageContext={pageContext}
-      section={section}
-      orientation={orientation}
-      mobileAnimation={mobileAnimation}
-      stopScrollOnOpen={stopScrollOnOpen}
-      canOpenAllSubMenus={canOpenAllSubMenus}
-      customStyles={customStyles}
-      gtmClass="main-menu-gtm"
-      menu={menu}
-      enableMegaMenu={megaMenu}
-    />
-  );
-
   return (
     <ConditionalWrapper
       condition={sticky}
@@ -134,7 +118,18 @@ const Navigation = ({
           )}
           {showMenu && (
             <>
-              {menuPosition === "left" && menuComponent}
+              <Menu
+                pageContext={pageContext}
+                section={section}
+                orientation={orientation}
+                mobileAnimation={mobileAnimation}
+                stopScrollOnOpen={stopScrollOnOpen}
+                canOpenAllSubMenus={canOpenAllSubMenus}
+                customStyles={customStyles}
+                gtmClass="main-menu-gtm"
+                menu={menu}
+                enableMegaMenu={megaMenu}
+              />
               <div className={styles.navIconContainer}>
                 {activeMarket && !disableMarketDropdown && (
                   <MarketDropdown pageContext={pageContext} />
@@ -156,7 +151,6 @@ const Navigation = ({
                     isDisabled={disableSearch}
                   />
                 )}
-                {menuPosition === "right" && menuComponent}
               </div>
             </>
           )}
@@ -212,7 +206,6 @@ Navigation.propTypes = {
   logoAlt: PropTypes.string,
   logoWidth: PropTypes.number,
   logoHeight: PropTypes.number,
-  menuPosition: PropTypes.oneOf(["left", "right"]),
 };
 
 export default Navigation;

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}` : "-"}</>;
       },
     },
     {