Update changelog for 0.0.43

Editor fixes

.circle_ci/apache/mailpoet.loc.conf

@@ -0,0 +1,15 @@
+Listen 8080
+
+<VirtualHost *:8080>
+  UseCanonicalName Off
+  ServerName mailpoet.loc
+  DocumentRoot /home/ubuntu/mailpoet/wordpress
+  DirectoryIndex index.php
+  LogLevel notice
+
+  <Directory /home/ubuntu/mailpoet/wordpress>
+    AllowOverride All
+    Allow from All
+  </Directory>
+</VirtualHost>
+

.env.sample

@@ -1,2 +1,16 @@
 WP_TEST_PATH="/var/www/wordpress"
-
+WP_TEST_ENABLE_NETWORK_TESTS="true"
+WP_TEST_IMPORT_MAILCHIMP_API=""
+WP_TEST_IMPORT_MAILCHIMP_LISTS="" // (separated with comma)
+WP_TEST_MAILER_ENABLE_SENDING="true"
+WP_TEST_MAILER_AMAZON_ACCESS=""
+WP_TEST_MAILER_AMAZON_SECRET=""
+WP_TEST_MAILER_AMAZON_REGION=""
+WP_TEST_MAILER_ELASTICEMAIL_API=""
+WP_TEST_MAILER_MAILGUN_API=""
+WP_TEST_MAILER_MAILGUN_DOMAIN=""
+WP_TEST_MAILER_MAILPOET_API=""
+WP_TEST_MAILER_SENDGRID_API=""
+WP_TEST_MAILER_SMTP_HOST=""
+WP_TEST_MAILER_SMTP_LOGIN=""
+WP_TEST_MAILER_SMTP_PASSWORD=""

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 TODO
 composer.phar
-vendor
+/vendor
 tests/_output/*
 tests/acceptance.suite.yml
 tests/_support/_generated/*
@@ -12,7 +12,8 @@ npm-debug.log
 /views/cache/**
 temp
 .idea
-wysija-newsletters.zip
+mailpoet.zip
 tests/javascript/testBundles
 assets/css/*.css
-assets/js/*.js
+assets/js/*.js
+.vagrant

README.md

@@ -8,7 +8,6 @@ MailPoet done the right way.
 ```
 php
 nodejs
-phantomjs
 wordpress
 ```
 
@@ -47,16 +46,6 @@ $ ./do compile:all
 $ ./do test:unit
 ```
 
-- Acceptance tests:
-```sh
-$ ./do test:acceptance
-```
-
-- Run all tests:
-```sh
-$ ./do test:all
-```
-
 - Debug tests:
 ```sh
 $ ./do test:debug

RoboFile.php

@@ -47,6 +47,15 @@ class RoboFile extends \Robo\Tasks {
       ->run();
   }
 
+  function watchCss() {
+    $css_files = $this->rsearch('assets/css/src/', array('styl'));
+    $this->taskWatch()
+      ->monitor($css_files, function() {
+        $this->compileCss();
+      })
+      ->run();
+  }
+
   function watchJs() {
     $this->_exec('./node_modules/webpack/bin/webpack.js --watch');
   }
@@ -80,33 +89,64 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function makepot() {
-    $this->_exec('grunt makepot'.
+    $this->_exec('./node_modules/.bin/grunt makepot'.
       ' --gruntfile '.__DIR__.'/tasks/makepot/makepot.js'.
       ' --base_path '.__DIR__
     );
   }
 
   function pushpot() {
-    $this->_exec('grunt pushpot'.
+    $this->_exec('./node_modules/.bin/grunt pushpot'.
       ' --gruntfile '.__DIR__.'/tasks/makepot/makepot.js'.
       ' --base_path '.__DIR__
     );
   }
 
-  function testUnit($file = null) {
+  function testUnit($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build');
-    $this->_exec('vendor/bin/codecept run unit '.(($file) ? $file : ''));
+
+    $command = 'vendor/bin/codecept run unit -f '.(($opts['file']) ? $opts['file'] : '');
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
   }
 
-  function testJavascript() {
+  function testCoverage($opts=['file' => null, 'xml' => false]) {
+    $this->loadEnv();
+    $this->_exec('vendor/bin/codecept build');
+    $command = join(' ', array(
+      'vendor/bin/codecept run',
+      (($opts['file']) ? $opts['file'] : ''),
+      '--coverage',
+      ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
+    ));
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
+  }
+
+  function testJavascript($xml_output_file = null) {
     $this->compileJs();
 
-    $this->_exec(join(' ', array(
-      './node_modules/mocha/bin/mocha',
+    $command = join(' ', array(
+      './node_modules/.bin/mocha',
       '-r tests/javascript/mochaTestHelper.js',
       'tests/javascript/testBundles/**/*.js'
-    )));
+    ));
+
+    if(!empty($xml_output_file)) {
+      $command .= sprintf(
+        ' --reporter xunit --reporter-options output="%s"',
+        $xml_output_file
+      );
+    }
+
+    return $this->_exec($command);
   }
 
   function testDebug() {
@@ -121,8 +161,33 @@ class RoboFile extends \Robo\Tasks {
     $this->_exec('vendor/bin/codecept run -g failed');
   }
 
+  function qa() {
+    $this->qaLint();
+    $this->qaCodeSniffer('all');
+  }
+
+  function qaLint() {
+    $this->_exec('./tasks/php_lint.sh lib/ tests/ mailpoet.php');
+  }
+
+  function qaCodeSniffer($severity='errors') {
+    if ($severity === 'all') {
+      $severityFlag = '-w';
+    } else {
+      $severityFlag = '-n';
+    }
+    $this->_exec(
+      './vendor/bin/phpcs '.
+      '--standard=./tasks/code_sniffer/MailPoet '.
+      '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
+      './lib/Config/PopulatorData/Templates/* '.
+      'lib/ '.
+      $severityFlag
+    );
+  }
+
   protected function loadEnv() {
     $dotenv = new Dotenv\Dotenv(__DIR__);
     $dotenv->load();
   }
-}
+}

assets/css/src/admin.styl

@@ -1,16 +1,24 @@
 @import 'nib'
 
 @require 'select2/dist/css/select2.css'
+@require 'datepicker/datepicker'
 
 @require 'common'
 @require 'modal'
 @require 'notice'
-@require 'parsley'
 
 @require 'form_editor'
 @require 'listing'
+@require 'listing/newsletters'
+
 @require 'box'
 @require 'breadcrumb'
-@require 'form'
 
-@require 'settings'
+@require 'form'
+@require 'parsley'
+@require 'form_validation'
+
+@require 'settings'
+@require 'progress_bar'
+
+@require 'subscribers'

assets/css/src/common.styl

@@ -19,6 +19,8 @@ a:focus
 
 // select 2
 .select2-container
+  width: 25em !important
+
 // textareas
 textarea.regular-text
   width: 25em !important
@@ -26,3 +28,25 @@ textarea.regular-text
 @media screen and (max-width: 782px)
   .select2-container
     width: 100% !important
+
+// progress bars
+progress-border-radius = 5px
+progress-background = #efefef
+progress-foreground = #69b1e9
+
+progress
+  background-color: progress-background;
+  height: 2em
+  border: 0
+  width: 100%
+
+progress::-webkit-progress-bar
+  background-color: progress-background;
+
+progress::-webkit-progress-value
+  background-color: progress-foreground
+  border-radius: progress-border-radius
+
+progress::-moz-progress-bar
+  background-color: progress-foreground
+  border-radius: progress-border-radius

