feat: new logic

2024-01-10 21:02:37 +03:00 · 2024-01-10 21:02:37 +03:00 · 42b814cdf9
commit 42b814cdf9
parent 78204a4b76
11 changed files with 297 additions and 252 deletions
--- a/src/model/questionTypes/result.ts
+++ b/src/model/questionTypes/result.ts
@ -17,5 +17,6 @@ export interface QuizQuestionResult extends QuizQuestionBase {
    rule: QuestionBranchingRule,
    hint: QuestionHint;
    autofill: boolean;
+    redirect: string
  };
 }
--- a/src/model/quizSettings.ts
+++ b/src/model/quizSettings.ts
@ -6,14 +6,33 @@ import MegaphoneIcon from "@icons/MegaphoneIcon";
 import QuestionIcon from "@icons/QuestionIcon";
 import QuestionsMapIcon from "@icons/QuestionsMapIcon";

-
 export const quizSetupSteps = [
-    { stepperText: "Настройка стартовой страницы", sidebarText: "Стартовая страница", sidebarIcon: LayoutIcon },
-    { stepperText: "Задайте вопросы", sidebarText: "Вопросы", sidebarIcon: QuestionIcon },
-    { stepperText: "Настройте авторезультаты", sidebarText: "Результаты", sidebarIcon: ChartPieIcon },
+  {
+    stepperText: "Настройка стартовой страницы",
+    sidebarText: "Стартовая страница",
+    sidebarIcon: LayoutIcon,
+  },
+  {
+    stepperText: "Задайте вопросы",
+    sidebarText: "Вопросы",
+    sidebarIcon: QuestionIcon,
+  },
+  {
+    stepperText: "Настройте авторезультаты",
+    sidebarText: "Результаты",
+    sidebarIcon: ChartPieIcon,
+  },
  // { stepperText: "Оценка графа карты вопросов", sidebarText: "Карта вопросов", sidebarIcon: QuestionsMapIcon },
-    { stepperText: "Настройте форму контактов", sidebarText: "Форма контактов", sidebarIcon: ContactBookIcon },
-    { stepperText: "Установите квиз", sidebarText: "Установка квиза", sidebarIcon: FlowArrowIcon },
+  {
+    stepperText: "Настройте форму контактов",
+    sidebarText: "Форма контактов",
+    sidebarIcon: ContactBookIcon,
+  },
+  {
+    stepperText: "Установите квиз",
+    sidebarText: "Установка квиза",
+    sidebarIcon: FlowArrowIcon,
+  },
  // { stepperText: "Запустите рекламу", sidebarText: "Запуск рекламы", sidebarIcon: MegaphoneIcon },
 ] as const;

