Promo code field

Enter a code, apply it, and see the state: checking, applied with its effect, or refused (invalid, expired). The caller validates.

Web · ✓Mobile · ✗ à construireBureau · ✓BêtaFormulaires

import { PromoCodeField } from "@krizaka/ui/promo-code-field";

Web uniquement — React, depuis @krizaka/ui/promo-code-field. Bêta : son API peut encore changer à une version mineure.

Mobile · ✗ à construire. The native twins of PromoCodeField, MoneyInput and CopyButton are a follow-up of the coupons surfaces. issue #782

Pourquoi il est là. The coupons (@krizaka/coupons): the code a customer types at checkout on Yomizaka's and Akinaza's plans, checked on the server, with the discount said back (krizaka-ui#576, #783).

Quand l’utiliser

At checkout or on a plan page where a coupon is applied.
When the check is the product's (a request, a rule) and the field only shows the result.

Quand ne pas l’utiliser

For any other text entry.À la place : Field

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { PromoCodeField } from "@krizaka/ui/promo-code-field";

Exemples

Try “FOUNDER”

Idle, then applied or refused.

Applied

A code already applied, in French.

Code promoFOUNDER · 39 $ la première année

Expired

A refusal with the expired state.

Props

A promo code field. State: data-state = idle | checking | applied | invalid | expired.

Prop	Type	Défaut	Description
`applyLabel`requis	`string`	—	The button, translated: "Apply".
`label`requis	`string`	—	The field's label, passed translated: "Promo code".
`onApply`requis	`(code: string) => Promise<PromoCodeResult>`	—	Checks the code (the caller's: a request, a rule). Never rejects: say a failure as `{ ok: false, message }`.
`removeLabel`requis	`string`	—	The applied chip's remove button, translated: "Remove".
`applied`	`{ code: string; effect: string; }`	—	A code already applied (an order resumed).
`className`	`string`	—	Added to the root.
`disabled`	`boolean`	—	Disables the input and the button.
`onRemove`	`(() => void)`	—	Runs when the applied code is removed.
`placeholder`	`string`	—	The input's placeholder, translated.

Accessibilité

The refusal is under the field, linked by aria-describedby, and announced politely.
Applied: the chip's remove button is named “Remove CODE”.
While checking, the button is busy (aria-busy).

Clavier

Touches	Action
`Enter`	Applies the code.

Bonnes pratiques

onApply returns { ok: false, message } for a refusal, it never rejects; expired: true sets data-state=expired.
Say the effect in words (“39 $ for the first year”), already formatted.
The input keeps the code after a refusal so it can be corrected.

Générée depuis le code de @krizaka/ui 3.67.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub