Payment prefs uses relative local and ISO 8601 dates

- Add [moment.js](https://github.com/moment/moment/) which localizes time/date things

Fix #4294

Auditors: @jkup @mrose17

Test Plan:
1. In Prefeences > Payments, see Status and look for the "Next contribution: in {n} days".
2. In Payment history, check that contribution dates are in ISO 8601 format (YYYY-MM-DD).
3. Also look near the bottom for "Next contribution :in {n} days".
4. Change Browser language in General then restart browser
5. Go to Payments, see Status and find localized "in {n} days string"

Author: ayumi

js/about/preferences.js

@@ -22,6 +22,7 @@ const getSetting = require('../settings').getSetting
 const SortableTable = require('../components/sortableTable')
 const Button = require('../components/button')
 const searchProviders = require('../data/searchProviders')
+const moment = require('moment')
 
 const adblock = appConfig.resourceNames.ADBLOCK
 const cookieblock = appConfig.resourceNames.COOKIEBLOCK
@@ -825,9 +826,10 @@ class PaymentsTab extends ImmutableComponent {
     if (!ledgerData.get('reconcileStamp')) {
       return null
     }
-    let nextReconcileDate = formattedDateFromTimestamp(ledgerData.get('reconcileStamp'))
-    let l10nDataArgs = {
-      reconcileDate: nextReconcileDate
+    const timestamp = ledgerData.get('reconcileStamp')
+    const nextReconcileDateRelative = formattedTimeFromNow(timestamp)
+    const l10nDataArgs = {
+      reconcileDate: nextReconcileDateRelative
     }
     return <div className='paymentHistoryFooter'>
       <div className='nextPaymentSubmission'>
@@ -842,9 +844,10 @@ class PaymentsTab extends ImmutableComponent {
     if (!ledgerData.get('reconcileStamp')) {
       return null
     }
-    const nextReconcileDate = formattedDateFromTimestamp(ledgerData.get('reconcileStamp'))
+    const timestamp = ledgerData.get('reconcileStamp')
+    const nextReconcileDateRelative = formattedTimeFromNow(timestamp)
     const l10nDataArgs = {
-      reconcileDate: nextReconcileDate
+      reconcileDate: nextReconcileDateRelative
     }
     return <div className='nextReconcileDate' data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id='statusNextReconcileDate' />
   }
@@ -1385,7 +1388,8 @@ class AboutPreferences extends React.Component {
     ipc.on(messages.FLASH_UPDATED, (e, flashInstalled) => {
       this.setState({ flashInstalled })
     })
-    ipc.on(messages.LANGUAGE, (e, {languageCodes}) => {
+    ipc.on(messages.LANGUAGE, (e, {langCode, languageCodes}) => {
+      moment.locale(langCode)
       this.setState({ languageCodes })
     })
     ipc.send(messages.REQUEST_LANGUAGE)
@@ -1512,9 +1516,12 @@ class AboutPreferences extends React.Component {
   }
 }
 
-let formattedDateFromTimestamp = function (timestamp) {
-  var date = new Date(timestamp)
-  return date.toLocaleDateString()
+function formattedDateFromTimestamp (timestamp) {
+  return moment(new Date(timestamp)).format('YYYY-MM-DD')
+}
+
+function formattedTimeFromNow (timestamp) {
+  return moment(new Date(timestamp)).fromNow()
 }
 
 module.exports = <AboutPreferences />

package.json

@@ -94,6 +94,7 @@
     "ledger-geoip": "^0.8.72",
     "ledger-publisher": "^0.8.74",
     "lru_cache": "^1.0.0",
+    "moment": "^2.15.1",
     "qr-image": "^3.1.0",
     "random-lib": "2.1.0",
     "react": "^15.0.1",