@acms-subir/core 0.3.62 → 0.3.64

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

@@ -0,0 +1,93 @@
+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, bookingToken, fill, formatBookingDate, lengthText, useCancelBooking, useLayout, useLocale, useManagedBooking, useRescheduleAvailability, useRescheduleBooking, useStrings, useTheme } from '@acms-subir/native';
+
+// The booker's own booking, from its private token: its status and time, a
+// new time, or cancel. The confirmation screen keeps the token in memory and
+// passes a key for it (rememberBookingToken), never the token: on the web a
+// route is the page address. After a restart the key means nothing, and the
+// screen points to the email's link. 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 { booking } = useLocalSearchParams<{ booking: string }>();
+  const token = bookingToken(booking);
+  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);
+  // opened again after a restart: the key no longer stands for the token
+  if (!token) return (
+    <View style={{ flex: 1, backgroundColor: t.colors.bg, padding: gutter }}>
+      <Stack.Screen options={{ title: w.yourBooking }} />
+      <Text style={t.styles.text.muted}>{w.changeByEmail}</Text>
+    </View>
+  );
+  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.64",
   "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)}`;

package/src/lib/booking/service.ts

@@ -6,6 +6,7 @@ import { collectResponse, displayAnswers, staffAnswers } from '../forms/service'
 import type { ContentRepository } from '../repo/types';
 import type { Booking, BookingLink, BookingStatus, CalEvent, Resource, Settings } from '../schema';
 import { roomName } from '../schema';
+import { bookingTitle } from './view';
 import { loadFeed, expandVEvents } from '../calendar/ics';
 import { emitWebhook } from '../webhooks';
 import { parseFrom } from '../email/config';
