@acms-subir/core 0.3.62 → 0.3.63

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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

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/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.62",
+  "version": "0.3.63",
   "publishConfig": {
     "access": "public"
   },

package/src/components/booking/BookingFlow.astro

@@ -4,7 +4,9 @@
 // is a plain link or form (?date=…&len=…&start=…), so it works without
 // JavaScript and each state is shareable. Used by the page and the embed.
 import type { Booking, BookingLink, Resource, Settings } from '../../lib/schema';
+import { linkWords, roomName } from '../../lib/schema';
 import { bookingLinkUrl, resourceUrl } from '../../lib/calendar/config';
+import { localePath } from '../../lib/i18n';
 import { describeLength, describeLink, linkLengths, openDays, slotsForDay, ymd, type AvailabilityContext } from '../../lib/booking/availability';
 import { addMonths, fmt, monthCells, slotLabel } from '../../lib/booking/view';
 import { confirmsInstantly, linkApproval } from '../../lib/booking/approval';
@@ -19,8 +21,13 @@ interface Props {
   values?: Record<string, string>;
   embed?: boolean;
   reschedule?: Booking | null;
+  /** the page's language: the link and room are named in it, and links stay in it ('' = the main one) */
+  locale?: string;
 }
-const { resource, link, ctx, settings, url, error = '', values = {}, embed = false, reschedule = null } = Astro.props;
+const { resource, link, ctx, settings, url, error = '', values = {}, embed = false, reschedule = null, locale = '' } = Astro.props;
+// the booking link and room in the page's language (the rest of the flow is in English)
+const words = linkWords(link, locale);
+const room = roomName(resource, locale);
 const tz = ctx.resource.timezone || settings.timezone || 'UTC';
 // "rules" links usually confirm at once, but may not — promise only what's certain
 const instant = confirmsInstantly(linkApproval(link, settings));
@@ -42,10 +49,11 @@ const startParam = Number(url.searchParams.get('start'));
 const chosen = slots.find((s) => s.start === startParam && (link.mode !== 'day' || s.minutes === Number(url.searchParams.get('len') || s.minutes)));
 const minMonth = today.slice(0, 7);
 const maxMonth = ymd(ctx.now + link.maxAdvance * 86_400_000, tz).slice(0, 7);
-const base = embed ? `/embed/book/${resource.slug}/${link.slug}` : bookingLinkUrl(resource.slug, link.slug);
+const base = embed ? `/embed/book/${resource.slug}/${link.slug}` : localePath(bookingLinkUrl(resource.slug, link.slug), locale);
 const q = (patch: Record<string, string | number | undefined>) => {
   const p = new URLSearchParams();
-  for (const k of ['len', 'm', 'date', 'start', 'reschedule']) {
+  // an embed keeps its ?lang= (embeds are never under /es)
+  for (const k of ['len', 'm', 'date', 'start', 'reschedule', ...(embed ? ['lang'] : [])]) {
     const v = k in patch ? patch[k] : url.searchParams.get(k) ?? undefined;
     if (v !== undefined && v !== '' && v !== null) p.set(k, String(v));
   }
@@ -62,10 +70,10 @@ const val = (k: string) => values[k] ?? '';
 
 <div class={`pc-bk${embed ? ' is-embed' : ''}`}>
   <aside class="pc-bk-info">
-    {!embed && <a class="pc-bk-back" href={resourceUrl(resource.slug)}>‹ {resource.name}</a>}
-    {embed && <span class="pc-bk-kicker">{resource.name}</span>}
-    <h1 class="pc-bk-title">{link.name}</h1>
-    {link.description && <p class="pc-bk-desc">{link.description}</p>}
+    {!embed && <a class="pc-bk-back" href={localePath(resourceUrl(resource.slug), locale)}>‹ {room}</a>}
+    {embed && <span class="pc-bk-kicker">{room}</span>}
+    <h1 class="pc-bk-title">{words.name}</h1>
+    {words.description && <p class="pc-bk-desc">{words.description}</p>}
     <ul class="pc-bk-rules">{rules.map((r) => <li>{r}</li>)}</ul>
     {link.mode === 'range' && lengths.length > 1 && (
       <div class="pc-bk-lens" role="group" aria-label="How long">
@@ -111,7 +119,7 @@ const val = (k: string) => values[k] ?? '';
   ) : (
     <section class="pc-bk-form">
       <div class="pc-bk-summary">
-        <b>{resource.name} · {link.name}</b>
+        <b>{room} · {words.name}</b>
         <span>{f.dayLong.format(chosen.start)} · {slotLabel(chosen, link, f)}</span>
         <a href={q({ start: undefined })}>Change</a>
       </div>

package/src/lib/booking/public.ts

@@ -0,0 +1,40 @@
+// Confirmed room bookings as schedule items: /calendar, embeds and TV boards
+// (lib/calendar/data.ts) and the app API's `bookings` (lib/mobile/calendar.ts).
+// Publicly a booking is named by its booking link in the reader's language
+// ("Rehearsal", "Ensayo"; the calendar's "Reserved" when the link is gone)
+// and never says who booked: no name, email, phone, notes, answers or manage
+// token, and not the booking's id (publicBookingKey stands in for it).
+import type { ContentRepository } from '../repo/types';
+import { linkWords, type Booking, type BookingLink, type Resource } from '../schema';
+import { sha256Hex } from '../api-keys';
+
+export interface ScheduleBooking { booking: Booking; resource: Resource; link: BookingLink | null }
+
+/** Confirmed bookings of these rooms overlapping [from, to), with their room and booking link, by start. */
+export async function scheduleBookings(repo: ContentRepository, rooms: Resource[], from: number, to: number, limit = 5000): Promise<ScheduleBooking[]> {
+  if (!rooms.length) return [];
+  const byId = new Map(rooms.map((r) => [r.id, r]));
+  const [booked, links] = await Promise.all([
+    repo.listBookings({ from, to, statuses: ['confirmed'], kinds: ['booking'] }),
+    repo.listBookingLinks(),
+  ]);
+  const linkById = new Map(links.map((l) => [l.id, l]));
+  const out: ScheduleBooking[] = [];
+  for (const b of booked) {
+    const resource = byId.get(b.resourceId);
+    if (resource) out.push({ booking: b, resource, link: linkById.get(b.linkId) ?? null });
+    if (out.length >= limit) break;
+  }
+  return out;
+}
+
+/** Whether a booking reads as all day: its link books whole days (without its link: a day long, give or take a clock change). */
+export const bookingAllDay = (b: Pick<Booking, 'start' | 'end'>, link: Pick<BookingLink, 'mode'> | null) =>
+  link ? link.mode === 'day' : b.end - b.start >= 86_400_000 - 3_600_000;
+
+/** A booking's public title: its link's name in `locale`, else `reserved` (the calendar's word in that language). */
+export const publicBookingTitle = (link: BookingLink | null, locale: string | null | undefined, reserved: string) =>
+  (link && linkWords(link, locale).name) || reserved;
+
+/** A stable key for a booking in public data that doesn't reveal its id. */
+export const publicBookingKey = async (b: Pick<Booking, 'id'>) => `b${(await sha256Hex(`public-booking:${b.id}`)).slice(0, 24)}`;