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

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

@@ -3,150 +3,124 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable import/no-extraneous-dependencies */
-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 styles from './comment.module.scss';
+import React, { useState } from "react";
+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 { imagePrettyUrl } from "~helpers/getters";
+import styles from "./comment.module.scss";
+import VerifyIcon from "~images/icons/verify";
 
-const Comment = ({ 
-    pageContext, 
-    comment, 
-    authors, 
-    isReply, 
-    userInteractions,
-    showVotes = true
+const Comment = ({
+  pageContext,
+  comment,
+  authors,
+  isReply,
+  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 isAuthor = authors?.[comment?.author_id] || null;
+  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 image = comment?.author_id
+    ? authors?.[comment?.author_id]?.image
+    : undefined;
 
-    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 date = new Date(comment.updated_at);
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
 
-        const headers = {
-            headers: {
-                "Content-Type": "application/json",
-                Accept: "application/json",
-            },
-        };
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const commentDate = `${day}/${month}/${year} | ${hours}:${minutes}`;
 
-        const existingCookie = document.cookie
-            .split('; ')
-            .find((row) => row.startsWith('comments='))
-            ?.split('=')[1] || '';
+  const [reply, setReply] = useState(false);
 
-        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}>
-                    <LazyImage src='/images/anon-user.svg' alt={`${commentName || 'Anonymous User'} user image`} />
-                    <span className={styles.commentName}>{commentName || '(Anonymous User)'}</span>
-                    {commentJobTitle &&  <span className={styles.commentJobTitle}>{commentJobTitle}</span>}
-                    <span className={styles.commentDate}>{commentDate}</span>
-                </div>
-                <div className={`${styles.commentContent} ${isReply ? styles.isReplyThread : ''}`}>
-                    <p>{comment.comment}</p>
-                </div>
-                <div className={styles.commentActions}>
-                    {showVotes && (
-                        <>
-                            <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}>
-                            {reply ? useTranslate('cancel_reply_button', 'Cancel Reply') : useTranslate('reply_button', 'Reply')}
-                        </button>  
-                    )}
-                </div>
-                {reply && <LeaveCommentForm page={pageContext.page} isReply parentCommentID={comment.comment_id} />}
-            </div>
+  return (
+    <div
+      className={`${styles.commentContainer} ${isReply ? styles.isReply : ""}`}
+    >
+      {isAuthor && (
+        <div className={styles.replyIndicator}>
+          <span>
+            {useTranslate("reply_from_the_author", "Reply from the Author:")}
+          </span>
+        </div>
+      )}
+      <div className={styles.commentTopArea}>
+        <LazyImage
+          src={image ? imagePrettyUrl(image, 50, 50) : "/images/anon-user.svg"}
+          alt={`${commentName || "Anonymous User"} user image`}
+        />
+        <span className={styles.commentName}>
+          {commentName || "Anonymous User"}
+          {isAuthor && (
+            <VerifyIcon />
+          )}
+        </span>
+        {commentJobTitle && (
+          <span className={styles.commentJobTitle}>{commentJobTitle}</span>
+        )}
+        <span className={styles.commentDate}>{commentDate}</span>
+      </div>
+      <div
+        className={`${styles.commentContent} ${
+          isReply ? styles.isReplyThread : ""
+        }`}
+      >
+        <p>{comment.comment}</p>
+      </div>
+      <div className={styles.commentActions}>
+        {showVotes && <CommentVotes comment={comment} />}
+        {!isReply && (
+          <button
+            aria-label="Reply Button"
+            onClick={() => setReply(!reply)}
+            type="button"
+            className={styles.replyButton}
+          >
+            {reply
+              ? useTranslate("cancel_reply_button", "Cancel Reply")
+              : useTranslate("reply_button", "Reply")}
+          </button>
+        )}
+      </div>
+      {reply && (
+        <LeaveCommentForm
+          page={pageContext.page}
+          isReply
+          parentCommentID={comment.comment_id}
+        />
+      )}
+    </div>
+  );
 };
 
 Comment.propTypes = {
-    pageContext: PropTypes.shape({
-        page: PropTypes.shape({})
-    }),
-    comment: PropTypes.shape({
-        comment_id: PropTypes.number,
-        author_id: PropTypes.number,
-        author_name: PropTypes.string,
-        email: PropTypes.string,
-        comment: PropTypes.string,
-        updated_at: PropTypes.string,
-        votes_up: PropTypes.number,
-        votes_down: PropTypes.number,
-    }),
-    authors: PropTypes.shape({}),
-    isReply: PropTypes.bool,
-    userInteractions: PropTypes.arrayOf(PropTypes.string),
-    showVotes: PropTypes.bool
+  pageContext: PropTypes.shape({
+    page: PropTypes.shape({}),
+  }),
+  comment: PropTypes.shape({
+    comment_id: PropTypes.number,
+    author_id: PropTypes.number,
+    author_name: PropTypes.string,
+    email: PropTypes.string,
+    comment: PropTypes.string,
+    updated_at: PropTypes.string,
+    votes_up: PropTypes.number,
+    votes_down: PropTypes.number,
+  }),
+  authors: PropTypes.shape({}),
+  isReply: PropTypes.bool,
+  showVotes: PropTypes.bool,
 };
 
 export default Comment;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { lazy, Suspense } 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,7 +7,6 @@ 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';
@@ -16,6 +15,8 @@ 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,
@@ -70,7 +71,7 @@ const TemplateOneTwo = ({
         >
           <div className={styles.name}>
             <h1>{name}</h1>
-            {icon || <Verify />}
+            {icon || <Suspense fallback={null}><VerifyIcon /></Suspense>}
           </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,7 +1,8 @@
-import React from "react";
+import React, { lazy } from "react";
 import TemplateOne from ".";
 import getOperatorData from "../../../../../../../tests/factories/relations/operator.factory";
-import Verify from '~images/icons/verify';
+
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
 
 const pageOperatorData = getOperatorData();
 
@@ -45,7 +46,7 @@ export default {
     },
     icon: {
       name: "Icon",
-      defaultValue: <Verify />,
+      defaultValue: <VerifyIcon />,
     },
   },
 };

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

@@ -10,26 +10,26 @@ describe('Operator template one two component', () => {
 
   test('Template One Status Active', () => {
     const { container, getByText } = render(<TemplateOneTwo {...data} type="operator" />);
-    expect(getByText('Ice Casino')).toBeTruthy();
+    expect(getByText('Ice Casino')).toBeInTheDocument();
     expect(container.querySelectorAll('h1')).toHaveLength(1);
     expect(container.querySelectorAll('a')).toHaveLength(3);
-    expect(getByText('100% Bonus')).toBeTruthy();
-    expect(getByText('+ Big Promotions')).toBeTruthy();
+    expect(getByText('100% Bonus')).toBeInTheDocument();
+    expect(getByText('+ Big Promotions')).toBeInTheDocument();
     expect(container.querySelectorAll('ul')).toHaveLength(1);
-    expect(container.querySelectorAll('li')).toHaveLength(6);
+    expect(container.querySelectorAll('li')).toHaveLength(7);
   });
 
   test('Template Two Status Active', () => {
     const { container, getByText } = render(
       <TemplateOneTwo {...data} template="template_two" type="operator" />
     );
-    expect(getByText('Ice Casino')).toBeTruthy();
+    expect(getByText('Ice Casino')).toBeInTheDocument();
     expect(container.querySelectorAll('h1')).toHaveLength(1);
     expect(container.querySelectorAll('a')).toHaveLength(3);
-    expect(getByText('100% Bonus')).toBeTruthy();
-    expect(getByText('+ Big Promotions')).toBeTruthy();
+    expect(getByText('100% Bonus')).toBeInTheDocument();
+    expect(getByText('+ Big Promotions')).toBeInTheDocument();
     expect(container.querySelectorAll('ul')).toHaveLength(1);
-    expect(container.querySelectorAll('li')).toHaveLength(6);
+    expect(container.querySelectorAll('li')).toHaveLength(7);
   });
 });
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
@@ -6,14 +6,15 @@ 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 = <Verify />,
+  image = <Suspense fallback={null}><VerifyIcon /></Suspense>,
   showExtraRatings = false,
   width = 170,
   height = 170,

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

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

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

@@ -2,7 +2,6 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-import axios from "axios";
 import Form from "gatsby-core-theme/src/components/organisms/form";
 import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
@@ -19,13 +18,14 @@ const LeaveCommentForm = ({
     failMessage = 'Comment Not Added',
     validationMessage = 'Fill all required fields',
     buttonIcon = <FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />,
+    titleTag = 'h2',
 }) => {
     const activeMarket = page?.market;
+    const isDev = process.env.NODE_ENV === 'development';
 
     const customSubmit = (form, resetForm) => {
         const formData = new FormData(form);
-        const data = Object.fromEntries(formData.entries());
-
+        const data = Object.fromEntries(formData.entries());        
         const cleanedData = isReply
         ? Object.entries(data).reduce((acc, [key, value]) => {
             if (key.startsWith('post_anonymously_')) acc.post_anonymously = value;
@@ -34,8 +34,10 @@ const LeaveCommentForm = ({
             return acc;
             }, {})
         : data;
-
-        if(cleanedData?.["g-recaptcha-response"] === '' || !cleanedData?.tnc) return;
+                
+        
+        if((cleanedData?.["g-recaptcha-response"] === '' || !cleanedData?.tnc) && !isDev) return;
+        
         if(parentCommentID) cleanedData.parent_id = parentCommentID;
 
         cleanedData.reference_id = page?.id;
@@ -50,22 +52,24 @@ const LeaveCommentForm = ({
         delete cleanedData?.post_anonymously;
         delete cleanedData?.tnc;
 
-        const headers = {
-            headers: {
-                "Content-Type": "application/json",
-                Accept: "application/json",
-            },
-        };
-
         return new Promise((resolve, reject) => {
-            axios
-            .post('/api/post-comment', cleanedData, headers)
-            .then((response) => {
-                response.ok = response.status === 200;
-                if (response.ok) resetForm();
-                resolve(response);
+            fetch(`${process.env.GATSBY_API_COMMENT_URL}/api/post-comment`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(cleanedData),
+            })
+            .then(async (response) => {
+                if (response.ok) {
+                    resetForm();
+                    resolve(response);
+                } else {
+                    const errorData = await response.json().catch(() => ({}));
+                    reject(errorData?.errors?.join() || response.statusText);
+                }
             })
-            .catch((error) => reject(error?.response?.data?.errors?.join() || error.message));
+            .catch((error) => reject(error.message));
         });
     };
 
@@ -82,6 +86,7 @@ const LeaveCommentForm = ({
             validationMessage={validationMessage}
             path={page?.path}
             buttonIcon={buttonIcon}
+            titleType={titleTag}
             customClass='commentForm'
         />
 };
@@ -101,6 +106,7 @@ LeaveCommentForm.propTypes = {
   showButtonIcon: PropTypes.bool,
   showLabels: PropTypes.bool,
   buttonIcon: PropTypes.element,
+  titleTag: PropTypes.string,
 };
 
 export default LeaveCommentForm;

package/src/components/molecules/spotlights_v2/icon/template-one/index.js

@@ -18,7 +18,7 @@ export default function TemplateOne({ module, width = 106, height = 106, loading
           height={height}
           width={width}
           src={imagePrettyUrl(res?.icon, width, height)}
-          alt={getAltText(res?.image_object || res?.icon_object, res?.label)}
+          alt={getAltText(res?.image_object || res?.icon_object, res?.label || res.link_text)}
           loading={loadingImg}
         />
       )}

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

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

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

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