Release 3.0.0-beta.35.0.0

Use a faster SVN workflow in release publishing automation [MAILPOET-913]

.circle_ci/apache/mailpoet.loc.conf

@@ -8,8 +8,7 @@ Listen 8080
   LogLevel notice
 
   <Directory /home/ubuntu/mailpoet/wordpress>
-    AllowOverride All
-    Allow from All
+    Require all granted
   </Directory>
 </VirtualHost>
 

.env.sample

@@ -13,4 +13,7 @@ WP_TEST_MAILER_MAILPOET_API=""
 WP_TEST_MAILER_SENDGRID_API=""
 WP_TEST_MAILER_SMTP_HOST=""
 WP_TEST_MAILER_SMTP_LOGIN=""
-WP_TEST_MAILER_SMTP_PASSWORD=""
+WP_TEST_MAILER_SMTP_PASSWORD=""
+WP_SVN_USERNAME=""
+WP_SVN_PASSWORD=""
+WP_TRANSIFEX_API_TOKEN=""

.gitignore

@@ -1,20 +1,22 @@
-.DS_Store
-TODO
-composer.phar
-/vendor
-tests/_output/*
-tests/acceptance.suite.yml
-tests/_support/_generated/*
-node_modules
-.env
-npm-debug.log
-!tasks/**
-/views/cache/**
-temp
-.idea
-mailpoet.zip
-tests/javascript/testBundles
-assets/css/*.css
-assets/js/*.js
-.vagrant
-lang
+.DS_Store
+TODO
+composer.phar
+/vendor
+tests/_output/*
+tests/acceptance.suite.yml
+tests/_support/_generated/*
+node_modules
+.env
+npm-debug.log
+!tasks/**
+/views/cache/**
+temp
+.idea
+mailpoet.zip
+tests/javascript/testBundles
+assets/css/*.css
+assets/js/*.js
+.vagrant
+lang
+.mp_svn
+/nbproject/

.tx/config

@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[mp3.mailpoet]
+source_file = lang/mailpoet.pot
+file_filter = lang/mailpoet-<lang>.po
+source_lang = en_US
+type = PO
+minimum_perc = 75

CONTRIBUTING.md

@@ -5,30 +5,32 @@
 - CamelCase for classes.
 - camelCase for methods.
 - snake_case for variables and class properties.
-- Max line length at 80 chars.
-- Classes can be no longer than 100 LOC.
-- Methods can be no longer than 5 LOC.
-- Pass no more than 4 parameters/hash keys into a method.
 - Composition over Inheritance.
-- Comments are a code smell.
-- Routes can instantiate only one object.
+- Comments are a code smell. If you need to use a comment - see if same idea can be achieved by more clearly expressing code.
 - Require other classes with 'use' at the beginning of the class file.
 - Do not specify 'public' if method is public, it's implicit.
 - Always use guard clauses.
+- Ensure compatibility with PHP 5.3 and newer versions.
+- Cover your code in tests.
+
+Recommendations:
+- Max line length at 80 chars.
+- Keep classes under 100 LOC.
+- Keep methods under 10 LOC.
+- Pass no more than 4 parameters/hash keys into a method.
+- Keep Pull Requests small, under 100 LOC changed.
 
 ## Git flow.
 - Do not commit to master.
 - Open a short-living feature branch.
 - Open a pull request.
-- Add close #issue in pull request description.
+- Add Jira issue reference in the title of the Pull Request.
 - Work on the pull request.
-- Wait for confirmation before merging to master.
-- No one will accept a pull request that doesn't have 100% test coverage.
+- Wait for review and confirmation from another developer before merging to master.
 - Commit title no more than 80 chars, empty line after.
 - Commit description as long as you want, 80 chars wrap.
-- Keep the GitHub open issues count at less than 10.
 
 ## Issues creation.
+- Issues are managed on Jira.
 - Discuss issues on public Slack chats, discuss code in pull requests.
-- Organize features on Trello.
-- Open a small github issue only when it has been discussed.
+- Open a small Jira issue only when it has been discussed.

README.md

@@ -46,11 +46,21 @@ $ ./do compile:all
 $ ./do test:unit
 ```
 
+- JS tests (using Mocha):
+```sh
+$ ./do test:javascript
+```
+
 - Debug tests:
 ```sh
 $ ./do test:debug
 ```
 
+- Code linters and quality checkers:
+```sh
+$ ./do qa
+```
+
 # CSS
 - [Stylus](https://learnboost.github.io/stylus/)
 - [Nib extension](http://tj.github.io/nib/)
@@ -109,6 +119,7 @@ Once javascript is compiled with `./do compile:javascript`, your module will be
 ```php
 __()
 _n()
+_x()
 ```
 
 ```html
@@ -128,3 +139,39 @@ _n()
 - Handlebars.
 
 You can use Twig i18n functions in Handlebars, just load your template from a Twig view.
+
+# Build
+
+To build a plugin , run `./build.sh`.
+
+Some build process steps are described below (their dependencies etc.).
+
+## packtranslations step
+
+This step imports translations from Transifex and generates MO files. It requires:
+* `tx` client: https://docs.transifex.com/client/installing-the-client
+* `msgfmt` command (from Gettext package)
+Finally , a `WP_TRANSIFEX_API_TOKEN` environment variable should be initialized with a valid key.
+
+# Publish
+
+The `publish` command currently does the following:
+* Pushes translations POT file to Transifex;
+* Publishes the release in SVN.
+
+Before you run it, you need to:
+1. Ensure there is an up-to-date local copy of MailPoet SVN repository in `.mp_svn` directory by running `./do svn:checkout`.
+2. Have all your features merged in Git `master`, your `mailpoet.php` and `readme.txt` tagged with a new version.
+3. Run `./build.sh` to produce a `mailpoet.zip` distributable archive.
+
+Everything's ready? Then run `./do publish`.
+If the job goes fine, you'll get a message like this:
+```
+Go to '.mp_svn' and run 'svn ci -m "Release 3.0.0-beta.9"' to publish the
+release
+
+Run 'svn copy ...' to tag the release
+```
+It's quite literal: you can review the changes to be pushed and if you're satisfied, run the suggested command to finish the release publishing process.
+
+If you're confident, execute `./do publish --force` and your release will be published to the remote SVN repository without manual intervention (automatically). For easier authentication you might want to set `WP_SVN_USERNAME` and `WP_SVN_PASSWORD` environment variables.

RoboFile.php

@@ -68,9 +68,9 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function compileAll() {
-    $collection = $this->collection();
-    $collection->add(array($this, 'compileJs'));
-    $collection->add(array($this, 'compileCss'));
+    $collection = $this->collectionBuilder();
+    $collection->addCode(array($this, 'compileJs'));
+    $collection->addCode(array($this, 'compileCss'));
     return $collection->run();
   }
 
@@ -99,16 +99,29 @@ class RoboFile extends \Robo\Tasks {
 
   function makepot() {
     return $this->_exec('./node_modules/.bin/grunt makepot'.
-      ' --gruntfile '.__DIR__.'/tasks/makepot/makepot.js'.
-      ' --base_path '.__DIR__
+      ' --gruntfile='.__DIR__.'/tasks/makepot/makepot.js'.
+      ' --base_path='.__DIR__
     );
   }
 
   function pushpot() {
-    return $this->_exec('./node_modules/.bin/grunt pushpot'.
-      ' --gruntfile '.__DIR__.'/tasks/makepot/makepot.js'.
-      ' --base_path '.__DIR__
-    );
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'txinit'))
+      ->taskExec('tx push -s')
+      ->run();
+  }
+
+  function packtranslations() {
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'txinit'))
+      ->taskExec('./tasks/pack_translations.sh')
+      ->run();
+  }
+
+  function txinit() {
+    // Define WP_TRANSIFEX_API_TOKEN env. variable
+    $this->loadEnv();
+    return $this->_exec('./tasks/transifex_init.sh');
   }
 
   function testUnit($opts=['file' => null, 'xml' => false]) {
@@ -171,9 +184,9 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function qa() {
-    $collection = $this->collection();
-    $collection->add(array($this, 'qaLint'));
-    $collection->add(function() {
+    $collection = $this->collectionBuilder();
+    $collection->addCode(array($this, 'qaLint'));
+    $collection->addCode(function() {
       return $this->qaCodeSniffer('all');
     });
     return $collection->run();
@@ -193,14 +206,169 @@ class RoboFile extends \Robo\Tasks {
       './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/Util/pQuery/*,./lib/Config/PopulatorData/Templates/* '.
       'lib/ '.
       $severityFlag
     );
   }
 
+  function svnCheckout() {
+    $svn_dir = ".mp_svn";
+
+    $collection = $this->collectionBuilder();
+
+    // Clean up the SVN dir for faster shallow checkout
+    if(file_exists($svn_dir)) {
+      $collection->taskExecStack()
+        ->exec('rm -rf ' . $svn_dir);
+    }
+
+    $collection->taskFileSystemStack()
+        ->mkdir($svn_dir);
+
+    return $collection->taskExecStack()
+      ->stopOnFail()
+      ->dir($svn_dir)
+      ->exec('svn co https://plugins.svn.wordpress.org/mailpoet/ -N .')
+      ->exec('svn up trunk')
+      ->exec('svn up assets')
+      ->run();
+  }
+
+  function svnPublish($opts = ['force' => false]) {
+    $this->loadWPFunctions();
+
+    $svn_dir = ".mp_svn";
+    $plugin_data = get_plugin_data('mailpoet.php', false, false);
+    $plugin_version = $plugin_data['Version'];
+    $plugin_dist_name = sanitize_title_with_dashes($plugin_data['Name']);
+    $plugin_dist_file = $plugin_dist_name . '.zip';
+
+    $this->say('Publishing version: ' . $plugin_version);
+
+    // Sanity checks
+    if(!is_readable($plugin_dist_file)) {
+      $this->say("Failed to access " . $plugin_dist_file);
+      return;
+    } elseif(!file_exists($svn_dir . "/.svn/")) {
+      $this->say("$svn_dir/.svn/ dir not found, is it a SVN repository?");
+      return;
+    } elseif(file_exists($svn_dir . "/tags/" . $plugin_version)) {
+      $this->say("A SVN tag already exists: " . $plugin_version);
+      return;
+    }
+
+    $collection = $this->collectionBuilder();
+
+    // Clean up tmp dirs if the previous run was halted
+    if(file_exists("$svn_dir/trunk_new") || file_exists("$svn_dir/trunk_old")) {
+      $collection->taskFileSystemStack()
+        ->stopOnFail()
+        ->remove(array("$svn_dir/trunk_new", "$svn_dir/trunk_old"));
+    }
+
+    // Extract the distributable zip to tmp trunk dir
+    $collection->taskExtract($plugin_dist_file)
+      ->to("$svn_dir/trunk_new")
+      ->preserveTopDirectory(false);
+
+    // Rename current trunk
+    if(file_exists("$svn_dir/trunk")) {
+      $collection->taskFileSystemStack()
+        ->rename("$svn_dir/trunk", "$svn_dir/trunk_old");
+    }
+
+    // Replace old trunk with a new one
+    $collection->taskFileSystemStack()
+      ->stopOnFail()
+      ->rename("$svn_dir/trunk_new", "$svn_dir/trunk")
+      ->remove("$svn_dir/trunk_old");
+
+    // Add new repository assets
+    $collection->taskFileSystemStack()
+      ->mirror('./plugin_repository/assets', "$svn_dir/assets_new");
+
+    // Rename current assets folder
+    if(file_exists("$svn_dir/assets")) {
+      $collection->taskFileSystemStack()
+        ->rename("$svn_dir/assets", "$svn_dir/assets_old");
+    }
+
+    // Replace old assets with new ones
+    $collection->taskFileSystemStack()
+      ->stopOnFail()
+      ->rename("$svn_dir/assets_new", "$svn_dir/assets")
+      ->remove("$svn_dir/assets_old");
+
+    // Windows compatibility
+    $awkCmd = '{print " --force \""$2"\""}';
+    // Mac OS X compatibility
+    $xargsFlag = (stripos(PHP_OS, 'Darwin') !== false) ? '' : '-r';
+
+    $collection->taskExecStack()
+      ->stopOnFail()
+      // Set SVN repo as working directory
+      ->dir($svn_dir)
+      // Remove files from SVN repo that have already been removed locally
+      ->exec("svn st | grep ^! | awk '$awkCmd' | xargs $xargsFlag svn rm")
+      // Recursively add files to SVN that haven't been added yet
+      ->exec("svn add --force * --auto-props --parents --depth infinity -q");
+
+    $result = $collection->run();
+
+    if($result->wasSuccessful()) {
+      // Run or suggest release command depending on a flag
+      $repo_url = "https://plugins.svn.wordpress.org/$plugin_dist_name";
+      $release_cmd = "svn ci -m \"Release $plugin_version\"";
+      $tag_cmd = "svn copy $repo_url/trunk $repo_url/tags/$plugin_version -m \"Tag $plugin_version\"";
+      if(!empty($opts['force'])) {
+        $svn_login = getenv('WP_SVN_USERNAME');
+        $svn_password = getenv('WP_SVN_PASSWORD');
+        if ($svn_login && $svn_password) {
+          $release_cmd .= " --username $svn_login --password $svn_password";
+        } else {
+          $release_cmd .= ' --force-interactive';
+        }
+        $result = $this->taskExecStack()
+          ->stopOnFail()
+          ->dir($svn_dir)
+          ->exec($release_cmd)
+          ->exec($tag_cmd)
+          ->run();
+      } else {
+        $this->yell(
+          "Go to '$svn_dir' and run '$release_cmd' to publish the release"
+        );
+        $this->yell(
+          "Run '$tag_cmd' to tag the release"
+        );
+      }
+    }
+
+    return $result;
+  }
+
+  public function publish($opts = ['force' => false]) {
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'pushpot'))
+      ->addCode(function () use ($opts) {
+        return $this->svnPublish($opts);
+      })
+      ->run();
+  }
+
   protected function loadEnv() {
     $dotenv = new Dotenv\Dotenv(__DIR__);
     $dotenv->load();
   }
+
+  protected function loadWPFunctions() {
+    $this->loadEnv();
+    define('ABSPATH', getenv('WP_TEST_PATH') . '/');
+    define('WPINC', 'wp-includes');
+    require_once(ABSPATH . WPINC . '/functions.php');
+    require_once(ABSPATH . WPINC . '/formatting.php');
+    require_once(ABSPATH . WPINC . '/plugin.php');
+    require_once(ABSPATH . 'wp-admin/includes/plugin.php');
+  }
 }

assets/css/src/admin.styl

@@ -22,3 +22,5 @@
 @require 'progress_bar'
 
 @require 'subscribers'
+
+@require 'mp2migrator'

assets/css/src/listing/newsletters.styl

@@ -1,3 +1,53 @@
+$excellent-badge-color = #2993ab
+$good-badge-color = #f0b849
+$bad-badge-color = #d54e21
+$green-badge-color = #55bd56
+
 #newsletters_container
   h2.nav-tab-wrapper
-    margin-bottom: 1rem
+    margin-bottom: 1rem
+
+.mailpoet_stats_text
+  font-size: 14px
+  font-weight: 600;
+
+.mailpoet_stat
+
+  &_excellent
+    color: $excellent-badge-color
+
+  &_good
+    color: $good-badge-color
+
+  &_bad
+    color: $bad-badge-color
+
+  &_hidden
+    display: none
+
+  &_link_small
+    text-decoration: underline !important
+    font-size: 0.75rem
+
+.mailpoet_badge
+  padding: 4px 6px 3px 6px
+  color: #FFFFFF
+  margin-right: 4px
+  text-transform: uppercase
+  font-size: 0.5625rem
+  font-weight: 500
+  border-radius: 3px
+  letter-spacing: 1px
+  vertical-align: middle
+
+  &_excellent
+    background: $excellent-badge-color
+
+  &_good
+    background: $good-badge-color
+
+  &_bad
+    background: $bad-badge-color
+
+  &_green
+    background: $green-badge-color

assets/css/src/mp2migrator.styl

@@ -0,0 +1,33 @@
+#logger
+  width: 100%
+  height: 300px
+  background-color: transparent
+  border: 0
+  border-top: 1px #aba9a9 solid
+  padding: 2px
+  overflow: scroll
+  resize: both
+  font-size: 0.85em
+  margin-top: 20px
+
+#progressbar
+  width: 50%
+  background-color: #d8d8d8
+  border-radius: 5px
+
+progressbar_color = #fecf23
+progressbar_gradient_to_color = #fd9215
+
+.ui-progressbar .ui-progressbar-value
+  height: 100%
+  background-color: progressbar_color
+  background-image: linear-gradient(to bottom, progressbar_color, progressbar_gradient_to_color)
+  border-radius: 3px
+  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset
+  border 0
+
+.mailpoet_progress_label
+  font-size: 15px
+
+.error_msg
+  color: #f00

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

@@ -34,7 +34,7 @@ $block-text-line-height = $text-line-height
   position: relative
   line-height: $block-text-line-height
 
-  p, h1, h2, h3, h4, h5, h6
+  h1, h2, h3, h4, h5, h6
     line-height: $block-text-line-height
     padding: 0
     margin: 0
@@ -44,9 +44,15 @@ $block-text-line-height = $text-line-height
   h1, h2, h3, h4, h5, h6
     margin-bottom: 0.3em
 
-  p
+  p:not(.mailpoet_wp_post)
     margin-top: 0
     margin-bottom: 0
+    padding: 0
+    margin: 0
+
+  p
+    line-height: $block-text-line-height
+    font-style: normal
     font-weight: normal
 
   ul

assets/css/src/newsletter_editor/libraryOverrides.styl

@@ -131,6 +131,7 @@ body
   display: none
 
 .wrap > .mailpoet_notice,
+.notice
 .update-nag
   margin-left: 2px + 15px !important
 

assets/css/src/progress_bar.styl

@@ -4,6 +4,7 @@
   padding: 0
   width: 100%
   margin: 0
+  margin-bottom: 10px
   border-radius: 5px
   position: relative
 
@@ -25,5 +26,5 @@
 
 .mailpoet_progress_complete
   .mailpoet_progress_bar
-    background-color: #fecf23
-    background-image: linear-gradient(top, #fecf23, #fd9215)
+    background-color: hsla(191, 78%, 80%, 1)
+    background-image: linear-gradient(top,  hsla(191, 78%, 80%, 1), hsla(191, 76%, 67%, 1))

assets/css/src/settings.styl

@@ -15,13 +15,12 @@
       padding 15px 15px 0 15px
       margin 0 25px 25px 0
       width 300px
-      height 250px
+      height 300px
       border 1px solid #dedede
       background-color #fff
     h3
       text-align center
       height 54px
-      line-height 54px
       font-size 1.5em
     .mailpoet_description
       font-size 14px
@@ -39,6 +38,7 @@
         font-weight bold
     .mailpoet_active
       .mailpoet_status
+        background-color #088b00
         span
           visibility visible
       #mailpoet_mta_activate
@@ -52,6 +52,15 @@
       .button-secondary
         margin 0 -6px -4px 0
 
+  // premium key
+  .mailpoet_key
+    &_valid
+      &::before
+        content '✔ '
+    &_invalid
+      &::before
+        content: '✗ '
+
   // responsive
   @media screen and (max-width: 782px)
     .form-table th

assets/js/src/ajax.js

@@ -5,6 +5,7 @@ define('ajax', ['mailpoet', 'jquery', 'underscore'], function(MailPoet, jQuery,
       options: {},
       defaults: {
         url: null,
+        api_version: null,
         endpoint: null,
         action: null,
         token: null,
@@ -30,6 +31,7 @@ define('ajax', ['mailpoet', 'jquery', 'underscore'], function(MailPoet, jQuery,
       getParams: function() {
         return {
           action: 'mailpoet',
+          api_version: this.options.api_version,
           token: this.options.token,
           endpoint: this.options.endpoint,
           method: this.options.action,

assets/js/src/date.js

@@ -143,9 +143,7 @@ define('date',
       var convertedFormat = [];
       var escapeToken = false;
 
-      for (var index in format) {
-        var token = format[index];
-
+      for(var index = 0, token = ''; token = format.charAt(index); index++){
         if (escapeToken === true) {
           convertedFormat.push('['+token+']');
           escapeToken = false;

assets/js/src/form/form.jsx

@@ -64,6 +64,7 @@ define(
         this.setState({ loading: true });
 
         MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: this.props.endpoint,
           action: 'get',
           data: {
@@ -112,6 +113,7 @@ define(
         }
 
         MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: this.props.endpoint,
           action: 'save',
           data: item

assets/js/src/form_editor/form_editor.js

@@ -1024,7 +1024,7 @@ WysijaForm.Widget = Class.create(WysijaForm.Block, {
   },
   editSettings: function() {
     MailPoet.Modal.popup({
-      title: 'Edit field settings', // TODO: translate!
+      title: MailPoet.I18n.t('editFieldSettings'),
       template: jQuery('#form_template_field_settings').html(),
       data: this.getData(),
       onSuccess: function() {
@@ -1061,4 +1061,4 @@ function info(value) {
   } catch(e) {}
 }
 
-module.exports = WysijaForm;
+module.exports = WysijaForm;

assets/js/src/forms/list.jsx

@@ -77,7 +77,7 @@ const messages = {
 const bulk_actions = [
   {
     name: 'trash',
-    label: MailPoet.I18n.t('trash'),
+    label: MailPoet.I18n.t('moveToTrash'),
     onSuccess: messages.onTrash
   }
 ];
@@ -97,6 +97,7 @@ const item_actions = [
     label: MailPoet.I18n.t('duplicate'),
     onClick: function(item, refresh) {
       return MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
         endpoint: 'forms',
         action: 'duplicate',
         data: {
@@ -125,6 +126,7 @@ const item_actions = [
 const FormList = React.createClass({
   createForm() {
     MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'forms',
       action: 'create'
     }).done((response) => {

assets/js/src/i18n.js

@@ -1,10 +1,8 @@
 define('i18n',
   [
-    'mailpoet',
-    'underscore',
+    'mailpoet'
   ], function(
-    MailPoet,
-    _
+    MailPoet
 ) {
   'use strict';
 

assets/js/src/listing/listing.jsx

@@ -82,7 +82,7 @@ const ListingItem = React.createClass({
                   null,
                   this.props.item.id
                 ) }>
-                {MailPoet.I18n.t('trash')}
+                {MailPoet.I18n.t('moveToTrash')}
               </a>
             </span>
           );
@@ -198,6 +198,17 @@ const ListingItem = React.createClass({
 const ListingItems = React.createClass({
   render: function() {
     if (this.props.items.length === 0) {
+      let message;
+      if (this.props.loading === true) {
+        message = (this.props.messages.onLoadingItems
+          && this.props.messages.onLoadingItems(this.props.group))
+          || MailPoet.I18n.t('loadingItems');
+      } else {
+        message = (this.props.messages.onNoItemsFound
+          && this.props.messages.onNoItemsFound(this.props.group))
+          || MailPoet.I18n.t('noItemsFound');
+      }
+
       return (
         <tbody>
           <tr className="no-items">
@@ -207,11 +218,7 @@ const ListingItems = React.createClass({
                 + (this.props.is_selectable ? 1 : 0)
               }
               className="colspanchange">
-              {
-                (this.props.loading === true)
-                ? MailPoet.I18n.t('loadingItems')
-                : MailPoet.I18n.t('noItemsFound')
-              }
+              {message}
             </td>
           </tr>
         </tbody>
@@ -445,6 +452,7 @@ const Listing = React.createClass({
       this.clearSelection();
 
       MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
         endpoint: this.props.endpoint,
         action: 'listing',
         data: {
@@ -495,6 +503,7 @@ const Listing = React.createClass({
     });
 
     MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: this.props.endpoint,
       action: 'restore',
       data: {
@@ -522,6 +531,7 @@ const Listing = React.createClass({
     });
 
     MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: this.props.endpoint,
       action: 'trash',
       data: {
@@ -549,6 +559,7 @@ const Listing = React.createClass({
     });
 
     MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: this.props.endpoint,
       action: 'delete',
       data: {
@@ -611,6 +622,7 @@ const Listing = React.createClass({
     }
 
     return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: this.props.endpoint,
       action: 'bulkAction',
       data: data
@@ -788,6 +800,12 @@ const Listing = React.createClass({
       groups = false;
     }
 
+    // messages
+    let messages = {};
+    if (this.props.messages !== undefined) {
+      messages = this.props.messages;
+    }
+
     return (
       <div>
         { groups }
@@ -841,6 +859,7 @@ const Listing = React.createClass({
             count={ this.state.count }
             limit={ this.state.limit }
             item_actions={ item_actions }
+            messages={ messages }
             items={ items } />
 
           <tfoot>
@@ -873,4 +892,4 @@ const Listing = React.createClass({
   }
 });
 
-module.exports = Listing;
+module.exports = Listing;

assets/js/src/listing/pages.jsx

@@ -164,11 +164,16 @@ define([
           { 'one-page': (this.props.count <= this.props.limit) }
         );
 
+        var numberOfItemsLabel;
+        if (this.props.count == 1) {
+          numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsSingular');
+        } else {
+          numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsMultiple')
+            .replace('%$1d', this.props.count.toLocaleString());
+        }
         return (
           <div className={ classes }>
-            <span className="displaying-num">{
-              MailPoet.I18n.t('numberOfItems').replace('%$1d', this.props.count.toLocaleString())
-            }</span>
+            <span className="displaying-num">{ numberOfItemsLabel }</span>
             { pagination }
           </div>
         );

assets/js/src/modal.js

@@ -28,6 +28,9 @@ define('modal', ['mailpoet', 'jquery'],
       opened: false,
       locked: false,
 
+      // previously focused element
+      prevFocus: null,
+
       // sub panels
       subpanels: [],
 
@@ -59,6 +62,9 @@ define('modal', ['mailpoet', 'jquery'],
         // display overlay
         overlay: false,
 
+        // focus upon displaying
+        focus: true,
+
         // highlighted elements
         highlight: null,
 
@@ -71,7 +77,7 @@ define('modal', ['mailpoet', 'jquery'],
       options: {},
       templates: {
         overlay: '<div id="mailpoet_modal_overlay" style="display:none;"></div>',
-        popup: '<div id="mailpoet_popup">'+
+        popup: '<div id="mailpoet_popup" tabindex="-1">'+
         '<div class="mailpoet_popup_wrapper">'+
         '<a href="javascript:;" id="mailpoet_modal_close"></a>'+
         '<div id="mailpoet_popup_title"><h2></h2></div>'+
@@ -85,11 +91,11 @@ define('modal', ['mailpoet', 'jquery'],
         '</div>',
         panel: '<div id="mailpoet_panel">'+
         '<a href="javascript:;" id="mailpoet_modal_close"></a>'+
-        '<div class="mailpoet_panel_wrapper">'+
+        '<div class="mailpoet_panel_wrapper" tabindex="-1">'+
         '<div class="mailpoet_panel_body clearfix"></div>'+
         '</div>'+
         '</div>',
-        subpanel: '<div class="mailpoet_panel_wrapper">'+
+        subpanel: '<div class="mailpoet_panel_wrapper" tabindex="-1">'+
         '<div class="mailpoet_panel_body clearfix"></div>'+
         '</div>'
       },
@@ -251,6 +257,11 @@ define('modal', ['mailpoet', 'jquery'],
             // add sub panel content
             jQuery('.mailpoet_'+this.options.type+'_body').last()
               .html(this.subpanels[(this.subpanels.length - 1)].element);
+
+            // focus on sub panel
+            if(this.options.focus) {
+              this.focus();
+            }
           } else if (this.options.element) {
             jQuery('.mailpoet_'+this.options.type+'_body').empty();
             jQuery('.mailpoet_'+this.options.type+'_body')
@@ -369,6 +380,9 @@ define('modal', ['mailpoet', 'jquery'],
           // set modal dimensions
           this.setDimensions();
 
+          // remember the previously focused element
+          this.prevFocus = jQuery(':focus');
+
           // add a flag on the body so that we can prevent scrolling
           jQuery('body').addClass('mailpoet_modal_opened');
 
@@ -388,6 +402,10 @@ define('modal', ['mailpoet', 'jquery'],
             }
           }
 
+          if(this.options.focus) {
+            this.focus();
+          }
+
           // set popup as opened
           this.opened = true;
 
@@ -398,6 +416,16 @@ define('modal', ['mailpoet', 'jquery'],
 
           return this;
         },
+        focus: function() {
+          if(this.options.type == 'popup') {
+            jQuery('#mailpoet_'+this.options.type).focus();
+          } else {
+            // panel and subpanel
+            jQuery('#mailpoet_'+this.options.type+' .mailpoet_panel_wrapper')
+              .filter(':visible').focus();
+          }
+          return this;
+        },
         highlightOn: function(element) {
           jQuery(element).addClass('mailpoet_modal_highlight');
           return this;
@@ -579,6 +607,11 @@ define('modal', ['mailpoet', 'jquery'],
             // remove last subpanels
             this.subpanels.pop();
 
+            // focus on previous panel
+            if(this.options.focus) {
+              this.focus();
+            }
+
             return this;
           }
 
@@ -591,6 +624,11 @@ define('modal', ['mailpoet', 'jquery'],
           // destroy modal element
           this.destroy();
 
+          // restore the previously focused element
+          if(this.prevFocus !== undefined){
+            this.prevFocus.focus();
+          }
+
           // reset options
           this.options = {
             onSuccess: null,

assets/js/src/mp2migrator.js

@@ -0,0 +1,187 @@
+define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
+  'use strict';
+  MailPoet.MP2Migrator = {
+
+    fatal_error: '',
+    is_logging: false,
+
+    startLogger: function () {
+      MailPoet.MP2Migrator.is_logging = true;
+      clearTimeout(MailPoet.MP2Migrator.displayLogs_timeout);
+      clearTimeout(MailPoet.MP2Migrator.updateProgressbar_timeout);
+      clearTimeout(MailPoet.MP2Migrator.update_wordpress_info_timeout);
+      setTimeout(MailPoet.MP2Migrator.updateDisplay, 1000)
+    },
+
+    stopLogger: function () {
+      MailPoet.MP2Migrator.is_logging = false;
+    },
+
+    updateDisplay: function () {
+      MailPoet.MP2Migrator.displayLogs();
+      MailPoet.MP2Migrator.updateProgressbar();
+    },
+
+    displayLogs: function () {
+      jQuery.ajax({
+        url: mailpoet_mp2_migrator.log_file_url,
+        cache: false
+      }).done(function (result) {
+        jQuery("#logger").html('');
+        result.split("\n").forEach(function (row) {
+          if(row.substr(0, 7) === '[ERROR]' || row.substr(0, 9) === '[WARNING]' || row === MailPoet.I18n.t('import_stopped_by_user')) {
+            row = '<span class="error_msg">' + row + '</span>'; // Mark the errors in red
+          }
+          // Test if the import is complete
+          else if(row === MailPoet.I18n.t('import_complete')) {
+            jQuery('#import-actions').hide();
+            jQuery('#upgrade-completed').show();
+          }
+          jQuery("#logger").append(row + "<br />\n");
+
+        });
+        jQuery("#logger").append('<span class="error_msg">' + MailPoet.MP2Migrator.fatal_error + '</span>' + "<br />\n");
+      }).always(function () {
+        if(MailPoet.MP2Migrator.is_logging) {
+          MailPoet.MP2Migrator.displayLogs_timeout = setTimeout(MailPoet.MP2Migrator.displayLogs, 1000);
+        }
+      });
+    },
+
+    updateProgressbar: function () {
+      jQuery.ajax({
+        url: mailpoet_mp2_migrator.progress_url,
+        cache: false,
+        dataType: 'json'
+      }).always(function (result) {
+        // Move the progress bar
+        var progress = 0;
+        if((result.total !== undefined) && (Number(result.total) !== 0)) {
+          progress = Math.round(Number(result.current) / Number(result.total) * 100);
+        }
+        jQuery('#progressbar').progressbar('option', 'value', progress);
+        jQuery('#progresslabel').html(progress + '%');
+        if(Number(result.current !== 0)) {
+          jQuery('#skip-import').hide();
+        }
+        if(MailPoet.MP2Migrator.is_logging) {
+          MailPoet.MP2Migrator.updateProgressbar_timeout = setTimeout(MailPoet.MP2Migrator.updateProgressbar, 1000);
+        }
+      });
+    },
+
+    startImport: function () {
+      MailPoet.MP2Migrator.fatal_error = '';
+      // Start displaying the logs
+      MailPoet.MP2Migrator.startLogger();
+
+      // Disable the import button
+      MailPoet.MP2Migrator.import_button_label = jQuery('#import').val();
+      jQuery('#import').val(MailPoet.I18n.t('importing')).attr('disabled', 'disabled');
+      // Hide the Skip button
+      jQuery('#skip-import').hide();
+      // Show the stop button
+      jQuery('#stop-import').show();
+
+      // Run the import
+      MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
+        endpoint: 'MP2Migrator',
+        action: 'import',
+        data: {
+        }
+      }).always(function () {
+        MailPoet.MP2Migrator.stopLogger();
+        MailPoet.MP2Migrator.updateDisplay(); // Get the latest information after the import was stopped
+        MailPoet.MP2Migrator.reactivateImportButton();
+      }).done(function (response) {
+        if(response) {
+          MailPoet.MP2Migrator.fatal_error = response.data;
+        }
+      }).fail(function (response) {
+        if(response.errors.length > 0) {
+          MailPoet.Notice.error(
+            response.errors.map(function (error) {
+              return error.message;
+            }),
+            {scroll: true}
+          );
+        }
+      });
+      return false;
+    },
+
+    reactivateImportButton: function () {
+      jQuery('#import').val(MailPoet.MP2Migrator.import_button_label).removeAttr('disabled');
+      jQuery('#stop-import').hide();
+    },
+
+    stopImport: function () {
+      jQuery('#stop-import').attr('disabled', 'disabled');
+      // Stop the import
+      MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
+        endpoint: 'MP2Migrator',
+        action: 'stopImport',
+        data: {
+        }
+      }).always(function () {
+        jQuery('#stop-import').removeAttr('disabled'); // Enable the button
+        MailPoet.MP2Migrator.reactivateImportButton();
+        MailPoet.MP2Migrator.updateDisplay(); // Get the latest information after the import was stopped
+      });
+      MailPoet.MP2Migrator.stopLogger();
+      return false;
+    },
+
+    skipImport: function () {
+      MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
+        endpoint: 'MP2Migrator',
+        action: 'skipImport',
+        data: {
+        }
+      }).done(function () {
+        MailPoet.MP2Migrator.gotoWelcomePage();
+      });
+      return false;
+    },
+
+    gotoWelcomePage: function () {
+      window.location.href = 'admin.php?page=mailpoet-welcome';
+      return false;
+    }
+
+  };
+  
+  /**
+   * Actions to run when the DOM is ready
+   */
+  jQuery(function () {
+    jQuery('#progressbar').progressbar({value: 0});
+
+    // Import button
+    jQuery('#import').click(function() {
+      MailPoet.MP2Migrator.startImport();
+    });
+      
+    // Stop import button
+    jQuery('#stop-import').click(function() {
+      MailPoet.MP2Migrator.stopImport();
+    });
+
+    // Skip import link
+    jQuery('#skip-import').click(function() {
+      MailPoet.MP2Migrator.skipImport();
+    });
+
+    // Go to welcome page
+    jQuery('#goto-welcome').click(function() {
+      MailPoet.MP2Migrator.gotoWelcomePage();
+    });
+    
+    // Update the display
+    MailPoet.MP2Migrator.updateDisplay();
+  });
+
+});

