feat: add info modal

src/layouts/Header/Header.tsx

@@ -26,9 +26,12 @@ import {
 import CDeviceSelect from "../../components/CDeviceSelect";
 import { logout } from "../../stores/slices/authSlice";
 import TheCybernanny from "../../assets/images/TheCybernanny.png";
+import CButton from "../../components/CButton";
+import CModal from "../../components/CModal";
 
 const Header: React.FC = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [isOpenInfoModal, setIsOpenInfoModal] = useState(false);
   const sidebarRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -53,6 +56,20 @@ const Header: React.FC = () => {
     }
   };
 
+  const toggleInfoModal = () => {
+    setIsOpenInfoModal((prev) => !prev);
+  };
+
+  const share = () => {
+    const message = "https://t.me/CyberNannyAppBot";
+
+    if (window.Telegram?.WebApp?.openTelegramLink) {
+      window.Telegram.WebApp.openTelegramLink(
+        `https://t.me/share/url?url=${encodeURIComponent(message)}`
+      );
+    }
+  };
+
   useEffect(() => {
     if (isSidebarOpen) {
       document.addEventListener("mousedown", handleOutsideClick);
@@ -87,15 +104,23 @@ const Header: React.FC = () => {
         </div>
 
         <div className="header__devices">
-          <CDeviceSelect
-            devices={devices}
-            selectedDevice={selectedDevice}
-            onDeviceChange={(name) => dispatch(setSelectedDevice(name))}
-            disabled={!devices.length}
-            style={{ width: "220px" }}
-            className="header__device-select"
-            placeholder={t("common.selectDevice")}
-          />
+          {devices.length > 0 ? (
+            <CDeviceSelect
+              devices={devices}
+              selectedDevice={selectedDevice}
+              onDeviceChange={(name) => dispatch(setSelectedDevice(name))}
+              disabled={!devices.length}
+              style={{ width: "220px" }}
+              className="header__device-select"
+              placeholder={t("common.selectDevice")}
+            />
+          ) : (
+            <CButton
+              title={t("help.howToStart")}
+              onClick={toggleInfoModal}
+              variant="primary"
+            />
+          )}
         </div>
       </div>
 
@@ -181,6 +206,63 @@ const Header: React.FC = () => {
           </div>
         </div>
       )}
+
+      <CModal
+        isOpen={isOpenInfoModal}
+        onToggle={toggleInfoModal}
+        content={
+          <div className="modal__box">
+            <h3 className="modal__box__title">{t("help.howToStart")}</h3>
+            <div>
+              <h4>{t("help.parentPhone")}</h4>
+              <p>{t("help.parentPhoneDesc1")}</p>
+              <p>{t("help.parentPhoneDesc2")}</p>
+              <p>{t("help.parentPhoneDesc3")}</p>
+            </div>
+
+            <div>
+              <h4>{t("help.childPhone")}</h4>
+              <p>{t("help.childPhoneDesc1")}</p>
+              <p>{t("help.childPhoneDesc2")}</p>
+              <p>{t("help.childPhoneDesc3")}</p>
+            </div>
+
+            <br />
+
+            <p>{t("help.howToStartDesc")}</p>
+
+            <a
+              href="https://apps.apple.com/uz/app/%D0%BA%D0%B8%D0%B1%D0%B5%D1%80%D0%BD%D1%8F%D0%BD%D1%8F/id6740760058"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {t("common.downloadForIos")}
+            </a>
+
+            <a
+              href="https://play.google.com/store/apps/details?id=com.thecybernanny.adroapp"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {t("common.downloadForAndroid")}
+            </a>
+
+            <div className="modal__box__actions">
+              <CButton
+                title={t("button.share")}
+                variant="primary"
+                onClick={share}
+              />
+
+              <CButton
+                title={t("button.ok")}
+                onClick={toggleInfoModal}
+                variant="primary"
+              />
+            </div>
+          </div>
+        }
+      />
     </>
   );
 };

src/locales/en/en.json

@@ -14,7 +14,9 @@
     "password": "Password",
     "passwordPlaceholder": "Enter your password",
     "selectDevice": "Select Device",
-    "noData": "No data found"
+    "noData": "No data found",
+    "downloadForAndroid": "Download for Android",
+    "downloadForIos": "Download for iOS"
   },
   "auth": {
     "entrance": "Sign In",
@@ -160,6 +162,18 @@
     "title": "Logout",
     "desc": "Are you sure you want to continue?"
   },
+  "help": {
+    "howToStart": "Как начать?",
+    "howToStartDesc": "* Вы можете использовать один аккаунт на нескольких устройствах",
+    "parentPhone": "Телефон родителя",
+    "parentPhoneDesc1": "• Скачайте и установите приложение на телефон родителя",
+    "parentPhoneDesc2": "• Создайте один аккаунт на всю семью",
+    "parentPhoneDesc3": "• Выберите режим Родитель",
+    "childPhone": "Телефон ребенка",
+    "childPhoneDesc1": "• Скачайте и установите приложение на телефон ребенка",
+    "childPhoneDesc2": "• Войдите под Вашим аккаунтом",
+    "childPhoneDesc3": "• Выберите режим Ребенок"
+  },
   "button": {
     "login": "Login",
     "register": "Register",
@@ -171,7 +185,8 @@
     "delete": "Delete",
     "search": "Search",
     "save": "Save",
-    "confirm": "Confirm"
+    "confirm": "Confirm",
+    "share": "Share"
   },
   "notFound": {
     "code": "404",

src/locales/ru/ru.json

@@ -14,7 +14,9 @@
     "password": "Пароль",
     "passwordPlaceholder": "Введите ваш пароль",
     "selectDevice": "Выбрать устройство",
-    "noData": "Данные не найдены"
+    "noData": "Данные не найдены",
+    "downloadForAndroid": "Скачать для Android",
+    "downloadForIos": "Скачать для iOS"
   },
   "auth": {
     "entrance": "Вход",
@@ -160,6 +162,18 @@
     "title": "Выйти",
     "desc": "Вы уверены, что хотите продолжить?"
   },
+  "help": {
+    "howToStart": "Как начать?",
+    "howToStartDesc": "* Вы можете использовать один аккаунт на нескольких устройствах",
+    "parentPhone": "Телефон родителя",
+    "parentPhoneDesc1": "• Скачайте и установите приложение на телефон родителя",
+    "parentPhoneDesc2": "• Создайте один аккаунт на всю семью",
+    "parentPhoneDesc3": "• Выберите режим Родитель",
+    "childPhone": "Телефон ребенка",
+    "childPhoneDesc1": "• Скачайте и установите приложение на телефон ребенка",
+    "childPhoneDesc2": "• Войдите под Вашим аккаунтом",
+    "childPhoneDesc3": "• Выберите режим Ребенок"
+  },
   "button": {
     "login": "Войти",
     "register": "Зарегистрироваться",
@@ -171,7 +185,9 @@
     "delete": "Удалить",
     "search": "Поиск",
     "save": "Сохранить",
-    "confirm": "Подтвердить"
+    "confirm": "Подтвердить",
+    "ok": "Ок",
+    "share": "Поделиться"
   },
   "notFound": {
     "code": "404",