gatsby-core-theme 44.27.0 → 44.29.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [44.29.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.28.0...v44.29.0) (2026-06-18)
+
+
+### Bug Fixes
+
+* refactor notification panel code ([073b7ca](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/073b7ca9ff3f4c978b161b32a470fc01e6a9ab03))
+* show the inactive casino in the search page but no in the autocomplete ([fc03761](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/fc037613b1ed9941d58f4a4f8787780ad381bab8))
+
+
+* Merge branch 'master' of gitlab.com:g2m-gentoo/team-floyd/themes/gatsby-themes ([efb9e68](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/efb9e68764108c499c2e264009b5c0cbd7814171))
+* Merge branch 'EN-536/notification-panel' into 'master' ([f94a556](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/f94a556a1f11e582f15b57307d749b926b2b7869))
+
+
+### Features
+
+* add more variables and country flag icon ([8f2051a](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/8f2051a3817d3406fb96c0346c16e4608a403f2f))
+* update notification panel ([3315645](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/3315645a744dd61c651260224db1197717a86ffa))
+
+# [44.28.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.27.0...v44.28.0) (2026-06-17)
+
+
+* Merge branch 'update-newsletter' into 'master' ([e1b2c7e](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/e1b2c7e0490c9ef1c929049e20d7ff28d1d71b9d))
+
+
+### Features
+
+* update newsletter button ([063907c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/063907c743eea01d39155344c750831a42d0de5d))
+
 # [44.27.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.26.2...v44.27.0) (2026-06-16)
 
 

package/package.json

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

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

@@ -3,27 +3,63 @@ import PropTypes from "prop-types";
 import { toggleScroll } from "~helpers/scroll";
 import { NavigationContext } from "~organisms/navigation/navigationContext";
 import SpotlightItems from "./notification-items/spotlight";
+import BonusesItems from "./notification-items/bonuses";
 import CardsItems from "./notification-items/cards-v2";
+import PanelHeader from "./panel-header";
+import PanelTabs from "./panel-tabs";
 import BellIcon from "~images/icons/bell";
 import CloseIcon from "~images/icons/closeIcon";
-import styles from "./notifications.module.scss";
 import useTranslate from "../../../hooks/useTranslate/useTranslate";
+import styles from "./notifications.module.scss";
+
+const getNotificationToplist = (modules) => {
+  const toplistModule = modules.find((m) => m.name === "top_list");
+  if (!toplistModule) return null;
+
+  return (
+    toplistModule.items?.find(
+      (item) =>
+        item.value === "notification_panel_toplist" ||
+        item.short_name === "notification_panel_toplist"
+    ) ?? toplistModule.items?.[0]
+  );
+};
 
