Bump up release version to 3.0.0-rc.1.0.4

Fix composer.lock [PREMIUM-35]

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2
 jobs:
-  build:
-    working_directory: ~/mailpoet
+  qa_js_php5:
+    working_directory: /home/circleci/mailpoet
     docker:
       - image: circleci/php:5.6.30-apache-browsers
       - image: circleci/mysql:5.7
@@ -18,41 +18,7 @@ jobs:
           key: npm-{{ checksum "package.json" }}
       - run:
           name: "Set up test environment"
-          command: |
-            # install PHP dependencies for WordPress
-            sudo apt-get update
-            sudo apt-get install mysql-client php5-mysql zlib1g-dev
-            sudo docker-php-ext-install mysql mysqli pdo pdo_mysql zip
-            # Add a fake sendmail mailer
-            sudo cp ./.circleci/fake-sendmail.php /usr/local/bin/
-            # configure Apache
-            sudo cp ./.circleci/mailpoet_php.ini /usr/local/etc/php/conf.d/
-            sudo cp ./.circleci/apache/mailpoet.loc.conf /etc/apache2/sites-available
-            sudo a2ensite mailpoet.loc
-            sudo a2enmod rewrite
-            sudo service apache2 restart
-            # 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
-            ./composer.phar install
-            ./do install
-            # Set up Wordpress
-            mysql -h 127.0.0.1 -u root -e "create database wordpress"
-            curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
-            chmod +x wp-cli.phar
-            ./wp-cli.phar core download --allow-root --path=wordpress
-            # Generate `wp-config.php` file with debugging enabled
-            echo "define(\"WP_DEBUG\", true);" | ./wp-cli.phar core config --allow-root --dbname=wordpress --dbuser=root --dbhost=127.0.0.1 --path=wordpress --extra-php
-            # Install WordPress
-            ./wp-cli.phar core install --allow-root --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc:8080 --title=WordPress --path=wordpress
-            # Softlink plugin to plugin path
-            ln -s ../../.. wordpress/wp-content/plugins/mailpoet
-            ./wp-cli.phar plugin activate mailpoet --path=wordpress
-            # Create .env file with correct path to WP installation
-            # TODO: Remove this line after PR gets merged and CircleCI env variables change
-            echo "WP_TEST_PATH=\"/home/circleci/mailpoet/wordpress\"" > .env
+          command: source ./.circleci/setup.bash && setup php5
       - save_cache:
           key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
           paths:
@@ -76,16 +42,96 @@ jobs:
           name: "PHP Unit tests"
           command: |
             WP_TEST_PATH="/home/circleci/mailpoet/wordpress" ./do t:u --xml
-      - store_test_results:
-          path: tests/_output
-      - store_artifacts:
-          path: tests/_output
-          destination: codeception
       - store_test_results:
           path: test-results/mocha
       - store_artifacts:
           path: test-results/mocha
           destination: mocha
+      - store_test_results:
+          path: tests/_output
+      - store_artifacts:
+          path: tests/_output
+          destination: codeception
       - 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:
+      - image: circleci/php:7.1-apache-browsers
+      - image: circleci/mysql:5.7
+    environment:
+      TZ: /usr/share/zoneinfo/Etc/UTC
+    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: source ./.circleci/setup.bash && setup php7
+      - run:
+          name: "PHP Unit tests"
+          command: |
+            WP_TEST_PATH="/home/circleci/mailpoet/wordpress" ./do t:u --xml
+      - store_test_results:
+          path: tests/_output
+      - store_artifacts:
+          path: tests/_output
+          destination: codeception
+      - store_artifacts:
+          path: /tmp/fake-mailer/
+          destination: fake-mailer
+workflows:
+  version: 2
+  build_and_test:
+    jobs:
+      - qa_js_php5
+      - php7
+      - acceptance_tests

.circleci/setup.bash

@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+
+function setup {
+	local version=$1
+	# install PHP dependencies for WordPress
+	if [[ $version == "php7" ]]; then
+		echo "deb http://packages.dotdeb.org jessie all" | sudo tee -a /etc/apt/sources.list.d/dotdeb.list
+		echo "deb-src http://packages.dotdeb.org jessie all" | sudo tee -a /etc/apt/sources.list.d/dotdeb.list
+		wget -qO - http://www.dotdeb.org/dotdeb.gpg | sudo apt-key add -
+		sudo apt-get update
+		sudo apt-get install mysql-client php7.0-mysql zlib1g-dev
+		sudo docker-php-ext-install mysqli pdo pdo_mysql zip
+	else
+		sudo apt-get update
+		sudo apt-get install mysql-client php5-mysql zlib1g-dev
+		sudo docker-php-ext-install mysql mysqli pdo pdo_mysql zip
+	fi
+	# Add a fake sendmail mailer
+	sudo cp ./.circleci/fake-sendmail.php /usr/local/bin/
+	# configure Apache
+	sudo cp ./.circleci/mailpoet_php.ini /usr/local/etc/php/conf.d/
+	sudo cp ./.circleci/apache/mailpoet.loc.conf /etc/apache2/sites-available
+	sudo a2ensite mailpoet.loc
+	sudo a2enmod rewrite
+	sudo service apache2 restart
+	# 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
+	./composer.phar install
+	./do install
+	# Set up Wordpress
+	mysql -h 127.0.0.1 -u root -e "create database wordpress"
+	curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
+	chmod +x wp-cli.phar
+	./wp-cli.phar core download --allow-root --path=wordpress
+	# Generate `wp-config.php` file with debugging enabled
+	echo "define(\"WP_DEBUG\", true);" | ./wp-cli.phar core config --allow-root --dbname=wordpress --dbuser=root --dbhost=127.0.0.1 --path=wordpress --extra-php
+	# Install WordPress
+	./wp-cli.phar core install --allow-root --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc:8080 --title=WordPress --path=wordpress
+	# Softlink plugin to plugin path
+	ln -s ../../.. wordpress/wp-content/plugins/mailpoet
+	./wp-cli.phar plugin activate mailpoet --path=wordpress
+	# Create .env file with correct path to WP installation
+	# TODO: Remove this line after PR gets merged and CircleCI env variables change
+	echo "WP_TEST_PATH=\"/home/circleci/mailpoet/wordpress\"" > .env
+}

.eslintrc.es5.json

@@ -14,7 +14,6 @@
 
 
 
-    "comma-dangle": 0,
     "space-before-function-paren": 0,
     "prefer-arrow-callback": 0,
     "no-undef": 0,
@@ -34,17 +33,14 @@
     "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,
     "no-empty": 0,
     "no-extra-semi": 0,
     "no-useless-escape": 0,
-    "comma-spacing": 0,
     "wrap-iife": 0,
     "no-unused-expressions": 0,
     "block-spacing": 0,
@@ -62,7 +58,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,
@@ -87,7 +82,6 @@
     "no-unused-vars": 0,
     "object-shorthand": 0,
     "new-parens": 0,
-    "no-param-reassign": 0,
     "keyword-spacing": 0,
     "eol-last": 0,
     "dot-notation": 0,

.eslintrc.es6.json

@@ -11,9 +11,12 @@
     }
   },
   "rules": {
-    "import/no-amd": 0,
+    "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,
@@ -39,7 +42,6 @@
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/alt-text": 0,
 
-    "comma-dangle": 0,
     "func-names": 0,
     "object-shorthand": 0,
     "no-bitwise": 0,
@@ -73,13 +75,11 @@
     "newline-per-chained-call": 0,
     "no-else-return": 0,
     "max-len": 0,
-    "comma-spacing": 0,
     "no-useless-concat": 0,
     "no-unused-expressions": 0,
     "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

@@ -22,7 +22,6 @@
     "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,
@@ -35,11 +34,9 @@
     "quote-props": 0,
     "no-shadow": 0,
     "padded-blocks": 0,
-    "comma-dangle": 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,9 @@ class RoboFile extends \Robo\Tasks {
 
   function testUnit($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 -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 +166,9 @@ class RoboFile extends \Robo\Tasks {
 
   function testCoverage($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
+    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
     $command = join(' ', array(
-      'vendor/bin/codecept run',
+      'vendor/bin/codecept run -c codeception.unit.yml ',
       (($opts['file']) ? $opts['file'] : ''),
       '--coverage',
       ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
@@ -199,16 +199,26 @@ class RoboFile extends \Robo\Tasks {
     return $this->_exec($command);
   }
 
-  function testDebug() {
-    $this->_exec('vendor/bin/codecept build');
+  function testDebug($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    return $this->_exec('vendor/bin/codecept run unit --debug');
+    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
+
+    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml --debug -f '.(($opts['file']) ? $opts['file'] : '');
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    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');
-    return $this->_exec('vendor/bin/codecept run -g failed');
+    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
+    return $this->_exec('vendor/bin/codecept run -c codeception.unit.yml -g failed');
   }
 
   function qa() {
@@ -239,6 +249,7 @@ class RoboFile extends \Robo\Tasks {
       ->taskExec(
         './vendor/bin/phpcs '.
         '--standard=./tasks/code_sniffer/MailPoet '.
+        '--runtime-set testVersion 5.3-7.0 '.
         '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
         './lib/Util/pQuery/*,./lib/Config/PopulatorData/Templates/* '.
         'lib/ '.
@@ -246,7 +257,8 @@ class RoboFile extends \Robo\Tasks {
       )
       ->taskExec(
         './vendor/bin/phpcs '.
-        '--standard=./tasks/code_sniffer/MailPoetTests '.
+        '--standard=./tasks/code_sniffer/MailPoet '.
+        '--runtime-set testVersion 5.4-7.0 '.
         '--ignore=./tests/unit/_bootstrap.php '.
         'tests/unit/ '.
         $severityFlag
@@ -284,8 +296,9 @@ class RoboFile extends \Robo\Tasks {
     $plugin_data = get_plugin_data('mailpoet.php', false, false);
     $plugin_version = $plugin_data['Version'];
     $plugin_dist_name = sanitize_title_with_dashes($plugin_data['Name']);
+    $plugin_dist_name = explode('-', $plugin_dist_name);
+    $plugin_dist_name = $plugin_dist_name[0];
     $plugin_dist_file = $plugin_dist_name . '.zip';
-
     $this->say('Publishing version: ' . $plugin_version);
 
     // Sanity checks
@@ -413,4 +426,4 @@ class RoboFile extends \Robo\Tasks {
     require_once(ABSPATH . WPINC . '/plugin.php');
     require_once(ABSPATH . 'wp-admin/includes/plugin.php');
   }
-}
+}

assets/css/src/admin.styl

@@ -24,5 +24,6 @@
 @require 'subscribers'
 
 @require 'pages'
+@require 'pages_custom'
 
 @require 'mp2migrator'

assets/css/src/common.styl

@@ -21,6 +21,9 @@ a:focus
 .mailpoet_spaced_block
   margin: 1em 0
 
+.mailpoet_centered
+  text-align: center
+
 // select 2
 .select2-container
   width: 25em !important

assets/css/src/modal.styl

@@ -45,7 +45,6 @@ body.mailpoet_modal_opened
   position: absolute
   z-index: 25
   top: 48px
-  padding-bottom: 48px
   margin: 0
 
 .mailpoet_popup_wrapper
@@ -54,6 +53,7 @@ body.mailpoet_modal_opened
   position: relative
   width: 100%
   z-index: 0
+  height: 96%
 
 .mailpoet_overlay_hidden .mailpoet_popup_wrapper
   border: 1px solid #333
@@ -75,6 +75,7 @@ body.mailpoet_modal_opened
 
 .mailpoet_popup_body
   padding: 10px 10px 10px 10px
+  height: 92%
 
 // modal panel
 #mailpoet_modal_overlay.mailpoet_panel_overlay

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/newsletter_editor/contentBlocks/base.styl

@@ -26,10 +26,6 @@ $block-text-line-height = $text-line-height
   &.mailpoet_highlight > .mailpoet_block_highlight
     border: 1px dashed $block-hover-highlight-color
 
-
-.mailpoet_block:last-child
-  margin-bottom: 0
-
 .mailpoet_content
   position: relative
   line-height: $block-text-line-height

assets/css/src/newsletter_editor/libraryOverrides.styl

@@ -127,9 +127,6 @@ body
   background-color: $primary-background-color
   border: 1px solid $content-border-color
 
-#mailpoet_modal_close
-  display: none
-
 .wrap > .mailpoet_notice,
 .notice
 .update-nag

assets/css/src/pages.styl

@@ -2,6 +2,7 @@
 Based on /wp-admin/css/about.css of WP 4.7.
 This is to make MailPoet pages independent of the WordPress
 About page styles that may differ across WP versions.
+Please add custom styles to pages_custom.styl
 */
 
 .mailpoet-about-wrap
@@ -117,21 +118,6 @@ About page styles that may differ across WP versions.
       h3
         margin-top: 0
 
-  .feature-section
-    &.one-col
-      width: 700px
-      margin: 0 auto
-      text-align: center
-      & > a.button
-        margin-top: 2em
-    &.one-col-left
-      width: 700px
-      margin: 0 auto
-    h2.mailpoet-feature-top
-      margin: 50px auto
-    .lead-description ~ p
-      margin-top: 3em
-
   .feature-section
     h4
       margin: 1.4em 0 0.6em 0

assets/css/src/pages_custom.styl

@@ -0,0 +1,35 @@
+/*
+Custom styles for MailPoet pages.
+*/
+
+.mailpoet-about-wrap
+
+  .videoWrapper
+    position: relative
+    padding-bottom: 56.25% /* 16:9 */
+    /*padding-top: 25px*/
+    height: 0
+
+    iframe
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+
+
+  .mailpoet_video
+    border: 1px solid rgba(0, 0, 0, 0.1)
+
+  #mailpoet-changelog ul
+    list-style: disc
+    padding-left: 20px
+
+  h2.mailpoet-feature-top
+    margin: 50px auto
+
+  a.button.go-to-plugin
+    margin-top: 2em
+
+  p.top-space-triple
+    margin-top: 3em

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

@@ -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

@@ -24,7 +24,8 @@ function track(name, data){
   window.mixpanel.track(name, data);
 }
 
-function exportMixpanel(MailPoet) {
+function exportMixpanel(mp) {
+  var MailPoet = mp;
   MailPoet.forceTrackEvent = track;
 
   if (window.mailpoet_analytics_enabled) {
@@ -55,13 +56,14 @@ function cacheEvent(forced, name, data) {
   eventsCache.push({
     name: name,
     data: data,
-    forced: forced,
+    forced: forced
   });
 }
 
 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) {
-      options = options || {};
+    init: function (opts) {
+      var options = opts || {};
 
       // set UTC offset
       if (
@@ -39,16 +41,16 @@ define('date',
 
       return this;
     },
-    format: function(date, options) {
-      options = options || {};
+    format: function(date, opts) {
+      var options = opts || {};
       this.init(options);
 
-      var date = Moment(date, this.convertFormat(options.parseFormat));
-      if (options.offset === 0) date = date.utc();
-      return date.format(this.convertFormat(this.options.format));
+      var momentDate = Moment(date, this.convertFormat(options.parseFormat));
+      if (options.offset === 0) momentDate = momentDate.utc();
+      return momentDate.format(this.convertFormat(this.options.format));
     },
-    toDate: function(date, options) {
-      options = options || {};
+    toDate: function(date, opts) {
+      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/checkbox.jsx

@@ -1,5 +1,5 @@
 define([
-  'react'
+  'react',
 ],
 (
   React
@@ -42,7 +42,7 @@ define([
           { options }
         </div>
       );
-    }
+    },
   });
 
   return FormFieldCheckbox;

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

@@ -104,7 +104,7 @@ define([
       this.state = {
         year: '',
         month: '',
-        day: ''
+        day: '',
       };
     }
     componentDidMount() {
@@ -132,7 +132,7 @@ define([
       this.setState({
         year: dateTime.format('YYYY'),
         month: dateTime.format('M'),
-        day: dateTime.format('D')
+        day: dateTime.format('D'),
       });
     }
     formatValue() {
@@ -145,26 +145,26 @@ define([
           value = {
             'year': this.state.year,
             'month': this.state.month,
-            'day': this.state.day
+            'day': this.state.day,
           };
           break;
 
         case 'year_month':
           value = {
             '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;
       }
@@ -184,13 +184,13 @@ define([
         const value = ~~(e.target.value);
 
         this.setState({
-          [`${property}`]: value
+          [`${property}`]: value,
         }, () => {
           this.props.onValueChange({
             target: {
               name: field,
-              value: this.formatValue()
-            }
+              value: this.formatValue(),
+            },
           });
         });
       }

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;
@@ -92,7 +93,7 @@ define([
             index: index,
             field: subfield,
             item: this.props.item,
-            onValueChange: this.props.onValueChange || false
+            onValueChange: this.props.onValueChange || false,
           });
         });
       } else {
@@ -121,7 +122,7 @@ define([
           </td>
         </tr>
       );
-    }
+    },
   });
 
   return FormField;

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

@@ -1,5 +1,5 @@
 define([
-  'react'
+  'react',
 ],
 (
   React
@@ -34,7 +34,7 @@ define([
           { options }
         </div>
       );
-    }
+    },
   });
 
   return FormFieldRadio;

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

@@ -70,7 +70,7 @@ const FormFieldSelect = React.createClass({
         {options}
       </select>
     );
-  }
+  },
 });
 
 module.exports = FormFieldSelect;

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

@@ -2,7 +2,7 @@ define([
   'react',
   'react-dom',
   'jquery',
-  'select2'
+  'select2',
 ],
 (
   React,
@@ -13,7 +13,7 @@ define([
     getInitialState: function () {
       return {
         items: [],
-        select2: false
+        select2: false,
       };
     },
     componentWillMount: function () {
@@ -67,7 +67,7 @@ define([
               return item.text;
             }
           }
-        }
+        },
       });
 
       let hasRemoved = false;
@@ -111,7 +111,7 @@ define([
         }
 
         this.setState({
-          items: items
+          items: items,
         });
       }
     },
@@ -126,8 +126,8 @@ define([
         this.props.onValueChange({
           target: {
             value: transformedValue,
-            name: this.props.field.name
-          }
+            name: this.props.field.name,
+          },
         });
       }
     },
@@ -180,13 +180,14 @@ 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() }
           {...this.props.field.validation}
         >{ options }</select>
       );
-    }
+    },
   });
 
   return Selection;

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

@@ -29,7 +29,7 @@ const FormFieldText = React.createClass({
         {...this.props.field.validation}
       />
     );
-  }
+  },
 });
 
 module.exports = FormFieldText;

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

@@ -1,5 +1,5 @@
 define([
-  'react'
+  'react',
 ],
 (
   React
@@ -19,7 +19,7 @@ define([
           {...this.props.field.validation}
         />
       );
-    }
+    },
   });
 
   return FormFieldTextarea;

assets/js/src/form/form.jsx

@@ -4,7 +4,7 @@ define(
     'mailpoet',
     'classnames',
     'react-router',
-    'form/fields/field.jsx'
+    'form/fields/field.jsx',
   ],
   (
     React,
@@ -16,7 +16,7 @@ define(
 
     const Form = React.createClass({
       contextTypes: {
-        router: React.PropTypes.object.isRequired
+        router: React.PropTypes.object.isRequired,
       },
       getDefaultProps: function () {
         return {
@@ -27,7 +27,7 @@ define(
         return {
           loading: false,
           errors: [],
-          item: {}
+          item: {},
         };
       },
       getValues: function () {
@@ -42,7 +42,7 @@ define(
             this.loadItem(this.props.params.id);
           } else {
             this.setState({
-              item: jQuery('.mailpoet_form').serializeObject()
+              item: jQuery('.mailpoet_form').serializeObject(),
             });
           }
         }
@@ -51,7 +51,7 @@ define(
         if(props.params.id === undefined) {
           this.setState({
             loading: false,
-            item: {}
+            item: {},
           });
           if (props.item === undefined) {
             this.refs.form.reset();
@@ -68,17 +68,17 @@ define(
           endpoint: this.props.endpoint,
           action: 'get',
           data: {
-            id: id
-          }
+            id: id,
+          },
         }).done((response) => {
           this.setState({
             loading: false,
-            item: response.data
+            item: response.data,
           });
         }).fail(() => {
           this.setState({
             loading: false,
-            item: {}
+            item: {},
           }, function () {
             this.context.router.push('/new');
           });
@@ -116,7 +116,7 @@ define(
           api_version: window.mailpoet_api_version,
           endpoint: this.props.endpoint,
           action: 'save',
-          data: item
+          data: item,
         }).always(() => {
           this.setState({ loading: false });
         }).done(() => {
@@ -147,7 +147,7 @@ define(
           item[field] = e.target.value;
 
           this.setState({
-            item: item
+            item: item,
           });
           return true;
         }
@@ -181,11 +181,20 @@ define(
         }
 
         const fields = this.props.fields.map((field, i) => {
+          // Compose an onChange handler from the default and custom one
+          let onValueChange = this.handleValueChange;
+          if (field.onBeforeChange) {
+            onValueChange = (e) => {
+              field.onBeforeChange(e);
+              return this.handleValueChange(e);
+            };
+          }
+
           return (
             <FormField
               field={ field }
               item={ this.getValues() }
-              onValueChange={ this.handleValueChange }
+              onValueChange={ onValueChange }
               key={ 'field-'+i } />
           );
         });
@@ -229,7 +238,7 @@ define(
             { afterFormContent }
           </div>
         );
-      }
+      },
     });
 
     return Form;

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) {
-    name = name.substring(2);
+  function getEventName(nameA, namespace) {
+    var name = nameA.substring(2);
     if(namespace) name = namespace + ':' + name;
     return name.underscore().split('_').join(':');
   }
@@ -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();
@@ -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/forms/forms.jsx

@@ -9,7 +9,7 @@ const history = useRouterHistory(createHashHistory)({ queryKey: false });
 const App = React.createClass({
   render() {
     return this.props.children;
-  }
+  },
 });
 
 const container = document.getElementById('forms_container');

assets/js/src/forms/list.jsx

@@ -7,21 +7,21 @@ const columns = [
   {
     name: 'name',
     label: MailPoet.I18n.t('formName'),
-    sortable: true
+    sortable: true,
   },
   {
     name: 'segments',
-    label: MailPoet.I18n.t('segments')
+    label: MailPoet.I18n.t('segments'),
   },
   {
     name: 'signups',
-    label: MailPoet.I18n.t('signups')
+    label: MailPoet.I18n.t('signups'),
   },
   {
     name: 'created_at',
     label: MailPoet.I18n.t('createdOn'),
-    sortable: true
-  }
+    sortable: true,
+  },
 ];
 
 const messages = {
@@ -69,15 +69,15 @@ const messages = {
       ).replace('%$1d', count.toLocaleString());
     }
     MailPoet.Notice.success(message);
-  }
+  },
 };
 
 const bulk_actions = [
   {
     name: 'trash',
     label: MailPoet.I18n.t('moveToTrash'),
-    onSuccess: messages.onTrash
-  }
+    onSuccess: messages.onTrash,
+  },
 ];
 
 const item_actions = [
@@ -88,7 +88,7 @@ const item_actions = [
       return (
         <a href={ `admin.php?page=mailpoet-form-editor&id=${item.id}` }>{MailPoet.I18n.t('edit')}</a>
       );
-    }
+    },
   },
   {
     name: 'duplicate',
@@ -99,8 +99,8 @@ const item_actions = [
         endpoint: 'forms',
         action: 'duplicate',
         data: {
-          id: item.id
-        }
+          id: item.id,
+        },
       }).done((response) => {
         MailPoet.Notice.success(
           (MailPoet.I18n.t('formDuplicated')).replace('%$1s', response.data.name)
@@ -114,11 +114,11 @@ const item_actions = [
           );
         }
       });
-    }
+    },
   },
   {
-    name: 'trash'
-  }
+    name: 'trash',
+  },
 ];
 
 const FormList = React.createClass({
@@ -126,7 +126,7 @@ const FormList = React.createClass({
     MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
       endpoint: 'forms',
-      action: 'create'
+      action: 'create',
     }).done((response) => {
       window.location = mailpoet_form_edit_url + response.data.id;
     }).fail((response) => {
@@ -203,7 +203,7 @@ const FormList = React.createClass({
         />
       </div>
     );
-  }
+  },
 });
 
 module.exports = FormList;

assets/js/src/handlebars_helpers.js

@@ -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) {
-          append = '';
+      var strAppend = 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;
       }

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/help.jsx

