gatsby-core-theme 37.0.4 → 38.0.0

package/CHANGELOG.md

@@ -1,3 +1,53 @@
+# [38.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v37.0.5...v38.0.0) (2024-08-30)
+
+
+### Bug Fixes
+
+* content fixes ([f59d532](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f59d532223fb9a83dfe46d6e0814fb32ac7f20cc))
+* content tracking api v1 ([da588f0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/da588f08dc72a06c751a67273929eed08f9a898c))
+* env file ([7f65097](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7f650979c7104b1d1256b7cb27c947638084378c))
+* env file ([db6ddad](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/db6ddadcc25fd4bae4317ed472e3b5b6ce85d5c9))
+* env same as demo matrix since we use the same data ([7d6be8b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7d6be8bc04dbb1085558ad1277dc83ba30c75227))
+* get latest changes ([977e2e9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/977e2e9de1d51e174f956d6a93fbe40cb1526bc7))
+* pretty link ([2f225ed](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2f225ed1e5592acf63f4207e6777d95be6463e82))
+* redirects with full path ([6fd00e6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6fd00e6ddf158ee826fea102732792d2acd970fb))
+* small fix ([e78f601](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e78f601e1c653478b4869a06b702629de648334f))
+* test ([d98e826](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d98e826c05d860f8f629bfb199602a1a62c1b157))
+* test nested a with image and added clickedElement as link ([369f86f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/369f86f30b0b4ba5442f4edd42cc036f67efd780))
+* tests ([e09f445](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e09f4452cfef79686672f25f18fa54db554ed669))
+* tracking link check function ([5fbe0c5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5fbe0c5f2702733eda1c0c2272a5b4229ad42c69))
+* update pick keys and operator mjs ([aa16a8a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/aa16a8a0e17ae20af5ac8cd52ae3451bdd3ca5b7))
+* update relations ([bdd2896](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/bdd2896aa25895d3509c63b9855171b8feb46de1))
+
+
+### Code Refactoring
+
+* change in eslint ([b6891e1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b6891e18ba62de0d44d6c2cb0c37a9f32760e88e))
+* changes modal ([f483d9d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f483d9d970d4185b82419e61342285fe086d2b9d))
+* changes to scss map-get ([a5824d7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a5824d749195746749784049448cc77b50017acf))
+* changes to the modal ([81f5f42](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/81f5f42c5271839ee9ea43c0d2362960db2ee0ad))
+* correction to fn name ([9ea53ac](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9ea53ace3ace8eed0fd7aad0588c31326974b4f2))
+* min with of modal ([360bccb](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/360bccbc246a837d92a75de50fd3f29194e34043))
+* remove style ([44632b7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/44632b78ed6fd739f4149ce02299d6f7d02d07da))
+
+
+* Merge branch 'tm-4651-info-grid' into 'master' ([6d97fff](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6d97fffba03b1014062ea1980c63bb1bcf766f19))
+* Merge branch 'tm-4567-feedback-modal' into 'master' ([c161368](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c1613689e76995347be70145063a550518fb8439))
+* Merge branch 'master' into tm-4567-feedback-modal ([c925752](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c925752077da95d781f48945b8ec95c645403a13))
+* Merge branch 'tm-4722-redirects' into 'master' ([ebc2912](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ebc2912b3885089e3b52380a6a56853bc9a7b9d3))
+* Merge branch 'tm-4234-content-tracking-api' into 'master' ([71a222c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/71a222c0d8df21ffdf370f85b092da9860129abd))
+* Merge branch 'master' into tm-4722-redirects ([97fa0c0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/97fa0c0af30609465032a1291d351ba1923f6927))
+
+## [37.0.5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v37.0.4...v37.0.5) (2024-08-28)
+
+
+### Bug Fixes
+
+* update pick keys to include author name ([3751e59](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3751e595d429660099866fd81753c2e78555763b))
+
+
+* Merge branch 'tm-4649-toplist' into 'master' ([994604f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/994604fa5d42f63936c26fcfbb5c9b01cd989f42))
+
 ## [37.0.4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v37.0.3...v37.0.4) (2024-08-27)
 
 

