gatsby-core-theme 18.0.2 → 18.0.4

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## [18.0.4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.3...v18.0.4) (2023-01-25)
+
+
+### Bug Fixes
+
+* update reviewLink and default-row ([0ff2327](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0ff232795cfa6d11c89d32bdcf5b744a88cf1f5b))
+
+
+* Merge branch 'tm-3138-changing-operator-review-text-on-modules' into 'master' ([323ded9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/323ded9c91ad98cb768f28277b7d11382aa00e9b))
+
+## [18.0.3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.2...v18.0.3) (2023-01-24)
+
+
+### Bug Fixes
+
+* add new review component and tests ([5740902](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5740902d6efff14e537980fa534f1124b578f8a4))
+* default value ([f6cc6bc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f6cc6bcf584c9e82a9a90d5c17967f7a9a6a67e6))
+* getters test ([080bfbf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/080bfbf6942b1f54674101832e7e86bda5d7e77a))
+* one-star ([f65156f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f65156f6891687a8ce401bee6e7a885dd4cea5c7))
+* one-star ([ae348f2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ae348f2886054f1708275b83b0b0c92fc6432b40))
+* operator header core ([020ab5d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/020ab5d850a40eb46899676ceff85ed18607282b))
+* remove one-star css ([01beecf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/01beecfd20df4842065efc26fdb76203afe66a61))
+* review link in toplist ([5d76d5e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5d76d5ee80c5664b5942b96d4e26d89d1710a8e2))
+* typo ([e4e4dae](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e4e4dae91590a90b3af93d86fdbce6f15c3383ec))
+* update name of reviewLink component and update the if with include ([31af320](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/31af3202d2f7f04c068601c81a2c69e683f1ee78))
+
+
+* Merge branch 'tm-3138-changing-operator-review-text-on-modules' into 'master' ([423c965](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/423c96599ff4834fc26cfef1969decacf8eb8eb0))
+* Merge branch 'tm-3253-operator-header' into 'master' ([5f3da13](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5f3da135c36b4e39e08f4856730111fa5aaa990b))
+
 ## [18.0.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.1...v18.0.2) (2023-01-17)
 
 

package/package.json

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

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

