From 61c0357adc3552b2ebaf04ae8513a06575f2eeab Mon Sep 17 00:00:00 2001 From: Nastya Date: Sun, 8 Jun 2025 20:52:55 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=BE=D0=BA=D1=83=D0=BF=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B8=20=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GenderAndAgeSelector.tsx | 81 ++++----------- src/pages/PersonalizationAI/PayModal.tsx | 55 +++++------ .../PersonalizationAI/PersonalizationAI.tsx | 99 ++++++++++++++++++- 3 files changed, 142 insertions(+), 93 deletions(-) diff --git a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx index 504f5091..51caf40e 100644 --- a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx +++ b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx @@ -1,69 +1,32 @@ -import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button, useMediaQuery, IconButton } from "@mui/material"; -import { InfoPopover } from '@ui_kit/InfoPopover'; +import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, useTheme, Button, useMediaQuery } from "@mui/material"; import CheckboxIcon from "@icons/Checkbox"; -import { useState } from "react"; -import { useCurrentQuiz } from "@/stores/quizes/hooks"; -import { auditoryAdd } from "@/api/auditory"; -import { useSnackbar } from "notistack"; -import ArrowDownIcon from "@/assets/icons/ArrowDownIcon"; import AgeInputWithSelect from "./AgeInputWithSelect"; interface GenderAndAgeSelectorProps { - handleAdd: (item: any) => void; + gender: string; + age: string; + ageError: boolean; + onGenderChange: (gender: string) => void; + onAgeChange: (age: string) => void; + onAgeErrorChange: (error: boolean) => void; + onStartCreate: () => void; } -export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelectorProps) { +export default function GenderAndAgeSelector({ + gender, + age, + ageError, + onGenderChange, + onAgeChange, + onAgeErrorChange, + onStartCreate +}: GenderAndAgeSelectorProps) { const theme = useTheme(); - const [age, setAge] = useState(''); - const [gender, setGender] = useState(''); - const [selectOpen, setSelectOpen] = useState(false); - const quiz = useCurrentQuiz(); - const { enqueueSnackbar } = useSnackbar(); const isMobile = useMediaQuery(theme.breakpoints.down(845)); - const [ageError, setAgeError] = useState(false); - - const addItem = async () => { - if (!quiz?.backendId) { - enqueueSnackbar('Ошибка: не выбран квиз', { variant: 'error' }); - return; - } - - try { - const [result, error] = await auditoryAdd({ - quizId: quiz.backendId, - body: { - sex: gender === "male", - age - } - }); - - if (error) { - enqueueSnackbar('Не удалось добавить ссылку', { variant: 'error' }); - return; - } - - if (result) { - handleAdd({ - id: result.ID, - quiz_id: quiz.backendId, - sex: gender === "male", - age, - deleted: false, - }); - enqueueSnackbar('Ссылка успешно добавлена', { variant: 'success' }); - // Очищаем форму - setGender(''); - setAge(''); - } - } catch (error) { - enqueueSnackbar('Произошла ошибка при добавлении', { variant: 'error' }); - } - }; return ( - Пол - {/* */} setGender(e.target.value)} + onChange={(e) => onGenderChange(e.target.value)} > Возраст - {/* */} - + - + ); } \ No newline at end of file diff --git a/src/pages/PersonalizationAI/PayModal.tsx b/src/pages/PersonalizationAI/PayModal.tsx index 5780be81..2e51c828 100644 --- a/src/pages/PersonalizationAI/PayModal.tsx +++ b/src/pages/PersonalizationAI/PayModal.tsx @@ -1,33 +1,21 @@ -import { useUserStore } from "@/stores/user"; import { Box, Button, Modal, Typography } from "@mui/material" interface Props { - isOpen: boolean; - openCloseHC: (b: boolean) => void; + open: boolean; + onClose: () => void; + onCreate: () => void; } + export const PayModal = ({ - isOpen, - openCloseHC + open, + onClose, + onCreate }: Props) => { - const privilegesOfUser = useUserStore((state) => state.userAccount?.privileges); - const user = useUserStore((state) => state.customerAccount); //у него есть wallet - - - - - - - - - - - - return ( openCloseHC(false)} + open={open} + onClose={onClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" > @@ -37,23 +25,30 @@ export const PayModal = ({ top: "50%", left: "50%", transform: "translate(-50%, -50%)", - maxWidth: "620px", + maxWidth: "550px", width: "100%", bgcolor: "background.paper", borderRadius: "12px", - boxShadow: 24, - p: "20px", + p: "30px", display: "flex", flexDirection: "column", - alignItems: "center" + alignItems: "center", + gap: 2 }} > - Данная услуга предоставляется за 500 рублей/опрос. Готовы оплатить? - - + + Данная услуга предоставляется за 500 рублей/опрос. Готовы оплатить? + + + + + - - ) + ); } \ No newline at end of file diff --git a/src/pages/PersonalizationAI/PersonalizationAI.tsx b/src/pages/PersonalizationAI/PersonalizationAI.tsx index e2e4f7e4..cedd211c 100644 --- a/src/pages/PersonalizationAI/PersonalizationAI.tsx +++ b/src/pages/PersonalizationAI/PersonalizationAI.tsx @@ -8,8 +8,11 @@ import { AuditoryItem, auditoryAdd, auditoryDelete, auditoryGet } from "@/api/au import { useCurrentQuiz } from "@/stores/quizes/hooks"; import { AuditoryList } from "./AuditoryList"; import { useSnackbar } from "notistack"; +import { PayModal } from "./PayModal"; +import { useUserStore } from "@/stores/user"; +import { cartApi } from "@/api/cart"; - +const tariff = "6844b8858258f5cc35791ef7"; export default function PersonalizationAI() { const theme = useTheme(); const [auditory, setAuditory] = useState([]); @@ -18,6 +21,70 @@ export default function PersonalizationAI() { const [utmParams, setUtmParams] = useState(''); const quiz = useCurrentQuiz(); const { enqueueSnackbar } = useSnackbar(); + const privilegesOfUser = useUserStore((state) => state.userAccount?.privileges); + + const [isStartCreate, setStartCreate] = useState(false); + const [gender, setGender] = useState(''); + const [age, setAge] = useState(''); + const [ageError, setAgeError] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + + const resetForm = () => { + setGender(''); + setAge(''); + setAgeError(false); + }; + + const checkPrivileges = async () => { + // TODO: Здесь будет проверка прав пользователя + console.log("______________privilegesOfUser"); + console.log(privilegesOfUser); + const [_, addError] = await cartApi.add(tariff); + + if (addError) return; + + + //Если нам хватает денежек - покупаем тариф + const [data, payError] = await cartApi.pay(); + }; + + const createNewLink = async () => { + if (!quiz?.backendId) { + enqueueSnackbar('Ошибка: не выбран квиз', { variant: 'error' }); + return; + } + + try { + const [result, error] = await auditoryAdd({ + quizId: quiz.backendId, + body: { + sex: gender === "male", + age + } + }); + + if (error) { + enqueueSnackbar('Не удалось добавить ссылку', { variant: 'error' }); + return; + } + + if (result) { + handleAdd({ + id: result.ID, + quiz_id: quiz.backendId, + sex: gender === "male", + age, + deleted: false, + }); + enqueueSnackbar('Ссылка успешно добавлена', { variant: 'success' }); + resetForm(); + setIsModalOpen(false); + setStartCreate(false); + } + } catch (error) { + enqueueSnackbar('Произошла ошибка при добавлении', { variant: 'error' }); + } + }; useEffect(() => { (async () => { @@ -74,7 +141,10 @@ export default function PersonalizationAI() { } const handleAdd = (item: AuditoryItem) => { - setAuditory(old => ([...old, item])) + setAuditory(old => ([...old, item])); + // Очищаем форму после успешного добавления + setGender(''); + setAge(''); } const handleLinkChange = (e: React.ChangeEvent) => { @@ -101,6 +171,13 @@ export default function PersonalizationAI() { setUtmParams(paramString ? `&${paramString}` : ""); }; + const startCreate = () => { + setStartCreate(true); + if (checkPrivileges()) { + setIsModalOpen(true); + } + }; + return ( <> @@ -124,7 +201,15 @@ export default function PersonalizationAI() { boxShadow: "none", maxWidth: "796px" }}> - + {/* Ссылка */} @@ -188,6 +273,14 @@ export default function PersonalizationAI() { + { + setIsModalOpen(false); + setStartCreate(false); + }} + onCreate={createNewLink} + /> ); }