gatsby-matrix-theme 12.0.2 → 13.0.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [13.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v12.0.2...v13.0.0) (2023-02-03)
+
+
+### Bug Fixes
+
+* add unit testting ([0139fd9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0139fd9385d19b4bb16942e6ccd67a9f8a9cf997))
+* background for template two ([c2bc128](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c2bc12831b13f27defb77b83494aea234d957c48))
+* header operator ([3ce7ea9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3ce7ea9366b93128d42b8cd691201e1f9b2b48f2))
+* test ([2cc51ef](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2cc51ef00fd1b8cdb18a1bb8e5cea8e619039e46))
+* validate payment images for comparison table ([83ac518](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/83ac518ab2de14fe14fd47b575001bff1656b603))
+
+
+### Code Refactoring
+
+* add description from section.header.extra_fields to description ([d110b66](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d110b66ce8a860ac63500273331bacbdba55d576))
+
+
+* Merge branch 'tm-3252-default-headers' into 'master' ([d2340be](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d2340bee8a67d99720dcf20e52d3dc9f3fa40084))
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([ad2f5ee](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ad2f5ee0a0b607a52ef31488194a7bfe2497a873))
+* Merge branch 'master' into tm-3252-default-headers ([c6c399e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c6c399e767300f5f9917163256777184c09a9760))
+* Merge branch 'tm-3264-remove-messing' into 'master' ([ce63995](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ce6399504468d44ab7b8edce4c763baa81fd41ac))
+
 ## [12.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v12.0.1...v12.0.2) (2023-02-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "12.0.2",
+  "version": "13.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/atoms/cards/comparison-table/table/index.js

