Fix indentation [MAILPOET-1137]
This commit is contained in:
stoletniy
Vlad
@ -6,280 +6,280 @@ import classNames from 'classnames';
|
|||||||
import Breadcrumb from 'newsletters/breadcrumb.jsx';
|
import Breadcrumb from 'newsletters/breadcrumb.jsx';
|
||||||
import HelpTooltip from 'help-tooltip.jsx';
|
import HelpTooltip from 'help-tooltip.jsx';
|
||||||
|
|
||||||
const ImportTemplate = React.createClass({
|
const ImportTemplate = React.createClass({
|
||||||
saveTemplate: function (saveTemplate) {
|
saveTemplate: function (saveTemplate) {
|
||||||
const template = saveTemplate;
|
const template = saveTemplate;
|
||||||
|
|
||||||
// Stringify to enable transmission of primitive non-string value types
|
// Stringify to enable transmission of primitive non-string value types
|
||||||
if (!_.isUndefined(template.body)) {
|
if (!_.isUndefined(template.body)) {
|
||||||
template.body = JSON.stringify(template.body);
|
template.body = JSON.stringify(template.body);
|
||||||
}
|
}
|
||||||
|
|
||||||
MailPoet.Modal.loading(true);
|
MailPoet.Modal.loading(true);
|
||||||
|
|
||||||
MailPoet.Ajax.post({
|
MailPoet.Ajax.post({
|
||||||
api_version: window.mailpoet_api_version,
|
api_version: window.mailpoet_api_version,
|
||||||
endpoint: 'newsletterTemplates',
|
endpoint: 'newsletterTemplates',
|
||||||
action: 'save',
|
action: 'save',
|
||||||
data: template,
|
data: template,
|
||||||
}).always(() => {
|
}).always(() => {
|
||||||
MailPoet.Modal.loading(false);
|
MailPoet.Modal.loading(false);
|
||||||
}).done((response) => {
|
}).done((response) => {
|
||||||
this.props.onImport(response.data);
|
this.props.onImport(response.data);
|
||||||
}).fail((response) => {
|
}).fail((response) => {
|
||||||
if (response.errors.length > 0) {
|
if (response.errors.length > 0) {
|
||||||
MailPoet.Notice.error(
|
MailPoet.Notice.error(
|
||||||
response.errors.map((error) => { return error.message; }),
|
response.errors.map((error) => { return error.message; }),
|
||||||
{ scroll: true }
|
{ scroll: true }
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleSubmit: function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (_.size(this.refs.templateFile.files) <= 0) return false;
|
|
||||||
|
|
||||||
|
|
||||||
const file = _.first(this.refs.templateFile.files);
|
|
||||||
const reader = new FileReader();
|
|
||||||
const saveTemplate = this.saveTemplate;
|
|
||||||
|
|
||||||
reader.onload = (evt) => {
|
|
||||||
try {
|
|
||||||
saveTemplate(JSON.parse(evt.target.result));
|
|
||||||
MailPoet.trackEvent('Emails > Template imported', {
|
|
||||||
'MailPoet Free version': window.mailpoet_version,
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
MailPoet.Notice.error(MailPoet.I18n.t('templateFileMalformedError'));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
reader.readAsText(file);
|
|
||||||
},
|
|
||||||
render: function () {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>{MailPoet.I18n.t('importTemplateTitle')} <HelpTooltip
|
|
||||||
tooltip={MailPoet.I18n.t('helpTooltipTemplateUpload')}
|
|
||||||
place="right"
|
|
||||||
className="tooltip-help-import-template"
|
|
||||||
/></h2>
|
|
||||||
<form onSubmit={this.handleSubmit}>
|
|
||||||
<input type="file" placeholder={MailPoet.I18n.t('selectJsonFileToUpload')} ref="templateFile" />
|
|
||||||
<p className="submit">
|
|
||||||
<input
|
|
||||||
className="button button-primary"
|
|
||||||
type="submit"
|
|
||||||
value={MailPoet.I18n.t('upload')} />
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
handleSubmit: function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
const NewsletterTemplates = React.createClass({
|
if (_.size(this.refs.templateFile.files) <= 0) return false;
|
||||||
getInitialState: function () {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
templates: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
componentDidMount: function () {
|
|
||||||
this.getTemplates();
|
|
||||||
},
|
|
||||||
getTemplates: function () {
|
|
||||||
this.setState({ loading: true });
|
|
||||||
|
|
||||||
MailPoet.Modal.loading(true);
|
|
||||||
|
|
||||||
MailPoet.Ajax.post({
|
const file = _.first(this.refs.templateFile.files);
|
||||||
api_version: window.mailpoet_api_version,
|
const reader = new FileReader();
|
||||||
endpoint: 'newsletterTemplates',
|
const saveTemplate = this.saveTemplate;
|
||||||
action: 'getAll',
|
|
||||||
}).always(() => {
|
|
||||||
MailPoet.Modal.loading(false);
|
|
||||||
}).done((response) => {
|
|
||||||
if (this.isMounted()) {
|
|
||||||
if (response.data.length === 0) {
|
|
||||||
response.data = [
|
|
||||||
{
|
|
||||||
name:
|
|
||||||
MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
|
|
||||||
description:
|
|
||||||
MailPoet.I18n.t('mailpoetGuideTemplateDescription'),
|
|
||||||
readonly: '1',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
templates: response.data,
|
|
||||||
loading: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}).fail((response) => {
|
|
||||||
if (response.errors.length > 0) {
|
|
||||||
MailPoet.Notice.error(
|
|
||||||
response.errors.map((error) => { return error.message; }),
|
|
||||||
{ scroll: true }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleSelectTemplate: function (template) {
|
|
||||||
let body = template.body;
|
|
||||||
|
|
||||||
// Stringify to enable transmission of primitive non-string value types
|
reader.onload = (evt) => {
|
||||||
if (!_.isUndefined(body)) {
|
try {
|
||||||
body = JSON.stringify(body);
|
saveTemplate(JSON.parse(evt.target.result));
|
||||||
}
|
MailPoet.trackEvent('Emails > Template imported', {
|
||||||
|
|
||||||
MailPoet.trackEvent('Emails > Template selected', {
|
|
||||||
'MailPoet Free version': window.mailpoet_version,
|
'MailPoet Free version': window.mailpoet_version,
|
||||||
'Email name': template.name,
|
|
||||||
});
|
});
|
||||||
|
} catch (err) {
|
||||||
|
MailPoet.Notice.error(MailPoet.I18n.t('templateFileMalformedError'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
MailPoet.Ajax.post({
|
reader.readAsText(file);
|
||||||
api_version: window.mailpoet_api_version,
|
},
|
||||||
endpoint: 'newsletters',
|
render: function () {
|
||||||
action: 'save',
|
return (
|
||||||
data: {
|
<div>
|
||||||
id: this.props.params.id,
|
<h2>{MailPoet.I18n.t('importTemplateTitle')} <HelpTooltip
|
||||||
body: body,
|
tooltip={MailPoet.I18n.t('helpTooltipTemplateUpload')}
|
||||||
},
|
place="right"
|
||||||
}).done((response) => {
|
className="tooltip-help-import-template"
|
||||||
// TODO: Move this URL elsewhere
|
/></h2>
|
||||||
window.location = 'admin.php?page=mailpoet-newsletter-editor&id=' + response.data.id;
|
<form onSubmit={this.handleSubmit}>
|
||||||
}).fail((response) => {
|
<input type="file" placeholder={MailPoet.I18n.t('selectJsonFileToUpload')} ref="templateFile" />
|
||||||
if (response.errors.length > 0) {
|
<p className="submit">
|
||||||
MailPoet.Notice.error(
|
<input
|
||||||
response.errors.map((error) => { return error.message; }),
|
className="button button-primary"
|
||||||
{ scroll: true }
|
type="submit"
|
||||||
);
|
value={MailPoet.I18n.t('upload')} />
|
||||||
}
|
</p>
|
||||||
});
|
</form>
|
||||||
},
|
</div>
|
||||||
handleDeleteTemplate: function (template) {
|
);
|
||||||
this.setState({ loading: true });
|
},
|
||||||
const onConfirm = () => {
|
});
|
||||||
MailPoet.Ajax.post({
|
|
||||||
api_version: window.mailpoet_api_version,
|
const NewsletterTemplates = React.createClass({
|
||||||
endpoint: 'newsletterTemplates',
|
getInitialState: function () {
|
||||||
action: 'delete',
|
return {
|
||||||
data: {
|
loading: false,
|
||||||
id: template.id,
|
templates: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
componentDidMount: function () {
|
||||||
|
this.getTemplates();
|
||||||
|
},
|
||||||
|
getTemplates: function () {
|
||||||
|
this.setState({ loading: true });
|
||||||
|
|
||||||
|
MailPoet.Modal.loading(true);
|
||||||
|
|
||||||
|
MailPoet.Ajax.post({
|
||||||
|
api_version: window.mailpoet_api_version,
|
||||||
|
endpoint: 'newsletterTemplates',
|
||||||
|
action: 'getAll',
|
||||||
|
}).always(() => {
|
||||||
|
MailPoet.Modal.loading(false);
|
||||||
|
}).done((response) => {
|
||||||
|
if (this.isMounted()) {
|
||||||
|
if (response.data.length === 0) {
|
||||||
|
response.data = [
|
||||||
|
{
|
||||||
|
name:
|
||||||
|
MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
|
||||||
|
description:
|
||||||
|
MailPoet.I18n.t('mailpoetGuideTemplateDescription'),
|
||||||
|
readonly: '1',
|
||||||
},
|
},
|
||||||
}).done(() => {
|
];
|
||||||
this.getTemplates();
|
}
|
||||||
}).fail((response) => {
|
this.setState({
|
||||||
if (response.errors.length > 0) {
|
templates: response.data,
|
||||||
MailPoet.Notice.error(
|
loading: false,
|
||||||
response.errors.map((error) => { return error.message; }),
|
|
||||||
{ scroll: true }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const onCancel = () => {
|
|
||||||
this.setState({ loading: false });
|
|
||||||
};
|
|
||||||
confirmAlert({
|
|
||||||
title: MailPoet.I18n.t('confirmTitle'),
|
|
||||||
message: MailPoet.I18n.t('confirmTemplateDeletion').replace('%$1s', template.name),
|
|
||||||
confirmLabel: MailPoet.I18n.t('confirmLabel'),
|
|
||||||
cancelLabel: MailPoet.I18n.t('cancelLabel'),
|
|
||||||
onConfirm: onConfirm,
|
|
||||||
onCancel: onCancel,
|
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
handleShowTemplate: function (template) {
|
}).fail((response) => {
|
||||||
MailPoet.Modal.popup({
|
if (response.errors.length > 0) {
|
||||||
title: template.name,
|
MailPoet.Notice.error(
|
||||||
template: '<div class="mailpoet_boxes_preview" style="background-color: {{ body.globalStyles.body.backgroundColor }}"><img src="{{ thumbnail }}" /></div>',
|
response.errors.map((error) => { return error.message; }),
|
||||||
data: template,
|
{ scroll: true }
|
||||||
});
|
|
||||||
},
|
|
||||||
handleTemplateImport: function () {
|
|
||||||
this.getTemplates();
|
|
||||||
},
|
|
||||||
render: function () {
|
|
||||||
const templates = this.state.templates.map((template, index) => {
|
|
||||||
const deleteLink = (
|
|
||||||
<div className="mailpoet_delete">
|
|
||||||
<a
|
|
||||||
href="javascript:;"
|
|
||||||
onClick={this.handleDeleteTemplate.bind(null, template)}
|
|
||||||
>
|
|
||||||
{MailPoet.I18n.t('delete')}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
let thumbnail = '';
|
|
||||||
|
|
||||||
if (typeof template.thumbnail === 'string'
|
|
||||||
&& template.thumbnail.length > 0) {
|
|
||||||
thumbnail = (
|
|
||||||
<a href="javascript:;" onClick={this.handleShowTemplate.bind(null, template)}>
|
|
||||||
<img src={template.thumbnail} />
|
|
||||||
<div className="mailpoet_overlay"></div>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li key={'template-' + index}>
|
|
||||||
<div className="mailpoet_thumbnail">
|
|
||||||
{ thumbnail }
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mailpoet_description">
|
|
||||||
<h3>{ template.name }</h3>
|
|
||||||
<p>{ template.description }</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mailpoet_actions">
|
|
||||||
<a
|
|
||||||
className="button button-secondary"
|
|
||||||
onClick={this.handleShowTemplate.bind(null, template)}
|
|
||||||
>
|
|
||||||
{MailPoet.I18n.t('preview')}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
className="button button-primary"
|
|
||||||
data-automation-id={'select_template_' + index}
|
|
||||||
onClick={this.handleSelectTemplate.bind(null, template)}
|
|
||||||
>
|
|
||||||
{MailPoet.I18n.t('select')}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{ (template.readonly === '1') ? false : deleteLink }
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const boxClasses = classNames(
|
|
||||||
'mailpoet_boxes',
|
|
||||||
'clearfix',
|
|
||||||
{ mailpoet_boxes_loading: this.state.loading }
|
|
||||||
);
|
);
|
||||||
|
}
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1>{MailPoet.I18n.t('selectTemplateTitle')}</h1>
|
|
||||||
|
|
||||||
<Breadcrumb step="template" />
|
|
||||||
|
|
||||||
<ul className={boxClasses}>
|
|
||||||
{ templates }
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ImportTemplate onImport={this.handleTemplateImport} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
handleSelectTemplate: function (template) {
|
||||||
|
let body = template.body;
|
||||||
|
|
||||||
|
// Stringify to enable transmission of primitive non-string value types
|
||||||
|
if (!_.isUndefined(body)) {
|
||||||
|
body = JSON.stringify(body);
|
||||||
|
}
|
||||||
|
|
||||||
|
MailPoet.trackEvent('Emails > Template selected', {
|
||||||
|
'MailPoet Free version': window.mailpoet_version,
|
||||||
|
'Email name': template.name,
|
||||||
|
});
|
||||||
|
|
||||||
|
MailPoet.Ajax.post({
|
||||||
|
api_version: window.mailpoet_api_version,
|
||||||
|
endpoint: 'newsletters',
|
||||||
|
action: 'save',
|
||||||
|
data: {
|
||||||
|
id: this.props.params.id,
|
||||||
|
body: body,
|
||||||
|
},
|
||||||
|
}).done((response) => {
|
||||||
|
// TODO: Move this URL elsewhere
|
||||||
|
window.location = 'admin.php?page=mailpoet-newsletter-editor&id=' + response.data.id;
|
||||||
|
}).fail((response) => {
|
||||||
|
if (response.errors.length > 0) {
|
||||||
|
MailPoet.Notice.error(
|
||||||
|
response.errors.map((error) => { return error.message; }),
|
||||||
|
{ scroll: true }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleDeleteTemplate: function (template) {
|
||||||
|
this.setState({ loading: true });
|
||||||
|
const onConfirm = () => {
|
||||||
|
MailPoet.Ajax.post({
|
||||||
|
api_version: window.mailpoet_api_version,
|
||||||
|
endpoint: 'newsletterTemplates',
|
||||||
|
action: 'delete',
|
||||||
|
data: {
|
||||||
|
id: template.id,
|
||||||
|
},
|
||||||
|
}).done(() => {
|
||||||
|
this.getTemplates();
|
||||||
|
}).fail((response) => {
|
||||||
|
if (response.errors.length > 0) {
|
||||||
|
MailPoet.Notice.error(
|
||||||
|
response.errors.map((error) => { return error.message; }),
|
||||||
|
{ scroll: true }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const onCancel = () => {
|
||||||
|
this.setState({ loading: false });
|
||||||
|
};
|
||||||
|
confirmAlert({
|
||||||
|
title: MailPoet.I18n.t('confirmTitle'),
|
||||||
|
message: MailPoet.I18n.t('confirmTemplateDeletion').replace('%$1s', template.name),
|
||||||
|
confirmLabel: MailPoet.I18n.t('confirmLabel'),
|
||||||
|
cancelLabel: MailPoet.I18n.t('cancelLabel'),
|
||||||
|
onConfirm: onConfirm,
|
||||||
|
onCancel: onCancel,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleShowTemplate: function (template) {
|
||||||
|
MailPoet.Modal.popup({
|
||||||
|
title: template.name,
|
||||||
|
template: '<div class="mailpoet_boxes_preview" style="background-color: {{ body.globalStyles.body.backgroundColor }}"><img src="{{ thumbnail }}" /></div>',
|
||||||
|
data: template,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleTemplateImport: function () {
|
||||||
|
this.getTemplates();
|
||||||
|
},
|
||||||
|
render: function () {
|
||||||
|
const templates = this.state.templates.map((template, index) => {
|
||||||
|
const deleteLink = (
|
||||||
|
<div className="mailpoet_delete">
|
||||||
|
<a
|
||||||
|
href="javascript:;"
|
||||||
|
onClick={this.handleDeleteTemplate.bind(null, template)}
|
||||||
|
>
|
||||||
|
{MailPoet.I18n.t('delete')}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
let thumbnail = '';
|
||||||
|
|
||||||
|
if (typeof template.thumbnail === 'string'
|
||||||
|
&& template.thumbnail.length > 0) {
|
||||||
|
thumbnail = (
|
||||||
|
<a href="javascript:;" onClick={this.handleShowTemplate.bind(null, template)}>
|
||||||
|
<img src={template.thumbnail} />
|
||||||
|
<div className="mailpoet_overlay"></div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li key={'template-' + index}>
|
||||||
|
<div className="mailpoet_thumbnail">
|
||||||
|
{ thumbnail }
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mailpoet_description">
|
||||||
|
<h3>{ template.name }</h3>
|
||||||
|
<p>{ template.description }</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mailpoet_actions">
|
||||||
|
<a
|
||||||
|
className="button button-secondary"
|
||||||
|
onClick={this.handleShowTemplate.bind(null, template)}
|
||||||
|
>
|
||||||
|
{MailPoet.I18n.t('preview')}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
className="button button-primary"
|
||||||
|
data-automation-id={'select_template_' + index}
|
||||||
|
onClick={this.handleSelectTemplate.bind(null, template)}
|
||||||
|
>
|
||||||
|
{MailPoet.I18n.t('select')}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{ (template.readonly === '1') ? false : deleteLink }
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const boxClasses = classNames(
|
||||||
|
'mailpoet_boxes',
|
||||||
|
'clearfix',
|
||||||
|
{ mailpoet_boxes_loading: this.state.loading }
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>{MailPoet.I18n.t('selectTemplateTitle')}</h1>
|
||||||
|
|
||||||
|
<Breadcrumb step="template" />
|
||||||
|
|
||||||
|
<ul className={boxClasses}>
|
||||||
|
{ templates }
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ImportTemplate onImport={this.handleTemplateImport} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
export default NewsletterTemplates;
|
export default NewsletterTemplates;
|
||||||
|
|||||||
Reference in New Issue
Block a user