Redesign heading part

[MAILPOET-2281]

assets/js/src/newsletter_editor/components/heading.js

@@ -11,6 +11,7 @@ Module.HeadingView = Marionette.View.extend({
   templateContext: function () { // eslint-disable-line func-names
     return {
       model: this.model.toJSON(),
+      isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
     };
   },
   events: function () { // eslint-disable-line func-names
@@ -25,7 +26,9 @@ Module.HeadingView = Marionette.View.extend({
 });
 
 App.on('start', function (StartApp) { // eslint-disable-line func-names
-  StartApp._appView.showChildView('headingRegion', new Module.HeadingView({ model: StartApp.getNewsletter() }));
+  var model = StartApp.getNewsletter();
+  StartApp._appView.showChildView('headingRegion', new Module.HeadingView({ model: model }));
+  if (!model.isWoocommerceTransactional()) {
     MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-subject-line'), {
       tooltipId: 'tooltip-designer-subject-line-ti',
       tooltip: MailPoet.I18n.t('helpTooltipDesignerSubjectLine'),
@@ -35,6 +38,7 @@ App.on('start', function (StartApp) { // eslint-disable-line func-names
       tooltipId: 'tooltip-designer-preheader-ti',
       tooltip: MailPoet.I18n.t('helpTooltipDesignerPreheader'),
     });
+  }
 });
 
 export default Module;

views/newsletter/editor.html

@@ -279,8 +279,8 @@
 <!-- Hidden heading for notices to appear under -->
 <h1 style="display:none"><%= __('Newsletter Editor') %></h1>
 <div id="mailpoet_editor">
-  <div id="mailpoet_editor_heading_left">
   <div id="mailpoet_editor_breadcrumb" class="mailpoet_breadcrumbs"></div>
+  <div id="mailpoet_editor_heading_left">
     <div id="mailpoet_editor_heading"></div>
   </div>
   <div id="mailpoet_editor_heading_right">

views/newsletter/templates/components/heading.hbs

@@ -1,3 +1,12 @@
+{{#if isWoocommerceTransactional}}
+  <h1><%= _x('Edit template for WooCommerce emails', 'Name of user interface used to customize email template used for eCommerce related emails (for example order confirmation email)') %></h1>
+  <div class="mailpoet_form_field mailpoet_heading_form_field">
+    <label for="mailpoet_heading_email_type"><%= _x('Load dummy data for email:', 'Label of a dropdown used to switch between email type: order processing, order completed, ...') %></label>
+    <select id="mailpoet_heading_email_type">
+      <option value="processing_order"><%= __('Processing order', 'woocommerce') %></option>
+    </select>
+  </div>
+{{else}}
 <div class="mailpoet_form_field mailpoet_heading_form_field">
   <input
     type="text"
@@ -16,3 +25,4 @@
   />
   <span id="tooltip-designer-preheader" class="tooltip-help-designer-preheader"></span>
 </div>
+{{/if}}