Update display of estimated pending rewards amounts

browser/extensions/api/brave_rewards_api.cc

@@ -1112,11 +1112,7 @@ void BraveRewardsGetAdsAccountStatementFunction::OnGetAdsAccountStatement(
     Respond(OneArgument(base::Value(success)));
   } else {
     base::Value statement(base::Value::Type::DICTIONARY);
-    statement.SetDoubleKey("estimatedPendingRewards",
-                           estimated_pending_rewards);
-    const std::string next_payment_date_as_string =
-        base::NumberToString(next_payment_date);
-    statement.SetStringKey("nextPaymentDate", next_payment_date_as_string);
+    statement.SetDoubleKey("nextPaymentDate", next_payment_date * 1000);
     statement.SetIntKey("adsReceivedThisMonth", ads_received_this_month);
     statement.SetDoubleKey("earningsThisMonth", earnings_this_month);
     statement.SetDoubleKey("earningsLastMonth", earnings_last_month);

browser/ui/webui/brave_rewards_page_ui.cc

@@ -1405,18 +1405,10 @@ void RewardsDOMHandler::OnGetStatement(const bool success,
 
   base::DictionaryValue history;
 
-  history.SetDouble("adsEstimatedPendingRewards",
-      estimated_pending_rewards);
-
-  if (next_payment_date == 0) {
-    history.SetString("adsNextPaymentDate", "");
-  } else {
-    base::Time time = base::Time::FromDoubleT(next_payment_date);
-    history.SetString("adsNextPaymentDate",
-        base::TimeFormatWithPattern(time, "MMMd"));
-  }
-
+  history.SetDouble("adsNextPaymentDate", next_payment_date * 1000);
   history.SetInteger("adsReceivedThisMonth", ads_received_this_month);
+  history.SetDouble("adsEarningsThisMonth", earnings_this_month);
+  history.SetDouble("adsEarningsLastMonth", earnings_last_month);
 
   CallJavascriptFunction("brave_rewards.statement", history);
 }

browser/ui/webui/brave_webui_source.cc

@@ -272,6 +272,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "editCardsTitle", IDS_EDIT_CARDS_TITLE },
         { "tosAndPp", IDS_REWARDS_WIDGET_TOS_AND_PP},     // NOLINT
         { "rewardsWidgetStartUsing", IDS_REWARDS_WIDGET_START_USING},     // NOLINT
+        { "pendingRewardsMessage", IDS_BRAVE_REWARDS_PENDING_REWARDS_MESSAGE },
         // Together Widget
         { "togetherWidgetTitle", IDS_TOGETHER_WIDGET_TITLE },
         { "togetherWidgetWelcomeTitle", IDS_TOGETHER_WIDGET_WELCOME_TITLE },
@@ -717,6 +718,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "optOutTooltip", IDS_BRAVE_UI_ADS_OPT_OUT_TOOLTIP },
         { "payment", IDS_BRAVE_UI_PAYMENT },
         { "paymentNotMade", IDS_BRAVE_UI_PAYMENT_NOT_MADE },
+        { "pendingRewardsMessage", IDS_BRAVE_REWARDS_PENDING_REWARDS_MESSAGE },
         { "pendingContributions", IDS_BRAVE_UI_PENDING_CONTRIBUTIONS },
         { "pendingContributionEmpty", IDS_BRAVE_UI_PENDING_CONTRIBUTION_EMPTY },
         { "pendingContributionRemoveAll", IDS_BRAVE_UI_PENDING_CONTRIBUTION_REMOVE_ALL },        // NOLINT

common/extensions/api/brave_rewards.json

@@ -1132,11 +1132,8 @@
                 "type": "object",
                 "optional": true,
                 "properties": {
-                  "estimatedPendingRewards": {
-                    "type": "number"
-                  },
                   "nextPaymentDate": {
-                    "type": "string"
+                    "type": "number"
                   },
                   "adsReceivedThisMonth": {
                     "type": "integer"

components/brave_new_tab_ui/components/default/rewards/index.tsx

@@ -8,6 +8,7 @@ import { convertBalance } from '../../../../brave_rewards/resources/page/utils'
 import { getLocale, splitStringForTag } from '../../../../common/locale'
 
 import {
+  ArrivingSoon,
   WidgetWrapper,
   WidgetLayer,
   NotificationsList,
@@ -34,6 +35,9 @@ import Notification from './notification'
 import BrandedWallpaperNotification from './brandedWallpaperNotification'
 import { BatColorIcon, CloseStrokeIcon } from 'brave-ui/components/icons'
 
+import { formatMessage } from '../../../../../components/brave_rewards/resources/shared/lib/locale_context'
+import { getDaysUntilRewardsPayment } from '../../../../../components/brave_rewards/resources/shared/lib/pending_rewards'
+
 export interface RewardsProps {
   enabledAds: boolean
   balance: NewTab.RewardsBalance
@@ -66,12 +70,13 @@ class Rewards extends React.PureComponent<RewardsProps, {}> {
 
     const rate = parameters.rate || 0.0
     const showEnableAds = !enabledAds && adsSupported
-    const amount = adsAccountStatement ? adsAccountStatement.estimatedPendingRewards : 0
+    const amount = adsAccountStatement ? adsAccountStatement.earningsThisMonth : 0
     const converted = convertBalance(amount, rate)
     const batFormatString = getLocale('rewardsWidgetBat')
 
     return (
       <AmountItem isActionPrompt={!!showEnableAds} isLast={false}>
+        {this.renderPendingRewardsNotice()}
         {
           adsSupported
           ? <div data-test-id={`widget-amount-total-ads`}>
@@ -80,14 +85,10 @@ class Rewards extends React.PureComponent<RewardsProps, {}> {
                 {batFormatString}<AmountUSD>{converted} USD</AmountUSD>
               </ConvertedAmount>
             </div>
-          : null
-        }
-        {
-          !adsSupported
-          ? <UnsupportedMessage>
+          :
+            <UnsupportedMessage>
               {getLocale('rewardsWidgetAdsNotSupported')}
             </UnsupportedMessage>
-          : null
         }
         <AmountDescription>
           {getLocale('rewardsWidgetEstimatedEarnings')}
@@ -149,6 +150,39 @@ class Rewards extends React.PureComponent<RewardsProps, {}> {
     )
   }
 
+  renderPendingRewardsNotice = () => {
+    if (!this.props.adsAccountStatement) {
+      return null
+    }
+
+    const {
+      nextPaymentDate,
+      earningsLastMonth
+    } = this.props.adsAccountStatement
+
+    if (earningsLastMonth <= 0) {
+      return null
+    }
+
+    const days = getDaysUntilRewardsPayment(nextPaymentDate)
+    if (!days) {
+      return null
+    }
+
+    return (
+      <ArrivingSoon>
+        {
+          formatMessage(getLocale('pendingRewardsMessage'), [
+            <span className='amount' key='amount'>
+              <strong>+{earningsLastMonth}</strong> BAT
+            </span>,
+            days
+          ])
+        }
+      </ArrivingSoon>
+    )
+  }
+
   renderRewardsInfo = () => {
     const {
       adsSupported,

components/brave_new_tab_ui/components/default/rewards/style.tsx

@@ -282,3 +282,13 @@ export const StyledTOS = styled(TOSAndPP as React.ComponentType<TOSProps>)`
 export const StyleCenter = styled('div')<{}>`
   text-align: center;
 `
+
+export const ArrivingSoon = styled.div`
+  background: ${p => p.theme.palette.white};
+  border-radius: 6px;
+  padding: 0 10px;
+  color: ${p => p.theme.palette.neutral900};
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 8px;
+`

components/brave_new_tab_ui/storage/new_tab_storage.ts

@@ -53,8 +53,7 @@ export const defaultState: NewTab.State = {
   togetherPromptDismissed: false,
   rewardsState: {
     adsAccountStatement: {
-      estimatedPendingRewards: 0,
-      nextPaymentDate: '',
+      nextPaymentDate: 0,
       adsReceivedThisMonth: 0,
       earningsThisMonth: 0,
       earningsLastMonth: 0
@@ -237,16 +236,22 @@ export const replaceStackWidgets = (state: NewTab.State) => {
 }
 
 const cleanData = (state: NewTab.State) => {
-  // We need to disable linter as we defined in d.ts that this values are number,
-  // but we need this check to covert from old version to a new one
-  /* tslint:disable */
-  if (typeof state.rewardsState.totalContribution === 'string') {
-    state.rewardsState.totalContribution = 0.0
+  const { rewardsState } = state
+
+  if (typeof (rewardsState.totalContribution as any) === 'string') {
+    rewardsState.totalContribution = 0
+  }
+
+  // nextPaymentDate updated from seconds-since-epoch-string to ms-since-epoch
+  const { adsAccountStatement } = rewardsState
+  if (adsAccountStatement &&
+      typeof (adsAccountStatement.nextPaymentDate as any) === 'string') {
+    adsAccountStatement.nextPaymentDate =
+      Number(adsAccountStatement.nextPaymentDate) * 1000 || 0
   }
-  /* tslint:enable */
 
-  if (!state.rewardsState.parameters) {
-    state.rewardsState.parameters = defaultState.rewardsState.parameters
+  if (!rewardsState.parameters) {
+    rewardsState.parameters = defaultState.rewardsState.parameters
   }
 
   return state

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

@@ -135,10 +135,7 @@ export const onPendingContributions = (list: Rewards.PendingContribution[]) =>
     list
   })
 
-export const onStatement = (data: {adsEstimatedPendingRewards: number, adsNextPaymentDate: string, adsReceivedThisMonth: number}) =>
-  action(types.ON_STATEMENT, {
-    data
-  })
+export const onStatement = (data: any) => action(types.ON_STATEMENT, { data })
 
 export const getStatement = () => action(types.GET_STATEMENT)
 

components/brave_rewards/resources/android_page/brave_rewards_page.tsx

@@ -14,6 +14,8 @@ import App from './components/app'
 require('../../../../ui/webui/resources/fonts/muli.css')
 require('../../../../ui/webui/resources/fonts/poppins.css')
 
+import { WithThemeVariables } from '../shared/components/with_theme_variables'
+
 // Utils
 import store from './store'
 import { ThemeProvider } from 'styled-components'
@@ -33,7 +35,9 @@ window.cr.define('brave_rewards', function () {
     render(
       <Provider store={store}>
         <ThemeProvider theme={Theme}>
-          <App />
+          <WithThemeVariables>
+            <App />
+          </WithThemeVariables>
         </ThemeProvider>
       </Provider>,
       document.getElementById('root'))
@@ -103,7 +107,7 @@ window.cr.define('brave_rewards', function () {
     }
   }
 
-  function statement (data: {adsEstimatedPendingRewards: number, adsNextPaymentDate: string, adsReceivedThisMonth: number}) {
+  function statement (data: any) {
     getActions().onStatement(data)
   }
 

components/brave_rewards/resources/android_page/components/adsBox.tsx

@@ -12,15 +12,25 @@ import { List, NextContribution, Tokens } from '../../ui/components'
 import { Grid, Column, Select, ControlWrapper } from 'brave-ui/components'
 import AdsOnboarding from './adsOnboarding'
 import {
+  StyledArrivingSoon,
   StyledListContent,
   StyledTotalContent
 } from './style'
 
+import { MoneyBagIcon } from '../../shared/components/icons/money_bag'
+import { formatMessage } from '../../shared/lib/locale_context'
+import { getDaysUntilRewardsPayment } from '../../shared/lib/pending_rewards'
+
 // Utils
 import { getLocale } from '../../../../common/locale'
 import * as rewardsActions from '../actions/rewards_actions'
 import * as utils from '../utils'
 
+const nextPaymentDateFormatter = new Intl.DateTimeFormat(undefined, {
+  month: 'short',
+  day: 'numeric'
+})
+
 interface Props extends Rewards.ComponentProps {
 }
 
@@ -179,9 +189,11 @@ class AdsBox extends React.Component<Props, {}> {
     let adsEnabled = false
     let adsUIEnabled = false
     let adsIsSupported = false
-    let estimatedPendingRewards = 0
-    let nextPaymentDate = ''
+    let nextPaymentDate = 0
     let adsReceivedThisMonth = 0
+    let earningsThisMonth = 0
+    let earningsLastMonth = 0
+
     const {
       adsData,
       safetyNetFailed,
@@ -192,9 +204,10 @@ class AdsBox extends React.Component<Props, {}> {
       adsEnabled = adsData.adsEnabled
       adsUIEnabled = adsData.adsUIEnabled
       adsIsSupported = adsData.adsIsSupported
-      estimatedPendingRewards = adsData.adsEstimatedPendingRewards || 0
       nextPaymentDate = adsData.adsNextPaymentDate
       adsReceivedThisMonth = adsData.adsReceivedThisMonth || 0
+      earningsThisMonth = adsData.adsEarningsThisMonth || 0
+      earningsLastMonth = adsData.adsEarningsLastMonth || 0
     }
 
     // disabled / alert state
@@ -222,6 +235,7 @@ class AdsBox extends React.Component<Props, {}> {
     }
 
     const tokenString = getLocale('tokens')
+    const estimatedPendingDays = getDaysUntilRewardsPayment(nextPaymentDate)
 
     return (
       <BoxMobile
@@ -231,18 +245,32 @@ class AdsBox extends React.Component<Props, {}> {
         settingsChild={this.adsSettings(adsEnabled)}
         {...boxPropsExtra}
       >
+        {
+          earningsLastMonth > 0 && estimatedPendingDays &&
+            <StyledArrivingSoon>
+              <MoneyBagIcon />
+              {
+                formatMessage(getLocale('pendingRewardsMessage'), [
+                  <span className='amount' key='amount'>
+                    +{earningsLastMonth} BAT
+                  </span>,
+                  estimatedPendingDays
+                ])
+              }
+            </StyledArrivingSoon>
+        }
         <List title={<StyledListContent>{getLocale('adsCurrentEarnings')}</StyledListContent>}>
           <StyledTotalContent>
             <Tokens
-              value={estimatedPendingRewards.toFixed(3)}
-              converted={utils.convertBalance(estimatedPendingRewards, parameters.rate)}
+              value={earningsThisMonth.toFixed(3)}
+              converted={utils.convertBalance(earningsThisMonth, parameters.rate)}
             />
           </StyledTotalContent>
         </List>
         <List title={<StyledListContent>{getLocale('adsPaymentDate')}</StyledListContent>}>
           <StyledListContent>
             <NextContribution>
-              {nextPaymentDate}
+              {nextPaymentDateFormatter.format(new Date(nextPaymentDate))}
             </NextContribution>
           </StyledListContent>
         </List>

components/brave_rewards/resources/android_page/components/style.ts

@@ -84,3 +84,29 @@ export const StyledWalletClose = styled('div')<{}>`
   color: ${p => p.theme.color.subtleExclude};
   width: 25px;
 `
+
+export const StyledArrivingSoon = styled.div`
+  background: rgba(93, 181, 252, 0.2);
+  margin-bottom: 8px;
+  padding: 4px;
+  color: var(--brave-palette-neutral700);
+  text-align: center;
+  font-size: 12px;
+  line-height: 22px;
+
+  span.amount {
+    color: var(--brave-palette-neutral900);
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 24px;
+  }
+
+  .icon {
+    height: 16px;
+    width: auto;
+    fill: var(--brave-palette-blue500);
+    vertical-align: middle;
+    margin-bottom: 3px;
+    margin-right: 8px;
+  }
+`

components/brave_rewards/resources/android_page/reducers/rewards_reducer.ts

@@ -179,9 +179,10 @@ const rewardsReducer: Reducer<Rewards.State | undefined> = (state: Rewards.State
       }
 
       const data = action.payload.data
-      state.adsData.adsEstimatedPendingRewards = data.adsEstimatedPendingRewards
       state.adsData.adsNextPaymentDate = data.adsNextPaymentDate
       state.adsData.adsReceivedThisMonth = data.adsReceivedThisMonth
+      state.adsData.adsEarningsThisMonth = data.adsEarningsThisMonth
+      state.adsData.adsEarningsLastMonth = data.adsEarningsLastMonth
       break
     }
     case types.ON_INLINE_TIP_SETTINGS_CHANGE: {