diff --git a/src/assets/AutoOpen.png b/src/assets/AutoOpen.png deleted file mode 100644 index 3ec88409..00000000 Binary files a/src/assets/AutoOpen.png and /dev/null differ diff --git a/src/assets/Bunner.png b/src/assets/Bunner.png deleted file mode 100644 index bd06b317..00000000 Binary files a/src/assets/Bunner.png and /dev/null differ diff --git a/src/assets/InBodySite.png b/src/assets/InBodySite.png deleted file mode 100644 index 83e66d5d..00000000 Binary files a/src/assets/InBodySite.png and /dev/null differ diff --git a/src/assets/OnButton.png b/src/assets/OnButton.png deleted file mode 100644 index e44a91ad..00000000 Binary files a/src/assets/OnButton.png and /dev/null differ diff --git a/src/assets/Widget.png b/src/assets/Widget.png deleted file mode 100644 index c3f3e263..00000000 Binary files a/src/assets/Widget.png and /dev/null differ diff --git a/src/assets/icons/questionsPage/arrowLeft.tsx b/src/assets/icons/questionsPage/arrowLeft.tsx index e12656d6..5bd77a83 100755 --- a/src/assets/icons/questionsPage/arrowLeft.tsx +++ b/src/assets/icons/questionsPage/arrowLeft.tsx @@ -1,7 +1,7 @@ import { Box } from "@mui/material"; interface Props { - color: string; + color?: string; } export default function ArrowLeft({ color = "#7E2AEA" }: Props) { diff --git a/src/model/quizSettings.ts b/src/model/quizSettings.ts index b728326a..b068fbb2 100644 --- a/src/model/quizSettings.ts +++ b/src/model/quizSettings.ts @@ -118,6 +118,11 @@ export interface QuizConfig { vkMetricNumber: number | undefined; } +export enum QuizMetricType { + yandex = "yandexMetricNumber", + vk = "vkMetricNumber", +} + export type FormContactFieldName = | "name" | "email" diff --git a/src/pages/InstallQuiz/InstallQuiz.tsx b/src/pages/InstallQuiz/InstallQuiz.tsx index 76d23155..72a0e81d 100644 --- a/src/pages/InstallQuiz/InstallQuiz.tsx +++ b/src/pages/InstallQuiz/InstallQuiz.tsx @@ -1,88 +1,10 @@ -import React, { useState } from "react"; -import { - Box, - Button, - ButtonBase, - FormControl, - IconButton, - InputAdornment, - Link, - MenuItem, - Modal, - OutlinedInput, - Paper, - Select, - SelectChangeEvent, - TextField, - Typography, - Tooltip, - useTheme, - useMediaQuery, -} from "@mui/material"; -import LinkIcon from "../../assets/icons/LinkIcon"; -import InfoIcon from "../../assets/icons/InfoIcon"; -import ArrowDown from "../../assets/icons/ArrowDownIcon"; -import CopyIcon from "../../assets/icons/CopyIcon"; -import VkIcon from "../../assets/icons/VkIcon"; -import DomenIcon from "../../assets/icons/DomenIcon"; -import OnButton from "../../assets/OnButton.png"; -import Bunner from "../../assets/Bunner.png"; -import InBidySite from "../../assets/InBodySite.png"; -import AutoOpen from "../../assets/AutoOpen.png"; -import WidgetImg from "../../assets/Widget.png"; -import OneIconBorder from "../../assets/icons/OneIconBorder"; +import { Box, Button } from "@mui/material"; +import { decrementCurrentStep } from "@root/quizes/actions"; import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; -import CustomTextField from "@ui_kit/CustomTextField"; -import VkIconButton from "../../assets/icons/VkIconButton"; -import SelectableButton from "@ui_kit/SelectableButton"; -import ButtonSocial from "./ButtonSocial"; -import OnButtonInstall from "./OnButtonInstall"; -import BannerInstall from "./BannerInstall"; -import InBodyInstall from "./InBodyInstall"; -import AutoOpenInstall from "./AutoOpenInstall"; -import VidjetInstall from "./VidjetInstall"; -import InstallQzCode from "./InstallQzCode"; -import { - decrementCurrentStep, - incrementCurrentStep, - updateQuiz, -} from "@root/quizes/actions"; -import { useCurrentQuiz } from "@root/quizes/hooks"; -import { useDomainDefine } from "@utils/hooks/useDomainDefine"; -import NumberTwo from "@icons/NumberTwo"; - -type BackgroundType = "text" | "video"; +import QuizInstallationCard from "./QuizInstallationCard/QuizInstallationCard"; +import QuizLinkCard from "./QuizLinkCard"; export default function InstallQuiz() { - const quiz = useCurrentQuiz(); - const { isTestServer } = useDomainDefine(); - const [display, setDisplay] = React.useState("1"); - const handleChange = (event: SelectChangeEvent) => { - setDisplay(event.target.value); - }; - - const [openVk, setOpenVk] = React.useState(false); - const [stepState, setStepState] = React.useState("step1"); - const handleOpenVk = () => setOpenVk(true); - const handleCloseVk = () => setOpenVk(false); - - const [openDom, setOpenDom] = React.useState(false); - const handleOpenDom = () => setOpenDom(true); - const handleCloseDom = () => setOpenDom(false); - - const [backgroundType, setBackgroundType] = useState("text"); - - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(600)); - const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065)); - const CopyLink = () => { - let one = (document.getElementById("inputLinkone") as HTMLInputElement) - ?.value; - let text = (document.getElementById("inputLink") as HTMLInputElement) - ?.value; - navigator.clipboard.writeText(one + text); - }; - return ( <> - - - - - Ссылка на quiz - - - - - - - - - - - - - - - - - - - {quiz?.status === "start" ? "Опубликован" : "Не опубликован"} - - - - - - - Установка quiz на сайте - - { - setStepState("step1"); - }} - > - - - Способ установки - - - { - setStepState("step2"); - }} - > - - - Вставить код на сайт - - - - - - {stepState === "step1" ? ( - { - setStepState("step2"); - }} - sx={{ - display: "flex", - flexDirection: "column", - justifyContent: "start", - alignItems: "start", - maxWidth: "205px", - gap: "15px", - }} - > - - В тело сайта - - Задайте свои размеры и встройте в сайт - - - ) : ( - <> - - - 1. Код вставки quiz - - Установите код в то место, где должен быть quiz - - `} - sx={{ - "& .MuiInputBase-root": { - maxWidth: "520px", - width: "100%", - backgroundColor: theme.palette.background.default, - fontSize: "18px", - alignItems: "flex-start", - }, - }} - InputProps={{ - endAdornment: ( - - - navigator.clipboard.writeText( - document.getElementById( - "outlined-multiline-static", - ).value, - ) - } - > - - - - ), - }} - /> - - - - - Код нужно вставить один раз. Изменения в самом quiz будут - отображаться автоматически после сохранения. - - - Для установки размера добавьте в тег значения высоты и - ширины, например: - - - {`
`} - - - - )} - - - + + ); } - -const buttonInstall: { icon: string; title: string; text: string }[] = [ - { - icon: OnButton, - title: "По кнопке", - text: "Конструктор кнопки или собственная кнопка", - }, - { icon: Bunner, title: "Баннером", text: "Сбоку или на всю ширину экрана" }, - { - icon: InBidySite, - title: "В тело сайта", - text: "Задайте свои размеры и встройте в сайт", - }, - { - icon: AutoOpen, - title: "Автооткрытие", - text: "Автооткрытие поп-ап на сайте", - }, - { - icon: WidgetImg, - title: "Виджет", - text: "Сбоку страницы как консультант", - }, -]; diff --git a/src/pages/InstallQuiz/QuizInstallationCard/InstallationStepButton.tsx b/src/pages/InstallQuiz/QuizInstallationCard/InstallationStepButton.tsx new file mode 100644 index 00000000..53ac5d7e --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/InstallationStepButton.tsx @@ -0,0 +1,31 @@ +import { ButtonBase, Typography, useTheme } from "@mui/material"; +import { ReactNode } from "react"; + +interface Props { + active?: boolean; + onClick?: () => void; + leftIcon?: ReactNode; + children?: ReactNode; +} + +export default function InstallationStepButton({ + active, + leftIcon, + onClick, + children, +}: Props) { + const theme = useTheme(); + + return ( + + {leftIcon} + + {children} + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx b/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx new file mode 100644 index 00000000..221b0178 --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx @@ -0,0 +1,207 @@ +import { + Box, + ButtonBase, + IconButton, + InputAdornment, + TextField as MuiTextField, + TextFieldProps, + Typography, + useMediaQuery, + useTheme, +} from "@mui/material"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import { useDomainDefine } from "@utils/hooks/useDomainDefine"; +import { FC, useState } from "react"; +import CopyIcon from "../../../assets/icons/CopyIcon"; +import OneIconBorder from "../../../assets/icons/OneIconBorder"; +import InstallationStepButton from "./InstallationStepButton"; +import ContainerWidgetPreview from "./previewIcons/ContainerWidgetPreview"; + +const TextField = MuiTextField as unknown as FC; + +export default function QuizInstallationCard() { + const theme = useTheme(); + const quiz = useCurrentQuiz(); + const { isTestServer } = useDomainDefine(); + const [stepState, setStepState] = useState("step1"); + const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065)); + + if (!quiz) return null; + + return ( + + + + Установка quiz на сайте + + + } + onClick={() => { + setStepState("step1"); + }} + > + Способ установки + + + } + onClick={() => { + setStepState("step2"); + }} + > + Вставить код на сайт + + + + + {stepState === "step1" ? ( + { + setStepState("step2"); + }} + sx={{ + display: "flex", + flexDirection: "column", + justifyContent: "start", + alignItems: "start", + maxWidth: "205px", + gap: "15px", + }} + > + + В тело сайта + + Задайте свои размеры и встройте в сайт + + + ) : ( + <> + + + 1. Код вставки quiz + + Установите код в то место, где должен быть quiz + + `} + sx={{ + "& .MuiInputBase-root": { + maxWidth: "520px", + width: "100%", + backgroundColor: theme.palette.background.default, + fontSize: "18px", + alignItems: "flex-start", + }, + }} + InputProps={{ + endAdornment: ( + + navigator.clipboard.writeText( // TODO + // document.getElementById( + // "outlined-multiline-static" + // ).value + // )} + > + + + + ), + }} + /> + + + + + Код нужно вставить один раз. Изменения в самом quiz будут + отображаться автоматически после сохранения. + + + Для установки размера добавьте в тег значения высоты и ширины, + например: + + + {`
`} + + + + )} + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/BannerWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/BannerWidgetPreview.tsx new file mode 100644 index 00000000..d3825aca --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/BannerWidgetPreview.tsx @@ -0,0 +1,49 @@ +import { Box } from "@mui/material"; + +export default function BannerWidgetPreview() { + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ButtonWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ButtonWidgetPreview.tsx new file mode 100644 index 00000000..efa49eb9 --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ButtonWidgetPreview.tsx @@ -0,0 +1,50 @@ +import { Box } from "@mui/material"; + +export default function ButtonWidgetPreview() { + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ContainerWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ContainerWidgetPreview.tsx new file mode 100644 index 00000000..1c8653d8 --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ContainerWidgetPreview.tsx @@ -0,0 +1,50 @@ +import { Box } from "@mui/material"; + +export default function ContainerWidgetPreview() { + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/PopupWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/PopupWidgetPreview.tsx new file mode 100644 index 00000000..9469e502 --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/PopupWidgetPreview.tsx @@ -0,0 +1,54 @@ +import { Box } from "@mui/material"; + +export default function PopupWidgetPreview() { + return ( + + + + + + + + + + + + ); +} diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/SideWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/SideWidgetPreview.tsx new file mode 100644 index 00000000..bf9abb95 --- /dev/null +++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/SideWidgetPreview.tsx @@ -0,0 +1,50 @@ +import { Box } from "@mui/material"; + +export default function SideWidgetPreview() { + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/InstallQuiz/QuizLinkCard.tsx b/src/pages/InstallQuiz/QuizLinkCard.tsx new file mode 100644 index 00000000..df893dac --- /dev/null +++ b/src/pages/InstallQuiz/QuizLinkCard.tsx @@ -0,0 +1,209 @@ +import { + Box, + FormControl, + IconButton, + MenuItem, + TextField as MuiTextField, + Paper, + Select, + SelectChangeEvent, + TextFieldProps, + Typography, + useMediaQuery, + useTheme, +} from "@mui/material"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import { useDomainDefine } from "@utils/hooks/useDomainDefine"; +import { FC, useState } from "react"; +import ArrowDown from "../../assets/icons/ArrowDownIcon"; +import CopyIcon from "../../assets/icons/CopyIcon"; +import LinkIcon from "../../assets/icons/LinkIcon"; + +const TextField = MuiTextField as unknown as FC; + +export default function QuizLinkCard() { + const theme = useTheme(); + const quiz = useCurrentQuiz(); + const { isTestServer } = useDomainDefine(); + const [display, setDisplay] = useState("1"); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + + const CopyLink = () => { + let one = (document.getElementById("inputLinkone") as HTMLInputElement) + ?.value; + let text = (document.getElementById("inputLink") as HTMLInputElement) + ?.value; + navigator.clipboard.writeText(one + text); + }; + + const handleChange = (event: SelectChangeEvent) => { + setDisplay(event.target.value); + }; + + if (!quiz) return null; + + return ( + + + + + Ссылка на quiz + + + + + + + + + + + + + + + + + + + {quiz?.status === "start" ? "Опубликован" : "Не опубликован"} + + + + ); +} diff --git a/src/pages/IntegrationsPage/IntegrationYandex/YandexButton.tsx b/src/pages/IntegrationsPage/IntegrationYandex/YandexButton.tsx deleted file mode 100644 index 89d55334..00000000 --- a/src/pages/IntegrationsPage/IntegrationYandex/YandexButton.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Box, useTheme } from "@mui/material"; -import { FC } from "react"; -import { YandexMetricaLogo } from "../mocks/YandexMetricaLogo"; - -type PartnerItemProps = { - setIsModalOpen: (value: boolean) => void; - setCompanyName?: (value: string) => void; -}; - -export const YandexButton: FC = ({ - setIsModalOpen, - setCompanyName, -}) => { - const theme = useTheme(); - - const handleClick = () => { - setIsModalOpen(true); - }; - - return ( - <> - setIsModalOpen(true)} - > - - - - ); -}; diff --git a/src/pages/IntegrationsPage/IntegrationYandex/YandexModal.tsx b/src/pages/IntegrationsPage/IntegrationYandex/YandexModal.tsx deleted file mode 100644 index da6fd076..00000000 --- a/src/pages/IntegrationsPage/IntegrationYandex/YandexModal.tsx +++ /dev/null @@ -1,197 +0,0 @@ -import { - Button, - Dialog, - IconButton, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; -import Box from "@mui/material/Box"; -import CloseIcon from "@mui/icons-material/Close"; -import React, { useState } from "react"; -import CustomTextField from "@ui_kit/CustomTextField"; -import EditPencil from "@icons/EditPencil"; -import Trash from "@icons/trash"; -import { updateQuiz } from "@root/quizes/actions"; -import { useCurrentQuiz } from "@root/quizes/hooks"; - -interface Props { - isModalOpen: boolean; - handleCloseModal: () => void; -} - -export default function YandexModal({ isModalOpen, handleCloseModal }: Props) { - const theme = useTheme(); - const quiz = useCurrentQuiz(); - const isMobile = useMediaQuery(theme.breakpoints.down(600)); - const isTablet = useMediaQuery(theme.breakpoints.down(1000)); - const yandexNumber = quiz?.config.yandexMetricNumber; - const [isSave, setIsSave] = useState(!!yandexNumber); - const [currentValue, setCurrentValue] = useState( - yandexNumber ? yandexNumber.toString() : "", - ); - const handleClose = () => { - handleCloseModal(); - if (!yandexNumber) { - setIsSave(false); - setCurrentValue(""); - return; - } - setIsSave(true); - setCurrentValue(yandexNumber.toString()); - }; - - const handleSave = () => { - handleCloseModal(); - updateQuiz(quiz?.id, (quiz) => { - quiz.config.yandexMetricNumber = currentValue - ? Number(currentValue) - : undefined; - }); - if (!currentValue) { - setIsSave(false); - return; - } - setIsSave(true); - }; - const handleEdit = () => { - setIsSave(false); - }; - - const handleClear = () => { - setCurrentValue(""); - setIsSave(false); - }; - - return ( - - - - Аналитика с Яндекс.Метрикой - - - - - - - - - - {isSave ? "Ваш номер счетчика" : "Введите номер счетчика"} - - {isSave && ( - - - - - - - - - )} - - - { - const onlyNums = e.target.value.replace(/[^0-9]/g, ""); - setCurrentValue(onlyNums); - }} - /> - - {!isSave && ( - - - - - )} - - - ); -} diff --git a/src/pages/IntegrationsPage/IntegrationsPage.tsx b/src/pages/IntegrationsPage/IntegrationsPage.tsx index c090b11a..7357dca1 100644 --- a/src/pages/IntegrationsPage/IntegrationsPage.tsx +++ b/src/pages/IntegrationsPage/IntegrationsPage.tsx @@ -6,6 +6,7 @@ import { useQuizStore } from "@root/quizes/store"; import { useNavigate } from "react-router-dom"; import { PartnersBoard } from "./PartnersBoard/PartnersBoard"; import { partnersMock } from "./mocks/MockData"; +import { QuizMetricType } from "@model/quizSettings"; interface IntegrationsPageProps { heightSidebar: number; @@ -22,7 +23,9 @@ export const IntegrationsPage = ({ const navigate = useNavigate(); const isMobile = useMediaQuery(theme.breakpoints.down(660)); const [isModalOpen, setIsModalOpen] = useState(false); - const [companyName, setCompanyName] = useState(null); + const [companyName, setCompanyName] = useState< + keyof typeof QuizMetricType | null + >(null); useEffect(() => { if (editQuizId === null) navigate("/list"); }, [navigate, editQuizId]); @@ -62,6 +65,7 @@ export const IntegrationsPage = ({ void; + companyName: keyof typeof QuizMetricType; +} + +export default function AnalyticsModal({ + isModalOpen, + handleCloseModal, + companyName, +}: Props) { + const theme = useTheme(); + const quiz = useCurrentQuiz(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const configName = QuizMetricType[companyName]; + const meterNumber = quiz?.config[configName]; + const [isSave, setIsSave] = useState(!!meterNumber); + const [currentValue, setCurrentValue] = useState( + meterNumber ? meterNumber.toString() : "", + ); + const analyticTexts = useMemo(() => { + return { + yandex: { + header: "Яндекс.Метрикой", + counterName: "счетчика", + instructionTitle: "Как установить Яндекс Метрику в квиз?", + instructionSubTitle: "Инструкция по настройке Яндекс Метрики", + instructionHeader: "Настройка счётчика и интеграции", + instructionText: + "Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.", + }, + vk: { + header: "VK Пиксель", + counterName: "пикселя", + instructionTitle: "Как установить VK Пиксель в квиз?", + instructionSubTitle: "Инструкция по настройке VK Пиксель", + instructionHeader: "Настройка счётчика и интеграции", + instructionText: + "Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.", + }, + }; + }, []); + + const handleClose = () => { + handleCloseModal(); + if (!meterNumber) { + setIsSave(false); + setCurrentValue(""); + return; + } + setIsSave(true); + setCurrentValue(meterNumber.toString()); + }; + const handleSave = () => { + handleCloseModal(); + updateQuiz(quiz?.id, (quiz) => { + quiz.config[configName] = currentValue ? Number(currentValue) : undefined; + }); + if (!currentValue) { + setIsSave(false); + return; + } + setIsSave(true); + }; + const handleEdit = () => { + setIsSave(false); + }; + + const handleClear = () => { + setCurrentValue(""); + setIsSave(false); + }; + + useEffect(() => { + const configName = + QuizMetricType[companyName as keyof typeof QuizMetricType]; + const meterNumber = quiz?.config[configName]; + setCurrentValue(meterNumber ? meterNumber.toString() : ""); + setIsSave(!!meterNumber); + }, [companyName]); + + return ( + + + + Аналитика с {analyticTexts[companyName]?.header} + + + + + + + + + + {isSave + ? `Ваш номер ${analyticTexts[companyName]?.counterName}` + : `Введите номер ${analyticTexts[companyName]?.counterName}`} + + {isSave && ( + + + + + + + + + )} + + + { + const onlyNums = e.target.value.replace(/[^0-9]/g, ""); + setCurrentValue(onlyNums); + }} + /> + {!isSave && ( + + {meterNumber && !isSave && ( + + )} + + + )} + + + + + + ); +} diff --git a/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/InstructionsBlock.tsx b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/InstructionsBlock.tsx new file mode 100644 index 00000000..afa87ee1 --- /dev/null +++ b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/InstructionsBlock.tsx @@ -0,0 +1,88 @@ +import Box from "@mui/material/Box"; +import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; +import { Typography, useMediaQuery, useTheme } from "@mui/material"; +import React, { FC, useState } from "react"; + +type InstructionsBlockProps = { + headerText: string; + subHeaderText: string; + instructionTitle: string; + instructionsText: string; +}; + +export const InstructionsBlock: FC = ({ + headerText, + instructionsText, + subHeaderText, + instructionTitle, +}) => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + const [isInstructionOpen, setIsInstructionOpen] = useState(false); + return ( + + setIsInstructionOpen(!isInstructionOpen)} + sx={{ + cursor: "pointer", + backgroundColor: theme.palette.background.default, + borderRadius: isInstructionOpen ? "12px 12px 0 0" : "12px", + padding: "20px", + border: "1px solid #E5E5E5", + borderBottom: isInstructionOpen ? "none" : "1px solid #E5E5E5", + position: "relative", + }} + > + {isMobile && ( + + )} + + {headerText} + + + {subHeaderText} + + + {isInstructionOpen && ( + + + {instructionTitle} + + + {instructionsText} + + + )} + + ); +}; diff --git a/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx b/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx index adf54a60..e39d98e8 100644 --- a/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx +++ b/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx @@ -1,7 +1,10 @@ import { Box, Typography, useTheme } from "@mui/material"; import { FC } from "react"; -import { YandexButton } from "../IntegrationYandex/YandexButton"; -import YandexModal from "../IntegrationYandex/YandexModal"; +import { ServiceButton } from "./ServiceButton/ServiceButton"; +import { YandexMetricaLogo } from "../mocks/YandexMetricaLogo"; +import AnalyticsModal from "./AnalyticsModal/AnalyticsModal"; +import { VKPixelLogo } from "../mocks/VKPixelLogo"; +import { QuizMetricType } from "@model/quizSettings"; export type Partner = { name: string; @@ -12,7 +15,8 @@ export type Partner = { type PartnersBoardProps = { partners: Partner[]; setIsModalOpen: (value: boolean) => void; - setCompanyName: (value: string) => void; + companyName: keyof typeof QuizMetricType | null; + setCompanyName: (value: keyof typeof QuizMetricType) => void; isModalOpen: boolean; handleCloseModal: () => void; }; @@ -22,17 +26,18 @@ export const PartnersBoard: FC = ({ setIsModalOpen, isModalOpen, handleCloseModal, + companyName, setCompanyName, }) => { const theme = useTheme(); - const partnersByCategory = partners.reduce( - (acc, partner) => { - (acc[partner.category] = acc[partner.category] || []).push(partner); - return acc; - }, - {} as Record, - ); + // const partnersByCategory = partners.reduce( + // (acc, partner) => { + // (acc[partner.category] = acc[partner.category] || []).push(partner); + // return acc; + // }, + // {} as Record, + // ); return ( = ({ {/* */} {/* */} {/*))}*/} - - Аналитика - - - + + + + Аналитика + + + } + setIsModalOpen={setIsModalOpen} + name={"yandex"} + setCompanyName={setCompanyName} + /> + } + title={"VK Пиксель"} + name={"vk"} + setIsModalOpen={setIsModalOpen} + setCompanyName={setCompanyName} + > + + + {companyName && ( + + )} ); }; diff --git a/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx b/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx new file mode 100644 index 00000000..4773e19f --- /dev/null +++ b/src/pages/IntegrationsPage/PartnersBoard/ServiceButton/ServiceButton.tsx @@ -0,0 +1,57 @@ +import { Box, Typography, useTheme } from "@mui/material"; +import { FC } from "react"; +import { QuizMetricType } from "@model/quizSettings"; + +type PartnerItemProps = { + setIsModalOpen: (value: boolean) => void; + setCompanyName: (value: keyof typeof QuizMetricType) => void; + logo?: JSX.Element; + title?: string; + name: string; +}; + +export const ServiceButton: FC = ({ + setIsModalOpen, + logo, + title, + name, + setCompanyName, +}) => { + const theme = useTheme(); + + const handleClick = () => { + setCompanyName(name as keyof typeof QuizMetricType); + setIsModalOpen(true); + }; + + return ( + <> + + {logo && logo} + + {title && title} + + + + ); +}; diff --git a/src/pages/IntegrationsPage/mocks/VKLogo.svg b/src/pages/IntegrationsPage/mocks/VKLogo.svg new file mode 100644 index 00000000..af78b0d0 --- /dev/null +++ b/src/pages/IntegrationsPage/mocks/VKLogo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/pages/IntegrationsPage/mocks/VKPixelLogo.tsx b/src/pages/IntegrationsPage/mocks/VKPixelLogo.tsx new file mode 100644 index 00000000..059b8c67 --- /dev/null +++ b/src/pages/IntegrationsPage/mocks/VKPixelLogo.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import { ReactComponent as VKLogo } from "./VKLogo.svg"; + +export const VKPixelLogo = () => { + return ; +}; diff --git a/src/pages/createQuize/AvailablePrivilege.tsx b/src/pages/createQuize/AvailablePrivilege.tsx index 3d1cbd3b..abcdd9e0 100644 --- a/src/pages/createQuize/AvailablePrivilege.tsx +++ b/src/pages/createQuize/AvailablePrivilege.tsx @@ -50,19 +50,38 @@ export default function AvailablePrivilege() { const squizHideBadge = userPrivileges?.squizHideBadge?.amount || 0; //Где дни - amount - это на сколько дней выдан безлимит. т.е. не сколько осталось, а на сколько дней выдано - function getCramps (amount: number, created_at: string) { - if (created_at.length === 0) return 0 - const currentDate = moment() + function getCramps(amount: number, created_at: string) { + if (created_at.length === 0) return 0; + const currentDate = moment(); - return Number((moment(moment(created_at).add(amount, "days").diff(currentDate)).unix() / 86400).toFixed(1)) + return Number( + ( + moment( + moment(created_at).add(amount, "days").diff(currentDate), + ).unix() / 86400 + ).toFixed(1), + ); } - const quizUnlimDays = getCramps(quizUnlimTime, userPrivileges?.quizUnlimTime?.created_at || "") - const squizBadgeDays = getCramps(squizHideBadge, userPrivileges?.squizHideBadge?.created_at || "") + const quizUnlimDays = getCramps( + quizUnlimTime, + userPrivileges?.quizUnlimTime?.created_at || "", + ); + const squizBadgeDays = getCramps( + squizHideBadge, + userPrivileges?.squizHideBadge?.created_at || "", + ); - const currentDate = moment() - console.log(quizUnlimDays) - console.log(moment()) - console.log(moment(moment(userPrivileges?.quizUnlimTime?.created_at).add(quizUnlimTime, "days"))) + const currentDate = moment(); + console.log(quizUnlimDays); + console.log(moment()); + console.log( + moment( + moment(userPrivileges?.quizUnlimTime?.created_at).add( + quizUnlimTime, + "days", + ), + ), + ); return ( Безлимитные заявки:{" "} - { - quizUnlimDays > 0 && quizUnlimDays < 1 ? - "последний день" - : - `${Math.trunc(quizUnlimDays)} ${declOfNum(Math.trunc(quizUnlimDays), DayForm)}` - } + {quizUnlimDays > 0 && quizUnlimDays < 1 + ? "последний день" + : `${Math.trunc(quizUnlimDays)} ${declOfNum(Math.trunc(quizUnlimDays), DayForm)}`} {quizCnt !== 0 && ( @@ -99,12 +115,9 @@ export default function AvailablePrivilege() { Скрытие логотипа PenaQuiz:{" "} - { - squizBadgeDays > 0 && squizBadgeDays < 1 ? - "последний день" - : - `${Math.trunc(squizBadgeDays)} ${declOfNum(Math.trunc(squizBadgeDays), DayForm)}` - } + {squizBadgeDays > 0 && squizBadgeDays < 1 + ? "последний день" + : `${Math.trunc(squizBadgeDays)} ${declOfNum(Math.trunc(squizBadgeDays), DayForm)}`} )} diff --git a/src/ui_kit/Sidebar/SidebarMobile.tsx b/src/ui_kit/Sidebar/SidebarMobile.tsx index 462361f3..4cf2b29f 100644 --- a/src/ui_kit/Sidebar/SidebarMobile.tsx +++ b/src/ui_kit/Sidebar/SidebarMobile.tsx @@ -72,7 +72,6 @@ export const SidebarMobile: FC = ({ }; const clickInput = (event: MouseEvent) => { - debugger; if (ref.current && !ref.current?.contains(event.target as Node)) setInputOpen(false); };