Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add MailChimp on finish

Browse Source 
[MAILPOET-1808]
This commit is contained in:
Pavel Dohnal
2019-04-15 10:55:03 +02:00
committed by M. Shull
parent aa2184cf78
commit e198152dda
4 changed files with 59 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
assets/js/src/subscribers/importExport/import.jsx
View File

@@ -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', () => {

14
assets/js/src/subscribers/importExport/import/step_method_selection.jsx
View File

@@ -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'
? (
<MethodMailChimp
onFinish={navigateToNextStep}
onFinish={(data) => {
MailPoet.trackEvent('Subscribers import started', {
source: 'MailChimp',
'MailPoet Free version': window.mailpoet_version,
});
finish(data);
}}
/>
) : null
}

83
assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx
View File

@@ -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 }) => {
</span>
{showListsSelection()}
</label>
<PreviousNextStepButtons
canGoNext={Array.isArray(selectedLists) && selectedLists.length > 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;