gatsby-matrix-theme 53.25.0 → 53.26.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [53.26.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.25.1...v53.26.0) (2026-07-07)
+
+
+### Config
+
+* update theme ([ea2f1a2](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/ea2f1a2d125636833c6cba9061949cf6bea0d4b0))
+
+
+* Merge branch 'EN-576/coupon-acts-as-cta' into 'master' ([fe0c2ad](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/fe0c2adb0e51d6744e064cad5a01e689ec6865ef))
+
+
+### Features
+
+* coupon acts as CTA with tracking and delayed operator redirect ([b27d65c](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/b27d65ce42b9f5650fecdbab6be312dadefa3f2d))
+
+## [53.25.1](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.25.0...v53.25.1) (2026-07-07)
+
+
+### Bug Fixes
+
+* update matrix version ([29b2c67](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/29b2c679cdebfd9eaacbea2347e18dd268f30603))
+
 # [53.25.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.24.0...v53.25.0) (2026-07-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.25.0",
+  "version": "53.26.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -26,7 +26,7 @@
     "@react-icons/all-files": "^4.1.0",
     "@gigmedia/enigma-utils": "^1.20.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "44.30.6",
+    "gatsby-core-theme": "44.31.0",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",
     "gatsby-transformer-sharp": "^5.11.0",

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

@@ -1,5 +1,9 @@
-import React, { useState } from 'react';
+/* eslint-disable react/jsx-no-target-blank */
+import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import useCtaClickHandler from 'gatsby-core-theme/src/hooks/useCtaClickHandler/index';
+import { prettyTracker } from 'gatsby-core-theme/src/helpers/getters';
+import { getCtaDataAttributes } from 'gatsby-core-theme/src/helpers/tracker';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import CopyIcon from '../../../images/icons/copy-icon';
 import CheckCircleIcon from '../../../images/icons/check-circle';
