@cloud-ru/ds-uikit-product-price-summary 1.0.0

package/dist/cjs/types.d.ts

@@ -0,0 +1,79 @@
+import { QuestionTooltipProps } from '@cloud-ru/ds-tooltip';
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { APPEARANCE_STATE, PRICE_PERIOD } from './constants';
+export type PricePeriod = ValueOf<typeof PRICE_PERIOD>;
+/** Префикс перед итоговой суммой: без префикса (`equal`) или «от» (`from`). */
+export type TotalSumType = 'equal' | 'from';
+/** Визуальное состояние подсказки и дельты общей суммы. */
+export type AppearanceState = ValueOf<typeof APPEARANCE_STATE>;
+export type DiscountItem = {
+    /** Сумма скидки в валюте (в UI выводится со знаком «−»). */
+    value: number;
+    /** Процент скидки для бейджа `−N%`. */
+    percent?: number;
+    /** Контент тултипа-пояснения к скидке. */
+    tooltip?: QuestionTooltipProps['tip'];
+};
+export type DiscountDetails = {
+    /** Базовая цена до применения скидок. */
+    price: number;
+    /** Список применённых скидок. */
+    discounts: DiscountItem[];
+};
+export type PriceInvoiceItem = {
+    /** Подпись строки детализации. */
+    label: string;
+    /** Скидка для строки с ценой. */
+    discount?: DiscountItem;
+};
+export type DiscountInvoiceItem = {
+    /** Скидка без собственной цены. */
+    discount: DiscountItem;
+};
+export type BaseInvoiceItem = (PriceInvoiceItem | DiscountInvoiceItem) & {
+    /** Тултип для label строки детализации. */
+    labelTooltip?: QuestionTooltipProps['tip'];
+    /** Цена строки в валюте. */
+    price?: number;
+    /** Цвет цены: обычный или акцент изменения. */
+    priceColor?: 'default' | 'changed';
+    /** Скрыть колонку цены вне зависимости от значения `price`. */
+    hidePrice?: boolean;
+    /** Ограничение количества строк в label. */
+    labelMaxLines?: number;
+    /** Количество рядом с title/label (например, `×2`). */
+    quantity?: string | number;
+    /** Показать верхний разделитель перед строкой. */
+    topDivider?: boolean;
+    /** Показать нижний разделитель после строки. */
+    bottomDivider?: boolean;
+};
+export type PrimaryInvoiceItem = BaseInvoiceItem & {
+    /** Явная отметка основной строки. */
+    primary: true;
+    /** Флаг покрытия позиции грантом (только для primary-строк). */
+    coveredByGrant?: boolean;
+};
+export type SecondaryInvoiceItem = BaseInvoiceItem & {
+    /** Secondary-строка (по умолчанию, если `primary` не задан). */
+    primary?: false;
+    coveredByGrant?: never;
+};
+/** Строка детализации заказа. */
+export type InvoiceItem = PrimaryInvoiceItem | SecondaryInvoiceItem;
+export type InvoiceDetails = {
+    /** Заголовок секции детализации. */
+    title?: string;
+    /** Количество рядом с заголовком секции. */
+    quantity?: string | number;
+    /** Цена секции детализации. */
+    price?: number;
+    /** Строки секции детализации. */
+    items: InvoiceItem[];
+};
+export type PriceDeltaDetails = {
+    /** Величина изменения цены. */
+    value: number;
+    /** Тип изменения: повышение или снижение. */
+    type: 'increased' | 'decreased';
+};

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/utils/getAppearanceIcon.d.ts

@@ -0,0 +1,2 @@
+import { AppearanceState } from '../types';
+export declare function getAppearanceIcon(appearance: AppearanceState, className?: string): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/utils/getAppearanceIcon.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAppearanceIcon = getAppearanceIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const constants_1 = require("../constants");
+function getAppearanceIcon(appearance, className) {
+    let Component;
+    switch (appearance) {
+        case constants_1.APPEARANCE_STATE.Warning:
+            Component = system_1.NotifierWarningFilledSVG;
+            break;
+        case constants_1.APPEARANCE_STATE.UserError:
+            Component = system_1.CrossSVG;
+            break;
+        case constants_1.APPEARANCE_STATE.SystemError:
+            Component = system_1.QuestionSVG;
+            break;
+        case constants_1.APPEARANCE_STATE.Default:
+        default:
+            Component = system_1.NotifierInfoFilledSVG;
+            break;
+    }
+    return (0, jsx_runtime_1.jsx)(Component, { size: 16, "data-appearance": appearance, className: className });
+}

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

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

package/dist/cjs/utils/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("./getAppearanceIcon"), exports);

package/dist/esm/components/ContentBlock/ContentBlock.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+export type ContentBlockProps = {
+    loading?: boolean;
+    dataError?: boolean;
+    onRetry?(): void;
+};
+export declare function ContentBlock({ loading, dataError, onRetry, children }: PropsWithChildren<ContentBlockProps>): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;

package/dist/esm/components/ContentBlock/ContentBlock.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { UpdateSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Sun } from '@cloud-ru/ds-loader';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { TEST_IDS } from '../../constants.js';
+import { priceSummaryLocale } from '../../locale/index.js';
+import styles from './styles.module.css';
+export function ContentBlock({ loading, dataError, onRetry, children }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    if (loading) {
+        return (_jsx("div", { className: styles.loadingBlock, "data-test-id": TEST_IDS.loadingBlock, children: _jsx(Sun, { size: 'm' }) }));
+    }
+    if (dataError) {
+        return (_jsxs("div", { className: styles.dataErrorBlock, children: [_jsx(Button, { view: 'function', icon: _jsx(UpdateSVG, {}), onClick: onRetry, "data-test-id": TEST_IDS.contentBlockRetry }), _jsx(Typography, { variant: VARIANT.body, size: SIZE.s, children: t('dataError') })] }));
+    }
+    return children;
+}

package/dist/esm/components/ContentBlock/index.d.ts

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

package/dist/esm/components/ContentBlock/index.js

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

package/dist/esm/components/ContentBlock/styles.module.css

