Newsletter signup

<script module lang="ts">
	export type SubscribeResult = { ok: true } | { ok: false; message: string };
</script>

<script lang="ts">
	import { onMount } from 'svelte';

	interface Props {
		onSubscribe: (email: string) => Promise<SubscribeResult>;
		title: string;
		description?: string;
		headingLevel?: 2 | 3 | 4 | 5;
		label?: string;
		placeholder?: string;
		submitLabel?: string;
		pendingLabel?: string;
		successMessage?: string;
		errorMessage?: string;
		note?: string;
	}

	let {
		onSubscribe,
		title,
		description,
		headingLevel = 2,
		label = 'Email address',
		placeholder = 'you@example.com',
		submitLabel = 'Subscribe',
		pendingLabel = 'Subscribing…',
		successMessage = 'Thanks for subscribing.',
		errorMessage = 'Something went wrong. Please try again.',
		note
	}: Props = $props();

	const uid = $props.id();
	const heading = $derived(`h${headingLevel}`);

	let email = $state('');
	let status = $state<'idle' | 'pending' | 'success' | 'error'>('idle');
	let failure = $state('');
	// The submit button stays disabled until hydration so the form can never fall back to a
	// native GET submission that would put the address in the URL.
	let hydrated = $state(false);

	onMount(() => {
		hydrated = true;
	});

	const describedBy = $derived(
		[status === 'error' ? `${uid}-message` : '', note ? `${uid}-note` : '']
			.filter(Boolean)
			.join(' ') || undefined
	);

	async function handleSubmit(event: SubmitEvent) {
		event.preventDefault();
		if (status === 'pending') return;

		status = 'pending';
		failure = '';

		try {
			const result = await onSubscribe(email.trim());
			if (result.ok) {
				status = 'success';
				email = '';
			} else {
				status = 'error';
				failure = result.message || errorMessage;
			}
		} catch {
			status = 'error';
			failure = errorMessage;
		}
	}
</script>

<section class="px-4 py-16 sm:px-6 lg:px-8" aria-labelledby="{uid}-title">
	<div class="mx-auto max-w-xl rounded-2xl bg-zinc-50 p-6 ring-1 ring-zinc-200 sm:p-10">
		<svelte:element
			this={heading}
			id="{uid}-title"
			class="text-2xl font-semibold tracking-tight text-balance break-words text-zinc-900 sm:text-3xl"
		>
			{title}
		</svelte:element>
		{#if description}
			<p class="mt-3 text-base text-pretty break-words text-zinc-600">{description}</p>
		{/if}

		<form class="mt-6" onsubmit={handleSubmit}>
			<label for="{uid}-email" class="block text-sm font-medium text-zinc-900">{label}</label>
			<div class="mt-2 flex flex-col gap-3 sm:flex-row">
				<input
					id="{uid}-email"
					name="email"
					type="email"
					autocomplete="email"
					required
					bind:value={email}
					{placeholder}
					readonly={status === 'pending'}
					aria-describedby={describedBy}
					class="block w-full min-w-0 flex-1 rounded-lg border border-zinc-500 bg-white px-3 py-2.5 text-base text-zinc-900 placeholder:text-zinc-500 focus:border-zinc-900 focus:outline-2 focus:outline-offset-0 focus:outline-zinc-900"
				/>
				<button
					type="submit"
					disabled={!hydrated}
					aria-disabled={status === 'pending' ? 'true' : undefined}
					class="shrink-0 rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-zinc-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 disabled:cursor-not-allowed disabled:bg-zinc-700 aria-disabled:cursor-progress aria-disabled:bg-zinc-700"
				>
					{status === 'pending' ? pendingLabel : submitLabel}
				</button>
			</div>

			<div aria-live="polite" aria-atomic="true">
				{#if status === 'pending'}
					<p class="sr-only">{pendingLabel}</p>
				{:else if status === 'success'}
					<p id="{uid}-message" class="mt-3 text-sm font-medium break-words text-green-800">
						{successMessage}
					</p>
				{:else if status === 'error'}
					<p id="{uid}-message" class="mt-3 text-sm font-medium break-words text-red-700">
						{failure}
					</p>
				{/if}
			</div>

			{#if note}
				<p id="{uid}-note" class="mt-3 text-xs break-words text-zinc-600">{note}</p>
			{/if}
		</form>
	</div>
</section>