diff --git a/assets/js/src/newsletters/types.jsx b/assets/js/src/newsletters/types.jsx
index 610d754d71..15536ba5ec 100644
--- a/assets/js/src/newsletters/types.jsx
+++ b/assets/js/src/newsletters/types.jsx
@@ -4,6 +4,7 @@ import MailPoet from 'mailpoet';
import Breadcrumb from 'newsletters/breadcrumb.jsx';
import Hooks from 'wp-js-hooks';
import _ from 'underscore';
+import jQuery from 'jquery';
import { withRouter } from 'react-router-dom';
class NewsletterTypes extends React.Component {
@@ -64,6 +65,67 @@ class NewsletterTypes extends React.Component {
});
}
+ getAdditionalTypes = () => {
+ const show = window.mailpoet_woocommerce_active && MailPoet.FeaturesController.isSupported('wc-transactional-emails-customizer');
+ if (!show) {
+ return [];
+ }
+ return [
+ {
+ slug: 'wc_transactional',
+ title: MailPoet.I18n.t('wooCommerceCustomizerTypeTitle'),
+ description: MailPoet.I18n.t('wooCommerceCustomizerTypeDescription'),
+ action: (
+ {
+ if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+ ) {
+ event.preventDefault();
+ this.openWooCommerceCustomizer();
+ }
+ }}
+ >
+ {MailPoet.I18n.t(window.mailpoet_woocommerce_customizer_enabled ? 'customize' : 'activate_and_customize')}
+
+ ),
+ },
+ ];
+ };
+
+ openWooCommerceCustomizer = () => {
+ const promise = jQuery.Deferred();
+ MailPoet.trackEvent('Emails > Type selected', {
+ 'MailPoet Free version': window.mailpoet_version,
+ 'Email type': 'wc_transactional',
+ });
+ if (!window.mailpoet_woocommerce_customizer_enabled) {
+ promise.then(() => MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'settings',
+ action: 'set',
+ data: {
+ 'woocommerce.use_mailpoet_editor': true,
+ },
+ }));
+ }
+ promise.done(() => {
+ window.location.href = `?page=mailpoet-newsletter-editor&id=${window.mailpoet_woocommerce_transactional_email_id}`;
+ }).fail((response) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true }
+ );
+ }
+ });
+ promise.resolve();
+ };
+
createNewsletter = (type) => {
this.setState({ isCreating: true });
MailPoet.trackEvent('Emails > Type selected', {
@@ -91,45 +153,6 @@ class NewsletterTypes extends React.Component {
});
}
- openWooCommerceCustomizer() {
- console.log('Opening the customizer...');
- }
-
- getAdditionalTypes() {
- const openWooCommerceCustomizer = this.openWooCommerceCustomizer.bind(this);
- const show = window.mailpoet_woocommerce_active && MailPoet.FeaturesController.isSupported('wc-transactional-emails-customizer');
- if (!show) {
- return [];
- }
- return [
- {
- slug: 'wc_transactional',
- title: MailPoet.I18n.t('wooCommerceCustomizerTypeTitle'),
- description: MailPoet.I18n.t('wooCommerceCustomizerTypeDescription'),
- action: (function action() {
- return (
- {
- if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
- ) {
- event.preventDefault();
- openWooCommerceCustomizer();
- }
- }}
- >
- {MailPoet.I18n.t('customize')}
-
- );
- }()),
- },
- ];
- }
-
render() {
const createStandardNewsletter = _.partial(this.createNewsletter, 'standard');
const createNotificationNewsletter = _.partial(this.setupNewsletter, 'notification');
diff --git a/lib/AdminPages/Pages/Newsletters.php b/lib/AdminPages/Pages/Newsletters.php
index 36914569a8..5bef59c5f7 100644
--- a/lib/AdminPages/Pages/Newsletters.php
+++ b/lib/AdminPages/Pages/Newsletters.php
@@ -161,7 +161,8 @@ class Newsletters {
$data['is_new_user'] = $this->installation->isNewInstallation();
$data['sent_newsletters_count'] = (int)Newsletter::where('status', Newsletter::STATUS_SENT)->count();
-
+ $data['woocommerce_customizer_enabled'] = (bool)$this->settings->get('woocommerce.use_mailpoet_editor');
+ $data['woocommerce_transactional_email_id'] = $this->settings->get('woocommerce.transactional_email_id');
$this->wp->wpEnqueueScript('jquery-ui');
$this->wp->wpEnqueueScript('jquery-ui-datepicker');
diff --git a/views/newsletters.html b/views/newsletters.html
index 2bccbbf676..df5880e9f2 100644
--- a/views/newsletters.html
+++ b/views/newsletters.html
@@ -31,6 +31,8 @@
var mailpoet_feature_flags = <%= json_encode(mailpoet_feature_flags) %>;
var mailpoet_woocommerce_active = <%= json_encode(is_woocommerce_active) %>;
+ var mailpoet_woocommerce_customizer_enabled = <%= json_encode(woocommerce_customizer_enabled) %>;
+ var mailpoet_woocommerce_transactional_email_id = <%= json_encode(woocommerce_transactional_email_id) %>;
var mailpoet_automatic_emails = <%= json_encode(automatic_emails) %>;
var mailpoet_feature_announcement_has_news = <%= json_encode(feature_announcement_has_news) %>;
var mailpoet_last_announcement_seen = <%= json_encode(last_announcement_seen) %>;
@@ -174,6 +176,7 @@
'wooCommerceCustomizerTypeTitle': __('WooCommerce Emails Customizer'),
'wooCommerceCustomizerTypeDescription': __("Customize the template used for your WooCommerce emails using MailPoet's editor. Example of WooCommerce email: Order processing notification, Order failed notification, ..."),
'customize': 'Customize',
+ 'activate_and_customize': 'Activate & Customize',
'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.'),
'premiumFeatureLink': __('This is a Premium feature'),