Skip to main content

​
ApplyPromoCode

A compact input with an apply button that lets customers enter and validate promotional discount codes during checkout.

​
Preview

View in Storybook

​
Import

import { ApplyPromoCode } from '@/components/ApplyPromoCode'

​
Usage

<ApplyPromoCode
  onApply={handleApplyPromo}
  appliedCode={cart.promoCode}
  onRemove={handleRemovePromo}
/>

​
Props

​
onApply
(code: string) => Promise<PromoResult>
required
Async callback to validate and apply the promo code. Should return the discount result or throw on invalid codes.
​
appliedCode
string
Currently applied promo code, if any.
​
onRemove
() => void
Callback to remove the currently applied promo code.

​
Behavior

  • Inline validation with loading state during API call
  • Shows success message with discount amount on valid code
  • Shows error message for invalid or expired codes
  • Displays applied code as a removable chip
  • Collapses to “Have a promo code?” link when no code is applied