gatsby-core-theme 1.6.22 → 2.0.0

package/CHANGELOG.md

@@ -1,3 +1,54 @@
+# [2.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.22...v2.0.0) (2021-12-16)
+
+
+### Bug Fixes
+
+* add function to transform event datetime ([7167a6b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7167a6b52e0a19064f2a906fe30a4cccfeca41e4))
+* added full date format in currentdate placeholder ([275d9d3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/275d9d3b9b2394acfe8074e50ada241c86aee133))
+* added lazyload if native lazy is not supported ([d27115c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d27115cca38920a11fdca342d3eb631490ee0108))
+* added translation in toplist default row ([c4c100e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c4c100eb9e1b5ce67e72bb42551cbb37311969f7))
+* content fix ([73a6eac](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/73a6eac2cbc4c1bb428312b95867e844c2c2abcd))
+* content module removed parser and used replace function ([cc2973f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cc2973f42e6db2fcd999879e97af502092d65324))
+* lazyimage component ([5230b91](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5230b91bbde26015ebaf49621d8c47207b20d3c6))
+* removed direct mutating, and wip on replacing all events with updated timezone ([1571eb8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1571eb86149eedc74c9a69c77102ceb10d16c9aa))
+* removed function that changes root scss variables ([0b60602](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0b60602002774f3c9d3b2895f87574e3c6c75d44))
+* removed unused lazyloads ([9cc1c5c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9cc1c5c4a89d3e67fe65d85c2e57dd6854dd76a4))
+* replace star svg with css ([868e3a2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/868e3a20ce2804c3deab67d62f64348e657bdbf1))
+* return main component as it was ([db3aca5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/db3aca55c82839d0d281b77b7225a6f75d35c1d7))
+* selling points icon color moved to css var ([7283fc1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7283fc1ef56a7fae24acca91f65a72c0752cd635))
+* selling points tick ([71b3aaf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/71b3aaf4105c6584ede11791cac14a04f8fe9338))
+* small fix ([f6444c1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f6444c1f7421dd9063e9029d02eb8441ec10ffc3))
+* small issue ([43be83b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/43be83bdd5fa5b3d5fe13160a78432a9963c33ec))
+* small issue ([1d49e35](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1d49e357d2098c557d0f7b16e6ab9d7033f16674))
+* test fixed issue ([320e030](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/320e030e49a8c6d7e461578d01e72c2948bdec5a))
+* tests and lazy iframe ([c0b63d5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c0b63d5445f85f7e6b5539b628f516ecbc86547d))
+* tests and lazy iframe ([364f449](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/364f449965ee3998b2dbbdb5132c6a91951ff000))
+* toplist row images ([3ffeb17](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3ffeb17696e2d82fe8b9841defe2b6e78be1e68b))
+
+
+### Code Refactoring
+
+* add error handling for invalid date ([caa308b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/caa308b9b50352228d86d031c449918c7d81840a))
+* remove unneeded function ([d2fb77a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d2fb77a3810e5b767b716d87db4fb63853995d46))
+* tabs set to loadable ([9079a60](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9079a60aaead65be9d70629fdd1025ce46ed8db8))
+* translations change on operator cta ([0a476cf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0a476cf2f1ab02eeba06db8af9eaf692b9715b75))
+* translations change on operator cta ([ee9fded](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ee9fded3227ab34287d539676bc581bcb1a5abee))
+* update placeholders generation for meta tags ([0a4e14b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0a4e14bf2f594a7c28b5698df06436df43bd378c))
+
+
+### Config
+
+* merged master ([08e4355](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/08e43557f6f3827f612fed9448d0db5a5d65577a))
+
+
+* Merge branch 'add_timezone_prefix' into 'master' ([b5d22b5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b5d22b57eb52d8ed97e2928706c98d437a08738b))
+* Merge branch 'tm-2617-update-placeholders-for-meta-tags' into 'master' ([9c5bf49](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9c5bf492688ddb28d01182a5f46ce18d8f7342d6))
+* Merge branch 'cta-play-now' into 'master' ([29107c4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/29107c4da0339cb798b4c6b5c9dfe98c69bab015))
+* Merge branch 'master' into cta-play-now ([f6aa117](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f6aa11733e67c700aa44fd8dec7b918c8d3db661))
+* Merge branch 'selling-points' into 'master' ([4dc0e96](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4dc0e96e48f5219bbeede529fd346e16ede5b514))
+* Merge branch 'star-rating' into 'master' ([ecc5e24](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ecc5e24f9e9f45e72c1ee50dd552fb1a68d04f44))
+* Update .env.development ([a91cd2f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a91cd2fc6355e31644d22749cb98ec1e2c81160a))
+
 ## [1.6.22](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.21...v1.6.22) (2021-12-10)
 
 

