fix billing infos not sending

This commit is contained in:
thomas girod 2024-08-07 14:29:51 +02:00
parent cca9732925
commit 417f328206
3 changed files with 504 additions and 508 deletions

View File

@ -4,13 +4,11 @@
*/ */
const BillingInfoReqState = { const BillingInfoReqState = {
SUCCESS: 1, SUCCESS: 1,
FAILURE: 2 FAILURE: 2,
SENDING: 3,
}; };
document.addEventListener("alpine:init", () => { document.addEventListener("alpine:init", () => {
Alpine.store("bank_payment_enabled", false)
Alpine.store("billing_inputs", { Alpine.store("billing_inputs", {
data: et_data, data: et_data,
@ -21,37 +19,32 @@ document.addEventListener("alpine:init", () => {
this.data = await res.json(); this.data = await res.json();
document.getElementById("bank-submit-button").disabled = false; document.getElementById("bank-submit-button").disabled = false;
} }
} },
}) });
Alpine.data("billing_infos", () => ({ Alpine.data("billing_infos", () => ({
/** @type {BillingInfoReqState | null} */ /** @type {BillingInfoReqState | null} */
req_state: null, req_state: null,
async send_form() { async send_form() {
this.req_state = BillingInfoReqState.SENDING;
const form = document.getElementById("billing_info_form"); const form = document.getElementById("billing_info_form");
const submit_button = form.querySelector("input[type=submit]")
submit_button.disabled = true;
document.getElementById("bank-submit-button").disabled = true; document.getElementById("bank-submit-button").disabled = true;
this.req_state = null; let payload = Object.fromEntries(
Array.from(form.querySelectorAll("input, select"))
let payload = form.querySelectorAll("input") .filter((elem) => elem.type !== "submit" && elem.value)
.values() .map((elem) => [elem.name, elem.value]),
.filter((elem) => elem.type === "text" && elem.value) );
.reduce((acc, curr) => acc[curr.name] = curr.value, {});
const country = form.querySelector("select");
if (country && country.value) {
payload[country.name] = country.value;
}
const res = await fetch(billing_info_url, { const res = await fetch(billing_info_url, {
method: "PUT", method: "PUT",
body: JSON.stringify(payload), body: JSON.stringify(payload),
}); });
this.req_state = res.ok ? BillingInfoReqState.SUCCESS : BillingInfoReqState.FAILURE; this.req_state = res.ok
? BillingInfoReqState.SUCCESS
: BillingInfoReqState.FAILURE;
if (res.ok) { if (res.ok) {
Alpine.store("billing_inputs").fill(); Alpine.store("billing_inputs").fill();
} }
submit_button.disabled = false;
}, },
get_alert_color() { get_alert_color() {
@ -72,8 +65,6 @@ document.addEventListener("alpine:init", () => {
return billing_info_failure_message; return billing_info_failure_message;
} }
return ""; return "";
} },
})) }));
}) });

View File

@ -80,7 +80,7 @@
<br> <br>
<br> <br>
<div <div
x-show="!!req_state" x-show="[BillingInfoReqState.SUCCESS, BillingInfoReqState.FAILURE].includes(req_state)"
class="alert" class="alert"
:class="'alert-' + get_alert_color()" :class="'alert-' + get_alert_color()"
x-transition x-transition
@ -93,6 +93,7 @@
<input <input
type="submit" class="btn btn-blue clickable" type="submit" class="btn btn-blue clickable"
value="{% trans %}Validate{% endtrans %}" value="{% trans %}Validate{% endtrans %}"
:disabled="req_state === BillingInfoReqState.SENDING"
> >
</form> </form>
</div> </div>
@ -119,6 +120,8 @@
{% endif %} {% endif %}
{% if basket.contains_refilling_item %} {% if basket.contains_refilling_item %}
<p>{% trans %}AE account payment disabled because your basket contains refilling items.{% endtrans %}</p> <p>{% trans %}AE account payment disabled because your basket contains refilling items.{% endtrans %}</p>
{% elif basket.total > user.account_balance %}
<p>{% trans %}AE account payment disabled because you do not have enough money remaining.{% endtrans %}</p>
{% else %} {% else %}
<form method="post" action="{{ url('eboutic:pay_with_sith') }}" name="sith-pay-form"> <form method="post" action="{{ url('eboutic:pay_with_sith') }}" name="sith-pay-form">
{% csrf_token %} {% csrf_token %}
@ -134,8 +137,8 @@
const billing_info_url = '{{ url("api:put_billing_info", user_id=request.user.id) }}'; const billing_info_url = '{{ url("api:put_billing_info", user_id=request.user.id) }}';
const et_data_url = '{{ url("api:etransaction_data") }}'; const et_data_url = '{{ url("api:etransaction_data") }}';
const billing_info_exist = {{ "true" if billing_infos else "false" }}; const billing_info_exist = {{ "true" if billing_infos else "false" }};
const billing_info_success_message = '{% trans %}Billing info registration success{% endtrans %}'; const billing_info_success_message = "{% trans %}Billing info registration success{% endtrans %}";
const billing_info_failure_message = '{% trans %}Billing info registration failure{% endtrans %}'; const billing_info_failure_message = "{% trans %}Billing info registration failure{% endtrans %}";
{% if billing_infos %} {% if billing_infos %}
const et_data = {{ billing_infos|safe }} const et_data = {{ billing_infos|safe }}

File diff suppressed because it is too large Load Diff