@acms-subir/core 0.3.61 → 0.3.63

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @acms-subir/core
 
+## 0.3.63
+
+### Patch Changes
+
+- aa39a23: Booking links can have a name and description in each of the site's other languages, and rooms set to show on the calendar put their confirmed bookings on the public schedule, named by their booking link.
+
+  - **Names per language:** Admin → Calendar → Rooms → a booking link shows **Name in Español** and **Description in Español** (one pair per extra language). The editor API takes `translations: { es: { name, description } }`. Each falls back to the main one on its own. Migration 72 adds `booking_links.translations` (`'{}'` for existing links), and a change refreshes cached pages and API answers. Backups and environment sync carry it. Site code reads `linkWords(link, locale)` from the schema.
+  - **Where they show:** the link's name and description, and the room's name, follow the language on `/book` pages under `/es/book/…` (every step now stays under `/es`, so a booking made there keeps the visitor's language), booking embeds with `?lang=`, `GET /api/v1/resources?locale=` (links point at that language's pages), booking emails and the booker's own page, app view and My bookings (in the language it was booked in), and booking section items on Spanish pages. The admin and staff emails keep the main words.
+  - **Bookings in the schedule:** public "Reserved" blocks on `/calendar`, embeds and TV boards now show the booking link's name in the page's language ("Rehearsal", "Ensayo"; "Reserved" when the link was deleted), never who booked. They show on views that name no calendar (unfiltered, or by `room=`); `cal=` and `tag=` views leave them out, as before. TV quick links now show them too, the same way. Saved screens with private details keep "<link name> · <booker>".
+  - **App API:** `GET /api/v1/events?bookings=1` adds `bookings` (on page 1): `{ id, title, start, end, allDay, rooms }` for each confirmed booking of rooms shown on the calendar. `id` is an opaque key, never the booking's id. `calendar`, `tag` and `excludeTag` don't drop them; `room` narrows them. A whole-day link's bookings are `allDay`.
+  - **"The first booking from that email"** (approval "Confirm unless…"): only a confirmed booking now makes an address "returning". Before, a person's second booking confirmed at once while their first was still waiting; now every booking from that address waits until one is confirmed. Declined and cancelled bookings don't count either. It goes by the email address alone, as people book without an account.
+  - `GET /api/v1/resources` declares `capacity` as `number | null` (it was always `null` for rooms without one).
+  - **Booking recipe** (`npx acms mobile recipe add booking`): English and Spanish words (from the native package), "Waiting for approval" when a booking comes back pending, length chips with readable lengths, the time zone in words, whole-day links (they showed no times before), the approval note and button, and a new `app/book/manage.tsx` to change the time or cancel from the confirmation (needs App access → Change bookings from the app). Recipes are copied once, so apps that already added it can copy the new files by hand.
+
+## 0.3.62
+
+### Patch Changes
+
+- 729834a: Unlisted calendars work with app notifications and search.
+
+  - **A rule that names an event covers it in an Unlisted calendar.** Under Admin → Mobile app, the new event, starting soon and event change rules sent notices only for events in Public calendars. A "Class changes" rule (every calendar, tag `Class`) never fired for classes in an Unlisted rooms calendar. A rule now covers an Unlisted calendar's events when it names them, either by listing that calendar or, for an event change rule, by listing a tag the event has. "All public calendars" with no tags still covers only Public calendars, so Unlisted items don't start notifying on their own. Each rule is judged on its own, so a class goes only to the topics of the rule that names it. Private calendars never notify, and neither do appointments from Google booking pages (`#google-booking`). An event's `notify.changes` in the app API follows the same rules.
+  - **The Mobile app page lists Unlisted calendars.** They appear next to the Public ones, marked "unlisted", and saving keeps them in a rule (it used to drop them). In an event change rule that lists tags, "All public calendars" reads "All calendars" and covers the Unlisted ones too.
+  - **One search rule for the app and the website.** App search (`/api/v1/search`) now finds events in Unlisted calendars, as the website's `/search` and `/api/search` already did. None of them return Google booking-page appointments ("Booked") any more. `/api/v1/events?q=`, which continues an app search's "more", finds the same events; without `q`, `/api/v1/events` still lists Public calendars only.
+
+  There's no migration, and nothing to change after updating. To get class change notices from an Unlisted calendar, give the rule the `Class` tag (or tick that calendar) in Admin → Mobile app.
+
 ## 0.3.61
 
 ### Patch Changes

package/cli/migrations.generated.mjs

