Add step buttons to manipulation step

[MAILPOET-1809]

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

@@ -10,15 +10,46 @@ import StepDataManipulation from './import/step_data_manipulation.jsx';
 
 const container = document.getElementById('import_container');
 
+const subscribersLimitForValidation = 500;
+
 const ImportSubscribers = () => {
   const [stepMethodSelection, setStepMethodSelection] = useState(undefined);
   return (
     <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="/step_data_manipulation" render={props => <StepDataManipulation {...props} stepMethodSelection={stepMethodSelection} />} />
-        <Route path="*" render={() => <Redirect to="/step_method_selection" />} />
+        <Route
+          path="/step_method_selection"
+          render={props => (
+            <StepMethodSelection
+              {...props}
+              setStepMethodSelection={setStepMethodSelection}
+              subscribersLimitForValidation={subscribersLimitForValidation}
+            />
+          )}
+        />
+        <Route
+          path="/step_input_validation"
+          render={props => (
+            <StepInputValidation
+              {...props}
+              stepMethodSelection={stepMethodSelection}
+            />
+          )}
+        />
+        <Route
+          path="/step_data_manipulation"
+          render={props => (
+            <StepDataManipulation
+              {...props}
+              stepMethodSelection={stepMethodSelection}
+              subscribersLimitForValidation={subscribersLimitForValidation}
+            />
+          )}
+        />
+        <Route
+          path="*"
+          render={() => <Redirect to="/step_method_selection" />}
+        />
       </Switch>
     </HashRouter>
   );

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

@@ -1,8 +1,26 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
+import PreviousNextStepButtons from './previous_next_step_buttons.jsx';
 
-function StepDataManipulation({ history, stepMethodSelection }) {
+function getPreviousStepLink(importData, subscribersLimitForValidation) {
+  if (importData === undefined) {
+    return 'step_method_selection';
+  }
+  if (importData.subscribersCount === undefined) {
+    return 'step_method_selection';
+  }
+  if (importData.subscribersCount < subscribersLimitForValidation) {
+    return 'step_method_selection';
+  }
+  return 'step_input_validation';
+}
+
+function StepDataManipulation({
+  history,
+  stepMethodSelection,
+  subscribersLimitForValidation,
+}) {
   useEffect(
     () => {
       if (typeof (stepMethodSelection) === 'undefined') {
@@ -14,7 +32,13 @@ function StepDataManipulation({ history, stepMethodSelection }) {
 
   return (
     <>
-      
+      <PreviousNextStepButtons
+        canGoNext={false}
+        onPreviousAction={() => (
+          history.push(getPreviousStepLink(stepMethodSelection, subscribersLimitForValidation))
+        )}
+        onNextAction={() => history.push('todo')}
+      />
     </>
   );
 }
@@ -32,6 +56,7 @@ StepDataManipulation.propTypes = {
     subscribersCount: PropTypes.number,
     subscribers: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
   }),
+  subscribersLimitForValidation: PropTypes.number.isRequired,
 };
 
 StepDataManipulation.defaultProps = {

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

@@ -8,16 +8,14 @@ import MethodUpload from './step_method_selection/method_upload.jsx';
 import MethodMailChimp from './step_method_selection/method_mailchimp.jsx';
 import processCsv from './step_method_selection/process_csv.jsx';
 
-const SUBSCRIBERS_LIMIT_FOR_VALIDATION = 500;
-
-const getNextStepLink = (importData) => {
+const getNextStepLink = (importData, subscribersLimitForValidation) => {
   if (importData === undefined) {
     return 'step_data_manipulation';
   }
   if (importData.subscribersCount === undefined) {
     return 'step_data_manipulation';
   }
-  if (importData.subscribersCount < SUBSCRIBERS_LIMIT_FOR_VALIDATION) {
+  if (importData.subscribersCount < subscribersLimitForValidation) {
     return 'step_data_manipulation';
   }
   return 'step_input_validation';
@@ -26,6 +24,7 @@ const getNextStepLink = (importData) => {
 function StepMethodSelection({
   history,
   setStepMethodSelection,
+  subscribersLimitForValidation,
 }) {
   const [method, setMethod] = useState(undefined);
   const [pastedCsvData, setPastedCsvData] = useState('');
@@ -33,7 +32,7 @@ function StepMethodSelection({
 
   const finish = (parsedData) => {
     setStepMethodSelection(parsedData);
-    history.push(getNextStepLink(parsedData));
+    history.push(getNextStepLink(parsedData, subscribersLimitForValidation));
   };
 
   const processLocal = () => {
@@ -95,6 +94,7 @@ StepMethodSelection.propTypes = {
     push: PropTypes.func.isRequired,
   }).isRequired,
   setStepMethodSelection: PropTypes.func.isRequired,
+  subscribersLimitForValidation: PropTypes.number.isRequired,
 };
 
 export default withRouter(StepMethodSelection);