gatsby-core-theme 34.0.0 → 34.0.2

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [34.0.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v34.0.1...v34.0.2) (2024-07-10)
+
+
+### Bug Fixes
+
+* placeholders fix ([6808074](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/68080746b4e378ada45bb8139de2ecbc3db9aa29))
+
+## [34.0.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v34.0.0...v34.0.1) (2024-07-10)
+
+
+### Bug Fixes
+
+* cards v2 filtering for multi market ([6953c0e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6953c0e45d45a2000f2ec7c92af727b22a3bdbd4))
+* fixed conflict ([497972a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/497972ac3322d67f914103e8c6e96a1fda288572))
+* general stuff ([0aa6c96](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0aa6c9646188760b8c64db3b33161ed9e95cbe83))
+* more general fixes ([72c71d9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/72c71d9ea448875e25e73999084218fda1bf59af))
+* storybook ([330df09](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/330df09528ea592bdd74962e721936ececf4c88f))
+* storybook ([d796b26](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d796b26ccdaadee0211295919f3e6dc905583b9e))
+* tests ([0dc8812](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0dc88127cfdf4f05ff5da117be271621aca42741))
+* translations ([171ebb6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/171ebb61f74ab2d81ebe13c123a7a8749fca17ae))
+
+
+* Merge branch 'tm-4319-general-stuff' into 'master' ([d09c215](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d09c215d595953fce515363e4d7fc8533f6df869))
+* Merge branch 'tm-4490-cards-v2-filtering-multi-market' into 'master' ([3946714](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/394671407b8543c0ed4297fc40b1329b75b8fd4b))
+
 # [34.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v33.1.13...v34.0.0) (2024-07-09)
 
 

package/package.json

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

package/src/components/atoms/header-operator-bannner/header-operator-banner.test.js

