gatsby-core-theme 44.30.1 → 44.30.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [44.30.3](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.30.2...v44.30.3) (2026-06-25)
+
+
+### Bug Fixes
+
+* add variable for height of bonus code button ([f147e4d](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/f147e4d70100a3fc9cd55e1e497cfdff7dd1f629))
+
+## [44.30.2](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.30.1...v44.30.2) (2026-06-24)
+
+
+### Bug Fixes
+
+* fixes for notification panel ([80c7649](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/80c7649bb5650317b017c336b3b9653fa52a1042))
+
 ## [44.30.1](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.30.0...v44.30.1) (2026-06-22)
 
 

package/package.json

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

package/src/components/atoms/notifications/notification-items/bonuses/bonuses.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { getListToplistItem } from '~tests/factories/modules/toplist.factory';
 import BonusesItems from '.';
@@ -25,7 +25,7 @@ const buildToplist = (overrides = {}) => ({
 describe('BonusesItems', () => {
   beforeEach(() => {
     Object.assign(navigator, {
-      clipboard: { writeText: jest.fn() },
+      clipboard: { writeText: jest.fn().mockResolvedValue(undefined) },
     });
   });
 
@@ -34,7 +34,7 @@ describe('BonusesItems', () => {
     expect(screen.getByText('No new items')).toBeVisible();
   });
 
-  test('renders bonus item with promo code and copies on click', () => {
+  test('renders bonus item with promo code and copies on click', async () => {
     const toplist = buildToplist();
     const { container } = render(<BonusesItems toplist={toplist} showUnread />);
 
@@ -44,7 +44,10 @@ describe('BonusesItems', () => {
     expect(screen.getByText('BONUS123')).toBeVisible();
 
     fireEvent.click(screen.getByText('BONUS123'));
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('BONUS123');
+    await waitFor(() => {
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('BONUS123');
+      expect(screen.getByText('CODE COPIED')).toBeVisible();
+    });
   });
 
   test('renders bonus item without promo code row', () => {
@@ -60,4 +63,4 @@ describe('BonusesItems', () => {
     expect(container.querySelector('.bonusCodeRow')).toBeFalsy();
     expect(screen.getByText('name1 Review')).toBeVisible();
   });
-});
+});

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

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import CopyIcon from "~images/icons/copyIcon";
+import CheckCircleIcon from "~images/icons/check-circle";
 import LazyImage from "~hooks/lazy-image";
 import PrettyLink from "~atoms/pretty-link";
 import ReviewLink from "~atoms/review-link";
@@ -14,7 +15,7 @@ import {
   imagePrettyUrl,
 } from "~helpers/getters";
 import { getAltText } from "~helpers/image";
-import { getTimeAgo } from "~helpers/date-time";
+import { getTimeAgo, parseSortableDate } from "~helpers/date-time";
 import { TrackingKeys } from "~constants/tracking-api";
 import VerifiedBadgeIcon from "~images/icons/verifiedBadgeIcon";
 import useTranslate from "~hooks/useTranslate/useTranslate";
@@ -29,6 +30,7 @@ const BonusItem = ({
   updatedLabel,
   hideBadges
 }) => {
+  const [copySuccess, setCopySuccess] = useState(false);
   const bonus = getBonusData(item, tracker);
   const oneliner = [bonus?.mainLine, bonus?.secondLine]
     .filter(Boolean)
@@ -37,14 +39,21 @@ const BonusItem = ({
   const reviewPath = item.review_link
     ? `/${item.review_link}`
     : item.path || null;
-  const timeData = getTimeAgo(item.updated_at) || {};
+  const timeData = item.updated_at ? getTimeAgo(item.updated_at) : null;
   const timeKeyLabel = useTranslate(
-    timeData.key,
-    timeData.key?.replace(/_/g, " ")
+    timeData?.key,
+    timeData?.key?.replace(/_/g, " ")
   );
-  const timeAgo = timeData.value
-    ? `${updatedLabel} ${timeData.value} ${timeKeyLabel}`
-    : "";
+  const foundedYear = item?.founded?.substring(0, 4);
+  let timeAgo = "";
+
+  if (timeData?.value) {
+    timeAgo = `${updatedLabel} ${timeData.value} ${timeKeyLabel}`;
+  } else if (foundedYear) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    timeAgo = `${useTranslate("founded", "Founded")} ${foundedYear}`;
+  }
+
   const hasTnc = Boolean(getOperatorTnc(item, tracker));
 
   const verifiedMonth = new Intl.DateTimeFormat("en-US", {
@@ -55,6 +64,20 @@ const BonusItem = ({
     "notification_verified_in",
     "Verified in [month]"
   ).replace("[month]", verifiedMonth);
+  const codeCopiedLabel = useTranslate("code_copied", "CODE COPIED");
+  const isBet365 = item.short_name === "bet365";
+
+  const copyToClipBoard = async (e, copyMe) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    try {
+      await navigator.clipboard.writeText(copyMe);
+      setCopySuccess(true);
+    } catch (err) {
+      setCopySuccess(false);
+    }
+  };
 
   return (
     <li className={styles.bonusItem}>
@@ -72,7 +95,7 @@ const BonusItem = ({
             width={52}
             height={52}
             alt={getAltText(item.logo, item.name)}
-            src={imagePrettyUrl(item.logo?.filename, 52, 52)}
+            src={imagePrettyUrl(item.logo?.filename)}
           />
         </PrettyLink>
 
@@ -83,11 +106,30 @@ const BonusItem = ({
               <span className={styles.bonusCodeLabel}>{bonusCodeLabel}</span>
               <button
                 type="button"
-                className={styles.bonusCode}
-                onClick={() => navigator.clipboard.writeText(promoCode)}
+                className={`${styles.bonusCode} ${copySuccess ? styles.bonusCodeCopied : ""}`}
+                onClick={(e) =>
+                  promoCode && !isBet365 ? copyToClipBoard(e, promoCode) : undefined
+                }
+                disabled={isBet365}
               >
-                <span>{promoCode}</span>
-                <CopyIcon width={20} height={20} />
+                {!copySuccess ? (
+                  <>
+                    <span>{promoCode}</span>
+                    {!isBet365 && <CopyIcon width={20} height={20} />}
+                  </>
+                ) : (
+                  <>
+                    <span>{codeCopiedLabel}</span>
+                    <span className={styles.bonusCodeCheckIcon}>
+                      <CheckCircleIcon
+                        width={20}
+                        height={20}
+                        bgColor="var(--notification-bonus-code-border, #20cd77)"
+                        color="#fff"
+                      />
+                    </span>
+                  </>
+                )}
               </button>
             </div>
           )}
@@ -138,6 +180,7 @@ BonusItem.propTypes = {
     updated_at: PropTypes.string,
     short_name: PropTypes.string,
     name: PropTypes.string,
+    founded: PropTypes.string,
     logo: PropTypes.shape({
       filename: PropTypes.string,
     }),
@@ -151,7 +194,11 @@ BonusItem.propTypes = {
 };
 
 const BonusesItems = ({ toplist, showUnread, hideBadges }) => {
-  const items = toplist?.items || [];
+  const items = [...(toplist?.items || [])].sort(
+    (a, b) =>
+      parseSortableDate(b.updated_at || b.founded) -
+      parseSortableDate(a.updated_at || a.founded)
+  );
   const tracker =
     toplist?.toplist_bonus || toplist?.one_liner || toplist?.tracker || "main";
   const noBonuses = useTranslate("noNewUpdates", "No new items");
@@ -189,4 +236,4 @@ BonusesItems.propTypes = {
   hideBadges: PropTypes.bool
 };
 
-export default BonusesItems;
+export default BonusesItems;

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

@@ -13,9 +13,17 @@ import {
 import { getAltText, getImageFilename } from "~helpers/image";
 import ArticleIcon from "../../../../../images/icons/articleIcon";
 import useTranslate from "~hooks/useTranslate/useTranslate";
-import { getTimeAgo } from "~helpers/date-time";
+import { getTimeAgo, parseSortableDate } from "~helpers/date-time";
 import styles from "./notification-items.module.scss";
 
+const getTrendingSortDate = (item) =>
+  parseSortableDate(
+    item?.manual_updated_date ||
+      item?.updated_at ||
+      item?.manual_published_date ||
+      item?.created_at
+  );
+
 const CategoryTag = ({ category }) => {
   const label = useTranslate(
     `category_${category.short_name}`,
@@ -28,9 +36,10 @@ const CategoryTag = ({ category }) => {
 };
 
 const CardsItems = ({ module, showUnread = false }) => {
-  const { items } = module || {};
+  const items = [...(module?.items || [])].sort(
+    (a, b) => getTrendingSortDate(b) - getTrendingSortDate(a)
+  );
   const noNewUpdates = useTranslate("noNewUpdates", "No new items");
-  const updatedLabel = useTranslate("updated", "Updated");
 
   const renderItem = (item) => {
     const isArticleOrPage = ["article", "page"].includes(item?.relation_type);
@@ -46,20 +55,20 @@ const CardsItems = ({ module, showUnread = false }) => {
     const categories = item?.categories || [];
     const description =
       subtitle || item?.short_description || item?.description || "";
-    const timeData =
-      getTimeAgo(
-        item?.manual_updated_date ||
-          item?.updated_at ||
-          item?.manual_published_date ||
-          item?.created_at
-      ) || {};
-    const timeAgo = timeData.value
-      ? `${updatedLabel} ${timeData.value} ${useTranslate(
+    const dateModified = item?.manual_updated_date || item?.updated_at;
+    const datePublished = item?.manual_published_date || item?.created_at;
+    const dateString = dateModified || datePublished;
+    const usePublishedLabel = !dateModified && Boolean(datePublished);
+    const timeData = dateString ? getTimeAgo(dateString) : null;
+    const timeAgo = timeData?.value
+      ? `${useTranslate(
+          usePublishedLabel ? "published" : "updated",
+          usePublishedLabel ? "Published" : "Updated"
+        )} ${timeData.value} ${useTranslate(
           timeData.key,
           timeData.key?.replace(/_/g, " ")
         )}`
       : "";
-
     const thumbnail = img ? (
       <LazyImage
         width={40}

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

@@ -9,13 +9,22 @@ import LazyImage from "~hooks/lazy-image";
 import keygen from "~helpers/keygen";
 import Link from "~hooks/link";
 import useTranslate from "~hooks/useTranslate/useTranslate";
-import { getTimeAgo } from "~helpers/date-time";
+import { getTimeAgo, parseSortableDate } from "~helpers/date-time";
 import styles from "../cards-v2/notification-items.module.scss";
 
+const getTrendingSortDate = (item) =>
+  parseSortableDate(
+    item?.manual_updated_date ||
+      item?.updated_at ||
+      item?.manual_published_date ||
+      item?.created_at
+  );
+
 const SpotlightItems = ({ module, showUnread = false }) => {
-  const { items } = module || {};
+  const items = [...(module?.items || [])].sort(
+    (a, b) => getTrendingSortDate(b) - getTrendingSortDate(a)
+  );
   const noNewUpdates = useTranslate("noNewUpdates", "No new items");
-  const updatedLabel = useTranslate("updated", "Updated");
 
   const renderItem = (item) => {
     const img = item?.image;
@@ -25,21 +34,24 @@ const SpotlightItems = ({ module, showUnread = false }) => {
     const ribbon = item?.subtitle?.split(",")[0]?.replace("[null]", "")?.trim();
     const metaText = item?.subtitle?.split(",").slice(1).join(",").trim();
     const description = item?.short_description || item?.text || "";
-    const timeData =
-      getTimeAgo(
-        item?.manual_updated_date ||
-          item?.updated_at
-      ) || {};
+    const dateModified = item?.manual_updated_date || item?.updated_at;
+    const datePublished = item?.manual_published_date || item?.created_at;
+    const dateString = dateModified || datePublished;
+    const usePublishedLabel = !dateModified && Boolean(datePublished);
+    const timeData = dateString ? getTimeAgo(dateString) : null;
     const timeKeyLabel = useTranslate(
-      timeData.key,
-      timeData.key?.replace(/_/g, " ")
+      timeData?.key,
+      timeData?.key?.replace(/_/g, " ")
     );
     let timeAgo = "";
 
-    if (timeData.value) {
-      timeAgo = `${updatedLabel} ${timeData.value} ${timeKeyLabel}`;
+    if (timeData?.value) {
+      timeAgo = `${useTranslate(
+        usePublishedLabel ? "published" : "updated",
+        usePublishedLabel ? "Published" : "Updated"
+      )} ${timeData.value} ${timeKeyLabel}`;
     } else if (metaText) {
-      timeAgo = `${updatedLabel} ${metaText}`;
+      timeAgo = `${useTranslate("updated", "Updated")} ${metaText}`;
     }
 
     return (

package/src/components/atoms/notifications/notifications.module.scss

@@ -116,6 +116,7 @@
   gap: 0.8rem;
   padding: 0 0 0.8rem;
   border-bottom: 1px solid var(--notification-item-border, #e3e6ef);
+  cursor: default;
 }
 
 .unreadDot {
@@ -135,6 +136,7 @@
   gap: 0.8rem;
   width: 100%;
   min-height: 5.2rem;
+  cursor: default;
 }
 
 .logo {
@@ -145,6 +147,7 @@
   height: 5.2rem;
   border: 1px solid var(--notification-logo-border, #dedede);
   border-radius: var(--notification-logo-border-radius, 0.8rem);
+  cursor: default;
 
   img {
     display: block;
@@ -154,6 +157,7 @@
   }
 }
 
+
 .bonusText {
   @include flex-direction(column);
   @include flex-align(flex-start, center);
@@ -162,6 +166,7 @@
   min-width: 0;
   gap: 0.4rem;
   padding-right: 2.4rem;
+  cursor: default;
 }
 
 .oneliner {
@@ -170,6 +175,7 @@
   font-weight: 700;
   line-height: 2.2rem;
   color: var(--notification-oneliner-color, #1b1b1c);
+  cursor: default;
 }
 
 .bonusCodeRow {
@@ -190,7 +196,7 @@
   @include flex-align(center, center);
 
   gap: 0.6rem;
-  height: 2.4rem;
+  height: var(--notification-bonus-code-height, 2.4rem);
   padding: 0 0.8rem;
   border: 1px var(--notification-bonus-code-border-style, dashed)
     var(--notification-bonus-code-border, #20cd77);
@@ -211,15 +217,36 @@
 
   svg {
     flex-shrink: 0;
+    pointer-events: none;
     color: var(--notification-bonus-code-icon, #262629);
   }
 }
 
+.bonusCodeCopied {
+  border-color: var(--notification-bonus-code-border, #20cd77);
+}
+
+.bonusCodeCheckIcon {
+  @include flex-align(center, center);
+
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  pointer-events: none;
+
+  svg {
+    display: block;
+    width: 2rem;
+    height: 2rem;
+  }
+}
+
 .meta {
   @include flex-align(center, flex-start);
 
   width: 100%;
   min-height: 1.8rem;
+  cursor: default;
 }
 
 .reviewLink {
@@ -230,6 +257,7 @@
   line-height: 1.8rem;
   color: var(--notification-link-color, #165af8);
   text-decoration: underline;
+  cursor: pointer;
 }
 
 .updated {
@@ -241,6 +269,7 @@
   color: var(--notification-meta-color, #515156);
   text-align: right;
   white-space: nowrap;
+  cursor: default;
 }
 
 .cta {
@@ -254,6 +283,7 @@
   background: var(--notification-cta-bg, #6e33e5);
   color: var(--notification-cta-color, #fff);
   text-decoration: none;
+  cursor: default;
 
   &:hover {
     background: var(--notification-cta-hover-bg, #5a28c7);

package/src/helpers/date-time.js

@@ -52,3 +52,11 @@ export const getTimeAgo = (dateString) => {
   }
   return { value: diffMinutes, key: diffMinutes === 1 ? "minute_ago" : "minutes_ago" };
 };
+
+export const parseSortableDate = (dateString) => {
+  if (!dateString) return 0;
+
+  const time = Date.parse(String(dateString).replace(" ", "T"));
+
+  return Number.isNaN(time) ? 0 : time;
+};

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

@@ -1,4 +1,4 @@
-import { formatDate, getTimeAgo } from './date-time';
+import { formatDate, getTimeAgo, parseSortableDate } from './date-time';
 
 describe('Date-Time Helper', () => {
   test('formatDate()', () => {
@@ -22,4 +22,11 @@ describe('Date-Time Helper', () => {
     expect(getTimeAgo(daysAgo)).toMatchObject({ key: 'days_ago', value: 10 });
     expect(getTimeAgo(monthsAgo)).toMatchObject({ key: 'months_ago', value: 2 });
   });
+
+  test('parseSortableDate()', () => {
+    expect(parseSortableDate(null)).toBe(0);
+    expect(parseSortableDate('2025-06-01 10:00:00')).toBeGreaterThan(
+      parseSortableDate('2024-01-01 10:00:00')
+    );
+  });
 });

package/src/images/icons/check-circle.js

@@ -6,7 +6,7 @@ export default function CheckCircleIcon({ width = 24, height = 24, color = '#272
     <svg
       width={width}
       height={height}
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox="0 0 24 24"
       fill="none"
       aria-labelledby="checkCircleIcon"
       xmlns="http://www.w3.org/2000/svg"

package/src/resolver/modules.mjs

@@ -520,6 +520,35 @@ export function shouldSavePrefilled(module = {}, siteName) {
   );
 }
 
+function normalizePathForMatch(path) {
+  if (!path || typeof path !== "string") return "";
+  return path.replace(/^\/+|\/+$/g, "");
+}
+
+function getSpotlightLinkedPage(link, pagesMappedById = {}) {
+  if (!link || link.type !== "page") return null;
+
+  if (link.page_id && pagesMappedById[link.page_id]) {
+    return pagesMappedById[link.page_id];
+  }
+
+  const linkValue = link.value;
+  if (!linkValue) return null;
+
+  if (pagesMappedById[linkValue]) {
+    return pagesMappedById[linkValue];
+  }
+
+  const linkPath = normalizePathForMatch(linkValue);
+  if (!linkPath) return null;
+
+  return (
+    Object.values(pagesMappedById).find(
+      (page) => normalizePathForMatch(page?.path) === linkPath
+    ) || null
+  );
+}
+
 export function processSpotlightModule(module = {}, content, relations, ribbons, previewPageID, translations, relationData, operators, games,
   pagesMappedById = {}
 ) {
@@ -543,11 +572,22 @@ export function processSpotlightModule(module = {}, content, relations, ribbons,
       games
     );
 
-      const pageId = item?.link?.page_id;
-      const linkedPage = pageId ? pagesMappedById[pageId] : null;
+      const linkedPage = getSpotlightLinkedPage(item?.link, pagesMappedById);
       if (linkedPage?.short_description) {
         item.short_description = linkedPage.short_description;
       }
+      if (linkedPage?.updated_at) {
+        item.updated_at = linkedPage.updated_at;
+      }
+      if (linkedPage?.manual_updated_date) {
+        item.manual_updated_date = linkedPage.manual_updated_date;
+      }
+      if (linkedPage?.created_at) {
+        item.created_at = linkedPage.created_at;
+      }
+      if (linkedPage?.manual_published_date) {
+        item.manual_published_date = linkedPage.manual_published_date;
+      }
     });
   }
 

package/src/resolver/modules.test.js

@@ -11,6 +11,7 @@ import {
   shouldSavePrefilled,
   processContentModule,
   processAnchor,
+  processSpotlightModule,
 } from "./modules.mjs";
 import { objectsHolder } from "~tests/factories/modules/modules.factory";
 import getPageDataList from "~tests/factories/pages/list.factory";
@@ -391,4 +392,43 @@ expect(module.value.ribbons[0]).toBe("testRibbon");
 
     expect(prefilledModule.items).toHaveLength(3);
   });
+
+  test("Spotlights resolve linked page by path when page_id is missing", () => {
+    const linkedPage = {
+      ...getPageData(),
+      id: 123,
+      path: "casino-bonus/irishlucks-exclusive-bonuses-vault",
+      updated_at: "2024-06-10 12:00:00",
+      short_description: "Linked page description",
+    };
+    const module = {
+      mode: "image_text",
+      items: [
+        {
+          label: "Bonus Club",
+          text: "<p>Join now!</p>",
+          link: {
+            type: "page",
+            value: "/casino-bonus/irishlucks-exclusive-bonuses-vault",
+          },
+        },
+      ],
+    };
+
+    processSpotlightModule(
+      module,
+      {},
+      {},
+      {},
+      null,
+      {},
+      {},
+      {},
+      {},
+      { 123: linkedPage }
+    );
+
+    expect(module.items[0].short_description).toBe("Linked page description");
+    expect(module.items[0].updated_at).toBe("2024-06-10 12:00:00");
+  });
 });