gatsby-core-theme 30.0.110 → 30.0.111

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [30.0.111](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.110...v30.0.111) (2024-04-16)
+
+
+### Bug Fixes
+
+* add newsletter core theme ([2d3a306](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2d3a3066ca41c1fd4e1656f15f3832db7342a897))
+* add required for checkbox, and generator for [link] ([91c419a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/91c419aa6330467b9d183704c944c643ed2b8243))
+* fix conflicts ([40aced4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/40aced4b53fef6592787289805908d562b2aff2f))
+* fix test and make style ([54b61c0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/54b61c02a4a0b3e03d72192c75977fdeef199b28))
+* fixed website icon ([d31a54d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d31a54dc14032e7d15ad79969e535f0ceef019f9))
+* isSticky false ([c3e75cb](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c3e75cb77a97547119a7dabb869ad129b7b23365))
+* make logic ([c224482](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c224482ea4aded40e80afa6dfbd66d0a75f4cb93))
+* make style ([49f4151](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/49f4151df040fe3863e782d3069d4b9df5b38ad7))
+* refactor ([470107c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/470107cb1e586dfb21f3055c7d1a849fd86aa306))
+* refactor ([4c66524](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4c66524e37939b70d0b8552b9bedbd5bc1ab9753))
+* refactor ([3d5370c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3d5370c739ab93506126184d1f49e44d86f96755))
+* refactor form component ([661c828](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/661c8288af8c7dd1a0c6a794b2bc0abf889424f8))
+* reuse the form component ([60b09ef](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/60b09ef4ad4d10684a2dbc8f77d2a303f2d88992))
+
+
+* Merge branch 'tm-4099-newsletter' into 'master' ([56bdefb](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/56bdefbe9561bb3f318bc31ed89892a94cbcda68))
+* Merge branch 'tm-4215-website-icon' into 'master' ([7f336b3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7f336b3362ef69ba06078940a300c7edd6c37a4b))
+* Merge branch 'master' into 'tm-4099-newsletter' ([7b1fa8d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7b1fa8df697c73093b93703d85354f71c15c89d5))
+
 ## [30.0.110](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.109...v30.0.110) (2024-04-11)
 
 

package/package.json

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

package/src/components/atoms/author-box/icons/socialIcons.js

@@ -4,6 +4,7 @@ import { FaFacebookSquare } from '@react-icons/all-files/fa/FaFacebookSquare';
 import { IoLogoTiktok } from '@react-icons/all-files/io5/IoLogoTiktok';
 import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin';
 import { FaWikipediaW } from '@react-icons/all-files/fa/FaWikipediaW';
