@cloud-ru/uikit-product-calculator 0.33.3 → 0.33.5

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

@@ -0,0 +1,13 @@
+import { PRICE_PERIOD } from '../../../../types/Price';
+export declare const PRICE_NAME: {
+    month: string;
+    day: string;
+    hour: string;
+};
+export declare const PRICE_PERIOD_ITEMS: {
+    id: PRICE_PERIOD;
+    content: string;
+}[];
+export declare function PricePeriodSelect({ hasPayaGo }: {
+    hasPayaGo: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ChevronDownSVG, ChevronUpSVG } from '@sbercloud/uikit-product-icons';
+import { AdaptiveDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { useCalculatorContext } from '../../../../contexts';
+import { PRICE_PERIOD } from '../../../../types/Price';
+import { parseKeyToDataTest } from '../../../../utils';
+export const PRICE_NAME = {
+    [PRICE_PERIOD.Month]: 'В месяц',
+    [PRICE_PERIOD.Day]: 'В день',
+    [PRICE_PERIOD.Hour]: 'В час',
+};
+export const PRICE_PERIOD_ITEMS = [
+    {
+        id: PRICE_PERIOD.Month,
+        content: 'В месяц',
+    },
+    {
+        id: PRICE_PERIOD.Day,
+        content: 'В день',
+    },
+    {
+        id: PRICE_PERIOD.Hour,
+        content: 'В час',
+    },
+];
+export function PricePeriodSelect({ hasPayaGo }) {
+    const { layoutType, pricePeriod, setPricePeriod } = useCalculatorContext();
+    const ref = useRef(null);
+    const dataTestAttribute = parseKeyToDataTest('price', 'summary-footer-total');
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        if (hasPayaGo) {
+            setPricePeriod(PRICE_PERIOD.Month);
+        }
+        setOpen(false);
+    }, [hasPayaGo, setPricePeriod]);
+    return (_jsx(AdaptiveDroplist, { layoutType: layoutType, size: 'm', selection: {
+            mode: 'single',
+            value: pricePeriod,
+            onChange: v => {
+                v && setPricePeriod(v);
+                setOpen(false);
+            },
+        }, open: hasPayaGo ? false : open, onOpenChange: setOpen, items: PRICE_PERIOD_ITEMS, triggerElemRef: ref, "data-test-id": dataTestAttribute, children: _jsx(Tooltip, { tip: '\u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u043F\u0435\u0440\u0438\u043E\u0434 \u0442\u043E\u043B\u044C\u043A\u043E \u0432 \u043C\u0435\u0441\u044F\u0446, \u0442.\u043A. \u0432 \u0440\u0430\u0441\u0447\u0435\u0442 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D \u0441\u0435\u0440\u0432\u0438\u0441 \u0441 \u043C\u0435\u0442\u043E\u0434\u043E\u043C \u0442\u0430\u0440\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u0438 PAYA (Pay As You Allocate). \u0427\u0442\u043E\u0431\u044B \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u043F\u0435\u0440\u0438\u043E\u0434 \u0440\u0430\u0441\u0447\u0435\u0442\u0430, \u0443\u0434\u0430\u043B\u0438\u0442\u0435 PAYA-\u0441\u0435\u0440\u0432\u0438\u0441 \u0438\u0437 \u0440\u0430\u0441\u0447\u0435\u0442\u0430', open: hasPayaGo ? undefined : false, children: _jsx(ButtonFunction, { ref: ref, onClick: hasPayaGo ? e => e.stopPropagation() : () => setOpen(v => !v), label: PRICE_NAME[pricePeriod], size: 'm', icon: open && !hasPayaGo ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), disabled: hasPayaGo }) }) }));
+}

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

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

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

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

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

