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

package/dist/cjs/components/Controls/ToggleObjectControl/ToggleObjectControl.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleObjectControlUi = ToggleObjectControlUi;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_mobile_accordion_1 = require("@sbercloud/uikit-product-mobile-accordion");
+const divider_1 = require("@snack-uikit/divider");
+const toggles_1 = require("@snack-uikit/toggles");
+const contexts_1 = require("../../../contexts");
+const utils_1 = require("../../../utils");
+const Control_1 = require("../Control");
+const ObjectDecorator_1 = require("../ObjectDecorator");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ToggleObjectControlUi({ decoratorProps, control, switchKey, relateFn, watchedValues, uiProps, }) {
+    var _a, _b;
+    const [expanded, setExpanded] = (0, react_1.useState)(undefined);
+    const { value: valueProp, onChange: onChangeProp } = (0, contexts_1.useProductContext)();
+    const { onAnalyticsClick } = (0, contexts_1.useCalculatorContext)();
+    const { decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps } = (0, react_1.useMemo)(() => { var _a; return (_a = relateFn === null || relateFn === void 0 ? void 0 : relateFn(watchedValues !== null && watchedValues !== void 0 ? watchedValues : {})) !== null && _a !== void 0 ? _a : {}; }, [relateFn, watchedValues]);
+    const value = (0, utils_1.getValue)(valueProp, switchKey);
+    const onChange = (newValue) => {
+        (0, utils_1.setValue)(valueProp, switchKey, newValue);
+        onChangeProp(Object.assign({}, valueProp));
+    };
+    const AdaptiveAccordionPrimary = uikit_product_mobile_accordion_1.MobileAccordionPrimary;
+    const visible = (_b = (_a = relatedUiProps === null || relatedUiProps === void 0 ? void 0 : relatedUiProps.visible) !== null && _a !== void 0 ? _a : uiProps === null || uiProps === void 0 ? void 0 : uiProps.visible) !== null && _b !== void 0 ? _b : true;
+    if (!visible) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(AdaptiveAccordionPrimary, { selectionMode: 'single', expanded: expanded, onExpandedChange: setExpanded, children: (0, jsx_runtime_1.jsx)(AdaptiveAccordionPrimary.CollapseBlock, { outline: true, id: 'key', header: (0, jsx_runtime_1.jsx)(ObjectDecorator_1.ObjectDecorator, Object.assign({}, decoratorProps, relatedDecoratorProps)), actions: (0, jsx_runtime_1.jsx)(toggles_1.Switch, { showIcon: false, checked: value, onChange: checked => {
+                        onAnalyticsClick(String(checked), `toggle-object-control-ui`);
+                        onChange(checked);
+                        checked && setExpanded('key');
+                    } }), children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsx)(contexts_1.ProductContext.Provider, { value: {
+                                value: valueProp,
+                                onChange: newValue => {
+                                    (0, utils_1.setValue)(newValue, switchKey, true);
+                                    onChangeProp(Object.assign({}, newValue));
+                                },
+                            }, children: (0, jsx_runtime_1.jsx)(Control_1.Control, { formControl: Object.assign(Object.assign({}, control), { accessorKey: '' }) }) })] }) }) }) }));
+}

package/dist/cjs/components/Controls/ToggleObjectControl/index.d.ts

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

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

package/dist/cjs/components/Controls/ToggleObjectControl/styles.module.css

@@ -0,0 +1,11 @@
+.content{
+  display:flex;
+  flex-direction:column;
+  margin-top:var(--dimension-1m, 8px);
+  gap:var(--dimension-3m, 24px);
+  padding:var(--dimension-050m, 4px);
+}
+
+.tip{
+  max-width:var(--size-tooltip-container-max-width, 416px);
+}

package/dist/cjs/components/Controls/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const CONTROL: {
+    readonly Object: "object";
+    readonly Array: "array";
+    readonly ToggleObject: "toggle-object";
+    readonly SelectSingle: "select-single";
+    readonly SelectMultiple: "select-multiple";
+    readonly Segmented: "segmented";
+    readonly Carousel: "carousel";
+    readonly Toggle: "toggle";
+    readonly ToggleCards: "toggle-cards";
+    readonly Stepper: "stepper";
+    readonly Alert: "alert";
+    readonly Table: "table";
+    readonly Slider: "slider";
+    readonly StepperWithValues: "stepper-with-values";
+};