@@ -17,6 +17,7 @@ export default function OperatorCta({
   gtmClass = '',
   tertiary = false,
   pageTemplate,
+  icon,
 }) {
   const { translations } = useContext(Context) || {};
   const status = operator?.status;
@@ -51,6 +52,7 @@ export default function OperatorCta({
         isInternalLink={false}
         gtmClass={`${gtmClass} operator-cta-gtm btn-cta`}
         tertiary={tertiary}
+        icon={icon}
       />
     );
   };
@@ -67,4 +69,5 @@ OperatorCta.propTypes = {
   playText: PropTypes.string,
   closedCasinoText: PropTypes.string,
   gtmClass: PropTypes.string,
+  icon: PropTypes.func,
 };

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

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import Link from 'gatsby-core-theme/src/hooks/link';
+
+const ReviewLink = ({ template, itemName, reviewPath, className }) => {
+  let isBonusTemplate = false;
+  const { translations } = useContext(Context) || {};
+
+  if (['free_bonuses', 'bonus_pages', 'casino_bonus'].includes(template)) {
+    isBonusTemplate = true;
+  }
+
+  return (
+    <Link className={className} to={reviewPath}>{`${
+      isBonusTemplate
+        ? translate(translations, 'bonus', '[operator_name] Bonus').replace(
+            '[operator_name]',
+            itemName
+          )
+        : translate(translations, 'read_review', '[operator_name] Review').replace(
+            '[operator_name]',
+            itemName
+          )
+    }`}</Link>
+  );
+};
+
+ReviewLink.propTypes = {
+  template: PropTypes.string,
+  itemName: PropTypes.string,
+  reviewPath: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export default ReviewLink;

package/src/components/atoms/review-link/reviewLink.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import ReviewLink from '.';
+
+describe('ReviewLink', () => {
+  it('renders the correct text for the "bonus" template', () => {
+    const { getByText } = render(
+      <ReviewLink template="bonus_pages" itemName="Super Slot" reviewPath="/review" />
+    );
+
+    expect(getByText('Super Slot Bonus')).toBeInTheDocument();
+  });
+
+  it('renders the correct text for the "review" template', () => {
+    const { getByText } = render(
+      <ReviewLink template="review_pages" itemName="Super Slot" reviewPath="/review" />
+    );
+
+    expect(getByText('Super Slot Review')).toBeInTheDocument();
+  });
+
+  it('renders the correct link path', () => {
+    const { container } = render(
+      <ReviewLink template="review_pages" itemName="Super Slot" reviewPath="/review" />
+    );
+
+    expect(container.querySelector('a').getAttribute('href')).toBe('/review');
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

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

@@ -6,14 +6,15 @@ import { translate } from '~helpers/getters';
 
 import styles from './one-star.module.scss';
 
-const OneStar = ({ numOfStars, rating, active = true, showLabel = false }) => {
+const OneStar = ({ rating, numOfStars = 5, active = true, showLabel = false }) => {
   const { translations } = useContext(Context) || {};
 
   return (
     <div className={`${styles.starRatingContainer} ${!active && styles.inactive}`}>
       {showLabel && translate(translations, 'rating', 'Rating')}
       <span className={styles.fullStar} />
-      {`${getRating(rating)}/${numOfStars}`}
+      {`${getRating(rating)}/`}
+      <span>{numOfStars}</span>
     </div>
   );
 };

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

@@ -12,7 +12,7 @@
   font-size: 1.3rem;
   margin: 0 0.33rem;
   line-height: 2.1rem;
-  
+
   &.inactive {
     .fullStar {
       @include star(var(--empty-star-border-color), var(--empty-star-border-color), unset, 2.1rem);

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

@@ -9,7 +9,8 @@ describe('OneStar Component', () => {
     const { getByText } = render(<OneStar showLabel numOfStars={5} rating={3} />);
 
     expect(getByText('Rating', { exact: false })).toBeTruthy();
-    expect(getByText('3/5', { exact: false })).toBeTruthy();
+    expect(getByText('3/', { exact: false })).toBeTruthy();
+    expect(getByText('5', { exact: false })).toBeTruthy();
   });
 });
 

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

@@ -1,14 +1,13 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Bonus from '~atoms/bonus';
-import { Context } from '~context/MainProvider';
 import SellingPoints from '~atoms/selling-points';
 import StarRating from '~molecules/star-rating/one-star';
-import Link from '~hooks/link';
+import ReviewLink from '../../../atoms/review-link';
 import OperatorCta from '~atoms/operator-cta';
-import { prettyTracker, imagePrettyUrl, translate, getAltText } from '~helpers/getters';
+import { prettyTracker, imagePrettyUrl, getAltText } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 
 import styles from './default-row.module.scss';
@@ -25,7 +24,7 @@ const Row = ({
 }) => {
   const prettyLink = prettyTracker(item, 'main', false, pageTemplate);
   const itemRating = item.rating;
-  const { translations } = useContext(Context) || {};
+  const reviewPath = item.review_link ? `/${item.review_link}` : item.path || '/';
 
   const imageObject = item?.standardised_logo_url_object || item?.logo_url_object;
 
@@ -57,7 +56,6 @@ const Row = ({
           width={100}
           height={100}
         />
-        {item.name}
       </a>
       <a
         href={prettyLink}
@@ -69,11 +67,12 @@ const Row = ({
       </a>
       <StarRating numOfStars={5} rating={itemRating} showLabel />
       <SellingPoints sellingPoints={item.selling_points} />
-      <div>
-        <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={item.review_link}>
-          {`${translate(translations, 'read_review', 'Review')}`}
-        </Link>
-      </div>
+      <ReviewLink
+        className={`${styles.reviewLink}  toplist-variant-one-gtm`}
+        template={pageTemplate}
+        itemName={item.name}
+        reviewPath={reviewPath}
+      />
       <div>
         <OperatorCta
           operator={item}

package/src/helpers/getters.js

@@ -391,3 +391,9 @@ export const getRoundMinutes = (time) => {
 export function getAltText(imageObject, defaultAlt = 'missing alt') {
   return imageObject && imageObject.alt ? imageObject.alt : defaultAlt;
 }
+
+export function getObjectValue(obj, path) {
+  if (!path) return obj;
+  const properties = path.split('.');
+  return getObjectValue(obj[properties.shift()], properties.join('.'));
+}

package/src/helpers/getters.test.js

@@ -302,4 +302,19 @@ describe('Getters Helper', () => {
     const altText = Getters.getAltText(null, 'default');
     expect(altText).toEqual('default');
   });
+
+  test('getObjectvalue recursive function to get value', () => {
+    const getObjValue = Getters.getObjectValue({ name: 'test' }, 'name');
+    expect(getObjValue).toEqual('test');
+  });
+
+  test('getObjectvalue recursive function to get 2 times nested value', () => {
+    const getObjValue = Getters.getObjectValue({ test: { test2: 'test3' } }, 'test.test2');
+    expect(getObjValue).toEqual('test3');
+  });
+
+  test('getObjectvalue recursive function no path it will return the object', () => {
+    const getObjValue = Getters.getObjectValue({ name: 'test' });
+    expect(getObjValue).toEqual({ name: 'test' });
+  });
 });