djaoapp/djaoapp/templates/saas/billing/index.html at main · djaodjin/djaoapp · GitHub

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
{% extends "saas/base_dashboard.html" %}

{% block saas_title %}{% trans %}Billing History{% endtrans %}{% endblock %}

{% block saas_help %}
<p class="lead">
{% trans %}Payments made on the platform.{% endtrans %}
</p>
<p>
{% trans %}You can manage the Credit Card on file for your subscription. You can also see the list of all payments made here.{% endtrans %}
</p>
{% endblock %}

{% block help_menus %}
{% if urls.organization.api_cancel_balance_due %}
<li class="divider-vertical"></li>
<li class="nav-item">
    <button id="cancel-balance-btn"
            class="btn btn-danger"
            data-bs-toggle="modal" data-bs-target="#cancel-balance">
        {% trans %}Cancel Balance{% endtrans %}
    </button>
</li>
{% endif %}
{% if urls.organization.vtcharge %}
<li class="divider-vertical"></li>
<li class="nav-item">
  <a id="one-time-charge" class="nav-link{% if request.path == urls.organization.vtcharge %} active{% endif %}" href="{{urls.organization.vtcharge}}">{% trans %}One-time Charge{% endtrans %}</a>
</li>
{% endif %}
{% endblock %}


{% block saas_page_layout %}
<billing-statement class="pt-3" inline-template id="billing-statement-container">
  <div>
    <div class="row"
         data-trip data-trip-index="1"
         data-trip-content="<h2>{% trans %}Billing{% endtrans %}</h2><p>{% trans %}All services you bought and the current balance due.{% endtrans %}</p><em>{% trans %}Use keyboard navigation or click 'Next' to move forward.{% endtrans %}</em>"
         data-trip-position="screen-center">
      <section id="balance" class="col-sm-6">
        <div class="p-4 border rounded h-100">
          <h3 class="pt-4">{% trans %}Balance{% endtrans %}</h3>
          <dl class="dl-horizontal">
            <dt data-trip data-trip-index="2"
                data-trip-content="<p>{% trans %}The amount you owe.{% endtrans %}</p>"
                data-trip-position="s">
                <i class="fa-solid fa-refresh fa-spin"
                   v-if="!itemsLoaded"></i>
                <span v-if="itemsLoaded" v-cloak>[[$globals.humanizeNumber(items.balance_amount, items.balance_unit, 0.01)]]</span>
            </dt>
            <dd>
                {% trans %}Balance{% endtrans %}
                <span v-if="!itemsLoaded || items.balance_amount == 0">{% trans %}due{% endtrans %}</span>
                <span
                    v-if="items.balance_amount > 0" v-cloak>{% trans %}due{% endtrans %} (<a href="{{urls.organization.balance}}">{% trans %}pay now{% endtrans %}</a>)
                </span>
                <span v-if="items.balance_amount < 0" v-cloak>{% trans %}credit{% endtrans %}</span>
            </dd>
          </dl>
        </div>
      </section>
      <section class="col-sm-6">
        <div class="p-4 border rounded">
          <h3 class="pt-4">{% trans %}Credit Card{% endtrans %}</h3>
          <dl class="dl-horizontal">
            <dt>{% trans %}card{% endtrans %}</dt>
            <dd class="last4">
              <i class="fa-solid fa-refresh fa-spin" v-if="!cardLoaded"></i>
              <span v-if="cardLoaded" v-cloak>[[last4]]</span>
            </dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>{% trans %}expires{% endtrans %}</dt>
            <dd class="exp_date">
              <i class="fa-solid fa-refresh fa-spin"
                 v-if="!cardLoaded"></i>
              <span v-if="cardLoaded" v-cloak>[[exp_date]]</span>
            </dd>
          </dl>
          <div class="text-center">
          <a href="{{urls.organization.update_card}}"
             data-trip data-trip-index="3" data-trip-content="<p>{% trans %}Update your credit card on file so you always pay promptly.{% endtrans %}</p>" data-trip-position="s">{% trans %}Update{% endtrans %}</a>
          </div>
        </div>
      </section>
      {% if urls.organization.api_cancel_balance_due %}
      <!-- modal dialog for cancelling balance due -->
      <form id="cancel-balance" class="modal fade"
            role="dialog" tabindex="-1" aria-hidden="true"
            aria-labelledby="{% trans %}Cancel balance due{% endtrans %}"
            method="post" action="."
            @submit.prevent="cancelBalance">
        <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="btn-close"
                      data-bs-dismiss="modal" aria-hidden="true"></button>
              <h4 class="modal-title">{% trans %}Cancel balance due{% endtrans %}</h4>
            </div>
            <div class="modal-body">
              <p>
{% trans %}Are you sure you would like to cancel the whole balance of{% endtrans %} [[$globals.humanizeNumber(items.balance_amount, items.balance_unit, 0.01)]] ?
              </p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline-primary"
                  data-bs-dismiss="modal">{% trans %}Cancel{% endtrans %}</button>
                <button class="btn btn-primary"
                  type="submit">{% trans %}OK{% endtrans %}</button>
            </div>
          </div>
        </div>
      </form>
      <!-- end of modal dialog -->
      {% endif %}
    </div>{# /.row #}
    {% include "saas/_transactions.html" %}
  </div>
</billing-statement>
{% endblock %}