diff --git a/assets/js/src/subscribers/importExport/import-old.jsx b/assets/js/src/subscribers/importExport/import-old.jsx index 7cbd07ad10..ea922be527 100644 --- a/assets/js/src/subscribers/importExport/import-old.jsx +++ b/assets/js/src/subscribers/importExport/import-old.jsx @@ -159,7 +159,6 @@ jQuery(document).ready(() => { : new Handlebars.SafeString(Handlebars.Utils.escapeExpression(data)))); - nextStepButton.off().on('click', (event) => { const columns = {}; const queue = new jQuery.AsyncQueue(); diff --git a/assets/js/src/subscribers/importExport/import/context.jsx b/assets/js/src/subscribers/importExport/import/context.jsx index 50a8eab499..f1c297a268 100644 --- a/assets/js/src/subscribers/importExport/import/context.jsx +++ b/assets/js/src/subscribers/importExport/import/context.jsx @@ -2,6 +2,7 @@ import React from 'react'; const ImportContext = React.createContext({ isNewUser: window.mailpoet_is_new_user, + segments: window.mailpoetSegments, }); export default ImportContext; 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 24f6905f6b..d9805abf03 100644 --- a/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx +++ b/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { withRouter } from 'react-router-dom'; import PreviousNextStepButtons from './previous_next_step_buttons.jsx'; @@ -24,6 +24,7 @@ function StepDataManipulation({ stepMethodSelectionData, subscribersLimitForValidation, }) { + const [selectedSegments, setSelectedSegments] = useState([]); useEffect( () => { if (typeof (stepMethodSelectionData) === 'undefined') { @@ -47,10 +48,10 @@ function StepDataManipulation({ subscribers={stepMethodSelectionData.subscribers} header={stepMethodSelectionData.header} /> - + 0} onPreviousAction={() => ( history.push(getPreviousStepLink(stepMethodSelectionData, subscribersLimitForValidation)) )} diff --git a/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx b/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx new file mode 100644 index 0000000000..69e44c13eb --- /dev/null +++ b/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx @@ -0,0 +1,52 @@ +import jQuery from 'jquery'; +import MailPoet from 'mailpoet'; +import _ from 'underscore'; + +export function createSelection(segments, onSelectionChange) { + const segmentSelectElement = jQuery('select#mailpoet_segments_select'); + if (segmentSelectElement.data('select2')) { + return; + } + segmentSelectElement.html(''); + segmentSelectElement + .select2({ + data: segments, + width: '20em', + templateResult(item) { + const i = item; + i.subscriberCount = parseInt(i.subscriberCount, 10); + return `${i.name} (${i.subscriberCount.toLocaleString()})`; + }, + templateSelection(item) { + const i = item; + i.subscriberCount = parseInt(i.subscriberCount, 10); + return `${i.name} (${i.subscriberCount.toLocaleString()})`; + }, + }) + .change((event) => { + const segmentSelectionNotice = jQuery('[data-id="notice_segmentSelection"]'); + if (!event.currentTarget.value) { + if (!segmentSelectionNotice.length) { + MailPoet.Notice.error(MailPoet.I18n.t('segmentSelectionRequired'), { + static: true, + scroll: true, + id: 'notice_segmentSelection', + hideClose: true, + }); + } + } else { + jQuery('[data-id="notice_segmentSelection"]').remove(); + } + const data = _.pluck(segmentSelectElement.select2('data'), 'id'); + onSelectionChange(data); + }); +} + +export function destroySelection() { + const segmentSelectElement = jQuery('select#mailpoet_segments_select'); + if (segmentSelectElement.data('select2')) { + segmentSelectElement + .html('') + .select2('destroy'); + } +} diff --git a/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx b/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx new file mode 100644 index 0000000000..f3d2b44f95 --- /dev/null +++ b/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx @@ -0,0 +1,42 @@ +import React, { useLayoutEffect, useContext } from 'react'; +import MailPoet from 'mailpoet'; +import PropTypes from 'prop-types'; + +import ImportContext from '../context.jsx'; + +import { createSelection } from './generate_segment_selection.jsx'; + +function SelectSegment({ setSelectedSegments }) { + const { segments: originalSegments } = useContext(ImportContext); + + useLayoutEffect(() => { + createSelection(originalSegments, (segments) => { + setSelectedSegments(segments); + }); + }); + + return ( + <> + + {MailPoet.I18n.t('createANewList')} + + ); +} + +SelectSegment.propTypes = { + setSelectedSegments: PropTypes.func.isRequired, +}; + +export default SelectSegment; diff --git a/views/subscribers/importExport/import.html b/views/subscribers/importExport/import.html index c8d6d3b266..f5f3c0982f 100644 --- a/views/subscribers/importExport/import.html +++ b/views/subscribers/importExport/import.html @@ -99,6 +99,11 @@ 'importAgain': __('Import again'), 'viewSubscribers': __('View subscribers'), 'methodPaste': __('Paste the data into a text box'), +'pickLists': __('Pick one or more list(s)'), +'pickListsDescription': __('Pick the list that you want to import these subscribers to.'), +'select': _x('Select', ' Verb'), +'createANewList': __('Create a new list'), +'addSubscribersToSegment': __(' To add subscribers to a mailing segment, [link]create a list[/link].'), 'methodUpload': __('Upload a file'), 'methodMailChimp': __('Import from MailChimp'), 'methodMailChimpLabel': __('Enter your MailChimp API key'), diff --git a/views/subscribers/importExport/import/step_data_manipulation.html b/views/subscribers/importExport/import/step_data_manipulation.html index 0bbeed47e4..05279e13d7 100644 --- a/views/subscribers/importExport/import/step_data_manipulation.html +++ b/views/subscribers/importExport/import/step_data_manipulation.html @@ -6,12 +6,7 @@

- -
- - -
-
+ @@ -54,63 +49,9 @@ - - -
- <%= __('Previous step') %> -    - <%= __('Next step') %> -
- - - - -