правки результатов и формы еконтактов, переполнение вариантов ответа в вопросах

src/pages/ContactFormPage/ContactFormPage.tsx

@@ -60,30 +60,31 @@ export default function ContactFormPage() {
     <Box
       sx={{
         p: isTablet ? "0 0 150px 0" : "0",
+        mt: "67px",
       }}
     >
-      <Box
+      {/*<Box*/}
-        sx={{
+      {/*  sx={{*/}
-          display: "flex",
+      {/*    display: "flex",*/}
-          alignItems: "center",
+      {/*    alignItems: "center",*/}
-          gap: "10px",
+      {/*    gap: "10px",*/}
-          m: "67px 0 41px 0",
+      {/*    m: "67px 0 41px 0",*/}
-        }}
+      {/*  }}*/}
-      >
+      {/*>*/}
-        <Link
+      {/*  <Link*/}
-          sx={{
+      {/*    sx={{*/}
-            fontSize: "16px",
+      {/*      fontSize: "16px",*/}
-            lineHeight: "19px",
+      {/*      lineHeight: "19px",*/}
-            color: theme.palette.brightPurple.main,
+      {/*      color: theme.palette.brightPurple.main,*/}
-            textDecorationColor: theme.palette.brightPurple.main,
+      {/*      textDecorationColor: theme.palette.brightPurple.main,*/}
-          }}
+      {/*    }}*/}
-        >
+      {/*  >*/}
-          Как собрать данные посетителя
+      {/*    Как собрать данные посетителя*/}
-        </Link>{" "}
+      {/*  </Link>{" "}*/}
-        {/* <Popover>
+      {/*  /!* <Popover>*/}
-          <Info />
+      {/*    <Info />*/}
-        </Popover> */}
+      {/*  </Popover> *!/*/}
-      </Box>
+      {/*</Box>*/}
       {!quiz?.config.formContact.fields.name.used &&
       !quiz?.config.formContact.fields.email.used &&
       !quiz?.config.formContact.fields.phone.used &&

src/pages/ResultPage/cards/EmailSettingsCard.tsx

@@ -156,100 +156,100 @@ export const EmailSettingsCard = ({ quizExpand }: Props) => {
               },
             }}
           />
-          <Typography
+          {/*<Typography*/}
-            sx={{
+          {/*  sx={{*/}
-              color: "#4D4D4D",
+          {/*    color: "#4D4D4D",*/}
-              m: "20px 0 14px 0",
+          {/*    m: "20px 0 14px 0",*/}
-              fontSize: "18px",
+          {/*    fontSize: "18px",*/}
-              fontWeight: 500,
+          {/*    fontWeight: 500,*/}
-            }}
+          {/*  }}*/}
-          >
+          {/*>*/}
-            E-mail ответа
+          {/*  E-mail ответа*/}
-          </Typography>
+          {/*</Typography>*/}
-          <TextField
+          {/*<TextField*/}
-            value={quiz.config.resultInfo.reply}
+          {/*  value={quiz.config.resultInfo.reply}*/}
-            placeholder={"noreplay@example.ru"}
+          {/*  placeholder={"noreplay@example.ru"}*/}
-            onChange={({ target }: { target: HTMLInputElement }) => {
+          {/*  onChange={({ target }: { target: HTMLInputElement }) => {*/}
-              updateQuiz(quiz.id, (quiz) => {
+          {/*    updateQuiz(quiz.id, (quiz) => {*/}
-                quiz.config.resultInfo.reply = target.value;
+          {/*      quiz.config.resultInfo.reply = target.value;*/}
-              });
+          {/*    });*/}
-            }}
+          {/*  }}*/}
-            sx={{
+          {/*  sx={{*/}
-              margin: isMobile ? "10px 0" : 0,
+          {/*    margin: isMobile ? "10px 0" : 0,*/}
-              width: "100%",
+          {/*    width: "100%",*/}
-              "& .MuiInputBase-root": {
+          {/*    "& .MuiInputBase-root": {*/}
-                color: "#000000",
+          {/*      color: "#000000",*/}
-                backgroundColor: expand
+          {/*      backgroundColor: expand*/}
-                  ? theme.palette.background.default
+          {/*        ? theme.palette.background.default*/}
-                  : "transparent",
+          {/*        : "transparent",*/}
-                height: "48px",
+          {/*      height: "48px",*/}
-                borderRadius: "10px",
+          {/*      borderRadius: "10px",*/}
-                ".MuiOutlinedInput-notchedOutline": {
+          {/*      ".MuiOutlinedInput-notchedOutline": {*/}
-                  borderWidth: "1px !important",
+          {/*        borderWidth: "1px !important",*/}
-                  border: expand ? "none" : null,
+          {/*        border: expand ? "none" : null,*/}
-                },
+          {/*      },*/}
-                "& .MuiInputBase-input::placeholder": {
+          {/*      "& .MuiInputBase-input::placeholder": {*/}
-                  color: "#4D4D4D",
+          {/*        color: "#4D4D4D",*/}
-                  opacity: 0.8,
+          {/*        opacity: 0.8,*/}
-                },
+          {/*      },*/}
-              },
+          {/*    },*/}
-            }}
+          {/*  }}*/}
-            inputProps={{
+          {/*  inputProps={{*/}
-              sx: {
+          {/*    sx: {*/}
-                fontSize: "18px",
+          {/*      fontSize: "18px",*/}
-                lineHeight: "21px",
+          {/*      lineHeight: "21px",*/}
-                py: 0,
+          {/*      py: 0,*/}
-                paddingLeft: "18px",
+          {/*      paddingLeft: "18px",*/}
-              },
+          {/*    },*/}
-            }}
+          {/*  }}*/}
-          />
+          {/*/>*/}
-          <Typography
+          {/*<Typography*/}
-            sx={{
+          {/*  sx={{*/}
-              color: "#4D4D4D",
+          {/*    color: "#4D4D4D",*/}
-              m: "20px 0 14px 0",
+          {/*    m: "20px 0 14px 0",*/}
-              fontSize: "18px",
+          {/*    fontSize: "18px",*/}
-              fontWeight: 500,
+          {/*    fontWeight: 500,*/}
-            }}
+          {/*  }}*/}
-          >
+          {/*>*/}
-            Имя отправителя
+          {/*  Имя отправителя*/}
-          </Typography>
+          {/*</Typography>*/}
-          <TextField
+          {/*<TextField*/}
-            value={quiz.config.resultInfo.replname}
+          {/*  value={quiz.config.resultInfo.replname}*/}
-            placeholder={"Название компании"}
+          {/*  placeholder={"Название компании"}*/}
-            onChange={({ target }: { target: HTMLInputElement }) => {
+          {/*  onChange={({ target }: { target: HTMLInputElement }) => {*/}
-              updateQuiz(quiz.id, (quiz) => {
+          {/*    updateQuiz(quiz.id, (quiz) => {*/}
-                quiz.config.resultInfo.replname = target.value;
+          {/*      quiz.config.resultInfo.replname = target.value;*/}
-              });
+          {/*    });*/}
-            }}
+          {/*  }}*/}
-            sx={{
+          {/*  sx={{*/}
-              margin: isMobile ? "10px 0" : 0,
+          {/*    margin: isMobile ? "10px 0" : 0,*/}
-              width: "100%",
+          {/*    width: "100%",*/}
-              "& .MuiInputBase-root": {
+          {/*    "& .MuiInputBase-root": {*/}
-                color: "#000000",
+          {/*      color: "#000000",*/}
-                backgroundColor: expand
+          {/*      backgroundColor: expand*/}
-                  ? theme.palette.background.default
+          {/*        ? theme.palette.background.default*/}
-                  : "transparent",
+          {/*        : "transparent",*/}
-                height: "48px",
+          {/*      height: "48px",*/}
-                borderRadius: "10px",
+          {/*      borderRadius: "10px",*/}
-                ".MuiOutlinedInput-notchedOutline": {
+          {/*      ".MuiOutlinedInput-notchedOutline": {*/}
-                  borderWidth: "1px !important",
+          {/*        borderWidth: "1px !important",*/}
-                  border: expand ? "none" : null,
+          {/*        border: expand ? "none" : null,*/}
-                },
+          {/*      },*/}
-                "& .MuiInputBase-input::placeholder": {
+          {/*      "& .MuiInputBase-input::placeholder": {*/}
-                  color: "#4D4D4D",
+          {/*        color: "#4D4D4D",*/}
-                  opacity: 0.8,
+          {/*        opacity: 0.8,*/}
-                },
+          {/*      },*/}
-              },
+          {/*    },*/}
-            }}
+          {/*  }}*/}
-            inputProps={{
+          {/*  inputProps={{*/}
-              sx: {
+          {/*    sx: {*/}
-                fontSize: "18px",
+          {/*      fontSize: "18px",*/}
-                lineHeight: "21px",
+          {/*      lineHeight: "21px",*/}
-                py: 0,
+          {/*      py: 0,*/}
-                paddingLeft: "18px",
+          {/*      paddingLeft: "18px",*/}
-              },
+          {/*    },*/}
-            }}
+          {/*  }}*/}
-          />
+          {/*/>*/}
         </Box>
       )}
     </Paper>

src/pages/Tariffs/tariffsUtils/calcTariffPrices.ts

@@ -11,7 +11,7 @@ export function calcIndividualTariffPrices(
   priceBeforeDiscounts: number;
   priceAfterDiscounts: number;
 } {
-  console.log('MAGIC', purchasesAmount)
+  console.log("MAGIC", purchasesAmount);
   const priceBeforeDiscounts =
     tariff.price ||
     tariff.privileges.reduce(
@@ -47,7 +47,7 @@ export function calcIndividualTariffPrices(
   priceAfterDiscounts *= findDiscountFactor(cart.appliedLoyaltyDiscount);
   priceAfterDiscounts *= findDiscountFactor(cart.appliedCartPurchasesDiscount);
 
-  console.log("OLOLOLOLO", cart, discounts, purchasesAmount, tariff)
+  console.log("OLOLOLOLO", cart, discounts, purchasesAmount, tariff);
   // cart.allAppliedDiscounts.forEach((discount) => {
   // 	priceAfterDiscounts *= findDiscountFactor(discount)
   // })

src/pages/Tariffs/tariffsUtils/createTariffElements.tsx

@@ -16,7 +16,7 @@ export const createTariffElements = (
   const tariffElements = filteredTariffs
     .filter((tariff) => tariff.privileges.length > 0)
     .map((tariff, index) => {
-      console.log('USSSSSES', user)
+      console.log("USSSSSES", user);
       const { priceBeforeDiscounts, priceAfterDiscounts } =
         calcIndividualTariffPrices(
           tariff,

src/pages/ViewPublicationPage/questions/Emoji.tsx

@@ -102,6 +102,16 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                   color: theme.palette.text.primary,
                   display: "flex",
                   gap: "10px",
+                  alignItems:
+                    variant.answer.length <= 60 ? "center" : "flex-start",
+                  position: "relative",
+                  height: "80px",
+                  "& .MuiFormControlLabel-label": {
+                    wordBreak: "break-word",
+                    height: variant.answer.length <= 60 ? undefined : "60px",
+                    overflow: "auto",
+                    paddingLeft: "45px",
+                  },
                 }}
                 value={index}
                 onClick={(event) => {

src/pages/ViewPublicationPage/questions/Images.tsx

@@ -72,7 +72,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
               }}
               onClick={(event) => {
                 event.preventDefault();
-
+                console.log(variant.answer.length);
                 updateAnswer(
                   currentQuestion.content.id,
                   currentQuestion.content.variants[index].id,
@@ -107,8 +107,16 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                   marginTop: "10px",
                   marginLeft: 0,
                   padding: "10px",
+                  display: "flex",
+                  alignItems:
+                    variant.answer.length <= 60 ? "center" : "flex-start",
+                  position: "relative",
+                  height: "80px",
                   "& .MuiFormControlLabel-label": {
                     wordBreak: "break-word",
+                    height: variant.answer.length <= 60 ? undefined : "60px",
+                    overflow: "auto",
+                    paddingLeft: "45px",
                   },
                 }}
                 value={index}

src/pages/ViewPublicationPage/questions/Variant.tsx

@@ -163,6 +163,8 @@ const VariantItem = ({
           ? "white"
           : theme.palette.background.default,
         display: "flex",
+        alignItems: variant.answer.length <= 60 ? "center" : "flex-start",
+        position: "relative",
         maxWidth: "685px",
         maxHeight: "85px",
         justifyContent: "space-between",
@@ -172,6 +174,8 @@ const VariantItem = ({
         },
         "& .MuiFormControlLabel-label": {
           wordBreak: "break-word",
+          height: variant.answer.length <= 60 ? undefined : "60px",
+          overflow: "auto",
         },
       }}
       value={index}

src/pages/ViewPublicationPage/questions/Varimg.tsx

@@ -88,9 +88,16 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                       ? theme.palette.primary.main
                       : "#9A9AAF",
                   display: "flex",
+                  alignItems:
+                    variant.answer.length <= 60 ? "center" : "flex-start",
+                  position: "relative",
+                  height: "80px",
                   margin: isMobile ? 0 : undefined,
                   "& .MuiFormControlLabel-label": {
                     wordBreak: "break-word",
+                    height: variant.answer.length <= 60 ? undefined : "60px",
+                    overflow: "auto",
+                    paddingLeft: "45px",
                   },
                 }}
                 value={index}
@@ -108,6 +115,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                 }}
                 control={
                   <Radio
+                    sx={{ position: "absolute" }}
                     checkedIcon={
                       <RadioCheck color={theme.palette.primary.main} />
                     }

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx

@@ -93,6 +93,16 @@ export default function Emoji({ question }: Props) {
                   display: "flex",
                   gap: "10px",
                   background: theme.palette.background.default,
+                  alignItems:
+                    variant.answer.length <= 60 ? "center" : "flex-start",
+                  position: "relative",
+                  height: "80px",
+                  "& .MuiFormControlLabel-label": {
+                    wordBreak: "break-word",
+                    height: variant.answer.length <= 60 ? undefined : "60px",
+                    overflow: "auto",
+                    paddingLeft: "45px",
+                  },
                 }}
                 control={
                   <Radio

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx

@@ -71,6 +71,7 @@ export default function Images({ question, widthPreview }: Props) {
               sx={{
                 display: "flex",
                 flexDirection: "column",
+                justifyContent: "flex-end",
                 borderRadius: "8px",
                 overflow: "hidden",
                 border: "1px solid",
@@ -78,6 +79,7 @@ export default function Images({ question, widthPreview }: Props) {
                   ? theme.palette.primary.main
                   : "#E3E3E3",
                 maxWidth: "300px",
+                minHeight: "250px",
                 maxHeight: "340px",
               }}
             >
@@ -99,8 +101,11 @@ export default function Images({ question, widthPreview }: Props) {
               <Box
                 sx={{
                   display: "flex",
-                  alignItems: "center",
+                  alignItems:
+                    variant.answer.length <= 60 ? "center" : "flex-start",
                   justifyContent: "space-between",
+                  overflow: "auto",
+                  height: "80px",
                   gap: 2,
                   p: 1,
                 }}

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx

@@ -83,9 +83,17 @@ export default function Variant({ question }: Props) {
                   : theme.palette.background.default,
                 width: "100%",
                 margin: 0,
-                // "& .MuiFormControlLabel-label": {
+                display: "flex",
-                //     overflow: "hidden",
+                alignItems:
-                // }
+                  variant.answer.length <= 60 ? "center" : "flex-start",
+                position: "relative",
+                height: "80px",
+                "& .MuiFormControlLabel-label": {
+                  wordBreak: "break-word",
+                  height: variant.answer.length <= 60 ? undefined : "55px",
+                  overflow: "auto",
+                  paddingLeft: "45px",
+                },
               }}
               control={
                 question.content.multi ? (

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx

@@ -109,7 +109,17 @@ export default function Varimg({ question, widthPreview }: Props) {
                     backgroundColor: mode[quiz.config.theme]
                       ? "white"
                       : theme.palette.background.default,
-                    /*display: "flex",*/
+                    display: "flex",
+                    alignItems:
+                      variant.answer.length <= 60 ? "center" : "flex-start",
+                    position: "relative",
+                    height: "80px",
+                    "& .MuiFormControlLabel-label": {
+                      wordBreak: "break-word",
+                      height: variant.answer.length <= 60 ? undefined : "60px",
+                      overflow: "auto",
+                      paddingLeft: "45px",
+                    },
                   }}
                   control={
                     <Radio

src/ui_kit/RadioCheck.tsx

@@ -1,10 +1,11 @@
-import { Box, useTheme } from "@mui/material";
+import { Box, SxProps, Theme, useTheme } from "@mui/material";
 
 interface Props {
   color?: string;
+  sx?: SxProps<Theme>;
 }
 
-export default function RadioCheck({ color = "#7E2AEA" }: Props) {
+export default function RadioCheck({ color = "#7E2AEA", sx }: Props) {
   const theme = useTheme();
 
   return (
@@ -15,6 +16,7 @@ export default function RadioCheck({ color = "#7E2AEA" }: Props) {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        ...sx,
       }}
     >
       <svg

src/ui_kit/RadioIcon.tsx

@@ -1,6 +1,8 @@
-import { Box, useTheme } from "@mui/material";
+import { Box, SxProps, Theme, useTheme } from "@mui/material";
-
+interface Props {
-export default function RadioIcon() {
+  sx?: SxProps<Theme>;
+}
+export default function RadioIcon({ sx }: Props) {
   const theme = useTheme();
 
   return (
@@ -11,6 +13,7 @@ export default function RadioIcon() {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        ...sx,
       }}
     >
       <svg