gatsby-matrix-theme 34.0.14 → 34.0.16

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [34.0.16](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.15...v34.0.16) (2023-10-12)
+
+
+### Bug Fixes
+
+* make default template one for summery ([5ded7dc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5ded7dccf4f7dffb5dce62d2269b085b265493aa))
+* remove tnc it will be part of bonus module ([1b4277a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1b4277a8c9be6345d7b37306cc45279d13d209f7))
+
+## [34.0.15](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.14...v34.0.15) (2023-10-12)
+
+
+### Bug Fixes
+
+* add option for fixed Tnc ([0f26fb5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0f26fb5ceaf42a265e5ca18a1532da1152598874))
+* expert review tempalte three ([5535875](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/55358755429970662cae35d8d9c6c28c3a723898))
+* fix test ([804cccf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/804cccf482a5060af7e62faee9ffa6bfc5307df6))
+* make style ([a1b49fd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a1b49fddeb87077482603d079994ce52323ce22e))
+* show img ([3eecee1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3eecee12d4d09635dac51845f3b6faeb9f27ece3))
+
+
+* Merge branch 'tm-3692-expert-review-summary' into 'master' ([e8f8946](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e8f894633868aa366a6c4bdb3c5c801f4359943a))
+
 ## [34.0.14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.13...v34.0.14) (2023-10-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "34.0.14",
+  "version": "34.0.16",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/molecules/operator-summary/index.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import TemplateOne from './template-one';
 import TemplateTwo from './template-two';
