Add standard newsletter scheduling UI

assets/js/src/newsletters/send.jsx

@@ -35,9 +35,9 @@ define(
       },
       getFieldsByNewsletter: function(newsletter) {
         switch(newsletter.type) {
-          case 'notification': return NotificationNewsletterFields;
-          case 'welcome': return WelcomeNewsletterFields;
-          default: return StandardNewsletterFields;
+          case 'notification': return NotificationNewsletterFields(newsletter);
+          case 'welcome': return WelcomeNewsletterFields(newsletter);
+          default: return StandardNewsletterFields(newsletter);
         }
       },
       isAutomatedNewsletter: function() {

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

@@ -1,12 +1,180 @@
 define(
   [
-    'mailpoet'
+    'react',
+    'jquery',
+    'mailpoet',
+    'form/fields/checkbox.jsx',
+    'form/fields/select.jsx',
+    'form/fields/text.jsx',
   ],
   function(
-    MailPoet
+    React,
+    jQuery,
+    MailPoet,
+    Checkbox,
+    Select,
+    Text
   ) {
 
-    var settings = window.mailpoet_settings || {};
+    var settings = window.mailpoet_settings || {},
+        currentTime = window.mailpoet_current_time || '00:00',
+        timeOfDayItems = window.mailpoet_schedule_time_of_day;
+
+    var isScheduledField = {
+      name: 'isScheduled',
+    };
+
+    var DateText = React.createClass({
+      componentDidMount: function() {
+        var $element = jQuery(this.refs.dateInput);
+        if ($element.datepicker) {
+          $element.datepicker({
+            dateFormat: "yy-mm-dd",
+          });
+        }
+      },
+      render: function() {
+        return (
+          <input
+            type="text"
+            name={this.props.name || 'date'}
+            value={this.props.value}
+            onChange={this.props.onChange}
+            ref="dateInput" />
+        );
+      },
+    });
+
+    var TimeSelect = React.createClass({
+      render: function() {
+        const options = Object.keys(timeOfDayItems).map(
+          (value, index) => {
+            return (
+              <option
+                key={ 'option-' + index }
+                value={ value }>
+                { timeOfDayItems[value] }
+              </option>
+            );
+          }
+        );
+
+        return (
+          <select
+            name={this.props.name || 'time'}
+            value={this.props.value}
+            onChange={this.props.onChange}
+          >
+            {options}
+          </select>
+        );
+      }
+    });
+
+    var DateTime = React.createClass({
+      _DATE_TIME_SEPARATOR: " ",
+      getInitialState: function() {
+        return this._buildStateFromProps(this.props);
+      },
+      componentWillReceiveProps: function(nextProps) {
+        this.setState(this._buildStateFromProps(nextProps));
+      },
+      _buildStateFromProps: function(props) {
+        const [date, time] = props.value.split(this._DATE_TIME_SEPARATOR)
+        return {
+          date: date,
+          time: time,
+        };
+      },
+      handleChange: function(event) {
+        var newState = {};
+        newState[event.target.name] = event.target.value;
+
+        this.setState(newState, function() {
+          this.propagateChange();
+        });
+      },
+      propagateChange: function() {
+        if (this.props.onChange) {
+          this.props.onChange({
+            target: {
+              name: this.props.name || '',
+              value: this.getDateTime(),
+            }
+          })
+        }
+      },
+      getDateTime: function() {
+        return [this.state.date, this.state.time].join(this._DATE_TIME_SEPARATOR);
+      },
+      render: function() {
+        return (
+          <span>
+            <DateText
+              name="date"
+              value={this.state.date}
+              onChange={this.handleChange} />
+            <TimeSelect
+              name="time"
+              value={this.state.time}
+              onChange={this.handleChange} />
+          </span>
+        );
+      }
+    });
+
+    var StandardScheduling = React.createClass({
+      getInitialState: function() {
+        return {
+          isScheduled: '0',
+          scheduledAt: '2016-05-04 14:00:00',
+        };
+      },
+      handleChange: function(event) {
+        var newState = {};
+        newState[event.target.name] = event.target.value;
+        this.setState(newState);
+      },
+      handleCheckboxChange: function(event) {
+        event.target.value = this.refs.isScheduled.checked ? '1' : '0';
+        this.handleChange(event);
+      },
+      isScheduled: function() {
+        return this.state.isScheduled === '1';
+      },
+      render: function() {
+        var isChecked = this.isScheduled(),
+            schedulingOptions;
+
+        if (isChecked) {
+          schedulingOptions = (
+            <span>
+              <DateTime
+                name="scheduledAt"
+                value={this.state.scheduledAt}
+                onChange={this.handleChange} />
+              <span>
+                {MailPoet.I18n.t('localTimeIs')} <code>{currentTime}</code>
+              </span>
+            </span>
+          );
+        }
+
+        return (
+          <div>
+            <input
+              ref="isScheduled"
+              type="checkbox"
+              value="1"
+              checked={this.isScheduled()}
+              name="isScheduled"
+              onChange={this.handleCheckboxChange} />
+
+            {schedulingOptions}
+          </div>
+        );
+      },
+    });
 
     var fields = [
       {
@@ -84,9 +252,17 @@ define(
             placeholder: MailPoet.I18n.t('replyToAddressPlaceholder')
           }
         ]
+      },
+      {
+        name: 'options',
+        label: MailPoet.I18n.t('scheduleIt'),
+        type: 'reactComponent',
+        component: StandardScheduling,
       }
     ];
 
-    return fields;
+    return function(newsletter) {
+      return fields;
+    };
   }
 );

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

@@ -71,7 +71,9 @@ define(
       }
     ];
 
-    return fields;
+    return function(newsletter) {
+      return fields;
+    };
   }
 );