Merge pull request #1433 from brave/feature-3023

Adds tip info to confirmation dialog

browser/brave_rewards/donations_dialog.cc

@@ -27,7 +27,7 @@ using content::WebUIMessageHandler;
 namespace {
 
 constexpr int kDialogMargin = 25;
-constexpr int kDialogMinHeight = 300;
+constexpr int kDialogMinHeight = 400;
 constexpr int kDialogMaxHeight = 700;
 
 // A ui::WebDialogDelegate that specifies the donation dialog appearance.

browser/ui/webui/brave_donate_ui.cc

@@ -182,7 +182,10 @@ void RewardsDonateDOMHandler::OnRecurringDonationUpdated(brave_rewards::RewardsS
    if (web_ui()->CanCallJavascript()) {
     auto publishers = std::make_unique<base::ListValue>();
     for (auto const& item : list) {
-      publishers->AppendString(item.id);
+      auto publisher = std::make_unique<base::DictionaryValue>();
+      publisher->SetString("publisherKey", item.id);
+      publisher->SetInteger("monthlyDate", item.reconcile_stamp);
+      publishers->Append(std::move(publisher));
     }
 
     web_ui()->CallJavascriptFunctionUnsafe("brave_rewards_donate.recurringDonations", *publishers);

browser/ui/webui/brave_webui_source.cc

@@ -528,17 +528,22 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
       std::string("donate"), {
         { "about", IDS_BRAVE_UI_ABOUT },
         { "addFunds", IDS_BRAVE_UI_ADD_FUNDS },
+        { "autoTipText", IDS_BRAVE_UI_AUTO_TIP_TEXT },
+        { "bat", IDS_BRAVE_UI_BAT_TEXT },
         { "donationAmount", IDS_BRAVE_UI_DONATION_AMOUNT },
         { "doMonthly", IDS_BRAVE_UI_DO_MONTHLY },
+        { "firstTipDateText", IDS_BRAVE_UI_FIRST_TIP_TEXT },
         { "makeMonthly", IDS_BRAVE_UI_MAKE_MONTHLY },
         { "notEnoughTokens", IDS_BRAVE_UI_NOT_ENOUGH_TOKENS },
         { "on", IDS_BRAVE_UI_ON },
+        { "monthlyText", IDS_BRAVE_UI_MONTHLY_TEXT },
         { "rewardsBannerText1", IDS_BRAVE_UI_REWARDS_BANNER_TEXT1 },
         { "rewardsBannerText2", IDS_BRAVE_UI_REWARDS_BANNER_TEXT2 },
         { "sendDonation", IDS_BRAVE_UI_SEND_DONATION },
         { "siteBannerNoticeNote", IDS_BRAVE_UI_SITE_BANNER_NOTICE_NOTE },
         { "siteBannerNoticeText", IDS_BRAVE_UI_SITE_BANNER_NOTICE_TEXT },
         { "thankYou", IDS_BRAVE_UI_THANK_YOU },
+        { "tipText", IDS_BRAVE_UI_TIP_TEXT },
         { "tokens", IDS_BRAVE_UI_TOKENS },
         { "unVerifiedTextMore", IDS_BRAVE_UI_SITE_UNVERIFIED_TEXT_MORE },
         { "walletBalance", IDS_BRAVE_UI_WALLET_BALANCE },

components/brave_rewards/resources/donate/actions/donate_actions.ts

@@ -28,6 +28,6 @@ export const onDonate = (publisherKey: string, amount: number, recurring: boolea
 
 export const getRecurringDonations = () => action(types.GET_RECURRING_DONATIONS)
 
-export const onRecurringDonations = (list: string[]) => action(types.ON_RECURRING_DONATIONS, {
-  list
+export const onRecurringDonations = (recurringDonations: RewardsDonate.RecurringDonation[]) => action(types.ON_RECURRING_DONATIONS, {
+  recurringDonations
 })

components/brave_rewards/resources/donate/components/app.tsx

@@ -26,32 +26,62 @@ export class App extends React.Component<Props, {}> {
     this.actions.onCloseDialog()
   }
 
-  generateDonationOverlay = (publisher: RewardsDonate.Publisher | undefined) => {
+  generateDonationOverlay = (publisher: RewardsDonate.Publisher) => {
+    let domain = ''
+    let monthlyDate
+    let recurringDonation
+    const {
+      currentTipAmount,
+      currentTipRecurring,
+      recurringDonations
+    } = this.props.rewardsDonateData
+
+    const publisherKey = publisher && publisher.publisherKey
+
+    if (!publisherKey ||
+        (currentTipRecurring && !recurringDonations)) {
+      return null
+    }
+
+    if (recurringDonations) {
+      recurringDonation = recurringDonations.find((donation: RewardsDonate.RecurringDonation) => {
+        return donation.publisherKey === publisherKey
+      })
+    }
+
+    if (recurringDonation && recurringDonation.monthlyDate) {
+      monthlyDate = new Date(recurringDonation.monthlyDate * 1000).toLocaleDateString()
+    }
+
+    if (publisher.provider && publisher.name) {
+      domain = publisher.name
+    } else {
+      domain = publisherKey
+    }
+
     setTimeout(() => {
       this.onClose()
     }, 3000)
 
-    let domain = ''
-    if (publisher) {
-      if (publisher.provider && publisher.name) {
-        domain = publisher.name
-      } else {
-        domain = publisher.publisherKey
-      }
-    }
-
     return (
       <DonationOverlay
         onClose={this.onClose}
         success={true}
         domain={domain}
+        amount={currentTipAmount}
+        monthlyDate={monthlyDate}
         logo={publisher && publisher.logo}
       />
     )
   }
 
   render () {
     const { finished, error, publisher } = this.props.rewardsDonateData
+
+    if (!publisher) {
+      return null
+    }
+
     return (
       <>
         {

components/brave_rewards/resources/donate/components/siteBanner.tsx

@@ -101,12 +101,26 @@ class Banner extends React.Component<Props, State> {
     return result
   }
 
+  hasRecurringDonation = (publisherKey?: string) => {
+    const { recurringDonations } = this.props.rewardsDonateData
+
+    if (!publisherKey || !recurringDonations) {
+      return false
+    }
+
+    const recurringDonation = recurringDonations.find((donation: RewardsDonate.RecurringDonation) => {
+      return donation.publisherKey === publisherKey
+    })
+
+    return !!recurringDonation
+  }
+
   get addFundsLink () {
     return 'brave://rewards/#add-funds'
   }
 
   render () {
-    const { publisher, walletInfo, recurringList } = this.props.rewardsDonateData
+    const { publisher, walletInfo } = this.props.rewardsDonateData
     const { balance } = walletInfo
 
     let title = ''
@@ -146,7 +160,7 @@ class Banner extends React.Component<Props, State> {
         title={title}
         name={name}
         provider={provider as Provider}
-        recurringDonation={recurringList && recurringList.includes(publisherKey)}
+        recurringDonation={this.hasRecurringDonation(publisherKey)}
         balance={balance.toString() || '0'}
         bgImage={background}
         logo={logo}

components/brave_rewards/resources/donate/reducers/donate_reducer.ts

@@ -11,6 +11,9 @@ export const defaultState: RewardsDonate.State = {
   finished: false,
   error: false,
   publisher: undefined,
+  currentTipAmount: '0.0',
+  currentTipRecurring: false,
+  recurringDonations: [],
   walletInfo: {
     balance: 0,
     choices: [],
@@ -45,13 +48,16 @@ const publishersReducer: Reducer<RewardsDonate.State> = (state: RewardsDonate.St
     case types.ON_DONATE:
       {
         if (state.publisher && state.publisher.publisherKey && payload.amount > 0) {
+          let amount = parseInt(payload.amount, 10)
           chrome.send('brave_rewards_donate.onDonate', [
             payload.publisherKey,
-            parseInt(payload.amount, 10),
+            amount,
             payload.recurring
           ])
           state = { ...state }
           state.finished = true
+          state.currentTipAmount = amount.toFixed(1)
+          state.currentTipRecurring = payload.recurring
         } else {
           // TODO return error
         }
@@ -62,7 +68,11 @@ const publishersReducer: Reducer<RewardsDonate.State> = (state: RewardsDonate.St
       break
     case types.ON_RECURRING_DONATIONS:
       state = { ...state }
-      state.recurringList = action.payload.list
+      const recurringDonations = action.payload.recurringDonations
+
+      if (recurringDonations) {
+        state.recurringDonations = recurringDonations
+      }
       break
   }
 

components/definitions/rewardsDonate.d.ts

@@ -4,7 +4,9 @@ declare namespace RewardsDonate {
     walletInfo: WalletProperties
     finished: boolean
     error: boolean
-    recurringList?: string[]
+    currentTipAmount?: string
+    currentTipRecurring?: boolean
+    recurringDonations?: RecurringDonation[]
   }
 
   interface ApplicationState {
@@ -47,4 +49,9 @@ declare namespace RewardsDonate {
     hint?: string
     status?: 'wrongPosition' | 'serverError' | number | null
   }
+
+  export interface RecurringDonation {
+    publisherKey?: string
+    monthlyDate?: number
+  }
 }

components/resources/brave_components_strings.grd

@@ -262,6 +262,8 @@
       <message name="IDS_BRAVE_UI_ACTIVITY_COPY" desc="">©2016–2018 Brave Software. Brave is a registered trademark of Brave Software. Site names may be trademarks or registered trademarks of the site owner.</message>
       <message name="IDS_BRAVE_UI_ACTIVITY_NOTE" desc="">To protect your privacy, this Brave Rewards statement is not saved, recorded or logged anywhere other than on your device (this computer). It cannot be retrieved from Brave in the event of data loss on your device.</message>
       <message name="IDS_BRAVE_UI_ADD_FUNDS" desc="">add funds</message>
+      <message name="IDS_BRAVE_UI_AUTO_TIP_TEXT" desc="">You are automatically sending a tip to:</message>
+      <message name="IDS_BRAVE_UI_BAT_TEXT" desc="">BAT</message>
       <message name="IDS_BRAVE_UI_ADD_FUNDS_FAQ" desc="">the FAQ</message>
       <message name="IDS_BRAVE_UI_ADD_FUNDS_NOTE" desc="">Reminder: The Brave Wallet is unidirectional and BAT flows to publisher sites. For more information about Brave Rewards, please visit</message>
       <message name="IDS_BRAVE_UI_ADD_FUNDS_QR" desc="">Show QR Code</message>
@@ -310,6 +312,7 @@
       <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>
+      <message name="IDS_BRAVE_UI_FIRST_TIP_TEXT" desc="">Your first monthly tip will be sent on:</message>
       <message name="IDS_BRAVE_UI_DO_MONTHLY" desc="">Set monthly tip</message>
       <message name="IDS_BRAVE_UI_DOWNLOAD_PDF" desc="">Download as PDF</message>
       <message name="IDS_BRAVE_UI_EARNINGS_ADS" desc="">Earnings from Ads</message>
@@ -348,6 +351,7 @@
       <message name="IDS_BRAVE_UI_OFF" desc="">off</message>
       <message name="IDS_BRAVE_UI_OK" desc="">ok</message>
       <message name="IDS_BRAVE_UI_ON" desc="">on</message>
+      <message name="IDS_BRAVE_UI_MONTHLY_TEXT" desc="">Monthly</message>
       <message name="IDS_BRAVE_UI_ONE_TIME" desc="">One time</message>
       <message name="IDS_BRAVE_UI_ONE_TIME_DONATION" desc="">One-time Tips</message>
       <message name="IDS_BRAVE_UI_OPEN_BALANCE" desc="">Opening Balance</message>
@@ -415,6 +419,7 @@
       <message name="IDS_BRAVE_UI_SITE" desc="">site</message>
       <message name="IDS_BRAVE_UI_SITES" desc="">sites</message>
       <message name="IDS_BRAVE_UI_THANK_YOU" desc="">Thank you</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>
       <message name="IDS_BRAVE_UI_TITLE_BTC" desc="">Bitcoin (BTC)</message>

package.json

@@ -273,7 +273,7 @@
     "@types/react-dom": "^16.0.7",
     "@types/react-redux": "6.0.4",
     "awesome-typescript-loader": "^5.2.0",
-    "brave-ui": "github:brave/brave-ui#d0369cb8a3c075f863abbb5d8bdc33ab67f84da2",
+    "brave-ui": "github:brave/brave-ui#58766d73dd168e9012ad4620cd1d48c6ced344e8",
     "css-loader": "^0.28.9",
     "csstype": "^2.5.5",
     "emptykit.css": "^1.0.1",