Initial refactoring of UI to allow multiple grants

browser/ui/webui/brave_webui_source.cc

@@ -307,6 +307,7 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "done", IDS_BRAVE_UI_DONE },
         { "downloadPDF", IDS_BRAVE_UI_DOWNLOAD_PDF },
         { "earningsAds", IDS_BRAVE_UI_EARNINGS_ADS },
+        { "earningsClaimDefault", IDS_BRAVE_UI_EARNINGS_CLAIM_DEFAULT },
         { "enableTips", IDS_BRAVE_UI_ENABLE_TIPS },
         { "excludeSite", IDS_BRAVE_UI_EXCLUDE_SITE },
         { "excludedSitesText", IDS_BRAVE_UI_EXCLUDED_SITES },

components/brave_rewards/resources/ui/actions/rewards_actions.ts

@@ -25,10 +25,10 @@ export const onWalletProperties = (properties: {status: number, wallet: Rewards.
     properties
   })
 
-export const getGrant = () => action(types.GET_GRANT)
+export const getGrants = () => action(types.GET_GRANTS)
 
-export const onGrant = (properties: Rewards.Grant) => action(types.ON_GRANT, {
-  properties
+export const onGrants = (grants: Rewards.Grant[]) => action(types.ON_GRANTS, {
+  grants
 })
 
 export const getGrantCaptcha = () => action(types.GET_GRANT_CAPTCHA)

components/brave_rewards/resources/ui/brave_rewards.tsx

@@ -61,8 +61,8 @@ window.cr.define('brave_rewards', function () {
     getActions().onWalletProperties(properties)
   }
 
-  function grant (properties: Rewards.Grant) {
-    getActions().onGrant(properties)
+  function grants (grants: Rewards.Grant[]) {
+    getActions().onGrants(grants)
   }
 
   function grantCaptcha (captcha: Rewards.Captcha) {
@@ -148,7 +148,7 @@ window.cr.define('brave_rewards', function () {
     walletCreated,
     walletCreateFailed,
     walletProperties,
-    grant,
+    grants,
     grantCaptcha,
     walletPassphrase,
     recoverWalletData,

components/brave_rewards/resources/ui/components/grant.tsx

@@ -8,11 +8,11 @@ import { connect } from 'react-redux'
 
 // Components
 import {
-  GrantClaim,
   GrantWrapper,
   GrantCaptcha,
   GrantComplete
 } from 'brave-ui/features/rewards'
+import GrantClaim, { Type } from 'brave-ui/features/rewards/grantClaim'
 
 // Utils
 import * as rewardsActions from '../actions/rewards_actions'
@@ -25,6 +25,7 @@ interface State {
 }
 
 interface Props extends Rewards.ComponentProps {
+  grant: Rewards.Grant
 }
 
 // TODO add local when we know what we will get from the server
@@ -60,7 +61,7 @@ class Grant extends React.Component<Props, State> {
   }
 
   grantCaptcha = () => {
-    const { grant } = this.props.rewardsData
+    const { grant } = this.props
 
     if (!grant) {
       return
@@ -135,22 +136,27 @@ class Grant extends React.Component<Props, State> {
   }
 
   render () {
-    const { grant } = this.props.rewardsData
+    const { grant } = this.props
 
     if (!grant) {
       return null
     }
 
+    let type
     let tokens = '0.0'
+
+    if (grant.type) {
+      type = grant.type
+    }
     if (grant.probi) {
       tokens = convertProbiToFixed(grant.probi)
     }
 
     return (
       <>
         {
-          this.state.grantShow
-            ? <GrantClaim onClaim={this.onGrantShow}/>
+          this.state.grantShow && type
+            ? <GrantClaim type={type as Type} onClaim={this.onGrantShow}/>
             : null
         }
         {

components/brave_rewards/resources/ui/components/settingsPage.tsx

@@ -58,7 +58,22 @@ class SettingsPage extends React.Component<Props, {}> {
     this.refreshActions()
     this.actions.getAdsData()
     this.actions.checkImported()
-    this.actions.getGrant()
+    this.actions.getGrants()
+    // Temporary (ryanml)
+    this.actions.onGrants([
+      {
+        promotionId: 'test-promo-id-1',
+        expiryTime: 0,
+        probi: '',
+        type: 'ugp'
+      },
+      {
+        promotionId: 'test-promo-id-2',
+        expiryTime: 0,
+        probi: '',
+        type: 'ads'
+      }
+    ])
 
     // one time check (legacy fix)
     // more info here https://github.com/brave/brave-browser/issues/2172
@@ -84,12 +99,34 @@ class SettingsPage extends React.Component<Props, {}> {
     }
   }
 
+  getGrantClaims = () => {
+    const { grants } = this.props.rewardsData
+
+    if (!grants) {
+      return null
+    }
+
+    return (
+      <>
+        {grants.map((grant?: Rewards.Grant) => {
+          if (!grant || !grant.promotionId) {
+            return null
+          }
+
+          return (
+            <Grant grant={grant} />
+          )
+        })}
+      </>
+    )
+  }
+
   componentWillUnmount () {
     clearInterval(this.balanceTimerId)
   }
 
   render () {
-    const { enabledMain, grant } = this.props.rewardsData
+    const { enabledMain } = this.props.rewardsData
 
     return (
       <Page>
@@ -106,9 +143,9 @@ class SettingsPage extends React.Component<Props, {}> {
           </Column>
           <Column size={1} customStyle={{ justifyContent: 'center', flexWrap: 'wrap' }}>
             {
-              enabledMain && grant && grant.promotionId
-                ? <Grant/>
-                : null
+              enabledMain
+              ? this.getGrantClaims()
+              : null
             }
             <PageWallet />
           </Column>

components/brave_rewards/resources/ui/constants/rewards_types.ts

@@ -9,8 +9,8 @@ export const enum types {
   ON_SETTING_SAVE = '@@rewards/ON_SETTING_SAVE',
   ON_WALLET_PROPERTIES = '@@rewards/ON_WALLET_PROPERTIES',
   GET_WALLET_PROPERTIES = '@@rewards/GET_WALLET_PROPERTIES',
-  GET_GRANT = '@@rewards/GET_GRANT',
-  ON_GRANT = '@@rewards/ON_GRANT',
+  GET_GRANTS = '@@rewards/GET_GRANTS',
+  ON_GRANTS = '@@rewards/ON_GRANTS',
   GET_GRANT_CAPTCHA = '@@rewards/GET_GRANT_CAPTCHA',
   ON_GRANT_CAPTCHA = '@@rewards/ON_GRANT_CAPTCHA',
   SOLVE_GRANT_CAPTCHA = '@@rewards/SOLVE_GRANT_CAPTCHA',

components/brave_rewards/resources/ui/reducers/grant_reducer.ts

@@ -5,32 +5,32 @@
 import { Reducer } from 'redux'
 
 // Constant
+// Temporary (ryanml)
 import { types } from '../constants/rewards_types'
 
 const grantReducer: Reducer<Rewards.State | undefined> = (state: Rewards.State, action) => {
   switch (action.type) {
-    case types.GET_GRANT:
-      chrome.send('brave_rewards.getGrant', [])
+    case types.GET_GRANTS:
+      // Temporary (ryanml)
+      // chrome.send('brave_rewards.getGrant', [])
       break
-    case types.ON_GRANT:
+    case types.ON_GRANTS:
       state = { ...state }
-      // TODO NZ check why enum can't be used inside Rewards namespace
-      if (action.payload.properties.status === 1) {
-        state.grant = undefined
+      const grants = action.payload.grants
+
+      if (!grants) {
         break
       }
 
-      state.grant = {
-        promotionId: action.payload.properties.promotionId,
-        expiryTime: 0,
-        probi: ''
-      }
+      state.grants = grants
       break
     case types.GET_GRANT_CAPTCHA:
       chrome.send('brave_rewards.getGrantCaptcha', [])
       break
     case types.ON_GRANT_CAPTCHA:
       {
+        // Temporary (ryanml)
+        /*
         if (state.grant) {
           let grant = state.grant
           const props = action.payload.captcha
@@ -43,6 +43,7 @@ const grantReducer: Reducer<Rewards.State | undefined> = (state: Rewards.State,
         }
 
         break
+        */
       }
     case types.SOLVE_GRANT_CAPTCHA:
       if (action.payload.x && action.payload.y) {
@@ -54,6 +55,8 @@ const grantReducer: Reducer<Rewards.State | undefined> = (state: Rewards.State,
       break
     case types.ON_GRANT_RESET:
       {
+        // Temporary (ryanml)
+        /*
         if (state.grant) {
           const grant: Rewards.Grant = {
             promotionId: state.grant.promotionId,
@@ -68,9 +71,12 @@ const grantReducer: Reducer<Rewards.State | undefined> = (state: Rewards.State,
         }
 
         break
+        */
       }
     case types.ON_GRANT_DELETE:
       {
+        // Temporary (ryanml)
+        /*
         if (state.grant) {
           delete state.grant
 
@@ -80,9 +86,12 @@ const grantReducer: Reducer<Rewards.State | undefined> = (state: Rewards.State,
         }
 
         break
+        */
       }
     case types.ON_GRANT_FINISH:
       {
+        // Temporary (ryanml)
+        /*
         state = { ...state }
         const properties: Rewards.Grant = action.payload.properties
         // TODO NZ check why enum can't be used inside Rewards namespace
@@ -149,6 +158,7 @@ const grantReducer: Reducer<Rewards.State | undefined> = (state: Rewards.State,
           }
         }
         break
+        */
       }
   }
 

components/brave_rewards/resources/ui/storage.ts

@@ -53,7 +53,8 @@ export const defaultState: Rewards.State = {
     adsPerHour: 0,
     adsUIEnabled: false
   },
-  pendingContributionTotal: 0
+  pendingContributionTotal: 0,
+  grants: []
 }
 
 const cleanData = (state: Rewards.State) => state

components/definitions/rewards.d.ts

@@ -42,7 +42,7 @@ declare namespace Rewards {
     enabledMain: boolean
     excluded: string[]
     firstLoad: boolean | null
-    grant?: Grant
+    grants?: Grant[]
     numExcludedSites: number
     pendingContributionTotal: number
     reconcileStamp: number
@@ -81,6 +81,7 @@ declare namespace Rewards {
     captcha?: string
     hint?: string
     status?: GrantStatus
+    type?: string
   }
 
   export interface WalletProperties {

components/resources/brave_components_strings.grd

@@ -316,6 +316,7 @@
       <message name="IDS_BRAVE_UI_DO_MONTHLY" desc="">Set monthly tip</message>
       <message name="IDS_BRAVE_UI_DOWNLOAD_PDF" desc="">Download as PDF</message>
       <message name="IDS_BRAVE_UI_EARNINGS_ADS" desc="">Earnings from Ads</message>
+      <message name="IDS_BRAVE_UI_EARNINGS_CLAIM_DEFAULT" desc="">Your Ads earnings are available.</message>
       <message name="IDS_BRAVE_UI_ENABLE_TIPS" desc="">Enable Tips</message>
       <message name="IDS_BRAVE_UI_EXCLUDE_SITE" desc="">Exclude this site</message>
       <message name="IDS_BRAVE_UI_EXCLUDED_SITES" desc="">Total number of sites you excluded from Auto-Contribute:</message>