diff --git a/assets/css/src/components/_importExport.scss b/assets/css/src/components/_importExport.scss index 7f331db8ea..aadf225b81 100644 --- a/assets/css/src/components/_importExport.scss +++ b/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 { diff --git a/assets/js/src/subscribers/importExport/import/step_input_validation.jsx b/assets/js/src/subscribers/importExport/import/step_input_validation.jsx index c9c01c7c35..01bbe093b5 100644 --- a/assets/js/src/subscribers/importExport/import/step_input_validation.jsx +++ b/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' && ( + + )} ); } diff --git a/assets/js/src/subscribers/importExport/import/step_input_validation/block.jsx b/assets/js/src/subscribers/importExport/import/step_input_validation/block.jsx new file mode 100644 index 0000000000..1408db574f --- /dev/null +++ b/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 ( +
+

{MailPoet.I18n.t('validationStepBlock1')}

+

{MailPoet.I18n.t('validationStepBlock2')}

+ + {MailPoet.I18n.t('validationStepBlockButton')} + +
+ ); +} + +export default Block; diff --git a/views/subscribers/importExport/import.html b/views/subscribers/importExport/import.html index f1aca4f769..a470a7086a 100644 --- a/views/subscribers/importExport/import.html +++ b/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'),