diff --git a/assets/js/src/subscribers/importExport/import/step_method_selection.jsx b/assets/js/src/subscribers/importExport/import/step_method_selection.jsx
index edcd0531b8..f66fc0d5c9 100644
--- a/assets/js/src/subscribers/importExport/import/step_method_selection.jsx
+++ b/assets/js/src/subscribers/importExport/import/step_method_selection.jsx
@@ -1,7 +1,6 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
-import PreviousNextStepButtons from './previous_next_step_buttons.jsx';
import SelectMethod from './step_method_selection/select_import_method.jsx';
import MethodPaste from './step_method_selection/method_paste.jsx';
import MethodUpload from './step_method_selection/method_upload.jsx';
@@ -26,57 +25,44 @@ const getNextStepLink = (importData) => {
function StepMethodSelection({
navigate,
}) {
- const [canGoNext, setCanGoNext] = useState(false);
const [method, setMethod] = useState(undefined);
const [csvData, setCsvData] = useState('');
- const setInputValid = () => {
- setCanGoNext(true);
+ const methodChanged = (newMethod) => {
+ setMethod(newMethod);
+ setCsvData('');
};
- const setInputInValid = () => {
- setCanGoNext(false);
+ const navigateToNextStep = () => {
+ navigate(
+ getNextStepLink(window.importData.step_method_selection),
+ { trigger: true }
+ );
};
- const process = () => {
+ const processLocal = () => {
processCsv(csvData, (sanitizedData) => {
window.importData.step_method_selection = sanitizedData;
MailPoet.trackEvent('Subscribers import started', {
source: method === 'file-method' ? 'file upload' : 'pasted data',
'MailPoet Free version': window.mailpoet_version,
});
- navigate(
- getNextStepLink(window.importData.step_method_selection),
- { trigger: true }
- );
+ navigateToNextStep();
});
};
- const showNextButton = () => {
- if (method) {
- return (
-
- );
- }
- return null;
- };
-
return (
<>
{ method === 'paste-method'
? (
) : null
}
@@ -84,19 +70,18 @@ function StepMethodSelection({
? (
) : null
}
{ method === 'mailchimp-method'
? (
) : null
}
- {showNextButton()}
>
);
}
diff --git a/assets/js/src/subscribers/importExport/import/step_method_selection/method_paste.jsx b/assets/js/src/subscribers/importExport/import/step_method_selection/method_paste.jsx
index d9c9a00b45..2ab77407e8 100644
--- a/assets/js/src/subscribers/importExport/import/step_method_selection/method_paste.jsx
+++ b/assets/js/src/subscribers/importExport/import/step_method_selection/method_paste.jsx
@@ -2,18 +2,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import ReactStringReplace from 'react-string-replace';
+import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
const kbLink = 'http://docs.mailpoet.com/article/126-importing-subscribers-with-csv-files'
const placeholder = 'Email, First Name, Last Name\njohn@doe.com, John, Doe\nmary@smith.com, Mary, Smith\njohnny@walker.com, Johnny, Walker';
-const MethodPaste = ({ setInputValid, setInputInvalid, onValueChange }) => {
+const MethodPaste = ({ onValueChange, canFinish, onFinish }) => {
+
const onChange = (e) => {
- if (e.target.value) {
- setInputValid();
- } else {
- setInputInvalid();
- }
onValueChange(e.target.value);
};
@@ -47,19 +44,23 @@ const MethodPaste = ({ setInputValid, setInputInvalid, onValueChange }) => {
onChange={onChange}
/>
+
>
);
};
MethodPaste.propTypes = {
- setInputValid: PropTypes.func,
- setInputInvalid: PropTypes.func,
+ onFinish: PropTypes.func,
+ canFinish: PropTypes.bool.isRequired,
onValueChange: PropTypes.func.isRequired,
};
MethodPaste.defaultProps = {
- setInputValid: () => {},
- setInputInvalid: () => {},
+ onFinish: () => {},
};
export default MethodPaste;
diff --git a/assets/js/src/subscribers/importExport/import/step_method_selection/method_upload.jsx b/assets/js/src/subscribers/importExport/import/step_method_selection/method_upload.jsx
index 471f9cb176..e15e4836c6 100644
--- a/assets/js/src/subscribers/importExport/import/step_method_selection/method_upload.jsx
+++ b/assets/js/src/subscribers/importExport/import/step_method_selection/method_upload.jsx
@@ -2,26 +2,25 @@ import React from 'react';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import ReactStringReplace from 'react-string-replace';
+import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
const kbLink = 'http://docs.mailpoet.com/article/126-importing-subscribers-with-csv-files'
-const MethodUpload = ({ setInputValid, setInputInvalid, onValueChange }) => {
+const MethodUpload = ({ onValueChange, canFinish, onFinish }) => {
const onChange = (e) => {
const ext = e.target.value.match(/[^.]+$/);
MailPoet.Notice.hide();
if (ext === null || ext[0].toLowerCase() !== 'csv') {
- setInputInvalid();
MailPoet.Notice.error(MailPoet.I18n.t('wrongFileFormat'));
onValueChange('');
} else {
onValueChange(e.target.files[0]);
- setInputValid();
}
};
return (
-
- <>
+ <>
+
+
+ >
);
};
MethodUpload.propTypes = {
- setInputValid: PropTypes.func,
- setInputInvalid: PropTypes.func,
+ canFinish: PropTypes.bool.isRequired,
+ onFinish: PropTypes.func,
onValueChange: PropTypes.func.isRequired,
};
MethodUpload.defaultProps = {
- setInputValid: () => {},
- setInputInvalid: () => {},
+ onFinish: () => {},
};
export default MethodUpload;