Updated payment UI

Resolves brave#7348

Auditors: @bsclifton @bradleyrichter

Test Plan:
- layout should be the same as is on mock in issue brave#7348

app/common/lib/ledgerUtil.js

@@ -74,7 +74,7 @@ module.exports.formattedTimeFromNow = (timestamp) => {
   return moment(new Date(timestamp)).fromNow()
 }
 
-module.exports.formattedDateFromTimestamp = (timestamp) => {
+module.exports.formattedDateFromTimestamp = (timestamp, format) => {
   moment.locale(navigator.language)
-  return moment(new Date(timestamp)).format('YYYY-MM-DD')
+  return moment(new Date(timestamp)).format(format)
 }

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

@@ -63,8 +63,9 @@ accountBalanceLoading=loading…
 monthlyBudget=monthly budget
 status=status
 statusOnError=Brave Wallet can't be reached.
-statusNextReconcileDate=Contribution due date is {{reconcileDate}}.
-statusNextReconcileToday=Contribution due date is today.
+statusNextReconcileDate={{reconcileDate}}
+statusNextReconcileToday=Today
+statusNextReconcileOverdue=Overdue
 createWallet=create wallet
 createWalletStatus=Click the Create Wallet button to get started.
 creatingWallet=creating…
@@ -79,8 +80,10 @@ bitcoin=Bitcoin
 bitcoinAdd=Use your existing Bitcoin wallet/account
 bitcoinAddDescription=Use any BTC wallet that can transfer Bitcoin to your Brave wallet.
 bitcoinBuy=Buy Bitcoin
-noPaymentHistory=Your first contribution will be {{reconcileDate}}
-viewPaymentHistory=View Payment History…
+lastContribution=Last contribution:
+nextContribution=Next contribution:
+noPaymentHistory=No previous contributions
+viewPaymentHistory= {{date}}
 paymentHistoryTitle=Your Payment History
 paymentHistoryFooterText=Your next contribution is {{reconcileDate}}.
 paymentHistoryDueFooterText=Your next contribution is due.
@@ -189,7 +192,6 @@ doNotTrackTitle=Do Not Track
 doNotTrack=Send a 'Do Not Track' header with browsing requests *
 fullscreenContent=Full Screen Content
 blockCanvasFingerprinting=Fingerprinting Protection (may break some sites)
-advancedSettings=Advanced Settings…
 advancedSettingsTitle=Advanced Settings for Brave Payments
 ledgerRecoveryTitle=Recover your Brave wallet
 ledgerRecoverySubtitle=Enter your recovery keys below

app/renderer/components/preferences/payment/enabledContent.js

@@ -6,7 +6,7 @@ const React = require('react')
 const {StyleSheet, css} = require('aphrodite')
 
 // util
-const {btcToCurrencyString, formattedTimeFromNow} = require('../../../../common/lib/ledgerUtil')
+const {btcToCurrencyString, formattedDateFromTimestamp} = require('../../../../common/lib/ledgerUtil')
 const {l10nErrorText} = require('../../../../common/lib/httpUtil')
 const {changeSetting} = require('../../../lib/settingsUtil')
 
@@ -51,38 +51,6 @@ class EnabledContent extends ImmutableComponent {
     />
   }
 
-  paymentHistoryButton () {
-    const ledgerData = this.props.ledgerData
-    const walletCreated = ledgerData.get('created') && !ledgerData.get('creating')
-    const walletTransactions = ledgerData.get('transactions')
-    const walletHasTransactions = walletTransactions && walletTransactions.size
-    const nextReconcileDateValue = this.nextReconcileDate()
-    let buttonText
-
-    if (!walletCreated || !nextReconcileDateValue) {
-      return null
-    } else if (!walletHasTransactions) {
-      buttonText = 'noPaymentHistory'
-    } else {
-      buttonText = 'viewPaymentHistory'
-    }
-
-    const l10nDataArgs = {
-      reconcileDate: nextReconcileDateValue
-    }
-
-    const onButtonClick = this.props.showOverlay.bind(this, 'paymentHistory')
-
-    return <Button
-      testId='paymentHistoryButton'
-      className={css(styles.paymentHistoryButton)}
-      l10nId={buttonText}
-      l10nArgs={l10nDataArgs}
-      onClick={onButtonClick.bind(this)}
-      disabled={ledgerData.get('creating')}
-    />
-  }
-
   ledgerDataErrorText () {
     const ledgerData = this.props.ledgerData
     const ledgerError = ledgerData.get('error')
@@ -158,13 +126,46 @@ class EnabledContent extends ImmutableComponent {
     </div>
   }
 
+  lastReconcileMessage () {
+    const ledgerData = this.props.ledgerData
+    const walletCreated = ledgerData.get('created') && !ledgerData.get('creating')
+    const walletTransactions = ledgerData.get('transactions')
+    const walletHasTransactions = walletTransactions && walletTransactions.size
+    const walletHasReconcile = ledgerData.get('reconcileStamp')
+    let prevReconcileDateValue
+    let text
+
+    if (!walletCreated || !walletHasReconcile) {
+      return null
+    } else if (!walletHasTransactions) {
+      text = 'noPaymentHistory'
+    } else {
+      text = 'viewPaymentHistory'
+      prevReconcileDateValue = this.lastReconcileDate(walletTransactions.last())
+    }
+
+    const l10nDataArgs = {
+      date: prevReconcileDateValue
+    }
+
+    return <div className={css(styles.contribution, styles.lastContribution)}>
+      <div data-l10n-id='lastContribution' />
+      <div data-l10n-id={text} data-l10n-args={JSON.stringify(l10nDataArgs)} />
+    </div>
+  }
+
+  lastReconcileDate (transaction) {
+    const timestamp = transaction.get('submissionStamp')
+    return formattedDateFromTimestamp(timestamp, 'MMMM Do')
+  }
+
   nextReconcileDate () {
     const ledgerData = this.props.ledgerData
     if ((ledgerData.get('error')) || (!ledgerData.get('reconcileStamp'))) {
       return null
     }
     const timestamp = ledgerData.get('reconcileStamp')
-    return formattedTimeFromNow(timestamp)
+    return formattedDateFromTimestamp(timestamp, 'MMMM Do')
   }
 
   nextReconcileMessage () {
@@ -179,14 +180,17 @@ class EnabledContent extends ImmutableComponent {
     let l10nDataId = 'statusNextReconcileDate'
     if (timestamp <= now) {
       l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
-        ? 'paymentHistoryOverdueFooterText' : 'statusNextReconcileToday'
+        ? 'statusNextReconcileOverdue' : 'statusNextReconcileToday'
     }
 
     const l10nDataArgs = {
       reconcileDate: nextReconcileDateRelative
     }
 
-    return <div className={css(styles.nextReconcileDate)} data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
+    return <div className={css(styles.contribution, styles.nextContribution)}>
+      <div data-l10n-id='nextContribution' />
+      <div data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
+    </div>
   }
 
   render () {
@@ -200,7 +204,7 @@ class EnabledContent extends ImmutableComponent {
             <tr className={css(styles.tableTr)}>
               <th className={css(styles.tableTh)} data-l10n-id='monthlyBudget' />
               <th className={css(styles.tableTh)} data-l10n-id='accountBalance' />
-              <th className={css(styles.tableTh)} data-l10n-id='status' />
+              <th className={css(styles.tableTh)} />
             </tr>
           </thead>
           <tbody>
@@ -220,7 +224,7 @@ class EnabledContent extends ImmutableComponent {
                     </FormDropdown>
                   </SettingItem>
                   <SettingItem>
-                    {this.paymentHistoryButton()}
+                    {this.lastReconcileMessage()}
                   </SettingItem>
                 </SettingsList>
               </td>
@@ -235,18 +239,21 @@ class EnabledContent extends ImmutableComponent {
                       <SettingsList className={css(styles.listContainer)}>
                         <SettingItem>
                           {this.fundsAmount()}
-                          {this.walletButton()}
+                        </SettingItem>
+                        <SettingItem>
+                          {this.nextReconcileMessage()}
                         </SettingItem>
                       </SettingsList>
                     </div>
                 }
               </td>
               <td className={css(styles.tableTd)}>
-                <div data-test-id='walletStatus'
+                {this.walletButton()}
+                <div className={css(styles.walletStatus)}
+                  data-test-id='walletStatus'
                   data-l10n-id={walletStatus.id}
                   data-l10n-args={walletStatus.args ? JSON.stringify(walletStatus.args) : null}
                 />
-                {this.nextReconcileMessage()}
               </td>
             </tr>
           </tbody>
@@ -292,32 +299,16 @@ const styles = StyleSheet.create({
     marginTop: paymentStyles.margin.barItem
   },
 
-  nextReconcileDate: {
-    marginTop: paymentStyles.margin.barItem,
-    marginBottom: 0
-  },
-
   settingsListContainer: {
     marginBottom: 0
   },
 
-  paymentHistoryButton: {
-    display: 'block',
-    fontSize: paymentStyles.font.regular,
-    lineHeight: '18px',
-    color: globalStyles.color.braveOrange,
-    height: 'auto',
-    marginTop: paymentStyles.margin.barItem,
-    padding: 0,
-    textAlign: 'left',
-    cursor: 'pointer',
-    whiteSpace: 'normal'
-  },
-
   addFunds: {
     minWidth: '180px',
     width: 'auto',
-    marginTop: paymentStyles.margin.barItem
+    marginTop: 0,
+    paddingTop: '6px',
+    paddingBottom: '6px'
   },
 
   balance: {
@@ -354,6 +345,25 @@ const styles = StyleSheet.create({
     color: globalStyles.color.gray,
     margin: '0 0 0 5px',
     fontSize: paymentStyles.font.regular
+  },
+
+  contribution: {
+    lineHeight: 1.5
+  },
+
+  lastContribution: {
+    marginTop: '16px',
+    marginBottom: 0
+  },
+
+  nextContribution: {
+    marginTop: '15px',
+    marginBottom: 0
+  },
+
+  walletStatus: {
+    marginTop: '15px',
+    lineHeight: 1.5
   }
 })
 

app/renderer/components/preferences/payment/history.js

@@ -8,7 +8,7 @@ const {StyleSheet, css} = require('aphrodite')
 
 // util
 const {addExportFilenamePrefixToTransactions} = require('../../../../common/lib/ledgerExportUtil')
-const {formattedTimeFromNow} = require('../../../../common/lib/ledgerUtil')
+const {formattedTimeFromNow, formattedDateFromTimestamp} = require('../../../../common/lib/ledgerUtil')
 const appUrlUtil = require('../../../../../js/lib/appUrlUtil')
 
 // components
@@ -55,7 +55,7 @@ class HistoryRow extends ImmutableComponent {
 
   get formattedDate () {
     const timestamp = this.transaction.get('submissionStamp')
-    return moment(new Date(timestamp)).format('YYYY-MM-DD')
+    return formattedDateFromTimestamp(timestamp, 'YYYY-MM-DD')
   }
 
   get satoshis () {