Add a per-event walk-in price and a POS tender to the door screen.
Events can now set an optional walk-in price (events.walk_in_price): null falls back to the ticket price, 0 is a free walk-in. It is set in the Create/Edit Event modal (EN/ES) and carried through create, update and duplicate, but it is internal: public event responses and the attendee-facing ticket/dashboard endpoints drop it, and only admin, organizer and staff callers receive it. The door screen no longer trusts the amount the client sends. It sends a quantity and the server prices the charge from the event record: walk-ins pay the walk-in price, existing tickets the ticket price. A typed amount is only honoured with amountOverride from admin/organizer and is written to audit_logs in the same transaction. The charged amount stays snapshotted on the payment row. POS is a new door tender for the physical card terminal. Staff pick POS, see the amount to key in, charge the card, then confirm with "Mark as paid"; it is then recorded like any other door payment (provider and method 'pos'). It can be switched off globally or per event via payment options, and shows up in the payments filters, bookings, revenue summaries and door takings. PosChargePanel is where an automatic terminal push would go later; nothing calls a terminal today. tickets.booking_source (online | walk_in | admin) records how a booking was made. The migration backfills walk-ins from the door screen's idempotency records; everything else stays online. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
515707c9e4
commit
b51c1360e2
@@ -8,7 +8,7 @@ import {
|
||||
} from '@heroicons/react/24/outline';
|
||||
import type { DoorAttendee, DoorPaymentMethod } from '@/lib/api';
|
||||
import { formatCurrency, parseDate, EVENT_TIMEZONE } from '@/lib/utils';
|
||||
import { PaymentButtons } from './PaymentButtons';
|
||||
import { PaymentButtons, type DoorCharge } from './PaymentButtons';
|
||||
|
||||
function checkinTime(checkinAt: string | null): string {
|
||||
if (!checkinAt) return '';
|
||||
@@ -23,6 +23,7 @@ const METHOD_LABELS: Record<DoorPaymentMethod, string> = {
|
||||
cash: 'cash',
|
||||
bitcoin: 'bitcoin',
|
||||
transfer: 'transfer',
|
||||
pos: 'POS',
|
||||
guest: 'guest',
|
||||
};
|
||||
|
||||
@@ -49,6 +50,8 @@ export function AttendeeRow({
|
||||
attendee,
|
||||
currency,
|
||||
price,
|
||||
methods,
|
||||
canOverrideAmount,
|
||||
expanded,
|
||||
flashing,
|
||||
busy,
|
||||
@@ -58,11 +61,13 @@ export function AttendeeRow({
|
||||
attendee: DoorAttendee;
|
||||
currency: string;
|
||||
price: number;
|
||||
methods: readonly DoorPaymentMethod[];
|
||||
canOverrideAmount: boolean;
|
||||
expanded: boolean;
|
||||
flashing: boolean;
|
||||
busy: boolean;
|
||||
onTap: () => void;
|
||||
onPay: (method: DoorPaymentMethod, amount: number) => void;
|
||||
onPay: (method: DoorPaymentMethod, charge: DoorCharge) => void;
|
||||
}) {
|
||||
const isCancelled = attendee.status === 'cancelled';
|
||||
const settled = attendee.paymentStatus === 'paid' || attendee.paymentStatus === 'comp';
|
||||
@@ -141,7 +146,14 @@ export function AttendeeRow({
|
||||
Reactivate as a walk-in — pick how they are paying.
|
||||
</p>
|
||||
)}
|
||||
<PaymentButtons price={price} currency={currency} onPay={onPay} disabled={busy} />
|
||||
<PaymentButtons
|
||||
price={price}
|
||||
currency={currency}
|
||||
methods={methods}
|
||||
canOverrideAmount={canOverrideAmount}
|
||||
onPay={onPay}
|
||||
disabled={busy}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -6,14 +6,29 @@ import {
|
||||
BanknotesIcon,
|
||||
BoltIcon,
|
||||
BuildingLibraryIcon,
|
||||
CreditCardIcon,
|
||||
GiftIcon,
|
||||
ChevronDownIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import type { DoorPaymentMethod } from '@/lib/api';
|
||||
import { formatCurrency } from '@/lib/utils';
|
||||
import { PosChargePanel } from './PosChargePanel';
|
||||
|
||||
// The four tenders staff can take at the door. One tap settles and checks in;
|
||||
// The tenders staff can take at the door. One tap settles and checks in;
|
||||
// long-press (or the chevron) opens multiples for someone paying for their group.
|
||||
// POS is the exception: it opens a confirm step, because the card is charged on
|
||||
// the terminal first (see PosChargePanel).
|
||||
|
||||
/**
|
||||
* What staff chose to charge. The server prices it from quantity; `amount` is
|
||||
* what the screen expects that to come to, and is only sent as a charge when
|
||||
* `override` is set (admin/organizer "Custom").
|
||||
*/
|
||||
export interface DoorCharge {
|
||||
quantity: number;
|
||||
amount: number;
|
||||
override?: boolean;
|
||||
}
|
||||
|
||||
const TENDERS: {
|
||||
method: DoorPaymentMethod;
|
||||
@@ -24,6 +39,7 @@ const TENDERS: {
|
||||
{ method: 'cash', label: 'Cash', icon: BanknotesIcon, className: 'bg-emerald-600 active:bg-emerald-700' },
|
||||
{ method: 'bitcoin', label: 'Bitcoin', icon: BoltIcon, className: 'bg-orange-500 active:bg-orange-600' },
|
||||
{ method: 'transfer', label: 'Transfer', icon: BuildingLibraryIcon, className: 'bg-blue-600 active:bg-blue-700' },
|
||||
{ method: 'pos', label: 'POS', icon: CreditCardIcon, className: 'bg-violet-600 active:bg-violet-700' },
|
||||
{ method: 'guest', label: 'Guest', icon: GiftIcon, className: 'bg-gray-600 active:bg-gray-700' },
|
||||
];
|
||||
|
||||
@@ -32,21 +48,32 @@ const LONG_PRESS_MS = 450;
|
||||
export function PaymentButtons({
|
||||
price,
|
||||
currency,
|
||||
methods,
|
||||
canOverrideAmount,
|
||||
onPay,
|
||||
disabled,
|
||||
}: {
|
||||
/** Unit price for one ticket, as the server will charge it. */
|
||||
price: number;
|
||||
currency: string;
|
||||
onPay: (method: DoorPaymentMethod, amount: number) => void;
|
||||
/** Tenders enabled for this event. */
|
||||
methods: readonly DoorPaymentMethod[];
|
||||
/** Admin/organizer may type a custom amount; the server enforces the same rule. */
|
||||
canOverrideAmount: boolean;
|
||||
onPay: (method: DoorPaymentMethod, charge: DoorCharge) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
// Which tender has its quick-amounts open. Guest is always free, so it never opens one.
|
||||
const [amountsFor, setAmountsFor] = useState<DoorPaymentMethod | null>(null);
|
||||
const [customOpen, setCustomOpen] = useState(false);
|
||||
const [customValue, setCustomValue] = useState('');
|
||||
// POS charge waiting for staff to confirm the terminal approved it.
|
||||
const [posCharge, setPosCharge] = useState<DoorCharge | null>(null);
|
||||
const [pressTimer, setPressTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
|
||||
const [longPressed, setLongPressed] = useState(false);
|
||||
|
||||
const tenders = TENDERS.filter((t) => methods.includes(t.method));
|
||||
|
||||
const openAmounts = (method: DoorPaymentMethod) => {
|
||||
if (method === 'guest') return;
|
||||
setAmountsFor(method);
|
||||
@@ -54,6 +81,15 @@ export function PaymentButtons({
|
||||
setCustomValue('');
|
||||
};
|
||||
|
||||
// Every tender settles immediately except POS, which stops at its confirm step.
|
||||
const charge = (method: DoorPaymentMethod, next: DoorCharge) => {
|
||||
if (method === 'pos') {
|
||||
setPosCharge(next);
|
||||
return;
|
||||
}
|
||||
onPay(method, next);
|
||||
};
|
||||
|
||||
const startPress = (method: DoorPaymentMethod) => {
|
||||
setLongPressed(false);
|
||||
const timer = setTimeout(() => {
|
||||
@@ -72,7 +108,7 @@ export function PaymentButtons({
|
||||
return;
|
||||
}
|
||||
if (disabled) return;
|
||||
onPay(method, method === 'guest' ? 0 : price);
|
||||
charge(method, { quantity: 1, amount: method === 'guest' ? 0 : price });
|
||||
};
|
||||
|
||||
const cancelPress = () => {
|
||||
@@ -81,6 +117,19 @@ export function PaymentButtons({
|
||||
setLongPressed(false);
|
||||
};
|
||||
|
||||
if (posCharge) {
|
||||
return (
|
||||
<PosChargePanel
|
||||
charge={posCharge}
|
||||
unitPrice={price}
|
||||
currency={currency}
|
||||
disabled={disabled}
|
||||
onConfirm={() => onPay('pos', posCharge)}
|
||||
onBack={() => setPosCharge(null)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (amountsFor) {
|
||||
const tender = TENDERS.find((t) => t.method === amountsFor)!;
|
||||
return (
|
||||
@@ -94,12 +143,12 @@ export function PaymentButtons({
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
<div className={clsx('grid gap-2', canOverrideAmount ? 'grid-cols-4' : 'grid-cols-3')}>
|
||||
{[1, 2, 3].map((qty) => (
|
||||
<button
|
||||
key={qty}
|
||||
disabled={disabled}
|
||||
onClick={() => onPay(tender.method, price * qty)}
|
||||
onClick={() => charge(tender.method, { quantity: qty, amount: price * qty })}
|
||||
className={clsx(
|
||||
'min-h-[56px] rounded-2xl font-bold text-white text-lg flex flex-col items-center justify-center leading-tight disabled:opacity-50 active:scale-[0.97] transition-transform',
|
||||
tender.className,
|
||||
@@ -111,15 +160,17 @@ export function PaymentButtons({
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
disabled={disabled}
|
||||
onClick={() => setCustomOpen((open) => !open)}
|
||||
className="min-h-[56px] rounded-2xl font-bold text-white text-sm bg-gray-700 active:bg-gray-600 disabled:opacity-50 active:scale-[0.97] transition-transform"
|
||||
>
|
||||
Custom
|
||||
</button>
|
||||
{canOverrideAmount && (
|
||||
<button
|
||||
disabled={disabled}
|
||||
onClick={() => setCustomOpen((open) => !open)}
|
||||
className="min-h-[56px] rounded-2xl font-bold text-white text-sm bg-gray-700 active:bg-gray-600 disabled:opacity-50 active:scale-[0.97] transition-transform"
|
||||
>
|
||||
Custom
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{customOpen && (
|
||||
{canOverrideAmount && customOpen && (
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="number"
|
||||
@@ -132,7 +183,7 @@ export function PaymentButtons({
|
||||
/>
|
||||
<button
|
||||
disabled={disabled || !customValue || Number(customValue) < 0}
|
||||
onClick={() => onPay(tender.method, Number(customValue))}
|
||||
onClick={() => charge(tender.method, { quantity: 1, amount: Number(customValue), override: true })}
|
||||
className={clsx(
|
||||
'min-h-[48px] px-5 rounded-xl font-bold text-white disabled:opacity-50 active:scale-[0.97] transition-transform',
|
||||
tender.className,
|
||||
@@ -147,8 +198,11 @@ export function PaymentButtons({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{TENDERS.map((tender) => (
|
||||
<div
|
||||
className="grid gap-2"
|
||||
style={{ gridTemplateColumns: `repeat(${tenders.length}, minmax(0, 1fr))` }}
|
||||
>
|
||||
{tenders.map((tender) => (
|
||||
<button
|
||||
key={tender.method}
|
||||
disabled={disabled}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
'use client';
|
||||
|
||||
import { CreditCardIcon } from '@heroicons/react/24/outline';
|
||||
import { formatCurrency } from '@/lib/utils';
|
||||
import type { DoorCharge } from './PaymentButtons';
|
||||
|
||||
// The POS step of the door screen.
|
||||
//
|
||||
// Unlike cash, the money is not in staff's hand when they pick POS: they first
|
||||
// key the amount into the physical card terminal, wait for approval, and only
|
||||
// then confirm here. So POS is two taps: pick POS (this panel opens with the
|
||||
// amount to type), then "Mark as paid", which records it through the same
|
||||
// door-checkin call as every other tender.
|
||||
//
|
||||
// Nothing talks to the terminal today. If an automatic amount push is added
|
||||
// later, it starts when this panel opens and its approval replaces (or pre-fills)
|
||||
// the manual confirmation below; the rest of the door flow stays unchanged.
|
||||
|
||||
export function PosChargePanel({
|
||||
charge,
|
||||
unitPrice,
|
||||
currency,
|
||||
disabled,
|
||||
onConfirm,
|
||||
onBack,
|
||||
}: {
|
||||
charge: DoorCharge;
|
||||
unitPrice: number;
|
||||
currency: string;
|
||||
disabled?: boolean;
|
||||
onConfirm: () => void;
|
||||
onBack: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between px-1">
|
||||
<p className="text-sm font-semibold text-white flex items-center gap-1.5">
|
||||
<CreditCardIcon className="w-5 h-5" />
|
||||
POS — charge on the terminal
|
||||
</p>
|
||||
<button onClick={onBack} className="text-sm text-gray-400 min-h-[48px] px-2 active:text-white">
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl bg-gray-900 border border-violet-500/40 px-4 py-3 text-center">
|
||||
<p className="text-[11px] uppercase tracking-wide text-gray-400">Amount to charge</p>
|
||||
<p className="text-3xl font-bold text-white tabular-nums">{formatCurrency(charge.amount, currency)}</p>
|
||||
{charge.override ? (
|
||||
<p className="text-xs text-amber-400 mt-0.5">Custom amount</p>
|
||||
) : charge.quantity > 1 ? (
|
||||
<p className="text-xs text-gray-400 mt-0.5">
|
||||
{charge.quantity} × {formatCurrency(unitPrice, currency)}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<button
|
||||
disabled={disabled}
|
||||
onClick={onConfirm}
|
||||
className="w-full min-h-[56px] rounded-2xl bg-violet-600 active:bg-violet-700 text-white text-lg font-bold disabled:opacity-50 active:scale-[0.98] transition-transform"
|
||||
>
|
||||
Mark as paid
|
||||
</button>
|
||||
<p className="text-xs text-gray-500 text-center px-2">
|
||||
Only tap once the terminal has approved the card.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -43,6 +43,7 @@ const METHOD_LABELS: Record<DoorPaymentMethod, string> = {
|
||||
cash: 'Cash',
|
||||
bitcoin: 'Bitcoin',
|
||||
transfer: 'Transfer',
|
||||
pos: 'POS',
|
||||
guest: 'Guest',
|
||||
};
|
||||
|
||||
@@ -52,6 +53,7 @@ function sessionTotals(entries: SessionEntry[]) {
|
||||
cash: { count: 0, total: 0 },
|
||||
bitcoin: { count: 0, total: 0 },
|
||||
transfer: { count: 0, total: 0 },
|
||||
pos: { count: 0, total: 0 },
|
||||
guest: { count: 0, total: 0 },
|
||||
};
|
||||
let grand = 0;
|
||||
|
||||
@@ -4,7 +4,8 @@ import { useState, useEffect, useRef } from 'react';
|
||||
import { UserPlusIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import type { DoorPaymentMethod } from '@/lib/api';
|
||||
import { PaymentButtons } from './PaymentButtons';
|
||||
import { formatCurrency } from '@/lib/utils';
|
||||
import { PaymentButtons, type DoorCharge } from './PaymentButtons';
|
||||
|
||||
export interface WalkInDraft {
|
||||
firstName: string;
|
||||
@@ -22,9 +23,14 @@ export const emptyWalkIn = (firstName = ''): WalkInDraft => ({
|
||||
ruc: '',
|
||||
});
|
||||
|
||||
const PRICE_SOURCE_LABELS: Record<'walk_in' | 'ticket', string> = {
|
||||
walk_in: 'Walk-in price',
|
||||
ticket: 'Ticket price (no walk-in price set)',
|
||||
};
|
||||
|
||||
/**
|
||||
* The pinned bottom row. Collapsed it is a single tap; expanded it is a first
|
||||
* name and four tenders. Email, phone and RUC live behind "Add details" so the
|
||||
* name, the walk-in price and the tenders. Email, phone and RUC live behind "Add details" so the
|
||||
* rare person who wants a receipt never slows down the queue behind them.
|
||||
*/
|
||||
export function WalkInRow({
|
||||
@@ -32,7 +38,10 @@ export function WalkInRow({
|
||||
expanded,
|
||||
draft,
|
||||
price,
|
||||
priceSource,
|
||||
currency,
|
||||
methods,
|
||||
canOverrideAmount,
|
||||
busy,
|
||||
onExpand,
|
||||
onChange,
|
||||
@@ -42,12 +51,16 @@ export function WalkInRow({
|
||||
typedText: string;
|
||||
expanded: boolean;
|
||||
draft: WalkInDraft;
|
||||
/** Walk-in unit price as resolved by the server. */
|
||||
price: number;
|
||||
priceSource: 'walk_in' | 'ticket';
|
||||
currency: string;
|
||||
methods: readonly DoorPaymentMethod[];
|
||||
canOverrideAmount: boolean;
|
||||
busy: boolean;
|
||||
onExpand: () => void;
|
||||
onChange: (draft: WalkInDraft) => void;
|
||||
onPay: (method: DoorPaymentMethod, amount: number) => void;
|
||||
onPay: (method: DoorPaymentMethod, charge: DoorCharge) => void;
|
||||
onCancel: () => void;
|
||||
}) {
|
||||
const [detailsOpen, setDetailsOpen] = useState(false);
|
||||
@@ -146,9 +159,16 @@ export function WalkInRow({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="px-1 pt-1">
|
||||
<p className="text-2xl font-bold text-white tabular-nums">{formatCurrency(price, currency)}</p>
|
||||
<p className="text-xs text-gray-400">{PRICE_SOURCE_LABELS[priceSource]}</p>
|
||||
</div>
|
||||
|
||||
<PaymentButtons
|
||||
price={price}
|
||||
currency={currency}
|
||||
methods={methods}
|
||||
canOverrideAmount={canOverrideAmount}
|
||||
onPay={onPay}
|
||||
disabled={busy || !draft.firstName.trim()}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user