# Plan acceptance A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Clinic](https://beamline.io/components/apps/clinic) app. Live demo: https://beamline.io/components/plan-acceptance A treatment plan presented for acceptance, from both sides. The practice chooses the agreement (the account's default or this location's own) and how fees show (with fees, without, a summary), then sends it to the patient portal (no email or the portal off is said) or marks it presented in person; sending is not a review, so the status says when it was opened and whether it was answered. The patient sees plain-language treatment cards with why each is recommended, the billing in the chosen form, and the agreement; they sign or decline. A signed version is a receipt that can't change; a refused signature signs nothing; a plan replaced by a newer version can't be signed and says so. The practice's side leads with the patient (their picture), their share of the fees as a figure, and where the plan stands (sent or presented, opened, answered) in order; the agreement's words show once, in the patient's view. ## Use it for - Presenting a plan or estimate for the patient or client to accept with a signature. - Any proposal sent for acceptance where sent, opened, signed and declined must stay distinct. ## Not for - Editing the plan ([treatment-plan](https://beamline.io/components/treatment-plan)). - Signing a document in general ([signature-pad](https://beamline.io/components/signature-pad), [document-review](https://beamline.io/components/document-review)). ## Anatomy - header: the product's mark, the title, plan and patient, the status in words - the practice: agreement, how fees show, the agreement preview, where it goes, send or mark presented - the patient: the email to open, treatment cards (plain words, why, tooth, code, what they pay), billing, the agreement, sign or decline ## States - status: not sent; sent, presented or opened (info); signed (success); declined or replaced (warning) - can't send: no email, portal off or nothing proposed, said - fees: with fees, without (said), summary - signing: waits for a signature; refused (the reason, nothing signed) - signed: a receipt; declined: said; replaced: can't be signed - phone: one column, the practice over the patient's view - right to left: the layout mirrors - reduced motion: nothing animates ## Keyboard - Tab through the agreement, fees and send; in the patient's view through the tabs, the signature pad and sign or decline; Enter presses ## Motion Nothing moves. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `plan` (required) | `{ name: string; items: AcceptanceItem[]; }` | — | | | `patient` (required) | `{ name: string; email: string \| null; portal: boolean; }` | — | `photo`: their picture (initials without one). | | `agreements` (required) | `Agreement[]` | — | | | `defaultAgreement` | `string` | — | The agreement chosen at first: the location's own when there is one, else the account default. | | `defaultFees` | `"fees" \| "none" \| "summary"` | — | | | `defaultStatus` | `AcceptanceStatus` | — | | | `superseded` | `{ n: number; at: string; } \| null` | — | A newer version replaced this plan: it can't be signed. | | `now` | `string` | — | | | `currency` | `string` | — | | | `onSend` | `(() => Promise)` | — | | | `onSign` | `((agreementId: string) => Promise)` | — | Save the patient's signature; reject with the reason and nothing is signed. | | `onReject` | `((reason: string) => Promise)` | — | | | `product` | `string` | — | Your product's name, shown as its mark. | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Empty state](https://beamline.io/components/empty-state.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Signature pad](https://beamline.io/components/signature-pad.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Textarea](https://beamline.io/components/textarea.md) - [Toggle group](https://beamline.io/components/toggle-group.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Import ```tsx import { PlanAcceptance } from "@beamline/plan-acceptance"; ``` ## Get it Plan acceptance 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 Clinic - [Appointment book](https://beamline.io/components/appointment-book): The desk's day with the appointment editor beside it. The appointment being edited is a block on the day like any other, drawn in the accent while it is… - [Book an appointment](https://beamline.io/components/client-booking): A client books an appointment on the practice's own site: a service (length and price beside it), who gives it or anyone free, and where; a day with… - [Services and hours](https://beamline.io/components/booking-setup): A practice's services and the hours its practitioners can be booked, one relation seen from both ends. A service reads as values and changes on demand… - [Patient overview](https://beamline.io/components/patient-overview): One patient's record on a page. A search finds patients by name, chart number or birth date (recent patients when empty; same names told apart by birth… - [Patient chart](https://beamline.io/components/patient-chart): A clinic's chart for one client and their animals. The client's header (phone, email, contact preferences, the balance with what it means and as of when… - [Health questionnaire](https://beamline.io/components/health-questionnaire): A patient's medical history as a versioned questionnaire. Every question takes Yes, No or I don't know, and one not answered says so, never read as No; a… - [Case workspace](https://beamline.io/components/case-workspace): A patient's clinical cases and how cases work at the practice. A case shows its status, type, teeth, staff, location and start; its checklist counts… - [Care plan](https://beamline.io/components/care-plan): A client's care plan composed beside what the client will see of it. Every field says who sees it (the care team only, or the client too) and the… - [Treatment plan](https://beamline.io/components/treatment-plan): A patient's treatment plan in named phases. Each procedure shows its tooth, status and fee beside the patient's and the insurer's estimate (not known… - [Plan templates](https://beamline.io/components/plan-templates): Reusable treatment-plan templates. A template reads as words at rest and changes on demand: its name edits in place; the status its procedures start as… - [Plan follow-up](https://beamline.io/components/plan-follow-up): The practice's follow-up lists, for the person who turns accepted treatment into booked chairs. Treatment plans lead with what's at stake: the value… - [Session notes and tasks](https://beamline.io/components/session-notes): A session's note beside its follow-up tasks, each task tied to the exact words it came from: choose a task and its words light in the note or the… - [Note templates](https://beamline.io/components/note-templates): A practitioner's note templates in one library with three ways in. My templates lists their own by kind, favourites first, each with when it was last… - [Probing chart](https://beamline.io/components/probing-chart): A periodontal probing chart. Six sites per tooth (three buccal, three lingual) across both arches as you face the patient, each depth in its cell and… - [Procedure picker](https://beamline.io/components/procedure-picker): Procedures, conditions and bundles put on a patient's teeth from the chair. The mode (existing, planned, completed) is chosen before adding and each… - [Results notebook](https://beamline.io/components/results-notebook): A notebook entry's structured results. The entry's text above a bounded results table with typed columns: a sample link, numbers in their unit with their… - [Insurance claims](https://beamline.io/components/claims-queue): Insurance claims as a queue: every claim at first, in the order a person works them (rejected by the clearinghouse, denied by the payer, partly paid, not… - [Account ledger](https://beamline.io/components/account-ledger): A patient's account. All transactions or the ones needing attention, each dated with its type in a word, its amount and the running balance; entries that… - [Dispensing](https://beamline.io/components/dispensing): Dispensing from the shelf by lot. A product is found with its stock and prices (consumables left out unless asked); the quantity is drawn across its… - [Record sharing](https://beamline.io/components/record-sharing): Records sent out of a clinic. Several visits' records and their documents (record, invoice, plan, lab result, image) are chosen separately, with how much… - [Client journal](https://beamline.io/components/client-journal): A client's journal from both ends. The client's side is their home, built around their day: today's goals with how many are done and a mark each, done… 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).