Add WC customizer activation button to the editor [MAILPOET-2520]

assets/css/src/components/newsletterEditor/components/_save.scss

@@ -88,6 +88,16 @@
   text-align: right;
 }
 
+.mailpoet_save_woocommerce_customizer_disabled {
+  text-align: right;
+}
+
+.mailpoet_save_woocommerce_error {
+  color: $error-text-color;
+  margin-top: 10px;
+  text-align: right;
+}
+
 .mailpoet_save_error {
   color: $error-text-color;
   margin-top: 10px;

assets/js/src/newsletter_editor/components/save.js

@@ -112,6 +112,7 @@ Module.SaveView = Marionette.View.extend({
     return {
       wrapperClass: this.wrapperClass,
       isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
+      woocommerceCustomizerEnabled: App.getConfig().get('woocommerceCustomizerEnabled'),
     };
   },
   events: {
@@ -124,6 +125,8 @@ Module.SaveView = Marionette.View.extend({
     /* Export template */
     'click .mailpoet_save_export': 'showExportTemplate',
     'click .mailpoet_export_template': 'exportTemplate',
+    /* WooCommerce */
+    'click .mailpoet_save_activate_wc_customizer_button': 'activateWooCommerceCustomizer',
   },
 
   initialize: function () {
@@ -302,6 +305,21 @@ Module.SaveView = Marionette.View.extend({
     this.$('.mailpoet_save_error').addClass('mailpoet_hidden');
     this.$('.mailpoet_save_next').removeClass('button-disabled');
   },
+  activateWooCommerceCustomizer: function () {
+    var $el = this.$('.mailpoet_save_woocommerce_customizer_disabled');
+    return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'settings',
+      action: 'set',
+      data: {
+        'woocommerce.use_mailpoet_editor': 1,
+      },
+    }).done(function () {
+      $el.addClass('mailpoet_hidden');
+    }).fail(function (response) {
+      MailPoet.Notice.showApiErrorNotice(response, { scroll: true });
+    });
+  },
 });
 
 Module.autoSave = function () {

lib/AdminPages/Pages/NewsletterEditor.php

@@ -75,6 +75,7 @@ class NewsletterEditor {
         'email_base_color' => $email_base_color,
         'email_base_text_color' => $this->woocommerce_helper->wcLightOrDark($email_base_color, '#202020', '#ffffff'),
         'email_text_color' => $this->wp->getOption('woocommerce_email_text_color', '#000000'),
+        'customizer_enabled' => (bool)$this->settings->get('woocommerce.use_mailpoet_editor'),
       ];
     }
     $data = [

lib/AdminPages/Pages/Settings.php

@@ -105,8 +105,8 @@ class Settings {
 
     if (isset($_GET['enable-customizer-notice'])) {
       $notice = new WPNotice(WPNotice::TYPE_ERROR, $this->wp->_x(
-        'You need to enable MailPoet email customizer for WooCommerce if you want to access to the customizer.',
+        'You need to have WooCommerce active to access the MailPoet email customizer for WooCommerce.',
-        'Notice in Settings when WooCommerce customizer is not enabled'
+        'Notice in Settings when WooCommerce is not enabled'
       ), 'mailpoet');
       $notice->displayWPNotice();
     }

views/newsletter/editor.html

@@ -1488,6 +1488,7 @@
       dragDemoUrlSettings: '<%= editor_tutorial_seen %>',
       installedAt: '<%= settings["installed_at"] %>',
       mtaMethod: '<%= settings["mta"]["method"] %>',
+      woocommerceCustomizerEnabled: <%= woocommerce.customizer_enabled ? 'true' : 'false' %>,
     };
     wp.hooks.doAction('mailpoet_newsletters_editor_initialize', config);
 

views/newsletter/templates/components/save.hbs

@@ -12,6 +12,11 @@
             <span class="mailpoet_autosaved_at mailpoet_hidden"></span>
         </div>
     </div>
+    <div class="clearfix"></div>
+    <div class="mailpoet_save_woocommerce_customizer_disabled{{#if woocommerceCustomizerEnabled}} mailpoet_hidden{{/if}}">
+      <div class="mailpoet_save_woocommerce_error"><%= __('The usage of this email template for your WooCommerce emails is not yet activated.') %></div>
+      <input type="button" name="activate_wc_customizer" value="<%= __('Activate now') %>" class="button button-primary mailpoet_save_activate_wc_customizer_button" style="margin-top: 17px">
+    </div>
 {{else}}
     <input type="button" name="next" value="<%= __('Next') %>" class="button button-primary mailpoet_save_next" />
     <div class="mailpoet_button_group mailpoet_save_button_group">