Create a new segment from import screen

[MAILPOET-1809]

assets/css/src/components/_importExport.scss

@@ -99,7 +99,8 @@ tr {
   }
 }
 
-.mailpoet_subscribers_data_parse_results_details_show {
+.mailpoet_subscribers_data_parse_results_details_show,
+.mailpoet_create_segment {
   cursor: pointer;
 }
 

assets/js/src/subscribers/importExport/import-old.jsx

@@ -41,122 +41,6 @@ jQuery(document).ready(() => {
       nextStepButton.addClass(disabled);
     }
 
-    // hide previous statistics/import results
-    jQuery('#subscribers_data_parse_results:visible').html('');
-    jQuery('#subscribers_data_import_results:visible').hide();
-
-
-    // show available segments
-    if (window.mailpoetSegments.length) {
-      jQuery('.mailpoet_segments').show();
-    } else {
-      jQuery('.mailpoet_no_segments').show();
-    }
-
-    function enableSegmentSelection(segments) {
-      if (segmentSelectElement.data('select2')) {
-        segmentSelectElement
-          .html('')
-          .select2('destroy');
-        toggleNextStepButton('off');
-      }
-      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,
-              });
-            }
-            toggleNextStepButton('off');
-          } else {
-            jQuery('[data-id="notice_segmentSelection"]').remove();
-            if (!jQuery('.mailpoet_notice.error:visible').length) {
-              toggleNextStepButton('on');
-            }
-          }
-        });
-    }
-
-    jQuery('.mailpoet_create_segment').click(() => {
-      MailPoet.Modal.popup({
-        title: MailPoet.I18n.t('addNewList'),
-        template: jQuery('#new_segment_template').html(),
-      });
-      jQuery('#new_segment_name').keypress((e) => {
-        if (e.which === 13) {
-          jQuery('#new_segment_process').click();
-        }
-      });
-      jQuery('#new_segment_process').click(() => {
-        const segmentName = jQuery('#new_segment_name').val().trim();
-        const segmentDescription = jQuery('#new_segment_description').val().trim();
-
-        MailPoet.Ajax.post({
-          api_version: window.mailpoet_api_version,
-          endpoint: 'ImportExport',
-          action: 'addSegment',
-          data: {
-            name: segmentName,
-            description: segmentDescription,
-          },
-        }).done((response) => {
-          let selectedValues;
-          window.mailpoetSegments.push({
-            id: response.data.id,
-            name: response.data.name,
-            subscriberCount: 0,
-          });
-
-          selectedValues = segmentSelectElement.val();
-          if (selectedValues === null) {
-            selectedValues = [response.data.id];
-          } else {
-            selectedValues.push(response.data.id);
-          }
-
-          enableSegmentSelection(window.mailpoetSegments);
-          segmentSelectElement.val(selectedValues).trigger('change');
-          jQuery('.mailpoet_segments:hidden').show();
-          jQuery('.mailpoet_no_segments:visible').hide();
-          MailPoet.Modal.close();
-        }).fail((response) => {
-          if (response.errors.length > 0) {
-            MailPoet.Notice.hide();
-            MailPoet.Notice.error(
-              response.errors.map(error => error.message),
-              { positionAfter: '#new_segment_name' }
-            );
-          }
-        });
-      });
-      jQuery('#new_segment_cancel').click(() => {
-        MailPoet.Modal.close();
-      });
-    });
-
-    // sanitize unsafe data
-    Handlebars.registerHelper('sanitize_data', data => ((data instanceof Handlebars.SafeString)
-      ? data
-      : new Handlebars.SafeString(Handlebars.Utils.escapeExpression(data))));
 
 
     nextStepButton.off().on('click', (event) => {

assets/js/src/subscribers/importExport/import/step_data_manipulation/create_new_segment.jsx

@@ -0,0 +1,48 @@
+import jQuery from 'jquery';
+import MailPoet from 'mailpoet';
+
+
+export default (onCreateSegment) => {
+  MailPoet.Modal.popup({
+    title: MailPoet.I18n.t('addNewList'),
+    template: jQuery('#new_segment_template').html(),
+  });
+  jQuery('#new_segment_name').keypress((e) => {
+    if (e.which === 13) {
+      jQuery('#new_segment_process').click();
+    }
+  });
+  jQuery('#new_segment_process').click(() => {
+    const segmentName = jQuery('#new_segment_name').val().trim();
+    const segmentDescription = jQuery('#new_segment_description').val().trim();
+
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'ImportExport',
+      action: 'addSegment',
+      data: {
+        name: segmentName,
+        description: segmentDescription,
+      },
+    }).done((response) => {
+      onCreateSegment({
+        id: response.data.id,
+        name: response.data.name,
+        subscriberCount: 0,
+      });
+
+      MailPoet.Modal.close();
+    }).fail((response) => {
+      if (response.errors.length > 0) {
+        MailPoet.Notice.hide();
+        MailPoet.Notice.error(
+          response.errors.map(error => error.message),
+          { positionAfter: '#new_segment_name' }
+        );
+      }
+    });
+  });
+  jQuery('#new_segment_cancel').click(() => {
+    MailPoet.Modal.close();
+  });
+};

assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx

@@ -46,7 +46,13 @@ export function destroySelection() {
   const segmentSelectElement = jQuery('select#mailpoet_segments_select');
   if (segmentSelectElement.data('select2')) {
     segmentSelectElement
-      .html('')
       .select2('destroy');
+    segmentSelectElement
+      .find('option')
+      .remove();
+    segmentSelectElement
+      .off('select2:unselecting')
+      .off('change')
+      .off('select2:opening');
   }
 }

assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx

@@ -1,19 +1,27 @@
-import React, { useLayoutEffect, useContext } from 'react';
+import React, { useLayoutEffect, useContext, useState } from 'react';
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
 
 import ImportContext from '../context.jsx';
 
-import { createSelection } from './generate_segment_selection.jsx';
+import { createSelection, destroySelection } from './generate_segment_selection.jsx';
+import createNewSegment from './create_new_segment.jsx';
 
 function SelectSegment({ setSelectedSegments }) {
   const { segments: originalSegments } = useContext(ImportContext);
+  const [selectionSegments, setSelectionSegments] = useState(originalSegments);
 
   useLayoutEffect(() => {
-    createSelection(originalSegments, (segments) => {
+    createSelection(selectionSegments, (segments) => {
       setSelectedSegments(segments);
     });
-  });
+  }, [selectionSegments]);
+
+  const onCreateNewSegment = (segment) => {
+    destroySelection();
+    setSelectedSegments([]);
+    setSelectionSegments([...selectionSegments, segment]);
+  };
 
   return (
     <>
@@ -30,7 +38,21 @@ function SelectSegment({ setSelectedSegments }) {
           <option />
         </select>
       </label>
-      <a className="mailpoet_create_segment">{MailPoet.I18n.t('createANewList')}</a>
+      <a
+        className="mailpoet_create_segment"
+        onClick={() => createNewSegment(onCreateNewSegment)}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(event) => {
+          if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+          ) {
+            event.preventDefault();
+            createNewSegment(onCreateNewSegment);
+          }
+        }}
+      >
+        {MailPoet.I18n.t('createANewList')}
+      </a>
     </>
   );
 }

views/subscribers/importExport/import/step_data_manipulation.html

@@ -9,29 +9,7 @@
 
 
     <table class="mailpoet_subscribers form-table">
-      <tbody>
-      <!-- MP3 Segments -->
-      <tr class="mailpoet_segments mailpoet_hidden">
-        <th scope="row">
-          <label>
-            <%= __('Pick one or more list(s)') %>
-            <p class="description"><%= __('Pick the list that you want to import these subscribers to.') %>
-          </label>
-        </th>
-        <td>
-          <select id="mailpoet_segments_select" data-placeholder="<%= _x('Select', 'Verb') %>" multiple="multiple"></select>
-          <a href="javascript:;" class="mailpoet_create_segment"><%= __('Create a new list') %></a>
-        </td>
-      </tr>
-      <tr class="mailpoet_no_segments mailpoet_hidden">
-        <th scope="row">
-          <%=
-          __('To add subscribers to a mailing segment, [link]create a list[/link].')
-          |replaceLinkTags('javascript:;', {'target' : '_blank', 'class' : 'mailpoet_create_segment'})
-          |raw
-          %>
-        </th>
-      </tr>
+      
       <tr>
         <th scope="row">
           <label>