-const Notifications = ({ section }) => {
+const Notifications = ({ section, market }) => {
   const { setShowSearch, setShowMenu, showMenu, showSearch } =
     useContext(NavigationContext);
   const notificationRef = useRef(null);
   const [newNotification, setNewNotification] = useState(true);
   const [openNotification, setOpenNotification] = useState(false);
 
-  const { modules } = section || {};
-  const getNotifications = () =>
-    modules?.find(
-      (module) => module?.name === "spotlights" || module?.name === "cards_v2"
-    ) || {};
+  const modules = section?.modules || [];
+  const notificationToplist = getNotificationToplist(modules);
+  const cardsModule = modules.find((m) => m.name === "cards_v2");
+  const spotlightModule = modules.find((m) => m.name === "spotlights");
+
+  const [activeTab, setActiveTab] = useState(
+    notificationToplist?.items?.length ? "bonuses" : "trending"
+  );
+
+  const renderTrendingContent = () => {
+    if (cardsModule) {
+      return (
+        <CardsItems
+          module={cardsModule}
+          showUnread={newNotification}
+        />
+      );
+    }
+
+    return (
+      <SpotlightItems
+        module={spotlightModule}
+        showUnread={newNotification}
+      />
+    );
+  };
 
   const notificationActions = () => {
-    setNewNotification(false);
     setOpenNotification(!openNotification);
 
     if (showSearch) {
@@ -36,6 +72,14 @@ const Notifications = ({ section }) => {
     }
   };
 
+  useEffect(() => {
+    if (!openNotification) return undefined;
+
+    toggleScroll("notifications");
+
+    return () => toggleScroll("notifications");
+  }, [openNotification]);
+
   useEffect(() => {
     function handleClickOutside(event) {
       if (
@@ -46,51 +90,79 @@ const Notifications = ({ section }) => {
       }
     }
 
-    // Bind the event listener
     document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
 
-    return () => {
-      // Unbind the event listener on clean up
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [notificationRef]);
+  const bellAriaLabel = useTranslate(
+    "ariaLabel-notificationBellIcon",
+    "Notification Bell Icon"
+  );
+  const closeLabel = useTranslate("close", "Close");
 
   return (
-    <div ref={notificationRef} className={styles?.notificationOuter || ""}>
+    <div ref={notificationRef} className={styles.notificationOuter}>
       <div
-        className={`${styles.notificationIcon || ""} ${
-          newNotification ? styles.newNotification || "" : ""
+        className={`${styles.notificationIcon} ${
+          newNotification ? styles.newNotification : ""
         } notification-bell-gtm`}
-        onKeyDown={() => notificationActions()}
-        onClick={() => notificationActions()}
+        onKeyDown={notificationActions}
+        onClick={notificationActions}
         role="button"
-        aria-label={useTranslate(
-          "ariaLabel-notificationBellIcon",
-          "Notification Bell Icon"
-        )}
+        aria-label={bellAriaLabel}
         tabIndex={0}
       >
-        {openNotification ? <CloseIcon /> : <BellIcon />}
-      </div>
-      {openNotification &&
-        (getNotifications()?.name === "cards_v2" ? (
-          <CardsItems
-            module={getNotifications()}
-            onClose={() => notificationActions()}
-          />
+        {openNotification ? (
+          <CloseIcon color="var(--notification-bell-color, #1c1a28)" />
         ) : (
-          <SpotlightItems
-            module={getNotifications()}
-            onClose={() => notificationActions()}
-          />
-        ))}
+          <BellIcon color="var(--notification-bell-color, #1c1a28)" />
+        )}
+      </div>
+
+      {openNotification && (
+          <div className={styles.container}>
+            <div
+              className={styles.overlay}
+              onKeyDown={notificationActions}
+              onClick={notificationActions}
+              role="button"
+              aria-label={closeLabel}
+              tabIndex={0}
+            />
+            <div className={styles.panel}>
+              <PanelHeader
+                onClose={notificationActions}
+                onMarkAllRead={() => setNewNotification(false)}
+              />
+
+              <PanelTabs
+                activeTab={activeTab}
+                onTabChange={setActiveTab}
+                market={market}
+              />
+
+              <div className={styles.content}>
+                {activeTab === "bonuses" ? (
+                  <BonusesItems
+                    toplist={notificationToplist}
+                    showUnread={newNotification}
+                  />
+                ) : (
+                  renderTrendingContent()
+                )}
+              </div>
+            </div>
+          </div>
+        )}
     </div>
   );
 };
 
 Notifications.propTypes = {
-  pageContext: PropTypes.shape({}),
-  section: PropTypes.shape({}),
+  market: PropTypes.string,
+  section: PropTypes.shape({
+    modules: PropTypes.arrayOf(PropTypes.shape({})),
+  }),
 };
 
 export default Notifications;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { getListToplistItem } from '~tests/factories/modules/toplist.factory';
+import BonusesItems from '.';
+
+const buildToplist = (overrides = {}) => ({
+  tracker: 'main',
+  items: getListToplistItem(1).map((item) => ({
+    ...item,
+    updated_at: '2025-01-14 11:04:49',
+    logo: { filename: 'logo1.jpg' },
+    bonuses: {
+      main: {
+        ...item.bonuses.main,
+        promo_code: 'BONUS123',
+        terms_and_conditions_enabled: true,
+        terms_and_conditions: 'Terms apply',
+      },
+    },
+  })),
+  ...overrides,
+});
+
+describe('BonusesItems', () => {
+  beforeEach(() => {
+    Object.assign(navigator, {
+      clipboard: { writeText: jest.fn() },
+    });
+  });
+
+  test('renders empty state when toplist has no items', () => {
+    render(<BonusesItems toplist={{ items: [] }} />);
+    expect(screen.getByText('No new items')).toBeVisible();
+  });
+
+  test('renders bonus item with promo code and copies on click', () => {
+    const toplist = buildToplist();
+    const { container } = render(<BonusesItems toplist={toplist} showUnread />);
+
+    expect(container.querySelector('.bonusList')).toBeVisible();
+    expect(container.querySelector('.unreadDot')).toBeVisible();
+    expect(screen.getByText('Bonus Code:')).toBeVisible();
+    expect(screen.getByText('BONUS123')).toBeVisible();
+
+    fireEvent.click(screen.getByText('BONUS123'));
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('BONUS123');
+  });
+
+  test('renders bonus item without promo code row', () => {
+    const toplist = buildToplist({
+      items: getListToplistItem(1).map((item) => ({
+        ...item,
+        updated_at: '2025-01-14 11:04:49',
+        logo: { filename: 'logo1.jpg' },
+      })),
+    });
+
+    const { container } = render(<BonusesItems toplist={toplist} />);
+    expect(container.querySelector('.bonusCodeRow')).toBeFalsy();
+    expect(screen.getByText('name1 Review')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,168 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
+import CopyIcon from "~images/icons/copyIcon";
+import LazyImage from "~hooks/lazy-image";
+import PrettyLink from "~atoms/pretty-link";
+import ReviewLink from "~atoms/review-link";
+import Tnc from "~molecules/tnc";
+import keygen from "~helpers/keygen";
+import {
+  getBonusData,
+  getPromoCode,
+  imagePrettyUrl,
+} from "~helpers/getters";
+import { getAltText } from "~helpers/image";
+import { getTimeAgo } from "~helpers/date-time";
+import { TrackingKeys } from "~constants/tracking-api";
+import useTranslate from "~hooks/useTranslate/useTranslate";
+import styles from "../../notifications.module.scss";
+
+const BonusItem = ({
+  item,
+  index,
+  tracker,
+  showUnread,
+  bonusCodeLabel,
+  updatedLabel,
+}) => {
+  const bonus = getBonusData(item, tracker);
+  const oneliner = [bonus?.mainLine, bonus?.secondLine]
+    .filter(Boolean)
+    .join(" + ");
+  const promoCode = getPromoCode(item, tracker);
+  const reviewPath = item.review_link
+    ? `/${item.review_link}`
+    : item.path || null;
+  const timeData = getTimeAgo(item.updated_at) || {};
+  const timeKeyLabel = useTranslate(
+    timeData.key,
+    timeData.key?.replace(/_/g, " ")
+  );
+  const timeAgo = timeData.value
+    ? `${updatedLabel} ${timeData.value} ${timeKeyLabel}`
+    : "";
+
+  return (
+    <li className={styles.bonusItem}>
+      {showUnread && <span className={styles.unreadDot} />}
+      <div className={styles.bonusTopRow}>
+        <PrettyLink
+          operator={item}
+          tracker={tracker}
+          moduleName={TrackingKeys.NAVIGATIONTOPLIST}
+          clickedElement="operator_logo"
+          className={styles.logo}
+          itemPosition={index + 1}
+        >
+          <LazyImage
+            width={52}
+            height={52}
+            alt={getAltText(item.logo, item.name)}
+            src={imagePrettyUrl(item.logo?.filename, 52, 52)}
+          />
+        </PrettyLink>
+
+        <div className={styles.bonusText}>
+          {oneliner && <p className={styles.oneliner}>{oneliner}</p>}
+          {promoCode && (
+            <div className={styles.bonusCodeRow}>
+              <span className={styles.bonusCodeLabel}>{bonusCodeLabel}</span>
+              <button
+                type="button"
+                className={styles.bonusCode}
+                onClick={() => navigator.clipboard.writeText(promoCode)}
+              >
+                <span>{promoCode}</span>
+                <CopyIcon width={20} height={20} />
+              </button>
+            </div>
+          )}
+        </div>
+
+        <PrettyLink
+          operator={item}
+          tracker={tracker}
+          moduleName={TrackingKeys.NAVIGATIONTOPLIST}
+          clickedElement="notification_cta"
+          className={styles.cta}
+          itemPosition={index + 1}
+        >
+          <FaArrowRight size={12} />
+        </PrettyLink>
+      </div>
+
+      <div className={styles.meta}>
+        {reviewPath && (
+          <ReviewLink
+            className={styles.reviewLink}
+            operatorName={item.name}
+            reviewPath={reviewPath}
+          />
+        )}
+        {timeAgo && <span className={styles.updated}>{timeAgo}</span>}
+      </div>
+
+      <div className={styles.legal}>
+        <Tnc operator={item} tracker={tracker} isFixed />
+      </div>
+    </li>
+  );
+};
+
+BonusItem.propTypes = {
+  item: PropTypes.shape({
+    review_link: PropTypes.string,
+    path: PropTypes.string,
+    updated_at: PropTypes.string,
+    short_name: PropTypes.string,
+    name: PropTypes.string,
+    logo: PropTypes.shape({
+      filename: PropTypes.string,
+    }),
+  }).isRequired,
+  index: PropTypes.number.isRequired,
+  tracker: PropTypes.string.isRequired,
+  showUnread: PropTypes.bool,
+  bonusCodeLabel: PropTypes.string.isRequired,
+  updatedLabel: PropTypes.string.isRequired,
+};
+
+const BonusesItems = ({ toplist, showUnread }) => {
+  const items = toplist?.items || [];
+  const tracker =
+    toplist?.toplist_bonus || toplist?.one_liner || toplist?.tracker || "main";
+  const noBonuses = useTranslate("noNewUpdates", "No new items");
+  const bonusCodeLabel = useTranslate("bonus_code", "Bonus Code:");
+  const updatedLabel = useTranslate("updated", "Updated");
+
+  if (!items.length) return <p className={styles.empty}>{noBonuses}</p>;
+
+  return (
+    <ul className={styles.bonusList}>
+      {items.map((item, index) => (
+        <BonusItem
+          key={item.short_name || keygen()}
+          item={item}
+          index={index}
+          tracker={tracker}
+          showUnread={showUnread}
+          bonusCodeLabel={bonusCodeLabel}
+          updatedLabel={updatedLabel}
+        />
+      ))}
+    </ul>
+  );
+};
+
+BonusesItems.propTypes = {
+  toplist: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.shape({})),
+    toplist_bonus: PropTypes.string,
+    one_liner: PropTypes.string,
+    tracker: PropTypes.string,
+  }),
+  showUnread: PropTypes.bool,
+};
+
+export default BonusesItems;