Merge branch 'dev' into 'staging'

Dev

See merge request frontend/squzanswerer!94

lib/api/quizRelase.ts

@@ -1,5 +1,7 @@
 import { GetQuizDataResponse, parseQuizData } from "@model/api/getQuizData";
 import axios from "axios";
+import MobileDetect from 'mobile-detect';
+import device from "current-device";
 
 import type { AxiosError } from "axios";
 import { replaceSpacesToEmptyLines } from "../components/ViewPublicationPage/tools/replaceSpacesToEmptyLines";
@@ -9,12 +11,26 @@ let SESSIONS = "";
 
 const domain = location.hostname === "hbpn.link" ? "" : "https://s.hbpn.link";
 
+const md = new MobileDetect(window.navigator.userAgent);
+
+const userAgent = navigator.userAgent
+let OSDevice = md.os()
+if (OSDevice === null) {OSDevice = userAgent}
+
+const DeviceType = device.type
+let Device = md.mobile()
+if (Device === null) {Device = userAgent}
+
 export const publicationMakeRequest = ({ url, body }: any) => {
     return axios(url, {
         data: body,
         headers: {
             "X-Sessionkey": SESSIONS,
             "Content-Type": "multipart/form-data",
+            "DeviceType" : DeviceType,
+            "Device" : Device,
+            "OS": OSDevice,
+            "Browser" : userAgent
         },
         method: "POST",
     });
@@ -33,6 +49,10 @@ export async function getData(quizId: string): Promise<{
                 headers: {
                     "X-Sessionkey": SESSIONS,
                     "Content-Type": "application/json",
+                    "DeviceType" : DeviceType,
+                    "Device" : Device,
+                    "OS": OSDevice,
+                    "Browser" : userAgent
                 },
                 data: {
                     quiz_id: quizId,

lib/assets/icons/ArrowDownIcon.tsx

@@ -22,7 +22,7 @@ export default function ArrowDownIcon(
             }}
         >
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-                <path d="M19.5 9L12 16.5L4.5 9" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M19.5 9L12 16.5L4.5 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
         </Box>
     );

lib/assets/icons/ContactFormIcon/AddressIcon.tsx

@@ -2,17 +2,23 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  backgroundColor: string
 }
 
-export default function AddressIcon({ color }: Props) {
+export default function AddressIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
         // height: "38px",
-        // width: "45px",
+        // width: "24px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        height: "58px",
+        width: "42px",
+        backgroundColor: {backgroundColor},
+        borderBottomLeftRadius: "12px",
+        borderTopLeftRadius: "12px",
       }}
     >
       <svg

lib/assets/icons/ContactFormIcon/EmailIcon.tsx

@@ -2,17 +2,23 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  backgroundColor: string
 }
 
-export default function EmailIcon({ color }: Props) {
+export default function EmailIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
         // height: "38px",
-        // width: "45px",
+        // width: "24px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        height: "58px",
+        width: "42px",
+        backgroundColor: {backgroundColor},
+        borderBottomLeftRadius: "12px",
+        borderTopLeftRadius: "12px",
       }}
     >
       <svg

lib/assets/icons/ContactFormIcon/NameIcon.tsx

@@ -2,9 +2,10 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  backgroundColor: string
 }
 
-export default function NameIcon({ color }: Props) {
+export default function NameIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
@@ -13,6 +14,11 @@ export default function NameIcon({ color }: Props) {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        height: "58px",
+        width: "42px",
+        backgroundColor: {backgroundColor},
+        borderBottomLeftRadius: "12px",
+        borderTopLeftRadius: "12px",
       }}
     >
       <svg

lib/assets/icons/ContactFormIcon/PhoneIcon.tsx

@@ -2,23 +2,29 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  backgroundColor: string
 }
 
-export default function PhoneIcon({ color }: Props) {
+export default function PhoneIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
         // height: "38px",
-        // width: "45px",
+        // width: "24px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        height: "58px",
+        width: "42px",
+        backgroundColor: {backgroundColor},
+        borderBottomLeftRadius: "12px",
+        borderTopLeftRadius: "12px",
       }}
     >
       <svg
-        width="15"
+        width="17"
-        height="15"
+        height="17"
-        viewBox="0 0 15 15"
+        viewBox="0 0 17 17"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >

lib/assets/icons/ContactFormIcon/TextIcon.tsx

@@ -2,9 +2,10 @@ import { Box } from "@mui/material";
 
 interface Props {
   color: string;
+  backgroundColor: string
 }
 
