Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Redesign import MailChimp method

Browse Source 
[MAILPOET-3073]
This commit is contained in:
Ján Mikláš
2020-10-22 17:35:03 +02:00
committed by Veljko V
parent 92be7cef35
commit 8e12ec3870
5 changed files with 104 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
assets/css/src/components-plugin/_import-export.scss
View File

@@ -3,35 +3,6 @@
display: none; 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 { .subscribers_data {
overflow: auto; 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 { .mailpoet_offer_migration {
margin-top: 40px; margin-top: 40px;
} }

58
assets/js/src/subscribers/importExport/import/previous_next_step_buttons.jsx
View File

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

2
assets/js/src/subscribers/importExport/import/step_method_selection.jsx
View File

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

74
assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx
View File

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

84
assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx
View File

@@ -1,68 +1,68 @@
import React from 'react'; import React from 'react';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import Radio from 'common/form/radio/radio';
import { GlobalContext } from 'context/index.jsx'; import Tag from 'common/tag/tag';
function SelectImportMethod({ function SelectImportMethod({
activeMethod, activeMethod,
onMethodChange, onMethodChange,
}) { }) {
const { users } = React.useContext(GlobalContext);
const { isNewUser } = users;
const badgeClasses = classNames(
'mailpoet_badge',
'mailpoet_badge_video',
{ mailpoet_badge_video_grey: !isNewUser }
);
return ( return (
<> <>
<form className="mailpoet_import_selection_form"> <div className="mailpoet-settings-label">
<span className="mailpoet_import_heading">{MailPoet.I18n.t('methodSelectionHead')}</span> <span className="mailpoet_import_heading">{MailPoet.I18n.t('methodSelectionHead')}</span>
<label htmlFor="import-paste-method"> <div className="mailpoet-settings-inputs-row">
<input <a
type="radio" 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" name="select_method"
data-automation-id="import-paste-method" automationId="import-paste-method"
id="import-paste-method" id="import-paste-method"
checked={activeMethod === 'paste-method'} checked={activeMethod === 'paste-method'}
onChange={() => onMethodChange('paste-method')} onCheck={() => onMethodChange('paste-method')}
/> />
{MailPoet.I18n.t('methodPaste')} <label htmlFor="import-paste-method">
</label> {MailPoet.I18n.t('methodPaste')}
<label htmlFor="import-csv-method"> </label>
<input </div>
type="radio"
<div className="mailpoet-settings-inputs-row">
<Radio
name="select_method" name="select_method"
data-automation-id="import-csv-method" automationId="import-csv-method"
id="import-csv-method" id="import-csv-method"
checked={activeMethod === 'file-method'} checked={activeMethod === 'file-method'}
onChange={() => onMethodChange('file-method')} onCheck={() => onMethodChange('file-method')}
/> />
{MailPoet.I18n.t('methodUpload')} <label htmlFor="import-csv-method">
</label> {MailPoet.I18n.t('methodUpload')}
<label htmlFor="import-mailchimp-method"> </label>
<input </div>
type="radio"
<div className="mailpoet-settings-inputs-row">
<Radio
name="select_method" name="select_method"
data-automation-id="import-mailchimp-method" automationId="import-mailchimp-method"
id="import-mailchimp-method" id="import-mailchimp-method"
checked={activeMethod === 'mailchimp-method'} checked={activeMethod === 'mailchimp-method'}
onChange={() => onMethodChange('mailchimp-method')} onCheck={() => onMethodChange('mailchimp-method')}
/> />
{MailPoet.I18n.t('methodMailChimp')} <label htmlFor="import-mailchimp-method">
</label> {MailPoet.I18n.t('methodMailChimp')}
</form> </label>
<a </div>
className={badgeClasses} </div>
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>
</> </>
); );
} }