gatsby-core-theme 27.0.1 → 28.0.0

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+# [28.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v27.0.1...v28.0.0) (2023-08-22)
+
+
+### Code Refactoring
+
+* add ([1fb65d2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1fb65d24108a9e258a33bec5aba9e3b55476b4e5))
+* add button label ([6fffc12](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6fffc12888e0f53e0bd93b3d9f5d1767bd4106a1))
+* add multiple markets, validations, tests, recaptcha validation ([b5b5c36](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b5b5c367bdaeacfe67d76ba071b5599b249d0763))
+* add prop to show/hide button icon ([528d5f3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/528d5f33ef13c271c7e419d798408fd7de173486))
+* add recaptcha to form fields ([f2a77b9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f2a77b9d999f313cbeb50fc17272be5debc1e735))
+* change button style so on site level it adapts the primary button styles ([9f565ce](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9f565cebf9fae352e1784cf7db91163c2f0faf04))
+* change to test ([1132888](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/113288861a9087325d2a2549ed6fcda4995673c7))
+* changes to qa feedback and enable to add links inside field labels ([578b21b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/578b21b7884229b1918ecde872ac84081a670c54))
+* correction to label display condition ([305c026](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/305c026fa53a64d8fc451695adc2b5ebdc28cba3))
+* correction to validation ([2d2ebbc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2d2ebbc6586827251786afef376ba10be8fdd4d6))
+* form link styles ([0c1dbd9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0c1dbd97ef2ff9f7b94708b33af113162647cbe5))
+* remove test recpatcha ([65401aa](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/65401aad2e185c1355aca5cf54b9d66a90432af6))
+* remove unused vars and correction to form storybook ([01545ef](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/01545ef5685c9559221766356c4b821ca844e4f8))
+* remove unwanted state ([9704234](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/97042348141c2f6afd3e1b030a7f537539ffc9cb))
+
+
+* Merge branch 'tm-3556-contact-us-page' into 'master' ([c79e7d8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c79e7d846b6bc84f006fcc54f0e1f6b2bc524010))
+* Merge branch 'master' into tm-3556-contact-us-page ([3984e56](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3984e56d59ac1939eae7d2828ee9337bca43311d))
+* Merge branch 'master' into tm-3556-contact-us-page ([960071a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/960071a5f887163d1d293c610334f75a07566261))
+
+
+### Tests
+
+* test for components ([5784586](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5784586cbc8e7675956b70f75ae8a5135568208d))
+
 ## [27.0.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v27.0.0...v27.0.1) (2023-08-21)
 
 

package/package.json

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

package/src/components/atoms/contact-form/contact-form.stories.js

