@acms-subir/core 0.3.62 → 0.3.64

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @acms-subir/core
 
+## 0.3.64
+
+### Patch Changes
+
+- 243474e: The booking recipe no longer puts a booking's manage token in a route. On the web a route is the page address, so the token ended up in history and URL logs, against the app template's own rule. Its confirmation now keeps the token in memory and passes a random key to `app/book/manage.tsx`; after a restart, that screen points to the confirmation email's link instead. The native package has the helpers: `rememberBookingToken(token)` returns the key, and `bookingToken(key)` returns the token (or null). Apps that copied the recipe in 0.3.63 can copy the two changed files (`app/book/details.tsx`, `app/book/manage.tsx`).
+- 445ef91: The Google Calendar sync copies the site's confirmed room bookings to Google, out only. Each linked Google calendar whose link holds the booking's room (direction Both ways or Site → Google only, while the Site URL matches) gets one copy, titled with the booking link's name in the main language, with its time (busy) and a line saying it was booked on the website. Copies never carry the booker's name, email, phone, answers or notes, and never have guests; writes use `sendUpdates=none`. A copy is made when the booking is confirmed (pending bookings never go out), changed when it moves or its link is renamed, moved when the link's rooms change, and deleted when the booking is cancelled, declined or deleted.
+
+  Every copy has a hidden link (`extendedProperties.private` `{ acmsBookingId, acmsSite }`): incoming reads, full resyncs and the first match never take it as a site event or list it under "Only in Google", and `isBooking()` never reads it as a booking page appointment, whatever its title. An edit or delete of a copy in Google never changes the booking: Recent changes lists it once, and the site's version goes back with the booking's next change. Unlinking keeps the copies; linking again pairs them by their hidden links, and deletes stale ones (a booking cancelled, declined or moved to another room meanwhile, or a second copy), but never a copy of a booking the site doesn't have.
+
+  A Google booking page only treats the copies as busy when it checks the room's calendar: tick it under the booking page's **Booked appointment settings → Check calendar availability** (the guide's "Booking pages" section has the steps for replacing booking pages with the site's booking links).
+
+  Migration 73 adds `gcal_booking_items` and triggers on `bookings` and `booking_links` (name and mode) that queue a booking's changes in `gcal_queue` (as `booking:<id>` rows). The guide is `acms docs google-calendar` → Site bookings.
+
+## 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

@@ -519,6 +519,24 @@ var GCAL_MIGRATION = { version: 69, statements: [
   `CREATE TRIGGER gcal_queue_update AFTER UPDATE ON events WHEN ${guard} BEGIN ${enqueue3("NEW.id")} END`,
   `CREATE TRIGGER gcal_queue_delete AFTER DELETE ON events WHEN ${guard} BEGIN ${enqueue3("OLD.id")} END`
 ] };
+var enqueueBooking = (id) => enqueue3(`'booking:'||${id}`);
+var GCAL_BOOKINGS_MIGRATION = { version: 73, statements: [
+  `CREATE TABLE gcal_booking_items (
+    link_id TEXT NOT NULL, google_id TEXT NOT NULL, booking_id TEXT NOT NULL, site TEXT NOT NULL DEFAULT '', google TEXT NOT NULL DEFAULT '',
+    etag TEXT NOT NULL DEFAULT '', html_link TEXT NOT NULL DEFAULT '', gone INTEGER NOT NULL DEFAULT 0, synced_at INTEGER NOT NULL DEFAULT 0, created_at INTEGER NOT NULL,
+    PRIMARY KEY (link_id, google_id), UNIQUE (link_id, booking_id)
+  )`,
+  `CREATE INDEX gcal_booking_items_booking ON gcal_booking_items (booking_id)`,
+  `CREATE TRIGGER gcal_booking_insert AFTER INSERT ON bookings WHEN ${guard} AND NEW.kind='booking' AND NEW.status='confirmed' BEGIN ${enqueueBooking("NEW.id")} END`,
+  `CREATE TRIGGER gcal_booking_update AFTER UPDATE OF status, start_at, end_at, resource_id, link_id, kind ON bookings WHEN ${guard} AND (NEW.kind='booking' OR OLD.kind='booking')
+    AND (OLD.status IS NOT NEW.status OR OLD.start_at IS NOT NEW.start_at OR OLD.end_at IS NOT NEW.end_at OR OLD.resource_id IS NOT NEW.resource_id OR OLD.link_id IS NOT NEW.link_id OR OLD.kind IS NOT NEW.kind)
+    BEGIN ${enqueueBooking("NEW.id")} END`,
+  `CREATE TRIGGER gcal_booking_delete AFTER DELETE ON bookings WHEN ${guard} AND OLD.kind='booking' BEGIN ${enqueueBooking("OLD.id")} END`,
+  `CREATE TRIGGER gcal_booking_link_change AFTER UPDATE OF name, mode ON booking_links WHEN ${guard} AND (OLD.name IS NOT NEW.name OR OLD.mode IS NOT NEW.mode) BEGIN
+    INSERT INTO gcal_queue (event_id,version,due_at,attempts,claimed_until,error)
+      SELECT 'booking:'||id,1,${now5},0,0,'' FROM bookings WHERE link_id=NEW.id AND kind='booking' AND status='confirmed' AND end_at>${now5}
+    ON CONFLICT(event_id) DO UPDATE SET version=version+1,due_at=excluded.due_at,attempts=0,error=''; END`
+] };
 
 // src/lib/repo/migrations.ts
 var CONTENT_VERSION_COLUMNS = {
@@ -1370,13 +1388,25 @@ 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]
+  ] },
+  // copies of confirmed room bookings in Google (lib/calendar/google/bookings.ts):
+  // their pairs, and triggers on bookings and booking links feeding gcal_queue.
+  // Not public, so no cache trigger.
+  GCAL_BOOKINGS_MIGRATION
 ];
 var CURRENT_CONTENT_VERSION_COLUMNS = {
   ...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.
@@ -440,6 +496,10 @@ calendars in step, both ways, within a few minutes. The full guide is
 - **Booked appointments** from Google booking pages come in as "Booked" with the
   internal tag `#google-booking` (`GOOGLE_BOOKING_TAG`), holding the link's room. Treat
   them as bookings: the tag never shows publicly.
+- **Site bookings go out.** A confirmed booking of a room a link holds gets a copy in
+  that Google calendar, titled with its booking link's name, never who booked. It's out
+  only: an edit in Google never changes the booking, and a copy never comes back as an
+  event or as "Booked" (`acms docs google-calendar` → Site bookings).
 - **"This and following"** maps to "from this date on", both ways:
   - A Google split changes the event from that date on (`changeFromDate` as `GOOGLE_SYNC`).
   - A change from a date on gives the later part its own Google series.

package/docs/google-calendar.md

@@ -65,7 +65,8 @@ the account can edit. The settings:
   - Site → Google only: Google mirrors the site. Start here, then switch.
   - Google → site only: site edits stay on the site.
 - **Rooms**: the room(s) this Google calendar stands for. Events that come in
-  from it hold those rooms. Site events holding one of them go to it.
+  from it hold those rooms. Site events holding one of them go to it, and so
+  do confirmed bookings of them (see [Site bookings](#site-bookings)).
   - **Also gets this calendar's events that hold no room**: one link per site
     calendar may have this.
   - A link with no rooms carries its whole site calendar.
@@ -140,6 +141,7 @@ suggestion decided.
 | Unpublished or deleted | deleted in Google | site → Google |
 | Deleted in Google | **cancelled** on the site (struck through, room freed, restorable) | Google → site |
 | Hidden link | `extendedProperties.private` `{ acmsEventId, acmsSite }` | site → Google |
+| Confirmed room booking | a copy titled with its booking link's name ([Site bookings](#site-bookings)) | site → Google only |
 
 Never sent:
 
@@ -220,6 +222,66 @@ Changes are compared field by field against what the pair last agreed:
   applies, because it already happened in Google. The clash shows in Recent
   changes and the event editor.
 
+## Site bookings
+
+Confirmed bookings of the site's rooms (`/book`, the app, staff) get a copy
+in each linked Google calendar that holds their room, so the calendar stays a
+mirror of the room, and the room shows as busy there. A Google booking page
+only sees that when it checks the room's calendar (see
+[Booking pages](#booking-pages-appointment-schedules)). They only go out:
+
+- **Which calendars:** links set to Both ways or Site → Google only, whose
+  **Rooms** include the booking's room. A link without rooms gets no bookings.
+  Each Google calendar gets one copy. Links only run while the Site URL
+  matches (see [Safety](#safety)).
+- **Which bookings:** confirmed ones, ending on or after the link's start date.
+  Pending bookings never go out (a first booking waiting for staff goes out
+  once it's approved). Staff blocks and RSVPs never do.
+- **What a copy has:**
+  - the booking link's name in the site's main language ("Rehearsal";
+    "Reserved" when the link was deleted);
+  - its time (a whole-day link's days as all day), marked busy;
+  - one line saying it was booked on the website and is changed there.
+
+  It never has the booker's name, email, phone, answers or notes, and no
+  guests. Every write uses `sendUpdates=none`.
+- **Hidden link:** `extendedProperties.private` `{ acmsBookingId, acmsSite }`.
+- **When it changes:**
+  - **Confirmed:** the copy is made.
+  - **Moved, or its booking link renamed:** the copy is changed.
+  - **The link's rooms change:** the copy moves to the Google calendar that
+    now holds the room.
+  - **Cancelled, declined or deleted:** the copy is deleted.
+
+**Stale copies.** Linking a calendar again finds the copies left from before.
+A copy of a booking that was cancelled, declined or moved to another room in
+the meantime, or a second copy of one booking, is deleted from Google (listed
+in Recent changes), so it doesn't keep the room busy. A copy of a booking the
+site doesn't have (after restoring an older backup) is left alone.
+
+**Edits in Google never change the booking.** Changing or deleting a copy in
+Google is listed once in Recent changes ("A booking's copy was changed in …,
+now …"). The copy stays as Google has it until the booking changes on the
+site. Then the site's version goes back, and a deleted copy is made again.
+
+**Never read back.** Every copy carries its hidden link, so:
+
+- the incoming side, a full resync and the first match never take it as a
+  site event, and never list it under "Only in Google";
+- it's never read as a booked appointment from a booking page, even when its
+  title is one of the link's booking page titles, or "Rehearsal";
+- unlinking keeps the copies, and linking the calendar again pairs them
+  again by their hidden links (Start syncing), with no second copy.
+
+A link turned to Google → site only keeps the copies it has, and they're no
+longer updated. Copies made by another site (staging) are left alone.
+
+Their pairs are `gcal_booking_items` (migration 73). Their outgoing changes
+share `gcal_queue`, as `booking:<id>` rows filled by triggers on `bookings`
+(a confirmed insert, and any change of status, time, room or booking link,
+or a delete) and on a booking link's name or mode (its upcoming confirmed
+bookings).
+
 ## Booking pages (appointment schedules)
 
 Google's API has no marker for appointments booked through a booking page.
@@ -244,6 +306,19 @@ unpairs it.
 Check this against a real booking before relying on it: book one and look
 at it in Recent changes and on the site.
 
+**Replacing them with the site's booking links:**
+1. Add a booking link to the room (for example "Rehearsal", with **Name in
+   Español**). Its bookings go to Google as [Site bookings](#site-bookings).
+2. Until the old booking pages are retired, tick the room's Google calendar
+   under each booking page's **Booked appointment settings → Check calendar
+   availability**, so site bookings block those slots. By default a booking
+   page checks only the account's primary calendar.
+3. Keep the old booking pages' titles under **Booking pages** until their
+   last appointments have passed, so those still come in as "Booked".
+
+Copies of site bookings are never read as booked appointments, even with the
+same title.
+
 ## Safety
 
 - **Nothing before review.** A new link only reads, until Start syncing.
@@ -261,8 +336,8 @@ at it in Recent changes and on the site.
     backup never deletes anything in Google.
 - **Environment sync and backups** never copy the Google account, links or
   pairs. Nothing is stored on the event row.
-- **Unlink** and **Disconnect** keep both copies of every event. Linking again
-  pairs them by their hidden links.
+- **Unlink** and **Disconnect** keep both copies of every event, and the
+  copies of bookings. Linking again pairs them by their hidden links.
 - **Loops**: each pair stores a hash of every synced field, per side, as last
   agreed. A change that already matches is never sent back.
 - **Failures** back off like YouTube's, and honour Google's rate limits:
@@ -289,12 +364,14 @@ Inside the framework, the sync lives in `lib/calendar/google/`:
 
 - `map.ts`: the field mapping, as pure functions;
 - `outbound.ts`, `inbound.ts`, `match.ts`;
+- `bookings.ts`: copies of the site's room bookings (out only);
 - `client.ts`: Google's API over `fetch`;
 - `service.ts`: the scheduler job and Sync now.
 
 Its tables (migration 69): `gcal_account`, `gcal_oauth_states`, `gcal_links`,
 `gcal_items` (one row per pair), `gcal_queue` (filled by triggers on every
-insert, update and delete of `events`) and `gcal_log`.
+insert, update and delete of `events`) and `gcal_log`. Migration 73 adds
+`gcal_booking_items` and the booking triggers ([Site bookings](#site-bookings)).
 
 ## Not yet
 

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, rememberBookingToken, 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,20 @@ 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
+          // the token stays in memory: only a random key goes in the route (on the web, the page address)
+          ? <Button label={w.bookManage} variant="outline" onPress={() => router.push({ pathname: '/book/manage', params: { booking: rememberBookingToken(manageToken) } })} />
+          : <Text style={t.styles.text.small}>{w.changeByEmail}</Text>}
+        <Button label={w.requestDone} onPress={() => { booking.reset(); router.dismissAll(); }} />
       </ScrollView>
     );
   }
@@ -51,27 +61,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 +100,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>