Add Payment History dialog

- Displays a table of user payment history
  (Each row represents a batched payout to multiple publishers
  sometimes called a `reconciliation` or `transaction` elsewhere)
- 3 columns are shown for each payment: `Date`, `Total Amount`, & `Receipt Link`
- Data comes from `transactions` array in `ledgerData` obj in UI
  (same as `ledgerInfo` in `browser-laptop/app/ledger.js`)
- Next payment date in footer comes from `ledgerData.reconcileStamp`
- fix awkward alignment of `Account Balance`, `Monthly Budget` columns, and `View Payment History` button in Payments Tab

impls issue #2994

app/extensions/brave/locales/en-US/preferences.properties

@@ -42,9 +42,14 @@ syncEmptyText=Sync settings coming soon.
 bitcoin=Bitcoin
 bitcoinAdd=Use an existing Bitcoin wallet
 bitcoinBuy=Buy Bitcoin
+viewPaymentHistory=View Payment History
+paymentHistoryTitle=Your Payment History
+paymentHistoryFooterText=Your next payment submission is {{reconcileDate}}.
+paymentHistoryOKText=OK
 bitcoinAddress=Your Brave wallet address is:
 bitcoinPaymentURL=Scan the QR code or copy this link:
 bitcoinQR=Brave wallet QR code:
+paymentHistoryTitle=Your Payment History
 bitcoinCopyAddress=Copy Bitcoin address to clipboard
 bitcoinVisitAccount=Transfer BTC
 bitcoinBalance=Please transfer: 
@@ -56,8 +61,11 @@ on=on
 notifications=Notifications
 moneyAdd=Use your debit or credit card
 add=Buy with Coinbase
-addFundsTitle=Add Funds
+addFundsTitle=Add Funds...
 addFunds=Add funds to your Brave Payments Account
+date=Date
+totalAmount=Total Amount
+receiptLink=Receipt Link
 advanced=Advanced
 rank=Rank
 views=Views

app/ledger.js

