Merge pull request #9331 from brave/disable-fund-with-cc

Disables funding with debit/credit card. Only affects Coinbase
brave · Jun 8, 2017 · c4464e5 · c4464e5
1 parent e0756dd
commit c4464e5
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 24 deletions.
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
@@ -135,6 +135,9 @@ outsideUSAPayment=Buy Bitcoin at our recommended source
 coinbaseNotAvailable=Sorry! Adding funds with a credit/debit card is available only for contributions of $5/month at the moment.
 add=Fund with debit/credit
 transferTime=Transfer may take up to 40 minutes
+fundingDisabled1=Card funding is temporarily unavailable.
+fundingDisabled2=We apologize for the inconvenience.
+fundingDisabled3=Learn more...
 addFundsTitle=Add funds…
 addFunds=Three ways to add funds to your Brave Wallet
 copy=Copy

diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js
@@ -91,39 +91,64 @@ class BitcoinDashboard extends ImmutableComponent {
     })} />
   }
 
-  bitcoinPurchaseButton () {
-    if (!this.props.ledgerData.get('buyURLFrame')) {
-      /* TODO refactor button */
-      return <Button className={cx({
+  bitcoinPurchaseButton (options) {
+    const disabled = options && options.disabled
+    const buttonAttrs = {
+      l10nId: 'add',
+      testId: 'bitcoinPurchaseButton',
+      className: cx({
         primaryButton: true,
-        [css(styles.panelButton)]: true
-      })}
-        l10nId='add'
-        testId='bitcoinPurchaseButton'
-        onClick={this.props.showOverlay.bind(this)}
-      />
+        [css(styles.panelButton)]: true,
+        disabled: disabled
+      })
+    }
+    const hrefAttrs = {
+      href: this.props.ledgerData.get('buyURL'),
+      target: '_blank'
     }
 
-    return <a href={this.props.ledgerData.get('buyURL')} target='_blank' onClick={this.openBuyURLTab}>
-      {/* TODO: refactor button.js */}
-      <Button className={cx({
-        primaryButton: true,
-        [css(styles.panelButton)]: true
-      })}
-        l10nId='add'
-        testId='bitcoinPurchaseButton'
-      />
+    if (disabled) {
+      buttonAttrs.disabled = 'disabled'
+      hrefAttrs.disabled = 'disabled'
+    } else {
+      hrefAttrs.onClick = this.openBuyURLTab
+    }
+
+    if (!this.props.ledgerData.get('buyURLFrame')) {
+      if (!disabled) {
+        buttonAttrs.onClick = this.props.showOverlay.bind(this)
+      }
+      return <Button {...buttonAttrs} />
+    }
+
+    return <a {...hrefAttrs}>
+      <Button {...buttonAttrs} />
     </a>
   }
 
   coinbaseAvailability () {
+    const disabled = true
     if (this.canUseCoinbase) {
       return <section className={css(styles.panel__divider, styles.panel__divider_right)}>
-        {this.bitcoinPurchaseButton()}
-        <div className={css(
-          styles.panel__divider_right__title,
-          styles.panel__divider_right__subTitle
-        )} data-l10n-id='transferTime' />
+        {this.bitcoinPurchaseButton({disabled})}
+        {
+          disabled
+          ? <div className={css(
+            styles.panel__divider_right__title,
+            styles.panel__divider_right__subTitle,
+            styles.panel__divider_right__disabledSubTitle
+          )}>
+            <div data-l10n-id='fundingDisabled1' />
+            <div>
+              <span data-l10n-id='fundingDisabled2' />&nbsp;
+              <a href='https://community.brave.com/c/payments' target='_blank' data-l10n-id='fundingDisabled3' />
+            </div>
+          </div>
+          : <div className={css(
+             styles.panel__divider_right__title,
+             styles.panel__divider_right__subTitle
+          )} data-l10n-id='transferTime' />
+        }
       </section>
     } else {
       return <section className={css(styles.panel__divider, styles.panel__divider_right)}>
@@ -542,6 +567,10 @@ const styles = StyleSheet.create({
     lineHeight: '1.3em',
     marginTop: globalStyles.spacing.dialogInsideMargin
   },
+  panel__divider_right__disabledSubTitle: {
+    textAlign: 'right',
+    fontSize: '12px'
+  },
 
   panel__coinbase: {
     background: 'initial',