|
| 1 | +const matchForm: HTMLFormElement | null = document.querySelector(".form"); |
| 2 | +const contactName: HTMLInputElement | null = document.querySelector("#name"); |
| 3 | +const phone: HTMLInputElement | null = document.querySelector("#phone"); |
| 4 | +const email: HTMLInputElement | null = document.querySelector("#email"); |
| 5 | +const zipcode: HTMLInputElement | null = document.querySelector("#zipcode"); |
| 6 | +const month: HTMLInputElement | null = document.querySelector("#month"); |
| 7 | +const day: HTMLInputElement | null = document.querySelector("#day"); |
| 8 | +const year: HTMLInputElement | null = document.querySelector("#year"); |
| 9 | +const otherInfo: HTMLTextAreaElement | null = |
| 10 | + document.querySelector("#other-info"); |
| 11 | +const submitButton: HTMLButtonElement | null = document.querySelector( |
| 12 | + 'button[type="submit"]', |
| 13 | +); |
| 14 | +const formError: HTMLDivElement | null = document.querySelector("#form-error"); |
| 15 | + |
| 16 | +interface DoulaMatchFormRequest { |
| 17 | + name?: string; |
| 18 | + phone: string; |
| 19 | + email: string; |
| 20 | + zipcode: string; |
| 21 | + estimatedDueDate: { |
| 22 | + month: string; |
| 23 | + day: string; |
| 24 | + year: string; |
| 25 | + }; |
| 26 | + services: string[]; |
| 27 | + birthLocation: string; |
| 28 | + otherInfo: string; |
| 29 | +} |
| 30 | + |
| 31 | +async function sendMatchForm(data: DoulaMatchFormRequest): Promise<void> { |
| 32 | + const url = matchForm?.dataset["apiUrl"]; |
| 33 | + if (!url) { |
| 34 | + throw new Error("API URL not found"); |
| 35 | + } |
| 36 | + |
| 37 | + const response = await fetch(url, { |
| 38 | + method: "POST", |
| 39 | + body: JSON.stringify(data), |
| 40 | + headers: { |
| 41 | + "Content-Type": "application/json", |
| 42 | + }, |
| 43 | + }); |
| 44 | + |
| 45 | + if (!response.ok) { |
| 46 | + throw new Error(`HTTP error! status: ${String(response.status)}`); |
| 47 | + } |
| 48 | + |
| 49 | + location.href = "/thank-you-for-your-match-request"; |
| 50 | +} |
| 51 | + |
| 52 | +const doSubmit = async () => { |
| 53 | + if (submitButton) { |
| 54 | + submitButton.disabled = true; |
| 55 | + submitButton.textContent = "Sending..."; |
| 56 | + } |
| 57 | + if (formError) { |
| 58 | + formError.textContent = ""; |
| 59 | + } |
| 60 | + |
| 61 | + // eslint-disable-next-line unicorn/prefer-spread |
| 62 | + const services: string[] = Array.from( |
| 63 | + document.querySelectorAll<HTMLInputElement>( |
| 64 | + 'input[type="checkbox"]:checked', |
| 65 | + ), |
| 66 | + ).map((checkbox: HTMLInputElement) => checkbox.id); |
| 67 | + |
| 68 | + const birthLocation = |
| 69 | + document.querySelector<HTMLInputElement>( |
| 70 | + 'input[name="birth-location"]:checked', |
| 71 | + )?.id ?? "n/a"; |
| 72 | + |
| 73 | + const formData: DoulaMatchFormRequest = { |
| 74 | + name: contactName?.value ?? "", |
| 75 | + phone: phone?.value ?? "", |
| 76 | + email: email?.value ?? "", |
| 77 | + zipcode: zipcode?.value ?? "", |
| 78 | + estimatedDueDate: { |
| 79 | + month: month?.value ?? "", |
| 80 | + day: day?.value ?? "", |
| 81 | + year: year?.value ?? "", |
| 82 | + }, |
| 83 | + services, |
| 84 | + birthLocation, |
| 85 | + otherInfo: otherInfo?.value ?? "", |
| 86 | + }; |
| 87 | + |
| 88 | + try { |
| 89 | + // console.log(formData); |
| 90 | + await sendMatchForm(formData); |
| 91 | + } catch (error) { |
| 92 | + console.error("Failed to send match form:", error); |
| 93 | + if (formError) { |
| 94 | + formError.textContent = |
| 95 | + "Sorry, there was an error sending your message. Please try again later."; |
| 96 | + } |
| 97 | + if (submitButton) { |
| 98 | + submitButton.disabled = false; |
| 99 | + submitButton.textContent = "Submit Information"; |
| 100 | + } |
| 101 | + } |
| 102 | +}; |
| 103 | + |
| 104 | +if (submitButton) { |
| 105 | + submitButton.addEventListener("click", (event: Event) => { |
| 106 | + event.preventDefault(); |
| 107 | + event.stopPropagation(); |
| 108 | + void doSubmit(); |
| 109 | + }); |
| 110 | +} |
| 111 | + |
| 112 | +const birthDoulaCheckbox = |
| 113 | + document.querySelector<HTMLInputElement>("#birth-doula"); |
| 114 | +const birthLocationFieldset = document.querySelector<HTMLFieldSetElement>( |
| 115 | + "#birth-location-fieldset", |
| 116 | +); |
| 117 | + |
| 118 | +if (birthDoulaCheckbox && birthLocationFieldset) { |
| 119 | + birthDoulaCheckbox.addEventListener("change", () => { |
| 120 | + birthLocationFieldset.style.display = birthDoulaCheckbox.checked |
| 121 | + ? "grid" |
| 122 | + : "none"; |
| 123 | + }); |
| 124 | +} |
0 commit comments