Newsletter.astro

---
import oceanFloorLeft from "~/assets/design/ocean-floor-left.svg";
import oceanFloorRight from "~/assets/design/ocean-floor-right.svg";

import DecorativeImage from "./DecorativeImage.astro";
import Button from "./Button.astro";
import ContentArea from "./ContentArea.astro";
import Heading from "./Heading.astro";
---

<div class="newsletter" id="newsletter">
	<svg
		class="light-beam"
		fill="none"
		height="681"
		preserveAspectRatio="none"
		viewBox="0 0 1637 681"
		width="1637"
		xmlns="http://www.w3.org/2000/svg"
	>
		<path
			d="M1410.6 -435.752L-90.8221 681.162L187.092 841.197L925.996 768.169L1636.02 -450.454L1410.6 -435.752Z"
			fill="var(--colorBlueBright5)"
		>
		</path>
	</svg>

	<DecorativeImage class="ocean-floor-left" src={oceanFloorLeft} />
	<DecorativeImage class="ocean-floor-right" src={oceanFloorRight} />
	<ContentArea as="section" class="newsletter-contents">
		<Heading level="h2">
			Sign up to receive announcements and important SquiggleConf info.
		</Heading>

		<form action="/api/newsletter" id="newsletter-form" method="POST">
			<label class="email-label" for="email">Email Address</label>
			<input
				class="email-input"
				id="email"
				name="email"
				type="email"
				placeholder="cool.dev@awesome.com"
			/>
			<Button
				as="button"
				id="submit"
				size="large"
				type="submit"
				variant="light"
			>
				Subscribe
			</Button>
		</form>

		<p aria-live="assertive" id="newsletter-message"></p>
	</ContentArea>
</div>

<script>
	const form = document.getElementById("newsletter-form") as HTMLFormElement;
	const input = document.getElementById("email") as HTMLInputElement;
	const submit = document.getElementById("submit") as HTMLButtonElement;

	function setSubmitDisabled() {
		submit.disabled = !input.value;
	}

	input.addEventListener("change", setSubmitDisabled);
	setSubmitDisabled();

	function setMessage(text: string, status: "happy" | "unhappy") {
		const messageDiv = document.getElementById(
			"newsletter-message",
		) as HTMLDivElement;

		messageDiv.textContent = text;

		if (status === "unhappy") {
			messageDiv.classList.add("unhappy");
		} else {
			messageDiv.classList.remove("unhappy");
		}
	}

	form.addEventListener("submit", (event) => {
		event.preventDefault();

		const submitButton = form.querySelector("button") as HTMLButtonElement;
		submitButton.disabled = true;

		const emailInput = form.querySelector("input") as HTMLInputElement;
		const email = emailInput.value;

		const formBody = "userGroup=&email=" + encodeURIComponent(email);
		fetch(form.action, {
			method: "POST",
			body: formBody,
			headers: {
				"Content-Type": "application/x-www-form-urlencoded",
			},
		})
			.then((response) => [response.ok, response.text(), response] as const)
			.then(([ok, dataPromise, response]) => {
				dataPromise.then((data) => {
					if (ok) {
						setMessage("Thanks for signing up!", "happy");
						form.reset();
						return;
					}

					setMessage(
						`There was an issue: ${data || response.statusText}`,
						"unhappy",
					);
				});
			})
			.catch((error) => {
				setMessage(
					error.message === "Failed to fetch"
						? "Too many requests. Try again later, please?"
						: error.message,
					"unhappy",
				);
			})
			.finally(() => {
				submitButton.disabled = false;
			});
	});
</script>

<style>
	.newsletter {
		background: var(--colorBlueBright6);
		color: var(--colorWhiteIsh);
		padding: 3rem 0;
		overflow: hidden;
		position: relative;
		text-align: center;
	}

	.light-beam {
		position: absolute;
		left: 10%;
		width: 75%;
		height: 100%;
		top: 0;
	}

	.ocean-floor-left {
		bottom: 0;
		height: 90%;
		right: -10%;
	}

	.ocean-floor-right {
		bottom: 0;
		height: 90%;
		left: 50%;
	}

	.newsletter-contents {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		position: relative;
		z-index: 1;
	}

	h2 {
		font-family: var(--fontFamilyHeading);
		font-size: var(--fontSizeLarge);
		font-weight: var(--fontWeightMedium);
		line-height: 1;
		max-width: 25rem;
	}

	form {
		align-items: center;
		display: flex;
		flex-direction: column;
		font-family: var(--fontFamilyHeading);
	}

	.email-label {
		align-self: flex-start;
	}

	.email-input {
		background: var(--colorWhiteIsh);
		border: none;
		border-radius: 3px;
		color: var(--colorBlackIsh);
		font-family: var(--fontFamilyHeading);
		font-weight: var(--fontWeightSemibold);
		font-size: var(--fontSizeSmaller);
		margin: 0.5rem 0 1rem;
		max-width: 80vw;
		padding: 1rem 0.5rem;
		width: 25rem;
	}

	.email-input::placeholder {
		font-weight: var(--fontWeightMedium);
	}

	#newsletter-message {
		margin: auto;
	}

	#newsletter-message.unhappy {
		color: var(--colorUnhappy);
	}

	@media (width >= 819px) {
		.ocean-floor-left {
			right: clamp(10%, 40vw, 50%);
		}
	}
</style>