PromoCodeValidator

Props

Usage

Barrel import. Both onChange and onValidate are required — the component does not default them. The real-world wiring (storefront checkout) calls a server endpoint from onValidate and reports a valid / message pair; the molecule owns the Apply button, Enter-to-submit and the status lifecycle.

import { useState } from 'react'
import { PromoCodeValidator } from '@epasslive/design-system'

export function PromoSection() {
  const [code, setCode] = useState('')

  return (
    <PromoCodeValidator
      label="Promo code"
      value={code}
      onChange={setCode}
      onValidate={async (candidate) => {
        const res = await fetch('/api/promo-codes/apply', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ code: candidate }),
        })
        const data = await res.json().catch(() => ({}))
        return res.ok
          ? { valid: true, message: 'Promo code applied.' }
          : { valid: false, message: data.message ?? 'This code is not valid.' }
      }}
    />
  )
}