gatsby-core-theme 44.3.1 → 45.0.0-beta.2

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

@@ -0,0 +1,81 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+
+import Form from "gatsby-core-theme/src/components/organisms/form";
+import PropTypes from 'prop-types';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import { commentForm } from '../../../constants/forms';
+import styles from './leave-comment-form.module.scss';
+
+const LeaveCommentForm = ({
+    page,
+    showLabels = true,
+    showButtonIcon = false,
+    buttonLabel = 'Add Comment',
+    submitUrl = `${process.env.GATSBY_API_URL}/v0.1/content/comments`,
+    successMessage = 'Comment Added',
+    failMessage = 'Comment Not Added',
+    validationMessage = 'Fill all required fields',
+    buttonIcon = <FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />,
+}) => {
+    const activeMarket = page?.market;
+
+    const customSubmit = (form) => {
+        const formData = new FormData(form);
+        const data = Object.fromEntries(formData.entries());
+
+        // if(data?.["g-recaptcha-response"] === '') return;
+
+        data.reference_id = page?.id;
+        data.site_id = process.env.SITE_ID;
+        data.market_short_code = activeMarket;
+        delete data["g-recaptcha-response"];
+
+        return fetch(submitUrl, {
+            method: 'POST',
+            cache: 'no-cache',
+            headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+            },
+            body: JSON.stringify(data),
+        });
+    };
+
+    return  <div className={`${styles.commentFormContainer}`}>
+                <Form
+                    formOptions={commentForm[activeMarket] || commentForm.default}
+                    showLabels={showLabels}
+                    hasButton
+                    showButtonIcon={showButtonIcon}
+                    buttonLabel={buttonLabel}
+                    customeSubmit={customSubmit}
+                    successMessage={successMessage}
+                    failMessage={failMessage}
+                    validationMessage={validationMessage}
+                    path={page?.path}
+                    buttonIcon={buttonIcon}
+                    customClass={styles.commentForm || ''} 
+                />
+            </div>
+};
+
+LeaveCommentForm.propTypes = {
+  page: PropTypes.shape({
+    market: PropTypes.string,
+    id: PropTypes.number,
+    path: PropTypes.string,
+  }).isRequired,
+  submitUrl: PropTypes.string,
+  successMessage: PropTypes.string,
+  failMessage: PropTypes.string,
+  validationMessage: PropTypes.string,
+  buttonLabel: PropTypes.string,
+  showButtonIcon: PropTypes.bool,
+  showLabels: PropTypes.bool,
+  buttonIcon: PropTypes.element,
+};
+
+export default LeaveCommentForm;

package/src/components/molecules/leave-comment-form/leave-comment-form.module.scss

@@ -0,0 +1,23 @@
+.commentForm{
+    background-color: transparent;
+    box-shadow: none;
+    padding: 0;
+    margin-top: 3.5rem;
+
+    > form{
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+
+        > button{
+        border: .2rem solid #161128;
+        padding: 8px 16px;
+        width: auto;
+        margin-left: auto;
+        border-radius: 5rem;
+        font-size: 1.4rem;
+        font-weight: 700;
+        line-height: 2.2rem;
+        text-transform: capitalize;
+    }
+    }
+}

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

