form · Normal DOM + Twenty Remote DOM

DiscountController

Mode toggle (—/%/$) + preset chips + manual input — discount editor.

Lifted straight from the deal-items panel. Emits a single `{ mode, value }` pair; the caller is responsible for computing the actual discount amount in micros / minor units against a subtotal.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { DiscountController, DiscountMode } from '@8maverik8/twenty-design';

Examples

Default ($)

—
%
$
0%
5%
10%
15%
20%
tsx
const [discount, setDiscount] = useState({ mode: 'PERCENT', value: 10 });
return (
  <DiscountController
    mode={discount.mode}
    value={discount.value}
    onChange={setDiscount}
  />
);

EUR currency symbol

—
%
€
tsx
<DiscountController
  mode="FIXED"
  value={25}
  onChange={setDiscount}
  currencySymbol="€"
/>

Anatomy

Mode toggleSegmentedControl with three values: NONE, PERCENT, FIXED.
Preset chipsOnly when mode = PERCENT. Default presets 0/5/10/15/20.
Manual inputFree-form numeric input. Clamps to ≤ 100 in PERCENT mode.

Guidelines

✓
Place inside SummaryRow `controls` for the totals footer.Sized and aligned to fit a label↔value line.
✕
Format the input value yourself before passing.The recipe owns the input string state; passing pre-formatted values fights it.