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'),