gatsby-core-theme 20.0.0 → 20.0.2

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [20.0.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v20.0.1...v20.0.2) (2023-04-13)
+
+
+### Bug Fixes
+
+* fix for tnc issue on matrix ([b0fe49e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b0fe49e5d344aad42b311e343ee1c5e2b697ad37))
+
+
+### Code Refactoring
+
+* correction to tnc props ([6ea3616](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6ea3616ef5fcf5dad80801a130971ea50cd7ded6))
+* update page.relation check in processor ([ab92c2d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ab92c2d78808d06eb4fa40aa94332d4194587b8b))
+
+
+* Merge branch 'tm-tnc-issue' into 'master' ([d29e1aa](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d29e1aab514b494197ab1f305e308d03ce776e9a))
+
+## [20.0.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v20.0.0...v20.0.1) (2023-04-12)
+
+
+### Bug Fixes
+
+* faq core ([d2d96fc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d2d96fc71c88241b5a565923932fe21306a8026f))
+* test ([d4044db](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d4044db27e0e5ec4eb9978f914c28113552c383c))
+
+
+### Code Refactoring
+
+* fix tests ([55dcc03](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/55dcc03d7ae2dfb1bd8d71f8790c964a45db1a22))
+* remove use is mobile from menu item and collapse ([fc62fb4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fc62fb4247f4d185ce5592d936309d638a9d852c))
+* update realtions in processor ([ae86616](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ae86616d32e3d05ee2fe1fcfe073a13929df8ac8))
+
+
+* Merge branch 'tm-3381-faq-core' into 'master' ([1756bac](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1756bac45b1df4de4f067de8c9a49e3b76dcab65))
+* Merge branch 'tm-3325-remove-useismobile-func' into 'master' ([a2f82af](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a2f82af27ee9fda84a449b56b7989ac195ace6dd))
+
 # [20.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v19.0.1...v20.0.0) (2023-04-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "20.0.0",
+  "version": "20.0.2",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/atoms/collapse/collapse.module.scss

@@ -1,15 +1,28 @@
 .collapseContainer {
   .button {
+    display: none;
     position: relative;
     font-size: 1.6rem;
 
     &:after {
       transition: 0.5s;
-      @include arrow(var(--color-20), .8rem, down, false, translateY(-50%));
+      @include arrow(var(--color-20), 0.8rem, down, false, translateY(-50%));
       position: absolute;
       left: 115%;
       top: 42%;
     }
+
+    &.buttonM {
+      @include max(tablet) {
+        display: block;
+      }
+    }
+  
+    &.buttonD {
+      @include min(tablet) {
+        display: block;
+      }
+    }
   }
 
   .active {
@@ -18,10 +31,21 @@
     }
   }
 
-  .content {
-    overflow: hidden;
-    max-height: 0;
-    font-size: 1.6rem;
-    transition: max-height 0.3s ease-out;
+  .contentM {
+    @include max(tablet) {
+      overflow: hidden;
+      max-height: 0;
+      font-size: 1.6rem;
+      transition: max-height 0.3s ease-out;
+    }
+  }
+
+  .contentD {
+    @include min(tablet) {
+      overflow: hidden;
+      max-height: 0;
+      font-size: 1.6rem;
+      transition: max-height 0.3s ease-out;
+    }
   }
 }

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

