Merge pull request #26751 from brave/ksmith-rewards-est-25

Replace estimated earnings in Rewards UI
brave · Nov 27, 2024 · 94e81ce · 94e81ce
2 parents 2ee7a3e + 09b3d47
commit 94e81ce
Show file tree

Hide file tree

Showing 16 changed files with 42 additions and 36 deletions.
diff --git 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
@@ -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
@@ -258,9 +258,11 @@ export function AdsPanel () {
               />
           }
         </style.paymentStatus>
-        <PanelItem label={getString('adsCurrentEarnings')}>
-          {renderEarnings()}
-        </PanelItem>
+        <style.earningsRow>
+          <PanelItem label={getString('adsCurrentEarnings')}>
+            {renderEarnings()}
+          </PanelItem>
+        </style.earningsRow>
         <PanelItem label={getString('adsPaymentDate')}>
           <MonthDay date={new Date(adsData.adsNextPaymentDate)} />
         </PanelItem>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 (
-      <>
+      <style.earnings>
         <style.earningsHeader>
           <style.earningsHeaderText>
             {getString('rewardsEarningsTitle')}
@@ -267,14 +267,10 @@ export function RewardsCard (props: Props) {
             {monthFormatter.format(new Date())}
           </style.earningsMonth>
           <div>
-            <EarningsRange
-              minimum={props.minEarningsThisMonth}
-              maximum={props.maxEarningsThisMonth}
-              minimumFractionDigits={3}
-            />
+            {props.adsReceivedThisMonth}
           </div>
         </style.earningsDisplay>
-      </>
+      </style.earnings>
     )
   }
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<number>
   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}
           />
         </style.statusIndicator>
-        <style.earnings>
+        <style.earnings className={props.adsReceivedThisMonth === undefined ? 'hidden' : ''}>
           <style.earningsHeader>
             <style.earningsHeaderTitle>
               {getString('walletEstimatedEarnings')}
@@ -171,22 +168,7 @@ export function WalletCard (props: Props) {
               {monthFormatter.format(new Date())}
             </style.earningsMonth>
             <style.earningsAmount>
-              {
-                props.externalWallet
-                  ? <EarningsRange
-                      minimum={props.minEarningsThisMonth}
-                      maximum={props.maxEarningsThisMonth}
-                      minimumFractionDigits={3}
-                    />
-                  : <style.hiddenEarnings>
-                      <style.hiddenEarningsValue>
-                        - -
-                      </style.hiddenEarningsValue>
-                      <NewTabLink href={urls.rewardsChangesURL}>
-                        {getString('rewardsLearnMore')}
-                      </NewTabLink>
-                    </style.hiddenEarnings>
-              }
+              {props.adsReceivedThisMonth}
             </style.earningsAmount>
           </style.earningsDisplay>
         </style.earnings>

diff --git a/components/resources/rewards_strings.grdp b/components/resources/rewards_strings.grdp
@@ -392,7 +392,7 @@
     Learn more
   </message>
   <message name="IDS_REWARDS_ESTIMATED_EARNINGS_TITLE" desc="">
-    Earnings so far
+    Ads seen this month
   </message>
   <message name="IDS_REWARDS_APP_ERROR_TITLE" desc="">
     Something went wrong