minor fixes

assets/js/src/newsletter_editor/components/content.js

@@ -12,7 +12,7 @@ define([
   // Does not hold newsletter content nor newsletter styles, those are
   // handled by other components.
   Module.NewsletterModel = SuperModel.extend({
-    whitelisted: ['id', 'subject', 'preheader'],
+    whitelisted: ['id', 'subject', 'preheader', 'type'],
     initialize: function () { // eslint-disable-line func-names
       this.on('change', function () { // eslint-disable-line func-names
         App.getChannel().trigger('autoSave');

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

@@ -93,24 +93,11 @@ define([
   };
 
   Module.saveTemplate = function (options) {
-    var categories = ['saved'];
+    var categories = [
+      'saved',
+      App.getNewsletter().get('type')
+    ];
 
-    return MailPoet.Ajax.post({
-      api_version: window.mailpoet_api_version,
-      endpoint: 'newsletters',
-      action: 'get',
-      data: {
-        id: App.toJSON().id
-      }
-    }).then(function (response) {
-      var type = response.data.type;
-      if (type == 'welcome') {
-        categories.push('welcome_emails');
-      }
-      if (type == 'notification') {
-        categories.push('post_notifications');
-      }
-    }).then(function () {
     return Module.getThumbnail(
         jQuery('#mailpoet_editor_content > .mailpoet_block').get(0)
       ).then(function (thumbnail) {
@@ -127,7 +114,6 @@ define([
           data: data
         });
       });
-    });
   };
 
   Module.exportTemplate = function (options) {
@@ -136,7 +122,8 @@ define([
     ).then(function (thumbnail) {
       var data = _.extend(options || {}, {
         thumbnail: thumbnail.toDataURL('image/jpeg'),
-        body: App.getBody()
+        body: App.getBody(),
+        categories: JSON.stringify([App.getNewsletter().get('type')])
       });
       var blob = new Blob(
         [JSON.stringify(data)],

assets/js/src/newsletters/templates.jsx

@@ -15,6 +15,9 @@ const ImportTemplate = React.createClass({
       template.body = JSON.stringify(template.body);
     }
 
+    if (undefined === template.categories) {
+      template.categories = '["saved"]';
+    }
     MailPoet.Modal.loading(true);
 
     MailPoet.Ajax.post({
@@ -81,6 +84,45 @@ const ImportTemplate = React.createClass({
   },
 });
 
+const templatesCategories = [
+  {
+    name: 'standard',
+    label: MailPoet.I18n.t('tabStandardTitle'),
+  },
+  {
+    name: 'welcome',
+    label: MailPoet.I18n.t('tabWelcomeTitle'),
+  },
+  {
+    name: 'notification',
+    label: MailPoet.I18n.t('tabNotificationTitle'),
+  },
+  {
+    name: 'sample',
+    label: MailPoet.I18n.t('sample'),
+  },
+  {
+    name: 'blank',
+    label: MailPoet.I18n.t('blank'),
+  },
+  {
+    name: 'recent',
+    label: MailPoet.I18n.t('recentlySent'),
+  },
+  {
+    name: 'saved',
+    label: MailPoet.I18n.t('savedTemplates'),
+  }
+]
+
+const CategoryTab = ({name, label, selected, select}) =>
+  <li><a
+    href="javascript:"
+    className={selected === name ? 'current' : ''}
+    onClick={() => select(name)}
+    > {label}
+  </a></li>
+
 const NewsletterTemplates = React.createClass({
   getInitialState: function () {
     return {
@@ -110,25 +152,25 @@ const NewsletterTemplates = React.createClass({
                 MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
               description:
                 MailPoet.I18n.t('mailpoetGuideTemplateDescription'),
-              categories: '["welcome_emails", "post_notifications", "inspiration"]',
+              categories: '["welcome", "notification", "standard"]',
               readonly: '1',
             },
           ];
         }
 
-        const templates = response.data.reduce((result, item) => {
+        let templates = templatesCategories.reduce((result, {name}) => {
+          result[name] = [];
+          return result;
+        }, {});
+
+        console.log(response.data)
+
+        templates = response.data.reduce((result, item) => {
           JSON.parse(item.categories).forEach((category) => {
             result[category].push(item);
           });
           return result;
-        }, {
-          welcome_emails: [],
-          post_notifications: [],
-          inspiration: [],
-          blank: [],
-          recent: [],
-          saved: [],
-        });
+        }, templates);
 
         this.selectInitialCategory(templates);
       }
@@ -153,20 +195,9 @@ const NewsletterTemplates = React.createClass({
     }).always(() => {
       MailPoet.Modal.loading(false);
     }).done((response) => {
-      const type = response.data.type;
-      let category = 'inspiration';
-      if (type === 'welcome') {
-        category = 'welcome_emails';
-      } else if (type === 'notification') {
-        category = 'post_notifications';
-      } else if (templates.recent && templates.recent.length > 0) {
-        category = 'recent';
-      } else if (templates.saved && templates.saved.length > 0) {
-        category = 'saved';
-      }
       this.setState({
         templates: templates,
-        selectedCategory: category,
+        selectedCategory: response.data.type,
         loading: false,
       });
     }).fail((response) => {
@@ -178,9 +209,6 @@ const NewsletterTemplates = React.createClass({
       }
     });
   },
-  selectCategory: function (category) {
-    this.setState({ selectedCategory: category });
-  },
   handleSelectTemplate: function (template) {
     let body = template.body;
 
@@ -315,60 +343,34 @@ const NewsletterTemplates = React.createClass({
       );
     });
 
+    if (templates.length == 0) {
+      templates = <p>{MailPoet.I18n.t('noTemplates')}</p>
+    }
+
     const boxClasses = classNames(
       'mailpoet_boxes',
       'clearfix',
       { mailpoet_boxes_loading: this.state.loading }
     );
 
-    const categories = (<div className="wp-filter hide-if-no-js">
-      <ul className="filter-links">
-        <li><a
-          href="javascript:"
-          className={this.state.selectedCategory === 'recent' ? 'current' : ''}
-          onClick={() => this.selectCategory('recent')}
-          > Recently sent
-        </a></li>
-        <li><a
-          href="javascript:"
-          className={this.state.selectedCategory === 'saved' ? 'current' : ''}
-          onClick={() => this.selectCategory('saved')}
-          > Your saved templates
-        </a></li>
-        <li><a
-          href="javascript:"
-          className={this.state.selectedCategory === 'blank' ? 'current' : ''}
-          onClick={() => this.selectCategory('blank')}
-          > Blank
-        </a></li>
-        <li><a
-          href="javascript:"
-          className={this.state.selectedCategory === 'inspiration' ? 'current' : ''}
-          onClick={() => this.selectCategory('inspiration')}
-          > Inspiration
-        </a></li>
-        <li><a
-          href="javascript:"
-          className={this.state.selectedCategory === 'welcome_emails' ? 'current' : ''}
-          onClick={() => this.selectCategory('welcome_emails')}
-          > Welcome Emails
-        </a></li>
-        <li><a
-          href="javascript:"
-          className={this.state.selectedCategory === 'post_notifications' ? 'current' : ''}
-          onClick={() => this.selectCategory('post_notifications')}
-          > Post Notifications
-        </a></li>
-      </ul>
-    </div>);
-
     return (
       <div>
         <h1>{MailPoet.I18n.t('selectTemplateTitle')}</h1>
 
         <Breadcrumb step="template" />
 
-        {categories}
+        <div className="wp-filter hide-if-no-js">
+          <ul className="filter-links">
+            {templatesCategories.map(({name, label}) => 
+              <CategoryTab 
+                key={name}
+                name={name}
+                label={label}
+                selected={this.state.selectedCategory}
+                select={category => this.setState({ selectedCategory: category })} />
+            )}
+          </ul>
+        </div>
 
         <ul className={boxClasses}>
           { templates }

lib/Config/PopulatorData/Templates/NewsletterBlank121Column.php

@@ -16,7 +16,7 @@ class NewsletterBlank121Column {
     return array(
       'name' => __("Newsletter: Blank 1:2:1 Column", 'mailpoet'),
       'description' => __("A blank Newsletter template with a 1:2:1 column layout.", 'mailpoet'),
-      'categories' => json_encode(array('blank', 'sample')),
+      'categories' => json_encode(array('standard', 'blank')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),
       'body' => json_encode($this->getBody()),

lib/Config/PopulatorData/Templates/NewsletterBlank12Column.php

@@ -16,7 +16,7 @@ class NewsletterBlank12Column {
     return array(
       'name' => __("Newsletter: Blank 1:2 Column", 'mailpoet'),
       'description' => __("A blank Newsletter template with a 1:2 column layout.", 'mailpoet'),
-      'categories' => json_encode(array('blank', 'sample')),
+      'categories' => json_encode(array('standard', 'blank')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),
       'body' => json_encode($this->getBody()),

lib/Config/PopulatorData/Templates/NewsletterBlank13Column.php

@@ -16,7 +16,7 @@ class NewsletterBlank13Column {
     return array(
       'name' => __("Newsletter: Blank 1:3 Column", 'mailpoet'),
       'description' => __("A blank Newsletter template with a 1:3 column layout.", 'mailpoet'),
-      'categories' => json_encode(array('blank', 'sample')),
+      'categories' => json_encode(array('standard', 'blank')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),
       'body' => json_encode($this->getBody()),

lib/Config/PopulatorData/Templates/NewsletterBlank1Column.php

@@ -16,7 +16,7 @@ class NewsletterBlank1Column {
     return array(
       'name' => __("Newsletter: Blank 1 Column", 'mailpoet'),
       'description' => __("A blank Newsletter template with a 1 column layout.", 'mailpoet'),
-      'categories' => json_encode(array('blank', 'sample')),
+      'categories' => json_encode(array('standard', 'blank')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),
       'body' => json_encode($this->getBody()),

tests/unit/API/JSON/v1/NewsletterTemplatesTest.php

@@ -87,21 +87,29 @@ class NewsletterTemplatesTest extends \MailPoetTest {
 
   function testItCanUpdateTemplateAssociatedWithANewsletter() {
     $template_data = array(
-      'newsletter_id' => 1,
+      'newsletter_id' => '1',
       'name' => 'Template #2',
       'description' => 'My Updated Second Template',
       'body' => '{"key3": "value3"}'
     );
 
+    $template_id = NewsletterTemplate::whereEqual('newsletter_id', 1)->findOne()->id;
+
     $router = new NewsletterTemplates();
     $response = $router->save($template_data);
     expect($response->status)->equals(APIResponse::STATUS_OK);
-    expect($response->data)->equals(
-      NewsletterTemplate::findOne($response->data['id'])->asArray()
-    );
 
-    $template = NewsletterTemplate::whereEqual('newsletter_id', 1)->findOne();
-    expect($response->data)->equals($template->asArray());
+    $template_data['body'] = json_decode($template_data['body'], true);
+
+    $normalize = function($array) {
+      return array_filter($array, function($key) {
+        return in_array($key, ['newsletter_id', 'name', 'description', 'body']);
+      }, ARRAY_FILTER_USE_KEY);
+    };
+
+    expect($normalize($response->data))->equals($template_data);
+    $template = NewsletterTemplate::findOne($template_id)->asArray();
+    expect($normalize($template))->equals($template_data);
   }
 
   function testItCanDeleteANewsletterTemplate() {

views/newsletters.html

@@ -264,7 +264,13 @@
     'confirmEdit': __('Sending is in progress. Do you want to pause sending and edit the newsletter?'),
     'confirmTitle': __('Confirm to proceed'),
     'confirmLabel': __('Confirm'),
-    'cancelLabel': __('Cancel')
+    'cancelLabel': __('Cancel'),
+
+    'recentlySent': __('Recently sent'),
+    'savedTemplates': __('Your saved templates'),
+    'blank': __('Blank'),
+    'sample': __('Sample'),
+    'noTemplates': __('This category does not contain any template yet!')
   }) %>
 <% endblock %>