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

Show different fields based on newsletter type, fix saving across

Browse Source 
multiple endpoints
This commit is contained in:
Tautvidas Sipavičius
2016-04-06 17:57:56 +03:00
parent 104620a40a
commit ad5441487b
7 changed files with 417 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/js/src/form/fields/field.jsx
View File

@@ -63,7 +63,6 @@ function(
break;
case 'reactComponent':
console.log(data);
field = (<data.field.component {...data} />);
break;
}

19
assets/js/src/form/form.jsx
View File

@@ -24,6 +24,12 @@ define(
item: {}
};
},
getValues: function() {
return this.props.item ? this.props.item : this.state.item;
},
getErrors: function() {
return this.props.errors ? this.props.errors : this.state.errors;
},
componentDidMount: function() {
if(this.props.params.id !== undefined) {
if(this.isMounted()) {
@@ -37,10 +43,13 @@ define(
loading: false,
item: {}
});
if (props.item === undefined) {
this.refs.form.reset();
}
} else {
this.loadItem(props.params.id);
}
console.log('Receiving props', arguments);
},
loadItem: function(id) {
this.setState({ loading: true });
@@ -123,6 +132,9 @@ define(
}.bind(this));
},
handleValueChange: function(e) {
if (this.props.onChange) {
return this.props.onChange(e);
} else {
var item = this.state.item,
field = e.target.name;
@@ -132,10 +144,11 @@ define(
item: item
});
return true;
}
},
render: function() {
if(this.state.errors !== undefined) {
var errors = this.state.errors.map(function(error, index) {
if(this.getErrors() !== undefined) {
var errors = this.getErrors().map(function(error, index) {
return (
<p key={ 'error-'+index } className="mailpoet_error">
{ error }
@@ -153,7 +166,7 @@ define(
return (
<FormField
field={ field }
item={ this.state.item }
item={ this.getValues() }
onValueChange={ this.handleValueChange }
key={ 'field-'+i } />
);

218
assets/js/src/newsletters/send.jsx
View File

@@ -2,98 +2,26 @@ define(
[
'react',
'react-router',
'underscore',
'mailpoet',
'form/form.jsx',
'form/fields/selection.jsx',
'newsletters/send/standard.jsx',
'newsletters/send/notification.jsx',
'newsletters/send/welcome.jsx',
'newsletters/breadcrumb.jsx'
],
function(
React,
Router,
_,
MailPoet,
Form,
Selection,
StandardNewsletterFields,
NotificationNewsletterFields,
WelcomeNewsletterFields,
Breadcrumb
) {
var settings = window.mailpoet_settings || {};
var fields = [
{
name: 'subject',
label: MailPoet.I18n.t('subjectLine'),
tip: MailPoet.I18n.t('subjectLineTip'),
type: 'text',
validation: {
'data-parsley-required': true,
'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError')
}
},
{
name: 'segments',
label: MailPoet.I18n.t('segments'),
tip: MailPoet.I18n.t('segmentsTip'),
type: 'selection',
placeholder: MailPoet.I18n.t('selectSegmentPlaceholder'),
id: "mailpoet_segments",
endpoint: "segments",
multiple: true,
filter: function(segment) {
return !!(!segment.deleted_at);
},
validation: {
'data-parsley-required': true,
'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError')
}
},
{
name: 'sender',
label: MailPoet.I18n.t('sender'),
tip: MailPoet.I18n.t('senderTip'),
fields: [
{
name: 'sender_name',
type: 'text',
placeholder: MailPoet.I18n.t('senderNamePlaceholder'),
defaultValue: (settings.sender !== undefined) ? settings.sender.name : '',
validation: {
'data-parsley-required': true
}
},
{
name: 'sender_address',
type: 'text',
placeholder: MailPoet.I18n.t('senderAddressPlaceholder'),
defaultValue: (settings.sender !== undefined) ? settings.sender.address : '',
validation: {
'data-parsley-required': true,
'data-parsley-type': 'email'
}
}
]
},
{
name: 'reply-to',
label: MailPoet.I18n.t('replyTo'),
tip: MailPoet.I18n.t('replyToTip'),
inline: true,
fields: [
{
name: 'reply_to_name',
type: 'text',
placeholder: MailPoet.I18n.t('replyToNamePlaceholder'),
defaultValue: (settings.reply_to !== undefined) ? settings.reply_to.name : '',
},
{
name: 'reply_to_address',
type: 'text',
placeholder: MailPoet.I18n.t('replyToAddressPlaceholder'),
defaultValue: (settings.reply_to !== undefined) ? settings.reply_to.address : ''
},
]
}
];
var messages = {
onUpdate: function() {
MailPoet.Notice.success(MailPoet.I18n.t('newsletterUpdated'));
@@ -107,32 +35,82 @@ define(
mixins: [
Router.History
],
getInitialState: function() {
return {
fields: [],
errors: [],
item: {},
loading: false,
};
},
componentDidMount: function() {
if(this.isMounted()) {
this.loadItem(this.props.params.id);
}
jQuery('#mailpoet_newsletter').parsley();
},
componentWillReceiveProps: function(props) {
this.loadItem(props.params.id);
},
loadItem: function(id) {
this.setState({ loading: true });
MailPoet.Ajax.post({
endpoint: 'newsletters',
action: 'get',
data: id
}).done(function(response) {
if(response === false) {
this.setState({
loading: false,
item: {},
}, function() {
this.history.pushState(null, '/new');
}.bind(this));
} else {
this.setState({
loading: false,
item: response,
fields: this.getFieldsByNewsletter(response),
});
}
}.bind(this));
},
getFieldsByNewsletter: function(newsletter) {
switch(newsletter.type) {
case 'notification': return NotificationNewsletterFields;
case 'welcome': return WelcomeNewsletterFields;
default: return StandardNewsletterFields;
}
},
isValid: function() {
return jQuery('#mailpoet_newsletter').parsley().isValid();
},
isAutomatedNewsletter: function() {
return this.state.item.type !== 'standard';
},
handleSend: function() {
if(!this.isValid()) {
jQuery('#mailpoet_newsletter').parsley().validate();
} else {
MailPoet.Ajax.post({
endpoint: 'newsletters',
action: 'save',
data: this.state.item,
}).then((response) => {
if (response.result === true) {
return MailPoet.Ajax.post({
endpoint: 'sendingQueue',
action: 'add',
data: {
data: _.extend({}, this.state.item, {
newsletter_id: this.props.params.id,
segments: jQuery('#mailpoet_segments').val(),
sender: {
'name': jQuery('#mailpoet_newsletter [name="sender_name"]').val(),
'address': jQuery('#mailpoet_newsletter [name="sender_address"]').val()
},
reply_to: {
'name': jQuery('#mailpoet_newsletter [name="reply_to_name"]').val(),
'address': jQuery('#mailpoet_newsletter [name="reply_to_address"]').val()
}),
});
} else {
return response;
}
}
}).done(function(response) {
}).done((response) => {
if(response.result === true) {
this.history.pushState(null, '/');
MailPoet.Notice.success(
@@ -147,10 +125,50 @@ define(
);
}
}
}.bind(this));
});
}
return false;
},
handleSave: function(e) {
e.preventDefault();
MailPoet.Ajax.post({
endpoint: 'newsletters',
action: 'save',
data: this.state.item,
}).done((response) => {
this.setState({ loading: false });
if(response.result === true) {
this.history.pushState(null, '/');
messages.onUpdate();
} else {
if(response.errors.length > 0) {
this.setState({ errors: response.errors });
}
}
});
},
handleFormChange: function(e) {
console.log('Form change', e);
var item = this.state.item,
field = e.target.name;
item[field] = e.target.value;
console.log('State before change', this.state);
this.setState({
item: item
});
console.log('State after change', this.state);
return true;
},
handleFormSubmit: function() {
console.log('Handling form submit', arguments);
},
getParams: function() {
return {};
},
render: function() {
return (
<div>
@@ -160,18 +178,22 @@ define(
<Form
id="mailpoet_newsletter"
endpoint="newsletters"
fields={ fields }
params={ this.props.params }
messages={ messages }
isValid={ this.isValid }
fields={ this.state.fields }
item={ this.state.item }
params={ this.getParams() }
errors= { this.state.errors }
onChange={this.handleFormChange}
onSubmit={this.handleSave}
>
<p className="submit">
<input
className="button button-primary"
type="button"
onClick={ this.handleSend }
value={MailPoet.I18n.t('send')} />
value={
this.isAutomatedNewsletter()
? MailPoet.I18n.t('activate')
: MailPoet.I18n.t('send')} />
&nbsp;
<input
className="button button-secondary"

97
assets/js/src/newsletters/send/notification.jsx Normal file
View File

@@ -0,0 +1,97 @@
define(
[
'mailpoet',
'newsletters/types/notification/scheduling.jsx'
],
function(
MailPoet,
Scheduling
) {
var settings = window.mailpoet_settings || {};
var fields = [
{
name: 'subject',
label: MailPoet.I18n.t('subjectLine'),
tip: MailPoet.I18n.t('postNotificationSubjectLineTip'),
type: 'text',
validation: {
'data-parsley-required': true,
'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError')
}
},
{
name: 'options',
label: MailPoet.I18n.t('selectPeriodicity'),
type: 'reactComponent',
component: Scheduling,
},
{
name: 'segments',
label: MailPoet.I18n.t('segments'),
tip: MailPoet.I18n.t('segmentsTip'),
type: 'selection',
placeholder: MailPoet.I18n.t('selectSegmentPlaceholder'),
id: "mailpoet_segments",
endpoint: "segments",
multiple: true,
filter: function(segment) {
return !!(!segment.deleted_at);
},
validation: {
'data-parsley-required': true,
'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError')
}
},
{
name: 'sender',
label: MailPoet.I18n.t('sender'),
tip: MailPoet.I18n.t('senderTip'),
fields: [
{
name: 'sender_name',
type: 'text',
placeholder: MailPoet.I18n.t('senderNamePlaceholder'),
defaultValue: (settings.sender !== undefined) ? settings.sender.name : '',
validation: {
'data-parsley-required': true
}
},
{
name: 'sender_address',
type: 'text',
placeholder: MailPoet.I18n.t('senderAddressPlaceholder'),
defaultValue: (settings.sender !== undefined) ? settings.sender.address : '',
validation: {
'data-parsley-required': true,
'data-parsley-type': 'email'
}
}
]
},
{
name: 'reply-to',
label: MailPoet.I18n.t('replyTo'),
tip: MailPoet.I18n.t('replyToTip'),
inline: true,
fields: [
{
name: 'reply_to_name',
type: 'text',
placeholder: MailPoet.I18n.t('replyToNamePlaceholder'),
defaultValue: (settings.reply_to !== undefined) ? settings.reply_to.name : '',
},
{
name: 'reply_to_address',
type: 'text',
placeholder: MailPoet.I18n.t('replyToAddressPlaceholder'),
defaultValue: (settings.reply_to !== undefined) ? settings.reply_to.address : ''
},
]
}
];
return fields;
}
);

89
assets/js/src/newsletters/send/standard.jsx Normal file
View File

@@ -0,0 +1,89 @@
define(
[
'mailpoet'
],
function(
MailPoet
) {
var settings = window.mailpoet_settings || {};
var fields = [
{
name: 'subject',
label: MailPoet.I18n.t('subjectLine'),
tip: MailPoet.I18n.t('subjectLineTip'),
type: 'text',
validation: {
'data-parsley-required': true,
'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError')
}
},
{
name: 'segments',
label: MailPoet.I18n.t('segments'),
tip: MailPoet.I18n.t('segmentsTip'),
type: 'selection',
placeholder: MailPoet.I18n.t('selectSegmentPlaceholder'),
id: "mailpoet_segments",
endpoint: "segments",
multiple: true,
filter: function(segment) {
return !!(!segment.deleted_at);
},
validation: {
'data-parsley-required': true,
'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError')
}
},
{
name: 'sender',
label: MailPoet.I18n.t('sender'),
tip: MailPoet.I18n.t('senderTip'),
fields: [
{
name: 'sender_name',
type: 'text',
placeholder: MailPoet.I18n.t('senderNamePlaceholder'),
defaultValue: (settings.sender !== undefined) ? settings.sender.name : '',
validation: {
'data-parsley-required': true
}
},
{
name: 'sender_address',
type: 'text',
placeholder: MailPoet.I18n.t('senderAddressPlaceholder'),
defaultValue: (settings.sender !== undefined) ? settings.sender.address : '',
validation: {
'data-parsley-required': true,
'data-parsley-type': 'email'
}
}
]
},
{
name: 'reply-to',
label: MailPoet.I18n.t('replyTo'),
tip: MailPoet.I18n.t('replyToTip'),
inline: true,
fields: [
{
name: 'reply_to_name',
type: 'text',
placeholder: MailPoet.I18n.t('replyToNamePlaceholder'),
defaultValue: (settings.reply_to !== undefined) ? settings.reply_to.name : '',
},
{
name: 'reply_to_address',
type: 'text',
placeholder: MailPoet.I18n.t('replyToAddressPlaceholder'),
defaultValue: (settings.reply_to !== undefined) ? settings.reply_to.address : ''
},
]
}
];
return fields;
}
);

81
assets/js/src/newsletters/send/welcome.jsx Normal file
View File

@@ -0,0 +1,81 @@
define(
[
'mailpoet',
'newsletters/types/welcome/scheduling.jsx'
],
function(
MailPoet,
Scheduling
) {
var settings = window.mailpoet_settings || {};
var fields = [
{
name: 'subject',
label: MailPoet.I18n.t('subjectLine'),
tip: MailPoet.I18n.t('subjectLineTip'),
type: 'text',
validation: {
'data-parsley-required': true,
'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError')
}
},
{
name: 'options',
label: MailPoet.I18n.t('sendWelcomeEmailWhen'),
type: 'reactComponent',
component: Scheduling,
},
{
name: 'sender',
label: MailPoet.I18n.t('sender'),
tip: MailPoet.I18n.t('senderTip'),
fields: [
{
name: 'sender_name',
type: 'text',
placeholder: MailPoet.I18n.t('senderNamePlaceholder'),
defaultValue: (settings.sender !== undefined) ? settings.sender.name : '',
validation: {
'data-parsley-required': true
}
},
{
name: 'sender_address',
type: 'text',
placeholder: MailPoet.I18n.t('senderAddressPlaceholder'),
defaultValue: (settings.sender !== undefined) ? settings.sender.address : '',
validation: {
'data-parsley-required': true,
'data-parsley-type': 'email'
}
}
]
},
{
name: 'reply-to',
label: MailPoet.I18n.t('replyTo'),
tip: MailPoet.I18n.t('replyToTip'),
inline: true,
fields: [
{
name: 'reply_to_name',
type: 'text',
placeholder: MailPoet.I18n.t('replyToNamePlaceholder'),
defaultValue: (settings.reply_to !== undefined) ? settings.reply_to.name : '',
},
{
name: 'reply_to_address',
type: 'text',
placeholder: MailPoet.I18n.t('replyToAddressPlaceholder'),
defaultValue: (settings.reply_to !== undefined) ? settings.reply_to.address : ''
},
]
}
];
return fields;
}
);

3
views/newsletters.html
View File

@@ -87,6 +87,9 @@
'postNotificationsNewsletterTypeDescription': __('Automatically send posts immediately, daily, weekly or monthly. Filter by categories, if you like.'),
'selectPeriodicity': __('Select a periodicity'),
'periodicity': __('Periodicity'),
'postNotificationSubjectLineTip': __("Insert [newsletter:total] to show number of posts, [newsletter:post_title] to show the latest post's title & [newsletter:number] to display the issue number."),
'activate': __('Activate'),
'sendWelcomeEmailWhen': __('Send welcome email when...'),
'daily': __('Once a day at...'),
'weekly': __('Weekly on...'),