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

package/dist/cjs/helpers/mapInvoiceWithCalculatePrice.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapInvoiceWithCalculatePrice = mapInvoiceWithCalculatePrice;
+exports.splitInvoiceByAvailability = splitInvoiceByAvailability;
+function setSkuFlags(skuFlagsById, key, flags) {
+    if (!key) {
+        return;
+    }
+    skuFlagsById.set(key, flags);
+}
+function getSkuFlagsById(calculatePriceData) {
+    const skuFlagsById = new Map();
+    calculatePriceData.skuResults.forEach(result => {
+        const flags = {
+            available: result.skuAvailability,
+            covered: result.coveredByGrants,
+        };
+        setSkuFlags(skuFlagsById, result.skuId, flags);
+        setSkuFlags(skuFlagsById, result.resourceSpecCode, flags);
+        setSkuFlags(skuFlagsById, result.resourceSpecCodeId, flags);
+        setSkuFlags(skuFlagsById, result.skuCode, flags);
+    });
+    return skuFlagsById;
+}
+function isUnavailableInvoiceItem(item, skuFlagsById) {
+    var _a;
+    if (!item.primary || !item.id) {
+        return false;
+    }
+    return ((_a = skuFlagsById.get(item.id)) === null || _a === void 0 ? void 0 : _a.available) === false;
+}
+function mapInvoiceItemWithSkuFlags(item, skuFlagsById) {
+    if (!item.primary || !item.id) {
+        return item;
+    }
+    const skuFlags = skuFlagsById.get(item.id);
+    if (!skuFlags || skuFlags.available === false) {
+        return item;
+    }
+    return Object.assign(Object.assign({}, item), { coveredByGrant: skuFlags.covered });
+}
+function splitInvoiceDetailsByAvailability(details, skuFlagsById) {
+    const unavailableItems = details.items.filter(item => isUnavailableInvoiceItem(item, skuFlagsById));
+    const availableItems = details.items
+        .filter(item => !isUnavailableInvoiceItem(item, skuFlagsById))
+        .map(item => mapInvoiceItemWithSkuFlags(item, skuFlagsById));
+    if (!availableItems.length) {
+        return { unavailableItems };
+    }
+    if (!unavailableItems.length) {
+        return {
+            availableDetails: Object.assign(Object.assign({}, details), { items: availableItems }),
+            unavailableItems,
+        };
+    }
+    return {
+        availableDetails: Object.assign(Object.assign({}, details), { items: availableItems, price: undefined, quantity: undefined }),
+        unavailableItems,
+    };
+}
+function mapInvoiceWithCalculatePrice(invoice, calculatePriceData) {
+    if (!(invoice === null || invoice === void 0 ? void 0 : invoice.length) || !(calculatePriceData === null || calculatePriceData === void 0 ? void 0 : calculatePriceData.skuResults.length)) {
+        return invoice;
+    }
+    const skuFlagsById = getSkuFlagsById(calculatePriceData);
+    return invoice.map(details => (Object.assign(Object.assign({}, details), { items: details.items.map(item => mapInvoiceItemWithSkuFlags(item, skuFlagsById)) })));
+}
+function splitInvoiceByAvailability(invoice, calculatePriceData) {
+    if (!(invoice === null || invoice === void 0 ? void 0 : invoice.length) || !(calculatePriceData === null || calculatePriceData === void 0 ? void 0 : calculatePriceData.skuResults.length)) {
+        return { invoice, unavailableItems: undefined };
+    }
+    const skuFlagsById = getSkuFlagsById(calculatePriceData);
+    const detailsSplits = invoice.map(details => splitInvoiceDetailsByAvailability(details, skuFlagsById));
+    const availableInvoice = detailsSplits.flatMap(({ availableDetails }) => availableDetails ? [availableDetails] : []);
+    const unavailableItems = detailsSplits.flatMap(detailsSplit => detailsSplit.unavailableItems);
+    if (!unavailableItems.length) {
+        return { invoice: availableInvoice, unavailableItems: undefined };
+    }
+    return { invoice: availableInvoice, unavailableItems };
+}

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

