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

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

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

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

@@ -10,11 +10,9 @@ 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) {
@@ -22,22 +20,6 @@ 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);
@@ -47,10 +29,7 @@ const Collapse = ({
   };
 
   return (
-    <div
-      ref={containerRef} 
-      className={styles?.collapseContainer || ''}
-    >
+    <div className={styles?.collapseContainer || ''}>
       <div className={maxHeightStyle !== 0 ? styles?.active || '' : ''}>
         <button
           type="button"
@@ -95,7 +74,6 @@ Collapse.propTypes = {
   onlyDesktop: PropTypes.bool,
   initOpen: PropTypes.bool,
   maxHeight: PropTypes.number,
-  closeOnOutsideClick: PropTypes.bool,
 };
 
 export default Collapse;

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

@@ -3,17 +3,27 @@
 
     gap: 1.6rem;
     position: relative;
-    margin-bottom: 3.4rem;
 
-    @include min(tablet){
-        margin-bottom: 0;
+    ~ 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;
     }
 }
 
 .commentTopArea{
     @include flex-align(center, start);
 
-    flex-wrap: wrap;
     gap: .8rem;
 }
 
@@ -21,7 +31,6 @@
     font-size: 18px;
     font-weight: 600;
     line-height: 28px;
-    color: #1B1B1C;
 }
 
 .commentJobTitle{
@@ -35,7 +44,6 @@
 
     border-radius: 5rem;
     background: #CFC7C0;
-    color: #0F172A;
 }
 
 .commentDate{
@@ -53,12 +61,50 @@
     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;
+}
+
 .commentActions{
     margin-left: auto;
 
     @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;
@@ -67,13 +113,17 @@
     line-height: 1.8rem;
     text-transform: capitalize;
     margin-left: .8rem;
-    padding: 0.2rem 1.6rem;
+    padding: 0.8rem 1.6rem;
 }
 
 .replySection{
     display: grid;
 }
 
+.disabled > *{
+    opacity: .3;
+}
+
 .buttonGroup[disabled]{
     cursor: default;
 }

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

