SQuiz/frontAnswerer
3
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into 'staging'

Browse Source 
Dev

See merge request frontend/squzanswerer!94
This commit is contained in:
Nastya 2024-03-17 18:07:23 +00:00
commit e28400aa84
13 changed files with 319 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/api/quizRelase.ts
View File

@ -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,

2
lib/assets/icons/ArrowDownIcon.tsx
View File

@ -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>
);

10
lib/assets/icons/ContactFormIcon/AddressIcon.tsx
View File

@ -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

10
lib/assets/icons/ContactFormIcon/EmailIcon.tsx
View File

@ -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

8
lib/assets/icons/ContactFormIcon/NameIcon.tsx
View File

@ -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

16
lib/assets/icons/ContactFormIcon/PhoneIcon.tsx
View File

@ -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"
height="15"
viewBox="0 0 15 15"
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>

8
lib/assets/icons/ContactFormIcon/TextIcon.tsx
View File

@ -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

57
lib/components/ViewPublicationPage/ContactForm.tsx
View File

@ -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>
),
}}

32
lib/components/ViewPublicationPage/ResultForm.tsx
View File

@ -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",
maxWidth: "844px",
width: "100%",
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
justifyContent: "space-between",
alignItems: "center",
pt: "30px",
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>
);
};

2
lib/components/ViewPublicationPage/ViewPublicationPage.tsx
View File

@ -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": {

7
lib/components/ViewPublicationPage/tools/Select.tsx
View File

@ -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",

6
package.json
View File

@ -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"
}
}

10
yarn.lock
View File

@ -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"