Add MailChimp on finish

[MAILPOET-1808]

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

@@ -80,76 +80,6 @@ jQuery(document).ready(() => {
         container
       );
     }
-    return;
-
-    const mailChimpKeyInputElement = jQuery('#mailchimp_key');
-    const mailChimpKeyVerifyButtonElement = jQuery('#mailchimp_key_verify');
-    const mailChimpListsContainerElement = jQuery('#mailchimp_lists');
-    const mailChimpProcessButtonElement = jQuery('#method_mailchimp > div.mailpoet_method_process')
-      .find('a.mailpoet_process');
-
-    function displayMailChimpLists(data) {
-      const listSelectElement = mailChimpListsContainerElement.find('select');
-      if (listSelectElement.data('select2')) {
-        listSelectElement.select2('data', data);
-        listSelectElement.trigger('change');
-      } else {
-        listSelectElement
-          .select2({
-            data,
-            width: '20em',
-            templateResult(item) {
-              return item.name;
-            },
-            templateSelection(item) {
-              return item.name;
-            },
-          })
-          .change((event) => {
-            if (jQuery(event.currentTarget).val() !== null) {
-              toggleNextStepButton(mailChimpProcessButtonElement, 'on');
-            } else {
-              toggleNextStepButton(mailChimpProcessButtonElement, 'off');
-            }
-          })
-          .trigger('change');
-      }
-      mailChimpListsContainerElement.show();
-    }
-
-
-
-    mailChimpProcessButtonElement.click(() => {
-      if (mailChimpProcessButtonElement.closest('table a').hasClass('button-disabled')) {
-        return;
-      }
-      MailPoet.Modal.loading(true);
-      MailPoet.Ajax.post({
-        api_version: window.mailpoet_api_version,
-        endpoint: 'importExport',
-        action: 'getMailChimpSubscribers',
-        data: {
-          api_key: mailChimpKeyInputElement.val(),
-          lists: mailChimpListsContainerElement.find('select').val(),
-        },
-      }).always(() => {
-        MailPoet.Modal.loading(false);
-      }).done((response) => {
-        window.importData.step_method_selection = response.data;
-        MailPoet.trackEvent('Subscribers import started', {
-          source: 'MailChimp',
-          'MailPoet Free version': window.mailpoet_version,
-        });
-        router.navigate('step_data_manipulation', { trigger: true });
-      }).fail((response) => {
-        if (response.errors.length > 0) {
-          MailPoet.Notice.error(
-            response.errors.map(error => error.message),
-            { scroll: true }
-          );
-        }
-      });
-    });
   });
 
   router.on('route:step_input_validation', () => {

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

@@ -33,7 +33,8 @@ function StepMethodSelection({
     setCsvData('');
   };
 
-  const navigateToNextStep = () => {
+  const finish = (parsedData) => {
+    window.importData.step_method_selection = parsedData;
     navigate(
       getNextStepLink(window.importData.step_method_selection),
       { trigger: true }
@@ -42,12 +43,11 @@ function StepMethodSelection({
 
   const processLocal = () => {
     processCsv(csvData, (sanitizedData) => {
-      window.importData.step_method_selection = sanitizedData;
       MailPoet.trackEvent('Subscribers import started', {
         source: method === 'file-method' ? 'file upload' : 'pasted data',
         'MailPoet Free version': window.mailpoet_version,
       });
-      navigateToNextStep();
+      finish(sanitizedData);
     });
   };
 
@@ -78,7 +78,13 @@ function StepMethodSelection({
       { method === 'mailchimp-method'
         ? (
           <MethodMailChimp
-            onFinish={navigateToNextStep}
+            onFinish={(data) => {
+              MailPoet.trackEvent('Subscribers import started', {
+                source: 'MailChimp',
+                'MailPoet Free version': window.mailpoet_version,
+              });
+              finish(data);
+            }}
           />
         ) : null
       }

assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
-import Selection from '../../../../form/fields/selection.jsx';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 import classNames from 'classnames';
+import Selection from '../../../../form/fields/selection.jsx';
+import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
 
-const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => {
+const MethodMailChimp = ({ onFinish }) => {
   const [key, setKey] = useState('');
   const [mailChimpLoadedLists, setMailChimpLoadedLists] = useState(undefined);
   const [selectedLists, setSelectedLists] = useState([]);
@@ -13,16 +14,6 @@ const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => {
     setKey(e.target.value);
     if (e.target.value.trim() === '') {
       setMailChimpLoadedLists(undefined);
-      setInputInvalid();
-    }
-  };
-
-  const listSelected = (lists) => {
-    setSelectedLists(lists);
-    if (Array.isArray(lists) && lists.length === 0) {
-      setInputInvalid();
-    } else {
-      setInputValid();
     }
   };
 
@@ -35,22 +26,44 @@ const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => {
       data: {
         api_key: key,
       },
-    }).always(() => {
+    })
-      MailPoet.Modal.loading(false);
+      .always(() => {
-    }).done((response) => {
+        MailPoet.Modal.loading(false);
-      setMailChimpLoadedLists(response.data);
+      })
-      if (response.data.length === 0) {
+      .done(response => setMailChimpLoadedLists(response.data))
-        setInputInvalid();
+      .fail((response) => {
-      }
+        if (response.errors.length > 0) {
-    }).fail((response) => {
+          MailPoet.Notice.error(
-      setInputInvalid();
+            response.errors.map(error => error.message),
-      if (response.errors.length > 0) {
+            { scroll: true }
-        MailPoet.Notice.error(
+          );
-          response.errors.map(error => error.message),
+        }
-          { scroll: true }
+      });
-        );
+  };
-      }
+
-    });
+  const process = () => {
+    MailPoet.Modal.loading(true);
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'importExport',
+      action: 'getMailChimpSubscribers',
+      data: {
+        api_key: key,
+        lists: selectedLists,
+      },
+    })
+      .always(() => {
+        MailPoet.Modal.loading(false);
+      })
+      .done(response => onFinish(response.data))
+      .fail((response) => {
+        if (response.errors.length > 0) {
+          MailPoet.Notice.error(
+            response.errors.map(error => error.message),
+            { scroll: true }
+          );
+        }
+      });
   };
 
   const showListsSelection = () => {
@@ -69,7 +82,7 @@ const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => {
             forceSelect2: true,
             values: mailChimpLoadedLists,
           }}
-          onValueChange={e => listSelected(e.target.value)}
+          onValueChange={e => setSelectedLists(e.target.value)}
         />
       </>
     );
@@ -102,19 +115,21 @@ const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => {
         </span>
         {showListsSelection()}
       </label>
+      <PreviousNextStepButtons
+        canGoNext={Array.isArray(selectedLists) && selectedLists.length > 0}
+        hidePrevious
+        onNextAction={process}
+      />
     </>
   );
 };
 
 MethodMailChimp.propTypes = {
-  setInputValid: PropTypes.func,
+  onFinish: PropTypes.func,
-  setInputInvalid: PropTypes.func,
-  onValueChange: PropTypes.func.isRequired,
 };
 
 MethodMailChimp.defaultProps = {
-  setInputValid: () => {},
+  onFinish: () => {},
-  setInputInvalid: () => {},
 };
 
 export default MethodMailChimp;

views/subscribers/importExport/import/step_method_selection.html

@@ -1,36 +1,2 @@
 <div id="step_method_selection" class="mailpoet_hidden method_selection_step">
-  <div class="inside">
-    <!-- Mailchimp -->
-    <div id="method_mailchimp" class="mailpoet_hidden">
-      <table class="mailpoet_subscribers form-table">
-        <tbody>
-        <tr>
-          <th scope="row">
-            <label for="mailchimp_key">
-              <%= __('Enter your MailChimp API key') %>
-            </label>
-          </th>
-          <td>
-            <input type="text" id="mailchimp_key">
-            <button id="mailchimp_key_verify" class="button"><%= __('Verify') %></button>
-            <span class="mailpoet_mailchimp-key-status"></span>
-          </td>
-        </tr>
-        <tr id="mailchimp_lists" class="mailpoet_hidden">
-          <th scope="row">
-            <label>
-              <%= __('Select list(s)') %>
-            </label>
-          </th>
-          <td>
-            <select class="mailchimp_lists_select" data-placeholder="<%= _x('Select', 'Verb') %>" multiple="multiple"></select>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-      <div class="mailpoet_method_process">
-        <!-- Template data -->
-      </div>
-    </div>
-  </div>
 </div>