From 14bfc6750f08a0cf9481063cf0a5c6c138fe3f80 Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Mon, 2 Jun 2025 01:48:35 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20utm=20=D0=BC=D0=B5=D1=82=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PersonalizationAI/AuditoryLink.tsx  |  5 +--
 src/pages/PersonalizationAI/AuditoryList.tsx  |  4 +--
 .../PersonalizationAI/PersonalizationAI.tsx   | 33 +++++++++++++++++--
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/pages/PersonalizationAI/AuditoryLink.tsx b/src/pages/PersonalizationAI/AuditoryLink.tsx
index 9264d420..0e5096d3 100644
--- a/src/pages/PersonalizationAI/AuditoryLink.tsx
+++ b/src/pages/PersonalizationAI/AuditoryLink.tsx
@@ -10,9 +10,10 @@ interface AuditoryLinkProps {
     item: AuditoryItem;
     index: number;
     onDelete: (id: number) => void;
+    utmParams:string
 }
 
-export const AuditoryLink = ({ item, index, onDelete }: AuditoryLinkProps) => {
+export const AuditoryLink = ({ utmParams, item, index, onDelete }: AuditoryLinkProps) => {
     const theme = useTheme();
     const { isTestServer } = useDomainDefine();
 
@@ -24,7 +25,7 @@ export const AuditoryLink = ({ item, index, onDelete }: AuditoryLinkProps) => {
         onDelete(item.id);
     };
 
-    const linkText = `${isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}?_paud=${item.id}`;
+    const linkText = `${isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}?_paud=${item.id}${utmParams}`;
 
     return (
         <ListItem
diff --git a/src/pages/PersonalizationAI/AuditoryList.tsx b/src/pages/PersonalizationAI/AuditoryList.tsx
index 667904d5..a84c7e2a 100644
--- a/src/pages/PersonalizationAI/AuditoryList.tsx
+++ b/src/pages/PersonalizationAI/AuditoryList.tsx
@@ -6,7 +6,7 @@ import { Box, Collapse, IconButton, List, Typography, useTheme } from "@mui/mate
 import { useEffect, useState } from "react";
 import { AuditoryLink } from "./AuditoryLink";
 
-export const AuditoryList = ({auditory, onDelete}:{auditory:AuditoryItem[], onDelete: (id: number) => void}) => {
+export const AuditoryList = ({utmParams, auditory, onDelete}:{utmParams:string,auditory:AuditoryItem[], onDelete: (id: number) => void}) => {
     const theme = useTheme();
     const { isTestServer } = useDomainDefine();
     const [linksOpen, setLinksOpen] = useState(true);
@@ -39,7 +39,7 @@ export const AuditoryList = ({auditory, onDelete}:{auditory:AuditoryItem[], onDe
                 <Collapse in={linksOpen} timeout="auto" unmountOnExit sx={{ mt: "3px" }}>
                     <List sx={{ gap: '8px', p: 0, m: 0 }}>
                         {auditory.map((item, idx) => (
-                            <AuditoryLink key={idx} item={item} index={idx} onDelete={onDelete} />
+                            <AuditoryLink utmParams={utmParams} key={idx} item={item} index={idx} onDelete={onDelete} />
                         ))}
                     </List>
                 </Collapse>
diff --git a/src/pages/PersonalizationAI/PersonalizationAI.tsx b/src/pages/PersonalizationAI/PersonalizationAI.tsx
index b2686e52..5faa88d3 100644
--- a/src/pages/PersonalizationAI/PersonalizationAI.tsx
+++ b/src/pages/PersonalizationAI/PersonalizationAI.tsx
@@ -14,6 +14,8 @@ export default function PersonalizationAI() {
   const theme = useTheme();
   const [auditory, setAuditory] = useState<AuditoryItem[]>([]);
   const [deleteModal, setDeleteModal] = useState<number>(0);
+  const [link, setLink] = useState<string>('');
+  const [utmParams, setUtmParams] = useState<string>('');
   const quiz = useCurrentQuiz();
   const { enqueueSnackbar } = useSnackbar();
 
@@ -75,6 +77,30 @@ export default function PersonalizationAI() {
     setAuditory(old => ([...old, item]))
   }
 
+  const handleLinkChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newLink = e.target.value;
+    setLink(newLink);
+
+    // Регулярное выражение для поиска параметров URL
+    const paramRegex = /[?&]([^=&]+)=([^&]*)/g;
+    const params: Record<string, string> = {};
+    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);
+  };
+
   return (
     <>
       <Container id="PersonalizationAI" maxWidth={false} sx={{ minHeight: "100%", p: "20px", height: " calc(100vh - 80px)", overflow: "auto", pt: "55px"}}>
@@ -121,16 +147,17 @@ export default function PersonalizationAI() {
             </Typography>
             <CustomTextField
               placeholder="linkexample.com"
-              maxLength={5}
+              maxLength={500}
+              value={link}
+              onChange={handleLinkChange}
               sxForm={{
                 width: "615px",
               }}
-
             />
           </Box>
         </Box>
 
-        <AuditoryList onDelete={setDeleteModal} auditory={auditory} />
+        <AuditoryList utmParams={utmParams} onDelete={setDeleteModal} auditory={auditory} />
 
       </Container>
       <Modal