Commit 1a0770e6 by Akbar

feat: add showMessengerInfo modal

parent d33f7701
...@@ -157,6 +157,13 @@ ...@@ -157,6 +157,13 @@
"from": "From", "from": "From",
"to": "To" "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": { "usageLimits": {
"title": "Phone usage time limits", "title": "Phone usage time limits",
"desc": "Set a daily phone usage limit.", "desc": "Set a daily phone usage limit.",
......
...@@ -157,6 +157,13 @@ ...@@ -157,6 +157,13 @@
"from": "От", "from": "От",
"to": "Кому" "to": "Кому"
}, },
"messengersInfo": {
"title": "Как это работает?",
"dataCollection": "Данные собираются, если:",
"accessibilityEnabled": " - Специальные возможности ВКЛЮЧЕНЫ",
"userOpensApp": " - Пользователь (ребенок) открывает опеределённый чат в мессенджере, поскольку данные обрабатываются при открытии.",
"loadMore": "Иногда, если чат слишком длинный, все сообщения и чаты могут не поместиться в один запрос, поэтому используйте кнопку \"Загрузить ещё\", чтобы получить больше."
},
"usageLimits": { "usageLimits": {
"title": "Ограничения времени использования телефона", "title": "Ограничения времени использования телефона",
"desc": "Установите дневное ограничение на использование телефона.", "desc": "Установите дневное ограничение на использование телефона.",
......
...@@ -157,6 +157,13 @@ ...@@ -157,6 +157,13 @@
"from": "Kimdan", "from": "Kimdan",
"to": "Kimga" "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": { "usageLimits": {
"title": "Telefon foydalanish vaqti chegaralari", "title": "Telefon foydalanish vaqti chegaralari",
"desc": "Kunlik telefon foydalanish cheklovini o'rnating.", "desc": "Kunlik telefon foydalanish cheklovini o'rnating.",
......
...@@ -87,4 +87,8 @@ ...@@ -87,4 +87,8 @@
border-radius: 10px; border-radius: 10px;
background: var(--content-bg-color); background: var(--content-bg-color);
cursor: pointer; cursor: pointer;
}
.messengers__info__text {
margin-bottom: 0.5rem;
} }
\ No newline at end of file
...@@ -12,8 +12,10 @@ import { ...@@ -12,8 +12,10 @@ import {
} from "../../stores/store"; } from "../../stores/store";
import { fetchMessengerHistory } from "../../stores/slices/messengerHistorySlice"; import { fetchMessengerHistory } from "../../stores/slices/messengerHistorySlice";
import CLoading from "../../components/CLoading"; import CLoading from "../../components/CLoading";
import CModal from "../../components/CModal";
const Messengers: React.FC = () => { const Messengers: React.FC = () => {
const [showMessangerInfo, setShowMessangerInfo] = useState(false);
const today = new Date().toISOString().split("T")[0]; const today = new Date().toISOString().split("T")[0];
const [fromDate, setFromDate] = useState(today); const [fromDate, setFromDate] = useState(today);
const [toDate, setToDate] = useState(today); const [toDate, setToDate] = useState(today);
...@@ -27,6 +29,10 @@ const Messengers: React.FC = () => { ...@@ -27,6 +29,10 @@ const Messengers: React.FC = () => {
); );
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const toggleShowMessangerInfo = () => {
setShowMessangerInfo((prev) => !prev)
}
const fetchMessengerHistories = () => { const fetchMessengerHistories = () => {
if (selectedDevice?.id) { if (selectedDevice?.id) {
const from = new Date(fromDate); const from = new Date(fromDate);
...@@ -71,7 +77,7 @@ const Messengers: React.FC = () => { ...@@ -71,7 +77,7 @@ const Messengers: React.FC = () => {
<div> <div>
<div className="messengers__content__header"> <div className="messengers__content__header">
<h3>{t("messengers.title")}</h3> <h3>{t("messengers.title")}</h3>
<MdInfoOutline className="messengers__content__header__icon" /> <MdInfoOutline className="messengers__content__header__icon" onClick={toggleShowMessangerInfo} />
</div> </div>
{loading && ( {loading && (
...@@ -146,6 +152,28 @@ const Messengers: React.FC = () => { ...@@ -146,6 +152,28 @@ const Messengers: React.FC = () => {
isLoading={loading} isLoading={loading}
onClick={fetchMessengerHistories} 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> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment