SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix widget script staging url

Browse Source
This commit is contained in:
nflnkr 2024-06-04 12:09:22 +03:00
parent e7a09457ca
commit 19e7dab62c
8 changed files with 183 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -108,6 +108,7 @@
"endOfLine": "auto", "endOfLine": "auto",
"bracketSpacing": true, "bracketSpacing": true,
"arrowParens": "always", "arrowParens": "always",
"jsxSingleQuote": false "jsxSingleQuote": false,
"singleAttributePerLine": false
} }
} }

55
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
View File

@ -24,6 +24,7 @@ import { ReactNode, useState } from "react";
import fixedButtonWidgetPreview from "../../../../../assets/banner-widget-preview.png"; import fixedButtonWidgetPreview from "../../../../../assets/banner-widget-preview.png";
import WidgetScript from "../../WidgetScript"; import WidgetScript from "../../WidgetScript";
import { createBannerWidgetScriptText } from "../../createWidgetScriptText"; import { createBannerWidgetScriptText } from "../../createWidgetScriptText";
import { useWidgetUrl } from "../../useWidgetUrl";
import BannerWidgetPreviewIcon from "./BannerWidgetPreviewIcon"; import BannerWidgetPreviewIcon from "./BannerWidgetPreviewIcon";
interface Props { interface Props {
@ -35,6 +36,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
const theme = useTheme(); const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065)); const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const widgetUrl = useWidgetUrl();
const [widgetWidth, setWidgetWidth] = useState<string>(""); const [widgetWidth, setWidgetWidth] = useState<string>("");
const [widgetHeight, setWidgetHeight] = useState<string>(""); const [widgetHeight, setWidgetHeight] = useState<string>("");
const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] = useState<boolean>(false); const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] = useState<boolean>(false);
@ -58,31 +60,34 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
if (!quiz) return null; if (!quiz) return null;
if (step === 3) { if (step === 3) {
const scriptText = createBannerWidgetScriptText({ const scriptText = createBannerWidgetScriptText(
quizId: quiz.qid, {
position, quizId: quiz.qid,
hideOnMobile: hideOnMobile || undefined, position,
rounded: bannerFullWidth ? undefined : rounded || undefined, hideOnMobile: hideOnMobile || undefined,
withShadow: withShadow || undefined, rounded: bannerFullWidth ? undefined : rounded || undefined,
buttonFlash: buttonFlash || undefined, withShadow: withShadow || undefined,
buttonBackgroundColor, buttonFlash: buttonFlash || undefined,
buttonTextColor, buttonBackgroundColor,
autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined, buttonTextColor,
openOnLeaveAttempt: openOnLeaveAttempt || undefined, autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined,
bannerFullWidth: bannerFullWidth || undefined, openOnLeaveAttempt: openOnLeaveAttempt || undefined,
autoShowWidgetTime, bannerFullWidth: bannerFullWidth || undefined,
appealText: appealText || undefined, autoShowWidgetTime,
quizHeaderText: quizHeaderText || undefined, appealText: appealText || undefined,
pulsation: pulsation || undefined, quizHeaderText: quizHeaderText || undefined,
fullScreen: fullScreen || undefined, pulsation: pulsation || undefined,
dialogDimensions: fullScreen: fullScreen || undefined,
!fullScreen && (widgetWidth || widgetHeight) dialogDimensions:
? { !fullScreen && (widgetWidth || widgetHeight)
width: widgetWidth ? `${widgetWidth}px` : "100%", ? {
height: widgetHeight ? `${widgetHeight}px` : "100%", width: widgetWidth ? `${widgetWidth}px` : "100%",
} height: widgetHeight ? `${widgetHeight}px` : "100%",
: undefined, }
}); : undefined,
},
widgetUrl
);
return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />; return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />;
} }

86
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup.tsx
View File

