gatsby-matrix-theme 3.2.14 → 3.2.18

package/CHANGELOG.md

@@ -1,3 +1,65 @@
+## [3.2.18](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.17...v3.2.18) (2022-01-25)
+
+
+### Bug Fixes
+
+* cards v2 table translation key ([248cc7e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/248cc7e36150831db8e7c598db5b537aee9b2a4f))
+* iframe default image ([538c356](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/538c3562e2e81cc78cc5b06384e616f79f082da6))
+
+
+### Config
+
+* updated core version ([b76c067](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b76c0674a927d8b90b14f561d4a89382ad309538))
+
+
+* Merge branch 'tm-2671-iframe-default-image' into 'master' ([839702e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/839702e3ff05b1bfa2133b3c3748f592c5292be6))
+* Merge branch 'tm-2667-cards-v2-table' into 'master' ([a3ca044](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a3ca044169985daba1f5a7960d77c3a28cc68838))
+
+## [3.2.17](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.16...v3.2.17) (2022-01-21)
+
+
+### Config
+
+* updated core version ([59be540](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/59be540b131c9432fedcdaf3ea0ea0644ac63dbf))
+* updated core version ([a2b7043](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a2b70435b212a8bdf89f59885b2d8ebf5c9418ef))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([be52d15](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/be52d153cedb0a88b07a99300f605ddc8e736bbf))
+
+## [3.2.16](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.15...v3.2.16) (2022-01-20)
+
+
+### Bug Fixes
+
+* cards v2 tables ([9bf37b7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9bf37b745affa8bd3fc5f06dcd37ff08a5f59c4c))
+* table cards styling ([47c30d5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/47c30d5a0c8301ea0156af02274c9f82e364f48e))
+
+
+### Config
+
+* updated core theme version ([e870906](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e870906b830e863854da1c23f25eec56302e1cc1))
+
+
+* Merge branch 'tm-2597-table-fixes' into 'master' ([3c97a96](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3c97a9622fa85956e9ffbaf9cd83f497c9b52a80))
+
+## [3.2.15](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.14...v3.2.15) (2022-01-20)
+
+
+### Bug Fixes
+
+* make style and add load more button in payment section ([360f920](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/360f92081de6587872df734d9c7c53e01c6a7cbf))
+* table changes ([50c01df](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/50c01dfe13ece0ffc14afff598c067c53e5c1b6a))
+
+
+### Code Refactoring
+
+* comparison module logic ([50a34a0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/50a34a0556c3523e1c23bbfd25c8ca7ac85cf96d))
+
+
+* Merge branch 'tm-2585-comparison-module-changes' into 'master' ([733f558](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/733f5580f353ac5e98a4788a0d350b909ea186f1))
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme into tm-2585-comparison-module-changes ([e5ccc72](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e5ccc72e81cc297ce782b0da84a1bab4aadda225))
+* Merge branch 'tm-2597-operators-table' into 'master' ([dacec3d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dacec3d702a26138ba4dc7bf98279bb93219d876))
+
 ## [3.2.14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.13...v3.2.14) (2022-01-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.2.14",
+  "version": "3.2.18",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^2.2.0",
+    "gatsby-core-theme": "^2.2.3",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

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

@@ -1,7 +1,9 @@
-import React, { useContext } from 'react';
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { AiOutlineCheckCircle } from 'react-icons/ai';
-import { VscFiles } from 'react-icons/vsc';
 import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImg from 'gatsby-core-theme/src/hooks/lazy-image';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