@@ -695,16 +695,28 @@ var ledgerInfo = {
   transactions:
   [
 /*
-    { viewingId       : undefined
-    , submissionStamp : undefined
-    , satoshis        : undefined
-    , currency        : undefined
-    , amount          : undefined
-    , ballots         :
-      { 'publisher1'  : undefined
-        ...
+    {
+      viewingId: undefined,
+      surveyorId: undefined,
+      contribution: {
+        fiat: {
+          amount: undefined,
+          currency: undefined
+        },
+        rates: {
+          [currency]: undefined // bitcoin value in <currency>
+        },
+        satoshis: undefined,
+        fee: undefined
+      },
+      submissionStamp: undefined,
+      submissionId: undefined,
+      count: undefined,
+      satoshis: undefined,
+      votes: undefined,
+      ballots: {
+        [publisher]: undefined
       }
-    }
   , ...
  */
   ],
@@ -1002,7 +1014,9 @@ var getPaymentInfo = () => {
       info.address = client.getWalletAddress()
       if ((amount) && (currency)) {
         info = underscore.extend(info, { amount: amount, currency: currency })
-        if ((body.rates) && (body.rates[currency])) info.btc = (amount / body.rates[currency]).toFixed(8)
+        if ((body.rates) && (body.rates[currency])) {
+          info.btc = (amount / body.rates[currency]).toFixed(8)
+        }
       }
       ledgerInfo._internal.paymentInfo = info
       updateLedgerInfo()

js/about/preferences.js

@@ -99,7 +99,11 @@ class SettingsList extends ImmutableComponent {
 class SettingItem extends ImmutableComponent {
   render () {
     return <div className='settingItem'>
-      <span data-l10n-id={this.props.dataL10nId} />
+      {
+        this.props.dataL10nId
+          ? <span data-l10n-id={this.props.dataL10nId} />
+          : null
+      }
       {this.props.children}
     </div>
   }
@@ -323,6 +327,83 @@ class BitcoinDashboard extends ImmutableComponent {
   }
 }
 
+class PaymentHistory extends ImmutableComponent {
+  get ledgerData () {
+    return this.props.ledgerData
+  }
+
+  render () {
+    const transactions = this.props.ledgerData.get('transactions')
+
+    return <div id='paymentHistory'>
+      <table className='sort'>
+        <thead>
+          <tr>
+            <th className='sort-header' data-l10n-id='date' />
+            <th className='sort-header' data-l10n-id='totalAmount' />
+            <th className='sort-header' data-l10n-id='receiptLink' />
+          </tr>
+        </thead>
+        <tbody>
+        {
+          transactions.map(function (row) {
+            return <PaymentHistoryRow transaction={row} ledgerData={this.props.ledgerData} />
+          }.bind(this))
+        }
+        </tbody>
+      </table>
+    </div>
+  }
+}
+
+class PaymentHistoryRow extends ImmutableComponent {
+
+  get transaction () {
+    return this.props.transaction
+  }
+
+  get timestamp () {
+    return this.transaction.get('submissionStamp')
+  }
+
+  get formattedDate () {
+    return formattedDateFromTimestamp(this.timestamp)
+  }
+
+  get numericDateStr () {
+    return (new Date(this.timestamp)).toLocaleDateString().replace(/\//g, '-')
+  }
+
+  get ledgerData () {
+    return this.props.ledgerData
+  }
+
+  get satoshis () {
+    return this.transaction.getIn(['contribution', 'satoshis'])
+  }
+
+  get currency () {
+    return this.transaction.getIn(['contribution', 'fiat', 'currency'])
+  }
+
+  get totalAmount () {
+    var fiatAmount = this.transaction.getIn(['contribution', 'fiat', 'amount'])
+    return (fiatAmount && typeof fiatAmount === 'number' ? fiatAmount.toFixed(2) : '0.00')
+  }
+
+  render () {
+    var date = this.formattedDate
+    var totalAmountStr = `${this.totalAmount} ${this.currency}`
+    var receiptFileName = `brave_ledger${this.numericDateStr}.pdf`
+
+    return <tr>
+      <td className='narrow' data-sort={this.timestamp}>{date}</td>
+      <td className='wide' data-sort={this.satoshis}>{totalAmountStr}</td>
+      <td className='wide'>{receiptFileName}</td>
+    </tr>
+  }
+}
+
 class GeneralTab extends ImmutableComponent {
   enabled (keyArray) {
     return keyArray.every((key) => getSetting(key, this.props.settings) === true)
@@ -494,7 +575,21 @@ class PaymentsTab extends ImmutableComponent {
     const onButtonClick = this.props.ledgerData.get('created')
       ? this.props.showOverlay.bind(this, 'addFunds')
       : (this.props.ledgerData.get('creating') ? () => {} : this.createWallet)
-    return <Button l10nId={buttonText} className='primaryButton' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
+    return <Button l10nId={buttonText} className='primaryButton addFunds' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
+  }
+
+  get paymentHistoryButton () {
+    const walletCreated = this.props.ledgerData.get('created') && !this.props.ledgerData.get('creating')
+    const walletTransactions = this.props.ledgerData.get('transactions')
+    const walletHasTransactions = walletTransactions && walletTransactions.size
+
+    if (!walletCreated || !walletHasTransactions) {
+      return null
+    }
+
+    const buttonText = 'viewPaymentHistory'
+    const onButtonClick = this.props.showOverlay.bind(this, 'paymentHistory')
+    return <Button className='paymentHistoryButton' l10nId={buttonText} onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
   }
 
   get walletStatus () {
@@ -535,6 +630,27 @@ class PaymentsTab extends ImmutableComponent {
       hideParentOverlay={this.props.hideOverlay.bind(this, 'addFunds')} />
   }
 
+  get paymentHistoryContent () {
+    return <PaymentHistory ledgerData={this.props.ledgerData} />
+  }
+
+  get paymentHistoryFooter () {
+    let ledgerData = this.props.ledgerData
+    if (!ledgerData.get('reconcileStamp')) {
+      return null
+    }
+    let nextReconcileDate = formattedDateFromTimestamp(ledgerData.get('reconcileStamp'))
+    let l10nDataArgs = {
+      reconcileDate: nextReconcileDate
+    }
+    return <div className='paymentHistoryFooter'>
+      <div className='nextPaymentSubmission'>
+        <span data-l10n-id='paymentHistoryFooterText' data-l10n-args={JSON.stringify(l10nDataArgs)} />
+      </div>
+      <Button l10nId='paymentHistoryOKText' className='okButton primaryButton' onClick={this.props.hideOverlay.bind(this, 'paymentHistory')} />
+    </div>
+  }
+
   btcToCurrencyString (btc) {
     const balance = Number(btc || 0)
     const currency = this.props.ledgerData.get('currency')
@@ -544,8 +660,7 @@ class PaymentsTab extends ImmutableComponent {
     if (balance === 0) {
       return `0 ${currency}`
     }
-    if (this.props.ledgerData.get('btc') &&
-        typeof this.props.ledgerData.get('amount') === 'number') {
+    if (this.props.ledgerData.get('btc') && typeof this.props.ledgerData.get('amount') === 'number') {
       const btcValue = this.props.ledgerData.get('btc') / this.props.ledgerData.get('amount')
       return `${(balance / btcValue).toFixed(2)} ${currency}`
     }
@@ -584,6 +699,7 @@ class PaymentsTab extends ImmutableComponent {
                 {this.btcToCurrencyString(this.props.ledgerData.get('balance'))}
                 </span>
                 {this.walletButton}
+                {this.paymentHistoryButton}
               </td>
               <td>
                 <SettingsList>
@@ -618,6 +734,11 @@ class PaymentsTab extends ImmutableComponent {
           ? <ModalOverlay title={'addFunds'} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
           : null
         }
+        {
+          this.enabled && this.props.paymentHistoryOverlayVisible
+          ? <ModalOverlay title={'paymentHistoryTitle'} customTitleClasses={'paymentHistory'} content={this.paymentHistoryContent} footer={this.paymentHistoryFooter} onHide={this.props.hideOverlay.bind(this, 'paymentHistory')} />
+          : null
+        }
       <div className='titleBar'>
         <div className='sectionTitleWrapper pull-left'>
           <span className='sectionTitle' data-l10n-id='publisherPaymentsTitle' />
@@ -1005,6 +1126,7 @@ class AboutPreferences extends React.Component {
     let hash = window.location.hash ? window.location.hash.slice(1) : ''
     this.state = {
       bitcoinOverlayVisible: false,
+      paymentHistoryOverlayVisible: false,
       addFundsOverlayVisible: false,
       preferenceTab: hash.toUpperCase() in preferenceTabs ? hash : preferenceTabs.GENERAL,
       hintNumber: this.getNextHintNumber(),
@@ -1118,6 +1240,7 @@ class AboutPreferences extends React.Component {
           braveryDefaults={braveryDefaults} ledgerData={ledgerData}
           onChangeSetting={this.onChangeSetting}
           bitcoinOverlayVisible={this.state.bitcoinOverlayVisible}
+          paymentHistoryOverlayVisible={this.state.paymentHistoryOverlayVisible}
           addFundsOverlayVisible={this.state.addFundsOverlayVisible}
           showOverlay={this.setOverlayVisible.bind(this, true)}
           hideOverlay={this.setOverlayVisible.bind(this, false)} />
@@ -1143,4 +1266,9 @@ class AboutPreferences extends React.Component {
   }
 }
 
+let formattedDateFromTimestamp = function (timestamp) {
+  var date = new Date(timestamp)
+  return date.toLocaleDateString()
+}
+
 module.exports = <AboutPreferences />

js/components/modalOverlay.js

@@ -18,10 +18,19 @@ class ModalOverlay extends ImmutableComponent {
       close = <button type='button' className='close pull-right' onClick={this.props.onHide}><span>&times;</span></button>
       title = <div className='sectionTitle' data-l10n-id={this.props.title} />
     }
-    return <div className='dialog'>
-      {close}
-      {title}
-      {this.props.content}
+    let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '')
+
+    return <div className={'dialog ' + customTitleClassesStr}>
+      <div className='dialog-header'>
+        {close}
+        {title}
+      </div>
+      <div className='dialog-body'>
+        {this.props.content}
+      </div>
+      <div className='dialog-footer'>
+        {this.props.footer}
+      </div>
     </div>
   }