From afb641c382f10bb5bcd3b2a2c6fbb46c0a1d38a5 Mon Sep 17 00:00:00 2001
From: aleksandr-raw <104529174+aleksandr-raw@users.noreply.github.com>
Date: Wed, 8 May 2024 17:53:57 +0400
Subject: [PATCH] result page refactoring completed

---
 .../ViewPublicationPage/ResultForm.tsx        | 525 +++++++++---------
 1 file changed, 268 insertions(+), 257 deletions(-)

diff --git a/lib/components/ViewPublicationPage/ResultForm.tsx b/lib/components/ViewPublicationPage/ResultForm.tsx
index 61b672d..f4c2224 100644
--- a/lib/components/ViewPublicationPage/ResultForm.tsx
+++ b/lib/components/ViewPublicationPage/ResultForm.tsx
@@ -1,275 +1,286 @@
-import { Box, Button, Link, Typography, useTheme } from "@mui/material";
+import {Box, Button, Link, Typography, useTheme} from "@mui/material";
 
-import { NameplateLogo } from "@icons/NameplateLogo";
+import {NameplateLogo} from "@icons/NameplateLogo";
 import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
 
-import { useQuizData } from "@contexts/QuizDataContext";
-import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
-import type { QuizQuestionResult } from "../../model/questionTypes/result";
-import { useQuizViewStore } from "@/stores/quizView";
-import { DESIGN_LIST } from "@/utils/designList";
-import { useEffect } from "react";
+import {useQuizData} from "@contexts/QuizDataContext";
+import {quizThemes} from "@utils/themes/Publication/themePublication";
+import {useRootContainerSize} from "../../contexts/RootContainerWidthContext";
+import type {QuizQuestionResult} from "../../model/questionTypes/result";
+import {useQuizViewStore} from "@/stores/quizView";
+import {DESIGN_LIST} from "@/utils/designList";
+import {useEffect} from "react";
 
 type ResultFormProps = {
-  resultQuestion: QuizQuestionResult;
+    resultQuestion: QuizQuestionResult;
 };
 
-export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
-  const theme = useTheme();
-  const isMobile = useRootContainerSize() < 650;
-  const isTablet = useRootContainerSize() < 1000;
-  const { settings, show_badge, quizId } = useQuizData();
-  const setCurrentQuizStep = useQuizViewStore(
-    (state) => state.setCurrentQuizStep
-  );
-  const spec = settings.cfg.spec;
+export const ResultForm = ({resultQuestion}: ResultFormProps) => {
+    const theme = useTheme();
+    const isMobile = useRootContainerSize() < 650;
+    const isTablet = useRootContainerSize() < 1100;
+    const {settings, show_badge, quizId} = useQuizData();
+    const setCurrentQuizStep = useQuizViewStore(
+        (state) => state.setCurrentQuizStep,
+    );
+    const spec = settings.cfg.spec;
 
-  useEffect(() => {
-    //@ts-ignore
-    let YM = window?.ym;
-    //@ts-ignore
-    let VP = window?._tmr;
-    if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
-      YM(
-        settings.cfg.yandexMetricNumber,
-        "reachGoal",
-        `penaquiz-result-{${resultQuestion.id}}`
-      );
-    };
-    if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
-      VP.push({
-        type: "reachGoal",
-        id: settings.cfg.vkMetricNumber,
-        goal: `penaquiz-result-{${resultQuestion.id}}`
-      });
-    };
-  }, [])
+    useEffect(() => {
+        //@ts-ignore
+        const YM = window?.ym;
+        //@ts-ignore
+        const VP = window?._tmr;
+        if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
+            YM(
+                settings.cfg.yandexMetricNumber,
+                "reachGoal",
+                `penaquiz-result-{${resultQuestion.id}}`,
+            );
+        }
+        if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
+            VP.push({
+                type: "reachGoal",
+                id: settings.cfg.vkMetricNumber,
+                goal: `penaquiz-result-{${resultQuestion.id}}`,
+            });
+        }
+    }, []);
 
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "space-between",
-        height: "100%",
-        minHeight: "100%",
-        width: "100%",
-        backgroundColor: theme.palette.background.default,
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        backgroundImage:
-          settings.cfg.design && !isMobile
-            ? `url(${DESIGN_LIST[settings.cfg.theme]})`
-            : null,
-      }}
-    >
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
-          alignItems: "center",
-          pt: "30px",
-          width: "100%",
-          height: "100%",
-          overflow: "auto",
-          background:
-            settings.cfg.design && !isMobile
-              ? quizThemes[settings.cfg.theme].isLight
-                ? "transparent"
-                : "linear-gradient(90deg,#272626, transparent)"
-              : theme.palette.background.default,
-          scrollbarWidth: "none",
-          "&::-webkit-scrollbar": {
-            width: 0,
-          },
-        }}
-      >
+    return (
         <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            flexWrap: "wrap",
-            gap: "30px",
-            mb: "7px",
-          }}
-        >
-          <Typography
             sx={{
-              fontSize: "14px",
-              color: theme.palette.text.primary,
-              wordBreak: "break-word",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "space-between",
+                height: "100%",
+                minHeight: "100%",
+                width: "100%",
+                backgroundColor: theme.palette.background.default,
+                backgroundPosition: "center",
+                backgroundSize: "cover",
+                backgroundImage:
+                    settings.cfg.design && !isMobile
+                        ? `url(${DESIGN_LIST[settings.cfg.theme]})`
+                        : null,
+                position: "relative",
             }}
