From e227ebbf2559464b6aaec4e51acf602ae7b5afff Mon Sep 17 00:00:00 2001
From: Tamara <tamara.zelenko555@yandex.ru>
Date: Mon, 11 Mar 2024 22:49:04 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B0?=
 =?UTF-8?q?=20=D1=83=D1=81=D1=82=D0=B0=D0=BD=D0=BE=D0=B2=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D0=BA=D0=B2=D0=B8=D0=B7=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/InstallQuiz/InstallQuiz.tsx   | 207 +++++++++++++++++++++++-
 src/pages/InstallQuiz/InstallQzCode.tsx | 152 ++++++++---------
 2 files changed, 281 insertions(+), 78 deletions(-)

diff --git a/src/pages/InstallQuiz/InstallQuiz.tsx b/src/pages/InstallQuiz/InstallQuiz.tsx
index b955059b..038f8686 100644
--- a/src/pages/InstallQuiz/InstallQuiz.tsx
+++ b/src/pages/InstallQuiz/InstallQuiz.tsx
@@ -44,6 +44,7 @@ import InstallQzCode from "./InstallQzCode";
 import { 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";
 
@@ -56,6 +57,7 @@ export default function InstallQuiz() {
   };
 
   const [openVk, setOpenVk] = React.useState(false);
+  const [stepState, setStepState] = React.useState("step1");
   const handleOpenVk = () => setOpenVk(true);
   const handleCloseVk = () => setOpenVk(false);
 
@@ -77,7 +79,14 @@ export default function InstallQuiz() {
 
   return (
     <>
-      <Box sx={{ marginTop: "60px", display: "flex", gap: "40px" }}>
+      <Box
+        sx={{
+          marginTop: "60px",
+          display: "flex",
+          gap: "40px",
+          flexDirection: "column",
+        }}
+      >
         <Paper
           sx={{
             maxWidth: "522px",
@@ -258,6 +267,200 @@ export default function InstallQuiz() {
             </Typography>
           </Box>
         </Paper>
+        <Box
+          sx={{
+            backgroundColor: "#ffffff",
+            padding: "20px",
+            mt: "40px",
+            borderRadius: "12px",
+            maxWidth: "1160px",
+            boxShadow:
+              "0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", gap: "30px" }}>
+            <Typography variant="h5" sx={{ paddingRight: "30px" }}>
+              Установка квизов на сайте
+            </Typography>
+            <ButtonBase
+              onClick={() => {
+                setStepState("step1");
+              }}
+            >
+              <OneIconBorder
+                color={
+                  stepState === "step1" ? "#FC712F" : theme.palette.grey2.main
+                }
+              />
+              <Typography
+                sx={{
+                  color:
+                    stepState === "step1"
+                      ? "#FC712F"
+                      : theme.palette.grey2.main,
+                }}
+              >
+                Способ установки
+              </Typography>
+            </ButtonBase>
+            <ButtonBase
+              onClick={() => {
+                setStepState("step2");
+              }}
+            >
+              <NumberTwo
+                color={
+                  stepState === "step2" ? "#FC712F" : theme.palette.grey2.main
+                }
+              />
+              <Typography
+                sx={{
+                  color:
+                    stepState === "step2"
+                      ? "#FC712F"
+                      : theme.palette.grey2.main,
+                }}
+              >
+                Вставить код на сайт
+              </Typography>
+            </ButtonBase>
+          </Box>
+
+          <Box
+            sx={{
+              padding: "20px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "30px",
+            }}
+          >
+            {stepState === "step1" ? (
+              <ButtonBase
+                onClick={() => {
+                  setStepState("step2");
+                }}
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "start",
+                  alignItems: "start",
+                  maxWidth: "205px",
+                  gap: "15px",
+                }}
+              >
+                <img src={InBidySite} />
+                <Typography>В тело сайта</Typography>
+                <Typography
+                  sx={{
+                    fontSize: "16px",
+                    color: theme.palette.grey2.main,
+                    textAlign: "start",
+                  }}
+                >
+                  Задайте свои размеры и встройте в сайт
+                </Typography>
+              </ButtonBase>
+            ) : (
+              <>
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    flexDirection: "column",
+                  }}
+                >
+                  <Box
+                    sx={{
+                      maxWidth: "520px",
+                      width: "100%",
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "20px",
+                    }}
+                  >
+                    <Typography>1. Код вставки опросника</Typography>
+                    <Typography sx={{ color: theme.palette.grey2.main }}>
+                      Установите код в то место, где должен быть опросник
+                    </Typography>
+                    <TextField
+                      id="outlined-multiline-static"
+                      multiline
+                      rows={9}
+                      value={`<div id="idpena"></div> <script type="module"> import widget from "https://s.hbpn.link/export/pub.js"; widget.create({ selector: "idpena", quizId: ${quiz.qid} }) </script>`}
+                      sx={{
+                        "& .MuiInputBase-root": {
+                          maxWidth: "520px",
+                          width: "100%",
+                          backgroundColor: theme.palette.background.default,
+                          fontSize: "18px",
+                          alignItems: "flex-start",
+                        },
+                      }}
+                      InputProps={{
+                        endAdornment: (
+                          <InputAdornment position="start">
+                            <IconButton
+                              edge="end"
+                              sx={{ marginTop: "22px" }}
+                              onClick={() =>
+                                navigator.clipboard.writeText(
+                                  document.getElementById(
+                                    "outlined-multiline-static",
+                                  ).value,
+                                )
+                              }
+                            >
+                              <CopyIcon
+                                color={"#ffffff"}
+                                bgcolor={theme.palette.brightPurple.main}
+                              />
+                            </IconButton>
+                          </InputAdornment>
+                        ),
+                      }}
+                    />
+                  </Box>
+                </Box>
+                <Box
+                  sx={{
+                    background: "#EEE4FC",
+                    border: "1px solid #7E2AEA",
+                    padding: "20px 50px 20px 20px",
+                    borderRadius: "8px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "20px",
+                    marginBottom: "20px",
+                  }}
+                >
+                  <Typography>
+                    Код нужно вставить один раз. Изменения в самом quiz будут
+                    отображаться автоматически после сохранения.
+                  </Typography>
+                </Box>
+              </>
+            )}
+          </Box>
+        </Box>
+
+        <Box
+          sx={{
+            display: "flex",
+            gap: "8px",
+            justifyContent: "end",
+            mt: "30px",
+          }}
+        >
+          <Button
+            variant="outlined"
+            sx={{ padding: "10px 20px", borderRadius: "8px" }}
+          >
+            <ArrowLeft />
+          </Button>
+          <Button variant="contained" onClick={incrementCurrentStep}>
+            Запустить рекламу
+          </Button>
+        </Box>
       </Box>
     </>
   );
@@ -532,7 +735,7 @@ export default function InstallQuiz() {
 //           <OneIconBorder color={"#FC712F"} />
 //           <Typography sx={{ color: "#FC712F" }}>Способ установки</Typography>
 //         </Box>
-
+//
 //         <Box
 //           sx={{
 //             padding: "20px",
diff --git a/src/pages/InstallQuiz/InstallQzCode.tsx b/src/pages/InstallQuiz/InstallQzCode.tsx
index 69af42e2..f2cd65ce 100644
--- a/src/pages/InstallQuiz/InstallQzCode.tsx
+++ b/src/pages/InstallQuiz/InstallQzCode.tsx
@@ -29,9 +29,9 @@ export default function InstallQzCode() {
             gap: "20px",
           }}
         >
-          <Typography>1. Код инициализации</Typography>
+          <Typography>1. Код вставки опросника</Typography>
           <Typography sx={{ color: theme.palette.grey2.main }}>
-            Вставьте блок head в начале страницы
+            Установите код в то место, где должен быть опросник
           </Typography>
           <TextField
             id="outlined-multiline-static"
@@ -67,77 +67,77 @@ export default function InstallQzCode() {
             }}
           />
         </Box>