@@ -83,9 +83,9 @@ export default function ComparisonTable({
       case 'casino_name':
         return (
           <td key={key} className={styles.casinoName}>
-            {item?.relation?.logo_url ? (
+            {imageObject?.filename ? (
               <LazyImg
-                src={imagePrettyUrl(imageObject?.filename || item?.relation.logo_url, 89, 89)}
+                src={imagePrettyUrl(imageObject?.filename, 89, 89)}
                 height={89}
                 width={89}
                 alt={itemName}
@@ -145,23 +145,24 @@ export default function ComparisonTable({
             <div key={key}>
               {item?.relation?.bonus?.deposit_methods &&
                 // eslint-disable-next-line array-callback-return
-                item?.relation?.bonus?.deposit_methods?.slice(0, 5)?.map((deposit) => (
-                  <Link to={deposit?.path}>
-                    <LazyImg
-                      key={`${key}-${deposit.name}`}
-                      src={imagePrettyUrl(
-                        deposit?.standardised_logo_filename_object?.filename ||
-                          deposit?.standardised_logo_filename ||
-                          deposit?.logo_filename,
-                        72,
-                        32
-                      )}
-                      width={72}
-                      height={32}
-                      alt={deposit.name}
-                    />
-                  </Link>
-                ))}
+                item?.relation?.bonus?.deposit_methods?.slice(0, 5)?.map((deposit) => {
+                  const logo =
+                    deposit?.standardised_logo_filename_object?.filename ||
+                    deposit?.standardised_logo_filename ||
+                    deposit?.logo_filename;
+                  if (!logo) return;
+                  return (
+                    <Link to={deposit?.path}>
+                      <LazyImg
+                        key={`${key}-${deposit.name}`}
+                        src={imagePrettyUrl(logo, 72, 32)}
+                        width={72}
+                        height={32}
+                        alt={deposit.name}
+                      />
+                    </Link>
+                  );
+                })}
             </div>
           </td>
         );

package/src/components/atoms/rating/index.js

@@ -3,8 +3,8 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import { translate, getObjectValue } from 'gatsby-core-theme/src/helpers/getters';
-import { isMobileDevice } from 'gatsby-core-theme/src/helpers/device-detect';
 import keygen from 'gatsby-core-theme/src/helpers/keygen';
+import { isMobileDevice } from '../../../helpers/mobile-detect';
 import operatorRatings from '../../../constants/ratings-constant';
 
 import styles from './ratings.module.scss';
@@ -34,11 +34,11 @@ export default function Ratings({ item, type, numOfStars = 5 }) {
         const component = componentToUse ? componentToUse(numOfStars, value) : false;
 
         if (component && value) {
-          valueDiplayed = component;
+          valueDiplayed = component || '-';
         } else if (fieldValue.includes('volatility')) {
-          valueDiplayed = rangeText[getObjectValue(item, fieldValue)] || 'TBA';
+          valueDiplayed = rangeText[getObjectValue(item, fieldValue)] || '-';
         } else {
-          valueDiplayed = value || 'TBA';
+          valueDiplayed = value || '-';
         }
 
         if (['coming_soon', 'inactive'].includes(item?.status)) {

package/src/components/atoms/rating/rating.test.js

@@ -38,7 +38,7 @@ describe('Rating component', () => {
     const { container, getByText, getAllByText } = render(<Ratings item={page()} type="game" />);
     expect(container.querySelectorAll('ul')).toHaveLength(1);
     expect(container.querySelectorAll('li')).toHaveLength(5);
-    expect(getByText('TBA')).toBeTruthy();
+
     expect(getAllByText(3)).toHaveLength(2);
     expect(getByText('Medium')).toBeTruthy();
   });
@@ -48,11 +48,6 @@ describe('Rating component', () => {
     expect(container.querySelectorAll('ul')).toHaveLength(0);
     expect(container.querySelectorAll('li')).toHaveLength(0);
   });
-
-  test('Rating no value in two column', () => {
-    const { getAllByText } = render(<Ratings item={page()} type="operator" />);
-    expect(getAllByText('TBA')).toHaveLength(2);
-  });
 });
 
 afterEach(() => {

package/src/components/molecules/header/variants/default/template-two/template-two.module.scss

@@ -1,181 +1,184 @@
 .templateTwo {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column-reverse;
-    padding: 0 1.6rem;
-
-    &::before,
-    &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        z-index: -1;
-        left: -1px;
-        right: -1px;
-        height: 100%;
-    }
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column-reverse;
+  padding: 0 1.6rem;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    z-index: -1;
+    left: -1px;
+    right: -1px;
+    height: 100%;
+  }
+
+  &::before {
+    background: white;
+    height: calc(100% - 300px);
 
-    &::before {
-        background: white;
-        height: calc(100% - 300px);
-        
-        @include min(tablet) {
-            right: auto;
-            left: 0;
-            width: 60%;
-            height: 100%;    
-        }
+    @include min(tablet) {
+      right: auto;
+      left: 0;
+      width: 60%;
+      height: 100%;
     }
+  }
 
-    &::after {
-        background: var(--template-two-bg-colour, linear-gradient(148.34deg, #4D80F7 14.79%, #7BA0F5 84.97%));
-        top: 0;
-        max-height: 268px;
-
-        @include min(tablet) {
-            right: 0;
-            left: auto;
-            width: 40%;
-            height: 100%;
-            max-height: none;
-        }
-    }
+  &::after {
+    background-color: hsla(0, 100%, 50%, 0);
+    background-image: radial-gradient(at 0% 0%, hsla(165, 62%, 69%, 1) 0px, transparent 50%),
+      radial-gradient(at 100% 0%, hsla(221, 90%, 63%, 1) 0px, transparent 50%),
+      radial-gradient(at 100% 100%, hsla(50, 100%, 56%, 1) 0px, transparent 50%),
+      radial-gradient(at 0% 100%, hsla(249, 42%, 46%, 1) 0px, transparent 50%);
+    top: 0;
+    max-height: 268px;
 
     @include min(tablet) {
-        flex-direction: row;
+      right: 0;
+      left: auto;
+      width: 40%;
+      height: 100%;
+      max-height: none;
     }
+  }
 
+  @include min(tablet) {
+    flex-direction: row;
+  }
 }
 
 .imgContainer {
-    width: 100%;
-    display: flex;
-    align-items: center;
+  width: 100%;
+  display: flex;
+  align-items: center;
 
-    @include min(laptop) {
-        margin-right: 5.8rem;
-        width: auto;
-    }
+  @include min(laptop) {
+    margin-right: 5.8rem;
+    width: auto;
+  }
 
-    img {
-        border-radius: 1.6rem;
+  img {
+    border-radius: 1.6rem;
 
-        @include min(tablet) {
-            padding: 5rem 0;
-        }
-        
-        @include min(laptop) {
-            max-width: 64.1rem;
-        }
-    }
-}
-
-.headerContainer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    
     @include min(tablet) {
-        align-items: flex-start;
-        width: 50%;
+      padding: 5rem 0;
     }
 
-    h1 {
-        font-weight: 800;
-        font-size: 3.2rem;
-        line-height: 4.2rem;
-        text-transform: capitalize;
-        color: #1C1A28;
-        margin: 0 0 3.2rem;
-
-        @include min(tablet) {
-            font-size: 6rem;
-            line-height: 7rem;
-            padding: 0 1.6rem 4rem 0;
-            margin: 0;
-        }
-    }
-
-    > a {
-        display: flex !important;
-        gap: 1.1rem;
-        margin-bottom: 6.7rem;
-        background-color: #5545A9 !important;
-        color: #ffffff !important;
-        font-size: 18px;
-        line-height: 20px;
-        padding: 2rem 2.4rem !important;
-        border-radius: 12px !important;
-        border: none !important;
+    @include min(laptop) {
+      max-width: 64.1rem;
     }
+  }
 }
 
-.bonusText {
-    font-weight: 700;
-    font-size: 1.3rem;
-    line-height: 1.9rem;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    color: #6b6a72;
-    margin-bottom: 0.8rem;
+.headerContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  @include min(tablet) {
+    align-items: flex-start;
+    width: 50%;
+  }
+
+  h1 {
+    font-weight: 800;
+    font-size: 3.2rem;
+    line-height: 4.2rem;
+    text-transform: capitalize;
+    color: #1c1a28;
+    margin: 0 0 3.2rem;
 
     @include min(tablet) {
-        font-size: 1.9rem;
-        line-height: 2.8rem;
+      font-size: 6rem;
+      line-height: 7rem;
+      padding: 0 1.6rem 4rem 0;
+      margin: 0;
     }
+  }
+
+  > a {
+    display: flex !important;
+    gap: 1.1rem;
+    margin-bottom: 6.7rem;
+    background-color: #5545a9 !important;
+    color: #ffffff !important;
+    font-size: 18px;
+    line-height: 20px;
+    padding: 2rem 2.4rem !important;
+    border-radius: 12px !important;
+    border: none !important;
+  }
+}
+
+.bonusText {
+  font-weight: 700;
+  font-size: 1.3rem;
+  line-height: 1.9rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #6b6a72;
+  margin-bottom: 0.8rem;
+
+  @include min(tablet) {
+    font-size: 1.9rem;
+    line-height: 2.8rem;
+  }
 }
 
 .tnc {
-    font-size: 1.2rem;
-    line-height: 2rem;
-    font-weight: 400;
-    
-    @include min(tablet) {
-        position: absolute;
-        bottom: 3.2rem;
-    }            
+  font-size: 1.2rem;
+  line-height: 2rem;
+  font-weight: 400;
+
+  @include min(tablet) {
+    position: absolute;
+    bottom: 3.2rem;
+  }
 }
 
 .blendColors {
-    &::after {
-        max-height: 300px;
+  &::after {
+    max-height: 300px;
+  }
+
+  .headerContainer {
+    width: 100%;
+  }
+
+  .tnc {
+    position: relative;
+    bottom: 0;
+    margin-top: 1rem;
+  }
+
+  @media only screen and (max-width: 767px) {
+    padding-top: 15rem;
+
+    .bonusText,
+    h1 {
+      color: #ffffff;
     }
 
-    .headerContainer {
-        width: 100%;
+    .bonusText {
+      margin-bottom: 1.6rem;
     }
 
-    .tnc {
-        position: relative;
-        bottom: 0;
-        margin-top: 1rem;
+    h1 {
+      display: inline;
+      font-size: 4.5rem;
+      line-height: 6rem;
+      margin: 0 0 4rem;
+      background: linear-gradient(to bottom, white 0%, white 110px, black 10%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
 
-    @media only screen and (max-width: 767px) {
-        padding-top: 15rem;
-
-        .bonusText,
-        h1 {
-            color: #ffffff;
-        }
-
-        .bonusText {
-            margin-bottom: 1.6rem;
-        }
-
-        h1 {
-            display: inline;
-            font-size: 4.5rem;
-            line-height: 6rem;
-            margin: 0 0 4rem;
-            background: linear-gradient(to bottom, white 0%, white 110px, black 10%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        a {
-            margin-bottom: 9rem;
-        }
+    a {
+      margin-bottom: 9rem;
     }
-}
+  }
+}

package/src/components/molecules/header/variants/operator/template-five/index.js

@@ -67,46 +67,51 @@ const TemplateFive = ({
   );
 
   return (
-    <div className={styles.container}>
-      <div className={styles.topSection}>{logo()}</div>
-      {header()}
-      <div className={styles.main}>
-        {extraFields?.summary && (
-          <div className={styles.decs} dangerouslySetInnerHTML={{ __html: extraFields?.summary }} />
-        )}
-        <div className={styles.ratings}>
-          {operatorRatings[type]?.slice(0, 3)?.map((elm) => {
-            const value = getObjectValue(relation, elm?.fieldValue);
-            return (
-              <div className>
-                <span className={styles.ratingLabel}>
-                  {translate(translations, elm?.translationKey, elm?.fieldLabel)}
-                </span>
-                <span className={styles.ratingValue}>
-                  {value}
-                  <span>/{numOfStars}</span>
-                </span>
-                <StarRating numOfStars={numOfStars} rating={value} />
-              </div>
-            );
-          })}
+    <div className={styles.background}>
+      <div className={styles.container}>
+        <div className={styles.topSection}>{logo()}</div>
+        {header()}
+        <div className={styles.main}>
+          {extraFields?.summary && (
+            <div
+              className={styles.decs}
+              dangerouslySetInnerHTML={{ __html: extraFields?.summary }}
+            />
+          )}
+          <div className={styles.ratings}>
+            {operatorRatings[type]?.slice(0, 3)?.map((elm) => {
+              const value = getObjectValue(relation, elm?.fieldValue);
+              return (
+                <div className>
+                  <span className={styles.ratingLabel}>
+                    {translate(translations, elm?.translationKey, elm?.fieldLabel)}
+                  </span>
+                  <span className={styles.ratingValue}>
+                    {value}
+                    <span>/{numOfStars}</span>
+                  </span>
+                  <StarRating numOfStars={numOfStars} rating={value} />
+                </div>
+              );
+            })}
+          </div>
         </div>
-      </div>
 
-      <div className={styles.featureImage}>
-        {featureImg?.filename && (
-          <LazyImage
-            src={imagePrettyUrl(featureImg?.filename, 413, 413)}
-            loading="eager"
-            width={413}
-            height={413}
-            alt={getAltText(featureImg)}
-          />
-        )}
-      </div>
+        <div className={styles.featureImage}>
+          {featureImg?.filename && (
+            <LazyImage
+              src={imagePrettyUrl(featureImg?.filename, 413, 413)}
+              loading="eager"
+              width={413}
+              height={413}
+              alt={getAltText(featureImg)}
+            />
+          )}
+        </div>
 
-      <div className={styles.operatorBanner}>
-        <OperatorBanner operator={relation} template={pageTemplate} />
+        <div className={styles.operatorBanner}>
+          <OperatorBanner operator={relation} template={pageTemplate} />
+        </div>
       </div>
     </div>
   );

package/src/components/molecules/header/variants/operator/template-five/template-five.module.scss

@@ -1,11 +1,21 @@
+.background {
+    background: linear-gradient(16.92deg, #F9F6E7 -4.7%, #FFFFFF 52.33%, #DDDAEE 110.01%);
+
+    @include min(tablet) {
+        background: linear-gradient(98.12deg, #F9F6E7 0%, #FFFFFF 50.23%, #DDDAEE 100%);
+    }
+}
+
 .container {
     display: grid;
     padding: 4rem 1.6rem;
-    background: linear-gradient(16.92deg, #F9F6E7 -4.7%, #FFFFFF 52.33%, #DDDAEE 110.01%);
+
     margin: var(--operator-template-five-margin-mobile, 0rem);
 
     @include min(tablet) {
-        background: linear-gradient(98.12deg, #F9F6E7 0%, #FFFFFF 50.23%, #DDDAEE 100%);
+        margin: 0 auto;
+        max-width: 1620px;
+
         grid-template-columns: 24rem;
     }
 
@@ -17,6 +27,7 @@
 
     @include min(desktop) {
         padding: 5rem 12rem;
+
     }
 }
 

package/src/gatsby-core-theme/components/molecules/header/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import Breadcrumbs from 'gatsby-core-theme/src/components/atoms/breadcrumbs';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { getSectionExtraField } from 'gatsby-core-theme/src/helpers/getters';
 import styles from './header.module.scss';
 
 export const relationContent = (section) => {
@@ -80,24 +81,25 @@ export const relationContent = (section) => {
       return <ModuleComponent page={section.page} image="../../../../images/verify.svg" />;
     }
     case 'page': {
-      let props;
+      let props = {
+        extraFields: section.page.extra_fields,
+        imageObj: section.page.featured_image_object,
+      };
+
       if (section?.page?.page_styles?.short_name === 'template_two') {
         ModuleComponent = loadable(() =>
           import('../../../../components/molecules/header/variants/default/template-two')
         );
-        props = {
-          extraFields: section.page.extra_fields,
-          imageObj: section.page.featured_image_object,
-        };
       } else {
         ModuleComponent = loadable(() =>
           import('../../../../components/molecules/header/variants/default/template-one')
         );
         props = {
+          ...props,
           title: section.page.title,
-          description: section.page.description,
-          extraFields: section.page.extra_fields,
-          imageObj: section.page.featured_image_object,
+          description:
+            section.page.description ||
+            getSectionExtraField(null, section.page.sections.header, 'header_text'),
         };
       }
       return <ModuleComponent {...props} />;

package/src/helpers/popup.test.js

@@ -0,0 +1,32 @@
+import { setIdleTimeout } from './popup';
+
+// this help us to simulate setTimeout and cleraTimeOut
+jest.useFakeTimers();
+
+describe('setIdleTimeout', () => {
+  it('calls onIdle after the specified number of seconds of inactivity', () => {
+    const onIdle = jest.fn();
+    setIdleTimeout(1, onIdle);
+
+    jest.advanceTimersByTime(999);
+    expect(onIdle).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(1);
+    expect(onIdle).toHaveBeenCalled();
+  });
+
+  it('restarts the timer when activity is detected', () => {
+    const onIdle = jest.fn();
+    setIdleTimeout(1, onIdle);
+
+    jest.advanceTimersByTime(999);
+    document.dispatchEvent(new Event('mousemove'));
+    jest.advanceTimersByTime(1000);
+
+    jest.advanceTimersByTime(999);
+    expect(onIdle).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(1);
+    expect(onIdle).toHaveBeenCalled();
+  });
+});

package/storybook/public/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.3c8ed572.iframe.bundle.js"></script><script src="371.33931d9d.iframe.bundle.js"></script><script src="main.df72707f.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.3c8ed572.iframe.bundle.js"></script><script src="371.33931d9d.iframe.bundle.js"></script><script src="main.314aafd1.iframe.bundle.js"></script></body></html>