# Print quote A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Shop](https://beamline.io/components/apps/shop) app. Live demo: https://beamline.io/components/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 its total as the screen's figure, the garments as one grid with sizes across; choosing the pricing matrix and its column only selects, prices change only on Refresh prices; quantities that moved past the last pricing are said (the prices shown are from then), the break used is named, a failed refresh keeps the last prices; each garment's sizes typed in, its cost (a missing supplier cost said and the line left unpriced), its price each from the matrix or set by hand (marked, with Use the matrix price) and what the host's policy did to a hand-set price on refresh said; the group total. Pricing matrix: quantity breaks down and imprint columns across with markup and a cost per cell (an empty cell said as not set), the threshold column pinned while the rest scroll, each row starting above the one before (the boundary belonging to the higher break), changed cells marked and counted, a quantity preview naming the break, markup and cost that apply, saving said not to reprice orders already priced, an import replacing the draft only when the file parses, and a save someone beat kept until Reload. Mockup: the design's layers on a garment blank in its colour, moved by drag or typed position, sized, turned and recoloured from inks, stacked forward and back, with undo and redo; Save as a new mockup or Save over the one open (an older alternative stays unchanged), export with its failure said, and a note that a saved mockup is a preview, not artwork approval. ## Use it for - Quoting decorated garments where several products share a quantity break and an imprint's price comes from a matrix. - Editing a quantity-break price matrix, or placing a design on a garment as a mockup. ## Not for - A generic quote or proposal with line items ([proposal-payments](https://beamline.io/components/proposal-payments)). - Free-form image editing ([drawing-board](https://beamline.io/components/drawing-board)). ## Anatomy - quote: group name, pieces and imprint, the group total at display size; the matrix and column as text with Change; the pricing state and Refresh prices; the garments as one grid (sizes across, pieces, price each and where it came from, line total) - matrix: name and revision, Import, the breaks table (from, markup, a cost per column, remove), Add a break, changed count, Save; the quantity preview - mockup: the garment with its layers and selection, Undo and Redo; garment and colour, layers with forward and back, position, size, turn and ink, the approval note, Save as new, Save over, Export, the mockups ## States - quote: no matrix, never priced, priced, stale, refreshing, refresh failed, set by hand, kept by policy, cost missing - matrix: empty, dirty, invalid threshold, saving, saved, conflict, importing, import failed, preview below the first break, preview with a missing cost - mockup: no garment, layer selected, dirty, undo and redo available, saved new, saved over, export failed ## Keyboard - Every size, price and matrix cell is a labelled number field naming its row and column - Layers are placed with typed position, size and turn as well as drag; colours are radio groups; layers move with named buttons ## Motion Only dragging moves a layer. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `title` (required) | `string` | — | The quote's title in the heading: "Quote Q-2207 · Brightside Bakery". | | `group` (required) | `QuoteGroup` | — | | | `matrices` (required) | `PricingMatrix[]` | — | | | `onPrice` (required) | `(g: QuoteGroup) => Promise` | — | Prices a group (the host owns decimals, rounding and what happens to prices set by hand). | | `onSaveMatrix` | `((m: PricingMatrix) => Promise)` | — | Saves a matrix; resolve with its new revision, reject with MatrixConflict if someone saved first. | | `onReloadMatrix` | `((id: string) => PricingMatrix)` | — | The matrix as saved now, after a conflict. | | `onImportMatrix` | `(() => Promise)` | — | Reads breaks from a file the host chose; reject to keep the matrix as it is. | | `mockups` | `Mockup[]` | — | | | `garments` | `string[]` | — | | | `onSaveMockup` | `((m: Mockup, mode: "new" \| "over") => Promise)` | — | | | `onExportMockup` | `((m: Mockup) => Promise)` | — | | | `defaultView` | `PrintQuoteView` | — | | | `defaultMockup` | `string` | — | | | `currency` | `string` | — | | | `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. | | `garmentColors` | `Swatch[]` | — | Colours the garment blanks come in. | | `inks` | `Swatch[]` | — | Inks a design layer can be printed in. | ## Built from - [segmented-control](https://beamline.io/components/segmented-control) - select - [number-field](https://beamline.io/components/number-field) - button ## Dependencies `lucide-react` ## Import ```tsx import { PrintQuote } from "@beamline/print-quote"; ``` ## Get it Print quote 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 Shop - [Product editor](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/order-history): 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](https://beamline.io/components/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… - [Ticket orders](https://beamline.io/components/ticket-orders): 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… - [Record search](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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… - [Service estimate](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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… 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).