Release 3.8.5

Catch error when rendering deactivation survey [MAILPOET-1491]

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015", "react", "stage-2"
+  ]
+}

.circleci/apache/mailpoet.loc.conf

@@ -1,6 +1,4 @@
-Listen 8080
-
-<VirtualHost *:8080>
+<VirtualHost *:80>
   UseCanonicalName Off
   ServerName mailpoet.loc
   DocumentRoot /home/circleci/mailpoet/wordpress
@@ -8,6 +6,9 @@ Listen 8080
   LogLevel notice
 
   <Directory /home/circleci/mailpoet/wordpress>
+    Options Indexes FollowSymLinks
+    AllowOverride All
+    RewriteEngine On
     Require all granted
   </Directory>
 </VirtualHost>

.circleci/config.yml

@@ -1,9 +1,9 @@
 version: 2
 jobs:
-  qa_js_php5:
+  qa_js_security_php5:
     working_directory: /home/circleci/mailpoet
     docker:
-      - image: circleci/php:5.6.30-apache-browsers
+      - image: mailpoet/wordpress:5.6.30_20180417.1
       - image: circleci/mysql:5.7
     environment:
       TZ: /usr/share/zoneinfo/Etc/UTC
@@ -38,6 +38,10 @@ jobs:
           command: |
             mkdir test-results/mocha
             ./do t:j test-results/mocha/junit.xml
+      - run:
+          name: "Composer security check"
+          command: |
+            ./do s:composer
       - run:
           name: "PHP Unit tests"
           command: |
@@ -81,6 +85,7 @@ jobs:
               curl -sS https://getcomposer.org/installer | php
               php composer.phar install
               ./do install
+              ./do compile:all --env production
       - save_cache:
           key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
           paths:
@@ -94,13 +99,56 @@ jobs:
           command: |
               docker-compose run codeception --steps --debug -vvv --html --xml
       - store_artifacts:
-          path: ~/mailpoet/tests/acceptance-tests/_output
+          path: tests/_output
       - store_test_results:
-          path: ~/mailpoet/tests/acceptance-tests/_output
+          path: tests/_output
+  acceptance_tests_multisite:
+      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
+                ./do compile:all --env production
+        - 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 -e MULTISITE=1 codeception --steps --debug -vvv --html --xml
+        - store_artifacts:
+            path: tests/_output
+        - store_test_results:
+            path: tests/_output
   php7:
     working_directory: /home/circleci/mailpoet
     docker:
-      - image: circleci/php:7.1-apache-browsers
+      - image: mailpoet/wordpress:7.1_20180417.1
       - image: circleci/mysql:5.7
     environment:
       TZ: /usr/share/zoneinfo/Etc/UTC
@@ -109,6 +157,9 @@ jobs:
       - run:
           name: "Set up virtual host"
           command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
+      - run:
+          name: "Prepare example.com for testing"
+          command: echo 127.0.0.1 example.com | sudo tee -a /etc/hosts
       - restore_cache:
           key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
       - restore_cache:
@@ -119,7 +170,41 @@ jobs:
       - run:
           name: "PHP Unit tests"
           command: |
-            WP_TEST_PATH="/home/circleci/mailpoet/wordpress" ./do t:u --xml
+            ./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
+  php7_multisite:
+    working_directory: /home/circleci/mailpoet
+    docker:
+      - image: mailpoet/wordpress:7.1_20180417.1
+      - 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
+      - run:
+          name: "Prepare example.com for testing"
+          command: echo 127.0.0.1 example.com | 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_multisite
+      - run:
+          name: "PHP Unit tests"
+          command: |
+            ./do t:multisite-unit --xml
       - store_test_results:
           path: tests/_output
       - store_artifacts:
@@ -132,6 +217,8 @@ workflows:
   version: 2
   build_and_test:
     jobs:
-      - qa_js_php5
+      - qa_js_security_php5
       - php7
+      - php7_multisite
       - acceptance_tests
+      - acceptance_tests_multisite

.circleci/setup.bash

@@ -2,47 +2,66 @@
 
 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
+	local wp_cli_wordpress_path="--path=wordpress"
+	local wp_cli_allow_root="--allow-root"
+
 	# 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 a2dissite 000-default.conf
 	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
+
+	until mysql -h 127.0.0.1 -u root -e "select 1"; do
+        >&2 echo "Mysql is starting up ... will try again momentarily"
+        sleep 1
+    done
+
+	# 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
+	wp core download $wp_cli_wordpress_path $wp_cli_allow_root
+
 	# 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
+	echo "define(\"WP_DEBUG\", true);" | wp core config --dbname=wordpress --dbuser=root --dbhost=127.0.0.1 --extra-php $wp_cli_wordpress_path $wp_cli_allow_root
+
+	# Change default table prefix
+	sed -i "s/\$table_prefix = 'wp_';/\$table_prefix = 'mp_';/" ./wordpress/wp-config.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
+    if [[ $version == "php7_multisite" ]]; then
+        # Configure multisite environment
+    	wp core multisite-install --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc --title="WordPress MultiSite" $wp_cli_wordpress_path $wp_cli_allow_root
+    	cp ./.circleci/wordpress/.htaccess ./wordpress/
+
+    	# Add a second blog
+    	wp site create --slug=php7_multisite $wp_cli_wordpress_path $wp_cli_allow_root
+    	echo "WP_TEST_MULTISITE_SLUG=php7_multisite" >> .env
+    	echo "WP_TEST_PATH_MULTISITE=/home/circleci/mailpoet/wordpress" >> .env
+    	echo "HTTP_HOST=mailpoet.loc" >> .env
+
+    	# Add a third dummy blog
+        wp site create --slug=dummy_multisite $wp_cli_wordpress_path $wp_cli_allow_root
+    else
+    	wp core install --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc --title="WordPress Single" $wp_cli_wordpress_path $wp_cli_allow_root
+    	echo "WP_TEST_PATH=/home/circleci/mailpoet/wordpress" >> .env
+    fi
+
 	# 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
+
+	# Activate plugin
+	if [[ $version == "php7_multisite" ]]; then
+	    wp plugin activate mailpoet --url=http://mailpoet.loc/php7_multisite/ $wp_cli_wordpress_path $wp_cli_allow_root
+	else
+	    wp plugin activate mailpoet $wp_cli_wordpress_path $wp_cli_allow_root
+	fi
 }

.circleci/wordpress/.htaccess

@@ -0,0 +1,12 @@
+RewriteEngine On
+RewriteBase /
+RewriteRule ^index\.php$ - [L]
+
+RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
+
+RewriteCond %{REQUEST_FILENAME} -f [OR]
+RewriteCond %{REQUEST_FILENAME} -d
+RewriteRule ^ - [L]
+RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
+RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
+RewriteRule . index.php [L]

.env.sample

@@ -1,4 +1,6 @@
 WP_TEST_PATH="/var/www/wordpress"
+WP_TEST_PATH_MULTISITE="/var/www/wordpress"
+WP_TEST_MULTISITE_SLUG=""
 WP_TEST_ENABLE_NETWORK_TESTS="true"
 WP_TEST_IMPORT_MAILCHIMP_API=""
 WP_TEST_IMPORT_MAILCHIMP_LISTS="" // (separated with comma)
@@ -16,4 +18,5 @@ WP_TEST_MAILER_SMTP_LOGIN=""
 WP_TEST_MAILER_SMTP_PASSWORD=""
 WP_SVN_USERNAME=""
 WP_SVN_PASSWORD=""
-WP_TRANSIFEX_API_TOKEN=""
+WP_TRANSIFEX_API_TOKEN=""
+HTTP_HOST="" // URL of your site (used for multisite env and equals to DOMAIN_CURRENT_SITE from wp-config.php)

.eslintrc.es5.json

@@ -8,80 +8,6 @@
     "ecmaVersion": 5
   },
   "rules": {
-    "import/no-amd": 0,
-    "space-before-function-paren": 0,
-    "prefer-arrow-callback": 0,
-    "no-undef": 0,
-    "key-spacing": 0,
-    "radix": 0,
-    "no-alert": 0,
-    "block-scoped-var": 0,
-    "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-continue": 0,
-    "no-new": 0,
-    "space-unary-ops": 0,
-    "no-redeclare": 0,
-    "no-console": 0,
-    "no-empty": 0,
-    "no-extra-semi": 0,
-    "no-useless-escape": 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,
-    "space-before-blocks": 0,
-    "no-unneeded-ternary": 0,
-    "no-mixed-operators": 0,
-    "eqeqeq": 0,
-    "space-in-parens": 0,
-    "semi": 0,
-    "max-len": 0,
-    "no-trailing-spaces": 0,
-    "global-require": 0,
-    "no-throw-literal": 0,
-    "no-extra-bind": 0,
-    "one-var-declaration-per-line": 0,
-    "consistent-return": 0,
-    "no-shadow": 0,
-    "no-underscore-dangle": 0,
-    "brace-style": 0,
-    "no-else-return": 0,
-    "no-use-before-define": 0,
-    "one-var": 0,
-    "camelcase": 0,
-    "spaced-comment": 0,
-    "padded-blocks": 0,
-    "object-curly-spacing": 0,
-    "strict": 0,
-    "vars-on-top": 0,
-    "no-var": 0,
-    "space-infix-ops": 0,
-    "no-unused-vars": 0,
-    "object-shorthand": 0,
-    "new-parens": 0,
-    "keyword-spacing": 0,
-    "eol-last": 0,
-    "dot-notation": 0,
-    "linebreak-style": 0,
-    "indent": 0,
-    "prefer-template": 0,
-    "func-names": 0
+    "no-underscore-dangle": 0 // Backbone uses underscores, we cannot remove them
   }
 }

.eslintrc.es6.json

@@ -10,79 +10,13 @@
       "jsx": true
     }
   },
+  "settings": {
+    "import/resolver": "webpack"
+  },
   "rules": {
+    // Exceptions
     "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,
-    "react/prop-types": 0,
-    "react/jsx-first-prop-new-line": 0,
-    "react/jsx-indent-props": 0,
-    "react/no-is-mounted": 0,
-    "react/jsx-no-target-blank": 0,
-    "react/no-render-return-value": 0,
-    "react/jsx-boolean-value": 0,
-    "react/jsx-indent": 0,
-    "react/jsx-no-bind": 0,
-    "react/no-array-index-key": 0,
-    "react/self-closing-comp": 0,
-    "react/jsx-tag-spacing": 0,
-    "react/jsx-closing-bracket-location": 0,
-    "react/no-string-refs": 0,
-    "react/jsx-curly-spacing": 0,
-    "react/no-did-mount-set-state": 0,
-    "react/prefer-stateless-function": 0,
-    "jsx-a11y/label-has-for": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "jsx-a11y/alt-text": 0,
-    "func-names": 0,
-    "object-shorthand": 0,
-    "no-bitwise": 0,
-    "arrow-body-style": 0,
-    "prefer-template": 0,
-    "keyword-spacing": 0,
-    "default-case": 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,
-    "eqeqeq": 0,
-    "no-lonely-if": 0,
-    "space-unary-ops": 0,
-    "block-scoped-var": 0,
-    "no-extra-bind": 0,
-    "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,
-    "no-useless-concat": 0,
-    "no-unused-expressions": 0,
-    "no-sequences": 0,
-    "no-extra-boolean-cast": 0,
-    "dot-notation": 0,
-    "no-shadow": 0,
-    "one-var": 0,
-    "no-alert": 0,
-    "one-var-declaration-per-line": 0,
     "no-script-url": 0,
-    "wrap-iife": 0,
-    "vars-on-top": 0,
-    "space-infix-ops": 0,
-    "no-irregular-whitespace": 0,
-    "padded-blocks": 0,
-    "no-underscore-dangle": 0,
-    "no-undef": 0
+    "import/extensions": 0 // we wouldn't be able to import jQuery without this line
   }
 }

.eslintrc.tests.json

@@ -8,32 +8,9 @@
     "ecmaVersion": 6
   },
   "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,
-    "newline-per-chained-call": 0,
-    "no-spaced-func": 0,
-    "func-call-spacing": 0,
-    "max-len": 0,
-    "space-unary-ops": 0,
-    "no-unused-vars": 0,
-    "no-unused-expressions": 0,
-    "no-underscore-dangle": 0,
-    "no-shadow": 0,
-    "padded-blocks": 0,
-    "vars-on-top": 0,
-    "space-before-blocks": 0,
-    "object-curly-spacing": 0,
-    "one-var-declaration-per-line": 0,
+    // Exceptions
     "func-names": 0,
-    "space-before-function-paren": 0
+    // Temporary
+    "no-underscore-dangle": 0
   }
 }

.gitignore

@@ -2,6 +2,7 @@
 TODO
 composer.phar
 /vendor
+/vendor_backup
 tests/_output/*
 tests/_support/_generated/*
 node_modules
@@ -20,4 +21,5 @@ assets/js/*.json
 .vagrant
 lang
 .mp_svn
-/nbproject/
+/nbproject/
+tests/_data/acceptanceGenerated.sql

Dockerfile

@@ -1,26 +1,8 @@
-FROM php:5.6-cli
+FROM mailpoet/wordpress:5.6-cli_20180417.1
 
 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
+RUN composer global require --optimize-autoloader "hirak/prestissimo"
 
 # Prepare application
 WORKDIR /repo
@@ -36,4 +18,4 @@ ENV WP_TEST_PATH=/wp-core
 
 ADD docker-entrypoint.sh /
 
-RUN ["chmod", "+x", "/docker-entrypoint.sh"]
+RUN ["chmod", "+x", "/docker-entrypoint.sh"]

RoboFile.php

@@ -90,6 +90,7 @@ class RoboFile extends \Robo\Tasks {
 
     $css_files = array(
       'assets/css/src/admin.styl',
+      'assets/css/src/admin-global.styl',
       'assets/css/src/newsletter_editor/newsletter_editor.styl',
       'assets/css/src/public.styl',
       'assets/css/src/rtl.styl',
@@ -152,17 +153,34 @@ class RoboFile extends \Robo\Tasks {
     return $this->_exec('./tasks/transifex_init.sh');
   }
 
-  function testUnit($opts=['file' => null, 'xml' => false]) {
+  function testUnit(array $opts=['file' => null, 'xml' => false, 'multisite' => false, 'debug' => false]) {
     $this->loadEnv();
 
-    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml -f '.(($opts['file']) ? $opts['file'] : '');
+    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml';
+
+    if($opts['multisite']) {
+      $command = 'MULTISITE=true ' . $command;
+    }
+
+    if($opts['file']) {
+      $command .= ' -f ' . $opts['file'];
+    }
 
     if($opts['xml']) {
       $command .= ' --xml';
     }
+
+    if($opts['debug']) {
+      $command .= ' --debug';
+    }
+
     return $this->_exec($command);
   }
 
+  function testMultisiteUnit($opts=['file' => null, 'xml' => false, 'multisite' => true]) {
+    return $this->testUnit($opts);
+  }
+
   function testCoverage($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
     $command = join(' ', array(
@@ -197,6 +215,10 @@ class RoboFile extends \Robo\Tasks {
     return $this->_exec($command);
   }
 
+  function securityComposer() {
+    return $this->_exec('vendor/bin/security-checker security:check --format=simple');
+  }
+
   function testDebug($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
@@ -209,8 +231,27 @@ class RoboFile extends \Robo\Tasks {
     return $this->_exec($command);
   }
 
-  function testAcceptance() {
-    return $this->_exec('COMPOSE_HTTP_TIMEOUT=200 docker-compose run codeception --steps --debug -vvv');
+  function testAcceptance($opts=['file' => null, 'keep-deps' => false]) {
+    return $this->_exec(
+      'COMPOSE_HTTP_TIMEOUT=200 docker-compose run ' .
+      ($opts['keep-deps'] ? '-e KEEP_DEPS=1 ' : '') .
+      'codeception --steps --debug -vvv ' .
+      '-f ' . ($opts['file'] ? $opts['file'] : '')
+    );
+  }
+
+  function testAcceptanceMultisite($opts=['file' => null, 'keep-deps' => false]) {
+    return $this->_exec(
+      'COMPOSE_HTTP_TIMEOUT=200 docker-compose run ' .
+      ($opts['keep-deps'] ? '-e KEEP_DEPS=1 ' : '') .
+      '-e MULTISITE=1 ' .
+      'codeception --steps --debug -vvv' .
+      '-f ' . ($opts['file'] ? $opts['file'] : '')
+    );
+  }
+
+  function deleteDocker() {
+    return $this->_exec('docker-compose down -v --remove-orphans --rmi all');
   }
 
   function testFailed() {
@@ -247,7 +288,7 @@ class RoboFile extends \Robo\Tasks {
       ->taskExec(
         './vendor/bin/phpcs '.
         '--standard=./tasks/code_sniffer/MailPoet '.
-        '--runtime-set testVersion 5.3-7.0 '.
+        '--runtime-set testVersion 5.4-7.2 '.
         '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
         './lib/Util/pQuery/*,./lib/Config/PopulatorData/Templates/* '.
         'lib/ '.
@@ -256,7 +297,7 @@ class RoboFile extends \Robo\Tasks {
       ->taskExec(
         './vendor/bin/phpcs '.
         '--standard=./tasks/code_sniffer/MailPoet '.
-        '--runtime-set testVersion 5.4-7.0 '.
+        '--runtime-set testVersion 5.4-7.2 '.
         '--ignore=./tests/unit/_bootstrap.php '.
         'tests/unit/ '.
         $severityFlag
@@ -288,15 +329,16 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function svnPublish($opts = ['force' => false]) {
-    $this->loadWPFunctions();
+    $this->loadEnv();
 
     $svn_dir = ".mp_svn";
-    $plugin_data = get_plugin_data('mailpoet.php', false, false);
-    $plugin_version = $plugin_data['Version'];
-    $plugin_dist_name = sanitize_title_with_dashes($plugin_data['Name']);
-    $plugin_dist_name = explode('-', $plugin_dist_name);
-    $plugin_dist_name = $plugin_dist_name[0];
+    $plugin_version = $this->getPluginVersion('mailpoet.php');
+    $plugin_dist_name = 'mailpoet';
     $plugin_dist_file = $plugin_dist_name . '.zip';
+
+    if(!$plugin_version) {
+      throw new \Exception('Could not parse plugin version, check the plugin header');
+    }
     $this->say('Publishing version: ' . $plugin_version);
 
     // Sanity checks
@@ -415,13 +457,9 @@ class RoboFile extends \Robo\Tasks {
     $dotenv->load();
   }
 
-  protected function loadWPFunctions() {
-    $this->loadEnv();
-    define('ABSPATH', getenv('WP_TEST_PATH') . '/');
-    define('WPINC', 'wp-includes');
-    require_once(ABSPATH . WPINC . '/functions.php');
-    require_once(ABSPATH . WPINC . '/formatting.php');
-    require_once(ABSPATH . WPINC . '/plugin.php');
-    require_once(ABSPATH . 'wp-admin/includes/plugin.php');
+  protected function getPluginVersion($file) {
+    $data = file_get_contents($file);
+    preg_match('/^[ \t*]*Version:(.*)$/mi', $data, $m);
+    return !empty($m[1]) ? trim($m[1]) : false;
   }
 }

assets/css/src/admin-global.styl

@@ -0,0 +1,18 @@
+@import 'nib'
+
+@require 'icons'
+
+/*
+Style for Members plugin
+*/
+
+.members-tab-title
+  .mailpoet-icon-logo
+    vertical-align: middle;
+    height: 20px;
+    width: 20px;
+    font-size: 20px;
+    margin-right: 3px;
+
+#wpbody
+  padding-bottom: 20px;

assets/css/src/admin.styl

@@ -2,6 +2,7 @@
 
 @require 'select2/dist/css/select2.css'
 @require 'datepicker/datepicker'
+@require 'badge'
 
 @require 'common'
 @require 'modal'
@@ -27,3 +28,8 @@
 @require 'pages_custom'
 
 @require 'mp2migrator'
+
+@require '../../../node_modules/react-confirm-alert/src/react-confirm-alert.css'
+
+@require 'newsletter_templates'
+@require 'welcome_wizard'

assets/css/src/badge.styl

@@ -0,0 +1,9 @@
+badge()
+  text-transform uppercase
+  cursor pointer
+  color white
+  font-size 0.5625rem
+  font-weight 500
+  border-radius 3px
+  letter-spacing 1px
+  vertical-align middle

assets/css/src/common.styl

@@ -28,6 +28,20 @@ a:focus
 .select2-container
   width: 25em !important
 
+placeholder-color = #999 /* default Select2 placeholder color for single dropdown */
+
+input.select2-search__field::-webkit-input-placeholder
+  color: placeholder-color
+input.select2-search__field:-moz-placeholder
+  color: placeholder-color
+input.select2-search__field::-moz-placeholder
+  color: placeholder-color
+input.select2-search__field:-ms-input-placeholder
+  color: placeholder-color
+
+.select2-container--default.select2-container--focus .select2-selection--multiple
+  border: 1px solid #aaa; /* default Select2 border for single dropdown */
+
 // textareas
 textarea.regular-text
   width: 25em !important
@@ -57,3 +71,10 @@ progress::-webkit-progress-value
 progress::-moz-progress-bar
   background-color: progress-foreground
   border-radius: progress-border-radius
+
+span.feedback-tooltip
+  badge()
+  display inline-block
+  padding 0 4px
+  background-color #ca4a1f
+

assets/css/src/icons.styl

@@ -0,0 +1,24 @@
+icon-font-path ?= "../fonts"
+
+@font-face
+  font-family 'mailpoet'
+  src url(icon-font-path + '/mailpoet.ttf?mx0b6n') format('truetype'), url(icon-font-path + '/mailpoet.woff?mx0b6n') format('woff'), url(icon-font-path + '/mailpoet.svg?mx0b6n#mailpoet') format('svg')
+  font-weight normal
+  font-style normal
+
+[class^="mailpoet-icon-"], [class*=" mailpoet-icon-"]
+  font-family 'mailpoet' !important
+  speak none
+  font-style normal
+  font-weight normal
+  font-variant normal
+  text-transform none
+  line-height 1
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+
+.mailpoet-icon-logo
+  &:before
+    content "\e900"

assets/css/src/listing/newsletters.styl

@@ -2,6 +2,7 @@ $excellent-badge-color = #2993ab
 $good-badge-color = #f0b849
 $bad-badge-color = #d54e21
 $green-badge-color = #55bd56
+$video-guide-badge-color = #46b450
 
 #newsletters_container
   h2.nav-tab-wrapper
@@ -31,23 +32,34 @@ $green-badge-color = #55bd56
 
 .mailpoet_badge
   padding: 4px 6px 3px 6px
-  color: #FFFFFF
   margin-right: 4px
-  text-transform: uppercase
-  font-size: 0.5625rem
-  font-weight: 500
-  border-radius: 3px
-  letter-spacing: 1px
-  vertical-align: middle
+  badge()
 
-  &_excellent
+  &_excellent, &_teal
     background: $excellent-badge-color
 
-  &_good
+  &_good, &_yellow
     background: $good-badge-color
 
-  &_bad
+  &_bad, &_red
     background: $bad-badge-color
 
   &_green
     background: $green-badge-color
+
+  &_video
+    background: $video-guide-badge-color
+    line-height: 5em
+    padding: 7px 6px 7px 6px
+    text-decoration: none
+
+    &:hover, &:active, &:focus
+      color: #FFFFFF
+      background: $green-badge-color
+
+    &_grey
+      background: #c3c3c3
+
+    .dashicons
+      font-size: 14px;
+      line-height: 3.4em;

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

@@ -41,6 +41,8 @@ $master-column-tool-width = 24px
       right: initial
 
     &.mailpoet_display_tools
+      z-index: 21
+
       .mailpoet_tool_slider
         left: 0
 
@@ -163,6 +165,7 @@ $master-column-tool-width = 24px
 
 .mailpoet_delete_block_confirm
   color: $warning-text-color
+  float: right
 
   &:hover
     color: $warning-text-color
@@ -170,6 +173,7 @@ $master-column-tool-width = 24px
 
 .mailpoet_delete_block_cancel
   color: $warning-alternate-text-color
+  float: right
 
   &:hover
     color: $warning-alternate-text-color

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

@@ -12,9 +12,11 @@
   font-size: 23px
 
 .mailpoet_breadcrumbs
-  float: right
-  clear: both
+  float: left
   margin-bottom: 13px
-  margin-right: 17px
+  margin-left: 17px
   font-size: 0.9em
   text-transform: uppercase
+
+  p
+    margin: 0

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

@@ -48,3 +48,41 @@ $resize-handle-z-index = 2
 
   .mailpoet_resize_handle
     display: inline-block
+
+
+.mailpoet_image_resize_handle_container
+  position: absolute
+  bottom: 0
+  right: 0
+  width: 20px
+  height: 20px
+
+.mailpoet_image_resize_handle
+  position: relative
+  background: $resize-handle-background-color
+  border-radius(3px)
+  display: inline-block
+  width: 20px
+  height: 20px
+  cursor: nwse-resize
+  z-index: $resize-handle-z-index
+
+  .mailpoet_image_resize_handle_text,
+  .mailpoet_image_resize_handle_icon
+    pointer-events: none
+
+.mailpoet_image_resize_handle_icon
+  position: absolute
+  top: 0
+  right: 0
+
+  & > svg
+    width: 100%
+    height: 100%
+    fill: $resize-handle-font-color
+
+.mailpoet_block.mailpoet_image_resize_active > .mailpoet_block_highlight
+  border: 1px dashed $resize-active-color
+
+  .mailpoet_image_resize_handle
+    display: inline-block

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

@@ -1,15 +1,23 @@
 #mailpoet_editor_bottom
-  margin-top: 39px
-  margin-left: 29px
+  margin: 10px 0 70px
+
+.mailpoet_save_wrapper
+  float: right
+  position: relative
+  margin-right: 20px
+  margin-bottom: 10px
 
 .mailpoet_save_options
   border-radius(3px)
 
-  float: left
+  position: absolute
+  right: 0
+  z-index: 1000
   overflow: hidden
-  margin: 5px 0 0 0
+  margin: 5px 0
   clear: both
   vertical-align: top
+  white-space: nowrap
 
   background: $white-color
   border: 1px solid $content-border-color
@@ -33,23 +41,19 @@
 .mailpoet_save_show_options
   padding: 6px 3px 4px
 
-  &.mailpoet_save_show_options_active
-    .mailpoet_save_show_options_icon::before
-      content: '\f142'
-
 .mailpoet_save_show_options_icon
   vertical-align: middle
 
-  &::before
-    content: '\f140'
-
 .mailpoet_save_as_template_container,
 .mailpoet_export_template_container
   border-radius(3px)
   display: inline-block
+  position: absolute
+  right: 0
+  z-index: 1000
   clear: both
 
-  margin-top: 5px
+  margin: 5px 0
   padding: 0 10px
   background-color: $white-color
   border: 1px solid $structure-border-color
@@ -61,7 +65,41 @@
 .mailpoet_editor_last_saved
   color: $primary-inactive-color
   font-size: 0.9em
-  display: inline
+  position: absolute
+  right: 0
+  margin-top: 10px
 
 .mailpoet_save_error
   color: $error-text-color
