Block users with wrong import method

[MAILPOET-2129]

assets/css/src/components/_importExport.scss

@@ -150,8 +150,10 @@ tr {
 }
 
 .mailpoet_import_validation_step {
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
+  width: 600px;
 
   .mailpoet_import_step_buttons {
     margin-top: 40px;
@@ -160,6 +162,12 @@ tr {
   h2 {
     margin-bottom: 40px;
   }
+
+  .mailpoet_import_block {
+    p {
+      font-weight: bold;
+    }
+  }
 }
 
 .mailpoet_method_selection_step {

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;

views/subscribers/importExport/import.html

@@ -83,6 +83,9 @@
 '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'),
+'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'),
 'previousStep': __('Previous step'),
 'nextStep': __('Next step'),
 'seeVideo': __(' See video guide'),