Ask user when they sent to the list

[MAILPOET-2129]

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

@@ -3,11 +3,12 @@ import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import InitialQuestion from './step_input_validation/initial_question.jsx';
-import Block from './step_input_validation/block.jsx';
+import WrongSourceBlock from './step_input_validation/wrong_source_block.jsx';
+import LastSentQuestion from './step_input_validation/last_sent_question.jsx';
 
 function StepInputValidation({ stepMethodSelectionData, history }) {
   const [importSource, setImportSource] = useState(undefined);
-  const [questionAnswered, setQuestionAnswered] = useState(false);
+  const [lastSent, setLastSent] = useState(undefined);
 
   useEffect(
     () => {
@@ -20,17 +21,21 @@ function StepInputValidation({ stepMethodSelectionData, history }) {
 
   return (
     <div className="mailpoet_import_validation_step">
-      {!questionAnswered && (
+      {importSource === undefined && (
         <InitialQuestion
-          importSource={importSource}
-          setImportSource={setImportSource}
+          onSubmit={setImportSource}
           history={history}
-          onNextStep={() => setQuestionAnswered(true)}
         />
       )}
 
-      {questionAnswered && importSource === 'address-book' && (
-        <Block />
+      {importSource === 'address-book' && (
+        <WrongSourceBlock />
+      )}
+
+      {importSource === 'existing-list' && lastSent === undefined && (
+        <LastSentQuestion
+          onSubmit={() => {}}
+        />
       )}
     </div>
   );

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

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
 
 function InitialQuestion({
-  importSource,
-  setImportSource,
+  onSubmit,
   history,
-  onNextStep,
 }) {
+  const [importSource, setImportSource] = useState(undefined);
+
   function isFormValid() {
     return importSource !== undefined;
   }
@@ -37,7 +37,7 @@ function InitialQuestion({
       <PreviousNextStepButtons
         canGoNext={isFormValid()}
         onPreviousAction={() => history.push('step_method_selection')}
-        onNextAction={onNextStep}
+        onNextAction={() => onSubmit(importSource)}
       />
     </>
   );
@@ -47,13 +47,7 @@ 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,
+  onSubmit: PropTypes.func.isRequired,
 };
 
 export default InitialQuestion;

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

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
+
+function LastSentQuestion({ onSubmit }) {
+  const [value, setValue] = useState('over2years');
+
+  function handleChange(event) {
+    setValue(event.target.value);
+  }
+
+  function handleSubmit() {
+    if (value === 'over2years' || value === '1to2years') {
+      onSubmit('notRecently');
+    } else {
+      onSubmit('recently');
+    }
+  }
+
+  return (
+    <>
+      <h2>{MailPoet.I18n.t('validationStepLastSentHeading')}</h2>
+      <select value={value} onChange={handleChange} className="mailpoet_last_sent">
+        <option value="over2years">{MailPoet.I18n.t('validationStepLastSentOption1')}</option>
+        <option value="1to2years">{MailPoet.I18n.t('validationStepLastSentOption2')}</option>
+        <option value="less1year">{MailPoet.I18n.t('validationStepLastSentOption3')}</option>
+        <option value="less3months">{MailPoet.I18n.t('validationStepLastSentOption4')}</option>
+      </select>
+      <button
+        type="button"
+        className="button button-primary"
+        onClick={handleSubmit}
+      >
+        {MailPoet.I18n.t('validationStepLastSentNext')}
+      </button>
+    </>
+  );
+}
+
+LastSentQuestion.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+};
+
+
+export default LastSentQuestion;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
 
-function Block() {
+function WrongSourceBlock() {
   return (
     <div className="mailpoet_import_block">
       <p>{MailPoet.I18n.t('validationStepBlock1')}</p>
@@ -18,4 +18,4 @@ function Block() {
   );
 }
 
-export default Block;
+export default WrongSourceBlock;