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

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

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductCard = ProductCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const button_1 = require("@snack-uikit/button");
+const card_1 = require("@snack-uikit/card");
+const contexts_1 = require("../../../../contexts");
+const utils_1 = require("../../../../utils");
+const PricePeriodSelect_1 = require("../PricePeriodSelect");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ProductCard({ id, idx, label, selectedProduct, onProductClick, onProductDelete }) {
+    const { layoutType, pricePeriod, calculatorType, products } = (0, contexts_1.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 = (0, utils_1.parseKeyToDataTest)('price', 'summary-product-card');
+    const price = (0, react_1.useDeferredValue)((0, utils_1.getValue)(products, `[${id}][${idx}].price`));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(card_1.Card, { size: 's', onClick: () => {
+                onProductClick(id, idx);
+            }, checked: isChecked, outline: true, "data-test-id": dataTestAttribute, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)(card_1.Card.Header, { truncate: {
+                                title: 10,
+                                description: 20,
+                            }, title: label, description: `${(0, utils_1.formatNumber)((0, utils_1.getPrice)({ price, pricePeriod, partners: isPartners }))} ₽ ${PricePeriodSelect_1.PRICE_NAME[pricePeriod]}` }), (0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.AdaptiveDroplist, { layoutType: layoutType, placement: 'bottom-end', size: 'm', closeDroplistOnItemClick: true, items: [
+                                {
+                                    id: 'remove',
+                                    content: {
+                                        option: 'Удалить',
+                                    },
+                                    onClick: e => {
+                                        e.stopPropagation();
+                                        onProductDelete(id, idx);
+                                    },
+                                },
+                            ], children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.KebabSVG, {}), size: 'm', onClick: e => {
+                                    e.stopPropagation();
+                                } }) })] }) }) }, id + '_' + idx) }));
+}

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

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

package/dist/cjs/components/PriceSummary/components/ProductCard/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("./ProductCard"), exports);

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

@@ -0,0 +1,54 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductListActions = ProductListActions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const button_1 = require("@snack-uikit/button");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const contexts_1 = require("../../../../contexts");
+const utils_1 = require("../../../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ProductListActions({ disabled }) {
+    const { products, calculatorType, actions: { onShareClick, onDownloadFileClick, onRequestConsultationClick }, } = (0, contexts_1.useCalculatorContext)();
+    const [isChecked, setIsCheckedOpen] = (0, react_1.useState)(false);
+    const timerId = (0, react_1.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);
+        });
+    });
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footerLinks, "data-test-id": (0, utils_1.parseKeyToDataTest)('price', 'summary-footer'), children: [onShareClick && ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: isChecked ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.icon, children: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CheckFilledSVG, {}) }), "Cc\u044B\u043B\u043A\u0430 \u0441\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u0430"] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(button_1.ButtonTonal, { size: 'm', icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.LinkSVG, {}), appearance: 'neutral', fullWidth: true, onClick: handleShareClick, "data-test-id": (0, utils_1.parseKeyToDataTest)('price', 'summary-footer-copy-link'), disabled: disabled }) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0440\u0430\u0441\u0447\u0435\u0442', hoverDelayOpen: 600, children: (0, jsx_runtime_1.jsx)(button_1.ButtonTonal, { size: 'm', icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.DownloadSVG, {}), appearance: 'neutral', "data-test-id": (0, utils_1.parseKeyToDataTest)('price', 'summary-footer-download'), fullWidth: true, onClick: handleDownloadFileClick, disabled: disabled }) }), onRequestConsultationClick && ((0, jsx_runtime_1.jsx)(tooltip_1.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: (0, jsx_runtime_1.jsx)(button_1.ButtonTonal, { size: 'm', icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.HeadphonesSVG, {}), appearance: 'neutral', fullWidth: true, onClick: handleRequestConsultationClick, "data-test-id": (0, utils_1.parseKeyToDataTest)('price', 'summary-footer-consultation'), disabled: disabled }) }))] }));
+}

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

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

package/dist/cjs/components/PriceSummary/components/ProductListActions/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("./ProductListActions"), exports);

package/dist/cjs/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/cjs/components/PriceSummary/components/index.d.ts

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

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