-        <Box
-          sx={{
-            maxWidth: "520px",
-            width: "100%",
-            display: "flex",
-            flexDirection: "column",
-            gap: "20px",
-          }}
-        >
-          <Typography>2. Код кнопки</Typography>
-          <Typography sx={{ color: theme.palette.grey2.main }}>
-            Установите код в то место, где должна быть кнопка открытия quiz
-          </Typography>
-          <TextField
-            id="outlined-multiline-static"
-            multiline
-            rows={9}
-            value="<script>
-                                (function(w, d, s, o){
-                                var j = d.createElement(s); j.async = true; j.src = //script.marquiz.ru/v2.js';j.onload = function() {
-                                if (document.readyState !== 'loading') Marquiz.init(o);
-                                else document.addEventListener('DOMContentLoaded', function() {
-                                Marquiz.init(o);
-                                    });"
-            sx={{
-              "& .MuiInputBase-root": {
-                backgroundColor: theme.palette.background.default,
-                fontSize: "18px",
-                alignItems: "flex-start",
-              },
-            }}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="start">
-                  <IconButton edge="end" sx={{ marginTop: "22px" }}>
-                    <CopyIcon
-                      color={"#ffffff"}
-                      bgcolor={theme.palette.brightPurple.main}
-                    />
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
-          />
-          <Box>
-            <Button variant="contained">Отправить код программисту</Button>
-            <Box sx={{ display: "flex" }}>
-              <Link
-                component="button"
-                variant="body2"
-                sx={{ color: theme.palette.brightPurple.main }}
-                // onClick={() => {
-                // }}
-              >
-                Инструкция к платформам
-              </Link>
-              <IconButton>
-                <InfoIcon />
-              </IconButton>
-            </Box>
-          </Box>
-        </Box>
+        {/*<Box*/}
+        {/*  sx={{*/}
+        {/*    maxWidth: "520px",*/}
+        {/*    width: "100%",*/}
+        {/*    display: "flex",*/}
+        {/*    flexDirection: "column",*/}
+        {/*    gap: "20px",*/}
+        {/*  }}*/}
+        {/*>*/}
+        {/*  <Typography>2. Код кнопки</Typography>*/}
+        {/*  <Typography sx={{ color: theme.palette.grey2.main }}>*/}
+        {/*    Установите код в то место, где должна быть кнопка открытия quiz*/}
+        {/*  </Typography>*/}
+        {/*  <TextField*/}
+        {/*    id="outlined-multiline-static"*/}
+        {/*    multiline*/}
+        {/*    rows={9}*/}
+        {/*    value="<script>*/}
+        {/*                        (function(w, d, s, o){*/}
+        {/*                        var j = d.createElement(s); j.async = true; j.src = //script.marquiz.ru/v2.js';j.onload = function() {*/}
+        {/*                        if (document.readyState !== 'loading') Marquiz.init(o);*/}
+        {/*                        else document.addEventListener('DOMContentLoaded', function() {*/}
+        {/*                        Marquiz.init(o);*/}
+        {/*                            });"*/}
+        {/*    sx={{*/}
+        {/*      "& .MuiInputBase-root": {*/}
+        {/*        backgroundColor: theme.palette.background.default,*/}
+        {/*        fontSize: "18px",*/}
+        {/*        alignItems: "flex-start",*/}
+        {/*      },*/}
+        {/*    }}*/}
+        {/*    InputProps={{*/}
+        {/*      endAdornment: (*/}
+        {/*        <InputAdornment position="start">*/}
+        {/*          <IconButton edge="end" sx={{ marginTop: "22px" }}>*/}
+        {/*            <CopyIcon*/}
+        {/*              color={"#ffffff"}*/}
+        {/*              bgcolor={theme.palette.brightPurple.main}*/}
+        {/*            />*/}
+        {/*          </IconButton>*/}
+        {/*        </InputAdornment>*/}
+        {/*      ),*/}
+        {/*    }}*/}
+        {/*  />*/}
+        {/*  <Box>*/}
+        {/*    <Button variant="contained">Отправить код программисту</Button>*/}
+        {/*    <Box sx={{ display: "flex" }}>*/}
+        {/*      <Link*/}
+        {/*        component="button"*/}
+        {/*        variant="body2"*/}
+        {/*        sx={{ color: theme.palette.brightPurple.main }}*/}
+        {/*        // onClick={() => {*/}
+        {/*        // }}*/}
+        {/*      >*/}
+        {/*        Инструкция к платформам*/}
+        {/*      </Link>*/}
+        {/*      <IconButton>*/}
+        {/*        <InfoIcon />*/}
+        {/*      </IconButton>*/}
+        {/*    </Box>*/}
+        {/*  </Box>*/}
+        {/*</Box>*/}
       </Box>
 
-      <Box sx={{ maxWidth: "520px", width: "100%" }}>
-        <Typography>3. Проверьте правильность установки</Typography>
-        <Typography sx={{ color: theme.palette.grey2.main }}>
-          Введите полный адрес страницы, где вы установили quiz и нажмите
-          "проверить"
-        </Typography>
-      </Box>
+      {/*<Box sx={{ maxWidth: "520px", width: "100%" }}>*/}
+      {/*  <Typography>3. Проверьте правильность установки</Typography>*/}
+      {/*  <Typography sx={{ color: theme.palette.grey2.main }}>*/}
+      {/*    Введите полный адрес страницы, где вы установили quiz и нажмите*/}
+      {/*    "проверить"*/}
+      {/*  </Typography>*/}
+      {/*</Box>*/}
       <Box
         sx={{
           background: "#EEE4FC",
@@ -154,11 +154,11 @@ export default function InstallQzCode() {
           Код нужно вставить один раз. Изменения в самом quiz будут отображаться
           автоматически после сохранения.
         </Typography>
-        <Typography>
-          Для добавления нескольких quiz на одну страницу, код инициализации
-          достаточно добавить один раз с любого quiz, а затем вставить кнопки
-          открытия с нужных quiz
-        </Typography>
+        {/*<Typography>*/}
+        {/*  Для добавления нескольких quiz на одну страницу, код инициализации*/}
+        {/*  достаточно добавить один раз с любого quiz, а затем вставить кнопки*/}
+        {/*  открытия с нужных quiz*/}
+        {/*</Typography>*/}
       </Box>
     </InstallQzOnSiteParent>
   );