@@ -15,26 +19,142 @@ const Coupon = ({
   icon = <CopyIcon />,
   checkIcon = <CheckCircleIcon />,
   showIcon = true,
-  shortCode
+  shortCode,
+  // CTA / redirect behaviour (opt-in)
+  actLikeCta = false,
+  operator = null,
+  tracker = 'main',
+  moduleName = null,
+  pageTemplate = null,
+  clickedElement = 'coupon',
+  modulePosition,
+  itemPosition,
+  rel = 'nofollow sponsored',
+  redirectDelay = 2000
 }) => {
-  if (!code) return;
-
   const [copySuccess, setCopySuccess] = useState('');
+  const redirectTimer = useRef(null);
+  const isPending = useRef(false); // a redirect is scheduled
+  const allowNavigation = useRef(false); // the next click is our own re-dispatch
+
+  // Reuses the core CTA tracking: `fireTracking` drops the affiliate cookie /
+  // fires the pixel; `ctaRef` points at the coupon anchor we redirect through.
+  const { ctaRef, fireTracking } = useCtaClickHandler({
+    pageTemplate,
+    moduleName,
+    tracker,
+    clickedElement,
+    modulePosition,
+    itemPosition
+  });
+
+  // Clear a scheduled redirect if the component unmounts mid-flow
+  useEffect(
+    () => () => {
+      if (redirectTimer.current) clearTimeout(redirectTimer.current);
+    },
+    []
+  );
+
+  // Resolve translations unconditionally so the hook order stays stable across
+  // the copy/redirect state change (Rules of Hooks — useTranslate uses useContext).
+  const prefixLabel = useTranslate(translationKey, defaultTranslation);
+  const noCouponLabel = useTranslate('no_coupon_available', 'Not Needed');
+  const codeCopiedLabel = useTranslate('code_copied', 'CODE COPIED');
+
+  if (!code) return null;
+
+  const inactive = status === 'inactive';
+  const isBet365 = shortCode === 'bet365';
+
+  const trackerType = tracker?.toLowerCase()?.replace(' ', '_');
+  const prettyLink = actLikeCta ? prettyTracker(operator, trackerType, false) : null;
+  // Only act as a CTA when we have a valid outbound link for an active operator
+  const ctaEnabled = actLikeCta && !!prettyLink && !inactive && !isBet365;
+
+  const handleClick = async (e) => {
+    // Our own re-dispatched click: let the anchor navigate + GTM record it
+    if (allowNavigation.current) {
+      allowNavigation.current = false;
+      return;
+    }
 
-  const copyToClipBoard = async (e, copyMe) => {
-    e.preventDefault(); 
-    e.stopPropagation(); 
+    e.preventDefault();
+    e.stopPropagation();
 
+    if (inactive || isBet365) return;
+    // Ignore extra clicks while a redirect is already queued
+    if (isPending.current) return;
+
+    let copied = false;
     try {
-      await navigator.clipboard.writeText(copyMe);
-      setCopySuccess(true);
+      await navigator.clipboard.writeText(code);
+      copied = true;
     } catch (err) {
-      setCopySuccess(false);
+      copied = false;
+    }
+
+    if (!ctaEnabled) {
+      // Original behaviour: flip the label immediately, no redirect
+      setCopySuccess(copied);
+      return;
     }
+
+    // t=0: code is on the clipboard — flip to "copied" and drop the tracking cookie
+    setCopySuccess(true);
+    fireTracking();
+    isPending.current = true;
+
+    // t=redirectDelay: open the operator in a new tab by re-dispatching a real
+    // click on the anchor (so GTM's outbound-click trigger fires), then revert
+    // the "copied" state. The delay stays within the browser's transient-activation
+    // window so the programmatic open is not blocked as a popup.
+    redirectTimer.current = setTimeout(() => {
+      isPending.current = false;
+
+      const anchor = ctaRef.current;
+      if (!anchor) return;
+
+      // Re-dispatch a real click so the anchor navigates (new tab) and GTM's
+      // outbound-click trigger still fires. `allowNavigation` lets our own
+      // handler fall through instead of intercepting the click again.
+      allowNavigation.current = true;
+      const clickEvent = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window
+      });
+      const opened = anchor.dispatchEvent(clickEvent);
+
+      // If a wrapping anchor (e.g. a parent PrettyLink) cancelled the default
+      // navigation, open the operator manually so the tab still opens.
+      if (!opened && prettyLink) {
+        window.open(prettyLink, '_blank');
+      }
+
+      // Revert to the default label once the redirect has fired.
+      setCopySuccess(false);
+    }, redirectDelay);
   };
 
