You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

552 lines
22 KiB

{% extends "base.html" %}
{% load compress static hc_extras %}
{% block title %}Account Settings - {{ site_name }}{% endblock %}
{% block content %}
<div class="row">
<div class="col-sm-12">
<h1 class="settings-title">
Settings
<small>{{ request.user.email}}</small>
</h1>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="{% url 'hc-profile' %}">Account</a></li>
<li class="active"><a href="{% url 'hc-billing' %}">Billing</a></li>
<li><a href="{% url 'hc-notifications' %}">Email Reports</a></li>
</ul>
</div>
<div class="col-sm-9 col-md-9">
{% if messages %}
<div class="alert alert-danger">
<p>
<strong>We're sorry!</strong> There was a problem setting
up the subscription. Response from payment gateway:</p>
{% for message in messages %}
<p class="error-message">{{ message }}</p>
{% endfor %}
</div>
{% endif %}
<div class="row">
<div class="col-sm-6">
<div class="panel panel-{{ set_plan_status }}">
<div class="panel-body settings-block">
<h2>Billing Plan</h2>
<table class="table">
<tr>
<td>Current Plan</td>
<td>{{ sub.plan_name|default:"Hobbyist" }}</td>
</tr>
{% if sub.subscription_id %}
<tr>
<td>Next Payment</td>
<td id="next-billing-date">
<span class="loading">loading…</span>
</td>
</tr>
{% endif %}
<tr>
<td>Checks Used</td>
{% with num_checks=profile.num_checks_used %}
<td {% if num_checks >= profile.check_limit %} class="at-limit" {% endif %}>
<span>{{ num_checks }} of {{ profile.check_limit }}</span>
</td>
{% endwith %}
</tr>
</table>
<button
data-toggle="modal"
{% if sub.address_id %}
data-target="#change-billing-plan-modal"
{% else %}
data-target="#no-billing-address-modal"
{% endif %}
class="btn btn-default pull-right">
Change Billing Plan
</button>
</div>
{% if set_plan_status == "success" %}
<div class="panel-footer">
Your billing plan has been updated!
</div>
{% endif %}
</div>
{% if sub.plan_id %}
<div class="panel panel-{{ payment_method_status }}">
<div class="panel-body settings-block">
<h2>Payment Method</h2>
<p id="payment-method">
<span class="loading">loading…</span>
</p>
<button
id="update-payment-method"
class="btn btn-default pull-right">
Change Payment Method
</button>
</div>
{% if payment_method_status == "success" %}
<div class="panel-footer">
Your payment method has been updated!
</div>
{% endif %}
</div>
{% endif %}
</div>
<div class="col-sm-6">
<div class="panel panel-{{ address_status }}">
<div class="panel-body settings-block">
<h2>Billing Details</h2>
{% if sub.address_id %}
<div id="billing-address">
<span class="loading">loading…</span>
</div>
{% else %}
<p id="billing-address-missing" class="billing-empty">
Not set
</p>
{% endif %}
<button
data-toggle="modal"
data-target="#billing-address-modal"
class="btn btn-default pull-right">
Change Billing Details
</button>
</div>
{% if address_status == "success" %}
<div class="panel-footer">
Your billing details have been updated!
</div>
{% endif %}
</div>
</div>
</div>
<div class="panel panel-{{ send_invoices_status }}">
<div class="panel-body settings-block">
<h2>Invoices to Email</h2>
<p id="invoice-emailing-status">
{% if sub.send_invoices %}
Send the invoice to
{{ sub.invoice_email|default:request.user.email }}
each time my payment method is successfully charged.
{% else %}
Do not email invoices to me.
{% endif %}
</p>
<button
data-toggle="modal"
data-target="#invoice-emailing-modal"
class="btn btn-default pull-right">
Change Preference
</button>
</div>
{% if send_invoices_status == "success" %}
<div class="panel-footer">
Your preferences have been updated!
</div>
{% endif %}
</div>
<div class="panel panel-default">
<div class="panel-body settings-block">
<h2>Billing History</h2>
<div id="billing-history">
<span class="loading">loading…</span>
</div>
</div>
</div>
</div>
</div>
{% if sub.address_id %}
<div id="change-billing-plan-modal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4>Change Billing Plan</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-3">
<div id="plan-hobbyist" class="panel plan {% if sub.plan_id == "" %}selected{% endif %}">
<div class="marker">Selected Plan</div>
<h2>Hobbyist</h2>
<ul>
<li>Checks: 20</li>
<li>Team size: 3</li>
<li>Log entries: 100</li>
</ul>
<h3>Free</h3>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div id="plan-supporter" class="panel plan {% if sub.is_supporter %}selected{% endif %}">
<div class="marker">Selected Plan</div>
<h2>Supporter</h2>
<ul>
<li>Checks: 20</li>
<li>Team size: 3</li>
<li>Log entries: 1000</li>
</ul>
<h3>
<span id="supporter-price"></span>
<small>/ month</small>
</h3>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div id="plan-business" class="panel plan {% if sub.is_business %}selected{% endif %}">
<div class="marker">Selected Plan</div>
<h2>Business</h2>
<ul>
<li>Checks: 100</li>
<li>Team size: 10</li>
<li>Log entries: 1000</li>
</ul>
<h3>
<span id="business-price"></span>
<small>/ month</small>
</h3>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div id="plan-business-plus" class="panel plan {% if sub.is_business_plus %}selected{% endif %}">
<div class="marker">Selected Plan</div>
<h2>Business Plus</h2>
<ul>
<li>Checks: 1000</li>
<li>Team size: Unlim.</li>
<li>Log entries: 1000</li>
</ul>
<h3>
<span id="business-plus-price"></span>
<small>/ month</small>
</h3>
</div>
</div>
</div>
<div class="row">
<div id="billing-periods" class="col-sm-6">
<p>Billing Period</p>
<label class="radio-container">
<input
id="billing-monthly"
type="radio"
name="billing_period"
value="monthly"
{% if not sub.is_annual %}checked{% endif %}>
<span class="radiomark"></span>
Monthly
</label>
<label class="radio-container">
<input
id="billing-annual"
type="radio"
name="billing_period"
value="annual"
{% if sub.is_annual %} checked {% endif %}>
<span class="radiomark"></span>
Annual, 20% off
</label>
</div>
</div>
<div class="text-warning">
<strong>No proration.</strong> We currently do not
support proration when changing billing plans.
Changing the plan starts a new billing cycle
and charges your payment method.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="change-plan-btn" type="button" class="btn btn-primary" disabled="disabled">
Change Billing Plan
</button>
</div>
</div>
</div>
</div>
{% endif %}
{% if sub.address_id %}
<div id="payment-method-modal" class="modal pm-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4>Payment Method</h4>
</div>
<div class="modal-body">
<div id="dropin"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
<button id="payment-form-submit" type="button" class="btn btn-primary" disabled>
Confirm Payment Method
</button>
</div>
</div>
</div>
</div>
{% endif %}
{% if not sub.address_id %}
<div id="no-billing-address-modal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4>Country not specified.</h4>
</div>
<div class="modal-body">
<p>For tax accounting purposes, please specify
your <strong>Country</strong> in the "Billing Details"
section.
</p>
<p>
Optionally, add your
<strong>company name</strong>, <strong>address</strong>
and <strong>VAT ID</strong>
to have them displayed on invoices.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
{% endif %}
<div id="billing-address-modal" class="modal">
<div class="modal-dialog">
<form action="{% url 'hc-billing-address' %}" method="post">
{% csrf_token %}
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4>Billing Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label for="company">
Company
</label>
<input
id="company"
name="company"
type="text"
class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="extended_address">
VAT ID
</label>
<input
id="extended_address"
name="extended_address"
type="text"
class="form-control" />
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="company">Street Address</label>
<input
id="street_address"
name="street_address"
type="text"
class="form-control" />
</div>
</div>
<div class="col-sm-6">
<label for="locality">
City
</label>
<div class="form-group">
<input
id="locality"
name="locality"
type="text"
class="form-control" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="region">
State / Region
</label>
<input
id="region"
name="region"
type="text"
class="form-control" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="postal_Code">
Postal Code
</label>
<input
id="postal_code"
name="postal_code"
type="text"
class="form-control" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="country_code_alpha2">
Country
</label>
<select id="country_code_alpha2" class="form-control" name="country_code_alpha2">
{% include "payments/countries.html" %}
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
<div id="invoice-emailing-modal" class="modal pm-modal">
<div class="modal-dialog">
<form method="post">
{% csrf_token %}
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4>Invoices to Email</h4>
</div>
<div class="modal-body">
<label class="radio-container">
<input
type="radio"
name="send_invoices"
value="0"
{% if not sub.send_invoices %} checked {% endif %}>
<span class="radiomark"></span>
Do not email invoices to me
</label>
<label class="radio-container">
<input
type="radio"
name="send_invoices"
value="1"
{% if sub.send_invoices and not sub.invoice_email %} checked {% endif %}>
<span class="radiomark"></span>
Send invoices to {{ profile.user.email }}
</label>
<label class="radio-container">
<input
type="radio"
name="send_invoices"
value="2"
{% if sub.send_invoices and sub.invoice_email %} checked {% endif %}>
<span class="radiomark"></span>
Send invoices to this email address:
</label>
<input
id="invoice-email"
name="invoice_email"
placeholder="you@example.org"
value="{{ sub.invoice_email }}"
type="email"
class="form-control" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary">
Save Changes
</button>
</div>
</div>
</form>
</div>
</div>
<div id="please-wait-modal" class="modal pm-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Payment Method</h4>
</div>
<div class="modal-body">
Processing, please wait&hellip;
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" disabled>
Confirm Payment Method
</button>
</div>
</div>
</div>
</div>
<form id="update-subscription-form" method="post" action="{% url 'hc-update-subscription' %}">
{% csrf_token %}
<input id="nonce" type="hidden" name="nonce" />
<input type="hidden" id="old-plan-id" value="{{ sub.plan_id }}">
<input id="plan-id" type="hidden" name="plan_id" />
</form>
{% endblock %}
{% block scripts %}
<script src="https://js.braintreegateway.com/web/dropin/1.20.0/js/dropin.min.js"></script>
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/billing.js' %}"></script>
{% endcompress %}
{% endblock %}