- Add sorting of segment names in Welcome newsletter segment selector;

- Add an option to FormFieldSelect to allow sorting options;
- Change "Send" button label for scheduled newsletters;
- Disable "Send" button for sending/already sent newsletters.

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import _ from 'underscore'
 
 const FormFieldSelect = React.createClass({
   render() {
@@ -8,6 +9,7 @@ const FormFieldSelect = React.createClass({
 
     let filter = false;
     let placeholder = false;
+    let sortBy = false;
 
     if (this.props.field.placeholder !== undefined) {
       placeholder = (
@@ -19,7 +21,28 @@ const FormFieldSelect = React.createClass({
       filter = this.props.field.filter;
     }
 
-    const options = Object.keys(this.props.field.values).map(
+    if (_.isFunction(this.props.field.sortBy)) {
+      sortBy = this.props.field.sortBy;
+    }
+
+    let keys;
+    if (sortBy) {
+      // Extract keys from sorted [key, value] select value pairs, sorted by
+      // provided sorting order.
+      keys =
+        _.map(
+          _.sortBy(
+            _.pairs(this.props.field.values),
+            (item) => sortBy(item[0], item[1])
+          ),
+          (item) => item[0]
+        );
+      console.log(JSON.stringify(this.props.field.values), keys);
+    } else {
+      keys = Object.keys(this.props.field.values)
+    }
+
+    const options = keys.map(
       (value, index) => {
 
         if (filter !== false && filter(this.props.item, value) === false) {
@@ -51,4 +74,4 @@ const FormFieldSelect = React.createClass({
   }
 });
 
-module.exports = FormFieldSelect;
+module.exports = FormFieldSelect;

assets/js/src/newsletters/send.jsx

@@ -34,15 +34,20 @@ define(
         };
       },
       getFieldsByNewsletter: function(newsletter) {
+        var type = this.getSubtype(newsletter);
+        return type.getFields(newsletter);
+      },
+      getSendButtonOptions: function() {
+        var type = this.getSubtype(this.state.item);
+        return type.getSendButtonOptions(this.state.item);
+      },
+      getSubtype: function(newsletter) {
         switch(newsletter.type) {
           case 'notification': return NotificationNewsletterFields;
           case 'welcome': return WelcomeNewsletterFields;
           default: return StandardNewsletterFields;
         }
       },
-      isAutomatedNewsletter: function() {
-        return this.state.item.type !== 'standard';
-      },
       isValid: function() {
         return jQuery('#mailpoet_newsletter').parsley().isValid();
       },
@@ -128,7 +133,7 @@ define(
           this.context.router.push(`/${ this.state.item.type || '' }`);
         });
       },
-      handleRedirectToEditor: function(e) {
+      handleRedirectToDesign: function(e) {
         e.preventDefault();
         var redirectTo = e.target.href;
 
@@ -188,10 +193,9 @@ define(
                   className="button button-primary"
                   type="button"
                   onClick={ this.handleSend }
-                  value={
-                    this.isAutomatedNewsletter()
-                    ? MailPoet.I18n.t('activate')
-                    : MailPoet.I18n.t('send')} />
+                  value={MailPoet.I18n.t('send')}
+                  {...this.getSendButtonOptions()}
+                  />
                  
                 <input
                   className="button button-secondary"
@@ -202,7 +206,7 @@ define(
                   href={
                     '?page=mailpoet-newsletter-editor&id='+this.props.params.id
                   }
-                  onClick={this.handleRedirectToEditor}>
+                  onClick={this.handleRedirectToDesign}>
                   {MailPoet.I18n.t('goBackToDesign')}
                 </a>.
               </p>

assets/js/src/newsletters/send/notification.jsx

@@ -95,6 +95,15 @@ define(
       }
     ];
 
-    return fields;
+    return {
+      getFields: function(newsletter) {
+        return fields;
+      },
+      getSendButtonOptions: function(newsletter) {
+        return {
+          value: MailPoet.I18n.t('activate')
+        };
+      },
+    };
   }
 );

assets/js/src/newsletters/send/standard.jsx

@@ -401,6 +401,29 @@ define(
       }
     ];
 
-    return fields;
+    return {
+      getFields: function(newsletter) {
+        return fields;
+      },
+      getSendButtonOptions: function(newsletter) {
+        newsletter = newsletter || {};
+
+        var isScheduled =
+            typeof newsletter.options === 'object'
+            && newsletter.options.isScheduled === '1',
+          options = {
+            value: isScheduled
+              ? MailPoet.I18n.t('schedule')
+              : MailPoet.I18n.t('send')
+          };
+
+        if (newsletter.status === 'sent'
+            || newsletter.status === 'sending') {
+          options['disabled'] = 'disabled';
+        }
+
+        return options;
+      },
+    };
   }
 );

assets/js/src/newsletters/send/welcome.jsx

@@ -71,7 +71,16 @@ define(
       }
     ];
 
-    return fields;
+    return {
+      getFields: function(newsletter) {
+        return fields;
+      },
+      getSendButtonOptions: function(newsletter) {
+        return {
+          value: MailPoet.I18n.t('activate')
+        };
+      },
+    };
   }
 );
 

assets/js/src/newsletters/types/welcome/scheduling.jsx

@@ -36,7 +36,8 @@ const availableSegmentValues = _.object(_.map(
 ));
 const segmentField = {
   name: 'segment',
-  values: availableSegmentValues
+  values: availableSegmentValues,
+  sortBy: (key, value) => value.toLowerCase()
 };
 
 const roleField = {