um-cseg/chez-betty

{% extends "base.jinja2" %}
{% import "deposit_cc_row.jinja2" as cc_row %}
{% set active_page = 'deposit_cc' %}

{% block title %}{{ _('Credit Card Deposit') }}{% endblock %}

{% block top %}
<h1 class="page-header">{{ _('Credit Card Deposit') }}</h1>
{% endblock %}


{% block content %}

<p>
{{ _('We use stripe to process credit card transactions.') }}
{{ _('Stripe charges 2.9% + $0.30 for each transaction.') }}
{{ _('We pass this charge directly onto you.') }}
{{ _('That is, if you wish to deposit $20 to your account, we will charge your card (20 + 0.30) / 0.971 = $20.91.') }}
</p>

<hr />

<dl class="dl-horizontal">
  <dt>{{ _('Account Balance') }}</dt>
  <dd id="user-balance">{{ user.balance|format_currency|safe }}</dd>
</dl>

<hr />

{% for pool in pools %}
<dl class="dl-horizontal">
  <dt>{{ _('%(pool_name)s Balance')|format(pool_name=pool.name) }}</dt>
  <dd id="pool-{{ pool.id }}-balance">{{ pool.balance|format_currency|safe }}</dd>
</dl>
{% endfor %}



{% if account == 'user' %}
{% set balance = user.balance %}
{% else %}
{% set balance = pool.balance %}
{% endif %}


<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Create New Deposit</h3>
  </div>
  <div class="panel-body">

    <dl class="dl-horizontal">
      <dt>Deposit To</dt>
      <dd>
      <select id="to-account">
        <option value="user" {% if account == 'user' %}selected{% endif %}>{{ _('User Account') }}</option>
        {% for pool in pools %}
        <option value="pool-{{ pool.id }}" {% if account == 'pool-'+pool.id|string %}selected{% endif %}>{{ pool.name }}</option>
        {% endfor %}
      </select>
      </dd>
    </dl>

    <table class="table table-bordered">
      <tr>
        <th>Deposit Amount</th>
        <th>Fees</th>
        <th>Amount Charged</th>
        <th>New Balance</th>
        <th></th>
      </tr>
      {{ cc_row.deposit_cc_custom(account, 20, balance, stripe_pk) }}
      {{ cc_row.deposit_cc_custom(account, 50, balance, stripe_pk) }}
      {{ cc_row.deposit_cc_custom(account, 100, balance, stripe_pk) }}
      <tr>
        <form action="/user/deposit_cc/custom" method="GET">
          <input type="hidden" name="betty_to_account" value="{{ account }}" class="cc-betty-to-account">
          <td><input type="text" class="form-control" id="deposit-amount" name="deposit-amount"></input></td>
          <td id="deposit-fee"></td>
          <td id="deposit-charge"></td>
          <td id="deposit-newbal"></td>
          <td><button type="submit" class="btn btn-default disabled" id="deposit-button">Pay Custom Amount</button></td>
        </form>
      </tr>
      <tr class="cc-in-debt"><td colspan="5" /></tr>
      <tr class="cc-in-debt">
        <td colspan="5">
          <h4>We prefer that users keep a positive balance if possible. Betty is
          largely funded on the credit of the administrators (grad students!).</h4>
          <h4>If you've graduated or otherwise moved on, we hope you enjoyed Betty.
          Please do us the courtesy of settling your debts.</h4>
        </td>
      </tr>
      {{ cc_row.deposit_cc_custom(account, -1.0*balance|float, balance, stripe_pk, 'cc-in-debt') }}
    </table>

  </div>
</div>

{% endblock %}

{% block onload %}
<script>
/* This js is used only on this page. It doesn't make sense to pull it into
   a separate js file. */

function update_bal () {
  var btn    = $('#deposit-button');

  var acct   = $('#to-account').val();

  var curbal;
  if ($('#'+acct+'-balance').text().charAt(0) == '-') {
    curbal = -parseFloat($('#'+acct+'-balance').text().slice(2));
  } else {
    curbal = parseFloat($('#'+acct+'-balance').text().slice(1));
  }

  var amount = parseFloat($('#deposit-amount').val());
  if (isNaN(amount) || (amount < 1)) {
    $('#deposit-fee').text('');
    $('#deposit-charge').text('');
    $('#deposit-newbal').text('');
    btn.addClass('disabled');
    return;
  }

  var charge = Number(((amount + 0.3) / 0.971).toFixed(2));
  var fee = charge - amount;
  var newbal = curbal + amount;
  $('#deposit-fee').text('$' + fee.toFixed(2));
  $('#deposit-charge').text('$' + charge.toFixed(2));
  $('#deposit-newbal').text('$' + newbal.toFixed(2));

  btn.removeClass('disabled');
}

function change_acct () {
  var acct   = $('#to-account').val();
  window.location = "/user/deposit_cc?acct="+acct;
}

$("#deposit-amount").on('input', update_bal);
$("#to-account").on('change', change_acct);

{% if account == 'user' %}
  {% set balance = user.balance %}
{% else %}
  {% set balance = pool.balance %}
{% endif %}
{% if balance < 0 %}
  $('.cc-in-debt').show();
{% endif %}
</script>
{% endblock %}