@@ -6,7 +6,11 @@ export declare enum PricePeriod {
     Hour = "hour",
     Minute = "minute"
 }
-export type TotalSumType = 'equal' | 'from';
+export type TotalSumType = 'equal' | 'from' | 'to';
+export type TotalValueRange = {
+    min: number;
+    max: number;
+};
 export type DiscountItem = {
     value: number;
     percent?: number;
@@ -35,10 +39,12 @@ export type BaseInvoiceItem = (PriceInvoiceItem | DiscountInvoiceItem) & {
 };
 export type PrimaryInvoiceItem = BaseInvoiceItem & {
     primary: true;
+    id?: string;
     coveredByGrant?: boolean;
 };
 export type SecondaryInvoiceItem = BaseInvoiceItem & {
     primary?: false;
+    id?: never;
     coveredByGrant?: never;
 };
 export type InvoiceItem = PrimaryInvoiceItem | SecondaryInvoiceItem;
@@ -52,3 +58,25 @@ export type PriceDeltaDetails = {
     value: number;
     type: 'increased' | 'decreased';
 };
+export type PriceChangeDetails = {
+    /**
+     * Signed difference between the current and previous price.
+     * A positive value increases the cost, a negative value is a discount.
+     */
+    value: number;
+    percentage?: number;
+};
+export type SkuPriceResult = {
+    skuId?: string;
+    skuCode?: string;
+    resourceSpecCode?: string;
+    resourceSpecCodeId?: string;
+    skuAvailability?: boolean;
+    coveredByGrants?: boolean;
+};
+export type CalculatePriceData = {
+    skuResults: SkuPriceResult[];
+    allow?: boolean;
+};
+/** @deprecated Use CalculatePriceData instead. */
+export type CalculatePriceResponse = CalculatePriceData;

package/dist/esm/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/esm/components/PriceSummary/PriceSummary.js

@@ -11,17 +11,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import { useMemo } from 'react';
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
 import { Link } from '@snack-uikit/link';
+import { splitInvoiceByAvailability } from '../../helpers';
 import { ContentBlock } from '../ContentBlock';
 import { DiscountBlock } from './components/DiscountBlock';
 import { HeaderBlock } from './components/HeaderBlock';
 import { InvoiceBlock } from './components/InvoiceBlock';
+import { PriceDetailsBlock } from './components/PriceChangeBlock';
 import { TotalValueBlock } from './components/TotalValueBlock';
 import styles from './styles.module.css';
 export 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 } = useLocale('PriceSummary');
-    return (_jsxs("div", Object.assign({ className: cn(styles.priceSummary, className) }, extractSupportProps(rest), { children: [_jsx(HeaderBlock, { period: period, onPeriodChanged: onPeriodChanged, periodOptions: periodOptions, promoBadge: promoBadge, layoutType: layoutType }), _jsxs(ContentBlock, { loading: loading, dataError: dataError, onRetry: onRetry, children: [discount && _jsx(DiscountBlock, { value: discount, layoutType: layoutType }), _jsx(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) && (_jsx(InvoiceBlock, { invoice: invoice, invoiceExpandedDefault: invoiceExpandedDefault, layoutType: layoutType })), (docsLink === null || docsLink === void 0 ? void 0 : docsLink.href) && (_jsx(Link, { size: 'm', textMode: 'default', text: docsLink.text || t('docsLink'), href: docsLink.href, target: '_blank' }))] })] })));
+    const { invoice: enrichedInvoice, unavailableItems } = useMemo(() => splitInvoiceByAvailability(invoice, calculatePriceData), [invoice, calculatePriceData]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.priceSummary, className) }, extractSupportProps(rest), { children: [_jsx(HeaderBlock, { period: period, onPeriodChanged: onPeriodChanged, periodOptions: periodOptions, promoBadge: promoBadge, layoutType: layoutType }), _jsxs(ContentBlock, { loading: loading, dataError: dataError, onRetry: onRetry, children: [discount && _jsx(DiscountBlock, { value: discount, layoutType: layoutType }), (basePrice || priceChange) && _jsx(PriceDetailsBlock, { priceChange: priceChange, basePrice: basePrice }), _jsx(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)) && (_jsx(InvoiceBlock, { invoice: enrichedInvoice, unavailableItems: unavailableItems, invoiceExpandedDefault: invoiceExpandedDefault, layoutType: layoutType })), (docsLink === null || docsLink === void 0 ? void 0 : docsLink.href) && (_jsx(Link, { size: 'm', textMode: 'default', text: docsLink.text || t('docsLink'), href: docsLink.href, target: '_blank' }))] })] })));
 }

