@acms-subir/core 0.3.37 → 0.3.38

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @acms-subir/core
 
+## 0.3.38
+
+### Patch Changes
+
+- 8d85520: `GET /api/v1/site?locale=es` returns the menu the way the `/es` header shows it: links to the Spanish pages, and the automatic menu's own words translated ("Inicio", "Enlaces"). Labels you wrote in Navigation stay as written. Events in the app API carry `notify.changes`, the push topics that hear when the event's date, time or place changes (Admin → Mobile app → When an event changes), or `[]`, so an app only promises "we'll let you know if it changes" when it's true. The RSVP panel recipe takes `children`, shown under the person's RSVP.
+- 7b71457: Event pages now follow the page's language, in English, Spanish, French, German and Portuguese (other languages stay in English). On `/es` event pages, and on a site whose main language is Spanish, a cancelled date said "Cancelled on … Other dates go ahead as usual." in English; now it says "Cancelado el domingo, 25 de octubre de 2026. Las demás fechas siguen como siempre.", so the "Cancelado el …" push opens a page that matches it. The same goes for a cancelled event, the "Cancelado" flag on event cards and in the calendar's pop-up, "Todo el día", the repeat line ("Todos los domingos", "El primer domingo de cada mes", "Cada 2 semanas, los lunes, 6 veces"), Agregar al calendario, Descargar .ics, Compartir and Enlace copiado, Más eventos, Ver el calendario completo, the map's labels and "Mostrando el …". Links on a `/es` event page (more events, the calendar, sharing) stay in Spanish. Theme event templates can use the same words with `eventStrings` and `describeRepeat` from `@acms-subir/core/theme`.
+
+  Booking and RSVP emails now speak the language the person used: the page's on the website (RSVPs from `/es` event pages, and bookings from `/es/book/…`, whose pages stay in English), the app's `locale` on `POST /api/v1/bookings`, and the site's main language for bookings staff add. The subject, message, details, dates and button are in that language, RSVPs show the event's translated title and place, and every link (the booking's own page, the calendar file) keeps it, such as `/es/book/manage/…`. Spanish emails say _usted_, like the privacy notice. In the app API, `manageUrl` (and the event's `url` from `GET /api/v1/bookings/manage`) points to the page in that language too. Staff notifications stay in the main language. Older bookings, and backups made before this release, use the main language. On a site whose main language isn't English, booking emails without a language (and staff notifications) now come in that language instead of English. Migration 60 adds `bookings.locale` (default `''`, the main language).
+
+  A room booking's own page (`/book/manage/…`, the page booking emails link to) now follows the page's language too, like an RSVP's: "Tu reservación está confirmada", Cambiar horario, Cancelar reservación and so on. Opened without `/es`, it shows the main language.
+
 ## 0.3.37
 
 ### Patch Changes

package/cli/migrations.generated.mjs