-export default function TextIcon({ color }: Props) {
+export default function TextIcon({ color, backgroundColor }: Props) {
   return (
     <Box
       sx={{
@@ -13,6 +14,11 @@ export default function TextIcon({ color }: Props) {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        height: "58px",
+        width: "42px",
+        backgroundColor: {backgroundColor},
+        borderBottomLeftRadius: "12px",
+        borderTopLeftRadius: "12px",
       }}
     >
       <svg

lib/components/ViewPublicationPage/ContactForm.tsx

@@ -3,7 +3,16 @@ import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
 import NameIcon from "@icons/ContactFormIcon/NameIcon";
 import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
 import TextIcon from "@icons/ContactFormIcon/TextIcon";
-import { Box, Button, InputAdornment, Link, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
+import {
+    Box,
+    Button,
+    InputAdornment,
+    Link,
+    TextField as MuiTextField,
+    TextFieldProps,
+    Typography,
+    useTheme
+} from "@mui/material";
 
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import {FC, useRef, useState} from "react";
@@ -156,7 +165,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                 msOverflowStyle: "none",
                 backgroundPosition: "center",
                 backgroundSize: "cover",
-                backgroundImage: settings.cfg.design
+                backgroundImage: settings.cfg.design && !isMobile
                     ? `url(${DESIGN_LIST[settings.cfg.theme]})`
                     : null,
             }}
@@ -168,6 +177,11 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                     height: "100%",
                     minHeight: "100vh",
                     display: isWide && !isMobile ? "flex" : undefined,
+                    background: settings.cfg.design && !isMobile
+                        ? quizThemes[settings.cfg.theme].isLight
+                            ? "transparent"
+                            : "linear-gradient(90deg,#272626, transparent)"
+                        : theme.palette.background.default,
                 }}
             >
                 <Box
@@ -179,6 +193,17 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                         justifyContent: "center",
                         borderRight: isWide && !isMobile ? "1px solid gray" : undefined,
                     }}
