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

…ip process

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

@@ -656,9 +656,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

@@ -804,9 +804,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() {"
@@ -816,13 +821,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);
 
@@ -852,18 +858,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

@@ -237,7 +237,7 @@ export class Panel extends React.Component<Props, State> {
     }
   }
 
-  showTipSiteDetail = () => {
+  showTipSiteDetail = (monthly = false) => {
     const publisher: RewardsExtension.Publisher | undefined = this.getPublisher()
     // TODO: why do we store windowId instead of active tab id in state?
     chrome.tabs.query({
@@ -252,7 +252,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()
     })
   }
@@ -664,6 +664,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/definitions/chromel.d.ts

@@ -60,7 +60,7 @@ declare namespace chrome.settingsPrivate {
 
 declare namespace chrome.braveRewards {
   const createWallet: () => {}
-  const tipSite: (tabId: number, publisherKey: string) => {}
+  const tipSite: (tabId: number, publisherKey: string, monthly: boolean) => {}
   const tipTwitterUser: (tabId: number, mediaMetaData: RewardsTip.MediaMetaData) => {}
   const tipRedditUser: (tabId: number, mediaMetaData: RewardsTip.MediaMetaData) => {}
   const tipGitHubUser: (tabId: number, githubMetaData: RewardsTip.MediaMetaData) => {}

components/resources/brave_components_strings.grd

@@ -351,6 +351,7 @@
       <message name="IDS_BRAVE_UI_SERVICE_TEXT_TOGGLE" desc="">By turning on Brave Rewards, you indicate that you have read and agree to the</message>
       <message name="IDS_BRAVE_UI_SERVICE_TEXT_WELCOME" desc="">By clicking ‘Yes, I'm in!’, you indicate that you have read and agree to the</message>
       <message name="IDS_BRAVE_UI_SERVICE_TEXT_READY" desc="">By clicking ‘Yes, I'm Ready!’, you indicate that you have read and agree to the</message>
+      <message name="IDS_BRAVE_UI_SET_CONTRIBUTION" desc="">Set Contribution</message>
       <message name="IDS_BRAVE_UI_BRAVE_REWARDS_CREATING_TEXT" desc="">Creating wallet</message>
       <message name="IDS_BRAVE_UI_BRAVE_REWARDS_DESC" desc="">Your attention is valuable. Earn by viewing privacy-respecting ads, and pay it forward to support content creators you love.</message>
       <message name="IDS_BRAVE_UI_BRAVE_REWARDS_OPT_IN_TEXT" desc="">Yes, I'm In!</message>
@@ -417,6 +418,8 @@
       <message name="IDS_BRAVE_UI_MONTHLY_TIPS" desc="">Monthly Tips!</message>
       <message name="IDS_BRAVE_UI_NEW_GRANT" desc="">A free token grant is available.</message>
       <message name="IDS_BRAVE_UI_NEW_TOKEN_GRANT" desc="">Free Token Grant</message>
+      <message name="IDS_BRAVE_UI_MONTHLY_CONTRIBUTION" desc="">Monthly Contribution</message>
+      <message name="IDS_BRAVE_UI_NEXT_CONTRIBUTION" desc="">Next Contribution</message>
       <message name="IDS_BRAVE_UI_NO_GRANTS" desc="">Currently no token grant is available.</message>
       <message name="IDS_BRAVE_UI_NO_ACTIVITY" desc="">No activities yet…</message>
       <message name="IDS_BRAVE_UI_NO_THANK_YOU" desc="">No, thank you</message>

package.json

@@ -291,7 +291,7 @@
     "@types/storybook__react": "^4.0.2",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
-    "brave-ui": "github:brave/brave-ui#0ca53399def4e99756f5922e3006e2a5f95013c5",
+    "brave-ui": "github:brave/brave-ui#5baf78bc1351c1de2823780fb084ada9210edd06",
     "css-loader": "^2.1.1",
     "csstype": "^2.5.5",
     "deep-freeze-node": "^1.1.3",