gatsby-core-theme 41.1.12 → 41.1.14

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [41.1.14](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v41.1.13...v41.1.14) (2024-12-23)
+
+
+### Bug Fixes
+
+* add placeholder for anchor ([1982603](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/19826038e2f94a1664ef01e11238c422a7a1fc76))
+
+
+* Merge branch 'TM-5018-anchor-placeholder' into 'master' ([328a58b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/328a58b9e15063c8b0adf0c15dd4578369d8051e))
+
+## [41.1.13](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v41.1.12...v41.1.13) (2024-12-17)
+
+
+### Bug Fixes
+
+* preview logic ([a524d5c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/a524d5ca304aca0ea8dba9e1f927aee40babc68c))
+* preview logic ([d8ae855](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/d8ae855070b6ab0a1b7dde77dccb260c96cec25b))
+* preview logic ([c091d63](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/c091d63324c4a4cfced803079e8e210fe5159423))
+
 ## [41.1.12](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v41.1.11...v41.1.12) (2024-12-17)
 
 

package/package.json

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

package/src/components/atoms/admin/bar/preview/index.js

@@ -7,16 +7,16 @@ import styles from "./preview.module.scss";
 const PreviewLink = ({ page, preview, activeMarket }) => {
 
   let path = activeMarket && activeMarket.path_prefix ? page.path.replace(`${activeMarket.path_prefix}/`, '') : page.path;
-  path =  activeMarket && page.path === `${activeMarket.path_prefix}` ? '/' : path;
+  path =  activeMarket && page.path === `${activeMarket.path_prefix}` ? activeMarket.path_prefix : path;
 
   return (
     <li>
       <a
-        className={styles.preview}
+        className={`${styles.preview} ${preview ? styles.active : ""}`}
         target={!preview ? "_blank" : ""}
         href={
           !preview
-            ? `/preview/?path=${path}&market_id=${page.market_id}&market=${page.market}`
+            ? `/preview/?path=${path}&page_id=${page.id}`
             : `/${page.path}`
         }
         rel="noreferrer"
@@ -29,6 +29,7 @@ const PreviewLink = ({ page, preview, activeMarket }) => {
 
 PreviewLink.propTypes = {
   page: PropTypes.shape({
+    id: PropTypes.number,
     path: PropTypes.string,
     market_id: PropTypes.number,
     market: PropTypes.string,

package/src/components/atoms/admin/bar/preview/preview.module.scss

@@ -1,14 +1,18 @@
 .preview {
-    background-color: #165af8;
-    color: #fff;
-    height: 4rem;
-    padding: 0.6rem 1.6rem;
-    border-radius: 0.4rem;
-    font-weight: 500;
+  color: #fff;
+  height: 4rem;
+  padding: 0.6rem 1.6rem;
+  border-radius: 0.4rem;
+  font-weight: 500;
+  border: .1rem solid #fff;
 
-    @include flex-direction(row);
-    @include flex-align(center, center);
+  @include flex-direction(row);
+  @include flex-align(center, center);
 
-    gap: 0.8rem;
-  }
-  
+  gap: 0.8rem;
+}
+
+.active {
+  border: 0;
+  background-color: #165af8;
+}

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

@@ -11,6 +11,7 @@ import { IoIosArrowForward } from "@react-icons/all-files/io/IoIosArrowForward";
 import isSticky from "~hooks/stickyOnScroll";
 import keygen from "~helpers/keygen";
 import { anchorLink, removeSymbols } from "~helpers/strings";
+import { generatePlaceholderString } from "~helpers/generators";
 
 import useTranslate from "~hooks/useTranslate/useTranslate";
 import styles from "./anchor.module.scss";
@@ -27,10 +28,11 @@ function Anchor({
   buttonScroll = 200,
   leftButtonIcon = <IoIosArrowBack />,
   rightButtonIcon = <IoIosArrowForward />,
+  page
 }) {
   const [scrollX, setScrollX] = useState(0);
   const [scrollEnd, setScrollEnd] = useState(false);
-
+  
   const itemsRef = useRef([]);
   const anchorContainerRef = useRef(null);
   const anchorListRef = useRef(null);
@@ -126,7 +128,7 @@ function Anchor({
         ref={(el) => (itemsRef.current[index] = el)}
         href={`#${item?.id && item.id}`}
       >
-        {useTranslate(item.slug, item.label)}
+        {generatePlaceholderString(useTranslate(item.slug, item.label),null, page?.relation)}
         {icon}
       </a>
     </li>
@@ -200,6 +202,9 @@ Anchor.propTypes = {
   rightButtonIcon: PropTypes.shape({}),
   minCharactersForButtons: PropTypes.number,
   setShowButtons: PropTypes.bool,
+  page: PropTypes.shape({
+    relation:PropTypes.shape({})
+  })
 };
 
 export default Anchor;

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-unused-expressions */
 /* eslint-disable prefer-destructuring */
@@ -10,9 +11,11 @@ import ScollX from 'gatsby-core-theme/src/hooks/scroll-x';
 import keygen from '~helpers/keygen';
 import { anchorLink, removeSymbols } from '~helpers/strings';
 import useTranslate from '~hooks/useTranslate/useTranslate';
+import { generatePlaceholderString } from "~helpers/generators";
+
 import styles from './template-two.module.scss';
 
-function Anchor({ module: { items }, icon = null, showTitle = true, exclOperator = false }) {
+function Anchor({ module: { items }, icon = null, showTitle = true, exclOperator = false, page }) {
   const itemsRef = useRef([]);
   const anchorContainerRef = useRef(null);
   const anchorListRef = useRef(null);
@@ -49,7 +52,7 @@ function Anchor({ module: { items }, icon = null, showTitle = true, exclOperator
                   ref={(el) => (itemsRef.current[index] = el)}
                   href={`#${item?.id && item.id}`}
                 >
-                  {useTranslate(item.slug, item.label)}
+                  {generatePlaceholderString(useTranslate(item.slug, item.label), null, page?.relation)}
                   {icon}
                 </a>
               </li>
@@ -70,10 +73,12 @@ Anchor.propTypes = {
       })
     ),
   }).isRequired,
-  headerOffset: PropTypes.number,
   styles: PropTypes.shape({}),
   icon: PropTypes.element,
   showTitle: PropTypes.string,
+  page: PropTypes.shape({
+    relation: PropTypes.shape({})
+  })
 };
 
 export default Anchor;

package/src/helpers/api.mjs

@@ -78,10 +78,6 @@ export async function getOperators(params) {
   return callAPIV2(`v0.1/operators/operators-sorted-v2${params ? `?${params}` : ''}`);
 }
 
-// export async function getDepositMethods(params) {
-//   return callAPIV2(`v0.1/globals/deposit-methods/sorted-v2/?market_short_codes=ie_en${params ? `?${params}` : ''}`);
-// }
-
 export async function getCurrencies() {
   return callAPIV2(`v0.1/globals/currencies/sorted`);
 }

package/src/helpers/path.js

@@ -1,18 +1,4 @@
-export function previewFormat(path) {
-  let previewPath = path;
-  if (previewPath && previewPath !== '/' && path.charAt(0) === '/') {
-    previewPath = path.substring(1);
-  }
-
-  return previewPath;
-}
-
-export function previewPath(path) {
-  // eslint-disable-next-line no-restricted-globals
-  const searchParams2 = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null;
-  return `/preview?path=${previewFormat(path)}&market_id=${searchParams2.get('market_id')}`;
-}
-
+/* eslint-disable import/prefer-default-export */
 export function formatPath(path) {
   let link = path;
   if (path.charAt(0) !== '/') {

package/src/helpers/path.test.js

@@ -1,4 +1,4 @@
-import { previewFormat, previewPath, formatPath } from './path';
+import { formatPath } from './path';
 
 describe('Path format component', () => {
   test('path format adding /', () => {
@@ -14,25 +14,4 @@ describe('Path format component', () => {
 
     expect(path).toBe('/test/link');
   });
-
-  test('preview mode path format removes initial /', () => {
-    const path = previewFormat('/test/link');
-    expect(typeof path).toEqual('string');
-
-    expect(path).toBe('test/link');
-  });
-
-  test('preview mode path navigation removes initial / on path param', () => {
-    const path = previewPath('/test/link');
-    expect(typeof path).toEqual('string');
-
-    expect(path).toBe('/preview?path=test/link&market_id=null');
-  });
-
-  test('preview mode path navigation keep no initial / on path param', () => {
-    const path = previewPath('test/link');
-
-    expect(typeof path).toEqual('string');
-    expect(path).toBe('/preview?path=test/link&market_id=null');
-  });
 });

package/src/helpers/processor/index.mjs

@@ -321,7 +321,7 @@ function updatePlaceholders(page, data, translationsData) {
 }
 
 export default {
-  run(data, themeOptions, fs, translationsData, previewPagePath = null) {
+  run(data, themeOptions, fs, translationsData, previewPageID = null) {
     const start = new Date();
     const transformedPages = transform(data);
 
@@ -576,7 +576,7 @@ export default {
           transformedPages[market][pageType].forEach((page, index) => {
             page.hreflangs = generateHreflangs(page, data);
 
-            if ((page.sections && !previewPagePath) || (previewPagePath && page.path === previewPagePath)) {
+            if ((page.sections && !previewPageID) || (previewPageID && page.id === previewPageID)) {
               transformedPages[market][pageType][index] = Object.assign(page, {
                 sections: processSections(
                   page.sections,

package/src/helpers/server-data.js

@@ -2,7 +2,7 @@
 /* eslint-disable no-prototype-builtins */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable import/prefer-default-export */
-import chalk from 'chalk';
+import chalk from "chalk";
 import loadSource from "~helpers/search-source";
 import { deparam } from "~helpers/strings";
 import { groupBy } from "~helpers/getters";
@@ -25,14 +25,10 @@ export async function getAPIData(page, url, headers, preview) {
       pagesData,
       operatorData,
       paymentData,
-      allMarketsData,
       gamesData,
-      providersData
+      providersData,
     } = await fetchSiteSettings(siteName, true);
 
-    const pagePathPrefix = `${params?.market && allMarketsData[params?.market].path_prefix  ? `${allMarketsData[params?.market].path_prefix}` : '' }`
-    const pagePath = `${pagePathPrefix}${params?.path === '/' && params?.market && allMarketsData[params?.market].path_prefix ? '' : params?.path}`
-
     const processed = processor.run(
       {
         ...siteSettingsData,
@@ -47,28 +43,25 @@ export async function getAPIData(page, url, headers, preview) {
           operator: operatorData,
           payment_method: paymentData,
           software_provider: providersData,
-          game: gamesData
+          game: gamesData,
         },
       },
       {},
       null,
       null,
-      pagePath
+      parseInt(params?.page_id)
     );
 
-    console.log(pagePath);
-    
-
     const pagePreviewProcessed = Object.values(pagesData).filter(
-      (value) => (value.path === pagePath)
+      (value) => parseInt(value.id) === parseInt(params?.page_id)
     );
-    
-    if(pagePreviewProcessed.length > 0 ) {
-      const previewPageData = pagePreviewProcessed[0]
+
+    if (pagePreviewProcessed.length > 0) {
+      const previewPageData = pagePreviewProcessed[0];
       const end = new Date() - start;
 
       console.log(
-        chalk.green('success') + chalk.whiteBright(` Preview Feature - %ds`),
+        chalk.green("success") + chalk.whiteBright(` Preview Feature - %ds`),
         end / 1000
       );
       return {
@@ -84,12 +77,11 @@ export async function getAPIData(page, url, headers, preview) {
     }
 
     console.log(
-      chalk.red('error') + chalk.whiteBright(` Preview Page Not Found ${params?.path}`)
+      chalk.red("error") +
+        chalk.whiteBright(` Preview Page Not Found ${params?.path}`)
     );
 
-    return {props: {}};
-
-    
+    return { props: {} };
   }
 
   const results = await loadSource(page.market);

package/src/hooks/link/index.js

@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { Link } from 'gatsby';
-import PropTypes from 'prop-types';
-import { previewFormat, previewPath, formatPath } from '~helpers/path';
+import { Link } from "gatsby";
+import PropTypes from "prop-types";
+import { formatPath } from "~helpers/path";
 
 function LinkCustom({
   children = <></>,
-  to = '',
-  activeClassName = '',
+  to = "",
+  activeClassName = "",
   partiallyActive = false,
   external = false,
   nofollow = false,
@@ -17,11 +17,6 @@ function LinkCustom({
     return <>{children}</>;
   }
 
-  let preview = false;
-
-  if (typeof window !== 'undefined' && window.location.pathname.includes('/preview')) {
-    preview = true;
-  }
   if (external) {
     return (
       <a
@@ -37,37 +32,26 @@ function LinkCustom({
     );
   }
   return (
-    <>
-      {preview ? (
-        <a
-          href={previewFormat(to)}
-          {...other}
-          onClick={(event) => {
-            event.preventDefault();
-            window.location = previewPath(to);
-          }}
-        >
-          {children}
-        </a>
-      ) : (
-        <Link
-          rel={nofollow ? 'nofollow' : null}
-          to={formatPath(to)}
-          activeClassName={activeClassName}
-          partiallyActive={partiallyActive}
-          {...other}
-        >
-          {children}
-        </Link>
-      )}
-    </>
+    <Link
+      rel={nofollow ? "nofollow" : null}
+      to={formatPath(to)}
+      activeClassName={activeClassName}
+      partiallyActive={partiallyActive}
+      {...other}
+    >
+      {children}
+    </Link>
   );
 }
 
 LinkCustom.propTypes = {
   to: PropTypes.string,
   nofollow: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.any]),
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.any,
+  ]),
   activeClassName: PropTypes.string,
   partiallyActive: PropTypes.bool,
   gtmClass: PropTypes.string,

package/src/hooks/link/link.test.js

@@ -1,18 +1,17 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Link from '.';
 
 describe('Link Component', () => {
   test('render Link', () => {
-    const { container, getAllByText, getByText } = render(
+    const { container, getByText } = render(
       <Link to="/test/link" className="testClassName">
         Test Content
       </Link>
     );
-    expect(getAllByText('Test Content')).toBeTruthy();
     expect(getByText('Test Content').closest('a')).toHaveAttribute('href', '/test/link');
     expect(container.querySelectorAll('.testClassName')).toHaveLength(1);
   });
@@ -34,27 +33,6 @@ describe('Link Component', () => {
     );
     expect(getByText('Test Content').closest('a').classList.contains('test-gtm')).toBe(true);
   });
-  test('with window.location.pathname: /preview', () => {
-    delete global.window.location;
-    global.window ??= Object.create(window);
-    global.window.location = {
-      pathname: '/preview',
-    };
-
-    const { container } = render(
-      <Link to="test/link">
-        <span>Just Test</span>
-      </Link>
-    );
-
-    expect(container.querySelectorAll('a')).toHaveLength(1);
-    expect(container.querySelectorAll('a')[0]).toHaveAttribute('href', 'test/link');
-    const ahref = container.querySelector('a');
-    // eslint-disable-next-line no-lone-blocks
-    {
-      ahref && fireEvent.click(ahref);
-    }
-  });
 
   test('Without to false ', () => {
     const { getByText } = render(
@@ -62,7 +40,7 @@ describe('Link Component', () => {
         <span>Just Test</span>
       </Link>
     );
-    expect(getByText('Just Test')).toBeTruthy();
+    expect(getByText('Just Test')).toBeInTheDocument();
   });
 
   test('Without to ', () => {
@@ -71,7 +49,7 @@ describe('Link Component', () => {
         <span>Just Test 2</span>
       </Link>
     );
-    expect(getByText('Just Test 2')).toBeTruthy();
+    expect(getByText('Just Test 2')).toBeInTheDocument();
   });
 });
 afterEach(() => {