gatsby-matrix-theme 49.0.4 → 49.0.6

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+## [49.0.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v49.0.5...v49.0.6) (2024-08-14)
+
+
+### Bug Fixes
+
+* add live env ([810ed94](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/810ed94937dcf4dff6e9d437d2ca5c544c3dd70a))
+* add logic for historical data ([d900ee0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d900ee09b627612e8e60815e182da86a84799be1))
+* add lottery api ([86ec51d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/86ec51de511e9fdd6f6f399f79aefe032329b098))
+* add margin ([9284aee](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9284aee3277625d3474cd69e386908717dd0c1fa))
+* add server data ([f9097b6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f9097b687cd237eb925245959245e03b6ecef563))
+* add storybook and test ([4ad68d8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4ad68d89d0e13a2011a045138822d528193a2f9c))
+* add tabs ([25c662d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/25c662d3c784236c9899d0298c0cf54c7c2655ae))
+* add test ([0cf07ae](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0cf07ae790f6a989323e93c95b88c100db48f7d6))
+* add translations ([d699025](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d6990255a5cfd04b2c6b3180edd254ac5f1d2464))
+* clean up ([e394296](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e39429608edf462c8fb01963fd4cd6da5c0fdab4))
+* fix build ([421cea6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/421cea652dfcd624ed3f5a84d2b2ed2b50d6590b))
+* fix storybook ([c19d499](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c19d499e75b45505540fee8c200a8b933e22adae))
+* fix test and clean up code ([e2abc8a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e2abc8afaf6b6f0d8b790b4a40a6aa8445a227a8))
+* fix tests ([376e7fa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/376e7fa55e6346c162508514a1e200107c0cdece))
+* fix tests ([502257d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/502257dfc14cf1794138ca7294768e1c53110641))
+* frame module and disclamer module ([c09fca5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c09fca55d2d6c673cc7025c411dc7865c702d4dd))
+* if the modules arent added on hercules stop to do api request ([7945332](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7945332a17af16d88c0fb6d71ea92bb8ac9b58a2))
+* lotto ([5bf794f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5bf794f268d2bdd982e7267b9bed45c8374f2448))
+* make style ([2292375](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/22923755b6995839cd71d198f7130f0ef92090f4))
+* make style ([6891b51](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6891b5127bf507c5d169022a3dd538d12505c006))
+* server data ([196c619](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/196c619b4cdffdb5619c428cf76641a1feac563d))
+* star rating ([94cfe4f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/94cfe4f26364ec42835e267cf7d183af011354b3))
+
+
+* Merge branch 'tm-4555-lotto-uk-49' into 'master' ([e7f2d3c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e7f2d3ca3187d2cc2e36cbd0653d1ede435a8338))
+* Merge branch 'master' into 'tm-4555-lotto-uk-49' ([f970ba7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f970ba7ed3d39eee8a086b10e6bd2e92009fa3c2))
+* Merge branch 'master' into tm-4555-lotto-uk-49 ([7f6c423](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7f6c42382a46965e07d111cec617c8466bc2746b))
+
+## [49.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v49.0.4...v49.0.5) (2024-08-09)
+
+
+### Bug Fixes
+
+* navigation settings ([c55efca](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c55efca706cd96bdfc41705d3204cee4868cf003))
+
 ## [49.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v49.0.3...v49.0.4) (2024-08-09)
 
 

package/package.json

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

package/src/components/atoms/teatime-lunchtime-disclaimer/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import useTranslate from 'gatsby-core-theme/src/hooks/useTranslate/useTranslate';
+import styles from './styles.module.scss';
+
+export default function TeatimeLunchtimeDisclaimer() {
+  return (
+    <div className={styles.conatainer}>
+      <p>
+        {useTranslate(
+          'teamtime_lunchtime_disclaimer',
+          'While we strive to ensure that the information on this page is correct and up to date, we cannot guarantee the accuracy or reliability of the UK49s results. Any winnings should be confirmed with the official UK49s website or authorized distributors.'
+        )}
+      </p>
+    </div>
+  );
+}

package/src/components/atoms/teatime-lunchtime-disclaimer/styles.module.scss

