Sending Progress

- improved progress bar styles (with completed status)
- add pause/resume buttons
- fixed method case in settings.mta for MailPoet & SMTP Providers
- fixed parsley dependency
- added validation on from name & address on step 3

assets/js/src/form/fields/text.jsx

@@ -20,7 +20,9 @@ function(
           value={ this.props.item[this.props.field.name] }
           placeholder={ this.props.field.placeholder }
           defaultValue={ this.props.field.defaultValue }
-          onChange={ this.props.onValueChange } />
+          onChange={ this.props.onValueChange }
+          {...this.props.field.validation}
+        />
       );
     }
   });

assets/js/src/listing/listing.jsx

@@ -397,6 +397,12 @@ define(
         if(this.isMounted()) {
           const params = this.props.params || {}
           this.initWithParams(params)
+
+          if(this.props.auto_refresh) {
+            jQuery(document).on('heartbeat-tick.mailpoet', function(e, data) {
+              this.getItems();
+            }.bind(this));
+          }
         }
       },
       componentWillReceiveProps: function(nextProps) {

assets/js/src/newsletters/list.jsx

@@ -123,23 +123,89 @@ define(
     ];
 
     var NewsletterList = React.createClass({
+      pauseSending: function(item) {
+        MailPoet.Ajax.post({
+          endpoint: 'sendingQueue',
+          action: 'pause',
+          data: item.id
+        }).done(function() {
+          jQuery('#resume_'+item.id).show();
+          jQuery('#pause_'+item.id).hide();
+        });
+      },
+      resumeSending: function(item) {
+        MailPoet.Ajax.post({
+          endpoint: 'sendingQueue',
+          action: 'resume',
+          data: item.id
+        }).done(function() {
+          jQuery('#pause_'+item.id).show();
+          jQuery('#resume_'+item.id).hide();
+        });
+      },
       renderStatus: function(item) {
         if(item.queue === null) {
           return (
             <span>Not sent yet.</span>
           );
         } else {
+          var progressClasses = classNames(
+            'mailpoet_progress',
+            { 'mailpoet_progress_complete': item.queue.status === 'completed'}
+          );
+
           // calculate percentage done
           var percentage = Math.round(
             (item.queue.count_processed * 100) / (item.queue.count_total)
           );
 
+          var label = false;
+
+          if(item.queue.status === 'completed') {
+            label = (
+              <span>
+                Sent to {
+                  item.queue.count_processed - item.queue.count_failed
+                } out of { item.queue.count_total }.
+              </span>
+            );
+          } else {
+            label = (
+              <span>
+                { item.queue.count_processed } / { item.queue.count_total }
+                &nbsp;&nbsp;
+                <a
+                  id={ 'resume_'+item.id }
+                  className="button"
+                  style={{ display: (item.queue.status === 'paused') ? 'inline-block': 'none' }}
+                  href="javascript:;"
+                  onClick={ this.resumeSending.bind(null, item) }
+                >Resume</a>
+                <a
+                  id={ 'pause_'+item.id }
+                  className="button mailpoet_pause"
+                  style={{ display: (item.queue.status === null) ? 'inline-block': 'none' }}
+                  href="javascript:;"
+                  onClick={ this.pauseSending.bind(null, item) }
+                >Pause</a>
+              </span>
+            );
+          }
+
           return (
             <div>
-              <div className="mailpoet_progress blue">
-                  <span style={ { width: percentage + "%"} }></span>
+              <div className={ progressClasses }>
+                  <span
+                    className="mailpoet_progress_bar"
+                    style={ { width: percentage + "%"} }
+                  ></span>
+                  <span className="mailpoet_progress_label">
+                    { percentage + "%" }
+                  </span>
               </div>
-              { item.queue.count_processed } / { item.queue.count_total }
+              <p style={{ textAlign:'center' }}>
+                { label }
+              </p>
             </div>
           );
         }
@@ -194,7 +260,8 @@ define(
               columns={columns}
               bulk_actions={ bulk_actions }
               item_actions={ item_actions }
-              messages={ messages } />
+              messages={ messages }
+              auto_refresh={ true } />
           </div>
         );
       }

assets/js/src/newsletters/send.jsx

@@ -48,14 +48,21 @@ define(
             name: 'from_name',
             type: 'text',
             placeholder: 'John Doe',
-            defaultValue: settings.from_name
+            defaultValue: (settings.sender !== undefined) ? settings.sender.name : '',
+            validation: {
+              'data-parsley-required': true
+            }
           },
           {
             name: 'from_email',
             type: 'text',
             placeholder: 'john.doe@email.com',
-            defaultValue: settings.from_address
-          },
+            defaultValue: (settings.sender !== undefined) ? settings.sender.address : '',
+            validation: {
+              'data-parsley-required': true,
+              'data-parsley-type': 'email'
+            }
+          }
         ]
       },
       {
@@ -93,33 +100,40 @@ define(
         Router.History
       ],
       handleSend: function() {
-        MailPoet.Ajax.post({
-          endpoint: 'sendingQueue',
-          action: 'addQueue',
-          data: {
-            newsletter_id: this.props.params.id,
-            segments: jQuery('#mailpoet_segments').val()
-          }
-        }).done(function(response) {
-          if(response === true) {
-            //this.history.pushState(null, '/');
+        if(jQuery('#mailpoet_newsletter').parsley().validate() === true) {
+          MailPoet.Ajax.post({
+            endpoint: 'sendingQueue',
+            action: 'add',
+            data: {
+              newsletter_id: this.props.params.id,
+              segments: jQuery('#mailpoet_segments').val()
+            }
+          }).done(function(response) {
+            if(response.result === true) {
+              this.history.pushState(null, '/');
 
-            MailPoet.Notice.success(
-              'The newsletter has been sent!'
-            );
-          } else {
-            if(response.errors) {
-              MailPoet.Notice.error(
-                response.errors.join("<br />")
+              MailPoet.Notice.success(
+                'The newsletter is being sent...'
               );
             } else {
-              MailPoet.Notice.error(
-                'An error occurred while trying to send. '+
-                '<a href="?page=mailpoet-settings">Check your settings.</a>'
-              );
+              if(response.errors) {
+                MailPoet.Notice.error(
+                  response.errors.join("<br />")
+                );
+              } else {
+                MailPoet.Notice.error(
+                  'An error occurred while trying to send. '+
+                  '<a href="?page=mailpoet-settings">Check your settings.</a>'
+                );
+              }
             }
-          }
-        }.bind(this));
+          }.bind(this));
+        }
+      },
+      componentDidMount: function() {
+        if(this.isMounted()) {
+          jQuery('#mailpoet_newsletter').parsley();
+        }
       },
       render: function() {
         return (

assets/js/src/settings/tabs.js

@@ -36,7 +36,7 @@ define(
         } else {
           // hide DKIM option when using MailPoet's API
           jQuery('#mailpoet_mta_dkim')[
-            (method === 'mailpoet')
+            (method === 'MailPoet')
             ? 'hide'
             : 'show'
           ]();