Fixes brave/brave-browser#5996 - Adds new Monthly Banner Variant to t…

…ip process

.storybook/locale.ts

@@ -76,13 +76,12 @@ const locale: Record<string, string> = {
   dndCaptchaText2: 'target',
   donation: 'Donation',
   donationAmount: 'Donation amount',
-  donateMonthly: 'Tip this site Monthly',
+  donateMonthly: 'Monthly Contribution',
   donateNow: 'Send a tip…',
   donationFailureMsg: 'Looks like something went wrong. Please try again later.',
   donationSent: 'Donation Sent!',
   donationTips: 'Donation & Tips',
   done: 'Done',
-  doMonthly: 'Set recurring donation',
   downloadPDF: 'Download as PDF',
   earningsAds: 'Earnings from Ads',
   earningsClaimBat: 'BAT,',
@@ -120,9 +119,11 @@ const locale: Record<string, string> = {
   monthNov: 'November',
   monthOct: 'October',
   monthSep: 'September',
+  monthlyContribution: 'Monthly Contribution',
   monthlyText: 'Monthly',
   monthlyTips: 'Monthly Tips!',
   newGrant: 'A free token grant is available.',
+  nextContribution: 'Next Contribution',
   noActivity: 'No activities yet…',
   noAdsHistory: 'There is currently no Brave Ads history',
   noGrants: 'Currently no token grant is available.',
@@ -179,6 +180,8 @@ const locale: Record<string, string> = {
   rewardsBackupText3: 'You can always use this key to get your wallet back if something happens to your browser or computer. But make sure to protect it — anyone who gets this key could steal your wallet. It\'s probably safest to write it down on a piece of paper, or wherever else you keep important info.',
   rewardsBannerText1: 'Thanks for stopping by. We joined Brave’s vision of protecting your privacy because we believe that fans like you would support us in our effort to keep the web a clean and safe place to be.',
   rewardsBannerText2: 'Your donation is much appreciated and it encourages us to continue to improve our content.',
+  rewardsBannerMonthlyText1: 'You can support this content creator by sending a tip. It\'s a way of thank them for making great content. Verified creators get paid for their tips during the first week of each calendar month.',
+  rewardsBannerMonthlyText2: 'If you like, you can schedule monthly tips to support this creator on a continuous basis.',
   rewardsContribute: 'Auto-Contribute',
   rewardsContributeAttention: 'Attention',
   rewardsContributeAttentionScore: 'Attention',
@@ -220,6 +223,8 @@ const locale: Record<string, string> = {
   serviceTextPanelWelcome: 'By clicking ‘Join Rewards’, you indicate that you have read and agree to the',
   serviceTextWelcome: 'By clicking ‘Yes, I\'m in!’, you indicate that you have read and agree to the',
   serviceTextReady: 'By clicking ‘Yes, I\'m Ready!’, you indicate that you have read and agree to the',
+  set: 'Set...',
+  setContribution: 'Set Contribution',
   settings: 'Settings',
   showAll: 'Show All',
   site: 'site',

browser/extensions/api/brave_rewards_api.cc

@@ -84,6 +84,7 @@ ExtensionFunction::ResponseAction BraveRewardsTipSiteFunction::Run() {
 
   auto params_dict = std::make_unique<base::DictionaryValue>();
   params_dict->SetString("publisherKey", params->publisher_key);
+  params_dict->SetBoolean("monthly", params->monthly);
   params_dict->SetString(
       "url", contents ? contents->GetLastCommittedURL().spec() : std::string());
   ::brave_rewards::OpenTipDialog(contents, std::move(params_dict));

browser/ui/webui/brave_webui_source.cc

@@ -651,9 +651,14 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "redditTipTitleEmpty", IDS_BRAVE_UI_REDDIT_TIP_TITLE_EMPTY },
         { "githubTipTitle", IDS_BRAVE_UI_GITHUB_TIP_TITLE },
         { "githubTipTitleEmpty", IDS_BRAVE_UI_GITHUB_TIP_TITLE_EMPTY },
+        { "monthlyContribution", IDS_BRAVE_UI_MONTHLY_CONTRIBUTION },
+        { "nextContribution", IDS_BRAVE_UI_NEXT_CONTRIBUTION },
         { "rewardsBannerText1", IDS_BRAVE_UI_REWARDS_BANNER_TEXT1 },
         { "rewardsBannerText2", IDS_BRAVE_UI_REWARDS_BANNER_TEXT2 },
+        { "rewardsBannerMonthlyText1", IDS_BRAVE_UI_REWARDS_BANNER_TEXT1 },
+        { "rewardsBannerMonthlyText2", IDS_BRAVE_UI_REWARDS_BANNER_TEXT2 },
         { "sendDonation", IDS_BRAVE_UI_SEND_DONATION },
+        { "setContribution", IDS_BRAVE_UI_SET_CONTRIBUTION },
         { "siteBannerNoticeNote", IDS_BRAVE_UI_SITE_BANNER_NOTICE_NOTE },
         { "siteBannerNoticeText", IDS_BRAVE_UI_SITE_BANNER_NOTICE_TEXT },
         { "siteBannerConnectedText", IDS_BRAVE_UI_SITE_BANNER_CONNECTED_TEXT },

common/extensions/api/brave_rewards.json

@@ -397,6 +397,10 @@
           {
             "name": "publisherKey",
             "type": "string"
+          },
+          {
+            "name": "monthly",
+            "type": "boolean"
           }
         ]
       },

components/brave_rewards/browser/rewards_service_browsertest.cc

@@ -802,9 +802,14 @@ class BraveRewardsBrowserTest :
         content::NOTIFICATION_LOAD_COMPLETED_MAIN_FRAME,
         content::NotificationService::AllSources());
 
+    const std::string buttonSelector = monthly
+        ? "[type='monthly-tip']"
+        : "[type='tip']";
+
     // Click button to initiate sending a tip
     content::EvalJsResult js_result = EvalJs(
       popup_contents,
+      content::JsReplace(
       "new Promise((resolve) => {"
       "let count = 10;"
       "var interval = setInterval(function() {"
@@ -814,13 +819,14 @@ class BraveRewardsBrowserTest :
       "  } else {"
       "    count -= 1;"
       "  }"
-      "  const tipButton = document.querySelector(\"[type='tip']\");"
+      "  const tipButton = document.querySelector($1);"
       "  if (tipButton) {"
       "    clearInterval(interval);"
       "    tipButton.click();"
       "    resolve(true);"
       "  }"
       "}, 500);});",
+      buttonSelector),
       content::EXECUTE_SCRIPT_DEFAULT_OPTIONS,
       content::ISOLATED_WORLD_ID_CONTENT_END);
 
@@ -850,18 +856,6 @@ class BraveRewardsBrowserTest :
         content::EXECUTE_SCRIPT_DEFAULT_OPTIONS,
         content::ISOLATED_WORLD_ID_CONTENT_END));
 
