Update changelog for 0.0.43

Editor fixes

.circle_ci/apache/mailpoet.loc.conf

@@ -0,0 +1,15 @@
+Listen 8080
+
+<VirtualHost *:8080>
+  UseCanonicalName Off
+  ServerName mailpoet.loc
+  DocumentRoot /home/ubuntu/mailpoet/wordpress
+  DirectoryIndex index.php
+  LogLevel notice
+
+  <Directory /home/ubuntu/mailpoet/wordpress>
+    AllowOverride All
+    Allow from All
+  </Directory>
+</VirtualHost>
+

.gitignore

@@ -12,7 +12,7 @@ npm-debug.log
 /views/cache/**
 temp
 .idea
-wysija-newsletters.zip
+mailpoet.zip
 tests/javascript/testBundles
 assets/css/*.css
 assets/js/*.js

RoboFile.php

@@ -102,31 +102,51 @@ class RoboFile extends \Robo\Tasks {
     );
   }
 
-  function testUnit($file = null) {
+  function testUnit($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build');
-    $this->_exec('vendor/bin/codecept run unit -f '.(($file) ? $file : ''));
+
+    $command = 'vendor/bin/codecept run unit -f '.(($opts['file']) ? $opts['file'] : '');
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
   }
 
-  function testCoverage($file = null) {
+  function testCoverage($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build');
-    $this->_exec(join(' ', array(
+    $command = join(' ', array(
       'vendor/bin/codecept run',
-      (($file) ? $file : ''),
+      (($opts['file']) ? $opts['file'] : ''),
       '--coverage',
-      '--coverage-html'
-    )));
+      ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
+    ));
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
   }
 
-  function testJavascript() {
+  function testJavascript($xml_output_file = null) {
     $this->compileJs();
 
-    $this->_exec(join(' ', array(
+    $command = join(' ', array(
       './node_modules/.bin/mocha',
       '-r tests/javascript/mochaTestHelper.js',
       'tests/javascript/testBundles/**/*.js'
-    )));
+    ));
+
+    if(!empty($xml_output_file)) {
+      $command .= sprintf(
+        ' --reporter xunit --reporter-options output="%s"',
+        $xml_output_file
+      );
+    }
+
+    return $this->_exec($command);
   }
 
   function testDebug() {
@@ -141,8 +161,33 @@ class RoboFile extends \Robo\Tasks {
     $this->_exec('vendor/bin/codecept run -g failed');
   }
 
+  function qa() {
+    $this->qaLint();
+    $this->qaCodeSniffer('all');
+  }
+
+  function qaLint() {
+    $this->_exec('./tasks/php_lint.sh lib/ tests/ mailpoet.php');
+  }
+
+  function qaCodeSniffer($severity='errors') {
+    if ($severity === 'all') {
+      $severityFlag = '-w';
+    } else {
+      $severityFlag = '-n';
+    }
+    $this->_exec(
+      './vendor/bin/phpcs '.
+      '--standard=./tasks/code_sniffer/MailPoet '.
+      '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
+      './lib/Config/PopulatorData/Templates/* '.
+      'lib/ '.
+      $severityFlag
+    );
+  }
+
   protected function loadEnv() {
     $dotenv = new Dotenv\Dotenv(__DIR__);
     $dotenv->load();
   }
-}
+}

assets/css/src/admin.styl

@@ -9,6 +9,8 @@
 
 @require 'form_editor'
 @require 'listing'
+@require 'listing/newsletters'
+
 @require 'box'
 @require 'breadcrumb'
 

assets/css/src/box.styl

@@ -27,13 +27,12 @@
 
   img
     min-width: 150px
-    min-height: 150px
     height: auto
     width: 110%
     position: relative
-    top: 0
+    top: 50%
     left: 50%
-    transform: translate(-50%, 0%)
+    transform: translate(-50%, -50%)
 
   .mailpoet_overlay
     position: absolute
@@ -61,16 +60,20 @@
 .mailpoet_boxes .mailpoet_description
   float:left
   width: 245px
-  max-height: calc(110px - 2em)
+  max-height: calc(115px - 2em)
   padding-bottom: 2em
   overflow: hidden
 
-.mailpoet_boxes .mailpoet_description h3
-  margin: 0 0 1em 0
-  overflow: hidden
-  white-space: nowrap
-  text-overflow: ellipsis
-  max-width: 220px
+  h3
+    margin: 0 0 0.7em 0
+    overflow: hidden
+    max-width: 210px
+    line-height: 1.4em
+
+  p
+    font-size: 13px
+    line-height: 1.5
+    margin: 1em 0
 
 .mailpoet_boxes .mailpoet_actions
   position: absolute

assets/css/src/listing/newsletters.styl

@@ -0,0 +1,3 @@
+#newsletters_container
+  h2.nav-tab-wrapper
+    margin-bottom: 1rem

assets/css/src/newsletter_editor/components/blockTools.styl

@@ -1,6 +1,6 @@
-$tool-inactive-color = #bbbbbb
+$tool-inactive-color = #333333
 $tool-inactive-secondary-color = #ffffff
-$tool-hover-color = #333333
+$tool-hover-color = #bbbbbb
 $tool-hover-secondary-color = #ffffff
 $tool-active-color = #d2d2d4
 $tool-active-secondary-color = #ffffff
@@ -12,21 +12,42 @@ $master-column-tool-width = 24px
   position: absolute
   top: 0
   right: 0
-  display: none
   z-index: 20
   padding: 2px
   text-align: right
+  overflow: hidden
+
+  .mailpoet_tool_slider
+    position: relative
+    right: -100%
+    transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
+    opacity: 0
+
+  &.mailpoet_display_tools
+    .mailpoet_tool_slider
+      right: 0
+      opacity: 1
 
   a
     vertical-align: top
 
   .mailpoet_container_horizontal + &
     left: 100%
+    right: initial
     padding-left: 5px
 
+    .mailpoet_tool_slider
+      left: -100%
+      right: initial
+
+    &.mailpoet_display_tools
+      .mailpoet_tool_slider
+        left: 0
+
     .mailpoet_tool
       width: $master-column-tool-width
       height: $master-column-tool-width
+      display: block
 
       .mailpoet_tool_icon
         width: $master-column-tool-width
@@ -46,6 +67,7 @@ $master-column-tool-width = 24px
       opacity: 0
       overflow: hidden
       display: block
+      margin: 0
 
     .mailpoet_delete_block_activated
       width: auto
@@ -125,7 +147,6 @@ $master-column-tool-width = 24px
   border-radius(3px)
   background-color: $warning-background-color
   padding: 3px 5px
-  line-height: 1.2em
 
   .mailpoet_delete_block_activate
     overflow: hidden

assets/css/src/newsletter_editor/components/forms.styl

@@ -4,7 +4,6 @@
 
 .mailpoet_form_field_title
   clear: both
-  font-size: 1.1em
   margin-bottom: 5px
 
 .mailpoet_form_field_title_small

assets/css/src/newsletter_editor/components/sidebar.styl

@@ -17,6 +17,7 @@ $widget-icon-width = 30px
   border-left: $content-border-color
   border-bottom: $content-border-color
   color: $sidebar-text-color
+  font-size: $sidebar-text-size
 
   .mailpoet_sidebar_region
     margin-bottom: 0

assets/css/src/newsletter_editor/components/sidepanel.styl

@@ -3,6 +3,7 @@ $sidepanel-active-heading-color = $primary-active-color
 /* Sidepanel */
 .mailpoet_editor_settings
   color: $sidebar-text-color
+  font-size: $sidebar-text-size
 
   p
     font-size: 1em
@@ -18,7 +19,6 @@ $sidepanel-active-heading-color = $primary-active-color
 
 .mailpoet_sidepanel_field_title
   clear: both
-  font-size: 1.1em
   margin-bottom: 5px
 
 .mailpoet_sidepanel_field_title_small

assets/css/src/newsletter_editor/contentBlocks/base.styl

@@ -23,6 +23,7 @@ $block-text-line-height = $text-line-height
     border: 1px solid $transparent-color
 
   &:hover > .mailpoet_block_highlight
+  &.mailpoet_highlight > .mailpoet_block_highlight
     border: 1px dashed $block-hover-highlight-color
 
 

assets/css/src/newsletter_editor/contentBlocks/container.styl

@@ -17,7 +17,7 @@ $three-column-width = ($newsletter-width / 3) - (2 * $column-margin)
   padding-left: 0
   padding-right: 0
 
-  &:hover
+  &:hover > .mailpoet_block_highlight
     border: 0
 
 .mailpoet_container_vertical > *

assets/css/src/newsletter_editor/contentBlocks/social.styl

@@ -5,8 +5,8 @@ $active-social-icon-set-border-color = #adadad
 $active-social-icon-set-background-color = #daebf2
 $social-icon-set-hover-border-color = $primary-active-color
 
-$tool-inactive-color = #bbbbbb
-$tool-hover-color = #333333
+$tool-inactive-color = #333333
+$tool-hover-color = #bbbbbb
 $tool-active-color = #d2d2d4
 
 $tool-width = 16px

assets/css/src/newsletter_editor/libraryOverrides.styl

@@ -31,7 +31,7 @@ div.mce-toolbar-grp.mce-container
   box-shadow(0px 0px 3px 1px rgba(0, 0, 0, 0.05))
 
 .mce-window
-  /* Fix TinyMCE mailpoet_custom_fields window lack of hiding overflow */
+  /* Fix TinyMCE mailpoet_shortcodes window lack of hiding overflow */
   div.mce-container-body.mce-abs-layout
     overflow: hidden
 
@@ -40,8 +40,8 @@ div.mce-toolbar-grp.mce-container
     width: -webkit-calc( 100% - 36px )
     width: calc( 100% - 36px )
 
-/* TinyMCE mailpoet_custom_fields toolbar icon */
-.mce-i-mailpoet_custom_fields:before
+/* TinyMCE mailpoet_shortcodes toolbar icon */
+.mce-i-mailpoet_shortcodes:before
   font: 400 20px/1 dashicons!important
   content: "\f307"
 
@@ -84,7 +84,7 @@ position: relative
 body
   overflow-x: auto
 
-/* Hide the "Details" section of Wordpress Media manager */
+/* Hide the "Details" section of WordPress Media manager */
 .media-sidebar
   display: none
 
@@ -98,7 +98,7 @@ body
   .attachments-browser .uploader-inline
     right: 0
 
-/* Remove max width from date selector in Wordpress Media Manager */
+/* Remove max width from date selector in WordPress Media Manager */
 #media-attachment-date-filters
   max-width: calc(100% - 12px)
 

assets/css/src/newsletter_editor/mixins/transitions.styl

@@ -1,12 +1,12 @@
-animation-slide-open-downwards()
+animation-slide-open-downwards($max-height = 2000px)
   transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
-  max-height: 2000px
+  max-height: $max-height
   opacity: 1
+  overflow-y: hidden
 
   &.mailpoet_closed
-    max-height: 0
+    max-height: 0px
     opacity: 0
-    overflow-y: hidden
 
 animation-background-color()
   transition: background 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */

assets/css/src/newsletter_editor/variables.styl

@@ -26,3 +26,4 @@ $error-text-color = #d54e21
 $newsletter-width = 660px
 
 $text-line-height = 1.6em
+$sidebar-text-size = 13px

assets/css/src/parsley.styl

@@ -18,6 +18,7 @@ textarea.parsley-error
   list-style-type none
   font-size 0.9em
   line-height 0.9em
+  color #B94A48
   opacity 0
   transition all .3s ease-in
   -o-transition all .3s ease-in

assets/css/src/settings.styl

@@ -1,14 +1,10 @@
 #mailpoet_settings
   // common
   .mailpoet_panel
-    display: none
+    display none
 
   .form-table th
-    width:20em
-
-  // advanced
-  #mailpoet_role_permissions
-    margin-top: 20px;
+    width 20em
 
   // sending methods
   .mailpoet_sending_methods
@@ -28,8 +24,7 @@
       line-height 54px
       font-size 1.5em
     .mailpoet_description
-      line-height 1.5em
-      font-size 1.1em
+      font-size 14px
     .mailpoet_status
       background-color #2f2f2f
       color #fff
@@ -60,11 +55,11 @@
   // responsive
   @media screen and (max-width: 782px)
     .form-table th
-      width: auto
+      width auto
 
     .mailpoet_sending_methods
       li
         float none
-        width: auto
-        margin-right: 0
+        width auto
+        margin-right 0
 

assets/js/lib/mailpoet_custom_fields

@@ -1 +0,0 @@
-../src/newsletter_editor/tinymce/mailpoet_custom_fields

assets/js/lib/mailpoet_shortcodes

@@ -0,0 +1 @@
+../src/newsletter_editor/tinymce/mailpoet_shortcodes

assets/js/src/ajax.js

@@ -1,4 +1,4 @@
-define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
+define('ajax', ['mailpoet', 'jquery', 'underscore'], function(MailPoet, jQuery, _) {
   'use strict';
   MailPoet.Ajax = {
       version: 0.5,
@@ -8,19 +8,11 @@ define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         endpoint: null,
         action: null,
         token: null,
-        data: {},
-        onSuccess: function(data, textStatus, xhr) {},
-        onError: function(xhr, textStatus, errorThrown) {}
-      },
-      get: function(options) {
-        return this.request('get', options);
+        data: {}
       },
       post: function(options) {
         return this.request('post', options);
       },
-      delete: function(options) {
-        return this.request('delete', options);
-      },
       init: function(options) {
         // merge options
         this.options = jQuery.extend({}, this.defaults, options);
@@ -50,31 +42,31 @@ define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
 
         // set request params
         var params = this.getParams();
-        var jqXHR;
+        var deferred = jQuery.Deferred();
 
-        // make ajax request depending on method
-        if(method === 'get') {
-          jqXHR = jQuery.get(
-            this.options.url,
-            params,
-            this.options.onSuccess,
-            'json'
-          );
-        } else {
-          jqXHR = jQuery.ajax({
-            url: this.options.url,
-            type : 'post',
-            data: params,
-            dataType: 'json',
-            success : this.options.onSuccess,
-            error : this.options.onError
-          });
+        // remove null values from the data object
+        if (_.isObject(params.data)) {
+          params.data = _.pick(params.data, function(value) {
+            return (value !== null)
+          })
         }
 
+        // ajax request
+        deferred = jQuery.post(
+          this.options.url,
+          params,
+          null,
+          'json'
+        ).then(function(data) {
+          return data;
+        }, function(xhr) {
+          return xhr.responseJSON;
+        });
+
         // clear options
         this.options = {};
 
-        return jqXHR;
+        return deferred;
       }
   };
 });

assets/js/src/cron.jsx

@@ -1,100 +0,0 @@
-define(
-  [
-    'react',
-    'react-dom',
-    'mailpoet'
-  ],
-  function(
-    React,
-    ReactDOM,
-    MailPoet
-  ) {
-  var CronControl = React.createClass({
-    getInitialState: function() {
-      return {
-        status: 'loading'
-      };
-    },
-    getCronData: function() {
-      MailPoet.Ajax.post({
-          endpoint: 'cron',
-          action: 'getStatus'
-        })
-        .done(function(response) {
-          jQuery('.button-primary')
-            .removeClass('disabled');
-          if(response.status !== undefined) {
-            this.setState(response);
-          } else {
-            this.replaceState();
-          }
-        }.bind(this));
-    },
-    componentDidMount: function() {
-      if(this.isMounted()) {
-        this.getCronData();
-        setInterval(this.getCronData, 5000);
-      }
-    },
-    controlCron: function(action) {
-      if(jQuery('.button-primary').hasClass('disabled')) {
-        return;
-      }
-      jQuery('.button-primary')
-        .addClass('disabled');
-      MailPoet.Ajax.post({
-        endpoint: 'cron',
-        action: action,
-      })
-      .done(function(response) {
-        if(!response.result) {
-          MailPoet.Notice.error(MailPoet.I18n.t('daemonControlError'));
-        }
-      }.bind(this));
-    },
-    render: function() {
-      if(this.state.status === 'loading') {
-        return(<div>{MailPoet.I18n.t('loadingDaemonStatus')}</div>);
-      }
-      switch(this.state.status) {
-        case 'started':
-          return(
-            <div>
-              {MailPoet.I18n.t('cronDaemonIsRunning')}
-              <br/>
-              <br/>
-              <a href="#" className="button-primary" onClick={this.controlCron.bind(null, 'stop')}>{MailPoet.I18n.t('stop')}</a>
-            </div>
-          );
-        break;
-        case 'starting':
-        case 'stopping':
-          return(
-            <div>
-              {MailPoet.I18n.t('cronDaemonState').replace('%$1s', this.state.status)}
-            </div>
-          );
-        break;
-        case 'stopped':
-          return(
-            <div>
-              {MailPoet.I18n.t('cronDaemonState').replace('%$1s', this.state.status)}
-              <br />
-              <br />
-              <a href="#" className="button-primary" onClick={this.controlCron.bind(null, 'start')}>{MailPoet.I18n.t('start')}</a>
-            </div>
-          );
-        break;
-      }
-    }
-  });
-
-  const container = document.getElementById('cron_container');
-
-  if(container) {
-    ReactDOM.render(
-      <CronControl />,
-      container
-    );
-  }
-});

assets/js/src/date.js

@@ -43,8 +43,9 @@ define('date',
       options = options || {};
       this.init(options);
 
-      return Moment(date, this.convertFormat(options.parseFormat))
-        .format(this.convertFormat(this.options.format));
+      var date = Moment(date, this.convertFormat(options.parseFormat));
+      if (options.offset === 0) date = date.utc();
+      return date.format(this.convertFormat(this.options.format));
     },
     toDate: function(date, options) {
       options = options || {};
@@ -68,7 +69,7 @@ define('date',
       });
     },
     convertFormat: function(format) {
-      const format_mappings = {
+      var format_mappings = {
         date: {
           D: 'ddd',
           l: 'dddd',
@@ -124,9 +125,9 @@ define('date',
 
       if (!format || format.length <= 0) return format;
 
-      const replacements = format_mappings['date'];
+      var replacements = format_mappings['date'];
 
-      let outputFormat = '';
+      var outputFormat = '';
 
       Object.keys(replacements).forEach(function(key) {
         if (format.indexOf(key) !== -1) {

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

@@ -6,7 +6,7 @@ function(
 ) {
   const FormFieldCheckbox = React.createClass({
     onValueChange: function(e) {
-      e.target.value = this.refs.checkbox.checked ? '1' : '';
+      e.target.value = this.refs.checkbox.checked ? '1' : '0';
       return this.props.onValueChange(e);
     },
     render: function() {
@@ -14,7 +14,9 @@ function(
         return false;
       }
 
-      const isChecked = !!(this.props.item[this.props.field.name]);
+      // isChecked will be true only if the value is "1"
+      // it will be false in case value is "0" or empty
+      const isChecked = !!(~~(this.props.item[this.props.field.name]));
       const options = Object.keys(this.props.field.values).map(
         (value, index) => {
           return (

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

@@ -27,7 +27,7 @@ define([
       }
       return (
         <select
-          name={ this.props.name + '[year]' }
+          name={ `${this.props.name}[year]` }
           value={ this.props.year }
           onChange={ this.props.onValueChange }
         >
@@ -57,7 +57,7 @@ define([
       }
       return (
         <select
-          name={ this.props.name + '[month]' }
+          name={ `${this.props.name}[month]` }
           value={ this.props.month }
           onChange={ this.props.onValueChange }
         >
@@ -88,7 +88,7 @@ define([
 
       return (
         <select
-          name={ this.props.name + '[day]' }
+          name={ `${this.props.name}[day]` }
           value={ this.props.day }
           onChange={ this.props.onValueChange }
         >
@@ -102,46 +102,74 @@ define([
     constructor(props) {
       super(props);
       this.state = {
-        year: undefined,
-        month: undefined,
-        day: undefined
+        year: '',
+        month: '',
+        day: ''
       }
     }
     componentDidMount() {
+      this.extractDateParts();
     }
     componentDidUpdate(prevProps, prevState) {
       if (
         (this.props.item !== undefined && prevProps.item !== undefined)
         && (this.props.item.id !== prevProps.item.id)
       ) {
-        this.extractTimeStamp();
+        this.extractDateParts();
       }
     }
-    extractTimeStamp() {
-      const timeStamp = parseInt(this.props.item[this.props.field.name], 10);
+    extractDateParts() {
+      const value = (this.props.item[this.props.field.name] !== undefined)
+        ? this.props.item[this.props.field.name].trim()
+        : '';
+
+      if(value === '') {
+        return;
+      }
+
+      const dateTime = Moment(value);
+
       this.setState({
-        year: Moment.unix(timeStamp).year(),
-        // Moment returns the month as [0..11]
-        // We increment it to match PHP's mktime() which expects [1..12]
-        month: Moment.unix(timeStamp).month() + 1,
-        day: Moment.unix(timeStamp).date()
+        year: dateTime.format('YYYY'),
+        month: dateTime.format('M'),
+        day: dateTime.format('D')
       });
     }
-    updateTimeStamp(field) {
-      let newTimeStamp = Moment(
-        `${this.state.month}/${this.state.day}/${this.state.year}`,
-        'M/D/YYYY'
-      ).valueOf();
-      if (~~(newTimeStamp) > 0) {
-        // convert milliseconds to seconds
-        newTimeStamp /= 1000;
-        return this.props.onValueChange({
-          target: {
-            name: field,
-            value: newTimeStamp
-          }
-        });
+    formatValue() {
+      const dateType = this.props.field.params.date_type;
+
+      let value;
+
+      switch(dateType) {
+        case 'year_month_day':
+          value = {
+            'year': this.state.year,
+            'month': this.state.month,
+            'day': this.state.day
+          };
+        break;
+
+        case 'year_month':
+          value = {
+            'year': this.state.year,
+            'month': this.state.month
+          };
+        break;
+
+        case 'month':
+          value = {
+            'month': this.state.month
+          };
+        break;
+
+        case 'year':
+          value = {
+            'year': this.state.year
+          };
+        break;
       }
+
+      return value;
     }
     onValueChange(e) {
       // extract property from name
@@ -153,25 +181,29 @@ define([
         field = matches[1];
         property = matches[2];
 
-        let value = parseInt(e.target.value, 10);
+        let value = ~~(e.target.value);
 
         this.setState({
           [`${property}`]: value
         }, () => {
-          this.updateTimeStamp(field);
+          this.props.onValueChange({
+            target: {
+              name: field,
+              value: this.formatValue()
+            }
+          });
         });
       }
     }
     render() {
       const monthNames = window.mailpoet_month_names || [];
-
+      const dateFormats = window.mailpoet_date_formats || {};
       const dateType = this.props.field.params.date_type;
-
-      const dateSelects = dateType.split('_');
+      const dateSelects = dateFormats[dateType][0].split('/');
 
       const fields = dateSelects.map(type => {
         switch(type) {
-          case 'year':
+          case 'YYYY':
             return (<FormFieldDateYear
               onValueChange={ this.onValueChange.bind(this) }
               ref={ 'year' }
@@ -182,7 +214,7 @@ define([
             />);
           break;
 
-          case 'month':
+          case 'MM':
             return (<FormFieldDateMonth
               onValueChange={ this.onValueChange.bind(this) }
               ref={ 'month' }
@@ -194,7 +226,7 @@ define([
             />);
           break;
 
-          case 'day':
+          case 'DD':
             return (<FormFieldDateDay
               onValueChange={ this.onValueChange.bind(this) }
               ref={ 'day' }

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,27 @@ 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]
+        );
+    } 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 +73,4 @@ const FormFieldSelect = React.createClass({
   }
 });
 
-module.exports = FormFieldSelect;
+module.exports = FormFieldSelect;

assets/js/src/forms/list.jsx

@@ -13,8 +13,11 @@ const columns = [
   },
   {
     name: 'segments',
-    label: MailPoet.I18n.t('segments'),
-    sortable: false
+    label: MailPoet.I18n.t('segments')
+  },
+  {
+    name: 'signups',
+    label: MailPoet.I18n.t('signups')
   },
   {
     name: 'created_at',
@@ -90,7 +93,7 @@ const item_actions = [
     }
   },
   {
-    name: 'duplicate_form',
+    name: 'duplicate',
     label: MailPoet.I18n.t('duplicate'),
     onClick: function(item, refresh) {
       return MailPoet.Ajax.post({
@@ -98,9 +101,11 @@ const item_actions = [
         action: 'duplicate',
         data: item.id
       }).done(function(response) {
-        MailPoet.Notice.success(
-          (MailPoet.I18n.t('formDuplicated')).replace('%$1s', response.name)
-        );
+        if (response !== false && response['name'] !== undefined) {
+          MailPoet.Notice.success(
+            (MailPoet.I18n.t('formDuplicated')).replace('%$1s', response.name)
+          );
+        }
         refresh();
       });
     }
@@ -145,9 +150,12 @@ const FormList = React.createClass({
           </strong>
           { actions }
         </td>
-        <td className="column-format" data-colname={MailPoet.I18n.t('segments')}>
+        <td className="column" data-colname={MailPoet.I18n.t('segments')}>
           { segments }
         </td>
+        <td className="column" data-colname={MailPoet.I18n.t('signups')}>
+          { form.signups }
+        </td>
         <td className="column-date" data-colname={MailPoet.I18n.t('createdOn')}>
           <abbr>{ MailPoet.Date.format(form.created_at) }</abbr>
         </td>

assets/js/src/listing/bulk_actions.jsx

@@ -47,13 +47,13 @@ function(
 
       data.action = this.state.action;
 
-      var callback = function() {};
+      var onSuccess = function() {};
       if(action['onSuccess'] !== undefined) {
-        callback = action.onSuccess;
+        onSuccess = action.onSuccess;
       }
 
       if(data.action) {
-        this.props.onBulkAction(selected_ids, data, callback);
+        this.props.onBulkAction(selected_ids, data).then(onSuccess);
       }
 
       this.setState({

assets/js/src/listing/filters.jsx

@@ -10,10 +10,10 @@ function(
 ) {
   var ListingFilters = React.createClass({
     handleFilterAction: function() {
-      let filters = {}
+      let filters = {};
       this.getAvailableFilters().map((filter, i) => {
         filters[this.refs['filter-'+i].name] = this.refs['filter-'+i].value
-      })
+      });
       return this.props.onSelectFilter(filters);
     },
     handleEmptyTrash: function() {
@@ -21,7 +21,6 @@ function(
     },
     getAvailableFilters: function() {
       let filters = this.props.filters;
-
       return Object.keys(filters).filter(function(filter) {
         return !(
           filters[filter].length === 0
@@ -30,26 +29,29 @@ function(
             && !filters[filter][0].value
           )
         );
-      })
+      });
+    },
+    componentDidUpdate: function() {
+      const selected_filters = this.props.filter;
+      const available_filters = this.getAvailableFilters().map(
+        function(filter, i) {
+          if (selected_filters[filter] !== undefined && selected_filters[filter]) {
+            jQuery(this.refs['filter-'+i])
+              .val(selected_filters[filter])
+              .trigger('change');
+          }
+        }.bind(this)
+      );
     },
     render: function() {
       const filters = this.props.filters;
-      const selected_filters = this.props.filter;
-
       const available_filters = this.getAvailableFilters()
         .map(function(filter, i) {
-          let default_value = false;
-          if (selected_filters[filter] !== undefined && selected_filters[filter]) {
-            default_value = selected_filters[filter]
-          } else {
-            jQuery(`select[name="${filter}"]`).val('');
-          }
           return (
             <select
               ref={ `filter-${i}` }
               key={ `filter-${i}` }
               name={ filter }
-              defaultValue={ default_value }
             >
             { filters[filter].map(function(option, j) {
               return (
@@ -63,7 +65,7 @@ function(
           );
       }.bind(this));
 
-      let button = false;
+      let button;
 
       if (available_filters.length > 0) {
         button = (
@@ -76,7 +78,7 @@ function(
         );
       }
 
-      let empty_trash = false;
+      let empty_trash;
       if (this.props.group === 'trash') {
         empty_trash = (
           <input

assets/js/src/listing/header.jsx

@@ -1,98 +1,91 @@
-define([
-    'react',
-    'classnames',
-    'mailpoet'
-  ], function(
-    React,
-    classNames,
-    MailPoet
-  ) {
-
-  var ListingHeader = React.createClass({
-    handleSelectItems: function() {
-      return this.props.onSelectItems(
-        this.refs.toggle.checked
-      );
-    },
-    render: function() {
-      var columns = this.props.columns.map(function(column, index) {
-        column.is_primary = (index === 0);
-        column.sorted = (this.props.sort_by === column.name)
-          ? this.props.sort_order
-          : 'desc';
-        return (
-          <ListingColumn
-            onSort={this.props.onSort}
-            sort_by={this.props.sort_by}
-            key={ 'column-' + index }
-            column={column} />
-        );
-      }.bind(this));
-
-      var checkbox = false;
-
-      if(this.props.is_selectable === true) {
-        checkbox = (
-          <th
-            className="manage-column column-cb check-column">
-            <label className="screen-reader-text">
-              {MailPoet.I18n.t('selectAll')}
-            </label>
-            <input
-              type="checkbox"
-              name="select_all"
-              ref="toggle"
-              checked={ this.props.selection }
-              onChange={ this.handleSelectItems } />
-          </th>
-        );
-      }
+import MailPoet from 'mailpoet'
+import React from 'react'
+import classNames from 'classnames'
 
+const ListingHeader = React.createClass({
+  handleSelectItems: function() {
+    return this.props.onSelectItems(
+      this.refs.toggle.checked
+    );
+  },
+  render: function() {
+    const columns = this.props.columns.map(function(column, index) {
+      column.is_primary = (index === 0);
+      column.sorted = (this.props.sort_by === column.name)
+        ? this.props.sort_order
+        : 'desc';
       return (
-        <tr>
-          {checkbox}
-          {columns}
-        </tr>
+        <ListingColumn
+          onSort={this.props.onSort}
+          sort_by={this.props.sort_by}
+          key={ 'column-' + index }
+          column={column} />
       );
-    }
-  });
+    }.bind(this));
 
-  var ListingColumn = React.createClass({
-    handleSort: function() {
-      var sort_by = this.props.column.name,
-          sort_order = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
-      this.props.onSort(sort_by, sort_order);
-    },
-    render: function() {
-      var classes = classNames(
-        'manage-column',
-        { 'column-primary': this.props.column.is_primary },
-        { 'sortable': this.props.column.sortable },
-        this.props.column.sorted,
-        { 'sorted': (this.props.sort_by === this.props.column.name) }
-      );
-      var label;
+    let checkbox;
 
-      if(this.props.column.sortable === true) {
-        label = (
-          <a onClick={this.handleSort}>
-            <span>{ this.props.column.label }</span>
-            <span className="sorting-indicator"></span>
-          </a>
-        );
-      } else {
-        label = this.props.column.label;
-      }
-      return (
+    if(this.props.is_selectable === true) {
+      checkbox = (
         <th
-          className={ classes }
-          id={this.props.column.name }
-          scope="col">
-          {label}
+          className="manage-column column-cb check-column">
+          <label className="screen-reader-text">
+            {MailPoet.I18n.t('selectAll')}
+          </label>
+          <input
+            type="checkbox"
+            name="select_all"
+            ref="toggle"
+            checked={ this.props.selection }
+            onChange={ this.handleSelectItems } />
         </th>
       );
     }
-  });
 
-  return ListingHeader;
+    return (
+      <tr>
+        {checkbox}
+        {columns}
+      </tr>
+    );
+  }
 });
+
+const ListingColumn = React.createClass({
+  handleSort: function() {
+    const sort_by = this.props.column.name;
+    const sort_order = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
+    this.props.onSort(sort_by, sort_order);
+  },
+  render: function() {
+    const classes = classNames(
+      'manage-column',
+      { 'column-primary': this.props.column.is_primary },
+      { 'sortable': this.props.column.sortable },
+      this.props.column.sorted,
+      { 'sorted': (this.props.sort_by === this.props.column.name) }
+    );
+    let label;
+
+    if(this.props.column.sortable === true) {
+      label = (
+        <a onClick={ this.handleSort }>
+          <span>{ this.props.column.label }</span>
+          <span className="sorting-indicator"></span>
+        </a>
+      );
+    } else {
+      label = this.props.column.label;
+    }
+    return (
+      <th
+        className={ classes }
+        id={this.props.column.name }
+        scope="col"
+        width={ this.props.column.width || null }
+      >{label}</th>
+    );
+  }
+});
+
+module.exports = ListingHeader;

assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js

@@ -112,7 +112,16 @@ define([
             }
           }
         },
-      }).preventDefault('auto');
+      })
+      .preventDefault('auto')
+      .actionChecker(function (pointer, event, action) {
+        // Disable dragging with right click
+        if (event.button !== 0) {
+          return null;
+        }
+
+        return action;
+      });
 
       if (this.options.drop !== undefined) {
         interactable.getDropModel = this.options.drop;

assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js

@@ -0,0 +1,23 @@
+/**
+ * Highlight Editing Behavior
+ *
+ * Highlights a block that is being edited
+ */
+define([
+    'backbone.marionette',
+    'newsletter_editor/behaviors/BehaviorsLookup',
+  ], function(Marionette, BehaviorsLookup) {
+
+  BehaviorsLookup.HighlightEditingBehavior = Marionette.Behavior.extend({
+    modelEvents: {
+      'startEditing': 'enableHighlight',
+      'stopEditing': 'disableHighlight',
+    },
+    enableHighlight: function() {
+      this.$el.addClass('mailpoet_highlight');
+    },
+    disableHighlight: function() {
+      this.$el.removeClass('mailpoet_highlight');
+    },
+  });
+});

assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js

@@ -0,0 +1,31 @@
+/**
+ * Show Settings Behavior
+ *
+ * Opens up settings of a BlockView if contents are clicked upon
+ */
+define([
+    'backbone.marionette',
+    'jquery',
+    'newsletter_editor/behaviors/BehaviorsLookup',
+  ], function(Marionette, jQuery, BehaviorsLookup) {
+
+  BehaviorsLookup.ShowSettingsBehavior = Marionette.Behavior.extend({
+    defaults: {
+      ignoreFrom: '', // selector
+    },
+    events: {
+      'click .mailpoet_content': 'showSettings',
+    },
+    showSettings: function(event) {
+      if(!this.isIgnoredElement(event.target)) {
+        this.view.triggerMethod('showSettings');
+      }
+    },
+    isIgnoredElement: function(element) {
+      return this.options.ignoreFrom
+        && this.options.ignoreFrom.length > 0
+        && jQuery(element).is(this.options.ignoreFrom);
+    },
+  });
+});
+

assets/js/src/newsletter_editor/blocks/automatedLatestContent.js

@@ -13,6 +13,7 @@ define([
     'newsletter_editor/blocks/divider',
     'newsletter_editor/components/communication',
     'mailpoet',
+    'backbone.supermodel',
     'underscore',
     'jquery'
   ], function(
@@ -22,6 +23,7 @@ define([
     DividerBlock,
     CommunicationComponent,
     MailPoet,
+    SuperModel,
     _,
     jQuery
   ) {
@@ -31,6 +33,41 @@ define([
   var Module = {},
       base = BaseBlock;
 
+  Module.ALCSupervisor = SuperModel.extend({
+    initialize: function() {
+      var DELAY_REFRESH_FOR_MS = 500;
+      this.listenTo(
+        App.getChannel(),
+        'automatedLatestContentRefresh',
+        _.debounce(this.refresh, DELAY_REFRESH_FOR_MS)
+      );
+    },
+    refresh: function() {
+      var models = App.findModels(function(model) {
+        return model.get('type') === 'automatedLatestContent';
+      }) || [];
+
+      if (models.length === 0) return;
+      var blocks = _.map(models, function(model) {
+        return model.toJSON();
+      });
+
+      CommunicationComponent.getBulkTransformedPosts({
+        blocks: blocks,
+      }).then(_.partial(this.refreshBlocks, models));
+    },
+    refreshBlocks: function(models, renderedBlocks) {
+      _.each(
+        _.zip(models, renderedBlocks),
+        function(args) {
+          var model = args[0],
+              contents = args[1];
+          model.trigger('refreshPosts', contents);
+        }
+      );
+    },
+  });
+
   Module.AutomatedLatestContentBlockModel = base.BlockModel.extend({
     stale: ['_container'],
     defaults: function() {
@@ -72,34 +109,21 @@ define([
     },
     initialize: function() {
       base.BlockView.prototype.initialize.apply(this, arguments);
-      this.fetchPosts();
       this.on('change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider', this._scheduleFetchPosts, this);
       this.listenTo(this.get('readMoreButton'), 'change', this._scheduleFetchPosts);
       this.listenTo(this.get('divider'), 'change', this._scheduleFetchPosts);
+      this.on('add remove update reset', this._scheduleFetchPosts);
+      this.on('refreshPosts', this.updatePosts, this);
     },
-    fetchPosts: function() {
-      var that = this;
-      CommunicationComponent.getTransformedPosts(this.toJSON()).done(function(content) {
-        that.get('_container').get('blocks').reset(content, {parse: true});
-        that.trigger('postsChanged');
-      }).fail(function(error) {
-        MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
-      });
+    updatePosts: function(posts) {
+      this.get('_container.blocks').reset(posts, {parse: true});
     },
     /**
      * Batch more changes during a specific time, instead of fetching
      * ALC posts on each model change
      */
     _scheduleFetchPosts: function() {
-      var timeout = 500,
-        that = this;
-      if (this._fetchPostsTimer !== undefined) {
-        clearTimeout(this._fetchPostsTimer);
-      }
-      this._fetchPostsTimer = setTimeout(function() {
-        that.fetchPosts();
-        that._fetchPostsTimer = undefined;
-      }, timeout);
+      App.getChannel().trigger('automatedLatestContentRefresh');
     },
   });
 
@@ -124,6 +148,7 @@ define([
         renderOptions = {
           disableTextEditor: true,
           disableDragAndDrop: true,
+          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
         };
       this.toolsView = new Module.AutomatedLatestContentBlockToolsView({ model: this.model });
       this.toolsRegion.show(this.toolsView);
@@ -149,24 +174,21 @@ define([
         "change .mailpoet_automated_latest_content_title_format": 'changeTitleFormat',
         "change .mailpoet_automated_latest_content_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
         "change .mailpoet_automated_latest_content_show_divider": _.partial(this.changeBoolField, 'showDivider'),
-        "keyup .mailpoet_automated_latest_content_show_amount": _.partial(this.changeField, "amount"),
+        "input .mailpoet_automated_latest_content_show_amount": _.partial(this.changeField, "amount"),
         "change .mailpoet_automated_latest_content_content_type": _.partial(this.changeField, "contentType"),
         "change .mailpoet_automated_latest_content_include_or_exclude": _.partial(this.changeField, "inclusionType"),
         "change .mailpoet_automated_latest_content_title_alignment": _.partial(this.changeField, "titleAlignment"),
         "change .mailpoet_automated_latest_content_image_full_width": _.partial(this.changeBoolField, "imageFullWidth"),
         "change .mailpoet_automated_latest_content_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
         "change .mailpoet_automated_latest_content_show_author": _.partial(this.changeField, "showAuthor"),
-        "keyup .mailpoet_automated_latest_content_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
+        "input .mailpoet_automated_latest_content_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
         "change .mailpoet_automated_latest_content_show_categories": _.partial(this.changeField, "showCategories"),
-        "keyup .mailpoet_automated_latest_content_categories": _.partial(this.changeField, "categoriesPrecededBy"),
-        "keyup .mailpoet_automated_latest_content_read_more_text": _.partial(this.changeField, "readMoreText"),
+        "input .mailpoet_automated_latest_content_categories": _.partial(this.changeField, "categoriesPrecededBy"),
+        "input .mailpoet_automated_latest_content_read_more_text": _.partial(this.changeField, "readMoreText"),
         "change .mailpoet_automated_latest_content_sort_by": _.partial(this.changeField, "sortBy"),
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),
@@ -181,6 +203,7 @@ define([
       this.$('.mailpoet_automated_latest_content_categories_and_tags').select2({
         multiple: true,
         allowClear: true,
+        placeholder: MailPoet.I18n.t('categoriesAndTags'),
         ajax: {
           data: function (params) {
             return {
@@ -188,8 +211,10 @@ define([
             };
           },
           transport: function(options, success, failure) {
-            var taxonomies,
-                promise = CommunicationComponent.getTaxonomies(that.model.get('contentType')).then(function(tax) {
+            var taxonomies;
+            var promise = CommunicationComponent.getTaxonomies(
+              that.model.get('contentType')
+            ).then(function(tax) {
               taxonomies = tax;
               // Fetch available terms based on the list of taxonomies already fetched
               var promise = CommunicationComponent.getTerms({
@@ -198,7 +223,7 @@ define([
               }).then(function(terms) {
                 return {
                   taxonomies: taxonomies,
-                  terms: terms,
+                  terms: terms
                 };
               });
               return promise;
@@ -287,9 +312,11 @@ define([
       if (value == 'titleOnly') {
         this.$('.mailpoet_automated_latest_content_title_as_list').removeClass('mailpoet_hidden');
         this.$('.mailpoet_automated_latest_content_image_full_width_option').addClass('mailpoet_hidden');
+        this.$('.mailpoet_automated_latest_content_image_separator').addClass('mailpoet_hidden');
       } else {
         this.$('.mailpoet_automated_latest_content_title_as_list').addClass('mailpoet_hidden');
         this.$('.mailpoet_automated_latest_content_image_full_width_option').removeClass('mailpoet_hidden');
+        this.$('.mailpoet_automated_latest_content_image_separator').removeClass('mailpoet_hidden');
 
         // Reset titleFormat if it was set to List when switching away from displayType=titleOnly
         if (this.model.get('titleFormat') === 'ul') {
@@ -363,5 +390,10 @@ define([
     });
   });
 
+  App.on('start', function() {
+    App._ALCSupervisor = new Module.ALCSupervisor();
+    App._ALCSupervisor.refresh();
+  });
+
   return Module;
 });

assets/js/src/newsletter_editor/blocks/base.js

@@ -40,6 +40,9 @@ define([
       // Remove stale attributes from resulting JSON object
       return _.omit(SuperModel.prototype.toJSON.call(this), this.stale);
     },
+    getChildren: function() {
+      return [];
+    },
   });
 
   Module.BlockView = AugmentedView.extend({
@@ -77,6 +80,7 @@ define([
           }
         },
       },
+      HighlightEditingBehavior: {},
     },
     templateHelpers: function() {
       return {
@@ -95,12 +99,12 @@ define([
     },
     showTools: function(_event) {
       if (!this.showingToolsDisabled) {
-        this.$('> .mailpoet_tools').show();
+        this.$('> .mailpoet_tools').addClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('showTools');
       }
     },
     hideTools: function(e) {
-      this.$('> .mailpoet_tools').hide();
+      this.$('> .mailpoet_tools').removeClass('mailpoet_display_tools');
       this.toolsView.triggerMethod('hideTools');
     },
     enableShowingTools: function() {
@@ -215,8 +219,12 @@ define([
 
   Module.BlockSettingsView = Marionette.LayoutView.extend({
     className: 'mailpoet_editor_settings',
-    initialize: function() {
-      MailPoet.Modal.panel({
+    behaviors: {
+      ColorPickerBehavior: {},
+    },
+    initialize: function(params) {
+      this.model.trigger('startEditing');
+      var panelParams = {
         element: this.$el,
         template: '',
         position: 'right',
@@ -224,7 +232,13 @@ define([
         onCancel: function() {
           this.destroy();
         }.bind(this),
-      });
+      };
+      this.renderOptions = params.renderOptions || {};
+      if (this.renderOptions.displayFormat === 'subpanel') {
+        MailPoet.Modal.subpanel(panelParams);
+      } else {
+        MailPoet.Modal.panel(panelParams);
+      }
     },
     close: function(event) {
       this.destroy();
@@ -253,6 +267,7 @@ define([
     },
     onBeforeDestroy: function() {
       MailPoet.Modal.close();
+      this.model.trigger('stopEditing');
     },
   });
 

assets/js/src/newsletter_editor/blocks/button.js

@@ -19,7 +19,7 @@ define([
       return this._getDefaults({
         type: 'button',
         text: 'Button',
-        url: 'http://google.com',
+        url: '',
         styles: {
           block: {
             backgroundColor: '#ff0000',
@@ -44,6 +44,9 @@ define([
     className: "mailpoet_block mailpoet_button_block mailpoet_droppable_block",
     getTemplate: function() { return templates.buttonBlock; },
     onDragSubstituteBy: function() { return Module.ButtonWidgetView; },
+    behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
+      ShowSettingsBehavior: {},
+    }),
     initialize: function() {
       base.BlockView.prototype.initialize.apply(this, arguments);
 
@@ -65,8 +68,8 @@ define([
     getTemplate: function() { return templates.buttonBlockSettings; },
     events: function() {
       return {
-        "keyup .mailpoet_field_button_text": _.partial(this.changeField, "text"),
-        "keyup .mailpoet_field_button_url": _.partial(this.changeField, "url"),
+        "input .mailpoet_field_button_text": _.partial(this.changeField, "text"),
+        "input .mailpoet_field_button_url": _.partial(this.changeField, "url"),
         "change .mailpoet_field_button_alignment": _.partial(this.changeField, "styles.block.textAlign"),
         "change .mailpoet_field_button_font_color": _.partial(this.changeColorField, "styles.block.fontColor"),
         "change .mailpoet_field_button_font_family": _.partial(this.changeField, "styles.block.fontFamily"),
@@ -77,45 +80,24 @@ define([
 
         "input .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
         "change .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
-        "change .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
-        "keyup .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        "input .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
 
         "input .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
         "change .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
-        "change .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
-        "keyup .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
+        "input .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
 
         "input .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
         "change .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
-        "change .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
-        "keyup .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
+        "input .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
 
         "input .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
         "change .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
-        "change .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
-        "keyup .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
+        "input .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
 
         "click .mailpoet_field_button_replace_all_styles": "applyToAll",
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
-    initialize: function(params) {
-      var panelParams = {
-        element: this.$el,
-        template: '',
-        position: 'right',
-        width: App.getConfig().get('sidepanelWidth'),
-      };
-      this.renderOptions = params.renderOptions || {};
-      if (this.renderOptions.displayFormat === 'subpanel') {
-        MailPoet.Modal.subpanel(panelParams);
-      } else {
-        MailPoet.Modal.panel(panelParams);
-      }
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

assets/js/src/newsletter_editor/blocks/container.js

@@ -65,6 +65,13 @@ define([
       }
       return response;
     },
+    getChildren: function() {
+      var models = this.get('blocks').map(function(model, index, list) {
+        return [model, model.getChildren()];
+      });
+
+      return _.flatten(models);
+    },
   });
 
   Module.ContainerBlockView = Marionette.CompositeView.extend({
@@ -118,6 +125,7 @@ define([
           return view.renderOptions.depth === 1;
         },
       },
+      HighlightEditingBehavior: {}
     },
     onDragSubstituteBy: function() {
       // For two and three column layouts display their respective widgets,
@@ -178,13 +186,13 @@ define([
     },
     showTools: function() {
       if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
-        this.$(this.ui.tools).show();
+        this.$(this.ui.tools).addClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('showTools');
       }
     },
     hideTools: function() {
       if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
-        this.$(this.ui.tools).hide();
+        this.$(this.ui.tools).removeClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('hideTools');
       }
     },
@@ -286,6 +294,7 @@ define([
     templateHelpers: function() {
       return {
         isRoot: this.renderOptions.depth === 0,
+        emptyContainerMessage: this.renderOptions.emptyContainerMessage || '',
       };
     },
   });
@@ -302,9 +311,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     regions: {
       columnsSettingsRegion: '.mailpoet_container_columns_settings',
     },

assets/js/src/newsletter_editor/blocks/divider.js

@@ -43,6 +43,9 @@ define([
         minLength: 0, // TODO: Move this number to editor configuration
         modelField: 'styles.block.padding',
       },
+      ShowSettingsBehavior: {
+        ignoreFrom: '.mailpoet_resize_handle'
+      },
     }, base.BlockView.prototype.behaviors),
     onDragSubstituteBy: function() { return Module.DividerWidgetView; },
     initialize: function() {
@@ -88,8 +91,7 @@ define([
 
         "input .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
         "change .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
-        "change .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
-        "keyup .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        "input .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
 
         "change .mailpoet_field_divider_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
         "change .mailpoet_field_divider_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
@@ -102,23 +104,6 @@ define([
         'change:styles.block.borderColor': 'repaintDividerStyleOptions',
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
-    initialize: function(params) {
-      var panelParams = {
-        element: this.$el,
-        template: '',
-        position: 'right',
-        width: App.getConfig().get('sidepanelWidth'),
-      };
-      this.renderOptions = params.renderOptions || {};
-      if (this.renderOptions.displayFormat === 'subpanel') {
-        MailPoet.Modal.subpanel(panelParams);
-      } else {
-        MailPoet.Modal.panel(panelParams);
-      }
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

assets/js/src/newsletter_editor/blocks/footer.js

@@ -56,13 +56,15 @@ define([
         inline: true,
 
         menubar: false,
-        toolbar: "bold italic link unlink forecolor mailpoet_custom_fields",
+        toolbar: "bold italic link unlink forecolor mailpoet_shortcodes",
 
         valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
         invalid_elements: "script",
         block_formats: 'Paragraph=p',
+        relative_urls: false,
+        remove_script_host: false,
 
-        plugins: "link textcolor colorpicker mailpoet_custom_fields",
+        plugins: "link textcolor colorpicker mailpoet_shortcodes",
 
         setup: function(editor) {
           editor.on('change', function(e) {
@@ -78,8 +80,8 @@ define([
           });
         },
 
-        mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-        mailpoet_custom_fields_window_title: MailPoet.I18n.t('customFieldsWindowTitle'),
+        mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
+        mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
       });
     },
   });
@@ -104,9 +106,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

assets/js/src/newsletter_editor/blocks/header.js

@@ -56,13 +56,15 @@ define([
         inline: true,
 
         menubar: false,
-        toolbar: "bold italic link unlink forecolor mailpoet_custom_fields",
+        toolbar: "bold italic link unlink forecolor mailpoet_shortcodes",
 
         valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
         invalid_elements: "script",
         block_formats: 'Paragraph=p',
+        relative_urls: false,
+        remove_script_host: false,
 
-        plugins: "link textcolor colorpicker mailpoet_custom_fields",
+        plugins: "link textcolor colorpicker mailpoet_shortcodes",
 
         setup: function(editor) {
           editor.on('change', function(e) {
@@ -78,8 +80,8 @@ define([
           });
         },
 
-        mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-        mailpoet_custom_fields_window_title: MailPoet.I18n.t('customFieldsWindowTitle'),
+        mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
+        mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
       });
     },
   });
@@ -104,9 +106,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

assets/js/src/newsletter_editor/blocks/image.js

@@ -17,8 +17,8 @@ define([
     defaults: function() {
       return this._getDefaults({
         type: 'image',
-        link: 'http://example.org',
-        src: 'no-image.png',
+        link: '',
+        src: '',
         alt: 'An image of...',
         fullWidth: true, // true | false
         width: '64px',
@@ -41,6 +41,9 @@ define([
         imageMissingSrc: App.getConfig().get('urls.imageMissing'),
       }, base.BlockView.prototype.templateHelpers.apply(this));
     },
+    behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
+      ShowSettingsBehavior: {},
+    }),
     onRender: function() {
       this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
       this.toolsRegion.show(this.toolsView);
@@ -61,9 +64,9 @@ define([
     getTemplate: function() { return templates.imageBlockSettings; },
     events: function() {
       return {
-        "keyup .mailpoet_field_image_link": _.partial(this.changeField, "link"),
-        "keyup .mailpoet_field_image_address": _.partial(this.changeField, "src"),
-        "keyup .mailpoet_field_image_alt_text": _.partial(this.changeField, "alt"),
+        "input .mailpoet_field_image_link": _.partial(this.changeField, "link"),
+        "input .mailpoet_field_image_address": _.partial(this.changeField, "src"),
+        "input .mailpoet_field_image_alt_text": _.partial(this.changeField, "alt"),
         "change .mailpoet_field_image_full_width": _.partial(this.changeBoolCheckboxField, "fullWidth"),
         "change .mailpoet_field_image_alignment": _.partial(this.changeField, "styles.block.textAlign"),
         "click .mailpoet_field_image_select_another_image": "showMediaManager",

assets/js/src/newsletter_editor/blocks/posts.js

@@ -23,7 +23,19 @@ define([
     'newsletter_editor/blocks/button',
     'newsletter_editor/blocks/divider',
     'select2'
-  ], function(Backbone, Marionette, Radio, _, jQuery, MailPoet, App, CommunicationComponent, BaseBlock, ButtonBlock, DividerBlock) {
+  ], function(
+    Backbone,
+    Marionette,
+    Radio,
+    _,
+    jQuery,
+    MailPoet,
+    App,
+    CommunicationComponent,
+    BaseBlock,
+    ButtonBlock,
+    DividerBlock
+  ) {
 
   "use strict";
 
@@ -163,6 +175,7 @@ define([
         renderOptions = {
           disableTextEditor: true,
           disableDragAndDrop: true,
+          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
         };
       this.postsRegion.show(new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions }));
     },
@@ -195,6 +208,7 @@ define([
       };
     },
     initialize: function() {
+      this.model.trigger('startEditing');
       this.selectionView = new PostSelectionSettingsView({ model: this.model });
       this.displayOptionsView = new PostsDisplayOptionsSettingsView({ model: this.model });
     },
@@ -202,21 +216,23 @@ define([
       var that = this,
         blockView = this.model.request('blockView');
 
-      this.selectionRegion.show(this.selectionView);
-      this.displayOptionsRegion.show(this.displayOptionsView);
+      this.showChildView('selectionRegion', this.selectionView);
+      this.showChildView('displayOptionsRegion', this.displayOptionsView);
 
       MailPoet.Modal.panel({
         element: this.$el,
         template: '',
         position: 'right',
-        overlay: true,
-        highlight: blockView.$el,
         width: App.getConfig().get('sidepanelWidth'),
         onCancel: function() {
           // Self destroy the block if the user closes settings modal
           that.model.destroy();
         },
       });
+
+      // Inform child views that they have been attached to document
+      this.selectionView.triggerMethod('attach');
+      this.displayOptionsView.triggerMethod('attach');
     },
     switchToDisplayOptions: function() {
       // Switch content view
@@ -257,7 +273,7 @@ define([
       return {
         'change .mailpoet_settings_posts_content_type': _.partial(this.changeField, 'contentType'),
         'change .mailpoet_posts_post_status': _.partial(this.changeField, 'postStatus'),
-        'keyup .mailpoet_posts_search_term': _.partial(this.changeField, 'search'),
+        'input .mailpoet_posts_search_term': _.partial(this.changeField, 'search'),
       };
     },
     constructor: function() {
@@ -266,14 +282,19 @@ define([
       Marionette.CompositeView.apply(this, arguments);
     },
     onRender: function() {
+      // Dynamically update available post types
+      CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
+    },
+    onAttach: function() {
       var that = this;
 
       // Dynamically update available post types
-      CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
+      //CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
 
       this.$('.mailpoet_posts_categories_and_tags').select2({
         multiple: true,
         allowClear: true,
+        placeholder: MailPoet.I18n.t('categoriesAndTags'),
         ajax: {
           data: function (params) {
             return {
@@ -281,8 +302,10 @@ define([
             };
           },
           transport: function(options, success, failure) {
-            var taxonomies,
-                promise = CommunicationComponent.getTaxonomies(that.model.get('contentType')).then(function(tax) {
+            var taxonomies;
+            var promise = CommunicationComponent.getTaxonomies(
+              that.model.get('contentType')
+            ).then(function(tax) {
               taxonomies = tax;
               // Fetch available terms based on the list of taxonomies already fetched
               var promise = CommunicationComponent.getTerms({
@@ -291,7 +314,7 @@ define([
               }).then(function(terms) {
                 return {
                   taxonomies: taxonomies,
-                  terms: terms,
+                  terms: terms
                 };
               });
               return promise;
@@ -391,23 +414,20 @@ define([
         "change .mailpoet_posts_title_format": 'changeTitleFormat',
         "change .mailpoet_posts_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
         "change .mailpoet_posts_show_divider": _.partial(this.changeBoolField, 'showDivider'),
-        "keyup .mailpoet_posts_show_amount": _.partial(this.changeField, "amount"),
+        "input .mailpoet_posts_show_amount": _.partial(this.changeField, "amount"),
         "change .mailpoet_posts_content_type": _.partial(this.changeField, "contentType"),
         "change .mailpoet_posts_include_or_exclude": _.partial(this.changeField, "inclusionType"),
         "change .mailpoet_posts_title_alignment": _.partial(this.changeField, "titleAlignment"),
         "change .mailpoet_posts_image_full_width": _.partial(this.changeBoolField, "imageFullWidth"),
         "change .mailpoet_posts_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
         "change .mailpoet_posts_show_author": _.partial(this.changeField, "showAuthor"),
-        "keyup .mailpoet_posts_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
+        "input .mailpoet_posts_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
         "change .mailpoet_posts_show_categories": _.partial(this.changeField, "showCategories"),
-        "keyup .mailpoet_posts_categories": _.partial(this.changeField, "categoriesPrecededBy"),
-        "keyup .mailpoet_posts_read_more_text": _.partial(this.changeField, "readMoreText"),
+        "input .mailpoet_posts_categories": _.partial(this.changeField, "categoriesPrecededBy"),
+        "input .mailpoet_posts_read_more_text": _.partial(this.changeField, "readMoreText"),
         "change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy"),
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),
@@ -450,9 +470,11 @@ define([
       if (value == 'titleOnly') {
         this.$('.mailpoet_posts_title_as_list').removeClass('mailpoet_hidden');
         this.$('.mailpoet_posts_image_full_width_option').addClass('mailpoet_hidden');
+        this.$('.mailpoet_posts_image_separator').addClass('mailpoet_hidden');
       } else {
         this.$('.mailpoet_posts_title_as_list').addClass('mailpoet_hidden');
         this.$('.mailpoet_posts_image_full_width_option').removeClass('mailpoet_hidden');
+        this.$('.mailpoet_posts_image_separator').removeClass('mailpoet_hidden');
 
         // Reset titleFormat if it was set to List when switching away from displayType=titleOnly
         if (this.model.get('titleFormat') === 'ul') {

assets/js/src/newsletter_editor/blocks/social.js

@@ -93,6 +93,7 @@ define([
       return {
         model: this.model.toJSON(),
         allIconSets: allIconSets.toJSON(),
+        imageMissingSrc: App.getConfig().get('urls.imageMissing'),
       };
     },
   });
@@ -139,6 +140,8 @@ define([
           }
         },
       },
+      HighlightEditingBehavior: {},
+      ShowSettingsBehavior: {},
     },
     onDragSubstituteBy: function() { return Module.SocialWidgetView; },
     constructor: function() {
@@ -147,6 +150,7 @@ define([
       Marionette.CompositeView.apply(this, arguments);
     },
     initialize: function() {
+      this.on('showSettings', this.showSettings, this);
       this.on('dom:refresh', this.showBlock, this);
       this._isFirstRender = true;
     },
@@ -167,13 +171,16 @@ define([
       this.regionManager.destroy();
     },
     showTools: function(_event) {
-      this.$(this.ui.tools).show();
+      this.$(this.ui.tools).addClass('mailpoet_display_tools');
       _event.stopPropagation();
     },
     hideTools: function(_event) {
-      this.$(this.ui.tools).hide();
+      this.$(this.ui.tools).removeClass('mailpoet_display_tools');
       _event.stopPropagation();
     },
+    showSettings: function(options) {
+      this.toolsView.triggerMethod('showSettings', options);
+    },
     getDropFunc: function() {
       return function() {
         return this.model.clone();
@@ -273,9 +280,9 @@ define([
       return {
         "click .mailpoet_delete_block": "deleteIcon",
         "change .mailpoet_social_icon_field_type": _.partial(this.changeField, "iconType"),
-        "keyup .mailpoet_social_icon_field_image": _.partial(this.changeField, "image"),
-        "keyup .mailpoet_social_icon_field_link": this.changeLink,
-        "keyup .mailpoet_social_icon_field_text": _.partial(this.changeField, "text"),
+        "input .mailpoet_social_icon_field_image": _.partial(this.changeField, "image"),
+        "input .mailpoet_social_icon_field_link": this.changeLink,
+        "input .mailpoet_social_icon_field_text": _.partial(this.changeField, "text"),
       };
     },
     modelEvents: {
@@ -382,7 +389,7 @@ define([
               {
                 type: 'socialIcon',
                 iconType: 'facebook',
-                link: 'http://example.com',
+                link: 'http://www.facebook.com',
                 image: App.getAvailableStyles().get('socialIconSets.default.facebook'),
                 height: '32px',
                 width: '32px',
@@ -391,7 +398,7 @@ define([
               {
                 type: 'socialIcon',
                 iconType: 'twitter',
-                link: 'http://example.com',
+                link: 'http://www.twitter.com',
                 image: App.getAvailableStyles().get('socialIconSets.default.twitter'),
                 height: '32px',
                 width: '32px',

assets/js/src/newsletter_editor/blocks/spacer.js

@@ -36,6 +36,9 @@ define([
         minLength: 20, // TODO: Move this number to editor configuration
         modelField: 'styles.block.height',
       },
+      ShowSettingsBehavior: {
+        ignoreFrom: '.mailpoet_resize_handle'
+      },
     }, base.BlockView.prototype.behaviors),
     modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
     onDragSubstituteBy: function() { return Module.SpacerWidgetView; },
@@ -70,9 +73,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
   });
 
   Module.SpacerWidgetView = base.WidgetView.extend({

assets/js/src/newsletter_editor/blocks/text.js

@@ -53,14 +53,16 @@ define([
 
           menubar: false,
           toolbar1: "formatselect bold italic forecolor | link unlink",
-          toolbar2: "alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_custom_fields",
+          toolbar2: "alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_shortcodes",
 
           //forced_root_block: 'p',
           valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],h1[class|style],h2[class|style],h3[class|style],ol[class|style],ul[class|style],li[class|style],strong[class|style],em[class|style],strike,br,blockquote[class|style],table[class|style],tr[class|style],th[class|style],td[class|style]",
           invalid_elements: "script",
           block_formats: 'Heading 1=h1;Heading 2=h2;Heading 3=h3;Paragraph=p',
+          relative_urls: false,
+          remove_script_host: false,
 
-          plugins: "link code textcolor colorpicker mailpoet_custom_fields",
+          plugins: "link code textcolor colorpicker mailpoet_shortcodes",
 
           setup: function(editor) {
             editor.on('change', function(e) {
@@ -76,8 +78,8 @@ define([
             });
           },
 
-          mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-          mailpoet_custom_fields_window_title: MailPoet.I18n.t('customFieldsWindowTitle'),
+          mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
+          mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
         });
       }
     },

assets/js/src/newsletter_editor/components/communication.js

@@ -27,8 +27,8 @@ define([
     return Module._cachedQuery({
       action: 'getPostTypes',
       options: {},
-    }).then(function(types) {
-      return _.values(types);
+    }).then(function(response) {
+      return _.values(response.data);
     });
   };
 
@@ -36,29 +36,46 @@ define([
     return Module._cachedQuery({
       action: 'getTaxonomies',
       options: {
-        postType: postType,
-      },
+        postType: postType
+      }
+    }).then(function(response) {
+      return response.data;
     });
   };
 
   Module.getTerms = function(options) {
     return Module._cachedQuery({
       action: 'getTerms',
-      options: options,
+      options: options
+    }).then(function(response) {
+      return response.data;
     });
   };
 
   Module.getPosts = function(options) {
     return Module._cachedQuery({
       action: 'getPosts',
-      options: options,
+      options: options
+    }).then(function(response) {
+      return response.data;
     });
   };
 
   Module.getTransformedPosts = function(options) {
     return Module._cachedQuery({
       action: 'getTransformedPosts',
-      options: options,
+      options: options
+    }).then(function(response) {
+      return response.data;
+    });
+  };
+
+  Module.getBulkTransformedPosts = function(options) {
+    return Module._query({
+      action: 'getBulkTransformedPosts',
+      options: options
+    }).then(function(response) {
+      return response.data;
     });
   };
 

assets/js/src/newsletter_editor/components/content.js

@@ -60,6 +60,11 @@ define([
       return Module.newsletter;
   };
 
+  Module.findModels = function(predicate) {
+    var blocks = App._contentContainer.getChildren();
+    return _.filter(blocks, predicate);
+  };
+
   App.on('before:start', function(options) {
     // Expose block methods globally
     App.registerBlockType = Module.registerBlockType;
@@ -68,6 +73,7 @@ define([
     App.toJSON = Module.toJSON;
     App.getBody = Module.getBody;
     App.getNewsletter = Module.getNewsletter;
+    App.findModels = Module.findModels;
 
     Module.newsletter = new Module.NewsletterModel(_.omit(_.clone(options.newsletter), ['body']));
   });

assets/js/src/newsletter_editor/components/save.js

@@ -104,7 +104,7 @@ define([
       return MailPoet.Ajax.post({
         endpoint: 'newsletterTemplates',
         action: 'save',
-        data: data,
+        data: data
       });
     });
 
@@ -283,8 +283,10 @@ define([
         return;
       }
 
+      var contents = JSON.stringify(jsonObject);
       if (App.getConfig().get('validation.validateUnsubscribeLinkPresent') &&
-          JSON.stringify(jsonObject).indexOf("[link:subscription_unsubscribe_url]") < 0) {
+          contents.indexOf("[link:subscription_unsubscribe_url]") < 0 &&
+          contents.indexOf("[link:subscription_unsubscribe]") < 0) {
         this.showValidationError(MailPoet.I18n.t('unsubscribeLinkMissing'));
         return;
       }

assets/js/src/newsletter_editor/components/sidebar.js

@@ -65,10 +65,6 @@ define([
         var $openRegion = this.$el.find('.mailpoet_sidebar_region:not(.closed)'),
           $targetRegion = this.$el.find(event.target).closest('.mailpoet_sidebar_region');
 
-        if ($openRegion.get(0) === $targetRegion.get(0)) {
-          return;
-        }
-
         $openRegion.find('.mailpoet_region_content').velocity(
           'slideUp',
           {
@@ -79,16 +75,19 @@ define([
             }.bind(this)
           }
         );
-        $targetRegion.find('.mailpoet_region_content').velocity(
-          'slideDown',
-          {
-            duration: 250,
-            easing: "easeIn",
-            complete: function() {
-              $targetRegion.removeClass('closed');
-            },
-          }
-        );
+
+        if ($openRegion.get(0) !== $targetRegion.get(0)) {
+          $targetRegion.find('.mailpoet_region_content').velocity(
+            'slideDown',
+            {
+              duration: 250,
+              easing: "easeIn",
+              complete: function() {
+                $targetRegion.removeClass('closed');
+              },
+            }
+          );
+        }
       },
     },
     initialize: function(options) {
@@ -233,6 +232,12 @@ define([
       'click .mailpoet_show_preview': 'showPreview',
       'click #mailpoet_send_preview': 'sendPreview',
     },
+    onBeforeDestroy: function() {
+      if (this.previewView) {
+        this.previewView.destroy();
+        this.previewView = null;
+      }
+    },
     showPreview: function() {
       var json = App.toJSON();
 
@@ -247,18 +252,32 @@ define([
         endpoint: 'newsletters',
         action: 'showPreview',
         data: json,
-      }).done(function(response){
-        MailPoet.Modal.loading(false);
-
+      }).done(function(response) {
         if (response.result === true) {
-          window.open(response.data.url, '_blank')
+          this.previewView = new Module.NewsletterPreviewView({
+            previewUrl: response.data.url
+          });
+
+          var view = this.previewView.render();
+
+          MailPoet.Modal.popup({
+            template: '',
+            element: this.previewView.$el,
+            title: MailPoet.I18n.t('newsletterPreview'),
+            onCancel: function() {
+              this.previewView.destroy();
+              this.previewView = null;
+            }.bind(this)
+          });
+        } else {
+          MailPoet.Notice.error(response.errors);
         }
-        MailPoet.Notice.error(response.errors);
-      }).fail(function(error) {
-        MailPoet.Modal.loading(false);
+      }.bind(this)).fail(function(error) {
         MailPoet.Notice.error(
           MailPoet.I18n.t('newsletterPreviewFailed')
         );
+      }).always(function() {
+        MailPoet.Modal.loading(false);
       });
     },
     sendPreview: function() {
@@ -309,6 +328,22 @@ define([
     },
   });
 
+  Module.NewsletterPreviewView = Marionette.ItemView.extend({
+    getTemplate: function() { return templates.newsletterPreview; },
+    initialize: function(options) {
+      this.previewUrl = options.previewUrl;
+      this.width = App.getConfig().get('newsletterPreview.width');
+      this.height = App.getConfig().get('newsletterPreview.height')
+    },
+    templateHelpers: function() {
+      return {
+        previewUrl: this.previewUrl,
+        width: this.width,
+        height: this.height,
+      };
+    }
+  });
+
   App.on('before:start', function(options) {
     App.registerWidget = Module.registerWidget;
     App.getWidgets = Module.getWidgets;

assets/js/src/newsletter_editor/tinymce/mailpoet_custom_fields/plugin.js

@@ -1,58 +0,0 @@
-/**
- * wysija_custom_fields/plugin.js
- *
- * TinyMCE plugin for adding dynamic data placeholders to newsletters.
- *
- * This adds a button to the editor toolbar which displays a modal window of
- * available dynamic data placeholder buttons. On click each button inserts
- * its placeholder into editor text.
- */
-
-/*jshint unused:false */
-/*global tinymce:true */
-tinymce.PluginManager.add('mailpoet_custom_fields', function(editor, url) {
-  var appendLabelAndClose = function(text) {
-      editor.insertContent('[' + text + ']');
-      editor.windowManager.close();
-    },
-    generateOnClickFunc = function(id) {
-      return function() {
-        appendLabelAndClose(id);
-      };
-    };
-
-  editor.addButton('mailpoet_custom_fields', {
-    icon: 'mailpoet_custom_fields',
-    onclick: function() {
-      var customFields = [],
-        configCustomFields = editor.settings.mailpoet_custom_fields;
-
-      for (var segment in configCustomFields) {
-        if (configCustomFields.hasOwnProperty(segment)) {
-          customFields.push({
-            type: 'label',
-            text: segment,
-          });
-
-          for (var i = 0; i < configCustomFields[segment].length; i += 1) {
-            customFields.push({
-              type: 'button',
-              text: configCustomFields[segment][i].text,
-              onClick: generateOnClickFunc(configCustomFields[segment][i].shortcode)
-            });
-          }
-        }
-      }
-
-      // Open window
-      editor.windowManager.open({
-        height: parseInt(editor.getParam("plugin_mailpoet_custom_fields_height", 400)),
-        width: parseInt(editor.getParam("plugin_mailpoet_custom_fields_width", 450)),
-        autoScroll: true,
-        title: editor.settings.mailpoet_custom_fields_window_title,
-        body: customFields,
-        buttons: [],
-      });
-    },
-  });
-});

assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes/plugin.js

@@ -0,0 +1,58 @@
+/**
+ * wysija_shortcodes/plugin.js
+ *
+ * TinyMCE plugin for adding dynamic data placeholders to newsletters.
+ *
+ * This adds a button to the editor toolbar which displays a modal window of
+ * available dynamic data placeholder buttons. On click each button inserts
+ * its placeholder into editor text.
+ */
+
+/*jshint unused:false */
+/*global tinymce:true */
+tinymce.PluginManager.add('mailpoet_shortcodes', function(editor, url) {
+  var appendLabelAndClose = function(text) {
+      editor.insertContent('[' + text + ']');
+      editor.windowManager.close();
+    },
+    generateOnClickFunc = function(id) {
+      return function() {
+        appendLabelAndClose(id);
+      };
+    };
+
+  editor.addButton('mailpoet_shortcodes', {
+    icon: 'mailpoet_shortcodes',
+    onclick: function() {
+      var shortcodes = [],
+        configShortcodes = editor.settings.mailpoet_shortcodes;
+
+      for (var segment in configShortcodes) {
+        if (configShortcodes.hasOwnProperty(segment)) {
+          shortcodes.push({
+            type: 'label',
+            text: segment,
+          });
+
+          for (var i = 0; i < configShortcodes[segment].length; i += 1) {
+            shortcodes.push({
+              type: 'button',
+              text: configShortcodes[segment][i].text,
+              onClick: generateOnClickFunc(configShortcodes[segment][i].shortcode)
+            });
+          }
+        }
+      }
+
+      // Open window
+      editor.windowManager.open({
+        height: parseInt(editor.getParam("plugin_mailpoet_shortcodes_height", 400)),
+        width: parseInt(editor.getParam("plugin_mailpoet_shortcodes_width", 450)),
+        autoScroll: true,
+        title: editor.settings.mailpoet_shortcodes_window_title,
+        body: shortcodes,
+        buttons: [],
+      });
+    },
+  });
+});

assets/js/src/newsletters/list.jsx

@@ -1,311 +0,0 @@
-define(
-  [
-    'react',
-    'react-router',
-    'listing/listing.jsx',
-    'classnames',
-    'jquery',
-    'mailpoet'
-  ],
-  function(
-    React,
-    Router,
-    Listing,
-    classNames,
-    jQuery,
-    MailPoet
-  ) {
-    var Link = Router.Link;
-
-    var columns = [
-      {
-        name: 'subject',
-        label: MailPoet.I18n.t('subject'),
-        sortable: true
-      },
-      {
-        name: 'status',
-        label: MailPoet.I18n.t('status')
-      },
-      {
-        name: 'segments',
-        label: MailPoet.I18n.t('lists')
-      },
-      {
-        name: 'statistics',
-        label: MailPoet.I18n.t('statistics')
-      },
-      {
-        name: 'created_at',
-        label: MailPoet.I18n.t('createdOn'),
-        sortable: true
-      },
-      {
-        name: 'updated_at',
-        label: MailPoet.I18n.t('lastModifiedOn'),
-        sortable: true
-      }
-    ];
-
-    var messages = {
-      onTrash: function(response) {
-        var count = ~~response;
-        var message = null;
-
-        if(count === 1) {
-          message = (
-            MailPoet.I18n.t('oneNewsletterTrashed')
-          );
-        } else {
-          message = (
-            MailPoet.I18n.t('multipleNewslettersTrashed')
-          ).replace('%$1d', count);
-        }
-        MailPoet.Notice.success(message);
-      },
-      onDelete: function(response) {
-        var count = ~~response;
-        var message = null;
-
-        if(count === 1) {
-          message = (
-            MailPoet.I18n.t('oneNewsletterDeleted')
-          );
-        } else {
-          message = (
-            MailPoet.I18n.t('multipleNewslettersDeleted')
-          ).replace('%$1d', count);
-        }
-        MailPoet.Notice.success(message);
-      },
-      onRestore: function(response) {
-        var count = ~~response;
-        var message = null;
-
-        if(count === 1) {
-          message = (
-            MailPoet.I18n.t('oneNewsletterRestored')
-          );
-        } else {
-          message = (
-            MailPoet.I18n.t('multipleNewslettersRestored')
-          ).replace('%$1d', count);
-        }
-        MailPoet.Notice.success(message);
-      }
-    };
-
-    var bulk_actions = [
-      {
-        name: 'trash',
-        label: MailPoet.I18n.t('trash'),
-        onSuccess: messages.onTrash
-      }
-    ];
-
-    var item_actions = [
-      {
-        name: 'edit',
-        link: function(item) {
-          return (
-            <a href={ `?page=mailpoet-newsletter-editor&id=${ item.id }` }>
-              {MailPoet.I18n.t('edit')}
-            </a>
-          );
-        }
-      },
-      {
-        name: 'trash'
-      }
-    ];
-
-    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) {
-          return (
-            <span>{MailPoet.I18n.t('notSentYet')}</span>
-          );
-        } else {
-          if (item.queue.status === 'scheduled') {
-            return (
-              <span>{MailPoet.I18n.t('scheduledFor')}  { MailPoet.Date.format(item.queue.scheduled_at) } </span>
-            )
-          }
-          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>
-                {
-                  MailPoet.I18n.t('newsletterQueueCompleted')
-                  .replace("%$1d", item.queue.count_processed - item.queue.count_failed)
-                  .replace("%$2d", 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) }
-                >{MailPoet.I18n.t('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) }
-                >{MailPoet.I18n.t('pause')}</a>
-              </span>
-            );
-          }
-
-          return (
-            <div>
-              <div className={ progressClasses }>
-                  <span
-                    className="mailpoet_progress_bar"
-                    style={ { width: percentage + "%"} }
-                  ></span>
-                  <span className="mailpoet_progress_label">
-                    { percentage + "%" }
-                  </span>
-              </div>
-              <p style={{ textAlign:'center' }}>
-                { label }
-              </p>
-            </div>
-          );
-        }
-      },
-      renderStatistics: function(item) {
-        if(!item.statistics || !item.queue || item.queue.count_processed == 0 || item.queue.status === 'scheduled') {
-          return (
-            <span>
-              {MailPoet.I18n.t('notSentYet')}
-            </span>
-          );
-        }
-
-        var percentage_clicked = Math.round(
-          (item.statistics.clicked * 100) / (item.queue.count_processed)
-        );
-        var percentage_opened = Math.round(
-          (item.statistics.opened * 100) / (item.queue.count_processed)
-        );
-        var percentage_unsubscribed = Math.round(
-          (item.statistics.unsubscribed * 100) / (item.queue.count_processed)
-        );
-
-        return (
-          <span>
-            { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
-          </span>
-        );
-      },
-      renderItem: function(newsletter, actions) {
-        var rowClasses = classNames(
-          'manage-column',
-          'column-primary',
-          'has-row-actions'
-        );
-
-        var segments = newsletter.segments.map(function(segment) {
-          return segment.name
-        }).join(', ');
-
-        var statistics_column =
-          (!mailpoet_settings.tracking || !mailpoet_settings.tracking.enabled) ?
-            false :
-            <td className="column {statistics_class}" data-colname={ MailPoet.I18n.t('statistics') }>
-              { this.renderStatistics(newsletter) }
-            </td>;
-
-        return (
-          <div>
-            <td className={ rowClasses }>
-              <strong>
-                <a>{ newsletter.subject }</a>
-              </strong>
-              { actions }
-            </td>
-            <td className="column" data-colname={ MailPoet.I18n.t('status') }>
-              { this.renderStatus(newsletter) }
-            </td>
-            <td className="column" data-colname={ MailPoet.I18n.t('lists') }>
-              { segments }
-            </td>
-            { statistics_column }
-            <td className="column-date" data-colname={ MailPoet.I18n.t('createdOn') }>
-              <abbr>{ MailPoet.Date.format(newsletter.created_at) }</abbr>
-            </td>
-            <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
-              <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
-            </td>
-          </div>
-        );
-      },
-      render: function() {
-        if (!mailpoet_settings.tracking || !mailpoet_settings.tracking.enabled) {
-          columns = _.without(columns, _.findWhere(columns, {name: 'statistics'}));
-        }
-        return (
-          <div>
-            <h1 className="title">
-              {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
-            </h1>
-
-            <Listing
-              limit={ mailpoet_listing_per_page }
-              params={ this.props.params }
-              endpoint="newsletters"
-              onRenderItem={this.renderItem}
-              columns={columns}
-              bulk_actions={ bulk_actions }
-              item_actions={ item_actions }
-              messages={ messages }
-              auto_refresh={ true } />
-          </div>
-        );
-      }
-    });
-
-    return NewsletterList;
-  }
-);

assets/js/src/newsletters/listings/mixins.jsx

@@ -0,0 +1,170 @@
+import React from 'react'
+import MailPoet from 'mailpoet'
+import classNames from 'classnames'
+import jQuery from 'jquery'
+
+const _QueueMixin = {
+  pauseSending: function(newsletter) {
+    MailPoet.Ajax.post({
+      endpoint: 'sendingQueue',
+      action: 'pause',
+      data: {
+        newsletter_id: newsletter.id
+      }
+    }).done(function() {
+      jQuery('#resume_'+newsletter.id).show();
+      jQuery('#pause_'+newsletter.id).hide();
+    }).fail((response) => {
+      if (response.errors.length > 0) {
+        MailPoet.Notice.error(
+          response.errors.map(function(error) { return error.message; }),
+          { scroll: true }
+        );
+      }
+    });
+  },
+  resumeSending: function(newsletter) {
+    MailPoet.Ajax.post({
+      endpoint: 'sendingQueue',
+      action: 'resume',
+      data: {
+        newsletter_id: newsletter.id
+      }
+    }).done(function() {
+      jQuery('#pause_'+newsletter.id).show();
+      jQuery('#resume_'+newsletter.id).hide();
+    }).fail((response) => {
+      if (response.errors.length > 0) {
+        MailPoet.Notice.error(
+          response.errors.map(function(error) { return error.message; }),
+          { scroll: true }
+        );
+      }
+    });
+  },
+  renderQueueStatus: function(newsletter) {
+    if (!newsletter.queue) {
+      return (
+        <span>{MailPoet.I18n.t('notSentYet')}</span>
+      );
+    } else {
+      if (newsletter.queue.status === 'scheduled') {
+        return (
+          <span>
+            { MailPoet.I18n.t('scheduledFor') } { MailPoet.Date.format(newsletter.queue.scheduled_at) }
+          </span>
+        )
+      }
+      const progressClasses = classNames(
+        'mailpoet_progress',
+        { 'mailpoet_progress_complete': newsletter.queue.status === 'completed'}
+      );
+
+      // calculate percentage done
+      const percentage = Math.round(
+        (newsletter.queue.count_processed * 100) / (newsletter.queue.count_total)
+      );
+
+      let label;
+
+      if (newsletter.queue.status === 'completed') {
+        label = (
+          <span>
+            {
+              MailPoet.I18n.t('newsletterQueueCompleted')
+              .replace(
+                "%$1d",
+                newsletter.queue.count_processed - newsletter.queue.count_failed
+              )
+              .replace(
+                "%$2d",
+                newsletter.queue.count_total
+              )
+            }
+          </span>
+        );
+      } else {
+        label = (
+          <span>
+            { newsletter.queue.count_processed } / { newsletter.queue.count_total }
+            &nbsp;&nbsp;
+            <a
+              id={ 'resume_'+newsletter.id }
+              className="button"
+              style={{ display: (newsletter.queue.status === 'paused')
+                ? 'inline-block': 'none' }}
+              href="javascript:;"
+              onClick={ this.resumeSending.bind(null, newsletter) }
+            >{MailPoet.I18n.t('resume')}</a>
+            <a
+              id={ 'pause_'+newsletter.id }
+              className="button mailpoet_pause"
+              style={{ display: (newsletter.queue.status === null)
+                  ? 'inline-block': 'none' }}
+              href="javascript:;"
+              onClick={ this.pauseSending.bind(null, newsletter) }
+            >{MailPoet.I18n.t('pause')}</a>
+          </span>
+        );
+      }
+
+      return (
+        <div>
+          <div className={ progressClasses }>
+              <span
+                className="mailpoet_progress_bar"
+                style={ { width: percentage + "%"} }
+              ></span>
+              <span className="mailpoet_progress_label">
+                { percentage + "%" }
+              </span>
+          </div>
+          <p style={{ textAlign:'center' }}>
+            { label }
+          </p>
+        </div>
+      );
+    }
+  },
+};
+
+const _StatisticsMixin = {
+  renderStatistics: function(newsletter) {
+    if (
+      newsletter.statistics
+      && newsletter.queue
+      && newsletter.queue.status !== 'scheduled'
+    ) {
+      const total_sent = ~~(newsletter.queue.count_processed);
+
+      let percentage_clicked = 0;
+      let percentage_opened = 0;
+      let percentage_unsubscribed = 0;
+
+      if (total_sent > 0) {
+        percentage_clicked = Math.round(
+          (~~(newsletter.statistics.clicked) * 100) / total_sent
+        );
+        percentage_opened = Math.round(
+          (~~(newsletter.statistics.opened) * 100) / total_sent
+        );
+        percentage_unsubscribed = Math.round(
+          (~~(newsletter.statistics.unsubscribed) * 100) / total_sent
+        );
+      }
+
+      return (
+        <span>
+          { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
+        </span>
+      );
+    } else {
+      return (
+        <span>{MailPoet.I18n.t('notSentYet')}</span>
+      );
+    }
+  }
+}
+
+export { _QueueMixin as QueueMixin };
+export { _StatisticsMixin as StatisticsMixin };

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

@@ -0,0 +1,330 @@
+import React from 'react'
+import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
+import { createHashHistory } from 'history'
+
+import Listing from 'listing/listing.jsx'
+import ListingTabs from 'newsletters/listings/tabs.jsx'
+
+import classNames from 'classnames'
+import jQuery from 'jquery'
+import MailPoet from 'mailpoet'
+
+import {
+  timeOfDayValues,
+  weekDayValues,
+  monthDayValues,
+  nthWeekDayValues
+} from 'newsletters/scheduling/common.jsx'
+
+const messages = {
+  onTrash(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterTrashed')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersTrashed')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onDelete(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterDeleted')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersDeleted')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onRestore(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterRestored')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersRestored')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  }
+};
+
+const columns = [
+  {
+    name: 'subject',
+    label: MailPoet.I18n.t('subject'),
+    sortable: true
+  },
+  {
+    name: 'status',
+    label: MailPoet.I18n.t('status'),
+    width: 100
+  },
+  {
+    name: 'settings',
+    label: MailPoet.I18n.t('settings')
+  },
+  {
+    name: 'history',
+    label: MailPoet.I18n.t('history'),
+    width: 100
+  },
+  {
+    name: 'updated_at',
+    label: MailPoet.I18n.t('lastModifiedOn'),
+    sortable: true
+  }
+];
+
+const bulk_actions = [
+  {
+    name: 'trash',
+    label: MailPoet.I18n.t('trash'),
+    onSuccess: messages.onTrash
+  }
+];
+
+const newsletter_actions = [
+  {
+    name: 'view',
+    link: function(newsletter) {
+      return (
+        <a href={ newsletter.preview_url } target="_blank">
+          {MailPoet.I18n.t('preview')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'edit',
+    link: function(newsletter) {
+      return (
+        <a href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }>
+          {MailPoet.I18n.t('edit')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'duplicate',
+    label: MailPoet.I18n.t('duplicate'),
+    onClick: function(newsletter, refresh) {
+      return MailPoet.Ajax.post({
+        endpoint: 'newsletters',
+        action: 'duplicate',
+        data: newsletter.id
+      }).done(function(response) {
+        if (response !== false && response.subject !== undefined) {
+          MailPoet.Notice.success(
+            (MailPoet.I18n.t('newsletterDuplicated')).replace(
+              '%$1s', response.subject
+            )
+          );
+        }
+        refresh();
+      });
+    }
+  },
+  {
+    name: 'trash'
+  }
+];
+
+const NewsletterListNotification = React.createClass({
+  updateStatus: function(e) {
+    // make the event persist so that we can still override the selected value
+    // in the ajax callback
+    e.persist();
+
+    MailPoet.Ajax.post({
+      endpoint: 'newsletters',
+      action: 'setStatus',
+      data: {
+        id: ~~(e.target.getAttribute('data-id')),
+        status: e.target.value
+      }
+    }).done((response) => {
+      if (response.data.status === 'active') {
+        MailPoet.Notice.success(MailPoet.I18n.t('postNotificationActivated'));
+      }
+      // force refresh of listing so that groups are updated
+      this.forceUpdate();
+    }).fail((response) => {
+      MailPoet.Notice.error(MailPoet.I18n.t('postNotificationActivationFailed'));
+
+      // reset value to actual newsletter's status
+      e.target.value = response.status;
+    });
+  },
+  renderStatus: function(newsletter) {
+    return (
+      <select
+        data-id={ newsletter.id }
+        defaultValue={ newsletter.status }
+        onChange={ this.updateStatus }
+      >
+        <option value="active">{ MailPoet.I18n.t('active') }</option>
+        <option value="draft">{ MailPoet.I18n.t('inactive') }</option>
+      </select>
+    );
+  },
+  renderSettings: function(newsletter) {
+    let sendingFrequency;
+    let sendingToSegments;
+
+    // get list of segments' name
+    const segments = newsletter.segments.map(function(segment) {
+      return segment.name
+    });
+
+    // check if the user has specified segments to send to
+    if(segments.length === 0) {
+      return (
+        <span className="mailpoet_error">
+          { MailPoet.I18n.t('sendingToSegmentsNotSpecified') }
+        </span>
+      );
+    } else {
+      sendingToSegments = MailPoet.I18n.t('ifNewContentToSegments').replace(
+        '%$1s', segments.join(', ')
+      );
+
+      // set sending frequency
+      switch (newsletter.options.intervalType) {
+        case 'daily':
+          sendingFrequency = MailPoet.I18n.t('sendDaily').replace(
+            '%$1s', timeOfDayValues[newsletter.options.timeOfDay]
+          );
+        break;
+
+        case 'weekly':
+          sendingFrequency = MailPoet.I18n.t('sendWeekly').replace(
+            '%$1s', weekDayValues[newsletter.options.weekDay]
+          ).replace(
+            '%$2s', timeOfDayValues[newsletter.options.timeOfDay]
+          );
+        break;
+
+        case 'monthly':
+          sendingFrequency = MailPoet.I18n.t('sendMonthly').replace(
+            '%$1s', monthDayValues[newsletter.options.monthDay]
+          ).replace(
+            '%$2s', timeOfDayValues[newsletter.options.timeOfDay]
+          );
+        break;
+
+        case 'nthWeekDay':
+          sendingFrequency = MailPoet.I18n.t('sendNthWeekDay').replace(
+            '%$1s', nthWeekDayValues[newsletter.options.nthWeekDay]
+          ).replace(
+            '%$2s', weekDayValues[newsletter.options.weekDay]
+          ).replace(
+            '%$3s', timeOfDayValues[newsletter.options.timeOfDay]
+          );
+        break;
+
+        case 'immediately':
+          sendingFrequency = MailPoet.I18n.t('sendImmediately');
+        break;
+      }
+    }
+
+    return (
+      <span>
+        { sendingFrequency } { sendingToSegments }
+      </span>
+    );
+  },
+  renderHistoryLink: function(newsletter) {
+    const childrenCount = ~~(newsletter.children_count);
+    if (childrenCount === 0) {
+      return (
+        MailPoet.I18n.t('notSentYet')
+      );
+    } else {
+      return (
+        <Link
+          to={ `/notification/history/${ newsletter.id }` }
+        >{ MailPoet.I18n.t('viewHistory') }</Link>
+      );
+    }
+  },
+  renderItem: function(newsletter, actions) {
+    const rowClasses = classNames(
+      'manage-column',
+      'column-primary',
+      'has-row-actions'
+    );
+
+    return (
+      <div>
+        <td className={ rowClasses }>
+          <strong>
+            <a
+              className="row-title"
+              href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }
+            >{ newsletter.subject }</a>
+          </strong>
+          { actions }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('status') }>
+          { this.renderStatus(newsletter) }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('settings') }>
+          { this.renderSettings(newsletter) }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('history') }>
+          { this.renderHistoryLink(newsletter) }
+        </td>
+        <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
+          <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
+        </td>
+      </div>
+    );
+  },
+  render: function() {
+    return (
+      <div>
+        <h1 className="title">
+          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+        </h1>
+
+        <ListingTabs tab="notification" />
+
+        <Listing
+          limit={ mailpoet_listing_per_page }
+          location={ this.props.location }
+          params={ this.props.params }
+          endpoint="newsletters"
+          type="notification"
+          base_url="notification"
+          onRenderItem={ this.renderItem }
+          columns={ columns }
+          bulk_actions={ bulk_actions }
+          item_actions={ newsletter_actions }
+          messages={ messages }
+          auto_refresh={ true }
+          sort_by="updated_at"
+          sort_order="desc"
+        />
+      </div>
+    );
+  }
+});
+
+module.exports = NewsletterListNotification;

assets/js/src/newsletters/listings/notification_history.jsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import { Router, Link } from 'react-router'
+import classNames from 'classnames'
+import jQuery from 'jquery'
+import MailPoet from 'mailpoet'
+
+import Listing from 'listing/listing.jsx'
+import ListingTabs from 'newsletters/listings/tabs.jsx'
+
+import { QueueMixin, StatisticsMixin } from 'newsletters/listings/mixins.jsx'
+
+const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
+
+const columns = [
+  {
+    name: 'subject',
+    label: MailPoet.I18n.t('subject'),
+  },
+  {
+    name: 'status',
+    label: MailPoet.I18n.t('status')
+  },
+  {
+    name: 'segments',
+    label: MailPoet.I18n.t('lists')
+  },
+  {
+    name: 'statistics',
+    label: MailPoet.I18n.t('statistics'),
+    display: mailpoet_tracking_enabled
+  },
+  {
+    name: 'processed_at',
+    label: MailPoet.I18n.t('sentOn'),
+  }
+];
+
+const newsletter_actions = [
+  {
+    name: 'view',
+    link: function(newsletter) {
+      return (
+        <a href={ newsletter.preview_url } target="_blank">
+          {MailPoet.I18n.t('preview')}
+        </a>
+      );
+    }
+  }
+];
+
+const NewsletterListNotificationHistory = React.createClass({
+  mixins: [QueueMixin, StatisticsMixin],
+  renderItem: function(newsletter, actions) {
+    const rowClasses = classNames(
+      'manage-column',
+      'column-primary',
+      'has-row-actions'
+    );
+
+    const segments = newsletter.segments.map(function(segment) {
+      return segment.name
+    }).join(', ');
+
+    return (
+      <div>
+        <td className={ rowClasses }>
+          <strong>
+            <a
+              href={ newsletter.preview_url }
+              target="_blank"
+            >{ newsletter.subject }</a>
+          </strong>
+          { actions }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('status') }>
+          { this.renderQueueStatus(newsletter) }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('lists') }>
+          { segments }
+        </td>
+        { (mailpoet_tracking_enabled === true) ? (
+          <td className="column" data-colname={ MailPoet.I18n.t('statistics') }>
+            { this.renderStatistics(newsletter) }
+          </td>
+        ) : null }
+        <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
+          <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
+        </td>
+      </div>
+    );
+  },
+  render: function() {
+    return (
+      <div>
+        <h1 className="title">
+          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+        </h1>
+
+        <ListingTabs tab="notification" />
+
+        <Link
+          className="page-title-action"
+          to="/notification"
+        >{MailPoet.I18n.t('backToPostNotifications')}</Link>
+
+        <Listing
+          limit={ mailpoet_listing_per_page }
+          location={ this.props.location }
+          params={ this.props.params }
+          endpoint="newsletters"
+          type="notification_history"
+          base_url="notification/history/:parent_id"
+          onRenderItem={ this.renderItem }
+          columns={columns}
+          item_actions={ newsletter_actions }
+          auto_refresh={ true }
+          sort_by="updated_at"
+          sort_order="desc"
+        />
+      </div>
+    );
+  }
+});
+
+module.exports = NewsletterListNotificationHistory;

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

@@ -0,0 +1,214 @@
+import React from 'react'
+import { Router, Link } from 'react-router'
+import classNames from 'classnames'
+import jQuery from 'jquery'
+import MailPoet from 'mailpoet'
+
+import Listing from 'listing/listing.jsx'
+import ListingTabs from 'newsletters/listings/tabs.jsx'
+
+import { QueueMixin, StatisticsMixin } from 'newsletters/listings/mixins.jsx'
+
+const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
+
+const messages = {
+  onTrash(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterTrashed')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersTrashed')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onDelete(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterDeleted')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersDeleted')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onRestore(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterRestored')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersRestored')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  }
+};
+
+const columns = [
+  {
+    name: 'subject',
+    label: MailPoet.I18n.t('subject'),
+    sortable: true
+  },
+  {
+    name: 'status',
+    label: MailPoet.I18n.t('status')
+  },
+  {
+    name: 'segments',
+    label: MailPoet.I18n.t('lists')
+  },
+  {
+    name: 'statistics',
+    label: MailPoet.I18n.t('statistics'),
+    display: mailpoet_tracking_enabled
+  },
+  {
+    name: 'updated_at',
+    label: MailPoet.I18n.t('lastModifiedOn'),
+    sortable: true
+  }
+];
+
+
+const bulk_actions = [
+  {
+    name: 'trash',
+    label: MailPoet.I18n.t('trash'),
+    onSuccess: messages.onTrash
+  }
+];
+
+const newsletter_actions = [
+  {
+    name: 'view',
+    link: function(newsletter) {
+      return (
+        <a href={ newsletter.preview_url } target="_blank">
+          {MailPoet.I18n.t('preview')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'edit',
+    link: function(newsletter) {
+      return (
+        <a href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }>
+          {MailPoet.I18n.t('edit')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'duplicate',
+    label: MailPoet.I18n.t('duplicate'),
+    onClick: function(newsletter, refresh) {
+      return MailPoet.Ajax.post({
+        endpoint: 'newsletters',
+        action: 'duplicate',
+        data: newsletter.id
+      }).done(function(response) {
+        if (response !== false && response.subject !== undefined) {
+          MailPoet.Notice.success(
+            (MailPoet.I18n.t('newsletterDuplicated')).replace(
+              '%$1s', response.subject
+            )
+          );
+        }
+        refresh();
+      });
+    }
+  },
+  {
+    name: 'trash'
+  }
+];
+
+const NewsletterListStandard = React.createClass({
+  mixins: [QueueMixin, StatisticsMixin],
+  renderItem: function(newsletter, actions) {
+    const rowClasses = classNames(
+      'manage-column',
+      'column-primary',
+      'has-row-actions'
+    );
+
+    const segments = newsletter.segments.map(function(segment) {
+      return segment.name
+    }).join(', ');
+
+    return (
+      <div>
+        <td className={ rowClasses }>
+          <strong>
+            <a
+              className="row-title"
+              href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }
+            >{ newsletter.subject }</a>
+          </strong>
+          { actions }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('status') }>
+          { this.renderQueueStatus(newsletter) }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('lists') }>
+          { segments }
+        </td>
+        { (mailpoet_tracking_enabled === true) ? (
+          <td className="column" data-colname={ MailPoet.I18n.t('statistics') }>
+            { this.renderStatistics(newsletter) }
+          </td>
+        ) : null }
+        <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
+          <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
+        </td>
+      </div>
+    );
+  },
+  render: function() {
+    return (
+      <div>
+        <h1 className="title">
+          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+        </h1>
+
+        <ListingTabs tab="standard" />
+
+        <Listing
+          limit={ mailpoet_listing_per_page }
+          location={ this.props.location }
+          params={ this.props.params }
+          endpoint="newsletters"
+          type="standard"
+          base_url="standard"
+          onRenderItem={this.renderItem}
+          columns={columns}
+          bulk_actions={ bulk_actions }
+          item_actions={ newsletter_actions }
+          messages={ messages }
+          auto_refresh={ true }
+          sort_by="updated_at"
+          sort_order="desc"
+        />
+      </div>
+    );
+  }
+});
+
+module.exports = NewsletterListStandard;

assets/js/src/newsletters/listings/tabs.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Link } from 'react-router'
+import classNames from 'classnames'
+import MailPoet from 'mailpoet'
+
+const ListingTabs = React.createClass({
+  getInitialState() {
+    return {
+      tab: null,
+      tabs: [
+        {
+          name: 'standard',
+          label: MailPoet.I18n.t('tabStandardTitle'),
+          link: '/standard'
+        },
+        {
+          name: 'welcome',
+          label: MailPoet.I18n.t('tabWelcomeTitle'),
+          link: '/welcome'
+        },
+        {
+          name: 'notification',
+          label: MailPoet.I18n.t('tabNotificationTitle'),
+          link: '/notification'
+        }
+      ]
+    };
+  },
+  render() {
+    const tabs = this.state.tabs.map((tab, index) => {
+      const tabClasses = classNames(
+        'nav-tab',
+        { 'nav-tab-active': (this.props.tab === tab.name) }
+      );
+
+      return (
+        <Link
+          key={ 'tab-'+index }
+          className={ tabClasses }
+          to={ tab.link }
+        >{ tab.label }</Link>
+      );
+    });
+
+    return (
+      <h2 className="nav-tab-wrapper">
+        { tabs }
+      </h2>
+    );
+  }
+});
+
+module.exports = ListingTabs;

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

@@ -0,0 +1,360 @@
+import React from 'react'
+import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
+import { createHashHistory } from 'history'
+
+import Listing from 'listing/listing.jsx'
+import ListingTabs from 'newsletters/listings/tabs.jsx'
+
+import classNames from 'classnames'
+import jQuery from 'jquery'
+import MailPoet from 'mailpoet'
+import _ from 'underscore'
+
+const mailpoet_roles = window.mailpoet_roles || {};
+const mailpoet_segments = window.mailpoet_segments || {};
+const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
+
+const messages = {
+  onTrash(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterTrashed')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersTrashed')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onDelete(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterDeleted')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersDeleted')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onRestore(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterRestored')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersRestored')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  }
+};
+
+const columns = [
+  {
+    name: 'subject',
+    label: MailPoet.I18n.t('subject'),
+    sortable: true
+  },
+  {
+    name: 'status',
+    label: MailPoet.I18n.t('status'),
+    width: 145
+  },
+  {
+    name: 'settings',
+    label: MailPoet.I18n.t('settings')
+  },
+  {
+    name: 'statistics',
+    label: MailPoet.I18n.t('statistics'),
+    display: mailpoet_tracking_enabled
+  },
+  {
+    name: 'updated_at',
+    label: MailPoet.I18n.t('lastModifiedOn'),
+    sortable: true
+  }
+];
+
+const bulk_actions = [
+  {
+    name: 'trash',
+    label: MailPoet.I18n.t('trash'),
+    onSuccess: messages.onTrash
+  }
+];
+
+const newsletter_actions = [
+  {
+    name: 'view',
+    link: function(newsletter) {
+      return (
+        <a href={ newsletter.preview_url } target="_blank">
+          {MailPoet.I18n.t('preview')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'edit',
+    link: function(newsletter) {
+      return (
+        <a href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }>
+          {MailPoet.I18n.t('edit')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'duplicate',
+    label: MailPoet.I18n.t('duplicate'),
+    onClick: function(newsletter, refresh) {
+      return MailPoet.Ajax.post({
+        endpoint: 'newsletters',
+        action: 'duplicate',
+        data: newsletter.id
+      }).done(function(response) {
+        if (response !== false && response.subject !== undefined) {
+          MailPoet.Notice.success(
+            (MailPoet.I18n.t('newsletterDuplicated')).replace(
+              '%$1s', response.subject
+            )
+          );
+        }
+        refresh();
+      });
+    }
+  },
+  {
+    name: 'trash'
+  }
+];
+
+const NewsletterListWelcome = React.createClass({
+  updateStatus: function(e) {
+    // make the event persist so that we can still override the selected value
+    // in the ajax callback
+    e.persist();
+
+    MailPoet.Ajax.post({
+      endpoint: 'newsletters',
+      action: 'setStatus',
+      data: {
+        id: ~~(e.target.getAttribute('data-id')),
+        status: e.target.value
+      }
+    }).done((response) => {
+      if (response.data.status === 'active') {
+        MailPoet.Notice.success(MailPoet.I18n.t('welcomeEmailActivated'));
+      }
+      // force refresh of listing so that groups are updated
+      this.forceUpdate();
+    }).fail((response) => {
+      MailPoet.Notice.error(MailPoet.I18n.t('welcomeEmailActivationFailed'));
+
+      // reset value to actual newsletter's status
+      e.target.value = response.status;
+    });
+  },
+  renderStatus: function(newsletter) {
+    let total_sent;
+    total_sent = (
+      MailPoet.I18n.t('sentToXSubscribers')
+      .replace('%$1d', newsletter.total_sent.toLocaleString())
+    );
+
+    return (
+      <div>
+        <p>
+          <select
+            data-id={ newsletter.id }
+            defaultValue={ newsletter.status }
+            onChange={ this.updateStatus }
+          >
+            <option value="active">{ MailPoet.I18n.t('active') }</option>
+            <option value="draft">{ MailPoet.I18n.t('inactive') }</option>
+          </select>
+        </p>
+        <p>{ total_sent }</p>
+      </div>
+    );
+  },
+  renderSettings: function(newsletter) {
+    let sendingEvent;
+    let sendingDelay;
+
+    // set sending event
+    switch (newsletter.options.event) {
+      case 'user':
+        // WP User
+        if (newsletter.options.role === 'mailpoet_all') {
+          sendingEvent = MailPoet.I18n.t('welcomeEventWPUserAnyRole');
+        } else {
+          sendingEvent = MailPoet.I18n.t('welcomeEventWPUserWithRole').replace(
+            '%$1s', mailpoet_roles[newsletter.options.role]
+          );
+        }
+      break;
+
+      case 'segment':
+        // get segment
+        const segment = _.find(mailpoet_segments, function(segment) {
+          return (~~(segment.id) === ~~(newsletter.options.segment));
+        });
+
+        if (segment === undefined) {
+          return (
+            <span className="mailpoet_error">
+              { MailPoet.I18n.t('sendingToSegmentsNotSpecified') }
+            </span>
+          );
+        } else {
+          sendingEvent = MailPoet.I18n.t('welcomeEventSegment').replace(
+            '%$1s', segment.name
+          );
+        }
+      break;
+    }
+
+    // set sending delay
+    if (sendingEvent) {
+      if (newsletter.options.afterTimeType !== 'immediate') {
+        switch (newsletter.options.afterTimeType) {
+          case 'hours':
+            sendingDelay = MailPoet.I18n.t('sendingDelayHours').replace(
+              '%$1d', newsletter.options.afterTimeNumber
+            );
+          break;
+
+          case 'days':
+            sendingDelay = MailPoet.I18n.t('sendingDelayDays').replace(
+              '%$1d', newsletter.options.afterTimeNumber
+            );
+          break;
+
+          case 'weeks':
+            sendingDelay = MailPoet.I18n.t('sendingDelayWeeks').replace(
+              '%$1d', newsletter.options.afterTimeNumber
+            );
+          break;
+        }
+        sendingEvent += ' [' + sendingDelay + ']';
+      }
+      // add a "period" at the end if we do have a sendingEvent
+      sendingEvent += '.';
+    }
+
+    return (
+      <span>
+        { sendingEvent }
+      </span>
+    );
+  },
+  renderStatistics: function(newsletter) {
+    if (mailpoet_tracking_enabled === false) {
+      return;
+    }
+
+    if (newsletter.total_sent > 0 && newsletter.statistics) {
+      const total_sent = ~~(newsletter.total_sent);
+
+      const percentage_clicked = Math.round(
+        (~~(newsletter.statistics.clicked) * 100) / total_sent
+      );
+      const percentage_opened = Math.round(
+        (~~(newsletter.statistics.opened) * 100) / total_sent
+      );
+      const percentage_unsubscribed = Math.round(
+        (~~(newsletter.statistics.unsubscribed) * 100) / total_sent
+      );
+
+      return (
+        <span>
+          { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
+        </span>
+      );
+    } else {
+      return (
+        <span>{MailPoet.I18n.t('notSentYet')}</span>
+      );
+    }
+  },
+  renderItem: function(newsletter, actions) {
+    const rowClasses = classNames(
+      'manage-column',
+      'column-primary',
+      'has-row-actions'
+    );
+
+    return (
+      <div>
+        <td className={ rowClasses }>
+          <strong>
+            <a
+              className="row-title"
+              href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }
+            >{ newsletter.subject }</a>
+          </strong>
+          { actions }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('status') }>
+          { this.renderStatus(newsletter) }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('settings') }>
+          { this.renderSettings(newsletter) }
+        </td>
+        { (mailpoet_tracking_enabled === true) ? (
+          <td className="column" data-colname={ MailPoet.I18n.t('statistics') }>
+            { this.renderStatistics(newsletter) }
+          </td>
+        ) : null }
+        <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
+          <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
+        </td>
+      </div>
+    );
+  },
+  render: function() {
+    return (
+      <div>
+        <h1 className="title">
+          { MailPoet.I18n.t('pageTitle') } <Link className="page-title-action" to="/new">{ MailPoet.I18n.t('new') }</Link>
+        </h1>
+
+        <ListingTabs tab="welcome" />
+
+        <Listing
+          limit={ mailpoet_listing_per_page }
+          location={ this.props.location }
+          params={ this.props.params }
+          endpoint="newsletters"
+          type="welcome"
+          base_url="welcome"
+          onRenderItem={ this.renderItem }
+          columns={ columns }
+          bulk_actions={ bulk_actions }
+          item_actions={ newsletter_actions }
+          messages={ messages }
+          auto_refresh={ true }
+          sort_by="updated_at"
+          sort_order="desc"
+        />
+      </div>
+    );
+  }
+});
+
+module.exports = NewsletterListWelcome;

assets/js/src/newsletters/newsletters.jsx

@@ -1,20 +1,26 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
+import { Router, Route, IndexRedirect, Link, useRouterHistory } from 'react-router'
 import { createHashHistory } from 'history'
-import NewsletterList from 'newsletters/list.jsx'
+
 import NewsletterTypes from 'newsletters/types.jsx'
 import NewsletterTemplates from 'newsletters/templates.jsx'
 import NewsletterSend from 'newsletters/send.jsx'
-import NewsletterStandard from 'newsletters/types/standard.jsx'
-import NewsletterWelcome from 'newsletters/types/welcome/welcome.jsx'
-import NewsletterNotification from 'newsletters/types/notification/notification.jsx'
+
+import NewsletterTypeStandard from 'newsletters/types/standard.jsx'
+import NewsletterTypeWelcome from 'newsletters/types/welcome/welcome.jsx'
+import NewsletterTypeNotification from 'newsletters/types/notification/notification.jsx'
+
+import NewsletterListStandard from 'newsletters/listings/standard.jsx'
+import NewsletterListWelcome from 'newsletters/listings/welcome.jsx'
+import NewsletterListNotification from 'newsletters/listings/notification.jsx'
+import NewsletterListNotificationHistory from 'newsletters/listings/notification_history.jsx'
 
 const history = useRouterHistory(createHashHistory)({ queryKey: false });
 
 const App = React.createClass({
   render() {
-    return this.props.children
+    return this.props.children;
   }
 });
 
@@ -24,15 +30,22 @@ if(container) {
   ReactDOM.render((
     <Router history={ history }>
       <Route path="/" component={ App }>
-        <IndexRoute component={ NewsletterList } />
+        <IndexRedirect to="standard" />
+        {/* Listings */}
+        <Route path="standard(/)**" params={{ tab: 'standard' }} component={ NewsletterListStandard } />
+        <Route path="welcome(/)**" component={ NewsletterListWelcome } />
+        <Route path="notification/history/:parent_id(/)**" component={ NewsletterListNotificationHistory } />
+        <Route path="notification(/)**" component={ NewsletterListNotification } />
+        {/* Newsletter: type selection */}
         <Route path="new" component={ NewsletterTypes } />
-        <Route name="standard" path="new/standard" component={ NewsletterStandard } />
-        <Route name="welcome" path="new/welcome" component={ NewsletterWelcome } />
-        <Route name="notification" path="new/notification" component={ NewsletterNotification } />
+        {/* New newsletter: types */}
+        <Route path="new/standard" component={ NewsletterTypeStandard } />
+        <Route path="new/welcome" component={ NewsletterTypeWelcome } />
+        <Route path="new/notification" component={ NewsletterTypeNotification } />
+        {/* Template selection */}
         <Route name="template" path="template/:id" component={ NewsletterTemplates } />
+        {/* Sending options */}
         <Route path="send/:id" component={ NewsletterSend } />
-        <Route path="filter[:filter]" component={ NewsletterList } />
-        <Route path="*" component={ NewsletterList } />
       </Route>
     </Router>
   ), container);

assets/js/src/newsletters/scheduling/common.jsx

@@ -0,0 +1,82 @@
+import _ from 'underscore'
+import MailPoet from 'mailpoet'
+
+const timeFormat = window.mailpoet_time_format || 'H:i';
+
+// welcome emails
+const _timeDelayValues = {
+  'immediate': MailPoet.I18n.t('delayImmediately'),
+  'hours': MailPoet.I18n.t('delayHoursAfter'),
+  'days': MailPoet.I18n.t('delayDaysAfter'),
+  'weeks': MailPoet.I18n.t('delayWeeksAfter')
+};
+
+const _intervalValues = {
+  'daily': MailPoet.I18n.t('daily'),
+  'weekly': MailPoet.I18n.t('weekly'),
+  'monthly': MailPoet.I18n.t('monthly'),
+  'nthWeekDay': MailPoet.I18n.t('monthlyEvery'),
+  'immediately': MailPoet.I18n.t('immediately')
+};
+
+// notification emails
+const SECONDS_IN_DAY = 86400;
+const TIME_STEP_SECONDS = 3600;
+const numberOfTimeSteps = SECONDS_IN_DAY / TIME_STEP_SECONDS;
+
+const _timeOfDayValues = _.object(_.map(
+  _.times(numberOfTimeSteps,function(step) {
+    return step * TIME_STEP_SECONDS;
+  }), function(seconds) {
+    let date = new Date(null);
+    date.setSeconds(seconds);
+    const timeLabel = MailPoet.Date.format(date, { format: timeFormat, offset: 0 });
+    return [seconds, timeLabel];
+  })
+);
+
+const _weekDayValues = {
+  0: MailPoet.I18n.t('sunday'),
+  1: MailPoet.I18n.t('monday'),
+  2: MailPoet.I18n.t('tuesday'),
+  3: MailPoet.I18n.t('wednesday'),
+  4: MailPoet.I18n.t('thursday'),
+  5: MailPoet.I18n.t('friday'),
+  6: MailPoet.I18n.t('saturday')
+};
+
+const NUMBER_OF_DAYS_IN_MONTH = 28;
+const _monthDayValues = _.object(
+  _.map(
+    _.times(NUMBER_OF_DAYS_IN_MONTH, function(day) {
+      return day;
+    }), function(day) {
+      const labels = {
+        0: MailPoet.I18n.t('first'),
+        1: MailPoet.I18n.t('second'),
+        2: MailPoet.I18n.t('third')
+      };
+      let label;
+      if (labels[day] !== undefined) {
+        label = labels[day];
+      } else {
+        label = MailPoet.I18n.t('nth').replace("%$1d", day + 1);
+      }
+      return [day, label];
+    }
+  )
+);
+
+const _nthWeekDayValues = {
+  '1': MailPoet.I18n.t('first'),
+  '2': MailPoet.I18n.t('second'),
+  '3': MailPoet.I18n.t('third'),
+  'L': MailPoet.I18n.t('last')
+};
+
+export { _timeDelayValues as timeDelayValues };
+export { _intervalValues as intervalValues };
+export { _timeOfDayValues as timeOfDayValues };
+export { _weekDayValues as weekDayValues };
+export { _monthDayValues as monthDayValues };
+export { _nthWeekDayValues as nthWeekDayValues };

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();
       },
@@ -85,65 +90,110 @@ define(
         if(!this.isValid()) {
           jQuery('#mailpoet_newsletter').parsley().validate();
         } else {
-          this.setState({ loading: true });
-
-          MailPoet.Ajax.post({
-            endpoint: 'newsletters',
-            action: 'save',
-            data: this.state.item,
-          }).then((response) => {
-            if (response.result === true) {
-              return MailPoet.Ajax.post({
-                endpoint: 'sendingQueue',
-                action: 'add',
-                data: _.extend({}, this.state.item, {
-                  newsletter_id: this.props.params.id,
-                }),
-              });
-            } else {
-              return response;
-            }
+          this._save(e).done(() => {
+            this.setState({ loading: true });
           }).done((response) => {
-            this.setState({ loading: false });
-            if(response.result === true) {
-              this.context.router.push('/');
-              MailPoet.Notice.success(response.data.message);
-            } else {
-              if(response.errors) {
-                MailPoet.Notice.error(response.errors);
-              } else {
-                MailPoet.Notice.error(
-                  MailPoet.I18n.t('newsletterSendingError').replace("%$1s", '?page=mailpoet-settings')
-                );
-              }
+            switch (response.data.type) {
+              case 'notification':
+              case 'welcome':
+                return MailPoet.Ajax.post({
+                  endpoint: 'newsletters',
+                  action: 'setStatus',
+                  data: {
+                    id: this.props.params.id,
+                    status: 'active'
+                  }
+                }).done((response) => {
+                  // redirect to listing based on newsletter type
+                  this.context.router.push(`/${ this.state.item.type || '' }`);
+
+                  // display success message depending on newsletter type
+                  if (response.data.type === 'welcome') {
+                    MailPoet.Notice.success(
+                      MailPoet.I18n.t('welcomeEmailActivated')
+                    );
+                  } else if (response.data.type === 'notification') {
+                    MailPoet.Notice.success(
+                      MailPoet.I18n.t('postNotificationActivated')
+                    );
+                  }
+                }).fail(this._showError);
+              default:
+                return MailPoet.Ajax.post({
+                  endpoint: 'sendingQueue',
+                  action: 'add',
+                  data: {
+                    newsletter_id: this.props.params.id
+                  }
+                }).done((response) => {
+                  // redirect to listing based on newsletter type
+                  this.context.router.push(`/${ this.state.item.type || '' }`);
+
+                  if (response.data.status === 'scheduled') {
+                    MailPoet.Notice.success(
+                      MailPoet.I18n.t('newsletterHasBeenScheduled')
+                    );
+                  } else {
+                    MailPoet.Notice.success(
+                      MailPoet.I18n.t('newsletterBeingSent')
+                    );
+                  }
+                }).fail(this._showError);
             }
+          }).fail(this._showError).always(() => {
+            this.setState({ loading: false });
           });
         }
         return false;
       },
       handleSave: function(e) {
         e.preventDefault();
+
+        this._save(e).done((response) => {
+          MailPoet.Notice.success(
+            MailPoet.I18n.t('newsletterUpdated')
+          );
+        }).done(() => {
+          this.context.router.push(`/${ this.state.item.type || '' }`);
+        }).fail(this._showError);
+      },
+      handleRedirectToDesign: function(e) {
+        e.preventDefault();
+        var redirectTo = e.target.href;
+
+        this._save(e).done((response) => {
+          MailPoet.Notice.success(
+            MailPoet.I18n.t('newsletterUpdated')
+          );
+        }).done(() => {
+          window.location = redirectTo;
+        }).fail(this._showError);
+      },
+      _save: function(e) {
+        var data = this.state.item;
         this.setState({ loading: true });
 
-        MailPoet.Ajax.post({
+        // Ensure that body is  JSON encoded
+        if (!_.isUndefined(data.body)) {
+          data.body = JSON.stringify(data.body);
+        }
+
+        return MailPoet.Ajax.post({
           endpoint: 'newsletters',
           action: 'save',
-          data: this.state.item,
-        }).done((response) => {
+          data: data,
+        }).always(() => {
           this.setState({ loading: false });
-
-          if(response.result === true) {
-            this.context.router.push('/');
-            MailPoet.Notice.success(
-              MailPoet.I18n.t('newsletterUpdated')
-            );
-          } else {
-            if(response.errors) {
-              MailPoet.Notice.error(response.errors);
-            }
-          }
         });
       },
+      _showError: (response) => {
+        if (response.errors.length > 0) {
+          MailPoet.Notice.error(
+            response.errors.map(function(error) { return error.message; }),
+            { scroll: true }
+          );
+        }
+      },
       handleFormChange: function(e) {
         var item = this.state.item,
           field = e.target.name;
@@ -175,10 +225,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"
@@ -188,7 +237,8 @@ define(
                 <a
                   href={
                     '?page=mailpoet-newsletter-editor&id='+this.props.params.id
-                  }>
+                  }
+                  onClick={this.handleRedirectToDesign}>
                   {MailPoet.I18n.t('goBackToDesign')}
                 </a>.
               </p>

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

@@ -23,7 +23,7 @@ define(
       },
       {
         name: 'options',
-        label: MailPoet.I18n.t('selectPeriodicity'),
+        label: MailPoet.I18n.t('selectFrequency'),
         type: 'reactComponent',
         component: Scheduling,
       },
@@ -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

@@ -253,7 +253,13 @@ define(
 
     var StandardScheduling = React.createClass({
       _getCurrentValue: function() {
-        return this.props.item[this.props.field.name] || {};
+        return _.defaults(
+          this.props.item[this.props.field.name] || {},
+          {
+            isScheduled: '0',
+            scheduledAt: defaultDateTime
+          }
+        );
       },
       handleValueChange: function(event) {
         var oldValue = this._getCurrentValue(),
@@ -290,7 +296,7 @@ define(
               <DateTime
                 name="scheduledAt"
                 value={this._getCurrentValue().scheduledAt}
-                onChange={this.handleValueChange} 
+                onChange={this.handleValueChange}
                 dateValidation={this.getDateValidation()} />
               &nbsp;
               <span>
@@ -401,6 +407,30 @@ define(
       }
     ];
 
-    return fields;
+    return {
+      getFields: function(newsletter) {
+        return fields;
+      },
+      getSendButtonOptions: function(newsletter) {
+        newsletter = newsletter || {};
+
+        let isScheduled = (
+          typeof newsletter.options === 'object'
+          && newsletter.options.isScheduled === '1'
+        );
+        let 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/templates.jsx

@@ -30,33 +30,35 @@ define(
           endpoint: 'newsletterTemplates',
           action: 'save',
           data: template
-        }).done(function(response) {
+        }).always(function() {
           MailPoet.Modal.loading(false);
-          if(response.result === true) {
-            this.props.onImport(template);
-          } else {
-            response.map(function(error) {
-              MailPoet.Notice.error(error);
-            });
+        }).done((response) => {
+          this.props.onImport(response.data);
+        }).fail((response) => {
+          if (response.errors.length > 0) {
+            MailPoet.Notice.error(
+              response.errors.map(function(error) { return error.message; }),
+              { scroll: true }
+            );
           }
-        }.bind(this));
+        });
       },
       handleSubmit: function(e) {
         e.preventDefault();
 
         if (_.size(this.refs.templateFile.files) <= 0) return false;
 
-        var file = _.first(this.refs.templateFile.files),
-            reader = new FileReader(),
-            saveTemplate = this.saveTemplate;
+        var file = _.first(this.refs.templateFile.files);
+        var reader = new FileReader();
+        var saveTemplate = this.saveTemplate;
 
-        reader.onload = function(e) {
+        reader.onload = (e) => {
           try {
             saveTemplate(JSON.parse(e.target.result));
           } catch (err) {
             MailPoet.Notice.error(MailPoet.I18n.t('templateFileMalformedError'));
           }
-        }.bind(this);
+        };
 
         reader.readAsText(file);
       },
@@ -97,12 +99,12 @@ define(
         MailPoet.Ajax.post({
           endpoint: 'newsletterTemplates',
           action: 'getAll',
-        }).done(function(response) {
+        }).always(() => {
           MailPoet.Modal.loading(false);
-          if(this.isMounted()) {
-
-            if(response.length === 0) {
-              response = [
+        }).done((response) => {
+          if (this.isMounted()) {
+            if (response.data.length === 0) {
+              response.data = [
                 {
                   name:
                     MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
@@ -110,14 +112,14 @@ define(
                     MailPoet.I18n.t('mailpoetGuideTemplateDescription'),
                   readonly: "1"
                 }
-              ]
+              ];
             }
             this.setState({
-              templates: response,
+              templates: response.data,
               loading: false
             });
           }
-        }.bind(this));
+        });
       },
       handleSelectTemplate: function(template) {
         var body = template.body;
@@ -134,19 +136,17 @@ define(
             id: this.props.params.id,
             body: body
           }
-        }).done(function(response) {
-          if(response.result === true) {
-            // TODO: Move this URL elsewhere
-            window.location = 'admin.php?page=mailpoet-newsletter-editor&id=' + this.props.params.id;
-          } else {
-            response.errors.map(function(error) {
-              MailPoet.Notice.error(error);
-            });
+        }).done((response) => {
+          // TODO: Move this URL elsewhere
+          window.location = 'admin.php?page=mailpoet-newsletter-editor&id=' + response.data.id;
+        }).fail((response) => {
+          if (response.errors.length > 0) {
+            MailPoet.Notice.error(
+              response.errors.map(function(error) { return error.message; }),
+              { scroll: true }
+            );
           }
-        }.bind(this));
-      },
-      handlePreviewTemplate: function(template) {
-        console.log('preview template #'+template.id);
+        });
       },
       handleDeleteTemplate: function(template) {
         this.setState({ loading: true });
@@ -160,10 +160,12 @@ define(
           MailPoet.Ajax.post({
             endpoint: 'newsletterTemplates',
             action: 'delete',
-            data: template.id
-          }).done(function(response) {
+            data: {
+              id: template.id
+            }
+          }).done((response) => {
             this.getTemplates();
-          }.bind(this));
+          });
         } else {
            this.setState({ loading: false });
         }
@@ -172,7 +174,7 @@ define(
         MailPoet.Modal.popup({
           title: template.name,
           template: '<div class="mailpoet_boxes_preview" style="background-color: {{ body.globalStyles.body.backgroundColor }}"><img src="{{ thumbnail }}" /></div>',
-          data: template,
+          data: template
         });
       },
       handleTemplateImport: function() {
@@ -213,20 +215,19 @@ define(
               </div>
 
               <div className="mailpoet_actions">
+                  <a
+                    className="button button-secondary"
+                    onClick={ this.handleShowTemplate.bind(null, template) }
+                  >
+                    {MailPoet.I18n.t('preview')}
+                  </a>
+                  &nbsp;
                   <a
                     className="button button-primary"
                     onClick={ this.handleSelectTemplate.bind(null, template) }
                   >
                     {MailPoet.I18n.t('select')}
                   </a>
-                  &nbsp;
-                  <a
-                    style={ { display: 'none' }}
-                    className="button button-secondary"
-                    onClick={ this.handlePreviewTemplate.bind(null, template) }
-                  >
-                    {MailPoet.I18n.t('preview')}
-                  </a>
               </div>
               { (template.readonly === "1") ? false : deleteLink }
             </li>

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

@@ -18,7 +18,6 @@ define(
 
     var field = {
       name: 'options',
-      label: 'Periodicity',
       type: 'reactComponent',
       component: Scheduling,
     };
@@ -72,7 +71,7 @@ define(
             <h1>{MailPoet.I18n.t('postNotificationNewsletterTypeTitle')}</h1>
             <Breadcrumb step="type" />
 
-            <h3>{MailPoet.I18n.t('selectPeriodicity')}</h3>
+            <h3>{MailPoet.I18n.t('selectFrequency')}</h3>
 
             <Scheduling
               item={this.state}

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

@@ -1,200 +1,144 @@
-define(
-  [
-    'underscore',
-    'react',
-    'react-router',
-    'mailpoet',
-    'form/fields/select.jsx'
-  ],
-  function(
-    _,
-    React,
-    Router,
-    MailPoet,
-    Select
-  ) {
+import _ from 'underscore'
+import React from 'react'
+import MailPoet from 'mailpoet'
+import Select from 'form/fields/select.jsx'
+import {
+  intervalValues,
+  timeOfDayValues,
+  weekDayValues,
+  monthDayValues,
+  nthWeekDayValues
+} from 'newsletters/scheduling/common.jsx'
 
-    var intervalField = {
-      name: 'intervalType',
-      values: {
-        'daily': MailPoet.I18n.t('daily'),
-        'weekly': MailPoet.I18n.t('weekly'),
-        'monthly': MailPoet.I18n.t('monthly'),
-        'nthWeekDay': MailPoet.I18n.t('monthlyEvery'),
-        'immediately': MailPoet.I18n.t('immediately'),
-      },
-    };
+const intervalField = {
+  name: 'intervalType',
+  values: intervalValues
+};
 
-    var SECONDS_IN_DAY = 86400;
-    var TIME_STEP_SECONDS = 3600; // Default: 3600
-    var numberOfTimeSteps = SECONDS_IN_DAY / TIME_STEP_SECONDS;
-    var timeOfDayValues = _.object(_.map(
-      _.times(numberOfTimeSteps, function(step) { return step * TIME_STEP_SECONDS; }),
-      function(seconds) {
-        var date = new Date(null);
-        date.setSeconds(seconds);
-        var timeLabel = date.toISOString().substr(11, 5);
-        return [seconds, timeLabel];
+const timeOfDayField = {
+  name: 'timeOfDay',
+  values: timeOfDayValues
+};
+
+const weekDayField = {
+  name: 'weekDay',
+  values: weekDayValues
+};
+
+const monthDayField = {
+  name: 'monthDay',
+  values: monthDayValues
+};
+
+const nthWeekDayField = {
+  name: 'nthWeekDay',
+  values: nthWeekDayValues
+};
+
+const NotificationScheduling = React.createClass({
+  _getCurrentValue: function() {
+    return (this.props.item[this.props.field.name] || {});
+  },
+  handleValueChange: function(name, value) {
+    const oldValue = this._getCurrentValue();
+    let newValue = {};
+
+    newValue[name] = value;
+
+    return this.props.onValueChange({
+      target: {
+        name: this.props.field.name,
+        value: _.extend({}, oldValue, newValue)
       }
-    ));
-    var timeOfDayField = {
-      name: 'timeOfDay',
-      values: timeOfDayValues,
-    };
-
-    var weekDayField = {
-      name: 'weekDay',
-      values: {
-        0: MailPoet.I18n.t('sunday'),
-        1: MailPoet.I18n.t('monday'),
-        2: MailPoet.I18n.t('tuesday'),
-        3: MailPoet.I18n.t('wednesday'),
-        4: MailPoet.I18n.t('thursday'),
-        5: MailPoet.I18n.t('friday'),
-        6: MailPoet.I18n.t('saturday')
-      },
-    };
-
-    var NUMBER_OF_DAYS_IN_MONTH = 28; // 28 for compatibility with MP2
-    var monthDayField = {
-      name: 'monthDay',
-      values: _.object(_.map(
-        _.times(NUMBER_OF_DAYS_IN_MONTH, function(day) { return day; }),
-        function(day) {
-          var labels = {
-            0: MailPoet.I18n.t('first'),
-            1: MailPoet.I18n.t('second'),
-            2: MailPoet.I18n.t('third')
-          },
-            label;
-          if (labels[day] !== undefined) {
-            label = labels[day];
-          } else {
-            label = MailPoet.I18n.t('nth').replace("%$1d", day + 1);
-          }
-
-          return [day, label];
-        },
-      )),
-    };
-
-    var nthWeekDayField = {
-      name: 'nthWeekDay',
-      values: {
-        '1': MailPoet.I18n.t('first'),
-        '2': MailPoet.I18n.t('second'),
-        '3': MailPoet.I18n.t('third'),
-        'L': MailPoet.I18n.t('last'),
-      },
-    };
-
-    var NotificationScheduling = React.createClass({
-      _getCurrentValue: function() {
-        return this.props.item[this.props.field.name] || {};
-      },
-      handleValueChange: function(name, value) {
-        var oldValue = this._getCurrentValue(),
-            newValue = {};
-        newValue[name] = value;
-
-        return this.props.onValueChange({
-          target: {
-            name: this.props.field.name,
-            value: _.extend({}, oldValue, newValue)
-          }
-        });
-      },
-      handleIntervalChange: function(event) {
-        return this.handleValueChange(
-          'intervalType',
-          event.target.value
-        );
-      },
-      handleTimeOfDayChange: function(event) {
-        return this.handleValueChange(
-          'timeOfDay',
-          event.target.value
-        );
-      },
-      handleWeekDayChange: function(event) {
-        return this.handleValueChange(
-          'weekDay',
-          event.target.value
-        );
-      },
-      handleMonthDayChange: function(event) {
-        return this.handleValueChange(
-          'monthDay',
-          event.target.value
-        );
-      },
-      handleNthWeekDayChange: function(event) {
-        return this.handleValueChange(
-          'nthWeekDay',
-          event.target.value
-        );
-      },
-      render: function() {
-        var value = this._getCurrentValue(),
-            timeOfDaySelection,
-            weekDaySelection,
-            monthDaySelection,
-            nthWeekDaySelection;
-
-
-        if (value.intervalType !== 'immediately') {
-          timeOfDaySelection = (
-            <Select
-              field={timeOfDayField}
-              item={this._getCurrentValue()}
-              onValueChange={this.handleTimeOfDayChange} />
-          );
-        }
-
-        if (value.intervalType === 'weekly'
-            || value.intervalType === 'nthWeekDay') {
-          weekDaySelection = (
-            <Select
-              field={weekDayField}
-              item={this._getCurrentValue()}
-              onValueChange={this.handleWeekDayChange} />
-          );
-        }
-
-        if (value.intervalType === 'monthly') {
-          monthDaySelection = (
-            <Select
-              field={monthDayField}
-              item={this._getCurrentValue()}
-              onValueChange={this.handleMonthDayChange} />
-          );
-        }
-
-        if (value.intervalType === 'nthWeekDay') {
-          nthWeekDaySelection = (
-            <Select
-              field={nthWeekDayField}
-              item={this._getCurrentValue()}
-              onValueChange={this.handleNthWeekDayChange} />
-          );
-        }
-
-        return (
-          <div>
-            <Select
-              field={intervalField}
-              item={this._getCurrentValue()}
-              onValueChange={this.handleIntervalChange} />
-
-            {nthWeekDaySelection}
-            {monthDaySelection}
-            {weekDaySelection}
-            {timeOfDaySelection}
-          </div>
-        );
-      },
     });
+  },
+  handleIntervalChange: function(event) {
+    return this.handleValueChange(
+      'intervalType',
+      event.target.value
+    );
+  },
+  handleTimeOfDayChange: function(event) {
+    return this.handleValueChange(
+      'timeOfDay',
+      event.target.value
+    );
+  },
+  handleWeekDayChange: function(event) {
+    return this.handleValueChange(
+      'weekDay',
+      event.target.value
+    );
+  },
+  handleMonthDayChange: function(event) {
+    return this.handleValueChange(
+      'monthDay',
+      event.target.value
+    );
+  },
+  handleNthWeekDayChange: function(event) {
+    return this.handleValueChange(
+      'nthWeekDay',
+      event.target.value
+    );
+  },
+  render: function() {
+    const value = this._getCurrentValue();
+    let timeOfDaySelection;
+    let weekDaySelection;
+    let monthDaySelection;
+    let nthWeekDaySelection;
 
-    return NotificationScheduling;
+    if (value.intervalType !== 'immediately') {
+      timeOfDaySelection = (
+        <Select
+          field={timeOfDayField}
+          item={this._getCurrentValue()}
+          onValueChange={this.handleTimeOfDayChange} />
+      );
+    }
+
+    if (value.intervalType === 'weekly' || value.intervalType === 'nthWeekDay') {
+      weekDaySelection = (
+        <Select
+          field={weekDayField}
+          item={this._getCurrentValue()}
+          onValueChange={this.handleWeekDayChange} />
+      );
+    }
+
+    if (value.intervalType === 'monthly') {
+      monthDaySelection = (
+        <Select
+          field={monthDayField}
+          item={this._getCurrentValue()}
+          onValueChange={this.handleMonthDayChange} />
+      );
+    }
+
+    if (value.intervalType === 'nthWeekDay') {
+      nthWeekDaySelection = (
+        <Select
+          field={nthWeekDayField}
+          item={this._getCurrentValue()}
+          onValueChange={this.handleNthWeekDayChange} />
+      );
+    }
+
+    return (
+      <div>
+        <Select
+          field={intervalField}
+          item={this._getCurrentValue()}
+          onValueChange={this.handleIntervalChange} />
+
+        {nthWeekDaySelection}
+        {monthDaySelection}
+        {weekDaySelection}
+        {timeOfDaySelection}
+      </div>
+    );
   }
-);
+});
+
+module.exports = NotificationScheduling;

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

@@ -1,190 +1,180 @@
-define(
-  [
-    'underscore',
-    'react',
-    'react-router',
-    'mailpoet',
-    'form/fields/select.jsx',
-    'form/fields/text.jsx',
-    'newsletters/breadcrumb.jsx'
-  ],
-  function(
-    _,
-    React,
-    Router,
-    MailPoet,
-    Select,
-    Text,
-    Breadcrumb
-  ) {
+import _ from 'underscore'
+import React from 'react'
+import MailPoet from 'mailpoet'
+import Select from 'form/fields/select.jsx'
+import Text from 'form/fields/text.jsx'
+import {
+  timeDelayValues,
+  intervalValues
+} from 'newsletters/scheduling/common.jsx'
 
-    var availableRoles = window.mailpoet_roles || {};
-    var availableSegments = window.mailpoet_segments || {};
-
-    var events = {
-      name: 'event',
-      values: {
-        'segment': MailPoet.I18n.t('onSubscriptionToList'),
-        'user': MailPoet.I18n.t('onWordpressUserRegistration'),
-      }
-    };
-
-    var availableSegmentValues = _.object(_.map(
-      availableSegments,
-      function(segment) {
-        var name = segment.name;
-        if (segment.subscribers > 0) {
-          name += ' (%$1s)'.replace('%$1s', parseInt(segment.subscribers).toLocaleString());
-        }
-        return [segment.id, name];
-      }
-    ));
-    var segmentField = {
-      name: 'segment',
-      values: availableSegmentValues,
-    };
-
-    var roleField = {
-      name: 'role',
-      values: availableRoles,
-    };
-
-    var afterTimeNumberField = {
-      name: 'afterTimeNumber',
-      size: 3,
-    };
-
-    var afterTimeTypeField = {
-      name: 'afterTimeType',
-      values: {
-        'immediate': MailPoet.I18n.t('delayImmediately'),
-        'hours': MailPoet.I18n.t('delayHoursAfter'),
-        'days': MailPoet.I18n.t('delayDaysAfter'),
-        'weeks': MailPoet.I18n.t('delayWeeksAfter'),
-      }
-    };
-
-    var WelcomeScheduling = React.createClass({
-      contextTypes: {
-        router: React.PropTypes.object.isRequired
-      },
-      _getCurrentValue: function() {
-        return this.props.item[this.props.field.name] || {};
-      },
-      handleValueChange: function(name, value) {
-        var oldValue = this._getCurrentValue(),
-            newValue = {};
-        newValue[name] = value;
-
-        return this.props.onValueChange({
-          target: {
-            name: this.props.field.name,
-            value: _.extend({}, oldValue, newValue)
-          }
-        });
-      },
-      handleEventChange: function(event) {
-        return this.handleValueChange(
-          'event',
-          event.target.value
-        );
-      },
-      handleSegmentChange: function(event) {
-        return this.handleValueChange(
-          'segment',
-          event.target.value
-        );
-      },
-      handleRoleChange: function(event) {
-        return this.handleValueChange(
-          'role',
-          event.target.value
-        );
-      },
-      handleAfterTimeNumberChange: function(event) {
-        return this.handleValueChange(
-          'afterTimeNumber',
-          event.target.value
-        );
-      },
-      handleAfterTimeTypeChange: function(event) {
-        return this.handleValueChange(
-          'afterTimeType',
-          event.target.value
-        );
-      },
-      handleNext: function() {
-        MailPoet.Ajax.post({
-          endpoint: 'newsletters',
-          action: 'create',
-          data: {
-            type: 'welcome',
-            options: this.state,
-          },
-        }).done(function(response) {
-          if(response.result && response.newsletter.id) {
-            this.showTemplateSelection(response.newsletter.id);
-          } else {
-            if(response.errors.length > 0) {
-              response.errors.map(function(error) {
-                MailPoet.Notice.error(error);
-              });
-            }
-          }
-        }.bind(this));
-      },
-      showTemplateSelection: function(newsletterId) {
-        this.context.router.push(`/template/${newsletterId}`);
-      },
-      render: function() {
-        var value = this._getCurrentValue(),
-            roleSegmentSelection, timeNumber;
-
-        if (value.event === 'user') {
-          roleSegmentSelection = (
-            <Select
-              field={roleField}
-              item={this._getCurrentValue()}
-              onValueChange={this.handleRoleChange} />
-          );
-        } else {
-          roleSegmentSelection = (
-            <Select
-              field={segmentField}
-              item={this._getCurrentValue()}
-              onValueChange={this.handleSegmentChange} />
-          );
-        }
-        if (value.afterTimeType !== 'immediate') {
-          timeNumber = (
-            <Text
-              field={afterTimeNumberField}
-              item={this._getCurrentValue()}
-              onValueChange={this.handleAfterTimeNumberChange} />
-          );
-        }
-
-        return (
-          <div>
-            <Select
-              field={events}
-              item={this._getCurrentValue()}
-              onValueChange={this.handleEventChange} />
-
-            {roleSegmentSelection}
-
-            {timeNumber}
-
-            <Select
-              field={afterTimeTypeField}
-              item={this._getCurrentValue()}
-              onValueChange={this.handleAfterTimeTypeChange}/>
-          </div>
-        );
-      },
-    });
-
-    return WelcomeScheduling;
+const availableRoles = window.mailpoet_roles || {};
+const availableSegments = _.filter(
+  window.mailpoet_segments || [],
+  function (segment) {
+    return segment.type === 'default';
   }
 );
 
+const events = {
+  name: 'event',
+  values: {
+    'segment': MailPoet.I18n.t('onSubscriptionToList'),
+    'user': MailPoet.I18n.t('onWPUserRegistration'),
+  }
+};
+
+const availableSegmentValues = _.object(_.map(
+  availableSegments,
+  function(segment) {
+    let name = segment.name;
+    if (segment.subscribers > 0) {
+      name += ' (%$1s)'.replace('%$1s', parseInt(segment.subscribers).toLocaleString());
+    }
+    return [segment.id, name];
+  }
+));
+const segmentField = {
+  name: 'segment',
+  values: availableSegmentValues,
+  sortBy: (key, value) => value.toLowerCase()
+};
+
+const roleField = {
+  name: 'role',
+  values: availableRoles
+};
+
+const afterTimeNumberField = {
+  name: 'afterTimeNumber',
+  size: 3
+};
+
+const afterTimeTypeField = {
+  name: 'afterTimeType',
+  values: timeDelayValues
+};
+
+const WelcomeScheduling = React.createClass({
+  contextTypes: {
+    router: React.PropTypes.object.isRequired
+  },
+  _getCurrentValue: function() {
+    return (this.props.item[this.props.field.name] || {});
+  },
+  handleValueChange: function(name, value) {
+    const oldValue = this._getCurrentValue();
+    let newValue = {};
+
+    newValue[name] = value;
+
+    return this.props.onValueChange({
+      target: {
+        name: this.props.field.name,
+        value: _.extend({}, oldValue, newValue)
+      }
+    });
+  },
+  handleEventChange: function(event) {
+    return this.handleValueChange(
+      'event',
+      event.target.value
+    );
+  },
+  handleSegmentChange: function(event) {
+    return this.handleValueChange(
+      'segment',
+      event.target.value
+    );
+  },
+  handleRoleChange: function(event) {
+    return this.handleValueChange(
+      'role',
+      event.target.value
+    );
+  },
+  handleAfterTimeNumberChange: function(event) {
+    return this.handleValueChange(
+      'afterTimeNumber',
+      event.target.value
+    );
+  },
+  handleAfterTimeTypeChange: function(event) {
+    return this.handleValueChange(
+      'afterTimeType',
+      event.target.value
+    );
+  },
+  handleNext: function() {
+    MailPoet.Ajax.post({
+      endpoint: 'newsletters',
+      action: 'create',
+      data: {
+        type: 'welcome',
+        options: this.state
+      }
+    }).done(function(response) {
+      if (response.result && response.newsletter.id) {
+        this.showTemplateSelection(response.newsletter.id);
+      } else {
+        if (response.errors.length > 0) {
+          response.errors.map(function(error) {
+            MailPoet.Notice.error(error);
+          });
+        }
+      }
+    }.bind(this));
+  },
+  showTemplateSelection: function(newsletterId) {
+    this.context.router.push(`/template/${ newsletterId }`);
+  },
+  render: function() {
+    const value = this._getCurrentValue();
+    let roleSegmentSelection;
+    let timeNumber;
+
+    if (value.event === 'user') {
+      roleSegmentSelection = (
+        <Select
+          field={ roleField }
+          item={ this._getCurrentValue() }
+          onValueChange={ this.handleRoleChange } />
+      );
+    } else {
+      roleSegmentSelection = (
+        <Select
+          field={ segmentField }
+          item={ this._getCurrentValue() }
+          onValueChange={ this.handleSegmentChange } />
+      );
+    }
+    if (value.afterTimeType !== 'immediate') {
+      timeNumber = (
+        <Text
+          field={ afterTimeNumberField }
+          item={ this._getCurrentValue() }
+          onValueChange={ this.handleAfterTimeNumberChange } />
+      );
+    }
+
+    return (
+      <div>
+        <Select
+          field={ events }
+          item={ this._getCurrentValue() }
+          onValueChange={ this.handleEventChange } />
+
+        { roleSegmentSelection }
+
+        { timeNumber }
+
+        <Select
+          field={ afterTimeTypeField }
+          item={ this._getCurrentValue() }
+          onValueChange={ this.handleAfterTimeTypeChange } />
+      </div>
+    );
+  },
+});
+
+module.exports = WelcomeScheduling;

assets/js/src/segments/list.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Router, Link } from 'react-router'
-
 import jQuery from 'jquery'
 import MailPoet from 'mailpoet'
 import classNames from 'classnames'
@@ -15,23 +14,19 @@ var columns = [
   },
   {
     name: 'description',
-    label: MailPoet.I18n.t('description'),
-    sortable: false
+    label: MailPoet.I18n.t('description')
   },
   {
     name: 'subscribed',
-    label: MailPoet.I18n.t('subscribed'),
-    sortable: false
+    label: MailPoet.I18n.t('subscribed')
   },
   {
     name: 'unconfirmed',
-    label: MailPoet.I18n.t('unconfirmed'),
-    sortable: false
+    label: MailPoet.I18n.t('unconfirmed')
   },
   {
     name: 'unsubscribed',
-    label: MailPoet.I18n.t('unsubscribed'),
-    sortable: false
+    label: MailPoet.I18n.t('unsubscribed')
   },
   {
     name: 'created_at',
@@ -191,13 +186,20 @@ const SegmentList = React.createClass({
     const unconfirmed = ~~(segment.subscribers_count.unconfirmed || 0);
     const unsubscribed = ~~(segment.subscribers_count.unsubscribed || 0);
 
-    let segment_name = (
-      <Link to={ `/edit/${segment.id}` }>{ segment.name }</Link>
-    );
+    let segment_name;
 
-    // the WP users segment is not editable so just display its name
     if (segment.type === 'wp_users') {
-      segment_name = segment.name;
+      // the WP users segment is not editable so just display its name
+      segment_name = (
+        <span className="row-title">{ segment.name }</span>
+      );
+    } else {
+      segment_name = (
+        <Link
+          className="row-title"
+          to={ `/edit/${segment.id}` }
+        >{ segment.name }</Link>
+      );
     }
 
     return (
@@ -244,6 +246,8 @@ const SegmentList = React.createClass({
           columns={ columns }
           bulk_actions={ bulk_actions }
           item_actions={ item_actions }
+          sort_by="name"
+          sort_order="asc"
         />
       </div>
     );

assets/js/src/segments/segments.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
 import { createHashHistory } from 'history'
+
 import SegmentList from 'segments/list.jsx'
 import SegmentForm from 'segments/form.jsx'
 

assets/js/src/settings/tabs.js

@@ -34,16 +34,13 @@ define(
           // show sending methods
           jQuery('.mailpoet_sending_methods').fadeIn();
         } else {
-          // toggle SPF/DKIM (hidden if the sending method is MailPoet)
+          // toggle SPF (hidden if the sending method is MailPoet)
           jQuery('#mailpoet_mta_spf')[
             (group === 'mailpoet')
             ? 'hide'
             : 'show'
           ]();
 
-          // (HIDDEN FOR BETA)
-          jQuery('#mailpoet_mta_dkim').hide();
-
           // hide sending methods
           jQuery('.mailpoet_sending_methods').hide();
 

assets/js/src/subscribers/form.jsx

@@ -73,7 +73,7 @@ define(
           });
         },
         filter: function(segment) {
-          return !!(!segment.deleted_at);
+          return !!(!segment.deleted_at && segment.type === 'default');
         },
         getSearchLabel: function(segment, subscriber) {
           let label = '';