@@ -0,0 +1,17 @@
+.conatainer {
+  padding: 2.4rem !important;
+  background: var(--teatime-lunchtime-disclaimer-background, #ffe0da);
+  border: 1px solid var(--teatime-lunchtime-disclaimer-border-color, #f55d41);
+  border-radius: 0.8rem;
+  width: calc(100% - 3.2rem);
+  @include min(laptop) {
+    width: calc(var(--main-container-max) - 3.2rem);
+  }
+  > p {
+    font-size: 1.6rem;
+    font-style: italic;
+    line-height: 2.4rem;
+    font-weight: 700;
+    color: #3C394F;
+  }
+}

package/src/components/atoms/teatime-lunchtime-disclaimer/teatime-lunchtime-disclaimer.stories.js

@@ -0,0 +1,40 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import data from '../../../../tests/factories/lotto/lotto-uk-49';
+
+import Discalmer from '.';
+
+export default {
+  title: 'Theme/Atoms/Teatime Lunchtime Disclaimer',
+  component: Discalmer,
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: '',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <Discalmer {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  serverData: data,
+};

package/src/components/atoms/teatime-lunchtime-disclaimer/teatime-lunchtime-disclaimer.test.js

@@ -0,0 +1,16 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Disclaimer from '.';
+
+describe('Disclaimer Teatime and Lunchtime Component', () => {
+  test('renders without crashing with serverData', () => {
+    const { getByText } = render(<Disclaimer />);
+    expect(
+      getByText(
+        'While we strive to ensure that the information on this page is correct and up to date, we cannot guarantee the accuracy or reliability of the UK49s results. Any winnings should be confirmed with the official UK49s website or authorized distributors.'
+      )
+    ).toBeTruthy();
+  });
+});

package/src/components/molecules/lotto-uk-49/index.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/button-has-type */
+/* eslint-disable no-console */
+import React from 'react';
+import Tabs from 'gatsby-core-theme/src/hooks/tabs';
+import { formatDate } from 'gatsby-core-theme/src/helpers/date-time';
+import styles from './styles.module.scss';
+import ListItems from './listItems';
+
+export default function LottoUK49({ serverData = [], module }) {
+  if(serverData.length === 0) return;
+  const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  const monthsOfYear = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',];
+
+  const filterTabs =
+    serverData &&
+    Array.from(
+      new Set(serverData?.tabs.map((res) => formatDate(new Date(res.drawDate), 'DD/MM/YYYY', '-')))
+    );
+  filterTabs.unshift('Latest');
+
+  return (
+    <Tabs
+      module={module}
+      showNumberOfResults
+      headerClass="lottoTabs"
+      activeTabClass="lottoTabsActive"
+    >
+      {filterTabs?.map((res, index) => {
+        const isLatestTab = res === 'Latest';
+        const label = isLatestTab
+          ? res
+          : daysOfWeek[new Date(serverData.tabs[index - 1].drawDate).getDay()];
+
+        const results = isLatestTab
+          ? null
+          : `${monthsOfYear[new Date(serverData.tabs[index - 1].drawDate).getMonth()]} ${new Date(
+              serverData.tabs[index - 1].drawDate
+            ).getDate()}`;
+
+        return (
+          <div label={label} results={results} key={res} className={styles.container}>
+            <ListItems tab={res} serverData={serverData?.data} />
+          </div>
+        );
+      })}
+    </Tabs>
+  );
+}

package/src/components/molecules/lotto-uk-49/item/index.js

@@ -0,0 +1,48 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import styles from './styles.module.scss';
+import LottoIcon from '../../../../images/icons/lotto';
+import BoosterLoto from '../../../../images/icons/booster-loto';
+import months from '../../../../constants/months';
+
+function Item({ drawDate, lottery, drawDetails }) {
+  const date = new Date(drawDate);
+  const formatDate = `${date.getDate()} ${useTranslate(months[date.getMonth()], months[date.getMonth()]) } ${date.getFullYear()}`;
+  return (
+    <div className={`${styles.item} ${styles[lottery]}`}>
+      <div className={styles.info}>
+        <p className={styles.date}>{formatDate}</p>
+        <p className={styles.text}>
+          {`${useTranslate('lotto_uk_49_text_1', 'UK 49s')} ${useTranslate(lottery, lottery)} ${useTranslate('lotto_uk_49_text_2', 'Result For Today')}`}
+        </p>
+      </div>
+      <div className={styles.lottos}>
+        {drawDetails &&
+          drawDetails[0]?.lottery_numbers.map((res) => (
+            <div key={res} className={styles.lottoIcon}>
+              <LottoIcon number={res} />
+            </div>
+          ))}
+        <div className={styles.booster}>
+          <BoosterLoto />
+          <span className={styles.boosterValue}>{drawDetails && drawDetails[0]?.bonus_number}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Item.propTypes = {
+  drawDate: PropTypes.string,
+  lottery: PropTypes.string,
+  drawDetails: PropTypes.arrayOf(
+    PropTypes.shape({
+      lottery_numbers: PropTypes.arrayOf(PropTypes.number),
+      bonus_number: PropTypes.number,
+    })
+  ),
+};
+
+export default Item;

package/src/components/molecules/lotto-uk-49/item/styles.module.scss

@@ -0,0 +1,91 @@
+.item {
+  padding: 1.6rem;
+  border-top-left-radius: 0.8rem;
+  border-bottom-left-radius: 0.8rem;
+  gap: 2.6rem;
+
+  @include flex-direction(column);
+
+  @include min(tablet) {
+    padding: 2.4rem;
+
+    @include flex-direction(row);
+    @include flex-align(center, space-between);
+  }
+}
+
+.lunchtime {
+  background: linear-gradient(
+    90deg,
+    var(--lunchtime-background-color-1, #fbf3e5) 0%,
+    var(--lunchtime-background-color-2, #fff) 100%
+  );
+  border-left: 1rem solid var(--lunchtime-border-color, #eaaa3b);
+}
+
+.teatime {
+  background: linear-gradient(
+    90deg,
+    var(--teatime-background-color-1, #e2d6fa) 0%,
+    var(--teatime-background-color-2, #fff) 100%
+  );
+  border-left: 1rem solid var(--teatime-border-color, #6e33e5);
+}
+
+.info {
+  @include flex-direction(column);
+
+  gap: 0.8rem;
+}
+
+.date {
+  font-weight: 400;
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+  color: #212529;
+}
+
+.text {
+  font-weight: 700;
+  font-size: 1.8rem;
+  line-height: 2.4rem;
+  text-transform: capitalize;
+  color: #171D39;
+
+  @include min(tablet) {
+    font-size: 2.4rem;
+    line-height: 2.4rem;
+  }
+}
+
+.lottos {
+  @include flex-direction(row);
+  @include flex-align(center, start);
+
+}
+
+.lottoIcon {
+  position: relative;
+  margin-left: -1rem;
+
+  @include min(tablet){
+    margin-left: 0;
+  }
+}
+
+.booster {
+  position: relative;
+  margin-bottom: -4rem;
+
+  @include flex-direction(row);
+  @include flex-align(center, center);
+}
+
+.boosterValue {
+  position: absolute;
+  top: 1.3rem;
+  width: fit-content;
+  font-weight: 700;
+  color: #000;
+  height: fit-content;
+}

package/src/components/molecules/lotto-uk-49/listItems/index.js

@@ -0,0 +1,75 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { FaRegCalendarAlt } from "@react-icons/all-files/fa/FaRegCalendarAlt";
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import styles from './styles.module.scss';
+import Item from '../item';
+import { getLottoUKdata } from '../../../../gatsby-core-theme/helpers/services';
+
+export default function ListItems({ serverData, tab }) {
+  const [data, setData] = useState(null);
+  const fetchData = async () => {
+    const res = await Promise.all(
+      ['lunchtime', 'teatime'].map(
+        async (type) =>
+          // eslint-disable-next-line no-return-await
+          await getLottoUKdata(
+            false,
+            false,
+            null,
+            `uk49s-${type}-result-${tab.split('-').reverse().join('-')}`
+          )
+      )
+    );
+    setData(res.filter(n=>n!==undefined));
+  };
+
+  useEffect(() => {
+    if (tab === 'Latest') {
+      setData(serverData);
+    } else {
+      fetchData();
+    }
+  }, [serverData, tab]);
+
+  const filterData = data && data.sort((a, b) => new Date(b.drawDate) - new Date(a.drawDate));
+  
+  const itemView = useCallback(
+    () =>
+      filterData?.map((res, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Item key={index} {...res} />
+      )),
+    [filterData]
+  );
+  
+
+  return (
+    <>
+      <div className={styles.resultInfo}>
+        <div className={styles.drawDate}>
+          <FaRegCalendarAlt size={20} color='#e00028' />
+          {useTranslate('draw_date', 'Draw Date')}</div>
+      </div>
+      <div className={styles.lottoTypes}>
+        <div className={styles.type}>
+          <span className={styles.circle} />
+          <span className={styles.textType}>{useTranslate('lunchtime', 'Lunchtime')}</span>
+        </div>
+        <div className={styles.type}>
+          <span className={`${styles.circle} ${styles.circle2}`} />
+          <span className={`${styles.textType} ${styles.text2Type}`}>
+            {useTranslate('teatime', 'Teatime')}
+          </span>
+        </div>
+      </div>
+      <div className={styles.items}>{filterData && itemView()}</div>
+    </>
+  );
+}
+
+ListItems.propTypes = {
+  serverData: PropTypes.arrayOf({}),
+  tab: PropTypes.string,
+};

package/src/components/molecules/lotto-uk-49/listItems/styles.module.scss

@@ -0,0 +1,76 @@
+.resultInfo {
+  @include flex-direction(column);
+
+  gap: 2.4rem;
+  padding-top: 2rem;
+
+  @include min(tablet) {
+    @include flex-direction(row);
+    @include flex-align(center, space-between);
+  }
+}
+
+.drawDate {
+  color: var(--lotto-uk-49-drawDate-color, #e00028);
+  font-size: 1.6rem;
+  line-height: 3rem;
+  font-weight: bold;
+
+  @include flex-direction(row);
+  @include flex-align(center, start);
+
+  margin-bottom: 2.4rem;
+  padding-left: 1.2rem;
+  margin-top: 1rem;
+
+  >svg{
+    margin-right: 1.6rem;
+  }
+}
+
+.lottoTypes {
+  @include flex-direction(row);
+
+  margin-bottom: 2.4rem;
+  gap: 1.6rem;
+}
+
+.type {
+  @include flex-direction(row);
+  @include flex-align(center, start);
+
+  gap: 1.6rem;
+}
+
+.textType {
+  font-size: 1.6rem;
+  line-height: 3rem;
+  font-weight: 700;
+  color: var(--lotto-uk-49-text1-color, #eaaa3b);
+}
+
+.text2Type {
+  color: var(--lotto-uk-49-text2-color, #6e33e5);
+}
+
+.circle {
+  width: 1.8rem;
+  height: 1.8rem;
+  border-radius: 50%;
+  background: linear-gradient(to right, #eaaa3b 50%, #fbf3e5 50%);
+}
+
+.circle2 {
+  background: linear-gradient(to right, #6e33e5 50%, #e2d6fa 50%);
+}
+
+.items {
+  @include flex-direction(column);
+
+  gap: 1.6rem;
+  min-height: 34.6rem;
+
+  @include min(tablet){
+    min-height: 22.4rem;
+  }
+}

package/src/components/molecules/lotto-uk-49/lotto-uk-49.stories.js

@@ -0,0 +1,46 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import data from '../../../../tests/factories/lotto/lotto-uk-49';
+
+import LottoUK49 from '.';
+
+export default {
+  title: 'Theme/Modules/Template Blocks/Lotto/Lotto UK 49',
+  component: LottoUK49,
+  argTypes: {
+    serverData: {
+      control: 'array',
+      description: 'Data for the LottoUK49 component',
+      defaultValue: data,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Lotto UK 49',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <LottoUK49 {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  serverData: data,
+};

package/src/components/molecules/lotto-uk-49/lotto-uk-49.test.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import LottoUK49 from '.';
+import data from '../../../../tests/factories/lotto/lotto-uk-49';
+
+describe('LottoUK49 Component', () => {
+  test('renders without crashing with serverData', () => {
+    const { getByText } = render(<LottoUK49 serverData={data} />);
+    expect(getByText('Draw Date')).toBeTruthy();
+    expect(getByText('Lunchtime')).toBeTruthy();
+    expect(getByText('Teatime')).toBeTruthy();
+    expect(getByText('UK 49s lunchtime Result For Today')).toBeTruthy();
+    expect(getByText('UK 49s teatime Result For Today')).toBeTruthy();
+  });
+
+  test('renders without data with serverData', () => {
+    const { container } = render(<LottoUK49 serverData={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+// need add more tests when we have new APIs

package/src/components/molecules/lotto-uk-49/styles.module.scss

@@ -0,0 +1,9 @@
+.container {
+  padding: 1.6rem;
+
+  @include flex-direction(column);
+
+  gap: 2.4rem;
+  margin-top: 2rem;
+}
+

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

@@ -25,7 +25,7 @@ const OperatorDetails = ({
   showAuthorAsLink = true,
   showRibbon = false,
   contentRibbon = false,
-  useOneStarRating = false,
+  useOneStarRating = true,
   showRatingLabel = false,
   showRatingDecimal = false,
   authorTemplateTwo = false,