инфо открывается при наведении

2025-06-06 16:25:06 +03:00 · 2025-06-06 16:25:06 +03:00 · 98bf92466b
commit 98bf92466b
parent 595f4b041b
4 changed files with 35 additions and 118 deletions
--- 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",
--- a/src/pages/PersonalizationAI/GenderButton.tsx
+++ b/src/pages/PersonalizationAI/GenderButton.tsx
@ -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>
-  );
-}; 
--- 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>
--- 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 />