gatsby-core-theme 25.0.4 → 25.0.6

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [25.0.6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v25.0.5...v25.0.6) (2023-07-20)
+
+
+### Bug Fixes
+
+* add translation ([5187ffe](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5187ffe4a5957bac83ccae0b07e5d8f98b50dbd8))
+* add translation key ([ca082ac](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ca082acd76077938a5b3592965ad180468061cef))
+* bonuse module ([fd59a48](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fd59a48dc6f3e3191fe7d0b988d8d7c8303539d9))
+* tests and storybook ([b3bc50d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b3bc50dd7dc902908942a042ff8c7c9e8e53d808))
+
+
+* Merge branch 'tm-3396-bonuss' into 'master' ([8a53734](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8a53734f5e5ac53cf3149932b02b26bf3b6c9bb3))
+
+## [25.0.5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v25.0.4...v25.0.5) (2023-07-19)
+
+
+### Bug Fixes
+
+* hreflangs ([1720573](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/17205731de2f406d56d66b80b6140d0c1c499eaf))
+
 ## [25.0.4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v25.0.3...v25.0.4) (2023-07-17)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "25.0.4",
+  "version": "25.0.6",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "directories": {

package/src/components/molecules/bonus/template-one/bonus.module.scss

@@ -0,0 +1,212 @@
+.container {
+  @include flex-direction(column);
+  @include flex-align(center, center);
+  border-radius: 16px;
+  background: var(--operator-banner-backgorund, #f4f4f4);
+  border-radius: 1.6rem;
+  padding: 1.6rem;
+  gap: 1.6rem;
+
+  > div {
+    width: 100%;
+    @include flex-direction(column);
+    gap: 1.6rem;
+
+    img {
+      min-width: 7.2rem;
+      width: 7.2rem;
+      height: 7.2rem;
+      border-radius: 0.8rem;
+    }
+  }
+
+  > a {
+    width: 100%;
+    border-radius: 10rem;
+    font-size: 1.4rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.2rem;
+    > svg {
+      width: 1.4rem;
+    }
+  }
+}
+.logo {
+  cursor: pointer;
+  height: 7.2rem;
+  @include flex-direction(row);
+  gap: 16px;
+}
+
+.details {
+  @include flex-direction(column);
+  @include flex-align(flex-start, center);
+  > span:first-of-type {
+    color: #1b1b1c;
+    font-size: 1.6rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.7rem;
+    margin-bottom: 0.8rem;
+  }
+  > div {
+    border-radius: 100px;
+    background: #fff;
+    border: 0px;
+    margin: 0;
+    height: 2.9rem;
+    width: 7.6rem;
+    @include flex-direction(row);
+    @include flex-align(center, center);
+    > span:first-of-type {
+      margin-right: 0.4rem;
+    }
+    > span:last-of-type {
+      font-size: 11px;
+      margin-top: 0.2rem;
+    }
+  }
+}
+
+.bonus {
+  border-radius: 0.8rem;
+  height: 100%;
+  background: var(--operator-banner-backgorund-bonus, #fff);
+  min-height: 6.4rem;
+  width: 100%;
+  @include flex-direction(column);
+  @include flex-align(center, center);
+  border: 1px solid #fff;
+  > div {
+    background-color: #f4f4f4;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0 auto;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    color: #3c3c40;
+    text-align: center;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.4rem;
+    padding: 0.8rem 2rem;
+  }
+  span:first-of-type {
+    color: var(--operator-banner-first-bonus, #1b1b1c);
+    text-align: center;
+    font-size: 1.6rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.7rem;
+    margin-top: 0.8rem;
+    padding-right: 0;
+  }
+
+  span:last-of-type {
+    color: var(--operator-banner-second-bonus, #515156);
+    text-align: center;
+    font-size: 1.4rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.2rem;
+    padding: 0;
+    margin-bottom: 0.7rem;
+  }
+}
+
+@include min(tablet) {
+  .container {
+    padding: 1.6rem 2.4rem;
+    @include flex-direction(row);
+    @include flex-align(center, center);
+
+    > a {
+      min-height: 5.6rem;
+      max-width: 19.7rem;
+      font-size: 1.8rem;
+      font-weight: 700;
+      line-height: 2.6rem;
+    }
+
+    > div {
+      @include flex-direction(row);
+      @include flex-align(center, flex-start);
+      img {
+        min-width: 9.6rem;
+        height: 9.6rem;
+      }
+    }
+  }
+
+  .logo {
+    @include flex-direction(row);
+    @include flex-align(center, center);
+    gap: 1.6rem;
+    height: auto;
+  }
+
+  .details {
+    display: flex;
+    flex-direction: column;
+
+    > span:first-of-type {
+      color: var(--operator-banner-name-color, #1b1b1c);
+      font-size: 1.4rem;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 2.2rem;
+      margin-bottom: 0.8rem;
+      min-width: 11rem;
+    }
+  }
+}
+
+.showTncFixed {
+  > div {
+    > div:last-child {
+      height: 42px;
+      overflow-y: scroll;
+      color: #515156;
+      font-size: 10px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 14px;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        border-radius: 2px;
+      }
+      &::-webkit-scrollbar-track {
+        background: #cacaca;
+        border-radius: 2px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #515156;
+        border-radius: 2px;
+      }
+    }
+  }
+  @include min(tablet) {
+    >div {
+      display: grid;
+      grid-template-columns: 1fr 20rem;
+      grid-template-rows: auto auto;
+      > div:last-of-type {
+        grid-column: 1/3;
+        grid-row: 2/3;
+        display: block;
+      }
+      > a {
+        grid-row: 1/2;
+        grid-column: 2/3;
+      }
+      > div:first-of-type {
+        grid-row: 1/2;
+        grid-column: 1/2;
+      }
+    }
+  }
+}

package/src/components/molecules/{operator-banner/operator-banner.stories.js → bonus/template-one/bonus.stories.js}

@@ -7,12 +7,12 @@ import {
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
 
-import OperatorBanner from '.';
+import Bonus from '.';
 import getPageData from '~tests/factories/pages/default.factory';
 
 export default {
-  title: 'Theme/Molecules/Operator Banner',
-  component: OperatorBanner,
+  title: 'Theme/Modules/Bonus/Template One',
+  component: Bonus,
   argTypes: {
     operator: {
       name: 'operator',
@@ -24,46 +24,22 @@ export default {
         defaultValue: { summary: '' },
       },
     },
-    hasLink: {
-      name: 'hasLink',
+    tncEnable: {
+      name: 'TNC',
       type: { name: 'boolean', required: false },
       defaultValue: false,
-      description:
-        'If the operator is placeholder (status=coming_soon) and hasLink=true it will show a link to the operator website.',
+      description: 'If tnc is enabel we show data for it, if is false we hide data',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    hasStars: {
-      name: 'hasStars',
+    tncFixed: {
+      name: 'TNC  Fixed',
       type: { name: 'boolean', required: false },
       defaultValue: false,
       description:
-        'If the logo is null and hasStars=true it will show a star-rating component on the banner.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    logo: {
-      name: 'logo',
-      type: { name: 'string', required: false },
-      defaultValue: '',
-      description: 'The operator logo.',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: '' },
-      },
-      control: {
-        type: null,
-      },
-    },
-    sticky: {
-      name: 'sticky',
-      type: { name: 'boolean', required: false },
-      defaultValue: false,
-      description: 'If true it will be wrapped with a Sticky component.',
+        'If tnxFix is an arg that help us to show the tnc data in the bottom of component and with scroll',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
@@ -87,13 +63,11 @@ export default {
   },
 };
 
-const Template = (args) => <OperatorBanner {...args} />;
+const Template = (args) => <Bonus {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  hasLink: false,
-  hasStars: false,
-  logo: 'rizk-logopng7ed316ac19-original.png',
+  tncEnable: true,
+  tncFixed: false,
   operator: getPageData().relation,
-  sticky: false,
 };

package/src/components/molecules/bonus/template-one/bonus.test.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Bonus from '.';
+
+describe('Bonus', () => {
+  const operator = {
+    standardised_logo_url: 'logo-url',
+    logo: 'standardised-logo',
+    logo_url: 'logo-url',
+    bonus: {
+      rating: '4.5',
+    },
+    name: 'Rizk',
+    url: 'operator-url',
+    extra_fields: {
+      terms_and_conditions_text_enabled: 'true',
+    },
+    status: 'active',
+  };
+
+  test('renders operator name', () => {
+    render(<Bonus operator={operator} />);
+    const operatorName = screen.getByText('Rizk');
+    expect(operatorName).toBeInTheDocument();
+  });
+
+  test('renders operator bonus rating', () => {
+    render(<Bonus operator={operator} />);
+    const bonusRating = screen.getByText(operator.bonus.rating);
+    expect(bonusRating).toBeInTheDocument();
+  });
+
+  test('renders operator CTA', () => {
+    render(<Bonus operator={operator} />);
+    const operatorCTA = screen.getByLabelText(`${operator.name} Link`);
+    expect(operatorCTA).toBeInTheDocument();
+  });
+
+  test('renders operator TNC', () => {
+    render(<Bonus operator={operator} tncEnable />);
+    const operatorTNC = screen.getByText('18+ New Players only. Play responsibly.');
+    expect(operatorTNC).toBeInTheDocument();
+  });
+
+  test('does not render operator TNC when tncEnable is false', () => {
+    render(<Bonus operator={operator} tncEnable={false} />);
+    const operatorTNC = screen.queryByText('18+ New Players only. Play responsibly.');
+    expect(operatorTNC).not.toBeInTheDocument();
+  });
+});

package/src/components/molecules/bonus/template-one/index.js

@@ -0,0 +1,98 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import { prettyTracker, imagePrettyUrl } from '~helpers/getters';
+import LazyImage from '~hooks/lazy-image';
+import Onliner from '~atoms/bonus';
+import OperatorCta from '~atoms/operator-cta-button';
+import Rating from '~molecules/star-rating/one-star';
+import Tnc from '~molecules/tnc';
+import styles from './bonus.module.scss';
+
+export default function Bonus({
+  operator,
+  pageTemplate,
+  module,
+  tncEnable = true,
+  tncFixed = false,
+}) {
+  const prettyLink = prettyTracker(
+    operator,
+    module?.tracking_link_name || 'main',
+    false,
+    pageTemplate
+  );
+  const { standardised_logo_url, logo_url, bonus, name } = operator;
+  const logo = standardised_logo_url || logo_url;
+
+  const showTncFixed = tncEnable && tncFixed;
+
+  return (
+    <div
+      className={`${styles.operatorBanner || ''} ${showTncFixed ? styles.showTncFixed || '' : ''}`}
+    >
+      <div className={styles.container}>
+        <div>
+          <a
+            href={prettyLink}
+            className={`${styles.logo || ''} operator-banner-gtm logo-cta`}
+            title={operator?.name}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={`${operator?.name} Link`}
+          >
+            <LazyImage
+              alt={operator?.name}
+              src={imagePrettyUrl(logo)}
+              loading="eager"
+              height={120}
+              width={100}
+            />
+            <div className={styles.details}>
+              {name && <span>{name}</span>}
+              {bonus?.rating && <Rating rating={bonus?.rating} showDecimal />}
+            </div>
+          </a>
+          <div className={styles.bonus || ''}>
+            <Onliner item={operator} tracker={module?.type || 'main'} />
+            {tncEnable && !tncFixed && <Tnc hasCollapse={false} operator={operator} />}
+          </div>
+        </div>
+
+        <OperatorCta
+          operator={operator}
+          pageTemplate={pageTemplate}
+          tracker={module?.tracking_link_name || 'main'}
+          icon={<FaArrowRight fontSize={20} />}
+        />
+        {showTncFixed && <Tnc hasCollapse={false} operator={operator} />}
+      </div>
+    </div>
+  );
+}
+
+Bonus.propTypes = {
+  operator: PropTypes.shape({
+    standardised_logo_url: PropTypes.string,
+    logo: PropTypes.string,
+    logo_url: PropTypes.string,
+    bonus: PropTypes.shape({
+      rating: PropTypes.string,
+    }),
+    name: PropTypes.string,
+    rating: PropTypes.string,
+    url: PropTypes.string,
+    extra_fields: PropTypes.shape({
+      terms_and_conditions_text_enabled: PropTypes.string,
+    }),
+    status: PropTypes.string,
+  }),
+  tncFixed: PropTypes.bool,
+  tncEnable: PropTypes.bool,
+  pageTemplate: PropTypes.string,
+  module: PropTypes.shape({
+    tracking_link_name: PropTypes.string,
+    type: PropTypes.string,
+  }),
+};