@@ -61,6 +61,8 @@ const Modules = ({ module, page, pageContext, modulePosition }) => {
         return lazy(() => import("~molecules/bonus/template-one"));
       case "image":
         return lazy(() => import("~atoms/image"));
+      case "comments":
+        return lazy(() => import("~organisms/comments"));
       case "spotlights":
         if (module?.mode === "image_text") {
           if (module?.style === "template_two") {

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

@@ -0,0 +1,29 @@
+import React from "react";
+
+import PropTypes, { arrayOf } from 'prop-types';
+import keygen from '~helpers/keygen';
+import Comment from "../../../molecules/comment";
+
+const CommentTree = React.memo(({ comment, authors, depth = 0 }) => (
+  <div key={keygen()} style={{ marginLeft: depth * 56 }}>
+    <Comment comment={comment} authors={authors} isReply={depth > 0} />
+    {comment.replies?.map(reply => (
+      <CommentTree 
+        key={keygen()} 
+        comment={reply} 
+        authors={authors} 
+        depth={depth + 1} 
+      />
+    ))}
+  </div>
+));
+
+CommentTree.propTypes = {
+  comment: PropTypes.shape({
+    replies: arrayOf(PropTypes.shape({}))
+  }),
+  authors: PropTypes.shape({}),
+  depth: PropTypes.number
+};
+
+export default CommentTree;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CommentTree from './comment-tree';
+import LeaveCommentForm from '../../molecules/leave-comment-form';
+
+const Comments = ({ pageContext }) => {
+    const { comments, authors } = pageContext;
+    if(!comments) return;
+    
+    return (
+        <div>
+            {comments.map((comment) => <CommentTree comment={comment} authors={authors} depth={0} />)}
+            <LeaveCommentForm page={pageContext.page} />
+        </div>
+    );
+};
+
+Comments.propTypes = {
+  pageContext: PropTypes.shape({
+    comments: PropTypes.arrayOf({}),
+    authors: PropTypes.shape({}),
+    page: PropTypes.shape({})
+  })
+};
+
+export default Comments;

package/src/components/organisms/cookie-consent/cookie-consent.module.scss

@@ -44,9 +44,8 @@
         background-color: var(--primary-button-color, #6e33e5);
       }
       button {
-        text-wrap: var(--cookie-consent-wrap-button, nowrap);
         height: var(--cookie-consent-button-height, 5.6rem);
-        display: var(--cookie-consent-button-display, flex);
+        display: flex;
         border-radius: var(--cookie-consent-button-radius, 10rem);
         padding: var(--cookie-consent-button-padding, 1.6rem 2.4rem);
         font-size: var(--cookie-consent-button-size, 1.8rem);

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

@@ -52,7 +52,7 @@ const CookieConsent = ({
   };
 
   useEffect(() => {
-    if (typeof window !== `undefined` && getCookie('showCookie') !== false) {
+    if (typeof window !== `undefined` && getCookie('showCookie') !== 'false') {
       setShowCookieConsent(true);
     }
   }, []);

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

@@ -81,8 +81,9 @@ const SearchForm = ({
     } else {
       const searchUrl =
         marketPrefix !== "/"
-          ? `/${marketPrefix}/s${process.env.TRAILING_SLASH ? "/" : ""}?s=${e.target.value
-          }`
+          ? `/${marketPrefix}/s${process.env.TRAILING_SLASH ? "/" : ""}?s=${
+              e.target.value
+            }`
           : `/s${process.env.TRAILING_SLASH ? "/" : ""}?s=${e.target.value}`;
       window.location = `${window.location.origin}${searchUrl}`;
     }
@@ -147,8 +148,9 @@ const SearchForm = ({
         type="button"
         aria-label={useTranslate("ariaLabel-search", "Search")}
         onClick={handleOnSearchIconClick}
-        className={`${styles.searchButton || ""} ${localSearch && (styles.active || "")
-          } search-gtm btn-cta`}
+        className={`${styles.searchButton || ""} ${
+          localSearch && (styles.active || "")
+        } search-gtm btn-cta`}
         disabled={isDisabled}
       >
         {searchIcon === null ? (
@@ -235,12 +237,13 @@ const SearchForm = ({
                                         const inputValue =
                                           searchInputRef.current?.value.trim();
                                         if (inputValue) {
-                                          const url = `/s${process.env.TRAILING_SLASH
-                                            ? "/"
-                                            : ""
-                                            }?s=${encodeURIComponent(
-                                              inputValue
-                                            )}`;
+                                          const url = `/s${
+                                            process.env.TRAILING_SLASH
+                                              ? "/"
+                                              : ""
+                                          }?s=${encodeURIComponent(
+                                            inputValue
+                                          )}`;
                                           window.location.href = url;
                                         }
                                       }}
@@ -269,7 +272,7 @@ const SearchForm = ({
                 )}
               </div>
             )}
-            {(showRecommendedCasinos || showTopSearches) && (!filteredData || filteredData.length === 0) && !autoCompleteLoading && (
+            {(showRecommendedCasinos || showTopSearches) && (
               <VariableComponent
                 recommendedCasinos={recommendedCasinos}
                 topSearches={topSearches}

package/src/components/organisms/search/variable/index.js

@@ -28,7 +28,7 @@ const VariableComponent = ({
     >
       {showTopSearches && (
         <div className={styles.topSearches}>
-          <p>{useTranslate("top_searches_bar", "Top Searches:")}</p>
+          <p>Top Searches:</p>
           {topSearches?.map((item) => (
             <Link key={item.id} to={item?.link?.value}>
               {item?.label}

package/src/components/organisms/search/variable/searchVariable.test.js

@@ -29,6 +29,8 @@ describe("VariableComponent", () => {
       />
     );
 
+    expect(screen.getByText("Top Searches:")).toBeInTheDocument();
+
     topSearches.forEach((item) => {
       expect(screen.getByText(item.label)).toBeInTheDocument();
     });

package/src/constants/forms.js

@@ -83,6 +83,58 @@ export const contactUsForm = {
   },
 };
 
+export const commentForm = {
+  default: {
+    title: {
+      label: 'Leave a comment',
+      translationKey: 'leave_a_comment',
+    },
+    hasReCAPTCHA: true,
+    reCaptcha: {
+      // validations: {
+      //   label: 'Please confirm',
+      //   translationKey: 'valid_recaptcha',
+      //   icon: <IoMdCloseCircleOutline />,
+      // }
+    },
+    fields: [
+      {
+        label: 'Name',
+        translationKey: 'name_label',
+        id: 'name',
+        type: 'text',
+        placeholder: {
+          label: 'Name',
+          translationKey: 'name_placeholder',
+        },
+        twoCol: true,
+      },
+      {
+        label: 'Email Address',
+        id: 'email',
+        type: 'email',
+        placeholder: {
+          label: 'Email@placeholder.com',
+          translationKey: 'email_placeholder',
+        },
+        translationKey: 'email_label',
+        twoCol: true,
+      },
+      {
+        id: 'comment',
+        type: 'textarea',
+        placeholder: {
+          label: 'Leave a comment',
+          translationKey: 'comment_placeholder',
+        },
+        translationKey: 'textarea_label',
+        maxLength: '1000',
+        twoCol: false,
+      },
+    ],
+  },
+};
+
 export const newsLetterForm = {
   default: {
     title: {

package/src/constants/site-settings/main.mjs

@@ -15,7 +15,7 @@ export const mainSettings = {
   article: {
     reading_time: {
       "spielhallen.com": true,
-      "demo-rocket-theme.gigmedia.com": true,
+      "demo-matrix-theme.gigmedia.com": true,
       default: false,
     },
   },

package/src/constants/site-settings/navigation.js

@@ -34,7 +34,6 @@ export const pageTypes = {
     showLogoWithLink: true,
     disableSearch: false,
     showNotification: true,
-    showScrollToTop: true,
     customComponent: true,
     exclusiveOperator: true,
     navMenu: "main_menu",

package/src/context/MainProvider.js

@@ -1,20 +1,13 @@
 /* eslint-disable react/prop-types */
-import React, { createContext, useState } from "react";
+import React, { createContext, useState } from 'react';
 
 export const Context = createContext();
 
 export default (props) => {
   const { value, children } = props;
 
-  const [showTranslationKeys, setShowTranslationKeys] = useState(false);
-  const [showFilter, setShowFilter] = useState(false);
-  const [topListFilters, setTopListFilters] = useState();
-  const topListContext = {
-    showFilter,
-    setShowFilter,
-    topListFilters,
-    setTopListFilters,
-  };
+  const [ showTranslationKeys, setShowTranslationKeys ] = useState(false);
+
   return (
     <Context.Provider
       value={{
@@ -22,9 +15,8 @@ export default (props) => {
         preview: value.isPreview,
         language: value.language,
         admin: value.admin,
-        setShowTranslationKeys,
         showTranslationKeys,
-        topListContext,
+        setShowTranslationKeys
       }}
     >
       {children}

package/src/helpers/date-time.js

@@ -28,25 +28,3 @@ export function formatDate(date, format, separator = '/', market = 'en-GB') {
   }
   return formattedDate;
 }
-
-export const getTimeAgo = (dateString) => {
-    const date = new Date(dateString.replace(" ", "T")); // Make it ISO-compliant
-    const now = new Date();
-
-    const diffMs = now.getTime() - date.getTime();
-    const diffMinutes = Math.floor(diffMs / (1000 * 60));
-    const diffHours = Math.floor(diffMinutes / 60);
-    const diffDays = Math.floor(diffHours / 24);
-    const diffMonths = Math.floor(diffDays / 30);
-
-  if (diffDays >= 32) {
-    return { value: diffMonths, key: diffMonths === 1 ? "month_ago" : "months_ago" };
-  }
-  if (diffDays >= 1) {
-    return { value: diffDays, key: diffDays === 1 ? "day_ago" : "days_ago" };
-  }
-  if (diffHours >= 1) {
-    return { value: diffHours, key: diffHours === 1 ? "hour_ago" : "hours_ago" };
-  }
-  return { value: diffMinutes, key: diffMinutes === 1 ? "minute_ago" : "minutes_ago" };
-};

package/src/helpers/date-time.test.js

@@ -1,4 +1,4 @@
-import { formatDate, getTimeAgo } from './date-time';
+import { formatDate } from './date-time';
 
 describe('Date-Time Helper', () => {
   test('formatDate()', () => {
@@ -7,19 +7,4 @@ describe('Date-Time Helper', () => {
     expect(formatDate('2020-04-23 11:45:10', 'MMM YYYY', '/', 'en-US')).toEqual('April 2020');
     expect(formatDate('2020-04-23 11:45:10', 'DD/MM/YYYY', '@@', 'en-US')).toEqual('04@@23@@2020');
   });
-
-
-  test('getTimeAgo()', () => {
-    const now = new Date();
-
-    const minutesAgo = new Date(now.getTime() - 5 * 60 * 1000).toISOString(); // 5 minutes ago
-    const hoursAgo = new Date(now.getTime() - 2 * 60 * 60 * 1000).toISOString(); // 2 hours ago
-    const daysAgo = new Date(now.getTime() - 10 * 24 * 60 * 60 * 1000).toISOString(); // 10 days ago
-    const monthsAgo = new Date(now.getTime() - 65 * 24 * 60 * 60 * 1000).toISOString(); // ~2 months ago
-
-    expect(getTimeAgo(minutesAgo)).toMatchObject({ key: 'minutes_ago', value: 5 });
-    expect(getTimeAgo(hoursAgo)).toMatchObject({ key: 'hours_ago', value: 2 });
-    expect(getTimeAgo(daysAgo)).toMatchObject({ key: 'days_ago', value: 10 });
-    expect(getTimeAgo(monthsAgo)).toMatchObject({ key: 'months_ago', value: 2 });
-  });
 });

package/src/helpers/getters.mjs

@@ -241,23 +241,6 @@ export function getBonus(name, operator) {
   return null;
 }
 
-export function getPromoCode(item, tracker) {
-  
-  if (!item) {
-    return null;
-  }
-  if (
-    item.bonuses &&
-    item.bonuses.hasOwnProperty(tracker) &&
-    item.bonuses[tracker].promo_code !== ""
-  ) {
-
-    
-    return item.bonuses[tracker].promo_code;
-  }
-  return null;
-}
-
 export function getGameExtraField(relation, key) {
   if (
     relation &&

package/src/helpers/getters.test.js

@@ -502,56 +502,4 @@ describe('Getters Helper', () => {
   test('should handle null content', () => {
     expect(Getters.trailingSlash(null)).toBeNull();
   });
-  test("returns null if item is null", () => {
-    expect(Getters.getPromoCode(null, "main")).toBeNull();
-  });
-
-  test("returns null if bonuses object is missing", () => {
-    const item = {};
-    expect(Getters.getPromoCode(item, "main")).toBeNull();
-  });
-
-  test("returns null if promo code is an empty string", () => {
-    const item = {
-      bonuses: {
-        main: {
-          promo_code: "",
-        },
-      },
-    };
-    expect(Getters.getPromoCode(item, "main")).toBeNull();
-  });
-
-  test("returns correct promo code when it exists for tracker", () => {
-    const item = {
-      bonuses: {
-        main: {
-          promo_code: "PROMO123",
-        },
-      },
-    };
-    expect(Getters.getPromoCode(item, "main")).toBe("PROMO123");
-  });
-
-  test("returns null if tracker does not exist in bonuses", () => {
-    const item = {
-      bonuses: {
-        other: {
-          promo_code: "SOMECODE",
-        },
-      },
-    };
-    expect(Getters.getPromoCode(item, "main")).toBeNull();
-  });
-
-  test("returns correct promo code for non-main tracker", () => {
-    const item = {
-      bonuses: {
-        exclusive: {
-          promo_code: "EXCL2025",
-        },
-      },
-    };
-    expect(Getters.getPromoCode(item, "exclusive")).toBe("EXCL2025");
-  });
 });

package/src/resolver/archive.mjs

@@ -191,7 +191,6 @@ export const getArchivePages = (
 
     pagesToCreate.push({
       path: page.path,
-      component: `${__dirname}/src/components/app.js`,
       context: {
         page,
         marketSections,

package/src/resolver/comments.mjs

@@ -0,0 +1,27 @@
+// eslint-disable-next-line import/prefer-default-export
+export function transformComments(comments) {
+    const transformedComments = {};
+
+    for (const comment of Object.values(comments || {})) {
+        const refId = comment.reference_id;
+        if (!transformedComments[refId]) {
+            transformedComments[refId] = [];
+        }
+        if(comment.approved){
+            transformedComments[refId].push({
+                replies: transformComments(comment?.replies)[refId],
+                email: comment?.email,
+                name: comment?.name,
+                comment: comment?.comment,
+                rate: comment?.rate,
+                author_id: comment?.author_id,
+                votes_down: comment.votes_down,
+                votes_up: comment.votes_up,
+                created_at: comment?.created_at,
+                updated_at: comment?.updated_at,
+            });
+        }
+    }
+    
+    return transformedComments;
+}

package/src/resolver/common.mjs

@@ -171,7 +171,7 @@ export function removeUnwantedSections(obj, pageType, ribbonsData) {
   ]);
 
   // Filter the object to retain only the sections in the sectionsToKeep set
-  const filteredObject = Object.keys(obj || {}).reduce((acc, key) => {
+  const filteredObject = Object.keys(obj).reduce((acc, key) => {
     if (sectionsToKeep.has(key)) {
       acc[key] = obj[key];