MailPoet.Date to handle localized dates and times

assets/js/src/date.js

@@ -0,0 +1,136 @@
+define('date',
+  [
+    'mailpoet',
+    'jquery',
+    'moment'
+  ], function(
+    MailPoet,
+    jQuery,
+    Moment
+) {
+  'use strict';
+
+  MailPoet.Date = {
+    version: 0.1,
+    options: {},
+    defaults: {
+      offset: 0,
+      format: 'F, d Y H:i:s'
+    },
+    init: function(options) {
+      options = options || {};
+
+      // set UTC offset
+      if (
+        options.offset === undefined
+        && window.mailpoet_date_offset !== undefined
+      ) {
+        options.offset = window.mailpoet_date_offset;
+      }
+      // set date format
+      if (
+        options.format === undefined
+        && window.mailpoet_date_format !== undefined
+      ) {
+        options.format = window.mailpoet_date_format;
+      }
+      // merge options
+      this.options = jQuery.extend({}, this.defaults, options);
+
+      return this;
+    },
+    format: function(date, options) {
+      this.init(options);
+      return Moment.utc(date)
+        .local()
+        .format(this.convertFormat(this.options.format));
+    },
+    short: function(date) {
+      return this.format(date, {
+        format: 'F, j Y'
+      });
+    },
+    full: function(date) {
+      return this.format(date, {
+        format: 'F, j Y H:i:s'
+      });
+    },
+    time: function(date) {
+      return this.format(date, {
+        format: 'H:i:s'
+      });
+    },
+    convertFormat: function(format) {
+      const format_mappings = {
+        date: {
+          D: 'ddd',
+          l: 'dddd',
+          d: 'DD',
+          j: 'D',
+          z: 'DDDD',
+          N: 'E',
+          S: '',
+          M: 'MMM',
+          F: 'MMMM',
+          m: 'MM',
+          n: '',
+          t: '',
+          y: 'YY',
+          Y: 'YYYY',
+          H: 'HH',
+          h: 'hh',
+          g: 'h',
+          A: 'A',
+          i: 'mm',
+          s: 'ss',
+          T: 'z',
+          O: 'ZZ',
+          w: 'd',
+          W: 'WW'
+        },
+        strftime: {
+          a: 'ddd',
+          A: 'dddd',
+          b: 'MMM',
+          B: 'MMMM',
+          d: 'DD',
+          e: 'D',
+          F: 'YYYY-MM-DD',
+          H: 'HH',
+          I: 'hh',
+          j: 'DDDD',
+          k: 'H',
+          l: 'h',
+          m: 'MM',
+          M: 'mm',
+          p: 'A',
+          S: 'ss',
+          u: 'E',
+          w: 'd',
+          W: 'WW',
+          y: 'YY',
+          Y: 'YYYY',
+          z: 'ZZ',
+          Z: 'z'
+        }
+      };
+
+      const replacements = format_mappings['date'];
+
+      let outputFormat = '';
+
+      Object.keys(replacements).forEach(function (key) {
+        if (format.contains(key)) {
+          format = format.replace(key, '%'+key);
+        }
+      });
+      outputFormat = format;
+      Object.keys(replacements).forEach(function(key) {
+        if (outputFormat.contains('%'+key)) {
+          outputFormat = outputFormat.replace('%'+key, replacements[key]);
+        }
+      });
+      return outputFormat;
+    }
+  };
+});

assets/js/src/forms/list.jsx

