@acms-subir/core 0.3.36 → 0.3.38

package/src/components/EventPage.astro

@@ -2,13 +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 { siteLocale } from '../lib/dates';
+import { siteLang, siteLocale } from '../lib/dates';
+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';
 
@@ -31,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)
@@ -48,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 = {
@@ -61,6 +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 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' : ''}`}>
@@ -73,19 +93,19 @@ const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.t
       {(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>
@@ -101,7 +121,7 @@ const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.t
             {(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>
@@ -109,9 +129,9 @@ const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.t
       )}
       {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>
@@ -119,7 +139,7 @@ const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.t
       {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) => (
@@ -130,27 +150,27 @@ const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.t
       ))}
       {rsvp ? (
         <div class="pc-ev-rsvp">
-          <p class="pc-ev-going"><b>{rsvp.going}</b> going{rsvp.left !== null && <> · <b>{rsvp.left}</b> {rsvp.left === 1 ? 'spot' : 'spots'} left</>}</p>
+          <p class="pc-ev-going">{going[0]}<b>{rsvp.going}</b>{going[1]}{rsvp.left !== null && <> · {left[0]}<b>{rsvp.left}</b>{left[1]}</>}</p>
           {rsvp.open && (rsvp.left === null || rsvp.left > 0) ? (
             <details class="pc-ev-rsvpform" open={Boolean(rsvp.error)}>
-              <summary class="pc-ev-cta">Save my seat</summary>
+              <summary class="pc-ev-cta">{w.saveSeat}</summary>
               <form method="post">
                 <Fragment set:html={rsvp.formHtml ?? ''}/>
                 {e.rsvp.form?.title && <h3>{e.rsvp.form.title}</h3>}
                 {e.rsvp.form?.intro && <p>{e.rsvp.form.intro}</p>}
                 {rsvp.error && <p class="pc-bk-error">{rsvp.error}</p>}
-                <label class="pc-bk-field"><span>Your name</span><input name="name" required maxlength="120" autocomplete="name" value={rsvp.values?.name} /></label>
-                <label class="pc-bk-field"><span>Email</span><input name="email" type="email" required maxlength="200" autocomplete="email" value={rsvp.values?.email} /></label>
+                <label class="pc-bk-field"><span>{w.nameField}</span><input name="name" required maxlength="120" autocomplete="name" value={rsvp.values?.name} /></label>
+                <label class="pc-bk-field"><span>{w.emailField}</span><input name="email" type="email" required maxlength="200" autocomplete="email" value={rsvp.values?.email} /></label>
                 {rsvp.maxSeats > 1 && (
-                  <label class="pc-bk-field"><span>Seats</span>
+                  <label class="pc-bk-field"><span>{w.seatsField}</span>
                     <select name="seats">{Array.from({ length: Math.min(rsvp.maxSeats, rsvp.left ?? rsvp.maxSeats) }, (_, i) => <option value={i + 1} selected={Number(rsvp.values?.seats || 1) === i + 1}>{i + 1}</option>)}</select>
                   </label>
                 )}
                 <Fragment set:html={rsvp.fieldsHtml ?? ''}/>
-                <button class="pc-bk-submit" type="submit">{e.rsvp.form?.submitLabel || (e.rsvp.autoConfirm ? 'Confirm my seat' : 'Request a seat')}</button>
+                <button class="pc-bk-submit" type="submit">{e.rsvp.form?.submitLabel || (e.rsvp.autoConfirm ? w.confirmSeat : w.requestSeat)}</button>
               </form>
             </details>
-          ) : <p class="pc-ev-full">{rsvp.open ? 'This event is full.' : 'RSVPs are closed.'}</p>}
+          ) : <p class="pc-ev-full">{rsvp.open ? w.full : w.closed}</p>}
         </div>
       ) : e.cta.label && ctaHref && !cancelled && (
         <a class={`pc-ev-cta${e.cta.style === 'outline' ? ' is-outline' : ''}`} href={ctaHref}>{e.cta.label}</a>
@@ -158,33 +178,33 @@ const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.t
       <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) {
@@ -192,7 +212,7 @@ const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.t
     }
     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>` : '') +