From 5f7aa951d3daca45020373c92d0e5e9c46017c50 Mon Sep 17 00:00:00 2001 From: vl Date: Wed, 23 Sep 2026 09:34:14 +0200 Subject: [PATCH] feat: explain a schedule change on the panel, and preview it in advance MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two things the shop asked for, and one it will notice. **A message on an exception.** A closure or a late opening can now carry a reason, and it reaches the panel. It shows while the door is shut and disappears the moment the shop opens — a notice explaining a late opening is worse than useless once the door is open. It outranks a free message on purpose: "closed this afternoon, back tomorrow" is what someone standing outside needs, and "new collection in store" can wait. Say so if you would rather it were the other way. The first version keyed this off the day's `isOpen`, which means "this day has opening hours" — so a day opening at 14:00 counted as open all morning, exactly when the reason is needed. A test caught it; the rule now reads the state at this minute. **Reusable phrases.** The same handful of notices get written over and over. /admin/modeles keeps them, translated once, and offers them wherever a message is composed — exceptions, closure periods, the banner. Picking one costs no translation at all: the saved English is reused directly, where the service takes the better part of ten seconds. Exception notes and holiday labels are translated too, which they were not before. After the save rather than during it, so a slow service never costs the shop its dates. **Previewing the future.** The dashboard can render the panel at any moment within about a year: "what will the window say while I'm away?" is worth answering before someone is standing in front of a locked door. The whole pipeline was already a function of "now", so this costs passing a different instant. An unparseable or absurd value falls back to the present rather than confidently rendering nonsense. Checked against a three-week holiday, which surfaced something worth knowing: the automatic "opens on…" line stays empty, because the resolver's search is bounded to fourteen days. During a long closure the message is the only thing that tells customers when the shop is back — which is a good reason for this feature to exist. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_012cSY9pVhZmJUKNN7wf1Myd --- app/admin/ScreenPreview.tsx | 115 ++++++++- app/admin/components/TemplatePicker.tsx | 57 +++++ app/admin/exceptions/ExceptionsManager.tsx | 92 ++++++-- app/admin/exceptions/actions.ts | 49 +++- app/admin/exceptions/page.tsx | 8 +- app/admin/layout.tsx | 1 + app/admin/messages/MessageManager.tsx | 7 + app/admin/messages/page.tsx | 10 +- app/admin/modeles/TemplateManager.tsx | 223 ++++++++++++++++++ app/admin/modeles/actions.ts | 164 +++++++++++++ app/admin/modeles/page.tsx | 33 +++ app/admin/page.tsx | 4 +- app/admin/vacances/VacationManager.tsx | 19 +- app/admin/vacances/actions.ts | 40 +++- app/admin/vacances/page.tsx | 8 +- app/api/admin/preview/route.ts | 12 +- e2e/dashboard.spec.ts | 24 ++ e2e/fixtures.ts | 4 +- e2e/messages.spec.ts | 16 ++ lib/screen/contract.ts | 7 +- lib/screen/preview-time.test.ts | 47 ++++ lib/screen/preview-time.ts | 32 +++ lib/screen/viewmodel.test.ts | 133 ++++++++++- lib/screen/viewmodel.ts | 27 ++- lib/templates.ts | 16 ++ .../migration.sql | 19 ++ prisma/schema.prisma | 22 ++ tests/integration/helpers.ts | 1 + tests/integration/vacations-action.test.ts | 10 +- 29 files changed, 1141 insertions(+), 59 deletions(-) create mode 100644 app/admin/components/TemplatePicker.tsx create mode 100644 app/admin/modeles/TemplateManager.tsx create mode 100644 app/admin/modeles/actions.ts create mode 100644 app/admin/modeles/page.tsx create mode 100644 e2e/dashboard.spec.ts create mode 100644 lib/screen/preview-time.test.ts create mode 100644 lib/screen/preview-time.ts create mode 100644 lib/templates.ts create mode 100644 prisma/migrations/20260923072416_message_templates/migration.sql diff --git a/app/admin/ScreenPreview.tsx b/app/admin/ScreenPreview.tsx index e281a87..bdb4db7 100644 --- a/app/admin/ScreenPreview.tsx +++ b/app/admin/ScreenPreview.tsx @@ -6,27 +6,90 @@ import { useState } from 'react'; * The panel, at a readable size. * * Rendered by the same code path that serves the device, so this is not an - * impression of the screen: it is the screen. `key` is bumped to defeat the - * browser cache when the data behind it has just changed. + * impression of the screen: it is the screen. + * + * With `timeTravel`, it also answers the question the shop actually asks + * before a holiday — "what will the window say while I'm away?" — without + * waiting until someone is standing in front of a locked door to find out. */ -export default function ScreenPreview({ className = '' }: { className?: string }) { +export default function ScreenPreview({ + className = '', + timeTravel = false, +}: { + className?: string; + timeTravel?: boolean; +}) { + const [at, setAt] = useState(''); const [nonce, setNonce] = useState(() => Date.now()); + const source = at + ? `/api/admin/preview?at=${encodeURIComponent(at)}&t=${nonce}` + : `/api/admin/preview?t=${nonce}`; + + function jumpTo(date: Date) { + setAt(toLocalInput(date)); + setNonce(Date.now()); + } + return (
{/* eslint-disable-next-line @next/next/no-img-element */} Aperçu de l’écran de la vitrine
+ + {timeTravel ? ( +
+ + +
+ jumpTo(tomorrowAt(10))} /> + jumpTo(nextWeekdayAt(6, 10))} /> + jumpTo(inDays(30, 10))} /> + {at ? ( + + ) : null} +
+
+ ) : null} +
- 800 × 480, noir et blanc — rendu réellement envoyé à l’écran. + + {at + ? 'Projection : l’écran tel qu’il sera à cette date, avec les horaires et fermetures enregistrés.' + : '800 × 480, noir et blanc — rendu réellement envoyé à l’écran.'} +
); } + +function Jump({ label, onClick }: { label: string; onClick: () => void }) { + return ( + + ); +} + +/** `datetime-local` speaks local wall-clock time with no zone, so build one. */ +function toLocalInput(date: Date): string { + const pad = (value: number) => value.toString().padStart(2, '0'); + return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad( + date.getHours(), + )}:${pad(date.getMinutes())}`; +} + +function tomorrowAt(hour: number): Date { + return inDays(1, hour); +} + +function inDays(days: number, hour: number): Date { + const date = new Date(); + date.setDate(date.getDate() + days); + date.setHours(hour, 0, 0, 0); + return date; +} + +/** The next occurrence of a weekday, 0 = Sunday. */ +function nextWeekdayAt(weekday: number, hour: number): Date { + const date = new Date(); + const ahead = (weekday - date.getDay() + 7) % 7 || 7; + return inDays(ahead, hour); +} diff --git a/app/admin/components/TemplatePicker.tsx b/app/admin/components/TemplatePicker.tsx new file mode 100644 index 0000000..53d6d7d --- /dev/null +++ b/app/admin/components/TemplatePicker.tsx @@ -0,0 +1,57 @@ +'use client'; + +/** + * Offers the shop's saved phrases wherever a message is composed. + * + * A picker rather than a free-text-only field, because the same handful of + * notices get written over and over: choosing one keeps the wording + * consistent and — more importantly — reuses a phrase that has already been + * translated, instead of paying for a fresh translation of the same sentence. + * + * The chosen text lands in the field and stays editable. A template is a + * starting point, not a constraint. + */ +export type Template = { id: string; textFr: string }; + +export default function TemplatePicker({ + templates, + onPick, + disabled = false, + label = 'Modèle', +}: { + templates: Template[]; + onPick: (textFr: string) => void; + disabled?: boolean; + label?: string; +}) { + if (templates.length === 0) { + return null; + } + + return ( + + ); +} diff --git a/app/admin/exceptions/ExceptionsManager.tsx b/app/admin/exceptions/ExceptionsManager.tsx index 71f5548..7022a83 100644 --- a/app/admin/exceptions/ExceptionsManager.tsx +++ b/app/admin/exceptions/ExceptionsManager.tsx @@ -2,10 +2,18 @@ import { useState, useTransition } from 'react'; +import TemplatePicker, { type Template } from '@/app/admin/components/TemplatePicker'; import { earlyClosing, lateOpening, usualBounds } from '@/lib/schedule/exceptions'; import type { ExceptionKind, Slot } from '@/lib/schedule/types'; -import { deleteException, saveException, saveExceptionRange } from './actions'; +import { MESSAGE_MAX_CHARS } from '@/lib/screen/contract'; + +import { + deleteException, + saveException, + saveExceptionRange, + translateExceptionNote, +} from './actions'; export type UpcomingDay = { date: string; @@ -34,6 +42,7 @@ type Props = { today: string; days: SelectableDay[]; upcoming: UpcomingDay[]; + templates: Template[]; }; const KIND_LABELS: Record = { @@ -42,7 +51,7 @@ const KIND_LABELS: Record = { VACATION: { text: 'vacances', className: 'bg-[var(--surface-muted)] text-[var(--ink-muted)]' }, }; -export default function ExceptionsManager({ canEdit, today, days, upcoming }: Props) { +export default function ExceptionsManager({ canEdit, today, days, upcoming, templates }: Props) { const [pending, startTransition] = useTransition(); const [message, setMessage] = useState<{ kind: 'ok' | 'error'; text: string } | null>(null); @@ -69,9 +78,11 @@ export default function ExceptionsManager({ canEdit, today, days, upcoming }: Pr

) : null} - {canEdit ? : null} + {canEdit ? ( + + ) : null} - {canEdit ? : null} + {canEdit ? : null}

À venir

@@ -135,35 +146,49 @@ export default function ExceptionsManager({ canEdit, today, days, upcoming }: Pr function QuickPanel({ today, days, + templates, pending, run, }: { today: string; days: SelectableDay[]; + templates: Template[]; pending: boolean; run: (work: () => Promise<{ ok: true } | { ok: false; error: string }>, success: string) => void; }) { const [date, setDate] = useState(today); + const [note, setNote] = useState(''); const day = days.find((candidate) => candidate.date === date) ?? days[0]; const isToday = day?.date === today; const isOpenThatDay = (day?.usualSlots.length ?? 0) > 0; - function apply(slots: Slot[], note: string, success: string) { + function apply(slots: Slot[], success: string) { if (!day) { return; } - run( - () => - saveException({ - date: day.date, - isClosed: slots.length === 0, - slots, - reason: 'TEMPORARY', - noteFr: note, - }), - success, - ); + const text = note.trim(); + + run(async () => { + const saved = await saveException({ + date: day.date, + isClosed: slots.length === 0, + slots, + reason: 'TEMPORARY', + // Empty means no notice: the message now drives what the panel shows, + // so it has to be something the shop chose to say rather than a + // sentence the form filled in on its behalf. + noteFr: text || null, + }); + + if (saved.ok && text) { + // Separate from the save: a message is worth having, but not at the + // price of making the two-click path wait for the translation + // service. A failure simply leaves the French alone on screen. + await translateExceptionNote(day.date); + } + return saved; + }, success); } const when = isToday ? 'aujourd’hui' : `le ${day?.label.toLowerCase() ?? ''}`; @@ -196,13 +221,29 @@ function QuickPanel({ {day?.isException ? ` Actuellement : ${day.effectiveText}.` : ''}

+
+ + +
+

+ Affiché sur l’écran tant que la boutique est fermée ce jour-là, et retiré dès qu’elle ouvre. +

+
+
+ ) : null} + +
+

Modèles enregistrés

+ {templates.length === 0 ? ( +

+ Aucun modèle. Ceux que vous ajoutez ici seront proposés partout où l’on compose un + message. +

+ ) : ( +
    + {templates.map((row) => ( + + ))} +
+ )} +
+ + ); +} + +function TemplateCard({ + row, + canEdit, + pending, + run, + startTransition, + setMessage, +}: { + row: TemplateRow; + canEdit: boolean; + pending: boolean; + run: (work: () => Promise<{ ok: true } | { ok: false; error: string }>, success: string) => void; + startTransition: (work: () => void) => void; + setMessage: (value: { kind: 'ok' | 'error'; text: string } | null) => void; +}) { + const [draftEn, setDraftEn] = useState(row.textEn ?? ''); + const badge = STATUS[row.translationStatus]; + + return ( +
  • +
    +

    {row.textFr}

    + + {badge.label} + +
    + + {canEdit ? ( +
    + + + + +
    + ) : row.textEn ? ( +

    {row.textEn}

    + ) : null} +
    • + ); +} diff --git a/app/admin/modeles/actions.ts b/app/admin/modeles/actions.ts new file mode 100644 index 0000000..a725a4a --- /dev/null +++ b/app/admin/modeles/actions.ts @@ -0,0 +1,164 @@ +'use server'; + +import { revalidatePath } from 'next/cache'; + +import { diffOf, recordAudit } from '@/lib/audit'; +import { requireAdmin } from '@/lib/auth/actions'; +import { prisma } from '@/lib/db'; +import { MESSAGE_MAX_CHARS } from '@/lib/screen/contract'; +import { translateToEnglish } from '@/lib/translation/service'; + +export type ActionResult = { ok: true; value: T } | { ok: false; error: string }; + +/** + * Saves a reusable phrase. + * + * Templates are translated like any other message, but once rather than at + * every use: that is most of the point of having them. + */ +export async function saveTemplate(input: { + id?: string; + textFr: string; + sortOrder: number; +}): Promise> { + const gate = await requireAdmin(); + if (!gate.ok) { + return { ok: false, error: gate.error }; + } + + const textFr = input.textFr.trim(); + if (textFr.length === 0) { + return { ok: false, error: 'Le modèle ne peut pas être vide.' }; + } + if (textFr.length > MESSAGE_MAX_CHARS) { + return { + ok: false, + error: `Le modèle dépasse ${MESSAGE_MAX_CHARS} caractères et ne tiendrait pas sur l’écran.`, + }; + } + + const existing = input.id + ? await prisma.messageTemplate.findUnique({ where: { id: input.id } }) + : null; + + // The French text is the identity of a template: two identical phrases are + // one phrase, and a duplicate would only ever be half-corrected later. + const clash = await prisma.messageTemplate.findUnique({ where: { textFr } }); + if (clash && clash.id !== existing?.id) { + return { ok: false, error: 'Ce modèle existe déjà.' }; + } + + const textChanged = existing ? existing.textFr !== textFr : true; + const data = { + textFr, + sortOrder: input.sortOrder, + ...(textChanged ? { textEn: null, translationStatus: 'PENDING' as const } : {}), + }; + + const saved = existing + ? await prisma.messageTemplate.update({ where: { id: existing.id }, data }) + : await prisma.messageTemplate.create({ data: { ...data, createdBy: gate.value.email } }); + + await recordAudit({ + userEmail: gate.value.email, + action: existing ? 'template.update' : 'template.create', + entity: 'MessageTemplate', + entityId: saved.id, + diff: diffOf(existing ? { texte: existing.textFr } : null, { texte: textFr }), + }); + + revalidateAll(); + return { ok: true, value: { id: saved.id } }; +} + +export async function translateTemplate(id: string): Promise> { + const gate = await requireAdmin(); + if (!gate.ok) { + return { ok: false, error: gate.error }; + } + + const template = await prisma.messageTemplate.findUnique({ where: { id } }); + if (!template) { + return { ok: false, error: 'Ce modèle a été supprimé.' }; + } + if (template.translationStatus === 'MANUAL') { + return { ok: false, error: 'La traduction a été saisie à la main; elle n’est pas écrasée.' }; + } + + const outcome = await translateToEnglish(template.textFr); + if (!outcome.ok) { + await prisma.messageTemplate.update({ where: { id }, data: { translationStatus: 'ERROR' } }); + revalidateAll(); + return { ok: false, error: outcome.error }; + } + + await prisma.messageTemplate.update({ + where: { id }, + data: { textEn: outcome.text, translationStatus: 'DONE' }, + }); + + revalidateAll(); + return { ok: true, value: { textEn: outcome.text } }; +} + +export async function setTemplateTranslation(id: string, textEn: string): Promise { + const gate = await requireAdmin(); + if (!gate.ok) { + return { ok: false, error: gate.error }; + } + + const trimmed = textEn.trim(); + const existing = await prisma.messageTemplate.findUnique({ where: { id } }); + if (!existing) { + return { ok: false, error: 'Ce modèle a été supprimé.' }; + } + + await prisma.messageTemplate.update({ + where: { id }, + data: { textEn: trimmed || null, translationStatus: trimmed ? 'MANUAL' : 'PENDING' }, + }); + + await recordAudit({ + userEmail: gate.value.email, + action: 'template.translate_manual', + entity: 'MessageTemplate', + entityId: id, + diff: diffOf({ anglais: existing.textEn }, { anglais: trimmed || null }), + }); + + revalidateAll(); + return { ok: true, value: undefined }; +} + +export async function deleteTemplate(id: string): Promise { + const gate = await requireAdmin(); + if (!gate.ok) { + return { ok: false, error: gate.error }; + } + + const existing = await prisma.messageTemplate.findUnique({ where: { id } }); + if (!existing) { + return { ok: false, error: 'Ce modèle a déjà été supprimé.' }; + } + + await prisma.messageTemplate.delete({ where: { id } }); + + await recordAudit({ + userEmail: gate.value.email, + action: 'template.delete', + entity: 'MessageTemplate', + entityId: id, + diff: diffOf({ texte: existing.textFr }, null), + }); + + revalidateAll(); + return { ok: true, value: undefined }; +} + +function revalidateAll(): void { + // Templates appear in the pickers on every page that composes a message. + revalidatePath('/admin/modeles'); + revalidatePath('/admin/exceptions'); + revalidatePath('/admin/vacances'); + revalidatePath('/admin/messages'); +} diff --git a/app/admin/modeles/page.tsx b/app/admin/modeles/page.tsx new file mode 100644 index 0000000..40e68cd --- /dev/null +++ b/app/admin/modeles/page.tsx @@ -0,0 +1,33 @@ +import { auth } from '@/lib/auth'; +import { prisma } from '@/lib/db'; + +import TemplateManager, { type TemplateRow } from './TemplateManager'; + +export const metadata = { title: 'Modèles de message — ITA ITO' }; + +export default async function TemplatesPage() { + const [session, rows] = await Promise.all([ + auth(), + prisma.messageTemplate.findMany({ orderBy: [{ sortOrder: 'asc' }, { createdAt: 'asc' }] }), + ]); + + const templates: TemplateRow[] = rows.map((row) => ({ + id: row.id, + textFr: row.textFr, + textEn: row.textEn, + translationStatus: row.translationStatus, + sortOrder: row.sortOrder, + })); + + return ( +
    +

    Modèles de message

    +

    + Les phrases que la boutique écrit souvent. Enregistrées ici, elles sont traduites une fois + et proposées partout où l’on compose un message — exceptions, vacances, bandeau. +

    + + +
    + ); +} diff --git a/app/admin/page.tsx b/app/admin/page.tsx index 8d681a0..e2b2d1b 100644 --- a/app/admin/page.tsx +++ b/app/admin/page.tsx @@ -112,8 +112,8 @@ export default async function AdminHome() {
    -

    L’écran en ce moment

    - +

    L’écran

    +
    diff --git a/app/admin/vacances/VacationManager.tsx b/app/admin/vacances/VacationManager.tsx index 5d29cfc..720dbd4 100644 --- a/app/admin/vacances/VacationManager.tsx +++ b/app/admin/vacances/VacationManager.tsx @@ -2,9 +2,10 @@ import { useState, useTransition } from 'react'; +import TemplatePicker, { type Template } from '@/app/admin/components/TemplatePicker'; import { countDays } from '@/lib/schedule/vacations'; -import { createVacation, deleteVacation } from './actions'; +import { createVacation, deleteVacation, translateVacationLabel } from './actions'; export type VacationRow = { id: string; @@ -18,9 +19,11 @@ export type VacationRow = { export default function VacationManager({ canEdit, periods, + templates, }: { canEdit: boolean; periods: VacationRow[]; + templates: Template[]; }) { const [startDate, setStartDate] = useState(''); const [endDate, setEndDate] = useState(''); @@ -97,6 +100,7 @@ export default function VacationManager({ className="mt-1 w-full rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-2 text-base" /> +
    @@ -104,10 +108,15 @@ export default function VacationManager({ type="button" disabled={pending || !startDate || !endDate || labelFr.trim().length === 0} onClick={() => - run( - () => createVacation({ startDate, endDate, labelFr }), - 'Période de fermeture enregistrée.', - ) + run(async () => { + const created = await createVacation({ startDate, endDate, labelFr }); + if (created.ok) { + // After the fact: the dates matter more than the English, + // and the translation service is measured in seconds. + await translateVacationLabel(created.id); + } + return created; + }, 'Période de fermeture enregistrée.') } className="rounded-[var(--radius-md)] bg-[var(--accent)] px-4 py-2.5 font-medium text-[var(--on-accent)] transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-40" > diff --git a/app/admin/vacances/actions.ts b/app/admin/vacances/actions.ts index e33b249..27da492 100644 --- a/app/admin/vacances/actions.ts +++ b/app/admin/vacances/actions.ts @@ -7,6 +7,7 @@ import { requireAdmin } from '@/lib/auth/actions'; import { prisma } from '@/lib/db'; import type { CivilDate } from '@/lib/schedule/civil'; import { countDays, findOverlap, validatePeriod } from '@/lib/schedule/vacations'; +import { translateToEnglish } from '@/lib/translation/service'; export type ActionResult = { ok: true } | { ok: false; error: string }; @@ -14,7 +15,9 @@ export async function createVacation(input: { startDate: CivilDate; endDate: CivilDate; labelFr: string; -}): Promise { + // Returns the new id so the caller can translate it without having to ask + // which row was "the last one", which would be a race. +}): Promise<{ ok: true; id: string } | { ok: false; error: string }> { const gate = await requireAdmin(); if (!gate.ok) { return { ok: false, error: gate.error }; @@ -45,11 +48,17 @@ export async function createVacation(input: { }; } + // A phrase saved as a template is already translated; reusing it is instant + // where the service takes seconds. The label reaches the panel during the + // closure, so it needs its English. + const fromTemplate = await prisma.messageTemplate.findUnique({ where: { textFr: labelFr } }); + const created = await prisma.vacationPeriod.create({ data: { startDate: asDate(input.startDate), endDate: asDate(input.endDate), labelFr, + labelEn: fromTemplate?.textEn ?? null, createdBy: gate.value.email, }, }); @@ -68,7 +77,7 @@ export async function createVacation(input: { }); revalidateAll(); - return { ok: true }; + return { ok: true, id: created.id }; } export async function deleteVacation(id: string): Promise { @@ -116,3 +125,30 @@ function revalidateAll(): void { revalidatePath('/admin/vacances'); revalidatePath('/admin/exceptions'); } + +/** + * Translates a period's label, if it still needs one. + * + * Separate from the creation, so a slow translation service never costs the + * shop its holiday dates. A failure leaves the French alone on screen. + */ +export async function translateVacationLabel(id: string): Promise { + const gate = await requireAdmin(); + if (!gate.ok) { + return { ok: false, error: gate.error }; + } + + const existing = await prisma.vacationPeriod.findUnique({ where: { id } }); + if (!existing || existing.labelEn) { + return { ok: true }; + } + + const outcome = await translateToEnglish(existing.labelFr); + if (!outcome.ok) { + return { ok: false, error: outcome.error }; + } + + await prisma.vacationPeriod.update({ where: { id }, data: { labelEn: outcome.text } }); + revalidateAll(); + return { ok: true }; +} diff --git a/app/admin/vacances/page.tsx b/app/admin/vacances/page.tsx index 724b5d6..b91b289 100644 --- a/app/admin/vacances/page.tsx +++ b/app/admin/vacances/page.tsx @@ -3,6 +3,7 @@ import { prisma } from '@/lib/db'; import { toCivilDate } from '@/lib/schedule/civil'; import { loadSettings } from '@/lib/schedule/context'; import { periodsOverlap, upcomingPeriods } from '@/lib/schedule/vacations'; +import { loadTemplates } from '@/lib/templates'; import VacationManager, { type VacationRow } from './VacationManager'; import YearCalendar from './YearCalendar'; @@ -10,7 +11,11 @@ import YearCalendar from './YearCalendar'; export const metadata = { title: 'Vacances — ITA ITO' }; export default async function VacationsPage() { - const [session, settings] = await Promise.all([auth(), loadSettings()]); + const [session, settings, templates] = await Promise.all([ + auth(), + loadSettings(), + loadTemplates(), + ]); const today = toCivilDate(new Date(), settings.timezone); const rows = await prisma.vacationPeriod.findMany({ orderBy: { startDate: 'asc' } }); @@ -39,6 +44,7 @@ export default async function VacationsPage() {
    diff --git a/app/api/admin/preview/route.ts b/app/api/admin/preview/route.ts index ad5fb7d..2b17bed 100644 --- a/app/api/admin/preview/route.ts +++ b/app/api/admin/preview/route.ts @@ -1,22 +1,30 @@ import { publicBaseUrl } from '@/lib/config'; import { encodeScreen } from '@/lib/screen/encode'; +import { parsePreviewTime } from '@/lib/screen/preview-time'; import { renderScreenSvg } from '@/lib/screen/render'; import { buildCurrentScreen } from '@/lib/screen/service'; export const dynamic = 'force-dynamic'; /** - * The panel as it stands right now, as a PNG for the browser. + * The panel as it stands, or as it will stand at a given moment. * * Deliberately the same pipeline the device is served from — payload, SVG, * threshold — so what the admin sees is what the shop window shows, down to * the last thresholded pixel. A preview drawn any other way would eventually * disagree with reality, and quietly. * + * `?at=` moves the clock. The whole pipeline is already a function of "now", + * so showing next Tuesday costs nothing but passing a different instant — + * which is how a holiday closure can be checked before anyone is standing in + * front of a locked door. + * * Behind /api/admin, so the middleware requires a session. */ export async function GET(request: Request) { - const { payload } = await buildCurrentScreen(new Date(), publicBaseUrl(request)); + const { at } = parsePreviewTime(new URL(request.url).searchParams.get('at'), new Date()); + + const { payload } = await buildCurrentScreen(at, publicBaseUrl(request)); const png = encodeScreen(await renderScreenSvg(payload), 'png'); return new Response(new Uint8Array(png), { diff --git a/e2e/dashboard.spec.ts b/e2e/dashboard.spec.ts new file mode 100644 index 0000000..98f7f81 --- /dev/null +++ b/e2e/dashboard.spec.ts @@ -0,0 +1,24 @@ +import { expect, resetDatabase, signIn, test } from './fixtures'; + +test.beforeEach(async () => { + await resetDatabase(); +}); + +test('the panel can be previewed at a future moment', async ({ page }) => { + await signIn(page, 'admin'); + await page.goto('/admin'); + + const preview = page.getByRole('img', { name: /Aperçu de l’écran/ }); + await expect(preview).toBeVisible(); + + // The question the shop asks before a holiday is "what will the window say + // while I'm away?" — which is worth answering before someone is standing in + // front of a locked door. + await page.getByRole('button', { name: 'Demain 10:00' }).click(); + + await expect(preview).toHaveAttribute('src', /at=/); + await expect(page.getByText(/Projection/)).toBeVisible(); + + await page.getByRole('button', { name: 'Revenir à maintenant' }).click(); + await expect(preview).not.toHaveAttribute('src', /at=/); +}); diff --git a/e2e/fixtures.ts b/e2e/fixtures.ts index cec14a4..bcf7a19 100644 --- a/e2e/fixtures.ts +++ b/e2e/fixtures.ts @@ -78,8 +78,8 @@ const WEEK: [number, boolean, string][] = [ export async function resetDatabase(): Promise { await query(` TRUNCATE device_logs, devices, screen_images, schedule_exceptions, vacation_periods, - public_holidays, messages, translation_cache, audit_logs, weekly_schedules, - settings, sync_states RESTART IDENTITY CASCADE + public_holidays, messages, message_templates, translation_cache, audit_logs, + weekly_schedules, settings, sync_states RESTART IDENTITY CASCADE `); await query(`INSERT INTO settings (id, "updatedAt") VALUES ('singleton', now())`); diff --git a/e2e/messages.spec.ts b/e2e/messages.spec.ts index cbf0ce2..b9e8ce0 100644 --- a/e2e/messages.spec.ts +++ b/e2e/messages.spec.ts @@ -51,6 +51,22 @@ test('a translation typed by hand is kept and shown', async ({ page }) => { expect(stored?.translationStatus).toBe('MANUAL'); }); +test('a saved phrase can be reused wherever a message is composed', async ({ page }) => { + await signIn(page, 'admin'); + + await page.goto('/admin/modeles'); + await page.getByLabel(/Texte en français/).fill('Fermeture exceptionnelle, retour demain'); + await page.getByRole('button', { name: 'Ajouter' }).click(); + await expect(page.getByRole('status')).toContainText(/Modèle enregistré/); + + // The point of a template is that it turns up elsewhere without retyping. + await page.goto('/admin/exceptions'); + await page.getByLabel('Modèle de message').first().selectOption({ label: 'Fermeture exceptionnelle, retour demain' }); + await expect(page.getByLabel(/Message affiché/).first()).toHaveValue( + 'Fermeture exceptionnelle, retour demain', + ); +}); + test('the counter warns before a message stops fitting', async ({ page }) => { await signIn(page, 'admin'); await page.goto('/admin/messages'); diff --git a/lib/screen/contract.ts b/lib/screen/contract.ts index 686cc55..417ba33 100644 --- a/lib/screen/contract.ts +++ b/lib/screen/contract.ts @@ -21,10 +21,11 @@ export const MESSAGE_MAX_CHARS = 120; export type ScreenStatus = 'OPEN' | 'CLOSED' | 'CLOSING_SOON' | 'OPENING_SOON'; /** - * Where the banner text came from: something a person wrote, or the automatic - * notice raised when the week departs from the reference schedule. + * Where the banner text came from: the reason written on today's exception, + * a free message somebody composed, or the automatic notice raised when the + * week departs from the reference schedule. */ -export type ScreenBannerKind = 'MESSAGE' | 'SCHEDULE_TODAY' | 'SCHEDULE_WEEK'; +export type ScreenBannerKind = 'EXCEPTION' | 'MESSAGE' | 'SCHEDULE_TODAY' | 'SCHEDULE_WEEK'; export type ScreenToday = { date_fr: string; diff --git a/lib/screen/preview-time.test.ts b/lib/screen/preview-time.test.ts new file mode 100644 index 0000000..3ca78cd --- /dev/null +++ b/lib/screen/preview-time.test.ts @@ -0,0 +1,47 @@ +import { describe, expect, it } from 'vitest'; + +import { parsePreviewTime, PREVIEW_RANGE_DAYS } from './preview-time'; + +const NOW = new Date('2026-09-23T08:00:00Z'); + +describe('parsePreviewTime', () => { + it('defaults to now when nothing is asked for', () => { + expect(parsePreviewTime(null, NOW)).toEqual({ at: NOW, isNow: true }); + }); + + it('accepts a moment in the future', () => { + const result = parsePreviewTime('2026-09-24T08:00:00Z', NOW); + expect(result.at.toISOString()).toBe('2026-09-24T08:00:00.000Z'); + expect(result.isNow).toBe(false); + }); + + it('accepts a local datetime as a browser sends it', () => { + // has no timezone; it is read as local time. + expect(parsePreviewTime('2026-12-24T10:00', NOW).at.getFullYear()).toBe(2026); + }); + + it('accepts a moment in the past', () => { + expect(parsePreviewTime('2026-09-20T08:00:00Z', NOW).isNow).toBe(false); + }); + + it('falls back to now on an unparseable value', () => { + // Better a correct screen than a confident rendering of nonsense. + expect(parsePreviewTime('demain matin', NOW)).toEqual({ at: NOW, isNow: true }); + expect(parsePreviewTime('', NOW)).toEqual({ at: NOW, isNow: true }); + }); + + it('refuses a moment beyond the planning horizon', () => { + const far = new Date(NOW.getTime() + (PREVIEW_RANGE_DAYS + 1) * 86_400_000); + expect(parsePreviewTime(far.toISOString(), NOW).isNow).toBe(true); + }); + + it('accepts a moment just inside the horizon', () => { + const edge = new Date(NOW.getTime() + (PREVIEW_RANGE_DAYS - 1) * 86_400_000); + expect(parsePreviewTime(edge.toISOString(), NOW).isNow).toBe(false); + }); + + it('treats a moment within the minute as now', () => { + const almost = new Date(NOW.getTime() + 30_000); + expect(parsePreviewTime(almost.toISOString(), NOW).isNow).toBe(true); + }); +}); diff --git a/lib/screen/preview-time.ts b/lib/screen/preview-time.ts new file mode 100644 index 0000000..f9ab4c9 --- /dev/null +++ b/lib/screen/preview-time.ts @@ -0,0 +1,32 @@ +/** + * Reading the moment a preview is asked for. + * + * The whole display pipeline is already a function of "now", so showing the + * panel as it will be next Tuesday costs nothing but passing a different + * instant. What it does need is a bound: an unparseable or absurd value + * should not render a screen for the year 3000 and leave someone believing it. + */ + +/** As far ahead or behind as a shop plausibly plans. */ +export const PREVIEW_RANGE_DAYS = 400; + +export type PreviewTime = { at: Date; isNow: boolean }; + +export function parsePreviewTime(raw: string | null, now: Date): PreviewTime { + if (!raw) { + return { at: now, isNow: true }; + } + + const parsed = new Date(raw); + if (Number.isNaN(parsed.getTime())) { + return { at: now, isNow: true }; + } + + const limit = PREVIEW_RANGE_DAYS * 86_400_000; + const distance = parsed.getTime() - now.getTime(); + if (Math.abs(distance) > limit) { + return { at: now, isNow: true }; + } + + return { at: parsed, isNow: Math.abs(distance) < 60_000 }; +} diff --git a/lib/screen/viewmodel.test.ts b/lib/screen/viewmodel.test.ts index 86c34de..0a2c44b 100644 --- a/lib/screen/viewmodel.test.ts +++ b/lib/screen/viewmodel.test.ts @@ -212,11 +212,140 @@ describe('buildScreenPayload', () => { expect(payload.week[3]?.is_closed).toBe(true); }); + it('shows why today’s hours changed, while the door is shut', () => { + // Monday 2026-09-21, closed all day, with a reason written on it. + const payload = buildScreenPayload( + input({ + now: new Date('2026-09-21T10:00:00Z'), + ctx: context({ + exceptions: [ + { + date: '2026-09-21', + isClosed: true, + slots: null, + reason: 'TEMPORARY', + noteFr: 'Fermé pour inventaire, retour mardi', + noteEn: 'Closed for stocktaking, back on Tuesday', + source: 'MANUAL', + }, + ], + }), + }), + ); + + expect(payload.banner).toEqual({ + kind: 'EXCEPTION', + text_fr: 'Fermé pour inventaire, retour mardi', + text_en: 'Closed for stocktaking, back on Tuesday', + }); + }); + + it('drops the reason the moment the shop opens', () => { + // A late opening, seen from after it: the notice explaining it is worse + // than useless once the door is open. + const lateOpening = context({ + exceptions: [ + { + date: '2026-09-22', + isClosed: false, + slots: [{ open: '14:00', close: '18:30' }], + reason: 'TEMPORARY', + noteFr: 'Ouverture à 14:00', + noteEn: 'Opening at 2:00 pm', + source: 'MANUAL', + }, + ], + }); + + // 12:00 local, still shut: the reason is shown. + expect( + buildScreenPayload(input({ now: new Date('2026-09-22T10:00:00Z'), ctx: lateOpening })) + .banner?.kind, + ).toBe('EXCEPTION'); + + // 15:00 local, open: it is gone, and the automatic notice takes over. + const afterOpening = buildScreenPayload( + input({ now: new Date('2026-09-22T13:00:00Z'), ctx: lateOpening }), + ); + expect(afterOpening.banner?.kind).not.toBe('EXCEPTION'); + expect(afterOpening.banner?.text_fr).not.toContain('Ouverture à 14:00'); + }); + + it('puts the reason ahead of a free message while the shop is shut', () => { + // "Closed this afternoon" is what someone at the door needs; "new + // collection in store" can wait. + const payload = buildScreenPayload( + input({ + now: new Date('2026-09-21T10:00:00Z'), + ctx: context({ + exceptions: [ + { + date: '2026-09-21', + isClosed: true, + slots: null, + reason: 'TEMPORARY', + noteFr: 'Fermeture exceptionnelle', + noteEn: 'Exceptionally closed', + source: 'MANUAL', + }, + ], + }), + messages: [ + { + textFr: 'Nouvelle collection en boutique', + textEn: 'New collection in store', + startsAt: null, + endsAt: null, + priority: 9, + isActive: true, + }, + ], + }), + ); + + expect(payload.banner?.text_fr).toBe('Fermeture exceptionnelle'); + }); + + it('falls back to the free message when the exception has no reason', () => { + const payload = buildScreenPayload( + input({ + now: new Date('2026-09-21T10:00:00Z'), + ctx: context({ + exceptions: [ + { + date: '2026-09-21', + isClosed: true, + slots: null, + reason: 'TEMPORARY', + noteFr: null, + noteEn: null, + source: 'MANUAL', + }, + ], + }), + messages: [ + { + textFr: 'Nouvelle collection', + textEn: 'New collection', + startsAt: null, + endsAt: null, + priority: 0, + isActive: true, + }, + ], + }), + ); + + expect(payload.banner).toMatchObject({ kind: 'MESSAGE', text_fr: 'Nouvelle collection' }); + }); + it('carries no banner when the shop has nothing to say', () => { expect(buildScreenPayload(input()).banner).toBeNull(); }); it('raises the automatic banner when only today departs from the reference week', () => { + // No reason written on the exception: that is what leaves the automatic + // notice to speak. With one, the reason would take the banner instead. const payload = buildScreenPayload( input({ ctx: context({ @@ -226,8 +355,8 @@ describe('buildScreenPayload', () => { isClosed: false, slots: [{ open: '14:00', close: '18:30' }], reason: 'TEMPORARY', - noteFr: 'Ouverture retardée', - noteEn: 'Late opening', + noteFr: null, + noteEn: null, source: 'MANUAL', }, ], diff --git a/lib/screen/viewmodel.ts b/lib/screen/viewmodel.ts index 3b10b75..85b5a98 100644 --- a/lib/screen/viewmodel.ts +++ b/lib/screen/viewmodel.ts @@ -26,7 +26,7 @@ import { type NextChange, } from '@/lib/schedule/format'; import { detectDivergence, getCurrentStatus, resolveCivilDay } from '@/lib/schedule/resolver'; -import type { ScheduleContext } from '@/lib/schedule/types'; +import type { ScheduleContext, ShopStatus } from '@/lib/schedule/types'; import { AUTO_BANNERS, @@ -112,7 +112,7 @@ export function buildScreenPayload({ is_exception: status.today.isException, }, week: buildWeek(today, ctx), - banner: buildBanner(now, ctx, messages), + banner: buildBanner(now, ctx, messages, status, isOpenNow), }; } @@ -138,8 +138,29 @@ function buildBanner( now: Date, ctx: ScheduleContext, messages: MessageCandidate[], + status: ShopStatus, + isOpenNow: boolean, ): ScreenBanner | null { - // A message someone took the trouble to write always wins the space. + // The reason today's hours changed, while the door is shut. + // + // It outranks a free message on purpose: "closed this afternoon, back + // tomorrow" is what someone standing outside needs, and "new collection in + // store" can wait. And it disappears the moment the shop opens — a notice + // explaining a late opening is worse than useless once the door is open. + // + // `isOpenNow` is the state at this minute, not the day's: a day that opens + // at 14:00 has opening hours all morning while its door is shut, and that + // morning is exactly when the reason needs to be on screen. + const exceptionNote = status.today.isException && !isOpenNow ? status.today : null; + if (exceptionNote?.noteFr) { + return { + kind: 'EXCEPTION', + text_fr: clamp(exceptionNote.noteFr), + text_en: clamp(exceptionNote.noteEn ?? ''), + }; + } + + // Otherwise a message someone took the trouble to write wins the space. const message = selectActiveMessage(messages, now); if (message) { return { diff --git a/lib/templates.ts b/lib/templates.ts new file mode 100644 index 0000000..72c9788 --- /dev/null +++ b/lib/templates.ts @@ -0,0 +1,16 @@ +import type { Template } from '@/app/admin/components/TemplatePicker'; +import { prisma } from '@/lib/db'; + +/** + * The saved phrases, in the order the picker should offer them. + * + * Loaded by every page that composes a message, which is the point: a phrase + * written once should be reachable everywhere without being retyped. + */ +export async function loadTemplates(): Promise { + const rows = await prisma.messageTemplate.findMany({ + orderBy: [{ sortOrder: 'asc' }, { createdAt: 'asc' }], + select: { id: true, textFr: true }, + }); + return rows; +} diff --git a/prisma/migrations/20260923072416_message_templates/migration.sql b/prisma/migrations/20260923072416_message_templates/migration.sql new file mode 100644 index 0000000..93af82e --- /dev/null +++ b/prisma/migrations/20260923072416_message_templates/migration.sql @@ -0,0 +1,19 @@ +-- CreateTable +CREATE TABLE "message_templates" ( + "id" TEXT NOT NULL, + "textFr" TEXT NOT NULL, + "textEn" TEXT, + "translationStatus" "TranslationStatus" NOT NULL DEFAULT 'PENDING', + "sortOrder" INTEGER NOT NULL DEFAULT 0, + "createdBy" TEXT, + "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, + "updatedAt" TIMESTAMP(3) NOT NULL, + + CONSTRAINT "message_templates_pkey" PRIMARY KEY ("id") +); + +-- CreateIndex +CREATE INDEX "message_templates_sortOrder_idx" ON "message_templates"("sortOrder"); + +-- CreateIndex +CREATE UNIQUE INDEX "message_templates_textFr_key" ON "message_templates"("textFr"); diff --git a/prisma/schema.prisma b/prisma/schema.prisma index f1b6d05..64d31a8 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -149,6 +149,28 @@ model Message { @@map("messages") } +/// A reusable phrase, written once and offered wherever a message is composed. +/// +/// The shop writes the same handful of notices over and over — "fermeture +/// exceptionnelle", "congés d'été", "ouverture retardée". Keeping them here +/// means they are translated once, worded consistently, and correctable in one +/// place rather than in whichever exception happens to carry a typo. +model MessageTemplate { + id String @id @default(cuid()) + textFr String + textEn String? + translationStatus TranslationStatus @default(PENDING) + /// Ordering in the picker; the most-used phrases belong at the top. + sortOrder Int @default(0) + createdBy String? + createdAt DateTime @default(now()) + updatedAt DateTime @updatedAt + + @@unique([textFr]) + @@index([sortOrder]) + @@map("message_templates") +} + /// Keyed by sha256 of the French source, so the same text is never paid for /// twice. The model is part of the key: a model change invalidates nothing, /// it simply misses and re-translates. diff --git a/tests/integration/helpers.ts b/tests/integration/helpers.ts index 0e74c0b..b9eea46 100644 --- a/tests/integration/helpers.ts +++ b/tests/integration/helpers.ts @@ -29,6 +29,7 @@ export async function resetDatabase(): Promise { await prisma.vacationPeriod.deleteMany(); await prisma.publicHoliday.deleteMany(); await prisma.message.deleteMany(); + await prisma.messageTemplate.deleteMany(); await prisma.weeklySchedule.deleteMany(); await prisma.settings.deleteMany(); diff --git a/tests/integration/vacations-action.test.ts b/tests/integration/vacations-action.test.ts index f936aaf..963e870 100644 --- a/tests/integration/vacations-action.test.ts +++ b/tests/integration/vacations-action.test.ts @@ -28,7 +28,13 @@ describe.skipIf(!hasDatabase)('vacation actions', () => { labelFr: ' Congés d’été ', }); - expect(result).toEqual({ ok: true }); + // The id comes back so the caller can translate the label without having + // to ask which row was "the last one". + expect(result).toMatchObject({ ok: true }); + if (result.ok) { + expect(result.id).toEqual(expect.any(String)); + } + const stored = await prisma.vacationPeriod.findMany(); expect(stored).toHaveLength(1); // The label is trimmed: it goes straight onto the shop window. @@ -66,7 +72,7 @@ describe.skipIf(!hasDatabase)('vacation actions', () => { labelFr: 'Suite', }); - expect(result).toEqual({ ok: true }); + expect(result).toMatchObject({ ok: true }); expect(await prisma.vacationPeriod.count()).toBe(2); });