diff --git a/src/AddressSearch.js b/src/AddressSearch.js index 10c96d579d4b25c4a45dc63f85502a9cad31fbaf..a12f410e4239ae7285f95ee7a6aceef980e41142 100644 --- a/src/AddressSearch.js +++ b/src/AddressSearch.js @@ -1,8 +1,9 @@ import React from "react"; -import { Row, Col, Button} from 'reactstrap'; +import { Row, Col, Button, Input, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import './index.css'; import Geocoder from 'react-mapbox-gl-geocoder'; import location from './utils/images/location.svg'; // with import +import jsonp from "jsonp"; const mapAccess = { mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_TOKEN @@ -21,6 +22,14 @@ export default class AddressSearch extends React.Component { answer: this.props.answer, loadingAddressSearchBtn: false, disabledAddressSearchBtn: true, + showModal: true, + form: { + FNAME: '', + LNAME: '', + EMAIL: '', + PHONE: '', + }, + subscribed: false, }; } componentDidMount () { @@ -54,6 +63,7 @@ export default class AddressSearch extends React.Component { this.setState({ loadingAddressSearchBtn: true, disabledAddressSearchBtn: true, + showModal: true, }); this.props.nextQuestion('addressSearch', this.state.answer, this.state.answer); } @@ -65,8 +75,84 @@ export default class AddressSearch extends React.Component { }); } + validateContact() { + const emptyFields = []; + const invalidFields = []; + const errorMessage = []; + const validFirstName = /^[a-zA-Z ]{2,30}$/; + const validLastName = /^[a-zA-Z ]{2,30}$/; + const validEmail = /^$|^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/; + const validPhone = /^$|^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/; + + if (this.state.form.FNAME.toString().replace(/^\s+|\s+$/g, '') === '') { + emptyFields.push('First Name'); + } + if (this.state.form.LNAME.toString().replace(/^\s+|\s+$/g, '') === '') { + emptyFields.push('Last Name'); + } + if (this.state.form.EMAIL.toString().replace(/^\s+|\s+$/g, '') === '') { + emptyFields.push('Email address'); + } + if (emptyFields.length > 0) { + errorMessage.push(`Please fill in:\n${emptyFields.join('\n')}`); + alert(errorMessage); + return false; + } + if (this.state.form.PHONE.toString().replace(/^\s+|\s+$/g, '') !== '' && + !(validPhone.test(this.state.form.PHONE))) { + invalidFields.push('Phone number'); + } + if (!(validFirstName.test(this.state.form.FNAME))) { + invalidFields.push('First Name'); + } + if (!(validLastName.test(this.state.form.LNAME))) { + invalidFields.push('Last Name'); + } + if (!(validEmail.test(this.state.form.EMAIL))) { + invalidFields.push('Email address'); + } + if (invalidFields.length > 0) { + errorMessage.push(`\nInvalid input in:\n${invalidFields.join('\n')}`); + alert(errorMessage); + return false; + } + return true; + } + + handleInputChange = (event) => { + const val = event.target.value; + const name = event.target.name; + this.setState({ + form: { + ...this.state.form, + [name]: val, + }, + }); + } + + subscribe = () => { + if (this.validateContact()) { + const action = process.env.REACT_APP_MAILCHIMP_URL; + const fields = ['FNAME', 'LNAME', 'EMAIL', 'PHONE']; + const values = fields.map(field => { + return `${field}=${encodeURIComponent(this.state.form[field])}`; + }).join("&"); + const path = `${action}&${values}`; + const url = path.replace('/post?', '/post-json?'); + jsonp(url, { param: "c" }); + this.setState({ + subscribed: true, + }); + } + } + + closeModal = () => { + this.setState({ + showModal: false, + }) + } + render() { - let addressData = ""; const {viewport} = this.state; if(this.state.addressFound === false){ @@ -79,7 +165,7 @@ export default class AddressSearch extends React.Component { queryParams={queryParams} /> ) - } + } else { addressData = ( - Sorry. {this.props.message}! + let modalHeader = 'Oops, something is wrong'; + let modalBody = this.props.message; + let modalFooter = ( +