Forms & Last Step

- fixed issues on forms
- added defaultValue on text/textarea fields
- added all actions on step 3

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

@@ -15,7 +15,7 @@ function(
   FormFieldCheckbox
 ) {
   var FormField = React.createClass({
-    renderField: function(data, inline = true) {
+    renderField: function(data, inline = false) {
       var description = false;
       if(data.field.description) {
         description = (
@@ -53,17 +53,17 @@ function(
 
       if(inline === true) {
         return (
-          <span>
+          <span key={ 'field-' + (data.index || 0) }>
             { field }
             { description }
           </span>
         );
       } else {
         return (
-          <div>
+          <p key={ 'field-' + (data.index || 0) }>
             { field }
             { description }
-          </div>
+          </p>
         );
       }
     },
@@ -71,8 +71,9 @@ function(
       var field = false;
 
       if(this.props.field['fields'] !== undefined) {
-        field = this.props.field.fields.map(function(subfield) {
+        field = this.props.field.fields.map(function(subfield, index) {
           return this.renderField({
+            index: index,
             field: subfield,
             item: this.props.item
           });

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

@@ -61,30 +61,9 @@ function(
       }.bind(this));
     },
     handleChange: function() {
-      var new_value = this.refs.selection.getDOMNode().value;
-
-      if(this.props.multiple === false) {
-        if(new_value.trim().length === 0) {
-          new_value = false;
-        }
-
-        this.setState({
-          selected: new_value
-        });
-      } else {
-        var selected_values = this.state.selected || [];
-
-        if(selected_values.indexOf(new_value) !== -1) {
-          // value already present so remove it
-          selected_values.splice(selected_values.indexOf(new_value), 1);
-        } else {
-          selected_values.push(new_value);
-        }
-
-        this.setState({
-          selected: selected_values
-        });
-      }
+      this.setState({
+        selected: jQuery('#'+this.props.id).val()
+      });
     },
     getSelected: function() {
       return this.state.selected;

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

@@ -10,11 +10,16 @@ function(
         <input
           type="text"
           className={ (this.props.field.size) ? '' : 'regular-text' }
-          size={ (this.props.field.size !== 'auto') ? this.props.field.size : false }
+          size={
+            (this.props.field.size !== 'auto' && this.props.field.size > 0)
+            ? this.props.field.size
+            : false
+          }
           name={ this.props.field.name }
           id={ 'field_'+this.props.field.name }
           value={ this.props.item[this.props.field.name] }
           placeholder={ this.props.field.placeholder }
+          defaultValue={ this.props.field.defaultValue }
           onChange={ this.props.onValueChange } />
       );
     }

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

@@ -13,6 +13,8 @@ function(
           name={ this.props.field.name }
           id={ 'field_'+this.props.field.name }
           value={ this.props.item[this.props.field.name] }
+          placeholder={ this.props.field.placeholder }
+          defaultValue={ this.props.field.defaultValue }
           onChange={ this.props.onValueChange } />
       );
     }

assets/js/src/form/form.jsx

@@ -128,8 +128,22 @@ define(
           );
         }.bind(this));
 
+        var actions = false;
+        if(this.props.children) {
+          actions = this.props.children;
+        } else {
+          actions = (
+            <input
+              className="button button-primary"
+              type="submit"
+              value="Save"
+              disabled={this.state.loading} />
+          );
+        }
+
         return (
           <form
+            id={ this.props.id }
             ref="form"
             className={ formClasses }
             onSubmit={
@@ -146,11 +160,7 @@ define(
               </tbody>
             </table>
 
-            <input
-              className="button button-primary"
-              type="submit"
-              value="Save"
-              disabled={this.state.loading} />
+            { actions }
           </form>
         );
       }

assets/js/src/newsletters/send.jsx

@@ -13,6 +13,9 @@ define(
     Selection,
     Breadcrumb
   ) {
+
+    var settings = window.mailpoet_settings || {};
+
     var fields = [
       {
         name: 'subject',
@@ -41,13 +44,13 @@ define(
             name: 'from_name',
             type: 'text',
             placeholder: 'John Doe',
-            size: 'auto'
+            defaultValue: settings.from_name
           },
           {
             name: 'from_email',
             type: 'text',
             placeholder: 'john.doe@email.com',
-            size: 'auto'
+            defaultValue: settings.from_address
           },
         ]
       },
@@ -61,14 +64,12 @@ define(
           {
             name: 'reply_to_name',
             type: 'text',
-            placeholder: 'John Doe',
-            size: 'auto'
+            placeholder: 'John Doe'
           },
           {
             name: 'reply_to_email',
             type: 'text',
-            placeholder: 'john.doe@email.com',
-            size: 'auto'
+            placeholder: 'john.doe@email.com'
           },
         ]
       }
@@ -81,6 +82,11 @@ define(
     };
 
     var NewsletterSend = React.createClass({
+      handleSend: function() {
+        console.log('send.');
+        console.log(jQuery('#mailpoet_newsletter').serializeArray());
+        console.log(jQuery('#mailpoet_segments').val());
+      },
       render: function() {
         return (
           <div>
@@ -89,10 +95,32 @@ define(
             <Breadcrumb step="send" />
 
             <Form
+              id="mailpoet_newsletter"
               endpoint="newsletters"
               fields={ fields }
               params={ this.props.params }
-              messages={ messages } />
+              messages={ messages }>
+
+              <p className="submit">
+                <input
+                  className="button button-primary"
+                  type="button"
+                  onClick={ this.handleSend }
+                  value="Send" />
+                &nbsp;
+                <input
+                  className="button button-secondary"
+                  type="submit"
+                  value="Save as draft and close" />
+                &nbsp;or simply&nbsp;
+                <a
+                  href={
+                    '?page=mailpoet-newsletter-editor&id='+this.props.params.id
+                  }>
+                  go back to design
+                </a>.
+              </p>
+            </Form>
           </div>
         );
       }

lib/Config/Menu.php

@@ -1,6 +1,7 @@
 <?php
 namespace MailPoet\Config;
 use \MailPoet\Models\Segment;
+use \MailPoet\Models\Setting;
 
 if(!defined('ABSPATH')) exit;
 
@@ -112,7 +113,11 @@ class Menu {
     $data = array();
 
     $data['segments'] = Segment::findArray();
-
+    $settings = Setting::findArray();
+    $data['settings'] = array();
+    foreach($settings as $setting) {
+      $data['settings'][$setting['name']] = $setting['value'];
+    }
     echo $this->renderer->render('newsletters.html', $data);
   }
 

views/newsletters.html

@@ -12,5 +12,6 @@
 
   <script type="text/javascript">
     var mailpoet_segments = <%= json_encode(segments) %>;
+    var mailpoet_settings = <%= json_encode(settings) %>;
   </script>
 <% endblock %>