Updates changelog & bumps up release version to 3.0.0-rc.2.0.2

Removes unused properties from the object used to display post types in editor [MAILPOET-1086]

.circle_ci/fake-sendmail.rb

@@ -1,8 +0,0 @@
-#!/usr/bin/ruby
-path = "/tmp"
-Dir.mkdir(path) if !File.exists?(path)
-File.open("#{path}/mailpoet-#{Time.now.to_f}.txt", "w") do |f|
-    sleep 5
-    f.puts ARGV.inspect
-    $stdin.each_line { |line| f.puts line }
-end

.circle_ci/mailpoet_php.ini

@@ -1,3 +0,0 @@
-; For Unix only.  You may supply arguments as well (default: "sendmail -t -i").
-; http://php.net/sendmail-path
-sendmail_path = /home/ubuntu/mailpoet/.circle_ci/fake-sendmail.rb

.circleci/apache/mailpoet.loc.conf

@@ -3,11 +3,11 @@ Listen 8080
 <VirtualHost *:8080>
   UseCanonicalName Off
   ServerName mailpoet.loc
-  DocumentRoot /home/ubuntu/mailpoet/wordpress
+  DocumentRoot /home/circleci/mailpoet/wordpress
   DirectoryIndex index.php
   LogLevel notice
 
-  <Directory /home/ubuntu/mailpoet/wordpress>
+  <Directory /home/circleci/mailpoet/wordpress>
     Require all granted
   </Directory>
 </VirtualHost>

.circleci/config.yml

@@ -0,0 +1,137 @@
+version: 2
+jobs:
+  qa_js_php5:
+    working_directory: /home/circleci/mailpoet
+    docker:
+      - image: circleci/php:5.6.30-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 php5
+      - save_cache:
+          key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
+          paths:
+            - vendor
+      - save_cache:
+          key: npm-{{ checksum "package.json" }}
+          paths:
+            - node_modules
+      - run:
+          name: "QA Scripts"
+          command: ./do qa
+      - run:
+          name: "Preparing test results folder"
+          command: mkdir test-results
+      - run:
+          name: "JS tests"
+          command: |
+            mkdir test-results/mocha
+            ./do t:j test-results/mocha/junit.xml
+      - run:
+          name: "PHP Unit tests"
+          command: |
+            WP_TEST_PATH="/home/circleci/mailpoet/wordpress" ./do t:u --xml
+      - 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/fake-sendmail.php

@@ -0,0 +1,17 @@
+#!/usr/local/bin/php
+<?php
+$path = "/tmp/fake-mailer";
+if(!file_exists($path)) {
+  mkdir($path);
+}
+$filename = $path . '/mailpoet-' . microtime(true) . '.txt';
+$file_handle = fopen($filename, "w");
+
+$call_arguments = print_r($argv, true) . "\n";
+fwrite($file_handle, $call_arguments);
+
+while($line = fgets(STDIN)) {
+  fwrite($file_handle, $line);
+}
+
+fclose($file_handle);

.circleci/mailpoet_php.ini

@@ -0,0 +1,9 @@
+; For Unix only.  You may supply arguments as well (default: "sendmail -t -i").
+; http://php.net/sendmail-path
+sendmail_path = /usr/local/bin/fake-sendmail.php
+
+[Date]
+; Defines the default timezone used by the date functions
+; http://php.net/date.timezone
+date.timezone = UTC
+

.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

@@ -9,12 +9,6 @@
   },
   "rules": {
     "import/no-amd": 0,
-
-
-
-
-
-    "comma-dangle": 0,
     "space-before-function-paren": 0,
     "prefer-arrow-callback": 0,
     "no-undef": 0,
@@ -25,33 +19,26 @@
     "guard-for-in": 0,
     "no-prototype-builtins": 0,
     "no-restricted-syntax": 0,
-    "newline-per-chained-call": 0,
     "no-useless-concat": 0,
     "no-multi-spaces": 0,
     "no-nested-ternary": 0,
-    "semi-spacing": 0,
     "no-sequences": 0,
     "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,
     "computed-property-spacing": 0,
     "no-plusplus": 0,
     "array-bracket-spacing": 0,
-    "lines-around-directive": 0,
     "no-unreachable": 0,
     "default-case": 0,
     "no-lonely-if": 0,
@@ -60,9 +47,7 @@
     "no-mixed-operators": 0,
     "eqeqeq": 0,
     "space-in-parens": 0,
-    "semi": 0,
     "max-len": 0,
-    "no-multi-assign": 0,
     "no-trailing-spaces": 0,
     "global-require": 0,
     "no-throw-literal": 0,
@@ -77,7 +62,6 @@
     "one-var": 0,
     "camelcase": 0,
     "spaced-comment": 0,
-    "quotes": 0,
     "padded-blocks": 0,
     "object-curly-spacing": 0,
     "strict": 0,
@@ -87,13 +71,10 @@
     "no-unused-vars": 0,
     "object-shorthand": 0,
     "new-parens": 0,
-    "no-param-reassign": 0,
     "keyword-spacing": 0,
     "eol-last": 0,
     "dot-notation": 0,
-    "linebreak-style": 0,
     "indent": 0,
-    "quote-props": 0,
     "prefer-template": 0,
     "func-names": 0
   }

.eslintrc.es6.json

@@ -11,9 +11,8 @@
     }
   },
   "rules": {
+    "comma-dangle": ["error", "always-multiline"],
     "import/no-amd": 0,
-
-
     "react/no-multi-comp": 0,
     "react/sort-comp": 0,
     "react/jsx-max-props-per-line": 0,
@@ -34,40 +33,24 @@
     "react/jsx-curly-spacing": 0,
     "react/no-did-mount-set-state": 0,
     "react/prefer-stateless-function": 0,
-
     "jsx-a11y/label-has-for": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/alt-text": 0,
-
-    "comma-dangle": 0,
-    "prefer-arrow-callback": 0,
     "func-names": 0,
-    "space-before-function-paren": 0,
     "object-shorthand": 0,
     "no-bitwise": 0,
     "arrow-body-style": 0,
     "prefer-template": 0,
-    "eol-last": 0,
-    "no-unused-vars": 0,
-    "no-plusplus": 0,
-    "semi": 0,
     "keyword-spacing": 0,
     "default-case": 0,
-    "quote-props": 0,
-    "indent": 0,
-    "prefer-const": 0,
-    "arrow-parens": 0,
     "array-callback-return": 0,
     "consistent-return": 0,
     "no-unreachable": 0,
-    "no-extra-semi": 0,
     "import/no-unresolved": 0,
     "import/extensions": 0,
     "import/no-extraneous-dependencies": 0,
     "camelcase": 0,
     "template-curly-spacing": 0,
-    "quotes": 0,
-    "radix": 0,
     "eqeqeq": 0,
     "no-lonely-if": 0,
     "space-unary-ops": 0,
@@ -76,33 +59,27 @@
     "no-multi-spaces": 0,
     "class-methods-use-this": 0,
     "key-spacing": 0,
-    "no-multiple-empty-lines": 0,
     "space-in-parens": 0,
     "no-case-declarations": 0,
     "array-bracket-spacing": 0,
-    "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,
     "one-var-declaration-per-line": 0,
     "no-script-url": 0,
     "wrap-iife": 0,
-    "no-var": 0,
     "vars-on-top": 0,
     "space-infix-ops": 0,
     "no-irregular-whitespace": 0,
     "padded-blocks": 0,
     "no-underscore-dangle": 0,
-    "object-curly-spacing": 0,
     "no-undef": 0
   }
 }

.eslintrc.tests.json