@@ -7,12 +7,22 @@ import {
   PRIMARY_STORY,
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
-import { siteSchema } from 'gatsby-core-theme/tests/factories/modules/site-schema.factory';
+import getPageList from '~tests/factories/pages/page.factory';
 import ContactForm from '.';
 
-const page = {};
-siteSchema.support_email = 'contact@irishluck.ie';
-page.siteSchema = { ...siteSchema };
+const relationType = 'default';
+const market = 'ie_en';
+const samplePages = {
+  [market]: {
+    [relationType]: getPageList({
+      template: relationType,
+      count: 3,
+      relation: null,
+      relation_id: 5,
+      market,
+    }),
+  },
+};
 
 export default {
   title: 'Theme/Modules/Template Blocks/Contact Form',
@@ -52,6 +62,36 @@ export default {
       defaultValue: 'Fill all the required fields.',
       description: 'sent message info',
     },
+    buttonLabel: {
+      name: 'buttonLabel',
+      type: { name: 'string', required: false },
+      defaultValue: 'Send Message',
+      description: 'Send button text',
+    },
+    showButtonIcon: {
+      name: 'showButtonIcon',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/hide button icon',
+    },
+    showLabels: {
+      name: 'showLabels',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/hide form field lables',
+    },
+    showHeading: {
+      name: 'showHeading',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/hide intro title of page',
+    },
+    showDescription: {
+      name: 'showDescription',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/hide intro description of page',
+    },
   },
   parameters: {
     docs: {
@@ -73,5 +113,5 @@ export default {
 const Template = (args) => <ContactForm {...args} />;
 export const Default = Template.bind({});
 Default.args = {
-  page,
+  page: samplePages[market][relationType][0],
 };

package/src/components/atoms/contact-form/contact-form.test.js

@@ -2,38 +2,80 @@
 import React from 'react';
 import { render, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { siteSchema } from 'gatsby-core-theme/tests/factories/modules/site-schema.factory';
+import getPageList from '~tests/factories/pages/page.factory';
 import ContactForm from '.';
 
-const page = {};
+let samplePages;
+const relationType = 'default';
+const market = 'ie_en';
 
 beforeEach(() => {
-  page.siteSchema = { ...siteSchema };
+  samplePages = {
+    [market]: {
+      [relationType]: getPageList({
+        template: relationType,
+        count: 3,
+        relation: null,
+        relation_id: 5,
+        market,
+      }),
+    },
+  };
 });
 describe('Contact Us form Component', () => {
   test('render contact us form and follow us titles', async () => {
-    const { container } = render(<ContactForm page={page} submitUrl="submit" />);
+    const { container } = render(
+      <ContactForm page={samplePages[market][relationType][0]} submitUrl="submit" />
+    );
 
     await waitFor(() => {
       expect(container).toBeTruthy();
       expect(container.querySelector('H1').innerHTML).toBe('Contact Us');
     });
   });
+  test('render form without main heading and description ', () => {
+    const { container } = render(
+      <ContactForm
+        page={samplePages[market][relationType][0]}
+        submitUrl="submit"
+        showHeading={false}
+        showDescription={false}
+      />
+    );
+
+    expect(container.querySelector('h1')).toBeFalsy();
+  });
   test('render contact us form ', async () => {
-    const { container } = render(<ContactForm page={page} submitUrl="submit" />);
+    const { container } = render(
+      <ContactForm page={samplePages[market][relationType][0]} submitUrl="submit" />
+    );
 
     await waitFor(() => {
       expect(container.querySelector('.contactForm')).toBeTruthy();
-      expect(container.querySelector('.contactForm').querySelectorAll('input')).toHaveLength(3);
+      expect(container.querySelector('.contactForm').querySelectorAll('input')).toHaveLength(4);
       expect(
         container.querySelector('.contactForm').querySelectorAll('input[type="text"]')
-      ).toHaveLength(1);
+      ).toHaveLength(2);
       expect(
         container.querySelector('.contactForm').querySelectorAll('input[type="email"]')
       ).toHaveLength(1);
       expect(container.querySelector('.contactForm').querySelectorAll('textarea')).toHaveLength(1);
     });
   });
+  test('render form without labels ', () => {
+    const { container } = render(
+      <ContactForm
+        page={samplePages[market][relationType][0]}
+        submitUrl="submit"
+        showLabels={false}
+      />
+    );
+
+    expect(container.querySelectorAll('input[type="text"]').length).toEqual(2);
+    expect(container.querySelector('textarea')).toBeTruthy();
+    expect(container.querySelector('.formGroup').querySelector('label')).toBeFalsy();
+    expect(container.querySelectorAll('label').length).toEqual(1);
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/atoms/contact-form/index.js

@@ -7,32 +7,42 @@ import { contactUsForm } from '../../../constants/forms';
 import styles from './contact-form.module.scss';
 
 const ContactForm = ({
-  submitUrl,
+  page,
+  submitUrl = '',
   successMessage = 'Message sent successfully.',
   failMessage = 'Message failed to send.',
   validationMessage = 'Fill all the required fields.',
+  buttonLabel = 'Send Message',
+  showButtonIcon = true,
+  showLabels = true,
+  showHeading = true,
+  showDescription = true,
 }) => {
   const { translations } = useContext(Context) || {};
+  const activeMarket = page?.market;
 
   return (
-    <div className={styles.contactForm}>
-      <div className={styles.contactBox}>
-        <div className={styles.formWrapper}>
-          <h1>{translate(translations, 'contact_us', 'Contact Us')}</h1>
-          <p>
-            {translate(
-              translations,
-              'contact_us_questions',
-              `If you have questions about our reviews, games or content, or just want to leave some
-          feedback, the Irish Luck team would love to hear from you. You can contact us any time
-          using the details below and we'll endeavour to get back to you within 48 hours.`
-            )}
-          </p>
+    <div className={styles.contactForm || ''}>
+      <div className={styles.contactBox || ''}>
+        <div className={styles.formWrapper || ''}>
+          {showHeading && <h1>{translate(translations, 'contact_us', 'Contact Us')}</h1>}
+          {showDescription && (
+            <p>
+              {translate(
+                translations,
+                'contact_us_questions',
+                `If you have questions about our reviews, games or content, or just want to leave some
+            feedback, the Irish Luck team would love to hear from you. You can contact us any time
+            using the details below and we'll endeavour to get back to you within 48 hours.`
+              )}
+            </p>
+          )}
           <Form
-            formOptions={contactUsForm}
-            type="contact"
+            formOptions={contactUsForm[activeMarket]}
+            showLabels={showLabels}
             hasButton
-            buttonLabel={translate(translations, 'send_msg', 'Send Message')}
+            showButtonIcon={showButtonIcon}
+            buttonLabel={buttonLabel}
             submitUrl={submitUrl}
             successMessage={successMessage}
             failMessage={failMessage}
@@ -47,9 +57,16 @@ const ContactForm = ({
 export default ContactForm;
 
 ContactForm.propTypes = {
-  page: PropTypes.shape({}).isRequired,
+  page: PropTypes.shape({
+    market: PropTypes.string,
+  }).isRequired,
   submitUrl: PropTypes.string,
   successMessage: PropTypes.string,
   failMessage: PropTypes.string,
   validationMessage: PropTypes.string,
+  buttonLabel: PropTypes.string,
+  showButtonIcon: PropTypes.bool,
+  showLabels: PropTypes.bool,
+  showHeading: PropTypes.bool,
+  showDescription: PropTypes.bool,
 };

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

@@ -24,15 +24,16 @@
   }
 
   h2 {
-    font-size: 2rem;
-    line-height: 2.8rem;
+    font-size: 2.4rem;
+    line-height: 3.2rem;
     font-weight: 700;
     text-transform: capitalize; 
     margin: 0;
+    color: #1b1b1c;
 
     @include min(tablet) {
-      font-size: 2.8rem;
-      line-height: 3.6rem;
+      font-size: 3.2rem;
+      line-height: 4rem;
     } 
   }
 
@@ -84,6 +85,9 @@
     height: 12rem;
     display: block;
     resize: vertical;
+    resize: none;
+    height: 20.8rem;
+    padding: 1.2rem;
   }
 
   label {
@@ -103,12 +107,26 @@
   }
 
   button {
-    @include buttonsColor(var(--primary-button-color, #6E33E5), var(--primary-button-color-hover, #776ABA), var(--primary-button-color-active, #998FCB), var(--primary-button-color-text, #FFFFFF));   
+    align-items: center;
+    background-color: var(--primary-button-color,#6e33e5) !important;
+    border-radius: 100px !important;
+    color: var(--primary-button-color-text,#fff) !important;
+    display: inline-flex !important;
+    font-size: 1.8rem;
+    font-weight: 700;
+    gap: 0.4rem;
+    justify-content: center;
     line-height: 2.7rem;
+    padding: 1.6rem 2.4rem !important;
+    text-align: center;
     text-transform: capitalize;
-    gap: 0.4rem;
-    padding: 1.6rem 2.4rem;
-    border-radius: 100px;
+    
+    &:hover,
+    &:focus {
+      background: var(--primary-button-color,#6e33e5) !important;
+      border-radius: 100px !important;
+      color: var(--primary-button-color-text,#fff) !important;
+    }
   }
 }
 
@@ -123,11 +141,22 @@
 .textareaGroup {
   @include flex-direction(column);
 
-  > label {
+  > 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 {
@@ -191,6 +220,16 @@
   color: var(--color-39);
 }
 
+.alertWarningMessage {
+  @include flex-align(center, flex-start);
+  gap: 0.5rem;
+  background: var(--color-39);
+  border-radius: 0.4rem;
+  color: var(--color-4);
+  margin-top: 0.8rem;
+  padding: 8px;
+}
+
 .twoCol {
   @include flex-direction(column);
   gap: 2.4rem;
@@ -221,4 +260,30 @@
   button {
     width: auto;
   }
+}
+
+.recaptcha {
+  overflow: hidden;
+
+  &.invalid {
+    border: 1px solid var(--color-39);
+    color: var(--color-39);
+  }
+  
+  // override overflowing styles
+  > div > div > div {
+    width: 100% !important;
+
+    iframe {
+      width: 100%;
+    }
+
+    @include min(tablet) {
+      width: 304px !important;
+
+      iframe {
+        width: 304px;
+      }
+    }
+  }
 }

package/src/components/organisms/form/form.stories.js

@@ -127,5 +127,5 @@ const Template = (args) => <Form {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  formOptions: contactUsForm,
+  formOptions: contactUsForm.ie_en,
 };

package/src/components/organisms/form/form.test.js

@@ -11,7 +11,7 @@ describe('Form Component', () => {
   test('render contact form ', () => {
     const { container } = render(
       <Form
-        formOptions={contactUsForm}
+        formOptions={contactUsForm.ie_en}
         hasButton
         type="contact"
         submitUrl="https://submit-form.com"
@@ -20,12 +20,14 @@ describe('Form Component', () => {
     expect(container.querySelector('input[type="text"]')).toBeTruthy();
     expect(container.querySelector('input[type="email"]')).toBeTruthy();
     expect(container.querySelector('textarea')).toBeTruthy();
+    expect(container.querySelector('label')).toBeTruthy();
+    expect(container.querySelectorAll('label').length).toEqual(5);
     expect(container.querySelector('button')).toBeTruthy();
   });
   test('render newsletter form ', () => {
     const { container } = render(
       <Form
-        formOptions={newsLetterForm}
+        formOptions={newsLetterForm.ie_en}
         hasButton
         type="newsletter"
         submitUrl="https://submit-form.com"
@@ -36,11 +38,25 @@ describe('Form Component', () => {
     expect(container.querySelector('textarea')).toBeFalsy();
     expect(container.querySelector('button')).toBeTruthy();
   });
-
+  test('render form without labels ', () => {
+    const { container } = render(
+      <Form
+        formOptions={contactUsForm.ie_en}
+        hasButton
+        type="contact"
+        submitUrl="https://submit-form.com"
+        showLabels={false}
+      />
+    );
+    expect(container.querySelectorAll('input[type="text"]').length).toEqual(2);
+    expect(container.querySelector('textarea')).toBeTruthy();
+    expect(container.querySelector('.formGroup').querySelector('label')).toBeFalsy();
+    expect(container.querySelectorAll('label').length).toEqual(1);
+  });
   test('on change', async () => {
     render(
       <Form
-        formOptions={contactUsForm}
+        formOptions={contactUsForm.ie_en}
         hasButton
         type="contact"
         submitUrl="https://submit-form.com"
@@ -62,7 +78,7 @@ describe('Form Component', () => {
     act(() => {
       ReactDOM.render(
         <Form
-          formOptions={contactUsForm}
+          formOptions={contactUsForm.ie_en}
           hasButton
           type="contact"
           submitUrl="https://submit-form.com"
@@ -82,7 +98,7 @@ describe('Form Component', () => {
   test('handle submit with filled fields', async () => {
     const { container } = render(
       <Form
-        formOptions={newsLetterForm}
+        formOptions={newsLetterForm.ie_en}
         hasButton
         disabled={false}
         type="newsletter"

package/src/components/organisms/form/index.js

@@ -14,6 +14,7 @@ const FormComponent = ({
   validationMessage = 'Fill all the required fields.',
   submitUrl = '',
   hasButton = true,
+  showButtonIcon = true,
   buttonLabel = 'Submit',
   disabled = true,
   showLabels = true,
@@ -26,13 +27,12 @@ const FormComponent = ({
     failed: false,
     isValid: true,
     isDisabled: disabled,
-    name: '',
-    email: '',
-    message: '',
   });
   const values = formOptions.fields.map((field) => ({
     [field.id]: field.value ? field.value : '',
   }));
+  // add recaptcha if its added in form options
+  if (formOptions.hasReCAPTCHA) values.push({ gRecaptchaResponse: '' });
   const [elements, setElements] = useState(Object.assign({}, ...values));
 
   const handleChange = (name, value) => {
@@ -96,41 +96,41 @@ const FormComponent = ({
           isValid: true,
         });
       });
-    recaptchaRef.current.reset();
+    recaptchaRef?.current?.reset();
   };
 
   function recaptchaOnChange(value) {
     // eslint-disable-next-line no-unused-expressions
-    value && setState({ ...state, isDisabled: false });
+    if (value) {
+      setState({ ...state, isDisabled: false });
+      setElements({ ...elements, gRecaptchaResponse: value });
+    }
   }
 
   const getField = (field) => {
-    const { type, id, translationKey, label, ...props } = field;
+    const { type, id, translationKey, label, placeholder, ...props } = field;
 
     switch (type) {
       case 'textarea':
         return (
-          <div className={styles.textareaGroup}>
+          <div className={styles.textareaGroup || ''}>
             <textarea
               name={id}
               id={id}
+              placeholder={translate(translations, placeholder?.translationKey, placeholder?.label)}
               {...props}
               value={elements[id]}
               onChange={(e) => handleChange(e.target.name, e.target.value)}
-              className={`${!state.isValid && elements[id] === '' && styles.invalid}`}
+              className={`${(!state.isValid && elements[id] === '' && styles.invalid) || ''}`}
             />
             {field.maxLength && <span>{`${elements[id].length}/${field.maxLength}`}</span>}
           </div>
         );
       case 'checkbox':
         return (
-          <div className={styles.checkboxGroup}>
+          <div className={styles.checkboxGroup || ''}>
             {field.options.map((option) => (
-              <label
-                key={option.id}
-                htmlFor={option.id}
-                className={`${!state.isValid && !elements[option.id].length && styles.invalid}`}
-              >
+              <div key={option.id}>
                 <input
                   id={option.id}
                   name={option.id}
@@ -138,29 +138,38 @@ const FormComponent = ({
                   checked={elements[option.id] === 'true'}
                   onChange={(e) => handleChange(e.target.name, e.target.checked.toString())}
                 />
-                {translate(translations, option.translationKey, option.label)}
-              </label>
+                <label
+                  htmlFor={option.id}
+                  className={`${
+                    (!state.isValid && !elements[option.id].length && styles.invalid) || ''
+                  }`}
+                >
+                  {translate(translations, option.translationKey, option.label)}
+                </label>
+              </div>
             ))}
           </div>
         );
       case 'radio':
         return (
-          <div className={styles.radioGroup}>
+          <div className={styles.radioGroup || ''}>
             {field.options.map((option) => (
-              <label
-                key={option.id}
-                htmlFor={option.id}
-                className={`${!state.isValid && elements[id] === '' && styles.invalid}`}
-              >
+              <div key={option.id}>
                 <input
                   id={option.id}
                   name={id}
                   type={type}
                   checked={elements[id] === option.label}
                   onChange={(e) => handleChange(e.target.name, option.label)}
-                />{' '}
-                {translate(translations, option.translationKey, option.label)}
-              </label>
+                />
+                <label
+                  key={option.id}
+                  htmlFor={option.id}
+                  className={`${(!state.isValid && elements[id] === '' && styles.invalid) || ''}`}
+                >
+                  {translate(translations, option.translationKey, option.label)}
+                </label>
+              </div>
             ))}
           </div>
         );
@@ -172,7 +181,7 @@ const FormComponent = ({
             name={id}
             defaultValue={elements[id]}
             onChange={(e) => handleChange(e.target.name, e.target.value)}
-            className={`${!state.isValid && elements[id] === '' && styles.invalid}`}
+            className={`${(!state.isValid && elements[id] === '' && styles.invalid) || ''}`}
           >
             {field.showDefault && (
               <option value="">
@@ -188,7 +197,7 @@ const FormComponent = ({
         );
       case 'range':
         return (
-          <div className={styles.radioGroup}>
+          <div className={styles.radioGroup || ''}>
             <input
               name={id}
               id={id}
@@ -198,9 +207,11 @@ const FormComponent = ({
               value={elements[id]}
               onChange={(e) => handleChange(e.target.name, e.target.value)}
             />
-            <div className={styles.rangeValues}>
+            <div className={styles.rangeValues || ''}>
               <span>{field.min}</span>
-              <span className={`${!state.isValid && elements[id] === '' && styles.invalid}`}>
+              <span
+                className={`${(!state.isValid && elements[id] === '' && styles.invalid) || ''}`}
+              >
                 {elements[id] || 'Selected Value'}
               </span>
               <span>{field.max}</span>
@@ -214,10 +225,11 @@ const FormComponent = ({
             id={id}
             type={type}
             aria-describedby={id}
+            placeholder={translate(translations, placeholder?.translationKey, placeholder?.label)}
             {...props}
             value={elements[id]}
             onChange={(e) => handleChange(e.target.name, e.target.value)}
-            className={`${!state.isValid && elements[id] === '' && styles.invalid}`}
+            className={`${(!state.isValid && elements[id] === '' && styles.invalid) || ''}`}
           />
         );
     }
@@ -247,7 +259,7 @@ const FormComponent = ({
       >
         {formOptions.fields &&
           formOptions.fields.map((field) => {
-            const { id, translationKey, label } = field;
+            const { id, translationKey, label, validations } = field;
 
             return (
               <div
@@ -260,18 +272,40 @@ const FormComponent = ({
                   <label htmlFor={id}>{translate(translations, translationKey, label)}</label>
                 )}
                 {elements && getField(field)}
+                {validations && !state.isValid && elements[id] === '' && (
+                  <span className={styles.alertWarningMessage || ''}>
+                    {validations?.icon}
+                    {translate(translations, validations?.translationKey, validations?.label)}
+                  </span>
+                )}
               </div>
             );
           })}
 
         {formOptions.hasReCAPTCHA && (
-          <div className={styles.recaptcha || ''}>
+          <div
+            className={`${styles.recaptcha || ''} ${
+              (!state.isValid && elements.gRecaptchaResponse === '' && styles.invalid) || ''
+            }`}
+          >
             <ReCAPTCHA
               ref={recaptchaRef}
               sitekey={`${process.env.RECAPTCHA_SITE_KEY}`}
               // eslint-disable-next-line react/jsx-no-bind
               onChange={recaptchaOnChange}
             />
+            {!state.isValid &&
+              elements.gRecaptchaResponse === '' &&
+              formOptions?.reCaptcha?.validations && (
+                <span className={styles.alertWarningMessage || ''}>
+                  {formOptions?.reCaptcha?.validations?.icon}
+                  {translate(
+                    translations,
+                    formOptions?.reCaptcha?.validations?.translationKey,
+                    formOptions?.reCaptcha?.validations.label
+                  )}
+                </span>
+              )}
           </div>
         )}
         {hasButton && (
@@ -281,12 +315,12 @@ const FormComponent = ({
               btnText={state.loading ? 'sending...' : buttonLabel}
               disabled={state.loading}
               gtmClass="form-gtm btn-cta"
-              noStyle
-              icon={<FaArrowRight fontSize={20} />}
+              primaryColor
+              icon={showButtonIcon ? <FaArrowRight fontSize={20} /> : null}
             />
           </div>
         )}
-        {(state.success || state.failed || state.isValid) && (
+        {(state.success || state.failed || !state.isValid) && (
           <div className={styles.formAlerts || ''}>
             {state.success && <div className={styles.alertSuccess || ''}>{successMessage}</div>}
             {state.failed && <div className={styles.alertDanger || ''}>{failMessage}</div>}
@@ -308,5 +342,6 @@ FormComponent.propTypes = {
   buttonLabel: PropTypes.string,
   disabled: PropTypes.bool,
   showLabels: PropTypes.bool,
+  showButtonIcon: PropTypes.bool,
 };
 export default FormComponent;

package/src/constants/forms.js

@@ -1,100 +1,166 @@
+import React from 'react';
+// import { IoMdCloseCircleOutline } from '@react-icons/all-files/io/IoMdCloseCircleOutline';
+import { replaceWith } from '~helpers/strings';
+
 export const contactUsForm = {
-  title: {
-    label: 'Send us a message',
-    translationKey: 'send_us_a_msg',
-  },
-  twoCol: true,
-  hasReCAPTCHA: true,
-  fields: [
-    {
-      label: 'Name',
-      id: 'name',
-      type: 'text',
-      placeholder: 'Text placeholder',
-      translationKey: 'text_translation',
-      twoCol: true,
+  ie_en: {
+    title: {
+      label: 'Send us a message',
+      translationKey: 'send_us_a_msg',
     },
-    {
-      label: 'Email Address',
-      id: 'email',
-      type: 'email',
-      placeholder: 'Email@placeholder.com',
-      translationKey: 'email_translation',
-      twoCol: true,
+    twoCol: false,
+    hasReCAPTCHA: true,
+    reCaptcha: {
+      // validations: {
+      //   label: 'Please confirm',
+      //   translationKey: 'valid_recaptcha',
+      //   icon: <IoMdCloseCircleOutline />,
+      // }
     },
-    {
-      label: 'Textarea',
-      id: 'comment',
-      type: 'textarea',
-      placeholder: 'Textarea placeholder',
-      translationKey: 'textarea_translation',
-      maxLength: '10',
-      twoCol: false,
-    },
-    {
-      id: 'tnc',
-      type: 'checkbox',
-      required: true,
-      translationKey: 'checkbox_translation',
-      twoCol: false,
-      options: [
-        {
-          id: 'tnc',
-          label:
-            '+18 Lorem ipsum dolor sit amet consectetur. Egestas nibh ullamcorper venenatis vulputate. Sed elit diam at id feugiat orci ornare Privacy Policy',
-          translationKey: 'option_one_translation',
+    fields: [
+      {
+        label: 'Field Label',
+        translationKey: 'text_translation',
+        id: 'name',
+        type: 'text',
+        placeholder: {
+          label: 'Write something',
+          translationKey: 'field_placeholder',
         },
-      ],
-    },
-  ],
+        twoCol: true,
+        // validations: {
+        //   label: 'Please enter a name',
+        //   translationKey: 'valid_name',
+        //   icon: <IoMdCloseCircleOutline />,
+        // }
+      },
+      {
+        label: 'Email Address',
+        id: 'email',
+        type: 'email',
+        placeholder: {
+          label: 'Email@placeholder.com',
+          translationKey: 'field_placeholder',
+        },
+        translationKey: 'email_translation',
+        twoCol: true,
+        // validations: {
+        //   label: 'Please enter a valid email address',
+        //   translationKey: 'valid_email',
+        //   icon: <IoMdCloseCircleOutline />,
+        // }
+      },
+      {
+        label: 'Field Label',
+        id: 'subject',
+        type: 'text',
+        placeholder: {
+          label: 'Write something',
+          translationKey: 'field_placeholder',
+        },
+        translationKey: 'text_translation',
+        twoCol: true,
+        // validations: {
+        //   label: 'Please enter a subject',
+        //   translationKey: 'valid_subject',
+        //   icon: <IoMdCloseCircleOutline />,
+        // }
+      },
+      {
+        label: 'Field Label',
+        id: 'comment',
+        type: 'textarea',
+        placeholder: {
+          label: 'Write something',
+          translationKey: 'field_placeholder',
+        },
+        translationKey: 'textarea_translation',
+        maxLength: '1000',
+        twoCol: false,
+        // validations: {
+        //   label: 'Please enter a message',
+        //   translationKey: 'valid_message',
+        //   icon: <IoMdCloseCircleOutline />,
+        // }
+      },
+      {
+        id: 'tnc',
+        type: 'checkbox',
+        required: true,
+        translationKey: 'checkbox_translation',
+        twoCol: false,
+        options: [
+          {
+            id: 'tnc',
+            label: replaceWith(
+              '+18 Lorem ipsum dolor sit amet consectetur. Egestas nibh ullamcorper venenatis vulputate. Sed elit diam at id feugiat orci ornare [keyword]',
+              '[keyword]',
+              <a href="/privacy-policy">Privacy Policy</a>
+            ),
+            translationKey: 'option_one_translation',
+          },
+        ],
+        // validations: {
+        //   label: 'Please select at least one',
+        //   translationKey: 'valid_check',
+        //   icon: <IoMdCloseCircleOutline />,
+        // }
+      },
+    ],
+  },
 };
 
 export const newsLetterForm = {
-  title: {
-    label: 'Sign up To our newsletters ',
-    translationKey: 'sign_up_newsletter',
-  },
-  description: {
-    label:
-      "If you have questions about our reviews, games or content, or just want to leave some feedback, the Irish Luck team would love to hear from you. You can contact us any time using the details below and we'll endeavour to get back to you within 48 hours.",
-    translationKey: 'contact_us_questions',
-  },
-  twoCol: true,
-  hasReCAPTCHA: false,
-  fields: [
-    {
-      label: 'Name',
-      id: 'name',
-      type: 'text',
-      placeholder: 'Text placeholder',
-      translationKey: 'text_translation',
-      twoCol: true,
-      // required: true,
+  ie_en: {
+    title: {
+      label: 'Sign up To our newsletters ',
+      translationKey: 'sign_up_newsletter',
     },
-    {
-      label: 'Email Address',
-      id: 'email',
-      type: 'email',
-      placeholder: 'Email@placeholder.com',
-      translationKey: 'email_translation',
-      twoCol: true,
-      // required: true,
+    description: {
+      label:
+        "If you have questions about our reviews, games or content, or just want to leave some feedback, the Irish Luck team would love to hear from you. You can contact us any time using the details below and we'll endeavour to get back to you within 48 hours.",
+      translationKey: 'contact_us_questions',
     },
-    {
-      label: 'Terms',
-      id: 'tnc',
-      type: 'checkbox',
-      required: true,
-      translationKey: 'checkbox_translation',
-      twoCol: false,
-      options: [
-        {
-          id: 'tnc',
-          label:
-            '+18 Lorem ipsum dolor sit amet consectetur. Egestas nibh ullamcorper venenatis vulputate. Sed elit diam at id feugiat orci ornare Privacy Policy',
-          translationKey: 'option_one_translation',
-        },
-      ],
-    },
-  ],
+    twoCol: true,
+    hasReCAPTCHA: false,
+    fields: [
+      {
+        label: 'Name',
+        id: 'name',
+        type: 'text',
+        placeholder: 'Text placeholder',
+        translationKey: 'text_translation',
+        twoCol: true,
+        // required: true,
+      },
+      {
+        label: 'Email Address',
+        id: 'email',
+        type: 'email',
+        placeholder: 'Email@placeholder.com',
+        translationKey: 'email_translation',
+        twoCol: true,
+        // required: true,
+      },
+      {
+        label: 'Terms',
+        id: 'tnc',
+        type: 'checkbox',
+        required: true,
+        translationKey: 'checkbox_translation',
+        twoCol: false,
+        options: [
+          {
+            id: 'tnc',
+            label: replaceWith(
+              '+18 Lorem ipsum dolor sit amet consectetur. Egestas nibh ullamcorper venenatis vulputate. Sed elit diam at id feugiat orci ornare [keyword]',
+              '[keyword]',
+              <a href="/privacy-policy">Privacy Policy</a>
+            ),
+            translationKey: 'option_one_translation',
+          },
+        ],
+      },
+    ],
+  },
 };

package/src/helpers/strings.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { imagePrettyUrl } from './getters';
 
 export function capitalize(string) {
@@ -70,3 +71,10 @@ export function parseContentImageUrl(src) {
 }
 
 export const removeSymbols = (string) => string.replace(/[!?@£#$%^&*():;"'|/.,~`]/g, '');
+
+export function replaceWith(string, replaceThis, replacement) {
+  return string
+    .split(replaceThis)
+    .map((item) => <>{item}</>)
+    .reduce((acc, x) => (acc === null ? [x] : [acc, replacement, x]), null);
+}

package/src/helpers/strings.test.js

@@ -1,3 +1,6 @@
+import React from 'react';
+import { render, cleanup, fireEvent, screen, waitFor, shallow } from '@testing-library/react';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import * as Strings from './strings';
 
 describe('Strings Helper', () => {

package/tests/factories/modules/site-schema.factory.js

@@ -11,6 +11,7 @@ export const siteSchema = {
   phone_number: null,
   site_name: null,
   spotify: 'https://www.spotify.com/',
+  support_email: 'sales@irishluck.ie',
   twitter: 'https://www.twitter.com/',
   wikipedia: 'https://www.wikipedia.com/',
   youtube: 'https://www.youtube.com/',