From 0a69a3ff1902e21b9479143f21ee40e6dfc440c8 Mon Sep 17 00:00:00 2001
From: Jon Kuperman <jon.kuperman@gmail.com>
Date: Fri, 9 Sep 2016 22:44:30 -0700
Subject: [PATCH] display different payment options based on user location

---
 .../locales/en-US/preferences.properties      |  2 ++
 js/about/preferences.js                       | 30 ++++++++++++++++++-
 less/about/preferences.less                   |  6 ++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index e7650a2068c..026c5835689 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -7,6 +7,7 @@ sync=Sync
 privacy=Privacy
 shields=Shields
 security=Security
+visit=visit
 visits=Visits
 publisher=Site
 publishers=Publishers
@@ -63,6 +64,7 @@ on=on
 notifications=notifications
 moneyAdd=Use your debit/credit card
 moneyAddSubTitle=No Bitcoin needed!
+outsideUSAPayment=Need to buy Bitcoin outside of the USA?
 coinbaseNotAvailable=Sorry! Adding funds with a credit/debit card is only available for contributions of $5/month at the moment.
 add=Fund with debit/credit
 transferTime=Transfer may take up to 40 minutes
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 1f75bb38821..cfd19e1269a 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -285,6 +285,10 @@ class BitcoinDashboard extends ImmutableComponent {
   get canUseCoinbase () {
     return this.currency === 'USD' && this.amount < 6
   }
+  get userInAmerica () {
+    const countryCode = this.props.ledgerData.get('countryCode')
+    return !(countryCode && countryCode !== 'US')
+  }
   get coinbasePanel () {
     if (this.canUseCoinbase) {
       return <div className='panel'>
@@ -311,6 +315,27 @@ class BitcoinDashboard extends ImmutableComponent {
       </div>
     }
   }
+  get exchangePanel () {
+    const url = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeURL'])
+    const name = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeName'])
+    // Call coinbasePanel if we don't have the URL or Name
+    if (!url || !name) {
+      return this.coinbasePanel
+    } else {
+      return <div className='panel'>
+        <div className='settingsPanelDivider'>
+          <span className='fa fa-credit-card' />
+          <div className='settingsListTitle' data-l10n-id='outsideUSAPayment' />
+        </div>
+        <div className='settingsPanelDivider'>
+          <span className='visitText' data-l10n-id='visit' />
+          <a target='_blank' className='browserButton primaryButton' href={url}>
+            {name}
+          </a>
+        </div>
+      </div>
+    }
+  }
   get smartphonePanel () {
     return <div className='panel'>
       <div className='settingsPanelDivider'>
@@ -362,7 +387,10 @@ class BitcoinDashboard extends ImmutableComponent {
         : null
       }
       <div className='board'>
-        {this.coinbasePanel}
+        { (this.userInAmerica)
+          ? this.coinbasePanel
+          : this.exchangePanel
+        }
         <div className='panel'>
           <div className='settingsPanelDivider'>
             <span className='bitcoinIcon fa-stack fa-lg'>
diff --git a/less/about/preferences.less b/less/about/preferences.less
index d7f770ce83d..7a536044e5d 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -785,6 +785,12 @@ div.nextPaymentSubmission {
         top: 0;
       }
     }
+    .visitText {
+      color: @braveOrange;
+      line-height: 45px;
+      margin: 0 13px;
+      font-size: 14px;
+    }
     #bitcoinPaymentURL {
       cursor: pointer;
       background-color: @lightGray;