Adds UGP support

Resolves brave#11100 Auditors: Test Plan:
NejcZdovc · Nov 10, 2017 · 15e570c · 15e570c
1 parent 81df03b
commit 15e570c
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 27 deletions.
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
@@ -70,6 +70,7 @@ builtInPasswordManager=Brave Built-In
 cachedImagesAndFiles=Cached images and files
 cancel=Cancel
 checkDefaultOnStartup=Always check on startup
+claimButton=Claim my free tokens
 clearAll=Clear all
 clearBrowsingDataNow=Clear Browsing Data Now…
 comingSoon=Coming soon!
@@ -227,14 +228,14 @@ paymentsSidebarText1=Our Partners
 paymentsSidebarText2=All transaction IP addresses are anonymized with technology from:
 paymentsSidebarText3=Brave BAT Wallets are provided through a partnership with:
 paymentsWelcomeLink=View the FAQ
-paymentsWelcomeText1=Brave has created a simple way for you to contribute to the sites you use most.
-paymentsWelcomeText2=To begin using Brave Payments, simply flip the switch at the top of this window. The rest is easy.
+paymentsWelcomeText1=To start using Brave Payments, simply flip the switch at the top of this window.
+paymentsWelcomeText2=The rest is easy.
 paymentsWelcomeText3=Brave Payments allows publishers to stay in business even though you may have blocked their advertisements with Brave. All of this works while keeping your browsing history private. Your funds are transferred to the site owner through an anonymous ledger system, which makes it impossible for you ever to be identified based on the sites you visit and support.
 paymentsWelcomeText4=Brave Payments is currently in Beta. With your help and feedback, we can fine tune the system through the beta period.
 paymentsWelcomeText5=Note: Brave Payments uses a country-lookup service in order to provide better user wallet funding options based on your location. This service is completely anonymous.
 paymentsWelcomeText6=Need more info?
 paymentsWelcomeText7=for Brave Payments…
-paymentsWelcomeTitle=Welcome to Brave Payments!
+paymentsWelcomeTitle=Brave has created a simple way for you to contribute to the sites that you use most.
 pendingFundsStatus=Pending funds: {{funds}}. Newly-added funds may take 30+ minutes to appear.
 percentage=%
 percentPaid=Percentage

diff --git a/app/renderer/components/preferences/payment/disabledContent.js b/app/renderer/components/preferences/payment/disabledContent.js
@@ -5,9 +5,12 @@
 const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
-// components
+// Components
 const ImmutableComponent = require('../../immutableComponent')
 
+// Utils
+const cx = require('../../../../../js/lib/classSet')
+
 // style
 const globalStyles = require('../../styles/global')
 const commonStyles = require('../../styles/commonStyles')