@ -1,7 +1,4 @@
import { import { ButtonWidgetFixedParams, ButtonWidgetParams } from "@frontend/squzanswerer";
ButtonWidgetFixedParams,
ButtonWidgetParams,
} from "@frontend/squzanswerer";
import { import {
Box, Box,
Button, Button,
@ -28,6 +25,7 @@ import Dots from "../../../../assets/dots.png";
import fixedButtonWidgetPreview from "../../../../assets/fixed-button-widget-preview.png"; import fixedButtonWidgetPreview from "../../../../assets/fixed-button-widget-preview.png";
import WidgetScript from "../WidgetScript"; import WidgetScript from "../WidgetScript";
import { createButtonWidgetScriptText } from "../createWidgetScriptText"; import { createButtonWidgetScriptText } from "../createWidgetScriptText";
import { useWidgetUrl } from "../useWidgetUrl";
interface Props { interface Props {
step: 2 | 3; step: 2 | 3;
@ -38,25 +36,21 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
const theme = useTheme(); const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065)); const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const widgetUrl = useWidgetUrl();
const [widgetWidth, setWidgetWidth] = useState<string>(""); const [widgetWidth, setWidgetWidth] = useState<string>("");
const [widgetHeight, setWidgetHeight] = 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 [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
const [rounded, setRounded] = useState<boolean>(false); const [rounded, setRounded] = useState<boolean>(false);
const [withShadow, setWithShadow] = useState<boolean>(false); const [withShadow, setWithShadow] = useState<boolean>(false);
const [buttonFlash, setButtonFlash] = useState<boolean>(false); const [buttonFlash, setButtonFlash] = useState<boolean>(false);
const [buttonText, setButtonText] = useState<string>(""); const [buttonText, setButtonText] = useState<string>("");
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 [buttonTextColor, setButtonTextColor] = useState<string>("#FFFFFF");
const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false); const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false);
const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10); const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false); const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false);
const [fixedSide, setFixedSide] = useState< const [fixedSide, setFixedSide] = useState<null | ButtonWidgetFixedParams["fixedSide"]>(null);
null | ButtonWidgetFixedParams["fixedSide"]
>(null);
const [fullScreen, setFullScreen] = useState<boolean>(false); const [fullScreen, setFullScreen] = useState<boolean>(false);
if (!quiz) return null; if (!quiz) return null;
@ -96,7 +90,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
}; };
} }
const scriptText = createButtonWidgetScriptText(params); const scriptText = createButtonWidgetScriptText(params, widgetUrl);
return ( return (
<WidgetScript <WidgetScript
@ -216,9 +210,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
<Collapse in={!fullScreen}> <Collapse in={!fullScreen}>
<Box sx={{ display: "flex", gap: "40px" }}> <Box sx={{ display: "flex", gap: "40px" }}>
<Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}> <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Ширина (px)</Typography>
Ширина (px)
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={widgetWidth} value={widgetWidth}
@ -228,9 +220,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
/> />
</Box> </Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}> <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Высота (px)</Typography>
Высота (px)
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={widgetHeight} value={widgetHeight}
@ -259,36 +249,18 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
alignItems: "center", 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> </Box>
<CustomCheckbox <CustomCheckbox
label="Отключить на мобильных устройствах" label="Отключить на мобильных устройствах"
checked={hideOnMobile} checked={hideOnMobile}
handleChange={(e) => setHideOnMobile(e.target.checked)} handleChange={(e) => setHideOnMobile(e.target.checked)}
/> />
<CustomCheckbox <CustomCheckbox label="Закругленная" checked={rounded} handleChange={(e) => setRounded(e.target.checked)} />
label="Закругленная" <CustomCheckbox label="С тенью" checked={withShadow} handleChange={(e) => setWithShadow(e.target.checked)} />
checked={rounded}
handleChange={(e) => setRounded(e.target.checked)}
/>
<CustomCheckbox
label="С тенью"
checked={withShadow}
handleChange={(e) => setWithShadow(e.target.checked)}
/>
<CustomCheckbox <CustomCheckbox
label="С бликом" label="С бликом"
checked={buttonFlash} checked={buttonFlash}
@ -309,16 +281,12 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
}} }}
value={fixedSide} value={fixedSide}
onChange={(e) => { onChange={(e) => {
setFixedSide( setFixedSide(e.target.value as ButtonWidgetFixedParams["fixedSide"]);
e.target.value as ButtonWidgetFixedParams["fixedSide"],
);
}} }}
> >
<FormControlLabel <FormControlLabel
value="left" value="left"
control={ control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
}
label="Слева" label="Слева"
sx={{ sx={{
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
@ -326,9 +294,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
/> />
<FormControlLabel <FormControlLabel
value="right" value="right"
control={ control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
}
label="Справа" label="Справа"
sx={{ sx={{
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
@ -337,9 +303,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
)} )}
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Текст кнопки</Typography>
Текст кнопки
</Typography>
<PenaTextField <PenaTextField
value={buttonText} value={buttonText}
onChange={(e) => setButtonText(e.target.value)} onChange={(e) => setButtonText(e.target.value)}
@ -399,22 +363,16 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
Показывать через
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={autoShowQuizTime} value={autoShowQuizTime}
onChange={(e) => onChange={(e) => setAutoShowQuizTime(parseInt(e.target.value))}
setAutoShowQuizTime(parseInt(e.target.value))
}
FormControlSx={{ FormControlSx={{
width: "90px", width: "90px",
}} }}
/> />
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
секунд
</Typography>
</Box> </Box>
</Box> </Box>
</Collapse> </Collapse>

135
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ContainerWidgetSetup.tsx
View File

@ -1,12 +1,4 @@
import { import { Box, Button, Collapse, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
Box,
Button,
Collapse,
Divider,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import CircleColorPicker from "@ui_kit/CircleColorPicker"; import CircleColorPicker from "@ui_kit/CircleColorPicker";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
@ -16,6 +8,7 @@ import { ReactNode, useState } from "react";
import Dots from "../../../../assets/dots.png"; import Dots from "../../../../assets/dots.png";
import WidgetScript from "../WidgetScript"; import WidgetScript from "../WidgetScript";
import { createContainerWidgetScriptText } from "../createWidgetScriptText"; import { createContainerWidgetScriptText } from "../createWidgetScriptText";
import { useWidgetUrl } from "../useWidgetUrl";
interface Props { interface Props {
step: 2 | 3; step: 2 | 3;
@ -26,8 +19,8 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
const theme = useTheme(); const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065)); const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] = const widgetUrl = useWidgetUrl();
useState<boolean>(false); const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] = useState<boolean>(false);
const [widgetWidth, setWidgetWidth] = useState<string>(""); const [widgetWidth, setWidgetWidth] = useState<string>("");
const [widgetHeight, setWidgetHeight] = useState<string>(""); const [widgetHeight, setWidgetHeight] = useState<string>("");
const [hideOnMobile, setHideOnMobile] = useState<boolean>(false); const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
@ -36,9 +29,7 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
const [withShadow, setWithShadow] = useState<boolean>(false); const [withShadow, setWithShadow] = useState<boolean>(false);
const [buttonFlash, setButtonFlash] = useState<boolean>(false); const [buttonFlash, setButtonFlash] = useState<boolean>(false);
const [buttonText, setButtonText] = useState<string>(""); const [buttonText, setButtonText] = useState<string>("");
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 [buttonTextColor, setButtonTextColor] = useState<string>("#FFFFFF");
const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false); const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false);
const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10); const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
@ -47,34 +38,32 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
if (!quiz) return null; if (!quiz) return null;
if (step === 3) { if (step === 3) {
const scriptText = createContainerWidgetScriptText({ const scriptText = createContainerWidgetScriptText(
quizId: quiz.qid, {
selector: `#pena-quiz-container-${nanoid(6)}`, quizId: quiz.qid,
dimensions: selector: `#pena-quiz-container-${nanoid(6)}`,
widgetWidth || widgetHeight dimensions:
? { widgetWidth || widgetHeight
width: widgetWidth ? `${widgetWidth}px` : "100%", ? {
height: widgetHeight ? `${widgetHeight}px` : "100%", width: widgetWidth ? `${widgetWidth}px` : "100%",
} height: widgetHeight ? `${widgetHeight}px` : "100%",
: undefined, }
hideOnMobile: hideOnMobile || undefined, : undefined,
showButtonOnMobile: showButtonOnMobile || undefined, hideOnMobile: hideOnMobile || undefined,
rounded: rounded || undefined, showButtonOnMobile: showButtonOnMobile || undefined,
withShadow: withShadow || undefined, rounded: rounded || undefined,
buttonFlash: buttonFlash || undefined, withShadow: withShadow || undefined,
buttonText: buttonText || undefined, buttonFlash: buttonFlash || undefined,
buttonBackgroundColor, buttonText: buttonText || undefined,
buttonTextColor, buttonBackgroundColor,
autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined, buttonTextColor,
openOnLeaveAttempt: openOnLeaveAttempt || undefined, autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined,
}); openOnLeaveAttempt: openOnLeaveAttempt || undefined,
},
return ( widgetUrl
<WidgetScript
scriptText={scriptText}
helperText="Установите код в место, в котором должен быть квиз"
/>
); );
return <WidgetScript scriptText={scriptText} helperText="Установите код в место, в котором должен быть квиз" />;
} }
return ( return (
@ -139,15 +128,11 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
maxWidth: "365px", maxWidth: "365px",
}} }}
> >
Quiz будет открыть прямо в том месте, где вы установите код на Quiz будет открыть прямо в том месте, где вы установите код на сайте
сайте
</Typography> </Typography>
</Box> </Box>
<Typography <Typography sx={{ maxWidth: "414px", fontSize: "14px", alignSelf: "start" }}>
sx={{ maxWidth: "414px", fontSize: "14px", alignSelf: "start" }} В мобильной версии будет показана кнопка, открывающая quiz в модальном окне
>
В мобильной версии будет показана кнопка, открывающая quiz в
модальном окне
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
@ -164,9 +149,7 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
</Typography> </Typography>
<Box sx={{ display: "flex", gap: "40px" }}> <Box sx={{ display: "flex", gap: "40px" }}>
<Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}> <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Ширина (px)</Typography>
Ширина (px)
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={widgetWidth} value={widgetWidth}
@ -176,9 +159,7 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
/> />
</Box> </Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}> <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Высота (px)</Typography>
Высота (px)
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={widgetHeight} value={widgetHeight}
@ -205,36 +186,18 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
gap: "40px", gap: "40px",
}} }}
> >
<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> </Box>
<CustomCheckbox <CustomCheckbox
label="Отключить на мобильных устройствах" label="Отключить на мобильных устройствах"
checked={hideOnMobile} checked={hideOnMobile}
handleChange={(e) => setHideOnMobile(e.target.checked)} handleChange={(e) => setHideOnMobile(e.target.checked)}
/> />
<CustomCheckbox <CustomCheckbox label="Закругленная" checked={rounded} handleChange={(e) => setRounded(e.target.checked)} />
label="Закругленная" <CustomCheckbox label="С тенью" checked={withShadow} handleChange={(e) => setWithShadow(e.target.checked)} />
checked={rounded}
handleChange={(e) => setRounded(e.target.checked)}
/>
<CustomCheckbox
label="С тенью"
checked={withShadow}
handleChange={(e) => setWithShadow(e.target.checked)}
/>
<CustomCheckbox <CustomCheckbox
label="С бликом" label="С бликом"
checked={buttonFlash} checked={buttonFlash}
@ -245,9 +208,7 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
checked={showButtonOnMobile} checked={showButtonOnMobile}
handleChange={(e) => setShowButtonOnMobile(e.target.checked)} handleChange={(e) => setShowButtonOnMobile(e.target.checked)}
/> />
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Текст кнопки</Typography>
Текст кнопки
</Typography>
<PenaTextField <PenaTextField
value={buttonText} value={buttonText}
onChange={(e) => setButtonText(e.target.value)} onChange={(e) => setButtonText(e.target.value)}
@ -307,22 +268,16 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
Показывать через
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={autoShowQuizTime} value={autoShowQuizTime}
onChange={(e) => onChange={(e) => setAutoShowQuizTime(parseInt(e.target.value))}
setAutoShowQuizTime(parseInt(e.target.value))
}
FormControlSx={{ FormControlSx={{
width: "90px", width: "90px",
}} }}
/> />
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
секунд
</Typography>
</Box> </Box>
</Box> </Box>
</Collapse> </Collapse>

