Ask user when they sent to the list

[MAILPOET-2129]

assets/css/src/components/_importExport.scss

@@ -159,7 +159,8 @@ tr {
     margin-top: 40px;
   }
 
-  h2 {
+  h2,
+  .mailpoet_last_sent {
     margin-bottom: 40px;
   }
 

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}
+          onSubmit={setImportSource}
-          setImportSource={setImportSource}
           history={history}
-          onNextStep={() => setQuestionAnswered(true)}
         />
       )}
 
-      {questionAnswered && importSource === 'address-book' && (
+      {importSource === 'address-book' && (
-        <Block />
+        <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,
+  onSubmit,
-  setImportSource,
   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,
+  onSubmit: PropTypes.func.isRequired,
-  setImportSource: PropTypes.func.isRequired,
-  onNextStep: PropTypes.func.isRequired,
-};
-
-InitialQuestion.defaultProps = {
-  importSource: undefined,
 };
 
 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;

views/subscribers/importExport/import.html

@@ -86,6 +86,12 @@
 'validationStepBlock1': _x('You will need to ask your contacts to join your list instead of importing them. This is a standard practice to ensure good email deliverability.', 'Paragraph explaining the user what to do when importing his contacts.'),
 'validationStepBlock2': _x('If you send with MailPoet, we will detect if you import subscribers without their explicit consent and suspend your account.', 'Paragraph warning what happens if user imports his contacts and sends with MailPoet'),
 'validationStepBlockButton': _x('How to ask your contacts to join your list', 'Button to visit a support article'),
+'validationStepLastSentHeading': _x('When did you last send an email to this list?', 'Question for users importing their list'),
+'validationStepLastSentOption1': __('Over 2 years ago'),
+'validationStepLastSentOption2': __('Between 1 and 2 years ago'),
+'validationStepLastSentOption3': __('Within the last year'),
+'validationStepLastSentOption4': __('Within the last 3 months'),
+'validationStepLastSentNext': __('Next'),
 'previousStep': __('Previous step'),
 'nextStep': __('Next step'),
 'seeVideo': __(' See video guide'),