gatsby-matrix-theme 46.0.2 → 46.0.3

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [46.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v46.0.2...v46.0.3) (2024-07-09)
+
+
+### Bug Fixes
+
+* removed extra prop ([0b2b883](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0b2b8836495361aa24bfedc6c1334aa661c88eaf))
+* tests ([3715383](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/371538396ac8c0e0b2b0a2d5e024adaa270e0ea4))
+* udpate theme ([1214c5f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1214c5ff457509a86fac6f514139faf1c2427f38))
+* update props ([68ad761](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/68ad7612c2153b5c5fcc71310849a005e6a6ead7))
+* update tests ([5ddbae2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5ddbae2b2955d7d04a8e2237c0a5475e5ec11377))
+* update version ([026095e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/026095e53f7d30a20d0dc1b5a557f889b16f88df))
+* updated references for tncs + fixed review credits ([e04e956](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e04e9562f487c93f09b4c976e0306a5cf6359964))
+
+
+* Merge branch 'tm-4453-tnc-update' into 'master' ([7e53bc9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7e53bc9210efee55e069af3ac62db36741525e43))
+* Merge branch 'tm-4453-tnc-update' into 'master' ([2c77bbb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2c77bbbe99e72a8eb7e84228790cc26ff035726e))
+
 ## [46.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v46.0.1...v46.0.2) (2024-07-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "46.0.2",
+  "version": "46.0.3",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "33.1.8",
+    "gatsby-core-theme": "33.1.13",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "prop-types": "15.7.2",

package/src/components/atoms/cards/operator-card/template-one/index.js

@@ -20,9 +20,6 @@ const TemplateOne = ({
   item,
   useOneStarRating = true,
   page,
-  tncCollapse = false,
-  tncFixed = false,
-  showTnc = true,
   showPaymentMethods = true,
   showSellingPoints = true,
   showAuthor = true,
@@ -44,7 +41,6 @@ const TemplateOne = ({
   const { relation, path } = item;
   const { name, status, selling_points: sellingPoints, bonus } = relation || {};
   const paymentMethods = bonus?.deposit_methods;
-  const hasTnc = showTnc && relation?.extra_fields?.terms_and_conditions_text_enabled;
   const reviewPath = path || relation.path;
   const isInactive = status === 'inactive';
 
@@ -147,15 +143,7 @@ const TemplateOne = ({
             </ul>
           )}
         </div>
-        {hasTnc === '1' && (
-          <div
-            className={`${styles?.tnc || ''} ${
-              tncCollapse && styles.tncCollapse ? styles.tncCollapse || '' : ''
-            } ${tncFixed && styles.tncFixed ? styles.tncFixed || '' : ''}`}
-          >
-            <Tnc hasCollapse={tncCollapse} operator={relation} isFixed={tncFixed} />
-          </div>
-        )}
+        <Tnc operator={item?.relation} />
       </div>
     </div>
   );
@@ -171,13 +159,15 @@ TemplateOne.propTypes = {
       rating: PropTypes.string,
       name: PropTypes.string,
       path: PropTypes.string,
-      extra_fields: PropTypes.shape({
-        terms_and_conditions_text_enabled: PropTypes.string,
-      }),
       status: PropTypes.string,
       logo: PropTypes.shape({
         filename: PropTypes.string,
       }),
+      one_liners: PropTypes.shape({
+        main: PropTypes.shape({
+          terms_and_conditions_enabled: PropTypes.bool,
+        }),
+      }),
       selling_points: PropTypes.shape([]),
     }),
     path: PropTypes.string,
@@ -189,9 +179,6 @@ TemplateOne.propTypes = {
   page: PropTypes.shape({
     template: PropTypes.string,
   }),
-  showTnc: PropTypes.bool,
-  tncCollapse: PropTypes.bool,
-  tncFixed: PropTypes.bool,
   authorTemplateTwo: PropTypes.bool,
   showPaymentMethods: PropTypes.bool,
   showSellingPoints: PropTypes.bool,

package/src/components/atoms/cards/operator-card/template-one/template-one.module.scss

@@ -56,6 +56,43 @@
     text-align: center;
     width: 100%;
   }
+
+  & > div:last-child:not(.cardFooter){
+    height: 45px;
+    overflow: auto;
+    padding-right: 1.6rem;
+
+    &::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 0.4rem;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 2px;
+      background-color: var(--color-57);
+    }
+    &::-webkit-scrollbar-track {
+      background: var(--color-52);
+      border-radius: 2px;
+    }
+
+    padding: 0.8rem 1.6rem;
+    border-top: 1.5px solid var(--color-52);
+    background: var(--color-56);
+    border-radius: 0 0 var(--cards-border-radius) var(--cards-border-radius);
+    width: 100%;
+    text-align: center;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5rem;
+
+    a {
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.5rem;
+      margin: 0;
+      width: auto;
+    }
+  }
 }
 
 .cardFooter {
@@ -108,82 +145,6 @@
   }
 }
 
