gatsby-core-theme 44.0.15 → 44.0.16

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [44.0.16](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.15...v44.0.16) (2025-04-14)
+
+
+### Bug Fixes
+
+* add / in the end for spotlight module ([2db0279](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/2db02790e6f40fa5ca480c5cce812a8cdd5c3e96))
+* add regex ([14d21d5](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/14d21d538bf6669612857a3bb5e246263cc6fd97))
+* add test and improve logic ([6117dfe](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/6117dfe85709875fbafd9f2881fc96c7fbb39482))
+* add traling slash for spotlight module ([98b0ee4](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/98b0ee46eb529411201c2c10f1f21647347e1161))
+* add traling slash for tracker lins ([fc41d0b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/fc41d0b1210bbf379461d62ba8e5a6a6a250bfb3))
+* added cards_v2 to notifications section ([17f7b40](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/17f7b409cff5cf5f314c0bc3faeb073b0147dc5d))
+* added function for tournament relation ([641d277](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/641d277a237c89123fc132d2ad1b11f370a86289))
+* cleaned up events + tournaments ([bec627d](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/bec627dd40f1f90bc4be9008bb732fc49328adc3))
+* code review fixes ([3ffe630](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/3ffe63056ac63af897e9f864ee379c44909d45f4))
+* enable tracker without ssr ([f7a760b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/f7a760bd5c36b2531d097e2dffe9fa919c411e39))
+* issue with country pages ([8624c15](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/8624c156e36f280a73411c0c7945e19db16d4c12))
+* tests ([43cb61c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/43cb61cc1fa6cdd0c5b32ac1a87f02d23d5ba2e7))
+
+
+* Merge branch 'tm-5345-notifications' into 'master' ([614a25d](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/614a25df119584e09fbc47791f203be81ecb3e0b))
+* Merge branch 'tm-5382-relation-cleanup' into 'master' ([0bc184b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/0bc184b962dd3bc414825d6369ec5b9de320eb4f))
+* Merge branch 'master' into tm-5345-notifications ([755446c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/755446c1b8e9bdcdf90d304475b71992332c47bd))
+* Merge branch 'tm-5365-missing-slash' into 'master' ([15886f0](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/15886f0bd823df30c5e6313448984c0f7ddfe094))
+
 ## [44.0.15](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.14...v44.0.15) (2025-04-14)
 
 

package/gatsby-node.mjs

