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').remove();
    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) {
        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,
    }
  }
}