Add segment selection

[MAILPOET-1809]

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();

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;

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}
         />
-        <SelectSegment />
+        <SelectSegment setSelectedSegments={setSelectedSegments} />
       </div>
       <PreviousNextStepButtons
-        canGoNext={false}
+        canGoNext={selectedSegments.length > 0}
         onPreviousAction={() => (
           history.push(getPreviousStepLink(stepMethodSelectionData, subscribersLimitForValidation))
         )}

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');
+  }
+}

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 (
+    <>
+      <label htmlFor="mailpoet_segments_select">
+        {MailPoet.I18n.t('pickLists')}
+        <p className="description">
+          {MailPoet.I18n.t('pickListsDescription')}
+        </p>
+        <select
+          id="mailpoet_segments_select"
+          data-placeholder={MailPoet.I18n.t('select')}
+          multiple="multiple"
+        >
+          <option />
+        </select>
+      </label>
+      <a className="mailpoet_create_segment">{MailPoet.I18n.t('createANewList')}</a>
+    </>
+  );
+}
+
+SelectSegment.propTypes = {
+  setSelectedSegments: PropTypes.func.isRequired,
+};
+
+export default SelectSegment;

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'),

views/subscribers/importExport/import/step_data_manipulation.html

@@ -6,12 +6,7 @@
 
   <div class="inside">
     <br>
-    <!-- Subscribers Data -->
+
-    <div id="subscribers_data">
-      <table class="mailpoet_subscribers widefat fixed">
-        <!-- Template data -->
-      </table>
-    </div>
 
     <table class="mailpoet_subscribers form-table">
       <tbody>
@@ -54,63 +49,9 @@
           </label>
         </td>
       </tr>
-      <tr>
-        <th style="width: 300px;">
-          <a href="javascript:;" id="return_to_previous"
-             class="button-primary wysija button"><%= __('Previous step') %> </a>
-          &nbsp;&nbsp;
-          <a href="javascript:;" id="next_step"
-           data-automation-id="import-next-step"
-           class="button-primary wysija button-disabled"><%= __('Next step') %> </a>
-        </th>
-      </tr>
       </tbody>
     </table>
 
-    <!-- subscribers data template -->
-    <script id="subscribers_data_template" type="text/x-handlebars-template">
-      <thead>
-      <th>
-        <%= __('Match data') %>
-      </th>
-      {{#show_and_match_columns .}}
-      {{#.}}
-      <th>
-        <select class="mailpoet_subscribers_column_data_match" data-column-id="{{column_id}}" data-validation-rule="false" id="column_{{@index}}">
-      </th>
-      {{/.}}
-      {{/show_and_match_columns}}
-      </thead>
-      <tbody>
-      {{> subscribers_data_template_partial}}
-      </tbody>
-    </script>
-
-    <script id="subscribers_data_template_partial" type="text/x-handlebars-template">
-      {{#if header}}
-      <tr class="mailpoet_header">
-        <td></td>
-        {{#header}}
-        <td>
-          {{this}}
-        </td>
-        {{/header}}
-      </tr>
-      {{/if}}
-      {{#subscribers}}
-      <tr>
-        <td>
-          {{calculate_index @index}}
-        </td>
-        {{#.}}
-        <td>
-          {{sanitize_data this}}
-        </td>
-        {{/.}}
-      </tr>
-      {{/subscribers}}
-    </script>
-
     <!-- New segment template -->
     <script id="new_segment_template" type="text/x-handlebars-template">
       <p>