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

Commit

Permalink
Final clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@NejcZdovc
NejcZdovc committed Mar 6, 2017
1 parent b4ae95e commit 417a8c7
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 152 deletions.
60 changes: 27 additions & 33 deletions app/renderer/components/preferences/payment/advanceSettings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,15 @@ const {SettingsList, SettingItem, SettingCheckbox} = require('../../settings')
const {SettingDropdown} = require('../../dropdown')
const ImmutableComponent = require('../../../../../js/components/immutableComponent')

// other
const settings = require('../../../../../js/constants/settings')

// style
const commonStyles = require('../../styles/commonStyles')
const globalStyles = require('../../styles/global')
const {paymentCommon} = require('../../styles/payment')

// other
const settings = require('../../../../../js/constants/settings')
const getSetting = require('../../../../../js/settings').getSetting

class AdvanceSettingsContent extends ImmutableComponent {
get enabled () {
return getSetting(settings.PAYMENTS_ENABLED, this.props.settings)
}

render () {
const minDuration = this.props.ledgerData.getIn(['synopsisOptions', 'minDuration'])
const minPublisherVisits = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherVisits'])
Expand Down Expand Up @@ -64,29 +59,28 @@ class AdvanceSettingsContent extends ImmutableComponent {
</SettingsList>
</div>
<div className={css(styles.settingsPanelDivider, styles.lastDivider)}>
{this.enabled
? <SettingsList className={css(commonStyles.noMarginBottom)}
listClassName={css(styles.list)}>
<SettingCheckbox
dataL10nId='minimumPercentage'
prefKey={settings.MINIMUM_PERCENTAGE}
settings={this.props.settings}
onChangeSetting={this.props.onChangeSetting}
className={css(styles.listItem)}
switchClassName={css(styles.checkboxSwitch)}
labelClassName={css(commonStyles.noMarginBottom)}
/>
<SettingCheckbox
dataL10nId='notifications'
prefKey={settings.PAYMENTS_NOTIFICATIONS}
settings={this.props.settings}
onChangeSetting={this.props.onChangeSetting}
className={css(styles.listItem, commonStyles.noMarginBottom)}
switchClassName={css(styles.checkboxSwitch)}
labelClassName={css(commonStyles.noMarginBottom)}
/>
</SettingsList>
: null}
<SettingsList className={css(commonStyles.noMarginBottom)}
listClassName={css(styles.list)}
>
<SettingCheckbox
dataL10nId='minimumPercentage'
prefKey={settings.MINIMUM_PERCENTAGE}
settings={this.props.settings}
onChangeSetting={this.props.onChangeSetting}
className={css(styles.listItem)}
switchClassName={css(styles.checkboxSwitch)}
labelClassName={css(commonStyles.noMarginBottom)}
/>
<SettingCheckbox
dataL10nId='notifications'
prefKey={settings.PAYMENTS_NOTIFICATIONS}
settings={this.props.settings}
onChangeSetting={this.props.onChangeSetting}
className={css(styles.listItem, commonStyles.noMarginBottom)}
switchClassName={css(styles.checkboxSwitch)}
labelClassName={css(commonStyles.noMarginBottom)}
/>
</SettingsList>
</div>
</div>
</div>
Expand Down Expand Up @@ -143,8 +137,8 @@ const styles = StyleSheet.create({
},
checkboxSwitch: {
marginTop: '2px',
paddingTop: '0',
paddingBottom: '0'
paddingTop: 0,
paddingBottom: 0
}
})

Expand Down
97 changes: 47 additions & 50 deletions app/renderer/components/preferences/payment/bitcoinDashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,37 +33,43 @@ class BitcoinDashboard extends ImmutableComponent {
this.openBuyURLTab = this.openBuyURLTab.bind(this)
}

openBuyURLTab () {
// close parent dialog
this.props.hideParentOverlay()
get currency () {
return this.props.ledgerData.get('currency') || 'USD'
}

get ledgerData () {
return this.props.ledgerData
get amount () {
return getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings) || 0
}

get bitcoinOverlayContent () {
return <iframe src={this.ledgerData.get('buyURL')} />
get canUseCoinbase () {
if (!this.props.ledgerData.get('buyMaximumUSD')) return true

return this.currency === 'USD' && this.amount < this.props.ledgerData.get('buyMaximumUSD')
}

get bitcoinPurchaseButton () {
if (!this.ledgerData.get('buyURLFrame')) {
get userInAmerica () {
const countryCode = this.props.ledgerData.get('countryCode')
return !(countryCode && countryCode !== 'US')
}

bitcoinPurchaseButton () {
if (!this.props.ledgerData.get('buyURLFrame')) {
return <Button l10nId='add' className={css(commonStyles.buttonPrimary, styles.panelButton)} onClick={this.props.showOverlay.bind(this)} />
}

return <a href={this.ledgerData.get('buyURL')} target='_blank' onClick={this.openBuyURLTab}>
return <a href={this.props.ledgerData.get('buyURL')} target='_blank' onClick={this.openBuyURLTab}>
<Button l10nId='add' className={css(commonStyles.buttonPrimary, styles.panelButton)} />
</a>
}

get qrcodeOverlayContent () {
qrcodeOverlayContent () {
return <div>
<img className={css(styles.qrcodeImage)} src={this.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
<img className={css(styles.qrcodeImage)} src={this.props.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
<div className={css(styles.bitcoinQRTitle)} data-l10n-id='bitcoinQR' />
</div>
}

get qrcodeOverlayFooter () {
qrcodeOverlayFooter () {
if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
return <div className={css(styles.qrcodeOverlayFooter)}>
<div className={css(styles.coinbaseLogo)} />
Expand All @@ -75,26 +81,7 @@ class BitcoinDashboard extends ImmutableComponent {
return null
}

get currency () {
return this.props.ledgerData.get('currency') || 'USD'
}

get amount () {
return getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings) || 0
}

get canUseCoinbase () {
if (!this.props.ledgerData.get('buyMaximumUSD')) return true

return this.currency === 'USD' && this.amount < this.props.ledgerData.get('buyMaximumUSD')
}

get userInAmerica () {
const countryCode = this.props.ledgerData.get('countryCode')
return !(countryCode && countryCode !== 'US')
}

get coinbasePanel () {
coinbasePanel () {
if (this.canUseCoinbase) {
return <div className={css(paymentCommon.panel, styles.panel, commonStyles.noMarginTop)}>
<div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
Expand Down Expand Up @@ -131,7 +118,7 @@ class BitcoinDashboard extends ImmutableComponent {
}
}

get exchangePanel () {
exchangePanel () {
const url = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeURL'])
const name = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeName'])
// Call worldWidePanel if we don't have the URL or Name
Expand All @@ -157,7 +144,7 @@ class BitcoinDashboard extends ImmutableComponent {
}
}

get smartphonePanel () {
smartphonePanel () {
return <div className={css(paymentCommon.panel, styles.panel, commonStyles.noMarginBottom)}>
<div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst, styles.alignMiddle)}>
<span className={cx({
Expand All @@ -174,8 +161,8 @@ class BitcoinDashboard extends ImmutableComponent {
</div>
}

get panelFooter () {
if (this.ledgerData.get('buyURLFrame')) {
panelFooter () {
if (this.props.ledgerData.get('buyURLFrame')) {
return <div className={css(paymentCommon.panelFooter, styles.panelFooter)}>
<Button l10nId='done' className={css(commonStyles.whiteButton)} onClick={this.props.hideParentOverlay} />
</div>
Expand All @@ -194,6 +181,15 @@ class BitcoinDashboard extends ImmutableComponent {
}
}

openBuyURLTab () {
// close parent dialog
this.props.hideParentOverlay()
}

bitcoinOverlayContent () {
return <iframe src={this.props.ledgerData.get('buyURL')} />
}

worldWidePanel () {
return <div className={css(paymentCommon.panel, styles.panel)}>
<div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
Expand Down Expand Up @@ -239,14 +235,15 @@ class BitcoinDashboard extends ImmutableComponent {

render () {
window.addEventListener('message', this.onMessage.bind(this), false)
const ledgerData = this.props.ledgerData

// TODO remove bitcoinDashboard class
return <div className='bitcoinDashboard' data-test-id='bitcoinDashboard'>
{
this.props.bitcoinOverlayVisible
? <ModalOverlay
title={'bitcoinBuy'}
content={this.bitcoinOverlayContent}
content={this.bitcoinOverlayContent()}
customTitleClasses={'coinbaseOverlay'}
emptyDialog
onHide={this.props.hideOverlay.bind(this)}
Expand All @@ -256,18 +253,18 @@ class BitcoinDashboard extends ImmutableComponent {
{
this.props.qrcodeOverlayVisible
? <ModalOverlay
content={this.qrcodeOverlayContent}
content={this.qrcodeOverlayContent()}
customTitleClasses={'qrcodeOverlay'}
footer={this.qrcodeOverlayFooter}
footer={this.qrcodeOverlayFooter()}
onHide={this.props.hideQRcode.bind(this)}
/>
: null
}
<div className={css(paymentCommon.board)}>
{
(this.userInAmerica || this.ledgerData.get('buyURLFrame'))
? this.coinbasePanel
: this.exchangePanel
(this.userInAmerica || ledgerData.get('buyURLFrame'))
? this.coinbasePanel()
: this.exchangePanel()
}
<div className={css(paymentCommon.panel, styles.panel)}>
<div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
Expand Down Expand Up @@ -295,12 +292,12 @@ class BitcoinDashboard extends ImmutableComponent {
<div className={css(styles.settingsListTitle, styles.subTitle)} data-l10n-id='bitcoinAddDescription' />
</div>
{
this.ledgerData.get('address')
ledgerData.get('address')
? <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
{
this.ledgerData.get('hasBitcoinHandler') && this.ledgerData.get('paymentURL')
ledgerData.get('hasBitcoinHandler') && ledgerData.get('paymentURL')
? <div className={css(styles.hasBitcoinHandler)}>
<a href={this.ledgerData.get('paymentURL')} target='_blank'>
<a href={ledgerData.get('paymentURL')} target='_blank'>
<Button l10nId='bitcoinVisitAccount'
className={css(commonStyles.buttonPrimary, styles.bitcoinAddressButton)}
/>
Expand All @@ -311,19 +308,19 @@ class BitcoinDashboard extends ImmutableComponent {
<div data-l10n-id='bitcoinPaymentURL' className={css(styles.walletLabelText)} />
</div>
}
<div className={css(styles.walletAddressText)}>{this.ledgerData.get('address')}</div>
<div className={css(styles.walletAddressText)}>{ledgerData.get('address')}</div>
<Button className={css(commonStyles.buttonPrimary, styles.panelButton)}
l10nId='copyToClipboard'
onClick={this.copyToClipboard.bind(this, this.ledgerData.get('address'))}
onClick={this.copyToClipboard.bind(this, ledgerData.get('address'))}
/>
</div>
: <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
<div data-l10n-id='bitcoinWalletNotAvailable' />
</div>
}
</div>
{this.smartphonePanel}
{this.panelFooter}
{this.smartphonePanel()}
{this.panelFooter()}
</div>
</div>
}
Expand Down
Loading

0 comments on commit 417a8c7

Please sign in to comment.