Bring back Your Tip as Your Payment

js/gratipay.js

@@ -14,7 +14,7 @@ Gratipay.init = function() {
     Gratipay.forms.initCSRF();
     Gratipay.signIn();
     Gratipay.signOut();
-    Gratipay.tips.initSupportGratipay();
+    Gratipay.payments.initSupportGratipay();
 };
 
 Gratipay.error = function(jqXHR, textStatus, errorThrown) {

js/gratipay/payments.js

@@ -0,0 +1,86 @@
+Gratipay.payments = {};
+
+Gratipay.payments.init = function() {
+
+    Gratipay.forms.jsEdit({
+        confirmBeforeUnload: true,
+        hideEditButton: true,
+        root: $('.your-payment.js-edit'),
+        success: function(data) {
+            Gratipay.notification(data.msg, 'success');
+            Gratipay.payments.afterTipChange(data);
+        }
+    });
+
+    $('.your-payment button.edit').click(function() {
+        $('.your-payment input').focus();
+    });
+
+    $('.your-payment button.stop').click(function() {
+        $('.your-payment input').val('0');
+        $('.your-payment button.save').click();
+    });
+
+    $('.your-payment button.cancel').click(function() {
+        $('.your-payment form').trigger('reset');
+    });
+
+    // Cancel if the user presses the Escape key
+    $('.your-payment input').keyup(function(e) {
+        if (e.keyCode === 27)
+            $('.your-payment button.cancel').click();
+    });
+};
+
+
+Gratipay.payments.initSupportGratipay = function() {
+    $('.support-gratipay button').click(function() {
+        var amount = parseFloat($(this).attr('data-amount'), 10);
+        Gratipay.payments.set('Gratipay', amount, function(data) {
+            Gratipay.notification(data.msg, 'success');
+            $('.support-gratipay').slideUp();
+
+            // If you're on your own giving page ...
+            var payment_on_giving = $('.your-payment[data-team="Gratipay"]');
+            if (payment_on_giving.length > 0) {
+                payment_on_giving[0].defaultValue = amount;
+                payment_on_giving.attr('value', amount.toFixed(2));
+            }
+        });
+    });
+
+    $('.support-gratipay .no-thanks').click(function(event) {
+        event.preventDefault();
+        jQuery.post('/ride-free.json')
+            .success(function() { $('.support-gratipay').slideUp(); })
+            .fail(Gratipay.error)
+    });
+};
+
+
+Gratipay.payments.afterTipChange = function(data) {
+    $('.my-total-giving').text(data.total_giving_l);
+    $('.total-receiving[data-team="'+data.team_id+'"]').text(data.total_receiving_team_l);
+    $('#payment-prompt').toggleClass('needed', data.amount > 0);
+    $('.nsupporters[data-team="'+data.team_id+'"]').text(data.nsupporters);
+
+    var $your_payment = $('.your-payment[data-team="'+data.team_id+'"]');
+    if ($your_payment) {
+        var $input = $your_payment.find('input');
+        $input[0].defaultValue = $input.val();
+        $your_payment.find('span.amount').text(data.amount_l);
+        $your_payment.find('.edit').toggleClass('not-zero', data.amount > 0);
+        $your_payment.find('.stop').toggleClass('zero', data.amount === 0);
+    }
+};
+
+
+Gratipay.payments.set = function(team, amount, callback) {
+
+    // send request to set up a recurring payment
+    $.post('/' + team + '/subscription.json', { amount: amount }, function(data) {
+        if (callback) callback(data);
+        Gratipay.payments.afterTipChange(data);
+    })
+    .fail(Gratipay.error);
+};

scss/components/cta.scss

@@ -8,7 +8,7 @@
         color: $white;
     }
 
-    .your-tip .amount {
+    .your-payment .amount {
         /* Match content h1 */
         font: bold 28px/37px $Ideal;
     }
@@ -17,7 +17,7 @@
         font: normal 14px/14px $Ideal;
     }
 
-    .your-tip {
+    .your-payment {
         input {
             width: 120px;
             height: 33px;

templates/your-payment.html

@@ -0,0 +1,38 @@
+{% if user.ANON %}
+    <div class="right">
+        {% include "templates/sign-in-using-to-give.html" %}
+    </div>
+{% else %}
+    <div class="cta">
+        {% set subscription = user.participant.get_subscription_to(team.slug) %}
+        <h2>{{ _('Your Payment') }}</h2>
+        <div class="js-edit your-payment {{ 'anon' if user.ANON }}" data-team="{{ team.id }}">
+            <div class="view">
+                <span class="amount">{{ format_currency(subscription.amount, 'USD') }}</span>
+                <div class="per-week">{{ _("per week") }}</div>
+                <button class="edit {{ 'not-zero' if subscription.amount > 0 }}">
+                    <span class="zero">{{ _("Support {0}", team.name) }}</span>
+                    <span class="not-zero">{{ _("Edit") }}</span>
+                </button>
+            </div>
+            <form class="edit" action="/{{ team.slug }}/subscription.json">
+                $
+                <input type="text" name="amount" class="amount"
+                       value="{{ format_decimal(subscription.amount) }}"
+                       min="0" max="1000">
+                <div class="per-week">{{ _("per week") }}</div>
+                <button class="save">{{ _("Save") }}</button>
+                <button class="cancel">{{ _("Cancel") }}</button>
+                <button class="stop {{ 'zero' if not subscription.amount }}">{{ _("Stop Giving") }}</button>
+            </form>
+        </div>
+
+        {% if not subscription.is_funded %}
+        <div id="payment-prompt" class="{{ 'needed' if subscription.amount > 0 }}">
+            {{ _("Back your payment with a {0}credit card{1} to make sure it goes through!",
+                 "<a href='/~%s/routes/credit-card.html'>"|safe % user.participant.username,
+                 "</a>"|safe) }}
+        </div>
+        {% endif %}
+    </div>
+{% endif %}

www/%team/index.html.spt

@@ -29,6 +29,10 @@ title = name = team.name
     <meta name="og:image" content="{{ website.asset('gratipay.opengraph.png') }}" />
 {% endblock %}
 
+{% block sidebar %}
+{% include "templates/your-payment.html" %}
+{% endblock %}
+
 {% block content %}
 <div class="col0">
     {% if team.is_approved in (None, False) %}
@@ -58,8 +62,6 @@ title = name = team.name
 {% endblock %}
 
 {% block scripts %}
-{% if user.participant == team.owner %}
-<script>$(document).ready(Gratipay.profile.init);</script>
-{% endif %}
+<script>$(document).ready(Gratipay.payments.init);</script>
 {{ super() }}
 {% endblock %}