@@ -0,0 +1,13 @@
+type ProductCardProps = {
+    id: string;
+    idx: number;
+    label: string;
+    selectedProduct: {
+        id: string;
+        idx: number;
+    } | null;
+    onProductClick(id: string, idx: number): void;
+    onProductDelete(productId: string, idx: number): void;
+};
+export declare function ProductCard({ id, idx, label, selectedProduct, onProductClick, onProductDelete }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDeferredValue } from 'react';
+import { KebabSVG } from '@sbercloud/uikit-product-icons';
+import { AdaptiveDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Card } from '@snack-uikit/card';
+import { useCalculatorContext } from '../../../../contexts';
+import { formatNumber, getPrice, getValue, parseKeyToDataTest } from '../../../../utils';
+import { PRICE_NAME } from '../PricePeriodSelect';
+import styles from './styles.module.css';
+export function ProductCard({ id, idx, label, selectedProduct, onProductClick, onProductDelete }) {
+    const { layoutType, pricePeriod, calculatorType, products } = useCalculatorContext();
+    const isPartners = calculatorType === 'partners';
+    const isChecked = (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id) === id && (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.idx) === idx;
+    const dataTestAttribute = parseKeyToDataTest('price', 'summary-product-card');
+    const price = useDeferredValue(getValue(products, `[${id}][${idx}].price`));
+    return (_jsx(_Fragment, { children: _jsx(Card, { size: 's', onClick: () => {
+                onProductClick(id, idx);
+            }, checked: isChecked, outline: true, "data-test-id": dataTestAttribute, children: _jsx(_Fragment, { children: _jsxs("div", { className: styles.wrapper, children: [_jsx(Card.Header, { truncate: {
+                                title: 10,
+                                description: 20,
+                            }, title: label, description: `${formatNumber(getPrice({ price, pricePeriod, partners: isPartners }))} ₽ ${PRICE_NAME[pricePeriod]}` }), _jsx(AdaptiveDroplist, { layoutType: layoutType, placement: 'bottom-end', size: 'm', closeDroplistOnItemClick: true, items: [
+                                {
+                                    id: 'remove',
+                                    content: {
+                                        option: 'Удалить',
+                                    },
+                                    onClick: e => {
+                                        e.stopPropagation();
+                                        onProductDelete(id, idx);
+                                    },
+                                },
+                            ], children: _jsx(ButtonFunction, { icon: _jsx(KebabSVG, {}), size: 'm', onClick: e => {
+                                    e.stopPropagation();
+                                } }) })] }) }) }, id + '_' + idx) }));
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+.wrapper{
+  display:flex;
+  align-items:flex-start;
+  gap:var(--dimension-1m, 8px);
+}

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

@@ -0,0 +1,5 @@
+type ProductListActionsProps = {
+    disabled?: boolean;
+};
+export declare function ProductListActions({ disabled }: ProductListActionsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,48 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { CheckFilledSVG, DownloadSVG, HeadphonesSVG, LinkSVG } from '@sbercloud/uikit-product-icons';
+import { ButtonTonal } from '@snack-uikit/button';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { useCalculatorContext } from '../../../../contexts';
+import { parseKeyToDataTest } from '../../../../utils';
+import styles from './styles.module.css';
+export function ProductListActions({ disabled }) {
+    const { products, calculatorType, actions: { onShareClick, onDownloadFileClick, onRequestConsultationClick }, } = useCalculatorContext();
+    const [isChecked, setIsCheckedOpen] = useState(false);
+    const timerId = useRef();
+    const openChecked = () => setIsCheckedOpen(true);
+    const closeChecked = () => setIsCheckedOpen(false);
+    const handleShareClick = (event) => __awaiter(this, void 0, void 0, function* () {
+        event.stopPropagation();
+        onShareClick === null || onShareClick === void 0 ? void 0 : onShareClick({
+            products,
+            calculatorType,
+        }).then(() => {
+            openChecked();
+            clearTimeout(timerId.current);
+            timerId.current = setTimeout(closeChecked, 1000);
+        });
+    });
+    useEffect(() => () => {
+        closeChecked();
+        clearTimeout(timerId.current);
+    }, []);
+    const handleDownloadFileClick = () => onDownloadFileClick === null || onDownloadFileClick === void 0 ? void 0 : onDownloadFileClick({
+        products,
+        calculatorType,
+    });
+    const handleRequestConsultationClick = () => onRequestConsultationClick === null || onRequestConsultationClick === void 0 ? void 0 : onRequestConsultationClick({
+        products,
+        calculatorType,
+    });
+    return (_jsxs("div", { className: styles.footerLinks, "data-test-id": parseKeyToDataTest('price', 'summary-footer'), children: [onShareClick && (_jsx(Tooltip, { tip: isChecked ? (_jsxs("div", { className: styles.container, children: [_jsx("span", { className: styles.icon, children: _jsx(CheckFilledSVG, {}) }), "Cc\u044B\u043B\u043A\u0430 \u0441\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u0430"] })) : (_jsx(_Fragment, { children: "\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F \u0441\u0441\u044B\u043B\u043A\u043E\u0439" })), hoverDelayOpen: 600, open: isChecked || undefined, children: _jsx(ButtonTonal, { size: 'm', icon: _jsx(LinkSVG, {}), appearance: 'neutral', fullWidth: true, onClick: handleShareClick, "data-test-id": parseKeyToDataTest('price', 'summary-footer-copy-link'), disabled: disabled }) })), _jsx(Tooltip, { tip: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0440\u0430\u0441\u0447\u0435\u0442', hoverDelayOpen: 600, children: _jsx(ButtonTonal, { size: 'm', icon: _jsx(DownloadSVG, {}), appearance: 'neutral', "data-test-id": parseKeyToDataTest('price', 'summary-footer-download'), fullWidth: true, onClick: handleDownloadFileClick, disabled: disabled }) }), onRequestConsultationClick && (_jsx(Tooltip, { tip: '\u0417\u0430\u043F\u0440\u043E\u0441\u0438\u0442\u044C \u043A\u043E\u043D\u0441\u0443\u043B\u044C\u0442\u0430\u0446\u0438\u044E', hoverDelayOpen: 600, children: _jsx(ButtonTonal, { size: 'm', icon: _jsx(HeadphonesSVG, {}), appearance: 'neutral', fullWidth: true, onClick: handleRequestConsultationClick, "data-test-id": parseKeyToDataTest('price', 'summary-footer-consultation'), disabled: disabled }) }))] }));
+}

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

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

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

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

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

@@ -0,0 +1,33 @@
+.footerLinks{
+  display:flex;
+  gap:var(--dimension-1m, 8px);
+}
+
+.icon{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-green-accent-default, #57b762);
+}
+.icon svg{
+  width:var(--size-icon-container-xs, 16px) !important;
+  height:var(--size-icon-container-xs, 16px) !important;
+}
+
+.label{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+
+.container{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  gap:4px;
+}

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

@@ -0,0 +1,3 @@
+export * from './PricePeriodSelect';
+export * from './ProductCard';
+export * from './ProductListActions';

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

@@ -0,0 +1,3 @@
+export * from './PricePeriodSelect';
+export * from './ProductCard';
+export * from './ProductListActions';

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

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type UseScrollListToActiveProductProps = {
+    scrollRef: RefObject<HTMLDivElement>;
+    activeRef: RefObject<HTMLDivElement>;
+};
+export declare function useScrollListToActiveProduct({ scrollRef, activeRef }: UseScrollListToActiveProductProps): void;
+export {};

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

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useCalculatorContext } from '../../contexts';
+export function useScrollListToActiveProduct({ scrollRef, activeRef }) {
+    const { selectedProduct, products } = useCalculatorContext();
+    function scrollListToActiveProduct() {
+        if (!scrollRef.current)
+            return;
+        const activeProduct = activeRef.current;
+        const container = scrollRef.current;
+        if (!activeProduct)
+            return;
+        const activeProductRect = activeProduct.getBoundingClientRect();
+        const containerRefRect = container.getBoundingClientRect();
+        const currentScrollTop = container.scrollTop;
+        const scrollDistance = activeProductRect.top - containerRefRect.top + currentScrollTop - 320 / 2 + 50;
+        container.scroll({
+            top: scrollDistance,
+            behavior: 'smooth',
+        });
+    }
+    useEffect(() => {
+        scrollListToActiveProduct();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedProduct, Object.keys(products).length]);
+}

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

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

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

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

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

@@ -0,0 +1,95 @@
+.scroll{
+  min-height:320px;
+  height:100%;
+  padding:var(--dimension-3m, 24px);
+}
+
+.body{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+}
+
+.headline{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:var(--dimension-2m, 16px);
+  padding:0 var(--dimension-4m, 32px);
+  height:104px;
+  box-sizing:border-box;
+  border-bottom:solid 1px var(--sys-neutral-decor-default, #dde0ea);
+}
+.headline[data-mobile]{
+  height:76px;
+  padding:0 var(--dimension-3m, 24px);
+}
+@media (max-width: 440px){
+  .headline[data-mobile]{
+    height:60px;
+    padding:0 var(--dimension-2m, 16px);
+  }
+}
+
+.footer{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+  padding:var(--dimension-3m, 24px);
+  box-sizing:border-box;
+  border-top:solid 1px var(--sys-neutral-decor-default, #dde0ea);
+}
+
+.caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.priceSummary{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  display:flex;
+  flex-direction:column;
+  flex-shrink:0;
+}
+.priceSummary[data-mobile] .headline{
+  flex-direction:column;
+  height:auto;
+  align-items:inherit;
+  justify-content:inherit;
+}
+.priceSummary[data-mobile] .headline,
+.priceSummary[data-mobile] .scroll,
+.priceSummary[data-mobile] .footer{
+  padding:var(--dimension-2m, 16px);
+}
+
+.total{
+  color:var(--sys-neutral-text-main, #41424e);
+  display:flex;
+  gap:var(--dimension-1m, 8px);
+  justify-content:flex-start;
+  align-items:center;
+  overflow:hidden;
+}
+.platform{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+
+.footerHeadline{
+  display:flex;
+  gap:var(--dimension-1m, 8px);
+  align-items:center;
+}

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

@@ -0,0 +1,11 @@
+import { Price } from '../../../types';
+export declare function getTotalPrice(price: Record<string, {
+    price: Price;
+}[]>): {
+    priceHourNds: number;
+    priceDayNds: number;
+    priceMonthNds: number;
+    pricePartnersHourNds: number;
+    pricePartnersDayNds: number;
+    pricePartnersMonthNds: number;
+};

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

@@ -0,0 +1,15 @@
+import { DEFAULT_PRICE } from '../../../constants';
+export function getTotalPrice(price) {
+    const total = Object.assign({}, DEFAULT_PRICE);
+    Object.values(price).forEach((productPriceArr) => {
+        productPriceArr.forEach(({ price: priceElem = {} }) => {
+            total.priceMonthNds = total.priceMonthNds + priceElem.priceMonthNds;
+            total.priceDayNds = total.priceDayNds + priceElem.priceDayNds;
+            total.priceHourNds = total.priceHourNds + priceElem.priceHourNds;
+            total.pricePartnersDayNds = total.pricePartnersDayNds + priceElem.pricePartnersDayNds;
+            total.pricePartnersHourNds = total.pricePartnersHourNds + priceElem.pricePartnersHourNds;
+            total.pricePartnersMonthNds = total.pricePartnersMonthNds + priceElem.pricePartnersMonthNds;
+        });
+    });
+    return total;
+}

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

@@ -0,0 +1,2 @@
+export * from './getTotalPrice';
+export * from './transformToProductCardData';

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

@@ -0,0 +1,2 @@
+export * from './getTotalPrice';
+export * from './transformToProductCardData';

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

@@ -0,0 +1,10 @@
+import { ProductsState } from '../../../contexts';
+import { FormValues, Product as ProductConfig } from '../../../types';
+export type ProductCardType = {
+    label: string;
+    productQuantity: number;
+    id: string;
+    idx: number;
+    formData: FormValues;
+};
+export declare function transformValueToProductCardData(products: Record<string, ProductConfig>, value: ProductsState): Record<string, ProductCardType[]>;

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

@@ -0,0 +1,20 @@
+import { PLATFORM } from '../../../constants';
+export function transformValueToProductCardData(products, value) {
+    return Object.keys(value).reduce((res, productId) => {
+        const cards = value[productId].map(({ data }, idx) => ({
+            idx,
+            id: productId,
+            label: products[productId].label + (value[productId].length > 1 ? ` ${idx + 1}` : ''),
+            productQuantity: data === null || data === void 0 ? void 0 : data.productQuantity,
+            formData: data,
+        }));
+        res[products[productId].platform] = res[products[productId].platform].concat(cards);
+        return res;
+    }, {
+        [PLATFORM.Evolution]: [],
+        [PLATFORM.Advanced]: [],
+        [PLATFORM.VmWare]: [],
+        [PLATFORM.MlSpace]: [],
+        [PLATFORM.Test]: [],
+    });
+}

package/dist/esm/components/ProductHeadline/ProductPageHeadline.d.ts

@@ -0,0 +1,6 @@
+import { Product } from '../../types';
+type ProductPageHeadlineProps = {
+    product: Product;
+};
+export declare function ProductPageHeadline({ product }: ProductPageHeadlineProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/ProductHeadline/ProductPageHeadline.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { LAYOUT_TYPE } from '@sbercloud/uikit-product-utils';
+import { ButtonTonal } from '@snack-uikit/button';
+import { FieldStepper } from '@snack-uikit/fields';
+import { IconPredefined } from '@snack-uikit/icon-predefined';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { useCalculatorContext, useProductContext } from '../../contexts';
+import { CALCULATOR_TYPE } from '../../types';
+import { getValue, parseKeyToDataTest, setValue } from '../../utils';
+import { HeaderContainer } from '../HeaderContainer';
+import { PriceCount } from './components';
+import styles from './styles.module.css';
+export function ProductPageHeadline({ product }) {
+    const { icon, label, enableChangeProductQuantity, productQuantityValues, freeTier, disabledProductQuantity } = product;
+    const { min: minProductQuantity = 1, max: maxProductQuantity = 99 } = productQuantityValues !== null && productQuantityValues !== void 0 ? productQuantityValues : {};
+    const { value: valueProp, onChange: onChangeProp, price } = useProductContext();
+    const value = getValue(valueProp, 'productQuantity');
+    const { layoutType, pricePeriod, calculatorType, actions: { onConnectClick }, onAnalyticsClick, selectedProduct, } = useCalculatorContext();
+    const onChange = (newValue) => {
+        setValue(valueProp, 'productQuantity', newValue);
+        onAnalyticsClick(String(newValue), `productQuantity`);
+        onChangeProp(valueProp);
+    };
+    const isPartners = calculatorType === CALCULATOR_TYPE.Partners;
+    const isProductType = calculatorType === CALCULATOR_TYPE.Product;
+    const isMobile = layoutType !== LAYOUT_TYPE.Desktop && layoutType !== LAYOUT_TYPE.DesktopSmall;
+    const hasCounter = enableChangeProductQuantity || freeTier;
+    const TitleComponent = isMobile ? Typography.SansTitleM : Typography.SansTitleL;
+    const headerRef = useRef(null);
+    useEffect(() => {
+        if (headerRef.current && isMobile && !isProductType) {
+            headerRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [selectedProduct, isMobile, isProductType]);
+    function ConnectButton() {
+        const dataTestAttribute = parseKeyToDataTest('product', 'connect-button');
+        return !isPartners && product.enableConnectToConsole ? (_jsx(Tooltip, { hoverDelayOpen: 600, tip: '\u0412\u044B \u0431\u0443\u0434\u0435\u0442\u0435 \u043F\u0435\u0440\u0435\u043D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u044B \u0432 \u043B\u0438\u0447\u043D\u044B\u0439 \u043A\u0430\u0431\u0438\u043D\u0435\u0442 \u0434\u043B\u044F \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0439 \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438', children: _jsx(ButtonTonal, { fullWidth: isMobile, label: '\u041F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C', size: 'm', onClick: () => onConnectClick === null || onConnectClick === void 0 ? void 0 : onConnectClick(product.id, valueProp), "data-test-id": dataTestAttribute }) })) : null;
+    }
+    return (_jsxs(HeaderContainer, { ref: headerRef, children: [_jsxs("div", { className: styles.left, children: [_jsx(IconPredefined, { icon: icon, size: isMobile ? 's' : 'm', decor: false, appearance: 'primary', "data-test-id": parseKeyToDataTest('product', 'icon') }), _jsx(TitleComponent, { children: _jsx(TruncateString, { "data-test-id": parseKeyToDataTest('product', 'title'), variant: 'end', text: label, maxLines: 2 }) })] }), _jsxs("div", { className: styles.right, "data-mobile": isMobile || undefined, children: [_jsx(PriceCount, { price: price, pricePeriod: pricePeriod, freeTier: freeTier, mobile: isMobile, partners: isPartners, hasCounter: hasCounter }), hasCounter && (_jsx("div", { className: styles.counter, "data-mobile": isMobile || undefined, "data-test-id": parseKeyToDataTest('product', 'counter'), children: _jsx(FieldStepper, { size: 'm', step: 1, min: minProductQuantity, max: maxProductQuantity, value: value, onChange: onChange, disabled: freeTier || disabledProductQuantity, allowMoreThanLimits: false }) })), !isMobile && _jsx(ConnectButton, {})] }), isMobile && _jsx(ConnectButton, {})] }));
+}

package/dist/esm/components/ProductHeadline/components/PriceCount.d.ts

@@ -0,0 +1,13 @@
+import { Price, PricePeriod } from '../../../types';
+type PriceCountProps = {
+    price?: Price;
+    pricePeriod: PricePeriod;
+    partners?: boolean;
+    freeTier?: boolean;
+    mobile?: boolean;
+    hasCounter?: boolean;
+};
+export declare function BasePriceCount({ price, pricePeriod, freeTier, mobile }: PriceCountProps): import("react/jsx-runtime").JSX.Element;
+export declare function PartnersPriceCount({ price, pricePeriod, mobile, hasCounter }: PriceCountProps): import("react/jsx-runtime").JSX.Element;
+export declare function PriceCount({ partners, ...props }: PriceCountProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/ProductHeadline/components/PriceCount.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider } from '@snack-uikit/divider';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { PRICE_PERIOD } from '../../../types';
+import { formatNumber, getPrice, parseKeyToDataTest } from '../../../utils';
+import styles from './styles.module.css';
+const PRICE_NAME = {
+    [PRICE_PERIOD.Month]: 'В месяц',
+    [PRICE_PERIOD.Day]: 'В день',
+    [PRICE_PERIOD.Hour]: 'В час',
+};
+export function BasePriceCount({ price, pricePeriod, freeTier, mobile }) {
+    const total = getPrice({ price, pricePeriod });
+    const dataTestAttribute = parseKeyToDataTest('product', 'price');
+    if (freeTier && !total)
+        return (_jsxs("div", { className: styles.price, "data-mobile": mobile || undefined, children: ["\u0411\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u043E", _jsx("br", {}), "\u043D\u0430\u0432\u0441\u0435\u0433\u0434\u0430"] }));
+    return (_jsxs("div", { className: styles.price, "data-mobile": mobile || undefined, "data-test-id": dataTestAttribute, children: [_jsxs("div", { className: styles.total, children: [_jsx(Typography.SansTitleM, { children: _jsx(TruncateString, { text: formatNumber(total), maxLines: 1 }) }), _jsx(Typography.SansBodyL, { children: "\u20BD" })] }), _jsx("div", { className: styles.caption, children: `${PRICE_NAME[pricePeriod]} c НДС` })] }));
+}
+export function PartnersPriceCount({ price, pricePeriod, mobile, hasCounter }) {
+    const total = getPrice({ price, pricePeriod });
+    const partnersTotal = getPrice({ price, pricePeriod, partners: true });
+    const mobileWithCounter = mobile && hasCounter;
+    const dataTestAttribute = parseKeyToDataTest('product', 'price-partners');
+    const partnersSale = `-${100 - Math.trunc((partnersTotal / total) * 100 + 0.1)}%`;
+    return (_jsxs("div", { className: styles.partnersWrapper, "data-mobile-with-counter": mobileWithCounter || undefined, "data-test-id": dataTestAttribute, children: [_jsxs("div", { className: styles.price, "data-mobile": mobile || undefined, children: [_jsx("div", { className: styles.caption, children: "\u0420\u044B\u043D\u043E\u0447\u043D\u0430\u044F \u0446\u0435\u043D\u0430" }), _jsxs("div", { className: styles.total, children: [_jsx(Typography.SansTitleM, { children: _jsx(TruncateString, { text: formatNumber(total), maxLines: 1 }) }), _jsx(Typography.SansBodyL, { children: "\u20BD" })] })] }), _jsx(Divider, { orientation: mobileWithCounter ? 'horizontal' : 'vertical', className: styles.divider }), _jsxs("div", { className: styles.price, "data-mobile": mobile || undefined, children: [_jsxs("div", { className: styles.caption, children: ["\u041F\u0430\u0440\u0442\u043D\u0435\u0440\u0441\u043A\u0430\u044F \u0446\u0435\u043D\u0430 ", total > 0 && _jsx("span", { className: styles.sale, children: partnersSale })] }), _jsxs("div", { className: styles.total, children: [_jsx(Typography.SansTitleM, { children: _jsx(TruncateString, { text: formatNumber(partnersTotal), maxLines: 1 }) }), _jsx(Typography.SansBodyL, { children: "\u20BD" })] })] })] }));
+}
+export function PriceCount(_a) {
+    var { partners } = _a, props = __rest(_a, ["partners"]);
+    return partners ? _jsx(PartnersPriceCount, Object.assign({}, props)) : _jsx(BasePriceCount, Object.assign({}, props));
+}

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

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

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

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

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

@@ -0,0 +1,46 @@
+.price{
+  display:flex;
+  justify-content:space-between;
+  flex-direction:column;
+  text-align:end;
+  width:160px;
+}
+.price .total{
+  color:var(--sys-neutral-text-main, #41424e);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  display:flex;
+  gap:var(--dimension-050m, 4px);
+  justify-content:flex-end;
+  align-items:center;
+}
+.price .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.price[data-mobile], .price[data-mobile] > .total{
+  justify-content:flex-start;
+  text-align:left;
+}
+
+.sale{
+  color:var(--sys-red-text-support, #ae514c);
+}
+
+.partnersWrapper{
+  display:grid;
+  grid-template-columns:repeat(3, auto);
+  box-sizing:border-box;
+  gap:var(--dimension-1m, 8px);
+}
+.partnersWrapper[data-mobile-with-counter]{
+  flex:1;
+  grid-template-columns:1fr;
+  padding-right:var(--dimension-1m, 8px);
+  border-right:solid 1px var(--sys-neutral-decor-default, #dde0ea);
+}

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

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

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

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