From 8e9684bf78be3bb62f3346dfa2dc2dd0aba83cc8 Mon Sep 17 00:00:00 2001
From: Ayumi Yu <ayumi@ayumiyu.com>
Date: Thu, 8 Sep 2016 12:32:28 -0700
Subject: [PATCH] In payments status, show next contribution date

Fix #3801

Auditors: @bradleyrichter @diracdeltas

Test Plan:
1. Open Brave to Preferences > Payments
2. Confirm the "status" column has "Next contribution: {date}" on the bottom
---
 .../brave/locales/en-US/preferences.properties |  1 +
 js/about/preferences.js                        | 18 ++++++++++++++++--
 less/about/preferences.less                    |  4 ++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index 34323e7e1fd..0d3056ed95a 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -28,6 +28,7 @@ accountBalanceConnectionError=error, can't retrieve data
 accountBalanceLoading=loading...
 monthlyBudget=monthly budget
 status=status
+statusNextReconcileDate=Next contribution: {{reconcileDate}}.
 createWallet=create wallet
 createWalletStatus=Click the Create Wallet button to get started.
 creatingWallet=creating...
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 83be9489b3e..bcb9fc87c02 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -686,6 +686,18 @@ class PaymentsTab extends ImmutableComponent {
     </div>
   }
 
+  get nextReconcileDate () {
+    const ledgerData = this.props.ledgerData
+    if (!ledgerData.get('reconcileStamp')) {
+      return null
+    }
+    const nextReconcileDate = formattedDateFromTimestamp(ledgerData.get('reconcileStamp'))
+    const l10nDataArgs = {
+      reconcileDate: nextReconcileDate
+    }
+    return <div className='nextReconcileDate' data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id='statusNextReconcileDate' />
+  }
+
   btcToCurrencyString (btc) {
     const balance = Number(btc || 0)
     const currency = this.props.ledgerData.get('currency') || 'USD'
@@ -753,8 +765,10 @@ class PaymentsTab extends ImmutableComponent {
                   </SettingItem>
                 </SettingsList>
               </td>
-              <td id='walletStatus' data-l10n-id={this.walletStatus.id}
-                data-l10n-args={this.walletStatus.args ? JSON.stringify(this.walletStatus.args) : null} />
+              <td>
+                <div id='walletStatus' data-l10n-id={this.walletStatus.id} data-l10n-args={this.walletStatus.args ? JSON.stringify(this.walletStatus.args) : null} />
+                {this.nextReconcileDate}
+              </td>
             </tr>
           </tbody>
         </table>
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 611b0d9621e..ed1523ae537 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -616,6 +616,10 @@ div.nextPaymentSubmission {
       height: 30px;
       line-height: 30px;
     }
+    .nextReconcileDate {
+      font-size: 14px;
+      margin: 10px 0;
+    }
   }
 
   .sort {