Connect to coinbase

gratipay · Feb 20, 2014 · 3929484 · kyungmin · Feb 20, 2014 · matthewfl
1 parent a858b01
commit 3929484
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 62 deletions.
diff --git a/js/gittip/payments.js b/js/gittip/payments.js
@@ -18,9 +18,10 @@ Gittip.payments.havePayments = false;
 Gittip.payments.processorAttempts = 0;
 
 Gittip.payments.submitDeleteForm = function(e) {
+    console.log('called');
     var item = $("#payout").length ? "bank account" : "credit card";
     var slug = $("#payout").length ? "bank-account" : "credit-card";
-    var msg = "Really disconnect your " + item + "?";
+    var msg = "Are you sure you want to remove " + item + "?";
     if (!confirm(msg)) {
         e.stopPropagation();
         e.preventDefault();
@@ -52,7 +53,7 @@ Gittip.payments.ba = {};
 
 Gittip.payments.ba.init = function(balanced_uri, participantId) {
     Gittip.participantId = participantId;
-    $('#delete form').submit(Gittip.payments.submitDeleteForm);
+    $('#ba-delete form').submit(Gittip.payments.submitDeleteForm);
     $('#payout').submit(Gittip.payments.ba.submit);
 
     // Lazily depend on Balanced.
@@ -170,7 +171,7 @@ Gittip.payments.ba.handleResponse = function (response) {
         setTimeout(function() {
             $('#status').removeClass('highlight');
         }, 8000);
-        $('#delete').show();
+        $('#ba-delete').show();
         Gittip.forms.clearFeedback();
         $('button#save').text('Save');
         setTimeout(function() {
@@ -180,7 +181,7 @@ Gittip.payments.ba.handleResponse = function (response) {
 
     function detailedFeedback(data) {
         $('#status').text('failing');
-        $('#delete').show();
+        $('#ba-delete').show();
         var messages = [data.error];
         if (data.problem == 'More Info Needed') {
             messages = [ "Sorry, we couldn't verify your identity. Please "
@@ -209,7 +210,7 @@ Gittip.payments.cc = {};
 
 Gittip.payments.cc.init = function(balanced_uri, participantId) {
     Gittip.participantId = participantId;
-    $('#delete form').submit(Gittip.payments.submitDeleteForm);
+    $('#cc-delete form').submit(Gittip.payments.submitDeleteForm);
     $('form#payment').submit(Gittip.payments.cc.submit);
 
     // Lazily depend on Balanced.
@@ -332,7 +333,7 @@ Gittip.payments.cc.handleResponse = function(response) {
         setTimeout(function() {
             $('#status').removeClass('highlight');
         }, 8000);
-        $('#delete').show();
+        $('#cc-delete').show();
         Gittip.forms.clearFeedback();
         $('button#save').text('Save');
         setTimeout(function() {
@@ -342,7 +343,7 @@ Gittip.payments.cc.handleResponse = function(response) {
 
     function detailedFeedback(data) {
         $('#status').text('failing');
-        $('#delete').show();
+        $('#cc-delete').show();
         var details = [];
         Gittip.forms.showFeedback(data.problem, [data.error]);
         $('button#save').text('Save');
@@ -362,15 +363,65 @@ Gittip.payments.cb = {};
 
 Gittip.payments.cb.init = function(balanced_uri, participantId) {
     Gittip.participantId = participantId;
+    $('#cb-delete form').submit(Gittip.payments.submitDeleteForm);
 
     // Lazily depend on Balanced.
-    var balanced_js = "https://js.balancedpayments.com/v1/balanced.js";
+    // var balanced_js = "https://js.balancedpayments.com/1.1/balanced.js";
+    var balanced_js = "https://js.balancedpayments.com/1.dev/balanced.js";
     jQuery.getScript(balanced_js, function() {
         balanced.init(balanced_uri);
-        balanced.network.create('coinbase', function(response) {
-            console.log(response);
-            // Gittip.coinbase_url = response.network_tokens[0].href;
-            Gittip.havePayments = true;
-        });
+        balanced.externalAccount.create('coinbase', Gittip.payments.cb.handleResponse);
     });
 };
+Gittip.payments.cb.handleResponse = function(response) {
+        var coinbase_confirm = '<div class="confirm">Successfully connected to your Coinbase account.</div>';
+        $('#hero').prepend(coinbase_confirm);
+
+    if (response.status_code !== 201) {
+        var msg = response.status.toString() + " " + response.error.description;
+        jQuery.ajax(
+            { type: "POST"
+            , url: "/coinbase.json"
+            , data: {action: 'store-error', msg: msg}
+             }
+        );
+
+        Gittip.forms.showFeedback(null, [response.error.description]);
+        return;
+    }
+
+    /* The request to tokenize the bank account succeeded. Now we need to
+     * validate the merchant information. We'll submit it to
+     * /bank-accounts.json and check the response code to see what's going
+     * on there.
+     */
+
+    function success() {
+        var coinbase_confirm = '<div class="confirm">Successfully connected to your Coinbase account.</div>';
+        $('#hero').prepend(coinbase_confirm);
+    }
+
+    function detailedFeedback(data) {
+        $('#status').text('failing');
+        $('#cb-delete').show();
+        var messages = [data.error];
+        if (data.problem == 'More Info Needed') {
+            messages = [ "Sorry, we couldn't verify your identity. Please "
+                       + "check, correct, and resubmit your details."
+            ];
+        }
+        Gittip.forms.showFeedback(data.problem, messages);
+        $('button#save').text('Save');
+    }
+
+    Gittip.forms.submit( "/coinbase.json"
+                       , {coinbase_uri: response.external_accounts[0].href}
+                       , success
+                       , detailedFeedback
+                        );
+}
+
+// for delete buttons in connected-accounts.html
+$('#cc-delete .close').click(Gittip.payments.submitDeleteForm);
+$('#ba-delete .close').click(Gittip.payments.submitDeleteForm);
+$('#cb-delete .close').click(Gittip.payments.submitDeleteForm);
diff --git a/js/gittip/tips.js b/js/gittip/tips.js
@@ -78,8 +78,9 @@ Gittip.tips.init = function() {
         if (amount == oldAmount)
             return;
 
-        if(isAnon)
+        if(isAnon) {
             alert("Please sign in first");
+        }
         else {
             // send request to change tip
             $.post('/' + tippee + '/tip.json', { amount: amount }, function(data) {
@@ -99,30 +100,31 @@ Gittip.tips.init = function() {
                     $('.on-elsewhere .ready .number').text(
                         parseInt($('.on-elsewhere .ready .number').text(),10) + 1);
 
+                if (has_payment_method) {
+                    // show payment method dialog
+                    $('#payment-method-dialog').show();
+                    $("#payment-method").css({
+                        "marginLeft": -($("#payment-method").width()/2),
+                        "marginTop": -($("#payment-method").height()/2)
+                    });
+                }
+
                 // update quick stats
                 $('.quick-stats a').text('$' + data.total_giving + '/wk');
+
+                // show confirmation message once
+                if ($('.box').has(".confirm").length == 0){
+                    var notice = $('<div class="confirm">Your weekly gift has been updated.</div>');
+                    $('.nav').after(notice);
+                }
+                // update amount
+                $('.weekly-gift .amount').text('$' + $('input.my-tip').val() + ' / wk');
             })
             .fail(function() {
                 alert('Sorry, something went wrong while changing your tip. :(');
                 console.log.apply(console, arguments);
             })
         }
-        // show payment method dialog
-        if (has_payment_method) {
-            $('#payment-method-dialog').show();
-            $("#payment-method").css({
-                "marginLeft": -($("#payment-method").width()/2),
-                "marginTop": -($("#payment-method").height()/2)
-            });
-        }
-        // show confirmation message once
-        if ($('.box').has(".confirm").length == 0){
-            var notice = $('<div class="confirm">Your weekly gift has been updated.</div>');
-            $('.nav').after(notice);
-        }
-
-        // update amount
-        $('.weekly-gift .amount').text('$' + $('input.my-tip').val() + ' / wk');
     });
 
     // highlight radio selection    

diff --git a/scss/modules.scss b/scss/modules.scss
@@ -75,9 +75,14 @@ a.mini-user:hover {
         font-style: italic;
         color: $light-gray;
     }
+    #cc-delete, #cb-delete, #ba-delete {
+        display: inline-block;
+        float: right;
+        margin-top: -13px;
+    }
     a.btn {
         float: right;
-        margin-top: -6px;
+        margin-top: -13px;
     }
     table {
         width: 100%;
@@ -111,9 +116,24 @@ a.mini-user:hover {
         clear: both;
         color: $gray;
         text-transform: uppercase;
+        padding: 3px 0;
     }
     .account-details {
         padding: 10px;
+        position: relative;
+    }
+    .close {
+        position: absolute;
+        background-image: url("/assets/close_button.png");
+        background-size: cover;
+        width: 15px;
+        height: 15px;
+        top: 25px;
+        right: 20px;
+
+        &:hover {
+            cursor: pointer;
+        }        
     }
     .payments-by {
         background-image: url("/assets/payments-by.png");

diff --git a/scss/widgets/my_tip.scss b/scss/widgets/my_tip.scss
@@ -48,7 +48,7 @@ form.my-tip {
 
 .confirm {
     background-color: $yellow;
-    padding: 5px 0px;
+    padding: 8px 0px;
     font-size: 13px;
     color: $white;
 }
@@ -108,7 +108,7 @@ input.my-tip {
             .message {
                 font-size: 13px;
                 color: $gray;
-                padding: 5px 50px;
+                padding: 5px 30px 15px;
 
                 &:first-of-type {
                     padding-top: 20px;

diff --git a/templates/connected-accounts.html b/templates/connected-accounts.html
@@ -146,11 +146,16 @@ <h2>Send money
             <div class="account-type">Credit card</div>
             {% if participant.last_bill_result != "" %}
                 <span class="none">none</span>
-                {% if not user.ANON and user.participant == participant %}
-                    <a class="btn small" href="/credit-card.html">+ Add</a>
-                {% endif %}
+                <a class="btn small" href="/credit-card.html">+ Add</a>
             {% else %}
-                {{ participant.username }}
+                {{ card['brand'] }} {{ card['number'][-4:] }}
+                    <div id="cc-delete">
+                        <form action="credit-card.json" class="special" method="POST">
+                            <input type="hidden" name="action" value="delete">
+                            <div class="close" title="Delete card"></div>
+                        </form>
+                    </div>
+
             {% endif %}
         </td>
     </tr>
@@ -160,11 +165,17 @@ <h2>Send money
         </td>
         <td class="account-details">
             <div class="account-type">Coinbase</div>
-            {% if participant.last_bill_result != "" %}
+            {% if participant.last_ach_result != "" %}
                 <span class="none">none</span>
                 <a class="btn small" id="connect-coinbase" href="#">+ Add</a>
             {% else %}
-                {{ participant.username }}
+                <span class="none">connected</span>
+                <div id="cb-delete">
+                    <form action="bank-account.json" class="special" method="POST">
+                        <input type="hidden" name="action" value="delete">
+                        <div class="close" title="Delete card"></div>
+                    </form>
+                </div>
             {% endif %}
         </td>
     </tr>
@@ -188,7 +199,13 @@ <h2>Receive money
                 <span class="none">none</span>
                 <a class="btn small" href="/bank-account.html">+ Add</a>
             {% else %}
-                {{ participant.username }}
+                {{ bank_account['bank_name'] }}
+                <div id="ba-delete">
+                    <form action="bank-account.json" class="special" method="POST">
+                        <input type="hidden" name="action" value="delete">
+                        <div class="close" title="Delete card"></div>
+                    </form>
+                </div>
             {% endif %}
         </td>
     </tr>

diff --git a/templates/participant.tip.html b/templates/participant.tip.html
@@ -31,9 +31,10 @@
     {% endif %}
 </div>
 
-{% if no_coinbase %}
-<div class="promo-bar">
-    <img src="/assets/star.png" />
-    Now supporting Coinbase! <a class="coinbase" href="#">Connect your Coinbase account.</a>
-</div>
+{% if has_payment_method %}
+{% else %}
+    <div class="promo-bar">
+        <img src="/assets/star.png" />
+        Now supporting Coinbase! <a class="coinbase" href="#">Connect your Coinbase account.</a>
+    </div>
 {% endif %}
diff --git a/templates/payment-method-modal.html b/templates/payment-method-modal.html
@@ -5,7 +5,7 @@
         <div class="content">
             <h2>Set up payment method</h2>
             <div class="message"><b>Your weekly gift amount has been updated.</b></div>
-            <div class="message">The payment method you select will be applied to all gifts for all users.</div>
+            <div class="message">The amount will not be sent unless you have Gittip balance or payment method set up. The payment method you select will replace your previous payment method and be applied to all gifts for all users.</div>
 
             <div class="payment-option selected"><input type="radio" name="payment-option" id="credit" value="credit" checked><label for="credit">Add your credit/debit card</label></div>
             <div class="payment-option"><input type="radio" name="payment-option" id="coinbase" value="coinbase"><label for="coinbase">Connect your Coinbase account</label></div>

diff --git a/www/%username/index.html.spt b/www/%username/index.html.spt
@@ -2,6 +2,7 @@
 """
 import locale
 import balanced
+from gittip import billing
 
 from aspen import json, Response
 from aspen.utils import to_age
@@ -39,6 +40,33 @@ bountysource_account = accounts.bountysource
 venmo_account = accounts.venmo
 openstreetmap_account = accounts.openstreetmap
 
+status = ". . ."
+balanced_account_uri = None
+card = ""
+bank_account = ""
+
+if not user.ANON:
+    balanced_account_uri = user.participant.balanced_account_uri
+    stripe_customer_id = user.participant.stripe_customer_id
+
+    status = "missing"
+    if stripe_customer_id or balanced_account_uri:
+        if user.participant.last_bill_result is not None:
+            status = "working" if user.participant.last_bill_result == "" \
+                                                                 else "failing"
+    if balanced_account_uri:
+        card = billing.BalancedCard(balanced_account_uri)
+        bank_account = billing.BalancedBankAccount(balanced_account_uri)
+        working = user.participant.last_ach_result == ""
+        status = "connected" if working else "not connected"        
+
+        # the id on the card might not match unless the db
+        # is updated to use the new style of urls
+
+    else:
+        card = billing.StripeCard(stripe_customer_id)
+        assert stripe_customer_id == card['id']
+
 long_statement = len(participant.statement) > LONG_STATEMENT
 communities = [c for c in community.get_list_for(website.db, username) if c.is_member]
 if participant.number == 'singular':
@@ -68,14 +96,9 @@ else:
 
 {% block scripts %}
 <script>
-    marketplace_uri = "{{ balanced.Marketplace.my_marketplace.uri }}";
-    participant_username = "{{ user.participant.username }}";
-    has_payment_method = "{{ user.participant.last_bill_result }}";
-    if (has_payment_method == "") {
-        has_coinbase = false;
-    } else {
-        has_coinbase = true;
-    }
+    var marketplace_uri = "{{ balanced.Marketplace.my_marketplace.uri }}";
+    var participant_username = "{{ user.participant.username }}";
+    var has_payment_method = "{{ user.participant.last_bill_result }}";
 </script>
 {% if show_charts %}
 <script>