Always fetch styles from WooCommerce [MAILPOET-2569]

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

@@ -89,6 +89,7 @@ App.on('before:start', function (BeforeStartApp, options) { // eslint-disable-li
   var Application = BeforeStartApp;
   var body;
   var globalStyles;
+  var overriddenGlobalStyles;
   // Expose style methods to global application
   Application.getGlobalStyles = Module.getGlobalStyles;
   Application.setGlobalStyles = Module.setGlobalStyles;
@@ -96,7 +97,8 @@ App.on('before:start', function (BeforeStartApp, options) { // eslint-disable-li
 
   body = options.newsletter.body;
   globalStyles = (_.has(body, 'globalStyles')) ? body.globalStyles : {};
-  this.setGlobalStyles(globalStyles);
+  overriddenGlobalStyles = (_.has(options.config, 'overrideGlobalStyles')) ? options.config.overrideGlobalStyles : {};
+  this.setGlobalStyles(jQuery.extend(true, {}, globalStyles, overriddenGlobalStyles));
 });
 
 App.on('start', function (StartApp) { // eslint-disable-line func-names

lib/AdminPages/Pages/NewsletterEditor.php

@@ -69,14 +69,12 @@ class NewsletterEditor {
     $subscriber_data = $subscriber ? $subscriber->asArray() : [];
     $woocommerce_data = [];
     if ($this->woocommerce_helper->isWooCommerceActive()) {
-      $email_base_color = $this->wp->getOption('woocommerce_email_base_color', '#ffffff');
+      $wc_email_settings = $this->wc_transactional_emails->getWCEmailSettings();
       $woocommerce_data = [
         'email_headings' => $this->wc_transactional_emails->getEmailHeadings(),
-        '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'),
       ];
+      $woocommerce_data = array_merge($wc_email_settings, $woocommerce_data);
     }
     $data = [
       'shortcodes' => ShortcodesHelper::getShortcodes(),

lib/WooCommerce/Helper.php

@@ -40,6 +40,10 @@ class Helper {
     return wc_light_or_dark($color, $dark, $light);
   }
 
+  function wcHexIsLight($color) {
+    return wc_hex_is_light($color);
+  }
+
   function getOrdersCountCreatedBefore($date_time) {
     global $wpdb;
     $result = $wpdb->get_var( "

lib/WooCommerce/TransactionalEmails.php

@@ -145,6 +145,11 @@ class TransactionalEmails {
       $result[$key] = $value ?: $default;
     }
     $result['base_text_color'] = $this->woocommerce_helper->wcLightOrDark($result['base_color'], '#202020', '#ffffff');
+    if ($this->woocommerce_helper->wcHexIsLight($result['body_background_color'])) {
+      $result['link_color'] = $this->woocommerce_helper->wcHexIsLight($result['base_color']) ? $result['base_text_color'] : $result['base_color'];
+    } else {
+      $result['link_color'] = $this->woocommerce_helper->wcHexIsLight($result['base_color']) ? $result['base_color'] : $result['base_text_color'];
+    }
     $result['footer_text'] = $this->replacePlaceholders($result['footer_text']);
     return $result;
   }

lib/WooCommerce/TransactionalEmails/Template.php

@@ -319,7 +319,7 @@ class Template {
          ],
         'link' =>
          [
-          'fontColor' => '#21759B',
+          'fontColor' => $wc_email_settings['link_color'],
           'textDecoration' => 'underline',
          ],
         'wrapper' =>

tasks/phpstan/woocommerce.php

@@ -47,6 +47,10 @@ function wc_light_or_dark(string $color, string $dark, string $light) {
   return '';
 }
 
+function wc_hex_is_light(string $color) {
+  return false;
+}
+
 function wc_get_product($the_product = false, $deprecated = []) {
   return null;
 }

views/newsletter/editor.html

@@ -1481,6 +1481,33 @@
       mtaMethod: '<%= settings["mta"]["method"] %>',
       woocommerceCustomizerEnabled: <%= woocommerce.customizer_enabled ? 'true' : 'false' %>,
       <% if is_wc_transactional_email %>
+      overrideGlobalStyles: {
+        text: {
+          fontColor: <%= json_encode(woocommerce.text_color) %>,
+        },
+        h1: {
+          fontColor: <%= json_encode(woocommerce.base_color) %>,
+        },
+        h2: {
+          fontColor: <%= json_encode(woocommerce.base_color) %>,
+        },
+        h3: {
+          fontColor: <%= json_encode(woocommerce.base_color) %>,
+        },
+        link: {
+          fontColor: <%= json_encode(woocommerce.link_color) %>,
+        },
+        wrapper: {
+          backgroundColor: <%= json_encode(woocommerce.body_background_color) %>,
+        },
+        body: {
+          backgroundColor: <%= json_encode(woocommerce.background_color) %>,
+        },
+        woocommerce: {
+          brandingColor: <%= json_encode(woocommerce.base_color) %>,
+          headingFontColor: <%= json_encode(woocommerce.base_text_color) %>,
+        },
+      },
       hiddenWidgets: ['automatedLatestContentLayout', 'header', 'footer', 'posts', 'products'],
       <% endif %>
     };