@cloud-ru/uikit-product-price-summary 3.0.0 → 3.1.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 3.1.1 (2026-09-29)
+
+**Note:** Version bump only for package @cloud-ru/uikit-product-price-summary
+
+
+
+
+
+# 3.1.0 (2026-09-23)
+
+
+### Features
+
+* **RM-4547:** new price summary api ([1a8ac74](https://github.com/cloud-ru-tech/uikit-product/commit/1a8ac74d7bb759f73b9cac483268417fb160d9dc))
+
+
+
+
+
 # 3.0.0 (2026-09-22)
 
 

package/README.md

@@ -1,8 +1,161 @@
 # Price Summary
 
-## Installation
-`npm i @cloud-ru/uikit-product-price-summary`
+Компонент отображает итоговую стоимость, детализацию изменения цены и состав заказа.
 
-[Changelog](./CHANGELOG.md)
+## Установка
 
+```bash
+npm i @cloud-ru/uikit-product-price-summary
+```
 
+[История изменений](./CHANGELOG.md)
+
+## Итоговая сумма
+
+Свойство `value` принимает точное значение или диапазон:
+
+```ts
+type TotalValueRange = {
+  min: number;
+  max: number;
+};
+
+// value?: number | TotalValueRange
+```
+
+Для числового значения свойство `totalSumType` управляет префиксом итоговой суммы:
+
+| Значение | Отображение               |
+| -------- | ------------------------- |
+| `equal`  | Точная сумма без префикса |
+| `from`   | Сумма с префиксом «от»    |
+| `to`     | Сумма с префиксом «до»    |
+
+```tsx
+<PriceSummary value={5000} totalSumType='from' />
+<PriceSummary value={10000} totalSumType='to' />
+```
+
+Для диапазона передайте `{ min, max }`. В этом случае `totalSumType` не применяется, а знак валюты выводится один раз в конце:
+
+```tsx
+<PriceSummary value={{ min: 5000, max: 10000 }} />
+```
+
+Если `value` не передан, компонент отображает `N/A`.
+
+## Предварительный расчёт
+
+Если `hint` не передан, компонент показывает локализованную подсказку о предварительном расчёте: «Предварительный расчёт. Фактическая стоимость зависит от потребления».
+
+Переданный `hint` заменяет стандартный текст. Чтобы скрыть подсказку, передайте пустую строку:
+
+```tsx
+<PriceSummary value={5000} hint='Стоимость рассчитана на текущий период' />
+<PriceSummary value={5000} hint='' />
+```
+
+## Базовая цена и изменение стоимости
+
+`basePrice` добавляет перед итоговой суммой строку «Базовая цена». Нулевое значение не отображается.
+
+`priceChange` добавляет строку «Изменение» и принимает объект следующего типа:
+
+```ts
+type PriceChangeDetails = {
+  value: number;
+  percentage?: number;
+};
+```
+
+`priceChange.value` содержит изменение со знаком: положительное число означает увеличение стоимости, отрицательное — снижение. Если передан `percentage`, он выводится с тем же знаком. Нулевое изменение отображается без знака.
+
+Компонент не вычисляет порог значимости. Потребитель должен самостоятельно определить, нужно ли передавать `priceChange`.
+
+```tsx
+<PriceSummary basePrice={10000} priceChange={{ value: 5000, percentage: 10 }} value={15000} />
+```
+
+В примере строка изменения будет отформатирована как `+5 000 ₽ (+10%)`.
+
+## Покрытие грантом и доступность SKU
+
+`PriceSummary` не выполняет сетевые запросы. Для заполнения признака покрытия и отделения недоступных позиций передайте `calculatePriceData`:
+
+```ts
+type CalculatePriceData = {
+  skuResults: SkuPriceResult[];
+  allow?: boolean;
+};
+
+type SkuPriceResult = {
+  skuId?: string;
+  skuCode?: string;
+  resourceSpecCode?: string;
+  resourceSpecCodeId?: string;
+  skuAvailability?: boolean;
+  coveredByGrants?: boolean;
+};
+```
+
+Поле `allow` входит в контракт данных, но не влияет на сопоставление и отображение позиций. Тип `CalculatePriceResponse` оставлен как устаревший алиас `CalculatePriceData` для обратной совместимости.
+
+Чтобы связать позицию инвойса с результатом расчёта:
+
+1. Передайте `calculatePriceData` в одноимённое свойство компонента.
+2. Добавьте `id` основной позиции `invoice`, у которой `primary === true`.
+3. Значение `id` должно совпадать с `skuId`, `skuCode`, `resourceSpecCode` или `resourceSpecCodeId` из `skuResults`.
+
+Только основные позиции поддерживают `id` и `coveredByGrant`. Для вторичных позиций с `primary === false` эти поля недоступны на уровне TypeScript.
+
+### Покрытие грантом
+
+Для сопоставленного SKU с `skuAvailability !== false` компонент записывает значение `coveredByGrants` в `coveredByGrant` позиции инвойса.
+
+Если у всех основных позиций группы одинаковое значение `coveredByGrant`, метка покрытия отображается у заголовка группы. Для смешанной группы метки отображаются у отдельных позиций.
+
+Если `calculatePriceData` не передан, `skuResults` пуст или `id` не найден, исходные значения `coveredByGrant` не изменяются.
+
+### Недоступные позиции
+
+Основная позиция с `skuAvailability === false` удаляется из исходной группы и переносится в первый агрегированный блок «Недоступно по договору». Заголовок блока отображается красным тегом, а метки покрытия грантом внутри него скрываются.
+
+Недоступные позиции из всех групп объединяются в один блок. Если из исходной группы вынесена хотя бы одна позиция, её `price` и `quantity` скрываются, поскольку после разделения они могут стать неверными. Группа, в которой не осталось доступных позиций, полностью удаляется из обычной детализации.
+
+```tsx
+<PriceSummary
+  invoice={[
+    {
+      title: 'Виртуальная машина',
+      quantity: 3,
+      price: 300,
+      items: [
+        { id: 'sku-1', primary: true, label: 'Процессор', quantity: 1, price: 100 },
+        { id: 'sku-2', primary: true, label: 'Память', quantity: 1, price: 100 },
+        { id: 'sku-3', primary: true, label: 'Диск', quantity: 1, price: 100 },
+      ],
+    },
+  ]}
+  calculatePriceData={{
+    skuResults: [
+      {
+        skuCode: 'sku-1',
+        skuAvailability: true,
+        coveredByGrants: true,
+      },
+      {
+        skuCode: 'sku-2',
+        skuAvailability: true,
+        coveredByGrants: false,
+      },
+      {
+        skuCode: 'sku-3',
+        skuAvailability: false,
+        coveredByGrants: true,
+      },
+    ],
+  }}
+/>
+```
+
+В этом примере `sku-1` помечается как покрытый грантом, `sku-2` — как не покрытый, а `sku-3` переносится в блок «Недоступно по договору».

package/dist/cjs/components/PriceSummary/PriceSummary.d.ts

@@ -1,12 +1,15 @@
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { LinkProps } from '@snack-uikit/link';
-import { DiscountDetails, InvoiceDetails } from '../../types';
+import { CalculatePriceData, DiscountDetails, InvoiceDetails, PriceChangeDetails } from '../../types';
 import { ContentBlockProps } from '../ContentBlock';
 import { HeaderBlockProps } from './components/HeaderBlock';
 import { TotalValueBlockProps } from './components/TotalValueBlock';
 export type PriceSummaryProps = WithLayoutType<WithSupportProps<TotalValueBlockProps & HeaderBlockProps & ContentBlockProps & {
+    basePrice?: number;
     discount?: DiscountDetails;
+    priceChange?: PriceChangeDetails;
     invoice?: InvoiceDetails[];
+    calculatePriceData?: CalculatePriceData;
     invoiceExpandedDefault?: boolean;
     docsLink?: {
         href?: LinkProps['href'];
@@ -14,4 +17,4 @@ export type PriceSummaryProps = WithLayoutType<WithSupportProps<TotalValueBlockP
     };
     className?: string;
 }>>;
-export declare function PriceSummary({ value, totalSumType, hint, period, onPeriodChanged, periodOptions, promoBadge, loading, dataError, onRetry, discount, invoice, invoiceExpandedDefault, docsLink, className, layoutType, hintAppearance, showHintTooltip, hintTooltipText, hintLink, showHintLink, valueDelta, ...rest }: PriceSummaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function PriceSummary({ value, totalSumType, hint, period, onPeriodChanged, periodOptions, promoBadge, loading, dataError, onRetry, discount, invoice, calculatePriceData, invoiceExpandedDefault, docsLink, className, layoutType, hintAppearance, showHintTooltip, hintTooltipText, hintLink, showHintLink, valueDelta, priceChange, basePrice, ...rest }: PriceSummaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PriceSummary/PriceSummary.js

@@ -17,17 +17,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PriceSummary = PriceSummary;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
 const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
 const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
 const link_1 = require("@snack-uikit/link");
+const helpers_1 = require("../../helpers");
 const ContentBlock_1 = require("../ContentBlock");
 const DiscountBlock_1 = require("./components/DiscountBlock");
 const HeaderBlock_1 = require("./components/HeaderBlock");
 const InvoiceBlock_1 = require("./components/InvoiceBlock");
+const PriceChangeBlock_1 = require("./components/PriceChangeBlock");
 const TotalValueBlock_1 = require("./components/TotalValueBlock");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function PriceSummary(_a) {
-    var { value, totalSumType, hint, period, onPeriodChanged, periodOptions, promoBadge, loading, dataError, onRetry, discount, invoice, invoiceExpandedDefault = true, docsLink, className, layoutType, hintAppearance, showHintTooltip = false, hintTooltipText, hintLink, showHintLink, valueDelta } = _a, rest = __rest(_a, ["value", "totalSumType", "hint", "period", "onPeriodChanged", "periodOptions", "promoBadge", "loading", "dataError", "onRetry", "discount", "invoice", "invoiceExpandedDefault", "docsLink", "className", "layoutType", "hintAppearance", "showHintTooltip", "hintTooltipText", "hintLink", "showHintLink", "valueDelta"]);
+    var { value, totalSumType, hint, period, onPeriodChanged, periodOptions, promoBadge, loading, dataError, onRetry, discount, invoice, calculatePriceData, invoiceExpandedDefault = true, docsLink, className, layoutType, hintAppearance, showHintTooltip = false, hintTooltipText, hintLink, showHintLink, valueDelta, priceChange, basePrice } = _a, rest = __rest(_a, ["value", "totalSumType", "hint", "period", "onPeriodChanged", "periodOptions", "promoBadge", "loading", "dataError", "onRetry", "discount", "invoice", "calculatePriceData", "invoiceExpandedDefault", "docsLink", "className", "layoutType", "hintAppearance", "showHintTooltip", "hintTooltipText", "hintLink", "showHintLink", "valueDelta", "priceChange", "basePrice"]);
     const { t } = (0, uikit_product_locale_1.useLocale)('PriceSummary');
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.priceSummary, className) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsx)(HeaderBlock_1.HeaderBlock, { period: period, onPeriodChanged: onPeriodChanged, periodOptions: periodOptions, promoBadge: promoBadge, layoutType: layoutType }), (0, jsx_runtime_1.jsxs)(ContentBlock_1.ContentBlock, { loading: loading, dataError: dataError, onRetry: onRetry, children: [discount && (0, jsx_runtime_1.jsx)(DiscountBlock_1.DiscountBlock, { value: discount, layoutType: layoutType }), (0, jsx_runtime_1.jsx)(TotalValueBlock_1.TotalValueBlock, { value: value, totalSumType: totalSumType, hint: hint, hintAppearance: hintAppearance, showHintTooltip: showHintTooltip, hintTooltipText: hintTooltipText, hintLink: hintLink, showHintLink: showHintLink, valueDelta: valueDelta }), (invoice === null || invoice === void 0 ? void 0 : invoice.length) && ((0, jsx_runtime_1.jsx)(InvoiceBlock_1.InvoiceBlock, { invoice: invoice, invoiceExpandedDefault: invoiceExpandedDefault, layoutType: layoutType })), (docsLink === null || docsLink === void 0 ? void 0 : docsLink.href) && ((0, jsx_runtime_1.jsx)(link_1.Link, { size: 'm', textMode: 'default', text: docsLink.text || t('docsLink'), href: docsLink.href, target: '_blank' }))] })] })));
+    const { invoice: enrichedInvoice, unavailableItems } = (0, react_1.useMemo)(() => (0, helpers_1.splitInvoiceByAvailability)(invoice, calculatePriceData), [invoice, calculatePriceData]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.priceSummary, className) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsx)(HeaderBlock_1.HeaderBlock, { period: period, onPeriodChanged: onPeriodChanged, periodOptions: periodOptions, promoBadge: promoBadge, layoutType: layoutType }), (0, jsx_runtime_1.jsxs)(ContentBlock_1.ContentBlock, { loading: loading, dataError: dataError, onRetry: onRetry, children: [discount && (0, jsx_runtime_1.jsx)(DiscountBlock_1.DiscountBlock, { value: discount, layoutType: layoutType }), (basePrice || priceChange) && (0, jsx_runtime_1.jsx)(PriceChangeBlock_1.PriceDetailsBlock, { priceChange: priceChange, basePrice: basePrice }), (0, jsx_runtime_1.jsx)(TotalValueBlock_1.TotalValueBlock, { value: value, totalSumType: totalSumType, hint: hint, hintAppearance: hintAppearance, showHintTooltip: showHintTooltip, hintTooltipText: hintTooltipText, hintLink: hintLink, showHintLink: showHintLink, valueDelta: valueDelta }), ((enrichedInvoice === null || enrichedInvoice === void 0 ? void 0 : enrichedInvoice.length) || (unavailableItems === null || unavailableItems === void 0 ? void 0 : unavailableItems.length)) && ((0, jsx_runtime_1.jsx)(InvoiceBlock_1.InvoiceBlock, { invoice: enrichedInvoice, unavailableItems: unavailableItems, invoiceExpandedDefault: invoiceExpandedDefault, layoutType: layoutType })), (docsLink === null || docsLink === void 0 ? void 0 : docsLink.href) && ((0, jsx_runtime_1.jsx)(link_1.Link, { size: 'm', textMode: 'default', text: docsLink.text || t('docsLink'), href: docsLink.href, target: '_blank' }))] })] })));
 }

