Bump up release version to 0.0.30

Wp users

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__
     );
@@ -123,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'
     )));

assets/css/src/admin.styl

@@ -1,6 +1,7 @@
 @import 'nib'
 
 @require 'select2/dist/css/select2.css'
+@require 'datepicker/datepicker'
 
 @require 'common'
 @require 'modal'
@@ -17,3 +18,5 @@
 
 @require 'settings'
 @require 'progress_bar'
+
+@require 'subscribers'

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/newsletter_editor/components/forms.styl

@@ -37,3 +37,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/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
@@ -30,3 +31,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/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

@@ -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,5 @@ $error-text-color = #d54e21
 
 // Dimensions
 $newsletter-width = 660px
+
+$text-line-height = 1.6em

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

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

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,145 @@
+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);
+
+      return Moment(date, this.convertFormat(options.parseFormat))
+        .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) {
+      const 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;
+
+      const replacements = format_mappings['date'];
+
+      let 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

@@ -10,10 +10,13 @@ function(
       return this.props.onValueChange(e);
     },
     render: function() {
-      const isChecked = !!(this.props.item[this.props.field.name]);
+      if (this.props.field.values === undefined) {
+        return false;
+      }
 
+      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 +32,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((
@@ -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
@@ -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
@@ -81,9 +102,9 @@ define([
     constructor(props) {
       super(props);
       this.state = {
-        year: Moment().year(),
-        month: 1,
-        day: 1
+        year: undefined,
+        month: undefined,
+        day: undefined
       }
     }
     componentDidMount() {
@@ -98,7 +119,6 @@ define([
     }
     extractTimeStamp() {
       const timeStamp = parseInt(this.props.item[this.props.field.name], 10);
-
       this.setState({
         year: Moment.unix(timeStamp).year(),
         // Moment returns the month as [0..11]
@@ -112,7 +132,7 @@ define([
         `${this.state.month}/${this.state.day}/${this.state.year}`,
         'M/D/YYYY'
       ).valueOf();
-      if (!isNaN(newTimeStamp) && parseInt(newTimeStamp, 10) > 0) {
+      if (~~(newTimeStamp) > 0) {
         // convert milliseconds to seconds
         newTimeStamp /= 1000;
         return this.props.onValueChange({
@@ -158,6 +178,7 @@ define([
               key={ 'year' }
               name={ this.props.field.name }
               year={ this.state.year }
+              placeholder={ this.props.field.year_placeholder }
             />);
           break;
 
@@ -169,6 +190,7 @@ define([
               name={ this.props.field.name }
               month={ this.state.month }
               monthNames={ monthNames }
+              placeholder={ this.props.field.month_placeholder }
             />);
           break;
 
@@ -179,6 +201,7 @@ define([
               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,54 @@
-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'
 
-      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;
+
+    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;
+    }
+
+    const options = Object.keys(this.props.field.values).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,17 +8,17 @@ import MailPoet from 'mailpoet'
 const columns = [
   {
     name: 'name',
-    label: 'Name',
+    label: MailPoet.I18n.t('formName'),
     sortable: true
   },
   {
     name: 'segments',
-    label: 'Lists',
+    label: MailPoet.I18n.t('segments'),
     sortable: false
   },
   {
     name: 'created_at',
-    label: 'Created on',
+    label: MailPoet.I18n.t('createdOn'),
     sortable: true
   }
 ];
@@ -30,11 +30,11 @@ const messages = {
 
     if(count === 1) {
       message = (
-        '1 form was moved to the trash.'
+        MailPoet.I18n.t('oneFormTrashed')
       );
     } else {
       message = (
-        '%$1d forms were moved to the trash.'
+        MailPoet.I18n.t('multipleFormsTrashed')
       ).replace('%$1d', count);
     }
     MailPoet.Notice.success(message);
@@ -45,11 +45,11 @@ const messages = {
 
     if(count === 1) {
       message = (
-        '1 form was permanently deleted.'
+        MailPoet.I18n.t('oneFormDeleted')
       );
     } else {
       message = (
-        '%$1d forms were permanently deleted.'
+        MailPoet.I18n.t('multipleFormsDeleted')
       ).replace('%$1d', count);
     }
     MailPoet.Notice.success(message);
@@ -60,30 +60,38 @@ const messages = {
 
     if(count === 1) {
       message = (
-        '1 form has been restored from the trash.'
+        MailPoet.I18n.t('oneFormRestored')
       );
     } else {
       message = (
-        '%$1d forms have been restored from the trash.'
+        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',
+    label: MailPoet.I18n.t('duplicate'),
     onClick: function(item, refresh) {
       return MailPoet.Ajax.post({
         endpoint: 'forms',
@@ -91,7 +99,7 @@ const item_actions = [
         data: item.id
       }).done(function(response) {
         MailPoet.Notice.success(
-          ('Form "%$1s" has been duplicated.').replace('%$1s', response.name)
+          (MailPoet.I18n.t('formDuplicated')).replace('%$1s', response.name)
         );
         refresh();
       });
@@ -102,14 +110,6 @@ const item_actions = [
   }
 ];
 
-const bulk_actions = [
-  {
-    name: 'trash',
-    label: 'Trash',
-    onSuccess: messages.onTrash
-  }
-];
-
 const FormList = React.createClass({
   createForm() {
     MailPoet.Ajax.post({
@@ -138,15 +138,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>
     );
@@ -154,20 +157,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 }
@@ -179,4 +182,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() {
@@ -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,10 +1,12 @@
 define([
   'react',
-  'jquery'
+  'jquery',
+  'mailpoet'
 ],
 function(
   React,
-  jQuery
+  jQuery,
+  MailPoet
 ) {
   var ListingFilters = React.createClass({
     handleFilterAction: function() {
@@ -69,7 +71,7 @@ function(
             id="post-query-submit"
             onClick={ this.handleFilterAction }
             type="submit"
-            defaultValue="Filter"
+            defaultValue={MailPoet.I18n.t('filter')}
             className="button" />
         );
       }
@@ -80,7 +82,7 @@ function(
           <input
             onClick={ this.handleEmptyTrash }
             type="submit"
-            value="Empty Trash"
+            value={MailPoet.I18n.t('emptyTrash')}
             className="button"
           />
         );

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,4 +1,12 @@
-define(['react', 'classnames'], function(React, classNames) {
+define([
+    'react',
+    'classnames',
+    'mailpoet'
+  ], function(
+    React,
+    classNames,
+    MailPoet
+  ) {
 
   var ListingHeader = React.createClass({
     handleSelectItems: function() {
@@ -28,7 +36,7 @@ define(['react', 'classnames'], function(React, classNames) {
           <th
             className="manage-column column-cb check-column">
             <label className="screen-reader-text">
-              { 'Select All' }
+              {MailPoet.I18n.t('selectAll')}
             </label>
             <input
               type="checkbox"
@@ -87,4 +95,4 @@ define(['react', 'classnames'], function(React, classNames) {
   });
 
   return ListingHeader;
-});
+});

assets/js/src/listing/listing.jsx

@@ -98,7 +98,7 @@ define(
                       null,
                       this.props.item.id
                     ) }>
-                    Trash
+                    {MailPoet.I18n.t('trash')}
                   </a>
                 </span>
               );
@@ -145,7 +145,7 @@ define(
         } else {
           item_actions = (
             <span className="edit">
-              <Link to={ `/edit/${ this.props.item.id }` }>Edit</Link>
+              <Link to={ `/edit/${ this.props.item.id }` }>{MailPoet.I18n.t('edit')}</Link>
             </span>
           );
         }
@@ -161,7 +161,7 @@ define(
                       null,
                       this.props.item.id
                     )}
-                  >Restore</a>
+                  >{MailPoet.I18n.t('restore')}</a>
                 </span>
                 { ' | ' }
                 <span className="delete">
@@ -172,13 +172,13 @@ define(
                       null,
                       this.props.item.id
                     )}
-                  >Delete permanently</a>
+                  >{MailPoet.I18n.t('deletePermanently')}</a>
                 </span>
               </div>
               <button
                 onClick={ this.handleToggleItem.bind(null, this.props.item.id) }
                 className="toggle-row" type="button">
-                <span className="screen-reader-text">Show more details</span>
+                <span className="screen-reader-text">{MailPoet.I18n.t('showMoreDetails')}</span>
               </button>
             </div>
           );
@@ -191,7 +191,7 @@ define(
               <button
                 onClick={ this.handleToggleItem.bind(null, this.props.item.id) }
                 className="toggle-row" type="button">
-                <span className="screen-reader-text">Show more details</span>
+                <span className="screen-reader-text">{MailPoet.I18n.t('showMoreDetails')}</span>
               </button>
             </div>
           );
@@ -223,8 +223,8 @@ define(
                   className="colspanchange">
                   {
                     (this.props.loading === true)
-                    ? MailPoetI18n.loadingItems
-                    : MailPoetI18n.noItemsFound
+                    ? MailPoet.I18n.t('loadingItems')
+                    : MailPoet.I18n.t('noItemsFound')
                   }
                 </td>
               </tr>
@@ -250,8 +250,8 @@ define(
                   }>
                   {
                     (this.props.selection !== 'all')
-                    ? MailPoetI18n.selectAllLabel
-                    : MailPoetI18n.selectedAllLabel.replace(
+                    ? MailPoet.I18n.t('selectAllLabel')
+                    : MailPoet.I18n.t('selectedAllLabel').replace(
                       '%d',
                       this.props.count
                     )
@@ -261,8 +261,8 @@ define(
                     onClick={ this.props.onSelectAll }
                     href="javascript:;">{
                       (this.props.selection !== 'all')
-                      ? MailPoetI18n.selectAllLink
-                      : MailPoetI18n.clearSelection
+                      ? MailPoet.I18n.t('selectAllLink')
+                      : MailPoet.I18n.t('clearSelection')
                     }</a>
                 </td>
               </tr>
@@ -295,9 +295,9 @@ define(
     });
 
     var Listing = React.createClass({
-      mixins: [
-        Router.History
-      ],
+      contextTypes: {
+        router: React.PropTypes.object.isRequired
+      },
       getInitialState: function() {
         return {
           loading: false,
@@ -359,9 +359,12 @@ define(
             }
           })
         }
+
+        // default overrides
         if(this.props.limit !== undefined) {
           state.limit = Math.abs(~~this.props.limit);
         }
+
         this.setState(state, function() {
           this.getItems();
         }.bind(this));
@@ -398,7 +401,7 @@ define(
 
         if(this.props.location) {
           if(this.props.location.pathname !== params) {
-            this.history.pushState(null, `${params}`)
+            this.context.router.push(`${params}`);
           }
         }
       },
@@ -519,7 +522,7 @@ define(
           group: 'trash'
         }, function(response) {
           MailPoet.Notice.success(
-            MailPoetI18n.permanentlyDeleted.replace('%d', response)
+            MailPoet.I18n.t('permanentlyDeleted').replace('%d', response)
           );
         });
       },
@@ -678,12 +681,12 @@ define(
           bulk_actions = [
             {
               name: 'restore',
-              label: 'Restore',
+              label: MailPoet.I18n.t('restore'),
               onSuccess: this.props.messages.onRestore
             },
             {
               name: 'delete',
-              label: 'Delete permanently',
+              label: MailPoet.I18n.t('deletePermanently'),
               onSuccess: this.props.messages.onDelete
             }
           ];
@@ -730,6 +733,7 @@ define(
             { search }
             <div className="tablenav top clearfix">
               <ListingBulkActions
+                count={ this.state.count }
                 bulk_actions={ bulk_actions }
                 selection={ this.state.selection }
                 selected_ids={ this.state.selected_ids }
@@ -753,8 +757,8 @@ define(
                   onSort={ this.handleSort }
                   onSelectItems={ this.handleSelectItems }
                   selection={ this.state.selection }
-                  sort_by={ this.state.sort_by }
-                  sort_order={ this.state.sort_order }
+                  sort_by={ sort_by }
+                  sort_order={ sort_order }
                   columns={ this.props.columns }
                   is_selectable={ bulk_actions.length > 0 } />
               </thead>
@@ -783,8 +787,8 @@ define(
                   onSort={ this.handleSort }
                   onSelectItems={ this.handleSelectItems }
                   selection={ this.state.selection }
-                  sort_by={ this.state.sort_by }
-                  sort_order={ this.state.sort_order }
+                  sort_by={ sort_by }
+                  sort_order={ sort_order }
                   columns={ this.props.columns }
                   is_selectable={ bulk_actions.length > 0 } />
               </tfoot>
@@ -792,6 +796,7 @@ define(
             </table>
             <div className="tablenav bottom">
               <ListingBulkActions
+                count={ this.state.count }
                 bulk_actions={ bulk_actions }
                 selection={ this.state.selection }
                 selected_ids={ this.state.selected_ids }

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() {
@@ -72,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>
             );
@@ -83,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>
             );
@@ -94,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>
             );
@@ -105,7 +113,7 @@ 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>
             );
@@ -125,22 +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={ 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;
@@ -158,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>
         );
@@ -167,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/blocks/automatedLatestContent.js

@@ -12,9 +12,19 @@ define([
     'newsletter_editor/blocks/button',
     'newsletter_editor/blocks/divider',
     'newsletter_editor/components/communication',
+    'mailpoet',
     'underscore',
     'jquery'
-  ], function(App, BaseBlock, ButtonBlock, DividerBlock, CommunicationComponent, _, jQuery) {
+  ], function(
+    App,
+    BaseBlock,
+    ButtonBlock,
+    DividerBlock,
+    CommunicationComponent,
+    MailPoet,
+    _,
+    jQuery
+  ) {
 
   "use strict";
 
@@ -32,10 +42,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
         imageFullWidth: false, // true|false
+        featuredImagePosition: 'belowTitle', // 'aboveTitle'|'belowTitle'|'none'
         //imageAlignment: 'centerPadded', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
         showAuthor: 'no', // 'no'|'aboveText'|'belowText'
         authorPrecededBy: 'Author:',
@@ -63,7 +73,7 @@ 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:imageFullWidth 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);
     },
@@ -73,7 +83,7 @@ define([
         that.get('_container').get('blocks').reset(content, {parse: true});
         that.trigger('postsChanged');
       }).fail(function(error) {
-        console.log('ALC fetchPosts error', arguments);
+        MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
       });
     },
     /**
@@ -81,7 +91,7 @@ define([
      * ALC posts on each model change
      */
     _scheduleFetchPosts: function() {
-      var timeout = 2000,
+      var timeout = 500,
         that = this;
       if (this._fetchPostsTimer !== undefined) {
         clearTimeout(this._fetchPostsTimer);
@@ -142,9 +152,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_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"),
@@ -273,12 +283,13 @@ 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');
       } 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');
 
         // Reset titleFormat if it was set to List when switching away from displayType=titleOnly
         if (this.model.get('titleFormat') === 'ul') {
@@ -287,6 +298,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) {

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)),
@@ -128,6 +130,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/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 });
@@ -60,11 +60,9 @@ define([
 
         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',
 
-        plugins: "link textcolor mailpoet_custom_fields",
+        plugins: "link textcolor colorpicker mailpoet_custom_fields",
 
         setup: function(editor) {
           editor.on('change', function(e) {
@@ -81,7 +79,7 @@ define([
         },
 
         mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-        mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
+        mailpoet_custom_fields_window_title: MailPoet.I18n.t('customFieldsWindowTitle'),
       });
     },
   });

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 });
@@ -60,11 +60,9 @@ define([
 
         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',
 
-        plugins: "link textcolor mailpoet_custom_fields",
+        plugins: "link textcolor colorpicker mailpoet_custom_fields",
 
         setup: function(editor) {
           editor.on('change', function(e) {
@@ -81,7 +79,7 @@ define([
         },
 
         mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-        mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
+        mailpoet_custom_fields_window_title: MailPoet.I18n.t('customFieldsWindowTitle'),
       });
     },
   });

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

@@ -43,10 +43,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
         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 +88,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:imageFullWidth 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 +101,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 +111,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 +134,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'));
       });
     },
   });
@@ -394,9 +394,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_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"),
@@ -448,11 +448,11 @@ 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');
       } 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');
 
         // Reset titleFormat if it was set to List when switching away from displayType=titleOnly
         if (this.model.get('titleFormat') === 'ul') {
@@ -461,6 +461,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/text.js

@@ -52,21 +52,15 @@ define([
           inline: true,
 
           menubar: false,
-          toolbar1: "styleselect bold italic forecolor | link unlink",
+          toolbar1: "formatselect bold italic forecolor | link unlink",
           toolbar2: "alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_custom_fields",
 
           //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',
 
-            {title: 'Paragraph', block: 'p'},
-          ],
-
-          plugins: "link code textcolor mailpoet_custom_fields",
+          plugins: "link code textcolor colorpicker mailpoet_custom_fields",
 
           setup: function(editor) {
             editor.on('change', function(e) {
@@ -83,7 +77,7 @@ define([
           },
 
           mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-          mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
+          mailpoet_custom_fields_window_title: MailPoet.I18n.t('customFieldsWindowTitle'),
         });
       }
     },

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/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');
       }
     },
@@ -268,8 +284,8 @@ define([
       }
 
       if (App.getConfig().get('validation.validateUnsubscribeLinkPresent') &&
-          JSON.stringify(jsonObject).indexOf("[unsubscribeUrl]") < 0) {
-        this.showValidationError(App.getConfig().get('translations.unsubscribeLinkMissing'));
+          JSON.stringify(jsonObject).indexOf("[link:subscription_unsubscribe_url]") < 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";
 
@@ -230,33 +241,51 @@ define([
         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) {
@@ -264,7 +293,7 @@ define([
             });
           } else {
             MailPoet.Notice.error(
-              App.getConfig().get('translations.newsletterPreviewFailedToSend'),
+              MailPoet.I18n.t('newsletterPreviewFailedToSend'),
               {
                 scroll: true,
                 static: true,

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

@@ -4,39 +4,45 @@ define(
     'react-router',
     'listing/listing.jsx',
     'classnames',
-    'jquery'
+    'jquery',
+    'mailpoet'
   ],
   function(
     React,
     Router,
     Listing,
     classNames,
-    jQuery
+    jQuery,
+    MailPoet
   ) {
     var Link = Router.Link;
 
     var columns = [
       {
         name: 'subject',
-        label: 'Subject',
+        label: MailPoet.I18n.t('subject'),
         sortable: true
       },
       {
         name: 'status',
-        label: 'Status'
+        label: MailPoet.I18n.t('status')
       },
       {
         name: 'segments',
-        label: 'Lists'
+        label: MailPoet.I18n.t('lists')
+      },
+      {
+        name: 'statistics',
+        label: MailPoet.I18n.t('statistics')
       },
       {
         name: 'created_at',
-        label: 'Created on',
+        label: MailPoet.I18n.t('createdOn'),
         sortable: true
       },
       {
         name: 'updated_at',
-        label: 'Last modified on',
+        label: MailPoet.I18n.t('lastModifiedOn'),
         sortable: true
       }
     ];
@@ -48,11 +54,11 @@ define(
 
         if(count === 1) {
           message = (
-            '1 newsletter was moved to the trash.'
+            MailPoet.I18n.t('oneNewsletterTrashed')
           );
         } else {
           message = (
-            '%$1d newsletters were moved to the trash.'
+            MailPoet.I18n.t('multipleNewslettersTrashed')
           ).replace('%$1d', count);
         }
         MailPoet.Notice.success(message);
@@ -63,11 +69,11 @@ define(
 
         if(count === 1) {
           message = (
-            '1 newsletter was permanently deleted.'
+            MailPoet.I18n.t('oneNewsletterDeleted')
           );
         } else {
           message = (
-            '%$1d newsletters were permanently deleted.'
+            MailPoet.I18n.t('multipleNewslettersDeleted')
           ).replace('%$1d', count);
         }
         MailPoet.Notice.success(message);
@@ -78,11 +84,11 @@ define(
 
         if(count === 1) {
           message = (
-            '1 newsletter has been restored from the trash.'
+            MailPoet.I18n.t('oneNewsletterRestored')
           );
         } else {
           message = (
-            '%$1d newsletters have been restored from the trash.'
+            MailPoet.I18n.t('multipleNewslettersRestored')
           ).replace('%$1d', count);
         }
         MailPoet.Notice.success(message);
@@ -92,7 +98,7 @@ define(
     var bulk_actions = [
       {
         name: 'trash',
-        label: 'Trash',
+        label: MailPoet.I18n.t('trash'),
         onSuccess: messages.onTrash
       }
     ];
@@ -103,7 +109,7 @@ define(
         link: function(item) {
           return (
             <a href={ `?page=mailpoet-newsletter-editor&id=${ item.id }` }>
-              Edit
+              {MailPoet.I18n.t('edit')}
             </a>
           );
         }
@@ -135,11 +141,16 @@ define(
         });
       },
       renderStatus: function(item) {
-        if(item.queue === null) {
+        if(!item.queue) {
           return (
-            <span>Not sent yet.</span>
+            <span>{MailPoet.I18n.t('notSentYet')}</span>
           );
         } else {
+          if (item.queue.status === 'scheduled') {
+            return (
+              <span>{MailPoet.I18n.t('scheduledFor')}  { MailPoet.Date.format(item.queue.scheduled_at) } </span>
+            )
+          }
           var progressClasses = classNames(
             'mailpoet_progress',
             { 'mailpoet_progress_complete': item.queue.status === 'completed'}
@@ -155,9 +166,11 @@ define(
           if(item.queue.status === 'completed') {
             label = (
               <span>
-                Sent to {
-                  item.queue.count_processed - item.queue.count_failed
-                } out of { item.queue.count_total }.
+                {
+                  MailPoet.I18n.t('newsletterQueueCompleted')
+                  .replace("%$1d", item.queue.count_processed - item.queue.count_failed)
+                  .replace("%$2d", item.queue.count_total)
+                }
               </span>
             );
           } else {
@@ -171,14 +184,14 @@ define(
                   style={{ display: (item.queue.status === 'paused') ? 'inline-block': 'none' }}
                   href="javascript:;"
                   onClick={ this.resumeSending.bind(null, item) }
-                >Resume</a>
+                >{MailPoet.I18n.t('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>
+                >{MailPoet.I18n.t('pause')}</a>
               </span>
             );
           }
@@ -201,6 +214,31 @@ define(
           );
         }
       },
+      renderStatistics: function(item) {
+        if(!item.statistics || !item.queue || item.queue.count_processed == 0 || item.queue.status === 'scheduled') {
+          return (
+            <span>
+              {MailPoet.I18n.t('notSentYet')}
+            </span>
+          );
+        }
+
+        var percentage_clicked = Math.round(
+          (item.statistics.clicked * 100) / (item.queue.count_processed)
+        );
+        var percentage_opened = Math.round(
+          (item.statistics.opened * 100) / (item.queue.count_processed)
+        );
+        var percentage_unsubscribed = Math.round(
+          (item.statistics.unsubscribed * 100) / (item.queue.count_processed)
+        );
+
+        return (
+          <span>
+            { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
+          </span>
+        );
+      },
       renderItem: function(newsletter, actions) {
         var rowClasses = classNames(
           'manage-column',
@@ -208,12 +246,17 @@ define(
           'has-row-actions'
         );
 
-        var segments = mailpoet_segments.filter(function(segment) {
-          return (jQuery.inArray(segment.id, newsletter.segments) !== -1);
-        }).map(function(segment) {
-          return segment.name;
+        var segments = newsletter.segments.map(function(segment) {
+          return segment.name
         }).join(', ');
 
+        var statistics_column =
+          (!mailpoet_settings.tracking || !mailpoet_settings.tracking.enabled) ?
+            false :
+            <td className="column {statistics_class}" data-colname={ MailPoet.I18n.t('statistics') }>
+              { this.renderStatistics(newsletter) }
+            </td>;
+
         return (
           <div>
             <td className={ rowClasses }>
@@ -222,29 +265,34 @@ define(
               </strong>
               { actions }
             </td>
-            <td className="column" data-colname="Lists">
+            <td className="column" data-colname={ MailPoet.I18n.t('status') }>
               { this.renderStatus(newsletter) }
             </td>
-            <td className="column" data-colname="Lists">
+            <td className="column" data-colname={ MailPoet.I18n.t('lists') }>
               { segments }
             </td>
-            <td className="column-date" data-colname="Subscribed on">
-              <abbr>{ newsletter.created_at }</abbr>
+            { statistics_column }
+            <td className="column-date" data-colname={ MailPoet.I18n.t('createdOn') }>
+              <abbr>{ MailPoet.Date.format(newsletter.created_at) }</abbr>
             </td>
-            <td className="column-date" data-colname="Last modified on">
-              <abbr>{ newsletter.updated_at }</abbr>
+            <td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }>
+              <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
             </td>
           </div>
         );
       },
       render: function() {
+        if (!mailpoet_settings.tracking || !mailpoet_settings.tracking.enabled) {
+          columns = _.without(columns, _.findWhere(columns, {name: 'statistics'}));
+        }
         return (
           <div>
-            <h2 className="title">
-              Newsletters <Link className="add-new-h2" to="/new">New</Link>
-            </h2>
+            <h1 className="title">
+              {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+            </h1>
 
             <Listing
+              limit={ mailpoet_listing_per_page }
               params={ this.props.params }
               endpoint="newsletters"
               onRenderItem={this.renderItem}
@@ -260,4 +308,4 @@ define(
 
     return NewsletterList;
   }
-);
+);

assets/js/src/newsletters/newsletters.jsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Router, Route, IndexRoute, Link } from 'react-router'
+import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
+import { createHashHistory } from 'history'
 import NewsletterList from 'newsletters/list.jsx'
 import NewsletterTypes from 'newsletters/types.jsx'
 import NewsletterTemplates from 'newsletters/templates.jsx'
 import NewsletterSend from 'newsletters/send.jsx'
 import NewsletterStandard from 'newsletters/types/standard.jsx'
-import NewsletterWelcome from 'newsletters/types/welcome.jsx'
-import NewsletterNotification from 'newsletters/types/notification.jsx'
-import createHashHistory from 'history/lib/createHashHistory'
+import NewsletterWelcome from 'newsletters/types/welcome/welcome.jsx'
+import NewsletterNotification from 'newsletters/types/notification/notification.jsx'
 
-let history = createHashHistory({ queryKey: false })
+const history = useRouterHistory(createHashHistory)({ queryKey: false });
 
 const App = React.createClass({
   render() {
@@ -18,7 +18,7 @@ const App = React.createClass({
   }
 });
 
-let container = document.getElementById('newsletters_container');
+const container = document.getElementById('newsletters_container');
 
 if(container) {
   ReactDOM.render((

assets/js/src/newsletters/send.jsx

@@ -2,180 +2,194 @@ define(
   [
     'react',
     'react-router',
+    'underscore',
     'mailpoet',
     'form/form.jsx',
-    'form/fields/selection.jsx',
+    'newsletters/send/standard.jsx',
+    'newsletters/send/notification.jsx',
+    'newsletters/send/welcome.jsx',
     'newsletters/breadcrumb.jsx'
   ],
   function(
     React,
     Router,
+    _,
     MailPoet,
     Form,
-    Selection,
+    StandardNewsletterFields,
+    NotificationNewsletterFields,
+    WelcomeNewsletterFields,
     Breadcrumb
   ) {
 
-    var settings = window.mailpoet_settings || {};
-
-    var fields = [
-      {
-        name: 'subject',
-        label: 'Subject line',
-        tip: "Be creative! It's the first thing your subscribers see."+
-             "Tempt them to open your email.",
-        type: 'text',
-        validation: {
-          'data-parsley-required': true
-        }
-      },
-      {
-        name: 'segments',
-        label: 'Segments',
-        tip: "The subscriber segment that will be used for this campaign.",
-        type: 'selection',
-        placeholder: "Select a segment",
-        id: "mailpoet_segments",
-        endpoint: "segments",
-        multiple: true,
-        filter: function(segment) {
-          return !!(!segment.deleted_at);
-        },
-        validation: {
-          'data-parsley-required': true
-        }
-      },
-      {
-        name: 'sender',
-        label: 'Sender',
-        tip: "Name & email of yourself or your company.",
-        fields: [
-          {
-            name: 'sender_name',
-            type: 'text',
-            placeholder: 'John Doe',
-            defaultValue: (settings.sender !== undefined) ? settings.sender.name : '',
-            validation: {
-              'data-parsley-required': true
-            }
-          },
-          {
-            name: 'sender_address',
-            type: 'text',
-            placeholder: 'john.doe@email.com',
-            defaultValue: (settings.sender !== undefined) ? settings.sender.address : '',
-            validation: {
-              'data-parsley-required': true,
-              'data-parsley-type': 'email'
-            }
-          }
-        ]
-      },
-      {
-        name: 'reply-to',
-        label: 'Reply-to',
-        tip: 'When the subscribers hit "reply" this is who will receive their '+
-             'email.',
-        inline: true,
-        fields: [
-          {
-            name: 'reply_to_name',
-            type: 'text',
-            placeholder: 'John Doe',
-            defaultValue: (settings.reply_to !== undefined) ? settings.reply_to.name : '',
-          },
-          {
-            name: 'reply_to_address',
-            type: 'text',
-            placeholder: 'john.doe@email.com',
-            defaultValue: (settings.reply_to !== undefined) ? settings.reply_to.address : ''
-          },
-        ]
-      }
-    ];
-
-    var messages = {
-      onUpdate: function() {
-        MailPoet.Notice.success('Newsletter successfully updated!');
-      },
-      onCreate: function() {
-        MailPoet.Notice.success('Newsletter successfully added!');
-      }
-    };
-
     var NewsletterSend = React.createClass({
-      mixins: [
-        Router.History
-      ],
-      handleSend: function() {
-        if(jQuery('#mailpoet_newsletter').parsley().validate() === true) {
+      contextTypes: {
+        router: React.PropTypes.object.isRequired
+      },
+      getInitialState: function() {
+        return {
+          fields: [],
+          item: {},
+          loading: false,
+        };
+      },
+      getFieldsByNewsletter: function(newsletter) {
+        switch(newsletter.type) {
+          case 'notification': return NotificationNewsletterFields;
+          case 'welcome': return WelcomeNewsletterFields;
+          default: return StandardNewsletterFields;
+        }
+      },
+      isAutomatedNewsletter: function() {
+        return this.state.item.type !== 'standard';
+      },
+      isValid: function() {
+        return jQuery('#mailpoet_newsletter').parsley().isValid();
+      },
+      componentDidMount: function() {
+        if(this.isMounted()) {
+          this.loadItem(this.props.params.id);
+        }
+        jQuery('#mailpoet_newsletter').parsley();
+      },
+      componentWillReceiveProps: function(props) {
+        this.loadItem(props.params.id);
+      },
+      loadItem: function(id) {
+        this.setState({ loading: true });
+
+        MailPoet.Ajax.post({
+          endpoint: 'newsletters',
+          action: 'get',
+          data: id
+        }).done((response) => {
+          if(response === false) {
+            this.setState({
+              loading: false,
+              item: {},
+            }, function() {
+              this.context.router.push('/new');
+            }.bind(this));
+          } else {
+            this.setState({
+              loading: false,
+              item: response,
+              fields: this.getFieldsByNewsletter(response),
+            });
+          }
+        });
+      },
+      handleSend: function(e) {
+        e.preventDefault();
+
+        if(!this.isValid()) {
+          jQuery('#mailpoet_newsletter').parsley().validate();
+        } else {
+          this.setState({ loading: true });
+
           MailPoet.Ajax.post({
-            endpoint: 'sendingQueue',
-            action: 'add',
-            data: {
-              newsletter_id: this.props.params.id,
-              segments: jQuery('#mailpoet_segments').val(),
-              sender: {
-                'name': jQuery('#mailpoet_newsletter [name="sender_name"]').val(),
-                'address': jQuery('#mailpoet_newsletter [name="sender_address"]').val()
-              },
-              reply_to: {
-                'name': jQuery('#mailpoet_newsletter [name="reply_to_name"]').val(),
-                'address': jQuery('#mailpoet_newsletter [name="reply_to_address"]').val()
-              }
+            endpoint: 'newsletters',
+            action: 'save',
+            data: this.state.item,
+          }).then((response) => {
+            if (response.result === true) {
+              return MailPoet.Ajax.post({
+                endpoint: 'sendingQueue',
+                action: 'add',
+                data: _.extend({}, this.state.item, {
+                  newsletter_id: this.props.params.id,
+                }),
+              });
+            } else {
+              return response;
             }
-          }).done(function(response) {
+          }).done((response) => {
+            this.setState({ loading: false });
             if(response.result === true) {
-              this.history.pushState(null, '/');
-              MailPoet.Notice.success(
-                'The newsletter is being sent...'
-              );
+              this.context.router.push('/');
+              MailPoet.Notice.success(response.data.message);
             } else {
               if(response.errors) {
-                MailPoet.Notice.error(
-                  response.errors.join("<br />")
-                );
+                MailPoet.Notice.error(response.errors);
               } else {
                 MailPoet.Notice.error(
-                  'An error occurred while trying to send. '+
-                  '<a href="?page=mailpoet-settings">Check your settings.</a>'
+                  MailPoet.I18n.t('newsletterSendingError').replace("%$1s", '?page=mailpoet-settings')
                 );
               }
             }
-          }.bind(this));
+          });
         }
+        return false;
+      },
+      handleSave: function(e) {
+        e.preventDefault();
+        this.setState({ loading: true });
+
+        MailPoet.Ajax.post({
+          endpoint: 'newsletters',
+          action: 'save',
+          data: this.state.item,
+        }).done((response) => {
+          this.setState({ loading: false });
+
+          if(response.result === true) {
+            this.context.router.push('/');
+            MailPoet.Notice.success(
+              MailPoet.I18n.t('newsletterUpdated')
+            );
+          } else {
+            if(response.errors) {
+              MailPoet.Notice.error(response.errors);
+            }
+          }
+        });
+      },
+      handleFormChange: function(e) {
+        var item = this.state.item,
+          field = e.target.name;
+
+        item[field] = e.target.value;
+
+        this.setState({
+          item: item
+        });
+        return true;
       },
       render: function() {
         return (
           <div>
-            <h1>Final step: last details</h1>
+            <h1>{MailPoet.I18n.t('finalNewsletterStep')}</h1>
 
             <Breadcrumb step="send" />
 
             <Form
               id="mailpoet_newsletter"
-              endpoint="newsletters"
-              fields={ fields }
-              params={ this.props.params }
-              messages={ messages }
+              fields={ this.state.fields }
+              item={ this.state.item }
+              loading={ this.state.loading }
+              onChange={this.handleFormChange}
+              onSubmit={this.handleSave}
             >
               <p className="submit">
                 <input
                   className="button button-primary"
                   type="button"
                   onClick={ this.handleSend }
-                  value="Send" />
+                  value={
+                    this.isAutomatedNewsletter()
+                    ? MailPoet.I18n.t('activate')
+                    : MailPoet.I18n.t('send')} />
                 &nbsp;
                 <input
                   className="button button-secondary"
                   type="submit"
-                  value="Save as draft and close" />
-                &nbsp;or simply&nbsp;
+                  value={MailPoet.I18n.t('saveDraftAndClose')} />
+                &nbsp;{MailPoet.I18n.t('orSimply')}&nbsp;
                 <a
                   href={
                     '?page=mailpoet-newsletter-editor&id='+this.props.params.id
                   }>
-                  go back to design
+                  {MailPoet.I18n.t('goBackToDesign')}
                 </a>.
               </p>
             </Form>
@@ -186,4 +200,4 @@ define(
 
     return NewsletterSend;
   }
-);
+);

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

@@ -0,0 +1,100 @@
+define(
+  [
+    'mailpoet',
+    'newsletters/types/notification/scheduling.jsx'
+  ],
+  function(
+    MailPoet,
+    Scheduling
+  ) {
+
+    var settings = window.mailpoet_settings || {};
+
+    var fields = [
+      {
+        name: 'subject',
+        label: MailPoet.I18n.t('subjectLine'),
+        tip: MailPoet.I18n.t('postNotificationSubjectLineTip'),
+        type: 'text',
+        validation: {
+          'data-parsley-required': true,
+          'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError')
+        }
+      },
+      {
+        name: 'options',
+        label: MailPoet.I18n.t('selectPeriodicity'),
+        type: 'reactComponent',
+        component: Scheduling,
+      },
+      {
+        name: 'segments',
+        label: MailPoet.I18n.t('segments'),
+        tip: MailPoet.I18n.t('segmentsTip'),
+        type: 'selection',
+        placeholder: MailPoet.I18n.t('selectSegmentPlaceholder'),
+        id: "mailpoet_segments",
+        endpoint: "segments",
+        multiple: true,
+        filter: function(segment) {
+          return !!(!segment.deleted_at);
+        },
+        getLabel: function(segment) {
+          var name = segment.name;
+          if (segment.subscribers > 0) {
+            name += ' (%$1s)'.replace('%$1s', parseInt(segment.subscribers).toLocaleString());
+          }
+          return name;
+        },
+        validation: {
+          'data-parsley-required': true,
+          'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError')
+        }
+      },
+      {
+        name: 'sender',
+        label: MailPoet.I18n.t('sender'),
+        tip: MailPoet.I18n.t('senderTip'),
+        fields: [
+          {
+            name: 'sender_name',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('senderNamePlaceholder'),
+            validation: {
+              'data-parsley-required': true
+            }
+          },
+          {
+            name: 'sender_address',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('senderAddressPlaceholder'),
+            validation: {
+              'data-parsley-required': true,
+              'data-parsley-type': 'email'
+            }
+          }
+        ]
+      },
+      {
+        name: 'reply-to',
+        label: MailPoet.I18n.t('replyTo'),
+        tip: MailPoet.I18n.t('replyToTip'),
+        inline: true,
+        fields: [
+          {
+            name: 'reply_to_name',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('replyToNamePlaceholder')
+          },
+          {
+            name: 'reply_to_address',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('replyToAddressPlaceholder')
+          }
+        ]
+      }
+    ];
+
+    return fields;
+  }
+);

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

@@ -0,0 +1,406 @@
+define(
+  [
+    'react',
+    'jquery',
+    'underscore',
+    'mailpoet',
+    'form/fields/checkbox.jsx',
+    'form/fields/select.jsx',
+    'form/fields/text.jsx',
+  ],
+  function(
+    React,
+    jQuery,
+    _,
+    MailPoet,
+    Checkbox,
+    Select,
+    Text
+  ) {
+
+    var settings = window.mailpoet_settings || {},
+        currentTime = window.mailpoet_current_time || '00:00',
+        defaultDateTime = window.mailpoet_current_date + ' ' + '00:00:00';
+        timeOfDayItems = window.mailpoet_schedule_time_of_day,
+        dateDisplayFormat = window.mailpoet_date_display_format,
+        dateStorageFormat = window.mailpoet_date_storage_format;
+
+    var datepickerTranslations = {
+      closeText: MailPoet.I18n.t('close'),
+      currentText: MailPoet.I18n.t('today'),
+      nextText: MailPoet.I18n.t('next'),
+      prevText: MailPoet.I18n.t('previous'),
+      monthNames: [
+        MailPoet.I18n.t('january'),
+        MailPoet.I18n.t('february'),
+        MailPoet.I18n.t('march'),
+        MailPoet.I18n.t('april'),
+        MailPoet.I18n.t('may'),
+        MailPoet.I18n.t('june'),
+        MailPoet.I18n.t('july'),
+        MailPoet.I18n.t('august'),
+        MailPoet.I18n.t('september'),
+        MailPoet.I18n.t('october'),
+        MailPoet.I18n.t('november'),
+        MailPoet.I18n.t('december')
+      ],
+      monthNamesShort: [
+        MailPoet.I18n.t('januaryShort'),
+        MailPoet.I18n.t('februaryShort'),
+        MailPoet.I18n.t('marchShort'),
+        MailPoet.I18n.t('aprilShort'),
+        MailPoet.I18n.t('mayShort'),
+        MailPoet.I18n.t('juneShort'),
+        MailPoet.I18n.t('julyShort'),
+        MailPoet.I18n.t('augustShort'),
+        MailPoet.I18n.t('septemberShort'),
+        MailPoet.I18n.t('octoberShort'),
+        MailPoet.I18n.t('novemberShort'),
+        MailPoet.I18n.t('decemberShort')
+      ],
+      dayNames: [
+        MailPoet.I18n.t('sunday'),
+        MailPoet.I18n.t('monday'),
+        MailPoet.I18n.t('tuesday'),
+        MailPoet.I18n.t('wednesday'),
+        MailPoet.I18n.t('thursday'),
+        MailPoet.I18n.t('friday'),
+        MailPoet.I18n.t('saturday')
+      ],
+      dayNamesShort: [
+        MailPoet.I18n.t('sundayShort'),
+        MailPoet.I18n.t('mondayShort'),
+        MailPoet.I18n.t('tuesdayShort'),
+        MailPoet.I18n.t('wednesdayShort'),
+        MailPoet.I18n.t('thursdayShort'),
+        MailPoet.I18n.t('fridayShort'),
+        MailPoet.I18n.t('saturdayShort')
+      ],
+      dayNamesMin: [
+        MailPoet.I18n.t('sundayMin'),
+        MailPoet.I18n.t('mondayMin'),
+        MailPoet.I18n.t('tuesdayMin'),
+        MailPoet.I18n.t('wednesdayMin'),
+        MailPoet.I18n.t('thursdayMin'),
+        MailPoet.I18n.t('fridayMin'),
+        MailPoet.I18n.t('saturdayMin')
+      ],
+    };
+
+    var DateText = React.createClass({
+      onChange: function(event) {
+        // Swap display format to storage format
+        var displayDate = event.target.value,
+            storageDate = this.getStorageDate(displayDate);
+
+        event.target.value = storageDate;
+        this.props.onChange(event);
+      },
+      componentDidMount: function() {
+        var $element = jQuery(this.refs.dateInput),
+            that = this;
+        if ($element.datepicker) {
+          // Override jQuery UI datepicker Date parsing and formatting
+          jQuery.datepicker.parseDate = function(format, value) {
+            // Transform string format to Date object
+            return MailPoet.Date.toDate(value, {
+              parseFormat: dateDisplayFormat,
+              format: format
+            });
+          };
+          jQuery.datepicker.formatDate = function(format, value) {
+            // Transform Date object to string format
+            var newValue = MailPoet.Date.format(value, {
+              format: format
+            });
+            return newValue;
+          };
+
+          $element.datepicker(_.extend({
+            dateFormat: this.props.displayFormat,
+            isRTL: false,
+            onSelect: function(value) {
+              that.onChange({
+                target: {
+                  name: that.getFieldName(),
+                  value: value,
+                },
+              });
+            },
+          }, datepickerTranslations));
+
+          this.datepickerInitialized = true;
+        }
+      },
+      componentWillUnmount: function() {
+        if (this.datepickerInitialized) {
+          jQuery(this.refs.dateInput).datepicker('destroy');
+        }
+      },
+      getFieldName: function() {
+        return this.props.name || 'date';
+      },
+      getDisplayDate: function(date) {
+        return MailPoet.Date.format(date, {
+          parseFormat: this.props.storageFormat,
+          format: this.props.displayFormat
+        });
+      },
+      getStorageDate: function(date) {
+        return MailPoet.Date.format(date, {
+          parseFormat: this.props.displayFormat,
+          format: this.props.storageFormat
+        });
+      },
+      render: function() {
+        return (
+          <input
+            type="text"
+            size="10"
+            name={this.getFieldName()}
+            value={this.getDisplayDate(this.props.value)}
+            readOnly={ true }
+            onChange={this.onChange}
+            ref="dateInput"
+            {...this.props.validation} />
+        );
+      },
+    });
+
+    var TimeSelect = React.createClass({
+      render: function() {
+        const options = Object.keys(timeOfDayItems).map(
+          (value, index) => {
+            return (
+              <option
+                key={ 'option-' + index }
+                value={ value }>
+                { timeOfDayItems[value] }
+              </option>
+            );
+          }
+        );
+
+        return (
+          <select
+            name={this.props.name || 'time'}
+            value={this.props.value}
+            onChange={this.props.onChange}
+            {...this.props.validation}
+          >
+            {options}
+          </select>
+        );
+      }
+    });
+
+    var DateTime = React.createClass({
+      _DATE_TIME_SEPARATOR: " ",
+      getInitialState: function() {
+        return this._buildStateFromProps(this.props);
+      },
+      componentWillReceiveProps: function(nextProps) {
+        this.setState(this._buildStateFromProps(nextProps));
+      },
+      _buildStateFromProps: function(props) {
+        let value = props.value || defaultDateTime;
+        const [date, time] = value.split(this._DATE_TIME_SEPARATOR)
+        return {
+          date: date,
+          time: time,
+        };
+      },
+      handleChange: function(event) {
+        var newState = {};
+        newState[event.target.name] = event.target.value;
+
+        this.setState(newState, function() {
+          this.propagateChange();
+        });
+      },
+      propagateChange: function() {
+        if (this.props.onChange) {
+          return this.props.onChange({
+            target: {
+              name: this.props.name || '',
+              value: this.getDateTime(),
+            }
+          })
+        }
+      },
+      getDateTime: function() {
+        return [this.state.date, this.state.time].join(this._DATE_TIME_SEPARATOR);
+      },
+      render: function() {
+        return (
+          <span>
+            <DateText
+              name="date"
+              value={this.state.date}
+              onChange={this.handleChange}
+              displayFormat={dateDisplayFormat}
+              storageFormat={dateStorageFormat}
+              validation={this.props.dateValidation}/>
+            <TimeSelect
+              name="time"
+              value={this.state.time}
+              onChange={this.handleChange}
+              validation={this.props.timeValidation} />
+          </span>
+        );
+      }
+    });
+
+    var StandardScheduling = React.createClass({
+      _getCurrentValue: function() {
+        return this.props.item[this.props.field.name] || {};
+      },
+      handleValueChange: function(event) {
+        var oldValue = this._getCurrentValue(),
+            newValue = {};
+        newValue[event.target.name] = event.target.value;
+
+        return this.props.onValueChange({
+          target: {
+            name: this.props.field.name,
+            value: _.extend({}, oldValue, newValue)
+          }
+        });
+      },
+      handleCheckboxChange: function(event) {
+        event.target.value = this.refs.isScheduled.checked ? '1' : '0';
+        return this.handleValueChange(event);
+      },
+      isScheduled: function() {
+        return this._getCurrentValue().isScheduled === '1';
+      },
+      getDateValidation: function() {
+        return {
+          'data-parsley-required': true,
+          'data-parsley-required-message': MailPoet.I18n.t('noScheduledDateError'),
+          'data-parsley-errors-container': '#mailpoet_scheduling',
+        };
+      },
+      render: function() {
+        var schedulingOptions;
+
+        if (this.isScheduled()) {
+          schedulingOptions = (
+            <span id="mailpoet_scheduling">
+              <DateTime
+                name="scheduledAt"
+                value={this._getCurrentValue().scheduledAt}
+                onChange={this.handleValueChange} 
+                dateValidation={this.getDateValidation()} />
+              &nbsp;
+              <span>
+                {MailPoet.I18n.t('websiteTimeIs')} <code>{currentTime}</code>
+              </span>
+            </span>
+          );
+        }
+
+        return (
+          <div>
+            <input
+              ref="isScheduled"
+              type="checkbox"
+              value="1"
+              checked={this.isScheduled()}
+              name="isScheduled"
+              onChange={this.handleCheckboxChange} />
+
+            {schedulingOptions}
+          </div>
+        );
+      },
+    });
+
+    var fields = [
+      {
+        name: 'subject',
+        label: MailPoet.I18n.t('subjectLine'),
+        tip: MailPoet.I18n.t('subjectLineTip'),
+        type: 'text',
+        validation: {
+          'data-parsley-required': true,
+          'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError')
+        }
+      },
+      {
+        name: 'segments',
+        label: MailPoet.I18n.t('segments'),
+        tip: MailPoet.I18n.t('segmentsTip'),
+        type: 'selection',
+        placeholder: MailPoet.I18n.t('selectSegmentPlaceholder'),
+        id: "mailpoet_segments",
+        endpoint: "segments",
+        multiple: true,
+        filter: function(segment) {
+          return !!(!segment.deleted_at);
+        },
+        getLabel: function(segment) {
+          var name = segment.name;
+          if (segment.subscribers > 0) {
+            name += ' (%$1s)'.replace('%$1s', parseInt(segment.subscribers).toLocaleString());
+          }
+          return name;
+        },
+        validation: {
+          'data-parsley-required': true,
+          'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError')
+        }
+      },
+      {
+        name: 'sender',
+        label: MailPoet.I18n.t('sender'),
+        tip: MailPoet.I18n.t('senderTip'),
+        fields: [
+          {
+            name: 'sender_name',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('senderNamePlaceholder'),
+            validation: {
+              'data-parsley-required': true
+            }
+          },
+          {
+            name: 'sender_address',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('senderAddressPlaceholder'),
+            validation: {
+              'data-parsley-required': true,
+              'data-parsley-type': 'email'
+            }
+          }
+        ]
+      },
+      {
+        name: 'reply-to',
+        label: MailPoet.I18n.t('replyTo'),
+        tip: MailPoet.I18n.t('replyToTip'),
+        inline: true,
+        fields: [
+          {
+            name: 'reply_to_name',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('replyToNamePlaceholder')
+          },
+          {
+            name: 'reply_to_address',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('replyToAddressPlaceholder')
+          }
+        ]
+      },
+      {
+        name: 'options',
+        label: MailPoet.I18n.t('scheduleIt'),
+        type: 'reactComponent',
+        component: StandardScheduling,
+      }
+    ];
+
+    return fields;
+  }
+);

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

@@ -0,0 +1,77 @@
+define(
+  [
+    'mailpoet',
+    'newsletters/types/welcome/scheduling.jsx'
+  ],
+  function(
+    MailPoet,
+    Scheduling
+  ) {
+
+    var settings = window.mailpoet_settings || {};
+
+    var fields = [
+      {
+        name: 'subject',
+        label: MailPoet.I18n.t('subjectLine'),
+        tip: MailPoet.I18n.t('subjectLineTip'),
+        type: 'text',
+        validation: {
+          'data-parsley-required': true,
+          'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError')
+        }
+      },
+      {
+        name: 'options',
+        label: MailPoet.I18n.t('sendWelcomeEmailWhen'),
+        type: 'reactComponent',
+        component: Scheduling,
+      },
+      {
+        name: 'sender',
+        label: MailPoet.I18n.t('sender'),
+        tip: MailPoet.I18n.t('senderTip'),
+        fields: [
+          {
+            name: 'sender_name',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('senderNamePlaceholder'),
+            validation: {
+              'data-parsley-required': true
+            }
+          },
+          {
+            name: 'sender_address',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('senderAddressPlaceholder'),
+            validation: {
+              'data-parsley-required': true,
+              'data-parsley-type': 'email'
+            }
+          }
+        ]
+      },
+      {
+        name: 'reply-to',
+        label: MailPoet.I18n.t('replyTo'),
+        tip: MailPoet.I18n.t('replyToTip'),
+        inline: true,
+        fields: [
+          {
+            name: 'reply_to_name',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('replyToNamePlaceholder')
+          },
+          {
+            name: 'reply_to_address',
+            type: 'text',
+            placeholder: MailPoet.I18n.t('replyToAddressPlaceholder')
+          }
+        ]
+      }
+    ];
+
+    return fields;
+  }
+);
+

assets/js/src/newsletters/templates.jsx

@@ -24,11 +24,14 @@ define(
           template.body = JSON.stringify(template.body);
         }
 
+        MailPoet.Modal.loading(true);
+
         MailPoet.Ajax.post({
           endpoint: 'newsletterTemplates',
           action: 'save',
           data: template
         }).done(function(response) {
+          MailPoet.Modal.loading(false);
           if(response.result === true) {
             this.props.onImport(template);
           } else {
@@ -51,7 +54,7 @@ define(
           try {
             saveTemplate(JSON.parse(e.target.result));
           } catch (err) {
-            MailPoet.Notice.error('This template file appears to be malformed. Please try another one.');
+            MailPoet.Notice.error(MailPoet.I18n.t('templateFileMalformedError'));
           }
         }.bind(this);
 
@@ -60,15 +63,15 @@ define(
       render: function() {
         return (
           <div>
-            <h2>Import a template</h2>
+            <h2>{MailPoet.I18n.t('importTemplateTitle')}</h2>
             <form onSubmit={this.handleSubmit}>
-              <input type="file" placeholder="Select a .json file to upload" ref="templateFile" />
+              <input type="file" placeholder={MailPoet.I18n.t('selectJsonFileToUpload')} ref="templateFile" />
 
               <p className="submit">
                 <input
                   className="button button-primary"
                   type="submit"
-                  value="Upload" />
+                  value={MailPoet.I18n.t('upload')} />
               </p>
             </form>
           </div>
@@ -77,9 +80,6 @@ define(
     });
 
     var NewsletterTemplates = React.createClass({
-      mixins: [
-        Router.History
-      ],
       getInitialState: function() {
         return {
           loading: false,
@@ -92,19 +92,22 @@ define(
       getTemplates: function() {
         this.setState({ loading: true });
 
+        MailPoet.Modal.loading(true);
+
         MailPoet.Ajax.post({
           endpoint: 'newsletterTemplates',
           action: 'getAll',
         }).done(function(response) {
+          MailPoet.Modal.loading(false);
           if(this.isMounted()) {
 
             if(response.length === 0) {
               response = [
                 {
                   name:
-                    "MailPoet's Guide",
+                    MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
                   description:
-                    "This is the standard template that comes with MailPoet.",
+                    MailPoet.I18n.t('mailpoetGuideTemplateDescription'),
                   readonly: "1"
                 }
               ]
@@ -149,7 +152,9 @@ define(
         this.setState({ loading: true });
         if(
           window.confirm(
-            'You are about to delete the template named "'+ template.name +'"'
+            (
+              MailPoet.I18n.t('confirmTemplateDeletion')
+            ).replace("%$1s", template.name)
           )
         ) {
           MailPoet.Ajax.post({
@@ -181,7 +186,7 @@ define(
                 href="javascript:;"
                 onClick={ this.handleDeleteTemplate.bind(null, template) }
               >
-                Delete
+                {MailPoet.I18n.t('delete')}
               </a>
             </div>
           ), thumbnail = '';
@@ -212,7 +217,7 @@ define(
                     className="button button-primary"
                     onClick={ this.handleSelectTemplate.bind(null, template) }
                   >
-                    Select
+                    {MailPoet.I18n.t('select')}
                   </a>
                   &nbsp;
                   <a
@@ -220,7 +225,7 @@ define(
                     className="button button-secondary"
                     onClick={ this.handlePreviewTemplate.bind(null, template) }
                   >
-                    Preview
+                    {MailPoet.I18n.t('preview')}
                   </a>
               </div>
               { (template.readonly === "1") ? false : deleteLink }
@@ -236,7 +241,7 @@ define(
 
         return (
           <div>
-            <h1>Select a template</h1>
+            <h1>{MailPoet.I18n.t('selectTemplateTitle')}</h1>
 
             <Breadcrumb step="template" />
 

assets/js/src/newsletters/types.jsx

@@ -12,12 +12,12 @@ define(
     Breadcrumb
   ) {
     var NewsletterTypes = React.createClass({
-      mixins: [
-        Router.History
-      ],
+      contextTypes: {
+        router: React.PropTypes.object.isRequired
+      },
       setupNewsletter: function(type) {
         if(type !== undefined) {
-          this.history.pushState(null, `/new/${type}`);
+          this.context.router.push(`/new/${type}`);
         }
       },
       createNewsletter: function(type) {
@@ -26,11 +26,11 @@ define(
           action: 'create',
           data: {
             type: type,
-            subject: 'Draft newsletter',
+            subject: MailPoet.I18n.t('draftNewsletterTitle'),
           }
         }).done(function(response) {
           if(response.result && response.newsletter.id) {
-            this.history.pushState(null, `/template/${response.newsletter.id}`);
+            this.context.router.push(`/template/${response.newsletter.id}`);
           } else {
             if(response.errors.length > 0) {
               response.errors.map(function(error) {
@@ -43,7 +43,7 @@ define(
       render: function() {
         return (
           <div>
-            <h1>Pick a type of campaign</h1>
+            <h1>{MailPoet.I18n.t('pickCampaignType')}</h1>
 
             <Breadcrumb step="type" />
 
@@ -52,10 +52,9 @@ define(
                 <div className="mailpoet_thumbnail"></div>
 
                 <div className="mailpoet_description">
-                  <h3>Newsletter</h3>
+                  <h3>{MailPoet.I18n.t('regularNewsletterTypeTitle')}</h3>
                   <p>
-                    Send a newsletter with images, buttons, dividers,
-                    and social bookmarks. Or a simple email.
+                    {MailPoet.I18n.t('regularNewsletterTypeDescription')}
                   </p>
                 </div>
 
@@ -64,7 +63,7 @@ define(
                     className="button button-primary"
                     onClick={ this.createNewsletter.bind(null, 'standard') }
                   >
-                    Create
+                    {MailPoet.I18n.t('create')}
                   </a>
                 </div>
               </li>
@@ -73,9 +72,9 @@ define(
                 <div className="mailpoet_thumbnail"></div>
 
                 <div className="mailpoet_description">
-                  <h3>Welcome email</h3>
+                  <h3>{MailPoet.I18n.t('welcomeNewsletterTypeTitle')}</h3>
                   <p>
-                    Send an email for new users.
+                    {MailPoet.I18n.t('welcomeNewsletterTypeDescription')}
                   </p>
                 </div>
 
@@ -84,7 +83,7 @@ define(
                     className="button button-primary"
                     onClick={ this.setupNewsletter.bind(null, 'welcome') }
                   >
-                    Set up
+                    {MailPoet.I18n.t('setUp')}
                   </a>
                 </div>
               </li>
@@ -93,9 +92,9 @@ define(
                 <div className="mailpoet_thumbnail"></div>
 
                 <div className="mailpoet_description">
-                  <h3>Post notifications</h3>
+                  <h3>{MailPoet.I18n.t('postNotificationNewsletterTypeTitle')}</h3>
                   <p>
-                    Automatically send posts immediately, daily, weekly or monthly. Filter by categories, if you like.
+                    {MailPoet.I18n.t('postNotificationsNewsletterTypeDescription')}
                   </p>
                 </div>
 
@@ -104,7 +103,7 @@ define(
                     className="button button-primary"
                     onClick={ this.setupNewsletter.bind(null, 'notification') }
                   >
-                    Set up
+                    {MailPoet.I18n.t('setUp')}
                   </a>
                 </div>
               </li>

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

@@ -1,227 +0,0 @@
-define(
-  [
-    'underscore',
-    'react',
-    'react-router',
-    'mailpoet',
-    'form/form.jsx',
-    'form/fields/select.jsx',
-    'form/fields/selection.jsx',
-    'form/fields/text.jsx',
-    'newsletters/breadcrumb.jsx'
-  ],
-  function(
-    _,
-    React,
-    Router,
-    MailPoet,
-    Form,
-    Select,
-    Selection,
-    Text,
-    Breadcrumb
-  ) {
-
-    var intervalField = {
-      name: 'interval',
-      values: {
-        'daily': 'Once a day at...',
-        'weekly': 'Weekly on...',
-        'monthly': 'Monthly on the...',
-        'nthWeekDay': 'Monthly every...',
-        'immediately': 'Immediately.',
-      },
-    };
-
-    var SECONDS_IN_DAY = 86400;
-    var TIME_STEP_SECONDS = 3600; // Default: 3600
-    var numberOfTimeSteps = SECONDS_IN_DAY / TIME_STEP_SECONDS;
-    var timeOfDayValues = _.object(_.map(
-      _.times(numberOfTimeSteps, function(step) { return step * TIME_STEP_SECONDS; }),
-      function(seconds) {
-        var date = new Date(null);
-        date.setSeconds(seconds);
-        var timeLabel = date.toISOString().substr(11, 5);
-        return [seconds, timeLabel];
-      }
-    ));
-    var timeOfDayField = {
-      name: 'timeOfDay',
-      values: timeOfDayValues,
-    };
-
-    var weekDayField = {
-      name: 'weekDay',
-      values: {
-        0: 'Monday',
-        1: 'Tuesday',
-        2: 'Wednesday',
-        3: 'Thursday',
-        4: 'Friday',
-        5: 'Saturday',
-        6: 'Sunday',
-      },
-    };
-
-    var NUMBER_OF_DAYS_IN_MONTH = 28; // 28 for compatibility with MP2
-    var monthDayField = {
-      name: 'monthDay',
-      values: _.object(_.map(
-        _.times(NUMBER_OF_DAYS_IN_MONTH, function(day) { return day; }),
-        function(day) {
-          var suffixes = {
-            0: 'st',
-            1: 'nd',
-            2: 'rd'
-          };
-          var suffix = suffixes[day] || 'th';
-
-          return [day, (day + 1).toString() + suffix];
-        },
-      )),
-    };
-
-    var nthWeekDayField = {
-      name: 'nthWeekDay',
-      values: {
-        '0': '1st',
-        '1': '2nd',
-        '2': '3rd',
-        '3': 'last',
-      },
-    };
-
-    var NewsletterWelcome = React.createClass({
-      mixins: [
-        Router.History
-      ],
-      getInitialState: function() {
-        return {
-          intervalType: 'immediate', // 'immediate'|'daily'|'weekly'|'monthly'
-          timeOfDay: 0,
-          weekDay: 0,
-          monthDay: 0,
-          nthWeekDay: 0,
-        };
-      },
-      handleIntervalChange: function(event) {
-        this.setState({
-          intervalType: event.target.value,
-        });
-      },
-      handleTimeOfDayChange: function(event) {
-        this.setState({
-          timeOfDay: event.target.value,
-        });
-      },
-      handleWeekDayChange: function(event) {
-        this.setState({
-          weekDay: event.target.value,
-        });
-      },
-      handleMonthDayChange: function(event) {
-        this.setState({
-          monthDay: event.target.value,
-        });
-      },
-      handleNthWeekDayChange: function(event) {
-        this.setState({
-          nthWeekDay: event.target.value,
-        });
-      },
-      handleNext: function() {
-        MailPoet.Ajax.post({
-          endpoint: 'newsletters',
-          action: 'create',
-          data: {
-            type: 'notification',
-            options: this.state,
-          },
-        }).done(function(response) {
-          if(response.result && response.newsletter.id) {
-            this.showTemplateSelection(response.newsletter.id);
-          } else {
-            if(response.errors.length > 0) {
-              response.errors.map(function(error) {
-                MailPoet.Notice.error(error);
-              });
-            }
-          }
-        }.bind(this));
-      },
-      showTemplateSelection: function(newsletterId) {
-        this.history.pushState(null, `/template/${newsletterId}`);
-      },
-      render: function() {
-        var timeOfDaySelection,
-            weekDaySelection,
-            monthDaySelection,
-            nthWeekDaySelection;
-
-        if (this.state.intervalType !== 'immediately') {
-          timeOfDaySelection = (
-            <Select
-              field={timeOfDayField}
-              item={this.state}
-              onValueChange={this.handleTimeOfDayChange} />
-          );
-        }
-
-        if (this.state.intervalType === 'weekly'
-            || this.state.intervalType === 'nthWeekDay') {
-          weekDaySelection = (
-            <Select
-              field={weekDayField}
-              item={this.state}
-              onValueChange={this.handleWeekDayChange} />
-          );
-        }
-
-        if (this.state.intervalType === 'monthly') {
-          monthDaySelection = (
-            <Select
-              field={monthDayField}
-              item={this.state}
-              onValueChange={this.handleMonthDayChange} />
-          );
-        }
-
-        if (this.state.intervalType === 'nthWeekDay') {
-          nthWeekDaySelection = (
-            <Select
-              field={nthWeekDayField}
-              item={this.state}
-              onValueChange={this.handleNthWeekDayChange} />
-          );
-        }
-
-        return (
-          <div>
-            <h1>Post notifications</h1>
-            <Breadcrumb step="type" />
-
-            <Select
-              field={intervalField}
-              item={this.state}
-              onValueChange={this.handleIntervalChange} />
-
-            {nthWeekDaySelection}
-            {monthDaySelection}
-            {weekDaySelection}
-            {timeOfDaySelection}
-
-            <p className="submit">
-              <input
-                className="button button-primary"
-                type="button"
-                onClick={ this.handleNext }
-                value="Next" />
-            </p>
-          </div>
-        );
-      },
-    });
-
-    return NewsletterWelcome;
-  }
-);

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

@@ -0,0 +1,96 @@
+define(
+  [
+    'underscore',
+    'react',
+    'react-router',
+    'mailpoet',
+    'newsletters/types/notification/scheduling.jsx',
+    'newsletters/breadcrumb.jsx'
+  ],
+  function(
+    _,
+    React,
+    Router,
+    MailPoet,
+    Scheduling,
+    Breadcrumb
+  ) {
+
+    var field = {
+      name: 'options',
+      label: 'Periodicity',
+      type: 'reactComponent',
+      component: Scheduling,
+    };
+
+    var NewsletterNotification = React.createClass({
+      contextTypes: {
+        router: React.PropTypes.object.isRequired
+      },
+      getInitialState: function() {
+        return {
+          options: {
+            intervalType: 'daily',
+            timeOfDay: 0,
+            weekDay: 1,
+            monthDay: 0,
+            nthWeekDay: 1,
+          }
+        };
+      },
+      handleValueChange: function(event) {
+        var state = this.state;
+        state[event.target.name] = event.target.value;
+        this.setState(state);
+      },
+      handleNext: function() {
+        MailPoet.Ajax.post({
+          endpoint: 'newsletters',
+          action: 'create',
+          data: _.extend({}, this.state, {
+            type: 'notification',
+            subject: MailPoet.I18n.t('draftNewsletterTitle'),
+          }),
+        }).done(function(response) {
+          if(response.result && response.newsletter.id) {
+            this.showTemplateSelection(response.newsletter.id);
+          } else {
+            if(response.errors.length > 0) {
+              response.errors.map(function(error) {
+                MailPoet.Notice.error(error);
+              });
+            }
+          }
+        }.bind(this));
+      },
+      showTemplateSelection: function(newsletterId) {
+        this.context.router.push(`/template/${newsletterId}`);
+      },
+      render: function() {
+        return (
+          <div>
+            <h1>{MailPoet.I18n.t('postNotificationNewsletterTypeTitle')}</h1>
+            <Breadcrumb step="type" />
+
+            <h3>{MailPoet.I18n.t('selectPeriodicity')}</h3>
+
+            <Scheduling
+              item={this.state}
+              field={field}
+              onValueChange={this.handleValueChange} />
+
+            <p className="submit">
+              <input
+                className="button button-primary"
+                type="button"
+                onClick={ this.handleNext }
+                value={MailPoet.I18n.t('next')} />
+            </p>
+          </div>
+        );
+      },
+    });
+
+    return NewsletterNotification;
+  }
+);

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

@@ -0,0 +1,200 @@
+define(
+  [
+    'underscore',
+    'react',
+    'react-router',
+    'mailpoet',
+    'form/fields/select.jsx'
+  ],
+  function(
+    _,
+    React,
+    Router,
+    MailPoet,
+    Select
+  ) {
+
+    var intervalField = {
+      name: 'intervalType',
+      values: {
+        'daily': MailPoet.I18n.t('daily'),
+        'weekly': MailPoet.I18n.t('weekly'),
+        'monthly': MailPoet.I18n.t('monthly'),
+        'nthWeekDay': MailPoet.I18n.t('monthlyEvery'),
+        'immediately': MailPoet.I18n.t('immediately'),
+      },
+    };
+
+    var SECONDS_IN_DAY = 86400;
+    var TIME_STEP_SECONDS = 3600; // Default: 3600
+    var numberOfTimeSteps = SECONDS_IN_DAY / TIME_STEP_SECONDS;
+    var timeOfDayValues = _.object(_.map(
+      _.times(numberOfTimeSteps, function(step) { return step * TIME_STEP_SECONDS; }),
+      function(seconds) {
+        var date = new Date(null);
+        date.setSeconds(seconds);
+        var timeLabel = date.toISOString().substr(11, 5);
+        return [seconds, timeLabel];
+      }
+    ));
+    var timeOfDayField = {
+      name: 'timeOfDay',
+      values: timeOfDayValues,
+    };
+
+    var weekDayField = {
+      name: 'weekDay',
+      values: {
+        0: MailPoet.I18n.t('sunday'),
+        1: MailPoet.I18n.t('monday'),
+        2: MailPoet.I18n.t('tuesday'),
+        3: MailPoet.I18n.t('wednesday'),
+        4: MailPoet.I18n.t('thursday'),
+        5: MailPoet.I18n.t('friday'),
+        6: MailPoet.I18n.t('saturday')
+      },
+    };
+
+    var NUMBER_OF_DAYS_IN_MONTH = 28; // 28 for compatibility with MP2
+    var monthDayField = {
+      name: 'monthDay',
+      values: _.object(_.map(
+        _.times(NUMBER_OF_DAYS_IN_MONTH, function(day) { return day; }),
+        function(day) {
+          var labels = {
+            0: MailPoet.I18n.t('first'),
+            1: MailPoet.I18n.t('second'),
+            2: MailPoet.I18n.t('third')
+          },
+            label;
+          if (labels[day] !== undefined) {
+            label = labels[day];
+          } else {
+            label = MailPoet.I18n.t('nth').replace("%$1d", day + 1);
+          }
+
+          return [day, label];
+        },
+      )),
+    };
+
+    var nthWeekDayField = {
+      name: 'nthWeekDay',
+      values: {
+        '1': MailPoet.I18n.t('first'),
+        '2': MailPoet.I18n.t('second'),
+        '3': MailPoet.I18n.t('third'),
+        'L': MailPoet.I18n.t('last'),
+      },
+    };
+
+    var NotificationScheduling = React.createClass({
+      _getCurrentValue: function() {
+        return this.props.item[this.props.field.name] || {};
+      },
+      handleValueChange: function(name, value) {
+        var oldValue = this._getCurrentValue(),
+            newValue = {};
+        newValue[name] = value;
+
+        return this.props.onValueChange({
+          target: {
+            name: this.props.field.name,
+            value: _.extend({}, oldValue, newValue)
+          }
+        });
+      },
+      handleIntervalChange: function(event) {
+        return this.handleValueChange(
+          'intervalType',
+          event.target.value
+        );
+      },
+      handleTimeOfDayChange: function(event) {
+        return this.handleValueChange(
+          'timeOfDay',
+          event.target.value
+        );
+      },
+      handleWeekDayChange: function(event) {
+        return this.handleValueChange(
+          'weekDay',
+          event.target.value
+        );
+      },
+      handleMonthDayChange: function(event) {
+        return this.handleValueChange(
+          'monthDay',
+          event.target.value
+        );
+      },
+      handleNthWeekDayChange: function(event) {
+        return this.handleValueChange(
+          'nthWeekDay',
+          event.target.value
+        );
+      },
+      render: function() {
+        var value = this._getCurrentValue(),
+            timeOfDaySelection,
+            weekDaySelection,
+            monthDaySelection,
+            nthWeekDaySelection;
+
+
+        if (value.intervalType !== 'immediately') {
+          timeOfDaySelection = (
+            <Select
+              field={timeOfDayField}
+              item={this._getCurrentValue()}
+              onValueChange={this.handleTimeOfDayChange} />
+          );
+        }
+
+        if (value.intervalType === 'weekly'
+            || value.intervalType === 'nthWeekDay') {
+          weekDaySelection = (
+            <Select
+              field={weekDayField}
+              item={this._getCurrentValue()}
+              onValueChange={this.handleWeekDayChange} />
+          );
+        }
+
+        if (value.intervalType === 'monthly') {
+          monthDaySelection = (
+            <Select
+              field={monthDayField}
+              item={this._getCurrentValue()}
+              onValueChange={this.handleMonthDayChange} />
+          );
+        }
+
+        if (value.intervalType === 'nthWeekDay') {
+          nthWeekDaySelection = (
+            <Select
+              field={nthWeekDayField}
+              item={this._getCurrentValue()}
+              onValueChange={this.handleNthWeekDayChange} />
+          );
+        }
+
+        return (
+          <div>
+            <Select
+              field={intervalField}
+              item={this._getCurrentValue()}
+              onValueChange={this.handleIntervalChange} />
+
+            {nthWeekDaySelection}
+            {monthDaySelection}
+            {weekDaySelection}
+            {timeOfDaySelection}
+          </div>
+        );
+      },
+    });
+
+    return NotificationScheduling;
+  }
+);

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

@@ -3,25 +3,21 @@ define(
     'react',
     'react-router',
     'mailpoet',
-    'form/form.jsx',
-    'form/fields/selection.jsx',
     'newsletters/breadcrumb.jsx'
   ],
   function(
     React,
     Router,
     MailPoet,
-    Form,
-    Selection,
     Breadcrumb
   ) {
 
     var NewsletterStandard = React.createClass({
-      mixins: [
-        Router.History
-      ],
+      contextTypes: {
+        router: React.PropTypes.object.isRequired
+      },
       showTemplateSelection: function(newsletterId) {
-        this.history.pushState(null, `/template/${newsletterId}`);
+        this.context.router.push(`/template/${newsletterId}`);
       },
       componentDidMount: function() {
         // No options for this type, create a newsletter upon mounting
@@ -32,7 +28,6 @@ define(
             type: 'standard',
           }
         }).done(function(response) {
-          console.log(response);
           if(response.result && response.newsletter.id) {
             this.showTemplateSelection(response.newsletter.id);
           } else {
@@ -47,7 +42,7 @@ define(
       render: function() {
         return (
           <div>
-            <h1>Newsletter</h1>
+            <h1>{MailPoet.I18n.t('regularNewsletterTypeTitle')}</h1>
             <Breadcrumb step="type" />
           </div>
         );

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

@@ -4,9 +4,7 @@ define(
     'react',
     'react-router',
     'mailpoet',
-    'form/form.jsx',
     'form/fields/select.jsx',
-    'form/fields/selection.jsx',
     'form/fields/text.jsx',
     'newsletters/breadcrumb.jsx'
   ],
@@ -15,9 +13,7 @@ define(
     React,
     Router,
     MailPoet,
-    Form,
     Select,
-    Selection,
     Text,
     Breadcrumb
   ) {
@@ -28,15 +24,19 @@ define(
     var events = {
       name: 'event',
       values: {
-        'segment': 'When someone subscribes to the list...',
-        'user': 'When a new Wordrpess user is added to your site...',
+        'segment': MailPoet.I18n.t('onSubscriptionToList'),
+        'user': MailPoet.I18n.t('onWordpressUserRegistration'),
       }
     };
 
     var availableSegmentValues = _.object(_.map(
       availableSegments,
       function(segment) {
-        return [segment.id, segment.name];
+        var name = segment.name;
+        if (segment.subscribers > 0) {
+          name += ' (%$1s)'.replace('%$1s', parseInt(segment.subscribers).toLocaleString());
+        }
+        return [segment.id, name];
       }
     ));
     var segmentField = {
@@ -57,50 +57,61 @@ define(
     var afterTimeTypeField = {
       name: 'afterTimeType',
       values: {
-        'immediate': 'immediately',
-        'hours': 'hour(s) after',
-        'days': 'day(s) after',
-        'weeks': 'week(s) after',
+        'immediate': MailPoet.I18n.t('delayImmediately'),
+        'hours': MailPoet.I18n.t('delayHoursAfter'),
+        'days': MailPoet.I18n.t('delayDaysAfter'),
+        'weeks': MailPoet.I18n.t('delayWeeksAfter'),
       }
     };
 
-    var NewsletterWelcome = React.createClass({
-      mixins: [
-        Router.History
-      ],
-      getInitialState: function() {
-        return {
-          event: 'segment',
-          segment: 1,
-          role: 'subscriber',
-          afterTimeNumber: 1,
-          afterTimeType: 'immediate',
-        };
+    var WelcomeScheduling = React.createClass({
+      contextTypes: {
+        router: React.PropTypes.object.isRequired
+      },
+      _getCurrentValue: function() {
+        return this.props.item[this.props.field.name] || {};
+      },
+      handleValueChange: function(name, value) {
+        var oldValue = this._getCurrentValue(),
+            newValue = {};
+        newValue[name] = value;
+
+        return this.props.onValueChange({
+          target: {
+            name: this.props.field.name,
+            value: _.extend({}, oldValue, newValue)
+          }
+        });
       },
       handleEventChange: function(event) {
-        this.setState({
-          event: event.target.value,
-        });
+        return this.handleValueChange(
+          'event',
+          event.target.value
+        );
       },
       handleSegmentChange: function(event) {
-        this.setState({
-          segment: event.target.value,
-        });
+        return this.handleValueChange(
+          'segment',
+          event.target.value
+        );
       },
       handleRoleChange: function(event) {
-        this.setState({
-          role: event.target.value,
-        });
+        return this.handleValueChange(
+          'role',
+          event.target.value
+        );
       },
       handleAfterTimeNumberChange: function(event) {
-        this.setState({
-          afterTimeNumber: event.target.value,
-        });
+        return this.handleValueChange(
+          'afterTimeNumber',
+          event.target.value
+        );
       },
       handleAfterTimeTypeChange: function(event) {
-        this.setState({
-          afterTimeType: event.target.value,
-        });
+        return this.handleValueChange(
+          'afterTimeType',
+          event.target.value
+        );
       },
       handleNext: function() {
         MailPoet.Ajax.post({
@@ -123,41 +134,41 @@ define(
         }.bind(this));
       },
       showTemplateSelection: function(newsletterId) {
-        this.history.pushState(null, `/template/${newsletterId}`);
+        this.context.router.push(`/template/${newsletterId}`);
       },
       render: function() {
-        var roleSegmentSelection, timeNumber;
-        if (this.state.event === 'user') {
+        var value = this._getCurrentValue(),
+            roleSegmentSelection, timeNumber;
+
+        if (value.event === 'user') {
           roleSegmentSelection = (
             <Select
               field={roleField}
-              item={this.state}
+              item={this._getCurrentValue()}
               onValueChange={this.handleRoleChange} />
           );
         } else {
           roleSegmentSelection = (
             <Select
               field={segmentField}
-              item={this.state}
+              item={this._getCurrentValue()}
               onValueChange={this.handleSegmentChange} />
           );
         }
-        if (this.state.afterTimeType !== 'immediate') {
+        if (value.afterTimeType !== 'immediate') {
           timeNumber = (
             <Text
               field={afterTimeNumberField}
-              item={this.state}
+              item={this._getCurrentValue()}
               onValueChange={this.handleAfterTimeNumberChange} />
           );
         }
+
         return (
           <div>
-            <h1>Welcome email</h1>
-            <Breadcrumb step="type" />
-
             <Select
               field={events}
-              item={this.state}
+              item={this._getCurrentValue()}
               onValueChange={this.handleEventChange} />
 
             {roleSegmentSelection}
@@ -166,21 +177,14 @@ define(
 
             <Select
               field={afterTimeTypeField}
-              item={this.state}
+              item={this._getCurrentValue()}
               onValueChange={this.handleAfterTimeTypeChange}/>
-
-            <p className="submit">
-              <input
-                className="button button-primary"
-                type="button"
-                onClick={ this.handleNext }
-                value="Next" />
-            </p>
           </div>
         );
       },
     });
 
-    return NewsletterWelcome;
+    return WelcomeScheduling;
   }
 );
+

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

@@ -0,0 +1,103 @@
+define(
+  [
+    'underscore',
+    'react',
+    'react-router',
+    'mailpoet',
+    'newsletters/types/welcome/scheduling.jsx',
+    'newsletters/breadcrumb.jsx'
+  ],
+  function(
+    _,
+    React,
+    Router,
+    MailPoet,
+    Scheduling,
+    Breadcrumb
+  ) {
+
+    var field = {
+      name: 'options',
+      label: 'Event',
+      type: 'reactComponent',
+      component: Scheduling,
+    };
+
+    var availableSegments = window.mailpoet_segments || {},
+        defaultSegment = 1;
+
+    if (_.size(availableSegments) > 0) {
+      defaultSegment = _.first(availableSegments).id;
+    }
+
+    var NewsletterWelcome = React.createClass({
+      contextTypes: {
+        router: React.PropTypes.object.isRequired
+      },
+      getInitialState: function() {
+        return {
+          options: {
+            event: 'segment',
+            segment: defaultSegment,
+            role: 'subscriber',
+            afterTimeNumber: 1,
+            afterTimeType: 'immediate',
+          }
+        };
+      },
+      handleValueChange: function(event) {
+        var state = this.state;
+        state[event.target.name] = event.target.value;
+        this.setState(state);
+      },
+      handleNext: function() {
+        MailPoet.Ajax.post({
+          endpoint: 'newsletters',
+          action: 'create',
+          data: _.extend({}, this.state, {
+            type: 'welcome',
+            subject: MailPoet.I18n.t('draftNewsletterTitle'),
+          }),
+        }).done(function(response) {
+          if(response.result && response.newsletter.id) {
+            this.showTemplateSelection(response.newsletter.id);
+          } else {
+            if(response.errors.length > 0) {
+              response.errors.map(function(error) {
+                MailPoet.Notice.error(error);
+              });
+            }
+          }
+        }.bind(this));
+      },
+      showTemplateSelection: function(newsletterId) {
+        this.context.router.push(`/template/${newsletterId}`);
+      },
+      render: function() {
+        return (
+          <div>
+            <h1>{MailPoet.I18n.t('welcomeNewsletterTypeTitle')}</h1>
+            <Breadcrumb step="type" />
+
+            <h3>{MailPoet.I18n.t('selectEventToSendWelcomeEmail')}</h3>
+
+            <Scheduling
+              item={this.state}
+              field={field}
+              onValueChange={this.handleValueChange} />
+
+            <p className="submit">
+              <input
+                className="button button-primary"
+                type="button"
+                onClick={ this.handleNext }
+                value={MailPoet.I18n.t('next')} />
+            </p>
+          </div>
+        );
+      },
+    });
+
+    return NewsletterWelcome;
+  }
+);

assets/js/src/notice.js

@@ -51,7 +51,7 @@ define('notice', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
           id: null,
           positionAfter: false,
           scroll: false,
-          timeout: 2000,
+          timeout: 5000,
           onOpen: null,
           onClose: null
       },

assets/js/src/public.js

@@ -20,13 +20,18 @@ function(
       $('form.mailpoet_form').each(function() {
         var form = $(this);
 
-        form.parsley().on('form:submit', function(parsley) {
-
-          var data = form.serializeObject() || {};
-
+        form.parsley().on('form:validated', function(parsley) {
           // clear messages
-          form.find('.mailpoet_message').html('');
+          form.find('.mailpoet_message > p').hide();
 
+          // resize iframe
+          if(window.frameElement !== null) {
+            MailPoet.Iframe.autoSize(window.frameElement);
+          }
+        });
+
+        form.parsley().on('form:submit', function(parsley) {
+          var data = form.serializeObject() || {};
           // check if we're on the same domain
           if(isSameDomain(MailPoetForm.ajax_url) === false) {
             // non ajax post request
@@ -40,27 +45,18 @@ function(
               action: 'subscribe',
               data: data
             }).done(function(response) {
-              if(response.result !== true) {
-                // errors
-                $.each(response.errors, function(index, error) {
-                  form
-                    .find('.mailpoet_message')
-                    .append('<p class="mailpoet_validate_error">'+
-                      error+
-                    '</p>');
-                });
+              if(response.result === false) {
+                form.find('.mailpoet_validate_error').html(
+                  response.errors.join('<br />')
+                ).show();
               } else {
                 // successfully subscribed
                 if(response.page !== undefined) {
                   // go to page
                   window.location.href = response.page;
-                } else if(response.message !== undefined) {
+                } else {
                   // display success message
-                  form
-                    .find('.mailpoet_message')
-                    .html('<p class="mailpoet_validate_success">'+
-                      response.message+
-                    '</p>');
+                  form.find('.mailpoet_validate_success').show();
                 }
 
                 // reset form
@@ -68,6 +64,11 @@ function(
                 // reset validation
                 parsley.reset();
               }
+
+              // resize iframe
+              if(window.frameElement !== null) {
+                MailPoet.Iframe.autoSize(window.frameElement);
+              }
             });
           }
           return false;

assets/js/src/segments/form.jsx

@@ -15,35 +15,36 @@ define(
     let fields = [
       {
         name: 'name',
-        label: 'Name',
+        label: MailPoet.I18n.t('name'),
         type: 'text'
       },
       {
         name: 'description',
-        label: 'Description',
-        type: 'textarea'
+        label: MailPoet.I18n.t('description'),
+        type: 'textarea',
+        tip: MailPoet.I18n.t('segmentDescriptionTip')
       }
     ];
 
     const messages = {
       onUpdate: function() {
-        MailPoet.Notice.success('Segment successfully updated!');
+        MailPoet.Notice.success(MailPoet.I18n.t('segmentUpdated'));
       },
       onCreate: function() {
-        MailPoet.Notice.success('Segment successfully added!');
+        MailPoet.Notice.success(MailPoet.I18n.t('segmentAdded'));
       }
     };
 
+    var Link = Router.Link;
+
     const SegmentForm = React.createClass({
-      mixins: [
-        Router.History
-      ],
       render: function() {
         return (
           <div>
-            <h2 className="title">
-              Segment
-            </h2>
+            <h1 className="title">
+              {MailPoet.I18n.t('segment')}
+              <Link className="page-title-action" to="/">{MailPoet.I18n.t('backToList')}</Link>
+            </h1>
 
             <Form
               endpoint="segments"

assets/js/src/segments/list.jsx

@@ -10,32 +10,32 @@ import Listing from 'listing/listing.jsx'
 var columns = [
   {
     name: 'name',
-    label: 'Name',
+    label: MailPoet.I18n.t('name'),
     sortable: true
   },
   {
     name: 'description',
-    label: 'Description',
+    label: MailPoet.I18n.t('description'),
     sortable: false
   },
   {
     name: 'subscribed',
-    label: 'Subscribed',
+    label: MailPoet.I18n.t('subscribed'),
     sortable: false
   },
   {
     name: 'unconfirmed',
-    label: 'Unconfirmed',
+    label: MailPoet.I18n.t('unconfirmed'),
     sortable: false
   },
   {
     name: 'unsubscribed',
-    label: 'Unsubscribed',
+    label: MailPoet.I18n.t('unsubscribed'),
     sortable: false
   },
   {
     name: 'created_at',
-    label: 'Created on',
+    label: MailPoet.I18n.t('createdOn'),
     sortable: true
   }
 ];
@@ -47,11 +47,11 @@ const messages = {
 
     if(count === 1) {
       message = (
-        '1 segment was moved to the trash.'
+        MailPoet.I18n.t('oneSegmentTrashed')
       );
     } else {
       message = (
-        '%$1d segments were moved to the trash.'
+        MailPoet.I18n.t('multipleSegmentsTrashed')
       ).replace('%$1d', count);
     }
     MailPoet.Notice.success(message);
@@ -62,11 +62,11 @@ const messages = {
 
     if(count === 1) {
       message = (
-        '1 segment was permanently deleted.'
+        MailPoet.I18n.t('oneSegmentDeleted')
       );
     } else {
       message = (
-        '%$1d segments were permanently deleted.'
+        MailPoet.I18n.t('multipleSegmentsDeleted')
       ).replace('%$1d', count);
     }
     MailPoet.Notice.success(message);
@@ -77,24 +77,31 @@ const messages = {
 
     if(count === 1) {
       message = (
-        '1 segment has been restored from the trash.'
+        MailPoet.I18n.t('oneSegmentRestored')
       );
     } else {
       message = (
-        '%$1d segments have been restored from the trash.'
+        MailPoet.I18n.t('multipleSegmentsRestored')
       ).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',
     link: function(item) {
       return (
-        <Link to={ `/edit/${item.id}` }>Edit</Link>
+        <Link to={ `/edit/${item.id}` }>{MailPoet.I18n.t('edit')}</Link>
       );
     },
     display: function(segment) {
@@ -103,7 +110,7 @@ const item_actions = [
   },
   {
     name: 'duplicate_segment',
-    label: 'Duplicate',
+    label: MailPoet.I18n.t('duplicate'),
     onClick: function(item, refresh) {
       return MailPoet.Ajax.post({
         endpoint: 'segments',
@@ -111,7 +118,7 @@ const item_actions = [
         data: item.id
       }).done(function(response) {
         MailPoet.Notice.success(
-          ('List "%$1s" has been duplicated.').replace('%$1s', response.name)
+          (MailPoet.I18n.t('listDuplicated')).replace('%$1s', response.name)
         );
         refresh();
       });
@@ -120,10 +127,23 @@ const item_actions = [
       return (segment.type !== 'wp_users');
     }
   },
+  {
+    name: 'read_more',
+    link: function(item) {
+      return (
+        <a
+          href="https://www.mailpoet.com/#TODO"
+          target="_blank"
+        >{MailPoet.I18n.t('readMore')}</a>
+      );
+    },
+    display: function(segment) {
+      return (segment.type === 'wp_users');
+    }
+  },
   {
     name: 'synchronize_segment',
-    label: 'Update',
-    className: 'update',
+    label: MailPoet.I18n.t('forceSync'),
     onClick: function(item, refresh) {
       MailPoet.Modal.loading(true);
       MailPoet.Ajax.post({
@@ -133,7 +153,7 @@ const item_actions = [
         MailPoet.Modal.loading(false);
         if(response === true) {
           MailPoet.Notice.success(
-            ('List "%$1s" has been synchronized.').replace('%$1s', item.name)
+            (MailPoet.I18n.t('listSynchronized')).replace('%$1s', item.name)
           );
           refresh();
         }
@@ -147,7 +167,7 @@ const item_actions = [
     name: 'view_subscribers',
     link: function(item) {
       return (
-        <a href={ item.subscribers_url }>View subscribers</a>
+        <a href={ item.subscribers_url }>{MailPoet.I18n.t('viewSubscribers')}</a>
       );
     }
   },
@@ -159,9 +179,6 @@ const item_actions = [
   }
 ];
 
-const bulk_actions = [
-];
-
 const SegmentList = React.createClass({
   renderItem: function(segment, actions) {
     var rowClasses = classNames(
@@ -169,28 +186,42 @@ const SegmentList = React.createClass({
       'column-primary',
       'has-row-actions'
     );
+
+    const subscribed = ~~(segment.subscribers_count.subscribed || 0);
+    const unconfirmed = ~~(segment.subscribers_count.unconfirmed || 0);
+    const unsubscribed = ~~(segment.subscribers_count.unsubscribed || 0);
+
+    let segment_name = (
+      <Link to={ `/edit/${segment.id}` }>{ segment.name }</Link>
+    );
+
+    // the WP users segment is not editable so just display its name
+    if (segment.type === 'wp_users') {
+      segment_name = segment.name;
+    }
+
     return (
       <div>
         <td className={ rowClasses }>
           <strong>
-            <a>{ segment.name }</a>
+            { segment_name }
           </strong>
           { actions }
         </td>
-        <td className="column-date" data-colname="Description">
+        <td className="column-date" data-colname={ MailPoet.I18n.t('description') }>
           <abbr>{ segment.description }</abbr>
         </td>
-        <td className="column-date" data-colname="Subscribed">
-          <abbr>{ segment.subscribed || 0 }</abbr>
+        <td className="column-date" data-colname={ MailPoet.I18n.t('subscribed') }>
+          <abbr>{ subscribed.toLocaleString() }</abbr>
         </td>
-        <td className="column-date" data-colname="Unconfirmed">
-          <abbr>{ segment.unconfirmed || 0 }</abbr>
+        <td className="column-date" data-colname={ MailPoet.I18n.t('unconfirmed') }>
+          <abbr>{ unconfirmed.toLocaleString() }</abbr>
         </td>
-        <td className="column-date" data-colname="Unsubscribed">
-          <abbr>{ segment.unsubscribed || 0 }</abbr>
+        <td className="column-date" data-colname={ MailPoet.I18n.t('unsubscribed') }>
+          <abbr>{ unsubscribed.toLocaleString() }</abbr>
         </td>
-        <td className="column-date" data-colname="Created on">
-          <abbr>{ segment.created_at }</abbr>
+        <td className="column-date" data-colname={ MailPoet.I18n.t('createdOn') }>
+          <abbr>{ MailPoet.Date.format(segment.created_at) }</abbr>
         </td>
       </div>
     );
@@ -198,16 +229,16 @@ const SegmentList = React.createClass({
   render: function() {
     return (
       <div>
-        <h2 className="title">
-          Segments <Link className="add-new-h2" to="/new">New</Link>
-        </h2>
+        <h1 className="title">
+          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+        </h1>
 
         <Listing
+          limit={ mailpoet_listing_per_page }
           location={ this.props.location }
           params={ this.props.params }
           messages={ messages }
           search={ false }
-          limit={ 1000 }
           endpoint="segments"
           onRenderItem={ this.renderItem }
           columns={ columns }
@@ -219,4 +250,4 @@ const SegmentList = React.createClass({
   }
 });
 
-module.exports = SegmentList;
+module.exports = SegmentList;

assets/js/src/segments/segments.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Router, Route, IndexRoute, Link } from 'react-router'
+import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
+import { createHashHistory } from 'history'
 import SegmentList from 'segments/list.jsx'
 import SegmentForm from 'segments/form.jsx'
-import createHashHistory from 'history/lib/createHashHistory'
 
-let history = createHashHistory({ queryKey: false })
+const history = useRouterHistory(createHashHistory)({ queryKey: false });
 
 const App = React.createClass({
   render() {
@@ -13,7 +13,7 @@ const App = React.createClass({
   }
 });
 
-let container = document.getElementById('segments_container');
+const container = document.getElementById('segments_container');
 
 if(container) {
   ReactDOM.render((

assets/js/src/settings/tabs.js

@@ -34,13 +34,16 @@ define(
           // show sending methods
           jQuery('.mailpoet_sending_methods').fadeIn();
         } else {
-          // hide DKIM option when using MailPoet's API
-          jQuery('#mailpoet_mta_dkim')[
+          // toggle SPF/DKIM (hidden if the sending method is MailPoet)
+          jQuery('#mailpoet_mta_spf')[
             (group === 'mailpoet')
             ? 'hide'
             : 'show'
           ]();
 
+          // (HIDDEN FOR BETA)
+          jQuery('#mailpoet_mta_dkim').hide();
+
           // hide sending methods
           jQuery('.mailpoet_sending_methods').hide();
 

assets/js/src/subscribers/form.jsx

@@ -3,50 +3,101 @@ define(
     'react',
     'react-router',
     'mailpoet',
-    'form/form.jsx'
+    'form/form.jsx',
+    'react-string-replace'
   ],
   function(
     React,
     Router,
     MailPoet,
-    Form
+    Form,
+    ReactStringReplace
   ) {
-
     var fields = [
       {
         name: 'email',
-        label: 'E-mail',
-        type: 'text'
+        label: MailPoet.I18n.t('email'),
+        type: 'text',
+        disabled: function(subscriber) {
+          return ~~(subscriber.wp_user_id > 0);
+        }
       },
       {
         name: 'first_name',
-        label: 'Firstname',
-        type: 'text'
+        label: MailPoet.I18n.t('firstname'),
+        type: 'text',
+        disabled: function(subscriber) {
+          return ~~(subscriber.wp_user_id > 0);
+        }
       },
       {
         name: 'last_name',
-        label: 'Lastname',
-        type: 'text'
+        label: MailPoet.I18n.t('lastname'),
+        type: 'text',
+        disabled: function(subscriber) {
+          return ~~(subscriber.wp_user_id > 0);
+        }
       },
       {
         name: 'status',
-        label: 'Status',
+        label: MailPoet.I18n.t('status'),
         type: 'select',
         values: {
-          'unconfirmed': 'Unconfirmed',
-          'subscribed': 'Subscribed',
-          'unsubscribed': 'Unsubscribed'
+          'subscribed': MailPoet.I18n.t('subscribed'),
+          'unconfirmed': MailPoet.I18n.t('unconfirmed'),
+          'unsubscribed': MailPoet.I18n.t('unsubscribed')
+        },
+        filter: function(subscriber, value) {
+          if (~~(subscriber.wp_user_id) > 0 && value === 'unconfirmed') {
+            return false;
+          }
+          return true;
         }
       },
       {
         name: 'segments',
-        label: 'Lists',
+        label: MailPoet.I18n.t('lists'),
         type: 'selection',
-        placeholder: "Select a list",
+        placeholder: MailPoet.I18n.t('selectList'),
         endpoint: "segments",
         multiple: true,
+        selected: function(subscriber) {
+          if (Array.isArray(subscriber.subscriptions) === false) {
+            return null;
+          }
+
+          return subscriber.subscriptions.map(function(subscription) {
+            if (subscription.status === 'subscribed') {
+              return subscription.segment_id;
+            }
+          });
+        },
         filter: function(segment) {
-          return !!(!segment.deleted_at);
+          return !!(!segment.deleted_at && segment.type === 'default');
+        },
+        getSearchLabel: function(segment, subscriber) {
+          let label = '';
+
+          if (subscriber.subscriptions !== undefined) {
+            subscriber.subscriptions.map(function(subscription) {
+              if (segment.id === subscription.segment_id) {
+                label = segment.name;
+
+                if (subscription.status === 'unsubscribed') {
+                  const unsubscribed_at = MailPoet.Date
+                    .format(subscription.updated_at);
+                  label += ' (%$1s)'.replace(
+                    '%$1s',
+                    MailPoet.I18n.t('unsubscribedOn').replace(
+                      '%$1s',
+                      unsubscribed_at
+                    )
+                  );
+                }
+              }
+            });
+          }
+          return label;
         }
       }
     ];
@@ -58,44 +109,87 @@ define(
         label: custom_field.name,
         type: custom_field.type
       };
-      if(custom_field.params) {
+      if (custom_field.params) {
         field.params = custom_field.params;
       }
 
-      if(custom_field.params.values) {
+      if (custom_field.params.values) {
         field.values = custom_field.params.values;
       }
 
+      // add placeholders for selects (date, select)
+      switch(custom_field.type) {
+        case 'date':
+          field.year_placeholder = MailPoet.I18n.t('year');
+          field.month_placeholder = MailPoet.I18n.t('month');
+          field.day_placeholder = MailPoet.I18n.t('day');
+        break;
+
+        case 'select':
+          field.placeholder = '-';
+        break;
+      }
+
       fields.push(field);
     });
 
     var messages = {
       onUpdate: function() {
-        MailPoet.Notice.success('Subscriber successfully updated!');
+        MailPoet.Notice.success(MailPoet.I18n.t('subscriberUpdated'));
       },
       onCreate: function() {
-        MailPoet.Notice.success('Subscriber successfully added!');
+        MailPoet.Notice.success(MailPoet.I18n.t('subscriberAdded'));
       }
     };
 
+    var beforeFormContent = function(subscriber) {
+      if (~~(subscriber.wp_user_id) > 0) {
+        return (
+          <p className="description">
+            { ReactStringReplace(
+                MailPoet.I18n.t('WPUserEditNotice'),
+                /\[link\](.*?)\[\/link\]/g,
+                (match, i) => (
+                  <a
+                    key={ i }
+                    href={`user-edit.php?user_id=${ subscriber.wp_user_id }`}
+                  >{ match }</a>
+                )
+              )
+            }
+          </p>
+        );
+      }
+    };
+
+    var afterFormContent = function(subscriber) {
+      return (
+        <p className="description">
+          <strong>
+            { MailPoet.I18n.t('tip') }
+          </strong> { MailPoet.I18n.t('customFieldsTip') }
+        </p>
+      );
+    }
+
     var Link = Router.Link;
 
     var SubscriberForm = React.createClass({
-      mixins: [
-        Router.History
-      ],
       render: function() {
         return (
           <div>
-            <h2 className="title">
-              Subscriber
-            </h2>
+            <h1 className="title">
+              {MailPoet.I18n.t('subscriber')}
+              <Link className="page-title-action" to="/">{MailPoet.I18n.t('backToList')}</Link>
+            </h1>
 
             <Form
               endpoint="subscribers"
               fields={ fields }
               params={ this.props.params }
               messages={ messages }
+              beforeFormContent={ beforeFormContent }
+              afterFormContent={ afterFormContent }
             />
           </div>
         );

assets/js/src/subscribers/importExport/export.js

@@ -43,12 +43,12 @@ define(
            width: '20em',
            templateResult: function (item) {
              return (item.subscriberCount > 0)
-              ? item.name + ' (' + item.subscriberCount + ')'
+              ? item.name + ' (' + parseInt(item.subscriberCount).toLocaleString() + ')'
               : item.name;
            },
            templateSelection: function (item) {
              return (item.subscriberCount > 0)
-              ? item.name + ' (' + item.subscriberCount + ')'
+              ? item.name + ' (' + parseInt(item.subscriberCount).toLocaleString() + ')'
               : item.name;
            }
          })
@@ -115,7 +115,7 @@ define(
          exportData.exportConfirmedOption = false;
          renderSegmentsAndFields(segmentsContainerElement, segments);
        }
-       segmentsContainerElement.select2('val', selectedSegments);
+       segmentsContainerElement.val(selectedSegments).trigger('change');
      });
 
      function toggleNextStepButton(condition) {
@@ -148,23 +148,22 @@ define(
         .done(function (response) {
           MailPoet.Modal.loading(false);
           if (response.result === false) {
-            MailPoet.Notice.error(response.error);
+            MailPoet.Notice.error(response.errors);
           } else {
-            resultMessage = MailPoetI18n.exportMessage
-             .replace('%1$s', '<strong>' + response.data.totalExported + '</strong>')
+            resultMessage = MailPoet.I18n.t('exportMessage')
+             .replace('%1$s', '<strong>' + parseInt(response.data.totalExported).toLocaleString() + '</strong>')
              .replace('[link]', '<a href="' + response.data.exportFileURL + '" target="_blank" >')
              .replace('[/link]', '</a>');
-            jQuery('#export_result_notice > ul > li').html(resultMessage);
-            jQuery('#export_result_notice').show();
+            jQuery('#export_result_notice').html('<p>' + resultMessage + '</p>').show();
             window.location.href = response.data.exportFileURL;
           }
         })
         .error(function (error) {
           MailPoet.Modal.loading(false);
           MailPoet.Notice.error(
-           MailPoetI18n.serverError + error.statusText.toLowerCase() + '.'
+           MailPoet.I18n.t('serverError') + error.statusText.toLowerCase() + '.'
           );
         });
      });
    });
- });
+ });

assets/js/src/subscribers/importExport/import.js

@@ -1,11 +1,14 @@
 define(
-    [
+[
       'backbone',
       'underscore',
       'jquery',
       'mailpoet',
       'handlebars',
       'papaparse',
+      'asyncqueue',
+      'xss',
+      'moment',
       'select2'
     ],
     function (
@@ -14,7 +17,10 @@ define(
       jQuery,
       MailPoet,
       Handlebars,
-      Papa
+      Papa,
+      AsyncQueue,
+      xss,
+      Moment
     ) {
       if (!jQuery('#mailpoet_subscribers_import').length) {
         return;
@@ -65,7 +71,7 @@ define(
                   jQuery('#method_paste > div.mailpoet_method_process')
                       .find('a.mailpoet_process'),
               mailChimpKeyInputElement = jQuery('#mailchimp_key'),
-              mailChimpKeyVerifyButtonEelement = jQuery('#mailchimp_key_verify'),
+              mailChimpKeyVerifyButtonElement = jQuery('#mailchimp_key_verify'),
               mailChimpListsContainerElement = jQuery('#mailchimp_lists'),
               mailChimpProcessButtonElement =
                   jQuery('#method_mailchimp > div.mailpoet_method_process')
@@ -123,9 +129,7 @@ define(
             // get an approximate size of textarea paste in bytes
             var pasteSize = encodeURI(pasteInputElement.val()).split(/%..|./).length - 1;
             if (pasteSize > maxPostSizeBytes) {
-              MailPoet.Notice.error(MailPoetI18n.maxPostSizeNotice, {
-                timeout: 3000,
-              });
+              MailPoet.Notice.error(MailPoet.I18n.t('maxPostSizeNotice'));
               return;
             }
             // delay loading indicator for 10ms or else it's just too fast :)
@@ -143,9 +147,7 @@ define(
               var ext = this.value.match(/\.(.+)$/);
               if (ext === null || ext[1].toLowerCase() !== 'csv') {
                 this.value = '';
-                MailPoet.Notice.error(MailPoetI18n.wrongFileFormat, {
-                  timeout: 3000,
-                });
+                MailPoet.Notice.error(MailPoet.I18n.t('wrongFileFormat'));
               }
 
             toggleNextStepButton(
@@ -176,15 +178,11 @@ define(
               jQuery('.mailpoet_mailchimp-key-status')
                   .html('')
                   .removeClass('mailpoet_mailchimp-ok mailpoet_mailchimp-error');
-              mailChimpKeyVerifyButtonEelement.prop('disabled', true);
               toggleNextStepButton(mailChimpProcessButtonElement, 'off');
             }
-            else {
-              mailChimpKeyVerifyButtonEelement.prop('disabled', false);
-            }
           });
 
-          mailChimpKeyVerifyButtonEelement.click(function () {
+          mailChimpKeyVerifyButtonElement.click(function () {
             MailPoet.Modal.loading(true);
             MailPoet.Ajax.post({
               endpoint: 'ImportExport',
@@ -193,9 +191,7 @@ define(
             }).done(function (response) {
               if (response.result === false) {
                 MailPoet.Notice.hide();
-                MailPoet.Notice.error(response.errors, {
-                  timeout: 3000,
-                });
+                MailPoet.Notice.error(response.errors);
                 jQuery('.mailpoet_mailchimp-key-status')
                     .removeClass()
                     .addClass('mailpoet_mailchimp-key-status mailpoet_mailchimp-error');
@@ -207,7 +203,7 @@ define(
                     .removeClass()
                     .addClass('mailpoet_mailchimp-key-status mailpoet_mailchimp-ok');
                 if (!response.data) {
-                  jQuery('.mailpoet_mailchimp-key-status').html(MailPoetI18n.noMailChimpLists);
+                  jQuery('.mailpoet_mailchimp-key-status').html(MailPoet.I18n.t('noMailChimpLists'));
                   mailChimpListsContainerElement.hide();
                   toggleNextStepButton(mailChimpProcessButtonElement, 'off');
                 } else {
@@ -218,9 +214,7 @@ define(
             }).error(function (error) {
               MailPoet.Modal.loading(false);
               MailPoet.Notice.error(
-                  MailPoetI18n.serverError + error.statusText.toLowerCase() + '.', {
-                    timeout: 3000,
-                  }
+                  MailPoet.I18n.t('serverError') + error.statusText.toLowerCase() + '.'
               );
             });
             MailPoet.Modal.loading(false);
@@ -245,17 +239,13 @@ define(
               }
               else {
                 MailPoet.Notice.hide();
-                MailPoet.Notice.error(response.errors, {
-                  timeout: 3000,
-                });
+                MailPoet.Notice.error(response.errors);
               }
               MailPoet.Modal.loading(false);
             }).error(function () {
               MailPoet.Modal.loading(false);
               MailPoet.Notice.error(
-                  MailPoetI18n.serverError + result.statusText.toLowerCase() + '.', {
-                    timeout: 3000,
-                  }
+                  MailPoet.I18n.t('serverError') + result.statusText.toLowerCase() + '.'
               );
             });
           });
@@ -312,28 +302,28 @@ define(
                 advancedOptionDelimiter = '',
                 advancedOptionNewline = '',
                 advancedOptionComments = false,
-            // trim spaces, commas, periods,
-            // single/double quotes and convert to lowercase
+                // trim spaces, commas, periods,
+                // single/double quotes and convert to lowercase
                 detectAndCleanupEmail = function (email) {
-                  email = email.toLowerCase();
-                  var test,
-                      cleanEmail =
-                          email
-                          // left/right trim spaces, punctuation (e.g., " 'email@email.com'; ")
-                          // right trim non-printable characters (e.g., "email@email.com<EFBFBD>")
-                              .replace(/^["';.,\s]+|[^\x20-\x7E]+$|["';.,_\s]+$/g, '')
-                              // remove spaces (e.g., "email @ email . com")
-                              // remove urlencoded characters
-                              .replace(/\s+|%\d+|,+/g, '')
-                              .toLowerCase();
-                  // detect e-mails that will otherwise be rejected by ^email_regex$
+                  var test;
+                  // decode HTML entities
+                  email = jQuery('<div />').html(email).text();
+                  email = email
+                    .toLowerCase()
+                    // left/right trim spaces, punctuation (e.g., " 'email@email.com'; ")
+                    // right trim non-printable characters (e.g., "email@email.com<6F>")
+                    .replace(/^["';.,\s]+|[^\x20-\x7E]+$|["';.,_\s]+$/g, '')
+                    // remove spaces (e.g., "email @ email . com")
+                    // remove urlencoded characters
+                    .replace(/\s+|%\d+|,+/g, '');
+                  // detect e-mails that will be otherwise rejected by email regex
                   if (test = /<(.*?)>/.exec(email)) {
-                    // is email inside angle brackets (e.g., 'some@email.com <some@email.com>')?
-                    return test[1].trim();
+                    // is the email inside angle brackets (e.g., 'some@email.com <some@email.com>')?
+                    email = test[1].trim();
                   }
-                  else if (test = /mailto:(?:\s+)?(.*)/.exec(email)) {
-                    // is email in 'mailto:email' format?
-                    return test[1].trim();
+                  if (test = /mailto:(?:\s+)?(.*)/.exec(email)) {
+                    // is the email in 'mailto:email' format?
+                    email = test[1].trim();
                   }
                   return email;
                 };
@@ -345,14 +335,12 @@ define(
               comments: advancedOptionComments,
               error: function () {
                 MailPoet.Notice.hide();
-                MailPoet.Notice.error(MailPoetI18n.dataProcessingError, {
-                  timeout: 3000,
-                });
+                MailPoet.Notice.error(MailPoet.I18n.t('dataProcessingError'));
               },
               complete: function (CSV) {
                 for (var rowCount in CSV.data) {
                   var rowData = CSV.data[rowCount].map(function (el) {
-                        return el.trim();
+                        return filterXSS(el.trim());
                       }),
                       rowColumnCount = rowData.length;
                   // set the number of row elements based on the first non-empty row
@@ -426,12 +414,10 @@ define(
                 }
                 else {
                   MailPoet.Modal.loading(false);
-                  var errorNotice = MailPoetI18n.noValidRecords;
-                  errorNotice = errorNotice.replace('[link]', MailPoetI18n.csvKBLink);
+                  var errorNotice = MailPoet.I18n.t('noValidRecords');
+                  errorNotice = errorNotice.replace('[link]', MailPoet.I18n.t('csvKBLink'));
                   errorNotice = errorNotice.replace('[/link]', '</a>');
-                  MailPoet.Notice.error(errorNotice, {
-                    timeout: 3000,
-                  });
+                  MailPoet.Notice.error(errorNotice);
                 }
               }
             }
@@ -496,17 +482,17 @@ define(
             }
 
             var import_results = {
-              notice: MailPoetI18n.importNoticeSkipped.replace(
+              notice: MailPoet.I18n.t('importNoticeSkipped').replace(
                   '%1$s',
                   '<strong>' + (subscribers.invalid.length + subscribers.duplicate.length) + '</strong>'
               ),
               invalid: (subscribers.invalid.length)
-                  ? MailPoetI18n.importNoticeInvalid
-                  .replace('%1$s', '<strong>' + subscribers.invalid.length + '</strong>')
+                  ? MailPoet.I18n.t('importNoticeInvalid')
+                  .replace('%1$s', '<strong>' + subscribers.invalid.length.toLocaleString() + '</strong>')
                   .replace('%2$s', subscribers.invalid.join(', '))
                   : null,
               duplicate: (subscribers.duplicate.length)
-                  ? MailPoetI18n.importNoticeDuplicate
+                  ? MailPoet.I18n.t('importNoticeDuplicate')
                   .replace('%1$s', '<strong>' + subscribers.duplicate.length + '</strong>')
                   .replace('%2$s', subscribers.duplicate.join(', '))
                   : null
@@ -522,8 +508,8 @@ define(
                 jQuery(details).toggle();
                 this.text =
                     (jQuery(details).is(":visible"))
-                        ? MailPoetI18n.hideDetails
-                        : MailPoetI18n.showDetails;
+                        ? MailPoet.I18n.t('hideDetails')
+                        : MailPoet.I18n.t('showDetails');
               });
 
           // show available segments
@@ -539,19 +525,22 @@ define(
               segmentSelectElement
                   .html('')
                   .select2('destroy');
+              toggleNextStepButton('off');
             }
             segmentSelectElement
                 .select2({
                   data: segments,
                   width: '20em',
                   templateResult: function (item) {
+                    item.subscriberCount = parseInt(item.subscriberCount);
                     return (item.subscriberCount > 0)
-                        ? item.name + ' (' + item.subscriberCount + ')'
+                        ? item.name + ' (' + item.subscriberCount.toLocaleString() + ')'
                         : item.name;
                   },
                   templateSelection: function (item) {
+                    item.subscriberCount = parseInt(item.subscriberCount);
                     return (item.subscriberCount > 0)
-                        ? item.name + ' (' + item.subscriberCount + ')'
+                        ? item.name + ' (' + item.subscriberCount.toLocaleString() + ')'
                         : item.name;
                   }
                 })
@@ -559,9 +548,8 @@ define(
                   var segmentSelectionNotice = jQuery('[data-id="notice_segmentSelection"]');
                   if (!this.value) {
                     if (!segmentSelectionNotice.length) {
-                      MailPoet.Notice.error(MailPoetI18n.segmentSelectionRequired, {
+                      MailPoet.Notice.error(MailPoet.I18n.t('segmentSelectionRequired'), {
                         static: true,
-                        timeout: 3000,
                         scroll: true,
                         id: 'segmentSelection',
                         hideClose: true
@@ -579,7 +567,7 @@ define(
 
           jQuery('.mailpoet_create_segment').click(function () {
             MailPoet.Modal.popup({
-              title: MailPoetI18n.addNewList,
+              title: MailPoet.I18n.t('addNewList'),
               template: jQuery('#new_segment_template').html()
             })
             jQuery('#new_segment_name').keypress(function (e) {
@@ -639,18 +627,14 @@ define(
                       else {
                         MailPoet.Modal.close();
                         MailPoet.Notice.error(
-                            MailPoetI18n.segmentCreateError + response.message + '.', {
-                              timeout: 3000,
-                            }
+                            MailPoet.I18n.t('segmentCreateError') + response.message + '.'
                         );
                       }
                     })
                     .error(function (error) {
                       MailPoet.Modal.close();
                       MailPoet.Notice.error(
-                          MailPoetI18n.serverError + error.statusText.toLowerCase() + '.', {
-                            timeout: 3000
-                          }
+                          MailPoet.I18n.t('serverError') + error.statusText.toLowerCase() + '.'
                       );
                     });
               }
@@ -728,7 +712,7 @@ define(
             }
             // if we're on the last line, show the total count of subscribers data
             else if (index === (subscribers.subscribers.length - 1)) {
-              return subscribers.subscribersCount;
+              return subscribers.subscribersCount.toLocaleString();
             } else {
               return index + 1;
             }
@@ -765,7 +749,7 @@ define(
                   selectEvent.preventDefault();
                   jQuery(selectElement).select2('close');
                   MailPoet.Modal.popup({
-                    title: MailPoetI18n.addNewColumn,
+                    title: MailPoet.I18n.t('addNewColumn'),
                     template: jQuery('#new_column_template').html()
                   });
                   jQuery('#new_column_name').keypress(function (e) {
@@ -829,7 +813,7 @@ define(
                               // if this is the first custom column, create an "optgroup"
                               if (mailpoetColumnsSelect2.length === 2) {
                                 mailpoetColumnsSelect2.push({
-                                  'name': MailPoetI18n.userColumns,
+                                  'name': MailPoet.I18n.t('userColumns'),
                                   'children': []
                                 });
                               }
@@ -855,18 +839,14 @@ define(
                               filterSubscribers();
                             }
                             else {
-                              MailPoet.Notice.error(MailPoetI18n.customFieldCreateError, {
-                                timeout: 3000,
-                              });
+                              MailPoet.Notice.error(MailPoet.I18n.t('customFieldCreateError'));
                             }
                             MailPoet.Modal.loading(false);
                           })
                           .error(function (error) {
                             MailPoet.Modal.loading(false);
                             MailPoet.Notice.error(
-                                MailPoetI18n.serverError + error.statusText.toLowerCase() + '.', {
-                                  timeout: 3000,
-                                }
+                                MailPoet.I18n.t('serverError') + error.statusText.toLowerCase() + '.'
                             );
                           });
                     }
@@ -885,7 +865,7 @@ define(
                         // if another column has the same value and it's not an 'ignore', prompt user
                         if (elementId === selectedOptionId
                             && elementId !== 'ignore') {
-                          if (confirm(MailPoetI18n.selectedValueAlreadyMatched + ' ' + MailPoetI18n.confirmCorrespondingColumn)) {
+                          if (confirm(MailPoet.I18n.t('selectedValueAlreadyMatched') + ' ' + MailPoet.I18n.t('confirmCorrespondingColumn'))) {
                             jQuery(element).data('column-id', 'ignore');
                           }
                           else {
@@ -928,9 +908,8 @@ define(
                 if (!emailRegex.test(subscribersClone.subscribers[0][matchedColumn])) {
                   preventNextStep = true;
                   if (!jQuery('[data-id="notice_invalidEmail"]').length) {
-                    MailPoet.Notice.error(MailPoetI18n.columnContainsInvalidElement, {
+                    MailPoet.Notice.error(MailPoet.I18n.t('columnContainsInvalidElement'), {
                       static: true,
-                      timeout: 3000,
                       scroll: true,
                       hideClose: true,
                       id: 'invalidEmail'
@@ -944,73 +923,37 @@ define(
               // DATE filter: if column type is date, check if we can recognize it
               if (column.type === 'date' && matchedColumn !== -1) {
                 jQuery.map(subscribersClone.subscribers, function (data, position) {
-                  var rowData = data[matchedColumn],
-                      date = new Date(rowData.replace(/-/g, '/')), // IE doesn't like
-                  // dashes as date separators
-                      month_name = [
-                        MailPoetI18n.january,
-                        MailPoetI18n.february,
-                        MailPoetI18n.march,
-                        MailPoetI18n.april,
-                        MailPoetI18n.may,
-                        MailPoetI18n.june,
-                        MailPoetI18n.july,
-                        MailPoetI18n.august,
-                        MailPoetI18n.september,
-                        MailPoetI18n.october,
-                        MailPoetI18n.november,
-                        MailPoetI18n.december
-                      ];
-
+                  var rowData = data[matchedColumn];
                   if (position !== fillterPosition) {
-                    // check for valid date:
-                    // * invalid date object returns NaN for getTime() and NaN
-                    // is the only object not strictly equal to itself
-                    // * date must have period/dash/slash OR be at least 4
-                    // characters long (e.g., year)
-                    // * must be before now
+                    // check if date exists
                     if (rowData.trim() === '') {
                       data[matchedColumn] =
                           '<span class="mailpoet_data_match mailpoet_import_error" title="'
-                          + MailPoetI18n.noDateFieldMatch + '">'
-                          + MailPoetI18n.emptyDate
+                          + MailPoet.I18n.t('noDateFieldMatch') + '">'
+                          + MailPoet.I18n.t('emptyDate')
                           + '</span>';
                       preventNextStep = true;
                       return;
                     }
-                    else if (date.getTime() === date.getTime() &&
-                        (/[.-\/]/.test(rowData) || rowData.length >= 4) &&
-                        date.getTime() < (new Date()).getTime()
-                    ) {
-                      date = '/ '
-                          + month_name[date.getMonth()]
-                          + ' ' + date.getDate() + ', '
-                          + date.getFullYear() + ' '
-                          + date.getHours() + ':'
-                          + ((date.getMinutes() < 10 ? '0' : '')
-                          + date.getMinutes()) + ' '
-                          + ((date.getHours() >= 12)
-                                  ? MailPoetI18n.pm
-                                  : MailPoetI18n.am
-                          );
+                    // check if date is valid and is before today
+                    if (Moment(rowData).isValid() && Moment(rowData).isBefore(Moment())) {
                       data[matchedColumn] +=
                           '<span class="mailpoet_data_match" title="'
-                          + MailPoetI18n.verifyDateMatch + '">'
-                          + date + '</span>';
+                          + MailPoet.I18n.t('verifyDateMatch') + '">'
+                          + MailPoet.Date.format(rowData) + '</span>';
                     }
                     else {
                       data[matchedColumn] +=
                           '<span class="mailpoet_data_match mailpoet_import_error" title="'
-                          + MailPoetI18n.noDateFieldMatch + '">'
-                          + MailPoetI18n.dateMatchError + '</span>';
+                          + MailPoet.I18n.t('noDateFieldMatch') + '">'
+                          + MailPoet.I18n.t('dateMatchError') + '</span>';
                       preventNextStep = true;
                     }
                   }
                 });
                 if (preventNextStep && !jQuery('.mailpoet_invalidDate').length) {
-                  MailPoet.Notice.error(MailPoetI18n.columnContainsInvalidDate, {
+                  MailPoet.Notice.error(MailPoet.I18n.t('columnContainsInvalidDate'), {
                     static: true,
-                    timeout: 3000,
                     scroll: true,
                     hideClose: true,
                     id: 'invalidDate'
@@ -1050,64 +993,97 @@ define(
             }
             MailPoet.Modal.loading(true);
 
-            var subscribers = {};
+            var columns = {},
+              queue = new jQuery.AsyncQueue(),
+              batchNumber = 0,
+              batchSize = 2000,
+              timestamp = Date.now() / 1000,
+              subscribers = [],
+              importResults = {
+                'created': 0,
+                'updated': 0,
+                'errors': [],
+                'segments': []
+              },
+              splitSubscribers = function (subscribers, size) {
+                return subscribers.reduce(function (res, item, index) {
+                  if (index % size === 0) {
+                    res.push([]);
+                  }
+                  res[res.length - 1].push(item);
+                  return res;
+                }, []);
+              },
+              subscribers = splitSubscribers(importData.step1.subscribers, batchSize);
 
             _.each(jQuery('select.mailpoet_subscribers_column_data_match'),
-                function (column, index) {
-                  var columnId = jQuery(column).data('column-id');
-                  if (columnId === 'ignore') {
-                    return;
-                  }
-                  subscribers[columnId] = [];
-                  _.each(importData.step1.subscribers, function (subsciber) {
-                    subscribers[columnId].push(
-                        _.chain(subsciber)
-                            .pick(index)
-                            .toArray()
-                            .flatten()
-                            .value()
-                    );
-                  });
-                  subscribers[columnId] = _.flatten(subscribers[columnId]);
-                });
+              function (column, columnIndex) {
+                var columnId = jQuery(column).data('column-id');
+                if (columnId === 'ignore') {
+                  return;
+                }
+                columns[columnId] = columnIndex;
+              });
 
-            MailPoet.Ajax.post({
-              endpoint: 'ImportExport',
-              action: 'processImport',
-              data: JSON.stringify({
-                subscribers: subscribers,
-                segments: segmentSelectElement.val(),
-                updateSubscribers: (jQuery(':radio[name="subscriber_update_option"]:checked').val() === 'yes') ? true : false
+            _.each(subscribers, function () {
+              queue.add(function (queue) {
+                queue.pause();
+                MailPoet.Ajax
+                  .post({
+                    endpoint: 'ImportExport',
+                    action: 'processImport',
+                    data: JSON.stringify({
+                      columns: columns,
+                      subscribers: subscribers[batchNumber],
+                      timestamp: timestamp,
+                      segments: segmentSelectElement.val(),
+                      updateSubscribers: (jQuery(':radio[name="subscriber_update_option"]:checked').val() === 'yes') ? true : false
+                    })
+                  })
+                  .done(function (response) {
+                    if (response.result === false) {
+                      importResults.errors.push(response.errors);
+                    } else {
+                      importResults.created = response.data.created;
+                      importResults.updated = response.data.updated;
+                      importResults.segments = response.data.segments;
+                      importResults.added_to_segment_with_welcome_notification = response.data.added_to_segment_with_welcome_notification;
+                    }
+                    queue.run();
+                  })
+                  .error(function (error) {
+                    importResults.errors.push(
+                      MailPoet.I18n.t('serverError') + error.statusText.toLowerCase() + '.'
+                    );
+                    queue.run();
+                  });
+                batchNumber++;
               })
-            }).done(function (response) {
+            });
+
+            queue.run();
+
+            queue.onComplete(function () {
               MailPoet.Modal.loading(false);
-              if (response.result === false) {
-                MailPoet.Notice.error(response.errors, {
-                  timeout: 3000,
-                });
-              } else {
-                mailpoetSegments = response.data.segments;
-                response.data.segments = _.map(segmentSelectElement.select2('data'),
-                    function (data) {
-                      return data.name;
-                    });
-                importData.step2 = response.data;
+              if (importResults.errors.length > 0 && !importResults.updated && !importResults.created) {
+                MailPoet.Notice.error(_.flatten(importResults.errors)
+                );
+              }
+              else {
+                mailpoetSegments = importResults.segments;
+                importResults.segments = _.map(segmentSelectElement.select2('data'),
+                  function (data) {
+                    return data.name;
+                  });
+                importData.step2 = importResults;
                 enableSegmentSelection(mailpoetSegments);
                 router.navigate('step3', {trigger: true});
               }
-            }).error(function (error) {
-              MailPoet.Modal.loading(false);
-              MailPoet.Notice.error(
-                  MailPoetI18n.serverError + error.statusText.toLowerCase() + '.',  {
-                    timeout: 3000,
-                  }
-              );
             });
           });
 
           filterSubscribers();
           enableSegmentSelection(mailpoetSegments);
-
         });
 
         router.on('route:step3', function () {
@@ -1118,6 +1094,10 @@ define(
 
           showCurrentStep();
 
+          if (importData.step2.errors.length > 0) {
+            MailPoet.Notice.error(_.flatten(importData.step2.errors));
+          }
+
           // display statistics
           var subscribersDataImportResultsTemplate =
                   Handlebars
@@ -1126,18 +1106,17 @@ define(
               exportMenuElement = jQuery('span.mailpoet_export'),
               importResults = {
                 created: (importData.step2.created)
-                    ? MailPoetI18n.subscribersCreated
-                    .replace('%1$s', '<strong>' + importData.step2.created + '</strong>')
+                    ? MailPoet.I18n.t('subscribersCreated')
+                    .replace('%1$s', '<strong>' + importData.step2.created.toLocaleString() + '</strong>')
                     .replace('%2$s', '"' + importData.step2.segments.join('", "') + '"')
                     : false,
                 updated: (importData.step2.updated)
-                    ? MailPoetI18n.subscribersUpdated
-                    .replace('%1$s', '<strong>' + importData.step2.updated + '</strong>')
+                    ? MailPoet.I18n.t('subscribersUpdated')
+                    .replace('%1$s', '<strong>' + importData.step2.updated.toLocaleString() + '</strong>')
                     .replace('%2$s', '"' + importData.step2.segments.join('", "') + '"')
                     : false,
-                noaction: (!importData.step2.updated && !importData.step2.created)
-                    ? true
-                    : false
+                no_action: (!importData.step2.created && !importData.step2.updated),
+                added_to_segment_with_welcome_notification: importData.step2.added_to_segment_with_welcome_notification
               };
 
           jQuery('#subscribers_data_import_results')
@@ -1167,4 +1146,4 @@ define(
           Backbone.history.start();
         }
       });
-    });
+    });

assets/js/src/subscribers/list.jsx

@@ -11,28 +11,28 @@ import Selection from 'form/fields/selection.jsx'
 const columns = [
   {
     name: 'email',
-    label: 'Subscriber',
+    label: MailPoet.I18n.t('subscriber'),
     sortable: true
   },
   {
     name: 'status',
-    label: 'Status',
+    label: MailPoet.I18n.t('status'),
     sortable: true
   },
   {
     name: 'segments',
-    label: 'Lists',
+    label: MailPoet.I18n.t('lists'),
     sortable: false
   },
 
   {
     name: 'created_at',
-    label: 'Subscribed on',
+    label: MailPoet.I18n.t('subscribedOn'),
     sortable: true
   },
   {
     name: 'updated_at',
-    label: 'Last modified on',
+    label: MailPoet.I18n.t('lastModifiedOn'),
     sortable: true
   },
 ];
@@ -43,11 +43,11 @@ const messages = {
       var message = null;
       if(~~response === 1) {
         message = (
-          '1 subscriber was moved to the trash.'
+          MailPoet.I18n.t('oneSubscriberTrashed')
         );
       } else if(~~response > 1) {
         message = (
-          '%$1d subscribers were moved to the trash.'
+          MailPoet.I18n.t('multipleSubscribersTrashed')
         ).replace('%$1d', ~~response);
       }
 
@@ -61,11 +61,11 @@ const messages = {
       var message = null;
       if(~~response === 1) {
         message = (
-          '1 subscriber was permanently deleted.'
+          MailPoet.I18n.t('oneSubscriberDeleted')
         );
       } else if(~~response > 1) {
         message = (
-          '%$1d subscribers were permanently deleted.'
+          MailPoet.I18n.t('multipleSubscribersDeleted')
         ).replace('%$1d', ~~response);
       }
 
@@ -79,11 +79,11 @@ const messages = {
       var message = null;
       if(~~response === 1) {
         message = (
-          '1 subscriber has been restored from the trash.'
+          MailPoet.I18n.t('oneSubscriberRestored')
         );
       } else if(~~response > 1) {
         message = (
-          '%$1d subscribers have been restored from the trash.'
+          MailPoet.I18n.t('multipleSubscribersRestored')
         ).replace('%$1d', ~~response);
       }
 
@@ -97,7 +97,7 @@ const messages = {
 const bulk_actions = [
   {
     name: 'moveToList',
-    label: 'Move to list...',
+    label: MailPoet.I18n.t('moveToList'),
     onSelect: function() {
       let field = {
         id: 'move_to_segment',
@@ -120,15 +120,15 @@ const bulk_actions = [
     },
     onSuccess: function(response) {
       MailPoet.Notice.success(
-        '%$1d subscribers were moved to list <strong>%$2s</strong>.'
-        .replace('%$1d', ~~response.subscribers)
+        MailPoet.I18n.t('multipleSubscribersMovedToList')
+        .replace('%$1d', ~~(response.subscribers))
         .replace('%$2s', response.segment)
       );
     }
   },
   {
     name: 'addToList',
-    label: 'Add to list...',
+    label: MailPoet.I18n.t('addToList'),
     onSelect: function() {
       let field = {
         id: 'add_to_segment',
@@ -151,7 +151,7 @@ const bulk_actions = [
     },
     onSuccess: function(response) {
       MailPoet.Notice.success(
-        '%$1d subscribers were added to list <strong>%$2s</strong>.'
+        MailPoet.I18n.t('multipleSubscribersAddedToList')
         .replace('%$1d', ~~response.subscribers)
         .replace('%$2s', response.segment)
       );
@@ -159,7 +159,7 @@ const bulk_actions = [
   },
   {
     name: 'removeFromList',
-    label: 'Remove from list...',
+    label: MailPoet.I18n.t('removeFromList'),
     onSelect: function() {
       let field = {
         id: 'remove_from_segment',
@@ -182,7 +182,7 @@ const bulk_actions = [
     },
     onSuccess: function(response) {
       MailPoet.Notice.success(
-        '%$1d subscribers were removed from list <strong>%$2s</strong>.'
+        MailPoet.I18n.t('multipleSubscribersRemovedFromList')
         .replace('%$1d', ~~response.subscribers)
         .replace('%$2s', response.segment)
       );
@@ -190,27 +190,27 @@ const bulk_actions = [
   },
   {
     name: 'removeFromAllLists',
-    label: 'Remove from all lists',
+    label: MailPoet.I18n.t('removeFromAllLists'),
     onSuccess: function(response) {
       MailPoet.Notice.success(
-        '%$1d subscribers were removed from all lists.'
+        MailPoet.I18n.t('multipleSubscribersRemovedFromAllLists')
         .replace('%$1d', ~~response)
       );
     }
   },
   {
-    name: 'confirmUnconfirmed',
-    label: 'Confirm unconfirmed',
+    name: 'sendConfirmationEmail',
+    label: MailPoet.I18n.t('resendConfirmationEmail'),
     onSuccess: function(response) {
       MailPoet.Notice.success(
-        '%$1d subscribers have been confirmed.'
+        MailPoet.I18n.t('multipleConfirmationEmailsSent')
         .replace('%$1d', ~~response)
       );
     }
   },
   {
     name: 'trash',
-    label: 'Trash',
+    label: MailPoet.I18n.t('trash'),
     onSuccess: messages.onTrash
   }
 ];
@@ -218,19 +218,31 @@ const bulk_actions = [
 const item_actions = [
   {
     name: 'edit',
-    label: 'Edit',
-    link: function(item) {
+    label: MailPoet.I18n.t('edit'),
+    link: function(subscriber) {
       return (
-        <Link to={ `/edit/${item.id}` }>Edit</Link>
+        <Link to={ `/edit/${subscriber.id}` }>{MailPoet.I18n.t('edit')}</Link>
       );
     }
   },
   {
-    name: 'trash'
+    name: 'trash',
+    display: function(subscriber) {
+      return !!(~~subscriber.wp_user_id === 0);
+    }
   }
 ];
 
 const SubscriberList = React.createClass({
+  getSegmentFromId: function(segment_id) {
+    let result = false;
+    mailpoet_segments.map(function(segment) {
+      if (segment.id === segment_id) {
+        result = segment;
+      }
+    });
+    return result;
+  },
   renderItem: function(subscriber, actions) {
     let row_classes = classNames(
       'manage-column',
@@ -243,23 +255,39 @@ const SubscriberList = React.createClass({
 
     switch(subscriber.status) {
       case 'subscribed':
-        status = 'Subscribed';
+        status = MailPoet.I18n.t('subscribed');
       break;
 
       case 'unconfirmed':
-        status = 'Unconfirmed';
+        status = MailPoet.I18n.t('unconfirmed');
       break;
 
       case 'unsubscribed':
-        status = 'Unsubscribed';
+        status = MailPoet.I18n.t('unsubscribed');
       break;
     }
 
-    let segments = mailpoet_segments.filter(function(segment) {
-      return (jQuery.inArray(segment.id, subscriber.segments) !== -1);
-    }).map(function(segment) {
-      return segment.name;
-    }).join(', ');
+    let segments = false;
+
+    // Subscriptions
+    if (subscriber.subscriptions.length > 0) {
+      let subscribed_segments = [];
+
+      subscriber.subscriptions.map((subscription) => {
+        const segment = this.getSegmentFromId(subscription.segment_id);
+        if(segment === false) return;
+        if (subscription.status === 'subscribed') {
+          subscribed_segments.push(segment.name);
+        }
+      });
+
+      segments = (
+        <span>
+          { subscribed_segments.join(', ') }
+        </span>
+      );
+    }
+
 
     let avatar = false;
     if(subscriber.avatar_url) {
@@ -285,17 +313,17 @@ const SubscriberList = React.createClass({
           </p>
           { actions }
         </td>
-        <td className="column" data-colname="Status">
+        <td className="column" data-colname={MailPoet.I18n.t('status')}>
           { status }
         </td>
-        <td className="column" data-colname="Lists">
+        <td className="column" data-colname={MailPoet.I18n.t('lists')}>
           { segments }
         </td>
-        <td className="column-date" data-colname="Subscribed on">
-          <abbr>{ subscriber.created_at }</abbr>
+        <td className="column-date" data-colname={MailPoet.I18n.t('subscribedOn')}>
+          <abbr>{ MailPoet.Date.format(subscriber.created_at) }</abbr>
         </td>
-        <td className="column-date" data-colname="Last modified on">
-          <abbr>{ subscriber.updated_at }</abbr>
+        <td className="column-date" data-colname={MailPoet.I18n.t('lastModifiedOn')}>
+          <abbr>{ MailPoet.Date.format(subscriber.updated_at) }</abbr>
         </td>
       </div>
     );
@@ -306,13 +334,14 @@ const SubscriberList = React.createClass({
   render: function() {
     return (
       <div>
-        <h2 className="title">
-          Subscribers <Link className="add-new-h2" to="/new">New</Link>
-          <a className="add-new-h2" href="?page=mailpoet-import#step1">Import</a>
-          <a id="mailpoet_export_button" className="add-new-h2" href="?page=mailpoet-export">Export</a>
-        </h2>
+        <h1 className="title">
+          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+          <a className="page-title-action" href="?page=mailpoet-import#step1">{MailPoet.I18n.t('import')}</a>
+          <a id="mailpoet_export_button" className="page-title-action" href="?page=mailpoet-export">{MailPoet.I18n.t('export')}</a>
+        </h1>
 
         <Listing
+          limit={ mailpoet_listing_per_page }
           location={ this.props.location }
           params={ this.props.params }
           endpoint="subscribers"
@@ -328,4 +357,4 @@ const SubscriberList = React.createClass({
   }
 });
 
-module.exports = SubscriberList;
+module.exports = SubscriberList;

assets/js/src/subscribers/subscribers.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Router, Route, IndexRoute, Link } from 'react-router'
+import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
+import { createHashHistory } from 'history'
 import SubscriberList from 'subscribers/list.jsx'
 import SubscriberForm from 'subscribers/form.jsx'
-import createHashHistory from 'history/lib/createHashHistory'
 
-const history = createHashHistory({ queryKey: false })
+const history = useRouterHistory(createHashHistory)({ queryKey: false });
 
 const App = React.createClass({
   render() {

assets/js/src/vendor/jquery.asyncqueue.js

@@ -0,0 +1,79 @@
+/*
+* This file is part of the jquery plugin "asyncQueue".
+*
+* (c) Sebastien Roch <roch.sebastien@gmail.com>
+*
+* For the full copyright and license information, please view the LICENSE
+* file that was distributed with this source code.
+*/
+(function($){
+    $.AsyncQueue = function() {
+        var that = this,
+            queue = [],
+            failureFunc,
+            completeFunc,
+            paused = false,
+            lastCallbackData,
+            _run;
+
+        _run = function() {
+            var f = queue.shift();
+
+            if (f) {
+                f.apply(that, [that]);
+                if (paused === false) {
+                    _run();
+                }
+            } else {
+                if(completeFunc){
+                    completeFunc.apply(that);
+                }
+            }
+        }
+
+        this.onFailure = function(func) {
+            failureFunc = func;
+        }
+
+        this.onComplete = function(func) {
+            completeFunc = func;
+        }
+
+        this.add = function(func) {
+            queue.push(func);
+            return this;
+        }
+
+        this.storeData = function(dataObject) {
+            lastCallbackData = dataObject;
+            return this;
+        }
+
+        this.lastCallbackData = function () {
+            return lastCallbackData;
+        }
+
+        this.run = function() {
+            paused = false;
+            _run();
+        }
+
+        this.pause = function () {
+            paused = true;
+            return this;
+        }
+
+        this.failure = function() {
+            paused = true;
+            if (failureFunc) {
+                var args = [that];
+                for(i = 0; i < arguments.length; i++) {
+                    args.push(arguments[i]);
+                }
+                failureFunc.apply(that, args);
+            }
+        }
+
+        return this;
+    }
+})(jQuery);

codeception.yml

@@ -9,6 +9,7 @@ settings:
     bootstrap: _bootstrap.php
     colors: true
     memory_limit: 1024M
+    log: true
 extensions:
     enabled:
         - Codeception\Extension\RunFailed

composer.json

@@ -9,7 +9,7 @@
     "j4mie/paris": "1.5.4",
     "swiftmailer/swiftmailer": "^5.4",
     "phpseclib/phpseclib": "*",
-    "mtdowling/cron-expression": "^1.0",
+    "mtdowling/cron-expression": "^1.1",
     "nesbot/carbon": "^1.21",
     "soundasleep/html2text": "^0.3.0"
   },