-    // Make this tip monthly, if requested
-    if (monthly) {
-      ASSERT_TRUE(ExecJs(
-          site_banner_contents,
-          "const delay = t => new Promise(resolve => setTimeout(resolve, t));"
-          "delay(0).then(() => "
-          "  document.querySelector(\"[data-test-id='monthlyCheckbox']\")"
-          "    .children[0].click());",
-          content::EXECUTE_SCRIPT_DEFAULT_OPTIONS,
-          content::ISOLATED_WORLD_ID_CONTENT_END));
-    }
-
     // Send the tip
     ASSERT_TRUE(ExecJs(
         site_banner_contents,

components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json

@@ -56,7 +56,7 @@
     "description": "Label for auto contribute table attention for the publisher"
   },
   "donateMonthly": {
-    "message": "Tip this site monthly",
+    "message": "Monthly Contribution",
     "description": "Label for drop down menu where user select amount for monthly contribution for particular publisher"
   },
   "includeInAuto": {
@@ -528,5 +528,9 @@
   "walletGoToVerifyPage":  {
     "message": "Complete wallet verification",
     "description": "CTA for completing wallet verification"
+  },
+  "set": {
+    "message": "Set...",
+    "description": "Button text for setting monthly contribution"
   }
 }

components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts

@@ -89,6 +89,7 @@ export const getUIMessages = (): Record<string, string> => {
     'rewardsSummary',
     'serviceText',
     'serviceTextPanelWelcome',
+    'set',
     'termsOfService',
     'tipsProcessedNotification',
     'tokenGrant',

components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx

@@ -238,7 +238,7 @@ export class Panel extends React.Component<Props, State> {
     }
   }
 
-  showTipSiteDetail = () => {
+  showTipSiteDetail = (monthly: boolean) => {
     const publisher: RewardsExtension.Publisher | undefined = this.getPublisher()
     // TODO: why do we store windowId instead of active tab id in state?
     chrome.tabs.query({
@@ -253,7 +253,7 @@ export class Panel extends React.Component<Props, State> {
         return
       }
 
-      chrome.braveRewards.tipSite(tabId, publisher.publisher_key)
+      chrome.braveRewards.tipSite(tabId, publisher.publisher_key, monthly)
       window.close()
     })
   }
@@ -691,7 +691,7 @@ export class Panel extends React.Component<Props, State> {
               includeInAuto={!publisher.excluded}
               attentionScore={(publisher.percentage || 0).toString()}
               onToggleTips={this.doNothing}
-              donationAction={this.showTipSiteDetail}
+              donationAction={this.showTipSiteDetail.bind(this, false)}
               onAmountChange={this.onContributionAmountChange}
               onIncludeInAuto={this.switchAutoContribute}
               showUnVerified={this.shouldShowConnectedMessage()}
@@ -701,6 +701,7 @@ export class Panel extends React.Component<Props, State> {
               onRefreshPublisher={this.refreshPublisher}
               refreshingPublisher={this.state.refreshingPublisher}
               publisherRefreshed={this.state.publisherRefreshed}
+              setMonthlyAction={this.showTipSiteDetail.bind(this, true)}
             />
             : null
           }

components/brave_rewards/resources/tip/components/app.tsx

@@ -15,6 +15,7 @@ import * as rewardsActions from '../actions/tip_actions'
 
 interface TipDialogArgs {
   url: string
+  monthly: boolean
   publisherKey: string
   mediaMetaData?: RewardsTip.MediaMetaData
 }
@@ -28,18 +29,20 @@ export class App extends React.Component<Props, {}> {
     return this.props.actions
   }
 
-  getTipBanner = (url: string, publisher: RewardsTip.Publisher, mediaMetaData: RewardsTip.MediaMetaData | undefined) => {
+  getTipBanner = (url: string, monthly: boolean, publisher: RewardsTip.Publisher, mediaMetaData: RewardsTip.MediaMetaData | undefined) => {
     if (!mediaMetaData) {
       return (
         <TipSite
           url={url}
+          monthly={monthly}
           publisher={publisher}
         />
       )
     } else {
       return (
         <TipMediaUser
           url={url}
+          monthly={monthly}
           publisher={publisher}
           mediaMetaData={mediaMetaData}
         />
@@ -55,6 +58,7 @@ export class App extends React.Component<Props, {}> {
     }
 
     const url = this.props.dialogArgs.url
+    const monthly = this.props.dialogArgs.monthly
     const mediaMetaData = this.props.dialogArgs.mediaMetaData
     const publisherKey = this.props.dialogArgs.publisherKey
     const publisher = publishers[publisherKey]
@@ -65,7 +69,7 @@ export class App extends React.Component<Props, {}> {
 
     return (
       <div>
-        {this.getTipBanner(url, publisher, mediaMetaData)}
+        {this.getTipBanner(url, monthly, publisher, mediaMetaData)}
       </div>
     )
   }

components/brave_rewards/resources/tip/components/siteBanner.tsx

@@ -15,6 +15,7 @@ import * as tipActions from '../actions/tip_actions'
 import * as utils from '../utils'
 
 interface Props extends RewardsTip.ComponentProps {
+  monthly: boolean
   publisher: RewardsTip.Publisher
   mediaMetaData?: RewardsTip.MediaMetaData
 }
@@ -106,20 +107,6 @@ class Banner extends React.Component<Props, State> {
     return result
   }
 
-  hasRecurringTip = (publisherKey?: string) => {
-    const { recurringDonations } = this.props.rewardsDonateData
-
-    if (!publisherKey || !recurringDonations) {
-      return false
-    }
-
-    const recurringDonation = recurringDonations.find((donation: RewardsTip.RecurringTips) => {
-      return donation.publisherKey === publisherKey
-    })
-
-    return !!recurringDonation
-  }
-
   getScreenName = (mediaMetaData?: RewardsTip.MediaMetaData) => {
     if (!mediaMetaData) {
       return ''
@@ -179,6 +166,22 @@ class Banner extends React.Component<Props, State> {
       />)
   }
 
+  getNextContribution = () => {
+    const { reconcileStamp } = this.props.rewardsDonateData
+
+    if (!reconcileStamp) {
+      return undefined
+    }
+
+    const fmtArgs = {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    }
+
+    return new Intl.DateTimeFormat('default', fmtArgs).format(reconcileStamp * 1000)
+  }
+
   render () {
     const { balance } = this.props.rewardsDonateData
     const { total } = balance
@@ -188,6 +191,7 @@ class Banner extends React.Component<Props, State> {
     const checkmark = utils.isPublisherConnectedOrVerified(publisher.status)
     const verified = utils.isPublisherVerified(publisher.status)
     const connected = utils.isPublisherConnected(publisher.status)
+    const bannerType = this.props.monthly ? 'monthly' : 'one-time'
     let logo = publisher.logo
 
     const internalFavicon = /^https:\/\/[a-z0-9-]+\.invalid(\/)?$/
@@ -200,12 +204,12 @@ class Banner extends React.Component<Props, State> {
     }
     return (
       <SiteBanner
+        type={bannerType}
         domain={publisher.publisherKey}
         title={publisher.title}
         name={publisher.name}
         screenName={this.getScreenName(mediaMetaData)}
         provider={publisher.provider as Provider}
-        recurringDonation={this.hasRecurringTip(publisher.publisherKey)}
         balance={total.toString() || '0'}
         bgImage={publisher.background}
         logo={logo}
@@ -220,6 +224,7 @@ class Banner extends React.Component<Props, State> {
         isVerified={checkmark}
         learnMoreNotice={'https://brave.com/faq/#unclaimed-funds'}
         addFundsLink={this.addFundsLink}
+        nextContribution={this.getNextContribution()}
       >
       {
         mediaMetaData

components/brave_rewards/resources/tip/components/tipMediaUser.tsx

@@ -16,6 +16,7 @@ import { getLocale } from '../../../../common/locale'
 
 interface Props extends RewardsTip.ComponentProps {
   url: string
+  monthly: boolean
   publisher: RewardsTip.Publisher
   mediaMetaData: RewardsTip.MediaMetaData
 }
@@ -50,6 +51,7 @@ class TipMediaUser extends React.Component<Props, {}> {
     const { finished, error } = this.props.rewardsDonateData
 
     const publisher = this.props.publisher
+    const monthly = this.props.monthly
     const mediaMetaData = this.props.mediaMetaData
     if (!mediaMetaData) {
       return
@@ -78,7 +80,11 @@ class TipMediaUser extends React.Component<Props, {}> {
       <>
         {
           !finished && !error
-          ? <Banner publisher={publisher} mediaMetaData={mediaMetaData} />
+          ? <Banner
+              monthly={monthly}
+              publisher={publisher}
+              mediaMetaData={mediaMetaData}
+          />
           : null
         }
         {

components/brave_rewards/resources/tip/components/tipSite.tsx

@@ -15,6 +15,7 @@ import * as rewardsActions from '../actions/tip_actions'
 
 interface Props extends RewardsTip.ComponentProps {
   url: string
+  monthly: boolean
   publisher: RewardsTip.Publisher
 }
 
@@ -43,7 +44,10 @@ class TipSite extends React.Component<Props, {}> {
       <>
         {
           !finished && !error
-          ? <Banner publisher={this.props.publisher} />
+          ? <Banner
+              monthly={this.props.monthly}
+              publisher={this.props.publisher}
+          />
           : null
         }
         {

components/brave_rewards/resources/ui/components/categoryLikePicker/__snapshots__/spec.tsx.snap

@@ -24,22 +24,22 @@ Array [
     className="sc-bwzfXH kfvjYX"
   >
     <div
-      className="sc-bWkBrx BDgzH"
+      className="sc-fVHxE bWTied"
     >
       <div
-        className="sc-cxZfpC ldVFwd"
+        className="sc-jvjHmY jHDitz"
       >
         <div
-          className="sc-fVHxE hcDWyc"
+          className="sc-jTqLGJ hnqORU"
         />
         <div
-          className="sc-jIyBzM irrUSQ"
+          className="sc-dtmqqe dVGzWj"
         >
           MISSING: optOutTooltip
         </div>
       </div>
       <div
-        className="sc-jvjHmY TCaxu"
+        className="sc-wRHdD eehWfH"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >