Change newsletter and template saving to JSON encode body separately

assets/js/src/newsletter_editor/components/communication.js

@@ -63,9 +63,10 @@ define([
   };
 
   Module.saveNewsletter = function(options) {
-    return Module._query({
+    return MailPoet.Ajax.post({
+      endpoint: 'newsletters',
       action: 'save',
-      options: options,
+      data: options || {},
     });
   };
 

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

@@ -1,5 +1,6 @@
 define([
     'newsletter_editor/App',
+    'newsletter_editor/components/communication',
     'mailpoet',
     'notice',
     'backbone',
@@ -8,7 +9,18 @@ define([
     'blob',
     'filesaver',
     'html2canvas'
-  ], function(App, MailPoet, Notice, Backbone, Marionette, jQuery, Blob, FileSaver, html2canvas) {
+  ], function(
+    App,
+    CommunicationComponent,
+    MailPoet,
+    Notice,
+    Backbone,
+    Marionette,
+    jQuery,
+    Blob,
+    FileSaver,
+    html2canvas
+  ) {
 
   "use strict";
 
@@ -17,16 +29,18 @@ define([
 
   // Save editor contents to server
   Module.save = function() {
-    App.getChannel().trigger('beforeEditorSave');
 
     var json = App.toJSON();
 
+    // Stringify to enable transmission of primitive non-string value types
+    if (!_.isUndefined(json.body)) {
+      json.body = JSON.stringify(json.body);
+    }
+
+    App.getChannel().trigger('beforeEditorSave', json);
+
     // save newsletter
-    MailPoet.Ajax.post({
+    CommunicationComponent.saveNewsletter(json).done(function(response) {
-      endpoint: 'newsletters',
-      action: 'save',
-      data: json,
-    }).done(function(response) {
       if(response.success !== undefined && response.success === true) {
         // TODO: Handle translations
         //MailPoet.Notice.success("<?php _e('Newsletter has been saved.'); ?>");
@@ -58,7 +72,7 @@ define([
     promise.then(function(thumbnail) {
       var data = _.extend(options || {}, {
         thumbnail: thumbnail.toDataURL('image/jpeg'),
-        body: App.getBody(),
+        body: JSON.stringify(App.getBody()),
       });
 
       return MailPoet.Ajax.post({

assets/js/src/newsletters/templates.jsx

@@ -18,6 +18,12 @@ define(
 
     var ImportTemplate = React.createClass({
       saveTemplate: function(template) {
+
+        // Stringify to enable transmission of primitive non-string value types
+        if (!_.isUndefined(template.body)) {
+          template.body = JSON.stringify(template.body);
+        }
+
         MailPoet.Ajax.post({
           endpoint: 'newsletterTemplates',
           action: 'save',
@@ -111,12 +117,19 @@ define(
         }.bind(this));
       },
       handleSelectTemplate: function(template) {
+        var body = template.body;
+
+        // Stringify to enable transmission of primitive non-string value types
+        if (!_.isUndefined(body)) {
+          body = JSON.stringify(body);
+        }
+
         MailPoet.Ajax.post({
           endpoint: 'newsletters',
           action: 'save',
           data: {
             id: this.props.params.id,
-            body: template.body
+            body: body
           }
         }).done(function(response) {
           if(response.result === true) {

lib/Router/NewsletterTemplates.php

@@ -30,10 +30,6 @@ class NewsletterTemplates {
   }
 
   function save($data = array()) {
-    if (isset($data['body'])) {
-      $data['body'] = json_encode($data['body']);
-    }
-
     $result = NewsletterTemplate::createOrUpdate($data);
     if($result !== true) {
       wp_send_json($result);

lib/Router/Newsletters.php

@@ -59,10 +59,6 @@ class Newsletters {
       unset($data['options']);
     }
 
-    if (isset($data['body'])) {
-      $data['body'] = json_encode($data['body']);
-    }
-
     $errors = array();
     $result = false;
 

tests/javascript/newsletter_editor/components/save.spec.js

@@ -1,21 +1,18 @@
 define([
     'newsletter_editor/App',
     'newsletter_editor/components/save',
-    'amd-inject-loader!newsletter_editor/components/save'
+    'amd-inject-loader!newsletter_editor/components/save',
-  ], function(EditorApplication, SaveComponent, SaveInjector) {
+    'jquery'
+  ], function(EditorApplication, SaveComponent, SaveInjector, jQuery) {
 
   describe('Save', function() {
     describe('save method', function() {
       var module;
       before(function() {
         module = SaveInjector({
-          'mailpoet': {
+          'newsletter_editor/components/communication': {
-            Ajax: {
+            saveNewsletter: function() {
-              post: function() {
+              return jQuery.Deferred();
-                  var deferred = jQuery.Deferred();
-                  deferred.resolve({});
-                  return deferred;
-              }
             }
           }
         });
@@ -26,29 +23,41 @@ define([
         global.stubChannel(EditorApplication, {
           trigger: spy,
         });
-        EditorApplication.toJSON = sinon.stub();
+        EditorApplication.toJSON = sinon.stub().returns({
+          body: {
+            type: 'container',
+          },
+        });
         module.save();
         expect(spy.withArgs('beforeEditorSave').calledOnce).to.be.true;
       });
 
       it('triggers afterEditorSave event', function() {
-        var stub = sinon.stub().callsArgWith(2, { success: true }),
+        var spy = sinon.spy(),
-          spy = sinon.spy();
+          promise = jQuery.Deferred();
         global.stubChannel(EditorApplication, {
           trigger: spy,
         });
-        EditorApplication.toJSON = sinon.stub();
+        EditorApplication.toJSON = sinon.stub().returns({
+          body: {
+            type: 'container',
+          },
+        });
+        var module = SaveInjector({
+          'newsletter_editor/components/communication': {
+            saveNewsletter: sinon.stub().returns(promise),
+          }
+        });
+        promise.resolve({ success: true });
         module.save();
         expect(spy.withArgs('afterEditorSave').calledOnce).to.be.true;
       });
 
       it('sends newsletter json to server for saving', function() {
-        var mock = sinon.mock({ saveNewsletter: function() {} }).expects('saveNewsletter').once().returns(jQuery.Deferred());
+        var mock = sinon.mock().once().returns(jQuery.Deferred());
         var module = SaveInjector({
-          'mailpoet': {
+          'newsletter_editor/components/communication': {
-            Ajax: {
+            saveNewsletter: mock,
-              post: mock,
-            }
           }
         });
         global.stubChannel(EditorApplication);
@@ -58,6 +67,29 @@ define([
 
         mock.verify();
       });
+
+      it('encodes newsletter body in JSON format', function() {
+        var body = {type: 'testType'},
+          mock = sinon.mock()
+            .once()
+            .withArgs({
+              body: JSON.stringify(body),
+            })
+            .returns(jQuery.Deferred());
+        global.stubChannel(EditorApplication);
+
+        EditorApplication.toJSON = sinon.stub().returns({
+          body: body,
+        });
+        var module = SaveInjector({
+          'newsletter_editor/components/communication': {
+            saveNewsletter: mock,
+          }
+        });
+        module.save();
+
+        mock.verify();
+      });
     });
 
     describe('view', function() {