feat: add showMessengerInfo modal

src/locales/en/en.json

@@ -157,6 +157,13 @@
     "from": "From",
     "to": "To"
   },
+  "messengersInfo": {
+    "title": "How does this work?",
+    "dataCollection": "Data is collected if:",
+    "accessibilityEnabled": " - Accessibilities are ENABLED.",
+    "userOpensApp": " - The user (child) opens a specific chat in the messenger, since the data is processed upon opening.",
+    "loadMore": "Sometimes the chat is too long, all messages and chats may not fit into one request, so use the \"Load more\" button to get more."
+  },
   "usageLimits": {
     "title": "Phone usage time limits",
     "desc": "Set a daily phone usage limit.",

src/locales/ru/ru.json

@@ -157,6 +157,13 @@
     "from": "От",
     "to": "Кому"
   },
+  "messengersInfo": {
+    "title": "Как это работает?",
+    "dataCollection": "Данные собираются, если:",
+    "accessibilityEnabled": " - Специальные возможности ВКЛЮЧЕНЫ",
+    "userOpensApp": " - Пользователь (ребенок) открывает опеределённый чат в мессенджере, поскольку данные обрабатываются при открытии.",
+    "loadMore": "Иногда, если чат слишком длинный, все сообщения и чаты могут не поместиться в один запрос, поэтому используйте кнопку \"Загрузить ещё\", чтобы получить больше."
+  },
   "usageLimits": {
     "title": "Ограничения времени использования телефона",
     "desc": "Установите дневное ограничение на использование телефона.",

src/locales/uz/uz.json

@@ -157,6 +157,13 @@
     "from": "Kimdan",
     "to": "Kimga"
   },
+  "messengersInfo": {
+    "title": "Qanday ishlaydi?",
+    "dataCollection": "Ma'lumotlar yig'iladi, agar:",
+    "accessibilityEnabled": " - Maxsus imkoniyatlar holati YOQILGAN.",
+    "userOpensApp": " - Foydalanuvchi (bola) messenjerda ma'lum bir suhbatni ochadi, chunki ochilganda ma'lumotlar qayta ishlanadi.",
+    "loadMore": "Ba'zan, agar suhbat juda uzun bo'lsa, barcha xabarlar va chatlar bitta so'rovga to'g'ri kelmasligi mumkin, shuning uchun ko'proq ma'lumot olish uchun \"Ko'proq yuklash\" tugmasidan foydalaning."
+  },
   "usageLimits": {
     "title": "Telefon foydalanish vaqti chegaralari",
     "desc": "Kunlik telefon foydalanish cheklovini o'rnating.",

src/pages/Messengers/Messengers.css

@@ -87,4 +87,8 @@
     border-radius: 10px;
     background: var(--content-bg-color);
     cursor: pointer;
+}
+
+.messengers__info__text {
+    margin-bottom: 0.5rem;
 }
\ No newline at end of file

src/pages/Messengers/Messengers.tsx

@@ -12,8 +12,10 @@ import {
 } from "../../stores/store";
 import { fetchMessengerHistory } from "../../stores/slices/messengerHistorySlice";
 import CLoading from "../../components/CLoading";
+import CModal from "../../components/CModal";
 
 const Messengers: React.FC = () => {
+  const [showMessangerInfo, setShowMessangerInfo] = useState(false);
   const today = new Date().toISOString().split("T")[0];
   const [fromDate, setFromDate] = useState(today);
   const [toDate, setToDate] = useState(today);
@@ -27,6 +29,10 @@ const Messengers: React.FC = () => {
   );
   const dispatch = useAppDispatch();
 
+  const toggleShowMessangerInfo = () => {
+    setShowMessangerInfo((prev) => !prev)
+  }
+
   const fetchMessengerHistories = () => {
     if (selectedDevice?.id) {
       const from = new Date(fromDate);
@@ -71,7 +77,7 @@ const Messengers: React.FC = () => {
         <div>
           <div className="messengers__content__header">
             <h3>{t("messengers.title")}</h3>
-            <MdInfoOutline className="messengers__content__header__icon" />
+            <MdInfoOutline className="messengers__content__header__icon" onClick={toggleShowMessangerInfo} />
           </div>
 
           {loading && (
@@ -146,6 +152,28 @@ const Messengers: React.FC = () => {
             isLoading={loading}
             onClick={fetchMessengerHistories}
           />
+
+          <CModal
+            isOpen = {showMessangerInfo}
+            onToggle = {toggleShowMessangerInfo}
+            content = {
+              <div className="modal__box">
+                <h3>{t("messengersInfo.title")}</h3>
+                <div>
+                  <p className="messengers__info__text">{t("messengersInfo.dataCollection")}</p>
+                  <p className="messengers__info__text">{t("messengersInfo.accessibilityEnabled")}</p>
+                  <p className="messengers__info__text">{t("messengersInfo.userOpensApp")}</p>
+                  <p className="messengers__info__text">{t("messengersInfo.loadMore")}</p>
+                </div>
+                <div className="modal__box__actions">
+                  <CButton
+                  title={t("button.ok")}
+                  onClick={toggleShowMessangerInfo}
+                  />
+                </div>
+              </div>
+            }
+          />
         </div>
       </div>
     </div>