gatsby-core-theme 44.5.0-poc.2 → 44.5.0

package/gatsby-node.mjs

@@ -23,7 +23,7 @@ import {
   clean,
   removeUnwantedSections,
 } from "./src/resolver/common.mjs";
-import { generateRedirects } from "./src/resolver/redirect.mjs";
+import { generateRedirects, generatePrettyLinkRedirects } from "./src/resolver/redirect.mjs";
 import { translate, is404Page } from "./src/helpers/getters.mjs";
 import { getArchivePages, hasArchiveModule } from "./src/resolver/archive.mjs";
 
@@ -71,12 +71,10 @@ const relations = {};
 
 // eslint-disable-next-line import/prefer-default-export
 export const createPages = async (
-  { actions: { createPage } },
+  { actions: { createPage, createRedirect } },
   themeOptions
 ) => {
   process.env.GATSBY_SITE_NAME = String(themeOptions.siteName);
-
-  generateRedirects(siteSettingsData);
   preconnectLinks = themeOptions.preconnectLinks || [];
   console.log(chalk.magenta("info") + chalk.whiteBright(" starting processor"));
 
@@ -126,6 +124,8 @@ export const createPages = async (
   streamRobotsTxt.write(robotsTxtContent);
   streamRobotsTxt.end();
 
+  generateRedirects(siteSettingsData);
+
   // create every single page
   Object.keys(processed.site_markets).forEach((siteMarket) => {
     if (!processed.pages[siteMarket]["page"]) {
@@ -282,23 +282,27 @@ export const createPages = async (
     }
   });
 
-  trackingPages.forEach(({ path, page, operator }) => {
-    createPage({
-      path,
-      component: `${__dirname}/src/components/${
-        process.env.IS_TRACKING_SSR === "true"
-          ? "app-tracker-ssr.js"
-          : "app-tracker.js"
-      }`,
-      context: {
-        page,
-        siteGeneralData,
-        operator,
-        isTracker: true,
-        isLiveStreamProvider: false,
-      },
-    });
-  });
+  if(process.env.DISABLE_SPLASH_SCREEN === 'true'){
+    generatePrettyLinkRedirects( trackingPages )
+  }else{
+    trackingPages.forEach(({ path, page, operator }) => {
+      createPage({
+        path,
+        component: `${__dirname}/src/components/${
+          process.env.IS_TRACKING_SSR === "true"
+            ? "app-tracker-ssr.js"
+            : "app-tracker.js"
+        }`,
+        context: {
+          page,
+          siteGeneralData,
+          operator,
+          isTracker: true,
+          isLiveStreamProvider: false,
+        },
+      });
+    })
+  }
 };
 
 export const onCreatePage = async ({ page, actions }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "44.5.0-poc.2",
+  "version": "44.5.0",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/release.config.js

@@ -92,11 +92,6 @@ module.exports = {
 
     '@semantic-release/git',
   ],
-  branches: [
-    'master',
-    { name: 'beta', prerelease: true },
-    { name: 'poc', prerelease: true }
-  ],
   release: {
     extends: '@semantic-release/gitlab-config',
     prepare: [

package/src/components/atoms/admin/button/index.js

@@ -11,7 +11,7 @@ const getDMSLink = (module) => {
 
   switch (module.name) {
     case "top_list":
-      hercLink += `toplists/${module.items ? module.items[0].id : ""}/items`;
+      hercLink += `toplists/operators/${module.items ? module.items[0].id : ""}`;
       linkText = "Edit Toplist";
       break;
     case "bonus":

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

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable arrow-body-style */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 
 import { formatDate } from '~helpers/date-time';
@@ -8,10 +8,11 @@ import { imagePrettyUrl } from '~helpers/getters';
 import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import Verify from '~images/icons/verify';
-import Clock from '~images/icons/clock';
 import styles from './author.module.scss';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+const ClockIcon = lazy(() => import('~images/icons/clock'));
+
 const Author = ({
   name,
   date,
@@ -26,11 +27,11 @@ const Author = ({
   isCardsAuthor = false,
   hasAuthorBox = false,
   reviewer,
-  clock = <Clock />,
+  clock = <Suspense fallback={null}><ClockIcon /></Suspense>,
   authorImageWidth = 30,
   authorImageHeight = 30,
   showVerification = false,
-  verifyIcon = <Verify />,
+  verifyIcon = <Suspense fallback={null}><VerifyIcon /></Suspense>,
 }) => {
   const prefixstyle = !link || !authorImg;
 

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

@@ -1,50 +1,137 @@
 /* eslint-disable no-underscore-dangle */
-
 import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Collapse from '.';
 
 describe('Collapse Component', () => {
-  test('Render', () => {
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+    delete HTMLElement.prototype.scrollHeight;
+  });
+
+  const setup = (props = {}) =>
+    render(
+      <Collapse
+        buttonText="Toggle"
+        contentText="Test Content"
+        {...props}
+      />
+    );
+
+  test('renders with button and string content', () => {
+    const { getByText } = setup();
+    expect(getByText('Toggle')).toBeInTheDocument();
+    expect(getByText('Test Content')).toBeInTheDocument();
+  });
+
+  test('renders with React element as contentText', () => {
+    const { getByText } = render(
+      <Collapse
+        buttonText="Toggle"
+        contentText={<p>JSX Content</p>}
+      />
+    );
+    expect(getByText('JSX Content')).toBeInTheDocument();
+  });
+
+  test('opens when initOpen is true', async () => {
+    const scrollHeightMock = 200;
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get: () => scrollHeightMock,
+    });
+
     const { container } = render(
-      <Collapse buttonText="Open" contentText="Content Text" initOpen />
+      <Collapse
+        buttonText="Toggle"
+        contentText="Test Content"
+        initOpen
+        onlyMobile
+      />
     );
 
-    const button = container.querySelector('button');
-    const content = container.querySelector('div.content');
+    const contentDiv = container.querySelector('div[style]');
+    expect(contentDiv).toBeInTheDocument();
 
-    expect(button.innerHTML).toBe('Open');
-    expect(content.innerHTML).toBe('Content Text');
+    await waitFor(() => {
+      expect(contentDiv.style.maxHeight).toBe(`${scrollHeightMock}px`);
+    });
   });
 
-  test('Open collapse', () => {
-    const { container } = render(<Collapse buttonText="Open" contentText="Content Text" />);
+  test('toggles open/close on click', () => {
+    const scrollHeightMock = 300;
+
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get: () => scrollHeightMock,
+    });
+
+    const { container, getByText } = setup({ onlyMobile: true });
+
+    const contentDiv = container.querySelector('div[style]');
+    expect(contentDiv).not.toBeNull();
+
+    const button = getByText('Toggle');
 
-    const button = container.querySelector('button');
-    expect(button.classList.contains('active')).toBeFalsy();
     fireEvent.click(button);
-    // jest does not render the component, hence testing the actual layout cannot be done due to the collapse using scrollHeight.
+    expect(contentDiv.style.maxHeight).toBe(`${scrollHeightMock}px`);
+
+    fireEvent.click(button);
+    expect(['0', '0px']).toContain(contentDiv.style.maxHeight);
   });
 
-  test('Open collapse with different initial height', () => {
-    const { container } = render(
-      <Collapse buttonText="Open" maxHeight={20} contentText="Content Text" />
-    );
+  test('renders correctly with onlyMobile and onlyDesktop props', () => {
+    const { getByText } = setup({ onlyMobile: true });
+    expect(getByText('Toggle')).toBeInTheDocument();
 
-    const button = container.querySelector('button');
-    fireEvent.click(button);
-    expect(button.classList.contains('active')).toBeFalsy();
+    cleanup();
+
+    const { getByText: getByText2 } = setup({ onlyDesktop: true });
+    expect(getByText2('Toggle')).toBeInTheDocument();
   });
 
-  test('Only Mobile', () => {
+  test('closes on outside click when closeOnOutsideClick is true', async () => {
+    const scrollHeightMock = 100;
+
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get: () => scrollHeightMock,
+    });
+
     const { container } = render(
-      <Collapse buttonText="Open" contentText="Content Text" onlyMobile />
+      <div>
+        <Collapse
+          buttonText="Toggle"
+          contentText="Test Content"
+          initOpen
+          closeOnOutsideClick
+          onlyMobile
+        />
+        <div data-testid="outside">Outside</div>
+      </div>
     );
 
-    expect(container.querySelector('button')).toBeTruthy();
+    const contentDiv = container.querySelector('div[style]');
+    expect(contentDiv).not.toBeNull();
+    expect(contentDiv.style.maxHeight).toBe(`${scrollHeightMock}px`);
+
+    const outside = container.querySelector('[data-testid="outside"]');
+    fireEvent.mouseDown(outside);
+
+    await waitFor(() => {
+      expect(['0', '0px']).toContain(contentDiv.style.maxHeight);
+    });
+  });
+
+  test('does not apply maxHeight when onlyMobile and onlyDesktop are false', () => {
+    const { container } = setup({ initOpen: true });
+
+    const divs = container.querySelectorAll('div');
+    const contentDiv = Array.from(divs).find(div =>
+      div.innerHTML.includes('Test Content')
+    );
+    expect(contentDiv.style.maxHeight).toBe('');
   });
-});
-afterEach(() => {
-  cleanup();
 });

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

@@ -10,9 +10,11 @@ const Collapse = ({
   onlyDesktop = false,
   initOpen = false,
   maxHeight = 0,
+  closeOnOutsideClick = false, 
 }) => {
   const [maxHeightStyle, setMaxHeightStyle] = useState(maxHeight);
   const contentRef = useRef(React.createRef());
+  const containerRef = useRef(null); 
 
   useEffect(() => {
     if (initOpen) {
@@ -20,6 +22,22 @@ const Collapse = ({
     }
   }, [initOpen]);
 
+
+  useEffect(() => {
+    if (!closeOnOutsideClick || maxHeightStyle === 0) return;
+
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setMaxHeightStyle(0);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [closeOnOutsideClick, maxHeightStyle]);
+
   const clickHandler = () => {
     if (maxHeightStyle === 0) {
       setMaxHeightStyle(contentRef.current.scrollHeight);
@@ -29,7 +47,10 @@ const Collapse = ({
   };
 
   return (
-    <div className={styles?.collapseContainer || ''}>
+    <div
+      ref={containerRef} 
+      className={styles?.collapseContainer || ''}
+    >
       <div className={maxHeightStyle !== 0 ? styles?.active || '' : ''}>
         <button
           type="button"
@@ -74,6 +95,7 @@ Collapse.propTypes = {
   onlyDesktop: PropTypes.bool,
   initOpen: PropTypes.bool,
   maxHeight: PropTypes.number,
+  closeOnOutsideClick: PropTypes.bool,
 };
 
 export default Collapse;

package/src/components/atoms/comment-votes/comment-votes.module.scss

@@ -0,0 +1,34 @@
+.buttonGroup{
+    background: var(--comment-vote-bg, #EAE5E0);
+    font-size: var(--comment-vote-font-size, 1.2rem);
+    padding: var(--comment-vote-padding, .5rem .8rem);
+    height: var(--comment-vote-height, 2.8rem);
+    gap: .4rem;
+    color: #0F172A;
+
+    @include flex-align(center, center);
+
+    &.left{
+        border-bottom-left-radius: var(--comment-vote-border-radius, 5rem);
+        border-top-left-radius: var(--comment-vote-border-radius, 5rem);
+        padding-right: 0;
+    }
+
+    &.right{
+        border-bottom-right-radius: var(--comment-vote-border-radius, 5rem);
+        border-top-right-radius: var(--comment-vote-border-radius, 5rem);
+    }
+}
+
+.buttonGroupIcon{
+    width: var(--comment-vote-icon-size, 1.6rem);
+    height: var(--comment-vote-icon-size, 1.6rem);
+}
+
+.buttonGroup[disabled]{
+    cursor: default !important;
+}
+
+.disabled > *{
+    opacity: .3;
+}

package/src/components/atoms/comment-votes/index.js

@@ -0,0 +1,93 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable no-console */
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import LazyImage from '~hooks/lazy-image';
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import { useVote, VotesContext } from '../../../context/VotesProvider';
+import styles from './comment-votes.module.scss';
+
+const CommentVotes = ({ 
+    comment,
+    voteUpAria = 'Like Button',
+    voteDownAria = 'Dislike Button'
+}) => {
+    const { updateVote } = useContext(VotesContext);
+
+    const userVote = useVote(comment.comment_id);
+    
+    const handleVote = async (like = false, commentId) => {
+        const data = like 
+        ? {
+            "vote_up": "increase",
+            "commentID": commentId
+        } 
+        : {
+            "vote_down": "increase",
+            "commentID": commentId
+        };
+
+        return new Promise((resolve, reject) => {
+            fetch(`${process.env.GATSBY_API_COMMENT_URL}/api/put-vote`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            })
+            .then(async (response) => {
+                if (response.ok) {
+                    resolve(response);
+                } else {
+                    const errorData = await response.json().catch(() => ({}));
+                    reject(errorData?.errors?.join() || response.statusText);
+                }
+            })
+            .catch((error) => reject(error.message));
+        });
+    }
+    
+    return  <>
+                <button 
+                    onClick={async () => {
+                        updateVote(comment.comment_id, 'vote_up');
+                        await handleVote(true, comment.comment_id)
+                    }} 
+                    aria-label={useTranslate('vote_up_aria_label', voteUpAria)}
+                    type='button' 
+                    className={`${styles.buttonGroup} ${styles.left} ${userVote === 'vote_down' && styles.disabled || ''}`}
+                    disabled={Boolean(userVote)}
+                >
+                    <LazyImage className={styles.buttonGroupIcon} src='/images/like.svg' />
+                    <span>{userVote === 'vote_up' ? comment.votes_up + 1 : comment.votes_up}</span>
+                </button>
+                <button 
+                    onClick={async () => {
+                        updateVote(comment.comment_id, 'vote_down');
+                        await handleVote(false, comment.comment_id)
+                    }}
+                    aria-label={useTranslate('vote_down_aria_label', voteDownAria)}
+                    type='button' 
+                    className={`${styles.buttonGroup} ${styles.right} ${userVote === 'vote_up' && styles.disabled || ''}`}
+                    disabled={Boolean(userVote)}
+                >
+                    <LazyImage className={styles.buttonGroupIcon} src='/images/dislike.svg' />
+                    <span>{userVote === 'vote_down' ? comment.votes_down + 1 : comment.votes_down}</span>
+                </button>
+            </>
+};
+
+CommentVotes.propTypes = {
+    voteUpAria: PropTypes.string,
+    voteDownAria: PropTypes.string,
+    comment: PropTypes.shape({
+        comment_id: PropTypes.string,
+        votes_up: PropTypes.number,
+        votes_down: PropTypes.number
+    })
+};
+
+export default CommentVotes;

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

@@ -60,6 +60,13 @@ export default function Ratings({
           valueDiplayed = "TBA";
         }
 
+        if (fieldValue === "payout_time") {
+          valueDiplayed = useTranslate(
+            valueDiplayed.toLowerCase().replace(/[–\s]/g, "_"),
+            valueDiplayed
+          );
+        }
+
         return (
           <li
             key={keygen()}

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

@@ -32,7 +32,7 @@ describe('Rating component', () => {
   test('Rating', () => {
     const { container } = render(<Ratings item={page()} type="operator" />);
     expect(container.querySelectorAll('ul')).toHaveLength(1);
-    expect(container.querySelectorAll('li')).toHaveLength(6);
+    expect(container.querySelectorAll('li')).toHaveLength(7);
   });
 
   test('Rating with diferent data text', () => {

package/src/components/molecules/comment/comment.module.scss

@@ -3,75 +3,71 @@
 
     gap: 1.6rem;
     position: relative;
+    margin-bottom: 3.4rem;
 
-    ~ div .commentContainer::before{
-        border-left: .1rem solid #cfc7c0;
-        top: -13rem;
-        content: "";
-        height: 22rem;
-        position: absolute;
-        right: 100%;
-        width: 2.9rem;
-        z-index: 0;
-    }
-
-    + div .commentContainer::before{
-        height: 12rem;
-        top: -5rem;
+    @include min(tablet){
+        margin-bottom: 0;
     }
+  
 }
 
 .commentTopArea{
     @include flex-align(center, start);
 
+    flex-wrap: wrap;
     gap: .8rem;
+
+    >  img{
+        border-radius: 50%;
+        width: 5rem;
+        height: 5rem;
+    }
 }
 
 .commentName{
-    font-size: 18px;
+    font-size: var(--comment-name-font-size, 18px);
     font-weight: 600;
     line-height: 28px;
+    color: var(--comment-name-font-color, #1B1B1C);
+
+    @include flex-align(center, center);
+
+    > svg{
+        margin-left: .8rem;
+        width: 2rem;
+        height: 2rem;
+        color: var(--comment-name-font-color, #1B1B1C);
+    }
+
 }
 
 .commentJobTitle{
-    height: 24px;
-    padding: .8rem;
-    font-size: 1.2rem;
-    font-weight: 400;
+    height: var(--comment-jobTitle-height, 24px);
+    padding: var(--comment-jobTitle-padding, .8rem);
+    font-size: var(--comment-jobTitle-font-size, 1.2rem);
+    font-weight: var(--comment-jobTitle-font-weight, 400);
     line-height: 1.8rem;
 
     @include flex-align(center, center);
 
-    border-radius: 5rem;
-    background: #CFC7C0;
+    border-radius: var(--comment-jobTitle-border-radius, 5rem);
+    background: var(--comment-jobTitle-bg, #CFC7C0);
+    color: var(--comment-jobTitle-font-color, #0F172A);
 }
 
 .commentDate{
-    color: #64748B;
-    font-size: 1.6rem;
+    color: var(--comment-date-font-color, #64748B);
+    font-size: var(--comment-date-font-size, 1.6rem);
     font-weight: 400;
     line-height: 2.6rem; 
 }
 
 .commentContent{
-    border-radius: .8rem;
-    border: .1rem solid #F4F4F4;
-    background: #FFF;
+    border-radius: var(--comment-border-radius, .8rem);
+    border: var(--comment-border, .1rem solid #F4F4F4);
+    background: var(--comment-bg-color, #FFF);
     position: relative;
-    padding: 2.4rem;
-}
-
-.isReplyThread::before{
-    content: "";
-    position: absolute;
-    right: 100%;
-    border-left: .1rem solid #CFC7C0;
-    border-bottom: .1rem solid #CFC7C0;
-    border-bottom-left-radius: 2rem;
-    height: -webkit-fill-available;
-    width: 3rem;
-    bottom: 50%;
-    z-index: 0;
+    padding: var(--comment-padding, 2.4rem);
 }
 
 .commentActions{
@@ -80,50 +76,22 @@
     @include flex-direction(row);
 }
 
-.buttonGroup{
-    background: #CFC7C0;
-    font-size: 1.2rem;
-    padding: .8rem;
-    gap: .4rem;
-
-    @include flex-align(center, center);
-
-    &.left{
-        border-bottom-left-radius: 5rem;
-        border-top-left-radius: 5rem;
-        padding-right: 0;
-    }
-
-    &.right{
-        border-bottom-right-radius: 5rem;
-        border-top-right-radius: 5rem;
-    }
-}
-
-.buttonGroupIcon{
-    width: 1.6rem;
-    height: 1.6rem;
-}
-
 .replyButton{
-    border-radius: 10rem;
-    border: 1.5px solid #161128;
-    font-size: 1.2rem;
-    font-weight: 700;
+    border-radius: var(--comment-btn-border-radius, 10rem);
+    border: var(--comment-btn-border, 1.5px solid #161128);
+    color: var(--comment-btn-font-color, #0A0E19);
+    font-size: var(--comment-btn-font-size, 1.2rem);
+    font-weight: var(--comment-btn-font-weight, 700);
     line-height: 1.8rem;
     text-transform: capitalize;
     margin-left: .8rem;
-    padding: 0.8rem 1.6rem;
+    padding: var(--comment-btn-padding, 0.2rem 1.6rem);
 }
 
 .replySection{
     display: grid;
 }
 
-.disabled > *{
-    opacity: .3;
-}
-
 .buttonGroup[disabled]{
     cursor: default;
 }