@@ -1111,6 +1111,11 @@ var MIGRATIONS = [
   { version: 59, statements: [
     `ALTER TABLE push_queue ADD COLUMN payload TEXT`,
     `ALTER TABLE push_queue ADD COLUMN due_at INTEGER`
+  ] },
+  // the language a booking or RSVP was made in (Booking.locale), so its
+  // emails and links follow it; '' = the main language, so older rows need no backfill
+  { version: 60, statements: [
+    `ALTER TABLE bookings ADD COLUMN locale TEXT NOT NULL DEFAULT ''`
   ] }
 ];
 var CURRENT_CONTENT_VERSION_COLUMNS = {

package/docs/theme-authoring.md

@@ -32,7 +32,7 @@ const { page, posts } = Astro.props;
 {posts.map(post => <PostCard href={collectionUrl(post.collection, post.slug)} title={post.title} excerpt={post.excerpt} />)}
 ```
 
-Public types: ChromeProps (site), HomeProps (settings, page, posts, tags), PageProps (settings, page, html), PostProps (settings, post, html, authors, related), EventProps (settings, event, occurrence, calendars, html, upcoming, origin, preview, rsvp), SectionProps (settings, page, variant, data). Public components: PostCard with card/row/feature variants, Pager with base/page/count, TagLabel with name/href/accent. Helpers include collectionUrl, postUrl, postsIndexUrl, tagUrl, formatDate, slugify, authorSlug, localeFromPath, localeHomeUrl and CONTENT. Use collectionUrl for non-default collections; postUrl is the built-in posts alias.
+Public types: ChromeProps (site), HomeProps (settings, page, posts, tags), PageProps (settings, page, html), PostProps (settings, post, html, authors, related), EventProps (settings, event, occurrence, calendars, html, upcoming, origin, preview, rsvp), SectionProps (settings, page, variant, data). Public components: PostCard with card/row/feature variants, Pager with base/page/count, TagLabel with name/href/accent. Helpers include collectionUrl, postUrl, postsIndexUrl, tagUrl, formatDate, slugify, authorSlug, localeFromPath, localeHomeUrl and CONTENT. For an event template, `eventStrings(lang)` gives the built-in event page's words (Cancelled, Add to calendar, Share, …) and `describeRepeat(event.rrule, event.start, formatDate?, lang)` its repeat line ("Weekly on Sunday", "Todos los domingos"), in English, Spanish, French, German or Portuguese, otherwise English. Use collectionUrl for non-default collections; postUrl is the built-in posts alias.
 
 ### Upcoming events in coded templates
 

package/mobile-template/recipes/events/files/components/RsvpPanel.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, useEffect, useState, type ReactNode } from 'react';
 import { ActivityIndicator, Platform, Pressable, Switch, Text, TextInput, View, type KeyboardTypeOptions } from 'react-native';
 import * as Crypto from 'expo-crypto';
 import * as SecureStore from 'expo-secure-store';
@@ -37,7 +37,9 @@ const withOther = (f: FormField, value: string | string[] | undefined, other: st
 // a count in bold inside its words ("{count} going")
 const bold = (template: string, n: string) => template.split('{count}').map((part, i) => (i ? <Fragment key={i}><Text style={{ fontWeight: '700' }}>{n}</Text>{part}</Fragment> : part));
 
-export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
+// children: shown under the person's RSVP (not a declined one), e.g. an offer
+// to get notified if the date, time or place changes
+export function RsvpPanel({ slug, start, children }: { slug: string; start: string; children?: ReactNode }) {
   const t = useTheme();
   const words = useStrings();
   const { locale } = useLocale();
@@ -113,7 +115,7 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     const who = mine?.booking.email ?? made!.email;
     const thanks = mine ? mine.confirmation : made!.formResponse?.definition.confirmation || null;
     const canCancel = !!stored && changes && (mine ? mine.can.cancel : false);
-    return (
+    return (<>
       <View style={[t.styles.card, { gap: 8 }]}>
         <Text accessibilityRole="header" style={t.styles.text.heading}>{!made ? words.yourRsvp : state === 'confirmed' ? words.confirmed : words.requestSent}</Text>
         <Text style={[t.styles.text.label, { color: t.colors.ink }]}>
@@ -136,7 +138,8 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
         {cancel.error && <Text style={errorText}>{isAcmsError(cancel.error) && cancel.error.status === 0 ? words.checkConnection : cancel.error.message}</Text>}
         {!canCancel && state !== 'declined' && <Text style={t.styles.text.small}>{words.changeByEmail}</Text>}
       </View>
-    );
+      {state !== 'declined' && children}
+    </>);
   }
 
   if (s.reason === 'disabled') return null;

package/mobile-template/recipes/rsvp/files/components/RsvpPanel.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, useEffect, useState, type ReactNode } from 'react';
 import { ActivityIndicator, Platform, Pressable, Switch, Text, TextInput, View, type KeyboardTypeOptions } from 'react-native';
 import * as Crypto from 'expo-crypto';
 import * as SecureStore from 'expo-secure-store';
@@ -37,7 +37,9 @@ const withOther = (f: FormField, value: string | string[] | undefined, other: st
 // a count in bold inside its words ("{count} going")
 const bold = (template: string, n: string) => template.split('{count}').map((part, i) => (i ? <Fragment key={i}><Text style={{ fontWeight: '700' }}>{n}</Text>{part}</Fragment> : part));
 
-export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
+// children: shown under the person's RSVP (not a declined one), e.g. an offer
+// to get notified if the date, time or place changes
+export function RsvpPanel({ slug, start, children }: { slug: string; start: string; children?: ReactNode }) {
   const t = useTheme();
   const words = useStrings();
   const { locale } = useLocale();
@@ -113,7 +115,7 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
     const who = mine?.booking.email ?? made!.email;
     const thanks = mine ? mine.confirmation : made!.formResponse?.definition.confirmation || null;
     const canCancel = !!stored && changes && (mine ? mine.can.cancel : false);
-    return (
+    return (<>
       <View style={[t.styles.card, { gap: 8 }]}>
         <Text accessibilityRole="header" style={t.styles.text.heading}>{!made ? words.yourRsvp : state === 'confirmed' ? words.confirmed : words.requestSent}</Text>
         <Text style={[t.styles.text.label, { color: t.colors.ink }]}>
@@ -136,7 +138,8 @@ export function RsvpPanel({ slug, start }: { slug: string; start: string }) {
         {cancel.error && <Text style={errorText}>{isAcmsError(cancel.error) && cancel.error.status === 0 ? words.checkConnection : cancel.error.message}</Text>}
         {!canCancel && state !== 'declined' && <Text style={t.styles.text.small}>{words.changeByEmail}</Text>}
       </View>
-    );
+      {state !== 'declined' && children}
+    </>);
   }
 
   if (s.reason === 'disabled') return null;

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

@@ -10,6 +10,7 @@
   "next": [
     "Mount it on your event screen where the date is known: <RsvpPanel slug={occurrence.event.slug} start={occurrence.start} /> from '../../components/RsvpPanel', with start exactly as useEvents returns it (the UTC ISO string, e.g. pass o.start through router params), and only when occurrence.event.rsvp?.enabled",
     "The screen should scroll and avoid the keyboard: wrap it in <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}> with <ScrollView keyboardShouldPersistTaps=\"handled\">",
-    "RSVPs need only the calendar (useSite().data.features.rsvp). Each RSVP's private manage token stays in expo-secure-store (never a URL or log): the panel shows the person's RSVP and lets them cancel it; the confirmation email's link works too"
+    "RSVPs need only the calendar (useSite().data.features.rsvp). Each RSVP's private manage token stays in expo-secure-store (never a URL or log): the panel shows the person's RSVP and lets them cancel it; the confirmation email's link works too",
+    "Anything you pass as children shows under the person's RSVP (not a declined one), e.g. an offer to get notified if the date, time or place changes: <RsvpPanel slug={…} start={…}><MyOffer /></RsvpPanel>. With push on, occurrence.event.notify.changes lists the topics that hear about changes ([] = none)"
   ]
 }

package/package.json

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

package/src/components/EventPage.astro

@@ -2,15 +2,18 @@
 // The built-in event page (feature image, date block, place, button, add to
 // calendar, share, related events). Themes replace it with
 // templates/event.astro, which receives the same props. Every element
-// carries a stable .pc-ev-* class for CSS overrides.
+// carries a stable .pc-ev-* class for CSS overrides. Built-in words follow
+// 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 { eventCardHtml, safeHref } from '../lib/calendar/cards';
 import { siteLang, siteLocale } from '../lib/dates';
-import { I18N, requestLocale } from '../lib/i18n';
+import { I18N, localePath, requestLocale } from '../lib/i18n';
 import { aroundCount, rsvpStrings } from '../lib/calendar/rsvp-words';
+import { eventStrings } from '../lib/calendar/event-words';
+import { fill } from '../lib/live/words';
 import { eventImage } from '../lib/calendar/images';
 import { directionsUrl, mapAttribution, MAP_HEIGHT, MAP_WIDTH } from '../lib/maps/service';
 
@@ -33,12 +36,18 @@ const image = eventImage(e, settings);
 const tz = eventTimeZone(e, settings);
 const locale = siteLocale(settings);
 const f = formatOccurrence(o, tz, locale);
-const pageUrl = origin + eventUrl(e.slug);
+// the page's language, as the layout's: its built-in words, and links that
+// keep the visitor in it (/es/events/…)
+const reqLocale = I18N.enabled ? requestLocale(Astro.url, Astro.locals) : '';
+const lang = reqLocale || siteLang(settings);
+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) => {
   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);
 const ctaHref = safeHref(e.cta.href);
 const mapHref = e.location.url
   ? safeHref(e.location.url)
@@ -50,7 +59,9 @@ const loc = e.location;
 const showMap = loc.showMap !== false && Boolean(loc.mapImage) && typeof loc.lat === 'number' && typeof loc.lng === 'number';
 const directions = showMap ? safeHref(directionsUrl(loc)) : '';
 const mapCredit = showMap ? mapAttribution(loc.mapImage) : '';
-const mapLabel = loc.name || loc.address || 'the location';
+const place = loc.name || loc.address;
+const directionsLabel = place ? fill(ew.directionsTo, { place }) : ew.directionsHere;
+const mapAlt = place ? fill(ew.mapOf, { place }) : ew.mapHere;
 const fieldRows = CALENDAR.eventFields.filter((fd) => !fd.private && e.fields[fd.key]).map((fd) => ({ label: fd.label, value: e.fields[fd.key], type: fd.type }));
 const visibleTags = e.tags.filter((t) => !t.startsWith('#'));
 const I = {
@@ -63,10 +74,13 @@ const I = {
   video: 'M3 7h12v10H3zM15 10l6-3v10l-6-3',
 };
 const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.test(e.location.url);
-// the RSVP block speaks the page's language, as the layout does
-const w = rsvpStrings((I18N.enabled ? requestLocale(Astro.url, Astro.locals) : '') || siteLang(settings));
+// the RSVP block speaks the page's language too
+const w = rsvpStrings(lang);
 const going = rsvp ? aroundCount(rsvp.going, w.personGoing, w.peopleGoing) : ['', ''];
 const left = rsvp && rsvp.left !== null ? aroundCount(rsvp.left, w.spotLeft, w.spotsLeft) : ['', ''];
+const dateCancelled = fill(ew.dateCancelled, { date: f.date });
+const showing = fill(ew.showing, { date: f.date });
+const moreCards = upcoming.map((u) => eventCardHtml(u, settings, { showImage: true, href: here(eventUrl(u.event.slug)) })).join('');
 ---
 
 <article class={`pc-ev-page${cancelled ? ' is-cancelled' : ''}`}>
@@ -79,19 +93,19 @@ const left = rsvp && rsvp.left !== null ? aroundCount(rsvp.left, w.spotLeft, w.s
       {(calendars.length > 0 || visibleTags.length > 0) && (
         <div class="pc-ev-chips">
           {calendars.map((c) => (
-            <a class="pc-ev-chip" href={calendarPageUrl(c.slug)}><i style={`background:${safeColor(c.color)}`} aria-hidden="true" />{c.name}</a>
+            <a class="pc-ev-chip" href={here(calendarPageUrl(c.slug))}><i style={`background:${safeColor(c.color)}`} aria-hidden="true" />{c.name}</a>
           ))}
           {visibleTags.map((t) => <span class="pc-ev-chip is-tag">{t}</span>)}
         </div>
       )}
       <h1 class="pc-ev-title">{e.title}</h1>
-      {e.cancelled && <p class="pc-ev-cancelled"><b>This event is cancelled.</b> It stays listed so nobody is left wondering.</p>}
-      {!e.cancelled && cancelled && <p class="pc-ev-cancelled"><b>Cancelled on {f.date}.</b> Other dates go ahead as usual.</p>}
+      {e.cancelled && <p class="pc-ev-cancelled"><b>{ew.eventCancelled}</b> {ew.eventCancelledNote}</p>}
+      {!e.cancelled && cancelled && <p class="pc-ev-cancelled"><b>{dateCancelled}</b> {ew.dateCancelledNote}</p>}
       {e.excerpt && <p class="pc-ev-lede">{e.excerpt}</p>}
       <div class="pc-ev-body post-content" set:html={html} />
     </div>
 
-    <aside class="pc-ev-side" aria-label="Event details">
+    <aside class="pc-ev-side" aria-label={ew.details}>
       <div class="pc-ev-date">
         <span class="pc-ev-tile" aria-hidden="true"><b>{f.month}</b><span>{f.day}</span></span>
         <div>
@@ -107,7 +121,7 @@ const left = rsvp && rsvp.left !== null ? aroundCount(rsvp.left, w.spotLeft, w.s
             {(e.location.address || mapHref) && (
               <span>
                 {e.location.address}
-                {mapHref && <>{e.location.address && ' · '}<a href={mapHref} target="_blank" rel="noopener">{online ? 'Join online' : 'Map'}</a></>}
+                {mapHref && <>{e.location.address && ' · '}<a href={mapHref} target="_blank" rel="noopener">{online ? ew.joinOnline : ew.map}</a></>}
               </span>
             )}
           </div>
@@ -115,9 +129,9 @@ const left = rsvp && rsvp.left !== null ? aroundCount(rsvp.left, w.spotLeft, w.s
       )}
       {showMap && (
         <figure class="pc-ev-map">
-          <a href={directions || undefined} target="_blank" rel="noopener" aria-label={`Directions to ${mapLabel}`}>
-            <img class:list={['pc-ev-map-img', { 'is-light': Boolean(loc.mapImageDark) }]} src={loc.mapImage} alt={`Map of ${mapLabel}`} width={MAP_WIDTH} height={MAP_HEIGHT} loading="lazy" decoding="async" />
-            {loc.mapImageDark && <img class="pc-ev-map-img is-dark" src={loc.mapImageDark} alt={`Map of ${mapLabel}`} width={MAP_WIDTH} height={MAP_HEIGHT} loading="lazy" decoding="async" />}
+          <a href={directions || undefined} target="_blank" rel="noopener" aria-label={directionsLabel}>
+            <img class:list={['pc-ev-map-img', { 'is-light': Boolean(loc.mapImageDark) }]} src={loc.mapImage} alt={mapAlt} width={MAP_WIDTH} height={MAP_HEIGHT} loading="lazy" decoding="async" />
+            {loc.mapImageDark && <img class="pc-ev-map-img is-dark" src={loc.mapImageDark} alt={mapAlt} width={MAP_WIDTH} height={MAP_HEIGHT} loading="lazy" decoding="async" />}
           </a>
           {mapCredit && <figcaption class="pc-ev-map-credit">{mapCredit}</figcaption>}
         </figure>
@@ -125,7 +139,7 @@ const left = rsvp && rsvp.left !== null ? aroundCount(rsvp.left, w.spotLeft, w.s
       {repeats && (
         <div class="pc-ev-fact">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.repeat} /></svg>
-          <div><b>{repeats}</b><span>Showing {f.date}</span></div>
+          <div><b>{repeats}</b><span>{showing}</span></div>
         </div>
       )}
       {fieldRows.map((r) => (
@@ -164,33 +178,33 @@ const left = rsvp && rsvp.left !== null ? aroundCount(rsvp.left, w.spotLeft, w.s
       <details class="pc-ev-add">
         <summary>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.cal} /></svg>
-          Add to calendar
+          {ew.addToCalendar}
         </summary>
         <div class="pc-ev-add-menu">
           <a href={links.google} target="_blank" rel="noopener">Google Calendar</a>
           <a href={links.ics}>Apple Calendar</a>
           <a href={links.outlook} target="_blank" rel="noopener">Outlook</a>
-          <a href={links.ics} download={`${e.slug}.ics`}>Download .ics</a>
+          <a href={links.ics} download={`${e.slug}.ics`}>{ew.downloadIcs}</a>
         </div>
       </details>
-      <button type="button" class="pc-ev-share" data-url={pageUrl} data-title={e.title}>
+      <button type="button" class="pc-ev-share" data-url={pageUrl} data-title={e.title} data-share={ew.share} data-copied={ew.linkCopied}>
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.share} /></svg>
-        <span>Share</span>
+        <span>{ew.share}</span>
       </button>
     </aside>
   </div>
 
   {upcoming.length > 0 && (
     <section class="pc-ev-more">
-      <h2>More events</h2>
-      <div class="pc-ev-cards" data-layout="grid" set:html={upcoming.map((u) => eventCardHtml(u, settings, { showImage: true })).join('')} />
-      <a class="pc-ev-all" href={CALENDAR.base}>See the full calendar →</a>
+      <h2>{ew.moreEvents}</h2>
+      <div class="pc-ev-cards" data-layout="grid" set:html={moreCards} />
+      <a class="pc-ev-all" href={here(CALENDAR.base)}>{ew.fullCalendar}</a>
     </section>
   )}
 </article>
 
 <script>
-  // share sheet where available, else copy the link
+  // share sheet where available, else copy the link (words from the page's language)
   document.querySelectorAll<HTMLButtonElement>('.pc-ev-share').forEach((b) => b.addEventListener('click', async () => {
     const url = b.dataset.url ?? location.href;
     if (navigator.share) {
@@ -198,7 +212,7 @@ const left = rsvp && rsvp.left !== null ? aroundCount(rsvp.left, w.spotLeft, w.s
     }
     await navigator.clipboard.writeText(url);
     const label = b.querySelector('span');
-    if (label) { label.textContent = 'Link copied'; setTimeout(() => (label.textContent = 'Share'), 1400); }
+    if (label) { label.textContent = b.dataset.copied ?? 'Link copied'; setTimeout(() => (label.textContent = b.dataset.share ?? 'Share'), 1400); }
   }));
   // one open menu; outside click closes
   document.addEventListener('click', (ev) => {

package/src/lib/booking/emails.ts

@@ -1,20 +1,43 @@
 // Booking emails: plain, readable HTML (inline styles, no images) plus a
 // text part. Confirmed bookings carry an .ics so one tap adds them to the
-// booker's calendar.
+// booker's calendar. Guest emails speak the language the booking was made
+// in (Booking.locale, words in email/booking-words.ts) and link to its pages
+// in it; staff emails speak the site's main language.
 import type { Booking, BookingLink, Resource, Settings } from '../schema';
-import { siteLocale } from '../dates';
+import { siteLang, siteLocale } from '../dates';
 import { escapeText, foldLine } from '../calendar/ics-write';
+import { eventStrings } from '../calendar/event-words';
+import { manageUrl } from '../calendar/config';
+import { I18N, localePath } from '../i18n';
+import { isExtraLocale } from '../translations';
+import { fill } from '../live/words';
+import { bookingStrings, mailCopy, type BookingStrings } from '../email/booking-words';
 import type { Mail } from '../email';
 
 const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 
+/**
+ * The language a booking speaks: its own (an extra site locale it was made
+ * in, while the site still has it), else the main language. `settings`
+ * carries it for dates, keeping the site's region when it's the same language.
+ */
+export function bookingLanguage(b: Pick<Booking, 'locale'>, settings: Settings): { locale: string; lang: string; settings: Settings } {
+  const locale = isExtraLocale(b.locale) ? b.locale : '';
+  const lang = locale || (I18N.enabled && I18N.defaultLocale) || siteLang(settings);
+  return { locale, lang, settings: locale && locale.split('-')[0] !== siteLang(settings) ? { ...settings, locale } : settings };
+}
+
+/** the booking's own page, in its language: /es/book/manage/<token> */
+export const bookingManagePath = (b: Pick<Booking, 'locale' | 'manageToken'>) =>
+  localePath(manageUrl(b.manageToken), isExtraLocale(b.locale) ? b.locale : '');
+
 export function whenText(b: Pick<Booking, 'start' | 'end'>, tz: string, settings: Settings, allDayish = false): string {
   const locale = siteLocale(settings);
   const f = (o: Intl.DateTimeFormatOptions) => new Intl.DateTimeFormat(locale, { ...o, timeZone: tz });
   if (allDayish) {
     const last = b.end - 1;
     const d = f({ weekday: 'short', month: 'short', day: 'numeric' });
-    return d.format(b.start) === d.format(last) ? `${f({ weekday: 'long', month: 'long', day: 'numeric' }).format(b.start)} · all day` : `${d.format(b.start)} – ${d.format(last)}`;
+    return d.format(b.start) === d.format(last) ? `${f({ weekday: 'long', month: 'long', day: 'numeric' }).format(b.start)} · ${eventStrings(locale).allDay.toLowerCase()}` : `${d.format(b.start)} – ${d.format(last)}`;
   }
   const zone = f({ hour: 'numeric', timeZoneName: 'short' }).formatToParts(b.start).find((p) => p.type === 'timeZoneName')?.value ?? '';
   return `${f({ weekday: 'long', month: 'long', day: 'numeric' }).format(b.start)} · ${f({ hour: 'numeric', minute: '2-digit' }).format(b.start)} – ${f({ hour: 'numeric', minute: '2-digit' }).format(b.end)} ${zone}`.trim();
@@ -22,14 +45,15 @@ export function whenText(b: Pick<Booking, 'start' | 'end'>, tz: string, settings
 
 const utc = (ms: number) => new Date(ms).toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
 
-export function bookingIcs(b: Booking, title: string, location: string, url: string, host: string, method: 'REQUEST' | 'CANCEL' = 'REQUEST', options: { organizer?: string; allDay?: boolean } = {}): string {
+// lang: the description's language ("Manage: <url>")
+export function bookingIcs(b: Booking, title: string, location: string, url: string, host: string, method: 'REQUEST' | 'CANCEL' = 'REQUEST', options: { organizer?: string; allDay?: boolean; lang?: string } = {}): string {
   const day = (ms: number) => new Intl.DateTimeFormat('en-CA', { timeZone: b.timezone || 'UTC', year: 'numeric', month: '2-digit', day: '2-digit' }).format(ms).replaceAll('-', '');
   const actualMethod = method === 'CANCEL' ? 'CANCEL' : options.organizer ? 'REQUEST' : 'PUBLISH';
   const lines = [
     'BEGIN:VCALENDAR', 'VERSION:2.0', 'PRODID:-//acms-subir//Bookings//EN', `METHOD:${actualMethod}`,
     'BEGIN:VEVENT', `UID:booking-${b.id}@acms.invalid`, `DTSTAMP:${utc(Date.now())}`, ...(options.allDay ? [`DTSTART;VALUE=DATE:${day(b.start)}`, `DTEND;VALUE=DATE:${day(b.end)}`] : [`DTSTART:${utc(b.start)}`, `DTEND:${utc(b.end)}`]),
     ...(options.organizer ? [`ORGANIZER:mailto:${options.organizer}`, `ATTENDEE;RSVP=FALSE:mailto:${b.email}`] : []),
-    `SUMMARY:${escapeText(title)}`, ...(location ? [`LOCATION:${escapeText(location)}`] : []), `DESCRIPTION:${escapeText(`Manage: ${url}`)}`,
+    `SUMMARY:${escapeText(title)}`, ...(location ? [`LOCATION:${escapeText(location)}`] : []), `DESCRIPTION:${escapeText(fill(bookingStrings(options.lang).icsManage, { url }))}`,
     `URL:${url}`, `STATUS:${method === 'CANCEL' ? 'CANCELLED' : 'CONFIRMED'}`, `SEQUENCE:${b.notificationVersion ?? 0}`,
     'END:VEVENT', 'END:VCALENDAR',
   ];
@@ -49,67 +73,58 @@ interface Ctx {
   message?: string;
   organizer?: string;
   allDay?: boolean;
+  /** the words' language: the booking's for guest emails, the main one for staff */
+  lang?: string;
 }
 
-function layout(heading: string, intro: string, c: Ctx, button?: { href: string; label: string }): { html: string; text: string } {
-  const rows: [string, string][] = [['What', c.title], ['When', c.when], ...(c.location ? [['Where', c.location] as [string, string]] : [])];
-  if (c.booking.seats > 1) rows.push(['Seats', String(c.booking.seats)]);
-  const html = `<!doctype html><html><body style="margin:0;background:#f6f5f2;font-family:-apple-system,Segoe UI,Inter,Arial,sans-serif;color:#1e1f24">
+function layout(heading: string, intro: string, c: Ctx, w: BookingStrings, button?: { href: string; label: string }): { html: string; text: string } {
+  const rows: [string, string][] = [[w.what, c.title], [w.when, c.when], ...(c.location ? [[w.where, c.location] as [string, string]] : [])];
+  if (c.booking.seats > 1) rows.push([w.seats, String(c.booking.seats)]);
+  const reference = fill(w.reference, { ref: c.booking.id.slice(0, 8).toUpperCase() });
+  const html = `<!doctype html><html lang="${esc(c.lang || 'en')}"><body style="margin:0;background:#f6f5f2;font-family:-apple-system,Segoe UI,Inter,Arial,sans-serif;color:#1e1f24">
 <div style="max-width:520px;margin:0 auto;padding:28px 20px">
 <p style="font-size:13px;color:#6b6e78;margin:0 0 18px">${esc(c.siteTitle)}</p>
 <h1 style="font-size:22px;margin:0 0 8px">${esc(heading)}</h1>
 <p style="font-size:15px;line-height:1.55;margin:0 0 18px;color:#3d3f47">${esc(intro)}</p>
 <table style="width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5e3de;border-radius:10px">${rows
-    .map(([k, v]) => `<tr><td style="padding:10px 14px;font-size:13px;color:#6b6e78;width:70px;border-bottom:1px solid #eeece8">${k}</td><td style="padding:10px 14px;font-size:14px;border-bottom:1px solid #eeece8">${esc(v)}</td></tr>`)
+    .map(([k, v]) => `<tr><td style="padding:10px 14px;font-size:13px;color:#6b6e78;width:70px;border-bottom:1px solid #eeece8">${esc(k)}</td><td style="padding:10px 14px;font-size:14px;border-bottom:1px solid #eeece8">${esc(v)}</td></tr>`)
     .join('')}</table>
 ${c.message ? `<p style="font-size:14px;line-height:1.55;margin:18px 0 0">${esc(c.message)}</p>` : ''}
 ${button ? `<p style="margin:22px 0 0"><a href="${esc(button.href)}" style="display:inline-block;background:#1e1f24;color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:10px 16px;border-radius:8px">${esc(button.label)}</a></p>` : ''}
-<p style="font-size:12px;color:#8e919a;margin:26px 0 0">Reference ${esc(c.booking.id.slice(0, 8).toUpperCase())}</p>
+<p style="font-size:12px;color:#8e919a;margin:26px 0 0">${esc(reference)}</p>
 </div></body></html>`;
-  const text = [heading, '', intro, '', ...rows.map(([k, v]) => `${k}: ${v}`), ...(c.message ? ['', c.message] : []), ...(button ? ['', `${button.label}: ${button.href}`] : []), '', `Reference ${c.booking.id.slice(0, 8).toUpperCase()}`].join('\n');
+  const text = [heading, '', intro, '', ...rows.map(([k, v]) => `${k}: ${v}`), ...(c.message ? ['', c.message] : []), ...(button ? ['', `${button.label}: ${button.href}`] : []), '', reference].join('\n');
   return { html, text };
 }
 
 export type BookingEmail = 'received' | 'confirmed' | 'declined' | 'cancelled' | 'rescheduled' | 'updated' | 'reminder' | 'staff-new';
 
 export function bookingEmail(kind: BookingEmail, c: Ctx): Mail {
-  const manage = { href: c.manageUrl, label: 'View or change your booking' };
-  const ics = (method: 'REQUEST' | 'CANCEL' = 'REQUEST') => [{ filename: 'booking.ics', type: `text/calendar; charset=utf-8; method=${method === 'CANCEL' ? 'CANCEL' : c.organizer ? 'REQUEST' : 'PUBLISH'}`, content: bookingIcs(c.booking, c.title, c.location, c.manageUrl, c.host, method, { organizer: c.organizer, allDay: c.allDay }) }];
+  const w = bookingStrings(c.lang);
+  const rsvp = c.booking.kind === 'rsvp';
+  const manage = { href: c.manageUrl, label: rsvp ? w.rsvp.manage : w.manage };
+  const ics = (method: 'REQUEST' | 'CANCEL' = 'REQUEST') => [{ filename: 'booking.ics', type: `text/calendar; charset=utf-8; method=${method === 'CANCEL' ? 'CANCEL' : c.organizer ? 'REQUEST' : 'PUBLISH'}`, content: bookingIcs(c.booking, c.title, c.location, c.manageUrl, c.host, method, { organizer: c.organizer, allDay: c.allDay, lang: c.lang }) }];
+  // null: no button (nothing left to change)
+  const guest = (k: Exclude<BookingEmail, 'staff-new'>, extra: Partial<Ctx> = {}, button: { href: string; label: string } | null = manage) => {
+    const copy = mailCopy(w, k, rsvp);
+    const vars = { name: c.booking.name || c.booking.email, title: c.title, when: c.when };
+    return { to: c.booking.email, subject: fill(copy.subject, vars), ...layout(copy.heading, fill(copy.intro, vars), { ...c, ...extra }, w, button ?? undefined) };
+  };
   switch (kind) {
-    case 'received': {
-      const m = layout('Request received', `Thanks, ${c.booking.name || 'there'}. We'll confirm by email soon.`, c, manage);
-      return { to: c.booking.email, subject: `Request received: ${c.title}`, ...m };
-    }
-    case 'confirmed': {
-      const m = layout('You’re booked', `It’s confirmed. Import the attached file to add it to your calendar.`, { ...c, message: c.message || c.link?.confirmMessage || '' }, manage);
-      return { to: c.booking.email, subject: `Confirmed: ${c.title} — ${c.when}`, ...m, attachments: ics() };
-    }
-    case 'declined': {
-      const m = layout('We couldn’t confirm your request', 'Sorry — this time isn’t available. You’re welcome to pick another.', c);
-      return { to: c.booking.email, subject: `Not available: ${c.title}`, ...m };
-    }
-    case 'cancelled': {
-      const m = layout('Booking cancelled', 'This booking has been cancelled.', c);
-      return { to: c.booking.email, subject: `Cancelled: ${c.title}`, ...m, attachments: ics('CANCEL') };
-    }
-    case 'updated': {
-      const m = layout('Booking details updated', 'Please review the latest details. Use the attached calendar file to update your calendar.', c, manage);
-      return { to: c.booking.email, subject: `Updated: ${c.title}`, ...m, attachments: ics() };
-    }
-    case 'rescheduled': {
-      const m = layout('Booking moved', 'Your booking has a new time. Import the attached calendar file to update your calendar.', c, manage);
-      return { to: c.booking.email, subject: `New time: ${c.title} — ${c.when}`, ...m, attachments: ics() };
-    }
-    case 'reminder': {
-      const m = layout('Coming up soon', 'A quick reminder about your booking.', c, manage);
-      return { to: c.booking.email, subject: `Reminder: ${c.title} — ${c.when}`, ...m };
-    }
+    case 'received': return guest('received');
+    case 'confirmed': return { ...guest('confirmed', { message: c.message || c.link?.confirmMessage || '' }), attachments: ics() };
+    case 'declined': return guest('declined', {}, null);
+    case 'cancelled': return { ...guest('cancelled', {}, null), attachments: ics('CANCEL') };
+    case 'updated': return { ...guest('updated'), attachments: ics() };
+    case 'rescheduled': return { ...guest('rescheduled'), attachments: ics() };
+    case 'reminder': return guest('reminder');
     case 'staff-new': {
       const pending = c.booking.status === 'pending';
       const who = [c.booking.name, c.booking.email, c.booking.phone].filter(Boolean).join(' · ');
       const answers = Object.entries(c.booking.answers).map(([k, v]) => `${k}: ${v}`).join('\n');
-      const m = layout(pending ? 'New request to approve' : 'New booking', `${who}${answers ? `\n${answers}` : ''}`, c, { href: c.manageUrl, label: pending ? 'Review in the admin' : 'Open in the admin' });
-      return { to: [], subject: `${pending ? 'Approve' : 'New booking'}: ${c.title} — ${c.when}`, ...m, replyTo: c.booking.email || undefined };
+      const vars = { title: c.title, when: c.when };
+      const m = layout(pending ? w.staff.pending : w.staff.booked, `${who}${answers ? `\n${answers}` : ''}`, c, w, { href: c.manageUrl, label: pending ? w.staff.review : w.staff.open });
+      return { to: [], subject: fill(pending ? w.staff.pendingSubject : w.staff.bookedSubject, vars), ...m, replyTo: c.booking.email || undefined };
     }
   }
 }

package/src/lib/booking/service.ts

@@ -9,9 +9,12 @@ import { loadFeed, expandVEvents } from '../calendar/ics';
 import { emitWebhook } from '../webhooks';
 import { parseFrom } from '../email/config';
 import { kickEmail } from '../email/service';
-import { manageUrl as manageUrlFor, eventUrl } from '../calendar/config';
+import { eventUrl } from '../calendar/config';
 import { eventTimeZone, locationLine, occurrenceKey } from '../calendar/events';
-import { bookingEmail, whenText, type BookingEmail } from './emails';
+import { normalizePageLocale } from '../i18n';
+import { localizeDoc } from '../translations';
+import { bookingStrings } from '../email/booking-words';
+import { bookingEmail, bookingLanguage, bookingManagePath, whenText, type BookingEmail } from './emails';
 import { holdOf, isBookable, resourceZone, spanEnd, type AvailabilityContext, type Interval } from './availability';
 import { decideStatus, linkApproval } from './approval';
 import { eventHolds } from './holds';
@@ -76,9 +79,12 @@ export async function availabilityContext(
 
 // ---- notifications ---------------------------------------------------------
 
-async function describe(repo: ContentRepository, b: Booking, settings: Settings) {
+// locale: an extra language to word it in (the event's translated title and
+// place, dates in it); settings then carry that language
+async function describe(repo: ContentRepository, b: Booking, settings: Settings, locale = '') {
   if (b.kind === 'rsvp') {
-    const ev = b.eventId ? await repo.getEvent(b.eventId) : null;
+    const raw = b.eventId ? await repo.getEvent(b.eventId) : null;
+    const ev = raw && locale ? localizeDoc(raw, locale) : raw;
     const tz = ev ? eventTimeZone(ev, settings) : settings.timezone || 'UTC';
     return {
       resource: null, link: null, event: ev,
@@ -108,17 +114,20 @@ export function bookingJson(b: Booking, extra: { title?: string; resourceSlug?:
 }
 
 export async function bookingMail(repo: ContentRepository, b: Booking, kind: BookingEmail, origin: string, from = '', snapshot?: { message?: string; eventTitle?: string; eventLocation?: string; eventAllDay?: number }) {
-  const settings = await repo.getSettings();
-  const d = await describe(repo,b,settings);
+  const site = await repo.getSettings();
+  // the guest hears in the language they booked in; staff in the main one
+  const language = bookingLanguage(kind === 'staff-new' ? { locale: '' } : b, site);
+  const settings = language.settings;
+  const d = await describe(repo,b,settings,language.locale);
   if (b.kind === 'rsvp' && !d.event && snapshot?.eventTitle) {
     d.title = snapshot.eventTitle;
     try { d.location = locationLine(JSON.parse(snapshot.eventLocation || '{}')); } catch { d.location = ''; }
     d.when = whenText(b,b.timezone || settings.timezone || 'UTC',settings,!!snapshot.eventAllDay);
   }
   return bookingEmail(kind, { booking:b,resource:d.resource,link:d.link,title:d.title,location:d.location,when:d.when,
-    manageUrl:kind === 'staff-new' ? `${origin}/admin/calendar/bookings?b=${b.id}` : origin + manageUrlFor(b.manageToken),
+    manageUrl:kind === 'staff-new' ? `${origin}/admin/calendar/bookings?b=${b.id}` : origin + bookingManagePath(b),
     siteTitle:settings.siteTitle,host:new URL(origin).host,organizer:parseFrom(from)?.email,message:snapshot?.message,
-    allDay:d.link?.mode==='day'||!!d.event?.allDay||(!d.event&&!!snapshot?.eventAllDay) });
+    allDay:d.link?.mode==='day'||!!d.event?.allDay||(!d.event&&!!snapshot?.eventAllDay), lang:language.lang });
 }
 async function notify(repo: ContentRepository, _b: Booking, _kinds: BookingEmail[], opts: FlowOptions, _message?: string) {
   // Repository mutations already committed their outbox jobs atomically.
@@ -142,6 +151,8 @@ export interface BookerInput {
   phone?: string;
   answers?: Record<string, string>;
   formVersion?: string;
+  /** the language they booked in (the page's or the app's); left out = the main language */
+  locale?: string;
 }
 
 export function validateBooker(link: Pick<BookingLink, 'questions' | 'askPhone'> | null, input: BookerInput): { name: string; email: string; phone: string; answers: Record<string, string> } {
@@ -236,7 +247,7 @@ export async function createResourceBooking(
     kind: 'booking', resourceId: resource.id, linkId: link.id, eventId: '', status,
     start: args.start, end: args.end, ...holdOf(link, args.start, args.end),
     timezone: resourceZone(resource, settings.timezone), ...booker, seats: 1, notes: '',
-    manageToken: token(), source: args.source ?? 'web',
+    manageToken: token(), source: args.source ?? 'web', locale: normalizePageLocale(args.booker.locale ?? ''),
   }, { idempotency: opts.idempotency });
   if (!b) throw new BookingError(409, 'That time was just taken. Please pick another.');
   await notify(repo, b, [status === 'confirmed' ? 'confirmed' : 'received', 'staff-new'], opts);
@@ -278,7 +289,7 @@ export async function createRsvp(
   const b = await repo.createBooking({
     kind: 'rsvp', resourceId: '', linkId: '', eventId: e.id, status: e.rsvp.autoConfirm ? 'confirmed' : 'pending',
     start: args.start, end: args.end, holdStart: args.start, holdEnd: args.end, timezone: e.timezone, ...booker, seats,
-    formResponse, notes: '', manageToken: token(), source: args.source ?? 'web',
+    formResponse, notes: '', manageToken: token(), source: args.source ?? 'web', locale: normalizePageLocale(args.booker.locale ?? ''),
   }, { capacity: e.rsvp.capacity, idempotency: opts.idempotency });
   if (!b) throw new BookingError(409, e.rsvp.capacity ? 'Sorry — that’s more seats than are left.' : 'Couldn’t save your RSVP.');
   await notify(repo, b, [b.status === 'confirmed' ? 'confirmed' : 'received'], opts);
@@ -377,7 +388,7 @@ export async function decideOverdue(repo: ContentRepository, opts: FlowOptions):
     if (!rules.deadlineHours || b.createdAt + rules.deadlineHours * 3_600_000 > now) continue;
     try {
       await setBookingStatus(repo, b, rules.deadlineAction === 'decline' ? 'declined' : 'confirmed', opts,
-        rules.deadlineAction === 'decline' ? 'We weren’t able to confirm this booking in time. Please pick another time.' : undefined);
+        rules.deadlineAction === 'decline' ? bookingStrings(bookingLanguage(b, settings).lang).lateDecline : undefined);
       decided++;
     } catch { /* changed meanwhile — next sweep sees the new state */ }
   }

package/src/lib/calendar/cards.ts

@@ -3,7 +3,8 @@
 // .pc-ev-card* classes are the styling API, like .pc-cal-* for the grid.
 import type { ContentRepository } from '../repo/types';
 import { tagFilter, type CalEvent, type Settings } from '../schema';
-import { siteLocale } from '../dates';
+import { siteLang, siteLocale } from '../dates';
+import { eventStrings } from './event-words';
 import { eventImage } from './images';
 import { eventUrl } from './config';
 import { eventIsPublic, featuredOccurrence, formatOccurrence, locationLine, type Occurrence } from './events';
@@ -37,7 +38,8 @@ export function eventCardHtml(
   const f = formatOccurrence(o, tz, siteLocale(settings));
   const href = opts.href ?? eventUrl(e.slug);
   const h = opts.heading ?? 'h3';
-  // "Sat, Oct 3 · 11:00 AM", "Sat, Oct 3 · All day", "Sat, Oct 24 – Sun, Oct 25"
+  // "Sat, Oct 3 · 11:00 AM", "Sat, Oct 3 · All day", "Sat, Oct 24 – Sun, Oct 25";
+  // the Cancelled flag speaks the dates' language
   const when = f.range;
   const image = eventImage(e, settings);
   const media = opts.showImage
@@ -53,7 +55,7 @@ export function eventCardHtml(
       : '';
   return (
     `<article class="pc-ev-card${cancelled ? ' is-cancelled' : ''}">${media}<div class="pc-ev-card-body">` +
-    `<div class="pc-ev-card-when">${cancelled ? '<span class="pc-ev-flag">Cancelled</span> ' : ''}${esc(when)}</div>` +
+    `<div class="pc-ev-card-when">${cancelled ? `<span class="pc-ev-flag">${esc(eventStrings(siteLang(settings)).cancelled)}</span> ` : ''}${esc(when)}</div>` +
     `<${h} class="pc-ev-card-title"><a href="${esc(href)}">${esc(e.title || 'Untitled event')}</a></${h}>` +
     (e.excerpt ? `<p class="pc-ev-card-excerpt">${esc(e.excerpt)}</p>` : '') +
     (loc ? `<div class="pc-ev-card-loc">${esc(loc)}</div>` : '') +