From ccab8b4cf39117aa09b627a373c27bf42c1e8373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tautvidas=20Sipavi=C4=8Dius?= <t.9b5as@gmail.com>
Date: Fri, 18 Mar 2016 16:25:43 +0200
Subject: [PATCH] Add MailPoet.I18n for basic translation handling, removed
 MailPoetI18n

---
 assets/js/src/cron.jsx                        |  4 +-
 assets/js/src/i18n.js                         | 25 +++++
 assets/js/src/listing/listing.jsx             | 14 +--
 assets/js/src/listing/search.jsx              | 10 +-
 .../blocks/automatedLatestContent.js          |  2 +-
 .../js/src/newsletter_editor/blocks/footer.js |  2 +-
 .../js/src/newsletter_editor/blocks/header.js |  2 +-
 .../js/src/newsletter_editor/blocks/posts.js  |  6 +-
 .../js/src/newsletter_editor/blocks/text.js   |  2 +-
 .../src/newsletter_editor/components/save.js  | 14 +--
 .../newsletter_editor/components/sidebar.js   |  6 +-
 assets/js/src/newsletters/types/welcome.jsx   |  2 +-
 .../js/src/subscribers/importExport/export.js |  4 +-
 .../js/src/subscribers/importExport/import.js | 94 +++++++++----------
 lib/Twig/i18n.php                             |  3 +-
 views/forms.html                              | 14 +--
 views/layout.html                             |  7 +-
 views/newsletter/editor.html                  |  3 +-
 views/newsletters.html                        | 16 ++--
 views/segments.html                           |  2 +
 views/subscribers/importExport/export.html    | 14 +--
 views/subscribers/importExport/import.html    | 26 ++---
 views/subscribers/subscribers.html            | 16 ++--
 webpack.config.js                             |  1 +
 24 files changed, 169 insertions(+), 120 deletions(-)
 create mode 100644 assets/js/src/i18n.js

diff --git a/assets/js/src/cron.jsx b/assets/js/src/cron.jsx
index 6aeef12929..3bc73099c3 100644
--- a/assets/js/src/cron.jsx
+++ b/assets/js/src/cron.jsx
@@ -48,7 +48,7 @@ define(
       })
       .done(function(response) {
         if(!response.result) {
-          MailPoet.Notice.error(MailPoetI18n.daemonControlError);
+          MailPoet.Notice.error(MailPoet.I18n.t('daemonControlError'));
         }
       }.bind(this));
     },
@@ -103,4 +103,4 @@ define(
       container
     );
   }
-});
\ No newline at end of file
+});
diff --git a/assets/js/src/i18n.js b/assets/js/src/i18n.js
new file mode 100644
index 0000000000..08ae45f629
--- /dev/null
+++ b/assets/js/src/i18n.js
@@ -0,0 +1,25 @@
+define('i18n',
+  [
+    'mailpoet',
+    'underscore',
+  ], function(
+    MailPoet,
+    _
+) {
+  'use strict';
+
+  var translations = {};
+
+  MailPoet.I18n = {
+    add: function(key, value) {
+      translations[key] = value;
+    },
+    t: function(key) {
+      return translations[key] || 'TRANSLATION NOT FOUND';
+    },
+    all: function() {
+      return translations;
+    }
+  };
+
+});
diff --git a/assets/js/src/listing/listing.jsx b/assets/js/src/listing/listing.jsx
index 5503221f32..88fc4ba75d 100644
--- a/assets/js/src/listing/listing.jsx
+++ b/assets/js/src/listing/listing.jsx
@@ -223,8 +223,8 @@ define(
                   className="colspanchange">
                   {
                     (this.props.loading === true)
-                    ? MailPoetI18n.loadingItems
-                    : MailPoetI18n.noItemsFound
+                    ? MailPoet.I18n.t('loadingItems')
+                    : MailPoet.I18n.t('noItemsFound')
                   }
                 </td>
               </tr>
@@ -250,8 +250,8 @@ define(
                   }>
                   {
                     (this.props.selection !== 'all')
-                    ? MailPoetI18n.selectAllLabel
-                    : MailPoetI18n.selectedAllLabel.replace(
+                    ? MailPoet.I18n.t('selectAllLabel')
+                    : MailPoet.I18n.t('selectedAllLabel').replace(
                       '%d',
                       this.props.count
                     )
@@ -261,8 +261,8 @@ define(
                     onClick={ this.props.onSelectAll }
                     href="javascript:;">{
                       (this.props.selection !== 'all')
-                      ? MailPoetI18n.selectAllLink
-                      : MailPoetI18n.clearSelection
+                      ? MailPoet.I18n.t('selectAllLink')
+                      : MailPoet.I18n.t('clearSelection')
                     }</a>
                 </td>
               </tr>
@@ -519,7 +519,7 @@ define(
           group: 'trash'
         }, function(response) {
           MailPoet.Notice.success(
-            MailPoetI18n.permanentlyDeleted.replace('%d', response)
+            MailPoet.I18n.t('permanentlyDeleted').replace('%d', response)
           );
         });
       },
diff --git a/assets/js/src/listing/search.jsx b/assets/js/src/listing/search.jsx
index 72f39f0cfb..953605f42a 100644
--- a/assets/js/src/listing/search.jsx
+++ b/assets/js/src/listing/search.jsx
@@ -1,4 +1,10 @@
-define(['react'], function(React) {
+define([
+    'mailpoet',
+    'react'
+  ], function(
+    MailPoet,
+    React
+  ) {
 
   var ListingSearch = React.createClass({
     handleSearch: function(e) {
@@ -28,7 +34,7 @@ define(['react'], function(React) {
                 defaultValue={this.props.search} />
               <input
                 type="submit"
-                defaultValue={MailPoetI18n.searchLabel}
+                defaultValue={MailPoet.I18n.t('searchLabel')}
                 className="button" />
             </p>
           </form>
diff --git a/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js b/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
index 8cfa6fab8e..72b5db8ac7 100644
--- a/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
+++ b/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
@@ -83,7 +83,7 @@ define([
         that.get('_container').get('blocks').reset(content, {parse: true});
         that.trigger('postsChanged');
       }).fail(function(error) {
-        MailPoet.Notice.error(App.getConfig().get('translations.failedToFetchRenderedPosts'));
+        MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
       });
     },
     /**
diff --git a/assets/js/src/newsletter_editor/blocks/footer.js b/assets/js/src/newsletter_editor/blocks/footer.js
index 4aba80c7f2..46193574f0 100644
--- a/assets/js/src/newsletter_editor/blocks/footer.js
+++ b/assets/js/src/newsletter_editor/blocks/footer.js
@@ -79,7 +79,7 @@ define([
         },
 
         mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-        mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
+        mailpoet_custom_fields_window_title: MailPoet.I18n.t('customFieldsWindowTitle'),
       });
     },
   });
diff --git a/assets/js/src/newsletter_editor/blocks/header.js b/assets/js/src/newsletter_editor/blocks/header.js
index e7f6aa4f2e..f02b83b65c 100644
--- a/assets/js/src/newsletter_editor/blocks/header.js
+++ b/assets/js/src/newsletter_editor/blocks/header.js
@@ -79,7 +79,7 @@ define([
         },
 
         mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-        mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
+        mailpoet_custom_fields_window_title: MailPoet.I18n.t('customFieldsWindowTitle'),
       });
     },
   });
diff --git a/assets/js/src/newsletter_editor/blocks/posts.js b/assets/js/src/newsletter_editor/blocks/posts.js
index acc806e5a3..3746645533 100644
--- a/assets/js/src/newsletter_editor/blocks/posts.js
+++ b/assets/js/src/newsletter_editor/blocks/posts.js
@@ -101,7 +101,7 @@ define([
         that.get('_selectedPosts').reset(); // Empty out the collection
         that.trigger('change:_availablePosts');
       }).fail(function() {
-        MailPoet.Notice.error(App.getConfig().get('translations.failedToFetchAvailablePosts'));
+        MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
       });
     },
     _refreshTransformedPosts: function() {
@@ -118,7 +118,7 @@ define([
       CommunicationComponent.getTransformedPosts(data).done(function(posts) {
         that.get('_transformedPosts').get('blocks').reset(posts, {parse: true});
       }).fail(function() {
-        MailPoet.Notice.error(App.getConfig().get('translations.failedToFetchRenderedPosts'));
+        MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
       });
     },
     _insertSelectedPosts: function() {
@@ -134,7 +134,7 @@ define([
       CommunicationComponent.getTransformedPosts(data).done(function(posts) {
         collection.add(posts, { at: index });
       }).fail(function() {
-        MailPoet.Notice.error(App.getConfig().get('translations.failedToFetchRenderedPosts'));
+        MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
       });
     },
   });
diff --git a/assets/js/src/newsletter_editor/blocks/text.js b/assets/js/src/newsletter_editor/blocks/text.js
index 1d015c7cf3..2810eb3b62 100644
--- a/assets/js/src/newsletter_editor/blocks/text.js
+++ b/assets/js/src/newsletter_editor/blocks/text.js
@@ -77,7 +77,7 @@ define([
           },
 
           mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
-          mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
+          mailpoet_custom_fields_window_title: MailPoet.I18n.t('customFieldsWindowTitle'),
         });
       }
     },
diff --git a/assets/js/src/newsletter_editor/components/save.js b/assets/js/src/newsletter_editor/components/save.js
index a0aa36456e..94cda1b7da 100644
--- a/assets/js/src/newsletter_editor/components/save.js
+++ b/assets/js/src/newsletter_editor/components/save.js
@@ -191,7 +191,7 @@ define([
 
       if (templateName === '') {
         MailPoet.Notice.error(
-          App.getConfig().get('translations.templateNameMissing'),
+          MailPoet.I18n.t('templateNameMissing'),
           {
             positionAfter: that.$el,
             scroll: true,
@@ -199,7 +199,7 @@ define([
         );
       } else if (templateDescription === '') {
         MailPoet.Notice.error(
-          App.getConfig().get('translations.templateDescriptionMissing'),
+          MailPoet.I18n.t('templateDescriptionMissing'),
           {
             positionAfter: that.$el,
             scroll: true,
@@ -211,7 +211,7 @@ define([
           description: templateDescription,
         }).done(function() {
           MailPoet.Notice.success(
-            App.getConfig().get('translations.templateSaved'),
+            MailPoet.I18n.t('templateSaved'),
             {
               positionAfter: that.$el,
               scroll: true,
@@ -219,7 +219,7 @@ define([
           );
         }).fail(function() {
           MailPoet.Notice.error(
-            App.getConfig().get('translations.templateSaveFailed'),
+            MailPoet.I18n.t('templateSaveFailed'),
             {
               positionAfter: that.$el,
               scroll: true,
@@ -244,7 +244,7 @@ define([
 
       if (templateName === '') {
         MailPoet.Notice.error(
-          App.getConfig().get('translations.templateNameMissing'),
+          MailPoet.I18n.t('templateNameMissing'),
           {
             positionAfter: that.$el,
             scroll: true,
@@ -252,7 +252,7 @@ define([
         );
       } else if (templateDescription === '') {
         MailPoet.Notice.error(
-          App.getConfig().get('translations.templateDescriptionMissing'),
+          MailPoet.I18n.t('templateDescriptionMissing'),
           {
             positionAfter: that.$el,
             scroll: true,
@@ -285,7 +285,7 @@ define([
 
       if (App.getConfig().get('validation.validateUnsubscribeLinkPresent') &&
           JSON.stringify(jsonObject).indexOf("[subscription:unsubscribe_url]") < 0) {
-        this.showValidationError(App.getConfig().get('translations.unsubscribeLinkMissing'));
+        this.showValidationError(MailPoet.I18n.t('unsubscribeLinkMissing'));
         return;
       }
 
diff --git a/assets/js/src/newsletter_editor/components/sidebar.js b/assets/js/src/newsletter_editor/components/sidebar.js
index 85fff4fc40..b7c5c1945e 100644
--- a/assets/js/src/newsletter_editor/components/sidebar.js
+++ b/assets/js/src/newsletter_editor/components/sidebar.js
@@ -265,7 +265,7 @@ define([
 
       if (data.subscriber.length <= 0) {
         MailPoet.Notice.error(
-          App.getConfig().get('translations.newsletterPreviewEmailMissing'),
+          MailPoet.I18n.t('newsletterPreviewEmailMissing'),
           {
             positionAfter: $emailField,
             scroll: true,
@@ -279,7 +279,7 @@ define([
 
       CommunicationComponent.previewNewsletter(data).done(function(response) {
         if(response.result !== undefined && response.result === true) {
-          MailPoet.Notice.success(App.getConfig().get('translations.newsletterPreviewSent'), { scroll: true });
+          MailPoet.Notice.success(MailPoet.I18n.t('newsletterPreviewSent'), { scroll: true });
         } else {
           if (_.isArray(response.errors)) {
             response.errors.map(function(error) {
@@ -287,7 +287,7 @@ define([
             });
           } else {
             MailPoet.Notice.error(
-              App.getConfig().get('translations.newsletterPreviewFailedToSend'),
+              MailPoet.I18n.t('newsletterPreviewFailedToSend'),
               {
                 scroll: true,
                 static: true,
diff --git a/assets/js/src/newsletters/types/welcome.jsx b/assets/js/src/newsletters/types/welcome.jsx
index 3163b47542..fbd56cf199 100644
--- a/assets/js/src/newsletters/types/welcome.jsx
+++ b/assets/js/src/newsletters/types/welcome.jsx
@@ -155,7 +155,7 @@ define(
             <h1>Welcome email</h1>
             <Breadcrumb step="type" />
 
-            <h3>{MailPoetI18n.selectEventToSendWelcomeEmail}</h3>
+            <h3>{MailPoet.I18n.t('selectEventToSendWelcomeEmail')}</h3>
 
             <Select
               field={events}
diff --git a/assets/js/src/subscribers/importExport/export.js b/assets/js/src/subscribers/importExport/export.js
index 79c1a6e004..ff5f01fd86 100644
--- a/assets/js/src/subscribers/importExport/export.js
+++ b/assets/js/src/subscribers/importExport/export.js
@@ -150,7 +150,7 @@ define(
           if (response.result === false) {
             MailPoet.Notice.error(response.errors);
           } else {
-            resultMessage = MailPoetI18n.exportMessage
+            resultMessage = MailPoet.I18n.t('exportMessage')
              .replace('%1$s', '<strong>' + response.data.totalExported + '</strong>')
              .replace('[link]', '<a href="' + response.data.exportFileURL + '" target="_blank" >')
              .replace('[/link]', '</a>');
@@ -162,7 +162,7 @@ define(
         .error(function (error) {
           MailPoet.Modal.loading(false);
           MailPoet.Notice.error(
-           MailPoetI18n.serverError + error.statusText.toLowerCase() + '.'
+           MailPoet.I18n.t('serverError') + error.statusText.toLowerCase() + '.'
           );
         });
      });
diff --git a/assets/js/src/subscribers/importExport/import.js b/assets/js/src/subscribers/importExport/import.js
index e92d19924b..4256e32728 100644
--- a/assets/js/src/subscribers/importExport/import.js
+++ b/assets/js/src/subscribers/importExport/import.js
@@ -128,7 +128,7 @@ define(
             // get an approximate size of textarea paste in bytes
             var pasteSize = encodeURI(pasteInputElement.val()).split(/%..|./).length - 1;
             if (pasteSize > maxPostSizeBytes) {
-              MailPoet.Notice.error(MailPoetI18n.maxPostSizeNotice, {
+              MailPoet.Notice.error(MailPoet.I18n.t('maxPostSizeNotice'), {
                 timeout: noticeTimeout,
               });
               return;
@@ -148,7 +148,7 @@ define(
               var ext = this.value.match(/\.(.+)$/);
               if (ext === null || ext[1].toLowerCase() !== 'csv') {
                 this.value = '';
-                MailPoet.Notice.error(MailPoetI18n.wrongFileFormat, {
+                MailPoet.Notice.error(MailPoet.I18n.t('wrongFileFormat'), {
                   timeout: noticeTimeout,
                 });
               }
@@ -212,7 +212,7 @@ define(
                     .removeClass()
                     .addClass('mailpoet_mailchimp-key-status mailpoet_mailchimp-ok');
                 if (!response.data) {
-                  jQuery('.mailpoet_mailchimp-key-status').html(MailPoetI18n.noMailChimpLists);
+                  jQuery('.mailpoet_mailchimp-key-status').html(MailPoet.I18n.t('noMailChimpLists'));
                   mailChimpListsContainerElement.hide();
                   toggleNextStepButton(mailChimpProcessButtonElement, 'off');
                 } else {
@@ -223,7 +223,7 @@ define(
             }).error(function (error) {
               MailPoet.Modal.loading(false);
               MailPoet.Notice.error(
-                  MailPoetI18n.serverError + error.statusText.toLowerCase() + '.', {
+                  MailPoet.I18n.t('serverError') + error.statusText.toLowerCase() + '.', {
                     timeout: noticeTimeout,
                   }
               );
@@ -258,7 +258,7 @@ define(
             }).error(function () {
               MailPoet.Modal.loading(false);
               MailPoet.Notice.error(
-                  MailPoetI18n.serverError + result.statusText.toLowerCase() + '.', {
+                  MailPoet.I18n.t('serverError') + result.statusText.toLowerCase() + '.', {
                     timeout: noticeTimeout,
                   }
               );
@@ -350,7 +350,7 @@ define(
               comments: advancedOptionComments,
               error: function () {
                 MailPoet.Notice.hide();
-                MailPoet.Notice.error(MailPoetI18n.dataProcessingError, {
+                MailPoet.Notice.error(MailPoet.I18n.t('dataProcessingError'), {
                   timeout: noticeTimeout,
                 });
               },
@@ -431,8 +431,8 @@ define(
                 }
                 else {
                   MailPoet.Modal.loading(false);
-                  var errorNotice = MailPoetI18n.noValidRecords;
-                  errorNotice = errorNotice.replace('[link]', MailPoetI18n.csvKBLink);
+                  var errorNotice = MailPoet.I18n.t('noValidRecords');
+                  errorNotice = errorNotice.replace('[link]', MailPoet.I18n.t('csvKBLink'));
                   errorNotice = errorNotice.replace('[/link]', '</a>');
                   MailPoet.Notice.error(errorNotice, {
                     timeout: noticeTimeout,
@@ -501,17 +501,17 @@ define(
             }
 
             var import_results = {
-              notice: MailPoetI18n.importNoticeSkipped.replace(
+              notice: MailPoet.I18n.t('importNoticeSkipped').replace(
                   '%1$s',
                   '<strong>' + (subscribers.invalid.length + subscribers.duplicate.length) + '</strong>'
               ),
               invalid: (subscribers.invalid.length)
-                  ? MailPoetI18n.importNoticeInvalid
+                  ? MailPoet.I18n.t('importNoticeInvalid')
                   .replace('%1$s', '<strong>' + subscribers.invalid.length + '</strong>')
                   .replace('%2$s', subscribers.invalid.join(', '))
                   : null,
               duplicate: (subscribers.duplicate.length)
-                  ? MailPoetI18n.importNoticeDuplicate
+                  ? MailPoet.I18n.t('importNoticeDuplicate')
                   .replace('%1$s', '<strong>' + subscribers.duplicate.length + '</strong>')
                   .replace('%2$s', subscribers.duplicate.join(', '))
                   : null
@@ -527,8 +527,8 @@ define(
                 jQuery(details).toggle();
                 this.text =
                     (jQuery(details).is(":visible"))
-                        ? MailPoetI18n.hideDetails
-                        : MailPoetI18n.showDetails;
+                        ? MailPoet.I18n.t('hideDetails')
+                        : MailPoet.I18n.t('showDetails');
               });
 
           // show available segments
@@ -564,7 +564,7 @@ define(
                   var segmentSelectionNotice = jQuery('[data-id="notice_segmentSelection"]');
                   if (!this.value) {
                     if (!segmentSelectionNotice.length) {
-                      MailPoet.Notice.error(MailPoetI18n.segmentSelectionRequired, {
+                      MailPoet.Notice.error(MailPoet.I18n.t('segmentSelectionRequired'), {
                         static: true,
                         timeout: noticeTimeout,
                         scroll: true,
@@ -584,7 +584,7 @@ define(
 
           jQuery('.mailpoet_create_segment').click(function () {
             MailPoet.Modal.popup({
-              title: MailPoetI18n.addNewList,
+              title: MailPoet.I18n.t('addNewList'),
               template: jQuery('#new_segment_template').html()
             })
             jQuery('#new_segment_name').keypress(function (e) {
@@ -644,7 +644,7 @@ define(
                       else {
                         MailPoet.Modal.close();
                         MailPoet.Notice.error(
-                            MailPoetI18n.segmentCreateError + response.message + '.', {
+                            MailPoet.I18n.t('segmentCreateError') + response.message + '.', {
                               timeout: noticeTimeout,
                             }
                         );
@@ -653,7 +653,7 @@ define(
                     .error(function (error) {
                       MailPoet.Modal.close();
                       MailPoet.Notice.error(
-                          MailPoetI18n.serverError + error.statusText.toLowerCase() + '.', {
+                          MailPoet.I18n.t('serverError') + error.statusText.toLowerCase() + '.', {
                             timeout: noticeTimeout
                           }
                       );
@@ -770,7 +770,7 @@ define(
                   selectEvent.preventDefault();
                   jQuery(selectElement).select2('close');
                   MailPoet.Modal.popup({
-                    title: MailPoetI18n.addNewColumn,
+                    title: MailPoet.I18n.t('addNewColumn'),
                     template: jQuery('#new_column_template').html()
                   });
                   jQuery('#new_column_name').keypress(function (e) {
@@ -834,7 +834,7 @@ define(
                               // if this is the first custom column, create an "optgroup"
                               if (mailpoetColumnsSelect2.length === 2) {
                                 mailpoetColumnsSelect2.push({
-                                  'name': MailPoetI18n.userColumns,
+                                  'name': MailPoet.I18n.t('userColumns'),
                                   'children': []
                                 });
                               }
@@ -860,7 +860,7 @@ define(
                               filterSubscribers();
                             }
                             else {
-                              MailPoet.Notice.error(MailPoetI18n.customFieldCreateError, {
+                              MailPoet.Notice.error(MailPoet.I18n.t('customFieldCreateError'), {
                                 timeout: noticeTimeout,
                               });
                             }
@@ -869,7 +869,7 @@ define(
                           .error(function (error) {
                             MailPoet.Modal.loading(false);
                             MailPoet.Notice.error(
-                                MailPoetI18n.serverError + error.statusText.toLowerCase() + '.', {
+                                MailPoet.I18n.t('serverError') + error.statusText.toLowerCase() + '.', {
                                   timeout: noticeTimeout,
                                 }
                             );
@@ -890,7 +890,7 @@ define(
                         // if another column has the same value and it's not an 'ignore', prompt user
                         if (elementId === selectedOptionId
                             && elementId !== 'ignore') {
-                          if (confirm(MailPoetI18n.selectedValueAlreadyMatched + ' ' + MailPoetI18n.confirmCorrespondingColumn)) {
+                          if (confirm(MailPoet.I18n.t('selectedValueAlreadyMatched') + ' ' + MailPoet.I18n.t('confirmCorrespondingColumn'))) {
                             jQuery(element).data('column-id', 'ignore');
                           }
                           else {
@@ -933,7 +933,7 @@ define(
                 if (!emailRegex.test(subscribersClone.subscribers[0][matchedColumn])) {
                   preventNextStep = true;
                   if (!jQuery('[data-id="notice_invalidEmail"]').length) {
-                    MailPoet.Notice.error(MailPoetI18n.columnContainsInvalidElement, {
+                    MailPoet.Notice.error(MailPoet.I18n.t('columnContainsInvalidElement'), {
                       static: true,
                       timeout: noticeTimeout,
                       scroll: true,
@@ -953,18 +953,18 @@ define(
                       date = new Date(rowData.replace(/-/g, '/')), // IE doesn't like
                   // dashes as date separators
                       month_name = [
-                        MailPoetI18n.january,
-                        MailPoetI18n.february,
-                        MailPoetI18n.march,
-                        MailPoetI18n.april,
-                        MailPoetI18n.may,
-                        MailPoetI18n.june,
-                        MailPoetI18n.july,
-                        MailPoetI18n.august,
-                        MailPoetI18n.september,
-                        MailPoetI18n.october,
-                        MailPoetI18n.november,
-                        MailPoetI18n.december
+                        MailPoet.I18n.t('january'),
+                        MailPoet.I18n.t('february'),
+                        MailPoet.I18n.t('march'),
+                        MailPoet.I18n.t('april'),
+                        MailPoet.I18n.t('may'),
+                        MailPoet.I18n.t('june'),
+                        MailPoet.I18n.t('july'),
+                        MailPoet.I18n.t('august'),
+                        MailPoet.I18n.t('september'),
+                        MailPoet.I18n.t('october'),
+                        MailPoet.I18n.t('november'),
+                        MailPoet.I18n.t('december')
                       ];
 
                   if (position !== fillterPosition) {
@@ -977,8 +977,8 @@ define(
                     if (rowData.trim() === '') {
                       data[matchedColumn] =
                           '<span class="mailpoet_data_match mailpoet_import_error" title="'
-                          + MailPoetI18n.noDateFieldMatch + '">'
-                          + MailPoetI18n.emptyDate
+                          + MailPoet.I18n.t('noDateFieldMatch') + '">'
+                          + MailPoet.I18n.t('emptyDate')
                           + '</span>';
                       preventNextStep = true;
                       return;
@@ -995,25 +995,25 @@ define(
                           + ((date.getMinutes() < 10 ? '0' : '')
                           + date.getMinutes()) + ' '
                           + ((date.getHours() >= 12)
-                                  ? MailPoetI18n.pm
-                                  : MailPoetI18n.am
+                                  ? MailPoet.I18n.t('pm')
+                                  : MailPoet.I18n.t('am')
                           );
                       data[matchedColumn] +=
                           '<span class="mailpoet_data_match" title="'
-                          + MailPoetI18n.verifyDateMatch + '">'
+                          + MailPoet.I18n.t('verifyDateMatch') + '">'
                           + date + '</span>';
                     }
                     else {
                       data[matchedColumn] +=
                           '<span class="mailpoet_data_match mailpoet_import_error" title="'
-                          + MailPoetI18n.noDateFieldMatch + '">'
-                          + MailPoetI18n.dateMatchError + '</span>';
+                          + MailPoet.I18n.t('noDateFieldMatch') + '">'
+                          + MailPoet.I18n.t('dateMatchError') + '</span>';
                       preventNextStep = true;
                     }
                   }
                 });
                 if (preventNextStep && !jQuery('.mailpoet_invalidDate').length) {
-                  MailPoet.Notice.error(MailPoetI18n.columnContainsInvalidDate, {
+                  MailPoet.Notice.error(MailPoet.I18n.t('columnContainsInvalidDate'), {
                     static: true,
                     timeout: noticeTimeout,
                     scroll: true,
@@ -1114,7 +1114,7 @@ define(
                   })
                   .error(function (error) {
                     importResults.errors.push(
-                      MailPoetI18n.serverError + error.statusText.toLowerCase() + '.'
+                      MailPoet.I18n.t('serverError') + error.statusText.toLowerCase() + '.'
                     );
                     queue.run();
                   });
@@ -1171,12 +1171,12 @@ define(
               exportMenuElement = jQuery('span.mailpoet_export'),
               importResults = {
                 created: (importData.step2.created)
-                    ? MailPoetI18n.subscribersCreated
+                    ? MailPoet.I18n.t('subscribersCreated')
                     .replace('%1$s', '<strong>' + importData.step2.created + '</strong>')
                     .replace('%2$s', '"' + importData.step2.segments.join('", "') + '"')
                     : false,
                 updated: (importData.step2.updated)
-                    ? MailPoetI18n.subscribersUpdated
+                    ? MailPoet.I18n.t('subscribersUpdated')
                     .replace('%1$s', '<strong>' + importData.step2.updated + '</strong>')
                     .replace('%2$s', '"' + importData.step2.segments.join('", "') + '"')
                     : false,
@@ -1212,4 +1212,4 @@ define(
           Backbone.history.start();
         }
       });
-    });
\ No newline at end of file
+    });
diff --git a/lib/Twig/i18n.php b/lib/Twig/i18n.php
index b99f97a906..09f8d89e05 100644
--- a/lib/Twig/i18n.php
+++ b/lib/Twig/i18n.php
@@ -42,10 +42,9 @@ class i18n extends \Twig_Extension {
     $output = array();
 
     $output[] = '<script type="text/javascript">';
-    $output[] = ' var MailPoetI18n = MailPoetI18n || {}';
     foreach($translations as $key => $translation) {
       $output[] =
-        'MailPoetI18n["'.$key.'"] = "'. str_replace('"', '\"', $translation) . '";';
+        'MailPoet.I18n.add("'.$key.'", "'. str_replace('"', '\"', $translation) . '");';
     }
     $output[] = '</script>';
     return join("\n", $output);
diff --git a/views/forms.html b/views/forms.html
index 840fa75ba0..57df5fb0d3 100644
--- a/views/forms.html
+++ b/views/forms.html
@@ -3,6 +3,14 @@
 <% block content %>
   <div id="forms_container"></div>
 
+  <script type="text/javascript">
+    var mailpoet_segments = <%= json_encode(segments) %>;
+    var mailpoet_form_edit_url =
+      "<%= admin_url('admin.php?page=mailpoet-form-editor&id=') %>";
+  </script>
+<% endblock %>
+
+<% block translations %>
   <%= localize({
     'pageTitle': __('Forms'),
     'searchLabel': __('Search'),
@@ -14,10 +22,4 @@
     'clearSelection': __('Clear selection.'),
     'permanentlyDeleted': __('%d forms permanently deleted.')
   }) %>
-
-  <script type="text/javascript">
-    var mailpoet_segments = <%= json_encode(segments) %>;
-    var mailpoet_form_edit_url =
-      "<%= admin_url('admin.php?page=mailpoet-form-editor&id=') %>";
-  </script>
 <% endblock %>
diff --git a/views/layout.html b/views/layout.html
index e161caf3ee..4ce6e20c72 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -30,7 +30,12 @@
 <!-- javascripts -->
 <%= javascript(
   'vendor.js',
-  'mailpoet.js',
+  'mailpoet.js'
+)%>
+
+<% block translations %><% endblock %>
+
+<%= javascript(
   'admin.js'
 )%>
 
diff --git a/views/newsletter/editor.html b/views/newsletter/editor.html
index be52f9ad52..c8e4f5a708 100644
--- a/views/newsletter/editor.html
+++ b/views/newsletter/editor.html
@@ -311,7 +311,9 @@
       </div>
     </form>
   </div>
+<% endblock %>
 
+<% block translations %>
   <%= localize({
     'failedToFetchAvailablePosts': __('Failed to fetch available posts'),
     'failedToFetchRenderedPosts': __('Failed to fetch rendered posts'),
@@ -1256,7 +1258,6 @@
       validation: {
         validateUnsubscribeLinkPresent: true, // TODO: Add validation based on whether Mailpoet MTA is used or not
       },
-      translations: MailPoetI18n,
       urls: {
         send: '<%= admin_url('admin.php?page=mailpoet-newsletters#/send/' ~ params('id')) %>',
         imageMissing: '<%= image_url(
diff --git a/views/newsletters.html b/views/newsletters.html
index 65cae54eec..28a48792d0 100644
--- a/views/newsletters.html
+++ b/views/newsletters.html
@@ -3,6 +3,15 @@
 <% block content %>
   <div id="newsletters_container"></div>
 
+  <script type="text/javascript">
+    var mailpoet_segments = <%= json_encode(segments) %>;
+    var mailpoet_settings = <%= json_encode(settings) %>;
+    var mailpoet_lists = <%= json_encode(lists) %>;
+    var mailpoet_roles = <%= json_encode(roles) %>;
+  </script>
+<% endblock %>
+
+<% block translations %>
   <%= localize({
     'pageTitle': __('Newsletters'),
     'searchLabel': __('Search'),
@@ -14,11 +23,4 @@
     'clearSelection': __('Clear selection.'),
     'permanentlyDeleted': __('%d newsletters permanently deleted.')
   }) %>
-
-  <script type="text/javascript">
-    var mailpoet_segments = <%= json_encode(segments) %>;
-    var mailpoet_settings = <%= json_encode(settings) %>;
-    var mailpoet_lists = <%= json_encode(lists) %>;
-    var mailpoet_roles = <%= json_encode(roles) %>;
-  </script>
 <% endblock %>
diff --git a/views/segments.html b/views/segments.html
index dc7d659beb..ad176efaec 100644
--- a/views/segments.html
+++ b/views/segments.html
@@ -2,7 +2,9 @@
 
 <% block content %>
   <div id="segments_container"></div>
+<% endblock %>
 
+<% block translations %>
   <%= localize({
     'pageTitle': __('Segments'),
     'searchLabel': __('Search'),
diff --git a/views/subscribers/importExport/export.html b/views/subscribers/importExport/export.html
index 27a775e44e..acd9a54c9c 100644
--- a/views/subscribers/importExport/export.html
+++ b/views/subscribers/importExport/export.html
@@ -107,11 +107,6 @@
 
 <%= stylesheet('importExport.css') %>
 
-<%= localize({
-  'serverError': __('Server error:'),
-  'exportMessage' : __('%1$s subscribers were exported. Get the exported file [link]here[/link].')
-}) %>
-
 <script type="text/javascript">
   // define data variables
   var
@@ -127,4 +122,11 @@
      groupBySegmentOption: (segments.length > 1 || segmentsWithConfirmedSubscribers.length > 1) ? true : null
     };
 </script>
-<% endblock %>
\ No newline at end of file
+<% endblock %>
+
+<% block translations %>
+<%= localize({
+  'serverError': __('Server error:'),
+  'exportMessage' : __('%1$s subscribers were exported. Get the exported file [link]here[/link].')
+}) %>
+<% endblock %>
diff --git a/views/subscribers/importExport/import.html b/views/subscribers/importExport/import.html
index 5dc8747856..eb9e34e31a 100644
--- a/views/subscribers/importExport/import.html
+++ b/views/subscribers/importExport/import.html
@@ -18,6 +18,19 @@
 
 <%= stylesheet('importExport.css') %>
 
+<script type="text/javascript">
+  var
+    maxPostSize = '<%= maxPostSize %>',
+    maxPostSizeBytes = '<%= maxPostSizeBytes %>',
+    importData = {},
+    mailpoetColumnsSelect2 = <%= subscriberFieldsSelect2|raw %>,
+    mailpoetColumns = <%= subscriberFields|raw %>,
+    mailpoetSegments = <%= segments|raw %>,
+    emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-_]{0,61}[a-zA-Z0-9])+.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+</script>
+<% endblock %>
+
+<% block translations %>
 <%= localize({
 'noMailChimpLists': __('No active lists found.'),
 'serverError': __('Server error:'),
@@ -64,15 +77,4 @@
 'subscribersCreated': __('%1$s subscribers added to %2$s.'),
 'subscribersUpdated': __('%1$s existing subscribers were updated and added to %2$s.')
 }) %>
-
-<script type="text/javascript">
-  var
-    maxPostSize = '<%= maxPostSize %>',
-    maxPostSizeBytes = '<%= maxPostSizeBytes %>',
-    importData = {},
-    mailpoetColumnsSelect2 = <%= subscriberFieldsSelect2|raw %>,
-    mailpoetColumns = <%= subscriberFields|raw %>,
-    mailpoetSegments = <%= segments|raw %>,
-    emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-_]{0,61}[a-zA-Z0-9])+.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-</script>
-<% endblock %>
\ No newline at end of file
+<% endblock %>
diff --git a/views/subscribers/subscribers.html b/views/subscribers/subscribers.html
index 143ddbf2ad..b1f7f76f21 100644
--- a/views/subscribers/subscribers.html
+++ b/views/subscribers/subscribers.html
@@ -3,6 +3,15 @@
 <% block content %>
   <div id="subscribers_container"></div>
 
+  <script type="text/javascript">
+    var mailpoet_listing_per_page = <%= per_page %>;
+    var mailpoet_segments = <%= json_encode(segments) %>;
+    var mailpoet_custom_fields = <%= json_encode(custom_fields) %>;
+    var mailpoet_month_names = <%= json_encode(month_names) %>;
+  </script>
+<% endblock %>
+
+<% block translations %>
   <%= localize({
     'pageTitle': __('Subscribers'),
     'searchLabel': __('Search'),
@@ -14,11 +23,4 @@
     'clearSelection': __('Clear selection.'),
     'permanentlyDeleted': __('%d subscribers permanently deleted.')
   }) %>
-
-  <script type="text/javascript">
-    var mailpoet_listing_per_page = <%= per_page %>;
-    var mailpoet_segments = <%= json_encode(segments) %>;
-    var mailpoet_custom_fields = <%= json_encode(custom_fields) %>;
-    var mailpoet_month_names = <%= json_encode(month_names) %>;
-  </script>
 <% endblock %>
diff --git a/webpack.config.js b/webpack.config.js
index 84d6b54062..e7c19106f5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -99,6 +99,7 @@ config.push(_.extend({}, baseConfig, {
       'mailpoet',
       'ajax',
       'date',
+      'i18n',
       'modal',
       'notice',
       'jquery.serialize_object',