@@ -1370,6 +1370,13 @@ var MIGRATIONS = [
     `ALTER TABLE resources ADD COLUMN translations TEXT NOT NULL DEFAULT '{}'`,
     `DROP TRIGGER content_version_resources_update`,
     contentVersionTriggers("resources", [...CONTENT_VERSION_COLUMNS.resources, "color", "show_on_events", "translations"])[2]
+  ] },
+  // a booking link's name and description in other languages
+  // (BookingLink.translations): public, so a change refreshes cached pages and API answers
+  { version: 72, statements: [
+    `ALTER TABLE booking_links ADD COLUMN translations TEXT NOT NULL DEFAULT '{}'`,
+    `DROP TRIGGER content_version_booking_links_update`,
+    contentVersionTriggers("booking_links", [...CONTENT_VERSION_COLUMNS.booking_links, "translations"])[2]
   ] }
 ];
 var CURRENT_CONTENT_VERSION_COLUMNS = {
@@ -1377,6 +1384,7 @@ var CURRENT_CONTENT_VERSION_COLUMNS = {
   settings: [...CONTENT_VERSION_COLUMNS.settings, "links_verified", "links_avatar_shape", "links_avatar_fit", "links_avatar_scale", "legal"],
   events: [...CONTENT_VERSION_COLUMNS.events, "cancelled_dates", "moved_dates", "segments"],
   resources: [...CONTENT_VERSION_COLUMNS.resources, "color", "show_on_events", "translations"],
+  booking_links: [...CONTENT_VERSION_COLUMNS.booking_links, "translations"],
   announcements: ANNOUNCEMENT_VISIBLE_COLUMNS
 };
 var LATEST_VERSION = MIGRATIONS[MIGRATIONS.length - 1].version;

package/docs/calendar.md

@@ -298,6 +298,62 @@ Where a room's name follows the language:
 
 The admin and staff emails use the main name.
 
+A room's **booking links** have per-language words too: **Name in Español** and
+**Description in Español** in the link's editor (`translations: { es: { name,
+description } }` in the editor API; site code reads `linkWords(link, locale)` from the
+schema). Each falls back to the main one on its own. The link's name and description,
+and the room's name, follow the language:
+- on `/book` pages under `/es/book/…` (the rest of the booking flow stays in English,
+  and every step stays under `/es`, so the booking keeps the visitor's language);
+- in booking embeds with `?lang=es`;
+- in `GET /api/v1/resources?locale=es` (with links to the `/es` pages);
+- in booking emails and the booker's own page and app view, in the language it was
+  booked in;
+- in booking section items on Spanish pages;
+- in the schedule items below.
+
+`GET /api/v1/availability` has no names to translate. The admin, staff emails and the
+older `/api/calendar/resources` keep the main words.
+
+### Bookings in the schedule
+
+A room with **Show on the calendar** (`showOnCalendar`) puts its **confirmed** bookings
+on the public schedule. Each one is named by its booking link in the reader's language
+("Rehearsal", "Ensayo"; "Reserved" when the link was deleted), with its time and room.
+It never says who booked: no name, email, phone, notes, answers or manage link, and
+not the booking's id. Pending, declined and cancelled bookings, staff blocks and RSVPs
+never show. Rooms without the switch never show their bookings.
+
+- **`/calendar`, embeds and TV quick links:** shown on views that name no calendar,
+  unfiltered or by `room=` (each in its own room). A booking belongs to no calendar
+  and has no tags, so a `cal=` view and a `tag=` view leave bookings out, and `notag=`
+  keeps them. For a room's whole schedule, link `/calendar?room=sanctuary`; for main
+  events only, `/calendar?cal=events`. `room=` only takes rooms with **Name it on
+  public events**.
+- **Saved screens with private details** keep "<link name> · <booker>" for the rooms
+  they name. The admin keeps "<room> · <booker>".
+- **The app API:** `GET /api/v1/events?bookings=1` (or `true`) adds `bookings`, apart
+  from `occurrences`:
+
+  ```json
+  "bookings": [{ "id": "b3f0…", "title": "Ensayo", "start": "2030-01-04T15:00:00.000Z",
+    "end": "2030-01-04T17:00:00.000Z", "allDay": false,
+    "rooms": [{ "slug": "sanctuary", "name": "Santuario", "color": "#aa3355" }] }]
+  ```
+
+  - The whole window's bookings come with page 1; later pages have `[]`. Without
+    `bookings=1` the key is absent.
+  - `calendar`, `tag` and `excludeTag` filter occurrences only. `room` narrows bookings
+    too, and `q` matches their title.
+  - `id` is an opaque key, the same on every call, that doesn't reveal the booking's id.
+  - A booking link that books whole days gives `allDay: true`.
+  - The client has `events({ from, to, calendar: ['events', 'sanctuary'], bookings:
+    true })` (type `ScheduleBooking`); the native `useEvents(query)` passes it through.
+  - Answers can be up to a minute old (the response cache), as on `/calendar`.
+
+Site code reads them with `scheduleBookings(repo, rooms, from, to)` and names them
+with `publicBookingTitle(link, locale, reserved)` (`lib/booking/public.ts`).
+
 ### Rooms in event data
 
 - `/api/v1/events`, `/api/v1/events/:slug`, `/api/v1/search`, `/api/calendar/events`
@@ -344,7 +400,7 @@ A full-screen calendar for a TV in a lobby or on a room's door. It shows a week,
 
 There are two kinds of link:
 
-- **Quick links** spell out their settings in the address: `/display/calendar?view=week&hours=8-22`. Nothing is saved. Whatever their parameters, they show only what `calendar.ics` shows: published events in public calendars, or in an unlisted calendar named in `cal=`. There are no subscribed calendars, booking blocks, room names (until rooms are shown on public events) or hosts.
+- **Quick links** spell out their settings in the address: `/display/calendar?view=week&hours=8-22`. Nothing is saved. Whatever their parameters, they show only what `calendar.ics` shows: published events in public calendars, or in an unlisted calendar named in `cal=`. They also show bookings as `/calendar` does (see [Bookings in the schedule](#bookings-in-the-schedule)): named by their booking link, never who booked, and not with `cal=` or `tag=`. There are no subscribed calendars, room names (until rooms are shown on public events) or hosts.
 - **Saved screens** live in **Admin → Calendar → Screens**. Each has a name, the same settings and a long random key, which is the whole address: `/display/s/<key>`. A screen can show private details (below).
 
 Spanish (or any other site language): `/es/display/calendar?…`, or the screen's Language setting.

package/docs/mobile.md

@@ -257,7 +257,10 @@ For a search screen across everything, `useSearch(text)` returns groups
 (posts, pages, events) with snippets. Group `posts` by `collection` for
 headings, and when `more.posts` is true link to the collection list with that
 `q`. Search matches the main-language text, so Spanish words find content only
-where the original is Spanish.
+where the original is Spanish. Events include unlisted calendars (a rooms
+calendar's classes, say), never private ones or Google booking-page
+appointments; when `more.events` is true, `useEvents({ q })` lists the same
+events by date (without `q` it lists public calendars only).
 
 **A native version of a coded section.** From the site folder:
 `npx acms section new visit-banner --theme <slug>` (new) or, for an existing
@@ -281,6 +284,9 @@ keyed by `locale`.
 Optional; the owner sends them from **Admin → Mobile app** (manual messages
 plus automatic ones: new post, new event, "starting soon", event changes,
 "we're live"). The app only registers and chooses topics; it never sends.
+Events in an unlisted calendar notify only when a rule names that calendar or a
+tag they have; an event's `notify.changes` says which topics hear about its
+changes.
 
 1. Site: `acms({ mobile: { push: true } })` in `astro.config.mjs` (off by
    default; `/api/v1/devices` and `/api/v1/push/topics` 404 until then).

package/mobile-template/recipes/booking/files/app/book/[resource].tsx

@@ -1,11 +1,14 @@
 import { useState } from 'react';
 import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
 import { Stack, router, useLocalSearchParams } from 'expo-router';
-import { ErrorView, useAvailability, useLayout, useLocale, useResources, useTheme } from '@acms-subir/native';
+import { ErrorView, fill, lengthText, useAvailability, useLayout, useLocale, useResources, useStrings, useTheme, zoneName } from '@acms-subir/native';
 
-// Open slots for one booking link over the next two weeks.
+// Open times for one booking link over the next two weeks. A link with
+// several lengths shows them as chips; a whole-day link lists how many days
+// fit from each open day instead of times.
 export default function SlotsScreen() {
   const t = useTheme();
+  const w = useStrings();
   const { locale } = useLocale();
   const { gutter } = useLayout();
   const { resource, link } = useLocalSearchParams<{ resource: string; link: string }>();
@@ -14,39 +17,51 @@ export default function SlotsScreen() {
   const l = r?.links.find((x) => x.slug === link);
   const [minutes, setMinutes] = useState<number | undefined>();
   const length = minutes ?? l?.lengths[0];
-  const slots = useAvailability(resource && link ? { resource, link, days: 14, minutes: length } : null);
+  const days = l?.mode === 'day';
+  // whole days come in every length that fits; times come for the chosen length
+  const slots = useAvailability(resource && link && l ? { resource, link, days: 14, minutes: days ? undefined : length } : null);
   if (slots.error && !slots.data) return <ErrorView error={slots.error} retry={() => slots.refetch()} />;
   const tz = slots.data?.timezone;
   const day = (date: string) => new Date(`${date}T12:00:00Z`).toLocaleDateString(locale, { weekday: 'long', month: 'short', day: 'numeric', timeZone: 'UTC' });
   const time = (iso: string) => new Date(iso).toLocaleTimeString(locale, { hour: 'numeric', minute: '2-digit', timeZone: tz });
-  const days = (slots.data?.days ?? []).filter((d) => d.slots.length);
+  const span = (m: number) => lengthText(m, w, locale);
+  const open = (slots.data?.days ?? []).filter((d) => d.slots.length);
   return (
     <ScrollView style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 20, width: '100%', maxWidth: 840, alignSelf: 'center' }}>
-      <Stack.Screen options={{ title: l?.name ?? 'Choose a time' }} />
-      {r && <Text style={t.styles.text.muted}>{r.name}{tz ? ` · times in ${tz}` : ''}</Text>}
-      {!!l && l.lengths.length > 1 && (
-        <View style={{ flexDirection: 'row', gap: 16 }} accessibilityRole="tablist">
-          {l.lengths.map((m) => (
-            <Pressable key={m} accessibilityRole="tab" accessibilityState={{ selected: m === length }} onPress={() => setMinutes(m)} hitSlop={8}>
-              <Text style={[t.styles.text.body, { color: m === length ? t.colors.ink : t.colors.muted, fontWeight: m === length ? '700' : '400' }]}>{m} min</Text>
-            </Pressable>
-          ))}
+      <Stack.Screen options={{ title: l?.name ?? w.bookPickTime }} />
+      {r && <Text style={t.styles.text.muted}>{r.name}{tz && !days ? ` · ${fill(w.bookTimesIn, { zone: zoneName(tz, locale) })}` : ''}</Text>}
+      {!!l?.description && <Text style={t.styles.text.body}>{l.description}</Text>}
+      {l && !l.autoConfirm && <Text style={t.styles.text.small}>{w.bookApprovalNote}</Text>}
+      {!!l && l.mode === 'range' && l.lengths.length > 1 && (
+        <View style={{ gap: 8 }}>
+          <Text style={t.styles.text.label}>{w.bookHowLong}</Text>
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }} accessibilityRole="radiogroup">
+            {l.lengths.map((m) => {
+              const on = m === length;
+              return (
+                <Pressable key={m} accessibilityRole="radio" accessibilityState={{ checked: on }} onPress={() => setMinutes(m)} hitSlop={4}
+                  style={{ paddingVertical: 8, 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 }}>
+                  <Text style={[t.styles.text.body, { fontWeight: on ? '700' : '400' }]}>{span(m)}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
         </View>
       )}
       {slots.isPending && <ActivityIndicator color={t.colors.accent} />}
-      {!slots.isPending && !days.length && <Text style={t.styles.text.muted}>No open times in the next two weeks.</Text>}
-      {days.map((d) => (
+      {!slots.isPending && !open.length && <Text style={t.styles.text.muted}>{w.bookNoTimes}</Text>}
+      {open.map((d) => (
         <View key={d.date} style={{ gap: 10 }}>
           <Text style={t.styles.text.heading}>{day(d.date)}</Text>
           <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
             {d.slots.map((s) => (
               <Pressable
-                key={s.start}
+                key={`${s.start}:${s.minutes}`}
                 accessibilityRole="button"
                 onPress={() => router.push({ pathname: '/book/details', params: { resource, link, start: s.start, end: s.end, minutes: String(s.minutes) } })}
                 style={({ pressed }) => ({ minWidth: 96, paddingVertical: 10, paddingHorizontal: 12, borderRadius: Math.min(t.radius, 10), borderWidth: 1, borderColor: t.colors.line, backgroundColor: pressed ? t.colors.soft : t.colors.panel, alignItems: 'center' })}
               >
-                <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{time(s.start)}</Text>
+                <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{days ? span(s.minutes) : time(s.start)}</Text>
               </Pressable>
             ))}
           </View>

package/mobile-template/recipes/booking/files/app/book/details.tsx

@@ -3,14 +3,20 @@ import { KeyboardAvoidingView, Platform, Pressable, ScrollView, Switch, Text, Te
 import { Stack, router, useLocalSearchParams } from 'expo-router';
 import * as Crypto from 'expo-crypto';
 import { isAcmsError } from '@acms-subir/client';
-import { Button, formatEventDate, useBooking, useLayout, useLocale, useResources, useTheme } from '@acms-subir/native';
+import { Button, fill, formatBookingDate, useBooking, useLayout, useLocale, useResources, useSite, useStrings, useTheme } from '@acms-subir/native';
 
 // Details form and confirmation. useBooking keeps one idempotency key per
 // booking intent, so pressing "Book" again after a timeout can't double-book.
+// It sends the app's language, so the emails and their links come in it. A
+// booking can come back `pending` (a link that needs approval, or a person's
+// first booking under "Confirm unless…"): then it says it's waiting for
+// approval, not that it's confirmed.
 export default function DetailsScreen() {
   const t = useTheme();
+  const w = useStrings();
   const { locale } = useLocale();
   const { gutter } = useLayout();
+  const site = useSite();
   const p = useLocalSearchParams<{ resource: string; link: string; start: string; end: string; minutes: string }>();
   const r = useResources().data?.resources.find((x) => x.slug === p.resource);
   const l = r?.links.find((x) => x.slug === p.link);
@@ -19,7 +25,7 @@ export default function DetailsScreen() {
   const [email, setEmail] = useState('');
   const [phone, setPhone] = useState('');
   const [answers, setAnswers] = useState<Record<string, string>>({});
-  const when = formatEventDate({ start: p.start, end: p.end, timezone: r?.timezone }, locale);
+  const when = formatBookingDate({ start: p.start, end: p.end, allDay: l?.mode === 'day', timezone: r?.timezone }, locale);
 
   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 field = (label: string, value: string, onChange: (v: string) => void, opts: { keyboard?: KeyboardTypeOptions; multiline?: boolean; auto?: 'name' | 'email' | 'tel' } = {}) => (
@@ -32,16 +38,19 @@ export default function DetailsScreen() {
   );
 
   if (booking.data) {
-    const b = booking.data.booking;
+    const { booking: b, manageToken } = booking.data;
+    const confirmed = b.status === 'confirmed';
     return (
       <ScrollView style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 12, width: '100%', maxWidth: 640, alignSelf: 'center' }}>
-        <Stack.Screen options={{ title: 'Booked', headerBackVisible: false }} />
-        <Text accessibilityRole="header" style={t.styles.text.display}>{b.status === 'confirmed' ? 'You’re booked' : 'Request sent'}</Text>
-        <Text style={t.styles.text.body}>{l?.name} · {when}</Text>
-        <Text style={t.styles.text.muted}>
-          {b.status === 'confirmed' ? `A confirmation is on its way to ${b.email}.` : `We’ll email ${b.email} once it’s confirmed.`}
-        </Text>
-        <Button label="Done" onPress={() => { booking.reset(); router.dismissAll(); }} />
+        <Stack.Screen options={{ title: w.yourBooking, headerBackVisible: false }} />
+        <Text accessibilityRole="header" style={t.styles.text.display}>{confirmed ? w.booked : b.status === 'pending' ? w.awaitingApproval : w.notConfirmed}</Text>
+        <Text style={t.styles.text.body}>{[r?.name, l?.name].filter(Boolean).join(' · ')}</Text>
+        <Text style={t.styles.text.body}>{when}</Text>
+        <Text style={t.styles.text.muted}>{fill(confirmed ? w.confirmationOnItsWay : w.emailWhenApproved, { email: b.email })}</Text>
+        {site.data?.features.bookingChanges
+          ? <Button label={w.bookManage} variant="outline" onPress={() => router.push({ pathname: '/book/manage', params: { token: manageToken } })} />
+          : <Text style={t.styles.text.small}>{w.changeByEmail}</Text>}
+        <Button label={w.requestDone} onPress={() => { booking.reset(); router.dismissAll(); }} />
       </ScrollView>
     );
   }
@@ -51,27 +60,27 @@ export default function DetailsScreen() {
   return (
     <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
       <ScrollView keyboardShouldPersistTaps="handled" style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 16, width: '100%', maxWidth: 640, alignSelf: 'center' }}>
-        <Stack.Screen options={{ title: 'Your details' }} />
+        <Stack.Screen options={{ title: w.bookDetails }} />
         <View style={[t.styles.card, { gap: 2 }]}>
-          <Text style={t.styles.text.heading}>{l?.name ?? 'Booking'}</Text>
+          <Text style={t.styles.text.heading}>{l?.name ?? w.bookTitle}</Text>
           <Text style={t.styles.text.muted}>{r?.name} · {when}</Text>
         </View>
-        {field('Name', name, setName, { auto: 'name' })}
-        {field('Email', email, setEmail, { keyboard: 'email-address', auto: 'email' })}
-        {l?.askPhone && field('Phone', phone, setPhone, { keyboard: 'phone-pad', auto: 'tel' })}
+        {field(w.nameField, name, setName, { auto: 'name' })}
+        {field(w.emailField, email, setEmail, { keyboard: 'email-address', auto: 'email' })}
+        {l?.askPhone && field(w.phoneField, phone, setPhone, { keyboard: 'phone-pad', auto: 'tel' })}
         {l?.questions.map((q) => {
-          const label = q.label + (q.required ? '' : ' (optional)');
+          const label = q.label + (q.required ? '' : ` (${w.requestOptional.toLowerCase()})`);
           const set = (v: string) => setAnswers((a) => ({ ...a, [q.id]: v }));
           if (q.type === 'checkbox') return (
             <View key={q.id} style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
               <Text style={[t.styles.text.body, { flex: 1 }]}>{label}</Text>
-              <Switch value={answers[q.id] === 'yes'} onValueChange={(v) => set(v ? 'yes' : '')} trackColor={{ true: t.colors.accent }} />
+              <Switch value={answers[q.id] === 'yes'} onValueChange={(v) => set(v ? 'yes' : '')} trackColor={{ true: t.colors.accent }} accessibilityLabel={q.label} />
             </View>
           );
           if (q.type === 'select') return (
             <View key={q.id} style={{ gap: 6 }}>
               <Text style={t.styles.text.label}>{label}</Text>
-              <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+              <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }} accessibilityRole="radiogroup">
                 {q.options.map((o) => {
                   const on = answers[q.id] === o;
                   return (
@@ -90,15 +99,15 @@ export default function DetailsScreen() {
           });
         })}
         {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.muted}>
-              {isAcmsError(error) && error.status === 0 ? 'Check your connection and try again. You won’t be booked twice.' : error.message}
-            </Text>
+          <View style={{ backgroundColor: t.colors.soft, borderRadius: Math.min(t.radius, 10), padding: 12, gap: 4 }} accessibilityLiveRegion="polite">
+            <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{w.bookNotSent}</Text>
+            {/* the site's refusals ("That time was just taken…") come in English */}
+            <Text style={t.styles.text.muted}>{isAcmsError(error) && error.status === 0 ? w.bookOfflineRetry : error.message}</Text>
           </View>
         )}
-        <Button label={booking.isPending ? 'Booking…' : 'Book'} disabled={booking.isPending || !name.trim() || !email.trim()} onPress={submit} />
-        <Text style={t.styles.text.small}>Your details go only to the organiser of this booking.</Text>
+        {l && !l.autoConfirm && <Text style={t.styles.text.small}>{w.bookApprovalNote}</Text>}
+        <Button label={booking.isPending ? w.bookSending : l && !l.autoConfirm ? w.bookRequest : w.bookConfirm} disabled={booking.isPending || !name.trim() || !email.trim()} onPress={submit} />
+        <Text style={t.styles.text.small}>{w.bookPrivacy}</Text>
       </ScrollView>
     </KeyboardAvoidingView>
   );

package/mobile-template/recipes/booking/files/app/book/index.tsx

@@ -1,19 +1,24 @@
 import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
 import { Stack, router } from 'expo-router';
-import { ErrorView, useLayout, useResources, useTheme } from '@acms-subir/native';
+import { ErrorView, lengthText, useLayout, useLocale, useResources, useStrings, useTheme } from '@acms-subir/native';
 
-// Everything the site lets people book, grouped by resource.
+// Everything the site lets people book, grouped by resource. Rooms and
+// booking links come named in the app's language (their translations on the site).
 export default function BookScreen() {
   const t = useTheme();
+  const w = useStrings();
+  const { locale } = useLocale();
   const { gutter, wide } = useLayout();
   const { data, error, isPending, refetch } = useResources();
   if (error && !data) return <ErrorView error={error} retry={refetch} />;
   const resources = (data?.resources ?? []).filter((r) => r.links.length);
+  // "45 min", "1 h 30 min"
+  const length = (m: number) => lengthText(m, w, locale);
   return (
     <ScrollView style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 16, width: '100%', maxWidth: 1040, alignSelf: 'center' }}>
-      <Stack.Screen options={{ title: 'Book' }} />
+      <Stack.Screen options={{ title: w.bookTitle }} />
       {isPending && <ActivityIndicator color={t.colors.accent} />}
-      {!isPending && !resources.length && <Text style={t.styles.text.muted}>Nothing is open for booking right now.</Text>}
+      {!isPending && !resources.length && <Text style={t.styles.text.muted}>{w.bookNothing}</Text>}
       <View style={{ flexDirection: wide ? 'row' : 'column', flexWrap: 'wrap', gap: 16 }}>
         {resources.map((r) => (
           <View key={r.id} style={[t.styles.card, { gap: 10, width: wide ? '48.5%' : '100%' }]}>
@@ -27,7 +32,8 @@ export default function BookScreen() {
                 style={({ pressed }) => ({ borderColor: t.colors.line, borderWidth: 1, borderRadius: Math.min(t.radius, 10), padding: 12, gap: 2, opacity: pressed ? 0.85 : 1 })}
               >
                 <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{l.name}</Text>
-                <Text style={t.styles.text.small}>{l.lengths.length ? l.lengths.map((m) => `${m} min`).join(' · ') : l.mode}</Text>
+                {!!l.description && <Text style={t.styles.text.small}>{l.description}</Text>}
+                {l.mode !== 'day' && <Text style={t.styles.text.small}>{l.lengths.map(length).join(' · ')}</Text>}
               </Pressable>
             ))}
           </View>

package/mobile-template/recipes/booking/files/app/book/manage.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
+import { Stack, useLocalSearchParams } from 'expo-router';
+import { isAcmsError } from '@acms-subir/client';
+import { Button, ErrorView, fill, formatBookingDate, lengthText, useCancelBooking, useLayout, useLocale, useManagedBooking, useRescheduleAvailability, useRescheduleBooking, useStrings, useTheme } from '@acms-subir/native';
+
+// The booker's own booking, from its private token (the confirmation screen
+// passes it): its status and time, a new time, or cancel. Needs the site's
+// App access switch for booking changes (site.features.bookingChanges); the
+// link in every booking email does the same on the website either way. The
+// booking link's change cutoff applies (can.reschedule / can.cancel).
+export default function ManageBookingScreen() {
+  const t = useTheme();
+  const w = useStrings();
+  const { locale } = useLocale();
+  const { gutter } = useLayout();
+  const { token } = useLocalSearchParams<{ token: string }>();
+  const managed = useManagedBooking(token);
+  const cancel = useCancelBooking(token);
+  const move = useRescheduleBooking(token);
+  const [picking, setPicking] = useState(false);
+  const [asking, setAsking] = useState(false);
+  const [moved, setMoved] = useState(false);
+  // a link with several lengths offers new times of the booking's own length
+  const length = managed.data?.link?.mode === 'range' ? Math.round((Date.parse(managed.data.booking.end) - Date.parse(managed.data.booking.start)) / 60_000) : undefined;
+  const slots = useRescheduleAvailability(token, picking ? { days: 14, minutes: length } : null);
+  if (managed.error && !managed.data) return <ErrorView error={managed.error} retry={() => managed.refetch()} />;
+  if (!managed.data) return <ActivityIndicator color={t.colors.accent} style={{ marginTop: 32 }} />;
+  const { booking: b, title, can, link } = managed.data;
+  const when = formatBookingDate({ start: b.start, end: b.end, allDay: b.allDay, timezone: b.timezone }, locale);
+  const status = b.status === 'confirmed' ? w.confirmed : b.status === 'pending' ? w.awaitingApproval : b.status === 'cancelled' ? w.bookCancelled : b.status === 'declined' ? w.bookDeclined : w.notConfirmed;
+  const day = (date: string) => new Date(`${date}T12:00:00Z`).toLocaleDateString(locale, { weekday: 'long', month: 'short', day: 'numeric', timeZone: 'UTC' });
+  const time = (iso: string) => new Date(iso).toLocaleTimeString(locale, { hour: 'numeric', minute: '2-digit', timeZone: slots.data?.timezone ?? b.timezone });
+  const failure = cancel.error ?? move.error;
+  const open = (slots.data?.days ?? []).filter((d) => d.slots.length);
+  return (
+    <ScrollView style={{ backgroundColor: t.colors.bg }} contentContainerStyle={{ padding: gutter, gap: 14, width: '100%', maxWidth: 640, alignSelf: 'center' }}>
+      <Stack.Screen options={{ title: w.yourBooking }} />
+      <View style={[t.styles.card, { gap: 4 }]}>
+        <Text style={t.styles.text.heading}>{title}</Text>
+        <Text style={t.styles.text.body}>{when}</Text>
+        <Text style={t.styles.text.muted}>{status}</Text>
+      </View>
+      {moved && <Text style={t.styles.text.body} accessibilityLiveRegion="polite">{w.bookMoved}</Text>}
+      {failure && <Text style={t.styles.text.muted} accessibilityLiveRegion="polite">{isAcmsError(failure) && failure.status === 0 ? w.checkConnection : failure.message}</Text>}
+      {can.closed && <Text style={t.styles.text.small}>{fill(w.bookChangesClosed, { hours: String(can.cutoffHours) })}</Text>}
+
+      {can.reschedule && !picking && <Button label={w.bookMove} variant="outline" onPress={() => { setMoved(false); setPicking(true); }} />}
+      {picking && (
+        <View style={{ gap: 12 }}>
+          {slots.isPending && <ActivityIndicator color={t.colors.accent} />}
+          {!slots.isPending && !open.length && <Text style={t.styles.text.muted}>{w.bookNoTimes}</Text>}
+          {open.map((d) => (
+            <View key={d.date} style={{ gap: 8 }}>
+              <Text style={t.styles.text.label}>{day(d.date)}</Text>
+              <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+                {d.slots.map((s) => (
+                  <Pressable key={`${s.start}:${s.minutes}`} accessibilityRole="button" disabled={move.isPending}
+                    onPress={() => move.mutate({ start: s.start, minutes: s.minutes }, { onSuccess: () => { setPicking(false); setMoved(true); } })}
+                    style={({ pressed }) => ({ minWidth: 96, paddingVertical: 10, paddingHorizontal: 12, borderRadius: Math.min(t.radius, 10), borderWidth: 1, borderColor: t.colors.line, backgroundColor: pressed ? t.colors.soft : t.colors.panel, alignItems: 'center', opacity: move.isPending ? 0.5 : 1 })}>
+                    <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{link?.mode === 'day' ? lengthText(s.minutes, w, locale) : time(s.start)}</Text>
+                  </Pressable>
+                ))}
+              </View>
+            </View>
+          ))}
+          {move.isPending && <Text style={t.styles.text.small}>{w.bookMoving}</Text>}
+          <Button label={w.keepIt} variant="outline" onPress={() => setPicking(false)} />
+        </View>
+      )}
+
+      {can.cancel && !asking && <Button label={w.bookCancel} variant="outline" onPress={() => setAsking(true)} />}
+      {can.cancel && asking && (
+        <View style={[t.styles.card, { gap: 10 }]}>
+          <Text style={t.styles.text.body}>{w.bookCancelAsk}</Text>
+          <Button label={cancel.isPending ? w.cancelling : w.yesCancel} disabled={cancel.isPending} onPress={() => cancel.mutate(undefined, { onSuccess: () => setAsking(false) })} />
+          <Button label={w.keepIt} variant="outline" onPress={() => setAsking(false)} />
+        </View>
+      )}
+    </ScrollView>
+  );
+}

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

@@ -1,17 +1,20 @@
 {
   "kind": "client",
   "title": "Booking",
-  "description": "Resources and booking links → open slots → details form → confirmation, with retry-safe submits.",
+  "description": "Resources and booking links → open times (length chips, whole days) → details form → confirmed or waiting for approval, with retry-safe submits; then change or cancel. English and Spanish built in.",
   "packages": [
     "expo-crypto"
   ],
   "routes": [
     "/book",
     "/book/[resource]",
-    "/book/details"
+    "/book/details",
+    "/book/manage"
   ],
   "next": [
     "Link to it from a screen: <Link href=\"/book\">Book</Link> (expo-router)",
-    "Bookings must be enabled on the site (Admin → Bookings) with at least one public booking link."
+    "Bookings must be enabled on the site (Admin → Bookings) with at least one public booking link.",
+    "Name each booking link in your other languages (the link's Name in Español), so the app shows it in the person's language.",
+    "Change or cancel in the app needs Admin → Mobile app → App access → Change bookings from the app (on by default); otherwise the screen points to the link in the confirmation email."
   ]
 }

package/package.json

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

package/src/components/MobileApp.tsx

@@ -53,7 +53,7 @@ function MobileAppView({ state, setState }: { state: AdminPushState; setState: (
   const topicLabel = useMemo(() => {
     const map = new Map(state.topics.map((t) => [t.id, t.label]));
     for (const c of state.collections) if (!map.has(`collection:${c.key}`)) map.set(`collection:${c.key}`, c.label);
-    for (const c of state.calendars) if (!map.has(`calendar:${c.slug}`)) map.set(`calendar:${c.slug}`, c.name);
+    for (const c of state.calendars) if (c.visibility === 'public' && !map.has(`calendar:${c.slug}`)) map.set(`calendar:${c.slug}`, c.name);
     map.set('*', 'Everyone');
     return (id: string) => map.get(id) ?? id;
   }, [state]);
@@ -282,14 +282,19 @@ function Automatic({ state, setState }: { state: AdminPushState; setState: (s: A
   const setRule = (i: number, patch: Partial<ChangeRule>) => setAuto({ ...auto, eventChanges: rules.map((r, j) => (j === i ? { ...r, ...patch } : r)) });
   // focus moves to "Add a rule" (enabled again once the tenth rule goes)
   const removeRule = (i: number) => { setAuto({ ...auto, eventChanges: rules.filter((_, j) => j !== i) }); requestAnimationFrame(() => addRule.current?.focus()); };
-  const calendarChoices = (list: string[], set: (calendars: string[]) => void) => {
+  // '*' covers the public calendars; an unlisted one only when it's ticked, or
+  // (`tagged`: a change rule that lists tags) for events with those tags
+  const calendarChoices = (list: string[], set: (calendars: string[]) => void, tagged = false) => {
     const all = list.includes('*');
+    const unlisted = new Set(state.calendars.filter((c) => c.visibility !== 'public').map((c) => c.id));
+    const covered = (c: AdminPushState['calendars'][number]) => all && (c.visibility === 'public' || tagged);
     return (
       <div className="ma-choices">
-        <label className="ma-check"><input type="checkbox" checked={all} onChange={() => set(all ? [] : ['*'])} /><span>All public calendars</span></label>
+        <label className="ma-check"><input type="checkbox" checked={all}
+          onChange={() => set(all ? list.filter((id) => id !== '*') : ['*', ...list.filter((id) => unlisted.has(id))])} /><span>{tagged ? 'All calendars' : 'All public calendars'}</span></label>
         {state.calendars.map((c) => (
-          <label key={c.id} className="ma-check"><input type="checkbox" disabled={all} checked={all || list.includes(c.id)} onChange={() => set(flip(list, c.id))} />
-            <span><i className="ma-dot" style={{ background: c.color || 'var(--faint)' }} />{c.name}</span></label>
+          <label key={c.id} className="ma-check"><input type="checkbox" disabled={covered(c)} checked={covered(c) || list.includes(c.id)} onChange={() => set(flip(list, c.id))} />
+            <span><i className="ma-dot" style={{ background: c.color || 'var(--faint)' }} />{c.name}{c.visibility !== 'public' && <span className="hint"> · unlisted</span>}</span></label>
         ))}
       </div>
     );
@@ -337,7 +342,7 @@ function Automatic({ state, setState }: { state: AdminPushState; setState: (s: A
                         <b id={`${uid}-rule-${i}`}>Rule {i + 1}</b>
                         <button type="button" className="btn ghost sm" aria-label={`Remove rule ${i + 1}`} onClick={() => removeRule(i)}>Remove</button>
                       </div>
-                      {calendarChoices(r.calendars, (calendars) => setRule(i, { calendars }))}
+                      {calendarChoices(r.calendars, (calendars) => setRule(i, { calendars }), r.tags.length > 0)}
                       <div className="ma-fields">
                         <div className="field ma-lead">
                           <span>Only events tagged</span>