Merge pull request #25757 from brave/ksmith-rewards-3-misc

[Rewards 3.0] Add miscellaneous messaging UI

browser/ui/webui/brave_rewards/rewards_page_data_source.cc

@@ -43,12 +43,15 @@ static constexpr webui::LocalizedString kStrings[] = {
     {"acSiteCountLabel", IDS_REWARDS_AC_SITE_COUNT_LABEL},
     {"acSiteLabel", IDS_REWARDS_AC_SITE_LABEL},
     {"acTitle", IDS_REWARDS_AC_TITLE},
+    {"adsBrowserUpgradeRequiredText",
+     IDS_REWARDS_ADS_BROWSER_UPGRADE_REQUIRED_TEXT},
     {"adsHistoryButtonLabel", IDS_REWARDS_ADS_HISTORY_BUTTON_LABEL},
     {"adsHistoryMarkInappropriateLabel",
      IDS_REWARDS_ADS_HISTORY_MARK_INAPPROPRIATE_LABEL},
     {"adsHistoryEmptyText", IDS_REWARDS_ADS_HISTORY_EMPTY_TEXT},
     {"adsHistoryTitle", IDS_REWARDS_ADS_HISTORY_TITLE},
     {"adsHistoryText", IDS_REWARDS_ADS_HISTORY_TEXT},
+    {"adsRegionNotSupportedText", IDS_REWARDS_ADS_REGION_NOT_SUPPORTED_TEXT},
     {"adsSettingsAdsPerHourNoneText",
      IDS_REWARDS_ADS_SETTINGS_ADS_PER_HOUR_NONE_TEXT},
     {"adsSettingsAdsPerHourText", IDS_REWARDS_ADS_SETTINGS_ADS_PER_HOUR_TEXT},
@@ -230,6 +233,11 @@ static constexpr webui::LocalizedString kStrings[] = {
     {"payoutAccountLoginText", IDS_REWARDS_PAYOUT_ACCOUNT_LOGIN_TEXT},
     {"payoutAccountTitle", IDS_REWARDS_PAYOUT_ACCOUNT_TITLE},
     {"payoutAccountTooltip", IDS_REWARDS_PAYOUT_ACCOUNT_TOOLTIP},
+    {"payoutCheckStatusLink", IDS_REWARDS_PAYMENT_CHECK_STATUS},
+    {"payoutCompletedText", IDS_REWARDS_PAYMENT_COMPLETED},
+    {"payoutPendingText", IDS_REWARDS_PAYMENT_PENDING},
+    {"payoutProcessingText", IDS_REWARDS_PAYMENT_PROCESSING},
+    {"payoutSupportLink", IDS_REWARDS_PAYMENT_SUPPORT},
     {"recurringListEmptyText", IDS_REWARDS_RECURRING_LIST_EMPTY_TEXT},
     {"recurringNextContributionLabel",
      IDS_REWARDS_RECURRING_NEXT_CONTRIBUTION_LABEL},
@@ -240,7 +248,14 @@ static constexpr webui::LocalizedString kStrings[] = {
     {"resetRewardsText", IDS_BRAVE_UI_REWARDS_RESET_TEXT},
     {"resetRewardsTitle", IDS_BRAVE_UI_RESET_WALLET},
     {"rewardsPageTitle", IDS_REWARDS_PAGE_TITLE},
-    {"showAllButtonLabel", IDS_REWARDS_SHOW_ALL_BUTTON_LABEL}};
+    {"selfCustodyInviteDismissButtonLabel", IDS_REWARDS_NOT_NOW},
+    {"selfCustodyInviteText", IDS_REWARDS_SELF_CUSTODY_INVITE_TEXT},
+    {"selfCustodyInviteTitle", IDS_REWARDS_SELF_CUSTODY_INVITE_HEADER},
+    {"showAllButtonLabel", IDS_REWARDS_SHOW_ALL_BUTTON_LABEL},
+    {"tosUpdateAcceptButtonLabel", IDS_REWARDS_TOS_UPDATE_BUTTON_LABEL},
+    {"tosUpdateLink", IDS_REWARDS_TOS_UPDATE_LINK_TEXT},
+    {"tosUpdateRequiredText", IDS_REWARDS_TOS_UPDATE_TEXT},
+    {"tosUpdateRequiredTitle", IDS_REWARDS_TOS_UPDATE_HEADING}};
 
 }  // namespace
 

