Merge branch 'dev' into formcontact

cypress/e2e/quizPublish.cy.ts

@@ -282,5 +282,15 @@ describe("Форма Входа", () => {
 
     cy.wait(5000);
     cy.get('[data-cy="create-question"]').click();
+
+    // Удаления Квиза
+
+    cy.visit("http://localhost:3000/list");
+    cy.wait(500);
+    cy.get('[data-cy="delete-quiz"]').each(($button) => {
+      cy.wrap($button).click();
+      cy.wait(500);
+      cy.contains("button", "Удалить").click();
+    });
   });
 });

src/assets/icons/CropIcon.tsx

@@ -1,40 +1,10 @@
 import { FC, SVGProps } from "react";
 
-export const CropIcon: FC = () => (
+export const CropIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
-  <svg
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    xmlns="http://www.w3.org/2000/svg"
+    <path d="M6 6H2.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    width="24"
+    <path d="M6 2.25V18H21.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    height="24"
+    <path d="M18 15V6H9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    viewBox="0 0 24 24"
+    <path d="M18 21.75V18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    fill="none"
-  >
-    <path
-      d="M6 6H2.25"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M6 2.25V18H21.75"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M18 15V6H9"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M18 21.75V18"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
   </svg>
 );

src/pages/Landing/HeaderLanding.tsx

@@ -18,7 +18,7 @@ export default function Component() {
   const [select, setSelect] = React.useState(0);
   const userId = useUserStore((state) => state.userId);
   const navigate = useNavigate();
-  const location = useLocation()
+  const location = useLocation();
 
   const onClick = () => (userId ? navigate("/list") : navigate("/signin"));
 
@@ -41,7 +41,9 @@ export default function Component() {
         padding: 0,
       }}
     >
+      <Link to="/">
         <QuizLogo width={isMobile ? 100 : 150} />
+      </Link>
       {/*<Box*/}
       {/*    sx={{*/}
       {/*        maxWidth: '595px',*/}

src/pages/Landing/headerMobileLanding.tsx

@@ -53,10 +53,7 @@ const Transition = React.forwardRef(function Transition(
 });
 
 const height = "80px";