-.tnc {
-  padding: 0.8rem 1.6rem;
-  border-top: 1.5px solid var(--color-52);
-  background: var(--color-56);
-  border-radius: 0 0 var(--cards-border-radius) var(--cards-border-radius);
-  width: 100%;
-  text-align: center;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-
-  a {
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5rem;
-    margin: 0;
-    width: auto;
-  }
-}
-
-.tncFixed {
-  text-align: justify;
-  &:not(.tncCollapse) {
-    > div {
-      max-height: 45px;
-      padding-right: 1.6rem;
-
-      &::-webkit-scrollbar {
-        -webkit-appearance: none;
-        width: 0.4rem;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        border-radius: 2px;
-        background-color: var(--color-57);
-      }
-
-      /* Track */
-      &::-webkit-scrollbar-track {
-        background: var(--color-52);
-        border-radius: 2px;
-      }
-    }
-  }
-}
-
-.tncCollapse {
-  text-align: left;
-
-  // override colours from collapse module
-  button {
-    font-weight: 700;
-    font-size: 1.2rem !important;
-    line-height: 1.8rem;
-    text-decoration: underline;
-    color: var(--color-49);
-    width: 100%;
-    text-align: left;
-
-    &::after {
-      left: auto !important;
-      right: 0;
-      border-color: var(--color-49) !important;
-    }
-  }
-
-  div:last-of-type {
-    font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    text-align: justify;
-    color: var(--color-57);
-    margin-top: 0.8rem;
-  }
-}
-
 .cardContentContainer {
   padding: 0 1.6rem 1.6rem;
   @include flex-direction(column);

package/src/components/atoms/cards/operator-card/template-one/template-one.stories.js

@@ -23,18 +23,6 @@ export default {
       defaultValue: operatorData.items[0],
       description: 'item',
     },
-    showTnc: {
-      name: 'showTnc',
-      type: { name: 'boolean', required: false },
-      defaultValue: true,
-      description: 'show tnc?',
-    },
-    tncCollapse: {
-      name: 'tncCollapse',
-      type: { name: 'boolean', required: false },
-      defaultValue: false,
-      description: 'is T&C collapsed? Will only work if showTnc is set to true',
-    },
     tncFixed: {
       name: 'tncFixed',
       type: { name: 'boolean', required: false },

package/src/components/atoms/cards/operator-card/template-one/template-one.test.js

@@ -17,6 +17,9 @@ beforeEach(() => {
       true_votes: 134,
       false_votes: 20,
     },
+    tnc: {
+      operator: data.items[0].relation,
+    },
   };
 
   relation = props.item.relation;
@@ -43,24 +46,6 @@ describe('TemplateOne component', () => {
       expect(getByText(relation.name)).toBeTruthy();
     });
   });
-  // test('show correct author image', async () => {
-  //   // eslint-disable-next-line global-require
-  //   const func = require('gatsby-core-theme/src/helpers/device-detect');
-  //   func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
-
-  //   render(<TemplateOne {...props} />);
-
-  //   await waitFor(() => {
-  //     const img = screen.getByAltText(props.item.author.name);
-  //     expect(img).toBeVisible();
-  //     expect(img).toHaveAttribute(
-  //       'src',
-  //       'https://cdn.images.com/fit-in/21x21/1666946339/cameron-murphy.png'
-  //     );
-  //     expect(img).toHaveAttribute('width', '21');
-  //     expect(img).toHaveAttribute('height', '21');
-  //   });
-  // });
   test('if no author data, show nothing', async () => {
     props.item.author = null;
     const { container } = render(<TemplateOne {...props} />);
@@ -99,19 +84,6 @@ describe('TemplateOne component', () => {
       expect(container.querySelector('.sellingPoints')).toBeFalsy();
     });
   });