@@ -42,7 +42,7 @@ describe('Collapse Component', () => {
       <Collapse buttonText="Open" contentText="Content Text" onlyMobile />
     );
 
-    expect(container.querySelector('button')).toBeFalsy();
+    expect(container.querySelector('button')).toBeTruthy();
   });
 });
 afterEach(() => {

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

@@ -2,7 +2,6 @@ import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import styles from './collapse.module.scss';
-import useIsMobile from '~hooks/useIsMobile';
 
 const Collapse = ({
   buttonText,
@@ -14,8 +13,6 @@ const Collapse = ({
 }) => {
   const [maxHeightStyle, setMaxHeightStyle] = useState(maxHeight);
   const contentRef = useRef(React.createRef());
-  let showButton = true;
-  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (initOpen) {
@@ -31,30 +28,24 @@ const Collapse = ({
     }
   };
 
-  if (onlyMobile || onlyDesktop) {
-    if ((onlyMobile && !isMobile) || (onlyDesktop && isMobile)) {
-      showButton = false;
-    }
-  }
-
   return (
     <div className={styles.collapseContainer}>
       <div className={maxHeightStyle !== 0 ? styles.active : null}>
-        {showButton && (
-          <button
-            type="button"
-            onClick={clickHandler}
-            className={`${styles.button} ${
-              maxHeightStyle !== 0 ? styles.invertArrow : ''
-            } collapse-gtm btn-cta`}
-          >
-            {buttonText}
-          </button>
-        )}
+        <button
+          type="button"
+          onClick={clickHandler}
+          className={`${onlyMobile ? styles.buttonM : ''} ${onlyDesktop ? styles.buttonD : ''} ${
+            styles.button
+          } ${maxHeightStyle !== 0 ? styles.invertArrow : ''} collapse-gtm btn-cta`}
+        >
+          {buttonText}
+        </button>
         <div
           ref={contentRef}
-          className={showButton ? styles.content : null}
-          style={showButton ? { maxHeight: maxHeightStyle } : {}}
+          className={`${onlyMobile ? styles.contentM : ''} ${onlyDesktop ? styles.contentD : ''} ${
+            styles.content
+          }`}
+          style={onlyMobile || onlyDesktop ? { maxHeight: maxHeightStyle } : {}}
         >
           {contentText}
         </div>

package/src/components/atoms/menu/items/item/index.js

@@ -2,7 +2,6 @@
 import React, { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import Link from '~hooks/link';
-import useIsMobile from '~hooks/useIsMobile';
 import ConditionalWrapper from '~atoms/conditional-wrapper';
 import { imagePrettyUrl } from '~helpers/getters';
 import { NavigationContext } from '~organisms/navigation/navigationContext';
@@ -40,7 +39,6 @@ export default function Item({
     e.target.classList.toggle(styles.active);
     setOpened(e.target.classList.contains(styles.active));
   };
-  const isMobile = useIsMobile();
 
   const ItemImage = () =>
     item.image ? (
@@ -52,9 +50,7 @@ export default function Item({
       condition={hasChildren}
       wrapper={(items) => (
         <div
-          className={`${styles.itemWrapper} ${item.image && styles.itemWrapperIcon} ${
-            options.mobile.subMenuDropDownButton && isMobile ? styles.dropDownButton : ''
-          }`}
+          className={`${styles.itemWrapper} ${item.image && styles.itemWrapperIcon}`}
           onTouchStart={!options.mobile.subMenuDropDownButton ? showSubMenuHandler : null}
         >
           {items}
@@ -69,9 +65,7 @@ export default function Item({
           rel={`noreferrer ${item.nofollow && 'nofollow'}`}
           target="_blank"
           className={`${gtmClass} ${styles.item} ${opened && styles.openedLink} ${active} ${
-            !options.mobile.subMenuDropDownButton && isMobile && hasChildren
-              ? styles.inactiveLink
-              : ''
+            !options.mobile.subMenuDropDownButton && hasChildren ? styles.inactiveLink : ''
           } ${hasChildren ? styles.hasChildren : ''} ${
             !options.mobile.subMenuDropDownButton ? styles.noDropDownButton : ''
           }`}
@@ -82,9 +76,7 @@ export default function Item({
       ) : item.value !== null ? (
         <Link
           className={`${gtmClass} ${styles.item} ${opened && styles.openedLink} ${active} ${
-            !options.mobile.subMenuDropDownButton && isMobile && hasChildren
-              ? styles.inactiveLink
-              : ''
+            !options.mobile.subMenuDropDownButton && hasChildren ? styles.inactiveLink : ''
           } ${hasChildren ? styles.hasChildren : ''} ${
             !options.mobile.subMenuDropDownButton ? styles.noDropDownButton : ''
           }`}

package/src/components/atoms/menu/items/item/item.module.scss

@@ -24,10 +24,8 @@
   }
 
   &.inactiveLink {
-    position: relative;
-    pointer-events: none;
-
     @include max(tablet) {
+      position: relative;
       pointer-events: none;
     }
   }
@@ -40,15 +38,15 @@
       max-width: 75px;
       position: relative;
       background-color: var(--primary-hover-color);
-  
+
       &.active {
         @include arrow-rotate(0);
       }
-  
+
       &:after {
         transition: 0.2s;
         @include arrow(var(--nav-icon-color), 1rem, down, false);
-  
+
         position: absolute;
         top: calc(50% - 0.4rem);
         left: calc(50% - 1.2rem);

package/src/components/molecules/module/index.js

@@ -29,7 +29,10 @@ const Modules = ({ module, page, pageContext }) => {
       case 'pros_and_cons':
         return loadable(() => import('~molecules/pros-cons'));
       case 'faq':
-        return loadable(() => import('~atoms/faq'));
+        if (moduleItem?.display_front_end === '1') {
+          return loadable(() => import('~atoms/faq'));
+        }
+        return null;
       case 'accordion':
         return loadable(() => import('~organisms/accordion'));
       case 'anchor':

package/src/components/molecules/tnc/index.js

@@ -6,8 +6,8 @@ import Collapse from '~atoms/collapse';
 
 const Tnc = ({
   hasCollapse = true,
-  onlyMobile,
-  onlyDesktop,
+  onlyMobile = true,
+  onlyDesktop = true,
   buttonText = 'Terms and Conditions Apply',
   contentText = '18+ New Players only. Play responsibly.',
   initOpen = false,

package/src/components/molecules/tnc/tnc.stories.js

@@ -143,8 +143,8 @@ export const Default = Template.bind({});
 Default.args = {
   hasCollapse: true,
   contentText: tncText,
-  onlyMobile: false,
-  onlyDesktop: false,
+  onlyMobile: true,
+  onlyDesktop: true,
   buttonText: 'Terms and Conditions Apply',
   initOpen: false,
   isFixed: false,

package/src/helpers/processor/relations.js

@@ -9,10 +9,11 @@ export const processRelations = (page, pageType, transformedPages, market, data,
     switch (page.relation_type) {
       // Add path for payment page from payment method
       case 'operator':
-        if (hasRelation) {
+        if (page.relation && hasRelation) {
           // eslint-disable-next-line camelcase, prefer-const
           const { ribbons, extra_fields, bonus } = page.relation;
-          bonus.deposit_methods &&
+          bonus &&
+            bonus.deposit_methods &&
             bonus.deposit_methods.forEach((e) => {
               const el =
                 transformedPages[market].payment_method &&
@@ -24,11 +25,12 @@ export const processRelations = (page, pageType, transformedPages, market, data,
           page.relation.email = support_email || page.relation.email;
           page.relation.name = operator_name || page.relation.name;
           // eslint-disable-next-line no-unused-expressions
-          ribbons.length > 0 &&
+          ribbons &&
+            ribbons.length > 0 &&
             ribbons.forEach((res, index) => {
               ribbons[index] = data.ribbons[res] ? data.ribbons[res].label : res;
             });
-          if (ribbons.length === 0 && extra_fields.ribbon_text) {
+          if (ribbons && ribbons.length === 0 && extra_fields.ribbon_text) {
             page.relation.ribbons = extra_fields.ribbon_text.split(',');
           }
         }

package/src/helpers/schema.js

@@ -190,21 +190,24 @@ 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: {
-              '@type': 'Answer',
-              text: cleanHTML(item.answer),
-            },
-            name: cleanHTML(item.question),
-          })),
-        };
+        if (module?.render_schema === '1') {
+          const moduleSchema = {
+            '@context': 'https://schema.org',
+            '@type': 'FAQPage',
+            '@id': `${getUrl(path)}#faqpage${index === 0 ? '' : index}`,
+            mainEntity: module.items?.map((item) => ({
+              '@type': 'Question',
+              acceptedAnswer: {
+                '@type': 'Answer',
+                text: cleanHTML(item.answer),
+              },
+              name: cleanHTML(item.question),
+            })),
+          };
 
-        return JSON.stringify(generateSchemaObject(moduleSchema));
+          return JSON.stringify(generateSchemaObject(moduleSchema));
+        }
+        return null;
       }
       default: {
         return null;

package/src/helpers/schema.test.js

@@ -167,6 +167,7 @@ describe('Schema Helper', () => {
       [
         {
           name: 'faq',
+          render_schema: '1',
           items: [
             { answer: 'Answer A', question: 'Question A' },
             { answer: 'Answer B', question: 'Question B' },
@@ -390,7 +391,7 @@ describe('Schema Helper', () => {
       breadcrumbs: [{ path: '/test' }],
       relation_type: 'article',
       path: '/test-path',
-      sections: { main: { modules: [{ name: 'faq' }] } },
+      sections: { main: { modules: [{ name: 'faq', render_schema: '1' }] } },
     });
 
     expect(Object.prototype.toString.call(output)).toEqual('[object Array]');