Ask user to update existing subscribers

[MAILPOET-1809]

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

@@ -15,32 +15,12 @@ import StepResults from './import/step_results.jsx';
 jQuery(document).ready(() => {
 
   router.on('route:step_data_manipulation', () => {
-    let fillerPosition;
 
     // define reusable variables
     const nextStepButton = jQuery('#next_step');
 
     // create a copy of subscribers object for further manipulation
-    const subscribers = jQuery.extend(true, {}, window.importData.step_method_selection);
-    const subscribersDataTemplate = Handlebars.compile(jQuery('#subscribers_data_template').html());
-    const subscribersDataTemplatePartial = Handlebars.compile(jQuery('#subscribers_data_template_partial').html());
     const segmentSelectElement = jQuery('#mailpoet_segments_select');
-    const maxRowsToShow = 10;
-    const filler = '. . .';
-    // create an array of filler data with the same number of
-    // elements as in the subscribers' data row
-    const fillerArray = Array(...new Array(subscribers.subscribers[0].length))
-      .map(String.prototype.valueOf, filler);
-
-    function toggleNextStepButton(condition) {
-      const disabled = 'button-disabled';
-      if (condition === 'on') {
-        nextStepButton.removeClass(disabled);
-        return;
-      }
-      nextStepButton.addClass(disabled);
-    }
-
 
 
     nextStepButton.off().on('click', (event) => {

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

@@ -5,6 +5,7 @@ import PreviousNextStepButtons from './previous_next_step_buttons.jsx';
 import Warnings from './step_data_manipulation/warnings.jsx';
 import MatchTable from './step_data_manipulation/match_table.jsx';
 import SelectSegment from './step_data_manipulation/select_segment.jsx';
+import UpdateExistingSubscribers from './step_data_manipulation/update_existing_subscribers.jsx';
 
 function getPreviousStepLink(importData, subscribersLimitForValidation) {
   if (importData === undefined) {
@@ -25,6 +26,7 @@ function StepDataManipulation({
   subscribersLimitForValidation,
 }) {
   const [selectedSegments, setSelectedSegments] = useState([]);
+  const [updateExistingSubscribers, setUpdateExistingSubscribers] = useState(true);
   useEffect(
     () => {
       if (typeof (stepMethodSelectionData) === 'undefined') {
@@ -49,6 +51,10 @@ function StepDataManipulation({
           header={stepMethodSelectionData.header}
         />
         <SelectSegment setSelectedSegments={setSelectedSegments} />
+        <UpdateExistingSubscribers
+          setUpdateExistingSubscribers={setUpdateExistingSubscribers}
+          updateExistingSubscribers={updateExistingSubscribers}
+        />
       </div>
       <PreviousNextStepButtons
         canGoNext={selectedSegments.length > 0}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import PropTypes from 'prop-types';
+
+function UpdateExistingSubscribers({ updateExistingSubscribers, setUpdateExistingSubscribers }) {
+  return (
+    <>
+      {MailPoet.I18n.t('updateExistingSubscribers')}
+      <label htmlFor="update_existing_subscribers">
+        <input
+          id="update_existing_subscribers"
+          type="radio"
+          name="update_existing_subscribers"
+          checked={updateExistingSubscribers}
+          onChange={() => setUpdateExistingSubscribers(true)}
+        />
+        {MailPoet.I18n.t('updateExistingSubscribersYes')}
+      </label>
+      <label htmlFor="dont_update_existing_subscribers">
+        <input
+          id="dont_update_existing_subscribers"
+          type="radio"
+          name="update_existing_subscribers"
+          checked={!updateExistingSubscribers}
+          onChange={() => setUpdateExistingSubscribers(false)}
+        />
+        {MailPoet.I18n.t('updateExistingSubscribersNo')}
+      </label>
+    </>
+  );
+}
+
+UpdateExistingSubscribers.propTypes = {
+  setUpdateExistingSubscribers: PropTypes.func.isRequired,
+  updateExistingSubscribers: PropTypes.bool.isRequired,
+};
+
+export default UpdateExistingSubscribers;

views/subscribers/importExport/import.html

@@ -103,6 +103,9 @@
 'pickListsDescription': __('Pick the list that you want to import these subscribers to.'),
 'select': _x('Select', ' Verb'),
 'createANewList': __('Create a new list'),
+'updateExistingSubscribers': __("Update existing subscribers' information"),
+'updateExistingSubscribersYes': __('Yes'),
+'updateExistingSubscribersNo': __('No'),
 'addSubscribersToSegment': __(' To add subscribers to a mailing segment, [link]create a list[/link].'),
 'methodUpload': __('Upload a file'),
 'methodMailChimp': __('Import from MailChimp'),

views/subscribers/importExport/import/step_data_manipulation.html

@@ -1,34 +1,5 @@
 <div id="step_data_manipulation" class="mailpoet_hidden">
-  <div id="subscribers_data_parse_results">
-    <!-- Template data -->
-  </div>
-
-
   <div class="inside">
-    <br>
-
-
-    <table class="mailpoet_subscribers form-table">
-      
-      <tr>
-        <th scope="row">
-          <label>
-            <%= __("Update existing subscribers' information") %>
-          </label>
-        </th>
-        <td>
-          <label>
-            <input type="radio" name="subscriber_update_option" value="yes"
-             checked><span><%= __('Yes') %></span>
-          </label>
-          <label>
-            <input type="radio" name="subscriber_update_option"
-             value="no"><span><%= __('No') %></span>
-          </label>
-        </td>
-      </tr>
-      </tbody>
-    </table>
 
     <!-- New segment template -->
     <script id="new_segment_template" type="text/x-handlebars-template">