diff --git a/components/brave_new_tab_ui/components/default/rewards/index.tsx b/components/brave_new_tab_ui/components/default/rewards/index.tsx index 2cbbb6c2d146..d0f528c5a8d2 100644 --- a/components/brave_new_tab_ui/components/default/rewards/index.tsx +++ b/components/brave_new_tab_ui/components/default/rewards/index.tsx @@ -115,6 +115,7 @@ export const RewardsWidget = createWidget((props: RewardsProps) => { providerPayoutStatus={providerPayoutStatus()} externalWallet={externalWallet} nextPaymentDate={adsInfo ? adsInfo.nextPaymentDate : 0} + adsReceivedThisMonth={adsInfo ? adsInfo.adsReceivedThisMonth : 0} minEarningsThisMonth={adsInfo ? adsInfo.minEarningsThisMonth : 0} maxEarningsThisMonth={adsInfo ? adsInfo.maxEarningsThisMonth : 0} minEarningsLastMonth={adsInfo ? adsInfo.minEarningsLastMonth : 0} diff --git a/components/brave_rewards/resources/page/components/ads_panel.style.ts b/components/brave_rewards/resources/page/components/ads_panel.style.ts index e99f0f5c668f..7cee2266d7c6 100644 --- a/components/brave_rewards/resources/page/components/ads_panel.style.ts +++ b/components/brave_rewards/resources/page/components/ads_panel.style.ts @@ -73,6 +73,10 @@ export const paymentStatus = styled.div` } ` +export const earningsRow = styled.div` + display: none; +` + export const earnings = styled.span` color: #495057; ` diff --git a/components/brave_rewards/resources/page/components/ads_panel.tsx b/components/brave_rewards/resources/page/components/ads_panel.tsx index 275d740566d1..dba12d7cacb6 100644 --- a/components/brave_rewards/resources/page/components/ads_panel.tsx +++ b/components/brave_rewards/resources/page/components/ads_panel.tsx @@ -258,9 +258,11 @@ export function AdsPanel () { /> } - - {renderEarnings()} - + + + {renderEarnings()} + + diff --git a/components/brave_rewards/resources/rewards_panel/components/panel.tsx b/components/brave_rewards/resources/rewards_panel/components/panel.tsx index 5ae797d9e1b4..e6fcb59e74c9 100644 --- a/components/brave_rewards/resources/rewards_panel/components/panel.tsx +++ b/components/brave_rewards/resources/rewards_panel/components/panel.tsx @@ -125,6 +125,7 @@ export function Panel () { balance={balance} externalWallet={externalWallet} providerPayoutStatus={providerPayoutStatus} + adsReceivedThisMonth={earningsInfo.adsReceivedThisMonth} minEarningsThisMonth={earningsInfo.minEarningsThisMonth} maxEarningsThisMonth={earningsInfo.maxEarningsThisMonth} minEarningsLastMonth={earningsInfo.minEarningsLastMonth} diff --git a/components/brave_rewards/resources/rewards_panel/lib/extension_api_adapter.ts b/components/brave_rewards/resources/rewards_panel/lib/extension_api_adapter.ts index 3977baac2a46..f51db713e732 100644 --- a/components/brave_rewards/resources/rewards_panel/lib/extension_api_adapter.ts +++ b/components/brave_rewards/resources/rewards_panel/lib/extension_api_adapter.ts @@ -42,6 +42,7 @@ export function getEarningsInfo () { chrome.braveRewards.getAdsAccountStatement((success, statement) => { if (success) { resolve({ + adsReceivedThisMonth: statement.adsReceivedThisMonth, minEarningsLastMonth: statement.minEarningsLastMonth, maxEarningsLastMonth: statement.maxEarningsLastMonth, minEarningsThisMonth: statement.minEarningsThisMonth, diff --git a/components/brave_rewards/resources/rewards_panel/lib/initial_state.ts b/components/brave_rewards/resources/rewards_panel/lib/initial_state.ts index 26c3af0fb934..24bb8adc4d84 100644 --- a/components/brave_rewards/resources/rewards_panel/lib/initial_state.ts +++ b/components/brave_rewards/resources/rewards_panel/lib/initial_state.ts @@ -25,6 +25,7 @@ export function getInitialState (): HostState { }, earningsInfo: { nextPaymentDate: 0, + adsReceivedThisMonth: 0, minEarningsThisMonth: 0, maxEarningsThisMonth: 0, minEarningsLastMonth: 0, diff --git a/components/brave_rewards/resources/rewards_panel/lib/interfaces.ts b/components/brave_rewards/resources/rewards_panel/lib/interfaces.ts index c146146f8eb7..f4dc3c22aef8 100644 --- a/components/brave_rewards/resources/rewards_panel/lib/interfaces.ts +++ b/components/brave_rewards/resources/rewards_panel/lib/interfaces.ts @@ -24,6 +24,7 @@ export interface ExchangeInfo { export interface EarningsInfo { nextPaymentDate: number + adsReceivedThisMonth: number minEarningsThisMonth: number maxEarningsThisMonth: number minEarningsLastMonth: number diff --git a/components/brave_rewards/resources/rewards_panel/stories/index.tsx b/components/brave_rewards/resources/rewards_panel/stories/index.tsx index 7f24fd3bec56..f887dc231edf 100644 --- a/components/brave_rewards/resources/rewards_panel/stories/index.tsx +++ b/components/brave_rewards/resources/rewards_panel/stories/index.tsx @@ -52,6 +52,7 @@ function createHost(): Host { currency: 'USD' }, earningsInfo: { + adsReceivedThisMonth: 0, minEarningsThisMonth: 1.2, maxEarningsThisMonth: 2.1, minEarningsLastMonth: 2.0, diff --git a/components/brave_rewards/resources/shared/components/newtab/rewards_card.style.ts b/components/brave_rewards/resources/shared/components/newtab/rewards_card.style.ts index a28977a57996..37b5a6e36bdb 100644 --- a/components/brave_rewards/resources/shared/components/newtab/rewards_card.style.ts +++ b/components/brave_rewards/resources/shared/components/newtab/rewards_card.style.ts @@ -191,8 +191,14 @@ export const needsBrowserUpdateContentBody = styled.div` font-weight: 400; ` -export const earningsHeader = styled.div` +export const earnings = styled.div` margin: 24px 0 8px; + display: flex; + justify-content: space-between; + align-items: center; +` + +export const earningsHeader = styled.div` display: flex; align-items: center; gap: 5px; @@ -204,6 +210,7 @@ export const earningsHeaderText = styled.div` export const earningsInfo = styled.span` position: relative; + display: none; .icon { height: 12px; @@ -284,6 +291,7 @@ export const earningsDisplay = styled.div` ` export const earningsMonth = styled.div` + display: none; padding: 5px 6px; font: ${font.components.label}; background: rgba(255, 255, 255, 0.10); diff --git a/components/brave_rewards/resources/shared/components/newtab/rewards_card.tsx b/components/brave_rewards/resources/shared/components/newtab/rewards_card.tsx index 37220e518aed..d71d520c0370 100644 --- a/components/brave_rewards/resources/shared/components/newtab/rewards_card.tsx +++ b/components/brave_rewards/resources/shared/components/newtab/rewards_card.tsx @@ -17,7 +17,6 @@ import { BatIcon } from '../icons/bat_icon' import { OptInIcon } from '../icons/optin_icon' import { InfoIcon } from './icons/info_icon' import { CaretIcon } from '../icons/caret_icon' -import { EarningsRange } from '../earnings_range' import { TokenAmount } from '../token_amount' import { ExchangeAmount } from '../exchange_amount' import { NewTabLink } from '../new_tab_link' @@ -66,6 +65,7 @@ interface Props { exchangeCurrency: string providerPayoutStatus: ProviderPayoutStatus nextPaymentDate: number + adsReceivedThisMonth: number minEarningsThisMonth: number maxEarningsThisMonth: number minEarningsLastMonth: number @@ -242,7 +242,7 @@ export function RewardsCard (props: Props) { function renderEarnings () { return ( - <> + {getString('rewardsEarningsTitle')} @@ -267,14 +267,10 @@ export function RewardsCard (props: Props) { {monthFormatter.format(new Date())}
- + {props.adsReceivedThisMonth}
- +
) } diff --git a/components/brave_rewards/resources/shared/components/newtab/stories/index.tsx b/components/brave_rewards/resources/shared/components/newtab/stories/index.tsx index 3c11cf3c2f31..4476bc3d2d1b 100644 --- a/components/brave_rewards/resources/shared/components/newtab/stories/index.tsx +++ b/components/brave_rewards/resources/shared/components/newtab/stories/index.tsx @@ -61,6 +61,7 @@ export function Card () { url: '' }} nextPaymentDate={nextPaymentDate} + adsReceivedThisMonth={2} minEarningsThisMonth={0.142} maxEarningsThisMonth={1.142} minEarningsLastMonth={1.00} diff --git a/components/brave_rewards/resources/shared/components/newtab/stories/locale_strings.ts b/components/brave_rewards/resources/shared/components/newtab/stories/locale_strings.ts index 6de2245879c1..157279ff31aa 100644 --- a/components/brave_rewards/resources/shared/components/newtab/stories/locale_strings.ts +++ b/components/brave_rewards/resources/shared/components/newtab/stories/locale_strings.ts @@ -11,7 +11,7 @@ export const localeStrings = { rewardsConnectAccount: 'Connect account', rewardsConnectAccountText: '$1Ready to start earning?$2 Connect an account so we have a place to send your earnings.', rewardsContinue: 'Continue', - rewardsEarningsTitle: 'Earnings so far', + rewardsEarningsTitle: 'Ads seen this month', rewardsEarningInfoText: 'This reflects your estimated earnings range for Brave Ads this month.', rewardsHowDoesItWork: 'How does it work?', rewardsLearnMore: 'Learn more', diff --git a/components/brave_rewards/resources/shared/components/wallet_card/stories/locale_strings.ts b/components/brave_rewards/resources/shared/components/wallet_card/stories/locale_strings.ts index af8b38c867de..193aabe26358 100644 --- a/components/brave_rewards/resources/shared/components/wallet_card/stories/locale_strings.ts +++ b/components/brave_rewards/resources/shared/components/wallet_card/stories/locale_strings.ts @@ -15,7 +15,7 @@ export const localeStrings = { walletAutoContribute: 'Auto-Contribute', walletBalanceTitle: 'Balance', walletDisconnected: 'Logged out', - walletEstimatedEarnings: 'Earnings so far', + walletEstimatedEarnings: 'Ads seen this month', walletEarningInfoText: 'This reflects your estimated earnings range for Brave Ads this month.', walletLogIntoYourAccount: 'Log in to your $1 account', walletManageAds: 'Manage ads', diff --git a/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.style.ts b/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.style.ts index 67cab14048a1..c15f16678d5e 100644 --- a/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.style.ts +++ b/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.style.ts @@ -26,6 +26,10 @@ export const statusIndicator = styled.div` export const earnings = styled.div` font-size: 11px; line-height: 16px; + + &.hidden { + visibility: hidden; + } ` export const earningsHeader = styled.div` @@ -39,6 +43,7 @@ export const earningsHeaderTitle = styled.div` export const earningsInfo = styled.div` position: relative; + display: none; leo-icon { opacity: 0.65; @@ -116,10 +121,12 @@ export const earningsDisplay = styled.div` margin-top: 4px; display: flex; align-items: center; + justify-content: end; gap: 4px; ` export const earningsMonth = styled.div` + display: none; padding: 2px 4px; background: rgba(255, 255, 255, 0.15); border-radius: 4px; diff --git a/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.tsx b/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.tsx index 62e02227b239..cefae2bd8e89 100644 --- a/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.tsx +++ b/components/brave_rewards/resources/shared/components/wallet_card/wallet_card.tsx @@ -22,8 +22,6 @@ import { Optional } from '../../../shared/lib/optional' import { useCounterAnimation } from './counter_animation' import { TokenAmount } from '../token_amount' import { ExchangeAmount } from '../exchange_amount' -import { EarningsRange } from '../earnings_range' -import { NewTabLink } from '../new_tab_link' import { ExternalWalletView } from './external_wallet_view' import { ExternalWalletAction } from './external_wallet_action' import { RewardsSummary, RewardsSummaryData } from './rewards_summary' @@ -32,8 +30,6 @@ import { ArrowCircleIcon } from '../icons/arrow_circle_icon' import { LoadingIcon } from '../../../shared/components/icons/loading_icon' import { CaretIcon } from '../icons/caret_icon' -import * as urls from '../../lib/rewards_urls' - import * as style from './wallet_card.style' const monthFormatter = new Intl.DateTimeFormat(undefined, { @@ -49,6 +45,7 @@ interface Props { balance: Optional externalWallet: ExternalWallet | null providerPayoutStatus: ProviderPayoutStatus + adsReceivedThisMonth?: number minEarningsThisMonth: number maxEarningsThisMonth: number minEarningsLastMonth: number @@ -143,7 +140,7 @@ export function WalletCard (props: Props) { onExternalWalletAction={props.onExternalWalletAction} /> - + {getString('walletEstimatedEarnings')} @@ -171,22 +168,7 @@ export function WalletCard (props: Props) { {monthFormatter.format(new Date())} - { - props.externalWallet - ? - : - - - - - - - {getString('rewardsLearnMore')} - - - } + {props.adsReceivedThisMonth} diff --git a/components/resources/rewards_strings.grdp b/components/resources/rewards_strings.grdp index d0a6772189c5..0b639a89598a 100644 --- a/components/resources/rewards_strings.grdp +++ b/components/resources/rewards_strings.grdp @@ -392,7 +392,7 @@ Learn more - Earnings so far + Ads seen this month Something went wrong