package/gatsby-node.esm.js

@@ -5,7 +5,7 @@
 import { cloneDeep, chunk, pick } from 'lodash';
 import chalk from 'chalk';
 import { getData, getLocalData } from './src/helpers/api';
-import { generateMetaTitle, generateTrackerLink } from './src/helpers/generators';
+import { generateMetaString, generateTrackerLink } from './src/helpers/generators';
 import processor, { processSitemapPages } from './src/helpers/processor';
 import { pickAuthorsPageKeys } from './src/constants/pick-keys';
 
@@ -211,8 +211,19 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
         page.authors = Object.keys(authors || {}).map((key) =>
           pick(authors[key], pickAuthorsPageKeys)
         );
-        // Done for matrix-theme sites for [MONTH][YEAR] auto update
-        page.meta_title = page.meta_title && generateMetaTitle(page.meta_title, translations);
+        // Done for matrix-theme sites for placeholders auto update
+        page.meta_title =
+          page.meta_title &&
+          generateMetaString(page.meta_title, translations, {
+            siteName: response.general.site_name,
+            siteTitle: page.title,
+          });
+        page.meta_description =
+          page.meta_description &&
+          generateMetaString(page.meta_description, translations, {
+            siteName: response.general.site_name,
+            siteTitle: page.title,
+          });
 
         const contextData = {
           page,

package/package.json

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

package/src/components/app.js

@@ -66,6 +66,10 @@ const App = ({ pageContext }) => {
 
   const TrackerContent = isTracker ? loadable(() => import(`~pages/tracker`)) : null;
 
+  if (pageContext.siteInfo?.site_name === 'playcasino.co.za') {
+    translations.play_now = 'Play now';
+  }
+
   return isTracker ? (
     <>
       <Head page={pageContext.page} siteInfo={pageContext.siteInfo} />

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LazyLoad from 'react-lazyload';
-
+import loadable from '@loadable/component';
+import { isNativeImageLazyLoadingSupported } from '~helpers/device-detect';
 import styles from './iframe.module.scss';
 
 const Iframe = ({
@@ -10,9 +10,10 @@ const Iframe = ({
   minHeight = '45rem',
   lazyLoad = true,
   frameBorder = 1,
-}) => (
-  <div className={styles.iframeContainer}>
-    {lazyLoad ? (
+}) => {
+  if (!isNativeImageLazyLoadingSupported() && lazyLoad) {
+    const LazyLoad = loadable(() => import(`react-lazyload`));
+    return (
       <LazyLoad>
         <iframe
           title={title}
@@ -21,16 +22,21 @@ const Iframe = ({
           frameBorder={frameBorder}
         />
       </LazyLoad>
-    ) : (
+    );
+  }
+
+  return (
+    <div className={styles.iframeContainer}>
       <iframe
         title={title}
         style={{ width: '100%', minHeight, display: 'block' }}
         src={src}
+        loading={lazyLoad ? 'lazy' : 'eager'}
         frameBorder={frameBorder}
       />
-    )}
-  </div>
-);
+    </div>
+  );
+};
 
 Iframe.propTypes = {
   src: PropTypes.string.isRequired,

package/src/components/atoms/selling-points/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LazyLoad from 'react-lazyload';
 
 import keygen from '~helpers/keygen';
 import styles from './selling-points.module.scss';
@@ -13,7 +12,7 @@ const SellingPoints = ({ sellingPoints, icon, limit = 3 }) => {
     <ul className={styles.sellingPoint}>
       {sellingPoints.slice(0, limit).map((item) => (
         <li key={keygen()}>
-          {icon && <LazyLoad once>{icon}</LazyLoad>}
+          <span className={`${icon && styles.tick}`}>{` `}</span>
           <span>{item}</span>
         </li>
       ))}

package/src/components/atoms/selling-points/selling-points.module.scss

@@ -7,11 +7,18 @@
     font-size: 1.4rem;
     width: 100%;
 
-    svg {
-      margin-right: 1rem;
-      font-weight: 700;
-      color: var(--color-22);
-      flex: 0 0 1.4rem;
+    .tick {
+      position: relative;
+      margin-left: 2rem;
+      &::before {
+        @include arrow(var(--selling-point-icon-color), 1.5rem, down, false);
+        position: absolute;        
+        padding: 0px 0px .8rem .32rem;
+        border-right-width: .18rem;
+        border-bottom-width: .18rem;
+        bottom: -.3rem;
+        left: -1.8rem;
+      }
     }
   }
 

package/src/components/atoms/selling-points/selling-points.test.js

@@ -24,7 +24,7 @@ describe('Selling Points Component', () => {
     const { container } = render(
       <SellingPoints sellingPoints={sellingPointsList} icon={<p>test icon</p>} />
     );
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(3);
+    expect(container.querySelectorAll('.tick')).toHaveLength(3);
   });
 
   test('test empty selling point list', () => {

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

@@ -1,9 +1,12 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react/no-danger */
 import React from 'react';
-import parse from 'html-react-parser';
 import PropTypes from 'prop-types';
+import parse from 'html-react-parser';
 
 import LazyImage from '~hooks/lazy-image';
 import { parseCss } from '~helpers/css-parser';
+
 import styles from './content.module.scss';
 
 const Content = ({ module, pageContext = null }) => {
@@ -49,6 +52,7 @@ const Content = ({ module, pageContext = null }) => {
 };
 
 Content.propTypes = {
+  pageContext: PropTypes.object,
   module: PropTypes.shape({
     anchor_label: PropTypes.string,
     name: PropTypes.string,

package/src/components/molecules/link-list/index.js

@@ -26,18 +26,15 @@ const LinkList = ({
   function renderLinkContent(item, index) {
     const icon = listIcon[index];
 
-    const LinkImage = () => {
-      return disableLazyLoad ? (
-        <img src={imagePrettyUrl(item.image)} width={width} height={height} alt={item.title} />
-      ) : (
-        <LazyImage
-          src={imagePrettyUrl(item.image)}
-          alt={item.title}
-          width={width}
-          height={height}
-        />
-      );
-    };
+    const LinkImage = () => (
+      <LazyImage
+        src={imagePrettyUrl(item.image)}
+        alt={item.title}
+        width={width}
+        height={height}
+        loading={disableLazyLoad ? 'eager' : 'loading'}
+      />
+    );
 
     return (
       <>

package/src/components/molecules/operator-banner/operator-banner.test.js

@@ -12,7 +12,6 @@ describe('OperatorBanner Component', () => {
     );
     expect(container).toBeTruthy();
     expect(container.querySelectorAll('.sticky')).toHaveLength(1);
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(1);
     expect(getByText('Rizk Casino')).toBeTruthy();
     expect(getByText('Visit')).toBeTruthy();
   });

package/src/components/molecules/star-rating/index.js

@@ -1,20 +1,11 @@
 import React from 'react';
-import { FaStar, FaStarHalfAlt, FaRegStar } from 'react-icons/fa';
 import PropTypes from 'prop-types';
-import LazyLoad from 'react-lazyload';
 
 import styles from './star-rating.module.scss';
 import keygen from '~helpers/keygen';
 import { getRating } from '~helpers/rating';
 
-const StarRating = ({
-  numOfStars,
-  iconEmpty = <FaRegStar />,
-  iconHalf = <FaStarHalfAlt />,
-  iconFull = <FaStar />,
-  rating,
-  halfStars = true,
-}) => {
+const StarRating = ({ numOfStars, rating, halfStars = true }) => {
   const renderFarm = () => {
     const output = [];
     const rate = getRating(rating);
@@ -22,38 +13,31 @@ const StarRating = ({
     for (let i = 1; i < numOfStars + 1; i += 1) {
       if (i <= rate) {
         output.push(
-          <span className={`${styles.starItem} ${styles.starFull}`} key={keygen()}>
-            {iconFull}
+          <span className={styles.fullStar} key={keygen()}>
+            {' '}
           </span>
         );
       } else if (halfStars && i - 0.5 === rate) {
         output.push(
-          <span className={`${styles.starItem} ${styles.starHalf}`} key={keygen()}>
-            {iconHalf}
+          <span className={styles.halfStar} key={keygen()}>
+            {' '}
           </span>
         );
       } else {
         output.push(
-          <span className={`${styles.starItem} ${styles.starEmpty}`} key={keygen()}>
-            {iconEmpty}
+          <span className={styles.emptyStar} key={keygen()}>
+            {' '}
           </span>
         );
       }
     }
     return output;
   };
-  return (
-    <LazyLoad once>
-      <div className={styles.starRatingContainer}>{renderFarm()}</div>
-    </LazyLoad>
-  );
+  return <div className={styles.starRatingContainer}>{renderFarm()}</div>;
 };
 
 StarRating.propTypes = {
   numOfStars: PropTypes.oneOf([5, 10]).isRequired,
-  iconEmpty: PropTypes.element,
-  iconHalf: PropTypes.element,
-  iconFull: PropTypes.element,
   rating: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]).isRequired,
   halfStars: PropTypes.bool,
 };

package/src/components/molecules/star-rating/star-rating.module.scss

@@ -7,4 +7,16 @@
       fill: var(--star-rating-color);
     }
   }
-}
+
+  .fullStar{
+    @include star(var(--full-star-fill-color), var(--full-star-border-color))
+  }
+
+  .halfStar{
+    @include half-star(var(--half-star-border-color),  var(--halfFull-star-fill-color), var(--halfEmpty-star-fill-color))
+  }
+
+  .emptyStar{
+    @include star(var(--empty-star-border-color), var(--empty-star-fill-color))
+  }
+}

package/src/components/molecules/star-rating/star-rating.test.js

@@ -7,8 +7,10 @@ import StarRating from '.';
 describe('StarRating Component', () => {
   test('render container with lazyload', () => {
     const { container } = render(<StarRating numOfStars={10} rating={6.5} />);
-    expect(container).toBeTruthy();
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(1);
+
+    expect(container.querySelectorAll('.fullStar')).toHaveLength(6);
+    expect(container.querySelectorAll('.halfStar')).toHaveLength(1);
+    expect(container.querySelectorAll('.emptyStar')).toHaveLength(3);
   });
 });
 afterEach(() => {

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LazyLoad from 'react-lazyload';
 
 import Collapse from '~atoms/collapse';
 
@@ -13,7 +12,7 @@ const Tnc = ({
   initOpen = false,
   operator,
 }) => (
-  <LazyLoad once>
+  <>
     {hasCollapse ? (
       <Collapse
         onlyMobile={onlyMobile}
@@ -26,7 +25,7 @@ const Tnc = ({
     ) : (
       contentText
     )}
-  </LazyLoad>
+  </>
 );
 
 Tnc.propTypes = {

package/src/components/molecules/tnc/tnc.test.js

@@ -8,7 +8,6 @@ describe('Tnc Component', () => {
   test('render component', () => {
     const { container } = render(<Tnc />);
     expect(container).toBeTruthy();
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(1);
   });
 });
 afterEach(() => {

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

@@ -1,18 +1,21 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { MdCheck } from 'react-icons/md';
-
-import Button from '~atoms/button';
 import Bonus from '~atoms/bonus';
+import { Context } from '~context/TranslationsProvider';
 import SellingPoints from '~atoms/selling-points';
-
-import { prettyTracker, imagePrettyUrl } from '~helpers/getters';
+import StarRating from '~molecules/star-rating';
+import Link from '~hooks/link';
+import OperatorCta from '~atoms/operator-cta';
+import { prettyTracker, imagePrettyUrl, translate } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 
 import styles from './default-row.module.scss';
 
-const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
+const Row = ({ item, oneliner = 'main', layout = 'list', tracker = 'main' }) => {
   const prettyLink = prettyTracker(item);
+  const itemRating = item.rating;
+  const { translations } = useContext(Context) || {};
 
   return (
     <div className={`${styles.row} ${styles[layout]}`}>
@@ -33,26 +36,23 @@ const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
         rel="noreferrer"
         aria-label={`${item.name} Link`}
       >
-        <LazyImage alt={item.name} src={imagePrettyUrl(item.logo_url, 100)} />
+        <LazyImage
+          alt={item.name}
+          src={imagePrettyUrl(item.logo_url, 100)}
+          width={150}
+          height={40}
+        />
       </a>
       <Bonus item={item} tracker={oneliner} />
+      <StarRating numOfStars={5} rating={itemRating} />
       <SellingPoints icon={<MdCheck />} sellingPoints={item.selling_points} />
       <div>
-        <Button
-          to={`/${item.review_link}`}
-          primaryColor={false}
-          gtmClass="casinos-top-list-gtm btn-cta"
-          btnText="Omtale"
-        />
+        <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={item.review_link}>
+          {`${translate(translations, 'read_review', 'Review')}`}
+        </Link>
       </div>
       <div>
-        <Button
-          to={prettyLink}
-          btnText="Spill nå!"
-          gtmClass="casinos-top-list-gtm btn-cta"
-          primaryColor
-          isInternalLink={false}
-        />
+        <OperatorCta operator={item} tracker={tracker} gtmClass="toplist-operator-cta-gtm" />
       </div>
     </div>
   );
@@ -61,11 +61,13 @@ const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
 Row.propTypes = {
   oneliner: PropTypes.string,
   layout: PropTypes.string,
+  tracker: PropTypes.string,
   item: PropTypes.shape({
     name: PropTypes.string,
     logo_url: PropTypes.string,
     selling_points: PropTypes.arrayOf(PropTypes.string),
     review_link: PropTypes.string,
+    rating: PropTypes.string,
     one_liners: PropTypes.shape({
       main: PropTypes.shape({
         one_liner: PropTypes.string,

package/src/helpers/device-detect.js

@@ -14,12 +14,11 @@ export function isMobileDevice() {
   const isIos = () => Boolean(userAgent.match(/iPhone|iPad|iPod/i));
   const isOpera = () => Boolean(userAgent.match(/Opera Mini/i));
   const isWindows = () => Boolean(userAgent.match(/IEMobile/i));
-  const isIos13 = () =>
-    Boolean(
-        platform === 'MacIntel' &&
-        maxTouchPoints &&
-        maxTouchPoints === 5
-    );
+  const isIos13 = () => Boolean(platform === 'MacIntel' && maxTouchPoints && maxTouchPoints === 5);
 
   return Boolean(isAndroid() || isIos() || isOpera() || isWindows() || isIos13());
 }
+
+export function isNativeImageLazyLoadingSupported() {
+  return typeof HTMLImageElement !== 'undefined' && 'loading' in HTMLImageElement.prototype;
+}

package/src/helpers/events.js

@@ -0,0 +1,91 @@
+/* eslint-disable camelcase */
+/* eslint-disable import/prefer-default-export */
+import { zeroPadding } from './schedule';
+
+function isValidDate(d) {
+  return d instanceof Date && !Number.isNaN(d);
+}
+
+export function convertTimeZone(event) {
+  if (!event || !event.date || !event.date.time) {
+    return event;
+  }
+  const timeArr = event.date.time.split(':');
+
+  // ecmascript has month ranges between 0 - 11, that's why we do -1 to month_number
+  const currentTimeZoneDate = new Date(
+    Date.UTC(
+      event.date.year_number,
+      zeroPadding(event.date.month_number - 1, 2),
+      zeroPadding(event.date.day_number, 2),
+      timeArr[0],
+      timeArr[1]
+    )
+  );
+
+  if (!isValidDate(currentTimeZoneDate)) return event;
+
+  const time = `${zeroPadding(currentTimeZoneDate.getHours(), 2)}:${zeroPadding(
+    currentTimeZoneDate.getMinutes(),
+    2
+  )}`;
+
+  // in case the utc is 23:00, but user's timezone can get 00:00 so update the date object.
+  const day_number = zeroPadding(currentTimeZoneDate.getDate(), 2);
+  const month_number = zeroPadding(currentTimeZoneDate.getMonth() + 1, 2);
+  const date = `${day_number}-${month_number}-${zeroPadding(currentTimeZoneDate.getFullYear(), 2)}`;
+
+  const dateAttrs = {
+    date: {
+      ...event.date,
+      time,
+      month_number,
+      day_number,
+      date,
+    },
+  };
+
+  return { ...event, ...dateAttrs };
+}
+
+export function updateAllTimezones(relation) {
+  const relationSchedule = relation?.schedule;
+  const relationFeaturedEvents = relation?.featured_events;
+  const relationShowcasedEvents = relation?.showcased_events;
+
+  // formated timezone schedule
+  const schedule = relationSchedule
+    ? Object.keys(relationSchedule).reduce((acc, dateKey) => {
+        const { tournaments } = relationSchedule[dateKey] || {};
+
+        const formattedTournaments = Object.keys(tournaments).reduce(
+          (tournamentAcc, currentTournamentKey) => {
+            const league = tournaments[currentTournamentKey];
+            const formattedEvents = league.events.map((event) => convertTimeZone(event));
+            tournamentAcc[currentTournamentKey] = { ...league, events: formattedEvents };
+            return tournamentAcc;
+          },
+          {}
+        );
+
+        acc[dateKey] = { ...relation.schedule[dateKey], tournaments: formattedTournaments };
+        return acc;
+      }, {})
+    : {};
+
+  // formated timezone featured events
+  const featured_events = relationFeaturedEvents?.map((event) => convertTimeZone(event)) || [];
+
+  // formated timezone showcased events
+  const showcased_events = relationShowcasedEvents?.map((event) => convertTimeZone(event)) || [];
+
+  // format timezone for relation.event
+  const event = convertTimeZone(relation?.event);
+
+  const updatedObject = { ...relation, schedule, featured_events, showcased_events };
+  if (event) {
+    updatedObject.event = event;
+  }
+
+  return updatedObject;
+}

package/src/helpers/generators.js

@@ -21,17 +21,25 @@ export function generateTrackerLink(operator, trackerType) {
   }
 }
 
-export function generateMetaTitle(metaTitle, translations) {
+export function generateMetaString(metaString, translations, props) {
   const date = new Date();
+  const day = date.getDate();
   const month = months[date.getMonth()];
   const year = date.getFullYear();
+  const regex =
+    /\[MONTH\]|\[YEAR\]|\[currentyear\]|\[sitename\]|\[currentmonth\]|\[title\]|\[currentdate\]/gi;
 
-  return metaTitle.replace(
-    /\[MONTH\]|\[YEAR\]/gi,
+  return metaString.replace(
+    regex,
     (match) =>
       ({
         '[MONTH]': (translations && translations[month]) || month,
         '[YEAR]': year,
+        '[currentdate]': `${(translations && translations[month]) || month} ${day}, ${year}`,
+        '[currentmonth]': (translations && translations[month]) || month,
+        '[currentyear]': year,
+        '[sitename]': (props && props.siteName) || '',
+        '[title]': (props && props.siteTitle) || '',
       }[match])
   );
 }

package/src/helpers/generators.test.js

@@ -1,4 +1,4 @@
-import { generateTrackerLink, generateMetaTitle } from './generators';
+import { generateTrackerLink, generateMetaString } from './generators';
 import { months } from '~constants/common';
 
 describe('Generate Tracker Link Helper', () => {
@@ -17,24 +17,46 @@ describe('Generate Tracker Link Helper', () => {
 });
 
 describe('Generate Meta Title Helper', () => {
-  test('generateMetaTitle main', () => {
-    const metaTitle = generateMetaTitle('meta title [MONTH] [YEAR]');
+  test('generateMetaString uppercase', () => {
+    const metaString = generateMetaString('meta title [MONTH] [YEAR]');
     const date = new Date();
-    expect(metaTitle).not.toContain('[MONTH]');
-    expect(metaTitle).not.toContain('[YEAR]');
-    expect(metaTitle).toContain(date.getFullYear());
-    expect(metaTitle).toContain(months[date.getMonth()]);
+
+    expect(metaString).not.toContain('[MONTH]');
+    expect(metaString).not.toContain('[YEAR]');
+    expect(metaString).toContain(date.getFullYear());
+    expect(metaString).toContain(months[date.getMonth()]);
+  });
+  test('generateMetaString lowercase', () => {
+    const metaString = generateMetaString(
+      'meta title [currentdate] [currentmonth] [currentyear] [sitename] [title]',
+      null,
+      {
+        siteName: 'Site Name',
+        siteTitle: 'Site Title',
+      }
+    );
+    const date = new Date();
+
+    expect(metaString).not.toContain('[currentdate]');
+    expect(metaString).not.toContain('[currentmonth]');
+    expect(metaString).not.toContain('[currentyear]');
+    expect(metaString).not.toContain('[sitename]');
+    expect(metaString).not.toContain('[title]');
+    expect(metaString).toContain(date.getDate());
+    expect(metaString).toContain(months[date.getMonth()]);
+    expect(metaString).toContain(date.getFullYear());
+    expect(metaString).toContain('Site Name');
+    expect(metaString).toContain('Site Title');
   });
-  test('generateMetaTitle translated', () => {
+  test('generateMetaString translated', () => {
     const translateMonths = months.reduce(
       (translated, month) => ({ ...translated, [month]: `translate${month.substring(0, 1)}` }),
       {}
     );
-    const metaTitle = generateMetaTitle('meta title [MONTH] [YEAR]', translateMonths);
+    const metaString = generateMetaString('meta title [MONTH]', translateMonths);
     const date = new Date();
 
-    expect(metaTitle).not.toContain('[MONTH]');
-    expect(metaTitle).not.toContain('[YEAR]');
-    expect(metaTitle).toContain(translateMonths[months[date.getMonth()]]);
+    expect(metaString).not.toContain('[MONTH]');
+    expect(metaString).toContain(translateMonths[months[date.getMonth()]]);
   });
 });

package/src/helpers/processor/sports.js

@@ -6,11 +6,9 @@ import {
   filterEvents,
   findTournaments,
   getSortedEvents,
-  formatEvents,
 } from '../schedule';
 
 export function prepareSportsData(sportsData) {
-  sportsData.events = formatEvents(sportsData.events);
   Object.keys(sportsData.tournaments).forEach((key) => {
     if (sportsData.tournaments[key].events) {
       sportsData.tournaments[key].events = filterEvents(

package/src/helpers/rating.js

@@ -1,3 +1,5 @@
+/* eslint-disable arrow-body-style */
+/* eslint-disable no-unused-expressions */
 export const roundHalf = (num) => {
   return Math.round(num * 2) / 2;
 };

package/src/helpers/schedule.js

@@ -120,39 +120,3 @@ export function filterEvents(tournamentEvents, events) {
 
   return futureEvents;
 }
-
-export function changeEventHour(event, hour = 1) {
-  if (!event || !event.date || !event.date.time) {
-    return event;
-  }
-
-  const timeArr = event.date.time.split(':');
-  timeArr[0] = Number(timeArr[0]) - hour;
-  event.date.time = timeArr.join(':');
-
-  return event;
-}
-
-export function formatEvents(events) {
-  const eventsArr = Object.values(events);
-  const siteName = process.env.GATSBY_SITE_NAME;
-  let prefix = '0';
-
-  switch (siteName) {
-    case 'sefodbold.dk':
-    case 'sesport.dk':
-    case 'watchfooty.co.uk':
-    case 'bekijksport.nl':
-    case 'livestreamsvoetbal.nl':
-      prefix = 1;
-      break;
-    default:
-      prefix = 0;
-  }
-
-  return eventsArr.reduce((acc, current) => {
-    const event = changeEventHour(current, prefix);
-    acc[event.id] = event;
-    return acc;
-  }, {});
-}

package/src/hooks/lazy-image/index.js

@@ -1,39 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
-// import LazyLoad from 'react-lazyload';
 import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
+import { isNativeImageLazyLoadingSupported } from '~helpers/device-detect';
 
-// When to use this component:
-// 1. If you have 1 image to lazyload
-// 2. If you have images for different breakpoints and want the browser to decide when to serve the images based on the device, bandwidth, etc.
 export default function LazyImage({
   height,
   width,
-  // offset = 200,
   style = {},
   className,
   src = '#',
-  // srcSet = '',
   alt = '',
-  // sizes,
-  // defaultImg,
-  // once = false,
+  defaultImg,
+  loading = 'lazy',
 }) {
-  // const [errorImage, setErrorImage] = useState(false);
+  const [errorImage, setErrorImage] = useState(false);
 
-  // if ((defaultImg && !src) || errorImage === true) {
-  //   return defaultImg;
-  // }
+  if ((defaultImg && !src) || errorImage === true) {
+    return defaultImg;
+  }
 
-  return (
-    <>
-      {/* <LazyLoad
-        height={`${height}px`}
-        width={`${width}px`}
-        offset={offset}
-        debounce={0}
-        once={once}
-      >
+  if (!isNativeImageLazyLoadingSupported()) {
+    const LazyLoad = loadable(() => import(`react-lazyload`));
+    return (
+      <LazyLoad height={`${height}px`} width={`${width}px`} debounce={0}>
         <img
           src={src}
           className={className}
@@ -41,36 +31,32 @@ export default function LazyImage({
           width={width}
           alt={alt}
           style={style}
-          srcSet={srcSet}
-          sizes={sizes}
-          onError={() => setErrorImage(true)}
         />
-      </LazyLoad> */}
-      {/* <noscript> */}
-      <img
-        src={src}
-        loading="lazy"
-        className={className}
-        height={height}
-        width={width}
-        alt={alt}
-        style={style}
-      />
-      {/* </noscript> */}
-    </>
+      </LazyLoad>
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      loading={loading}
+      className={className}
+      height={height}
+      width={width}
+      alt={alt}
+      style={style}
+      onError={() => setErrorImage(true)}
+    />
   );
 }
 
 LazyImage.propTypes = {
   width: PropTypes.number,
   height: PropTypes.number,
-  // offset: PropTypes.number,
   style: PropTypes.shape({}),
   className: PropTypes.string,
   src: PropTypes.string,
   alt: PropTypes.string,
-  // sizes: PropTypes.string,
-  // srcSet: PropTypes.string,
-  // defaultImg: PropTypes.element,
-  // once: PropTypes.bool,
+  defaultImg: PropTypes.element,
+  loading: PropTypes.string,
 };

package/src/hooks/tabs/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { forceCheck } from 'react-lazyload';
-import TabList from './tab/tab-list';
+import loadable from '@loadable/component';
 import styles from './tabs.module.scss';
 
 const Tabs = ({
@@ -19,6 +19,8 @@ const Tabs = ({
     showAll ? showAllTabId : `${children[0].props.label}_0`
   );
 
+  const TabList = showTabs ? loadable(() => import('./tab/tab-list')) : null;
+
   const tabHeaderClass = `${styles.tabsHeader} ${!HeaderComp && styles.tabsOnly} ${
     styles[headerClass]
   } ${tabsAlign === 'right' && styles.invertOrder}`;
@@ -31,7 +33,7 @@ const Tabs = ({
   return (
     <>
       <div className={tabHeaderClass}>
-        {showTabs && (
+        {TabList && (
           <TabList
             onClick={onClickTabItem}
             items={children}

package/src/hooks/tabs/tabs.test.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import Tabs from '.';
 
 describe('Tabs Component', () => {
-  test('render tabs', () => {
+  test('render tabs', async () => {
     const { container, getByText } = render(
       <Tabs tabsAlign="right" HeaderComp={<div className="header">my header</div>}>
         <div label="one" key={1}>
@@ -19,15 +19,18 @@ describe('Tabs Component', () => {
         </div>
       </Tabs>
     );
-    expect(container.querySelectorAll('.tabListItem')).toHaveLength(2);
-    // tabsAlign="right"
-    expect(container.querySelectorAll('div.tabsHeader.invertOrder')).toHaveLength(1);
-    // // HeaderComp
-    expect(getByText('my header')).toBeTruthy();
-    expect(getByText('1111111111111')).toBeTruthy();
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('.tabListItem')).toHaveLength(2);
+      // tabsAlign="right"
+      expect(container.querySelectorAll('div.tabsHeader.invertOrder')).toHaveLength(1);
+      // // HeaderComp
+      expect(getByText('my header')).toBeTruthy();
+      expect(getByText('1111111111111')).toBeTruthy();
+    });
   });
 
-  test('show all', () => {
+  test('show all', async () => {
     const { container, getByText } = render(
       <Tabs
         tabsAlign="left"
@@ -45,12 +48,14 @@ describe('Tabs Component', () => {
         </div>
       </Tabs>
     );
-    expect(container.querySelectorAll('.tabListItem')).toHaveLength(3);
-    expect(container.querySelectorAll('div.tabsHeader')).toHaveLength(1);
-    expect(getByText('1111111111111222222233333333')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(container.querySelectorAll('.tabListItem')).toHaveLength(3);
+      expect(container.querySelectorAll('div.tabsHeader')).toHaveLength(1);
+      expect(getByText('1111111111111222222233333333')).toBeInTheDocument();
+    });
   });
 
-  test('switch tabs', () => {
+  test('switch tabs', async () => {
     const { getByText } = render(
       <Tabs tabsAlign="right" HeaderComp={<div className="header">my header</div>}>
         <div label="one" key={1}>
@@ -64,11 +69,23 @@ describe('Tabs Component', () => {
         </div>
       </Tabs>
     );
+
+    await waitFor(() => {
+      expect(getByText('two')).toBeTruthy();
+    });
+
     fireEvent.click(getByText('two'));
     expect(getByText('2222222')).toBeTruthy();
-    fireEvent.click(getByText('three'));
+
+    await waitFor(() => {
+      fireEvent.click(getByText('three'));
+    });
+
     expect(getByText('33333333')).toBeTruthy();
-    fireEvent.click(getByText('one'));
+
+    await waitFor(() => {
+      fireEvent.click(getByText('one'));
+    });
     expect(getByText('1111111111111')).toBeTruthy();
   });
 });

package/src/styles/utils/_mixins.scss

@@ -84,3 +84,45 @@
     background: linear-gradient(to bottom, $color2 0, $color1 100%);
   }
 }
+
+@mixin star($border-color: #fba62f, $fill-color: #fba62f) {
+  line-height: 2rem;
+  width: 16px;
+  font-weight: normal;
+  display: inline-block;
+  color: $fill-color;
+  font-size: 15px;
+  position: relative;
+  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;
+
+  &:last-child {
+    margin-right: 0;
+  }
+  &:before {
+    content: '\2605';
+  }
+}
+
+
+@mixin half-star($border-color: #fba62f, $half-empty-color: #fba62f , $half-full-color: white) {
+  line-height: 2rem;
+  width: 16px;
+  font-weight: normal;
+  display: inline-block;
+  color: $half-full-color;
+  font-size: 15px;
+  position: relative;
+  &:before {
+    content: '\2605';
+  }
+  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;
+  &:after {
+    content: '\2605';
+    color: $half-empty-color;
+    position: absolute;
+    width: 7px;
+    overflow: hidden;
+    bottom: 0;
+    left: 0;
+  }
+}

package/src/styles/utils/variables/_main.scss

@@ -9,6 +9,13 @@
   --secondary-text-color: var(--color-4);
   --heading-base-color: var(--color-12);
   --text-link-color: var(--color-13);
+  --full-star-fill-color: #fba62f;  
+  --full-star-border-color: #fba62f;
+  --halfFull-star-fill-color: #fba62f;
+  --halfEmpty-star-fill-color: white;
+  --half-star-border-color: #fba62f;
+  --empty-star-fill-color: white;
+  --empty-star-border-color: grey;
 
   // Font
   --main-font: Nunito;
@@ -51,6 +58,7 @@
   --modal-background-color: white;
 
   --star-rating-color: orange;
+  --selling-point-icon-color: #00889e;
 
   --scroll-to-top-background-color: var(--color-1);