Bump up release version to 0.0.35

API refactor

RoboFile.php

@@ -89,14 +89,14 @@ 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__
     );
@@ -108,11 +108,12 @@ class RoboFile extends \Robo\Tasks {
     $this->_exec('vendor/bin/codecept run unit -f '.(($file) ? $file : ''));
   }
 
-  function testCoverage() {
+  function testCoverage($file = null) {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build');
     $this->_exec(join(' ', array(
       'vendor/bin/codecept run',
+      (($file) ? $file : ''),
       '--coverage',
       '--coverage-html'
     )));
@@ -122,7 +123,7 @@ class RoboFile extends \Robo\Tasks {
     $this->compileJs();
 
     $this->_exec(join(' ', array(
-      './node_modules/mocha/bin/mocha',
+      './node_modules/.bin/mocha',
       '-r tests/javascript/mochaTestHelper.js',
       'tests/javascript/testBundles/**/*.js'
     )));
@@ -140,8 +141,28 @@ class RoboFile extends \Robo\Tasks {
     $this->_exec('vendor/bin/codecept run -g failed');
   }
 
+  function qaLint() {
+    $this->_exec('./tasks/php_lint.sh lib/ tests/');
+  }
+
+  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,6 +1,7 @@
 @import 'nib'
 
 @require 'select2/dist/css/select2.css'
+@require 'datepicker/datepicker'
 
 @require 'common'
 @require 'modal'
@@ -8,6 +9,8 @@
 
 @require 'form_editor'
 @require 'listing'
+@require 'listing/newsletters'
+
 @require 'box'
 @require 'breadcrumb'
 
@@ -17,3 +20,5 @@
 
 @require 'settings'
 @require 'progress_bar'
+
+@require 'subscribers'

assets/css/src/box.styl

@@ -27,13 +27,12 @@
 
   img
     min-width: 150px
-    min-height: 150px
     height: auto
     width: 110%
     position: relative
-    top: 0
+    top: 50%
     left: 50%
-    transform: translate(-50%, 0%)
+    transform: translate(-50%, -50%)
 
   .mailpoet_overlay
     position: absolute

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

@@ -563,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/listing/newsletters.styl

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

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

@@ -46,6 +46,7 @@ $master-column-tool-width = 24px
       opacity: 0
       overflow: hidden
       display: block
+      margin: 0
 
     .mailpoet_delete_block_activated
       width: auto
@@ -125,7 +126,6 @@ $master-column-tool-width = 24px
   border-radius(3px)
   background-color: $warning-background-color
   padding: 3px 5px
-  line-height: 1.2em
 
   .mailpoet_delete_block_activate
     overflow: hidden

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'

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

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

@@ -21,3 +21,9 @@
 
 .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 > *

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/social.styl

@@ -1,4 +1,4 @@
-$social-block-vertical-padding = 11px
+$social-block-vertical-padding = 0px
 
 $social-icon-width = 32px
 $active-social-icon-set-border-color = #adadad

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)
 
@@ -133,3 +133,17 @@ body
 .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/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/public.styl

@@ -2,3 +2,13 @@
 
 @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/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/cron.jsx

@@ -48,28 +48,22 @@ define(
       })
       .done(function(response) {
         if(!response.result) {
-          MailPoet.Notice.error(MailPoetI18n.daemonControlError);
+          MailPoet.Notice.error(MailPoet.I18n.t('daemonControlError'));
         }
       }.bind(this));
     },
     render: function() {
       if(this.state.status === 'loading') {
-        return(<div>Loading daemon status...</div>);
+        return(<div>{MailPoet.I18n.t('loadingDaemonStatus')}</div>);
       }
       switch(this.state.status) {
         case 'started':
           return(
             <div>
-              Cron daemon is running.
+              {MailPoet.I18n.t('cronDaemonIsRunning')}
               <br/>
               <br/>
-              It was started
-              <strong> {this.state.timeSinceStart} </strong> and last executed
-              <strong> {this.state.timeSinceUpdate} </strong> for a total of
-              <strong> {this.state.counter} </strong> times (once every 30 seconds, unless it was interrupted and restarted).
-              <br />
-              <br />
-              <a href="#" className="button-primary" onClick={this.controlCron.bind(null, 'stop')}>Stop</a>
+              <a href="#" className="button-primary" onClick={this.controlCron.bind(null, 'stop')}>{MailPoet.I18n.t('stop')}</a>
             </div>
           );
         break;
@@ -77,17 +71,17 @@ define(
         case 'stopping':
           return(
             <div>
-              Daemon is {this.state.status}
+              {MailPoet.I18n.t('cronDaemonState').replace('%$1s', this.state.status)}
             </div>
           );
         break;
         case 'stopped':
           return(
             <div>
-              Daemon is {this.state.status}
+              {MailPoet.I18n.t('cronDaemonState').replace('%$1s', this.state.status)}
               <br />
               <br />
-              <a href="#" className="button-primary" onClick={this.controlCron.bind(null, 'start')}>Start</a>
+              <a href="#" className="button-primary" onClick={this.controlCron.bind(null, 'start')}>{MailPoet.I18n.t('start')}</a>
             </div>
           );
         break;
@@ -103,4 +97,4 @@ define(
       container
     );
   }
-});
+});

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

