graphql-engine/docs/_static/scripts/newsletter.js

const email_input = document.getElementById('mce-EMAIL');
const submit_btn = document.getElementById('mc-embedded-subscribe');
const mcStatusSuccess = document.getElementById('mce-success-response');
const mcStatusError = document.getElementById('mce-error-response');

email_input.addEventListener('input', function() {
    submit_btn.value = 'Subscribe';
    submit_btn.disabled = false;

    mcStatusError.innerHTML = '';
    mcStatusError.classList.add('hide');
});

const readCookie = (name) => {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for(let i=0;i < ca.length;i++) {
    let c = ca[i];
    while (c.charAt(0)===' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

const showErrorMsg = () => {
    submit_btn.value = 'Subscribe';
    submit_btn.disabled = false;
    mcStatusError.innerHTML = 'Please enter a valid email';
    mcStatusError.classList.remove('hide');
    clearMsg();
};

const clearMsg = () => {
    setTimeout(function(){
        mcStatusSuccess.innerHTML = '';
        mcStatusError.innerHTML = '';

        mcStatusSuccess.classList.add('hide');
        mcStatusError.classList.add('hide');
        submit_btn.disabled = true;
        //reset input
        email_input.value = '';
    }, 3000);
}

const submitNewsletterForm = function (form) {

    let gqlEndpoint = 'https://graphql-engine-website.hasura.io/v1/graphql';
    if(window.location.host !== "hasura.io") {
        gqlEndpoint = 'https://graphql-engine-website.hasura-stg.hasura-app.io/v1/graphql';
    }
    // change button state
    submit_btn.value = 'Subscribing...';
    submit_btn.disabled = true;

    const email = form.elements["EMAIL"].value;

    const hbs_context = {
        "hutk": readCookie("hubspotutk"), // include this parameter and set it to the hubspotutk cookie value to enable cookie tracking on your submission
        "pageUri": window.location.host + window.location.pathname,
        "pageName": document.title,
    };

    const gqlMutation = `mutation docsNewsletterSignup($objects: [newsletterSignupInput!]! ) {
      signupNewsletter(objects: $objects) {
        affected_rows
      }
    }`;

    const objects = [{
        "email": email,
        "hbs_context": hbs_context,
        "category": "docs"
    }];

    fetch(gqlEndpoint, {
      method: 'POST',
      body: JSON.stringify({
          query: gqlMutation,
          variables: { objects: objects }
      }),
    })
    .then(response => response.json())
    .then(data => {
        // change button state
        submit_btn.value = 'Subscribe';
        submit_btn.disabled = false;
        if(data && data.data && data.data.signupNewsletter.affected_rows) {
            mcStatusSuccess.innerHTML = 'Thank you for subscribing!';
            mcStatusSuccess.classList.remove('hide');
        } else {
            if(data.errors && data.errors[0].extensions.code === 'constraint-violation') {
                mcStatusError.innerHTML = 'You have already subscribed';
            } else {
                mcStatusError.innerHTML = 'Something went wrong';
            }
            mcStatusError.classList.remove('hide');
        }
        clearMsg();
    })
    .catch((error) => {
        console.error('Error:', error);
        submit_btn.value = 'Subscribe';
        submit_btn.disabled = false;
    });

};

document.addEventListener('submit', function (event) {

    // Only run on forms flagged for newsletter-form validation
    if (!event.target.classList.contains('newsletter-form')) return;

    // Prevent form from submitting
    event.preventDefault();

    // email validation
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if(!emailPattern.test(email_input.value)) {
      showErrorMsg();
      return;
    }

    // Otherwise, let the form submit normally
    submitNewsletterForm(event.target);


}, false);