gatsby-core-theme 37.0.0 → 37.0.2

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [37.0.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v37.0.1...v37.0.2) (2024-08-23)
+
+
+### Bug Fixes
+
+* lazy loading creating delayed menu styling in highly populated menus ([470f7b2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/470f7b2caac43e8ee6b8e743a9ef2f7a060ab636))
+
+## [37.0.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v37.0.0...v37.0.1) (2024-08-23)
+
+
+### Bug Fixes
+
+* import lazily recaptcha ([828ed0b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/828ed0b62e061141d6fe61bef8d9da0916276bbe))
+* preview function ([0f6e606](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0f6e6069e925f4465a36c1466ce307bf456abfe1))
+
+
+* Merge branch 'update-recaptcha' into 'master' ([846e886](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/846e886ac8ebcc927fef7824895437d6a74e167f))
+
 # [37.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v36.0.4...v37.0.0) (2024-08-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "37.0.0",
+  "version": "37.0.2",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

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

@@ -1,8 +1,10 @@
 /* eslint-disable arrow-body-style */
-import React, { useContext, lazy, useRef, Suspense } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
-import MenuIcon from "~atoms/menu/menu-icon";
+import MegaItems from 'gatsby-core-theme/src/components/atoms/menu/mega-items';
+import Items from 'gatsby-core-theme/src/components/atoms/menu/items';
 
+import MenuIcon from "~atoms/menu/menu-icon";
 import { NavigationContext } from "~organisms/navigation/navigationContext";
 
 import styles from "./menu.module.scss";
