{
  "name": "discount-input",
  "title": "DiscountInput",
  "description": "Discount code input with inline validation.",
  "type": "component",
  "registryDependencies": [
    "price",
    "cn"
  ],
  "files": [
    {
      "path": "discount-input.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useCallback } from \"react\";\nimport { Field } from \"@base-ui/react/field\";\nimport { Input } from \"@base-ui/react/input\";\nimport type { DiscountValidation } from \"@cimplify/sdk\";\nimport { useValidateDiscount } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DiscountInputClassNames {\n  root?: string;\n  input?: string;\n  button?: string;\n  result?: string;\n  error?: string;\n  success?: string;\n}\n\nexport interface DiscountInputProps {\n  /** Current order subtotal for validation. */\n  orderSubtotal: string;\n  /** Location ID for location-specific discounts. */\n  locationId?: string;\n  /** Called when a valid discount is applied. */\n  onApply?: (validation: DiscountValidation) => void;\n  /** Called when discount is cleared. */\n  onClear?: () => void;\n  /** Placeholder text. */\n  placeholder?: string;\n  className?: string;\n  classNames?: DiscountInputClassNames;\n}\n\n/**\n * DiscountInput — discount code input with inline validation.\n *\n * Wraps `useValidateDiscount` with a Base UI Field + Input and apply button.\n * Shows validation result inline (success with amount, or error via Field.Error).\n */\nexport function DiscountInput({\n  orderSubtotal,\n  locationId,\n  onApply,\n  onClear,\n  placeholder = \"Discount code\",\n  className,\n  classNames,\n}: DiscountInputProps): React.ReactElement {\n  const [code, setCode] = useState(\"\");\n  const [appliedValidation, setAppliedValidation] =\n    useState<DiscountValidation | null>(null);\n  const { validate, isValidating, error } = useValidateDiscount();\n\n  const handleApply = useCallback(async () => {\n    const trimmed = code.trim();\n    if (!trimmed) return;\n\n    const result = await validate(trimmed, orderSubtotal, locationId);\n    if (result) {\n      if (result.is_eligible) {\n        setAppliedValidation(result);\n        onApply?.(result);\n      } else {\n        setAppliedValidation(result);\n      }\n    }\n  }, [code, validate, orderSubtotal, locationId, onApply]);\n\n  const handleClear = useCallback(() => {\n    setCode(\"\");\n    setAppliedValidation(null);\n    onClear?.();\n  }, [onClear]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"Enter\") {\n        void handleApply();\n      }\n    },\n    [handleApply],\n  );\n\n  const isApplied = appliedValidation?.is_eligible === true;\n  const hasError =\n    !!error || (!!appliedValidation && !appliedValidation.is_eligible);\n\n  const errorMessage = error\n    ? error.message\n    : appliedValidation && !appliedValidation.is_eligible\n      ? (appliedValidation.ineligibility_reason ?? \"This code is not valid.\")\n      : undefined;\n\n  return (\n    <Field.Root\n      data-cimplify-discount\n      invalid={hasError}\n      disabled={isApplied}\n      className={cn(className, classNames?.root)}\n    >\n      <div data-cimplify-discount-form>\n        <Input\n          type=\"text\"\n          value={code}\n          onValueChange={(value) => setCode(value)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          data-cimplify-discount-input\n          className={classNames?.input}\n          aria-label=\"Discount code\"\n        />\n        {isApplied ? (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            data-cimplify-discount-clear\n            className={classNames?.button}\n          >\n            Remove\n          </button>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={handleApply}\n            disabled={isValidating || code.trim().length === 0}\n            data-cimplify-discount-apply\n            className={classNames?.button}\n          >\n            {isValidating ? \"Checking...\" : \"Apply\"}\n          </button>\n        )}\n      </div>\n\n      {hasError && errorMessage && (\n        <Field.Error\n          match={true}\n          data-cimplify-discount-error\n          className={classNames?.error}\n        >\n          {errorMessage}\n        </Field.Error>\n      )}\n\n      {isApplied && appliedValidation.discount_amount && (\n        <Field.Description\n          data-cimplify-discount-success\n          className={classNames?.success}\n        >\n          <span>Discount applied</span>\n          <Price amount={appliedValidation.discount_amount} prefix=\"-\" />\n        </Field.Description>\n      )}\n    </Field.Root>\n  );\n}\n"
    }
  ]
}