diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItem.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItem.js
index fd57803c96..55015125a2 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItem.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItem.js
@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { Box, Text } from "asc-web-components";
 import ConsumerToggle from "./consumerToggle";
 
@@ -29,7 +30,6 @@ class ConsumerItem extends React.Component {
             </Box>
             <Box onClick={setConsumer} data-consumer={consumer.name}>
               <ConsumerToggle
-                consumers={consumers}
                 consumer={consumer}
                 onModalOpen={onModalOpen}
                 sendConsumerNewProps={sendConsumerNewProps}
@@ -46,3 +46,11 @@ class ConsumerItem extends React.Component {
 }
 
 export default ConsumerItem;
+
+ConsumerItem.propTypes = {
+  consumer: PropTypes.object.isRequired,
+  consumers: PropTypes.array.isRequired,
+  onModalOpen: PropTypes.func.isRequired,
+  setConsumer: PropTypes.func.isRequired,
+  sendConsumerNewProps: PropTypes.func.isRequired
+}
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerModalDialog.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerModalDialog.js
index edfab49df7..c221d2c174 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerModalDialog.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerModalDialog.js
@@ -1,181 +1,194 @@
 import React from "react";
+import PropTypes from "prop-types";
 import {
-  ModalDialog,
-  Text,
-  Button,
-  TextInput,
-  Box,
-  Link,
-  toastr,
+    ModalDialog,
+    Text,
+    Button,
+    TextInput,
+    Box,
+    Link,
+    toastr,
 } from "asc-web-components";
 import ModalDialogContainer from "./modalDialogContainer";
 import { Trans } from "react-i18next";
 
 class ConsumerModalDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  mapTokenNameToState = () => {
-    const { consumers, selectedConsumer } = this.props;
-    consumers
-      .find((consumer) => consumer.name === selectedConsumer)
-      .props.map((p) =>
-        this.setState({
-          [`${p.name}`]: p.value,
-        })
-      );
-  };
-
-  onChangeHandler = (e) => {
-    this.setState({
-      [e.target.name]: e.target.value,
-    });
-  };
-
-  updateConsumerValues = () => {
-    this.props.onChangeLoading(true);
-
-    const prop = [];
-
-    let i = 0;
-    let stateLength = Object.keys(this.state).length;
-    for (i = 0; i < stateLength; i++) {
-      prop.push({
-        name: Object.keys(this.state)[i],
-        value: Object.values(this.state)[i],
-      });
+    constructor(props) {
+        super(props);
+        this.state = {};
     }
-    const data = {
-      name: this.props.selectedConsumer,
-      props: prop,
+
+    mapTokenNameToState = () => {
+        const { consumers, selectedConsumer } = this.props;
+        consumers
+            .find((consumer) => consumer.name === selectedConsumer)
+            .props.map((p) =>
+                this.setState({
+                    [`${p.name}`]: p.value,
+                })
+            );
     };
-    this.props
-      .sendConsumerNewProps(data)
-      .then(() => {
-        this.props.onChangeLoading(false);
-        toastr.success("Consumer properties successfully update");
-      })
-      .catch((error) => {
-        this.props.onChangeLoading(false);
-        toastr.error(error);
-      })
-      .finally(this.props.onModalClose());
-  };
 
-  componentDidMount() {
-    this.mapTokenNameToState();
-  }
-
-  render() {
-    const {
-      consumers,
-      selectedConsumer,
-      onModalClose,
-      dialogVisible,
-      isLoading,
-      t,
-      i18n,
-    } = this.props;
-    const { onChangeHandler } = this;
-
-    const bodyDescription = (
-      <Box marginProp="44px 0 16px 0">
-        <Box marginProp="0 0 16px 0">
-          <Text isBold={true} fontSize="15px">
-            {t("ThirdPartyHowItWorks")}
-          </Text>
-        </Box>
-        <Text>{t("ThirdPartyBodyDescription")}</Text>
-      </Box>
-    );
-
-    const bottomDescription = (
-      <Trans i18nKey="ThirdPartyBottomDescription" i18n={i18n}>
-        If you still have some questions on how to connect this service or need
-        technical assistance, please feel free to contact our{" "}
-        <Link
-          color="#316DAA"
-          isHovered={false}
-          target="_blank"
-          href={"http://support.onlyoffice.com/"}
-        >
-          Support Team
-        </Link>
-      </Trans>
-    );
-
-    const getConsumerName = () => {
-      return consumers.find((consumer) => consumer.name === selectedConsumer)
-        .name;
+    onChangeHandler = (e) => {
+        this.setState({
+            [e.target.name]: e.target.value,
+        });
     };
-    const getInnerDescription = () => {
-      return consumers.find((consumer) => consumer.name === selectedConsumer)
-        .instruction;
+
+    updateConsumerValues = () => {
+        this.props.onChangeLoading(true);
+
+        const prop = [];
+
+        let i = 0;
+        let stateLength = Object.keys(this.state).length;
+        for (i = 0; i < stateLength; i++) {
+            prop.push({
+                name: Object.keys(this.state)[i],
+                value: Object.values(this.state)[i],
+            });
+        }
+        const data = {
+            name: this.props.selectedConsumer,
+            props: prop,
+        };
+        this.props
+            .sendConsumerNewProps(data)
+            .then(() => {
+                this.props.onChangeLoading(false);
+                toastr.success("Consumer properties successfully update");
+            })
+            .catch((error) => {
+                this.props.onChangeLoading(false);
+                toastr.error(error);
+            })
+            .finally(this.props.onModalClose());
     };
-    const getInputFields = () => {
-      return consumers
-        .find((consumer) => consumer.name === selectedConsumer)
-        .props.map((prop, i) => (
-          <React.Fragment key={i}>
-            <Box
-              displayProp="flex"
-              flexDirection="column"
-              marginProp="0 0 16px 0"
-            >
-              <Box marginProp="0 0 4px 0">
-                <Text isBold={true}>{prop.title}:</Text>
-              </Box>
-              <Box>
-                <TextInput
-                  scale
-                  name={prop.name}
-                  placeholder={prop.title}
-                  isAutoFocussed={i === 0 && true}
-                  tabIndex={1}
-                  value={Object.values(this.state)[i]}
-                  isDisabled={isLoading}
-                  onChange={onChangeHandler}
-                />
-              </Box>
+
+    componentDidMount() {
+        this.mapTokenNameToState();
+    }
+
+    render() {
+        const {
+            consumers,
+            selectedConsumer,
+            onModalClose,
+            dialogVisible,
+            isLoading,
+            t,
+            i18n,
+        } = this.props;
+        const { onChangeHandler } = this;
+
+        const bodyDescription = (
+            <Box marginProp="44px 0 16px 0">
+                <Box marginProp="0 0 16px 0">
+                    <Text isBold={true} fontSize="15px">
+                        {t("ThirdPartyHowItWorks")}
+                    </Text>
+                </Box>
+                <Text>{t("ThirdPartyBodyDescription")}</Text>
             </Box>
-          </React.Fragment>
-        ));
-    };
+        );
 
-    return (
-      <ModalDialogContainer>
-        <ModalDialog
-          visible={dialogVisible}
-          headerContent={`${getConsumerName()}`}
-          bodyContent={[
-            <Text>{getInnerDescription()}</Text>,
-            <Text>{bodyDescription}</Text>,
-            <React.Fragment>{getInputFields()}</React.Fragment>,
-            <Text>{bottomDescription}</Text>,
-          ]}
-          footerContent={[
-            <Button
-              className="modal-dialog-button"
-              primary
-              size="big"
-              label={
-                isLoading
-                  ? t("ThirdPartyProcessSending")
-                  : t("ThirdPartyEnableButton")
-              }
-              tabIndex={1}
-              isLoading={isLoading}
-              isDisabled={isLoading}
-              onClick={this.updateConsumerValues}
-            />,
-          ]}
-          onClose={onModalClose}
-        />
-      </ModalDialogContainer>
-    );
-  }
+        const bottomDescription = (
+            <Trans i18nKey="ThirdPartyBottomDescription" i18n={i18n}>
+                If you still have some questions on how to connect this service or need
+        technical assistance, please feel free to contact our{" "}
+                <Link
+                    color="#316DAA"
+                    isHovered={false}
+                    target="_blank"
+                    href={"http://support.onlyoffice.com/"}
+                >
+                    Support Team
+        </Link>
+            </Trans>
+        );
+
+        const getConsumerName = () => {
+            return consumers.find((consumer) => consumer.name === selectedConsumer)
+                .name;
+        };
+        const getInnerDescription = () => {
+            return consumers.find((consumer) => consumer.name === selectedConsumer)
+                .instruction;
+        };
+        const getInputFields = () => {
+            return consumers
+                .find((consumer) => consumer.name === selectedConsumer)
+                .props.map((prop, i) => (
+                    <React.Fragment key={i}>
+                        <Box
+                            displayProp="flex"
+                            flexDirection="column"
+                            marginProp="0 0 16px 0"
+                        >
+                            <Box marginProp="0 0 4px 0">
+                                <Text isBold={true}>{prop.title}:</Text>
+                            </Box>
+                            <Box>
+                                <TextInput
+                                    scale
+                                    name={prop.name}
+                                    placeholder={prop.title}
+                                    isAutoFocussed={i === 0 && true}
+                                    tabIndex={1}
+                                    value={Object.values(this.state)[i]}
+                                    isDisabled={isLoading}
+                                    onChange={onChangeHandler}
+                                />
+                            </Box>
+                        </Box>
+                    </React.Fragment>
+                ));
+        };
+
+        return (
+            <ModalDialogContainer>
+                <ModalDialog
+                    visible={dialogVisible}
+                    headerContent={`${getConsumerName()}`}
+                    bodyContent={[
+                        <Text>{getInnerDescription()}</Text>,
+                        <Text>{bodyDescription}</Text>,
+                        <React.Fragment>{getInputFields()}</React.Fragment>,
+                        <Text>{bottomDescription}</Text>,
+                    ]}
+                    footerContent={[
+                        <Button
+                            className="modal-dialog-button"
+                            primary
+                            size="big"
+                            label={
+                                isLoading
+                                    ? t("ThirdPartyProcessSending")
+                                    : t("ThirdPartyEnableButton")
+                            }
+                            tabIndex={1}
+                            isLoading={isLoading}
+                            isDisabled={isLoading}
+                            onClick={this.updateConsumerValues}
+                        />,
+                    ]}
+                    onClose={onModalClose}
+                />
+            </ModalDialogContainer>
+        );
+    }
 }
 
 export default ConsumerModalDialog;
+
+ConsumerModalDialog.propTypes = {
+    t: PropTypes.func.isRequired,
+    i18n: PropTypes.object.isRequired,
+    consumers: PropTypes.array.isRequired,
+    selectedConsumer: PropTypes.string,
+    onModalClose: PropTypes.func.isRequired,
+    dialogVisible: PropTypes.bool.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    onChangeLoading: PropTypes.func.isRequired,
+    sendConsumerNewProps: PropTypes.func.isRequired
+}
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js
index b825551db6..34df698a8f 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js
@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { ToggleButton, toastr } from "asc-web-components";
 import styled from "styled-components";
 
@@ -72,3 +73,9 @@ class ConsumerToggle extends React.Component {
 }
 
 export default ConsumerToggle;
+
+ConsumerToggle.propTypes = {
+  consumer: PropTypes.object.isRequired,
+  onModalOpen: PropTypes.func.isRequired,
+  sendConsumerNewProps: PropTypes.func.isRequired
+}
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js
index 75d865fd50..c75b26b153 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js
@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import {
   getConsumers,
@@ -84,17 +85,6 @@ class ThirdPartyServices extends React.Component {
     });
   };
 
-  onModalButtonClick = () => {
-    //TODO: api -> set tokens,
-    //this.onModalClose();
-    //this.setState({ toggleActive: true });
-    console.log(this.state.selectedConsumer);
-  };
-
-  // onToggleClick = () => {
-  //     this.onModalOpen();
-  // }
-
   setConsumer = (e) => {
     this.setState({
       selectedConsumer: e.currentTarget.dataset.consumer,
@@ -102,14 +92,13 @@ class ThirdPartyServices extends React.Component {
   };
 
   render() {
-    const { t, consumers, sendConsumerNewProps } = this.props;
+    const { t, i18n, consumers, sendConsumerNewProps } = this.props;
     const { selectedConsumer, dialogVisible, isLoading } = this.state;
     const {
       onModalClose,
       onModalOpen,
       onToggleClick,
       setConsumer,
-      onModalButtonClick,
       onChangeLoading,
     } = this;
 
@@ -169,13 +158,12 @@ class ThirdPartyServices extends React.Component {
         {dialogVisible && (
           <ConsumerModalDialog
             t={t}
-            i18n={this.props.i18n}
+            i18n={i18n}
             dialogVisible={dialogVisible}
             consumers={consumers}
             selectedConsumer={selectedConsumer}
             isLoading={isLoading}
             onModalClose={onModalClose}
-            onModalButtonClick={onModalButtonClick}
             onChangeLoading={onChangeLoading}
             sendConsumerNewProps={sendConsumerNewProps}
           />
@@ -185,6 +173,13 @@ class ThirdPartyServices extends React.Component {
   }
 }
 
+ThirdPartyServices.propTypes = {
+  t: PropTypes.func.isRequired,
+  i18n: PropTypes.object.isRequired,
+  consumers: PropTypes.array.isRequired,
+  sendConsumerNewProps: PropTypes.func.isRequired,
+}
+
 const mapStateToProps = (state) => {
   const { consumers } = state.settings.integration;
   return { consumers };