Ask user about list source

[MAILPOET-2129]

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

@@ -1,28 +1,32 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import PreviousNextStepButtons from './previous_next_step_buttons.jsx';
+
+import InitialQuestion from './step_input_validation/initial_question.jsx';
 
 function StepInputValidation({ stepMethodSelectionData, history }) {
+  const [importSource, setImportSource] = useState(undefined);
+  const [questionAnswered, setQuestionAnswered] = useState(false);
+
   useEffect(
     () => {
-      if (typeof (stepMethodSelectionData) === 'undefined') {
+      if (stepMethodSelectionData === 'undefined') {
         history.replace('step_method_selection');
       }
     },
     [stepMethodSelectionData, history],
   );
 
-  function isFormValid() {
-    return false;
-  }
   return (
     <div className="mailpoet_import_validation_step">
-      <PreviousNextStepButtons
-        canGoNext={isFormValid()}
-        onPreviousAction={() => history.push('step_method_selection')}
-        onNextAction={() => history.push('step_data_manipulation')}
-      />
+      {!questionAnswered && (
+        <InitialQuestion
+          importSource={importSource}
+          setImportSource={setImportSource}
+          history={history}
+          onNextStep={() => setQuestionAnswered(true)}
+        />
+      )}
     </div>
   );
 }

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
+import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
+
+function InitialQuestion({
+  importSource,
+  setImportSource,
+  history,
+  onNextStep,
+}) {
+  function isFormValid() {
+    return importSource !== undefined;
+  }
+
+  return (
+    <>
+      <h2>{MailPoet.I18n.t('validationStepHeading')}</h2>
+      <label htmlFor="existing-list">
+        <input
+          type="radio"
+          id="existing-list"
+          checked={importSource === 'existing-list'}
+          onChange={() => setImportSource('existing-list')}
+        />
+        {MailPoet.I18n.t('validationStepRadio1')}
+      </label>
+      <label htmlFor="address-book">
+        <input
+          type="radio"
+          id="address-book"
+          checked={importSource === 'address-book'}
+          onChange={() => setImportSource('address-book')}
+        />
+        {MailPoet.I18n.t('validationStepRadio2')}
+      </label>
+      <PreviousNextStepButtons
+        canGoNext={isFormValid()}
+        onPreviousAction={() => history.push('step_method_selection')}
+        onNextAction={onNextStep}
+      />
+    </>
+  );
+}
+
+InitialQuestion.propTypes = {
+  history: PropTypes.shape({
+    push: PropTypes.func.isRequired,
+  }).isRequired,
+  importSource: PropTypes.string,
+  setImportSource: PropTypes.func.isRequired,
+  onNextStep: PropTypes.func.isRequired,
+};
+
+InitialQuestion.defaultProps = {
+  importSource: undefined,
+};
+
+export default InitialQuestion;