@@ -146,7 +146,7 @@ const FormList = React.createClass({
           { segments }
         </td>
         <td className="column-date" data-colname="Created on">
-          <abbr>{ form.created_at }</abbr>
+          <abbr>{ MailPoet.Date.full(form.created_at) }</abbr>
         </td>
       </div>
     );

assets/js/src/newsletters/list.jsx

@@ -229,10 +229,10 @@ define(
               { segments }
             </td>
             <td className="column-date" data-colname="Subscribed on">
-              <abbr>{ newsletter.created_at }</abbr>
+              <abbr>{ MailPoet.Date.full(newsletter.created_at) }</abbr>
             </td>
             <td className="column-date" data-colname="Last modified on">
-              <abbr>{ newsletter.updated_at }</abbr>
+              <abbr>{ MailPoet.Date.full(newsletter.updated_at) }</abbr>
             </td>
           </div>
         );

assets/js/src/segments/list.jsx

@@ -190,7 +190,7 @@ const SegmentList = React.createClass({
           <abbr>{ segment.subscribers_count.unsubscribed || 0 }</abbr>
         </td>
         <td className="column-date" data-colname="Created on">
-          <abbr>{ segment.created_at }</abbr>
+          <abbr>{ MailPoet.Date.full(segment.created_at) }</abbr>
         </td>
       </div>
     );

assets/js/src/subscribers/form.jsx

@@ -3,15 +3,13 @@ define(
     'react',
     'react-router',
     'mailpoet',
-    'form/form.jsx',
+    'form/form.jsx'
-    'moment'
   ],
   function(
     React,
     Router,
     MailPoet,
-    Form,
+    Form
-    Moment
   ) {
     var fields = [
       {
@@ -69,9 +67,8 @@ define(
                 label = segment.name;
 
                 if (subscription.status === 'unsubscribed') {
-                  const unsubscribed_at = Moment(subscription.updated_at)
+                  const unsubscribed_at = MailPoet.Date
-                    .utcOffset(parseInt(mailpoet_date_offset))
+                    .format(subscription.updated_at);
-                    .format('ddd, D MMM YYYY HH:mm:ss');
                   label += ' (Unsubscribed on '+unsubscribed_at+')';
                 }
               }

assets/js/src/subscribers/list.jsx

@@ -331,10 +331,10 @@ const SubscriberList = React.createClass({
           { segments }
         </td>
         <td className="column-date" data-colname="Subscribed on">
-          <abbr>{ subscriber.created_at }</abbr>
+          <abbr>{ MailPoet.Date.full(subscriber.created_at) }</abbr>
         </td>
         <td className="column-date" data-colname="Last modified on">
-          <abbr>{ subscriber.updated_at }</abbr>
+          <abbr>{ MailPoet.Date.full(subscriber.updated_at) }</abbr>
         </td>
       </div>
     );

views/layout.html

@@ -32,6 +32,10 @@
   'admin.js'
 )%>
 
+<script type="text/javascript">
+  var mailpoet_date_format = "<%= get_option('date_format') %>";
+</script>
+
 <script>
   HS.beacon.config({
     icon: 'message',

views/subscribers/subscribers.html

@@ -20,7 +20,5 @@
     var mailpoet_segments = <%= json_encode(segments) %>;
     var mailpoet_custom_fields = <%= json_encode(custom_fields) %>;
     var mailpoet_month_names = <%= json_encode(month_names) %>;
-    var mailpoet_date_format = "<%= get_option('date_format') %>";
-    var mailpoet_date_offset = "<%= get_option('gmt_offset') %>";
   </script>
 <% endblock %>

webpack.config.js

@@ -91,10 +91,14 @@ baseConfig = {
 config.push(_.extend({}, baseConfig, {
   name: 'admin',
   entry: {
-    vendor: ['handlebars', 'handlebars_helpers'],
+    vendor: [
+      'handlebars',
+      'handlebars_helpers'
+    ],
     mailpoet: [
       'mailpoet',
       'ajax',
+      'date',
       'modal',
       'notice',
       'jquery.serialize_object',
@@ -129,7 +133,6 @@ config.push(_.extend({}, baseConfig, {
       'blob',
       'filesaver',
       'velocity-animate',
-
       'newsletter_editor/communicationsFix.js',
       'newsletter_editor/App',
       'newsletter_editor/components/config.js',
@@ -156,11 +159,11 @@ config.push(_.extend({}, baseConfig, {
       'newsletter_editor/blocks/header.js',
       'newsletter_editor/blocks/automatedLatestContent.js',
       'newsletter_editor/blocks/posts.js',
-      'newsletter_editor/blocks/social.js',
+      'newsletter_editor/blocks/social.js'
-    ],
+    ]
   },
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
+    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
   ],
   externals: {
     'jquery': 'jQuery',