@@ -0,0 +1,19 @@
+"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("./PricePeriodSelect"), exports);
+__exportStar(require("./ProductCard"), exports);
+__exportStar(require("./ProductListActions"), exports);

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollListToActiveProduct = useScrollListToActiveProduct;
+const react_1 = require("react");
+const contexts_1 = require("../../contexts");
+function useScrollListToActiveProduct({ scrollRef, activeRef }) {
+    const { selectedProduct, products } = (0, contexts_1.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',
+        });
+    }
+    (0, react_1.useEffect)(() => {
+        scrollListToActiveProduct();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedProduct, Object.keys(products).length]);
+}

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

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

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

package/dist/cjs/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/cjs/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/cjs/components/PriceSummary/utils/getTotalPrice.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTotalPrice = getTotalPrice;
+const constants_1 = require("../../../constants");
+function getTotalPrice(price) {
+    const total = Object.assign({}, constants_1.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/cjs/components/PriceSummary/utils/index.d.ts

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

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

@@ -0,0 +1,18 @@
+"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("./getTotalPrice"), exports);
+__exportStar(require("./transformToProductCardData"), exports);

package/dist/cjs/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/cjs/components/PriceSummary/utils/transformToProductCardData.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformValueToProductCardData = transformValueToProductCardData;
+const constants_1 = require("../../../constants");
+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;
+    }, {
+        [constants_1.PLATFORM.Evolution]: [],
+        [constants_1.PLATFORM.Advanced]: [],
+        [constants_1.PLATFORM.VmWare]: [],
+        [constants_1.PLATFORM.MlSpace]: [],
+        [constants_1.PLATFORM.Test]: [],
+    });
+}