@@ -109,8 +110,8 @@ async function describe(repo: ContentRepository, b: Booking, settings: Settings,
   const tz = resource ? resourceZone(resource, settings.timezone) : settings.timezone || 'UTC';
   return {
     resource, link, event: null as CalEvent | null, tz,
-    // the room in the booking's language (its main name without one)
-    title: [resource && roomName(resource, locale), link?.name].filter(Boolean).join(' · ') || 'Booking',
+    // the room and its booking link in the booking's language (their main names without one)
+    title: bookingTitle(resource, link, locale) || 'Booking',
     location: resource ? roomName(resource, locale) : '',
     when: whenText(b, tz, settings, link?.mode === 'day'),
   };
@@ -304,8 +305,11 @@ export async function createResourceBooking(
   const ctx = await availabilityContext(repo, resource, link, settings, opts.now ?? Date.now());
   if (args.source !== 'admin' && !isBookable(ctx, args.start, args.end)) throw new BookingError(409, 'That time was just taken or isn’t available. Please pick another.');
   const approval = linkApproval(link, settings);
+  // "the first booking from that email": only a confirmed booking (staff approved it, or it
+  // confirmed by itself) makes them returning; one still waiting, declined or cancelled doesn't.
+  // The address is all a booking without an account has to go on.
   const returning = approval.mode === 'rules' && approval.rules.firstTime
-    ? (await repo.listBookings({ email: booker.email, statuses: ['pending', 'confirmed'], kinds: ['booking'] })).length > 0
+    ? (await repo.listBookings({ email: booker.email, statuses: ['confirmed'], kinds: ['booking'], limit: 1 })).length > 0
     : true;
   const status: BookingStatus = args.status ?? decideStatus(approval, { start: args.start, end: args.end, seats: 1, returning });
   const b = await repo.createBooking({

package/src/lib/booking/view.ts

@@ -1,5 +1,6 @@
 // Display helpers for the public booking pages.
 import type { BookingLink, Resource, Settings } from '../schema';
+import { linkWords, roomName } from '../schema';
 import { siteLocale } from '../dates';
 import { addDaysYmd, localMidnight, resourceZone, ymd, type Slot } from './availability';
 
@@ -52,3 +53,8 @@ export function todayIn(resource: Resource, settings: Settings, now: number) {
   const tz = resourceZone(resource, settings.timezone);
   return { tz, today: ymd(now, tz), midnight: localMidnight(ymd(now, tz), tz) };
 }
+
+/** "Sanctuary · Rehearsal": the room and booking link in `locale` (each its main name without one); '' when both are gone. */
+export function bookingTitle(resource: Resource | null | undefined, link: BookingLink | null | undefined, locale?: string | null): string {
+  return [resource && roomName(resource, locale), link && linkWords(link, locale).name].filter(Boolean).join(' · ');
+}

package/src/lib/calendar/data.ts

@@ -7,7 +7,8 @@
 // details, lib/display: published events only, private calendars when it
 // names them, bookings with the booker's name, never emails, phones or notes).
 import type { ContentRepository } from '../repo/types';
-import { roomColor, roomName, type BookingLink, type CalEvent, type Calendar, type EventLocation, type Resource, type Settings } from '../schema';
+import { linkWords, roomColor, roomName, type CalEvent, type Calendar, type EventLocation, type Resource, type Settings } from '../schema';
+import { bookingAllDay, publicBookingTitle, scheduleBookings } from '../booking/public';
 import { eventIsListed, eventIsPublic, eventRoomIds, expandEvents, locationLine, safeColor, type OccurrenceMove } from './events';
 import { expandVEvents, loadFeed, tzParts, type CalendarEvent, type CalendarWindow } from './ics';
 import { CALENDAR, eventUrl, resourceUrl, withoutPrivateFields } from './config';
@@ -48,13 +49,14 @@ export interface ViewScope {
   includeUncategorized?: boolean;
   // feeds are network calls — views that don't need them can skip
   includeFeeds?: boolean;
-  // "Reserved" blocks from resources set to show on the calendar
+  // confirmed bookings of rooms set to show on the calendar (named by their
+  // booking link; with the booker's name for staff and private screens)
   includeBookings?: boolean;
   // the address's cal/tag/notag/room (filter.ts); its calendars narrow
   // calendarIds when both are given
   filter?: ResolvedEventFilter;
-  // the request's language (requestLocale): translated titles, event links
-  // under its /<locale> prefix, and "Reserved" in its words
+  // the request's language (requestLocale): translated titles, room and
+  // booking link names, event links under its /<locale> prefix
   locale?: string;
 }
 
@@ -158,36 +160,28 @@ export async function collectViewEvents(
     events.push(...results.flat());
   }
 
-  // resources marked "show on calendar": confirmed bookings appear as
-  // Reserved blocks (no guest names on public views) — only on unscoped views.
-  // A screen also shows the bookings of the rooms it names, as "<booking
-  // type> · <booker>" (the name only: never their email, phone or notes).
+  // rooms marked "show on calendar": their confirmed bookings appear named by
+  // their booking link in the view's language ("Rehearsal", "Ensayo"; "Reserved"
+  // when the link is gone), never who booked, on views that name no calendar
+  // (a booking belongs to none): unfiltered, or by room (each in its own room),
+  // never with a tag. A screen also shows the bookings of the rooms it names, as
+  // "<booking link> · <booker>" (the name only: never their email, phone or notes).
   if (!requested && (scope.includeBookings ?? true) && CALENDAR.bookings) {
     const named = scope.audience === 'screen' ? f?.roomIds ?? [] : [];
     const resources = (await repo.listResources()).filter((r) => (r.showOnCalendar || named.includes(r.id)) && (!f || untaggedMatches(f, { roomId: r.id })));
-    if (resources.length) {
-      const [booked, links] = await Promise.all([
-        repo.listBookings({ from: win.windowStartMs, to: win.windowEndMs, statuses: ['confirmed'], kinds: ['booking'] }),
-        scope.audience === 'screen' ? repo.listBookingLinks() : Promise.resolve([] as BookingLink[]),
-      ]);
-      const byId = new Map(resources.map((r) => [r.id, r]));
-      const linkName = new Map(links.map((l): [string, string] => [l.id, l.name]));
-      for (const b of booked) {
-        const r = byId.get(b.resourceId);
-        if (!r) continue;
-        const allDay = b.end - b.start >= 86_400_000 - 3_600_000;
-        // the room in the view's language (its main name without one)
-        const room = roomName(r, scope.locale);
-        const title = scope.audience === 'admin' ? `${r.name} · ${b.name}`
-          : scope.audience === 'screen' ? [linkName.get(b.linkId) || room, b.name].filter(Boolean).join(' · ')
-          : `${words.reserved} · ${room}`;
-        events.push({
-          start: b.start, end: b.end, allDay, days: allDay ? Math.max(1, Math.round((b.end - b.start) / 86_400_000)) : 1,
-          title, location: room, description: '', cal: inScope.length, color: '#8e919a', calendarName: room,
-          url: scope.audience === 'public' ? resourceUrl(r.slug) : undefined,
-          rooms: [{ id: r.id, slug: r.slug, name: room, color: roomColor(r) }],
-        });
-      }
+    for (const { booking: b, resource: r, link } of await scheduleBookings(repo, resources, win.windowStartMs, win.windowEndMs)) {
+      const allDay = bookingAllDay(b, link);
+      // the room and link in the view's language (their main names without one)
+      const room = roomName(r, scope.locale);
+      const title = scope.audience === 'admin' ? `${r.name} · ${b.name}`
+        : scope.audience === 'screen' ? [link ? linkWords(link, scope.locale).name : room, b.name].filter(Boolean).join(' · ')
+        : publicBookingTitle(link, scope.locale, words.reserved);
+      events.push({
+        start: b.start, end: b.end, allDay, days: allDay ? Math.max(1, Math.round((b.end - b.start) / 86_400_000)) : 1,
+        title, location: room, description: '', cal: inScope.length, color: '#8e919a', calendarName: room,
+        url: scope.audience === 'public' ? localePath(resourceUrl(r.slug), scope.locale ?? '') : undefined,
+        rooms: [{ id: r.id, slug: r.slug, name: room, color: roomColor(r) }],
+      });
     }
   }