diff --git a/assets/css/src/box.styl b/assets/css/src/box.styl
index 5202d0b5ac..78c97a39b8 100644
--- a/assets/css/src/box.styl
+++ b/assets/css/src/box.styl
@@ -71,15 +71,17 @@ $box-description-font-size = $box-description-line-height
.mailpoet_boxes .mailpoet_description
float:left
- width: 245px
+ width: 258px
max-height: $box-description-height
padding-bottom: 0
overflow: hidden
+ word-wrap: break-word
+ overflow-wrap: break-word
h3
margin: 0 0 $box-description-space-between-heading-and-paragraph 0
overflow: hidden
- max-width: 210px
+ max-width: 223px
line-height: $box-heading-line-height
font-size: $box-heading-font-size
@@ -117,6 +119,20 @@ $box-description-font-size = $box-description-line-height
[data-type="standard"] .mailpoet_thumbnail
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2070%2070%22%20enable-background%3D%22new%200%200%2070%2070%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M62.751%2C65.368L43.923%2C50.955l18.832-14.377l-5.395-4.118v-3.479l5.983%2C4.568%20v3.479l0.166%2C26.269C63.51%2C64.089%2C63.198%2C64.783%2C62.751%2C65.368z%20M31.433%2C49.5l-15.955-12v-30c0-1.657%2C1.339-3%2C2.992-3h33.905%20c1.652%2C0%2C2.992%2C1.343%2C2.992%2C3v30l-15.955%2C12H31.433z%20M18.469%2C35.5H33.5v-2H18.469V35.5z%20M18.469%2C31.5H33.5v-2H18.469V31.5z%20M18.469%2C27.5H33.5v-2H18.469V27.5z%20M38.406%2C7.5H18.469v14h19.937V7.5z%20M52.375%2C7.5H40.408v2h11.967V7.5z%20M52.375%2C11.5H40.408v2%20h11.967V11.5z%20M52.375%2C15.5H40.408v2h11.967V15.5z%20M52.375%2C19.5H40.408v2h11.967V19.5z%20M52.375%2C25.5H37.5v2h14.875V25.5z%20M52.375%2C29.5H37.5v2h14.875V29.5z%20M52.375%2C33.5H37.5v2h14.875V33.5z%20M26.14%2C17.192L28.442%2C9.5l3.277%2C6.571l1.71-2.571l2.992%2C6%20h-2.992h-3.989h-0.997H25.45h-4.986l3.989-4L26.14%2C17.192z%20M22.469%2C12.5h-1c-0.552%2C0-1-0.448-1-1v-1c0-0.552%2C0.448-1%2C1-1h1%20c0.552%2C0%2C1%2C0.448%2C1%2C1v1C23.469%2C12.052%2C23.021%2C12.5%2C22.469%2C12.5z%20M26.795%2C50.955L8.05%2C65.305c-0.419-0.574-0.55-1.41-0.55-2.174%20V37.015l-0.015%2C0.011v-3.479l5.998-4.579v3.479L8.017%2C36.62L26.795%2C50.955z%20M29.137%2C52.659v-0.157h12.462v0.144l0.047-0.036%20L59.73%2C66.5H10.989l18.084-13.889L29.137%2C52.659z%22%2F%3E%3C%2Fsvg%3E%0A")
+[data-type="woocommerce"] .mailpoet_thumbnail
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwMCIgaGVpZ2h0PSIxNDk0IiB2aWV3Qm94PSIwIDAgMjU2IDE1MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHBhdGggZD0iTTIzLjc1OSAwaDIwOC4zNzhDMjQ1LjMyNSAwIDI1NiAxMC42NzUgMjU2IDIzLjg2M3Y3OS41NDFjMCAxMy4xODgtMTAuNjc1IDIzLjg2My0yMy44NjMgMjMuODYzSDE1Ny40MWwxMC4yNTcgMjUuMTE4LTQ1LjEwOS0yNS4xMThIMjMuODYzYy0xMy4xODcgMC0yMy44NjItMTAuNjc1LTIzLjg2Mi0yMy44NjNWMjMuODYzQy0uMTA0IDEwLjc4IDEwLjU3IDAgMjMuNzU5IDB6IiBmaWxsPSIjOUI1QzhGIi8+PHBhdGggZD0iTTE0LjU3OCAyMS43NWMxLjQ1Ny0xLjk3OCAzLjY0Mi0zLjAxOCA2LjU1Ni0zLjIyNiA1LjMwOC0uNDE3IDguMzI2IDIuMDggOS4wNTQgNy40OTIgMy4yMjYgMjEuNzUgNi43NjQgNDAuMTcgMTAuNTEgNTUuMjU5bDIyLjc5LTQzLjM5NWMyLjA4Mi0zLjk1NSA0LjY4NC02LjAzNiA3LjgwNi02LjI0NCA0LjU3OS0uMzEyIDcuMzg4IDIuNjAxIDguNTMzIDguNzQxIDIuNjAyIDEzLjg0IDUuOTMyIDI1LjYgOS44ODYgMzUuNTkgMi43MDYtMjYuNDMyIDcuMjg1LTQ1LjQ3NiAxMy43MzctNTcuMjM1IDEuNTYtMi45MTQgMy44NS00LjM3MSA2Ljg2OC00LjU4IDIuMzk0LS4yMDcgNC41NzkuNTIxIDYuNTU2IDIuMDgyIDEuOTc3IDEuNTYxIDMuMDE4IDMuNTM4IDMuMjI2IDUuOTMyLjEwNCAxLjg3My0uMjA4IDMuNDM0LTEuMDQgNC45OTUtNC4wNTkgNy40OTMtNy4zOSAyMC4wODUtMTAuMDk1IDM3LjU2Ny0yLjYwMSAxNi45NjMtMy41MzggMzAuMTgtMi45MTQgMzkuNjUuMjA5IDIuNi0uMjA4IDQuODktMS4yNDggNi44NjgtMS4yNSAyLjI4OS0zLjEyMiAzLjUzOC01LjUxNiAzLjc0Ni0yLjcwNi4yMDgtNS41MTUtMS4wNC04LjIyMS0zLjg1LTkuNjc4LTkuODg3LTE3LjM3OS0yNC42NjQtMjIuOTk4LTQ0LjMzMi02Ljc2NSAxMy4zMi0xMS43NiAyMy4zMS0xNC45ODYgMjkuOTctNi4xNCAxMS43Ni0xMS4zNDMgMTcuNzk2LTE1LjcxNCAxOC4xMDgtMi44MS4yMDgtNS4yMDMtMi4xODYtNy4yODQtNy4xOC01LjMwNy0xMy42MzMtMTEuMDMxLTM5Ljk2Mi0xNy4xNy03OC45ODYtLjQxNy0yLjcwNi4yMDctNS4xIDEuNjY0LTYuOTcyem0yMjMuNjM2IDE2LjMzOGMtMy43NDYtNi41NTYtOS4yNjItMTAuNTEtMTYuNjUtMTIuMDcyLTEuOTc4LS40MTYtMy44NS0uNjI0LTUuNjItLjYyNC05Ljk5IDAtMTguMTA3IDUuMjAzLTI0LjQ1NSAxNS42MS01LjQxMiA4Ljg0NS04LjExNyAxOC42MjctOC4xMTcgMjkuMzQ2IDAgOC4wMTMgMS42NjUgMTQuODgxIDQuOTk1IDIwLjYwNSAzLjc0NiA2LjU1NiA5LjI2MiAxMC41MSAxNi42NSAxMi4wNzEgMS45NzcuNDE3IDMuODUuNjI1IDUuNjIuNjI1IDEwLjA5NCAwIDE4LjIxMS01LjIwMyAyNC40NTUtMTUuNjEgNS40MTEtOC45NSA4LjExNy0xOC43MzIgOC4xMTctMjkuNDUuMTA0LTguMTE3LTEuNjY1LTE0Ljg4Mi00Ljk5NS0yMC41MDF6bS0xMy4xMTIgMjguODI2Yy0xLjQ1NyA2Ljg2OC00LjA1OSAxMS45NjctNy45MSAxNS40MDEtMy4wMTcgMi43MDYtNS44MjcgMy44NS04LjQyOCAzLjMzLTIuNDk4LS41Mi00LjU4LTIuNzA1LTYuMTQtNi43NjQtMS4yNS0zLjIyNi0xLjg3My02LjQ1Mi0xLjg3My05LjQ3IDAtMi42MDEuMjA4LTUuMjAzLjcyOC03LjU5Ni45MzctNC4yNjcgMi43MDYtOC40MyA1LjUxNS0xMi4zODQgMy40MzUtNS4xIDcuMDc3LTcuMTggMTAuODIzLTYuNDUyIDIuNDk4LjUyIDQuNTggMi43MDYgNi4xNCA2Ljc2NCAxLjI0OSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3IDAgMi43MDYtLjIwOCA1LjMwNy0uNzI4IDcuN3ptLTUyLjAzMy0yOC44MjZjLTMuNzQ2LTYuNTU2LTkuMzY2LTEwLjUxLTE2LjY1LTEyLjA3Mi0xLjk3Ny0uNDE2LTMuODUtLjYyNC01LjYyLS42MjQtOS45OSAwLTE4LjEwNyA1LjIwMy0yNC40NTUgMTUuNjEtNS40MTEgOC44NDUtOC4xMTcgMTguNjI3LTguMTE3IDI5LjM0NiAwIDguMDEzIDEuNjY1IDE0Ljg4MSA0Ljk5NSAyMC42MDUgMy43NDYgNi41NTYgOS4yNjIgMTAuNTEgMTYuNjUgMTIuMDcxIDEuOTc4LjQxNyAzLjg1LjYyNSA1LjYyLjYyNSAxMC4wOTQgMCAxOC4yMTEtNS4yMDMgMjQuNDU1LTE1LjYxIDUuNDEyLTguOTUgOC4xMTctMTguNzMyIDguMTE3LTI5LjQ1IDAtOC4xMTctMS42NjUtMTQuODgyLTQuOTk1LTIwLjUwMXptLTEzLjIxNiAyOC44MjZjLTEuNDU3IDYuODY4LTQuMDU5IDExLjk2Ny03LjkwOSAxNS40MDEtMy4wMTggMi43MDYtNS44MjggMy44NS04LjQzIDMuMzMtMi40OTctLjUyLTQuNTc4LTIuNzA1LTYuMTQtNi43NjQtMS4yNDgtMy4yMjYtMS44NzItNi40NTItMS44NzItOS40NyAwLTIuNjAxLjIwOC01LjIwMy43MjgtNy41OTYuOTM3LTQuMjY3IDIuNzA2LTguNDMgNS41MTYtMTIuMzg0IDMuNDM0LTUuMSA3LjA3Ni03LjE4IDEwLjgyMi02LjQ1MiAyLjQ5OC41MiA0LjU4IDIuNzA2IDYuMTQgNi43NjQgMS4yNSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3LjEwNSAyLjcwNi0uMjA4IDUuMzA3LS43MjggNy43eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==')
+
.mailpoet_boxes_preview
margin: -10px
padding: 10px 20px
+
+.mailpoet_boxes
+ .title_and_badge
+ display: flex
+ flex-direction: row
+ justify-content: space-between
+
+ .mailpoet_badge
+ margin: 0 0 0 10px
+ padding: 0 6px 0 6px
+ max-height: 21px
\ No newline at end of file
diff --git a/assets/css/src/listing/newsletters.styl b/assets/css/src/listing/newsletters.styl
index 533824f742..e8b68970ae 100644
--- a/assets/css/src/listing/newsletters.styl
+++ b/assets/css/src/listing/newsletters.styl
@@ -39,14 +39,15 @@ $green-badge-color = #55bd56
border-radius: 3px
letter-spacing: 1px
vertical-align: middle
+ white-space: nowrap
- &_excellent
+ &_excellent, &_teal
background: $excellent-badge-color
- &_good
+ &_good, &_yellow
background: $good-badge-color
- &_bad
+ &_bad, &_red
background: $bad-badge-color
&_green
diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index e61f41a7a1..39f2f7bfdc 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -178,6 +178,7 @@ define([
target: {
value: transformedValue,
name: this.props.field.name,
+ id: e.target.id,
},
});
}
diff --git a/assets/js/src/form/fields/text.jsx b/assets/js/src/form/fields/text.jsx
index 2715c9ffbb..faa92010ac 100644
--- a/assets/js/src/form/fields/text.jsx
+++ b/assets/js/src/form/fields/text.jsx
@@ -2,9 +2,30 @@ import React from 'react';
const FormFieldText = React.createClass({
render() {
- let value = this.props.item[this.props.field.name];
- if (value === undefined) {
- value = this.props.field.defaultValue || '';
+ const name = this.props.field.name || null;
+ const item = this.props.item || {};
+ let value;
+ let defaultValue;
+ // value should only be set when onChangeValue is configured
+ if (this.props.onValueChange instanceof Function) {
+ value = item[this.props.field.name];
+ // set value to defaultValue if available
+ value = (value === undefined && this.props.field.defaultValue) ?
+ this.props.field.defaultValue : value;
+ }
+ // defaultValue should only be set only when value is not set
+ if (!value && this.props.field.defaultValue) {
+ defaultValue = this.props.field.defaultValue;
+ }
+
+ let id = this.props.field.id || null;
+ if (!id && this.props.field.name) {
+ id = `field_${this.props.field.name}`;
+ }
+
+ let className = this.props.field.class || null;
+ if (!className && !this.props.field.size) {
+ className = 'regular-text';
}
return (
@@ -15,15 +36,16 @@ const FormFieldText = React.createClass({
? this.props.field.disabled(this.props.item)
: false
}
- className={(this.props.field.size) ? '' : 'regular-text'}
+ className={className}
size={
(this.props.field.size !== 'auto' && this.props.field.size > 0)
? this.props.field.size
: false
}
- name={this.props.field.name}
- id={`field_${this.props.field.name}`}
+ name={name}
+ id={id}
value={value}
+ defaultValue={defaultValue}
placeholder={this.props.field.placeholder}
onChange={this.props.onValueChange}
{...this.props.field.validation}
diff --git a/assets/js/src/newsletters/breadcrumb.jsx b/assets/js/src/newsletters/breadcrumb.jsx
index 06209f5d67..4d034f6d85 100644
--- a/assets/js/src/newsletters/breadcrumb.jsx
+++ b/assets/js/src/newsletters/breadcrumb.jsx
@@ -15,27 +15,28 @@ define(
const Breadcrumb = React.createClass({
getInitialState: function () {
+ const steps = this.props.steps || [
+ {
+ name: 'type',
+ label: MailPoet.I18n.t('selectType'),
+ link: '/new',
+ },
+ {
+ name: 'template',
+ label: MailPoet.I18n.t('template'),
+ },
+ {
+ name: 'editor',
+ label: MailPoet.I18n.t('designer'),
+ },
+ {
+ name: 'send',
+ label: MailPoet.I18n.t('send'),
+ },
+ ];
return {
step: null,
- steps: [
- {
- name: 'type',
- label: MailPoet.I18n.t('selectType'),
- link: '/new',
- },
- {
- name: 'template',
- label: MailPoet.I18n.t('template'),
- },
- {
- name: 'editor',
- label: MailPoet.I18n.t('designer'),
- },
- {
- name: 'send',
- label: MailPoet.I18n.t('send'),
- },
- ],
+ steps: steps,
};
},
render: function () {
diff --git a/assets/js/src/newsletters/newsletters.jsx b/assets/js/src/newsletters/newsletters.jsx
index 7eeea9dcfe..ecfb5d1923 100644
--- a/assets/js/src/newsletters/newsletters.jsx
+++ b/assets/js/src/newsletters/newsletters.jsx
@@ -3,14 +3,14 @@ import ReactDOM from 'react-dom';
import { Router, Route, IndexRedirect, useRouterHistory } from 'react-router';
import { createHashHistory } from 'history';
import Hooks from 'wp-js-hooks';
+import _ from 'underscore';
import NewsletterTypes from 'newsletters/types.jsx';
import NewsletterTemplates from 'newsletters/templates.jsx';
import NewsletterSend from 'newsletters/send.jsx';
-
import NewsletterTypeStandard from 'newsletters/types/standard.jsx';
import NewsletterTypeNotification from 'newsletters/types/notification/notification.jsx';
-
+import AutomaticEmailsEventsList from 'newsletters/types/automatic_emails/events_list.jsx';
import NewsletterListStandard from 'newsletters/listings/standard.jsx';
import NewsletterListWelcome from 'newsletters/listings/welcome.jsx';
import NewsletterListNotification from 'newsletters/listings/notification.jsx';
@@ -26,33 +26,82 @@ const App = React.createClass({
const container = document.getElementById('newsletters_container');
+const getAutomaticEmailsRoutes = () => {
+ if (!window.mailpoet_automatic_emails) return null;
+
+ return _.map(window.mailpoet_automatic_emails, automaticEmail => ({
+ path: `new/${automaticEmail.id}`,
+ name: automaticEmail.id,
+ component: AutomaticEmailsEventsList,
+ data: {
+ automaticEmail: automaticEmail,
+ },
+ }));
+};
+
if (container) {
- let extraRoutes = [];
- extraRoutes = Hooks.applyFilters('mailpoet_newsletters_before_router', extraRoutes);
+ let routes = [
+ /* Listings */
+ {
+ path: 'standard(/)**',
+ params: { tab: 'standard' },
+ component: NewsletterListStandard,
+ },
+ {
+ path: 'welcome(/)**',
+ component: NewsletterListWelcome,
+ },
+ {
+ path: 'notification/history/:parent_id(/)**',
+ component: NewsletterListNotificationHistory,
+ },
+ {
+ path: 'notification(/)**',
+ component: NewsletterListNotification,
+ },
+ /* Newsletter: type selection */
+ {
+ path: 'new',
+ component: NewsletterTypes,
+ },
+ /* New newsletter: types */
+ {
+ path: 'new/standard',
+ component: NewsletterTypeStandard,
+ },
+ {
+ path: 'new/notification',
+ component: NewsletterTypeNotification,
+ },
+ /* Template selection */
+ {
+ name: 'template',
+ path: 'template/:id',
+ component: NewsletterTemplates,
+ },
+ /* Sending options */
+ {
+ path: 'send/:id',
+ component: NewsletterSend,
+ },
+ ];
+
+ routes = Hooks.applyFilters('mailpoet_newsletters_before_router', [...routes, ...getAutomaticEmailsRoutes()]);
const mailpoetListing = ReactDOM.render((
{event.description}
+{type.description}
+