Add global styles for use in WC header and content blocks [MAILPOET-2521]

assets/js/src/newsletter_editor/components/sidebar.js

@@ -77,11 +77,6 @@ SidebarView = Marionette.View.extend({
       }
     },
   },
-  templateContext: function () {
-    return {
-      isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
-    };
-  },
   initialize: function () {
     jQuery(window)
       .on('resize', this.updateHorizontalScroll.bind(this))
@@ -97,6 +92,7 @@ SidebarView = Marionette.View.extend({
     this.showChildView('stylesRegion', new Module.SidebarStylesView({
       model: App.getGlobalStyles(),
       availableStyles: App.getAvailableStyles(),
+      isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
     }));
     this.showChildView('previewRegion', new Module.SidebarPreviewView());
   },
@@ -213,16 +209,21 @@ Module.SidebarStylesView = Marionette.View.extend({
       },
       'change #mailpoet_newsletter_background_color': _.partial(this.changeColorField, 'wrapper.backgroundColor'),
       'change #mailpoet_background_color': _.partial(this.changeColorField, 'body.backgroundColor'),
+      // WooCommerce styles
+      'change #mailpoet_wc_heading_font_color': _.partial(this.changeColorField, 'woocommerce.headingFontColor'),
+      'change #mailpoet_wc_branding_color': _.partial(this.changeColorField, 'woocommerce.brandingColor'),
     };
   },
   templateContext: function () {
     return {
       model: this.model.toJSON(),
       availableStyles: this.availableStyles.toJSON(),
+      isWoocommerceTransactional: this.isWoocommerceTransactional,
     };
   },
   initialize: function (options) {
     this.availableStyles = options.availableStyles;
+    this.isWoocommerceTransactional = options.isWoocommerceTransactional;
     App.getChannel().on('historyUpdate', this.render);
   },
   changeField: function (field, event) {

assets/js/src/newsletter_editor/components/styles.js

@@ -57,12 +57,20 @@ Module.StylesModel = SuperModel.extend({
 
 Module.StylesView = Marionette.View.extend({
   getTemplate: function () { return window.templates.styles; }, // eslint-disable-line func-names
+  templateContext: function () { // eslint-disable-line func-names
+    return {
+      isWoocommerceTransactional: this.isWoocommerceTransactional,
+    };
+  },
   modelEvents: {
     change: 'render',
   },
   serializeData: function () { // eslint-disable-line func-names
     return this.model.toJSON();
   },
+  initialize: function (options) { // eslint-disable-line func-names
+    this.isWoocommerceTransactional = options.isWoocommerceTransactional;
+  },
 });
 
 Module._globalStyles = new SuperModel();
@@ -92,7 +100,10 @@ App.on('before:start', function (BeforeStartApp, options) { // eslint-disable-li
 });
 
 App.on('start', function (StartApp) { // eslint-disable-line func-names
-  var stylesView = new Module.StylesView({ model: StartApp.getGlobalStyles() });
+  var stylesView = new Module.StylesView({
+    model: StartApp.getGlobalStyles(),
+    isWoocommerceTransactional: App.getNewsletter().isWoocommerceTransactional(),
+  });
   StartApp._appView.showChildView('stylesRegion', stylesView);
 });
 

lib/WooCommerce/TransactionalEmails.php

@@ -23,6 +23,9 @@ class TransactionalEmails {
   /** @var Template */
   private $template;
 
+  /** @var Helper */
+  private $woocommerce_helper;
+
   /** @var Renderer */
   private $renderer;
 
@@ -32,11 +35,12 @@ class TransactionalEmails {
   /** @var NewslettersRepository */
   private $newsletters_repository;
 
-  function __construct(WPFunctions $wp, SettingsController $settings, Template $template, Renderer $renderer, NewslettersRepository $newsletters_repository) {
+  function __construct(WPFunctions $wp, SettingsController $settings, Template $template, Renderer $renderer, Helper $woocommerce_helper, NewslettersRepository $newsletters_repository) {
     $this->wp = $wp;
     $this->settings = $settings;
     $this->template = $template;
     $this->renderer = $renderer;
+    $this->woocommerce_helper = $woocommerce_helper;
     $this->newsletters_repository = $newsletters_repository;
     $this->email_headings = [
       'new_account' => [
@@ -140,6 +144,7 @@ class TransactionalEmails {
       $key = preg_replace('/^woocommerce_email_/', '', $name);
       $result[$key] = $value ?: $default;
     }
+    $result['base_text_color'] = $this->woocommerce_helper->wcLightOrDark($result['base_color'], '#202020', '#ffffff');
     $result['footer_text'] = $this->replacePlaceholders($result['footer_text']);
     return $result;
   }

lib/WooCommerce/TransactionalEmails/Template.php

@@ -330,6 +330,11 @@ class Template {
          [
           'backgroundColor' => $wc_email_settings['background_color'],
          ],
+        'woocommerce' =>
+         [
+          'brandingColor' => $wc_email_settings['base_color'],
+          'headingFontColor' => $wc_email_settings['base_text_color'],
+         ],
        ],
       'blockDefaults' =>
        [

tests/integration/WooCommerce/TransactionalEmailsTest.php

@@ -9,6 +9,7 @@ use MailPoet\Models\Newsletter;
 use MailPoet\Newsletter\Editor\LayoutHelper as L;
 use MailPoet\Newsletter\NewslettersRepository;
 use MailPoet\Settings\SettingsController;
+use MailPoet\WooCommerce\Helper as WooCommerceHelper;
 use MailPoet\WooCommerce\TransactionalEmails\Renderer;
 use MailPoet\WooCommerce\TransactionalEmails\Template;
 use MailPoet\WP\Functions as WPFunctions;
@@ -40,6 +41,7 @@ class TransactionalEmailsTest extends \MailPoetTest {
       $this->settings,
       ContainerWrapper::getInstance()->get(Template::class),
       ContainerWrapper::getInstance()->get(Renderer::class),
+      Stub::makeEmpty(WooCommerceHelper::class),
       $this->newsletters_repository
     );
   }
@@ -71,6 +73,7 @@ class TransactionalEmailsTest extends \MailPoetTest {
       $this->settings,
       ContainerWrapper::getInstance()->get(Template::class),
       ContainerWrapper::getInstance()->get(Renderer::class),
+      Stub::makeEmpty(WooCommerceHelper::class),
       $this->newsletters_repository
     );
     $transactional_emails->init();
@@ -130,6 +133,7 @@ class TransactionalEmailsTest extends \MailPoetTest {
       $this->settings,
       ContainerWrapper::getInstance()->get(Template::class),
       $renderer,
+      Stub::makeEmpty(WooCommerceHelper::class),
       ContainerWrapper::getInstance()->get(NewslettersRepository::class)
     );
     $transactional_emails->useTemplateForWoocommerceEmails();

tests/unit/WooCommerce/TransactionalEmailsTest.php

@@ -5,6 +5,7 @@ namespace MailPoet\WooCommerce;
 use Codeception\Stub;
 use MailPoet\Newsletter\NewslettersRepository;
 use MailPoet\Settings\SettingsController;
+use MailPoet\WooCommerce\Helper as WooCommerceHelper;
 use MailPoet\WooCommerce\TransactionalEmails\Renderer;
 use MailPoet\WooCommerce\TransactionalEmails\Template;
 use MailPoet\WP\Functions as WPFunctions;
@@ -37,8 +38,9 @@ class TransactionalEmailsTest extends \MailPoetUnitTest {
     $settings = Stub::make(SettingsController::class);
     $template = Stub::make(Template::class);
     $renderer = Stub::make(Renderer::class);
+    $woocommerce_helper = Stub::make(WooCommerceHelper::class);
     $newsletters_repository = Stub::make(NewslettersRepository::class);
-    $transactional_emails = new TransactionalEmails($wp, $settings, $template, $renderer, $newsletters_repository);
+    $transactional_emails = new TransactionalEmails($wp, $settings, $template, $renderer, $woocommerce_helper, $newsletters_repository);
     expect($transactional_emails->getEmailHeadings())->equals([
       'new_account' => 'Test: New Order: #0001',
       'processing_order' => 'Thank you for your order',

views/newsletter/templates/blocks/woocommerceContent/completed_order.hbs

@@ -1,11 +1,4 @@
 <div class="mailpoet_tools"></div>
-<style type="text/css">
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
-        color: {{ styles.titleColor }};
-    }
-</style>
 <div class="mailpoet_woocommerce_content_overlay">
   <p><%= __('This content will be autogenerated by WooCommerce') %></p>
 </div>

views/newsletter/templates/blocks/woocommerceContent/customer_note.hbs

@@ -1,11 +1,4 @@
 <div class="mailpoet_tools"></div>
-<style type="text/css">
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
-        color: {{ styles.titleColor }};
-    }
-</style>
 <div class="mailpoet_woocommerce_content_overlay">
   <p><%= __('This content will be autogenerated by WooCommerce') %></p>
 </div>

views/newsletter/templates/blocks/woocommerceContent/new_account.hbs

@@ -1,11 +1,4 @@
 <div class="mailpoet_tools"></div>
-<style type="text/css">
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
-        color: {{ styles.titleColor }};
-    }
-</style>
 <div class="mailpoet_woocommerce_content_overlay">
   <p><%= __('This content will be autogenerated by WooCommerce') %></p>
 </div>

views/newsletter/templates/blocks/woocommerceContent/processing_order.hbs

@@ -1,11 +1,4 @@
 <div class="mailpoet_tools"></div>
-<style type="text/css">
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
-    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
-        color: {{ styles.titleColor }};
-    }
-</style>
 <div class="mailpoet_woocommerce_content_overlay">
   <p><%= __('This content will be autogenerated by WooCommerce') %></p>
 </div>

views/newsletter/templates/blocks/woocommerceHeading/block.hbs

@@ -1,17 +1,4 @@
 <div class="mailpoet_tools"></div>
-<style type="text/css">
-	.mailpoet_editor_view_{{ viewCid }} .mailpoet_content {
-		padding: 30px 20px;
-		background: {{ styles.backgroundColor }};
-	}
-	.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1 {
-		line-height: 1.2em;
-		font-family: 'Source Sans Pro';
-		font-size: 36px;
-		color: {{ styles.fontColor }};
-		margin: 0;
-	}
-</style>
 <div class="mailpoet_woocommerce_heading_overlay">
   <p><%= __('This content will be autogenerated by WooCommerce') %></p>
 </div>

views/newsletter/templates/components/sidebar/styles.hbs

@@ -2,6 +2,19 @@
 <h3><%= __('Styles') %></h3>
 <div class="mailpoet_region_content">
     <form id="mailpoet_newsletter_styles" action="" method="post" accept-charset="utf-8">
+        {{#if isWoocommerceTransactional}}
+            <div class="mailpoet_form_field">
+                <span>
+                    <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="wc-heading-font-color" value="{{ model.woocommerce.headingFontColor }}" id="mailpoet_wc_heading_font_color"></span>
+                </span><%= __('Heading font color') %>
+            </div>
+            <div class="mailpoet_form_field">
+                <span>
+                    <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="wc-branding-color" value="{{ model.woocommerce.brandingColor }}" id="mailpoet_wc_branding_color"></span>
+                </span><%= __('Branding color') %>
+            </div>
+            <hr />
+        {{/if}}
         <div class="mailpoet_form_field mailpoet_form_narrow_select2">
             <span>
                 <span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="text-color" value="{{ model.text.fontColor }}" id="mailpoet_text_font_color"></span>

views/newsletter/templates/components/styles.hbs

@@ -34,4 +34,22 @@
     #mailpoet_editor_main_wrapper {
         background-color: {{ body.backgroundColor }};
     }
+    {{#if isWoocommerceTransactional}}
+      .mailpoet_woocommerce_heading {
+        padding: 30px 20px;
+        background: {{ woocommerce.brandingColor }};
+      }
+      .mailpoet_woocommerce_heading h1 {
+        line-height: 1.2em;
+        font-family: 'Source Sans Pro';
+        font-size: 36px;
+        color: {{ woocommerce.headingFontColor }};
+        margin: 0;
+      }
+      .mailpoet_woocommerce_content h1,
+      .mailpoet_woocommerce_content h2,
+      .mailpoet_woocommerce_content h3 {
+          color: {{ styles.titleColor }};
+      }
+    {{/if}}
 </style>