-  const inactive = status === 'inactive';
-  const isBet365 = shortCode === 'bet365';
+  const couponClass = `${styles.coupon} ${copySuccess ? styles.copied : ''}
+        ${code === null ? styles.noCode : ''}
+        ${inactive ? styles.disabled : ''}`;
+
+  const couponContent = !copySuccess ? (
+    <>
+      {templateOne && showprefix && (
+        <span className={styles.prefix}>{prefixLabel}</span>
+      )}
+      {code || noCouponLabel}
+      {showIcon && code !== null && !inactive && !isBet365 && icon}
+    </>
+  ) : (
+    <>
+      <span>{codeCopiedLabel}</span>
+      {showIcon && checkIcon}
+    </>
+  );
 
   return (
     <div
@@ -43,33 +163,35 @@ const Coupon = ({
       } `}
     >
       {!templateOne && showprefix && (
-        <span className={styles.prefix}>{useTranslate(translationKey, defaultTranslation)}</span>
+        <span className={styles.prefix}>{prefixLabel}</span>
+      )}
+      {ctaEnabled ? (
+        <a
+          ref={ctaRef}
+          href={prettyLink}
+          target="_blank"
+          rel={rel}
+          onClick={handleClick}
+          className={couponClass}
+          {...getCtaDataAttributes(operator, {
+            tracker,
+            moduleName,
+            modulePosition,
+            itemPosition
+          })}
+        >
+          {couponContent}
+        </a>
+      ) : (
+        <button
+          onClick={handleClick}
+          type="button"
+          className={couponClass}
+          disabled={inactive || isBet365}
+        >
+          {couponContent}
+        </button>
       )}
-      <button
-        onClick={(e) => (code !== null && !inactive && !isBet365 ? copyToClipBoard(e, code) : '')}
-        type="button"
-        className={`${styles.coupon} ${copySuccess ? styles.copied : ''} 
-        ${code === null ? styles.noCode : ''}
-        ${inactive ? styles.disabled : ''}`}
-        disabled={inactive || isBet365}
-      >
-        {!copySuccess ? (
-          <>
-            {templateOne && showprefix && (
-              <span className={styles.prefix}>
-                {useTranslate(translationKey, defaultTranslation)}
-              </span>
-            )}
-            {code || useTranslate('no_coupon_available', 'Not Needed')}
-            {showIcon && code !== null && !inactive && !isBet365 && icon}
-          </>
-        ) : (
-          <>
-            <span>{useTranslate('code_copied', 'CODE COPIED')}</span>
-            {showIcon && checkIcon}
-          </>
-        )}
-      </button>
     </div>
   );
 };
@@ -84,7 +206,22 @@ Coupon.propTypes = {
   showIcon: PropTypes.bool,
   translationKey: PropTypes.string,
   defaultTranslation: PropTypes.string,
-  shortCode:PropTypes.string
+  shortCode: PropTypes.string,
+  actLikeCta: PropTypes.bool,
+  operator: PropTypes.shape({
+    name: PropTypes.string,
+    short_name: PropTypes.string,
+    status: PropTypes.string,
+    type: PropTypes.string
+  }),
+  tracker: PropTypes.string,
+  moduleName: PropTypes.string,
+  pageTemplate: PropTypes.string,
+  clickedElement: PropTypes.string,
+  modulePosition: PropTypes.number,
+  itemPosition: PropTypes.number,
+  rel: PropTypes.string,
+  redirectDelay: PropTypes.number
 };
 
 export default Coupon;

package/src/components/atoms/recommended-operators/index.js

@@ -13,6 +13,7 @@ import styles from './recommended-operators.module.scss';
 
 const RecommendedOperators = ({
   showCouponCode = false,
+  couponActsAsCta = false,
   showRating = false,
   showAuthor = false,
   title = 'Recommended Casinos:',
@@ -62,7 +63,18 @@ const RecommendedOperators = ({
           </div>
           {(showCouponCode && couponCode) && (
             <div className={styles.couponCtaContainer}>
-              <Coupon code={couponCode} shortCode={operator?.short_name} />
+              <Coupon
+                code={couponCode}
+                shortCode={operator?.short_name}
+                actLikeCta={couponActsAsCta}
+                operator={operator}
+                tracker="main"
+                clickedElement="coupon"
+                pageTemplate={pageTemplate}
+                moduleName={TrackingKeys?.WAGERINGCALCULATOR}
+                modulePosition={modulePosition}
+                itemPosition={index + 1}
+              />
               <OperatorCta
                 operator={operator}
                 tracker="main"
@@ -95,6 +107,7 @@ export default RecommendedOperators;
 
 RecommendedOperators.propTypes = {
   showCouponCode: PropTypes.bool,
+  couponActsAsCta: PropTypes.bool,
   showRating: PropTypes.bool,
   tncFixed: PropTypes.bool,
   showAuthor: PropTypes.bool,

package/src/components/molecules/wagering-calculator/index.js

@@ -21,7 +21,8 @@ const WageringCalculator = ({
   pageContext = {},
   buttonType = 'primary',
   modulePosition,
-  currency = '€'
+  currency = '€',
+  couponActsAsCta = false
 }) => {
   const [depositAmount, setDepositAmount] = useState('');
   const [bonusAmount, setBonusAmount] = useState('');
@@ -180,6 +181,7 @@ const WageringCalculator = ({
             operators={operators}
             pageTemplate={pageContext?.page?.template}
             modulePosition={modulePosition}
+            couponActsAsCta={couponActsAsCta}
           />
         )}
       </div>
@@ -198,6 +200,7 @@ WageringCalculator.propTypes = {
   }),
   modulePosition: PropTypes.number,
   currency: PropTypes.string,
+  couponActsAsCta: PropTypes.bool,
 };
 
 export default WageringCalculator;