From 98bf92466ba8b144c47341a3a7888ef2df0556fc Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Fri, 6 Jun 2025 16:25:06 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B8=D0=BD=D1=84=D0=BE=20=D0=BE=D1=82=D0=BA?=
 =?UTF-8?q?=D1=80=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B8=20=D0=BD=D0=B0=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../GenderAndAgeSelector.tsx                  | 56 ++++++-----------
 src/pages/PersonalizationAI/GenderButton.tsx  | 61 -------------------
 .../PersonalizationAI/PersonalizationAI.tsx   | 28 ++++-----
 src/ui_kit/Toolbars/TooltipClickInfo.tsx      |  8 +--
 4 files changed, 35 insertions(+), 118 deletions(-)
 delete mode 100644 src/pages/PersonalizationAI/GenderButton.tsx

diff --git a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
index f344038f..504f5091 100644
--- a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
+++ b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
@@ -1,4 +1,4 @@
-import { Box, FormControl, FormLabel, FormGroup, FormControlLabel, Checkbox, Select, MenuItem, useTheme, Button, useMediaQuery, IconButton } from "@mui/material";
+import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button, useMediaQuery, IconButton } from "@mui/material";
 import { InfoPopover } from '@ui_kit/InfoPopover';
 import CheckboxIcon from "@icons/Checkbox";
 import { useState } from "react";
@@ -15,7 +15,7 @@ interface GenderAndAgeSelectorProps {
 export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelectorProps) {
   const theme = useTheme();
   const [age, setAge] = useState<string>('');
-  const [gender, setGender] = useState<string[]>([]);
+  const [gender, setGender] = useState<string>('');
   const [selectOpen, setSelectOpen] = useState<boolean>(false);
   const quiz = useCurrentQuiz();
   const { enqueueSnackbar } = useSnackbar();
@@ -32,7 +32,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
       const [result, error] = await auditoryAdd({
         quizId: quiz.backendId,
         body: {
-          sex: gender.includes("male"),
+          sex: gender === "male",
           age
         }
       });
@@ -46,13 +46,13 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
         handleAdd({
           id: result.ID,
           quiz_id: quiz.backendId,
-          sex: gender.includes("male"),
+          sex: gender === "male",
           age,
           deleted: false,
         });
         enqueueSnackbar('Ссылка успешно добавлена', { variant: 'success' });
         // Очищаем форму
-        setGender([]);
+        setGender('');
         setAge('');
       }
     } catch (error) {
@@ -79,9 +79,9 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
                 mr: '3px',
               }}
               component="legend">Пол</FormLabel>
-            <InfoPopover />
+            {/* <InfoPopover /> */}
           </Box>
-          <FormGroup
+          <RadioGroup
             sx={{
               width: "155px",
               justifyContent: "space-between",
@@ -89,6 +89,10 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
               ml: "-9px"
             }}
             row
+            aria-label="gender"
+            name="row-radio-buttons-group"
+            value={gender}
+            onChange={(e) => setGender(e.target.value)}
           >
             <FormControlLabel
               sx={{
@@ -115,20 +119,8 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
                 },
                 m: 0,
               }}
-              control={
-                <Checkbox 
-                  checked={gender.includes('male')}
-                  onChange={(e) => {
-                    if (e.target.checked) {
-                      setGender([...gender, 'male']);
-                    } else {
-                      setGender(gender.filter(g => g !== 'male'));
-                    }
-                  }}
-                  icon={<CheckboxIcon />}
-                  checkedIcon={<CheckboxIcon checked />}
-                />
-              }
+              value="male"
+              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
               label="М"
             />
             <FormControlLabel
@@ -155,23 +147,11 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
                 },
                 m: 0,
               }}
-              control={
-                <Checkbox 
-                  checked={gender.includes('female')}
-                  onChange={(e) => {
-                    if (e.target.checked) {
-                      setGender([...gender, 'female']);
-                    } else {
-                      setGender(gender.filter(g => g !== 'female'));
-                    }
-                  }}
-                  icon={<CheckboxIcon />}
-                  checkedIcon={<CheckboxIcon checked />}
-                />
-              }
+              value="female"
+              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
               label="Ж"
             />
