Merge branch 'dev' of penahub.gitlab.yandexcloud.net:frontend/squiz into dev

src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx

@@ -37,21 +37,17 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
   const quiz = useCurrentQuiz();
   const [widgetWidth, setWidgetWidth] = useState<string>("");
   const [widgetHeight, setWidgetHeight] = useState<string>("");
-  const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] =
+  const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] = useState<boolean>(false);
-    useState<boolean>(false);
   const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
   const [rounded, setRounded] = useState<boolean>(false);
   const [withShadow, setWithShadow] = useState<boolean>(false);
   const [buttonFlash, setButtonFlash] = useState<boolean>(false);
-  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(
+  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(theme.palette.brightPurple.main);
-    theme.palette.brightPurple.main,
-  );
   const [buttonTextColor, setButtonTextColor] = useState<string>("#FFFFFF");
   const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false);
   const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
   const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false);
-  const [position, setPosition] =
+  const [position, setPosition] = useState<BannerWidgetParams["position"]>("bottomleft");
-    useState<BannerWidgetParams["position"]>("bottomleft");
   const [bannerFullWidth, setBannerFullWidth] = useState<boolean>(false);
   const [autoShowWidgetTime, setAutoShowWidgetTime] = useState<number>(10);
   const [appealText, setAppealText] = useState<string>("");
@@ -88,12 +84,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
           : undefined,
     });
 
-    return (
+    return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />;
-      <WidgetScript
-        scriptText={scriptText}
-        helperText="Установите код внутрь тэга head"
-      />
-    );
   }
 
   return (
@@ -129,17 +120,39 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
             sx={[
               {
                 position: "absolute",
-                top: "calc(12.5 / 262 * 100%)",
-                left: "calc(50.6 / 520 * 100%)",
                 width: "calc(196 / 520 * 100%)",
                 height: "calc(30 / 262 * 100%)",
               },
-              bannerFullWidth && {
+              position === "topleft" && {
-                top: "calc(7 / 262 * 100%)",
+                top: "calc(12.5 / 262 * 100%)",
-                left: "calc(45 / 520 * 100%)",
+                left: "calc(50.6 / 520 * 100%)",
-                width: "calc(348 / 520 * 100%)",
-                height: "calc(30 / 262 * 100%)",
               },
+              position === "topright" && {
+                top: "calc(12.5 / 262 * 100%)",
+                left: "calc(190 / 520 * 100%)",
+              },
+              position === "bottomleft" && {
+                top: "calc(178 / 262 * 100%)",
+                left: "calc(50.6 / 520 * 100%)",
+              },
+              position === "bottomright" && {
+                top: "calc(178 / 262 * 100%)",
+                left: "calc(190 / 520 * 100%)",
+              },
+              bannerFullWidth &&
+                position.startsWith("top") && {
+                  top: "calc(7 / 262 * 100%)",
+                  left: "calc(45 / 520 * 100%)",
+                  width: "calc(348 / 520 * 100%)",
+                  height: "calc(30 / 262 * 100%)",
+                },
+              bannerFullWidth &&
+                position.startsWith("bottom") && {
+                  top: "calc(185 / 262 * 100%)",
+                  left: "calc(45 / 520 * 100%)",
+                  width: "calc(348 / 520 * 100%)",
+                  height: "calc(30 / 262 * 100%)",
+                },
               pulsation && {
                 ":before": {
                   content: "''",
@@ -196,16 +209,10 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                   color: "white",
                 }}
               >
-                <Typography
+                <Typography fontSize="calc(6 / 29.5 * 100cqh)" lineHeight="120%">
-                  fontSize="calc(6 / 29.5 * 100cqh)"
-                  lineHeight="120%"
-                >
                   {appealText || "Пройти тест"}
                 </Typography>
-                <Typography
+                <Typography fontSize="calc(11 / 29.5 * 100cqh)" lineHeight="120%">
-                  fontSize="calc(11 / 29.5 * 100cqh)"
-                  lineHeight="120%"
-                >
                   {quizHeaderText || "Заголовок теста"}
                 </Typography>
               </Box>
@@ -220,8 +227,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                 height: "calc(10 / 29.5 * 100%)",
                 width: "auto",
                 aspectRatio: 1,
-                backgroundColor:
+                backgroundColor: rounded || bannerFullWidth ? "#581CA7" : undefined,
-                  rounded || bannerFullWidth ? "#581CA7" : undefined,
                 borderRadius: "50%",
               }}
             />
@@ -255,9 +261,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                 gap: "20px",
               }}
             >
-              <Typography sx={{ color: theme.palette.grey2.main }}>
+              <Typography sx={{ color: theme.palette.grey2.main }}>Ширина окна (px)</Typography>
-                Ширина окна (px)
-              </Typography>
               <PenaTextField
                 type="number"
                 value={widgetWidth}
@@ -273,9 +277,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                 gap: "20px",
               }}
             >
-              <Typography sx={{ color: theme.palette.grey2.main }}>
+              <Typography sx={{ color: theme.palette.grey2.main }}>Высота окна (px)</Typography>
-                Высота окна (px)
-              </Typography>
               <PenaTextField
                 type="number"
                 value={widgetHeight}
@@ -286,18 +288,14 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
             </Box>
           </Box>
         </Collapse>
-        <Typography sx={{ color: theme.palette.grey2.main }}>
+        <Typography sx={{ color: theme.palette.grey2.main }}>Текст-призыв</Typography>
-          Текст-призыв
-        </Typography>
         <PenaTextField
           placeholder="Пройти тест"
           value={appealText}
           onChange={(e) => setAppealText(e.target.value)}
           FormControlSx={{ maxWidth: "360px" }}
         />
-        <Typography sx={{ color: theme.palette.grey2.main }}>
+        <Typography sx={{ color: theme.palette.grey2.main }}>Заголовок quiz</Typography>
-          Заголовок quiz
-        </Typography>
         <PenaTextField
           placeholder="Заголовок quiz"
           value={quizHeaderText}
@@ -311,9 +309,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
             alignItems: "center",
           }}
         >
-          <Typography sx={{ color: theme.palette.grey2.main }}>
+          <Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
-            Показывать через
-          </Typography>
           <PenaTextField
             type="number"
             value={autoShowWidgetTime}
@@ -322,9 +318,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
               width: "90px",
             }}
           />
-          <Typography sx={{ color: theme.palette.grey2.main }}>
+          <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
-            секунд
-          </Typography>
         </Box>
         <Box
           sx={{
@@ -333,20 +327,10 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
             alignItems: "center",
           }}
         >
-          <Typography sx={{ color: theme.palette.grey2.main }}>
+          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет кнопки</Typography>
-            Цвет кнопки
+          <CircleColorPicker color={buttonBackgroundColor} onChange={(color) => setButtonBackgroundColor(color)} />
-          </Typography>
+          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста кнопки</Typography>
-          <CircleColorPicker
+          <CircleColorPicker color={buttonTextColor} onChange={(color) => setButtonTextColor(color)} />
-            color={buttonBackgroundColor}
-            onChange={(color) => setButtonBackgroundColor(color)}
-          />
-          <Typography sx={{ color: theme.palette.grey2.main }}>
-            Цвет текста кнопки
-          </Typography>
-          <CircleColorPicker
-            color={buttonTextColor}
-            onChange={(color) => setButtonTextColor(color)}
-          />
         </Box>
         <CustomCheckbox
           label="Баннер на всю ширину экрана"
@@ -356,9 +340,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
             if (e.target.checked) setPosition("topleft");
           }}
         />
-        <Typography sx={{ color: theme.palette.grey2.main }}>
+        <Typography sx={{ color: theme.palette.grey2.main }}>Расположение</Typography>
-          Расположение
-        </Typography>
         <FormControl>
           <RadioGroup
             value={position}
@@ -384,17 +366,13 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                 <FormControlLabel
                   label="Сверху страницы"
                   value="topleft"
-                  control={
+                  control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
-                    <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
-                  }
                   sx={{ color: theme.palette.grey2.main }}
                 />
                 <FormControlLabel
                   label="Снизу страницы"
                   value="bottomleft"
-                  control={
+                  control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
-                    <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
-                  }
                   sx={{ color: theme.palette.grey2.main }}
                 />
               </Box>
@@ -409,23 +387,13 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                   <FormControlLabel
                     label="Слева сверху"
                     value="topleft"
-                    control={
+                    control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
-                      <Radio
-                        checkedIcon={<RadioCheck />}
-                        icon={<RadioIcon />}
-                      />
-                    }
                     sx={{ color: theme.palette.grey2.main }}
                   />
                   <FormControlLabel
-                    label="Справа сверху"
+                    label="Слева снизу"
-                    value="topright"
+                    value="bottomleft"
-                    control={
+                    control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
-                      <Radio
-                        checkedIcon={<RadioCheck />}
-                        icon={<RadioIcon />}
-                      />
-                    }
                     sx={{ color: theme.palette.grey2.main }}
                   />
                 </Box>
@@ -436,25 +404,15 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                   }}
                 >
                   <FormControlLabel
-                    label="Слева снизу"
+                    label="Справа сверху"
-                    value="bottomleft"
+                    value="topright"
-                    control={
+                    control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
-                      <Radio
-                        checkedIcon={<RadioCheck />}
-                        icon={<RadioIcon />}
-                      />
-                    }
                     sx={{ color: theme.palette.grey2.main }}
                   />
                   <FormControlLabel
                     label="Справа снизу"
                     value="bottomright"
-                    control={
+                    control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
-                      <Radio
-                        checkedIcon={<RadioCheck />}
-                        icon={<RadioIcon />}
-                      />
-                    }
                     sx={{ color: theme.palette.grey2.main }}
                   />
                 </Box>
@@ -462,26 +420,12 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
             )}
           </RadioGroup>
         </FormControl>
-        <Typography sx={{ color: theme.palette.grey2.main }}>
+        <Typography sx={{ color: theme.palette.grey2.main }}>Параметры</Typography>
-          Параметры
-        </Typography>
         {!bannerFullWidth && (
-          <CustomCheckbox
+          <CustomCheckbox label="Закругленная" checked={rounded} handleChange={(e) => setRounded(e.target.checked)} />
-            label="Закругленная"
-            checked={rounded}
-            handleChange={(e) => setRounded(e.target.checked)}
-          />
         )}
-        <CustomCheckbox
+        <CustomCheckbox label="С тенью" checked={withShadow} handleChange={(e) => setWithShadow(e.target.checked)} />
-          label="С тенью"
+        <CustomCheckbox label="С бликом" checked={buttonFlash} handleChange={(e) => setButtonFlash(e.target.checked)} />
-          checked={withShadow}
-          handleChange={(e) => setWithShadow(e.target.checked)}
-        />
-        <CustomCheckbox
-          label="С бликом"
-          checked={buttonFlash}
-          handleChange={(e) => setButtonFlash(e.target.checked)}
-        />
         <CustomCheckbox
           label={'Эффект "пульсация"'}
           checked={pulsation}
@@ -546,22 +490,16 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
                     alignItems: "center",
                   }}
                 >
-                  <Typography sx={{ color: theme.palette.grey2.main }}>
+                  <Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
-                    Показывать через
-                  </Typography>
                   <PenaTextField
                     type="number"
                     value={autoShowQuizTime}
-                    onChange={(e) =>
+                    onChange={(e) => setAutoShowQuizTime(parseInt(e.target.value))}
-                      setAutoShowQuizTime(parseInt(e.target.value))
-                    }
                     FormControlSx={{
                       width: "90px",
                     }}
                   />
-                  <Typography sx={{ color: theme.palette.grey2.main }}>
+                  <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
-                    секунд
-                  </Typography>
                 </Box>
               </Box>
             </Collapse>