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 · ✗ to buildDesktop · ✓BetaForms

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

Web only — React, from @krizaka/ui/promo-code-field. Beta: its API may still change in a minor version.

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

Why it is here. 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).

When to use

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.

When not to use

For any other text entry.Use instead: Field

Installation

Install

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

Styles

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

Import

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

Examples

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	Default	Description
`applyLabel`required	`string`	—	The button, translated: "Apply".
`label`required	`string`	—	The field's label, passed translated: "Promo code".
`onApply`required	`(code: string) => Promise<PromoCodeResult>`	—	Checks the code (the caller's: a request, a rule). Never rejects: say a failure as `{ ok: false, message }`.
`removeLabel`required	`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.

Accessibility

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).

Keyboard

Keys	Action
`Enter`	Applies the code.

Best practices

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.

Generated from the code of @krizaka/ui 3.67.1: its meta.ts, its examples and its types.Edit this documentation on GitHub