Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Merge pull request #7532 from NejcZdovc/feature/#7348-payment-ui
Browse files Browse the repository at this point in the history 
Payment UI 1.0
  • Loading branch information
@bsclifton
bsclifton authored Mar 13, 2017
2 parents 6808b8b + bf58800 commit a1734c6
Show file tree
Hide file tree
Showing 14 changed files with 217 additions and 135 deletions.
4 changes: 2 additions & 2 deletions app/common/lib/ledgerUtil.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,9 @@ 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)
}

module.exports.walletStatus = (ledgerData) => {
Expand Down
11 changes: 11 additions & 0 deletions app/extensions/brave/img/ledger/icon_history.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions app/extensions/brave/img/ledger/icon_settings.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions app/extensions/brave/locales/en-US/preferences.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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…
Expand All @@ -79,10 +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}}.
noPaymentDueHistory=Your first contribution is due.
noPaymentOverDueHistory=Your first contribution is overdue.
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.
Expand Down Expand Up @@ -191,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
Expand Down
138 changes: 71 additions & 67 deletions app/renderer/components/preferences/payment/enabledContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const React = require('react')
const {StyleSheet, css} = require('aphrodite')

// util
const {btcToCurrencyString, formattedTimeFromNow, walletStatus} = require('../../../../common/lib/ledgerUtil')
const {btcToCurrencyString, formattedDateFromTimestamp, walletStatus} = require('../../../../common/lib/ledgerUtil')
const {l10nErrorText} = require('../../../../common/lib/httpUtil')
const {changeSetting} = require('../../../lib/settingsUtil')

Expand Down Expand Up @@ -51,44 +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'
const now = new Date().getTime()
const timestamp = this.props.ledgerData.get('reconcileStamp')
if (timestamp <= now) {
buttonText = (timestamp <= (now - (24 * 60 * 60 * 1000)))
? 'noPaymentOverDueHistory' : 'noPaymentDueHistory'
}
} 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')
Expand Down Expand Up @@ -135,13 +97,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 () {
Expand All @@ -156,14 +151,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 () {
Expand All @@ -177,7 +175,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>
Expand All @@ -197,7 +195,7 @@ class EnabledContent extends ImmutableComponent {
</FormDropdown>
</SettingItem>
<SettingItem>
{this.paymentHistoryButton()}
{this.lastReconcileMessage()}
</SettingItem>
</SettingsList>
</td>
Expand All @@ -212,18 +210,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={walletStatusText.id}
data-l10n-args={walletStatusText.args ? JSON.stringify(walletStatusText.args) : null}
/>
{this.nextReconcileMessage()}
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -269,32 +270,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: {
Expand Down Expand Up @@ -328,9 +313,28 @@ const styles = StyleSheet.create({
},

iconText: {
color: globalStyles.color.gray,
color: '#c7c7c7',
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
}
})

Expand Down
4 changes: 2 additions & 2 deletions app/renderer/components/preferences/payment/history.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 () {
Expand Down
10 changes: 7 additions & 3 deletions app/renderer/components/preferences/payment/ledgerTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,9 +168,9 @@ class LedgerTable extends ImmutableComponent {
defaultHeading='rank'
headerClassNames={css(styles.tableTh)}
columnClassNames={this.columnClassNames}
rowClassNames={this.synopsis.map(item => this.enabledForSite(item)
? css(styles.tableTr)
: css(styles.tableTr, styles.paymentsDisabled)
rowClassNames={this.synopsis.map((item, i) => this.enabledForSite(item)
? css(styles.tableTr, i % 2 && styles.tableTdBg)
: css(styles.tableTr, styles.paymentsDisabled, i % 2 && styles.tableTdBg)
).toJS()}
onContextMenu={aboutActions.contextMenu}
contextMenuName='synopsis'
Expand Down Expand Up @@ -234,6 +234,10 @@ const styles = StyleSheet.create({
padding: '0 15px'
},

tableTdBg: {
background: '#f6f7f7'
},

siteData: {
display: 'flex',
flex: '1',
Expand Down
Loading

0 comments on commit a1734c6

Please sign in to comment.