Adds contribution info to tipping banner

Fixes brave/brave-browser#6744
brave · Nov 14, 2019 · f3d352a · f3d352a
1 parent df5e336
commit f3d352a
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 8 deletions.
diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
@@ -708,6 +708,8 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "autoTipText", IDS_BRAVE_UI_AUTO_TIP_TEXT },
         { "bat", IDS_BRAVE_UI_BAT_TEXT },
         { "bap", IDS_BRAVE_UI_BAP_REWARDS_TEXT },
+        { "contributionAmount", IDS_BRAVE_UI_CONTRIBUTION_AMOUNT },
+        { "contributionNextDate",  IDS_BRAVE_REWARDS_LOCAL_CONTR_NEXT_DATE },
         { "donationAmount", IDS_BRAVE_UI_DONATION_AMOUNT },
         { "doMonthly", IDS_BRAVE_UI_DO_MONTHLY },
         { "firstTipDateText", IDS_BRAVE_UI_FIRST_TIP_TEXT },
@@ -716,6 +718,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "notEnoughTokensLink", IDS_BRAVE_UI_NOT_ENOUGH_TOKENS_LINK },
         { "on", IDS_BRAVE_UI_ON },
         { "monthlyText", IDS_BRAVE_UI_MONTHLY_TEXT },
+        { "monthlySet", IDS_BRAVE_UI_CONTRIBUTION_SET },
         { "redditTipTitle", IDS_BRAVE_UI_REDDIT_TIP_TITLE },
         { "redditTipTitleEmpty", IDS_BRAVE_UI_REDDIT_TIP_TITLE_EMPTY },
         { "githubTipTitle", IDS_BRAVE_UI_GITHUB_TIP_TITLE },

diff --git a/components/brave_rewards/browser/rewards_service_browsertest.cc b/components/brave_rewards/browser/rewards_service_browsertest.cc
@@ -1238,6 +1238,9 @@ class BraveRewardsBrowserTest
     // Wait for thank you banner to load
     ASSERT_TRUE(WaitForLoadStop(site_banner_contents));
 
+    const std::string confirmationText = monthly
+        ? "Monthly contribution has been set!"
+        : "Tip sent!";
     // Make sure that thank you banner shows correct publisher data
     // (domain and amount)
     {
@@ -1248,7 +1251,10 @@ class BraveRewardsBrowserTest
           "  document.documentElement.innerText);",
           content::EXECUTE_SCRIPT_DEFAULT_OPTIONS,
           content::ISOLATED_WORLD_ID_CONTENT_END);
-      EXPECT_NE(js_result.ExtractString().find("Tip sent!"), std::string::npos);
+      EXPECT_NE(js_result.ExtractString().find(
+          confirmationText), std::string::npos);
+      EXPECT_NE(js_result.ExtractString().find(
+           "" + amount_str + ".0 BAT"), std::string::npos);
       EXPECT_NE(js_result.ExtractString().find(
           "Share the good news:"), std::string::npos);
     }

