shadcn.io is not affiliated with official shadcn/ui
Store Pickup Checkout Block for Ark UI
A native table of three kitchen items against three stores in words (In stock, Tomorrow, Not stocked), a store chosen in the column heads, a result list that splits collect today, collect tomorrow and ships to you with the total, and a collector's name.
Installation
Overview
Let shoppers collect what a store has and have the rest sent, with this store pickup for React with Ark UI. A compact header from Quince and Co, a kitchen shop, holds the title and one sentence. Inside a hairline frame with a plus mark on each corner, a native table sets three items against three stores. Each cell is a glyph and a word worked out from the typed stock (In stock, Tomorrow when it arrives tomorrow, or Not stocked), and the store is chosen with a radio in its column head, so the arrow keys move between stores. A result list under the table is derived from the choice: what is collected today after 16:00, what is collected tomorrow after 10:00 and what ships to you with its date, and the total includes a $4.90 shipping line only when something ships. A "Someone else will collect" checkbox changes the label of the collector's name Input, which is needed when anything is collected and shows its problem in a reserved line. Continue to payment, with the total in its label, is the only Shine Button. On a phone the table becomes one card per store with its items listed in it. It's built from Input, Shine Button and Guides, with native radios and a CSS entrance only. For shops with stock in several places.
FAQ
How do I fill it with my own stores and stock?
Edit ITEMS, STORES and SHELVES at the top. A shelf row gives, for one item at one store, the units on the shelf now and the units arriving tomorrow. A cell reads In stock when the shelf covers the quantity in the order, Tomorrow when the shelf plus tomorrow's delivery covers it, and Not stocked otherwise. The result list, the shipping line and the total are worked out from those cells.
How does it decide what is collected and what ships?
For the chosen store, items marked In stock are collected today, items marked Tomorrow are collected tomorrow and the rest ship to you. Shipping costs a fixed amount and is added only if at least one item ships, so choosing a store that has everything makes shipping free and says so.
Why does it ask for a name, and when?
A store hands the order to whoever says the name on it. The name is required when anything is collected from the chosen store; if nothing is, the field is switched off and says that nothing is collected. Pressing Continue with the name empty names the problem in the line under the field, in the status line, and puts focus in the field. The autofill hint is the shopper's own name unless the box for someone else is ticked.
How do I choose a store from the keyboard?
Tab to the store radios in the table's head and use the arrow keys to move between stores; the result list and the total follow at once. On a phone the same choice is a card per store, with a radio at the top of each card and its items listed below.