+import TemplateThree from './template-three';
 
 export default function index({ template = 'template_one', ...props }) {
   switch (template) {
     case 'template_two':
       return <TemplateTwo {...props} />;
+    case 'template_three':
+      return <TemplateThree {...props} />;
     default:
       return <TemplateOne {...props} />;
   }

package/src/components/molecules/operator-summary/template-one/index.js

@@ -29,7 +29,7 @@ const TemplateOne = ({
   return (
     <div className={styles?.summaryLayout || ''}>
       <div className={styles.details}>
-        <h2>{translate(translations, 'expert_casino_review', 'Expert Casino Review')}</h2>
+        <h2>{translate(translations, 'expert_casino_review_title', 'Expert Casino Review')}</h2>
         <div className={styles.img}>
           <LazyImage src={imagePrettyUrl(img)} width={imgWidth} height={imgHeight} alt={name} />
           {operatorImg && <Ratings rating={operatorData?.rating} />}
@@ -65,7 +65,7 @@ const TemplateOne = ({
   );
 };
 TemplateOne.propTypes = {
-  imgWidth: PropTypes.number,
+  imgWidth: PropTypes.string,
   imgHeight: PropTypes.string,
   tnc: PropTypes.bool,
   operatorImg: PropTypes.bool,

package/src/components/molecules/operator-summary/template-three/index.js

@@ -0,0 +1,83 @@
+/* eslint-disable camelcase */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { imagePrettyUrl, getExtraField, translate } from 'gatsby-core-theme/src/helpers/getters';
+import { generatePlaceholderString } from 'gatsby-core-theme/src/helpers/generators.mjs';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import Bonus from 'gatsby-core-theme/src/components/molecules/bonus/template-one';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import AuthorName from '../../../atoms/author/template-one';
+import styles from './template-three.module.scss';
+
+const TemplateTwo = ({
+  page,
+  tnc = false,
+  tncFixed = false,
+  imgWidth = 128,
+  imgHeight = 146,
+  verify = '../../../../images/verifiedAuthor.svg',
+}) => {
+  const { translations } = useContext(Context) || {};
+  const operatorData = page?.relation;
+  const operatorSummary = getExtraField(page.extra_fields, 'operator_review_summary', null);
+  const author = page?.reviewer;
+  const title = generatePlaceholderString(
+    translate(translations, 'expert_casino_review_title', 'Expert Casino Review [operator_name]'),
+    translations,
+    operatorData
+  );
+
+  return (
+    <div className={styles?.summaryLayout || ''}>
+      <div className={styles.details}>
+        <h2>{title}</h2>
+
+        {operatorSummary && (
+          <div
+            className={styles.description}
+            dangerouslySetInnerHTML={{ __html: operatorSummary }}
+          />
+        )}
+        <div className={styles.author}>
+          <LazyImage
+            src={imagePrettyUrl(author?.image)}
+            width={imgWidth}
+            height={imgHeight}
+            alt={author?.name}
+          />
+          <div>
+            <AuthorName verify={verify} authorName={author?.name} />
+            <span>{author?.author_title}</span>
+          </div>
+        </div>
+      </div>
+      <Bonus
+        tncFixed={tncFixed}
+        tncEnable={tnc}
+        operator={operatorData}
+        template={page?.template}
+      />
+    </div>
+  );
+};
+
+TemplateTwo.propTypes = {
+  imgWidth: PropTypes.string,
+  imgHeight: PropTypes.string,
+  tnc: PropTypes.bool,
+  tncFixed: PropTypes.bool,
+  verify: PropTypes.string,
+  page: PropTypes.shape({
+    reviewer: PropTypes.shape({}),
+    relation_type: PropTypes.string,
+    extra_fields: PropTypes.shape({}),
+    template: PropTypes.string,
+    updated_at: PropTypes.string,
+    relation: PropTypes.shape({
+      name: PropTypes.string,
+      logo_url: PropTypes.string,
+    }),
+  }),
+};
+
+export default TemplateTwo;

package/src/components/molecules/operator-summary/template-three/template-three.module.scss

@@ -0,0 +1,139 @@
+.summaryLayout {
+  border-radius: 1.6rem;
+  background: var(--operator-summery-backgorund, #fff);
+  box-shadow: 0px 4px 6px -2px rgba(27, 27, 28, 0.02), 0px 12px 16px -4px rgba(27, 27, 28, 0.05);
+  width: calc(100% - 32px);
+  padding:0  1.6rem;
+
+  // Bonus module
+  > div:last-of-type {
+    padding-bottom: 2.4rem;
+    > div {
+      @include min(tablet) {
+        padding: 1.6rem;
+      }
+      > div {
+        //img, details and onliner
+        @include flex-direction(row);
+
+        > a {
+          // hide deatils
+          height: 4rem;
+          > div {
+            display: none;
+            @include min(laptop) {
+              display: block;
+              min-width: 12rem;
+            }
+          }
+          > img {
+            width: 4rem;
+            height: 4rem;
+            min-width: 4rem;
+          }
+          @include min(tablet) {
+            height: 6.4rem;
+            > img {
+              width: 6.4rem;
+              height: 6.4rem;
+              min-width: 6.4rem;
+            }
+          }
+        }
+        // onliner
+        > div {
+          background-color: transparent;
+          border: 0;
+          height: fit-content;
+          min-height: fit-content;
+          align-items: start;
+          > span {
+            text-align: left;
+            margin: 0;
+            display: inline-block;
+            color: #1b1b1c;
+            font-size: 1.2rem;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 1.8rem;
+          }
+          @include min(tablet) {
+            border-radius: 8px;
+            background: #fff;
+            min-height: 6.4rem;
+            @include flex-direction(column);
+            @include flex-align(center, center);
+            > span {
+              font-weight: 700;
+              &:first-of-type {
+                font-size: 1.6rem;
+                line-height: 2.7rem;
+              }
+              &:last-of-type {
+                font-size: 1.4rem;
+                line-height: 2.2rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.details {
+  box-sizing: border-box;
+  h2 {
+    padding: 2.4rem 0;
+    margin: 0;
+    color: #1b1b1c;
+    font-size: 2.4rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 3.2rem;
+    text-transform: capitalize;
+    @include min(tablet){
+      font-size: 3.2rem;
+      line-height: 4rem;
+    }
+  }
+}
+
+.description {
+  color: #515156;
+  text-align: justify;
+  font-size: 1.6rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 2.7rem;
+  margin-top: 0.8rem;
+  margin-bottom: 1.6rem;
+}
+
+.author {
+  @include flex-direction(row);
+  @include flex-align(center, flex-start);
+  gap: 1.6rem;
+  margin-bottom: 3.2rem;
+  > img {
+    width: 6.4rem;
+    height: 6.4rem;
+    border-radius: 100%;
+  }
+  > div {
+    @include flex-direction(column);
+    > span:first-of-type {
+      color: #1b1b1c;
+      font-size: 1.6rem;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 2.4rem;
+    }
+    > span:last-of-type {
+      color: #515156;
+      font-size: 1.4rem;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 2.2rem;
+    }
+  }
+}

package/src/components/molecules/operator-summary/template-three/template-three.stories.js

@@ -0,0 +1,61 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import MainProvider from '~context/MainProvider';
+import getOperatorData from '../../../../../tests/factories/pages/operator.factory';
+import verifyIcon from '../../../../../storybook-images/verifiedAuthor.svg';
+import TemplateThree from '.';
+
+const pageData = getOperatorData();
+
+export default {
+  title: 'Theme/Modules/Template Blocks/Operator review page/Review Summary/Template Three',
+  component: TemplateThree,
+  argTypes: {
+    page: {
+      name: 'Page Object',
+      type: { name: 'Object' },
+      defaultValue: pageData,
+    },
+    verify: {
+      defaultValue: verifyIcon,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Operator Review Header - Template Two',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => (
+  <MainProvider
+    value={{
+      bannerIsActive: false,
+      cookieAccepted: true,
+      translations: {
+        online_casino: 'Online Casino',
+      },
+    }}
+  >
+    <TemplateThree {...args} />
+  </MainProvider>
+);
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/molecules/operator-summary/template-three/template-three.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import OperatorSummary from '.';
+
+const mockPage = {
+  reviewer: {},
+  relation_type: 'casino',
+  extra_fields: {},
+  template: 'operator',
+  relation: {
+    name: 'Rizk',
+    logo_url: 'logo.png',
+  },
+};
+
+test('renders with default props', () => {
+  const { getByText, getByAltText } = render(<OperatorSummary page={mockPage} />);
+
+  expect(getByText('Expert Casino Review Rizk')).toBeInTheDocument();
+  expect(getByAltText('Rizk')).toBeInTheDocument();
+});
+
+test('renders with custom props', () => {
+  const { getByText, getByAltText } = render(
+    <OperatorSummary page={mockPage} imgWidth={200} imgHeight="200px" />
+  );
+
+  expect(getByText('Expert Casino Review Rizk')).toBeInTheDocument();
+  expect(getByAltText('Rizk')).toBeInTheDocument();
+  expect(document.querySelector('.description')).not.toBeInTheDocument();
+});

package/src/components/molecules/operator-summary/template-two/index.js

@@ -26,53 +26,50 @@ const TemplateTwo = ({
   const author = page?.reviewer;
   const img = operatorImg ? imageObject : author?.image;
   return (
-    <div>
-      <div className={styles?.summaryLayout || ''}>
-        <div className={styles.details}>
-          <div className={styles.img}>
-            <LazyImage
-              src={imagePrettyUrl(img, imgWidth, imgHeight)}
-              width={imgWidth}
-              height={imgHeight}
-              alt={name}
-            />
-          </div>
-          <div className={styles.title}>
-            <h2>{translate(translations, 'expert_casino_review', 'Expert Casino Review')}</h2>
-            <Ratings halfStars={false} rating={operatorData?.rating} numOfStars={5} />
-            <p>
-              {translate(translations, 'published_on', 'Published on')}{' '}
-              {formatDate(page.updated_at)}
-            </p>
-          </div>
-          {operatorSummary && (
-            <div
-              className={styles.description}
-              dangerouslySetInnerHTML={{ __html: operatorSummary }}
-            />
-          )}
-          <div className={styles.author}>
-            <Author
-              label="By"
-              authorName={author?.name}
-              verify={imagePrettyUrl(author?.image)}
-              authorPath={author?.profile_page_path}
-            />
-            <span>
-              {author?.pages_count} {translate(translations, 'reviews', 'Reviews')}
-            </span>
-          </div>
+    <div className={styles?.summaryLayout || ''}>
+      <div className={styles.details}>
+        <div className={styles.img}>
+          <LazyImage
+            src={imagePrettyUrl(img, imgWidth, imgHeight)}
+            width={imgWidth}
+            height={imgHeight}
+            alt={name}
+          />
+        </div>
+        <div className={styles.title}>
+          <h2>{translate(translations, 'expert_casino_review', 'Expert Casino Review')}</h2>
+          <Ratings halfStars={false} rating={operatorData?.rating} numOfStars={5} />
+          <p>
+            {translate(translations, 'published_on', 'Published on')} {formatDate(page.updated_at)}
+          </p>
+        </div>
+        {operatorSummary && (
+          <div
+            className={styles.description}
+            dangerouslySetInnerHTML={{ __html: operatorSummary }}
+          />
+        )}
+        <div className={styles.author}>
+          <Author
+            label="By"
+            authorName={author?.name}
+            verify={imagePrettyUrl(author?.image)}
+            authorPath={author?.profile_page_path}
+          />
+          <span>
+            {author?.pages_count} {translate(translations, 'reviews', 'Reviews')}
+          </span>
         </div>
-
-        <OperatorBanner logo={imageObject} operator={operatorData} template={page?.template} />
-        {tnc && <Tnc hasCollapse={false} />}
       </div>
+
+      <OperatorBanner logo={imageObject} operator={operatorData} template={page?.template} />
+      {tnc && <Tnc hasCollapse={false} />}
     </div>
   );
 };
 
 TemplateTwo.propTypes = {
-  imgWidth: PropTypes.number,
+  imgWidth: PropTypes.string,
   imgHeight: PropTypes.string,
   tnc: PropTypes.bool,
   operatorImg: PropTypes.bool,