ecomlab-components-next 0.1.19 → 0.1.21

package/dist/components/ConstructorComponents/ModalBitrixForm/ModalBitrixForm.js

@@ -0,0 +1,423 @@
+"use strict";
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _done_icon = _interopRequireDefault(require("./img/done_icon.svg"));
+var _close_icon = _interopRequireDefault(require("./img/close_icon.svg"));
+var _DownSelector = _interopRequireDefault(require("../../Inputs/DropDownSelector/DownSelector"));
+var _InputDinamycPlaceholder = _interopRequireDefault(require("../../Inputs/InputDinamycPlaceholder/InputDinamycPlaceholder"));
+var _TextareaDynamicPlaceholder = _interopRequireDefault(require("../../Inputs/TextareaDynamicPlaceholder/TextareaDynamicPlaceholder"));
+var _ButtonBasic = _interopRequireDefault(require("../../Buttons/ButtonBasic/ButtonBasic"));
+var _utils = require("../../../common/utils");
+require("./ModalBitrixForm.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 communication_method = [{
+  label: 'Звонок'
+}, {
+  label: 'Telegram'
+}, {
+  label: 'WhatsApp'
+}];
+var ModalBitrixForm = function ModalBitrixForm(_ref) {
+  var setIsModal = _ref.setIsModal,
+    inputArr = _ref.inputArr,
+    formTitle = _ref.formTitle,
+    subTitle = _ref.subTitle,
+    bitrixToken = _ref.bitrixToken,
+    _ref$modal = _ref.modal,
+    modal = _ref$modal === void 0 ? true : _ref$modal,
+    _ref$colorBtn = _ref.colorBtn,
+    colorBtn = _ref$colorBtn === void 0 ? 'green' : _ref$colorBtn,
+    _ref$btnName = _ref.btnName,
+    btnName = _ref$btnName === void 0 ? false : _ref$btnName,
+    _ref$communicationMet = _ref.communicationMethod,
+    communicationMethod = _ref$communicationMet === void 0 ? false : _ref$communicationMet;
+  var _useState = (0, _react.useState)({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedValue = _useState4[0],
+    setSelectedValue = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    err = _useState6[0],
+    setErr = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    inputs = _useState8[0],
+    setInputs = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    successfulResponse = _useState10[0],
+    setsuccessfulResponse = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isSubmitting = _useState12[0],
+    setIsSunmitting = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isFormValid = _useState14[0],
+    setIsFormValid = _useState14[1];
+  var _useState15 = (0, _react.useState)('Звонок'),
+    _useState16 = _slicedToArray(_useState15, 2),
+    currentCommunication = _useState16[0],
+    setCurrentCommunication = _useState16[1];
+  var _useState17 = (0, _react.useState)(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    allFieldsValid = _useState18[0],
+    setAllFieldsValid = _useState18[1];
+  var formInputs = inputs.filter(function (el) {
+    return el !== undefined;
+  });
+  var requiredKeys = formInputs.filter(function (el) {
+    return el.props.required;
+  }).map(function (el) {
+    return el.key;
+  });
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem('required-keys', JSON.stringify(requiredKeys));
+  }
+  var fetchTest = function fetchTest() {
+    var _Object$entries;
+    setIsSunmitting(true);
+    var queries = (_Object$entries = Object.entries(inputValue)) === null || _Object$entries === void 0 || (_Object$entries = _Object$entries.map(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+      if (key == 'FIELDS[TITLE]') {
+        return "".concat(key, "=").concat(value + ' // ' + inputValue['FIELDS[NAME]']);
+      }
+      if (key == 'FIELDS[COMMENTS]') {
+        return selectedValue !== null && selectedValue !== void 0 && selectedValue.label ? "".concat(key, "=\u0422\u0438\u043F \u043F\u0430\u0440\u0442\u043D\u0435\u0440\u0430: ").concat(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label, "  // ").concat(value) : "".concat(key, "=").concat(value);
+      } else return "".concat(key, "=").concat(value);
+    })) === null || _Object$entries === void 0 ? void 0 : _Object$entries.join('&');
+    var testUrl = "https://ecs.bitrix24.ru/rest/1/".concat(bitrixToken, "/crm.lead.add.json?").concat(queries);
+    fetch(testUrl).then(function (res) {
+      return res.json();
+    }).then(function (json) {
+      if (json !== null && json !== void 0 && json.result) {
+        setsuccessfulResponse(true);
+      }
+    })["catch"](function (err) {
+      console.error(err);
+      setIsSunmitting(false);
+    });
+  };
+  var handleChange = function handleChange(e, id) {
+    setInputValue(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, id, e === null || e === void 0 ? void 0 : e.value));
+    });
+    setSelectedValue(e);
+  };
+  var validateField = function validateField(id, inputType, value) {
+    var error = {};
+    var isValid = true;
+    if (inputType === 'email') {
+      if (!(0, _utils.validationEmail)(value)) {
+        error[id] = 'Неверный email';
+        isValid = false;
+      }
+    } else if (inputType === 'tel') {
+      var regex = /^\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}$/;
+      if (!regex.test(value)) {
+        error[id] = 'Неверный телефон';
+        isValid = false;
+      }
+    } else if (inputType === 'dropdown') {
+      if (!(selectedValue !== null && selectedValue !== void 0 && selectedValue.label)) {
+        error[id] = 'Выберите значение';
+        isValid = false;
+      }
+    } else if (inputType === 'text') {
+      if (value.length < 1) {
+        error[id] = 'Поле не заполнено';
+        isValid = false;
+      }
+    } else if (inputType === 'name') {
+      var _name$split;
+      var name = value;
+      if (name.length <= 2) {
+        error[id] = 'Минимальная длина 3 символов';
+        isValid = false;
+      }
+      if (name.length > 100) {
+        error[id] = 'Максимальная длина 100 символов';
+        isValid = false;
+      }
+      if (((_name$split = name.split(' ')) === null || _name$split === void 0 ? void 0 : _name$split.length) > 3) {
+        error[id] = 'Максимальное количество пробелов 3';
+        isValid = false;
+      }
+      var nameRegex = /^[a-zA-Zа-яА-ЯёЁ]+([ '-][a-zA-Zа-яА-ЯёЁ]+)*$/;
+      if (!nameRegex.test(name)) {
+        error[id] = 'Имя может состоять только из букв';
+        isValid = false;
+      }
+    } else if (inputType === 'description') {
+      if (value.length > 1000) {
+        error[id] = 'Максимальная длина 1000 символов';
+        isValid = false;
+      }
+    }
+    setErr(function (prev) {
+      var newErrors = _objectSpread(_objectSpread({}, prev), error);
+      if (!error[id]) {
+        delete newErrors[id];
+      }
+      return newErrors;
+    });
+    var storedStatus;
+    if (typeof localStorage !== 'undefined') {
+      storedStatus = localStorage.getItem('form-validation-status');
+    }
+    var validationStatus = storedStatus ? JSON.parse(storedStatus) : {};
+    validationStatus[id] = isValid;
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('form-validation-status', JSON.stringify(validationStatus));
+    }
+    var storedRequiredKeys;
+    if (typeof localStorage !== 'undefined') {
+      storedRequiredKeys = localStorage.getItem('required-keys');
+    }
+    var requiredKeys = storedRequiredKeys ? JSON.parse(storedRequiredKeys) : [];
+    var allRequiredValid = requiredKeys.every(function (key) {
+      return validationStatus[key] === true;
+    });
+    setIsFormValid(allRequiredValid);
+  };
+  (0, _react.useEffect)(function () {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.removeItem('form-validation-status');
+      return function () {
+        localStorage.removeItem('form-validation-status');
+      };
+    }
+  }, []);
+  var handleBlur = function handleBlur(id, inputType, value) {
+    validateField(id, inputType, value);
+  };
+  var validateFieldWithoutErrors = function validateFieldWithoutErrors(id, inputType, value) {
+    var isValid = true;
+    if (inputType === 'email') {
+      if (!(0, _utils.validationEmail)(value)) {
+        isValid = false;
+      }
+    } else if (inputType === 'tel') {
+      var regex = /^\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}$/;
+      if (!regex.test(value)) {
+        isValid = false;
+      }
+    } else if (inputType === 'dropdown') {
+      if (!(selectedValue !== null && selectedValue !== void 0 && selectedValue.label)) {
+        isValid = false;
+      }
+    } else if (inputType === 'text') {
+      if ((value === null || value === void 0 ? void 0 : value.length) < 1) {
+        isValid = false;
+      }
+    } else if (inputType === 'name') {
+      var _name$split2;
+      var name = value;
+      if ((name === null || name === void 0 ? void 0 : name.length) <= 2 || (name === null || name === void 0 ? void 0 : name.length) > 100 || (name === null || name === void 0 || (_name$split2 = name.split(' ')) === null || _name$split2 === void 0 ? void 0 : _name$split2.length) > 3) {
+        isValid = false;
+      }
+      var nameRegex = /^[a-zA-Zа-яА-ЯёЁ]+([ '-][a-zA-Zа-яА-ЯёЁ]+)*$/;
+      if (!nameRegex.test(name)) {
+        isValid = false;
+      }
+    } else if (inputType === 'description') {
+      if ((value === null || value === void 0 ? void 0 : value.length) > 1000) {
+        isValid = false;
+      }
+    }
+    setInputValue(function (prevInputValue) {
+      if (prevInputValue[id] !== value) {
+        return _objectSpread(_objectSpread({}, prevInputValue), {}, _defineProperty({}, id, value));
+      }
+      return prevInputValue;
+    });
+    return isValid;
+  };
+  (0, _react.useEffect)(function () {
+    var allRequiredValid = inputArr.filter(function (field) {
+      return field.required;
+    }).every(function (_ref4) {
+      var id = _ref4.id,
+        inputType = _ref4.inputType;
+      return validateFieldWithoutErrors(id, inputType, inputValue[id]);
+    });
+    setAllFieldsValid(allRequiredValid);
+  }, [inputValue, selectedValue, inputArr]);
+  (0, _react.useEffect)(function () {
+    setInputs(_toConsumableArray(inputArr === null || inputArr === void 0 ? void 0 : inputArr.map(function (_ref5, ind) {
+      var id = _ref5.id,
+        placeholder = _ref5.placeholder,
+        hidden = _ref5.hidden,
+        value = _ref5.value,
+        inputType = _ref5.inputType,
+        options_prop = _ref5.options_prop,
+        type = _ref5.type,
+        required = _ref5.required;
+      if (hidden) {
+        setInputValue(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, id, value));
+        });
+        return;
+      }
+      if (type == 'textarea') {
+        return /*#__PURE__*/_react["default"].createElement(_TextareaDynamicPlaceholder["default"], {
+          key: id,
+          width: "100%",
+          changeValue: inputValue === null || inputValue === void 0 ? void 0 : inputValue[id],
+          onChange: function onChange(e) {
+            return setInputValue(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, id, e));
+            });
+          },
+          required: required,
+          placeholder: placeholder
+        });
+      }
+      if (type == 'dropdown') {
+        return /*#__PURE__*/_react["default"].createElement(_DownSelector["default"], {
+          key: id,
+          options_prop: options_prop,
+          type: inputType,
+          state: selectedValue,
+          setState: function setState(e) {
+            handleChange(e, id);
+          },
+          err: err === null || err === void 0 ? void 0 : err[id],
+          required: required,
+          placeholder: placeholder,
+          size: "l",
+          width: "100%",
+          onBlur: function onBlur(value) {
+            return handleBlur(id, inputType, value);
+          }
+        });
+      }
+      if (type == 'input') {
+        return /*#__PURE__*/_react["default"].createElement(_InputDinamycPlaceholder["default"], {
+          key: id,
+          type: inputType ? inputType : 'text',
+          placeholder: placeholder,
+          changeValue: inputValue === null || inputValue === void 0 ? void 0 : inputValue[id],
+          onChange: function onChange(e) {
+            return setInputValue(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, id, e));
+            });
+          },
+          autoComplete: false,
+          err: err === null || err === void 0 ? void 0 : err[id],
+          required: required,
+          textErr: err === null || err === void 0 ? void 0 : err[id],
+          onBlur: function onBlur(value) {
+            return handleBlur(id, inputType, value);
+          },
+          mask: inputType === 'tel' ? '+{7} (000) 000-00-00' : ''
+        });
+      }
+    })));
+  }, [inputArr, err, selectedValue]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: modal ? 'blackout' : '',
+    style: {
+      maxWidth: !modal ? '560px' : '',
+      width: !modal ? '100%' : ''
+    },
+    onClick: function onClick(e) {
+      if (modal) {
+        var el = e.target;
+        if (el.classList.contains('blackout')) {
+          setIsModal(false);
+        }
+      }
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "modal-bitrix-form",
+    style: {
+      zIndex: !modal ? 'inherit' : '',
+      boxShadow: !modal ? 'none' : ''
+    }
+  }, successfulResponse && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "modal-bitrix-form__successful"
+  }, /*#__PURE__*/_react["default"].createElement("img", _extends({
+    className: "modal-bitrix-form__icon-done",
+    alt: "icon"
+  }, _done_icon["default"])), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "modal-bitrix-form__text-green"
+  }, "\u0417\u0430\u044F\u0432\u043A\u0443 \u043F\u0440\u0438\u043D\u044F\u043B\u0438!"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "modal-bitrix-form__text"
+  }, "\u0412 \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043C\u044F \u0441\u0432\u044F\u0436\u0435\u043C\u0441\u044F \u0441 \u0432\u0430\u043C\u0438!")), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (formTitle || subTitle) && /*#__PURE__*/_react["default"].createElement("header", {
+    className: "modal-bitrix-form__header"
+  }, /*#__PURE__*/_react["default"].createElement("h1", {
+    className: "modal-bitrix-form__title"
+  }, formTitle), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "modal-bitrix-form__description"
+  }, subTitle), communicationMethod && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "modal-bitrix-form__radio-group"
+  }, communication_method.map(function (_ref6) {
+    var label = _ref6.label;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "modal-bitrix-form__radio-item",
+      key: label
+    }, /*#__PURE__*/_react["default"].createElement("input", {
+      id: "header",
+      checked: currentCommunication == label,
+      onChange: function onChange(e) {
+        return setCurrentCommunication(label);
+      },
+      className: "radio",
+      type: "radio",
+      radioGroup: "communication"
+    }), /*#__PURE__*/_react["default"].createElement("label", {
+      htmlFor: "header",
+      className: "modal-bitrix-form__radio-label"
+    }, label));
+  })), modal && /*#__PURE__*/_react["default"].createElement("button", {
+    className: "modal-bitrix-form__btn-close",
+    onClick: function onClick(e) {
+      return setIsModal(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", _close_icon["default"]))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "modal-bitrix-form__content"
+  }, inputs), /*#__PURE__*/_react["default"].createElement(_ButtonBasic["default"], {
+    text: btnName ? btnName : 'Отправить',
+    disabled: !allFieldsValid,
+    green: colorBtn == 'green',
+    darkViolet: colorBtn == 'darkViolet',
+    size: "56px",
+    width: "100%",
+    maxWidth: "100%",
+    onClick: function onClick(e) {
+      fetchTest();
+    }
+  }))));
+};
+var _default = exports["default"] = ModalBitrixForm;

