Gift desk

A React block (a whole screen) in Beamline's Education app.

A gift or tickets taken in person, on a phone at an event or at a desk: the gift entered large in its currency, once or monthly (monthly said as an authorisation), the giver found on the record; the fee is your number, covered by the giver or taken from the gift, with gift, fee, what the organisation receives and the total each said; the public name can be anonymous while the record keeps the person. Tickets are counted against what is left (count-adjust), each with its holder, check-in its own choice. Card, cash or check: cash and check are recorded offline and wait for confirmation, never told as paid. The chosen giver shows as the record knows them: their picture, email and giving this year (or a first gift).

Use it for

Taking a gift or selling tickets in person: a charity's event night, a church's giving table, a school fair's box office, a museum's door.
Anywhere the fee, the public name and an offline payment must each be said apart before money is taken.

Not for

A shop's order desk with fulfilment and refunds (orders-admin).
An online checkout page (the website's own checkout).
Gifts entered in batches by a counting team (gift-batches).

Anatomy

header: the product's mark, the campaign, Gift or Tickets (segmented control) when tickets are on sale
gift entry: the amount (number field, set large, the currency said), quick amounts (chip group), Once or Monthly (segmented control), the giver (combobox)
tickets entry: each ticket type with its price; a count-adjust row against what is left, Sold out said, or a typed count when what is left isn't known; the buyer; one row per ticket with its holder, No holder yet said on the ticket
review (side, or under the entry on a phone): Giver covers the fee (its sentence names the fee and what the organisation receives, or says the fee is not known yet), Show as anonymous (the public name and the record said apart), Check them in now in tickets mode (off by default)
summary (description list): the gift or each ticket line, the fee and who pays it, what the organisation receives, the public name, check-in; then the total to take (a rolling figure)
paid by (radio cards): Card (its reader's state), Cash and Check (recorded offline)
the action (primary, full width, sticky on a phone): Take $51.75, Authorise $15.74 a month, Record $20 cash; Try again after a failure
result: complete, or recorded offline waiting for confirmation, with the ticket's paid or unpaid and checked-in state; Next clears the desk

States

amount entry: no amount, Take payment named without a figure
contact selected: the public name and the anonymous sentence name the person
review: every amount said apart; a fee not known is said, never 0
payment unavailable: no card reader, Card disabled with its reason, cash and check open
processing: the action pending, every entry held
failed: nothing taken, entries and the payment's key kept, Try again
pending offline confirmation: cash or check recorded, counts as paid only once confirmed; tickets unpaid until then
complete: the total and the person; tickets paid, checked in only if chosen
selecting tickets, sold out, how many left unknown, attendee missing (on the ticket and before Take)
look only (canTake false): the entries drawn, the permission said where the action would be
loading: shaped skeletons
phone: one column, the action sticky at the bottom
right to left: the rows and the counts mirror
reduced motion: through the tokens

Keyboard

Tab through the mode, the amount, quick amounts, frequency, the giver, the switches, the method and the action
On a ticket's count: Left/Right one ticket, Home/End none and every one left
The amount field takes ArrowUp/ArrowDown and typed digits (the phone's numeric keypad)

Motion

The total rolls to its new figure (slot-text) as the fee is covered or a ticket added; the mode switch's thumb slides; a ticket counted lands on its row (count-adjust). Nothing runs at rest.

Props

Prop	Type	Default	Description
`organisation` (required)	`string`	—	The organisation the gift is for, said in "Riverbend receives $48.40".
`campaign` (required)	`string`	—	The campaign or event, shown as the desk's title.
`currency`	`string`	—	ISO 4217 code; every amount is in its minor units.
`presets`	`number[]`	—	Quick amounts offered as chips, minor units.
`people`	`DeskPerson[]`	—	People to find as the giver, buyer or a ticket's holder.
`tickets`	`DeskTicket[]`	—	Ticket types; none hides the Tickets mode.
`feeFor`	`((amount: number, method: GiftMethod) => number \| null)`	—	Your processing fee for an amount and a method, minor units: 0 for none, null while not known (the screen says so and never shows a zero). Cash and check normally carry none.
`cardReader`	`"none" \| "ready"`	—	Whether a card can be taken now: "none" disables Card with its reason, cash and check stay open.
`onTakePayment`	`((draft: DeskDraft) => Promise<DeskResult>)`	—	Take or record the payment. Resolve with its status; reject to keep everything and offer Try again.
`mode`	`GiftDeskMode`	—	Gift or tickets, controlled with onModeChange; or defaultMode.
`defaultMode`	`GiftDeskMode`	—
`onModeChange`	`((mode: GiftDeskMode) => void)`	—
`defaultDraft`	`Partial<Omit<DeskDraft, "key" \| "total" \| "fee">>`	—	Entries to start from (a restored draft, a demo).
`canTake`	`boolean`	—	false: the person may look but not take payments (said where the action would be).
`loading`	`boolean`	—
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`onConnectReader`	`((kind: "reader" \| "phone") => Promise<unknown>)`	—	Connect a card reader when there is none: the phone's own contactless, or a paired reader. Resolve when it is ready; reject to say it was refused. Connecting never takes a payment; the entries stay as they are.

Built from

Dependencies

lucide-react

Import

import { GiftDesk } from "@beamline/gift-desk";

Get it

Gift desk is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Gift deskComplete system · $49

A gift or tickets taken in person, on a phone at an event or at a desk.

A gift at the door

Ana Ruiz gives $50 by card and covers the fee: gift, fee and total are said apart, and Riverbend receives the whole $50. Turn the fee off and it comes out of the gift instead; show her as anonymous and only the public name changes.

0 × 0full

Tickets at the box office

Two supper seats for Joy Achterberg out of the six left: one holder named, the other not yet. The family tables are sold out; how many dessert passes are left isn't known, so that count is typed. Check-in stays off unless chosen.

0 × 0full

Activity

The desk's last payments across three campaigns, each opening its own record: Lena's refund is its own figure, Sam's receipt failed while the payment is still pending, and the board appeal's amounts are restricted.

0 × 0full

States

One state at a time: no card reader connected (pairing fails, the phone's own contactless connects, the gift unchanged; cash and check stay open); a declined card that keeps every entry; cash recorded offline, waiting for confirmation; a monthly gift authorised; a sold-out ticket type; looking without the Cashier role; loading.

0 × 0full

About Gift desk

← Volunteer rota Gift batches →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Gift desk

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in Education