Price catalogue editor
An administrator edits a product's price entries: the amount, unit, availability and limits, from a date that is never in the past, with the scheduled changes and the history folded.
import { PriceCatalogueEditor } from "@krizaka/ui/price-catalogue-editor";Web uniquement — React, depuis @krizaka/ui/price-catalogue-editor. Bêta : son API peut encore changer à une version mineure.
- Mobile · ✗ à construire. An admin task on the web consoles; a phone twin follows only when an admin app needs one. issue #713
Pourquoi il est là. Every product's admin (ADR-009): Akinaza and Yomizaka edit their plans' prices from a date, Orazaka its catalogue (krizaka-ui#713, B09).
Quand l’utiliser
- The admin screen of a product whose prices are data (
describePrices()of @krizaka/settings, ADR-009). - Any list of priced entries that change from a date while current subscriptions keep their price.
Quand ne pas l’utiliser
- For one setting (a toggle, a number).À la place : Settings layout
- For the public price list of a page.À la place : Pricing page
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { PriceCatalogueEditor } from "@krizaka/ui/price-catalogue-editor";Exemples
Three entries
A public plan with a scheduled change, a founder offer with its cap, an entry in preparation.
Props
The price entries of a product, each editable from a date, with what is scheduled and its history folded.
| Prop | Type | Défaut | Description |
|---|---|---|---|
localerequis | string | — | BCP 47 locale for the amounts and the dates: "fr-CA". |
onSchedulerequis | (key: string, change: PriceFigures, effectiveFrom: string) => Promise<PriceScheduleResult> | — | Saves a change from a date (YYYY-MM-DD). The host validates and returns the refusal in words. |
pricesrequis | PricesView | — | The catalogue as describePrices() returns it: the enumerations the fields offer, and the entries. |
todayrequis | string | — | Today as YYYY-MM-DD: the earliest date a change may start from (the block never reads the clock). |
wordsrequis | PriceCatalogueWords | — | The words, passed translated (see PriceCatalogueWords). |
headingLevel | 4 | 2 | 3 | 3 | Heading level of an entry's name. |
loadHistory | ((key: string) => Promise<PriceHistoryEntry[]>) | — | The history of an entry, asked when its fold opens. Omitted: no history fold. |
Accessibilité
- Each entry is a list item named by a heading; its form is a
formnamed after the entry. - The availability is a word in a chip, never colour alone.
- A refusal is a
role=alertmessage; a saved change is announced politely. - At 360 px the entry stacks: name and amount, then the chip and the button, then the form in one column.
Clavier
| Touches | Action |
|---|---|
| Tab | Moves through the entries' buttons, the folds and the form's fields in reading order. |
| Enter / Space | Opens a form or a fold; Enter in a field submits the change. |
Bonnes pratiques
- Feed it
describePrices()as is: cents are integers,nullis « on quote », dates are ISO strings. - The host owns the save:
onSchedulereturns{ ok: false, message }for a refusal (it never rejects) and the page re-renders with the newprices. - Pass
todayfrom the server (YYYY-MM-DD): the block never reads the clock and the date field refuses an earlier day. loadHistoryis called when the fold opens, never on load.
Composants liés
Générée depuis le code de @krizaka/ui 3.70.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub