Add validation for WooCommerce schedule forms

[MAILPOET-3848]

assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx

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

assets/js/src/newsletters/automatic_emails/events_conditions.jsx

@@ -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,9 +75,18 @@ 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() {
+  handleNextStep(e) {
+    e.preventDefault();
+    if (!this.isValid()) {
+      this.validate();
+    } else {
       const { history } = this.props;
       const {
         eventSlug, afterTimeType, afterTimeNumber, event, segment, eventOptionValue,
@@ -121,6 +131,7 @@ class EventsConditions extends React.Component {
         }
       });
     }
+  }
 
   getEvent(eventSlug) {
     return this.emailEvents[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,6 +250,7 @@ class EventsConditions extends React.Component {
         <ListingHeadingStepsRoute emailType="woocommerce" automationId="woocommerce_email_creation_heading" />
 
         <Grid.Column align="center" className="mailpoet-schedule-email">
+          <form id="newsletter_scheduling">
             <Heading level={4}>{this.displayHeader()}</Heading>
             <div>{this.displayEventOptions()}</div>
             <div>{this.displaySegments()}</div>
@@ -228,10 +259,11 @@ class EventsConditions extends React.Component {
             <Button
               isFullWidth
               onClick={this.handleNextStep}
-            type="button"
+              type="submit"
             >
               {MailPoet.I18n.t('next')}
             </Button>
+          </form>
         </Grid.Column>
 
         {this.displayEventTip()}