-  // test('show correct bonus text', async () => {
-  //   const { container } = render(<TemplateOne {...props} />);
-
-  //   await waitFor(() => {
-  //     expect(container.querySelectorAll('.detailsBox span').length).toBe(2);
-  //     expect(container.querySelectorAll('.detailsBox span')[0].innerHTML).toBe(
-  //       relation.one_liners.main.one_liner.split('+')[0].replace('&', '&amp;')
-  //     );
-  //     expect(container.querySelectorAll('.detailsBox span')[1].innerHTML).toBe(
-  //       `+${relation.one_liners.main.one_liner.split('+')[1]}`
-  //     );
-  //   });
-  // });
   test('hide bonus text if operator inactive', async () => {
     props.item.relation.status = 'inactive';
     const { container } = render(<TemplateOne {...props} />);
@@ -149,35 +121,12 @@ describe('TemplateOne component', () => {
       expect(container.querySelector('.paymentMethods')).toBeFalsy();
     });
   });
-  test('show correct tnc text not fixed, not collapsed', async () => {
-    const { container } = render(<TemplateOne {...props} />);
-
-    await waitFor(() => {
-      expect(container.querySelectorAll('.tnc div')[0].innerHTML).toEqual(
-        '18+ New Players only. Play responsibly.'
-      );
-      expect(container.querySelectorAll('.tnc.tncCollapse')[0]).toBeFalsy();
-      expect(container.querySelectorAll('.tnc.tncFixed')[0]).toBeFalsy();
-    });
-  });
-  test('show correct tnc collapsed', async () => {
-    const { container } = render(<TemplateOne {...props} tncCollapse />);
-
-    await waitFor(() => {
-      expect(container.querySelectorAll('.tnc.tncCollapse')[0]).toBeTruthy();
-      expect(container.querySelectorAll('.tnc.tncFixed')[0]).toBeFalsy();
-    });
-  });
-  test('show correct tnc fixed', async () => {
-    const { container } = render(<TemplateOne {...props} tncFixed />);
-
-    await waitFor(() => {
-      expect(container.querySelectorAll('.tnc.tncCollapse')[0]).toBeFalsy();
-      expect(container.querySelectorAll('.tnc.tncFixed')[0]).toBeTruthy();
-    });
+  test('show correct tnc fixed', () => {
+    const { getByText } = render(<TemplateOne {...props} />);
+    expect(getByText('test tncs')).toBeTruthy();
   });
   test('if no tnc, show nothing', async () => {
-    props.item.relation.extra_fields.terms_and_conditions_text_enabled = '0';
+    props.item.relation.one_liners.main.terms_and_conditions_enabled = '0';
     const { container } = render(<TemplateOne {...props} />);
 
     await waitFor(() => {

package/src/components/atoms/cards/operator-card/template-two/index.js

@@ -16,9 +16,6 @@ const TemplateTwo = ({
   item,
   useOneStarRating = true,
   page,
-  tncCollapse = false,
-  tncFixed = false,
-  showTnc = false,
   showPaymentMethods = true,
   showAuthor = true,
   showRatingLabel = false,
@@ -38,7 +35,6 @@ const TemplateTwo = ({
   const { relation, path } = item;
   const { name, status, bonus } = relation || {};
   const paymentMethods = bonus?.deposit_methods;
-  const hasTnc = showTnc && relation?.extra_fields?.terms_and_conditions_text_enabled;
   const reviewPath = path || relation.path;
   const isInactive = status === 'inactive';
 
@@ -125,16 +121,8 @@ const TemplateTwo = ({
           operatorName={name}
           reviewPath={reviewPath}
         />
-        {hasTnc === '1' && (
-          <div
-            className={`${styles.tnc || ''} ${
-              tncCollapse && styles.tncCollapse ? styles.tncCollapse || '' : ''
-            } ${tncFixed && styles.tncFixed ? styles.tncFixed || '' : ''}`}
-          >
-            <Tnc hasCollapse={tncCollapse} operator={relation} isFixed={tncFixed} />
-          </div>
-        )}
       </div>
+      <Tnc operator={item?.relation} />
 
       {hasVariableComponent && (
         <VariableComponent item={item} page={page} featured={false} template="templateTwo" />
@@ -153,8 +141,10 @@ TemplateTwo.propTypes = {
       rating: PropTypes.string,
       name: PropTypes.string,
       path: PropTypes.string,
-      extra_fields: PropTypes.shape({
-        terms_and_conditions_text_enabled: PropTypes.string,
+      one_liners: PropTypes.shape({
+        main: PropTypes.shape({
+          terms_and_conditions_text_enabled: PropTypes.string,
+        }),
       }),
       status: PropTypes.string,
       logo: PropTypes.shape({
@@ -171,9 +161,6 @@ TemplateTwo.propTypes = {
     template: PropTypes.string,
   }),
   authorTemplateTwo: PropTypes.bool,
-  showTnc: PropTypes.bool,
-  tncCollapse: PropTypes.bool,
-  tncFixed: PropTypes.bool,
   showPaymentMethods: PropTypes.bool,
   showAuthor: PropTypes.bool,
   verifyIcon: PropTypes.string,

package/src/components/atoms/cards/operator-card/template-two/template-two.module.scss

@@ -60,6 +60,46 @@
   position: relative;
   min-height: 27rem;
   @include flex-direction(column);
+
+  & > div:last-child:not(.cardContent){
+    height: 45px;
+    overflow: auto;
+    padding-right: 1.6rem;
+
+    &::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 0.4rem;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 2px;
+      background-color: var(--color-57);
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      background: var(--color-52);
+      border-radius: 2px;
+    }
+
+    padding: 0.8rem 1.6rem;
+    border-top: 1.5px solid var(--color-52);
+    background: var(--color-56);
+    border-radius: 0 0 var(--cards-border-radius) var(--cards-border-radius);
+    width: 100%;
+    text-align: center;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5rem;
+
+    a {
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.5rem;
+      margin: 0;
+      width: auto;
+    }
+  }
 }
 
 .cardContent {
@@ -168,81 +208,6 @@
   }
 }
 
-.tnc {
-  padding: 0.8rem 1.6rem;
-  border-top: 1.5px solid var(--color-52);
-  background: var(--color-56);
-  border-radius: 0 0 var(--cards-border-radius) var(--cards-border-radius);
-  width: 100%;
-  text-align: center;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-
-  a {
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5rem;
-    margin: 0;
-    width: auto;
-  }
-}
-
-.tncFixed {
-  text-align: justify;
-  &:not(.tncCollapse) {
-    > div {
-      max-height: 45px;
-      padding-right: 1.6rem;
-
-      &::-webkit-scrollbar {
-        -webkit-appearance: none;
-        width: 0.4rem;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        border-radius: 2px;
-        background-color: var(--color-57);
-      }
-
-      /* Track */
-      &::-webkit-scrollbar-track {
-        background: var(--color-52);
-        border-radius: 2px;
-      }
-    }
-  }
-}
-
-.tncCollapse {
-  text-align: left;
-
-  button {
-    font-weight: 700;
-    font-size: 1.2rem !important;
-    line-height: 1.8rem;
-    text-decoration: underline;
-    color: var(--color-49);
-    width: 100%;
-    text-align: left;
-
-    &::after {
-      left: auto !important;
-      right: 0;
-      border-color: var(--color-49) !important;
-    }
-  }
-
-  div:last-of-type {
-    font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    text-align: justify;
-    color: var(--color-57);
-    margin-top: 0.8rem;
-  }
-}
-
 .cardContentContainer {
   padding: 1.6rem;
   margin: 0 1.6rem;

package/src/components/atoms/cards/popup-card/index.js

@@ -14,10 +14,8 @@ const PopupCard = ({
   item,
   tracker,
   showName = false,
-  showTnc = false,
   showRating = false,
   showReviewLink = false,
-  hasCollapse = true,
   buttonSize = '',
   buttonType = 'primary',
   template,
@@ -27,7 +25,6 @@ const PopupCard = ({
 }) => {
   const operatorName = item.name;
   const oneLiner = item?.one_liners?.main?.one_liner;
-  const tnc = item?.extra_fields?.terms_and_conditions_text_enabled;
   const imageObject = item?.logo;
 
   return (
@@ -71,11 +68,7 @@ const PopupCard = ({
           />
         )}
       </div>
-      {showTnc && tnc === '1' && (
-        <div className={styles?.tandc || ''}>
-          <Tnc onlyMobile operator={item} hasCollapse={hasCollapse} />
-        </div>
-      )}
+      <Tnc operator={item} />
     </div>
   );
 };
@@ -97,9 +90,6 @@ PopupCard.propTypes = {
     logo_url_object: PropTypes.shape({
       alt: PropTypes.string,
     }),
-    extra_fields: PropTypes.shape({
-      terms_and_conditions_text_enabled: PropTypes.string,
-    }),
     logo_url: PropTypes.string,
     one_liners: PropTypes.shape({
       main: PropTypes.shape({
@@ -112,11 +102,9 @@ PopupCard.propTypes = {
   }),
   tracker: PropTypes.string,
   showName: PropTypes.bool,
-  showTnc: PropTypes.bool,
   showRating: PropTypes.bool,
   showReviewLink: PropTypes.bool,
   template: PropTypes.string,
-  hasCollapse: PropTypes.bool,
   buttonSize: PropTypes.string,
   buttonType: PropTypes.string,
   showRoundedRating: PropTypes.bool,

package/src/components/atoms/cards/popup-card/popup-card.module.scss

@@ -35,10 +35,44 @@
       object-fit: contain;
     }
   }
-  .tandc{
-    grid-row: 3/4;
-    grid-column: 1/3;
-    margin-bottom: 2rem;
+
+  & > div:last-child:not(.buttonContainer){
+    grid-column: -1/1;
+    max-height: 45px;
+    overflow: auto;
+    padding-right: 1.6rem;
+
+    &::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 0.4rem;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 2px;
+      background-color: var(--color-57);
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      background: var(--color-52);
+      border-radius: 2px;
+    }
+    padding: 0.8rem 0rem;
+    border-top: 1.5px solid var(--color-52);
+    border-radius: 0 0 var(--cards-border-radius) var(--cards-border-radius);
+    width: 100%;
+    text-align: center;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5rem;
+
+    a {
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.5rem;
+      margin: 0;
+      width: auto;
+    }
   }
 
   .buttonContainer {

package/src/components/atoms/social-icons/index.js

@@ -53,7 +53,7 @@ const SocialIcons = ({
                 aria-label={`${key} Link`}
                 href={socialIcons[key]}
                 target="_blank"
-                rel="noreferrer"
+                rel="noreferrer noopener"
               >
                 {icons[key]}
               </a>

package/src/components/molecules/header/variants/default/template-two/index.js

@@ -38,11 +38,9 @@ export default function TemplateTwo({ extraFields, imageObj }) {
             icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
           />
         )}
-        {getExtraField(operator?.extra_fields, 'terms_and_conditions_text_enabled') === '1' && (
-          <span className={styles.tnc}>
-            <Tnc hasCollapse={false} operator={operator} />
-          </span>
-        )}
+        <span className={styles.tnc}>
+          <Tnc operator={operator} />
+        </span>
       </div>
       {imageObj && (
         <div className={styles.imgContainer}>

package/src/components/molecules/header/variants/slot/template-two/index.js

@@ -43,13 +43,15 @@ const TemplateTwo = ({ page, image, width = '259', height = '259' }) => {
         </div>
       </div>
       {headerBonus && (
-        <OperatorBanner
-          logo={headerBonus?.value?.logo}
-          operator={headerBonus?.value}
-          template={page?.template}
-        />
+        <>
+          <OperatorBanner
+            logo={headerBonus?.value?.logo}
+            operator={headerBonus?.value}
+            template={page?.template}
+          />
+          <Tnc operator={headerBonus?.value} hasCollapse={false} isFixed />
+        </>
       )}
-      <Tnc operator={headerBonus?.value} hasCollapse={false} isFixed />
     </div>
   );
 };