+                >
+                    <Box
+                        sx={{
+                            maxWidth: "630px",
+                            width: "100%",
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "flex-start",
+                            justifyContent: "center",
+                            padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px"
+                        }}
                     >
                         <Typography
                             sx={{
@@ -196,7 +221,6 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                             <Typography
                                 sx={{
                                     color: theme.palette.text.primary,
-                                textAlign: "center",
                                     m: "20px 0",
                                     fontSize: "18px",
                                     wordBreak: "break-word"
@@ -207,6 +231,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                         )}
                     </Box>
 
+                </Box>
+
                 <Box
                     sx={{
                         display: "flex",
@@ -214,7 +240,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                         justifyContent: "center",
                         flexDirection: "column",
                         backgroundColor: theme.palette.background.default,
-                        p: "30px",
+                        p: "0px 20px 30px 20px",
                     }}
                 >
                     <Box
@@ -348,7 +374,7 @@ const Inputs = ({
             onChange={({target}) => setName(target.value)}
             id={name}
             title={FC["name"].innerText || "Введите имя"}
-            desc={FC["name"].text || "имя"}
+            desc={FC["name"].text || "Имя"}
             Icon={NameIcon}
         />
     );
@@ -366,7 +392,7 @@ const Inputs = ({
             onChange={({target}) => setPhone(target.value)}
             id={phone}
             title={FC["phone"].innerText || "Введите номер телефона"}
-            desc={FC["phone"].text || "номер телефона"}
+            desc={FC["phone"].text || "Номер телефона"}
             Icon={PhoneIcon}
         />
     );
@@ -375,7 +401,7 @@ const Inputs = ({
             onChange={({target}) => setText(target.value)}
             id={text}
             title={FC["text"].text || "Введите фамилию"}
-            desc={FC["text"].innerText || "фамилию"}
+            desc={FC["text"].innerText || "Фамилия"}
             Icon={TextIcon}
         />
     );
@@ -384,7 +410,7 @@ const Inputs = ({
             onChange={({target}) => setAdress(target.value)}
             id={adress}
             title={FC["address"].innerText || "Введите адрес"}
-            desc={FC["address"].text || "адрес"}
+            desc={FC["address"].text || "Адрес"}
             Icon={AddressIcon}
         />
     );
@@ -414,12 +440,12 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
     id: string;
     title: string;
     desc: string;
-    Icon: FC<{ color: string; }>;
+    Icon: FC<{ color: string; backgroundColor: string }>;
     onChange: TextFieldProps["onChange"];
 }) => {
     const theme = useTheme();
     const isMobile = useRootContainerSize() < 600;
-
+    const {settings} = useQuizData();
     return (
         <Box m="15px 0">
             <Typography mb="7px" color={theme.palette.text.primary}>
@@ -430,15 +456,22 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
                 onChange={onChange}
                 sx={{
                     width: isMobile ? "300px" : "350px",
+                    backgroundColor: theme.palette.background.default,
                     "& .MuiOutlinedInput-notchedOutline": {
-                        borderColor: "#9A9AAF"
+                        borderColor: "#9A9AAF80",
+                        borderRadius: "12px"
+                    },
+                    "& .MuiInputBase-root": {
+                        paddingLeft: 0
                     }
+
                 }}
                 placeholder={desc}
                 InputProps={{
                     startAdornment: (
                         <InputAdornment position="start">
-                            <Icon color="gray" />
+                            <Icon color="gray"
+                                  backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"}/>
                         </InputAdornment>
                     ),
                 }}

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -36,26 +36,41 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                 height: "100%",
                 minHeight: "100vh",
                 width: "100%",
-                pt: "28px",
                 overflow: "auto",
                 backgroundColor: theme.palette.background.default,
                 backgroundPosition: "center",
                 backgroundSize: "cover",
-                backgroundImage: settings.cfg.design
+                backgroundImage: settings.cfg.design && !isMobile
                     ? `url(${DESIGN_LIST[settings.cfg.theme]})`
                     : null,
+
             }}
         >
             <Box
                 sx={{
                     display: "flex",
                     flexDirection: "column",
-                    alignItems: "start",
+                    justifyContent: "space-between",
-                    maxWidth: "844px",
+                    alignItems: "center",
-                    width:  "100%",
+                    pt: "30px",
-                    padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
+                    width: "inherit",
+                    height: "inherit",
+                    background: settings.cfg.design
+                        ? quizThemes[settings.cfg.theme].isLight
+                            ? "transparent"
+                            : "linear-gradient(90deg,#272626, transparent)"
+                        : theme.palette.background.default,
                 }}
             >
+                <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
@@ -125,6 +140,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                     }
                 </Box>
 
+
                 <Box width="100%">
                     <Box
                         sx={{
@@ -170,12 +186,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
 
                     <Box
                         sx={{
-                            boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
+                            // boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
                             width: "100%",
                             flexDirection: "column",
                             display: "flex",
                             justifyContent: "center",
                             alignItems: "center",
+                            border: "1px solid #9A9AAF80",
                             p:
                                 (
                                     settings.cfg.resultInfo.showResultForm === "before" &&
@@ -214,5 +231,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                     </Box>
                 </Box>
             </Box>
+        </Box>
     );
 };

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -64,7 +64,7 @@ export default function ViewPublicationPage() {
               sx={{
                 fontSize: "16px",
                 padding: "10px 15px",
-                color: "#FFFFFF",
+                color: "#9A9AAF",
                 border: "1px solid #9A9AAF",
                 background: "rgba(154,154,175, 0.2)",
                 "&:disabled": {

lib/components/ViewPublicationPage/tools/Select.tsx

@@ -88,6 +88,9 @@ export const Select = ({
             height: "48px",
             borderRadius: "10px",
           },
+          "& .MuiSelect-icon": {
+          color: theme.palette.primary.main
+          }
         }}
         MenuProps={{
           PaperProps: {
@@ -106,7 +109,7 @@ export const Select = ({
               flexDirection: "column",
               gap: "8px",
               "& .Mui-selected": {
-                backgroundColor: theme.palette.background.default,
+                backgroundColor: "#F2F3F7",
                 color: colorMain,
               },
             },
@@ -114,7 +117,7 @@ export const Select = ({
         }}
         inputProps={{
           sx: {
-            color: colorMain,
+            color: theme.palette.text.primary,
             display: "block",
             px: "9px",
             gap: "20px",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@frontend/squzanswerer",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "type": "module",
     "main": "./dist-package/index.js",
     "module": "./dist-package/index.js",
@@ -86,6 +86,8 @@
     },
     "dependencies": {
         "country-flag-emoji-polyfill": "^0.1.8",
-        "hex-rgb": "^5.0.0"
+        "current-device": "^0.10.2",
+        "hex-rgb": "^5.0.0",
+        "mobile-detect": "^1.4.5"
     }
 }

yarn.lock

@@ -1593,6 +1593,11 @@ csstype@^3.0.2, csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+current-device@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/current-device/-/current-device-0.10.2.tgz#1e40176bee7da655383ab7245b853fae7d2dfc8e"
+  integrity sha512-FN223n2Cp1fRI/gyjJEAdagHhJ/2Z2STz3tUg1t4F259BhmVRCChkmxcgFtjYJsWuIacQEs7bqJpnAczIXIkWw==
+
 cypress@^13.6.1:
   version "13.6.3"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.6.3.tgz#54f03ca07ee56b2bc18211e7bd32abd2533982ba"
@@ -2687,6 +2692,11 @@ minimist@^1.2.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
+mobile-detect@^1.4.5:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/mobile-detect/-/mobile-detect-1.4.5.tgz#da393c3c413ca1a9bcdd9ced653c38281c0fb6ad"
+  integrity sha512-yc0LhH6tItlvfLBugVUEtgawwFU2sIe+cSdmRJJCTMZ5GEJyLxNyC/NIOAOGk67Fa8GNpOttO3Xz/1bHpXFD/g==
+
 moment@^2.30.1:
   version "2.30.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"