@acms-subir/core 0.3.36 → 0.3.38

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @acms-subir/core
 
+## 0.3.38
+
+### Patch Changes
+
+- 8d85520: `GET /api/v1/site?locale=es` returns the menu the way the `/es` header shows it: links to the Spanish pages, and the automatic menu's own words translated ("Inicio", "Enlaces"). Labels you wrote in Navigation stay as written. Events in the app API carry `notify.changes`, the push topics that hear when the event's date, time or place changes (Admin → Mobile app → When an event changes), or `[]`, so an app only promises "we'll let you know if it changes" when it's true. The RSVP panel recipe takes `children`, shown under the person's RSVP.
+- 7b71457: Event pages now follow the page's language, in English, Spanish, French, German and Portuguese (other languages stay in English). On `/es` event pages, and on a site whose main language is Spanish, a cancelled date said "Cancelled on … Other dates go ahead as usual." in English; now it says "Cancelado el domingo, 25 de octubre de 2026. Las demás fechas siguen como siempre.", so the "Cancelado el …" push opens a page that matches it. The same goes for a cancelled event, the "Cancelado" flag on event cards and in the calendar's pop-up, "Todo el día", the repeat line ("Todos los domingos", "El primer domingo de cada mes", "Cada 2 semanas, los lunes, 6 veces"), Agregar al calendario, Descargar .ics, Compartir and Enlace copiado, Más eventos, Ver el calendario completo, the map's labels and "Mostrando el …". Links on a `/es` event page (more events, the calendar, sharing) stay in Spanish. Theme event templates can use the same words with `eventStrings` and `describeRepeat` from `@acms-subir/core/theme`.
+
+  Booking and RSVP emails now speak the language the person used: the page's on the website (RSVPs from `/es` event pages, and bookings from `/es/book/…`, whose pages stay in English), the app's `locale` on `POST /api/v1/bookings`, and the site's main language for bookings staff add. The subject, message, details, dates and button are in that language, RSVPs show the event's translated title and place, and every link (the booking's own page, the calendar file) keeps it, such as `/es/book/manage/…`. Spanish emails say _usted_, like the privacy notice. In the app API, `manageUrl` (and the event's `url` from `GET /api/v1/bookings/manage`) points to the page in that language too. Staff notifications stay in the main language. Older bookings, and backups made before this release, use the main language. On a site whose main language isn't English, booking emails without a language (and staff notifications) now come in that language instead of English. Migration 60 adds `bookings.locale` (default `''`, the main language).
+
+  A room booking's own page (`/book/manage/…`, the page booking emails link to) now follows the page's language too, like an RSVP's: "Tu reservación está confirmada", Cambiar horario, Cancelar reservación and so on. Opened without `/es`, it shows the main language.
+
+## 0.3.37
+
+### Patch Changes
+
+- 12fdb58: RSVPs now follow the page's or the app's language, in English, Spanish, French, German and Portuguese (other languages stay in English). On `/es` event pages, and on a site whose main language is Spanish, the RSVP block still said "going", "spots left", "Save my seat", "Your name", "Email", "Seats", "Confirm my seat" or "Request a seat", "This event is full." and "RSVPs are closed." in English; now it says "van", "lugares disponibles", "Apartar mi lugar" and so on. RSVPing from an `/es` page lands on the RSVP's own page in Spanish too: the heading, status, details, Add to calendar, the cancel button, the event's title and the link back, with the date in Spanish. Room booking pages stay in English.
+
+  `GET /api/v1/events/:slug/rsvp` names the built-in button ("Confirm my seat", or "Request a seat" when the organiser approves RSVPs) in the `locale` the app asks for, or the site's main language. A button label you wrote stays as you wrote it.
+
+  The RSVP panel in the app recipes (`components/RsvpPanel.tsx`) takes every word from `useStrings()`, including screen-reader labels and the errors next to answers, so it speaks the app's language (English and Spanish built in; pass `strings` to `<AcmsProvider>` for others), with numbers in the app's format. The event's own form title, questions and button keep your words. Apps that already have the panel, from the `events` or the `rsvp` recipe, can update it with `npx acms mobile recipe add rsvp --force`. That overwrites `components/RsvpPanel.tsx`, including any changes you made to it, and needs this release's `@acms-subir/native`.
+
 ## 0.3.36
 
 ### Patch Changes

package/cli/migrations.generated.mjs

@@ -1111,6 +1111,11 @@ var MIGRATIONS = [
   { version: 59, statements: [
     `ALTER TABLE push_queue ADD COLUMN payload TEXT`,
     `ALTER TABLE push_queue ADD COLUMN due_at INTEGER`
+  ] },
+  // the language a booking or RSVP was made in (Booking.locale), so its
+  // emails and links follow it; '' = the main language, so older rows need no backfill
+  { version: 60, statements: [
+    `ALTER TABLE bookings ADD COLUMN locale TEXT NOT NULL DEFAULT ''`
   ] }
 ];
 var CURRENT_CONTENT_VERSION_COLUMNS = {

package/docs/theme-authoring.md

@@ -32,7 +32,7 @@ const { page, posts } = Astro.props;
 {posts.map(post => <PostCard href={collectionUrl(post.collection, post.slug)} title={post.title} excerpt={post.excerpt} />)}
 ```
 
-Public types: ChromeProps (site), HomeProps (settings, page, posts, tags), PageProps (settings, page, html), PostProps (settings, post, html, authors, related), EventProps (settings, event, occurrence, calendars, html, upcoming, origin, preview, rsvp), SectionProps (settings, page, variant, data). Public components: PostCard with card/row/feature variants, Pager with base/page/count, TagLabel with name/href/accent. Helpers include collectionUrl, postUrl, postsIndexUrl, tagUrl, formatDate, slugify, authorSlug, localeFromPath, localeHomeUrl and CONTENT. Use collectionUrl for non-default collections; postUrl is the built-in posts alias.
+Public types: ChromeProps (site), HomeProps (settings, page, posts, tags), PageProps (settings, page, html), PostProps (settings, post, html, authors, related), EventProps (settings, event, occurrence, calendars, html, upcoming, origin, preview, rsvp), SectionProps (settings, page, variant, data). Public components: PostCard with card/row/feature variants, Pager with base/page/count, TagLabel with name/href/accent. Helpers include collectionUrl, postUrl, postsIndexUrl, tagUrl, formatDate, slugify, authorSlug, localeFromPath, localeHomeUrl and CONTENT. For an event template, `eventStrings(lang)` gives the built-in event page's words (Cancelled, Add to calendar, Share, …) and `describeRepeat(event.rrule, event.start, formatDate?, lang)` its repeat line ("Weekly on Sunday", "Todos los domingos"), in English, Spanish, French, German or Portuguese, otherwise English. Use collectionUrl for non-default collections; postUrl is the built-in posts alias.
 
 ### Upcoming events in coded templates
 

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

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, 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, answerProblems, seatChoices, useCancelBooking, useGuest, useManagedBooking, useRsvp, useRsvpStatus, useSite, useTheme } from '@acms-subir/native';
+import { Button, answerProblemText, answerProblems, countWords, fill, seatChoices, useCancelBooking, useGuest, useLocale, useManagedBooking, useRsvp, useRsvpStatus, useSite, useStrings, useTheme } 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,
@@ -11,7 +11,9 @@ import { Button, answerProblems, seatChoices, useCancelBooking, useGuest, useMan
 // with a way to cancel it; or why the date takes no RSVPs. Same rules as the
 // event's web page: open until the date ends, and the organiser may approve
 // each RSVP. useRsvp keeps one idempotency key per RSVP, so sending again
-// after a timeout can't register anyone twice.
+// 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
+// button win when the site has them.
 
 // The RSVP's private manage token, one per event date, lives only in secure
 // storage (never a URL or log). Keys allow letters, digits, ".", "-" and "_".
@@ -26,19 +28,21 @@ const tokens = {
 
 type Answers = Record<string, string | string[]>;
 const OTHER = '__other__';
-const problemText = (f: Pick<FormField, 'type'>, problem: 'required' | 'invalid') => problem === 'required' ? 'Please answer this.'
-  : f.type === 'email' ? 'Enter an email address.' : f.type === 'number' ? 'Enter a number.' : f.type === 'phone' ? 'Enter a phone number.'
-  : f.type === 'date' ? 'Use YYYY-MM-DD, for example 2026-10-05.' : 'Check this answer.';
 const keyboards: Partial<Record<FormField['type'], KeyboardTypeOptions>> = { email: 'email-address', phone: 'phone-pad', number: 'numeric', url: 'url' };
 // "Other" choices send the typed text instead
 const withOther = (f: FormField, value: string | string[] | undefined, other: string): string | string[] => {
   if (f.type === 'checkboxes') { const list = Array.isArray(value) ? value : []; return list.includes(OTHER) ? [...list.filter((v) => v !== OTHER), other.trim()] : list; }
   return value === OTHER ? other.trim() : (value ?? '');
 };
-const seatsText = (n: number) => (n === 1 ? '1 seat' : `${n} seats`);
+// 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));
 
-export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
+// 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
+export function RsvpPanel({ slug, start, children }: { slug: string; start: string; children?: ReactNode }) {
   const t = useTheme();
+  const words = useStrings();
+  const { locale } = useLocale();
   const { data: site } = useSite();
   const guest = useGuest();
   const status = useRsvpStatus(slug, start);
@@ -78,17 +82,19 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     setStored(null);
     setConfirming(false);
     rsvp.reset();
-    if (managed.data?.booking.status === 'cancelled') setNotice('Your RSVP is cancelled.');
+    if (managed.data?.booking.status === 'cancelled') setNotice(words.rsvpCancelled);
   }, [key, stored, gone]);
 
   if (!s) return status.isPending ? <ActivityIndicator color={t.colors.accent} /> : null;
   const input = { borderWidth: 1, borderColor: t.colors.line, borderRadius: Math.min(t.radius, 10), padding: 12, fontSize: 16, color: t.colors.ink, backgroundColor: t.colors.panel } as const;
   const chip = (on: boolean) => ({ paddingVertical: 10, paddingHorizontal: 12, borderRadius: Math.min(t.radius, 10), borderWidth: 1, borderColor: on ? t.colors.accent : t.colors.line, backgroundColor: on ? t.colors.soft : t.colors.panel });
   const errorText = [t.styles.text.small, { color: t.colors.ink, fontWeight: '600' as const }];
+  const num = (n: number) => n.toLocaleString(locale);
+  const seatsText = (n: number) => countWords(n, words.seat, words.seats, locale);
   const going = (
     <Text style={t.styles.text.body}>
-      <Text style={{ fontWeight: '700' }}>{s.going}</Text> going
-      {s.left !== null && <> · <Text style={{ fontWeight: '700' }}>{s.left}</Text> {s.left === 1 ? 'spot' : 'spots'} left</>}
+      {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))}</>}
     </Text>
   );
 
@@ -99,9 +105,9 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
   // offline or busy: say so rather than offer a second RSVP
   if (stored && changes && managed.error && !gone && !made) return (
     <View style={[t.styles.card, { gap: 8 }]}>
-      <Text accessibilityRole="header" style={t.styles.text.heading}>Your RSVP</Text>
-      <Text style={t.styles.text.muted}>Couldn’t load it right now.</Text>
-      <Button label="Try again" variant="outline" onPress={() => void managed.refetch()} />
+      <Text accessibilityRole="header" style={t.styles.text.heading}>{words.yourRsvp}</Text>
+      <Text style={t.styles.text.muted}>{words.loadError}</Text>
+      <Button label={words.tryAgain} variant="outline" onPress={() => void managed.refetch()} />
     </View>
   );
   if ((stored && mine) || made) {
@@ -109,37 +115,38 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     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);
-    return (
+    return (<>
       <View style={[t.styles.card, { gap: 8 }]}>
-        <Text accessibilityRole="header" style={t.styles.text.heading}>{!made ? 'Your RSVP' : state === 'confirmed' ? 'Confirmed' : 'Request sent'}</Text>
+        <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' ? 'Confirmed' : state === 'pending' ? 'Waiting for approval' : 'Not confirmed'}
+          {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 || `A confirmation is on its way to ${who}.`
-            : state === 'pending' ? `We’ll email ${who} once it’s approved.` : 'Sorry, the organiser couldn’t confirm it.'}
+          {state === 'confirmed' ? thanks || fill(words.confirmationOnItsWay, { email: who })
+            : state === 'pending' ? fill(words.emailWhenApproved, { email: who }) : words.rsvpDeclined}
         </Text>
-        {state === 'declined' && <Button label="RSVP again" variant="outline" onPress={() => { if (key) void tokens.remove(key); setStored(null); rsvp.reset(); }} />}
+        {state === 'declined' && <Button label={words.rsvpAgain} variant="outline" onPress={() => { if (key) void tokens.remove(key); setStored(null); rsvp.reset(); }} />}
         {canCancel && state !== 'declined' && (confirming ? (
           <View style={{ gap: 8 }}>
-            <Text style={t.styles.text.body}>Cancel your RSVP for {seatsText(mine!.booking.seats)}?</Text>
+            <Text style={t.styles.text.body}>{fill(words.cancelRsvpFor, { seats: seatsText(mine!.booking.seats) })}</Text>
             <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
-              <Button label={cancel.isPending ? 'Cancelling…' : 'Yes, cancel it'} disabled={cancel.isPending} onPress={() => cancel.mutate()} />
-              <Button label="Keep it" variant="outline" disabled={cancel.isPending} onPress={() => setConfirming(false)} />
+              <Button label={cancel.isPending ? words.cancelling : words.yesCancel} disabled={cancel.isPending} onPress={() => cancel.mutate()} />
+              <Button label={words.keepIt} variant="outline" disabled={cancel.isPending} onPress={() => setConfirming(false)} />
             </View>
           </View>
-        ) : <Button label="Cancel my RSVP" variant="outline" onPress={() => setConfirming(true)} />)}
-        {cancel.error && <Text style={errorText}>{isAcmsError(cancel.error) && cancel.error.status === 0 ? 'Check your connection and try again.' : cancel.error.message}</Text>}
-        {!canCancel && state !== 'declined' && <Text style={t.styles.text.small}>The confirmation email has a link to change or cancel it.</Text>}
+        ) : <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>}
       </View>
-    );
+      {state !== 'declined' && children}
+    </>);
   }
 
   if (s.reason === 'disabled') return null;
   if (!s.open) return (
     <View style={[t.styles.card, { gap: 6 }]}>
-      <Text accessibilityRole="header" style={t.styles.text.heading}>{s.reason === 'full' ? 'Full' : s.reason === 'cancelled' ? 'This date is cancelled' : 'RSVPs are closed'}</Text>
-      {s.reason === 'full' ? going : <Text style={t.styles.text.muted}>{s.reason === 'cancelled' ? 'Nobody needs to RSVP for it.' : 'This date has already happened.'}</Text>}
+      <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 : words.dateEnded}</Text>}
     </View>
   );
 
@@ -148,8 +155,8 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
   const fields = form?.fields ?? [];
   const answers: Answers = Object.fromEntries(fields.filter((f) => f.type !== 'heading').map((f) => [f.id, withOther(f, values[f.id], others[f.id] ?? '')]));
   const problems = answerProblems(fields, answers);
-  const nameProblem = !name.trim() ? 'Add your name.' : '';
-  const emailProblem = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()) ? 'Add a valid email address.' : '';
+  const nameProblem = !name.trim() ? words.nameProblem : '';
+  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;
@@ -163,7 +170,7 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
   };
   const set = (id: string, v: string | string[]) => setValues((a) => ({ ...a, [id]: v }));
   const label = (text: string, required: boolean) => (
-    <Text style={t.styles.text.label}>{text}{required ? <Text accessibilityLabel="required"> *</Text> : ''}</Text>
+    <Text style={t.styles.text.label}>{text}{required ? <Text accessibilityLabel={words.required}> *</Text> : ''}</Text>
   );
   const text = (lbl: string, value: string, onChange: (v: string) => void, o: { required?: boolean; keyboard?: KeyboardTypeOptions; multiline?: boolean; auto?: 'name' | 'email' | 'tel'; placeholder?: string; help?: string; problem?: string } = {}) => (
     <View key={lbl} style={{ gap: 6 }}>
@@ -177,7 +184,7 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     </View>
   );
   const field = (f: FormField) => {
-    const problem = tried && problems[f.id] ? problemText(f, problems[f.id]) : '';
+    const problem = tried && problems[f.id] ? answerProblemText(f, problems[f.id], words) : '';
     if (f.type === 'heading') return (
       <View key={f.id} style={{ gap: 2, paddingTop: 4 }}>
         <Text accessibilityRole="header" style={t.styles.text.heading}>{f.label}</Text>
@@ -211,12 +218,12 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
           <View accessibilityRole={many ? undefined : 'radiogroup'} style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
             {choices.map((o) => (
               <Pressable key={o} accessibilityRole={many ? 'checkbox' : 'radio'} accessibilityState={{ checked: isOn(o) }} onPress={() => toggle(o)} style={chip(isOn(o))}>
-                <Text style={[t.styles.text.body, isOn(o) && { fontWeight: '600' }]}>{o === OTHER ? 'Other' : o}</Text>
+                <Text style={[t.styles.text.body, isOn(o) && { fontWeight: '600' }]}>{o === OTHER ? words.other : o}</Text>
               </Pressable>
             ))}
           </View>
           {isOn(OTHER) && (
-            <TextInput value={others[f.id] ?? ''} onChangeText={(v) => setOthers((x) => ({ ...x, [f.id]: v }))} placeholder="Other" accessibilityLabel={`${f.label}: other`}
+            <TextInput value={others[f.id] ?? ''} onChangeText={(v) => setOthers((x) => ({ ...x, [f.id]: v }))} placeholder={words.other} accessibilityLabel={fill(words.otherAnswer, { label: f.label })}
               placeholderTextColor={t.colors.muted} style={input} />
           )}
           {!!problem && <Text style={errorText}>{problem}</Text>}
@@ -225,7 +232,7 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     }
     return text(f.label, String(values[f.id] ?? ''), (v) => set(f.id, v), {
       required: f.required, help: f.help, problem, multiline: f.type === 'textarea', keyboard: keyboards[f.type],
-      placeholder: f.placeholder || (f.type === 'date' ? 'YYYY-MM-DD' : undefined), auto: f.type === 'email' ? 'email' : f.type === 'phone' ? 'tel' : undefined,
+      placeholder: f.placeholder || (f.type === 'date' ? words.datePlaceholder : undefined), auto: f.type === 'email' ? 'email' : f.type === 'phone' ? 'tel' : undefined,
     });
   };
 
@@ -233,21 +240,21 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
   return (
     <View style={[t.styles.card, { gap: 16 }]}>
       <View style={{ gap: 4 }}>
-        <Text accessibilityRole="header" style={t.styles.text.heading}>{form?.title || 'Save your seat'}</Text>
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{form?.title || words.rsvpTitle}</Text>
         {going}
         {!!notice && <Text style={t.styles.text.muted}>{notice}</Text>}
         {!!form?.intro && <Text style={t.styles.text.muted}>{form.intro}</Text>}
       </View>
-      {text('Your name', name, setName, { required: true, auto: 'name', problem: tried ? nameProblem : '' })}
-      {text('Email', email, setEmail, { required: true, keyboard: 'email-address', auto: 'email', problem: tried ? emailProblem : '' })}
-      {askPhone && text('Phone (optional)', phone, setPhone, { keyboard: 'phone-pad', auto: 'tel' })}
+      {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 && (
         <View style={{ gap: 6 }}>
-          {label('Seats', false)}
+          {label(words.seatsField, false)}
           <View accessibilityRole="radiogroup" style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
             {seatChoices(s).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' }]}>{n}</Text>
+                <Text style={[t.styles.text.body, n === chosen && { fontWeight: '600' }]}>{num(n)}</Text>
               </Pressable>
             ))}
           </View>
@@ -256,15 +263,15 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
       {fields.map(field)}
       {error && (
         <View style={{ backgroundColor: t.colors.soft, borderRadius: Math.min(t.radius, 10), padding: 12, gap: 4 }}>
-          <Text style={[t.styles.text.body, { fontWeight: '600' }]}>That didn’t go through.</Text>
+          <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{words.notSent}</Text>
           <Text style={t.styles.text.muted}>
-            {isAcmsError(error) && error.status === 0 ? 'Check your connection and try again. You won’t be registered twice.' : error.message}
+            {isAcmsError(error) && error.status === 0 ? words.offlineRetry : error.message}
           </Text>
         </View>
       )}
-      {tried && (nameProblem || emailProblem || Object.keys(problems).length > 0) && <Text style={errorText}>Check the answers marked above.</Text>}
-      <Button label={rsvp.isPending ? 'Sending…' : form?.submitLabel || (s.autoConfirm ? 'Confirm my seat' : 'Request a seat')} disabled={rsvp.isPending} onPress={submit} />
-      <Text style={t.styles.text.small}>Your details go only to the organiser of this event.</Text>
+      {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} />
+      <Text style={t.styles.text.small}>{words.rsvpPrivacy}</Text>
     </View>
   );
 }

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

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, 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, answerProblems, seatChoices, useCancelBooking, useGuest, useManagedBooking, useRsvp, useRsvpStatus, useSite, useTheme } from '@acms-subir/native';
+import { Button, answerProblemText, answerProblems, countWords, fill, seatChoices, useCancelBooking, useGuest, useLocale, useManagedBooking, useRsvp, useRsvpStatus, useSite, useStrings, useTheme } 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,
@@ -11,7 +11,9 @@ import { Button, answerProblems, seatChoices, useCancelBooking, useGuest, useMan
 // with a way to cancel it; or why the date takes no RSVPs. Same rules as the
 // event's web page: open until the date ends, and the organiser may approve
 // each RSVP. useRsvp keeps one idempotency key per RSVP, so sending again
-// after a timeout can't register anyone twice.
+// 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
+// button win when the site has them.
 
 // The RSVP's private manage token, one per event date, lives only in secure
 // storage (never a URL or log). Keys allow letters, digits, ".", "-" and "_".
@@ -26,19 +28,21 @@ const tokens = {
 
 type Answers = Record<string, string | string[]>;
 const OTHER = '__other__';
-const problemText = (f: Pick<FormField, 'type'>, problem: 'required' | 'invalid') => problem === 'required' ? 'Please answer this.'
-  : f.type === 'email' ? 'Enter an email address.' : f.type === 'number' ? 'Enter a number.' : f.type === 'phone' ? 'Enter a phone number.'
-  : f.type === 'date' ? 'Use YYYY-MM-DD, for example 2026-10-05.' : 'Check this answer.';
 const keyboards: Partial<Record<FormField['type'], KeyboardTypeOptions>> = { email: 'email-address', phone: 'phone-pad', number: 'numeric', url: 'url' };
 // "Other" choices send the typed text instead
 const withOther = (f: FormField, value: string | string[] | undefined, other: string): string | string[] => {
   if (f.type === 'checkboxes') { const list = Array.isArray(value) ? value : []; return list.includes(OTHER) ? [...list.filter((v) => v !== OTHER), other.trim()] : list; }
   return value === OTHER ? other.trim() : (value ?? '');
 };
-const seatsText = (n: number) => (n === 1 ? '1 seat' : `${n} seats`);
+// 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));
 
-export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
+// 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
+export function RsvpPanel({ slug, start, children }: { slug: string; start: string; children?: ReactNode }) {
   const t = useTheme();
+  const words = useStrings();
+  const { locale } = useLocale();
   const { data: site } = useSite();
   const guest = useGuest();
   const status = useRsvpStatus(slug, start);
@@ -78,17 +82,19 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     setStored(null);
     setConfirming(false);
     rsvp.reset();
-    if (managed.data?.booking.status === 'cancelled') setNotice('Your RSVP is cancelled.');
+    if (managed.data?.booking.status === 'cancelled') setNotice(words.rsvpCancelled);
   }, [key, stored, gone]);
 
   if (!s) return status.isPending ? <ActivityIndicator color={t.colors.accent} /> : null;
   const input = { borderWidth: 1, borderColor: t.colors.line, borderRadius: Math.min(t.radius, 10), padding: 12, fontSize: 16, color: t.colors.ink, backgroundColor: t.colors.panel } as const;
   const chip = (on: boolean) => ({ paddingVertical: 10, paddingHorizontal: 12, borderRadius: Math.min(t.radius, 10), borderWidth: 1, borderColor: on ? t.colors.accent : t.colors.line, backgroundColor: on ? t.colors.soft : t.colors.panel });
   const errorText = [t.styles.text.small, { color: t.colors.ink, fontWeight: '600' as const }];
+  const num = (n: number) => n.toLocaleString(locale);
+  const seatsText = (n: number) => countWords(n, words.seat, words.seats, locale);
   const going = (
     <Text style={t.styles.text.body}>
-      <Text style={{ fontWeight: '700' }}>{s.going}</Text> going
-      {s.left !== null && <> · <Text style={{ fontWeight: '700' }}>{s.left}</Text> {s.left === 1 ? 'spot' : 'spots'} left</>}
+      {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))}</>}
     </Text>
   );
 
@@ -99,9 +105,9 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
   // offline or busy: say so rather than offer a second RSVP
   if (stored && changes && managed.error && !gone && !made) return (
     <View style={[t.styles.card, { gap: 8 }]}>
-      <Text accessibilityRole="header" style={t.styles.text.heading}>Your RSVP</Text>
-      <Text style={t.styles.text.muted}>Couldn’t load it right now.</Text>
-      <Button label="Try again" variant="outline" onPress={() => void managed.refetch()} />
+      <Text accessibilityRole="header" style={t.styles.text.heading}>{words.yourRsvp}</Text>
+      <Text style={t.styles.text.muted}>{words.loadError}</Text>
+      <Button label={words.tryAgain} variant="outline" onPress={() => void managed.refetch()} />
     </View>
   );
   if ((stored && mine) || made) {
@@ -109,37 +115,38 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     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);
-    return (
+    return (<>
       <View style={[t.styles.card, { gap: 8 }]}>
-        <Text accessibilityRole="header" style={t.styles.text.heading}>{!made ? 'Your RSVP' : state === 'confirmed' ? 'Confirmed' : 'Request sent'}</Text>
+        <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' ? 'Confirmed' : state === 'pending' ? 'Waiting for approval' : 'Not confirmed'}
+          {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 || `A confirmation is on its way to ${who}.`
-            : state === 'pending' ? `We’ll email ${who} once it’s approved.` : 'Sorry, the organiser couldn’t confirm it.'}
+          {state === 'confirmed' ? thanks || fill(words.confirmationOnItsWay, { email: who })
+            : state === 'pending' ? fill(words.emailWhenApproved, { email: who }) : words.rsvpDeclined}
         </Text>
-        {state === 'declined' && <Button label="RSVP again" variant="outline" onPress={() => { if (key) void tokens.remove(key); setStored(null); rsvp.reset(); }} />}
+        {state === 'declined' && <Button label={words.rsvpAgain} variant="outline" onPress={() => { if (key) void tokens.remove(key); setStored(null); rsvp.reset(); }} />}
         {canCancel && state !== 'declined' && (confirming ? (
           <View style={{ gap: 8 }}>
-            <Text style={t.styles.text.body}>Cancel your RSVP for {seatsText(mine!.booking.seats)}?</Text>
+            <Text style={t.styles.text.body}>{fill(words.cancelRsvpFor, { seats: seatsText(mine!.booking.seats) })}</Text>
             <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
-              <Button label={cancel.isPending ? 'Cancelling…' : 'Yes, cancel it'} disabled={cancel.isPending} onPress={() => cancel.mutate()} />
-              <Button label="Keep it" variant="outline" disabled={cancel.isPending} onPress={() => setConfirming(false)} />
+              <Button label={cancel.isPending ? words.cancelling : words.yesCancel} disabled={cancel.isPending} onPress={() => cancel.mutate()} />
+              <Button label={words.keepIt} variant="outline" disabled={cancel.isPending} onPress={() => setConfirming(false)} />
             </View>
           </View>
-        ) : <Button label="Cancel my RSVP" variant="outline" onPress={() => setConfirming(true)} />)}
-        {cancel.error && <Text style={errorText}>{isAcmsError(cancel.error) && cancel.error.status === 0 ? 'Check your connection and try again.' : cancel.error.message}</Text>}
-        {!canCancel && state !== 'declined' && <Text style={t.styles.text.small}>The confirmation email has a link to change or cancel it.</Text>}
+        ) : <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>}
       </View>
-    );
+      {state !== 'declined' && children}
+    </>);
   }
 
   if (s.reason === 'disabled') return null;
   if (!s.open) return (
     <View style={[t.styles.card, { gap: 6 }]}>
-      <Text accessibilityRole="header" style={t.styles.text.heading}>{s.reason === 'full' ? 'Full' : s.reason === 'cancelled' ? 'This date is cancelled' : 'RSVPs are closed'}</Text>
-      {s.reason === 'full' ? going : <Text style={t.styles.text.muted}>{s.reason === 'cancelled' ? 'Nobody needs to RSVP for it.' : 'This date has already happened.'}</Text>}
+      <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 : words.dateEnded}</Text>}
     </View>
   );
 
@@ -148,8 +155,8 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
   const fields = form?.fields ?? [];
   const answers: Answers = Object.fromEntries(fields.filter((f) => f.type !== 'heading').map((f) => [f.id, withOther(f, values[f.id], others[f.id] ?? '')]));
   const problems = answerProblems(fields, answers);
-  const nameProblem = !name.trim() ? 'Add your name.' : '';
-  const emailProblem = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()) ? 'Add a valid email address.' : '';
+  const nameProblem = !name.trim() ? words.nameProblem : '';
+  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;
@@ -163,7 +170,7 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
   };
   const set = (id: string, v: string | string[]) => setValues((a) => ({ ...a, [id]: v }));
   const label = (text: string, required: boolean) => (
-    <Text style={t.styles.text.label}>{text}{required ? <Text accessibilityLabel="required"> *</Text> : ''}</Text>
+    <Text style={t.styles.text.label}>{text}{required ? <Text accessibilityLabel={words.required}> *</Text> : ''}</Text>
   );
   const text = (lbl: string, value: string, onChange: (v: string) => void, o: { required?: boolean; keyboard?: KeyboardTypeOptions; multiline?: boolean; auto?: 'name' | 'email' | 'tel'; placeholder?: string; help?: string; problem?: string } = {}) => (
     <View key={lbl} style={{ gap: 6 }}>
@@ -177,7 +184,7 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     </View>
   );
   const field = (f: FormField) => {
-    const problem = tried && problems[f.id] ? problemText(f, problems[f.id]) : '';
+    const problem = tried && problems[f.id] ? answerProblemText(f, problems[f.id], words) : '';
     if (f.type === 'heading') return (
       <View key={f.id} style={{ gap: 2, paddingTop: 4 }}>
         <Text accessibilityRole="header" style={t.styles.text.heading}>{f.label}</Text>
@@ -211,12 +218,12 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
           <View accessibilityRole={many ? undefined : 'radiogroup'} style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
             {choices.map((o) => (
               <Pressable key={o} accessibilityRole={many ? 'checkbox' : 'radio'} accessibilityState={{ checked: isOn(o) }} onPress={() => toggle(o)} style={chip(isOn(o))}>
-                <Text style={[t.styles.text.body, isOn(o) && { fontWeight: '600' }]}>{o === OTHER ? 'Other' : o}</Text>
+                <Text style={[t.styles.text.body, isOn(o) && { fontWeight: '600' }]}>{o === OTHER ? words.other : o}</Text>
               </Pressable>
             ))}
           </View>
           {isOn(OTHER) && (
-            <TextInput value={others[f.id] ?? ''} onChangeText={(v) => setOthers((x) => ({ ...x, [f.id]: v }))} placeholder="Other" accessibilityLabel={`${f.label}: other`}
+            <TextInput value={others[f.id] ?? ''} onChangeText={(v) => setOthers((x) => ({ ...x, [f.id]: v }))} placeholder={words.other} accessibilityLabel={fill(words.otherAnswer, { label: f.label })}
               placeholderTextColor={t.colors.muted} style={input} />
           )}
           {!!problem && <Text style={errorText}>{problem}</Text>}
@@ -225,7 +232,7 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     }
     return text(f.label, String(values[f.id] ?? ''), (v) => set(f.id, v), {
       required: f.required, help: f.help, problem, multiline: f.type === 'textarea', keyboard: keyboards[f.type],
-      placeholder: f.placeholder || (f.type === 'date' ? 'YYYY-MM-DD' : undefined), auto: f.type === 'email' ? 'email' : f.type === 'phone' ? 'tel' : undefined,
+      placeholder: f.placeholder || (f.type === 'date' ? words.datePlaceholder : undefined), auto: f.type === 'email' ? 'email' : f.type === 'phone' ? 'tel' : undefined,
     });
   };
 
@@ -233,21 +240,21 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
   return (
     <View style={[t.styles.card, { gap: 16 }]}>
       <View style={{ gap: 4 }}>
-        <Text accessibilityRole="header" style={t.styles.text.heading}>{form?.title || 'Save your seat'}</Text>
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{form?.title || words.rsvpTitle}</Text>
         {going}
         {!!notice && <Text style={t.styles.text.muted}>{notice}</Text>}
         {!!form?.intro && <Text style={t.styles.text.muted}>{form.intro}</Text>}
       </View>
-      {text('Your name', name, setName, { required: true, auto: 'name', problem: tried ? nameProblem : '' })}
-      {text('Email', email, setEmail, { required: true, keyboard: 'email-address', auto: 'email', problem: tried ? emailProblem : '' })}
-      {askPhone && text('Phone (optional)', phone, setPhone, { keyboard: 'phone-pad', auto: 'tel' })}
+      {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 && (
         <View style={{ gap: 6 }}>
-          {label('Seats', false)}
+          {label(words.seatsField, false)}
           <View accessibilityRole="radiogroup" style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
             {seatChoices(s).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' }]}>{n}</Text>
+                <Text style={[t.styles.text.body, n === chosen && { fontWeight: '600' }]}>{num(n)}</Text>
               </Pressable>
             ))}
           </View>
@@ -256,15 +263,15 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
       {fields.map(field)}
       {error && (
         <View style={{ backgroundColor: t.colors.soft, borderRadius: Math.min(t.radius, 10), padding: 12, gap: 4 }}>
-          <Text style={[t.styles.text.body, { fontWeight: '600' }]}>That didn’t go through.</Text>
+          <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{words.notSent}</Text>
           <Text style={t.styles.text.muted}>
-            {isAcmsError(error) && error.status === 0 ? 'Check your connection and try again. You won’t be registered twice.' : error.message}
+            {isAcmsError(error) && error.status === 0 ? words.offlineRetry : error.message}
           </Text>
         </View>
       )}
-      {tried && (nameProblem || emailProblem || Object.keys(problems).length > 0) && <Text style={errorText}>Check the answers marked above.</Text>}
-      <Button label={rsvp.isPending ? 'Sending…' : form?.submitLabel || (s.autoConfirm ? 'Confirm my seat' : 'Request a seat')} disabled={rsvp.isPending} onPress={submit} />
-      <Text style={t.styles.text.small}>Your details go only to the organiser of this event.</Text>
+      {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} />
+      <Text style={t.styles.text.small}>{words.rsvpPrivacy}</Text>
     </View>
   );
 }

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

@@ -10,6 +10,7 @@
   "next": [
     "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"
+    "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)"
   ]
 }

package/package.json

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