diff --git a/assets/js/src/newsletters/listings/welcome.jsx b/assets/js/src/newsletters/listings/welcome.jsx index b559d2d257..88c6be52a0 100644 --- a/assets/js/src/newsletters/listings/welcome.jsx +++ b/assets/js/src/newsletters/listings/welcome.jsx @@ -113,6 +113,28 @@ let newsletterActions = [ ); }, }, + { + name: 'duplicate', + label: MailPoet.I18n.t('duplicate'), + onClick: (newsletter, refresh) => MailPoet.Ajax.post({ + api_version: window.mailpoet_api_version, + endpoint: 'newsletters', + action: 'duplicate', + data: { + id: newsletter.id, + }, + }).done((response) => { + MailPoet.Notice.success((MailPoet.I18n.t('newsletterDuplicated')).replace('%$1s', response.data.subject)); + refresh(); + }).fail((response) => { + if (response.errors.length > 0) { + MailPoet.Notice.error( + response.errors.map(error => error.message), + { scroll: true } + ); + } + }), + }, { name: 'edit', link: function link(newsletter) { diff --git a/assets/js/src/newsletters/newsletters.jsx b/assets/js/src/newsletters/newsletters.jsx index 5ce90280df..7444c98501 100644 --- a/assets/js/src/newsletters/newsletters.jsx +++ b/assets/js/src/newsletters/newsletters.jsx @@ -10,6 +10,7 @@ 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 NewsletterTypeWelcome from 'newsletters/types/welcome/welcome.jsx'; import AutomaticEmailEventsList from 'newsletters/types/automatic_emails/events_list.jsx'; import NewsletterListStandard from 'newsletters/listings/standard.jsx'; import NewsletterListWelcome from 'newsletters/listings/welcome.jsx'; @@ -73,6 +74,10 @@ if (container) { path: 'new/notification', component: NewsletterTypeNotification, }, + { + path: 'new/welcome', + component: NewsletterTypeWelcome, + }, /* Template selection */ { name: 'template', diff --git a/assets/js/src/newsletters/types.jsx b/assets/js/src/newsletters/types.jsx index 9c58d21416..fe9a42ee47 100644 --- a/assets/js/src/newsletters/types.jsx +++ b/assets/js/src/newsletters/types.jsx @@ -67,6 +67,7 @@ const NewsletterTypes = React.createClass({ render: function render() { const createStandardNewsletter = _.partial(this.createNewsletter, 'standard'); const createNotificationNewsletter = _.partial(this.setupNewsletter, 'notification'); + const createWelcomeNewsletter = _.partial(this.setupNewsletter, 'welcome'); const defaultTypes = [ { slug: 'standard', @@ -93,11 +94,22 @@ const NewsletterTypes = React.createClass({ videoGuide: 'https://beta.docs.mailpoet.com/article/254-video-guide-to-welcome-emails', action: (function action() { return ( -
+ { + if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key)) + ) { + event.preventDefault(); + createWelcomeNewsletter(); + } + }} + role="button" + tabIndex={0} + > + {MailPoet.I18n.t('setUp')} + ); }()), }, diff --git a/assets/js/src/newsletters/types/welcome/welcome.jsx b/assets/js/src/newsletters/types/welcome/welcome.jsx new file mode 100644 index 0000000000..4e641572f2 --- /dev/null +++ b/assets/js/src/newsletters/types/welcome/welcome.jsx @@ -0,0 +1,104 @@ +import React from 'react'; +import _ from 'underscore'; +import MailPoet from 'mailpoet'; +import PropTypes from 'prop-types'; +import Breadcrumb from '../../breadcrumb.jsx'; +import WelcomeScheduling from './scheduling.jsx'; + +const field = { + name: 'options', + label: 'Event', + type: 'reactComponent', + component: WelcomeScheduling, +}; + +class NewsletterWelcome extends React.Component { + constructor(props) { + super(props); + let availableSegments = window.mailpoet_segments || []; + let defaultSegment = 1; + availableSegments = availableSegments.filter(segment => segment.type === 'default'); + + if (_.size(availableSegments) > 0) { + defaultSegment = _.first(availableSegments).id; + } + + this.state = { + options: { + event: 'segment', + segment: defaultSegment, + role: 'subscriber', + afterTimeNumber: 1, + afterTimeType: 'immediate', + }, + }; + + this.handleValueChange = this.handleValueChange.bind(this); + this.handleNext = this.handleNext.bind(this); + } + + handleValueChange(event) { + const { state } = this; + state[event.target.name] = event.target.value; + this.setState(state); + } + + handleNext() { + MailPoet.Ajax.post({ + api_version: window.mailpoet_api_version, + endpoint: 'newsletters', + action: 'create', + data: _.extend({}, this.state, { + type: 'welcome', + subject: MailPoet.I18n.t('draftNewsletterTitle'), + }), + }).done((response) => { + this.showTemplateSelection(response.data.id); + }).fail((response) => { + if (response.errors.length > 0) { + MailPoet.Notice.error( + response.errors.map(error => error.message), + { scroll: true } + ); + } + }); + } + + showTemplateSelection(newsletterId) { + this.props.router.push(`/template/${newsletterId}`); + } + + render() { + return ( ++ +
+