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

package/src/components/organisms/comments/comment-tree/index.js

@@ -1,16 +1,15 @@
 import React from "react";
 
 import PropTypes, { arrayOf } from 'prop-types';
+import keygen from '~helpers/keygen';
 import Comment from "../../../molecules/comment";
 
-import styles from './comment-tree.module.scss';
-
-const CommentTree = React.memo(({ pageContext, comment, authors, depth = 0 }) => 
-  <div key={comment.comment_id} className={`${styles?.[`comment_${depth}`]} ${depth > 0 && styles.isReply}`}>
-    <Comment pageContext={pageContext} comment={comment} authors={authors} isReply={depth > 0} />
+const CommentTree = React.memo(({ pageContext, comment, authors, depth = 0, cookieComments }) => 
+  <div key={keygen()} style={{ marginLeft: depth * 56 }}>
+    <Comment pageContext={pageContext} comment={comment} authors={authors} isReply={depth > 0} userInteractions={cookieComments} />
     {comment.replies?.map(reply => (
       <CommentTree 
-        key={reply.comment_id} 
+        key={keygen()} 
         comment={reply} 
         authors={authors} 
         depth={depth + 1}
@@ -23,11 +22,11 @@ const CommentTree = React.memo(({ pageContext, comment, authors, depth = 0 }) =>
 CommentTree.propTypes = {
   pageContext: PropTypes.shape({}),
   comment: PropTypes.shape({
-    replies: arrayOf(PropTypes.shape({})),
-    comment_id: PropTypes.number
+    replies: arrayOf(PropTypes.shape({}))
   }),
   authors: PropTypes.shape({}),
   depth: PropTypes.number, 
+  cookieComments: PropTypes.arrayOf(PropTypes.string)
 };
 
 export default CommentTree;

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

@@ -1,28 +1,39 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import CommentTree from './comment-tree';
 import LeaveCommentForm from '../../molecules/leave-comment-form';
-import { VotesProvider } from '../../../context/VotesProvider';
 
 const Comments = ({ pageContext }) => {
   const { comments, authors } = pageContext;
+  const [cookieComments, setCookieComments] = useState([]);
+
+  useEffect(() => {
+    const storedVotes =
+      document.cookie
+        .split('; ')
+        .find((row) => row.startsWith('comments='))
+        ?.split('=')[1]
+        ?.split(',')
+        .filter(Boolean) || [];
+
+    setCookieComments(storedVotes);
+  }, []);
 
   if (!comments) return null;
 
   return (
     <div>
       <LeaveCommentForm page={pageContext.page} />
-      <VotesProvider>
-        {comments.map((comment) => (
-          <CommentTree
-            key={comment.comment_id}
-            pageContext={pageContext}
-            comment={comment}
-            authors={authors?.authors}
-            depth={0}
-          />
-        ))}
-      </VotesProvider>
+      {comments.map((comment) => (
+        <CommentTree
+          key={comment.comment_id}
+          pageContext={pageContext}
+          comment={comment}
+          authors={authors?.authors}
+          depth={0}
+          cookieComments={cookieComments}
+        />
+      ))}
     </div>
   );
 };

package/src/components/organisms/cookie-consent/index.js

@@ -1,78 +1,70 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useState, useEffect, lazy, Suspense } from "react";
-import PropTypes from "prop-types";
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 
-import useTranslate from "~hooks/useTranslate/useTranslate";
-import { setCookie, getCookie } from "~helpers/cookies";
-import styles from "./cookie-consent.module.scss";
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import { setCookie, getCookie } from '~helpers/cookies';
+import CookieModal from '../../molecules/cookie-modal';
+import styles from './cookie-consent.module.scss';
 
 const CookieConsent = ({
-  acceptText = "Accept",
-  rejectText = "Reject",
+  acceptText = 'Accept',
+  rejectText = 'Reject',
   settingsCookie,
   children,
-  cookieName = "CookieConsent",
-  logo = "/images/logo.svg",
+  cookieName = 'CookieConsent',
+  logo = '/images/logo.svg',
   icon = null,
-  showRejectButton = false,
+  showRejectButton=false
 }) => {
   const [showModal, setShowModal] = useState(false);
 
   const [showCookieConsent, setShowCookieConsent] = useState(false);
 
-  const CookieModal = lazy(() => import("../../molecules/cookie-modal"));
-
   // when user declines
   const handleDecline = () => {
-    setCookie(cookieName, false, 365, "/");
-    setCookie("showCookie", false, 365, "/");
+    setCookie(cookieName, false, 365, '/');
+    setCookie('showCookie', false, 365, '/');
     setShowCookieConsent(false);
     setShowModal(false);
-    document.body.style.overflow = "auto";
+    document.body.style.overflow = 'auto';
   };
 
   // when user accepts
   const handleAccept = () => {
-    setCookie(cookieName, true, 365, "/");
-    setCookie("showCookie", false, 365, "/");
+    setCookie(cookieName, true, 365, '/');
+    setCookie('showCookie', false, 365, '/');
     setShowCookieConsent(false);
     setShowModal(false);
-    document.body.style.overflow = "auto";
+    document.body.style.overflow = 'auto';
   };
 
   const handleShowModalClick = () => {
     setShowModal(!showModal);
-    document.body.style.overflow = "hidden";
+    document.body.style.overflow = 'hidden';
   };
 
   const closeModal = () => {
     setShowModal(false);
-    document.body.style.overflow = "auto";
+    document.body.style.overflow = 'auto';
   };
 
   useEffect(() => {
-    if (typeof window !== `undefined` && getCookie("showCookie") !== "false") {
+    if (typeof window !== `undefined` && getCookie('showCookie') !== "false") {
       setShowCookieConsent(true);
     }
   }, []);
 
-  const settingCookieText = useTranslate(
-    "cookie_setting_button",
-    "Cookie Setting"
-  );
+  const settingCookieText = useTranslate('cookie_setting_button', 'Cookie Setting');
 
   return (
     <>
-      <div
-        className={`${styles.cookieConsent} ${
-          (showCookieConsent && styles.show) || ""
-        }`}
-      >
-        <div className={`${styles?.consent || ""}`}>
-          <div className={styles?.content || ""}>{children}</div>
-          <div className={styles?.buttonsContainer || ""}>
+      <div className={`${styles.cookieConsent} ${(showCookieConsent && styles.show) || ''}`}>
+        <div className={`${styles?.consent || ''}`}>
+          <div className={styles?.content || ''}>{children}</div>
+          <div className={styles?.buttonsContainer || ''}>
             {settingsCookie && (
               <button
                 onClick={handleShowModalClick}
@@ -98,22 +90,20 @@ const CookieConsent = ({
               className="cookie-consent-gtm btn-cta"
               type="button"
             >
-              {useTranslate("cookie_accept_button", acceptText)}
+              {useTranslate('cookie_accept_button', acceptText)}
               {icon && icon}
             </button>
           </div>
         </div>
       </div>
       {settingsCookie && showModal && (
-        <Suspense fallback={null}>
-          <CookieModal
-            logo={logo}
-            hide={!showModal}
-            handleAcceptCookies={handleAccept}
-            handleDeclineCookies={handleDecline}
-            closeModal={closeModal}
-          />
-        </Suspense>
+        <CookieModal
+          logo={logo}
+          hide={!showModal}
+          handleAcceptCookies={handleAccept}
+          handleDeclineCookies={handleDecline}
+          closeModal={closeModal}
+        />
       )}
     </>
   );
@@ -126,11 +116,7 @@ CookieConsent.propTypes = {
   settingsCookie: PropTypes.bool,
   cookieName: PropTypes.string,
   logo: PropTypes.string,
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.any,
-  ]),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.any]),
   icon: PropTypes.node,
 };
 

package/src/components/organisms/form/fields/fields.module.scss

@@ -29,7 +29,7 @@
   @include flex-align(flex-end, flex-start);
 
   > span {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
     font-weight: 400;
     line-height: 2.2rem;
   }
@@ -105,7 +105,7 @@
   cursor: pointer;
   width: 4.8rem;
   inset: 0;
-  background-color: #AFAFB0;
+  background-color: #ccc;
   transition: 0.4s;
   border-radius: 3.4rem;
   height: 2.4rem;
@@ -137,9 +137,6 @@ input:checked + .slider::before {
 
 .switchLabel{
   margin-left: 4.5rem;
-  font-size: 1.6rem;
-  font-weight: 400;
-  color: #3C3C40;
 }
 
 .errorMsg {

package/src/components/organisms/form/fields/index.js

@@ -37,7 +37,7 @@ const getField = (field, handleChange, elements, state) => {
             <span>{`${elements[id].length}/${field.maxLength}`}</span>
           )}
           {field.minlength && (
-            <span className={styles.lengthWarning}>{`Minimum ${field.minlength} chars`}</span>
+            <span className={styles.lengthWarning}>{`Minimum ${field.minlength} words`}</span>
           )}
           {field.errorMsg && <span className={styles.errorMsg}>{field.errorMsg}</span>}
         </div>
@@ -56,7 +56,9 @@ const getField = (field, handleChange, elements, state) => {
                 required={!!option?.required}
               />
               <span
-                className={`${styles.checkboxLabel || ''} ${styles.slider}`}
+                className={`${styles.checkboxLabel || ''} ${styles.slider} ${
+                  (!state.isValid && !elements[option.id].length && styles.invalid) || ''
+                }`}
               />
               <span className={styles.switchLabel}>{generatePlaceholderString(
                 useTranslate(option.translationKey, option.label),

package/src/components/organisms/form/form.module.scss

@@ -228,89 +228,58 @@
   padding: 0;
   margin-top: 3.5rem;
 
-    input:not([type="range"]),
-    textarea,
-    select {
-      background: #fff !important;
-      font-size: 1.4rem;
-      line-height: 2.1rem;
-      padding: 1.6rem;
-      max-width: 100%;
-      outline: none;
-      border-radius: 0.8rem;
-      border: 1px solid #E2E8F0 !important;
-      color: #0F172A !important;
-    }
-
-
   > form{
-    display: flex;
-    grid-template-columns: 1fr 1fr;
-
-    @include min(tablet){
       display: grid;
-      gap: 1.6rem;
-    }
-
-    label{
-      font-size: 1.6rem;
-      font-weight: 600;
-      color: #262629;
-    }
+      grid-template-columns: 1fr 1fr;
 
-    div > input ~ span, div > textarea ~ span{
-      display: none;
-    }
-
-    input:user-invalid{
-      border: 1.5px solid var(--comment-input-error, #DD4B39) !important;
-    }
+      div > input ~ span, div > textarea ~ span{
+        display: none;
+      }
 
-    textarea:user-invalid{
-      border: 1.5px solid var(--comment-input-error, #DD4B39) !important;
-    }
+      input:user-invalid{
+        border: .15rem solid var(--comment-input-error, #DD4B39);
+      }
 
-    input:user-invalid ~ span{
-      display: block;
-    }
+      textarea:user-invalid{
+        border: .15rem solid var(--comment-input-error, #DD4B39);
+      }
 
-    textarea:user-invalid ~ span{
-      display: block;
-    }
+      input:user-invalid ~ span{
+        display: block;
+      }
 
-    textarea:not(:placeholder-shown):invalid ~ span{
-      display: block;     
-    }
+      textarea:user-invalid ~ span{
+        display: block;
+      }
 
-    input:not([type='checkbox'], :placeholder-shown):invalid ~ span{
-      display: block;     
-    }
+      textarea:not(:placeholder-shown):invalid ~ span{
+        display: block;     
+      }
 
-    input:not(:placeholder-shown):invalid, textarea:not(:placeholder-shown):invalid{
-      border: 1.5px solid var(--comment-input-error, #DD4B39) !important;
-    }
+      input:not([type='checkbox'], :placeholder-shown):invalid ~ span{
+        display: block;     
+      }
 
-    > .formButton{
-      border: .2rem solid #161128;
-      padding: 8px 16px !important;
-      margin-left: auto;
-      border-radius: 5rem;
-      font-size: 1.4rem;
-      font-weight: 700;
-      background: transparent !important;
-      text-align: center !important;
-      line-height: 2.2rem;
-      text-transform: capitalize;
-      color: #161128 !important; 
-      height: 4rem !important;
-      grid-column: 1 / -1;
-      width: 100%;
-      margin-bottom: 3.4rem;
+      input:not(:placeholder-shown):invalid, textarea:not(:placeholder-shown):invalid{
+        border: .15rem solid var(--comment-input-error, #DD4B39);
+      }
 
-      @include min(tablet){
+      > .formButton{
+        border: .2rem solid #161128;
+        padding: 8px 16px !important;
         width: auto !important;
+        margin-left: auto;
+        border-radius: 5rem;
+        font-size: 1.4rem;
+        font-weight: 700;
+        background: transparent !important;
+        text-align: center !important;
+        line-height: 2.2rem;
+        text-transform: capitalize;
+        color: #161128 !important; 
+        height: 4rem !important;
+        grid-column: 1 / -1;
       }
-    }
   }
 
   div:has(>input[type="checkbox"] ) {
@@ -319,12 +288,6 @@
     grid-template-columns: 1.3rem 1fr;
   }
 
-  input[type="checkbox"] + label{
-    font-size: 1.4rem;
-    font-weight: 400;
-    line-height: 2.2rem;
-  }
-
   .alertDanger, .alertSuccess, .alertWarning {
     background-color: var(--alert-error-bg, #FEE2E2);
     color: var(--alert-error-text, #09090B);

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

@@ -152,6 +152,7 @@ const FormComponent = ({
           className={formOptions.twoCol ? styles.twoCol || '' : styles.singleCol || ''}
           target="_self"
         >
+          {process.env.GA_TRACKING_ID}
           {formOptions.fields?.map((field) => {
             const { id, translationKey, label, validations } = field;
 

package/src/constants/forms.js

@@ -145,7 +145,7 @@ export const commentForm = {
         translationKey: 'textarea_label',
         twoCol: false,
         required: true,
-        minlength: 50,
+        minlength: 15,
         errorMsg: "Please enter a comment."
       },
       {

package/src/helpers/tracker.mjs

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable no-underscore-dangle */
-import { generateTrackerLink } from "./generators.mjs";
-import { stripSuffixSlash } from "./strings.mjs";
+import { generateTrackerLink } from "~helpers/generators";
+import { stripSuffixSlash } from "~helpers/strings";
 
 export function getTrackerName(operator, page, path) {
   const trackerLinks = operator ? Object.keys(operator.links) : [];

package/src/resolver/redirect.mjs

@@ -1,6 +1,5 @@
 import fs from "fs";
 import chalk from "chalk";
-import { getTrackerName } from '../helpers/tracker.mjs';
 
 // eslint-disable-next-line import/prefer-default-export
 export function generateRedirects(siteSettingsData) {
@@ -51,25 +50,3 @@ export function generateRedirects(siteSettingsData) {
 
   stream.end();
 }
-
-export function generatePrettyLinkRedirects( trackingPages = [] ) {
-  if(!trackingPages.length) return;
-
-  const stream = fs.createWriteStream("affiliate-rewrites.conf");
-
-  // eslint-disable-next-line no-console
-  console.log(
-    chalk.magenta("info") + chalk.whiteBright(" creating pretty link rewrite rules")
-  );
-
-  trackingPages.filter(tracker => tracker?.operator?.status === 'active').forEach(({ path, page, operator }) => {
-    const tracker = getTrackerName(operator, page, path);
-    
-    stream.write(`location ${path} { 
-      add_header X-Robots-Tag "noindex, nofollow";
-      return 302 ${tracker.value}; 
-    }\n`)
-  })
-
-  stream.end();
-}

package/src/resolver/redirect.test.js

@@ -1,6 +1,5 @@
 import fs from "fs";
-import { generateRedirects, generatePrettyLinkRedirects } from "./redirect.mjs";
-import { getTrackerName } from "../helpers/tracker.mjs";
+import { generateRedirects } from "./redirect.mjs";
 
 jest.mock("fs", () => ({
   createWriteStream: jest.fn(() => ({
@@ -8,9 +7,6 @@ jest.mock("fs", () => ({
     end: jest.fn(),
   })),
 }));
-jest.mock("../helpers/tracker.mjs", () => ({
-  getTrackerName: jest.fn(),
-}));
 
 describe("generateRedirects", () => {
   let siteSettingsData; let mockStream;
@@ -101,63 +97,3 @@ describe("generateRedirects", () => {
     expect(mockStream.end).toHaveBeenCalled();
   });
 });
-
-describe("generatePrettyLinkRedirects", () => {
-  let mockStream;
-
-  beforeEach(() => {
-    mockStream = {
-      write: jest.fn(),
-      end: jest.fn(),
-    };
-
-    fs.createWriteStream.mockReturnValue(mockStream);
-    jest.clearAllMocks();
-  });
-
-  it("should do nothing if trackingPages is empty", () => {
-    generatePrettyLinkRedirects([]);
-    expect(fs.createWriteStream).not.toHaveBeenCalled();
-  });
-
-  it("should generate pretty link redirect rules for active trackers", () => {
-    getTrackerName.mockReturnValue({ value: "https://example.com/offer" });
-
-    const trackingPages = [
-      {
-        path: "/goto/leovegas",
-        page: "home",
-        operator: { status: "active", name: "LeoVegas" },
-      },
-    ];
-
-    generatePrettyLinkRedirects(trackingPages);
-
-    expect(fs.createWriteStream).toHaveBeenCalledWith("affiliate-rewrites.conf");
-
-    expect(mockStream.write).toHaveBeenCalledWith(
-      `location /goto/leovegas { 
-      add_header X-Robots-Tag "noindex, nofollow";
-      return 302 https://example.com/offer; 
-    }\n`
-    );
-
-    expect(mockStream.end).toHaveBeenCalled();
-  });
-
-  it("should skip trackers with inactive operator status", () => {
-    const trackingPages = [
-      {
-        path: "/goto/unibet",
-        page: "home",
-        operator: { status: "inactive", name: "Unibet" },
-      },
-    ];
-
-    generatePrettyLinkRedirects(trackingPages);
-
-    expect(fs.createWriteStream).toHaveBeenCalledWith("affiliate-rewrites.conf");
-    expect(mockStream.write).not.toHaveBeenCalled();
-    expect(mockStream.end).toHaveBeenCalled();
-  });
-});

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

@@ -1,34 +0,0 @@
-.buttonGroup{
-    background: #EAE5E0;
-    font-size: 1.2rem;
-    padding: .5rem .8rem;
-    height: 2.8rem;
-    gap: .4rem;
-    color: #0F172A;
-
-    @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;
-}
-
-.buttonGroup[disabled]{
-    cursor: default !important;
-}
-
-.disabled > *{
-    opacity: .3;
-}