Merge pull request #12024 from CartoDB/12009-export-image-disclaimer

Adds disclaimer for the Image Export

NEWS.md

@@ -20,6 +20,7 @@ Development
 * Adds export as image (#11789, #12028)
   * Exports GMaps basemaps (#11775)
   * Show error notifications (#11887)
+  * Adds disclaimer (#12024)
 * New organization assets (#11034):
   * REST API available at `/api/v1/organization/<org_id>/assets`
   * Has DB migration

lib/assets/core/javascripts/cartodb3/editor/export-image-pane/export-image-pane.js

@@ -10,6 +10,11 @@ var template = require('./export-image-pane.tpl');
 var Utils = require('../../helpers/utils');
 var Notifier = require('../../components/notifier/notifier');
 
+var Infobox = require('../../components/infobox/infobox-factory');
+var InfoboxView = require('../../components/infobox/infobox-view');
+var InfoboxModel = require('../../components/infobox/infobox-model');
+var InfoboxCollection = require('../../components/infobox/infobox-collection');
+
 var DEFAULT_EXPORT_FORMAT = 'png';
 var DEFAULT_EXPORT_WIDTH = 300;
 var DEFAULT_EXPORT_HEIGHT = 200;
@@ -64,7 +69,7 @@ module.exports = CoreView.extend({
     });
   },
 
-  _addNotification: function (error) {
+  _addErrorNotification: function (error) {
     Notifier.addNotification({
       id: NOTIFICATION_ID,
       status: 'error',
@@ -86,6 +91,7 @@ module.exports = CoreView.extend({
 
     this._createWidget();
     this._createForm();
+    this._createDisclaimer();
     this._createFooter();
 
     return this;
@@ -101,6 +107,33 @@ module.exports = CoreView.extend({
     this.addView(this._exportImageFormView);
   },
 
+  _createDisclaimer: function () {
+    var infoboxSstates = [{
+      state: 'disclaimer',
+      createContentView: function () {
+        return Infobox.createWithAction({
+          type: 'warning',
+          title: _t('editor.maps.export-image.disclaimer.title'),
+          body: _t('editor.maps.export-image.disclaimer.body')
+        });
+      }
+    }];
+
+    this._infoboxModel = new InfoboxModel({
+      state: 'disclaimer'
+    });
+
+    this._infoboxCollection = new InfoboxCollection(infoboxSstates);
+
+    this._infoboxView = new InfoboxView({
+      infoboxModel: this._infoboxModel,
+      infoboxCollection: this._infoboxCollection
+    });
+
+    this.$('.js-disclaimer').append(this._infoboxView.render().el);
+    this.addView(this._infoboxView);
+  },
+
   _createFooter: function () {
     this._footerView = new FooterView({
       configModel: this._configModel,
@@ -212,7 +245,7 @@ module.exports = CoreView.extend({
 
   _onFail: function (error) {
     this._footerView.stopLoader();
-    this._addNotification(error);
+    this._addErrorNotification(error);
   },
 
   _downloadImage: function (dataUri) {

lib/assets/core/javascripts/cartodb3/editor/export-image-pane/export-image-pane.tpl

@@ -8,4 +8,5 @@
 </div>
 
 <div class="Editor-content js-content"></div>
+<div class="js-disclaimer"></div>
 <div class="Options-bar Options-bar--right u-flex js-footer"></div>

lib/assets/core/locale/en.json

@@ -1402,6 +1402,10 @@
         "title": "Export as image",
         "export": "Export",
         "generating": "Generating",
+        "disclaimer": {
+          "title": "Disclaimer",
+          "body": "Legends and widgets won't be exported as part of the image"
+        },
         "download": "Download",
         "errors": {
           "try-again": "Please, try again. If the problem persists, contact support",

lib/assets/core/test/spec/cartodb3/components/export-image-pane/export-image-pane.spec.js

@@ -94,6 +94,11 @@ describe('editor/export-image-pane/export-image-pane', function () {
     expect(this.view.$el.length).toBe(1);
   });
 
+  it('should show a disclaimer', function () {
+    expect(this.view.$el.text()).toContain('disclaimer.title');
+    expect(this.view.$el.text()).toContain('disclaimer.body');
+  });
+
   it('should call the method to generate the image', function () {
     this.view.$('.js-ok').click();