package/gatsby-node.mjs

@@ -167,15 +167,19 @@ export const createPages = async ({ actions: { createPage } }, themeOptions) =>
   if (siteSettingsData.redirects) {
     Object.entries(siteSettingsData.redirects).forEach(
       ([key, value]) => {
+        const normalizedFrom = value.from.replace(`https://www.${process.env.GATSBY_SITE_NAME}`, '');
+        const normalizedTo = value.to.replace(`https://www.${process.env.GATSBY_SITE_NAME}`, '');
+
         if (![301, 302, 410].includes(parseInt(value.type))) return;
         if ([301, 302].includes(parseInt(value.type))) {
           const redirectName = parseInt(value.type) === 301 ? 'permanent' : 'redirect';
           stream.write(
-            `rewrite (?i)^${value.from}/?$ ${value.to.replace(/[{}]/g, '')} ${redirectName}; \n`
+            `rewrite (?i)^${normalizedFrom}/?$ ${normalizedTo.replace(/[{}]/g, '')} ${redirectName}; \n`
           );
         }
+
         if (parseInt(value.type) === 410) {
-          stream.write(`location ~ /${value.from} { return 410; } \n`);
+          stream.write(`location ~ /${normalizedFrom} { return 410; } \n`);
         }
       }
     )

package/package.json

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

package/src/components/atoms/pretty-link/index.js

@@ -1,24 +1,30 @@
 /* eslint-disable react/jsx-no-target-blank */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { globalHistory } from '@reach/router';
-import { prettyTracker } from '~helpers/getters';
-import { setCookie } from '~helpers/cookies';
-import keygen from '~helpers/keygen';
-import { getTrackingAPIParams } from '~helpers/tracker';
+import React from 'react'
+import PropTypes from 'prop-types'
+import { globalHistory } from '@reach/router'
+import { prettyTracker } from '~helpers/getters'
+import { setCookie } from '~helpers/cookies'
+import keygen from '~helpers/keygen'
+import { getTrackingAPIParams } from '~helpers/tracker'
 
 const PrettyLink = ({
   operator,
+  directPrettyLink = null,
   pageTemplate,
   module,
   tracker,
   titleSuffix,
   className,
   children,
-  rel = 'nofollow sponsored',
+  clickedElement = 'cta',
+  rel = 'nofollow sponsored'
 }) => {
-  const prettyLink = prettyTracker(operator, tracker, false, pageTemplate);
-  const referer = typeof document !== 'undefined' && document?.referrer ? document.referrer : '';
+  const prettyLink =
+    directPrettyLink || prettyTracker(operator, tracker, false, pageTemplate)
+  const referer =
+    typeof document !== 'undefined' && document?.referrer
+      ? document.referrer
+      : ''
 
   const onCTAClick = () => {
     // eslint-disable-next-line no-unused-expressions
@@ -30,25 +36,28 @@ const PrettyLink = ({
             pageTemplate,
             module,
             tracker,
-            'cta',
+            clickedElement,
             globalHistory.location.href,
             referer
           )
         ),
         1,
         '/'
-      );
+      )
 
-    if (process.env.ENABLE_PIXEL === 'true' && typeof window.fbq !== 'undefined') {
+    if (
+      process.env.ENABLE_PIXEL === 'true' &&
+      typeof window.fbq !== 'undefined'
+    ) {
       // Call fbq track event
-      window.fbq('track', 'InitiateCheckout', { keyID: keygen() });
+      window.fbq('track', 'InitiateCheckout', { keyID: keygen() })
     }
-  };
+  }
 
   return (
     <a
       href={prettyLink || '#'}
-      title={`${operator?.name} ${titleSuffix || ''}`.trimEnd()}
+      title={`${operator?.name || ''} ${titleSuffix || ''}`.trimEnd() || ''}
       className={className}
       target="_blank"
       rel={rel}
@@ -57,20 +66,26 @@ const PrettyLink = ({
     >
       {children}
     </a>
-  );
-};
+  )
+}
 
 PrettyLink.propTypes = {
   operator: PropTypes.shape({
-    name: PropTypes.string,
+    name: PropTypes.string
   }),
+  directPrettyLink: PropTypes.string,
   pageTemplate: PropTypes.string,
   module: PropTypes.string,
   titleSuffix: PropTypes.string,
   tracker: PropTypes.string,
   className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.any]),
