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;