ModalForm.js

import React, { Component } from 'react';
import FormInput from './FormInput';
import Validator from 'utils/validator';
import Button from './Button';
import { FormGroup } from 'styled-bootstrap-components';
import { connect} from 'airlytics';
import { styled } from './Styles';
import titlize from 'utils/titlize';
import PrismicHelper from 'utils/prismicHelper';
import { navigate } from "gatsby-link";
import _ from 'lodash';

const OptInButton = styled(Button)`
  margin-top: 25px;
`;

const CloseMessage = styled.div`
  margin: 0 auto;
  justify-content: center;
  display: flex;
  margin-top: 25px;
  color: ${p => p.theme.brandLight};
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
`;

class ModalForm extends Component {

  state = {
    email: "",
    firstName: "",
    eventTracked: false,
    isEmailValid: false
  }

  firstNameInput = (event) => {
    const value = event.target.value;
    this.setState({
      firstName: value
    })
  }

  emailInput = (event) => {
    const value = event.target.value;
    this.setState({
      isEmailValid: Validator.isEmail(value),
      email: value
    })
  }

  subscribe() {
    this.props.actions.newSubscriber(this.state.email, {
      first_name: this.state.firstName
    });
  }

  handleNewSubscriber() {
    if (this.props.data.download && this.props.data.download.url) {
      const name = titlize(decodeURIComponent((this.props.data.download.url.split("_").length > 1 ? this.props.data.download.url.split("_")[1] : this.props.data.download.url.split("_")[0]).split(".")[0]).replace(/[^A-Za-z0-9 ]/, " "));
      if (this.state.eventTracked) { return; }
      this.setState({ eventTracked: true })
      this.props.actions.track("Download", {
        name: name,
        asset: this.props.data.download.url,
        tags: `Downloaded - ${name}`
      })
    }

    if (this.props.data.redirect_url) {
      let url = this.props.data.redirect_url.url;
      if (url === "" && this.props.data.redirect_url.document && this.props.data.redirect_url.document.length) {
        url = PrismicHelper.pathResolver(this.props.data.redirect_url.document[0]);
      }
      this.props.events.close();
      if (Validator.isExternalSite(url)) {
        window.location.href = url
      } else {
        navigate(url);
      }
    } else {
      this.props.events.close();
    }
  }

  UNSAFE_componentWillReceiveProps(props) {
    const oldType = this.props.lastAction.type;
    const newType = props.lastAction.type;
    if (oldType !== newType) {
      if (newType === "NEW_SUBSCRIBER_SUCCESS") {
          this.handleNewSubscriber();
      }

      if (newType === "NEW_SUBSCRIBER_FAILURE") {
        // track event
      }
    }
  }

  render() {
    const { events, data } = this.props;
    const {
      cta_label,
      close_message
    } = data;

    return (
      <form>
        <FormGroup>
          <FormInput type="text" placeholder="First Name" onChange={this.firstNameInput} />
        </FormGroup>
        <FormGroup>
          <FormInput type="email" placeholder="Email" onChange={this.emailInput} isValid={this.state.isEmailValid} />
        </FormGroup>
        <FormGroup>
          <OptInButton arrow={false} disabled={!this.state.isEmailValid || _.isEmpty(this.state.firstName) || _.isEmpty(this.state.email)} onClick={this.subscribe.bind(this)} fullWidth>{cta_label}</OptInButton>
          <CloseMessage onClick={events.close}>{close_message}</CloseMessage>
        </FormGroup>
      </form>
    );
  }
}

export default connect()(ModalForm);