diff --git a/assets/js/src/subscribers/importExport/import.jsx b/assets/js/src/subscribers/importExport/import.jsx index 86beda26ba..91a0196eae 100644 --- a/assets/js/src/subscribers/importExport/import.jsx +++ b/assets/js/src/subscribers/importExport/import.jsx @@ -80,76 +80,6 @@ jQuery(document).ready(() => { container ); } - return; - - const mailChimpKeyInputElement = jQuery('#mailchimp_key'); - const mailChimpKeyVerifyButtonElement = jQuery('#mailchimp_key_verify'); - const mailChimpListsContainerElement = jQuery('#mailchimp_lists'); - const mailChimpProcessButtonElement = jQuery('#method_mailchimp > div.mailpoet_method_process') - .find('a.mailpoet_process'); - - function displayMailChimpLists(data) { - const listSelectElement = mailChimpListsContainerElement.find('select'); - if (listSelectElement.data('select2')) { - listSelectElement.select2('data', data); - listSelectElement.trigger('change'); - } else { - listSelectElement - .select2({ - data, - width: '20em', - templateResult(item) { - return item.name; - }, - templateSelection(item) { - return item.name; - }, - }) - .change((event) => { - if (jQuery(event.currentTarget).val() !== null) { - toggleNextStepButton(mailChimpProcessButtonElement, 'on'); - } else { - toggleNextStepButton(mailChimpProcessButtonElement, 'off'); - } - }) - .trigger('change'); - } - mailChimpListsContainerElement.show(); - } - - - - mailChimpProcessButtonElement.click(() => { - if (mailChimpProcessButtonElement.closest('table a').hasClass('button-disabled')) { - return; - } - MailPoet.Modal.loading(true); - MailPoet.Ajax.post({ - api_version: window.mailpoet_api_version, - endpoint: 'importExport', - action: 'getMailChimpSubscribers', - data: { - api_key: mailChimpKeyInputElement.val(), - lists: mailChimpListsContainerElement.find('select').val(), - }, - }).always(() => { - MailPoet.Modal.loading(false); - }).done((response) => { - window.importData.step_method_selection = response.data; - MailPoet.trackEvent('Subscribers import started', { - source: 'MailChimp', - 'MailPoet Free version': window.mailpoet_version, - }); - router.navigate('step_data_manipulation', { trigger: true }); - }).fail((response) => { - if (response.errors.length > 0) { - MailPoet.Notice.error( - response.errors.map(error => error.message), - { scroll: true } - ); - } - }); - }); }); router.on('route:step_input_validation', () => { 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 f66fc0d5c9..aad54c5558 100644 --- a/assets/js/src/subscribers/importExport/import/step_method_selection.jsx +++ b/assets/js/src/subscribers/importExport/import/step_method_selection.jsx @@ -33,7 +33,8 @@ function StepMethodSelection({ setCsvData(''); }; - const navigateToNextStep = () => { + const finish = (parsedData) => { + window.importData.step_method_selection = parsedData; navigate( getNextStepLink(window.importData.step_method_selection), { trigger: true } @@ -42,12 +43,11 @@ function StepMethodSelection({ 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, }); - navigateToNextStep(); + finish(sanitizedData); }); }; @@ -78,7 +78,13 @@ function StepMethodSelection({ { method === 'mailchimp-method' ? ( { + MailPoet.trackEvent('Subscribers import started', { + source: 'MailChimp', + 'MailPoet Free version': window.mailpoet_version, + }); + finish(data); + }} /> ) : null } diff --git a/assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx b/assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx index 5a85c64154..a1c2768efd 100644 --- a/assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx +++ b/assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx @@ -1,10 +1,11 @@ import React, { useState } from 'react'; -import Selection from '../../../../form/fields/selection.jsx'; import PropTypes from 'prop-types'; import MailPoet from 'mailpoet'; import classNames from 'classnames'; +import Selection from '../../../../form/fields/selection.jsx'; +import PreviousNextStepButtons from '../previous_next_step_buttons.jsx'; -const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => { +const MethodMailChimp = ({ onFinish }) => { const [key, setKey] = useState(''); const [mailChimpLoadedLists, setMailChimpLoadedLists] = useState(undefined); const [selectedLists, setSelectedLists] = useState([]); @@ -13,16 +14,6 @@ const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => { setKey(e.target.value); if (e.target.value.trim() === '') { setMailChimpLoadedLists(undefined); - setInputInvalid(); - } - }; - - const listSelected = (lists) => { - setSelectedLists(lists); - if (Array.isArray(lists) && lists.length === 0) { - setInputInvalid(); - } else { - setInputValid(); } }; @@ -35,22 +26,44 @@ const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => { data: { api_key: key, }, - }).always(() => { - MailPoet.Modal.loading(false); - }).done((response) => { - setMailChimpLoadedLists(response.data); - if (response.data.length === 0) { - setInputInvalid(); - } - }).fail((response) => { - setInputInvalid(); - if (response.errors.length > 0) { - MailPoet.Notice.error( - response.errors.map(error => error.message), - { scroll: true } - ); - } - }); + }) + .always(() => { + MailPoet.Modal.loading(false); + }) + .done(response => setMailChimpLoadedLists(response.data)) + .fail((response) => { + if (response.errors.length > 0) { + MailPoet.Notice.error( + response.errors.map(error => error.message), + { scroll: true } + ); + } + }); + }; + + const process = () => { + MailPoet.Modal.loading(true); + MailPoet.Ajax.post({ + api_version: window.mailpoet_api_version, + endpoint: 'importExport', + action: 'getMailChimpSubscribers', + data: { + api_key: key, + lists: selectedLists, + }, + }) + .always(() => { + MailPoet.Modal.loading(false); + }) + .done(response => onFinish(response.data)) + .fail((response) => { + if (response.errors.length > 0) { + MailPoet.Notice.error( + response.errors.map(error => error.message), + { scroll: true } + ); + } + }); }; const showListsSelection = () => { @@ -69,7 +82,7 @@ const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => { forceSelect2: true, values: mailChimpLoadedLists, }} - onValueChange={e => listSelected(e.target.value)} + onValueChange={e => setSelectedLists(e.target.value)} /> ); @@ -102,19 +115,21 @@ const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => { {showListsSelection()} + 0} + hidePrevious + onNextAction={process} + /> ); }; MethodMailChimp.propTypes = { - setInputValid: PropTypes.func, - setInputInvalid: PropTypes.func, - onValueChange: PropTypes.func.isRequired, + onFinish: PropTypes.func, }; MethodMailChimp.defaultProps = { - setInputValid: () => {}, - setInputInvalid: () => {}, + onFinish: () => {}, }; export default MethodMailChimp; diff --git a/views/subscribers/importExport/import/step_method_selection.html b/views/subscribers/importExport/import/step_method_selection.html index ecdf125d14..b50f0b67d8 100644 --- a/views/subscribers/importExport/import/step_method_selection.html +++ b/views/subscribers/importExport/import/step_method_selection.html @@ -1,36 +1,2 @@
-
- -
- - - - - - - - - - - -
- - - - - -
- - - -
-
- -
-
-