Refactor paymentHistory

app/renderer/components/preferences/paymentHistory.js

@@ -0,0 +1,145 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const Immutable = require('immutable')
+const ImmutableComponent = require('../../../../js/components/immutableComponent')
+const {StyleSheet, css} = require('aphrodite')
+const globalStyles = require('../styles/global')
+const {addExportFilenamePrefixToTransactions} = require('../../../common/lib/ledgerExportUtil')
+const appUrlUtil = require('../../../../js/lib/appUrlUtil')
+const aboutUrls = appUrlUtil.aboutUrls
+const aboutContributionsUrl = aboutUrls.get('about:contributions')
+const moment = require('moment')
+moment.locale(navigator.language)
+
+class PaymentHistory extends ImmutableComponent {
+  render () {
+    const transactions = Immutable.fromJS(
+        addExportFilenamePrefixToTransactions(this.props.ledgerData.get('transactions').toJS())
+    )
+
+    return <table className={css(styles.paymentHistoryTable)}>
+      <thead>
+        <tr className={css(styles.rowContainer, styles.headerContainer)}>
+          <th className={css(styles.header, styles.narrow)} data-l10n-id='date' />
+          <th className={css(styles.header, styles.medium)} data-l10n-id='totalAmount' />
+          <th className={css(styles.header, styles.wide)} data-l10n-id='receiptLink' />
+        </tr>
+      </thead>
+      <tbody>
+        {
+          transactions.map(row => <PaymentHistoryRow transaction={row} ledgerData={this.props.ledgerData} />)
+        }
+      </tbody>
+    </table>
+  }
+}
+
+class PaymentHistoryRow extends ImmutableComponent {
+  get transaction () {
+    return this.props.transaction
+  }
+
+  get formattedDate () {
+    const timestamp = this.transaction.get('submissionStamp')
+    return moment(new Date(timestamp)).format('YYYY-MM-DD')
+  }
+
+  get satoshis () {
+    return this.transaction.getIn(['contribution', 'satoshis'])
+  }
+
+  get currency () {
+    return this.transaction.getIn(['contribution', 'fiat', 'currency'])
+  }
+
+  get totalAmount () {
+    const fiatAmount = this.transaction.getIn(['contribution', 'fiat', 'amount'])
+    return (fiatAmount && typeof fiatAmount === 'number' ? fiatAmount.toFixed(2) : '0.00')
+  }
+
+  get viewingId () {
+    return this.transaction.get('viewingId')
+  }
+
+  get receiptFileName () {
+    return `${this.transaction.get('exportFilenamePrefix')}.pdf`
+  }
+
+  get totalAmountStr () {
+    return `${this.totalAmount} ${this.currency}`
+  }
+
+  render () {
+    return <tr className={css(styles.rowContainer, styles.rowData)}>
+      <td className={css(styles.column, styles.narrow)} data-sort={this.timestamp}>{this.formattedDate}</td>
+      <td className={css(styles.column, styles.medium)} data-sort={this.satoshis}>{this.totalAmountStr}</td>
+      <td className={css(styles.column, styles.wide)}>
+        <a href={`${aboutContributionsUrl}#${this.viewingId}`} target='_blank'>{this.receiptFileName}</a>
+      </td>
+    </tr>
+  }
+}
+
+const styles = StyleSheet.create({
+  paymentHistoryTable: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1',
+    borderSpacing: '0',
+    margin: '1em 0'
+  },
+
+  headerContainer: {
+    borderBottom: `2px solid ${globalStyles.color.lightGray}`
+  },
+
+  header: {
+    display: 'flex',
+    color: globalStyles.color.darkGray,
+    fontWeight: '500',
+    paddingBottom: '.25em'
+  },
+
+  rowContainer: {
+    display: 'flex',
+    flex: '1'
+  },
+
+  rowData: {
+    ':nth-child(even)': {
+      backgroundColor: globalStyles.color.veryLightGray
+    },
+    ':hover': {
+      backgroundColor: globalStyles.color.defaultIconBackground
+    }
+  },
+
+  column: {
+    display: 'flex',
+    alignItems: 'center',
+    whiteSpace: 'nowrap',
+    height: '1.5em',
+    padding: '.125em 0'
+  },
+
+  narrow: {
+    color: globalStyles.color.darkGray,
+    justifyContent: 'center',
+    flex: '2'
+  },
+
+  medium: {
+    color: globalStyles.color.darkGray,
+    flex: '3'
+  },
+
+  wide: {
+    color: '#777',
+    flex: '4'
+  }
+})
+
+module.exports = PaymentHistory

app/renderer/components/preferences/paymentsTab.js

@@ -24,6 +24,7 @@ const {FormTextbox, RecoveryKeyTextbox} = require('../textbox')
 const {FormDropdown, SettingDropdown} = require('../dropdown')
 const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
 const LedgerTable = require('./ledgerTable')
