Block users with wrong import method

[MAILPOET-2129]

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

@@ -3,6 +3,7 @@ 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';
 
 function StepInputValidation({ stepMethodSelectionData, history }) {
   const [importSource, setImportSource] = useState(undefined);
@@ -27,6 +28,10 @@ function StepInputValidation({ stepMethodSelectionData, history }) {
           onNextStep={() => setQuestionAnswered(true)}
         />
       )}
+
+      {questionAnswered && importSource === 'address-book' && (
+        <Block />
+      )}
     </div>
   );
 }

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+function Block() {
+  return (
+    <div className="mailpoet_import_block">
+      <p>{MailPoet.I18n.t('validationStepBlock1')}</p>
+      <p>{MailPoet.I18n.t('validationStepBlock2')}</p>
+      <a
+        href="https://kb.mailpoet.com/article/269-reconfirm-subscribers-to-your-list"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="button button-primary"
+      >
+        {MailPoet.I18n.t('validationStepBlockButton')}
+      </a>
+    </div>
+  );
+}
+
+export default Block;