diff --git a/assets/js/src/newsletter_editor/components/content.js b/assets/js/src/newsletter_editor/components/content.js index 7efc8592a3..31c3ce4533 100644 --- a/assets/js/src/newsletter_editor/components/content.js +++ b/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'); diff --git a/assets/js/src/newsletter_editor/components/save.js b/assets/js/src/newsletter_editor/components/save.js index 0974ad9b59..6ded0f42e1 100644 --- a/assets/js/src/newsletter_editor/components/save.js +++ b/assets/js/src/newsletter_editor/components/save.js @@ -93,25 +93,12 @@ 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( + return Module.getThumbnail( jQuery('#mailpoet_editor_content > .mailpoet_block').get(0) ).then(function (thumbnail) { var data = _.extend(options || {}, { @@ -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)], diff --git a/assets/js/src/newsletters/templates.jsx b/assets/js/src/newsletters/templates.jsx index 9a2157630c..4b5b601d5e 100644 --- a/assets/js/src/newsletters/templates.jsx +++ b/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}) => +
  • select(name)} + > {label} +
  • + 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 =

    {MailPoet.I18n.t('noTemplates')}

    + } + const boxClasses = classNames( 'mailpoet_boxes', 'clearfix', { mailpoet_boxes_loading: this.state.loading } ); - const categories = (
    - -
    ); - return (

    {MailPoet.I18n.t('selectTemplateTitle')}

    - {categories} +
    +
      + {templatesCategories.map(({name, label}) => + this.setState({ selectedCategory: category })} /> + )} +
    +