+const PaymentHistory = require('./paymentHistory')
 
 class PaymentsTab extends ImmutableComponent {
   constructor () {
@@ -201,7 +202,6 @@ class PaymentsTab extends ImmutableComponent {
   }
 
   get paymentHistoryContent () {
-    const {PaymentHistory} = require('../../../../js/about/preferences')
     return <PaymentHistory ledgerData={this.props.ledgerData} />
   }
 

app/renderer/components/styles/global.js

@@ -111,7 +111,8 @@ const globalStyles = {
     iconSize: '16px',
     dialogTopOffset: '30px',
     paymentsMargin: '20px',
-    modalPanelHeaderMarginBottom: '.5em'
+    modalPanelHeaderMarginBottom: '.5em',
+    paddingHorizontal: '30px'
   },
   shadow: {
     switchShadow: 'inset 0 1px 4px rgba(0, 0, 0, 0.35)',

js/about/preferences.js

@@ -21,12 +21,6 @@ const PaymentsTab = require('../../app/renderer/components/preferences/paymentsT
 const SyncTab = require('../../app/renderer/components/preferences/syncTab')
 const PluginsTab = require('../../app/renderer/components/preferences/pluginsTab')
 
-const ledgerExportUtil = require('../../app/common/lib/ledgerExportUtil')
-const addExportFilenamePrefixToTransactions = ledgerExportUtil.addExportFilenamePrefixToTransactions
-const appUrlUtil = require('../lib/appUrlUtil')
-const aboutUrls = appUrlUtil.aboutUrls
-const aboutContributionsUrl = aboutUrls.get('about:contributions')
-
 const {getZoomValuePercentage} = require('../lib/zoom')
 
 const config = require('../constants/config')
@@ -43,8 +37,6 @@ const aboutActions = require('./aboutActions')
 const getSetting = require('../settings').getSetting
 const SortableTable = require('../components/sortableTable')
 const searchProviders = require('../data/searchProviders')
-const moment = require('moment')
-moment.locale(navigator.language)
 
 const adblock = appConfig.resourceNames.ADBLOCK
 const cookieblock = appConfig.resourceNames.COOKIEBLOCK
@@ -311,90 +303,6 @@ class BitcoinDashboard extends ImmutableComponent {
   }
 }
 
-class PaymentHistory extends ImmutableComponent {
-  get ledgerData () {
-    return this.props.ledgerData
-  }
-
-  render () {
-    const transactions = Immutable.fromJS(
-        addExportFilenamePrefixToTransactions(this.props.ledgerData.get('transactions').toJS())
-    )
-
-    return <div className='paymentHistoryTable'>
-      <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 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')
-  }
-
-  get viewingId () {
-    return this.transaction.get('viewingId')
-  }
-
-  get receiptFileName () {
-    return `${this.transaction.get('exportFilenamePrefix')}.pdf`
-  }
-
-  render () {
-    var date = this.formattedDate
-    var totalAmountStr = `${this.totalAmount} ${this.currency}`
-
-    return <tr>
-      <td className='narrow' data-sort={this.timestamp}>{date}</td>
-      <td className='wide' data-sort={this.satoshis}>{totalAmountStr}</td>
-      <td className='wide'>
-        <a href={aboutContributionsUrl + '#' + this.viewingId} target='_blank'>{this.receiptFileName}</a>
-      </td>
-    </tr>
-  }
-}
-
 class GeneralTab extends ImmutableComponent {
   constructor (e) {
     super()
@@ -1227,12 +1135,7 @@ class AboutPreferences extends React.Component {
   }
 }
 
-function formattedDateFromTimestamp (timestamp) {
-  return moment(new Date(timestamp)).format('YYYY-MM-DD')
-}
-
 module.exports = {
   AboutPreferences: <AboutPreferences />,
-  BitcoinDashboard,
-  PaymentHistory
+  BitcoinDashboard
 }

less/about/preferences.less

@@ -369,58 +369,6 @@ table.sortableTable {
           overflow-y: scroll;
           padding-right: 0;
           padding-left: 0;
-
-          .paymentHistoryTable {
-            background-color: #FFF;
-
-            table {
-              border-spacing: 0;
-              margin-top: 1em;
-              margin-bottom: 1em;
-
-              tr {
-
-                &:first-child {
-                  td {
-                    padding-top: .5em;
-                  }
-                }
-
-                th,
-                td {
-                  &:first-child {
-                    padding-left: @padding-horizontal;
-                  }
-
-                  &:last-child {
-                    padding-right: @padding-horizontal;
-                  }
-                }
-
-                th {
-                  color: @darkGray;
-                  font-weight: 500;
-                  border-bottom: 2px solid @lightGray;
-                  width: 18%;
-                  padding-bottom: .25em;
-                }
-
-                td {
-                  white-space: nowrap;
-                  height: 1.5em;
-                  padding: .125em;
-
-                  &.narrow {
-                    color: @darkGray;
-                  }
-
-                  &.wide {
-                    color: #777;
-                  }
-                }
-              }
-            }
-          }
         }
 
         .dialog-footer {