Adds detailed view for pending contributions

Resolves brave/brave-browser#3175
brave · Mar 8, 2019 · 092bf01 · 092bf01
1 parent 6b15a4d
commit 092bf01
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 5 deletions.
diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
@@ -357,6 +357,10 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "paymentMonthly", IDS_BRAVE_UI_PAYMENT_MONTHLY },
         { "paymentNotMade", IDS_BRAVE_UI_PAYMENT_NOT_MADE },
         { "paymentWarning", IDS_BRAVE_UI_PAYMENT_WARNING },
+        { "pendingContributions", IDS_BRAVE_UI_PENDING_CONTRIBUTION },
+        { "pendingTyperecurring", IDS_BRAVE_UI_PENDING_TYPE_RECURRING },
+        { "pendingTypetip", IDS_BRAVE_UI_PENDING_TYPE_TIP },
+        { "pendingTypeac", IDS_BRAVE_UI_PENDING_TYPE_AC },
         { "pinnedSitesHeader", IDS_BRAVE_UI_PAYMENT_PINNED_SITES_HEADER },
         { "pinnedSitesMsg", IDS_BRAVE_UI_PAYMENT_PINNED_SITES_MSG },
         { "pinnedSitesOne", IDS_BRAVE_UI_PAYMENT_PINNED_SITES_ONE },
@@ -375,6 +379,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "remove", IDS_BRAVE_UI_REMOVE },
         { "reservedAmountText", IDS_BRAVE_UI_RESERVED_AMOUNT_TEXT },
         { "reservedMoreLink", IDS_BRAVE_UI_RESERVED_MORE_LINK },
+        { "reservedAllLink", IDS_BRAVE_UI_RESERVED_ALL_LINK },
         { "restore", IDS_BRAVE_UI_RESTORE },
         { "restoreAll", IDS_BRAVE_UI_RESTORE_ALL },
         { "reviewSitesMsg", IDS_BRAVE_UI_REVIEW_SITE_MSG },

diff --git a/components/brave_rewards/resources/ui/components/pageWallet.tsx b/components/brave_rewards/resources/ui/components/pageWallet.tsx
@@ -10,6 +10,7 @@ import { connect } from 'react-redux'
 import {
   ModalActivity,
   ModalBackupRestore,
+  ModalPending,
   WalletWrapper,
   WalletEmpty,
   WalletSummary
@@ -31,6 +32,7 @@ interface State {
   modalBackup: boolean
   modalActivity: boolean
   modalAddFunds: boolean
+  modalPendingContribution: boolean
 }
 
 interface Props extends Rewards.ComponentProps {
@@ -43,7 +45,8 @@ class PageWallet extends React.Component<Props, State> {
       activeTabId: 0,
       modalBackup: false,
       modalActivity: false,
-      modalAddFunds: false
+      modalAddFunds: false,
+      modalPendingContribution: false
     }
   }
 
@@ -184,6 +187,12 @@ class PageWallet extends React.Component<Props, State> {
     )
   }
 
+  onModalPendingToggle = () => {
+    this.setState({
+      modalPendingContribution: !this.state.modalPendingContribution
+    })
+  }
+
   isAddFundsUrl = () => {
     if (this.urlHashIs('#add-funds')) {
       this.setState({
@@ -261,7 +270,7 @@ class PageWallet extends React.Component<Props, State> {
   }
 
   getWalletSummary = () => {
-    const { walletInfo, reports } = this.props.rewardsData
+    const { walletInfo, reports, pendingContributionTotal } = this.props.rewardsData
     const { rates } = walletInfo
 
     let props = {}
@@ -283,9 +292,21 @@ class PageWallet extends React.Component<Props, State> {
       }
     }
 
-    return {
-      report: props
+    let result: {report: any, onSeeAllReserved: any } = {
+      report: props,
+      onSeeAllReserved: undefined
+    }
+
+    if (pendingContributionTotal > 0) {
+      result.onSeeAllReserved = this.onModalPendingToggle.bind(this)
     }
+
+    return result
+  }
+
+  // TODO remove
+  doNothing = () => {
+    console.log('nothing')
   }
 
   render () {
@@ -360,6 +381,62 @@ class PageWallet extends React.Component<Props, State> {
             />
             : null
         }
+        {
+          this.state.modalPendingContribution
+            ? <ModalPending
+              onClose={this.onModalPendingToggle}
+              rows={[
+                {
+                  profile: {
+                    name: 'Bart Baker',
+                    verified: false,
+                    provider: 'youtube',
+                    src: ""
+                  },
+                  url: 'https://brave.com',
+                  type: 'recurring',
+                  amount: {
+                    tokens: '2.0',
+                    converted: '0.20'
+                  },
+                  date: 'Jan 2',
+                  onRemove: this.doNothing
+                },
+                {
+                  profile: {
+                    verified: false,
+                    name: 'theguardian.com',
+                    src: ""
+                  },
+                  url: 'https://brave.com',
+                  type: 'tip',
+                  amount: {
+                    tokens: '12000.0',
+                    converted: '6000.20'
+                  },
+                  date: 'May 7',
+                  onRemove: this.doNothing
+                },
+                {
+                  profile: {
+                    verified: false,
+                    name: 'BrendanEich',
+                    provider: 'twitter',
+                    src: ""
+                  },
+                  url: 'https://brave.com',
+                  type: 'ac',
+                  amount: {
+                    tokens: '1.0',
+                    converted: '0.20'
+                  },
+                  date: 'May 2',
+                  onRemove: this.doNothing
+                }
+              ]}
+            />
+            : null
+        }
         {
           // TODO NZ add actual data for the whole section
           this.state.modalActivity

diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
@@ -484,6 +484,11 @@
       <message name="IDS_BRAVE_UI_SITE_BANNER_NOTICE_NOTE" desc="">NOTE:</message>
       <message name="IDS_BRAVE_UI_SITE_BANNER_NOTICE_TEXT" desc="">This creator has not yet signed up to receive contributions from Brave users. Your browser will keep trying to contribute until they verify, or until 90 days have passed.</message>
       <message name="IDS_BRAVE_UI_SITE_UNVERIFIED_TEXT_MORE" desc="">Learn more.</message>
+      <message name="IDS_BRAVE_UI_PENDING_CONTRIBUTION" desc="Title of pending contribution modal">Pending contributions</message>
+      <message name="IDS_BRAVE_UI_PENDING_TYPE_RECURRING" desc="Name of recurring tip type">Recurring tip</message>
+      <message name="IDS_BRAVE_UI_PENDING_TYPE_TIP" desc="Name of one-time tip type">One-time tip</message>
+      <message name="IDS_BRAVE_UI_PENDING_TYPE_AC" desc="Name of auto contribute type">Auto-Contribute</message>
+      <message name="IDS_BRAVE_UI_RESERVED_ALL_LINK" desc="Link that shows all pending contributions">Show all pending contributions</message>
 
       <!-- WebUI brave sync resources -->
       <!-- WebUI brave sync resources: Shared Content -->

diff --git a/package.json b/package.json
@@ -276,7 +276,7 @@
     "@types/react-redux": "6.0.4",
     "@types/redux-logger": "^3.0.7",
     "awesome-typescript-loader": "^5.2.1",
-    "brave-ui": "github:brave/brave-ui#3a0b168d55912353acb71e770b0857b88a432400",
+    "brave-ui": "github:brave/brave-ui#d4e612284206772c3f05c8776e1edc257732afe6",
     "css-loader": "^0.28.9",
     "csstype": "^2.5.5",
     "deep-freeze-node": "^1.1.3",