Display error and success messages for template saving and export

assets/css/src/newsletter_editor/components/save.styl

@@ -48,7 +48,7 @@
 .mailpoet_save_as_template_container,
 .mailpoet_export_template_container
   border-radius(3px)
-  float: left
+  display: inline-block
   clear: both
 
   margin-top: 5px

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

@@ -146,20 +146,48 @@ define([
     },
     saveAsTemplate: function() {
       var templateName = this.$('.mailpoet_save_as_template_name').val(),
-          templateDescription = this.$('.mailpoet_save_as_template_description').val();
+          templateDescription = this.$('.mailpoet_save_as_template_description').val(),
+          that = this;
 
+      if (templateName === '') {
+        MailPoet.Notice.error(
+          App.getConfig().get('translations.templateNameMissing'),
+          {
+            positionAfter: that.$el,
+          }
+        );
+      } else if (templateDescription === '') {
+        MailPoet.Notice.error(
+          App.getConfig().get('translations.templateDescriptionMissing'),
+          {
+            positionAfter: that.$el,
+          }
+        );
+      } else {
         console.log('Saving template with ', templateName, templateDescription);
         Module.saveTemplate({
           name: templateName,
           description: templateDescription,
         }).done(function() {
           console.log('Template saved', arguments);
+          MailPoet.Notice.success(
+            App.getConfig().get('translations.templateSaved'),
+            {
+              positionAfter: that.$el,
+            }
+          );
         }).fail(function() {
-        // TODO: Handle error messages
           console.log('Template save failed', arguments);
+          MailPoet.Notice.error(
+            App.getConfig().get('translations.templateSaveFailed'),
+            {
+              positionAfter: that.$el,
+            }
+          );
         });
-
         this.hideOptionContents();
+      }
+
     },
     toggleExportTemplate: function() {
       this.$('.mailpoet_export_template_container').toggleClass('mailpoet_hidden');
@@ -170,12 +198,23 @@ define([
     },
     exportTemplate: function() {
       var templateName = this.$('.mailpoet_export_template_name').val(),
-          templateDescription = this.$('.mailpoet_export_template_description').val();
+          templateDescription = this.$('.mailpoet_export_template_description').val(),
+          that = this;
 
       if (templateName === '') {
-        MailPoet.Notice.error(App.getConfig().get('translations.templateNameMissing'));
+        MailPoet.Notice.error(
+          App.getConfig().get('translations.templateNameMissing'),
+          {
+            positionAfter: that.$el,
+          }
+        );
       } else if (templateDescription === '') {
-        MailPoet.Notice.error(App.getConfig().get('translations.templateDescriptionMissing'));
+        MailPoet.Notice.error(
+          App.getConfig().get('translations.templateDescriptionMissing'),
+          {
+            positionAfter: that.$el,
+          }
+        );
       } else {
         console.log('Exporting template with ', templateName, templateDescription);
         Module.exportTemplate({

assets/js/src/notice.js

@@ -49,6 +49,7 @@ define('notice', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
           static: false,
           hideClose: false,
           id: null,
+          positionAfter: false,
           scroll: false,
           timeout: 2000,
           onOpen: null,
@@ -69,7 +70,16 @@ define('notice', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
           this.element.removeAttr('id');
 
           // insert notice after its parent
-          jQuery('#mailpoet_notice_'+this.options.type).after(this.element);
+          var positionAfter;
+          if (typeof this.options.positionAfter === 'object') {
+            positionAfter = this.options.positionAfter;
+          } else if (typeof this.options.positionAfter === 'string') {
+            positionAfter = jQuery(this.options.positionAfter);
+          } else {
+            positionAfter = jQuery('#mailpoet_notice_'+this.options.type);
+          }
+          console.log('positionAfter', typeof this.options.positionAfter);
+          positionAfter.after(this.element);
 
           // setup onClose callback
           var onClose = null;

views/newsletter/form.html

@@ -1247,6 +1247,10 @@
           '<%= __('Please add a template name') %>',
         templateDescriptionMissing:
           '<%= __('Please add a template description') %>',
+        templateSaved:
+          '<%= __('Template has been saved.') %>',
+        templateSaveFailed:
+          '<%= __('Template has not been saved, please try again.') %>',
       },
       sidepanelWidth: '331px',
       validation: {

views/newsletter/templates/components/save.hbs

@@ -10,6 +10,7 @@
         <li class="mailpoet_save_option"><a href="javascript:;" class="mailpoet_save_template"><%= __('Save as template') %></a></li>
         <li class="mailpoet_save_option"><a href="javascript:;" class="mailpoet_save_export"><%= __('Export as template') %></a></li>
     </ul>
+    <div class="clearfix"></div>
     <div class="mailpoet_save_as_template_container mailpoet_hidden">
         <p><b class="mailpoet_save_as_template_title"><%= __('Save as template') %></b></p>
         <p><input type="text" name="template_name" value="" placeholder="<%= __('Insert template name') %>" class="mailpoet_input mailpoet_save_as_template_name" /></p>