@acms-subir/core 0.3.40 → 0.3.42

package/mobile-template/recipes/rsvp/files/components/RsvpPanel.tsx

@@ -1,16 +1,19 @@
-import { Fragment, useEffect, useState, type ReactNode } from 'react';
+import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react';
 import { ActivityIndicator, Platform, Pressable, Switch, Text, TextInput, View, type KeyboardTypeOptions } from 'react-native';
 import * as Crypto from 'expo-crypto';
 import * as SecureStore from 'expo-secure-store';
 import { isAcmsError, type FormField } from '@acms-subir/client';
-import { Button, answerProblemText, answerProblems, countWords, fill, rsvpDeadlineText, seatChoices, useCancelBooking, useGuest, useLocale, useManagedBooking, useRsvp, useRsvpStatus, useSite, useStrings, useTheme } from '@acms-subir/native';
+import { Button, answerProblemText, answerProblems, canJoinWaitlist, countWords, fill, holdText, isReleased, rsvpDeadlineText, seatChoices, useCancelBooking, useConfirmBooking, useGuest, useLocale, useManagedBooking, useRsvp, useRsvpStatus, useSite, useStrings, useTheme, waitlistLineText, waitlistSeatChoices } from '@acms-subir/native';
 
 // RSVP to one date of an event: <RsvpPanel slug={event.slug} start={occurrence.start} />,
 // with `start` exactly as useEvents returns it. Shows going and spots left,
 // seats, contact details and the event's questions, then the person's RSVP
 // with a way to cancel it; or why the date takes no RSVPs. Same rules as the
 // event's web page: open until the event's deadline or the date ends, one RSVP
-// per email and date, and the organiser may approve each RSVP. useRsvp keeps
+// per email and date, and the organiser may approve each RSVP. A full date
+// whose event keeps a waitlist offers "Join the waitlist" with the same form;
+// then it shows their place in line ("#3 in line · 2 seats"), and when a spot
+// opens, until when it's held, with Confirm my spot and Release it. useRsvp keeps
 // one idempotency key per RSVP, so sending again after a timeout can't
 // register anyone twice. Its words come from
 // useStrings() in the app's language; the event's own form title, labels and
@@ -37,9 +40,11 @@ const withOther = (f: FormField, value: string | string[] | undefined, other: st
 };
 // a count in bold inside its words ("{count} going")
 const bold = (template: string, n: string) => template.split('{count}').map((part, i) => (i ? <Fragment key={i}><Text style={{ fontWeight: '700' }}>{n}</Text>{part}</Fragment> : part));
+// the site holds a spot freed from the waitlist this long
+const HOLD_HOURS = '24';
 
