src/components/Footer/Subscribe.js

import React, { Component } from 'react'
import axios from 'axios'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import styles from './Subscribe.module.scss'
import { MAILCHIMP_INSTANCE, LIST_UNIQUE_ID, MAILCHIMP_API_KEY } from '../../../config'
import { FormattedMessage } from 'react-intl'

class Subscribe extends Component {
  state = {
    email: '',
    status: null,
    detail: null,
  }

  handleOnChange = (event) => {
    this.setState({ email: event.target.value })
  }

  handleOnSubmit = (event) => {
    event.preventDefault()

    let params = new URLSearchParams()
    params.append('email', this.state.email)
    params.append('mailchimpInstance', MAILCHIMP_INSTANCE)
    params.append('listUniqueId', LIST_UNIQUE_ID)
    params.append('mailchimpApiKey', MAILCHIMP_API_KEY)

    this.setState(
      {
        status: 'sending',
      },
      () =>
        axios.post(`${process.env.MAILCHIMP_MIDDLEWARE_API_URL}/api/subscribe`, params).then(({ data }) => {
          const { status, detail } = data
          this.setState({
            status,
            detail,
            email: '',
          })
        }),
    )
  }

  render() {
    const { className } = this.props
    const { status, detail } = this.state

    return (
      <form className={classNames(className, styles.root)} onSubmit={this.handleOnSubmit}>
        <label>
          {status === 400 ? (
            detail
          ) : (
            <span>
              {status === 'subscribed' ? <FormattedMessage id="subscribed" /> : <FormattedMessage id="subscribe" />}
            </span>
          )}
          <p className={styles.spacer} />
          <input
            type="email"
            required
            placeholder="e-mail"
            value={this.state.email}
            onChange={this.handleOnChange}
            aria-label="subscribe"
          />
          {status === 'sending' ? <button className={styles.sending} /> : <button className={styles.submit} />}
        </label>
      </form>
    )
  }
}

Subscribe.propTypes = {
  className: PropTypes.string,
}

export default Subscribe