Load MailChimp Lists

[MAILPOET-1808]

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

@@ -117,52 +117,7 @@ jQuery(document).ready(() => {
       mailChimpListsContainerElement.show();
     }
 
-    /*
-     *  MailChimp
-     */
-    mailChimpKeyInputElement.keyup((event) => {
-      if (event.currentTarget.value.trim() === ''
-        || !/[a-zA-Z0-9]{32}-/.exec(event.currentTarget.value.trim())) {
-        mailChimpListsContainerElement.hide();
-        jQuery('.mailpoet_mailchimp-key-status')
-          .html('')
-          .removeClass('mailpoet_mailchimp-ok mailpoet_mailchimp-error');
-        toggleNextStepButton(mailChimpProcessButtonElement, 'off');
-      }
-    });
 
-    mailChimpKeyVerifyButtonElement.click(() => {
-      MailPoet.Modal.loading(true);
-      MailPoet.Ajax.post({
-        api_version: window.mailpoet_api_version,
-        endpoint: 'importExport',
-        action: 'getMailChimpLists',
-        data: {
-          api_key: mailChimpKeyInputElement.val(),
-        },
-      }).always(() => {
-        MailPoet.Modal.loading(false);
-      }).done((response) => {
-        jQuery('.mailpoet_mailchimp-key-status')
-          .html('')
-          .removeClass()
-          .addClass('mailpoet_mailchimp-key-status mailpoet_mailchimp-ok');
-        if (response.data.length === 0) {
-          jQuery('.mailpoet_mailchimp-key-status').html(MailPoet.I18n.t('noMailChimpLists'));
-          mailChimpListsContainerElement.hide();
-          toggleNextStepButton(mailChimpProcessButtonElement, 'off');
-        } else {
-          displayMailChimpLists(response.data);
-        }
-      }).fail((response) => {
-        if (response.errors.length > 0) {
-          MailPoet.Notice.error(
-            response.errors.map(error => error.message),
-            { scroll: true }
-          );
-        }
-      });
-    });
 
     mailChimpProcessButtonElement.click(() => {
       if (mailChimpProcessButtonElement.closest('table a').hasClass('button-disabled')) {

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

@@ -1,9 +1,84 @@
 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';
 
 const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => {
   const [key, setKey] = useState('');
+  const [mailChimpLoadedLists, setMailChimpLoadedLists] = useState(undefined);
+  const [selectedLists, setSelectedLists] = useState([]);
+
+  const keyChange = (e) => {
+    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();
+    }
+  };
+
+  const verifyButtonClicked = () => {
+    MailPoet.Modal.loading(true);
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'importExport',
+      action: 'getMailChimpLists',
+      data: {
+        api_key: key,
+      },
+    }).always(() => {
+      MailPoet.Modal.loading(false);
+    }).done((response) => {
+      setMailChimpLoadedLists(response.data);
+      if (response.data.length === 0) {
+        setInputInvalid();
+      }
+    }).fail((response) => {
+      setInputInvalid();
+      if (response.errors.length > 0) {
+        MailPoet.Notice.error(
+          response.errors.map(error => error.message),
+          { scroll: true }
+        );
+      }
+    });
+  };
+
+  const showListsSelection = () => {
+    if (!mailChimpLoadedLists) return null;
+    return (
+      <>
+        <div>
+          <span className="import_heading">{MailPoet.I18n.t('methodMailChimpSelectList')}</span>
+        </div>
+        <Selection
+          field={{
+            id: 'segments',
+            name: 'list-selection',
+            multiple: true,
+            placeholder: MailPoet.I18n.t('methodMailChimpSelectPlaceholder'),
+            forceSelect2: true,
+            values: mailChimpLoadedLists,
+          }}
+          onValueChange={e => listSelected(e.target.value)}
+        />
+      </>
+    );
+  };
+
+  const statusClasses = classNames(
+    'mailpoet_mailchimp-key-status',
+    { 'mailpoet_mailchimp-ok': Array.isArray(mailChimpLoadedLists) }
+  );
 
   return (
     <>
@@ -14,12 +89,18 @@ const MethodMailChimp = ({ setInputValid, setInputInvalid, onValueChange }) => {
         <input
           id="paste_input"
           type="text"
-          onChange={setKey}
+          onChange={keyChange}
         />
-        <button className="button" type="button">
+        <button className="button" type="button" onClick={verifyButtonClicked}>
           {MailPoet.I18n.t('methodMailChimpVerify')}
         </button>
-        <span className="mailpoet_mailchimp-key-status"></span>
+        <span className={statusClasses}>
+          { Array.isArray(mailChimpLoadedLists) && mailChimpLoadedLists.length === 0
+            ? MailPoet.I18n.t('noMailChimpLists')
+            : null
+          }
+        </span>
+        {showListsSelection()}
       </label>
     </>
   );