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

Author: ayumi

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...

js/about/preferences.js

@@ -686,6 +686,21 @@ class PaymentsTab extends ImmutableComponent {
     </div>
   }
 
+  get nextReconcileDate () {
+    // Show date only after the user has funded the wallet.
+    // Afterwards balance should always !== 0 due to exchange rate fluctuations.
+    const ledgerData = this.props.ledgerData
+    const balance = Number(ledgerData.get('balance') || 0)
+    if (balance === 0 || !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 +768,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>

less/about/preferences.less

@@ -616,6 +616,10 @@ div.nextPaymentSubmission {
       height: 30px;
       line-height: 30px;
     }
+    .nextReconcileDate {
+      font-size: 14px;
+      margin: 10px 0;
+    }
   }
 
   .sort {