Ticket orders
A React block (a whole screen) in Beamline's Shop app.
A customer's orders inside a support ticket, each action's effect said before it's done: orders and drafts kept apart, a paid draft shown once as its order; an address corrected from a saved one and checked for the country, the save's receipt kept even when the order can't be read again, said as possibly out of date; a cancellation with its refund and restock choices said in a sentence, the order's state and the refund's coming back apart; a refund whose amount and returned quantities are chosen separately, too much or a mixed payment stopped and handed off; a subscription's next charge skipped (it stays active) or the subscription cancelled at its provider, the reply to the customer its own step; and a marketplace order whose delivery is read again without messaging anyone, an order card previewed before it's sent, the ticket's status here and on the marketplace apart.
Use it for
- Support agents acting on a customer's orders from inside a ticket.
Not for
- Running the shop's order desk (orders-admin).
- Creating a new order (order-composer).
Anatomy
- header: the mark, the view (Orders · Subscription · Marketplace)
- orders: the orders (number, total, date, payment, shipping, from which draft) and the drafts apart (invoice, paid as which order)
- order: its state chips, lines, shipping, total, what can still be refunded, where it ships, Correct the address · Cancel the order · Refund or return
- address: Start from a saved address, the fields checked for the country, Save address, the receipt or the out-of-date copy with Read the order again
- cancel: why it can't, or Reason, refund or not, restock, email the customer, the sentence of what it does, Cancel order; the order's and refund's results apart
- refund: Refund amount, Items coming back (0 by default), restock, email, note, the sentence or why not, Refund; refund and return results apart
- subscription: product and provider, how often, next charge, as of when, Skip the next charge, Cancel the subscription, the result; Reply to the customer with whether it's sent
- marketplace: a different order named, the order, delivery steps, as of when, Read it again; the card preview, Send card; the ticket here and on the marketplace
States
- no orders; drafts; a converted draft
- address prefilled, from a saved one, edited, invalid, saving, saved, saved but out of date, failed
- can't cancel (cancelled, shipped); reviewing; cancelled with refund pending; failed
- refund only; refund and return; too much; mixed payment; partly completed; failed
- active; skipped; cancelled; old snapshot; refused; reply not sent; sent
- matching or not; stale; reading again; card preview; sending; sent; failed; channel without cards
Keyboard
- the views are a radio group; orders are buttons; Tab through each action's fields
- Cancel order, Refund, Skip and Cancel subscription ask once more before acting
Motion
Nothing animates beyond the parts' own feedback; nothing moves at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orders | Order[] | — | The customer's orders: lines, shipping, refundable amount, address, revision, gateways, source draft. |
drafts | DraftOrder[] | — | Draft orders with invoice state and the order each became. |
onSaveAddress | (orderId, address, revision) => Promise<{ receipt }> | — | Save the address against the order's revision; resolve with a receipt. |
onRefreshOrder | (orderId) => Promise<Order> | — | Read the order again after a change; reject and the shown copy is marked out of date. |
onCancel | (c: CancelInput) => Promise<{ refund }> | — | Cancel; the order's state and the refund's come back apart. |
onRefund | (r: RefundInput) => Promise<{ refund; return }> | — | Refund money and request returns, each its own result. |
subscription | Subscription | null | — | The provider's record: next charge, how often, as of when. |
onSkipCharge / onCancelSubscription | (…) => Promise | — | Act at the provider. |
onSendReply | (text) => Promise<unknown> | — | Send the reply; separate from any provider action. |
marketplace | MarketplaceOrder | null | — | The channel's order with delivery events, as of when, and whether it takes cards. |
now | string | — | "Now", for how old a snapshot is (ISO). |
defaultOrders | Order[] | — | |
onOrdersChange | ((o: Order[]) => void) | — | |
savedAddresses | Address[] | — | |
onSkipCharge | ((subscriptionId: string, chargeId: string) => Promise<{ nextChargeAt: string; }>) | — | |
onCancelSubscription | ((subscriptionId: string) => Promise<unknown>) | — | |
replyDraft | string | — | |
ticketOrderNumber | string | — | The order number the ticket names. |
onRefreshMarketplace | (() => Promise<MarketplaceOrder>) | — | |
onSendCard | (() => Promise<unknown>) | — | |
ticketStatus | { here: "closed" | "open"; there: "closed" | "open"; } | — | |
timeZone | string | — | |
defaultView | "marketplace" | "orders" | "subscription" | — | |
defaultOrderId | string | — | |
defaultAction | "address" | "cancel" | "refund" | null | — | |
product | string | — | |
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. |
Built from
- Avatar
- Button
- Checkbox
- Confirm morph
- Input
- Label
- Number field
- Radio cards
- Segmented control
- Select
- Spinner
- Switch
- Text morph
- Textarea
- Tooltip
Dependencies
lucide-react
Import
import { TicketOrders } from "@beamline/ticket-orders";Get it
Ticket orders 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
More in Shop
- Product editor: A product being made in a shop's back office, every value read as text at rest. The variant grid, grouped by the first option, lists each combination…
- Category manager: A shop's product categories, nested and ranked. Each category moves up, down or into another from its menu, and every move gets its own receipt (saving…
- Inventory item: One stock item in a shop's back office, apart from the variants that sell it (how many each uses per unit). Stock per location as stocked, reserved and…
- Plan comparison: Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in…
- Step form: The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the…
- Orders admin: A shop's order desk: today's orders and revenue, quick filters for what needs doing (to fulfil, unpaid, returns), a virtualised orders grid, and the…
- Order detail: One shop order with payment and fulfilment as two separate lanes. The header says where each stands (paid, partly paid, awaiting, refunded; not…
- Order board: A shop's orders as cards in its columns, on the shared kanban with drag and keyboard moves. Each card: number, estimate or work order, customer, vehicle…
- Order composer: An order made inside a support ticket: products found by name, each variant with its stock drawn and said (in stock, none, oversold, not known) and the…
- Draft orders: A draft order made for a customer in a shop's back office that reads like the order it will become. The lines lead: each with its variant and SKU or…
- Order changes: What happens to a shop order after it's placed. Edit: the order as it stands beside the requested version, each line marked new, changed (old → new…
- Special orders: Customers' special orders as demand to buy for, per outlet: To order apart from Ordered; each product's demand, what is reserved, incoming and on order…
- Order history and fills: Every order the account placed and every fill it got, for a period: totals for volume, fees, fill rate and maker share; orders with their status and how…
- Order ledger: Purchase orders as money. Each order's spend is drawn against its approved total (paid, billed, pending, what is left, and any overrun past the end…
- Record search: One search across connected records (customers, vehicles, orders) by name, phone, plate, VIN or order number. What the words look like is said (info)…
- Return queue: A queue of return cases. Search by return, order or customer, exactly (the default) or loosely; status tabs with counts, Requires attention first; a date…
- Return case: One return as one place where every act is its own. The return, its order (linked out) and the customer on three cards; the stage said on its tone. Items…
- Return request: Staff start a return from an order, and edit the reasons customers pick. New return: the order's lines as a checklist, each with its variant, price and…
- Purchase orders: A salon's purchase orders, received: the orders down the side, the chosen one beside them. Each line still due reads as a strip of received, this…
- Print quote: A print shop's quoting in three places. Quote: a group of garments that share one imprint and one quantity break, the group's pieces counted together and…
- Service estimate: An estimate for one vehicle. Services added from the catalogue (one not listed for this vehicle said on warning, fit unknown said); each with its lines…
- Job card: A technician's repair order, phone-first. The vehicle, the customer and when it's due in words (due at, due in, overdue by how long); an offline copy…
- Parts tracker: Parts across a shop's work orders: each with its number, the order and vehicle, supplier, quantity and cost (not known said), and where it is: ordered…
- Visit board: The staff board for a walk-in queue: visits move from waiting through called and serving to done today. Arrival (here or on the way), the place in the…