shadcn.io is not affiliated with official shadcn/ui
Order Notes Storefront Block for Vue
Notes on an order that lock when it is packed: a cut-off line worked out from a typed packing time, a thread of your notes and the shop's replies you can edit in place, a composer and a Preview: after packing switch.
Installation
Overview
Let shoppers tell the shop something about an order until it can no longer help, with these order notes for Vue with Ark UI. A header names the order and the shop, Oatcake & Oak, a bakehouse. In a hairline frame with a plus mark on each corner, a first band works out the cut-off from a typed packing time against one fixed "now" ("You can edit notes until 14:00, in 3 hours 20 minutes") beside a labelled Switch, Preview: after packing, that moves "now" past it for the demo. The thread is a fixed-height region of your notes, each with a Badge and an Edit button that opens a Textarea in place, and the bakery's typed replies. The composer under it adds a note, with a count out of 200. After the cut-off the composer reads "Packed: notes are locked", an open edit closes and Edit says why it is off. It's built from Textarea, Field, Switch, Badge, Button, Shine Button and Guides, with a CSS entrance only. For an order page, a bakery or a made-to-order shop.
FAQ
Where does the time come from?
Two constants: ORDER.packAt is when the shop packs, and AS_OF is the one fixed "now". The minutes left are packAt minus now, worked out from the ISO strings with Date.UTC, and the sentence is built from them. Nothing reads the visitor's clock, so the page reads the same everywhere and a poster never shows a stale countdown. In production, compute it on the server from the real packing time and pass it in.
What does Preview: after packing do?
It moves "now" to 14:30, past the cut-off, so you can see the locked state: the first band says "Packed at 14:00. Notes are locked", the composer is read-only and says so, Add note answers instead of adding, and an edit in progress is closed. Turn it off to go back. Remove the switch and the constant AFTER when you wire a real clock.
What stays local, and how do I save notes?
All notes live in the block. A new note is badged "Saved here only" and gets no reply, because no message is sent to the bakery. Replace add and save with calls that store the note against the order, and refuse them on the server after the packing time too: the lock on the page is a courtesy, not the rule.
How does editing work?
Edit swaps that note's text for a textarea in the same place, with Save note and Cancel. An empty or over-long note shows an error and keeps the form open. Saving or cancelling puts focus back on that note's Edit button. The thread is a fixed-height region, so none of this moves the panel.
What are the limits?
A note is 1 to 200 characters, counted as typed. Only your notes can be edited; the shop's replies are read-only.
Is it accessible?
The thread is a focusable scroll region, each note carries its time, each Edit button names the note it changes, errors are read as alerts, and the status line is a polite live region present from the start. The locked state is stated in words and with an icon, never only by dimming.