98 lines
2.4 KiB
JavaScript
98 lines
2.4 KiB
JavaScript
import { Controller } from "@hotwired/stimulus";
|
|
import { loadStripe } from "@stripe/stripe-js";
|
|
|
|
export default class extends Controller {
|
|
static targets = ["key", "submit", "firstname", "lastname", "email", "phone"];
|
|
|
|
stripe;
|
|
|
|
async connect() {
|
|
this.stripe = await loadStripe(this.keyTarget.textContent);
|
|
}
|
|
|
|
addEntry(event) {
|
|
event.preventDefault();
|
|
|
|
const formClone = this.element.querySelector("form").cloneNode(true);
|
|
|
|
formClone.querySelectorAll("select").forEach((input) => {
|
|
input.value = "1";
|
|
});
|
|
formClone.querySelector("input").value = "";
|
|
|
|
this.element.querySelector(".forms").appendChild(formClone);
|
|
}
|
|
|
|
removeEntry(event) {
|
|
event.preventDefault();
|
|
|
|
if (document.querySelector(".forms").childElementCount === 1) {
|
|
return;
|
|
}
|
|
|
|
event.target.closest("form").remove();
|
|
}
|
|
|
|
submit(event) {
|
|
event.preventDefault();
|
|
|
|
this.submitTarget.querySelector("span").classList.add("hidden");
|
|
this.submitTarget.querySelector("svg").classList.remove("hidden");
|
|
|
|
const forms = document.querySelectorAll("form");
|
|
const personalData = this.getPersonalData();
|
|
const ticketData = this.getTicketData(forms);
|
|
|
|
const formData = {
|
|
personal: personalData,
|
|
tickets: ticketData,
|
|
};
|
|
|
|
fetch("/ticket/submit", {
|
|
method: "POST",
|
|
body: JSON.stringify(formData),
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
}).then((response) => {
|
|
if (!response.ok) {
|
|
this.submitTarget.querySelector("svg").classList.add("hidden");
|
|
this.submitTarget.querySelector("span").classList.remove("hidden");
|
|
alert("An error occurred");
|
|
} else {
|
|
response.json().then((data) => {
|
|
this.stripe.redirectToCheckout({
|
|
sessionId: data.id,
|
|
});
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
getTicketData(forms) {
|
|
const formData = [];
|
|
forms.forEach((form) => {
|
|
formData.push(this.extractFormData(form));
|
|
});
|
|
|
|
return formData;
|
|
}
|
|
|
|
getPersonalData() {
|
|
return {
|
|
firstname: this.firstnameTarget.value,
|
|
lastname: this.lastnameTarget.value,
|
|
email: this.emailTarget.value,
|
|
phone: this.phoneTarget.value,
|
|
};
|
|
}
|
|
|
|
extractFormData(form) {
|
|
return {
|
|
ticket: parseInt(form.querySelector('select[name="ticket"]').value),
|
|
food: parseInt(form.querySelector('select[name="food"]').value),
|
|
note: form.querySelector('input[name="note"]').value,
|
|
};
|
|
}
|
|
}
|