@@ -9,37 +9,25 @@
   },
   "rules": {
     "import/no-amd": 0,
-
-
-
     "no-undef": 0,
     "one-var": 0,
     "indent": 0,
-    "linebreak-style": 0,
     "no-whitespace-before-property": 0,
-    "object-property-newline": 0,
     "global-require": 0,
-    "semi": 0,
     "keyword-spacing": 0,
     "no-bitwise": 0,
-    "no-multi-assign": 0,
-    "newline-per-chained-call": 0,
     "no-spaced-func": 0,
     "func-call-spacing": 0,
     "max-len": 0,
     "space-unary-ops": 0,
-    "quotes": 0,
     "no-unused-vars": 0,
     "no-unused-expressions": 0,
     "no-underscore-dangle": 0,
-    "quote-props": 0,
     "no-shadow": 0,
     "padded-blocks": 0,
-    "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

@@ -79,7 +79,7 @@ class RoboFile extends \Robo\Tasks {
 
   function compileJs($opts = ['env' => null]) {
     $env = ($opts['env']) ?
-      sprintf('NODE_ENV="%s"', $opts['env']) :
+      sprintf('./node_modules/cross-env/dist/bin/cross-env.js NODE_ENV="%s"', $opts['env']) :
       null;
     return $this->_exec($env . ' ./node_modules/webpack/bin/webpack.js --bail');
   }
@@ -154,9 +154,8 @@ class RoboFile extends \Robo\Tasks {
 
   function testUnit($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
 
-    $command = 'vendor/bin/codecept run unit -f '.(($opts['file']) ? $opts['file'] : '');
+    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml -f '.(($opts['file']) ? $opts['file'] : '');
 
     if($opts['xml']) {
       $command .= ' --xml';
@@ -166,9 +165,8 @@ class RoboFile extends \Robo\Tasks {
 
   function testCoverage($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
     $command = join(' ', array(
-      'vendor/bin/codecept run',
+      'vendor/bin/codecept run unit -c codeception.unit.yml ',
       (($opts['file']) ? $opts['file'] : ''),
       '--coverage',
       ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
@@ -199,16 +197,26 @@ class RoboFile extends \Robo\Tasks {
     return $this->_exec($command);
   }
 
-  function testDebug() {
+  function testDebug($opts=['file' => null, 'xml' => false]) {
-    $this->_exec('vendor/bin/codecept build');
     $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');
+    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
-    return $this->_exec('vendor/bin/codecept run -g failed');
+    return $this->_exec('vendor/bin/codecept run -c codeception.unit.yml -g failed');
   }
 
   function qa() {
@@ -235,14 +243,25 @@ class RoboFile extends \Robo\Tasks {
     } else {
       $severityFlag = '-n';
     }
-    return $this->_exec(
+    return $this->collectionBuilder()
-      './vendor/bin/phpcs '.
+      ->taskExec(
-      '--standard=./tasks/code_sniffer/MailPoet '.
+        './vendor/bin/phpcs '.
-      '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
+        '--standard=./tasks/code_sniffer/MailPoet '.
-      './lib/Util/pQuery/*,./lib/Config/PopulatorData/Templates/* '.
+        '--runtime-set testVersion 5.3-7.0 '.
-      'lib/ '.
+        '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
-      $severityFlag
+        './lib/Util/pQuery/*,./lib/Config/PopulatorData/Templates/* '.
-    );
+        'lib/ '.
+        $severityFlag
+      )
+      ->taskExec(
+        './vendor/bin/phpcs '.
+        '--standard=./tasks/code_sniffer/MailPoet '.
+        '--runtime-set testVersion 5.4-7.0 '.
+        '--ignore=./tests/unit/_bootstrap.php '.
+        'tests/unit/ '.
+        $severityFlag
+      )
+      ->run();
   }
 
   function svnCheckout() {
@@ -275,8 +294,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
@@ -404,4 +424,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/components/dragAndDrop.styl

@@ -62,3 +62,9 @@ $draggable-widget-z-index = 2
   background-color: $primary-active-color
   box-shadow(inset 1px 2px 1px $primary-inset-shadow-color)
   color: $white-color
+
+.mailpoet_droppable_block
+  cursor: move
+
+  &.mailpoet_ignore_drag
+    cursor: auto

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

@@ -18,6 +18,7 @@
 .mailpoet_settings_posts_display_options
 .mailpoet_settings_posts_selection
   animation-slide-open-downwards()
+  overflow-x: hidden
 
 .mailpoet_settings_posts_show_display_options,
 .mailpoet_settings_posts_show_post_selection
@@ -26,7 +27,12 @@
 
 .mailpoet_post_selection_container
   margin-top: 20px
-  margin-bottom: 20px
+  margin-bottom: 0
+
+.mailpoet_post_scroll_container
+  overflow-y: scroll
+  overflow-x: hidden
+  max-height: 400px
 
 .mailpoet_settings_posts_single_post
   border-radius(1px)
@@ -45,3 +51,6 @@
   .mailpoet_select_post_checkbox
     margin-left: 10px
     margin-right: 8px
+
+.mailpoet_post_selection_loading
+  color: #999

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

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

@@ -9,15 +9,25 @@
   // sending methods
   .mailpoet_sending_methods
     margin 25px 0 0 0
-    li
+    display flex
-      float left
+    flex-direction row
-      position relative
+    justify-content flex-start
-      padding 15px 15px 0 15px
+    > li
+      flex-grow 1
+      flex-shrink 1
+      display flex
+      flex-direction column
+      flex-basis 0
       margin 0 25px 25px 0
-      width 300px
-      height 300px
       border 1px solid #dedede
       background-color #fff
+      max-width 500px
+      .mailpoet_sending_method_description
+        padding: 25px
+        flex-grow 1
+        flex-shrink 0
+    > li:last-child
+      margin-right 0
     h3
       text-align center
       height 54px
@@ -25,12 +35,12 @@
     .mailpoet_description
       font-size 14px
     .mailpoet_status
+      display flex
+      flex-direction row
+      justify-content space-between
+      align-items center
       background-color #2f2f2f
       color #fff
-      position absolute
-      bottom 0
-      left 0
-      right 0
       text-overflow ellipsis
       padding 15px
       span
@@ -43,23 +53,20 @@
           visibility visible
       #mailpoet_mta_activate
         visibility hidden
-    .mailpoet_actions
-      bottom 15px
-      color #fff
-      padding 0
-      position absolute
-      right 15px
-      .button-secondary
-        margin 0 -6px -4px 0
 
-  // premium key
+  .tooltip.dashicons.dashicons-editor-help
-  .mailpoet_key
+    line-height: 1.4
-    &_valid
+
-      &::before
+  ul.sending-method-benefits
-        content '✔ '
+    list-style-type: none
-    &_invalid
+    margin-bottom: 2em
-      &::before
+    margin-top: 2em
-        content: '✗ '
+
+  .mailpoet_success_item::before
+    content '✔ '
+
+  .mailpoet_error_item::before
+    content '✗ '
 
   // responsive
   @media screen and (max-width: 782px)
@@ -67,8 +74,10 @@
       width auto
 
     .mailpoet_sending_methods
-      li
+      flex-flow: row wrap
-        float none
+      justify-content: space-around
-        width auto
+      > li
         margin-right 0
+        flex-basis auto
+
 

assets/js/src/admin.js

@@ -1,12 +1,12 @@
-define('admin', [
+define('admin', [
-    'jquery'
+    'jquery'
-  ],
+  ],
-  function(jQuery) {
+  function(jQuery) {
-    jQuery(function($) {
+    jQuery(function($) {
-      // dom ready
+      // dom ready
-      $(function() {
+      $(function() {
-
+
-      });
+      });
-    });
+    });
-  }
+  }
-);
+);

assets/js/src/ajax.js

@@ -1,74 +1,86 @@
-define('ajax', ['mailpoet', 'jquery', 'underscore'], function(MailPoet, jQuery, _) {
+function requestFailed(errorMessage, xhr) {
-  'use strict';
+  if (xhr.responseJSON) {
-  MailPoet.Ajax = {
+    return xhr.responseJSON;
-      version: 0.5,
+  }
-      options: {},
+  var message = errorMessage.replace('%d', xhr.status);
-      defaults: {
+  return {
-        url: null,
+    errors: [
-        api_version: null,
+      {
-        endpoint: null,
+        message: message
-        action: null,
+      }
-        token: null,
+    ]
-        data: {}
+  };
-      },
+}
-      post: function(options) {
+
-        return this.request('post', options);
+define('ajax', ['mailpoet', 'jquery', 'underscore'], function(mp, jQuery, _) {
-      },
+  var MailPoet = mp;
-      init: function(options) {
+
-        // merge options
+  MailPoet.Ajax = {
-        this.options = jQuery.extend({}, this.defaults, options);
+      version: 0.5,
-
+      options: {},
-        // set default url
+      defaults: {
-        if(this.options.url === null) {
+        url: null,
-          this.options.url = ajaxurl;
+        api_version: null,
-        }
+        endpoint: null,
-
+        action: null,
-        // set default token
+        token: null,
-        if(this.options.token === null) {
+        data: {}
-          this.options.token = window.mailpoet_token;
+      },
-        }
+      post: function(options) {
-      },
+        return this.request('post', options);
-      getParams: function() {
+      },
-        return {
+      init: function(options) {
-          action: 'mailpoet',
+        // merge options
-          api_version: this.options.api_version,
+        this.options = jQuery.extend({}, this.defaults, options);
-          token: this.options.token,
+
-          endpoint: this.options.endpoint,
+        // set default url
-          method: this.options.action,
+        if(this.options.url === null) {
-          data: this.options.data || {}
+          this.options.url = ajaxurl;
-        }
+        }
-      },
+
-      request: function(method, options) {
+        // set default token
-        // set options
+        if(this.options.token === null) {
-        this.init(options);
+          this.options.token = window.mailpoet_token;
-
+        }
-        // set request params
+      },
-        var params = this.getParams();
+      getParams: function() {
-        var deferred = jQuery.Deferred();
+        return {
-
+          action: 'mailpoet',
-        // remove null values from the data object
+          api_version: this.options.api_version,
-        if (_.isObject(params.data)) {
+          token: this.options.token,
-          params.data = _.pick(params.data, function(value) {
+          endpoint: this.options.endpoint,
-            return (value !== null)
+          method: this.options.action,
-          })
+          data: this.options.data || {}
-        }
+        };
-
+      },
-        // ajax request
+      request: function(method, options) {
-        deferred = jQuery.post(
+        // set options
-          this.options.url,
+        this.init(options);
-          params,
+
-          null,
+        // set request params
-          'json'
+        var params = this.getParams();
-        ).then(function(data) {
+
-          return data;
+        // remove null values from the data object
-        }, function(xhr) {
+        if (_.isObject(params.data)) {
-          return xhr.responseJSON;
+          params.data = _.pick(params.data, function(value) {
-        });
+            return (value !== null);
-
+          });
-        // clear options
+        }
-        this.options = {};
+
-
+        // ajax request
-        return deferred;
+        var deferred = jQuery.post(
-      }
+          this.options.url,
-  };
+          params,
-});
+          null,
+          'json'
+        ).then(function(data) {
+          return data;
+        }, _.partial(requestFailed, MailPoet.I18n.t('ajaxFailedErrorMessage')));
+
+        // clear options
+        this.options = {};
+
+        return deferred;
+      }
+  };
+});

assets/js/src/analytics_event.js

@@ -18,13 +18,14 @@
 var eventsCache = [];
 
 function track(name, data){
-  if (typeof window.mixpanel.track !== "function") {
+  if (typeof window.mixpanel.track !== 'function') {
     window.mixpanel.init(window.mixpanelTrackingId);
   }
   window.mixpanel.track(name, data);
 }
 
-function exportMixpanel(MailPoet) {
+function exportMixpanel(mp) {
+  var MailPoet = mp;
   MailPoet.forceTrackEvent = track;
 
   if (window.mailpoet_analytics_enabled) {
@@ -37,13 +38,13 @@ function exportMixpanel(MailPoet) {
 function trackCachedEvents() {
   eventsCache.map(function (event) {
     if (window.mailpoet_analytics_enabled || event.forced) {
-      window.mixpanel.track(event.name, event.data)
+      window.mixpanel.track(event.name, event.data);
     }
   });
 }
 
 function initializeMixpanelWhenLoaded() {
-  if (typeof window.mixpanel === "object") {
+  if (typeof window.mixpanel === 'object') {
     exportMixpanel(MailPoet);
     trackCachedEvents();
   } else {
@@ -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) {
+    init: function (opts) {
-      options = options || {};
+      var options = opts || {};
 
       // set UTC offset
       if (
@@ -39,16 +41,16 @@ define('date',
 
       return this;
     },
-    format: function(date, options) {
+    format: function(date, opts) {
-      options = options || {};
+      var options = opts || {};
       this.init(options);
 
-      var date = Moment(date, this.convertFormat(options.parseFormat));
+      var momentDate = Moment(date, this.convertFormat(options.parseFormat));
-      if (options.offset === 0) date = date.utc();
+      if (options.offset === 0) momentDate = momentDate.utc();
-      return date.format(this.convertFormat(this.options.format));
+      return momentDate.format(this.convertFormat(this.options.format));
     },
-    toDate: function(date, options) {
+    toDate: function(date, opts) {
-      options = options || {};
+      var options = opts || {};
       this.init(options);
 
       return Moment(date, this.convertFormat(options.parseFormat)).toDate();
@@ -143,7 +145,8 @@ define('date',
       var convertedFormat = [];
       var escapeToken = false;
 
-      for(var index = 0, token = ''; token = format.charAt(index); index++){
+      for(var index = 0, token = ''; format.charAt(index); index += 1){
+        token = format.charAt(index);
         if (escapeToken === true) {
           convertedFormat.push('['+token+']');
           escapeToken = false;

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

@@ -1,15 +1,15 @@
 define([
-  'react'
+  'react',
 ],
-function(
+(
   React
-) {
+) => {
   const FormFieldCheckbox = React.createClass({
-    onValueChange: function(e) {
+    onValueChange: function (e) {
       e.target.value = this.refs.checkbox.checked ? '1' : '0';
       return this.props.onValueChange(e);
     },
-    render: function() {
+    render: function () {
       if (this.props.field.values === undefined) {
         return false;
       }
@@ -42,8 +42,8 @@ function(
           { options }
         </div>
       );
-    }
+    },
   });
 
   return FormFieldCheckbox;
-});
+});

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

@@ -1,10 +1,10 @@
 define([
   'react',
   'moment',
-], function(
+], (
   React,
   Moment
-) {
+) => {
   class FormFieldDateYear extends React.Component {
     render() {
       const yearsRange = 100;
@@ -17,7 +17,7 @@ define([
       }
 
       const currentYear = Moment().year();
-      for (let i = currentYear; i >= currentYear - yearsRange; i--) {
+      for (let i = currentYear; i >= currentYear - yearsRange; i -= 1) {
         years.push((
           <option
             key={ i }
@@ -47,7 +47,7 @@ define([
         ));
       }
 
-      for (let i = 1; i <= 12; i++) {
+      for (let i = 1; i <= 12; i += 1) {
         months.push((
           <option
             key={ i }
@@ -77,7 +77,7 @@ define([
         ));
       }
 
-      for (let i = 1; i <= 31; i++) {
+      for (let i = 1; i <= 31; i += 1) {
         days.push((
           <option
             key={ i }
@@ -104,13 +104,13 @@ define([
       this.state = {
         year: '',
         month: '',
-        day: ''
+        day: '',
-      }
+      };
     }
     componentDidMount() {
       this.extractDateParts();
     }
-    componentDidUpdate(prevProps, prevState) {
+    componentDidUpdate(prevProps) {
       if (
         (this.props.item !== undefined && prevProps.item !== undefined)
         && (this.props.item.id !== prevProps.item.id)
@@ -132,7 +132,7 @@ define([
       this.setState({
         year: dateTime.format('YYYY'),
         month: dateTime.format('M'),
-        day: dateTime.format('D')
+        day: dateTime.format('D'),
       });
     }
     formatValue() {
@@ -143,30 +143,30 @@ define([
       switch(dateType) {
         case 'year_month_day':
           value = {
-            'year': this.state.year,
+            year: this.state.year,
-            'month': this.state.month,
+            month: this.state.month,
-            'day': this.state.day
+            day: this.state.day,
           };
-        break;
+          break;
 
         case 'year_month':
           value = {
-            'year': this.state.year,
+            year: this.state.year,
-            'month': this.state.month
+            month: this.state.month,
           };
-        break;
+          break;
 
         case 'month':
           value = {
-            'month': this.state.month
+            month: this.state.month,
           };
-        break;
+          break;
 
         case 'year':
           value = {
-            'year': this.state.year
+            year: this.state.year,
           };
-        break;
+          break;
       }
 
       return value;
@@ -181,16 +181,16 @@ define([
         field = matches[1];
         property = matches[2];
 
-        let value = ~~(e.target.value);
+        const value = ~~(e.target.value);
 
         this.setState({
-          [`${property}`]: value
+          [`${property}`]: value,
         }, () => {
           this.props.onValueChange({
             target: {
               name: field,
-              value: this.formatValue()
+              value: this.formatValue(),
-            }
+            },
           });
         });
       }
@@ -201,7 +201,7 @@ define([
       const dateType = this.props.field.params.date_type;
       const dateSelects = dateFormats[dateType][0].split('/');
 
-      const fields = dateSelects.map(type => {
+      const fields = dateSelects.map((type) => {
         switch(type) {
           case 'YYYY':
             return (<FormFieldDateYear
@@ -212,7 +212,7 @@ define([
               year={ this.state.year }
               placeholder={ this.props.field.year_placeholder }
             />);
-          break;
+            break;
 
           case 'MM':
             return (<FormFieldDateMonth
@@ -224,7 +224,7 @@ define([
               monthNames={ monthNames }
               placeholder={ this.props.field.month_placeholder }
             />);
-          break;
+            break;
 
           case 'DD':
             return (<FormFieldDateDay
@@ -235,9 +235,9 @@ define([
               day={ this.state.day }
               placeholder={ this.props.field.day_placeholder }
             />);
-          break;
+            break;
         }
-       });
+      });
 
       return (
         <div>
@@ -245,7 +245,7 @@ define([
         </div>
       );
     }
-  };
+  }
 
   return FormFieldDate;
-});
+});

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

@@ -8,7 +8,7 @@ define([
   'form/fields/selection.jsx',
   'form/fields/date.jsx',
 ],
-function(
+(
   React,
   FormFieldText,
   FormFieldTextarea,
@@ -17,54 +17,55 @@ function(
   FormFieldCheckbox,
   FormFieldSelection,
   FormFieldDate
-) {
+) => {
-  var FormField = React.createClass({
+  const FormField = React.createClass({
-    renderField: function(data, inline = false) {
+    renderField: function (data, inline = false) {
-      var description = false;
+      let description = false;
       if(data.field.description) {
         description = (
           <p className="description">{ data.field.description }</p>
         );
       }
 
-      var field = false;
+      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;
+          break;
 
         case 'textarea':
           field = (<FormFieldTextarea {...data} />);
-        break;
+          break;
 
         case 'select':
           field = (<FormFieldSelect {...data} />);
-        break;
+          break;
 
         case 'radio':
           field = (<FormFieldRadio {...data} />);
-        break;
+          break;
 
         case 'checkbox':
           field = (<FormFieldCheckbox {...data} />);
-        break;
+          break;
 
         case 'selection':
           field = (<FormFieldSelection {...data} />);
-        break;
+          break;
 
         case 'date':
           field = (<FormFieldDate {...data} />);
-        break;
+          break;
 
         case 'reactComponent':
           field = (<data.field.component {...data} />);
-        break;
+          break;
       }
 
       if(inline === true) {
@@ -83,23 +84,23 @@ function(
         );
       }
     },
-    render: function() {
+    render: function () {
-      var field = false;
+      let field = false;
 
       if(this.props.field['fields'] !== undefined) {
-        field = this.props.field.fields.map(function(subfield, index) {
+        field = this.props.field.fields.map((subfield, index) => {
           return this.renderField({
             index: index,
             field: subfield,
             item: this.props.item,
-            onValueChange: this.props.onValueChange || false
+            onValueChange: this.props.onValueChange || false,
           });
-        }.bind(this));
+        });
       } else {
         field = this.renderField(this.props);
       }
 
-      var tip = false;
+      let tip = false;
       if(this.props.field.tip) {
         tip = (
           <p className="description">{ this.props.field.tip }</p>
@@ -121,7 +122,7 @@ function(
           </td>
         </tr>
       );
-    }
+    },
   });
 
   return FormField;

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

@@ -1,11 +1,11 @@
 define([
-  'react'
+  'react',
 ],
-function(
+(
   React
-) {
+) => {
   const FormFieldRadio = React.createClass({
-    render: function() {
+    render: function () {
       if (this.props.field.values === undefined) {
         return false;
       }
@@ -34,8 +34,8 @@ function(
           { options }
         </div>
       );
-    }
+    },
   });
 
   return FormFieldRadio;
-});
+});

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

@@ -1,5 +1,5 @@
-import React from 'react'
+import React from 'react';
-import _ from 'underscore'
+import _ from 'underscore';
 
 const FormFieldSelect = React.createClass({
   render() {
@@ -33,12 +33,12 @@ const FormFieldSelect = React.createClass({
         _.map(
           _.sortBy(
             _.pairs(this.props.field.values),
-            (item) => sortBy(item[0], item[1])
+            item => sortBy(item[0], item[1])
           ),
-          (item) => item[0]
+          item => item[0]
         );
     } else {
-      keys = Object.keys(this.props.field.values)
+      keys = Object.keys(this.props.field.values);
     }
 
     const options = keys.map(
@@ -70,7 +70,7 @@ const FormFieldSelect = React.createClass({
         {options}
       </select>
     );
-  }
+  },
 });
 
 module.exports = FormFieldSelect;

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

@@ -2,35 +2,35 @@ define([
   'react',
   'react-dom',
   'jquery',
-  'select2'
+  'select2',
 ],
-function(
+(
   React,
   ReactDOM,
   jQuery
-) {
+) => {
-  var Selection = React.createClass({
+  const Selection = React.createClass({
-    getInitialState: function() {
+    getInitialState: function () {
       return {
         items: [],
-        select2: false
+        select2: false,
       };
     },
-    componentWillMount: function() {
+    componentWillMount: function () {
       this.loadCachedItems();
     },
-    allowMultipleValues: function() {
+    allowMultipleValues: function () {
       return (this.props.field.multiple === true);
     },
-    isSelect2Initialized: function() {
+    isSelect2Initialized: function () {
       return (this.state.select2 === true);
     },
-    componentDidMount: function() {
+    componentDidMount: function () {
       if(this.allowMultipleValues()) {
         this.setupSelect2();
       }
     },
-    componentDidUpdate: function(prevProps, prevState) {
+    componentDidUpdate: function (prevProps) {
       if(
         (this.props.item !== undefined && prevProps.item !== undefined)
         && (this.props.item.id !== prevProps.item.id)
@@ -40,24 +40,24 @@ function(
           .trigger('change');
       }
     },
-    componentWillUnmount: function() {
+    componentWillUnmount: function () {
       if(this.allowMultipleValues()) {
         this.destroySelect2();
       }
     },
-    destroySelect2: function() {
+    destroySelect2: function () {
       if(this.isSelect2Initialized()) {
         jQuery('#'+this.refs.select.id).select2('destroy');
       }
     },
-    setupSelect2: function() {
+    setupSelect2: function () {
       if(this.isSelect2Initialized()) {
         return;
       }
 
-      var select2 = jQuery('#'+this.refs.select.id).select2({
+      const select2 = jQuery('#'+this.refs.select.id).select2({
         width: (this.props.width || ''),
-        templateResult: function(item) {
+        templateResult: function (item) {
           if(item.element && item.element.selected) {
             return null;
           } else {
@@ -67,14 +67,14 @@ function(
               return item.text;
             }
           }
-        }
+        },
       });
 
-      var hasRemoved = false;
+      let hasRemoved = false;
-      select2.on('select2:unselecting', function(e) {
+      select2.on('select2:unselecting', () => {
         hasRemoved = true;
       });
-      select2.on('select2:opening', function(e) {
+      select2.on('select2:opening', (e) => {
         if(hasRemoved === true) {
           hasRemoved = false;
           e.preventDefault();
@@ -85,13 +85,13 @@ function(
 
       this.setState({ select2: true });
     },
-    getSelectedValues: function() {
+    getSelectedValues: function () {
       if(this.props.field['selected'] !== undefined) {
         return this.props.field['selected'](this.props.item);
       } else if(this.props.item !== undefined && this.props.field.name !== undefined) {
         if (this.allowMultipleValues()) {
           if (Array.isArray(this.props.item[this.props.field.name])) {
-            return this.props.item[this.props.field.name].map(function(item) {
+            return this.props.item[this.props.field.name].map((item) => {
               return item.id;
             });
           }
@@ -101,9 +101,9 @@ function(
       }
       return null;
     },
-    loadCachedItems: function() {
+    loadCachedItems: function () {
       if(typeof(window['mailpoet_'+this.props.field.endpoint]) !== 'undefined') {
-        var items = window['mailpoet_'+this.props.field.endpoint];
+        let items = window['mailpoet_'+this.props.field.endpoint];
 
 
         if(this.props.field['filter'] !== undefined) {
@@ -111,39 +111,39 @@ function(
         }
 
         this.setState({
-          items: items
+          items: items,
         });
       }
     },
-    handleChange: function(e) {
+    handleChange: function (e) {
       if(this.props.onValueChange !== undefined) {
         if(this.props.field.multiple) {
           value = jQuery('#'+this.refs.select.id).val();
         } else {
           value = e.target.value;
         }
-        var transformedValue = this.transformChangedValue(value);
+        const transformedValue = this.transformChangedValue(value);
         this.props.onValueChange({
-         target: {
+          target: {
             value: transformedValue,
-            name: this.props.field.name
+            name: this.props.field.name,
-          }
+          },
         });
       }
     },
-    getLabel: function(item) {
+    getLabel: function (item) {
       if(this.props.field['getLabel'] !== undefined) {
         return this.props.field.getLabel(item, this.props.item);
       }
       return item.name;
     },
-    getSearchLabel: function(item) {
+    getSearchLabel: function (item) {
       if(this.props.field['getSearchLabel'] !== undefined) {
         return this.props.field.getSearchLabel(item, this.props.item);
       }
       return null;
     },
-    getValue: function(item) {
+    getValue: function (item) {
       if(this.props.field['getValue'] !== undefined) {
         return this.props.field.getValue(item, this.props.item);
       }
@@ -152,18 +152,18 @@ function(
     // When it's impossible to represent the desired value in DOM,
     // this function may be used to transform the placeholder value into
     // desired value.
-    transformChangedValue: function(value) {
+    transformChangedValue: function (value) {
       if(typeof this.props.field['transformChangedValue'] === 'function') {
         return this.props.field.transformChangedValue.call(this, value);
       } else {
         return value;
       }
     },
-    render: function() {
+    render: function () {
       const options = this.state.items.map((item, index) => {
-        let label = this.getLabel(item);
+        const label = this.getLabel(item);
-        let searchLabel = this.getSearchLabel(item);
+        const searchLabel = this.getSearchLabel(item);
-        let value = this.getValue(item);
+        const value = this.getValue(item);
 
         return (
           <option
@@ -180,13 +180,14 @@ function(
         <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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 
 const FormFieldText = React.createClass({
   render() {
@@ -29,7 +29,7 @@ const FormFieldText = React.createClass({
         {...this.props.field.validation}
       />
     );
-  }
+  },
 });
 
-module.exports = FormFieldText;
+module.exports = FormFieldText;

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

@@ -1,11 +1,11 @@
 define([
-  'react'
+  'react',
 ],
-function(
+(
   React
-) {
+) => {
-  var FormFieldTextarea = React.createClass({
+  const FormFieldTextarea = React.createClass({
-    render: function() {
+    render: function () {
       return (
         <textarea
           type="text"
@@ -19,8 +19,8 @@ function(
           {...this.props.field.validation}
         />
       );
-    }
+    },
   });
 
   return FormFieldTextarea;
-});
+});

assets/js/src/form/form.jsx

@@ -4,54 +4,54 @@ define(
     'mailpoet',
     'classnames',
     'react-router',
-    'form/fields/field.jsx'
+    'form/fields/field.jsx',
   ],
-  function(
+  (
     React,
     MailPoet,
     classNames,
     Router,
     FormField
-  ) {
+  ) => {
 
-    var Form = React.createClass({
+    const Form = React.createClass({
       contextTypes: {
-        router: React.PropTypes.object.isRequired
+        router: React.PropTypes.object.isRequired,
       },
-      getDefaultProps: function() {
+      getDefaultProps: function () {
         return {
           params: {},
         };
       },
-      getInitialState: function() {
+      getInitialState: function () {
         return {
           loading: false,
           errors: [],
-          item: {}
+          item: {},
         };
       },
-      getValues: function() {
+      getValues: function () {
         return this.props.item ? this.props.item : this.state.item;
       },
-      getErrors: function() {
+      getErrors: function () {
         return this.props.errors ? this.props.errors : this.state.errors;
       },
-      componentDidMount: function() {
+      componentDidMount: function () {
         if(this.isMounted()) {
           if(this.props.params.id !== undefined) {
             this.loadItem(this.props.params.id);
           } else {
             this.setState({
-              item: jQuery('.mailpoet_form').serializeObject()
+              item: jQuery('.mailpoet_form').serializeObject(),
             });
           }
         }
       },
-      componentWillReceiveProps: function(props) {
+      componentWillReceiveProps: function (props) {
         if(props.params.id === undefined) {
           this.setState({
             loading: false,
-            item: {}
+            item: {},
           });
           if (props.item === undefined) {
             this.refs.form.reset();
@@ -60,7 +60,7 @@ define(
           this.loadItem(props.params.id);
         }
       },
-      loadItem: function(id) {
+      loadItem: function (id) {
         this.setState({ loading: true });
 
         MailPoet.Ajax.post({
@@ -68,23 +68,23 @@ 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((response) => {
+        }).fail(() => {
           this.setState({
             loading: false,
-            item: {}
+            item: {},
-          }, function() {
+          }, function () {
             this.context.router.push('/new');
           });
         });
       },
-      handleSubmit: function(e) {
+      handleSubmit: function (e) {
         e.preventDefault();
 
         // handle validation
@@ -97,16 +97,16 @@ define(
         this.setState({ loading: true });
 
         // only get values from displayed fields
-        var item = {};
+        const item = {};
-        this.props.fields.map(function(field) {
+        this.props.fields.map((field) => {
           if(field['fields'] !== undefined) {
-            field.fields.map(function(subfield) {
+            field.fields.map((subfield) => {
               item[subfield.name] = this.state.item[subfield.name];
-            }.bind(this));
+            });
           } else {
             item[field.name] = this.state.item[field.name];
           }
-        }.bind(this));
+        });
         // set id if specified
         if(this.props.params.id !== undefined) {
           item.id = this.props.params.id;
@@ -116,10 +116,10 @@ define(
           api_version: window.mailpoet_api_version,
           endpoint: this.props.endpoint,
           action: 'save',
-          data: item
+          data: item,
         }).always(() => {
           this.setState({ loading: false });
-        }).done((response) => {
+        }).done(() => {
           if(this.props.onSuccess !== undefined) {
             this.props.onSuccess();
           } else {
@@ -137,24 +137,25 @@ define(
           }
         });
       },
-      handleValueChange: function(e) {
+      handleValueChange: function (e) {
         if (this.props.onChange) {
           return this.props.onChange(e);
         } else {
-          var item = this.state.item,
+          const item = this.state.item;
-            field = e.target.name;
+          const field = e.target.name;
 
           item[field] = e.target.value;
 
           this.setState({
-            item: item
+            item: item,
           });
           return true;
         }
       },
-      render: function() {
+      render: function () {
+        let errors;
         if(this.getErrors() !== undefined) {
-          var errors = this.getErrors().map(function(error, index) {
+          errors = this.getErrors().map((error, index) => {
             return (
               <p key={ 'error-'+index } className="mailpoet_error">
                 { error.message }
@@ -163,13 +164,13 @@ define(
           });
         }
 
-        var formClasses = classNames(
+        const formClasses = classNames(
           'mailpoet_form',
-          { 'mailpoet_form_loading': this.state.loading || this.props.loading }
+          { mailpoet_form_loading: this.state.loading || this.props.loading }
         );
 
-        var beforeFormContent = false;
+        let beforeFormContent = false;
-        var afterFormContent = false;
+        let afterFormContent = false;
 
         if (this.props.beforeFormContent !== undefined) {
           beforeFormContent = this.props.beforeFormContent(this.getValues());
@@ -179,17 +180,26 @@ define(
           afterFormContent = this.props.afterFormContent(this.getValues());
         }
 
-        var fields = this.props.fields.map(function(field, i) {
+        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 } />
           );
-        }.bind(this));
+        });
 
-        var actions = false;
+        let actions = false;
         if(this.props.children) {
           actions = this.props.children;
         } else {
@@ -228,7 +238,7 @@ define(
             { afterFormContent }
           </div>
         );
-      }
+      },
     });
 
     return Form;

assets/js/src/forms/forms.jsx

@@ -1,15 +1,15 @@
-import React from 'react'
+import React from 'react';
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom';
-import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
+import { Router, Route, IndexRoute, useRouterHistory } from 'react-router';
-import { createHashHistory } from 'history'
+import { createHashHistory } from 'history';
-import FormList from 'forms/list.jsx'
+import FormList from 'forms/list.jsx';
 
 const history = useRouterHistory(createHashHistory)({ queryKey: false });
 
 const App = React.createClass({
   render() {
-    return this.props.children
+    return this.props.children;
-  }
+  },
 });
 
 const container = document.getElementById('forms_container');
@@ -23,4 +23,4 @@ if(container) {
       </Route>
     </Router>
   ), container);
-}
+}

assets/js/src/forms/list.jsx

@@ -1,29 +1,27 @@
-import React from 'react'
+import React from 'react';
-import ReactDOM from 'react-dom'
+import Listing from 'listing/listing.jsx';
-import { Router, Link } from 'react-router'
+import classNames from 'classnames';
-import Listing from 'listing/listing.jsx'
+import MailPoet from 'mailpoet';
-import classNames from 'classnames'
-import MailPoet from 'mailpoet'
 
 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 = {
@@ -71,38 +69,38 @@ 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 = [
   {
     name: 'edit',
     label: MailPoet.I18n.t('edit'),
-    link: function(item) {
+    link: function (item) {
       return (
         <a href={ `admin.php?page=mailpoet-form-editor&id=${item.id}` }>{MailPoet.I18n.t('edit')}</a>
       );
-    }
+    },
   },
   {
     name: 'duplicate',
     label: MailPoet.I18n.t('duplicate'),
-    onClick: function(item, refresh) {
+    onClick: function (item, refresh) {
       return MailPoet.Ajax.post({
         api_version: window.mailpoet_api_version,
         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)
@@ -111,16 +109,16 @@ const item_actions = [
       }).fail((response) => {
         if (response.errors.length > 0) {
           MailPoet.Notice.error(
-            response.errors.map(function(error) { return error.message; }),
+            response.errors.map((error) => { return error.message; }),
             { scroll: true }
           );
         }
       });
-    }
+    },
   },
   {
-    name: 'trash'
+    name: 'trash',
-  }
+  },
 ];
 
 const FormList = React.createClass({
@@ -128,28 +126,28 @@ 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) => {
       if (response.errors.length > 0) {
         MailPoet.Notice.error(
-          response.errors.map(function(error) { return error.message; }),
+          response.errors.map((error) => { return error.message; }),
           { scroll: true }
         );
       }
     });
   },
   renderItem(form, actions) {
-    let row_classes = classNames(
+    const row_classes = classNames(
       'manage-column',
       'column-primary',
       'has-row-actions'
     );
 
-    let segments = mailpoet_segments.filter(function(segment) {
+    let segments = mailpoet_segments.filter((segment) => {
       return (jQuery.inArray(segment.id, form.segments) !== -1);
-    }).map(function(segment) {
+    }).map((segment) => {
       return segment.name;
     }).join(', ');
 
@@ -205,7 +203,7 @@ const FormList = React.createClass({
         />
       </div>
     );
-  }
+  },
 });
 
 module.exports = FormList;

assets/js/src/handlebars_helpers.js

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

assets/js/src/help-tooltip.js

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Route, IndexRedirect, useRouterHistory } from 'react-router';
+import { createHashHistory } from 'history';
+
+import KnowledgeBase from 'help/knowledge_base.jsx';
+import SystemInfo from 'help/system_info.jsx';
+
+const history = useRouterHistory(createHashHistory)({ queryKey: false });
+
+const App = React.createClass({
+  render() {
+    return this.props.children;
+  },
+});
+
+const container = document.getElementById('help_container');
+
+if(container) {
+
+  ReactDOM.render((
+    <Router history={ history }>
+      <Route path="/" component={ App }>
+        <IndexRedirect to="knowledgeBase" />
+        {/* Pages */}
+        <Route path="knowledgeBase(/)**" params={{ tab: 'knowledgeBase' }} component={ KnowledgeBase } />
+        <Route path="systemInfo(/)**" params={{ tab: 'systemInfo' }} component={ SystemInfo } />
+      </Route>
+    </Router>
+  ), container);
+
+}

assets/js/src/help/knowledge_base.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+import Tabs from './tabs.jsx';
+
+function KnowledgeBase() {
+
+  return (
+    <div>
+
+      <Tabs tab="knowledgeBase" />
+
+      <p>{MailPoet.I18n.t('knowledgeBaseIntro')}</p>
+      <ul>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/116-common-problems">Common Problems</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/165-newsletters">Newsletters</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/156-migration-questions">Migration Questions</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/149-sending-methods">Sending Methods</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/139-subscription-forms">Subscription Forms</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/114-getting-started">Getting Started</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/123-newsletter-designer">Newsletter Designer</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/121-subscribers-and-lists">Subscribers and Lists</a></li>
+      </ul>
+      <a target="_blank" href="http://beta.docs.mailpoet.com/" className="button button-primary">{MailPoet.I18n.t('knowledgeBaseButton')}</a>
+    </div>
+  );
+}
+
+module.exports = KnowledgeBase;

assets/js/src/help/system_info.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import _ from 'underscore';
+
+import Tabs from './tabs.jsx';
+
+function handleFocus(event) {
+  event.target.select();
+}
+
+function printData(data) {
+  if (_.isObject(data)) {
+    const printableData = Object.keys(data).map((key) => {
+      return `${key}: ${data[key]}`;
+    });
+
+    return (<textarea
+      readOnly={true}
+      onFocus={handleFocus}
+      value={printableData.join('\n')}
+      style={{
+        width: '100%',
+        height: '400px',
+      }}
+    />);
+  } else {
+    return (<p>{MailPoet.I18n.t('systemInfoDataError')}</p>);
+  }
+}
+
+function KnowledgeBase() {
+  const data = window.help_scout_data;
+  return (
+    <div>
+
+      <Tabs tab="systemInfo" />
+
+      <div className="mailpoet_notice notice inline notice-success" style={{ marginTop: '1em' }}>
+        <p>{MailPoet.I18n.t('systemInfoIntro')}</p>
+      </div>
+
+      {printData(data)}
+    </div>
+  );
+}
+
+module.exports = KnowledgeBase;

assets/js/src/help/tabs.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Link } from 'react-router';
+import classNames from 'classnames';
+import MailPoet from 'mailpoet';
+
+const tabs = [
+  {
+    name: 'knowledgeBase',
+    label: MailPoet.I18n.t('tabKnowledgeBaseTitle'),
+    link: '/knowledgeBase',
+  },
+  {
+    name: 'systemInfo',
+    label: MailPoet.I18n.t('tabSystemInfoTitle'),
+    link: '/systemInfo',
+  },
+];
+
+function Tabs(props) {
+
+  const tabLinks = tabs.map((tab, index) => {
+    const tabClasses = classNames(
+      'nav-tab',
+      { 'nav-tab-active': (props.tab === tab.name) }
+    );
+
+    return (
+      <Link
+        key={ 'tab-'+index }
+        className={ tabClasses }
+        to={ tab.link }
+      >{ tab.label }</Link>
+    );
+  });
+
+  return (
+    <h2 className="nav-tab-wrapper">
+      { tabLinks }
+    </h2>
+  );
+}
+
+Tabs.propTypes = { tab: React.PropTypes.string };
+Tabs.defaultProps = { tab: 'knowledgeBase' };
+
+module.exports = Tabs;

assets/js/src/helpscout.js

@@ -1,3 +0,0 @@
-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||{});
-});

assets/js/src/i18n.js

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

assets/js/src/iframe.js

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

assets/js/src/jquery.serialize_object.js

@@ -3,8 +3,9 @@ define(
     'jquery'
   ],
   function(
-    $
+    jQuery
   ) {
+    var $ = jQuery;
     // Combination of jQuery.deparam and jQuery.serializeObject by Ben Alman.
     /*!
      * jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
@@ -24,10 +25,10 @@ define(
      */
     $.fn.serializeObject = function(coerce) {
       var obj = {},
-        coerce_types = { 'true': !0, 'false': !1, 'null': null };
+        coerce_types = { true: !0, false: !1, null: null };
 
       // Iterate over all name=value pairs.
-      $.each( this.serializeArray(), function(j,v){
+      $.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,53 +1,53 @@
 define([
   'react',
-  'mailpoet'
+  'mailpoet',
 ],
-function(
+(
   React,
   MailPoet
-) {
+) => {
-  var ListingBulkActions = React.createClass({
+  const ListingBulkActions = React.createClass({
-    getInitialState: function() {
+    getInitialState: function () {
       return {
         action: false,
-        extra: false
+        extra: false,
-      }
+      };
     },
-    handleChangeAction: function(e) {
+    handleChangeAction: function (e) {
       this.setState({
         action: e.target.value,
-        extra: false
+        extra: false,
-      }, function() {
+      }, () => {
-        var action = this.getSelectedAction();
+        const action = this.getSelectedAction();
 
         // action on select callback
         if(action !== null && action['onSelect'] !== undefined) {
           this.setState({
-            extra: action.onSelect(e)
+            extra: action.onSelect(e),
           });
         }
-      }.bind(this));
+      });
     },
-    handleApplyAction: function(e) {
+    handleApplyAction: function (e) {
       e.preventDefault();
 
-      var action = this.getSelectedAction();
+      const action = this.getSelectedAction();
 
       if(action === null) {
         return;
       }
 
-      var selected_ids = (this.props.selection !== 'all')
+      const selected_ids = (this.props.selection !== 'all')
         ? this.props.selected_ids
         : [];
 
-      var data = (action['getData'] !== undefined)
+      const data = (action['getData'] !== undefined)
         ? action.getData()
         : {};
 
       data.action = this.state.action;
 
-      var onSuccess = function() {};
+      let onSuccess = function () {};
       if(action['onSuccess'] !== undefined) {
         onSuccess = action.onSuccess;
       }
@@ -56,18 +56,18 @@ function(
         const promise = this.props.onBulkAction(selected_ids, data);
         if (promise !== false) {
           promise.then(onSuccess);
-        };
+        }
       }
 
       this.setState({
         action: false,
-        extra: false
+        extra: false,
       });
     },
-    getSelectedAction: function() {
+    getSelectedAction: function () {
-      var selected_action = this.refs.action.value;
+      const selected_action = this.refs.action.value;
       if(selected_action.length > 0) {
-        var action = this.props.bulk_actions.filter(function(action) {
+        const action = this.props.bulk_actions.filter((action) => {
           return (action.name === selected_action);
         });
 
@@ -77,7 +77,7 @@ function(
       }
       return null;
     },
-    render: function() {
+    render: function () {
       if(this.props.bulk_actions.length === 0) {
         return null;
       }
@@ -97,14 +97,14 @@ function(
             onChange={this.handleChangeAction}
           >
             <option value="">{MailPoet.I18n.t('bulkActions')}</option>
-            { this.props.bulk_actions.map(function(action, index) {
+            { this.props.bulk_actions.map((action, index) => {
               return (
                 <option
                   value={ action.name }
                   key={ 'action-' + index }
                 >{ action.label }</option>
               );
-            }.bind(this)) }
+            }) }
           </select>
           <input
             onClick={ this.handleApplyAction }
@@ -115,7 +115,7 @@ function(
             { this.state.extra }
         </div>
       );
-    }
+    },
   });
 
   return ListingBulkActions;

assets/js/src/listing/filters.jsx

@@ -1,27 +1,30 @@
 define([
   'react',
   'jquery',
-  'mailpoet'
+  'mailpoet',
 ],
-function(
+(
   React,
   jQuery,
   MailPoet
-) {
+) => {
-  var ListingFilters = React.createClass({
+  const ListingFilters = React.createClass({
-    handleFilterAction: function() {
+    handleFilterAction: function () {
-      let filters = {};
+      const filters = {};
       this.getAvailableFilters().map((filter, i) => {
-        filters[this.refs['filter-'+i].name] = this.refs['filter-'+i].value
+        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() {
+    handleEmptyTrash: function () {
       return this.props.onEmptyTrash();
     },
-    getAvailableFilters: function() {
+    getAvailableFilters: function () {
-      let filters = this.props.filters;
+      const filters = this.props.filters;
-      return Object.keys(filters).filter(function(filter) {
+      return Object.keys(filters).filter((filter) => {
         return !(
           filters[filter].length === 0
           || (
@@ -31,39 +34,39 @@ function(
         );
       });
     },
-    componentDidUpdate: function() {
+    componentDidUpdate: function () {
       const selected_filters = this.props.filter;
-      const available_filters = this.getAvailableFilters().map(
+      this.getAvailableFilters().map(
-        function(filter, i) {
+        (filter, i) => {
           if (selected_filters[filter] !== undefined && selected_filters[filter]) {
             jQuery(this.refs['filter-'+i])
               .val(selected_filters[filter])
               .trigger('change');
           }
-        }.bind(this)
+        }
-      );
+        );
     },
-    render: function() {
+    render: function () {
       const filters = this.props.filters;
       const available_filters = this.getAvailableFilters()
-        .map(function(filter, i) {
+        .map((filter, i) => {
           return (
             <select
               ref={ `filter-${i}` }
               key={ `filter-${i}` }
               name={ filter }
             >
-            { filters[filter].map(function(option, j) {
+            { filters[filter].map((option, j) => {
               return (
                 <option
                   value={ option.value }
                   key={ 'filter-option-' + j }
                 >{ option.label }</option>
               );
-            }.bind(this)) }
+            }) }
             </select>
           );
-      }.bind(this));
+        });
 
       let button;
 
@@ -97,7 +100,7 @@ function(
           { empty_trash }
         </div>
       );
-    }
+    },
   });
 
   return ListingFilters;

assets/js/src/listing/groups.jsx

@@ -1,20 +1,20 @@
-define(['react', 'classnames'], function(React, classNames) {
+define(['react', 'classnames'], (React, classNames) => {
 
-    var ListingGroups = React.createClass({
+  const ListingGroups = React.createClass({
-      handleSelect: function(group) {
+    handleSelect: function (group) {
-        return this.props.onSelectGroup(group);
+      return this.props.onSelectGroup(group);
-      },
+    },
-      render: function() {
+    render: function () {
-        var groups = this.props.groups.map(function(group, index) {
+      const groups = this.props.groups.map((group, index) => {
-          if(group.name === 'trash' && group.count === 0) {
+        if(group.name === 'trash' && group.count === 0) {
-            return false;
+          return false;
-          }
+        }
 
-          var classes = classNames(
+        const classes = classNames(
-            { 'current' : (group.name === this.props.group) }
+            { current : (group.name === this.props.group) }
           );
 
-          return (
+        return (
             <li key={index}>
               {(index > 0) ? ' |' : ''}
               <a
@@ -24,17 +24,17 @@ define(['react', 'classnames'], function(React, classNames) {
                 {group.label} <span className="count">({ group.count.toLocaleString() })</span>
               </a>
             </li>
-          );
+        );
-        }.bind(this));
+      });
 
-        return (
+      return (
           <ul className="subsubsub">
             { groups }
           </ul>
-        );
+      );
-      }
+    },
-    });
+  });
 
-    return ListingGroups;
+  return ListingGroups;
-  }
+}
-);
+);

assets/js/src/listing/header.jsx

@@ -1,17 +1,18 @@
-import MailPoet from 'mailpoet'
+import MailPoet from 'mailpoet';
-import React from 'react'
+import React from 'react';
-import classNames from 'classnames'
+import classNames from 'classnames';
 
 const ListingHeader = React.createClass({
-  handleSelectItems: function() {
+  handleSelectItems: function () {
     return this.props.onSelectItems(
       this.refs.toggle.checked
     );
   },
-  render: function() {
+  render: function () {
-    const columns = this.props.columns.map(function(column, index) {
+    const columns = this.props.columns.map((column, index) => {
-      column.is_primary = (index === 0);
+      const renderColumn = column;
-      column.sorted = (this.props.sort_by === column.name)
+      renderColumn.is_primary = (index === 0);
+      renderColumn.sorted = (this.props.sort_by === column.name)
         ? this.props.sort_order
         : 'desc';
       return (
@@ -19,9 +20,9 @@ const ListingHeader = React.createClass({
           onSort={this.props.onSort}
           sort_by={this.props.sort_by}
           key={ 'column-' + index }
-          column={column} />
+          column={renderColumn} />
       );
-    }.bind(this));
+    });
 
     let checkbox;
 
@@ -48,22 +49,22 @@ const ListingHeader = React.createClass({
         {columns}
       </tr>
     );
-  }
+  },
 });
 
 const ListingColumn = React.createClass({
-  handleSort: function() {
+  handleSort: function () {
     const sort_by = this.props.column.name;
     const sort_order = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
     this.props.onSort(sort_by, sort_order);
   },
-  render: function() {
+  render: function () {
     const classes = classNames(
       'manage-column',
       { 'column-primary': this.props.column.is_primary },
-      { 'sortable': this.props.column.sortable },
+      { sortable: this.props.column.sortable },
       this.props.column.sorted,
-      { 'sorted': (this.props.sort_by === this.props.column.name) }
+      { sorted: (this.props.sort_by === this.props.column.name) }
     );
     let label;
 
@@ -85,7 +86,7 @@ const ListingColumn = React.createClass({
         width={ this.props.column.width || null }
       >{label}</th>
     );
-  }
+  },
 });
 
-module.exports = ListingHeader;
+module.exports = ListingHeader;

assets/js/src/listing/listing.jsx

@@ -1,23 +1,23 @@
-import MailPoet from 'mailpoet'
+import MailPoet from 'mailpoet';
-import jQuery from 'jquery'
+import jQuery from 'jquery';
-import React from 'react'
+import React from 'react';
-import _ from 'underscore'
+import _ from 'underscore';
-import { Router, Link } from 'react-router'
+import { Link } from 'react-router';
-import classNames from 'classnames'
+import classNames from 'classnames';
-import ListingBulkActions from 'listing/bulk_actions.jsx'
+import ListingBulkActions from 'listing/bulk_actions.jsx';
-import ListingHeader from 'listing/header.jsx'
+import ListingHeader from 'listing/header.jsx';
-import ListingPages from 'listing/pages.jsx'
+import ListingPages from 'listing/pages.jsx';
-import ListingSearch from 'listing/search.jsx'
+import ListingSearch from 'listing/search.jsx';
-import ListingGroups from 'listing/groups.jsx'
+import ListingGroups from 'listing/groups.jsx';
-import ListingFilters from 'listing/filters.jsx'
+import ListingFilters from 'listing/filters.jsx';
 
 const ListingItem = React.createClass({
-  getInitialState: function() {
+  getInitialState: function () {
     return {
-      expanded: false
+      expanded: false,
     };
   },
-  handleSelectItem: function(e) {
+  handleSelectItem: function (e) {
     this.props.onSelectItem(
       parseInt(e.target.value, 10),
       e.target.checked
@@ -25,20 +25,20 @@ const ListingItem = React.createClass({
 
     return !e.target.checked;
   },
-  handleRestoreItem: function(id) {
+  handleRestoreItem: function (id) {
     this.props.onRestoreItem(id);
   },
-  handleTrashItem: function(id) {
+  handleTrashItem: function (id) {
     this.props.onTrashItem(id);
   },
-  handleDeleteItem: function(id) {
+  handleDeleteItem: function (id) {
     this.props.onDeleteItem(id);
   },
-  handleToggleItem: function(id) {
+  handleToggleItem: function () {
     this.setState({ expanded: !this.state.expanded });
   },
-  render: function() {
+  render: function () {
-    var checkbox = false;
+    let checkbox = false;
 
     if (this.props.is_selectable === true) {
       checkbox = (
@@ -63,7 +63,7 @@ const ListingItem = React.createClass({
 
     if (custom_actions.length > 0) {
       let is_first = true;
-      item_actions = custom_actions.map(function(action, index) {
+      item_actions = custom_actions.map((action, index) => {
         if (action.display !== undefined) {
           if (action.display(this.props.item) === false) {
             return;
@@ -125,7 +125,7 @@ const ListingItem = React.createClass({
         }
 
         return custom_action;
-      }.bind(this));
+      });
     } else {
       item_actions = (
         <span className="edit">
@@ -137,7 +137,7 @@ const ListingItem = React.createClass({
     let actions;
 
     if (this.props.group === 'trash') {
-       actions = (
+      actions = (
         <div>
           <div className="row-actions">
             <span>
@@ -191,12 +191,12 @@ const ListingItem = React.createClass({
         { this.props.onRenderItem(this.props.item, actions) }
       </tr>
     );
-  }
+  },
 });
 
 
 const ListingItems = React.createClass({
-  render: function() {
+  render: function () {
     if (this.props.items.length === 0) {
       let message;
       if (this.props.loading === true) {
@@ -226,10 +226,10 @@ const ListingItems = React.createClass({
     } else {
       const select_all_classes = classNames(
         'mailpoet_select_all',
-        { 'mailpoet_hidden': (
+        { mailpoet_hidden: (
             this.props.selection === false
             || (this.props.count <= this.props.limit)
-          )
+          ),
         }
       );
 
@@ -259,9 +259,10 @@ const ListingItems = React.createClass({
             </td>
           </tr>
 
-          {this.props.items.map(function(item, index) {
+          {this.props.items.map((item, index) => {
-            item.id = parseInt(item.id, 10);
+            const renderItem = item;
-            item.selected = (this.props.selected_ids.indexOf(item.id) !== -1);
+            renderItem.id = parseInt(item.id, 10);
+            renderItem.selected = (this.props.selected_ids.indexOf(renderItem.id) !== -1);
 
             return (
               <ListingItem
@@ -276,21 +277,21 @@ const ListingItems = React.createClass({
                 is_selectable={ this.props.is_selectable }
                 item_actions={ this.props.item_actions }
                 group={ this.props.group }
-                key={ `item-${item.id}-${index}` }
+                key={ `item-${renderItem.id}-${index}` }
-                item={ item } />
+                item={ renderItem } />
             );
-          }.bind(this))}
+          })}
         </tbody>
       );
     }
-  }
+  },
 });
 
 const Listing = React.createClass({
   contextTypes: {
-    router: React.PropTypes.object.isRequired
+    router: React.PropTypes.object.isRequired,
   },
-  getInitialState: function() {
+  getInitialState: function () {
     return {
       loading: false,
       search: '',
@@ -306,31 +307,31 @@ const Listing = React.createClass({
       filter: {},
       selected_ids: [],
       selection: false,
-      meta: {}
+      meta: {},
     };
   },
-  getParam: function(param) {
+  getParam: function (param) {
     const regex = /(.*)\[(.*)\]/;
     const matches = regex.exec(param);
     return [matches[1], matches[2]];
   },
-  initWithParams: function(params) {
+  initWithParams: function (params) {
-    let state = this.getInitialState();
+    const state = this.getInitialState();
      // check for url params
     if (params.splat) {
-      params.splat.split('/').map(param => {
+      params.splat.split('/').map((param) => {
-        let [key, value] = this.getParam(param);
+        const [key, value] = this.getParam(param);
         switch(key) {
           case 'filter':
-            let filters = {};
+            const filters = {};
-            value.split('&').map(function(pair) {
+            value.split('&').map((pair) => {
-                let [k, v] = pair.split('=')
+              const [k, v] = pair.split('=');
-                filters[k] = v
+              filters[k] = v;
-              }
+            }
             );
 
             state.filter = filters;
-          break;
+            break;
           default:
             state[key] = value;
         }
@@ -352,13 +353,13 @@ const Listing = React.createClass({
       state.sort_order = this.props.sort_order;
     }
 
-    this.setState(state, function() {
+    this.setState(state, () => {
       this.getItems();
-    }.bind(this));
+    });
   },
-  getParams: function() {
+  getParams: function () {
     // get all route parameters (without the "splat")
-    let params = _.omit(this.props.params, 'splat');
+    const params = _.omit(this.props.params, 'splat');
     // TODO:
     // find a way to set the "type" in the routes definition
     // so that it appears in `this.props.params`
@@ -367,10 +368,10 @@ const Listing = React.createClass({
     }
     return params;
   },
-  setParams: function() {
+  setParams: function () {
     if (this.props.location) {
-      let params = Object.keys(this.state)
+      const params = Object.keys(this.state)
-        .filter(key => {
+        .filter((key) => {
           return (
             [
               'group',
@@ -378,34 +379,34 @@ const Listing = React.createClass({
               'search',
               'page',
               'sort_by',
-              'sort_order'
+              'sort_order',
             ].indexOf(key) !== -1
-          )
+          );
         })
-        .map(key => {
+        .map((key) => {
           let value = this.state[key];
           if (value === Object(value)) {
-            value = jQuery.param(value)
+            value = jQuery.param(value);
           } else if (value === Boolean(value)) {
-            value = value.toString()
+            value = value.toString();
           }
 
           if (value !== '' && value !== null) {
-            return `${key}[${value}]`
+            return `${key}[${value}]`;
           }
         })
-        .filter(key => { return (key !== undefined) })
+        .filter((key) => { return (key !== undefined); })
         .join('/');
 
       // set url
-      let url = this.getUrlWithParams(params);
+      const url = this.getUrlWithParams(params);
 
       if (this.props.location.pathname !== url) {
         this.context.router.push(`${url}`);
       }
     }
   },
-  getUrlWithParams: function(params) {
+  getUrlWithParams: function (params) {
     let base_url = (this.props.base_url !== undefined)
       ? this.props.base_url
       : null;
@@ -417,35 +418,36 @@ const Listing = React.createClass({
       return `/${ params }`;
     }
   },
-  setBaseUrlParams: function(base_url) {
+  setBaseUrlParams: function (base_url) {
-    if (base_url.indexOf(':') !== -1) {
+    let ret = base_url;
+    if (ret.indexOf(':') !== -1) {
       const params = this.getParams();
       Object.keys(params).map((key) => {
-        if (base_url.indexOf(':'+key) !== -1) {
+        if (ret.indexOf(':'+key) !== -1) {
-          base_url = base_url.replace(':'+key, params[key]);
+          ret = ret.replace(':'+key, params[key]);
         }
       });
     }
 
-    return base_url;
+    return ret;
   },
-  componentDidMount: function() {
+  componentDidMount: function () {
     if (this.isMounted()) {
       const params = this.props.params || {};
       this.initWithParams(params);
 
       if (this.props.auto_refresh) {
-        jQuery(document).on('heartbeat-tick.mailpoet', function(e, data) {
+        jQuery(document).on('heartbeat-tick.mailpoet', () => {
           this.getItems();
-        }.bind(this));
+        });
       }
     }
   },
-  componentWillReceiveProps: function(nextProps) {
+  componentWillReceiveProps: function (nextProps) {
     const params = nextProps.params || {};
     this.initWithParams(params);
   },
-  getItems: function() {
+  getItems: function () {
     if (this.isMounted()) {
       this.setState({ loading: true });
 
@@ -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) {
@@ -487,19 +489,19 @@ const Listing = React.createClass({
           }
         });
       }).fail((response) => {
-        if (response.errors.length > 0) {
+        if(response.errors.length > 0) {
           MailPoet.Notice.error(
-            response.errors.map(function(error) { return error.message; }),
+            response.errors.map((error) => { return error.message; }),
             { scroll: true }
           );
         }
       });
     }
   },
-  handleRestoreItem: function(id) {
+  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
@@ -519,15 +521,15 @@ const Listing = React.createClass({
       this.getItems();
     }).fail((response) => {
       MailPoet.Notice.error(
-        response.errors.map(function(error) { return error.message; }),
+        response.errors.map((error) => { return error.message; }),
         { scroll: true }
       );
     });
   },
-  handleTrashItem: function(id) {
+  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
@@ -547,15 +549,15 @@ const Listing = React.createClass({
       this.getItems();
     }).fail((response) => {
       MailPoet.Notice.error(
-        response.errors.map(function(error) { return error.message; }),
+        response.errors.map((error) => { return error.message; }),
         { scroll: true }
       );
     });
   },
-  handleDeleteItem: function(id) {
+  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
@@ -575,15 +577,15 @@ const Listing = React.createClass({
       this.getItems();
     }).fail((response) => {
       MailPoet.Notice.error(
-        response.errors.map(function(error) { return error.message; }),
+        response.errors.map((error) => { return error.message; }),
         { scroll: true }
       );
     });
   },
-  handleEmptyTrash: function() {
+  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)
@@ -592,12 +594,12 @@ const Listing = React.createClass({
       this.handleGroup('all');
     }).fail((response) => {
       MailPoet.Notice.error(
-        response.errors.map(function(error) { return error.message; }),
+        response.errors.map((error) => { return error.message; }),
         { scroll: true }
       );
     });
   },
-  handleBulkAction: function(selected_ids, params) {
+  handleBulkAction: function (selected_ids, params) {
     if (
       this.state.selection === false
       && this.state.selected_ids.length === 0
@@ -608,15 +610,15 @@ const Listing = React.createClass({
 
     this.setState({ loading: true });
 
-    var data = params || {};
+    const data = params || {};
     data.listing = {
       params: this.getParams(),
       offset: 0,
       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,32 +627,39 @@ 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) => {
+      if(response.errors.length > 0) {
+        MailPoet.Notice.error(
+          response.errors.map((error) => { return error.message; }),
+          { scroll: true }
+        );
+      }
     });
   },
-  handleSearch: function(search) {
+  handleSearch: function (search) {
     this.setState({
       search: search,
       page: 1,
       selection: false,
-      selected_ids: []
+      selected_ids: [],
-    }, function() {
+    }, () => {
       this.setParams();
-    }.bind(this));
+    });
   },
-  handleSort: function(sort_by, sort_order = 'asc') {
+  handleSort: function (sort_by, sort_order = 'asc') {
     this.setState({
       sort_by: sort_by,
       sort_order: (sort_order === 'asc') ? 'asc' : 'desc',
-    }, function() {
+    }, () => {
       this.setParams();
-    }.bind(this));
+    });
   },
-  handleSelectItem: function(id, is_checked) {
+  handleSelectItem: function (id, is_checked) {
-    var selected_ids = this.state.selected_ids,
+    let selected_ids = this.state.selected_ids,
-        selection = false;
+      selection = false;
 
     if (is_checked) {
       selected_ids = jQuery.merge(selected_ids, [ id ]);
@@ -666,48 +675,48 @@ const Listing = React.createClass({
 
     this.setState({
       selection: selection,
-      selected_ids: selected_ids
+      selected_ids: selected_ids,
     });
   },
-  handleSelectItems: function(is_checked) {
+  handleSelectItems: function (is_checked) {
     if (is_checked === false) {
       this.clearSelection();
     } else {
-      var selected_ids = this.state.items.map(function(item) {
+      const selected_ids = this.state.items.map((item) => {
         return ~~item.id;
       });
 
       this.setState({
         selected_ids: selected_ids,
-        selection: 'page'
+        selection: 'page',
       });
     }
   },
-  handleSelectAll: function() {
+  handleSelectAll: function () {
     if (this.state.selection === 'all') {
       this.clearSelection();
     } else {
       this.setState({
         selection: 'all',
-        selected_ids: []
+        selected_ids: [],
       });
     }
   },
-  clearSelection: function() {
+  clearSelection: function () {
     this.setState({
       selection: false,
-      selected_ids: []
+      selected_ids: [],
     });
   },
-  handleFilter: function(filters) {
+  handleFilter: function (filters) {
     this.setState({
       filter: filters,
-      page: 1
+      page: 1,
-    }, function() {
+    }, () => {
       this.setParams();
-    }.bind(this));
+    });
   },
-  handleGroup: function(group) {
+  handleGroup: function (group) {
     // reset search
     jQuery('#search_input').val('');
 
@@ -715,35 +724,35 @@ const Listing = React.createClass({
       group: group,
       filter: {},
       search: '',
-      page: 1
+      page: 1,
-    }, function() {
+    }, () => {
       this.setParams();
-    }.bind(this));
+    });
   },
-  handleSetPage: function(page) {
+  handleSetPage: function (page) {
     this.setState({
       page: page,
       selection: false,
-      selected_ids: []
+      selected_ids: [],
-    }, function() {
+    }, () => {
       this.setParams();
-    }.bind(this));
+    });
   },
-  handleRenderItem: function(item, actions) {
+  handleRenderItem: function (item, actions) {
     const render = this.props.onRenderItem(item, actions, this.state.meta);
     return render.props.children;
   },
-  handleRefreshItems: function() {
+  handleRefreshItems: function () {
     this.getItems();
   },
-  render: function() {
+  render: function () {
     const items = this.state.items;
     const sort_by = this.state.sort_by;
     const sort_order = this.state.sort_order;
 
     // columns
     let columns = this.props.columns || [];
-    columns = columns.filter(function(column) {
+    columns = columns.filter((column) => {
       return (column.display === undefined || !!(column.display) === true);
     });
 
@@ -755,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,
-        }
+        },
       ];
     }
 
@@ -774,7 +783,7 @@ const Listing = React.createClass({
       'widefat',
       'fixed',
       'striped',
-      { 'mailpoet_listing_loading': this.state.loading }
+      { mailpoet_listing_loading: this.state.loading }
     );
 
     // search
@@ -821,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 }
           />
@@ -889,7 +899,7 @@ const Listing = React.createClass({
         </div>
       </div>
     );
-  }
+  },
 });
 
 module.exports = Listing;

assets/js/src/listing/pages.jsx

@@ -1,76 +1,76 @@
 define([
-    'react',
+  'react',
-    'classnames',
+  'classnames',
-    'mailpoet'
+  'mailpoet',
-  ], function(
+], (
     React,
     classNames,
     MailPoet
-  ) {
+  ) => {
 
-  var ListingPages = React.createClass({
+  const ListingPages = React.createClass({
-    getInitialState: function() {
+    getInitialState: function () {
       return {
-        page: null
+        page: null,
-      }
+      };
     },
-    setPage: function(page) {
+    setPage: function (page) {
       this.setState({
-        page: null
+        page: null,
-      }, function () {
+      }, () => {
         this.props.onSetPage(this.constrainPage(page));
-      }.bind(this));
+      });
     },
-    setFirstPage: function() {
+    setFirstPage: function () {
       this.setPage(1);
     },
-    setLastPage: function() {
+    setLastPage: function () {
       this.setPage(this.getLastPage());
     },
-    setPreviousPage: function() {
+    setPreviousPage: function () {
       this.setPage(this.constrainPage(
         parseInt(this.props.page, 10) - 1)
       );
     },
-    setNextPage: function() {
+    setNextPage: function () {
       this.setPage(this.constrainPage(
         parseInt(this.props.page, 10) + 1)
       );
     },
-    constrainPage: function(page) {
+    constrainPage: function (page) {
       return Math.min(Math.max(1, Math.abs(~~page)), this.getLastPage());
     },
-    handleSetManualPage: function(e) {
+    handleSetManualPage: function (e) {
       if(e.which === 13) {
         this.setPage(this.state.page);
       }
     },
-    handleChangeManualPage: function(e) {
+    handleChangeManualPage: function (e) {
       this.setState({
-        page: e.target.value
+        page: e.target.value,
       });
     },
-    handleBlurManualPage: function(e) {
+    handleBlurManualPage: function (e) {
       this.setPage(e.target.value);
     },
-    getLastPage: function() {
+    getLastPage: function () {
       return Math.ceil(this.props.count / this.props.limit);
     },
-    render: function() {
+    render: function () {
       if(this.props.count === 0) {
         return false;
       } else {
-        var pagination = false;
+        let pagination = false;
-        var firstPage = (
+        let firstPage = (
           <span aria-hidden="true" className="tablenav-pages-navspan">«</span>
         );
-        var previousPage = (
+        let previousPage = (
           <span aria-hidden="true" className="tablenav-pages-navspan">‹</span>
         );
-        var nextPage = (
+        let nextPage = (
           <span aria-hidden="true" className="tablenav-pages-navspan">›</span>
         );
-        var lastPage = (
+        let lastPage = (
           <span aria-hidden="true" className="tablenav-pages-navspan">»</span>
         );
 
@@ -159,12 +159,12 @@ define([
           );
         }
 
-        var classes = classNames(
+        const classes = classNames(
           'tablenav-pages',
           { 'one-page': (this.props.count <= this.props.limit) }
         );
 
-        var numberOfItemsLabel;
+        let numberOfItemsLabel;
         if (this.props.count == 1) {
           numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsSingular');
         } else {
@@ -178,7 +178,7 @@ define([
           </div>
         );
       }
-    }
+    },
   });
 
   return ListingPages;

assets/js/src/listing/search.jsx

@@ -1,22 +1,22 @@
 define([
-    'mailpoet',
+  'mailpoet',
-    'react'
+  'react',
-  ], function(
+], (
     MailPoet,
     React
-  ) {
+  ) => {
 
-  var ListingSearch = React.createClass({
+  const ListingSearch = React.createClass({
-    handleSearch: function(e) {
+    handleSearch: function (e) {
       e.preventDefault();
       this.props.onSearch(
         this.refs.search.value
       );
     },
-    componentWillReceiveProps: function(nextProps) {
+    componentWillReceiveProps: function (nextProps) {
-      this.refs.search.value = nextProps.search
+      this.refs.search.value = nextProps.search;
     },
-    render: function() {
+    render: function () {
       if(this.props.search === false) {
         return false;
       } else {
@@ -40,7 +40,7 @@ define([
           </form>
         );
       }
-    }
+    },
   });
 
   return ListingSearch;

assets/js/src/mp2migrator.js

@@ -1,5 +1,7 @@
-define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
+define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
   'use strict';
+
+  var MailPoet = mp;
   MailPoet.MP2Migrator = {
 
     fatal_error: '',
@@ -10,7 +12,7 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
       clearTimeout(MailPoet.MP2Migrator.displayLogs_timeout);
       clearTimeout(MailPoet.MP2Migrator.updateProgressbar_timeout);
       clearTimeout(MailPoet.MP2Migrator.update_wordpress_info_timeout);
-      setTimeout(MailPoet.MP2Migrator.updateDisplay, 1000)
+      setTimeout(MailPoet.MP2Migrator.updateDisplay, 1000);
     },
 
     stopLogger: function () {
@@ -27,8 +29,9 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         url: mailpoet_mp2_migrator.log_file_url,
         cache: false
       }).done(function (result) {
-        jQuery("#logger").html('');
+        jQuery('#logger').html('');
-        result.split("\n").forEach(function (row) {
+        result.split('\n').forEach(function (resultRow) {
+          var row = resultRow;
           if(row.substr(0, 7) === '[ERROR]' || row.substr(0, 9) === '[WARNING]' || row === MailPoet.I18n.t('import_stopped_by_user')) {
             row = '<span class="error_msg">' + row + '</span>'; // Mark the errors in red
           }
@@ -37,10 +40,10 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
             jQuery('#import-actions').hide();
             jQuery('#upgrade-completed').show();
           }
-          jQuery("#logger").append(row + "<br />\n");
+          jQuery('#logger').append(row + '<br />\n');
 
         });
-        jQuery("#logger").append('<span class="error_msg">' + MailPoet.MP2Migrator.fatal_error + '</span>' + "<br />\n");
+        jQuery('#logger').append('<span class="error_msg">' + MailPoet.MP2Migrator.fatal_error + '</span>' + '<br />\n');
       }).always(function () {
         if(MailPoet.MP2Migrator.is_logging) {
           MailPoet.MP2Migrator.displayLogs_timeout = setTimeout(MailPoet.MP2Migrator.displayLogs, 1000);
@@ -61,8 +64,10 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         }
         jQuery('#progressbar').progressbar('option', 'value', progress);
         jQuery('#progresslabel').html(progress + '%');
-        if(Number(result.current !== 0)) {
+        if(Number(result.current) !== 0) {
           jQuery('#skip-import').hide();
+          jQuery('#progressbar').show();
+          jQuery('#logger-container').show();
         }
         if(MailPoet.MP2Migrator.is_logging) {
           MailPoet.MP2Migrator.updateProgressbar_timeout = setTimeout(MailPoet.MP2Migrator.updateProgressbar, 1000);
@@ -129,6 +134,15 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         jQuery('#stop-import').removeAttr('disabled'); // Enable the button
         MailPoet.MP2Migrator.reactivateImportButton();
         MailPoet.MP2Migrator.updateDisplay(); // Get the latest information after the import was stopped
+      }).fail(function (response) {
+        if(response.errors.length > 0) {
+          MailPoet.Notice.error(
+            response.errors.map(function (error) {
+              return error.message;
+            }),
+            {scroll: true}
+          );
+        }
       });
       MailPoet.MP2Migrator.stopLogger();
       return false;
@@ -143,6 +157,15 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         }
       }).done(function () {
         MailPoet.MP2Migrator.gotoWelcomePage();
+      }).fail(function (response) {
+        if(response.errors.length > 0) {
+          MailPoet.Notice.error(
+            response.errors.map(function (error) {
+              return error.message;
+            }),
+            {scroll: true}
+          );
+        }
       });
       return false;
     },

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,18 +9,19 @@ define([
     'mailpoet',
     'spectrum'
   ], function(Marionette, BehaviorsLookup, MailPoet, Spectrum) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.ColorPickerBehavior = Marionette.Behavior.extend({
+  BL.ColorPickerBehavior = Marionette.Behavior.extend({
     onRender: function() {
       this.view.$('.mailpoet_color').spectrum({
         clickoutFiresChange: true,
         showInput: true,
         showInitial: true,
-        preferredFormat: "hex6",
+        preferredFormat: 'hex6',
         allowEmpty: true,
         chooseText: MailPoet.I18n.t('selectColor'),
         cancelText: MailPoet.I18n.t('cancelColorSelection')
       });
-    },
+    }
   });
 });

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

@@ -11,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 =
+          target.style.webkitTransform = target.style.transform;
-            'translate(' + x + 'px, ' + y + 'px)';
 
           // update the posiion attributes
           target.setAttribute('data-x', x);
@@ -99,7 +100,8 @@ define([
         },
         onend: function (event) {
           var target = event.target;
-          target.style.webkitTransform = target.style.transform = '';
+          target.style.transform = '';
+          target.style.webkitTransform = target.style.transform;
           target.removeAttribute('data-x');
           target.removeAttribute('data-y');
           jQuery(event.interaction.element).addClass('mailpoet_droppable_active');
@@ -111,9 +113,10 @@ define([
               that.view.$el.removeClass('mailpoet_hidden');
             }
           }
-        },
+        }
       })
       .preventDefault('auto')
+      .styleCursor(false)
       .actionChecker(function (pointer, event, action) {
         // Disable dragging with right click
         if (event.button !== 0) {
@@ -128,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;
@@ -136,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',
+      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',
+      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');
@@ -49,7 +50,8 @@ define([
         if (newLength < that.options.minLength) newLength = that.options.minLength;
 
         that.view.model.set(that.options.modelField, newLength + 'px');
-      }).on('resizeend', function(event) {
+      })
+      .on('resizeend', function(event) {
         that.isBeingResized = null;
         that.$el.removeClass('mailpoet_resize_active');
       });
@@ -63,6 +65,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,14 +8,15 @@ define([
     'underscore',
     'newsletter_editor/behaviors/BehaviorsLookup'
   ], function(Marionette, _, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.SortableBehavior = Marionette.Behavior.extend({
+  BL.SortableBehavior = Marionette.Behavior.extend({
     onRender: function() {
       var collection = this.view.collection;
 
       if (_.isFunction(this.$el.sortable)) {
         this.$el.sortable({
-          cursor: "move",
+          cursor: 'move',
           start: function(event, ui) {
             ui.item.data('previousIndex', ui.item.index());
           },
@@ -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,17 +8,18 @@ define([
     'underscore',
     'newsletter_editor/behaviors/BehaviorsLookup'
   ], function(Marionette, _, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.TextEditorBehavior = Marionette.Behavior.extend({
+  BL.TextEditorBehavior = Marionette.Behavior.extend({
     defaults: {
       selector: '.mailpoet_content',
-      toolbar1: "bold italic link unlink forecolor mailpoet_shortcodes",
+      toolbar1: 'bold italic link unlink forecolor mailpoet_shortcodes',
-      toolbar2: "",
+      toolbar2: '',
-      validElements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
+      validElements: 'p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br',
-      invalidElements: "script",
+      invalidElements: 'script',
       blockFormats: 'Paragraph=p',
-      plugins: "link textcolor colorpicker mailpoet_shortcodes",
+      plugins: 'link textcolor colorpicker mailpoet_shortcodes',
-      configurationFilter: function(originalConfig) { return originalConfig; },
+      configurationFilter: function(originalConfig) { return originalConfig; }
     },
     onDomRefresh: function() {
       var that = this;
@@ -33,6 +34,8 @@ define([
         toolbar1: this.options.toolbar1,
         toolbar2: this.options.toolbar2,
 
+        browser_spellcheck: true,
+
         valid_elements: this.options.validElements,
         invalid_elements: this.options.invalidElements,
         block_formats: this.options.blockFormats,
@@ -76,7 +79,7 @@ define([
           editor.on('blur', function(e) {
             that.view.triggerMethod('text:editor:blur');
           });
-        },
+        }
       }));
     }
   });

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

@@ -28,7 +28,7 @@ define([
     jQuery
   ) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -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,29 +124,29 @@ define([
      */
     _scheduleFetchPosts: function() {
       App.getChannel().trigger('automatedLatestContentRefresh');
-    },
+    }
   });
 
   Module.AutomatedLatestContentBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block',
     initialize: function() {
       function replaceButtonStylesHandler(data) {
-        this.model.set({"readMoreButton": data});
+        this.model.set({readMoreButton: data});
       }
-      App.getChannel().on("replaceAllButtonStyles", replaceButtonStylesHandler.bind(this));
+      App.getChannel().on('replaceAllButtonStyles', replaceButtonStylesHandler.bind(this));
     },
     getTemplate: function() { return templates.automatedLatestContentBlock; },
     regions: {
       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
@@ -171,28 +171,28 @@ define([
     getTemplate: function() { return templates.automatedLatestContentBlockSettings; },
     events: function() {
       return {
-        "click .mailpoet_automated_latest_content_hide_display_options": 'toggleDisplayOptions',
+        'click .mailpoet_automated_latest_content_hide_display_options': 'toggleDisplayOptions',
-        "click .mailpoet_automated_latest_content_show_display_options": 'toggleDisplayOptions',
+        'click .mailpoet_automated_latest_content_show_display_options': 'toggleDisplayOptions',
-        "click .mailpoet_automated_latest_content_select_button": 'showButtonSettings',
+        'click .mailpoet_automated_latest_content_select_button': 'showButtonSettings',
-        "click .mailpoet_automated_latest_content_select_divider": 'showDividerSettings',
+        'click .mailpoet_automated_latest_content_select_divider': 'showDividerSettings',
-        "change .mailpoet_automated_latest_content_read_more_type": 'changeReadMoreType',
+        'change .mailpoet_automated_latest_content_read_more_type': 'changeReadMoreType',
-        "change .mailpoet_automated_latest_content_display_type": 'changeDisplayType',
+        'change .mailpoet_automated_latest_content_display_type': 'changeDisplayType',
-        "change .mailpoet_automated_latest_content_title_format": 'changeTitleFormat',
+        'change .mailpoet_automated_latest_content_title_format': 'changeTitleFormat',
-        "change .mailpoet_automated_latest_content_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
+        'change .mailpoet_automated_latest_content_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
-        "change .mailpoet_automated_latest_content_show_divider": _.partial(this.changeBoolField, 'showDivider'),
+        'change .mailpoet_automated_latest_content_show_divider': _.partial(this.changeBoolField, 'showDivider'),
-        "input .mailpoet_automated_latest_content_show_amount": _.partial(this.changeField, "amount"),
+        'input .mailpoet_automated_latest_content_show_amount': _.partial(this.changeField, 'amount'),
-        "change .mailpoet_automated_latest_content_content_type": _.partial(this.changeField, "contentType"),
+        'change .mailpoet_automated_latest_content_content_type': _.partial(this.changeField, 'contentType'),
-        "change .mailpoet_automated_latest_content_include_or_exclude": _.partial(this.changeField, "inclusionType"),
+        'change .mailpoet_automated_latest_content_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
-        "change .mailpoet_automated_latest_content_title_alignment": _.partial(this.changeField, "titleAlignment"),
+        'change .mailpoet_automated_latest_content_title_alignment': _.partial(this.changeField, 'titleAlignment'),
-        "change .mailpoet_automated_latest_content_image_full_width": _.partial(this.changeBoolField, "imageFullWidth"),
+        'change .mailpoet_automated_latest_content_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
-        "change .mailpoet_automated_latest_content_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
+        'change .mailpoet_automated_latest_content_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
-        "change .mailpoet_automated_latest_content_show_author": _.partial(this.changeField, "showAuthor"),
+        'change .mailpoet_automated_latest_content_show_author': _.partial(this.changeField, 'showAuthor'),
-        "input .mailpoet_automated_latest_content_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
+        'input .mailpoet_automated_latest_content_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
-        "change .mailpoet_automated_latest_content_show_categories": _.partial(this.changeField, "showCategories"),
+        'change .mailpoet_automated_latest_content_show_categories': _.partial(this.changeField, 'showCategories'),
-        "input .mailpoet_automated_latest_content_categories": _.partial(this.changeField, "categoriesPrecededBy"),
+        'input .mailpoet_automated_latest_content_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
-        "input .mailpoet_automated_latest_content_read_more_text": _.partial(this.changeField, "readMoreText"),
+        'input .mailpoet_automated_latest_content_read_more_text': _.partial(this.changeField, 'readMoreText'),
-        "change .mailpoet_automated_latest_content_sort_by": _.partial(this.changeField, "sortBy"),
+        'change .mailpoet_automated_latest_content_sort_by': _.partial(this.changeField, 'sortBy'),
-        "click .mailpoet_done_editing": "close",
+        'click .mailpoet_done_editing': 'close'
       };
     },
     onRender: function() {
@@ -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();
+    var Application = App;
-    App._ALCSupervisor.refresh();
+    Application._ALCSupervisor = new Module.ALCSupervisor();
+    Application._ALCSupervisor.refresh();
   });
 
   return Module;

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

@@ -14,7 +14,7 @@ define([
     'modal'
   ], function(App, Marionette, SuperModel, _, jQuery, MailPoet, Modal) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       AugmentedView = Marionette.View.extend({});
@@ -42,20 +42,21 @@ define([
     },
     getChildren: function() {
       return [];
-    },
+    }
   });
 
   Module.BlockView = AugmentedView.extend({
     regions: {
-      toolsRegion: '> .mailpoet_tools',
+      toolsRegion: '> .mailpoet_tools'
     },
     modelEvents: {
-      'change': 'render',
+      change: 'render',
-      'delete': 'deleteBlock',
+      delete: 'deleteBlock',
+      duplicate: 'duplicateBlock'
     },
     events: {
-      "mouseenter": "showTools",
+      mouseenter: 'showTools',
-      "mouseleave": "hideTools",
+      mouseleave: 'hideTools'
     },
     behaviors: {
       DraggableBehavior: {
@@ -78,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() {
@@ -142,6 +143,9 @@ define([
         this.model.destroy();
       }.bind(this));
     },
+    duplicateBlock: function() {
+      this.model.collection.add(this.model.toJSON(), {at: this.model.collection.findIndex(this.model)});
+    },
     transitionIn: function() {
       return this._transition('slideDown', 'fadeIn', 'easeOut');
     },
@@ -158,38 +162,40 @@ 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({
     getTemplate: function() { return templates.genericBlockTools; },
     events: {
-      "click .mailpoet_edit_block": "changeSettings",
+      'click .mailpoet_edit_block': 'changeSettings',
-      "click .mailpoet_delete_block_activate": "showDeletionConfirmation",
+      'click .mailpoet_delete_block_activate': 'showDeletionConfirmation',
-      "click .mailpoet_delete_block_cancel": "hideDeletionConfirmation",
+      'click .mailpoet_delete_block_cancel': 'hideDeletionConfirmation',
-      "click .mailpoet_delete_block_confirm": "deleteBlock",
+      'click .mailpoet_delete_block_confirm': 'deleteBlock',
+      'click .mailpoet_duplicate_block': 'duplicateBlock'
     },
     // Markers of whether these particular tools will be used for this instance
     tools: {
       settings: true,
       delete: true,
-      move: true,
+      duplicate: true,
+      move: true
     },
     getSettingsView: function() { return Module.BlockSettingsView; },
-    initialize: function(options) {
+    initialize: function(opts) {
-      options = options || {};
+      var options = opts || {};
       if (!_.isUndefined(options.tools)) {
         // Make a new block specific tool config object
         this.tools = jQuery.extend({}, this.tools, options.tools || {});
@@ -203,7 +209,7 @@ define([
       return {
         model: this.model.toJSON(),
         viewCid: this.cid,
-        tools: this.tools,
+        tools: this.tools
       };
     },
     changeSettings: function(options) {
@@ -221,12 +227,17 @@ define([
       this.model.trigger('delete');
       return false;
     },
+    duplicateBlock: function(event) {
+      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');
@@ -237,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') {
@@ -279,7 +290,7 @@ define([
     onBeforeDestroy: function() {
       MailPoet.Modal.close();
       this.model.trigger('stopEditing');
-    },
+    }
   });
 
   Module.WidgetView = Marionette.View.extend({
@@ -287,10 +298,10 @@ define([
     behaviors: {
       DraggableBehavior: {
         drop: function() {
-          throw "Unsupported operation";
+          throw 'Unsupported operation';
         }
       }
-    },
+    }
   });
 
   return Module;

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

@@ -9,7 +9,7 @@ define([
     'jquery'
   ], function(App, BaseBlock, MailPoet, _, jQuery) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -33,19 +33,19 @@ define([
             fontFamily: 'Arial',
             fontSize: '16px',
             fontWeight: 'normal', // 'normal'|'bold'
-            textAlign: 'center',
+            textAlign: 'center'
-          },
+          }
-        },
+        }
       }, App.getConfig().get('blockDefaults.button'));
-    },
+    }
   });
 
   Module.ButtonBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_button_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_button_block mailpoet_droppable_block',
     getTemplate: function() { return templates.buttonBlock; },
     onDragSubstituteBy: function() { return Module.ButtonWidgetView; },
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
-      ShowSettingsBehavior: {},
+      ShowSettingsBehavior: {}
     }),
     initialize: function() {
       base.BlockView.prototype.initialize.apply(this, arguments);
@@ -57,51 +57,51 @@ 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({
     getTemplate: function() { return templates.buttonBlockSettings; },
     events: function() {
       return {
-        "input .mailpoet_field_button_text": _.partial(this.changeField, "text"),
+        'input .mailpoet_field_button_text': _.partial(this.changeField, 'text'),
-        "input .mailpoet_field_button_url": _.partial(this.changeField, "url"),
+        'input .mailpoet_field_button_url': _.partial(this.changeField, 'url'),
-        "change .mailpoet_field_button_alignment": _.partial(this.changeField, "styles.block.textAlign"),
+        'change .mailpoet_field_button_alignment': _.partial(this.changeField, 'styles.block.textAlign'),
-        "change .mailpoet_field_button_font_color": _.partial(this.changeColorField, "styles.block.fontColor"),
+        'change .mailpoet_field_button_font_color': _.partial(this.changeColorField, 'styles.block.fontColor'),
-        "change .mailpoet_field_button_font_family": _.partial(this.changeField, "styles.block.fontFamily"),
+        'change .mailpoet_field_button_font_family': _.partial(this.changeField, 'styles.block.fontFamily'),
-        "change .mailpoet_field_button_font_size": _.partial(this.changeField, "styles.block.fontSize"),
+        'change .mailpoet_field_button_font_size': _.partial(this.changeField, 'styles.block.fontSize'),
-        "change .mailpoet_field_button_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_button_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "change .mailpoet_field_button_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
+        'change .mailpoet_field_button_border_color': _.partial(this.changeColorField, 'styles.block.borderColor'),
-        "change .mailpoet_field_button_font_weight": "changeFontWeight",
+        'change .mailpoet_field_button_font_weight': 'changeFontWeight',
 
-        "input .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_button_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "change .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'change .mailpoet_field_button_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "input .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_button_border_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
 
-        "input .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
+        'input .mailpoet_field_button_border_radius': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
-        "change .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
+        'change .mailpoet_field_button_border_radius': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
-        "input .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
+        'input .mailpoet_field_button_border_radius_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
 
-        "input .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
+        'input .mailpoet_field_button_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
-        "change .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
+        'change .mailpoet_field_button_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
-        "input .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
+        'input .mailpoet_field_button_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
 
-        "input .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
+        'input .mailpoet_field_button_line_height': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
-        "change .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
+        'change .mailpoet_field_button_line_height': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
-        "input .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
+        'input .mailpoet_field_button_line_height_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
 
-        "click .mailpoet_field_button_replace_all_styles": "applyToAll",
+        'click .mailpoet_field_button_replace_all_styles': 'applyToAll',
-        "click .mailpoet_done_editing": "close",
+        'click .mailpoet_done_editing': 'close'
       };
     },
     templateContext: function() {
       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

@@ -12,7 +12,7 @@ define([
     'newsletter_editor/blocks/base'
   ], function(Backbone, Marionette, _, jQuery, App, BaseBlock) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock,
@@ -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,
@@ -161,9 +161,10 @@ define([
         tools: {
           settings: this.renderOptions.depth === 1,
           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({
@@ -212,7 +213,7 @@ define([
         enableContainerLayer();
       }
       event.stopPropagation();
-    },
+    }
   });
 
   Module.ContainerBlockEmptyView = Marionette.View.extend({
@@ -223,45 +224,45 @@ 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({
     getTemplate: function() { return templates.containerBlockSettings; },
     events: function() {
       return {
-        "change .mailpoet_field_container_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_container_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "click .mailpoet_done_editing": "close",
+        'click .mailpoet_done_editing': 'close'
       };
     },
     regions: {
-      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({
@@ -272,9 +273,9 @@ define([
     templateContext: function() {
       return {
         model: this.model.toJSON(),
-        columnNumber: this.columnNumber,
+        columnNumber: this.columnNumber
       };
-    },
+    }
   });
 
   Module.OneColumnContainerWidgetView = base.WidgetView.extend({
@@ -287,12 +288,12 @@ define([
           return new Module.ContainerBlockModel({
             orientation: 'horizontal',
             blocks: [
-              new Module.ContainerBlockModel(),
+              new Module.ContainerBlockModel()
             ]
           });
         }
       }
-    },
+    }
   });
 
   Module.TwoColumnContainerWidgetView = base.WidgetView.extend({
@@ -306,12 +307,12 @@ define([
             orientation: 'horizontal',
             blocks: [
               new Module.ContainerBlockModel(),
-              new Module.ContainerBlockModel(),
+              new Module.ContainerBlockModel()
             ]
           });
         }
       }
-    },
+    }
   });
 
   Module.ThreeColumnContainerWidgetView = base.WidgetView.extend({
@@ -326,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

@@ -9,7 +9,7 @@ define([
     'mailpoet'
   ], function(App, BaseBlock, _, jQuery, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -24,15 +24,15 @@ define([
             padding: '12px',
             borderStyle: 'solid',
             borderWidth: '1px',
-            borderColor: '#000000',
+            borderColor: '#000000'
-          },
+          }
-        },
+        }
       }, App.getConfig().get('blockDefaults.divider'));
-    },
+    }
   });
 
   Module.DividerBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_divider_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_divider_block mailpoet_droppable_block',
     getTemplate: function() { return templates.dividerBlock; },
     modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
     behaviors: _.defaults({
@@ -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,38 +76,38 @@ 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({
     getTemplate: function() { return templates.dividerBlockSettings; },
     events: function() {
       return {
-        "click .mailpoet_field_divider_style": 'changeStyle',
+        'click .mailpoet_field_divider_style': 'changeStyle',
 
-        "input .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_divider_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "change .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'change .mailpoet_field_divider_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "input .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_divider_border_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
 
-        "change .mailpoet_field_divider_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
+        'change .mailpoet_field_divider_border_color': _.partial(this.changeColorField, 'styles.block.borderColor'),
-        "change .mailpoet_field_divider_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_divider_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "click .mailpoet_button_divider_apply_to_all": "applyToAll",
+        'click .mailpoet_button_divider_apply_to_all': 'applyToAll',
-        "click .mailpoet_done_editing": "close",
+        'click .mailpoet_done_editing': 'close'
       };
     },
     modelEvents: function() {
       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

@@ -7,7 +7,7 @@ define([
     'underscore'
   ], function(App, BaseBlock, _) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -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",
+    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,34 +67,34 @@ 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({
     getTemplate: function() { return templates.footerBlockSettings; },
     events: function() {
       return {
-        "change .mailpoet_field_footer_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
+        'change .mailpoet_field_footer_text_color': _.partial(this.changeColorField, 'styles.text.fontColor'),
-        "change .mailpoet_field_footer_text_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
+        'change .mailpoet_field_footer_text_font_family': _.partial(this.changeField, 'styles.text.fontFamily'),
-        "change .mailpoet_field_footer_text_size": _.partial(this.changeField, "styles.text.fontSize"),
+        'change .mailpoet_field_footer_text_size': _.partial(this.changeField, 'styles.text.fontSize'),
-        "change #mailpoet_field_footer_link_color": _.partial(this.changeColorField, "styles.link.fontColor"),
+        'change #mailpoet_field_footer_link_color': _.partial(this.changeColorField, 'styles.link.fontColor'),
-        "change #mailpoet_field_footer_link_underline": function(event) {
+        'change #mailpoet_field_footer_link_underline': function(event) {
         this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
       },
-        "change .mailpoet_field_footer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_footer_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "change .mailpoet_field_footer_alignment": _.partial(this.changeField, "styles.text.textAlign"),
+        'change .mailpoet_field_footer_alignment': _.partial(this.changeField, 'styles.text.textAlign'),
-        "click .mailpoet_done_editing": "close",
+        'click .mailpoet_done_editing': 'close'
       };
     },
     templateContext: function() {
       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

@@ -7,7 +7,7 @@ define([
     'underscore'
   ], function(App, BaseBlock, _) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock;
@@ -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",
+    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,34 +67,34 @@ 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({
     getTemplate: function() { return templates.headerBlockSettings; },
     events: function() {
       return {
-        "change .mailpoet_field_header_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
+        'change .mailpoet_field_header_text_color': _.partial(this.changeColorField, 'styles.text.fontColor'),
-        "change .mailpoet_field_header_text_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
+        'change .mailpoet_field_header_text_font_family': _.partial(this.changeField, 'styles.text.fontFamily'),
-        "change .mailpoet_field_header_text_size": _.partial(this.changeField, "styles.text.fontSize"),
+        'change .mailpoet_field_header_text_size': _.partial(this.changeField, 'styles.text.fontSize'),
-        "change #mailpoet_field_header_link_color": _.partial(this.changeColorField, "styles.link.fontColor"),
+        'change #mailpoet_field_header_link_color': _.partial(this.changeColorField, 'styles.link.fontColor'),
-        "change #mailpoet_field_header_link_underline": function(event) {
+        'change #mailpoet_field_header_link_underline': function(event) {
           this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
         },
-        "change .mailpoet_field_header_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_header_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "change .mailpoet_field_header_alignment": _.partial(this.changeField, "styles.text.textAlign"),
+        'change .mailpoet_field_header_alignment': _.partial(this.changeField, 'styles.text.textAlign'),
-        "click .mailpoet_done_editing": "close",
+        'click .mailpoet_done_editing': 'close'
       };
     },
     templateContext: function() {
       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,10 +4,11 @@
 define([
     'newsletter_editor/App',
     'newsletter_editor/blocks/base',
-    'underscore'
+    'underscore',
-  ], function(App, BaseBlock, _) {
+    'mailpoet'
+  ], function(App, BaseBlock, _, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
       base = BaseBlock,
@@ -25,24 +26,24 @@ define([
         height: '64px',
         styles: {
           block: {
-            textAlign: 'center',
+            textAlign: 'center'
-          },
+          }
-        },
+        }
       }, App.getConfig().get('blockDefaults.image'));
-    },
+    }
   });
 
   Module.ImageBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_image_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_image_block mailpoet_droppable_block',
     getTemplate: function() { return templates.imageBlock; },
     onDragSubstituteBy: function() { return Module.ImageWidgetView; },
     templateContext: function() {
       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,24 +54,34 @@ 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 {
-        "input .mailpoet_field_image_link": _.partial(this.changeField, "link"),
+        'input .mailpoet_field_image_link': _.partial(this.changeField, 'link'),
-        "input .mailpoet_field_image_address": 'changeAddress',
+        'input .mailpoet_field_image_address': 'changeAddress',
-        "input .mailpoet_field_image_alt_text": _.partial(this.changeField, "alt"),
+        'input .mailpoet_field_image_alt_text': _.partial(this.changeField, 'alt'),
-        "change .mailpoet_field_image_full_width": _.partial(this.changeBoolCheckboxField, "fullWidth"),
+        'change .mailpoet_field_image_full_width': _.partial(this.changeBoolCheckboxField, 'fullWidth'),
-        "change .mailpoet_field_image_alignment": _.partial(this.changeField, "styles.block.textAlign"),
+        'change .mailpoet_field_image_alignment': _.partial(this.changeField, 'styles.block.textAlign'),
-        "click .mailpoet_field_image_select_another_image": "showMediaManager",
+        'click .mailpoet_field_image_select_another_image': 'showMediaManager',
-        "click .mailpoet_done_editing": "close",
+        'click .mailpoet_done_editing': 'close'
       };
     },
     initialize: function(options) {
@@ -141,7 +152,7 @@ define([
               // Update user settings when users adjust the
               // attachment display settings.
               displayUserSettings: false
-            }),
+            })
           ]);
 
           if(wp.media.view.settings.post.featuredImageId) {
@@ -166,7 +177,7 @@ define([
 
           var handlers = {
               content: {
-                'embed': 'embedContent',
+                embed: 'embedContent',
                 'edit-selection': 'editSelectionContent'
               },
               toolbar: {
@@ -266,7 +277,8 @@ define([
         },
 
         mainEmbedToolbar: function(toolbar) {
-          toolbar.view = new wp.media.view.Toolbar.Embed({
+          var tbar = toolbar;
+          tbar.view = new wp.media.view.Toolbar.Embed({
             controller: this,
             text: 'Add images'
           });
@@ -274,7 +286,7 @@ define([
 
       });
 
-      var theFrame = this._mediaManager = new MediaManager({
+      var theFrame = new MediaManager({
           id: 'mailpoet-media-manager',
           frame: 'select',
           title: 'Select image',
@@ -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
     });
   });