src/components/Subscribe/SubscibeMain.js

import React, { Component } from 'react'
import addToMailchimp from 'gatsby-plugin-mailchimp'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { formatMessage } from 'src/translations'
import styles from './SubscribeMain.module.scss'
import Img from 'gatsby-image'

class SubscribeMain extends Component {
  state = {
    email: '',
    status: null,
    detail: null,
    loading: false,
    error: null,
  }

  handleSubmit = (e) => {
    const { email } = this.state
    this.setState({
      loading: true,
      error: null,
    })

    e.preventDefault()
    addToMailchimp(email)
      .then((data) => {
        this.setState(() => {
          return {
            status: data.result,
          }
        })
      })
      .then(() => {
        this.setState({ email: '', loading: false })
      })
      .catch((error) => {
        this.setState({ error })
      })
  }
  handleOnChange = (event) => {
    this.setState({ email: event.target.value })
  }

  render() {
    const { status, loading } = this.state
    const { style, locale } = this.props

    return (
      <div className={styles.wrap} style={style}>
        <div className={styles.root}>
          <div className={styles.image}>
            <Img fluid={this.props.subscribe.childImageSharp.fluid} alt="" />
          </div>
          <div className={styles.content}>
            <h1 className={styles.title}>{formatMessage(locale, 'subscribeTitle')}</h1>
            <div>
              <p className={styles.description}>{formatMessage(locale, 'subscribeDescription')}</p>
              <div>
                <label>
                  <form method="post" action="" className={styles.form}>
                    <div className={styles.formInnerContainer}>
                      {status && (
                        <span
                          className={styles.status}
                          style={status === 'success' ? { color: 'green' } : { color: 'red' }}
                        >
                          {status === 'success'
                            ? locale === 'en'
                              ? 'Success!'
                              : 'Успешно!'
                            : locale === 'en'
                              ? 'Something went wrong!'
                              : 'Ошибка'}
                        </span>
                      )}
                      <input
                        type="email"
                        name=""
                        placeholder={formatMessage(locale, 'email')}
                        className={classNames(styles.input, {
                          [styles.success]: status === 'success',
                          [styles.error]: status === 'error',
                        })}
                        value={this.state.email}
                        onChange={this.handleOnChange}
                        disabled={status === 'success'}
                      />
                    </div>

                    {loading ? (
                      <button className={styles.button} onClick={this.handleSubmit}>
                        {formatMessage(locale, 'loading')}
                      </button>
                    ) : (
                      <button className={styles.button} onClick={this.handleSubmit}>
                        {formatMessage(locale, 'subsribeButton')}
                      </button>
                    )}
                  </form>
                </label>
                <div className={styles.under}>{formatMessage(locale, 'subscribeUnder')}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

SubscribeMain.propTypes = {
  locale: PropTypes.string,
}

export default SubscribeMain