Implement action

[MAILPOET-2300]

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: (
+          <a
+            className="button button-primary"
+            data-automation-id="customize_woocommerce"
+            onClick={this.openWooCommerceCustomizer}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(event) => {
+              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')}
+          </a>
+        ),
+      },
+    ];
+  };
+
+  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 (
-            <a
-              className="button button-primary"
-              data-automation-id="customize_woocommerce"
-              onClick={openWooCommerceCustomizer}
-              role="button"
-              tabIndex={0}
-              onKeyDown={(event) => {
-                if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
-                ) {
-                  event.preventDefault();
-                  openWooCommerceCustomizer();
-                }
-              }}
-            >
-              {MailPoet.I18n.t('customize')}
-            </a>
-          );
-        }()),
-      },
-    ];
-  }
-
   render() {
     const createStandardNewsletter = _.partial(this.createNewsletter, 'standard');
     const createNotificationNewsletter = _.partial(this.setupNewsletter, 'notification');

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

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