agilentics / boiler 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
{% extends "shell.html" %}
{% block title %}Plan & billing{% endblock %}

{# Everything on this page is painted from /api/subscription rather than
   rendered here. One reason: the customer returns from Stripe's hosted checkout
   to this URL, and the webhook that promotes them may land a moment before or a
   moment after they do. A page that fetches can be told to fetch again; a page
   baked at render time would show the old plan and look broken. #}

{% block content %}
<div class="card">
  <h1>Plan &amp; billing</h1>
  <p class="muted">What this organisation is on, what it is using, and how to
     change it.</p>
  <p class="note" id="checkout-note" hidden></p>
</div>

<div class="card">
  <h2>Current plan</h2>
  <p id="plan-line">Loading…</p>
  <p class="muted" id="plan-period" hidden></p>
  <p class="note" id="plan-exempt" hidden>
    This organisation is not billed, so no limit applies to it.
  </p>
  <p class="error" id="plan-error" hidden></p>

  {# Hidden until the fetch says billing is configured AND this caller may use
     it. Hiding is not the permission check - the routes behind these buttons
     refuse a member on their own (app/endpoints/billing.py). #}
  <div id="plan-actions" hidden>
    <button type="button" id="portal">Manage payment method</button>
    <button type="button" id="cancel" class="button-secondary">Cancel plan</button>
    <button type="button" id="resume" class="button-secondary" hidden>Keep plan</button>
  </div>
  <p class="muted" id="billing-off" hidden>
    Billing is not configured on this deployment, so every organisation stays on
    the free plan.
  </p>
</div>

<div class="card">
  <h2>Usage</h2>
  <table class="rows">
    <tbody id="meters"></tbody>
  </table>
</div>

<div class="card">
  <h2>Plans</h2>
  <table class="rows">
    <thead>
      <tr><th>Plan</th><th>Price</th><th>Includes</th><th></th></tr>
    </thead>
    <tbody id="tiers"></tbody>
  </table>
</div>
{% endblock %}

{% block page_scripts %}
<script src="/static/js/billing.js"></script>
{% endblock %}