-  rel: PropTypes.string,
-};
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.any
+  ]),
+  clickedElement: PropTypes.string,
+  rel: PropTypes.string
+}
 
-export default PrettyLink;
+export default PrettyLink

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

@@ -1,73 +1,89 @@
 /* eslint-disable camelcase */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useState } from 'react';
-import parse from 'html-react-parser';
-import PropTypes from 'prop-types';
-import { IoIosArrowDown } from '@react-icons/all-files/io/IoIosArrowDown';
-import replaceMedia from '../../../helpers/replaceMedia';
-import styles from './content.module.scss';
-import lists from './lists/lists.module.scss';
-import table from './table/table.module.scss';
-import frame from './frame/frame.module.scss';
-import blockquote from './blockquote.module.scss';
+import React, { useState } from 'react'
+import parse from 'html-react-parser'
+import PropTypes from 'prop-types'
+import { IoIosArrowDown } from '@react-icons/all-files/io/IoIosArrowDown'
+import replaceMedia from '../../../helpers/replaceMedia'
+import styles from './content.module.scss'
+import lists from './lists/lists.module.scss'
+import table from './table/table.module.scss'
+import frame from './frame/frame.module.scss'
+import blockquote from './blockquote.module.scss'
 
 const Content = ({
   module,
   isHomepageFirstModule = false,
   isModuleIntroduction = '',
   page,
+  moduleName = 'content',
   isContentCollapsible = false,
   icon = <IoIosArrowDown />,
-  moduleWidth = 960,
+  moduleWidth = 960
 }) => {
-  const { show_more_label, show_more_enabled } = module || {};
+  const { show_more_label, show_more_enabled } = module || {}
 
-  const [showMore, setShowMore] = useState(false);
+  const pageTemplate = page?.template
+
+  const [showMore, setShowMore] = useState(false)
 
   const handleChange = () => {
-    setShowMore(!showMore);
-  };
+    setShowMore(!showMore)
+  }
 
   const switchStyle = (style) => {
     switch (style) {
       case 'template_two':
-        return `${table.templateTwo || ''}`;
+        return `${table.templateTwo || ''}`
       case 'template_three':
-        return `${table.templateOne || ''} ${frame.frame || ''}`;
+        return `${table.templateOne || ''} ${frame.frame || ''}`
       default:
-        return `${table.templateOne || ''}`;
+        return `${table.templateOne || ''}`
     }
-  };
+  }
 
