From dfd4fc555186b270dbb08b8d6b4f1f93c98eeda9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Lys=C3=BD?= <jan.lysy@automattic.com>
Date: Wed, 13 Oct 2021 12:56:26 +0200
Subject: [PATCH] Add validation for WooCommerce schedule forms

[MAILPOET-3848]
---
 .../events/event_scheduling.jsx               |   3 +
 .../automatic_emails/events_conditions.jsx    | 138 +++++++++++-------
 2 files changed, 88 insertions(+), 53 deletions(-)

diff --git a/assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx b/assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx
index 9ab9e08e75..f34a515635 100644
--- a/assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx
+++ b/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'),
diff --git a/assets/js/src/newsletters/automatic_emails/events_conditions.jsx b/assets/js/src/newsletters/automatic_emails/events_conditions.jsx
index b0bb7e5279..c372174309 100644
--- a/assets/js/src/newsletters/automatic_emails/events_conditions.jsx
+++ b/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,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()}