@ -33,15 +52,27 @@ export interface QuizConfig {
  startpageType: QuizStartpageType;
  results: QuizResultsType;
  haveRoot: string | null;
-    theme: "StandardTheme" | "StandardDarkTheme" | "PinkTheme" | "PinkDarkTheme" | "BlackWhiteTheme" | "OliveTheme" | "YellowTheme" | "GoldDarkTheme" | "PurpleTheme" | "BlueTheme" | "BlueDarkTheme";
+  theme:
+    | "StandardTheme"
+    | "StandardDarkTheme"
+    | "PinkTheme"
+    | "PinkDarkTheme"
+    | "BlackWhiteTheme"
+    | "OliveTheme"
+    | "YellowTheme"
+    | "GoldDarkTheme"
+    | "PurpleTheme"
+    | "BlueTheme"
+    | "BlueDarkTheme";
  resultInfo: {
-        when: 'before' | 'after' | 'email',
-        share: true | false,
-        replay: true | false,
-        theme: string,
-        reply: string,
-        replname: string,
-    }
+    when: "email" | "";
+    share: true | false;
+    replay: true | false;
+    theme: string;
+    reply: string;
+    replname: string;
+    showResultForm: "before" | "after";
+  };
  startpage: {
    description: string;
    button: string;
@ -67,7 +98,7 @@ export interface QuizConfig {
    phone: FCField;
    text: FCField;
    address: FCField;
-        button: string
+    button: string;
  };
  info: {
    phonenumber: string;
@ -80,12 +111,12 @@ export interface QuizConfig {
 }

 type FCField = {
-    text: string
-    innerText: string
-    key: string
-    required: boolean
-    used: boolean
-}
+  text: string;
+  innerText: string;
+  key: string;
+  required: boolean;
+  used: boolean;
+};

 export const defaultQuizConfig: QuizConfig = {
  type: null,
@ -95,12 +126,13 @@ export const defaultQuizConfig: QuizConfig = {
  haveRoot: null,
  theme: "StandardTheme",
  resultInfo: {
-        when: 'after',
+    when: "",
    share: false,
    replay: false,
    theme: "",
    reply: "",
    replname: "",
+    showResultForm: "after",
  },
  startpage: {
    description: "",
@ -134,37 +166,37 @@ export const defaultQuizConfig: QuizConfig = {
      innerText: "",
      key: "",
      required: false,
-            used: true
+      used: true,
    },
    email: {
      text: "",
      innerText: "",
      key: "",
      required: false,
-            used: true
+      used: true,
    },
    phone: {
      text: "",
      innerText: "",
      key: "",
      required: false,
-            used: true
+      used: true,
    },
    text: {
      text: "",
      innerText: "",
      key: "",
      required: false,
-            used: false
+      used: false,
    },
    address: {
      text: "",
      innerText: "",
      key: "",
      required: false,
-            used: false
+      used: false,
    },
-        button: ""
+    button: "",
  },
  meta: "",
 };
--- a/src/model/settingsData.ts
+++ b/src/model/settingsData.ts
@ -9,8 +9,6 @@ export type QuizType = "quiz" | "form";

 export type QuizResultsType = true | null;

-export type QuizResultInfoWhen = 'before' | 'after' | 'email';
-
 export type FCField = {
    text: string
    innerText: string
@ -61,12 +59,13 @@ export interface QuizConfig {
    haveRoot: string;
    theme: "StandardTheme" | "StandardDarkTheme" | "PinkTheme" | "PinkDarkTheme" | "BlackWhiteTheme" | "OliveTheme" | "YellowTheme" | "GoldDarkTheme" | "PurpleTheme" | "BlueTheme" | "BlueDarkTheme";
    resultInfo: {
-        when: QuizResultInfoWhen;
+        when: "email" | "";
        share: boolean;
        replay: boolean;
        theme: string;
        reply: string;
        replname: string;
+        showResultForm: "before" | "after";
    };
    startpage: {
        description: string;
--- a/src/pages/ViewPublicationPage/ContactForm.tsx
+++ b/src/pages/ViewPublicationPage/ContactForm.tsx
@ -241,7 +241,7 @@ export const ContactForm = ({
                          enqueueSnackbar("повторите попытку позже")
                        }
  
-                        if ((settings?.cfg.resultInfo.when === "after" || settings?.cfg.resultInfo.when === "email") && !checkEmptyData({ resultData: resultQuestion })) {
+                        if ((settings?.cfg.resultInfo.showResultForm === "after" || settings?.cfg.resultInfo.when === "email") && !checkEmptyData({ resultData: resultQuestion })) {
                          setShowContactForm(false)
                          setShowResultForm(true)
                        }
--- a/src/pages/ViewPublicationPage/Footer.tsx
+++ b/src/pages/ViewPublicationPage/Footer.tsx
@ -12,6 +12,8 @@ import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
 import { modes } from "../../utils/themes/Publication/themePublication";
 import { checkEmptyData } from "./tools/checkEmptyData";

+import type { QuizQuestionResult } from "@model/questionTypes/result";
+
 type FooterProps = {
  setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
  question: AnyTypedQuizQuestion;
@ -85,17 +87,12 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
    }
  }, [question, answers]);

-  const showResult = (nextQuestion: any) => {
-    if (nextQuestion && settings?.cfg.resultInfo.when === "email") {
-      setShowContactForm(true);
-      return;
-    }
-
+  const showResult = (nextQuestion: QuizQuestionResult) => {
    const isEmpty = checkEmptyData({ resultData: nextQuestion })
    console.log("isEmpty", isEmpty)

    if (nextQuestion) {
-      if (nextQuestion && settings?.cfg.resultInfo.when === "before") {
+      if (nextQuestion && settings?.cfg.resultInfo.showResultForm === "before") {
        if (isEmpty) {
          setShowContactForm(true); //до+пустая = кидать на ФК

@ -104,7 +101,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh

        }
      }
-      if (nextQuestion && (settings?.cfg.resultInfo.when === "after" || settings?.cfg.resultInfo.when === "email")) {
+      if (nextQuestion && settings?.cfg.resultInfo.showResultForm === "after") {
        if (isEmpty) {
          setShowContactForm(true); //после+пустая

--- a/src/pages/ViewPublicationPage/Question.tsx
+++ b/src/pages/ViewPublicationPage/Question.tsx
@ -103,7 +103,7 @@ export const Question = ({ questions }: QuestionProps) => {
          )}
        </Box>
      )}
-      {showResultForm && settings?.cfg.resultInfo.when === "before" && (
+      {showResultForm && settings?.cfg.resultInfo.showResultForm === "before" && (
        <ResultForm
          currentQuestion={currentQuestion}
          showContactForm={showContactForm}
@ -119,7 +119,7 @@ export const Question = ({ questions }: QuestionProps) => {
          setShowResultForm={setShowResultForm}
        />
      )}
-      {showResultForm && (settings?.cfg.resultInfo.when === "after" || settings?.cfg.resultInfo.when === "email") && (
+      {showResultForm && settings?.cfg.resultInfo.showResultForm === "after" && (
        <ResultForm
          currentQuestion={currentQuestion}
          showContactForm={showContactForm}
--- a/src/pages/ViewPublicationPage/ResultForm.tsx
+++ b/src/pages/ViewPublicationPage/ResultForm.tsx
@ -1,12 +1,19 @@
-import { Box, Typography, Button, useMediaQuery, useTheme } from "@mui/material";
+import {
+  Box,
+  Typography,
+  Button,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";

-import { useQuestionsStore } from "@root/quizData/store"
+import { useQuestionsStore } from "@root/quizData/store";

-import type { QuizQuestionResult } from "@model/questionTypes/result";
-import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe"
+import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
 import { NameplateLogo } from "@icons/NameplateLogo";
 import { modes } from "../../utils/themes/Publication/themePublication";

+import type { QuizQuestionResult } from "../../model/questionTypes/result";
+
 type ResultFormProps = {
  currentQuestion: any;
  showContactForm: boolean;
@ -18,32 +25,31 @@ export const ResultForm = ({
  showContactForm,
  setShowContactForm,
  setShowResultForm,
-
 }: ResultFormProps) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
-  const { settings, items } = useQuestionsStore()
+  const { settings, items } = useQuestionsStore();
  const mode = modes;

-  const searchResult = () => {
+  const searchResult = (): QuizQuestionResult => {
    if (Boolean(settings?.cfg.haveRoot)) {
      //ищём для ветвления
      return (items.find(
        (question) =>
          question.type === "result" &&
-          question.content.rule.parentId === currentQuestion.content.id,
+          question.content.rule.parentId === currentQuestion.content.id
      ) ||
        items.find(
          (question) =>
            question.type === "result" &&
-            question.content.rule.parentId === "line",
-        ))
+            question.content.rule.parentId === "line"
+        )) as QuizQuestionResult;
    } else {
      return items.find(
        (question) =>
          question.type === "result" &&
-          question.content.rule.parentId === "line",
-      ) 
+          question.content.rule.parentId === "line"
+      ) as QuizQuestionResult;
    }
  };
  const resultQuestion = searchResult();
@ -52,14 +58,11 @@ export const ResultForm = ({
    setShowResultForm(false);
    setShowContactForm(true);
  };
-  console.log(resultQuestion)
+  console.log(resultQuestion);
  if (resultQuestion === null || resultQuestion === undefined) {
-
-    followNextForm()
-    return <></>
-
+    followNextForm();
+    return <></>;
  } else {
-
    return (
      <Box
        sx={{
@ -70,7 +73,7 @@ export const ResultForm = ({
          height: isMobile ? undefined : "100vh",
          width: "100vw",
          pt: "28px",
-          overflow: "auto"
+          overflow: "auto",
        }}
      >
        <Box
@ -84,7 +87,8 @@ export const ResultForm = ({
        >
          {
            //@ts-ignore
-            !resultQuestion?.content.useImage && resultQuestion.content.video && (
+            !resultQuestion?.content.useImage &&
+              resultQuestion.content.video && (
                <YoutubeEmbedIframe
                  //@ts-ignore
                  videoUrl={resultQuestion.content.video}
@ -93,7 +97,8 @@ export const ResultForm = ({
                    height: isMobile ? "100%" : "280px",
                  }}
                />
-            )}
+              )
+          }
          {
            //@ts-ignore
            resultQuestion?.content.useImage && resultQuestion.content.back && (
@ -105,7 +110,8 @@ export const ResultForm = ({
                  height: isMobile ? "100%" : "280px",
                }}
              ></Box>
-            )}
+            )
+          }
          {resultQuestion.description !== "" &&
            resultQuestion.description !== " " && (
              <Typography
@ -143,9 +149,11 @@ export const ResultForm = ({
                >
                  {
                    //@ts-ignore
-                  resultQuestion.content.text}
+                    resultQuestion.content.text
+                  }
                </Typography>
-            )}
+              )
+          }
        </Box>

        <Box width="100%">
@ -184,8 +192,6 @@ export const ResultForm = ({
            </Box>
          </Box>

-          {settings?.cfg.resultInfo.when === "before" && (
-            <>
          <Box
            sx={{
              boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
@ -197,6 +203,7 @@ export const ResultForm = ({
              p: "20px",
            }}
          >
+            {settings?.cfg.resultInfo.showResultForm === "before" && (
              <Button
                onClick={followNextForm}
                variant="contained"
@ -208,12 +215,20 @@ export const ResultForm = ({
              >
                {resultQuestion.content.hint.text || "Узнать подробнее"}
              </Button>
-              </Box>
-            </>
+            )}
+            {settings?.cfg.resultInfo.showResultForm === "after" &&
+              resultQuestion.content.redirect && (
+                <Button
+                  href={resultQuestion.content.redirect}
+                  variant="contained"
+                  sx={{ p: "10px 20px", width: "210px", height: "50px" }}
+                >
+                  {resultQuestion.content.hint.text || "Перейти на сайт"}
+                </Button>
              )}
          </Box>
        </Box>
+      </Box>
    );
-
  }
 };
--- a/src/pages/ViewPublicationPage/index.tsx
+++ b/src/pages/ViewPublicationPage/index.tsx
@ -18,7 +18,7 @@ const QID =
  process.env.NODE_ENV === "production" ?
    window.location.pathname.replace(/\//g, '')
    :
-    "2363ad2c-0c19-4f51-80c0-ed2242daa0c4"
+    "0bed8483-3016-4bca-b8e0-a72c3146f18b"


 export const ViewPage = () => {
--- a/src/pages/ViewPublicationPage/questions/Page.tsx
+++ b/src/pages/ViewPublicationPage/questions/Page.tsx
@ -31,6 +31,7 @@ export const Page = ({ currentQuestion }: PageProps) => {
        currentQuestion.content.useImage ? (
          <Box sx={{ borderRadius: "12px", border: "1px solid #9A9AAF", overflow: "hidden" }}>
            <img
+              key={currentQuestion.id}
              src={currentQuestion.content.back}
              alt=""
              style={{
--- a/src/pages/ViewPublicationPage/questions/Variant.tsx
+++ b/src/pages/ViewPublicationPage/questions/Variant.tsx
@ -114,6 +114,7 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
        {currentQuestion.content.back && currentQuestion.content.back !== " " && (
          <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
            <img
+              key={currentQuestion.id}
              src={currentQuestion.content.back}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              alt=""
--- a/src/pages/ViewPublicationPage/tools/replaceSpacesToEmptyLines.ts
+++ b/src/pages/ViewPublicationPage/tools/replaceSpacesToEmptyLines.ts
@ -11,7 +11,7 @@ export const replaceSpacesToEmptyLines = <T = unknown>(object: T): T => {

  for (const [key, value] of Object.entries(object)) {
    if (typeof value === "string") {
-        result[key] = value.replace(/\" \"/g, '""');
+      result[key] = value.replace(" ", "").replace(/\" \"/g, '""');

      continue;
    }
@ -26,5 +26,4 @@ export const replaceSpacesToEmptyLines = <T = unknown>(object: T): T => {
  }

  return result as T;
-  };
-  
+};