@@ -0,0 +1,64 @@
+/* eslint-disable no-multi-assign */
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import getOperatorData from '../../../../tests/factories/relations/operator.factory';
+import OperatorBannerHeader from '.';
+
+describe('Operator Header Banner ', () => {
+  test('Status Active', () => {
+    const { container, getByText } = render(
+      <OperatorBannerHeader operator={getOperatorData().relation} />
+    );
+    expect(getByText('Welcome Bonus')).toBeTruthy();
+    expect(getByText('100% Bonus')).toBeTruthy();
+    expect(getByText('+ Big Promotions')).toBeTruthy();
+    expect(container.querySelectorAll('span')).toHaveLength(2);
+    expect(container.querySelectorAll('a')).toHaveLength(2);
+  });
+
+  test('Status coming_soon', () => {
+    const { getByText } = render(
+      <OperatorBannerHeader operator={getOperatorData('coming_soon').relation} />
+    );
+    expect(getByText('coming soon')).toBeTruthy();
+  });
+
+  test('Status inactive', () => {
+    const { getByText } = render(
+      <OperatorBannerHeader operator={getOperatorData('inactive').relation} />
+    );
+    expect(getByText('inactive')).toBeTruthy();
+  });
+
+  test('Status not_recommended', () => {
+    const { getByText } = render(
+      <OperatorBannerHeader operator={getOperatorData('not_recommended').relation} />
+    );
+    expect(getByText('Welcome Bonus')).toBeTruthy();
+  });
+
+  test('Not having affiliate link', () => {
+    const { container } = render(
+      <OperatorBannerHeader
+        operator={{
+          name: '',
+          status: 'active',
+          links: {
+            main: '',
+          },
+          one_liners: {
+            main: {
+              one_liner: '100% Bonus + Big Promotions',
+            },
+          },
+        }}
+      />
+    );
+    expect(container.querySelectorAll('div')).toHaveLength(0);
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/components/atoms/header-operator-bannner/header-operator-bannner.module.scss

@@ -0,0 +1,156 @@
+.operatorBanner {
+  display: grid;
+  gap: 0.8rem;
+  align-items: center;
+  grid-template-columns: 0.1fr 1fr;
+  border-radius: 8px;
+  background: #1c1a28;
+  border: 1px solid #e9e9e9;
+  padding: 0.8rem;
+
+  > a {
+    justify-self: end;
+    align-self: center;
+
+    @include max(mobile) {
+      padding: 0.8rem 2.1rem;
+      font-size: 14px;
+      line-height: 18px;
+      border-radius: 8px;
+    }
+  }
+
+  > img {
+    width: 4rem;
+    height: 4rem;
+    min-width: 4rem;
+    border-radius: 8px;
+    background-color: white;
+    border: 1px solid #6b6a72;
+    flex: none;
+
+    @include min(tablet) {
+      min-width: 6.4rem;
+      width: 6.4rem;
+      height: 6.4rem;
+    }
+  }
+
+  @include min(tablet) {
+    gap: 1.6rem;
+    border-radius: 16px;
+    padding: 1.6rem 2.4rem;
+    grid-template-columns: 0.1fr 2fr;
+  }
+
+  > div {
+    max-width: 100%;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+
+    > div {
+      flex-direction: row;
+      gap: 1.6rem;
+
+      > a:first-child {
+        display: block;
+
+        > p {
+          display: none;
+          text-align: left;
+          @include min(tablet) {
+            display: block;
+            font-weight: 700;
+            font-size: 16px;
+            line-height: 24px;
+            margin-bottom: 0.4rem;
+            text-transform: capitalize;
+            color: #5ce482;
+            text-transform: uppercase;
+          }
+        }
+
+        > span {
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 20px;
+          color: white;
+          padding-right: 0rem;
+          text-align: left;
+
+          @include min(tablet) {
+            font-size: 16px;
+            line-height: 27px;
+          }
+        }
+      }
+
+      > a:last-child {
+        margin-top: 0;
+        width: 30%;
+
+        > svg {
+          display: none;
+
+          @include min(tablet) {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}
+
+.bonus {
+  display: flex;
+
+  > div {
+    > span {
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 20px;
+      color: white;
+      padding-right: 0rem;
+
+      @include min(tablet) {
+        font-size: 16px;
+        line-height: 27px;
+      }
+    }
+  }
+
+  @include min(tablet) {
+    flex-direction: column;
+  }
+}
+
+.bonusTitle {
+  display: none;
+
+  @include min(tablet) {
+    display: block;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 0.4rem;
+    text-transform: capitalize;
+    color: #5ce482;
+    text-transform: uppercase;
+  }
+}
+
+.coming_soon,
+.inactive,
+.not_recommended {
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 700;
+  color: #ffffff;
+  text-transform: capitalize;
+
+  @include min(tablet) {
+    font-size: 20px;
+    line-height: 30px;
+  }
+}

package/src/components/atoms/header-operator-bannner/index.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import LazyImage from '~hooks/lazy-image';
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import Bonus from '~molecules/bonus-box/template-three';
+import { getAltText, imagePrettyUrl } from '~helpers/getters';
+
+import styles from './header-operator-bannner.module.scss';
+
+const HeaderOperatorBaner = ({
+  operator,
+  logo,
+  buttonType = 'primary',
+  template,
+  module = 'header_operator',
+  width = '64',
+  height = '64',
+}) => {
+  let main;
+
+  if (['coming_soon', 'inactive'].includes(operator?.status)) {
+    main = (
+      <p className={styles[operator?.status] || ''}>
+        {useTranslate(operator?.status, operator?.status.replace('_', ' '))}
+      </p>
+    );
+  } else if (operator?.status === 'active' || operator?.status === 'not_recommended') {
+    main = (
+      <>
+        <Bonus module={module} ctaBtn item={operator} tracker="main" buttonType={buttonType} />
+      </>
+    );
+  }
+
+  const trackerLinkActive = () => {
+    if (!operator || !operator?.links) {
+      return false;
+    }
+
+    return operator?.links[template] || operator?.links?.main;
+  };
+
+  return (
+    trackerLinkActive() && (
+      <div className={`${styles.operatorBanner}`}>
+        {logo?.filename && (
+          <LazyImage
+            loading="eager"
+            src={imagePrettyUrl(logo?.filename, width, height)}
+            width={width}
+            height={height}
+            alt={getAltText(logo, operator?.name)}
+          />
+        )}
+        {main}
+      </div>
+    )
+  );
+};
+
+HeaderOperatorBaner.propTypes = {
+  operator: PropTypes.shape({
+    name: PropTypes.string,
+    type: PropTypes.string,
+    template: PropTypes.string,
+    links: PropTypes.shape({
+      main: PropTypes.string,
+    }),
+    status: PropTypes.string,
+  }),
+  logo: PropTypes.shape({
+    filename: PropTypes.string,
+  }),
+  template: PropTypes.string,
+  buttonType: PropTypes.string,
+  module: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+};
+
+export default HeaderOperatorBaner;

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

@@ -0,0 +1,91 @@
+/* eslint-disable camelcase */
+/* eslint-disable no-nested-ternary */
+import React from 'react';
+import PropTypes from 'prop-types';
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import { getObjectValue } from 'gatsby-core-theme/src/helpers/getters';
+import keygen from 'gatsby-core-theme/src/helpers/keygen';
+import { operatorRatings } from '../../../constants/ratings-constant';
+
+import styles from './ratings.module.scss';
+
+export default function Ratings({ item, type, numOfStars = 5, currency = '€' }) {
+  const ratings = operatorRatings[type] || [];
+  const rangeText = { 0: 'Low', 1: 'Medium', 2: 'High' };
+
+  // (item?.bonus || item) for the games we don't have ratings in market
+  const ratingsData = operatorRatings.ratingProperties.some((prop) => item[prop])
+    ? item
+    : item?.bonus || item;
+
+  if (!ratings.length) {
+    return null;
+  }
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    <ul className={`${styles?.ratingList || ''}`} tabIndex={0}>
+      {ratings?.map((rating) => {
+        const { fieldValue, translationKey, fieldLabel, componentToUse } = rating || {};
+        let valueDiplayed;
+        const value = getObjectValue(ratingsData, fieldValue);
+        const component = componentToUse ? componentToUse(numOfStars, value, currency) : false;
+
+        if (component && value) {
+          valueDiplayed = component || '-';
+        } else if (fieldValue.includes('volatility')) {
+          valueDiplayed = rangeText[getObjectValue(ratingsData, fieldValue)] || '-';
+        } else {
+          valueDiplayed = value || '-';
+        }
+
+        if (['coming_soon', 'inactive'].includes(item?.status)) {
+          valueDiplayed = 'TBA';
+        }
+
+        return (
+          <li
+            key={keygen()}
+            className={`${styles?.item || ''} ${
+              rating?.showOnlyMobile ? styles?.showOnlyMobile || '' : ''
+            }`}
+          >
+            <p className={styles?.label || ''}>{useTranslate(translationKey, fieldLabel)}</p>
+
+            {valueDiplayed === 'TBA' ? (
+              <p className={`${styles?.value || ''} ${styles?.tbaValue}`}>
+                {useTranslate('tba', 'TBA')}
+              </p>
+            ) : (
+              <>
+                {valueDiplayed}
+                {fieldValue === 'rtp' && '%'}
+              </>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+Ratings.propTypes = {
+  item: PropTypes.shape({
+    name: PropTypes.string,
+    bonus: PropTypes.shape({}),
+    rating: PropTypes.string,
+    status: PropTypes.string,
+    rating_bonuses: PropTypes.string,
+    rating_casino: PropTypes.string,
+    rating_customer: PropTypes.string,
+    rating_games: PropTypes.string,
+    rating_payout: PropTypes.string,
+    first_rating: PropTypes.string,
+    second_rating: PropTypes.string,
+    third_rating: PropTypes.string,
+    fourth_rating: PropTypes.string,
+  }),
+  type: PropTypes.string,
+  numOfStars: PropTypes.string,
+  currency: PropTypes.string,
+};

package/src/components/atoms/ratings/rating.test.js

@@ -0,0 +1,55 @@
+/* eslint-disable no-multi-assign */
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Ratings from '.';
+
+describe('Rating component', () => {
+  const page = () => ({
+    name: 'Rizk Casino',
+    logo_url_object: {
+      filename: 'rizk',
+      alt: 'rizk-logo',
+    },
+    rating: '4.5',
+    status: 'active',
+    first_rating: '3',
+    second_rating: '',
+    third_rating: '3',
+    fourth_rating: true,
+    volatility: 1,
+    bonus: {
+      rating: '4',
+      rating_bonuses: '',
+      rating_casino: '3.5',
+      rating_customer: '3.5',
+      rating_games: '',
+      rating_payout: '4.5',
+    },
+  });
+
+  test('Rating', () => {
+    const { container } = render(<Ratings item={page()} type="operator" />);
+    expect(container.querySelectorAll('ul')).toHaveLength(1);
+    expect(container.querySelectorAll('li')).toHaveLength(6);
+  });
+
+  test('Rating with diferent data text', () => {
+    const { container, getByText, getAllByText } = render(<Ratings item={page()} type="game" />);
+    expect(container.querySelectorAll('ul')).toHaveLength(1);
+    expect(container.querySelectorAll('li')).toHaveLength(5);
+
+    expect(getAllByText(3)).toHaveLength(2);
+    expect(getByText('Medium')).toBeTruthy();
+  });
+
+  test('Rating no type', () => {
+    const { container } = render(<Ratings item={page()} type="" />);
+    expect(container.querySelectorAll('ul')).toHaveLength(0);
+    expect(container.querySelectorAll('li')).toHaveLength(0);
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/components/atoms/ratings/ratings.module.scss

@@ -0,0 +1,116 @@
+.ratingList {
+  @include flex-direction(row);
+  overflow-x: scroll;
+  gap: 0.8rem;
+
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 100px;
+    background: #929292;
+  }
+
+  @include min(tablet) {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-weight: 700;
+  font-size: 1.4rem;
+  background-color: #fbfbfb;
+  border: 1px solid #e9e9e9;
+  border-radius: 8px;
+  padding: 16px 8px;
+  min-height: 9.6rem;
+  min-width: 10.4rem;
+
+  @include min(tablet) {
+    margin-bottom: inherit;
+    width: -webkit-fill-available;
+  }
+
+  // Star rating
+  >div {
+    display: inline-flex;
+    align-items: center;
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 28px;
+    border: none;
+    background-color: #fbfbfb;
+
+    >svg {
+      width: 18.35px;
+      height: 17.49px;
+      color: var(--rating-star-color, #ffdb20);
+      margin-right: 5.82px;
+    }
+
+    >span:last-child {
+      font-size: 16px;
+      line-height: 27px;
+      font-weight: 700;
+
+      @include min(tablet) {
+        font-weight: 800;
+        font-size: 18px;
+        line-height: 28px;
+      }
+    }
+  }
+}
+
+.label {
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 20px;
+  color: #1c1a28;
+  padding-bottom: 0.8rem;
+  text-align: center;
+
+  @include min(tablet) {
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.value {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 28px;
+  color: #1c1a28;
+  display: flex;
+
+  >svg {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  @include min(tablet) {
+    font-weight: 800;
+  }
+}
+
+.tbaValue {
+  color: #33313d;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.showOnlyMobile {
+  @include min(tablet) {
+    display: none;
+  }
+}

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

@@ -66,12 +66,7 @@ export default {
 };
 
 const Template = (args) => (
-  <MainProvider
-    value={{
-      bannerIsActive: true,
-      cookieAccepted: false,
-    }}
-  >
+  <div>
     <main>
       <div>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
@@ -154,7 +149,7 @@ const Template = (args) => (
       </div>
     </main>
     <Bonus {...args} />
-  </MainProvider>
+  </div>
 );
 
 export const Default = Template.bind({});

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

@@ -46,15 +46,7 @@ export default {
   },
 };
 
-const Template = (args) => (
-  <MainProvider
-    value={{
-      translations: args?.translations,
-    }}
-  >
-    <BonusBox {...args} />
-  </MainProvider>
-);
+const Template = (args) => <BonusBox {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/molecules/footer/variables/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Image from '~hooks/gatsby-img';
+import PropTypes from 'prop-types';
+
+const VariableComponent = ({ className }) => <div className={className || ''}></div>;
+
+export default VariableComponent;
+
+VariableComponent.propTypes = {
+  className: PropTypes.string,
+};

package/src/components/molecules/footer/variants/template-three/template-three.stories.js

@@ -158,18 +158,6 @@ export default {
   },
 };
 
-const Template = (args) => (
-  <MainProvider
-    value={{
-      bannerIsActive: false,
-      cookieAccepted: true,
-      translations: {
-        online_casino: 'Online Casino',
-      },
-    }}
-  >
-    <TemplateThree {...args} />
-  </MainProvider>
-);
+const Template = (args) => <TemplateThree {...args} />;
 export const Default = Template.bind({});
 Default.args = {};

package/src/components/molecules/footer/variants/template-two/index.js

@@ -6,6 +6,7 @@ import { copyrightText } from '../../../../../helpers/getters';
 import Disclaimer from '../../../../atoms/disclaimer';
 import FooterHotline from '../../../../atoms/footer/hotline';
 import FooterLicense from '../../../../atoms/footer/license';
+import VariableComponent from '../../variables';
 import styles from './template-two.module.scss';
 
 const TemplateTwo = ({
@@ -28,6 +29,7 @@ const TemplateTwo = ({
   dmcaHeight,
   securityIcon,
   copyrightCustomText,
+  hasVariableComponent,
 }) => {
   if (footerMenu !== null && footerMenu.children.length) {
     footerMenu.children.splice(footerMenuLimit);
@@ -103,6 +105,8 @@ const TemplateTwo = ({
             </div>
           )}
         </div>
+
+        {hasVariableComponent && <VariableComponent />}
       </div>
     </footer>
   );