-  const mainContent = (content, customClassName = '', showMoreText = false) => (
+  const mainContent = (content, customClassName = '') => (
     <div
-      className={` ${styles.content || ''} ${lists.ul || ''} ${blockquote.blockquote || ''} 
+      className={` ${styles.content || ''} ${lists.ul || ''} ${
+        blockquote.blockquote || ''
+      } 
       ${switchStyle(module.style) || ''} ${
         isHomepageFirstModule ? styles.homepageFirstModuleContent || '' : ''
-      } ${isModuleIntroduction ? styles.moduleIntroMargin || '' : ''} ${customClassName}
+      } ${
+        isModuleIntroduction ? styles.moduleIntroMargin || '' : ''
+      } ${customClassName}
       `}
     >
       {parse(content, {
-        replace: (node) => replaceMedia(node, moduleWidth),
+        replace: (node) =>
+          replaceMedia(node, moduleWidth, moduleName, pageTemplate)
       })}
     </div>
-  );
+  )
 
-  const mainContentTwo = (content, customClassName = '', showMoreText = false) => (
+  const mainContentTwo = (
+    content,
+    customClassName = '',
+    showMoreText = false
+  ) => (
     <div
-      className={` ${styles.content || ''} ${lists.ul || ''} ${blockquote.blockquote || ''} 
+      className={` ${styles.content || ''} ${lists.ul || ''} ${
+        blockquote.blockquote || ''
+      } 
        ${showMore && !isContentCollapsible ? styles.showMore : ''}  
       ${switchStyle(module.style) || ''} ${
         isHomepageFirstModule ? styles.homepageFirstModuleContent || '' : ''
-      } ${isModuleIntroduction ? styles.moduleIntroMargin || '' : ''} ${customClassName}
+      } ${
+        isModuleIntroduction ? styles.moduleIntroMargin || '' : ''
+      } ${customClassName}
         ${showMoreText && !showMore ? styles.hide : ''}
       `}
     >
       {parse(content, {
-        replace: (node) => replaceMedia(node, page, {}, moduleWidth),
+        replace: (node) => replaceMedia(node, page, {}, moduleWidth)
       })}
     </div>
-  );
+  )
 
   return show_more_enabled !== '1' || module.show_more_content == null ? (
     mainContent(module.value)
@@ -77,9 +93,12 @@ const Content = ({
       <button
         type="button"
         className={`${
-          isContentCollapsible ? styles.showMoreTwoButton || '' : styles.showMoreButton || ''
+          isContentCollapsible
+            ? styles.showMoreTwoButton || ''
+            : styles.showMoreButton || ''
         } ${(!isContentCollapsible && showMore && styles.hide) || ''} ${
-          (showMore && isContentCollapsible && styles.showMoreTwoButtonOpen) || ''
+          (showMore && isContentCollapsible && styles.showMoreTwoButtonOpen) ||
+          ''
         }`}
         onClick={handleChange}
         title="showMoreContentButton"
@@ -95,8 +114,8 @@ const Content = ({
           true
         )}
     </>
-  );
-};
+  )
+}
 
 Content.propTypes = {
   module: PropTypes.shape({
@@ -105,14 +124,15 @@ Content.propTypes = {
     module_title: PropTypes.string,
     value: PropTypes.string,
     style: PropTypes.string,
-    show_more_content: PropTypes.string,
+    show_more_content: PropTypes.string
   }),
-  page: PropTypes.shape({}),
+  page: PropTypes.shape({ template: PropTypes.string }),
+  moduleName: PropTypes.string,
   isHomepageFirstModule: PropTypes.bool,
   isModuleIntroduction: PropTypes.string,
   isContentCollapsible: PropTypes.bool,
   icon: PropTypes.node,
-  moduleWidth: PropTypes.node,
-};
+  moduleWidth: PropTypes.node
+}
 
-export default Content;
+export default Content

package/src/constants/pick-keys.mjs

