healthchecks/templates/accounts/billing.html

{% 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><a href="{% url 'hc-appearance' %}">Appearance</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="[email protected]"
                        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-3.6.0.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/billing.js' %}"></script>
{% endcompress %}
{% endblock %}