diff --git a/assets/js/src/subscribers/importExport/import.jsx b/assets/js/src/subscribers/importExport/import.jsx index 99ac3fff54..86beda26ba 100644 --- a/assets/js/src/subscribers/importExport/import.jsx +++ b/assets/js/src/subscribers/importExport/import.jsx @@ -117,52 +117,7 @@ jQuery(document).ready(() => { mailChimpListsContainerElement.show(); } - /* - * MailChimp - */ - mailChimpKeyInputElement.keyup((event) => { - if (event.currentTarget.value.trim() === '' - || !/[a-zA-Z0-9]{32}-/.exec(event.currentTarget.value.trim())) { - mailChimpListsContainerElement.hide(); - jQuery('.mailpoet_mailchimp-key-status') - .html('') - .removeClass('mailpoet_mailchimp-ok mailpoet_mailchimp-error'); - toggleNextStepButton(mailChimpProcessButtonElement, 'off'); - } - }); - mailChimpKeyVerifyButtonElement.click(() => { - MailPoet.Modal.loading(true); - MailPoet.Ajax.post({ - api_version: window.mailpoet_api_version, - endpoint: 'importExport', - action: 'getMailChimpLists', - data: { - api_key: mailChimpKeyInputElement.val(), - }, - }).always(() => { - MailPoet.Modal.loading(false); - }).done((response) => { - jQuery('.mailpoet_mailchimp-key-status') - .html('') - .removeClass() - .addClass('mailpoet_mailchimp-key-status mailpoet_mailchimp-ok'); - if (response.data.length === 0) { - jQuery('.mailpoet_mailchimp-key-status').html(MailPoet.I18n.t('noMailChimpLists')); - mailChimpListsContainerElement.hide(); - toggleNextStepButton(mailChimpProcessButtonElement, 'off'); - } else { - displayMailChimpLists(response.data); - } - }).fail((response) => { - if (response.errors.length > 0) { - MailPoet.Notice.error( - response.errors.map(error => error.message), - { scroll: true } - ); - } - }); - }); mailChimpProcessButtonElement.click(() => { if (mailChimpProcessButtonElement.closest('table a').hasClass('button-disabled')) { 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 9945e4111f..5a85c64154 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,9 +1,84 @@ 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'; const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => { const [key, setKey] = useState(''); + const [mailChimpLoadedLists, setMailChimpLoadedLists] = useState(undefined); + const [selectedLists, setSelectedLists] = useState([]); + + const keyChange = (e) => { + 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(); + } + }; + + const verifyButtonClicked = () => { + MailPoet.Modal.loading(true); + MailPoet.Ajax.post({ + api_version: window.mailpoet_api_version, + endpoint: 'importExport', + action: 'getMailChimpLists', + 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 } + ); + } + }); + }; + + const showListsSelection = () => { + if (!mailChimpLoadedLists) return null; + return ( + <> +
+ {MailPoet.I18n.t('methodMailChimpSelectList')} +
+ listSelected(e.target.value)} + /> + + ); + }; + + const statusClasses = classNames( + 'mailpoet_mailchimp-key-status', + { 'mailpoet_mailchimp-ok': Array.isArray(mailChimpLoadedLists) } + ); return ( <> @@ -14,12 +89,18 @@ const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => { - - + + { Array.isArray(mailChimpLoadedLists) && mailChimpLoadedLists.length === 0 + ? MailPoet.I18n.t('noMailChimpLists') + : null + } + + {showListsSelection()} ); diff --git a/views/subscribers/importExport/import.html b/views/subscribers/importExport/import.html index c309a7be79..19511613b6 100644 --- a/views/subscribers/importExport/import.html +++ b/views/subscribers/importExport/import.html @@ -99,6 +99,8 @@ 'methodMailChimp': __('Import from MailChimp'), 'methodMailChimpLabel': __('Enter your MailChimp API key'), 'methodMailChimpVerify': __('Verify'), +'methodMailChimpSelectList': __('Select list(s)'), +'methodMailChimpSelectPlaceholder': _x('Select', 'Verb'), 'pasteLabel': __('Copy and paste your subscribers from Excel/Spreadsheets'), 'pasteDescription': __('This file needs to be formatted in a CSV style (comma-separated-values.) Look at some [link]examples on our support site[/link].'), 'methodSelectionHead': __('How would you like to import subscribers?')