@acms-subir/core 0.3.55 → 0.3.57

package/mobile-template/recipes/event-request/files/app/request.tsx

@@ -0,0 +1,305 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import { ActivityIndicator, KeyboardAvoidingView, Linking, Platform, Pressable, ScrollView, Text, TextInput, View, type KeyboardTypeOptions } from 'react-native';
+import { Stack, router } from 'expo-router';
+import * as Crypto from 'expo-crypto';
+import * as SecureStore from 'expo-secure-store';
+import type { RequestInput } from '@acms-subir/client';
+import { Button, ErrorView, fill, formatClock, formatEventDate, localDay, parseClock, requestEnd, requestProblemText, requestProblems, requestSummary, siteInstant, useDebounced, useGuest, useLayout, useLocale, useRequestOptions, useRoomFree, useSite, useStrings, useSubmitRequest, useTheme, type RequestField, type RequestProblem } from '@acms-subir/native';
+import { DayPicker } from '../components/DayPicker';
+
+// Request an event, without an account: something new (what, kind, when,
+// how it repeats, rooms with a live "looks free" line, people) or a change
+// to one of the site's events, then how to reach them. Staff answer in the
+// site's Calendar → Requests; nothing is on the calendar until they approve
+// it. While the site isn't taking requests the screen still opens and says
+// so, with the office phone: keep the More row that leads here, so App Review
+// always finds it. useSubmitRequest keeps one idempotency key per request, so
+// sending again after a timeout never asks twice. Words: useStrings(), in the
+// app's language (the website's form says the same).
+
+// Name, email and phone stay on this phone for next time: secure storage,
+// this device only, never sent anywhere but the site. Web keeps nothing.
+const CONTACT_KEY = 'acms.request.contact';
+const keychain = { keychainAccessible: SecureStore.WHEN_UNLOCKED_THIS_DEVICE_ONLY };
+type Contact = { name: string; email: string; phone: string };
+const contact = {
+  get: async (): Promise<Contact | null> => {
+    if (Platform.OS === 'web') return null;
+    try {
+      const v = JSON.parse((await SecureStore.getItemAsync(CONTACT_KEY, keychain)) ?? 'null');
+      return v && typeof v.name === 'string' && typeof v.email === 'string' ? { name: v.name, email: v.email, phone: typeof v.phone === 'string' ? v.phone : '' } : null;
+    } catch { return null; }
+  },
+  set: async (c: Contact) => { if (Platform.OS !== 'web') await SecureStore.setItemAsync(CONTACT_KEY, JSON.stringify(c), keychain).catch(() => {}); },
+};
+
+const call = (phone: string) => { Linking.openURL(`tel:${phone.replace(/[^\d+]/g, '')}`).catch(() => {}); };
+type Repeat = 'once' | 'weekly' | 'other';
+const UNSURE = '__unsure__';
+
+export default function RequestScreen() {
+  const t = useTheme();
+  const words = useStrings();
+  const { locale } = useLocale();
+  const { gutter } = useLayout();
+  const { data: site } = useSite();
+  const guest = useGuest();
+  const options = useRequestOptions();
+  const send = useSubmitRequest({ createKey: Crypto.randomUUID });
+  const o = options.data;
+  const tz = o?.timezone ?? 'UTC';
+  const [kind, setKind] = useState<'new' | 'change'>('new');
+  const [title, setTitle] = useState('');
+  const [type, setType] = useState('');
+  const [date, setDate] = useState('');
+  const [starts, setStarts] = useState('');
+  const [ends, setEnds] = useState('');
+  const [repeat, setRepeat] = useState<Repeat>('once');
+  const [repeatText, setRepeatText] = useState('');
+  const [rooms, setRooms] = useState<string[]>([]);
+  const [unsure, setUnsure] = useState(false);
+  const [people, setPeople] = useState('');
+  const [message, setMessage] = useState('');
+  const [event, setEvent] = useState('');
+  const [eventDate, setEventDate] = useState('');
+  const [change, setChange] = useState('');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [tried, setTried] = useState(false);
+
+  // details from last time, else the email they signed in with for "My bookings"
+  useEffect(() => {
+    let live = true;
+    void contact.get().then((c) => {
+      if (!live || !c) return;
+      setName((v) => v || c.name); setEmail((v) => v || c.email); setPhone((v) => v || c.phone);
+    });
+    return () => { live = false; };
+  }, []);
+  useEffect(() => {
+    if (site?.features.guestSignIn && guest.email) setEmail((v) => v || guest.email!);
+  }, [site?.features.guestSignIn, guest.email]);
+
+  // ---- what goes out ----
+  const startTime = parseClock(starts), endTime = parseClock(ends);
+  const count = people.replace(/\D/g, '');
+  const input: RequestInput = kind === 'new'
+    ? { kind, type: type || undefined, title, start: date && startTime ? `${date}T${startTime}` : '', end: endTime ?? '', repeat, repeatText,
+      rooms: unsure ? [] : rooms, roomsUnsure: unsure, people: count ? Number(count) : null, message, name, email, phone }
+    : { kind, event, date: eventDate || undefined, message: change, name, email, phone };
+  const local = requestProblems(input, o);
+  // the site's answer shows by its field until the next send
+  const problems: Partial<Record<RequestField, RequestProblem>> = tried ? { ...local, ...(send.field && send.problem ? { [send.field]: send.problem } : {}) } : {};
+  const invalid = tried && Object.keys(problems).length > 0;
+
+  // the live "looks free" line (needs bookings on the site): the first date's times as instants, since rooms/free needs a zone
+  const check = input.kind === 'new' && !local.start && !local.end && !unsure && rooms.length > 0 && site?.features.bookings === true;
+  const from = check ? siteInstant(input.start, tz) : null, to = check ? siteInstant(requestEnd(input.start, input.end), tz) : null;
+  const span = from && to ? `${from}|${to}` : '';
+  // asked once typing settles (30 checks a minute per address)
+  const checked = useDebounced(span, 400);
+
+  const submit = () => {
+    setTried(true);
+    if (Object.keys(local).length) return;
+    send.mutate(input, { onSuccess: () => { void contact.set({ name: name.trim(), email: email.trim(), phone: phone.trim() }); } });
+  };
+  const startOver = () => {
+    send.reset(); setTried(false);
+    setTitle(''); setType(''); setDate(''); setStarts(''); setEnds(''); setRepeat('once'); setRepeatText(''); setRooms([]); setUnsure(false);
+    setPeople(''); setMessage(''); setEvent(''); setEventDate(''); setChange('');
+  };
+
+  const screen = (children: ReactNode) => (
+    <KeyboardAvoidingView style={{ flex: 1, backgroundColor: t.colors.bg }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+      <Stack.Screen options={{ title: words.requestEvent }} />
+      <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ padding: gutter, gap: 20, width: '100%', maxWidth: 640, alignSelf: 'center' }}>{children}</ScrollView>
+    </KeyboardAvoidingView>
+  );
+  const officePhone = o?.phone ?? '';
+  const phoneLink = (text: string) => (
+    <Pressable accessibilityRole="link" onPress={() => call(officePhone)} style={{ minHeight: 44, justifyContent: 'center' }}>
+      <Text style={t.styles.text.link}>{text}</Text>
+    </Pressable>
+  );
+
+  // ---- loading, off or closed, sent ----
+  if (!site || (site.features.requests && options.isPending && !options.off)) return screen(<ActivityIndicator style={{ marginTop: 32 }} color={t.colors.accent} />);
+  if (options.error && !options.off && !o) return screen(<ErrorView error={options.error} retry={() => void options.refetch()} />);
+  if (options.off || o?.open === false || send.problem === 'closed') return screen(
+    <View style={[t.styles.card, { gap: 8 }]}>
+      <Text accessibilityRole="header" style={t.styles.text.heading}>{words.requestClosed}</Text>
+      {!!officePhone && phoneLink(fill(words.requestCall, { phone: officePhone }))}
+    </View>,
+  );
+  if (send.data && send.variables) {
+    const sent = send.variables;
+    const eventTitle = sent.kind === 'change' ? o?.events.find((e) => e.slug === sent.event)?.title : undefined;
+    const lines = requestSummary(sent, words, { options: o, locale, eventTitle });
+    const to = sent.email.trim();
+    return screen(<>
+      <View style={{ gap: 8 }}>
+        <Text accessibilityRole="header" style={t.styles.text.display}>{words.requestSentTitle}</Text>
+        <Text style={t.styles.text.body}>{o?.replyTime ? fill(words.requestAnswerWithin, { time: o.replyTime, email: to }) : fill(words.requestAnswerBy, { email: to })}</Text>
+      </View>
+      <View style={[t.styles.card, { gap: 4 }]}>
+        <Text style={t.styles.text.label}>{words.requestYours}</Text>
+        {lines.map((line, i) => <Text key={i} style={i ? t.styles.text.muted : t.styles.text.heading}>{line}</Text>)}
+      </View>
+      <View style={{ gap: 4 }}>
+        <Text style={t.styles.text.muted}>{words.requestNotYet}</Text>
+        {!!officePhone && phoneLink(fill(words.requestSooner, { phone: officePhone }))}
+      </View>
+      <View style={{ gap: 10 }}>
+        <Button label={words.requestDone} onPress={() => { if (router.canGoBack()) router.back(); else startOver(); }} />
+        <Button label={words.requestAnother} variant="outline" onPress={startOver} />
+      </View>
+    </>);
+  }
+
+  // ---- the form ----
+  const radius = Math.min(t.radius, 10);
+  const field = { borderWidth: 1, borderColor: t.colors.line, borderRadius: radius, padding: 12, fontSize: 16, color: t.colors.ink, backgroundColor: t.colors.panel } as const;
+  const chip = (on: boolean) => ({ paddingVertical: 10, paddingHorizontal: 12, minHeight: 44, justifyContent: 'center' as const, borderRadius: radius, borderWidth: 1, borderColor: on ? t.colors.accent : t.colors.line, backgroundColor: on ? t.colors.soft : t.colors.panel });
+  const errorText = [t.styles.text.small, { color: t.colors.ink, fontWeight: '600' as const }];
+  const problem = (f: RequestField) => (problems[f] ? <Text style={errorText}>{requestProblemText(problems[f]!, words)}</Text> : null);
+  const label = (text: string, optional = false) => (
+    <Text style={t.styles.text.label}>{text}{optional ? <Text style={{ fontWeight: '400' }}> · {words.requestOptional}</Text> : null}</Text>
+  );
+  const text = (lbl: string, value: string, onChange: (v: string) => void, f: RequestField | null, x: { optional?: boolean; keyboard?: KeyboardTypeOptions; multiline?: boolean; auto?: 'name' | 'email' | 'tel'; placeholder?: string; onBlur?: () => void } = {}) => (
+    <View style={{ gap: 6 }}>
+      {label(lbl, x.optional)}
+      <TextInput value={value} onChangeText={onChange} onBlur={x.onBlur} keyboardType={x.keyboard} multiline={x.multiline} autoComplete={x.auto} placeholder={x.placeholder}
+        autoCapitalize={x.auto === 'email' ? 'none' : 'sentences'} autoCorrect={x.auto !== 'email'} placeholderTextColor={t.colors.muted}
+        accessibilityLabel={lbl} accessibilityHint={f && problems[f] ? requestProblemText(problems[f]!, words) : undefined}
+        style={[field, x.multiline && { minHeight: 96, textAlignVertical: 'top' }, !!f && !!problems[f] && { borderColor: t.colors.ink }]} />
+      {f && problem(f)}
+    </View>
+  );
+  const choices = <V extends string>(lbl: string, list: { value: V; label: string }[], isOn: (v: V) => boolean, toggle: (v: V) => void, many = false) => (
+    <View accessibilityRole={many ? undefined : 'radiogroup'} accessibilityLabel={lbl} style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+      {list.map((c) => (
+        <Pressable key={c.value} accessibilityRole={many ? 'checkbox' : 'radio'} accessibilityState={{ checked: isOn(c.value) }} onPress={() => toggle(c.value)} style={chip(isOn(c.value))}>
+          <Text style={[t.styles.text.body, isOn(c.value) && { fontWeight: '600' }]}>{c.label}</Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+  // times show back in the app's format once typed ("18:30" → "6:30 PM")
+  const tidy = (raw: string, set: (v: string) => void) => () => { const v = parseClock(raw); if (v) set(formatClock(v, locale)); };
+  const today = localDay(new Date().toISOString(), tz);
+  // the change picker: the site's public events, each with its next dates (the site's days)
+  const choosable = o?.events ?? [];
+  const chosen = choosable.find((e) => e.slug === event);
+  const showDay = (d: string) => formatEventDate({ start: `${d}T00:00:00.000Z`, allDay: true }, locale);
+
+  return screen(<>
+    <Text style={t.styles.text.muted}>{o?.notice || words.requestNotice}</Text>
+    <View accessibilityRole="radiogroup" style={{ flexDirection: 'row', borderWidth: 1, borderColor: t.colors.line, borderRadius: radius, overflow: 'hidden' }}>
+      {(['new', 'change'] as const).map((k, i) => (
+        <Pressable key={k} accessibilityRole="radio" accessibilityState={{ checked: kind === k }} onPress={() => { setKind(k); setTried(false); if (send.error) send.reset(); }}
+          style={{ flex: 1, minHeight: 44, paddingHorizontal: 8, alignItems: 'center', justifyContent: 'center', backgroundColor: kind === k ? t.colors.soft : t.colors.panel, borderLeftWidth: i ? 1 : 0, borderLeftColor: t.colors.line }}>
+          <Text style={[t.styles.text.body, { textAlign: 'center' }, kind === k && { fontWeight: '600' }]}>{k === 'new' ? words.requestNew : words.requestChange}</Text>
+        </Pressable>
+      ))}
+    </View>
+
+    {kind === 'new' ? (<>
+      {text(words.requestWhat, title, setTitle, 'title')}
+      {!!o?.types.length && (
+        <View style={{ gap: 6 }}>
+          {label(words.requestKind)}
+          {choices(words.requestKind, o.types.map((x) => ({ value: x.id, label: x.label })), (v) => v === type, (v) => setType(v === type ? '' : v))}
+          {problem('type')}
+        </View>
+      )}
+      <View style={{ gap: 6 }}>
+        {label(words.requestDate)}
+        <DayPicker value={date} onChange={setDate} min={today} max={`${Number(today.slice(0, 4)) + 2}${today.slice(4)}`} />
+      </View>
+      {/* no time picker in the template: typed times, read forgivingly ("6:30 pm", "18:30", "18h30") */}
+      <View style={{ flexDirection: 'row', gap: 12 }}>
+        <View style={{ flex: 1 }}>{text(words.requestStarts, starts, setStarts, 'start', { keyboard: 'numbers-and-punctuation', placeholder: formatClock('18:00', locale), onBlur: tidy(starts, setStarts) })}</View>
+        <View style={{ flex: 1 }}>{text(words.requestEnds, ends, setEnds, 'end', { keyboard: 'numbers-and-punctuation', placeholder: formatClock('20:00', locale), onBlur: tidy(ends, setEnds) })}</View>
+      </View>
+      <View style={{ gap: 6 }}>
+        {label(words.requestRepeats)}
+        {choices<Repeat>(words.requestRepeats, [{ value: 'once', label: words.requestOnce }, { value: 'weekly', label: words.requestWeekly }, { value: 'other', label: words.requestRepeatOther }], (v) => v === repeat, setRepeat)}
+        {repeat === 'other' && (
+          <TextInput value={repeatText} onChangeText={setRepeatText} placeholder={words.requestRepeatHint} accessibilityLabel={words.requestRepeatHint} placeholderTextColor={t.colors.muted}
+            style={[field, !!problems.repeat && { borderColor: t.colors.ink }]} />
+        )}
+        {problem('repeat')}
+      </View>
+      {!!o?.rooms.length && (
+        <View style={{ gap: 6 }}>
+          {label(words.requestRoom)}
+          {/* rooms, or Not sure (not both) */}
+          {choices(words.requestRoom, [...o.rooms.map((r) => ({ value: r.slug, label: r.name })), { value: UNSURE, label: words.requestNotSure }],
+            (v) => (v === UNSURE ? unsure : !unsure && rooms.includes(v)),
+            (v) => { if (v === UNSURE) { setUnsure(!unsure); return; } setUnsure(false); setRooms(rooms.includes(v) ? rooms.filter((x) => x !== v) : [...rooms, v]); }, true)}
+          {problem('room')}
+          {!!checked && checked === span && rooms.map((slug) => (
+            <RoomLine key={slug} room={slug} name={o.rooms.find((r) => r.slug === slug)?.name ?? slug} start={checked.split('|')[0]} end={checked.split('|')[1]} />
+          ))}
+        </View>
+      )}
+      <View style={{ maxWidth: 200 }}>{text(words.requestPeople, people, (v) => setPeople(v.replace(/\D/g, '')), 'people', { optional: true, keyboard: 'number-pad' })}</View>
+      {text(words.requestMessage, message, setMessage, null, { optional: true, multiline: true })}
+    </>) : (<>
+      <View style={{ gap: 6 }}>
+        {label(words.requestWhichEvent)}
+        {!choosable.length ? <Text style={t.styles.text.muted}>{words.requestNoEvents}</Text> : (
+          <View accessibilityRole="radiogroup" accessibilityLabel={words.requestPickEvent} style={[t.styles.card, { paddingVertical: 4, paddingHorizontal: 0 }]}>
+            {choosable.map((e, i) => (
+              <Pressable key={e.slug} accessibilityRole="radio" accessibilityState={{ checked: e.slug === event }} onPress={() => { setEvent(e.slug); setEventDate(''); }}
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 12, minHeight: 48, paddingHorizontal: 16, borderTopWidth: i ? 1 : 0, borderTopColor: t.colors.line, backgroundColor: e.slug === event ? t.colors.soft : undefined }}>
+                <Text style={[t.styles.text.body, { flex: 1 }, e.slug === event && { fontWeight: '600' }]}>{e.title}</Text>
+                {e.slug === event && <Text style={[t.styles.text.body, { color: t.colors.accent }]} importantForAccessibility="no" accessibilityElementsHidden>✓</Text>}
+              </Pressable>
+            ))}
+          </View>
+        )}
+        {problem('event')}
+      </View>
+      {!!chosen && (
+        <View style={{ gap: 6 }}>
+          {label(words.requestWhichDate)}
+          {choices(words.requestWhichDate, [{ value: '', label: words.requestEveryDate }, ...chosen.dates.slice(0, 12).map((d) => ({ value: d, label: showDay(d) }))], (v) => v === eventDate, setEventDate)}
+          {problem('date')}
+        </View>
+      )}
+      {text(words.requestWhatChange, change, setChange, 'what', { multiline: true })}
+    </>)}
+
+    <View style={{ gap: 12 }}>
+      <Text accessibilityRole="header" style={t.styles.text.heading}>{words.requestContact}</Text>
+      {text(words.requestName, name, setName, 'name', { auto: 'name' })}
+      {text(words.requestEmail, email, setEmail, 'email', { auto: 'email', keyboard: 'email-address' })}
+      {text(words.requestPhone, phone, setPhone, 'phone', { auto: 'tel', keyboard: 'phone-pad', optional: true })}
+      <Text style={t.styles.text.small}>
+        {words.requestContactWhy}
+        {!!site.legal.privacy && <> <Text accessibilityRole="link" style={[t.styles.text.small, { color: t.colors.accent, textDecorationLine: 'underline' }]} onPress={() => { Linking.openURL(site.legal.privacy!).catch(() => {}); }}>{words.requestPrivacy}</Text></>}
+      </Text>
+    </View>
+
+    {!!send.problem && !send.field && (
+      <View accessibilityRole="alert" style={{ backgroundColor: t.colors.soft, borderRadius: radius, padding: 12, gap: 4 }}>
+        <Text style={[t.styles.text.body, { fontWeight: '600' }]}>{requestProblemText(send.problem, words)}</Text>
+      </View>
+    )}
+    {invalid && <Text accessibilityRole="alert" style={errorText}>{words.requestCheck}</Text>}
+    <Button label={send.isPending ? words.sending : words.requestSend} disabled={send.isPending} onPress={submit} />
+  </>);
+}
+
+// "Hall looks free then." for one chosen room, over the first date's times (free or busy only, never what)
+function RoomLine({ room, name, start, end }: { room: string; name: string; start: string; end: string }) {
+  const t = useTheme();
+  const words = useStrings();
+  const free = useRoomFree({ room, start, end });
+  // nothing while it loads, or when the site can't say (an error, too many checks)
+  if (!free.data) return null;
+  return <Text style={t.styles.text.small}>{fill(free.data.free ? words.requestRoomFree : words.requestRoomTaken, { room: name })}</Text>;
+}

package/mobile-template/recipes/event-request/files/components/DayPicker.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { useLocale, useTheme } from '@acms-subir/native';
+
+// One month to pick a day from (YYYY-MM-DD), with no native date picker to
+// install: ‹ › change the month, and days before `min` or after `max` can't
+// be picked. Days are plain calendar days (the site's, for requests), so
+// everything here is UTC and never shifts with the phone's time zone.
+const pad = (n: number) => String(n).padStart(2, '0');
+const iso = (y: number, m: number, d: number) => new Date(Date.UTC(y, m - 1, d)).toISOString().slice(0, 10);
+
+export function DayPicker({ value, onChange, min, max }: { value: string; onChange: (day: string) => void; min: string; max?: string }) {
+  const t = useTheme();
+  const { locale } = useLocale();
+  const [month, setMonth] = useState(() => (value || min).slice(0, 7));
+  const [y, m] = month.split('-').map(Number);
+  const f = (o: Intl.DateTimeFormatOptions) => {
+    try { return new Intl.DateTimeFormat(locale, { ...o, timeZone: 'UTC' }); } catch { return new Intl.DateTimeFormat(undefined, { ...o, timeZone: 'UTC' }); }
+  };
+  const monthName = f({ month: 'long', year: 'numeric' });
+  const at = (n: number) => new Date(Date.UTC(y, m - 1 + n, 1));
+  const shift = (n: number) => setMonth(`${at(n).getUTCFullYear()}-${pad(at(n).getUTCMonth() + 1)}`);
+  const earlier = month > min.slice(0, 7), later = !max || month < max.slice(0, 7);
+  const length = new Date(Date.UTC(y, m, 0)).getUTCDate();
+  // weeks start on Sunday
+  const cells = [...Array<string | null>(at(0).getUTCDay()).fill(null), ...Array.from({ length }, (_, i) => iso(y, m, i + 1))];
+  const weekday = f({ weekday: 'short' });
+  const fullDay = f({ weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
+  const radius = Math.min(t.radius, 10);
+  const arrow = (n: number, on: boolean, glyph: string) => (
+    // read out as the month it goes to ("December 2026"), so it needs no words of its own
+    <Pressable accessibilityRole="button" accessibilityLabel={monthName.format(at(n))} accessibilityState={{ disabled: !on }} disabled={!on} onPress={() => shift(n)}
+      style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center', opacity: on ? 1 : 0.3 }}>
+      <Text style={[t.styles.text.heading, { color: t.colors.accent }]}>{glyph}</Text>
+    </Pressable>
+  );
+  return (
+    <View style={[t.styles.card, { padding: 8, gap: 4 }]}>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        {arrow(-1, earlier, '‹')}
+        <Text accessibilityRole="header" style={[t.styles.text.body, { flex: 1, textAlign: 'center', fontWeight: '600' }]}>{monthName.format(at(0))}</Text>
+        {arrow(1, later, '›')}
+      </View>
+      <View style={{ flexDirection: 'row' }} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+        {/* 2026-01-04 was a Sunday */}
+        {Array.from({ length: 7 }, (_, i) => (
+          <Text key={i} style={[t.styles.text.small, { width: `${100 / 7}%`, textAlign: 'center' }]}>{weekday.format(new Date(Date.UTC(2026, 0, 4 + i)))}</Text>
+        ))}
+      </View>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+        {cells.map((d, i) => {
+          if (!d) return <View key={`_${i}`} style={{ width: `${100 / 7}%`, height: 44 }} />;
+          const off = d < min || (!!max && d > max), on = d === value;
+          return (
+            <Pressable key={d} accessibilityRole="button" accessibilityLabel={fullDay.format(new Date(`${d}T00:00:00Z`))} accessibilityState={{ selected: on, disabled: off }}
+              disabled={off} onPress={() => onChange(d)} style={{ width: `${100 / 7}%`, height: 44, padding: 2 }}>
+              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', borderRadius: radius, backgroundColor: on ? t.colors.accent : undefined }}>
+                <Text style={[t.styles.text.body, { color: on ? t.colors.onAccent : off ? t.colors.line : t.colors.ink }, on && { fontWeight: '600' }]}>{Number(d.slice(8))}</Text>
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/mobile-template/recipes/event-request/files/components/RequestEventLink.tsx

@@ -0,0 +1,19 @@
+import { Pressable, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { Link } from 'expo-router';
+import { useStrings, useTheme } from '@acms-subir/native';
+
+// "Planning something? Request an event" for the end of the events list,
+// e.g. ListFooterComponent={<RequestEventLink />} in app/events/index.tsx.
+export function RequestEventLink({ style }: { style?: StyleProp<ViewStyle> }) {
+  const t = useTheme();
+  const words = useStrings();
+  return (
+    <Link href="/request" asChild>
+      <Pressable accessibilityRole="link" style={({ pressed }) => [{ minHeight: 44, paddingVertical: 16, justifyContent: 'center', opacity: pressed ? 0.7 : 1 }, style]}>
+        <Text style={[t.styles.text.muted, { textAlign: 'center' }]}>
+          {words.requestPlanning} <Text style={{ color: t.colors.accent, fontWeight: '600' }}>{words.requestEvent}</Text>
+        </Text>
+      </Pressable>
+    </Link>
+  );
+}

package/mobile-template/recipes/event-request/files/components/RequestEventRow.tsx

@@ -0,0 +1,20 @@
+import { Pressable, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { Link } from 'expo-router';
+import { useStrings, useTheme } from '@acms-subir/native';
+
+// The More tab's row that opens /request: "Request an event" ("Solicitar un
+// evento"). Always shown, even while the site isn't taking requests: the
+// screen then says so and gives the office phone. Hiding it would hide a
+// feature from App Review, so don't wrap it in a check.
+export function RequestEventRow({ style }: { style?: StyleProp<ViewStyle> }) {
+  const t = useTheme();
+  const words = useStrings();
+  return (
+    <Link href="/request" asChild>
+      <Pressable accessibilityRole="button" style={({ pressed }) => [{ flexDirection: 'row', alignItems: 'center', gap: 12, minHeight: 52, paddingVertical: 12, opacity: pressed ? 0.7 : 1 }, style]}>
+        <Text style={[t.styles.text.body, { flex: 1 }]}>{words.requestEvent}</Text>
+        <Text style={[t.styles.text.heading, { color: t.colors.muted }]} importantForAccessibility="no" accessibilityElementsHidden>›</Text>
+      </Pressable>
+    </Link>
+  );
+}

package/mobile-template/recipes/event-request/recipe.json

@@ -0,0 +1,21 @@
+{
+  "kind": "client",
+  "title": "Event requests",
+  "description": "Request an event without an account: something new (what, kind, date and times, repeats, rooms with a live \"looks free\" line, people) or a change to an event, then name, email and phone, and Request sent with the reply time. When the site isn't taking requests the screen still opens and says so, with the office phone. Includes a row for the More tab and a link for the end of the events list. Needs requests turned on for the site.",
+  "packages": [
+    "expo-crypto",
+    "expo-secure-store"
+  ],
+  "routes": [
+    "/request"
+  ],
+  "next": [
+    "Turn requests on for the site: acms({ requests: true }) in astro.config.mjs (needs the calendar), then restart or deploy. Set the notice, reply time, office phone, kinds and the rooms people may ask for in Admin → Calendar → Requests; staff answer requests there",
+    "Add the row to your More tab: import { RequestEventRow } from '../../components/RequestEventRow' in app/(tabs)/more.tsx (or '../components/RequestEventRow' from a screen in app/) and render <RequestEventRow /> in its list. Keep it there even while requests are closed: the screen says so and gives the office phone, and App Review looks for it",
+    "Optional, at the end of the events list: ListFooterComponent={<RequestEventLink />} in app/events/index.tsx (from '../../components/RequestEventLink')",
+    "Open the screen from site links: in onNavigate, send '/request' (or your acms({ requests: { path } }); '/es/request' in Spanish) to router.push('/request')",
+    "The live \"looks free\" line under the rooms needs bookings on the site (it uses GET /api/v1/rooms/free, free or busy only); without them the screen works the same, without that line",
+    "App Store Connect → App Review Information → Notes: \"Request an event: open the More tab and tap Request an event. No sign-in is needed. The screen asks for a name, an email address, an optional phone number and details or a message about the event (something new, or a change to an existing event). Staff review every request on the website before anything goes on the calendar, and answer by email. If you send a test request, please write App Review in the message so staff can decline it.\"",
+    "App Privacy (App Store Connect) and Data safety (Google Play) for what the screen sends: Contact Info → Name, Email Address, Phone Number (Play: Personal info → Name, Email address, Phone number) and User Content → Other User Content (Play: App activity → Other user-generated content). Purpose: App Functionality; linked to the person; not used for tracking; not shared; optional (people choose to send it). Name, email and phone also stay on the phone in secure storage for next time"
+  ]
+}

package/package.json

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

package/src/actions/index.ts

@@ -11,7 +11,7 @@ import { validateRequestSession } from '../lib/auth/request';
 import { accessFor } from '../lib/permissions/access';
 import { deniedMessage, type Permission } from '../lib/permissions/catalog';
 import { isStaffRole } from '../lib/roles';
-import { DocTranslations, LinksAvatarShape, LinksAvatarFit, LinksAvatarScale, LinkKind, parseConfig, slugify, widgetTypes, type WidgetType } from '../lib/schema';
+import { DocTranslations, LinksAvatarShape, LinksAvatarFit, LinksAvatarScale, LinkKind, SeriesSegment, parseConfig, slugify, widgetTypes, type WidgetType } from '../lib/schema';
 import { env } from '../lib/env';
 import { CONTENT, collectionUrl } from '../lib/content';
 import { invalidateRedirectCache } from '../middleware';
@@ -30,8 +30,9 @@ import { loadFeed } from '../lib/calendar/ics';
 import { NATIVE_ALL } from '../lib/calendar/render';
 import { collectViewEvents } from '../lib/calendar/data';
 import { loadBoard } from '../lib/calendar/board';
-import { cancelOccurrence, duplicateEvent, moveDateBy, moveSeries, quickCreate, restoreOccurrence, undoMove } from '../lib/calendar/schedule';
+import { cancelOccurrence, duplicateEvent, moveDateBy, moveFollowingBy, moveSeries, quickCreate, restoreOccurrence, undoMove } from '../lib/calendar/schedule';
 import { moveOccurrence, moveOccurrenceBack, upcomingDates } from '../lib/calendar/moves';
+import { changeFromDate, changeFromDefaults, revertFromDate, upcomingSegments } from '../lib/calendar/segments';
 import type { BusySlot } from '../lib/booking/holds';
 import { waitUntilFrom } from '../lib/webhooks';
 import { siteOrigin } from '../lib/seo';
@@ -1153,16 +1154,17 @@ export const server = {
     }),
     // Schedule: drag to another day (and, in the week view, another time:
     // `minutes` more). `occurrence` + mode 'one' moves a single date of a
-    // series (a moved date that keeps its RSVPs); otherwise the whole event
-    // moves. `warning`: what else takes its rooms at the new time.
+    // series (a moved date that keeps its RSVPs), mode 'following' that date
+    // and every one after it (a change from that date on); otherwise the
+    // whole event moves. `warning`: what else takes its rooms at the new time.
     move: defineAction({
-      input: z.object({ id: z.string(), days: z.number().int(), minutes: z.number().int().min(-1440).max(1440).default(0), mode: z.enum(['series', 'one']).default('series'), occurrence: z.string().max(20).default('') }),
+      input: z.object({ id: z.string(), days: z.number().int(), minutes: z.number().int().min(-1440).max(1440).default(0), mode: z.enum(['series', 'one', 'following']).default('series'), occurrence: z.string().max(20).default('') }),
       handler: async ({ id, days, minutes, mode, occurrence }, ctx) => {
         const who = actorOf(await requireCan(ctx, 'content.edit'));
         const repo = await getRepo(ctx.locals);
         try {
-          if (mode === 'one') {
-            const r = await moveDateBy(repo, who, id, occurrence, days * 1440 + minutes, await publishHooks(ctx));
+          if (mode === 'one' || mode === 'following') {
+            const r = await (mode === 'one' ? moveDateBy : moveFollowingBy)(repo, who, id, occurrence, days * 1440 + minutes, await publishHooks(ctx));
             return { id: r.event.id, undo: r.undo, warning: await clashWarning(repo, r.clashes) };
           }
           const r = await moveSeries(repo, id, days, await publishHooks(ctx), minutes);
@@ -1178,6 +1180,7 @@ export const server = {
           location: z.object({ name: z.string().max(300).default(''), address: z.string().max(500).default(''), url: z.string().max(2000).default('') }).partial().optional(),
         }).nullable() }),
         z.object({ kind: z.literal('split'), id: z.string(), seriesId: z.string(), occurrence: z.string().max(20) }),
+        z.object({ kind: z.literal('following'), id: z.string(), from: z.string().max(20), previous: z.array(SeriesSegment).max(50) }),
       ]),
       handler: async (undo, ctx) => {
         const who = actorOf(await requireCan(ctx, 'content.edit'));
@@ -1212,7 +1215,8 @@ export const server = {
       },
     }),
     // Event editor → Single dates: the next dates of a series (as saved), each
-    // moved, cancelled or as planned, and the rooms a date can move into
+    // moved, cancelled or as planned, the rooms a date can move into, and the
+    // changes from a date on still to come or in effect
     dates: defineAction({
       input: z.object({ id: z.string(), limit: z.number().int().min(1).max(52).default(12) }),
       handler: async ({ id, limit }, ctx) => {
@@ -1220,7 +1224,46 @@ export const server = {
         const repo = await getRepo(ctx.locals);
         const [e, settings, resources] = await Promise.all([repo.getEvent(id), repo.getSettings(), bookingsEnabled() ? repo.listResources() : Promise.resolve([])]);
         if (!e) throw new ActionError({ code: 'NOT_FOUND', message: 'Event not found.' });
-        return { allDay: e.allDay, roomIds: e.roomHold.resourceIds, dates: upcomingDates(e, settings, limit), rooms: resources.map((r) => ({ id: r.id, name: r.name })) };
+        return { allDay: e.allDay, roomIds: e.roomHold.resourceIds, dates: upcomingDates(e, settings, limit), rooms: resources.map((r) => ({ id: r.id, name: r.name })),
+          segments: upcomingSegments(e, settings, new Map(resources.map((r) => [r.id, r.name]))) };
+      },
+    }),
+    // …change the series from one of those dates on (new first date, times,
+    // repeat, rooms; the dates before it stay). `rrule` omitted: the rule in
+    // effect, on the new weekday. `warning`: what else takes the rooms then.
+    changeFromDate: defineAction({
+      input: z.object({ id: z.string(), key: z.string().max(20), start: z.string().max(20), end: z.string().max(20).default(''), rrule: z.string().max(500).optional(),
+        roomIds: z.array(z.string()).max(50).optional(), note: z.string().max(500).default('') }),
+      handler: async ({ id, key, start, end, rrule, roomIds, note }, ctx) => {
+        const who = actorOf(await requireCan(ctx, 'content.edit'));
+        const repo = await getRepo(ctx.locals);
+        try {
+          const r = await changeFromDate(repo, who, id, key, { start, end: end || undefined, rrule, roomIds, note }, await publishHooks(ctx));
+          return { id, changed: r.changed, rsvps: r.rsvps, dropped: r.dropped.length, warning: await clashWarning(repo, r.clashes) };
+        } catch (e) { asActionError(e); }
+      },
+    }),
+    // …what that form starts with for a date (its times, the rule in effect there, its rooms)
+    fromDateDefaults: defineAction({
+      input: z.object({ id: z.string(), key: z.string().max(20) }),
+      handler: async ({ id, key }, ctx) => {
+        await requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        const d = await changeFromDefaults(repo, id, key);
+        if (!d) throw new ActionError({ code: 'BAD_REQUEST', message: 'That date isn’t part of this event.' });
+        return d;
+      },
+    }),
+    // …and undo one: the rule before it carries on
+    revertFromDate: defineAction({
+      input: z.object({ id: z.string(), from: z.string().max(20) }),
+      handler: async ({ id, from }, ctx) => {
+        const who = actorOf(await requireCan(ctx, 'content.edit'));
+        const repo = await getRepo(ctx.locals);
+        try {
+          const r = await revertFromDate(repo, who, id, from, await publishHooks(ctx));
+          return { id, changed: r.changed, rsvps: r.rsvps };
+        } catch (e) { asActionError(e); }
       },
     }),
     // Schedule: cancel (or restore) one date of a repeating event, at once

package/src/components/EventPage.astro

@@ -6,8 +6,8 @@
 // the page's language (lib/calendar/event-words.ts, also in the theme SDK).
 import type { CalEvent, Calendar, Settings } from '../lib/schema';
 import { CALENDAR, eventIcsUrl, eventUrl, calendarPageUrl } from '../lib/calendar/config';
-import { addToCalendarLinks, eventTimeZone, formatOccurrence, safeColor, type Occurrence } from '../lib/calendar/events';
-import { describeRepeat } from '../lib/calendar/rrule';
+import { addToCalendarLinks, describeSeries, eventTimeZone, formatOccurrence, safeColor, type Occurrence } from '../lib/calendar/events';
+
 import { eventCardHtml, safeHref } from '../lib/calendar/cards';
 import { siteLang, siteLocale } from '../lib/dates';
 import { I18N, localePath, requestLocale } from '../lib/i18n';
@@ -36,7 +36,7 @@ const { event: e, occurrence: o, settings, calendars, html, upcoming, origin, pr
 // the whole event, or just this date of a repeating one
 const cancelled = e.cancelled || Boolean(o.cancelled);
 // a moved date may be at its own place
-const where = o.moved?.location ?? e.location;
+const where = o.location ?? e.location;
 const image = eventImage(e, settings);
 const tz = eventTimeZone(e, settings);
 const locale = siteLocale(settings);
@@ -49,10 +49,11 @@ const ew = eventStrings(lang);
 const here = (path: string) => localePath(path, reqLocale);
 const pageUrl = origin + here(eventUrl(e.slug));
 const links = addToCalendarLinks(e, o, { pageUrl, icsUrl: eventIcsUrl(e.slug), tz });
-const repeats = describeRepeat(e.rrule, e.start, (ymd) => {
+// the rule in effect, and a change from a date on still to come (CalEvent.segments)
+const repeats = describeSeries(e, settings, Date.now(), lang, (ymd) => {
   const [y, m, d] = ymd.split('-').map(Number);
   return new Date(Date.UTC(y, m - 1, d)).toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
-}, lang);
+}, locale);
 const ctaHref = safeHref(e.cta.href);
 const mapHref = where.url
   ? safeHref(where.url)

package/src/components/MobileApp.tsx

@@ -38,7 +38,7 @@ function ago(ms: number, now: number) {
     : d.toLocaleDateString([], { month: 'short', day: 'numeric', ...(d.getFullYear() !== new Date(now).getFullYear() ? { year: 'numeric' } : {}) });
 }
 
-const SOURCE: Record<PushNotification['source'], string> = { manual: 'Sent by', post: 'New post', event: 'New event', soon: 'Starting soon', live: 'We’re live', announcement: 'Announcement by', change: 'Event changed', test: 'Test by', form: 'New form response' };
+const SOURCE: Record<PushNotification['source'], string> = { manual: 'Sent by', post: 'New post', event: 'New event', soon: 'Starting soon', live: 'We’re live', announcement: 'Announcement by', change: 'Event changed', test: 'Test by', form: 'New form response', request: 'New event request' };
 
 export default function MobileApp() {
   const [state, setState] = useState<AdminPushState | null>(null);
@@ -462,7 +462,7 @@ function DeliveryLog({ log, topicLabel }: { log: PushNotification[]; topicLabel:
                     {n.body && <div className="ma-body">{n.body}</div>}
                     {n.url && <div className="t-sub ma-url">{n.url}</div>}
                   </td>
-                  <td data-l="Audience" className="ma-aud">{n.source === 'test' ? 'Their test phones' : n.source === 'form' ? 'Staff on the form’s alert list' : n.topics.map(topicLabel).join(', ')}</td>
+                  <td data-l="Audience" className="ma-aud">{n.source === 'test' ? 'Their test phones' : n.source === 'form' ? 'Staff on the form’s alert list' : n.source === 'request' ? 'Staff on the requests alert list' : n.topics.map(topicLabel).join(', ')}</td>
                   <td data-l="From">{SOURCE[n.source]}{(n.source === 'manual' || n.source === 'test') && n.author ? ` ${n.author}` : n.source === 'manual' || n.source === 'test' ? ' an owner' : ''}</td>
                   <td data-l="Delivered" className="num ma-result">
                     {n.status === 'sending' ? <span className="ma-st" data-tone="info">Sending…</span>