@@ -22,9 +24,6 @@ const Menu = ({
   enableMegaMenu = false
 }) => {
   let menuObject;
-  const Items = enableMegaMenu 
-  ? lazy(() => import('gatsby-core-theme/src/components/atoms/menu/mega-items')) 
-  : lazy(() => import('gatsby-core-theme/src/components/atoms/menu/items'));
   
   const menuListRef = useRef(React.createRef());
   const toplistModule = section?.modules?.find(
@@ -68,11 +67,21 @@ const Menu = ({
         } ${styles[customStyles] || ""}`}
         role="menu"
       >
-        {menuObject && menuObject.children &&
+        {menuObject &&
           menuObject.children.map((child) => {
             const level = 1;
             return (
-              <Suspense>
+              enableMegaMenu ? (
+                <MegaItems
+                  toplist={toplistModule}
+                  menuListRef={menuListRef}
+                  gtmClass={gtmClass}
+                  key={keygen()}
+                  item={child}
+                  canOpenAllSubMenus={canOpenAllSubMenus}
+                  level={level}
+                />
+              ) : (
                 <Items
                   toplist={toplistModule}
                   menuListRef={menuListRef}
@@ -82,7 +91,7 @@ const Menu = ({
                   canOpenAllSubMenus={canOpenAllSubMenus}
                   level={level}
                 />
-              </Suspense>
+              )
             );
           })}
       </ul>

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

@@ -1,13 +1,14 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useState, useRef } from 'react';
+import React, { lazy, useState, useRef, Suspense } from "react";
 import PropTypes from 'prop-types';
-import ReCAPTCHA from 'react-google-recaptcha';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import { contactUsForm } from '../../../constants/forms';
 import getField from './fields';
 import styles from './form.module.scss';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 
+const ReCAPTCHA = lazy(() => import("react-google-recaptcha"));
+
 const FormComponent = ({
   formOptions = Object.values(contactUsForm)[0] || {},
   successMessage = 'Form has sent successfully',
@@ -162,6 +163,7 @@ const FormComponent = ({
             );
           })}
           {formOptions.hasReCAPTCHA && (
+            <Suspense fallback={<div>Loading ReCAPTCHA...</div>}>
             <div
               className={`${styles.recaptcha || ''} ${
                 (!state.isValid && elements.gRecaptchaResponse === '' && styles.invalid) || ''
@@ -185,6 +187,7 @@ const FormComponent = ({
                   </span>
                 )}
             </div>
+            </Suspense>
           )}
           {hasButton && (
             <button disabled={state.loading} className={styles.formButton || ''} type="submit">

package/src/helpers/api.mjs

@@ -19,7 +19,7 @@ export async function getPreview(siteName, page = null, marketId, themeOptions)
       .then((response) => {
         console.log(response);
         const pagePreview = response.data.result.pages.preview;
-        const processed = processor.run(response.data.result, themeOptions);
+        const processed = processor.run(response.data.result, themeOptions, null, null, true);
 
         const { path } = processed.pages[pagePreview.market].preview[0];
 

package/src/helpers/processor/index.mjs

@@ -100,7 +100,7 @@ export function transform(response) {
 }
 
 const savedModules = {};
-export function processSections(sections, skipPost = false, page, translations, markets, siteName, data) {
+export function processSections(sections, skipPost = false, page, translations, markets, siteName, data, isPreview) {
   // pagedId we will use it just on operator review pages
   const pageId = page ? page.id : null;
   const relationData = page && page.relation;
@@ -136,6 +136,7 @@ export function processSections(sections, skipPost = false, page, translations,
             {...relationData, siteName, pageTitle: page?.title},
             markets,
             data,
+            isPreview
           );
 
           sections[sectionKey].modules[key] = module;
@@ -239,7 +240,7 @@ function updatePlaceholders(page, data, translationsData) {
 }
 
 export default {
-  run(data, themeOptions, fs, translationsData) {
+  run(data, themeOptions, fs, translationsData, isPreview = false) {
     const start = new Date();
     const transformedPages = transform(data);
     const allResponsibleGaming = data.relations.responsible_gamings || null;
@@ -487,7 +488,9 @@ export default {
           null,
           translationsData ? translationsData[0] : {},
           data.site_markets,
-          data.general.site_name
+          data.general.site_name,
+          null,
+          isPreview
         );
       }
 
@@ -534,7 +537,8 @@ export default {
                   translationsData ? translationsData[page.language] : {},
                   data.site_markets,
                   data.general.site_name,
-                  data
+                  data,
+                  isPreview
                 ),
               });
             }

package/src/helpers/processor/modules.mjs

@@ -102,7 +102,7 @@ export function filterOperators(pages, selectedProviders, selectedTypes) {
   return filterInactiveOperators(pagesFiltered);
 }
 
-export function processCardsV2(module, pagesCloned, pagesMappedById, pageId) {
+export function processCardsV2(module, pagesCloned, pagesMappedById, pageId, isPreview) {
   const cardType = module.cards_page_type;
   const pageTemplateId = module.cards_page_type_id;
   const sortType = module.cards_selector_filters_sort_by;
@@ -136,9 +136,12 @@ export function processCardsV2(module, pagesCloned, pagesMappedById, pageId) {
 
     const allFilters = [cardType, pageTemplateId, selectedAuthors, selectedReviewer, selectedCategories, moduleSelectedProviders, moduleSelectedCategories, moduleSelectedTypes];
     const u8 = new Uint8Array(allFilters);
-    const b64 = Buffer.from(u8).toString('base64');
-
-
+    let b64 = '';
+    if(!isPreview) {
+      b64 = Buffer.from(u8).toString('base64');
+    } else {
+      b64 = (Math.random() + 1).toString(36).substring(7)
+    }
     
     if (cardType) {
       // Get all pages by the selected page type
@@ -162,7 +165,7 @@ export function processCardsV2(module, pagesCloned, pagesMappedById, pageId) {
     if (pagesList.length > 0) {
 
       if(!cardItems[b64]) {
-                const pagesFilteredByAuthor = filterPages(pagesList, selectedAuthors, 'author_id');
+        const pagesFilteredByAuthor = filterPages(pagesList, selectedAuthors, 'author_id');
 
         // Filter by reviewer
         const pagesFilteredByReviewer = filterPages(
@@ -249,15 +252,6 @@ export function processBonus(module, relations) {
   );
 }
 
-export function processArchiveModule(module, pages) {
-  const modelType = module.model_type;
-  const limit = pages[modelType].length > 9 ? 9 : pages[modelType].length;
-  const items = cloneDeep(pages[modelType].slice(0, limit));
-  module.items = items.map((item) => clonePageForCards(item));
-  module.currentPage = 1;
-  module.numOfPages = 1;
-}
-
 export function processTopListModule(module, relations, pages, markets, data) {
   module.items = module.items.map((listItem) => {
 
@@ -328,6 +322,7 @@ export function processModule(
   relationData,
   markets,
   data,
+  isPreview
 ) {
   module.module_title =
     module.module_title &&
@@ -336,7 +331,7 @@ export function processModule(
     module.title && generatePlaceholderString(module.title, translations, relationData);
 
   // See more link
-  if (module.see_more_link?.value) {
+  if (module.see_more_link?.value && pagesMappedById[module.see_more_link.value]?.path) {
     module.see_more_link.path =
       module.see_more_link?.type === 'page'
         ? pagesMappedById[module.see_more_link.value].path
@@ -344,13 +339,11 @@ export function processModule(
   }
 
   if (module.name === 'cards_v2') {
-    processCardsV2(module, pagesCloned, pagesMappedById, pageId);
+    processCardsV2(module, pagesCloned, pagesMappedById, pageId, isPreview);
   } else if (module.name === 'content') {
     processContentModule(module, translations, relationData);
   } else if (module.name === 'bonus') {
     processBonus(module, relations);
-  // } else if (module.name === 'archive' && previewMode) {
-  //   processArchiveModule(module, pages);
   } else if (module.name === 'top_list') {
     processTopListModule(module, relations, pages, markets, data);
   } else if (module.name === 'menu' && menus && menus[module.menu_id]) {