-export default function FullScreenDialog({
+export default function FullScreenDialog({ theme = "dark", bgColor = "#F2F3F7" }: Props) {
-                                             theme = "dark",
-                                             bgColor = "#F2F3F7",
-                                         }: Props) {
   const [open, setOpen] = useState(false);
   const location = useLocation();
   const themeMUI = useTheme();
@@ -77,21 +74,22 @@ export default function FullScreenDialog({
         bg={bgColor}
         mwidth={"1200px"}
         sxsect={{
-                    minHeight: isMobile? "50px" : {height},
+          minHeight: isMobile ? "50px" : { height },
           position: "fixed",
-                    zIndex: 11
+          zIndex: 11,
-
         }}
         sxcont={{
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center",
           svg: { color: "#000000" },
-                    padding: isMobile ? 0 : "0 22px 0 40px"
+          padding: isMobile ? 0 : "0 22px 0 40px",
         }}
       >
-                <Box sx={{ bgcolor: "none", paddingTop: isMobile? "6px" : 0 }}>
+        <Box sx={{ bgcolor: "none", paddingTop: isMobile ? "6px" : 0 }}>
-                    <Logotip width={150}/>
+          <Link to="/">
+            <Logotip width={150} />
+          </Link>
         </Box>
         {!isMobile && (
           <Button
@@ -144,16 +142,8 @@ export default function FullScreenDialog({
                 pt: "12px",
               }}
             >
-                            {isMobile && (
+              {isMobile && <Logotip width={150} />}
-                                <Logotip width={150}/>
+              <IconButton sx={{ ml: "auto" }} edge="start" color="inherit" onClick={handleClose} aria-label="close">
-                            )}
-                            <IconButton
-                                sx={{ ml: "auto" }}
-                                edge="start"
-                                color="inherit"
-                                onClick={handleClose}
-                                aria-label="close"
-                            >
                 <CloseIcon />
               </IconButton>
             </Toolbar>
@@ -237,13 +227,13 @@ export default function FullScreenDialog({
                   bottom: "60px",
                 }}
               >
-                                <Logotip width={150}/>
+                <Logotip width={150} />
               </Box>
             )}
           </List>
         </Dialog>
       </SectionStyled>
-            <Box sx={{height: isMobile ? "50px" : {height}}} />
+      <Box sx={{ height: isMobile ? "50px" : { height } }} />
     </>
   );
 }

src/pages/ResultPage/FirstEntry.tsx

@@ -1,5 +1,4 @@
-
+import { ResultSettings } from "./ResultSettings";
-import { ResultSettings } from "./ResultSettings"
 import { createFrontResult } from "@root/questions/actions";
 import { useQuestionsStore } from "@root/questions/store";
 import { useCurrentQuiz } from "@root/quizes/hooks";
@@ -7,6 +6,8 @@ import { Box, Typography, useTheme, useMediaQuery, Button } from "@mui/material"
 import image from "../../assets/Rectangle 110.png";
 import { enqueueSnackbar } from "notistack";
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
+import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
+import { decrementCurrentStep } from "@root/quizes/actions";
 
 export const FirstEntry = () => {
   const theme = useTheme();
@@ -17,16 +18,20 @@ export const FirstEntry = () => {
   const create = () => {
     if (quiz?.config.haveRoot) {
       questions
-      .filter((question:AnyTypedQuizQuestion) => {
+        .filter((question: AnyTypedQuizQuestion) => {
-        return question.type !== null && question.content.rule.parentId.length !== 0 && question.content.rule.children.length === 0
+          return (
-      })
+            question.type !== null &&
-      .forEach(question => {
+            question.content.rule.parentId.length !== 0 &&
-        createFrontResult(quiz.id, question.content.id)
+            question.content.rule.children.length === 0
+          );
         })
+        .forEach((question) => {
+          createFrontResult(quiz.id, question.content.id);
+        });
     } else {
-      createFrontResult(quiz.id, "line")
+      createFrontResult(quiz.id, "line");
-    }
     }
+  };
 
   return (
     <>
@@ -53,7 +58,7 @@ export const FirstEntry = () => {
             mr: !isSmallMonitor ? "104px" : 0,
             marginBottom: isSmallMonitor ? "20px" : 0,
             position: "relative",
-            height: "100%"
+            height: "100%",
           }}
         >
           <Typography variant="h5" sx={{ marginBottom: "20px" }}>
@@ -69,7 +74,10 @@ export const FirstEntry = () => {
             }}
           >
             <Typography sx={{ color: "#4D4D4D", width: "95%" }}>
-              Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке.
+              Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным
+              пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально
+              индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте
+              пользователя по нужной ссылке.
             </Typography>
             <Typography
               sx={{
@@ -91,6 +99,19 @@ export const FirstEntry = () => {
           }}
         />
       </Box>
+
+      <Box sx={{ display: "flex", justifyContent: "flex-start", alignItems: "center", gap: "8px", mt: "30px" }}>
+        <Button
+          variant="outlined"
+          sx={{
+            padding: "10px 20px",
+            borderRadius: "8px",
+            height: "44px",
+          }}
+          onClick={decrementCurrentStep}
+        >
+          <ArrowLeft />
+        </Button>
         <Button
           onClick={create}
           variant="contained"
@@ -100,12 +121,13 @@ export const FirstEntry = () => {
             lineHeight: "18px",
             width: "216px",
             height: "44px",
-          mt: "30px",
+
-          p: "10px 20px"
+            p: "10px 20px",
           }}
         >
           Создать результаты
         </Button>
+      </Box>
     </>
   );
-}
+};

src/pages/createQuize/MyQuizzesFull.tsx

@@ -1,12 +1,4 @@
-import {
+import { Box, Button, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
-    Box,
-    Button,
-    SxProps,
-    Theme,
-    Typography,
-    useMediaQuery,
-    useTheme,
-} from "@mui/material";
 import { createQuiz } from "@root/quizes/actions";
 import { useQuizes } from "@root/quizes/hooks";
 import SectionWrapper from "@ui_kit/SectionWrapper";
@@ -16,16 +8,12 @@ import ComplexNavText from "./ComplexNavText";
 import FirstQuiz from "./FirstQuiz";
 import QuizCard from "./QuizCard";
 
-
 interface Props {
   outerContainerSx?: SxProps<Theme>;
   children?: React.ReactNode;
 }
 
-export default function MyQuizzesFull({
+export default function MyQuizzesFull({ outerContainerSx: sx, children }: Props) {
-    outerContainerSx: sx,
-    children,
-}: Props) {
   const { quizes } = useQuizes();
   const navigate = useNavigate();
   const theme = useTheme();
@@ -69,14 +57,8 @@ export default function MyQuizzesFull({
               mb: "60px",
             }}
           >
-                        {quizes.map(quiz => (
+            {quizes.map((quiz) => (
-                            <QuizCard
+              <QuizCard key={quiz.id} quiz={quiz} openCount={0} applicationCount={0} conversionPercent={0} />
-                                key={quiz.id}
-                                quiz={quiz}
-                                openCount={0}
-                                applicationCount={0}
-                                conversionPercent={0}
-                            />
             ))}
           </Box>
           {children}

src/ui_kit/Header/Header.tsx

@@ -5,6 +5,7 @@ import { decrementCurrentStep } from "@root/quizes/actions";
 import PenaLogo from "../PenaLogo";
 import CustomAvatar from "./Avatar";
 import NavMenuItem from "./NavMenuItem";
+import { Link } from "react-router-dom";
 
 export default function Header() {
   const theme = useTheme();
@@ -25,7 +26,9 @@ export default function Header() {
         zIndex: theme.zIndex.drawer + 1,
       }}
     >
+      <Link to="/">
         <PenaLogo width={124} />
+      </Link>
       <Box
         sx={{
           display: "flex",

src/ui_kit/Header/HeaderFull.tsx

@@ -1,11 +1,4 @@
-import {
+import { Box, Container, IconButton, Typography, useTheme, useMediaQuery } from "@mui/material";
-  Box,
-  Container,
-  IconButton,
-  Typography,
-  useTheme,
-  useMediaQuery,
-} from "@mui/material";
 import NavMenuItem from "./NavMenuItem";
 import PenaLogo from "../PenaLogo";
 import WalletIcon from "@icons/WalletIcon";
@@ -13,7 +6,7 @@ import CustomAvatar from "./Avatar";
 import { Burger } from "@icons/Burger";
 import { clearAuthToken } from "@frontend/kitui";
 import { logout } from "@api/auth";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { enqueueSnackbar } from "notistack";
 import { clearUserData } from "@root/user";
 import { LogoutButton } from "@ui_kit/LogoutButton";
@@ -59,7 +52,9 @@ export default function HeaderFull() {
           style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
         />
       )}
+      <Link to="/">
         <PenaLogo width={124} />
+      </Link>
       {!isTablet && (
         <Box
           sx={{
@@ -93,10 +88,7 @@ export default function HeaderFull() {
               >
                 Мой баланс
               </Typography>
-              <Typography
+              <Typography variant="body2" color={theme.palette.brightPurple.main}>
-                variant="body2"
-                color={theme.palette.brightPurple.main}
-              >
                 00.00 руб.
               </Typography>
             </Box>

src/ui_kit/Modal/CropModal.tsx

@@ -17,7 +17,6 @@ import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
 import { canvasPreview } from "./utils/canvasPreview";
 
-
 const styleSlider: SxProps<Theme> = {
   color: "#7E2AEA",
   height: "12px",
@@ -51,7 +50,14 @@ interface Props {
   onSaveImageClick: (imageBlob: Blob) => void;
 }
 
-export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setCropModalImageBlob, onSaveImageClick, onClose }) => {
+export const CropModal: FC<Props> = ({
+  isOpen,
+  imageBlob,
+  originalImageUrl,
+  setCropModalImageBlob,
+  onSaveImageClick,
+  onClose,
+}) => {
   const theme = useTheme();
   const [crop, setCrop] = useState<Crop>();
   const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
@@ -130,7 +136,8 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
     >
-            <Box sx={{
+      <Box
+        sx={{
           position: "absolute",
           top: "50%",
           left: "50%",
@@ -140,7 +147,8 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
           padding: "20px",
           borderRadius: "8px",
           width: isMobile ? "343px" : "620px",
-            }}>
+        }}
+      >
         <Box
           sx={{
             height: "320px",
@@ -204,17 +212,18 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
             justifyContent: "space-between",
           }}
         >
-                    <IconButton onClick={() => setRotate(r => (r + 90) % 360)}>
+          <IconButton onClick={() => setRotate((r) => (r + 90) % 360)}>
             <ResetIcon />
           </IconButton>
           <Box>
-                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
-                            Размер
-                        </Typography>
             <Slider
-                            sx={[styleSlider, {
+              sx={[
+                styleSlider,
+                {
                   width: isMobile ? "350px" : "250px",
-                            }]}
+                },
+              ]}
               value={width}
               min={50}
               max={580}
@@ -225,13 +234,14 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
             />
           </Box>
           <Box>
-                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
-                            Затемнение
-                        </Typography>
             <Slider
-                            sx={[styleSlider, {
+              sx={[
+                styleSlider,
+                {
                   width: isMobile ? "350px" : "250px",
-                            }]}
+                },
+              ]}
               value={darken}
               min={0}
               max={100}
@@ -245,21 +255,26 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
             marginTop: "40px",
             width: "100%",
             display: "flex",
+            gap: "10px",
           }}
         >
           <Button
-                        onClick={handleSaveClick}
+            onClick={handleCropClick}
             disableRipple
-                        data-cy="crop-modal-save-button"
+            disabled={!completedCrop}
             sx={{
-                            height: "48px",
+              padding: "10px 20px",
-                            color: "#7E2AEA",
               borderRadius: "8px",
-                            border: "1px solid #7E2AEA",
+              background: theme.palette.brightPurple.main,
-                            marginRight: "10px",
+              fontSize: "18px",
-                            px: "20px",
+              color: "#7E2AEA",
+              border: `1px solid ${!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"}`,
+              backgroundColor: "transparent",
             }}
-                    >Сохранить</Button>
+          >
+            <CropIcon color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"} />
+            Обрезать
+          </Button>
           <Button
             onClick={handleLoadOriginalImage}
             disableRipple
@@ -270,26 +285,25 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
               color: "#7E2AEA",
               borderRadius: "8px",
               border: "1px solid #7E2AEA",
-                            marginRight: "10px",
-                            ml: "auto",
             }}
           >
             Загрузить оригинал
           </Button>
           <Button
-                        onClick={handleCropClick}
+            onClick={handleSaveClick}
             disableRipple
             variant="contained"
-                        disabled={!completedCrop}
+            data-cy="crop-modal-save-button"
             sx={{
-                            padding: "10px 20px",
+              height: "48px",
               borderRadius: "8px",
-                            background: theme.palette.brightPurple.main,
+              border: "1px solid #7E2AEA",
-                            fontSize: "18px",
+              marginRight: "10px",
+              px: "20px",
+              ml: "auto",
             }}
           >
-                        <CropIcon />
+            Сохранить
-                        Обрезать
           </Button>
         </Box>
       </Box>