gatsby-core-theme 20.0.11 → 20.0.12

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [20.0.12](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v20.0.11...v20.0.12) (2023-04-20)
+
+
+### Bug Fixes
+
+* added geo tracking location ([c548d85](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c548d858a3ffdf9dcc2cc57526cd035ff48a1350))
+* added geotargetted tracker links ([a1019e6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a1019e6a5fbfe3a331f1da556f4ff04aa6d8e111))
+
+
+* Merge branch 'geo-tracker' into 'master' ([78b4e95](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/78b4e958a7dfa4318ebb1fb4ef52e70d590b229c))
+
 ## [20.0.11](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v20.0.10...v20.0.11) (2023-04-19)
 
 

package/gatsby-node.esm.js

@@ -11,6 +11,7 @@ import { generateTrackerLink } from './src/helpers/generators';
 import processor, { processSitemapPages } from './src/helpers/processor';
 import { pickAuthorsPageKeys } from './src/constants/pick-keys';
 import { translate } from './src/helpers/getters';
+import { groupBy } from './src/helpers/processor/common';
 
 const fs = require('fs');
 
@@ -322,40 +323,92 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
     });
   }
 
-  Object.keys(operators || {}).forEach((operatorId) => {
-    const operator = operators[operatorId];
-    const trackerLinks = Object.keys(operator.links);
-    const tracker = trackerLinks.map((key) =>
-      operator.links[key]
-        ? generateTrackerLink(operator, key, false, pageTemplate).toLowerCase().replace(' ', '_')
-        : null
-    );
-    tracker.forEach((trackerPath) => {
-      // Create splash page
-      if (trackerPath) {
+  if (process.env.GEO_TRACKING) {
+    const operatorsShortName = groupBy(operators, 'short_name');
+    const trackerNames = [];
+    Object.keys(operatorsShortName).forEach((shortname) => {
+      const operatorsAllMarket = operatorsShortName[shortname];
+
+      Object.keys(operatorsAllMarket).forEach((operator) => {
+        Object.keys(operatorsAllMarket[operator].links).forEach((link) => {
+          if (!trackerNames.includes(link)) {
+            trackerNames.push(link);
+          }
+        });
+      });
+      console.log('=====');
+
+      const operatorsByMarket = groupBy(operatorsAllMarket, 'market');
+
+      trackerNames.forEach((link) => {
+        const trackerLinkPath = generateTrackerLink(
+          operatorsAllMarket[0],
+          link,
+          false,
+          pageTemplate
+        )
+          .toLowerCase()
+          .replace(' ', '_');
+        console.log(trackerLinkPath);
+
         const trackerPageObject = {
           meta_title: 'Tracker',
           template: pageTemplate,
           title: 'Tracker',
           relation_type: 'page',
           language: languageKey,
-          path: trackerPath,
+          path: trackerLinkPath,
           meta_robots: ['noindex', 'nofollow'],
         };
         createPage({
-          path: trackerPath,
+          path: trackerLinkPath,
           component: require.resolve('./src/components/app.js'),
           context: {
             page: trackerPageObject,
             siteInfo,
-            operator,
-            isTracker: true,
+            operatorsByMarket,
+            isTrackeGeo: true,
             isLiveStreamProvider: false,
           },
         });
-      }
+      });
     });
-  });
+  } else {
+    Object.keys(operators || {}).forEach((operatorId) => {
+      const operator = operators[operatorId];
+      const trackerLinks = Object.keys(operator.links);
+      const tracker = trackerLinks.map((key) =>
+        operator.links[key]
+          ? generateTrackerLink(operator, key, false, pageTemplate).toLowerCase().replace(' ', '_')
+          : null
+      );
+      tracker.forEach((trackerPath) => {
+        // Create splash page
+        if (trackerPath) {
+          const trackerPageObject = {
+            meta_title: 'Tracker',
+            template: pageTemplate,
+            title: 'Tracker',
+            relation_type: 'page',
+            language: languageKey,
+            path: trackerPath,
+            meta_robots: ['noindex', 'nofollow'],
+          };
+          createPage({
+            path: trackerPath,
+            component: require.resolve('./src/components/app.js'),
+            context: {
+              page: trackerPageObject,
+              siteInfo,
+              operator,
+              isTracker: true,
+              isLiveStreamProvider: false,
+            },
+          });
+        }
+      });
+    });
+  }
 };
 
 exports.onCreatePage = ({ page, actions }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "20.0.11",
+  "version": "20.0.12",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/app.js

@@ -9,7 +9,7 @@ import Body from '~pages/body';
 import HeadData from '~organisms/head';
 
 const App = ({ pageContext }) => {
-  const { translations = {}, isTracker, isPreview } = pageContext;
+  const { translations = {}, isTracker, isTrackeGeo, isPreview } = pageContext;
   const [previewContext, setPreviewContext] = useState({});
   const [isLoading, setIsLoading] = useState({});
 
@@ -56,6 +56,15 @@ const App = ({ pageContext }) => {
   }
 
   const TrackerContent = isTracker ? loadable(() => import(`~pages/tracker`)) : null;
+  const TrackerGeoContent = isTrackeGeo ? loadable(() => import(`~pages/tracker-geo`)) : null;
+
+  if (TrackerGeoContent) {
+    return (
+      <>
+        <TrackerGeoContent pageContext={pageContext} path={pageContext.page.path} />
+      </>
+    );
+  }
 
   return isTracker ? (
     <>

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

@@ -0,0 +1,187 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Button from '~atoms/button';
+import LazyImage from '~hooks/lazy-image';
+import { prettyTracker, imagePrettyUrl, getAltText } from '~helpers/getters';
+import { generateTrackerLink } from '~helpers/generators';
+import styles from './tracker.module.scss';
+
+export default function TrackerGeo({
+  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,
+  operatorLogo = false,
+  operatorLogoWidth = '80',
+  operatorLogoHeight = '80',
+}) {
+  const { page, operatorsByMarket } = pageContext;
+  const operator = operatorsByMarket[Object.keys(operatorsByMarket)[0]];
+  const showSplashScreen = typeof window !== 'undefined';
+
+  const getTracker = (operator) => {
+    let tracker = '';
+    const trackerLinks = operator ? Object.keys(operator.links) : [];
+    for (let i = 0; i < trackerLinks.length; i += 1) {
+      const trackerLink = trackerLinks[i].toLowerCase().replace(' ', '_');
+      if (generateTrackerLink(operator, trackerLink, false, page.template) === path) {
+        tracker =
+          operator.links[
+            Object.keys(operator.links).find(
+              (key) => key.toLowerCase() === trackerLink.toLowerCase()
+            )
+          ];
+        break;
+      }
+
+      tracker = operator.links.main;
+    }
+    return tracker;
+  };
+
+  const getData = async () => {
+    await fetch('https://geolocation-db.com/json/', {
+      method: 'GET',
+    })
+      .then((response) => response.json())
+      .then(async (data) => {
+        const ipAddress = data.IPv4;
+        const apiUrl = `http://ip-api.com/json/${ipAddress}?fields=status,countryCode,region,city,zip,lat,lon`;
+
+        await fetch(apiUrl, {})
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.countryCode) {
+              const userMarketOperator =
+                operatorsByMarket[`us_en_${data.region.toLowerCase()}`] || null;
+              const defaultMarketOperator = operatorsByMarket[`us_en`] || null;
+
+              const trackerRedirect =
+                (userMarketOperator && userMarketOperator[0]) || defaultMarketOperator[0];
+
+              if (trackerRedirect) {
+                setTimeout(
+                  () => window.location.replace(getTracker(trackerRedirect)),
+                  redirectTimer
+                );
+              } else {
+                console.log('No Valid Tracker');
+              }
+            }
+          })
+          .catch((err) => {
+            console.log(`Error ${err}`);
+          });
+      })
+      .catch((err) => {
+        console.log(`Error ${err}`);
+      });
+  };
+
+  useEffect(() => {
+    window.loadGTM = false;
+    getData();
+  }, []);
+
+  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" />;
+  }
+
+  return (
+    <>
+      {showSplashScreen && (
+        <>
+          <div className={styles.container}>
+            {background}
+            <div className={styles.content}>
+              <LazyImage alt="Site logo" src={logo} />
+              <p
+                className={`${styles.mainText} ${operatorLogo && styles.mainTextWithlogo}`}
+              >{`${mainText.replace('[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: redirectText }}
+                />
+              )}
+              <Button
+                onClick={(e) => manualRedirect(e)}
+                btnText={btnText}
+                primaryColor
+                to={prettyTracker(operator, 'main', false, page?.template)}
+                targetBlank={false}
+                isInternalLink={false}
+                gtmClass="tracker-gtm btn-cta"
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+TrackerGeo.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,
+  operatorLogo: PropTypes.bool,
+  operatorLogoWidth: PropTypes.string,
+  operatorLogoHeight: PropTypes.string,
+  pageContext: PropTypes.shape({
+    operatorsByMarket: 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,
+    }),
+  }),
+  styles: PropTypes.shape({}),
+};

package/src/components/pages/tracker-geo/tracker.module.scss

@@ -0,0 +1,105 @@
+.container {
+  width: 100%;
+  height: 100vh;
+  @include flex-align(center, center);
+
+  .background {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @keyframes load {
+    0% { width: 0; }
+    100% { width: 100%; }
+  }
+
+  .content {
+    width: 90%;
+    background: var(--color-16);
+    box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.2);
+    border-radius: 1.6rem;
+    text-align: center;
+    @include flex-direction(column);
+    align-items: center;
+    padding: 2.8rem 0 2rem 0;
+    color: var(--color-22);
+    position: relative;
+
+    @include min(tablet) {
+      width: 50%;
+    }
+
+    @include min(laptop) {
+      width: 35%;
+    }
+
+    img {
+      width: 80%;
+
+      @include min(tablet) {
+        width: 50%;
+      }
+    }
+
+    p {
+      margin: 2rem 0;
+      width: 70%;
+      font-size: 2rem;
+      font-weight: 700;
+
+      @include min(tablet) {
+        font-size: 2.4rem;
+      }
+    }
+
+    .mainTextWithlogo {
+      margin: 2rem 0rem 1rem;
+    }
+
+    .operatorlogo {
+      width: 80px;
+      height: 80px;
+      object-fit: contain;
+      margin-bottom: 1rem;
+    }
+
+    .bar {
+      height: 0.8rem;
+      background: #e1dbdb;
+      border-radius: 10rem;
+      width: 80%;
+
+      &:before {
+        content: ' ';
+        height: 0.8rem;
+        width: 0;
+        background: linear-gradient(270deg, #17d6cc 0.34%, #17d68a 86.37%);
+        border-radius: 10rem;
+        display: block;
+        animation: load 5s normal forwards;
+      }
+    }
+
+    .redirectText {
+      padding: 2.8rem;
+      font-size: 1.6rem;
+
+      @include min(tablet) {
+        font-size: 1.8rem;
+      }
+    }
+
+    a {
+      position: absolute;
+      bottom: -2rem;
+      font-size: 1.4rem;
+
+      @include min(tablet) {
+        font-size: 2rem;
+      }
+    }
+  }
+}