package/dist/cjs/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/cjs/components/ProductHeadline/ProductPageHeadline.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductPageHeadline = ProductPageHeadline;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const button_1 = require("@snack-uikit/button");
+const fields_1 = require("@snack-uikit/fields");
+const icon_predefined_1 = require("@snack-uikit/icon-predefined");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const contexts_1 = require("../../contexts");
+const types_1 = require("../../types");
+const utils_1 = require("../../utils");
+const HeaderContainer_1 = require("../HeaderContainer");
+const components_1 = require("./components");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+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 } = (0, contexts_1.useProductContext)();
+    const value = (0, utils_1.getValue)(valueProp, 'productQuantity');
+    const { layoutType, pricePeriod, calculatorType, actions: { onConnectClick }, onAnalyticsClick, selectedProduct, } = (0, contexts_1.useCalculatorContext)();
+    const onChange = (newValue) => {
+        (0, utils_1.setValue)(valueProp, 'productQuantity', newValue);
+        onAnalyticsClick(String(newValue), `productQuantity`);
+        onChangeProp(valueProp);
+    };
+    const isPartners = calculatorType === types_1.CALCULATOR_TYPE.Partners;
+    const isProductType = calculatorType === types_1.CALCULATOR_TYPE.Product;
+    const isMobile = layoutType !== uikit_product_utils_1.LAYOUT_TYPE.Desktop && layoutType !== uikit_product_utils_1.LAYOUT_TYPE.DesktopSmall;
+    const hasCounter = enableChangeProductQuantity || freeTier;
+    const TitleComponent = isMobile ? typography_1.Typography.SansTitleM : typography_1.Typography.SansTitleL;
+    const headerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (headerRef.current && isMobile && !isProductType) {
+            headerRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [selectedProduct, isMobile, isProductType]);
+    function ConnectButton() {
+        const dataTestAttribute = (0, utils_1.parseKeyToDataTest)('product', 'connect-button');
+        return !isPartners && product.enableConnectToConsole ? ((0, jsx_runtime_1.jsx)(tooltip_1.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: (0, jsx_runtime_1.jsx)(button_1.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 ((0, jsx_runtime_1.jsxs)(HeaderContainer_1.HeaderContainer, { ref: headerRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [(0, jsx_runtime_1.jsx)(icon_predefined_1.IconPredefined, { icon: icon, size: isMobile ? 's' : 'm', decor: false, appearance: 'primary', "data-test-id": (0, utils_1.parseKeyToDataTest)('product', 'icon') }), (0, jsx_runtime_1.jsx)(TitleComponent, { children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { "data-test-id": (0, utils_1.parseKeyToDataTest)('product', 'title'), variant: 'end', text: label, maxLines: 2 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.right, "data-mobile": isMobile || undefined, children: [(0, jsx_runtime_1.jsx)(components_1.PriceCount, { price: price, pricePeriod: pricePeriod, freeTier: freeTier, mobile: isMobile, partners: isPartners, hasCounter: hasCounter }), hasCounter && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.counter, "data-mobile": isMobile || undefined, "data-test-id": (0, utils_1.parseKeyToDataTest)('product', 'counter'), children: (0, jsx_runtime_1.jsx)(fields_1.FieldStepper, { size: 'm', step: 1, min: minProductQuantity, max: maxProductQuantity, value: value, onChange: onChange, disabled: freeTier || disabledProductQuantity, allowMoreThanLimits: false }) })), !isMobile && (0, jsx_runtime_1.jsx)(ConnectButton, {})] }), isMobile && (0, jsx_runtime_1.jsx)(ConnectButton, {})] }));
+}

package/dist/cjs/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/cjs/components/ProductHeadline/components/PriceCount.js

@@ -0,0 +1,50 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasePriceCount = BasePriceCount;
+exports.PartnersPriceCount = PartnersPriceCount;
+exports.PriceCount = PriceCount;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const divider_1 = require("@snack-uikit/divider");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const types_1 = require("../../../types");
+const utils_1 = require("../../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const PRICE_NAME = {
+    [types_1.PRICE_PERIOD.Month]: 'В месяц',
+    [types_1.PRICE_PERIOD.Day]: 'В день',
+    [types_1.PRICE_PERIOD.Hour]: 'В час',
+};
+function BasePriceCount({ price, pricePeriod, freeTier, mobile }) {
+    const total = (0, utils_1.getPrice)({ price, pricePeriod });
+    const dataTestAttribute = (0, utils_1.parseKeyToDataTest)('product', 'price');
+    if (freeTier && !total)
+        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.price, "data-mobile": mobile || undefined, children: ["\u0411\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u043E", (0, jsx_runtime_1.jsx)("br", {}), "\u043D\u0430\u0432\u0441\u0435\u0433\u0434\u0430"] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.price, "data-mobile": mobile || undefined, "data-test-id": dataTestAttribute, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.total, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: (0, utils_1.formatNumber)(total), maxLines: 1 }) }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { children: "\u20BD" })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.caption, children: `${PRICE_NAME[pricePeriod]} c НДС` })] }));
+}
+function PartnersPriceCount({ price, pricePeriod, mobile, hasCounter }) {
+    const total = (0, utils_1.getPrice)({ price, pricePeriod });
+    const partnersTotal = (0, utils_1.getPrice)({ price, pricePeriod, partners: true });
+    const mobileWithCounter = mobile && hasCounter;
+    const dataTestAttribute = (0, utils_1.parseKeyToDataTest)('product', 'price-partners');
+    const partnersSale = `-${100 - Math.trunc((partnersTotal / total) * 100 + 0.1)}%`;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.partnersWrapper, "data-mobile-with-counter": mobileWithCounter || undefined, "data-test-id": dataTestAttribute, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.price, "data-mobile": mobile || undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.caption, children: "\u0420\u044B\u043D\u043E\u0447\u043D\u0430\u044F \u0446\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.total, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: (0, utils_1.formatNumber)(total), maxLines: 1 }) }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { children: "\u20BD" })] })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: mobileWithCounter ? 'horizontal' : 'vertical', className: styles_module_scss_1.default.divider }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.price, "data-mobile": mobile || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.caption, children: ["\u041F\u0430\u0440\u0442\u043D\u0435\u0440\u0441\u043A\u0430\u044F \u0446\u0435\u043D\u0430 ", total > 0 && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.sale, children: partnersSale })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.total, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: (0, utils_1.formatNumber)(partnersTotal), maxLines: 1 }) }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { children: "\u20BD" })] })] })] }));
+}
+function PriceCount(_a) {
+    var { partners } = _a, props = __rest(_a, ["partners"]);
+    return partners ? (0, jsx_runtime_1.jsx)(PartnersPriceCount, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(BasePriceCount, Object.assign({}, props));
+}

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

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

package/dist/cjs/components/ProductHeadline/components/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("./PriceCount"), exports);