component.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import queryString from 'querystring';
import {
	toggleScrollLock,
	toggleForm,
	submitForm,
	showErrorPage,
	setTrackingUrl,
} from '../../../client/actions';
import { SignupForm, ConnectForm } from '../Forms';
import Thankyou from '../Thankyou';
import SignupError from '../SignupError';
import SignUpAddMiles from '../Forms/SignUpAddMiles';
import './FormTray.css';

class FormTray extends Component {
	constructor(props) {
		super(props);
		this.closeForm = this.closeForm.bind(this);
		this.autoScrolled = false;
	}

	getPageData(props) {
		const location =
			props.location.pathname !== '/' &&
			props.location.pathname.substr(-1) === '/'
				? props.location.pathname.slice(0, -1)
				: props.location.pathname;
		if (props.pageData[location] == undefined) {
			props.fetchData(props.locale.code, location);
		}
	}

	closeForm(e) {
		e.preventDefault();
		this.props.toggleScrollLock(false);
		this.props.toggleForm(false);
	}

	scrollToTop = () => {
		this._input.scrollTo(0, 0);
		this.autoScrolled = true;
	};

	componentDidMount() {
		const tcode =
			window.location.search.substr(0, 1) == '?'
				? window.location.search.substr(1)
				: window.location.search;

		const parsed = queryString.parse(tcode);
		if (parsed.utm_source || parsed.utm_campaign || parsed.utm_medium) {
			this.props.setTrackingUrl(tcode);
		}
	}

	render() {
		const { ui } = this.props;
		const scrollToTop = this.scrollToTop();
		const { response, completed, autherror, manualResponse } = this.props.form;

		if (
			(response &&
				!completed &&
				!autherror &&
				!manualResponse &&
				this._input &&
				!this.autoScrolled) ||
			(manualResponse && !completed)
		) {
			this.scrollToTop();
		}

		return (
			<div
				aria-hidden={!ui.showForm}
				className={`tray-wrap ${ui.showForm ? `is-open` : ``}`}
			>
				<div className="form-tray" ref={c => (this._input = c)}>
					<div className="form-tray__inr">
						<div className="form-tray__contents">
							<button
								disabled={!ui.showForm}
								className="form-tray__close"
								onClick={this.closeForm}
							>
								<span>Close</span>
							</button>
							{!response && !completed && !autherror && (
								<SignupForm
									// disabled={!ui.showForm}
									countries={this.props.locale.countries}
									labels={this.props.form.labels}
									lang={this.props.locale.code}
									tracking={this.props.form.tracking}
									submitForm={this.props.submitForm}
									unit={this.props.locale.unit}
								/>
							)}
							{response && !completed && !autherror && !manualResponse && (
								<ConnectForm
									labels={this.props.form.labels}
									appUrls={response}
									isPP={false}
								/>
							)}
							{manualResponse && !completed && (
								<SignUpAddMiles
									countries={this.props.locale.countries}
									labels={this.props.form.labels}
									lang={this.props.locale.code}
									tracking={this.props.form.tracking}
									submitForm={this.props.submitForm}
									formData={this.props.form}
									formId="signupform"
								/>
							)}

							{completed && (
								<Thankyou
									lang={this.props.locale.code}
									labels={this.props.form.labels}
								/>
							)}
							{autherror && (
								<SignupError
									clickHandler={() => {
										this.props.showErrorPage(false);
									}}
									labels={this.props.form.labels}
								/>
							)}

							{this.props.form.labels.close_form_link && (
								<p className="align-right">
									<button
										className="form-link__close-btn"
										onClick={this.closeForm}
									>
										{this.props.form.labels.close_form_link}
									</button>
								</p>
							)}
						</div>
					</div>
				</div>
			</div>
		);
	}
}

const mapStateToProps = state => ({
	ui: state.ui,
	form: state.form,
	locale: state.locale,
});

export default connect(
	mapStateToProps,
	{ toggleScrollLock, toggleForm, submitForm, showErrorPage, setTrackingUrl },
)(FormTray);