@@ -474,7 +474,7 @@ export const createPages = async (
           };
           createPage({
             path: trackerPath,
-            component: `${__dirname}/src/components/app-tracker-ssr.js`,
+            component: `${__dirname}/src/components/${process.env.IS_TRACKING_SSR === 'true' ? 'app-tracker-ssr.js' : 'app-tracker.js'}`,
             context: {
               page: trackerPageObject,
               siteGeneralData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "44.0.15",
+  "version": "44.0.16",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/app-tracker.js

@@ -0,0 +1,39 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/forbid-prop-types */
+import React from "react";
+import { useStaticQuery, graphql } from "gatsby";
+import MainProvider from "~context/MainProvider";
+import Tracker from "./pages/tracker/index-ssr";
+import HeadData from "~organisms/head";
+
+const AppTracker = (props) => {
+  const data = useStaticQuery(graphql`
+    query {
+      translations: allTranslation(filter: {}) {
+        edges {
+          node {
+            key
+            language
+            value
+          }
+        }
+      }
+    }
+  `);
+  
+  const { pageContext } = props;
+
+  return (
+    <MainProvider
+      value={{ translations: data.translations, language: pageContext.page.language }}
+    >
+      <Tracker {...props} />
+    </MainProvider>
+  );
+};
+
+export const Head = ({ pageContext }) => (
+  <HeadData page={pageContext.page} authors={pageContext.authors} siteInfo={pageContext.siteInfo} />
+);
+
+export default AppTracker;

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import AdminButtons from ".";
+
+describe("AdminButtons Component", () => {
+  test("renders correct links for bonus module", () => {
+    const page = { id: 123 };
+    const module = {
+      name: "bonus",
+      value: {
+        operator_id: 45,
+        id: 999
+      }
+    };
+    const modulePosition = 2;
+
+    // Set environment variable (override for test)
+    process.env.HERCULES_BACKEND_URL = 'https://hercules.g2m.com/';
+
+    render(<AdminButtons page={page} module={module} modulePosition={modulePosition} />);
+
+    // Test the first link (Edit Operator)
+    const editOperatorLink = screen.getByText("Edit Operator");
+    expect(editOperatorLink).toBeInTheDocument();
+    expect(editOperatorLink.closest('a')).toHaveAttribute(
+      'href',
+      'https://hercules.g2m.com/operators/45/sites-data/edit/999'
+    );
+
+    // Test the second link (Edit Module)
+    const editModuleLink = screen.getByText("Edit Module");
+    expect(editModuleLink).toBeInTheDocument();
+    expect(editModuleLink.closest('a')).toHaveAttribute(
+      'href',
+      'https://hercules.g2m.com/site-pages/123?index=2#sections'
+    );
+  });
+
+  test("returns null for unsupported module", () => {
+    const page = { id: 123 };
+    const module = {
+      name: "unknown_module"
+    };
+    const modulePosition = 0;
+
+    process.env.HERCULES_BACKEND_URL = 'https://hercules.g2m.com/';
+
+    render(<AdminButtons page={page} module={module} modulePosition={modulePosition} />);
+    
+    // Should only render the Edit Module link
+    expect(screen.queryByText("Edit Operator")).not.toBeInTheDocument();
+    expect(screen.getByText("Edit Module")).toBeInTheDocument();
+  });
+});

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

@@ -2,7 +2,8 @@ import React, { useState, useContext, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { toggleScroll } from 'gatsby-core-theme/src/helpers/scroll';
 import { NavigationContext } from 'gatsby-core-theme/src/components/organisms/navigation/navigationContext';
-import NotificationItems from './notification-items';
+import SpotlightItems from './notification-items/spotlight';
+import CardsItems from './notification-items/cards-v2';
 import BellIcon from '~images/icons/bell';
 import styles from './notifications.module.scss';
 
@@ -13,7 +14,7 @@ const Notifications = ({ section }) => {
   const [openNotification, setOpenNotification] = useState(false);
 
   const { modules } = section || {};
-  const getNotifications = () => modules?.find((module) => module?.name === 'spotlights') || {};
+  const getNotifications = () => modules?.find((module) => module?.name === 'spotlights' || module?.name === 'cards_v2') || {};
 
   const notificationActions = () => {
     setNewNotification(false);
@@ -45,7 +46,7 @@ const Notifications = ({ section }) => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [notificationRef]);
-
+  
   return (
     <div ref={notificationRef} className={styles?.notificationOuter || ''}>
       <div
@@ -61,8 +62,11 @@ const Notifications = ({ section }) => {
         <BellIcon />
       </div>
       {openNotification && (
-        <NotificationItems module={getNotifications()} onClose={() => notificationActions()} />
-      )}
+          getNotifications()?.name === 'cards_v2' ?
+          <CardsItems module={getNotifications()} onClose={() => notificationActions()} /> :
+          <SpotlightItems module={getNotifications()} onClose={() => notificationActions()} />
+        )
+      }
     </div>
   );
 };

package/src/components/atoms/notifications/notification-items/cards-v2/index.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { imagePrettyUrl, getImageFilename, getAltText, getExtraField } from 'gatsby-core-theme/src/helpers/getters';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import keygen from 'gatsby-core-theme/src/helpers/keygen';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import CloseIcon from '~images/icons/close';
+import styles from './notification-items.module.scss';
+
+const CardsItems = ({ module, onClose }) => {
+    const { items } = module;
+    const noNewUpdates = useTranslate('noNewUpdates', 'No new items');
+
+    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);
+
+        let timeAgo = '';
+
+        if (diffDays >= 32) {
+            timeAgo = `${diffMonths} month${diffMonths > 1 ? 's' : ''} ago`;
+        } else if (diffDays >= 1) {
+            timeAgo = `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+        } else if (diffHours >= 1) {
+            timeAgo = `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+        } else {
+            timeAgo = `${diffMinutes} minute${diffMinutes !== 1 ? 's' : ''} ago`;
+        }
+
+        return timeAgo;
+    }
+
+    const content = (item) => {
+        const img = getExtraField(item?.extra_fields, 'notification_image') || item?.relation?.logo?.filename || '';
+        const imageSrc = imagePrettyUrl(img, 40, 40);
+        const fileName = getImageFilename(imageSrc);
+
+        const TitleTag = item?.title_tag || 'label';
+        const ribbon = getExtraField(item?.extra_fields, 'notification_ribbon');
+
+        
+
+        return (
+            <div className={styles.notificationContent}>
+                {img && (
+                    <LazyImage
+                        width={40}
+                        height={40}
+                        alt={getAltText(item?.image_object, item?.label || item?.link_text || fileName)}
+                        src={imageSrc}
+                    />
+                )}
+                <div className={styles.innerContent}>
+                    {item?.title && <TitleTag>{item?.title}</TitleTag>}
+                    {item?.description && (
+                    <div className={styles.subtitle} dangerouslySetInnerHTML={{ __html: item?.description }} />
+                    )}
+                    {item?.template && (
+                        <div className={styles.ribbonAndTime}>
+                            {ribbon && <span className={styles.ribbon}>{ribbon}</span>}
+                            <span className={styles.extraContent}>{getTimeAgo(item?.manual_updated_at || item?.updated_at || item?.manual_created_at || item?.created_at)}</span>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    };
+    return (
+        <div className={styles.container || ''}>
+            <div className={styles.notificationsContainer || ''}>
+                <span>
+                    {useTranslate('latestUpdates', 'Latest Updates')}
+                    <button 
+                        type='button' 
+                        onClick={onClose} 
+                        className={styles.close || ''}
+                        aria-label="Close notifications"
+                    >
+                        <CloseIcon />
+                    </button>
+                </span>
+                {items?.length ? (
+                <ul className={styles.notifications || ''}>
+                    {items.map((item) => (
+                        <li className={`${styles.notification} notification-item-gtm`} key={keygen()}>
+                            <Link
+                                to={item?.path}
+                                title={item?.title}
+                                className={`${styles.notificationLink} cards-gtm`}
+                                aria-label={`${item?.title} Link`}
+                                >
+                                {content(item)}
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+                ) : (
+                <>{noNewUpdates}</>
+                )}
+            </div>
+            <div className={styles.triangle} />
+            <div 
+                className={styles.overlay} 
+                onKeyDown={onClose}
+                onClick={onClose}
+                role="button"
+                aria-label="Notification Bell Icon"
+                tabIndex={0}
+            />
+        </div>
+    );
+};
+
+CardsItems.propTypes = {
+    module: PropTypes.shape({
+        items: PropTypes.arrayOf(PropTypes.shape({}))
+    }),
+    onClose: PropTypes.func
+};
+
+export default CardsItems;

package/src/components/atoms/notifications/notification-items/cards-v2/notification-items.module.scss

@@ -0,0 +1,276 @@
+.container {
+    position: relative;
+    position: fixed;
+    left: 0;
+    top: 7.6rem;
+    background: #fff;
+  
+    @include min(tablet) {
+      left: auto;
+      top: calc(100% + 8px);
+      right: 3.8rem;
+      border-radius: 1rem;
+      box-shadow: 0 8px 8px -4px rgb(27 27 28 / 4%), 0 20px 24px -4px rgb(27 27 28 / 7%);
+      padding-bottom: 1px;
+    }
+  
+    @include min(tablet) {
+      position: absolute;
+      right: 0;
+    }
+  }
+  
+  .notificationsContainer {
+    width: 100vw;
+    max-height: 58.4rem;
+    padding: 1.6rem 1.6rem 2.4rem;
+
+    @include flex-align(stretch, stretch);
+    @include flex-direction(column);
+
+    gap: 0.8rem;
+    transition: 0.5s ease-in;
+    overflow-y: hidden;
+  
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #e0e0e2;
+  
+      @include min(tablet) {
+        border-radius: 0 10px 10px 0;
+      }
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #515156;
+  
+      @include min(tablet) {
+        border-radius: 0 10px 10px 0;
+      }
+    }
+  
+    @include min(tablet) {
+      border-radius: 4px;
+      padding: 1.6rem;
+      font-size: 1rem;
+      z-index: 100;
+      white-space: wrap;
+      max-width: 40.6rem;
+      width: 40.6rem;
+      max-height: 60rem;
+    }
+  
+    span {
+      font-size: 1.8rem;
+      font-weight: 600;
+      color: #1b1b1c;
+      line-height: 2.8rem;
+      margin: 0;
+      height: 3.2rem;
+
+      @include flex-align(center, space-between);
+    }
+  }
+  
+  .notifications {
+    @include flex-align(stretch, flex-start);
+    @include flex-direction(column);
+
+    gap: 0.8rem;
+    overflow-y: auto;
+  
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #e0e0e2;
+      border-radius: 1rem;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #515156;
+      border-radius: 1rem;
+    }
+  
+    @include min(tablet) {
+      max-height: 50.4rem;
+    }
+  }
+  
+  .close {
+    align-self: flex-start;
+    padding-right: 1.6rem;
+  }
+  
+  .triangle {
+    @include min(tablet) {
+      display: block;
+      position: absolute;
+      bottom: 99%;
+      left: 50%;
+      margin-top: -9px;
+      background-color: #fff;
+      width: 20px;
+      height: 20px;
+      border-top-right-radius: 5px;
+      transform: rotate(300deg) skewX(-30deg) scale(1, 0.866);
+      z-index: -1;
+  
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        width: 20px;
+        height: 20px;
+        border-top-right-radius: 5px;
+      }
+  
+      &::before {
+        transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
+      }
+  
+      &::after {
+        transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
+      }
+    }
+  }
+  
+  .notification {
+    border-radius: 8px;
+    background: #f4f4f4;
+    gap: 0 0.8rem;
+    position: relative;
+    border: 1px solid transparent;
+  
+    &:hover {
+      border-color: var(--primary-button-color, #6e33e5);
+      background-color: #fbfaf9;
+    }
+
+    &::after {
+      display: block;
+      content: '';
+      width: 6px;
+      height: 6px;
+      position: absolute;
+      right: 1.6rem;
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: var(--primary-button-color, #6e33e5);
+      border-radius: 100%;
+    }
+  }
+
+  .notificationLink{
+    padding: 1.2rem;
+    width: 100%;
+  }
+  
+  .overlay {
+    position: fixed;
+    width: 100vw;
+    height: calc(100vh);
+    z-index: -1;
+    opacity: 0.45;
+    background: #0a0e19;
+  
+    @include min(tablet) {
+      display: none;
+    }
+  }
+  
+  .notificationContent {
+    @include flex-align(stretch, stretch);
+    @include flex-direction(row);
+
+    column-gap: 0.8rem;
+  
+    img {
+      width: 4rem;
+      height: 4rem;
+      grid-row: 1 / span 2;
+      border-radius: 4px;
+    }
+  
+    h2,
+    h3,
+    h4,
+    h5,
+    label {
+      color: #1b1b1c;
+      font-size: 1.4rem;
+      font-weight: 600;
+      line-height: 2.2rem;
+      margin: 0;
+    }
+  
+    > div {
+      color: #f4f4f4;
+      font-size: 1.2rem;
+      font-weight: 400;
+      line-height: 1.8rem;
+    }
+  }
+
+  .innerContent{
+    @include flex-direction(column);
+  }
+  
+  .subtitle {
+    margin-bottom: 0.8rem;
+    grid-column: 2;
+  
+    > p {
+      width: 26rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: rgb(81 81 86);
+      -webkit-line-clamp: 2; 
+      line-clamp: 2;
+
+      @include max(mobile-m) {
+        width: 20rem;
+      }
+    }
+  }
+  
+  .ribbonAndTime {
+    @include flex-align(center, flex-start);
+
+    gap: 0.5rem;
+    font-weight: 500;
+    grid-column: 2;
+    height: 1.9rem;
+
+    .ribbon {
+      border-radius: 100px;
+      background: var(--primary-button-color, #6e33e5);
+      padding: 4px 8px;
+
+      @include flex-align(center, center);
+
+      color: #fff;
+      text-align: center;
+      font-size: 0.9rem;
+      font-weight: 700;
+      line-height: 1.1rem;
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+      height: 1.9rem;
+    }
+
+    .extraContent{
+      background: transparent;
+      color: #64646D;
+      font-size: 1.2rem;
+      font-weight: 500;
+      line-height: 1.8rem;
+    }
+  }
+  

package/src/components/atoms/notifications/notification-items/{index.js → spotlight/index.js}

@@ -8,7 +8,7 @@ import useTranslate from '~hooks/useTranslate/useTranslate';
 import CloseIcon from '~images/icons/close';
 import styles from './notification-items.module.scss';
 
-const NotificationItems = ({ module, onClose }) => {
+const SpotlightItems = ({ module, onClose }) => {
     const { items } = module;
     const noNewUpdates = useTranslate('noNewUpdates', 'No new items')
     const content = (item) => {
@@ -102,11 +102,11 @@ const NotificationItems = ({ module, onClose }) => {
     );
 };
 
-NotificationItems.propTypes = {
+SpotlightItems.propTypes = {
     module: PropTypes.shape({
         items: PropTypes.arrayOf(PropTypes.shape({}))
     }),
     onClose: PropTypes.func
 };
 
-export default NotificationItems;
+export default SpotlightItems;