+import { FaGlobeAmericas } from '@react-icons/all-files/fa/FaGlobeAmericas';
 import { FaRegEnvelope } from '@react-icons/all-files/fa/FaRegEnvelope';
 
 export const TwitterIcon = () => (
@@ -25,6 +26,7 @@ const socialIcons = {
   twitter: <TwitterIcon />,
   tiktok: <IoLogoTiktok title="Tiktok Icon" />,
   wikipedia: <FaWikipediaW title="Wikipedia" />,
+  website: <FaGlobeAmericas title="Website" />,
   message: <FaRegEnvelope title="Envelope icon" />,
 };
 
@@ -34,6 +36,6 @@ export default (author) => [
   { id: 'li', link: author?.linkedin_profile, icon: socialIcons?.linkedin },
   { id: 'tw', link: author?.twitter_profile, icon: socialIcons?.twitter },
   { id: 'tt', link: author?.tik_tok, icon: socialIcons?.tiktok },
-  { id: 'wk', link: author?.personal_website, icon: socialIcons?.wikipedia },
+  { id: 'ws', link: author?.personal_website, icon: socialIcons?.website },
   { id: 'em', link: author?.email_address, icon: socialIcons?.message },
 ];

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

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { MdClose } from '@react-icons/all-files/md/MdClose';
+import styles from './modal.module.scss';
+
+const Modal = ({ children }) => {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    setShow(!show);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handelClose = (e) => {
+    if (e.target.className === styles.modal) {
+      setShow(false);
+    }
+  };
+
+  if (show) {
+    return (
+      <div
+        role="button"
+        aria-hidden="true"
+        onClick={(e) => handelClose(e)}
+        className={`${styles?.modal || ''}`}
+      >
+        <div className={styles?.success || ''}>
+          {children}
+          <MdClose
+            className={styles?.closeBtn || ''}
+            onClick={() => setShow(false)}
+            title="Close Icon"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return <></>;
+};
+Modal.propTypes = {
+  children: PropTypes.node,
+};
+export default Modal;

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

@@ -0,0 +1,47 @@
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9999;
+  @include flex-align(center, center);
+  .success {
+    position: fixed;
+    background: #fff;
+    border-radius: 0.6rem;
+    height: auto;
+    width: 90%;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 2rem;
+    @include flex-align(center, center);
+    @include flex-direction(column);
+    @include min(tablet) {
+      width: 40%;
+      top: 50%;
+    }
+    .closeBtn {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      cursor: pointer;
+    }
+    svg {
+      width: 2.6rem;
+      height: 2.6rem;
+    }
+    p {
+      font-weight: 700;
+    }
+    div {
+      padding-top: 1rem;
+      p {
+        padding-top: 2.45rem;
+        font-weight: 700;
+      }
+    }
+  }
+}

package/src/components/molecules/main/index.js

@@ -1,20 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
+import { getURLParam } from 'gatsby-core-theme/src/helpers/getters';
 import Module from '~molecules/module';
 import styles from './main.module.scss';
 import keygen from '~helpers/keygen';
+import settings from '../../../constants/settings.mjs';
 import { isSearchPath } from '~helpers/isSearchPath';
 
-const Main = ({ section = {}, pageContext = {}, serverData = {}, exclOperator = false }) => {
+const Main = ({
+  section = {},
+  pageContext = {},
+  serverData = {},
+  exclOperator = false,
+  exclNewsletter = false,
+}) => {
   const { page, allMarkets } = pageContext;
-
+  const siteName = process.env.GATSBY_SITE_NAME;
+  const showNewsletter =
+    !(
+      settings.newsletter[siteName]?.filter_pages?.includes('*') ||
+      settings.newsletter[siteName]?.filter_pages?.includes(page?.relation_type) ||
+      settings.newsletter.default?.filter_pages?.includes(page?.relation_type) ||
+      exclNewsletter
+    ) && !process.env?.HIDE_NEWSLETTER;
   const pathPrefixes = isSearchPath(allMarkets, page.path);
 
   const SearchPage = pathPrefixes ? loadable(() => import(`~pages/search`)) : null;
   const HtmlSitemap = pageContext.sitemapData ? loadable(() => import(`~atoms/sitemap`)) : null;
   const AuthorBox = page.author_id ? loadable(() => import(`~atoms/author-box`)) : null;
   const NotFound = page?.path?.includes('404') ? loadable(() => import(`~atoms/not-found`)) : null;
+  const Newsletter = showNewsletter ? loadable(() => import('~molecules/newsletter')) : null;
+  const NewsletterSuccess =
+    showNewsletter && typeof window !== 'undefined' && Boolean(getURLParam('subscribed'))
+      ? loadable(() => import(`../newsletter/success`))
+      : null;
 
   return (
     <main className={styles.modulePage || ''}>
@@ -41,6 +61,8 @@ const Main = ({ section = {}, pageContext = {}, serverData = {}, exclOperator =
         />
       )}
       {SearchPage && <SearchPage page={page} />}
+      {Newsletter && <Newsletter page={page} />}
+      {NewsletterSuccess && <NewsletterSuccess />}
     </main>
   );
 };
@@ -59,6 +81,7 @@ Main.propTypes = {
   pageContext: PropTypes.shape({}),
   serverData: PropTypes.shape({}),
   exclOperator: PropTypes.bool,
+  exclNewsletter: PropTypes.bool,
 };
 
 export default Main;

package/src/components/molecules/newsletter/form/index.js

@@ -0,0 +1,92 @@
+/* eslint-disable no-unused-expressions */
+
+import React, { useState, useEffect, 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 Form from '../../../organisms/form';
+import { newsLetterForm } from '../../../../constants/forms';
+
+const NewsletterForm = ({ handleApi, redirectUrl, submitText = 'Submit', market }) => {
+  const [ip, setIP] = useState('');
+  const [error, setError] = useState(false);
+  const { translations } = useContext(Context) || {};
+
+  const getData = async () => {
+    await fetch('https://geolocation-db.com/json/', {
+      method: 'GET',
+    })
+      .then((response) => response.json())
+      .then((data) => setIP(data.IPv4))
+      .catch((err) => {
+        // console.log(`Error ${err}`);
+      });
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const bacomApi = async (name, email, phomeNumber) => {
+    // eslint-disable-next-line no-bitwise
+    const timestamp = (Date.now() / 1000) | 0;
+    const refUrl = process.env.BACOM_REF_URL;
+    await fetch(
+      `https://bacom.dk/subscribe/gig/?firstname=${name}&user_ip=${ip}&ref_name=${
+        process.env.BACOM_REF_NAME
+      }&ref_url=${refUrl}&timestamp=${timestamp}&country=${process.env.COUNTRY}&email=${email}${
+        phomeNumber && `&phone_number=${phomeNumber}`
+      }`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+      }
+    ).then((res) =>
+      res.text().then((text) => {
+        text === 'OK' ? (window.location.href = redirectUrl) : setError(true);
+      })
+    );
+  };
+
+  const handelSubmit = (e) =>
+    handleApi
+      ? handleApi(e.name.value, e.email.value, ip)
+      : bacomApi(e.name.value, e.email.value, e.phomeNumber.value);
+
+  if (error)
+    return (
+      <span>
+        {translate(
+          translations,
+          'fail_error_newsletter',
+          'Something went wrong. Please try again later!'
+        )}{' '}
+      </span>
+    );
+
+  return (
+    <Form
+      formOptions={newsLetterForm[market] || newsLetterForm.default}
+      successMessage={translate(translations, 'newsletter_form_thanks', '')}
+      failMessage={translate(
+        translations,
+        'fail_error_newsletter',
+        'Something went wrong. Please try again later!'
+      )}
+      customeSubmit={handelSubmit}
+      customError
+      buttonLabel={submitText}
+    />
+  );
+};
+NewsletterForm.propTypes = {
+  handleApi: PropTypes.func,
+  redirectUrl: PropTypes.string,
+  submitText: PropTypes.string,
+  market: PropTypes.string,
+};
+
+export default NewsletterForm;

package/src/components/molecules/newsletter/index.js

@@ -0,0 +1,72 @@
+import React, { useState, useContext } from 'react';
+import { MdClose } from '@react-icons/all-files/md/MdClose';
+import PropTypes from 'prop-types';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { translate, getUrl } from 'gatsby-core-theme/src/helpers/getters';
+import Button from './toggle-button/index';
+import NewsletterForm from './form/index';
+import styles from './newsletter.module.scss';
+
+const Newsletter = ({ page, openBtnText = 'Unlock Bonuses', isSticky = true }) => {
+  const [toggleNewsetter, setToggleNewsletter] = useState(false);
+  const { translations } = useContext(Context) || {};
+  const redirectUrl =
+    page?.path === '/'
+      ? `${getUrl(page?.path)}?subscribed=true`
+      : `${getUrl(page?.path)}/?subscribed=true`;
+
+  const statesCombined = () => {
+    setToggleNewsletter(!toggleNewsetter);
+  };
+
+  return (
+    <>
+      {toggleNewsetter && (
+        <div
+          className={styles?.layer || ''}
+          onClick={() => setToggleNewsletter(false)}
+          aria-hidden="true"
+        />
+      )}
+      <div className={!isSticky ? styles.contentPage || '' : styles.content || ''}>
+        {isSticky && (
+          <Button
+            active={!toggleNewsetter}
+            text={translate(translations, 'newsletter_open_btn', openBtnText)}
+            toggleNewsLetter={statesCombined}
+            gtmClass="newsletter-gtm btn-cta"
+          />
+        )}
+        <div
+          className={
+            !isSticky
+              ? styles?.formPage || ''
+              : `${styles?.form || ''} ${toggleNewsetter ? styles?.active || '' : ''}`
+          }
+        >
+          <NewsletterForm market={page?.market} redirectUrl={redirectUrl} />
+          {isSticky && (
+            <MdClose
+              className={styles?.closeBtn || ''}
+              onClick={() => setToggleNewsletter(false)}
+              title="Close Icon"
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+Newsletter.propTypes = {
+  openBtnText: PropTypes.string,
+  page: PropTypes.shape({
+    path: PropTypes.string,
+    template: PropTypes.string,
+    type: PropTypes.string,
+    market: PropTypes.string,
+  }),
+  isSticky: PropTypes.bool,
+};
+
+export default Newsletter;

package/src/components/molecules/newsletter/newsletter.module.scss

@@ -0,0 +1,82 @@
+.content {
+  margin: 0 auto;
+  @include min(tablet) {
+    .active {
+      width: 70rem;
+      left: 2rem;
+      z-index: 15;
+    }
+  }
+  @include max(mobile) {
+    .active {
+      bottom: 30%;
+    }
+  }
+}
+.layer {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+}
+.form {
+  position: fixed;
+  background: #fff;
+  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.2);
+  border-radius: 0.4rem;
+  padding: 2rem;
+  transition: 0s;
+  bottom: -100%;
+  z-index: var(--scroll-to-top-index);
+  @include min(tablet) {
+    @include flex-direction(column);
+    left: -90rem;
+    max-width: 90rem;
+    height: fit-content;
+    top: 25vh;
+    position: fixed;
+  }
+}
+
+.closeBtn {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  z-index: 2;
+  border: none;
+  color: #00889e;
+}
+.contentPage {
+  padding: 3.2rem 1.6rem;
+  width: 100%;
+  background: var(--newsletter-container-background-color);
+  z-index: var(--scroll-to-top-index);
+  max-width: 100rem;
+  margin: 0 auto;
+}
+
+.form{
+  // form style
+  >div{
+    background: transparent;
+    box-shadow: none;
+    h2{
+
+    }
+    p{
+
+    }
+    form{
+     
+      label{
+
+      }
+      input{
+
+      }
+    }
+  }
+}

package/src/components/molecules/newsletter/newsletter.stories.js

@@ -0,0 +1,49 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import { newsLetterForm } from '../../../constants/forms';
+
+import Newsletter from '.';
+
+export default {
+  title: 'Theme/Layout/Newsletter/Newsletter',
+  component: Newsletter,
+  argTypes: {
+    page: {
+      name: 'page',
+      type: { name: 'object', required: true },
+      defaultValue: null,
+      description: 'The page object.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Newsletter component',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <Newsletter {...args} isSticky={false} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  page: {},
+  ...newsLetterForm.default,
+  openBtnText: 'Unlock Bonuses',
+};

package/src/components/molecules/newsletter/success/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IoMdCheckmarkCircleOutline } from '@react-icons/all-files/io/IoMdCheckmarkCircleOutline';
+
+import Modal from '~atoms/modal';
+
+const index = ({
+  text = {
+    title: 'You are registered!!!',
+    section: 'Now there are lots of extra goodies that are on their way to your inbox.',
+    footer: 'All the best and good luck in the casino world!',
+  },
+}) => (
+  <Modal>
+    <IoMdCheckmarkCircleOutline color="green" title="Check Icon" />
+    <p>{text.title}</p>
+    <div>
+      {text.section}
+      <p>{text.footer}</p>
+    </div>
+  </Modal>
+);
+
+export default index;

package/src/components/molecules/newsletter/toggle-button/index.js

@@ -0,0 +1,26 @@
+/* eslint-disable react/button-has-type */
+/* eslint-disable arrow-body-style */
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './newsletter-button.module.scss';
+
+const NewsletterButton = ({ text = 'Bonus alert', toggleNewsLetter, active = true }) => {
+  return (
+    <button
+      onClick={toggleNewsLetter}
+      className={`${styles?.button || ''} ${active ? styles.active || '' : ''}`}
+    >
+      {text}
+    </button>
+  );
+};
+
+NewsletterButton.propTypes = {
+  text: PropTypes.string,
+  toggleNewsLetter: PropTypes.bool,
+  active: PropTypes.bool,
+};
+
+export default NewsletterButton;

package/src/components/molecules/newsletter/toggle-button/newsletter-button.module.scss

@@ -0,0 +1,33 @@
+.button {
+  border: none;
+  background-color: #00889e;
+  padding: 1rem;
+  color: white;
+  border-radius: 0 0.5rem 0.5rem 0;
+  position: fixed;
+  z-index: var(--scroll-to-top-index);
+}
+@include max(mobile) {
+  .button {
+    bottom: -70rem;
+    width: 100%;
+  }
+  .active {
+    border-radius: 0;
+    bottom: 0;
+  }
+}
+.active {
+  transition: 0s;
+}
+
+@include min(tablet) {
+  .button {
+    width: 15rem;
+    left: -70rem;
+    top: 50vh;
+  }
+  .active {
+    left: 0;
+  }
+}

package/src/components/organisms/form/fields/fields.module.scss

@@ -0,0 +1,41 @@
+
+.radioGroup,
+.checkboxGroup,
+.textareaGroup {
+  @include flex-direction(column);
+
+  > div {
+    @include flex-align(center, flex-start);
+    gap: 0.8rem;
+    font-weight: normal;
+  }
+
+  label {
+    font-weight: 400;
+    color: #3c3c40;
+
+    > a {
+      color: #165af8;
+      text-decoration: underline;
+      font-weight: 500;
+    }
+  }
+}
+
+.textareaGroup {
+  @include flex-align(flex-end, flex-start);
+
+  > span {
+    font-size: 1.4rem;
+    font-weight: 400;
+    line-height: 2.2rem;
+  }
+}
+
+.rangeValues {
+  @include flex-align(center, space-between);
+   
+  .invalid {
+    color: var(--color-39, 'red');
+  }
+}