Releasing 3.0.0-rc.2.0.1

Fix form issue when using list selection field [MAILPOET-1077]

.circleci/config.yml

@@ -55,6 +55,48 @@ jobs:
       - store_artifacts:
           path: /tmp/fake-mailer/
           destination: fake-mailer
+  acceptance_tests:
+    working_directory: /home/circleci/mailpoet
+    machine: true
+    steps:
+      - checkout
+      - run:
+          name: "Set up virtual host"
+          command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
+      - restore_cache:
+          key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
+      - restore_cache:
+          key: npm-{{ checksum "package.json" }}
+      - run:
+          name: "Set up test environment"
+          command: |
+              sudo apt-get update
+              sudo apt-get install circleci-php-5.6.23
+              sudo rm /usr/bin/php
+              sudo ln -s /opt/circleci/php/5.6.23/bin/php /usr/bin/php
+              # Install NodeJS+NPM
+              curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
+              sudo apt-get install nodejs build-essential
+              # install plugin dependencies
+              curl -sS https://getcomposer.org/installer | php
+              php composer.phar install
+              ./do install
+      - save_cache:
+          key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
+          paths:
+            - vendor
+      - save_cache:
+          key: npm-{{ checksum "package.json" }}
+          paths:
+            - node_modules
+      - run:
+          name: Run acceptance tests
+          command: |
+              docker-compose run codeception --steps --debug -vvv --html --xml
+      - store_artifacts:
+          path: ~/mailpoet/tests/acceptance-tests/_output
+      - store_test_results:
+          path: ~/mailpoet/tests/acceptance-tests/_output
   php7:
     working_directory: /home/circleci/mailpoet
     docker:
@@ -92,3 +134,4 @@ workflows:
     jobs:
       - qa_js_php5
       - php7
+      - acceptance_tests

.eslintrc.es5.json

@@ -9,11 +9,6 @@
   },
   "rules": {
     "import/no-amd": 0,
-
-
-
-
-
     "space-before-function-paren": 0,
     "prefer-arrow-callback": 0,
     "no-undef": 0,
@@ -33,10 +28,8 @@
     "no-useless-return": 0,
     "array-callback-return": 0,
     "new-cap": 0,
-    "no-return-assign": 0,
     "no-continue": 0,
     "no-new": 0,
-    "no-cond-assign": 0,
     "space-unary-ops": 0,
     "no-redeclare": 0,
     "no-console": 0,
@@ -60,7 +53,6 @@
     "space-in-parens": 0,
     "semi": 0,
     "max-len": 0,
-    "no-multi-assign": 0,
     "no-trailing-spaces": 0,
     "global-require": 0,
     "no-throw-literal": 0,
@@ -75,7 +67,6 @@
     "one-var": 0,
     "camelcase": 0,
     "spaced-comment": 0,
-    "quotes": 0,
     "padded-blocks": 0,
     "object-curly-spacing": 0,
     "strict": 0,
@@ -85,13 +76,11 @@
     "no-unused-vars": 0,
     "object-shorthand": 0,
     "new-parens": 0,
-    "no-param-reassign": 0,
     "keyword-spacing": 0,
     "eol-last": 0,
     "dot-notation": 0,
     "linebreak-style": 0,
     "indent": 0,
-    "quote-props": 0,
     "prefer-template": 0,
     "func-names": 0
   }

.eslintrc.es6.json

@@ -12,11 +12,7 @@
   },
   "rules": {
     "comma-dangle": ["error", "always-multiline"],
-
-
-
     "import/no-amd": 0,
-
     "react/no-multi-comp": 0,
     "react/sort-comp": 0,
     "react/jsx-max-props-per-line": 0,
@@ -37,11 +33,9 @@
     "react/jsx-curly-spacing": 0,
     "react/no-did-mount-set-state": 0,
     "react/prefer-stateless-function": 0,
-
     "jsx-a11y/label-has-for": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/alt-text": 0,
-
     "func-names": 0,
     "object-shorthand": 0,
     "no-bitwise": 0,
@@ -49,7 +43,6 @@
     "prefer-template": 0,
     "keyword-spacing": 0,
     "default-case": 0,
-    "quote-props": 0,
     "array-callback-return": 0,
     "consistent-return": 0,
     "no-unreachable": 0,
@@ -59,7 +52,6 @@
     "import/no-extraneous-dependencies": 0,
     "camelcase": 0,
     "template-curly-spacing": 0,
-    "quotes": 0,
     "eqeqeq": 0,
     "no-lonely-if": 0,
     "space-unary-ops": 0,
@@ -80,7 +72,6 @@
     "no-sequences": 0,
     "no-extra-boolean-cast": 0,
     "dot-notation": 0,
-    "no-param-reassign": 0,
     "no-shadow": 0,
     "one-var": 0,
     "no-alert": 0,

.eslintrc.tests.json

@@ -9,9 +9,6 @@
   },
   "rules": {
     "import/no-amd": 0,
-
-
-
     "no-undef": 0,
     "one-var": 0,
     "indent": 0,
@@ -22,23 +19,19 @@
     "semi": 0,
     "keyword-spacing": 0,
     "no-bitwise": 0,
-    "no-multi-assign": 0,
     "newline-per-chained-call": 0,
     "no-spaced-func": 0,
     "func-call-spacing": 0,
     "max-len": 0,
     "space-unary-ops": 0,
-    "quotes": 0,
     "no-unused-vars": 0,
     "no-unused-expressions": 0,
     "no-underscore-dangle": 0,
-    "quote-props": 0,
     "no-shadow": 0,
     "padded-blocks": 0,
     "vars-on-top": 0,
     "space-before-blocks": 0,
     "object-curly-spacing": 0,
-    "no-param-reassign": 0,
     "one-var-declaration-per-line": 0,
     "func-names": 0,
     "space-before-function-paren": 0

.gitignore

@@ -3,7 +3,6 @@ TODO
 composer.phar
 /vendor
 tests/_output/*
-tests/acceptance.suite.yml
 tests/_support/_generated/*
 node_modules
 .env

Dockerfile

@@ -0,0 +1,39 @@
+FROM php:5.6-cli
+
+ENV COMPOSER_ALLOW_SUPERUSER=1
+
+RUN apt-get update && \
+    apt-get -y install \
+            git \
+            zlib1g-dev \
+            libssl-dev \
+            mysql-client \
+            sudo less  \
+        --no-install-recommends && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* && \
+    docker-php-ext-install bcmath zip mysqli pdo pdo_mysql && \
+    echo "date.timezone = UTC" >> /usr/local/etc/php/php.ini && \
+    curl -sS https://getcomposer.org/installer | php -- \
+        --filename=composer \
+        --install-dir=/usr/local/bin && \
+    composer global require --optimize-autoloader "hirak/prestissimo" && \
+    curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar && \
+    chmod +x wp-cli.phar && \
+    mv wp-cli.phar /usr/local/bin/wp
+
+# Prepare application
+WORKDIR /repo
+
+# Install vendor
+COPY ./composer.json /repo/composer.json
+
+# Add source-code
+COPY . /repo
+
+WORKDIR /wp-core/wp-content/plugins/mailpoet
+ENV WP_TEST_PATH=/wp-core
+
+ADD docker-entrypoint.sh /
+
+RUN ["chmod", "+x", "/docker-entrypoint.sh"]

README.md

@@ -180,3 +180,21 @@ 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.
+
+# Acceptance testing
+
+We are using Gravity Flow plugin's setup as an example for our acceptance test suite: https://www.stevenhenty.com/learn-acceptance-testing-deeply/
+
+From the article above:
+
+_Windows users only: enable hard drive sharing in the Docker settings._
+
+The browser runs in a docker container. You can use a VNC client to watch the test run, follow instructions in official 
+repo: https://github.com/SeleniumHQ/docker-selenium
+If you’re on a Mac, you can open vnc://localhost:5900 in Safari to watch the tests running in Chrome. If you’re on Windows, you’ll need a VNC client. Password: secret.
+
+
+To run tests:
+```sh
+$ ./do test:acceptance
+```

RoboFile.php

@@ -154,9 +154,8 @@ class RoboFile extends \Robo\Tasks {
 
   function testUnit($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
 
-    $command = 'vendor/bin/codecept run unit -f '.(($opts['file']) ? $opts['file'] : '');
+    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml -f '.(($opts['file']) ? $opts['file'] : '');
 
     if($opts['xml']) {
       $command .= ' --xml';
@@ -166,9 +165,8 @@ class RoboFile extends \Robo\Tasks {
 
   function testCoverage($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
     $command = join(' ', array(
-      'vendor/bin/codecept run',
+      'vendor/bin/codecept run unit -c codeception.unit.yml ',
       (($opts['file']) ? $opts['file'] : ''),
       '--coverage',
       ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
@@ -201,9 +199,9 @@ class RoboFile extends \Robo\Tasks {
 
   function testDebug($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
+    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
 
-    $command = 'vendor/bin/codecept run unit --debug -f '.(($opts['file']) ? $opts['file'] : '');
+    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml --debug -f '.(($opts['file']) ? $opts['file'] : '');
 
     if($opts['xml']) {
       $command .= ' --xml';
@@ -211,10 +209,14 @@ class RoboFile extends \Robo\Tasks {
     return $this->_exec($command);
   }
 
+  function testAcceptance() {
+    return $this->_exec('COMPOSE_HTTP_TIMEOUT=200 docker-compose run codeception --steps --debug -vvv');
+  }
+
   function testFailed() {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
+    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
-    return $this->_exec('vendor/bin/codecept run -g failed');
+    return $this->_exec('vendor/bin/codecept run -c codeception.unit.yml -g failed');
   }
 
   function qa() {

assets/css/src/newsletter_editor/common.styl

@@ -179,6 +179,28 @@ select.mailpoet_font-size
   width: 100%
   box-sizing: border-box
 
+.tooltip-help-designer-subject-line div, .tooltip-help-designer-preheader div
+  z-index: 100001
+
+.tooltip-help-send-preview
+  position: absolute
+  right: 15px
+
+.tooltip-help-designer-ideal-width
+  color: #656565
+  text-transform: none
+  margin-left: 5px
+  font-weight: normal
+
+.tooltip-help-designer-styles
+  position: absolute
+  top: 40px
+
+.tooltip-help-designer-full-width .dashicons
+  line-height 34px
+.tooltip-help-designer-full-width span
+  line-height 1.4em
+
 .mailpoet_button_primary
   border-color: $button-primary-border-color
   background-color: $button-primary-background-color

assets/css/src/settings.styl

@@ -54,6 +54,9 @@
       #mailpoet_mta_activate
         visibility hidden
 
+  .tooltip.dashicons.dashicons-editor-help
+    line-height: 1.4
+
   ul.sending-method-benefits
     list-style-type: none
     margin-bottom: 2em

assets/js/src/ajax.js

@@ -2,7 +2,7 @@ function requestFailed(errorMessage, xhr) {
   if (xhr.responseJSON) {
     return xhr.responseJSON;
   }
-  var message = errorMessage.replace("%d", xhr.status);
+  var message = errorMessage.replace('%d', xhr.status);
   return {
     errors: [
       {
@@ -12,7 +12,8 @@ function requestFailed(errorMessage, xhr) {
   };
 }
 
-define('ajax', ['mailpoet', 'jquery', 'underscore'], function(MailPoet, jQuery, _) {
+define('ajax', ['mailpoet', 'jquery', 'underscore'], function(mp, jQuery, _) {
+  var MailPoet = mp;
 
   MailPoet.Ajax = {
       version: 0.5,

assets/js/src/analytics_event.js

@@ -18,13 +18,14 @@
 var eventsCache = [];
 
 function track(name, data){
-  if (typeof window.mixpanel.track !== "function") {
+  if (typeof window.mixpanel.track !== 'function') {
     window.mixpanel.init(window.mixpanelTrackingId);
   }
   window.mixpanel.track(name, data);
 }
 
-function exportMixpanel(MailPoet) {
+function exportMixpanel(mp) {
+  var MailPoet = mp;
   MailPoet.forceTrackEvent = track;
 
   if (window.mailpoet_analytics_enabled) {
@@ -43,7 +44,7 @@ function trackCachedEvents() {
 }
 
 function initializeMixpanelWhenLoaded() {
-  if (typeof window.mixpanel === "object") {
+  if (typeof window.mixpanel === 'object') {
     exportMixpanel(MailPoet);
     trackCachedEvents();
   } else {
@@ -61,7 +62,8 @@ function cacheEvent(forced, name, data) {
 
 define(
   ['mailpoet', 'underscore'],
-  function(MailPoet, _) {
+  function(mp, _) {
+    var MailPoet = mp;
 
     MailPoet.trackEvent = _.partial(cacheEvent, false);
     MailPoet.forceTrackEvent = _.partial(cacheEvent, true);

assets/js/src/date.js

@@ -4,12 +4,14 @@ define('date',
     'jquery',
     'moment'
   ], function(
-    MailPoet,
+    mp,
     jQuery,
     Moment
 ) {
   'use strict';
 
+  var MailPoet = mp;
+
   MailPoet.Date = {
     version: 0.1,
     options: {},
@@ -17,8 +19,8 @@ define('date',
       offset: 0,
       format: 'F, d Y H:i:s'
     },
-    init: function(options) {
+    init: function (opts) {
-      options = options || {};
+      var options = opts || {};
 
       // set UTC offset
       if (
@@ -39,16 +41,16 @@ define('date',
 
       return this;
     },
-    format: function(date, options) {
+    format: function(date, opts) {
-      options = options || {};
+      var options = opts || {};
       this.init(options);
 
-      var date = Moment(date, this.convertFormat(options.parseFormat));
+      var momentDate = Moment(date, this.convertFormat(options.parseFormat));
-      if (options.offset === 0) date = date.utc();
+      if (options.offset === 0) momentDate = momentDate.utc();
-      return date.format(this.convertFormat(this.options.format));
+      return momentDate.format(this.convertFormat(this.options.format));
     },
-    toDate: function(date, options) {
+    toDate: function(date, opts) {
-      options = options || {};
+      var options = opts || {};
       this.init(options);
 
       return Moment(date, this.convertFormat(options.parseFormat)).toDate();
@@ -143,7 +145,8 @@ define('date',
       var convertedFormat = [];
       var escapeToken = false;
 
-      for(var index = 0, token = ''; token = format.charAt(index); index++){
+      for(var index = 0, token = ''; format.charAt(index); index += 1){
+        token = format.charAt(index);
         if (escapeToken === true) {
           convertedFormat.push('['+token+']');
           escapeToken = false;

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

@@ -143,28 +143,28 @@ define([
       switch(dateType) {
         case 'year_month_day':
           value = {
-            'year': this.state.year,
+            year: this.state.year,
-            'month': this.state.month,
+            month: this.state.month,
-            'day': this.state.day,
+            day: this.state.day,
           };
           break;
 
         case 'year_month':
           value = {
-            'year': this.state.year,
+            year: this.state.year,
-            'month': this.state.month,
+            month: this.state.month,
           };
           break;
 
         case 'month':
           value = {
-            'month': this.state.month,
+            month: this.state.month,
           };
           break;
 
         case 'year':
           value = {
-            'year': this.state.year,
+            year: this.state.year,
           };
           break;
       }

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

@@ -28,12 +28,13 @@ define([
       }
 
       let field = false;
+      let dataField = data.field;
 
       if(data.field['field'] !== undefined) {
-        data.field = jQuery.merge(data.field, data.field.field);
+        dataField = jQuery.merge(dataField, data.field.field);
       }
 
-      switch(data.field.type) {
+      switch(dataField.type) {
         case 'text':
           field = (<FormFieldText {...data} />);
           break;

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

@@ -180,6 +180,7 @@ define([
         <select
           id={ this.props.field.id || this.props.field.name }
           ref="select"
+          disabled={this.props.field.disabled}
           data-placeholder={ this.props.field.placeholder }
           multiple={ this.props.field.multiple }
           defaultValue={ this.getSelectedValues() }

assets/js/src/form/form.jsx

@@ -166,7 +166,7 @@ define(
 
         const formClasses = classNames(
           'mailpoet_form',
-          { 'mailpoet_form_loading': this.state.loading || this.props.loading }
+          { mailpoet_form_loading: this.state.loading || this.props.loading }
         );
 
         let beforeFormContent = false;

assets/js/src/form_editor/form_editor.js

@@ -11,12 +11,14 @@ Object.extend(document, (function() {
   var cache = Event.cacheDelegated;
 
   function getCacheForSelector(selector) {
-    return cache[selector] = cache[selector] || {};
+    cache[selector] = cache[selector] || {};
+    return cache[selector];
   }
 
   function getWrappersForSelector(selector, eventName) {
     var c = getCacheForSelector(selector);
-    return c[eventName] = c[eventName] || [];
+    c[eventName] = c[eventName] || [];
+    return c[eventName];
   }
 
   function findWrapper(selector, eventName, handler) {
@@ -79,8 +81,8 @@ Object.extend(document, (function() {
 })());
 
 var Observable = (function() {
-  function getEventName(name, namespace) {
+  function getEventName(nameA, namespace) {
-    name = name.substring(2);
+    var name = nameA.substring(2);
     if(namespace) name = namespace + ':' + name;
     return name.underscore().split('_').join(':');
   }
@@ -317,10 +319,10 @@ var WysijaForm = {
   save: function() {
     var position = 1,
       data = {
-        'name': $F('mailpoet_form_name'),
+        name: $F('mailpoet_form_name'),
-        'settings': $('mailpoet_form_settings').serialize(true),
+        settings: $('mailpoet_form_settings').serialize(true),
-        'body': [],
+        body: [],
-        'styles': (MailPoet.CodeEditor !== undefined) ? MailPoet.CodeEditor.getValue() : null
+        styles: (MailPoet.CodeEditor !== undefined) ? MailPoet.CodeEditor.getValue() : null
       };
     // body
     WysijaForm.getBlocks().each(function(b) {
@@ -574,7 +576,8 @@ var WysijaForm = {
     WysijaForm.locks.showingTools = false;
   },
   instances: {},
-  get: function(element, type) {
+  get: function(element, typ) {
+    var type = typ;
     if(type === undefined) type = 'block';
     // identify element
     var id = element.identify();
@@ -691,7 +694,7 @@ WysijaForm.DraggableItem = Class.create({
     return this.element.up('ul');
   },
   insert: function() {
-    $$("body")[0].insert(this.clone);
+    $$('body')[0].insert(this.clone);
   },
   onMousedown: function(event) {
     var draggable = new Draggable(this.clone, {
@@ -893,7 +896,8 @@ WysijaForm.Block = Class.create({
 });
 
 /* Invoked on item dropped */
-WysijaForm.Block.create = function(block, target) {
+WysijaForm.Block.create = function(createBlock, target) {
+  var block = createBlock;
   if($('form_template_' + block.type) === null) {
     return false;
   }
@@ -1050,7 +1054,8 @@ function info(value) {
       var noop = function() {};
       var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
       var length = methods.length;
-      var console = window.console = {};
+      window.console = {};
+      var console = {};
       while(length--) {
         console[methods[length]] = noop;
       }

assets/js/src/handlebars_helpers.js

@@ -19,7 +19,7 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
           }
 
           // set date format
-          var f = block.hash.format || "MMM Do, YYYY";
+          var f = block.hash.format || 'MMM Do, YYYY';
           // check if we passed a timestamp
           if(parseInt(timestamp, 10) == timestamp) {
               return moment.unix(timestamp).format(f);
@@ -67,7 +67,7 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
   });
 
   Handlebars.registerHelper('nl2br', function(value, block) {
-      return value.gsub("\n", "<br />");
+      return value.gsub('\n', '<br />');
   });
 
   Handlebars.registerHelper('json_encode', function(value, block) {
@@ -78,7 +78,7 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       return JSON.parse(value);
   });
   Handlebars.registerHelper('url', function(value, block) {
-      var url = window.location.protocol + "//" + window.location.host + window.location.pathname;
+      var url = window.location.protocol + '//' + window.location.host + window.location.pathname;
 
       return url + value;
   });
@@ -99,7 +99,7 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       // extract all lines into an array
       if(value === undefined) return '';
 
-      var lines = value.trim().split("\n");
+      var lines = value.trim().split('\n');
 
       // remove header & footer
       lines.shift();
@@ -125,12 +125,13 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
    * @return {String}          The truncated string.
    */
   Handlebars.registerHelper('ellipsis', function (str, limit, append) {
-      if (append === undefined) {
+      var strAppend = append;
-          append = '';
+      if (strAppend === undefined) {
+        strAppend = '';
       }
       var sanitized = str.replace(/(<([^>]+)>)/g, '');
       if (sanitized.length > limit) {
-          return sanitized.substr(0, limit - append.length) + append;
+          return sanitized.substr(0, limit - strAppend.length) + strAppend;
       } else {
           return sanitized;
       }
@@ -147,10 +148,10 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       case 'Courier New': return new Handlebars.SafeString("'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace");
       case 'Georgia': return new Handlebars.SafeString("Georgia, Times, 'Times New Roman', serif");
       case 'Lucida': return new Handlebars.SafeString("'Lucida Sans Unicode', 'Lucida Grande', sans-serif");
-      case 'Tahoma': return new Handlebars.SafeString("Tahoma, Verdana, Segoe, sans-serif");
+      case 'Tahoma': return new Handlebars.SafeString('Tahoma, Verdana, Segoe, sans-serif');
       case 'Times New Roman': return new Handlebars.SafeString("'Times New Roman', Times, Baskerville, Georgia, serif");
       case 'Trebuchet MS': return new Handlebars.SafeString("'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif");
-      case 'Verdana': return new Handlebars.SafeString("Verdana, Geneva, sans-serif");
+      case 'Verdana': return new Handlebars.SafeString('Verdana, Geneva, sans-serif');
       default: return font;
     }
   });

assets/js/src/help-tooltip.js

@@ -0,0 +1,21 @@
+define('helpTooltip', ['mailpoet', 'react', 'react-dom', 'help-tooltip.jsx'],
+  function (mp, React, ReactDOM, TooltipComponent) {
+    'use strict';
+    var MailPoet = mp;
+
+    MailPoet.helpTooltip = {
+      show: function (domContainerNode, opts) {
+
+        ReactDOM.render(React.createElement(
+          TooltipComponent, {
+            tooltip: opts.tooltip,
+            tooltipId: opts.tooltipId,
+            place: opts.place
+          }
+        ), domContainerNode);
+      }
+    };
+
+  }
+);
+

assets/js/src/help-tooltip.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+import ReactHtmlParser from 'react-html-parser';
+
+function Tooltip(props) {
+  let tooltipId = props.tooltipId;
+  let tooltip = props.tooltip;
+  // tooltip ID must be unique, defaults to tooltip text
+  if(!props.tooltipId && typeof props.tooltip === 'string') {
+    tooltipId = props.tooltip;
+  }
+
+  if(typeof props.tooltip === 'string') {
+    tooltip = (<span
+      style={{
+        pointerEvents: 'all',
+        maxWidth: '400',
+        display: 'inline-block',
+      }}
+    >
+      {ReactHtmlParser(props.tooltip)}
+    </span>);
+  }
+
+  return (
+    <span className={props.className}>
+      <span
+        style={{
+          cursor: 'pointer',
+        }}
+        className="tooltip dashicons dashicons-editor-help"
+        data-event="click"
+        data-tip
+        data-for={tooltipId}
+      >
+      </span>
+        <ReactTooltip
+          globalEventOff="click"
+          multiline={true}
+          id={tooltipId}
+          efect="solid"
+          place={props.place}
+        >
+          {tooltip}
+        </ReactTooltip>
+    </span>
+  );
+}
+
+Tooltip.propTypes = {
+  tooltipId: React.PropTypes.string,
+  tooltip: React.PropTypes.node.isRequired,
+  place: React.PropTypes.string,
+  className: React.PropTypes.string,
+};
+
+Tooltip.defaultProps = {
+  tooltipId: undefined,
+  place: undefined,
+  className: undefined,
+};
+
+module.exports = Tooltip;

assets/js/src/help/system_info.jsx

@@ -17,10 +17,10 @@ function printData(data) {
     return (<textarea
       readOnly={true}
       onFocus={handleFocus}
-      value={printableData.join("\n")}
+      value={printableData.join('\n')}
       style={{
-        width: "100%",
+        width: '100%',
-        height: "400px",
+        height: '400px',
       }}
     />);
   } else {
@@ -35,7 +35,7 @@ function KnowledgeBase() {
 
       <Tabs tab="systemInfo" />
 
-      <div className="mailpoet_notice notice inline notice-success" style={{ marginTop: "1em" }}>
+      <div className="mailpoet_notice notice inline notice-success" style={{ marginTop: '1em' }}>
         <p>{MailPoet.I18n.t('systemInfoIntro')}</p>
       </div>
 

assets/js/src/help/tabs.jsx

@@ -41,6 +41,6 @@ function Tabs(props) {
 };
 
 Tabs.propTypes = { tab: React.PropTypes.string };
-Tabs.defaultProps = { tab: "knowledgeBase" };
+Tabs.defaultProps = { tab: 'knowledgeBase' };
 
 module.exports = Tabs;

assets/js/src/i18n.js

@@ -2,9 +2,10 @@ define('i18n',
   [
     'mailpoet'
   ], function(
-    MailPoet
+    mp
 ) {
   'use strict';
+  var MailPoet = mp;
 
   var translations = {};
 
@@ -13,7 +14,7 @@ define('i18n',
       translations[key] = value;
     },
     t: function(key) {
-      return translations[key] || 'TRANSLATION "%$1s" NOT FOUND'.replace("%$1s", key);
+      return translations[key] || 'TRANSLATION "%$1s" NOT FOUND'.replace('%$1s', key);
     },
     all: function() {
       return translations;

assets/js/src/iframe.js

@@ -1,5 +1,6 @@
-define('iframe', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
+define('iframe', ['mailpoet'], function(mp) {
   'use strict';
+  var MailPoet = mp;
   MailPoet.Iframe = {
     marginY: 20,
     autoSize: function(iframe) {
@@ -10,12 +11,13 @@ define('iframe', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         iframe.contentWindow.document.body.scrollHeight
       );
     },
-    setSize: function(iframe, i) {
+    setSize: function(sizeIframe, i) {
+      var iframe = sizeIframe;
       if(!iframe) return;
 
       iframe.style.height = (
-        parseInt(i) + this.marginY
+        parseInt(i, 10) + this.marginY
-      ) + "px";
+      ) + 'px';
     }
   };
 

assets/js/src/jquery.serialize_object.js

@@ -3,8 +3,9 @@ define(
     'jquery'
   ],
   function(
-    $
+    jQuery
   ) {
+    var $ = jQuery;
     // Combination of jQuery.deparam and jQuery.serializeObject by Ben Alman.
     /*!
      * jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
@@ -24,7 +25,7 @@ define(
      */
     $.fn.serializeObject = function(coerce) {
       var obj = {},
-        coerce_types = { 'true': !0, 'false': !1, 'null': null };
+        coerce_types = { true: !0, false: !1, null: null };
 
       // Iterate over all name=value pairs.
       $.each( this.serializeArray(), function(j, v){
@@ -74,9 +75,10 @@ define(
           // * Rinse & repeat.
           for ( ; i <= keys_last; i++ ) {
             key = keys[i] === '' ? cur.length : keys[i];
-            cur = cur[key] = i < keys_last
+            cur[key] = i < keys_last
               ? cur[key] || ( keys[i+1] && isNaN( keys[i+1] ) ? {} : [] )
               : val;
+            cur = cur[key];
           }
 
         } else {

assets/js/src/listing/groups.jsx

@@ -11,7 +11,7 @@ define(['react', 'classnames'], (React, classNames) => {
         }
 
         const classes = classNames(
-            { 'current' : (group.name === this.props.group) }
+            { current : (group.name === this.props.group) }
           );
 
         return (

assets/js/src/listing/header.jsx

@@ -10,8 +10,9 @@ const ListingHeader = React.createClass({
   },
   render: function () {
     const columns = this.props.columns.map((column, index) => {
-      column.is_primary = (index === 0);
+      const renderColumn = column;
-      column.sorted = (this.props.sort_by === column.name)
+      renderColumn.is_primary = (index === 0);
+      renderColumn.sorted = (this.props.sort_by === column.name)
         ? this.props.sort_order
         : 'desc';
       return (
@@ -19,7 +20,7 @@ const ListingHeader = React.createClass({
           onSort={this.props.onSort}
           sort_by={this.props.sort_by}
           key={ 'column-' + index }
-          column={column} />
+          column={renderColumn} />
       );
     });
 
@@ -61,9 +62,9 @@ const ListingColumn = React.createClass({
     const classes = classNames(
       'manage-column',
       { 'column-primary': this.props.column.is_primary },
-      { 'sortable': this.props.column.sortable },
+      { sortable: this.props.column.sortable },
       this.props.column.sorted,
-      { 'sorted': (this.props.sort_by === this.props.column.name) }
+      { sorted: (this.props.sort_by === this.props.column.name) }
     );
     let label;
 

assets/js/src/listing/listing.jsx

@@ -226,7 +226,7 @@ const ListingItems = React.createClass({
     } else {
       const select_all_classes = classNames(
         'mailpoet_select_all',
-        { 'mailpoet_hidden': (
+        { mailpoet_hidden: (
             this.props.selection === false
             || (this.props.count <= this.props.limit)
           ),
@@ -260,8 +260,9 @@ const ListingItems = React.createClass({
           </tr>
 
           {this.props.items.map((item, index) => {
-            item.id = parseInt(item.id, 10);
+            const renderItem = item;
-            item.selected = (this.props.selected_ids.indexOf(item.id) !== -1);
+            renderItem.id = parseInt(item.id, 10);
+            renderItem.selected = (this.props.selected_ids.indexOf(renderItem.id) !== -1);
 
             return (
               <ListingItem
@@ -276,8 +277,8 @@ const ListingItems = React.createClass({
                 is_selectable={ this.props.is_selectable }
                 item_actions={ this.props.item_actions }
                 group={ this.props.group }
-                key={ `item-${item.id}-${index}` }
+                key={ `item-${renderItem.id}-${index}` }
-                item={ item } />
+                item={ renderItem } />
             );
           })}
         </tbody>
@@ -418,16 +419,17 @@ const Listing = React.createClass({
     }
   },
   setBaseUrlParams: function (base_url) {
-    if (base_url.indexOf(':') !== -1) {
+    let ret = base_url;
+    if (ret.indexOf(':') !== -1) {
       const params = this.getParams();
       Object.keys(params).map((key) => {
-        if (base_url.indexOf(':'+key) !== -1) {
+        if (ret.indexOf(':'+key) !== -1) {
-          base_url = base_url.replace(':'+key, params[key]);
+          ret = ret.replace(':'+key, params[key]);
         }
       });
     }
 
-    return base_url;
+    return ret;
   },
   componentDidMount: function () {
     if (this.isMounted()) {
@@ -781,7 +783,7 @@ const Listing = React.createClass({
       'widefat',
       'fixed',
       'striped',
-      { 'mailpoet_listing_loading': this.state.loading }
+      { mailpoet_listing_loading: this.state.loading }
     );
 
     // search

assets/js/src/modal.js

@@ -1,6 +1,7 @@
 define('modal', ['mailpoet', 'jquery'],
-  function(MailPoet, jQuery) {
+  function(mp, jQuery) {
     'use strict';
+    var MailPoet = mp;
     /***************************************************************************
     MailPoet Modal:
 
@@ -308,7 +309,6 @@ define('modal', ['mailpoet', 'jquery'],
         setDimensions: function() {
           switch(this.options.type) {
             case 'popup':
-              console.log(this.options)
               // set popup dimensions
               jQuery('#mailpoet_popup').css({
                 width: this.options.width,
@@ -459,9 +459,9 @@ define('modal', ['mailpoet', 'jquery'],
           jQuery('#mailpoet_modal_overlay').hide();
           return this;
         },
-        popup: function(options) {
+        popup: function(opts) {
           // get options
-          options = options || {};
+          var options = opts || {};
           // set modal type
           options.type = 'popup';
           // set overlay state
@@ -473,9 +473,9 @@ define('modal', ['mailpoet', 'jquery'],
 
           return this;
         },
-        panel: function(options) {
+        panel: function(opts) {
           // get options
-          options = options || {};
+          var options = opts || {};
           // reset subpanels
           this.subpanels = [];
           // set modal type

assets/js/src/mp2migrator.js

@@ -1,5 +1,6 @@
-define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
+define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
   'use strict';
+  var MailPoet = mp;
   MailPoet.MP2Migrator = {
 
     fatal_error: '',
@@ -27,8 +28,9 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         url: mailpoet_mp2_migrator.log_file_url,
         cache: false
       }).done(function (result) {
-        jQuery("#logger").html('');
+        jQuery('#logger').html('');
-        result.split("\n").forEach(function (row) {
+        result.split('\n').forEach(function (resultRow) {
+          var row = resultRow;
           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
           }
@@ -37,10 +39,10 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
             jQuery('#import-actions').hide();
             jQuery('#upgrade-completed').show();
           }
-          jQuery("#logger").append(row + "<br />\n");
+          jQuery('#logger').append(row + '<br />\n');
 
         });
-        jQuery("#logger").append('<span class="error_msg">' + MailPoet.MP2Migrator.fatal_error + '</span>' + "<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);

assets/js/src/newsletter_editor/App.js

@@ -6,7 +6,8 @@ define([
     'underscore',
     'handlebars',
     'handlebars_helpers'
-  ], function(Backbone, Marionette, Radio, jQuery, _, Handlebars) {
+  ], function(Backbone, Marionette, BackboneRadio, jQuery, _, Handlebars) {
+  var Radio = BackboneRadio;
 
   var AppView = Marionette.View.extend({
     el: '#mailpoet_editor',
@@ -28,7 +29,9 @@ define([
     },
 
     getChannel: function(channel) {
-      if (channel === undefined) channel = 'global';
+      if (channel === undefined) {
+        return Radio.channel('global');
+      }
       return Radio.channel(channel);
     }
   });

assets/js/src/newsletter_editor/behaviors/BehaviorsLookup.js

@@ -6,8 +6,8 @@
  */
 define([
     'backbone.marionette'
-  ], function(Marionette) {
+  ], function(BackboneMarionette) {
-
+  var Marionette = BackboneMarionette;
   var BehaviorsLookup = {};
   Marionette.Behaviors.behaviorsLookup = function() {
     return BehaviorsLookup;

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

@@ -9,14 +9,15 @@ define([
     'mailpoet',
     'spectrum'
   ], function(Marionette, BehaviorsLookup, MailPoet, Spectrum) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.ColorPickerBehavior = Marionette.Behavior.extend({
+  BL.ColorPickerBehavior = Marionette.Behavior.extend({
     onRender: function() {
       this.view.$('.mailpoet_color').spectrum({
         clickoutFiresChange: true,
         showInput: true,
         showInitial: true,
-        preferredFormat: "hex6",
+        preferredFormat: 'hex6',
         allowEmpty: true,
         chooseText: MailPoet.I18n.t('selectColor'),
         cancelText: MailPoet.I18n.t('cancelColorSelection')

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

@@ -11,7 +11,8 @@ define([
     'jquery',
     'newsletter_editor/behaviors/BehaviorsLookup',
     'interact'
-  ], function(Marionette, _, jQuery, BehaviorsLookup, interact) {
+  ], function(Marionette, _, jQuery, BL, interact) {
+  var BehaviorsLookup = BL;
 
   BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
     defaults: {
@@ -268,7 +269,7 @@ define([
       // 2. Remove visual markings of drop position visualization
       this.view.$('.mailpoet_drop_marker').remove();
     },
-    getDropPosition: function(eventX, eventY, unsafe) {
+    getDropPosition: function(eventX, eventY, is_unsafe) {
       var SPECIAL_AREA_INSERTION_WIDTH = 0.00, // Disable special insertion. Default: 0.3
 
         element = this.view.$el,
@@ -290,7 +291,7 @@ define([
 
         insertionType, index, position, indexAndPosition;
 
-      unsafe = !!unsafe;
+      unsafe = !!is_unsafe;
 
       if (this.getCollection().length === 0) {
         return {

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

@@ -11,8 +11,9 @@ define([
     'newsletter_editor/behaviors/BehaviorsLookup',
     'interact'
   ], function(Marionette, _, jQuery, BehaviorsLookup, interact) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.DraggableBehavior = Marionette.Behavior.extend({
+  BL.DraggableBehavior = Marionette.Behavior.extend({
     defaults: {
       cloneOriginal: false,
       hideOriginal: false,
@@ -46,7 +47,8 @@ define([
         // Scroll when dragging near edges of a window
         autoScroll: true,
 
-        onstart: function(event) {
+        onstart: function(startEvent) {
+          var event = startEvent;
 
           if (that.options.cloneOriginal === true) {
             // Use substitution instead of a clone
@@ -89,9 +91,8 @@ define([
             y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
 
           // translate the element
-          target.style.webkitTransform =
+          target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
-          target.style.transform =
+          target.style.webkitTransform = target.style.transform;
-            'translate(' + x + 'px, ' + y + 'px)';
 
           // update the posiion attributes
           target.setAttribute('data-x', x);
@@ -99,7 +100,8 @@ define([
         },
         onend: function (event) {
           var target = event.target;
-          target.style.webkitTransform = target.style.transform = '';
+          target.style.transform = '';
+          target.style.webkitTransform = target.style.transform;
           target.removeAttribute('data-x');
           target.removeAttribute('data-y');
           jQuery(event.interaction.element).addClass('mailpoet_droppable_active');
@@ -129,7 +131,8 @@ define([
       } else {
         interactable.getDropModel = this.view.getDropFunc();
       }
-      interactable.onDrop = function(options) {
+      interactable.onDrop = function(opts) {
+        var options = opts;
         if (_.isObject(options)) {
           // Inject Draggable behavior if possible
           options.dragBehavior = that;

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

@@ -7,11 +7,12 @@ define([
     'backbone.marionette',
     'newsletter_editor/behaviors/BehaviorsLookup'
   ], function(Marionette, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.HighlightEditingBehavior = Marionette.Behavior.extend({
+  BL.HighlightEditingBehavior = Marionette.Behavior.extend({
     modelEvents: {
-      'startEditing': 'enableHighlight',
+      startEditing: 'enableHighlight',
-      'stopEditing': 'disableHighlight'
+      stopEditing: 'disableHighlight'
     },
     enableHighlight: function() {
       this.$el.addClass('mailpoet_highlight');

assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js

@@ -8,8 +8,9 @@ define([
     'newsletter_editor/behaviors/BehaviorsLookup',
     'interact'
   ], function(Marionette, BehaviorsLookup, interact) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.ResizableBehavior = Marionette.Behavior.extend({
+  BL.ResizableBehavior = Marionette.Behavior.extend({
     defaults: {
       elementSelector: null,
       resizeHandleSelector: true, // true will use edges of the element itself
@@ -18,8 +19,8 @@ define([
       modelField: 'styles.block.height'
     },
     events: {
-      "mouseenter": 'showResizeHandle',
+      mouseenter: 'showResizeHandle',
-      "mouseleave": 'hideResizeHandle'
+      mouseleave: 'hideResizeHandle'
     },
     onRender: function() {
       this.attachResize();

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

@@ -8,8 +8,9 @@ define([
     'jquery',
     'newsletter_editor/behaviors/BehaviorsLookup'
   ], function(Marionette, jQuery, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.ShowSettingsBehavior = Marionette.Behavior.extend({
+  BL.ShowSettingsBehavior = Marionette.Behavior.extend({
     defaults: {
       ignoreFrom: '' // selector
     },

assets/js/src/newsletter_editor/behaviors/SortableBehavior.js

@@ -8,14 +8,15 @@ define([
     'underscore',
     'newsletter_editor/behaviors/BehaviorsLookup'
   ], function(Marionette, _, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.SortableBehavior = Marionette.Behavior.extend({
+  BL.SortableBehavior = Marionette.Behavior.extend({
     onRender: function() {
       var collection = this.view.collection;
 
       if (_.isFunction(this.$el.sortable)) {
         this.$el.sortable({
-          cursor: "move",
+          cursor: 'move',
           start: function(event, ui) {
             ui.item.data('previousIndex', ui.item.index());
           },

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

@@ -8,16 +8,17 @@ define([
     'underscore',
     'newsletter_editor/behaviors/BehaviorsLookup'
   ], function(Marionette, _, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.TextEditorBehavior = Marionette.Behavior.extend({
+  BL.TextEditorBehavior = Marionette.Behavior.extend({
     defaults: {
       selector: '.mailpoet_content',
-      toolbar1: "bold italic link unlink forecolor mailpoet_shortcodes",
+      toolbar1: 'bold italic link unlink forecolor mailpoet_shortcodes',
-      toolbar2: "",
+      toolbar2: '',
-      validElements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
+      validElements: 'p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br',
-      invalidElements: "script",
+      invalidElements: 'script',
       blockFormats: 'Paragraph=p',
-      plugins: "link textcolor colorpicker mailpoet_shortcodes",
+      plugins: 'link textcolor colorpicker mailpoet_shortcodes',
       configurationFilter: function(originalConfig) { return originalConfig; }
     },
     onDomRefresh: function() {

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

@@ -28,7 +28,7 @@ define([
     jQuery
   ) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -128,12 +128,12 @@ define([
   });
 
   Module.AutomatedLatestContentBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block',
     initialize: function() {
       function replaceButtonStylesHandler(data) {
-        this.model.set({"readMoreButton": data});
+        this.model.set({readMoreButton: data});
       }
-      App.getChannel().on("replaceAllButtonStyles", replaceButtonStylesHandler.bind(this));
+      App.getChannel().on('replaceAllButtonStyles', replaceButtonStylesHandler.bind(this));
     },
     getTemplate: function() { return templates.automatedLatestContentBlock; },
     regions: {
@@ -143,7 +143,7 @@ define([
     modelEvents: _.extend(
       _.omit(base.BlockView.prototype.modelEvents, 'change'),
       {
-        'postsChanged': 'render'
+        postsChanged: 'render'
       }),
     events: _.extend(base.BlockView.prototype.events, {
       'click .mailpoet_automated_latest_content_block_overlay': 'showSettings'
@@ -171,28 +171,28 @@ define([
     getTemplate: function() { return templates.automatedLatestContentBlockSettings; },
     events: function() {
       return {
-        "click .mailpoet_automated_latest_content_hide_display_options": 'toggleDisplayOptions',
+        'click .mailpoet_automated_latest_content_hide_display_options': 'toggleDisplayOptions',
-        "click .mailpoet_automated_latest_content_show_display_options": 'toggleDisplayOptions',
+        'click .mailpoet_automated_latest_content_show_display_options': 'toggleDisplayOptions',
-        "click .mailpoet_automated_latest_content_select_button": 'showButtonSettings',
+        'click .mailpoet_automated_latest_content_select_button': 'showButtonSettings',
-        "click .mailpoet_automated_latest_content_select_divider": 'showDividerSettings',
+        'click .mailpoet_automated_latest_content_select_divider': 'showDividerSettings',
-        "change .mailpoet_automated_latest_content_read_more_type": 'changeReadMoreType',
+        'change .mailpoet_automated_latest_content_read_more_type': 'changeReadMoreType',
-        "change .mailpoet_automated_latest_content_display_type": 'changeDisplayType',
+        'change .mailpoet_automated_latest_content_display_type': 'changeDisplayType',
-        "change .mailpoet_automated_latest_content_title_format": 'changeTitleFormat',
+        'change .mailpoet_automated_latest_content_title_format': 'changeTitleFormat',
-        "change .mailpoet_automated_latest_content_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
+        'change .mailpoet_automated_latest_content_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
-        "change .mailpoet_automated_latest_content_show_divider": _.partial(this.changeBoolField, 'showDivider'),
+        'change .mailpoet_automated_latest_content_show_divider': _.partial(this.changeBoolField, 'showDivider'),
-        "input .mailpoet_automated_latest_content_show_amount": _.partial(this.changeField, "amount"),
+        'input .mailpoet_automated_latest_content_show_amount': _.partial(this.changeField, 'amount'),
-        "change .mailpoet_automated_latest_content_content_type": _.partial(this.changeField, "contentType"),
+        'change .mailpoet_automated_latest_content_content_type': _.partial(this.changeField, 'contentType'),
-        "change .mailpoet_automated_latest_content_include_or_exclude": _.partial(this.changeField, "inclusionType"),
+        'change .mailpoet_automated_latest_content_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
-        "change .mailpoet_automated_latest_content_title_alignment": _.partial(this.changeField, "titleAlignment"),
+        'change .mailpoet_automated_latest_content_title_alignment': _.partial(this.changeField, 'titleAlignment'),
-        "change .mailpoet_automated_latest_content_image_full_width": _.partial(this.changeBoolField, "imageFullWidth"),
+        'change .mailpoet_automated_latest_content_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
-        "change .mailpoet_automated_latest_content_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
+        'change .mailpoet_automated_latest_content_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
-        "change .mailpoet_automated_latest_content_show_author": _.partial(this.changeField, "showAuthor"),
+        'change .mailpoet_automated_latest_content_show_author': _.partial(this.changeField, 'showAuthor'),
-        "input .mailpoet_automated_latest_content_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
+        'input .mailpoet_automated_latest_content_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
-        "change .mailpoet_automated_latest_content_show_categories": _.partial(this.changeField, "showCategories"),
+        'change .mailpoet_automated_latest_content_show_categories': _.partial(this.changeField, 'showCategories'),
-        "input .mailpoet_automated_latest_content_categories": _.partial(this.changeField, "categoriesPrecededBy"),
+        'input .mailpoet_automated_latest_content_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
-        "input .mailpoet_automated_latest_content_read_more_text": _.partial(this.changeField, "readMoreText"),
+        'input .mailpoet_automated_latest_content_read_more_text': _.partial(this.changeField, 'readMoreText'),
-        "change .mailpoet_automated_latest_content_sort_by": _.partial(this.changeField, "sortBy"),
+        'change .mailpoet_automated_latest_content_sort_by': _.partial(this.changeField, 'sortBy'),
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     onRender: function() {
@@ -392,8 +392,9 @@ define([
   });
 
   App.on('start', function(App, options) {
-    App._ALCSupervisor = new Module.ALCSupervisor();
+    var Application = App;
-    App._ALCSupervisor.refresh();
+    Application._ALCSupervisor = new Module.ALCSupervisor();
+    Application._ALCSupervisor.refresh();
   });
 
   return Module;

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

@@ -14,7 +14,7 @@ define([
     'modal'
   ], function(App, Marionette, SuperModel, _, jQuery, MailPoet, Modal) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       AugmentedView = Marionette.View.extend({});
@@ -50,13 +50,13 @@ define([
       toolsRegion: '> .mailpoet_tools'
     },
     modelEvents: {
-      'change': 'render',
+      change: 'render',
-      'delete': 'deleteBlock',
+      delete: 'deleteBlock',
-      'duplicate': 'duplicateBlock'
+      duplicate: 'duplicateBlock'
     },
     events: {
-      "mouseenter": "showTools",
+      mouseenter: 'showTools',
-      "mouseleave": "hideTools"
+      mouseleave: 'hideTools'
     },
     behaviors: {
       DraggableBehavior: {
@@ -180,11 +180,11 @@ define([
   Module.BlockToolsView = AugmentedView.extend({
     getTemplate: function() { return templates.genericBlockTools; },
     events: {
-      "click .mailpoet_edit_block": "changeSettings",
+      'click .mailpoet_edit_block': 'changeSettings',
-      "click .mailpoet_delete_block_activate": "showDeletionConfirmation",
+      'click .mailpoet_delete_block_activate': 'showDeletionConfirmation',
-      "click .mailpoet_delete_block_cancel": "hideDeletionConfirmation",
+      'click .mailpoet_delete_block_cancel': 'hideDeletionConfirmation',
-      "click .mailpoet_delete_block_confirm": "deleteBlock",
+      'click .mailpoet_delete_block_confirm': 'deleteBlock',
-      "click .mailpoet_duplicate_block": "duplicateBlock"
+      'click .mailpoet_duplicate_block': 'duplicateBlock'
     },
     // Markers of whether these particular tools will be used for this instance
     tools: {
@@ -194,8 +194,8 @@ define([
       move: true
     },
     getSettingsView: function() { return Module.BlockSettingsView; },
-    initialize: function(options) {
+    initialize: function(opts) {
-      options = options || {};
+      var options = opts || {};
       if (!_.isUndefined(options.tools)) {
         // Make a new block specific tool config object
         this.tools = jQuery.extend({}, this.tools, options.tools || {});
@@ -298,7 +298,7 @@ define([
     behaviors: {
       DraggableBehavior: {
         drop: function() {
-          throw "Unsupported operation";
+          throw 'Unsupported operation';
         }
       }
     }

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

@@ -9,7 +9,7 @@ define([
     'jquery'
   ], function(App, BaseBlock, MailPoet, _, jQuery) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -41,7 +41,7 @@ define([
   });
 
   Module.ButtonBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_button_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_button_block mailpoet_droppable_block',
     getTemplate: function() { return templates.buttonBlock; },
     onDragSubstituteBy: function() { return Module.ButtonWidgetView; },
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
@@ -68,34 +68,34 @@ define([
     getTemplate: function() { return templates.buttonBlockSettings; },
     events: function() {
       return {
-        "input .mailpoet_field_button_text": _.partial(this.changeField, "text"),
+        'input .mailpoet_field_button_text': _.partial(this.changeField, 'text'),
-        "input .mailpoet_field_button_url": _.partial(this.changeField, "url"),
+        'input .mailpoet_field_button_url': _.partial(this.changeField, 'url'),
-        "change .mailpoet_field_button_alignment": _.partial(this.changeField, "styles.block.textAlign"),
+        'change .mailpoet_field_button_alignment': _.partial(this.changeField, 'styles.block.textAlign'),
-        "change .mailpoet_field_button_font_color": _.partial(this.changeColorField, "styles.block.fontColor"),
+        'change .mailpoet_field_button_font_color': _.partial(this.changeColorField, 'styles.block.fontColor'),
-        "change .mailpoet_field_button_font_family": _.partial(this.changeField, "styles.block.fontFamily"),
+        'change .mailpoet_field_button_font_family': _.partial(this.changeField, 'styles.block.fontFamily'),
-        "change .mailpoet_field_button_font_size": _.partial(this.changeField, "styles.block.fontSize"),
+        'change .mailpoet_field_button_font_size': _.partial(this.changeField, 'styles.block.fontSize'),
-        "change .mailpoet_field_button_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_button_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "change .mailpoet_field_button_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
+        'change .mailpoet_field_button_border_color': _.partial(this.changeColorField, 'styles.block.borderColor'),
-        "change .mailpoet_field_button_font_weight": "changeFontWeight",
+        'change .mailpoet_field_button_font_weight': 'changeFontWeight',
 
-        "input .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_button_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "change .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'change .mailpoet_field_button_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "input .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_button_border_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
 
-        "input .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
+        'input .mailpoet_field_button_border_radius': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
-        "change .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
+        'change .mailpoet_field_button_border_radius': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
-        "input .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
+        'input .mailpoet_field_button_border_radius_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
 
-        "input .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
+        'input .mailpoet_field_button_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
-        "change .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
+        'change .mailpoet_field_button_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
-        "input .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
+        'input .mailpoet_field_button_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
 
-        "input .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
+        'input .mailpoet_field_button_line_height': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
-        "change .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
+        'change .mailpoet_field_button_line_height': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
-        "input .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
+        'input .mailpoet_field_button_line_height_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
 
-        "click .mailpoet_field_button_replace_all_styles": "applyToAll",
+        'click .mailpoet_field_button_replace_all_styles': 'applyToAll',
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     templateContext: function() {

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

@@ -12,7 +12,7 @@ define([
     'newsletter_editor/blocks/base'
   ], function(Backbone, Marionette, _, jQuery, App, BaseBlock) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock,
@@ -105,7 +105,7 @@ define([
     className: 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
     getTemplate: function() { return templates.containerBlock; },
     events: _.extend({}, base.BlockView.prototype.events, {
-      "click .mailpoet_newsletter_layer_selector": "toggleEditingLayer"
+      'click .mailpoet_newsletter_layer_selector': 'toggleEditingLayer'
     }),
     ui: {
       tools: '> .mailpoet_tools'
@@ -237,8 +237,8 @@ define([
     getTemplate: function() { return templates.containerBlockSettings; },
     events: function() {
       return {
-        "change .mailpoet_field_container_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_container_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     regions: {

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

@@ -9,7 +9,7 @@ define([
     'mailpoet'
   ], function(App, BaseBlock, _, jQuery, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -32,7 +32,7 @@ define([
   });
 
   Module.DividerBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_divider_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_divider_block mailpoet_droppable_block',
     getTemplate: function() { return templates.dividerBlock; },
     modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
     behaviors: _.defaults({
@@ -87,16 +87,16 @@ define([
     getTemplate: function() { return templates.dividerBlockSettings; },
     events: function() {
       return {
-        "click .mailpoet_field_divider_style": 'changeStyle',
+        'click .mailpoet_field_divider_style': 'changeStyle',
 
-        "input .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_divider_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "change .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'change .mailpoet_field_divider_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "input .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_divider_border_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
 
-        "change .mailpoet_field_divider_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
+        'change .mailpoet_field_divider_border_color': _.partial(this.changeColorField, 'styles.block.borderColor'),
-        "change .mailpoet_field_divider_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_divider_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "click .mailpoet_button_divider_apply_to_all": "applyToAll",
+        'click .mailpoet_button_divider_apply_to_all': 'applyToAll',
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     modelEvents: function() {

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

@@ -7,7 +7,7 @@ define([
     'underscore'
   ], function(App, BaseBlock, _) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -37,7 +37,7 @@ define([
   });
 
   Module.FooterBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_footer_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_footer_block mailpoet_droppable_block',
     getTemplate: function() { return templates.footerBlock; },
     modelEvents: _.extend({
       'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render'
@@ -78,16 +78,16 @@ define([
     getTemplate: function() { return templates.footerBlockSettings; },
     events: function() {
       return {
-        "change .mailpoet_field_footer_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
+        'change .mailpoet_field_footer_text_color': _.partial(this.changeColorField, 'styles.text.fontColor'),
-        "change .mailpoet_field_footer_text_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
+        'change .mailpoet_field_footer_text_font_family': _.partial(this.changeField, 'styles.text.fontFamily'),
-        "change .mailpoet_field_footer_text_size": _.partial(this.changeField, "styles.text.fontSize"),
+        'change .mailpoet_field_footer_text_size': _.partial(this.changeField, 'styles.text.fontSize'),
-        "change #mailpoet_field_footer_link_color": _.partial(this.changeColorField, "styles.link.fontColor"),
+        'change #mailpoet_field_footer_link_color': _.partial(this.changeColorField, 'styles.link.fontColor'),
-        "change #mailpoet_field_footer_link_underline": function(event) {
+        'change #mailpoet_field_footer_link_underline': function(event) {
         this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
       },
-        "change .mailpoet_field_footer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_footer_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "change .mailpoet_field_footer_alignment": _.partial(this.changeField, "styles.text.textAlign"),
+        'change .mailpoet_field_footer_alignment': _.partial(this.changeField, 'styles.text.textAlign'),
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     templateContext: function() {

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

@@ -7,7 +7,7 @@ define([
     'underscore'
   ], function(App, BaseBlock, _) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -37,7 +37,7 @@ define([
   });
 
   Module.HeaderBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_header_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_header_block mailpoet_droppable_block',
     getTemplate: function() { return templates.headerBlock; },
     modelEvents: _.extend({
       'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render'
@@ -78,16 +78,16 @@ define([
     getTemplate: function() { return templates.headerBlockSettings; },
     events: function() {
       return {
-        "change .mailpoet_field_header_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
+        'change .mailpoet_field_header_text_color': _.partial(this.changeColorField, 'styles.text.fontColor'),
-        "change .mailpoet_field_header_text_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
+        'change .mailpoet_field_header_text_font_family': _.partial(this.changeField, 'styles.text.fontFamily'),
-        "change .mailpoet_field_header_text_size": _.partial(this.changeField, "styles.text.fontSize"),
+        'change .mailpoet_field_header_text_size': _.partial(this.changeField, 'styles.text.fontSize'),
-        "change #mailpoet_field_header_link_color": _.partial(this.changeColorField, "styles.link.fontColor"),
+        'change #mailpoet_field_header_link_color': _.partial(this.changeColorField, 'styles.link.fontColor'),
-        "change #mailpoet_field_header_link_underline": function(event) {
+        'change #mailpoet_field_header_link_underline': function(event) {
           this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
         },
-        "change .mailpoet_field_header_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_header_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "change .mailpoet_field_header_alignment": _.partial(this.changeField, "styles.text.textAlign"),
+        'change .mailpoet_field_header_alignment': _.partial(this.changeField, 'styles.text.textAlign'),
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     templateContext: function() {

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

@@ -4,10 +4,11 @@
 define([
     'newsletter_editor/App',
     'newsletter_editor/blocks/base',
-    'underscore'
+    'underscore',
-  ], function(App, BaseBlock, _) {
+    'mailpoet'
+  ], function(App, BaseBlock, _, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock,
@@ -33,7 +34,7 @@ define([
   });
 
   Module.ImageBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_image_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_image_block mailpoet_droppable_block',
     getTemplate: function() { return templates.imageBlock; },
     onDragSubstituteBy: function() { return Module.ImageWidgetView; },
     templateContext: function() {
@@ -61,16 +62,26 @@ define([
   });
 
   Module.ImageBlockSettingsView = base.BlockSettingsView.extend({
+    onRender: function() {
+      MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-full-width'), {
+        tooltipId: 'tooltip-editor-full-width',
+        tooltip: MailPoet.I18n.t('helpTooltipDesignerFullWidth')
+      });
+      MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-ideal-width'), {
+        tooltipId: 'tooltip-editor-ideal-width',
+        tooltip: MailPoet.I18n.t('helpTooltipDesignerIdealWidth')
+      });
+    },
     getTemplate: function() { return templates.imageBlockSettings; },
     events: function() {
       return {
-        "input .mailpoet_field_image_link": _.partial(this.changeField, "link"),
+        'input .mailpoet_field_image_link': _.partial(this.changeField, 'link'),
-        "input .mailpoet_field_image_address": 'changeAddress',
+        'input .mailpoet_field_image_address': 'changeAddress',
-        "input .mailpoet_field_image_alt_text": _.partial(this.changeField, "alt"),
+        'input .mailpoet_field_image_alt_text': _.partial(this.changeField, 'alt'),
-        "change .mailpoet_field_image_full_width": _.partial(this.changeBoolCheckboxField, "fullWidth"),
+        'change .mailpoet_field_image_full_width': _.partial(this.changeBoolCheckboxField, 'fullWidth'),
-        "change .mailpoet_field_image_alignment": _.partial(this.changeField, "styles.block.textAlign"),
+        'change .mailpoet_field_image_alignment': _.partial(this.changeField, 'styles.block.textAlign'),
-        "click .mailpoet_field_image_select_another_image": "showMediaManager",
+        'click .mailpoet_field_image_select_another_image': 'showMediaManager',
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     initialize: function(options) {
@@ -166,7 +177,7 @@ define([
 
           var handlers = {
               content: {
-                'embed': 'embedContent',
+                embed: 'embedContent',
                 'edit-selection': 'editSelectionContent'
               },
               toolbar: {
@@ -266,7 +277,8 @@ define([
         },
 
         mainEmbedToolbar: function(toolbar) {
-          toolbar.view = new wp.media.view.Toolbar.Embed({
+          var tbar = toolbar;
+          tbar.view = new wp.media.view.Toolbar.Embed({
             controller: this,
             text: 'Add images'
           });
@@ -274,7 +286,7 @@ define([
 
       });
 
-      var theFrame = this._mediaManager = new MediaManager({
+      var theFrame = new MediaManager({
           id: 'mailpoet-media-manager',
           frame: 'select',
           title: 'Select image',
@@ -289,6 +301,7 @@ define([
           }
         }),
         that = this;
+        this._mediaManager = theFrame;
 
         this._mediaManager.on('insert', function() {
         // Append media manager image selections to Images tab
@@ -318,7 +331,7 @@ define([
             height: mainSize.height + 'px',
             width: mainSize.width + 'px',
             src: mainSize.url,
-            alt: (attachment.get('alt') !== "" && attachment.get('alt') !== undefined) ? attachment.get('alt') : attachment.get('title')
+            alt: (attachment.get('alt') !== '' && attachment.get('alt') !== undefined) ? attachment.get('alt') : attachment.get('title')
           });
           // Rerender settings view due to changes from outside of settings view
           that.render();

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

@@ -37,7 +37,7 @@ define([
     DividerBlock
   ) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -176,7 +176,7 @@ define([
   });
 
   Module.PostsBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_posts_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_posts_block mailpoet_droppable_block',
     getTemplate: function() { return templates.postsBlock; },
     modelEvents: {}, // Forcefully disable all events
     regions: _.extend({
@@ -296,7 +296,7 @@ define([
       this.blockModel = options.blockModel;
     },
     events: {
-      'scroll': 'onPostsScroll'
+      scroll: 'onPostsScroll'
     },
     onPostsScroll: function(event) {
       var $postsBox = jQuery(event.target);
@@ -326,10 +326,10 @@ define([
           this.$('.mailpoet_post_scroll_container').scrollTop(0);
         }
       },
-      'loadingMorePosts': function() {
+      loadingMorePosts: function() {
         this.$('.mailpoet_post_selection_loading').css('visibility', 'visible');
       },
-      'morePostsLoaded': function() {
+      morePostsLoaded: function() {
         this.$('.mailpoet_post_selection_loading').css('visibility', 'hidden');
       }
     },
@@ -462,25 +462,25 @@ define([
     getTemplate: function() { return templates.displayOptionsPostsBlockSettings; },
     events: function() {
       return {
-        "click .mailpoet_posts_select_button": 'showButtonSettings',
+        'click .mailpoet_posts_select_button': 'showButtonSettings',
-        "click .mailpoet_posts_select_divider": 'showDividerSettings',
+        'click .mailpoet_posts_select_divider': 'showDividerSettings',
-        "change .mailpoet_posts_read_more_type": 'changeReadMoreType',
+        'change .mailpoet_posts_read_more_type': 'changeReadMoreType',
-        "change .mailpoet_posts_display_type": 'changeDisplayType',
+        'change .mailpoet_posts_display_type': 'changeDisplayType',
-        "change .mailpoet_posts_title_format": 'changeTitleFormat',
+        'change .mailpoet_posts_title_format': 'changeTitleFormat',
-        "change .mailpoet_posts_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
+        'change .mailpoet_posts_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
-        "change .mailpoet_posts_show_divider": _.partial(this.changeBoolField, 'showDivider'),
+        'change .mailpoet_posts_show_divider': _.partial(this.changeBoolField, 'showDivider'),
-        "input .mailpoet_posts_show_amount": _.partial(this.changeField, "amount"),
+        'input .mailpoet_posts_show_amount': _.partial(this.changeField, 'amount'),
-        "change .mailpoet_posts_content_type": _.partial(this.changeField, "contentType"),
+        'change .mailpoet_posts_content_type': _.partial(this.changeField, 'contentType'),
-        "change .mailpoet_posts_include_or_exclude": _.partial(this.changeField, "inclusionType"),
+        'change .mailpoet_posts_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
-        "change .mailpoet_posts_title_alignment": _.partial(this.changeField, "titleAlignment"),
+        'change .mailpoet_posts_title_alignment': _.partial(this.changeField, 'titleAlignment'),
-        "change .mailpoet_posts_image_full_width": _.partial(this.changeBoolField, "imageFullWidth"),
+        'change .mailpoet_posts_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
-        "change .mailpoet_posts_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
+        'change .mailpoet_posts_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
-        "change .mailpoet_posts_show_author": _.partial(this.changeField, "showAuthor"),
+        'change .mailpoet_posts_show_author': _.partial(this.changeField, 'showAuthor'),
-        "input .mailpoet_posts_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
+        'input .mailpoet_posts_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
-        "change .mailpoet_posts_show_categories": _.partial(this.changeField, "showCategories"),
+        'change .mailpoet_posts_show_categories': _.partial(this.changeField, 'showCategories'),
-        "input .mailpoet_posts_categories": _.partial(this.changeField, "categoriesPrecededBy"),
+        'input .mailpoet_posts_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
-        "input .mailpoet_posts_read_more_text": _.partial(this.changeField, "readMoreText"),
+        'input .mailpoet_posts_read_more_text': _.partial(this.changeField, 'readMoreText'),
-        "change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy")
+        'change .mailpoet_posts_sort_by': _.partial(this.changeField, 'sortBy')
       };
     },
     templateContext: function() {

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

@@ -11,7 +11,7 @@ define([
     'jquery'
   ], function(App, BaseBlock, Backbone, Marionette, SuperModel, _, jQuery) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock,
@@ -87,7 +87,7 @@ define([
     tagName: 'span',
     getTemplate: function() { return templates.socialIconBlock; },
     modelEvents: {
-      'change': 'render'
+      change: 'render'
     },
     templateContext: function() {
       var allIconSets = App.getAvailableStyles().get('socialIconSets');
@@ -138,7 +138,7 @@ define([
     },
     events: function() {
       return {
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     initialize: function() {
@@ -158,11 +158,11 @@ define([
     getTemplate: function() { return templates.socialSettingsIcon; },
     events: function() {
       return {
-        "click .mailpoet_delete_block": "deleteIcon",
+        'click .mailpoet_delete_block': 'deleteIcon',
-        "change .mailpoet_social_icon_field_type": _.partial(this.changeField, "iconType"),
+        'change .mailpoet_social_icon_field_type': _.partial(this.changeField, 'iconType'),
-        "input .mailpoet_social_icon_field_image": _.partial(this.changeField, "image"),
+        'input .mailpoet_social_icon_field_image': _.partial(this.changeField, 'image'),
-        "input .mailpoet_social_icon_field_link": this.changeLink,
+        'input .mailpoet_social_icon_field_link': this.changeLink,
-        "input .mailpoet_social_icon_field_text": _.partial(this.changeField, "text")
+        'input .mailpoet_social_icon_field_text': _.partial(this.changeField, 'text')
       };
     },
     modelEvents: {
@@ -214,7 +214,7 @@ define([
   SocialBlockSettingsIconSelectorView = Marionette.View.extend({
     getTemplate: function() { return templates.socialSettingsIconSelector; },
     regions: {
-      'icons': '#mailpoet_social_icon_selector_contents'
+      icons: '#mailpoet_social_icon_selector_contents'
     },
     events: {
       'click .mailpoet_add_social_icon': 'addSocialIcon'
@@ -237,7 +237,7 @@ define([
   SocialBlockSettingsStylesView = Marionette.View.extend({
     getTemplate: function() { return templates.socialSettingsStyles; },
     modelEvents: {
-      'change': 'render'
+      change: 'render'
     },
     events: {
       'click .mailpoet_social_icon_set': 'changeSocialIconSet'

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

@@ -7,7 +7,7 @@ define([
     'underscore'
   ], function(App, BaseBlock, _) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -27,7 +27,7 @@ define([
   });
 
   Module.SpacerBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_spacer_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_spacer_block mailpoet_droppable_block',
     getTemplate: function() { return templates.spacerBlock; },
     behaviors: _.defaults({
       ResizableBehavior: {
@@ -69,8 +69,8 @@ define([
     getTemplate: function() { return templates.spacerBlockSettings; },
     events: function() {
       return {
-        "change .mailpoet_field_spacer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_spacer_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     }
   });

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

@@ -7,7 +7,7 @@ define([
     'underscore'
   ], function(App, BaseBlock, _) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -22,17 +22,17 @@ define([
   });
 
   Module.TextBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_text_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_text_block mailpoet_droppable_block',
     getTemplate: function() { return templates.textBlock; },
     modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'), // Prevent rerendering on model change due to text editor redrawing
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       TextEditorBehavior: {
-        toolbar1: "formatselect bold italic forecolor | link unlink",
+        toolbar1: 'formatselect bold italic forecolor | link unlink',
-        toolbar2: "alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_shortcodes",
+        toolbar2: 'alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_shortcodes',
-        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]",
+        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",
+        invalidElements: 'script',
         blockFormats: 'Heading 1=h1;Heading 2=h2;Heading 3=h3;Paragraph=p',
-        plugins: "link lists code textcolor colorpicker mailpoet_shortcodes paste",
+        plugins: 'link lists code textcolor colorpicker mailpoet_shortcodes paste',
         configurationFilter: function(originalSettings) {
           return _.extend({}, originalSettings, {
             mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),

assets/js/src/newsletter_editor/communicationsFix.js

@@ -23,8 +23,8 @@
   }
 }(this, function(Marionette, Radio, _) {
   'use strict';
-
+  var MarionetteApplication = Marionette.Application;
-  Marionette.Application.prototype._initChannel = function () {
+  MarionetteApplication.prototype._initChannel = function () {
     this.channelName = _.result(this, 'channelName') || 'global';
     this.channel = _.result(this, 'channel') || Radio.channel(this.channelName);
   };

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

@@ -25,11 +25,12 @@ define([
   };
 
   App.on('before:start', function(App, options) {
+    var Application = App;
     // Expose config methods globally
-    App.getConfig = Module.getConfig;
+    Application.getConfig = Module.getConfig;
-    App.setConfig = Module.setConfig;
+    Application.setConfig = Module.setConfig;
 
-    App.setConfig(options.config);
+    Application.setConfig(options.config);
   });
 
   return Module;

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

@@ -4,7 +4,7 @@ define([
     'underscore',
     'mailpoet'
   ], function(App, SuperModel, _, MailPoet) {
-  "use strict";
+  'use strict';
 
   var Module = {};
 
@@ -34,14 +34,14 @@ define([
     if (type in Module._blockTypes) {
       return Module._blockTypes[type].blockModel;
     } else {
-      throw "Block type not supported: " + type;
+      throw 'Block type not supported: ' + type;
     }
   };
   Module.getBlockTypeView = function(type) {
     if (type in Module._blockTypes) {
       return Module._blockTypes[type].blockView;
     } else {
-      throw "Block type not supported: " + type;
+      throw 'Block type not supported: ' + type;
     }
   };
 
@@ -67,7 +67,8 @@ define([
     return _.filter(blocks, predicate);
   };
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function(Application, options) {
+    var App = Application;
     // Expose block methods globally
     App.registerBlockType = Module.registerBlockType;
     App.getBlockTypeModel = Module.getBlockTypeModel;
@@ -80,7 +81,8 @@ define([
     Module.newsletter = new Module.NewsletterModel(_.omit(_.clone(options.newsletter), ['body']));
   });
 
-  App.on('start', function(App, options) {
+  App.on('start', function(Application, options) {
+    var App = Application;
     var body = options.newsletter.body;
     var content = (_.has(body, 'content')) ? body.content : {};
 

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

@@ -6,7 +6,7 @@ define([
     'jquery'
   ], function(App, Backbone, Marionette, _, jQuery) {
 
-  "use strict";
+  'use strict';
 
   var Module = {};
 
@@ -19,8 +19,8 @@ define([
     },
     events: function() {
       return {
-        'keyup .mailpoet_input_title': _.partial(this.changeField, "subject"),
+        'keyup .mailpoet_input_title': _.partial(this.changeField, 'subject'),
-        'keyup .mailpoet_input_preheader': _.partial(this.changeField, "preheader")
+        'keyup .mailpoet_input_preheader': _.partial(this.changeField, 'preheader')
       };
     },
     changeField: function(field, event) {
@@ -30,6 +30,15 @@ define([
 
   App.on('start', function(App, options) {
     App._appView.showChildView('headingRegion', new Module.HeadingView({ model: App.getNewsletter() }));
+    MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-subject-line'), {
+      tooltipId: 'tooltip-designer-subject-line-ti',
+      tooltip: MailPoet.I18n.t('helpTooltipDesignerSubjectLine'),
+      place: 'right'
+    });
+    MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-preheader'), {
+      tooltipId: 'tooltip-designer-preheader-ti',
+      tooltip: MailPoet.I18n.t('helpTooltipDesignerPreheader')
+    });
   });
 
   return Module;

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

@@ -22,7 +22,7 @@ define([
     html2canvas
   ) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       saveTimeout;
@@ -65,14 +65,6 @@ 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 || {});
 
@@ -81,8 +73,8 @@ define([
       // Removes 1px left transparent border from resulting canvas.
 
       var oldContext = oldCanvas.getContext('2d'),
-          newCanvas = document.createElement("canvas"),
+          newCanvas = document.createElement('canvas'),
-          newContext = newCanvas.getContext("2d"),
+          newContext = newCanvas.getContext('2d'),
           leftBorderWidth = 1;
 
       newCanvas.width = oldCanvas.width;
@@ -140,6 +132,9 @@ define([
       );
 
       FileSaver.saveAs(blob, 'template.json');
+      MailPoet.trackEvent('Editor > Template exported', {
+        'MailPoet Free version': window.mailpoet_version
+      });
     });
   };
 
@@ -165,7 +160,7 @@ define([
     },
     save: function() {
       this.hideOptionContents();
-      App.getChannel().trigger('save');
+      App.getChannel().request('save');
     },
     beforeSave: function() {
       // TODO: Add a loading animation instead
@@ -225,6 +220,9 @@ define([
               scroll: true
             }
           );
+          MailPoet.trackEvent('Editor > Template saved', {
+            'MailPoet Free version': window.mailpoet_version
+          });
         }).fail(function() {
           MailPoet.Notice.error(
             MailPoet.I18n.t('templateSaveFailed'),
@@ -282,7 +280,10 @@ define([
     next: function() {
       this.hideOptionContents();
       if(!this.$('.mailpoet_save_next').hasClass('button-disabled')) {
+        Module._cancelAutosave();
+        Module.save().done(function(response) {
           window.location.href = App.getConfig().get('urls.send');
+        });
       }
     },
     validateNewsletter: function(jsonObject) {
@@ -293,8 +294,8 @@ define([
 
       var contents = JSON.stringify(jsonObject);
       if (App.getConfig().get('validation.validateUnsubscribeLinkPresent') &&
-          contents.indexOf("[link:subscription_unsubscribe_url]") < 0 &&
+          contents.indexOf('[link:subscription_unsubscribe_url]') < 0 &&
-          contents.indexOf("[link:subscription_unsubscribe]") < 0) {
+          contents.indexOf('[link:subscription_unsubscribe]') < 0) {
         this.showValidationError(MailPoet.I18n.t('unsubscribeLinkMissing'));
         return;
       }
@@ -319,22 +320,28 @@ define([
     // may be requested
     var AUTOSAVE_DELAY_DURATION = 1000;
 
-    // Cancel save timer if another change happens before it completes
+    Module._cancelAutosave();
-    if (saveTimeout) clearTimeout(saveTimeout);
     saveTimeout = setTimeout(function() {
-      App.getChannel().trigger('save');
+      App.getChannel().request('save').always(function() {
+        Module._cancelAutosave();
+      });
+    }, AUTOSAVE_DELAY_DURATION);
+  };
+
+  Module._cancelAutosave = function() {
+    if (!saveTimeout) return;
+
     clearTimeout(saveTimeout);
     saveTimeout = undefined;
-    }, AUTOSAVE_DELAY_DURATION);
   };
 
   Module.beforeExitWithUnsavedChanges = function(e) {
     if (saveTimeout) {
       var message = MailPoet.I18n.t('unsavedChangesWillBeLost');
-      e = e || window.event;
+      var event = e || window.event;
 
-      if (e) {
+      if (event) {
-        e.returnValue = message;
+        event.returnValue = message;
       }
 
       return message;
@@ -342,12 +349,13 @@ define([
   };
 
   App.on('before:start', function(App, options) {
-    App.save = Module.saveAndProvidePromise;
+    var Application = App;
-    App.getChannel().on('autoSave', Module.autoSave);
+    Application.save = Module.save;
+    Application.getChannel().on('autoSave', Module.autoSave);
 
     window.onbeforeunload = Module.beforeExitWithUnsavedChanges;
 
-    App.getChannel().on('save', function(saveResult) { App.save(saveResult); });
+    Application.getChannel().reply('save', Application.save);
   });
 
   App.on('start', function(App, options) {

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

@@ -20,7 +20,7 @@ define([
     StickyKit
   ) {
 
-  "use strict";
+  'use strict';
 
   var Module = {};
 
@@ -69,7 +69,7 @@ define([
           'slideUp',
           {
             duration: 250,
-            easing: "easeOut",
+            easing: 'easeOut',
             complete: function() {
               $openRegion.addClass('closed');
             }.bind(this)
@@ -81,7 +81,7 @@ define([
             'slideDown',
             {
               duration: 250,
-              easing: "easeIn",
+              easing: 'easeIn',
               complete: function() {
                 $targetRegion.removeClass('closed');
               }
@@ -180,40 +180,40 @@ define([
     },
     events: function() {
       return {
-        "change #mailpoet_text_font_color": _.partial(this.changeColorField, 'text.fontColor'),
+        'change #mailpoet_text_font_color': _.partial(this.changeColorField, 'text.fontColor'),
-        "change #mailpoet_text_font_family": function(event) {
+        'change #mailpoet_text_font_family': function(event) {
           this.model.set('text.fontFamily', event.target.value);
         },
-        "change #mailpoet_text_font_size": function(event) {
+        'change #mailpoet_text_font_size': function(event) {
           this.model.set('text.fontSize', event.target.value);
         },
-        "change #mailpoet_h1_font_color": _.partial(this.changeColorField, 'h1.fontColor'),
+        'change #mailpoet_h1_font_color': _.partial(this.changeColorField, 'h1.fontColor'),
-        "change #mailpoet_h1_font_family": function(event) {
+        'change #mailpoet_h1_font_family': function(event) {
           this.model.set('h1.fontFamily', event.target.value);
         },
-        "change #mailpoet_h1_font_size": function(event) {
+        'change #mailpoet_h1_font_size': function(event) {
           this.model.set('h1.fontSize', event.target.value);
         },
-        "change #mailpoet_h2_font_color": _.partial(this.changeColorField, 'h2.fontColor'),
+        'change #mailpoet_h2_font_color': _.partial(this.changeColorField, 'h2.fontColor'),
-        "change #mailpoet_h2_font_family": function(event) {
+        'change #mailpoet_h2_font_family': function(event) {
           this.model.set('h2.fontFamily', event.target.value);
         },
-        "change #mailpoet_h2_font_size": function(event) {
+        'change #mailpoet_h2_font_size': function(event) {
           this.model.set('h2.fontSize', event.target.value);
         },
-        "change #mailpoet_h3_font_color": _.partial(this.changeColorField, 'h3.fontColor'),
+        'change #mailpoet_h3_font_color': _.partial(this.changeColorField, 'h3.fontColor'),
-        "change #mailpoet_h3_font_family": function(event) {
+        'change #mailpoet_h3_font_family': function(event) {
           this.model.set('h3.fontFamily', event.target.value);
         },
-        "change #mailpoet_h3_font_size": function(event) {
+        'change #mailpoet_h3_font_size': function(event) {
           this.model.set('h3.fontSize', event.target.value);
         },
-        "change #mailpoet_a_font_color": _.partial(this.changeColorField, 'link.fontColor'),
+        'change #mailpoet_a_font_color': _.partial(this.changeColorField, 'link.fontColor'),
-        "change #mailpoet_a_font_underline": function(event) {
+        'change #mailpoet_a_font_underline': function(event) {
           this.model.set('link.textDecoration', (event.target.checked) ? event.target.value : 'none');
         },
-        "change #mailpoet_newsletter_background_color": _.partial(this.changeColorField, 'wrapper.backgroundColor'),
+        'change #mailpoet_newsletter_background_color': _.partial(this.changeColorField, 'wrapper.backgroundColor'),
-        "change #mailpoet_background_color": _.partial(this.changeColorField, 'body.backgroundColor')
+        'change #mailpoet_background_color': _.partial(this.changeColorField, 'body.backgroundColor')
       };
     },
     templateContext: function() {
@@ -285,6 +285,10 @@ define([
             this.previewView = null;
           }.bind(this)
         });
+
+        MailPoet.trackEvent('Editor > Browser Preview', {
+          'MailPoet Free version': window.mailpoet_version
+        });
       }.bind(this)).fail(function(response) {
         if (response.errors.length > 0) {
           MailPoet.Notice.error(
@@ -317,16 +321,18 @@ define([
       MailPoet.Modal.loading(true);
 
       // save before sending
-      var saveResult = {promise: null};
+      App.getChannel().request('save').always(function() {
-      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 });
+            { scroll: true }
+          );
+          MailPoet.trackEvent('Editor > Preview sent', {
+            'MailPoet Free version': window.mailpoet_version,
+            'Domain name': data.subscriber.substring(data.subscriber.indexOf('@') + 1)
+          });
         }).fail(function(response) {
           if (response.errors.length > 0) {
             MailPoet.Notice.error(
@@ -358,10 +364,11 @@ define([
   });
 
   App.on('before:start', function(App, options) {
-    App.registerWidget = Module.registerWidget;
+    var Application = App;
-    App.getWidgets = Module.getWidgets;
+    Application.registerWidget = Module.registerWidget;
-    App.registerLayoutWidget = Module.registerLayoutWidget;
+    Application.getWidgets = Module.getWidgets;
-    App.getLayoutWidgets = Module.getLayoutWidgets;
+    Application.registerLayoutWidget = Module.registerLayoutWidget;
+    Application.getLayoutWidgets = Module.getLayoutWidgets;
   });
 
   App.on('start', function(App, options) {
@@ -369,6 +376,16 @@ define([
       sidebarView = new SidebarView();
 
     App._appView.showChildView('sidebarRegion', sidebarView);
+
+    MailPoet.helpTooltip.show(document.getElementById('tooltip-send-preview'), {
+      tooltipId: 'tooltip-editor-send-preview',
+      tooltip: MailPoet.I18n.t('helpTooltipSendPreview')
+    });
+
+    MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-styles'), {
+      tooltipId: 'tooltip-editor-designer-styles',
+      tooltip: MailPoet.I18n.t('helpTooltipDesignerStyles')
+    });
   });
 
   return Module;

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

@@ -4,7 +4,7 @@ define([
     'backbone.supermodel'
   ], function(App, Marionette, SuperModel) {
 
-  "use strict";
+  'use strict';
 
   var Module = {};
 
@@ -49,7 +49,7 @@ define([
   Module.StylesView = Marionette.View.extend({
     getTemplate: function() { return templates.styles; },
     modelEvents: {
-      'change': 'render'
+      change: 'render'
     },
     serializeData: function() {
       return this.model.toJSON();
@@ -69,10 +69,11 @@ define([
   };
 
   App.on('before:start', function(App, options) {
+    var Application = App;
     // Expose style methods to global application
-    App.getGlobalStyles = Module.getGlobalStyles;
+    Application.getGlobalStyles = Module.getGlobalStyles;
-    App.setGlobalStyles = Module.setGlobalStyles;
+    Application.setGlobalStyles = Module.setGlobalStyles;
-    App.getAvailableStyles = Module.getAvailableStyles;
+    Application.getAvailableStyles = Module.getAvailableStyles;
 
     var body = options.newsletter.body;
     var globalStyles = (_.has(body, 'globalStyles')) ? body.globalStyles : {};

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

@@ -46,8 +46,8 @@ tinymce.PluginManager.add('mailpoet_shortcodes', function(editor, url) {
 
       // Open window
       editor.windowManager.open({
-        height: parseInt(editor.getParam("plugin_mailpoet_shortcodes_height", 400)),
+        height: parseInt(editor.getParam('plugin_mailpoet_shortcodes_height', 400)),
-        width: parseInt(editor.getParam("plugin_mailpoet_shortcodes_width", 450)),
+        width: parseInt(editor.getParam('plugin_mailpoet_shortcodes_width', 450)),
         autoScroll: true,
         title: editor.settings.mailpoet_shortcodes_window_title,
         body: shortcodes,

assets/js/src/newsletters/breadcrumb.jsx

@@ -41,7 +41,7 @@ define(
       render: function () {
         const steps = this.state.steps.map((step, index) => {
           const stepClasses = classNames(
-            { 'mailpoet_current': (this.props.step === step.name) }
+            { mailpoet_current: (this.props.step === step.name) }
           );
 
           let label = step.label;

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

@@ -69,7 +69,7 @@ const _QueueMixin = {
       }
       const progressClasses = classNames(
         'mailpoet_progress',
-        { 'mailpoet_progress_complete': newsletter.queue.status === 'completed' }
+        { mailpoet_progress_complete: newsletter.queue.status === 'completed' }
       );
 
       // calculate percentage done
@@ -84,8 +84,8 @@ const _QueueMixin = {
           <span>
             {
               MailPoet.I18n.t('newsletterQueueCompleted')
-              .replace("%$1d", newsletter.queue.count_processed)
+              .replace('%$1d', newsletter.queue.count_processed)
-              .replace("%$2d", newsletter.queue.count_total)
+              .replace('%$2d', newsletter.queue.count_total)
             }
           </span>
         );
@@ -120,7 +120,7 @@ const _QueueMixin = {
         percentage = MailPoet.I18n.t('noSubscribers');
       } else {
         progress_bar_width = percentage;
-        percentage += "%";
+        percentage += '%';
       }
 
       return (
@@ -128,7 +128,7 @@ const _QueueMixin = {
           <div className={ progressClasses }>
               <span
                 className="mailpoet_progress_bar"
-                style={ { width: progress_bar_width + "%" } }
+                style={ { width: progress_bar_width + '%' } }
               ></span>
               <span className="mailpoet_progress_label">
                 { percentage }
@@ -145,13 +145,14 @@ const _QueueMixin = {
 
 const _StatisticsMixin = {
   renderStatistics: function (newsletter, is_sent, current_time) {
-    if (is_sent === undefined) {
+    let sent = is_sent;
+    if (sent === undefined) {
       // condition for standard and post notification listings
-      is_sent = newsletter.statistics
+      sent = newsletter.statistics
         && newsletter.queue
         && newsletter.queue.status !== 'scheduled';
     }
-    if (!is_sent) {
+    if (!sent) {
       return (
         <span>{MailPoet.I18n.t('notSentYet')}</span>
       );
@@ -238,7 +239,7 @@ const _StatisticsMixin = {
         <div>
           <span className="mailpoet_stats_text">
             { percentage_opened_display }%,
-            { " " }
+            { ' ' }
             { percentage_clicked_display }%
             <span className="mailpoet_stat_hidden">
               , { percentage_unsubscribed_display }%
@@ -326,7 +327,7 @@ const _MailerMixin = {
       MailPoet.I18n.t('mailerCheckSettingsNotice'),
       /\[link\](.*?)\[\/link\]/g,
       match => (
-        <a href={`?page=mailpoet-settings#mta`}>{ match }</a>
+        <a href={'?page=mailpoet-settings#mta'} key="check-sending">{ match }</a>
       )
     );
     if (state.meta.mta_log.error.operation === 'send') {

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

@@ -97,6 +97,17 @@ const bulk_actions = [
   },
 ];
 
+const confirmEdit = (newsletter) => {
+  if(
+    !newsletter.queue
+    || newsletter.status != 'sending'
+    || newsletter.queue.status !== null
+    || window.confirm(MailPoet.I18n.t('confirmEdit'))
+  ) {
+    window.location.href = `?page=mailpoet-newsletter-editor&id=${ newsletter.id }`;
+  }
+};
+
 let newsletter_actions = [
   {
     name: 'view',
@@ -110,13 +121,8 @@ let newsletter_actions = [
   },
   {
     name: 'edit',
-    link: function (newsletter) {
+    label: MailPoet.I18n.t('edit'),
-      return (
+    onClick: confirmEdit,
-        <a href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }>
-          {MailPoet.I18n.t('edit')}
-        </a>
-      );
-    },
   },
   {
     name: 'duplicate',
@@ -172,7 +178,8 @@ const NewsletterListStandard = React.createClass({
           <strong>
             <a
               className="row-title"
-              href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }
+              href="javascript:;"
+              onClick={() => confirmEdit(newsletter)}
             >{ newsletter.queue.newsletter_rendered_subject || newsletter.subject }</a>
           </strong>
           { actions }
@@ -198,7 +205,14 @@ const NewsletterListStandard = React.createClass({
     return (
       <div>
         <h1 className="title">
-          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+          {MailPoet.I18n.t('pageTitle')}
+          <Link className="page-title-action" to="/new"
+            onClick={() => MailPoet.trackEvent('Emails > Add New',
+              { 'MailPoet Free version': window.mailpoet_version }
+            )}
+          >
+            {MailPoet.I18n.t('new')}
+          </Link>
         </h1>
 
         <ListingTabs tab="standard" />

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

@@ -38,6 +38,9 @@ const ListingTabs = React.createClass({
           key={ 'tab-'+index }
           className={ tabClasses }
           to={ tab.link }
+          onClick={() => MailPoet.trackEvent(`Tab Emails > ${tab.name} clicked`,
+            { 'MailPoet Free version': window.mailpoet_version }
+          )}
         >{ tab.label }</Link>
       );
     });

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

@@ -5,18 +5,18 @@ const timeFormat = window.mailpoet_time_format || 'H:i';
 
 // welcome emails
 const _timeDelayValues = {
-  'immediate': MailPoet.I18n.t('delayImmediately'),
+  immediate: MailPoet.I18n.t('delayImmediately'),
-  'hours': MailPoet.I18n.t('delayHoursAfter'),
+  hours: MailPoet.I18n.t('delayHoursAfter'),
-  'days': MailPoet.I18n.t('delayDaysAfter'),
+  days: MailPoet.I18n.t('delayDaysAfter'),
-  'weeks': MailPoet.I18n.t('delayWeeksAfter'),
+  weeks: MailPoet.I18n.t('delayWeeksAfter'),
 };
 
 const _intervalValues = {
-  'daily': MailPoet.I18n.t('daily'),
+  daily: MailPoet.I18n.t('daily'),
-  'weekly': MailPoet.I18n.t('weekly'),
+  weekly: MailPoet.I18n.t('weekly'),
-  'monthly': MailPoet.I18n.t('monthly'),
+  monthly: MailPoet.I18n.t('monthly'),
-  'nthWeekDay': MailPoet.I18n.t('monthlyEvery'),
+  nthWeekDay: MailPoet.I18n.t('monthlyEvery'),
-  'immediately': MailPoet.I18n.t('immediately'),
+  immediately: MailPoet.I18n.t('immediately'),
 };
 
 // notification emails
@@ -60,7 +60,7 @@ const _monthDayValues = _.object(
     if (labels[day] !== undefined) {
       label = labels[day];
     } else {
-      label = MailPoet.I18n.t('nth').replace("%$1d", day + 1);
+      label = MailPoet.I18n.t('nth').replace('%$1d', day + 1);
     }
     return [day + 1, label];
   }
@@ -68,10 +68,10 @@ const _monthDayValues = _.object(
 );
 
 const _nthWeekDayValues = {
-  '1': MailPoet.I18n.t('first'),
+  1: MailPoet.I18n.t('first'),
-  '2': MailPoet.I18n.t('second'),
+  2: MailPoet.I18n.t('second'),
-  '3': MailPoet.I18n.t('third'),
+  3: MailPoet.I18n.t('third'),
-  'L': MailPoet.I18n.t('last'),
+  L: MailPoet.I18n.t('last'),
 };
 
 export { _timeDelayValues as timeDelayValues };

assets/js/src/newsletters/send.jsx

@@ -9,6 +9,7 @@ define(
     'newsletters/send/notification.jsx',
     'newsletters/send/welcome.jsx',
     'newsletters/breadcrumb.jsx',
+    'help-tooltip.jsx',
   ],
   (
     React,
@@ -19,7 +20,8 @@ define(
     StandardNewsletterFields,
     NotificationNewsletterFields,
     WelcomeNewsletterFields,
-    Breadcrumb
+    Breadcrumb,
+    HelpTooltip
   ) => {
 
     const NewsletterSend = React.createClass({
@@ -108,16 +110,25 @@ define(
                 }).done((response) => {
                   // redirect to listing based on newsletter type
                   this.context.router.push(`/${ this.state.item.type || '' }`);
-
+                  const opts = this.state.item.options;
                   // display success message depending on newsletter type
                   if (response.data.type === 'welcome') {
                     MailPoet.Notice.success(
                       MailPoet.I18n.t('welcomeEmailActivated')
                     );
+                    MailPoet.trackEvent('Emails > Welcome email activated', {
+                      'MailPoet Free version': window.mailpoet_version,
+                      'List type': opts.event,
+                      Delay: opts.afterTimeNumber + ' ' + opts.afterTimeType,
+                    });
                   } else if (response.data.type === 'notification') {
                     MailPoet.Notice.success(
                       MailPoet.I18n.t('postNotificationActivated')
                     );
+                    MailPoet.trackEvent('Emails > Post notifications activated', {
+                      'MailPoet Free version': window.mailpoet_version,
+                      Frequency: opts.intervalType,
+                    });
                   }
                 }).fail(this._showError);
               default:
@@ -136,10 +147,18 @@ define(
                     MailPoet.Notice.success(
                       MailPoet.I18n.t('newsletterHasBeenScheduled')
                     );
+                    MailPoet.trackEvent('Emails > Newsletter sent', {
+                      scheduled: true,
+                      'MailPoet Free version': window.mailpoet_version,
+                    });
                   } else {
                     MailPoet.Notice.success(
                       MailPoet.I18n.t('newsletterBeingSent')
                     );
+                    MailPoet.trackEvent('Emails > Newsletter sent', {
+                      scheduled: false,
+                      'MailPoet Free version': window.mailpoet_version,
+                    });
                   }
                 }).fail(this._showError);
             }
@@ -149,6 +168,40 @@ define(
         }
         return false;
       },
+      handleResume: function (e) {
+        e.preventDefault();
+        if(!this.isValid()) {
+          jQuery('#mailpoet_newsletter').parsley().validate();
+        } else {
+          this._save(e).done(() => {
+            this.setState({ loading: true });
+          }).done(() => {
+            MailPoet.Ajax.post({
+              api_version: window.mailpoet_api_version,
+              endpoint: 'sendingQueue',
+              action: 'resume',
+              data: {
+                newsletter_id: this.state.item.id,
+              },
+            }).done(() => {
+              this.context.router.push(`/${ this.state.item.type || '' }`);
+              MailPoet.Notice.success(
+                MailPoet.I18n.t('newsletterSendingHasBeenResumed')
+              );
+            }).fail((response) => {
+              if (response.errors.length > 0) {
+                MailPoet.Notice.error(
+                  response.errors.map((error) => { return error.message; }),
+                  { scroll: true }
+                );
+              }
+            });
+          }).fail(this._showError).always(() => {
+            this.setState({ loading: false });
+          });
+        }
+        return false;
+      },
       handleSave: function (e) {
         e.preventDefault();
 
@@ -174,6 +227,7 @@ define(
       },
       _save: function () {
         const data = this.state.item;
+        data.queue = undefined;
         this.setState({ loading: true });
 
         // Store only properties that can be changed on this page
@@ -215,6 +269,16 @@ define(
         return true;
       },
       render: function () {
+        const isPaused = this.state.item.status == 'sending'
+          && this.state.item.queue
+          && this.state.item.queue.status == 'paused';
+        const fields = this.state.fields.map((field) => {
+          const newField = field;
+          if (field.name == 'segments' || field.name == 'options') {
+            newField.disabled = isPaused;
+          }
+          return newField;
+        });
         return (
           <div>
             <h1>{MailPoet.I18n.t('finalNewsletterStep')}</h1>
@@ -223,13 +287,21 @@ define(
 
             <Form
               id="mailpoet_newsletter"
-              fields={ this.state.fields }
+              fields={ fields }
               item={ this.state.item }
               loading={ this.state.loading }
               onChange={this.handleFormChange}
               onSubmit={this.handleSave}
             >
               <p className="submit">
+                {
+                  isPaused ?
+                  <input
+                  className="button button-primary"
+                  type="button"
+                  onClick={ this.handleResume }
+                  value={MailPoet.I18n.t('resume')} />
+                  :
                   <input
                   className="button button-primary"
                   type="button"
@@ -237,6 +309,7 @@ define(
                   value={MailPoet.I18n.t('send')}
                   {...this.getSendButtonOptions()}
                   />
+                }
                 &nbsp;
                 <input
                   className="button button-secondary"
@@ -251,6 +324,10 @@ define(
                   {MailPoet.I18n.t('goBackToDesign')}
                 </a>.
               </p>
+              <HelpTooltip
+                tooltip={MailPoet.I18n.t('helpTooltipSendEmail')}
+                tooltipId="helpTooltipSendEmail"
+              />
             </Form>
           </div>
         );

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

@@ -8,12 +8,14 @@ define(
   ],
   (
     React,
-    jQuery,
+    jq,
     _,
     MailPoet,
     Hooks
   ) => {
 
+    const jQuery = jq;
+
     const currentTime = window.mailpoet_current_time || '00:00';
     const defaultDateTime = window.mailpoet_current_date + ' ' + '00:00:00';
     const timeOfDayItems = window.mailpoet_schedule_time_of_day;
@@ -84,12 +86,13 @@ define(
 
     const DateText = React.createClass({
       onChange: function (event) {
+        const changeEvent = event;
         // Swap display format to storage format
-        const displayDate = event.target.value;
+        const displayDate = changeEvent.target.value;
         const storageDate = this.getStorageDate(displayDate);
 
-        event.target.value = storageDate;
+        changeEvent.target.value = storageDate;
-        this.props.onChange(event);
+        this.props.onChange(changeEvent);
       },
       componentDidMount: function () {
         const $element = jQuery(this.refs.dateInput);
@@ -155,6 +158,7 @@ define(
             name={this.getFieldName()}
             value={this.getDisplayDate(this.props.value)}
             readOnly={ true }
+            disabled={this.props.disabled}
             onChange={this.onChange}
             ref="dateInput"
             {...this.props.validation} />
@@ -180,6 +184,7 @@ define(
           <select
             name={this.props.name || 'time'}
             value={this.props.value}
+            disabled={this.props.disabled}
             onChange={this.props.onChange}
             {...this.props.validation}
           >
@@ -190,7 +195,7 @@ define(
     });
 
     const DateTime = React.createClass({
-      _DATE_TIME_SEPARATOR: " ",
+      _DATE_TIME_SEPARATOR: ' ',
       getInitialState: function () {
         return this._buildStateFromProps(this.props);
       },
@@ -235,11 +240,13 @@ define(
               onChange={this.handleChange}
               displayFormat={dateDisplayFormat}
               storageFormat={dateStorageFormat}
+              disabled={this.props.disabled}
               validation={this.props.dateValidation}/>
             <TimeSelect
               name="time"
               value={this.state.time}
               onChange={this.handleChange}
+              disabled={this.props.disabled}
               validation={this.props.timeValidation} />
           </span>
         );
@@ -269,8 +276,9 @@ define(
         });
       },
       handleCheckboxChange: function (event) {
-        event.target.value = this.refs.isScheduled.checked ? '1' : '0';
+        const changeEvent = event;
-        return this.handleValueChange(event);
+        changeEvent.target.value = this.refs.isScheduled.checked ? '1' : '0';
+        return this.handleValueChange(changeEvent);
       },
       isScheduled: function () {
         return this._getCurrentValue().isScheduled === '1';
@@ -292,6 +300,7 @@ define(
                 name="scheduledAt"
                 value={this._getCurrentValue().scheduledAt}
                 onChange={this.handleValueChange}
+                disabled={this.props.field.disabled}
                 dateValidation={this.getDateValidation()} />
               &nbsp;
               <span>
@@ -300,7 +309,6 @@ define(
             </span>
           );
         }
-
         return (
           <div>
             <input
@@ -308,6 +316,7 @@ define(
               type="checkbox"
               value="1"
               checked={this.isScheduled()}
+              disabled={this.props.field.disabled}
               name="isScheduled"
               onChange={this.handleCheckboxChange} />
 
@@ -414,11 +423,11 @@ define(
         return fields;
       },
       getSendButtonOptions: function (newsletter) {
-        newsletter = newsletter || {};
+        const newsletterOptions = newsletter || {};
 
         const isScheduled = (
-          typeof newsletter.options === 'object'
+          typeof newsletterOptions.options === 'object'
-          && newsletter.options.isScheduled === '1'
+          && newsletterOptions.options.isScheduled === '1'
         );
         const options = {
           value: (isScheduled
@@ -426,8 +435,8 @@ define(
             : MailPoet.I18n.t('send')),
         };
 
-        if (newsletter.status === 'sent'
+        if (newsletterOptions.status === 'sent'
-            || newsletter.status === 'sending') {
+            || newsletterOptions.status === 'sending') {
           options['disabled'] = 'disabled';
         }
 

assets/js/src/newsletters/templates.jsx

@@ -6,6 +6,7 @@ define(
     'react-router',
     'classnames',
     'newsletters/breadcrumb.jsx',
+    'help-tooltip.jsx',
   ],
   (
     React,
@@ -13,11 +14,13 @@ define(
     MailPoet,
     Router,
     classNames,
-    Breadcrumb
+    Breadcrumb,
+    HelpTooltip
   ) => {
 
     const ImportTemplate = React.createClass({
-      saveTemplate: function (template) {
+      saveTemplate: function (saveTemplate) {
+        const template = saveTemplate;
 
         // Stringify to enable transmission of primitive non-string value types
         if (!_.isUndefined(template.body)) {
@@ -49,6 +52,7 @@ define(
 
         if (_.size(this.refs.templateFile.files) <= 0) return false;
 
+
         const file = _.first(this.refs.templateFile.files);
         const reader = new FileReader();
         const saveTemplate = this.saveTemplate;
@@ -56,6 +60,9 @@ define(
         reader.onload = (e) => {
           try {
             saveTemplate(JSON.parse(e.target.result));
+            MailPoet.trackEvent('Emails > Template imported', {
+              'MailPoet Free version': window.mailpoet_version,
+            });
           } catch (err) {
             MailPoet.Notice.error(MailPoet.I18n.t('templateFileMalformedError'));
           }
@@ -66,10 +73,13 @@ define(
       render: function () {
         return (
           <div>
-            <h2>{MailPoet.I18n.t('importTemplateTitle')}</h2>
+            <h2>{MailPoet.I18n.t('importTemplateTitle')} <HelpTooltip
+              tooltip={MailPoet.I18n.t('helpTooltipTemplateUpload')}
+              place="right"
+              className="tooltip-help-import-template"
+            /></h2>
             <form onSubmit={this.handleSubmit}>
               <input type="file" placeholder={MailPoet.I18n.t('selectJsonFileToUpload')} ref="templateFile" />
-
               <p className="submit">
                 <input
                   className="button button-primary"
@@ -112,7 +122,7 @@ define(
                     MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
                   description:
                     MailPoet.I18n.t('mailpoetGuideTemplateDescription'),
-                  readonly: "1",
+                  readonly: '1',
                 },
               ];
             }
@@ -138,6 +148,11 @@ define(
           body = JSON.stringify(body);
         }
 
+        MailPoet.trackEvent('Emails > Template selected', {
+          'MailPoet Free version': window.mailpoet_version,
+          'Email name': template.name,
+        });
+
         MailPoet.Ajax.post({
           api_version: window.mailpoet_api_version,
           endpoint: 'newsletters',
@@ -164,7 +179,7 @@ define(
           window.confirm(
             (
               MailPoet.I18n.t('confirmTemplateDeletion')
-            ).replace("%$1s", template.name)
+            ).replace('%$1s', template.name)
           )
         ) {
           MailPoet.Ajax.post({
@@ -248,7 +263,7 @@ define(
                     {MailPoet.I18n.t('select')}
                   </a>
               </div>
-              { (template.readonly === "1") ? false : deleteLink }
+              { (template.readonly === '1') ? false : deleteLink }
             </li>
           );
         });
@@ -256,7 +271,7 @@ define(
         const boxClasses = classNames(
           'mailpoet_boxes',
           'clearfix',
-          { 'mailpoet_boxes_loading': this.state.loading }
+          { mailpoet_boxes_loading: this.state.loading }
         );
 
         return (

assets/js/src/newsletters/types.jsx

@@ -20,9 +20,17 @@ define(
       setupNewsletter: function (type) {
         if(type !== undefined) {
           this.context.router.push(`/new/${type}`);
+          MailPoet.trackEvent('Emails > Type selected', {
+            'MailPoet Free version': window.mailpoet_version,
+            'Email type': type,
+          });
         }
       },
       createNewsletter: function (type) {
+        MailPoet.trackEvent('Emails > Type selected', {
+          'MailPoet Free version': window.mailpoet_version,
+          'Email type': type,
+        });
         MailPoet.Ajax.post({
           api_version: window.mailpoet_api_version,
           endpoint: 'newsletters',
@@ -45,10 +53,10 @@ define(
       render: function () {
         let types = [
           {
-            'id': 'standard',
+            id: 'standard',
-            'title': MailPoet.I18n.t('regularNewsletterTypeTitle'),
+            title: MailPoet.I18n.t('regularNewsletterTypeTitle'),
-            'description': MailPoet.I18n.t('regularNewsletterTypeDescription'),
+            description: MailPoet.I18n.t('regularNewsletterTypeDescription'),
-            'action': function () {
+            action: function () {
               return (
                 <a className="button button-primary" onClick={ this.createNewsletter.bind(null, 'standard') }>
                   {MailPoet.I18n.t('create')}
@@ -57,10 +65,10 @@ define(
             }.bind(this)(),
           },
           {
-            'id': 'welcome',
+            id: 'welcome',
-            'title': MailPoet.I18n.t('welcomeNewsletterTypeTitle'),
+            title: MailPoet.I18n.t('welcomeNewsletterTypeTitle'),
-            'description': MailPoet.I18n.t('welcomeNewsletterTypeDescription'),
+            description: MailPoet.I18n.t('welcomeNewsletterTypeDescription'),
-            'action': function () {
+            action: function () {
               return (
                 <div>
                   <a href="?page=mailpoet-premium" target="_blank">
@@ -71,10 +79,10 @@ define(
             }(),
           },
           {
-            'id': 'notification',
+            id: 'notification',
-            'title': MailPoet.I18n.t('postNotificationNewsletterTypeTitle'),
+            title: MailPoet.I18n.t('postNotificationNewsletterTypeTitle'),
-            'description': MailPoet.I18n.t('postNotificationNewsletterTypeDescription'),
+            description: MailPoet.I18n.t('postNotificationNewsletterTypeDescription'),
-            'action': function () {
+            action: function () {
               return (
                 <a className="button button-primary" onClick={ this.setupNewsletter.bind(null, 'notification') }>
                   {MailPoet.I18n.t('setUp')}

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

@@ -16,8 +16,8 @@ const availableSegments = _.filter(
 const events = {
   name: 'event',
   values: {
-    'segment': MailPoet.I18n.t('onSubscriptionToList'),
+    segment: MailPoet.I18n.t('onSubscriptionToList'),
-    'user': MailPoet.I18n.t('onWPUserRegistration'),
+    user: MailPoet.I18n.t('onWPUserRegistration'),
   },
 };
 

assets/js/src/notice.js

@@ -1,5 +1,5 @@
-define('notice', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
+define('notice', ['mailpoet', 'jquery'], function(mp, jQuery) {
-  "use strict";
+  'use strict';
   /*==================================================================================================
 
       MailPoet Notice:
@@ -22,7 +22,7 @@ define('notice', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
           MailPoet.Notice.system('You need to updated ASAP!');
 
   ==================================================================================================*/
-
+  var MailPoet = mp;
   MailPoet.Notice = {
     version: 1.0,
     // default options
@@ -103,12 +103,12 @@ define('notice', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
       );
     },
     setMessage: function(message) {
-      message = this.formatMessage(message);
+      var formattedMessage = this.formatMessage(message);
 
       // let's sugar coat the message with a fancy <p>
-      message = '<p>'+message+'</p>';
+      formattedMessage = '<p>'+formattedMessage+'</p>';
       // set message
-      return this.element.html(message);
+      return this.element.html(formattedMessage);
     },
     formatMessage: function(message) {
       if (Array.isArray(message)) {
@@ -124,7 +124,7 @@ define('notice', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
       if (
         this.options.id !== null
         &&
-        jQuery('[data-id="'+this.options.id+'"').length > 0
+        jQuery('[data-id="'+this.options.id+'"]').length > 0
       ) {
         this.updateNotice();
       } else {

assets/js/src/num.js

@@ -2,13 +2,14 @@ define('num',
   [
     'mailpoet'
   ], function(
-    MailPoet
+    mp
 ) {
   'use strict';
 
+  var MailPoet = mp;
   MailPoet.Num = {
-    toLocaleFixed: function (num, precision) {
+    toLocaleFixed: function (num, precisionOpts) {
-      precision = precision || 0;
+      var precision = precisionOpts || 0;
       var factor = Math.pow(10, precision);
       return (Math.round(num * factor) / factor)
         .toLocaleString(

assets/js/src/segments/form.jsx

@@ -32,6 +32,9 @@ define(
       },
       onCreate: function () {
         MailPoet.Notice.success(MailPoet.I18n.t('segmentAdded'));
+        MailPoet.trackEvent('Lists > Add new', {
+          'MailPoet Free version': window.mailpoet_version,
+        });
       },
     };
 

assets/js/src/settings/reinstall_from_scratch.js

@@ -15,9 +15,9 @@ define(
 
         MailPoet.Modal.loading(true);
         MailPoet.Ajax.post({
-          'api_version': window.mailpoet_api_version,
+          api_version: window.mailpoet_api_version,
-          'endpoint': 'setup',
+          endpoint: 'setup',
-          'action': 'reset'
+          action: 'reset'
         }).always(function () {
           MailPoet.Modal.loading(false);
         }).done(function () {

assets/js/src/settings/tabs.js

@@ -7,8 +7,9 @@ define(
   function(
     Backbone,
     jQuery,
-    MailPoet
+    mp
   ) {
+    var MailPoet = mp;
     if(jQuery('#mailpoet_settings').length === 0) {
       return;
     }
@@ -50,9 +51,9 @@ define(
           jQuery('#mailpoet_sending_method_setup').fadeIn();
         }
       },
-      tabs: function(tab, section) {
+      tabs: function(tabStr, section) {
         // set default tab
-        tab = tab || 'mta';
+        var tab = tabStr || 'mta';
 
         // reset all active tabs
         jQuery('.nav-tab-wrapper a').removeClass('nav-tab-active');

assets/js/src/subscribers/form.jsx

@@ -43,10 +43,10 @@ define(
         label: MailPoet.I18n.t('status'),
         type: 'select',
         values: {
-          'subscribed': MailPoet.I18n.t('subscribed'),
+          subscribed: MailPoet.I18n.t('subscribed'),
-          'unconfirmed': MailPoet.I18n.t('unconfirmed'),
+          unconfirmed: MailPoet.I18n.t('unconfirmed'),
-          'unsubscribed': MailPoet.I18n.t('unsubscribed'),
+          unsubscribed: MailPoet.I18n.t('unsubscribed'),
-          'bounced': MailPoet.I18n.t('bounced'),
+          bounced: MailPoet.I18n.t('bounced'),
         },
         filter: function (subscriber, value) {
           if (~~(subscriber.wp_user_id) > 0 && value === 'unconfirmed') {
@@ -144,6 +144,9 @@ define(
       },
       onCreate: function () {
         MailPoet.Notice.success(MailPoet.I18n.t('subscriberAdded'));
+        MailPoet.trackEvent('Subscribers > Add new', {
+          'MailPoet Free version': window.mailpoet_version,
+        });
       },
     };
 

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

@@ -13,7 +13,7 @@ define(
   Handlebars,
   select2
  ) {
-   if (!jQuery("#mailpoet_subscribers_export").length) {
+   if (!jQuery('#mailpoet_subscribers_export').length) {
      return;
    }
    jQuery(document).ready(function () {
@@ -27,11 +27,11 @@ define(
      jQuery('#mailpoet_subscribers_export > div.inside').html(subscribers_export_template(exportData));
 
      // define reusable variables
-     var segmentsContainerElement = jQuery("#export_lists"),
+     var segmentsContainerElement = jQuery('#export_lists'),
-      subscriberFieldsContainerElement = jQuery("#export_columns"),
+      subscriberFieldsContainerElement = jQuery('#export_columns'),
       exportConfirmedOptionElement = jQuery(':radio[name="option_confirmed"]'),
       groupBySegmentOptionElement = jQuery(':checkbox[name="option_group_by_list"]'),
-      nextStepButton = jQuery("a.mailpoet_export_process"),
+      nextStepButton = jQuery('a.mailpoet_export_process'),
       renderSegmentsAndFields = function (container, data) {
         if (container.data('select2')) {
           container
@@ -107,7 +107,7 @@ define(
        'first_name',
        'last_name',
        'status'
-     ]).trigger("change");
+     ]).trigger('change');
 
      exportConfirmedOptionElement.change(function () {
        var selectedSegments = segmentsContainerElement.val();
@@ -137,16 +137,17 @@ define(
          return;
        }
        MailPoet.Modal.loading(true);
+       var exportFormat = jQuery(':radio[name="option_format"]:checked').val();
        MailPoet.Ajax.post({
           api_version: window.mailpoet_api_version,
           endpoint: 'ImportExport',
           action: 'processExport',
           data: JSON.stringify({
-            'export_confirmed_option': exportData.exportConfirmedOption,
+            export_confirmed_option: exportData.exportConfirmedOption,
-            'export_format_option': jQuery(':radio[name="option_format"]:checked').val(),
+            export_format_option: exportFormat,
-            'group_by_segment_option': (groupBySegmentOptionElement.is(":visible")) ? groupBySegmentOptionElement.prop('checked') : false,
+            group_by_segment_option: (groupBySegmentOptionElement.is(':visible')) ? groupBySegmentOptionElement.prop('checked') : false,
-            'segments': (exportData.segments) ? segmentsContainerElement.val() : false,
+            segments: (exportData.segments) ? segmentsContainerElement.val() : false,
-            'subscriber_fields': subscriberFieldsContainerElement.val()
+            subscriber_fields: subscriberFieldsContainerElement.val()
           })
         }).always(function(response) {
           MailPoet.Modal.loading(false);
@@ -157,6 +158,12 @@ define(
            .replace('[/link]', '</a>');
           jQuery('#export_result_notice').html('<p>' + resultMessage + '</p>').show();
           window.location.href = response.data.exportFileURL;
+          MailPoet.trackEvent('Subscribers export completed', {
+            'Total exported': response.data.totalExported,
+            'Only confirmed?': exportData.exportConfirmedOption,
+            'File Format': exportFormat,
+            'MailPoet Free version': window.mailpoet_version
+          });
         }).fail(function(response) {
           if (response.errors.length > 0) {
             MailPoet.Notice.error(

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

@@ -30,9 +30,9 @@ define(
         router = new (Backbone.Router.extend({
           routes: {
             '': 'home',
-            'step1': 'step1',
+            step1: 'step1',
-            'step2': 'step2',
+            step2: 'step2',
-            'step3': 'step3'
+            step3: 'step3'
           },
           home: function () {
             this.navigate('step1', {trigger: true});
@@ -52,8 +52,9 @@ define(
         router.on('route:step1', function () {
           // set or reset temporary validation rule on all columns
           mailpoetColumns = jQuery.map(mailpoetColumns, function (column, columnIndex) {
-            column.validation_rule = false;
+            var col = column;
-            return column;
+            col.validation_rule = false;
+            return col;
           });
 
           if (typeof (importData.step1) !== 'undefined') {
@@ -111,7 +112,7 @@ define(
            *  Paste
            */
           pasteInputElement
-              .attr('value', pasteInputPlaceholderElement).css('color', "#999")
+              .attr('value', pasteInputPlaceholderElement).css('color', '#999')
               .focus(function () {
                 if (jQuery(this).val() === pasteInputPlaceholderElement) {
                   jQuery(this).attr('value', '').css('color', '#222');
@@ -119,7 +120,7 @@ define(
               })
               .blur(function () {
                 if (jQuery(this).val() === '') {
-                  jQuery(this).attr('value', pasteInputPlaceholderElement).css('color', "#999");
+                  jQuery(this).attr('value', pasteInputPlaceholderElement).css('color', '#999');
                 }
               })
               .keyup(function () {
@@ -140,7 +141,7 @@ define(
             // delay loading indicator for 10ms or else it's just too fast :)
             MailPoet.Modal.loading(true);
             setTimeout(function () {
-              Papa.parse(pasteInputElement.val(), parseCSV());
+              Papa.parse(pasteInputElement.val(), parseCSV(false));
             }, 10);
           });
 
@@ -167,7 +168,7 @@ define(
               MailPoet.Modal.loading(true);
               setTimeout(function () {
                 uploadElement.parse({
-                  config: parseCSV()
+                  config: parseCSV(true)
                 })
               }, 10);
             }
@@ -237,6 +238,10 @@ define(
               MailPoet.Modal.loading(false);
             }).done(function(response) {
               importData.step1 = response.data;
+              MailPoet.trackEvent('Subscribers import started', {
+                source: 'MailChimp',
+                'MailPoet Free version': window.mailpoet_version
+              });
               router.navigate('step2', {trigger: true});
             }).fail(function(response) {
               if (response.errors.length > 0) {
@@ -288,7 +293,7 @@ define(
             element.closest('table a').addClass(disabled);
           }
 
-          function parseCSV() {
+          function parseCSV(isFile) {
             var processedSubscribers = [],
                 parsedEmails = [],
                 duplicateEmails = [],
@@ -302,10 +307,10 @@ define(
                 advancedOptionComments = false,
                 // trim spaces, commas, periods,
                 // single/double quotes and convert to lowercase
-                detectAndCleanupEmail = function (email) {
+                detectAndCleanupEmail = function (emailString) {
                   var test;
                   // decode HTML entities
-                  email = jQuery('<div />').html(email).text();
+                  var email = jQuery('<div />').html(emailString).text();
                   email = email
                     .toLowerCase()
                     // left/right trim spaces, punctuation (e.g., " 'email@email.com'; ")
@@ -315,11 +320,13 @@ define(
                     // remove urlencoded characters
                     .replace(/\s+|%\d+|,+/g, '');
                   // detect e-mails that will be otherwise rejected by email regex
-                  if (test = /<(.*?)>/.exec(email)) {
+                  test = /<(.*?)>/.exec(email);
+                  if (test) {
                     // is the email inside angle brackets (e.g., 'some@email.com <some@email.com>')?
                     email = test[1].trim();
                   }
-                  if (test = /mailto:(?:\s+)?(.*)/.exec(email)) {
+                  test = /mailto:(?:\s+)?(.*)/.exec(email);
+                  if (test) {
                     // is the email in 'mailto:email' format?
                     email = test[1].trim();
                   }
@@ -375,7 +382,7 @@ define(
                         processedSubscribers[0] = rowData;
                       }
                     }
-                    else if (rowData[emailColumnPosition] !== "") {
+                    else if (rowData[emailColumnPosition] !== '') {
                       var email = detectAndCleanupEmail(rowData[emailColumnPosition]);
                       if (_.has(parsedEmails, email)) {
                         duplicateEmails.push(email);
@@ -404,14 +411,18 @@ define(
                   // since we assume that the header line is always present, we need
                   // to detect the header by checking if it contains a valid e-mail address
                   importData.step1 = {
-                    'header': (!emailRegex.test(
+                    header: (!emailRegex.test(
                             processedSubscribers[0][emailColumnPosition])
                     ) ? processedSubscribers.shift() : null,
-                    'subscribers': processedSubscribers,
+                    subscribers: processedSubscribers,
-                    'subscribersCount': processedSubscribers.length,
+                    subscribersCount: processedSubscribers.length,
-                    'duplicate': duplicateEmails,
+                    duplicate: duplicateEmails,
-                    'invalid': invalidEmails
+                    invalid: invalidEmails
                   };
+                  MailPoet.trackEvent('Subscribers import started', {
+                    source: isFile ? 'file upload' : 'pasted data',
+                    'MailPoet Free version': window.mailpoet_version
+                  });
                   router.navigate('step2', {trigger: true});
                 }
                 else {
@@ -509,7 +520,7 @@ define(
                 var details = jQuery('.mailpoet_subscribers_data_parse_results_details');
                 jQuery(details).toggle();
                 this.text =
-                    (jQuery(details).is(":visible"))
+                    (jQuery(details).is(':visible'))
                         ? MailPoet.I18n.t('hideDetails')
                         : MailPoet.I18n.t('showDetails');
               });
@@ -534,12 +545,14 @@ define(
                   data: segments,
                   width: '20em',
                   templateResult: function (item) {
-                    item.subscriberCount = parseInt(item.subscriberCount);
+                    var i = item;
-                    return item.name + ' (' + item.subscriberCount.toLocaleString() + ')';
+                    i.subscriberCount = parseInt(i.subscriberCount, 10);
+                    return i.name + ' (' + i.subscriberCount.toLocaleString() + ')';
                   },
                   templateSelection: function (item) {
-                    item.subscriberCount = parseInt(item.subscriberCount);
+                    var i = item;
-                    return item.name + ' (' + item.subscriberCount.toLocaleString() + ')';
+                    i.subscriberCount = parseInt(i.subscriberCount, 10);
+                    return i.name + ' (' + i.subscriberCount.toLocaleString() + ')';
                   }
                 })
                 .change(function () {
@@ -587,9 +600,9 @@ define(
                 }
               }).done(function(response) {
                 mailpoetSegments.push({
-                  'id': response.data.id,
+                  id: response.data.id,
-                  'name': response.data.name,
+                  name: response.data.name,
-                  'subscriberCount': 0
+                  subscriberCount: 0
                 });
 
                 var selected_values = segmentSelectElement.val();
@@ -621,7 +634,7 @@ define(
 
           // register partial template that will contain subscribers data
           Handlebars.registerPartial(
-              "subscribers_data_template_partial",
+              'subscribers_data_template_partial',
               subscribersDataTemplatePartial
           );
 
@@ -665,7 +678,7 @@ define(
                       && displayedColumnsIds.indexOf(columnId) === -1)
                           ? columnId
                           : 'ignore';
-                  displayedColumns[i] = {'column_id': columnId};
+                  displayedColumns[i] = {column_id: columnId};
                   displayedColumnsIds.push(columnId);
                 }
                 return options.fn(displayedColumns);
@@ -742,17 +755,17 @@ define(
                       data: data
                     }).done(function(response) {
                       var new_column_data = {
-                        'id': response.data.id,
+                        id: response.data.id,
-                        'name': response.data.name,
+                        name: response.data.name,
-                        'type': response.data.type,
+                        type: response.data.type,
-                        'params': response.data.params,
+                        params: response.data.params,
-                        'custom': true
+                        custom: true
                       };
                       // if this is the first custom column, create an "optgroup"
                       if (mailpoetColumnsSelect2.length === 2) {
                         mailpoetColumnsSelect2.push({
-                          'name': MailPoet.I18n.t('userColumns'),
+                          name: MailPoet.I18n.t('userColumns'),
-                          'children': []
+                          children: []
                         });
                       }
                       mailpoetColumnsSelect2[2].children.push(new_column_data);
@@ -894,7 +907,8 @@ define(
                     }
                   }
                 }
-                jQuery.map(subscribersClone.subscribers, function (data, index) {
+                jQuery.map(subscribersClone.subscribers, function (dataSubscribers, index) {
+                  var data = dataSubscribers;
                   var rowData = data[matchedColumn.index];
                   if (index === fillerPosition || rowData.trim() === '') return;
                   var date = Moment(rowData, testedFormat, true);
@@ -968,10 +982,10 @@ define(
               timestamp = Date.now() / 1000,
               subscribers = [],
               importResults = {
-                'created': 0,
+                created: 0,
-                'updated': 0,
+                updated: 0,
-                'errors': [],
+                errors: [],
-                'segments': []
+                segments: []
               },
               splitSubscribers = function (subscribers, size) {
                 return subscribers.reduce(function (res, item, index) {
@@ -1064,6 +1078,12 @@ define(
             MailPoet.Notice.error(_.flatten(importData.step2.errors));
           }
 
+          MailPoet.trackEvent('Subscribers import finished', {
+            'Subscribers created': importData.step2.created,
+            'Subscribers updated': importData.step2.updated,
+            'MailPoet Free version': window.mailpoet_version
+          });
+
           // display statistics
           var subscribersDataImportResultsTemplate =
                   Handlebars

assets/js/src/subscribers/list.jsx

@@ -88,7 +88,7 @@ const messages = {
         <div>
           <p>{MailPoet.I18n.t('bouncedSubscribersHelp')}</p>
           <p>
-            <a href={ `admin.php?page=mailpoet-premium` } className="button-primary">
+            <a href={ 'admin.php?page=mailpoet-premium' } className="button-primary">
               {MailPoet.I18n.t('bouncedSubscribersPremiumButtonText')}
             </a>
           </p>

codeception.acceptance.yml

@@ -0,0 +1,50 @@
+actor: Tester
+paths:
+    tests: tests
+    log: tests/_output
+    data: tests/_data
+    support: tests/_support
+    envs: tests/_envs
+settings:
+    colors: true
+    memory_limit: 1024M
+    log: true
+    strict_xml: true
+extensions:
+    enabled:
+        - Codeception\Extension\RunFailed
+modules:
+    config:
+        WPWebDriver:
+            host: chrome
+            url: 'http://wordpress'
+            browser: chrome
+            port: 4444
+            window_size: '1024x768'
+            restart: true
+            wait: 0
+            adminUsername: admin
+            adminPassword: password
+            adminPath: /wp-admin
+        WPLoader:
+            wpRootFolder: /wp-core
+            dbName: wordpress
+            dbHost: mysql
+            dbUser: wordpress
+            dbPassword: wordpress
+            wpDebug: false
+            tablePrefix: wp_
+            domain: wordpress
+            plugins: ['mailpoet/mailpoet.php']
+            activatePlugins: ['mailpoet/mailpoet.php']
+coverage:
+    enabled: true
+    whitelist:
+        include:
+            - lib/*
+        exclude:
+            - lib/Config/PopulatorData/*
+            - lib/Util/Sudzy/*
+            - lib/Util/CSS.php
+            - lib/Util/Helpers.php
+            - lib/Util/XLSXWriter.php

composer.json

@@ -20,10 +20,12 @@
   },
   "require-dev": {
     "codeception/aspect-mock": "^2.0",
-    "codeception/codeception": "2.2.11",
+    "codeception/codeception": "2.3.5",
     "codeception/verify": "^0.3.3",
     "consolidation/robo": "^1.0.5",
     "henrikbjorn/lurker": "^1.2",
+    "lucatume/wp-browser": "1.19.12",
+    "phpunit/phpunit": "4.8.21",
     "vlucas/phpdotenv": "^2.4.0",
     "umpirsky/twig-gettext-extractor": "1.1.*",
     "raveren/kint": "^1.0",

docker-compose.yml

@@ -0,0 +1,47 @@
+version: '2'
+
+services:
+  codeception:
+    build: .
+    depends_on:
+      - wordpress
+    volumes:
+      - ./:/project
+      - wp-core:/wp-core
+      - ./:/wp-core/wp-content/plugins/mailpoet
+    entrypoint: /docker-entrypoint.sh
+
+  wordpress:
+    build: ./tests/wordpressDockerfile
+    image: wordpress:latest
+    depends_on:
+      - mysql
+      - chrome
+    volumes:
+      - wp-core:/var/www/html
+      - ./:/var/www/html/wp-content/plugins/mailpoet
+      - /tmp:/var/www/html/wp-content/uploads/mailpoet/cache
+    ports:
+      - 8080:80
+    environment:
+      WORDPRESS_DB_PASSWORD: wordpress
+
+  mysql:
+    image: mysql:5.6
+    environment:
+       MYSQL_ROOT_PASSWORD: wordpress
+       MYSQL_DATABASE: wordpress
+       MYSQL_USER: wordpress
+       MYSQL_PASSWORD: wordpress
+
+  chrome:
+    environment:
+      - DBUS_SESSION_BUS_ADDRESS=/dev/null
+    volumes:
+      - /dev/shm:/dev/shm
+    image: selenium/standalone-chrome-debug
+    ports:
+      - '4444'
+      - '5900:5900'
+volumes:
+  wp-core:

docker-entrypoint.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+# Allows WP CLI to run with the right permissions.
+wp-su() {
+    sudo -E -u www-data wp "$@"
+}
+
+while ! mysqladmin ping -hmysql --silent; do
+    echo 'Waiting for the database'
+    sleep 1
+done
+
+
+# Make sure permissions are correct.
+cd /wp-core
+chown www-data:www-data wp-content/plugins
+chmod 755 wp-content/plugins
+
+# Make sure WordPress is installed.
+if ! $(wp-su core is-installed); then
+
+    echo "Installing WordPress"
+
+    wp-su core install --url=wordpress --title=tests --admin_user=admin --admin_email=test@test.com
+
+    echo "Configuring WordPress"
+    # The development version of Gravity Flow requires SCRIPT_DEBUG
+    wp-su core config --dbhost=mysql --dbname=wordpress --dbuser=wordpress --dbpass=wordpress --extra-php="define( 'SCRIPT_DEBUG', true );" --force
+
+fi
+
+rm -rf /project/vendor_backup
+mv /project/vendor /project/vendor_backup 
+cd /project
+php composer.phar install
+
+cd /wp-core/wp-content/plugins/mailpoet
+
+/project/vendor/bin/codecept run acceptance -c codeception.acceptance.yml $@
+
+rm -rf /project/vendor
+mv /project/vendor_backup /project/vendor

lib/API/API.php

@@ -1,11 +1,14 @@
 <?php
+
 namespace MailPoet\API;
 
+use MailPoet\Config\AccessControl;
+
 if(!defined('ABSPATH')) exit;
 
 class API {
-  static function JSON() {
+  static function JSON(AccessControl $access_control) {
-    return new \MailPoet\API\JSON\API();
+    return new \MailPoet\API\JSON\API($access_control);
   }
 
   static function MP($version) {

lib/API/JSON/API.php

@@ -1,7 +1,7 @@
 <?php
 namespace MailPoet\API\JSON;
 
-use MailPoet\Config\Env;
+use MailPoet\Config\AccessControl;
 use MailPoet\Util\Helpers;
 use MailPoet\Util\Security;
 use MailPoet\WP\Hooks;
@@ -19,9 +19,11 @@ class API {
   private $_available_api_versions = array(
       'v1'
   );
+  private $access_control;
   const CURRENT_VERSION = 'v1';
 
-  function __construct() {
+  function __construct(AccessControl $access_control) {
+    $this->access_control = $access_control;
     foreach($this->_available_api_versions as $available_api_version) {
       $this->addEndpointNamespace(
         sprintf('%s\%s', __NAMESPACE__, $available_api_version),
@@ -130,17 +132,11 @@ class API {
 
       // check the accessibility of the requested endpoint's action
       // by default, an endpoint's action is considered "private"
-      $permissions = $endpoint->permissions;
+      if(!$this->validatePermissions($this->_request_method, $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) {
@@ -150,8 +146,11 @@ class API {
     }
   }
 
-  function checkPermissions() {
+  function validatePermissions($request_method, $permissions) {
-    return current_user_can(Env::$required_permission);
+    // validate method permission if defined, otherwise validate global permission
+    return(!empty($permissions['methods'][$request_method])) ?
+      $this->access_control->validatePermission($permissions['methods'][$request_method]) :
+      $this->access_control->validatePermission($permissions['global']);
   }
 
   function checkToken() {

lib/API/JSON/Access.php

@@ -1,12 +0,0 @@
-<?php
-namespace MailPoet\API\JSON;
-
-if(!defined('ABSPATH')) exit;
-
-final class Access {
-  const ALL = 'all';
-
-  private function __construct() {
-
-  }
-}

lib/API/JSON/Endpoint.php

@@ -1,11 +1,16 @@
 <?php
+
 namespace MailPoet\API\JSON;
 
+use MailPoet\Config\AccessControl;
+
 if(!defined('ABSPATH')) exit;
 
 abstract class Endpoint {
-
+  public $permissions = array(
-  public $permissions = array();
+    'global' => AccessControl::PERMISSION_MANAGE_SETTINGS,
+    'methods' => array()
+  );
 
   function successResponse(
     $data = array(), $meta = array(), $status = Response::STATUS_OK

lib/API/JSON/v1/AutomatedLatestContent.php

@@ -1,12 +1,18 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
+
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\Config\AccessControl;
 use MailPoet\WP\Posts as WPPosts;
 
 if(!defined('ABSPATH')) exit;
 
 class AutomatedLatestContent extends APIEndpoint {
   public $ALC;
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_EMAILS
+  );
 
   function __construct() {
     $this->ALC = new \MailPoet\Newsletter\AutomatedLatestContent();

lib/API/JSON/v1/CustomFields.php

@@ -1,12 +1,19 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
+
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
 use MailPoet\API\JSON\Error as APIError;
+use MailPoet\Config\AccessControl;
 use MailPoet\Models\CustomField;
 
 if(!defined('ABSPATH')) exit;
 
 class CustomFields extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_FORMS
+  );
+
   function getAll() {
     $collection = CustomField::orderByAsc('created_at')->findMany();
     $custom_fields = array_map(function($custom_field) {

lib/API/JSON/v1/Forms.php

@@ -1,17 +1,23 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
+
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
 use MailPoet\API\JSON\Error as APIError;
-
+use MailPoet\Config\AccessControl;
+use MailPoet\Form\Renderer as FormRenderer;
+use MailPoet\Form\Util;
+use MailPoet\Listing;
 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;
 
 class Forms extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_FORMS
+  );
+
   function get($data = array()) {
     $id = (isset($data['id']) ? (int)$data['id'] : false);
     $form = Form::findOne($id);

lib/API/JSON/v1/ImportExport.php

@@ -1,13 +1,19 @@
 <?php
-namespace MailPoet\API\JSON\v1;
-use MailPoet\API\JSON\Endpoint as APIEndpoint;
 
-use MailPoet\Subscribers\ImportExport\Import\MailChimp;
+namespace MailPoet\API\JSON\v1;
+
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\Config\AccessControl;
 use MailPoet\Models\Segment;
+use MailPoet\Subscribers\ImportExport\Import\MailChimp;
 
 if(!defined('ABSPATH')) exit;
 
 class ImportExport extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_SUBSCRIBERS
+  );
+
   function getMailChimpLists($data) {
     try {
       $mailChimp = new MailChimp($data['api_key']);

lib/API/JSON/v1/MP2Migrator.php

@@ -1,10 +1,16 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
+
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\Config\AccessControl;
 
 if(!defined('ABSPATH')) exit;
 
 class MP2Migrator extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_SETTINGS
+  );
 
   public function __construct() {
     $this->MP2Migrator = new \MailPoet\Config\MP2Migrator();

lib/API/JSON/v1/Mailer.php

@@ -1,12 +1,19 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
+
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
 use MailPoet\API\JSON\Error as APIError;
+use MailPoet\Config\AccessControl;
 use MailPoet\Mailer\MailerLog;
 
 if(!defined('ABSPATH')) exit;
 
 class Mailer extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_EMAILS
+  );
+
   function send($data = array()) {
     try {
       $mailer = new \MailPoet\Mailer\Mailer(

lib/API/JSON/v1/NewsletterTemplates.php

@@ -1,13 +1,19 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
+
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
 use MailPoet\API\JSON\Error as APIError;
-
+use MailPoet\Config\AccessControl;
 use MailPoet\Models\NewsletterTemplate;
 
 if(!defined('ABSPATH')) exit;
 
 class NewsletterTemplates extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_EMAILS
+  );
+
   function get($data = array()) {
     $id = (isset($data['id']) ? (int)$data['id'] : false);
     $template = NewsletterTemplate::findOne($id);

lib/API/JSON/v1/Newsletters.php

@@ -1,16 +1,19 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
 
+use Carbon\Carbon;
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
 use MailPoet\API\JSON\Error as APIError;
+use MailPoet\Config\AccessControl;
 use MailPoet\Listing;
+use MailPoet\Models\Newsletter;
+use MailPoet\Models\NewsletterOption;
+use MailPoet\Models\NewsletterOptionField;
+use MailPoet\Models\NewsletterSegment;
+use MailPoet\Models\NewsletterTemplate;
 use MailPoet\Models\SendingQueue;
 use MailPoet\Models\Setting;
-use MailPoet\Models\Newsletter;
-use MailPoet\Models\NewsletterTemplate;
-use MailPoet\Models\NewsletterSegment;
-use MailPoet\Models\NewsletterOptionField;
-use MailPoet\Models\NewsletterOption;
 use MailPoet\Models\Subscriber;
 use MailPoet\Newsletter\Renderer\Renderer;
 use MailPoet\Newsletter\Scheduler\Scheduler;
@@ -22,6 +25,10 @@ if(!defined('ABSPATH')) exit;
 require_once(ABSPATH . 'wp-includes/pluggable.php');
 
 class Newsletters extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_EMAILS
+  );
+
   function get($data = array()) {
     $id = (isset($data['id']) ? (int)$data['id'] : false);
     $newsletter = Newsletter::findOne($id);
@@ -33,6 +40,7 @@ class Newsletters extends APIEndpoint {
       $newsletter = $newsletter
         ->withSegments()
         ->withOptions()
+        ->withSendingQueue()
         ->asArray();
       $newsletter = Hooks::applyFilters('mailpoet_api_newsletters_get_after', $newsletter);
       return $this->successResponse($newsletter);
@@ -110,6 +118,13 @@ class Newsletters extends APIEndpoint {
         }
       }
 
+      $queue = $newsletter->getQueue();
+      if($queue) {
+        $queue->newsletter_rendered_body = null;
+        $queue->newsletter_rendered_subject = null;
+        $queue->save();
+      }
+
       Hooks::doAction('mailpoet_api_newsletters_save_after', $newsletter);
 
       return $this->successResponse($newsletter->asArray());
@@ -126,7 +141,7 @@ class Newsletters extends APIEndpoint {
     }
 
     $id = (isset($data['id'])) ? (int)$data['id'] : false;
-    $newsletter = Newsletter::findOne($id);
+    $newsletter = Newsletter::filter('filterWithOptions')->findOne($id);
 
     if($newsletter === false) {
       return $this->errorResponse(array(
@@ -139,12 +154,23 @@ class Newsletters extends APIEndpoint {
 
     if(!empty($errors)) {
       return $this->errorResponse($errors);
-    } else {
+    }
+
+    // if there are past due notifications, reschedule them for the next send date
+    if($newsletter->type === Newsletter::TYPE_NOTIFICATION && $status === Newsletter::STATUS_ACTIVE) {
+      $next_run_date = Scheduler::getNextRunDate($newsletter->schedule);
+      $newsletter->queue()
+        ->whereLte('scheduled_at', Carbon::createFromTimestamp(current_time('timestamp')))
+        ->where('status', SendingQueue::STATUS_SCHEDULED)
+        ->findResultSet()
+        ->set('scheduled_at', $next_run_date)
+        ->save();
+    }
+
     return $this->successResponse(
       Newsletter::findOne($newsletter->id)->asArray()
     );
   }
-  }
 
   function restore($data = array()) {
     $id = (isset($data['id']) ? (int)$data['id'] : false);

lib/API/JSON/v1/Segments.php

@@ -1,15 +1,21 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
+
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
 use MailPoet\API\JSON\Error as APIError;
-
+use MailPoet\Config\AccessControl;
-use MailPoet\Models\Segment;
 use MailPoet\Listing;
+use MailPoet\Models\Segment;
 use MailPoet\Segments\WP;
 
 if(!defined('ABSPATH')) exit;
 
 class Segments extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_SEGMENTS
+  );
+
   function get($data = array()) {
     $id = (isset($data['id']) ? (int)$data['id'] : false);
     $segment = Segment::findOne($id);