@@ -9,7 +11,6 @@ import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
-
 import styles from './table.module.scss';
 
 const listHeadings = [
@@ -24,6 +25,7 @@ const listHeadings = [
   {
     defaultValue: 'Bonus',
     key: 'bonus',
+    // customComponent: ({operator}) => ( <td>{operator.title}</td> ), This is an example
   },
   {
     defaultValue: 'Top Features',
@@ -46,14 +48,25 @@ const listHeadings = [
     key: 'licenses',
   },
 ];
-export default function ComparisonTable({ items, tabelInfo = listHeadings }) {
+export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKey = 'play_now' }) {
   const { translations } = useContext(Context) || {};
+  const [showAllPayment, setShowAllPayment] = useState([]);
+
+  const showAllPayments = (index) => {
+    setShowAllPayment([...showAllPayment, index]);
+  };
+
+  const cell = (heading, item, key, index) => {
+    const rowData = tabelInfo.find((m) => m.key === heading);
+    if (rowData && rowData.customComponent) {
+      const CustomComponent = rowData.customComponent;
+      return <CustomComponent operator={item} />;
+    }
 
-  const cell = (heading, item, index) => {
     switch (heading) {
       case 'casino_name':
         return (
-          <td key={index} className={styles.casinoName}>
+          <td key={key} className={styles.casinoName}>
             <LazyImg
               src={imagePrettyUrl(item?.relation?.logo_url)}
               height={89}
@@ -66,7 +79,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings }) {
                 tracker="main"
                 operator={item?.relation}
                 // new key
-                translationKey="play_ex"
+                translationKey={ctaKey}
                 gtmClass="comparison-table-gtm btn-cta"
               />
             </div>
@@ -74,20 +87,20 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings }) {
         );
       case 'rating':
         return (
-          <td key={index} className={styles.raiting}>
+          <td key={key} className={styles.raiting}>
             <StarRating numOfStars={5} rating={item?.relation?.rating} />
-            <Link to={item.path}> {translate(translations, 'review', 'Read Review')} </Link>
+            <Link to={item.path}> {translate(translations, 'review', 'Review')} </Link>
           </td>
         );
       case 'bonus':
         return (
-          <td key={index} className={styles.bonus}>
+          <td key={key} className={styles.bonus}>
             <Bonus tracker="main" item={item?.relation} />
           </td>
         );
       case 'top_features':
         return (
-          <td key={index} className={styles.topFeatures}>
+          <td key={key} className={styles.topFeatures}>
             {item?.relation?.selling_points &&
               item?.relation?.selling_points.map((sellingPoint) => (
                 <span key={sellingPoint}>
@@ -96,67 +109,61 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings }) {
               ))}
           </td>
         );
-      case 'coupon_code':
-        return (
-          <td key={index} className={styles.couponCode}>
-            {item?.relation?.extra_fields?.coupon_code && (
-              <>
-                <p>
-                  {item?.relation?.extra_fields?.coupon_code}{' '}
-                  <VscFiles color="var(--coupon-code-color);" />
-                </p>
-              </>
-            )}
-          </td>
-        );
       case 'payment_methods':
         return (
-          <td key={index} className={styles.paymentMethods}>
-            {item?.relation?.bonus?.deposit_methods &&
-              item?.relation?.bonus?.deposit_methods.slice(0, 5).map((deposit) => (
-                <span key={deposit.name}>
-                  <LazyImg
-                    src={imagePrettyUrl(deposit?.logo_filename)}
-                    width={72}
-                    height={72}
-                    alt={deposit.name}
-                  />
-                </span>
-              ))}
-            {item?.relation?.bonus?.deposit_methods?.length > 5 && (
-              <span>+{item?.relation?.bonus?.deposit_methods.length - 5}</span>
-            )}
+          <td key={key} className={styles.paymentMethods}>
+            <div>
+              {item?.relation?.bonus?.deposit_methods &&
+                // eslint-disable-next-line array-callback-return
+                item?.relation?.bonus?.deposit_methods.map((deposit, i, list) => {
+                  if (i < (showAllPayment.includes(index) ? list.length : 5)) {
+                    return (
+                      <span key={deposit.name}>
+                        <LazyImg
+                          src={imagePrettyUrl(deposit?.logo_filename)}
+                          width={72}
+                          height={72}
+                          alt={deposit.name}
+                        />
+                      </span>
+                    );
+                  }
+                })}
+              {item?.relation?.bonus?.deposit_methods?.length > 5 &&
+                !showAllPayment.includes(index) && (
+                  <a
+                    onClick={() => {
+                      showAllPayments(index);
+                    }}
+                  >
+                    +{item?.relation?.bonus?.deposit_methods.length - 5}
+                  </a>
+                )}
+            </div>
           </td>
         );
       case 'banking':
         return (
-          <td key={index} className={styles.banking}>
-            <p>
-              {translate(translations, 'min_deposit', 'Min Deposit')}
-              <span>{item?.relation?.bonus?.min_deposit}</span>
-            </p>
-            <p>
-              {translate(translations, 'max_withdrawal', 'Max Withdrawal')}
-              <span>{item?.relation?.bonus?.max_withdrawal}</span>
-            </p>
-            <p>
-              {translate(translations, 'currency_support', 'Currency Support')}
-              <span>
-                {item?.relation?.bonus?.currencies &&
-                  item?.relation?.bonus?.currencies
-                    .slice(0, 3)
-                    .map((currencies, i, list) => (
-                      <>{`${currencies.iso_code}${i + 1 < list.length ? ', ' : ''}`}</>
-                    ))}
-              </span>
-            </p>
+          <td key={key} className={styles.banking}>
+            {item?.relation?.bonus?.min_deposit && (
+              <p>
+                {translate(translations, 'min_deposit', 'Min Deposit')}
+                <span>{item.relation.bonus.min_deposit}</span>
+              </p>
+            )}
+            {item?.relation?.bonus?.max_withdrawal && (
+              <p>
+                {translate(translations, 'max_withdrawal', 'Max Withdrawal')}
+                <span>{item.relation.bonus.max_withdrawal}</span>
+              </p>
+            )}
           </td>
         );
       case 'currencies':
         return (
-          <td key={index} className={styles.currencies}>
+          <td key={key} className={styles.currencies}>
             {item?.relation?.bonus?.currencies &&
-              item?.relation?.bonus?.currencies.map((currencies) => (
+              item?.relation?.bonus?.currencies.slice(0, 6).map((currencies) => (
                 // eslint-disable-next-line react/no-array-index-key
                 <span key={currencies.iso_code}>{currencies.iso_code} </span>
               ))}
@@ -164,15 +171,17 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings }) {
         );
       case 'licenses':
         return (
-          <td key={index} className={styles.licenses}>
+          <td key={key} className={styles.licenses}>
             {item?.relation?.bonus?.license_objects &&
-              item?.relation?.bonus?.license_objects.map((license) => (
-                <LazyImg
-                  src={imagePrettyUrl(license?.logo_filename)}
-                  height={32}
-                  alt={license.name}
-                />
-              ))}
+              item?.relation?.bonus?.license_objects
+                .slice(0, 3)
+                .map((license) => (
+                  <LazyImg
+                    src={imagePrettyUrl(license?.logo_filename)}
+                    height={32}
+                    alt={license.name}
+                  />
+                ))}
           </td>
         );
       default:
@@ -186,7 +195,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings }) {
       const cells = [];
 
       items.forEach((item, index) => {
-        cells.push(cell(heading.key, item, `${heading}-${index}`));
+        cells.push(cell(heading.key, item, `${heading}-${index}`, index));
       });
 
       row.push(

package/src/components/atoms/cards/comparison-table/table/table.module.scss

@@ -66,11 +66,13 @@
     }
 
     .bonus {
-      div:first-child {
+      @include flex-direction(column);
+      @include flex-align(flex-start, column);
+      p:first-child {
         font-size: 1.6rem;
         font-weight: bold;
       }
-      div:nth-child(2) {
+      p:nth-child(2) {
         font-size: 1.4rem;
         font-weight: bold;
       }
@@ -112,14 +114,17 @@
         line-height: 2.4rem;
         margin-bottom: 1rem;
         color: black;
-        span {
+        a {
           font-weight: bold;
+          text-decoration: none;
         }
       }
     }
     .currencies {
       padding: 1.6rem 1rem;
+      @include flex-align(center, flex-start);
       span {
+        text-align: center;
         margin-left: 0.4rem;
         background: var(--comparison-currencies-background-color);
         color: var(--comparison-currencies-text-color);
@@ -128,47 +133,41 @@
         font-weight: bold;
         font-size: 12px;
         line-height: 18px;
-        width: 4.4rem;
+        width: 4.2rem;
         height: 2.4rem;
         padding: 0.499rem 0.8rem;
         display: inline-block;
       }
     }
     .paymentMethods {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      span {
-        @include flex-direction(row);
-        @include flex-align(center, center);
-        font-weight: bold;
-        font-size: 14px;
-        line-height: 18px;
-        object-fit: contain;
-        color: black;
-        margin-bottom: 0.5rem;
-        margin-top: 0.5rem;
-        img {
-          width: 7.2rem;
-          height: 3.2rem;
-          object-fit: contain;
-        }
+      height: 12.8rem;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        width: 3px;
       }
-    }
-    .couponCode {
-      @include flex-align(center, flex-start);
-      box-sizing: border-box;
-      p {
-        @include flex-align(center, center);
-        border: 1px dashed var(--coupon-code-color);
-        background-color: var(--backgorund--coupon-code-color);
-        width: fit-content;
-        padding: 0.4rem 1.6rem;
-        border-radius: 0.5rem;
-        font-weight: bold;
-        font-size: 1.4rem;
-        color: var(--coupon-code-color);
-        svg{
-          margin-left: 1rem;
+      &::-webkit-scrollbar-thumb {
+        background-color: darkgrey;
+      }
+      >div{
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 1rem;
+        span, a {
+          @include flex-direction(row);
+          @include flex-align(center, center);
+          font-weight: bold;
+          font-size: 14px;
+          line-height: 18px;
+          object-fit: contain;
+          color: black;
+          margin-top: 0.5rem;
+          background-color: white;
+          width: 100%;
+          img {
+            width: 7.2rem;
+            height: 3.2rem;
+            object-fit: contain;
+          }
         }
       }
     }

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

@@ -1,9 +1,10 @@
 /* eslint-disable camelcase */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import Link from 'gatsby-core-theme/src/hooks/link';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
-import { translate, getBonus } from 'gatsby-core-theme/src/helpers/getters';
+import { translate, getBonus, prettyTracker } from 'gatsby-core-theme/src/helpers/getters';
+import Link from 'gatsby-core-theme/src/hooks/link';
+
 import styles from './table.module.scss';
 
 const CasinosTable = ({ module }) => {
@@ -28,23 +29,36 @@ const CasinosTable = ({ module }) => {
       <table>
         <thead>
           <tr>
-            <th>{`${translate(translations, 'casino', 'Casino')}`}</th>
-            <th>{`${translate(translations, 'bonus', 'Bonus')}`}</th>
-            <th>{`${translate(translations, 'visit_casino', 'Visit casino')}`}</th>
+            <th>{`${translate(translations, 'online_casino', 'Online casino')}`}</th>
+            <th>{`${translate(translations, 'welcome_bonus', 'Welcome bonus')}`}</th>
+            <th>{`${translate(translations, 'visit_online_casino', 'Visit online casino')}`}</th>
           </tr>
         </thead>
         <tbody>
           {items &&
             items.map((item) => (
               <tr>
-                <td>{item.title}</td>
                 <td>
-                  {getBonus('main', item?.relation) && oneLiner(getBonus('main', item?.relation))}
+                  <Link
+                    to={item.path || item.relation.path}
+                    title={item.relation.name}
+                    className={`${styles.casinoLogo} table-operator-card-gtm`}
+                  >
+                    {item.title}
+                  </Link>
                 </td>
                 <td>
-                  <Link to={item?.path} name={item?.relation?.name}>
-                    {`${item?.relation?.name} ${translate(translations, 'read_review', 'Review')}`}
-                  </Link>
+                  {getBonus('main', item?.relation) && oneLiner(getBonus('main', item?.relation))}
+                </td>
+                <td style={{ textAlign: 'left' }}>
+                  <a
+                    href={prettyTracker(item.relation)}
+                    className="table-operator-card-gtm btn-cta"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {`${translate(translations, 'visit_table', 'Visit')} ${item?.relation?.name}`}
+                  </a>
                 </td>
               </tr>
             ))}

package/src/components/atoms/cards/operators-table/table.module.scss

@@ -26,9 +26,17 @@
         a {
           text-decoration: underline;
         }
-        .secondLine{
+        .secondLine {
           color: red;
         }
+        &:last-of-type {
+          a {
+            padding-left: 0;
+            text-decoration: none;
+            font-size: 1.6rem;
+            font-weight: normal;
+          }
+        }
       }
       &:nth-child(odd) {
         background-color: var(--table-highlight);
@@ -43,12 +51,11 @@
       tbody {
         tr {
           &:first-child {
-            
             td {
               color: white;
               background-color: var(--table-head-background);
               border-radius: 0;
-              .secondLine{
+              .secondLine {
                 color: white;
               }
               &:first-child {
@@ -56,10 +63,10 @@
                 border-top-right-radius: var(--table-border-radius);
               }
 
-                a {
-                  color: white;
-                  text-decoration: underline;
-                }                
+              a {
+                color: white;
+                text-decoration: underline;
+              }
             }
           }
 
@@ -67,7 +74,7 @@
             display: block;
             text-align: left;
             border-bottom: 1px solid #bfd3e5;
-            width: 100%;            
+            width: 100%;
           }
 
           &:last-child {

package/src/components/molecules/game-iframe/game-iframe.module.scss

@@ -7,6 +7,9 @@
   .thumbnail {
     display: inline-block;
     position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
 
     &::before {
       display: block;

package/src/components/molecules/game-iframe/index.js

@@ -5,6 +5,7 @@ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import Iframe from 'gatsby-core-theme/src/components/atoms/iframe';
 import Button from 'gatsby-core-theme/src/components/atoms/button';
+import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import styles from './game-iframe.module.scss';
 
 const GameIframe = ({ page }) => {
@@ -38,11 +39,15 @@ const GameIframe = ({ page }) => {
 
   return (
     <>
-      {page.relation && page.relation.iframe !== '' && (
+      {page.relation && page.relation.iframe && page.relation.iframe !== '' && (
         <div>
           <div className={styles.thumbnailContainer}>
             <div className={`${styles.thumbnail} ${showIframe ? styles.hide : ''}`}>
-              <LazyImage src={imagePrettyUrl(page.banner)} />
+              {page.banner ? (
+                <LazyImage src={imagePrettyUrl(page.banner)} />
+              ) : (
+                <GatsbyImg filename="default-slot.png" />
+              )}
               <Button
                 isInternalLink={false}
                 onClick={clickHandler}