diff --git a/components/brave_rewards/resources/tip/components/app.tsx b/components/brave_rewards/resources/tip/components/app.tsx
@@ -34,14 +34,27 @@ export class App extends React.Component<Props, {}> {
   }
 
   getTipBanner = (url: string, publisher: RewardsTip.Publisher, mediaMetaData: RewardsTip.MediaMetaData | undefined) => {
+    let monthlyDate
+
+    const {
+      currentTipAmount,
+      currentTipRecurring,
+      reconcileStamp
+    } = this.props.rewardsDonateData
     const monthly = this.props.dialogArgs.monthly
 
+    if (currentTipRecurring && reconcileStamp) {
+      monthlyDate = new Date(reconcileStamp * 1000).toLocaleDateString()
+    }
+
     if (!mediaMetaData) {
       return (
         <TipSite
           url={url}
           monthly={monthly}
           publisher={publisher}
+          monthlyDate={monthlyDate}
+          amount={currentTipAmount}
         />
       )
     } else {
@@ -51,6 +64,8 @@ export class App extends React.Component<Props, {}> {
           monthly={monthly}
           publisher={publisher}
           mediaMetaData={mediaMetaData}
+          monthlyDate={monthlyDate}
+          amount={currentTipAmount}
         />
       )
     }

diff --git a/components/brave_rewards/resources/tip/components/siteBanner.tsx b/components/brave_rewards/resources/tip/components/siteBanner.tsx
@@ -16,6 +16,8 @@ import * as utils from '../utils'
 
 interface Props extends RewardsTip.ComponentProps {
   monthly: boolean
+  monthlyDate?: string
+  amount?: string
   onlyAnonWallet?: boolean
   publisher: RewardsTip.Publisher
   tipComplete?: boolean
@@ -212,7 +214,7 @@ class Banner extends React.Component<Props, State> {
   render () {
     const { balance } = this.props.rewardsDonateData
     const { total } = balance
-    const { onlyAnonWallet, publisher, mediaMetaData } = this.props
+    const { onlyAnonWallet, publisher, mediaMetaData, monthlyDate, amount } = this.props
 
     const checkmark = utils.isPublisherConnectedOrVerified(publisher.status)
     const bannerType = this.props.monthly ? 'monthly' : 'one-time'
@@ -253,6 +255,8 @@ class Banner extends React.Component<Props, State> {
         tipComplete={this.props.tipComplete}
         onTweet={this.props.onTweet}
         nextContribution={this.getNextContribution()}
+        monthlyDate={monthlyDate}
+        amount={amount}
       >
       {
         mediaMetaData

diff --git a/components/brave_rewards/resources/tip/components/tipMediaUser.tsx b/components/brave_rewards/resources/tip/components/tipMediaUser.tsx
@@ -16,6 +16,8 @@ import { getLocale } from '../../../../common/locale'
 interface Props extends RewardsTip.ComponentProps {
   url: string
   monthly: boolean
+  monthlyDate?: string
+  amount?: string
   publisher: RewardsTip.Publisher
   mediaMetaData: RewardsTip.MediaMetaData
 }
@@ -48,10 +50,14 @@ class TipMediaUser extends React.Component<Props, {}> {
 
   render () {
     const { finished, error, onlyAnonWallet } = this.props.rewardsDonateData
+    const {
+      monthly,
+      monthlyDate,
+      mediaMetaData,
+      publisher,
+      amount
+    } = this.props
 
-    const publisher = this.props.publisher
-    const monthly = this.props.monthly
-    const mediaMetaData = this.props.mediaMetaData
     if (!mediaMetaData) {
       return
     }
@@ -86,6 +92,8 @@ class TipMediaUser extends React.Component<Props, {}> {
               onTweet={this.onTweet}
               mediaMetaData={mediaMetaData}
               onlyAnonWallet={onlyAnonWallet}
+              monthlyDate={monthlyDate}
+              amount={amount}
           />
           : null
         }

diff --git a/components/brave_rewards/resources/tip/components/tipSite.tsx b/components/brave_rewards/resources/tip/components/tipSite.tsx
@@ -15,6 +15,8 @@ import * as rewardsActions from '../actions/tip_actions'
 interface Props extends RewardsTip.ComponentProps {
   url: string
   monthly: boolean
+  monthlyDate?: string
+  amount?: string
   publisher: RewardsTip.Publisher
 }
 
@@ -49,6 +51,8 @@ class TipSite extends React.Component<Props, {}> {
               publisher={this.props.publisher}
               onTweet={this.onTweet}
               onlyAnonWallet={onlyAnonWallet}
+              monthlyDate={this.props.monthlyDate}
+              amount={this.props.amount}
           />
           : null
         }

diff --git a/components/brave_rewards/resources/ui/components/donateConfirmation/index.tsx b/components/brave_rewards/resources/ui/components/donateConfirmation/index.tsx
@@ -4,27 +4,61 @@ import { getLocale } from 'brave-ui/helpers'
 import {
   StyledWrapper,
   StyledTitle,
+  StyledInfo,
+  StyledInfoItem,
   StyledSubTitle,
   StyledTweet,
   StyledTwitterIcon
 } from './style'
 import { LogoTwitterIcon } from 'brave-ui/components/icons'
 
 interface Props {
+  amount?: string
+  monthlyDate?: string
   isMonthly: boolean
   onTweet: () => void
+  onlyAnonWallet?: boolean
 }
 
 export default class DonateConfirmation extends React.PureComponent<Props, {}> {
+  getDonateInfo = () => {
+    const {
+      amount,
+      monthlyDate,
+      isMonthly,
+      onlyAnonWallet
+    } = this.props
+
+    const batString = getLocale(onlyAnonWallet ? 'bap' : 'bat')
+    const typeString = getLocale(isMonthly ? 'contributionAmount' : 'donationAmount')
+
+    return (
+      <>
+        <StyledInfoItem>
+          {typeString}: {amount} {batString}
+        </StyledInfoItem>
+        {
+          isMonthly && monthlyDate
+          ? <StyledInfoItem>
+              {getLocale('contributionNextDate')}: {monthlyDate}
+            </StyledInfoItem>
+          : null
+        }
+      </>
+    )
+  }
 
   render () {
     const { isMonthly, onTweet } = this.props
 
     return (
       <StyledWrapper isMonthly={isMonthly}>
         <StyledTitle>
-          {getLocale('tipSent')} 🎉
+          {getLocale(isMonthly ? 'monthlySet' : 'tipSent')} 🎉
         </StyledTitle>
+        <StyledInfo>
+          {this.getDonateInfo()}
+        </StyledInfo>
         <StyledSubTitle>
           {getLocale('shareText')}
         </StyledSubTitle>

diff --git a/components/brave_rewards/resources/ui/components/donateConfirmation/style.ts b/components/brave_rewards/resources/ui/components/donateConfirmation/style.ts
@@ -29,7 +29,7 @@ export const StyledTitle = styled<{}, 'span'>('span')`
   font-size: 16px;
   font-weight: 600;
   letter-spacing: 0px;
-  margin-top: 25px;
+  margin-top: 15px;
 `
 
 export const StyledSubTitle = styled<{}, 'span'>('span')`
@@ -54,3 +54,13 @@ export const StyledTwitterIcon = styled<{}, 'div'>('div')`
   padding-top: 16px;
   color: #fff;
 `
+
+export const StyledInfo = styled<{}, 'div'>('div')`
+  margin: 10px 0;
+`
+
+export const StyledInfoItem = styled<{}, 'span'>('span')`
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 300;
+`
diff --git a/components/brave_rewards/resources/ui/components/siteBanner/index.tsx b/components/brave_rewards/resources/ui/components/siteBanner/index.tsx
@@ -81,6 +81,8 @@ export interface Props {
   onTweet: () => void
   nextContribution?: string
   onlyAnonWallet?: boolean
+  monthlyDate?: string
+  amount?: string
 }
 
 export default class SiteBanner extends React.PureComponent<Props, {}> {
@@ -228,12 +230,15 @@ export default class SiteBanner extends React.PureComponent<Props, {}> {
   }
 
   renderConfirmation = () => {
-    const { type, onTweet } = this.props
+    const { type, onTweet, onlyAnonWallet, monthlyDate, amount } = this.props
 
     return (
       <DonateConfirmation
         onTweet={onTweet}
+        onlyAnonWallet={onlyAnonWallet}
         isMonthly={type === 'monthly'}
+        monthlyDate={monthlyDate}
+        amount={amount}
       />
     )
   }

diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
@@ -400,6 +400,7 @@
       <message name="IDS_BRAVE_UI_DND_CAPTCHA_TEXT_2" desc="">target</message>
       <message name="IDS_BRAVE_UI_DONATION" desc="">Tip</message>
       <message name="IDS_BRAVE_UI_DONATION_AMOUNT" desc="">Tip amount</message>
+      <message name="IDS_BRAVE_UI_CONTRIBUTION_AMOUNT" desc="">Contribution amount</message>
       <message name="IDS_BRAVE_UI_DONATE_MONTHLY" desc="">Tip this site Monthly</message>
       <message name="IDS_BRAVE_UI_DONATE_NOW" desc="">Send a Tip…</message>
       <message name="IDS_BRAVE_UI_DONE" desc="">Done</message>
@@ -535,6 +536,7 @@
       <message name="IDS_BRAVE_UI_TELL_OTHERS" desc="">Tell others about your tip.</message>
       <message name="IDS_BRAVE_UI_THANK_YOU" desc="">Thank you</message>
       <message name="IDS_BRAVE_UI_TIP_SENT" desc="">Tip sent!</message>
+      <message name="IDS_BRAVE_UI_CONTRIBUTION_SET" desc="">Monthly contribution has been set!</message>
       <message name="IDS_BRAVE_UI_TIP_TEXT" desc="">You've just sent a tip to:</message>
       <message name="IDS_BRAVE_UI_TIP_ON_LIKE" desc="">Tip on like</message>
       <message name="IDS_BRAVE_UI_TITLE_BAT" desc="">Basic Attention Token (BAT)</message>