package/dist/components/ConstructorComponents/ModalBitrixForm/ModalBitrixForm.scss

@@ -0,0 +1,161 @@
+.modal-bitrix-form {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 32px;
+    position: relative;
+    z-index: 1000;
+    display: flex;
+    max-width: 560px;
+    width: 100%;
+    min-width: 340px;
+    margin-left: auto;
+    margin-right: auto;
+    flex-direction: column;
+    border-radius: 8px;
+    background: #FFF;
+    padding: 24px;
+    max-height: calc(100vh - 40px);
+    box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.12);
+
+    &__header {
+        display: flex;
+        flex-direction: column;
+        width: calc(100% - 24px - 16px);
+        gap: 12px;
+    }
+
+    &__title {
+        color: #333;
+        font-family: Inter;
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 32px;
+    }
+
+    &__description {
+        color: #333;
+        font-family: Inter;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: 28px;
+        width: 100%;
+        height: auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding-top: 10px;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    &__btn-close {
+        position: absolute;
+        top: 24px;
+        right: 24px;
+        background-color: inherit;
+        border: none;
+        cursor: pointer;
+        z-index: 11;
+    }
+
+    &__successful {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: 12px;
+        justify-content: center;
+        align-items: center;
+        margin-left: auto;
+        margin-right: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 10;
+        background-color: #fff;
+        border-radius: 8px;
+    }
+
+    &__icon-done {
+        max-width: 135px;
+        width: 100%;
+        height: auto;
+    }
+
+    &__text-green {
+        color: #00B45E;
+        text-align: center;
+        font-family: Inter;
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 32px;
+        text-align: center;
+    }
+
+    &__text {
+        color: #333;
+        font-family: Inter;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        text-align: center;
+    }
+
+    &__radio-group {
+        display: flex;
+        gap: 40px;
+        align-items: center;
+    }
+
+    &__radio-item {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+    }
+
+    &__radio-label {
+        color: #333;
+        font-family: "Golos Text";
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+    }
+
+    .selector_wrapper {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 430px) {
+    .modal-bitrix-form {
+        gap: 14px;
+
+        &__title {
+            font-size: 19px;
+            line-height: 32px;
+        }
+
+        &__header {
+            gap: 8px;
+        }
+
+        &__text {
+            font-size: 14px;
+            line-height: 24px;
+        }
+    }
+}

package/dist/components/ConstructorComponents/ModalBitrixForm/img/close_icon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8906 0.398438L6.94046 5.34744L1.99146 0.398438L0.341797 2.0481L5.2908 6.9971L0.341797 11.9461L1.99146 13.5958L6.94046 8.64677L11.8906 13.5958L13.5403 11.9461L8.5913 6.9971L13.5403 2.0481L11.8906 0.398438Z" fill="#333333"/>
+</svg>

package/dist/components/ConstructorComponents/ModalBitrixForm/img/done_icon.svg

@@ -0,0 +1,3 @@
+<svg width="135" height="135" viewBox="0 0 135 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.996" fill-rule="evenodd" clip-rule="evenodd" d="M61.3037 -0.132812C65.3466 -0.132812 69.3897 -0.132812 73.4326 -0.132812C97.0692 2.73802 114.867 14.4275 126.826 34.9355C131.228 43.2336 133.909 52.0225 134.868 61.3027C134.868 65.3456 134.868 69.3888 134.868 73.4316C131.997 97.0682 120.308 114.866 99.7998 126.825C91.5018 131.227 82.7128 133.908 73.4326 134.867C69.3897 134.867 65.3466 134.867 61.3037 134.867C37.6671 131.996 19.8693 120.307 7.91016 99.7988C3.50823 91.5008 0.827561 82.7118 -0.131836 73.4316C-0.131836 69.3888 -0.131836 65.3456 -0.131836 61.3027C2.73889 37.6664 14.4283 19.8686 34.9365 7.90918C43.2345 3.50726 52.0235 0.826584 61.3037 -0.132812ZM100.327 37.8359C101.358 37.7734 102.325 37.9931 103.228 38.4951C104.941 40.209 106.655 41.9229 108.369 43.6367C108.777 44.3502 109.085 45.0975 109.292 45.8779C109.085 46.6584 108.777 47.4056 108.369 48.1191C92.3292 64.1591 76.289 80.1993 60.249 96.2393C58.8429 97.1181 57.4364 97.1181 56.0303 96.2393C45.8715 86.1686 35.808 76.0172 25.8398 65.7852C25.3836 64.7194 25.4715 63.6647 26.1035 62.6211C27.9933 60.7314 29.8827 58.8419 31.7725 56.9521C32.8066 56.3386 33.8613 56.2508 34.9365 56.6885C42.5756 64.0639 50.1343 71.5345 57.6123 79.1006C57.876 79.2765 58.1396 79.2765 58.4033 79.1006C71.8506 65.6533 85.2979 52.2061 98.7451 38.7588C99.2545 38.3741 99.7819 38.0667 100.327 37.8359Z" fill="#00B45E"/>
+</svg>