add telegram token(bot) in PartnerSettings

src/assets/icons/tgSettingsIcon.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12.5C0 5.87258 5.37258 0.5 12 0.5H28C34.6274 0.5 40 5.87258 40 12.5V28.5C40 35.1274 34.6274 40.5 28 40.5H12C5.37258 40.5 0 35.1274 0 28.5V12.5Z" fill="#F0F4FA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4809 14.1916C26.6868 14.105 26.9122 14.0751 27.1336 14.1051C27.355 14.1351 27.5643 14.2239 27.7398 14.3622C27.9152 14.5006 28.0504 14.6834 28.1312 14.8917C28.212 15.1 28.2355 15.3262 28.1992 15.5466L26.3092 27.0108C26.1259 28.1166 24.9125 28.7508 23.8984 28.2C23.05 27.7391 21.79 27.0291 20.6567 26.2883C20.09 25.9175 18.3542 24.73 18.5675 23.885C18.7509 23.1625 21.6675 20.4475 23.3342 18.8333C23.9884 18.1991 23.69 17.8333 22.9175 18.4166C20.9984 19.865 17.9192 22.0675 16.9009 22.6875C16.0025 23.2341 15.5342 23.3275 14.9742 23.2341C13.9525 23.0641 13.005 22.8008 12.2317 22.48C11.1867 22.0466 11.2375 20.61 12.2309 20.1916L26.4809 14.1916Z" fill="#7992B2"/>
+</svg>

src/pages/PartnerSettings/PartnerSettings.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { apiRequest } from "@api/request";
 
@@ -11,6 +11,7 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
+import tgSettingsIcon from "assets/icons/tgSettingsIcon.svg";
 import astral from "assets/images/logo/astralLogo.png";
 import kontur from "assets/images/logo/konturLogo.png";
 
@@ -18,6 +19,7 @@ import "./partnerSettings.scss";
 
 export const PartnerSettings = () => {
   const { showNotification } = useNotification();
+  const [tgToken, setTgToken] = useState();
   const [inputsValue, setInputsValue] = useState({
     name: "",
     oldPassword: "",
@@ -30,6 +32,15 @@ export const PartnerSettings = () => {
   });
 
   const [loader, setLoader] = useState(false);
+  const [tgLoader, setTgLoader] = useState(false);
+
+  useEffect(() => {
+    apiRequest("/user-tg-bot/get-token", {
+      method: "GET"
+    }).then((data) => {
+      setTgToken(data.token);
+    });
+  }, []);
 
   const setSettings = () => {
     if (inputsValue.name.length < 2) {
@@ -80,6 +91,24 @@ export const PartnerSettings = () => {
       });
     });
   };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(tgToken);
+      showNotification({
+        show: true,
+        text: "Телеграм токен успешно скопирован",
+        type: "success"
+      });
+    } catch (err) {
+      showNotification({
+        show: true,
+        text: "Ошибка копирования",
+        type: "error"
+      });
+    }
+  };
+
   return (
     <div className="settings">
       <ProfileHeader />
@@ -183,6 +212,34 @@ export const PartnerSettings = () => {
                 использования персональных данных
               </span>
             </div>
+
+            <div className="partner-settings__report">
+              <h3 className="settings__title">Телеграмм бот</h3>
+
+              <p className="settings__label">Тelegram токен</p>
+              <div className="settings__input">
+                <span>{tgToken}</span>
+              </div>
+
+              <div className="settings__buttons">
+                {tgLoader ? (
+                  <Loader style={"green"} width={"40px"} height={"40px"} />
+                ) : (
+                  <BaseButton
+                    onClick={handleCopy}
+                    styles={"settings__buttons-save"}
+                  >
+                    Скопировать
+                  </BaseButton>
+                )}
+              </div>
+              <div className="settings__agreement-tg">
+                <a href="#" target="_blank" rel="noopener noreferrer">
+                  <img src={tgSettingsIcon} alt="" />
+                </a>
+                Ссылка на телеграм бот с инструкцией
+              </div>
+            </div>
             {/* <div className="partner-settings__report">
               <h3 className="settings__title">Документы и отчеты</h3>
               <p className="settings__label">Изменить провадера ЭДО</p>

src/pages/PartnerSettings/partnerSettings.scss

@@ -29,13 +29,14 @@
     font-size: 15px;
     line-height: 18px;
     color: #000000;
-    margin: 15px 0 10px 0;
+    margin: 30px 0 10px 0;
   }
 
   &__input {
     display: flex;
     flex-direction: column;
     row-gap: 5px;
+
     input {
       padding: 5px 10px;
       background: #eff2f7;
@@ -46,6 +47,16 @@
       outline: none;
     }
 
+    span {
+      padding: 5px 10px;
+      background: #eff2f7;
+      border-radius: 8px;
+      height: 35px;
+      border: none;
+      font-size: 15px;
+      outline: none;
+    }
+
     .error {
       color: red;
       font-size: 12px;
@@ -65,6 +76,18 @@
     line-height: 18px;
     color: #000000;
     font-weight: 300;
+
+    &-tg {
+      font-size: 15px;
+      font-weight: 400;
+      line-height: 18px;
+
+      img {
+        width: 40px;
+        height: 40px;
+        margin-right: 20px;
+      }
+    }
   }
 
   &__buttons {
@@ -140,6 +163,8 @@
     display: flex;
     flex-direction: row;
     margin-top: 50px;
+    column-gap: 40px;
+    justify-content: center;
   }
 
   &__report,