@the-smithy/create-hearth-site 0.24.0 → 0.25.0

package/template/src/hearth/components/EventView.tsx

@@ -8,18 +8,65 @@ import { hearthNext } from "../client";
 import { formatEventDate } from "../format";
 import { RegistrationForm } from "../forms/RegistrationForm";
 import { VolunteerForm } from "../forms/VolunteerForm";
+import { overrides } from "../overrides";
 import { siteUrl } from "../site";
 import { fill, Img } from "../ui";
 import { Registration } from "./Registration";
 import { Share } from "./Share";
 
+/** An event's page: its structured data, and the site's EventPage override or Hearth's own. Used at /events/… and /<collection>/…. */
+export function EventView({ event }: { event: HearthEventDetail }) {
+  const Page = overrides.EventPage ?? EventContent;
+  return (
+    <>
+      <JsonLd data={event.meta.jsonLd} />
+      <Page event={event} />
+    </>
+  );
+}
+
+/** Registration on the event's page (sites with Tickets), while it's open. For an EventPage override to reuse. */
+export function EventRegisterSection({ event }: { event: HearthEventDetail }) {
+  const t = theme.event;
+  if (!event.registration?.open) return null;
+  return (
+    <section id="register" className={t.section}>
+      <div className={t.sectionInner}>
+        <h2 className={t.sectionTitle}>{theme.text.register}</h2>
+        {event.registration.fundraiser ? <p className={t.sectionNote}>{fill(theme.text.ticketsSupport, { fundraiser: event.registration.fundraiser.title })}</p> : null}
+        <div className={t.form}>
+          <RegistrationForm slug={event.slug} tickets={event.registration.tickets} />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/** Volunteer sign-up on the event's page, while it's open. For an EventPage override to reuse; leave it out if the event's blocks have a Volunteer sign-up. */
+export function EventVolunteerSection({ event }: { event: HearthEventDetail }) {
+  const t = theme.event;
+  if (!event.volunteering?.open) return null;
+  return (
+    <section id="volunteer" className={t.section}>
+      <div className={t.sectionInner}>
+        <h2 className={t.sectionTitle}>{theme.text.volunteer}</h2>
+        {event.volunteering.intro ? <p className={t.sectionIntro}>{event.volunteering.intro}</p> : null}
+        {event.volunteering.fundraiser ? <p className={t.sectionNote}>{fill(theme.text.supports, { fundraiser: event.volunteering.fundraiser.title })}</p> : null}
+        <div className={t.form}>
+          <VolunteerForm slug={event.slug} timezone={event.timezone} volunteering={event.volunteering} />
+        </div>
+      </div>
+    </section>
+  );
+}
+
 /**
- * An event's page: header with date, place and registration, then its blocks. Used at /events/… and /<collection>/….
+ * Hearth's own event page: header with date, place and registration, then its blocks.
  * When the event's blocks start with a hero, the hero is the header (its heading is the page's only h1, the event's
  * name its eyebrow, the event's image its picture if it has none) and the details sit in a band under it.
  * Volunteer sign-up goes at the bottom, unless a Volunteer sign-up block for the event is placed on the page.
  */
-export async function EventView({ event }: { event: HearthEventDetail }) {
+export async function EventContent({ event }: { event: HearthEventDetail }) {
   const t = theme.event;
   const site = await hearthNext.getSite();
   const base = siteUrl(site);
@@ -27,7 +74,7 @@ export async function EventView({ event }: { event: HearthEventDetail }) {
   const [first, ...rest] = event.blocks;
   const hero = first?.type === "hero" ? (first as BlockOf<"hero">) : null;
   // A Volunteer sign-up block for this event puts the form where the editor placed it, instead of at the bottom.
-  const volunteerBlock = event.blocks.some((b) => b.type === "volunteerSignup" && (b as BlockOf<"volunteerSignup">).data.event.slug === event.slug);
+  const volunteerBlock = event.blocks.find((b) => b.type === "volunteerSignup" && (b as BlockOf<"volunteerSignup">).data.event.slug === event.slug);
   const online = event.attendance === "online" ? theme.text.online : event.attendance === "mixed" ? theme.text.onlineAndInPerson : null;
 
   const cancelled = event.status === "cancelled" ? <p className={t.cancelled}>{theme.text.cancelledEvent}</p> : null;
@@ -49,17 +96,23 @@ export async function EventView({ event }: { event: HearthEventDetail }) {
     <div className={t.actions}>
       <Registration event={event} />
       {event.volunteering?.open ? (
-        <a href={volunteerBlock ? `#${volunteerAnchor(event.slug)}` : "#volunteer"} className={t.volunteer}>
+        <a href={volunteerBlock ? `#${volunteerBlock.anchor ?? volunteerAnchor(event.slug)}` : "#volunteer"} className={t.volunteer}>
           {theme.text.volunteer}
         </a>
       ) : null}
-      {base && event.status !== "cancelled" ? <Share title={event.title} url={`${base}${event.path}`} message={`${event.title}, ${formatEventDate(event)}: ${base}${event.path}`} heading={`Share ${event.title}`} /> : null}
+      {base && event.status !== "cancelled" ? (
+        <Share
+          title={event.title}
+          url={`${base}${event.path}`}
+          message={fill(theme.text.shareEventMessage, { title: event.title, date: formatEventDate(event), url: `${base}${event.path}` })}
+          heading={fill(theme.text.shareEventHeading, { title: event.title })}
+        />
+      ) : null}
     </div>
   );
 
   return (
     <>
-      <JsonLd data={event.meta.jsonLd} />
       {hero ? (
         <>
           <Hero block={{ ...hero, data: { ...hero.data, eyebrow: hero.data.eyebrow ?? event.title, image: hero.data.image ?? event.image ?? undefined } }} />
@@ -92,29 +145,8 @@ export async function EventView({ event }: { event: HearthEventDetail }) {
         </section>
       )}
       <Blocks blocks={hero ? rest : event.blocks} />
-      {event.registration?.open ? (
-        <section id="register" className={t.section}>
-          <div className={t.sectionInner}>
-            <h2 className={t.sectionTitle}>{theme.text.register}</h2>
-            {event.registration.fundraiser ? <p className={t.sectionNote}>{fill(theme.text.ticketsSupport, { fundraiser: event.registration.fundraiser.title })}</p> : null}
-            <div className={t.form}>
-              <RegistrationForm slug={event.slug} tickets={event.registration.tickets} />
-            </div>
-          </div>
-        </section>
-      ) : null}
-      {event.volunteering?.open && !volunteerBlock ? (
-        <section id="volunteer" className={t.section}>
-          <div className={t.sectionInner}>
-            <h2 className={t.sectionTitle}>{theme.text.volunteer}</h2>
-            {event.volunteering.intro ? <p className={t.sectionIntro}>{event.volunteering.intro}</p> : null}
-            {event.volunteering.fundraiser ? <p className={t.sectionNote}>{fill(theme.text.supports, { fundraiser: event.volunteering.fundraiser.title })}</p> : null}
-            <div className={t.form}>
-              <VolunteerForm slug={event.slug} timezone={event.timezone} volunteering={event.volunteering} />
-            </div>
-          </div>
-        </section>
-      ) : null}
+      <EventRegisterSection event={event} />
+      {volunteerBlock ? null : <EventVolunteerSection event={event} />}
     </>
   );
 }

package/template/src/hearth/components/FundraiserView.tsx

@@ -0,0 +1,77 @@
+import type { FundraiserDetail } from "@the-smithy/hearth";
+import { JsonLd } from "@the-smithy/hearth/react";
+import { theme } from "@/theme";
+import { Blocks } from "../blocks";
+import { Progress } from "../blocks/giving";
+import { hearthNext } from "../client";
+import { DonationForm } from "../forms/DonationForm";
+import { money } from "../format";
+import { overrides } from "../overrides";
+import { siteUrl } from "../site";
+import { fill, Img, Section } from "../ui";
+import { Share } from "./Share";
+
+/** A fundraiser's page: its structured data, and the site's FundraiserPage override or Hearth's own. */
+export function FundraiserView({ fundraiser }: { fundraiser: FundraiserDetail }) {
+  const Page = overrides.FundraiserPage ?? FundraiserContent;
+  return (
+    <>
+      <JsonLd data={fundraiser.meta.jsonLd} />
+      <Page fundraiser={fundraiser} />
+    </>
+  );
+}
+
+/** Hearth's own fundraiser page: progress, Donate and Share, then its story blocks and the donation form. */
+export async function FundraiserContent({ fundraiser: f }: { fundraiser: FundraiserDetail }) {
+  const site = await hearthNext.getSite();
+  const giving = site.settings.giving;
+  const t = theme.fundraiser;
+  const base = siteUrl(site);
+  const url = base ? `${base}${f.path}` : null;
+  const active = f.status === "active";
+
+  return (
+    <>
+      <section className={t.header}>
+        <div className={t.headerInner}>
+          <div className={t.details}>
+            <p className={t.label}>{active ? theme.text.fundraiserLabel : theme.text.completedFundraiserLabel}</p>
+            <h1 className={t.title}>{f.title}</h1>
+            {f.summary ? <p className={t.summary}>{f.summary}</p> : null}
+            <Progress fundraiser={f} large />
+            {active ? (
+              <div className={t.actions}>
+                <a href="#donate" className={theme.button.primary}>
+                  {theme.text.donate}
+                </a>
+                {url ? (
+                  <Share
+                    title={f.title}
+                    url={url}
+                    message={
+                      f.goalCents
+                        ? fill(theme.text.shareFundraiserGoalMessage, { title: f.title, raised: money(f.raisedCents), goal: money(f.goalCents), url })
+                        : fill(theme.text.shareFundraiserMessage, { title: f.title, url })
+                    }
+                    heading={theme.text.shareFundraiserHeading}
+                  />
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+          {f.image ? <Img image={f.image} crop={4 / 3} className={t.image} /> : null}
+        </div>
+      </section>
+      <Blocks blocks={f.blocks} />
+      {active ? (
+        <Section block="fundraiserDonate">
+          <div className={t.give}>
+            <h2 className={t.giveTitle}>{fill(theme.text.giveTo, { fundraiser: f.title })}</h2>
+            <DonationForm presetsCents={giving.presetsCents} minCents={giving.minCents} maxCents={giving.maxCents} fundraiser={f.slug} />
+          </div>
+        </Section>
+      ) : null}
+    </>
+  );
+}

package/template/src/hearth/components/NotHere.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+
+/** Draws its children everywhere but at `href`: a link to all of something isn't needed on the page it points at. */
+export function NotHere({ href, children }: { href: string; children: ReactNode }) {
+  return usePathname() === href ? null : children;
+}

package/template/src/hearth/components/PageContent.tsx

@@ -0,0 +1,23 @@
+import type { Page } from "@the-smithy/hearth";
+import { JsonLd } from "@the-smithy/hearth/react";
+import { Blocks } from "../blocks";
+
+/** A page from Hearth: its structured data and its blocks. */
+export function PageContent({ page }: { page: Page }) {
+  return (
+    <>
+      <JsonLd data={page.meta.jsonLd} />
+      <PageBlocks page={page} />
+    </>
+  );
+}
+
+export function PageBlocks({ page }: { page: Page }) {
+  return (
+    <>
+      {/* Pages usually open with a Hero (the visible title); this keeps a heading for the rest. */}
+      {page.blocks[0]?.type === "hero" ? null : <h1 className="sr-only">{page.title}</h1>}
+      <Blocks blocks={page.blocks} />
+    </>
+  );
+}

package/template/src/hearth/components/Registration.tsx

@@ -1,6 +1,7 @@
 import type { HearthEvent } from "@the-smithy/hearth";
 import { theme } from "@/theme";
 import { hearthNext } from "../client";
+import { ExternalLink } from "../ui";
 
 /** Upcoming until it ends (or, without an end time, until it starts). */
 const isUpcoming = (e: Pick<HearthEvent, "startsAt" | "endsAt">) => new Date(e.endsAt ?? e.startsAt).getTime() > Date.now();
@@ -31,9 +32,9 @@ export async function Registration({ event, size = "large" }: { event: HearthEve
   }
   if (event.registrationUrl) {
     return (
-      <a href={event.registrationUrl} rel="noopener" className={theme.button.primary} data-size={small}>
+      <ExternalLink href={event.registrationUrl} rel="noopener" className={theme.button.primary} data-size={small}>
         {theme.text.register}
-      </a>
+      </ExternalLink>
     );
   }
   const { events } = (await hearthNext.getSite()).settings;

package/template/src/hearth/components/Share.tsx

@@ -23,9 +23,9 @@ export function Share({ title, url, message, heading }: { title: string; url: st
   async function copy(value: string, label: string) {
     try {
       await navigator.clipboard.writeText(value);
-      setStatus(`${label} copied.`);
+      setStatus(theme.text.shareCopied.replace("{what}", label));
     } catch {
-      setStatus("Couldn't copy automatically. Select the text and copy it.");
+      setStatus(theme.text.shareCopyFailed);
     }
   }
 
@@ -33,8 +33,8 @@ export function Share({ title, url, message, heading }: { title: string; url: st
   const targets = [
     { label: "Facebook", href: `https://www.facebook.com/sharer/sharer.php?u=${enc(url)}` },
     { label: "X", href: `https://x.com/intent/post?text=${enc(text)}` },
-    { label: "Email", href: `mailto:?subject=${enc(title)}&body=${enc(text)}` },
-    { label: "Text message", href: `sms:?&body=${enc(text)}` },
+    { label: theme.text.shareEmail, href: `mailto:?subject=${enc(title)}&body=${enc(text)}` },
+    { label: theme.text.shareTextMessage, href: `sms:?&body=${enc(text)}` },
   ];
 
   return (
@@ -66,26 +66,26 @@ export function Share({ title, url, message, heading }: { title: string; url: st
         </div>
         <div className={t.body}>
           <label className={theme.form.field}>
-            <span className={theme.form.label}>Your message</span>
+            <span className={theme.form.label}>{theme.text.shareMessageLabel}</span>
             <textarea id={`${id}-message`} rows={5} value={text} onChange={(e) => setText(e.target.value)} className={t.message} />
           </label>
           <div className={t.copy}>
-            <button type="button" onClick={() => copy(text, "Message")} className={t.copyButton}>
-              Copy message
+            <button type="button" onClick={() => copy(text, theme.text.shareTheMessage)} className={t.copyButton}>
+              {theme.text.shareCopyMessage}
             </button>
-            <button type="button" onClick={() => copy(url, "Link")} className={t.copyButton}>
-              Copy link
+            <button type="button" onClick={() => copy(url, theme.text.shareTheLink)} className={t.copyButton}>
+              {theme.text.shareCopyLink}
             </button>
           </div>
           <p role="status" aria-live="polite" className={t.status}>
             {status}
           </p>
           <div>
-            <p className={t.targetsLabel}>Or share to</p>
+            <p className={t.targetsLabel}>{theme.text.shareTo}</p>
             <div className={t.targets}>
               {nativeShare ? (
                 <button type="button" className={t.target} onClick={() => navigator.share({ title, text }).catch(() => {})}>
-                  More apps…
+                  {theme.text.shareMoreApps}
                 </button>
               ) : null}
               {targets.map((x) => (

package/template/src/hearth/format.ts

@@ -1,9 +1,11 @@
 import type { HearthEvent } from "@the-smithy/hearth";
+import { theme } from "@/theme";
 
-/** "Sat, Oct 18 · 6:00 – 9:00 PM", in the event's own time zone. */
+/** "Sat, Oct 18 · 6:00 – 9:00 PM", in the event's own time zone; "Saturday, October 18 · …" with `page.dateStyle` set to "long". */
 export function formatEventDate(e: Pick<HearthEvent, "startsAt" | "endsAt" | "allDay" | "timezone">) {
   const tz = { timeZone: e.timezone };
-  const day = new Intl.DateTimeFormat("en-US", { ...tz, weekday: "short", month: "short", day: "numeric", year: "numeric" });
+  const words = theme.page.dateStyle === "long" ? "long" : "short";
+  const day = new Intl.DateTimeFormat("en-US", { ...tz, weekday: words, month: words, day: "numeric", year: "numeric" });
   const time = new Intl.DateTimeFormat("en-US", { ...tz, hour: "numeric", minute: "2-digit" });
   const start = new Date(e.startsAt);
   const end = e.endsAt ? new Date(e.endsAt) : null;
@@ -28,4 +30,4 @@ export const formatEntryDate = (iso: string) =>
 export const money = (cents: number) => (cents / 100).toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: cents % 100 ? 2 : 0 });
 
 /** A ticket price: "$25" or "Free". */
-export const price = (cents: number) => (cents ? money(cents) : "Free");
+export const price = (cents: number) => (cents ? money(cents) : theme.text.free);

package/template/src/hearth/forms/ContactForm.tsx

@@ -4,7 +4,7 @@ import type { BlockOf } from "@the-smithy/hearth";
 import { useActionState } from "react";
 import { theme } from "@/theme";
 import { submitHearthForm, type FormState } from "../actions";
-import { Alert, Honeypot, Question, Submit, Success } from "./fields";
+import { Alert, Honeypot, Question, Submit, Success, useFocusFirstInvalid } from "./fields";
 
 type FormData_ = BlockOf<"form">["data"];
 
@@ -12,16 +12,18 @@ type FormData_ = BlockOf<"form">["data"];
 export function HearthForm({ form }: { form: FormData_ }) {
   const [state, action] = useActionState<FormState, FormData>(submitHearthForm.bind(null, form.formKey), {});
 
+  const ref = useFocusFirstInvalid(state);
+
   if (state.ok) return <Success>{state.message || form.successMessage}</Success>;
 
   return (
-    <form action={action} className={theme.form.root} noValidate>
+    <form ref={ref} action={action} className={theme.form.root} noValidate>
       {state.message ? <Alert>{state.message}</Alert> : null}
       <Honeypot />
       {form.fields.map((f) => (
         <Question key={f.name} field={f} idPrefix={form.formKey} error={state.fieldErrors?.[f.name]} value={state.values?.[f.name]} />
       ))}
-      <Submit label={form.submitLabel} pending="Sending…" />
+      <Submit label={form.submitLabel} pending={theme.text.sending} />
     </form>
   );
 }

package/template/src/hearth/forms/DonateForm.tsx

@@ -1,69 +1,86 @@
 "use client";
 
-import { useActionState, useState } from "react";
+import { useActionState, useEffect, useState } from "react";
 import type { FormResult } from "@the-smithy/hearth";
 import { theme } from "@/theme";
 import { donate } from "../actions";
 import { money } from "../format";
-import { Alert, Checkbox, FieldError, Submit, TextField } from "./fields";
+import type { DonateFormProps } from "../overrides";
+import { fill } from "../ui";
+import { Alert, Checkbox, FieldError, Submit, TextField, useFocusFirstInvalid } from "./fields";
 
 const t = theme.form;
 
 /**
- * Suggested amounts (from Hearth's Giving settings), a custom amount and optional details. Submitting starts a
- * checkout through Hearth and sends the donor to the payment page; they come back to /donate/thank-you.
+ * Suggested amounts (from Hearth's Giving settings), a custom amount, a choice of fundraiser and optional details.
+ * Submitting starts a checkout through Hearth and sends the donor to the payment page; they come back to
+ * /donate/thank-you. `fundraiser` gives to that one. Otherwise `fundraisers`, the active ones, are offered, with
+ * "Where it's needed most" first and the one named by ?fundraiser= in the address chosen; without any, there's no choice.
  */
-export function DonateForm({
-  presetsCents,
-  minCents,
-  maxCents,
-  fundraiser,
-  submitLabel = theme.text.donate,
-}: {
-  presetsCents: number[];
-  minCents: number;
-  maxCents: number;
-  fundraiser?: string;
-  submitLabel?: string;
-}) {
+export function DonateForm({ presetsCents, minCents, maxCents, fundraiser, fundraisers = [], submitLabel = theme.text.donate }: DonateFormProps) {
   const [state, action] = useActionState<FormResult | null, FormData>(donate, null);
   const [amount, setAmount] = useState(presetsCents[1] !== undefined ? String(presetsCents[1] / 100) : "custom");
+  const [chosen, setChosen] = useState("");
   const errors = state && !state.ok ? state.fieldErrors : {};
+  const ref = useFocusFirstInvalid(state);
+  const choice = !fundraiser && fundraisers.length > 0;
+
+  // From the address after loading, so that the page can stay prerendered.
+  useEffect(() => {
+    const wanted = new URLSearchParams(window.location.search).get("fundraiser");
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- only known in the browser
+    if (wanted && fundraisers.some((f) => f.slug === wanted)) setChosen(wanted);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- once, as the page loads
+  }, []);
 
   return (
-    <form action={action} className={t.root} id="donate">
+    <form ref={ref} action={action} className={t.root} id="donate">
       {state && !state.ok ? <Alert>{state.message}</Alert> : null}
       {fundraiser ? <input type="hidden" name="fundraiser" value={fundraiser} /> : null}
       <fieldset>
-        <legend className={t.legend}>Amount</legend>
+        <legend className={t.legend}>{theme.text.donateAmount}</legend>
         <div className={t.amounts}>
-          {[...presetsCents.map((cents) => ({ value: String(cents / 100), label: money(cents) })), { value: "custom", label: "Other" }].map((a) => (
+          {[...presetsCents.map((cents) => ({ value: String(cents / 100), label: money(cents) })), { value: "custom", label: theme.text.donateOther }].map((a) => (
             <label key={a.value} className={t.amount}>
-              <input type="radio" name="amount" value={a.value} checked={amount === a.value} onChange={(e) => setAmount(e.target.value)} className="sr-only" />
+              <input type="radio" name="amount" value={a.value} checked={amount === a.value} onChange={(e) => setAmount(e.target.value)} data-invalid={errors.amount && amount === a.value && a.value !== "custom" ? "" : undefined} className="sr-only" />
               {a.label}
             </label>
           ))}
         </div>
         {amount === "custom" ? (
           <div className={t.customAmount}>
-            <TextField label="Amount in dollars" name="customAmount" inputMode="decimal" required placeholder={String(minCents / 100)} />
+            <TextField label={theme.text.donateCustomAmount} name="customAmount" inputMode="decimal" required placeholder={String(minCents / 100)} data-invalid={errors.amount ? "" : undefined} />
           </div>
         ) : null}
-        <p className={t.hint}>
-          {money(minCents)} to {money(maxCents)}.
-        </p>
+        <p className={t.hint}>{fill(theme.text.donateRange, { min: money(minCents), max: money(maxCents) })}</p>
         <FieldError>{errors.amount}</FieldError>
       </fieldset>
+      {choice ? (
+        <div>
+          <label htmlFor="donate-fundraiser" className={t.label}>
+            {theme.text.donateChoice}
+          </label>
+          <select id="donate-fundraiser" name="fundraiser" value={chosen} onChange={(e) => setChosen(e.target.value)} aria-invalid={errors.fundraiser ? true : undefined} aria-describedby={errors.fundraiser ? "donate-fundraiser-error" : undefined} className={t.input}>
+            <option value="">{theme.text.donateAnywhere}</option>
+            {fundraisers.map((f) => (
+              <option key={f.slug} value={f.slug}>
+                {f.title}
+              </option>
+            ))}
+          </select>
+          <FieldError id="donate-fundraiser-error">{errors.fundraiser}</FieldError>
+        </div>
+      ) : null}
       <div className={t.row}>
-        <TextField label="Name" name="name" autoComplete="name" error={errors.name} />
-        <TextField label="Email for your receipt" name="email" type="email" autoComplete="email" error={errors.email} />
+        <TextField label={theme.text.yourName} name="name" autoComplete="name" error={errors.name} />
+        <TextField label={theme.text.donateEmail} name="email" type="email" autoComplete="email" error={errors.email} />
       </div>
-      <TextField label="Message" optional name="message" textarea rows={3} maxLength={500} error={errors.message} />
-      <Checkbox name="anonymous" label="Don't show my name publicly" />
+      <TextField label={theme.text.donateMessage} optional name="message" textarea rows={3} maxLength={500} error={errors.message} />
+      <Checkbox name="anonymous" label={theme.text.donateAnonymous} />
       {/* Opt-in only, unticked: the fundraiser's updates go to donors who ask (and give an email). */}
-      {fundraiser ? <Checkbox name="updates" label="Send me updates about this fundraiser" /> : null}
-      <Submit label={submitLabel} pending="Opening secure checkout…" />
-      <p className={t.note}>You&apos;ll finish on a secure payment page.</p>
+      {fundraiser || chosen ? <Checkbox name="updates" label={theme.text.donateUpdates} /> : null}
+      <Submit label={submitLabel} pending={theme.text.openingCheckout} />
+      <p className={t.note}>{theme.text.donateNote}</p>
     </form>
   );
 }

package/template/src/hearth/forms/DonationForm.tsx

@@ -0,0 +1,13 @@
+import { hearthNext } from "../client";
+import { overrides, type DonateFormProps } from "../overrides";
+import { DonateForm } from "./DonateForm";
+
+/**
+ * A donation form wherever the template draws one, the site's own if it replaces it. Without a fundraiser of its own, it
+ * offers the active ones to choose from.
+ */
+export async function DonationForm(props: Omit<DonateFormProps, "fundraisers">) {
+  const Form = overrides.DonateForm ?? DonateForm;
+  const fundraisers = props.fundraiser ? [] : await hearthNext.getFundraisers({ status: "active" });
+  return <Form {...props} fundraisers={fundraisers.map((f) => ({ slug: f.slug, title: f.title }))} />;
+}

package/template/src/hearth/forms/RegistrationForm.tsx

@@ -5,7 +5,8 @@ import type { EventTicket, FormResult } from "@the-smithy/hearth";
 import { theme } from "@/theme";
 import { register } from "../actions";
 import { price } from "../format";
-import { Alert, FieldError, OptionCard, Submit, Success, TextField } from "./fields";
+import { fill } from "../ui";
+import { Alert, FieldError, OptionCard, Submit, Success, TextField, useFocusFirstInvalid } from "./fields";
 
 const t = theme.form;
 
@@ -20,49 +21,50 @@ export function RegistrationForm({ slug, tickets }: { slug: string; tickets: Eve
   const ticket = tickets.find((x) => x.id === ticketId);
   const errors = state && !state.ok ? state.fieldErrors : {};
   const paid = Boolean(ticket?.priceCents);
-  const attendee = ticket?.attendeeLabel ?? "Attendee";
+  const attendee = ticket?.attendeeLabel ?? theme.text.attendee;
+  const ref = useFocusFirstInvalid(state);
 
   if (state?.ok) return <Success>{state.message}</Success>;
 
   return (
-    <form action={action} className={t.root}>
+    <form ref={ref} action={action} className={t.root}>
       {state && !state.ok ? <Alert>{state.message}</Alert> : null}
       <fieldset>
-        <legend className={t.legend}>Ticket</legend>
+        <legend className={t.legend}>{theme.text.ticket}</legend>
         <div className={t.options}>
           {tickets.map((x) => (
             <OptionCard
               key={x.id}
-              input={<input type="radio" name="ticket" value={x.id} checked={ticketId === x.id} disabled={x.soldOut} onChange={() => setTicketId(x.id)} className={t.optionInput} />}
+              input={<input type="radio" name="ticket" value={x.id} checked={ticketId === x.id} disabled={x.soldOut} onChange={() => setTicketId(x.id)} data-invalid={errors.ticket && !x.soldOut ? "" : undefined} className={t.optionInput} />}
               title={x.name}
-              meta={x.soldOut ? "Sold out" : price(x.priceCents)}
+              meta={x.soldOut ? theme.text.soldOut : price(x.priceCents)}
             >
               {x.description ? <span className={t.optionDetail}>{x.description}</span> : null}
-              {x.remaining !== null && !x.soldOut && x.remaining <= 10 ? <span className={t.optionDetail}>{x.remaining} left</span> : null}
+              {x.remaining !== null && !x.soldOut && x.remaining <= 10 ? <span className={t.optionDetail}>{fill(theme.text.ticketsLeft, { count: String(x.remaining) })}</span> : null}
             </OptionCard>
           ))}
         </div>
         <FieldError>{errors.ticket}</FieldError>
       </fieldset>
       <div className={t.row}>
-        <TextField label="Name" name="name" required autoComplete="name" error={errors.name} />
-        <TextField label="Email" name="email" type="email" required autoComplete="email" error={errors.email} />
-        <TextField label="Phone" optional name="phone" type="tel" autoComplete="tel" error={errors.phone} />
-        <TextField label="Team or organization" optional name="teamName" error={errors.teamName} />
+        <TextField label={theme.text.yourName} name="name" required autoComplete="name" error={errors.name} />
+        <TextField label={theme.text.yourEmail} name="email" type="email" required autoComplete="email" error={errors.email} />
+        <TextField label={theme.text.yourPhone} optional name="phone" type="tel" autoComplete="tel" error={errors.phone} />
+        <TextField label={theme.text.teamName} optional name="teamName" error={errors.teamName} />
       </div>
       {ticket && ticket.attendeesPerRegistration > 0 ? (
         <fieldset>
           <legend className={t.legend}>{ticket.attendeesPerRegistration === 1 ? attendee : `${attendee}s`}</legend>
           <div className={t.row}>
             {Array.from({ length: ticket.attendeesPerRegistration }, (_, i) => (
-              <input key={`${ticket.id}-${i}`} name="attendee" required aria-label={`${attendee} ${i + 1}`} placeholder={`${attendee} ${i + 1}`} className={t.input} />
+              <input key={`${ticket.id}-${i}`} name="attendee" required aria-invalid={errors.attendees ? true : undefined} aria-label={`${attendee} ${i + 1}`} placeholder={`${attendee} ${i + 1}`} className={t.input} />
             ))}
           </div>
           <FieldError>{errors.attendees}</FieldError>
         </fieldset>
       ) : null}
-      <TextField label="Notes" optional name="notes" textarea rows={3} maxLength={1000} error={errors.notes} />
-      <Submit label={paid ? "Continue to payment" : theme.text.register} pending={paid ? "Opening secure checkout…" : "Registering…"} />
+      <TextField label={theme.text.notes} optional name="notes" textarea rows={3} maxLength={1000} error={errors.notes} />
+      <Submit label={paid ? theme.text.continueToPayment : theme.text.register} pending={paid ? theme.text.openingCheckout : theme.text.registering} />
     </form>
   );
 }