# Proposal payments A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Events & bookings](https://beamline.io/components/apps/events-bookings) app. Live demo: https://beamline.io/components/proposal-payments A travel proposal's money from the agent's side to the client's. Pricing: the price rule (markup on supplier cost, a fixed price, or net), what the client sees (one total, per person, each item) and how the client pays (payments off, the card held for suppliers, paid to you with a deposit), each with its consequence in one line, beside the client's view rendered from the same draft; an option whose supplier hasn't quoted shows Price to follow, a deposit outside 0–100 % is refused, unsaved and saved said (saving a card hold says nothing is held or charged until the client acts). Client approval, in preview mode on every step: one option, then its amount and the terms version with the proposal revision, the terms accepted, the card (or the provider's form still loading); Authorise sends the option, amount, terms and revision together; a declined card keeps everything but the card; the proposal is approved only with a receipt for this revision. Payment schedule: held on cards, collected and still owed as three totals (held never counted as paid; a cancelled hold leaves the held total), each payment's status in words, partly captured with how much, and overdue as a date. Pricing reads as the policy in three rows (rule with its markup, how the client sees prices, how they pay with the deposit), each changed in place with what it means beside it, over a table of the options with supplier cost, client price, the agency's margin and the deposit, each option's items (optional items) under it with prices that add up to the option's. ## Use it for - A travel agent or tour operator pricing a proposal, taking the client's approval with a card hold or deposit, and tracking what's held, collected and owed. - Any quote-to-payment flow where holds and payments must not be confused (event packages, custom orders). ## Not for - Invoices for work done ([invoices](https://beamline.io/components/invoices)). - A shop checkout (checkout). ## Anatomy - tabs: Pricing, Client approval, Payment schedule - pricing: the save bar; price rule (and markup) with its consequence; what the client sees; how the client pays and the deposit; the client's view (each option's price or Price to follow, the deposit, the client's button) - approval: the preview-mode line; 1 choose an option; 2 the option, amount, terms version, revision and Accept; 3 card details or the provider loading; the result; Authorise - schedule: held, collected, still owed; the payments (label, due, amount, status word, captured, overdue) ## States - payments off - supplier authorization - direct payment - option price unresolved - dirty draft - saved - invalid deposit - option required - preview mode - terms not accepted - provider fields pending - authorizing - failed - authorized - receipt for another revision - planned - authorization pending - partially captured - unpaid balance - overdue - payment failed - hold cancelled ## Keyboard - Tab through the controls in order; radio cards move with arrows; Authorise is the last stop ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `currency` (required) | `string` | — | | | `travellers` (required) | `number` | — | | | `options` (required) | `ProposalOption[]` | — | | | `policy` (required) | `PricingPolicy` | — | | | `onPolicySave` | `((p: PricingPolicy) => void \| Promise)` | — | Saves the pricing; a rejection keeps the draft. | | `revision` (required) | `number` | — | The proposal's current revision; approval is valid only for it. | | `termsVersion` (required) | `string` | — | | | `providerReady` | `boolean` | — | Whether the payment provider's card form has loaded. | | `onAuthorize` | `((r: AuthorizationRequest) => Promise)` | — | Authorises the client's card for this exact request; a rejection keeps everything but the card. | | `schedule` (required) | `ScheduledPayment[]` | — | | | `now` | `number` | — | "Now" (ms), for what's overdue. | | `tab` | `ProposalTab` | — | | | `defaultTab` | `ProposalTab` | — | | | `onTabChange` | `((t: ProposalTab) => void)` | — | | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `style` | `CSSProperties` | — | Inline styles on the documented visual root; no overrides by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - tabs - [segmented-control](https://beamline.io/components/segmented-control) - [radio-cards](https://beamline.io/components/radio-cards) - [number-field](https://beamline.io/components/number-field) - checkbox - input - badge - button ## Dependencies `lucide-react` ## Import ```tsx import { ProposalPayments } from "@beamline/proposal-payments"; ``` ## Get it Proposal payments is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Events & bookings - [Team calendar](https://beamline.io/components/team-calendar): A team's schedule: the people and shared calendars to show (each its colour), a month to jump by, who is out this week, and the week, day or month of… - [Day agenda](https://beamline.io/components/day-agenda): One person's days with notes, tasks and calendar events side by side, each kept as what it is. A task's scheduled day, deadline, reminder and repeat are… - [Crew booking](https://beamline.io/components/crew-booking): Booking crew for a project: each person with a strip of the project's days, days in the same state joined into one run said once (booked solid, available… - [Resource booking](https://beamline.io/components/resource-booking): Booking something shared (a room, a van, a camera kit). Choose what, then either a free hour on a day: a grid of starts the app says are free (a taken… - [Resource rules](https://beamline.io/components/resource-rules): Each person's scheduling rules beside their day, the day board leading: role, available (an unavailable day filled in the danger tint and said, a job… - [Desk booking](https://beamline.io/components/desk-booking): Desks in an office for the people who book them and the admin who sets how far ahead. Your days over the next weeks: booked with a desk, free to book… - [Linked appointments](https://beamline.io/components/linked-appointments): A drop-off and a pickup kept as one linked pair on the week's calendar (the shared event calendar, day view on a phone), with the car's stay drawn… - [Waitlist desk](https://beamline.io/components/waitlist-desk): A front desk's waitlist beside the day's book: who is waiting (filters as chips, the queue's count apart from the day's), the day's bookings and the… - [Visitor desk](https://beamline.io/components/visitor-desk): An office front desk's visitors. Invite a meeting's guests from the calendar: colleagues are shown but never invited, guests without an email are said… - [Issued ticket](https://beamline.io/components/issued-ticket): One issued event ticket at the door, led by the ticket itself: what it admits to (event and venue), when, the section, seat and who it admits, and its… - [Itinerary](https://beamline.io/components/itinerary): A trip's days where every event says who sees it, in words: everyone, only Ana and Ben, or hidden from Leo. The same rules give each traveller their own… - [Trip budget](https://beamline.io/components/trip-budget): A trip's money against its plan, in the trip's own currency. The budget (set or changed in place; a refused save keeps what was typed), what's spent and… - [Project periods](https://beamline.io/components/project-periods): A project's time periods (build, show, teardown) on one time scale, the thing being planned: each period a bar across its days with the crew and gear… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).