Redesign import MailChimp method

[MAILPOET-3073]

assets/css/src/components-plugin/_import-export.scss

@@ -3,35 +3,6 @@
   display: none;
 }
 
-span {
-  &.mailpoet_mailchimp-key-status {
-    &.mailpoet_mailchimp-ok {
-      &:before {
-        color: #0e90d2;
-        content: '\2713';
-        margin-left: 15px;
-      }
-    }
-
-    &.mailpoet_mailchimp-error {
-      &:before {
-        color: #900;
-        content: '\2717';
-        margin-left: 15px;
-      }
-    }
-  }
-
-  &.select2-search {
-    &.select2-search--dropdown {
-      .admin_page_mailpoet-import &,
-      .admin_page_mailpoet-export & {
-        display: none !important;
-      }
-    }
-  }
-}
-
 .subscribers_data {
   overflow: auto;
 
@@ -174,73 +145,6 @@ tr {
   }
 }
 
-.mailpoet_method_selection_step {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-
-  > * {
-    margin: 10px 0;
-  }
-
-  .mailpoet_import_selection_form {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-
-    > * {
-      margin-right: 2.5em;
-    }
-  }
-
-  .mailpoet_import_heading {
-    color: #23282d;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1.3;
-  }
-
-  .description {
-    color: #666;
-    font-size: 13px;
-    font-style: italic;
-    font-weight: 600;
-    margin: 2px 0 5px;
-  }
-
-  .mailpoet_import_paste_texts {
-    margin-right: 25px;
-    width: 300px;
-  }
-
-  .mailpoet_import_method_paste {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-  }
-
-  .mailpoet_import_mailchimp {
-    .mailpoet_mailchimp_key,
-    .mailpoet_mailchimp_lists {
-      align-items: center;
-      display: flex;
-      flex-wrap: nowrap;
-      margin-bottom: 40px;
-    }
-
-    .mailpoet_mailchimp_key_input {
-      align-items: center;
-      display: flex;
-      margin-right: 20px;
-    }
-
-    .mailpoet_import_heading {
-      display: block;
-      width: 300px;
-    }
-  }
-}
-
 .mailpoet_offer_migration {
   margin-top: 40px;
 }

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

