From 2a2aaa1bd06ca789a9574053348d78c3df9e86de Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Wed, 7 Jun 2017 23:16:26 -0700
Subject: [PATCH] Disables funding with debit/credit card. Only affects
 Coinbase (ex: customers in USA)

Fixes https://github.com/brave/browser-laptop/issues/9327

Auditors: @cezaraugusto, @nejczdovc

Test Plan:
1. Be on an IP that is geo-located in the USA (via VPN or physically being in USA)
2. Go to Preferences > Payments
3. Click "Add funds"
4. "Fund with debit/credit" button should be disabled; appropriate messaging should be displayed (see issue)
---
 .../locales/en-US/preferences.properties      |  3 +
 .../preferences/payment/bitcoinDashboard.js   | 77 +++++++++++++------
 2 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index f70b3a5be6c..545a9c5d1ff 100644
--- 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
index 3be148640d2..04df981ea28 100644
--- 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',