PromoCodeInput

Coupon-code input that flips to an applied-coupon chip on success.

components/promo-code-input.tsxPeer deps: lucide-react

Live preview

Try STEEP10 (works) or anything else (fails).

Usage

import { PromoCodeInput, type AppliedCoupon } from "@/components/promo-code-input";

const [coupon, setCoupon] = useState<AppliedCoupon | null>(null);

<PromoCodeInput
  appliedCoupon={coupon}
  onApply={async (code) => {
    const res = await fetch("/api/coupons/validate", {
      method: "POST",
      body: JSON.stringify({ code }),
    });
    const data = await res.json();
    if (!res.ok) return null;
    const applied = { code: data.code, discountCents: data.discount, label: data.label };
    setCoupon(applied);
    return applied;
  }}
  onRemove={() => setCoupon(null)}
/>