@acms-subir/core 0.3.35 → 0.3.37

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

@@ -0,0 +1,274 @@
+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, 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,
+// seats, contact details and the event's questions, then the person's RSVP
+// with a way to cancel it; or why the date takes no RSVPs. Same rules as the
+// event's web page: open until the 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. 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 "_".
+// Web has no secure storage: there the confirmation email's link is the way back.
+const tokenKey = (eventId: string, start: string) => `rsvp.${eventId}.${start}`.replace(/[^A-Za-z0-9._-]/g, '_');
+const keychain = { keychainAccessible: SecureStore.WHEN_UNLOCKED_THIS_DEVICE_ONLY };
+const tokens = {
+  get: async (key: string) => (Platform.OS === 'web' ? null : SecureStore.getItemAsync(key, keychain).catch(() => null)),
+  set: async (key: string, token: string) => { if (Platform.OS !== 'web') await SecureStore.setItemAsync(key, token, keychain).catch(() => {}); },
+  remove: async (key: string) => { if (Platform.OS !== 'web') await SecureStore.deleteItemAsync(key, keychain).catch(() => {}); },
+};
+
+type Answers = Record<string, string | string[]>;
+const OTHER = '__other__';
+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 ?? '');
+};
+// 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);
+  const rsvp = useRsvp(slug, start, { createKey: Crypto.randomUUID });
+  const s = status.data;
+  const key = s ? tokenKey(s.event.id, s.start) : null;
+  // undefined until secure storage has answered
+  const [stored, setStored] = useState<string | null | undefined>(undefined);
+  const changes = site?.features.bookingChanges === true;
+  const managed = useManagedBooking(changes ? stored : null);
+  const cancel = useCancelBooking(stored);
+  const [confirming, setConfirming] = useState(false);
+  const [notice, setNotice] = useState('');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [seats, setSeats] = useState(1);
+  const [values, setValues] = useState<Answers>({});
+  const [others, setOthers] = useState<Record<string, string>>({});
+  const [tried, setTried] = useState(false);
+
+  useEffect(() => {
+    if (!key) return;
+    let live = true;
+    void tokens.get(key).then((token) => { if (live) setStored(token); });
+    return () => { live = false; };
+  }, [key]);
+  // signed in for "My bookings": that's their email (guest sign-in knows no name)
+  useEffect(() => {
+    if (site?.features.guestSignIn && guest.email) setEmail((e) => e || guest.email!);
+  }, [site?.features.guestSignIn, guest.email]);
+  // cancelled (here, from the email link or by the organiser) or gone: forget the token
+  const gone = managed.data?.booking.status === 'cancelled' || (isAcmsError(managed.error) && managed.error.status === 404);
+  useEffect(() => {
+    if (!key || !stored || !gone) return;
+    void tokens.remove(key);
+    setStored(null);
+    setConfirming(false);
+    rsvp.reset();
+    if (managed.data?.booking.status === 'cancelled') setNotice(words.rsvpCancelled);
+  }, [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}>
+      {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>
+  );
+
+  // ---- their RSVP: just sent, or kept from before ----
+  const mine = managed.data && managed.data.booking.status !== 'cancelled' ? managed.data : null;
+  const made = rsvp.data?.booking;
+  if (stored === undefined || (stored && changes && managed.isPending && !made)) return <ActivityIndicator color={t.colors.accent} />;
+  // 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}>{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) {
+    const state = mine?.booking.status ?? made!.status;
+    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 (
+      <View style={[t.styles.card, { gap: 8 }]}>
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{!made ? words.yourRsvp : state === 'confirmed' ? words.confirmed : words.requestSent}</Text>
+        <Text style={[t.styles.text.label, { color: t.colors.ink }]}>
+          {seatsText(mine?.booking.seats ?? made!.seats)} · {state === 'confirmed' ? words.confirmed : state === 'pending' ? words.awaitingApproval : words.notConfirmed}
+        </Text>
+        <Text style={t.styles.text.body}>
+          {state === 'confirmed' ? thanks || fill(words.confirmationOnItsWay, { email: who })
+            : state === 'pending' ? fill(words.emailWhenApproved, { email: who }) : words.rsvpDeclined}
+        </Text>
+        {state === 'declined' && <Button label={words.rsvpAgain} variant="outline" onPress={() => { if (key) void tokens.remove(key); setStored(null); rsvp.reset(); }} />}
+        {canCancel && state !== 'declined' && (confirming ? (
+          <View style={{ gap: 8 }}>
+            <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 ? 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={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>
+    );
+  }
+
+  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' ? 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>
+  );
+
+  // ---- the form ----
+  const form = s.form;
+  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() ? 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;
+  const submit = () => {
+    setTried(true);
+    setNotice('');
+    if (nameProblem || emailProblem || Object.keys(problems).length) return;
+    rsvp.mutate({ name, email, phone: askPhone ? phone : '', seats: chosen, answers }, {
+      onSuccess: (data) => { if (key) void tokens.set(key, data.manageToken); setStored(data.manageToken); },
+    });
+  };
+  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={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 }}>
+      {label(lbl, !!o.required)}
+      {!!o.help && <Text style={t.styles.text.small}>{o.help}</Text>}
+      <TextInput value={value} onChangeText={onChange} keyboardType={o.keyboard} multiline={o.multiline} autoComplete={o.auto} placeholder={o.placeholder}
+        autoCapitalize={o.auto === 'email' || o.keyboard === 'email-address' || o.keyboard === 'url' ? 'none' : 'sentences'} placeholderTextColor={t.colors.muted}
+        accessibilityLabel={lbl} accessibilityHint={o.problem}
+        style={[input, o.multiline && { minHeight: 96, textAlignVertical: 'top' }, !!o.problem && { borderColor: t.colors.ink }]} />
+      {!!o.problem && <Text style={errorText}>{o.problem}</Text>}
+    </View>
+  );
+  const field = (f: FormField) => {
+    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>
+        {!!f.help && <Text style={t.styles.text.muted}>{f.help}</Text>}
+      </View>
+    );
+    if (f.type === 'checkbox' || f.type === 'consent') return (
+      <View key={f.id} style={{ gap: 6 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+          <Text style={[t.styles.text.body, { flex: 1 }]}>{f.label}{f.required ? ' *' : ''}</Text>
+          <Switch accessibilityLabel={f.label} value={values[f.id] === 'yes'} onValueChange={(v) => set(f.id, v ? 'yes' : '')} trackColor={{ true: t.colors.accent }} />
+        </View>
+        {!!f.help && <Text style={t.styles.text.small}>{f.help}</Text>}
+        {!!problem && <Text style={errorText}>{problem}</Text>}
+      </View>
+    );
+    if (f.type === 'select' || f.type === 'radio' || f.type === 'checkboxes') {
+      const many = f.type === 'checkboxes';
+      const current = values[f.id];
+      const isOn = (o: string) => (many ? Array.isArray(current) && current.includes(o) : current === o);
+      const toggle = (o: string) => {
+        if (!many) return set(f.id, current === o && !f.required ? '' : o);
+        const list = Array.isArray(current) ? current : [];
+        set(f.id, list.includes(o) ? list.filter((x) => x !== o) : [...list, o]);
+      };
+      const choices = f.allowOther && f.type !== 'select' ? [...f.options, OTHER] : f.options;
+      return (
+        <View key={f.id} style={{ gap: 6 }}>
+          {label(f.label, f.required)}
+          {!!f.help && <Text style={t.styles.text.small}>{f.help}</Text>}
+          <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 ? words.other : o}</Text>
+              </Pressable>
+            ))}
+          </View>
+          {isOn(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>}
+        </View>
+      );
+    }
+    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' ? words.datePlaceholder : undefined), auto: f.type === 'email' ? 'email' : f.type === 'phone' ? 'tel' : undefined,
+    });
+  };
+
+  const error = rsvp.error;
+  return (
+    <View style={[t.styles.card, { gap: 16 }]}>
+      <View style={{ gap: 4 }}>
+        <Text accessibilityRole="header" style={t.styles.text.heading}>{form?.title || words.rsvpTitle}</Text>
+        {going}
+        {!!notice && <Text style={t.styles.text.muted}>{notice}</Text>}
+        {!!form?.intro && <Text style={t.styles.text.muted}>{form.intro}</Text>}
+      </View>
+      {text(words.nameField, name, setName, { required: true, auto: 'name', problem: tried ? nameProblem : '' })}
+      {text(words.emailField, email, setEmail, { required: true, keyboard: 'email-address', auto: 'email', problem: tried ? emailProblem : '' })}
+      {askPhone && text(words.phoneField, phone, setPhone, { keyboard: 'phone-pad', auto: 'tel' })}
+      {s.maxSeats > 1 && (
+        <View style={{ gap: 6 }}>
+          {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' }]}>{num(n)}</Text>
+              </Pressable>
+            ))}
+          </View>
+        </View>
+      )}
+      {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' }]}>{words.notSent}</Text>
+          <Text style={t.styles.text.muted}>
+            {isAcmsError(error) && error.status === 0 ? words.offlineRetry : error.message}
+          </Text>
+        </View>
+      )}
+      {tried && (nameProblem || emailProblem || Object.keys(problems).length > 0) && <Text style={errorText}>{words.checkAnswers}</Text>}
+      <Button label={rsvp.isPending ? words.sending : form?.submitLabel || (s.autoConfirm ? words.confirmSeat : words.requestSeat)} disabled={rsvp.isPending} onPress={submit} />
+      <Text style={t.styles.text.small}>{words.rsvpPrivacy}</Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,15 @@
+{
+  "kind": "client",
+  "title": "RSVP",
+  "description": "An RSVP panel for an event date: going and spots left, seats, the event's questions with inline errors, then the person's RSVP with Cancel, or why the date is full or closed. Already part of the events recipe; add it to an event screen of your own.",
+  "packages": [
+    "expo-crypto",
+    "expo-secure-store"
+  ],
+  "routes": [],
+  "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"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.35",
+  "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/layouts/Site.astro

@@ -179,6 +179,7 @@ const chrome: SiteChrome = {
   schemeToggle,
   liveHeader: Boolean(liveSignals?.header),
   headerStyle: String(tokens.header), footerStyle: String(tokens.footer),
+  lang: htmlLang, words,
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const HeaderTpl = design.theme.HeaderTemplate as any;

package/src/lib/cache/policy.ts

@@ -31,8 +31,8 @@ function privatePrefixes() {
     ...(CALENDAR.enabled ? [CALENDAR.bookBase] : []),
   ];
 }
-// Public app API routes that are personal, transactional or write-only.
-const PRIVATE_API = /^\/api\/v1\/(?:admin|auth|guest|bookings|availability|devices|push|forms)(?:\/|$)/;
+// Public app API routes that are personal, transactional, live or write-only.
+const PRIVATE_API = /^\/api\/v1\/(?:admin|auth|guest|bookings|availability|devices|push|forms|events\/[^/]+\/rsvp)(?:\/|$)/;
 
 const under = (path: string, prefix: string) => path === prefix || path.startsWith(`${prefix}/`) || path.startsWith(`${prefix}.`);
 

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/legal/app-privacy.ts

@@ -10,15 +10,17 @@ export interface AppPrivacyAnswers { rows: StoreRow[]; tracking: string; notes:
 
 export function appPrivacyAnswers(f: LegalFacts, privacyUrl: string): AppPrivacyAnswers {
   const rows: StoreRow[] = [];
-  const contact = [...(f.bookings ? ['bookings'] : []), ...(f.appForms ? ['forms'] : [])];
+  // apps can RSVP wherever the calendar is on; room bookings need bookings too
+  const contact = [...(f.bookings ? ['bookings'] : []), ...(f.calendar ? ['RSVPs'] : []), ...(f.appForms ? ['forms'] : [])];
+  const sends = contact.length > 1 ? `${contact.slice(0, -1).join(', ')} or ${contact.at(-1)}` : contact[0];
   if (contact.length) {
     rows.push({
-      data: 'Name, email address, phone number', when: `When someone sends ${contact.join(' or ')} from the app`,
+      data: 'Name, email address, phone number', when: `When someone sends ${sends} from the app`,
       apple: 'Contact Info → Name, Email Address, Phone Number. Purpose: App Functionality. Linked to the user. Not used for tracking.',
       google: 'Personal info → Name, Email address, Phone number. Collected, not shared. Purpose: App functionality. Optional (people choose to send it).',
     });
     rows.push({
-      data: 'Answers typed into a form or booking question', when: `When someone sends ${contact.join(' or ')} from the app`,
+      data: 'Answers typed into a form or booking question', when: `When someone sends ${sends} from the app`,
       apple: 'User Content → Other User Content. Purpose: App Functionality. Linked to the user. Not used for tracking.',
       google: 'App activity → Other user-generated content. Collected, not shared. Purpose: App functionality. Optional.',
     });

package/src/lib/legal/text-en.ts

@@ -82,6 +82,7 @@ export function privacyEn(f: LegalFacts, country: string): PolicySection[] {
     ...(app ? [f.announcements
       ? 'Our app may keep the content it last loaded on your phone so it works offline, and remembers there your notification choice and which announcements you’ve read or closed. That stays on your phone and is never sent to us.'
       : 'Our app may keep the content it last loaded on your phone so it works offline, and remembers your notification choice there.'] : []),
+    ...(app && f.calendar ? ['When you RSVP or book in the app, it keeps the private key that lets you see or cancel it in your phone’s secure storage, like the private link we email you.'] : []),
   ] });
   s.push({ id: 'sharing', title: 'Who receives your information', text: [
     `We don’t sell your personal information${pixels ? '' : ' or share it for advertising'}. These service providers process it on our behalf and only for the purposes above: ${list(processors(f))}. They must protect it at least as this notice describes. Some of them may store it outside your country, including in the United States.`,

package/src/lib/legal/text-es.ts

@@ -83,6 +83,7 @@ export function privacyEs(f: LegalFacts, country: string): PolicySection[] {
     ...(app ? [f.announcements
       ? 'Nuestra app puede guardar en su teléfono el contenido que cargó por última vez para funcionar sin conexión, y recuerda ahí su preferencia de notificaciones y qué anuncios leyó o cerró. Eso se queda en su teléfono y nunca se nos envía.'
       : 'Nuestra app puede guardar en su teléfono el contenido que cargó por última vez para funcionar sin conexión, y recuerda ahí su preferencia de notificaciones.'] : []),
+    ...(app && f.calendar ? ['Cuando confirma su asistencia o reserva en la app, esta guarda en el almacenamiento seguro de su teléfono la clave privada que le permite verla o cancelarla, igual que el enlace privado que le enviamos por correo.'] : []),
   ] });
   s.push({ id: 'sharing', title: 'Quién recibe sus datos', text: [
     `No vendemos sus datos personales${pixels ? '' : ' ni los compartimos con fines publicitarios'}. Estos proveedores los tratan por cuenta nuestra y solo para los fines descritos: ${list(processors(f))}. Deben protegerlos al menos como lo describe este aviso. Algunos pueden guardarlos fuera de su país, incluido Estados Unidos.`,

package/src/lib/mobile/bookings.ts

@@ -4,33 +4,38 @@ import type { Booking } from '../schema';
 import { ApiError, readJson } from '../api';
 import { sha256Hex } from '../api-keys';
 import { siteOrigin } from '../seo';
-import { eventIsPublic, expandEvents } from '../calendar/events';
 import { createResourceBooking, createRsvp, bookingJson } from '../booking/service';
 import { waitUntilFrom } from '../webhooks';
 import { requireCalendar } from './calendar';
+import { appAnswers, joinAnswers } from './forms';
+import { rsvpClosed, rsvpOccurrence, rsvpQuestions } from './rsvp';
 
 const common = {
   start: z.string().datetime({ offset: true }),
   name: z.string().trim().min(1).max(120), email: z.string().trim().email().max(200).transform(v => v.toLowerCase()),
   phone: z.string().trim().max(40).default(''),
+  answers: appAnswers.default({}),
 };
 export const bookingInput = z.union([
   z.object({ ...common, resource: z.string().min(1).max(200), link: z.string().min(1).max(200),
-    minutes: z.number().int().min(1).max(44640).optional(), answers: z.record(z.string().max(2000)).default({}),
+    minutes: z.number().int().min(1).max(44640).optional(),
   }).strict(),
-  z.object({ ...common, event: z.string().min(1).max(200), seats: z.number().int().min(1).max(1000).default(1), answers: z.record(z.string().max(2000)).default({}), formVersion: z.string().optional() }).strict(),
+  // formVersion: from GET /events/{slug}/rsvp; required when the event asks questions
+  z.object({ ...common, event: z.string().min(1).max(200), seats: z.number().int().min(1).max(1000).default(1), formVersion: z.string().max(100).optional() }).strict(),
 ]);
 function canonical(value: unknown): string {
   if (value && typeof value === 'object' && !Array.isArray(value)) return `{${Object.entries(value).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([k,v]) => `${JSON.stringify(k)}:${canonical(v)}`).join(',')}}`;
   return JSON.stringify(value);
 }
 const bookingData = (booking: Booking) => ({ booking: bookingJson(booking), manageToken: booking.manageToken });
+// RSVPs need only the calendar (like the event's web page); room bookings need bookings too
 export async function submitBooking(repo: ContentRepository, request: Request, locals?: unknown) {
-  requireCalendar(true);
+  requireCalendar();
   const key = request.headers.get('idempotency-key') ?? '';
   // Treat the key as a secret receipt. Require a fresh UUID per user intent.
   if (!/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(key)) throw new ApiError(400, 'Send a random UUID v4 in Idempotency-Key and reuse it only for retries.');
   const body = bookingInput.parse(await readJson(request, 50000));
+  if (!('event' in body)) requireCalendar(true);
   const idempotency = { keyHash: await sha256Hex(key.toLowerCase()), requestHash: await sha256Hex(canonical(body)) };
   const replay = async () => {
     const record = await repo.getBookingRequest(idempotency.keyHash);
@@ -46,21 +51,22 @@ export async function submitBooking(repo: ContentRepository, request: Request, l
     const settings = await repo.getSettings();
     const flow = { origin: siteOrigin(settings, new URL(request.url)), locals, waitUntil: waitUntilFrom(locals), idempotency };
     const start = Date.parse(body.start);
+    const booker = { ...body, answers: joinAnswers(body.answers) };
     let booking: Booking;
     if ('event' in body) {
-      const event = await repo.getEventBySlug(body.event) ?? await repo.getEvent(body.event);
-      const calendars = new Map((await repo.listCalendars()).map(c => [c.id, c]));
-      if (!event || !eventIsPublic(event, calendars)) throw new ApiError(404, 'Event not found.');
+      const occurrence = await rsvpOccurrence(repo, body.event, body.start);
+      const { event } = occurrence;
       if (body.seats > (event.rsvp.maxSeats || 1)) throw new ApiError(400, 'Too many seats for one RSVP.');
-      const occurrence = expandEvents([event], settings, { displayTz: settings.timezone || 'UTC', now: Date.now(), windowStartMs: start, windowEndMs: start + 1 }).find(o => o.start === start);
-      if (!occurrence) throw new ApiError(400, 'Start must match an event occurrence exactly.');
-      booking = await createRsvp(repo, { event, start, end: occurrence.end, seats: body.seats, booker: body, source: 'web' }, flow);
+      // the app must have seen the current questions: a changed form then answers 409, as on the website
+      // (closed dates fall through to createRsvp's own answer)
+      if (!body.formVersion && rsvpQuestions(event) && !rsvpClosed(occurrence)) throw new ApiError(400, 'This event asks questions. Send formVersion from GET /api/v1/events/{slug}/rsvp with the answers.');
+      booking = await createRsvp(repo, { event, start, end: occurrence.end, seats: body.seats, booker, source: 'app' }, flow);
     } else {
       const resource = await repo.getResourceBySlug(body.resource);
       const link = resource ? await repo.getBookingLinkBySlug(resource.id, body.link) : null;
       if (!resource || !link) throw new ApiError(404, 'Resource or booking link not found.');
       const minutes = body.minutes ?? (link.mode === 'day' ? 1440 : link.mode === 'range' ? link.lengths[0] ?? link.duration : link.duration);
-      booking = await createResourceBooking(repo, { resource, link, start, end: start + minutes * 60000, booker: body, source: 'web' }, flow);
+      booking = await createResourceBooking(repo, { resource, link, start, end: start + minutes * 60000, booker, source: 'app' }, flow);
     }
     return { data: bookingData(booking), replayed: false };
   } catch (error) {