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

Add validation for WooCommerce schedule forms

Browse Source 
[MAILPOET-3848]
This commit is contained in:
Jan Lysý
2021-10-13 12:56:26 +02:00
committed by Veljko V
parent 315a1856a4
commit dfd4fc5551
2 changed files with 88 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx
View File

@@ -104,6 +104,9 @@ class EventScheduling extends React.Component {
name: 'scheduling_time_duration',
defaultValue: afterTimeNumber ? afterTimeNumber.toString() : '',
size: afterTimeNumberSize,
validation: {
'data-parsley-required': true,
},
},
item: {},
onValueChange: _.partial(this.handleChange, _, 'afterTimeNumber'),

138
assets/js/src/newsletters/automatic_emails/events_conditions.jsx
View File

@@ -11,6 +11,7 @@ import MailPoet from 'mailpoet';
import _ from 'underscore';
import PropTypes from 'prop-types';
import { GlobalContext } from 'context/index.jsx';
import jQuery from 'jquery';
const defaultAfterTimeType = 'immediate';
const defaultAfterTimeNumber = 1;
@@ -74,52 +75,62 @@ class EventsConditions extends React.Component {
}
this.setState(newState);
// we need to reset validation due to changes in the afterTimeType field
this.resetValidationErrors();
if (this.isValid()) {
this.validate();
}
}
handleNextStep() {
const { history } = this.props;
const {
eventSlug, afterTimeType, afterTimeNumber, event, segment, eventOptionValue,
} = this.state;
const options = {
group: this.email.slug,
event: eventSlug,
afterTimeType,
};
handleNextStep(e) {
e.preventDefault();
if (!this.isValid()) {
this.validate();
} else {
const { history } = this.props;
const {
eventSlug, afterTimeType, afterTimeNumber, event, segment, eventOptionValue,
} = this.state;
const options = {
group: this.email.slug,
event: eventSlug,
afterTimeType,
};
if (afterTimeNumber) options.afterTimeNumber = afterTimeNumber;
options.sendTo = (event.sendToLists) ? 'segment' : 'user';
if (segment) options.segment = segment;
if (eventOptionValue) {
options.meta = JSON.stringify({ option: eventOptionValue });
}
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'newsletters',
action: 'create',
data: {
type: 'automatic',
subject: MailPoet.I18n.t('draftNewsletterTitle'),
options,
},
}).done((response) => {
MailPoet.trackEvent('Emails > New Automatic Email Created', {
'MailPoet Premium version': window.mailpoet_premium_version,
'MailPoet Free version': window.mailpoet_version,
'Event type': options.event,
'Schedule type': options.afterTimeType,
'Schedule value': options.afterTimeNumber,
});
history.push(`/template/${response.data.id}`);
}).fail((response) => {
if (response.errors.length > 0) {
this.context.notices.error(
response.errors.map((error) => <p key={error.message}>{error.message}</p>),
{ scroll: true }
);
if (afterTimeNumber) options.afterTimeNumber = afterTimeNumber;
options.sendTo = (event.sendToLists) ? 'segment' : 'user';
if (segment) options.segment = segment;
if (eventOptionValue) {
options.meta = JSON.stringify({ option: eventOptionValue });
}
});
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'newsletters',
action: 'create',
data: {
type: 'automatic',
subject: MailPoet.I18n.t('draftNewsletterTitle'),
options,
},
}).done((response) => {
MailPoet.trackEvent('Emails > New Automatic Email Created', {
'MailPoet Premium version': window.mailpoet_premium_version,
'MailPoet Free version': window.mailpoet_version,
'Event type': options.event,
'Schedule type': options.afterTimeType,
'Schedule value': options.afterTimeNumber,
});
history.push(`/template/${response.data.id}`);
}).fail((response) => {
if (response.errors.length > 0) {
this.context.notices.error(
response.errors.map((error) => <p key={error.message}>{error.message}</p>),
{ scroll: true }
);
}
});
}
}
getEvent(eventSlug) {
@@ -130,6 +141,25 @@ class EventsConditions extends React.Component {
return (_.isArray(this.segments) && this.segments[0].id) ? this.segments[0].id : null;
}
isValid = () => {
if (jQuery('#newsletter_scheduling').parsley()) {
return jQuery('#newsletter_scheduling').parsley().isValid();
}
return true;
}
validate = () => {
if (jQuery('#newsletter_scheduling').parsley()) {
jQuery('#newsletter_scheduling').parsley().validate();
}
}
resetValidationErrors = () => {
if (jQuery('#newsletter_scheduling').parsley()) {
jQuery('#newsletter_scheduling').parsley().reset();
}
};
displayHeader() {
const { event } = this.state;
return event.title;
@@ -220,18 +250,20 @@ class EventsConditions extends React.Component {
<ListingHeadingStepsRoute emailType="woocommerce" automationId="woocommerce_email_creation_heading" />
<Grid.Column align="center" className="mailpoet-schedule-email">
<Heading level={4}>{this.displayHeader()}</Heading>
<div>{this.displayEventOptions()}</div>
<div>{this.displaySegments()}</div>
<div>{this.displayScheduling()}</div>
<form id="newsletter_scheduling">
<Heading level={4}>{this.displayHeader()}</Heading>
<div>{this.displayEventOptions()}</div>
<div>{this.displaySegments()}</div>
<div>{this.displayScheduling()}</div>
<Button
isFullWidth
onClick={this.handleNextStep}
type="button"
>
{MailPoet.I18n.t('next')}
</Button>
<Button
isFullWidth
onClick={this.handleNextStep}
type="submit"
>
{MailPoet.I18n.t('next')}
</Button>
</form>
</Grid.Column>
{this.displayEventTip()}