@@ -17,19 +20,46 @@ const uphold = require('../../../../extensions/brave/img/ledger/uphold_logo_smal
 const uphold2 = require('../../../../extensions/brave/img/ledger/uphold_logo_medium.png')
 
 class DisabledContent extends ImmutableComponent {
+  constructor (props) {
+    super(props)
+    this.text = this.getAlternativeText()
+    this.getText()
+  }
+
+  getAlternativeText () {
+    // TODO we need alternative text
+    return <div>
+      <h3 data-l10n-id='paymentsWelcomeTitle' />
+      <p data-l10n-id='paymentsWelcomeText1' />
+      <p data-l10n-id='paymentsWelcomeText2' />
+    </div>
+  }
+
+  getText () {
+    // TODO we need to get text from ledger, which wil be delayed because of the server call
+    // should we save this text into the state and just fetch it with mergeProps?
+    // TODO what will display while waiting for server text? alternative and then replace it after we get feedback from the server?
+    return <div>Ledger code</div>
+  }
+
   render () {
     return <section className={css(styles.disabledContent)} data-test-id='disabledContent'>
-      <div className={css(styles.disabledContent__message)} data-test-id='paymentsMessage'>
-        <h3 className={css(styles.disabledContent__message__header)} data-l10n-id='paymentsWelcomeTitle' />
-        <div className={css(styles.disabledContent__message__text)} data-l10n-id='paymentsWelcomeText1' />
-        <div className={css(styles.disabledContent__message__text, styles.disabledContent__message__text_bold)} data-l10n-id='paymentsWelcomeText2' />
-        <div className={css(styles.disabledContent__message__text)} data-l10n-id='paymentsWelcomeText3' />
-        <div className={css(styles.disabledContent__message__text)} data-l10n-id='paymentsWelcomeText4' />
-        <div className={css(styles.disabledContent__message__text)} data-l10n-id='paymentsWelcomeText5' />
-        <div className={css(styles.disabledContent__message__text)}>
-          <span data-l10n-id='paymentsWelcomeText6' />&nbsp;
-          <a className={css(commonStyles.linkText)} href='https://brave.com/Payments_FAQ.html' rel='noopener' target='_blank' data-l10n-id='paymentsWelcomeLink' />&nbsp;
-          <span data-l10n-id='paymentsWelcomeText7' />
+      <div className={css(styles.disabledContent__wrapper)} data-test-id='paymentsMessage'>
+        <div className={cx({
+          [css(styles.disabledContent__message)]: true,
+          disabledLedgerContent: true
+        })} data-test-id='paymentsMessage'>
+          {this.text}
+        </div>
+        <div className={css(styles.disabledContent__footer)}>
+          <div className={css(styles.disabledContent__commonText)} data-l10n-id='paymentsWelcomeText3' />
+          <div className={css(styles.disabledContent__commonText)} data-l10n-id='paymentsWelcomeText4' />
+          <div className={css(styles.disabledContent__commonText)} data-l10n-id='paymentsWelcomeText5' />
+          <div className={css(styles.disabledContent__commonText)}>
+            <span data-l10n-id='paymentsWelcomeText6' />&nbsp;
+            <a className={css(commonStyles.linkText)} href='https://brave.com/Payments_FAQ.html' rel='noopener' target='_blank' data-l10n-id='paymentsWelcomeLink' />&nbsp;
+            <span data-l10n-id='paymentsWelcomeText7' />
+          </div>
         </div>
       </div>
       <div className={css(styles.disabledContent__sidebar)}>
@@ -51,29 +81,32 @@ const styles = StyleSheet.create({
     marginTop: globalStyles.spacing.panelMargin
   },
 
+  disabledContent__commonText: {
+    padding: '0.5em 0'
+  },
+
+  disabledContent__commonText_bold: {
+    fontWeight: 'bold'
+  },
+
+  disabledContent__wrapper: {
+    fontSize: globalStyles.payments.fontSize.regular,
+    color: globalStyles.color.mediumGray
+  },
+
   disabledContent__message: {
     backgroundColor: globalStyles.color.lightGray,
     borderRadius: globalStyles.radius.borderRadiusUIbox,
     boxSizing: 'border-box',
     padding: '40px',
-    fontSize: globalStyles.payments.fontSize.regular,
-    lineHeight: '1.8em',
-    color: globalStyles.color.mediumGray
+    lineHeight: '1.8em'
   },
 
   disabledContent__message__header: {
     fontSize: '18px',
     paddingBottom: '0.5em'
   },
 
-  disabledContent__message__text: {
-    padding: '0.5em 0'
-  },
-
-  disabledContent__message__text_bold: {
-    fontWeight: 'bold'
-  },
-
   disabledContent__sidebar: {
     minWidth: '200px',
     marginLeft: '35px'
@@ -106,6 +139,11 @@ const styles = StyleSheet.create({
     backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     height: '50px'
+  },
+
+  disabledContent__footer: {
+    lineHeight: '1.2em',
+    padding: '40px'
   }
 })
 

diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
@@ -61,6 +61,27 @@ class EnabledContent extends ImmutableComponent {
     </div>
   }
 
+  onClaimClick () {
+    // TODO call appAction for claim
+  }
+
+  claimButton () {
+    // TODO check if user is eligible for claim and promotion is active
+
+    return <div>
+      <BrowserButton
+        custom={[
+          styles.claimButton
+        ]}
+        secondaryColor
+        panelItem
+        testId={'claimButton'}
+        l10nId={'claimButton'}
+        onClick={this.onClaimClick}
+      />
+    </div>
+  }
+
   ledgerDataErrorText () {
     const ledgerData = this.props.ledgerData
     const ledgerError = ledgerData.get('error')
@@ -189,7 +210,9 @@ class EnabledContent extends ImmutableComponent {
       <div className={css(styles.enabledContent__walletBar)} data-test-id='walletBar'>
         <div className={css(gridStyles.row1col1, styles.enabledContent__walletBar__title)} data-l10n-id='monthlyBudget' />
         <div className={css(gridStyles.row1col2, styles.enabledContent__walletBar__title)} data-l10n-id='accountBalance' />
-        <div className={css(gridStyles.row1col3)} />
+        <div className={css(gridStyles.row1col3)}>
+          {this.claimButton()}
+        </div>
         <div className={css(gridStyles.row2col1)}>
           <FormDropdown
             data-isPanel
@@ -397,6 +420,10 @@ const styles = StyleSheet.create({
 
   loader__line_off: {
     animationName: 'none'
+  },
+
+  claimButton: {
+    marginTop: '-10px'
   }
 })
 

diff --git a/less/about/preferences.less b/less/about/preferences.less
@@ -225,3 +225,30 @@ table.sortableTable {
     cursor: pointer;
   }
 }
+
+.disabledLedgerContent {
+  h3 {
+    font-size: 18px;
+    padding-bottom: 0.5em
+  }
+
+  p {
+    padding: 0.5em 0;
+  }
+
+  a {
+    display: inline-block;
+    text-decoration: underline;
+    color: rgb(255, 80, 0);
+    cursor: pointer;
+    margin: 0;
+
+    &:hover {
+      color: #000;
+    }
+  }
+
+  b {
+    font-weight: bold;
+  }
+}