ecomlab-components-next 0.1.12 → 0.1.13

package/dist/components/ConstructorComponents/Tariff/TariffPlan.js

@@ -0,0 +1,732 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _image = _interopRequireDefault(require("next/image"));
+var _react = require("react");
+var _active = _interopRequireDefault(require("./img/active.svg"));
+var _ButtonBasic = _interopRequireDefault(require("../../Buttons/ButtonBasic/ButtonBasic"));
+require("./TariffPlan.scss");
+var _bxFace = _interopRequireDefault(require("./img/bx-face.svg"));
+var _bxChevronDown = _interopRequireDefault(require("./img/bx-chevron-down.svg"));
+var _bxInfoCircle = _interopRequireDefault(require("./img/bx-info-circle.svg"));
+var _TabsGreen = require("../../Tabs/TabsGreen/TabsGreen");
+var _bxBarChartSquare = _interopRequireDefault(require("./imgs/bx-bar-chart-square.svg"));
+var _bxBookOpen = _interopRequireDefault(require("./imgs/bx-book-open.svg"));
+var _bxCalendarWeek = _interopRequireDefault(require("./imgs/bx-calendar-week.svg"));
+var _bxCartAlt = _interopRequireDefault(require("./imgs/bx-cart-alt.svg"));
+var _bxChart = _interopRequireDefault(require("./imgs/bx-chart.svg"));
+var _bxChat = _interopRequireDefault(require("./imgs/bx-chat.svg"));
+var _bxDetail = _interopRequireDefault(require("./imgs/bx-detail.svg"));
+var _bxDonateHeart = _interopRequireDefault(require("./imgs/bx-donate-heart.svg"));
+var _bxFace2 = _interopRequireDefault(require("./imgs/bx-face.svg"));
+var _bxGlobe = _interopRequireDefault(require("./imgs/bx-globe.svg"));
+var _bxLayout = _interopRequireDefault(require("./imgs/bx-layout.svg"));
+var _bxMessageDetail = _interopRequireDefault(require("./imgs/bx-message-detail.svg"));
+var _bxPackage = _interopRequireDefault(require("./imgs/bx-package.svg"));
+var _check = _interopRequireDefault(require("./imgs/check.svg"));
+var _bxNotification = _interopRequireDefault(require("./imgs/bx-notification.svg"));
+var _bxSlider = _interopRequireDefault(require("./imgs/bx-slider.svg"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var TariffPlan = function TariffPlan(_ref) {
+  var _btns$;
+  var current = _ref.current;
+  var tarifs_cards_min_list = [{
+    period: '1 Месяц'
+  }, {
+    period: '3 месяца',
+    discount: 20
+  }, {
+    period: '6 месяцев',
+    discount: 20
+  }, {
+    period: '12 месяцев',
+    discount: 20
+  }];
+  var tariffs_list = [{
+    label: 'Бесплатно',
+    sum: 0,
+    color: '#FF7A00',
+    description: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0441\u0435\u0440\u0432\u0438\u0441 \u0431\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u043E",
+    ref: 'free'
+  }, {
+    label: 'Старт',
+    sum: 4900,
+    color: '#1410DD',
+    description: "\u0412 \u0441\u0430\u043C\u044B\u0439 \u0440\u0430\u0437 \u043D\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u043A\u043E\u043C\u043F\u0430\u043D\u0438\u0438",
+    ref: 'start'
+  }, {
+    label: 'Команда',
+    sum: 12000,
+    color: '#7700D4',
+    description: "\u0415\u0441\u043B\u0438 \u0432 \u043A\u043E\u043C\u0430\u043D\u0434\u0435 \u043D\u0435 \u0442\u0430\u043A \u043C\u043D\u043E\u0433\u043E \u0447\u0435\u043B\u043E\u0432\u0435\u043A",
+    popular: true,
+    ref: 'team'
+  }, {
+    label: 'ПРО',
+    sum: 19000,
+    color: '#169D5C',
+    description: "\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u0435 \u043F\u043E\u043B\u043D\u044B\u0435 \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430",
+    ref: 'pro'
+  }];
+  var parametr_list = [{
+    label: 'Раздел Аналитика',
+    icon: _bxFace2["default"],
+    inside: [{
+      label: 'Продвинутая аналитика',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Аналитика рекламы',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Аналитика Акций',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Аналитика Заказов',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'ABC+XYZ анализ',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Аналитика Цен',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Аналитика упущенных продаж по более чем 20 параметрам',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Подсказочник на основе ИИ',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }]
+  }, {
+    label: 'Раздел Товары',
+    icon: _bxPackage["default"],
+    inside: [{
+      label: 'Перенос товаров на маркетплейсы',
+      text1: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 100 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 10 \u0440\u0443\u0431 \u0437\u0430 \u043F\u0435\u0440\u0435\u043D\u043E\u0441"),
+      text2: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 300 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 8 \u0440\u0443\u0431 \u0437\u0430 \u043F\u0435\u0440\u0435\u043D\u043E\u0441"),
+      text3: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 500 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 6 \u0440\u0443\u0431 \u0437\u0430 \u043F\u0435\u0440\u0435\u043D\u043E\u0441"),
+      text4: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 2000 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 4 \u0440\u0443\u0431 \u0437\u0430 \u043F\u0435\u0440\u0435\u043D\u043E\u0441")
+    }, {
+      label: 'Создание мастер товаров',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Обновление цен',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Обновление остатков',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Анализ Товара по 40+ метрикам',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Улучшение товаров',
+      text1: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 100 \u0443\u043B\u0443\u0447\u0448\u0435\u043D\u0438\u0439"),
+      text2: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 100 \u0443\u043B\u0443\u0447\u0448\u0435\u043D\u0438\u0439"),
+      text3: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 100 \u0443\u043B\u0443\u0447\u0448\u0435\u043D\u0438\u0439"),
+      text4: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 100 \u0443\u043B\u0443\u0447\u0448\u0435\u043D\u0438\u0439")
+    }, {
+      label: 'Внесение и анализ себестоимости',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Расчет поставок',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }]
+  }, {
+    label: 'Раздел отзывы',
+    icon: _bxMessageDetail["default"],
+    inside: [{
+      label: 'Генерация кастомных ответов на каждый отзыв с ИИ. Опционально - утверждение оператором',
+      text1: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 100 \u043E\u0442\u0437\u044B\u0432\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 9 \u0440\u0443\u0431 \u0437\u0430 \u043E\u0442\u0437\u044B\u0432"),
+      text2: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 300 \u043E\u0442\u0437\u044B\u0432\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 7 \u0440\u0443\u0431 \u0437\u0430 \u043E\u0442\u0437\u044B\u0432"),
+      text3: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 500 \u043E\u0442\u0437\u044B\u0432\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 5 \u0440\u0443\u0431 \u0437\u0430 \u043E\u0442\u0437\u044B\u0432"),
+      text4: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 2000 \u043E\u0442\u0437\u044B\u0432\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 3 \u0440\u0443\u0431 \u0437\u0430 \u043E\u0442\u0437\u044B\u0432")
+    }, {
+      label: 'Автоопределение темы отзыва',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Сортировка входящих отзывов с ИИ по 40 темам. Возможность задавать новые темы',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Персонализация ответов с шаблонными переменными – Имя, Маркетплейс, Бренд, Товар',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Еженедельные отчеты по изменению трендов в отзывах. Например, если у какого-то товара выросло количество негативных отзывов об упаковке',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Кастомизация ответов ИИ',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Настройка стиля ответов ИИ под ваш бренд',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Правила ответов для товаров и источников',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Настройки разных правил ответов под каждый товар, бренд или маркетплейс',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: '2 500+ готовых шаблонных ответов для любой темы отзыва и оценки',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Аналитика по отзывам и вопросам',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }]
+  }, {
+    label: 'Раздел акции',
+    icon: _bxDonateHeart["default"],
+    inside: [{
+      label: 'Умная лента заказов',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Все заказы в одном окне',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Настройка собственной дополнительной этикетки',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Анализ заказов по статусам',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Создание собственных статусов заказов',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }]
+  }, {
+    label: 'Раздел заказы',
+    icon: _bxCartAlt["default"],
+    inside: [{
+      label: 'Умная лента заказов',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Все заказы в одном окне',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Настройка собственной дополнительной этикетки',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Анализ заказов по статусам',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Создание собственных статусов заказов',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }]
+  }, {
+    label: 'Раздел маркетинг',
+    icon: _bxChart["default"],
+    inside: [{
+      label: 'Аналитики рекламных кампаний по 20+ параметрам',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Управление рекламными компаниями по всем площадкам',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Создание и корректирование рекламных компаний',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Просмотр товаров в рекламных компаниях',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Создание автоматических правил по созданию и добавлению товаров в рекламных компаниях',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Продвинутая система рекомендаций',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }]
+  }, {
+    label: 'Раздел задачи',
+    icon: _bxSlider["default"],
+    inside: [{
+      label: 'Создание задач и досок проектов',
+      text1: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 10 \u043F\u0440\u043E\u0435\u043A\u0442\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 100 \u0440\u0443\u0431 \u0437\u0430 \u043F\u0440\u043E\u0435\u043A\u0442"),
+      text2: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 20 \u043F\u0440\u043E\u0435\u043A\u0442\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 100 \u0440\u0443\u0431 \u0437\u0430 \u043F\u0440\u043E\u0435\u043A\u0442"),
+      text3: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 40 \u043F\u0440\u043E\u0435\u043A\u0442\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 100 \u0440\u0443\u0431 \u0437\u0430 \u043F\u0440\u043E\u0435\u043A\u0442"),
+      text4: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 100 \u043F\u0440\u043E\u0435\u043A\u0442\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 100 \u0440\u0443\u0431 \u0437\u0430 \u043F\u0440\u043E\u0435\u043A\u0442")
+    }, {
+      label: 'Добавление сотрудников в проект',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Анализ активности сотрудников',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }]
+  }, {
+    label: 'Раздел CRM',
+    icon: _bxLayout["default"],
+    inside: [{
+      label: 'Создание собственных таблиц и связей',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Уникальный конструктор таблиц',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Создание статусов и задач',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }]
+  }, {
+    label: 'Раздел WIKI',
+    icon: _bxBookOpen["default"],
+    inside: [{
+      label: 'Создание своих статей',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Создание каталога статей',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Публикация статей на внешних ресурсах',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }]
+  }, {
+    label: 'Раздел чат-бот',
+    icon: _bxChart["default"],
+    inside: [{
+      label: 'Загрузка файлов для чат бота',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Создание чат бота',
+      text1: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 10 \u0447\u0430\u0442 \u0431\u043E\u0442\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 1000 \u0437\u0430 \u0447\u0430\u0442 \u0431\u043E\u0442\u0430"),
+      text2: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 20 \u0447\u0430\u0442 \u0431\u043E\u0442\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 1000 \u0437\u0430 \u0447\u0430\u0442 \u0431\u043E\u0442\u0430"),
+      text3: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 40 \u0447\u0430\u0442 \u0431\u043E\u0442\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 1000 \u0437\u0430 \u0447\u0430\u0442 \u0431\u043E\u0442\u0430"),
+      text4: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#00B45E)'
+        }
+      }, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 100 \u0447\u0430\u0442 \u0431\u043E\u0442\u043E\u0432"), " ", /*#__PURE__*/React.createElement("br", null), "\u0434\u0430\u043B\u0435\u0435 \u043F\u043E 1000 \u0437\u0430 \u0447\u0430\u0442 \u0431\u043E\u0442\u0430")
+    }, {
+      label: 'Автоматизация общения с пользователями с помощью ИИ',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Шаблоны чат ботов',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }]
+  }, {
+    label: 'Управление',
+    icon: _bxNotification["default"],
+    inside: [{
+      label: 'Создание подключений к площадкам',
+      text1: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 3 \u043F\u043B\u043E\u0449\u0430\u0434\u043A\u0438"),
+      text2: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 5 \u043F\u043B\u043E\u0449\u0430\u0434\u043E\u043A"),
+      text3: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 6 \u043F\u043B\u043E\u0449\u0430\u0434\u043E\u043A"),
+      text4: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 10 \u043F\u043B\u043E\u0449\u0430\u0434\u043E\u043A")
+    }, {
+      label: 'Добавление сотрудников',
+      text1: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 10 \u0441\u043E\u0442\u0440\u0443\u0434\u043D\u0438\u043A\u043E\u0432"),
+      text2: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 20 \u0441\u043E\u0442\u0440\u0443\u0434\u043D\u0438\u043A\u043E\u0432"),
+      text3: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 40 \u0441\u043E\u0442\u0440\u0443\u0434\u043D\u0438\u043A\u043E\u0432"),
+      text4: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E 100 \u0441\u043E\u0442\u0440\u0443\u0434\u043D\u0438\u043A\u043E\u0432")
+    }, {
+      label: 'Создание Пространств для разделения проектов',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }, {
+      label: 'Управление уведомлениями',
+      base1: 'active',
+      base2: 'active',
+      base3: 'active',
+      base4: 'active'
+    }]
+  }];
+  var _useState = (0, _react.useState)('3 месяца'),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentTariff = _useState2[0],
+    setCurrentTariff = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isModalTariffActivation = _useState4[0],
+    setIsModalTariffActivation = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isModalBalance = _useState6[0],
+    setIsModalBalance = _useState6[1];
+  var _useState7 = (0, _react.useState)(new Set([current ? current : ''])),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isOpenItems = _useState8[0],
+    setIsOpenItems = _useState8[1];
+  var btns = [{
+    label: '1 Месяц',
+    value: '1 Месяц'
+  }, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, "3 \u043C\u0435\u0441\u044F\u0446\u0430 ", /*#__PURE__*/React.createElement("div", {
+      className: "discount"
+    }, "5 %")),
+    value: '3 месяца'
+  }, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, "6 \u043C\u0435\u0441\u044F\u0446\u0435\u0432 ", /*#__PURE__*/React.createElement("div", {
+      className: "discount"
+    }, "5 %")),
+    value: '6 месяцев'
+  }, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, "12 \u043C\u0435\u0441\u044F\u0446\u0435\u0432 ", /*#__PURE__*/React.createElement("div", {
+      className: "discount"
+    }, "5 %")),
+    value: '12 месяцев'
+  }];
+  var _useState9 = (0, _react.useState)(btns === null || btns === void 0 || (_btns$ = btns[0]) === null || _btns$ === void 0 ? void 0 : _btns$.value),
+    _useState10 = _slicedToArray(_useState9, 2),
+    status = _useState10[0],
+    setStatus = _useState10[1];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "tariffs-plan"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tariffs-plan__header"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "tariffs-plan__title"
+  }, "\u0422\u0430\u0440\u0438\u0444\u044B")), /*#__PURE__*/React.createElement("div", {
+    className: "tariffs-plan__top"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cards-group"
+  }, /*#__PURE__*/React.createElement(_TabsGreen.TabsGreen, {
+    btns: btns,
+    currentBtn: status,
+    setCurrentBtn: function setCurrentBtn(e) {
+      return setStatus(e);
+    },
+    checkValue: true
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "tariffs-plan__cards"
+  }, tariffs_list.map(function (_ref2, ind) {
+    var label = _ref2.label,
+      sum = _ref2.sum,
+      color = _ref2.color,
+      description = _ref2.description,
+      popular = _ref2.popular,
+      ref = _ref2.ref;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tariff-card"
+    }, popular && /*#__PURE__*/React.createElement("div", {
+      className: "tariff-card__sticker"
+    }, "\u0421\u0430\u043C\u044B\u0439 \u043F\u043E\u043F\u0443\u043B\u044F\u0440\u043D\u044B\u0439"), /*#__PURE__*/React.createElement("h3", {
+      className: "tariff-card__name",
+      style: {
+        color: color
+      }
+    }, label), /*#__PURE__*/React.createElement("div", {
+      className: "tariff-card__sum-box"
+    }, " ", sum.toLocaleString(), " ", /*#__PURE__*/React.createElement("span", null, " ".concat(' ₽')), '/мес'), /*#__PURE__*/React.createElement("p", {
+      className: "tariff-card__description"
+    }, description), /*#__PURE__*/React.createElement(_ButtonBasic["default"], {
+      green: true,
+      text: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C",
+      onClick: function onClick() {
+        var _window;
+        return (_window = window) === null || _window === void 0 ? void 0 : _window.open("https://lk.ecomru.ru/auth?ref-pricePlan=".concat(ref, "&ref-page=/settings/tariff"), '_blunk');
+      },
+      width: "100%",
+      size: "36px",
+      style: {
+        marginTop: '7px'
+      }
+      // onClick={(e) => setIsModalTariffActivation(true)}
+    }));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "tariffs-plan__content"
+  }, parametr_list.map(function (_ref3) {
+    var label = _ref3.label,
+      icon = _ref3.icon,
+      inside = _ref3.inside;
+    var parrent_label = label;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tariffs-plan__item"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "tariffs-plan__item-min",
+      style: {
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        var newState = new Set(isOpenItems);
+        if (newState.has(label)) {
+          newState["delete"](label);
+        } else {
+          newState.add(label);
+        }
+        setIsOpenItems(newState);
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "tariffs-plan__label"
+    }, /*#__PURE__*/React.createElement(_image["default"], {
+      alt: "icon",
+      src: icon
+    }), label), /*#__PURE__*/React.createElement("button", {
+      className: isOpenItems.has(parrent_label) ? 'tariffs-plan__drop' : 'tariffs-plan__drop_hide'
+    }, /*#__PURE__*/React.createElement(_image["default"], {
+      alt: "icon",
+      src: _bxChevronDown["default"]
+    }))), /*#__PURE__*/React.createElement("div", null, (inside === null || inside === void 0 ? void 0 : inside.length) > 0 && /*#__PURE__*/React.createElement("div", {
+      className: isOpenItems.has(parrent_label) ? 'tariffs-plan__items' : 'tariffs-plan__items_hide'
+    }, inside === null || inside === void 0 ? void 0 : inside.map(function (_ref4) {
+      var label = _ref4.label,
+        base1 = _ref4.base1,
+        base2 = _ref4.base2,
+        base3 = _ref4.base3,
+        base4 = _ref4.base4,
+        text1 = _ref4.text1,
+        text2 = _ref4.text2,
+        text3 = _ref4.text3,
+        text4 = _ref4.text4;
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'tariffs-plan__item-min'
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "tariffs-plan__item-section-label"
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "tariffs-plan__label-min"
+      }, label, " ", /*#__PURE__*/React.createElement(_image["default"], {
+        alt: "icon",
+        src: _bxInfoCircle["default"]
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "tariffs-plan__item-section"
+      }, base1 && base1 == 'active' ? /*#__PURE__*/React.createElement(_image["default"], {
+        alt: "icon",
+        className: "tariffs-plan__done",
+        src: _active["default"]
+      }) : '', text1 && /*#__PURE__*/React.createElement("p", {
+        className: "tariffs-plan__text"
+      }, text1)), /*#__PURE__*/React.createElement("div", {
+        className: "tariffs-plan__item-section"
+      }, base2 && base2 == 'active' ? /*#__PURE__*/React.createElement(_image["default"], {
+        alt: "icon",
+        className: "tariffs-plan__done",
+        src: _active["default"]
+      }) : '', text2 && /*#__PURE__*/React.createElement("p", {
+        className: "tariffs-plan__text"
+      }, text2)), /*#__PURE__*/React.createElement("div", {
+        className: "tariffs-plan__item-section"
+      }, base3 && base3 == 'active' ? /*#__PURE__*/React.createElement(_image["default"], {
+        alt: "icon",
+        className: "tariffs-plan__done",
+        src: _active["default"]
+      }) : '', text3 && /*#__PURE__*/React.createElement("p", {
+        className: "tariffs-plan__text"
+      }, text3)), /*#__PURE__*/React.createElement("div", {
+        className: "tariffs-plan__item-section"
+      }, base4 && base4 == 'active' ? /*#__PURE__*/React.createElement(_image["default"], {
+        alt: "icon",
+        className: "tariffs-plan__done",
+        src: _active["default"]
+      }) : '', text4 && /*#__PURE__*/React.createElement("p", {
+        className: "tariffs-plan__text"
+      }, text4)));
+    }))));
+  }))))));
+};
+var _default = exports["default"] = TariffPlan;