abiball/assets/controllers/form_controller.js

70 lines
1.5 KiB
JavaScript

import { Controller } from "@hotwired/stimulus";
import {loadStripe} from "@stripe/stripe-js";
export default class extends Controller {
static targets = ['key'];
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();
const forms = document.querySelectorAll("form");
const formData = this.getFormData(forms);
fetch("/ticket/submit", {
method: "POST",
body: JSON.stringify(formData),
headers: {
"Content-Type": "application/json",
},
}).then((response) => {
if (!response.ok) {
alert("An error occurred");
} else {
response.json().then((data) => {
this.stripe.redirectToCheckout({
sessionId: data.id,
});
});
}
});
}
getFormData(forms) {
const formData = [];
forms.forEach((form) => {
formData.push(Object.fromEntries(new FormData(form).entries()));
});
return formData;
}
}