Displays automatic email types and events
Adds WooCommerce email type for testing purposes
This commit is contained in:
Vlad
@ -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
|
||||
@ -41,13 +41,13 @@ $green-badge-color = #55bd56
|
||||
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
|
||||
|
||||
@ -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((
|
||||
<Router history={history}>
|
||||
<Route path="/" component={App}>
|
||||
<IndexRedirect to="standard" />
|
||||
{/* Listings */}
|
||||
<Route path="standard(/)**" params={{ tab: 'standard' }} component={NewsletterListStandard} />
|
||||
<Route path="welcome(/)**" component={NewsletterListWelcome} />
|
||||
<Route path="notification/history/:parent_id(/)**"
|
||||
component={NewsletterListNotificationHistory} />
|
||||
<Route path="notification(/)**" component={NewsletterListNotification} />
|
||||
{/* Newsletter: type selection */}
|
||||
<Route path="new" component={NewsletterTypes} />
|
||||
{/* New newsletter: types */}
|
||||
<Route path="new/standard" component={NewsletterTypeStandard} />
|
||||
<Route path="new/notification" component={NewsletterTypeNotification} />
|
||||
{/* Template selection */}
|
||||
<Route name="template" path="template/:id" component={NewsletterTemplates} />
|
||||
{/* Sending options */}
|
||||
<Route path="send/:id" component={NewsletterSend} />
|
||||
{/* Extra routes */}
|
||||
{extraRoutes.map(rt =>
|
||||
<Route key={rt.path} path={rt.path} component={rt.component} data={rt.data || null} />
|
||||
)}
|
||||
{routes.map(route => (
|
||||
<Route
|
||||
key={route.path}
|
||||
path={route.path}
|
||||
component={route.component}
|
||||
name={route.name || null}
|
||||
params={route.params || null}
|
||||
data={route.data || null}
|
||||
/>
|
||||
))}
|
||||
</Route>
|
||||
</Router>
|
||||
), container);
|
||||
|
||||
@ -5,13 +5,15 @@ define(
|
||||
'wp-js-hooks',
|
||||
'react-router',
|
||||
'newsletters/breadcrumb.jsx',
|
||||
'underscore',
|
||||
],
|
||||
(
|
||||
React,
|
||||
MailPoet,
|
||||
Hooks,
|
||||
Router,
|
||||
Breadcrumb
|
||||
Breadcrumb,
|
||||
_
|
||||
) => {
|
||||
const NewsletterTypes = React.createClass({
|
||||
contextTypes: {
|
||||
@ -50,8 +52,29 @@ define(
|
||||
}
|
||||
});
|
||||
},
|
||||
getAutomaticEmails: function () {
|
||||
if (!window.mailpoet_automatic_emails) return [];
|
||||
|
||||
return _.map(window.mailpoet_automatic_emails, (automaticEmail) => {
|
||||
const email = automaticEmail;
|
||||
const disabled = !email.events;
|
||||
|
||||
email.action = (() => (
|
||||
<div>
|
||||
<a className="button button-primary"
|
||||
disabled={disabled}
|
||||
onClick={!disabled ? this.setupNewsletter.bind(null, automaticEmail.id) : null}
|
||||
>
|
||||
{ MailPoet.I18n.t('setUp') }
|
||||
</a>
|
||||
</div>
|
||||
))();
|
||||
|
||||
return email;
|
||||
});
|
||||
},
|
||||
render: function () {
|
||||
let types = [
|
||||
const defaultTypes = [
|
||||
{
|
||||
id: 'standard',
|
||||
title: MailPoet.I18n.t('regularNewsletterTypeTitle'),
|
||||
@ -72,7 +95,7 @@ define(
|
||||
return (
|
||||
<div>
|
||||
<a href="?page=mailpoet-premium" target="_blank">
|
||||
{MailPoet.I18n.t('getPremiumVersion')}
|
||||
{MailPoet.I18n.t('premiumFeatureLink')}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
@ -92,7 +115,7 @@ define(
|
||||
},
|
||||
];
|
||||
|
||||
types = Hooks.applyFilters('mailpoet_newsletters_types', types, this);
|
||||
const types = Hooks.applyFilters('mailpoet_newsletters_types', [...defaultTypes, ...this.getAutomaticEmails()], this);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
import Breadcrumb from 'newsletters/breadcrumb.jsx';
|
||||
import React from 'react';
|
||||
import MailPoet from 'mailpoet';
|
||||
|
||||
class AutomaticEmailsBreadcrumb extends React.Component {
|
||||
render() {
|
||||
const steps = [
|
||||
{
|
||||
name: 'type',
|
||||
label: MailPoet.I18n.t('selectType'),
|
||||
link: '/new',
|
||||
},
|
||||
{
|
||||
name: 'events',
|
||||
label: MailPoet.I18n.t('events'),
|
||||
},
|
||||
{
|
||||
name: 'conditions',
|
||||
label: MailPoet.I18n.t('conditions'),
|
||||
},
|
||||
{
|
||||
name: 'template',
|
||||
label: MailPoet.I18n.t('template'),
|
||||
},
|
||||
{
|
||||
name: 'editor',
|
||||
label: MailPoet.I18n.t('designer'),
|
||||
},
|
||||
{
|
||||
name: 'send',
|
||||
label: MailPoet.I18n.t('send'),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Breadcrumb step={this.props.step} steps={steps} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = AutomaticEmailsBreadcrumb;
|
||||
@ -0,0 +1,93 @@
|
||||
import React from 'react';
|
||||
import AutomaticEmailsBreadcrumb from 'newsletters/types/automatic_emails/breadcrumb.jsx';
|
||||
import MailPoet from 'mailpoet';
|
||||
import _ from 'underscore';
|
||||
|
||||
class AutomaticEmailsEventsList extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.automaticEmail = this.props.route.data.automaticEmail;
|
||||
this.automaticEmailEvents = this.automaticEmail.events;
|
||||
this.eventsConfigurator = this.eventsConfigurator.bind(this);
|
||||
}
|
||||
|
||||
eventsConfigurator(eventId) {
|
||||
this.props.router.push(`new/${this.automaticEmail.id}/${eventId}/conditions`);
|
||||
}
|
||||
|
||||
displayEvents() {
|
||||
const events = _.map(this.automaticEmailEvents, (event, index) => {
|
||||
let action;
|
||||
|
||||
if (this.automaticEmail.premium) {
|
||||
action = (
|
||||
<a href="?page=mailpoet-premium"
|
||||
target="_blank">
|
||||
{MailPoet.I18n.t('premiumFeatureLink')}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
const disabled = event.soon;
|
||||
|
||||
action = (
|
||||
<a className="button button-primary"
|
||||
disabled={disabled}
|
||||
onClick={!disabled ? this.eventsConfigurator.bind(null, event.id) : null}
|
||||
>
|
||||
{event.actionButtonTitle || MailPoet.I18n.t('setUp')}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<li key={index} data-type={event.id}>
|
||||
<div>
|
||||
<div className="mailpoet_thumbnail">
|
||||
{event.thumbnailImage ? <img src={event.thumbnailImage} /> : null}
|
||||
</div>
|
||||
<div className="mailpoet_description">
|
||||
<div className="title_and_badge">
|
||||
<h3>{event.title} {event.soon ? `(${MailPoet.I18n.t('soon').toLowerCase()})` : ''}</h3>
|
||||
{event.badge ? (
|
||||
<span className={`mailpoet_badge mailpoet_badge_${event.badge.style}`}>
|
||||
{event.badge.text}
|
||||
</span>
|
||||
) : ''
|
||||
}
|
||||
</div>
|
||||
<p>{event.description}</p>
|
||||
</div>
|
||||
<div className="mailpoet_actions">
|
||||
{action}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<ul className="mailpoet_boxes woocommerce clearfix">
|
||||
{events}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const heading = MailPoet.I18n.t('selectAutomaticEmailsEventsHeading')
|
||||
.replace('%1s', this.automaticEmail.title);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>
|
||||
{heading} ({MailPoet.I18n.t('beta').toLowerCase()})
|
||||
</h1>
|
||||
|
||||
<AutomaticEmailsBreadcrumb step="events" />
|
||||
|
||||
{this.displayEvents()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = AutomaticEmailsEventsList;
|
||||
161
assets/js/src/newsletters/types/woocommerce.jsx
Normal file
161
assets/js/src/newsletters/types/woocommerce.jsx
Normal file
@ -0,0 +1,161 @@
|
||||
define(
|
||||
[
|
||||
'react',
|
||||
'mailpoet',
|
||||
'wp-js-hooks',
|
||||
'react-router',
|
||||
'newsletters/breadcrumb.jsx',
|
||||
],
|
||||
(
|
||||
React,
|
||||
MailPoet,
|
||||
Hooks,
|
||||
Router,
|
||||
Breadcrumb
|
||||
) => {
|
||||
const WooCommerceAutomaticEmail = React.createClass({
|
||||
contextTypes: {
|
||||
router: React.PropTypes.object.isRequired,
|
||||
},
|
||||
setupNewsletter: function (type) {
|
||||
if (type !== undefined) {
|
||||
this.context.router.push(`/new/${type}`);
|
||||
MailPoet.trackEvent('Emails > Type selected', {
|
||||
'MailPoet Free version': window.mailpoet_version,
|
||||
'Email type': type,
|
||||
});
|
||||
}
|
||||
},
|
||||
createNewsletter: function (type) {
|
||||
MailPoet.trackEvent('Emails > Type selected', {
|
||||
'MailPoet Free version': window.mailpoet_version,
|
||||
'Email type': type,
|
||||
});
|
||||
MailPoet.Ajax.post({
|
||||
api_version: window.mailpoet_api_version,
|
||||
endpoint: 'newsletters',
|
||||
action: 'create',
|
||||
data: {
|
||||
type: type,
|
||||
subject: MailPoet.I18n.t('draftNewsletterTitle'),
|
||||
},
|
||||
}).done((response) => {
|
||||
this.context.router.push(`/template/${response.data.id}`);
|
||||
}).fail((response) => {
|
||||
if (response.errors.length > 0) {
|
||||
MailPoet.Notice.error(
|
||||
response.errors.map(error => error.message),
|
||||
{ scroll: true }
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
render: function () {
|
||||
const types = [
|
||||
{
|
||||
id: 'woocommerce',
|
||||
title: MailPoet.I18n.t('wooCommerceEventAbandonedCartTitle'),
|
||||
description: MailPoet.I18n.t('wooCommerceEventAbandonedCartDescription'),
|
||||
badge: {
|
||||
text: MailPoet.I18n.t('wooCommerceEventAbandonedCartBadge'),
|
||||
style: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'woocommerce',
|
||||
title: MailPoet.I18n.t('wooCommerceEventFirstPurchaseTitle'),
|
||||
description: MailPoet.I18n.t('wooCommerceEventFirstPurchaseDescription'),
|
||||
badge: {
|
||||
text: MailPoet.I18n.t('wooCommerceEventFirstPurchaseBadge'),
|
||||
style: 'yellow',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'woocommerce',
|
||||
title: MailPoet.I18n.t('wooCommerceEventPurchasedProductTitle'),
|
||||
description: MailPoet.I18n.t('wooCommerceEventPurchasedProductDescription'),
|
||||
},
|
||||
{
|
||||
id: 'woocommerce',
|
||||
title: MailPoet.I18n.t('wooCommerceEventPurchasedInCategoryTitle'),
|
||||
description: MailPoet.I18n.t('wooCommerceEventPurchasedInCategoryDescription'),
|
||||
soon: true,
|
||||
},
|
||||
{
|
||||
id: 'woocommerce',
|
||||
title: MailPoet.I18n.t('wooCommerceEventBigSpenderTitle'),
|
||||
description: MailPoet.I18n.t('wooCommerceEventBigSpenderDescription'),
|
||||
soon: true,
|
||||
badge: {
|
||||
text: MailPoet.I18n.t('wooCommerceEventSmartToHaveBadge'),
|
||||
style: 'teal',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{
|
||||
name: 'type',
|
||||
label: MailPoet.I18n.t('selectType'),
|
||||
link: '/new',
|
||||
},
|
||||
{
|
||||
name: 'events',
|
||||
label: MailPoet.I18n.t('wooCommerceBreadcrumbsEvents'),
|
||||
},
|
||||
{
|
||||
name: 'conditions',
|
||||
label: MailPoet.I18n.t('wooCommerceBreadcrumbsConditions'),
|
||||
},
|
||||
{
|
||||
name: 'template',
|
||||
label: MailPoet.I18n.t('template'),
|
||||
},
|
||||
{
|
||||
name: 'editor',
|
||||
label: MailPoet.I18n.t('designer'),
|
||||
},
|
||||
{
|
||||
name: 'send',
|
||||
label: MailPoet.I18n.t('send'),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>{MailPoet.I18n.t('wooCommerceSelectEventHeading')}</h1>
|
||||
|
||||
<Breadcrumb step="events" steps={steps} />
|
||||
|
||||
<ul className="mailpoet_boxes woocommerce clearfix">
|
||||
{types.map((type, index) => (
|
||||
<li key={index} data-type={type.id}>
|
||||
<div>
|
||||
<div className="mailpoet_thumbnail">
|
||||
{type.thumbnailImage ? <img src={type.thumbnailImage} /> : null}
|
||||
</div>
|
||||
<div className="mailpoet_description">
|
||||
<div className="title_and_badge">
|
||||
<h3>{type.title} {type.soon ? `(${MailPoet.I18n.t('wooCommerceEventTitleSoon')})` : ''}</h3>
|
||||
{type.badge ? <span className={`mailpoet_badge mailpoet_badge_${type.badge.style}`}>{type.badge.text}</span> : ''}
|
||||
</div>
|
||||
<p>{type.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="mailpoet_actions">
|
||||
<a href="?page=mailpoet-premium" target="_blank">
|
||||
{MailPoet.I18n.t('wooCommercePremiumFeatureLink')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
), this)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
return WooCommerceAutomaticEmail;
|
||||
}
|
||||
);
|
||||
@ -573,6 +573,56 @@ class Menu {
|
||||
$data['tracking_enabled'] = Setting::getValue('tracking.enabled');
|
||||
$data['premium_plugin_active'] = License::getLicense();
|
||||
|
||||
$data['automatic_emails'] = array(
|
||||
array(
|
||||
'id' => 'woocommerce',
|
||||
'premium' => true,
|
||||
'title' => __('WooCommerce Automatic Emails', 'mailpoet'),
|
||||
'description' => __("Put your store's email marketing on autopilot.", 'mailpoet'),
|
||||
'events' => array(
|
||||
array(
|
||||
'id' => 'woocommerce',
|
||||
'title' => __('Abandoned Shopping Cart', 'mailpoet'),
|
||||
'description' => __('Send an email to logged-in visitors who have items in their shopping carts but left your website without checking out. Can convert up to 5% of abandoned carts.', 'mailpoet'),
|
||||
'badge' => array(
|
||||
'text' => __('Must-have', 'mailpoet'),
|
||||
'style' => 'red'
|
||||
)
|
||||
),
|
||||
array(
|
||||
'id' => 'woocommerce',
|
||||
'title' => __('First Purchase', 'mailpoet'),
|
||||
'description' => __('Send an email automatically to customers who have purchased for the first time.', 'mailpoet'),
|
||||
'badge' => array(
|
||||
'text' => __('Recommended', 'mailpoet'),
|
||||
'style' => 'yellow'
|
||||
)
|
||||
),
|
||||
array(
|
||||
'id' => 'woocommerce',
|
||||
'title' => __('Purchased This Product', 'mailpoet'),
|
||||
'description' => __('Let MailPoet send an email to customers who purchase a specific product.', 'mailpoet'),
|
||||
),
|
||||
array(
|
||||
'id' => 'woocommerce',
|
||||
'title' => __('Purchased In This Category', 'mailpoet'),
|
||||
'description' => __('Let MailPoet send an email to customers who purchase a product from a specific category.', 'mailpoet'),
|
||||
'soon' => true
|
||||
),
|
||||
array(
|
||||
'id' => 'woocommerce',
|
||||
'title' => __('Big Spender', 'mailpoet'),
|
||||
'description' => __('Let MailPoet send an email to customers who have spent a certain amount to thank them, possibly with a coupon.', 'mailpoet'),
|
||||
'soon' => true,
|
||||
'badge' => array(
|
||||
'text' => __('Smart to have', 'mailpoet'),
|
||||
'style' => 'teal'
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
wp_enqueue_script('jquery-ui');
|
||||
wp_enqueue_script('jquery-ui-datepicker');
|
||||
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
var mailpoet_date_storage_format = "Y-m-d";
|
||||
var mailpoet_tracking_enabled = <%= json_encode(tracking_enabled) %>;
|
||||
var mailpoet_premium_active = <%= json_encode(premium_plugin_active) %>;
|
||||
var mailpoet_automatic_emails = <%= json_encode(automatic_emails) %>;
|
||||
</script>
|
||||
<% endblock %>
|
||||
|
||||
@ -55,6 +56,8 @@
|
||||
'numberOfItemsMultiple': __('%$1d items'),
|
||||
|
||||
'selectType': __('Select type'),
|
||||
'events': __('Events'),
|
||||
'conditions': _x('Conditions', 'Configuration options for automatic email events'),
|
||||
'template': __('Template'),
|
||||
'designer': __('Designer'),
|
||||
'send': __('Send'),
|
||||
@ -125,7 +128,7 @@
|
||||
'create': __('Create'),
|
||||
'welcomeNewsletterTypeTitle': __('Welcome Email'),
|
||||
'welcomeNewsletterTypeDescription': __('Automatically send an email (or series of emails) to new subscribers or WordPress users. Send a day, a week, or a month after they sign up.'),
|
||||
'getPremiumVersion': __('Get premium version!'),
|
||||
'premiumFeatureLink': __('This is a Premium feature'),
|
||||
'setUp': __('Set up'),
|
||||
'postNotificationNewsletterTypeTitle': __('Latest Post Notifications'),
|
||||
'postNotificationNewsletterTypeDescription': __('Let MailPoet email your subscribers with your latest content. You can send daily, weekly, monthly, or even immediately after publication.'),
|
||||
@ -272,7 +275,10 @@
|
||||
'sample': _x('Sample', 'Sample newsletters templates category'),
|
||||
'noTemplates': __('This category does not contain any template yet!'),
|
||||
|
||||
'errorWhileTakingScreenshot': __('An error occured while saving the template in "Recently sent"')
|
||||
'soon': __('Soon'),
|
||||
'beta': __('Beta'),
|
||||
'errorWhileTakingScreenshot': __('An error occured while saving the template in "Recently sent"'),
|
||||
'selectAutomaticEmailsEventsHeading': __('Select %1s events'),
|
||||
}) %>
|
||||
<% endblock %>
|
||||
|
||||
|
||||
@ -129,6 +129,14 @@ var baseConfig = {
|
||||
include: path.resolve(__dirname, 'assets/js/src/newsletters/breadcrumb.jsx'),
|
||||
loader: 'expose-loader?' + globalPrefix + '.NewsletterCreationBreadcrumb!babel-loader',
|
||||
},
|
||||
{
|
||||
include: path.resolve(__dirname, 'assets/js/src/newsletters/types/automatic_emails/events_list.jsx'),
|
||||
loader: 'expose-loader?' + globalPrefix + '.AutomaticEmailsEventsList!babel-loader',
|
||||
},
|
||||
{
|
||||
include: path.resolve(__dirname, 'assets/js/src/newsletters/types/automatic_emails/breadcrumb.jsx'),
|
||||
loader: 'expose-loader?' + globalPrefix + '.AutomaticEmailsBreadcrumb!babel-loader',
|
||||
},
|
||||
{
|
||||
include: /Blob.js$/,
|
||||
loader: 'exports-loader?window.Blob',
|
||||
@ -185,6 +193,8 @@ var adminConfig = {
|
||||
'form/form.jsx',
|
||||
'newsletters/badges/stats.jsx',
|
||||
'newsletters/breadcrumb.jsx',
|
||||
'newsletters/types/automatic_emails/events_list.jsx',
|
||||
'newsletters/types/automatic_emails/breadcrumb.jsx',
|
||||
'newsletters/types/welcome/scheduling.jsx',
|
||||
'history',
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user