abiball/assets/controllers/form_controller.js

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,
    };
  }
}