@@ -11,7 +11,7 @@ const history = useRouterHistory(createHashHistory)({ queryKey: false });
 const App = React.createClass({
   render() {
     return this.props.children;
-  }
+  },
 });
 
 const container = document.getElementById('help_container');

assets/js/src/help/tabs.jsx

@@ -7,12 +7,12 @@ const tabs = [
   {
     name: 'knowledgeBase',
     label: MailPoet.I18n.t('tabKnowledgeBaseTitle'),
-    link: '/knowledgeBase'
+    link: '/knowledgeBase',
   },
   {
     name: 'systemInfo',
     label: MailPoet.I18n.t('tabSystemInfoTitle'),
-    link: '/systemInfo'
+    link: '/systemInfo',
   },
 ];
 

assets/js/src/helpscout.js

@@ -1,3 +1,3 @@
 define([], function() {
-  !function(e,o,n){window.HSCW=o,window.HS=n,n.beacon=n.beacon||{};var t=n.beacon;t.userConfig={},t.readyQueue=[],t.config=function(e){this.userConfig=e},t.ready=function(e){this.readyQueue.push(e)},o.config={docs:{enabled:!0,baseUrl:"//mailpoet3.helpscoutdocs.com/"},contact:{enabled:!0,formId:"aa21ca80-a4f5-11e6-91aa-0a5fecc78a4d"}};var r=e.getElementsByTagName("script")[0],c=e.createElement("script");c.type="text/javascript",c.async=!0,c.src="https://djtflbt20bdde.cloudfront.net/",r.parentNode.insertBefore(c,r)}(document,window.HSCW||{},window.HS||{});
+  !function(e, o, n){window.HSCW=o, window.HS=n, n.beacon=n.beacon||{};var t=n.beacon;t.userConfig={}, t.readyQueue=[], t.config=function(e){this.userConfig=e}, t.ready=function(e){this.readyQueue.push(e)}, o.config={docs:{enabled:!0, baseUrl:"//mailpoet3.helpscoutdocs.com/"}, contact:{enabled:!0, formId:"aa21ca80-a4f5-11e6-91aa-0a5fecc78a4d"}};var r=e.getElementsByTagName("script")[0], c=e.createElement("script");c.type="text/javascript", c.async=!0, c.src="https://djtflbt20bdde.cloudfront.net/", r.parentNode.insertBefore(c, r)}(document, window.HSCW||{}, window.HS||{});
 });

assets/js/src/i18n.js

@@ -2,9 +2,10 @@ define('i18n',
   [
     'mailpoet'
   ], function(
-    MailPoet
+    mp
 ) {
   'use strict';
+  var MailPoet = mp;
 
   var 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,11 +11,12 @@ 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";
     }
   };

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
@@ -27,7 +28,7 @@ define(
         coerce_types = { 'true': !0, 'false': !1, 'null': null };
 
       // Iterate over all name=value pairs.
-      $.each( this.serializeArray(), function(j,v){
+      $.each( this.serializeArray(), function(j, v){
         var key = v.name,
           val = v.value,
           cur = obj,
@@ -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/bulk_actions.jsx

@@ -1,6 +1,6 @@
 define([
   'react',
-  'mailpoet'
+  'mailpoet',
 ],
 (
   React,
@@ -10,20 +10,20 @@ define([
     getInitialState: function () {
       return {
         action: false,
-        extra: false
+        extra: false,
       };
     },
     handleChangeAction: function (e) {
       this.setState({
         action: e.target.value,
-        extra: false
+        extra: false,
       }, () => {
         const action = this.getSelectedAction();
 
         // action on select callback
         if(action !== null && action['onSelect'] !== undefined) {
           this.setState({
-            extra: action.onSelect(e)
+            extra: action.onSelect(e),
           });
         }
       });
@@ -61,7 +61,7 @@ define([
 
       this.setState({
         action: false,
-        extra: false
+        extra: false,
       });
     },
     getSelectedAction: function () {
@@ -115,7 +115,7 @@ define([
             { this.state.extra }
         </div>
       );
-    }
+    },
   });
 
   return ListingBulkActions;

assets/js/src/listing/filters.jsx

@@ -1,7 +1,7 @@
 define([
   'react',
   'jquery',
-  'mailpoet'
+  'mailpoet',
 ],
 (
   React,
@@ -14,6 +14,9 @@ define([
       this.getAvailableFilters().map((filter, i) => {
         filters[this.refs['filter-'+i].name] = this.refs['filter-'+i].value;
       });
+      if (this.props.onBeforeSelectFilter) {
+        this.props.onBeforeSelectFilter(filters);
+      }
       return this.props.onSelectFilter(filters);
     },
     handleEmptyTrash: function () {
@@ -97,7 +100,7 @@ define([
           { empty_trash }
         </div>
       );
-    }
+    },
   });
 
   return ListingFilters;

assets/js/src/listing/groups.jsx

@@ -32,7 +32,7 @@ define(['react', 'classnames'], (React, classNames) => {
             { groups }
           </ul>
       );
-    }
+    },
   });
 
   return ListingGroups;

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);
-      column.sorted = (this.props.sort_by === column.name)
+      const renderColumn = column;
+      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} />
       );
     });
 
@@ -48,7 +49,7 @@ const ListingHeader = React.createClass({
         {columns}
       </tr>
     );
-  }
+  },
 });
 
 const ListingColumn = React.createClass({
@@ -85,7 +86,7 @@ const ListingColumn = React.createClass({
         width={ this.props.column.width || null }
       >{label}</th>
     );
-  }
+  },
 });
 
 module.exports = ListingHeader;

assets/js/src/listing/listing.jsx

@@ -14,7 +14,7 @@ import ListingFilters from 'listing/filters.jsx';
 const ListingItem = React.createClass({
   getInitialState: function () {
     return {
-      expanded: false
+      expanded: false,
     };
   },
   handleSelectItem: function (e) {
@@ -191,7 +191,7 @@ const ListingItem = React.createClass({
         { this.props.onRenderItem(this.props.item, actions) }
       </tr>
     );
-  }
+  },
 });
 
 
@@ -229,7 +229,7 @@ const ListingItems = React.createClass({
         { '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);
-            item.selected = (this.props.selected_ids.indexOf(item.id) !== -1);
+            const renderItem = item;
+            renderItem.id = parseInt(item.id, 10);
+            renderItem.selected = (this.props.selected_ids.indexOf(renderItem.id) !== -1);
 
             return (
               <ListingItem
@@ -276,19 +277,19 @@ 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}` }
-                item={ item } />
+                key={ `item-${renderItem.id}-${index}` }
+                item={ renderItem } />
             );
           })}
         </tbody>
       );
     }
-  }
+  },
 });
 
 const Listing = React.createClass({
   contextTypes: {
-    router: React.PropTypes.object.isRequired
+    router: React.PropTypes.object.isRequired,
   },
   getInitialState: function () {
     return {
@@ -306,7 +307,7 @@ const Listing = React.createClass({
       filter: {},
       selected_ids: [],
       selection: false,
-      meta: {}
+      meta: {},
     };
   },
   getParam: function (param) {
@@ -378,7 +379,7 @@ const Listing = React.createClass({
               'search',
               'page',
               'sort_by',
-              'sort_order'
+              'sort_order',
             ].indexOf(key) !== -1
           );
         })
@@ -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) {
-          base_url = base_url.replace(':'+key, params[key]);
+        if (ret.indexOf(':'+key) !== -1) {
+          ret = ret.replace(':'+key, params[key]);
         }
       });
     }
 
-    return base_url;
+    return ret;
   },
   componentDidMount: function () {
     if (this.isMounted()) {
@@ -463,8 +465,8 @@ const Listing = React.createClass({
           filter: this.state.filter,
           search: this.state.search,
           sort_by: this.state.sort_by,
-          sort_order: this.state.sort_order
-        }
+          sort_order: this.state.sort_order,
+        },
       }).always(() => {
         this.setState({ loading: false });
       }).done((response) => {
@@ -473,7 +475,7 @@ const Listing = React.createClass({
           filters: response.meta.filters || {},
           groups: response.meta.groups || [],
           count: response.meta.count || 0,
-          meta: _.omit(response.meta, ['filters', 'groups', 'count'])
+          meta: _.omit(response.meta, ['filters', 'groups', 'count']),
         }, () => {
           // if viewing an empty trash
           if (this.state.group === 'trash' && response.meta.count === 0) {
@@ -499,7 +501,7 @@ const Listing = React.createClass({
   handleRestoreItem: function (id) {
     this.setState({
       loading: true,
-      page: 1
+      page: 1,
     });
 
     MailPoet.Ajax.post({
@@ -507,8 +509,8 @@ const Listing = React.createClass({
       endpoint: this.props.endpoint,
       action: 'restore',
       data: {
-        id: id
-      }
+        id: id,
+      },
     }).done((response) => {
       if (
         this.props.messages !== undefined
@@ -527,7 +529,7 @@ const Listing = React.createClass({
   handleTrashItem: function (id) {
     this.setState({
       loading: true,
-      page: 1
+      page: 1,
     });
 
     MailPoet.Ajax.post({
@@ -535,8 +537,8 @@ const Listing = React.createClass({
       endpoint: this.props.endpoint,
       action: 'trash',
       data: {
-        id: id
-      }
+        id: id,
+      },
     }).done((response) => {
       if (
         this.props.messages !== undefined
@@ -555,7 +557,7 @@ const Listing = React.createClass({
   handleDeleteItem: function (id) {
     this.setState({
       loading: true,
-      page: 1
+      page: 1,
     });
 
     MailPoet.Ajax.post({
@@ -563,8 +565,8 @@ const Listing = React.createClass({
       endpoint: this.props.endpoint,
       action: 'delete',
       data: {
-        id: id
-      }
+        id: id,
+      },
     }).done((response) => {
       if (
         this.props.messages !== undefined
@@ -583,7 +585,7 @@ const Listing = React.createClass({
   handleEmptyTrash: function () {
     return this.handleBulkAction('all', {
       action: 'delete',
-      group: 'trash'
+      group: 'trash',
     }).done((response) => {
       MailPoet.Notice.success(
         MailPoet.I18n.t('permanentlyDeleted').replace('%d', response.meta.count)
@@ -615,7 +617,7 @@ const Listing = React.createClass({
       limit: 0,
       filter: this.state.filter,
       group: this.state.group,
-      search: this.state.search
+      search: this.state.search,
     };
     if (selected_ids !== 'all') {
       data.listing.selection = selected_ids;
@@ -625,7 +627,7 @@ const Listing = React.createClass({
       api_version: window.mailpoet_api_version,
       endpoint: this.props.endpoint,
       action: 'bulkAction',
-      data: data
+      data: data,
     }).done(() => {
       this.getItems();
     }).fail((response) => {
@@ -642,7 +644,7 @@ const Listing = React.createClass({
       search: search,
       page: 1,
       selection: false,
-      selected_ids: []
+      selected_ids: [],
     }, () => {
       this.setParams();
     });
@@ -673,7 +675,7 @@ const Listing = React.createClass({
 
     this.setState({
       selection: selection,
-      selected_ids: selected_ids
+      selected_ids: selected_ids,
     });
   },
   handleSelectItems: function (is_checked) {
@@ -686,7 +688,7 @@ const Listing = React.createClass({
 
       this.setState({
         selected_ids: selected_ids,
-        selection: 'page'
+        selection: 'page',
       });
     }
   },
@@ -696,20 +698,20 @@ const Listing = React.createClass({
     } else {
       this.setState({
         selection: 'all',
-        selected_ids: []
+        selected_ids: [],
       });
     }
   },
   clearSelection: function () {
     this.setState({
       selection: false,
-      selected_ids: []
+      selected_ids: [],
     });
   },
   handleFilter: function (filters) {
     this.setState({
       filter: filters,
-      page: 1
+      page: 1,
     }, () => {
       this.setParams();
     });
@@ -722,7 +724,7 @@ const Listing = React.createClass({
       group: group,
       filter: {},
       search: '',
-      page: 1
+      page: 1,
     }, () => {
       this.setParams();
     });
@@ -731,7 +733,7 @@ const Listing = React.createClass({
     this.setState({
       page: page,
       selection: false,
-      selected_ids: []
+      selected_ids: [],
     }, () => {
       this.setParams();
     });
@@ -762,13 +764,13 @@ const Listing = React.createClass({
         {
           name: 'restore',
           label: MailPoet.I18n.t('restore'),
-          onSuccess: this.props.messages.onRestore
+          onSuccess: this.props.messages.onRestore,
         },
         {
           name: 'delete',
           label: MailPoet.I18n.t('deletePermanently'),
-          onSuccess: this.props.messages.onDelete
-        }
+          onSuccess: this.props.messages.onDelete,
+        },
       ];
     }
 
@@ -828,6 +830,7 @@ const Listing = React.createClass({
             filters={ this.state.filters }
             filter={ this.state.filter }
             group={ this.state.group }
+            onBeforeSelectFilter={ this.props.onBeforeSelectFilter || null }
             onSelectFilter={ this.handleFilter }
             onEmptyTrash={ this.handleEmptyTrash }
           />
@@ -896,7 +899,7 @@ const Listing = React.createClass({
         </div>
       </div>
     );
-  }
+  },
 });
 
 module.exports = Listing;

assets/js/src/listing/pages.jsx

@@ -1,7 +1,7 @@
 define([
   'react',
   'classnames',
-  'mailpoet'
+  'mailpoet',
 ], (
     React,
     classNames,
@@ -11,12 +11,12 @@ define([
   const ListingPages = React.createClass({
     getInitialState: function () {
       return {
-        page: null
+        page: null,
       };
     },
     setPage: function (page) {
       this.setState({
-        page: null
+        page: null,
       }, () => {
         this.props.onSetPage(this.constrainPage(page));
       });
@@ -47,7 +47,7 @@ define([
     },
     handleChangeManualPage: function (e) {
       this.setState({
-        page: e.target.value
+        page: e.target.value,
       });
     },
     handleBlurManualPage: function (e) {
@@ -178,7 +178,7 @@ define([
           </div>
         );
       }
-    }
+    },
   });
 
   return ListingPages;

assets/js/src/listing/search.jsx

@@ -1,6 +1,6 @@
 define([
   'mailpoet',
-  'react'
+  'react',
 ], (
     MailPoet,
     React
@@ -40,7 +40,7 @@ define([
           </form>
         );
       }
-    }
+    },
   });
 
   return ListingSearch;

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: '',
@@ -28,7 +29,8 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         cache: false
       }).done(function (result) {
         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
           }

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',
@@ -15,8 +16,8 @@ define([
       contentRegion: '#mailpoet_editor_content',
       sidebarRegion: '#mailpoet_editor_sidebar',
       bottomRegion: '#mailpoet_editor_bottom',
-      headingRegion: '#mailpoet_editor_heading',
-    },
+      headingRegion: '#mailpoet_editor_heading'
+    }
   });
 
   var EditorApplication = Marionette.Application.extend({
@@ -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,8 +9,9 @@ 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,
@@ -21,6 +22,6 @@ define([
         chooseText: MailPoet.I18n.t('selectColor'),
         cancelText: MailPoet.I18n.t('cancelColorSelection')
       });
-    },
+    }
   });
 });

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

@@ -11,11 +11,12 @@ 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: {
-      columnLimit: 3,
+      columnLimit: 3
     },
     onRender: function() {
       var dragAndDropDisabled = _.isObject(this.view.options.renderOptions) && this.view.options.renderOptions.disableDragAndDrop === true;
@@ -195,7 +196,7 @@ define([
             if (view.model.get('orientation') === 'horizontal' && droppableModel.get('type') !== 'container') {
               // Regular blocks always need to be inserted into columns - vertical containers
               tempCollection = new (EditorApplication.getBlockTypeModel('container'))({
-                  orientation: 'vertical',
+                  orientation: 'vertical'
               });
               tempCollection.get('blocks').add(droppableModel);
               viewCollection.add(tempCollection, {at: index});
@@ -210,7 +211,7 @@ define([
             var tempModel = viewCollection.at(dropPosition.index);
 
             tempCollection = new (EditorApplication.getBlockTypeModel('container'))({
-                orientation: (view.model.get('orientation') === 'vertical') ? 'horizontal' : 'vertical',
+                orientation: (view.model.get('orientation') === 'vertical') ? 'horizontal' : 'vertical'
             });
 
             viewCollection.remove(tempModel);
@@ -218,19 +219,19 @@ define([
             if (tempCollection.get('orientation') === 'horizontal') {
               if (dropPosition.position === 'before') {
                 tempCollection2 = new (EditorApplication.getBlockTypeModel('container'))({
-                  orientation: 'vertical',
+                  orientation: 'vertical'
                 });
                 tempCollection2.get('blocks').add(droppableModel);
                 tempCollection.get('blocks').add(tempCollection2);
               }
               tempCollection2 = new (EditorApplication.getBlockTypeModel('container'))({
-                orientation: 'vertical',
+                orientation: 'vertical'
               });
               tempCollection2.get('blocks').add(tempModel);
               tempCollection.get('blocks').add(tempCollection2);
               if (dropPosition.position === 'after') {
                 tempCollection2 = new (EditorApplication.getBlockTypeModel('container'))({
-                  orientation: 'vertical',
+                  orientation: 'vertical'
                 });
                 tempCollection2.get('blocks').add(droppableModel);
                 tempCollection.get('blocks').add(tempCollection2);
@@ -254,11 +255,11 @@ define([
           event.draggable.onDrop({
             dropBehavior: that,
             droppedModel: droppableModel,
-            droppedView: droppedView,
+            droppedView: droppedView
           });
 
           that.cleanup();
-        },
+        }
       });
     },
     cleanup: function() {
@@ -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,13 +291,13 @@ define([
 
         insertionType, index, position, indexAndPosition;
 
-      unsafe = !!unsafe;
+      unsafe = !!is_unsafe;
 
       if (this.getCollection().length === 0) {
         return {
           insertionType: 'normal',
           index: 0,
-          position: 'inside',
+          position: 'inside'
         };
       }
 
@@ -347,7 +348,7 @@ define([
       return {
         insertionType: insertionType, // 'normal'|'special'
         index: index,
-        position: position, // 'inside'|'before'|'after'
+        position: position // 'inside'|'before'|'after'
       };
     },
     _computeNormalIndex: function(eventX, eventY) {
@@ -377,13 +378,13 @@ define([
         // First half of the element
         return {
             index: index,
-            position: 'before',
+            position: 'before'
         };
       } else {
         // Second half of the element
         return {
             index: index,
-            position: 'after',
+            position: 'after'
         };
       }
     },

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,
@@ -28,7 +29,7 @@ define([
       },
 
       onDrop: function(model, view) {},
-      testAttachToInstance: function(model, view) { return true; },
+      testAttachToInstance: function(model, view) { return true; }
     },
     onRender: function() {
       var that = this,
@@ -38,7 +39,7 @@ define([
       if (!this.options.testAttachToInstance(this.view.model, this.view)) return;
 
       interactable = interact(this.$el.get(0), {
-          ignoreFrom: this.options.ignoreSelector,
+          ignoreFrom: this.options.ignoreSelector
       }).draggable({
         // allow dragging of multple elements at the same time
         max: Infinity,
@@ -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 = 'translate(' + x + 'px, ' + y + 'px)';
+          target.style.webkitTransform = target.style.transform;
 
           // 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');
@@ -111,7 +113,7 @@ define([
               that.view.$el.removeClass('mailpoet_hidden');
             }
           }
-        },
+        }
       })
       .preventDefault('auto')
       .styleCursor(false)
@@ -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;
@@ -137,6 +140,6 @@ define([
         // Delegate to view's event handler
         that.options.onDrop.apply(that, [options]);
       };
-    },
+    }
   });
 });

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

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

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

@@ -8,18 +8,19 @@ 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
       transformationFunction: function(y) { return y; },
       minLength: 0,
-      modelField: 'styles.block.height',
+      modelField: 'styles.block.height'
     },
     events: {
       "mouseenter": 'showResizeHandle',
-      "mouseleave": 'hideResizeHandle',
+      "mouseleave": 'hideResizeHandle'
     },
     onRender: function() {
       this.attachResize();
@@ -37,8 +38,8 @@ define([
           top: false,
           left: false,
           right: false,
-          bottom: (typeof this.options.resizeHandleSelector === 'string') ? this.view.$(this.options.resizeHandleSelector).get(0) : this.options.resizeHandleSelector,
-        },
+          bottom: (typeof this.options.resizeHandleSelector === 'string') ? this.view.$(this.options.resizeHandleSelector).get(0) : this.options.resizeHandleSelector
+        }
       }).on('resizestart', function(event) {
         that.isBeingResized = true;
         that.$el.addClass('mailpoet_resize_active');
@@ -63,6 +64,6 @@ define([
       if (typeof this.options.resizeHandleSelector === 'string') {
         this.view.$(this.options.resizeHandleSelector).addClass('mailpoet_hidden');
       }
-    },
+    }
   });
 });

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

@@ -6,15 +6,16 @@
 define([
     'backbone.marionette',
     'jquery',
-    'newsletter_editor/behaviors/BehaviorsLookup',
+    'newsletter_editor/behaviors/BehaviorsLookup'
   ], function(Marionette, jQuery, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.ShowSettingsBehavior = Marionette.Behavior.extend({
+  BL.ShowSettingsBehavior = Marionette.Behavior.extend({
     defaults: {
-      ignoreFrom: '', // selector
+      ignoreFrom: '' // selector
     },
     events: {
-      'click .mailpoet_content': 'showSettings',
+      'click .mailpoet_content': 'showSettings'
     },
     showSettings: function(event) {
       if(!this.isIgnoredElement(event.target)) {
@@ -25,7 +26,7 @@ define([
       return this.options.ignoreFrom
         && this.options.ignoreFrom.length > 0
         && jQuery(element).is(this.options.ignoreFrom);
-    },
+    }
   });
 });
 

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

@@ -8,8 +8,9 @@ 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;
 
@@ -32,7 +33,7 @@ define([
             collection.remove(model);
             collection.add(model, { at: newIndex });
           },
-          items: this.options.items,
+          items: this.options.items
         });
       }
     }

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

@@ -8,8 +8,9 @@ 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",
@@ -18,7 +19,7 @@ define([
       invalidElements: "script",
       blockFormats: 'Paragraph=p',
       plugins: "link textcolor colorpicker mailpoet_shortcodes",
-      configurationFilter: function(originalConfig) { return originalConfig; },
+      configurationFilter: function(originalConfig) { return originalConfig; }
     },
     onDomRefresh: function() {
       var that = this;
@@ -76,7 +77,7 @@ define([
           editor.on('blur', function(e) {
             that.view.triggerMethod('text:editor:blur');
           });
-        },
+        }
       }));
     }
   });

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

@@ -53,7 +53,7 @@ define([
       });
 
       CommunicationComponent.getBulkTransformedPosts({
-        blocks: blocks,
+        blocks: blocks
       }).then(_.partial(this.refreshBlocks, models));
     },
     refreshBlocks: function(models, renderedBlocks) {
@@ -65,7 +65,7 @@ define([
           model.trigger('refreshPosts', contents);
         }
       );
-    },
+    }
   });
 
   Module.AutomatedLatestContentBlockModel = base.BlockModel.extend({
@@ -97,14 +97,14 @@ define([
         sortBy: 'newest', // 'newest'|'oldest',
         showDivider: true, // true|false
         divider: {},
-        _container: new (App.getBlockTypeModel('container'))(),
+        _container: new (App.getBlockTypeModel('container'))()
       }, App.getConfig().get('blockDefaults.automatedLatestContent'));
     },
     relations: function() {
       return {
         readMoreButton: App.getBlockTypeModel('button'),
         divider: App.getBlockTypeModel('divider'),
-        _container: App.getBlockTypeModel('container'),
+        _container: App.getBlockTypeModel('container')
       };
     },
     initialize: function() {
@@ -124,7 +124,7 @@ define([
      */
     _scheduleFetchPosts: function() {
       App.getChannel().trigger('automatedLatestContentRefresh');
-    },
+    }
   });
 
   Module.AutomatedLatestContentBlockView = base.BlockView.extend({
@@ -138,15 +138,15 @@ define([
     getTemplate: function() { return templates.automatedLatestContentBlock; },
     regions: {
       toolsRegion: '.mailpoet_tools',
-      postsRegion: '.mailpoet_automated_latest_content_block_posts',
+      postsRegion: '.mailpoet_automated_latest_content_block_posts'
     },
     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',
+      'click .mailpoet_automated_latest_content_block_overlay': 'showSettings'
     }),
     onDragSubstituteBy: function() { return Module.AutomatedLatestContentWidgetView; },
     onRender: function() {
@@ -154,16 +154,16 @@ define([
         renderOptions = {
           disableTextEditor: true,
           disableDragAndDrop: true,
-          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
+          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay')
         };
       this.toolsView = new Module.AutomatedLatestContentBlockToolsView({ model: this.model });
       this.showChildView('toolsRegion', this.toolsView);
       this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
-    },
+    }
   });
 
   Module.AutomatedLatestContentBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.AutomatedLatestContentBlockSettingsView; },
+    getSettingsView: function() { return Module.AutomatedLatestContentBlockSettingsView; }
   });
 
   // Sidebar view container
@@ -192,7 +192,7 @@ define([
         "input .mailpoet_automated_latest_content_categories": _.partial(this.changeField, "categoriesPrecededBy"),
         "input .mailpoet_automated_latest_content_read_more_text": _.partial(this.changeField, "readMoreText"),
         "change .mailpoet_automated_latest_content_sort_by": _.partial(this.changeField, "sortBy"),
-        "click .mailpoet_done_editing": "close",
+        "click .mailpoet_done_editing": "close"
       };
     },
     onRender: function() {
@@ -247,8 +247,8 @@ define([
                 }
               )
             };
-          },
-        },
+          }
+        }
       }).on({
         'select2:select': function(event) {
           var terms = that.model.get('terms');
@@ -261,7 +261,7 @@ define([
           terms.remove(event.params.data);
           // Reset whole model in order for change events to propagate properly
           that.model.set('terms', terms.toJSON());
-        },
+        }
       }).trigger( 'change' );
     },
     toggleDisplayOptions: function(event) {
@@ -282,8 +282,8 @@ define([
         renderOptions: {
           displayFormat: 'subpanel',
           hideLink: true,
-          hideApplyToAll: true,
-        },
+          hideApplyToAll: true
+        }
       })).render();
     },
     showDividerSettings: function(event) {
@@ -292,8 +292,8 @@ define([
         model: this.model.get('divider'),
         renderOptions: {
           displayFormat: 'subpanel',
-          hideApplyToAll: true,
-        },
+          hideApplyToAll: true
+        }
       })).render();
     },
     changeReadMoreType: function(event) {
@@ -356,11 +356,11 @@ define([
       _.each(postTypes, function(type) {
         select.append(jQuery('<option>', {
           value: type.name,
-          text: type.label,
+          text: type.label
         }));
       });
       select.val(selectedValue);
-    },
+    }
   });
 
   Module.AutomatedLatestContentWidgetView = base.WidgetView.extend({
@@ -373,27 +373,28 @@ define([
         },
         onDrop: function(options) {
           options.droppedView.triggerMethod('showSettings');
-        },
+        }
       }
-    },
+    }
   });
 
   App.on('before:start', function(App, options) {
     App.registerBlockType('automatedLatestContent', {
       blockModel: Module.AutomatedLatestContentBlockModel,
-      blockView: Module.AutomatedLatestContentBlockView,
+      blockView: Module.AutomatedLatestContentBlockView
     });
 
     App.registerWidget({
       name: 'automatedLatestContent',
       widgetView: Module.AutomatedLatestContentWidgetView,
-      priority: 97,
+      priority: 97
     });
   });
 
   App.on('start', function(App, options) {
-    App._ALCSupervisor = new Module.ALCSupervisor();
-    App._ALCSupervisor.refresh();
+    var Application = App;
+    Application._ALCSupervisor = new Module.ALCSupervisor();
+    Application._ALCSupervisor.refresh();
   });
 
   return Module;

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

@@ -42,21 +42,21 @@ define([
     },
     getChildren: function() {
       return [];
-    },
+    }
   });
 
   Module.BlockView = AugmentedView.extend({
     regions: {
-      toolsRegion: '> .mailpoet_tools',
+      toolsRegion: '> .mailpoet_tools'
     },
     modelEvents: {
       'change': 'render',
       'delete': 'deleteBlock',
-      'duplicate': 'duplicateBlock',
+      'duplicate': 'duplicateBlock'
     },
     events: {
       "mouseenter": "showTools",
-      "mouseleave": "hideTools",
+      "mouseleave": "hideTools"
     },
     behaviors: {
       DraggableBehavior: {
@@ -79,14 +79,14 @@ define([
             WidgetView.destroy();
             return node;
           }
-        },
+        }
       },
-      HighlightEditingBehavior: {},
+      HighlightEditingBehavior: {}
     },
     templateContext: function() {
       return {
         model: this.model.toJSON(),
-        viewCid: this.cid,
+        viewCid: this.cid
       };
     },
     constructor: function() {
@@ -162,19 +162,19 @@ define([
           easing: easing,
           complete: function() {
             promise.resolve();
-          }.bind(this),
+          }.bind(this)
         }
       ).velocity(
         fadeDirection,
         {
           duration: 250,
           easing: easing,
-          queue: false, // Do not enqueue, trigger animation in parallel
+          queue: false // Do not enqueue, trigger animation in parallel
         }
       );
 
       return promise;
-    },
+    }
   });
 
   Module.BlockToolsView = AugmentedView.extend({
@@ -184,18 +184,18 @@ define([
       "click .mailpoet_delete_block_activate": "showDeletionConfirmation",
       "click .mailpoet_delete_block_cancel": "hideDeletionConfirmation",
       "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: {
       settings: true,
       delete: true,
       duplicate: true,
-      move: true,
+      move: true
     },
     getSettingsView: function() { return Module.BlockSettingsView; },
-    initialize: function(options) {
-      options = options || {};
+    initialize: function(opts) {
+      var options = opts || {};
       if (!_.isUndefined(options.tools)) {
         // Make a new block specific tool config object
         this.tools = jQuery.extend({}, this.tools, options.tools || {});
@@ -209,7 +209,7 @@ define([
       return {
         model: this.model.toJSON(),
         viewCid: this.cid,
-        tools: this.tools,
+        tools: this.tools
       };
     },
     changeSettings: function(options) {
@@ -231,13 +231,13 @@ define([
       event.preventDefault();
       this.model.trigger('duplicate');
       return false;
-    },
+    }
   });
 
   Module.BlockSettingsView = Marionette.View.extend({
     className: 'mailpoet_editor_settings',
     behaviors: {
-      ColorPickerBehavior: {},
+      ColorPickerBehavior: {}
     },
     initialize: function(params) {
       this.model.trigger('startEditing');
@@ -248,7 +248,7 @@ define([
         width: App.getConfig().get('sidepanelWidth'),
         onCancel: function() {
           this.destroy();
-        }.bind(this),
+        }.bind(this)
       };
       this.renderOptions = params.renderOptions || {};
       if (this.renderOptions.displayFormat === 'subpanel') {
@@ -290,7 +290,7 @@ define([
     onBeforeDestroy: function() {
       MailPoet.Modal.close();
       this.model.trigger('stopEditing');
-    },
+    }
   });
 
   Module.WidgetView = Marionette.View.extend({
@@ -301,7 +301,7 @@ define([
           throw "Unsupported operation";
         }
       }
-    },
+    }
   });
 
   return Module;

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

@@ -33,11 +33,11 @@ define([
             fontFamily: 'Arial',
             fontSize: '16px',
             fontWeight: 'normal', // 'normal'|'bold'
-            textAlign: 'center',
-          },
-        },
+            textAlign: 'center'
+          }
+        }
       }, App.getConfig().get('blockDefaults.button'));
-    },
+    }
   });
 
   Module.ButtonBlockView = base.BlockView.extend({
@@ -45,7 +45,7 @@ define([
     getTemplate: function() { return templates.buttonBlock; },
     onDragSubstituteBy: function() { return Module.ButtonWidgetView; },
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
-      ShowSettingsBehavior: {},
+      ShowSettingsBehavior: {}
     }),
     initialize: function() {
       base.BlockView.prototype.initialize.apply(this, arguments);
@@ -57,11 +57,11 @@ define([
     onRender: function() {
       this.toolsView = new Module.ButtonBlockToolsView({ model: this.model });
       this.showChildView('toolsRegion', this.toolsView);
-    },
+    }
   });
 
   Module.ButtonBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.ButtonBlockSettingsView; },
+    getSettingsView: function() { return Module.ButtonBlockSettingsView; }
   });
 
   Module.ButtonBlockSettingsView = base.BlockSettingsView.extend({
@@ -95,13 +95,13 @@ define([
         "input .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
 
         "click .mailpoet_field_button_replace_all_styles": "applyToAll",
-        "click .mailpoet_done_editing": "close",
+        "click .mailpoet_done_editing": "close"
       };
     },
     templateContext: function() {
       return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         availableStyles: App.getAvailableStyles().toJSON(),
-        renderOptions: this.renderOptions,
+        renderOptions: this.renderOptions
       });
     },
     applyToAll: function() {
@@ -127,21 +127,21 @@ define([
         cloneOriginal: true,
         drop: function() {
           return new Module.ButtonBlockModel();
-        },
+        }
       }
-    },
+    }
   });
 
   App.on('before:start', function(App, options) {
     App.registerBlockType('button', {
       blockModel: Module.ButtonBlockModel,
-      blockView: Module.ButtonBlockView,
+      blockView: Module.ButtonBlockView
     });
 
     App.registerWidget({
       name: 'button',
       widgetView: Module.ButtonWidgetView,
-      priority: 92,
+      priority: 92
     });
   });
 

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

@@ -30,12 +30,12 @@ define([
         // TODO: If type has no registered model, use a backup one
         return new Type(block, {parse: true});
       });
-    },
+    }
   });
 
   Module.ContainerBlockModel = base.BlockModel.extend({
     relations: {
-      blocks: BlockCollection,
+      blocks: BlockCollection
     },
     defaults: function() {
       return this._getDefaults({
@@ -43,10 +43,10 @@ define([
         orientation: 'vertical',
         styles: {
           block: {
-            backgroundColor: 'transparent',
-          },
+            backgroundColor: 'transparent'
+          }
         },
-        blocks: new BlockCollection(),
+        blocks: new BlockCollection()
       }, App.getConfig().get('blockDefaults.container'));
     },
     validate: function() {
@@ -60,7 +60,7 @@ define([
       // If container has any blocks - add them to a collection
       if (response.type === 'container' && _.has(response, 'blocks')) {
         response.blocks = new BlockCollection(response.blocks, {
-          parse: true,
+          parse: true
         });
       }
       return response;
@@ -71,7 +71,7 @@ define([
       });
 
       return _.flatten(models);
-    },
+    }
   });
 
   Module.ContainerBlocksView = Marionette.CollectionView.extend({
@@ -100,12 +100,12 @@ define([
       blocks: {
         el: '> .mailpoet_container',
         replaceElement: true
-      },
+      }
     }),
     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'
@@ -137,8 +137,8 @@ define([
           // Attach Draggable only to layout containers and disable it
           // for root and column containers.
           return view.renderOptions.depth === 1;
-        },
-      },
+        }
+      }
     }),
     onDragSubstituteBy: function() {
       // For two and three column layouts display their respective widgets,
@@ -163,8 +163,8 @@ define([
           delete: this.renderOptions.depth === 1,
           duplicate: true,
           move: this.renderOptions.depth === 1,
-          layerSelector: false,
-        },
+          layerSelector: false
+        }
       });
       this.showChildView('toolsRegion', this.toolsView);
       this.showChildView('blocks', new Module.ContainerBlocksView({
@@ -213,7 +213,7 @@ define([
         enableContainerLayer();
       }
       event.stopPropagation();
-    },
+    }
   });
 
   Module.ContainerBlockEmptyView = Marionette.View.extend({
@@ -224,13 +224,13 @@ define([
     templateContext: function() {
       return {
         isRoot: this.renderOptions.depth === 0,
-        emptyContainerMessage: this.renderOptions.emptyContainerMessage || '',
+        emptyContainerMessage: this.renderOptions.emptyContainerMessage || ''
       };
-    },
+    }
   });
 
   Module.ContainerBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.ContainerBlockSettingsView; },
+    getSettingsView: function() { return Module.ContainerBlockSettingsView; }
   });
 
   Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
@@ -238,31 +238,31 @@ define([
     events: function() {
       return {
         "change .mailpoet_field_container_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
-        "click .mailpoet_done_editing": "close",
+        "click .mailpoet_done_editing": "close"
       };
     },
     regions: {
-      columnsSettingsRegion: '.mailpoet_container_columns_settings',
+      columnsSettingsRegion: '.mailpoet_container_columns_settings'
     },
     initialize: function() {
       base.BlockSettingsView.prototype.initialize.apply(this, arguments);
 
       this._columnsSettingsView = new (Module.ContainerBlockColumnsSettingsView)({
-        collection: this.model.get('blocks'),
+        collection: this.model.get('blocks')
       });
     },
     onRender: function() {
       this.showChildView('columnsSettingsRegion', this._columnsSettingsView);
-    },
+    }
   });
 
   Module.ContainerBlockColumnsSettingsView = Marionette.CollectionView.extend({
     childView: function() { return Module.ContainerBlockColumnSettingsView; },
     childViewOptions: function(model, index) {
       return {
-        columnIndex: index,
+        columnIndex: index
       };
-    },
+    }
   });
 
   Module.ContainerBlockColumnSettingsView = Marionette.View.extend({
@@ -273,9 +273,9 @@ define([
     templateContext: function() {
       return {
         model: this.model.toJSON(),
-        columnNumber: this.columnNumber,
+        columnNumber: this.columnNumber
       };
-    },
+    }
   });
 
   Module.OneColumnContainerWidgetView = base.WidgetView.extend({
@@ -288,12 +288,12 @@ define([
           return new Module.ContainerBlockModel({
             orientation: 'horizontal',
             blocks: [
-              new Module.ContainerBlockModel(),
+              new Module.ContainerBlockModel()
             ]
           });
         }
       }
-    },
+    }
   });
 
   Module.TwoColumnContainerWidgetView = base.WidgetView.extend({
@@ -307,12 +307,12 @@ define([
             orientation: 'horizontal',
             blocks: [
               new Module.ContainerBlockModel(),
-              new Module.ContainerBlockModel(),
+              new Module.ContainerBlockModel()
             ]
           });
         }
       }
-    },
+    }
   });
 
   Module.ThreeColumnContainerWidgetView = base.WidgetView.extend({
@@ -327,36 +327,36 @@ define([
             blocks: [
               new Module.ContainerBlockModel(),
               new Module.ContainerBlockModel(),
-              new Module.ContainerBlockModel(),
+              new Module.ContainerBlockModel()
             ]
           });
         }
       }
-    },
+    }
   });
 
   App.on('before:start', function(App, options) {
     App.registerBlockType('container', {
       blockModel: Module.ContainerBlockModel,
-      blockView: Module.ContainerBlockView,
+      blockView: Module.ContainerBlockView
     });
 
     App.registerLayoutWidget({
       name: 'oneColumnLayout',
       priority: 100,
-      widgetView: Module.OneColumnContainerWidgetView,
+      widgetView: Module.OneColumnContainerWidgetView
     });
 
     App.registerLayoutWidget({
       name: 'twoColumnLayout',
       priority: 100,
-      widgetView: Module.TwoColumnContainerWidgetView,
+      widgetView: Module.TwoColumnContainerWidgetView
     });
 
     App.registerLayoutWidget({
       name: 'threeColumnLayout',
       priority: 100,
-      widgetView: Module.ThreeColumnContainerWidgetView,
+      widgetView: Module.ThreeColumnContainerWidgetView
     });
   });
 

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

@@ -24,11 +24,11 @@ define([
             padding: '12px',
             borderStyle: 'solid',
             borderWidth: '1px',
-            borderColor: '#000000',
-          },
-        },
+            borderColor: '#000000'
+          }
+        }
       }, App.getConfig().get('blockDefaults.divider'));
-    },
+    }
   });
 
   Module.DividerBlockView = base.BlockView.extend({
@@ -41,11 +41,11 @@ define([
         resizeHandleSelector: '.mailpoet_resize_handle',
         transformationFunction: function(y) { return y / 2; },
         minLength: 0, // TODO: Move this number to editor configuration
-        modelField: 'styles.block.padding',
+        modelField: 'styles.block.padding'
       },
       ShowSettingsBehavior: {
         ignoreFrom: '.mailpoet_resize_handle'
-      },
+      }
     }, base.BlockView.prototype.behaviors),
     onDragSubstituteBy: function() { return Module.DividerWidgetView; },
     initialize: function() {
@@ -61,7 +61,7 @@ define([
     },
     templateContext: function() {
       return _.extend({
-        totalHeight: parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px',
+        totalHeight: parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px'
       }, base.BlockView.prototype.templateContext.apply(this));
     },
     onRender: function() {
@@ -76,11 +76,11 @@ define([
       this.$('.mailpoet_content').css('padding-top', this.model.get('styles.block.padding'));
       this.$('.mailpoet_content').css('padding-bottom', this.model.get('styles.block.padding'));
       this.$('.mailpoet_resize_handle_text').text(parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px');
-    },
+    }
   });
 
   Module.DividerBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.DividerBlockSettingsView; },
+    getSettingsView: function() { return Module.DividerBlockSettingsView; }
   });
 
   Module.DividerBlockSettingsView = base.BlockSettingsView.extend({
@@ -96,18 +96,18 @@ define([
         "change .mailpoet_field_divider_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
         "change .mailpoet_field_divider_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
         "click .mailpoet_button_divider_apply_to_all": "applyToAll",
-        "click .mailpoet_done_editing": "close",
+        "click .mailpoet_done_editing": "close"
       };
     },
     modelEvents: function() {
       return {
-        'change:styles.block.borderColor': 'repaintDividerStyleOptions',
+        'change:styles.block.borderColor': 'repaintDividerStyleOptions'
       };
     },
     templateContext: function() {
       return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         availableStyles: App.getAvailableStyles().toJSON(),
-        renderOptions: this.renderOptions,
+        renderOptions: this.renderOptions
       });
     },
     changeStyle: function(event) {
@@ -125,7 +125,7 @@ define([
     updateValueAndCall: function(fieldToUpdate, callable, event) {
       this.$(fieldToUpdate).val(jQuery(event.target).val());
       callable(event);
-    },
+    }
   });
 
   Module.DividerWidgetView = base.WidgetView.extend({
@@ -135,20 +135,20 @@ define([
         cloneOriginal: true,
         drop: function() {
           return new Module.DividerBlockModel();
-        },
+        }
       }
-    },
+    }
   });
   App.on('before:start', function(App, options) {
     App.registerBlockType('divider', {
       blockModel: Module.DividerBlockModel,
-      blockView: Module.DividerBlockView,
+      blockView: Module.DividerBlockView
     });
 
     App.registerWidget({
       name: 'divider',
       widgetView: Module.DividerWidgetView,
-      priority: 93,
+      priority: 93
     });
   });
 

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

@@ -19,38 +19,38 @@ define([
         text: '<a href="[link:subscription_unsubscribe_url]">Unsubscribe</a> | <a href="[link:subscription_manage_url]">Manage subscription</a><br /><b>Add your postal address here!</b>',
         styles: {
           block: {
-            backgroundColor: 'transparent',
+            backgroundColor: 'transparent'
           },
           text: {
             fontColor: '#000000',
             fontFamily: 'Arial',
             fontSize: '12px',
-            textAlign: 'center',
+            textAlign: 'center'
           },
           link: {
             fontColor: '#0000ff',
-            textDecoration: 'none',
-          },
-        },
+            textDecoration: 'none'
+          }
+        }
       }, App.getConfig().get('blockDefaults.footer'));
-    },
+    }
   });
 
   Module.FooterBlockView = base.BlockView.extend({
     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',
+      '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'
     }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       TextEditorBehavior: {
         configurationFilter: function(originalSettings) {
           return _.extend({}, originalSettings, {
             mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
-            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
+            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle')
           });
         }
-      },
+      }
     }),
     onDragSubstituteBy: function() { return Module.FooterWidgetView; },
     onRender: function() {
@@ -67,11 +67,11 @@ define([
     onTextEditorBlur: function() {
       this.enableDragging();
       this.enableShowingTools();
-    },
+    }
   });
 
   Module.FooterBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.FooterBlockSettingsView; },
+    getSettingsView: function() { return Module.FooterBlockSettingsView; }
   });
 
   Module.FooterBlockSettingsView = base.BlockSettingsView.extend({
@@ -87,14 +87,14 @@ define([
       },
         "change .mailpoet_field_footer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
         "change .mailpoet_field_footer_alignment": _.partial(this.changeField, "styles.text.textAlign"),
-        "click .mailpoet_done_editing": "close",
+        "click .mailpoet_done_editing": "close"
       };
     },
     templateContext: function() {
       return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
-        availableStyles: App.getAvailableStyles().toJSON(),
+        availableStyles: App.getAvailableStyles().toJSON()
       });
-    },
+    }
   });
 
   Module.FooterWidgetView = base.WidgetView.extend({
@@ -104,21 +104,21 @@ define([
         cloneOriginal: true,
         drop: function() {
           return new Module.FooterBlockModel();
-        },
+        }
       }
-    },
+    }
   });
 
   App.on('before:start', function(App, options) {
     App.registerBlockType('footer', {
       blockModel: Module.FooterBlockModel,
-      blockView: Module.FooterBlockView,
+      blockView: Module.FooterBlockView
     });
 
     App.registerWidget({
       name: 'footer',
       widgetView: Module.FooterWidgetView,
-      priority: 99,
+      priority: 99
     });
   });
 

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

@@ -19,38 +19,38 @@ define([
         text: 'Display problems? <a href="[link:newsletter_view_in_browser_url]">View it in your browser</a>',
         styles: {
           block: {
-            backgroundColor: 'transparent',
+            backgroundColor: 'transparent'
           },
           text: {
             fontColor: '#000000',
             fontFamily: 'Arial',
             fontSize: '12px',
-            textAlign: 'center',
+            textAlign: 'center'
           },
           link: {
             fontColor: '#0000ff',
-            textDecoration: 'underline',
-          },
-        },
+            textDecoration: 'underline'
+          }
+        }
       }, App.getConfig().get('blockDefaults.header'));
-    },
+    }
   });
 
   Module.HeaderBlockView = base.BlockView.extend({
     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',
+      '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'
     }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       TextEditorBehavior: {
         configurationFilter: function(originalSettings) {
           return _.extend({}, originalSettings, {
             mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
-            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
+            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle')
           });
         }
-      },
+      }
     }),
     onDragSubstituteBy: function() { return Module.HeaderWidgetView; },
     onRender: function() {
@@ -67,11 +67,11 @@ define([
     onTextEditorBlur: function() {
       this.enableDragging();
       this.enableShowingTools();
-    },
+    }
   });
 
   Module.HeaderBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.HeaderBlockSettingsView; },
+    getSettingsView: function() { return Module.HeaderBlockSettingsView; }
   });
 
   Module.HeaderBlockSettingsView = base.BlockSettingsView.extend({
@@ -87,14 +87,14 @@ define([
         },
         "change .mailpoet_field_header_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
         "change .mailpoet_field_header_alignment": _.partial(this.changeField, "styles.text.textAlign"),
-        "click .mailpoet_done_editing": "close",
+        "click .mailpoet_done_editing": "close"
       };
     },
     templateContext: function() {
       return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
-        availableStyles: App.getAvailableStyles().toJSON(),
+        availableStyles: App.getAvailableStyles().toJSON()
       });
-    },
+    }
   });
 
   Module.HeaderWidgetView = base.WidgetView.extend({
@@ -104,21 +104,21 @@ define([
         cloneOriginal: true,
         drop: function() {
           return new Module.HeaderBlockModel();
-        },
+        }
       }
-    },
+    }
   });
 
   App.on('before:start', function(App, options) {
     App.registerBlockType('header', {
       blockModel: Module.HeaderBlockModel,
-      blockView: Module.HeaderBlockView,
+      blockView: Module.HeaderBlockView
     });
 
     App.registerWidget({
       name: 'header',
       widgetView: Module.HeaderWidgetView,
-      priority: 98,
+      priority: 98
     });
   });
 

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

@@ -4,8 +4,9 @@
 define([
     'newsletter_editor/App',
     'newsletter_editor/blocks/base',
-    'underscore'
-  ], function(App, BaseBlock, _) {
+    'underscore',
+    'mailpoet'
+  ], function(App, BaseBlock, _, MailPoet) {
 
   "use strict";
 
@@ -25,11 +26,11 @@ define([
         height: '64px',
         styles: {
           block: {
-            textAlign: 'center',
-          },
-        },
+            textAlign: 'center'
+          }
+        }
       }, App.getConfig().get('blockDefaults.image'));
-    },
+    }
   });
 
   Module.ImageBlockView = base.BlockView.extend({
@@ -38,11 +39,11 @@ define([
     onDragSubstituteBy: function() { return Module.ImageWidgetView; },
     templateContext: function() {
       return _.extend({
-        imageMissingSrc: App.getConfig().get('urls.imageMissing'),
+        imageMissingSrc: App.getConfig().get('urls.imageMissing')
       }, base.BlockView.prototype.templateContext.apply(this));
     },
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
-      ShowSettingsBehavior: {},
+      ShowSettingsBehavior: {}
     }),
     onRender: function() {
       this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
@@ -53,14 +54,24 @@ define([
       } else {
         this.$el.removeClass('mailpoet_full_image');
       }
-    },
+    }
   });
 
   Module.ImageBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.ImageBlockSettingsView; },
+    getSettingsView: function() { return Module.ImageBlockSettingsView; }
   });
 
   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 {
@@ -70,7 +81,7 @@ define([
         "change .mailpoet_field_image_full_width": _.partial(this.changeBoolCheckboxField, "fullWidth"),
         "change .mailpoet_field_image_alignment": _.partial(this.changeField, "styles.block.textAlign"),
         "click .mailpoet_field_image_select_another_image": "showMediaManager",
-        "click .mailpoet_done_editing": "close",
+        "click .mailpoet_done_editing": "close"
       };
     },
     initialize: function(options) {
@@ -141,7 +152,7 @@ define([
               // Update user settings when users adjust the
               // attachment display settings.
               displayUserSettings: false
-            }),
+            })
           ]);
 
           if(wp.media.view.settings.post.featuredImageId) {
@@ -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',
@@ -285,12 +297,13 @@ define([
           },
           displaySettings: false,
           button: {
-            text: 'Select',
-          },
+            text: 'Select'
+          }
         }),
         that = this;
+        this._mediaManager = theFrame;
 
-      this._mediaManager.on('insert', function() {
+        this._mediaManager.on('insert', function() {
         // Append media manager image selections to Images tab
         var selection = theFrame.state().get('selection');
         selection.each(function(attachment) {
@@ -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();
@@ -346,7 +359,7 @@ define([
       if (typeof this._mediaManager === 'object') {
         this._mediaManager.remove();
       }
-    },
+    }
   });
 
   ImageWidgetView = base.WidgetView.extend({
@@ -359,22 +372,22 @@ define([
         },
         onDrop: function(options) {
           options.droppedView.triggerMethod('showSettings', { showImageManager: true });
-        },
+        }
       }
-    },
+    }
   });
   Module.ImageWidgetView = ImageWidgetView;
 
   App.on('before:start', function(App, options) {
     App.registerBlockType('image', {
       blockModel: Module.ImageBlockModel,
-      blockView: Module.ImageBlockView,
+      blockView: Module.ImageBlockView
     });
 
     App.registerWidget({
       name: 'image',
       widgetView: Module.ImageWidgetView,
-      priority: 91,
+      priority: 91
     });
   });
 

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

@@ -76,7 +76,7 @@ define([
         divider: {},
         _selectedPosts: [],
         _availablePosts: [],
-        _transformedPosts: new (App.getBlockTypeModel('container'))(),
+        _transformedPosts: new (App.getBlockTypeModel('container'))()
       }, App.getConfig().get('blockDefaults.posts'));
     },
     relations: function() {
@@ -85,7 +85,7 @@ define([
         divider: App.getBlockTypeModel('divider'),
         _selectedPosts: Backbone.Collection,
         _availablePosts: Backbone.Collection,
-        _transformedPosts: App.getBlockTypeModel('container'),
+        _transformedPosts: App.getBlockTypeModel('container')
       };
     },
     initialize: function() {
@@ -172,7 +172,7 @@ define([
       }).fail(function() {
         MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
       });
-    },
+    }
   });
 
   Module.PostsBlockView = base.BlockView.extend({
@@ -180,7 +180,7 @@ define([
     getTemplate: function() { return templates.postsBlock; },
     modelEvents: {}, // Forcefully disable all events
     regions: _.extend({
-      postsRegion: '.mailpoet_posts_block_posts',
+      postsRegion: '.mailpoet_posts_block_posts'
     }, base.BlockView.prototype.regions),
     onDragSubstituteBy: function() { return Module.PostsWidgetView; },
     initialize: function() {
@@ -199,7 +199,7 @@ define([
         renderOptions = {
           disableTextEditor: true,
           disableDragAndDrop: true,
-          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
+          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay')
         };
       this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions }));
     },
@@ -208,27 +208,27 @@ define([
     },
     onBeforeDestroy: function() {
       this.model.stopReplying('blockView', this.notifyAboutSelf, this);
-    },
+    }
   });
 
   Module.PostsBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.PostsBlockSettingsView; },
+    getSettingsView: function() { return Module.PostsBlockSettingsView; }
   });
 
   Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
     getTemplate: function() { return templates.postsBlockSettings; },
     regions: {
       selectionRegion: '.mailpoet_settings_posts_selection',
-      displayOptionsRegion: '.mailpoet_settings_posts_display_options',
+      displayOptionsRegion: '.mailpoet_settings_posts_display_options'
     },
     events: {
       'click .mailpoet_settings_posts_show_display_options': 'switchToDisplayOptions',
       'click .mailpoet_settings_posts_show_post_selection': 'switchToPostSelection',
-      'click .mailpoet_settings_posts_insert_selected': 'insertPosts',
+      'click .mailpoet_settings_posts_insert_selected': 'insertPosts'
     },
     templateContext: function() {
       return {
-        model: this.model.toJSON(),
+        model: this.model.toJSON()
       };
     },
     initialize: function() {
@@ -251,7 +251,7 @@ define([
         onCancel: function() {
           // Self destroy the block if the user closes settings modal
           that.model.destroy();
-        },
+        }
       });
 
       // Inform child views that they have been attached to document
@@ -280,7 +280,7 @@ define([
       this.model.trigger('insertSelectedPosts');
       this.model.destroy();
       this.close();
-    },
+    }
   });
 
   var PostsSelectionCollectionView = Marionette.CollectionView.extend({
@@ -289,14 +289,14 @@ define([
     emptyView: function() { return EmptyPostSelectionSettingsView; },
     childViewOptions: function() {
       return {
-        blockModel: this.blockModel,
+        blockModel: this.blockModel
       };
     },
     initialize: function(options) {
       this.blockModel = options.blockModel;
     },
     events: {
-      'scroll': 'onPostsScroll',
+      'scroll': 'onPostsScroll'
     },
     onPostsScroll: function(event) {
       var $postsBox = jQuery(event.target);
@@ -304,19 +304,19 @@ define([
         // Load more posts if scrolled to bottom
         this.blockModel.trigger('loadMorePosts');
       }
-    },
+    }
   });
 
   var PostSelectionSettingsView = Marionette.View.extend({
     getTemplate: function() { return templates.postSelectionPostsBlockSettings; },
     regions: {
-      posts: '.mailpoet_post_selection_container',
+      posts: '.mailpoet_post_selection_container'
     },
     events: function() {
       return {
         'change .mailpoet_settings_posts_content_type': _.partial(this.changeField, 'contentType'),
         'change .mailpoet_posts_post_status': _.partial(this.changeField, 'postStatus'),
-        'input .mailpoet_posts_search_term': _.partial(this.changeField, 'search'),
+        'input .mailpoet_posts_search_term': _.partial(this.changeField, 'search')
       };
     },
     modelEvents: {
@@ -392,8 +392,8 @@ define([
                 }
               )
             };
-          },
-        },
+          }
+        }
       }).on({
         'select2:select': function(event) {
           var terms = that.model.get('terms');
@@ -406,7 +406,7 @@ define([
           terms.remove(event.params.data);
           // Reset whole model in order for change events to propagate properly
           that.model.set('terms', terms.toJSON());
-        },
+        }
       }).trigger( 'change' );
     },
     changeField: function(field, event) {
@@ -420,28 +420,28 @@ define([
       _.each(postTypes, function(type) {
         select.append(jQuery('<option>', {
           value: type.name,
-          text: type.label,
+          text: type.label
         }));
       });
       select.val(selectedValue);
-    },
+    }
   });
 
   var EmptyPostSelectionSettingsView = Marionette.View.extend({
-    getTemplate: function() { return templates.emptyPostPostsBlockSettings; },
+    getTemplate: function() { return templates.emptyPostPostsBlockSettings; }
   });
 
   var SinglePostSelectionSettingsView = Marionette.View.extend({
     getTemplate: function() { return templates.singlePostPostsBlockSettings; },
     events: function() {
       return {
-        'change .mailpoet_select_post_checkbox': 'postSelectionChange',
+        'change .mailpoet_select_post_checkbox': 'postSelectionChange'
       };
     },
     templateContext: function() {
       return {
         model: this.model.toJSON(),
-        index: this._index,
+        index: this._index
       };
     },
     initialize: function(options) {
@@ -455,7 +455,7 @@ define([
       } else {
         selectedPostsCollection.remove(this.model);
       }
-    },
+    }
   });
 
   var PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
@@ -480,12 +480,12 @@ define([
         "change .mailpoet_posts_show_categories": _.partial(this.changeField, "showCategories"),
         "input .mailpoet_posts_categories": _.partial(this.changeField, "categoriesPrecededBy"),
         "input .mailpoet_posts_read_more_text": _.partial(this.changeField, "readMoreText"),
-        "change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy"),
+        "change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy")
       };
     },
     templateContext: function() {
       return {
-        model: this.model.toJSON(),
+        model: this.model.toJSON()
       };
     },
     showButtonSettings: function(event) {
@@ -495,8 +495,8 @@ define([
         renderOptions: {
           displayFormat: 'subpanel',
           hideLink: true,
-          hideApplyToAll: true,
-        },
+          hideApplyToAll: true
+        }
       })).render();
     },
     showDividerSettings: function(event) {
@@ -505,8 +505,8 @@ define([
         model: this.model.get('divider'),
         renderOptions: {
           displayFormat: 'subpanel',
-          hideApplyToAll: true,
-        },
+          hideApplyToAll: true
+        }
       })).render();
     },
     changeReadMoreType: function(event) {
@@ -560,7 +560,7 @@ define([
         this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden');
       }
       this.changeField('titleFormat', event);
-    },
+    }
   });
 
   Module.PostsWidgetView = base.WidgetView.extend({
@@ -572,19 +572,19 @@ define([
           return new Module.PostsBlockModel({}, { parse: true });
         }
       }
-    },
+    }
   });
 
   App.on('before:start', function(App, options) {
     App.registerBlockType('posts', {
       blockModel: Module.PostsBlockModel,
-      blockView: Module.PostsBlockView,
+      blockView: Module.PostsBlockView
     });
 
     App.registerWidget({
       name: 'posts',
       widgetView: Module.PostsWidgetView,
-      priority: 96,
+      priority: 96
     });
   });
 

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

@@ -30,7 +30,7 @@ define([
         image: App.getAvailableStyles().get('socialIconSets.default.custom'),
         height: '32px',
         width: '32px',
-        text: defaultValues.get('title'),
+        text: defaultValues.get('title')
       };
     },
     initialize: function(options) {
@@ -42,11 +42,11 @@ define([
         this.set({
           link: defaultValues.get('defaultLink'),
           image: iconSet.get(that.get('iconType')),
-          text: defaultValues.get('title'),
+          text: defaultValues.get('title')
         });
       }, this);
       this.on('change', function() { App.getChannel().trigger('autoSave'); });
-    },
+    }
   });
 
   Module.SocialIconCollectionModel = Backbone.Collection.extend({
@@ -59,11 +59,11 @@ define([
       return this._getDefaults({
         type: 'social',
         iconSet: 'default',
-        icons: new Module.SocialIconCollectionModel(),
+        icons: new Module.SocialIconCollectionModel()
       }, App.getConfig().get('blockDefaults.social'));
     },
     relations: {
-      icons: Module.SocialIconCollectionModel,
+      icons: Module.SocialIconCollectionModel
     },
     initialize: function() {
       this.get('icons').on('add remove change', this._iconsChanged, this);
@@ -80,27 +80,27 @@ define([
     },
     _iconsChanged: function() {
       App.getChannel().trigger('autoSave'); 
-    },
+    }
   });
 
   var SocialIconView = Marionette.View.extend({
     tagName: 'span',
     getTemplate: function() { return templates.socialIconBlock; },
     modelEvents: {
-      'change': 'render',
+      'change': 'render'
     },
     templateContext: function() {
       var allIconSets = App.getAvailableStyles().get('socialIconSets');
       return {
         model: this.model.toJSON(),
         allIconSets: allIconSets.toJSON(),
-        imageMissingSrc: App.getConfig().get('urls.imageMissing'),
+        imageMissingSrc: App.getConfig().get('urls.imageMissing')
       };
-    },
+    }
   });
 
   Module.SocialIconCollectionView = Marionette.CollectionView.extend({
-    childView: SocialIconView,
+    childView: SocialIconView
   });
 
   Module.SocialBlockView = base.BlockView.extend({
@@ -113,7 +113,7 @@ define([
       tools: '> .mailpoet_tools'
     },
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
-      ShowSettingsBehavior: {},
+      ShowSettingsBehavior: {}
     }),
     onDragSubstituteBy: function() { return Module.SocialWidgetView; },
     onRender: function() {
@@ -122,11 +122,11 @@ define([
       this.showChildView('icons', new Module.SocialIconCollectionView({
         collection: this.model.get('icons')
       }))
-    },
+    }
   });
 
   Module.SocialBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.SocialBlockSettingsView; },
+    getSettingsView: function() { return Module.SocialBlockSettingsView; }
   });
 
   // Sidebar view container
@@ -134,11 +134,11 @@ define([
     getTemplate: function() { return templates.socialBlockSettings; },
     regions: {
       iconRegion: '#mailpoet_social_icons_selection',
-      stylesRegion: '#mailpoet_social_icons_styles',
+      stylesRegion: '#mailpoet_social_icons_styles'
     },
     events: function() {
       return {
-        "click .mailpoet_done_editing": "close",
+        "click .mailpoet_done_editing": "close"
       };
     },
     initialize: function() {
@@ -162,7 +162,7 @@ define([
         "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_link": this.changeLink,
-        "input .mailpoet_social_icon_field_text": _.partial(this.changeField, "text"),
+        "input .mailpoet_social_icon_field_text": _.partial(this.changeField, "text")
       };
     },
     modelEvents: {
@@ -172,7 +172,7 @@ define([
       },
       'change:text': function() {
         this.$('.mailpoet_social_icon_image').attr('alt', this.model.get('text'));
-      },
+      }
     },
     templateContext: function() {
       var icons = App.getConfig().get('socialIcons'),
@@ -182,7 +182,7 @@ define([
       return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         iconTypes: availableIconTypes,
         currentType: icons.get(this.model.get('iconType')).toJSON(),
-        allIconSets: allIconSets.toJSON(),
+        allIconSets: allIconSets.toJSON()
       });
     },
     deleteIcon: function() {
@@ -197,17 +197,17 @@ define([
     },
     changeField: function(field, event) {
       this.model.set(field, jQuery(event.target).val());
-    },
+    }
   });
 
   SocialBlockSettingsIconCollectionView = Marionette.CollectionView.extend({
     behaviors: {
       SortableBehavior: {
-        items: '> div',
-      },
+        items: '> div'
+      }
     },
     childViewContainer: '#mailpoet_social_icon_selector_contents',
-    childView: SocialBlockSettingsIconView,
+    childView: SocialBlockSettingsIconView
   });
 
   // Select icons section container view
@@ -217,10 +217,10 @@ define([
       'icons': '#mailpoet_social_icon_selector_contents'
     },
     events: {
-      'click .mailpoet_add_social_icon': 'addSocialIcon',
+      'click .mailpoet_add_social_icon': 'addSocialIcon'
     },
     modelEvents: {
-      'change:iconSet': 'render',
+      'change:iconSet': 'render'
     },
     addSocialIcon: function() {
       // Add a social icon with default values
@@ -237,10 +237,10 @@ define([
   SocialBlockSettingsStylesView = Marionette.View.extend({
     getTemplate: function() { return templates.socialSettingsStyles; },
     modelEvents: {
-      'change': 'render',
+      'change': 'render'
     },
     events: {
-      'click .mailpoet_social_icon_set': 'changeSocialIconSet',
+      'click .mailpoet_social_icon_set': 'changeSocialIconSet'
     },
     initialize: function() {
       this.listenTo(this.model.get('icons'), 'add remove change', this.render);
@@ -251,7 +251,7 @@ define([
         activeSet: this.model.get('iconSet'),
         socialIconSets: allIconSets.toJSON(),
         availableSets: _.keys(allIconSets.toJSON()),
-        availableSocialIcons: this.model.get('icons').pluck('iconType'),
+        availableSocialIcons: this.model.get('icons').pluck('iconType')
       };
     },
     changeSocialIconSet: function(event) {
@@ -259,7 +259,7 @@ define([
     },
     onBeforeDestroy: function() {
       this.model.get('icons').off('add remove', this.render, this);
-    },
+    }
   });
 
   Module.SocialWidgetView = base.WidgetView.extend({
@@ -279,7 +279,7 @@ define([
                 image: App.getAvailableStyles().get('socialIconSets.default.facebook'),
                 height: '32px',
                 width: '32px',
-                text: 'Facebook',
+                text: 'Facebook'
               },
               {
                 type: 'socialIcon',
@@ -288,25 +288,25 @@ define([
                 image: App.getAvailableStyles().get('socialIconSets.default.twitter'),
                 height: '32px',
                 width: '32px',
-                text: 'Twitter',
-              },
-            ],
+                text: 'Twitter'
+              }
+            ]
           }, { parse: true });
         }
       }
-    },
+    }
   });
 
   App.on('before:start', function(App, options) {
     App.registerBlockType('social', {
       blockModel: Module.SocialBlockModel,
-      blockView: Module.SocialBlockView,
+      blockView: Module.SocialBlockView
     });
 
     App.registerWidget({
       name: 'social',
       widgetView: Module.SocialWidgetView,
-      priority: 95,
+      priority: 95
     });
   });
 

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

@@ -19,11 +19,11 @@ define([
         styles: {
           block: {
             backgroundColor: 'transparent',
-            height: '40px',
-          },
-        },
+            height: '40px'
+          }
+        }
       }, App.getConfig().get('blockDefaults.spacer'));
-    },
+    }
   });
 
   Module.SpacerBlockView = base.BlockView.extend({
@@ -34,11 +34,11 @@ define([
         elementSelector: '.mailpoet_spacer',
         resizeHandleSelector: '.mailpoet_resize_handle',
         minLength: 20, // TODO: Move this number to editor configuration
-        modelField: 'styles.block.height',
+        modelField: 'styles.block.height'
       },
       ShowSettingsBehavior: {
         ignoreFrom: '.mailpoet_resize_handle'
-      },
+      }
     }, base.BlockView.prototype.behaviors),
     modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
     onDragSubstituteBy: function() { return Module.SpacerWidgetView; },
@@ -58,11 +58,11 @@ define([
     },
     onBeforeDestroy: function() {
       this.stopListening(this.model);
-    },
+    }
   });
 
   Module.SpacerBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.SpacerBlockSettingsView; },
+    getSettingsView: function() { return Module.SpacerBlockSettingsView; }
   });
 
   Module.SpacerBlockSettingsView = base.BlockSettingsView.extend({
@@ -70,9 +70,9 @@ define([
     events: function() {
       return {
         "change .mailpoet_field_spacer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
-        "click .mailpoet_done_editing": "close",
+        "click .mailpoet_done_editing": "close"
       };
-    },
+    }
   });
 
   Module.SpacerWidgetView = base.WidgetView.extend({
@@ -82,21 +82,21 @@ define([
         cloneOriginal: true,
         drop: function() {
           return new Module.SpacerBlockModel();
-        },
+        }
       }
-    },
+    }
   });
 
   App.on('before:start', function(App, options) {
     App.registerBlockType('spacer', {
       blockModel: Module.SpacerBlockModel,
-      blockView: Module.SpacerBlockView,
+      blockView: Module.SpacerBlockView
     });
 
     App.registerWidget({
       name: 'spacer',
       widgetView: Module.SpacerWidgetView,
-      priority: 94,
+      priority: 94
     });
   });
 

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

@@ -16,9 +16,9 @@ define([
     defaults: function() {
       return this._getDefaults({
         type: 'text',
-        text: 'Edit this to insert text',
+        text: 'Edit this to insert text'
       }, App.getConfig().get('blockDefaults.text'));
-    },
+    }
   });
 
   Module.TextBlockView = base.BlockView.extend({
@@ -36,16 +36,16 @@ define([
         configurationFilter: function(originalSettings) {
           return _.extend({}, originalSettings, {
             mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
-            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
+            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle')
           });
         }
-      },
+      }
     }),
     initialize: function(options) {
       base.BlockView.prototype.initialize.apply(this, arguments);
 
       this.renderOptions = _.defaults(options.renderOptions || {}, {
-        disableTextEditor: false,
+        disableTextEditor: false
       });
 
       this.disableTextEditor = this.renderOptions.disableTextEditor;
@@ -55,8 +55,8 @@ define([
       this.toolsView = new Module.TextBlockToolsView({
         model: this.model,
         tools: {
-          settings: false,
-        },
+          settings: false
+        }
       });
       this.showChildView('toolsRegion', this.toolsView);
     },
@@ -70,15 +70,15 @@ define([
     onTextEditorBlur: function() {
       this.enableDragging();
       this.enableShowingTools();
-    },
+    }
   });
 
   Module.TextBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.TextBlockSettingsView; },
+    getSettingsView: function() { return Module.TextBlockSettingsView; }
   });
 
   Module.TextBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.textBlockSettings; },
+    getTemplate: function() { return templates.textBlockSettings; }
   });
 
   Module.TextWidgetView = base.WidgetView.extend({
@@ -88,21 +88,21 @@ define([
         cloneOriginal: true,
         drop: function() {
           return new Module.TextBlockModel();
-        },
+        }
       }
-    },
+    }
   });
 
   App.on('before:start', function(App, options) {
     App.registerBlockType('text', {
       blockModel: Module.TextBlockModel,
-      blockView: Module.TextBlockView,
+      blockView: Module.TextBlockView
     });
 
     App.registerWidget({
       name: 'text',
       widgetView: Module.TextWidgetView,
-      priority: 90,
+      priority: 90
     });
   });
 

assets/js/src/newsletter_editor/communicationsFix.js

@@ -23,8 +23,8 @@
   }
 }(this, function(Marionette, Radio, _) {
   'use strict';
-
-  Marionette.Application.prototype._initChannel = function () {
+  var MarionetteApplication = Marionette.Application;
+  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

@@ -12,8 +12,8 @@ define([
       blockDefaults: {},
       sidepanelWidth: '331px',
       validation: {},
-      urls: {},
-    },
+      urls: {}
+    }
   });
 
   // Global and available styles for access in blocks and their settings
@@ -25,11 +25,12 @@ define([
   };
 
   App.on('before:start', function(App, options) {
+    var Application = App;
     // Expose config methods globally
-    App.getConfig = Module.getConfig;
-    App.setConfig = Module.setConfig;
+    Application.getConfig = Module.getConfig;
+    Application.setConfig = Module.setConfig;
 
-    App.setConfig(options.config);
+    Application.setConfig(options.config);
   });
 
   return Module;

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

@@ -22,7 +22,7 @@ define([
       // Use only whitelisted properties to ensure properties editor
       // doesn't control don't change.
       return _.pick(SuperModel.prototype.toJSON.call(this), this.whitelisted);
-    },
+    }
   });
 
   // Content block view and model handlers for different content types
@@ -48,13 +48,13 @@ define([
   Module.getBody = function() {
     return {
       content: App._contentContainer.toJSON(),
-      globalStyles: App.getGlobalStyles().toJSON(),
+      globalStyles: App.getGlobalStyles().toJSON()
     };
   };
 
   Module.toJSON = function() {
     return _.extend({
-      body: Module.getBody(),
+      body: Module.getBody()
     }, App.getNewsletter().toJSON());
   };
 
@@ -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 : {};
 
@@ -94,7 +96,7 @@ define([
     App._contentContainer = new (App.getBlockTypeModel('container'))(content, {parse: true});
     App._contentContainerView = new (App.getBlockTypeView('container'))({
       model: App._contentContainer,
-      renderOptions: { depth: 0 },
+      renderOptions: { depth: 0 }
     });
 
     App._appView.showChildView('contentRegion', App._contentContainerView);

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

@@ -14,22 +14,31 @@ define([
     getTemplate: function() { return templates.heading; },
     templateContext: function() {
       return {
-        model: this.model.toJSON(),
+        model: this.model.toJSON()
       };
     },
     events: function() {
       return {
         '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) {
       this.model.set(field, jQuery(event.target).val());
-    },
+    }
   });
 
   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

@@ -49,7 +49,7 @@ define([
           MailPoet.Notice.error(
             MailPoet.I18n.t('templateSaveFailed'),
             {
-              scroll: true,
+              scroll: true
             }
           );
         } else {
@@ -67,9 +67,10 @@ define([
 
   // For getting a promise after triggering save event
   Module.saveAndProvidePromise = function(saveResult) {
+    var result = saveResult;
     var promise = Module.save();
     if (saveResult !== undefined) {
-      saveResult.promise = promise;
+      result.promise = promise;
     }
   };
 
@@ -105,7 +106,7 @@ define([
     promise.then(function(thumbnail) {
       var data = _.extend(options || {}, {
         thumbnail: thumbnail.toDataURL('image/jpeg'),
-        body: JSON.stringify(App.getBody()),
+        body: JSON.stringify(App.getBody())
       });
 
       return MailPoet.Ajax.post({
@@ -132,7 +133,7 @@ define([
     ).then(function(thumbnail) {
       var data = _.extend(options || {}, {
         thumbnail: thumbnail.toDataURL('image/jpeg'),
-        body: App.getBody(),
+        body: App.getBody()
       });
       var blob = new Blob(
         [JSON.stringify(data)],
@@ -140,6 +141,9 @@ define([
       );
 
       FileSaver.saveAs(blob, 'template.json');
+      MailPoet.trackEvent('Editor > Template exported', {
+        'MailPoet Free version': window.mailpoet_version
+      });
     });
   };
 
@@ -154,7 +158,7 @@ define([
       'click .mailpoet_save_as_template': 'saveAsTemplate',
       /* Export template */
       'click .mailpoet_save_export': 'toggleExportTemplate',
-      'click .mailpoet_export_template': 'exportTemplate',
+      'click .mailpoet_export_template': 'exportTemplate'
     },
     initialize: function(options) {
       App.getChannel().on('beforeEditorSave', this.beforeSave, this);
@@ -202,7 +206,7 @@ define([
           MailPoet.I18n.t('templateNameMissing'),
           {
             positionAfter: that.$el,
-            scroll: true,
+            scroll: true
           }
         );
       } else if (templateDescription === '') {
@@ -210,27 +214,30 @@ define([
           MailPoet.I18n.t('templateDescriptionMissing'),
           {
             positionAfter: that.$el,
-            scroll: true,
+            scroll: true
           }
         );
       } else {
         Module.saveTemplate({
           name: templateName,
-          description: templateDescription,
+          description: templateDescription
         }).done(function() {
           MailPoet.Notice.success(
             MailPoet.I18n.t('templateSaved'),
             {
               positionAfter: that.$el,
-              scroll: true,
+              scroll: true
             }
           );
+          MailPoet.trackEvent('Editor > Template saved', {
+            'MailPoet Free version': window.mailpoet_version
+          });
         }).fail(function() {
           MailPoet.Notice.error(
             MailPoet.I18n.t('templateSaveFailed'),
             {
               positionAfter: that.$el,
-              scroll: true,
+              scroll: true
             }
           );
         });
@@ -255,7 +262,7 @@ define([
           MailPoet.I18n.t('templateNameMissing'),
           {
             positionAfter: that.$el,
-            scroll: true,
+            scroll: true
           }
         );
       } else if (templateDescription === '') {
@@ -263,13 +270,13 @@ define([
           MailPoet.I18n.t('templateDescriptionMissing'),
           {
             positionAfter: that.$el,
-            scroll: true,
+            scroll: true
           }
         );
       } else {
         Module.exportTemplate({
           name: templateName,
-          description: templateDescription,
+          description: templateDescription
         });
         this.hideExportTemplate();
       }
@@ -311,7 +318,7 @@ define([
     hideValidationError: function() {
       this.$('.mailpoet_save_error').addClass('mailpoet_hidden');
       this.$('.mailpoet_save_next').removeClass('button-disabled');
-    },
+    }
   });
 
   Module.autoSave = function() {
@@ -331,10 +338,10 @@ define([
   Module.beforeExitWithUnsavedChanges = function(e) {
     if (saveTimeout) {
       var message = MailPoet.I18n.t('unsavedChangesWillBeLost');
-      e = e || window.event;
+      var event = e || window.event;
 
-      if (e) {
-        e.returnValue = message;
+      if (event) {
+        event.returnValue = message;
       }
 
       return message;
@@ -342,12 +349,13 @@ define([
   };
 
   App.on('before:start', function(App, options) {
-    App.save = Module.saveAndProvidePromise;
-    App.getChannel().on('autoSave', Module.autoSave);
+    var Application = App;
+    Application.save = Module.saveAndProvidePromise;
+    Application.getChannel().on('autoSave', Module.autoSave);
 
     window.onbeforeunload = Module.beforeExitWithUnsavedChanges;
 
-    App.getChannel().on('save', function(saveResult) { App.save(saveResult); });
+    Application.getChannel().on('save', function(saveResult) { Application.save(saveResult); });
   });
 
   App.on('start', function(App, options) {

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

@@ -30,10 +30,10 @@ define([
       defaults: {
         name: '',
         priority: 100,
-        widgetView: undefined,
-      },
+        widgetView: undefined
+      }
     }),
-    comparator: 'priority',
+    comparator: 'priority'
   }))();
   Module.registerWidget = function(widget) { return Module._contentWidgets.add(widget); };
   Module.getWidgets = function() { return Module._contentWidgets; };
@@ -44,10 +44,10 @@ define([
       defaults: {
         name: '',
         priority: 100,
-        widgetView: undefined,
-      },
+        widgetView: undefined
+      }
     }),
-    comparator: 'priority',
+    comparator: 'priority'
   }))();
   Module.registerLayoutWidget = function(widget) { return Module._layoutWidgets.add(widget); };
   Module.getLayoutWidgets = function() { return Module._layoutWidgets; };
@@ -58,7 +58,7 @@ define([
       contentRegion: '.mailpoet_content_region',
       layoutRegion: '.mailpoet_layout_region',
       stylesRegion: '.mailpoet_styles_region',
-      previewRegion: '.mailpoet_preview_region',
+      previewRegion: '.mailpoet_preview_region'
     },
     events: {
       'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv': function(event) {
@@ -84,11 +84,11 @@ define([
               easing: "easeIn",
               complete: function() {
                 $targetRegion.removeClass('closed');
-              },
+              }
             }
           );
         }
-      },
+      }
     },
     initialize: function(options) {
       jQuery(window)
@@ -104,7 +104,7 @@ define([
       ));
       this.showChildView('stylesRegion', new Module.SidebarStylesView({
         model: App.getGlobalStyles(),
-        availableStyles: App.getAvailableStyles(),
+        availableStyles: App.getAvailableStyles()
       }));
       this.showChildView('previewRegion', new Module.SidebarPreviewView());
     },
@@ -127,13 +127,13 @@ define([
     },
     onDomRefresh: function() {
       this.$el.parent().stick_in_parent({
-        offset_top: 32,
+        offset_top: 32
       });
       this.$el.parent().on('sticky_kit:stick', this.updateHorizontalScroll.bind(this));
       this.$el.parent().on('sticky_kit:unstick', this.updateHorizontalScroll.bind(this));
       this.$el.parent().on('sticky_kit:bottom', this.updateHorizontalScroll.bind(this));
       this.$el.parent().on('sticky_kit:unbottom', this.updateHorizontalScroll.bind(this));
-    },
+    }
   });
 
   /**
@@ -167,7 +167,7 @@ define([
    * Responsible for rendering draggable layout widgets
    */
   Module.SidebarLayoutWidgetsView = Module.SidebarWidgetsView.extend({
-    getTemplate: function() { return templates.sidebarLayout; },
+    getTemplate: function() { return templates.sidebarLayout; }
   });
 
   /**
@@ -176,7 +176,7 @@ define([
   Module.SidebarStylesView = Marionette.View.extend({
     getTemplate: function() { return templates.sidebarStyles; },
     behaviors: {
-      ColorPickerBehavior: {},
+      ColorPickerBehavior: {}
     },
     events: function() {
       return {
@@ -213,13 +213,13 @@ define([
           this.model.set('link.textDecoration', (event.target.checked) ? event.target.value : 'none');
         },
         "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() {
       return {
         model: this.model.toJSON(),
-        availableStyles: this.availableStyles.toJSON(),
+        availableStyles: this.availableStyles.toJSON()
       };
     },
     initialize: function(options) {
@@ -234,14 +234,14 @@ define([
         value = 'transparent';
       }
       this.model.set(field, value);
-    },
+    }
   });
 
   Module.SidebarPreviewView = Marionette.View.extend({
     getTemplate: function() { return templates.sidebarPreview; },
     events: {
       'click .mailpoet_show_preview': 'showPreview',
-      'click #mailpoet_send_preview': 'sendPreview',
+      'click #mailpoet_send_preview': 'sendPreview'
     },
     onBeforeDestroy: function() {
       if (this.previewView) {
@@ -263,7 +263,7 @@ define([
         api_version: window.mailpoet_api_version,
         endpoint: 'newsletters',
         action: 'showPreview',
-        data: json,
+        data: json
       }).always(function() {
         MailPoet.Modal.loading(false);
       }).done(function(response) {
@@ -272,16 +272,23 @@ define([
         });
 
         var view = this.previewView.render();
-
+        this.previewView.$el.css('height', '100%');
+ 
         MailPoet.Modal.popup({
           template: '',
           element: this.previewView.$el,
+          width: '95%',
+          height: '94%',
           title: MailPoet.I18n.t('newsletterPreview'),
           onCancel: function() {
             this.previewView.destroy();
             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(
@@ -296,7 +303,7 @@ define([
       var $emailField = this.$('#mailpoet_preview_to_email');
       var data = {
         subscriber: $emailField.val(),
-        id: App.getNewsletter().get('id'),
+        id: App.getNewsletter().get('id')
       };
 
       if (data.subscriber.length <= 0) {
@@ -304,7 +311,7 @@ define([
           MailPoet.I18n.t('newsletterPreviewEmailMissing'),
           {
             positionAfter: $emailField,
-            scroll: true,
+            scroll: true
           }
         );
         return false;
@@ -323,7 +330,12 @@ define([
         }).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(
@@ -333,30 +345,33 @@ define([
           }
         });
       });
-    },
+    }
   });
 
   Module.NewsletterPreviewView = Marionette.View.extend({
     getTemplate: function() { return templates.newsletterPreview; },
     initialize: function(options) {
       this.previewUrl = options.previewUrl;
-      this.width = App.getConfig().get('newsletterPreview.width');
-      this.height = App.getConfig().get('newsletterPreview.height')
+      this.width = '100%';
+      this.height = '100%';
+      // this.width = App.getConfig().get('newsletterPreview.width');
+      // this.height = App.getConfig().get('newsletterPreview.height')
     },
     templateContext: function() {
       return {
         previewUrl: this.previewUrl,
         width: this.width,
-        height: this.height,
+        height: this.height
       };
     }
   });
 
   App.on('before:start', function(App, options) {
-    App.registerWidget = Module.registerWidget;
-    App.getWidgets = Module.getWidgets;
-    App.registerLayoutWidget = Module.registerLayoutWidget;
-    App.getLayoutWidgets = Module.getLayoutWidgets;
+    var Application = App;
+    Application.registerWidget = Module.registerWidget;
+    Application.getWidgets = Module.getWidgets;
+    Application.registerLayoutWidget = Module.registerLayoutWidget;
+    Application.getLayoutWidgets = Module.getLayoutWidgets;
   });
 
   App.on('start', function(App, options) {
@@ -364,6 +379,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

@@ -13,7 +13,7 @@ define([
       text: {
         fontColor: '#000000',
         fontFamily: 'Arial',
-        fontSize: '16px',
+        fontSize: '16px'
       },
       h1: {
         fontColor: '#111111',
@@ -23,33 +23,33 @@ define([
       h2: {
         fontColor: '#222222',
         fontFamily: 'Tahoma',
-        fontSize: '32px',
+        fontSize: '32px'
       },
       h3: {
         fontColor: '#333333',
         fontFamily: 'Verdana',
-        fontSize: '24px',
+        fontSize: '24px'
       },
       link: {
         fontColor: '#21759B',
-        textDecoration: 'underline',
+        textDecoration: 'underline'
       },
       wrapper: {
-        backgroundColor: '#ffffff',
+        backgroundColor: '#ffffff'
       },
       body: {
-        backgroundColor: '#cccccc',
-      },
+        backgroundColor: '#cccccc'
+      }
     },
     initialize: function() {
       this.on('change', function() { App.getChannel().trigger('autoSave'); });
-    },
+    }
   });
 
   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;
-    App.setGlobalStyles = Module.setGlobalStyles;
-    App.getAvailableStyles = Module.getAvailableStyles;
+    Application.getGlobalStyles = Module.getGlobalStyles;
+    Application.setGlobalStyles = Module.setGlobalStyles;
+    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

@@ -31,7 +31,7 @@ tinymce.PluginManager.add('mailpoet_shortcodes', function(editor, url) {
         if (configShortcodes.hasOwnProperty(segment)) {
           shortcodes.push({
             type: 'label',
-            text: segment,
+            text: segment
           });
 
           for (var i = 0; i < configShortcodes[segment].length; i += 1) {
@@ -51,8 +51,8 @@ tinymce.PluginManager.add('mailpoet_shortcodes', function(editor, url) {
         autoScroll: true,
         title: editor.settings.mailpoet_shortcodes_window_title,
         body: shortcodes,
-        buttons: [],
+        buttons: []
       });
-    },
+    }
   });
 });

assets/js/src/newsletter_editor/widgets/ImageAndTextWidgetView.js

@@ -13,15 +13,15 @@ ImageAndTextTemplateWidgetView = EditorApplication.module('blocks.base').WidgetV
           orientation: 'horizontal',
           blocks: [
             {
-              type: 'image',
+              type: 'image'
             },
             {
               type: 'text',
-              text: 'Some random text',
-            },
-          ],
+              text: 'Some random text'
+            }
+          ]
         }, {parse: true});
-      },
+      }
     }
-  },
+  }
 });

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

@@ -6,16 +6,16 @@ import Badge from './badge.jsx';
 const badges = {
   excellent: {
     name: MailPoet.I18n.t('excellentBadgeName'),
-    tooltipTitle: MailPoet.I18n.t('excellentBadgeTooltip')
+    tooltipTitle: MailPoet.I18n.t('excellentBadgeTooltip'),
   },
   good: {
     name: MailPoet.I18n.t('goodBadgeName'),
-    tooltipTitle: MailPoet.I18n.t('goodBadgeTooltip')
+    tooltipTitle: MailPoet.I18n.t('goodBadgeTooltip'),
   },
   bad: {
     name: MailPoet.I18n.t('badBadgeName'),
-    tooltipTitle: MailPoet.I18n.t('badBadgeTooltip')
-  }
+    tooltipTitle: MailPoet.I18n.t('badBadgeTooltip'),
+  },
 };
 
 const stats = {
@@ -24,7 +24,7 @@ const stats = {
     badgeTypes: [
       'excellent',
       'good',
-      'bad'
+      'bad',
     ],
     tooltipText: MailPoet.I18n.t('openedStatTooltip'),
   },
@@ -33,18 +33,18 @@ const stats = {
     badgeTypes: [
       'excellent',
       'good',
-      'bad'
+      'bad',
     ],
-    tooltipText: MailPoet.I18n.t('clickedStatTooltip')
+    tooltipText: MailPoet.I18n.t('clickedStatTooltip'),
   },
   unsubscribed: {
     badgeRanges: [3, 1, 0],
     badgeTypes: [
       'bad',
       'good',
-      'excellent'
+      'excellent',
     ],
-    tooltipText: MailPoet.I18n.t('unsubscribedStatTooltip')
+    tooltipText: MailPoet.I18n.t('unsubscribedStatTooltip'),
   },
 };
 

assets/js/src/newsletters/breadcrumb.jsx

@@ -3,7 +3,7 @@ define(
     'react',
     'react-router',
     'classnames',
-    'mailpoet'
+    'mailpoet',
   ],
   (
     React,
@@ -21,21 +21,21 @@ define(
             {
               name: 'type',
               label: MailPoet.I18n.t('selectType'),
-              link: '/new'
+              link: '/new',
             },
             {
               name: 'template',
-              label: MailPoet.I18n.t('template')
+              label: MailPoet.I18n.t('template'),
             },
             {
               name: 'editor',
-              label: MailPoet.I18n.t('designer')
+              label: MailPoet.I18n.t('designer'),
             },
             {
               name: 'send',
-              label: MailPoet.I18n.t('send')
-            }
-          ]
+              label: MailPoet.I18n.t('send'),
+            },
+          ],
         };
       },
       render: function () {
@@ -67,7 +67,7 @@ define(
             { steps }
           </p>
         );
-      }
+      },
     });
 
     return Breadcrumb;

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

@@ -16,8 +16,8 @@ const _QueueMixin = {
       endpoint: 'sendingQueue',
       action: 'pause',
       data: {
-        newsletter_id: newsletter.id
-      }
+        newsletter_id: newsletter.id,
+      },
     }).done(() => {
       jQuery('#resume_'+newsletter.id).show();
       jQuery('#pause_'+newsletter.id).hide();
@@ -36,8 +36,8 @@ const _QueueMixin = {
       endpoint: 'sendingQueue',
       action: 'resume',
       data: {
-        newsletter_id: newsletter.id
-      }
+        newsletter_id: newsletter.id,
+      },
     }).done(() => {
       jQuery('#pause_'+newsletter.id).show();
       jQuery('#resume_'+newsletter.id).hide();
@@ -84,7 +84,7 @@ 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)
             }
           </span>
@@ -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>
       );
@@ -286,6 +287,7 @@ const _StatisticsMixin = {
           <Link
             key={ `stats-${newsletter.id}` }
             to={ params.link }
+            onClick={ params.onClick || null }
           >
             {content}
           </Link>
@@ -300,7 +302,7 @@ const _StatisticsMixin = {
         {after_content}
       </div>
     );
-  }
+  },
 };
 
 const _MailerMixin = {
@@ -355,7 +357,7 @@ const _MailerMixin = {
     MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
       endpoint: 'mailer',
-      action: 'resumeSending'
+      action: 'resumeSending',
     }).done(() => {
       MailPoet.Notice.hide('mailpoet_mailer_error');
       MailPoet.Notice.success(MailPoet.I18n.t('mailerSendingResumedNotice'));
@@ -368,7 +370,7 @@ const _MailerMixin = {
         );
       }
     });
-  }
+  },
 };
 
 

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

@@ -13,7 +13,7 @@ import {
   timeOfDayValues,
   weekDayValues,
   monthDayValues,
-  nthWeekDayValues
+  nthWeekDayValues,
 } from 'newsletters/scheduling/common.jsx';
 
 const messages = {
@@ -61,42 +61,42 @@ const messages = {
       ).replace('%$1d', count.toLocaleString());
     }
     MailPoet.Notice.success(message);
-  }
+  },
 };
 
 const columns = [
   {
     name: 'subject',
     label: MailPoet.I18n.t('subject'),
-    sortable: true
+    sortable: true,
   },
   {
     name: 'status',
     label: MailPoet.I18n.t('status'),
-    width: 100
+    width: 100,
   },
   {
     name: 'settings',
-    label: MailPoet.I18n.t('settings')
+    label: MailPoet.I18n.t('settings'),
   },
   {
     name: 'history',
     label: MailPoet.I18n.t('history'),
-    width: 100
+    width: 100,
   },
   {
     name: 'updated_at',
     label: MailPoet.I18n.t('lastModifiedOn'),
-    sortable: true
-  }
+    sortable: true,
+  },
 ];
 
 const bulk_actions = [
   {
     name: 'trash',
     label: MailPoet.I18n.t('moveToTrash'),
-    onSuccess: messages.onTrash
-  }
+    onSuccess: messages.onTrash,
+  },
 ];
 
 const newsletter_actions = [
@@ -108,7 +108,7 @@ const newsletter_actions = [
           {MailPoet.I18n.t('preview')}
         </a>
       );
-    }
+    },
   },
   {
     name: 'edit',
@@ -118,7 +118,7 @@ const newsletter_actions = [
           {MailPoet.I18n.t('edit')}
         </a>
       );
-    }
+    },
   },
   {
     name: 'duplicate',
@@ -129,8 +129,8 @@ const newsletter_actions = [
         endpoint: 'newsletters',
         action: 'duplicate',
         data: {
-          id: newsletter.id
-        }
+          id: newsletter.id,
+        },
       }).done((response) => {
         MailPoet.Notice.success(
           (MailPoet.I18n.t('newsletterDuplicated')).replace(
@@ -146,11 +146,11 @@ const newsletter_actions = [
           );
         }
       });
-    }
+    },
   },
   {
-    name: 'trash'
-  }
+    name: 'trash',
+  },
 ];
 
 const NewsletterListNotification = React.createClass({
@@ -166,8 +166,8 @@ const NewsletterListNotification = React.createClass({
       action: 'setStatus',
       data: {
         id: ~~(e.target.getAttribute('data-id')),
-        status: e.target.value
-      }
+        status: e.target.value,
+      },
     }).done((response) => {
       if (response.data.status === 'active') {
         MailPoet.Notice.success(MailPoet.I18n.t('postNotificationActivated'));
@@ -335,7 +335,7 @@ const NewsletterListNotification = React.createClass({
         />
       </div>
     );
-  }
+  },
 });
 
 module.exports = NewsletterListNotification;

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

@@ -10,7 +10,7 @@ import ListingTabs from 'newsletters/listings/tabs.jsx';
 import {
   QueueMixin,
   StatisticsMixin,
-  MailerMixin
+  MailerMixin,
 } from 'newsletters/listings/mixins.jsx';
 
 const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
@@ -22,21 +22,21 @@ const columns = [
   },
   {
     name: 'status',
-    label: MailPoet.I18n.t('status')
+    label: MailPoet.I18n.t('status'),
   },
   {
     name: 'segments',
-    label: MailPoet.I18n.t('lists')
+    label: MailPoet.I18n.t('lists'),
   },
   {
     name: 'statistics',
     label: MailPoet.I18n.t('statistics'),
-    display: mailpoet_tracking_enabled
+    display: mailpoet_tracking_enabled,
   },
   {
     name: 'sent_at',
     label: MailPoet.I18n.t('sentOn'),
-  }
+  },
 ];
 
 let newsletter_actions = [
@@ -48,8 +48,8 @@ let newsletter_actions = [
           {MailPoet.I18n.t('preview')}
         </a>
       );
-    }
-  }
+    },
+  },
 ];
 
 newsletter_actions = Hooks.applyFilters('mailpoet_newsletters_listings_notification_history_actions', newsletter_actions);
@@ -126,7 +126,7 @@ const NewsletterListNotificationHistory = React.createClass({
         />
       </div>
     );
-  }
+  },
 });
 
 module.exports = NewsletterListNotificationHistory;

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

@@ -10,7 +10,7 @@ import ListingTabs from 'newsletters/listings/tabs.jsx';
 import {
   QueueMixin,
   StatisticsMixin,
-  MailerMixin
+  MailerMixin,
 } from 'newsletters/listings/mixins.jsx';
 
 const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
@@ -60,43 +60,54 @@ const messages = {
       ).replace('%$1d', count.toLocaleString());
     }
     MailPoet.Notice.success(message);
-  }
+  },
 };
 
 const columns = [
   {
     name: 'subject',
     label: MailPoet.I18n.t('subject'),
-    sortable: true
+    sortable: true,
   },
   {
     name: 'status',
-    label: MailPoet.I18n.t('status')
+    label: MailPoet.I18n.t('status'),
   },
   {
     name: 'segments',
-    label: MailPoet.I18n.t('lists')
+    label: MailPoet.I18n.t('lists'),
   },
   {
     name: 'statistics',
     label: MailPoet.I18n.t('statistics'),
-    display: mailpoet_tracking_enabled
+    display: mailpoet_tracking_enabled,
   },
   {
     name: 'sent_at',
     label: MailPoet.I18n.t('sentOn'),
-    sortable: true
-  }
+    sortable: true,
+  },
 ];
 
 const bulk_actions = [
   {
     name: 'trash',
     label: MailPoet.I18n.t('moveToTrash'),
-    onSuccess: messages.onTrash
-  }
+    onSuccess: messages.onTrash,
+  },
 ];
 
+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',
@@ -106,17 +117,12 @@ let newsletter_actions = [
           {MailPoet.I18n.t('preview')}
         </a>
       );
-    }
+    },
   },
   {
     name: 'edit',
-    link: function (newsletter) {
-      return (
-        <a href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }>
-          {MailPoet.I18n.t('edit')}
-        </a>
-      );
-    }
+    label: MailPoet.I18n.t('edit'),
+    onClick: confirmEdit,
   },
   {
     name: 'duplicate',
@@ -127,8 +133,8 @@ let newsletter_actions = [
         endpoint: 'newsletters',
         action: 'duplicate',
         data: {
-          id: newsletter.id
-        }
+          id: newsletter.id,
+        },
       }).done((response) => {
         MailPoet.Notice.success(
           (MailPoet.I18n.t('newsletterDuplicated')).replace(
@@ -144,11 +150,11 @@ let newsletter_actions = [
           );
         }
       });
-    }
+    },
   },
   {
-    name: 'trash'
-  }
+    name: 'trash',
+  },
 ];
 
 newsletter_actions = Hooks.applyFilters('mailpoet_newsletters_listings_standard_actions', newsletter_actions);
@@ -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" />
@@ -222,7 +236,7 @@ const NewsletterListStandard = React.createClass({
         />
       </div>
     );
-  }
+  },
 });
 
 module.exports = NewsletterListStandard;

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

@@ -11,19 +11,19 @@ const ListingTabs = React.createClass({
         {
           name: 'standard',
           label: MailPoet.I18n.t('tabStandardTitle'),
-          link: '/standard'
+          link: '/standard',
         },
         {
           name: 'welcome',
           label: MailPoet.I18n.t('tabWelcomeTitle'),
-          link: '/welcome'
+          link: '/welcome',
         },
         {
           name: 'notification',
           label: MailPoet.I18n.t('tabNotificationTitle'),
-          link: '/notification'
-        }
-      ]
+          link: '/notification',
+        },
+      ],
     };
   },
   render() {
@@ -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>
       );
     });
@@ -47,7 +50,7 @@ const ListingTabs = React.createClass({
         { tabs }
       </h2>
     );
-  }
+  },
 });
 
 module.exports = ListingTabs;

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

@@ -60,42 +60,42 @@ const messages = {
       ).replace('%$1d', count.toLocaleString());
     }
     MailPoet.Notice.success(message);
-  }
+  },
 };
 
 const columns = [
   {
     name: 'subject',
     label: MailPoet.I18n.t('subject'),
-    sortable: true
+    sortable: true,
   },
   {
     name: 'status',
     label: MailPoet.I18n.t('status'),
-    width: 145
+    width: 145,
   },
   {
     name: 'settings',
-    label: MailPoet.I18n.t('settings')
+    label: MailPoet.I18n.t('settings'),
   },
   {
     name: 'statistics',
     label: MailPoet.I18n.t('statistics'),
-    display: mailpoet_tracking_enabled
+    display: mailpoet_tracking_enabled,
   },
   {
     name: 'updated_at',
     label: MailPoet.I18n.t('lastModifiedOn'),
-    sortable: true
-  }
+    sortable: true,
+  },
 ];
 
 const bulk_actions = [
   {
     name: 'trash',
     label: MailPoet.I18n.t('moveToTrash'),
-    onSuccess: messages.onTrash
-  }
+    onSuccess: messages.onTrash,
+  },
 ];
 
 let newsletter_actions = [
@@ -107,7 +107,7 @@ let newsletter_actions = [
           {MailPoet.I18n.t('preview')}
         </a>
       );
-    }
+    },
   },
   {
     name: 'edit',
@@ -117,11 +117,11 @@ let newsletter_actions = [
           {MailPoet.I18n.t('edit')}
         </a>
       );
-    }
+    },
   },
   {
-    name: 'trash'
-  }
+    name: 'trash',
+  },
 ];
 
 newsletter_actions = Hooks.applyFilters('mailpoet_newsletters_listings_welcome_notification_actions', newsletter_actions);
@@ -139,8 +139,8 @@ const NewsletterListWelcome = React.createClass({
       action: 'setStatus',
       data: {
         id: ~~(e.target.getAttribute('data-id')),
-        status: e.target.value
-      }
+        status: e.target.value,
+      },
     }).done((response) => {
       if (response.data.status === 'active') {
         MailPoet.Notice.success(MailPoet.I18n.t('welcomeEmailActivated'));
@@ -313,7 +313,7 @@ const NewsletterListWelcome = React.createClass({
         />
       </div>
     );
-  }
+  },
 });
 
 module.exports = NewsletterListWelcome;

assets/js/src/newsletters/newsletters.jsx

@@ -21,7 +21,7 @@ const history = useRouterHistory(createHashHistory)({ queryKey: false });
 const App = React.createClass({
   render() {
     return this.props.children;
-  }
+  },
 });
 
 const container = document.getElementById('newsletters_container');

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

@@ -8,7 +8,7 @@ const _timeDelayValues = {
   'immediate': MailPoet.I18n.t('delayImmediately'),
   'hours': MailPoet.I18n.t('delayHoursAfter'),
   'days': MailPoet.I18n.t('delayDaysAfter'),
-  'weeks': MailPoet.I18n.t('delayWeeksAfter')
+  'weeks': MailPoet.I18n.t('delayWeeksAfter'),
 };
 
 const _intervalValues = {
@@ -16,7 +16,7 @@ const _intervalValues = {
   'weekly': MailPoet.I18n.t('weekly'),
   'monthly': MailPoet.I18n.t('monthly'),
   'nthWeekDay': MailPoet.I18n.t('monthlyEvery'),
-  'immediately': MailPoet.I18n.t('immediately')
+  'immediately': MailPoet.I18n.t('immediately'),
 };
 
 // notification emails
@@ -25,7 +25,7 @@ const TIME_STEP_SECONDS = 3600;
 const numberOfTimeSteps = SECONDS_IN_DAY / TIME_STEP_SECONDS;
 
 const _timeOfDayValues = _.object(_.map(
-  _.times(numberOfTimeSteps,(step) => {
+  _.times(numberOfTimeSteps, (step) => {
     return step * TIME_STEP_SECONDS;
   }), (seconds) => {
   const date = new Date(null);
@@ -42,7 +42,7 @@ const _weekDayValues = {
   3: MailPoet.I18n.t('wednesday'),
   4: MailPoet.I18n.t('thursday'),
   5: MailPoet.I18n.t('friday'),
-  6: MailPoet.I18n.t('saturday')
+  6: MailPoet.I18n.t('saturday'),
 };
 
 const NUMBER_OF_DAYS_IN_MONTH = 28;
@@ -54,7 +54,7 @@ const _monthDayValues = _.object(
     const labels = {
       0: MailPoet.I18n.t('first'),
       1: MailPoet.I18n.t('second'),
-      2: MailPoet.I18n.t('third')
+      2: MailPoet.I18n.t('third'),
     };
     let label;
     if (labels[day] !== undefined) {
@@ -71,7 +71,7 @@ const _nthWeekDayValues = {
   '1': MailPoet.I18n.t('first'),
   '2': MailPoet.I18n.t('second'),
   '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

@@ -8,7 +8,8 @@ define(
     'newsletters/send/standard.jsx',
     'newsletters/send/notification.jsx',
     'newsletters/send/welcome.jsx',
-    'newsletters/breadcrumb.jsx'
+    'newsletters/breadcrumb.jsx',
+    'help-tooltip.jsx',
   ],
   (
     React,
@@ -19,12 +20,13 @@ define(
     StandardNewsletterFields,
     NotificationNewsletterFields,
     WelcomeNewsletterFields,
-    Breadcrumb
+    Breadcrumb,
+    HelpTooltip
   ) => {
 
     const NewsletterSend = React.createClass({
       contextTypes: {
-        router: React.PropTypes.object.isRequired
+        router: React.PropTypes.object.isRequired,
       },
       getInitialState: function () {
         return {
@@ -68,18 +70,18 @@ define(
           endpoint: 'newsletters',
           action: 'get',
           data: {
-            id: id
-          }
+            id: id,
+          },
         }).done((response) => {
           this.setState({
             loading: false,
             item: response.data,
-            fields: this.getFieldsByNewsletter(response.data)
+            fields: this.getFieldsByNewsletter(response.data),
           });
         }).fail(() => {
           this.setState({
             loading: false,
-            item: {}
+            item: {},
           }, () => {
             this.context.router.push('/new');
           });
@@ -103,21 +105,30 @@ define(
                   action: 'setStatus',
                   data: {
                     id: this.props.params.id,
-                    status: 'active'
-                  }
+                    status: 'active',
+                  },
                 }).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:
@@ -126,8 +137,8 @@ define(
                   endpoint: 'sendingQueue',
                   action: 'add',
                   data: {
-                    newsletter_id: this.props.params.id
-                  }
+                    newsletter_id: this.props.params.id,
+                  },
                 }).done((response) => {
                   // redirect to listing based on newsletter type
                   this.context.router.push(`/${ this.state.item.type || '' }`);
@@ -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,12 +227,13 @@ 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
         const IGNORED_NEWSLETTER_PROPERTIES = [
           'preheader', 'body', 'created_at', 'deleted_at', 'hash',
-          'status', 'updated_at', 'type'
+          'status', 'updated_at', 'type',
         ];
         const newsletterData = _.omit(
             data,
@@ -210,11 +264,21 @@ define(
         item[field] = e.target.value;
 
         this.setState({
-          item: item
+          item: item,
         });
         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,20 +287,29 @@ 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">
-                <input
+                {
+                  isPaused ?
+                  <input
+                  className="button button-primary"
+                  type="button"
+                  onClick={ this.handleResume }
+                  value={MailPoet.I18n.t('resume')} />
+                  :
+                  <input
                   className="button button-primary"
                   type="button"
                   onClick={ this.handleSend }
                   value={MailPoet.I18n.t('send')}
                   {...this.getSendButtonOptions()}
                   />
+                }
                 &nbsp;
                 <input
                   className="button button-secondary"
@@ -251,10 +324,14 @@ define(
                   {MailPoet.I18n.t('goBackToDesign')}
                 </a>.
               </p>
+              <HelpTooltip
+                tooltip={MailPoet.I18n.t('helpTooltipSendEmail')}
+                tooltipId="helpTooltipSendEmail"
+              />
             </Form>
           </div>
         );
-      }
+      },
     });
 
     return NewsletterSend;

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

@@ -3,7 +3,7 @@ define(
     'mailpoet',
     'wp-js-hooks',
     'newsletters/types/notification/scheduling.jsx',
-    'underscore'
+    'underscore',
   ],
   (
     MailPoet,
@@ -20,8 +20,8 @@ define(
         type: 'text',
         validation: {
           'data-parsley-required': true,
-          'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError')
-        }
+          'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError'),
+        },
       },
       {
         name: 'options',
@@ -55,8 +55,8 @@ define(
         },
         validation: {
           'data-parsley-required': true,
-          'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError')
-        }
+          'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError'),
+        },
       },
       {
         name: 'sender',
@@ -68,8 +68,8 @@ define(
             type: 'text',
             placeholder: MailPoet.I18n.t('senderNamePlaceholder'),
             validation: {
-              'data-parsley-required': true
-            }
+              'data-parsley-required': true,
+            },
           },
           {
             name: 'sender_address',
@@ -77,10 +77,10 @@ define(
             placeholder: MailPoet.I18n.t('senderAddressPlaceholder'),
             validation: {
               'data-parsley-required': true,
-              'data-parsley-type': 'email'
-            }
-          }
-        ]
+              'data-parsley-type': 'email',
+            },
+          },
+        ],
       },
       {
         name: 'reply-to',
@@ -91,15 +91,15 @@ define(
           {
             name: 'reply_to_name',
             type: 'text',
-            placeholder: MailPoet.I18n.t('replyToNamePlaceholder')
+            placeholder: MailPoet.I18n.t('replyToNamePlaceholder'),
           },
           {
             name: 'reply_to_address',
             type: 'text',
-            placeholder: MailPoet.I18n.t('replyToAddressPlaceholder')
-          }
-        ]
-      }
+            placeholder: MailPoet.I18n.t('replyToAddressPlaceholder'),
+          },
+        ],
+      },
     ];
 
     fields = Hooks.applyFilters('mailpoet_newsletters_3rd_step_fields', fields);
@@ -110,7 +110,7 @@ define(
       },
       getSendButtonOptions: function () {
         return {
-          value: MailPoet.I18n.t('activate')
+          value: MailPoet.I18n.t('activate'),
         };
       },
     };

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;
@@ -37,7 +39,7 @@ define(
         MailPoet.I18n.t('september'),
         MailPoet.I18n.t('october'),
         MailPoet.I18n.t('november'),
-        MailPoet.I18n.t('december')
+        MailPoet.I18n.t('december'),
       ],
       monthNamesShort: [
         MailPoet.I18n.t('januaryShort'),
@@ -51,7 +53,7 @@ define(
         MailPoet.I18n.t('septemberShort'),
         MailPoet.I18n.t('octoberShort'),
         MailPoet.I18n.t('novemberShort'),
-        MailPoet.I18n.t('decemberShort')
+        MailPoet.I18n.t('decemberShort'),
       ],
       dayNames: [
         MailPoet.I18n.t('sunday'),
@@ -60,7 +62,7 @@ define(
         MailPoet.I18n.t('wednesday'),
         MailPoet.I18n.t('thursday'),
         MailPoet.I18n.t('friday'),
-        MailPoet.I18n.t('saturday')
+        MailPoet.I18n.t('saturday'),
       ],
       dayNamesShort: [
         MailPoet.I18n.t('sundayShort'),
@@ -69,7 +71,7 @@ define(
         MailPoet.I18n.t('wednesdayShort'),
         MailPoet.I18n.t('thursdayShort'),
         MailPoet.I18n.t('fridayShort'),
-        MailPoet.I18n.t('saturdayShort')
+        MailPoet.I18n.t('saturdayShort'),
       ],
       dayNamesMin: [
         MailPoet.I18n.t('sundayMin'),
@@ -78,18 +80,19 @@ define(
         MailPoet.I18n.t('wednesdayMin'),
         MailPoet.I18n.t('thursdayMin'),
         MailPoet.I18n.t('fridayMin'),
-        MailPoet.I18n.t('saturdayMin')
+        MailPoet.I18n.t('saturdayMin'),
       ],
     };
 
     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;
-        this.props.onChange(event);
+        changeEvent.target.value = storageDate;
+        this.props.onChange(changeEvent);
       },
       componentDidMount: function () {
         const $element = jQuery(this.refs.dateInput);
@@ -100,13 +103,13 @@ define(
             // Transform string format to Date object
             return MailPoet.Date.toDate(value, {
               parseFormat: dateDisplayFormat,
-              format: format
+              format: format,
             });
           };
           jQuery.datepicker.formatDate = function (format, value) {
             // Transform Date object to string format
             const newValue = MailPoet.Date.format(value, {
-              format: format
+              format: format,
             });
             return newValue;
           };
@@ -138,13 +141,13 @@ define(
       getDisplayDate: function (date) {
         return MailPoet.Date.format(date, {
           parseFormat: this.props.storageFormat,
-          format: this.props.displayFormat
+          format: this.props.displayFormat,
         });
       },
       getStorageDate: function (date) {
         return MailPoet.Date.format(date, {
           parseFormat: this.props.displayFormat,
-          format: this.props.storageFormat
+          format: this.props.storageFormat,
         });
       },
       render: function () {
@@ -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,13 +184,14 @@ define(
           <select
             name={this.props.name || 'time'}
             value={this.props.value}
+            disabled={this.props.disabled}
             onChange={this.props.onChange}
             {...this.props.validation}
           >
             {options}
           </select>
         );
-      }
+      },
     });
 
     const DateTime = React.createClass({
@@ -219,7 +224,7 @@ define(
             target: {
               name: this.props.name || '',
               value: this.getDateTime(),
-            }
+            },
           });
         }
       },
@@ -235,15 +240,17 @@ 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>
         );
-      }
+      },
     });
 
     const StandardScheduling = React.createClass({
@@ -252,7 +259,7 @@ define(
           this.props.item[this.props.field.name] || {},
           {
             isScheduled: '0',
-            scheduledAt: defaultDateTime
+            scheduledAt: defaultDateTime,
           }
         );
       },
@@ -264,13 +271,14 @@ define(
         return this.props.onValueChange({
           target: {
             name: this.props.field.name,
-            value: _.extend({}, oldValue, newValue)
-          }
+            value: _.extend({}, oldValue, newValue),
+          },
         });
       },
       handleCheckboxChange: function (event) {
-        event.target.value = this.refs.isScheduled.checked ? '1' : '0';
-        return this.handleValueChange(event);
+        const changeEvent = 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} />
 
@@ -325,8 +334,8 @@ define(
         type: 'text',
         validation: {
           'data-parsley-required': true,
-          'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError')
-        }
+          'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError'),
+        },
       },
       {
         name: 'segments',
@@ -354,8 +363,8 @@ define(
         },
         validation: {
           'data-parsley-required': true,
-          'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError')
-        }
+          'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError'),
+        },
       },
       {
         name: 'sender',
@@ -367,8 +376,8 @@ define(
             type: 'text',
             placeholder: MailPoet.I18n.t('senderNamePlaceholder'),
             validation: {
-              'data-parsley-required': true
-            }
+              'data-parsley-required': true,
+            },
           },
           {
             name: 'sender_address',
@@ -376,10 +385,10 @@ define(
             placeholder: MailPoet.I18n.t('senderAddressPlaceholder'),
             validation: {
               'data-parsley-required': true,
-              'data-parsley-type': 'email'
-            }
-          }
-        ]
+              'data-parsley-type': 'email',
+            },
+          },
+        ],
       },
       {
         name: 'reply-to',
@@ -390,21 +399,21 @@ define(
           {
             name: 'reply_to_name',
             type: 'text',
-            placeholder: MailPoet.I18n.t('replyToNamePlaceholder')
+            placeholder: MailPoet.I18n.t('replyToNamePlaceholder'),
           },
           {
             name: 'reply_to_address',
             type: 'text',
-            placeholder: MailPoet.I18n.t('replyToAddressPlaceholder')
-          }
-        ]
+            placeholder: MailPoet.I18n.t('replyToAddressPlaceholder'),
+          },
+        ],
       },
       {
         name: 'options',
         label: MailPoet.I18n.t('scheduleIt'),
         type: 'reactComponent',
         component: StandardScheduling,
-      }
+      },
     ];
 
     fields = Hooks.applyFilters('mailpoet_newsletters_3rd_step_fields', fields);
@@ -414,20 +423,20 @@ define(
         return fields;
       },
       getSendButtonOptions: function (newsletter) {
-        newsletter = newsletter || {};
+        const newsletterOptions = newsletter || {};
 
         const isScheduled = (
-          typeof newsletter.options === 'object'
-          && newsletter.options.isScheduled === '1'
+          typeof newsletterOptions.options === 'object'
+          && newsletterOptions.options.isScheduled === '1'
         );
         const options = {
           value: (isScheduled
             ? MailPoet.I18n.t('schedule')
-            : MailPoet.I18n.t('send'))
+            : MailPoet.I18n.t('send')),
         };
 
-        if (newsletter.status === 'sent'
-            || newsletter.status === 'sending') {
+        if (newsletterOptions.status === 'sent'
+            || newsletterOptions.status === 'sending') {
           options['disabled'] = 'disabled';
         }
 

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

@@ -2,7 +2,7 @@ define(
   [
     'mailpoet',
     'wp-js-hooks',
-    'newsletters/types/welcome/scheduling.jsx'
+    'newsletters/types/welcome/scheduling.jsx',
   ],
   (
     MailPoet,
@@ -19,8 +19,8 @@ define(
         type: 'text',
         validation: {
           'data-parsley-required': true,
-          'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError')
-        }
+          'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError'),
+        },
       },
       {
         name: 'options',
@@ -38,8 +38,8 @@ define(
             type: 'text',
             placeholder: MailPoet.I18n.t('senderNamePlaceholder'),
             validation: {
-              'data-parsley-required': true
-            }
+              'data-parsley-required': true,
+            },
           },
           {
             name: 'sender_address',
@@ -47,10 +47,10 @@ define(
             placeholder: MailPoet.I18n.t('senderAddressPlaceholder'),
             validation: {
               'data-parsley-required': true,
-              'data-parsley-type': 'email'
-            }
-          }
-        ]
+              'data-parsley-type': 'email',
+            },
+          },
+        ],
       },
       {
         name: 'reply-to',
@@ -61,15 +61,15 @@ define(
           {
             name: 'reply_to_name',
             type: 'text',
-            placeholder: MailPoet.I18n.t('replyToNamePlaceholder')
+            placeholder: MailPoet.I18n.t('replyToNamePlaceholder'),
           },
           {
             name: 'reply_to_address',
             type: 'text',
-            placeholder: MailPoet.I18n.t('replyToAddressPlaceholder')
-          }
-        ]
-      }
+            placeholder: MailPoet.I18n.t('replyToAddressPlaceholder'),
+          },
+        ],
+      },
     ];
 
     fields = Hooks.applyFilters('mailpoet_newsletters_3rd_step_fields', fields);
@@ -80,7 +80,7 @@ define(
       },
       getSendButtonOptions: function () {
         return {
-          value: MailPoet.I18n.t('activate')
+          value: MailPoet.I18n.t('activate'),
         };
       },
     };

assets/js/src/newsletters/templates.jsx

@@ -5,7 +5,8 @@ define(
     'mailpoet',
     'react-router',
     'classnames',
-    'newsletters/breadcrumb.jsx'
+    '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)) {
@@ -30,7 +33,7 @@ define(
           api_version: window.mailpoet_api_version,
           endpoint: 'newsletterTemplates',
           action: 'save',
-          data: template
+          data: template,
         }).always(() => {
           MailPoet.Modal.loading(false);
         }).done((response) => {
@@ -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"
@@ -86,7 +96,7 @@ define(
       getInitialState: function () {
         return {
           loading: false,
-          templates: []
+          templates: [],
         };
       },
       componentDidMount: function () {
@@ -112,13 +122,13 @@ define(
                     MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
                   description:
                     MailPoet.I18n.t('mailpoetGuideTemplateDescription'),
-                  readonly: "1"
-                }
+                  readonly: "1",
+                },
               ];
             }
             this.setState({
               templates: response.data,
-              loading: false
+              loading: false,
             });
           }
         }).fail((response) => {
@@ -138,14 +148,19 @@ 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',
           action: 'save',
           data: {
             id: this.props.params.id,
-            body: body
-          }
+            body: body,
+          },
         }).done((response) => {
           // TODO: Move this URL elsewhere
           window.location = 'admin.php?page=mailpoet-newsletter-editor&id=' + response.data.id;
@@ -172,8 +187,8 @@ define(
             endpoint: 'newsletterTemplates',
             action: 'delete',
             data: {
-              id: template.id
-            }
+              id: template.id,
+            },
           }).done(() => {
             this.getTemplates();
           }).fail((response) => {
@@ -192,7 +207,7 @@ define(
         MailPoet.Modal.popup({
           title: template.name,
           template: '<div class="mailpoet_boxes_preview" style="background-color: {{ body.globalStyles.body.backgroundColor }}"><img src="{{ thumbnail }}" /></div>',
-          data: template
+          data: template,
         });
       },
       handleTemplateImport: function () {
@@ -272,7 +287,7 @@ define(
             <ImportTemplate onImport={this.handleTemplateImport} />
           </div>
         );
-      }
+      },
     });
 
     return NewsletterTemplates;

assets/js/src/newsletters/types.jsx

@@ -4,7 +4,7 @@ define(
     'mailpoet',
     'wp-js-hooks',
     'react-router',
-    'newsletters/breadcrumb.jsx'
+    'newsletters/breadcrumb.jsx',
   ],
   (
     React,
@@ -15,14 +15,22 @@ define(
   ) => {
     const NewsletterTypes = React.createClass({
       contextTypes: {
-        router: React.PropTypes.object.isRequired
+        router: React.PropTypes.object.isRequired,
       },
       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',
@@ -30,7 +38,7 @@ define(
           data: {
             type: type,
             subject: MailPoet.I18n.t('draftNewsletterTitle'),
-          }
+          },
         }).done((response) => {
           this.context.router.push(`/template/${response.data.id}`);
         }).fail((response) => {
@@ -54,7 +62,7 @@ define(
                   {MailPoet.I18n.t('create')}
                 </a>
               );
-            }.bind(this)()
+            }.bind(this)(),
           },
           {
             'id': 'welcome',
@@ -68,7 +76,7 @@ define(
                   </a>
                 </div>
               );
-            }()
+            }(),
           },
           {
             'id': 'notification',
@@ -80,8 +88,8 @@ define(
                   {MailPoet.I18n.t('setUp')}
                 </a>
               );
-            }.bind(this)()
-          }
+            }.bind(this)(),
+          },
         ];
 
         types = Hooks.applyFilters('mailpoet_newsletters_types', types, this);
@@ -114,7 +122,7 @@ define(
             </ul>
           </div>
         );
-      }
+      },
     });
 
     return NewsletterTypes;

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

@@ -5,7 +5,7 @@ define(
     'react-router',
     'mailpoet',
     'newsletters/types/notification/scheduling.jsx',
-    'newsletters/breadcrumb.jsx'
+    'newsletters/breadcrumb.jsx',
   ],
   (
     _,
@@ -24,7 +24,7 @@ define(
 
     const NewsletterNotification = React.createClass({
       contextTypes: {
-        router: React.PropTypes.object.isRequired
+        router: React.PropTypes.object.isRequired,
       },
       getInitialState: function () {
         return {
@@ -34,7 +34,7 @@ define(
             weekDay: 1,
             monthDay: 0,
             nthWeekDay: 1,
-          }
+          },
         };
       },
       handleValueChange: function (event) {

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

@@ -6,32 +6,32 @@ import {
   timeOfDayValues,
   weekDayValues,
   monthDayValues,
-  nthWeekDayValues
+  nthWeekDayValues,
 } from 'newsletters/scheduling/common.jsx';
 
 const intervalField = {
   name: 'intervalType',
-  values: intervalValues
+  values: intervalValues,
 };
 
 const timeOfDayField = {
   name: 'timeOfDay',
-  values: timeOfDayValues
+  values: timeOfDayValues,
 };
 
 const weekDayField = {
   name: 'weekDay',
-  values: weekDayValues
+  values: weekDayValues,
 };
 
 const monthDayField = {
   name: 'monthDay',
-  values: monthDayValues
+  values: monthDayValues,
 };
 
 const nthWeekDayField = {
   name: 'nthWeekDay',
-  values: nthWeekDayValues
+  values: nthWeekDayValues,
 };
 
 const NotificationScheduling = React.createClass({
@@ -47,8 +47,8 @@ const NotificationScheduling = React.createClass({
     return this.props.onValueChange({
       target: {
         name: this.props.field.name,
-        value: _.extend({}, oldValue, newValue)
-      }
+        value: _.extend({}, oldValue, newValue),
+      },
     });
   },
   handleIntervalChange: function (event) {
@@ -137,7 +137,7 @@ const NotificationScheduling = React.createClass({
         {timeOfDaySelection}
       </div>
     );
-  }
+  },
 });
 
 module.exports = NotificationScheduling;