From 4a6fcbf1830ded18d871ea43e107378dbbd2a459 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Tue, 29 Jan 2019 16:30:17 +0100 Subject: [PATCH] Adds support for mulitple banners at the same time Resolves https://github.com/brave/brave-browser/issues/3125 --- .../resources/donate/brave_donate.tsx | 19 +++--- .../resources/donate/components/app.tsx | 11 ++- .../donate/components/siteBanner.tsx | 68 +++++++------------ .../donate/reducers/donate_reducer.ts | 10 ++- components/definitions/rewardsDonate.d.ts | 2 +- 5 files changed, 53 insertions(+), 57 deletions(-) diff --git a/components/brave_rewards/resources/donate/brave_donate.tsx b/components/brave_rewards/resources/donate/brave_donate.tsx index 4a6e04e50369..121f9500c661 100644 --- a/components/brave_rewards/resources/donate/brave_donate.tsx +++ b/components/brave_rewards/resources/donate/brave_donate.tsx @@ -31,22 +31,23 @@ window.cr.define('brave_rewards_donate', function () { initLocale(window.loadTimeData.data_) } - render( - - - - - , - document.getElementById('root')) - - // TODO call rewards service to get dialog data const dialogArgsRaw = chrome.getVariableValue('dialogArguments') + let publisherKey try { const args = JSON.parse(dialogArgsRaw) chrome.send('brave_rewards_donate.getPublisherBanner', [args.publisherKey]) + publisherKey = args.publisherKey } catch (e) { console.error('Error parsing incoming dialog args', dialogArgsRaw, e) } + + render( + + + + + , + document.getElementById('root')) } function getActions () { diff --git a/components/brave_rewards/resources/donate/components/app.tsx b/components/brave_rewards/resources/donate/components/app.tsx index 1feaadc963c4..195bc3e1c49b 100644 --- a/components/brave_rewards/resources/donate/components/app.tsx +++ b/components/brave_rewards/resources/donate/components/app.tsx @@ -14,6 +14,7 @@ import DonationOverlay from 'brave-ui/features/rewards/donationOverlay' import * as rewardsActions from '../actions/donate_actions' interface Props extends RewardsDonate.ComponentProps { + publisherKey: string } export class App extends React.Component { @@ -76,7 +77,13 @@ export class App extends React.Component { } render () { - const { finished, error, publisher } = this.props.rewardsDonateData + const { finished, error, publishers } = this.props.rewardsDonateData + + if (!publishers) { + return null + } + + const publisher = publishers[this.props.publisherKey] if (!publisher) { return null @@ -86,7 +93,7 @@ export class App extends React.Component { <> { !finished && !error - ? + ? : null } { diff --git a/components/brave_rewards/resources/donate/components/siteBanner.tsx b/components/brave_rewards/resources/donate/components/siteBanner.tsx index f4df6d1e0a20..c3481e48bfce 100644 --- a/components/brave_rewards/resources/donate/components/siteBanner.tsx +++ b/components/brave_rewards/resources/donate/components/siteBanner.tsx @@ -15,6 +15,7 @@ import * as donateActions from '../actions/donate_actions' import * as utils from '../utils' interface Props extends RewardsDonate.ComponentProps { + publisher: RewardsDonate.Publisher } interface State { @@ -43,12 +44,12 @@ class Banner extends React.Component { } generateAmounts = () => { - const { publisher, walletInfo } = this.props.rewardsDonateData + const { walletInfo } = this.props.rewardsDonateData let amounts = [1, 5, 10] - - if (publisher && publisher.amounts && publisher.amounts.length) { - amounts = publisher.amounts + const amount = this.props.publisher.amounts + if (amount && amount.length) { + amounts = amount } return amounts.map((value: number) => { @@ -67,10 +68,11 @@ class Banner extends React.Component { } onDonate = (amount: string, recurring: boolean) => { - const { publisher, walletInfo } = this.props.rewardsDonateData + const { walletInfo } = this.props.rewardsDonateData const { balance } = walletInfo + const publisher = this.props.publisher - if (publisher && publisher.publisherKey && balance >= parseInt(amount, 10)) { + if (publisher.publisherKey && balance >= parseInt(amount, 10)) { this.actions.onDonate(publisher.publisherKey, amount, recurring) } else { // TODO return error @@ -78,7 +80,7 @@ class Banner extends React.Component { } generateSocialLinks = () => { - const publisher = this.props.rewardsDonateData.publisher + const publisher = this.props.publisher if (!publisher || !publisher.social) { return [] @@ -120,49 +122,31 @@ class Banner extends React.Component { } render () { - const { publisher, walletInfo } = this.props.rewardsDonateData + const { walletInfo } = this.props.rewardsDonateData const { balance } = walletInfo - let title = '' - let background = '' - let logo = '' - let publisherKey = '' - let description = '' - let name = '' - let provider = '' - let verified = false - - if (publisher) { - title = publisher.title - background = publisher.background - logo = publisher.logo - publisherKey = publisher.publisherKey - description = publisher.description - name = publisher.name - provider = publisher.provider - verified = publisher.verified - - const internalFavicon = /^https:\/\/[a-z0-9-]+\.invalid(\/)?$/ - if (internalFavicon.test(publisher.logo)) { - logo = `chrome://favicon/size/160@2x/${publisher.logo}` - } + const publisher = this.props.publisher + const verified = publisher.verified + let logo = publisher.logo - if (!verified) { - logo = '' - } + const internalFavicon = /^https:\/\/[a-z0-9-]+\.invalid(\/)?$/ + if (internalFavicon.test(publisher.logo)) { + logo = `chrome://favicon/size/160@2x/${publisher.logo}` } - // TODO we need to use title and not publisherKey for domain for media publishers + if (!verified) { + logo = '' + } return ( { learnMoreNotice={'https://brave.com/faq-rewards/#unclaimed-funds'} addFundsLink={this.addFundsLink} > - {description} + {publisher.description} ) } diff --git a/components/brave_rewards/resources/donate/reducers/donate_reducer.ts b/components/brave_rewards/resources/donate/reducers/donate_reducer.ts index adfad863b456..2a90224eddec 100644 --- a/components/brave_rewards/resources/donate/reducers/donate_reducer.ts +++ b/components/brave_rewards/resources/donate/reducers/donate_reducer.ts @@ -10,7 +10,7 @@ import { types } from '../constants/donate_types' export const defaultState: RewardsDonate.State = { finished: false, error: false, - publisher: undefined, + publishers: {}, currentTipAmount: '0.0', currentTipRecurring: false, recurringDonations: [], @@ -31,7 +31,11 @@ const publishersReducer: Reducer = (state: RewardsDonate.St case types.ON_PUBLISHER_BANNER: { state = { ...state } - state.publisher = payload.data + if (!state.publishers) { + state.publishers = {} + } + const publisher: RewardsDonate.Publisher = payload.data + state.publishers[publisher.publisherKey] = publisher break } case types.GET_WALLET_PROPERTIES: @@ -47,7 +51,7 @@ const publishersReducer: Reducer = (state: RewardsDonate.St } case types.ON_DONATE: { - if (state.publisher && state.publisher.publisherKey && payload.amount > 0) { + if (payload.publisherKey && payload.amount > 0) { let amount = parseInt(payload.amount, 10) chrome.send('brave_rewards_donate.onDonate', [ payload.publisherKey, diff --git a/components/definitions/rewardsDonate.d.ts b/components/definitions/rewardsDonate.d.ts index 3d9f7e16f93f..15c1c6efecf8 100644 --- a/components/definitions/rewardsDonate.d.ts +++ b/components/definitions/rewardsDonate.d.ts @@ -1,6 +1,6 @@ declare namespace RewardsDonate { interface State { - publisher?: Publisher + publishers: Record walletInfo: WalletProperties finished: boolean error: boolean