+
+.mailpoet_save_dropdown_down
+  .mailpoet_save_options,
+  .mailpoet_save_as_template_container,
+  .mailpoet_export_template_container
+    top: 100%
+    bottom: auto
+
+  .mailpoet_save_show_options
+    &.mailpoet_save_show_options_active
+      .mailpoet_save_show_options_icon::before
+        content: '\f142'
+
+  .mailpoet_save_show_options_icon
+    &::before
+      content: '\f140'
+
+.mailpoet_save_dropdown_up
+  .mailpoet_save_options,
+  .mailpoet_save_as_template_container,
+  .mailpoet_export_template_container
+    top: auto
+    bottom: 100%
+
+  .mailpoet_save_show_options
+    &.mailpoet_save_show_options_active
+      .mailpoet_save_show_options_icon::before
+        content: '\f140'
+
+  .mailpoet_save_show_options_icon
+    &::before
+      content: '\f142'

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

@@ -14,7 +14,7 @@
     cursor: pointer
 
 .mailpoet_automated_latest_content_block_posts
-  overflow: auto
+  overflow: hidden
   pointer-events: none
 
   & > .mailpoet_block

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

@@ -21,10 +21,14 @@ $block-text-line-height = $text-line-height
     left: 0
     pointer-events: none
     border: 1px solid $transparent-color
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
 
   &:hover > .mailpoet_block_highlight
-  &.mailpoet_highlight > .mailpoet_block_highlight
     border: 1px dashed $block-hover-highlight-color
+    
+  &.mailpoet_highlight > .mailpoet_block_highlight
+    border: 1px dashed $block-hover-highlight-color !important
 
 .mailpoet_content
   position: relative

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

@@ -52,7 +52,9 @@ $three-column-width = ($newsletter-width / 3) - (2 * $column-margin)
     width: $column-margin + $one-column-width + $column-margin
 
   // More than one column
-  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal
+  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
+  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_posts_block > .mailpoet_posts_container > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
+  & > .mailpoet_container_block > .mailpoet_container .mailpoet_automated_latest_content_block_posts .mailpoet_container_horizontal
 
     // Column number detection technique found here:
     // http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has

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

@@ -3,14 +3,19 @@
   img
     vertical-align: bottom
     max-width: 100%
-    width: auto
     height: auto
 
   &.mailpoet_full_image
     padding-left: 0
     padding-right: 0
+    margin: auto
     margin-bottom: 0
 
-  .mailpoet_content a:hover
-    cursor: all-scroll
+  .mailpoet_content 
+    margin: auto
+    max-width: 100%
+    min-width: 36px
+    
+    a:hover
+      cursor: all-scroll
 

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

@@ -54,3 +54,6 @@
 
 .mailpoet_post_selection_loading
   color: #999
+
+.mailpoet_posts_container > .mailpoet_droppable_block
+  width: 100%

assets/css/src/newsletter_editor/layout.styl

@@ -8,6 +8,8 @@ $content-border-color = $structure-border-color
 #mailpoet_editor_heading
   padding-left: 15px
   margin-left: 2px
+  margin-bottom: 13px
+  clear: both
 
 #mailpoet_editor_main_wrapper
   border: 1px solid $content-border-color

assets/css/src/newsletter_editor/libraryOverrides.styl

@@ -131,6 +131,7 @@ body
 .notice
 .update-nag
   margin-left: 2px + 15px !important
+  margin-right: 20px !important
 
 /* Make a button group */
 .mailpoet_button_group

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

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

assets/css/src/newsletter_templates.styl

@@ -0,0 +1,12 @@
+@require 'newsletter_editor/variables'
+
+.mailpoet_template_iframe
+  position: absolute
+  z-index: -9999
+  top: 0
+  left: 0
+  width: $newsletter-width
+  max-width: $newsletter-width
+
+.newsletter-templates-feedback
+  margin: 0 10px

assets/css/src/notice.styl

@@ -1,9 +1,3 @@
 .mailpoet_notice
   position: relative
-
-.mailpoet_notice_close
-  position: absolute
-  right: 0.5em
-  top: 0.5em
-  color: #999
-  text-decoration: none !important
+  clear: both

assets/css/src/pages.styl

@@ -46,12 +46,17 @@ Please add custom styles to pages_custom.styl
     margin-right: auto
 
   h1
-    margin: 0.2em 200px 0 0
+    margin: 1em 0 0.5em 0
     padding: 0
     color: #32373c
     line-height: 1.2em
     font-size: 2.8em
     font-weight: 400
+    text-align: center
+
+  h1.welcome
+    margin-right: 200px
+    text-align: left
 
   h2
     margin: 40px 0 .6em

assets/css/src/pages_custom.styl

@@ -33,3 +33,6 @@ Custom styles for MailPoet pages.
 
   p.top-space-triple
     margin-top: 3em
+
+  p.mailpoet-top-text
+    margin-right: 0

assets/css/src/progress_bar.styl

@@ -28,3 +28,36 @@
   .mailpoet_progress_bar
     background-color: hsla(191, 78%, 80%, 1)
     background-image: linear-gradient(top,  hsla(191, 78%, 80%, 1), hsla(191, 76%, 67%, 1))
+
+.mailpoet_stepped_progress_bar
+  margin: auto
+  width: 400px
+  &:before
+    position: relative
+    top: 9px
+    content: ""
+    display: block
+    height: 2px
+    width: 100%
+    border-radius: 2px
+    background-color: #d8d8d8
+    margin: auto
+
+.mailpoet_stepped_progress_bar_step
+  display: inline-block
+  &:before
+    position: relative
+    content: ""
+    display: block
+    height: 14px
+    width: 14px
+    border-radius: 14px
+    background-color: #d8d8d8
+    margin: auto
+  &.active
+    &:before
+      background-color: #979797
+
+@media screen and (max-width 520px)
+  .mailpoet_stepped_progress_bar
+    width: 360px

assets/css/src/settings.styl

@@ -19,13 +19,15 @@
       flex-direction column
       flex-basis 0
       margin 0 25px 25px 0
-      border 1px solid #dedede
       background-color #fff
+      border 2px solid #dcdcdc
       max-width 500px
       .mailpoet_sending_method_description
         padding: 25px
         flex-grow 1
         flex-shrink 0
+      &:hover:not(.mailpoet_active)
+        border-color #c5c5c5
     > li:last-child
       margin-right 0
     h3
@@ -37,22 +39,36 @@
     .mailpoet_status
       display flex
       flex-direction row
-      justify-content space-between
+      justify-content flex-end
       align-items center
-      background-color #2f2f2f
+      background-color #dcdcdc
       color #fff
       text-overflow ellipsis
-      padding 15px
+      min-height 2em
+      padding 1em
       span
         visibility hidden
         font-weight bold
+      div
+        margin-left 1em
     .mailpoet_active
+      border 2px solid #088b00
+      &.mailpoet_invalid_key
+        border 2px solid #dc3232
       .mailpoet_status
         background-color #088b00
+        &.mailpoet_invalid_key
+          background-color #dc3232
+          .mailpoet_actions
+            color white
+            a:not(.button-primary)
+              color white
         span
           visibility visible
       #mailpoet_mta_activate
         visibility hidden
+    .mailpoet_actions
+      color initial
 
   .tooltip.dashicons.dashicons-editor-help
     line-height: 1.4
@@ -62,6 +78,15 @@
     margin-bottom: 2em
     margin-top: 2em
 
+  .sending-free-plan-button
+    background: #FF5301
+    border-color: #e64c03
+    text-shadow: 0 -1px 1px #e64c03
+    box-shadow: 0 1px 0 #e64c03
+    margin: 10px 0
+    strong
+      text-transform: uppercase
+
   .mailpoet_success_item::before
     content '✔ '
 

assets/css/src/welcome_wizard.styl

@@ -0,0 +1,118 @@
+.mailpoet_welcome_wizard_centered_column
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+
+.mailpoet_welcome_wizard_header img
+  margin-bottom: 20px
+
+.mailpoet_welcome_wizard_steps
+  padding-top: 20px
+  width: 100%
+
+.mailpoet_welcome_wizard_step_content
+  margin-top: 40px
+  max-width: 620px
+  min-height: 35%vh;
+  h1
+    font-weight: 400
+    padding-bottom: 10px
+    text-align: center
+  p
+    font-weight: normal
+    font-size: 15px
+    line-height: 22px
+    color: #595c65
+    text-align: center
+    margin: 10px 0;
+
+#mailpoet_sender_form
+  margin-top: 30px
+  width: 330px
+  label
+    display: inline-block
+    font-size: 15px
+    margin-bottom: 20px
+  input[type="text"]
+    margin-top: 10px
+    font-size: 15px
+    width: 328px
+    height: 30px
+  input[type="submit"]
+    margin: 50px 0 25px 0
+  a
+    font-size: 12px
+    color: #595c65
+
+.mailpoet_sender_form_loading
+  opacity: .5
+
+.mailpoet_welcome_wizard_help_info_block
+  padding-left: 180px
+  position: relative
+  margin-bottom: 10px
+  p
+    text-align: left
+
+.mailpoet_welcome_wizard_support_button
+  background: #32a8d9 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAA3lBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ymXGKAAAASXRSTlMAAQIFBwoPEBIUFRscHR8jKCkqLC0/Q0RGSEpNUFFXYHFzeXp9gIKFjKCjpamwvL7Aw8bIy8zN0NLT1dja3ODk5ujq7PT19/3+6Nyy9QAAAklJREFUeAGl1/1W4jwQBvAHBapi0erLK7XsKmLxAyp+SBEVAUXluf8b2ibHnqUk0LT7+3+anJlpMoGe1Wh3B9MZOZsOuu2GBWN2q//NhO9+y4YJtzenxrznIs1xyJXCY6xTDfhj3Gl6jm1ZtuM1O2P+CKpY6eST0sh3kOD4I0qfJ9ArXVG6cwtQFNw7SlclaGzdU3ipY4X6C4X7LSh2n2VN/CJWKvqygs+7yroydlLDWrWJjF5auyT3PKwgRWUod17CIpmrhzJSlR9k1hI1kuuWYaAs116oWFXUd1KBkcpE1LuKWCDyXIOhmsh5gB/HjPgw5jMS93koeqMIY0XRLSEkl5E6Mqgz4kLoiX5G7PKLy74usUT0eQ8Rex5/RviPOodIcknObQAtkqNCtuDCiGQLQF+mOtu2ZcL7gCWq5uCvTWvZJhSO6AwLDZJjZDYm2UCbZAeZdUi20SXZRGZNkl0MSHrIzCM5wFTmKzOH5BQzkjbWlkpXMZvkDIxYgNIkKb1iMfJPwXm3vc2ImjC1w3SNdkDyPW+pXJJPeZvklGSQtz2vSV7k/THeSDaUX9LMPiM7usNALY7ijGSYdgwdQqvwSvJcPQCNgo8Y2VOPXqNt35C81R36m2pPaRf28l03eCQ53Mh30ZXkwrmu2Ph3VC9382BlrMgXrA405sHqKGUerA5x5sHq+GgebDy4/v/IBZlG5qMbJpgP6/tnr0z6MHkmbB+4p9dvXPbxO+sDZehZsYxPI956G/keZQzP95BGfQ7y/Sm4+LUDrT+vKBtiP2phEAAAAABJRU5ErkJggg==') center center no-repeat
+  background-size: 30px
+  display: inline-block
+  height: 54px
+  width: 54px
+  border-radius: 28px
+  position: absolute
+  top: 10px
+  left: 70px
+  box-shadow: 2px 2px 8px #666;
+  transform: scale(0.8)
+
+.mailpoet_welcome_wizard_video_badge
+  cursor: default
+  position: absolute
+  top: 20px
+  left: 30px
+  line-height: 1.5em
+  padding-bottom: 0
+  .dashicons
+    line-height: 1em
+  &:hover
+    background: $video-guide-badge-color
+
+.mailpoet_welcome_wizard_mail_icon
+  background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABrCAYAAADw4IlaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABT9JREFUeNrsnTFSGz0YhhWSgpJJkS4z9tBS4JbKOUHwDfAJYp8AcwLDCSBdOpwT4IoWCoo0jJ1JlybcIPmEvw0LwyTG1iftrp5nRjGh+PktHmv16t3YzgEA5Mqrp9/Y297pysMnGftMDwRmIuPk8vZm+qyAIt9AHsbMExjTFwnPHgko8vkV75y5gUj0RMLJRukbrHwQk/HfFVD3fRfMCUSmU6yALeYCErCFgJCUDaYAEBAQEAABAQEBYvImwc+8k3F0eXtzzPRXC61iD2VsNVlA/+TG8mQ/yuNQRLzmV59cvF15OJWxm9MluCvjSp78CAWSibclw1diVynkq8oe8FAmYaZ1IMSTr6viDXLbAz5HS8aFTMqZXpbvUMRu1dPLbSXu91x1BZz6IKGBIiQHMmZ6axjYhIyZgXzeg6F6EecSLKuU37t1VvmhS4SUc5ksvyK20CaIeC0/n25xC1TohOvvcu6seqqx1h5Qfuhcxgf5smewGhJSwsg30lUv9B577hY3lfoxTxpC/J2t8tCWcWawGvqQcqVHBfCCkOHDnVuc64XmWFe9SWVCiAaHvjzpz7rJDXn53NXV0D/xI0LKf0PGoVG6vdaQGGzbFfwYxv/PyWhrSAnNQEUkpDwv375ebkPLV7RXnZDymQgYIaS0NKSc66sd8R5CxrlByJjq5dZkL256EO1rNg0pQ4OQcv9q16OF3I9WrgxCxv2Wyv/+1gkZSQUsiXisIWUS+D9d9MoXuYUU/3x9ODM6WvFhsl38211LolVxPjj4yO4WRzahX1Fdl8mRjXF/638vfsXrxwp60btgje4djfKhaXSvbNzfHulebxrzOSXpgvXVNSwd2YR8JfuQ0qhe2bi/nbqEt8UlvRtGQ0rH0Sv/S74DZ9jfashIdk9mJW7Jp1f+59HKqatYf9s4AVXColfuu8x7ZcP+1s/r2v1tIwUsiXh/BOAy7JW1v/Uhw6q/bYfob2sfQpYMKdn0ynXrbxu9Aj4Rcap7Q8teuZtYPqv+1jmj/jYbAYvV0LhXvkjRK2vI8N2tVX/btupvsxKwJGJjeuVSf2txtGLe32YpYEnEY10NLXvllpF4lv3txEXqb7MWUCWcG/fKs5BHNtrfjpxtf9urY+tT6/eGqUOvXOpvLY5WkvS3IXnjak6pV/6qlzaLXvnFRzbG/e217vVq/7YmjXl3LP2nAFa98sC9oFeO0N92mvKeOo17e7aUvXIu/S0CLhdSrHvlwRP5Ri6T/hYBlxfRH0lY9cpj7ZUPcutvCSEvDymWvfKpUcgY1jndsgI+E1KcXa8cksr3twi4xmpoGFLWZepq0t8i4PoiWvbKq4SMWvW3CBhORKteeVlq2d8SQsJK6Fednh4yj12cz82b66o3zX3++ZyQBxEte+VHIcPVvL9lBTQMKc6uV25Mf8sKaC9iyF65cf0tAsYTceTWO7JpZH/LJTh+SPmgd7gseydzcbQyYQZZAUOJeOaW65Ub39+yAqYNKUWv/Mkt7nzZ0hXPX6ZPSLcIGCWkuOpVeVyCARAQEBAAAQEBARAQEBAAAQEBARAQEBAAAQEBARAQEBAQEAABAQEBEBAQEAABAQEBEBAQEAABAQEBEBAQEAABAQEBEBAQEAABoX6s+g6p3b3tnd9MH7ACAgICICAgIAACQi0FnDMVkFJAPsURUnD3qvhqb3tn5uJ8WjjA/VX38vamXd4DDpkTiEjf//G6+NuPXz+/vX/77rt8uc/cgLV8xaeJvi5/VyS8Fgn9x9Vv6uV4k7mCUPs9GV9k9PhEUagMfwQYAFppkb3J5HUdAAAAAElFTkSuQmCC') center center no-repeat
+  background-size: 40px 27px
+  display: inline-block
+  width: 40px
+  height: 27px
+  position: absolute
+  top: 50px
+  left: 75px
+
+@media screen and (max-width 520px)
+  .mailpoet_welcome_wizard_help_info_block
+    padding-left: 150px
+  .mailpoet_welcome_wizard_support_button
+    left: 40px
+  .mailpoet_welcome_wizard_video_badge
+    left: 10px
+  .mailpoet_welcome_wizard_mail_icon
+    left: 50px
+
+.mailpoet_welcome_wizard_step_controls
+  margin-top: 50px
+  .button
+    margin:0 10px
+
+.mailpoet_welcome_wizard_woo_screenshot
+  margin-top: 30px
+  width: 400px
+
+@media screen and (max-width 520px)
+  .mailpoet_welcome_wizard_woo_screenshot
+    width: 340px
+
+.welcome_wizard_video
+  position: absolute
+  top: -1000px

assets/fonts/mailpoet.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="mailpoet" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="0" d="" />
+<glyph unicode="&#xe900;" glyph-name="optimised" horiz-adv-x="972" d="M230.188 949.695c-21.982-3.361-41.376-14.741-48.618-28.188l-5.948-11.637 0.517-265.588c0.776-263.779 0.776-265.847 6.206-273.088 11.12-15.258 40.601-22.24 68.79-16.551 16.551 3.621 25.861 9.827 32.584 21.723 3.879 7.499 4.397 23.791 5.689 185.161l1.293 176.628 60.514-161.111c33.102-88.702 63.875-168.612 68.013-177.404 13.707-29.481 35.687-41.376 72.151-39.049 21.206 1.293 39.308 9.827 47.584 22.499 3.361 5.172 35.947 91.806 72.41 192.662s67.237 185.42 68.53 187.49c1.551 2.587 2.587-69.307 2.587-185.937v-190.335l5.948-11.379c8.533-16.809 20.172-21.982 49.652-21.982 27.929 0.259 39.825 4.914 49.911 20.172l6.982 10.603v530.401l-5.689 9.31c-12.671 20.43-50.17 31.033-91.806 25.601-34.394-4.138-53.79-16.292-66.72-41.118-2.587-5.172-35.947-101.89-73.961-214.902s-69.824-206.367-70.6-207.403c-1.034-1.034-32.326 86.115-69.824 193.954-37.757 107.581-71.892 205.075-76.030 216.453-10.086 26.118-25.601 42.929-45.514 48.877-17.326 5.172-46.807 6.982-64.652 4.138zM54.854 243.443c-20.172-3.879-43.963-19.136-51.204-33.619-6.206-11.379-4.914-32.843 2.587-47.841 23.533-46.807 71.634-86.892 126.717-104.736 17.068-5.689 23.274-5.948 120.252-7.499 97.235-1.551 102.926-1.81 116.373-7.241 29.739-11.896 51.204-35.687 61.807-68.013 3.621-11.12 13.964-21.206 25.861-25.344 4.914-1.551 18.361-2.844 29.739-2.844 16.809 0 23.533 1.293 32.584 5.689 11.896 6.206 13.964 9.31 26.895 38.791 11.896 27.671 39.567 49.652 70.858 56.117 8.533 1.81 47.067 2.844 100.856 2.844 99.563 0 113.786 2.068 151.801 20.689 49.652 24.567 96.978 77.84 101.373 113.529 3.104 26.118-17.326 49.394-51.204 58.187-25.601 6.465-41.635-0.517-54.825-24.050-11.12-19.655-29.998-38.015-47.841-46.29l-14.741-6.982-99.563-1.551c-90.77-1.293-101.373-2.068-120.252-6.982-27.154-7.499-58.444-23.016-80.427-40.084l-17.844-13.964-16.809 13.964c-20.689 16.809-51.462 32.584-78.875 39.825-19.136 5.172-28.705 5.948-120.252 7.241l-99.563 1.551-15.775 7.241c-18.102 8.533-32.584 21.982-48.36 45.773-16.034 24.567-26.895 29.998-50.17 25.601z" />
+</font></defs></svg>

assets/img/preview_magnifying_glass.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="47.002px" height="38.003px" viewBox="0 0 47.002 38.003" enable-background="new 0 0 47.002 38.003" xml:space="preserve">
-<path fill-rule="evenodd" clip-rule="evenodd" fill="#565656" d="M46.328,36.365c-1.188,1.725-3.553,2.158-5.273,0.962L25.479,26.52
-	c-1.104-0.763-1.674-2.007-1.631-3.257c-2.006,2.157-4.642,3.606-7.594,4.145c-3.626,0.663-7.288-0.13-10.311-2.227
-	c-3.024-2.098-5.054-5.253-5.714-8.887c-0.661-3.636,0.127-7.31,2.221-10.344c4.325-6.264,12.927-7.834,19.177-3.5
-	c5.672,3.938,7.486,11.412,4.537,17.443c1.152-0.486,2.519-0.392,3.627,0.377l15.58,10.808C47.09,32.274,47.52,34.641,46.328,36.365
-	z M23.235,12.09c-0.459-2.534-1.874-4.734-3.982-6.196C14.897,2.87,8.896,3.963,5.878,8.331c-3.014,4.373-1.922,10.388,2.435,13.408
-	c4.356,3.025,10.356,1.932,13.374-2.438C23.146,17.187,23.696,14.625,23.235,12.09z"/>
-</svg>

assets/js/lib/analytics.js

@@ -6,10 +6,25 @@ window.mixpanelTrackingId = "8cce373b255e5a76fb22d57b85db0c92";
 
 if (mailpoet_analytics_enabled) {
 
-  mixpanel.init(window.mixpanelTrackingId);
+  mixpanel.init(window.mixpanelTrackingId, {
+    loaded: function(mixpanel) {
+      // used in lib/Analytics/Analytics.php
+      document.cookie = "mixpanel_distinct_id=" + mixpanel.get_distinct_id();
+    }
+  });
+
+  mixpanel.register({'Platform': 'Plugin'});
+
+  if(typeof window.mailpoet_analytics_public_id === 'string' && window.mailpoet_analytics_public_id.length > 0) {
+    if(window.mailpoet_analytics_new_public_id === true) {
+      mixpanel.alias(window.mailpoet_analytics_public_id);
+    } else {
+      mixpanel.identify(window.mailpoet_analytics_public_id);
+    }
+  }
 
   if (mailpoet_analytics_data != null) {
-    mixpanel.track('MailPoet 3', mailpoet_analytics_data);
+    mixpanel.people.set(mailpoet_analytics_data);
   }
 
 }

assets/js/src/admin.js

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

assets/js/src/ajax.js

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

assets/js/src/analytics_event.js

@@ -17,7 +17,7 @@
  */
 var eventsCache = [];
 
-function track(name, data){
+function track(name, data) {
   if (typeof window.mixpanel.track !== 'function') {
     window.mixpanel.init(window.mixpanelTrackingId);
   }
@@ -31,27 +31,18 @@ function exportMixpanel(mp) {
   if (window.mailpoet_analytics_enabled) {
     MailPoet.trackEvent = track;
   } else {
-    MailPoet.trackEvent = function () {};
+    MailPoet.trackEvent = function emptyFunction() {};
   }
 }
 
 function trackCachedEvents() {
-  eventsCache.map(function (event) {
+  eventsCache.forEach(function trackIfEnabled(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') {
-    exportMixpanel(MailPoet);
-    trackCachedEvents();
-  } else {
-    setTimeout(initializeMixpanelWhenLoaded, 100);
-  }
-}
-
 function cacheEvent(forced, name, data) {
   eventsCache.push({
     name: name,
@@ -62,9 +53,18 @@ function cacheEvent(forced, name, data) {
 
 define(
   ['mailpoet', 'underscore'],
-  function(mp, _) {
+  function analyticsEvent(mp, _) {
     var MailPoet = mp;
 
+    function initializeMixpanelWhenLoaded() {
+      if (typeof window.mixpanel === 'object') {
+        exportMixpanel(MailPoet);
+        trackCachedEvents();
+      } else {
+        setTimeout(initializeMixpanelWhenLoaded, 100);
+      }
+    }
+
     MailPoet.trackEvent = _.partial(cacheEvent, false);
     MailPoet.forceTrackEvent = _.partial(cacheEvent, true);
 

assets/js/src/common/key_value_table.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const KeyValueTable = props => (
+  <table className={'widefat fixed'} style={{ maxWidth: props.max_width }}>
+    <tbody>
+      {props.children.map(row => (
+        <tr key={`row_${row.key}`}>
+          <td className={'row-title'}>{ row.key }</td><td>{ row.value }</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
+
+KeyValueTable.propTypes = {
+  max_width: React.PropTypes.string,
+  children: React.PropTypes.arrayOf(React.PropTypes.shape({
+    key: React.PropTypes.string.isRequired,
+    value: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+      React.PropTypes.element,
+    ]).isRequired,
+  })).isRequired,
+};
+
+KeyValueTable.defaultProps = {
+  max_width: 'auto',
+};
+
+module.exports = KeyValueTable;

assets/js/src/common/loading.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+class Loading extends React.Component {
+  componentWillMount() {
+    MailPoet.Modal.loading(true);
+  }
+  componentWillUnmount() {
+    MailPoet.Modal.loading(false);
+  }
+  render() {
+    return null;
+  }
+}
+
+export default Loading;

assets/js/src/common/print_boolean.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+const PrintBoolean = props => (
+  <span>
+    {(props.children === true && props.truthy) ||
+      (props.children === false && props.falsy) ||
+      (props.unknown)}
+  </span>
+);
+
+PrintBoolean.propTypes = {
+  truthy: React.PropTypes.string,
+  falsy: React.PropTypes.string,
+  unknown: React.PropTypes.string,
+  children: React.PropTypes.bool,
+};
+
+PrintBoolean.defaultProps = {
+  truthy: MailPoet.I18n.t('yes'),
+  falsy: MailPoet.I18n.t('no'),
+  unknown: MailPoet.I18n.t('unknown'),
+  children: null,
+};
+
+module.exports = PrintBoolean;

assets/js/src/common/stepped_progess_bar.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const SteppedProgressBar = (props) => {
+  if (props.step > props.steps_count) {
+    return null;
+  }
+  return (
+    <div className="mailpoet_stepped_progress_bar">
+      {
+        [...Array(props.steps_count).keys()].map(step => (
+          <div
+            className={`mailpoet_stepped_progress_bar_step ${(step < props.step ? 'active' : '')}`}
+            key={`step_${step}`}
+            style={{ width: `${Math.floor(100 / props.steps_count)}%` }}
+          />
+        ))
+      }
+    </div>
+  );
+};
+
+SteppedProgressBar.propTypes = {
+  steps_count: React.PropTypes.number.isRequired,
+  step: React.PropTypes.number.isRequired,
+};
+
+module.exports = SteppedProgressBar;

assets/js/src/common/thumbnail.jsx

@@ -0,0 +1,76 @@
+import _ from 'underscore';
+import MailPoet from 'mailpoet';
+import html2canvas from 'html2canvas';
+
+/**
+ * Generates a thumbnail from a DOM element.
+ *
+ * @param  {DOMElement}      element
+ * @return {Promise<String>} DataURL of the generated image.
+ */
+export const fromDom = element =>
+  html2canvas(element, {
+    logging: false,
+  }).then(canvas => canvas.toDataURL('image/jpeg'));
+
+/**
+ * Generates a thumbnail from an URL.
+ *
+ * @param  {String}        url
+ * @return {Promise<String>} DataURL of the generated image.
+ */
+export const fromUrl = url =>
+  new Promise((resolve, reject) => {
+    const iframe = document.createElement('iframe');
+    const protocol = location.href.startsWith('https://') ? 'https:' : 'http:';
+    iframe.src = protocol + url.replace(/^https?:/, '');
+    iframe.style.opacity = 0;
+    iframe.scrolling = 'no';
+    iframe.onload = () => {
+      fromDom(iframe.contentDocument.documentElement)
+        .then((image) => {
+          document.body.removeChild(iframe);
+          resolve(image);
+        })
+        .catch(() => {
+          document.body.removeChild(iframe);
+          reject(MailPoet.I18n.t('errorWhileTakingScreenshot'));
+        });
+    };
+    const onError = () => {
+      document.body.removeChild(iframe);
+      reject(MailPoet.I18n.t('errorWhileTakingScreenshot'));
+    };
+    iframe.onerror = onError;
+    iframe.onError = onError;
+    iframe.className = 'mailpoet_template_iframe';
+    try {
+      document.body.appendChild(iframe);
+    } catch (err) {
+      onError();
+    }
+  });
+
+/**
+ * Generates a thumbnail from a newsletter's data.
+ *
+ * @param  {Object}        data
+ * @return {Promise<String>} DataURL of the generated image.
+ */
+export const fromNewsletter = data =>
+  new Promise((resolve, reject) => {
+    const json = data;
+    if (!_.isUndefined(json.body)) {
+      json.body = JSON.stringify(json.body);
+    }
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'newsletters',
+      action: 'showPreview',
+      data: json,
+    }).done(response => fromUrl(response.meta.preview_url)
+      .then(resolve)
+      .catch(reject)
+    ).fail(response => reject(response.errors));
+  });
+

assets/js/src/date.js

@@ -3,167 +3,169 @@ define('date',
     'mailpoet',
     'jquery',
     'moment'
-  ], function(
+  ], function ( // eslint-disable-line func-names
     mp,
     jQuery,
     Moment
-) {
-  'use strict';
+  ) {
+    'use strict';
 
-  var MailPoet = mp;
+    var MailPoet = mp;
 
-  MailPoet.Date = {
-    version: 0.1,
-    options: {},
-    defaults: {
-      offset: 0,
-      format: 'F, d Y H:i:s'
-    },
-    init: function (opts) {
-      var options = opts || {};
+    MailPoet.Date = {
+      version: 0.1,
+      options: {},
+      defaults: {
+        offset: 0,
+        format: 'F, d Y H:i:s'
+      },
+      init: function init(opts) {
+        var options = opts || {};
 
-      // set UTC offset
-      if (
-        options.offset === undefined
+        // set UTC offset
+        if (
+          options.offset === undefined
         && window.mailpoet_date_offset !== undefined
-      ) {
-        options.offset = window.mailpoet_date_offset;
-      }
-      // set date format
-      if (
-        options.format === undefined
-        && window.mailpoet_date_format !== undefined
-      ) {
-        options.format = window.mailpoet_date_format;
-      }
-      // merge options
-      this.options = jQuery.extend({}, this.defaults, options);
-
-      return this;
-    },
-    format: function(date, opts) {
-      var options = opts || {};
-      this.init(options);
-
-      var momentDate = Moment(date, this.convertFormat(options.parseFormat));
-      if (options.offset === 0) momentDate = momentDate.utc();
-      return momentDate.format(this.convertFormat(this.options.format));
-    },
-    toDate: function(date, opts) {
-      var options = opts || {};
-      this.init(options);
-
-      return Moment(date, this.convertFormat(options.parseFormat)).toDate();
-    },
-    short: function(date) {
-      return this.format(date, {
-        format: 'F, j Y'
-      });
-    },
-    full: function(date) {
-      return this.format(date, {
-        format: 'F, j Y H:i:s'
-      });
-    },
-    time: function(date) {
-      return this.format(date, {
-        format: 'H:i:s'
-      });
-    },
-    convertFormat: function(format) {
-      var format_mappings = {
-        date: {
-          d: 'DD',
-          D: 'ddd',
-          j: 'D',
-          l: 'dddd',
-          N: 'E',
-          S: 'o',
-          w: 'e',
-          z: 'DDD',
-          W: 'W',
-          F: 'MMMM',
-          m: 'MM',
-          M: 'MMM',
-          n: 'M',
-          t: '', // no equivalent
-          L: '', // no equivalent
-          o: 'YYYY',
-          Y: 'YYYY',
-          y: 'YY',
-          a: 'a',
-          A: 'A',
-          B: '', // no equivalent
-          g: 'h',
-          G: 'H',
-          h: 'hh',
-          H: 'HH',
-          i: 'mm',
-          s: 'ss',
-          u: 'SSS',
-          e: 'zz', // deprecated since version 1.6.0 of moment.js
-          I: '', // no equivalent
-          O: '', // no equivalent
-          P: '', // no equivalent
-          T: '', // no equivalent
-          Z: '', // no equivalent
-          c: '', // no equivalent
-          r: '', // no equivalent
-          U: 'X'
-        },
-        strftime: {
-          a: 'ddd',
-          A: 'dddd',
-          b: 'MMM',
-          B: 'MMMM',
-          d: 'DD',
-          e: 'D',
-          F: 'YYYY-MM-DD',
-          H: 'HH',
-          I: 'hh',
-          j: 'DDDD',
-          k: 'H',
-          l: 'h',
-          m: 'MM',
-          M: 'mm',
-          p: 'A',
-          S: 'ss',
-          u: 'E',
-          w: 'd',
-          W: 'WW',
-          y: 'YY',
-          Y: 'YYYY',
-          z: 'ZZ',
-          Z: 'z'
+        ) {
+          options.offset = window.mailpoet_date_offset;
         }
-      };
+        // set date format
+        if (
+          options.format === undefined
+        && window.mailpoet_date_format !== undefined
+        ) {
+          options.format = window.mailpoet_date_format;
+        }
+        // merge options
+        this.options = jQuery.extend({}, this.defaults, options);
 
-      if (!format || format.length <= 0) return format;
+        return this;
+      },
+      format: function format(date, opts) {
+        var options = opts || {};
+        var momentDate;
+        this.init(options);
 
-      var replacements = format_mappings['date'];
+        momentDate = Moment(date, this.convertFormat(options.parseFormat));
+        if (options.offset === 0) momentDate = momentDate.utc();
+        return momentDate.format(this.convertFormat(this.options.format));
+      },
+      toDate: function toDate(date, opts) {
+        var options = opts || {};
+        this.init(options);
 
-      var convertedFormat = [];
-      var escapeToken = false;
+        return Moment(date, this.convertFormat(options.parseFormat)).toDate();
+      },
+      short: function short(date) {
+        return this.format(date, {
+          format: 'F, j Y'
+        });
+      },
+      full: function full(date) {
+        return this.format(date, {
+          format: 'F, j Y H:i:s'
+        });
+      },
+      time: function time(date) {
+        return this.format(date, {
+          format: 'H:i:s'
+        });
+      },
+      convertFormat: function convertFormat(format) {
+        var replacements;
+        var convertedFormat;
+        var escapeToken;
+        var index;
+        var token;
+        var formatMappings = {
+          date: {
+            d: 'DD',
+            D: 'ddd',
+            j: 'D',
+            l: 'dddd',
+            N: 'E',
+            S: 'o',
+            w: 'e',
+            z: 'DDD',
+            W: 'W',
+            F: 'MMMM',
+            m: 'MM',
+            M: 'MMM',
+            n: 'M',
+            t: '', // no equivalent
+            L: '', // no equivalent
+            o: 'YYYY',
+            Y: 'YYYY',
+            y: 'YY',
+            a: 'a',
+            A: 'A',
+            B: '', // no equivalent
+            g: 'h',
+            G: 'H',
+            h: 'hh',
+            H: 'HH',
+            i: 'mm',
+            s: 'ss',
+            u: 'SSS',
+            e: 'zz', // deprecated since version 1.6.0 of moment.js
+            I: '', // no equivalent
+            O: '', // no equivalent
+            P: '', // no equivalent
+            T: '', // no equivalent
+            Z: '', // no equivalent
+            c: '', // no equivalent
+            r: '', // no equivalent
+            U: 'X'
+          },
+          strftime: {
+            a: 'ddd',
+            A: 'dddd',
+            b: 'MMM',
+            B: 'MMMM',
+            d: 'DD',
+            e: 'D',
+            F: 'YYYY-MM-DD',
+            H: 'HH',
+            I: 'hh',
+            j: 'DDDD',
+            k: 'H',
+            l: 'h',
+            m: 'MM',
+            M: 'mm',
+            p: 'A',
+            S: 'ss',
+            u: 'E',
+            w: 'd',
+            W: 'WW',
+            y: 'YY',
+            Y: 'YYYY',
+            z: 'ZZ',
+            Z: 'z'
+          }
+        };
 
-      for(var index = 0, token = ''; format.charAt(index); index += 1){
-        token = format.charAt(index);
-        if (escapeToken === true) {
-          convertedFormat.push('['+token+']');
-          escapeToken = false;
-        } else {
-          if (token === '\\') {
+        if (!format || format.length <= 0) return format;
+
+        replacements = formatMappings.date;
+        convertedFormat = [];
+        escapeToken = false;
+
+        for (index = 0, token = ''; format.charAt(index); index += 1) {
+          token = format.charAt(index);
+          if (escapeToken === true) {
+            convertedFormat.push('[' + token + ']');
+            escapeToken = false;
+          } else if (token === '\\') {
             // Slash escapes the next symbol to be treated as literal
             escapeToken = true;
-            continue;
           } else if (replacements[token] !== undefined) {
             convertedFormat.push(replacements[token]);
           } else {
-            convertedFormat.push('['+token+']');
+            convertedFormat.push('[' + token + ']');
           }
         }
-      }
 
-      return convertedFormat.join('');
-    }
-  };
-});
+        return convertedFormat.join('');
+      }
+    };
+  });

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

@@ -1,49 +1,43 @@
-define([
-  'react',
-],
-(
-  React
-) => {
-  const FormFieldCheckbox = React.createClass({
-    onValueChange: function (e) {
-      e.target.value = this.refs.checkbox.checked ? '1' : '0';
-      return this.props.onValueChange(e);
-    },
-    render: function () {
-      if (this.props.field.values === undefined) {
-        return false;
-      }
+import React from 'react';
 
-      // isChecked will be true only if the value is "1"
-      // it will be false in case value is "0" or empty
-      const isChecked = !!(~~(this.props.item[this.props.field.name]));
-      const options = Object.keys(this.props.field.values).map(
-        (value, index) => {
-          return (
-            <p key={ 'checkbox-' + index }>
-              <label>
-                <input
-                  ref="checkbox"
-                  type="checkbox"
-                  value="1"
-                  checked={ isChecked }
-                  onChange={ this.onValueChange }
-                  name={ this.props.field.name }
-                />
-                { this.props.field.values[value] }
-              </label>
-            </p>
-          );
-        }
-      );
+const FormFieldCheckbox = React.createClass({
+  onValueChange: function onValueChange(e) {
+    e.target.value = this.checkbox.checked ? '1' : '0';
+    return this.props.onValueChange(e);
+  },
+  render: function render() {
+    if (this.props.field.values === undefined) {
+      return false;
+    }
 
-      return (
-        <div>
-          { options }
-        </div>
-      );
-    },
-  });
+    // isChecked will be true only if the value is "1"
+    // it will be false in case value is "0" or empty
+    const isChecked = !!(Number(this.props.item[this.props.field.name]));
+    const options = Object.keys(this.props.field.values).map(
+      value => (
+        <p key={`checkbox-${value}`}>
+          <label htmlFor={this.props.field.name}>
+            <input
+              ref={(c) => { this.checkbox = c; }}
+              type="checkbox"
+              value="1"
+              checked={isChecked}
+              onChange={this.onValueChange}
+              name={this.props.field.name}
+              id={this.props.field.name}
+            />
+            { this.props.field.values[value] }
+          </label>
+        </p>
+      )
+    );
 
-  return FormFieldCheckbox;
+    return (
+      <div>
+        { options }
+      </div>
+    );
+  },
 });
+
+export default FormFieldCheckbox;

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

@@ -1,251 +1,279 @@
-define([
-  'react',
-  'moment',
-], (
-  React,
-  Moment
-) => {
-  class FormFieldDateYear extends React.Component {
-    render() {
-      const yearsRange = 100;
-      const years = [];
+import React from 'react';
+import moment from 'moment';
+import PropTypes from 'prop-types';
 
-      if (this.props.placeholder !== undefined) {
-        years.push((
-          <option value="" key={ 0 }>{ this.props.placeholder }</option>
-        ));
-      }
+function FormFieldDateYear(props) {
+  const yearsRange = 100;
+  const years = [];
 
-      const currentYear = Moment().year();
-      for (let i = currentYear; i >= currentYear - yearsRange; i -= 1) {
-        years.push((
-          <option
-            key={ i }
-            value={ i }
-         >{ i }</option>
-        ));
-      }
-      return (
-        <select
-          name={ `${this.props.name}[year]` }
-          value={ this.props.year }
-          onChange={ this.props.onValueChange }
-        >
-          { years }
-        </select>
-      );
-    }
+  if (props.placeholder !== undefined) {
+    years.push((
+      <option value="" key={0}>{ props.placeholder }</option>
+    ));
   }
 
-  class FormFieldDateMonth extends React.Component {
-    render() {
-      const months = [];
+  const currentYear = moment().year();
+  for (let i = currentYear; i >= currentYear - yearsRange; i -= 1) {
+    years.push((
+      <option
+        key={i}
+        value={i}
+      >{ i }</option>
+    ));
+  }
+  return (
+    <select
+      name={`${props.name}[year]`}
+      value={props.year}
+      onChange={props.onValueChange}
+    >
+      { years }
+    </select>
+  );
+}
 
-      if (this.props.placeholder !== undefined) {
-        months.push((
-          <option value="" key={ 0 }>{ this.props.placeholder }</option>
-        ));
-      }
+FormFieldDateYear.propTypes = {
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  onValueChange: PropTypes.func.isRequired,
+  year: PropTypes.string.isRequired,
+};
 
-      for (let i = 1; i <= 12; i += 1) {
-        months.push((
-          <option
-            key={ i }
-            value={ i }
-         >{ this.props.monthNames[i - 1] }</option>
-        ));
-      }
-      return (
-        <select
-          name={ `${this.props.name}[month]` }
-          value={ this.props.month }
-          onChange={ this.props.onValueChange }
-        >
-          { months }
-        </select>
-      );
-    }
+function FormFieldDateMonth(props) {
+  const months = [];
+
+  if (props.placeholder !== undefined) {
+    months.push((
+      <option value="" key={0}>{ props.placeholder }</option>
+    ));
   }
 
-  class FormFieldDateDay extends React.Component {
-    render() {
-      const days = [];
+  for (let i = 1; i <= 12; i += 1) {
+    months.push((
+      <option
+        key={i}
+        value={i}
+      >{ props.monthNames[i - 1] }</option>
+    ));
+  }
+  return (
+    <select
+      name={`${props.name}[month]`}
+      value={props.month}
+      onChange={props.onValueChange}
+    >
+      { months }
+    </select>
+  );
+}
 
-      if (this.props.placeholder !== undefined) {
-        days.push((
-          <option value="" key={ 0 }>{ this.props.placeholder }</option>
-        ));
-      }
+FormFieldDateMonth.propTypes = {
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  onValueChange: PropTypes.func.isRequired,
+  month: PropTypes.string.isRequired,
+  monthNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
 
-      for (let i = 1; i <= 31; i += 1) {
-        days.push((
-          <option
-            key={ i }
-            value={ i }
-          >{ i }</option>
-        ));
-      }
+function FormFieldDateDay(props) {
+  const days = [];
 
-      return (
-        <select
-          name={ `${this.props.name}[day]` }
-          value={ this.props.day }
-          onChange={ this.props.onValueChange }
-        >
-          { days }
-        </select>
-      );
-    }
+  if (props.placeholder !== undefined) {
+    days.push((
+      <option value="" key={0}>{ props.placeholder }</option>
+    ));
   }
 
-  class FormFieldDate extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = {
-        year: '',
-        month: '',
-        day: '',
-      };
-    }
-    componentDidMount() {
+  for (let i = 1; i <= 31; i += 1) {
+    days.push((
+      <option
+        key={i}
+        value={i}
+      >{ i }</option>
+    ));
+  }
+
+  return (
+    <select
+      name={`${props.name}[day]`}
+      value={props.day}
+      onChange={props.onValueChange}
+    >
+      { days }
+    </select>
+  );
+}
+
+FormFieldDateDay.propTypes = {
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  onValueChange: PropTypes.func.isRequired,
+  day: PropTypes.string.isRequired,
+};
+
+class FormFieldDate extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      year: '',
+      month: '',
+      day: '',
+    };
+
+    this.onValueChange = this.onValueChange.bind(this);
+  }
+  componentDidMount() {
+    this.extractDateParts();
+  }
+  componentDidUpdate(prevProps) {
+    if (
+      (this.props.item !== undefined && prevProps.item !== undefined)
+      && (this.props.item.id !== prevProps.item.id)
+    ) {
       this.extractDateParts();
     }
-    componentDidUpdate(prevProps) {
-      if (
-        (this.props.item !== undefined && prevProps.item !== undefined)
-        && (this.props.item.id !== prevProps.item.id)
-      ) {
-        this.extractDateParts();
-      }
-    }
-    extractDateParts() {
-      const value = (this.props.item[this.props.field.name] !== undefined)
-        ? this.props.item[this.props.field.name].trim()
-        : '';
+  }
+  onValueChange(e) {
+    // extract property from name
+    const matches = e.target.name.match(/(.*?)\[(.*?)\]/);
+    let field = null;
+    let property = null;
 
-      if(value === '') {
-        return;
-      }
+    if (matches !== null && matches.length === 3) {
+      field = matches[1];
+      property = matches[2];
 
-      const dateTime = Moment(value);
+      const value = Number(e.target.value);
 
       this.setState({
-        year: dateTime.format('YYYY'),
-        month: dateTime.format('M'),
-        day: dateTime.format('D'),
-      });
-    }
-    formatValue() {
-      const dateType = this.props.field.params.date_type;
-
-      let value;
-
-      switch(dateType) {
-        case 'year_month_day':
-          value = {
-            year: this.state.year,
-            month: this.state.month,
-            day: this.state.day,
-          };
-          break;
-
-        case 'year_month':
-          value = {
-            year: this.state.year,
-            month: this.state.month,
-          };
-          break;
-
-        case 'month':
-          value = {
-            month: this.state.month,
-          };
-          break;
-
-        case 'year':
-          value = {
-            year: this.state.year,
-          };
-          break;
-      }
-
-      return value;
-    }
-    onValueChange(e) {
-      // extract property from name
-      const matches = e.target.name.match(/(.*?)\[(.*?)\]/);
-      let field = null;
-      let property = null;
-
-      if (matches !== null && matches.length === 3) {
-        field = matches[1];
-        property = matches[2];
-
-        const value = ~~(e.target.value);
-
-        this.setState({
-          [`${property}`]: value,
-        }, () => {
-          this.props.onValueChange({
-            target: {
-              name: field,
-              value: this.formatValue(),
-            },
-          });
+        [`${property}`]: value,
+      }, () => {
+        this.props.onValueChange({
+          target: {
+            name: field,
+            value: this.formatValue(),
+          },
         });
-      }
-    }
-    render() {
-      const monthNames = window.mailpoet_month_names || [];
-      const dateFormats = window.mailpoet_date_formats || {};
-      const dateType = this.props.field.params.date_type;
-      const dateSelects = dateFormats[dateType][0].split('/');
-
-      const fields = dateSelects.map((type) => {
-        switch(type) {
-          case 'YYYY':
-            return (<FormFieldDateYear
-              onValueChange={ this.onValueChange.bind(this) }
-              ref={ 'year' }
-              key={ 'year' }
-              name={ this.props.field.name }
-              year={ this.state.year }
-              placeholder={ this.props.field.year_placeholder }
-            />);
-            break;
-
-          case 'MM':
-            return (<FormFieldDateMonth
-              onValueChange={ this.onValueChange.bind(this) }
-              ref={ 'month' }
-              key={ 'month' }
-              name={ this.props.field.name }
-              month={ this.state.month }
-              monthNames={ monthNames }
-              placeholder={ this.props.field.month_placeholder }
-            />);
-            break;
-
-          case 'DD':
-            return (<FormFieldDateDay
-              onValueChange={ this.onValueChange.bind(this) }
-              ref={ 'day' }
-              key={ 'day' }
-              name={ this.props.field.name }
-              day={ this.state.day }
-              placeholder={ this.props.field.day_placeholder }
-            />);
-            break;
-        }
       });
-
-      return (
-        <div>
-          {fields}
-        </div>
-      );
     }
-  };
+  }
+  formatValue() {
+    const dateType = this.props.field.params.date_type;
 
-  return FormFieldDate;
-});
+    let value;
+
+    switch (dateType) {
+      case 'year_month_day':
+        value = {
+          year: this.state.year,
+          month: this.state.month,
+          day: this.state.day,
+        };
+        break;
+
+      case 'year_month':
+        value = {
+          year: this.state.year,
+          month: this.state.month,
+        };
+        break;
+
+      case 'month':
+        value = {
+          month: this.state.month,
+        };
+        break;
+
+      case 'year':
+        value = {
+          year: this.state.year,
+        };
+        break;
+      default:
+        value = {
+          value: 'invalid type',
+        };
+        break;
+    }
+
+    return value;
+  }
+  extractDateParts() {
+    const value = (this.props.item[this.props.field.name] !== undefined)
+      ? this.props.item[this.props.field.name].trim()
+      : '';
+
+    if (value === '') {
+      return;
+    }
+
+    const dateTime = moment(value);
+
+    this.setState({
+      year: dateTime.format('YYYY'),
+      month: dateTime.format('M'),
+      day: dateTime.format('D'),
+    });
+  }
+  render() {
+    const monthNames = window.mailpoet_month_names || [];
+    const dateFormats = window.mailpoet_date_formats || {};
+    const dateType = this.props.field.params.date_type;
+    const dateSelects = dateFormats[dateType][0].split('/');
+
+    const fields = dateSelects.map((type) => {
+      switch (type) {
+        case 'YYYY':
+          return (<FormFieldDateYear
+            onValueChange={this.onValueChange}
+            key={'year'}
+            name={this.props.field.name}
+            year={this.state.year}
+            placeholder={this.props.field.year_placeholder}
+          />);
+
+        case 'MM':
+          return (<FormFieldDateMonth
+            onValueChange={this.onValueChange}
+            key={'month'}
+            name={this.props.field.name}
+            month={this.state.month}
+            monthNames={monthNames}
+            placeholder={this.props.field.month_placeholder}
+          />);
+
+        case 'DD':
+          return (<FormFieldDateDay
+            onValueChange={this.onValueChange}
+            key={'day'}
+            name={this.props.field.name}
+            day={this.state.day}
+            placeholder={this.props.field.day_placeholder}
+          />);
+
+        default:
+          return <div>Invalid date type</div>;
+      }
+    });
+
+    return (
+      <div>
+        {fields}
+      </div>
+    );
+  }
+}
+
+FormFieldDate.propTypes = {
+  item: PropTypes.object.isRequired, //  eslint-disable-line react/forbid-prop-types
+  field: PropTypes.shape({
+    name: PropTypes.string,
+    day_placeholder: PropTypes.string,
+    month_placeholder: PropTypes.string,
+    year_placeholder: PropTypes.string,
+    params: PropTypes.object, //  eslint-disable-line react/forbid-prop-types
+  }).isRequired,
+  onValueChange: PropTypes.func.isRequired,
+};
+
+export default FormFieldDate;

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

@@ -1,129 +1,119 @@
-define([
-  'react',
-  'form/fields/text.jsx',
-  'form/fields/textarea.jsx',
-  'form/fields/select.jsx',
-  'form/fields/radio.jsx',
-  'form/fields/checkbox.jsx',
-  'form/fields/selection.jsx',
-  'form/fields/date.jsx',
-],
-(
-  React,
-  FormFieldText,
-  FormFieldTextarea,
-  FormFieldSelect,
-  FormFieldRadio,
-  FormFieldCheckbox,
-  FormFieldSelection,
-  FormFieldDate
-) => {
-  const FormField = React.createClass({
-    renderField: function (data, inline = false) {
-      let description = false;
-      if(data.field.description) {
-        description = (
-          <p className="description">{ data.field.description }</p>
-        );
-      }
+import React from 'react';
+import FormFieldText from 'form/fields/text.jsx';
+import FormFieldTextarea from 'form/fields/textarea.jsx';
+import FormFieldSelect from 'form/fields/select.jsx';
+import FormFieldRadio from 'form/fields/radio.jsx';
+import FormFieldCheckbox from 'form/fields/checkbox.jsx';
+import FormFieldSelection from 'form/fields/selection.jsx';
+import FormFieldDate from 'form/fields/date.jsx';
+import jQuery from 'jquery';
 
-      let field = false;
-      let dataField = data.field;
-
-      if(data.field['field'] !== undefined) {
-        dataField = jQuery.merge(dataField, data.field.field);
-      }
-
-      switch(dataField.type) {
-        case 'text':
-          field = (<FormFieldText {...data} />);
-          break;
-
-        case 'textarea':
-          field = (<FormFieldTextarea {...data} />);
-          break;
-
-        case 'select':
-          field = (<FormFieldSelect {...data} />);
-          break;
-
-        case 'radio':
-          field = (<FormFieldRadio {...data} />);
-          break;
-
-        case 'checkbox':
-          field = (<FormFieldCheckbox {...data} />);
-          break;
-
-        case 'selection':
-          field = (<FormFieldSelection {...data} />);
-          break;
-
-        case 'date':
-          field = (<FormFieldDate {...data} />);
-          break;
-
-        case 'reactComponent':
-          field = (<data.field.component {...data} />);
-          break;
-      }
-
-      if(inline === true) {
-        return (
-          <span key={ 'field-' + (data.index || 0) }>
-            { field }
-            { description }
-          </span>
-        );
-      } else {
-        return (
-          <div key={ 'field-' + (data.index || 0) }>
-            { field }
-            { description }
-          </div>
-        );
-      }
-    },
-    render: function () {
-      let field = false;
-
-      if(this.props.field['fields'] !== undefined) {
-        field = this.props.field.fields.map((subfield, index) => {
-          return this.renderField({
-            index: index,
-            field: subfield,
-            item: this.props.item,
-            onValueChange: this.props.onValueChange || false,
-          });
-        });
-      } else {
-        field = this.renderField(this.props);
-      }
-
-      let tip = false;
-      if(this.props.field.tip) {
-        tip = (
-          <p className="description">{ this.props.field.tip }</p>
-        );
-      }
-
-      return (
-        <tr>
-          <th scope="row">
-            <label
-              htmlFor={ 'field_'+this.props.field.name }
-            >
-              { this.props.field.label }
-              { tip }
-            </label>
-          </th>
-          <td>
-            { field }
-          </td>
-        </tr>
+const FormField = React.createClass({
+  renderField: function renderField(data, inline = false) {
+    let description = false;
+    if (data.field.description) {
+      description = (
+        <p className="description">{ data.field.description }</p>
       );
-    },
-  });
+    }
 
-  return FormField;
+    let field = false;
+    let dataField = data.field;
+
+    if (data.field.field !== undefined) {
+      dataField = jQuery.merge(dataField, data.field.field);
+    }
+
+    switch (dataField.type) {
+      case 'text':
+        field = (<FormFieldText {...data} />);
+        break;
+
+      case 'textarea':
+        field = (<FormFieldTextarea {...data} />);
+        break;
+
+      case 'select':
+        field = (<FormFieldSelect {...data} />);
+        break;
+
+      case 'radio':
+        field = (<FormFieldRadio {...data} />);
+        break;
+
+      case 'checkbox':
+        field = (<FormFieldCheckbox {...data} />);
+        break;
+
+      case 'selection':
+        field = (<FormFieldSelection {...data} />);
+        break;
+
+      case 'date':
+        field = (<FormFieldDate {...data} />);
+        break;
+
+      case 'reactComponent':
+        field = (<data.field.component {...data} />);
+        break;
+
+      default:
+        field = 'invalid';
+        break;
+    }
+
+    if (inline === true) {
+      return (
+        <span key={`field-${data.index || 0}`}>
+          { field }
+          { description }
+        </span>
+      );
+    }
+    return (
+      <div key={`field-${data.index || 0}`}>
+        { field }
+        { description }
+      </div>
+    );
+  },
+  render: function render() {
+    let field = false;
+
+    if (this.props.field.fields !== undefined) {
+      field = this.props.field.fields.map((subfield, index) => this.renderField({
+        index,
+        field: subfield,
+        item: this.props.item,
+        onValueChange: this.props.onValueChange || false,
+      }));
+    } else {
+      field = this.renderField(this.props);
+    }
+
+    let tip = false;
+    if (this.props.field.tip) {
+      tip = (
+        <p className="description">{ this.props.field.tip }</p>
+      );
+    }
+
+    return (
+      <tr className={`form-field-row-${this.props.field.name}`}>
+        <th scope="row">
+          <label
+            htmlFor={`field_${this.props.field.name}`}
+          >
+            { this.props.field.label }
+            { tip }
+          </label>
+        </th>
+        <td>
+          { field }
+        </td>
+      </tr>
+    );
+  },
 });
+
+export default FormField;

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

@@ -1,41 +1,36 @@
-define([
-  'react',
-],
-(
-  React
-) => {
-  const FormFieldRadio = React.createClass({
-    render: function () {
-      if (this.props.field.values === undefined) {
-        return false;
-      }
+import React from 'react';
 
-      const selected_value = this.props.item[this.props.field.name];
-      const options = Object.keys(this.props.field.values).map(
-        (value, index) => {
-          return (
-            <p key={ 'radio-' + index }>
-              <label>
-                <input
-                  type="radio"
-                  checked={ selected_value === value }
-                  value={ value }
-                  onChange={ this.props.onValueChange }
-                  name={ this.props.field.name } />
-                { this.props.field.values[value] }
-              </label>
-            </p>
-          );
-        }
-      );
+const FormFieldRadio = React.createClass({
+  render: function render() {
+    if (this.props.field.values === undefined) {
+      return false;
+    }
 
-      return (
-        <div>
-          { options }
-        </div>
-      );
-    },
-  });
+    const selectedValue = this.props.item[this.props.field.name];
+    const options = Object.keys(this.props.field.values).map(
+      value => (
+        <p key={`radio-${value}`}>
+          <label htmlFor={this.props.field.name}>
+            <input
+              type="radio"
+              checked={selectedValue === value}
+              value={value}
+              onChange={this.props.onValueChange}
+              name={this.props.field.name}
+              id={this.props.field.name}
+            />
+            { this.props.field.values[value] }
+          </label>
+        </p>
+      )
+    );
 
-  return FormFieldRadio;
+    return (
+      <div>
+        { options }
+      </div>
+    );
+  },
 });
+
+export default FormFieldRadio;

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

@@ -17,7 +17,7 @@ const FormFieldSelect = React.createClass({
       );
     }
 
-    if (this.props.field['filter'] !== undefined) {
+    if (this.props.field.filter !== undefined) {
       filter = this.props.field.filter;
     }
 
@@ -41,29 +41,29 @@ const FormFieldSelect = React.createClass({
       keys = Object.keys(this.props.field.values);
     }
 
-    const options = keys.map(
-      (value, index) => {
-
-        if (filter !== false && filter(this.props.item, value) === false) {
-          return;
-        }
-
-        return (
+    const options = keys
+      .filter((value) => {
+        if (filter === false) return true;
+        return filter(this.props.item, value);
+      })
+      .map(
+        value => (
           <option
-            key={ 'option-' + index }
-            value={ value }>
+            key={`option-${value}`}
+            value={value}
+          >
             { this.props.field.values[value] }
           </option>
-        );
-      }
-    );
+        )
+      );
 
     return (
       <select
-        name={ this.props.field.name }
-        id={ 'field_'+this.props.field.name }
-        value={ this.props.item[this.props.field.name] }
-        onChange={ this.props.onValueChange }
+        name={this.props.field.name}
+        id={`field_${this.props.field.name}`}
+        value={this.props.item[this.props.field.name] || ''}
+        onChange={this.props.onValueChange}
+        data-automation-id={this.props.automationId}
         {...this.props.field.validation}
       >
         {placeholder}

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

@@ -1,194 +1,261 @@
-define([
-  'react',
-  'react-dom',
-  'jquery',
-  'select2',
-],
-(
-  React,
-  ReactDOM,
-  jQuery
-) => {
-  const Selection = React.createClass({
-    getInitialState: function () {
-      return {
-        items: [],
-        select2: false,
-      };
-    },
-    componentWillMount: function () {
-      this.loadCachedItems();
-    },
-    allowMultipleValues: function () {
-      return (this.props.field.multiple === true);
-    },
-    isSelect2Initialized: function () {
-      return (this.state.select2 === true);
-    },
-    componentDidMount: function () {
-      if(this.allowMultipleValues()) {
-        this.setupSelect2();
-      }
-    },
-    componentDidUpdate: function (prevProps) {
-      if(
-        (this.props.item !== undefined && prevProps.item !== undefined)
-        && (this.props.item.id !== prevProps.item.id)
-      ) {
-        jQuery('#'+this.refs.select.id)
-          .val(this.getSelectedValues())
-          .trigger('change');
-      }
-    },
-    componentWillUnmount: function () {
-      if(this.allowMultipleValues()) {
-        this.destroySelect2();
-      }
-    },
-    destroySelect2: function () {
-      if(this.isSelect2Initialized()) {
-        jQuery('#'+this.refs.select.id).select2('destroy');
-      }
-    },
-    setupSelect2: function () {
-      if(this.isSelect2Initialized()) {
-        return;
-      }
+import React from 'react';
+import jQuery from 'jquery';
+import _ from 'underscore';
+import 'react-dom';
+import 'select2';
 
-      const select2 = jQuery('#'+this.refs.select.id).select2({
-        width: (this.props.width || ''),
-        templateResult: function (item) {
-          if(item.element && item.element.selected) {
-            return null;
-          } else {
-            if(item.title) {
-              return item.title;
-            } else {
-              return item.text;
-            }
-          }
-        },
-      });
+const Selection = React.createClass({
+  allowMultipleValues: function allowMultipleValues() {
+    return (this.props.field.multiple === true);
+  },
+  isSelect2Initialized: function isSelect2Initialized() {
+    return (jQuery(`#${this.select.id}`).hasClass('select2-hidden-accessible') === true);
+  },
+  isSelect2Component: function isSelect2Component() {
+    return this.allowMultipleValues() || this.props.field.forceSelect2;
+  },
+  componentDidMount: function componentDidMount() {
+    if (this.isSelect2Component()) {
+      this.setupSelect2();
+    }
+  },
+  componentDidUpdate: function componentDidUpdate(prevProps) {
+    if ((this.props.item !== undefined && prevProps.item !== undefined)
+      && (this.props.item.id !== prevProps.item.id)
+    ) {
+      jQuery(`#${this.select.id}`)
+        .val(this.getSelectedValues())
+        .trigger('change');
+    }
 
-      let hasRemoved = false;
-      select2.on('select2:unselecting', () => {
-        hasRemoved = true;
-      });
-      select2.on('select2:opening', (e) => {
-        if(hasRemoved === true) {
-          hasRemoved = false;
-          e.preventDefault();
+    if (this.isSelect2Initialized() &&
+      (this.getFieldId(this.props) !== this.getFieldId(prevProps)) &&
+      this.props.field.resetSelect2OnUpdate !== undefined
+    ) {
+      this.resetSelect2();
+    }
+  },
+  componentWillUnmount: function componentWillUnmount() {
+    if (this.isSelect2Component()) {
+      this.destroySelect2();
+    }
+  },
+  getFieldId: function getFieldId(data) {
+    const props = data || this.props;
+    return props.field.id || props.field.name;
+  },
+  resetSelect2: function resetSelect2() {
+    this.destroySelect2();
+    this.setupSelect2();
+  },
+  destroySelect2: function destroySelect2() {
+    if (this.isSelect2Initialized()) {
+      jQuery(`#${this.select.id}`).select2('destroy');
+      this.cleanupAfterSelect2();
+    }
+  },
+  cleanupAfterSelect2: function cleanupAfterSelect2() {
+    // remove DOM elements created by Select2 that are not tracked by React
+    jQuery(`#${this.select.id}`)
+      .find('option:not(.default)')
+      .remove();
+
+    // unbind events (https://select2.org/programmatic-control/methods#event-unbinding)
+    jQuery(`#${this.select.id}`)
+      .off('select2:unselecting')
+      .off('select2:opening');
+  },
+  setupSelect2: function setupSelect2() {
+    if (this.isSelect2Initialized()) {
+      return;
+    }
+
+    let select2Options = {
+      disabled: this.props.disabled || false,
+      width: (this.props.width || ''),
+      placeholder: {
+        id: '', // the value of the option
+        text: this.props.field.placeholder,
+      },
+      templateResult: function templateResult(item) {
+        if (item.element && item.element.selected) {
+          return null;
+        } else if (item.title) {
+          return item.title;
         }
-      });
+        return item.text;
+      },
+    };
 
-      select2.on('change', this.handleChange);
-
-      this.setState({ select2: true });
-    },
-    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((item) => {
-              return item.id;
-            });
-          }
-        } else {
-          return this.props.item[this.props.field.name];
-        }
-      }
-      return null;
-    },
-    loadCachedItems: function () {
-      if(typeof(window['mailpoet_'+this.props.field.endpoint]) !== 'undefined') {
-        let items = window['mailpoet_'+this.props.field.endpoint];
-
-
-        if(this.props.field['filter'] !== undefined) {
-          items = items.filter(this.props.field.filter);
-        }
-
-        this.setState({
-          items: items,
-        });
-      }
-    },
-    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;
-        }
-        const transformedValue = this.transformChangedValue(value);
-        this.props.onValueChange({
-          target: {
-            value: transformedValue,
-            name: this.props.field.name,
+    const remoteQuery = this.props.field.remoteQuery || null;
+    if (remoteQuery) {
+      select2Options = Object.assign(select2Options, {
+        ajax: {
+          url: window.ajaxurl,
+          type: 'POST',
+          dataType: 'json',
+          data: function data(params) {
+            return {
+              action: 'mailpoet',
+              api_version: window.mailpoet_api_version,
+              token: window.mailpoet_token,
+              endpoint: remoteQuery.endpoint,
+              method: remoteQuery.method,
+              data: Object.assign(
+                remoteQuery.data,
+                { query: params.term }
+              ),
+            };
           },
-        });
-      }
-    },
-    getLabel: function (item) {
-      if(this.props.field['getLabel'] !== undefined) {
-        return this.props.field.getLabel(item, this.props.item);
-      }
-      return item.name;
-    },
-    getSearchLabel: function (item) {
-      if(this.props.field['getSearchLabel'] !== undefined) {
-        return this.props.field.getSearchLabel(item, this.props.item);
-      }
-      return null;
-    },
-    getValue: function (item) {
-      if(this.props.field['getValue'] !== undefined) {
-        return this.props.field.getValue(item, this.props.item);
-      }
-      return item.id;
-    },
-    // 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) {
-      if(typeof this.props.field['transformChangedValue'] === 'function') {
-        return this.props.field.transformChangedValue.call(this, value);
-      } else {
-        return value;
-      }
-    },
-    render: function () {
-      const options = this.state.items.map((item, index) => {
-        const label = this.getLabel(item);
-        const searchLabel = this.getSearchLabel(item);
-        const value = this.getValue(item);
-
-        return (
-          <option
-            key={ 'option-'+index }
-            value={ value }
-            title={ searchLabel }
-          >
-            { label }
-          </option>
-        );
+          processResults: function processResults(response) {
+            return { results: (!_.has(response, 'data')) ?
+              [] :
+              response.data.map(item =>
+                ({ id: item.id || item.value, text: item.name || item.text })
+              ),
+            };
+          },
+        },
+        minimumInputLength: remoteQuery.minimumInputLength || 2,
       });
+    }
+
+    if (this.props.field.extendSelect2Options !== undefined) {
+      select2Options = Object.assign(select2Options, this.props.field.extendSelect2Options);
+    }
+
+    const select2 = jQuery(`#${this.select.id}`).select2(select2Options);
+
+    let hasRemoved = false;
+    select2.on('select2:unselecting', () => {
+      hasRemoved = true;
+    });
+    select2.on('select2:opening', (e) => {
+      if (hasRemoved === true) {
+        hasRemoved = false;
+        e.preventDefault();
+      }
+    });
+
+    select2.on('change', this.handleChange);
+  },
+  getSelectedValues: function getSelectedValues() {
+    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 (_.isArray(this.props.item[this.props.field.name])) {
+          return this.props.item[this.props.field.name].map(item => item.id);
+        }
+      } else {
+        return this.props.item[this.props.field.name];
+      }
+    }
+    return null;
+  },
+  getItems: function getItems() {
+    let items;
+    if (typeof (window[`mailpoet_${this.props.field.endpoint}`]) !== 'undefined') {
+      items = window[`mailpoet_${this.props.field.endpoint}`];
+    } else if (this.props.field.values !== undefined) {
+      items = this.props.field.values;
+    }
+
+    if (_.isArray(items)) {
+      if (this.props.field.filter !== undefined) {
+        items = items.filter(this.props.field.filter);
+      }
+    }
+
+    return items;
+  },
+  handleChange: function handleChange(e) {
+    if (this.props.onValueChange === undefined) return;
+
+    const valueTextPair = jQuery(`#${this.select.id}`).children(':selected').map(function element() {
+      return { id: jQuery(this).val(), text: jQuery(this).text() };
+    });
+    const value = (this.props.field.multiple) ? _.pluck(valueTextPair, 'id') : _.pluck(valueTextPair, 'id').toString();
+    const transformedValue = this.transformChangedValue(value, valueTextPair);
+
+    this.props.onValueChange({
+      target: {
+        value: transformedValue,
+        name: this.props.field.name,
+        id: e.target.id,
+      },
+    });
+  },
+  getLabel: function getLabel(item) {
+    if (this.props.field.getLabel !== undefined) {
+      return this.props.field.getLabel(item, this.props.item);
+    }
+    return item.name;
+  },
+  getSearchLabel: function getSearchLabel(item) {
+    if (this.props.field.getSearchLabel !== undefined) {
+      return this.props.field.getSearchLabel(item, this.props.item);
+    }
+    return null;
+  },
+  getValue: function getValue(item) {
+    if (this.props.field.getValue !== undefined) {
+      return this.props.field.getValue(item, this.props.item);
+    }
+    return item.id;
+  },
+  // 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 transformChangedValue(value, textValuePair) {
+    if (typeof this.props.field.transformChangedValue === 'function') {
+      return this.props.field.transformChangedValue.call(this, value, textValuePair);
+    }
+    return value;
+  },
+  insertEmptyOption: function insertEmptyOption() {
+    // https://select2.org/placeholders
+    // For single selects only, in order for the placeholder value to appear,
+    // we must have a blank <option> as the first option in the <select> control.
+    if (this.allowMultipleValues()) return undefined;
+    if (this.props.field.placeholder) return (<option className="default" />);
+    return undefined;
+  },
+  render: function render() {
+    const items = this.getItems(this.props.field);
+    const selectedValues = this.getSelectedValues();
+    const options = items.map((item) => {
+      const label = this.getLabel(item);
+      const searchLabel = this.getSearchLabel(item);
+      const value = this.getValue(item);
 
       return (
-        <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>
+        <option
+          key={`option-${item.id}`}
+          className="default"
+          value={value}
+          title={searchLabel}
+        >
+          { label }
+        </option>
       );
-    },
-  });
+    });
 
-  return Selection;
+    return (
+      <select
+        id={this.getFieldId()}
+        ref={(c) => { this.select = c; }}
+        disabled={this.props.field.disabled}
+        data-placeholder={this.props.field.placeholder}
+        multiple={this.props.field.multiple}
+        defaultValue={selectedValues}
+        {...this.props.field.validation}
+      >
+        { this.insertEmptyOption() }
+        { options }
+      </select>
+    );
+  },
 });
+
+export default Selection;

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

@@ -2,30 +2,52 @@ import React from 'react';
 
 const FormFieldText = React.createClass({
   render() {
-    let value = this.props.item[this.props.field.name];
-    if (value === undefined) {
-      value = this.props.field.defaultValue || '';
+    const name = this.props.field.name || null;
+    const item = this.props.item || {};
+    let value;
+    let defaultValue;
+    // value should only be set when onChangeValue is configured
+    if (this.props.onValueChange instanceof Function) {
+      value = item[this.props.field.name];
+      // set value to defaultValue if available
+      value = (value === undefined) ?
+        (this.props.field.defaultValue || '') : value;
+    }
+    // defaultValue should only be set only when value is not set
+    if (!value && this.props.field.defaultValue) {
+      defaultValue = this.props.field.defaultValue;
+    }
+
+    let id = this.props.field.id || null;
+    if (!id && this.props.field.name) {
+      id = `field_${this.props.field.name}`;
+    }
+
+    let className = this.props.field.class || null;
+    if (!className && !this.props.field.size) {
+      className = 'regular-text';
     }
 
     return (
       <input
         type="text"
         disabled={
-          (this.props.field['disabled'] !== undefined)
-          ? this.props.field.disabled(this.props.item)
-          : false
+          (this.props.field.disabled !== undefined)
+            ? this.props.field.disabled(this.props.item)
+            : false
         }
-        className={ (this.props.field.size) ? '' : 'regular-text' }
+        className={className}
         size={
           (this.props.field.size !== 'auto' && this.props.field.size > 0)
-          ? this.props.field.size
-          : false
+            ? this.props.field.size
+            : false
         }
-        name={ this.props.field.name }
-        id={ 'field_'+this.props.field.name }
-        value={ value }
-        placeholder={ this.props.field.placeholder }
-        onChange={ this.props.onValueChange }
+        name={name}
+        id={id}
+        value={value}
+        defaultValue={defaultValue}
+        placeholder={this.props.field.placeholder}
+        onChange={this.props.onValueChange}
         {...this.props.field.validation}
       />
     );

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

@@ -1,26 +1,29 @@
-define([
-  'react',
-],
-(
-  React
-) => {
-  const FormFieldTextarea = React.createClass({
-    render: function () {
-      return (
-        <textarea
-          type="text"
-          className="regular-text"
-          name={ this.props.field.name }
-          id={ 'field_'+this.props.field.name }
-          value={ this.props.item[this.props.field.name] }
-          placeholder={ this.props.field.placeholder }
-          defaultValue={ this.props.field.defaultValue }
-          onChange={ this.props.onValueChange }
-          {...this.props.field.validation}
-        />
-      );
-    },
-  });
+import React from 'react';
+import PropTypes from 'prop-types';
 
-  return FormFieldTextarea;
-});
+const FormFieldTextarea = props => (
+  <textarea
+    type="text"
+    className="regular-text"
+    name={props.field.name}
+    id={`field_${props.field.name}`}
+    value={props.item[props.field.name]}
+    placeholder={props.field.placeholder}
+    defaultValue={props.field.defaultValue}
+    onChange={props.onValueChange}
+    {...props.field.validation}
+  />
+);
+
+FormFieldTextarea.propTypes = {
+  item: PropTypes.object.isRequired, //  eslint-disable-line react/forbid-prop-types
+  field: PropTypes.shape({
+    name: PropTypes.string,
+    placeholder: PropTypes.string,
+    defaultValue: PropTypes.string,
+    validation: PropTypes.object, //  eslint-disable-line react/forbid-prop-types
+  }).isRequired,
+  onValueChange: PropTypes.func.isRequired,
+};
+
+export default FormFieldTextarea;

assets/js/src/form/form.jsx

@@ -1,246 +1,237 @@
-define(
-  [
-    'react',
-    'mailpoet',
-    'classnames',
-    'react-router',
-    'form/fields/field.jsx',
-  ],
-  (
-    React,
-    MailPoet,
-    classNames,
-    Router,
-    FormField
-  ) => {
+import React from 'react';
+import MailPoet from 'mailpoet';
+import classNames from 'classnames';
+import FormField from 'form/fields/field.jsx';
+import jQuery from 'jquery';
 
-    const Form = React.createClass({
-      contextTypes: {
-        router: React.PropTypes.object.isRequired,
-      },
-      getDefaultProps: function () {
-        return {
-          params: {},
-        };
-      },
-      getInitialState: function () {
-        return {
+const Form = React.createClass({
+  contextTypes: {
+    router: React.PropTypes.object.isRequired,
+  },
+  getDefaultProps: function getDefaultProps() {
+    return {
+      params: {},
+    };
+  },
+  getInitialState: function getInitialState() {
+    return {
+      loading: false,
+      errors: [],
+      item: {},
+    };
+  },
+  getValues: function getValues() {
+    return this.props.item ? this.props.item : this.state.item;
+  },
+  getErrors: function getErrors() {
+    return this.props.errors ? this.props.errors : this.state.errors;
+  },
+  componentDidMount: function componentDidMount() {
+    if (this.props.params.id !== undefined) {
+      this.loadItem(this.props.params.id);
+    } else {
+      setImmediate(() => {
+        this.setState({
+          item: jQuery('.mailpoet_form').mailpoetSerializeObject(),
+        });
+      });
+    }
+  },
+  componentWillReceiveProps: function componentWillReceiveProps(props) {
+    if (props.params.id === undefined) {
+      setImmediate(() => {
+        this.setState({
           loading: false,
-          errors: [],
           item: {},
+        });
+      });
+      if (props.item === undefined) {
+        this.form.reset();
+      }
+    }
+  },
+  loadItem: function loadItem(id) {
+    this.setState({ loading: true });
+
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: this.props.endpoint,
+      action: 'get',
+      data: {
+        id,
+      },
+    }).done((response) => {
+      this.setState({
+        loading: false,
+        item: response.data,
+      });
+      if (typeof this.props.onItemLoad === 'function') {
+        this.props.onItemLoad(response.data);
+      }
+    }).fail(() => {
+      this.setState({
+        loading: false,
+        item: {},
+      }, function failSetStateCallback() {
+        this.context.router.push('/new');
+      });
+    });
+  },
+  handleSubmit: function handleSubmit(e) {
+    e.preventDefault();
+
+    // handle validation
+    if (this.props.isValid !== undefined) {
+      if (this.props.isValid() === false) {
+        return;
+      }
+    }
+
+    this.setState({ loading: true });
+
+    // only get values from displayed fields
+    const item = {};
+    this.props.fields.forEach((field) => {
+      if (field.fields !== undefined) {
+        field.fields.forEach((subfield) => {
+          item[subfield.name] = this.state.item[subfield.name];
+        });
+      } else {
+        item[field.name] = this.state.item[field.name];
+      }
+    });
+    // set id if specified
+    if (this.props.params.id !== undefined) {
+      item.id = this.props.params.id;
+    }
+
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: this.props.endpoint,
+      action: 'save',
+      data: item,
+    }).always(() => {
+      this.setState({ loading: false });
+    }).done(() => {
+      if (this.props.onSuccess !== undefined) {
+        this.props.onSuccess();
+      } else {
+        this.context.router.push('/');
+      }
+
+      if (this.props.params.id !== undefined) {
+        this.props.messages.onUpdate();
+      } else {
+        this.props.messages.onCreate();
+      }
+    }).fail((response) => {
+      if (response.errors.length > 0) {
+        this.setState({ errors: response.errors });
+      }
+    });
+  },
+  handleValueChange: function handleValueChange(e) {
+    if (this.props.onChange) {
+      return this.props.onChange(e);
+    }
+    const item = this.state.item;
+    const field = e.target.name;
+
+    item[field] = e.target.value;
+
+    this.setState({
+      item,
+    });
+    return true;
+  },
+  render: function render() {
+    let errors;
+    if (this.getErrors() !== undefined) {
+      errors = this.getErrors().map(error => (
+        <div className="mailpoet_notice notice inline error is-dismissible" key={`error-${error.message}`}>
+          <p>{ error.message }</p>
+        </div>
+      ));
+    }
+
+    const formClasses = classNames(
+      'mailpoet_form',
+      { mailpoet_form_loading: this.state.loading || this.props.loading }
+    );
+
+    let beforeFormContent = false;
+    let afterFormContent = false;
+
+    if (this.props.beforeFormContent !== undefined) {
+      beforeFormContent = this.props.beforeFormContent(this.getValues());
+    }
+
+    if (this.props.afterFormContent !== undefined) {
+      afterFormContent = this.props.afterFormContent(this.getValues());
+    }
+
+    const fields = this.props.fields.map((field) => {
+      // 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);
         };
-      },
-      getValues: function () {
-        return this.props.item ? this.props.item : this.state.item;
-      },
-      getErrors: function () {
-        return this.props.errors ? this.props.errors : this.state.errors;
-      },
-      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(),
-            });
-          }
-        }
-      },
-      componentWillReceiveProps: function (props) {
-        if(props.params.id === undefined) {
-          this.setState({
-            loading: false,
-            item: {},
-          });
-          if (props.item === undefined) {
-            this.refs.form.reset();
-          }
-        } else {
-          this.loadItem(props.params.id);
-        }
-      },
-      loadItem: function (id) {
-        this.setState({ loading: true });
+      }
 
-        MailPoet.Ajax.post({
-          api_version: window.mailpoet_api_version,
-          endpoint: this.props.endpoint,
-          action: 'get',
-          data: {
-            id: id,
-          },
-        }).done((response) => {
-          this.setState({
-            loading: false,
-            item: response.data,
-          });
-        }).fail(() => {
-          this.setState({
-            loading: false,
-            item: {},
-          }, function () {
-            this.context.router.push('/new');
-          });
-        });
-      },
-      handleSubmit: function (e) {
-        e.preventDefault();
-
-        // handle validation
-        if(this.props.isValid !== undefined) {
-          if(this.props.isValid() === false) {
-            return;
-          }
-        }
-
-        this.setState({ loading: true });
-
-        // only get values from displayed fields
-        const item = {};
-        this.props.fields.map((field) => {
-          if(field['fields'] !== undefined) {
-            field.fields.map((subfield) => {
-              item[subfield.name] = this.state.item[subfield.name];
-            });
-          } else {
-            item[field.name] = this.state.item[field.name];
-          }
-        });
-        // set id if specified
-        if(this.props.params.id !== undefined) {
-          item.id = this.props.params.id;
-        }
-
-        MailPoet.Ajax.post({
-          api_version: window.mailpoet_api_version,
-          endpoint: this.props.endpoint,
-          action: 'save',
-          data: item,
-        }).always(() => {
-          this.setState({ loading: false });
-        }).done(() => {
-          if(this.props.onSuccess !== undefined) {
-            this.props.onSuccess();
-          } else {
-            this.context.router.push('/');
-          }
-
-          if(this.props.params.id !== undefined) {
-            this.props.messages.onUpdate();
-          } else {
-            this.props.messages.onCreate();
-          }
-        }).fail((response) => {
-          if(response.errors.length > 0) {
-            this.setState({ errors: response.errors });
-          }
-        });
-      },
-      handleValueChange: function (e) {
-        if (this.props.onChange) {
-          return this.props.onChange(e);
-        } else {
-          const item = this.state.item;
-          const field = e.target.name;
-
-          item[field] = e.target.value;
-
-          this.setState({
-            item: item,
-          });
-          return true;
-        }
-      },
-      render: function () {
-        let errors;
-        if(this.getErrors() !== undefined) {
-          errors = this.getErrors().map((error, index) => {
-            return (
-              <p key={ 'error-'+index } className="mailpoet_error">
-                { error.message }
-              </p>
-            );
-          });
-        }
-
-        const formClasses = classNames(
-          'mailpoet_form',
-          { mailpoet_form_loading: this.state.loading || this.props.loading }
-        );
-
-        let beforeFormContent = false;
-        let afterFormContent = false;
-
-        if (this.props.beforeFormContent !== undefined) {
-          beforeFormContent = this.props.beforeFormContent(this.getValues());
-        }
-
-        if (this.props.afterFormContent !== undefined) {
-          afterFormContent = this.props.afterFormContent(this.getValues());
-        }
-
-        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={ onValueChange }
-              key={ 'field-'+i } />
-          );
-        });
-
-        let actions = false;
-        if(this.props.children) {
-          actions = this.props.children;
-        } else {
-          actions = (
-            <input
-              className="button button-primary"
-              type="submit"
-              value={MailPoet.I18n.t('save')}
-              disabled={this.state.loading} />
-          );
-        }
-
-        return (
-          <div>
-            { beforeFormContent }
-            <form
-              id={ this.props.id }
-              ref="form"
-              className={ formClasses }
-              onSubmit={
-                (this.props.onSubmit !== undefined)
-                ? this.props.onSubmit
-                : this.handleSubmit
-              }
-            >
-              { errors }
-
-              <table className="form-table">
-                <tbody>
-                  {fields}
-                </tbody>
-              </table>
-
-              { actions }
-            </form>
-            { afterFormContent }
-          </div>
-        );
-      },
+      return (
+        <FormField
+          field={field}
+          item={this.getValues()}
+          onValueChange={onValueChange}
+          key={`field-${field.name}`}
+        />
+      );
     });
 
-    return Form;
-  }
-);
+    let actions = false;
+    if (this.props.children) {
+      actions = this.props.children;
+    } else {
+      actions = (
+        <input
+          className="button button-primary"
+          type="submit"
+          value={MailPoet.I18n.t('save')}
+          disabled={this.state.loading}
+        />
+      );
+    }
+
+    return (
+      <div>
+        { beforeFormContent }
+        <form
+          id={this.props.id}
+          ref={(c) => { this.form = c; }}
+          className={formClasses}
+          onSubmit={
+            (this.props.onSubmit !== undefined)
+              ? this.props.onSubmit
+              : this.handleSubmit
+          }
+          data-automation-id={this.props.automationId}
+        >
+          { errors }
+
+          <table className="form-table">
+            <tbody>
+              {fields}
+            </tbody>
+          </table>
+
+          { actions }
+        </form>
+        { afterFormContent }
+      </div>
+    );
+  },
+});
+
+export default Form;

assets/js/src/forms/forms.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route, IndexRoute, useRouterHistory } from 'react-router';
 import { createHashHistory } from 'history';
-import FormList from 'forms/list.jsx';
+import FormList from './list.jsx';
 
 const history = useRouterHistory(createHashHistory)({ queryKey: false });
 
@@ -14,12 +14,12 @@ const App = React.createClass({
 
 const container = document.getElementById('forms_container');
 
-if(container) {
+if (container) {
   ReactDOM.render((
-    <Router history={ history }>
-      <Route path="/" component={ App }>
-        <IndexRoute component={ FormList } />
-        <Route path="*" component={ FormList } />
+    <Router history={history}>
+      <Route path="/" component={App}>
+        <IndexRoute component={FormList} />
+        <Route path="*" component={FormList} />
       </Route>
     </Router>
   ), container);

assets/js/src/forms/list.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import Listing from 'listing/listing.jsx';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
+import jQuery from 'jquery';
+import Listing from '../listing/listing.jsx';
 
 const columns = [
   {
@@ -26,7 +27,7 @@ const columns = [
 
 const messages = {
   onTrash: (response) => {
-    const count = ~~response.meta.count;
+    const count = Number(response.meta.count);
     let message = null;
 
     if (count === 1) {
@@ -41,7 +42,7 @@ const messages = {
     MailPoet.Notice.success(message);
   },
   onDelete: (response) => {
-    const count = ~~response.meta.count;
+    const count = Number(response.meta.count);
     let message = null;
 
     if (count === 1) {
@@ -56,7 +57,7 @@ const messages = {
     MailPoet.Notice.success(message);
   },
   onRestore: (response) => {
-    const count = ~~response.meta.count;
+    const count = Number(response.meta.count);
     let message = null;
 
     if (count === 1) {
@@ -72,7 +73,7 @@ const messages = {
   },
 };
 
-const bulk_actions = [
+const bulkActions = [
   {
     name: 'trash',
     label: MailPoet.I18n.t('moveToTrash'),
@@ -80,20 +81,20 @@ const bulk_actions = [
   },
 ];
 
-const item_actions = [
+const itemActions = [
   {
     name: 'edit',
     label: MailPoet.I18n.t('edit'),
-    link: function (item) {
+    link: function link(item) {
       return (
-        <a href={ `admin.php?page=mailpoet-form-editor&id=${item.id}` }>{MailPoet.I18n.t('edit')}</a>
+        <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 onClick(item, refresh) {
       return MailPoet.Ajax.post({
         api_version: window.mailpoet_api_version,
         endpoint: 'forms',
@@ -109,7 +110,7 @@ const item_actions = [
       }).fail((response) => {
         if (response.errors.length > 0) {
           MailPoet.Notice.error(
-            response.errors.map((error) => { return error.message; }),
+            response.errors.map(error => error.message),
             { scroll: true }
           );
         }
@@ -128,40 +129,39 @@ const FormList = React.createClass({
       endpoint: 'forms',
       action: 'create',
     }).done((response) => {
-      window.location = mailpoet_form_edit_url + response.data.id;
+      window.location = window.mailpoet_form_edit_url + response.data.id;
     }).fail((response) => {
       if (response.errors.length > 0) {
         MailPoet.Notice.error(
-          response.errors.map((error) => { return error.message; }),
+          response.errors.map(error => error.message),
           { scroll: true }
         );
       }
     });
   },
   renderItem(form, actions) {
-    const row_classes = classNames(
+    const rowClasses = classNames(
       'manage-column',
       'column-primary',
       'has-row-actions'
     );
 
-    let segments = mailpoet_segments.filter((segment) => {
-      return (jQuery.inArray(segment.id, form.segments) !== -1);
-    }).map((segment) => {
-      return segment.name;
-    }).join(', ');
+    let segments = window.mailpoet_segments
+      .filter(segment => (jQuery.inArray(segment.id, form.segments) !== -1))
+      .map(segment => segment.name)
+      .join(', ');
 
     if (form.settings.segments_selected_by === 'user') {
-      segments = MailPoet.I18n.t('userChoice') + ' ' + segments;
+      segments = `${MailPoet.I18n.t('userChoice')} ${segments}`;
     }
 
     return (
       <div>
-        <td className={ row_classes }>
+        <td className={rowClasses}>
           <strong>
             <a
               className="row-title"
-              href={ `admin.php?page=mailpoet-form-editor&id=${form.id}` }
+              href={`admin.php?page=mailpoet-form-editor&id=${form.id}`}
             >{ form.name }</a>
           </strong>
           { actions }
@@ -185,21 +185,22 @@ const FormList = React.createClass({
           {MailPoet.I18n.t('pageTitle')} <a
             className="page-title-action"
             href="javascript:;"
-            onClick={ this.createForm }
+            onClick={this.createForm}
+            data-automation-id="create_new_form"
           >{MailPoet.I18n.t('new')}</a>
         </h1>
 
         <Listing
-          limit={ mailpoet_listing_per_page }
-          location={ this.props.location }
-          params={ this.props.params }
-          messages={ messages }
-          search={ false }
+          limit={window.mailpoet_listing_per_page}
+          location={this.props.location}
+          params={this.props.params}
+          messages={messages}
+          search={false}
           endpoint="forms"
-          onRenderItem={ this.renderItem }
-          columns={ columns }
-          bulk_actions={ bulk_actions }
-          item_actions={ item_actions }
+          onRenderItem={this.renderItem}
+          columns={columns}
+          bulk_actions={bulkActions}
+          item_actions={itemActions}
         />
       </div>
     );

assets/js/src/handlebars_helpers.js

@@ -1,117 +1,117 @@
-define('handlebars_helpers', ['handlebars'], function(Handlebars) {
+/* eslint-disable func-names */
+define('handlebars_helpers', ['handlebars'], function (Handlebars) {
   // Handlebars helpers
-  Handlebars.registerHelper('concat', function() {
-      var size = (arguments.length - 1),
-          output = '';
-      for(var i = 0; i < size; i++) {
-          output += arguments[i];
-      };
-      return output;
+  Handlebars.registerHelper('concat', function () {
+    var size = (arguments.length - 1);
+    var output = '';
+    var i;
+    for (i = 0; i < size; i += 1) {
+      output += arguments[i];
+    }
+    return output;
   });
 
-  Handlebars.registerHelper('number_format', function(value, block) {
-      return Number(value).toLocaleString();
+  Handlebars.registerHelper('number_format', function (value) {
+    return Number(value).toLocaleString();
   });
-  Handlebars.registerHelper('date_format', function(timestamp, block) {
-    if(window.moment) {
-          if(timestamp === undefined || isNaN(timestamp) || timestamp <= 0) {
-              return;
-          }
+  Handlebars.registerHelper('date_format', function (timestamp, block) {
+    var f;
+    if (window.moment) {
+      if (timestamp === undefined || isNaN(timestamp) || timestamp <= 0) {
+        return undefined;
+      }
 
-          // set date format
-          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);
-          } else {
-              return moment.utc(timestamp).format(f);
-          }
-    } else {
-      return timestamp;
-    };
+      // set date format
+      f = block.hash.format || 'MMM Do, YYYY';
+      // check if we passed a timestamp
+      if (/^\s*\d+\s*$/.test(timestamp)) {
+        return window.moment.unix(timestamp).format(f);
+      }
+      return window.moment.utc(timestamp).format(f);
+    }
+    return timestamp;
   });
 
-  Handlebars.registerHelper('cycle', function(value, block) {
+  Handlebars.registerHelper('cycle', function (value, block) {
     var values = value.split(' ');
     return values[block.data.index % (values.length + 1)];
   });
 
   Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
-      switch (operator) {
-          case '==':
-              return (v1 == v2) ? options.fn(this) : options.inverse(this);
-          case '===':
-              return (v1 === v2) ? options.fn(this) : options.inverse(this);
-          case '!=':
-              return (v1 != v2) ? options.fn(this) : options.inverse(this);
-          case '!==':
-              return (v1 !== v2) ? options.fn(this) : options.inverse(this);
-          case '<':
-              return (v1 < v2) ? options.fn(this) : options.inverse(this);
-          case '<=':
-              return (v1 <= v2) ? options.fn(this) : options.inverse(this);
-          case '>':
-              return (v1 > v2) ? options.fn(this) : options.inverse(this);
-          case '>=':
-              return (v1 >= v2) ? options.fn(this) : options.inverse(this);
-          case '&&':
-              return (v1 && v2) ? options.fn(this) : options.inverse(this);
-          case '||':
-              return (v1 || v2) ? options.fn(this) : options.inverse(this);
-          case 'in':
-              var values = v2.split(',');
-              return (v2.indexOf(v1) !== -1) ? options.fn(this) : options.inverse(this);
-          default:
-              return options.inverse(this);
-      }
+    switch (operator) {
+      case '==':
+        return (v1 == v2) ? options.fn(this) : options.inverse(this); // eslint-disable-line eqeqeq
+      case '===':
+        return (v1 === v2) ? options.fn(this) : options.inverse(this);
+      case '!=':
+        return (v1 != v2) ? options.fn(this) : options.inverse(this); // eslint-disable-line eqeqeq
+      case '!==':
+        return (v1 !== v2) ? options.fn(this) : options.inverse(this);
+      case '<':
+        return (v1 < v2) ? options.fn(this) : options.inverse(this);
+      case '<=':
+        return (v1 <= v2) ? options.fn(this) : options.inverse(this);
+      case '>':
+        return (v1 > v2) ? options.fn(this) : options.inverse(this);
+      case '>=':
+        return (v1 >= v2) ? options.fn(this) : options.inverse(this);
+      case '&&':
+        return (v1 && v2) ? options.fn(this) : options.inverse(this);
+      case '||':
+        return (v1 || v2) ? options.fn(this) : options.inverse(this);
+      case 'in':
+        return (v2.indexOf(v1) !== -1) ? options.fn(this) : options.inverse(this);
+      default:
+        return options.inverse(this);
+    }
   });
 
-  Handlebars.registerHelper('nl2br', function(value, block) {
-      return value.gsub('\n', '<br />');
+  Handlebars.registerHelper('nl2br', function (value) {
+    return value.gsub('\n', '<br />');
   });
 
-  Handlebars.registerHelper('json_encode', function(value, block) {
-      return JSON.stringify(value);
+  Handlebars.registerHelper('json_encode', function (value) {
+    return JSON.stringify(value);
   });
 
-  Handlebars.registerHelper('json_decode', function(value, block) {
-      return JSON.parse(value);
+  Handlebars.registerHelper('json_decode', function (value) {
+    return JSON.parse(value);
   });
-  Handlebars.registerHelper('url', function(value, block) {
-      var url = window.location.protocol + '//' + window.location.host + window.location.pathname;
+  Handlebars.registerHelper('url', function (value) {
+    var url = window.location.protocol + '//' + window.location.host + window.location.pathname;
 
-      return url + value;
+    return url + value;
   });
-  Handlebars.registerHelper('emailFromMailto', function(value) {
-      var mailtoMatchingRegex = /^mailto\:/i;
-      if (typeof value === 'string' && value.match(mailtoMatchingRegex)) {
-          return value.replace(mailtoMatchingRegex, '');
-      } else {
-          return value;
-      }
+  Handlebars.registerHelper('emailFromMailto', function (value) {
+    var mailtoMatchingRegex = /^mailto:/i;
+    if (typeof value === 'string' && value.match(mailtoMatchingRegex)) {
+      return value.replace(mailtoMatchingRegex, '');
+    }
+    return value;
   });
-  Handlebars.registerHelper('lookup', function(obj, field, options) {
-      return obj && obj[field];
+  Handlebars.registerHelper('lookup', function (obj, field) {
+    return obj && obj[field];
   });
 
 
-  Handlebars.registerHelper('rsa_key', function(value, block) {
-      // extract all lines into an array
-      if(value === undefined) return '';
+  Handlebars.registerHelper('rsa_key', function (value) {
+    var lines;
+    // extract all lines into an array
+    if (value === undefined) return '';
 
-      var lines = value.trim().split('\n');
+    lines = value.trim().split('\n');
 
-      // remove header & footer
-      lines.shift();
-      lines.pop();
+    // remove header & footer
+    lines.shift();
+    lines.pop();
 
-      // return concatenated lines
-      return lines.join('');
+    // return concatenated lines
+    return lines.join('');
   });
 
-  Handlebars.registerHelper('trim', function(value, block) {
-      if(value === null || value === undefined) return '';
-      return value.trim();
+  Handlebars.registerHelper('trim', function (value) {
+    if (value === null || value === undefined) return '';
+    return value.trim();
   });
 
   /**
@@ -125,24 +125,23 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
    * @return {String}          The truncated string.
    */
   Handlebars.registerHelper('ellipsis', function (str, limit, append) {
-      var strAppend = append;
-      if (strAppend === undefined) {
-        strAppend = '';
-      }
-      var sanitized = str.replace(/(<([^>]+)>)/g, '');
-      if (sanitized.length > limit) {
-          return sanitized.substr(0, limit - strAppend.length) + strAppend;
-      } else {
-          return sanitized;
-      }
+    var strAppend = append;
+    var sanitized = str.replace(/(<([^>]+)>)/g, '');
+    if (strAppend === undefined) {
+      strAppend = '';
+    }
+    if (sanitized.length > limit) {
+      return sanitized.substr(0, limit - strAppend.length) + strAppend;
+    }
+    return sanitized;
   });
 
   Handlebars.registerHelper('getNumber', function (string) {
-      return parseInt(string, 10);
+    return parseInt(string, 10);
   });
 
-  Handlebars.registerHelper('fontWithFallback', function(font) {
-    switch(font) {
+  Handlebars.registerHelper('fontWithFallback', function (font) {
+    switch (font) {
       case 'Arial': return new Handlebars.SafeString("Arial, 'Helvetica Neue', Helvetica, sans-serif");
       case 'Comic Sans MS': return new Handlebars.SafeString("'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif");
       case 'Courier New': return new Handlebars.SafeString("'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace");

assets/js/src/help-tooltip.js

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

assets/js/src/help-tooltip.jsx

@@ -6,15 +6,15 @@ 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') {
+  if (!props.tooltipId && typeof props.tooltip === 'string') {
     tooltipId = props.tooltip;
   }
 
-  if(typeof props.tooltip === 'string') {
+  if (typeof props.tooltip === 'string') {
     tooltip = (<span
       style={{
         pointerEvents: 'all',
-        maxWidth: '400',
+        maxWidth: '400px',
         display: 'inline-block',
       }}
     >
@@ -32,17 +32,16 @@ function Tooltip(props) {
         data-event="click"
         data-tip
         data-for={tooltipId}
+      />
+      <ReactTooltip
+        globalEventOff="click"
+        multiline
+        id={tooltipId}
+        efect="solid"
+        place={props.place}
       >
-      </span>
-        <ReactTooltip
-          globalEventOff="click"
-          multiline={true}
-          id={tooltipId}
-          efect="solid"
-          place={props.place}
-        >
-          {tooltip}
-        </ReactTooltip>
+        {tooltip}
+      </ReactTooltip>
     </span>
   );
 }

assets/js/src/help/cron_status.jsx

@@ -0,0 +1,65 @@
+import MailPoet from 'mailpoet';
+import React from 'react';
+import KeyValueTable from 'common/key_value_table.jsx';
+import PrintBoolean from 'common/print_boolean.jsx';
+
+const CronStatus = (props) => {
+  const status = props.status_data;
+  const activeStatusMapping = {
+    active: MailPoet.I18n.t('running'),
+    inactive: MailPoet.I18n.t('cronWaiting'),
+  };
+  return (
+    <div>
+      <h2>{MailPoet.I18n.t('systemStatusCronStatusTitle')}</h2>
+      <KeyValueTable max_width={'400px'}>{[
+        {
+          key: MailPoet.I18n.t('accessible'),
+          value: <PrintBoolean>{status.accessible}</PrintBoolean>,
+        },
+        {
+          key: MailPoet.I18n.t('status'),
+          value: activeStatusMapping[status.status] ? activeStatusMapping[status.status] : MailPoet.I18n.t('unknown'),
+        },
+        {
+          key: MailPoet.I18n.t('lastUpdated'),
+          value: status.updated_at ? MailPoet.Date.full(status.updated_at * 1000) : MailPoet.I18n.t('unknown'),
+        },
+        {
+          key: MailPoet.I18n.t('lastRunStarted'),
+          value: status.run_accessed_at ? MailPoet.Date.full(status.run_started_at * 1000) : MailPoet.I18n.t('unknown'),
+        },
+        {
+          key: MailPoet.I18n.t('lastRunCompleted'),
+          value: status.run_completed_at ? MailPoet.Date.full(status.run_completed_at * 1000) : MailPoet.I18n.t('unknown'),
+        },
+        {
+          key: MailPoet.I18n.t('lastSeenError'),
+          value: status.last_error || MailPoet.I18n.t('none'),
+        }]}
+      </KeyValueTable>
+    </div>
+  );
+};
+
+CronStatus.propTypes = {
+  status_data: React.PropTypes.shape({
+    accessible: React.PropTypes.bool,
+    status: React.PropTypes.string,
+    updated_at: React.PropTypes.number,
+    run_accessed_at: React.PropTypes.number,
+    run_completed_at: React.PropTypes.number,
+  }).isRequired,
+};
+
+CronStatus.defaultProps = {
+  status_data: {
+    accessible: null,
+    status: null,
+    updated_at: null,
+    run_accessed_at: null,
+    run_completed_at: null,
+  },
+};
+
+module.exports = CronStatus;

assets/js/src/help/help.jsx

@@ -3,8 +3,9 @@ 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 SystemStatus from 'help/system_status.jsx';
 import SystemInfo from 'help/system_info.jsx';
+import KnowledgeBase from 'help/knowledge_base.jsx';
 
 const history = useRouterHistory(createHashHistory)({ queryKey: false });
 
@@ -16,17 +17,16 @@ const App = React.createClass({
 
 const container = document.getElementById('help_container');
 
-if(container) {
-
+if (container) {
   ReactDOM.render((
-    <Router history={ history }>
-      <Route path="/" component={ App }>
+    <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 path="knowledgeBase(/)**" params={{ tab: 'knowledgeBase' }} component={KnowledgeBase} />
+        <Route path="systemStatus(/)**" params={{ tab: 'systemStatus' }} component={SystemStatus} />
+        <Route path="systemInfo(/)**" params={{ tab: 'systemInfo' }} component={SystemInfo} />
       </Route>
     </Router>
   ), container);
-
 }

assets/js/src/help/knowledge_base.jsx

@@ -4,7 +4,6 @@ import MailPoet from 'mailpoet';
 import Tabs from './tabs.jsx';
 
 function KnowledgeBase() {
-
   return (
     <div>
 
@@ -12,18 +11,18 @@ function 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>
+        <li><a target="_blank" rel="noreferrer noopener" href="http://beta.docs.mailpoet.com/category/116-common-problems">Common Problems</a></li>
+        <li><a target="_blank" rel="noreferrer noopener" href="http://beta.docs.mailpoet.com/category/165-newsletters">Newsletters</a></li>
+        <li><a target="_blank" rel="noreferrer noopener" href="http://beta.docs.mailpoet.com/category/156-migration-questions">Migration Questions</a></li>
+        <li><a target="_blank" rel="noreferrer noopener" href="http://beta.docs.mailpoet.com/category/149-sending-methods">Sending Methods</a></li>
+        <li><a target="_blank" rel="noreferrer noopener" href="http://beta.docs.mailpoet.com/category/139-subscription-forms">Subscription Forms</a></li>
+        <li><a target="_blank" rel="noreferrer noopener" href="http://beta.docs.mailpoet.com/category/114-getting-started">Getting Started</a></li>
+        <li><a target="_blank" rel="noreferrer noopener" href="http://beta.docs.mailpoet.com/category/123-newsletter-designer">Newsletter Designer</a></li>
+        <li><a target="_blank" rel="noreferrer noopener" 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>
+      <a target="_blank" rel="noreferrer noopener" href="http://beta.docs.mailpoet.com/" className="button button-primary">{MailPoet.I18n.t('knowledgeBaseButton')}</a>
     </div>
   );
-};
+}
 
 module.exports = KnowledgeBase;

assets/js/src/help/queue_status.jsx

@@ -0,0 +1,85 @@
+import MailPoet from 'mailpoet';
+import React from 'react';
+import KeyValueTable from 'common/key_value_table.jsx';
+import TasksList from './tasks_list/tasks_list.jsx';
+import TasksListDataRow from './tasks_list/tasks_list_data_row.jsx';
+
+const QueueStatus = (props) => {
+  const status = props.status_data;
+  return (
+    <div>
+      <h2>{MailPoet.I18n.t('systemStatusQueueTitle')}</h2>
+      <KeyValueTable max_width={'400px'}>{
+        [{
+          key: MailPoet.I18n.t('status'),
+          value: status.status === 'paused' ? MailPoet.I18n.t('paused') : MailPoet.I18n.t('running'),
+        }, {
+          key: MailPoet.I18n.t('startedAt'),
+          value: status.started ? MailPoet.Date.full(status.started * 1000) : MailPoet.I18n.t('unknown'),
+        }, {
+          key: MailPoet.I18n.t('sentEmails'),
+          value: status.sent || 0,
+        }, {
+          key: MailPoet.I18n.t('retryAttempt'),
+          value: status.retry_attempt || MailPoet.I18n.t('none'),
+        }, {
+          key: MailPoet.I18n.t('retryAt'),
+          value: status.retry_at ? MailPoet.Date.full(status.retry_at * 1000) : MailPoet.I18n.t('none'),
+        }, {
+          key: MailPoet.I18n.t('error'),
+          value: status.error || MailPoet.I18n.t('none'),
+        }, {
+          key: MailPoet.I18n.t('totalCompletedTasks'),
+          value: status.tasksStatusCounts.completed,
+        }, {
+          key: MailPoet.I18n.t('totalRunningTasks'),
+          value: status.tasksStatusCounts.running,
+        }, {
+          key: MailPoet.I18n.t('totalPausedTasks'),
+          value: status.tasksStatusCounts.paused,
+        }, {
+          key: MailPoet.I18n.t('totalScheduledTasks'),
+          value: status.tasksStatusCounts.scheduled,
+        }]}
+      </KeyValueTable>
+
+      <h4>{MailPoet.I18n.t('scheduledTasks')}</h4>
+      <TasksList show_scheduled_at tasks={status.latestTasks.filter(task => (task.status === 'scheduled'))} />
+
+      <h4>{MailPoet.I18n.t('runningTasks')}</h4>
+      <TasksList tasks={status.latestTasks.filter(task => (task.status === null))} />
+
+      <h4>{MailPoet.I18n.t('completedTasks')}</h4>
+      <TasksList tasks={status.latestTasks.filter(task => (task.status === 'completed'))} />
+    </div>
+  );
+};
+
+QueueStatus.propTypes = {
+  status_data: React.PropTypes.shape({
+    status: React.PropTypes.string,
+    started: React.PropTypes.number,
+    sent: React.PropTypes.number,
+    retry_attempt: React.PropTypes.number,
+    retry_at: React.PropTypes.number,
+    tasksStatusCounts: React.PropTypes.shape({
+      completed: React.PropTypes.number.isRequired,
+      running: React.PropTypes.number.isRequired,
+      paused: React.PropTypes.number.isRequired,
+      scheduled: React.PropTypes.number.isRequired,
+    }).isRequired,
+    latestTasks: React.PropTypes.arrayOf(TasksListDataRow.propTypes.task).isRequired,
+  }).isRequired,
+};
+
+QueueStatus.defaultProps = {
+  status_data: {
+    status: null,
+    started: null,
+    sent: null,
+    retry_attempt: null,
+    retry_at: null,
+  },
+};
+
+module.exports = QueueStatus;

assets/js/src/help/system_info.jsx

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

assets/js/src/help/system_status.jsx

@@ -0,0 +1,75 @@
+import MailPoet from 'mailpoet';
+import React from 'react';
+import ReactStringReplace from 'react-string-replace';
+import CronStatus from './cron_status.jsx';
+import QueueStatus from './queue_status.jsx';
+import Tabs from './tabs.jsx';
+
+function renderStatusMessage(status, error, link) {
+  const noticeType = (status) ? 'success' : 'error';
+  let noticeMessage = (status) ?
+    MailPoet.I18n.t('systemStatusConnectionSuccessful') :
+    `${MailPoet.I18n.t('systemStatusConnectionUnsuccessful')} ${error}`;
+
+  if (link) {
+    noticeMessage = ReactStringReplace(
+      noticeMessage,
+      /\[link\](.*?)\[\/link\]/g,
+      match => (
+        <a href={`${link}`} key="kb-link">{ match }</a>
+      )
+    );
+  }
+
+  return (
+    <div className={`mailpoet_notice notice inline notice-${noticeType}`} style={{ marginTop: '1em' }}>
+      <p>{noticeMessage}</p>
+    </div>
+  );
+}
+
+function renderCronSection(data) {
+  const status = data.cron.isReachable;
+  const url = data.cron.url;
+
+  return (
+    <div>
+      <h2>{MailPoet.I18n.t('systemStatusCronTitle')}</h2>
+      <p>
+        <a href={url} target="_blank">{url}</a>
+      </p>
+      {renderStatusMessage(status, MailPoet.I18n.t('systemStatusCronConnectionUnsuccessfulInfo'), '//beta.docs.mailpoet.com/article/231-sending-does-not-work')}
+    </div>
+  );
+}
+
+function renderMSSSection(data) {
+  if (!data.mss.enabled) return undefined;
+
+  const status = data.mss.enabled.isReachable;
+
+  return (
+    <div>
+      <h2>{MailPoet.I18n.t('systemStatusMSSTitle')}</h2>
+      {renderStatusMessage(status, MailPoet.I18n.t('systemStatusMSSConnectionUnsuccessfulInfo'), false)}
+    </div>
+  );
+}
+
+function SystemStatus() {
+  const systemStatusData = window.systemStatusData;
+
+  return (
+    <div>
+      <Tabs tab="systemStatus" />
+      <div className="mailpoet_notice notice inline" style={{ marginTop: '1em' }}>
+        <p>{systemStatusData.mss.enabled ? MailPoet.I18n.t('systemStatusIntroCronMSS') : MailPoet.I18n.t('systemStatusIntroCron')}</p>
+      </div>
+      {renderCronSection(systemStatusData)}
+      {renderMSSSection(systemStatusData)}
+      <CronStatus status_data={systemStatusData.cronStatus} />
+      <QueueStatus status_data={systemStatusData.queueStatus} />
+    </div>
+  );
+}
+module.exports = SystemStatus;

assets/js/src/help/tabs.jsx

@@ -9,6 +9,11 @@ const tabs = [
     label: MailPoet.I18n.t('tabKnowledgeBaseTitle'),
     link: '/knowledgeBase',
   },
+  {
+    name: 'systemStatus',
+    label: MailPoet.I18n.t('tabSystemStatusTitle'),
+    link: '/systemStatus',
+  },
   {
     name: 'systemInfo',
     label: MailPoet.I18n.t('tabSystemInfoTitle'),
@@ -17,8 +22,7 @@ const tabs = [
 ];
 
 function Tabs(props) {
-
-  const tabLinks = tabs.map((tab, index) => {
+  const tabLinks = tabs.map((tab) => {
     const tabClasses = classNames(
       'nav-tab',
       { 'nav-tab-active': (props.tab === tab.name) }
@@ -26,9 +30,9 @@ function Tabs(props) {
 
     return (
       <Link
-        key={ 'tab-'+index }
-        className={ tabClasses }
-        to={ tab.link }
+        key={`tab-${tab.name}`}
+        className={tabClasses}
+        to={tab.link}
       >{ tab.label }</Link>
     );
   });
@@ -38,7 +42,7 @@ function Tabs(props) {
       { tabLinks }
     </h2>
   );
-};
+}
 
 Tabs.propTypes = { tab: React.PropTypes.string };
 Tabs.defaultProps = { tab: 'knowledgeBase' };

assets/js/src/help/tasks_list/tasks_list.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import TaskListDataRow from './tasks_list_data_row.jsx';
+import TaskListLabelsRow from './tasks_list_labels_row.jsx';
+
+const TasksList = (props) => {
+  const colsCount = props.show_scheduled_at ? 6 : 5;
+
+  return (
+    <table className="widefat fixed striped">
+      <thead><TaskListLabelsRow show_scheduled_at={props.show_scheduled_at} /></thead>
+      <tbody>
+        {
+          props.tasks.length ? props.tasks.map(task => (
+            <TaskListDataRow
+              key={task.id}
+              task={task}
+              show_scheduled_at={props.show_scheduled_at}
+            />)
+          ) : (
+            <tr className="no-items">
+              <td colSpan={colsCount}>{MailPoet.I18n.t('nothingToShow')}</td>
+            </tr>
+          )
+        }
+      </tbody>
+      <tfoot><TaskListLabelsRow show_scheduled_at={props.show_scheduled_at} /></tfoot>
+    </table>
+  );
+};
+
+TasksList.propTypes = {
+  show_scheduled_at: React.PropTypes.bool,
+  tasks: React.PropTypes.arrayOf(TaskListDataRow.propTypes.task).isRequired,
+};
+
+TasksList.defaultProps = {
+  show_scheduled_at: false,
+};
+
+module.exports = TasksList;

assets/js/src/help/tasks_list/tasks_list_data_row.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+const TasksListDataRow = props => (
+  <tr>
+    <td className="column column-primary">
+      { props.task.id }
+    </td>
+    <td className="column">
+      { props.task.type }
+    </td>
+    <td className="column">
+      { props.task.newsletter ? (
+        <a
+          href={props.task.newsletter.preview_url}
+          data-newsletter-id={props.task.newsletter.newsletter_id}
+          data-queue-id={props.task.newsletter.queue_id}
+          target="_blank"
+        >
+          {props.task.newsletter.subject || MailPoet.I18n.t('preview')}
+        </a>) : MailPoet.I18n.t('none')
+      }
+    </td>
+    <td className="column">
+      { props.task.priority }
+    </td>
+    { props.show_scheduled_at ? (
+      <td className="column-date">
+        <abbr>{ MailPoet.Date.format(props.task.scheduled_at * 1000) }</abbr>
+      </td>
+    ) : null }
+    <td className="column-date">
+      <abbr>{ MailPoet.Date.format(props.task.updated_at * 1000) }</abbr>
+    </td>
+  </tr>
+);
+
+TasksListDataRow.propTypes = {
+  show_scheduled_at: React.PropTypes.bool,
+  task: React.PropTypes.shape({
+    id: React.PropTypes.number.isRequired,
+    type: React.PropTypes.string.isRequired,
+    priority: React.PropTypes.number.isRequired,
+    updated_at: React.PropTypes.number.isRequired,
+    scheduled_at: React.PropTypes.number,
+    status: React.PropTypes.string,
+    newsletter: React.PropTypes.shape({
+      newsletter_id: React.PropTypes.number.isRequired,
+      queue_id: React.PropTypes.number.isRequired,
+      preview_url: React.PropTypes.string.isRequired,
+      subject: React.PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+TasksListDataRow.defaultProps = {
+  show_scheduled_at: false,
+  task: {
+    newsletter: null,
+  },
+};
+
+module.exports = TasksListDataRow;

assets/js/src/help/tasks_list/tasks_list_labels_row.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+const TasksListLabelsRow = props => (
+  <tr>
+    <th className="row-title">Id</th>
+    <th className="row-title">{MailPoet.I18n.t('type')}</th>
+    <th className="row-title">{MailPoet.I18n.t('email')}</th>
+    <th className="row-title">{MailPoet.I18n.t('priority')}</th>
+    { props.show_scheduled_at ? (<th className="row-title">{MailPoet.I18n.t('scheduledAt')}</th>) : null }
+    <th className="row-title">{MailPoet.I18n.t('updatedAt')}</th>
+  </tr>
+);
+
+TasksListLabelsRow.propTypes = {
+  show_scheduled_at: React.PropTypes.bool,
+};
+
+TasksListLabelsRow.defaultProps = {
+  show_scheduled_at: false,
+};
+
+module.exports = TasksListLabelsRow;

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

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

assets/js/src/iframe.js

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

assets/js/src/jquery.serialize_object.js

@@ -2,7 +2,7 @@ define(
   [
     'jquery'
   ],
-  function(
+  function ( // eslint-disable-line func-names
     jQuery
   ) {
     var $ = jQuery;
@@ -23,47 +23,50 @@ define(
      * Dual licensed under the MIT and GPL licenses.
      * http://benalman.com/about/license/
      */
-    $.fn.serializeObject = function(coerce) {
-      var obj = {},
-        coerce_types = { true: !0, false: !1, null: null };
+    $.fn.mailpoetSerializeObject = function (coerce) { // eslint-disable-line func-names
+      var obj = {};
+      var coerceTypes = { true: !0, false: !1, null: null };
 
       // Iterate over all name=value pairs.
-      $.each( this.serializeArray(), function(j, v){
-        var key = v.name,
-          val = v.value,
-          cur = obj,
-          i = 0,
+      $.each(this.serializeArray(), function (j, v) { // eslint-disable-line func-names
+        var key = v.name;
+        var val = v.value;
+        var cur = obj;
+        var i = 0;
 
-          // If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it
-          // into its component parts.
-          keys = key.split( '][' ),
-          keys_last = keys.length - 1;
+        // If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it
+        // into its component parts.
+        var keys = key.split('][');
+        var keysLast = keys.length - 1;
 
         // If the first keys part contains [ and the last ends with ], then []
         // are correctly balanced.
-        if ( /\[/.test( keys[0] ) && /\]$/.test( keys[ keys_last ] ) ) {
+        if (/\[/.test(keys[0]) && /\]$/.test(keys[keysLast])) {
           // Remove the trailing ] from the last keys part.
-          keys[ keys_last ] = keys[ keys_last ].replace( /\]$/, '' );
+          keys[keysLast] = keys[keysLast].replace(/\]$/, '');
 
           // Split first keys part into two parts on the [ and add them back onto
           // the beginning of the keys array.
-          keys = keys.shift().split('[').concat( keys );
+          keys = keys.shift().split('[').concat(keys);
 
-          keys_last = keys.length - 1;
+          keysLast = keys.length - 1;
         } else {
           // Basic 'foo' style key.
-          keys_last = 0;
+          keysLast = 0;
         }
 
         // Coerce values.
-        if ( coerce ) {
-          val = val && !isNaN(val)            ? +val              // number
-            : val === 'undefined'             ? undefined         // undefined
-            : coerce_types[val] !== undefined ? coerce_types[val] // true, false, null
-            : val;                                                // string
+        if (coerce) {
+          if (val && !isNaN(val)) { // number
+            val = +val;
+          } else if (val === 'undefined') { // undefined
+            val = undefined;
+          } else if (coerceTypes[val] !== undefined) { // true, false, null
+            val = coerceTypes[val];
+          }
         }
 
-        if ( keys_last ) {
+        if (keysLast) {
           // Complex key, build deep object structure based on a few rules:
           // * The 'cur' pointer starts at the object top-level.
           // * [] = array push (n is set to array length), [n] = array if n is
@@ -73,31 +76,23 @@ define(
           //   object or array based on the type of the next keys part.
           // * Move the 'cur' pointer to the next level.
           // * Rinse & repeat.
-          for ( ; i <= keys_last; i++ ) {
+          for (; i <= keysLast; i += 1) {
             key = keys[i] === '' ? cur.length : keys[i];
-            cur[key] = i < keys_last
-              ? cur[key] || ( keys[i+1] && isNaN( keys[i+1] ) ? {} : [] )
+            cur[key] = i < keysLast
+              ? cur[key] || (keys[i + 1] && isNaN(keys[i + 1]) ? {} : [])
               : val;
             cur = cur[key];
           }
-
+        } else if ($.isArray(obj[key])) {
+          // val is already an array, so push on the next value.
+          obj[key].push(val);
+        } else if (obj[key] !== undefined) {
+          // val isn't an array, but since a second value has been specified,
+          // convert val into an array.
+          obj[key] = [obj[key], val];
         } else {
-          // Simple key, even simpler rules, since only scalars and shallow
-          // arrays are allowed.
-
-          if ( $.isArray( obj[key] ) ) {
-            // val is already an array, so push on the next value.
-            obj[key].push( val );
-
-          } else if ( obj[key] !== undefined ) {
-            // val isn't an array, but since a second value has been specified,
-            // convert val into an array.
-            obj[key] = [ obj[key], val ];
-
-          } else {
-            // val is a scalar.
-            obj[key] = val;
-          }
+          // val is a scalar.
+          obj[key] = val;
         }
       });
 
@@ -106,4 +101,4 @@ define(
 
     return $;
   }
-);
+);

assets/js/src/listing/bulk_actions.jsx

@@ -1,122 +1,114 @@
-define([
-  'react',
-  'mailpoet',
-],
-(
-  React,
-  MailPoet
-) => {
-  const ListingBulkActions = React.createClass({
-    getInitialState: function () {
-      return {
-        action: false,
-        extra: false,
-      };
-    },
-    handleChangeAction: function (e) {
-      this.setState({
-        action: e.target.value,
-        extra: false,
-      }, () => {
-        const action = this.getSelectedAction();
-
-        // action on select callback
-        if(action !== null && action['onSelect'] !== undefined) {
-          this.setState({
-            extra: action.onSelect(e),
-          });
-        }
-      });
-    },
-    handleApplyAction: function (e) {
-      e.preventDefault();
+import React from 'react';
+import MailPoet from 'mailpoet';
 
+const ListingBulkActions = React.createClass({
+  getInitialState: function getInitialState() {
+    return {
+      action: false,
+      extra: false,
+    };
+  },
+  handleChangeAction: function handleChangeAction(e) {
+    this.setState({
+      action: e.target.value,
+      extra: false,
+    }, () => {
       const action = this.getSelectedAction();
 
-      if(action === null) {
-        return;
-      }
-
-      const selected_ids = (this.props.selection !== 'all')
-        ? this.props.selected_ids
-        : [];
-
-      const data = (action['getData'] !== undefined)
-        ? action.getData()
-        : {};
-
-      data.action = this.state.action;
-
-      let onSuccess = function () {};
-      if(action['onSuccess'] !== undefined) {
-        onSuccess = action.onSuccess;
-      }
-
-      if(data.action) {
-        const promise = this.props.onBulkAction(selected_ids, data);
-        if (promise !== false) {
-          promise.then(onSuccess);
-        };
-      }
-
-      this.setState({
-        action: false,
-        extra: false,
-      });
-    },
-    getSelectedAction: function () {
-      const selected_action = this.refs.action.value;
-      if(selected_action.length > 0) {
-        const action = this.props.bulk_actions.filter((action) => {
-          return (action.name === selected_action);
+      // action on select callback
+      if (action !== null && action.onSelect !== undefined) {
+        this.setState({
+          extra: action.onSelect(e),
         });
-
-        if(action.length > 0) {
-          return action[0];
-        }
       }
+    });
+  },
+  handleApplyAction: function handleApplyAction(e) {
+    e.preventDefault();
+
+    const action = this.getSelectedAction();
+
+    if (action === null) {
+      return;
+    }
+
+    const selectedIds = (this.props.selection !== 'all')
+      ? this.props.selected_ids
+      : [];
+
+    const data = (action.getData !== undefined)
+      ? action.getData()
+      : {};
+
+    data.action = this.state.action;
+
+    let onSuccess = () => {};
+    if (action.onSuccess !== undefined) {
+      onSuccess = action.onSuccess;
+    }
+
+    if (data.action) {
+      const promise = this.props.onBulkAction(selectedIds, data);
+      if (promise !== false) {
+        promise.then(onSuccess);
+      }
+    }
+
+    this.setState({
+      action: false,
+      extra: false,
+    });
+  },
+  getSelectedAction: function getSelectedAction() {
+    const selectedAction = this.action.value;
+    if (selectedAction.length > 0) {
+      const action = this.props.bulk_actions.filter(act => (act.name === selectedAction));
+
+      if (action.length > 0) {
+        return action[0];
+      }
+    }
+    return null;
+  },
+  render: function render() {
+    if (this.props.bulk_actions.length === 0) {
       return null;
-    },
-    render: function () {
-      if(this.props.bulk_actions.length === 0) {
-        return null;
-      }
+    }
 
-      return (
-        <div className="alignleft actions bulkactions">
-          <label
-            className="screen-reader-text"
-            htmlFor="bulk-action-selector-top">
-            {MailPoet.I18n.t('selectBulkAction')}
-          </label>
+    return (
+      <div className="alignleft actions bulkactions">
+        <label
+          className="screen-reader-text"
+          htmlFor="bulk-action-selector-top"
+        >
+          {MailPoet.I18n.t('selectBulkAction')}
+        </label>
 
-          <select
-            name="bulk_actions"
-            ref="action"
-            value={ this.state.action }
-            onChange={this.handleChangeAction}
-          >
-            <option value="">{MailPoet.I18n.t('bulkActions')}</option>
-            { this.props.bulk_actions.map((action, index) => {
-              return (
-                <option
-                  value={ action.name }
-                  key={ 'action-' + index }
-                >{ action.label }</option>
-              );
-            }) }
-          </select>
-          <input
-            onClick={ this.handleApplyAction }
-            type="submit"
-            defaultValue={MailPoet.I18n.t('apply')}
-            className="button action" />
+        <select
+          name="bulk_actions"
+          ref={(c) => { this.action = c; }}
+          value={this.state.action}
+          onChange={this.handleChangeAction}
+        >
+          <option value="">{MailPoet.I18n.t('bulkActions')}</option>
+          { this.props.bulk_actions.map(action => (
+            <option
+              value={action.name}
+              key={`action-${action.name}`}
+            >{ action.label }</option>
+          )) }
+        </select>
+        <input
+          onClick={this.handleApplyAction}
+          type="submit"
+          defaultValue={MailPoet.I18n.t('apply')}
+          className="button action"
+        />
 
-            { this.state.extra }
-        </div>
-      );
-    },
-  });
-
-  return ListingBulkActions;
+        { this.state.extra }
+      </div>
+    );
+  },
 });
+
+export default ListingBulkActions;

assets/js/src/listing/filters.jsx

@@ -1,107 +1,95 @@
-define([
-  'react',
-  'jquery',
-  'mailpoet',
-],
-(
-  React,
-  jQuery,
-  MailPoet
-) => {
-  const ListingFilters = React.createClass({
-    handleFilterAction: function () {
-      const filters = {};
-      this.getAvailableFilters().map((filter, i) => {
-        filters[this.refs['filter-'+i].name] = this.refs['filter-'+i].value;
-      });
-      if (this.props.onBeforeSelectFilter) {
-        this.props.onBeforeSelectFilter(filters);
-      }
-      return this.props.onSelectFilter(filters);
-    },
-    handleEmptyTrash: function () {
-      return this.props.onEmptyTrash();
-    },
-    getAvailableFilters: function () {
-      const filters = this.props.filters;
-      return Object.keys(filters).filter((filter) => {
-        return !(
-          filters[filter].length === 0
-          || (
-            filters[filter].length === 1
-            && !filters[filter][0].value
-          )
-        );
-      });
-    },
-    componentDidUpdate: function () {
-      const selected_filters = this.props.filter;
-      this.getAvailableFilters().map(
-        (filter, i) => {
-          if (selected_filters[filter] !== undefined && selected_filters[filter]) {
-            jQuery(this.refs['filter-'+i])
-              .val(selected_filters[filter])
-              .trigger('change');
-          }
+import React from 'react';
+import jQuery from 'jquery';
+import MailPoet from 'mailpoet';
+
+const ListingFilters = React.createClass({
+  handleFilterAction: function handleFilterAction() {
+    const filters = {};
+    this.getAvailableFilters().forEach((filter, i) => {
+      filters[this[`filter-${i}`].name] = this[`filter-${i}`].value;
+    });
+    if (this.props.onBeforeSelectFilter) {
+      this.props.onBeforeSelectFilter(filters);
+    }
+    return this.props.onSelectFilter(filters);
+  },
+  handleEmptyTrash: function handleEmptyTrash() {
+    return this.props.onEmptyTrash();
+  },
+  getAvailableFilters: function getAvailableFilters() {
+    const filters = this.props.filters;
+    return Object.keys(filters).filter(filter => !(
+      filters[filter].length === 0
+        || (
+          filters[filter].length === 1
+          && !filters[filter][0].value
+        )
+    ));
+  },
+  componentDidUpdate: function componentDidUpdate() {
+    const selectedFilters = this.props.filter;
+    this.getAvailableFilters().forEach(
+      (filter, i) => {
+        if (selectedFilters[filter] !== undefined && selectedFilters[filter]) {
+          jQuery(this[`filter-${i}`])
+            .val(selectedFilters[filter])
+            .trigger('change');
         }
-        );
-    },
-    render: function () {
-      const filters = this.props.filters;
-      const available_filters = this.getAvailableFilters()
-        .map((filter, i) => {
-          return (
-            <select
-              ref={ `filter-${i}` }
-              key={ `filter-${i}` }
-              name={ filter }
-            >
-            { filters[filter].map((option, j) => {
-              return (
-                <option
-                  value={ option.value }
-                  key={ 'filter-option-' + j }
-                >{ option.label }</option>
-              );
-            }) }
-            </select>
-          );
-        });
-
-      let button;
-
-      if (available_filters.length > 0) {
-        button = (
-          <input
-            id="post-query-submit"
-            onClick={ this.handleFilterAction }
-            type="submit"
-            defaultValue={MailPoet.I18n.t('filter')}
-            className="button" />
-        );
       }
+    );
+  },
+  render: function render() {
+    const filters = this.props.filters;
+    const availableFilters = this.getAvailableFilters()
+      .map((filter, i) => (
+        <select
+          ref={(c) => { this[`filter-${i}`] = c; }}
+          key={`filter-${filter}`}
+          name={filter}
+        >
+          { filters[filter].map(option => (
+            <option
+              value={option.value}
+              key={`filter-option-${option.value}`}
+            >{ option.label }</option>
+          )) }
+        </select>
+      ));
 
-      let empty_trash;
-      if (this.props.group === 'trash') {
-        empty_trash = (
-          <input
-            onClick={ this.handleEmptyTrash }
-            type="submit"
-            value={MailPoet.I18n.t('emptyTrash')}
-            className="button"
-          />
-        );
-      }
+    let button;
 
-      return (
-        <div className="alignleft actions actions">
-          { available_filters }
-          { button }
-          { empty_trash }
-        </div>
+    if (availableFilters.length > 0) {
+      button = (
+        <input
+          id="post-query-submit"
+          onClick={this.handleFilterAction}
+          type="submit"
+          defaultValue={MailPoet.I18n.t('filter')}
+          className="button"
+        />
       );
-    },
-  });
+    }
 
-  return ListingFilters;
+    let emptyTrash;
+    if (this.props.group === 'trash') {
+      emptyTrash = (
+        <input
+          onClick={this.handleEmptyTrash}
+          type="submit"
+          value={MailPoet.I18n.t('emptyTrash')}
+          className="button"
+        />
+      );
+    }
+
+    return (
+      <div className="alignleft actions actions">
+        { availableFilters }
+        { button }
+        { emptyTrash }
+      </div>
+    );
+  },
 });
+
+export default ListingFilters;

assets/js/src/listing/groups.jsx

@@ -1,40 +1,58 @@
-define(['react', 'classnames'], (React, classNames) => {
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
-  const ListingGroups = React.createClass({
-    handleSelect: function (group) {
-      return this.props.onSelectGroup(group);
-    },
-    render: function () {
-      const groups = this.props.groups.map((group, index) => {
-        if(group.name === 'trash' && group.count === 0) {
-          return false;
-        }
+class ListingGroups extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSelect = this.handleSelect.bind(this);
+  }
 
-        const classes = classNames(
-            { current : (group.name === this.props.group) }
-          );
+  handleSelect(group) {
+    return this.props.onSelectGroup(group);
+  }
 
-        return (
-            <li key={index}>
-              {(index > 0) ? ' |' : ''}
-              <a
-                href="javascript:;"
-                className={classes}
-                onClick={this.handleSelect.bind(this, group.name)} >
-                {group.label} <span className="count">({ group.count.toLocaleString() })</span>
-              </a>
-            </li>
-        );
-      });
+  render() {
+    const groups = this.props.groups.map((group, index) => {
+      if (group.name === 'trash' && group.count === 0) {
+        return false;
+      }
+
+      const classes = classNames(
+        { current: (group.name === this.props.group) }
+      );
 
       return (
-          <ul className="subsubsub">
-            { groups }
-          </ul>
+        <li key={group.name}>
+          {(index > 0) ? ' |' : ''}
+          <a
+            href="javascript:;"
+            className={classes}
+            onClick={() => this.handleSelect(group.name)}
+            data-automation-id={`filters_${group.label.replace(' ', '_').toLowerCase()}`}
+          >
+            {group.label}
+            <span className="count">({ parseInt(group.count, 10).toLocaleString() })</span>
+          </a>
+        </li>
       );
-    },
-  });
+    });
 
-  return ListingGroups;
+    return (
+      <ul className="subsubsub">
+        { groups }
+      </ul>
+    );
+  }
 }
-);
+
+ListingGroups.propTypes = {
+  onSelectGroup: PropTypes.func.isRequired,
+  groups: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    count: PropTypes.number,
+  })).isRequired,
+  group: PropTypes.any.isRequired, //  eslint-disable-line react/forbid-prop-types
+};
+
+export default ListingGroups;

assets/js/src/listing/header.jsx

@@ -3,12 +3,12 @@ import React from 'react';
 import classNames from 'classnames';
 
 const ListingHeader = React.createClass({
-  handleSelectItems: function () {
+  handleSelectItems: function handleSelectItems() {
     return this.props.onSelectItems(
-      this.refs.toggle.checked
+      this.toggle.checked
     );
   },
-  render: function () {
+  render: function render() {
     const columns = this.props.columns.map((column, index) => {
       const renderColumn = column;
       renderColumn.is_primary = (index === 0);
@@ -19,26 +19,30 @@ const ListingHeader = React.createClass({
         <ListingColumn
           onSort={this.props.onSort}
           sort_by={this.props.sort_by}
-          key={ 'column-' + index }
-          column={renderColumn} />
+          key={`column-${column.name}`}
+          column={renderColumn}
+        />
       );
     });
 
     let checkbox;
 
-    if(this.props.is_selectable === true) {
+    if (this.props.is_selectable === true) {
       checkbox = (
         <th
-          className="manage-column column-cb check-column">
-          <label className="screen-reader-text">
+          className="manage-column column-cb check-column"
+        >
+          <label className="screen-reader-text" htmlFor="select_all">
             {MailPoet.I18n.t('selectAll')}
           </label>
           <input
             type="checkbox"
             name="select_all"
-            ref="toggle"
-            checked={ this.props.selection }
-            onChange={ this.handleSelectItems } />
+            id="select_all"
+            ref={(c) => { this.toggle = c; }}
+            checked={this.props.selection}
+            onChange={this.handleSelectItems}
+          />
         </th>
       );
     }
@@ -53,12 +57,12 @@ const ListingHeader = React.createClass({
 });
 
 const ListingColumn = React.createClass({
-  handleSort: function () {
-    const sort_by = this.props.column.name;
-    const sort_order = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
-    this.props.onSort(sort_by, sort_order);
+  handleSort: function handleSort() {
+    const sortBy = this.props.column.name;
+    const sortOrder = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
+    this.props.onSort(sortBy, sortOrder);
   },
-  render: function () {
+  render: function render() {
     const classes = classNames(
       'manage-column',
       { 'column-primary': this.props.column.is_primary },
@@ -68,11 +72,15 @@ const ListingColumn = React.createClass({
     );
     let label;
 
-    if(this.props.column.sortable === true) {
+    if (this.props.column.sortable === true) {
       label = (
-        <a onClick={ this.handleSort }>
+        <a
+          onClick={this.handleSort}
+          role="button"
+          tabIndex={0}
+        >
           <span>{ this.props.column.label }</span>
-          <span className="sorting-indicator"></span>
+          <span className="sorting-indicator" />
         </a>
       );
     } else {
@@ -80,10 +88,11 @@ const ListingColumn = React.createClass({
     }
     return (
       <th
-        className={ classes }
-        id={this.props.column.name }
+        role="columnheader"
+        className={classes}
+        id={this.props.column.name}
         scope="col"
-        width={ this.props.column.width || null }
+        width={this.props.column.width || null}
       >{label}</th>
     );
   },

assets/js/src/listing/pages.jsx

@@ -1,185 +1,187 @@
-define([
-  'react',
-  'classnames',
-  'mailpoet',
-], (
-    React,
-    classNames,
-    MailPoet
-  ) => {
+import React from 'react';
+import classNames from 'classnames';
+import MailPoet from 'mailpoet';
 
-  const ListingPages = React.createClass({
-    getInitialState: function () {
-      return {
-        page: null,
-      };
-    },
-    setPage: function (page) {
-      this.setState({
-        page: null,
-      }, () => {
-        this.props.onSetPage(this.constrainPage(page));
-      });
-    },
-    setFirstPage: function () {
-      this.setPage(1);
-    },
-    setLastPage: function () {
-      this.setPage(this.getLastPage());
-    },
-    setPreviousPage: function () {
-      this.setPage(this.constrainPage(
-        parseInt(this.props.page, 10) - 1)
-      );
-    },
-    setNextPage: function () {
-      this.setPage(this.constrainPage(
-        parseInt(this.props.page, 10) + 1)
-      );
-    },
-    constrainPage: function (page) {
-      return Math.min(Math.max(1, Math.abs(~~page)), this.getLastPage());
-    },
-    handleSetManualPage: function (e) {
-      if(e.which === 13) {
-        this.setPage(this.state.page);
+const ListingPages = React.createClass({
+  getInitialState: function getInitialState() {
+    return {
+      page: null,
+    };
+  },
+  setPage: function setPage(page) {
+    this.setState({
+      page: null,
+    }, () => {
+      this.props.onSetPage(this.constrainPage(page));
+    });
+  },
+  setFirstPage: function setFirstPage() {
+    this.setPage(1);
+  },
+  setLastPage: function setLastPage() {
+    this.setPage(this.getLastPage());
+  },
+  setPreviousPage: function setPreviousPage() {
+    this.setPage(this.constrainPage(
+      parseInt(this.props.page, 10) - 1)
+    );
+  },
+  setNextPage: function setNextPage() {
+    this.setPage(this.constrainPage(
+      parseInt(this.props.page, 10) + 1)
+    );
+  },
+  constrainPage: function constrainPage(page) {
+    return Math.min(Math.max(1, Math.abs(Number(page))), this.getLastPage());
+  },
+  handleSetManualPage: function handleSetManualPage(e) {
+    if (e.which === 13) {
+      this.setPage(this.state.page);
+    }
+  },
+  handleChangeManualPage: function handleChangeManualPage(e) {
+    this.setState({
+      page: e.target.value,
+    });
+  },
+  handleBlurManualPage: function handleBlurManualPage(e) {
+    this.setPage(e.target.value);
+  },
+  getLastPage: function getLastPage() {
+    return Math.ceil(this.props.count / this.props.limit);
+  },
+  render: function render() {
+    if (this.props.count === 0) {
+      return false;
+    }
+    let pagination = false;
+    let firstPage = (
+      <span aria-hidden="true" className="tablenav-pages-navspan">«</span>
+    );
+    let previousPage = (
+      <span aria-hidden="true" className="tablenav-pages-navspan">‹</span>
+    );
+    let nextPage = (
+      <span aria-hidden="true" className="tablenav-pages-navspan">›</span>
+    );
+    let lastPage = (
+      <span aria-hidden="true" className="tablenav-pages-navspan">»</span>
+    );
+
+    if (this.props.limit > 0 && this.props.count > this.props.limit) {
+      if (this.props.page > 1) {
+        previousPage = (
+          <a
+            href="javascript:;"
+            onClick={this.setPreviousPage}
+            className="prev-page"
+          >
+            <span className="screen-reader-text">{MailPoet.I18n.t('previousPage')}</span>
+            <span aria-hidden="true">‹</span>
+          </a>
+        );
       }
-    },
-    handleChangeManualPage: function (e) {
-      this.setState({
-        page: e.target.value,
-      });
-    },
-    handleBlurManualPage: function (e) {
-      this.setPage(e.target.value);
-    },
-    getLastPage: function () {
-      return Math.ceil(this.props.count / this.props.limit);
-    },
-    render: function () {
-      if(this.props.count === 0) {
-        return false;
-      } else {
-        let pagination = false;
-        let firstPage = (
-          <span aria-hidden="true" className="tablenav-pages-navspan">«</span>
+
+      if (this.props.page > 2) {
+        firstPage = (
+          <a
+            href="javascript:;"
+            onClick={this.setFirstPage}
+            className="first-page"
+          >
+            <span className="screen-reader-text">{MailPoet.I18n.t('firstPage')}</span>
+            <span aria-hidden="true">«</span>
+          </a>
         );
-        let previousPage = (
-          <span aria-hidden="true" className="tablenav-pages-navspan">‹</span>
+      }
+
+      if (this.props.page < this.getLastPage()) {
+        nextPage = (
+          <a
+            href="javascript:;"
+            onClick={this.setNextPage}
+            className="next-page"
+          >
+            <span className="screen-reader-text">{MailPoet.I18n.t('nextPage')}</span>
+            <span aria-hidden="true">›</span>
+          </a>
         );
-        let nextPage = (
-          <span aria-hidden="true" className="tablenav-pages-navspan">›</span>
-        );
-        let lastPage = (
-          <span aria-hidden="true" className="tablenav-pages-navspan">»</span>
+      }
+
+      if (this.props.page < this.getLastPage() - 1) {
+        lastPage = (
+          <a
+            href="javascript:;"
+            onClick={this.setLastPage}
+            className="last-page"
+          >
+            <span className="screen-reader-text">{MailPoet.I18n.t('lastPage')}</span>
+            <span aria-hidden="true">»</span>
+          </a>
         );
+      }
 
-        if(this.props.limit > 0 && this.props.count > this.props.limit) {
-          if(this.props.page > 1) {
-            previousPage = (
-              <a href="javascript:;"
-                onClick={ this.setPreviousPage }
-                className="prev-page">
-                <span className="screen-reader-text">{MailPoet.I18n.t('previousPage')}</span>
-                <span aria-hidden="true">‹</span>
-              </a>
-            );
-          }
+      let pageValue = this.props.page;
+      if (this.state.page !== null) {
+        pageValue = this.state.page;
+      }
 
-          if(this.props.page > 2) {
-            firstPage = (
-              <a href="javascript:;"
-                onClick={ this.setFirstPage }
-                className="first-page">
-                <span className="screen-reader-text">{MailPoet.I18n.t('firstPage')}</span>
-                <span aria-hidden="true">«</span>
-              </a>
-            );
-          }
-
-          if(this.props.page < this.getLastPage()) {
-            nextPage = (
-              <a href="javascript:;"
-                onClick={ this.setNextPage }
-                className="next-page">
-                <span className="screen-reader-text">{MailPoet.I18n.t('nextPage')}</span>
-                <span aria-hidden="true">›</span>
-              </a>
-            );
-          }
-
-          if(this.props.page < this.getLastPage() - 1) {
-            lastPage = (
-              <a href="javascript:;"
-                onClick={ this.setLastPage }
-                className="last-page">
-                <span className="screen-reader-text">{MailPoet.I18n.t('lastPage')}</span>
-                <span aria-hidden="true">»</span>
-              </a>
-            );
-          }
-
-          let pageValue =  this.props.page;
-          if(this.state.page !== null) {
-            pageValue = this.state.page;
-          }
-
-          pagination = (
-            <span className="pagination-links">
-              {firstPage}
-              &nbsp;
-              {previousPage}
-              &nbsp;
-              <span className="paging-input">
-                <label
-                  className="screen-reader-text"
-                  htmlFor="current-page-selector">{MailPoet.I18n.t('currentPage')}</label>
-                <input
-                  type="text"
-                  onChange={ this.handleChangeManualPage }
-                  onKeyUp={ this.handleSetManualPage }
-                  onBlur={ this.handleBlurManualPage }
-                  aria-describedby="table-paging"
-                  size="2"
-                  ref="page"
-                  value={ pageValue }
-                  name="paged"
-                  id="current-page-selector"
-                  className="current-page" />
-                &nbsp;{MailPoet.I18n.t('pageOutOf')}&nbsp;
-                <span className="total-pages">
-                  {Math.ceil(this.props.count / this.props.limit).toLocaleString()}
-                </span>
-              </span>
-              &nbsp;
-              {nextPage}
-              &nbsp;
-              {lastPage}
+      pagination = (
+        <span className="pagination-links">
+          {firstPage}
+          &nbsp;
+          {previousPage}
+          &nbsp;
+          <span className="paging-input">
+            <label
+              className="screen-reader-text"
+              htmlFor="current-page-selector"
+            >{MailPoet.I18n.t('currentPage')}</label>
+            <input
+              type="text"
+              onChange={this.handleChangeManualPage}
+              onKeyUp={this.handleSetManualPage}
+              onBlur={this.handleBlurManualPage}
+              aria-describedby="table-paging"
+              size="2"
+              value={pageValue}
+              name="paged"
+              id="current-page-selector"
+              className="current-page"
+            />
+            {MailPoet.I18n.t('pageOutOf')}&nbsp;
+            <span className="total-pages">
+              {Math.ceil(this.props.count / this.props.limit).toLocaleString()}
             </span>
-          );
-        }
+          </span>
+          &nbsp;
+          {nextPage}
+          &nbsp;
+          {lastPage}
+        </span>
+      );
+    }
 
-        const classes = classNames(
-          'tablenav-pages',
-          { 'one-page': (this.props.count <= this.props.limit) }
-        );
+    const classes = classNames(
+      'tablenav-pages',
+      { 'one-page': (this.props.count <= this.props.limit) }
+    );
 
-        let numberOfItemsLabel;
-        if (this.props.count == 1) {
-          numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsSingular');
-        } else {
-          numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsMultiple')
-            .replace('%$1d', this.props.count.toLocaleString());
-        }
-        return (
-          <div className={ classes }>
-            <span className="displaying-num">{ numberOfItemsLabel }</span>
-            { pagination }
-          </div>
-        );
-      }
-    },
-  });
+    let numberOfItemsLabel;
+    if (Number(this.props.count) === 1) {
+      numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsSingular');
+    } else {
+      numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsMultiple')
+        .replace('%$1d', parseInt(this.props.count, 10).toLocaleString());
+    }
 
-  return ListingPages;
+    return (
+      <div className={classes}>
+        <span className="displaying-num">{ numberOfItemsLabel }</span>
+        { pagination }
+      </div>
+    );
+  },
 });
+
+module.exports = ListingPages;

assets/js/src/listing/search.jsx

@@ -1,47 +1,51 @@
-define([
-  'mailpoet',
-  'react',
-], (
-    MailPoet,
-    React
-  ) => {
+import React from 'react';
+import MailPoet from 'mailpoet';
+import PropTypes from 'prop-types';
 
-  const ListingSearch = React.createClass({
-    handleSearch: function (e) {
-      e.preventDefault();
-      this.props.onSearch(
-        this.refs.search.value
-      );
-    },
-    componentWillReceiveProps: function (nextProps) {
-      this.refs.search.value = nextProps.search;
-    },
-    render: function () {
-      if(this.props.search === false) {
-        return false;
-      } else {
-        return (
-          <form name="search" onSubmit={this.handleSearch}>
-            <p className="search-box">
-              <label htmlFor="search_input" className="screen-reader-text">
-              {MailPoet.I18n.t('searchLabel')}
-              </label>
-              <input
-                type="search"
-                id="search_input"
-                ref="search"
-                name="s"
-                defaultValue={this.props.search} />
-              <input
-                type="submit"
-                defaultValue={MailPoet.I18n.t('searchLabel')}
-                className="button" />
-            </p>
-          </form>
-        );
-      }
-    },
-  });
+class ListingSearch extends React.Component {
+  componentWillReceiveProps(nextProps) {
+    this.search.value = nextProps.search;
+    this.handleSearch = this.handleSearch.bind(this);
+  }
 
-  return ListingSearch;
-});
+  handleSearch(e) {
+    e.preventDefault();
+    this.props.onSearch(
+      this.search.value.trim()
+    );
+  }
+
+  render() {
+    if (this.props.search === false) {
+      return false;
+    }
+    return (
+      <form name="search" onSubmit={this.handleSearch}>
+        <p className="search-box">
+          <label htmlFor="search_input" className="screen-reader-text">
+            {MailPoet.I18n.t('searchLabel')}
+          </label>
+          <input
+            type="search"
+            id="search_input"
+            ref={(c) => { this.search = c; }}
+            name="s"
+            defaultValue={this.props.search}
+          />
+          <input
+            type="submit"
+            defaultValue={MailPoet.I18n.t('searchLabel')}
+            className="button"
+          />
+        </p>
+      </form>
+    );
+  }
+}
+
+ListingSearch.propTypes = {
+  search: PropTypes.string.isRequired,
+  onSearch: PropTypes.func.isRequired,
+};
+
+export default ListingSearch;

assets/js/src/mailpoet.js

@@ -1,4 +1,4 @@
-define('mailpoet', [], function() {
+define('mailpoet', [], function mailpoet() {
   // A placeholder for MailPoet object
   var MailPoet = {};
 

assets/js/src/modal.js

@@ -1,8 +1,10 @@
+/* eslint-disable func-names */
 define('modal', ['mailpoet', 'jquery'],
-  function(mp, jQuery) {
+  function (mp, jQuery) {
     'use strict';
+
     var MailPoet = mp;
-    /***************************************************************************
+    /** *************************************************************************
     MailPoet Modal:
 
       version: 0.9
@@ -19,7 +21,7 @@ define('modal', ['mailpoet', 'jquery'],
 
       // loading mode
       MailPoet.Modal.loading(bool);
-    ***************************************************************************/
+    ************************************************************************** */
 
     MailPoet.Modal = {
       version: 0.9,
@@ -78,45 +80,44 @@ define('modal', ['mailpoet', 'jquery'],
       options: {},
       templates: {
         overlay: '<div id="mailpoet_modal_overlay" style="display:none;"></div>',
-        popup: '<div id="mailpoet_popup" tabindex="-1">'+
-        '<div class="mailpoet_popup_wrapper">'+
-        '<a href="javascript:;" id="mailpoet_modal_close"></a>'+
-        '<div id="mailpoet_popup_title"><h2></h2></div>'+
-        '<div class="mailpoet_popup_body clearfix"></div>'+
-        '</div>'+
+        popup: '<div id="mailpoet_popup" tabindex="-1">' +
+        '<div class="mailpoet_popup_wrapper">' +
+        '<a href="javascript:;" id="mailpoet_modal_close"></a>' +
+        '<div id="mailpoet_popup_title"><h2></h2></div>' +
+        '<div class="mailpoet_popup_body clearfix"></div>' +
+        '</div>' +
         '</div>',
-        loading: '<div id="mailpoet_loading" style="display:none;">'+
-        '<div id="mailpoet_modal_loading_1" class="mailpoet_modal_loading"></div>'+
-        '<div id="mailpoet_modal_loading_2" class="mailpoet_modal_loading"></div>'+
-        '<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading"></div>'+
+        loading: '<div id="mailpoet_loading" style="display:none;">' +
+        '<div id="mailpoet_modal_loading_1" class="mailpoet_modal_loading"></div>' +
+        '<div id="mailpoet_modal_loading_2" class="mailpoet_modal_loading"></div>' +
+        '<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading"></div>' +
         '</div>',
-        panel: '<div id="mailpoet_panel">'+
-        '<a href="javascript:;" id="mailpoet_modal_close"></a>'+
-        '<div class="mailpoet_panel_wrapper" tabindex="-1">'+
-        '<div class="mailpoet_panel_body clearfix"></div>'+
-        '</div>'+
+        panel: '<div id="mailpoet_panel">' +
+        '<a href="javascript:;" id="mailpoet_modal_close"></a>' +
+        '<div class="mailpoet_panel_wrapper" tabindex="-1">' +
+        '<div class="mailpoet_panel_body clearfix"></div>' +
+        '</div>' +
         '</div>',
-        subpanel: '<div class="mailpoet_panel_wrapper" tabindex="-1">'+
-        '<div class="mailpoet_panel_body clearfix"></div>'+
+        subpanel: '<div class="mailpoet_panel_wrapper" tabindex="-1">' +
+        '<div class="mailpoet_panel_body clearfix"></div>' +
         '</div>'
       },
-      getContentContainer: function() {
-        return jQuery('.mailpoet_'+this.options.type+'_body');
+      getContentContainer: function () {
+        return jQuery('.mailpoet_' + this.options.type + '_body');
       },
-      setRenderer: function(renderer) {
+      setRenderer: function (renderer) {
         this.renderer = renderer;
         return this;
       },
-      compileTemplate: function(template) {
-        if(this.renderer === 'html') {
-          return function() { return template; };
-        } else {
-          return Handlebars.compile(template);
+      compileTemplate: function (template) {
+        if (this.renderer === 'html') {
+          return function () { return template; };
         }
-        return false;
+        return window.Handlebars.compile(template);
       },
-      init: function(options) {
-        if(this.initialized === true) {
+      init: function (options) {
+        var modal;
+        if (this.initialized === true) {
           this.close();
         }
         // merge options
@@ -131,10 +132,10 @@ define('modal', ['mailpoet', 'jquery'],
         // toggle overlay
         this.toggleOverlay(this.options.overlay);
 
-        if(this.options.type !== null) {
+        if (this.options.type !== null) {
           // insert modal depending on its type
-          if(this.options.type === 'popup') {
-            var modal = this.compileTemplate(
+          if (this.options.type === 'popup') {
+            modal = this.compileTemplate(
               this.templates[this.options.type]
             );
             // create modal
@@ -143,7 +144,7 @@ define('modal', ['mailpoet', 'jquery'],
             // set title
             jQuery('#mailpoet_popup_title h2')
               .html(this.options.title);
-          } else if(this.options.type === 'panel') {
+          } else if (this.options.type === 'panel') {
             // create panel
             jQuery('#mailpoet_modal_overlay')
               .after(this.templates[this.options.type]);
@@ -152,16 +153,16 @@ define('modal', ['mailpoet', 'jquery'],
           // add proper overlay class
           jQuery('#mailpoet_modal_overlay')
             .removeClass('mailpoet_popup_overlay mailpoet_panel_overlay')
-            .addClass('mailpoet_'+this.options.type+'_overlay');
+            .addClass('mailpoet_' + this.options.type + '_overlay');
         }
 
         // set "success" callback if specified
-        if(options.onSuccess !== undefined) {
+        if (options.onSuccess !== undefined) {
           this.options.onSuccess = options.onSuccess;
         }
 
         // set "cancel" callback if specified
-        if(options.onCancel !== undefined) {
+        if (options.onCancel !== undefined) {
           this.options.onCancel = options.onCancel;
         }
 
@@ -178,466 +179,464 @@ define('modal', ['mailpoet', 'jquery'],
 
         return this;
       },
-      initOverlay: function(toggle) {
-        if(jQuery('#mailpoet_modal_overlay').length === 0) {
-            // insert overlay into the DOM
-            jQuery('body').append(this.templates.overlay);
-            // insert loading indicator into overlay
-            jQuery('#mailpoet_modal_overlay').append(this.templates.loading);
-          }
-          return this;
-        },
-        toggleOverlay: function(toggle) {
-          if(toggle === true) {
-            jQuery('#mailpoet_modal_overlay')
-              .removeClass('mailpoet_overlay_hidden');
-          } else {
-            jQuery('#mailpoet_modal_overlay')
-              .addClass('mailpoet_overlay_hidden');
-          }
+      initOverlay: function () {
+        if (jQuery('#mailpoet_modal_overlay').length === 0) {
+          // insert overlay into the DOM
+          jQuery('body').append(this.templates.overlay);
+          // insert loading indicator into overlay
+          jQuery('#mailpoet_modal_overlay').append(this.templates.loading);
+        }
+        return this;
+      },
+      toggleOverlay: function (toggle) {
+        if (toggle === true) {
+          jQuery('#mailpoet_modal_overlay')
+            .removeClass('mailpoet_overlay_hidden');
+        } else {
+          jQuery('#mailpoet_modal_overlay')
+            .addClass('mailpoet_overlay_hidden');
+        }
 
-          return this;
-        },
-        setupEvents: function() {
+        return this;
+      },
+      setupEvents: function () {
         // close popup when user clicks on close button
         jQuery('#mailpoet_modal_close').on('click', this.cancel.bind(this));
 
         // close popup when user clicks on overlay
-        jQuery('#mailpoet_modal_overlay').on('click', function(e) {
+        jQuery('#mailpoet_modal_overlay').on('click', function (e) {
           // we need to make sure that we are actually clicking on the overlay
           // because when clicking on the popup content, it will trigger
           // the click event on the overlay
-          if(e.target.id === 'mailpoet_modal_overlay') { this.cancel(); }
+          if (e.target.id === 'mailpoet_modal_overlay') { this.cancel(); }
         }.bind(this));
 
         // close popup when user presses ESC key
-        jQuery(document).on('keyup.mailpoet_modal', function(e) {
-          if(this.opened === false) { return false; }
-          if(e.keyCode === 27) { this.cancel(); }
+        jQuery(document).on('keyup.mailpoet_modal', function (e) {
+          if (this.opened === false) { return false; }
+          if (e.keyCode === 27) { this.cancel(); }
+          return true;
         }.bind(this));
 
         // make sure the popup is repositioned when the window is resized
-        jQuery(window).on('resize.mailpoet_modal', function() {
+        jQuery(window).on('resize.mailpoet_modal', function () {
           this.setPosition();
         }.bind(this));
 
         return this;
       },
-      removeEvents: function() {
+      removeEvents: function () {
         jQuery(document).unbind('keyup.mailpoet_modal');
         jQuery(window).unbind('resize.mailpoet_modal');
         jQuery('#mailpoet_modal_close').off('click');
-        if(this.options.overlay === true) {
+        if (this.options.overlay === true) {
           jQuery('#mailpoet_modal_overlay').off('click');
         }
 
         return this;
       },
-      lock: function() {
+      lock: function () {
         this.locked = true;
 
         return this;
       },
-      unlock: function() {
+      unlock: function () {
         this.locked = false;
 
         return this;
       },
-      isLocked: function() {
+      isLocked: function () {
         return this.locked;
       },
-      loadTemplate: function() {
-        if(this.subpanels.length > 0) {
-            // hide panel
-            jQuery('.mailpoet_'+this.options.type+'_wrapper').hide();
+      loadTemplate: function () {
+        if (this.subpanels.length > 0) {
+          // hide panel
+          jQuery('.mailpoet_' + this.options.type + '_wrapper').hide();
 
-            // add sub panel wrapper
-            jQuery('#mailpoet_'+this.options.type)
-              .append(this.templates['subpanel']);
+          // add sub panel wrapper
+          jQuery('#mailpoet_' + this.options.type)
+            .append(this.templates.subpanel);
 
-            // add sub panel content
-            jQuery('.mailpoet_'+this.options.type+'_body').last()
-              .html(this.subpanels[(this.subpanels.length - 1)].element);
+          // add sub panel content
+          jQuery('.mailpoet_' + this.options.type + '_body').last()
+            .html(this.subpanels[(this.subpanels.length - 1)].element);
 
-            // focus on sub panel
-            if(this.options.focus) {
-              this.focus();
-            }
-          } else if (this.options.element) {
-            jQuery('.mailpoet_'+this.options.type+'_body').empty();
-            jQuery('.mailpoet_'+this.options.type+'_body')
-              .append(this.options.element);
-          } else {
-            jQuery('.mailpoet_'+this.options.type+'_body')
-              .html(
-                this.options.body_template(
-                  this.options.data
-                )
-              );
+          // focus on sub panel
+          if (this.options.focus) {
+            this.focus();
           }
-
-          return this;
-        },
-        loadUrl: function() {
-          if(this.options.method === 'get') {
-            // make ajax request
-            jQuery.getJSON(this.options.url,
-              function(data) {
-                this.options.data = jQuery.extend({}, this.options.data, data);
-                // load template using fetched data
-                this.loadTemplate();
-                // show modal window
-                this.showModal();
-              }.bind(this)
+        } else if (this.options.element) {
+          jQuery('.mailpoet_' + this.options.type + '_body').empty();
+          jQuery('.mailpoet_' + this.options.type + '_body')
+            .append(this.options.element);
+        } else {
+          jQuery('.mailpoet_' + this.options.type + '_body')
+            .html(
+              this.options.body_template(
+                this.options.data
+              )
             );
-          } else if(this.options.method === 'post') {
-            // make ajax request
-            jQuery.post(this.options.url, JSON.stringify(this.options.params),
-              function(data) {
-                this.options.data = jQuery.extend({}, this.options.data, data);
-                // load template using fetched data
-                this.loadTemplate();
-                // show modal window
-                this.showModal();
-              }.bind(this),
-              'json'
-            );
-          }
+        }
 
-          return this;
-        },
-        setDimensions: function() {
-          switch(this.options.type) {
-            case 'popup':
-              // set popup dimensions
-              jQuery('#mailpoet_popup').css({
-                width: this.options.width,
-                height: this.options.height
-              });
-              // set popup wrapper height
-              jQuery('#mailpoet_popup_wrapper').css({
-                height: this.options.height
-              });
+        return this;
+      },
+      loadUrl: function () {
+        if (this.options.method === 'get') {
+          // make ajax request
+          jQuery.getJSON(this.options.url,
+            function (data) {
+              this.options.data = jQuery.extend({}, this.options.data, data);
+              // load template using fetched data
+              this.loadTemplate();
+              // show modal window
+              this.showModal();
+            }.bind(this)
+          );
+        } else if (this.options.method === 'post') {
+          // make ajax request
+          jQuery.post(this.options.url, JSON.stringify(this.options.params),
+            function (data) {
+              this.options.data = jQuery.extend({}, this.options.data, data);
+              // load template using fetched data
+              this.loadTemplate();
+              // show modal window
+              this.showModal();
+            }.bind(this),
+            'json'
+          );
+        }
+
+        return this;
+      },
+      setDimensions: function () {
+        switch (this.options.type) {
+          case 'popup':
+            // set popup dimensions
+            jQuery('#mailpoet_popup').css({
+              width: this.options.width,
+              height: this.options.height
+            });
+            // set popup wrapper height
+            jQuery('#mailpoet_popup_wrapper').css({
+              height: this.options.height
+            });
             break;
-            case 'panel':
-              // set dimensions
-              if(this.options.position === 'right') {
+          case 'panel':
+            // set dimensions
+            if (this.options.position === 'right') {
+              jQuery('#mailpoet_panel').css({
+                width: this.options.width,
+                right: 0,
+                marginRight: '-' + this.options.width,
+                left: 'auto'
+              });
+            } else if (this.options.position === 'left') {
+              jQuery('#mailpoet_panel').css({
+                width: this.options.width,
+                left: 0,
+                marginLeft: '-' + this.options.width,
+                right: 'auto'
+              });
+            }
+            jQuery('#mailpoet_panel').css({ minHeight: 'auto' });
+            break;
+          default: throw new Error('Incorrect type');
+        }
+
+        return this;
+      },
+      setPosition: function () {
+        var screenWidth;
+        var screenHeight;
+        var modalWidth;
+        var modalHeight;
+        switch (this.options.type) {
+          case 'popup':
+            screenWidth = jQuery(window).width();
+            screenHeight = jQuery(window).height();
+            modalWidth = jQuery('.mailpoet_' + this.options.type + '_wrapper').width();
+            modalHeight = jQuery('.mailpoet_' + this.options.type + '_wrapper').height();
+
+            // set position of popup depending on screen dimensions.
+            jQuery('#mailpoet_popup').css({
+              top: Math.max(48, parseInt((screenHeight / 2) - (modalHeight / 2), 10)),
+              left: Math.max(0, parseInt((screenWidth / 2) - (modalWidth / 2), 10))
+            });
+            break;
+          case 'panel':
+            setTimeout(function () {
+              // set position of popup depending on screen dimensions.
+              if (this.options.position === 'right') {
                 jQuery('#mailpoet_panel').css({
-                  width: this.options.width,
-                  right: 0,
-                  marginRight: '-' + this.options.width,
-                  left: 'auto'
+                  marginRight: 0
                 });
-              } else if(this.options.position === 'left') {
+              } else if (this.options.position === 'left') {
                 jQuery('#mailpoet_panel').css({
-                  width: this.options.width,
-                  left: 0,
-                  marginLeft: '-' + this.options.width,
-                  right: 'auto'
+                  marginLeft: 0
                 });
               }
-              jQuery('#mailpoet_panel').css({ minHeight: 'auto' });
+            }.bind(this), 0);
             break;
+          default: throw new Error('Incorrect type');
+        }
+
+        return this;
+      },
+      showModal: function () {
+        // set modal dimensions
+        this.setDimensions();
+
+        // remember the previously focused element
+        this.prevFocus = jQuery(':focus');
+
+        // show popup
+        jQuery('#mailpoet_' + this.options.type).show();
+
+        // display overlay
+        this.showOverlay();
+
+        // set modal position
+        this.setPosition();
+
+        // add class on highlighted elements
+        if (this.options.highlight !== null) {
+          if (this.options.highlight.length > 0) {
+            this.highlightOn(this.options.highlight);
           }
+        }
 
-          return this;
-        },
-        setPosition: function() {
-          switch(this.options.type) {
-            case 'popup':
-              var screenWidth = jQuery(window).width(),
-              screenHeight = jQuery(window).height(),
-              modalWidth = jQuery('.mailpoet_'+ this.options.type +'_wrapper').width(),
-              modalHeight = jQuery('.mailpoet_'+ this.options.type +'_wrapper').height();
+        if (this.options.focus) {
+          this.focus();
+        }
 
-              var top = Math.max(48, parseInt((screenHeight / 2) - (modalHeight / 2))),
-              left = Math.max(0, parseInt((screenWidth / 2) - (modalWidth / 2)));
+        // set popup as opened
+        this.opened = true;
 
-              // set position of popup depending on screen dimensions.
-              jQuery('#mailpoet_popup').css({
-                top: top,
-                left: left
-              });
-            break;
-            case 'panel':
-              setTimeout(function() {
-                // set position of popup depending on screen dimensions.
-                if(this.options.position === 'right') {
-                  jQuery('#mailpoet_panel').css({
-                    marginRight: 0
-                  });
-                } else if(this.options.position === 'left') {
-                  jQuery('#mailpoet_panel').css({
-                    marginLeft: 0
-                  });
-                }
-              }.bind(this), 0);
-            break;
+        // trigger init event if specified
+        if (this.options.onInit !== null) {
+          this.options.onInit(this);
+        }
+
+        return this;
+      },
+      focus: function () {
+        if (this.options.type === 'popup') {
+          jQuery('#mailpoet_' + this.options.type).focus();
+        } else {
+          // panel and subpanel
+          jQuery('#mailpoet_' + this.options.type + ' .mailpoet_panel_wrapper')
+            .filter(':visible').focus();
+        }
+        return this;
+      },
+      highlightOn: function (element) {
+        jQuery(element).addClass('mailpoet_modal_highlight');
+        return this;
+      },
+      highlightOff: function () {
+        jQuery('.mailpoet_modal_highlight')
+          .removeClass('mailpoet_modal_highlight');
+        return this;
+      },
+      hideModal: function () {
+        // set modal as closed
+        this.opened = false;
+
+        // hide modal
+        jQuery('#mailpoet_' + this.options.type).hide();
+
+        // remove class on highlighted elements
+        this.highlightOff();
+
+        return this;
+      },
+      showOverlay: function () {
+        jQuery('#mailpoet_modal_overlay').show();
+        return this;
+      },
+      hideOverlay: function () {
+        jQuery('#mailpoet_modal_overlay').hide();
+        return this;
+      },
+      popup: function (opts) {
+        // get options
+        var options = opts || {};
+        // set modal type
+        options.type = 'popup';
+        // set overlay state
+        options.overlay = options.overlay || true;
+        // initialize modal
+        this.init(options);
+        // open modal
+        this.open();
+
+        return this;
+      },
+      panel: function (opts) {
+        // get options
+        var options = opts || {};
+        // reset subpanels
+        this.subpanels = [];
+        // set modal type
+        options.type = 'panel';
+        // set overlay state
+        options.overlay = options.overlay || false;
+        // set highlighted element
+        options.highlight = options.highlight || null;
+        // set modal dimensions
+        options.width = options.width || '40%';
+        options.height = options.height || 'auto';
+        // initialize modal
+        this.init(options);
+        // open modal
+        this.open();
+
+        return this;
+      },
+      subpanel: function (options) {
+        if (this.opened === false) {
+          // if no panel is already opened, let's create one instead
+          this.panel(options);
+        } else {
+          // if a panel is already opened, add a sub panel to it
+          this.subpanels.push(options);
+          this.loadTemplate();
+        }
+
+        return this;
+      },
+      loading: function (toggle) {
+        // make sure the overlay is initialized and that it's visible
+        this.initOverlay(true);
+
+        if (toggle === true) {
+          this.showLoading();
+        } else {
+          this.hideLoading();
+        }
+
+        return this;
+      },
+      showLoading: function () {
+        jQuery('#mailpoet_loading').show();
+
+        // add loading class to overlay
+        jQuery('#mailpoet_modal_overlay')
+          .addClass('mailpoet_overlay_loading');
+
+        return this;
+      },
+      hideLoading: function () {
+        jQuery('#mailpoet_loading').hide();
+
+        // remove loading class from overlay
+        jQuery('#mailpoet_modal_overlay')
+          .removeClass('mailpoet_overlay_loading');
+
+        return this;
+      },
+      open: function () {
+        // load template if specified
+        if (this.options.template !== null) {
+          // check if a url was specified to get extra data
+          if (this.options.url !== null) {
+            this.loadUrl();
+          } else {
+            // load template
+            this.loadTemplate();
+
+            // show modal window
+            this.showModal();
           }
+        } else {
+          this.cancel();
+        }
 
-          return this;
-        },
-        showModal: function() {
-          // set modal dimensions
-          this.setDimensions();
-
-          // remember the previously focused element
-          this.prevFocus = jQuery(':focus');
-
-          // add a flag on the body so that we can prevent scrolling
-          jQuery('body').addClass('mailpoet_modal_opened');
-
-          // show popup
-          jQuery('#mailpoet_'+this.options.type).show();
-
-          // display overlay
-          this.showOverlay();
-
-          // set modal position
-          this.setPosition();
-
-          // add class on highlighted elements
-          if(this.options.highlight !== null) {
-            if(this.options.highlight.length > 0) {
-              this.highlightOn(this.options.highlight);
-            }
+        return this;
+      },
+      success: function () {
+        if (this.subpanels.length > 0) {
+          if (this.subpanels[(this.subpanels.length - 1)].onSuccess !== undefined) {
+            this
+              .subpanels[(this.subpanels.length - 1)]
+              .onSuccess(this.subpanels[(this.subpanels.length - 1)].data);
           }
+        } else if (this.options.onSuccess !== null) {
+          this.options.onSuccess(this.options.data);
+        }
+        this.close();
 
-          if(this.options.focus) {
+        return this;
+      },
+      cancel: function () {
+        if (this.subpanels.length > 0) {
+          if (this.subpanels[(this.subpanels.length - 1)].onCancel !== undefined) {
+            this
+              .subpanels[(this.subpanels.length - 1)]
+              .onCancel(this.subpanels[(this.subpanels.length - 1)].data);
+          }
+        } else if (this.options.onCancel !== null) {
+          this.options.onCancel(this.options.data);
+        }
+        this.close();
+
+        return this;
+      },
+      destroy: function () {
+        this.hideOverlay();
+
+        // remove extra modal
+        if (jQuery('#mailpoet_' + this.options.type).length > 0) {
+          jQuery('#mailpoet_' + this.options.type).remove();
+        }
+
+        this.initialized = false;
+
+        return this;
+      },
+      close: function () {
+        if (this.isLocked() === true) { return this; }
+
+        if (this.subpanels.length > 0) {
+          // close subpanel
+          jQuery('.mailpoet_' + this.options.type + '_wrapper').last().remove();
+
+          // show previous panel
+          jQuery('.mailpoet_' + this.options.type + '_wrapper').last().show();
+
+          // remove last subpanels
+          this.subpanels.pop();
+
+          // focus on previous panel
+          if (this.options.focus) {
             this.focus();
           }
 
-          // set popup as opened
-          this.opened = true;
-
-          // trigger init event if specified
-          if(this.options.onInit !== null) {
-            this.options.onInit(this);
-          }
-
-          return this;
-        },
-        focus: function() {
-          if(this.options.type == 'popup') {
-            jQuery('#mailpoet_'+this.options.type).focus();
-          } else {
-            // panel and subpanel
-            jQuery('#mailpoet_'+this.options.type+' .mailpoet_panel_wrapper')
-              .filter(':visible').focus();
-          }
-          return this;
-        },
-        highlightOn: function(element) {
-          jQuery(element).addClass('mailpoet_modal_highlight');
-          return this;
-        },
-        highlightOff: function() {
-          jQuery('.mailpoet_modal_highlight')
-            .removeClass('mailpoet_modal_highlight');
-          return this;
-        },
-        hideModal: function(callback) {
-          // set modal as closed
-          this.opened = false;
-
-          // hide modal
-          jQuery('#mailpoet_'+this.options.type).hide();
-
-           // remove class on highlighted elements
-           this.highlightOff();
-
-          // remove class from body to let it be scrollable
-          jQuery('body').removeClass('mailpoet_modal_opened');
-
-          return this;
-        },
-        showOverlay: function(force) {
-          jQuery('#mailpoet_modal_overlay').show();
-          return this;
-        },
-        hideOverlay: function() {
-          jQuery('#mailpoet_modal_overlay').hide();
-          return this;
-        },
-        popup: function(opts) {
-          // get options
-          var options = opts || {};
-          // set modal type
-          options.type = 'popup';
-          // set overlay state
-          options.overlay = options.overlay || true;
-          // initialize modal
-          this.init(options);
-          // open modal
-          this.open();
-
-          return this;
-        },
-        panel: function(opts) {
-          // get options
-          var options = opts || {};
-          // reset subpanels
-          this.subpanels = [];
-          // set modal type
-          options.type = 'panel';
-          // set overlay state
-          options.overlay = options.overlay || false;
-          // set highlighted element
-          options.highlight = options.highlight || null;
-          // set modal dimensions
-          options.width = options.width || '40%';
-          options.height = options.height || 'auto';
-          // initialize modal
-          this.init(options);
-          // open modal
-          this.open();
-
-          return this;
-        },
-        subpanel: function(options) {
-          if(this.opened === false) {
-            // if no panel is already opened, let's create one instead
-            this.panel(options);
-          } else {
-            // if a panel is already opened, add a sub panel to it
-            this.subpanels.push(options);
-            this.loadTemplate();
-          }
-
-          return this;
-        },
-        loading: function(toggle) {
-          // make sure the overlay is initialized and that it's visible
-          this.initOverlay(true);
-
-          if(toggle === true) {
-            this.showLoading();
-          } else {
-            this.hideLoading();
-          }
-
-          return this;
-        },
-        showLoading: function() {
-          jQuery('#mailpoet_loading').show();
-
-          // add loading class to overlay
-          jQuery('#mailpoet_modal_overlay')
-            .addClass('mailpoet_overlay_loading');
-
-          return this;
-        },
-        hideLoading: function() {
-          jQuery('#mailpoet_loading').hide();
-
-          // remove loading class from overlay
-          jQuery('#mailpoet_modal_overlay')
-            .removeClass('mailpoet_overlay_loading');
-
-          return this;
-        },
-        open: function() {
-          // load template if specified
-          if(this.options.template !== null) {
-            // check if a url was specified to get extra data
-            if(this.options.url !== null) {
-              this.loadUrl();
-            } else {
-              // load template
-              this.loadTemplate();
-
-              // show modal window
-              this.showModal();
-            }
-          } else {
-            this.cancel();
-          }
-
-          return this;
-        },
-        success: function() {
-          if(this.subpanels.length > 0) {
-            if(this.subpanels[(this.subpanels.length - 1)].onSuccess !== undefined) {
-              this.subpanels[(this.subpanels.length - 1)].onSuccess(this.subpanels[(this.subpanels.length - 1)].data);
-            }
-          } else {
-            if(this.options.onSuccess !== null) {
-              this.options.onSuccess(this.options.data);
-            }
-          }
-          this.close();
-
-          return this;
-        },
-        cancel: function() {
-          if(this.subpanels.length > 0) {
-            if(this.subpanels[(this.subpanels.length - 1)].onCancel !== undefined) {
-              this.subpanels[(this.subpanels.length - 1)].onCancel(this.subpanels[(this.subpanels.length - 1)].data);
-            }
-          } else {
-            if(this.options.onCancel !== null) {
-              this.options.onCancel(this.options.data);
-            }
-          }
-          this.close();
-
-          return this;
-        },
-        destroy: function() {
-          this.hideOverlay();
-
-          // remove extra modal
-          if(jQuery('#mailpoet_'+this.options.type).length > 0) {
-            jQuery('#mailpoet_'+this.options.type).remove();
-          }
-
-          this.initialized = false;
-
-          return this;
-        },
-        close: function() {
-          if(this.isLocked() === true) { return this; }
-
-          if(this.subpanels.length > 0) {
-            // close subpanel
-            jQuery('.mailpoet_'+this.options.type+'_wrapper').last().remove();
-
-            // show previous panel
-            jQuery('.mailpoet_'+this.options.type+'_wrapper').last().show();
-
-            // remove last subpanels
-            this.subpanels.pop();
-
-            // focus on previous panel
-            if(this.options.focus) {
-              this.focus();
-            }
-
-            return this;
-          }
-
-          // remove event handlers
-          this.removeEvents();
-
-          // hide modal window
-          this.hideModal();
-
-          // destroy modal element
-          this.destroy();
-
-          // restore the previously focused element
-          if(this.prevFocus !== undefined){
-            this.prevFocus.focus();
-          }
-
-          // reset options
-          this.options = {
-            onSuccess: null,
-            onCancel: null
-          };
-
           return this;
         }
+
+        // remove event handlers
+        this.removeEvents();
+
+        // hide modal window
+        this.hideModal();
+
+        // destroy modal element
+        this.destroy();
+
+        // restore the previously focused element
+        if (this.prevFocus !== undefined) {
+          this.prevFocus.focus();
+        }
+
+        // reset options
+        this.options = {
+          onSuccess: null,
+          onCancel: null
+        };
+
+        return this;
+      }
     };
   }
 );

assets/js/src/mp2migrator.js

@@ -1,5 +1,7 @@
-define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
+/* eslint-disable func-names */
+define('mp2migrator', ['mailpoet', 'jquery'], function (mp, jQuery) {
   'use strict';
+
   var MailPoet = mp;
   MailPoet.MP2Migrator = {
 
@@ -11,7 +13,7 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(mp, 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 () {
@@ -25,51 +27,54 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
 
     displayLogs: function () {
       jQuery.ajax({
-        url: mailpoet_mp2_migrator.log_file_url,
+        url: window.mailpoet_mp2_migrator.log_file_url,
         cache: false
       }).done(function (result) {
         jQuery('#logger').html('');
         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')) {
+          if (row.substr(0, 7) === '[ERROR]' || row.substr(0, 9) === '[WARNING]' || row === MailPoet.I18n.t('import_stopped_by_user')) {
             row = '<span class="error_msg">' + row + '</span>'; // Mark the errors in red
-          }
-          // Test if the import is complete
-          else if(row === MailPoet.I18n.t('import_complete')) {
+          } else if (row === MailPoet.I18n.t('import_complete')) { // Test if the import is complete
             jQuery('#import-actions').hide();
             jQuery('#upgrade-completed').show();
           }
           jQuery('#logger').append(row + '<br />\n');
-
         });
-        jQuery('#logger').append('<span class="error_msg">' + MailPoet.MP2Migrator.fatal_error + '</span>' + '<br />\n');
+        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);
+        if (MailPoet.MP2Migrator.is_logging) {
+          MailPoet.MP2Migrator.displayLogs_timeout = setTimeout(
+            MailPoet.MP2Migrator.displayLogs,
+            1000
+          );
         }
       });
     },
 
     updateProgressbar: function () {
       jQuery.ajax({
-        url: mailpoet_mp2_migrator.progress_url,
+        url: window.mailpoet_mp2_migrator.progress_url,
         cache: false,
         dataType: 'json'
       }).always(function (result) {
         // Move the progress bar
         var progress = 0;
-        if((result.total !== undefined) && (Number(result.total) !== 0)) {
-          progress = Math.round(Number(result.current) / Number(result.total) * 100);
+        if ((result.total !== undefined) && (Number(result.total) !== 0)) {
+          progress = Math.round((Number(result.current) / Number(result.total)) * 100);
         }
         jQuery('#progressbar').progressbar('option', 'value', progress);
         jQuery('#progresslabel').html(progress + '%');
-        if(Number(result.current) !== 0) {
+        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);
+        if (MailPoet.MP2Migrator.is_logging) {
+          MailPoet.MP2Migrator.updateProgressbar_timeout = setTimeout(
+            MailPoet.MP2Migrator.updateProgressbar,
+            1000
+          );
         }
       });
     },
@@ -96,19 +101,20 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
         }
       }).always(function () {
         MailPoet.MP2Migrator.stopLogger();
-        MailPoet.MP2Migrator.updateDisplay(); // Get the latest information after the import was stopped
+        // Get the latest information after the import was stopped
+        MailPoet.MP2Migrator.updateDisplay();
         MailPoet.MP2Migrator.reactivateImportButton();
       }).done(function (response) {
-        if(response) {
+        if (response) {
           MailPoet.MP2Migrator.fatal_error = response.data;
         }
       }).fail(function (response) {
-        if(response.errors.length > 0) {
+        if (response.errors.length > 0) {
           MailPoet.Notice.error(
             response.errors.map(function (error) {
               return error.message;
             }),
-            {scroll: true}
+            { scroll: true }
           );
         }
       });
@@ -132,14 +138,15 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
       }).always(function () {
         jQuery('#stop-import').removeAttr('disabled'); // Enable the button
         MailPoet.MP2Migrator.reactivateImportButton();
-        MailPoet.MP2Migrator.updateDisplay(); // Get the latest information after the import was stopped
+        // Get the latest information after the import was stopped
+        MailPoet.MP2Migrator.updateDisplay();
       }).fail(function (response) {
-        if(response.errors.length > 0) {
+        if (response.errors.length > 0) {
           MailPoet.Notice.error(
             response.errors.map(function (error) {
               return error.message;
             }),
-            {scroll: true}
+            { scroll: true }
           );
         }
       });
@@ -157,12 +164,12 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
       }).done(function () {
         MailPoet.MP2Migrator.gotoWelcomePage();
       }).fail(function (response) {
-        if(response.errors.length > 0) {
+        if (response.errors.length > 0) {
           MailPoet.Notice.error(
             response.errors.map(function (error) {
               return error.message;
             }),
-            {scroll: true}
+            { scroll: true }
           );
         }
       });
@@ -175,35 +182,34 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
     }
 
   };
-  
+
   /**
    * Actions to run when the DOM is ready
    */
   jQuery(function () {
-    jQuery('#progressbar').progressbar({value: 0});
+    jQuery('#progressbar').progressbar({ value: 0 });
 
     // Import button
-    jQuery('#import').click(function() {
+    jQuery('#import').click(function () {
       MailPoet.MP2Migrator.startImport();
     });
-      
+
     // Stop import button
-    jQuery('#stop-import').click(function() {
+    jQuery('#stop-import').click(function () {
       MailPoet.MP2Migrator.stopImport();
     });
 
     // Skip import link
-    jQuery('#skip-import').click(function() {
+    jQuery('#skip-import').click(function () {
       MailPoet.MP2Migrator.skipImport();
     });
 
     // Go to welcome page
-    jQuery('#goto-welcome').click(function() {
+    jQuery('#goto-welcome').click(function () {
       MailPoet.MP2Migrator.gotoWelcomePage();
     });
-    
+
     // Update the display
     MailPoet.MP2Migrator.updateDisplay();
   });
-
 });

assets/js/src/newsletter_editor/App.js

@@ -1,12 +1,8 @@
 define([
-    'backbone',
-    'backbone.marionette',
-    'backbone.radio',
-    'jquery',
-    'underscore',
-    'handlebars',
-    'handlebars_helpers'
-  ], function(Backbone, Marionette, BackboneRadio, jQuery, _, Handlebars) {
+  'backbone',
+  'backbone.marionette',
+  'backbone.radio'
+], function (Backbone, Marionette, BackboneRadio) { // eslint-disable-line func-names
   var Radio = BackboneRadio;
 
   var AppView = Marionette.View.extend({
@@ -16,19 +12,20 @@ define([
       contentRegion: '#mailpoet_editor_content',
       sidebarRegion: '#mailpoet_editor_sidebar',
       bottomRegion: '#mailpoet_editor_bottom',
-      headingRegion: '#mailpoet_editor_heading'
+      headingRegion: '#mailpoet_editor_heading',
+      topRegion: '#mailpoet_editor_top'
     }
   });
 
   var EditorApplication = Marionette.Application.extend({
     region: '#mailpoet_editor',
 
-    onStart: function() {
+    onStart: function () { // eslint-disable-line func-names
       this._appView = new AppView();
       this.showView(this._appView);
     },
 
-    getChannel: function(channel) {
+    getChannel: function (channel) { // eslint-disable-line func-names
       if (channel === undefined) {
         return Radio.channel('global');
       }
@@ -40,5 +37,4 @@ define([
   window.EditorApplication = app;
 
   return app;
-
 });

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

@@ -5,11 +5,11 @@
  * For more check: http://marionettejs.com/docs/marionette.behaviors.html#behaviorslookup
  */
 define([
-    'backbone.marionette'
-  ], function(BackboneMarionette) {
+  'backbone.marionette'
+], function (BackboneMarionette) { // eslint-disable-line func-names
   var Marionette = BackboneMarionette;
   var BehaviorsLookup = {};
-  Marionette.Behaviors.behaviorsLookup = function() {
+  Marionette.Behaviors.behaviorsLookup = function () { // eslint-disable-line func-names
     return BehaviorsLookup;
   };
 

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

@@ -4,23 +4,43 @@
  * Adds a color picker integration with the view
  */
 define([
-    'backbone.marionette',
-    'newsletter_editor/behaviors/BehaviorsLookup',
-    'mailpoet',
-    'spectrum'
-  ], function(Marionette, BehaviorsLookup, MailPoet, Spectrum) {
+  'backbone.marionette',
+  'newsletter_editor/behaviors/BehaviorsLookup',
+  'mailpoet',
+  'spectrum'
+], function (Marionette, BehaviorsLookup, MailPoet) { // eslint-disable-line func-names
   var BL = BehaviorsLookup;
 
   BL.ColorPickerBehavior = Marionette.Behavior.extend({
-    onRender: function() {
-      this.view.$('.mailpoet_color').spectrum({
-        clickoutFiresChange: true,
-        showInput: true,
-        showInitial: true,
-        preferredFormat: 'hex6',
-        allowEmpty: true,
-        chooseText: MailPoet.I18n.t('selectColor'),
-        cancelText: MailPoet.I18n.t('cancelColorSelection')
+    onRender: function () { // eslint-disable-line func-names
+      var that = this;
+      var preferredFormat = 'hex6';
+      this.view.$('.mailpoet_color').each(function () { // eslint-disable-line func-names
+        var $input = that.view.$(this);
+        var updateColorInput = function (color) { // eslint-disable-line func-names
+          if (color && color.getAlpha() > 0) {
+            $input.val(color.toString(preferredFormat));
+          } else {
+            $input.val('');
+          }
+          $input.trigger('change');
+        };
+        $input.spectrum({
+          clickoutFiresChange: true,
+          showInput: true,
+          showInitial: true,
+          showPalette: true,
+          showSelectionPalette: true,
+          palette: [],
+          localStorageKey: 'newsletter_editor.spectrum.palette',
+          preferredFormat: preferredFormat,
+          allowEmpty: true,
+          chooseText: MailPoet.I18n.t('selectColor'),
+          cancelText: MailPoet.I18n.t('cancelColorSelection'),
+          change: updateColorInput,
+          move: updateColorInput,
+          hide: updateColorInput
+        });
       });
     }
   });