package/dist/cjs/components/PriceSummary/components/InvoiceBlock/InvoiceBlock.d.ts

@@ -1,7 +1,8 @@
 import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
-import { InvoiceDetails } from '../../../../types';
+import { InvoiceDetails, InvoiceItem } from '../../../../types';
 export type InvoiceBlockProps = WithLayoutType<{
-    invoice: InvoiceDetails[];
+    invoice?: InvoiceDetails[];
+    unavailableItems?: InvoiceItem[];
     invoiceExpandedDefault?: boolean;
 }>;
-export declare function InvoiceBlock({ invoice, invoiceExpandedDefault, layoutType }: InvoiceBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function InvoiceBlock({ invoice, unavailableItems, invoiceExpandedDefault, layoutType }: InvoiceBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PriceSummary/components/InvoiceBlock/InvoiceBlock.js

@@ -11,8 +11,8 @@ const accordion_1 = require("@snack-uikit/accordion");
 const typography_1 = require("@snack-uikit/typography");
 const InvoiceDetailsBlock_1 = require("../InvoiceDetailsBlock");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function InvoiceBlock({ invoice, invoiceExpandedDefault, layoutType }) {
+function InvoiceBlock({ invoice, unavailableItems, invoiceExpandedDefault, layoutType }) {
     const { t } = (0, uikit_product_locale_1.useLocale)('PriceSummary');
     const invoiceBlockId = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsx)(accordion_1.AccordionSecondary, { expandedDefault: invoiceExpandedDefault ? invoiceBlockId : undefined, className: styles_module_scss_1.default.accordion, children: (0, jsx_runtime_1.jsx)(accordion_1.AccordionSecondary.CollapseBlock, { id: invoiceBlockId, header: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.accordionHeaderTitle, children: t('orderDetails') }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.accordionContent, children: invoice.map((invoice, index) => ((0, jsx_runtime_1.jsx)(InvoiceDetailsBlock_1.InvoiceDetailsBlock, { invoice: invoice, layoutType: layoutType }, index))) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(accordion_1.AccordionSecondary, { expandedDefault: invoiceExpandedDefault ? invoiceBlockId : undefined, className: styles_module_scss_1.default.accordion, children: (0, jsx_runtime_1.jsx)(accordion_1.AccordionSecondary.CollapseBlock, { id: invoiceBlockId, header: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.accordionHeaderTitle, children: t('orderDetails') }), children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.accordionContent, children: [(unavailableItems === null || unavailableItems === void 0 ? void 0 : unavailableItems.length) && ((0, jsx_runtime_1.jsx)(InvoiceDetailsBlock_1.InvoiceDetailsBlock, { invoice: { title: t('unavailableByContract'), items: unavailableItems }, layoutType: layoutType, showCoveredByGrantLabels: false, titleAsRedTag: true })), invoice === null || invoice === void 0 ? void 0 : invoice.map((invoice, index) => ((0, jsx_runtime_1.jsx)(InvoiceDetailsBlock_1.InvoiceDetailsBlock, { invoice: invoice, layoutType: layoutType }, index)))] }) }) }));
 }

package/dist/cjs/components/PriceSummary/components/InvoiceDetailsBlock/InvoiceDetailsBlock.d.ts

@@ -2,5 +2,7 @@ import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { InvoiceDetails } from '../../../../types';
 export type InvoiceDetailsBlockProps = WithLayoutType<{
     invoice: InvoiceDetails;
+    showCoveredByGrantLabels?: boolean;
+    titleAsRedTag?: boolean;
 }>;
-export declare function InvoiceDetailsBlock({ invoice, layoutType }: InvoiceDetailsBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function InvoiceDetailsBlock({ invoice, layoutType, showCoveredByGrantLabels, titleAsRedTag, }: InvoiceDetailsBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PriceSummary/components/InvoiceDetailsBlock/InvoiceDetailsBlock.js

@@ -6,19 +6,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InvoiceDetailsBlock = InvoiceDetailsBlock;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const promo_tag_1 = require("@snack-uikit/promo-tag");
 const typography_1 = require("@snack-uikit/typography");
 const helpers_1 = require("../../../../helpers");
 const CoveredByGrantLabel_1 = require("../CoveredByGrantLabel");
 const Divider_1 = require("../Divider");
 const InvoiceItemBlock_1 = require("../InvoiceItemBlock");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function InvoiceDetailsBlock({ invoice, layoutType }) {
+function InvoiceDetailsBlock({ invoice, layoutType, showCoveredByGrantLabels = true, titleAsRedTag = false, }) {
     var _a;
     const { t } = (0, uikit_product_locale_1.useLocale)('PriceSummary');
     const primaryItems = invoice.items.filter(item => item.primary);
     const firstValue = (_a = primaryItems[0]) === null || _a === void 0 ? void 0 : _a.coveredByGrant;
     const allSameValue = primaryItems.length > 0 && primaryItems.every(item => item.coveredByGrant === firstValue);
-    const showBlockLabel = allSameValue && firstValue !== undefined;
-    const showItemLabels = !showBlockLabel;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.main, children: [showBlockLabel && (0, jsx_runtime_1.jsx)(CoveredByGrantLabel_1.CoveredByGrantLabel, { covered: firstValue }), invoice.title && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelM, { children: invoice.title }), invoice.quantity && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelM, { children: (0, helpers_1.formatQuantity)(invoice.quantity) })] }), (0, jsx_runtime_1.jsx)(Divider_1.Divider, {})] })), invoice.items.map((item, index) => ((0, jsx_runtime_1.jsx)(InvoiceItemBlock_1.InvoiceItemBlock, { item: item, index: index, layoutType: layoutType, showCoveredByGrantLabel: showItemLabels }, index))), invoice.price !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.footer, children: (0, jsx_runtime_1.jsxs)(typography_1.Typography.SansLabelM, { children: [t('price'), ": ", (0, helpers_1.formatCurrency)(invoice.price)] }) })] }))] }));
+    const showBlockLabel = showCoveredByGrantLabels && allSameValue && firstValue !== undefined;
+    const showItemLabels = showCoveredByGrantLabels && !showBlockLabel;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.main, children: [showBlockLabel && (0, jsx_runtime_1.jsx)(CoveredByGrantLabel_1.CoveredByGrantLabel, { covered: firstValue }), invoice.title && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [titleAsRedTag ? ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { appearance: 'red', color: 'decor', size: 'xxs', text: invoice.title })) : ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelM, { children: invoice.title })), invoice.quantity && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelM, { children: (0, helpers_1.formatQuantity)(invoice.quantity) })] }), (0, jsx_runtime_1.jsx)(Divider_1.Divider, {})] })), invoice.items.map((item, index) => ((0, jsx_runtime_1.jsx)(InvoiceItemBlock_1.InvoiceItemBlock, { item: item, index: index, layoutType: layoutType, showCoveredByGrantLabel: showItemLabels }, index))), invoice.price !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.footer, children: (0, jsx_runtime_1.jsxs)(typography_1.Typography.SansLabelM, { children: [t('price'), ": ", (0, helpers_1.formatCurrency)(invoice.price)] }) })] }))] }));
 }

package/dist/cjs/components/PriceSummary/components/PriceChangeBlock/PriceChangeBlock.d.ts

@@ -0,0 +1,6 @@
+import { PriceChangeDetails } from '../../../../types';
+export type PriceDetailsBlockProps = {
+    basePrice?: number;
+    priceChange?: PriceChangeDetails;
+};
+export declare function PriceDetailsBlock({ basePrice, priceChange }: PriceDetailsBlockProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/components/PriceSummary/components/PriceChangeBlock/PriceChangeBlock.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PriceDetailsBlock = PriceDetailsBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const typography_1 = require("@snack-uikit/typography");
+const helpers_1 = require("../../../../helpers");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function PriceDetailsBlock({ basePrice, priceChange }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('PriceSummary');
+    const formattedValue = priceChange ? (0, helpers_1.formatPriceChange)(priceChange) : undefined;
+    if (!basePrice && !priceChange) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.priceDetails, children: [basePrice && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.priceDetailsRow, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { tag: 'div', children: t('basePrice') }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.priceDetailsValue, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelM, { tag: 'div', children: (0, helpers_1.formatCurrency)(basePrice) }) })] })), priceChange && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.priceDetailsRow, styles_module_scss_1.default.priceChangeRow), "data-appearance": (0, helpers_1.getPriceChangeAppearance)(priceChange.value), children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { tag: 'div', children: t('priceChange') }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.priceDetailsValue, title: formattedValue, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelM, { tag: 'div', children: formattedValue }) })] }))] }));
+}

package/dist/cjs/components/PriceSummary/components/PriceChangeBlock/index.d.ts

@@ -0,0 +1 @@
+export * from './PriceChangeBlock';

package/dist/cjs/components/PriceSummary/components/PriceChangeBlock/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PriceChangeBlock"), exports);

package/dist/cjs/components/PriceSummary/components/PriceChangeBlock/styles.module.css

@@ -0,0 +1,18 @@
+.priceDetailsValue{
+  overflow-wrap:anywhere;
+  text-align:end;
+}
+
+.priceDetailsRow{
+  display:flex;
+  gap:var(--dimension-1m, 8px);
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.priceDetailsRow > *{
+  flex:1 1 0;
+  min-width:0;
+}
+
+.priceChangeRow[data-appearance=increased]{
+  color:var(--sys-red-text-main, #7a2d2d);
+}

package/dist/cjs/components/PriceSummary/components/TotalValueBlock/TotalValueBlock.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ValueOf } from '@snack-uikit/utils';
-import { PriceDeltaDetails, TotalSumType } from '../../../../types';
+import { PriceDeltaDetails, TotalSumType, TotalValueRange } from '../../../../types';
 export declare const APPEARANCE_STATE: {
     readonly Default: "default";
     readonly UserError: "userError";
@@ -9,7 +9,7 @@ export declare const APPEARANCE_STATE: {
 };
 export type AppearanceState = ValueOf<typeof APPEARANCE_STATE>;
 export type TotalValueBlockProps = {
-    value?: number;
+    value?: number | TotalValueRange;
     valueDelta?: PriceDeltaDetails;
     totalSumType?: TotalSumType;
     hint?: string;

package/dist/cjs/components/PriceSummary/components/TotalValueBlock/TotalValueBlock.js

@@ -39,8 +39,34 @@ function getAppearanceIcon(appearance) {
     }
     return (0, jsx_runtime_1.jsx)(Component, { size: 16, "data-appearance": appearance, className: styles_module_scss_1.default.hintIcon });
 }
+function getTotalSumPrefix(totalSumType, fromPrefix, toPrefix) {
+    if (totalSumType === 'from') {
+        return `${fromPrefix} `;
+    }
+    if (totalSumType === 'to') {
+        return `${toPrefix} `;
+    }
+    return '';
+}
+function isTotalValueRange(value) {
+    return typeof value === 'object' && value !== null;
+}
+function formatTotalValueRange(value) {
+    return `${(0, helpers_1.formatCurrencyValue)(value.min)} — ${(0, helpers_1.formatCurrencyValue)(value.max)} ₽`;
+}
+function formatTotalValue(value, totalSumType, fromPrefix, toPrefix) {
+    if (isTotalValueRange(value)) {
+        return formatTotalValueRange(value);
+    }
+    if (value === undefined) {
+        return 'N/A';
+    }
+    return `${getTotalSumPrefix(totalSumType, fromPrefix, toPrefix)}${(0, helpers_1.formatCurrency)(value)}`;
+}
 function TotalValueBlock({ value, totalSumType = 'equal', hint, hintAppearance = exports.APPEARANCE_STATE.Default, showHintTooltip, hintTooltipText, hintLink, showHintLink, valueDelta, }) {
     const { t } = (0, uikit_product_locale_1.useLocale)('PriceSummary');
-    const totalSumPrefix = totalSumType === 'from' ? `${t('totalSumFromPrefix')} ` : '';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-appearance": hintAppearance, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.LightHeadlineS, { children: value !== undefined ? `${totalSumPrefix}${(0, helpers_1.formatCurrency)(Number(value))}` : 'N/A' }), valueDelta && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.valueDelta, children: `${t(`${valueDelta.type}Price`)} ${(0, helpers_1.formatCurrency)(valueDelta.value)}` })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { open: showHintTooltip && hintTooltipText ? undefined : false, tip: hintTooltipText, placement: 'left-start', children: hint && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.hint, "data-appearance": hintAppearance, children: [getAppearanceIcon(hintAppearance), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { children: hint })] })) }), showHintLink && ((0, jsx_runtime_1.jsx)(link_1.Link, { textMode: 'accent', appearance: 'neutral', size: 's', href: hintLink === null || hintLink === void 0 ? void 0 : hintLink.href, text: hintLink === null || hintLink === void 0 ? void 0 : hintLink.text, className: styles_module_scss_1.default.link }))] }));
+    const displayedAppearance = hintAppearance !== null && hintAppearance !== void 0 ? hintAppearance : exports.APPEARANCE_STATE.Default;
+    const displayedHint = hint !== null && hint !== void 0 ? hint : t('preliminaryHint');
+    const totalValue = formatTotalValue(value, totalSumType, t('totalSumFromPrefix'), t('totalSumToPrefix'));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-appearance": displayedAppearance, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.LightHeadlineS, { className: isTotalValueRange(value) ? styles_module_scss_1.default.rangeValue : undefined, children: totalValue }), valueDelta && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.valueDelta, children: `${t(`${valueDelta.type}Price`)} ${(0, helpers_1.formatCurrency)(valueDelta.value)}` })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { open: showHintTooltip && hintTooltipText ? undefined : false, tip: hintTooltipText, placement: 'left-start', children: displayedHint && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.hint, "data-appearance": displayedAppearance, children: [getAppearanceIcon(displayedAppearance), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { children: displayedHint })] })) }), showHintLink && ((0, jsx_runtime_1.jsx)(link_1.Link, { textMode: 'accent', appearance: 'neutral', size: 's', href: hintLink === null || hintLink === void 0 ? void 0 : hintLink.href, text: hintLink === null || hintLink === void 0 ? void 0 : hintLink.text, className: styles_module_scss_1.default.link }))] }));
 }

package/dist/cjs/components/PriceSummary/components/TotalValueBlock/styles.module.css

@@ -1,4 +1,5 @@
 .content{
+  container-type:inline-size;
   display:flex;
   flex-direction:column;
   text-align:start;
@@ -13,6 +14,13 @@
   color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 
+.rangeValue{
+  max-width:100%;
+  font-size:clamp(18px, 8cqi, 24px);
+  line-height:30px;
+  overflow-wrap:anywhere;
+}
+
 .hint{
   display:flex;
   align-items:center;

package/dist/cjs/helpers/__tests__/mapInvoiceWithCalculatePrice.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/helpers/__tests__/mapInvoiceWithCalculatePrice.spec.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const mapInvoiceWithCalculatePrice_1 = require("../mapInvoiceWithCalculatePrice");
+const coveredSkuId = 'd4d5b1d9-7318-44c2-830b-5be7650f760f';
+const uncoveredSkuId = 'ee5a2062-fdb3-43f9-a93e-2ae6224a35d6';
+const unavailableSkuId = 'adb93523-71f8-4010-a469-3eb06079d4a5';
+const resourceSpecCode = 'cpu.1c';
+const invoice = [
+    {
+        quantity: 1,
+        title: 'Compute',
+        price: 100,
+        items: [
+            { id: coveredSkuId, quantity: 1, primary: true, label: 'Covered SKU', price: 40 },
+            { id: uncoveredSkuId, quantity: 1, primary: true, label: 'Uncovered SKU', price: 30 },
+            { id: unavailableSkuId, quantity: 1, primary: true, label: 'Unavailable SKU', price: 20 },
+            { quantity: 1, primary: false, label: 'Secondary SKU', price: 10 },
+            { quantity: 1, primary: true, label: 'SKU without id', price: 10 },
+        ],
+    },
+];
+const calculatePriceData = {
+    skuResults: [
+        {
+            resourceSpecCodeId: coveredSkuId,
+            skuAvailability: true,
+            coveredByGrants: true,
+        },
+        {
+            resourceSpecCodeId: uncoveredSkuId,
+            skuAvailability: true,
+            coveredByGrants: false,
+        },
+        {
+            resourceSpecCodeId: unavailableSkuId,
+            skuAvailability: false,
+            coveredByGrants: true,
+        },
+        {
+            resourceSpecCode,
+            skuAvailability: true,
+            coveredByGrants: true,
+        },
+    ],
+};
+(0, vitest_1.describe)('mapInvoiceWithCalculatePrice', () => {
+    (0, vitest_1.it)('should return the original invoice when calculatePriceData is missing', () => {
+        (0, vitest_1.expect)((0, mapInvoiceWithCalculatePrice_1.mapInvoiceWithCalculatePrice)(invoice, undefined)).toBe(invoice);
+    });
+    (0, vitest_1.it)('should return the original invoice when skuResults are empty', () => {
+        (0, vitest_1.expect)((0, mapInvoiceWithCalculatePrice_1.mapInvoiceWithCalculatePrice)(invoice, { skuResults: [] })).toBe(invoice);
+    });
+    (0, vitest_1.it)('should set coveredByGrant for available SKUs matched by resourceSpecCodeId', () => {
+        const result = (0, mapInvoiceWithCalculatePrice_1.mapInvoiceWithCalculatePrice)(invoice, calculatePriceData);
+        (0, vitest_1.expect)(result === null || result === void 0 ? void 0 : result[0].items[0]).toMatchObject({ id: coveredSkuId, coveredByGrant: true });
+        (0, vitest_1.expect)(result === null || result === void 0 ? void 0 : result[0].items[1]).toMatchObject({ id: uncoveredSkuId, coveredByGrant: false });
+    });
+    (0, vitest_1.it)('should not set coveredByGrant when skuAvailability is false', () => {
+        const result = (0, mapInvoiceWithCalculatePrice_1.mapInvoiceWithCalculatePrice)(invoice, calculatePriceData);
+        (0, vitest_1.expect)(result === null || result === void 0 ? void 0 : result[0].items[2]).toEqual(invoice[0].items[2]);
+        (0, vitest_1.expect)(result === null || result === void 0 ? void 0 : result[0].items[2]).not.toHaveProperty('coveredByGrant');
+    });
+    (0, vitest_1.it)('should not set coveredByGrant for secondary items or items without id', () => {
+        const result = (0, mapInvoiceWithCalculatePrice_1.mapInvoiceWithCalculatePrice)(invoice, calculatePriceData);
+        (0, vitest_1.expect)(result === null || result === void 0 ? void 0 : result[0].items[3]).toEqual(invoice[0].items[3]);
+        (0, vitest_1.expect)(result === null || result === void 0 ? void 0 : result[0].items[4]).toEqual(invoice[0].items[4]);
+    });
+    (0, vitest_1.it)('should match SKUs by resourceSpecCode', () => {
+        const invoiceWithResourceSpecCode = [
+            {
+                items: [{ id: resourceSpecCode, quantity: 1, primary: true, label: 'CPU', price: 100 }],
+            },
+        ];
+        const result = (0, mapInvoiceWithCalculatePrice_1.mapInvoiceWithCalculatePrice)(invoiceWithResourceSpecCode, calculatePriceData);
+        (0, vitest_1.expect)(result === null || result === void 0 ? void 0 : result[0].items[0]).toMatchObject({ id: resourceSpecCode, coveredByGrant: true });
+    });
+});

package/dist/cjs/helpers/formatPriceChange.d.ts

@@ -0,0 +1,3 @@
+import { PriceChangeDetails } from '../types';
+export declare function getSign(value: number): "+" | "-" | "";
+export declare function formatPriceChange(value: PriceChangeDetails): string;

package/dist/cjs/helpers/formatPriceChange.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSign = getSign;
+exports.formatPriceChange = formatPriceChange;
+const ft_formatters_1 = require("@cloud-ru/ft-formatters");
+const formatters_1 = require("./formatters");
+function getSign(value) {
+    if (value > 0) {
+        return '+';
+    }
+    if (value < 0) {
+        return '-';
+    }
+    return '';
+}
+function formatPriceChange(value) {
+    const sign = getSign(value.value);
+    const amount = `${sign}${(0, formatters_1.formatCurrency)(Math.abs(value.value))}`;
+    if (value.percentage === undefined) {
+        return amount;
+    }
+    return `${amount} (${sign}${(0, ft_formatters_1.formatNumber)(Math.abs(value.percentage))}%)`;
+}

package/dist/cjs/helpers/formatters.d.ts

@@ -1,2 +1,3 @@
+export declare function formatCurrencyValue(value: number): string;
 export declare function formatCurrency(value: number): string;
 export declare function formatQuantity(value: string | number): string;

package/dist/cjs/helpers/formatters.js

@@ -1,8 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatCurrencyValue = formatCurrencyValue;
 exports.formatCurrency = formatCurrency;
 exports.formatQuantity = formatQuantity;
 const ft_formatters_1 = require("@cloud-ru/ft-formatters");
+function formatCurrencyValue(value) {
+    return (0, ft_formatters_1.formatNumber)(value.toFixed(2), {
+        precision: 2,
+    });
+}
 function formatCurrency(value) {
     return (0, ft_formatters_1.formatNumber)(value.toFixed(2), {
         precision: 2,

package/dist/cjs/helpers/getPriceChangeAppearance.d.ts

@@ -0,0 +1 @@
+export declare function getPriceChangeAppearance(value: number): "increased" | "decreased" | "unchanged";

package/dist/cjs/helpers/getPriceChangeAppearance.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPriceChangeAppearance = getPriceChangeAppearance;
+function getPriceChangeAppearance(value) {
+    if (value > 0) {
+        return 'increased';
+    }
+    if (value < 0) {
+        return 'decreased';
+    }
+    return 'unchanged';
+}

package/dist/cjs/helpers/index.d.ts

@@ -1 +1,4 @@
 export * from './formatters';
+export * from './mapInvoiceWithCalculatePrice';
+export * from './formatPriceChange';
+export * from './getPriceChangeAppearance';

package/dist/cjs/helpers/index.js

@@ -15,3 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./formatters"), exports);
+__exportStar(require("./mapInvoiceWithCalculatePrice"), exports);
+__exportStar(require("./formatPriceChange"), exports);
+__exportStar(require("./getPriceChangeAppearance"), exports);