@acms-subir/core 0.3.36 → 0.3.37

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @acms-subir/core
 
+## 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/mobile-template/recipes/events/files/components/RsvpPanel.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } 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,19 @@ 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 }) {
   const t = useTheme();
+  const words = useStrings();
+  const { locale } = useLocale();
   const { data: site } = useSite();
   const guest = useGuest();
   const status = useRsvpStatus(slug, start);
@@ -78,17 +80,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 +103,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) {
@@ -111,26 +115,26 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     const canCancel = !!stored && changes && (mine ? mine.can.cancel : false);
     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>
     );
   }
@@ -138,8 +142,8 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
   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 +152,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 +167,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 +181,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 +215,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 +229,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 +237,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 +260,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 } 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,19 @@ 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 }) {
   const t = useTheme();
+  const words = useStrings();
+  const { locale } = useLocale();
   const { data: site } = useSite();
   const guest = useGuest();
   const status = useRsvpStatus(slug, start);
@@ -78,17 +80,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 +103,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) {
@@ -111,26 +115,26 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     const canCancel = !!stored && changes && (mine ? mine.can.cancel : false);
     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>
     );
   }
@@ -138,8 +142,8 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
   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 +152,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 +167,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 +181,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 +215,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 +229,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 +237,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 +260,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/package.json

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

package/src/components/EventPage.astro

@@ -8,7 +8,9 @@ import { CALENDAR, eventIcsUrl, eventUrl, calendarPageUrl } from '../lib/calenda
 import { addToCalendarLinks, eventTimeZone, formatOccurrence, safeColor, type Occurrence } from '../lib/calendar/events';
 import { describeRepeat } from '../lib/calendar/rrule';
 import { eventCardHtml, safeHref } from '../lib/calendar/cards';
-import { siteLocale } from '../lib/dates';
+import { siteLang, siteLocale } from '../lib/dates';
+import { I18N, requestLocale } from '../lib/i18n';
+import { aroundCount, rsvpStrings } from '../lib/calendar/rsvp-words';
 import { eventImage } from '../lib/calendar/images';
 import { directionsUrl, mapAttribution, MAP_HEIGHT, MAP_WIDTH } from '../lib/maps/service';
 
@@ -61,6 +63,10 @@ const I = {
   video: 'M3 7h12v10H3zM15 10l6-3v10l-6-3',
 };
 const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.test(e.location.url);
+// the RSVP block speaks the page's language, as the layout does
+const w = rsvpStrings((I18N.enabled ? requestLocale(Astro.url, Astro.locals) : '') || siteLang(settings));
+const going = rsvp ? aroundCount(rsvp.going, w.personGoing, w.peopleGoing) : ['', ''];
+const left = rsvp && rsvp.left !== null ? aroundCount(rsvp.left, w.spotLeft, w.spotsLeft) : ['', ''];
 ---
 
 <article class={`pc-ev-page${cancelled ? ' is-cancelled' : ''}`}>
