gatsby-core-theme 30.0.96 → 30.0.97

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [30.0.97](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.96...v30.0.97) (2024-03-12)
+
+
+### Bug Fixes
+
+* tracking api fixes ([17303d9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/17303d9502fa3e9f6f48d9ce3209ce931421766a))
+* tracking api fixes ([8b116ad](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8b116add66f52811cd6e721f2fd94287c7116354))
+* tracking api fixes ([c38630b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c38630baa4e7bf70c00a3ff01871472166031ea3))
+* tracking api fixes ([d617eab](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d617eabc1655285564e0e89199dea2d25a189fb3))
+
+
+### Code Refactoring
+
+* change to mixin ([df19dfb](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/df19dfbe1ae4a0b0bc27a0d28902d957a308c558))
+
+
+* Merge branch 'mixin-change' into 'master' ([83d5ade](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/83d5ade0c58222e4a138fbec9a830245d25afb5e))
+
 ## [30.0.96](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.95...v30.0.96) (2024-03-06)
 
 

package/gatsby-node.mjs

@@ -391,9 +391,12 @@ export const createPages = async ({ actions: { createPage } }, themeOptions) =>
             path: trackerLinkPath,
             meta_robots: ['noindex', 'nofollow'],
           };
+
+          const trackerComp = process.env.IS_TRACKING_SSR === 'true' ? `${__dirname}/src/components/pages/tracker-geo/index-ssr.js` : `${__dirname}/src/components/pages/tracker-geo/index.js`;
+
           createPage({
             path: trackerLinkPath,
-            component: `${__dirname}/src/components/pages/tracker-geo/index.js`,
+            component: trackerComp,
             context: {
               page: trackerPageObject,
               siteInfo,

package/package.json

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

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

@@ -0,0 +1,196 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/forbid-prop-types */
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import LazyImage from '~hooks/lazy-image';
+import { imagePrettyUrl, getAltText } from '~helpers/getters';
+import { getTrackerName, getAffiliateLink } from '~helpers/tracker';
+import styles from './tracker.module.scss';
+import HeadData from '~organisms/head';
+
+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]][0];
+  // eslint-disable-next-line dot-notation
+  const defaultMarketOperator = operatorsByMarket[`us_en`] || null;
+  const showSplashScreen = typeof window !== 'undefined';
+
+  const getData = async () => {
+    if (serverData.success && serverData.result.link) {
+      console.log('FROM API');
+      window.location.replace(serverData.result.link);
+    } else {
+      console.log('FROM LOCAL');
+      await fetch('https://geolocation-db.com/json/', {
+        method: 'GET',
+      })
+        .then((response) => response.json())
+        .then(async (data) => {
+          const ipAddress = data.IPv4;
+          const apiUrl = `https://pro.ip-api.com/json/${ipAddress}?key=sQhiSjgnSScSHqR&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 trackerRedirect =
+                  (userMarketOperator && userMarketOperator[0]) || defaultMarketOperator[0];
+
+                if (trackerRedirect) {
+                  setTimeout(
+                    () => window.location.replace(getTrackerName(trackerRedirect, page, path)),
+                    redirectTimer
+                  );
+                } else {
+                  console.log('No Valid Tracker');
+                }
+              }
+            })
+            .catch((err) => {
+              console.log(`Error ${err}`);
+              setTimeout(
+                () => window.location.replace(getTrackerName(defaultMarketOperator[0], page, path)),
+                redirectTimer
+              );
+            });
+        })
+        .catch((err) => {
+          console.log(`Error ${err}`);
+          setTimeout(
+            () => window.location.replace(getTrackerName(defaultMarketOperator[0], page, path)),
+            redirectTimer
+          );
+        });
+    }
+  };
+
+  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" />;
+  }
+
+  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}`}
+              >{`${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: redirectText }}
+                />
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+export const Head = ({ pageContext }) => (
+  <HeadData page={pageContext.page} siteInfo={pageContext.siteInfo} />
+);
+
+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({}),
+};
+
+export async function getServerData({ pageContext, headers, url }) {
+  let res = '';
+  res = await getAffiliateLink(
+    pageContext.operator,
+    pageContext.page.path,
+    pageContext.page,
+    headers,
+    url
+  );
+  return res;
+}

package/src/helpers/tracker.mjs

@@ -78,6 +78,7 @@ export async function getAffiliateLink(operator, path, page, headers, url) {
     extraURLParams = deparam(`${url.split('?')[1]}`);
   }
 
+  console.log(headers);
 
   const urlParam = {
     site_id: process.env.SITE_ID,

package/src/styles/utils/_mixins.scss

@@ -128,7 +128,7 @@
   }
 }
 
-@mixin border-gradient($color-1, $color-2, $bgcolor, $radius: 0.8rem) {
+@mixin border-gradient($color-1, $color-2, $bgcolor, $radius: 0.8rem, $border-width: 2px) {
   background: $bgcolor;
   &:before {
     content: '';
@@ -138,7 +138,7 @@
     right: 0;
     bottom: 0;
     border-radius: $radius;
-    border: 2px solid transparent;
+    border: $border-width solid transparent;
     background: $color-1, $color-2 border-box;
     -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: destination-out;