gatsby-core-theme 30.0.21 → 30.0.23

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [30.0.23](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.22...v30.0.23) (2023-11-22)
+
+
+### Bug Fixes
+
+* added new tracker page for the tracking link API ([f17c62e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f17c62e15ce6a5eb227ee295872e6525254f5663))
+* added new tracker page for the tracking link API ([5c810bc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5c810bcf68286a73ac8e835982d7153abd7ae771))
+
+
+* Merge branch 'tm-3833-tracking-links-api' into 'master' ([870c02c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/870c02cd48756a0135304ab5022cc0843b002fe7))
+
+## [30.0.22](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.21...v30.0.22) (2023-11-22)
+
+
+### Bug Fixes
+
+* add scroll event ([eee64c4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/eee64c4f48461b246a1420749fa2bb93d7c3f0f5))
+
 ## [30.0.21](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.20...v30.0.21) (2023-11-21)
 
 

package/gatsby-node.mjs

@@ -283,7 +283,10 @@ export const createPages = async ({ actions: { createPage } }, themeOptions) =>
 
         if (page.path === '404') {
           context404 = contextData;
-        } else if (page.path === `${pathPrefix || ''}${translate(contextData.translations, 'sitemap', 'sitemap')}`) {
+        } else if (
+          page.path ===
+          `${pathPrefix || ''}${translate(contextData.translations, 'sitemap', 'sitemap')}`
+        ) {
           createPage({
             path: `/${page.path}`,
             component: `${__dirname}/src/components/app.js`,
@@ -413,6 +416,11 @@ export const createPages = async ({ actions: { createPage } }, themeOptions) =>
       );
       const marketOperator = operator.market.match(/_(\w+)/)[1];
 
+      const trackerComp =
+        process.env.IS_TRACKING_SSR === 'true'
+          ? `${__dirname}/src/components/pages/tracker/index-ssr.js`
+          : `${__dirname}/src/components/pages/tracker/index.js`;
+
       tracker.forEach((trackerPath) => {
         // Create splash page
         if (trackerPath) {
@@ -428,7 +436,7 @@ export const createPages = async ({ actions: { createPage } }, themeOptions) =>
           };
           createPage({
             path: trackerPath,
-            component: `${__dirname}/src/components/app.js`,
+            component: trackerComp,
             context: {
               page: trackerPageObject,
               siteInfo,

package/package.json

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

package/src/components/atoms/button/operator-cta.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-expressions */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Context } from '~context/MainProvider';
@@ -7,10 +8,11 @@ import styles from './button.module.scss';
 
 const OperatorCtaButton = ({
   operator,
-  pageTemplate,
+  pageTemplate = null,
   gtmClass = '',
   buttonType = 'primary',
   buttonSize = '',
+  module = null,
   tracker = 'main',
   icon = null,
   translationsObj = {
@@ -24,7 +26,18 @@ const OperatorCtaButton = ({
   const { translations } = useContext(Context) || {};
   const status = operator?.status || '';
   const trackerType = tracker?.toLowerCase()?.replace(' ', '_');
-  const prettyLink = prettyTracker(operator, trackerType, false, pageTemplate);
+
+  const urlParams = [];
+
+  if (process.env.IS_TRACKING_SSR === 'true') {
+    pageTemplate && urlParams.push(`template=${pageTemplate}`);
+    module && urlParams.push(`module=${module}`);
+    tracker !== 'main' && urlParams.push(`tracker_name=${tracker}`);
+  }
+
+  const prettyLink = `${prettyTracker(operator, trackerType, false, pageTemplate)}${
+    urlParams.length > 0 ? `?${urlParams.join('&')}` : ''
+  }`;
 
   const translateBtn =
     status && translationsObj[status]
@@ -73,6 +86,7 @@ OperatorCtaButton.propTypes = {
   buttonSize: PropTypes.string,
   buttonType: PropTypes.string,
   tracker: PropTypes.string,
+  module: PropTypes.string,
   translationsObj: PropTypes.shape({
     active: PropTypes.shape({
       translationKey: PropTypes.string,

package/src/components/atoms/search/autocomplete/operator.js

@@ -14,7 +14,7 @@ const Operator = ({ item = {} }) => {
     <div className={styles.row || ''}>
       <LazyImage width={56} height={56} src={imagePrettyUrl(img, 56, 56)} alt={item.title} />
       <h3>{item.title}</h3>
-      <OperatorCta operator={relation} gtmClass="toplist-operator-cta-gtm" />
+      <OperatorCta module="search" operator={relation} gtmClass="toplist-operator-cta-gtm" />
     </div>
   );
 };

package/src/components/molecules/bonus/template-one/index.js

@@ -13,7 +13,9 @@ import styles from './bonus.module.scss';
 export default function Bonus({
   operator,
   pageTemplate,
-  module,
+  module = {
+    name: 'bonus',
+  },
   tncEnable = true,
   tncFixed = false,
 }) {
@@ -60,6 +62,7 @@ export default function Bonus({
           operator={operator}
           pageTemplate={pageTemplate}
           tracker={module?.tracking_link_name || 'main'}
+          module={module.name}
           icon={<FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />}
         />
         {showTncFixed && <Tnc hasCollapse={false} operator={operator} />}
@@ -90,5 +93,6 @@ Bonus.propTypes = {
   module: PropTypes.shape({
     tracking_link_name: PropTypes.string,
     type: PropTypes.string,
+    name: PropTypes.string,
   }),
 };

package/src/components/molecules/bonus/template-two/index.js

@@ -17,7 +17,9 @@ export default function TemplateOne({
   operator,
   stickyOffset = 0,
   pageTemplate,
-  module,
+  module = {
+    name: 'bonus',
+  },
   tncEnable = true,
   tncFixed = false,
   showOnLoad = false,
@@ -103,6 +105,7 @@ export default function TemplateOne({
 
           <OperatorCta
             operator={operator}
+            module={module.name}
             pageTemplate={pageTemplate}
             tracker={module?.tracking_link_name || 'main'}
             icon={<FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />}
@@ -148,5 +151,6 @@ TemplateOne.propTypes = {
   module: PropTypes.shape({
     tracking_link_name: PropTypes.string,
     type: PropTypes.string,
+    name: PropTypes.string,
   }),
 };

package/src/components/molecules/bonus-box/template-three/index.js

@@ -18,6 +18,7 @@ export default function BonusBox({
   splitBy = '+',
   feSeparator = '+',
   buttonType = 'primary',
+  module = null,
 }) {
   const { translations } = useContext(Context) || {};
   const welcomeBonusTranslation = translate(translations, 'welcome_bonus', 'Welcome Bonus');
@@ -53,6 +54,7 @@ export default function BonusBox({
               operator={item}
               icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
               buttonType={buttonType}
+              module={module}
             />
           )}
         </>
@@ -64,6 +66,7 @@ export default function BonusBox({
               operator={item}
               icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
               buttonType={buttonType}
+              module={module}
             />
           )}
           {showVariablesComponent && variableInsideContainer && <VariableComponent item={item} />}
@@ -86,4 +89,5 @@ BonusBox.propTypes = {
   feSeparator: PropTypes.string,
   buttonType: PropTypes.string,
   variableInsideContainer: PropTypes.bool,
+  module: PropTypes.string,
 };

package/src/components/molecules/bonus-box/template-two/index.js

@@ -12,6 +12,7 @@ export default function BonusBox({
   splitBy = '+',
   feSeparator = '+',
   buttonType = 'primary',
+  module = null,
 }) {
   const prettyLink = prettyTracker(item, tracker, false, pageTemplate);
   const data = getBonusData(item, tracker, splitBy);
@@ -33,6 +34,7 @@ export default function BonusBox({
         operator={item}
         icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
         buttonType={buttonType}
+        module={module}
       />
     </div>
   );
@@ -45,4 +47,5 @@ BonusBox.propTypes = {
   splitBy: PropTypes.string,
   feSeparator: PropTypes.string,
   buttonType: PropTypes.string,
+  module: PropTypes.string,
 };

package/src/components/molecules/toplist/default-row/index.js

@@ -20,8 +20,9 @@ const Row = ({
   itemRefs,
   index,
   className,
+  module,
 }) => {
-  const prettyLink = prettyTracker(item, 'main', false, pageTemplate);
+  const prettyLink = prettyTracker(item, tracker, false, pageTemplate);
   // const itemRating = item.rating;
   const reviewPath = item.review_link ? `/${item.review_link}` : item.path || null;
 
@@ -79,6 +80,7 @@ const Row = ({
         tracker={tracker}
         gtmClass="toplist-operator-cta-gtm"
         pageTemplate={pageTemplate}
+        module={module}
       />
     </li>
   );
@@ -88,6 +90,7 @@ Row.propTypes = {
   oneliner: PropTypes.string,
   layout: PropTypes.string,
   tracker: PropTypes.string,
+  module: PropTypes.string,
   item: PropTypes.shape({
     name: PropTypes.string,
     ribbons: PropTypes.arrayOf(PropTypes.string),

package/src/components/organisms/toplist/index.js

@@ -20,6 +20,7 @@ const TopList = ({ module, toplistHeading, page }) => {
         initItemsCount={toplist.num_items_initial_load}
         loadItemsCount={toplist.num_items_load_more}
         pageTemplate={page?.template}
+        module={module.name}
       />
     </div>
   ));
@@ -35,7 +36,7 @@ const TopList = ({ module, toplistHeading, page }) => {
 
 TopList.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
-  module: PropTypes.shape({ items: PropTypes.arrayOf(PropTypes.object) }),
+  module: PropTypes.shape({ name: PropTypes.string, items: PropTypes.arrayOf(PropTypes.object) }),
   toplistHeading: PropTypes.element,
   page: PropTypes.shape({ template: PropTypes.string }),
 };

package/src/components/organisms/toplist/list/index.js

@@ -12,6 +12,7 @@ export default function List({
   initItemsCount,
   loadItemsCount,
   pageTemplate,
+  module,
 }) {
   const initLoadItems = Number(initItemsCount) !== 0 ? Number(initItemsCount) : 10000;
   const loadingItems = Number(loadItemsCount) !== 0 ? Number(loadItemsCount) : 10000;
@@ -47,6 +48,7 @@ export default function List({
             itemRefs={elRefs}
             oneliner={toplist.one_liner}
             index={index}
+            module={module}
           />
         ))}
       </ul>
@@ -78,4 +80,5 @@ List.propTypes = {
   initItemsCount: PropTypes.string,
   loadItemsCount: PropTypes.string,
   pageTemplate: PropTypes.string,
+  module: PropTypes.string,
 };

package/src/components/pages/body/index.js

@@ -70,7 +70,12 @@ function Body({ pageContext, children, hideOperatorBanner, serverData }) {
         <Main serverData={serverData} section={main} pageContext={pageContext} />
       )}
       {OperatorBanner && (
-        <OperatorBanner pageTemplate={template} floating operator={pageContext.page.relation} />
+        <OperatorBanner
+          pageTemplate={template}
+          module={{ name: 'operator_banner', tracking_link_name: 'main' }}
+          floating
+          operator={pageContext.page.relation}
+        />
       )}
       {children && <main>{children}</main>}
       <ScrollToTop />

package/src/components/pages/tracker/index-ssr.js

@@ -0,0 +1,203 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Button from '~atoms/button/button';
+import LazyImage from '~hooks/lazy-image';
+import { imagePrettyUrl, getAltText, translate, stripTrailingSlash } from '~helpers/getters';
+import { generateTrackerLink } from '~helpers/generators';
+import styles from './tracker.module.scss';
+import { getAffiliateLink } from '~helpers/tracker';
+
+const Tracker = ({
+  pageContext,
+  path,
+  mainText = 'One sec, while we load [operator_name] for you..',
+  redirectText = 'If the casino has not loaded within a few seconds',
+  btnText = 'Click Here!',
+  bgImage = '',
+  bgVideo = '',
+  redirectTimer = 5000,
+  logo = '../../../../../images/logo.svg',
+  counter = false,
+  isStory = false,
+  operatorLogo = false,
+  operatorLogoWidth = '80',
+  operatorLogoHeight = '80',
+  serverData,
+}) => {
+  const { operator, page } = pageContext;
+  const translations = page?.translations;
+  const trackerLinks = operator ? Object.keys(operator.links) : [];
+
+  let tracker = '';
+  for (let i = 0; i < trackerLinks.length; i += 1) {
+    const trackerLink = trackerLinks[i].toLowerCase().replace(' ', '_');
+    if (
+      generateTrackerLink(operator, trackerLink, false, page.template) === stripTrailingSlash(path)
+    ) {
+      tracker =
+        operator.links[
+          Object.keys(operator.links).find((key) => key.toLowerCase() === trackerLink.toLowerCase())
+        ];
+      break;
+    }
+    if (path.includes('ppc_fallback')) {
+      // eslint-disable-next-line react/prop-types
+      tracker = operator.links['PPC Fallback'];
+      break;
+    }
+    tracker = operator.links.main;
+  }
+
+  const showSplashScreen = typeof window !== 'undefined';
+
+  function redirect() {
+    if (typeof window !== 'undefined' && !isStory) {
+      if (serverData.success && serverData.result.link) {
+        console.log('FROM API');
+        window.location.replace(serverData.result.link);
+      } else {
+        console.log('FROM LOCAL');
+        window.location.replace(tracker);
+      }
+    }
+  }
+
+  function manualRedirect(e) {
+    if (!isStory) {
+      e.preventDefault();
+      redirect();
+    }
+  }
+
+  /* eslint consistent-return: 0 */
+  useEffect(() => {
+    window.loadGTM = false;
+    if (!isStory) {
+      const timer = setTimeout(() => redirect(), redirectTimer);
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  });
+
+  let background = <></>;
+  if (bgVideo) {
+    background = (
+      <video muted autoPlay loop className={styles.background} poster={bgImage && bgImage}>
+        <source src={bgVideo} type="video/webm" />
+      </video>
+    );
+  } else if (bgImage) {
+    background = <LazyImage className={styles.background} src={bgImage} alt="background image" />;
+  }
+
+  const imageObject = operator?.standardised_logo_url_object || operator?.logo_url_object;
+
+  return (
+    <>
+      {showSplashScreen && (
+        <>
+          <div className={styles.container || ''}>
+            {background}
+            <div className={styles.content || ''}>
+              <LazyImage alt="Site logo" src={logo} />
+              <p
+                className={`${styles.mainText || ''} ${
+                  operatorLogo && (styles.mainTextWithlogo || '')
+                }`}
+              >{`${translate(translations, 'splash_screen_main_text', mainText).replace(
+                '[operator_name]',
+                operator?.bonus?.operator_name || operator.name
+              )}`}</p>
+              {operatorLogo && (
+                <LazyImage
+                  src={imagePrettyUrl(
+                    imageObject?.filename || operator?.logo_url,
+                    operatorLogoWidth,
+                    operatorLogoHeight
+                  )}
+                  alt={getAltText(imageObject, operator.name)}
+                  loading="eager"
+                  width={operatorLogoWidth}
+                  height={operatorLogoHeight}
+                  className={styles.operatorlogo || ''}
+                />
+              )}
+              <div className={styles.bar || ''} />
+              {counter ? (
+                redirectText
+              ) : (
+                <div
+                  className={styles.redirectText || ''}
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{
+                    __html: translate(translations, 'splash_screen_redirect_text', redirectText),
+                  }}
+                />
+              )}
+              <Button
+                onClick={(e) => manualRedirect(e)}
+                btnText={translate(translations, 'splash_screen_button', btnText)}
+                targetBlank={false}
+                isInternalLink={false}
+                gtmClass="tracker-gtm btn-cta"
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+Tracker.propTypes = {
+  redirectText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  mainText: PropTypes.string,
+  btnText: PropTypes.string,
+  bgImage: PropTypes.string,
+  bgVideo: PropTypes.string,
+  path: PropTypes.string,
+  logo: PropTypes.string,
+  counter: PropTypes.bool,
+  redirectTimer: PropTypes.number,
+  isStory: PropTypes.bool,
+  operatorLogo: PropTypes.bool,
+  operatorLogoWidth: PropTypes.string,
+  operatorLogoHeight: PropTypes.string,
+  pageContext: PropTypes.shape({
+    operator: PropTypes.shape({
+      bonus: PropTypes.shape({
+        operator_name: PropTypes.string,
+      }),
+      name: PropTypes.string,
+      standardised_logo_url_object: PropTypes.shape({}),
+      logo_url_object: PropTypes.shape({}),
+      logo_url: PropTypes.string,
+      links: PropTypes.shape({
+        main: PropTypes.string,
+        terms_and_conditions: PropTypes.string,
+      }),
+    }).isRequired,
+    page: PropTypes.shape({
+      template: PropTypes.string,
+      translations: PropTypes.shape({}),
+    }),
+  }),
+  serverData: PropTypes.shape({
+    success: PropTypes.bool,
+    result: PropTypes.shape({
+      link: PropTypes.string,
+    }),
+  }),
+  styles: PropTypes.shape({}),
+};
+
+export async function getServerData({ pageContext, url }) {
+  let res = '';
+
+  res = await getAffiliateLink(pageContext.operator, url);
+  return res;
+}
+
+export default Tracker;

package/src/components/pages/tracker/index.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Button from '~atoms/button/button';
 import LazyImage from '~hooks/lazy-image';
-import { prettyTracker, imagePrettyUrl, getAltText, translate } from '~helpers/getters';
+import { stripTrailingSlash, imagePrettyUrl, getAltText, translate } from '~helpers/getters';
 import { generateTrackerLink } from '~helpers/generators';
 import styles from './tracker.module.scss';
 
@@ -30,7 +30,9 @@ const Tracker = ({
   for (let i = 0; i < trackerLinks.length; i += 1) {
     const trackerLink = trackerLinks[i].toLowerCase().replace(' ', '_');
 
-    if (generateTrackerLink(operator, trackerLink, false, page.template) === path) {
+    if (
+      generateTrackerLink(operator, trackerLink, false, page.template) === stripTrailingSlash(path)
+    ) {
       tracker =
         operator.links[
           Object.keys(operator.links).find((key) => key.toLowerCase() === trackerLink.toLowerCase())

package/src/helpers/getters.mjs

@@ -169,6 +169,19 @@ export function getPageImage(page) {
   return null;
 }
 
+export function getParameterCaseInsensitive(object, key) {
+  const asLowercase = key.toLowerCase();
+  return object[Object.keys(object)
+    .find(k => k.toLowerCase() === asLowercase)
+  ];
+}
+
+export function stripTrailingSlash(str) {
+  return str.endsWith('/') ?
+      str.slice(0, -1) :
+      str;
+};
+
 export function prettyTracker(
   operator,
   trackerType = 'main',
@@ -178,14 +191,16 @@ export function prettyTracker(
   if (pageTemplateName && operator && operator.links && operator.links[pageTemplateName]) {
     return generateTrackerLink(operator, pageTemplateName, provider);
   }
+  
   if (!operator || !operator.short_name || (operator.status && operator.status !== 'active')) {
     return null;
   }
+
   // if tracker is not main, check if the tracker exists,  if not use main
-  if (trackerType !== 'main' && operator.links && operator.links[trackerType] === undefined) {
+  if (trackerType !== 'main' && operator.links && getParameterCaseInsensitive(operator.links, trackerType) === undefined) {
     trackerType = 'main';
   }
-
+  
   return generateTrackerLink(operator, trackerType, provider);
 }
 

package/src/helpers/tracker.mjs

@@ -0,0 +1,23 @@
+/* eslint-disable import/prefer-default-export */
+export async function getAffiliateLink(operator, url) {
+  let urlParams = `site_id=${process.env.SITE_ID}&operator_short_name=${
+    operator.short_name
+  }&operator_type=${operator.type}&language=${operator.market.split('_')[1]}&market_short_code=${
+    operator.market
+  }`;
+
+  const urlSplit = url.split('?');
+
+  if (urlSplit.length === 2) {
+    urlParams += `&${urlSplit[1]}`;
+  }
+
+  const res = await fetch(`${process.env.GATSBY_TRACKING_API_URL}?${urlParams}`).catch(
+    (err) => null
+  );
+
+  const data = res ? await res.json() : { success: false };
+  return {
+    props: data,
+  };
+}

package/src/hooks/scroll-x/index.js

@@ -1,8 +1,14 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-// eslint-disable-next-line react/prop-types
-const ScrollX = ({ children, refTag = {}, scroll = false, stopScrolling = () => {} }) => {
+const ScrollX = ({
+  children,
+  refTag = {},
+  scroll = false,
+  stopScrolling = () => {},
+  onScroll = () => {},
+}) => {
   let pos = { top: 0, left: 0, x: 0, y: 0 };
 
   const preventDefaultEvents = (e) => {
@@ -53,14 +59,22 @@ const ScrollX = ({ children, refTag = {}, scroll = false, stopScrolling = () =>
     refTag.current.addEventListener('mouseleave', mouseUp);
   };
 
+  const handleScroll = () => {
+    onScroll(refTag.current.scrollLeft);
+  };
+
   useEffect(() => {
     if (scroll) {
       refTag.current.style.cursor = 'grab';
       refTag.current.addEventListener('mousedown', mouseDown);
+      refTag.current.addEventListener('scroll', handleScroll);
     }
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    return () => {
+      refTag.current?.removeEventListener('mousedown', mouseDown);
+      refTag.current?.removeEventListener('scroll', handleScroll);
+    };
+  }, [scroll]);
 
   return <>{children}</>;
 };
@@ -69,6 +83,8 @@ ScrollX.propTypes = {
   children: PropTypes.node,
   refTag: PropTypes.shape({}),
   scroll: PropTypes.bool,
+  onScroll: PropTypes.func,
+  stopScrolling: PropTypes.func,
 };
 
 export default ScrollX;