package/dist/esm/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/esm/components/PriceSummary/components/InvoiceBlock/InvoiceBlock.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { AccordionSecondary } from '@snack-uikit/accordion';
 import { Typography } from '@snack-uikit/typography';
 import { InvoiceDetailsBlock } from '../InvoiceDetailsBlock';
 import styles from './styles.module.css';
-export function InvoiceBlock({ invoice, invoiceExpandedDefault, layoutType }) {
+export function InvoiceBlock({ invoice, unavailableItems, invoiceExpandedDefault, layoutType }) {
     const { t } = useLocale('PriceSummary');
     const invoiceBlockId = useId();
-    return (_jsx(AccordionSecondary, { expandedDefault: invoiceExpandedDefault ? invoiceBlockId : undefined, className: styles.accordion, children: _jsx(AccordionSecondary.CollapseBlock, { id: invoiceBlockId, header: _jsx(Typography.SansBodyM, { className: styles.accordionHeaderTitle, children: t('orderDetails') }), children: _jsx("div", { className: styles.accordionContent, children: invoice.map((invoice, index) => (_jsx(InvoiceDetailsBlock, { invoice: invoice, layoutType: layoutType }, index))) }) }) }));
+    return (_jsx(AccordionSecondary, { expandedDefault: invoiceExpandedDefault ? invoiceBlockId : undefined, className: styles.accordion, children: _jsx(AccordionSecondary.CollapseBlock, { id: invoiceBlockId, header: _jsx(Typography.SansBodyM, { className: styles.accordionHeaderTitle, children: t('orderDetails') }), children: _jsxs("div", { className: styles.accordionContent, children: [(unavailableItems === null || unavailableItems === void 0 ? void 0 : unavailableItems.length) && (_jsx(InvoiceDetailsBlock, { invoice: { title: t('unavailableByContract'), items: unavailableItems }, layoutType: layoutType, showCoveredByGrantLabels: false, titleAsRedTag: true })), invoice === null || invoice === void 0 ? void 0 : invoice.map((invoice, index) => (_jsx(InvoiceDetailsBlock, { invoice: invoice, layoutType: layoutType }, index)))] }) }) }));
 }

package/dist/esm/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/esm/components/PriceSummary/components/InvoiceDetailsBlock/InvoiceDetailsBlock.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { PromoTag } from '@snack-uikit/promo-tag';
 import { Typography } from '@snack-uikit/typography';
 import { formatCurrency, formatQuantity } from '../../../../helpers';
 import { CoveredByGrantLabel } from '../CoveredByGrantLabel';
 import { Divider } from '../Divider';
 import { InvoiceItemBlock } from '../InvoiceItemBlock';
 import styles from './styles.module.css';
-export function InvoiceDetailsBlock({ invoice, layoutType }) {
+export function InvoiceDetailsBlock({ invoice, layoutType, showCoveredByGrantLabels = true, titleAsRedTag = false, }) {
     var _a;
     const { t } = 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 (_jsxs("div", { className: styles.main, children: [showBlockLabel && _jsx(CoveredByGrantLabel, { covered: firstValue }), invoice.title && (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.header, children: [_jsx(Typography.SansLabelM, { children: invoice.title }), invoice.quantity && _jsx(Typography.SansLabelM, { children: formatQuantity(invoice.quantity) })] }), _jsx(Divider, {})] })), invoice.items.map((item, index) => (_jsx(InvoiceItemBlock, { item: item, index: index, layoutType: layoutType, showCoveredByGrantLabel: showItemLabels }, index))), invoice.price !== undefined && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx("div", { className: styles.footer, children: _jsxs(Typography.SansLabelM, { children: [t('price'), ": ", formatCurrency(invoice.price)] }) })] }))] }));
+    const showBlockLabel = showCoveredByGrantLabels && allSameValue && firstValue !== undefined;
+    const showItemLabels = showCoveredByGrantLabels && !showBlockLabel;
+    return (_jsxs("div", { className: styles.main, children: [showBlockLabel && _jsx(CoveredByGrantLabel, { covered: firstValue }), invoice.title && (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.header, children: [titleAsRedTag ? (_jsx(PromoTag, { appearance: 'red', color: 'decor', size: 'xxs', text: invoice.title })) : (_jsx(Typography.SansLabelM, { children: invoice.title })), invoice.quantity && _jsx(Typography.SansLabelM, { children: formatQuantity(invoice.quantity) })] }), _jsx(Divider, {})] })), invoice.items.map((item, index) => (_jsx(InvoiceItemBlock, { item: item, index: index, layoutType: layoutType, showCoveredByGrantLabel: showItemLabels }, index))), invoice.price !== undefined && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx("div", { className: styles.footer, children: _jsxs(Typography.SansLabelM, { children: [t('price'), ": ", formatCurrency(invoice.price)] }) })] }))] }));
 }

package/dist/esm/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/esm/components/PriceSummary/components/PriceChangeBlock/PriceChangeBlock.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { Typography } from '@snack-uikit/typography';
+import { formatCurrency, formatPriceChange, getPriceChangeAppearance } from '../../../../helpers';
+import styles from './styles.module.css';
+export function PriceDetailsBlock({ basePrice, priceChange }) {
+    const { t } = useLocale('PriceSummary');
+    const formattedValue = priceChange ? formatPriceChange(priceChange) : undefined;
+    if (!basePrice && !priceChange) {
+        return null;
+    }
+    return (_jsxs("div", { className: styles.priceDetails, children: [basePrice && (_jsxs("div", { className: styles.priceDetailsRow, children: [_jsx(Typography.SansBodyS, { tag: 'div', children: t('basePrice') }), _jsx("div", { className: styles.priceDetailsValue, children: _jsx(Typography.SansLabelM, { tag: 'div', children: formatCurrency(basePrice) }) })] })), priceChange && (_jsxs("div", { className: cn(styles.priceDetailsRow, styles.priceChangeRow), "data-appearance": getPriceChangeAppearance(priceChange.value), children: [_jsx(Typography.SansBodyS, { tag: 'div', children: t('priceChange') }), _jsx("div", { className: styles.priceDetailsValue, title: formattedValue, children: _jsx(Typography.SansLabelM, { tag: 'div', children: formattedValue }) })] }))] }));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/PriceSummary/components/TotalValueBlock/TotalValueBlock.js

@@ -5,7 +5,7 @@ import { AlarmFilledSVG, CrossFilledSVG, QuestionSVG } from '@snack-uikit/icons'
 import { Link } from '@snack-uikit/link';
 import { Tooltip } from '@snack-uikit/tooltip';
 import { Typography } from '@snack-uikit/typography';
-import { formatCurrency } from '../../../../helpers';
+import { formatCurrency, formatCurrencyValue } from '../../../../helpers';
 import styles from './styles.module.css';
 export const APPEARANCE_STATE = {
     Default: 'default',
@@ -32,8 +32,34 @@ function getAppearanceIcon(appearance) {
     }
     return _jsx(Component, { size: 16, "data-appearance": appearance, className: styles.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 `${formatCurrencyValue(value.min)} — ${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)}${formatCurrency(value)}`;
+}
 export function TotalValueBlock({ value, totalSumType = 'equal', hint, hintAppearance = APPEARANCE_STATE.Default, showHintTooltip, hintTooltipText, hintLink, showHintLink, valueDelta, }) {
     const { t } = useLocale('PriceSummary');
-    const totalSumPrefix = totalSumType === 'from' ? `${t('totalSumFromPrefix')} ` : '';
-    return (_jsxs("div", { className: styles.content, "data-appearance": hintAppearance, children: [_jsx(Typography.LightHeadlineS, { children: value !== undefined ? `${totalSumPrefix}${formatCurrency(Number(value))}` : 'N/A' }), valueDelta && (_jsx(Typography.SansBodyS, { className: styles.valueDelta, children: `${t(`${valueDelta.type}Price`)} ${formatCurrency(valueDelta.value)}` })), _jsx(Tooltip, { open: showHintTooltip && hintTooltipText ? undefined : false, tip: hintTooltipText, placement: 'left-start', children: hint && (_jsxs("div", { className: styles.hint, "data-appearance": hintAppearance, children: [getAppearanceIcon(hintAppearance), _jsx(Typography.SansBodyS, { children: hint })] })) }), showHintLink && (_jsx(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.link }))] }));
+    const displayedAppearance = hintAppearance !== null && hintAppearance !== void 0 ? hintAppearance : APPEARANCE_STATE.Default;
+    const displayedHint = hint !== null && hint !== void 0 ? hint : t('preliminaryHint');
+    const totalValue = formatTotalValue(value, totalSumType, t('totalSumFromPrefix'), t('totalSumToPrefix'));
+    return (_jsxs("div", { className: styles.content, "data-appearance": displayedAppearance, children: [_jsx(Typography.LightHeadlineS, { className: isTotalValueRange(value) ? styles.rangeValue : undefined, children: totalValue }), valueDelta && (_jsx(Typography.SansBodyS, { className: styles.valueDelta, children: `${t(`${valueDelta.type}Price`)} ${formatCurrency(valueDelta.value)}` })), _jsx(Tooltip, { open: showHintTooltip && hintTooltipText ? undefined : false, tip: hintTooltipText, placement: 'left-start', children: displayedHint && (_jsxs("div", { className: styles.hint, "data-appearance": displayedAppearance, children: [getAppearanceIcon(displayedAppearance), _jsx(Typography.SansBodyS, { children: displayedHint })] })) }), showHintLink && (_jsx(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.link }))] }));
 }

package/dist/esm/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/esm/helpers/__tests__/mapInvoiceWithCalculatePrice.spec.d.ts

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

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

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest';
+import { mapInvoiceWithCalculatePrice } from '../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,
+        },
+    ],
+};
+describe('mapInvoiceWithCalculatePrice', () => {
+    it('should return the original invoice when calculatePriceData is missing', () => {
+        expect(mapInvoiceWithCalculatePrice(invoice, undefined)).toBe(invoice);
+    });
+    it('should return the original invoice when skuResults are empty', () => {
+        expect(mapInvoiceWithCalculatePrice(invoice, { skuResults: [] })).toBe(invoice);
+    });
+    it('should set coveredByGrant for available SKUs matched by resourceSpecCodeId', () => {
+        const result = mapInvoiceWithCalculatePrice(invoice, calculatePriceData);
+        expect(result === null || result === void 0 ? void 0 : result[0].items[0]).toMatchObject({ id: coveredSkuId, coveredByGrant: true });
+        expect(result === null || result === void 0 ? void 0 : result[0].items[1]).toMatchObject({ id: uncoveredSkuId, coveredByGrant: false });
+    });
+    it('should not set coveredByGrant when skuAvailability is false', () => {
+        const result = mapInvoiceWithCalculatePrice(invoice, calculatePriceData);
+        expect(result === null || result === void 0 ? void 0 : result[0].items[2]).toEqual(invoice[0].items[2]);
+        expect(result === null || result === void 0 ? void 0 : result[0].items[2]).not.toHaveProperty('coveredByGrant');
+    });
+    it('should not set coveredByGrant for secondary items or items without id', () => {
+        const result = mapInvoiceWithCalculatePrice(invoice, calculatePriceData);
+        expect(result === null || result === void 0 ? void 0 : result[0].items[3]).toEqual(invoice[0].items[3]);
+        expect(result === null || result === void 0 ? void 0 : result[0].items[4]).toEqual(invoice[0].items[4]);
+    });
+    it('should match SKUs by resourceSpecCode', () => {
+        const invoiceWithResourceSpecCode = [
+            {
+                items: [{ id: resourceSpecCode, quantity: 1, primary: true, label: 'CPU', price: 100 }],
+            },
+        ];
+        const result = mapInvoiceWithCalculatePrice(invoiceWithResourceSpecCode, calculatePriceData);
+        expect(result === null || result === void 0 ? void 0 : result[0].items[0]).toMatchObject({ id: resourceSpecCode, coveredByGrant: true });
+    });
+});