package/dist/cjs/components/Controls/constants.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONTROL = void 0;
+exports.CONTROL = {
+    Object: 'object',
+    Array: 'array',
+    ToggleObject: 'toggle-object',
+    SelectSingle: 'select-single',
+    SelectMultiple: 'select-multiple',
+    Segmented: 'segmented',
+    Carousel: 'carousel',
+    Toggle: 'toggle',
+    ToggleCards: 'toggle-cards',
+    Stepper: 'stepper',
+    Alert: 'alert',
+    Table: 'table',
+    Slider: 'slider',
+    StepperWithValues: 'stepper-with-values',
+};

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

@@ -0,0 +1,12 @@
+import { AlertControl } from './AlertControl';
+import { ArrayControl } from './ArrayControl';
+import { CarouselControl } from './CarouselControl';
+import { ObjectControl } from './ObjectControl';
+import { SegmentedControl } from './SegmentedControl';
+import { SelectMultipleControl, SelectSingleControl } from './SelectControl';
+import { StepperControl } from './StepperControl';
+import { ToggleControl } from './ToggleControl';
+import { ToggleObjectControl } from './ToggleObjectControl';
+export type { FormControl, FormConfig } from './types';
+export type { CarouselControl, SelectSingleControl, SelectMultipleControl, SegmentedControl, ToggleControl, StepperControl, ObjectControl, ArrayControl, ToggleObjectControl, AlertControl, };
+export * from './constants';

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

package/dist/cjs/components/Controls/types.d.ts

@@ -0,0 +1,141 @@
+import { ReactNode } from 'react';
+import { AnyType, FormValues, PRICE_PERIOD } from '../../types';
+import { AlertControl } from './AlertControl';
+import { ArrayControl } from './ArrayControl';
+import { CarouselControl } from './CarouselControl';
+import { ObjectControl } from './ObjectControl';
+import { SegmentedControl } from './SegmentedControl';
+import { SelectMultipleControl, SelectSingleControl } from './SelectControl';
+import { SliderControl } from './SliderControl';
+import { StepperControl } from './StepperControl';
+import { TableControl } from './TableControl';
+import { ToggleCardsControl } from './ToggleCardsControl';
+import { ToggleControl } from './ToggleControl';
+import { ToggleObjectControl } from './ToggleObjectControl';
+export type TooltipPlacement = 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+/** Базовые параметры декоратора для поля */
+export type BaseDecoratorProps = {
+    /** Лейбл */
+    label?: string;
+    /** Дополнительный текст */
+    hint?: string;
+    /** Вспомогательный тултип */
+    labelTooltip?: ReactNode;
+    /** Расположение тултипа */
+    labelTooltipPlacement?: TooltipPlacement;
+    /** Дополтительный текст сверху */
+    caption?: string;
+    /** Флаг обязательное поле или нет */
+    required?: boolean;
+};
+export type WithVisible<T> = T & {
+    /** Флаг, отрисовывать элемент или нет */
+    visible?: boolean;
+};
+export type BaseControl<UiPropsT, DecoratorPropsT = BaseDecoratorProps> = {
+    /** Пропсы для декоратора
+     *
+     * @example
+     * {
+     *  label: 'Колличество vCpu',
+     *  labelToolTip: 'Виртуальные ядра'
+     * }
+     */
+    decoratorProps: DecoratorPropsT;
+    /**
+     * Специфичные пропсы для контролла
+     *
+     * @example
+     * {
+     *  min: 0;
+     *  max: 100;
+     *  visible: true;
+     * }
+     */
+    uiProps?: WithVisible<UiPropsT>;
+    /**
+     * Поле (полный путь),  куда будет сохраняться значение контролла
+     *
+     * @example 'esc.cpu'
+     */
+    accessorKey: string;
+    /**
+     * Функция для мутирования значения формы, eсли при изменении контролла, нужно изменить "явно" значения других
+     *
+     *
+     * @param {string} value - Новое значение, которое было установлено.
+     *
+     * @param {function(Array<[string, AnyType]>): void} setValue - Функция для установки нового значения.
+     *
+     * @returns {void}
+     *
+     * @example (value, setValue) => {
+     *  // Изменение значения текущего контролла
+     *  const arr = [['currentControlAccessorKey', value]];
+     *  // Некоторое условие
+     *  if(...someRule) {
+     *    // Задаем значения для других контроллов
+     *    arr.push(['someAnotherKey_1', someValue_1]);
+     *    arr.push(['someAnotherKey_2', someValue_2]);
+     * }
+     * // Мутируем конфигурацию формы, чтобы применить изменения
+     * setValue(arr);
+     * }
+     */
+    onChangeFn?(value: string, setValue: (arr: [string, AnyType][]) => void): void;
+    /**
+     * Отслеживаемые "более главные" поля
+     *
+     * @example { storageClass: 'storages[0].obs.storageClass' },
+     */
+    watchedControls?: Record<string, string>;
+    /**
+     * Функция для изменения параметров контролла
+     *
+     * @param watchedValues - вычисленные 'watchedControls'
+     *
+     * @example ({ storageClass }) => {
+     *    if (storageClass !== StorageClassItem.Cold) {
+     *      return {
+     *         uiProps: {
+     *           visible: false,
+     *        },
+     *      };
+     *    }
+     *  }
+     */
+    relateFn?(watchedValues: FormValues): {
+        decoratorProps?: Partial<DecoratorPropsT>;
+        uiProps?: Partial<WithVisible<UiPropsT>>;
+    } | undefined;
+    onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+    canChangeWholePricePeriod?: boolean;
+};
+export type BaseControlWithItems<ItemT, UiPropsT, DecoratorPropsT = BaseDecoratorProps> = Omit<BaseControl<UiPropsT, DecoratorPropsT>, 'relateFn'> & {
+    /** Массив перечисляемых опций */
+    items: ItemT[];
+    /**
+     * Функция для изменения параметров контролла
+     *
+     * @param watchedValues - вычисленные 'watchedControls'
+     *
+     * @example ({ storageClass }) => {
+     *    if (storageClass !== StorageClassItem.Cold) {
+     *      return {
+     *         uiProps: {
+     *           visible: false,
+     *        },
+     *      };
+     *    }
+     *  }```
+     */
+    relateFn?(watchedValues: FormValues): {
+        decoratorProps?: Partial<DecoratorPropsT>;
+        uiProps?: Partial<WithVisible<UiPropsT>>;
+        items?: ItemT[];
+    } | undefined;
+    onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+    canChangeWholePricePeriod?: boolean;
+};
+export type FormControl = CarouselControl | SelectSingleControl | SelectMultipleControl | SegmentedControl | ToggleControl | StepperControl | ObjectControl | ArrayControl | ToggleObjectControl | AlertControl | ToggleCardsControl | SliderControl | TableControl;
+export type FormConfig = Omit<ObjectControl, 'type'>;

package/dist/cjs/components/Controls/types.js

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

package/dist/cjs/components/Controls/utils.d.ts

@@ -0,0 +1,3 @@
+import { FormValues } from '../../types';
+import { FormControl } from './types';
+export declare function getDefaultValues(controls: Record<string, FormControl>): FormValues;

package/dist/cjs/components/Controls/utils.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultValues = getDefaultValues;
+const utils_1 = require("../../utils");
+const constants_1 = require("./constants");
+function getDefaultValues(controls) {
+    const defaultValue = {};
+    function internalGetDefaultValues(controls) {
+        Object.entries(controls).forEach(([key, control]) => {
+            var _a;
+            if (control) {
+                switch (control.type) {
+                    case constants_1.CONTROL.Object: {
+                        if (control.defaultValue !== undefined) {
+                            (0, utils_1.setValue)(defaultValue, key, JSON.parse(JSON.stringify(control.defaultValue)));
+                        }
+                        internalGetDefaultValues(control.controls);
+                        break;
+                    }
+                    case constants_1.CONTROL.ToggleObject: {
+                        (0, utils_1.setValue)(defaultValue, control.switchKey, false);
+                        internalGetDefaultValues({ _: control.control });
+                        break;
+                    }
+                    case constants_1.CONTROL.Alert: {
+                        break;
+                    }
+                    default: {
+                        if (control.defaultValue !== undefined) {
+                            const restedValue = JSON.parse(JSON.stringify(control.defaultValue));
+                            (0, utils_1.setValue)(defaultValue, (_a = control === null || control === void 0 ? void 0 : control.accessorKey) !== null && _a !== void 0 ? _a : '', restedValue);
+                        }
+                    }
+                }
+            }
+        });
+    }
+    internalGetDefaultValues(controls);
+    return defaultValue;
+}

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

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

package/dist/cjs/components/Disclaimer/Disclaimer.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disclaimer = Disclaimer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const typography_1 = require("@snack-uikit/typography");
+const contexts_1 = require("../../contexts");
+const types_1 = require("../../types");
+const utils_1 = require("../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Disclaimer({ className }) {
+    const { layoutType, calculatorType } = (0, contexts_1.useCalculatorContext)();
+    const dataTestAttribute = (0, utils_1.parseKeyToDataTest)('disclaimer');
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.footer, className), "data-mobile": layoutType === 'mobile' || undefined, "data-test-id": dataTestAttribute, children: calculatorType !== types_1.CALCULATOR_TYPE.Partners && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', size: layoutType === 'mobile' ? 's' : 'm', className: styles_module_scss_1.default.text, children: "\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u044B\u0432\u0430\u0435\u043C\u0430\u044F \u041A\u0430\u043B\u044C\u043A\u0443\u043B\u044F\u0442\u043E\u0440\u043E\u043C \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u043F\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0439, \u043E\u0441\u043D\u043E\u0432\u0430\u043D\u043D\u043E\u0439 \u043D\u0430 \u0432\u043D\u0435\u0441\u0435\u043D\u043D\u044B\u0445 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u043C \u0434\u0430\u043D\u043D\u044B\u0445, \u0438 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0440\u0430\u0441\u0446\u0435\u043D\u0438\u0432\u0430\u0442\u044C\u0441\u044F \u043A\u0430\u043A \u043F\u0440\u0435\u0434\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0437\u0430\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0434\u043E\u0433\u043E\u0432\u043E\u0440 \u043F\u043E \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u043D\u043E\u0439 \u041A\u0430\u043B\u044C\u043A\u0443\u043B\u044F\u0442\u043E\u0440\u043E\u043C \u0446\u0435\u043D\u0435 (\u043D\u0435\u00A0\u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u043E\u0444\u0435\u0440\u0442\u043E\u0439)." })) }));
+}

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

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

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

package/dist/cjs/components/Disclaimer/styles.module.css

@@ -0,0 +1,12 @@
+.footer{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+  max-width:800px;
+  text-align:justify;
+}
+
+.text{
+  text-align:left;
+}

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type HeaderContainerProps = {
+    children: ReactNode;
+    dataTestId?: string;
+};
+export declare const HeaderContainer: import("react").ForwardRefExoticComponent<HeaderContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const contexts_1 = require("../../contexts");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.HeaderContainer = (0, react_1.forwardRef)(({ children, dataTestId }, ref) => {
+    const { layoutType } = (0, contexts_1.useCalculatorContext)();
+    const isTablet = layoutType !== uikit_product_utils_1.LAYOUT_TYPE.Desktop && layoutType !== uikit_product_utils_1.LAYOUT_TYPE.DesktopSmall;
+    const isMobile = layoutType === uikit_product_utils_1.LAYOUT_TYPE.Mobile;
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.header, "data-mobile": isMobile || undefined, "data-tablet": isTablet || undefined, ref: ref, "data-test-id": dataTestId, children: children }));
+});

package/dist/cjs/components/HeaderContainer/styles.module.css

