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

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

@@ -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,

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

@@ -55,7 +55,7 @@ function StepMethodSelection({
};
return (
<div className="mailpoet_method_selection_step">
<div className="mailpoet-settings-grid">
<SelectMethod
activeMethod={method}
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 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>
</>
);
};

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 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>
</>
);
}