assets/css/src/datepicker/datepicker.styl

@@ -0,0 +1,2 @@
+@require 'jquery-ui-1.10.1.css'
+@require 'melon.datepicker.css'

assets/css/src/datepicker/jquery-ui-1.10.1.css

@@ -0,0 +1,649 @@
+/*! jQuery UI - v1.10.1 - 2013-03-10
+* http://jqueryui.com
+* Includes: jquery.ui.core.css, jquery.ui.datepicker.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
+* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-clearfix {
+	min-height: 0; /* support: IE7 */
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	filter:Alpha(Opacity=0);
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	display: block;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.ui-datepicker {
+	width: 17em;
+	padding: .2em .2em 0;
+	display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+	position: relative;
+	padding: .2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+	position: absolute;
+	top: 2px;
+	width: 1.8em;
+	height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+	top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+	left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+	right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+	left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+	right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+	display: block;
+	position: absolute;
+	left: 50%;
+	margin-left: -8px;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+	margin: 0 2.3em;
+	line-height: 1.8em;
+	text-align: center;
+}
+.ui-datepicker .ui-datepicker-title select {
+	font-size: 1em;
+	margin: 1px 0;
+}
+.ui-datepicker select.ui-datepicker-month-year {
+	width: 100%;
+}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year {
+	width: 49%;
+}
+.ui-datepicker table {
+	width: 100%;
+	font-size: .9em;
+	border-collapse: collapse;
+	margin: 0 0 .4em;
+}
+.ui-datepicker th {
+	padding: .7em .3em;
+	text-align: center;
+	font-weight: bold;
+	border: 0;
+}
+.ui-datepicker td {
+	border: 0;
+	padding: 1px;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+	display: block;
+	padding: .2em;
+	text-align: right;
+	text-decoration: none;
+}
+.ui-datepicker .ui-datepicker-buttonpane {
+	background-image: none;
+	margin: .7em 0 0 0;
+	padding: 0 .2em;
+	border-left: 0;
+	border-right: 0;
+	border-bottom: 0;
+}
+.ui-datepicker .ui-datepicker-buttonpane button {
+	float: right;
+	margin: .5em .2em .4em;
+	cursor: pointer;
+	padding: .2em .6em .3em .6em;
+	width: auto;
+	overflow: visible;
+}
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+	float: left;
+}
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi {
+	width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+	float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+	width: 95%;
+	margin: 0 auto .4em;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+	width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+	width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+	width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+	border-left-width: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+	clear: left;
+}
+.ui-datepicker-row-break {
+	clear: both;
+	width: 100%;
+	font-size: 0;
+}
+
+/* RTL support */
+.ui-datepicker-rtl {
+	direction: rtl;
+}
+.ui-datepicker-rtl .ui-datepicker-prev {
+	right: 2px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next {
+	left: 2px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-prev:hover {
+	right: 1px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next:hover {
+	left: 1px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane {
+	clear: right;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button {
+	float: left;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
+.ui-datepicker-rtl .ui-datepicker-group {
+	float: right;
+}
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
+	border-right-width: 0;
+	border-left-width: 1px;
+}
+
+/* Component containers
+----------------------------------*/
+.ui-widget {
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-size: 1.1em;
+}
+.ui-widget .ui-widget {
+	font-size: 1em;
+}
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-size: 1em;
+}
+.ui-widget-content {
+	border: 1px solid #dddddd;
+	background: #eeeeee url(../img/datepicker/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
+	color: #333333;
+}
+.ui-widget-content a {
+	color: #333333;
+}
+.ui-widget-header {
+	border: 1px solid #e78f08;
+	background: #f6a828 url(../img/datepicker/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
+	color: #ffffff;
+	font-weight: bold;
+}
+.ui-widget-header a {
+	color: #ffffff;
+}
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+	border: 1px solid #cccccc;
+	background: #f6f6f6 url(../img/datepicker/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #1c94c4;
+}
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited {
+	color: #1c94c4;
+	text-decoration: none;
+}
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+	border: 1px solid #fbcb09;
+	background: #fdf5ce url(../img/datepicker/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #c77405;
+}
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited {
+	color: #c77405;
+	text-decoration: none;
+}
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active {
+	border: 1px solid #fbd850;
+	background: #ffffff url(../img/datepicker/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #eb8f00;
+}
+.ui-state-active a,
+.ui-state-active a:link,
+.ui-state-active a:visited {
+	color: #eb8f00;
+	text-decoration: none;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+	border: 1px solid #fed22f;
+	background: #ffe45c url(../img/datepicker/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
+	color: #363636;
+}
+.ui-state-highlight a,
+.ui-widget-content .ui-state-highlight a,
+.ui-widget-header .ui-state-highlight a {
+	color: #363636;
+}
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+	border: 1px solid #cd0a0a;
+	background: #b81900 url(../img/datepicker/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
+	color: #ffffff;
+}
+.ui-state-error a,
+.ui-widget-content .ui-state-error a,
+.ui-widget-header .ui-state-error a {
+	color: #ffffff;
+}
+.ui-state-error-text,
+.ui-widget-content .ui-state-error-text,
+.ui-widget-header .ui-state-error-text {
+	color: #ffffff;
+}
+.ui-priority-primary,
+.ui-widget-content .ui-priority-primary,
+.ui-widget-header .ui-priority-primary {
+	font-weight: bold;
+}
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary,
+.ui-widget-header .ui-priority-secondary {
+	opacity: .7;
+	filter:Alpha(Opacity=70);
+	font-weight: normal;
+}
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled,
+.ui-widget-header .ui-state-disabled {
+	opacity: .35;
+	filter:Alpha(Opacity=35);
+	background-image: none;
+}
+.ui-state-disabled .ui-icon {
+	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
+}
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	width: 16px;
+	height: 16px;
+	background-position: 16px 16px;
+}
+.ui-icon,
+.ui-widget-content .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_222222_256x240.png);
+}
+.ui-widget-header .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ffffff_256x240.png);
+}
+.ui-state-default .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-hover .ui-icon,
+.ui-state-focus .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-active .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-highlight .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_228ef1_256x240.png);
+}
+.ui-state-error .ui-icon,
+.ui-state-error-text .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ffd27a_256x240.png);
+}
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-on { background-position: -96px -144px; }
+.ui-icon-radio-off { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-left,
+.ui-corner-tl {
+	border-top-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-right,
+.ui-corner-tr {
+	border-top-right-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-left,
+.ui-corner-bl {
+	border-bottom-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-right,
+.ui-corner-br {
+	border-bottom-right-radius: 4px;
+}
+
+/* Overlays */
+.ui-widget-overlay {
+	background: #666666 url(../img/datepicker/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
+	opacity: .5;
+	filter: Alpha(Opacity=50);
+}
+.ui-widget-shadow {
+	margin: -5px 0 0 -5px;
+	padding: 5px;
+	background: #000000 url(../img/datepicker/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;
+	opacity: .2;
+	filter: Alpha(Opacity=20);
+	border-radius: 5px;
+}

assets/css/src/datepicker/melon.datepicker.css

@@ -0,0 +1,115 @@
+/**
+ * Melon skin from: https://github.com/rtsinani/jquery-datepicker-skins
+ */
+
+.wp-admin {
+	font-size: 90%;
+}
+
+.wp-admin .ui-widget {
+	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+	background: #2e3641;
+	border: none;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+}
+
+.wp-admin .ui-datepicker {
+	padding: 0;
+}
+
+.wp-admin .ui-datepicker-header {
+	border: none;
+	background: transparent;
+	font-weight: normal;
+	font-size: 15px;
+}
+
+.wp-admin .ui-datepicker-header .ui-state-hover {
+	background: transparent;
+	border-color: transparent;
+	cursor: pointer;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-title {
+	margin-top: .4em;
+	margin-bottom: .3em;
+	color: #e9f0f4;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev-hover,
+.wp-admin .ui-datepicker .ui-datepicker-next-hover,
+.wp-admin .ui-datepicker .ui-datepicker-next,
+.wp-admin .ui-datepicker .ui-datepicker-prev {
+	top: .9em;
+	border:none;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev-hover {
+	left: 2px;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-next-hover {
+	right: 2px;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-next span,
+.wp-admin .ui-datepicker .ui-datepicker-prev span {
+	background-image: url(../img/datepicker/ui-icons_ffffff_256x240.png);
+	background-position: -32px 0;
+	margin-top: 0;
+	top: 0;
+	font-weight: normal;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev span {
+	background-position: -96px 0;
+}
+
+.wp-admin .ui-datepicker table {
+	margin: 0;
+}
+
+.wp-admin .ui-datepicker th {
+	padding: 1em 0;
+	color: #ccc;
+	font-size: 13px;
+	font-weight: normal;
+	border: none;
+	border-top: 1px solid #3a414d;
+}
+
+.wp-admin .ui-datepicker td {
+	background: #f97e76;
+	border: none;
+	padding: 0;
+}
+
+.wp-admin td .ui-state-default {
+	background: transparent;
+	border: none;
+	text-align: center;
+	padding: .5em;
+	margin: 0;
+	font-weight: normal;
+	color: #efefef;
+	font-size: 16px;
+}
+
+.wp-admin .ui-state-disabled  {
+	opacity: 1;
+}
+
+.wp-admin .ui-state-disabled .ui-state-default {
+	color: #fba49e;
+}
+
+.wp-admin td .ui-state-active,
+.wp-admin td .ui-state-hover {
+	background: #2e3641;
+}
+

assets/css/src/form.styl

@@ -1,2 +1,5 @@
+.mailpoet_form
+  margin: 0 0 20px 0
+
 .mailpoet_form td
-  vertical-align: top !important
+  vertical-align: top !important

assets/css/src/form_editor.styl

@@ -4,6 +4,9 @@
 icons = '../img/form_editor_icons.png'
 handle_icon = '../img/handle.png'
 
+#mailpoet_form_name
+  font-size: 23px
+
 #mailpoet_form_history
   display: none
 
@@ -99,6 +102,7 @@ handle_icon = '../img/handle.png'
 /* MailPoet Form wrapper */
 #mailpoet_form_wrapper
   position: relative
+  margin: 20px 0 0 0
 
 /* MailPoet Form container */
 #mailpoet_form_container
@@ -121,6 +125,7 @@ handle_icon = '../img/handle.png'
   float: none
 
 #mailpoet_form_toolbar
+  z-index: 999
   position: absolute
   width: 400px
 
@@ -558,3 +563,6 @@ handle_icon = '../img/handle.png'
 .CodeMirror
   border: 1px solid #eee
 
+/* Settings */
+#mailpoet_form_segments.parsley-error + span .select2-selection
+  border: 1px solid #b94a48

assets/css/src/form_validation.styl

@@ -0,0 +1,6 @@
+.parsley-errors-list
+  margin-top: 8px
+
+.parsley-required
+.parsley-custom-error-message
+  color: #b94a48

assets/css/src/listing/newsletters.styl

@@ -0,0 +1,3 @@
+#newsletters_container
+  h2.nav-tab-wrapper
+    margin-bottom: 1rem

assets/css/src/modal.styl

@@ -90,7 +90,7 @@ body.mailpoet_modal_opened
   padding: 0
   margin: 0
   width: 100%
-  transition: margin 0.3s ease-out
+  transition: margin 350ms ease-out
 
 .mailpoet_panel_wrapper
   background-color: #f1f1f1
@@ -159,23 +159,6 @@ body.mailpoet_modal_opened
   margin: 0
   text-align: right
 
-.mailpoet_button
-  padding: 3px 15px
-  border: 1px solid #444
-  font-weight: normal
-  cursor: pointer
-  background-color: #222
-  color: #cfcfcf
-  font-size: 1em
-
-.mailpoet_button:hover
-  background-color: #00aacc
-  color: #fff
-
-.mailpoet_button:active
-  background-color: #00ccff
-  color: #fff
-
 @media screen and (max-width: 782px)
   #mailpoet_modal_overlay.mailpoet_panel_overlay
     top: 46px
@@ -217,4 +200,4 @@ body.mailpoet_modal_opened
   0%
   50%
     background-color: #064E6D
-  100%
+  100%

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

@@ -1,42 +1,88 @@
-$tool-inactive-color = #bbbbbb
+$tool-inactive-color = #333333
 $tool-inactive-secondary-color = #ffffff
-$tool-hover-color = #333333
+$tool-hover-color = #bbbbbb
 $tool-hover-secondary-color = #ffffff
 $tool-active-color = #d2d2d4
 $tool-active-secondary-color = #ffffff
 
 $tool-width = 20px
 $master-column-tool-width = 24px
-$layer-selector-width = 30px
 
 .mailpoet_tools
   position: absolute
   top: 0
   right: 0
-  display: none
   z-index: 20
   padding: 2px
   text-align: right
+  overflow: hidden
+
+  .mailpoet_tool_slider
+    position: relative
+    right: -100%
+    transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
+    opacity: 0
+
+  &.mailpoet_display_tools
+    .mailpoet_tool_slider
+      right: 0
+      opacity: 1
 
   a
     vertical-align: top
 
   .mailpoet_container_horizontal + &
     left: 100%
+    right: initial
     padding-left: 5px
 
+    .mailpoet_tool_slider
+      left: -100%
+      right: initial
+
+    &.mailpoet_display_tools
+      .mailpoet_tool_slider
+        left: 0
+
     .mailpoet_tool
       width: $master-column-tool-width
       height: $master-column-tool-width
+      display: block
 
       .mailpoet_tool_icon
         width: $master-column-tool-width
         height: $master-column-tool-width
 
+
+    .mailpoet_delete_block_activate
+      max-width: 100%
+      max-height: $master-column-tool-width
+      opacity: 1
+      display: block
+
+    .mailpoet_delete_block_confirm,
+    .mailpoet_delete_block_cancel
+      max-width: 100%
+      max-height: 0
+      opacity: 0
+      overflow: hidden
+      display: block
+      margin: 0
+
     .mailpoet_delete_block_activated
       width: auto
       height: auto
 
+      .mailpoet_delete_block_activate
+        overflow: hidden
+        max-height: 0
+        opacity: 0
+
+      .mailpoet_delete_block_confirm,
+      .mailpoet_delete_block_cancel
+        max-height: $master-column-tool-width*2
+        opacity: 1
+
 .mailpoet_tool
   display: inline-block
   width: $tool-width
@@ -76,28 +122,44 @@ $layer-selector-width = 30px
   display: inline-block
   padding: 2px
   vertical-align: top
+  animation-background-color()
 
   .mailpoet_tool
     padding: 0
 
+  .mailpoet_delete_block_activate
+    max-width: $tool-width
+    display: inline-block
+    opacity: 1
+    animation-fade-in-and-scale-horizontally()
+
   .mailpoet_delete_block_confirm,
   .mailpoet_delete_block_cancel
-    display: none
+    max-width: 0
+    opacity: 0
+    overflow: hidden
+    display: inline-block
+    animation-fade-in-and-scale-horizontally()
 
 .mailpoet_delete_block_activated
+  height: auto
   width: auto
   border-radius(3px)
   background-color: $warning-background-color
   padding: 3px 5px
-  line-height: 1.2em
-  height: auto
 
   .mailpoet_delete_block_activate
-    display: none
+    overflow: hidden
+    max-width: 0
+    opacity: 0
 
   .mailpoet_delete_block_confirm,
   .mailpoet_delete_block_cancel
-    display: inline-block
+    max-width: 100%
+    opacity: 1
+
+  .mailpoet_delete_block_cancel
+    margin-left: 3px
 
 .mailpoet_delete_block_confirm
   color: $warning-text-color

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

@@ -52,6 +52,7 @@ $draggable-widget-z-index = 2
   padding: 0
   margin: 0
   z-index: $draggable-widget-z-index
+  animation-fade-in()
 
   .mailpoet_widget_icon
     padding: 0

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

@@ -4,7 +4,6 @@
 
 .mailpoet_form_field_title
   clear: both
-  font-size: 1.1em
   margin-bottom: 5px
 
 .mailpoet_form_field_title_small
@@ -37,3 +36,6 @@
 
   input[type=text]
     vertical-align: middle
+
+.mailpoet_form_field_block
+  display: block

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

@@ -38,9 +38,7 @@
       content: '\f142'
 
 .mailpoet_save_show_options_icon
-  width: auto
-  height: auto
-  line-height: auto
+  vertical-align: middle
 
   &::before
     content: '\f140'
@@ -48,7 +46,7 @@
 .mailpoet_save_as_template_container,
 .mailpoet_export_template_container
   border-radius(3px)
-  float: left
+  display: inline-block
   clear: both
 
   margin-top: 5px

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

@@ -17,6 +17,7 @@ $widget-icon-width = 30px
   border-left: $content-border-color
   border-bottom: $content-border-color
   color: $sidebar-text-color
+  font-size: $sidebar-text-size
 
   .mailpoet_sidebar_region
     margin-bottom: 0
@@ -26,13 +27,9 @@ $widget-icon-width = 30px
     border-right: 0
 
     &.closed .mailpoet_region_content
-      max-height: 0px
-      overflow: hidden
-      margin-top: 0
+      display: none
 
   .mailpoet_region_content
-    max-height: 2000px
-    transition: max-height 0.2s ease
     padding: 0 20px
     margin-top: 12px
 

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

@@ -3,6 +3,7 @@ $sidepanel-active-heading-color = $primary-active-color
 /* Sidepanel */
 .mailpoet_editor_settings
   color: $sidebar-text-color
+  font-size: $sidebar-text-size
 
   p
     font-size: 1em
@@ -18,7 +19,6 @@ $sidepanel-active-heading-color = $primary-active-color
 
 .mailpoet_sidepanel_field_title
   clear: both
-  font-size: 1.1em
   margin-bottom: 5px
 
 .mailpoet_sidepanel_field_title_small

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

@@ -18,3 +18,12 @@
 
   & > .mailpoet_block
     width: 100%
+
+.mailpoet_automated_latest_content_display_options
+  animation-slide-open-downwards()
+
+.mailpoet_automated_latest_content_show_amount
+  width: 25px
+
+.mailpoet_automated_latest_content_content_type
+  width: 180px

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

@@ -1,4 +1,5 @@
 $block-hover-highlight-color = $primary-active-color
+$block-text-line-height = $text-line-height
 
 .mailpoet_block
   box-sizing: border-box
@@ -22,6 +23,7 @@ $block-hover-highlight-color = $primary-active-color
     border: 1px solid $transparent-color
 
   &:hover > .mailpoet_block_highlight
+  &.mailpoet_highlight > .mailpoet_block_highlight
     border: 1px dashed $block-hover-highlight-color
 
 
@@ -30,3 +32,34 @@ $block-hover-highlight-color = $primary-active-color
 
 .mailpoet_content
   position: relative
+  line-height: $block-text-line-height
+
+  p, h1, h2, h3, h4, h5, h6
+    line-height: $block-text-line-height
+    padding: 0
+    margin: 0
+    font-style: normal
+    font-weight: normal
+
+  h1, h2, h3, h4, h5, h6
+    margin-bottom: 0.3em
+
+  p
+    margin-top: 0
+    margin-bottom: 0
+    font-weight: normal
+
+  ul
+    padding: 0
+    margin-top: 10px
+    margin-bottom: 10px
+
+  li
+    margin-top: 0
+    font-weight: normal
+    margin-bottom: 10px
+
+  blockquote
+    margin: 0 0 $block-text-line-height
+    padding-left: 10px
+    border-left: 2px #565656 solid

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

@@ -1,9 +1,4 @@
-$button-vertical-padding = 13px
-
 .mailpoet_button_block
-  padding-top: $button-vertical-padding
-  padding-bottom: $button-vertical-padding
-
   overflow: hidden
 
   .mailpoet_editor_button

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

@@ -17,7 +17,7 @@ $three-column-width = ($newsletter-width / 3) - (2 * $column-margin)
   padding-left: 0
   padding-right: 0
 
-  &:hover
+  &:hover > .mailpoet_block_highlight
     border: 0
 
 .mailpoet_container_vertical > *
@@ -79,3 +79,4 @@ $three-column-width = ($newsletter-width / 3) - (2 * $column-margin)
   box-shadow(inset 1px 2px 1px $primary-inactive-color)
   color: #656565
   border-radius(3px)
+  animation-background-color()

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

@@ -19,6 +19,10 @@ $divider-hover-border-color = $primary-active-color
   width: 100%
   border: 1px solid transparent
 
+.mailpoet_active_divider_style
+  border: 1px solid $active-divider-border-color
+  background: $active-divider-background-color
+
 .mailpoet_field_divider_style:hover
   border: 1px solid $divider-hover-border-color
 

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

@@ -1,6 +1,10 @@
 .mailpoet_footer_block
   padding-left: 0
   padding-right: 0
+  margin-bottom: 0
 
   .mailpoet_content
-    padding: 5px 20px
+    padding: 10px 20px
+
+    & > *:last-child
+      margin-bottom: 0

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

@@ -1,6 +1,10 @@
 .mailpoet_header_block
   padding-left: 0
   padding-right: 0
+  margin-bottom: 0
 
   .mailpoet_content
-    padding: 5px 20px
+    padding: 10px 20px
+
+    & > *:last-child
+      margin-bottom: 0

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

@@ -11,9 +11,6 @@
     padding-right: 0
     margin-bottom: 0
 
-    img
-      width: 100%
-
   .mailpoet_content a:hover
     cursor: all-scroll
 

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

@@ -1,15 +1,12 @@
 .mailpoet_posts_block
-  box-shadow(none)
+  padding-left: 0
+  padding-right: 0
 
-  & > .mailpoet_content
-    font-size: 1em
-    text-align: center
-    background-color: $primary-active-color
-    margin: 20px 0
-    padding: 15px
-    box-shadow(inset 1px 2px 1px $primary-inset-shadow-color)
-    color: $white-color
-    border-radius(3px)
+.mailpoet_posts_block_posts
+  overflow: auto
+
+  & > .mailpoet_block
+    width: 100%
 
 .mailpoet_post_selection_filter_row
   margin-top: 5px
@@ -18,7 +15,11 @@
 .mailpoet_posts_categories_and_tags
   width: 100%
 
-.mailpoet_settings_posts_show_display_options
+.mailpoet_settings_posts_display_options
+.mailpoet_settings_posts_selection
+  animation-slide-open-downwards()
+
+.mailpoet_settings_posts_show_display_options,
 .mailpoet_settings_posts_show_post_selection
   display: block
   margin-top: 10px

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

@@ -1,12 +1,12 @@
-$social-block-vertical-padding = 11px
+$social-block-vertical-padding = 0px
 
 $social-icon-width = 32px
 $active-social-icon-set-border-color = #adadad
 $active-social-icon-set-background-color = #daebf2
 $social-icon-set-hover-border-color = $primary-active-color
 
-$tool-inactive-color = #bbbbbb
-$tool-hover-color = #333333
+$tool-inactive-color = #333333
+$tool-hover-color = #bbbbbb
 $tool-active-color = #d2d2d4
 
 $tool-width = 16px

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

@@ -1,17 +1,13 @@
-$text-vertical-padding = 3px
-
 .mailpoet_text_block
   padding-left: 0
   padding-right: 0
 
   & > .mailpoet_content
     overflow: hidden
-    padding-top: 13px
-    padding-bottom: 13px
+    padding-top: 0
+    padding-bottom: 0px
     padding-left: 20px
     padding-right: 20px
 
-blockquote
-  margin: 1em
-  padding-left: 1em
-  border-left: 2px #565656 solid
+    & > *:last-child
+      margin-bottom: 0

assets/css/src/newsletter_editor/libraryOverrides.styl

@@ -31,7 +31,7 @@ div.mce-toolbar-grp.mce-container
   box-shadow(0px 0px 3px 1px rgba(0, 0, 0, 0.05))
 
 .mce-window
-  /* Fix TinyMCE mailpoet_custom_fields window lack of hiding overflow */
+  /* Fix TinyMCE mailpoet_shortcodes window lack of hiding overflow */
   div.mce-container-body.mce-abs-layout
     overflow: hidden
 
@@ -40,8 +40,8 @@ div.mce-toolbar-grp.mce-container
     width: -webkit-calc( 100% - 36px )
     width: calc( 100% - 36px )
 
-/* TinyMCE mailpoet_custom_fields toolbar icon */
-.mce-i-mailpoet_custom_fields:before
+/* TinyMCE mailpoet_shortcodes toolbar icon */
+.mce-i-mailpoet_shortcodes:before
   font: 400 20px/1 dashicons!important
   content: "\f307"
 
@@ -84,7 +84,7 @@ position: relative
 body
   overflow-x: auto
 
-/* Hide the "Details" section of Wordpress Media manager */
+/* Hide the "Details" section of WordPress Media manager */
 .media-sidebar
   display: none
 
@@ -98,7 +98,7 @@ body
   .attachments-browser .uploader-inline
     right: 0
 
-/* Remove max width from date selector in Wordpress Media Manager */
+/* Remove max width from date selector in WordPress Media Manager */
 #media-attachment-date-filters
   max-width: calc(100% - 12px)
 
@@ -129,3 +129,21 @@ body
 
 #mailpoet_modal_close
   display: none
+
+.wrap > .mailpoet_notice,
+.update-nag
+  margin-left: 2px + 15px !important
+
+/* Make a button group */
+.mailpoet_button_group
+
+  .button:first-child
+    border-right: 0
+    border-top-right-radius: 0
+    border-bottom-right-radius: 0
+
+  .button:last-child
+    border-left: 0
+    border-top-left-radius: 0
+    border-bottom-left-radius: 0
+

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

@@ -0,0 +1,31 @@
+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
+
+  &.mailpoet_closed
+    max-height: 0px
+    opacity: 0
+
+animation-background-color()
+  transition: background 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
+
+animation-fade-in()
+  animation-name: fadeIn
+  animation-duration: 300ms
+  animation-fill-mode: forwards
+  animation-timing-function: ease-in
+
+animation-fade-in-and-scale-horizontally()
+  transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0.3
+  }
+
+  100% {
+    opacity: 1
+  }
+}

assets/css/src/newsletter_editor/newsletter_editor.styl

@@ -6,6 +6,7 @@
 @require 'mixins/border-radius'
 @require 'mixins/box-shadow'
 @require 'mixins/filter-shadow'
+@require 'mixins/transitions'
 
 @require 'variables'
 @require 'common'

assets/css/src/newsletter_editor/variables.styl

@@ -24,3 +24,6 @@ $error-text-color = #d54e21
 
 // Dimensions
 $newsletter-width = 660px
+
+$text-line-height = 1.6em
+$sidebar-text-size = 13px

assets/css/src/parsley.styl

@@ -18,6 +18,7 @@ textarea.parsley-error
   list-style-type none
   font-size 0.9em
   line-height 0.9em
+  color #B94A48
   opacity 0
   transition all .3s ease-in
   -o-transition all .3s ease-in

assets/css/src/progress_bar.styl

@@ -0,0 +1,29 @@
+.mailpoet_progress
+  background-color: #efefef
+  height: 25px
+  padding: 0
+  width: 100%
+  margin: 0
+  border-radius: 5px
+  position: relative
+
+.mailpoet_progress_label
+  position: absolute
+  width: 100%
+  text-align: center
+  display: inline-block
+  margin: 2px 0 0 0
+
+.mailpoet_progress_bar
+  position: absolute
+  display: inline-block
+  height: 100%
+  border-radius: 3px
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset
+  background-color: #34c2e3
+  background-image: linear-gradient(top, #34c2e3, darken(#34c2e3, 20%))
+
+.mailpoet_progress_complete
+  .mailpoet_progress_bar
+    background-color: #fecf23
+    background-image: linear-gradient(top, #fecf23, #fd9215)

assets/css/src/public.styl

@@ -1,3 +1,14 @@
 @import 'nib'
 
 @require 'parsley'
+@require 'form_validation'
+
+/* labels */
+.mailpoet_text_label
+.mailpoet_textarea_label
+.mailpoet_select_label
+.mailpoet_radio_label
+.mailpoet_checkbox_label
+.mailpoet_list_label
+.mailpoet_date_label
+  display:block

assets/css/src/settings.styl

@@ -1,14 +1,10 @@
 #mailpoet_settings
   // common
   .mailpoet_panel
-    display: none
+    display none
 
   .form-table th
-    width:20em
-
-  // advanced
-  #mailpoet_role_permissions
-    margin-top: 20px;
+    width 20em
 
   // sending methods
   .mailpoet_sending_methods
@@ -28,8 +24,7 @@
       line-height 54px
       font-size 1.5em
     .mailpoet_description
-      line-height 1.5em
-      font-size 1.1em
+      font-size 14px
     .mailpoet_status
       background-color #2f2f2f
       color #fff
@@ -60,11 +55,11 @@
   // responsive
   @media screen and (max-width: 782px)
     .form-table th
-      width: auto
+      width auto
 
     .mailpoet_sending_methods
       li
         float none
-        width: auto
-        margin-right: 0
+        width auto
+        margin-right 0
 

assets/css/src/subscribers.styl

@@ -0,0 +1,3 @@
+#subscribers_container
+  .mailpoet_segments_unsubscribed
+    color: lighten(#555, 33)

assets/img/preview_magnifying_glass.svg

@@ -0,0 +1,12 @@
+<?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/mailpoet_custom_fields

@@ -1 +0,0 @@
-../src/newsletter_editor/tinymce/mailpoet_custom_fields

assets/js/lib/mailpoet_shortcodes

@@ -0,0 +1 @@
+../src/newsletter_editor/tinymce/mailpoet_shortcodes

assets/js/src/ajax.js

@@ -1,4 +1,4 @@
-define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
+define('ajax', ['mailpoet', 'jquery', 'underscore'], function(MailPoet, jQuery, _) {
   'use strict';
   MailPoet.Ajax = {
       version: 0.5,
@@ -8,19 +8,11 @@ define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         endpoint: null,
         action: null,
         token: null,
-        data: {},
-        onSuccess: function(data, textStatus, xhr) {},
-        onError: function(xhr, textStatus, errorThrown) {}
-      },
-      get: function(options) {
-        return this.request('get', options);
+        data: {}
       },
       post: function(options) {
         return this.request('post', options);
       },
-      delete: function(options) {
-        return this.request('delete', options);
-      },
       init: function(options) {
         // merge options
         this.options = jQuery.extend({}, this.defaults, options);
@@ -50,31 +42,31 @@ define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
 
         // set request params
         var params = this.getParams();
-        var jqXHR;
+        var deferred = jQuery.Deferred();
 
-        // make ajax request depending on method
-        if(method === 'get') {
-          jqXHR = jQuery.get(
-            this.options.url,
-            params,
-            this.options.onSuccess,
-            'json'
-          );
-        } else {
-          jqXHR = jQuery.ajax({
-            url: this.options.url,
-            type : 'post',
-            data: params,
-            dataType: 'json',
-            success : this.options.onSuccess,
-            error : this.options.onError
-          });
+        // remove null values from the data object
+        if (_.isObject(params.data)) {
+          params.data = _.pick(params.data, function(value) {
+            return (value !== null)
+          })
         }
 
+        // ajax request
+        deferred = jQuery.post(
+          this.options.url,
+          params,
+          null,
+          'json'
+        ).then(function(data) {
+          return data;
+        }, function(xhr) {
+          return xhr.responseJSON;
+        });
+
         // clear options
         this.options = {};
 
-        return jqXHR;
+        return deferred;
       }
   };
 });

assets/js/src/date.js

@@ -0,0 +1,146 @@
+define('date',
+  [
+    'mailpoet',
+    'jquery',
+    'moment'
+  ], function(
+    MailPoet,
+    jQuery,
+    Moment
+) {
+  'use strict';
+
+  MailPoet.Date = {
+    version: 0.1,
+    options: {},
+    defaults: {
+      offset: 0,
+      format: 'F, d Y H:i:s'
+    },
+    init: function(options) {
+      options = options || {};
+
+      // 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, options) {
+      options = options || {};
+      this.init(options);
+
+      var date = Moment(date, this.convertFormat(options.parseFormat));
+      if (options.offset === 0) date = date.utc();
+      return date.format(this.convertFormat(this.options.format));
+    },
+    toDate: function(date, options) {
+      options = options || {};
+      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: 'ddd',
+          l: 'dddd',
+          d: 'DD',
+          j: 'D',
+          z: 'DDDD',
+          N: 'E',
+          S: '',
+          M: 'MMM',
+          F: 'MMMM',
+          m: 'MM',
+          n: '',
+          t: '',
+          y: 'YY',
+          Y: 'YYYY',
+          H: 'HH',
+          h: 'hh',
+          g: 'h',
+          A: 'A',
+          i: 'mm',
+          s: 'ss',
+          T: 'z',
+          O: 'ZZ',
+          w: 'd',
+          W: 'WW'
+        },
+        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'
+        }
+      };
+
+      if (!format || format.length <= 0) return format;
+
+      var replacements = format_mappings['date'];
+
+      var outputFormat = '';
+
+      Object.keys(replacements).forEach(function(key) {
+        if (format.indexOf(key) !== -1) {
+          format = format.replace(key, '%'+key);
+        }
+      });
+      outputFormat = format;
+      Object.keys(replacements).forEach(function(key) {
+        if (outputFormat.indexOf('%'+key) !== -1) {
+          outputFormat = outputFormat.replace('%'+key, replacements[key]);
+        }
+      });
+      return outputFormat;
+    }
+  };
+});

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

@@ -1,62 +1,47 @@
 define([
-  'react',
-  'react-checkbox-group'
+  'react'
 ],
 function(
-  React,
-  CheckboxGroup
+  React
 ) {
-  var FormFieldCheckbox = React.createClass({
+  const FormFieldCheckbox = React.createClass({
+    onValueChange: function(e) {
+      e.target.value = this.refs.checkbox.checked ? '1' : '0';
+      return this.props.onValueChange(e);
+    },
     render: function() {
-      var selected_values = this.props.item[this.props.field.name] || '';
-      if(
-        selected_values !== undefined
-        && selected_values.constructor !== Array
-      ) {
-        selected_values = selected_values.split(';').map(function(value) {
-          return value.trim();
-        });
+      if (this.props.field.values === undefined) {
+        return false;
       }
-      var count = Object.keys(this.props.field.values).length;
 
-      var options = Object.keys(this.props.field.values).map(
-        function(value, index) {
+      // 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 type="checkbox" value={ value } />
-                &nbsp;{ this.props.field.values[value] }
+                <input
+                  ref="checkbox"
+                  type="checkbox"
+                  value="1"
+                  checked={ isChecked }
+                  onChange={ this.onValueChange }
+                  name={ this.props.field.name }
+                />
+                { this.props.field.values[value] }
               </label>
             </p>
           );
-        }.bind(this)
+        }
       );
 
       return (
-        <CheckboxGroup
-          name={ this.props.field.name }
-          value={ selected_values }
-          ref={ this.props.field.name }
-          onChange={ this.handleValueChange }>
+        <div>
           { options }
-        </CheckboxGroup>
+        </div>
       );
-    },
-    handleValueChange: function() {
-      var field = this.props.field.name;
-      var group = this.refs[field];
-      var selected_values = [];
-
-      if(group !== undefined) {
-        selected_values = group.getCheckedValues();
-      }
-
-      return this.props.onValueChange({
-        target: {
-          name: field,
-          value: selected_values.join(';')
-        }
-      });
     }
   });
 

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

@@ -0,0 +1,251 @@
+define([
+  'react',
+  'moment',
+], function(
+  React,
+  Moment
+) {
+  class FormFieldDateYear extends React.Component {
+    render() {
+      const yearsRange = 100;
+      const years = [];
+
+      if (this.props.placeholder !== undefined) {
+        years.push((
+          <option value="" key={ 0 }>{ this.props.placeholder }</option>
+        ));
+      }
+
+      const currentYear = Moment().year();
+      for (let i = currentYear; i >= currentYear - yearsRange; i--) {
+        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>
+      );
+    }
+  }
+
+  class FormFieldDateMonth extends React.Component {
+    render() {
+      const months = [];
+
+      if (this.props.placeholder !== undefined) {
+        months.push((
+          <option value="" key={ 0 }>{ this.props.placeholder }</option>
+        ));
+      }
+
+      for (let i = 1; i <= 12; i++) {
+        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>
+      );
+    }
+  }
+
+  class FormFieldDateDay extends React.Component {
+    render() {
+      const days = [];
+
+      if (this.props.placeholder !== undefined) {
+        days.push((
+          <option value="" key={ 0 }>{ this.props.placeholder }</option>
+        ));
+      }
+
+      for (let i = 1; i <= 31; i++) {
+        days.push((
+          <option
+            key={ i }
+            value={ i }
+          >{ i }</option>
+        ));
+      }
+
+      return (
+        <select
+          name={ `${this.props.name}[day]` }
+          value={ this.props.day }
+          onChange={ this.props.onValueChange }
+        >
+          { days }
+        </select>
+      );
+    }
+  }
+
+  class FormFieldDate extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        year: '',
+        month: '',
+        day: ''
+      }
+    }
+    componentDidMount() {
+      this.extractDateParts();
+    }
+    componentDidUpdate(prevProps, prevState) {
+      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()
+        : '';
+
+      if(value === '') {
+        return;
+      }
+
+      const dateTime = Moment(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];
+
+        let value = ~~(e.target.value);
+
+        this.setState({
+          [`${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>
+      );
+    }
+  };
+
+  return FormFieldDate;
+});

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

@@ -5,7 +5,8 @@ define([
   'form/fields/select.jsx',
   'form/fields/radio.jsx',
   'form/fields/checkbox.jsx',
-  'form/fields/selection.jsx'
+  'form/fields/selection.jsx',
+  'form/fields/date.jsx',
 ],
 function(
   React,
@@ -14,7 +15,8 @@ function(
   FormFieldSelect,
   FormFieldRadio,
   FormFieldCheckbox,
-  FormFieldSelection
+  FormFieldSelection,
+  FormFieldDate
 ) {
   var FormField = React.createClass({
     renderField: function(data, inline = false) {
@@ -55,6 +57,14 @@ function(
         case 'selection':
           field = (<FormFieldSelection {...data} />);
         break;
+
+        case 'date':
+          field = (<FormFieldDate {...data} />);
+        break;
+
+        case 'reactComponent':
+          field = (<data.field.component {...data} />);
+        break;
       }
 
       if(inline === true) {
@@ -66,10 +76,10 @@ function(
         );
       } else {
         return (
-          <p key={ 'field-' + (data.index || 0) }>
+          <div key={ 'field-' + (data.index || 0) }>
             { field }
             { description }
-          </p>
+          </div>
         );
       }
     },
@@ -115,4 +125,4 @@ function(
   });
 
   return FormField;
-});
+});

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

@@ -4,13 +4,15 @@ define([
 function(
   React
 ) {
-  var FormFieldRadio = React.createClass({
+  const FormFieldRadio = React.createClass({
     render: function() {
-      var selected_value = this.props.item[this.props.field.name];
-      var count = Object.keys(this.props.field.values).length;
+      if (this.props.field.values === undefined) {
+        return false;
+      }
 
-      var options = Object.keys(this.props.field.values).map(
-        function(value, index) {
+      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>
@@ -20,11 +22,11 @@ function(
                   value={ value }
                   onChange={ this.props.onValueChange }
                   name={ this.props.field.name } />
-                &nbsp;{ this.props.field.values[value] }
+                { this.props.field.values[value] }
               </label>
             </p>
           );
-        }.bind(this)
+        }
       );
 
       return (

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

@@ -1,34 +1,76 @@
-define([
-  'react'
-],
-function(
-  React
-) {
-  var FormFieldSelect = React.createClass({
-    render: function() {
-      var options =
-        Object.keys(this.props.field.values).map(function(value, index) {
-          return (
-            <option
-              key={ 'option-' + index }
-              value={ value }>
-              { this.props.field.values[value] }
-            </option>
-          );
-        }.bind(this)
-      );
+import React from 'react'
+import _ from 'underscore'
 
-      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 }>
-          {options}
-        </select>
+const FormFieldSelect = React.createClass({
+  render() {
+    if (this.props.field.values === undefined) {
+      return false;
+    }
+
+    let filter = false;
+    let placeholder = false;
+    let sortBy = false;
+
+    if (this.props.field.placeholder !== undefined) {
+      placeholder = (
+        <option value="">{ this.props.field.placeholder }</option>
       );
     }
-  });
 
-  return FormFieldSelect;
-});
+    if (this.props.field['filter'] !== undefined) {
+      filter = this.props.field.filter;
+    }
+
+    if (_.isFunction(this.props.field.sortBy)) {
+      sortBy = this.props.field.sortBy;
+    }
+
+    let keys;
+    if (sortBy) {
+      // Extract keys from sorted [key, value] select value pairs, sorted by
+      // provided sorting order.
+      keys =
+        _.map(
+          _.sortBy(
+            _.pairs(this.props.field.values),
+            (item) => sortBy(item[0], item[1])
+          ),
+          (item) => item[0]
+        );
+    } else {
+      keys = Object.keys(this.props.field.values)
+    }
+
+    const options = keys.map(
+      (value, index) => {
+
+        if (filter !== false && filter(this.props.item, value) === false) {
+          return;
+        }
+
+        return (
+          <option
+            key={ 'option-' + index }
+            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 }
+        {...this.props.field.validation}
+      >
+        {placeholder}
+        {options}
+      </select>
+    );
+  }
+});
+
+module.exports = FormFieldSelect;

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

@@ -13,32 +13,45 @@ function(
     getInitialState: function() {
       return {
         items: [],
-        initialized: false
-      }
+        select2: false
+      };
+    },
+    componentWillMount: function() {
+      this.loadCachedItems();
+    },
+    allowMultipleValues: function() {
+      return (this.props.field.multiple === true);
+    },
+    isSelect2Initialized: function() {
+      return (this.state.select2 === true);
     },
     componentDidMount: function() {
-      this.loadCachedItems();
-      this.setupSelect2();
+      if(this.allowMultipleValues()) {
+        this.setupSelect2();
+      }
     },
     componentDidUpdate: function(prevProps, prevState) {
       if(
         (this.props.item !== undefined && prevProps.item !== undefined)
         && (this.props.item.id !== prevProps.item.id)
       ) {
-        jQuery('#'+this.refs.select.id).select2(
-          'val',
-          this.props.item[this.props.field.name]
-        );
+        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');
       }
-
-      this.setupSelect2();
     },
     setupSelect2: function() {
-      if(
-          !this.props.field.multiple
-          || this.state.initialized === true
-          || this.refs.select === undefined
-        ) {
+      if(this.isSelect2Initialized()) {
         return;
       }
 
@@ -48,23 +61,44 @@ function(
           if(item.element && item.element.selected) {
             return null;
           } else {
-            return item.text;
+            if(item.title) {
+              return item.title;
+            } else {
+              return item.text;
+            }
           }
         }
       });
 
-      select2.on('change', this.handleChange);
-      select2.select2(
-        'val',
-        this.props.item[this.props.field.name]
-      );
+      var hasRemoved = false;
+      select2.on('select2:unselecting', function(e) {
+        hasRemoved = true;
+      });
+      select2.on('select2:opening', function(e) {
+        if(hasRemoved === true) {
+          hasRemoved = false;
+          e.preventDefault();
+        }
+      });
 
-      this.setState({ initialized: true });
+      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) {
+        return this.props.item[this.props.field.name];
+      } else {
+        return null;
+      }
     },
     loadCachedItems: function() {
       if(typeof(window['mailpoet_'+this.props.field.endpoint]) !== 'undefined') {
         var items = window['mailpoet_'+this.props.field.endpoint];
 
+
         if(this.props.field['filter'] !== undefined) {
           items = items.filter(this.props.field.filter);
         }
@@ -77,7 +111,7 @@ function(
     handleChange: function(e) {
       if(this.props.onValueChange !== undefined) {
         if(this.props.field.multiple) {
-          value = jQuery('#'+this.refs.select.id).select2('val');
+          value = jQuery('#'+this.refs.select.id).val();
         } else {
           value = e.target.value;
         }
@@ -88,38 +122,54 @@ function(
           }
         });
       }
-      return true;
+    },
+    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;
     },
     render: function() {
-      var options = this.state.items.map(function(item, index) {
+      const options = this.state.items.map((item, index) => {
+        let label = this.getLabel(item);
+        let searchLabel = this.getSearchLabel(item);
+        let value = this.getValue(item);
+
         return (
           <option
-            key={ item.id }
-            value={ item.id }
+            key={ 'option-'+index }
+            value={ value }
+            title={ searchLabel }
           >
-            { item.name }
+            { label }
           </option>
         );
       });
 
-      var default_value = (
-        (this.props.item !== undefined && this.props.field.name !== undefined)
-        ? this.props.item[this.props.field.name]
-        : null
-      );
-
       return (
         <select
           id={ this.props.field.id || this.props.field.name }
           ref="select"
-          placeholder={ this.props.field.placeholder }
+          data-placeholder={ this.props.field.placeholder }
           multiple={ this.props.field.multiple }
-          onChange={ this.handleChange }
-          defaultValue={ default_value }
+          defaultValue={ this.getSelectedValues() }
+          {...this.props.field.validation}
         >{ options }</select>
       );
     }
   });
 
   return Selection;
-});
+});

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

@@ -1,29 +1,35 @@
-define([
-  'react'
-],
-function(
-  React
-) {
-  var FormFieldText = React.createClass({
-    render: function() {
-      return (
-        <input
-          type="text"
-          className={ (this.props.field.size) ? '' : 'regular-text' }
-          size={
-            (this.props.field.size !== 'auto' && this.props.field.size > 0)
-            ? this.props.field.size
-            : false
-          }
-          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 } />
-      );
-    }
-  });
+import React from 'react'
 
-  return FormFieldText;
-});
+const FormFieldText = React.createClass({
+  render() {
+    let value = this.props.item[this.props.field.name];
+    if (value === undefined) {
+      value = this.props.field.defaultValue || '';
+    }
+
+    return (
+      <input
+        type="text"
+        disabled={
+          (this.props.field['disabled'] !== undefined)
+          ? this.props.field.disabled(this.props.item)
+          : false
+        }
+        className={ (this.props.field.size) ? '' : 'regular-text' }
+        size={
+          (this.props.field.size !== 'auto' && this.props.field.size > 0)
+          ? 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 }
+        {...this.props.field.validation}
+      />
+    );
+  }
+});
+
+module.exports = FormFieldText;

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

@@ -15,7 +15,9 @@ function(
           value={ this.props.item[this.props.field.name] }
           placeholder={ this.props.field.placeholder }
           defaultValue={ this.props.field.defaultValue }
-          onChange={ this.props.onValueChange } />
+          onChange={ this.props.onValueChange }
+          {...this.props.field.validation}
+        />
       );
     }
   });

assets/js/src/form/form.jsx

@@ -13,10 +13,16 @@ define(
     Router,
     FormField
   ) {
+
     var Form = React.createClass({
-      mixins: [
-        Router.History
-      ],
+      contextTypes: {
+        router: React.PropTypes.object.isRequired
+      },
+      getDefaultProps: function() {
+        return {
+          params: {},
+        };
+      },
       getInitialState: function() {
         return {
           loading: false,
@@ -24,10 +30,20 @@ define(
           item: {}
         };
       },
+      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.props.params.id !== undefined) {
-          if(this.isMounted()) {
+        if(this.isMounted()) {
+          if(this.props.params.id !== undefined) {
             this.loadItem(this.props.params.id);
+          } else {
+            this.setState({
+              item: jQuery('.mailpoet_form').serializeObject()
+            });
           }
         }
       },
@@ -37,7 +53,9 @@ define(
             loading: false,
             item: {}
           });
-          this.refs.form.reset();
+          if (props.item === undefined) {
+            this.refs.form.reset();
+          }
         } else {
           this.loadItem(props.params.id);
         }
@@ -48,14 +66,14 @@ define(
         MailPoet.Ajax.post({
           endpoint: this.props.endpoint,
           action: 'get',
-          data: { id: id }
+          data: id
         }).done(function(response) {
           if(response === false) {
             this.setState({
               loading: false,
               item: {}
             }, function() {
-              this.history.pushState(null, '/new');
+              this.context.router.push('/new');
             }.bind(this));
           } else {
             this.setState({
@@ -68,14 +86,26 @@ define(
       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
-        item = {};
+        var item = {};
         this.props.fields.map(function(field) {
-          item[field.name] = this.state.item[field.name];
+          if(field['fields'] !== undefined) {
+            field.fields.map(function(subfield) {
+              item[subfield.name] = this.state.item[subfield.name];
+            }.bind(this));
+          } else {
+            item[field.name] = this.state.item[field.name];
+          }
         }.bind(this));
-
         // set id if specified
         if(this.props.params.id !== undefined) {
           item.id = this.props.params.id;
@@ -92,7 +122,7 @@ define(
             if(this.props.onSuccess !== undefined) {
               this.props.onSuccess();
             } else {
-              this.history.pushState(null, '/')
+              this.context.router.push('/');
             }
 
             if(this.props.params.id !== undefined) {
@@ -110,19 +140,23 @@ define(
         }.bind(this));
       },
       handleValueChange: function(e) {
-        var item = this.state.item,
-          field = e.target.name;
+        if (this.props.onChange) {
+          return this.props.onChange(e);
+        } else {
+          var item = this.state.item,
+            field = e.target.name;
 
-        item[field] = e.target.value;
+          item[field] = e.target.value;
 
-        this.setState({
-          item: item
-        });
-        return true;
+          this.setState({
+            item: item
+          });
+          return true;
+        }
       },
       render: function() {
-        if(this.state.errors !== undefined) {
-          var errors = this.state.errors.map(function(error, index) {
+        if(this.getErrors() !== undefined) {
+          var errors = this.getErrors().map(function(error, index) {
             return (
               <p key={ 'error-'+index } className="mailpoet_error">
                 { error }
@@ -133,14 +167,25 @@ define(
 
         var formClasses = classNames(
           'mailpoet_form',
-          { 'mailpoet_form_loading': this.state.loading }
+          { 'mailpoet_form_loading': this.state.loading || this.props.loading }
         );
 
+        var beforeFormContent = false;
+        var afterFormContent = false;
+
+        if (this.props.beforeFormContent !== undefined) {
+          beforeFormContent = this.props.beforeFormContent(this.getValues());
+        }
+
+        if (this.props.afterFormContent !== undefined) {
+          afterFormContent = this.props.afterFormContent(this.getValues());
+        }
+
         var fields = this.props.fields.map(function(field, i) {
           return (
             <FormField
               field={ field }
-              item={ this.state.item }
+              item={ this.getValues() }
               onValueChange={ this.handleValueChange }
               key={ 'field-'+i } />
           );
@@ -154,36 +199,40 @@ define(
             <input
               className="button button-primary"
               type="submit"
-              value="Save"
+              value={MailPoet.I18n.t('save')}
               disabled={this.state.loading} />
           );
         }
 
         return (
-          <form
-            id={ this.props.id }
-            ref="form"
-            className={ formClasses }
-            onSubmit={
-              (this.props.onSubmit !== undefined)
-              ? this.props.onSubmit
-              : this.handleSubmit
-            }
-          >
-            { errors }
+          <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>
+              <table className="form-table">
+                <tbody>
+                  {fields}
+                </tbody>
+              </table>
 
-            { actions }
-          </form>
+              { actions }
+            </form>
+            { afterFormContent }
+          </div>
         );
       }
     });
 
     return Form;
   }
-);
+);