Send newsletter + Listing + Last Step

- fixed Selection React
- fixed bulk actions (side effect of muti selection)
- added actual sending of newsletter
- added Setting::getValue($key, $default) in order to get settings
- improved Bridge class to allow override of from/reply_to
- added jquery.serializeObject to ease the pain when posting form data

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

@@ -15,12 +15,14 @@ function(
       }
     },
     componentWillMount: function() {
-    this.loadCachedItems();
+      this.loadCachedItems();
     },
     componentDidMount: function() {
-      jQuery('#'+this.props.id).select2({
-        width: '25em'
-      });
+      if(this.props.select2) {
+        jQuery('#'+this.props.id).select2({
+          width: '25em'
+        });
+      }
     },
     loadCachedItems: function() {
       if(typeof(window['mailpoet_'+this.props.endpoint]) !== 'undefined') {
@@ -30,36 +32,6 @@ function(
         });
       }
     },
-    loadItems: function() {
-      this.setState({ loading: true });
-
-      MailPoet.Ajax.post({
-        endpoint: this.props.endpoint,
-        action: 'listing',
-        data: {
-          'offset': 0,
-          'limit': 100,
-          'search': '',
-          'sort_by': 'name',
-          'sort_order': 'asc'
-        }
-      })
-      .done(function(response) {
-        if(this.isMounted()) {
-          if(response === false) {
-            this.setState({
-              loading: false,
-              items: []
-            });
-          } else {
-            this.setState({
-              loading: false,
-              items: response.items
-            });
-          }
-        }
-      }.bind(this));
-    },
     handleChange: function() {
       this.setState({
         selected: jQuery('#'+this.props.id).val()
@@ -82,11 +54,9 @@ function(
       return (
         <select
           ref="selection"
-          id={ this.props.id }
-          value={ this.state.selected }
-          onChange={ this.handleChange }
+          id={ this.props.id || 'mailpoet_field_selection'}
           placeholder={ this.props.placeholder }
-          multiple
+          multiple={ this.props.multiple }
         >
           { options }
         </select>

assets/js/src/jquery.serialize_object.js

@@ -0,0 +1,107 @@
+define(
+  [
+    'jquery'
+  ],
+  function(
+    $
+  ) {
+    // Combination of jQuery.deparam and jQuery.serializeObject by Ben Alman.
+    /*!
+     * jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
+     * http://benalman.com/projects/jquery-bbq-plugin/
+     *
+     * Copyright (c) 2010 "Cowboy" Ben Alman
+     * Dual licensed under the MIT and GPL licenses.
+     * http://benalman.com/about/license/
+     */
+    /*!
+     * jQuery serializeObject - v0.2 - 1/20/2010
+     * http://benalman.com/projects/jquery-misc-plugins/
+     *
+     * Copyright (c) 2010 "Cowboy" Ben Alman
+     * Dual licensed under the MIT and GPL licenses.
+     * http://benalman.com/about/license/
+     */
+    $.fn.serializeObject = function(coerce) {
+      var obj = {},
+        coerce_types = { 'true': !0, 'false': !1, 'null': null };
+
+      // Iterate over all name=value pairs.
+      $.each( this.serializeArray(), function(j,v){
+        var key = v.name,
+          val = v.value,
+          cur = obj,
+          i = 0,
+
+          // If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it
+          // into its component parts.
+          keys = key.split( '][' ),
+          keys_last = keys.length - 1;
+
+        // If the first keys part contains [ and the last ends with ], then []
+        // are correctly balanced.
+        if ( /\[/.test( keys[0] ) && /\]$/.test( keys[ keys_last ] ) ) {
+          // Remove the trailing ] from the last keys part.
+          keys[ keys_last ] = keys[ keys_last ].replace( /\]$/, '' );
+
+          // Split first keys part into two parts on the [ and add them back onto
+          // the beginning of the keys array.
+          keys = keys.shift().split('[').concat( keys );
+
+          keys_last = keys.length - 1;
+        } else {
+          // Basic 'foo' style key.
+          keys_last = 0;
+        }
+
+        // Coerce values.
+        if ( coerce ) {
+          val = val && !isNaN(val)            ? +val              // number
+            : val === 'undefined'             ? undefined         // undefined
+            : coerce_types[val] !== undefined ? coerce_types[val] // true, false, null
+            : val;                                                // string
+        }
+
+        if ( keys_last ) {
+          // Complex key, build deep object structure based on a few rules:
+          // * The 'cur' pointer starts at the object top-level.
+          // * [] = array push (n is set to array length), [n] = array if n is
+          //   numeric, otherwise object.
+          // * If at the last keys part, set the value.
+          // * For each keys part, if the current level is undefined create an
+          //   object or array based on the type of the next keys part.
+          // * Move the 'cur' pointer to the next level.
+          // * Rinse & repeat.
+          for ( ; i <= keys_last; i++ ) {
+            key = keys[i] === '' ? cur.length : keys[i];
+            cur = cur[key] = i < keys_last
+              ? cur[key] || ( keys[i+1] && isNaN( keys[i+1] ) ? {} : [] )
+              : val;
+          }
+
+        } else {
+          // Simple key, even simpler rules, since only scalars and shallow
+          // arrays are allowed.
+
+          if ( $.isArray( obj[key] ) ) {
+            // val is already an array, so push on the next value.
+            obj[key].push( val );
+
+          } else if ( obj[key] !== undefined ) {
+            // val isn't an array, but since a second value has been specified,
+            // convert val into an array.
+            obj[key] = [ obj[key], val ];
+
+          } else {
+            // val is a scalar.
+            obj[key] = val;
+          }
+        }
+      });
+
+      return obj;
+    };
+
+    return $;
+  }
+);

assets/js/src/newsletters/send.jsx

@@ -1,6 +1,7 @@
 define(
   [
     'react',
+    'react-router',
     'mailpoet',
     'form/form.jsx',
     'form/fields/selection.jsx',
@@ -8,6 +9,7 @@ define(
   ],
   function(
     React,
+    Router,
     MailPoet,
     Form,
     Selection,
@@ -32,7 +34,9 @@ define(
           <Selection
             placeholder="Select a list"
             id="mailpoet_segments"
-            endpoint="segments" />
+            endpoint="segments"
+            multiple={ true }
+            select2={ true } />
         )
       },
       {
@@ -77,15 +81,42 @@ define(
 
     var messages = {
       updated: function() {
-        MailPoet.Notice.success('Newsletter succesfully updated!');
+        MailPoet.Notice.success('The newsletter has been updated!');
       }
     };
 
     var NewsletterSend = React.createClass({
+      mixins: [
+        Router.Navigation
+      ],
       handleSend: function() {
-        console.log('send.');
-        console.log(jQuery('#mailpoet_newsletter').serializeArray());
-        console.log(jQuery('#mailpoet_segments').val());
+        MailPoet.Ajax.post({
+          endpoint: 'newsletters',
+          action: 'send',
+          data: {
+            id: this.props.params.id,
+            newsletter: jQuery('#mailpoet_newsletter').serializeObject(),
+            segments: jQuery('#mailpoet_segments').val()
+          }
+        }).done(function(response) {
+          if(response === true) {
+            this.transitionTo('/');
+            MailPoet.Notice.success(
+              'The newsletter has been sent!'
+            );
+          } else {
+            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));
       },
       render: function() {
         return (

assets/js/src/subscribers/list.jsx

@@ -65,7 +65,7 @@ define(
         label: 'Move to list...',
         onSelect: function() {
           return (
-            <ItemSelection
+            <Selection
               endpoint="segments"
               id="move_to_segment" />
           );
@@ -81,7 +81,7 @@ define(
         label: 'Add to list...',
         onSelect: function() {
           return (
-            <ItemSelection
+            <Selection
               endpoint="segments"
               id="add_to_segment" />
           );
@@ -97,7 +97,7 @@ define(
         label: 'Remove from list...',
         onSelect: function() {
           return (
-            <ItemSelection
+            <Selection
               endpoint="segments"
               id="remove_from_segment" />
           );