64
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/PopupWidgetSetup.tsx
View File

@ -1,10 +1,4 @@
import { import { Box, Collapse, Typography, useMediaQuery, useTheme } from "@mui/material";
Box,
Collapse,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import PenaTextField from "@ui_kit/PenaTextField"; import PenaTextField from "@ui_kit/PenaTextField";
@ -12,6 +6,7 @@ import { ReactNode, useState } from "react";
import Dots from "../../../../assets/dots.png"; import Dots from "../../../../assets/dots.png";
import WidgetScript from "../WidgetScript"; import WidgetScript from "../WidgetScript";
import { createPopupWidgetScriptText } from "../createWidgetScriptText"; import { createPopupWidgetScriptText } from "../createWidgetScriptText";
import { useWidgetUrl } from "../useWidgetUrl";
interface Props { interface Props {
step: 2 | 3; step: 2 | 3;
@ -22,6 +17,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
const theme = useTheme(); const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065)); const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const widgetUrl = useWidgetUrl();
const [widgetWidth, setWidgetWidth] = useState<string>(""); const [widgetWidth, setWidgetWidth] = useState<string>("");
const [widgetHeight, setWidgetHeight] = useState<string>(""); const [widgetHeight, setWidgetHeight] = useState<string>("");
const [hideOnMobile, setHideOnMobile] = useState<boolean>(false); const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
@ -32,27 +28,25 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
if (!quiz) return null; if (!quiz) return null;
if (step === 3) { if (step === 3) {
const scriptText = createPopupWidgetScriptText({ const scriptText = createPopupWidgetScriptText(
quizId: quiz.qid, {
hideOnMobile: hideOnMobile || undefined, quizId: quiz.qid,
autoShowQuizTime: autoShowQuizTime, hideOnMobile: hideOnMobile || undefined,
openOnLeaveAttempt: openOnLeaveAttempt || undefined, autoShowQuizTime: autoShowQuizTime,
fullScreen: fullScreen || undefined, openOnLeaveAttempt: openOnLeaveAttempt || undefined,
dialogDimensions: fullScreen: fullScreen || undefined,
!fullScreen && (widgetWidth || widgetHeight) dialogDimensions:
? { !fullScreen && (widgetWidth || widgetHeight)
width: widgetWidth ? `${widgetWidth}px` : "100%", ? {
height: widgetHeight ? `${widgetHeight}px` : "100%", width: widgetWidth ? `${widgetWidth}px` : "100%",
} height: widgetHeight ? `${widgetHeight}px` : "100%",
: undefined, }
}); : undefined,
},
return ( widgetUrl
<WidgetScript
scriptText={scriptText}
helperText="Установите код внутрь тэга head"
/>
); );
return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />;
} }
return ( return (
@ -147,9 +141,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
gap: "20px", gap: "20px",
}} }}
> >
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Ширина окна (px)</Typography>
Ширина окна (px)
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={widgetWidth} value={widgetWidth}
@ -165,9 +157,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
gap: "20px", gap: "20px",
}} }}
> >
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Высота окна (px)</Typography>
Высота окна (px)
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={widgetHeight} value={widgetHeight}
@ -185,9 +175,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
Показывать через
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={autoShowQuizTime} value={autoShowQuizTime}
@ -196,9 +184,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
width: "90px", width: "90px",
}} }}
/> />
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
секунд
</Typography>
</Box> </Box>
<CustomCheckbox <CustomCheckbox
label="Открывать квиз при попытке уйти с сайта" label="Открывать квиз при попытке уйти с сайта"

