Add input validation component to react

[MAILPOET-1809]

assets/css/src/components/_importExport.scss

@@ -126,6 +126,7 @@ tr {
 }
 
 .mailpoet_method_selection_step {
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
 

assets/js/src/subscribers/importExport/import.jsx

@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
+import {
+  HashRouter, Switch, Route, Redirect,
+} from 'react-router-dom';
 
 import StepMethodSelection from './import/step_method_selection.jsx';
+import StepInputValidation from './import/step_input_validation.jsx';
 
 const container = document.getElementById('import_container');
 
@@ -12,6 +15,7 @@ const ImportSubscribers = () => {
     <HashRouter>
       <Switch>
         <Route path="/step_method_selection" render={props => <StepMethodSelection {...props} setStepMethodSelection={setStepMethodSelection} />} />
+        <Route path="/step_input_validation" render={props => <StepInputValidation {...props} stepMethodSelection={stepMethodSelection} />} />
         <Route path="*" render={() => <Redirect to="/step_method_selection" />} />
       </Switch>
     </HashRouter>

assets/js/src/subscribers/importExport/import/step_input_validation.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import ReactStringReplace from 'react-string-replace';
 import MailPoet from 'mailpoet';
@@ -48,6 +49,12 @@ class StepInputValidation extends Component {
     };
   }
 
+  componentDidMount() {
+    if (typeof (this.props.stepMethodSelection) === 'undefined') {
+      this.props.history.replace('step_method_selection');
+    }
+  }
+
   isFormValid() {
     return this.state.subscribersAgreed
       && this.state.sentOnceLastYear
@@ -112,8 +119,8 @@ class StepInputValidation extends Component {
         </p>
         <PreviousNextStepButtons
           canGoNext={this.isFormValid()}
-          onPreviousAction={() => this.props.navigate('step_method_selection', { trigger: true })}
+          onPreviousAction={() => this.props.history.push('step_method_selection')}
-          onNextAction={() => this.props.navigate('step_data_manipulation', { trigger: true })}
+          onNextAction={() => this.props.history.push('step_data_manipulation')}
         />
       </div>
     );
@@ -121,7 +128,22 @@ class StepInputValidation extends Component {
 }
 
 StepInputValidation.propTypes = {
-  navigate: PropTypes.func.isRequired,
+  history: PropTypes.shape({
+    push: PropTypes.func.isRequired,
+    replace: PropTypes.func.isRequired,
+  }).isRequired,
+  stepMethodSelection: PropTypes.shape({
+    duplicate: PropTypes.arrayOf(PropTypes.string),
+    header: PropTypes.arrayOf(PropTypes.string),
+    invalid: PropTypes.arrayOf(PropTypes.string),
+    role: PropTypes.arrayOf(PropTypes.string),
+    subscribersCount: PropTypes.number,
+    subscribers: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+  }),
 };
 
-export default StepInputValidation;
+StepInputValidation.defaultProps = {
+  stepMethodSelection: undefined,
+};
+
+export default withRouter(StepInputValidation);