@@ -1,48 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import MailPoet from 'mailpoet';
+import Button from 'common/button/button';
 
 const PreviousNextStepButtons = ({
   hidePrevious,
   canGoNext,
   onPreviousAction,
   onNextAction,
-}) => {
-  const nextStepClasses = classNames(
-    'button-primary',
-    'wysija',
-    { 'button-disabled': !canGoNext },
-  );
-  return (
-    <div className="mailpoet_import_step_buttons">
-      {!hidePrevious && (
-        <>
-          <button
-            className="button-primary wysija button"
-            type="button"
-            onClick={onPreviousAction}
-          >
-            {MailPoet.I18n.t('previousStep')}
-          </button>
-        &nbsp;&nbsp;
-        </>
-      )}
-      <button
-        type="button"
-        data-automation-id="import-next-step"
-        className={nextStepClasses}
-        onClick={() => {
-          if (canGoNext) {
-            onNextAction();
-          }
-        }}
-      >
-        {MailPoet.I18n.t('nextStep')}
-      </button>
-    </div>
-  );
-};
+}) => (
+  <div className="mailpoet-settings-save">
+    {!hidePrevious && (
+      <Button type="button" onClick={onPreviousAction}>
+        {MailPoet.I18n.t('previousStep')}
+      </Button>
+    )}
+    <Button
+      type="button"
+      automationId="import-next-step"
+      isDisabled={!canGoNext}
+      onClick={() => {
+        if (canGoNext) {
+          onNextAction();
+        }
+      }}
+    >
+      {MailPoet.I18n.t('nextStep')}
+    </Button>
+  </div>
+);
 
 PreviousNextStepButtons.propTypes = {
   canGoNext: PropTypes.bool,

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

@@ -55,7 +55,7 @@ function StepMethodSelection({
   };
 
   return (
-    <div className="mailpoet_method_selection_step">
+    <div className="mailpoet-settings-grid">
       <SelectMethod
         activeMethod={method}
         onMethodChange={setMethod}

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

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
-import classNames from 'classnames';
-import Selection from '../../../../form/fields/selection.jsx';
+import Button from 'common/button/button';
+import Input from 'common/form/input/input';
+import Selection from 'form/fields/selection.jsx';
 import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
 
 const MethodMailChimp = ({ onFinish, onPrevious }) => {
@@ -69,47 +70,50 @@ const MethodMailChimp = ({ onFinish, onPrevious }) => {
   const showListsSelection = () => {
     if (!mailChimpLoadedLists) return null;
     return (
-      <div className="mailpoet_mailchimp_lists">
-        <span className="mailpoet_import_heading">{MailPoet.I18n.t('methodMailChimpSelectList')}</span>
-        <Selection
-          field={{
-            id: 'segments',
-            name: 'list-selection',
-            multiple: true,
-            placeholder: MailPoet.I18n.t('methodMailChimpSelectPlaceholder'),
-            forceSelect2: true,
-            values: mailChimpLoadedLists,
-          }}
-          onValueChange={(e) => setSelectedLists(e.target.value)}
-        />
-      </div>
+      <>
+        <div className="mailpoet-settings-label">{MailPoet.I18n.t('methodMailChimpSelectList')}</div>
+        <div className="mailpoet-settings-inputs">
+          <Selection
+            field={{
+              id: 'segments',
+              name: 'list-selection',
+              multiple: true,
+              placeholder: MailPoet.I18n.t('methodMailChimpSelectPlaceholder'),
+              forceSelect2: true,
+              values: mailChimpLoadedLists,
+            }}
+            onValueChange={(e) => setSelectedLists(e.target.value)}
+          />
+        </div>
+      </>
     );
   };
 
-  const statusClasses = classNames(
-    'mailpoet_mailchimp-key-status',
-    { 'mailpoet_mailchimp-ok': Array.isArray(mailChimpLoadedLists) }
-  );
-
   return (
-    <div className="mailpoet_import_mailchimp">
-      <div className="mailpoet_mailchimp_key">
-        <label htmlFor="mailpoet_mailchimp_key_input" className="mailpoet_mailchimp_key_input">
+    <>
+      <div className="mailpoet-settings-label">
+        <label htmlFor="mailpoet_mailchimp_key_input">
           <span className="mailpoet_import_heading">{MailPoet.I18n.t('methodMailChimpLabel')}</span>
-          <input
+        </label>
+      </div>
+      <div className="mailpoet-settings-inputs">
+        <div className="mailpoet-settings-inputs-row mailpoet-settings-inputs-row-centered">
+          <Input
             id="mailpoet_mailchimp_key_input"
             type="text"
             onChange={keyChange}
           />
-        </label>
-        <button className="button" type="button" onClick={verifyButtonClicked}>
-          {MailPoet.I18n.t('methodMailChimpVerify')}
-        </button>
-        <span className={statusClasses}>
-          { Array.isArray(mailChimpLoadedLists) && mailChimpLoadedLists.length === 0
-            ? MailPoet.I18n.t('noMailChimpLists')
-            : null}
-        </span>
+          <span className="mailpoet-gap" />
+          <Button type="button" dimension="small" onClick={verifyButtonClicked}>
+            {MailPoet.I18n.t('methodMailChimpVerify')}
+          </Button>
+          <span className="mailpoet-gap" />
+          <span>
+            { Array.isArray(mailChimpLoadedLists) && mailChimpLoadedLists.length === 0
+              ? MailPoet.I18n.t('noMailChimpLists')
+              : null}
+          </span>
+        </div>
       </div>
       {showListsSelection()}
       <PreviousNextStepButtons
@@ -117,7 +121,7 @@ const MethodMailChimp = ({ onFinish, onPrevious }) => {
         onPreviousAction={onPrevious}
         onNextAction={process}
       />
-    </div>
+    </>
   );
 };
 

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

@@ -1,68 +1,68 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { GlobalContext } from 'context/index.jsx';
+import Radio from 'common/form/radio/radio';
+import Tag from 'common/tag/tag';
 
 function SelectImportMethod({
   activeMethod,
   onMethodChange,
 }) {
-  const { users } = React.useContext(GlobalContext);
-  const { isNewUser } = users;
-  const badgeClasses = classNames(
-    'mailpoet_badge',
-    'mailpoet_badge_video',
-    { mailpoet_badge_video_grey: !isNewUser }
-  );
   return (
     <>
-      <form className="mailpoet_import_selection_form">
+      <div className="mailpoet-settings-label">
         <span className="mailpoet_import_heading">{MailPoet.I18n.t('methodSelectionHead')}</span>
-        <label htmlFor="import-paste-method">
-          <input
-            type="radio"
+        <div className="mailpoet-settings-inputs-row">
+          <a
+            href="https://kb.mailpoet.com/article/242-video-guide-importing-subscribers-using-a-csv-file"
+            data-beacon-article="5a8e8f0204286305fbc9be9a"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Tag dimension="large" variant="excellent" isInverted>{MailPoet.I18n.t('seeVideo')}</Tag>
+          </a>
+        </div>
+      </div>
+      <div className="mailpoet-settings-inputs">
+        <div className="mailpoet-settings-inputs-row">
+          <Radio
             name="select_method"
-            data-automation-id="import-paste-method"
+            automationId="import-paste-method"
             id="import-paste-method"
             checked={activeMethod === 'paste-method'}
-            onChange={() => onMethodChange('paste-method')}
+            onCheck={() => onMethodChange('paste-method')}
           />
-          {MailPoet.I18n.t('methodPaste')}
-        </label>
-        <label htmlFor="import-csv-method">
-          <input
-            type="radio"
+          <label htmlFor="import-paste-method">
+            {MailPoet.I18n.t('methodPaste')}
+          </label>
+        </div>
+
+        <div className="mailpoet-settings-inputs-row">
+          <Radio
             name="select_method"
-            data-automation-id="import-csv-method"
+            automationId="import-csv-method"
             id="import-csv-method"
             checked={activeMethod === 'file-method'}
-            onChange={() => onMethodChange('file-method')}
+            onCheck={() => onMethodChange('file-method')}
           />
-          {MailPoet.I18n.t('methodUpload')}
-        </label>
-        <label htmlFor="import-mailchimp-method">
-          <input
-            type="radio"
+          <label htmlFor="import-csv-method">
+            {MailPoet.I18n.t('methodUpload')}
+          </label>
+        </div>
+
+        <div className="mailpoet-settings-inputs-row">
+          <Radio
             name="select_method"
-            data-automation-id="import-mailchimp-method"
+            automationId="import-mailchimp-method"
             id="import-mailchimp-method"
             checked={activeMethod === 'mailchimp-method'}
-            onChange={() => onMethodChange('mailchimp-method')}
+            onCheck={() => onMethodChange('mailchimp-method')}
           />
-          {MailPoet.I18n.t('methodMailChimp')}
-        </label>
-      </form>
-      <a
-        className={badgeClasses}
-        href="https://kb.mailpoet.com/article/242-video-guide-importing-subscribers-using-a-csv-file"
-        data-beacon-article="5a8e8f0204286305fbc9be9a"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <span className="dashicons dashicons-format-video" />
-        {MailPoet.I18n.t('seeVideo')}
-      </a>
+          <label htmlFor="import-mailchimp-method">
+            {MailPoet.I18n.t('methodMailChimp')}
+          </label>
+        </div>
+      </div>
     </>
   );
 }