diff --git a/assets/js/src/subscribers/importExport/import.jsx b/assets/js/src/subscribers/importExport/import.jsx index 938e875794..a173f8069b 100644 --- a/assets/js/src/subscribers/importExport/import.jsx +++ b/assets/js/src/subscribers/importExport/import.jsx @@ -10,15 +10,46 @@ import StepDataManipulation from './import/step_data_manipulation.jsx'; const container = document.getElementById('import_container'); +const subscribersLimitForValidation = 500; + const ImportSubscribers = () => { const [stepMethodSelection, setStepMethodSelection] = useState(undefined); return ( - } /> - } /> - } /> - } /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + } + /> ); diff --git a/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx b/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx index 2879d131a9..5a77ad9fcf 100644 --- a/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx +++ b/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx @@ -1,8 +1,26 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { withRouter } from 'react-router-dom'; +import PreviousNextStepButtons from './previous_next_step_buttons.jsx'; -function StepDataManipulation({ history, stepMethodSelection }) { +function getPreviousStepLink(importData, subscribersLimitForValidation) { + if (importData === undefined) { + return 'step_method_selection'; + } + if (importData.subscribersCount === undefined) { + return 'step_method_selection'; + } + if (importData.subscribersCount < subscribersLimitForValidation) { + return 'step_method_selection'; + } + return 'step_input_validation'; +} + +function StepDataManipulation({ + history, + stepMethodSelection, + subscribersLimitForValidation, +}) { useEffect( () => { if (typeof (stepMethodSelection) === 'undefined') { @@ -14,7 +32,13 @@ function StepDataManipulation({ history, stepMethodSelection }) { return ( <> - + ( + history.push(getPreviousStepLink(stepMethodSelection, subscribersLimitForValidation)) + )} + onNextAction={() => history.push('todo')} + /> ); } @@ -32,6 +56,7 @@ StepDataManipulation.propTypes = { subscribersCount: PropTypes.number, subscribers: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)), }), + subscribersLimitForValidation: PropTypes.number.isRequired, }; StepDataManipulation.defaultProps = { 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 4207b57a5d..d2a4cdcb36 100644 --- a/assets/js/src/subscribers/importExport/import/step_method_selection.jsx +++ b/assets/js/src/subscribers/importExport/import/step_method_selection.jsx @@ -8,16 +8,14 @@ import MethodUpload from './step_method_selection/method_upload.jsx'; import MethodMailChimp from './step_method_selection/method_mailchimp.jsx'; import processCsv from './step_method_selection/process_csv.jsx'; -const SUBSCRIBERS_LIMIT_FOR_VALIDATION = 500; - -const getNextStepLink = (importData) => { +const getNextStepLink = (importData, subscribersLimitForValidation) => { if (importData === undefined) { return 'step_data_manipulation'; } if (importData.subscribersCount === undefined) { return 'step_data_manipulation'; } - if (importData.subscribersCount < SUBSCRIBERS_LIMIT_FOR_VALIDATION) { + if (importData.subscribersCount < subscribersLimitForValidation) { return 'step_data_manipulation'; } return 'step_input_validation'; @@ -26,6 +24,7 @@ const getNextStepLink = (importData) => { function StepMethodSelection({ history, setStepMethodSelection, + subscribersLimitForValidation, }) { const [method, setMethod] = useState(undefined); const [pastedCsvData, setPastedCsvData] = useState(''); @@ -33,7 +32,7 @@ function StepMethodSelection({ const finish = (parsedData) => { setStepMethodSelection(parsedData); - history.push(getNextStepLink(parsedData)); + history.push(getNextStepLink(parsedData, subscribersLimitForValidation)); }; const processLocal = () => { @@ -95,6 +94,7 @@ StepMethodSelection.propTypes = { push: PropTypes.func.isRequired, }).isRequired, setStepMethodSelection: PropTypes.func.isRequired, + subscribersLimitForValidation: PropTypes.number.isRequired, }; export default withRouter(StepMethodSelection);