@@ -0,0 +1,20 @@
+.header{
+  border-bottom:solid 1px var(--sys-neutral-decor-default, #dde0ea);
+  display:flex;
+  gap:var(--dimension-2m, 16px);
+  align-items:center;
+  justify-content:space-between;
+  box-sizing:border-box;
+  padding:var(--dimension-4m, 32px);
+  height:104px;
+}
+.header[data-tablet]{
+  flex-direction:column;
+  height:auto;
+  align-items:inherit;
+  justify-content:inherit;
+  padding:var(--dimension-3m, 24px);
+}
+.header[data-mobile]{
+  padding:var(--dimension-2m, 16px);
+}

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

@@ -0,0 +1,10 @@
+export declare enum SummaryAppearance {
+    Welcome = "welcome",
+    Default = "default"
+}
+type PriceSummaryProps = {
+    className?: string;
+    appearance?: SummaryAppearance;
+};
+export declare function PriceSummary({ className, appearance }: PriceSummaryProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SummaryAppearance = void 0;
+exports.PriceSummary = PriceSummary;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const button_1 = require("@snack-uikit/button");
+const scroll_1 = require("@snack-uikit/scroll");
+const tag_1 = require("@snack-uikit/tag");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const constants_1 = require("../../constants");
+const contexts_1 = require("../../contexts");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const components_1 = require("./components");
+const hooks_2 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+var SummaryAppearance;
+(function (SummaryAppearance) {
+    SummaryAppearance["Welcome"] = "welcome";
+    SummaryAppearance["Default"] = "default";
+})(SummaryAppearance || (exports.SummaryAppearance = SummaryAppearance = {}));
+const PlatformSale = {
+    [constants_1.PLATFORM.Evolution]: 25,
+    [constants_1.PLATFORM.Advanced]: 25,
+    [constants_1.PLATFORM.VmWare]: 20,
+};
+function PriceSummary({ className, appearance = SummaryAppearance.Default }) {
+    const { layoutType, pricePeriod, setCatalogOpen, calculatorType, selectedProduct, products, config: { products: productsProp, platforms }, actions: { onCatalogOpen, onStartClick }, } = (0, contexts_1.useCalculatorContext)();
+    const isMobile = layoutType !== uikit_product_utils_1.LAYOUT_TYPE.Desktop && layoutType !== uikit_product_utils_1.LAYOUT_TYPE.DesktopSmall;
+    const isPartners = calculatorType === 'partners';
+    const TitleComponent = isMobile ? typography_1.Typography.SansTitleL : typography_1.Typography.SansHeadlineS;
+    const total = (0, utils_1.getPrice)({ price: (0, utils_2.getTotalPrice)(products), pricePeriod, partners: isPartners });
+    const productCards = (0, react_1.useMemo)(() => (0, utils_2.transformValueToProductCardData)(productsProp, products), [products, productsProp]);
+    const hasPayaGo = (0, react_1.useMemo)(() => {
+        const payaProducts = Object.values(productsProp).filter(product => product.hasPayaGo);
+        return Object.keys(products).some(productId => payaProducts.find(product => product.id === productId));
+    }, [products, productsProp]);
+    const scrollRef = (0, react_1.useRef)(null);
+    const activeRef = (0, react_1.useRef)(null);
+    (0, hooks_2.useScrollListToActiveProduct)({ scrollRef, activeRef });
+    const handleProductDelete = (0, hooks_1.useProductDelete)();
+    const handleProductClick = (0, hooks_1.useProductClick)();
+    const deferredTotal = (0, react_1.useDeferredValue)(total);
+    const handleCatalogOpen = () => {
+        onCatalogOpen === null || onCatalogOpen === void 0 ? void 0 : onCatalogOpen();
+        setCatalogOpen(true);
+    };
+    const handleStartCatalog = () => {
+        onStartClick === null || onStartClick === void 0 ? void 0 : onStartClick();
+        setCatalogOpen(true);
+    };
+    const serviceButtonProps = {
+        size: 'm',
+        icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.PlusSVG, {}),
+        label: 'Добавить сервис',
+        'data-test-id': (0, utils_1.parseKeyToDataTest)('price', 'summary-button'),
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.priceSummary, className), "data-mobile": isMobile || undefined, "data-test-id": (0, utils_1.parseKeyToDataTest)('price', 'summary'), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, children: [(0, jsx_runtime_1.jsx)(TitleComponent, { "data-test-id": (0, utils_1.parseKeyToDataTest)('price', 'summary-title'), children: "\u0420\u0430\u0441\u0447\u0435\u0442" }), appearance === SummaryAppearance.Welcome && ((0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({ appearance: 'primary', onClick: handleStartCatalog }, serviceButtonProps))), appearance === SummaryAppearance.Default && ((0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({ appearance: 'primary', fullWidth: isMobile, onClick: handleCatalogOpen }, serviceButtonProps)))] }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.scroll, ref: scrollRef, "data-test-id": (0, utils_1.parseKeyToDataTest)('price', 'summary-products'), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.content, children: Object.entries(productCards)
+                        .filter(([, products]) => products.length > 0)
+                        .map(([platformId, cards]) => {
+                        var _a;
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.platform, children: [(0, jsx_runtime_1.jsxs)(typography_1.Typography.SansTitleM, { "data-test-id": (0, utils_1.parseKeyToDataTest)('price', 'summary-platform'), children: ["\u041F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0430 ", (_a = platforms.find(item => item.id === platformId)) === null || _a === void 0 ? void 0 : _a.label, ' ', isPartners && (0, jsx_runtime_1.jsx)(tag_1.Tag, { label: `${PlatformSale[platformId]}% скидка`, appearance: 'red', size: 'xs' })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.body, children: cards.map(({ id, idx, label }) => ((0, jsx_runtime_1.jsx)("div", { ref: (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id) === id && (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.idx) === idx ? activeRef : undefined, children: (0, jsx_runtime_1.jsx)(components_1.ProductCard, { id: id, idx: idx, label: label, selectedProduct: selectedProduct, onProductClick: handleProductClick, onProductDelete: handleProductDelete }) }, id + idx))) })] }, platformId));
+                    }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, "data-test-id": (0, utils_1.parseKeyToDataTest)('price', 'summary-footer'), children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.caption, "data-test-id": (0, utils_1.parseKeyToDataTest)('price', 'summary-title'), children: "\u041E\u0431\u0449\u0430\u044F \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C \u0441\u00A0\u041D\u0414\u0421" }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footerHeadline, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.total, "data-test-id": (0, utils_1.parseKeyToDataTest)('price', 'summary-footer-total'), children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansHeadlineS, { children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: (0, utils_1.formatNumber)(deferredTotal), maxLines: 1 }) }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleL, { children: "\u20BD" })] }), (0, jsx_runtime_1.jsx)(components_1.PricePeriodSelect, { hasPayaGo: hasPayaGo })] })] }), (0, jsx_runtime_1.jsx)(components_1.ProductListActions, { disabled: appearance === SummaryAppearance.Welcome })] })] }));
+}

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PRICE_PERIOD_ITEMS = exports.PRICE_NAME = void 0;
+exports.PricePeriodSelect = PricePeriodSelect;
+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 tooltip_1 = require("@snack-uikit/tooltip");
+const contexts_1 = require("../../../../contexts");
+const Price_1 = require("../../../../types/Price");
+const utils_1 = require("../../../../utils");
+exports.PRICE_NAME = {
+    [Price_1.PRICE_PERIOD.Month]: 'В месяц',
+    [Price_1.PRICE_PERIOD.Day]: 'В день',
+    [Price_1.PRICE_PERIOD.Hour]: 'В час',
+};
+exports.PRICE_PERIOD_ITEMS = [
+    {
+        id: Price_1.PRICE_PERIOD.Month,
+        content: 'В месяц',
+    },
+    {
+        id: Price_1.PRICE_PERIOD.Day,
+        content: 'В день',
+    },
+    {
+        id: Price_1.PRICE_PERIOD.Hour,
+        content: 'В час',
+    },
+];
+function PricePeriodSelect({ hasPayaGo }) {
+    const { layoutType, pricePeriod, setPricePeriod } = (0, contexts_1.useCalculatorContext)();
+    const ref = (0, react_1.useRef)(null);
+    const dataTestAttribute = (0, utils_1.parseKeyToDataTest)('price', 'summary-footer-total');
+    const [open, setOpen] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (hasPayaGo) {
+            setPricePeriod(Price_1.PRICE_PERIOD.Month);
+        }
+        setOpen(false);
+    }, [hasPayaGo, setPricePeriod]);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.AdaptiveDroplist, { layoutType: layoutType, size: 'm', selection: {
+            mode: 'single',
+            value: pricePeriod,
+            onChange: v => {
+                v && setPricePeriod(v);
+                setOpen(false);
+            },
+        }, open: hasPayaGo ? false : open, onOpenChange: setOpen, items: exports.PRICE_PERIOD_ITEMS, triggerElemRef: ref, "data-test-id": dataTestAttribute, children: (0, jsx_runtime_1.jsx)(tooltip_1.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: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { ref: ref, onClick: hasPayaGo ? e => e.stopPropagation() : () => setOpen(v => !v), label: exports.PRICE_NAME[pricePeriod], size: 'm', icon: open && !hasPayaGo ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronDownSVG, {}), disabled: hasPayaGo }) }) }));
+}

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

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

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