@@ -0,0 +1,12 @@
+.loadingBlock{
+  display:flex;
+  justify-content:center;
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+
+.dataErrorBlock{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}

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

@@ -0,0 +1,22 @@
+import { LinkProps } from '@cloud-ru/ds-link';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { DiscountDetails, InvoiceDetails } from '../../types.js';
+import { ContentBlockProps } from '../ContentBlock/index.js';
+import { HeaderBlockProps } from './components/HeaderBlock/index.js';
+import { TotalValueBlockProps } from './components/TotalValueBlock/index.js';
+export type PriceSummaryProps = WithSupportProps<TotalValueBlockProps & HeaderBlockProps & ContentBlockProps & {
+    /** Блок базовой цены и скидок. */
+    discount?: DiscountDetails;
+    /** Секции детализации заказа в аккордеоне. */
+    invoice?: InvoiceDetails[];
+    /** Начальное состояние раскрытия аккордеона invoice. */
+    invoiceExpandedDefault?: boolean;
+    /** Ссылка «Подробнее о расчёте». */
+    docsLink?: {
+        href?: LinkProps['href'];
+        label?: LinkProps['label'];
+    };
+    /** Дополнительный класс корневого контейнера. */
+    className?: string;
+}>;
+export declare function PriceSummary({ value, totalSumType, hint, period, onPeriodChanged, periodOptions, promoBadge, loading, dataError, onRetry, discount, invoice, invoiceExpandedDefault, docsLink, className, hintAppearance, showHintTooltip, hintTooltipText, hintLink, showHintLink, valueDelta, vatType, ...rest }: PriceSummaryProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from '@cloud-ru/ds-link';
+import { BACKGROUND_PREDEFINED_FILL, backgroundPredefinedFillToAcrylic } from '@cloud-ru/ds-materials';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { priceSummaryLocale } from '../../locale/index.js';
+import { ContentBlock } from '../ContentBlock/index.js';
+import { DiscountBlock } from './components/DiscountBlock/index.js';
+import { HeaderBlock } from './components/HeaderBlock/index.js';
+import { InvoiceBlock } from './components/InvoiceBlock/index.js';
+import { TotalValueBlock } from './components/TotalValueBlock/index.js';
+import styles from './styles.module.css';
+export function PriceSummary({ value, totalSumType, hint, period, onPeriodChanged, periodOptions, promoBadge, loading, dataError, onRetry, discount, invoice, invoiceExpandedDefault = true, docsLink, className, hintAppearance, showHintTooltip = false, hintTooltipText, hintLink, showHintLink, valueDelta, vatType, ...rest }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    const { appearance, level } = backgroundPredefinedFillToAcrylic(BACKGROUND_PREDEFINED_FILL.NeutralBackground1Level);
+    return (_jsxs("div", { className: cn(styles.priceSummary, className), "data-acrylic-appearance": appearance, "data-acrylic-level": level, ...extractSupportProps(rest), children: [_jsx("span", { className: styles.acrylic, "aria-hidden": true, "data-acrylic-background": true }), _jsxs("div", { className: styles.content, children: [_jsx(HeaderBlock, { period: period, onPeriodChanged: onPeriodChanged, periodOptions: periodOptions, promoBadge: promoBadge, vatType: vatType }), _jsxs(ContentBlock, { loading: loading, dataError: dataError, onRetry: onRetry, children: [discount && _jsx(DiscountBlock, { value: discount }), _jsx(TotalValueBlock, { value: value, totalSumType: totalSumType, hint: hint, hintAppearance: hintAppearance, showHintTooltip: showHintTooltip, hintTooltipText: hintTooltipText, hintLink: hintLink, showHintLink: showHintLink, valueDelta: valueDelta }), invoice && invoice.length > 0 && (_jsx(InvoiceBlock, { invoice: invoice, invoiceExpandedDefault: invoiceExpandedDefault })), docsLink?.href && _jsx(Link, { label: docsLink.label || t('docsLink'), href: docsLink.href, target: '_blank' })] })] })] }));
+}

package/dist/esm/components/PriceSummary/components/CoveredByGrantLabel/CoveredByGrantLabel.d.ts

@@ -0,0 +1,5 @@
+export type CoveredByGrantLabelProps = {
+    covered: boolean;
+    className?: string;
+};
+export declare function CoveredByGrantLabel({ covered, className }: CoveredByGrantLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PriceSummary/components/CoveredByGrantLabel/CoveredByGrantLabel.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PromoTag, ROLE_APPEARANCE } from '@cloud-ru/ds-promo-tag';
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import cn from 'classnames';
+import { priceSummaryLocale } from '../../../../locale/index.js';
+import styles from './styles.module.css';
+export function CoveredByGrantLabel({ covered, className }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    return (_jsxs("div", { className: cn(styles.coveredByGrant, className), children: [_jsx(PromoTag, { appearance: covered ? 'green' : 'neutral', roleAppearance: ROLE_APPEARANCE.Decor, label: covered ? t('coveredByGrant') : t('notCoveredByGrant') }), _jsx(QuestionTooltip, { tip: covered ? t('coveredByGrantTooltip') : t('notCoveredByGrantTooltip'), size: 'xs', placement: 'top', trigger: 'hover', tabIndex: -1 })] }));
+}

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

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

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

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

package/dist/esm/components/PriceSummary/components/CoveredByGrantLabel/styles.module.css

@@ -0,0 +1,6 @@
+.coveredByGrant{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  height:var(--sn-primitive-dimension-32, 32px);
+}

package/dist/esm/components/PriceSummary/components/DiscountBlock/DiscountBlock.d.ts

@@ -0,0 +1,5 @@
+import { DiscountDetails } from '../../../../types.js';
+export type DiscountBlockProps = {
+    value: DiscountDetails;
+};
+export declare function DiscountBlock({ value }: DiscountBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PriceSummary/components/DiscountBlock/DiscountBlock.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { Fragment } from 'react';
+import { formatCurrency } from '../../../../helpers/index.js';
+import { priceSummaryLocale } from '../../../../locale/index.js';
+import { DiscountPercentCell } from '../DiscountPercentCell/index.js';
+import styles from './styles.module.css';
+export function DiscountBlock({ value }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.discountGrid, children: [_jsx(Typography, { variant: VARIANT.body, size: SIZE.s, as: 'div', children: t('basePrice') }), _jsx(Typography, { variant: VARIANT.label, size: SIZE.m, as: 'div', className: styles.priceCell, children: formatCurrency(value.price) })] }), _jsx("div", { className: styles.discountGrid, children: value.discounts.map((discount, index) => (_jsxs(Fragment, { children: [_jsx(DiscountPercentCell, { discount: discount }), _jsx(Typography, { variant: VARIANT.label, size: SIZE.m, as: 'div', className: styles.discountCell, children: formatCurrency(-Math.abs(discount.value)) })] }, index))) })] }));
+}

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

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

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

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

package/dist/esm/components/PriceSummary/components/DiscountBlock/styles.module.css

@@ -0,0 +1,16 @@
+.discountGrid{
+  display:grid;
+  grid-template-columns:1fr 1fr;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.priceCell{
+  justify-self:end;
+}
+
+.discountCell{
+  justify-self:end;
+  color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+}

package/dist/esm/components/PriceSummary/components/DiscountPercentCell/DiscountPercentCell.d.ts

@@ -0,0 +1,5 @@
+import { DiscountItem } from '../../../../types.js';
+export type DiscountPercentCellProps = {
+    discount: DiscountItem;
+};
+export declare function DiscountPercentCell({ discount }: DiscountPercentCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PriceSummary/components/DiscountPercentCell/DiscountPercentCell.js

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { formatNumber } from '@cloud-ru/ft-formatters';
+import { priceSummaryLocale } from '../../../../locale/index.js';
+import styles from './styles.module.css';
+export function DiscountPercentCell({ discount }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    return (_jsx("div", { className: styles.percentCell, children: discount.percent && (_jsxs(_Fragment, { children: [_jsxs(Typography, { variant: VARIANT.body, size: SIZE.s, children: [t('discount'), " ", formatNumber(-Math.abs(discount.percent)), "%"] }), discount.tooltip && _jsx(QuestionTooltip, { tip: discount.tooltip })] })) }));
+}

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

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

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

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

package/dist/esm/components/PriceSummary/components/DiscountPercentCell/styles.module.css

@@ -0,0 +1,5 @@
+.percentCell{
+  display:flex;
+  gap:var(--sn-primitive-dimension-2, 2px);
+  align-items:center;
+}

package/dist/esm/components/PriceSummary/components/Divider/Divider.d.ts

@@ -0,0 +1 @@
+export declare function Divider(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PriceSummary/components/Divider/Divider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './styles.module.css';
+export function Divider() {
+    return _jsx("div", { className: styles.divider });
+}

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

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

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

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

package/dist/esm/components/PriceSummary/components/Divider/styles.module.css

@@ -0,0 +1,6 @@
+.divider{
+  width:100%;
+  height:0;
+  margin:var(--sn-primitive-dimension-4, 4px) 0;
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) dashed var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}

package/dist/esm/components/PriceSummary/components/HeaderBlock/HeaderBlock.d.ts

@@ -0,0 +1,8 @@
+import { PromoTagProps } from '@cloud-ru/ds-promo-tag';
+import { PeriodDropdownProps } from '../PeriodDropdown/index.js';
+import { VatType } from './types.js';
+export type HeaderBlockProps = PeriodDropdownProps & {
+    vatType?: VatType;
+    promoBadge?: Pick<PromoTagProps, 'label' | 'appearance'> | string;
+};
+export declare function HeaderBlock({ period, onPeriodChanged, periodOptions, promoBadge, vatType, }: HeaderBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PriceSummary/components/HeaderBlock/HeaderBlock.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PromoTag } from '@cloud-ru/ds-promo-tag';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { priceSummaryLocale } from '../../../../locale/index.js';
+import { PeriodDropdown } from '../PeriodDropdown/index.js';
+import { VAT_TYPE } from './constants.js';
+import styles from './styles.module.css';
+export function HeaderBlock({ period, onPeriodChanged, periodOptions, promoBadge, vatType = VAT_TYPE.Including, }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    return (_jsxs(_Fragment, { children: [promoBadge && (_jsx("div", { className: styles.promoBadge, children: _jsx(PromoTag, { ...(typeof promoBadge === 'string' ? { label: promoBadge } : promoBadge) }) })), _jsxs("div", { className: styles.headline, children: [_jsx(PeriodDropdown, { period: period, onPeriodChanged: onPeriodChanged, periodOptions: periodOptions }), _jsx(Typography, { variant: VARIANT.body, size: SIZE.m, className: styles.vat, children: t(vatType === VAT_TYPE.Including ? 'vat' : 'vatExcluded') })] })] }));
+}

package/dist/esm/components/PriceSummary/components/HeaderBlock/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const VAT_TYPE: {
+    readonly Including: "including";
+    readonly Excluding: "excluding";
+};

package/dist/esm/components/PriceSummary/components/HeaderBlock/constants.js

@@ -0,0 +1,4 @@
+export const VAT_TYPE = {
+    Including: 'including',
+    Excluding: 'excluding',
+};

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

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

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

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

package/dist/esm/components/PriceSummary/components/HeaderBlock/styles.module.css

@@ -0,0 +1,14 @@
+.headline{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  justify-content:space-between;
+}
+
+.vat{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.promoBadge{
+  display:flex;
+}

package/dist/esm/components/PriceSummary/components/HeaderBlock/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { VAT_TYPE } from './constants.js';
+export type VatType = ValueOf<typeof VAT_TYPE>;

package/dist/esm/components/PriceSummary/components/HeaderBlock/types.js

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

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

@@ -0,0 +1,6 @@
+import { InvoiceDetails } from '../../../../types.js';
+export type InvoiceBlockProps = {
+    invoice: InvoiceDetails[];
+    invoiceExpandedDefault?: boolean;
+};
+export declare function InvoiceBlock({ invoice, invoiceExpandedDefault }: InvoiceBlockProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Accordion } from '@cloud-ru/ds-accordion';
+import { useId } from 'react';
+import { TEST_IDS } from '../../../../constants.js';
+import { priceSummaryLocale } from '../../../../locale/index.js';
+import { InvoiceDetailsBlock } from '../InvoiceDetailsBlock/index.js';
+import styles from './styles.module.css';
+export function InvoiceBlock({ invoice, invoiceExpandedDefault }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    const invoiceBlockId = useId();
+    return (_jsx("div", { className: styles.accordion, children: _jsx(Accordion, { expandedDefault: invoiceExpandedDefault ? invoiceBlockId : undefined, children: _jsx(Accordion.CollapseBlockTertiary, { id: invoiceBlockId, title: t('orderDetails'), "data-test-id": TEST_IDS.orderDetails, children: _jsx("div", { className: styles.accordionContent, "data-test-id": TEST_IDS.orderDetailsContent, children: invoice.map((invoice, index) => (_jsx(InvoiceDetailsBlock, { invoice: invoice }, index))) }) }) }) }));
+}

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

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

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

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

package/dist/esm/components/PriceSummary/components/InvoiceBlock/styles.module.css

@@ -0,0 +1,13 @@
+.accordion{
+  --space-accordion-collapse-block-secondary-horizontal-padding:0;
+  --space-accordion-collapse-block-secondary-vertical-padding:var(--sn-primitive-dimension-8, 8px);
+  --space-accordion-collapse-block-secondary-gap:var(--sn-primitive-dimension-8, 8px);
+  --border-width-accordion-collapse-block-secondary:0;
+  --accordion-header-padding-vertical:0;
+}
+
+.accordionContent{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}

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

@@ -0,0 +1,5 @@
+import { InvoiceDetails } from '../../../../types.js';
+export type InvoiceDetailsBlockProps = {
+    invoice: InvoiceDetails;
+};
+export declare function InvoiceDetailsBlock({ invoice }: InvoiceDetailsBlockProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { formatCurrency, formatQuantity } from '../../../../helpers/index.js';
+import { priceSummaryLocale } from '../../../../locale/index.js';
+import { CoveredByGrantLabel } from '../CoveredByGrantLabel/index.js';
+import { Divider } from '../Divider/index.js';
+import { InvoiceItemBlock } from '../InvoiceItemBlock/index.js';
+import styles from './styles.module.css';
+export function InvoiceDetailsBlock({ invoice }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    const primaryItems = invoice.items.filter(item => item.primary);
+    const firstValue = primaryItems[0]?.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, { variant: VARIANT.label, size: SIZE.m, children: invoice.title }), invoice.quantity && (_jsx(Typography, { variant: VARIANT.label, size: SIZE.m, children: formatQuantity(invoice.quantity) }))] }), _jsx(Divider, {})] })), invoice.items.map((item, index) => (_jsx(InvoiceItemBlock, { item: item, index: index, showCoveredByGrantLabel: showItemLabels }, index))), invoice.price !== undefined && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx("div", { className: styles.footer, children: _jsxs(Typography, { variant: VARIANT.label, size: SIZE.m, children: [t('price'), ": ", formatCurrency(invoice.price)] }) })] }))] }));
+}

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

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

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

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

package/dist/esm/components/PriceSummary/components/InvoiceDetailsBlock/styles.module.css

@@ -0,0 +1,16 @@
+.main{
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px);
+  border:var(--sn-primitive-strokeWeight-strokeRegular, 1px) dashed var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  border-radius:var(--sn-brand-anatomy-radius-block-m, var(--sn-primitive-dimension-4, 4px));
+}
+
+.header{
+  display:flex;
+  justify-content:space-between;
+}
+
+.footer{
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
+}

package/dist/esm/components/PriceSummary/components/InvoiceItemBlock/InvoiceItemBlock.d.ts

@@ -0,0 +1,7 @@
+import { InvoiceItem } from '../../../../types.js';
+export type InvoiceItemBlockProps = {
+    item: InvoiceItem;
+    index: number;
+    showCoveredByGrantLabel?: boolean;
+};
+export declare function InvoiceItemBlock({ item, index, showCoveredByGrantLabel }: InvoiceItemBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PriceSummary/components/InvoiceItemBlock/InvoiceItemBlock.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { formatCurrency } from '../../../../helpers/index.js';
+import { priceSummaryLocale } from '../../../../locale/index.js';
+import { CoveredByGrantLabel } from '../CoveredByGrantLabel/index.js';
+import { DiscountPercentCell } from '../DiscountPercentCell/index.js';
+import { Divider } from '../Divider/index.js';
+import { InvoiceItemLabelCell } from '../InvoiceItemLabelCell/index.js';
+import styles from './styles.module.css';
+export function InvoiceItemBlock({ item, index, showCoveredByGrantLabel }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    const isEven = (index + 1) % 2 === 0;
+    const isSecondary = item.primary === undefined ? isEven : !item.primary;
+    const getPriceItem = () => {
+        if (item.hidePrice) {
+            return undefined;
+        }
+        return item.price !== undefined ? formatCurrency(item.price) : t('notAvailable');
+    };
+    return (_jsxs(_Fragment, { children: [item.topDivider && _jsx(Divider, {}), item.coveredByGrant !== undefined && showCoveredByGrantLabel && (_jsx(CoveredByGrantLabel, { covered: item.coveredByGrant })), _jsxs("div", { className: styles.itemGrid, "data-discount": Boolean(item.discount), children: ['label' in item && item.label !== undefined && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.labelCell, "data-secondary": isSecondary, children: _jsx(InvoiceItemLabelCell, { item: item }) }), _jsx(Typography, { variant: VARIANT.body, size: SIZE.s, as: 'div', className: styles.priceCell, "data-secondary": isSecondary, "data-price-color": item.priceColor ?? 'default', children: getPriceItem() })] })), item.discount && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.percentCell, "data-secondary": isSecondary, children: _jsx(DiscountPercentCell, { discount: item.discount }) }), _jsx(Typography, { variant: VARIANT.body, size: SIZE.s, as: 'div', className: styles.discountCell, "data-secondary": isSecondary, children: formatCurrency(-Math.abs(item.discount.value)) })] }))] }), item.bottomDivider && _jsx(Divider, {})] }));
+}

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

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

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

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

package/dist/esm/components/PriceSummary/components/InvoiceItemBlock/styles.module.css

@@ -0,0 +1,36 @@
+.itemGrid{
+  display:grid;
+  grid-template-columns:1fr auto;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+}
+.itemGrid[data-discount=true]{
+  margin-bottom:var(--sn-primitive-dimension-4, 4px);
+}
+
+.labelCell{
+  overflow:hidden;
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+
+.priceCell{
+  justify-self:end;
+}
+.priceCell[data-price-color=changed]{
+  color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
+}
+
+.labelCell[data-secondary=true],
+.priceCell[data-secondary=true],
+.percentCell[data-secondary=true]{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.discountCell{
+  justify-self:end;
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.discountCell[data-secondary=true]{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}

package/dist/esm/components/PriceSummary/components/InvoiceItemLabelCell/InvoiceItemLabelCell.d.ts

@@ -0,0 +1,5 @@
+import { InvoiceItem } from '../../../../types.js';
+export type InvoiceItemLabelCellProps = {
+    item: InvoiceItem;
+};
+export declare function InvoiceItemLabelCell({ item }: InvoiceItemLabelCellProps): import("react/jsx-runtime").JSX.Element | undefined;