julian
cce99aadfd
A round of operator-facing fixes on the booth screen, shift views, and the
font-scale control. (Follows the font-scale feature in f706726, which used CSS
`zoom` — reverted here for the rem approach below.)
Font scaling (the A−/A+ control now actually works without breaking layout):
- The control scaled via CSS `zoom`, which also scaled viewport-locked containers
(h-screen frame, max-h-[90vh] modals) so at 130% modal headers/footers were
pushed off-screen. Reworked to scale TEXT only: converted every `text-[Npx]`
font utility to rem across the web app (~230 sites in 25 files + the
.label/.hint/.btn component classes + body in index.css; 16px root, so 100% is
visually identical), and applyFontScale now sets the ROOT font-size. vh/h-screen
layout stays put, so chrome never clips; tall content scrolls its own container.
Verified at 130%: text 12px→15.6px while the frame stayed viewport-height.
Live feed (event rows):
- Plate, badges and reason now flow inline after the identity and wrap only when
the row runs out of width — no more forced second line when there's empty space.
- Dropped the redundant TARGË via-badge (the plate chip already conveys it).
- Removed the Direction filter group (Hyrje/Dalje) — it duplicated the entry/exit
options already in the Type filter.
Active sessions:
- Rebuilt as a real table (Ticket/subscriber · Plate · Entry · Elapsed) so columns
align and long values (subscriber names, ticket ids) no longer truncate.
- Dropped the status column (an unpaid transient is normal; a subscriber shows ★ +
name; overstay keeps a row tint). Removed the now-redundant status filter; only
the Transient/Subscriber filter remains. Plate is now searchable (uses s.plate).
Shift report (close-shift modal + Shift History + printed Z-report slip):
- Removed the confusing `shitje` (subscription-sales) sub-line — Abonime is the
total; only the out-of-window part is broken out. subscriptionSalesMinor stays in
the signed payload (audit data), just not displayed/printed.
- Show the inherited opening cash ("Arka fillestare") above the expected drawer, so
opening + cash-taken = expected reads clearly. Money values no longer line-wrap.
Subscription edit modal:
- Fixed the 2-col grid alignment: a lone "only one version" cell was shifting every
following row by one column — it now emits a full label+value pair.
Removed orphaned i18n keys (fStatus*, fDir*, srcSubSales) from sq+en (parity kept).
Full workspace build/lint/test green.
Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
568 lines
26 KiB
TypeScript
568 lines
26 KiB
TypeScript
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import * as Dialog from "@radix-ui/react-dialog";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
boothExit,
|
|
can,
|
|
fetchSiteConfig,
|
|
lookupSession,
|
|
openShift,
|
|
paySession,
|
|
printReceipt,
|
|
printVoucher,
|
|
reopenBarrier,
|
|
voidTicket,
|
|
type SessionLookup,
|
|
} from "./api.js";
|
|
import { rootRoute } from "./router.js";
|
|
import { qk } from "./lib/query.js";
|
|
import { useShift } from "./lib/use-shift.js";
|
|
import { formatDuration, formatMoney, formatTime, formatRelativeDateTime } from "./lib/format.js";
|
|
import { SnapshotStrip } from "./ui/SnapshotStrip.js";
|
|
|
|
// The booth pay/exit modal. Opened when the operator submits a ticket id. Shows the
|
|
// session (entry, exit=now, duration, total owed) + entry/exit snapshots, takes
|
|
// payment, then EITHER prints an exit voucher (customer self-exits at a distant
|
|
// exit) OR fires the exit immediately (booth at/near the exit) — controlled by a
|
|
// checkbox defaulting from site_config.exitVoucherDefault. See booth-exit-flow.md.
|
|
|
|
type Phase = "review" | "paying" | "finishing" | "done" | "error";
|
|
|
|
export function BoothPayModal({ identity, onClose }: { identity: string; onClose: () => void }) {
|
|
const { t } = useTranslation();
|
|
const qc = useQueryClient();
|
|
const session = useQuery({ queryKey: ["session", identity], queryFn: () => lookupSession(identity) });
|
|
const config = useQuery({ queryKey: qk.siteConfig, queryFn: fetchSiteConfig });
|
|
|
|
// A shift must be open (and mine) before any pay/exit/voucher action — the booth
|
|
// money path is gated. The server enforces this too (409 no_shift); the modal
|
|
// surfaces it up front and offers a one-click open. See wiki/concepts/shift.md.
|
|
const { isOpen: shiftOpen, isMine: shiftMine, blockedByOther, heldBy } = useShift();
|
|
const shiftReady = shiftOpen && shiftMine;
|
|
|
|
const [tender, setTender] = useState<"cash" | "card">("cash");
|
|
const [printVoucherChecked, setPrintVoucherChecked] = useState<boolean | null>(null);
|
|
const [phase, setPhase] = useState<Phase>("review");
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [result, setResult] = useState<string | null>(null);
|
|
const [openingShift, setOpeningShift] = useState(false);
|
|
const [reprinting, setReprinting] = useState(false);
|
|
// For a PREPAID subscriber with nothing owed, the audited manual barrier open
|
|
// (assist a faulty reader / lost card) is no longer the default action — the
|
|
// operator reveals it explicitly so the modal isn't an always-on "open" button.
|
|
const [assistRevealed, setAssistRevealed] = useState(false);
|
|
// For a subscriber WINDOW CHARGE, payment and the barrier open are two steps: pay
|
|
// first, then the modal reveals "Open barrier". This flips true once paid.
|
|
const [windowPaid, setWindowPaid] = useState(false);
|
|
// Cancel (void) a wrongly-printed ticket: a small reason prompt, then a signed void.
|
|
const { user } = rootRoute.useRouteContext();
|
|
const canVoid = can(user, "event:void");
|
|
const [voiding, setVoiding] = useState(false); // reason prompt revealed
|
|
const [voidReason, setVoidReason] = useState("");
|
|
|
|
const s: SessionLookup | undefined = session.data;
|
|
// Checkbox default comes from config the first time it loads; operator can toggle.
|
|
const voucher = printVoucherChecked ?? config.data?.exitVoucherDefault ?? false;
|
|
|
|
const alreadyPaid = s?.paidAt != null;
|
|
const isSubscription = s?.subscription === true;
|
|
// OVERSTAY = paid but walk-back grace expired with no exit → a NEW period began; owes
|
|
// a fresh TOP-UP. Treat it as payable even though it's "already paid": the car must
|
|
// settle the new period's fee (s.amountMinor, priced from grace-expiry) before any
|
|
// exit. A normal within-grace paid session is NOT payable (it's settled). See
|
|
// booth-exit-flow.md / reopenBarrier server guard.
|
|
const isOverstay = s?.overstay === true;
|
|
// A subscription is normally prepaid (never charged). EXCEPTION: a time-window plan can
|
|
// owe an out-of-window TARIFF-BRIDGE charge (early entry / late exit) — lookup() returns
|
|
// it as s.amountMinor, and exit is GATED until it's paid. So a subscription IS payable
|
|
// when it has an amount due. Otherwise the only action is an audited assist-open.
|
|
const subWindowDue = !!(isSubscription && (s?.amountMinor ?? 0) > 0);
|
|
// Allow pay for an unpaid transient, an overstay top-up, or a subscriber window charge.
|
|
const canPay = !!(
|
|
shiftReady &&
|
|
s?.found &&
|
|
s.open &&
|
|
((!alreadyPaid && !isSubscription) || isOverstay || subWindowDue)
|
|
);
|
|
|
|
async function handleOpenBarrier() {
|
|
if (!s) return;
|
|
setError(null);
|
|
setPhase("finishing");
|
|
try {
|
|
const r = await reopenBarrier(identity);
|
|
setResult(r.opened ? t("pay.subBarrierOpened") : t("pay.paidExitRecorded", { reason: r.reason ?? t("booth.openManually") }));
|
|
void qc.invalidateQueries({ queryKey: qk.events });
|
|
void qc.invalidateQueries({ queryKey: qk.activeSessions });
|
|
setPhase("done");
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
setPhase("error");
|
|
}
|
|
}
|
|
|
|
// Subscriber out-of-window charge: take the payment, but DON'T exit yet. The
|
|
// barrier open is the operator's explicit second step (so the flow reads:
|
|
// pay → then Open barrier), mirroring the two-step the operator asked for.
|
|
async function handlePaySubscriptionWindow() {
|
|
if (!s) return;
|
|
setError(null);
|
|
setPhase("paying");
|
|
try {
|
|
await paySession(identity, tender);
|
|
setWindowPaid(true);
|
|
setPhase("review");
|
|
void qc.invalidateQueries({ queryKey: ["session", identity] });
|
|
void qc.invalidateQueries({ queryKey: qk.events });
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
setPhase("error");
|
|
}
|
|
}
|
|
|
|
async function handleOpenShift() {
|
|
setOpeningShift(true);
|
|
setError(null);
|
|
try {
|
|
await openShift();
|
|
void qc.invalidateQueries({ queryKey: qk.shift });
|
|
void qc.invalidateQueries({ queryKey: qk.events });
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
} finally {
|
|
setOpeningShift(false);
|
|
}
|
|
}
|
|
|
|
// A wrongly-printed ticket is cancellable only while it's a TRANSIENT, UNPAID, OPEN
|
|
// session (a subscription is closed via its own flow; a paid ticket is a refund). The
|
|
// server enforces all of this too; the UI just hides the action when it can't apply.
|
|
const canCancel = !!(canVoid && shiftReady && s?.found && s.open && !isSubscription && !alreadyPaid);
|
|
|
|
async function handleVoidTicket() {
|
|
const reason = voidReason.trim();
|
|
if (!reason) return;
|
|
setError(null);
|
|
setPhase("finishing");
|
|
try {
|
|
await voidTicket(identity, reason);
|
|
setResult(t("pay.ticketCancelled"));
|
|
void qc.invalidateQueries({ queryKey: qk.events });
|
|
void qc.invalidateQueries({ queryKey: qk.occupancy });
|
|
void qc.invalidateQueries({ queryKey: qk.activeSessions });
|
|
setPhase("done");
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
setPhase("error");
|
|
}
|
|
}
|
|
|
|
async function handleReprintReceipt() {
|
|
setReprinting(true);
|
|
setError(null);
|
|
try {
|
|
const r = await printReceipt(identity);
|
|
setResult(t("pay.receiptReprinted", { printer: r.printedBy }));
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
} finally {
|
|
setReprinting(false);
|
|
}
|
|
}
|
|
|
|
async function handlePayAndExit() {
|
|
if (!s) return;
|
|
setError(null);
|
|
try {
|
|
// 1. Take payment. For a first stay this is the only charge; for an OVERSTAY the
|
|
// session is "already paid" but a new period accrued — we still charge (canPay
|
|
// is true). A settled within-grace session is not payable (canPay false) and is
|
|
// skipped. The server re-quotes authoritatively (overstay → from grace-expiry).
|
|
if (canPay) {
|
|
setPhase("paying");
|
|
await paySession(identity, tender);
|
|
}
|
|
// 2. Voucher OR immediate exit.
|
|
setPhase("finishing");
|
|
if (voucher) {
|
|
// The voucher slip carries the payment detail + barcode + grace.
|
|
const r = await printVoucher(identity);
|
|
setResult(t("pay.voucherPrinted", { printer: r.printedBy }));
|
|
} else {
|
|
const r = await boothExit(identity);
|
|
// No voucher → auto-print a standalone payment receipt for transparency.
|
|
// Best-effort: a printer fault must NOT block the exit that already happened;
|
|
// the operator can reprint from the done screen.
|
|
let receiptNote = "";
|
|
try {
|
|
await printReceipt(identity);
|
|
} catch {
|
|
receiptNote = ` ${t("pay.receiptPrintFailed")}`;
|
|
}
|
|
setResult(
|
|
(r.opened
|
|
? t("pay.paidBarrierOpened")
|
|
: t("pay.paidExitRecorded", { reason: r.reason ?? t("booth.openManually") })) +
|
|
receiptNote,
|
|
);
|
|
}
|
|
// Refresh the live views.
|
|
void qc.invalidateQueries({ queryKey: qk.events });
|
|
void qc.invalidateQueries({ queryKey: qk.occupancy });
|
|
setPhase("done");
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
setPhase("error");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog.Root open onOpenChange={(o) => !o && onClose()}>
|
|
<Dialog.Portal>
|
|
<Dialog.Overlay className="fixed inset-0 z-40 bg-black/70" />
|
|
<Dialog.Content
|
|
className="fixed left-1/2 top-1/2 z-50 w-[560px] max-w-[95vw] -translate-x-1/2 -translate-y-1/2 rounded-term border border-term-border bg-term-panel font-mono text-term-text shadow-2xl"
|
|
aria-describedby={undefined}
|
|
>
|
|
<div className="flex items-center justify-between border-b border-term-border bg-term-panel-2 px-4 py-2">
|
|
<Dialog.Title className="m-0 text-[0.75rem] font-semibold uppercase tracking-wider text-term-amber">
|
|
{isSubscription
|
|
? `${t("pay.subscription")} · ${s?.subscriptionHolder ?? t("subs.unnamed")}`
|
|
: `${t("pay.ticket")} ${identity}`}
|
|
</Dialog.Title>
|
|
<Dialog.Close className="text-term-muted hover:text-term-text" aria-label={t("common.close")}>
|
|
✕
|
|
</Dialog.Close>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 p-4">
|
|
{/* Shift gate — block all actions until THIS operator has a shift open.
|
|
Another operator's open shift can't be operated under (no shared
|
|
till); only an "open mine" path when no shift is open at all. */}
|
|
{!shiftReady && (
|
|
<div className="rounded-term border border-term-amber bg-term-amber/5 px-3 py-2">
|
|
{blockedByOther ? (
|
|
<>
|
|
<div className="text-[0.75rem] font-semibold uppercase tracking-wider text-term-amber">
|
|
{t("shift.gateOtherTitle")}
|
|
</div>
|
|
<div className="mt-1 text-[0.75rem] text-term-text">
|
|
{t("shift.gateOtherBody", { operator: heldBy ?? "?" })}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="text-[0.75rem] font-semibold uppercase tracking-wider text-term-amber">
|
|
{t("shift.gateTitle")}
|
|
</div>
|
|
<div className="mt-1 text-[0.75rem] text-term-text">{t("shift.gateBody")}</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleOpenShift}
|
|
disabled={openingShift}
|
|
className="btn btn-go btn-sm mt-2"
|
|
>
|
|
{openingShift ? t("shift.opening") : t("shift.openNow")}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{session.isLoading && <div className="text-term-muted">{t("pay.lookingUp")}</div>}
|
|
|
|
{s && !s.found && (
|
|
<div className="rounded-term border border-term-red px-3 py-2 text-term-red">
|
|
{t("pay.noSessionFound")}
|
|
</div>
|
|
)}
|
|
|
|
{s && s.found && !s.open && (
|
|
<div className="rounded-term border border-term-amber px-3 py-2 text-term-amber">
|
|
{t("pay.alreadyClosed", { time: formatTime(s.exitedAt) })}
|
|
</div>
|
|
)}
|
|
|
|
{s && s.found && s.open && (
|
|
<>
|
|
{/* Session figures */}
|
|
<div className="grid grid-cols-2 gap-x-6 gap-y-1 tabular-nums">
|
|
<Row label={t("pay.entry")} value={formatRelativeDateTime(s.enteredAt, t)} />
|
|
<Row label={t("pay.now")} value={formatTime(new Date().toISOString())} />
|
|
<Row
|
|
label={t("pay.duration")}
|
|
value={s.enteredAt ? formatDuration(s.enteredAt, new Date().toISOString()) : "—"}
|
|
/>
|
|
<Row
|
|
label={t("pay.statusLabel")}
|
|
value={
|
|
isSubscription
|
|
? t("pay.subscription")
|
|
: isOverstay
|
|
? t("pay.overstay")
|
|
: alreadyPaid
|
|
? t("pay.paid")
|
|
: t("pay.unpaid")
|
|
}
|
|
valueClass={
|
|
isSubscription
|
|
? "text-term-cyan"
|
|
: isOverstay
|
|
? "text-term-red"
|
|
: alreadyPaid
|
|
? "text-term-green"
|
|
: "text-term-amber"
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
{/* Total — a subscription is prepaid (no amount) UNLESS it owes an
|
|
out-of-window window charge; then show that amount. For an overstay the
|
|
amount is the TOP-UP delta, not the whole stay. */}
|
|
<div className="flex items-end justify-between rounded-term bg-term-panel-2 px-3 py-2">
|
|
<span className="text-[0.6875rem] uppercase tracking-wider text-term-muted">
|
|
{subWindowDue ? t("pay.windowCharge") : isSubscription ? t("pay.plan") : isOverstay ? t("pay.topUp") : t("pay.total")}
|
|
</span>
|
|
<span className="text-3xl font-bold text-term-cyan">
|
|
{subWindowDue && s.amountMinor != null && s.currency
|
|
? formatMoney(s.amountMinor, s.currency)
|
|
: isSubscription
|
|
? t("pay.prepaid")
|
|
: s.amountMinor != null && s.currency
|
|
? formatMoney(s.amountMinor, s.currency)
|
|
: alreadyPaid
|
|
? t("booth.badgePaid")
|
|
: t("pay.noTariff")}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Subscription guidance: an unpaid window charge explains the pay-first
|
|
gate; once paid, prompt the operator to open the barrier; a prepaid
|
|
subscriber sees the assist explanation only after revealing it. */}
|
|
{subWindowDue && !windowPaid ? (
|
|
<div className="rounded-term border border-term-amber/40 bg-term-amber/5 px-3 py-2 text-[0.75rem] text-term-text">
|
|
{t("pay.windowChargeHint")}
|
|
</div>
|
|
) : isSubscription && windowPaid ? (
|
|
<div className="rounded-term border border-term-green/40 bg-term-green/5 px-3 py-2 text-[0.75rem] text-term-text">
|
|
{t("pay.windowPaidHint")}
|
|
</div>
|
|
) : isSubscription && assistRevealed ? (
|
|
<div className="rounded-term border border-term-cyan/40 bg-term-cyan/5 px-3 py-2 text-[0.75rem] text-term-text">
|
|
{t("pay.subAssistHint")}
|
|
</div>
|
|
) : null}
|
|
|
|
{/* For an overstay, explain why a top-up is required (no free exit). */}
|
|
{isOverstay && (
|
|
<div className="rounded-term border border-term-red/40 bg-term-red/5 px-3 py-2 text-[0.75rem] text-term-text">
|
|
{t("pay.overstayHint")}
|
|
</div>
|
|
)}
|
|
|
|
{/* Snapshots */}
|
|
<SnapshotStrip identity={identity} />
|
|
|
|
{/* Tender — shown for any payable case (transient, overstay, OR a
|
|
subscriber window charge that's still unpaid). */}
|
|
{phase !== "done" && canPay && !(subWindowDue && windowPaid) && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[0.6875rem] uppercase tracking-wider text-term-muted">{t("pay.tender")}</span>
|
|
{(["cash", "card"] as const).map((tn) => (
|
|
<button
|
|
key={tn}
|
|
type="button"
|
|
onClick={() => setTender(tn)}
|
|
className={tender === tn ? "btn btn-primary btn-sm" : "btn btn-sm"}
|
|
>
|
|
{t(`pay.${tn}`)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Voucher checkbox (transient only; a subscriber doesn't self-exit). */}
|
|
{phase !== "done" && !isSubscription && (
|
|
<label className="flex items-center gap-2 text-[0.75rem]">
|
|
<input
|
|
type="checkbox"
|
|
className="accent-term-amber"
|
|
checked={voucher}
|
|
onChange={(e) => setPrintVoucherChecked(e.target.checked)}
|
|
/>
|
|
{t("pay.printExitVoucher")}
|
|
<span className="text-term-muted">{t("pay.selfExitHint")}</span>
|
|
</label>
|
|
)}
|
|
|
|
{/* Cancel-ticket reason prompt (revealed by the "Cancel ticket" button).
|
|
A few presets + free text; a reason is REQUIRED. Voiding appends a
|
|
signed `void` event — the entry is never edited. */}
|
|
{voiding && phase !== "done" && (
|
|
<div className="rounded-term border border-term-amber/50 bg-term-amber/5 px-3 py-2">
|
|
<div className="text-[0.6875rem] font-semibold uppercase tracking-wider text-term-amber">
|
|
{t("pay.cancelTicketTitle")}
|
|
</div>
|
|
<div className="mt-1 text-[0.75rem] text-term-text">{t("pay.cancelTicketHint")}</div>
|
|
<div className="mt-2 flex flex-wrap gap-1.5">
|
|
{(["misprint", "test", "wrongVehicle"] as const).map((k) => (
|
|
<button
|
|
key={k}
|
|
type="button"
|
|
onClick={() => setVoidReason(t(`pay.cancelReason.${k}`))}
|
|
className={voidReason === t(`pay.cancelReason.${k}`) ? "btn btn-primary btn-sm" : "btn btn-sm"}
|
|
>
|
|
{t(`pay.cancelReason.${k}`)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<input
|
|
className="input mt-2 w-full"
|
|
value={voidReason}
|
|
onChange={(e) => setVoidReason(e.target.value)}
|
|
placeholder={t("pay.cancelReasonPlaceholder")}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{error && <div className="rounded-term border border-term-red px-3 py-2 text-term-red">{error}</div>}
|
|
{result && (
|
|
<div className="rounded-term border border-term-green px-3 py-2 text-term-green">{result}</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex justify-end gap-2 pt-1">
|
|
{phase === "done" ? (
|
|
<>
|
|
{/* Reprint the payment receipt (slip jammed / customer asks).
|
|
Only for a charged session — a subscription has no payment. */}
|
|
{!isSubscription && (
|
|
<button
|
|
type="button"
|
|
onClick={handleReprintReceipt}
|
|
disabled={reprinting}
|
|
className="btn btn-sm"
|
|
>
|
|
{reprinting ? t("pay.reprinting") : t("pay.reprintReceipt")}
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="btn btn-primary btn-sm"
|
|
>
|
|
{t("common.close")}
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="btn btn-ghost btn-sm"
|
|
>
|
|
{t("common.cancel")}
|
|
</button>
|
|
{isSubscription ? (
|
|
subWindowDue && !windowPaid ? (
|
|
// Step 1 — a window charge is owed: take payment first. The
|
|
// barrier open is the explicit next step (revealed once paid).
|
|
<button
|
|
type="button"
|
|
onClick={handlePaySubscriptionWindow}
|
|
disabled={!shiftReady || phase === "paying"}
|
|
className="btn btn-go btn-lg"
|
|
>
|
|
{phase === "paying" ? t("pay.takingPayment") : t("pay.payWindowCharge")}
|
|
</button>
|
|
) : windowPaid || assistRevealed ? (
|
|
// The audited barrier open. Shown only AFTER a window charge is
|
|
// settled, or after the operator explicitly reveals the assist —
|
|
// never as the default action for a prepaid subscriber.
|
|
<button
|
|
type="button"
|
|
onClick={handleOpenBarrier}
|
|
disabled={!shiftReady || phase === "finishing"}
|
|
className="btn btn-pay btn-lg"
|
|
>
|
|
{phase === "finishing" ? t("pay.opening") : t("booth.openBarrier")}
|
|
</button>
|
|
) : (
|
|
// Prepaid, nothing owed: no default open. A small reveal exposes
|
|
// the audited manual open for a faulty reader / lost card.
|
|
<button
|
|
type="button"
|
|
onClick={() => setAssistRevealed(true)}
|
|
disabled={!shiftReady}
|
|
className="btn btn-ghost btn-sm"
|
|
>
|
|
{t("pay.assistOpenReveal")}
|
|
</button>
|
|
)
|
|
) : voiding ? (
|
|
// Cancel-ticket confirm (reason prompt is shown above).
|
|
<button
|
|
type="button"
|
|
onClick={handleVoidTicket}
|
|
disabled={!voidReason.trim() || phase === "finishing"}
|
|
className="btn btn-danger btn-lg"
|
|
>
|
|
{phase === "finishing" ? t("pay.cancelling") : t("pay.confirmCancelTicket")}
|
|
</button>
|
|
) : (
|
|
<>
|
|
{/* Cancel a wrongly-printed ticket (transient, unpaid, open only;
|
|
gated on event:void). Reveals the reason prompt above. */}
|
|
{canCancel && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setVoiding(true)}
|
|
className="btn btn-ghost btn-sm text-term-red"
|
|
>
|
|
{t("pay.cancelTicket")}
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={handlePayAndExit}
|
|
disabled={!shiftReady || phase === "paying" || phase === "finishing"}
|
|
className="btn btn-go btn-lg"
|
|
>
|
|
{phase === "paying"
|
|
? t("pay.takingPayment")
|
|
: phase === "finishing"
|
|
? voucher
|
|
? t("pay.printingVoucher")
|
|
: t("pay.opening")
|
|
: alreadyPaid
|
|
? voucher
|
|
? t("pay.printVoucher")
|
|
: t("pay.openBarrier")
|
|
: voucher
|
|
? t("pay.payAndVoucher")
|
|
: t("pay.payAndOpen")}
|
|
</button>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Dialog.Content>
|
|
</Dialog.Portal>
|
|
</Dialog.Root>
|
|
);
|
|
}
|
|
|
|
function Row({ label, value, valueClass = "" }: { label: string; value: string; valueClass?: string }) {
|
|
return (
|
|
<div className="flex items-baseline justify-between">
|
|
<span className="text-[0.6875rem] uppercase tracking-wider text-term-muted">{label}</span>
|
|
<span className={`text-sm ${valueClass}`}>{value}</span>
|
|
</div>
|
|
);
|
|
}
|