Price summary
Пакет @cloud-ru/ds-uikit-product-price-summary — итоговая стоимость заказа с периодом биллинга, скидками, детализацией позиций и состояниями загрузки/ошибки. Использует @cloud-ru/ds-uikit-product-button-predefined для выбора периода и токены Product UI Kit.
Состав пакета
- PriceSummary — полный блок: период (
ButtonDropdown), сумма, скидки, аккордеон деталей заказа, ссылка на расчёт. - PriceSummarySmall — компактный итог (
size=smallв Figma): метка, сумма, опциональная function-ссылка.
Установка
pnpm add @cloud-ru/ds-uikit-product-price-summary
ButtonDropdown для периода входит в пакет через зависимость @cloud-ru/ds-uikit-product-button-predefined — отдельно ставить не нужно.
import { PricePeriod, PriceSummary, PriceSummarySmall } from '@cloud-ru/ds-uikit-product-price-summary'
Когда какой использовать
| Задача | Компонент |
|---|---|
| Боковая панель / checkout с периодом, скидками и раскрываемым invoice | PriceSummary |
| Компактная строка «Итого» без аккордеона и выбора периода | PriceSummarySmall |
| Выбор периода отдельно от блока цены | ButtonDropdown |