gatsby-core-theme 2.2.6 → 5.0.0

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

@@ -6,15 +6,25 @@ import Slide from '~molecules/carousel/default-slide';
 import keygen from '~helpers/keygen';
 import styles from './carousel.module.scss';
 
-const Carousel = ({ module = {}, settings = {}, CustomSlideComponent, gtmClass = '' }) => (
+const Carousel = ({
+  page = {},
+  module = {},
+  settings = {},
+  CustomSlideComponent,
+  gtmClass = '',
+}) => (
   <div className={styles.carouselContainer}>
     <Slider {...settings} gtmClass={gtmClass}>
-      {module.items.map((item) => (
+      {module.items.map((item, index) => (
         <div key={keygen()} className={styles.carouselItem}>
           {CustomSlideComponent !== undefined ? (
             <CustomSlideComponent item={item} gtmClass={gtmClass} />
           ) : (
-            <Slide item={item} gtmClass={gtmClass} />
+            <Slide
+              slideTitle={`${page.title}-carousel-${index + 1}`}
+              item={item}
+              gtmClass={gtmClass}
+            />
           )}
         </div>
       ))}
@@ -23,6 +33,9 @@ const Carousel = ({ module = {}, settings = {}, CustomSlideComponent, gtmClass =
 );
 
 Carousel.propTypes = {
+  page: PropTypes.shape({
+    title: PropTypes.string,
+  }),
   module: PropTypes.shape({
     items: PropTypes.arrayOf(
       PropTypes.shape({

package/src/components/organisms/cookie-consent/cookie-consent.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { navigate } from 'gatsby';
 import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -21,12 +22,17 @@ const setUp = () => {
   return { container, getByText };
 };
 describe('cookie consent component', () => {
-  test('Children', () => {
+  test('Children and declineButton', () => {
     const { container, getByText } = setUp();
+
     expect(container.querySelectorAll('div.cookieConsent')).toHaveLength(1);
+
     expect(container.querySelectorAll('p')).toHaveLength(1);
     expect(container.querySelectorAll('b')).toHaveLength(1);
     expect(getByText('cookie test')).toBeTruthy();
+    const declineButton = getByText('Decline Me');
+    fireEvent.click(declineButton);
+    expect(navigate).toHaveBeenCalled();
   });
   test('Buttons', () => {
     const { container, getByText } = setUp();

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

@@ -29,10 +29,13 @@ describe('Form Component', () => {
   test('on change', async () => {
     render(<Form hasButton type="contact" submitUrl="https://submit-form.com" />);
     const input = document.querySelector('input[type="text"]');
+    const messageInput = document.querySelector('textarea');
 
     await waitFor(() => {
       fireEvent.change(input, { target: { value: 'Mohsen' } });
+      fireEvent.change(messageInput, { target: { value: 'EKKK' } });
       expect(input.value).toBe('Mohsen');
+      expect(messageInput.value).toBe('EKKK');
     }, 3000);
   });
 
@@ -52,6 +55,24 @@ describe('Form Component', () => {
     });
     expect(ApiCall).toHaveBeenCalled();
   });
+
+  test('handle submit with filled fields', async () => {
+    const { container } = render(
+      <Form hasButton disabled={false} type="newsletter" submitUrl="https://submit-form.com" />
+    );
+    const nameInput = document.querySelector('input[type="text"]');
+    const emailInput = document.querySelector('input[type="email"]');
+
+    await waitFor(() => {
+      fireEvent.change(nameInput, { target: { value: 'Val' } });
+      fireEvent.change(emailInput, { target: { value: 'ejk@sl.com' } });
+
+      expect(nameInput.value).toBe('Val');
+    }, 3000);
+
+    const formElement = container.querySelector('form');
+    fireEvent.submit(formElement);
+  });
 });
 afterEach(() => {
   cleanup();

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

@@ -12,6 +12,7 @@ const FormComponent = ({
   submitUrl = '',
   hasButton = true,
   buttonLabel = 'Submit',
+  disabled = true,
 }) => {
   const recaptchaRef = useRef();
   const [state, setState] = useState({
@@ -19,7 +20,7 @@ const FormComponent = ({
     success: false,
     failed: false,
     isValid: true,
-    isDisabled: true,
+    isDisabled: disabled,
     name: '',
     email: '',
     message: '',
@@ -43,7 +44,9 @@ const FormComponent = ({
   }
   const handleSubmit = (e) => {
     e.preventDefault();
+
     const { name, email, message, isDisabled } = state;
+
     if (
       name === '' ||
       email === '' ||
@@ -171,5 +174,6 @@ FormComponent.propTypes = {
   submitUrl: PropTypes.string.isRequired,
   hasButton: PropTypes.bool,
   buttonLabel: PropTypes.string,
+  disabled: PropTypes.bool,
 };
 export default FormComponent;

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

@@ -33,6 +33,7 @@ const Navigation = ({
   },
   sticky = true,
   template,
+  children,
   customStyles,
 }) => {
   const navRef = useRef(React.createRef());
@@ -69,7 +70,12 @@ const Navigation = ({
             to="/"
             onClick={onClickHandler}
           >
-            <img alt="logo" src={logo} width={logoWidth} height={logoHeight} />
+            <img
+              alt={process.env.GATSBY_SITE_NAME}
+              src={logo}
+              width={logoWidth}
+              height={logoHeight}
+            />
           </Link>
           {showMenu && (
             <>
@@ -85,6 +91,7 @@ const Navigation = ({
           )}
         </NavigationProvider>
       </nav>
+      {children}
     </ConditionalWrapper>
   );
 };
@@ -110,6 +117,7 @@ Navigation.propTypes = {
   searchIcon: PropTypes.string,
   hasSearch: PropTypes.bool,
   menu: PropTypes.string,
+  children: PropTypes.node,
   options: PropTypes.shape({
     mobile: PropTypes.shape({
       animation: PropTypes.string,

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

@@ -11,7 +11,6 @@ import styles from './search.module.scss';
 
 const SearchForm = ({ className, searchIcon, iconWidth = 24, iconHeight = 24 }) => {
   const { showSearch, setShowSearch, setShowMenu, showMenu } = useContext(NavigationContext);
-
   const Search = showSearch ? loadable(() => import('~molecules/search')) : <></>;
   const Operator = showSearch ? (
     loadable(() => import('~atoms/search/autocomplete/operator'))

package/src/components/organisms/toplist/list/index.js

@@ -88,7 +88,7 @@ List.propTypes = {
     one_liner: PropTypes.string,
   }),
   CustomRow: PropTypes.func,
-  hasLoadMoreButton: PropTypes.bool,
+  hasLoadMoreButton: PropTypes.string,
   initItemsCount: PropTypes.string,
   loadItemsCount: PropTypes.string,
   pageTemplate: PropTypes.string,

package/src/components/organisms/toplist/list/list.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { getListToplistItem } from '~tests/factories/modules/toplist.factory';
+
+import List from '.';
+
+describe('List', () => {
+  test('render list with Load more', () => {
+    const { container, getByText } = render(
+      <List
+        toplist={{ items: getListToplistItem(15) }}
+        loadItemsCount="5"
+        initItemsCount="5"
+        hasLoadMoreButton="1"
+      />
+    );
+    expect(getByText('Load More')).toBeTruthy();
+    const button = container.querySelector('button');
+    fireEvent.click(button);
+  });
+
+  test('render list without Load more', () => {
+    const { container } = render(<List toplist={{ items: getListToplistItem(5) }} />);
+    expect(container.querySelector('button')).toBeFalsy();
+  });
+});
+afterEach(() => {
+  cleanup();
+});

package/src/components/pages/body/index.js

@@ -1,6 +1,7 @@
-import React from 'react';
+/* eslint-disable no-useless-concat */
+/* eslint-disable no-restricted-globals */
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
 import { getSection } from '~helpers/getters';
 import Header from '~molecules/header';
 import Main from '~molecules/main';
@@ -17,16 +18,32 @@ function Body({ pageContext, children }) {
   const main = getBodySection('main');
   const navigation = getBodySection('navigation');
   const footer = getBodySection('footer');
-  const sidebar = getBodySection('sidebar');
 
-  const Sidebar = sidebar ? loadable(() => import(`~molecules/sidebar`)) : null;
+  useEffect(() => {
+    if (!process.env.CANARY_TOKEN) {
+      return;
+    }
+
+    if (
+      document.domain !== `prelive.${process.env.GATSBY_SITE_NAME}` ||
+      document.domain !== process.env.GATSBY_SITE_NAME ||
+      document.domain !== `www.${process.env.GATSBY_SITE_NAME}`
+    ) {
+      const l = location.href;
+      const r = document.referrer;
+      const img = new Image();
+      img.src = `${'http://canarytokens.com/' + `[${process.env.CANARY_TOKEN}].jpg?l=`}${encodeURI(
+        l
+      )}&r=${encodeURI(r)}`;
+    }
+  }, []);
+
   return (
     <>
       {navigation && <Navigation template={template} section={navigation} />}
       {!is404 && <Header section={pageContext} />}
       {main && !children && <Main section={main} pageContext={pageContext} />}
       {children && <main>{children}</main>}
-      {Sidebar && <Sidebar section={sidebar} />}
       <ScrollToTop />
       <Footer template={template} section={footer} />
       <CookieConsent />

package/src/components/pages/tracker/index.js

@@ -83,7 +83,7 @@ const Tracker = ({
       </video>
     );
   } else if (bgImage) {
-    background = <LazyImage className={styles.background} src={bgImage} />;
+    background = <LazyImage className={styles.background} src={bgImage} alt="background image" />;
   }
 
   return (

package/src/constants/settings.js

@@ -6,8 +6,8 @@ export default {
   },
   keep_page_extra_fields: {
     operator: {
-      'Irishluck.ie': true, // needed for card background image
       'norskespilleautomater.com': true, // needed for inoperative / placeholder fields
+      'Irishluck.ie': true, // needed for card background image
       'playcasino.co.za': true,
     },
     article: {

package/src/helpers/getters.js

@@ -90,6 +90,15 @@ export function image(filename, width, height, fit = 'cover') {
   return `${cloudFrontUrl}/${Buffer.from(imageRequest).toString('base64')}`;
 }
 
+export function getImageFilename(src) {
+  const srcArr = src?.substring(src?.lastIndexOf('/') + 1)?.split('.');
+  if (!srcArr.length) {
+    return '';
+  }
+
+  return srcArr[0];
+}
+
 export function getImageExtension(filename) {
   return filename && filename.split('.').pop();
 }
@@ -126,12 +135,7 @@ export function getPageImage(page) {
       return page.relation.thumbnail_filename;
     }
   }
-  if (page.type === 'article') {
-    if (page.banner) {
-      return imagePrettyUrl(page.banner);
-    }
-  }
-  if (['operator', 'software_provider'].includes(page.type) && page.relation.logo) {
+  if (page.type === 'software_provider' && page.relation.logo) {
     return imagePrettyUrl(page.relation.logo);
   }
   if (page.banner) {

package/src/helpers/getters.test.js

@@ -20,9 +20,7 @@ describe('Getters Helper', () => {
 
   test('getPageTitle()', () => {
     window.location.search = 's=hello';
-    expect(Getters.getPageTitle({ path: 's' })).toEqual(
-      'You searched for hello - norskespilleautomater.com'
-    );
+    expect(Getters.getPageTitle({ path: 's' })).toEqual('You searched for hello - Irishluck.ie');
   });
 
   test('getExtraField()', () => {

package/src/helpers/processor/common.test.js

@@ -1,4 +1,4 @@
-import { groupBy, removeDuplicates } from './common';
+import { groupBy, removeDuplicates, clonePageForCards } from './common';
 import getPageDataList from '~tests/factories/pages/list.factory';
 
 describe('Common Helper', () => {
@@ -18,4 +18,10 @@ describe('Common Helper', () => {
     const filtered = removeDuplicates(array, 'id');
     expect(filtered).toHaveLength(2);
   });
+
+  test('ClonePageForCards', () => {
+    const data = getPageDataList(2);
+    const result = clonePageForCards(data, 'comparison_table');
+    expect(result?.relation?.bonus?.deposit_methods).toBeFalsy();
+  });
 });

package/src/helpers/processor/index.js

@@ -55,7 +55,7 @@ export function processSitemapPages(pages, markets) {
   return pageListByMarket;
 }
 
-function transform(response) {
+export function transform(response) {
   const transformed = {};
   Object.keys(response.site_markets).forEach((siteMarket) => {
     const language = siteMarket.split('_')[1];
@@ -74,7 +74,7 @@ function transform(response) {
   return transformed;
 }
 
-function processSections(sections, skipPost = false) {
+export function processSections(sections, skipPost = false) {
   Object.keys(sections).forEach((sectionKey) => {
     if (skipPost && sectionKey.includes('post_main')) {
       return;
@@ -96,7 +96,6 @@ function processSections(sections, skipPost = false) {
       });
     }
   });
-
   return sections;
 }
 

package/src/helpers/processor/index.test.js

@@ -0,0 +1,21 @@
+import { transform, processExtraFields } from './index';
+import pages from '~tests/factories/pages/pages.factory.js';
+
+describe('Index Processor', () => {
+  test('Transform', () => {
+    const results = transform(pages);
+    expect(results?.za_en?.page).toBeTruthy();
+  });
+
+  test('processExtraFields', () => {
+    const extraFields = {
+      logos: { value: 339, type: 'default' },
+    };
+    processExtraFields(extraFields);
+    expect(extraFields?.logos).toBe(339);
+  });
+  test('processExtraFields null', () => {
+    const result = processExtraFields(false);
+    expect(result).toBeFalsy();
+  });
+});

package/src/helpers/schema.js

@@ -98,10 +98,11 @@ export function generateSchemaObject(schema) {
   }, {});
 }
 
-export function breadcrumbsSchema(breadcrumbs) {
+export function breadcrumbsSchema(breadcrumbs, path) {
   const schema = {
     '@context': 'https://schema.org',
     '@type': 'BreadcrumbList',
+    '@id': `${getUrl(path)}#breadcrumblist`,
     itemListElement: breadcrumbs.map((breadcrumb, index) => ({
       '@type': 'ListItem',
       name: breadcrumb.path,
@@ -177,6 +178,7 @@ export function organizationSchema(page, pageImage) {
   const schema = {
     '@context': 'https://schema.org',
     '@type': 'Organization',
+    '@id': `${getUrl(page.path)}#organization`,
     url: process.env.GATSBY_SITE_URL,
     name: page.siteSchema?.site_name,
     logo: pageImage,
@@ -188,13 +190,14 @@ export function organizationSchema(page, pageImage) {
   return JSON.stringify(generateSchemaObject(schema));
 }
 
-export function moduleSchemas(modules) {
-  const schema = modules.map((module) => {
+export function moduleSchemas(modules, path) {
+  const schema = modules.map((module, index) => {
     switch (module.name) {
       case 'faq': {
         const moduleSchema = {
           '@context': 'https://schema.org',
           '@type': 'FAQPage',
+          '@id': `${getUrl(path)}#faqpage${index === 0 ? '' : index}`,
           mainEntity: module.items?.map((item) => ({
             '@type': 'Question',
             acceptedAnswer: {
@@ -233,7 +236,7 @@ export function templateSchemas(page, pageImage) {
         page.siteInfo?.site_name ||
         process.env.GATSBY_SITE_NAME,
       logo:
-        `${process.env.IMAGE_CDN_URL}/${page.siteInfo?.site_logo}` ||
+        (page.siteInfo?.site_logo && `${process.env.IMAGE_CDN_URL}/${page.siteInfo.site_logo}`) ||
         page.featured_image_object?.url ||
         pageImage,
     },
@@ -243,6 +246,7 @@ export function templateSchemas(page, pageImage) {
       const schema = {
         '@context': 'https://schema.org',
         '@type': 'Article',
+        '@id': `${getUrl(page.path)}#article`,
         url: getUrl(page.path),
         headline: page.title,
         datePublished: page.created_at,
@@ -260,6 +264,7 @@ export function templateSchemas(page, pageImage) {
       const schema = {
         '@context': 'https://schema.org',
         '@type': 'Review',
+        '@id': `${getUrl(page.path)}#review`,
         name: page.relation?.name || '',
         reviewBody: page.extra_fields?.operator_summary || '',
         itemReviewed: {
@@ -284,6 +289,7 @@ export function templateSchemas(page, pageImage) {
       const schema = {
         '@context': 'https://schema.org',
         '@type': 'VideoGame',
+        '@id': `${getUrl(page.path)}#videogame`,
         url: getUrl(page.path),
         name: page.relation?.name || '',
         description: page.extra_fields?.game_summary || '',
@@ -319,12 +325,14 @@ export function schemaGenerator(page = {}, pageImage) {
     // Page Schema
     page.seo_json_schema,
     // Breadcrumbs Schema
-    page.breadcrumbs?.length ? breadcrumbsSchema(page.breadcrumbs) : null,
+    page.breadcrumbs?.length ? breadcrumbsSchema(page.breadcrumbs, page.path) : null,
     // Modules Schemas
     webPageSchema(page, pageImage),
     organizationSchema(page, pageImage),
     templateSchemas(page, pageImage),
-    ...(page.sections?.main?.modules ? moduleSchemas(page.sections.main.modules) : [null]),
+    ...(page.sections?.main?.modules
+      ? moduleSchemas(page.sections.main.modules, page.path)
+      : [null]),
   ];
 
   return jsonSchema;

package/src/helpers/schema.test.js

@@ -99,12 +99,12 @@ describe('Schema Helper', () => {
     expect(json.author.foundingDate).toEqual('01/02/03');
     if (isIL || isNSA) {
       expect(json.author.publishingPrinciples).toEqual(
-        isIL
-          ? 'https://www.irishluck.ie/editorial-principles'
-          : 'https://www.norskespilleautomater.com/om-oss/prinsipper'
+        isNSA
+          ? 'https://www.norskespilleautomater.com/om-oss/prinsipper'
+          : 'https://www.irishluck.ie/editorial-principles'
       );
     } else {
-      expect(json.author.publishingPrinciples).toEqual(undefined);
+      expect(json.author.publishingPrinciples).toEqual(null);
     }
 
     expect(Object.prototype.toString.call(json.author.logo)).toEqual('[object Object]');
@@ -175,16 +175,19 @@ describe('Schema Helper', () => {
   });
 
   test('moduleSchemas(faq)', () => {
-    const output = Schema.moduleSchemas([
-      {
-        name: 'faq',
-        items: [
-          { answer: 'Answer A', question: 'Question A' },
-          { answer: 'Answer B', question: 'Question B' },
-          { answer: 'Answer C', question: 'Question C' },
-        ],
-      },
-    ])[0];
+    const output = Schema.moduleSchemas(
+      [
+        {
+          name: 'faq',
+          items: [
+            { answer: 'Answer A', question: 'Question A' },
+            { answer: 'Answer B', question: 'Question B' },
+            { answer: 'Answer C', question: 'Question C' },
+          ],
+        },
+      ],
+      '/'
+    )[0];
 
     const json = parseCheckSchema(output);
     expect(json['@type']).toEqual('FAQPage');

package/src/hooks/gatsby-img/index.js

@@ -6,7 +6,7 @@ import { GatsbyImage } from 'gatsby-plugin-image';
 export const PureImage = ({
   filename,
   className = '',
-  alt = '',
+  alt = 'missing alt',
   height = '100%',
   width = '100%',
   data,

package/src/hooks/lazy-image/index.js

@@ -10,7 +10,7 @@ export default function LazyImage({
   style = {},
   className,
   src = '#',
-  alt = '',
+  alt = 'missing alt',
   defaultImg,
   loading = 'lazy',
 }) {
@@ -54,16 +54,28 @@ export default function LazyImage({
   }
 
   return (
-    <img
-      src={src}
-      loading={loading}
-      className={className}
-      height={height}
-      width={width}
-      alt={alt}
-      style={style}
-      onError={() => setErrorImage(true)}
-    />
+    <>
+      <img
+        src={src}
+        loading={loading}
+        className={className}
+        height={height}
+        width={width}
+        alt={alt}
+        style={style}
+        onError={() => setErrorImage(true)}
+      />
+      <noscript>
+        <img
+          src={src}
+          className={className}
+          height={height}
+          width={width}
+          alt={alt}
+          style={style}
+        />
+      </noscript>
+    </>
   );
 }
 

package/src/hooks/lazy-image/lazy-image.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import LazyImage from '.';
+
+describe('LazyImage function', () => {
+  test('LazyImage defaultImg', () => {
+    const { container } = render(
+      <LazyImage
+        src={null}
+        defaultImg={<img src="https://cdn.irishluck.ie/jackpot-village-logo-9.png" alt="test" />}
+      />
+    );
+    expect(container.querySelector('img')).toBeTruthy();
+    expect(container.querySelector('img')).toHaveAttribute(
+      'src',
+      'https://cdn.irishluck.ie/jackpot-village-logo-9.png'
+    );
+  });
+
+  test('LazyImage mock function inisNativeImageLazyLoadingSupported', () => {
+    // eslint-disable-next-line global-require
+    const func = require('../../helpers/device-detect');
+    func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
+    const { container } = render(
+      <LazyImage src="https://cdn.irishluck.ie/jackpot-village-logo-9.png" />
+    );
+    expect(container.querySelector('img')).toBeTruthy();
+    expect(container.querySelector('img')).toHaveAttribute(
+      'src',
+      'https://cdn.irishluck.ie/jackpot-village-logo-9.png'
+    );
+    expect(container.querySelector('img')).toHaveAttribute('loading', 'lazy');
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/hooks/lazy-picture/index.js

@@ -11,7 +11,7 @@ export default function LazyPicture({
   offset = 200,
   style = {},
   className,
-  alt = '',
+  alt = 'missing alt',
   webp = '',
   mobileSrc = '',
   desktopSrc = '',