@@ -39,7 +39,10 @@ export const topListPickKeys = [
   'founded',
   'ribbons',
   'owner',
-  'support_types'
+  'support_types',
+  'authorName',
+  'authorPath',
+  'updatedAt'
 ];
 
 export const pickTrackerOperatorKeys = [
@@ -82,7 +85,8 @@ export const pickRelationKeys = {
     'url',
     'games_amount',
     'review_link',
-    'payout_time'
+    'payout_time',
+    'support_types'
   ],
   game: [
     'game_provider',

package/src/helpers/processor/operators.mjs

@@ -80,6 +80,10 @@ export function sanitizeOperatorData(
     clone.authorImageObject = operatorPage[0].author.image_object;
   }
 
+  if (operatorPage.length >= 1) {
+    clone.updatedAt = operatorPage[0].updated_at;
+  }
+
   // Set Logo Url
   clone.logo =
     operatorClone.logo_url_object ||

package/src/helpers/replaceMedia.js

@@ -1,32 +1,91 @@
 /* eslint-disable react/destructuring-assignment */
-import React from 'react';
-import Iframe from 'gatsby-core-theme/src/components/atoms/iframe';
-import processImageNode from './processImageNode.js';
+import React from 'react'
+import Iframe from 'gatsby-core-theme/src/components/atoms/iframe'
+import { isTrackerLink } from 'gatsby-core-theme/src/helpers/tracker.mjs'
+import processImageNode from './processImageNode.js'
+import PrettyLink from '~atoms/pretty-link'
 
-export default (node, moduleWidth = 960) => {
+export default (node, moduleWidth = 960, moduleName, pageTemplate) => {
   if (node.name === 'iframe') {
-    return <Iframe src={node.attribs.src} />;
+    return <Iframe src={node.attribs.src} />
   }
 
   if (node.name === 'img') {
-    return processImageNode(node, moduleWidth);
+    return processImageNode(node, moduleWidth)
+  }
+
+  if (node.name === 'a' && isTrackerLink(node?.attribs?.href || '')) {
+    // Helper function to convert style string to an object
+    const convertStyleStringToObject = (styleString) =>
+      styleString.split(';').reduce((acc, style) => {
+        const [key, value] = style.split(':')
+        if (key && value) {
+          acc[key.trim()] = value.trim()
+        }
+        return acc
+      }, {})
+
+    // Helper function to recursively render children nodes
+    const renderChildren = (children) =>
+      children.map((child) => {
+        if (child.type === 'tag') {
+          const styleObject = child.attribs?.style
+            ? convertStyleStringToObject(child.attribs.style)
+            : null
+
+          const { style, ...attribsWithoutStyle } = child.attribs
+
+          // Assuming `child.attribs.id` or a similar unique property exists
+          const key = child.attribs.id || child.name
+
+          if (child.name === 'img') {
+            processImageNode(child, moduleWidth)
+          }
+
+          return React.createElement(
+            child.name,
+            { key, ...attribsWithoutStyle, style: styleObject },
+            child.name !== 'img' && child.name !== 'br'
+              ? renderChildren(child.children || [])
+              : null
+          )
+        }
+
+        return child?.data
+      })
+
+    return (
+      <PrettyLink
+        directPrettyLink={node?.attribs?.href}
+        pageTemplate={pageTemplate}
+        module={moduleName}
+        tracker={module?.tracking_link_name || 'main'}
+        className="content-module-gtm"
+        clickedElement="link"
+        rel={node?.attribs?.rel}
+      >
+        {node.children === 'text'
+          ? node.children[0]?.data
+          : renderChildren(node?.children || [])}
+      </PrettyLink>
+    )
   }
 
   if (node.name === 'p') {
-    const hasChildImg = node?.children.find((child) => child?.name === 'img');
+    const hasChildImg = node?.children.find((child) => child?.name === 'img')
 
     if (hasChildImg) {
-      hasChildImg.attribs.style = '';
-      return hasChildImg;
+      hasChildImg.attribs.style = ''
+      return hasChildImg
     }
   }
 
   // Add tab index for tables for accessibility
   if (node.name === 'table') {
-    node.attribs.tabIndex = 0;
+    node.attribs.tabIndex = 0
 
-    return node;
+    return node
   }
 
-  return null;
-};
+  return null
+}

package/src/helpers/replaceMedia.test.js

@@ -1,11 +1,11 @@
-import transformNode from './replaceMedia';
+import transformNode from './replaceMedia'
 
 describe('replaceMedia function', () => {
   it('iframe', async () => {
-    const node = { name: 'iframe', attribs: { src: 'https://iframe.com' } };
-    const transformedNode = await transformNode(node, {}, {});
-    expect(transformedNode.type.name).toBe('Iframe');
-  });
+    const node = { name: 'iframe', attribs: { src: 'https://iframe.com' } }
+    const transformedNode = await transformNode(node, {}, {})
+    expect(transformedNode.type.name).toBe('Iframe')
+  })
 
   it('img', () => {
     const node = {
@@ -15,24 +15,108 @@ describe('replaceMedia function', () => {
         class: 'content-image--align-center',
         width: '300px',
         height: '200px',
-        alt: 'Alt text',
-      },
-    };
-    const transformedNode = transformNode(node, {}, {});
-    expect(transformedNode.type.name).toBe('LazyImage');
-    expect(transformedNode.props.src).toBe('https://cdn.images.com/fit-in/300x200/image.jpg');
-    expect(transformedNode.props.width).toBe('300');
-    expect(transformedNode.props.height).toBe('200');
-    expect(transformedNode.props.alt).toBe('Alt text');
-    expect(transformedNode.props.className).toBe('alignCenter');
-  });
+        alt: 'Alt text'
+      }
+    }
+    const transformedNode = transformNode(node, {}, {})
+    expect(transformedNode.type.name).toBe('LazyImage')
+    expect(transformedNode.props.src).toBe(
+      'https://cdn.images.com/fit-in/300x200/image.jpg'
+    )
+    expect(transformedNode.props.width).toBe('300')
+    expect(transformedNode.props.height).toBe('200')
+    expect(transformedNode.props.alt).toBe('Alt text')
+    expect(transformedNode.props.className).toBe('alignCenter')
+  })
 
   it('transforms p node with img child correctly', () => {
     const node = {
       name: 'p',
-      children: [{ name: 'img', attribs: { src: 'https://cdn.images.com/image.jpg' } }],
-    };
-    const transformedNode = transformNode(node, {}, {});
-    expect(transformedNode.attribs.style).toBe('');
-  });
-});
+      children: [
+        { name: 'img', attribs: { src: 'https://cdn.images.com/image.jpg' } }
+      ]
+    }
+    const transformedNode = transformNode(node, {}, {})
+    expect(transformedNode.attribs.style).toBe('')
+  })
+
+  it('transforms a tag with tracker link correctly', () => {
+    process.env.TRACKER_LINK_FORMAT_MAIN = '[za_en],[visit],type,short_name'
+    const node = {
+      name: 'a',
+      attribs: {
+        href: 'https://www.playcasino.co.za/za_en/visit/10bet',
+        style: 'color: red; text-decoration: none;'
+      },
+      children: [{ type: 'text', data: 'Click me' }]
+    }
+    const transformedNode = transformNode(
+      node,
+      960,
+      'content',
+      'default'
+    )
+    expect(transformedNode.props.directPrettyLink).toBe(
+      'https://www.playcasino.co.za/za_en/visit/10bet'
+    )
+    expect(transformedNode.props.className).toBe('content-module-gtm')
+    expect(transformedNode.props.clickedElement).toBe('link')
+    expect(transformedNode.props.module).toBe('content')
+    expect(transformedNode.props.pageTemplate).toBe('default')
+    expect(transformedNode.props.tracker).toBe('main')
+  })
+
+  it('transforms an anchor tag with an image correctly', () => {
+    const node = {
+      name: 'a',
+      attribs: {
+        href: 'https://www.playcasino.co.za/za_en/visit/10bet',
+        style: 'color: red; text-decoration: none;',
+        rel: 'noopener noreferrer'
+      },
+      children: [
+        {
+          name: 'img',
+          type: 'tag',
+          attribs: {
+            src: 'https://assets-srv.s3.eu-west-1.amazonaws.com/1718708348/springbok-casino-bonus.jpg',
+            alt: 'Alt text',
+            style: 'width: 100px; height: 50px;',
+            class: 'content-image--align-center',
+            width: '100',
+            height: '50'
+          },
+          children: []
+        }
+      ]
+    }
+
+    const transformedNode = transformNode(
+      node,
+      960,
+      'content',
+      'default'
+    )
+
+    // Check that the transformed node is a PrettyLink component
+    // expect(transformedNode.type).toBe(PrettyLink);
+
+    // Check that the props are correctly set
+    expect(transformedNode.props.directPrettyLink).toBe(
+      'https://www.playcasino.co.za/za_en/visit/10bet'
+    )
+    expect(transformedNode.props.className).toBe('content-module-gtm')
+    expect(transformedNode.props.rel).toBe('noopener noreferrer')
+    expect(transformedNode.props.children).toHaveLength(1)
+
+    // Check the image within the PrettyLink
+    const imageNode = transformedNode.props.children[0]
+    // expect(imageNode.type).toBe(LazyImage);
+    expect(imageNode.props.src).toBe(
+      'https://assets-srv.s3.eu-west-1.amazonaws.com/1718708348/springbok-casino-bonus.jpg'
+    )
+    expect(imageNode.props.alt).toBe('Alt text')
+    expect(imageNode.props.width).toBe('100')
+    expect(imageNode.props.height).toBe('50')
+  })
+})