@@ -6,14 +6,19 @@ function(
 ) {
   const FormFieldCheckbox = React.createClass({
     onValueChange: function(e) {
-      e.target.value = this.refs.checkbox.checked ? '1' : '';
+      e.target.value = this.refs.checkbox.checked ? '1' : '0';
       return this.props.onValueChange(e);
     },
     render: function() {
-      const isChecked = !!(this.props.item[this.props.field.name]);
+      if (this.props.field.values === undefined) {
+        return false;
+      }
 
+      // 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(
-        function(value, index) {
+        (value, index) => {
           return (
             <p key={ 'checkbox-' + index }>
               <label>
@@ -29,7 +34,7 @@ function(
               </label>
             </p>
           );
-        }.bind(this)
+        }
       );
 
       return (

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

@@ -9,6 +9,13 @@ define([
     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((
@@ -20,7 +27,7 @@ define([
       }
       return (
         <select
-          name={ this.props.name + '[year]' }
+          name={ `${this.props.name}[year]` }
           value={ this.props.year }
           onChange={ this.props.onValueChange }
         >
@@ -33,6 +40,13 @@ define([
   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
@@ -43,7 +57,7 @@ define([
       }
       return (
         <select
-          name={ this.props.name + '[month]' }
+          name={ `${this.props.name}[month]` }
           value={ this.props.month }
           onChange={ this.props.onValueChange }
         >
@@ -56,6 +70,13 @@ define([
   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
@@ -67,7 +88,7 @@ define([
 
       return (
         <select
-          name={ this.props.name + '[day]' }
+          name={ `${this.props.name}[day]` }
           value={ this.props.day }
           onChange={ this.props.onValueChange }
         >
@@ -81,47 +102,99 @@ define([
     constructor(props) {
       super(props);
       this.state = {
-        year: Moment().year(),
-        month: 1,
-        day: 1
+        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.extractTimeStamp();
+        this.extractDateParts();
       }
     }
-    extractTimeStamp() {
-      const timeStamp = parseInt(this.props.item[this.props.field.name], 10);
+    extractDateParts() {
+      const value = (this.props.item[this.props.field.name] !== undefined)
+        ? this.props.item[this.props.field.name].trim()
+        : '';
+
+      if(value === '') {
+        return;
+      }
+
+      const dateType = this.props.field.params.date_type;
+      const dateParts = value.split('-');
+      let year = '';
+      let month = '';
+      let day = '';
+
+      switch(dateType) {
+        case 'year_month_day':
+          year = ~~(dateParts[0]);
+          month = ~~(dateParts[1]);
+          day = ~~(dateParts[2]);
+        break;
+
+        case 'year_month':
+          year = ~~(dateParts[0]);
+          month = ~~(dateParts[1]);
+        break;
+
+        case 'month':
+          month = ~~(dateParts[0]);
+        break;
+
+        case 'year':
+          year = ~~(dateParts[0]);
+        break;
+      }
 
       this.setState({
-        year: Moment.unix(timeStamp).year(),
-        // Moment returns the month as [0..11]
-        // We increment it to match PHP's mktime() which expects [1..12]
-        month: Moment.unix(timeStamp).month() + 1,
-        day: Moment.unix(timeStamp).date()
+        year: year,
+        month: month,
+        day: day
       });
     }
-    updateTimeStamp(field) {
-      let newTimeStamp = Moment(
-        `${this.state.month}/${this.state.day}/${this.state.year}`,
-        'M/D/YYYY'
-      ).valueOf();
-      if (!isNaN(newTimeStamp) && parseInt(newTimeStamp, 10) > 0) {
-        // convert milliseconds to seconds
-        newTimeStamp /= 1000;
-        return this.props.onValueChange({
-          target: {
-            name: field,
-            value: newTimeStamp
-          }
-        });
+    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
@@ -133,35 +206,40 @@ define([
         field = matches[1];
         property = matches[2];
 
-        let value = parseInt(e.target.value, 10);
+        let value = ~~(e.target.value);
 
         this.setState({
           [`${property}`]: value
         }, () => {
-          this.updateTimeStamp(field);
+          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 = dateType.split('_');
+      const dateSelects = dateFormats[dateType][0].split('/');
 
       const fields = dateSelects.map(type => {
         switch(type) {
-          case 'year':
+          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 'month':
+          case 'mm':
             return (<FormFieldDateMonth
               onValueChange={ this.onValueChange.bind(this) }
               ref={ 'month' }
@@ -169,16 +247,18 @@ define([
               name={ this.props.field.name }
               month={ this.state.month }
               monthNames={ monthNames }
+              placeholder={ this.props.field.month_placeholder }
             />);
           break;
 
-          case 'day':
+          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;
         }

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

@@ -61,6 +61,10 @@ function(
         case 'date':
           field = (<FormFieldDate {...data} />);
         break;
+
+        case 'reactComponent':
+          field = (<data.field.component {...data} />);
+        break;
       }
 
       if(inline === true) {
@@ -121,4 +125,4 @@ function(
   });
 
   return FormField;
-});
+});

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

@@ -4,12 +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];
+      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>
@@ -23,7 +26,7 @@ function(
               </label>
             </p>
           );
-        }.bind(this)
+        }
       );
 
       return (

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

@@ -1,36 +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 }
-          {...this.props.field.validation}
-        >
-          {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,12 +13,22 @@ 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(
@@ -26,16 +36,22 @@ function(
         && (this.props.item.id !== prevProps.item.id)
       ) {
         jQuery('#'+this.refs.select.id)
-          .val(this.props.item[this.props.field.name])
+          .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.props.field.multiple
-          || this.state.initialized === true
-          || this.refs.select === undefined
-        ) {
+      if(this.isSelect2Initialized()) {
         return;
       }
 
@@ -45,7 +61,11 @@ function(
           if(item.element && item.element.selected) {
             return null;
           } else {
-            return item.text;
+            if(item.title) {
+              return item.title;
+            } else {
+              return item.text;
+            }
           }
         }
       });
@@ -63,17 +83,22 @@ function(
 
       select2.on('change', this.handleChange);
 
-      select2.select2(
-        'val',
-        this.props.item[this.props.field.name]
-      );
-
-      this.setState({ initialized: true });
+      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);
         }
@@ -98,31 +123,48 @@ function(
         });
       }
     },
+    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"
           data-placeholder={ this.props.field.placeholder }
           multiple={ this.props.field.multiple }
-          defaultValue={ default_value }
+          defaultValue={ this.getSelectedValues() }
           {...this.props.field.validation}
         >{ options }</select>
       );
@@ -130,4 +172,4 @@ function(
   });
 
   return Selection;
-});
+});

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

@@ -1,33 +1,35 @@
-define([
-  'react'
-],
-function(
-  React
-) {
-  var FormFieldText = React.createClass({
-    render: function() {
-      var value = this.props.item[this.props.field.name];
-      if(!value) { value = null; }
-      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={ value }
-          placeholder={ this.props.field.placeholder }
-          defaultValue={ this.props.field.defaultValue }
-          onChange={ this.props.onValueChange }
-          {...this.props.field.validation}
-        />
-      );
-    }
-  });
+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/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);
         }
@@ -55,7 +73,7 @@ define(
               loading: false,
               item: {}
             }, function() {
-              this.history.pushState(null, '/new');
+              this.context.router.push('/new');
             }.bind(this));
           } else {
             this.setState({
@@ -88,7 +106,6 @@ define(
             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;
@@ -105,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) {
@@ -123,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 }
@@ -146,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 } />
           );
@@ -167,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;
   }
-);
+);

assets/js/src/form_editor/form_editor.js

@@ -402,11 +402,30 @@ var WysijaForm = {
       }
     });
 
-    // hide list selection if a list widget has been dragged into the editor
-    $('mailpoet_settings_segment_selection')[
-      (($$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]').length > 0) === true)
-      ? 'hide' : 'show'
-    ]();
+    var hasSegmentSelection = WysijaForm.hasSegmentSelection();
+
+    if(hasSegmentSelection) {
+      $('mailpoet_form_segments').writeAttribute('required', false).disable();
+      $('mailpoet_settings_segment_selection').hide();
+    } else {
+      $('mailpoet_form_segments').writeAttribute('required', true).enable();
+      $('mailpoet_settings_segment_selection').show();
+    }
+  },
+  hasSegmentSelection: function() {
+    return ($$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]').length > 0);
+  },
+  isSegmentSelectionValid: function() {
+    var segment_selection = $$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]')[0];
+    if(segment_selection !== undefined) {
+      var block = WysijaForm.get(segment_selection).block.getData();
+      return (
+        (block.params.values !== undefined)
+        &&
+        (block.params.values.length > 0)
+      );
+    }
+    return false;
   },
   setBlockPositions: function(event, target) {
     // release dragging lock

assets/js/src/forms/forms.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Router, Route, IndexRoute } from 'react-router'
+import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
+import { createHashHistory } from 'history'
 import FormList from 'forms/list.jsx'
-import createHashHistory from 'history/lib/createHashHistory'
 
-let history = createHashHistory({ queryKey: false })
+const history = useRouterHistory(createHashHistory)({ queryKey: false });
 
 const App = React.createClass({
   render() {
@@ -12,7 +12,7 @@ const App = React.createClass({
   }
 });
 
-let container = document.getElementById('forms_container');
+const container = document.getElementById('forms_container');
 
 if(container) {
   ReactDOM.render((

assets/js/src/forms/list.jsx

@@ -8,100 +8,100 @@ import MailPoet from 'mailpoet'
 const columns = [
   {
     name: 'name',
-    label: 'Name',
+    label: MailPoet.I18n.t('formName'),
     sortable: true
   },
   {
     name: 'segments',
-    label: 'Lists',
-    sortable: false
+    label: MailPoet.I18n.t('segments')
   },
   {
     name: 'created_at',
-    label: 'Created on',
+    label: MailPoet.I18n.t('createdOn'),
     sortable: true
   }
 ];
 
 const messages = {
   onTrash: function(response) {
-    if(response) {
-      let message = null;
-      if(~~response === 1) {
-        message = (
-          '1 form was moved to the trash.'
-        );
-      } else if(~~response > 1) {
-        message = (
-          '%$1d forms were moved to the trash.'
-        ).replace('%$1d', ~~response);
-      }
+    var count = ~~response;
+    var message = null;
 
-      if(message !== null) {
-        MailPoet.Notice.success(message);
-      }
+    if(count === 1) {
+      message = (
+        MailPoet.I18n.t('oneFormTrashed')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleFormsTrashed')
+      ).replace('%$1d', count);
     }
+    MailPoet.Notice.success(message);
   },
   onDelete: function(response) {
-    if(response) {
-      let message = null;
-      if(~~response === 1) {
-        message = (
-          '1 form was permanently deleted.'
-        );
-      } else if(~~response > 1) {
-        message = (
-          '%$1d forms were permanently deleted.'
-        ).replace('%$1d', ~~response);
-      }
+    var count = ~~response;
+    var message = null;
 
-      if(message !== null) {
-        MailPoet.Notice.success(message);
-      }
+    if(count === 1) {
+      message = (
+        MailPoet.I18n.t('oneFormDeleted')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleFormsDeleted')
+      ).replace('%$1d', count);
     }
+    MailPoet.Notice.success(message);
   },
   onRestore: function(response) {
-    if(response) {
-      let message = null;
-      if(~~response === 1) {
-        message = (
-          '1 form has been restored from the trash.'
-        );
-      } else if(~~response > 1) {
-        message = (
-          '%$1d forms have been restored from the trash.'
-        ).replace('%$1d', ~~response);
-      }
+    var count = ~~response;
+    var message = null;
 
-      if(message !== null) {
-        MailPoet.Notice.success(message);
-      }
+    if(count === 1) {
+      message = (
+        MailPoet.I18n.t('oneFormRestored')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleFormsRestored')
+      ).replace('%$1d', count);
     }
+    MailPoet.Notice.success(message);
   }
 };
 
+const bulk_actions = [
+  {
+    name: 'trash',
+    label: MailPoet.I18n.t('trash'),
+    onSuccess: messages.onTrash
+  }
+];
+
 const item_actions = [
   {
     name: 'edit',
-    label: 'Edit',
+    label: MailPoet.I18n.t('edit'),
     link: function(item) {
       return (
-        <a href={ `admin.php?page=mailpoet-form-editor&id=${item.id}` }>Edit</a>
+        <a href={ `admin.php?page=mailpoet-form-editor&id=${item.id}` }>{MailPoet.I18n.t('edit')}</a>
       );
     }
   },
   {
-    name: 'duplicate_form',
-    label: 'Duplicate',
+    name: 'duplicate',
+    label: MailPoet.I18n.t('duplicate'),
     onClick: function(item, refresh) {
       return MailPoet.Ajax.post({
         endpoint: 'forms',
         action: 'duplicate',
         data: item.id
       }).done(function(response) {
-        MailPoet.Notice.success(
-          ('Form "%$1s" has been duplicated.').replace('%$1s', response.name)
-        );
+        if (response !== false && response['name'] !== undefined) {
+          MailPoet.Notice.success(
+            (MailPoet.I18n.t('formDuplicated')).replace('%$1s', response.name)
+          );
+        }
         refresh();
       });
     }
@@ -111,14 +111,6 @@ const item_actions = [
   }
 ];
 
-const bulk_actions = [
-  {
-    name: 'trash',
-    label: 'Trash',
-    onSuccess: messages.onTrash
-  }
-];
-
 const FormList = React.createClass({
   createForm() {
     MailPoet.Ajax.post({
@@ -147,15 +139,18 @@ const FormList = React.createClass({
       <div>
         <td className={ row_classes }>
           <strong>
-            <a>{ form.name }</a>
+            <a
+              className="row-title"
+              href={ `admin.php?page=mailpoet-form-editor&id=${form.id}` }
+            >{ form.name }</a>
           </strong>
           { actions }
         </td>
-        <td className="column-format" data-colname="Lists">
+        <td className="column-format" data-colname={MailPoet.I18n.t('segments')}>
           { segments }
         </td>
-        <td className="column-date" data-colname="Created on">
-          <abbr>{ form.created_at }</abbr>
+        <td className="column-date" data-colname={MailPoet.I18n.t('createdOn')}>
+          <abbr>{ MailPoet.Date.format(form.created_at) }</abbr>
         </td>
       </div>
     );
@@ -163,20 +158,20 @@ const FormList = React.createClass({
   render() {
     return (
       <div>
-        <h2 className="title">
-          Forms <a
-            className="add-new-h2"
+        <h1 className="title">
+          {MailPoet.I18n.t('pageTitle')} <a
+            className="page-title-action"
             href="javascript:;"
             onClick={ this.createForm }
-          >New</a>
-        </h2>
+          >{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={ 1000 }
           endpoint="forms"
           onRenderItem={ this.renderItem }
           columns={ columns }
@@ -188,4 +183,4 @@ const FormList = React.createClass({
   }
 });
 
-module.exports = FormList;
+module.exports = FormList;

assets/js/src/handlebars_helpers.js

@@ -140,5 +140,20 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       return parseInt(string, 10);
   });
 
+  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");
+      case 'Georgia': return new Handlebars.SafeString("Georgia, Times, 'Times New Roman', serif");
+      case 'Lucida': return new Handlebars.SafeString("'Lucida Sans Unicode', 'Lucida Grande', sans-serif");
+      case 'Tahoma': return new Handlebars.SafeString("Tahoma, Verdana, Segoe, sans-serif");
+      case 'Times New Roman': return new Handlebars.SafeString("'Times New Roman', Times, Baskerville, Georgia, serif");
+      case 'Trebuchet MS': return new Handlebars.SafeString("'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif");
+      case 'Verdana': return new Handlebars.SafeString("Verdana, Geneva, sans-serif");
+      default: return font;
+    }
+  });
+
   window.Handlebars = Handlebars;
 });

assets/js/src/i18n.js

@@ -0,0 +1,25 @@
+define('i18n',
+  [
+    'mailpoet',
+    'underscore',
+  ], function(
+    MailPoet,
+    _
+) {
+  'use strict';
+
+  var translations = {};
+
+  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;
+    }
+  };
+
+});

assets/js/src/iframe.js

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

assets/js/src/listing/bulk_actions.jsx

@@ -1,8 +1,10 @@
 define([
-  'react'
+  'react',
+  'mailpoet'
 ],
 function(
-  React
+  React,
+  MailPoet
 ) {
   var ListingBulkActions = React.createClass({
     getInitialState: function() {
@@ -45,13 +47,13 @@ function(
 
       data.action = this.state.action;
 
-      var callback = function() {};
+      var onSuccess = function() {};
       if(action['onSuccess'] !== undefined) {
-        callback = action.onSuccess;
+        onSuccess = action.onSuccess;
       }
 
       if(data.action) {
-        this.props.onBulkAction(selected_ids, data, callback);
+        this.props.onBulkAction(selected_ids, data).then(onSuccess);
       }
 
       this.setState({
@@ -82,7 +84,7 @@ function(
           <label
             className="screen-reader-text"
             htmlFor="bulk-action-selector-top">
-            Select bulk action
+            {MailPoet.I18n.t('selectBulkAction')}
           </label>
 
           <select
@@ -91,7 +93,7 @@ function(
             value={ this.state.action }
             onChange={this.handleChangeAction}
           >
-            <option value="">Bulk Actions</option>
+            <option value="">{MailPoet.I18n.t('bulkActions')}</option>
             { this.props.bulk_actions.map(function(action, index) {
               return (
                 <option
@@ -104,7 +106,7 @@ function(
           <input
             onClick={ this.handleApplyAction }
             type="submit"
-            defaultValue="Apply"
+            defaultValue={MailPoet.I18n.t('apply')}
             className="button action" />
 
             { this.state.extra }
@@ -114,4 +116,4 @@ function(
   });
 
   return ListingBulkActions;
-});
+});

assets/js/src/listing/filters.jsx

@@ -1,22 +1,26 @@
 define([
   'react',
-  'jquery'
+  'jquery',
+  'mailpoet'
 ],
 function(
   React,
-  jQuery
+  jQuery,
+  MailPoet
 ) {
   var ListingFilters = React.createClass({
     handleFilterAction: function() {
-      let filters = {}
+      let filters = {};
       this.getAvailableFilters().map((filter, i) => {
         filters[this.refs['filter-'+i].name] = this.refs['filter-'+i].value
-      })
+      });
       return this.props.onSelectFilter(filters);
     },
+    handleEmptyTrash: function() {
+      return this.props.onEmptyTrash();
+    },
     getAvailableFilters: function() {
       let filters = this.props.filters;
-
       return Object.keys(filters).filter(function(filter) {
         return !(
           filters[filter].length === 0
@@ -25,26 +29,29 @@ function(
             && !filters[filter][0].value
           )
         );
-      })
+      });
+    },
+    componentDidUpdate: function() {
+      const selected_filters = this.props.filter;
+      const available_filters = this.getAvailableFilters().map(
+        function(filter, i) {
+          if (selected_filters[filter] !== undefined && selected_filters[filter]) {
+            jQuery(this.refs['filter-'+i])
+              .val(selected_filters[filter])
+              .trigger('change');
+          }
+        }.bind(this)
+      );
     },
     render: function() {
       const filters = this.props.filters;
-      const selected_filters = this.props.filter;
-
       const available_filters = this.getAvailableFilters()
         .map(function(filter, i) {
-          let default_value = false;
-          if(selected_filters[filter] !== undefined && selected_filters[filter]) {
-            default_value = selected_filters[filter]
-          } else {
-            jQuery(`select[name="${filter}"]`).val('');
-          }
           return (
             <select
               ref={ `filter-${i}` }
               key={ `filter-${i}` }
               name={ filter }
-              defaultValue={ default_value }
             >
             { filters[filter].map(function(option, j) {
               return (
@@ -58,22 +65,36 @@ function(
           );
       }.bind(this));
 
-      let button = false;
+      let button;
 
-      if(available_filters.length > 0) {
+      if (available_filters.length > 0) {
         button = (
           <input
+            id="post-query-submit"
             onClick={ this.handleFilterAction }
             type="submit"
-            defaultValue="Filter"
+            defaultValue={MailPoet.I18n.t('filter')}
             className="button" />
         );
       }
 
+      let empty_trash;
+      if (this.props.group === 'trash') {
+        empty_trash = (
+          <input
+            onClick={ this.handleEmptyTrash }
+            type="submit"
+            value={MailPoet.I18n.t('emptyTrash')}
+            className="button"
+          />
+        );
+      }
+
       return (
         <div className="alignleft actions actions">
           { available_filters }
           { button }
+          { empty_trash }
         </div>
       );
     }

assets/js/src/listing/groups.jsx

@@ -21,7 +21,7 @@ define(['react', 'classnames'], function(React, classNames) {
                 href="javascript:;"
                 className={classes}
                 onClick={this.handleSelect.bind(this, group.name)} >
-                {group.label} <span className="count">({ group.count })</span>
+                {group.label} <span className="count">({ group.count.toLocaleString() })</span>
               </a>
             </li>
           );

assets/js/src/listing/header.jsx

@@ -1,90 +1,91 @@
-define(['react', 'classnames'], function(React, classNames) {
-
-  var ListingHeader = React.createClass({
-    handleSelectItems: function() {
-      return this.props.onSelectItems(
-        this.refs.toggle.checked
-      );
-    },
-    render: function() {
-      var columns = this.props.columns.map(function(column, index) {
-        column.is_primary = (index === 0);
-        column.sorted = (this.props.sort_by === column.name)
-          ? this.props.sort_order
-          : 'desc';
-        return (
-          <ListingColumn
-            onSort={this.props.onSort}
-            sort_by={this.props.sort_by}
-            key={ 'column-' + index }
-            column={column} />
-        );
-      }.bind(this));
-
-      var checkbox = false;
-
-      if(this.props.is_selectable === true) {
-        checkbox = (
-          <th
-            className="manage-column column-cb check-column">
-            <label className="screen-reader-text">
-              { 'Select All' }
-            </label>
-            <input
-              type="checkbox"
-              name="select_all"
-              ref="toggle"
-              checked={ this.props.selection }
-              onChange={ this.handleSelectItems } />
-          </th>
-        );
-      }
+import MailPoet from 'mailpoet'
+import React from 'react'
+import classNames from 'classnames'
 
+const ListingHeader = React.createClass({
+  handleSelectItems: function() {
+    return this.props.onSelectItems(
+      this.refs.toggle.checked
+    );
+  },
+  render: function() {
+    const columns = this.props.columns.map(function(column, index) {
+      column.is_primary = (index === 0);
+      column.sorted = (this.props.sort_by === column.name)
+        ? this.props.sort_order
+        : 'desc';
       return (
-        <tr>
-          {checkbox}
-          {columns}
-        </tr>
+        <ListingColumn
+          onSort={this.props.onSort}
+          sort_by={this.props.sort_by}
+          key={ 'column-' + index }
+          column={column} />
       );
-    }
-  });
+    }.bind(this));
 
-  var ListingColumn = React.createClass({
-    handleSort: function() {
-      var sort_by = this.props.column.name,
-          sort_order = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
-      this.props.onSort(sort_by, sort_order);
-    },
-    render: function() {
-      var classes = classNames(
-        'manage-column',
-        { 'column-primary': this.props.column.is_primary },
-        { 'sortable': this.props.column.sortable },
-        this.props.column.sorted,
-        { 'sorted': (this.props.sort_by === this.props.column.name) }
-      );
-      var label;
+    let checkbox;
 
-      if(this.props.column.sortable === true) {
-        label = (
-          <a onClick={this.handleSort}>
-            <span>{ this.props.column.label }</span>
-            <span className="sorting-indicator"></span>
-          </a>
-        );
-      } else {
-        label = this.props.column.label;
-      }
-      return (
+    if(this.props.is_selectable === true) {
+      checkbox = (
         <th
-          className={ classes }
-          id={this.props.column.name }
-          scope="col">
-          {label}
+          className="manage-column column-cb check-column">
+          <label className="screen-reader-text">
+            {MailPoet.I18n.t('selectAll')}
+          </label>
+          <input
+            type="checkbox"
+            name="select_all"
+            ref="toggle"
+            checked={ this.props.selection }
+            onChange={ this.handleSelectItems } />
         </th>
       );
     }
-  });
 
-  return ListingHeader;
-});
+    return (
+      <tr>
+        {checkbox}
+        {columns}
+      </tr>
+    );
+  }
+});
+
+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);
+  },
+  render: function() {
+    const classes = classNames(
+      'manage-column',
+      { 'column-primary': this.props.column.is_primary },
+      { 'sortable': this.props.column.sortable },
+      this.props.column.sorted,
+      { 'sorted': (this.props.sort_by === this.props.column.name) }
+    );
+    let label;
+
+    if(this.props.column.sortable === true) {
+      label = (
+        <a onClick={ this.handleSort }>
+          <span>{ this.props.column.label }</span>
+          <span className="sorting-indicator"></span>
+        </a>
+      );
+    } else {
+      label = this.props.column.label;
+    }
+    return (
+      <th
+        className={ classes }
+        id={this.props.column.name }
+        scope="col"
+        width={ this.props.column.width || null }
+      >{label}</th>
+    );
+  }
+});
+
+module.exports = ListingHeader;

assets/js/src/listing/pages.jsx

@@ -1,4 +1,12 @@
-define(['react', 'classnames'], function(React, classNames) {
+define([
+    'react',
+    'classnames',
+    'mailpoet'
+  ], function(
+    React,
+    classNames,
+    MailPoet
+  ) {
 
   var ListingPages = React.createClass({
     getInitialState: function() {
@@ -7,7 +15,11 @@ define(['react', 'classnames'], function(React, classNames) {
       }
     },
     setPage: function(page) {
-      this.props.onSetPage(page);
+      this.setState({
+        page: null
+      }, function () {
+        this.props.onSetPage(this.constrainPage(page));
+      }.bind(this));
     },
     setFirstPage: function() {
       this.setPage(1);
@@ -16,10 +28,14 @@ define(['react', 'classnames'], function(React, classNames) {
       this.setPage(this.getLastPage());
     },
     setPreviousPage: function() {
-      this.setPage(this.constrainPage(this.props.page - 1));
+      this.setPage(this.constrainPage(
+        parseInt(this.props.page, 10) - 1)
+      );
     },
     setNextPage: function() {
-      this.setPage(this.constrainPage(this.props.page + 1));
+      this.setPage(this.constrainPage(
+        parseInt(this.props.page, 10) + 1)
+      );
     },
     constrainPage: function(page) {
       return Math.min(Math.max(1, Math.abs(~~page)), this.getLastPage());
@@ -27,14 +43,16 @@ define(['react', 'classnames'], function(React, classNames) {
     handleSetManualPage: function(e) {
       if(e.which === 13) {
         this.setPage(this.state.page);
-        this.setState({ page: null });
       }
     },
     handleChangeManualPage: function(e) {
       this.setState({
-        page: this.constrainPage(e.target.value)
+        page: e.target.value
       });
     },
+    handleBlurManualPage: function(e) {
+      this.setPage(e.target.value);
+    },
     getLastPage: function() {
       return Math.ceil(this.props.count / this.props.limit);
     },
@@ -62,7 +80,7 @@ define(['react', 'classnames'], function(React, classNames) {
               <a href="javascript:;"
                 onClick={ this.setPreviousPage }
                 className="prev-page">
-                <span className="screen-reader-text">Previous page</span>
+                <span className="screen-reader-text">{MailPoet.I18n.t('previousPage')}</span>
                 <span aria-hidden="true">‹</span>
               </a>
             );
@@ -73,7 +91,7 @@ define(['react', 'classnames'], function(React, classNames) {
               <a href="javascript:;"
                 onClick={ this.setFirstPage }
                 className="first-page">
-                <span className="screen-reader-text">First page</span>
+                <span className="screen-reader-text">{MailPoet.I18n.t('firstPage')}</span>
                 <span aria-hidden="true">«</span>
               </a>
             );
@@ -84,7 +102,7 @@ define(['react', 'classnames'], function(React, classNames) {
               <a href="javascript:;"
                 onClick={ this.setNextPage }
                 className="next-page">
-                <span className="screen-reader-text">Next page</span>
+                <span className="screen-reader-text">{MailPoet.I18n.t('nextPage')}</span>
                 <span aria-hidden="true">›</span>
               </a>
             );
@@ -95,12 +113,17 @@ define(['react', 'classnames'], function(React, classNames) {
               <a href="javascript:;"
                 onClick={ this.setLastPage }
                 className="last-page">
-                <span className="screen-reader-text">Last page</span>
+                <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}
@@ -110,21 +133,22 @@ define(['react', 'classnames'], function(React, classNames) {
               <span className="paging-input">
                 <label
                   className="screen-reader-text"
-                  htmlFor="current-page-selector">Current Page</label>
+                  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="1"
+                  size="2"
                   ref="page"
-                  value={ this.state.page || this.props.page }
+                  value={ pageValue }
                   name="paged"
                   id="current-page-selector"
                   className="current-page" />
-                &nbsp;of&nbsp;
+                &nbsp;{MailPoet.I18n.t('pageOutOf')}&nbsp;
                 <span className="total-pages">
-                  {Math.ceil(this.props.count / this.props.limit)}
+                  {Math.ceil(this.props.count / this.props.limit).toLocaleString()}
                 </span>
               </span>
               &nbsp;
@@ -142,7 +166,9 @@ define(['react', 'classnames'], function(React, classNames) {
 
         return (
           <div className={ classes }>
-            <span className="displaying-num">{ this.props.count } items</span>
+            <span className="displaying-num">{
+              MailPoet.I18n.t('numberOfItems').replace('%$1d', this.props.count.toLocaleString())
+            }</span>
             { pagination }
           </div>
         );
@@ -151,4 +177,4 @@ define(['react', 'classnames'], function(React, classNames) {
   });
 
   return ListingPages;
-});
+});

assets/js/src/listing/search.jsx

@@ -1,4 +1,10 @@
-define(['react'], function(React) {
+define([
+    'mailpoet',
+    'react'
+  ], function(
+    MailPoet,
+    React
+  ) {
 
   var ListingSearch = React.createClass({
     handleSearch: function(e) {
@@ -18,7 +24,7 @@ define(['react'], function(React) {
           <form name="search" onSubmit={this.handleSearch}>
             <p className="search-box">
               <label htmlFor="search_input" className="screen-reader-text">
-                Search
+              {MailPoet.I18n.t('searchLabel')}
               </label>
               <input
                 type="search"
@@ -28,7 +34,7 @@ define(['react'], function(React) {
                 defaultValue={this.props.search} />
               <input
                 type="submit"
-                defaultValue={MailPoetI18n.searchLabel}
+                defaultValue={MailPoet.I18n.t('searchLabel')}
                 className="button" />
             </p>
           </form>

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

@@ -112,7 +112,16 @@ define([
             }
           }
         },
-      }).preventDefault('auto');
+      })
+      .preventDefault('auto')
+      .actionChecker(function (pointer, event, action) {
+        // Disable dragging with right click
+        if (event.button !== 0) {
+          return null;
+        }
+
+        return action;
+      });
 
       if (this.options.drop !== undefined) {
         interactable.getDropModel = this.options.drop;

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

@@ -0,0 +1,23 @@
+/**
+ * Highlight Editing Behavior
+ *
+ * Highlights a block that is being edited
+ */
+define([
+    'backbone.marionette',
+    'newsletter_editor/behaviors/BehaviorsLookup',
+  ], function(Marionette, BehaviorsLookup) {
+
+  BehaviorsLookup.HighlightEditingBehavior = Marionette.Behavior.extend({
+    modelEvents: {
+      'startEditing': 'enableHighlight',
+      'stopEditing': 'disableHighlight',
+    },
+    enableHighlight: function() {
+      this.$el.addClass('mailpoet_highlight');
+    },
+    disableHighlight: function() {
+      this.$el.removeClass('mailpoet_highlight');
+    },
+  });
+});

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

@@ -12,15 +12,57 @@ define([
     'newsletter_editor/blocks/button',
     'newsletter_editor/blocks/divider',
     'newsletter_editor/components/communication',
+    'mailpoet',
+    'backbone.supermodel',
     'underscore',
     'jquery'
-  ], function(App, BaseBlock, ButtonBlock, DividerBlock, CommunicationComponent, _, jQuery) {
+  ], function(
+    App,
+    BaseBlock,
+    ButtonBlock,
+    DividerBlock,
+    CommunicationComponent,
+    MailPoet,
+    SuperModel,
+    _,
+    jQuery
+  ) {
 
   "use strict";
 
   var Module = {},
       base = BaseBlock;
 
+  Module.ALCSupervisor = SuperModel.extend({
+    initialize: function() {
+      this.listenTo(App.getChannel(), 'automatedLatestContentRefresh', this.refresh);
+    },
+    refresh: function() {
+      var models = App.findModels(function(model) {
+        return model.get('type') === 'automatedLatestContent';
+      }) || [];
+
+      if (models.length === 0) return;
+      var blocks = _.map(models, function(model) {
+        return model.toJSON();
+      });
+
+      CommunicationComponent.getBulkTransformedPosts({
+        blocks: blocks,
+      }).then(_.partial(this.refreshBlocks, models));
+    },
+    refreshBlocks: function(models, renderedBlocks) {
+      _.each(
+        _.zip(models, renderedBlocks),
+        function(args) {
+          var model = args[0],
+              contents = args[1];
+          model.trigger('refreshPosts', contents);
+        }
+      );
+    },
+  });
+
   Module.AutomatedLatestContentBlockModel = base.BlockModel.extend({
     stale: ['_container'],
     defaults: function() {
@@ -32,10 +74,10 @@ define([
         inclusionType: 'include', // 'include'|'exclude'
         displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
         titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
-        titlePosition: 'inTextBlock', // 'inTextBlock'|'aboveBlock',
         titleAlignment: 'left', // 'left'|'center'|'right'
         titleIsLink: false, // false|true
-        imagePadded: true, // true|false
+        imageFullWidth: false, // true|false
+        featuredImagePosition: 'belowTitle', // 'aboveTitle'|'belowTitle'|'none'
         //imageAlignment: 'centerPadded', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
         showAuthor: 'no', // 'no'|'aboveText'|'belowText'
         authorPrecededBy: 'Author:',
@@ -62,34 +104,32 @@ define([
     },
     initialize: function() {
       base.BlockView.prototype.initialize.apply(this, arguments);
-      this.fetchPosts();
-      this.on('change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:titlePosition change:titleAlignment change:titleIsLink change:imagePadded change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider', this._scheduleFetchPosts, this);
+      this.on('change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider', this._scheduleFetchPosts, this);
       this.listenTo(this.get('readMoreButton'), 'change', this._scheduleFetchPosts);
       this.listenTo(this.get('divider'), 'change', this._scheduleFetchPosts);
-    },
-    fetchPosts: function() {
-      var that = this;
-      CommunicationComponent.getTransformedPosts(this.toJSON()).done(function(content) {
-        that.get('_container').get('blocks').reset(content, {parse: true});
-        that.trigger('postsChanged');
-      }).fail(function(error) {
-        console.log('ALC fetchPosts error', arguments);
+      this.on('add remove update reset', function(model, collection, options) {
+        App.getChannel().trigger('automatedLatestContentRefresh');
       });
+      this.on('refreshPosts', this.updatePosts, this);
+    },
+    updatePosts: function(posts) {
+      this.get('_container.blocks').reset(posts, {parse: true});
     },
     /**
      * Batch more changes during a specific time, instead of fetching
      * ALC posts on each model change
      */
     _scheduleFetchPosts: function() {
-      var timeout = 2000,
+      var TIMEOUT = 500,
         that = this;
       if (this._fetchPostsTimer !== undefined) {
         clearTimeout(this._fetchPostsTimer);
       }
       this._fetchPostsTimer = setTimeout(function() {
-        that.fetchPosts();
+        //that.fetchPosts();
+        App.getChannel().trigger('automatedLatestContentRefresh');
         that._fetchPostsTimer = undefined;
-      }, timeout);
+      }, TIMEOUT);
     },
   });
 
@@ -114,6 +154,7 @@ define([
         renderOptions = {
           disableTextEditor: true,
           disableDragAndDrop: true,
+          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
         };
       this.toolsView = new Module.AutomatedLatestContentBlockToolsView({ model: this.model });
       this.toolsRegion.show(this.toolsView);
@@ -142,9 +183,9 @@ define([
         "keyup .mailpoet_automated_latest_content_show_amount": _.partial(this.changeField, "amount"),
         "change .mailpoet_automated_latest_content_content_type": _.partial(this.changeField, "contentType"),
         "change .mailpoet_automated_latest_content_include_or_exclude": _.partial(this.changeField, "inclusionType"),
-        "change .mailpoet_automated_latest_content_title_position": _.partial(this.changeField, "titlePosition"),
         "change .mailpoet_automated_latest_content_title_alignment": _.partial(this.changeField, "titleAlignment"),
-        "change .mailpoet_automated_latest_content_image_padded": _.partial(this.changeBoolField, "imagePadded"),
+        "change .mailpoet_automated_latest_content_image_full_width": _.partial(this.changeBoolField, "imageFullWidth"),
+        "change .mailpoet_automated_latest_content_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
         "change .mailpoet_automated_latest_content_show_author": _.partial(this.changeField, "showAuthor"),
         "keyup .mailpoet_automated_latest_content_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
         "change .mailpoet_automated_latest_content_show_categories": _.partial(this.changeField, "showCategories"),
@@ -154,9 +195,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),
@@ -171,6 +209,7 @@ define([
       this.$('.mailpoet_automated_latest_content_categories_and_tags').select2({
         multiple: true,
         allowClear: true,
+        placeholder: MailPoet.I18n.t('categoriesAndTags'),
         ajax: {
           data: function (params) {
             return {
@@ -273,12 +312,15 @@ define([
     },
     changeDisplayType: function(event) {
       var value = jQuery(event.target).val();
+
       if (value == 'titleOnly') {
-        this.$('.mailpoet_automated_latest_content_title_position_container').addClass('mailpoet_hidden');
         this.$('.mailpoet_automated_latest_content_title_as_list').removeClass('mailpoet_hidden');
+        this.$('.mailpoet_automated_latest_content_image_full_width_option').addClass('mailpoet_hidden');
+        this.$('.mailpoet_automated_latest_content_image_separator').addClass('mailpoet_hidden');
       } else {
-        this.$('.mailpoet_automated_latest_content_title_position_container').removeClass('mailpoet_hidden');
         this.$('.mailpoet_automated_latest_content_title_as_list').addClass('mailpoet_hidden');
+        this.$('.mailpoet_automated_latest_content_image_full_width_option').removeClass('mailpoet_hidden');
+        this.$('.mailpoet_automated_latest_content_image_separator').removeClass('mailpoet_hidden');
 
         // Reset titleFormat if it was set to List when switching away from displayType=titleOnly
         if (this.model.get('titleFormat') === 'ul') {
@@ -287,6 +329,12 @@ define([
           this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
         }
       }
+
+      if (value === 'excerpt') {
+        this.$('.mailpoet_automated_latest_content_featured_image_position_container').removeClass('mailpoet_hidden');
+      } else {
+        this.$('.mailpoet_automated_latest_content_featured_image_position_container').addClass('mailpoet_hidden');
+      }
       this.changeField('displayType', event);
     },
     changeTitleFormat: function(event) {
@@ -346,5 +394,10 @@ define([
     });
   });
 
+  App.on('start', function() {
+    App._ALCSupervisor = new Module.ALCSupervisor();
+    App._ALCSupervisor.refresh();
+  });
+
   return Module;
 });

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

@@ -40,6 +40,9 @@ define([
       // Remove stale attributes from resulting JSON object
       return _.omit(SuperModel.prototype.toJSON.call(this), this.stale);
     },
+    getChildren: function() {
+      return [];
+    },
   });
 
   Module.BlockView = AugmentedView.extend({
@@ -77,6 +80,7 @@ define([
           }
         },
       },
+      HighlightEditingBehavior: {},
     },
     templateHelpers: function() {
       return {
@@ -215,8 +219,12 @@ define([
 
   Module.BlockSettingsView = Marionette.LayoutView.extend({
     className: 'mailpoet_editor_settings',
-    initialize: function() {
-      MailPoet.Modal.panel({
+    behaviors: {
+      ColorPickerBehavior: {},
+    },
+    initialize: function(params) {
+      this.model.trigger('startEditing');
+      var panelParams = {
         element: this.$el,
         template: '',
         position: 'right',
@@ -224,7 +232,13 @@ define([
         onCancel: function() {
           this.destroy();
         }.bind(this),
-      });
+      };
+      this.renderOptions = params.renderOptions || {};
+      if (this.renderOptions.displayFormat === 'subpanel') {
+        MailPoet.Modal.subpanel(panelParams);
+      } else {
+        MailPoet.Modal.panel(panelParams);
+      }
     },
     close: function(event) {
       this.destroy();
@@ -253,6 +267,7 @@ define([
     },
     onBeforeDestroy: function() {
       MailPoet.Modal.close();
+      this.model.trigger('stopEditing');
     },
   });
 

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

@@ -32,6 +32,7 @@ define([
             fontColor: '#000000',
             fontFamily: 'Arial',
             fontSize: '16px',
+            fontWeight: 'normal', // 'normal'|'bold'
             textAlign: 'center',
           },
         },
@@ -72,6 +73,7 @@ define([
         "change .mailpoet_field_button_font_size": _.partial(this.changeField, "styles.block.fontSize"),
         "change .mailpoet_field_button_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
         "change .mailpoet_field_button_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
+        "change .mailpoet_field_button_font_weight": "changeFontWeight",
 
         "input .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
         "change .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
@@ -97,23 +99,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
-    initialize: function(params) {
-      var panelParams = {
-        element: this.$el,
-        template: '',
-        position: 'right',
-        width: App.getConfig().get('sidepanelWidth'),
-      };
-      this.renderOptions = params.renderOptions || {};
-      if (this.renderOptions.displayFormat === 'subpanel') {
-        MailPoet.Modal.subpanel(panelParams);
-      } else {
-        MailPoet.Modal.panel(panelParams);
-      }
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),
@@ -128,6 +113,13 @@ define([
       this.$(fieldToUpdate).val(jQuery(event.target).val());
       callable(event);
     },
+    changeFontWeight: function(event) {
+      var checked = !!jQuery(event.target).prop('checked');
+      this.model.set(
+        'styles.block.fontWeight',
+        (checked) ? jQuery(event.target).val() : 'normal'
+      );
+    }
   });
 
   Module.ButtonWidgetView = base.WidgetView.extend({

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

@@ -65,6 +65,13 @@ define([
       }
       return response;
     },
+    getChildren: function() {
+      var models = this.get('blocks').map(function(model, index, list) {
+        return [model, model.getChildren()];
+      });
+
+      return _.flatten(models);
+    },
   });
 
   Module.ContainerBlockView = Marionette.CompositeView.extend({
@@ -118,6 +125,7 @@ define([
           return view.renderOptions.depth === 1;
         },
       },
+      HighlightEditingBehavior: {}
     },
     onDragSubstituteBy: function() {
       // For two and three column layouts display their respective widgets,
@@ -286,6 +294,7 @@ define([
     templateHelpers: function() {
       return {
         isRoot: this.renderOptions.depth === 0,
+        emptyContainerMessage: this.renderOptions.emptyContainerMessage || '',
       };
     },
   });
@@ -302,9 +311,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     regions: {
       columnsSettingsRegion: '.mailpoet_container_columns_settings',
     },

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

@@ -102,23 +102,6 @@ define([
         'change:styles.block.borderColor': 'repaintDividerStyleOptions',
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
-    initialize: function(params) {
-      var panelParams = {
-        element: this.$el,
-        template: '',
-        position: 'right',
-        width: App.getConfig().get('sidepanelWidth'),
-      };
-      this.renderOptions = params.renderOptions || {};
-      if (this.renderOptions.displayFormat === 'subpanel') {
-        MailPoet.Modal.subpanel(panelParams);
-      } else {
-        MailPoet.Modal.panel(panelParams);
-      }
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

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

@@ -16,7 +16,7 @@ define([
     defaults: function() {
       return this._getDefaults({
         type: 'footer',
-        text: '<a href="[unsubscribeUrl]">Unsubscribe</a> | <a href="[manageSubscriptionUrl]">Manage subscription</a><br /><b>Add your postal address here!</b>',
+        text: '<a href="[link:subscription_unsubscribe_url]">Unsubscribe</a> | <a href="[link:subscription_manage_url]">Manage subscription</a><br /><b>Add your postal address here!</b>',
         styles: {
           block: {
             backgroundColor: 'transparent',
@@ -41,7 +41,7 @@ define([
     getTemplate: function() { return templates.footerBlock; },
     modelEvents: _.extend({
       'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render',
-    }, base.BlockView.prototype.modelEvents),
+    }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
     onDragSubstituteBy: function() { return Module.FooterWidgetView; },
     onRender: function() {
       this.toolsView = new Module.FooterBlockToolsView({ model: this.model });
@@ -56,15 +56,15 @@ define([
         inline: true,
 
         menubar: false,
-        toolbar: "bold italic link unlink forecolor mailpoet_custom_fields",
+        toolbar: "bold italic link unlink forecolor mailpoet_shortcodes",
 
         valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
         invalid_elements: "script",
-        style_formats: [
-          {title: 'Paragraph', block: 'p'},
-        ],
+        block_formats: 'Paragraph=p',
+        relative_urls: false,
+        remove_script_host: false,
 
-        plugins: "link textcolor mailpoet_custom_fields",
+        plugins: "link textcolor colorpicker mailpoet_shortcodes",
 
         setup: function(editor) {
           editor.on('change', function(e) {
@@ -80,8 +80,8 @@ define([
           });
         },
 
-        mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-        mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
+        mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
+        mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
       });
     },
   });
@@ -106,9 +106,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

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

@@ -16,7 +16,7 @@ define([
     defaults: function() {
       return this._getDefaults({
         type: 'header',
-        text: 'Display problems? <a href="[viewInBrowserUrl]">View it in your browser</a>',
+        text: 'Display problems? <a href="[link:newsletter_view_in_browser_url]">View it in your browser</a>',
         styles: {
           block: {
             backgroundColor: 'transparent',
@@ -41,7 +41,7 @@ define([
     getTemplate: function() { return templates.headerBlock; },
     modelEvents: _.extend({
       'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render',
-    }, base.BlockView.prototype.modelEvents),
+    }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
     onDragSubstituteBy: function() { return Module.HeaderWidgetView; },
     onRender: function() {
       this.toolsView = new Module.HeaderBlockToolsView({ model: this.model });
@@ -56,15 +56,15 @@ define([
         inline: true,
 
         menubar: false,
-        toolbar: "bold italic link unlink forecolor mailpoet_custom_fields",
+        toolbar: "bold italic link unlink forecolor mailpoet_shortcodes",
 
         valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
         invalid_elements: "script",
-        style_formats: [
-          {title: 'Paragraph', block: 'p'},
-        ],
+        block_formats: 'Paragraph=p',
+        relative_urls: false,
+        remove_script_host: false,
 
-        plugins: "link textcolor mailpoet_custom_fields",
+        plugins: "link textcolor colorpicker mailpoet_shortcodes",
 
         setup: function(editor) {
           editor.on('change', function(e) {
@@ -80,8 +80,8 @@ define([
           });
         },
 
-        mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-        mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
+        mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
+        mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
       });
     },
   });
@@ -106,9 +106,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

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

@@ -20,7 +20,7 @@ define([
         link: 'http://example.org',
         src: 'no-image.png',
         alt: 'An image of...',
-        padded: true, // true | false - Padded or full width
+        fullWidth: true, // true | false
         width: '64px',
         height: '64px',
         styles: {
@@ -45,10 +45,10 @@ define([
       this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
       this.toolsRegion.show(this.toolsView);
 
-      if (this.model.get('padded')) {
-        this.$el.removeClass('mailpoet_full_image');
-      } else {
+      if (this.model.get('fullWidth')) {
         this.$el.addClass('mailpoet_full_image');
+      } else {
+        this.$el.removeClass('mailpoet_full_image');
       }
     },
   });
@@ -64,7 +64,7 @@ define([
         "keyup .mailpoet_field_image_link": _.partial(this.changeField, "link"),
         "keyup .mailpoet_field_image_address": _.partial(this.changeField, "src"),
         "keyup .mailpoet_field_image_alt_text": _.partial(this.changeField, "alt"),
-        "change .mailpoet_field_image_padded": _.partial(this.changeBoolCheckboxField, "padded"),
+        "change .mailpoet_field_image_full_width": _.partial(this.changeBoolCheckboxField, "fullWidth"),
         "change .mailpoet_field_image_alignment": _.partial(this.changeField, "styles.block.textAlign"),
         "click .mailpoet_field_image_select_another_image": "showMediaManager",
         "click .mailpoet_done_editing": "close",

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

@@ -23,7 +23,19 @@ define([
     'newsletter_editor/blocks/button',
     'newsletter_editor/blocks/divider',
     'select2'
-  ], function(Backbone, Marionette, Radio, _, jQuery, MailPoet, App, CommunicationComponent, BaseBlock, ButtonBlock, DividerBlock) {
+  ], function(
+    Backbone,
+    Marionette,
+    Radio,
+    _,
+    jQuery,
+    MailPoet,
+    App,
+    CommunicationComponent,
+    BaseBlock,
+    ButtonBlock,
+    DividerBlock
+  ) {
 
   "use strict";
 
@@ -43,10 +55,10 @@ define([
         inclusionType: 'include', // 'include'|'exclude'
         displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
         titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
-        titlePosition: 'inTextBlock', // 'inTextBlock'|'aboveBlock',
         titleAlignment: 'left', // 'left'|'center'|'right'
         titleIsLink: false, // false|true
-        imagePadded: true, // true|false
+        imageFullWidth: false, // true|false
+        featuredImagePosition: 'belowTitle', // 'aboveTitle'|'belowTitle'|'none'
         //imageAlignment: 'centerPadded', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
         showAuthor: 'no', // 'no'|'aboveText'|'belowText'
         authorPrecededBy: 'Author:',
@@ -88,7 +100,7 @@ define([
       this.on('change:amount change:contentType change:terms change:inclusionType change:postStatus change:search change:sortBy', refreshAvailablePosts);
 
       this.listenTo(this.get('_selectedPosts'), 'add remove reset', refreshTransformedPosts);
-      this.on('change:displayType change:titleFormat change:titlePosition change:titleAlignment change:titleIsLink change:imagePadded change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:showDivider', refreshTransformedPosts);
+      this.on('change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:showDivider', refreshTransformedPosts);
       this.listenTo(this.get('readMoreButton'), 'change', refreshTransformedPosts);
       this.listenTo(this.get('divider'), 'change', refreshTransformedPosts);
 
@@ -101,7 +113,7 @@ define([
         that.get('_selectedPosts').reset(); // Empty out the collection
         that.trigger('change:_availablePosts');
       }).fail(function() {
-        console.log('Posts fetchPosts error', arguments);
+        MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
       });
     },
     _refreshTransformedPosts: function() {
@@ -111,14 +123,14 @@ define([
       data.posts = this.get('_selectedPosts').pluck('ID');
 
       if (data.posts.length === 0) {
-        this.get('_transformedPosts.blocks').reset();
+        this.get('_transformedPosts').get('blocks').reset();
         return;
       }
 
       CommunicationComponent.getTransformedPosts(data).done(function(posts) {
         that.get('_transformedPosts').get('blocks').reset(posts, {parse: true});
       }).fail(function() {
-        console.log('Posts _refreshTransformedPosts error', arguments);
+        MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
       });
     },
     _insertSelectedPosts: function() {
@@ -134,7 +146,7 @@ define([
       CommunicationComponent.getTransformedPosts(data).done(function(posts) {
         collection.add(posts, { at: index });
       }).fail(function() {
-        console.log('Posts fetchPosts error', arguments);
+        MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
       });
     },
   });
@@ -163,6 +175,7 @@ define([
         renderOptions = {
           disableTextEditor: true,
           disableDragAndDrop: true,
+          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
         };
       this.postsRegion.show(new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions }));
     },
@@ -195,6 +208,7 @@ define([
       };
     },
     initialize: function() {
+      this.model.trigger('startEditing');
       this.selectionView = new PostSelectionSettingsView({ model: this.model });
       this.displayOptionsView = new PostsDisplayOptionsSettingsView({ model: this.model });
     },
@@ -202,21 +216,23 @@ define([
       var that = this,
         blockView = this.model.request('blockView');
 
-      this.selectionRegion.show(this.selectionView);
-      this.displayOptionsRegion.show(this.displayOptionsView);
+      this.showChildView('selectionRegion', this.selectionView);
+      this.showChildView('displayOptionsRegion', this.displayOptionsView);
 
       MailPoet.Modal.panel({
         element: this.$el,
         template: '',
         position: 'right',
-        overlay: true,
-        highlight: blockView.$el,
         width: App.getConfig().get('sidepanelWidth'),
         onCancel: function() {
           // Self destroy the block if the user closes settings modal
           that.model.destroy();
         },
       });
+
+      // Inform child views that they have been attached to document
+      this.selectionView.triggerMethod('attach');
+      this.displayOptionsView.triggerMethod('attach');
     },
     switchToDisplayOptions: function() {
       // Switch content view
@@ -266,14 +282,19 @@ define([
       Marionette.CompositeView.apply(this, arguments);
     },
     onRender: function() {
+      // Dynamically update available post types
+      CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
+    },
+    onAttach: function() {
       var that = this;
 
       // Dynamically update available post types
-      CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
+      //CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
 
       this.$('.mailpoet_posts_categories_and_tags').select2({
         multiple: true,
         allowClear: true,
+        placeholder: MailPoet.I18n.t('categoriesAndTags'),
         ajax: {
           data: function (params) {
             return {
@@ -394,9 +415,9 @@ define([
         "keyup .mailpoet_posts_show_amount": _.partial(this.changeField, "amount"),
         "change .mailpoet_posts_content_type": _.partial(this.changeField, "contentType"),
         "change .mailpoet_posts_include_or_exclude": _.partial(this.changeField, "inclusionType"),
-        "change .mailpoet_posts_title_position": _.partial(this.changeField, "titlePosition"),
         "change .mailpoet_posts_title_alignment": _.partial(this.changeField, "titleAlignment"),
-        "change .mailpoet_posts_image_padded": _.partial(this.changeBoolField, "imagePadded"),
+        "change .mailpoet_posts_image_full_width": _.partial(this.changeBoolField, "imageFullWidth"),
+        "change .mailpoet_posts_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
         "change .mailpoet_posts_show_author": _.partial(this.changeField, "showAuthor"),
         "keyup .mailpoet_posts_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
         "change .mailpoet_posts_show_categories": _.partial(this.changeField, "showCategories"),
@@ -405,9 +426,6 @@ define([
         "change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy"),
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),
@@ -448,11 +466,13 @@ define([
     changeDisplayType: function(event) {
       var value = jQuery(event.target).val();
       if (value == 'titleOnly') {
-        this.$('.mailpoet_posts_title_position_container').addClass('mailpoet_hidden');
         this.$('.mailpoet_posts_title_as_list').removeClass('mailpoet_hidden');
+        this.$('.mailpoet_posts_image_full_width_option').addClass('mailpoet_hidden');
+        this.$('.mailpoet_posts_image_separator').addClass('mailpoet_hidden');
       } else {
-        this.$('.mailpoet_posts_title_position_container').removeClass('mailpoet_hidden');
         this.$('.mailpoet_posts_title_as_list').addClass('mailpoet_hidden');
+        this.$('.mailpoet_posts_image_full_width_option').removeClass('mailpoet_hidden');
+        this.$('.mailpoet_posts_image_separator').removeClass('mailpoet_hidden');
 
         // Reset titleFormat if it was set to List when switching away from displayType=titleOnly
         if (this.model.get('titleFormat') === 'ul') {
@@ -461,6 +481,13 @@ define([
           this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden');
         }
       }
+
+      if (value === 'excerpt') {
+        this.$('.mailpoet_posts_featured_image_position_container').removeClass('mailpoet_hidden');
+      } else {
+        this.$('.mailpoet_posts_featured_image_position_container').addClass('mailpoet_hidden');
+      }
+
       this.changeField('displayType', event);
     },
     changeTitleFormat: function(event) {

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

@@ -139,6 +139,7 @@ define([
           }
         },
       },
+      HighlightEditingBehavior: {},
     },
     onDragSubstituteBy: function() { return Module.SocialWidgetView; },
     constructor: function() {

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

@@ -70,9 +70,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
   });
 
   Module.SpacerWidgetView = base.WidgetView.extend({

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

@@ -52,21 +52,17 @@ define([
           inline: true,
 
           menubar: false,
-          toolbar1: "styleselect bold italic forecolor | link unlink",
-          toolbar2: "alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_custom_fields",
+          toolbar1: "formatselect bold italic forecolor | link unlink",
+          toolbar2: "alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_shortcodes",
 
           //forced_root_block: 'p',
           valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],h1[class|style],h2[class|style],h3[class|style],ol[class|style],ul[class|style],li[class|style],strong[class|style],em[class|style],strike,br,blockquote[class|style],table[class|style],tr[class|style],th[class|style],td[class|style]",
           invalid_elements: "script",
-          style_formats: [
-            {title: 'Heading 1', block: 'h1'},
-            {title: 'Heading 2', block: 'h2'},
-            {title: 'Heading 3', block: 'h3'},
+          block_formats: 'Heading 1=h1;Heading 2=h2;Heading 3=h3;Paragraph=p',
+          relative_urls: false,
+          remove_script_host: false,
 
-            {title: 'Paragraph', block: 'p'},
-          ],
-
-          plugins: "link code textcolor mailpoet_custom_fields",
+          plugins: "link code textcolor colorpicker mailpoet_shortcodes",
 
           setup: function(editor) {
             editor.on('change', function(e) {
@@ -82,8 +78,8 @@ define([
             });
           },
 
-          mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-          mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
+          mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
+          mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
         });
       }
     },

assets/js/src/newsletter_editor/components/communication.js

@@ -62,6 +62,13 @@ define([
     });
   };
 
+  Module.getBulkTransformedPosts = function(options) {
+    return Module._query({
+      action: 'getBulkTransformedPosts',
+      options: options,
+    });
+  };
+
   Module.saveNewsletter = function(options) {
     return MailPoet.Ajax.post({
       endpoint: 'newsletters',

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

@@ -10,7 +10,6 @@ define([
       availableStyles: {},
       socialIcons: {},
       blockDefaults: {},
-      translations: {},
       sidepanelWidth: '331px',
       validation: {},
       urls: {},

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

@@ -60,6 +60,11 @@ define([
       return Module.newsletter;
   };
 
+  Module.findModels = function(predicate) {
+    var blocks = App._contentContainer.getChildren();
+    return _.filter(blocks, predicate);
+  };
+
   App.on('before:start', function(options) {
     // Expose block methods globally
     App.registerBlockType = Module.registerBlockType;
@@ -68,6 +73,7 @@ define([
     App.toJSON = Module.toJSON;
     App.getBody = Module.getBody;
     App.getNewsletter = Module.getNewsletter;
+    App.findModels = Module.findModels;
 
     Module.newsletter = new Module.NewsletterModel(_.omit(_.clone(options.newsletter), ['body']));
   });

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

@@ -67,7 +67,28 @@ define([
   };
 
   Module.getThumbnail = function(element, options) {
-    return html2canvas(element, options || {});
+    var promise = html2canvas(element, options || {});
+
+    return promise.then(function(oldCanvas) {
+      // Temporary workaround for html2canvas-alpha2.
+      // Removes 1px left transparent border from resulting canvas.
+
+      var oldContext = oldCanvas.getContext('2d'),
+          newCanvas = document.createElement("canvas"),
+          newContext = newCanvas.getContext("2d"),
+          leftBorderWidth = 1;
+
+      newCanvas.width = oldCanvas.width;
+      newCanvas.height = oldCanvas.height;
+
+      newContext.drawImage(
+        oldCanvas,
+        leftBorderWidth, 0, oldCanvas.width - leftBorderWidth, oldCanvas.height,
+        0, 0, oldCanvas.width, oldCanvas.height
+      );
+
+      return newCanvas;
+    });
   };
 
   Module.saveTemplate = function(options) {
@@ -170,7 +191,7 @@ define([
 
       if (templateName === '') {
         MailPoet.Notice.error(
-          App.getConfig().get('translations.templateNameMissing'),
+          MailPoet.I18n.t('templateNameMissing'),
           {
             positionAfter: that.$el,
             scroll: true,
@@ -178,30 +199,27 @@ define([
         );
       } else if (templateDescription === '') {
         MailPoet.Notice.error(
-          App.getConfig().get('translations.templateDescriptionMissing'),
+          MailPoet.I18n.t('templateDescriptionMissing'),
           {
             positionAfter: that.$el,
             scroll: true,
           }
         );
       } else {
-        console.log('Saving template with ', templateName, templateDescription);
         Module.saveTemplate({
           name: templateName,
           description: templateDescription,
         }).done(function() {
-          console.log('Template saved', arguments);
           MailPoet.Notice.success(
-            App.getConfig().get('translations.templateSaved'),
+            MailPoet.I18n.t('templateSaved'),
             {
               positionAfter: that.$el,
               scroll: true,
             }
           );
         }).fail(function() {
-          console.log('Template save failed', arguments);
           MailPoet.Notice.error(
-            App.getConfig().get('translations.templateSaveFailed'),
+            MailPoet.I18n.t('templateSaveFailed'),
             {
               positionAfter: that.$el,
               scroll: true,
@@ -226,7 +244,7 @@ define([
 
       if (templateName === '') {
         MailPoet.Notice.error(
-          App.getConfig().get('translations.templateNameMissing'),
+          MailPoet.I18n.t('templateNameMissing'),
           {
             positionAfter: that.$el,
             scroll: true,
@@ -234,14 +252,13 @@ define([
         );
       } else if (templateDescription === '') {
         MailPoet.Notice.error(
-          App.getConfig().get('translations.templateDescriptionMissing'),
+          MailPoet.I18n.t('templateDescriptionMissing'),
           {
             positionAfter: that.$el,
             scroll: true,
           }
         );
       } else {
-        console.log('Exporting template with ', templateName, templateDescription);
         Module.exportTemplate({
           name: templateName,
           description: templateDescription,
@@ -257,7 +274,6 @@ define([
     next: function() {
       this.hideOptionContents();
       if(!this.$('.mailpoet_save_next').hasClass('button-disabled')) {
-        console.log('Next');
         window.location.href = App.getConfig().get('urls.send');
       }
     },
@@ -267,9 +283,11 @@ define([
         return;
       }
 
+      var contents = JSON.stringify(jsonObject);
       if (App.getConfig().get('validation.validateUnsubscribeLinkPresent') &&
-          JSON.stringify(jsonObject).indexOf("[unsubscribeUrl]") < 0) {
-        this.showValidationError(App.getConfig().get('translations.unsubscribeLinkMissing'));
+          contents.indexOf("[link:subscription_unsubscribe_url]") < 0 &&
+          contents.indexOf("[link:subscription_unsubscribe]") < 0) {
+        this.showValidationError(MailPoet.I18n.t('unsubscribeLinkMissing'));
         return;
       }
 

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

@@ -1,13 +1,24 @@
 define([
     'newsletter_editor/App',
     'newsletter_editor/components/communication',
+    'mailpoet',
     'backbone',
     'backbone.marionette',
     'backbone.supermodel',
     'underscore',
     'jquery',
     'sticky-kit'
-  ], function(App, CommunicationComponent, Backbone, Marionette, SuperModel, _, jQuery, StickyKit) {
+  ], function(
+    App,
+    CommunicationComponent,
+    MailPoet,
+    Backbone,
+    Marionette,
+    SuperModel,
+    _,
+    jQuery,
+    StickyKit
+  ) {
 
   "use strict";
 
@@ -225,33 +236,56 @@ define([
     showPreview: function() {
       var json = App.toJSON();
 
+      // Stringify to enable transmission of primitive non-string value types
+      if (!_.isUndefined(json.body)) {
+        json.body = JSON.stringify(json.body);
+      }
+
+      MailPoet.Modal.loading(true);
+
       MailPoet.Ajax.post({
         endpoint: 'newsletters',
-        action: 'render',
+        action: 'showPreview',
         data: json,
       }).done(function(response){
-        console.log('Should open a new window');
-        window.open('data:text/html,' + encodeURIComponent(response.rendered_body), '_blank');
+        MailPoet.Modal.loading(false);
+
+        if (response.result === true) {
+          window.open(response.data.url, '_blank')
+        }
+        MailPoet.Notice.error(response.errors);
       }).fail(function(error) {
-        console.log('Preview error', json);
-        alert('Something went wrong, check console');
+        MailPoet.Modal.loading(false);
+        MailPoet.Notice.error(
+          MailPoet.I18n.t('newsletterPreviewFailed')
+        );
       });
     },
     sendPreview: function() {
-      // testing sending method
-      console.log('trying to send a preview');
       // get form data
+      var $emailField = this.$('#mailpoet_preview_to_email');
       var data = {
-        subscriber: this.$('#mailpoet_preview_to_email').val(),
+        subscriber: $emailField.val(),
         id: App.getNewsletter().get('id'),
       };
 
+      if (data.subscriber.length <= 0) {
+        MailPoet.Notice.error(
+          MailPoet.I18n.t('newsletterPreviewEmailMissing'),
+          {
+            positionAfter: $emailField,
+            scroll: true,
+          }
+        );
+        return false;
+      }
+
       // send test email
       MailPoet.Modal.loading(true);
 
       CommunicationComponent.previewNewsletter(data).done(function(response) {
         if(response.result !== undefined && response.result === true) {
-          MailPoet.Notice.success(App.getConfig().get('translations.newsletterPreviewSent'), { scroll: true });
+          MailPoet.Notice.success(MailPoet.I18n.t('newsletterPreviewSent'), { scroll: true });
         } else {
           if (_.isArray(response.errors)) {
             response.errors.map(function(error) {
@@ -259,7 +293,7 @@ define([
             });
           } else {
             MailPoet.Notice.error(
-              App.getConfig().get('translations.newsletterPreviewFailedToSend'),
+              MailPoet.I18n.t('newsletterPreviewFailedToSend'),
               {
                 scroll: true,
                 static: true,

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

@@ -1,58 +0,0 @@
-/**
- * wysija_custom_fields/plugin.js
- *
- * TinyMCE plugin for adding dynamic data placeholders to newsletters.
- *
- * This adds a button to the editor toolbar which displays a modal window of
- * available dynamic data placeholder buttons. On click each button inserts
- * its placeholder into editor text.
- */
-
-/*jshint unused:false */
-/*global tinymce:true */
-tinymce.PluginManager.add('mailpoet_custom_fields', function(editor, url) {
-  var appendLabelAndClose = function(text) {
-      editor.insertContent('[' + text + ']');
-      editor.windowManager.close();
-    },
-    generateOnClickFunc = function(id) {
-      return function() {
-        appendLabelAndClose(id);
-      };
-    };
-
-  editor.addButton('mailpoet_custom_fields', {
-    icon: 'mailpoet_custom_fields',
-    onclick: function() {
-      var customFields = [],
-        configCustomFields = editor.settings.mailpoet_custom_fields;
-
-      for (var segment in configCustomFields) {
-        if (configCustomFields.hasOwnProperty(segment)) {
-          customFields.push({
-            type: 'label',
-            text: segment,
-          });
-
-          for (var i = 0; i < configCustomFields[segment].length; i += 1) {
-            customFields.push({
-              type: 'button',
-              text: configCustomFields[segment][i].text,
-              onClick: generateOnClickFunc(configCustomFields[segment][i].shortcode)
-            });
-          }
-        }
-      }
-
-      // Open window
-      editor.windowManager.open({
-        height: parseInt(editor.getParam("plugin_mailpoet_custom_fields_height", 400)),
-        width: parseInt(editor.getParam("plugin_mailpoet_custom_fields_width", 450)),
-        autoScroll: true,
-        title: editor.settings.mailpoet_custom_fields_window_title,
-        body: customFields,
-        buttons: [],
-      });
-    },
-  });
-});

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

@@ -0,0 +1,58 @@
+/**
+ * wysija_shortcodes/plugin.js
+ *
+ * TinyMCE plugin for adding dynamic data placeholders to newsletters.
+ *
+ * This adds a button to the editor toolbar which displays a modal window of
+ * available dynamic data placeholder buttons. On click each button inserts
+ * its placeholder into editor text.
+ */
+
+/*jshint unused:false */
+/*global tinymce:true */
+tinymce.PluginManager.add('mailpoet_shortcodes', function(editor, url) {
+  var appendLabelAndClose = function(text) {
+      editor.insertContent('[' + text + ']');
+      editor.windowManager.close();
+    },
+    generateOnClickFunc = function(id) {
+      return function() {
+        appendLabelAndClose(id);
+      };
+    };
+
+  editor.addButton('mailpoet_shortcodes', {
+    icon: 'mailpoet_shortcodes',
+    onclick: function() {
+      var shortcodes = [],
+        configShortcodes = editor.settings.mailpoet_shortcodes;
+
+      for (var segment in configShortcodes) {
+        if (configShortcodes.hasOwnProperty(segment)) {
+          shortcodes.push({
+            type: 'label',
+            text: segment,
+          });
+
+          for (var i = 0; i < configShortcodes[segment].length; i += 1) {
+            shortcodes.push({
+              type: 'button',
+              text: configShortcodes[segment][i].text,
+              onClick: generateOnClickFunc(configShortcodes[segment][i].shortcode)
+            });
+          }
+        }
+      }
+
+      // Open window
+      editor.windowManager.open({
+        height: parseInt(editor.getParam("plugin_mailpoet_shortcodes_height", 400)),
+        width: parseInt(editor.getParam("plugin_mailpoet_shortcodes_width", 450)),
+        autoScroll: true,
+        title: editor.settings.mailpoet_shortcodes_window_title,
+        body: shortcodes,
+        buttons: [],
+      });
+    },
+  });
+});

assets/js/src/newsletters/breadcrumb.jsx

@@ -2,39 +2,38 @@ define(
   [
     'react',
     'react-router',
-    'classnames'
+    'classnames',
+    'mailpoet'
   ],
   function(
     React,
     Router,
-    classNames
+    classNames,
+    MailPoet
   ) {
     var Link = Router.Link;
 
     var Breadcrumb = React.createClass({
-      mixins: [
-        Router.History
-      ],
       getInitialState: function() {
         return {
           step: null,
           steps: [
             {
               name: 'type',
-              label: 'Select type',
+              label: MailPoet.I18n.t('selectType'),
               link: '/new'
             },
             {
               name: 'template',
-              label: 'Template'
+              label: MailPoet.I18n.t('template')
             },
             {
               name: 'editor',
-              label: 'Designer'
+              label: MailPoet.I18n.t('designer')
             },
             {
               name: 'send',
-              label: 'Send'
+              label: MailPoet.I18n.t('send')
             }
           ]
         };
@@ -73,4 +72,4 @@ define(
 
     return Breadcrumb;
   }
-);
+);

assets/js/src/newsletters/list.jsx

@@ -1,272 +0,0 @@
-define(
-  [
-    'react',
-    'react-router',
-    'listing/listing.jsx',
-    'classnames',
-    'jquery'
-  ],
-  function(
-    React,
-    Router,
-    Listing,
-    classNames,
-    jQuery
-  ) {
-    var Link = Router.Link;
-
-    var columns = [
-      {
-        name: 'subject',
-        label: 'Subject',
-        sortable: true
-      },
-      {
-        name: 'status',
-        label: 'Status'
-      },
-      {
-        name: 'segments',
-        label: 'Lists'
-      },
-      {
-        name: 'created_at',
-        label: 'Created on',
-        sortable: true
-      },
-      {
-        name: 'updated_at',
-        label: 'Last modified on',
-        sortable: true
-      }
-    ];
-
-    var messages = {
-      onTrash: function(response) {
-        var count = ~~response.newsletters;
-        var message = null;
-
-        if(count === 1 || response === true) {
-          message = (
-            '1 newsletter was moved to the trash.'
-          );
-        } else if(count > 1) {
-          message = (
-            '%$1d newsletters were moved to the trash.'
-          ).replace('%$1d', count);
-        }
-
-        if(message !== null) {
-          MailPoet.Notice.success(message);
-        }
-      },
-      onDelete: function(response) {
-        var count = ~~response.newsletters;
-        var message = null;
-
-        if(count === 1 || response === true) {
-          message = (
-            '1 newsletter was permanently deleted.'
-          );
-        } else if(count > 1) {
-          message = (
-            '%$1d newsletters were permanently deleted.'
-          ).replace('%$1d', count);
-        }
-
-        if(message !== null) {
-          MailPoet.Notice.success(message);
-        }
-      },
-      onRestore: function(response) {
-        var count = ~~response.newsletters;
-        var message = null;
-
-        if(count === 1 || response === true) {
-          message = (
-            '1 newsletter has been restored from the trash.'
-          );
-        } else if(count > 1) {
-          message = (
-            '%$1d newsletters have been restored from the trash.'
-          ).replace('%$1d', count);
-        }
-
-        if(message !== null) {
-          MailPoet.Notice.success(message);
-        }
-      }
-    };
-
-    var bulk_actions = [
-      {
-        name: 'trash',
-        label: 'Trash',
-        onSuccess: messages.onTrash
-      }
-    ];
-
-    var item_actions = [
-      {
-        name: 'edit',
-        link: function(item) {
-          return (
-            <a href={ `?page=mailpoet-newsletter-editor&id=${ item.id }` }>
-              Edit
-            </a>
-          );
-        }
-      },
-      {
-        name: 'trash'
-      }
-    ];
-
-    var NewsletterList = React.createClass({
-      pauseSending: function(item) {
-        MailPoet.Ajax.post({
-          endpoint: 'sendingQueue',
-          action: 'pause',
-          data: item.id
-        }).done(function() {
-          jQuery('#resume_'+item.id).show();
-          jQuery('#pause_'+item.id).hide();
-        });
-      },
-      resumeSending: function(item) {
-        MailPoet.Ajax.post({
-          endpoint: 'sendingQueue',
-          action: 'resume',
-          data: item.id
-        }).done(function() {
-          jQuery('#pause_'+item.id).show();
-          jQuery('#resume_'+item.id).hide();
-        });
-      },
-      renderStatus: function(item) {
-        if(item.queue === null) {
-          return (
-            <span>Not sent yet.</span>
-          );
-        } else {
-          var progressClasses = classNames(
-            'mailpoet_progress',
-            { 'mailpoet_progress_complete': item.queue.status === 'completed'}
-          );
-
-          // calculate percentage done
-          var percentage = Math.round(
-            (item.queue.count_processed * 100) / (item.queue.count_total)
-          );
-
-          var label = false;
-
-          if(item.queue.status === 'completed') {
-            label = (
-              <span>
-                Sent to {
-                  item.queue.count_processed - item.queue.count_failed
-                } out of { item.queue.count_total }.
-              </span>
-            );
-          } else {
-            label = (
-              <span>
-                { item.queue.count_processed } / { item.queue.count_total }
-                &nbsp;&nbsp;
-                <a
-                  id={ 'resume_'+item.id }
-                  className="button"
-                  style={{ display: (item.queue.status === 'paused') ? 'inline-block': 'none' }}
-                  href="javascript:;"
-                  onClick={ this.resumeSending.bind(null, item) }
-                >Resume</a>
-                <a
-                  id={ 'pause_'+item.id }
-                  className="button mailpoet_pause"
-                  style={{ display: (item.queue.status === null) ? 'inline-block': 'none' }}
-                  href="javascript:;"
-                  onClick={ this.pauseSending.bind(null, item) }
-                >Pause</a>
-              </span>
-            );
-          }
-
-          return (
-            <div>
-              <div className={ progressClasses }>
-                  <span
-                    className="mailpoet_progress_bar"
-                    style={ { width: percentage + "%"} }
-                  ></span>
-                  <span className="mailpoet_progress_label">
-                    { percentage + "%" }
-                  </span>
-              </div>
-              <p style={{ textAlign:'center' }}>
-                { label }
-              </p>
-            </div>
-          );
-        }
-      },
-      renderItem: function(newsletter, actions) {
-        var rowClasses = classNames(
-          'manage-column',
-          'column-primary',
-          'has-row-actions'
-        );
-
-        var segments = mailpoet_segments.filter(function(segment) {
-          return (jQuery.inArray(segment.id, newsletter.segments) !== -1);
-        }).map(function(segment) {
-          return segment.name;
-        }).join(', ');
-
-        return (
-          <div>
-            <td className={ rowClasses }>
-              <strong>
-                <a>{ newsletter.subject }</a>
-              </strong>
-              { actions }
-            </td>
-            <td className="column" data-colname="Lists">
-              { this.renderStatus(newsletter) }
-            </td>
-            <td className="column" data-colname="Lists">
-              { segments }
-            </td>
-            <td className="column-date" data-colname="Subscribed on">
-              <abbr>{ newsletter.created_at }</abbr>
-            </td>
-            <td className="column-date" data-colname="Last modified on">
-              <abbr>{ newsletter.updated_at }</abbr>
-            </td>
-          </div>
-        );
-      },
-      render: function() {
-        return (
-          <div>
-            <h2 className="title">
-              Newsletters <Link className="add-new-h2" to="/new">New</Link>
-            </h2>
-
-            <Listing
-              params={ this.props.params }
-              endpoint="newsletters"
-              onRenderItem={this.renderItem}
-              columns={columns}
-              bulk_actions={ bulk_actions }
-              item_actions={ item_actions }
-              messages={ messages }
-              auto_refresh={ true } />
-          </div>
-        );
-      }
-    });
-
-    return NewsletterList;
-  }
-);

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

@@ -0,0 +1,317 @@
+import React from 'react'
+import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
+import { createHashHistory } from 'history'
+
+import Listing from 'listing/listing.jsx'
+import ListingTabs from 'newsletters/listings/tabs.jsx'
+
+import classNames from 'classnames'
+import jQuery from 'jquery'
+import MailPoet from 'mailpoet'
+
+import {
+  timeOfDayValues,
+  weekDayValues,
+  monthDayValues,
+  nthWeekDayValues
+} from 'newsletters/scheduling/common.jsx'
+
+const messages = {
+  onTrash(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterTrashed')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersTrashed')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onDelete(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterDeleted')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersDeleted')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onRestore(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterRestored')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersRestored')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  }
+};
+
+const columns = [
+  {
+    name: 'subject',
+    label: MailPoet.I18n.t('subject'),
+    sortable: true
+  },
+  {
+    name: 'status',
+    label: MailPoet.I18n.t('status'),
+    width: 100
+  },
+  {
+    name: 'settings',
+    label: MailPoet.I18n.t('settings')
+  },
+  {
+    name: 'history',
+    label: MailPoet.I18n.t('history'),
+    width: 100
+  },
+  {
+    name: 'updated_at',
+    label: MailPoet.I18n.t('lastModifiedOn'),
+    sortable: true
+  }
+];
+
+const bulk_actions = [
+  {
+    name: 'trash',
+    label: MailPoet.I18n.t('trash'),
+    onSuccess: messages.onTrash
+  }
+];
+
+const newsletter_actions = [
+  {
+    name: 'view',
+    link: function(newsletter) {
+      return (
+        <a href={ newsletter.preview_url } target="_blank">
+          {MailPoet.I18n.t('preview')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'edit',
+    link: function(newsletter) {
+      return (
+        <a href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }>
+          {MailPoet.I18n.t('edit')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'duplicate',
+    label: MailPoet.I18n.t('duplicate'),
+    onClick: function(newsletter, refresh) {
+      return MailPoet.Ajax.post({
+        endpoint: 'newsletters',
+        action: 'duplicate',
+        data: newsletter.id
+      }).done(function(response) {
+        if (response !== false && response.subject !== undefined) {
+          MailPoet.Notice.success(
+            (MailPoet.I18n.t('newsletterDuplicated')).replace(
+              '%$1s', response.subject
+            )
+          );
+        }
+        refresh();
+      });
+    }
+  },
+  {
+    name: 'trash'
+  }
+];
+
+const NewsletterListNotification = React.createClass({
+  updateStatus: function(e) {
+    // make the event persist so that we can still override the selected value
+    // in the ajax callback
+    e.persist();
+
+    MailPoet.Ajax.post({
+      endpoint: 'newsletters',
+      action: 'setStatus',
+      data: {
+        id: ~~(e.target.getAttribute('data-id')),
+        status: e.target.value
+      }
+    }).done(function(response) {
+      if (response.result === false) {
+        MailPoet.Notice.error(MailPoet.I18n.t('postNotificationActivationFailed'));
+
+        // reset value to actual newsletter's status
+         e.target.value = response.status;
+      } else {
+        if (response.status === 'active') {
+          MailPoet.Notice.success(MailPoet.I18n.t('postNotificationActivated'));
+        }
+        // force refresh of listing so that groups are updated
+        this.forceUpdate();
+      }
+    }.bind(this));
+  },
+  renderStatus: function(newsletter) {
+    return (
+      <select
+        data-id={ newsletter.id }
+        defaultValue={ newsletter.status }
+        onChange={ this.updateStatus }
+      >
+        <option value="active">{ MailPoet.I18n.t('active') }</option>
+        <option value="draft">{ MailPoet.I18n.t('inactive') }</option>
+      </select>
+    );
+  },
+  renderSettings: function(newsletter) {
+    let sendingFrequency;
+    let sendingToSegments;
+
+    // get list of segments' name
+    const segments = newsletter.segments.map(function(segment) {
+      return segment.name
+    });
+
+    // check if the user has specified segments to send to
+    if(segments.length === 0) {
+      return (
+        <span className="mailpoet_error">
+          { MailPoet.I18n.t('sendingToSegmentsNotSpecified') }
+        </span>
+      );
+    } else {
+      sendingToSegments = MailPoet.I18n.t('ifNewContentToSegments').replace(
+        '%$1s', segments.join(', ')
+      );
+
+      // set sending frequency
+      switch (newsletter.options.intervalType) {
+        case 'daily':
+          sendingFrequency = MailPoet.I18n.t('sendDaily').replace(
+            '%$1s', timeOfDayValues[newsletter.options.timeOfDay]
+          );
+        break;
+
+        case 'weekly':
+          sendingFrequency = MailPoet.I18n.t('sendWeekly').replace(
+            '%$1s', weekDayValues[newsletter.options.weekDay]
+          ).replace(
+            '%$2s', timeOfDayValues[newsletter.options.timeOfDay]
+          );
+        break;
+
+        case 'monthly':
+          sendingFrequency = MailPoet.I18n.t('sendMonthly').replace(
+            '%$1s', monthDayValues[newsletter.options.monthDay]
+          ).replace(
+            '%$2s', timeOfDayValues[newsletter.options.timeOfDay]
+          );
+        break;
+
+        case 'nthWeekDay':
+          sendingFrequency = MailPoet.I18n.t('sendNthWeekDay').replace(
+            '%$1s', nthWeekDayValues[newsletter.options.nthWeekDay]
+          ).replace(
+            '%$2s', weekDayValues[newsletter.options.weekDay]
+          ).replace(
+            '%$3s', timeOfDayValues[newsletter.options.timeOfDay]
+          );
+        break;
+
+        case 'immediately':
+          sendingFrequency = MailPoet.I18n.t('sendImmediately');
+        break;
+      }
+    }
+
+    return (
+      <span>
+        { sendingFrequency } { sendingToSegments }
+      </span>
+    );
+  },
+  renderItem: function(newsletter, actions) {
+    const rowClasses = classNames(
+      'manage-column',
+      'column-primary',
+      'has-row-actions'
+    );
+
+    return (
+      <div>
+        <td className={ rowClasses }>
+          <strong>
+            <a
+              className="row-title"
+              href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }
+            >{ newsletter.subject }</a>
+          </strong>
+          { actions }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('status') }>
+          { this.renderStatus(newsletter) }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('settings') }>
+          { this.renderSettings(newsletter) }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('history') }>
+          <a href="#TODO">{ MailPoet.I18n.t('viewHistory') }</a>
+        </td>
+        <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
+          <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
+        </td>
+      </div>
+    );
+  },
+  render: function() {
+    return (
+      <div>
+        <h1 className="title">
+          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+        </h1>
+
+        <ListingTabs tab="notification" />
+
+        <Listing
+          limit={ mailpoet_listing_per_page }
+          location={ this.props.location }
+          params={ this.props.params }
+          endpoint="newsletters"
+          tab="notification"
+          onRenderItem={ this.renderItem }
+          columns={ columns }
+          bulk_actions={ bulk_actions }
+          item_actions={ newsletter_actions }
+          messages={ messages }
+          auto_refresh={ true }
+          sort_by="updated_at"
+          sort_order="desc"
+        />
+      </div>
+    );
+  }
+});
+
+module.exports = NewsletterListNotification;

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

@@ -0,0 +1,339 @@
+import React from 'react'
+import { Router, Link } from 'react-router'
+import classNames from 'classnames'
+import jQuery from 'jquery'
+import MailPoet from 'mailpoet'
+
+import Listing from 'listing/listing.jsx'
+import ListingTabs from 'newsletters/listings/tabs.jsx'
+
+const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
+
+const messages = {
+  onTrash(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterTrashed')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersTrashed')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onDelete(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterDeleted')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersDeleted')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onRestore(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterRestored')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersRestored')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  }
+};
+
+const columns = [
+  {
+    name: 'subject',
+    label: MailPoet.I18n.t('subject'),
+    sortable: true
+  },
+  {
+    name: 'status',
+    label: MailPoet.I18n.t('status')
+  },
+  {
+    name: 'segments',
+    label: MailPoet.I18n.t('lists')
+  },
+  {
+    name: 'statistics',
+    label: MailPoet.I18n.t('statistics'),
+    display: mailpoet_tracking_enabled
+  },
+  {
+    name: 'updated_at',
+    label: MailPoet.I18n.t('lastModifiedOn'),
+    sortable: true
+  }
+];
+
+
+const bulk_actions = [
+  {
+    name: 'trash',
+    label: MailPoet.I18n.t('trash'),
+    onSuccess: messages.onTrash
+  }
+];
+
+const newsletter_actions = [
+  {
+    name: 'view',
+    link: function(newsletter) {
+      return (
+        <a href={ newsletter.preview_url } target="_blank">
+          {MailPoet.I18n.t('preview')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'edit',
+    link: function(newsletter) {
+      return (
+        <a href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }>
+          {MailPoet.I18n.t('edit')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'duplicate',
+    label: MailPoet.I18n.t('duplicate'),
+    onClick: function(newsletter, refresh) {
+      return MailPoet.Ajax.post({
+        endpoint: 'newsletters',
+        action: 'duplicate',
+        data: newsletter.id
+      }).done(function(response) {
+        if (response !== false && response.subject !== undefined) {
+          MailPoet.Notice.success(
+            (MailPoet.I18n.t('newsletterDuplicated')).replace(
+              '%$1s', response.subject
+            )
+          );
+        }
+        refresh();
+      });
+    }
+  },
+  {
+    name: 'trash'
+  }
+];
+
+const NewsletterListStandard = React.createClass({
+  pauseSending: function(newsletter) {
+    MailPoet.Ajax.post({
+      endpoint: 'sendingQueue',
+      action: 'pause',
+      data: newsletter.id
+    }).done(function() {
+      jQuery('#resume_'+newsletter.id).show();
+      jQuery('#pause_'+newsletter.id).hide();
+    });
+  },
+  resumeSending: function(newsletter) {
+    MailPoet.Ajax.post({
+      endpoint: 'sendingQueue',
+      action: 'resume',
+      data: newsletter.id
+    }).done(function() {
+      jQuery('#pause_'+newsletter.id).show();
+      jQuery('#resume_'+newsletter.id).hide();
+    });
+  },
+  renderStatus: function(newsletter) {
+    if (!newsletter.queue) {
+      return (
+        <span>{MailPoet.I18n.t('notSentYet')}</span>
+      );
+    } else {
+      if (newsletter.queue.status === 'scheduled') {
+        return (
+          <span>{MailPoet.I18n.t('scheduledFor')}  { MailPoet.Date.format(newsletter.queue.scheduled_at) } </span>
+        )
+      }
+      const progressClasses = classNames(
+        'mailpoet_progress',
+        { 'mailpoet_progress_complete': newsletter.queue.status === 'completed'}
+      );
+
+      // calculate percentage done
+      const percentage = Math.round(
+        (newsletter.queue.count_processed * 100) / (newsletter.queue.count_total)
+      );
+
+      let label;
+
+      if (newsletter.queue.status === 'completed') {
+        label = (
+          <span>
+            {
+              MailPoet.I18n.t('newsletterQueueCompleted')
+              .replace("%$1d", newsletter.queue.count_processed - newsletter.queue.count_failed)
+              .replace("%$2d", newsletter.queue.count_total)
+            }
+          </span>
+        );
+      } else {
+        label = (
+          <span>
+            { newsletter.queue.count_processed } / { newsletter.queue.count_total }
+            &nbsp;&nbsp;
+            <a
+              id={ 'resume_'+newsletter.id }
+              className="button"
+              style={{ display: (newsletter.queue.status === 'paused') ? 'inline-block': 'none' }}
+              href="javascript:;"
+              onClick={ this.resumeSending.bind(null, newsletter) }
+            >{MailPoet.I18n.t('resume')}</a>
+            <a
+              id={ 'pause_'+newsletter.id }
+              className="button mailpoet_pause"
+              style={{ display: (newsletter.queue.status === null) ? 'inline-block': 'none' }}
+              href="javascript:;"
+              onClick={ this.pauseSending.bind(null, newsletter) }
+            >{MailPoet.I18n.t('pause')}</a>
+          </span>
+        );
+      }
+
+      return (
+        <div>
+          <div className={ progressClasses }>
+              <span
+                className="mailpoet_progress_bar"
+                style={ { width: percentage + "%"} }
+              ></span>
+              <span className="mailpoet_progress_label">
+                { percentage + "%" }
+              </span>
+          </div>
+          <p style={{ textAlign:'center' }}>
+            { label }
+          </p>
+        </div>
+      );
+    }
+  },
+  renderStatistics: function(newsletter) {
+    if (mailpoet_tracking_enabled === false) {
+      return;
+    }
+
+    if (newsletter.statistics && newsletter.queue && newsletter.queue.status !== 'scheduled') {
+      const total_sent = ~~(newsletter.queue.count_processed);
+
+      let percentage_clicked = 0;
+      let percentage_opened = 0;
+      let percentage_unsubscribed = 0;
+
+      if (total_sent > 0) {
+        percentage_clicked = Math.round(
+          (~~(newsletter.statistics.clicked) * 100) / total_sent
+        );
+        percentage_opened = Math.round(
+          (~~(newsletter.statistics.opened) * 100) / total_sent
+        );
+        percentage_unsubscribed = Math.round(
+          (~~(newsletter.statistics.unsubscribed) * 100) / total_sent
+        );
+      }
+
+      return (
+        <span>
+          { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
+        </span>
+      );
+    } else {
+      return (
+        <span>{MailPoet.I18n.t('notSentYet')}</span>
+      );
+    }
+  },
+  renderItem: function(newsletter, actions) {
+    const rowClasses = classNames(
+      'manage-column',
+      'column-primary',
+      'has-row-actions'
+    );
+
+    const segments = newsletter.segments.map(function(segment) {
+      return segment.name
+    }).join(', ');
+
+    return (
+      <div>
+        <td className={ rowClasses }>
+          <strong>
+            <a
+              className="row-title"
+              href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }
+            >{ newsletter.subject }</a>
+          </strong>
+          { actions }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('status') }>
+          { this.renderStatus(newsletter) }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('lists') }>
+          { segments }
+        </td>
+        { (mailpoet_tracking_enabled === true) ? (
+          <td className="column" data-colname={ MailPoet.I18n.t('statistics') }>
+            { this.renderStatistics(newsletter) }
+          </td>
+        ) : null }
+        <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
+          <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
+        </td>
+      </div>
+    );
+  },
+  render: function() {
+    return (
+      <div>
+        <h1 className="title">
+          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+        </h1>
+
+        <ListingTabs tab="standard" />
+
+        <Listing
+          limit={ mailpoet_listing_per_page }
+          location={ this.props.location }
+          params={ this.props.params }
+          endpoint="newsletters"
+          tab="standard"
+          onRenderItem={this.renderItem}
+          columns={columns}
+          bulk_actions={ bulk_actions }
+          item_actions={ newsletter_actions }
+          messages={ messages }
+          auto_refresh={ true }
+          sort_by="updated_at"
+          sort_order="desc"
+        />
+      </div>
+    );
+  }
+});
+
+module.exports = NewsletterListStandard;

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Link } from 'react-router'
+import classNames from 'classnames'
+import MailPoet from 'mailpoet'
+
+const ListingTabs = React.createClass({
+  getInitialState() {
+    return {
+      tab: null,
+      tabs: [
+        {
+          name: 'standard',
+          label: MailPoet.I18n.t('tabStandardTitle'),
+          link: '/standard'
+        },
+        {
+          name: 'welcome',
+          label: MailPoet.I18n.t('tabWelcomeTitle'),
+          link: '/welcome'
+        },
+        {
+          name: 'notification',
+          label: MailPoet.I18n.t('tabNotificationTitle'),
+          link: '/notification'
+        }
+      ]
+    };
+  },
+  render() {
+    const tabs = this.state.tabs.map((tab, index) => {
+      const tabClasses = classNames(
+        'nav-tab',
+        { 'nav-tab-active': (this.props.tab === tab.name) }
+      );
+
+      return (
+        <Link
+          key={ 'tab-'+index }
+          className={ tabClasses }
+          to={ tab.link }
+        >{ tab.label }</Link>
+      );
+    });
+
+    return (
+      <h2 className="nav-tab-wrapper">
+        { tabs }
+      </h2>
+    );
+  }
+});
+
+module.exports = ListingTabs;

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

@@ -0,0 +1,361 @@
+import React from 'react'
+import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
+import { createHashHistory } from 'history'
+
+import Listing from 'listing/listing.jsx'
+import ListingTabs from 'newsletters/listings/tabs.jsx'
+
+import classNames from 'classnames'
+import jQuery from 'jquery'
+import MailPoet from 'mailpoet'
+import _ from 'underscore'
+
+const mailpoet_roles = window.mailpoet_roles || {};
+const mailpoet_segments = window.mailpoet_segments || {};
+const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
+
+const messages = {
+  onTrash(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterTrashed')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersTrashed')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onDelete(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterDeleted')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersDeleted')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  },
+  onRestore(response) {
+    const count = ~~response;
+    let message = null;
+
+    if (count === 1) {
+      message = (
+        MailPoet.I18n.t('oneNewsletterRestored')
+      );
+    } else {
+      message = (
+        MailPoet.I18n.t('multipleNewslettersRestored')
+      ).replace('%$1d', count);
+    }
+    MailPoet.Notice.success(message);
+  }
+};
+
+const columns = [
+  {
+    name: 'subject',
+    label: MailPoet.I18n.t('subject'),
+    sortable: true
+  },
+  {
+    name: 'status',
+    label: MailPoet.I18n.t('status'),
+    width: 145
+  },
+  {
+    name: 'settings',
+    label: MailPoet.I18n.t('settings')
+  },
+  {
+    name: 'statistics',
+    label: MailPoet.I18n.t('statistics'),
+    display: mailpoet_tracking_enabled
+  },
+  {
+    name: 'updated_at',
+    label: MailPoet.I18n.t('lastModifiedOn'),
+    sortable: true
+  }
+];
+
+const bulk_actions = [
+  {
+    name: 'trash',
+    label: MailPoet.I18n.t('trash'),
+    onSuccess: messages.onTrash
+  }
+];
+
+const newsletter_actions = [
+  {
+    name: 'view',
+    link: function(newsletter) {
+      return (
+        <a href={ newsletter.preview_url } target="_blank">
+          {MailPoet.I18n.t('preview')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'edit',
+    link: function(newsletter) {
+      return (
+        <a href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }>
+          {MailPoet.I18n.t('edit')}
+        </a>
+      );
+    }
+  },
+  {
+    name: 'duplicate',
+    label: MailPoet.I18n.t('duplicate'),
+    onClick: function(newsletter, refresh) {
+      return MailPoet.Ajax.post({
+        endpoint: 'newsletters',
+        action: 'duplicate',
+        data: newsletter.id
+      }).done(function(response) {
+        if (response !== false && response.subject !== undefined) {
+          MailPoet.Notice.success(
+            (MailPoet.I18n.t('newsletterDuplicated')).replace(
+              '%$1s', response.subject
+            )
+          );
+        }
+        refresh();
+      });
+    }
+  },
+  {
+    name: 'trash'
+  }
+];
+
+const NewsletterListWelcome = React.createClass({
+  updateStatus: function(e) {
+    // make the event persist so that we can still override the selected value
+    // in the ajax callback
+    e.persist();
+
+    MailPoet.Ajax.post({
+      endpoint: 'newsletters',
+      action: 'setStatus',
+      data: {
+        id: ~~(e.target.getAttribute('data-id')),
+        status: e.target.value
+      }
+    }).done(function(response) {
+      if (response.result === false) {
+        MailPoet.Notice.error(MailPoet.I18n.t('welcomeEmailActivationFailed'));
+
+        // reset value to actual newsletter's status
+         e.target.value = response.status;
+      } else {
+        if (response.status === 'active') {
+          MailPoet.Notice.success(MailPoet.I18n.t('welcomeEmailActivated'));
+        }
+        // force refresh of listing so that groups are updated
+        this.forceUpdate();
+      }
+    }.bind(this));
+  },
+  renderStatus: function(newsletter) {
+    let total_sent;
+    total_sent = (
+      MailPoet.I18n.t('sentToXSubscribers')
+      .replace('%$1d', newsletter.total_sent.toLocaleString())
+    );
+
+    return (
+      <div>
+        <p>
+          <select
+            data-id={ newsletter.id }
+            defaultValue={ newsletter.status }
+            onChange={ this.updateStatus }
+          >
+            <option value="active">{ MailPoet.I18n.t('active') }</option>
+            <option value="draft">{ MailPoet.I18n.t('inactive') }</option>
+          </select>
+        </p>
+        <p>{ total_sent }</p>
+      </div>
+    );
+  },
+  renderSettings: function(newsletter) {
+    let sendingEvent;
+    let sendingDelay;
+
+    // set sending event
+    switch (newsletter.options.event) {
+      case 'user':
+        // WP User
+        if (newsletter.options.role === 'mailpoet_all') {
+          sendingEvent = MailPoet.I18n.t('welcomeEventWPUserAnyRole');
+        } else {
+          sendingEvent = MailPoet.I18n.t('welcomeEventWPUserWithRole').replace(
+            '%$1s', mailpoet_roles[newsletter.options.role]
+          );
+        }
+      break;
+
+      case 'segment':
+        // get segment
+        const segment = _.find(mailpoet_segments, function(segment) {
+          return (~~(segment.id) === ~~(newsletter.options.segment));
+        });
+
+        if (segment === undefined) {
+          return (
+            <span className="mailpoet_error">
+              { MailPoet.I18n.t('sendingToSegmentsNotSpecified') }
+            </span>
+          );
+        } else {
+          sendingEvent = MailPoet.I18n.t('welcomeEventSegment').replace(
+            '%$1s', segment.name
+          );
+        }
+      break;
+    }
+
+    // set sending delay
+    if (sendingEvent) {
+      if (newsletter.options.afterTimeType !== 'immediate') {
+        switch (newsletter.options.afterTimeType) {
+          case 'hours':
+            sendingDelay = MailPoet.I18n.t('sendingDelayHours').replace(
+              '%$1d', newsletter.options.afterTimeNumber
+            );
+          break;
+
+          case 'days':
+            sendingDelay = MailPoet.I18n.t('sendingDelayDays').replace(
+              '%$1d', newsletter.options.afterTimeNumber
+            );
+          break;
+
+          case 'weeks':
+            sendingDelay = MailPoet.I18n.t('sendingDelayWeeks').replace(
+              '%$1d', newsletter.options.afterTimeNumber
+            );
+          break;
+        }
+        sendingEvent += ' [' + sendingDelay + ']';
+      }
+      // add a "period" at the end if we do have a sendingEvent
+      sendingEvent += '.';
+    }
+
+    return (
+      <span>
+        { sendingEvent }
+      </span>
+    );
+  },
+  renderStatistics: function(newsletter) {
+    if (mailpoet_tracking_enabled === false) {
+      return;
+    }
+
+    if (newsletter.total_sent > 0 && newsletter.statistics) {
+      const total_sent = ~~(newsletter.total_sent);
+
+      const percentage_clicked = Math.round(
+        (~~(newsletter.statistics.clicked) * 100) / total_sent
+      );
+      const percentage_opened = Math.round(
+        (~~(newsletter.statistics.opened) * 100) / total_sent
+      );
+      const percentage_unsubscribed = Math.round(
+        (~~(newsletter.statistics.unsubscribed) * 100) / total_sent
+      );
+
+      return (
+        <span>
+          { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
+        </span>
+      );
+    } else {
+      return (
+        <span>{MailPoet.I18n.t('notSentYet')}</span>
+      );
+    }
+  },
+  renderItem: function(newsletter, actions) {
+    const rowClasses = classNames(
+      'manage-column',
+      'column-primary',
+      'has-row-actions'
+    );
+
+    return (
+      <div>
+        <td className={ rowClasses }>
+          <strong>
+            <a
+              className="row-title"
+              href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }
+            >{ newsletter.subject }</a>
+          </strong>
+          { actions }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('status') }>
+          { this.renderStatus(newsletter) }
+        </td>
+        <td className="column" data-colname={ MailPoet.I18n.t('settings') }>
+          { this.renderSettings(newsletter) }
+        </td>
+        { (mailpoet_tracking_enabled === true) ? (
+          <td className="column" data-colname={ MailPoet.I18n.t('statistics') }>
+            { this.renderStatistics(newsletter) }
+          </td>
+        ) : null }
+        <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
+          <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
+        </td>
+      </div>
+    );
+  },
+  render: function() {
+    return (
+      <div>
+        <h1 className="title">
+          { MailPoet.I18n.t('pageTitle') } <Link className="page-title-action" to="/new">{ MailPoet.I18n.t('new') }</Link>
+        </h1>
+
+        <ListingTabs tab="welcome" />
+
+        <Listing
+          limit={ mailpoet_listing_per_page }
+          location={ this.props.location }
+          params={ this.props.params }
+          endpoint="newsletters"
+          tab="welcome"
+          onRenderItem={ this.renderItem }
+          columns={ columns }
+          bulk_actions={ bulk_actions }
+          item_actions={ newsletter_actions }
+          messages={ messages }
+          auto_refresh={ true }
+          sort_by="updated_at"
+          sort_order="desc"
+        />
+      </div>
+    );
+  }
+});
+
+module.exports = NewsletterListWelcome;