добавление utm меток

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

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>

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