browser/ui/webui/brave_rewards/rewards_page_handler.cc

@@ -18,6 +18,7 @@
 #include "brave/browser/brave_ads/ads_service_factory.h"
 #include "brave/browser/brave_rewards/rewards_service_factory.h"
 #include "brave/components/brave_ads/browser/ads_service.h"
+#include "brave/components/brave_ads/core/public/ads_util.h"
 #include "brave/components/brave_ads/core/public/history/ad_history_feature.h"
 #include "brave/components/brave_ads/core/public/history/ad_history_item_value_util.h"
 #include "brave/components/brave_ads/core/public/prefs/pref_names.h"
@@ -295,6 +296,29 @@ void RewardsPageHandler::GetAvailableBalance(
       base::BindOnce(fetch_balance_callback, std::move(callback)));
 }
 
+void RewardsPageHandler::GetTermsOfServiceUpdateRequired(
+    GetTermsOfServiceUpdateRequiredCallback callback) {
+  std::move(callback).Run(rewards_service_->IsTermsOfServiceUpdateRequired());
+}
+
+void RewardsPageHandler::AcceptTermsOfServiceUpdate(
+    AcceptTermsOfServiceUpdateCallback callback) {
+  rewards_service_->AcceptTermsOfServiceUpdate();
+  std::move(callback).Run();
+}
+
+void RewardsPageHandler::GetSelfCustodyInviteDismissed(
+    GetSelfCustodyInviteDismissedCallback callback) {
+  std::move(callback).Run(
+      prefs_->GetBoolean(prefs::kSelfCustodyInviteDismissed));
+}
+
+void RewardsPageHandler::DismissSelfCustodyInvite(
+    DismissSelfCustodyInviteCallback callback) {
+  prefs_->SetBoolean(prefs::kSelfCustodyInviteDismissed, true);
+  std::move(callback).Run();
+}
+
 void RewardsPageHandler::GetPublisherForActiveTab(
     GetPublisherForActiveTabCallback callback) {
   if (!bubble_delegate_) {
@@ -406,6 +430,9 @@ void RewardsPageHandler::RemoveAutoContributeSite(
 void RewardsPageHandler::GetAdsSettings(GetAdsSettingsCallback callback) {
   auto settings = mojom::AdsSettings::New();
 
+  settings->browser_upgrade_required =
+      ads_service_->IsBrowserUpgradeRequiredToServeAds();
+  settings->is_supported_region = brave_ads::IsSupportedRegion();
   settings->new_tab_page_ads_enabled =
       prefs_->GetBoolean(ntp_background_images::prefs::
                              kNewTabPageShowSponsoredImagesBackgroundImage);

browser/ui/webui/brave_rewards/rewards_page_handler.h

@@ -61,6 +61,14 @@ class RewardsPageHandler : public mojom::RewardsPageHandler {
   void GetExternalWalletProviders(
       GetExternalWalletProvidersCallback callback) override;
   void GetAvailableBalance(GetAvailableBalanceCallback callback) override;
+  void GetTermsOfServiceUpdateRequired(
+      GetTermsOfServiceUpdateRequiredCallback callback) override;
+  void AcceptTermsOfServiceUpdate(
+      AcceptTermsOfServiceUpdateCallback callback) override;
+  void GetSelfCustodyInviteDismissed(
+      GetSelfCustodyInviteDismissedCallback callback) override;
+  void DismissSelfCustodyInvite(
+      DismissSelfCustodyInviteCallback callback) override;
   void GetPublisherForActiveTab(
       GetPublisherForActiveTabCallback callback) override;
   void GetPublisherBannerForActiveTab(

components/brave_rewards/common/mojom/rewards_page.mojom

@@ -38,6 +38,8 @@ struct AdsSubdivision {
 };
 
 struct AdsSettings {
+  bool browser_upgrade_required;
+  bool is_supported_region;
   bool new_tab_page_ads_enabled;
   bool notification_ads_enabled;
   bool search_ads_enabled;
@@ -79,6 +81,19 @@ interface RewardsPageHandler {
   // Returns the user's available BAT balance.
   GetAvailableBalance() => (double? balance);
 
+  // Returns a value indicating whether a terms of service update has occurred.
+  GetTermsOfServiceUpdateRequired() => (bool update_required);
+
+  // Called when the user has accepted a terms of service update.
+  AcceptTermsOfServiceUpdate() => ();
+
+  // Returns a value indicating whether the user has dismissed the self-custody
+  // inviate UI.
+  GetSelfCustodyInviteDismissed() => (bool invite_dismissed);
+
+  // Called when the user dismisses the self-custody invite.
+  DismissSelfCustodyInvite() => ();
+
   // Returns data about the publisher associated with the active tab.
   GetPublisherForActiveTab() => (PublisherInfo? publisher_info);
 

components/brave_rewards/resources/rewards_page/components/app.tsx

@@ -19,6 +19,10 @@ import { ConnectAccount } from './connect_account'
 import { AuthorizationModal } from './authorization_modal'
 import { ContributeModal } from './contribute/contribute_modal'
 import { ResetModal } from './reset_modal'
+import { TosUpdateModal } from './tos_update_modal'
+import { SelfCustodyInviteModal } from './self_custody_invite_modal'
+import { useShouldShowSelfCustodyInvite } from '../lib/self_custody_invite'
+import { useConnectAccountRouter } from '../lib/connect_account_router'
 import * as routes from '../lib/app_routes'
 
 import { style } from './app.style'
@@ -27,10 +31,16 @@ export function App() {
   const model = React.useContext(AppModelContext)
   const eventHub = React.useContext(EventHubContext)
 
-  const [loading, embedder, paymentId] = useAppState((state) => [
+  const [
+    loading,
+    embedder,
+    paymentId,
+    tosUpdateRequired
+  ] = useAppState((state) => [
     state.loading,
     state.embedder,
-    state.paymentId
+    state.paymentId,
+    state.tosUpdateRequired
   ])
 
   const viewType = useBreakpoint()
@@ -47,6 +57,9 @@ export function App() {
     }
   })
 
+  const shouldShowSelfCustodyInvite = useShouldShowSelfCustodyInvite()
+  const connectAccount = useConnectAccountRouter()
+
   React.useEffect(() => {
     return eventHub.addListener('open-modal', (data) => {
       switch (data) {
@@ -114,6 +127,29 @@ export function App() {
       return <ContributeModal onClose={() => setShowContributeModal(false)} />
     }
 
+    if (tosUpdateRequired) {
+      return (
+        <TosUpdateModal
+          onAccept={() => model.acceptTermsOfServiceUpdate()}
+          onReset={() => setShowResetModal(true)}
+        />
+      )
+    }
+
+    if (shouldShowSelfCustodyInvite) {
+      return (
+        <SelfCustodyInviteModal
+          onDismiss={() => {
+            model.dismissSelfCustodyInvite()
+          }}
+          onConnect={() => {
+            model.dismissSelfCustodyInvite()
+            connectAccount()
+          }}
+        />
+      )
+    }
+
     return null
   }
 

components/brave_rewards/resources/rewards_page/components/connect_account.tsx

@@ -37,23 +37,22 @@ export function ConnectAccount() {
   const { getString } = useLocaleContext()
   const wrapCallback = useCallbackWrapper()
 
-  const [providers, setProviders] =
-    React.useState<ExternalWalletProvider[] | null>(null)
-
-  const [countryCode, regions, externalWallet] = useAppState((state) => [
+  const [
+    countryCode,
+    regions,
+    providers,
+    externalWallet
+  ] = useAppState((state) => [
     state.countryCode,
     state.rewardsParameters?.walletProviderRegions ?? null,
+    state.externalWalletProviders,
     state.externalWallet
   ])
 
   const [loadingState, setLoadingState] = React.useState<LoadingState>('')
   const [selectedProvider, setSelectedProvider] =
     React.useState<ExternalWalletProvider | null>(null)
 
-  React.useEffect(() => {
-    model.getExternalWalletProviders().then(wrapCallback(setProviders))
-  }, [model])
-
   React.useEffect(() => {
     // If the user has connected an external wallet but is not longer logged in,
     // then automatically start the login process.

components/brave_rewards/resources/rewards_page/components/home/earning_card.style.ts

@@ -106,4 +106,18 @@ export const style = scoped.css`
       padding: 4px 0;
     }
   }
+
+  .warning-box {
+    --leo-icon-size: 20px;
+    --leo-icon-color: ${color.systemfeedback.warningIcon};
+
+    color: ${color.systemfeedback.warningText};
+    background: ${color.systemfeedback.warningBackground};
+    padding: 16px;
+    border-radius: 12px;
+    font: ${font.default.regular};
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
 `

components/brave_rewards/resources/rewards_page/components/home/earning_card.tsx

@@ -10,24 +10,21 @@ import Tooltip from '@brave/leo/react/tooltip'
 
 import { formatMessage } from '../../../shared/lib/locale_context'
 import { formatEarningsEstimate, formatEarningsRange } from '../../lib/formatters'
-import { AppModelContext, useAppState } from '../../lib/app_model_context'
-import { RouterContext } from '../../lib/router'
+import { useAppState } from '../../lib/app_model_context'
 import { useLocaleContext, usePluralString } from '../../lib/locale_strings'
+import { useConnectAccountRouter } from '../../lib/connect_account_router'
+import { PayoutStatusView } from './payout_status_view'
 import { AdsSummary } from './ads_summary'
 import { AdsSettingsModal } from './ads_settings_modal'
 import { AdsHistoryModal } from './ads_history_modal'
 
-import * as routes from '../../lib/app_routes'
-import * as urls from '../../../shared/lib/rewards_urls'
-
 import batCoinGray from '../../assets/bat_coin_gray_animated.svg'
 import batCoinColor from '../../assets/bat_coin_color_animated.svg'
 
 import { style } from './earning_card.style'
 
 export function EarningCard() {
-  const model = React.useContext(AppModelContext)
-  const router = React.useContext(RouterContext)
+  const connectAccount = useConnectAccountRouter()
   const { getString } = useLocaleContext()
 
   const [externalWallet, adsInfo, isBubble] = useAppState((state) => [
@@ -56,14 +53,6 @@ export function EarningCard() {
     setShowAdsHistoryModal(!showAdsHistoryModal)
   }
 
-  function onConnect() {
-    if (isBubble) {
-      model.openTab(urls.connectURL)
-    } else {
-      router.setRoute(routes.connectAccount)
-    }
-  }
-
   function renderLimited() {
     return (
       <div className='content-card' {...style}>
@@ -92,7 +81,11 @@ export function EarningCard() {
               {getString('connectAccountSubtext')}
             </div>
           </div>
-          <Button className='connect-button' size='small' onClick={onConnect}>
+          <Button
+            className='connect-button'
+            size='small'
+            onClick={connectAccount}
+          >
             {getString('connectButtonLabel')}
           </Button>
         </section>
@@ -138,6 +131,25 @@ export function EarningCard() {
     if (!adsInfo) {
       return null
     }
+
+    if (!adsInfo.isSupportedRegion) {
+      return (
+        <div className='warning-box'>
+          <Icon name='warning-circle-filled' />
+          <div>{getString('adsRegionNotSupportedText')}</div>
+        </div>
+      )
+    }
+
+    if (adsInfo.browserUpgradeRequired) {
+      return (
+        <div className='warning-box'>
+          <Icon name='warning-circle-filled' />
+          <div>{getString('adsBrowserUpgradeRequiredText')}</div>
+        </div>
+      )
+    }
+
     return (
       <section className='ads-summary'>
         <button className='ads-summary-title' onClick={toggleAdDetails}>
@@ -175,6 +187,7 @@ export function EarningCard() {
 
   return <>
     <div className='content-card' {...style}>
+      <PayoutStatusView />
       <div className='counter'>
         <img alt='BAT' src={batCoinColor} />
         <div className='counter-text'>

components/brave_rewards/resources/rewards_page/components/home/payout_status_view.style.tsx

@@ -0,0 +1,27 @@
+/* Copyright (c) 2024 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import { color, font } from '@brave/leo/tokens/css/variables'
+import { scoped } from '../../lib/scoped_css'
+
+export const style = scoped.css`
+  & {
+    --leo-icon-size: 20px;
+    --leo-icon-color: ${color.systemfeedback.infoIcon};
+
+    color: ${color.systemfeedback.infoText};
+    background: ${color.systemfeedback.infoBackground};
+    padding: 16px;
+    border-radius: 12px;
+    font: ${font.default.regular};
+    display: flex;
+    gap: 16px;
+    align-items: center;
+
+    a {
+      color: inherit;
+    }
+  }
+`