data · Normal DOM + Twenty Remote DOM

TotalsBlock

Subtotal + discount controls + total — the panel footer recap.

Composes SummaryRow ×3 with an optional DiscountController in the middle. Caller passes pre-formatted strings for subtotal/total/discount amount and an `onChange` for the discount state.

Install

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

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

Examples

With discount controller

Subtotal
$1,200.00
Discount
—
%
$
0%
5%
10%
15%
20%
−$180.00
Total
$1,020.00
tsx
<TotalsBlock
  subtotal={fmt(subtotal)}
  total={fmt(total)}
  discount={{
    mode: discount.mode,
    value: discount.value,
    onChange: setDiscount,
    amount: discountAmount > 0 ? `−${fmt(discountAmount)}` : undefined,
  }}
/>

Simple (no discount)

Subtotal
$1,200.00
Total
$1,200.00
tsx
<TotalsBlock subtotal="$1,200.00" total="$1,200.00" />

Guidelines

✓
Pass `discount.amount` as a string that already includes the leading minus sign.The recipe doesn&apos;t format money — that&apos;s app policy.
✕
Use it when you have multiple discount stacks (tax, shipping, promo).TotalsBlock is one-discount opinionated. Hand-compose SummaryRows for richer layouts.