gatsby-matrix-theme 3.2.14 → 3.2.15

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [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.15",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

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 OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
+
 import styles from './table.module.scss';
 
 const CasinosTable = ({ module }) => {
@@ -28,9 +29,9 @@ 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>
@@ -42,9 +43,15 @@ const CasinosTable = ({ module }) => {
                   {getBonus('main', item?.relation) && oneLiner(getBonus('main', item?.relation))}
                 </td>
                 <td>
-                  <Link to={item?.path} name={item?.relation?.name}>
-                    {`${item?.relation?.name} ${translate(translations, 'read_review', 'Review')}`}
-                  </Link>
+                  <OperatorCta
+                    tracker="main"
+                    operator={item?.relation}
+                    playText={`${translate(translations, 'visit', 'Visit')} ${
+                      item?.relation?.name
+                    }`}
+                    translationKey="visit_online"
+                    gtmClass="table-operator-card-gtm btn-cta"
+                  />
                 </td>
               </tr>
             ))}

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

@@ -29,6 +29,20 @@
         .secondLine{
           color: red;
         }
+        &:last-of-type{
+            a{
+            background-color: transparent !important;
+            color: black !important;
+            padding-left: 0;
+            text-decoration: none;
+            font-size: 1.6rem;
+            font-weight: normal;
+            &:hover{
+              background: transparent !important;
+              text-decoration: underline;
+            }
+          }
+        }
       }
       &:nth-child(odd) {
         background-color: var(--table-highlight);