julian
78ca58d264
The vocabulary is a code constant (the model's contract), the site only maps it; a chip reading VETURË beside a site category named Veture blurred exactly that (user, 2026-09-06). Translation stays as the tooltip; a hint names where the list lives. Claude-Session: https://claude.ai/code/session_01FWncR69HgGPuei1dLrW3cU
290 lines
13 KiB
TypeScript
290 lines
13 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { CARWASH_PAY_AT, CARWASH_PROGRAM_ID, CARWASH_VALIDATION_MODES, VEHICLE_CLASSES, type CarWashPayAt, type VehicleClass } from "@parking/shared";
|
||
import { fetchValidationPrograms, type ValidationProgramView } from "../../api.js";
|
||
import { StationForm, defaultProgram } from "../../ValidationSetup.js";
|
||
import { fetchCarwashSettings, saveCarwashSettings, type CarwashSettingsView } from "./api.js";
|
||
|
||
// Setup → Car wash: the master data (vehicle categories, services, the category ×
|
||
// service price matrix) and the parking SPONSORSHIP a wash grants — the latter is a
|
||
// validation program (id "carwash"), composed with the same editor the merchant
|
||
// programs use. See wiki/decisions/venue-modules.md ("v1 answers").
|
||
|
||
type Item = { id?: string; name: string; active: boolean; visionClasses?: VehicleClass[] };
|
||
|
||
const fromMinor = (v: number | undefined): string => (v == null ? "" : (v / 100).toFixed(2).replace(/\.00$/, ""));
|
||
const toMinor = (s: string): number | null => {
|
||
const v = s.trim();
|
||
if (v === "") return null;
|
||
const n = Number(v);
|
||
return Number.isFinite(n) && n >= 0 ? Math.round(n * 100) : null;
|
||
};
|
||
|
||
function ListEditor({
|
||
title,
|
||
items,
|
||
onChange,
|
||
addLabel,
|
||
visionMap,
|
||
}: {
|
||
title: string;
|
||
items: Item[];
|
||
onChange: (items: Item[]) => void;
|
||
addLabel: string;
|
||
/** Categories only: offer the vision vocabulary as chips under each row — the site's
|
||
* own "car, sedan → Vetura" mapping (venue-modules.md §Vehicle category). The chips
|
||
* show the CANONICAL ids (the model's fixed vocabulary, a code constant), never a
|
||
* translation, so they read as what they are: not site text (user, 2026-09-06). */
|
||
visionMap?: boolean;
|
||
}) {
|
||
const { t } = useTranslation();
|
||
const toggleClass = (i: number, cls: VehicleClass) =>
|
||
onChange(
|
||
items.map((x, j) => {
|
||
if (j !== i) return x;
|
||
const cur = new Set(x.visionClasses ?? []);
|
||
cur.has(cls) ? cur.delete(cls) : cur.add(cls);
|
||
return { ...x, visionClasses: VEHICLE_CLASSES.filter((c) => cur.has(c)) };
|
||
}),
|
||
);
|
||
return (
|
||
<div className="grid gap-1.5">
|
||
<div className="text-[0.6875rem] uppercase tracking-wider text-term-muted">{title}</div>
|
||
{items.map((it, i) => (
|
||
<div key={it.id ?? `new-${i}`} className="grid gap-1">
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
className="input flex-1"
|
||
value={it.name}
|
||
onChange={(e) => onChange(items.map((x, j) => (j === i ? { ...x, name: e.target.value } : x)))}
|
||
/>
|
||
<label className="flex items-center gap-1 text-[0.75rem] text-term-muted">
|
||
<input
|
||
type="checkbox"
|
||
className="accent-term-amber"
|
||
checked={it.active}
|
||
onChange={(e) => onChange(items.map((x, j) => (j === i ? { ...x, active: e.target.checked } : x)))}
|
||
/>
|
||
{t("wash.active")}
|
||
</label>
|
||
<button type="button" className="btn btn-ghost btn-sm" onClick={() => onChange(items.filter((_, j) => j !== i))}>
|
||
✕
|
||
</button>
|
||
</div>
|
||
{visionMap && (
|
||
<div className="flex flex-wrap items-center gap-1 pl-1">
|
||
<span className="mr-1 text-[0.625rem] uppercase tracking-wider text-term-muted" title={t("wash.visionClassesHint")}>{t("wash.visionClasses")}</span>
|
||
{VEHICLE_CLASSES.map((cls) => {
|
||
const on = (it.visionClasses ?? []).includes(cls);
|
||
return (
|
||
<button
|
||
key={cls}
|
||
type="button"
|
||
className={`btn btn-sm font-mono lowercase ${on ? "btn-primary" : "btn-ghost"}`}
|
||
title={t(`vehicleClass.${cls}`)}
|
||
onClick={() => toggleClass(i, cls)}
|
||
>
|
||
{cls}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
<button type="button" className="btn btn-sm self-start" onClick={() => onChange([...items, { name: "", active: true }])}>
|
||
+ {addLabel}
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function CarWashSetup({ canEdit }: { canEdit: boolean }) {
|
||
const { t } = useTranslation();
|
||
const [settings, setSettings] = useState<CarwashSettingsView | null>(null);
|
||
const [categories, setCategories] = useState<Item[]>([]);
|
||
const [services, setServices] = useState<Item[]>([]);
|
||
/** Price inputs keyed "categoryId|serviceId" (major units as typed). New rows have no
|
||
* id yet, so the matrix keys use the row INDEX until saved. */
|
||
const [prices, setPrices] = useState<Record<string, string>>({});
|
||
/** Where the money is taken — a SITE policy (user, 2026-09-05), not a per-order radio. */
|
||
const [payAt, setPayAt] = useState<CarWashPayAt>("booth");
|
||
/** Confidence floor for a vision read to flag a downgrade (percent, as typed). */
|
||
const [threshold, setThreshold] = useState("80");
|
||
const [msg, setMsg] = useState<string | null>(null);
|
||
const [program, setProgram] = useState<ValidationProgramView | null>(null);
|
||
|
||
function load() {
|
||
fetchCarwashSettings()
|
||
.then((s) => {
|
||
setSettings(s);
|
||
setCategories(s.categories.map((c) => ({ id: c.id, name: c.name, active: c.active, visionClasses: c.visionClasses })));
|
||
setServices(s.services.map((x) => ({ id: x.id, name: x.name, active: x.active })));
|
||
const p: Record<string, string> = {};
|
||
for (const r of s.prices) p[`${r.categoryId}|${r.serviceId}`] = fromMinor(r.priceMinor);
|
||
setPrices(p);
|
||
setPayAt(s.payAt);
|
||
setThreshold(String(Math.round(s.visionThreshold * 100)));
|
||
})
|
||
.catch((e) => setMsg((e as Error).message));
|
||
fetchValidationPrograms()
|
||
.then((r) => {
|
||
const existing = r.programs.find((p) => p.id === CARWASH_PROGRAM_ID);
|
||
setProgram(existing ?? { id: CARWASH_PROGRAM_ID, ...defaultProgram(CARWASH_PROGRAM_ID, t("wash.sponsorshipLabel")) });
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
useEffect(load, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||
|
||
const keyOf = (c: Item, ci: number, s: Item, si: number) => `${c.id ?? `#${ci}`}|${s.id ?? `#${si}`}`;
|
||
|
||
async function save() {
|
||
setMsg(null);
|
||
try {
|
||
const listBody = {
|
||
categories: categories.map((c) => ({ ...(c.id ? { id: c.id } : {}), name: c.name.trim(), active: c.active, visionClasses: c.visionClasses ?? [] })),
|
||
services: services.map((s) => ({ ...(s.id ? { id: s.id } : {}), name: s.name.trim(), active: s.active })),
|
||
};
|
||
// New rows have no id until the server assigns one, and the price matrix is keyed
|
||
// by ids — so save the lists first, map each new row to the id that came back (the
|
||
// server returns rows in the order sent), then save the prices in a second call.
|
||
// One button, two requests; the user just sees "Saved."
|
||
let cats = categories;
|
||
let svcs = services;
|
||
if (categories.some((c) => !c.id) || services.some((s) => !s.id)) {
|
||
// Keep only the prices whose rows survive this save (a removed row's prices
|
||
// would be refused as unknown ids).
|
||
const keepC = new Set(categories.map((c) => c.id).filter(Boolean));
|
||
const keepS = new Set(services.map((s) => s.id).filter(Boolean));
|
||
const first = await saveCarwashSettings({
|
||
...listBody,
|
||
prices: (settings?.prices ?? []).filter((p) => keepC.has(p.categoryId) && keepS.has(p.serviceId)),
|
||
});
|
||
cats = categories.map((c, i) => ({ ...c, id: c.id ?? first.categories[i]?.id }));
|
||
svcs = services.map((s, i) => ({ ...s, id: s.id ?? first.services[i]?.id }));
|
||
}
|
||
const priceRows: { categoryId: string; serviceId: string; priceMinor: number }[] = [];
|
||
categories.forEach((c, ci) =>
|
||
services.forEach((s, si) => {
|
||
const v = toMinor(prices[keyOf(c, ci, s, si)] ?? "");
|
||
const cid = cats[ci]?.id;
|
||
const sid = svcs[si]?.id;
|
||
if (v != null && cid && sid) priceRows.push({ categoryId: cid, serviceId: sid, priceMinor: v });
|
||
}),
|
||
);
|
||
const thr = Number(threshold);
|
||
const saved = await saveCarwashSettings({
|
||
categories: cats.map((c) => ({ ...(c.id ? { id: c.id } : {}), name: c.name.trim(), active: c.active, visionClasses: c.visionClasses ?? [] })),
|
||
services: svcs.map((s) => ({ ...(s.id ? { id: s.id } : {}), name: s.name.trim(), active: s.active })),
|
||
prices: priceRows,
|
||
payAt,
|
||
...(Number.isFinite(thr) && thr >= 0 && thr <= 100 ? { visionThreshold: thr / 100 } : {}),
|
||
});
|
||
setSettings(saved);
|
||
setPayAt(saved.payAt);
|
||
setThreshold(String(Math.round(saved.visionThreshold * 100)));
|
||
setCategories(saved.categories.map((c) => ({ id: c.id, name: c.name, active: c.active, visionClasses: c.visionClasses })));
|
||
setServices(saved.services.map((x) => ({ id: x.id, name: x.name, active: x.active })));
|
||
const p: Record<string, string> = {};
|
||
for (const r of saved.prices) p[`${r.categoryId}|${r.serviceId}`] = fromMinor(r.priceMinor);
|
||
setPrices(p);
|
||
setMsg(t("wash.saved"));
|
||
} catch (e) {
|
||
setMsg((e as Error).message);
|
||
}
|
||
}
|
||
|
||
const currency = settings?.currency ?? "";
|
||
|
||
return (
|
||
<div className="mt-6 flex flex-wrap items-start gap-6">
|
||
<section className="card w-full max-w-2xl p-4">
|
||
<div className="grid gap-4">
|
||
<ListEditor title={t("wash.categories")} items={categories} onChange={setCategories} addLabel={t("wash.addCategory")} visionMap />
|
||
<ListEditor title={t("wash.services")} items={services} onChange={setServices} addLabel={t("wash.addService")} />
|
||
|
||
<div>
|
||
<div className="text-[0.6875rem] uppercase tracking-wider text-term-muted">
|
||
{t("wash.prices")} {currency && <span className="normal-case tracking-normal">({currency})</span>}
|
||
</div>
|
||
<span className="hint">{t("wash.pricesHint")}</span>
|
||
{categories.length > 0 && services.length > 0 && (
|
||
<div className="mt-2 overflow-x-auto">
|
||
<table className="text-[0.75rem]">
|
||
<thead>
|
||
<tr>
|
||
<th className="py-1 pr-3 text-left text-term-muted"></th>
|
||
{services.map((s, si) => (
|
||
<th key={s.id ?? `#${si}`} className="py-1 pr-3 text-left">{s.name || "…"}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{categories.map((c, ci) => (
|
||
<tr key={c.id ?? `#${ci}`}>
|
||
<td className="py-1 pr-3 font-semibold">{c.name || "…"}</td>
|
||
{services.map((s, si) => {
|
||
const k = keyOf(c, ci, s, si);
|
||
return (
|
||
<td key={k} className="py-1 pr-3">
|
||
<input
|
||
className="input w-24 text-right tabular-nums"
|
||
value={prices[k] ?? ""}
|
||
disabled={!canEdit}
|
||
onChange={(e) => setPrices((p) => ({ ...p, [k]: e.target.value }))}
|
||
placeholder="—"
|
||
/>
|
||
</td>
|
||
);
|
||
})}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="field">
|
||
<span className="label">{t("wash.payAt")}</span>
|
||
<div className="flex gap-4 text-[0.75rem]">
|
||
{CARWASH_PAY_AT.map((v) => (
|
||
<label key={v} className="flex items-center gap-1.5">
|
||
<input type="radio" name="carwash-payAt" className="accent-term-amber" checked={payAt === v} disabled={!canEdit} onChange={() => setPayAt(v)} />
|
||
{t(v === "booth" ? "wash.payAtBooth" : "wash.payAtBay")}
|
||
</label>
|
||
))}
|
||
</div>
|
||
<span className="hint">{t(payAt === "booth" ? "wash.payAtBoothHint" : "wash.payAtBayHint")}</span>
|
||
</div>
|
||
<div className="field">
|
||
<span className="label">{t("wash.visionThreshold")}</span>
|
||
<div className="flex items-center gap-2">
|
||
<input className="input w-20 text-right tabular-nums" inputMode="numeric" value={threshold} disabled={!canEdit} onChange={(e) => setThreshold(e.target.value)} />
|
||
<span className="text-[0.75rem] text-term-muted">%</span>
|
||
</div>
|
||
<span className="hint">{t("wash.visionThresholdHint")}</span>
|
||
</div>
|
||
|
||
{canEdit && (
|
||
<div className="flex items-center gap-3">
|
||
<button type="button" className="btn btn-primary btn-sm" onClick={save}>{t("wash.save")}</button>
|
||
{msg && <span className="text-[0.75rem] text-term-muted">{msg}</span>}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
{canEdit && program && (
|
||
<section className="card w-full max-w-md p-4">
|
||
<div className="text-[0.6875rem] uppercase tracking-wider text-term-muted">{t("wash.sponsorship")}</div>
|
||
<span className="hint">{t("wash.sponsorshipHint")}</span>
|
||
<div className="mt-2">
|
||
<StationForm program={program} onSaved={setProgram} hideUsers modes={CARWASH_VALIDATION_MODES} />
|
||
</div>
|
||
</section>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|