Add heading content

[MAILPOET-2278]

assets/js/src/newsletter_editor/blocks/woocommerceHeading.js

@@ -5,10 +5,11 @@ import App from 'newsletter_editor/App';
 import BaseBlock from 'newsletter_editor/blocks/base';
 
 const BlockModel = BaseBlock.BlockModel.extend({
-  stale: ['styles.backgroundColor'],
+  stale: ['styles.backgroundColor', 'content'],
   defaults() {
     return this._getDefaults({
       type: 'woocommerceHeading',
+      content: '',
       styles: {
         fontColor: '#000000',
         backgroundColor: '#FFFFFF',
@@ -71,7 +72,7 @@ const WidgetView = BaseBlock.WidgetView.extend({
 });
 
 const BlockView = BaseBlock.BlockView.extend({
-  className: 'mailpoet_block mailpoet_woocommerce_heading_block mailpoet_droppable_block',
+  className: 'mailpoet_container mailpoet_woocommerce_heading_block mailpoet_droppable_block',
   initialize: function initialize() {
     BaseBlock.BlockView.prototype.initialize.apply(this, arguments);
     this.listenTo(this.model, 'change:styles.fontColor', this.render);
@@ -94,6 +95,7 @@ const BlockView = BaseBlock.BlockView.extend({
     return {
       viewCid: this.cid,
       model: this.model.toJSON(),
+      content: this.model.get('content'),
       styles: this.model.get('styles').toJSON(),
     };
   },

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

@@ -20,7 +20,7 @@ Module.save = function () {
 
   // Stringify to enable transmission of primitive non-string value types
   if (!_.isUndefined(json.body)) {
-    delete json.body.blockDefaults.woocommerceHeading.styles.backgroundColor;
+    delete json.body.blockDefaults.woocommerceHeading;
     delete json.body.blockDefaults.woocommerceContent;
     json.body = JSON.stringify(json.body);
   }

lib/AdminPages/Pages/NewsletterEditor.php

@@ -10,6 +10,7 @@ use MailPoet\Services\Bridge;
 use MailPoet\Settings\SettingsController;
 use MailPoet\Settings\UserFlagsController;
 use MailPoet\WooCommerce\Helper as WooCommerceHelper;
+use MailPoet\WooCommerce\TransactionalEmails;
 use MailPoet\WP\Functions as WPFunctions;
 
 class NewsletterEditor {
@@ -28,18 +29,23 @@ class NewsletterEditor {
   /** @var WPFunctions */
   private $wp;
 
+  /** @var TransactionalEmails */
+  private $wc_transactional_emails;
+
   function __construct(
     PageRenderer $page_renderer,
     SettingsController $settings,
     UserFlagsController $user_flags,
     WooCommerceHelper $woocommerce_helper,
-    WPFunctions $wp
+    WPFunctions $wp,
+    TransactionalEmails $wc_transactional_emails
   ) {
     $this->page_renderer = $page_renderer;
     $this->settings = $settings;
     $this->user_flags = $user_flags;
     $this->woocommerce_helper = $woocommerce_helper;
     $this->wp = $wp;
+    $this->wc_transactional_emails = $wc_transactional_emails;
   }
 
   function render() {
@@ -68,6 +74,7 @@ class NewsletterEditor {
       'mss_active' => Bridge::isMPSendingServiceEnabled(),
       'woocommerce' => [
         'email_base_color' => $this->wp->getOption('woocommerce_email_base_color', '#000000'),
+        'email_heading' => $this->wc_transactional_emails->getEmailHeading(),
       ],
     ];
     $this->wp->wpEnqueueMedia();

lib/WP/Functions.php

@@ -493,6 +493,14 @@ class Functions {
     return wp_parse_args($args, $defaults);
   }
 
+  function wpParseUrl($url, $component = -1) {
+    return wp_parse_url($url, $component);
+  }
+
+  function wpSpecialcharsDecode($string, $quote_style = ENT_NOQUOTES ) {
+    return wp_specialchars_decode($string, $quote_style);
+  }
+
   function wpPrintScripts($handles = false) {
     return wp_print_scripts($handles);
   }

lib/WooCommerce/TransactionalEmails.php

@@ -21,7 +21,7 @@ class TransactionalEmails {
     $this->settings = $settings;
   }
 
-  function init() {
+  public function init() {
     $saved_email_id = (bool)$this->settings->get(self::SETTING_EMAIL_ID, false);
     if (!$saved_email_id) {
       $email = Newsletter::createOrUpdate([
@@ -34,6 +34,25 @@ class TransactionalEmails {
     }
   }
 
+  public function getEmailHeading() {
+    $default_heading = __('Thank you for your order', 'woocommerce');
+    $settings = $this->wp->getOption('woocommerce_customer_processing_order_settings');
+    if (!$settings) {
+      return $default_heading;
+    }
+    return $this->replacePlaceholders($settings['heading'] ?: $default_heading);
+  }
+
+  private function replacePlaceholders($text) {
+    $title = $this->wp->wpSpecialcharsDecode($this->wp->getOption('blogname'), ENT_QUOTES);
+    $address = $this->wp->wpParseUrl($this->wp->homeUrl(), PHP_URL_HOST);
+    return str_replace(
+      ['{site_title}','{site_address}'],
+      [$title, $address],
+      $text
+    );
+  }
+
   private function getBody() {
     $social_icon_url = Env::$assets_url . '/img/newsletter_editor/social-icons';
     $wc_header_image = $this->wp->getOption('woocommerce_email_header_image', '');

views/newsletter/editor.html

@@ -1435,6 +1435,7 @@
           },
         },
         woocommerceHeading: {
+          content: '<%= woocommerce.email_heading %>',
           styles: {
             fontColor: '#000000',
             backgroundColor: '<%= woocommerce.email_base_color %>',

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

@@ -1,11 +1,17 @@
 <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 }};
 	}
 </style>
 <div class="mailpoet_content mailpoet_woocommerce_heading" data-automation-id="woocommerce_heading">
-	<p>This is the WC Heading Widget...</p>
+	<h1>{{ content }}</h1>
 </div>
 <div class="mailpoet_block_highlight"></div>