-          </FormGroup>
+          </RadioGroup>
         </FormControl>
 
         <FormControl sx={{ maxWidth: "420px", width: "100%", marginLeft: isMobile ? "0" : "120px", minWidth: "265px" }} variant="filled">
@@ -189,7 +169,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
                 color: '#4D4D4D',
               },
             }}>Возраст</FormLabel>
-            <InfoPopover />
+            {/* <InfoPopover /> */}
           </Box>
           <AgeInputWithSelect value={age} onChange={setAge} onErrorChange={setAgeError} />
         </FormControl>
@@ -198,7 +178,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
       <Button
         onClick={addItem}
         variant="contained"
-        disabled={gender.length === 0 || !age || ageError}
+        disabled={!gender || !age || ageError}
         sx={{
           bgcolor: theme.palette.brightPurple.main,
           borderRadius: "8px",
diff --git a/src/pages/PersonalizationAI/GenderButton.tsx b/src/pages/PersonalizationAI/GenderButton.tsx
deleted file mode 100644
index 7c3b8845..00000000
--- a/src/pages/PersonalizationAI/GenderButton.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import { Box, Typography, useTheme } from '@mui/material';
-import { useMediaQuery } from '@mui/material';
-import MaleIcon from '@mui/icons-material/Male';
-import FemaleIcon from '@mui/icons-material/Female';
-import PeopleIcon from '@mui/icons-material/People';
-
-interface GenderButtonProps {
-  selected: boolean;
-  onClick: () => void;
-  icon: 'male' | 'female' | 'both';
-  label: string;
-}
-
-export const GenderButton: React.FC<GenderButtonProps> = ({ selected, onClick, icon, label }) => {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-
-  const getIcon = () => {
-    switch (icon) {
-      case 'male':
-        return <MaleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
-      case 'female':
-        return <FemaleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
-      case 'both':
-        return <PeopleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <Box
-      onClick={onClick}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        padding: isMobile ? '8px 12px' : '10px 16px',
-        borderRadius: '8px',
-        cursor: 'pointer',
-        bgcolor: selected ? theme.palette.brightPurple.main : 'transparent',
-        border: `1px solid ${selected ? theme.palette.brightPurple.main : theme.palette.grey[300]}`,
-        '&:hover': {
-          bgcolor: selected ? theme.palette.brightPurple.main : theme.palette.grey[100],
-        },
-      }}
-    >
-      {getIcon()}
-      <Typography
-        sx={{
-          fontSize: isMobile ? '14px' : '16px',
-          fontWeight: 500,
-          color: selected ? theme.palette.common.white : theme.palette.text.primary,
-        }}
-      >
-        {label}
-      </Typography>
-    </Box>
-  );
-}; 
\ No newline at end of file
diff --git a/src/pages/PersonalizationAI/PersonalizationAI.tsx b/src/pages/PersonalizationAI/PersonalizationAI.tsx
index 05763f4e..e2e4f7e4 100644
--- a/src/pages/PersonalizationAI/PersonalizationAI.tsx
+++ b/src/pages/PersonalizationAI/PersonalizationAI.tsx
@@ -35,24 +35,24 @@ export default function PersonalizationAI() {
   const handleDelete = async () => {
     // 1. Закрываем модалку
     setDeleteModal(0);
-    
+
     // 2. Находим индекс объекта в стейте
     const indexToDelete = auditory.findIndex(item => item.id === deleteModal);
     if (indexToDelete === -1) return;
-    
+
     // 3. Сохраняем удаляемый объект
     const deletedItem = auditory[indexToDelete];
-    
+
     // 4. Меняем стейт, вырезая объект
     setAuditory(prev => prev.filter(item => item.id !== deleteModal));
-    
+
     try {
       // 5. Вызываем функцию удаления
-      const [result, error] = await auditoryDelete({ 
-        quizId: quiz?.backendId, 
-        auditoryId: deleteModal 
+      const [result, error] = await auditoryDelete({
+        quizId: quiz?.backendId,
+        auditoryId: deleteModal
       });
-      
+
       if (error) {
         // 6. Если удалить не удалось - показываем снекбар и возвращаем ссылку
         enqueueSnackbar('Не удалось удалить ссылку', { variant: 'error' });
@@ -73,7 +73,7 @@ export default function PersonalizationAI() {
     }
   }
 
-  const handleAdd = (item:AuditoryItem) => {
+  const handleAdd = (item: AuditoryItem) => {
     setAuditory(old => ([...old, item]))
   }
 
@@ -103,7 +103,7 @@ export default function PersonalizationAI() {
 
   return (
     <>
-      <Container id="PersonalizationAI" maxWidth={false} sx={{ minHeight: "100%", p: "20px", height: " calc(100vh - 80px)", overflow: "auto", pt: "55px"}}>
+      <Container id="PersonalizationAI" maxWidth={false} sx={{ minHeight: "100%", p: "20px", height: " calc(100vh - 80px)", overflow: "auto", pt: "55px" }}>
         <Typography variant="h5" color={theme.palette.grey3.main} fontWeight={700} sx={{ fontSize: 24, letterSpacing: "-0.2px" }}>
           Персонализация вопросов с помощью AI
         </Typography>
@@ -114,9 +114,7 @@ export default function PersonalizationAI() {
           wordSpacing: "0.1px",
           lineHeight: "21.4px"
         }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </Typography>
-
+          Данный раздел позволяет вам создавать персонализированный опрос под каждую целевую аудиторию отдельно, наш AI перефразирует ваши вопросы согласно настройкам. Для этого нужно выбрать пол и возраст вашей аудитории и получите персональную ссылку с нужными настройками в списке ниже. Так же вы можете обогатить свою ссылку UTM метками        </Typography>
         {/* Первый белый блок */}
         <Box sx={{
           bgcolor: "#fff",
@@ -185,8 +183,8 @@ export default function PersonalizationAI() {
             alignItems: "center"
           }}
         >
-          <Typography sx={{ width: "100%" ,textAlign: "center", mb: "25px"}}>Уверены, что хотите удалить ссылку?</Typography>
-          <Button sx={{mb: "20px"}} onClick={handleDelete}>Удалить</Button>
+          <Typography sx={{ width: "100%", textAlign: "center", mb: "25px" }}>Уверены, что хотите удалить ссылку?</Typography>
+          <Button sx={{ mb: "20px" }} onClick={handleDelete}>Удалить</Button>
           <Button variant="contained" onClick={() => setDeleteModal(0)} >Отмена</Button>
         </Box>
       </Modal>
diff --git a/src/ui_kit/Toolbars/TooltipClickInfo.tsx b/src/ui_kit/Toolbars/TooltipClickInfo.tsx
index c8f2f353..c23a629f 100644
--- a/src/ui_kit/Toolbars/TooltipClickInfo.tsx
+++ b/src/ui_kit/Toolbars/TooltipClickInfo.tsx
@@ -12,6 +12,7 @@ export default function TooltipClickInfo({ title }: { title: string }) {
   const handleTooltipOpen = () => {
     setOpen(true);
   };
+
   return (
     <>
       <ClickAwayListener onClickAway={handleTooltipClose}>
@@ -23,14 +24,13 @@ export default function TooltipClickInfo({ title }: { title: string }) {
             placement="top"
             onClose={handleTooltipClose}
             open={open}
-            disableFocusListener
-            disableHoverListener
-            disableTouchListener
+            title={title}
+            onMouseEnter={handleTooltipOpen}
+            onMouseLeave={handleTooltipClose}
             sx={{
               fontSize: "12px",
               p:"10px"
             }}
-            title={title}
           >
             <IconButton onClick={handleTooltipOpen}>
               <InfoIcon />