# Job booking A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Construction](https://beamline.io/components/apps/construction) app. Live demo: https://beamline.io/components/job-booking A customer books a home or field-service job on the company's own site, phone first. Services with how many units, each unit adding its time and price; the job's address checked against the area served (outside it can't be booked online, said with what to do instead). Then a day and an arrival window the company computed for the booking's whole length, the time zone said (and the device's when it differs), arrival kept apart from time on site. Then contact details, a review where each part can be changed, and one receipt from the company's answer: Booked, or Request sent and waiting for approval for long jobs, never both. The draft survives Back; changing what's booked re-checks the chosen time and drops it, said, when it no longer fits; a time taken while booking sends the customer back to choose another with everything else kept. ## Use it for - The public booking page of a cleaning, repair or other on-site service company. - Booking where the job's length grows with what's booked and the slot must still fit it. ## Not for - Setting up services, rules and team hours ([job-booking-setup](https://beamline.io/components/job-booking-setup)). - Booking a clinic appointment with a practitioner ([client-booking](https://beamline.io/components/client-booking)). ## Anatomy - flow: the company, the steps (services, time, your details, review), the step, Back, a hint and Continue or Book - services: each with price and time per unit, Add or a quantity and Remove; the address with Check address and the area's answer - time: the zone in words; the working days as a two-week calendar (weekdays in columns, the month where it starts) beside the chosen day's arrival windows; the chosen one read back with time on site and the visit drawn - review: services, time and details each with Change, the approval note for long jobs, Book or Send request - summary: lines with their prices, the address and area, the time, time on site, total before tax - receipt: Booked or Request sent with the day, the window, the reference and where the confirmation goes ## States - empty, services chosen, address checked inside or outside the area - finding times, no times on a day, time chosen, time dropped after a change, time taken while booking - details missing a name or a way to reach the customer - review, booking, failed, confirmed, pending approval - narrow room: the summary under the flow ## Keyboard - Tab reaches every service, day and time; times are a radio group; Enter or Space picks ## Motion Each step arrives with a short rise; a chosen service, day or time eases into the accent. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `company` (required) | `string` | — | | | `zone` (required) | `string` | — | The business's time zone in words ("London time"). | | `deviceZone` | `string` | — | The customer's device zone in words, when it differs from the business's. | | `currency` (required) | `string` | — | ISO 4217 code prices are in. | | `services` (required) | `JobService[]` | — | | | `today` (required) | `string` | — | Today, ISO yyyy-mm-dd; days offered start after it. | | `days` | `number` | — | How many working days to offer. Default 10. | | `approvalOverMinutes` | `number` | — | Bookings longer than this many minutes are requests the company approves. | | `defaultDraft` | `Partial` | — | | | `defaultStep` | `0 \| 1 \| 2 \| 3` | — | | | `onCheckAddress` (required) | `(address: string) => Promise` | — | Checks the job's address against the area served. | | `onFindSlots` (required) | `(date: string, minutes: number, area: string) => Promise` | — | The starts the company offers on a day for a booking of `minutes` at `area`. | | `onBook` (required) | `(draft: JobBookingDraft, minutes: number) => Promise` | — | Creates the booking or request; reject with `{ gone: true }` when the time was taken meanwhile. | | `locale` | `string` | — | | | `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 - stepper - [number-field](https://beamline.io/components/number-field) - input - textarea - button - skeleton ## Dependencies `lucide-react` ## Import ```tsx import { JobBooking } from "@beamline/job-booking"; ``` ## Get it Job booking 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 Construction - [Submittal register](https://beamline.io/components/submittal-register): The documents a trade owes a project before its material is bought, on the clocks that matter: a log whose rows each draw their way to site on one shared… - [Change orders](https://beamline.io/components/change-orders): Change orders against a contract, with the money drawn where it stands: one bar of the original contract, each approved change, a line at the current… - [Inspection review](https://beamline.io/components/inspection-review): A unit's inspection, reviewed in three views. Findings: rooms and features with their condition, answers, notes and photos, and each feature's… - [Work orders](https://beamline.io/components/work-orders): A maintenance work order that coordinates subtasks: the children's progress drawn by status with cancelled ones counted apart, the parent completed on… - [Action center](https://beamline.io/components/action-center): Everything waiting on a person across projects: a strip of every open item on the days ahead, one lane per kind of owing (You submit, You answer, Tasks… - [Company access](https://beamline.io/components/company-access): A project's companies as one board: No company first (office access waits for a company, and says so), then each company with its code and its people… - [Condition checklist](https://beamline.io/components/condition-checklist): An inspection by area. Each item marked good (success), soon (warning) or needs work now (danger), or not checked yet and kept apart below; what was… - [Corrective actions](https://beamline.io/components/corrective-actions): A corrective action raised from a failed inspection answer, for food safety, facilities or quality teams. The answer, its photo and note are pinned above… - [Quality checks](https://beamline.io/components/quality-checks): Quality checks by picture and the control points that make them. A check asks for one photo: an upload that fails keeps its file with Try again, and… - [Maintenance plan](https://beamline.io/components/maintenance-plan): Maintenance of shared equipment. The instruments, most urgent first, each with its most pressing kind and how due it is (overdue, due soon, fine, never… - [Maintenance plans](https://beamline.io/components/maintenance-plans): An operations team's maintenance plans. The queue lists every asset-plan pair (one machine can appear under two plans) with its last service, next due… - [Equipment register](https://beamline.io/components/equipment-register): A business's machines and vehicles: a register filtered by status (in use, in repair, sold, each counted) with each machine's photo or type icon… - [Asset workspace](https://beamline.io/components/asset-workspace): One physical asset: a machine, vehicle or piece of plant. Its header keeps the system id apart from the name and serial, with type, site, status and the… - [Asset packs](https://beamline.io/components/asset-packs): Packs of assets (sounds, presets, fonts), the providers they come from and the storage they take. Download and install are two phases with their own… - [Instrument use](https://beamline.io/components/instrument-use): Shared instruments. The slot search reads as one sentence (how long, which instrument type, the dates and the working hours with the lab's time zone)… - [Job booking setup](https://beamline.io/components/job-booking-setup): Online booking for a field-service company, set up from three sides that feed one booking form. Services: each priced and timed per unit with whether it… - [Rental availability](https://beamline.io/components/rental-availability): A rental shop's availability: a product's month for the quantity a customer wants (each day available, some left with the count, booked out or not known… - [Rooms & equipment](https://beamline.io/components/resource-setup): A salon's or clinic's rooms and equipment and what its services need of them: resources by group at each location, how many appointments each holds at… - [System pages](https://beamline.io/components/system-page): The four pages a product shows when the normal one cannot: page not found (search and the likely places), something broke (try again, an error id to… 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).