@@ -130,27 +136,27 @@ const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.t
       ))}
       {rsvp ? (
         <div class="pc-ev-rsvp">
-          <p class="pc-ev-going"><b>{rsvp.going}</b> going{rsvp.left !== null && <> · <b>{rsvp.left}</b> {rsvp.left === 1 ? 'spot' : 'spots'} left</>}</p>
+          <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>
           {rsvp.open && (rsvp.left === null || rsvp.left > 0) ? (
             <details class="pc-ev-rsvpform" open={Boolean(rsvp.error)}>
-              <summary class="pc-ev-cta">Save my seat</summary>
+              <summary class="pc-ev-cta">{w.saveSeat}</summary>
               <form method="post">
                 <Fragment set:html={rsvp.formHtml ?? ''}/>
                 {e.rsvp.form?.title && <h3>{e.rsvp.form.title}</h3>}
                 {e.rsvp.form?.intro && <p>{e.rsvp.form.intro}</p>}
                 {rsvp.error && <p class="pc-bk-error">{rsvp.error}</p>}
-                <label class="pc-bk-field"><span>Your name</span><input name="name" required maxlength="120" autocomplete="name" value={rsvp.values?.name} /></label>
-                <label class="pc-bk-field"><span>Email</span><input name="email" type="email" required maxlength="200" autocomplete="email" value={rsvp.values?.email} /></label>
+                <label class="pc-bk-field"><span>{w.nameField}</span><input name="name" required maxlength="120" autocomplete="name" value={rsvp.values?.name} /></label>
+                <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>Seats</span>
+                  <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>
                   </label>
                 )}
                 <Fragment set:html={rsvp.fieldsHtml ?? ''}/>
-                <button class="pc-bk-submit" type="submit">{e.rsvp.form?.submitLabel || (e.rsvp.autoConfirm ? 'Confirm my seat' : 'Request a seat')}</button>
+                <button class="pc-bk-submit" type="submit">{e.rsvp.form?.submitLabel || (e.rsvp.autoConfirm ? w.confirmSeat : w.requestSeat)}</button>
               </form>
             </details>
-          ) : <p class="pc-ev-full">{rsvp.open ? 'This event is full.' : 'RSVPs are closed.'}</p>}
+          ) : <p class="pc-ev-full">{rsvp.open ? w.full : w.closed}</p>}
         </div>
       ) : e.cta.label && ctaHref && !cancelled && (
         <a class={`pc-ev-cta${e.cta.style === 'outline' ? ' is-outline' : ''}`} href={ctaHref}>{e.cta.label}</a>

package/src/lib/calendar/rsvp-words.ts

@@ -0,0 +1,121 @@
+// Words of the built-in RSVP: the event page's RSVP block, the RSVP's own
+// page (book/manage) and the app's default button (GET /events/:slug/rsvp).
+// The same wording as the app's RSVP panel (packages/native strings.ts).
+// Plain strings with {count}, {email} and {title} slots (live/words.ts
+// `fill`); of a pair (`spotLeft`/`spotsLeft`), the first is for 1 and the
+// second for any other number. The event's own form title, questions and
+// button keep their words. Other languages fall back to English.
+export interface RsvpStrings {
+  /** "12 going · 3 spots left" (the page puts the numbers in bold) */
+  personGoing: string;
+  peopleGoing: string;
+  spotLeft: string;
+  spotsLeft: string;
+  /** the event page's form */
+  saveSeat: string;
+  nameField: string;
+  emailField: string;
+  seatsField: string;
+  /** the button when the form has no label of its own: confirmed right away, or the organiser approves */
+  confirmSeat: string;
+  requestSeat: string;
+  full: string;
+  closed: string;
+  saveError: string;
+  /** the RSVP's own page */
+  booked: string;
+  yours: string;
+  requestSent: string;
+  awaitingApproval: string;
+  notAvailable: string;
+  cancelledTitle: string;
+  emailWhenApproved: string;
+  confirmationOnItsWay: string;
+  declined: string;
+  cancelledText: string;
+  what: string;
+  when: string;
+  where: string;
+  status: string;
+  reference: string;
+  statuses: Record<'pending' | 'confirmed' | 'cancelled' | 'declined', string>;
+  addToCalendar: string;
+  downloadIcs: string;
+  cancel: string;
+  cancelConfirm: string;
+  cancelError: string;
+  backTo: string;
+  keepLink: string;
+}
+
+const STRINGS: Record<string, RsvpStrings> = {
+  en: {
+    personGoing: '{count} going', peopleGoing: '{count} going', spotLeft: '{count} spot left', spotsLeft: '{count} spots left',
+    saveSeat: 'Save my seat', nameField: 'Your name', emailField: 'Email', seatsField: 'Seats', confirmSeat: 'Confirm my seat', requestSeat: 'Request a seat',
+    full: 'This event is full.', closed: 'RSVPs are closed.', saveError: 'Couldn’t save your RSVP. Please try again.',
+    booked: 'You’re booked', yours: 'Your booking', requestSent: 'Request sent', awaitingApproval: 'Waiting for approval', notAvailable: 'Not available', cancelledTitle: 'Booking cancelled',
+    emailWhenApproved: 'We’ll email {email} once it’s approved.', confirmationOnItsWay: 'A confirmation is on its way to {email}.',
+    declined: 'Sorry, the organiser couldn’t confirm it.', cancelledText: 'This booking is cancelled.',
+    what: 'What', when: 'When', where: 'Where', status: 'Status', reference: 'Reference',
+    statuses: { pending: 'Pending', confirmed: 'Confirmed', cancelled: 'Cancelled', declined: 'Declined' },
+    addToCalendar: 'Add to calendar', downloadIcs: 'Download .ics', cancel: 'Cancel RSVP', cancelConfirm: 'Cancel this RSVP?', cancelError: 'Couldn’t cancel — please try again.',
+    backTo: 'Back to {title}', keepLink: 'Keep this link — anyone with it can change this booking.',
+  },
+  es: {
+    personGoing: '{count} va', peopleGoing: '{count} van', spotLeft: '{count} lugar disponible', spotsLeft: '{count} lugares disponibles',
+    saveSeat: 'Apartar mi lugar', nameField: 'Tu nombre', emailField: 'Correo electrónico', seatsField: 'Lugares', confirmSeat: 'Confirmar mi lugar', requestSeat: 'Solicitar un lugar',
+    full: 'Este evento está lleno.', closed: 'Las confirmaciones están cerradas.', saveError: 'No se pudo guardar tu confirmación. Inténtalo de nuevo.',
+    booked: 'Ya tienes tu lugar', yours: 'Tu confirmación', requestSent: 'Solicitud enviada', awaitingApproval: 'En espera de aprobación', notAvailable: 'No se pudo confirmar', cancelledTitle: 'Confirmación cancelada',
+    emailWhenApproved: 'Te escribiremos a {email} cuando se apruebe.', confirmationOnItsWay: 'Te enviamos la confirmación a {email}.',
+    declined: 'Lo sentimos, el organizador no pudo confirmarla.', cancelledText: 'Esta confirmación se canceló.',
+    what: 'Qué', when: 'Cuándo', where: 'Dónde', status: 'Estado', reference: 'Referencia',
+    statuses: { pending: 'Pendiente', confirmed: 'Confirmado', cancelled: 'Cancelado', declined: 'Rechazado' },
+    addToCalendar: 'Agregar al calendario', downloadIcs: 'Descargar .ics', cancel: 'Cancelar mi confirmación', cancelConfirm: '¿Cancelar tu confirmación?', cancelError: 'No se pudo cancelar. Inténtalo de nuevo.',
+    backTo: 'Volver a {title}', keepLink: 'Guarda este enlace: quien lo tenga puede cambiar esta confirmación.',
+  },
+  fr: {
+    personGoing: '{count} participant', peopleGoing: '{count} participants', spotLeft: '{count} place restante', spotsLeft: '{count} places restantes',
+    saveSeat: 'Réserver ma place', nameField: 'Votre nom', emailField: 'E-mail', seatsField: 'Places', confirmSeat: 'Confirmer ma place', requestSeat: 'Demander une place',
+    full: 'Cet événement est complet.', closed: 'Les inscriptions sont closes.', saveError: 'Impossible d’enregistrer votre inscription. Veuillez réessayer.',
+    booked: 'Votre place est réservée', yours: 'Votre inscription', requestSent: 'Demande envoyée', awaitingApproval: 'En attente de validation', notAvailable: 'Non confirmée', cancelledTitle: 'Inscription annulée',
+    emailWhenApproved: 'Nous écrirons à {email} dès qu’elle sera validée.', confirmationOnItsWay: 'Une confirmation est en route vers {email}.',
+    declined: 'Désolés, l’organisateur n’a pas pu la confirmer.', cancelledText: 'Cette inscription est annulée.',
+    what: 'Quoi', when: 'Quand', where: 'Où', status: 'Statut', reference: 'Référence',
+    statuses: { pending: 'En attente', confirmed: 'Confirmée', cancelled: 'Annulée', declined: 'Refusée' },
+    addToCalendar: 'Ajouter au calendrier', downloadIcs: 'Télécharger le .ics', cancel: 'Annuler mon inscription', cancelConfirm: 'Annuler cette inscription ?', cancelError: 'Impossible d’annuler. Veuillez réessayer.',
+    backTo: 'Retour à {title}', keepLink: 'Conservez ce lien : toute personne qui l’a peut modifier cette inscription.',
+  },
+  de: {
+    personGoing: '{count} Zusage', peopleGoing: '{count} Zusagen', spotLeft: '{count} Platz frei', spotsLeft: '{count} Plätze frei',
+    saveSeat: 'Platz reservieren', nameField: 'Ihr Name', emailField: 'E-Mail', seatsField: 'Plätze', confirmSeat: 'Platz bestätigen', requestSeat: 'Platz anfragen',
+    full: 'Diese Veranstaltung ist ausgebucht.', closed: 'Anmeldungen sind geschlossen.', saveError: 'Ihre Anmeldung konnte nicht gespeichert werden. Bitte versuchen Sie es erneut.',
+    booked: 'Ihr Platz ist reserviert', yours: 'Ihre Anmeldung', requestSent: 'Anfrage gesendet', awaitingApproval: 'Wartet auf Freigabe', notAvailable: 'Nicht bestätigt', cancelledTitle: 'Anmeldung storniert',
+    emailWhenApproved: 'Wir schreiben an {email}, sobald sie freigegeben ist.', confirmationOnItsWay: 'Eine Bestätigung ist unterwegs an {email}.',
+    declined: 'Leider konnte der Veranstalter sie nicht bestätigen.', cancelledText: 'Diese Anmeldung ist storniert.',
+    what: 'Was', when: 'Wann', where: 'Wo', status: 'Status', reference: 'Referenz',
+    statuses: { pending: 'Ausstehend', confirmed: 'Bestätigt', cancelled: 'Storniert', declined: 'Abgelehnt' },
+    addToCalendar: 'Zum Kalender hinzufügen', downloadIcs: '.ics herunterladen', cancel: 'Anmeldung stornieren', cancelConfirm: 'Diese Anmeldung stornieren?', cancelError: 'Stornieren fehlgeschlagen. Bitte versuchen Sie es erneut.',
+    backTo: 'Zurück zu {title}', keepLink: 'Bewahren Sie diesen Link auf – wer ihn hat, kann diese Anmeldung ändern.',
+  },
+  pt: {
+    personGoing: '{count} confirmado', peopleGoing: '{count} confirmados', spotLeft: '{count} vaga disponível', spotsLeft: '{count} vagas disponíveis',
+    saveSeat: 'Reservar minha vaga', nameField: 'Seu nome', emailField: 'E-mail', seatsField: 'Vagas', confirmSeat: 'Confirmar minha vaga', requestSeat: 'Solicitar uma vaga',
+    full: 'Este evento está lotado.', closed: 'As inscrições estão encerradas.', saveError: 'Não foi possível salvar sua inscrição. Tente novamente.',
+    booked: 'Sua vaga está reservada', yours: 'Sua inscrição', requestSent: 'Solicitação enviada', awaitingApproval: 'Aguardando aprovação', notAvailable: 'Não confirmada', cancelledTitle: 'Inscrição cancelada',
+    emailWhenApproved: 'Vamos escrever para {email} assim que for aprovada.', confirmationOnItsWay: 'Uma confirmação está a caminho de {email}.',
+    declined: 'Desculpe, o organizador não pôde confirmá-la.', cancelledText: 'Esta inscrição foi cancelada.',
+    what: 'O quê', when: 'Quando', where: 'Onde', status: 'Status', reference: 'Referência',
+    statuses: { pending: 'Pendente', confirmed: 'Confirmada', cancelled: 'Cancelada', declined: 'Recusada' },
+    addToCalendar: 'Adicionar ao calendário', downloadIcs: 'Baixar .ics', cancel: 'Cancelar inscrição', cancelConfirm: 'Cancelar esta inscrição?', cancelError: 'Não foi possível cancelar. Tente novamente.',
+    backTo: 'Voltar para {title}', keepLink: 'Guarde este link: qualquer pessoa com ele pode alterar esta inscrição.',
+  },
+};
+
+export const rsvpStrings = (locale: string | null | undefined): RsvpStrings =>
+  STRINGS[(locale || 'en').toLowerCase().split('-')[0]] ?? STRINGS.en;
+
+/** The words for `count` split where it goes, so a page can bold the number: aroundCount(3, w.spotLeft, w.spotsLeft) → ["", " spots left"]. */
+export function aroundCount(count: number, one: string, other: string): [string, string] {
+  const [before, after = ''] = (count === 1 ? one : other).split('{count}');
+  return [before, after];
+}

package/src/lib/mobile/rsvp.ts

@@ -6,6 +6,8 @@ import { answerFields } from '../forms/schema';
 import { eventIsPublic, expandEvents, type Occurrence } from '../calendar/events';
 import { seatsTaken } from '../booking/service';
 import { localizeDoc } from '../translations';
+import { siteLang } from '../dates';
+import { rsvpStrings } from '../calendar/rsvp-words';
 import { queryParams } from './http';
 import { requireCalendar } from './calendar';
 import { formJson } from './forms';
@@ -54,12 +56,18 @@ export async function getRsvpStatus(repo: ContentRepository, url: URL, slug: str
   const reason = closed ?? (left === 0 ? 'full' as const : null);
   const form = rsvpQuestions(o.event);
   const title = localizeDoc(o.event, locale ?? undefined).title;
+  // the built-in button speaks the app's language (the site's own without languages set up)
+  let submitLabel = form?.submitLabel ?? '';
+  if (form && !submitLabel) {
+    const words = rsvpStrings(locale ?? siteLang(await repo.getSettings()));
+    submitLabel = rsvp.autoConfirm ? words.confirmSeat : words.requestSeat;
+  }
   return {
     event: { id: o.event.id, slug: o.event.slug, title },
     start: new Date(o.start).toISOString(), end: new Date(o.end).toISOString(),
     open: !reason, reason, going, left, capacity: rsvp.capacity,
     // seats one RSVP may take right now
     maxSeats: Math.min(rsvp.maxSeats || 1, left ?? Infinity), autoConfirm: rsvp.autoConfirm,
-    form: form ? { ...await formJson(form), submitLabel: form.submitLabel || (rsvp.autoConfirm ? 'Confirm my seat' : 'Request a seat') } : null,
+    form: form ? { ...await formJson(form), submitLabel } : null,
   };
 }

package/src/pages/book/manage/[token].astro

@@ -8,21 +8,32 @@ import { resourceZone } from '../../../lib/booking/availability';
 import { eventTimeZone, locationLine } from '../../../lib/calendar/events';
 import { siteOrigin } from '../../../lib/seo';
 import { waitUntilFrom } from '../../../lib/webhooks';
+import { I18N, localePath, requestLocale } from '../../../lib/i18n';
+import { siteLang } from '../../../lib/dates';
+import { isExtraLocale, localizeDoc } from '../../../lib/translations';
+import { rsvpStrings } from '../../../lib/calendar/rsvp-words';
+import { fill } from '../../../lib/live/words';
 
 // The booker's own page, reached from the confirmation and every email: see
 // the status, add it to a calendar, move it or cancel it. The token in the
-// URL is the only credential — it's long and random, and never listed.
+// URL is the only credential — it's long and random, and never listed. An
+// RSVP's page speaks the page's language (/es/book/manage/… in Spanish);
+// room bookings stay in English like the rest of their pages.
 if (!CALENDAR.enabled) return new Response(null, { status: 404 });
 const repo = await getRepo(Astro.locals);
 const booking = await repo.getBookingByToken(Astro.params.token ?? '');
 if (!booking || (!bookingsEnabled() && booking.kind !== 'rsvp')) return new Response(null, { status: 404, statusText: 'Not found' });
 const settings = await repo.getSettings();
 const origin = siteOrigin(settings, Astro.url);
-const [resource, link, event] = await Promise.all([
+const [resource, link, rawEvent] = await Promise.all([
   booking.resourceId ? repo.getResource(booking.resourceId) : Promise.resolve(null),
   booking.linkId ? repo.getBookingLink(booking.linkId) : Promise.resolve(null),
   booking.eventId ? repo.getEvent(booking.eventId) : Promise.resolve(null),
 ]);
+const isRsvp = booking.kind === 'rsvp';
+const locale = I18N.enabled ? requestLocale(Astro.url, Astro.locals) : '';
+const w = rsvpStrings(isRsvp ? locale || siteLang(settings) : 'en');
+const event = rawEvent && localizeDoc(rawEvent, locale || undefined);
 const title = event ? event.title : [resource?.name, link?.name].filter(Boolean).join(' · ') || 'Booking';
 const location = event ? locationLine(event.location) : resource?.name ?? '';
 const url = origin + Astro.url.pathname;
@@ -40,25 +51,25 @@ if (Astro.request.method === 'POST') {
     try {
       current = await guestCancel(repo, booking, { origin, locals: Astro.locals, waitUntil: waitUntilFrom(Astro.locals) });
     } catch (err) {
-      error = err instanceof BookingError ? err.message : 'Couldn’t cancel — please try again.';
+      error = err instanceof BookingError ? err.message : w.cancelError;
     }
   }
 }
 const tz = event ? eventTimeZone(event, settings) : resource ? resourceZone(resource, settings.timezone) : settings.timezone || 'UTC';
-const when = whenText(current, tz, settings, link?.mode === 'day' || event?.allDay);
+const when = whenText(current, tz, isRsvp && isExtraLocale(locale) ? { ...settings, locale } : settings, link?.mode === 'day' || event?.allDay);
 const active = current.status === 'pending' || current.status === 'confirmed';
 const upcoming = current.end > Date.now();
 const can = guestChanges(current, link);
 const isNew = Astro.url.searchParams.has('new');
 const moved = Astro.url.searchParams.has('moved');
-const heading = current.status === 'cancelled' ? 'Booking cancelled'
-  : current.status === 'declined' ? 'Not available'
-  : current.status === 'pending' ? (isNew ? 'Request sent' : 'Waiting for approval')
-  : moved ? 'Booking moved' : isNew ? 'You’re booked' : 'Your booking';
-const lede = current.status === 'pending' ? `We’ll email ${current.email} once it’s approved.`
-  : current.status === 'confirmed' ? (current.formResponse?.definition.confirmation || link?.confirmMessage || `A confirmation is on its way to ${current.email}.`)
-  : current.status === 'declined' ? 'Sorry — this time couldn’t be confirmed. You’re welcome to pick another.'
-  : 'This booking is cancelled.';
+const heading = current.status === 'cancelled' ? w.cancelledTitle
+  : current.status === 'declined' ? w.notAvailable
+  : current.status === 'pending' ? (isNew ? w.requestSent : w.awaitingApproval)
+  : moved ? 'Booking moved' : isNew ? w.booked : w.yours;
+const lede = current.status === 'pending' ? fill(w.emailWhenApproved, { email: current.email })
+  : current.status === 'confirmed' ? (current.formResponse?.definition.confirmation || link?.confirmMessage || fill(w.confirmationOnItsWay, { email: current.email }))
+  : current.status === 'declined' ? (isRsvp ? w.declined : 'Sorry — this time couldn’t be confirmed. You’re welcome to pick another.')
+  : w.cancelledText;
 const googleUrl = `https://calendar.google.com/calendar/render?${new URLSearchParams({ action: 'TEMPLATE', text: title, dates: `${new Date(current.start).toISOString().replace(/[-:]|\.\d{3}/g, '')}/${new Date(current.end).toISOString().replace(/[-:]|\.\d{3}/g, '')}`, details: url, location })}`;
 ---
 
@@ -73,22 +84,22 @@ const googleUrl = `https://calendar.google.com/calendar/render?${new URLSearchPa
     <p class="pc-manage-lede">{lede}</p>
     {error && <p class="pc-bk-error">{error}</p>}
     <dl class="pc-manage-card">
-      <div><dt>What</dt><dd>{title}</dd></div>
-      <div><dt>When</dt><dd>{when}</dd></div>
-      {location && <div><dt>Where</dt><dd>{location}</dd></div>}
-      {current.seats > 1 && <div><dt>Seats</dt><dd>{current.seats}</dd></div>}
-      <div><dt>Status</dt><dd class={`pc-manage-status is-${current.status}`}>{current.status[0].toUpperCase() + current.status.slice(1)}</dd></div>
-      <div><dt>Reference</dt><dd class="mono">{current.id.slice(0, 8).toUpperCase()}</dd></div>
+      <div><dt>{w.what}</dt><dd>{title}</dd></div>
+      <div><dt>{w.when}</dt><dd>{when}</dd></div>
+      {location && <div><dt>{w.where}</dt><dd>{location}</dd></div>}
+      {current.seats > 1 && <div><dt>{w.seatsField}</dt><dd>{current.seats}</dd></div>}
+      <div><dt>{w.status}</dt><dd class={`pc-manage-status is-${current.status}`}>{w.statuses[current.status]}</dd></div>
+      <div><dt>{w.reference}</dt><dd class="mono">{current.id.slice(0, 8).toUpperCase()}</dd></div>
     </dl>
     {active && upcoming && (
       <div class="pc-manage-actions">
         {current.status === 'confirmed' && (
           <details class="pc-ev-add">
-            <summary>Add to calendar</summary>
+            <summary>{w.addToCalendar}</summary>
             <div class="pc-ev-add-menu">
               <a href={googleUrl} target="_blank" rel="noopener">Google Calendar</a>
               <a href="?ics=1">Apple Calendar</a>
-              <a href="?ics=1" download="booking.ics">Download .ics</a>
+              <a href="?ics=1" download="booking.ics">{w.downloadIcs}</a>
             </div>
           </details>
         )}
@@ -96,17 +107,17 @@ const googleUrl = `https://calendar.google.com/calendar/render?${new URLSearchPa
           <a class="pc-manage-btn" href={`${bookingLinkUrl(resource.slug, link.slug)}?reschedule=${encodeURIComponent(current.manageToken)}`}>Reschedule</a>
         )}
         {can.cancel && (
-          <form method="post" onsubmit="return confirm('Cancel this booking?')">
+          <form method="post" onsubmit={`return confirm(${JSON.stringify(isRsvp ? w.cancelConfirm : 'Cancel this booking?')})`}>
             <input type="hidden" name="op" value="cancel" />
-            <button class="pc-manage-btn is-danger" type="submit">Cancel {current.kind === 'rsvp' ? 'RSVP' : 'booking'}</button>
+            <button class="pc-manage-btn is-danger" type="submit">{isRsvp ? w.cancel : 'Cancel booking'}</button>
           </form>
         )}
       </div>
     )}
     {can.closed && <p class="pc-manage-note">Changes close {can.cutoffHours} hours before the start. Please contact us to change or cancel.</p>}
     <p class="pc-bk-foot">
-      {event ? <a href={eventUrl(event.slug)}>Back to {event.title}</a> : resource ? <a href={resourceUrl(resource.slug)}>Back to {resource.name}</a> : null}
+      {event ? <a href={localePath(eventUrl(event.slug), locale)}>{fill(w.backTo, { title: event.title })}</a> : resource ? <a href={resourceUrl(resource.slug)}>{fill(w.backTo, { title: resource.name })}</a> : null}
     </p>
-    <p class="pc-manage-note">Keep this link — anyone with it can change this booking.</p>
+    <p class="pc-manage-note">{w.keepLink}</p>
   </div>
 </Site>

package/src/pages/events/[slug].astro

@@ -5,7 +5,9 @@ import { formVersion } from '../../lib/forms/service';
 import { renderFields, hiddenFields } from '../../lib/forms/render';
 import { readForm, readAnswers, submissionGuard } from '../../lib/forms/http';
 import { submitEventForm, prepareLegacyEventForm } from '../../lib/forms/events';
-import { requestLocale } from '../../lib/i18n';
+import { I18N, localePath, requestLocale } from '../../lib/i18n';
+import { siteLang } from '../../lib/dates';
+import { rsvpStrings } from '../../lib/calendar/rsvp-words';
 import { localizeDoc, isExtraLocale } from '../../lib/translations';
 import Site from '../../layouts/Site.astro';
 import EventPage from '../../components/EventPage.astro';
@@ -45,7 +47,8 @@ const on = Astro.url.searchParams.get('on') ?? undefined;
 const occurrence = featuredOccurrence(event, settings, now, on && /^\d{4}-\d{2}-\d{2}$/.test(on) ? on : undefined);
 if (!occurrence) return new Response(null, { status: 404, statusText: 'Not found' });
 const origin = siteOrigin(settings, Astro.url);
-// RSVP: "Save my seat" posts back here and lands on the manage page
+// RSVP: "Save my seat" posts back here and lands on the manage page, in the
+// visitor's language
 let rsvpError = '';
 let formValues: Record<string,string> = {};
 let coreValues = { name: '', email: '', seats: '1' };
@@ -61,9 +64,9 @@ if (Astro.request.method === 'POST' && event.rsvp.enabled) {
     formValues = readAnswers(form, definition);
     coreValues = { name: String(form.get('name') || '').slice(0,120), email: String(form.get('email') || '').slice(0,200), seats: String(form.get('seats') || '1') };
     const booking = await submitEventForm(repo, event, occurrence, form, requestId, { origin, locals: Astro.locals, waitUntil: waitUntilFrom(Astro.locals) });
-    return Astro.redirect(`${manageUrl(booking.manageToken)}?new=1`, 303);
+    return Astro.redirect(`${localePath(manageUrl(booking.manageToken), locale)}?new=1`, 303);
   } catch (err) {
-    rsvpError = err instanceof BookingError || err instanceof ApiError ? err.message : 'Couldn’t save your RSVP. Please try again.';
+    rsvpError = err instanceof BookingError || err instanceof ApiError ? err.message : rsvpStrings((I18N.enabled ? locale : '') || siteLang(settings)).saveError;
   }
 }
 const formHtml = hiddenFields(await formVersion(definition), requestId) + `<input type="hidden" name="occurrence" value="${occurrence.start}">`;