Use django messages for billing info ux

This commit is contained in:
2025-04-13 00:20:57 +02:00
parent d6e858e0e3
commit 42317bfecc
6 changed files with 83 additions and 69 deletions

View File

@ -1,8 +1,8 @@
<span>
<div id=billing-infos-fragment>
<div
class="collapse"
:class="{'shadow': collapsed}"
x-data="{collapsed: !{{ "true" if billing_infos_state == BillingInfoState.VALID and not form.errors else "false" }}}"
x-data="{collapsed: {{ "true" if messages or form.errors else "false" }}}"
>
<div class="collapse-header clickable" @click="collapsed = !collapsed">
<span class="collapse-header-text">
@ -17,11 +17,12 @@
hx-trigger="submit"
hx-post="{{ action }}"
hx-swap="outerHTML"
hx-target="closest span"
hx-target="#billing-infos-fragment"
x-show="collapsed"
>
{% csrf_token %}
{{ form.as_p() }}
<br>
<input
type="submit" class="btn btn-blue clickable"
value="{% trans %}Validate{% endtrans %}"
@ -31,20 +32,11 @@
<br>
{% if billing_infos_state == BillingInfoState.EMPTY %}
<div class="alert alert-yellow">
{% trans trimmed %}
You must fill your billing infos if you want to pay with your credit card
{% endtrans %}
</div>
{% elif billing_infos_state == BillingInfoState.MISSING_PHONE_NUMBER %}
<div class="alert alert-yellow">
{% trans trimmed %}
The Crédit Agricole changed its policy related to the billing
information that must be provided in order to pay with a credit card.
If you want to pay with your credit card, you must add a phone number
to the data you already provided.
{% endtrans %}
</div>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
</span>
</div>

View File

@ -16,7 +16,7 @@
<h3>{% trans %}Eboutic{% endtrans %}</h3>
<script type="text/javascript">
let billingInfos = {{ billing_infos|tojson }};
let billingInfos = {{ billing_infos|safe }};
</script>
<div x-data="etransaction(billingInfos)">