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;