Ask user about list source

[MAILPOET-2129]

assets/css/src/components/_importExport.scss

@@ -149,6 +149,19 @@ tr {
   cursor: pointer;
 }
 
+.mailpoet_import_validation_step {
+  display: flex;
+  flex-direction: column;
+
+  .mailpoet_import_step_buttons {
+    margin-top: 40px;
+  }
+
+  h2 {
+    margin-bottom: 40px;
+  }
+}
+
 .mailpoet_method_selection_step {
   align-items: flex-start;
   display: flex;

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
+      {!questionAnswered && (
-        canGoNext={isFormValid()}
+        <InitialQuestion
-        onPreviousAction={() => history.push('step_method_selection')}
+          importSource={importSource}
-        onNextAction={() => history.push('step_data_manipulation')}
+          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;

views/subscribers/importExport/import.html

@@ -80,6 +80,9 @@
 'importNoAction': __('No subscribers were added or updated.'),
 'importNoWelcomeEmail': __('Note: Imported subscribers will not receive any Welcome Emails'),
 'readSupportArticle': __('Read the support article.'),
+'validationStepHeading': _x('Are you importing an existing list or contacts from your address book?', 'Question for importing subscribers into MailPoet'),
+'validationStepRadio1': _x('Existing list', 'User choice to import an existing email list'),
+'validationStepRadio2': _x('An email list from another email marketing tool', 'User choice to import his address book contacts'),
 'previousStep': __('Previous step'),
 'nextStep': __('Next step'),
 'seeVideo': __(' See video guide'),