Adds support for multiple banners at the same time

components/brave_rewards/resources/donate/brave_donate.tsx

@@ -31,22 +31,23 @@ window.cr.define('brave_rewards_donate', function () {
       initLocale(window.loadTimeData.data_)
     }
 
-    render(
-      <Provider store={store}>
-        <ThemeProvider theme={Theme}>
-          <App />
-        </ThemeProvider>
-      </Provider>,
-      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(
+      <Provider store={store}>
+        <ThemeProvider theme={Theme}>
+          <App publisherKey={publisherKey} />
+        </ThemeProvider>
+      </Provider>,
+      document.getElementById('root'))
   }
 
   function getActions () {

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<Props, {}> {
@@ -76,7 +77,13 @@ export class App extends React.Component<Props, {}> {
   }
 
   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<Props, {}> {
       <>
         {
           !finished && !error
-          ? <Banner />
+          ? <Banner publisher={publisher} />
           : null
         }
         {

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<Props, State> {
   }
 
   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,18 +68,19 @@ class Banner extends React.Component<Props, State> {
   }
 
   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
     }
   }
 
   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<Props, State> {
   }
 
   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 (
       <SiteBanner
-        domain={publisherKey}
-        title={title}
-        name={name}
-        provider={provider as Provider}
-        recurringDonation={this.hasRecurringDonation(publisherKey)}
+        domain={publisher.publisherKey}
+        title={publisher.title}
+        name={publisher.name}
+        provider={publisher.provider as Provider}
+        recurringDonation={this.hasRecurringDonation(publisher.publisherKey)}
         balance={balance.toString() || '0'}
-        bgImage={background}
+        bgImage={publisher.background}
         logo={logo}
         donationAmounts={this.generateAmounts()}
         logoBgColor={''}
@@ -175,7 +159,7 @@ class Banner extends React.Component<Props, State> {
         learnMoreNotice={'https://brave.com/faq-rewards/#unclaimed-funds'}
         addFundsLink={this.addFundsLink}
       >
-        {description}
+        {publisher.description}
       </SiteBanner>
     )
   }

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<RewardsDonate.State> = (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<RewardsDonate.State> = (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,

components/definitions/rewardsDonate.d.ts

@@ -1,6 +1,6 @@
 declare namespace RewardsDonate {
   interface State {
-    publisher?: Publisher
+    publishers: Record<string, Publisher>
     walletInfo: WalletProperties
     finished: boolean
     error: boolean