@@ -3,12 +3,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
+import axios from 'axios';
 import PropTypes from 'prop-types';
 import LazyImage from '~hooks/lazy-image';
 import LeaveCommentForm from '../leave-comment-form';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import CommentVotes from '../../atoms/comment-votes';
 import styles from './comment.module.scss';
 
 const Comment = ({ 
@@ -16,21 +16,67 @@ const Comment = ({
     comment, 
     authors, 
     isReply, 
+    userInteractions,
     showVotes = true
 }) => {
     const commentName = comment?.author_id ? authors?.[comment?.author_id]?.name : comment.author_name;
     const commentJobTitle = comment?.author_id ? authors?.[comment?.author_id]?.author_title : undefined;
-
     const date = new Date(comment.updated_at);
     const day = String(date.getUTCDate()).padStart(2, '0');
     const month = String(date.getUTCMonth() + 1).padStart(2, '0'); 
     const year = date.getUTCFullYear();
+    const [reply, setReply] = useState(false);
+    const [likes, setLikes] = useState(comment.votes_up);
+    const [dislikes, setDislikes] = useState(comment.votes_down);
+    const currentUserInteractions = useRef(userInteractions);
 
     const hours = String(date.getUTCHours()).padStart(2, '0');
     const minutes = String(date.getUTCMinutes()).padStart(2, '0');
     const commentDate = `${day}/${month}/${year} | ${hours}:${minutes}`;
+    
+    const handleVote = async (like = false, commentId) => {
+        const data = like 
+        ? {
+            "vote_up": "increase",
+            "commentID": commentId
+        } 
+        : {
+            "vote_down": "increase",
+            "commentID": commentId
+        };
 
-    const [reply, setReply] = useState(false);
+        const headers = {
+            headers: {
+                "Content-Type": "application/json",
+                Accept: "application/json",
+            },
+        };
+
+        const existingCookie = document.cookie
+            .split('; ')
+            .find((row) => row.startsWith('comments='))
+            ?.split('=')[1] || '';
+
+        const ids = existingCookie.split(',').filter(Boolean);
+
+        const alreadyVoted = ids.some((entry) => entry.startsWith(`${commentId}:`));
+        if (!alreadyVoted) {
+            ids.push(`${commentId}: ${like ? 'vote_up' : 'vote_down'}`);
+            document.cookie = `comments=${ids.join(',')}; path=/;`;
+            currentUserInteractions.current = ids;
+            console.log(currentUserInteractions.current);
+        }
+
+        return new Promise((resolve, reject) => {
+            axios
+            .put('/api/put-vote', data, headers)
+            .then((response) => {
+                response.ok = response.status === 200;
+                resolve(response);
+            })
+            .catch((error) => reject(error?.response?.data?.errors?.join() || error.message));
+        });
+    }
     
     return  <div className={`${styles.commentContainer} ${isReply ? styles.isReply : ''}`}>
                 <div className={styles.commentTopArea}>
@@ -44,7 +90,34 @@ const Comment = ({
                 </div>
                 <div className={styles.commentActions}>
                     {showVotes && (
-                        <CommentVotes comment={comment} />
+                        <>
+                            <button 
+                                onClick={async () => {
+                                    await handleVote(true, comment.comment_id)
+                                    setLikes((prev) => prev + 1)
+                                }} 
+                                aria-label='Like Button' 
+                                type='button' 
+                                className={`${styles.buttonGroup} ${styles.left} ${currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_down' && styles.disabled || ''}`}
+                                disabled={currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))}
+                                >
+                                <LazyImage className={styles.buttonGroupIcon} src='/images/like.svg' />
+                                <span>{likes}</span>
+                            </button>
+                            <button 
+                                onClick={async () => {
+                                    await handleVote(false, comment.comment_id)
+                                    setDislikes((prev) => prev + 1)
+                                }}
+                                aria-label='Dislike Button' 
+                                type='button' 
+                                className={`${styles.buttonGroup} ${styles.right} ${currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_up' && styles.disabled || ''}`}
+                                disabled={currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))}
+                                >
+                                <LazyImage className={styles.buttonGroupIcon} src='/images/dislike.svg' />
+                                <span>{dislikes}</span>
+                            </button>
+                        </>
                     )}
                     {!isReply && (
                         <button aria-label='Reply Button' onClick={() => setReply(!reply)} type='button' className={styles.replyButton}>
@@ -72,6 +145,7 @@ Comment.propTypes = {
     }),
     authors: PropTypes.shape({}),
     isReply: PropTypes.bool,
+    userInteractions: PropTypes.arrayOf(PropTypes.string),
     showVotes: PropTypes.bool
 };
 

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

@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
@@ -7,6 +7,7 @@ import { getAltText } from '~helpers/image';
 import LazyImage from '~hooks/lazy-image';
 import StarRating from '~molecules/star-rating/one-star';
 import useTranslate from '~hooks/useTranslate/useTranslate';
+import Verify from '~images/icons/verify';
 import Rating from '~atoms/ratings';
 import OperatorBanner from '~atoms/header-operator-bannner';
 import VariableComponent from '../variables';
@@ -15,8 +16,6 @@ import { TrackingKeys } from '~constants/tracking-api'
 import PrettyLink from '~atoms/pretty-link';
 import Ribbons from '~atoms/ribbons';
 
-const VerifyIcon = lazy(() => import('~images/icons/verify'));
-
 const TemplateOneTwo = ({
   relation,
   type,
@@ -71,7 +70,7 @@ const TemplateOneTwo = ({
         >
           <div className={styles.name}>
             <h1>{name}</h1>
-            {icon || <Suspense fallback={null}><VerifyIcon /></Suspense>}
+            {icon || <Verify />}
           </div>
           {ribbon && <Ribbons customStyle={template === 'template_two' ? styles.templateTwoRibbon : ''} item={[relation.ribbons[0]]} /> }
           {!['coming_soon', 'inactive'].includes(relation?.status) ? (

package/src/components/molecules/header/variants/operator/template-one-two/template-one-two.stories.js

@@ -1,8 +1,7 @@
-import React, { lazy } from "react";
+import React from "react";
 import TemplateOne from ".";
 import getOperatorData from "../../../../../../../tests/factories/relations/operator.factory";
-
-const VerifyIcon = lazy(() => import('~images/icons/verify'));
+import Verify from '~images/icons/verify';
 
 const pageOperatorData = getOperatorData();
 
@@ -46,7 +45,7 @@ export default {
     },
     icon: {
       name: "Icon",
-      defaultValue: <VerifyIcon />,
+      defaultValue: <Verify />,
     },
   },
 };

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

@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
@@ -6,15 +6,14 @@ import { imagePrettyUrl } from '~helpers/getters';
 import OperatorBanner from '~atoms/header-operator-bannner';
 import Rating from '~atoms/ratings';
 import { getAltText } from '~helpers/image';
+import Verify from '~images/icons/verify';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './slot.module.scss';
 
-const VerifyIcon = lazy(() => import('~images/icons/verify'));
-
 export default function SlotHeader({
   page,
   moduleName = TrackingKeys?.HEADERSLOTS,
-  image = <Suspense fallback={null}><VerifyIcon /></Suspense>,
+  image = <Verify />,
   showExtraRatings = false,
   width = 170,
   height = 170,

package/src/components/molecules/header/variants/slot/template-one/template-one.stories.js

@@ -1,8 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
-import React, { lazy } from 'react';
+import React from 'react';
 import TemplateOne from '.';
-
-const VerifyIcon = lazy(() => import('~images/icons/verify'));
+import Verify from '~images/icons/verify';
 
 export default {
   title: 'Theme/Layout/Header/Games/Template One',
@@ -68,6 +67,6 @@ Default.args = {
       },
     },
   },
-  image: <VerifyIcon />,
+  image: <Verify />,
   headerBonus: true,
 };

package/src/components/molecules/leave-comment-form/index.js

@@ -82,7 +82,6 @@ const LeaveCommentForm = ({
             validationMessage={validationMessage}
             path={page?.path}
             buttonIcon={buttonIcon}
-            titleType='h3'
             customClass='commentForm'
         />
 };

package/src/components/organisms/anchor/template-one/anchor.module.scss

@@ -1,4 +1,4 @@
-@keyframes fade-in {
+@keyframes fadeIn {
   0% {
     opacity: 0;
   }
@@ -24,17 +24,16 @@
 
 .defaultConatiner {
   position: relative;
-
   @include flex-direction(row);
 }
 
 .anchor {
   max-width: var(--main-container-max);
-
   @include flex-direction(row);
 
   &::-webkit-scrollbar {
     height: 0.4rem;
+    // display: none;
   }
 
   &::-webkit-scrollbar-track {
@@ -50,26 +49,23 @@
 
 .stickyContainer {
   position: fixed;
-  z-index: 2;
-  animation: fade-in 1s forwards;
+  z-index: 1;
+  animation: fadeIn 1s forwards;
   width: 100%;
-  background-color: #fff;
-  box-shadow: 0 8px 12px 0;
+  background-color: white;
+  box-shadow: 0px 8px 12px 0px;
   left: 0;
   right: 0;
   top: var(--nav-height);
-
   @include flex-direction(row);
   @include flex-align(center, center);
-
   padding-bottom: 0.5rem;
-
   .anchor{
+
   &::-webkit-scrollbar {
     display: none;
   }
   }
-
   &.usingExclOperator {
     top: calc(var(--nav-height) + var(--exc-operator-height));
   }
@@ -88,7 +84,6 @@
   line-height: 27px;
 
   @include flex-align(center, center);
-
   margin-right: 1.6rem;
   margin-bottom: 0.5rem;
   margin-top: 0.5rem;
@@ -100,7 +95,7 @@
   @include min(laptop) {
     &:hover {
       background-color: #272735;
-      color: #fff;
+      color: #ffffff;
     }
   }
 }
@@ -124,14 +119,11 @@
 .buttLeft,
 .buttRight {
   @include flex-align(center, center);
-
-  background-color: var(--body-background-color, #fff);
-
+  background-color: var(--body-background-color, white);
   @include flex-align(center, center);
-
   display: none;
   z-index: 1;
-  padding: 0 1rem;
+  padding: 0rem 1rem;
 
   @include custom-min(960) {
     display: flex;
@@ -141,7 +133,7 @@
     width: 3.2rem;
     height: 3.2rem;
     padding: 0.8rem;
-    color: #fff;
+    color: #ffffff;
     background-color: #262629;
     border-radius: 10rem;
   }

package/src/components/organisms/archive/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable no-nested-ternary */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
@@ -33,9 +32,8 @@ const Archive = ({ module, page, loadMore, gtmClass = '', anchorLabel, modulePos
       setModuleItems(items);
     }
   };
-  
-  const loadMoreText = useTranslate(`load_more_${module?.model_type}`) || useTranslate('load_more', 'Load More');
-  
+
+  const loadMoreText = useTranslate('load_more', 'Load More');
   updatedModule.items = moduleItems;
   return (
     <>
@@ -75,7 +73,6 @@ Archive.propTypes = {
     items: PropTypes.arrayOf(PropTypes.object),
     pagination_type: PropTypes.string,
     num_of_items: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    model_type: PropTypes.string,
   }).isRequired,
   loadMore: PropTypes.shape({
     label: PropTypes.string,