-          >
-            Ваш результат:
-          </Typography>
-        </Box>
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            width: "100%",
-            maxWidth: "844px",
-            padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
-          }}
         >
-          {!resultQuestion?.content.useImage &&
-            resultQuestion.content.video && (
-              <YoutubeEmbedIframe
-                videoUrl={resultQuestion.content.video}
-                containerSX={{
-                  width: "100%",
-                  maxWidth: "844px",
-                  height: isMobile ? "100%" : "306px",
-                }}
-              />
-            )}
-          {resultQuestion?.content.useImage && resultQuestion.content.back && (
             <Box
-              sx={{ width: "100%", display: "flex", justifyContent: "center" }}
+                sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    width: "100%",
+                    height: "100%",
+                    background:
+                        settings.cfg.design && !isMobile
+                            ? quizThemes[settings.cfg.theme].isLight
+                                ? "transparent"
+                                : "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
+                            : theme.palette.background.default,
+                }}
             >
-              <Box
-                component="img"
-                src={resultQuestion.content.back}
-                sx={{
-                  width: "100%",
-                  maxWidth: "306px",
-                  height: spec ? "auto" : isMobile ? "236px" : "306px",
-                  borderRadius: "8px",
-                  objectFit: "contain",
-                }}
-              />
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        width: "100%",
+                        height: "100%",
+                        overflow: "auto",
+                        padding: "0 20px 20px",
+                        scrollbarWidth: "none",
+                        "&::-webkit-scrollbar": {
+                            width: 0,
+                        },
+                    }}
+                >
+                    <Box
+                        sx={{
+                            display: "flex",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            mb: "10px",
+                            width: "100%",
+                            maxWidth: "700px",
+                            backgroundColor: "#9A9AAF1A",
+                            borderRadius: "0 0 12px 12px",
+                            padding: "20px 20px 15px",
+                        }}
+                    >
+                        <Typography
+                            sx={{
+                                fontSize: "17px",
+                                color: "#9A9AAF",
+                                wordBreak: "break-word",
+                            }}
+                        >
+                            Ваш результат:
+                        </Typography>
+                    </Box>
+                    <Box
+                        sx={{
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "flex-start",
+                            width: "100%",
+                            maxWidth: "700px",
+                        }}
+                    >
+                        {!resultQuestion?.content.useImage &&
+                            resultQuestion.content.video && (
+                                <YoutubeEmbedIframe
+                                    videoUrl={resultQuestion.content.video}
+                                    containerSX={{
+                                        width: "100%",
+                                        maxWidth: "700px",
+                                        height: isMobile ? "100%" : "306px",
+                                    }}
+                                />
+                            )}
+                        {resultQuestion?.content.useImage &&
+                            resultQuestion.content.back && (
+                                <Box
+                                    sx={{
+                                        width: "100%",
+                                        display: "flex",
+                                        justifyContent: "center",
+                                    }}
+                                >
+                                    <img
+                                        alt="resultImage"
+                                        src={resultQuestion.content.back}
+                                        style={{
+                                            width: "100%",
+                                            height: spec ? "auto" : isMobile ? "236px" : "306px",
+                                            borderRadius: "12px",
+                                            objectFit: "cover",
+                                            overflow: "hidden",
+                                        }}
+                                    />
+                                </Box>
+                            )}
+                        {resultQuestion.description !== "" &&
+                            resultQuestion.description !== " " && (
+                                <Typography
+                                    sx={{
+                                        fontSize: "27px",
+                                        lineHeight: "32px",
+                                        fontWeight: 700,
+                                        mt: "30px",
+                                        color: theme.palette.text.primary,
+                                        wordBreak: "break-word",
+                                    }}
+                                >
+                                    {resultQuestion.description}
+                                </Typography>
+                            )}
+
+                        <Typography
+                            sx={{
+                                mt: "12px",
+                                fontSize: "17px",
+                                lineHeight: "20px",
+                                color: theme.palette.text.primary,
+                                wordBreak: "break-word",
+                            }}
+                        >
+                            {resultQuestion.title}
+                        </Typography>
+
+                        {resultQuestion.content.text !== "" &&
+                            resultQuestion.content.text !== " " && (
+                                <Typography
+                                    sx={{
+                                        fontSize: "17px",
+                                        lineHeight: "20px",
+                                        mt: "25px ",
+                                        wordBreak: "break-word",
+                                        color: theme.palette.text.primary,
+                                    }}
+                                >
+                                    {resultQuestion.content.text}
+                                </Typography>
+                            )}
+                    </Box>
+                </Box>
+                {show_badge && (
+                    <Box
+                        component={Link}
+                        target={"_blank"}
+                        href={`https://${
+                            window.location.hostname.includes("s") ? "s" : ""
+                        }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
+                        sx={{
+                            display: "flex",
+                            alignItems: "center",
+                            alignSelf: isMobile ? "center" : "end",
+                            margin: isMobile ? "15px 0 0" : "15px 25px 0 0",
+                            gap: "10px",
+                            textDecoration: "none",
+                            mb: "15px",
+                            position: isTablet || isMobile ? "sticky" : "absolute",
+                            bottom: "90px",
+                        }}
+                    >
+                        <NameplateLogo
+                            style={{
+                                fontSize: "23px",
+                                color: quizThemes[settings.cfg.theme].isLight
+                                    ? "#000000"
+                                    : "#F5F7FF",
+                            }}
+                        />
+                    </Box>
+                )}
+                <Box
+                    sx={{
+                        width: "100%",
+                        flexDirection: "column",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        borderTop: "1px solid #9A9AAF80",
+                        p: "20px",
+                        position: "sticky",
+                        bottom: 0,
+                    }}
+                >
+                    {settings.cfg.resultInfo.showResultForm === "before" &&
+                        !settings.cfg.score && (
+                            <Button
+                                onClick={() => setCurrentQuizStep("contactform")}
+                                variant="contained"
+                                sx={{
+                                    p: "10px 20px",
+                                    width: "auto",
+                                    height: "50px",
+                                }}
+                            >
+                                {resultQuestion.content.hint.text || "Узнать подробнее"}
+                            </Button>
+                        )}
+                    {settings.cfg.resultInfo.showResultForm === "after" &&
+                        resultQuestion.content.redirect && (
+                            <Button
+                                href={
+                                    resultQuestion.content.redirect.includes("https")
+                                        ? resultQuestion.content.redirect
+                                        : `https://${resultQuestion.content.redirect}`
+                                }
+                                variant="contained"
+                                sx={{
+                                    p: "10px 20px",
+                                    width: "auto",
+                                }}
+                            >
+                                {resultQuestion.content.hint.text || "Перейти на сайт"}
+                            </Button>
+                        )}
+                </Box>
             </Box>