-// children: shown under the person's RSVP (not a declined one), e.g. an offer
-// to get notified if the date, time or place changes
+// children: shown under the person's RSVP (confirmed or waiting for approval,
+// not a place in line), e.g. an offer to get notified if the date, time or place changes
 export function RsvpPanel({ slug, start, children }: { slug: string; start: string; children?: ReactNode }) {
   const t = useTheme();
   const words = useStrings();
@@ -55,6 +60,7 @@ export function RsvpPanel({ slug, start, children }: { slug: string; start: stri
   const changes = site?.features.bookingChanges === true;
   const managed = useManagedBooking(changes ? stored : null);
   const cancel = useCancelBooking(stored);
+  const take = useConfirmBooking(stored);
   const [confirming, setConfirming] = useState(false);
   const [notice, setNotice] = useState('');
   const [name, setName] = useState('');
@@ -77,13 +83,17 @@ export function RsvpPanel({ slug, start, children }: { slug: string; start: stri
   }, [site?.features.guestSignIn, guest.email]);
   // cancelled (here, from the email link or by the organiser) or gone: forget the token
   const gone = managed.data?.booking.status === 'cancelled' || (isAcmsError(managed.error) && managed.error.status === 404);
+  // whether it was a place in line or a held spot before then
+  const waited = useRef(false);
+  if (managed.data && managed.data.booking.status !== 'cancelled') waited.current = ['waitlisted', 'offered'].includes(managed.data.booking.status);
   useEffect(() => {
     if (!key || !stored || !gone) return;
     void tokens.remove(key);
     setStored(null);
     setConfirming(false);
     rsvp.reset();
-    if (managed.data?.booking.status === 'cancelled') setNotice(words.rsvpCancelled);
+    take.reset();
+    if (managed.data?.booking.status === 'cancelled') setNotice(waited.current ? words.offWaitlist : words.rsvpCancelled);
   }, [key, stored, gone]);
 
   if (!s) return status.isPending ? <ActivityIndicator color={t.colors.accent} /> : null;
@@ -94,10 +104,12 @@ export function RsvpPanel({ slug, start, children }: { slug: string; start: stri
   const seatsText = (n: number) => countWords(n, words.seat, words.seats, locale);
   // "RSVPs close Fri, Oct 24 at 9 PM", or once past it "They closed on …"
   const deadline = rsvpDeadlineText(s, words, locale);
+  // full, and the event keeps a waitlist: the same form takes a place in line
+  const joining = canJoinWaitlist(s);
   const going = (
     <Text style={t.styles.text.body}>
       {bold(s.going === 1 ? words.personGoing : words.peopleGoing, num(s.going))}
-      {s.left !== null && <> · {bold(s.left === 1 ? words.spotLeft : words.spotsLeft, num(s.left))}</>}
+      {s.left !== null && <> · {joining ? words.noSpotsLeft : bold(s.left === 1 ? words.spotLeft : words.spotsLeft, num(s.left))}</>}
     </Text>
   );
 
@@ -114,39 +126,59 @@ export function RsvpPanel({ slug, start, children }: { slug: string; start: stri
     </View>
   );
   if ((stored && mine) || made) {
-    const state = mine?.booking.status ?? made!.status;
+    // a held spot that ran out (before the site's next sweep, or while they confirmed it) reads as released
+    const ranOut = isReleased(take.error) || (mine?.booking.status === 'offered' && !mine.can.confirm);
+    const state = ranOut ? 'expired' : mine?.booking.status ?? made!.status;
+    const seats = mine?.booking.seats ?? made!.seats;
     const who = mine?.booking.email ?? made!.email;
     const thanks = mine ? mine.confirmation : made!.formResponse?.definition.confirmation || null;
     const canCancel = !!stored && changes && (mine ? mine.can.cancel : false);
+    // declined, or a held spot they didn't confirm in time: nothing left to change
+    const over = state === 'declined' || state === 'expired';
+    const forget = () => { if (key) void tokens.remove(key); setStored(null); rsvp.reset(); take.reset(); };
+    // leaving the line or releasing a held spot asks first, like cancelling
+    const leave = state === 'waitlisted' ? { label: words.leaveWaitlist, ask: words.leaveWaitlistAsk, busy: words.leaving }
+      : state === 'offered' ? { label: words.releaseSpot, ask: words.releaseSpotAsk, busy: words.releasing }
+      : { label: words.cancelRsvp, ask: fill(words.cancelRsvpFor, { seats: seatsText(seats) }), busy: words.cancelling };
+    const heading = state === 'waitlisted' ? words.onWaitlist : state === 'offered' ? words.spotOpened : state === 'expired' ? words.spotReleased
+      : !made ? words.yourRsvp : state === 'confirmed' ? words.confirmed : words.requestSent;
+    const line = state === 'waitlisted' ? waitlistLineText({ position: mine?.booking.position, seats }, words, locale)
+      : state === 'offered' || state === 'expired' ? seatsText(seats)
+      : `${seatsText(seats)} · ${state === 'confirmed' ? words.confirmed : state === 'pending' ? words.awaitingApproval : words.notConfirmed}`;
+    const body = state === 'waitlisted' ? fill(words.waitlistPromise, { hours: HOLD_HOURS })
+      : state === 'offered' ? holdText(mine?.booking.holdUntil, words, locale)
+      : state === 'expired' ? fill(words.spotReleasedNote, { hours: HOLD_HOURS })
+      : state === 'confirmed' ? thanks || fill(words.confirmationOnItsWay, { email: who })
+      : state === 'pending' ? fill(words.emailWhenApproved, { email: who }) : words.rsvpDeclined;
+    const failed = (e: unknown) => (isAcmsError(e) && e.status === 0 ? words.checkConnection : e instanceof Error ? e.message : '');
     return (<>
       <View style={[t.styles.card, { gap: 8 }]}>
-        <Text accessibilityRole="header" style={t.styles.text.heading}>{!made ? words.yourRsvp : state === 'confirmed' ? words.confirmed : words.requestSent}</Text>
-        <Text style={[t.styles.text.label, { color: t.colors.ink }]}>
-          {seatsText(mine?.booking.seats ?? made!.seats)} · {state === 'confirmed' ? words.confirmed : state === 'pending' ? words.awaitingApproval : words.notConfirmed}
-        </Text>
-        <Text style={t.styles.text.body}>
-          {state === 'confirmed' ? thanks || fill(words.confirmationOnItsWay, { email: who })
-            : state === 'pending' ? fill(words.emailWhenApproved, { email: who }) : words.rsvpDeclined}
-        </Text>
-        {state === 'declined' && <Button label={words.rsvpAgain} variant="outline" onPress={() => { if (key) void tokens.remove(key); setStored(null); rsvp.reset(); }} />}
-        {canCancel && state !== 'declined' && (confirming ? (
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{heading}</Text>
+        <Text style={[t.styles.text.label, { color: t.colors.ink }]}>{line}</Text>
+        {!!body && <Text style={t.styles.text.body}>{body}</Text>}
+        {state === 'offered' && !confirming && (
+          <Button label={take.isPending ? words.confirming : words.confirmSpot} disabled={take.isPending} onPress={() => take.mutate()} />
+        )}
+        {over && <Button label={words.rsvpAgain} variant="outline" onPress={forget} />}
+        {canCancel && !over && (confirming ? (
           <View style={{ gap: 8 }}>
-            <Text style={t.styles.text.body}>{fill(words.cancelRsvpFor, { seats: seatsText(mine!.booking.seats) })}</Text>
+            <Text style={t.styles.text.body}>{leave.ask}</Text>
             <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
-              <Button label={cancel.isPending ? words.cancelling : words.yesCancel} disabled={cancel.isPending} onPress={() => cancel.mutate()} />
+              <Button label={cancel.isPending ? leave.busy : state === 'waitlisted' || state === 'offered' ? leave.label : words.yesCancel} disabled={cancel.isPending} onPress={() => cancel.mutate()} />
               <Button label={words.keepIt} variant="outline" disabled={cancel.isPending} onPress={() => setConfirming(false)} />
             </View>
           </View>
-        ) : <Button label={words.cancelRsvp} variant="outline" onPress={() => setConfirming(true)} />)}
-        {cancel.error && <Text style={errorText}>{isAcmsError(cancel.error) && cancel.error.status === 0 ? words.checkConnection : cancel.error.message}</Text>}
-        {!canCancel && state !== 'declined' && <Text style={t.styles.text.small}>{words.changeByEmail}</Text>}
+        ) : <Button label={leave.label} variant="outline" disabled={take.isPending} onPress={() => setConfirming(true)} />)}
+        {cancel.error && <Text style={errorText}>{failed(cancel.error)}</Text>}
+        {take.error && !isReleased(take.error) && <Text style={errorText}>{failed(take.error)}</Text>}
+        {!canCancel && !over && <Text style={t.styles.text.small}>{words.changeByEmail}</Text>}
       </View>
-      {state !== 'declined' && children}
+      {(state === 'confirmed' || state === 'pending') && children}
     </>);
   }
 
   if (s.reason === 'disabled') return null;
-  if (!s.open) return (
+  if (!s.open && !joining) return (
     <View style={[t.styles.card, { gap: 6 }]}>
       <Text accessibilityRole="header" style={t.styles.text.heading}>{s.reason === 'full' ? words.full : s.reason === 'cancelled' ? words.dateCancelled : words.rsvpClosed}</Text>
       {s.reason === 'full' ? going : <Text style={t.styles.text.muted}>{s.reason === 'cancelled' ? words.noRsvpNeeded : s.reason === 'closed' ? deadline || words.rsvpClosed : words.dateEnded}</Text>}
@@ -162,12 +194,14 @@ export function RsvpPanel({ slug, start, children }: { slug: string; start: stri
   const emailProblem = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()) ? words.emailProblem : '';
   // the form may ask for a phone itself
   const askPhone = !fields.some((f) => f.type === 'phone');
-  const chosen = Math.min(seats, s.maxSeats) || 1;
+  // a place in line may ask for the event's own limit (the status's maxSeats is what's left)
+  const choices = joining ? waitlistSeatChoices(s) : seatChoices(s);
+  const chosen = Math.min(seats, choices.length) || 1;
   const submit = () => {
     setTried(true);
     setNotice('');
     if (nameProblem || emailProblem || Object.keys(problems).length) return;
-    rsvp.mutate({ name, email, phone: askPhone ? phone : '', seats: chosen, answers }, {
+    rsvp.mutate({ name, email, phone: askPhone ? phone : '', seats: chosen, answers, waitlist: joining }, {
       onSuccess: (data) => { if (key) void tokens.set(key, data.manageToken); setStored(data.manageToken); },
     });
   };
@@ -243,20 +277,21 @@ export function RsvpPanel({ slug, start, children }: { slug: string; start: stri
   return (
     <View style={[t.styles.card, { gap: 16 }]}>
       <View style={{ gap: 4 }}>
-        <Text accessibilityRole="header" style={t.styles.text.heading}>{form?.title || words.rsvpTitle}</Text>
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{joining ? words.full : form?.title || words.rsvpTitle}</Text>
         {going}
         {!!deadline && <Text style={t.styles.text.muted}>{deadline}</Text>}
+        {joining && <Text style={t.styles.text.muted}>{words.waitlistNote}</Text>}
         {!!notice && <Text style={t.styles.text.muted}>{notice}</Text>}
         {!!form?.intro && <Text style={t.styles.text.muted}>{form.intro}</Text>}
       </View>
       {text(words.nameField, name, setName, { required: true, auto: 'name', problem: tried ? nameProblem : '' })}
       {text(words.emailField, email, setEmail, { required: true, keyboard: 'email-address', auto: 'email', problem: tried ? emailProblem : '' })}
       {askPhone && text(words.phoneField, phone, setPhone, { keyboard: 'phone-pad', auto: 'tel' })}
-      {s.maxSeats > 1 && (
+      {choices.length > 1 && (
         <View style={{ gap: 6 }}>
           {label(words.seatsField, false)}
           <View accessibilityRole="radiogroup" style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
-            {seatChoices(s).map((n) => (
+            {choices.map((n) => (
               <Pressable key={n} accessibilityRole="radio" accessibilityLabel={seatsText(n)} accessibilityState={{ checked: n === chosen }} onPress={() => setSeats(n)} style={[chip(n === chosen), { minWidth: 48, alignItems: 'center' }]}>
                 <Text style={[t.styles.text.body, n === chosen && { fontWeight: '600' }]}>{num(n)}</Text>
               </Pressable>
@@ -274,7 +309,7 @@ export function RsvpPanel({ slug, start, children }: { slug: string; start: stri
         </View>
       )}
       {tried && (nameProblem || emailProblem || Object.keys(problems).length > 0) && <Text style={errorText}>{words.checkAnswers}</Text>}
-      <Button label={rsvp.isPending ? words.sending : form?.submitLabel || (s.autoConfirm ? words.confirmSeat : words.requestSeat)} disabled={rsvp.isPending} onPress={submit} />
+      <Button label={rsvp.isPending ? words.sending : joining ? words.joinWaitlist : form?.submitLabel || (s.autoConfirm ? words.confirmSeat : words.requestSeat)} disabled={rsvp.isPending} onPress={submit} />
       <Text style={t.styles.text.small}>{words.rsvpPrivacy}</Text>
     </View>
   );

package/mobile-template/recipes/rsvp/recipe.json

@@ -1,7 +1,7 @@
 {
   "kind": "client",
   "title": "RSVP",
-  "description": "An RSVP panel for an event date: going and spots left, seats, the event's questions with inline errors, then the person's RSVP with Cancel, or why the date is full or closed. Already part of the events recipe; add it to an event screen of your own.",
+  "description": "An RSVP panel for an event date: going and spots left, seats, the event's questions with inline errors, then the person's RSVP with Cancel, or why the date is full or closed. A full date whose event keeps a waitlist takes places in line, with Confirm my spot when one opens. Already part of the events recipe; add it to an event screen of your own.",
   "packages": [
     "expo-crypto",
     "expo-secure-store"
@@ -11,6 +11,6 @@
     "Mount it on your event screen where the date is known: <RsvpPanel slug={occurrence.event.slug} start={occurrence.start} /> from '../../components/RsvpPanel', with start exactly as useEvents returns it (the UTC ISO string, e.g. pass o.start through router params), and only when occurrence.event.rsvp?.enabled",
     "The screen should scroll and avoid the keyboard: wrap it in <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}> with <ScrollView keyboardShouldPersistTaps=\"handled\">",
     "RSVPs need only the calendar (useSite().data.features.rsvp). Each RSVP's private manage token stays in expo-secure-store (never a URL or log): the panel shows the person's RSVP and lets them cancel it; the confirmation email's link works too",
-    "Anything you pass as children shows under the person's RSVP (not a declined one), e.g. an offer to get notified if the date, time or place changes: <RsvpPanel slug={…} start={…}><MyOffer /></RsvpPanel>. With push on, occurrence.event.notify.changes lists the topics that hear about changes ([] = none)"
+    "Anything you pass as children shows under the person's RSVP (confirmed or waiting for approval, not a place in line), e.g. an offer to get notified if the date, time or place changes: <RsvpPanel slug={…} start={…}><MyOffer /></RsvpPanel>. With push on, occurrence.event.notify.changes lists the topics that hear about changes ([] = none)"
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.40",
+  "version": "0.3.42",
   "publishConfig": {
     "access": "public"
   },

package/src/actions/index.ts

@@ -995,7 +995,7 @@ export const server = {
         calendarIds: z.array(z.string()).max(50).optional(),
         fields: z.record(z.string().max(2000)).optional(),
         rsvp: z.object({ enabled: z.boolean(), capacity: z.number().int().min(0).max(100000), autoConfirm: z.boolean(), maxSeats: z.number().int().min(1).max(50),
-          closesAt: z.string().max(40).nullable().optional(), closeBefore: z.number().int().min(0).max(86400).optional(), notifyStaff: z.boolean().optional(), form: z.any().optional() }).optional(),
+          closesAt: z.string().max(40).nullable().optional(), closeBefore: z.number().int().min(0).max(86400).optional(), notifyStaff: z.boolean().optional(), waitlist: z.boolean().optional(), form: z.any().optional() }).optional(),
         roomHold: z.object({ resourceIds: z.array(z.string()).max(50), span: z.enum(['event', 'day']), before: z.number().int().min(0).max(1440), after: z.number().int().min(0).max(1440), whileDraft: z.boolean(), keep: z.array(z.string()).max(500).default([]) }).optional(),
         scheduledAt: nullableTs.optional(),
       }),

package/src/components/Announcements.tsx

@@ -3,6 +3,7 @@ import type { AdminAnnouncementAction, AdminAnnouncementsState } from '../lib/an
 import type { Announcement, AnnouncementInput, AnnouncementKind, AnnouncementWords } from '../lib/announcements/types';
 import type { PushNotification } from '../lib/push/types';
 import { announcementStrings } from '../lib/announcements/words';
+import TestPhones, { SendTest } from './TestPhones';
 import '../styles/announcements.css';
 
 // Admin → Announcements: write a message once, choose where it shows (the
@@ -274,6 +275,7 @@ function List({ state, setState, tab, setTab, flash, setFlash, focusTabs, onEdit
           {state.base && <a href={`${state.site.origin}${state.base}`} target="_blank" rel="noopener">View on the site ↗</a>}
         </p>
       )}
+      {state.push.enabled && <TestPhones />}
       <dialog className="modal" ref={dialog} aria-labelledby="an-del-h" onClose={() => setDoomed(null)}>
         <div className="modal-head"><span id="an-del-h">Delete this announcement?</span>
           <button type="button" className="modal-x" onClick={() => dialog.current?.close()} aria-label="Close">✕</button></div>
@@ -681,7 +683,12 @@ function Composer({ state, setState, startId, onClose }: {
             {tz && state.site.timezone && tz !== state.site.timezone && <p className="hint an-after">Times are in this device’s time zone ({tz}); the site uses {state.site.timezone}.</p>}
           </div>
         </div>
-        <Preview state={state} form={form} lang={previewLang} setLang={setPreviewLang} />
+        <Preview state={state} form={form} lang={previewLang} setLang={setPreviewLang}>
+          {state.push.enabled && (
+            <SendTest problem={!localize(form, previewLang, main.code).title.trim() ? 'Add a title first.' : badLink || (form.linkRef === CUSTOM && !link) ? 'Fix the button’s address first.' : undefined}
+              send={() => api<{ notification: PushNotification }>({ action: 'test', announcement: input, locale: previewLang }).then((r) => r.notification)} />
+          )}
+        </Preview>
       </div>
 
       <dialog className="modal an-review" ref={review} aria-labelledby={`${uid}-review-h`}>
@@ -764,7 +771,8 @@ function Toggle({ label, note, checked, disabled, onChange }: { label: string; n
 
 // A phone lock screen with the push, and the website banner when pinned.
 // Device and site previews: fixed neutral colours, not admin tokens.
-function Preview({ state, form, lang, setLang }: { state: State; form: Form; lang: string; setLang: (l: string) => void }) {
+// children: "Send test to my phone", under the phone
+function Preview({ state, form, lang, setLang, children }: { state: State; form: Form; lang: string; setLang: (l: string) => void; children?: ReactNode }) {
   const [open, setOpen] = useState(false);
   const [time, setTime] = useState(() => new Date());
   useEffect(() => { const t = setInterval(() => setTime(new Date()), 30_000); return () => clearInterval(t); }, []);
@@ -803,6 +811,7 @@ function Preview({ state, form, lang, setLang }: { state: State; form: Form; lan
         </div>
       </div>
       <p className="hint an-cap">{push ? 'Phones shorten long text; keep the key words first.' : 'Not pushed. Tick Push to phones to send it.'}</p>
+      {children}
       {form.pinned && (
         <div className="an-site">
           <small className="an-site-label">Website banner</small>

package/src/components/EventPage.astro

@@ -28,8 +28,9 @@ interface Props {
   preview?: boolean;
   // RSVP state when the event takes RSVPs (null otherwise). closesAt: this
   // date's RSVP deadline (ms; null = open until it ends); duplicate: the
-  // address already has an RSVP for it (error then holds the same words)
-  rsvp?: { going: number; left: number | null; maxSeats: number; error: string; open: boolean; closesAt?: number | null; duplicate?: boolean; formHtml?: string; fieldsHtml?: string; values?: { name: string; email: string; seats: string } } | null;
+  // address already has an RSVP for it (error then holds the same words);
+  // waitlist: a full date takes places in line (the form posts waitlist=1)
+  rsvp?: { going: number; left: number | null; maxSeats: number; error: string; open: boolean; closesAt?: number | null; duplicate?: boolean; waitlist?: boolean; formHtml?: string; fieldsHtml?: string; values?: { name: string; email: string; seats: string } } | null;
 }
 const { event: e, occurrence: o, settings, calendars, html, upcoming, origin, preview = false, rsvp = null } = Astro.props;
 // the whole event, or just this date of a repeating one
@@ -81,6 +82,10 @@ const w = rsvpStrings(lang);
 const going = rsvp ? aroundCount(rsvp.going, w.personGoing, w.peopleGoing) : ['', ''];
 const left = rsvp && rsvp.left !== null ? aroundCount(rsvp.left, w.spotLeft, w.spotsLeft) : ['', ''];
 const taking = Boolean(rsvp?.open) && (rsvp!.left === null || rsvp!.left > 0);
+// full, with a waitlist: "Full · 40 going · no spots left", then "Join the waitlist" with the same form
+const joining = Boolean(rsvp?.open && rsvp.waitlist && rsvp.left === 0);
+const formClass = joining ? 'pc-ev-rsvpform is-waitlist' : 'pc-ev-rsvpform';
+const seatOptions = rsvp ? Math.min(rsvp.maxSeats, joining ? rsvp.maxSeats : rsvp.left ?? rsvp.maxSeats) : 0;
 // "RSVPs close Fri, Oct 24 at 9 PM" while open; once past, "They closed on Fri, Oct 24."
 const deadline = typeof rsvp?.closesAt === 'number' ? deadlineParts(rsvp.closesAt, tz, locale) : null;
 const closesLine = deadline && taking ? fill(w.closesOn, deadline) : '';
@@ -157,13 +162,16 @@ const moreCards = upcoming.map((u) => eventCardHtml(u, settings, { showImage: tr
       ))}
       {rsvp ? (
         <div class="pc-ev-rsvp">
-          <p class="pc-ev-going">{going[0]}<b>{rsvp.going}</b>{going[1]}{rsvp.left !== null && <> · {left[0]}<b>{rsvp.left}</b>{left[1]}</>}</p>
+          {joining && <p class="pc-ev-full is-waitlist">{w.fullTag}</p>}
+          <p class="pc-ev-going">{going[0]}<b>{rsvp.going}</b>{going[1]}{rsvp.left !== null && (joining ? <> · {w.noSpotsLeft}</> : <> · {left[0]}<b>{rsvp.left}</b>{left[1]}</>)}</p>
           {closesLine && <p class="pc-ev-closes">{closesLine}</p>}
-          {taking ? (
-            <details class="pc-ev-rsvpform" open={Boolean(rsvp.error)}>
-              <summary class="pc-ev-cta">{w.saveSeat}</summary>
+          {joining && <p class="pc-ev-waitlist">{w.waitlistNote}</p>}
+          {taking || joining ? (
+            <details class={formClass} open={Boolean(rsvp.error)}>
+              <summary class="pc-ev-cta">{joining ? w.joinWaitlist : w.saveSeat}</summary>
               <form method="post">
                 <Fragment set:html={rsvp.formHtml ?? ''}/>
+                {joining && <input type="hidden" name="waitlist" value="1" />}
                 {e.rsvp.form?.title && <h3>{e.rsvp.form.title}</h3>}
                 {e.rsvp.form?.intro && <p>{e.rsvp.form.intro}</p>}
                 {rsvp.duplicate ? <p class="pc-ev-notice" role="status"><b>{w.duplicate}</b> {w.duplicateNote}</p> : rsvp.error && <p class="pc-bk-error">{rsvp.error}</p>}
@@ -171,11 +179,11 @@ const moreCards = upcoming.map((u) => eventCardHtml(u, settings, { showImage: tr
                 <label class="pc-bk-field"><span>{w.emailField}</span><input name="email" type="email" required maxlength="200" autocomplete="email" value={rsvp.values?.email} /></label>
                 {rsvp.maxSeats > 1 && (
                   <label class="pc-bk-field"><span>{w.seatsField}</span>
-                    <select name="seats">{Array.from({ length: Math.min(rsvp.maxSeats, rsvp.left ?? rsvp.maxSeats) }, (_, i) => <option value={i + 1} selected={Number(rsvp.values?.seats || 1) === i + 1}>{i + 1}</option>)}</select>
+                    <select name="seats">{Array.from({ length: seatOptions }, (_, i) => <option value={i + 1} selected={Number(rsvp.values?.seats || 1) === i + 1}>{i + 1}</option>)}</select>
                   </label>
                 )}
                 <Fragment set:html={rsvp.fieldsHtml ?? ''}/>
-                <button class="pc-bk-submit" type="submit">{e.rsvp.form?.submitLabel || (e.rsvp.autoConfirm ? w.confirmSeat : w.requestSeat)}</button>
+                <button class="pc-bk-submit" type="submit">{joining ? w.joinWaitlist : e.rsvp.form?.submitLabel || (e.rsvp.autoConfirm ? w.confirmSeat : w.requestSeat)}</button>
               </form>
             </details>
           ) : <p class="pc-ev-full">{rsvp.open ? w.full : w.closed}</p>}

package/src/components/MobileApp.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from 'react';
 import type { AdminPushState } from '../lib/push/api';
 import type { ChangeRule, PushAuto, PushNotification } from '../lib/push/types';
+import TestPhones, { SendTest } from './TestPhones';
 import '../styles/mobile-app.css';
 
 // Admin → Mobile app: send a notification to the site's own app, choose the
@@ -37,7 +38,7 @@ function ago(ms: number, now: number) {
     : d.toLocaleDateString([], { month: 'short', day: 'numeric', ...(d.getFullYear() !== new Date(now).getFullYear() ? { year: 'numeric' } : {}) });
 }
 
-const SOURCE: Record<PushNotification['source'], string> = { manual: 'Sent by', post: 'New post', event: 'New event', soon: 'Starting soon', live: 'We’re live', announcement: 'Announcement by', change: 'Event changed' };
+const SOURCE: Record<PushNotification['source'], string> = { manual: 'Sent by', post: 'New post', event: 'New event', soon: 'Starting soon', live: 'We’re live', announcement: 'Announcement by', change: 'Event changed', test: 'Test by' };
 
 export default function MobileApp() {
   const [state, setState] = useState<AdminPushState | null>(null);
@@ -74,6 +75,7 @@ function MobileAppView({ state, setState }: { state: AdminPushState; setState: (
         </div>
       )}
       <Composer state={state} setState={setState} topicLabel={topicLabel} />
+      <TestPhones />
       <div className="ma-grid ma-grid-2">
         <Automatic state={state} setState={setState} />
         <Audience state={state} topicLabel={topicLabel} />
@@ -116,8 +118,14 @@ function Composer({ state, setState, topicLabel }: { state: AdminPushState; setS
   }, [mode, topics.join('|'), state.stats.devices]);
 
   const toggle = (id: string) => setTopics((t) => (t.includes(id) ? t.filter((x) => x !== id) : [...t, id]));
-  const problem = !title.trim() ? 'Add a title.' : mode === 'topics' && !topics.length ? 'Choose at least one topic.'
-    : linkRef === CUSTOM && url && !/^(\/(?!\/)|https?:\/\/)/i.test(url) ? 'Links start with / or https://.' : '';
+  const badLink = linkRef === CUSTOM && url && !/^(\/(?!\/)|https?:\/\/)/i.test(url) ? 'Links start with / or https://.' : '';
+  const problem = !title.trim() ? 'Add a title.' : mode === 'topics' && !topics.length ? 'Choose at least one topic.' : badLink;
+  // a test goes to the sender's own phones: the audience doesn't matter
+  const sendTest = async () => {
+    const r = await api<{ notification: PushNotification; state: AdminPushState }>({ action: 'test', title: title.trim(), body: body.trim(), url });
+    setState(r.state);
+    return r.notification;
+  };
 
   const send = async () => {
     setBusy(true); setMsg({});
@@ -194,7 +202,9 @@ function Composer({ state, setState, topicLabel }: { state: AdminPushState; setS
           <button type="button" className="btn primary" disabled={!!problem || busy} title={problem || undefined} onClick={() => dialog.current?.showModal()}>Send…</button>
         </div>
       </div>
-      <LockScreen state={state} title={title} body={body} />
+      <LockScreen state={state} title={title} body={body}>
+        <SendTest send={sendTest} problem={!title.trim() ? 'Add a title.' : badLink || undefined} />
+      </LockScreen>
       <dialog className="modal" ref={dialog} aria-labelledby="ma-confirm-h">
         <div className="modal-head"><span id="ma-confirm-h">Send to {count === null ? 'these devices' : plural(count, 'device')}?</span>
           <button type="button" className="modal-x" onClick={() => dialog.current?.close()} aria-label="Close">✕</button></div>
@@ -217,7 +227,8 @@ function Composer({ state, setState, topicLabel }: { state: AdminPushState; setS
 
 // A phone lock screen with the notification as it will show. Device preview:
 // fixed neutral colors (like the site previews), not admin tokens.
-function LockScreen({ state, title, body }: { state: AdminPushState; title: string; body: string }) {
+// children: "Send test to my phone", under the phone
+function LockScreen({ state, title, body, children }: { state: AdminPushState; title: string; body: string; children?: ReactNode }) {
   const [now, setNow] = useState(() => new Date());
   useEffect(() => { const t = setInterval(() => setNow(new Date()), 30_000); return () => clearInterval(t); }, []);
   return (
@@ -244,6 +255,7 @@ function LockScreen({ state, title, body }: { state: AdminPushState; title: stri
         </div>
       </div>
       <figcaption className="hint">Phones shorten long text; keep the key words first.</figcaption>
+      {children}
     </figure>
   );
 }
@@ -450,8 +462,8 @@ function DeliveryLog({ log, topicLabel }: { log: PushNotification[]; topicLabel:
                     {n.body && <div className="ma-body">{n.body}</div>}
                     {n.url && <div className="t-sub ma-url">{n.url}</div>}
                   </td>
-                  <td data-l="Audience" className="ma-aud">{n.topics.map(topicLabel).join(', ')}</td>
-                  <td data-l="From">{SOURCE[n.source]}{n.source === 'manual' && n.author ? ` ${n.author}` : n.source === 'manual' ? ' an owner' : ''}</td>
+                  <td data-l="Audience" className="ma-aud">{n.source === 'test' ? 'Their test phones' : n.topics.map(topicLabel).join(', ')}</td>
+                  <td data-l="From">{SOURCE[n.source]}{(n.source === 'manual' || n.source === 'test') && n.author ? ` ${n.author}` : n.source === 'manual' || n.source === 'test' ? ' an owner' : ''}</td>
                   <td data-l="Delivered" className="num ma-result">
                     {n.status === 'sending' ? <span className="ma-st" data-tone="info">Sending…</span>
                       : !n.recipients ? <span className="ma-st">No devices</span>

package/src/components/TestPhones.tsx

@@ -0,0 +1,177 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import type { TestPhonesState } from '../lib/push/staff';
+import type { PushNotification } from '../lib/push/types';
+import '../styles/test-phones.css';
+
+// Test phones (Admin → Announcements and Admin → Mobile app): each staff
+// member links their own phone once with a one-time code typed into the app,
+// then "Send test to my phone" in a composer reaches only their phones. The
+// owner password has no account (or email) to link a phone to.
+
+const ENDPOINT = '/api/push/phones';
+// LINK_CODE_MS (lib/push/staff, which brings the server)
+const CODE_MS = 10 * 60_000;
+type State = TestPhonesState & { code?: string };
+
+async function api<T>(body?: Record<string, unknown>): Promise<T> {
+  const res = await fetch(ENDPOINT, {
+    method: body ? 'POST' : 'GET', credentials: 'same-origin',
+    headers: body ? { 'content-type': 'application/json', accept: 'application/json' } : { accept: 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) throw new Error(data?.issues?.[0]?.message || data?.error || `${res.status} ${res.statusText || 'Request failed'}`);
+  return data as T;
+}
+const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+const PLATFORM = { ios: 'iPhone or iPad', android: 'Android phone' } as const;
+const clock = (ms: number) => new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+function when(ms: number, now: number) {
+  const s = Math.round((now - ms) / 1000);
+  if (s < 60) return 'just now';
+  if (s < 3600) return `${Math.floor(s / 60)} min ago`;
+  const d = new Date(ms);
+  return new Date(now).toDateString() === d.toDateString() ? `today, ${clock(ms)}`
+    : d.toLocaleDateString([], { month: 'short', day: 'numeric', ...(d.getFullYear() !== new Date(now).getFullYear() ? { year: 'numeric' } : {}) });
+}
+
+/**
+ * The panel: this person's linked phones (Remove) and "Link my phone", which
+ * shows a code and waits for the app to use it. `embedded`: inside a dialog
+ * (no card, no anchor). `onPhones` hears how many are linked.
+ */
+export default function TestPhones({ embedded = false, onPhones }: { embedded?: boolean; onPhones?: (n: number) => void }) {
+  const uid = useId();
+  const [state, setState] = useState<State | null>(null);
+  const [loadError, setLoadError] = useState('');
+  const [code, setCode] = useState<{ code: string; expiresAt: number } | null>(null);
+  const [busy, setBusy] = useState('');
+  const [msg, setMsg] = useState<{ ok?: string; err?: string }>({});
+  const root = useRef<HTMLElement>(null);
+  const show = (s: State) => { setState(s); onPhones?.(s.phones.length); };
+
+  useEffect(() => { api<State>().then(show, (e) => setLoadError(errText(e))); }, []);
+  // the link in the "A phone was linked" email lands here
+  useEffect(() => { if (state && !embedded && location.hash === '#test-phones') root.current?.scrollIntoView({ block: 'start' }); }, [state === null]);
+  // while a code waits, look for the phone that uses it
+  useEffect(() => {
+    if (!code) return;
+    const t = setInterval(async () => {
+      if (Date.now() >= code.expiresAt) { setCode(null); setMsg({ err: 'That code expired. Make a new one when your phone is ready.' }); return; }
+      const next = await api<State>().catch(() => null);
+      if (!next || next.codeExpiresAt !== null) return;
+      setCode(null);
+      show(next);
+      // used (a phone linked since it was made), or voided after too many wrong codes on the site
+      setMsg(next.phones.some((p) => p.linkedAt >= code.expiresAt - CODE_MS) ? { ok: 'Phone linked. Tests you send now reach it.' } : { err: 'That code stopped working. Make a new one.' });
+    }, 4000);
+    return () => clearInterval(t);
+  }, [code]);
+
+  const run = async (body: Record<string, unknown>, label: string) => {
+    setBusy(label); setMsg({});
+    try {
+      const next = await api<State>(body);
+      show(next);
+      if (next.code && next.codeExpiresAt) setCode({ code: next.code, expiresAt: next.codeExpiresAt });
+      else if (body.action === 'remove') setMsg({ ok: 'Removed. It won’t get your tests.' });
+    } catch (e) { setMsg({ err: errText(e) }); } finally { setBusy(''); }
+  };
+
+  const now = Date.now();
+  return (
+    <section ref={root} className={embedded ? 'tp' : 'card card-pad tp'} id={embedded ? undefined : 'test-phones'} aria-labelledby={embedded ? undefined : `${uid}-h`}>
+      {!embedded && (
+        <header className="tp-head">
+          <h2 id={`${uid}-h`}>Test phones</h2>
+          <p>Link your own phone to see a notification on it before it goes out. Only you get your tests.</p>
+        </header>
+      )}
+      {loadError ? <p className="flash error" role="alert">{loadError}</p> : !state ? <p className="hint">Loading…</p> : !state.canLink ? (
+        <p className="hint tp-note">You’re signed in with the owner password, which has no account to link a phone to. Sign in with a Team account that has an email to link one. Owners create accounts in Team → Users.</p>
+      ) : (
+        <>
+          {state.phones.length > 0 ? (
+            <ul className="tp-list">
+              {state.phones.map((p) => (
+                <li key={p.id}>
+                  <span className="tp-phone">
+                    <b>{PLATFORM[p.platform] ?? p.platform}</b>
+                    <small>Linked {when(p.linkedAt, now)} · App last opened {when(p.lastSeenAt, now)}</small>
+                  </span>
+                  <button type="button" className="btn sm" disabled={busy !== ''} onClick={() => run({ action: 'remove', id: p.id }, p.id)}>
+                    {busy === p.id ? 'Removing…' : 'Remove'}</button>
+                </li>
+              ))}
+            </ul>
+          ) : <p className="tp-empty">No phone linked yet.</p>}
+          {code ? (
+            <div className="tp-code" role="group" aria-label="Link code">
+              {/* read out digit by digit */}
+              <b className="tp-digits" aria-hidden="true">{code.code}</b>
+              <span className="sr-only">Code: {code.code.split('').join(' ')}.</span>
+              <p>In the app, open Notifications and choose Link this phone, then enter this code. It works once, until {clock(code.expiresAt)}.</p>
+              <button type="button" className="btn sm" disabled={busy !== ''} onClick={() => run({ action: 'code' }, 'code')}>New code</button>
+            </div>
+          ) : (
+            <button type="button" className="btn" disabled={busy !== ''} onClick={() => run({ action: 'code' }, 'code')}>
+              {busy === 'code' ? 'Making a code…' : state.phones.length ? 'Link another phone' : 'Link my phone'}</button>
+          )}
+        </>
+      )}
+      <div className="tp-flash" aria-live="polite">
+        {msg.ok && <p className="flash">{msg.ok}</p>}
+        {msg.err && <p className="flash error">{msg.err}</p>}
+      </div>
+    </section>
+  );
+}
+
+/** what a test send says: how many of the sender's phones it went to */
+export function testResult(n: PushNotification): { ok?: string; err?: string } {
+  if (n.status === 'failed') return { err: `Not delivered: ${n.error || 'the push service refused it.'}` };
+  if (n.ok === n.sent) return { ok: n.sent === 1 ? 'Test sent to your phone.' : `Test sent to your ${n.sent} phones.` };
+  return { ok: `Test sent to ${n.ok} of your ${n.sent} phones.${n.error ? ` ${n.error}` : ''}` };
+}
+
+/**
+ * "Send test to my phone" for a composer. `send` posts the draft as it
+ * stands; `problem` disables it. With no phone linked yet it opens the Test
+ * phones panel in a dialog instead.
+ */
+export function SendTest({ send, problem }: { send: () => Promise<PushNotification>; problem?: string }) {
+  const uid = useId();
+  const [phones, setPhones] = useState<number | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState<{ ok?: string; err?: string }>({});
+  const dialog = useRef<HTMLDialogElement>(null);
+  const run = async () => {
+    setBusy(true); setMsg({});
+    try { setMsg(testResult(await send())); } catch (e) { setMsg({ err: errText(e) }); } finally { setBusy(false); }
+  };
+  return (
+    <div className="tp-send">
+      {phones === 0 ? (
+        <button type="button" className="btn" onClick={() => { setMsg({}); dialog.current?.showModal(); }}>Link a phone to send tests…</button>
+      ) : (
+        <button type="button" className="btn" disabled={busy || !!problem} title={problem || undefined} onClick={run}>{busy ? 'Sending test…' : 'Send test to my phone'}</button>
+      )}
+      <div className="tp-flash" aria-live="polite">
+        {msg.ok && <p className="flash">{msg.ok}</p>}
+        {msg.err && <p className="flash error">{msg.err}</p>}
+      </div>
+      <dialog className="modal" ref={dialog} aria-labelledby={`${uid}-h`}>
+        <div className="modal-head"><span id={`${uid}-h`}>Test phones</span>
+          <button type="button" className="modal-x" onClick={() => dialog.current?.close()} aria-label="Close">✕</button></div>
+        <div className="modal-body">
+          <p className="hint tp-intro">Link your own phone to see a notification on it before it goes out. Only you get your tests.</p>
+          {/* loads on mount (the dialog's content is always there) and says how many are linked */}
+          <TestPhones embedded onPhones={setPhones} />
+          <div className="modal-foot">
+            <button type="button" className="btn" onClick={() => dialog.current?.close()}>Done</button>
+          </div>
+        </div>
+      </dialog>
+    </div>
+  );
+}