import { Box, Container, Typography, TextField, Button, List, ListItem, IconButton, Modal } from "@mui/material"; import { InfoPopover } from '@ui_kit/InfoPopover'; import GenderAndAgeSelector from "./GenderAndAgeSelector"; import { useEffect, useState } from "react"; import CustomTextField from "@ui_kit/CustomTextField"; import { useTheme } from "@mui/material"; import { AuditoryItem, auditoryAdd, auditoryDelete, auditoryGet } from "@/api/auditory"; import { useCurrentQuiz } from "@/stores/quizes/hooks"; import { AuditoryList } from "./AuditoryList"; import { useSnackbar } from "notistack"; export default function PersonalizationAI() { const theme = useTheme(); const [auditory, setAuditory] = useState([]); const [deleteModal, setDeleteModal] = useState(0); const [link, setLink] = useState(''); const [utmParams, setUtmParams] = useState(''); const quiz = useCurrentQuiz(); const { enqueueSnackbar } = useSnackbar(); useEffect(() => { (async () => { if (quiz?.backendId) { const [result, error] = await auditoryGet({ quizId: quiz.backendId }); console.log("result-___---_------__---__-__---_------__---__-__---_------__---__-__---_------__---__-____--__") console.log(result) if (result) { setAuditory(result); } } })(); }, [quiz]); 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 }); if (error) { // 6. Если удалить не удалось - показываем снекбар и возвращаем ссылку enqueueSnackbar('Не удалось удалить ссылку', { variant: 'error' }); setAuditory(prev => { const newArray = [...prev]; newArray.splice(indexToDelete, 0, deletedItem); return newArray; }); } } catch (error) { // Обработка ошибки сети или других ошибок enqueueSnackbar('Произошла ошибка при удалении', { variant: 'error' }); setAuditory(prev => { const newArray = [...prev]; newArray.splice(indexToDelete, 0, deletedItem); return newArray; }); } } const handleAdd = (item: AuditoryItem) => { setAuditory(old => ([...old, item])) } const handleLinkChange = (e: React.ChangeEvent) => { const newLink = e.target.value; setLink(newLink); // Регулярное выражение для поиска параметров URL const paramRegex = /[?&]([^=&]+)=([^&]*)/g; const params: Record = {}; let match; // Ищем все параметры в строке while ((match = paramRegex.exec(newLink)) !== null) { const key = decodeURIComponent(match[1]); const value = decodeURIComponent(match[2]); params[key] = value; } // Преобразуем объект параметров в строку URL const paramString = Object.entries(params) .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`) .join('&'); setUtmParams(paramString ? `&${paramString}` : ""); }; return ( <> Персонализация вопросов с помощью AI Данный раздел позволяет вам создавать персонализированный опрос под каждую целевую аудиторию отдельно, наш AI перефразирует ваши вопросы согласно настройкам. Для этого нужно выбрать пол и возраст вашей аудитории и получите персональную ссылку с нужными настройками в списке ниже. Так же вы можете обогатить свою ссылку UTM метками {/* Первый белый блок */} {/* Ссылка */} Ссылка Вставьте ссылку со всеми utm-метками setDeleteModal(0)} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" > Уверены, что хотите удалить ссылку? ); }