import AlignCenterIcon from "@icons/AlignCenterIcon";
import AlignLeftIcon from "@icons/AlignLeftIcon";
import AlignRightIcon from "@icons/AlignRightIcon";
import ArrowDown from "@icons/ArrowDownIcon";
import InfoIcon from "@icons/InfoIcon";
import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
import LayoutStandartIcon from "@icons/LayoutStandartIcon";
import MobilePhoneIcon from "@icons/MobilePhoneIcon";
import { QuizStartpageType } from "@model/quizSettings";
import {
Box,
Button,
ButtonBase,
Checkbox,
FormControl,
FormControlLabel,
MenuItem,
Select,
Tooltip,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { incrementCurrentStep, updateQuiz, uploadQuizImage } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import SelectableButton from "@ui_kit/SelectableButton";
import { StartPagePreview } from "@ui_kit/StartPagePreview";
import UploadBox from "@ui_kit/UploadBox";
import { useState } from "react";
import { createPortal } from "react-dom";
import UploadIcon from "../../assets/icons/UploadIcon";
import ModalSizeImage from "./ModalSizeImage";
import SelectableIconButton from "./SelectableIconButton";
import { DropZone } from "./dropZone";
import Extra from "./extra";
import { resizeFavIcon } from "@ui_kit/reactImageFileResizer";
const designTypes = [
[
"standard",
(color: string) => ,
"Standard",
],
[
"expanded",
(color: string) => ,
"Expanded",
],
[
"centered",
(color: string) => ,
"Centered",
],
] as const;
// type DesignType = typeof designTypes[number][0];
export default function StartPageSettings() {
const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
const isTablet = useMediaQuery(theme.breakpoints.down(950));
const quiz = useCurrentQuiz();
const [formState, setFormState] = useState<"design" | "content">("design");
const designType = quiz?.config?.startpageType;
const videoHC = (videoInp: HTMLInputElement) => {
const file = videoInp.files?.[0];
if (file) {
setVideo(URL.createObjectURL(file));
}
};
const [video, setVideo] = useState("");
const [mobileVersion, setMobileVersion] = useState(false);
const MobileVersionHC = (bool: boolean) => {
setMobileVersion(bool);
};
if (!quiz) return null; // TODO throw and catch with error boundary
const favIconDropZoneElement = (
{
const resizedImage = await resizeFavIcon(file);
uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
quiz.config.startpage.favIcon = url;
quiz.config.startpage.originalFavIcon = url;
});
}}
onImageSaveClick={async file => {
const resizedImage = await resizeFavIcon(file);
uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
quiz.config.startpage.favIcon = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.favIcon = null;
});
}}
/>
);
return (
<>
Стартовая страница
{isSmallMonitor && (
)}
{(!isSmallMonitor || (isSmallMonitor && formState === "design")) && (
Дизайн
Фон
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.background.type = "image";
})}
>
Изображение
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.background.type = "video";
})}
>
Видео
Изображение
{
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
quiz.config.startpage.background.originalDesktop = url;
});
}}
onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.background.desktop = null;
});
}}
/>
}
checkedIcon={}
/>
}
label="мобильная версия"
sx={{
color: theme.palette.brightPurple.main,
textDecorationLine: "underline",
textDecorationColor: theme.palette.brightPurple.main,
ml: "-9px",
userSelect: "none",
"& .css-14o5ia4-MuiTypography-root": {
fontSize: "16px"
}
}}
onClick={() => {
MobileVersionHC(!mobileVersion);
}}
/>
{mobileVersion ? (
Изображение для мобильной версии
{
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.mobile = url;
quiz.config.startpage.background.originalMobile = url;
});
}}
onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.mobile = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.background.mobile = null;
});
}}
/>
) : (
<>
)}
Добавить видео
videoHC(event.target)}
hidden
accept=".mp4"
multiple
type="file"
/>
}
sx={{
height: "48px",
width: "48px",
marginBottom: "20px",
}}
/>
{video ? : null}
Настройки видео
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.background.cycle = e.target.checked;
})}
/>
Изображение для мобильной версии
{
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.mobile = url;
quiz.config.startpage.background.originalMobile = url;
});
}}
onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.mobile = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.background.mobile = null;
});
}}
/>
Расположение элементов
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "left";
})}
isActive={quiz.config.startpage.position === "left"}
Icon={AlignLeftIcon}
/>
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "center";
})}
isActive={quiz.config.startpage.position === "center"}
Icon={AlignCenterIcon}
sx={{ display: designType === "centered" ? "flex" : "none" }}
/>
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "right";
})}
isActive={quiz.config.startpage.position === "right"}
Icon={AlignRightIcon}
/>
{(isTablet || !isSmallMonitor) && (
<>
Логотип
{
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url;
quiz.config.originalLogo = url;
});
}}
onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.logo = null;
});
}}
/>
Favicon
{favIconDropZoneElement}
5 MB максимум
)}
)}
{/*Правая сторона*/}
{!isTablet && isSmallMonitor && formState === "design" && (
<>
Логотип
{
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url;
quiz.config.originalLogo = url;
});
}}
onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.logo = null;
});
}}
/>
Favicon
{favIconDropZoneElement}
5 MB максимум
)}
{(!isSmallMonitor || (isSmallMonitor && formState === "content")) && (
<>
Заголовок
updateQuiz(quiz.id, quiz => {
quiz.name = e.target.value;
})}
/>
Текст
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.description = e.target.value;
})}
/>
Текст кнопки
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.button = e.target.value;
})}
/>
Телефон
updateQuiz(quiz.id, quiz => {
quiz.config.info.phonenumber = e.target.value;
})}
/>
updateQuiz(quiz.id, quiz => {
quiz.config.info.clickable = e.target.checked;
})}
/>
Название или слоган компании
updateQuiz(quiz.id, quiz => {
quiz.config.info.orgname = e.target.value;
})}
/>
Сайт
updateQuiz(quiz.id, quiz => {
quiz.config.info.site = e.target.value;
})}
/>
Юридическая информация
updateQuiz(quiz.id, quiz => {
quiz.config.info.law = e.target.value;
})}
/>
)}
{isSmallMonitor && (
{formState === "content" && (
)}
{formState === "design" && (
)}
)}
Отключить стартовую страницу
}
checkedIcon={
}
sx={{
borderRadius: 0,
padding: 0,
}}
onChange={e => updateQuiz(quiz.id, quiz => {
quiz.config.noStartPage = e.target.checked;
})}
checked={quiz.config.noStartPage}
/>
}
label=""
sx={{
color: theme.palette.brightPurple.main,
margin: "0",
userSelect: "none",
justifyContent: "flex-end",
}}
/>
{createPortal(, document.body)}
);
}
function IconCheck() {
return (
);
}