assets/js/src/newsletter_editor/App.js

@@ -1,22 +1,14 @@
 define([
     'backbone',
     'backbone.marionette',
-    'backbone.supermodel',
+    'backbone.radio',
     'jquery',
     'underscore',
     'handlebars',
     'handlebars_helpers'
-  ], function(Backbone, Marionette, SuperModel, jQuery, _, Handlebars) {
+  ], function(Backbone, Marionette, Radio, jQuery, _, Handlebars) {
 
-  var app = new Marionette.Application(), AppView;
-
-  // Decoupled communication between application components
-  app.getChannel = function(channel) {
-    if (channel === undefined) return app.channel;
-    return Radio.channel(channel);
-  };
-
-  AppView = Marionette.LayoutView.extend({
+  var AppView = Marionette.View.extend({
     el: '#mailpoet_editor',
     regions: {
       stylesRegion: '#mailpoet_editor_styles',
@@ -27,10 +19,23 @@ define([
     },
   });
 
-  app.on('start', function(options) {
-    app._appView = new AppView();
+  var EditorApplication = Marionette.Application.extend({
+    region: '#mailpoet_editor',
+
+    onStart: function() {
+      this._appView = new AppView();
+      this.showView(this._appView);
+    },
+
+    getChannel: function(channel) {
+      if (channel === undefined) channel = 'global';
+      return Radio.channel(channel);
+    }
   });
 
+  var app = new EditorApplication();
   window.EditorApplication = app;
+
   return app;
+
 });

assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js

@@ -6,8 +6,9 @@
 define([
     'backbone.marionette',
     'newsletter_editor/behaviors/BehaviorsLookup',
+    'mailpoet',
     'spectrum'
-  ], function(Marionette, BehaviorsLookup, Spectrum) {
+  ], function(Marionette, BehaviorsLookup, MailPoet, Spectrum) {
 
   BehaviorsLookup.ColorPickerBehavior = Marionette.Behavior.extend({
     onRender: function() {
@@ -17,6 +18,8 @@ define([
         showInitial: true,
         preferredFormat: "hex6",
         allowEmpty: true,
+        chooseText: MailPoet.I18n.t('selectColor'),
+        cancelText: MailPoet.I18n.t('cancelColorSelection')
       });
     },
   });

assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js

@@ -71,6 +71,7 @@ define([
             markerWidth = '',
             markerHeight = '',
             containerOffset = element.offset(),
+            viewCollection = that.getCollection(),
             marker, targetModel, targetView, targetElement,
             topOffset, leftOffset, isLastBlockInsertion,
             $targetBlock, margin;
@@ -80,19 +81,19 @@ define([
           element.find('.mailpoet_drop_marker').remove();
 
           // Allow empty collections to handle their own drop marking
-          if (view.model.get('blocks').isEmpty()) return;
+          if (viewCollection.isEmpty()) return;
 
-          if (view.collection.length === 0) {
+          if (viewCollection.length === 0) {
             targetElement = element.find(view.childViewContainer);
             topOffset = targetElement.offset().top - element.offset().top;
             leftOffset = targetElement.offset().left - element.offset().left;
             markerWidth = targetElement.width();
             markerHeight = targetElement.height();
           } else {
-            isLastBlockInsertion = view.collection.length === dropPosition.index;
-            targetModel = isLastBlockInsertion ? view.collection.at(dropPosition.index - 1) : view.collection.at(dropPosition.index);
+            isLastBlockInsertion = that.getCollection().length === dropPosition.index;
+            targetModel = isLastBlockInsertion ? viewCollection.at(dropPosition.index - 1) : viewCollection.at(dropPosition.index);
 
-            targetView = view.children.findByModel(targetModel);
+            targetView = that.getChildren().findByModel(targetModel);
             targetElement = targetView.$el;
 
             topOffset = targetElement.offset().top - containerOffset.top;
@@ -135,10 +136,10 @@ define([
           if (dropPosition.index === 0) {
             marker.addClass('mailpoet_drop_marker_first');
           }
-          if (view.collection.length - 1 === dropPosition.index) {
+          if (viewCollection.length - 1 === dropPosition.index) {
             marker.addClass('mailpoet_drop_marker_last');
           }
-          if (dropPosition.index > 0 && view.collection.length - 1 > dropPosition.index) {
+          if (dropPosition.index > 0 && viewCollection.length - 1 > dropPosition.index) {
             marker.addClass('mailpoet_drop_marker_middle');
           }
           marker.addClass('mailpoet_drop_marker_' + dropPosition.position);
@@ -147,9 +148,9 @@ define([
           // compensated for to position marker right in the middle of two
           // blocks
           if (dropPosition.position === 'before') {
-            $targetBlock = view.children.findByModel(view.collection.at(dropPosition.index-1)).$el;
+            $targetBlock = that.getChildren().findByModel(viewCollection.at(dropPosition.index-1)).$el;
           } else {
-            $targetBlock = view.children.findByModel(view.collection.at(dropPosition.index)).$el;
+            $targetBlock = that.getChildren().findByModel(viewCollection.at(dropPosition.index)).$el;
           }
           margin = $targetBlock.outerHeight(true) - $targetBlock.outerHeight();
 
@@ -182,6 +183,7 @@ define([
               view.model.get('blocks').length
             ),
             droppableModel = event.draggable.getDropModel(),
+            viewCollection = that.getCollection(),
             droppedView, droppedModel, index, tempCollection, tempCollection2;
 
           if (dropPosition === undefined) return;
@@ -196,22 +198,22 @@ define([
                   orientation: 'vertical',
               });
               tempCollection.get('blocks').add(droppableModel);
-              view.collection.add(tempCollection, {at: index});
+              viewCollection.add(tempCollection, {at: index});
             } else {
-              view.collection.add(droppableModel, {at: index});
+              viewCollection.add(droppableModel, {at: index});
             }
 
-            droppedView = view.children.findByModel(droppableModel);
+            droppedView = that.getChildren().findByModel(droppableModel);
           } else {
             // Special insertion by replacing target block with collection
             // and inserting dropModel into that
-            var tempModel = view.collection.at(dropPosition.index);
+            var tempModel = viewCollection.at(dropPosition.index);
 
             tempCollection = new (EditorApplication.getBlockTypeModel('container'))({
                 orientation: (view.model.get('orientation') === 'vertical') ? 'horizontal' : 'vertical',
             });
 
-            view.collection.remove(tempModel);
+            viewCollection.remove(tempModel);
 
             if (tempCollection.get('orientation') === 'horizontal') {
               if (dropPosition.position === 'before') {
@@ -242,10 +244,10 @@ define([
                 tempCollection.get('blocks').add(droppableModel);
               }
             }
-            view.collection.add(tempCollection, {at: dropPosition.index});
+            viewCollection.add(tempCollection, {at: dropPosition.index});
 
             // Call post add actions
-            droppedView = view.children.findByModel(tempCollection).children.findByModel(droppableModel);
+            droppedView = that.getChildren().findByModel(tempCollection).children.findByModel(droppableModel);
           }
 
           // Call post add actions
@@ -290,7 +292,7 @@ define([
 
       unsafe = !!unsafe;
 
-      if (this.view.collection.length === 0) {
+      if (this.getCollection().length === 0) {
         return {
           insertionType: 'normal',
           index: 0,
@@ -327,7 +329,7 @@ define([
         index = indexAndPosition.index;
       }
 
-      if (!unsafe && orientation === 'vertical' && insertionType === 'special' && this.view.collection.at(index).get('orientation') === 'horizontal') {
+      if (!unsafe && orientation === 'vertical' && insertionType === 'special' && this.getCollection().at(index).get('orientation') === 'horizontal') {
         // Prevent placing horizontal container in another horizontal container,
         // which would allow breaking the column limit.
         // Switch that to normal insertion
@@ -356,7 +358,7 @@ define([
 
       var index = this._computeCellIndex(eventX, eventY),
         // TODO: Handle case when there are no children, container is empty
-        targetView = this.view.children.findByModel(this.view.collection.at(index)),
+        targetView = this.getChildren().findByModel(this.getCollection().at(index)),
         orientation = this.view.model.get('orientation'),
         element = targetView.$el,
         eventOffset, closeOffset, elementDimension;
@@ -391,7 +393,7 @@ define([
     _computeCellIndex: function(eventX, eventY) {
       var orientation = this.view.model.get('orientation'),
         eventOffset = (orientation === 'vertical') ? eventY : eventX,
-        resultView = this.view.children.find(function(view) {
+        resultView = this.getChildren().find(function(view) {
           var element = view.$el,
             closeOffset, farOffset;
 
@@ -414,15 +416,24 @@ define([
     _canAcceptNormalInsertion: function() {
       var orientation = this.view.model.get('orientation'),
         depth = this.view.renderOptions.depth,
-        childCount = this.view.children.length;
+        childCount = this.getChildren().length;
       // Note that depth is zero indexed. Root container has depth=0
       return orientation === 'vertical' || (orientation === 'horizontal' && depth === 1 && childCount < this.options.columnLimit);
     },
     _canAcceptSpecialInsertion: function() {
       var orientation = this.view.model.get('orientation'),
         depth = this.view.renderOptions.depth,
-        childCount = this.view.children.length;
+        childCount = this.getChildren().length;
       return depth === 0 || (depth === 1 && orientation === 'horizontal' && childCount <= this.options.columnLimit);
     },
+    getCollectionView: function() {
+      return this.view.getChildView('blocks');
+    },
+    getChildren: function() {
+      return this.getCollectionView().children;
+    },
+    getCollection: function() {
+      return this.getCollectionView().collection;
+    }
   });
 });

assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js

@@ -60,10 +60,17 @@ define([
 
           editor.on('click', function(e) {
             editor.focus();
+            if (that._isActivationClick) {
+              editor.selection.setRng(
+                  tinymce.dom.RangeUtils.getCaretRangeFromPoint(e.clientX, e.clientY, editor.getDoc())
+              );
+              that._isActivationClick = false;
+            }
           });
 
           editor.on('focus', function(e) {
             that.view.triggerMethod('text:editor:focus');
+              that._isActivationClick = true;
           });
 
           editor.on('blur', function(e) {

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

@@ -129,6 +129,12 @@ define([
 
   Module.AutomatedLatestContentBlockView = base.BlockView.extend({
     className: "mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block",
+    initialize: function() {
+      function replaceButtonStylesHandler(data) {
+        this.model.set({"readMoreButton": data});
+      }
+      App.getChannel().on("replaceAllButtonStyles", replaceButtonStylesHandler.bind(this));
+    },
     getTemplate: function() { return templates.automatedLatestContentBlock; },
     regions: {
       toolsRegion: '.mailpoet_tools',
@@ -151,8 +157,8 @@ define([
           emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
         };
       this.toolsView = new Module.AutomatedLatestContentBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
-      this.postsRegion.show(new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
+      this.showChildView('toolsRegion', this.toolsView);
+      this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
     },
   });
 
@@ -189,11 +195,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
-      };
-    },
     onRender: function() {
       var that = this;
 
@@ -377,7 +378,7 @@ define([
     },
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function(App, options) {
     App.registerBlockType('automatedLatestContent', {
       blockModel: Module.AutomatedLatestContentBlockModel,
       blockView: Module.AutomatedLatestContentBlockView,
@@ -390,7 +391,7 @@ define([
     });
   });
 
-  App.on('start', function() {
+  App.on('start', function(App, options) {
     App._ALCSupervisor = new Module.ALCSupervisor();
     App._ALCSupervisor.refresh();
   });

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

@@ -17,7 +17,7 @@ define([
   "use strict";
 
   var Module = {},
-      AugmentedView = Marionette.LayoutView.extend({});
+      AugmentedView = Marionette.View.extend({});
 
   Module.BlockModel = SuperModel.extend({
     stale: [], // Attributes to be removed upon saving
@@ -82,7 +82,7 @@ define([
       },
       HighlightEditingBehavior: {},
     },
-    templateHelpers: function() {
+    templateContext: function() {
       return {
         model: this.model.toJSON(),
         viewCid: this.cid,
@@ -125,6 +125,12 @@ define([
         return this.model.clone();
       }.bind(this);
     },
+    disableDragging: function() {
+      this.$el.addClass('mailpoet_ignore_drag');
+    },
+    enableDragging: function() {
+      this.$el.removeClass('mailpoet_ignore_drag');
+    },
     showBlock: function() {
       if (this._isFirstRender) {
         this.transitionIn();
@@ -193,7 +199,7 @@ define([
       this.on('hideTools', this.hideDeletionConfirmation, this);
       this.on('showSettings', this.changeSettings);
     },
-    templateHelpers: function() {
+    templateContext: function() {
       return {
         model: this.model.toJSON(),
         viewCid: this.cid,
@@ -217,7 +223,7 @@ define([
     },
   });
 
-  Module.BlockSettingsView = Marionette.LayoutView.extend({
+  Module.BlockSettingsView = Marionette.View.extend({
     className: 'mailpoet_editor_settings',
     behaviors: {
       ColorPickerBehavior: {},
@@ -240,6 +246,11 @@ define([
         MailPoet.Modal.panel(panelParams);
       }
     },
+    templateContext: function() {
+      return {
+        model: this.model.toJSON()
+      };
+    },
     close: function(event) {
       this.destroy();
     },
@@ -271,7 +282,7 @@ define([
     },
   });
 
-  Module.WidgetView = Marionette.ItemView.extend({
+  Module.WidgetView = Marionette.View.extend({
     className: 'mailpoet_widget mailpoet_droppable_block mailpoet_droppable_widget',
     behaviors: {
       DraggableBehavior: {

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

@@ -56,7 +56,7 @@ define([
     },
     onRender: function() {
       this.toolsView = new Module.ButtonBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
     },
   });
 
@@ -98,12 +98,11 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
+    templateContext: function() {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         availableStyles: App.getAvailableStyles().toJSON(),
         renderOptions: this.renderOptions,
-      };
+      });
     },
     applyToAll: function() {
       App.getChannel().trigger('replaceAllButtonStyles', _.pick(this.model.toJSON(), 'styles', 'type'));
@@ -133,7 +132,7 @@ define([
     },
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function(App, options) {
     App.registerBlockType('button', {
       blockModel: Module.ButtonBlockModel,
       blockView: Module.ButtonBlockView,

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

@@ -74,29 +74,43 @@ define([
     },
   });
 
-  Module.ContainerBlockView = Marionette.CompositeView.extend({
-    regionClass: Marionette.Region,
+  Module.ContainerBlocksView = Marionette.CollectionView.extend({
+    className: 'mailpoet_container',
+    childView: function(model) {
+      return App.getBlockTypeView(model.get('type'));
+    },
+    childViewOptions: function() {
+      var newRenderOptions = _.clone(this.renderOptions);
+      if (newRenderOptions.depth !== undefined) {
+        newRenderOptions.depth += 1;
+      }
+      return {
+        renderOptions: newRenderOptions
+      };
+    },
+    emptyView: function() { return Module.ContainerBlockEmptyView; },
+    emptyViewOptions: function() { return { renderOptions: this.renderOptions }; },
+    initialize: function(options) {
+      this.renderOptions = options.renderOptions;
+    }
+  });
+
+  Module.ContainerBlockView = base.BlockView.extend({
+    regions: _.extend({}, base.BlockView.prototype.regions, {
+      blocks: {
+        el: '> .mailpoet_container',
+        replaceElement: true
+      },
+    }),
     className: 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
     getTemplate: function() { return templates.containerBlock; },
-    childViewContainer: '> .mailpoet_container',
-    getEmptyView: function() { return Module.ContainerBlockEmptyView; },
-    emptyViewOptions: function() { return { renderOptions: this.renderOptions }; },
-    modelEvents: {
-      'change': 'render',
-      'delete': 'deleteBlock',
-    },
-    events: {
-      "mouseenter": "showTools",
-      "mouseleave": "hideTools",
+    events: _.extend({}, base.BlockView.prototype.events, {
       "click .mailpoet_newsletter_layer_selector": "toggleEditingLayer",
-    },
-    regions: {
-      toolsRegion: '> .mailpoet_tools',
-    },
+    }),
     ui: {
       tools: '> .mailpoet_tools'
     },
-    behaviors: {
+    behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       ContainerDropZoneBehavior: {},
       DraggableBehavior: {
         cloneOriginal: true,
@@ -125,8 +139,7 @@ define([
           return view.renderOptions.depth === 1;
         },
       },
-      HighlightEditingBehavior: {}
-    },
+    }),
     onDragSubstituteBy: function() {
       // For two and three column layouts display their respective widgets,
       // otherwise always default to one column layout widget
@@ -137,39 +150,12 @@ define([
       return Module.OneColumnContainerWidgetView;
 
     },
-    constructor: function() {
-      // Set the block collection to be handled by this view as well
-      arguments[0].collection = arguments[0].model.get('blocks');
-      Marionette.CompositeView.apply(this, arguments);
-      this.$el.addClass('mailpoet_editor_view_' + this.cid);
-    },
     initialize: function(options) {
+      base.BlockView.prototype.initialize.apply(this, arguments);
+
       this.renderOptions = _.defaults(options.renderOptions || {}, {});
-      this.on('dom:refresh', this.showBlock, this);
-      this._isFirstRender = true;
-    },
-    // Determines which view type should be used for a child
-    getChildView: function(model) {
-      // TODO: If type does not have a type registered, use a generic one
-      return App.getBlockTypeView(model.get('type'));
-    },
-    childViewOptions: function() {
-      var newRenderOptions = _.clone(this.renderOptions);
-      if (newRenderOptions.depth !== undefined) {
-        newRenderOptions.depth += 1;
-      }
-      return {
-        renderOptions: newRenderOptions
-      };
-    },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
-        viewCid: this.cid,
-      };
     },
     onRender: function() {
-      this._rebuildRegions();
       this.toolsView = new Module.ContainerBlockToolsView({
         model: this.model,
         tools: {
@@ -179,10 +165,15 @@ define([
           layerSelector: false,
         },
       });
-      this.toolsRegion.show(this.toolsView);
-    },
-    onBeforeDestroy: function() {
-      this.regionManager.destroy();
+      this.showChildView('toolsRegion', this.toolsView);
+      this.showChildView('blocks', new Module.ContainerBlocksView({
+        collection: this.model.get('blocks'),
+        renderOptions: this.renderOptions
+      }));
+
+      // TODO: Look for a better way to do this than here
+      // Sets child container orientation HTML class here, as child CollectionView won't have access to model and will overwrite existing region element instead
+      this.$('> .mailpoet_container').attr('class', 'mailpoet_container mailpoet_container_' + this.model.get('orientation'));
     },
     showTools: function() {
       if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
@@ -222,76 +213,14 @@ define([
       }
       event.stopPropagation();
     },
-    _buildRegions: function(regions) {
-      var that = this;
-
-      var defaults = {
-        regionClass: this.getOption('regionClass'),
-        parentEl: function() { return that.$el; }
-      };
-
-      return this.regionManager.addRegions(regions, defaults);
-    },
-    _rebuildRegions: function() {
-      if (this.regionManager === undefined) {
-        this.regionManager = new Marionette.RegionManager();
-      }
-      this.regionManager.destroy();
-      _.extend(this, this._buildRegions(this.regions));
-    },
-    getDropFunc: function() {
-      return function() {
-        return this.model.clone();
-      }.bind(this);
-    },
-    showBlock: function() {
-      if (this._isFirstRender) {
-        this.transitionIn();
-        this._isFirstRender = false;
-      }
-    },
-    deleteBlock: function() {
-      this.transitionOut().done(function() {
-        this.model.destroy();
-      }.bind(this));
-    },
-    transitionIn: function() {
-      return this._transition('slideDown', 'fadeIn', 'easeIn');
-    },
-    transitionOut: function() {
-      return this._transition('slideUp', 'fadeOut', 'easeOut');
-    },
-    _transition: function(slideDirection, fadeDirection, easing) {
-      var promise = jQuery.Deferred();
-
-      this.$el.velocity(
-        slideDirection,
-        {
-          duration: 250,
-          easing: easing,
-          complete: function() {
-            promise.resolve();
-          }.bind(this),
-        }
-      ).velocity(
-        fadeDirection,
-        {
-          duration: 250,
-          easing: easing,
-          queue: false, // Do not enqueue, trigger animation in parallel
-        }
-      );
-
-      return promise;
-    },
   });
 
-  Module.ContainerBlockEmptyView = Marionette.ItemView.extend({
+  Module.ContainerBlockEmptyView = Marionette.View.extend({
     getTemplate: function() { return templates.containerEmpty; },
     initialize: function(options) {
       this.renderOptions = _.defaults(options.renderOptions || {}, {});
     },
-    templateHelpers: function() {
+    templateContext: function() {
       return {
         isRoot: this.renderOptions.depth === 0,
         emptyContainerMessage: this.renderOptions.emptyContainerMessage || '',
@@ -322,12 +251,12 @@ define([
       });
     },
     onRender: function() {
-      this.columnsSettingsRegion.show(this._columnsSettingsView);
+      this.showChildView('columnsSettingsRegion', this._columnsSettingsView);
     },
   });
 
   Module.ContainerBlockColumnsSettingsView = Marionette.CollectionView.extend({
-    getChildView: function() { return Module.ContainerBlockColumnSettingsView; },
+    childView: function() { return Module.ContainerBlockColumnSettingsView; },
     childViewOptions: function(model, index) {
       return {
         columnIndex: index,
@@ -335,12 +264,12 @@ define([
     },
   });
 
-  Module.ContainerBlockColumnSettingsView = Marionette.ItemView.extend({
+  Module.ContainerBlockColumnSettingsView = Marionette.View.extend({
     getTemplate: function() { return templates.containerBlockColumnSettings; },
     initialize: function(options) {
       this.columnNumber = (options.columnIndex || 0) + 1;
     },
-    templateHelpers: function() {
+    templateContext: function() {
       return {
         model: this.model.toJSON(),
         columnNumber: this.columnNumber,
@@ -405,7 +334,7 @@ define([
     },
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function(App, options) {
     App.registerBlockType('container', {
       blockModel: Module.ContainerBlockModel,
       blockView: Module.ContainerBlockView,

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

@@ -59,14 +59,14 @@ define([
       this.listenTo(this.model, 'change:src change:styles.block.backgroundColor change:styles.block.borderStyle change:styles.block.borderWidth change:styles.block.borderColor applyToAll', this.render);
       this.listenTo(this.model, 'change:styles.block.padding', this.changePadding);
     },
-    templateHelpers: function() {
+    templateContext: function() {
       return _.extend({
         totalHeight: parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px',
-      }, base.BlockView.prototype.templateHelpers.apply(this));
+      }, base.BlockView.prototype.templateContext.apply(this));
     },
     onRender: function() {
       this.toolsView = new Module.DividerBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
     },
     onBeforeDestroy: function() {
       App.getChannel().off('replaceAllDividers', this._replaceDividerHandler);
@@ -104,12 +104,11 @@ define([
         'change:styles.block.borderColor': 'repaintDividerStyleOptions',
       };
     },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
+    templateContext: function() {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         availableStyles: App.getAvailableStyles().toJSON(),
         renderOptions: this.renderOptions,
-      };
+      });
     },
     changeStyle: function(event) {
       var style = jQuery(event.currentTarget).data('style');
@@ -140,7 +139,7 @@ define([
       }
     },
   });
-  App.on('before:start', function() {
+  App.on('before:start', function(App, options) {
     App.registerBlockType('divider', {
       blockModel: Module.DividerBlockModel,
       blockView: Module.DividerBlockView,

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

@@ -55,7 +55,7 @@ define([
     onDragSubstituteBy: function() { return Module.FooterWidgetView; },
     onRender: function() {
       this.toolsView = new Module.FooterBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
     },
     onTextEditorChange: function(newContent) {
       this.model.set('text', newContent);
@@ -68,12 +68,6 @@ define([
       this.enableDragging();
       this.enableShowingTools();
     },
-    disableDragging: function() {
-      this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
-    },
-    enableDragging: function() {
-      this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
-    },
   });
 
   Module.FooterBlockToolsView = base.BlockToolsView.extend({
@@ -96,11 +90,10 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
+    templateContext: function() {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         availableStyles: App.getAvailableStyles().toJSON(),
-      };
+      });
     },
   });
 
@@ -116,7 +109,7 @@ define([
     },
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function(App, options) {
     App.registerBlockType('footer', {
       blockModel: Module.FooterBlockModel,
       blockView: Module.FooterBlockView,

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

@@ -55,7 +55,7 @@ define([
     onDragSubstituteBy: function() { return Module.HeaderWidgetView; },
     onRender: function() {
       this.toolsView = new Module.HeaderBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
     },
     onTextEditorChange: function(newContent) {
       this.model.set('text', newContent);
@@ -68,12 +68,6 @@ define([
       this.enableDragging();
       this.enableShowingTools();
     },
-    disableDragging: function() {
-      this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
-    },
-    enableDragging: function() {
-      this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
-    },
   });
 
   Module.HeaderBlockToolsView = base.BlockToolsView.extend({
@@ -96,11 +90,10 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
+    templateContext: function() {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         availableStyles: App.getAvailableStyles().toJSON(),
-      };
+      });
     },
   });
 
@@ -116,7 +109,7 @@ define([
     },
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function(App, options) {
     App.registerBlockType('header', {
       blockModel: Module.HeaderBlockModel,
       blockView: Module.HeaderBlockView,

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

@@ -36,17 +36,17 @@ define([
     className: "mailpoet_block mailpoet_image_block mailpoet_droppable_block",
     getTemplate: function() { return templates.imageBlock; },
     onDragSubstituteBy: function() { return Module.ImageWidgetView; },
-    templateHelpers: function() {
+    templateContext: function() {
       return _.extend({
         imageMissingSrc: App.getConfig().get('urls.imageMissing'),
-      }, base.BlockView.prototype.templateHelpers.apply(this));
+      }, base.BlockView.prototype.templateContext.apply(this));
     },
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       ShowSettingsBehavior: {},
     }),
     onRender: function() {
       this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
 
       if (this.model.get('fullWidth')) {
         this.$el.addClass('mailpoet_full_image');
@@ -65,7 +65,7 @@ define([
     events: function() {
       return {
         "input .mailpoet_field_image_link": _.partial(this.changeField, "link"),
-        "input .mailpoet_field_image_address": _.partial(this.changeField, "src"),
+        "input .mailpoet_field_image_address": 'changeAddress',
         "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"),
@@ -327,6 +327,20 @@ define([
 
       this._mediaManager.open();
     },
+    changeAddress: function(event) {
+      var src = jQuery(event.target).val();
+      var image = new Image();
+
+      image.onload = function() {
+        this.model.set({
+          src: src,
+          width: image.naturalWidth + 'px',
+          height: image.naturalHeight + 'px'
+        });
+      }.bind(this);
+
+      image.src = src;
+    },
     onBeforeDestroy: function() {
       base.BlockSettingsView.prototype.onBeforeDestroy.apply(this, arguments);
       if (typeof this._mediaManager === 'object') {
@@ -351,7 +365,7 @@ define([
   });
   Module.ImageWidgetView = ImageWidgetView;
 
-  App.on('before:start', function() {
+  App.on('before:start', function(App, options) {
     App.registerBlockType('image', {
       blockModel: Module.ImageBlockModel,
       blockView: Module.ImageBlockView,

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

@@ -166,8 +166,8 @@ define([
       this.model.reply('blockView', this.notifyAboutSelf, this);
     },
     onRender: function() {
-      if (!this.toolsRegion.hasView()) {
-        this.toolsRegion.show(this.toolsView);
+      if (!this.getRegion('toolsRegion').hasView()) {
+        this.showChildView('toolsRegion', this.toolsView);
       }
       this.trigger('showSettings');
 
@@ -177,7 +177,7 @@ define([
           disableDragAndDrop: true,
           emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
         };
-      this.postsRegion.show(new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions }));
+      this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions }));
     },
     notifyAboutSelf: function() {
       return this;
@@ -202,7 +202,7 @@ define([
       'click .mailpoet_settings_posts_show_post_selection': 'switchToPostSelection',
       'click .mailpoet_settings_posts_insert_selected': 'insertPosts',
     },
-    templateHelpers: function() {
+    templateContext: function() {
       return {
         model: this.model.toJSON(),
       };
@@ -259,16 +259,24 @@ define([
     },
   });
 
-  var PostSelectionSettingsView = Marionette.CompositeView.extend({
-    getTemplate: function() { return templates.postSelectionPostsBlockSettings; },
-    getChildView: function() { return SinglePostSelectionSettingsView; },
-    childViewContainer: '.mailpoet_post_selection_container',
-    getEmptyView: function() { return EmptyPostSelectionSettingsView; },
+  var PostsSelectionCollectionView = Marionette.CollectionView.extend({
+    childView: function() { return SinglePostSelectionSettingsView; },
+    emptyView: function() { return EmptyPostSelectionSettingsView; },
     childViewOptions: function() {
       return {
-        blockModel: this.model,
+        blockModel: this.blockModel,
       };
     },
+    initialize: function(options) {
+      this.blockModel = options.blockModel;
+    },
+  });
+
+  var PostSelectionSettingsView = Marionette.View.extend({
+    getTemplate: function() { return templates.postSelectionPostsBlockSettings; },
+    regions: {
+      posts: '.mailpoet_post_selection_container',
+    },
     events: function() {
       return {
         'change .mailpoet_settings_posts_content_type': _.partial(this.changeField, 'contentType'),
@@ -276,21 +284,19 @@ define([
         'input .mailpoet_posts_search_term': _.partial(this.changeField, 'search'),
       };
     },
-    constructor: function() {
-      // Set the block collection to be handled by this view as well
-      arguments[0].collection = arguments[0].model.get('_availablePosts');
-      Marionette.CompositeView.apply(this, arguments);
-    },
     onRender: function() {
       // Dynamically update available post types
       CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
+      var postsView = new PostsSelectionCollectionView({
+        collection: this.model.get('_availablePosts'),
+        blockModel: this.model
+      });
+
+      this.showChildView('posts', postsView);
     },
     onAttach: function() {
       var that = this;
 
-      // Dynamically update available post types
-      //CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
-
       this.$('.mailpoet_posts_categories_and_tags').select2({
         multiple: true,
         allowClear: true,
@@ -372,18 +378,18 @@ define([
     },
   });
 
-  var EmptyPostSelectionSettingsView = Marionette.ItemView.extend({
+  var EmptyPostSelectionSettingsView = Marionette.View.extend({
     getTemplate: function() { return templates.emptyPostPostsBlockSettings; },
   });
 
-  var SinglePostSelectionSettingsView = Marionette.ItemView.extend({
+  var SinglePostSelectionSettingsView = Marionette.View.extend({
     getTemplate: function() { return templates.singlePostPostsBlockSettings; },
     events: function() {
       return {
         'change .mailpoet_select_post_checkbox': 'postSelectionChange',
       };
     },
-    templateHelpers: function() {
+    templateContext: function() {
       return {
         model: this.model.toJSON(),
         index: this._index,
@@ -428,7 +434,7 @@ define([
         "change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy"),
       };
     },
-    templateHelpers: function() {
+    templateContext: function() {
       return {
         model: this.model.toJSON(),
       };
@@ -520,7 +526,7 @@ define([
     },
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function(App, options) {
     App.registerBlockType('posts', {
       blockModel: Module.PostsBlockModel,
       blockView: Module.PostsBlockView,

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

@@ -17,6 +17,7 @@ define([
       base = BaseBlock,
       SocialBlockSettingsIconSelectorView,
       SocialBlockSettingsIconView,
+      SocialBlockSettingsIconCollectionView,
       SocialBlockSettingsStylesView;
 
   Module.SocialIconModel = SuperModel.extend({
@@ -82,13 +83,13 @@ define([
     },
   });
 
-  var SocialIconView = Marionette.ItemView.extend({
+  var SocialIconView = Marionette.View.extend({
     tagName: 'span',
     getTemplate: function() { return templates.socialIconBlock; },
     modelEvents: {
       'change': 'render',
     },
-    templateHelpers: function() {
+    templateContext: function() {
       var allIconSets = App.getAvailableStyles().get('socialIconSets');
       return {
         model: this.model.toJSON(),
@@ -98,150 +99,29 @@ define([
     },
   });
 
-  Module.SocialBlockView = Marionette.CompositeView.extend({
-    regionClass: Marionette.Region,
+  Module.SocialIconCollectionView = Marionette.CollectionView.extend({
+    childView: SocialIconView,
+  });
+
+  Module.SocialBlockView = base.BlockView.extend({
     className: 'mailpoet_block mailpoet_social_block mailpoet_droppable_block',
     getTemplate: function() { return templates.socialBlock; },
-    childViewContainer: '.mailpoet_social',
-    modelEvents: {
-      'change': 'render',
-      'delete': 'deleteBlock',
-    },
-    events: {
-      "mouseover": "showTools",
-      "mouseout": "hideTools",
-    },
-    regions: {
-      toolsRegion: '> .mailpoet_tools',
-    },
+    regions: _.extend({}, base.BlockView.prototype.regions, {
+      icons: '.mailpoet_social'
+    }),
     ui: {
       tools: '> .mailpoet_tools'
     },
-    behaviors: {
-      DraggableBehavior: {
-        cloneOriginal: true,
-        hideOriginal: true,
-        onDrop: function(options) {
-          // After a clone of model has been dropped, cleanup
-          // and destroy self
-          options.dragBehavior.view.model.destroy();
-        },
-        onDragSubstituteBy: function(behavior) {
-          var WidgetView, node;
-          // When block is being dragged, display the widget icon instead.
-          // This will create an instance of block's widget view and
-          // use it's rendered DOM element instead of the content block
-          if (_.isFunction(behavior.view.onDragSubstituteBy)) {
-            WidgetView = new (behavior.view.onDragSubstituteBy())();
-            WidgetView.render();
-            node = WidgetView.$el.get(0).cloneNode(true);
-            WidgetView.destroy();
-            return node;
-          }
-        },
-      },
-      HighlightEditingBehavior: {},
+    behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       ShowSettingsBehavior: {},
-    },
+    }),
     onDragSubstituteBy: function() { return Module.SocialWidgetView; },
-    constructor: function() {
-      // Set the block collection to be handled by this view as well
-      arguments[0].collection = arguments[0].model.get('icons');
-      Marionette.CompositeView.apply(this, arguments);
-    },
-    initialize: function() {
-      this.on('showSettings', this.showSettings, this);
-      this.on('dom:refresh', this.showBlock, this);
-      this._isFirstRender = true;
-    },
-    // Determines which view type should be used for a child
-    childView: SocialIconView,
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
-        viewCid: this.cid,
-      };
-    },
     onRender: function() {
-      this._rebuildRegions();
       this.toolsView = new Module.SocialBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
-    },
-    onBeforeDestroy: function() {
-      this.regionManager.destroy();
-    },
-    showTools: function(_event) {
-      this.$(this.ui.tools).addClass('mailpoet_display_tools');
-      _event.stopPropagation();
-    },
-    hideTools: function(_event) {
-      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();
-      }.bind(this);
-    },
-    _buildRegions: function(regions) {
-      var that = this;
-
-      var defaults = {
-        regionClass: this.getOption('regionClass'),
-        parentEl: function() { return that.$el; }
-      };
-
-      return this.regionManager.addRegions(regions, defaults);
-    },
-    _rebuildRegions: function() {
-      if (this.regionManager === undefined) {
-        this.regionManager = new Marionette.RegionManager();
-      }
-      this.regionManager.destroy();
-      _.extend(this, this._buildRegions(this.regions));
-    },
-    showBlock: function() {
-      if (this._isFirstRender) {
-        this.transitionIn();
-        this._isFirstRender = false;
-      }
-    },
-    deleteBlock: function() {
-      this.transitionOut().done(function() {
-        this.model.destroy();
-      }.bind(this));
-    },
-    transitionIn: function() {
-      return this._transition('slideDown', 'fadeIn', 'easeIn');
-    },
-    transitionOut: function() {
-      return this._transition('slideUp', 'fadeOut', 'easeOut');
-    },
-    _transition: function(slideDirection, fadeDirection, easing) {
-      var promise = jQuery.Deferred();
-
-      this.$el.velocity(
-        slideDirection,
-        {
-          duration: 250,
-          easing: easing,
-          complete: function() {
-            promise.resolve();
-          }.bind(this),
-        }
-      ).velocity(
-        fadeDirection,
-        {
-          duration: 250,
-          easing: easing,
-          queue: false, // Do not enqueue, trigger animation in parallel
-        }
-      );
-
-      return promise;
+      this.showChildView('toolsRegion', this.toolsView);
+      this.showChildView('icons', new Module.SocialIconCollectionView({
+        collection: this.model.get('icons')
+      }))
     },
   });
 
@@ -268,13 +148,13 @@ define([
       this._stylesView = new SocialBlockSettingsStylesView({ model: this.model });
     },
     onRender: function() {
-      this.iconRegion.show(this._iconSelectorView);
-      this.stylesRegion.show(this._stylesView);
+      this.showChildView('iconRegion', this._iconSelectorView);
+      this.showChildView('stylesRegion', this._stylesView);
     }
   });
 
   // Single icon settings view, used by the selector view
-  SocialBlockSettingsIconView = Marionette.ItemView.extend({
+  SocialBlockSettingsIconView = Marionette.View.extend({
     getTemplate: function() { return templates.socialSettingsIcon; },
     events: function() {
       return {
@@ -294,17 +174,16 @@ define([
         this.$('.mailpoet_social_icon_image').attr('alt', this.model.get('text'));
       },
     },
-    templateHelpers: function() {
+    templateContext: function() {
       var icons = App.getConfig().get('socialIcons'),
         // Construct icon type list of format [{iconType: 'type', title: 'Title'}, ...]
         availableIconTypes = _.map(_.keys(icons.attributes), function(key) { return { iconType: key, title: icons.get(key).get('title') }; }),
         allIconSets = App.getAvailableStyles().get('socialIconSets');
-      return {
-        model: this.model.toJSON(),
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         iconTypes: availableIconTypes,
         currentType: icons.get(this.model.get('iconType')).toJSON(),
         allIconSets: allIconSets.toJSON(),
-      };
+      });
     },
     deleteIcon: function() {
       this.model.destroy();
@@ -321,34 +200,41 @@ define([
     },
   });
 
-  // Select icons section container view
-  SocialBlockSettingsIconSelectorView = Marionette.CompositeView.extend({
-    getTemplate: function() { return templates.socialSettingsIconSelector; },
-    childView: SocialBlockSettingsIconView,
+  SocialBlockSettingsIconCollectionView = Marionette.CollectionView.extend({
+    behaviors: {
+      SortableBehavior: {
+        items: '> div',
+      },
+    },
     childViewContainer: '#mailpoet_social_icon_selector_contents',
+    childView: SocialBlockSettingsIconView,
+  });
+
+  // Select icons section container view
+  SocialBlockSettingsIconSelectorView = Marionette.View.extend({
+    getTemplate: function() { return templates.socialSettingsIconSelector; },
+    regions: {
+      'icons': '#mailpoet_social_icon_selector_contents'
+    },
     events: {
       'click .mailpoet_add_social_icon': 'addSocialIcon',
     },
     modelEvents: {
       'change:iconSet': 'render',
     },
-    behaviors: {
-      SortableBehavior: {
-        items: '#mailpoet_social_icon_selector_contents > div',
-      },
-    },
-    constructor: function() {
-      // Set the icon collection to be handled by this view as well
-      arguments[0].collection = arguments[0].model.get('icons');
-      Marionette.CompositeView.apply(this, arguments);
-    },
     addSocialIcon: function() {
       // Add a social icon with default values
-      this.collection.add({});
+      this.model.get('icons').add({});
+    },
+    onRender: function() {
+      this.showChildView('icons', new SocialBlockSettingsIconCollectionView({
+        collection: this.model.get('icons')
+      }));
     }
+
   });
 
-  SocialBlockSettingsStylesView = Marionette.ItemView.extend({
+  SocialBlockSettingsStylesView = Marionette.View.extend({
     getTemplate: function() { return templates.socialSettingsStyles; },
     modelEvents: {
       'change': 'render',
@@ -359,7 +245,7 @@ define([
     initialize: function() {
       this.listenTo(this.model.get('icons'), 'add remove change', this.render);
     },
-    templateHelpers: function() {
+    templateContext: function() {
       var allIconSets = App.getAvailableStyles().get('socialIconSets');
       return {
         activeSet: this.model.get('iconSet'),
@@ -411,7 +297,7 @@ define([
     },
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function(App, options) {
     App.registerBlockType('social', {
       blockModel: Module.SocialBlockModel,
       blockView: Module.SocialBlockView,

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

@@ -50,7 +50,7 @@ define([
     },
     onRender: function() {
       this.toolsView = new Module.SpacerBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
     },
     changeHeight: function() {
       this.$('.mailpoet_spacer').css('height', this.model.get('styles.block.height'));
@@ -87,7 +87,7 @@ define([
     },
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function(App, options) {
     App.registerBlockType('spacer', {
       blockModel: Module.SpacerBlockModel,
       blockView: Module.SpacerBlockView,

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

@@ -32,7 +32,7 @@ define([
         validElements: "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]",
         invalidElements: "script",
         blockFormats: 'Heading 1=h1;Heading 2=h2;Heading 3=h3;Paragraph=p',
-        plugins: "link code textcolor colorpicker mailpoet_shortcodes",
+        plugins: "link lists code textcolor colorpicker mailpoet_shortcodes paste",
         configurationFilter: function(originalSettings) {
           return _.extend({}, originalSettings, {
             mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
@@ -58,7 +58,7 @@ define([
           settings: false,
         },
       });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
     },
     onTextEditorChange: function(newContent) {
       this.model.set('text', newContent);
@@ -71,13 +71,6 @@ define([
       this.enableDragging();
       this.enableShowingTools();
     },
-
-    disableDragging: function() {
-      this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
-    },
-    enableDragging: function() {
-      this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
-    },
   });
 
   Module.TextBlockToolsView = base.BlockToolsView.extend({
@@ -100,7 +93,7 @@ define([
     },
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function(App, options) {
     App.registerBlockType('text', {
       blockModel: Module.TextBlockModel,
       blockView: Module.TextBlockView,

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

@@ -9,6 +9,7 @@ define([
 
   Module._query = function(args) {
     return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'automatedLatestContent',
       action: args.action,
       data: args.options || {}
@@ -81,6 +82,7 @@ define([
 
   Module.saveNewsletter = function(options) {
     return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'newsletters',
       action: 'save',
       data: options || {}
@@ -89,13 +91,14 @@ define([
 
   Module.previewNewsletter = function(options) {
     return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'newsletters',
       action: 'sendPreview',
       data: options || {}
     });
   };
 
-  App.on('start', function(options) {
+  App.on('start', function(App, options) {
     // Prefetch post types
     Module.getPostTypes();
   });

assets/js/src/newsletter_editor/components/config.js

@@ -24,7 +24,7 @@ define([
     return Module._config;
   };
 
-  App.on('before:start', function(options) {
+  App.on('before:start', function(App, options) {
     // Expose config methods globally
     App.getConfig = Module.getConfig;
     App.setConfig = Module.setConfig;

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

@@ -1,8 +1,9 @@
 define([
     'newsletter_editor/App',
     'backbone.supermodel',
-    'underscore'
-  ], function(App, SuperModel, _) {
+    'underscore',
+    'mailpoet'
+  ], function(App, SuperModel, _, MailPoet) {
   "use strict";
 
   var Module = {};
@@ -66,7 +67,7 @@ define([
     return _.filter(blocks, predicate);
   };
 
-  App.on('before:start', function(options) {
+  App.on('before:start', function(App, options) {
     // Expose block methods globally
     App.registerBlockType = Module.registerBlockType;
     App.getBlockTypeModel = Module.getBlockTypeModel;
@@ -79,15 +80,24 @@ define([
     Module.newsletter = new Module.NewsletterModel(_.omit(_.clone(options.newsletter), ['body']));
   });
 
-  App.on('start', function(options) {
+  App.on('start', function(App, options) {
     var body = options.newsletter.body;
-    App._contentContainer = new (App.getBlockTypeModel('container'))(body.content, {parse: true});
+    var content = (_.has(body, 'content')) ? body.content : {};
+
+    if (!_.has(options.newsletter, 'body') || !_.isObject(options.newsletter.body)) {
+      MailPoet.Notice.error(
+        MailPoet.I18n.t('newsletterBodyIsCorrupted'),
+        { static: true }
+      );
+    }
+
+    App._contentContainer = new (App.getBlockTypeModel('container'))(content, {parse: true});
     App._contentContainerView = new (App.getBlockTypeView('container'))({
       model: App._contentContainer,
       renderOptions: { depth: 0 },
     });
 
-    App._appView.contentRegion.show(App._contentContainerView);
+    App._appView.showChildView('contentRegion', App._contentContainerView);
   });
 
 

assets/js/src/newsletter_editor/components/heading.js

@@ -10,9 +10,9 @@ define([
 
   var Module = {};
 
-  Module.HeadingView = Marionette.ItemView.extend({
+  Module.HeadingView = Marionette.View.extend({
     getTemplate: function() { return templates.heading; },
-    templateHelpers: function() {
+    templateContext: function() {
       return {
         model: this.model.toJSON(),
       };
@@ -28,8 +28,8 @@ define([
     },
   });
 
-  App.on('start', function(options) {
-    App._appView.headingRegion.show(new Module.HeadingView({ model: App.getNewsletter() }));
+  App.on('start', function(App, options) {
+    App._appView.showChildView('headingRegion', new Module.HeadingView({ model: App.getNewsletter() }));
   });
 
   return Module;

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

@@ -40,15 +40,14 @@ define([
     App.getChannel().trigger('beforeEditorSave', json);
 
     // save newsletter
-    CommunicationComponent.saveNewsletter(json).done(function(response) {
+    return CommunicationComponent.saveNewsletter(json).done(function(response) {
       if(response.success !== undefined && response.success === true) {
         // TODO: Handle translations
         //MailPoet.Notice.success("<?php _e('Newsletter has been saved.'); ?>");
       } else if(response.error !== undefined) {
         if(response.error.length === 0) {
-          // TODO: Handle translations
           MailPoet.Notice.error(
-            "An unknown error occurred, please check your settings.",
+            MailPoet.I18n.t('templateSaveFailed'),
             {
               scroll: true,
             }
@@ -66,6 +65,14 @@ define([
     });
   };
 
+  // For getting a promise after triggering save event
+  Module.saveAndProvidePromise = function(saveResult) {
+    var promise = Module.save();
+    if (saveResult !== undefined) {
+      saveResult.promise = promise;
+    }
+  };
+
   Module.getThumbnail = function(element, options) {
     var promise = html2canvas(element, options || {});
 
@@ -102,6 +109,7 @@ define([
       });
 
       return MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
         endpoint: 'newsletterTemplates',
         action: 'save',
         data: data
@@ -135,7 +143,7 @@ define([
     });
   };
 
-  Module.SaveView = Marionette.LayoutView.extend({
+  Module.SaveView = Marionette.View.extend({
     getTemplate: function() { return templates.save; },
     events: {
       'click .mailpoet_save_button': 'save',
@@ -161,7 +169,7 @@ define([
     },
     beforeSave: function() {
       // TODO: Add a loading animation instead
-      this.$('.mailpoet_autosaved_at').text('Saving...');
+      this.$('.mailpoet_autosaved_at').text(MailPoet.I18n.t('saving'));
     },
     afterSave: function(json, response) {
       this.validateNewsletter(json);
@@ -322,8 +330,7 @@ define([
 
   Module.beforeExitWithUnsavedChanges = function(e) {
     if (saveTimeout) {
-      // TODO: Translate this message
-      var message = "There are unsaved changes which will be lost if you leave this page.";
+      var message = MailPoet.I18n.t('unsavedChangesWillBeLost');
       e = e || window.event;
 
       if (e) {
@@ -334,18 +341,18 @@ define([
     }
   };
 
-  App.on('before:start', function(options) {
-    App.save = Module.save;
+  App.on('before:start', function(App, options) {
+    App.save = Module.saveAndProvidePromise;
     App.getChannel().on('autoSave', Module.autoSave);
 
     window.onbeforeunload = Module.beforeExitWithUnsavedChanges;
 
-    App.getChannel().on('save', function() { App.save(); });
+    App.getChannel().on('save', function(saveResult) { App.save(saveResult); });
   });
 
-  App.on('start', function(options) {
+  App.on('start', function(App, options) {
     var saveView = new Module.SaveView();
-    App._appView.bottomRegion.show(saveView);
+    App._appView.showChildView('bottomRegion', saveView);
   });
 
   return Module;

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

@@ -52,7 +52,7 @@ define([
   Module.registerLayoutWidget = function(widget) { return Module._layoutWidgets.add(widget); };
   Module.getLayoutWidgets = function() { return Module._layoutWidgets; };
 
-  var SidebarView = Marionette.LayoutView.extend({
+  var SidebarView = Marionette.View.extend({
     getTemplate: function() { return templates.sidebar; },
     regions: {
       contentRegion: '.mailpoet_content_region',
@@ -96,17 +96,17 @@ define([
         .on('scroll', this.updateHorizontalScroll.bind(this));
     },
     onRender: function() {
-      this.contentRegion.show(new Module.SidebarWidgetsView({
-        collection: App.getWidgets(),
-      }));
-      this.layoutRegion.show(new Module.SidebarLayoutWidgetsView({
-        collection: App.getLayoutWidgets(),
-      }));
-      this.stylesRegion.show(new Module.SidebarStylesView({
+      this.showChildView('contentRegion', new Module.SidebarWidgetsView(
+        App.getWidgets()
+      ));
+      this.showChildView('layoutRegion', new Module.SidebarLayoutWidgetsView(
+        App.getLayoutWidgets()
+      ));
+      this.showChildView('stylesRegion', new Module.SidebarStylesView({
         model: App.getGlobalStyles(),
         availableStyles: App.getAvailableStyles(),
       }));
-      this.previewRegion.show(new Module.SidebarPreviewView());
+      this.showChildView('previewRegion', new Module.SidebarPreviewView());
     },
     updateHorizontalScroll: function() {
       // Fixes the sidebar so that on narrower screens the horizontal
@@ -136,15 +136,31 @@ define([
     },
   });
 
+  /**
+   * Draggable widget collection view
+   */
+  Module.SidebarWidgetsCollectionView = Marionette.CollectionView.extend({
+    childView: function(item) { return item.get('widgetView'); }
+  });
+
   /**
    * Responsible for rendering draggable content widgets
    */
-  Module.SidebarWidgetsView = Marionette.CompositeView.extend({
+  Module.SidebarWidgetsView = Marionette.View.extend({
     getTemplate: function() { return templates.sidebarContent; },
-    getChildView: function(model) {
-      return model.get('widgetView');
+    regions: {
+      widgets: '.mailpoet_region_content'
     },
-    childViewContainer: '.mailpoet_region_content',
+
+    initialize: function(widgets) {
+      this.widgets = widgets;
+    },
+
+    onRender: function() {
+      this.showChildView('widgets', new Module.SidebarWidgetsCollectionView({
+        collection: this.widgets
+      }));
+    }
   });
 
   /**
@@ -153,11 +169,15 @@ define([
   Module.SidebarLayoutWidgetsView = Module.SidebarWidgetsView.extend({
     getTemplate: function() { return templates.sidebarLayout; },
   });
+
   /**
    * Responsible for managing global styles
    */
-  Module.SidebarStylesView = Marionette.LayoutView.extend({
+  Module.SidebarStylesView = Marionette.View.extend({
     getTemplate: function() { return templates.sidebarStyles; },
+    behaviors: {
+      ColorPickerBehavior: {},
+    },
     events: function() {
       return {
         "change #mailpoet_text_font_color": _.partial(this.changeColorField, 'text.fontColor'),
@@ -196,7 +216,7 @@ define([
         "change #mailpoet_background_color": _.partial(this.changeColorField, 'body.backgroundColor'),
       };
     },
-    templateHelpers: function() {
+    templateContext: function() {
       return {
         model: this.model.toJSON(),
         availableStyles: this.availableStyles.toJSON(),
@@ -205,15 +225,6 @@ define([
     initialize: function(options) {
       this.availableStyles = options.availableStyles;
     },
-    onRender: function() {
-      this.$('.mailpoet_color').spectrum({
-        clickoutFiresChange: true,
-        showInput: true,
-        showInitial: true,
-        preferredFormat: "hex6",
-        allowEmpty: true,
-      });
-    },
     changeField: function(field, event) {
       this.model.set(field, jQuery(event.target).val());
     },
@@ -226,7 +237,7 @@ define([
     },
   });
 
-  Module.SidebarPreviewView = Marionette.LayoutView.extend({
+  Module.SidebarPreviewView = Marionette.View.extend({
     getTemplate: function() { return templates.sidebarPreview; },
     events: {
       'click .mailpoet_show_preview': 'showPreview',
@@ -249,6 +260,7 @@ define([
       MailPoet.Modal.loading(true);
 
       MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
         endpoint: 'newsletters',
         action: 'showPreview',
         data: json,
@@ -301,31 +313,37 @@ define([
       // send test email
       MailPoet.Modal.loading(true);
 
-      CommunicationComponent.previewNewsletter(data).always(function() {
-        MailPoet.Modal.loading(false);
-      }).done(function(response) {
-        MailPoet.Notice.success(
-          MailPoet.I18n.t('newsletterPreviewSent'),
-          { scroll: true });
-      }).fail(function(response) {
-        if (response.errors.length > 0) {
-          MailPoet.Notice.error(
-            response.errors.map(function(error) { return error.message; }),
-            { scroll: true, static: true }
-          );
-        }
+      // save before sending
+      var saveResult = {promise: null};
+      App.getChannel().trigger('save', saveResult);
+
+      saveResult.promise.always(function() {
+        CommunicationComponent.previewNewsletter(data).always(function() {
+          MailPoet.Modal.loading(false);
+        }).done(function(response) {
+          MailPoet.Notice.success(
+            MailPoet.I18n.t('newsletterPreviewSent'),
+            { scroll: true });
+        }).fail(function(response) {
+          if (response.errors.length > 0) {
+            MailPoet.Notice.error(
+              response.errors.map(function(error) { return error.message; }),
+              { scroll: true, static: true }
+            );
+          }
+        });
       });
     },
   });
 
-  Module.NewsletterPreviewView = Marionette.ItemView.extend({
+  Module.NewsletterPreviewView = Marionette.View.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() {
+    templateContext: function() {
       return {
         previewUrl: this.previewUrl,
         width: this.width,
@@ -334,18 +352,18 @@ define([
     }
   });
 
-  App.on('before:start', function(options) {
+  App.on('before:start', function(App, options) {
     App.registerWidget = Module.registerWidget;
     App.getWidgets = Module.getWidgets;
     App.registerLayoutWidget = Module.registerLayoutWidget;
     App.getLayoutWidgets = Module.getLayoutWidgets;
   });
 
-  App.on('start', function(options) {
+  App.on('start', function(App, options) {
     var stylesModel = App.getGlobalStyles(),
       sidebarView = new SidebarView();
 
-    App._appView.sidebarRegion.show(sidebarView);
+    App._appView.showChildView('sidebarRegion', sidebarView);
   });
 
   return Module;

assets/js/src/newsletter_editor/components/styles.js

@@ -46,11 +46,14 @@ define([
     },
   });
 
-  Module.StylesView = Marionette.ItemView.extend({
+  Module.StylesView = Marionette.View.extend({
     getTemplate: function() { return templates.styles; },
     modelEvents: {
       'change': 'render',
     },
+    serializeData: function() {
+      return this.model.toJSON();
+    }
   });
 
   Module._globalStyles = new SuperModel();
@@ -65,20 +68,20 @@ define([
     return App.getConfig().get('availableStyles');
   };
 
-  App.on('before:start', function(options) {
+  App.on('before:start', function(App, options) {
     // Expose style methods to global application
     App.getGlobalStyles = Module.getGlobalStyles;
     App.setGlobalStyles = Module.setGlobalStyles;
-
     App.getAvailableStyles = Module.getAvailableStyles;
 
     var body = options.newsletter.body;
-    this.setGlobalStyles(body.globalStyles);
+    var globalStyles = (_.has(body, 'globalStyles')) ? body.globalStyles : {};
+    this.setGlobalStyles(globalStyles);
   });
 
-  App.on('start', function(options) {
+  App.on('start', function(App, options) {
     var stylesView = new Module.StylesView({ model: App.getGlobalStyles() });
-    App._appView.stylesRegion.show(stylesView);
+    App._appView.showChildView('stylesRegion', stylesView);
   });
 
   return Module;

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

@@ -11,13 +11,13 @@
 /*jshint unused:false */
 /*global tinymce:true */
 tinymce.PluginManager.add('mailpoet_shortcodes', function(editor, url) {
-  var appendLabelAndClose = function(text) {
-      editor.insertContent('[' + text + ']');
+  var appendLabelAndClose = function(shortcode) {
+      editor.insertContent(shortcode);
       editor.windowManager.close();
     },
-    generateOnClickFunc = function(id) {
+    generateOnClickFunc = function(shortcode) {
       return function() {
-        appendLabelAndClose(id);
+        appendLabelAndClose(shortcode);
       };
     };
 

assets/js/src/newsletters/badges/badge.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import classNames from 'classnames'
+import ReactTooltip from 'react-tooltip'
+
+class Badge extends React.Component {
+  render() {
+    const badgeClasses = classNames(
+      'mailpoet_badge',
+      this.props.type ? `mailpoet_badge_${this.props.type}` : ''
+    );
+
+    const tooltip = this.props.tooltip ? this.props.tooltip.replace(/\n/g, '<br />') : false;
+    // tooltip ID must be unique, defaults to tooltip text
+    const tooltipId = this.props.tooltipId || tooltip;
+
+    return (
+      <span>
+        <span
+          className={badgeClasses}
+          data-tip={tooltip}
+          data-for={tooltipId}
+        >
+          {this.props.name}
+        </span>
+        { tooltip && (
+          <ReactTooltip
+            place="right"
+            multiline={true}
+            id={tooltipId}
+          />
+        ) }
+      </span>
+    );
+  }
+}
+
+export default Badge;

assets/js/src/newsletters/badges/stats.jsx

@@ -0,0 +1,105 @@
+import MailPoet from 'mailpoet'
+import React from 'react'
+
+import Badge from './badge.jsx'
+
+const badges = {
+  excellent: {
+    name: MailPoet.I18n.t('excellentBadgeName'),
+    tooltipTitle: MailPoet.I18n.t('excellentBadgeTooltip')
+  },
+  good: {
+    name: MailPoet.I18n.t('goodBadgeName'),
+    tooltipTitle: MailPoet.I18n.t('goodBadgeTooltip')
+  },
+  bad: {
+    name: MailPoet.I18n.t('badBadgeName'),
+    tooltipTitle: MailPoet.I18n.t('badBadgeTooltip')
+  }
+};
+
+const stats = {
+  opened: {
+    badgeRanges: [30, 10, 0],
+    badgeTypes: [
+      'excellent',
+      'good',
+      'bad'
+    ],
+    tooltipText: MailPoet.I18n.t('openedStatTooltip'),
+  },
+  clicked: {
+    badgeRanges: [3, 1, 0],
+    badgeTypes: [
+      'excellent',
+      'good',
+      'bad'
+    ],
+    tooltipText: MailPoet.I18n.t('clickedStatTooltip')
+  },
+  unsubscribed: {
+    badgeRanges: [3, 1, 0],
+    badgeTypes: [
+      'bad',
+      'good',
+      'excellent'
+    ],
+    tooltipText: MailPoet.I18n.t('unsubscribedStatTooltip')
+  },
+};
+
+class StatsBadge extends React.Component {
+  getBadgeType(stat, rate) {
+    const len = stat.badgeRanges.length;
+    for (var i = 0; i < len; i++) {
+      if (rate > stat.badgeRanges[i]) {
+        return stat.badgeTypes[i];
+      }
+    }
+    // rate must be zero at this point
+    return stat.badgeTypes[len - 1];
+  }
+  render() {
+    const stat = stats[this.props.stat] || null;
+    if (!stat) {
+      return null;
+    }
+
+    const rate = this.props.rate;
+    if (rate < 0 || rate > 100) {
+      return null;
+    }
+
+    const badgeType = this.getBadgeType(stat, rate);
+    const badge = badges[badgeType] || null;
+    if (!badge) {
+      return null;
+    }
+
+    const tooltipText = `${badge.tooltipTitle}\n\n${stat.tooltipText}`;
+    const tooltipId = this.props.tooltipId || null;
+
+    const content = (
+      <Badge
+        type={badgeType}
+        name={badge.name}
+        tooltip={tooltipText}
+        tooltipId={tooltipId}
+      />
+    );
+
+    if (this.props.headline) {
+      return (
+        <div>
+          <span className={`mailpoet_stat_${badgeType}`}>
+            {this.props.headline}
+          </span> {content}
+        </div>
+      );
+    }
+
+    return content;
+  }
+}
+
+export default StatsBadge;

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

@@ -1,13 +1,18 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import ReactStringReplace from 'react-string-replace'
+import { Link } from 'react-router'
 import MailPoet from 'mailpoet'
 import classNames from 'classnames'
+import moment from 'moment'
 import jQuery from 'jquery'
+import Hooks from 'wp-js-hooks'
+import StatsBadge from 'newsletters/badges/stats.jsx'
 
 const _QueueMixin = {
   pauseSending: function(newsletter) {
     MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'sendingQueue',
       action: 'pause',
       data: {
@@ -27,6 +32,7 @@ const _QueueMixin = {
   },
   resumeSending: function(newsletter) {
     MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'sendingQueue',
       action: 'resume',
       data: {
@@ -138,40 +144,162 @@ const _QueueMixin = {
 };
 
 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 {
+  renderStatistics: function(newsletter, is_sent, current_time) {
+    if (is_sent === undefined) {
+      // condition for standard and post notification listings
+      is_sent = newsletter.statistics
+        && newsletter.queue
+        && newsletter.queue.status !== 'scheduled'
+    }
+    if (!is_sent) {
       return (
         <span>{MailPoet.I18n.t('notSentYet')}</span>
       );
     }
+
+    let params = {};
+    params = Hooks.applyFilters('mailpoet_newsletters_listing_stats_before', params, newsletter);
+
+    // welcome emails provide explicit total_sent value
+    const total_sent = ~~(newsletter.total_sent || newsletter.queue.count_processed);
+
+    let percentage_clicked = 0;
+    let percentage_opened = 0;
+    let percentage_unsubscribed = 0;
+
+    if (total_sent > 0) {
+      percentage_clicked = (newsletter.statistics.clicked * 100) / total_sent;
+      percentage_opened = (newsletter.statistics.opened * 100) / total_sent;
+      percentage_unsubscribed = (newsletter.statistics.unsubscribed * 100) / total_sent;
+    }
+
+    // format to 1 decimal place
+    const percentage_clicked_display = MailPoet.Num.toLocaleFixed(percentage_clicked, 1);
+    const percentage_opened_display = MailPoet.Num.toLocaleFixed(percentage_opened, 1);
+    const percentage_unsubscribed_display = MailPoet.Num.toLocaleFixed(percentage_unsubscribed, 1);
+
+    let show_stats_timeout,
+      newsletter_date,
+      sent_hours_ago,
+      too_early_for_stats,
+      show_kb_link;
+    if (current_time !== undefined) {
+      // standard emails and post notifications:
+      // display green box for newsletters that were just sent
+      show_stats_timeout = 6; // in hours
+      newsletter_date = newsletter.queue.scheduled_at || newsletter.queue.created_at;
+      sent_hours_ago = moment(current_time).diff(moment(newsletter_date), 'hours');
+      too_early_for_stats = sent_hours_ago < show_stats_timeout;
+      show_kb_link = true;
+    } else {
+      // welcome emails: no green box and KB link
+      too_early_for_stats = false;
+      show_kb_link = false;
+    }
+
+    const improveStatsKBLink = 'http://beta.docs.mailpoet.com/article/191-how-to-improve-my-open-and-click-rates';
+
+    // thresholds to display badges
+    const min_newsletters_sent = 20;
+    const min_newsletter_opens = 5;
+
+    let content;
+    if (total_sent >= min_newsletters_sent
+      && newsletter.statistics.opened >= min_newsletter_opens
+      && !too_early_for_stats
+    ) {
+      // display stats with badges
+      content = (
+        <div className="mailpoet_stats_text">
+          <div>
+            <span>{ percentage_opened_display }% </span>
+            <StatsBadge
+              stat="opened"
+              rate={percentage_opened}
+              tooltipId={`opened-${newsletter.id}`}
+            />
+          </div>
+          <div>
+            <span>{ percentage_clicked_display }% </span>
+            <StatsBadge
+              stat="clicked"
+              rate={percentage_clicked}
+              tooltipId={`clicked-${newsletter.id}`}
+            />
+          </div>
+          <div>
+            <span className="mailpoet_stat_hidden">{ percentage_unsubscribed_display }%</span>
+          </div>
+        </div>
+      );
+    } else {
+      // display simple stats
+      content = (
+        <div>
+          <span className="mailpoet_stats_text">
+            { percentage_opened_display }%,
+            { " " }
+            { percentage_clicked_display }%
+            <span className="mailpoet_stat_hidden">
+              , { percentage_unsubscribed_display }%
+            </span>
+          </span>
+          { too_early_for_stats && (
+            <div className="mailpoet_badge mailpoet_badge_green">
+              {MailPoet.I18n.t('checkBackInHours')
+                  .replace('%$1d', show_stats_timeout - sent_hours_ago)}
+            </div>
+          ) }
+        </div>
+      );
+    }
+
+    // thresholds to display bad open rate help
+    const max_percentage_opened = 5;
+    const min_sent_hours_ago = 24;
+    const min_total_sent = 10;
+
+    let after_content;
+    if (show_kb_link
+      && percentage_opened < max_percentage_opened
+      && sent_hours_ago >= min_sent_hours_ago
+      && total_sent >= min_total_sent
+    ) {
+      // help link for bad open rate
+      after_content = (
+        <div>
+          <a
+            href={improveStatsKBLink}
+            target="_blank"
+            className="mailpoet_stat_link_small"
+          >
+            {MailPoet.I18n.t('improveThisLinkText')}
+          </a>
+        </div>
+      );
+    }
+
+    if (total_sent > 0 && params.link) {
+      // wrap content in a link
+      return (
+        <div>
+          <Link
+            key={ `stats-${newsletter.id}` }
+            to={ params.link }
+          >
+            {content}
+          </Link>
+          {after_content}
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        {content}
+        {after_content}
+      </div>
+    );
   }
 }
 
@@ -225,6 +353,7 @@ const _MailerMixin = {
   },
   resumeMailerSending() {
     MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'mailer',
       action: 'resumeSending'
     }).done(function() {

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

@@ -98,7 +98,7 @@ const columns = [
 const bulk_actions = [
   {
     name: 'trash',
-    label: MailPoet.I18n.t('trash'),
+    label: MailPoet.I18n.t('moveToTrash'),
     onSuccess: messages.onTrash
   }
 ];
@@ -129,6 +129,7 @@ const newsletter_actions = [
     label: MailPoet.I18n.t('duplicate'),
     onClick: function(newsletter, refresh) {
       return MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
         endpoint: 'newsletters',
         action: 'duplicate',
         data: {
@@ -164,6 +165,7 @@ const NewsletterListNotification = React.createClass({
     e.persist();
 
     MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'newsletters',
       action: 'setStatus',
       data: {
@@ -340,4 +342,4 @@ const NewsletterListNotification = React.createClass({
   }
 });
 
-module.exports = NewsletterListNotification;
+module.exports = NewsletterListNotification;

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

@@ -3,6 +3,7 @@ import { Router, Link } from 'react-router'
 import classNames from 'classnames'
 import jQuery from 'jquery'
 import MailPoet from 'mailpoet'
+import Hooks from 'wp-js-hooks'
 
 import Listing from 'listing/listing.jsx'
 import ListingTabs from 'newsletters/listings/tabs.jsx'
@@ -40,7 +41,7 @@ const columns = [
   }
 ];
 
-const newsletter_actions = [
+let newsletter_actions = [
   {
     name: 'view',
     link: function(newsletter) {
@@ -53,8 +54,15 @@ const newsletter_actions = [
   }
 ];
 
+newsletter_actions = Hooks.applyFilters('mailpoet_newsletters_listings_notification_history_actions', newsletter_actions);
+
 const NewsletterListNotificationHistory = React.createClass({
   mixins: [ QueueMixin, StatisticsMixin, MailerMixin ],
+  renderSentDate: function(newsletter) {
+    return (newsletter.queue.status === 'completed')
+      ? ( <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr> )
+      : MailPoet.I18n.t('notSentYet')
+  },
   renderItem: function(newsletter, actions, meta) {
     const rowClasses = classNames(
       'manage-column',
@@ -75,7 +83,7 @@ const NewsletterListNotificationHistory = React.createClass({
             <a
               href={ newsletter.preview_url }
               target="_blank"
-            >{ newsletter.queue.newsletter_rendered_subject }</a>
+            >{ newsletter.queue.newsletter_rendered_subject || newsletter.subject }</a>
           </strong>
           { actions }
         </td>
@@ -87,11 +95,11 @@ const NewsletterListNotificationHistory = React.createClass({
         </td>
         { (mailpoet_tracking_enabled === true) ? (
           <td className="column" data-colname={ MailPoet.I18n.t('statistics') }>
-            { this.renderStatistics(newsletter) }
+            { this.renderStatistics(newsletter, undefined, meta.current_time) }
           </td>
         ) : null }
         <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
-          <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
+          { this.renderSentDate(newsletter) }
         </td>
       </div>
     );

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

@@ -3,6 +3,7 @@ import { Router, Link } from 'react-router'
 import classNames from 'classnames'
 import jQuery from 'jquery'
 import MailPoet from 'mailpoet'
+import Hooks from 'wp-js-hooks'
 
 import Listing from 'listing/listing.jsx'
 import ListingTabs from 'newsletters/listings/tabs.jsx'
@@ -93,12 +94,12 @@ const columns = [
 const bulk_actions = [
   {
     name: 'trash',
-    label: MailPoet.I18n.t('trash'),
+    label: MailPoet.I18n.t('moveToTrash'),
     onSuccess: messages.onTrash
   }
 ];
 
-const newsletter_actions = [
+let newsletter_actions = [
   {
     name: 'view',
     link: function(newsletter) {
@@ -124,6 +125,7 @@ const newsletter_actions = [
     label: MailPoet.I18n.t('duplicate'),
     onClick: function(newsletter, refresh) {
       return MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
         endpoint: 'newsletters',
         action: 'duplicate',
         data: {
@@ -151,6 +153,8 @@ const newsletter_actions = [
   }
 ];
 
+newsletter_actions = Hooks.applyFilters('mailpoet_newsletters_listings_standard_actions', newsletter_actions);
+
 const NewsletterListStandard = React.createClass({
   mixins: [ QueueMixin, StatisticsMixin, MailerMixin ],
   renderItem: function(newsletter, actions, meta) {
@@ -183,7 +187,7 @@ const NewsletterListStandard = React.createClass({
         </td>
         { (mailpoet_tracking_enabled === true) ? (
           <td className="column" data-colname={ MailPoet.I18n.t('statistics') }>
-            { this.renderStatistics(newsletter) }
+            { this.renderStatistics(newsletter, undefined, meta.current_time) }
           </td>
         ) : null }
         <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
@@ -223,4 +227,4 @@ const NewsletterListStandard = React.createClass({
   }
 });
 
-module.exports = NewsletterListStandard;
+module.exports = NewsletterListStandard;

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

@@ -5,12 +5,13 @@ import { createHashHistory } from 'history'
 import Listing from 'listing/listing.jsx'
 import ListingTabs from 'newsletters/listings/tabs.jsx'
 
-import { MailerMixin } from 'newsletters/listings/mixins.jsx'
+import { StatisticsMixin, MailerMixin } from 'newsletters/listings/mixins.jsx'
 
 import classNames from 'classnames'
 import jQuery from 'jquery'
 import MailPoet from 'mailpoet'
 import _ from 'underscore'
+import Hooks from 'wp-js-hooks'
 
 const mailpoet_roles = window.mailpoet_roles || {};
 const mailpoet_segments = window.mailpoet_segments || {};
@@ -95,12 +96,12 @@ const columns = [
 const bulk_actions = [
   {
     name: 'trash',
-    label: MailPoet.I18n.t('trash'),
+    label: MailPoet.I18n.t('moveToTrash'),
     onSuccess: messages.onTrash
   }
 ];
 
-const newsletter_actions = [
+let newsletter_actions = [
   {
     name: 'view',
     link: function(newsletter) {
@@ -121,46 +122,22 @@ const newsletter_actions = [
       );
     }
   },
-  {
-    name: 'duplicate',
-    label: MailPoet.I18n.t('duplicate'),
-    onClick: function(newsletter, refresh) {
-      return MailPoet.Ajax.post({
-        endpoint: 'newsletters',
-        action: 'duplicate',
-        data: {
-          id: newsletter.id
-        }
-      }).done((response) => {
-        MailPoet.Notice.success(
-          (MailPoet.I18n.t('newsletterDuplicated')).replace(
-            '%$1s', response.data.subject
-          )
-        );
-        refresh();
-      }).fail((response) => {
-        if (response.errors.length > 0) {
-          MailPoet.Notice.error(
-            response.errors.map(function(error) { return error.message; }),
-            { scroll: true }
-          );
-        }
-      });
-    }
-  },
   {
     name: 'trash'
   }
 ];
 
+newsletter_actions = Hooks.applyFilters('mailpoet_newsletters_listings_welcome_notification_actions', newsletter_actions);
+
 const NewsletterListWelcome = React.createClass({
-  mixins: [ MailerMixin ],
+  mixins: [ StatisticsMixin, MailerMixin ],
   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({
+      api_version: window.mailpoet_api_version,
       endpoint: 'newsletters',
       action: 'setStatus',
       data: {
@@ -274,35 +251,6 @@ const NewsletterListWelcome = React.createClass({
       </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',
@@ -329,7 +277,10 @@ const NewsletterListWelcome = React.createClass({
         </td>
         { (mailpoet_tracking_enabled === true) ? (
           <td className="column" data-colname={ MailPoet.I18n.t('statistics') }>
-            { this.renderStatistics(newsletter) }
+            { this.renderStatistics(
+              newsletter,
+              newsletter.total_sent > 0 && newsletter.statistics
+            ) }
           </td>
         ) : null }
         <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
@@ -369,4 +320,4 @@ const NewsletterListWelcome = React.createClass({
   }
 });
 
-module.exports = NewsletterListWelcome;
+module.exports = NewsletterListWelcome;

assets/js/src/newsletters/newsletters.jsx

@@ -2,13 +2,13 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Router, Route, IndexRedirect, Link, useRouterHistory } from 'react-router'
 import { createHashHistory } from 'history'
+import Hooks from 'wp-js-hooks'
 
 import NewsletterTypes from 'newsletters/types.jsx'
 import NewsletterTemplates from 'newsletters/templates.jsx'
 import NewsletterSend from 'newsletters/send.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'
@@ -27,6 +27,9 @@ const App = React.createClass({
 const container = document.getElementById('newsletters_container');
 
 if(container) {
+  let extra_routes = [];
+  extra_routes = Hooks.applyFilters('mailpoet_newsletters_before_router', extra_routes);
+
   const mailpoet_listing = ReactDOM.render((
     <Router history={ history }>
       <Route path="/" component={ App }>
@@ -40,12 +43,13 @@ if(container) {
         <Route path="new" component={ NewsletterTypes } />
         {/* 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 } />
+        {/* Extra routes */}
+        { extra_routes.map(rt => <Route key={rt.path} path={rt.path} component={rt.component} />) }
       </Route>
     </Router>
   ), container);

assets/js/src/newsletters/send.jsx

@@ -64,6 +64,7 @@ define(
         this.setState({ loading: true });
 
         MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: 'newsletters',
           action: 'get',
           data: {
@@ -97,6 +98,7 @@ define(
               case 'notification':
               case 'welcome':
                 return MailPoet.Ajax.post({
+                  api_version: window.mailpoet_api_version,
                   endpoint: 'newsletters',
                   action: 'setStatus',
                   data: {
@@ -120,6 +122,7 @@ define(
                 }).fail(this._showError);
               default:
                 return MailPoet.Ajax.post({
+                  api_version: window.mailpoet_api_version,
                   endpoint: 'sendingQueue',
                   action: 'add',
                   data: {
@@ -173,15 +176,21 @@ define(
         var data = this.state.item;
         this.setState({ loading: true });
 
-        // Ensure that body is  JSON encoded
-        if (!_.isUndefined(data.body)) {
-          data.body = JSON.stringify(data.body);
-        }
+        // Store only properties that can be changed on this page
+        const IGNORED_NEWSLETTER_PROPERTIES = [
+            'preheader', 'body', 'created_at', 'deleted_at', 'hash',
+            'status', 'updated_at', 'type'
+        ];
+        const newsletterData = _.omit(
+            data,
+            IGNORED_NEWSLETTER_PROPERTIES
+        );
 
         return MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: 'newsletters',
           action: 'save',
-          data: data,
+          data: newsletterData,
         }).always(() => {
           this.setState({ loading: false });
         });

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

@@ -1,11 +1,13 @@
 define(
   [
     'mailpoet',
+    'wp-js-hooks',
     'newsletters/types/notification/scheduling.jsx',
     'underscore'
   ],
   function(
     MailPoet,
+    Hooks,
     Scheduling,
     _
   ) {
@@ -35,8 +37,9 @@ define(
         tip: MailPoet.I18n.t('segmentsTip'),
         type: 'selection',
         placeholder: MailPoet.I18n.t('selectSegmentPlaceholder'),
-        id: "mailpoet_segments",
-        endpoint: "segments",
+        id: 'mailpoet_segments',
+        api_version: window.mailpoet_api_version,
+        endpoint: 'segments',
         multiple: true,
         filter: function(segment) {
           return !!(!segment.deleted_at);
@@ -101,6 +104,8 @@ define(
       }
     ];
 
+    fields = Hooks.applyFilters('mailpoet_newsletters_3rd_step_fields', fields);
+
     return {
       getFields: function(newsletter) {
         return fields;

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

@@ -4,6 +4,7 @@ define(
     'jquery',
     'underscore',
     'mailpoet',
+    'wp-js-hooks',
     'form/fields/checkbox.jsx',
     'form/fields/select.jsx',
     'form/fields/text.jsx',
@@ -13,6 +14,7 @@ define(
     jQuery,
     _,
     MailPoet,
+    Hooks,
     Checkbox,
     Select,
     Text
@@ -339,8 +341,9 @@ define(
         tip: MailPoet.I18n.t('segmentsTip'),
         type: 'selection',
         placeholder: MailPoet.I18n.t('selectSegmentPlaceholder'),
-        id: "mailpoet_segments",
-        endpoint: "segments",
+        id: 'mailpoet_segments',
+        api_version: window.mailpoet_api_version,
+        endpoint: 'segments',
         multiple: true,
         filter: function(segment) {
           return !!(!segment.deleted_at);
@@ -411,6 +414,8 @@ define(
       }
     ];
 
+    fields = Hooks.applyFilters('mailpoet_newsletters_3rd_step_fields', fields);
+
     return {
       getFields: function(newsletter) {
         return fields;

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

@@ -1,10 +1,12 @@
 define(
   [
     'mailpoet',
+    'wp-js-hooks',
     'newsletters/types/welcome/scheduling.jsx'
   ],
   function(
     MailPoet,
+    Hooks,
     Scheduling
   ) {
 
@@ -71,6 +73,8 @@ define(
       }
     ];
 
+    fields = Hooks.applyFilters('mailpoet_newsletters_3rd_step_fields', fields);
+
     return {
       getFields: function(newsletter) {
         return fields;
@@ -83,4 +87,3 @@ define(
     };
   }
 );
-

assets/js/src/newsletters/templates.jsx

@@ -27,6 +27,7 @@ define(
         MailPoet.Modal.loading(true);
 
         MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: 'newsletterTemplates',
           action: 'save',
           data: template
@@ -97,6 +98,7 @@ define(
         MailPoet.Modal.loading(true);
 
         MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: 'newsletterTemplates',
           action: 'getAll',
         }).always(() => {
@@ -130,6 +132,7 @@ define(
         }
 
         MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: 'newsletters',
           action: 'save',
           data: {
@@ -158,6 +161,7 @@ define(
           )
         ) {
           MailPoet.Ajax.post({
+            api_version: window.mailpoet_api_version,
             endpoint: 'newsletterTemplates',
             action: 'delete',
             data: {

assets/js/src/newsletters/types.jsx

@@ -2,12 +2,14 @@ define(
   [
     'react',
     'mailpoet',
+    'wp-js-hooks',
     'react-router',
     'newsletters/breadcrumb.jsx'
   ],
   function(
     React,
     MailPoet,
+    Hooks,
     Router,
     Breadcrumb
   ) {
@@ -22,6 +24,7 @@ define(
       },
       createNewsletter: function(type) {
         MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: 'newsletters',
           action: 'create',
           data: {
@@ -40,6 +43,49 @@ define(
         });
       },
       render: function() {
+        var types = [
+          {
+            'id': 'standard',
+            'title': MailPoet.I18n.t('regularNewsletterTypeTitle'),
+            'description': MailPoet.I18n.t('regularNewsletterTypeDescription'),
+            'action': function() {
+              return (
+                <a className="button button-primary" onClick={ this.createNewsletter.bind(null, 'standard') }>
+                  {MailPoet.I18n.t('create')}
+                </a>
+              )
+            }.bind(this)()
+          },
+          {
+            'id': 'welcome',
+            'title': MailPoet.I18n.t('welcomeNewsletterTypeTitle'),
+            'description': MailPoet.I18n.t('welcomeNewsletterTypeDescription'),
+            'action': function() {
+              return (
+                <div>
+                  <a href="?page=mailpoet-premium" target="_blank">
+                    {MailPoet.I18n.t('getPremiumVersion')}
+                  </a>
+                </div>
+              )
+            }()
+          },
+          {
+            'id': 'notification',
+            'title': MailPoet.I18n.t('postNotificationNewsletterTypeTitle'),
+            'description': MailPoet.I18n.t('postNotificationNewsletterTypeDescription'),
+            'action': function() {
+              return (
+                <a className="button button-primary" onClick={ this.setupNewsletter.bind(null, 'notification') }>
+                  {MailPoet.I18n.t('setUp')}
+                </a>
+              )
+            }.bind(this)()
+          }
+        ];
+
+        types = Hooks.applyFilters('mailpoet_newsletters_types', types, this);
+
         return (
           <div>
             <h1>{MailPoet.I18n.t('pickCampaignType')}</h1>
@@ -47,65 +93,24 @@ define(
             <Breadcrumb step="type" />
 
             <ul className="mailpoet_boxes clearfix">
-              <li data-type="standard">
-                <div className="mailpoet_thumbnail"></div>
+              {types.map(function(type, index) {
+                return (
+                  <li key={index} data-type={type.id}>
+                    <div>
+                      <div className="mailpoet_thumbnail"></div>
 
-                <div className="mailpoet_description">
-                  <h3>{MailPoet.I18n.t('regularNewsletterTypeTitle')}</h3>
-                  <p>
-                    {MailPoet.I18n.t('regularNewsletterTypeDescription')}
-                  </p>
-                </div>
+                      <div className="mailpoet_description">
+                        <h3>{type.title}</h3>
+                        <p>{type.description}</p>
+                      </div>
 
-                <div className="mailpoet_actions">
-                  <a
-                    className="button button-primary"
-                    onClick={ this.createNewsletter.bind(null, 'standard') }
-                  >
-                    {MailPoet.I18n.t('create')}
-                  </a>
-                </div>
-              </li>
-
-              <li data-type="welcome">
-                <div className="mailpoet_thumbnail"></div>
-
-                <div className="mailpoet_description">
-                  <h3>{MailPoet.I18n.t('welcomeNewsletterTypeTitle')}</h3>
-                  <p>
-                    {MailPoet.I18n.t('welcomeNewsletterTypeDescription')}
-                  </p>
-                </div>
-
-                <div className="mailpoet_actions">
-                  <a
-                    className="button button-primary"
-                    onClick={ this.setupNewsletter.bind(null, 'welcome') }
-                  >
-                    {MailPoet.I18n.t('setUp')}
-                  </a>
-                </div>
-              </li>
-
-              <li data-type="notification">
-                <div className="mailpoet_thumbnail"></div>
-
-                <div className="mailpoet_description">
-                  <h3>{MailPoet.I18n.t('postNotificationNewsletterTypeTitle')}</h3>
-                  <p>
-                    {MailPoet.I18n.t('postNotificationsNewsletterTypeDescription')}
-                  </p>
-                </div>
-
-                <div className="mailpoet_actions">
-                  <a
-                    className="button button-primary"
-                    onClick={ this.setupNewsletter.bind(null, 'notification') }
-                  >
-                    {MailPoet.I18n.t('setUp')}
-                  </a>
-                </div>
-              </li>
+                      <div className="mailpoet_actions">
+                        {type.action}
+                      </div>
+                    </div>
+                  </li>
+                )
+              }, this)}
             </ul>
           </div>
         );

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

@@ -44,6 +44,7 @@ define(
       },
       handleNext: function() {
         MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: 'newsletters',
           action: 'create',
           data: _.extend({}, this.state, {

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

@@ -22,6 +22,7 @@ define(
       componentDidMount: function() {
         // No options for this type, create a newsletter upon mounting
         MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: 'newsletters',
           action: 'create',
           data: {

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

@@ -104,6 +104,7 @@ const WelcomeScheduling = React.createClass({
   },
   handleNext: function() {
     MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'newsletters',
       action: 'create',
       data: {

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

@@ -1,102 +0,0 @@
-define(
-  [
-    'underscore',
-    'react',
-    'react-router',
-    'mailpoet',
-    'newsletters/types/welcome/scheduling.jsx',
-    'newsletters/breadcrumb.jsx'
-  ],
-  function(
-    _,
-    React,
-    Router,
-    MailPoet,
-    Scheduling,
-    Breadcrumb
-  ) {
-
-    var field = {
-      name: 'options',
-      label: 'Event',
-      type: 'reactComponent',
-      component: Scheduling,
-    };
-
-    var availableSegments = window.mailpoet_segments || {},
-        defaultSegment = 1;
-
-    if (_.size(availableSegments) > 0) {
-      defaultSegment = _.first(availableSegments).id;
-    }
-
-    var NewsletterWelcome = React.createClass({
-      contextTypes: {
-        router: React.PropTypes.object.isRequired
-      },
-      getInitialState: function() {
-        return {
-          options: {
-            event: 'segment',
-            segment: defaultSegment,
-            role: 'subscriber',
-            afterTimeNumber: 1,
-            afterTimeType: 'immediate',
-          }
-        };
-      },
-      handleValueChange: function(event) {
-        var state = this.state;
-        state[event.target.name] = event.target.value;
-        this.setState(state);
-      },
-      handleNext: function() {
-        MailPoet.Ajax.post({
-          endpoint: 'newsletters',
-          action: 'create',
-          data: _.extend({}, this.state, {
-            type: 'welcome',
-            subject: MailPoet.I18n.t('draftNewsletterTitle'),
-          })
-        }).done((response) => {
-          this.showTemplateSelection(response.data.id);
-        }).fail((response) => {
-          if (response.errors.length > 0) {
-            MailPoet.Notice.error(
-              response.errors.map(function(error) { return error.message; }),
-              { scroll: true }
-            );
-          }
-        });
-      },
-      showTemplateSelection: function(newsletterId) {
-        this.context.router.push(`/template/${newsletterId}`);
-      },
-      render: function() {
-        return (
-          <div>
-            <h1>{MailPoet.I18n.t('welcomeNewsletterTypeTitle')}</h1>
-            <Breadcrumb step="type" />
-
-            <h3>{MailPoet.I18n.t('selectEventToSendWelcomeEmail')}</h3>
-
-            <Scheduling
-              item={this.state}
-              field={field}
-              onValueChange={this.handleValueChange} />
-
-            <p className="submit">
-              <input
-                className="button button-primary"
-                type="button"
-                onClick={ this.handleNext }
-                value={MailPoet.I18n.t('next')} />
-            </p>
-          </div>
-        );
-      },
-    });
-
-    return NewsletterWelcome;
-  }
-);

assets/js/src/notice.js

@@ -102,22 +102,11 @@ define('notice', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         'setMessage', this.options.message
       );
     },
-    isHTML: function(str) {
-      var a = document.createElement('div');
-      a.innerHTML = str;
-      for (var c = a.childNodes, i = c.length; i--;) {
-        if (c[i].nodeType == 1) return true;
-      }
-      return false;
-    },
     setMessage: function(message) {
       message = this.formatMessage(message);
 
-      // if it's not an html message
       // let's sugar coat the message with a fancy <p>
-      if (this.isHTML(message) === false) {
-          message = '<p>'+message+'</p>';
-      }
+      message = '<p>'+message+'</p>';
       // set message
       return this.element.html(message);
     },
@@ -153,13 +142,13 @@ define('notice', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
       // set class name
       switch (this.options.type) {
         case 'success':
-          this.element.addClass('updated');
+          this.element.addClass('notice notice-success');
         break;
         case 'system':
-          this.element.addClass('update-nag');
+          this.element.addClass('notice notice-warning');
         break;
         case 'error':
-          this.element.addClass('error');
+          this.element.addClass('notice notice-error');
         break;
       }
 
@@ -199,7 +188,7 @@ define('notice', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         // single id
         jQuery('[data-id="' + all + '"]').trigger('close');
       } else {
-        jQuery('.mailpoet_notice.updated:not([id]), .mailpoet_notice.error:not([id])')
+        jQuery('.mailpoet_notice.notice-success:not([id]), .mailpoet_notice.notice-error:not([id])')
           .trigger('close');
       }
     },

assets/js/src/num.js

@@ -0,0 +1,21 @@
+define('num',
+  [
+    'mailpoet'
+  ], function(
+    MailPoet
+) {
+  'use strict';
+
+  MailPoet.Num = {
+    toLocaleFixed: function (num, precision) {
+      precision = precision || 0;
+      var factor = Math.pow(10, precision);
+      return (Math.round(num * factor) / factor)
+        .toLocaleString(
+          undefined,
+          {minimumFractionDigits: precision, maximumFractionDigits: precision}
+        );
+    }
+  };
+
+});

assets/js/src/public.js

@@ -31,7 +31,7 @@ function(
         });
 
         form.parsley().on('form:submit', function(parsley) {
-          var data = form.serializeObject() || {};
+          var form_data = form.serializeObject() || {};
           // check if we're on the same domain
           if(isSameDomain(MailPoetForm.ajax_url) === false) {
             // non ajax post request
@@ -40,10 +40,11 @@ function(
             // ajax request
             MailPoet.Ajax.post({
               url: MailPoetForm.ajax_url,
-              token: data.token,
+              token: form_data.token,
+              api_version: form_data.api_version,
               endpoint: 'subscribers',
               action: 'subscribe',
-              data: data
+              data: form_data.data
             }).fail(function(response) {
               form.find('.mailpoet_validate_error').html(
                 response.errors.map(function(error) {

assets/js/src/segments/list.jsx

@@ -90,7 +90,7 @@ const messages = {
 const bulk_actions = [
   {
     name: 'trash',
-    label: MailPoet.I18n.t('trash'),
+    label: MailPoet.I18n.t('moveToTrash'),
     onSuccess: messages.onTrash
   }
 ];
@@ -112,6 +112,7 @@ const item_actions = [
     label: MailPoet.I18n.t('duplicate'),
     onClick: (item, refresh) => {
       return MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
         endpoint: 'segments',
         action: 'duplicate',
         data: {
@@ -153,6 +154,7 @@ const item_actions = [
     onClick: function(item, refresh) {
       MailPoet.Modal.loading(true);
       MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
         endpoint: 'segments',
         action: 'synchronize'
       }).done(function(response) {

assets/js/src/settings/tabs.js

@@ -15,6 +15,7 @@ define(
 
     MailPoet.Router = new (Backbone.Router.extend({
       routes: {
+        '': 'sendingMethodGroup', // the default tab is currently mta, needs its own method
         'mta(/:group)': 'sendingMethodGroup',
         '(:tab)': 'tabs',
       },
@@ -32,7 +33,7 @@ define(
 
         if(group === null) {
           // show sending methods
-          jQuery('.mailpoet_sending_methods').fadeIn();
+          jQuery('.mailpoet_sending_methods, .mailpoet_sending_methods_help').fadeIn();
         } else {
           // toggle SPF (hidden if the sending method is MailPoet)
           jQuery('#mailpoet_mta_spf')[
@@ -42,7 +43,7 @@ define(
           ]();
 
           // hide sending methods
-          jQuery('.mailpoet_sending_methods').hide();
+          jQuery('.mailpoet_sending_methods, .mailpoet_sending_methods_help').hide();
 
           // display selected sending method's settings
           jQuery('.mailpoet_sending_method[data-group="'+ group +'"]').show();
@@ -51,7 +52,7 @@ define(
       },
       tabs: function(tab, section) {
         // set default tab
-        tab = tab || 'basics';
+        tab = tab || 'mta';
 
         // reset all active tabs
         jQuery('.nav-tab-wrapper a').removeClass('nav-tab-active');

assets/js/src/subscribers/form.jsx

@@ -60,7 +60,8 @@ define(
         label: MailPoet.I18n.t('lists'),
         type: 'selection',
         placeholder: MailPoet.I18n.t('selectList'),
-        endpoint: "segments",
+        api_version: window.mailpoet_api_version,
+        endpoint: 'segments',
         multiple: true,
         selected: function(subscriber) {
           if (Array.isArray(subscriber.subscriptions) === false) {

assets/js/src/subscribers/importExport/export.js

@@ -138,6 +138,7 @@ define(
        }
        MailPoet.Modal.loading(true);
        MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: 'ImportExport',
           action: 'processExport',
           data: JSON.stringify({

assets/js/src/subscribers/importExport/import.js

@@ -190,6 +190,7 @@ define(
           mailChimpKeyVerifyButtonElement.click(function () {
             MailPoet.Modal.loading(true);
             MailPoet.Ajax.post({
+              api_version: window.mailpoet_api_version,
               endpoint: 'importExport',
               action: 'getMailChimpLists',
               data: {
@@ -225,6 +226,7 @@ define(
             }
             MailPoet.Modal.loading(true);
             MailPoet.Ajax.post({
+              api_version: window.mailpoet_api_version,
               endpoint: 'importExport',
               action: 'getMailChimpSubscribers',
               data: {
@@ -321,6 +323,10 @@ define(
                     // is the email in 'mailto:email' format?
                     email = test[1].trim();
                   }
+                  // test for valid characters using WP's rule (https://core.trac.wordpress.org/browser/tags/4.7.3/src/wp-includes/formatting.php#L2902)
+                  if (!/^[a-zA-Z0-9!#$%&\'*+\/=?^_`{|}~\.\-@]+$/.test(email) ) {
+                    return false;
+                  }
                   return email;
                 };
 
@@ -543,7 +549,7 @@ define(
                       MailPoet.Notice.error(MailPoet.I18n.t('segmentSelectionRequired'), {
                         static: true,
                         scroll: true,
-                        id: 'segmentSelection',
+                        id: 'notice_segmentSelection',
                         hideClose: true
                       });
                     }
@@ -572,6 +578,7 @@ define(
               var segmentDescription = jQuery('#new_segment_description').val().trim();
 
               MailPoet.Ajax.post({
+                api_version: window.mailpoet_api_version,
                 endpoint: 'ImportExport',
                 action: 'addSegment',
                 data: {
@@ -633,12 +640,12 @@ define(
                     columnId = 'email';
                   } else if (subscribers.header) {
                     var headerName = subscribers.header[i],
-                        header_name_match = mailpoetColumns.map(function (el) {
-                          return el.id;
+                        headerNameMatch = mailpoetColumns.map(function (el) {
+                          return el.name;
                         }).indexOf(headerName);
                     // set column type using header
-                    if (header_name_match !== -1) {
-                      columnId = headerName;
+                    if (headerNameMatch !== -1) {
+                      columnId = mailpoetColumns[headerNameMatch].id;
                     }// set column type using header name
                     else if (headerName) {
                       if (/first|first name|given name/i.test(headerName)) {
@@ -648,11 +655,6 @@ define(
                       } else if (/status/i.test(headerName)) {
                         columnId = 'status';
                       }
-                      /*else if (/subscribed|subscription/i.test(headerName)) {
-                       columnId = 'confirmed_at';
-                       } else if (/ip/i.test(headerName)) {
-                       columnId = 'confirmed_ip';
-                       }*/
                     }
                   }
                   // make sure the column id has not been previously selected
@@ -734,6 +736,7 @@ define(
 
                     // save custom field
                     MailPoet.Ajax.post({
+                      api_version: window.mailpoet_api_version,
                       endpoint: 'customFields',
                       action: 'save',
                       data: data
@@ -995,6 +998,7 @@ define(
               queue.add(function(queue) {
                 queue.pause();
                 MailPoet.Ajax.post({
+                  api_version: window.mailpoet_api_version,
                   endpoint: 'ImportExport',
                   action: 'processImport',
                   data: JSON.stringify({
@@ -1005,8 +1009,8 @@ define(
                     updateSubscribers: (jQuery(':radio[name="subscriber_update_option"]:checked').val() === 'yes') ? true : false
                   })
                 }).done(function(response) {
-                  importResults.created = response.data.created;
-                  importResults.updated = response.data.updated;
+                  importResults.created += response.data.created;
+                  importResults.updated += response.data.updated;
                   importResults.segments = response.data.segments;
                   importResults.added_to_segment_with_welcome_notification = response.data.added_to_segment_with_welcome_notification;
                   queue.run();

assets/js/src/subscribers/list.jsx

@@ -81,6 +81,22 @@ const messages = {
       ).replace('%$1d', count.toLocaleString());
     }
     MailPoet.Notice.success(message);
+  },
+  onNoItemsFound: (group) => {
+    if (group === 'bounced' && !mailpoet_premium_active) {
+      return (
+        <div>
+          <p>{MailPoet.I18n.t('bouncedSubscribersHelp')}</p>
+          <p>
+            <a href={ `admin.php?page=mailpoet-premium` } className="button-primary">
+              {MailPoet.I18n.t('bouncedSubscribersPremiumButtonText')}
+            </a>
+          </p>
+        </div>
+      );
+    }
+    // use default message
+    return false;
   }
 };
 
@@ -91,6 +107,7 @@ const bulk_actions = [
     onSelect: function() {
       let field = {
         id: 'move_to_segment',
+        api_version: window.mailpoet_api_version,
         endpoint: 'segments',
         filter: function(segment) {
           return !!(
@@ -122,6 +139,7 @@ const bulk_actions = [
     onSelect: function() {
       let field = {
         id: 'add_to_segment',
+        api_version: window.mailpoet_api_version,
         endpoint: 'segments',
         filter: function(segment) {
           return !!(
@@ -153,6 +171,7 @@ const bulk_actions = [
     onSelect: function() {
       let field = {
         id: 'remove_from_segment',
+        api_version: window.mailpoet_api_version,
         endpoint: 'segments',
         filter: function(segment) {
           return !!(
@@ -200,7 +219,7 @@ const bulk_actions = [
   },
   {
     name: 'trash',
-    label: MailPoet.I18n.t('trash'),
+    label: MailPoet.I18n.t('moveToTrash'),
     onSuccess: messages.onTrash
   }
 ];
@@ -255,7 +274,7 @@ const SubscriberList = React.createClass({
       case 'unsubscribed':
         status = MailPoet.I18n.t('unsubscribed');
       break;
-      
+
       case 'bounced':
         status = MailPoet.I18n.t('bounced');
       break;

build.sh

@@ -3,6 +3,7 @@
 # Translations (npm install & composer install need to be run before)
 echo '[BUILD] Generating translations'
 ./do makepot
+./do packtranslations
 
 plugin_name='mailpoet'
 
@@ -34,6 +35,7 @@ cp -Rf vendor $plugin_name
 cp -Rf views $plugin_name
 rm -Rf $plugin_name/assets/css/src
 rm -Rf $plugin_name/assets/js/src
+rm -Rf $plugin_name/lang/*.po
 
 # Remove extra files (docs, examples,...) from 3rd party extensions
 echo '[BUILD] Removing obsolete files from vendor libraries'
@@ -50,17 +52,20 @@ rm -rf $plugin_name/vendor/soundasleep/html2text/tests
 rm -rf $plugin_name/vendor/mtdowling/cron-expression/tests
 rm -rf $plugin_name/vendor/swiftmailer/swiftmailer/tests
 rm -rf $plugin_name/vendor/cerdic/css-tidy/testing
+rm -rf $plugin_name/vendor/sabberworm/php-css-parser/tests
 
 # Remove risky files from 3rd party extensions
 echo '[BUILD] Removing risky and demo files from vendor libraries'
 rm -f $plugin_name/vendor/j4mie/idiorm/demo.php
 rm -f $plugin_name/vendor/cerdic/css-tidy/css_optimiser.php
+rm -f $plugin_name/assets/js/lib/tinymce/package.json
 
 # Copy release files.
 echo '[BUILD] Copying release files'
 cp license.txt $plugin_name
 cp index.php $plugin_name
 cp $plugin_name.php $plugin_name
+cp mailpoet_initializer.php $plugin_name
 cp readme.txt $plugin_name
 cp uninstall.php $plugin_name
 

composer.json

@@ -8,23 +8,26 @@
   "require": {
     "php": ">=5.3.3",
     "twig/twig": "1.*",
-    "cerdic/css-tidy": "*",
-    "tburry/pquery": "*",
+    "cerdic/css-tidy": "^1.5.5",
+    "tburry/pquery": "^1.1.1",
     "j4mie/paris": "1.5.4",
     "swiftmailer/swiftmailer": "^5.4",
     "mtdowling/cron-expression": "^1.1",
     "nesbot/carbon": "^1.21",
-    "soundasleep/html2text": "dev-master"
+    "soundasleep/html2text": "^0.3.4",
+    "sabberworm/php-css-parser": "^8.1",
+    "symfony/polyfill-xml": "^1.3"
   },
   "require-dev": {
-    "codeception/codeception": "*",
-    "codeception/verify": "*",
-    "codegyre/robo": "*",
-    "vlucas/phpdotenv": "*",
+    "codeception/codeception": "^2.2.9",
+    "codeception/verify": "^0.3.3",
+    "consolidation/robo": "^1.0.5",
+    "henrikbjorn/lurker": "^1.2",
+    "vlucas/phpdotenv": "^2.4.0",
     "umpirsky/twig-gettext-extractor": "1.1.*",
     "raveren/kint": "^1.0",
-    "squizlabs/php_codesniffer": "*",
-    "wimg/php-compatibility": "*",
+    "squizlabs/php_codesniffer": "^2.8.1",
+    "wimg/php-compatibility": "^7.1.2",
     "simplyadmire/composer-plugins" : "@dev"
   },
   "autoload": {
@@ -34,7 +37,7 @@
     }
   },
   "scripts": {
-    "post-update-cmd": "rm -rf vendor/squizlabs/php_codesniffer/CodeSniffer/Standards/PHPCompatibility; cp -rpd vendor/wimg/php-compatibility vendor/squizlabs/php_codesniffer/CodeSniffer/Standards/PHPCompatibility",
-    "post-install-cmd": "rm -rf vendor/squizlabs/php_codesniffer/CodeSniffer/Standards/PHPCompatibility; cp -rpd vendor/wimg/php-compatibility vendor/squizlabs/php_codesniffer/CodeSniffer/Standards/PHPCompatibility"
+    "post-update-cmd": "rm -rf vendor/squizlabs/php_codesniffer/CodeSniffer/Standards/PHPCompatibility; cp -rp vendor/wimg/php-compatibility vendor/squizlabs/php_codesniffer/CodeSniffer/Standards/PHPCompatibility",
+    "post-install-cmd": "rm -rf vendor/squizlabs/php_codesniffer/CodeSniffer/Standards/PHPCompatibility; cp -rp vendor/wimg/php-compatibility vendor/squizlabs/php_codesniffer/CodeSniffer/Standards/PHPCompatibility"
   }
-}
+}

lib/API/API.php

@@ -1,152 +1,18 @@
 <?php
 namespace MailPoet\API;
-use \MailPoet\Util\Security;
 
 if(!defined('ABSPATH')) exit;
 
 class API {
-  private $_endpoint;
-  private $_method;
-  private $_token;
-
-  private $_endpoint_class;
-  private $_data = array();
-
-  function init() {
-     // Admin Security token
-    add_action(
-      'admin_head',
-      array($this, 'setToken')
-    );
-
-    // ajax (logged in users)
-    add_action(
-      'wp_ajax_mailpoet',
-      array($this, 'setupAjax')
-    );
-
-    // ajax (logged out users)
-    add_action(
-      'wp_ajax_nopriv_mailpoet',
-      array($this, 'setupAjax')
-    );
+  static function JSON() {
+    return new \MailPoet\API\JSON\API();
   }
 
-  function setupAjax() {
-    $this->getRequestData();
-
-    if($this->checkToken() === false) {
-      $error_response = new ErrorResponse(
-        array(
-          Error::UNAUTHORIZED => __('Invalid request.', 'mailpoet')
-        ),
-        array(),
-        Response::STATUS_UNAUTHORIZED
-      );
-      $error_response->send();
+  static function MP($version) {
+    $api_class = sprintf('%s\MP\%s\API', __NAMESPACE__, $version);
+    if(class_exists($api_class)) {
+      return new $api_class();
     }
-
-    $this->processRoute();
-  }
-
-  function getRequestData() {
-    $this->_endpoint = isset($_POST['endpoint'])
-      ? trim($_POST['endpoint'])
-      : null;
-    $this->_method = isset($_POST['method'])
-      ? trim($_POST['method'])
-      : null;
-    $this->_token = isset($_POST['token'])
-      ? trim($_POST['token'])
-      : null;
-
-    if(!$this->_endpoint || !$this->_method) {
-      // throw exception bad request
-      $error_response = new ErrorResponse(
-        array(
-          Error::BAD_REQUEST => __('Invalid request.', 'mailpoet')
-        ),
-        array(),
-        Response::STATUS_BAD_REQUEST
-      );
-      $error_response->send();
-    } else {
-      $this->_endpoint_class = (
-        __NAMESPACE__."\\Endpoints\\".ucfirst($this->_endpoint)
-      );
-
-      $this->_data = isset($_POST['data'])
-        ? stripslashes_deep($_POST['data'])
-        : array();
-
-      // remove reserved keywords from data
-      if(is_array($this->_data) && !empty($this->_data)) {
-        // filter out reserved keywords from data
-        $reserved_keywords = array(
-          'token',
-          'endpoint',
-          'method',
-          'mailpoet_redirect'
-        );
-        $this->_data = array_diff_key(
-          $this->_data,
-          array_flip($reserved_keywords)
-        );
-      }
-    }
-  }
-
-  function processRoute() {
-    try {
-      $endpoint = new $this->_endpoint_class();
-
-      // check the accessibility of the requested endpoint's action
-      // by default, an endpoint's action is considered "private"
-      $permissions = $endpoint->permissions;
-      if(
-        array_key_exists($this->_method, $permissions) === false
-        ||
-        $permissions[$this->_method] !== Access::ALL
-      ) {
-        if($this->checkPermissions() === false) {
-          $error_response = new ErrorResponse(
-            array(
-              Error::FORBIDDEN => __(
-                'You do not have the required permissions.',
-                'mailpoet'
-              )
-            ),
-            array(),
-            Response::STATUS_FORBIDDEN
-          );
-          $error_response->send();
-        }
-      }
-
-      $response = $endpoint->{$this->_method}($this->_data);
-      $response->send();
-    } catch(\Exception $e) {
-      $error_response = new ErrorResponse(
-        array($e->getCode() => $e->getMessage())
-      );
-      $error_response->send();
-    }
-  }
-
-  function checkPermissions() {
-    return current_user_can('manage_options');
-  }
-
-  function checkToken() {
-    return wp_verify_nonce($this->_token, 'mailpoet_token');
-  }
-
-  function setToken() {
-    $global = '<script type="text/javascript">';
-    $global .= 'var mailpoet_token = "';
-    $global .=  Security::generateToken();
-    $global .= '";';
-    $global .= '</script>';
-    echo $global;
+    throw new \Exception(__('Invalid API version.', 'mailpoet'));
   }
 }

lib/API/JSON/API.php

@@ -0,0 +1,200 @@
+<?php
+namespace MailPoet\API\JSON;
+
+use MailPoet\Config\Env;
+use MailPoet\Util\Helpers;
+use MailPoet\Util\Security;
+use MailPoet\WP\Hooks;
+
+if(!defined('ABSPATH')) exit;
+
+class API {
+  private $_request_api_version;
+  private $_request_endpoint;
+  private $_request_method;
+  private $_request_token;
+  private $_request_endpoint_class;
+  private $_request_data = array();
+  private $_endpoint_namespaces = array();
+  private $_available_api_versions = array(
+      'v1'
+  );
+  const CURRENT_VERSION = 'v1';
+
+  function __construct() {
+    foreach($this->_available_api_versions as $available_api_version) {
+      $this->addEndpointNamespace(
+        sprintf('%s\%s', __NAMESPACE__, $available_api_version),
+        $available_api_version
+      );
+    }
+  }
+
+  function init() {
+     // admin security token and API version
+    add_action(
+      'admin_head',
+      array($this, 'setTokenAndAPIVersion')
+    );
+
+    // ajax (logged in users)
+    add_action(
+      'wp_ajax_mailpoet',
+      array($this, 'setupAjax')
+    );
+
+    // ajax (logged out users)
+    add_action(
+      'wp_ajax_nopriv_mailpoet',
+      array($this, 'setupAjax')
+    );
+  }
+
+  function setupAjax() {
+    Hooks::doAction('mailpoet_api_setup', array($this));
+    $this->setRequestData($_POST);
+
+    if($this->checkToken() === false) {
+      $error_message = __('Invalid API request.', 'mailpoet');
+      $error_response = $this->createErrorResponse(Error::UNAUTHORIZED, $error_message, Response::STATUS_UNAUTHORIZED);
+      return $error_response->send();
+    }
+
+    $response = $this->processRoute();
+    $response->send();
+  }
+
+  function setRequestData($data) {
+    $this->_request_api_version = !empty($data['api_version']) ? $data['api_version']: false;
+
+    $this->_request_endpoint = isset($data['endpoint'])
+      ? Helpers::underscoreToCamelCase(trim($data['endpoint']))
+      : null;
+
+    // JS part of /wp-admin/customize.php does not like a 'method' field in a form widget
+    $method_param_name = isset($data['mailpoet_method']) ? 'mailpoet_method' : 'method';
+    $this->_request_method = isset($data[$method_param_name])
+      ? Helpers::underscoreToCamelCase(trim($data[$method_param_name]))
+      : null;
+
+    $this->_request_token = isset($data['token'])
+      ? trim($data['token'])
+      : null;
+
+    if(!$this->_request_endpoint || !$this->_request_method || !$this->_request_api_version) {
+      $error_message = __('Invalid API request.', 'mailpoet');
+      $error_response = $this->createErrorResponse(Error::BAD_REQUEST, $error_message, Response::STATUS_BAD_REQUEST);
+      return $error_response;
+    } else if(!empty($this->_endpoint_namespaces[$this->_request_api_version])) {
+      foreach($this->_endpoint_namespaces[$this->_request_api_version] as $namespace) {
+        $endpoint_class = sprintf(
+          '%s\%s',
+          $namespace,
+          ucfirst($this->_request_endpoint)
+        );
+        if(class_exists($endpoint_class)) {
+          $this->_request_endpoint_class = $endpoint_class;
+          break;
+        }
+      }
+      $this->_request_data = isset($data['data'])
+        ? stripslashes_deep($data['data'])
+        : array();
+
+      // remove reserved keywords from data
+      if(is_array($this->_request_data) && !empty($this->_request_data)) {
+        // filter out reserved keywords from data
+        $reserved_keywords = array(
+          'token',
+          'endpoint',
+          'method',
+          'api_version',
+          'mailpoet_method', // alias of 'method'
+          'mailpoet_redirect'
+        );
+        $this->_request_data = array_diff_key(
+          $this->_request_data,
+          array_flip($reserved_keywords)
+        );
+      }
+    }
+  }
+
+  function processRoute() {
+    try {
+      if(empty($this->_request_endpoint_class)) {
+        throw new \Exception(__('Invalid API endpoint.', 'mailpoet'));
+      }
+
+      $endpoint = new $this->_request_endpoint_class();
+
+      // check the accessibility of the requested endpoint's action
+      // by default, an endpoint's action is considered "private"
+      $permissions = $endpoint->permissions;
+      if(array_key_exists($this->_request_method, $permissions) === false ||
+         $permissions[$this->_request_method] !== Access::ALL
+      ) {
+        if($this->checkPermissions() === false) {
+          $error_message = __('You do not have the required permissions.', 'mailpoet');
+          $error_response = $this->createErrorResponse(Error::FORBIDDEN, $error_message, Response::STATUS_FORBIDDEN);
+          return $error_response;
+        }
+      }
+
+      $response = $endpoint->{$this->_request_method}($this->_request_data);
+      return $response;
+    } catch(\Exception $e) {
+      $error_message = $e->getMessage();
+      $error_response = $this->createErrorResponse(Error::BAD_REQUEST, $error_message, Response::STATUS_BAD_REQUEST);
+      return $error_response;
+    }
+  }
+
+  function checkPermissions() {
+    return current_user_can(Env::$required_permission);
+  }
+
+  function checkToken() {
+    return wp_verify_nonce($this->_request_token, 'mailpoet_token');
+  }
+
+  function setTokenAndAPIVersion() {
+    $global = '<script type="text/javascript">';
+    $global .= 'var mailpoet_token = "%s";';
+    $global .= 'var mailpoet_api_version = "%s";';
+    $global .= '</script>';
+    echo sprintf(
+      $global,
+      Security::generateToken(),
+      self::CURRENT_VERSION
+    );
+  }
+
+  function addEndpointNamespace($namespace, $version) {
+    if(!empty($this->_endpoint_namespaces[$version][$namespace])) return;
+    $this->_endpoint_namespaces[$version][] = $namespace;
+  }
+
+  function getEndpointNamespaces() {
+    return $this->_endpoint_namespaces;
+  }
+
+  function getRequestedEndpointClass() {
+    return $this->_request_endpoint_class;
+  }
+
+  function getRequestedAPIVersion() {
+    return $this->_request_api_version;
+  }
+
+  function createErrorResponse($error_type, $error_message, $response_status) {
+    $error_response = new ErrorResponse(
+      array(
+        $error_type => $error_message
+      ),
+      array(),
+      $response_status
+    );
+    return $error_response;
+  }
+}

lib/API/JSON/Access.php

@@ -1,5 +1,5 @@
 <?php
-namespace MailPoet\API;
+namespace MailPoet\API\JSON;
 
 if(!defined('ABSPATH')) exit;
 

lib/API/JSON/Endpoint.php

@@ -1,5 +1,5 @@
 <?php
-namespace MailPoet\API;
+namespace MailPoet\API\JSON;
 
 if(!defined('ABSPATH')) exit;
 
@@ -27,9 +27,9 @@ abstract class Endpoint {
   function badRequest($errors = array(), $meta = array()) {
     if(empty($errors)) {
       $errors = array(
-        Error::BAD_REQUEST => __('Invalid request parameters.', 'mailpoet')
+        Error::BAD_REQUEST => __('Invalid request parameters', 'mailpoet')
       );
     }
     return new ErrorResponse($errors, $meta, Response::STATUS_BAD_REQUEST);
   }
-}
+}

lib/API/JSON/Error.php

@@ -1,5 +1,5 @@
 <?php
-namespace MailPoet\API;
+namespace MailPoet\API\JSON;
 
 if(!defined('ABSPATH')) exit;
 

lib/API/JSON/ErrorResponse.php

@@ -1,5 +1,5 @@
 <?php
-namespace MailPoet\API;
+namespace MailPoet\API\JSON;
 
 if(!defined('ABSPATH')) exit;
 

lib/API/JSON/Response.php

@@ -1,5 +1,5 @@
 <?php
-namespace MailPoet\API;
+namespace MailPoet\API\JSON;
 
 if(!defined('ABSPATH')) exit;
 

lib/API/JSON/SuccessResponse.php

@@ -1,5 +1,5 @@
 <?php
-namespace MailPoet\API;
+namespace MailPoet\API\JSON;
 
 if(!defined('ABSPATH')) exit;
 

lib/API/JSON/v1/AutomatedLatestContent.php

@@ -1,7 +1,7 @@
 <?php
-namespace MailPoet\API\Endpoints;
-use \MailPoet\API\Endpoint as APIEndpoint;
-use \MailPoet\API\Error as APIError;
+namespace MailPoet\API\JSON\v1;
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\WP\Posts as WPPosts;
 
 if(!defined('ABSPATH')) exit;
 
@@ -28,17 +28,19 @@ class AutomatedLatestContent extends APIEndpoint {
   function getTerms($data = array()) {
     $taxonomies = (isset($data['taxonomies'])) ? $data['taxonomies'] : array();
     $search = (isset($data['search'])) ? $data['search'] : '';
-    $limit = (isset($data['limit'])) ? (int)$data['limit'] : 10;
+    $limit = (isset($data['limit'])) ? (int)$data['limit'] : 50;
     $page = (isset($data['page'])) ? (int)$data['page'] : 1;
 
     return $this->successResponse(
-      get_terms(
-        $taxonomies,
+      WPPosts::getTerms(
         array(
+          'taxonomy' => $taxonomies,
           'hide_empty' => false,
           'search' => $search,
           'number' => $limit,
-          'offset' => $limit * ($page - 1)
+          'offset' => $limit * ($page - 1),
+          'orderby' => 'name',
+          'order' => 'ASC'
         )
       )
     );

lib/API/JSON/v1/CustomFields.php

@@ -1,8 +1,8 @@
 <?php
-namespace MailPoet\API\Endpoints;
-use \MailPoet\API\Endpoint as APIEndpoint;
-use \MailPoet\API\Error as APIError;
-use \MailPoet\Models\CustomField;
+namespace MailPoet\API\JSON\v1;
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\API\JSON\Error as APIError;
+use MailPoet\Models\CustomField;
 
 if(!defined('ABSPATH')) exit;
 

lib/API/JSON/v1/Forms.php

@@ -1,13 +1,13 @@
 <?php
-namespace MailPoet\API\Endpoints;
-use MailPoet\API\Endpoint as APIEndpoint;
-use MailPoet\API\Error as APIError;
+namespace MailPoet\API\JSON\v1;
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\API\JSON\Error as APIError;
 
-use \MailPoet\Models\Form;
-use \MailPoet\Models\StatisticsForms;
-use \MailPoet\Form\Renderer as FormRenderer;
-use \MailPoet\Listing;
-use \MailPoet\Form\Util;
+use MailPoet\Models\Form;
+use MailPoet\Models\StatisticsForms;
+use MailPoet\Form\Renderer as FormRenderer;
+use MailPoet\Listing;
+use MailPoet\Form\Util;
 
 if(!defined('ABSPATH')) exit;
 

lib/API/JSON/v1/ImportExport.php

@@ -1,10 +1,8 @@
 <?php
-namespace MailPoet\API\Endpoints;
-use \MailPoet\API\Endpoint as APIEndpoint;
-use \MailPoet\API\Error as APIError;
+namespace MailPoet\API\JSON\v1;
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
 
 use MailPoet\Subscribers\ImportExport\Import\MailChimp;
-use MailPoet\Models\CustomField;
 use MailPoet\Models\Segment;
 
 if(!defined('ABSPATH')) exit;

lib/API/JSON/v1/MP2Migrator.php

@@ -0,0 +1,64 @@
+<?php
+namespace MailPoet\API\JSON\v1;
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+
+if(!defined('ABSPATH')) exit;
+
+class MP2Migrator extends APIEndpoint {
+  
+  public function __construct() {
+    $this->MP2Migrator = new \MailPoet\Config\MP2Migrator();
+  }
+  
+  /**
+   * Import end point
+   * 
+   * @param object $data
+   * @return object
+   */
+  public function import($data) {
+    try {
+      $process = $this->MP2Migrator->import($data);
+      return $this->successResponse($process);
+    } catch(\Exception $e) {
+      return $this->errorResponse(array(
+        $e->getCode() => $e->getMessage()
+      ));
+    }
+  }
+  
+  /**
+   * Stop import end point
+   * 
+   * @param object $data
+   * @return object
+   */
+  public function stopImport($data) {
+    try {
+      $process = $this->MP2Migrator->stopImport();
+      return $this->successResponse($process);
+    } catch(\Exception $e) {
+      return $this->errorResponse(array(
+        $e->getCode() => $e->getMessage()
+      ));
+    }
+  }
+  
+  /**
+   * Skip import end point
+   * 
+   * @param object $data
+   * @return object
+   */
+  public function skipImport($data) {
+    try {
+      $process = $this->MP2Migrator->skipImport();
+      return $this->successResponse($process);
+    } catch(\Exception $e) {
+      return $this->errorResponse(array(
+        $e->getCode() => $e->getMessage()
+      ));
+    }
+  }
+  
+}

lib/API/JSON/v1/Mailer.php

@@ -1,7 +1,7 @@
 <?php
-namespace MailPoet\API\Endpoints;
-use MailPoet\API\Endpoint as APIEndpoint;
-use MailPoet\API\Error as APIError;
+namespace MailPoet\API\JSON\v1;
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\API\JSON\Error as APIError;
 use MailPoet\Mailer\MailerLog;
 
 if(!defined('ABSPATH')) exit;
@@ -14,7 +14,10 @@ class Mailer extends APIEndpoint {
         (isset($data['sender'])) ? $data['sender'] : false,
         (isset($data['reply_to'])) ? $data['reply_to'] : false
       );
-      $result = $mailer->send($data['newsletter'], $data['subscriber']);
+      $extra_params = array(
+        'test_email' => true
+      );
+      $result = $mailer->send($data['newsletter'], $data['subscriber'], $extra_params);
     } catch(\Exception $e) {
       return $this->errorResponse(array(
         $e->getCode() => $e->getMessage()

lib/API/JSON/v1/NewsletterTemplates.php

@@ -1,7 +1,7 @@
 <?php
-namespace MailPoet\API\Endpoints;
-use \MailPoet\API\Endpoint as APIEndpoint;
-use \MailPoet\API\Error as APIError;
+namespace MailPoet\API\JSON\v1;
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\API\JSON\Error as APIError;
 
 use MailPoet\Models\NewsletterTemplate;
 

lib/API/JSON/v1/Newsletters.php

@@ -1,9 +1,10 @@
 <?php
-namespace MailPoet\API\Endpoints;
+namespace MailPoet\API\JSON\v1;
 
-use MailPoet\API\Endpoint as APIEndpoint;
-use MailPoet\API\Error as APIError;
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\API\JSON\Error as APIError;
 use MailPoet\Listing;
+use MailPoet\Models\SendingQueue;
 use MailPoet\Models\Setting;
 use MailPoet\Models\Newsletter;
 use MailPoet\Models\NewsletterTemplate;
@@ -14,6 +15,7 @@ use MailPoet\Models\Subscriber;
 use MailPoet\Newsletter\Renderer\Renderer;
 use MailPoet\Newsletter\Scheduler\Scheduler;
 use MailPoet\Newsletter\Url as NewsletterUrl;
+use MailPoet\WP\Hooks;
 
 if(!defined('ABSPATH')) exit;
 
@@ -28,12 +30,12 @@ class Newsletters extends APIEndpoint {
         APIError::NOT_FOUND => __('This newsletter does not exist.', 'mailpoet')
       ));
     } else {
-      return $this->successResponse(
-        $newsletter
+      $newsletter = $newsletter
         ->withSegments()
         ->withOptions()
-        ->asArray()
-      );
+        ->asArray();
+      $newsletter = Hooks::applyFilters('mailpoet_api_newsletters_get_after', $newsletter);
+      return $this->successResponse($newsletter);
     }
   }
 
@@ -50,6 +52,8 @@ class Newsletters extends APIEndpoint {
       unset($data['options']);
     }
 
+    $data = Hooks::applyFilters('mailpoet_api_newsletters_save_before', $data);
+
     $newsletter = Newsletter::createOrUpdate($data);
     $errors = $newsletter->getErrors();
 
@@ -70,31 +74,43 @@ class Newsletters extends APIEndpoint {
       }
 
       if(!empty($options)) {
-        NewsletterOption::where('newsletter_id', $newsletter->id)
-          ->deleteMany();
-
         $option_fields = NewsletterOptionField::where(
           'newsletter_type',
-          $data['type']
-        )->findArray();
+          $newsletter->type
+        )->findMany();
 
+        // update newsletter options
         foreach($option_fields as $option_field) {
-          if(isset($options[$option_field['name']])) {
-            $relation = NewsletterOption::create();
-            $relation->newsletter_id = $newsletter->id;
-            $relation->option_field_id = $option_field['id'];
-            $relation->value = $options[$option_field['name']];
-            $relation->save();
+          if(isset($options[$option_field->name])) {
+            $newsletter_option = NewsletterOption::createOrUpdate(
+              array(
+                'newsletter_id' => $newsletter->id,
+                'option_field_id' => $option_field->id,
+                'value' => $options[$option_field->name]
+              )
+            );
           }
         }
+
+        // reload newsletter with updated options
+        $newsletter = Newsletter::filter('filterWithOptions')
+          ->findOne($newsletter->id);
+
+        // if this is a post notification, process newsletter options and update its schedule
+        if($newsletter->type === Newsletter::TYPE_NOTIFICATION) {
+          // generate the new schedule from options and get the new "next run" date
+          $newsletter->schedule = Scheduler::processPostNotificationSchedule($newsletter);
+          $next_run_date = Scheduler::getNextRunDate($newsletter->schedule);
+          // find previously scheduled jobs and reschedule them using the new "next run" date
+          SendingQueue::where('newsletter_id', $newsletter->id)
+            ->where('status', SendingQueue::STATUS_SCHEDULED)
+            ->findResultSet()
+            ->set('scheduled_at', $next_run_date)
+            ->save();
+        }
       }
 
-      $newsletter = Newsletter::filter('filterWithOptions')->findOne($newsletter->id);
-
-      // if this is a post notification, process options and update its schedule
-      if($newsletter->type === Newsletter::TYPE_NOTIFICATION) {
-        Scheduler::processPostNotificationSchedule($newsletter);
-      }
+      Hooks::doAction('mailpoet_api_newsletters_save_after', $newsletter);
 
       return $this->successResponse($newsletter->asArray());
     }
@@ -193,6 +209,7 @@ class Newsletters extends APIEndpoint {
       if(!empty($errors)) {
         return $this->errorResponse($errors);
       } else {
+        Hooks::doAction('mailpoet_api_newsletters_duplicate_after', $newsletter, $duplicate);
         return $this->successResponse(
           Newsletter::findOne($duplicate->id)->asArray(),
           array('count' => 1)
@@ -220,7 +237,9 @@ class Newsletters extends APIEndpoint {
       $newsletter->save();
       $subscriber = Subscriber::getCurrentWPUser();
       $preview_url = NewsletterUrl::getViewInBrowserUrl(
-        $data, $subscriber, $queue = false, $preview = true
+        NewsletterUrl::TYPE_LISTING_EDITOR,
+        $newsletter,
+        $subscriber
       );
 
       return $this->successResponse(
@@ -245,13 +264,11 @@ class Newsletters extends APIEndpoint {
         APIError::NOT_FOUND => __('This newsletter does not exist.', 'mailpoet')
       ));
     } else {
-      $newsletter = $newsletter->asArray();
-
       $renderer = new Renderer($newsletter, $preview = true);
       $rendered_newsletter = $renderer->render();
       $divider = '***MailPoet***';
       $data_for_shortcodes = array_merge(
-        array($newsletter['subject']),
+        array($newsletter->subject),
         $rendered_newsletter
       );
 
@@ -264,24 +281,27 @@ class Newsletters extends APIEndpoint {
         $newsletter,
         $subscriber
       );
+
       list(
-        $newsletter['subject'],
-        $newsletter['body']['html'],
-        $newsletter['body']['text']
+        $rendered_newsletter['subject'],
+        $rendered_newsletter['body']['html'],
+        $rendered_newsletter['body']['text']
       ) = explode($divider, $shortcodes->replace($body));
 
       try {
-        $mailer = new \MailPoet\Mailer\Mailer(
-          $mailer = false,
-          $sender = false,
-          $reply_to = false
+        $mailer = (!empty($data['mailer'])) ?
+          $data['mailer'] :
+          new \MailPoet\Mailer\Mailer(
+            $mailer = false,
+            $sender = false,
+            $reply_to = false
         );
-        $result = $mailer->send($newsletter, $data['subscriber']);
+        $result = $mailer->send($rendered_newsletter, $data['subscriber']);
 
         if($result['response'] === false) {
           $error = sprintf(
             __('The email could not be sent: %s', 'mailpoet'),
-            $result['error']
+            $result['error_message']
           );
           return $this->errorResponse(array(APIError::BAD_REQUEST => $error));
         } else {
@@ -310,7 +330,7 @@ class Newsletters extends APIEndpoint {
 
       if($newsletter->type === Newsletter::TYPE_STANDARD) {
         $newsletter
-          ->withSegments()
+          ->withSegments(true)
           ->withSendingQueue()
           ->withStatistics();
       } else if($newsletter->type === Newsletter::TYPE_WELCOME) {
@@ -321,11 +341,11 @@ class Newsletters extends APIEndpoint {
       } else if($newsletter->type === Newsletter::TYPE_NOTIFICATION) {
         $newsletter
           ->withOptions()
-          ->withSegments()
+          ->withSegments(true)
           ->withChildrenCount();
       } else if($newsletter->type === Newsletter::TYPE_NOTIFICATION_HISTORY) {
         $newsletter
-          ->withSegments()
+          ->withSegments(true)
           ->withSendingQueue()
           ->withStatistics();
       }
@@ -337,9 +357,12 @@ class Newsletters extends APIEndpoint {
       }
 
       // get preview url
-      $subscriber = Subscriber::getCurrentWPUser();
       $newsletter->preview_url = NewsletterUrl::getViewInBrowserUrl(
-        $newsletter, $subscriber, $queue, $preview = true);
+        NewsletterUrl::TYPE_LISTING_EDITOR,
+        $newsletter,
+        $subscriber = null,
+        $queue
+      );
 
       $data[] = $newsletter->asArray();
     }
@@ -349,7 +372,8 @@ class Newsletters extends APIEndpoint {
       'filters' => $listing_data['filters'],
       'groups' => $listing_data['groups'],
       'mta_log' => Setting::getValue('mta_log'),
-      'mta_method' => Setting::getValue('mta.method')
+      'mta_method' => Setting::getValue('mta.method'),
+      'current_time' => current_time('mysql')
     ));
   }
 
@@ -428,4 +452,4 @@ class Newsletters extends APIEndpoint {
       );
     }
   }
-}
+}

lib/API/JSON/v1/Segments.php

@@ -1,13 +1,11 @@
 <?php
-namespace MailPoet\API\Endpoints;
-use \MailPoet\API\Endpoint as APIEndpoint;
-use \MailPoet\API\Error as APIError;
+namespace MailPoet\API\JSON\v1;
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\API\JSON\Error as APIError;
 
-use \MailPoet\Models\Segment;
-use \MailPoet\Models\SubscriberSegment;
-use \MailPoet\Models\SegmentFilter;
-use \MailPoet\Listing;
-use \MailPoet\Segments\WP;
+use MailPoet\Models\Segment;
+use MailPoet\Listing;
+use MailPoet\Segments\WP;
 
 if(!defined('ABSPATH')) exit;
 

lib/API/JSON/v1/SendingQueue.php

@@ -1,15 +1,11 @@
 <?php
-namespace MailPoet\API\Endpoints;
-use MailPoet\API\Endpoint as APIEndpoint;
-use MailPoet\API\Error as APIError;
+namespace MailPoet\API\JSON\v1;
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\API\JSON\Error as APIError;
 
 use MailPoet\Mailer\Mailer;
 use MailPoet\Models\Newsletter;
-use MailPoet\Models\NewsletterOption;
-use MailPoet\Models\NewsletterOptionField;
-use MailPoet\Models\Setting;
 use MailPoet\Models\Subscriber;
-use MailPoet\Models\SubscriberSegment;
 use MailPoet\Newsletter\Scheduler\Scheduler;
 use MailPoet\Models\SendingQueue as SendingQueueModel;
 use MailPoet\Util\Helpers;
@@ -52,7 +48,6 @@ class SendingQueue extends APIEndpoint {
         APIError::NOT_FOUND => __('This newsletter is already being sent.', 'mailpoet')
       ));
     }
-
     $queue = SendingQueueModel::where('newsletter_id', $newsletter->id)
       ->where('status', SendingQueueModel::STATUS_SCHEDULED)
       ->findOne();
@@ -77,10 +72,8 @@ class SendingQueue extends APIEndpoint {
       $segment_ids = array_map(function($segment) {
         return $segment['id'];
       }, $segments);
-      $subscribers = Subscriber::getSubscribedInSegments($segment_ids)
-        ->findArray();
-      $subscribers = Helpers::arrayColumn($subscribers, 'subscriber_id');
-      $subscribers = array_unique($subscribers);
+      $subscribers = Subscriber::getSubscribedInSegments($segment_ids)->findArray();
+      $subscribers = Helpers::flattenArray($subscribers);
       if(!count($subscribers)) {
         return $this->errorResponse(array(
           APIError::UNKNOWN => __('There are no subscribers in that list!', 'mailpoet')

lib/API/JSON/v1/Services.php

@@ -0,0 +1,125 @@
+<?php
+namespace MailPoet\API\JSON\v1;
+
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\API\JSON\Error as APIError;
+use MailPoet\Config\Installer;
+use MailPoet\Services\Bridge;
+use MailPoet\Util\License\License;
+use MailPoet\WP\DateTime;
+
+if(!defined('ABSPATH')) exit;
+
+class Services extends APIEndpoint {
+  public $bridge;
+  public $date_time;
+
+  function __construct() {
+    $this->bridge = new Bridge();
+    $this->date_time = new DateTime();
+  }
+
+  function checkMSSKey($data = array()) {
+    $key = isset($data['key']) ? trim($data['key']) : null;
+
+    if(!$key) {
+      return $this->badRequest(array(
+        APIError::BAD_REQUEST  => __('Please specify a key.', 'mailpoet')
+      ));
+    }
+
+    try {
+      $result = $this->bridge->checkMSSKey($key);
+    } catch(\Exception $e) {
+      return $this->errorResponse(array(
+        $e->getCode() => $e->getMessage()
+      ));
+    }
+
+    $state = !empty($result['state']) ? $result['state'] : null;
+
+    $success_message = null;
+    if($state == Bridge::MAILPOET_KEY_VALID) {
+      $success_message = __('Your MailPoet Sending Service key has been successfully validated.', 'mailpoet');
+    } elseif($state == Bridge::MAILPOET_KEY_EXPIRING) {
+      $success_message = sprintf(
+        __('Your MailPoet Sending Service key expires on %s!', 'mailpoet'),
+        $this->date_time->formatDate(strtotime($result['data']['expire_at']))
+      );
+    }
+
+    if($success_message) {
+      return $this->successResponse(array('message' => $success_message));
+    }
+
+    switch($state) {
+      case Bridge::MAILPOET_KEY_INVALID:
+        $error = __('Your MailPoet Sending Service key is invalid.', 'mailpoet');
+        break;
+      default:
+        $code = !empty($result['code']) ? $result['code'] : Bridge::CHECK_ERROR_UNKNOWN;
+        $error = sprintf(
+          __('Error validating MailPoet Sending Service key, please try again later (code: %s)', 'mailpoet'),
+          $code
+        );
+        break;
+    }
+
+    return $this->errorResponse(array(APIError::BAD_REQUEST => $error));
+  }
+
+  function checkPremiumKey($data = array()) {
+    $key = isset($data['key']) ? trim($data['key']) : null;
+
+    if(!$key) {
+      return $this->badRequest(array(
+        APIError::BAD_REQUEST  => __('Please specify a key.', 'mailpoet')
+      ));
+    }
+
+    try {
+      $result = $this->bridge->checkPremiumKey($key);
+    } catch(\Exception $e) {
+      return $this->errorResponse(array(
+        $e->getCode() => $e->getMessage()
+      ));
+    }
+
+    $state = !empty($result['state']) ? $result['state'] : null;
+
+    $success_message = null;
+    if($state == Bridge::PREMIUM_KEY_VALID) {
+      $success_message = __('Your Premium key has been successfully validated.', 'mailpoet');
+    } elseif($state == Bridge::PREMIUM_KEY_EXPIRING) {
+      $success_message = sprintf(
+        __('Your Premium key expires on %s.', 'mailpoet'),
+        $this->date_time->formatDate(strtotime($result['data']['expire_at']))
+      );
+    }
+
+    if($success_message) {
+      return $this->successResponse(
+        array('message' => $success_message),
+        Installer::getPremiumStatus()
+      );
+    }
+
+    switch($state) {
+      case Bridge::PREMIUM_KEY_INVALID:
+        $error = __('Your Premium key is invalid.', 'mailpoet');
+        break;
+      case Bridge::PREMIUM_KEY_ALREADY_USED:
+        $error = __('Your Premium key is already used on another site.', 'mailpoet');
+        break;
+      default:
+        $code = !empty($result['code']) ? $result['code'] : Bridge::CHECK_ERROR_UNKNOWN;
+        $error = sprintf(
+          __('Error validating Premium key, please try again later (code: %s)', 'mailpoet'),
+          $code
+        );
+        break;
+    }
+
+    return $this->errorResponse(array(APIError::BAD_REQUEST => $error));
+  }
+}

lib/API/JSON/v1/Settings.php

@@ -1,8 +1,10 @@
 <?php
-namespace MailPoet\API\Endpoints;
-use \MailPoet\API\Endpoint as APIEndpoint;
-use \MailPoet\API\Error as APIError;
-use \MailPoet\Models\Setting;
+namespace MailPoet\API\JSON\v1;
+
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\API\JSON\Error as APIError;
+use MailPoet\Models\Setting;
+use MailPoet\Services\Bridge;
 
 if(!defined('ABSPATH')) exit;
 
@@ -15,13 +17,15 @@ class Settings extends APIEndpoint {
     if(empty($settings)) {
       return $this->badRequest(array(
         APIError::BAD_REQUEST =>
-          __("You have not specified any settings to be saved.", 'mailpoet')
+          __('You have not specified any settings to be saved.', 'mailpoet')
       ));
     } else {
       foreach($settings as $name => $value) {
         Setting::setValue($name, $value);
       }
+      $bridge = new Bridge();
+      $bridge->onSettingsSave($settings);
       return $this->successResponse(Setting::getAll());
     }
   }
-}
+}

lib/API/JSON/v1/Setup.php

@@ -1,7 +1,9 @@
 <?php
-namespace MailPoet\API\Endpoints;
-use \MailPoet\API\Endpoint as APIEndpoint;
-use \MailPoet\Config\Activator;
+namespace MailPoet\API\JSON\v1;
+
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\Config\Activator;
+use MailPoet\WP\Hooks;
 
 if(!defined('ABSPATH')) exit;
 
@@ -11,6 +13,7 @@ class Setup extends APIEndpoint {
       $activator = new Activator();
       $activator->deactivate();
       $activator->activate();
+      Hooks::doAction('mailpoet_setup_reset');
       return $this->successResponse();
     } catch(\Exception $e) {
       return $this->errorResponse(array(