Add UI for payment processing

aleksis/apps/tezor/templates/tezor/invoice/full.html

@@ -10,6 +10,88 @@
     <h1>{% trans "Invoice" %} {{ object.transaction_id }} — {{ object.created.date }}</h1>
     <a class="btn colour-primary waves-effect waves-light" href="{% url 'invoice_group_by_pk' object.group.pk %}">{% trans "Back" %}</a>
 
+    <div class="row">
+      <div class="col s6">
+        <div class="card">
+          <div class="card-content">
+            <span class="card-title">{% trans "Billing information" %}</span>
+            <table class="highlight">
+              <tr>
+                <td>
+                  <i class="material-icons small iconify" data-icon="mdi:account-outline"></i>
+                </td>
+                <td>{{ object.billing_first_name }} {{object.billing_last_name }}</td>
+              </tr>
+              <tr>
+                <td rowspan="2">
+                  <i class="material-icons small iconify" data-icon="mdi:map-marker-outline"></i>
+                </td>
+                <td>{{ object.billing_address_1 }} {{ object.billing_address_2 }}</td>
+              </tr>
+              <tr>
+                <td>{{ object.billing_postcode }} {{ object.billing_city}}</td>
+              </tr>
+              <tr>
+                <td>
+                  <i class="material-icons small iconify" data-icon="mdi:email-outline"></i>
+                </td>
+                <td>
+                  <a href="mailto:{{ object.billing_email }}">{{ object.billing_email }}</a>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div class="col s6">
+        <div class="card">
+          <div class="card-content">
+            <span class="card-title">{% trans "Payment" %}</span>
+            <table class="highlight">
+              <tr>
+                <td>
+                  {% if object.variant == "paypal" %}
+                  <i class="material-icons iconify" data-icon="logos:paypal"></i>
+                  {% elif object.variant == "sofort" %}
+                  <i class="material-icons iconify" data-icon="simple-icons:klarna"></i>
+                  {% endif %}
+                </td>
+                <td>
+                  {{ object.variant }}
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  {% if object.status == "waiting" or object.status == "input" %}
+                  <i class="material-icons iconify" data-icon="mdi:cash-lock-open"></i>
+                  {% elif object.status == "rejected" or object.status == "error" %}
+                  <i class="material-icons iconify" data-icon="mdi:cash-remove"></i>
+                  {% elif objects.status == "preauth" %}
+                  <i class="material-icons iconfiy" data-icon="mdi:cash-lock"></i>
+                  {% elif objects.status == "confirmed" %}
+                  <i class="material-icons iconfiy" data-icon="mdi:cash-check"></i>
+                  {% elif object.status == "refunded" %}
+                  <i class="material-icons iconify" data-icon="mdi:cash-refund"></i>
+                  {% endif %}
+                </td>
+                <td>
+                  {{ object.get_status_display }}
+                </td>
+              </tr>
+            </table>
+          </div>
+          {% if object.status == "waiting" or object.status == "rejected" or object.status == "input" %}
+          <div class="card-action">
+            <a class="btn waves-effect waves-light green" href="{% url 'do_payment' object.token %}">
+              <i class="material-icons left iconify" data-icon="mdi:cash-fast"></i>
+              {% trans "Pay now" %}
+            </a>
+          </div>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
     {% render_table object.purchased_items_table %}
     {% render_table object.totals_table %}