125
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/SideWidgetSetup/SideWidgetSetup.tsx
View File

@ -1,11 +1,5 @@
import { SideWidgetParams } from "@frontend/squzanswerer"; import { SideWidgetParams } from "@frontend/squzanswerer";
import { import { Box, Collapse, Typography, useMediaQuery, useTheme } from "@mui/material";
Box,
Collapse,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import CircleColorPicker from "@ui_kit/CircleColorPicker"; import CircleColorPicker from "@ui_kit/CircleColorPicker";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
@ -15,6 +9,7 @@ import sideWidgetPreviewLeft from "../../../../../assets/side-widget-preview-lef
import sideWidgetPreviewRight from "../../../../../assets/side-widget-preview-right.png"; import sideWidgetPreviewRight from "../../../../../assets/side-widget-preview-right.png";
import WidgetScript from "../../WidgetScript"; import WidgetScript from "../../WidgetScript";
import { createSideWidgetScriptText } from "../../createWidgetScriptText"; import { createSideWidgetScriptText } from "../../createWidgetScriptText";
import { useWidgetUrl } from "../../useWidgetUrl";
import SideWidgetPositionButton from "./SideWidgetPositionButton"; import SideWidgetPositionButton from "./SideWidgetPositionButton";
interface Props { interface Props {
@ -26,49 +21,45 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
const theme = useTheme(); const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065)); const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const widgetUrl = useWidgetUrl();
const [widgetWidth, setWidgetWidth] = useState<string>(""); const [widgetWidth, setWidgetWidth] = useState<string>("");
const [widgetHeight, setWidgetHeight] = useState<string>(""); const [widgetHeight, setWidgetHeight] = useState<string>("");
const [hideOnMobile, setHideOnMobile] = useState<boolean>(false); const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false); const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false);
const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10); const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
const [autoShowWidgetTime, setAutoShowWidgetTime] = useState<number>(10); const [autoShowWidgetTime, setAutoShowWidgetTime] = useState<number>(10);
const [position, setPosition] = const [position, setPosition] = useState<SideWidgetParams["position"]>("left");
useState<SideWidgetParams["position"]>("left");
const [fullScreen, setFullScreen] = useState<boolean>(false); const [fullScreen, setFullScreen] = useState<boolean>(false);
const [buttonFlash, setButtonFlash] = 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 [buttonTextColor, setButtonTextColor] = useState<string>("#FFFFFF");
if (!quiz) return null; if (!quiz) return null;
if (step === 3) { if (step === 3) {
const scriptText = createSideWidgetScriptText({ const scriptText = createSideWidgetScriptText(
quizId: quiz.qid, {
position: position, quizId: quiz.qid,
hideOnMobile: hideOnMobile || undefined, position: position,
autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined, hideOnMobile: hideOnMobile || undefined,
autoShowWidgetTime: autoShowWidgetTime || undefined, autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined,
fullScreen: fullScreen || undefined, autoShowWidgetTime: autoShowWidgetTime || undefined,
buttonFlash: buttonFlash || undefined, fullScreen: fullScreen || undefined,
buttonTextColor, buttonFlash: buttonFlash || undefined,
buttonBackgroundColor, buttonTextColor,
dialogDimensions: buttonBackgroundColor,
!fullScreen && (widgetWidth || widgetHeight) dialogDimensions:
? { !fullScreen && (widgetWidth || widgetHeight)
width: widgetWidth ? `${widgetWidth}px` : "100%", ? {
height: widgetHeight ? `${widgetHeight}px` : "100%", width: widgetWidth ? `${widgetWidth}px` : "100%",
} height: widgetHeight ? `${widgetHeight}px` : "100%",
: undefined, }
}); : undefined,
},
return ( widgetUrl
<WidgetScript
scriptText={scriptText}
helperText="Установите код внутрь тэга head"
/>
); );
return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />;
} }
return ( return (
@ -92,11 +83,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
}} }}
> >
<img <img
src={ src={position === "left" ? sideWidgetPreviewLeft : sideWidgetPreviewRight}
position === "left"
? sideWidgetPreviewLeft
: sideWidgetPreviewRight
}
style={{ style={{
display: "block", display: "block",
width: "100%", width: "100%",
@ -133,9 +120,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
position="left" position="left"
onClick={() => setPosition("left")} onClick={() => setPosition("left")}
/> />
<Typography color={theme.palette.grey2.main}> <Typography color={theme.palette.grey2.main}>Слева снизу</Typography>
Слева снизу
</Typography>
</Box> </Box>
<Box <Box
sx={{ sx={{
@ -150,9 +135,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
position="right" position="right"
onClick={() => setPosition("right")} onClick={() => setPosition("right")}
/> />
<Typography color={theme.palette.grey2.main}> <Typography color={theme.palette.grey2.main}>Справа снизу</Typography>
Справа снизу
</Typography>
</Box> </Box>
</Box> </Box>
<CustomCheckbox <CustomCheckbox
@ -174,9 +157,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
gap: "20px", gap: "20px",
}} }}
> >
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Ширина окна (px)</Typography>
Ширина окна (px)
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={widgetWidth} value={widgetWidth}
@ -192,9 +173,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
gap: "20px", gap: "20px",
}} }}
> >
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Высота окна (px)</Typography>
Высота окна (px)
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={widgetHeight} value={widgetHeight}
@ -212,20 +191,10 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
alignItems: "center", 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> </Box>
<Box <Box
sx={{ sx={{
@ -234,9 +203,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Показывать кнопку через</Typography>
Показывать кнопку через
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={autoShowWidgetTime} value={autoShowWidgetTime}
@ -245,15 +212,9 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
width: "90px", width: "90px",
}} }}
/> />
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
секунд
</Typography>
</Box> </Box>
<CustomCheckbox <CustomCheckbox label="С бликом" checked={buttonFlash} handleChange={(e) => setButtonFlash(e.target.checked)} />
label="С бликом"
checked={buttonFlash}
handleChange={(e) => setButtonFlash(e.target.checked)}
/>
<Box> <Box>
<CustomCheckbox <CustomCheckbox
label="Автооткрытие виджета при входе на сайт" label="Автооткрытие виджета при входе на сайт"
@ -269,9 +230,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
mt: "14px", mt: "14px",
}} }}
> >
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
Показывать через
</Typography>
<PenaTextField <PenaTextField
type="number" type="number"
value={autoShowQuizTime} value={autoShowQuizTime}
@ -280,9 +239,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
width: "90px", width: "90px",
}} }}
/> />
<Typography sx={{ color: theme.palette.grey2.main }}> <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
секунд
</Typography>
</Box> </Box>
<Typography <Typography
sx={{ sx={{

25
src/pages/InstallQuiz/QuizInstallationCard/createWidgetScriptText.ts
View File

@ -8,47 +8,44 @@ import {
WidgetType, WidgetType,
} from "@frontend/squzanswerer"; } from "@frontend/squzanswerer";
export function createContainerWidgetScriptText(params: ContainerWidgetParams) { export function createContainerWidgetScriptText(params: ContainerWidgetParams, widgetUrl: string) {
return `<div id="${params.selector.slice(1)}"></div> return `<div id="${params.selector.slice(1)}"></div>
<script type="module"> <script type="module">
import { ContainerWidget } from "https://hbpn.link/export/pub.js"; import { ContainerWidget } from "${widgetUrl}";
new ContainerWidget(${JSON.stringify(params, null, 4)}); new ContainerWidget(${JSON.stringify(params, null, 4)});
</script>`; </script>`;
} }
export function createButtonWidgetScriptText( export function createButtonWidgetScriptText(params: ButtonWidgetParams | ButtonWidgetFixedParams, widgetUrl: string) {
params: ButtonWidgetParams | ButtonWidgetFixedParams, const widgetClassName = "fixedSide" in params ? "ButtonWidgetFixed" : "ButtonWidget";
) {
const widgetClassName =
"fixedSide" in params ? "ButtonWidgetFixed" : "ButtonWidget";
return `${"selector" in params ? `<div id="${params.selector.slice(1)}"></div>\n` : ""}<script type="module"> return `${"selector" in params ? `<div id="${params.selector.slice(1)}"></div>\n` : ""}<script type="module">
import { ${widgetClassName} } from "https://hbpn.link/export/pub.js"; import { ${widgetClassName} } from "${widgetUrl}";
new ${widgetClassName}(${JSON.stringify(params, null, 4)}); new ${widgetClassName}(${JSON.stringify(params, null, 4)});
</script>`; </script>`;
} }
export function createPopupWidgetScriptText(params: PopupWidgetParams) { export function createPopupWidgetScriptText(params: PopupWidgetParams, widgetUrl: string) {
return `<script type="module"> return `<script type="module">
import { PopupWidget } from "https://hbpn.link/export/pub.js"; import { PopupWidget } from "${widgetUrl}";
new PopupWidget(${JSON.stringify(params, null, 4)}); new PopupWidget(${JSON.stringify(params, null, 4)});
</script>`; </script>`;
} }
export function createSideWidgetScriptText(params: SideWidgetParams) { export function createSideWidgetScriptText(params: SideWidgetParams, widgetUrl: string) {
return `<script type="module"> return `<script type="module">
import { SideWidget } from "https://hbpn.link/export/pub.js"; import { SideWidget } from "${widgetUrl}";
new SideWidget(${JSON.stringify(params, null, 4)}); new SideWidget(${JSON.stringify(params, null, 4)});
</script>`; </script>`;
} }
export function createBannerWidgetScriptText(params: BannerWidgetParams) { export function createBannerWidgetScriptText(params: BannerWidgetParams, widgetUrl: string) {
return `<script type="module"> return `<script type="module">
import { BannerWidget } from "https://hbpn.link/export/pub.js"; import { BannerWidget } from "${widgetUrl}";
new BannerWidget(${JSON.stringify(params, null, 4)}); new BannerWidget(${JSON.stringify(params, null, 4)});
</script>`; </script>`;

7
src/pages/InstallQuiz/QuizInstallationCard/useWidgetUrl.ts Normal file
View File

@ -0,0 +1,7 @@
import { useDomainDefine } from "@/utils/hooks/useDomainDefine";
export function useWidgetUrl() {
const { isTestServer } = useDomainDefine();
return `https://${isTestServer ? "s." : ""}hbpn.link/export/pub.js`;
}