package/dist/esm/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/esm/helpers/formatPriceChange.js

@@ -0,0 +1,19 @@
+import { formatNumber } from '@cloud-ru/ft-formatters';
+import { formatCurrency } from './formatters';
+export function getSign(value) {
+    if (value > 0) {
+        return '+';
+    }
+    if (value < 0) {
+        return '-';
+    }
+    return '';
+}
+export function formatPriceChange(value) {
+    const sign = getSign(value.value);
+    const amount = `${sign}${formatCurrency(Math.abs(value.value))}`;
+    if (value.percentage === undefined) {
+        return amount;
+    }
+    return `${amount} (${sign}${formatNumber(Math.abs(value.percentage))}%)`;
+}

package/dist/esm/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/esm/helpers/formatters.js

@@ -1,4 +1,9 @@
 import { formatNumber } from '@cloud-ru/ft-formatters';
+export function formatCurrencyValue(value) {
+    return formatNumber(value.toFixed(2), {
+        precision: 2,
+    });
+}
 export function formatCurrency(value) {
     return formatNumber(value.toFixed(2), {
         precision: 2,

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

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

package/dist/esm/helpers/getPriceChangeAppearance.js

@@ -0,0 +1,9 @@
+export function getPriceChangeAppearance(value) {
+    if (value > 0) {
+        return 'increased';
+    }
+    if (value < 0) {
+        return 'decreased';
+    }
+    return 'unchanged';
+}

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

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

package/dist/esm/helpers/index.js

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

package/dist/esm/helpers/mapInvoiceWithCalculatePrice.d.ts

@@ -0,0 +1,7 @@
+import { CalculatePriceData, InvoiceDetails, InvoiceItem } from '../types';
+export type InvoiceAvailabilitySplit = {
+    invoice: InvoiceDetails[] | undefined;
+    unavailableItems: InvoiceItem[] | undefined;
+};
+export declare function mapInvoiceWithCalculatePrice(invoice: InvoiceDetails[] | undefined, calculatePriceData: CalculatePriceData | undefined): InvoiceDetails[] | undefined;
+export declare function splitInvoiceByAvailability(invoice: InvoiceDetails[] | undefined, calculatePriceData: CalculatePriceData | undefined): InvoiceAvailabilitySplit;

package/dist/esm/helpers/mapInvoiceWithCalculatePrice.js

@@ -0,0 +1,76 @@
+function setSkuFlags(skuFlagsById, key, flags) {
+    if (!key) {
+        return;
+    }
+    skuFlagsById.set(key, flags);
+}
+function getSkuFlagsById(calculatePriceData) {
+    const skuFlagsById = new Map();
+    calculatePriceData.skuResults.forEach(result => {
+        const flags = {
+            available: result.skuAvailability,
+            covered: result.coveredByGrants,
+        };
+        setSkuFlags(skuFlagsById, result.skuId, flags);
+        setSkuFlags(skuFlagsById, result.resourceSpecCode, flags);
+        setSkuFlags(skuFlagsById, result.resourceSpecCodeId, flags);
+        setSkuFlags(skuFlagsById, result.skuCode, flags);
+    });
+    return skuFlagsById;
+}
+function isUnavailableInvoiceItem(item, skuFlagsById) {
+    var _a;
+    if (!item.primary || !item.id) {
+        return false;
+    }
+    return ((_a = skuFlagsById.get(item.id)) === null || _a === void 0 ? void 0 : _a.available) === false;
+}
+function mapInvoiceItemWithSkuFlags(item, skuFlagsById) {
+    if (!item.primary || !item.id) {
+        return item;
+    }
+    const skuFlags = skuFlagsById.get(item.id);
+    if (!skuFlags || skuFlags.available === false) {
+        return item;
+    }
+    return Object.assign(Object.assign({}, item), { coveredByGrant: skuFlags.covered });
+}
+function splitInvoiceDetailsByAvailability(details, skuFlagsById) {
+    const unavailableItems = details.items.filter(item => isUnavailableInvoiceItem(item, skuFlagsById));
+    const availableItems = details.items
+        .filter(item => !isUnavailableInvoiceItem(item, skuFlagsById))
+        .map(item => mapInvoiceItemWithSkuFlags(item, skuFlagsById));
+    if (!availableItems.length) {
+        return { unavailableItems };
+    }
+    if (!unavailableItems.length) {
+        return {
+            availableDetails: Object.assign(Object.assign({}, details), { items: availableItems }),
+            unavailableItems,
+        };
+    }
+    return {
+        availableDetails: Object.assign(Object.assign({}, details), { items: availableItems, price: undefined, quantity: undefined }),
+        unavailableItems,
+    };
+}
+export function mapInvoiceWithCalculatePrice(invoice, calculatePriceData) {
+    if (!(invoice === null || invoice === void 0 ? void 0 : invoice.length) || !(calculatePriceData === null || calculatePriceData === void 0 ? void 0 : calculatePriceData.skuResults.length)) {
+        return invoice;
+    }
+    const skuFlagsById = getSkuFlagsById(calculatePriceData);
+    return invoice.map(details => (Object.assign(Object.assign({}, details), { items: details.items.map(item => mapInvoiceItemWithSkuFlags(item, skuFlagsById)) })));
+}
+export function splitInvoiceByAvailability(invoice, calculatePriceData) {
+    if (!(invoice === null || invoice === void 0 ? void 0 : invoice.length) || !(calculatePriceData === null || calculatePriceData === void 0 ? void 0 : calculatePriceData.skuResults.length)) {
+        return { invoice, unavailableItems: undefined };
+    }
+    const skuFlagsById = getSkuFlagsById(calculatePriceData);
+    const detailsSplits = invoice.map(details => splitInvoiceDetailsByAvailability(details, skuFlagsById));
+    const availableInvoice = detailsSplits.flatMap(({ availableDetails }) => availableDetails ? [availableDetails] : []);
+    const unavailableItems = detailsSplits.flatMap(detailsSplit => detailsSplit.unavailableItems);
+    if (!unavailableItems.length) {
+        return { invoice: availableInvoice, unavailableItems: undefined };
+    }
+    return { invoice: availableInvoice, unavailableItems };
+}