-          )}
-          {resultQuestion.description !== "" &&
-            resultQuestion.description !== " " && (
-              <Typography
-                sx={{
-                  fontSize: "24px",
-                  fontWeight: 700,
-                  mt: "25px",
-                  color: theme.palette.text.primary,
-                  wordBreak: "break-word",
-                }}
-              >
-                {resultQuestion.description}
-              </Typography>
-            )}
-
-          <Typography
-            sx={{
-              mt: "20px",
-              color: theme.palette.text.primary,
-              wordBreak: "break-word",
-            }}
-          >
-            {resultQuestion.title}
-          </Typography>
-
-          {resultQuestion.content.text !== "" &&
-            resultQuestion.content.text !== " " && (
-              <Typography
-                sx={{
-                  fontSize: "18px",
-                  mt: "30px ",
-                  wordBreak: "break-word",
-                  color: theme.palette.text.primary,
-                }}
-              >
-                {resultQuestion.content.text}
-              </Typography>
-            )}
         </Box>
-
-        <Box width="100%">
-          <Box
-            sx={{
-              display: "flex",
-              width: "100%",
-              justifyContent: "end",
-              px: "20px",
-            }}
-          >
-            {show_badge && (
-              <Box
-                component={Link}
-                target={"_blank"}
-                href={`https://${window.location.hostname.includes("s") ? "s" : ""
-                  }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  mt: "15px",
-                  gap: "10px",
-                  textDecoration: "none",
-                  mb: "15px",
-                }}
-              >
-                <NameplateLogo
-                  style={{
-                    fontSize: "23px",
-                    color: quizThemes[settings.cfg.theme].isLight
-                      ? "#000000"
-                      : "#F5F7FF",
-                  }}
-                />
-
-              </Box>
-            )}
-          </Box>
-
-          <Box
-            sx={{
-              // boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
-              width: "100%",
-              flexDirection: "column",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              borderTop: "1px solid #9A9AAF80",
-              p:
-                (settings.cfg.resultInfo.showResultForm === "before" &&
-                  !settings.cfg.score) ||
-                  (settings.cfg.resultInfo.showResultForm === "after" &&
-                    resultQuestion.content.redirect)
-                  ? "20px"
-                  : "0",
-            }}
-          >
-            {settings.cfg.resultInfo.showResultForm === "before" &&
-              !settings.cfg.score && (
-                <Button
-                  onClick={() => setCurrentQuizStep("contactform")}
-                  variant="contained"
-                  sx={{
-                    p: "10px 20px",
-                    width: "auto",
-                    height: "50px",
-                  }}
-                >
-                  {resultQuestion.content.hint.text || "Узнать подробнее"}
-                </Button>
-              )}
-            {settings.cfg.resultInfo.showResultForm === "after" &&
-              resultQuestion.content.redirect && (
-                <Button
-                  href={
-                    resultQuestion.content.redirect.includes("https")
-                      ? resultQuestion.content.redirect
-                      : `https://${resultQuestion.content.redirect}`
-                  }
-                  variant="contained"
-                  sx={{ p: "10px 20px", width: "auto", height: "50px" }}
-                >
-                  {resultQuestion.content.hint.text || "Перейти на сайт"}
-                </Button>
-              )}
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  );
+    );
 };