Merge branch 'dev' into formcontact

2023-12-16 07:32:26 +03:00 · 2023-12-16 07:32:26 +03:00 · 477b7163b7
commit 477b7163b7
parent 0341a73b3e 0cc07e48f8
9 changed files with 645 additions and 660 deletions
--- a/cypress/e2e/quizPublish.cy.ts
+++ b/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();
+    });
  });
 });
--- a/src/assets/icons/CropIcon.tsx
+++ b/src/assets/icons/CropIcon.tsx
@ -1,40 +1,10 @@
 import { FC, SVGProps } from "react";

-export const CropIcon: FC = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    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"
-    />
+export const CropIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M6 6H2.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M6 2.25V18H21.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M18 15V6H9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M18 21.75V18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
 );
--- a/src/pages/Landing/HeaderLanding.tsx
+++ b/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',*/}
--- a/src/pages/Landing/headerMobileLanding.tsx
+++ b/src/pages/Landing/headerMobileLanding.tsx
@ -53,10 +53,7 @@ const Transition = React.forwardRef(function Transition(
 });

 const height = "80px";
-export default function FullScreenDialog({
-                                             theme = "dark",
-                                             bgColor = "#F2F3F7",
-                                         }: Props) {
+export default function FullScreenDialog({ 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 }}>
-                    <Logotip width={150}/>
+        <Box sx={{ bgcolor: "none", paddingTop: isMobile ? "6px" : 0 }}>
+          <Link to="/">
+            <Logotip width={150} />
+          </Link>
        </Box>
        {!isMobile && (
          <Button
@ -144,16 +142,8 @@ export default function FullScreenDialog({
                pt: "12px",
              }}
            >
-                            {isMobile && (
-                                <Logotip width={150}/>
-                            )}
-                            <IconButton
-                                sx={{ ml: "auto" }}
-                                edge="start"
-                                color="inherit"
-                                onClick={handleClose}
-                                aria-label="close"
-                            >
+              {isMobile && <Logotip width={150} />}
+              <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 } }} />
    </>
  );
 }
--- a/src/pages/ResultPage/FirstEntry.tsx
+++ b/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) => {
-        return question.type !== null && question.content.rule.parentId.length !== 0 && question.content.rule.children.length === 0
-      })
-      .forEach(question => {
-        createFrontResult(quiz.id, question.content.id)
+        .filter((question: AnyTypedQuizQuestion) => {
+          return (
+            question.type !== null &&
+            question.content.rule.parentId.length !== 0 &&
+            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>
    </>
  );
-}
+};
--- a/src/pages/createQuize/MyQuizzesFull.tsx
+++ b/src/pages/createQuize/MyQuizzesFull.tsx
@ -1,12 +1,4 @@
-import {
-    Box,
-    Button,
-    SxProps,
-    Theme,
-    Typography,
-    useMediaQuery,
-    useTheme,
-} from "@mui/material";
+import { 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({
-    outerContainerSx: sx,
-    children,
-}: Props) {
+export default function MyQuizzesFull({ 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 => (
-                            <QuizCard
-                                key={quiz.id}
-                                quiz={quiz}
-                                openCount={0}
-                                applicationCount={0}
-                                conversionPercent={0}
-                            />
+            {quizes.map((quiz) => (
+              <QuizCard key={quiz.id} quiz={quiz} openCount={0} applicationCount={0} conversionPercent={0} />
            ))}
          </Box>
          {children}
--- a/src/ui_kit/Header/Header.tsx
+++ b/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",
--- a/src/ui_kit/Header/HeaderFull.tsx
+++ b/src/ui_kit/Header/HeaderFull.tsx
@ -1,11 +1,4 @@
-import {
-  Box,
-  Container,
-  IconButton,
-  Typography,
-  useTheme,
-  useMediaQuery,
-} from "@mui/material";
+import { 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
-                variant="body2"
-                color={theme.palette.brightPurple.main}
-              >
+              <Typography variant="body2" color={theme.palette.brightPurple.main}>
                00.00 руб.
              </Typography>
            </Box>
--- a/src/ui_kit/Modal/CropModal.tsx
+++ b/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>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</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>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</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",
-                            color: "#7E2AEA",
+              padding: "10px 20px",
              borderRadius: "8px",
-                            border: "1px solid #7E2AEA",
-                            marginRight: "10px",
-                            px: "20px",
+              background: theme.palette.brightPurple.main,
+              fontSize: "18px",
+              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,
-                            fontSize: "18px",
+              border: "1px solid #7E2AEA",
+              marginRight: "10px",
+              px: "20px",
+              ml: "auto",
            }}
          >
-                        <CropIcon />
-                        Обрезать
+            Сохранить
          </Button>
        </Box>
      </Box>