fansunited-frontend-components 0.0.1-RC3 → 0.0.1-RC5

package/src/components/Shared/Stopwatch.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useColors, useCornerRadius, useFontFamily } from "@fansunited/common";
+import { Box, Typography } from "@mui/joy";
+import { useEffect, useCallback } from "react";
+import TimerOutlinedIcon from "@mui/icons-material/TimerOutlined";
+const Stopwatch = (props) => {
+    let intervalId;
+    const dangerSoftBg = useColors().palette.danger.softBg;
+    const dangerColor = useColors().palette.danger.plainColor;
+    const warningSoftBg = useColors().palette.warning.softBg;
+    const warningColor = useColors().palette.warning.plainColor;
+    const primaryColor = props.brandingPrimaryColor || useColors().palette.primary.plainColor;
+    const xlBorderRadius = useCornerRadius().xl;
+    const fontFamilySecondary = useFontFamily().secondary;
+    const onPrimaryColor = useColors().palette.primary.onPrimary;
+    const pulseAnimation = {
+        "@keyframes pulse": {
+            "0%": {
+                transform: "scale(1)",
+            },
+            "50%": {
+                transform: "scale(1.05)",
+            },
+            "100%": {
+                transform: "scale(1)",
+            },
+        },
+    };
+    const updateTime = useCallback(() => {
+        const newTime = props.quizType === "countdown" ? props.timer - 1 : props.timer + 1;
+        props.onTimeUpdate(newTime);
+    }, [props.onTimeUpdate]);
+    useEffect(() => {
+        if (props.isRunning) {
+            intervalId = setInterval(updateTime, 1000);
+        }
+        return () => {
+            if (intervalId) {
+                clearInterval(intervalId);
+            }
+        };
+    }, [props.isRunning, updateTime, props.timer]);
+    const formatTime = (seconds) => {
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        return `${minutes < 10 ? "0" : ""}${minutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}${minutes > 0 ? "m" : "s"}`;
+    };
+    const getColor = () => {
+        if (props.quizType === "countdown") {
+            const timePercentage = (props.timer / props.initialTime) * 100;
+            if (timePercentage <= 30) {
+                return {
+                    background: dangerSoftBg,
+                    color: dangerColor,
+                    iconColor: dangerColor,
+                    animation: "pulse 1s infinite",
+                };
+            }
+            else if (timePercentage <= 50) {
+                return {
+                    background: warningSoftBg,
+                    color: warningColor,
+                    iconColor: warningColor,
+                };
+            }
+        }
+        return {
+            background: primaryColor,
+            color: onPrimaryColor,
+            iconColor: "#FFFFFF",
+        };
+    };
+    return (_jsxs(Box, { sx: {
+            py: "8px",
+            pl: "12px",
+            pr: "16px",
+            display: "flex",
+            gap: "4px",
+            alignItems: "center",
+            bgcolor: getColor().background,
+            borderRadius: xlBorderRadius,
+            maxWidth: "105px",
+            maxHeight: "40px",
+            transition: "all 0.3s ease",
+            animation: getColor().animation,
+            ...pulseAnimation,
+            zIndex: 10,
+        }, children: [_jsx(TimerOutlinedIcon, { sx: {
+                    width: "24px",
+                    height: "24px",
+                    color: getColor().iconColor,
+                    transition: "color 0.3s ease",
+                } }), _jsx(Typography, { sx: {
+                    fontFamily: fontFamilySecondary,
+                    fontWeight: 400,
+                    fontSize: "1rem",
+                    lineHeight: "150%",
+                    letterSpacing: "0.15px",
+                    color: getColor().color,
+                    transition: "color 0.3s ease",
+                }, children: formatTime(props.timer) })] }));
+};
+export default Stopwatch;

package/src/components/Variants/Overlay/AuthError/OverlayAuthError.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ClassicQuizFullModel } from "fansunited-sdk-esm";
+type OverlayAuthErrorProps = {
+    classicQuiz: ClassicQuizFullModel;
+};
+declare const OverlayAuthError: React.FC<OverlayAuthErrorProps>;
+export default OverlayAuthError;
+//# sourceMappingURL=OverlayAuthError.d.ts.map

package/src/components/Variants/Overlay/AuthError/OverlayAuthError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayAuthError.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Variants/Overlay/AuthError/OverlayAuthError.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,oBAAoB,EAAuB,MAAM,oBAAoB,CAAC;AAyC/E,KAAK,qBAAqB,GAAG;IAC3B,WAAW,EAAE,oBAAoB,CAAC;CACnC,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6ErD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/src/components/Variants/Overlay/AuthError/OverlayAuthError.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from "@mui/joy";
+import { stripHtmlTags, isMobile, useInternalTheme, useSpacingScale, } from "@fansunited/common";
+import bgImage from "../../../../assets/default-quiz-bg.png";
+import mobileBgImage from "../../../../assets/default-quiz-bg-vertical.jpg";
+import { useTranslation } from "react-i18next";
+import PresentedBy from "../../../Shared/PresentedBy";
+import AlertMessage from "../../../Shared/AlertMessage";
+import { createStyles } from "./OverlayAuthError.styles";
+const extractQuizBrandingProperties = (classicQuiz) => {
+    let brandingImage = classicQuiz.branding?.images?.backgroundImage || null;
+    let brandingLogo = classicQuiz.branding?.images?.mainLogo || null;
+    let brandingColors = null;
+    if (isMobile() && classicQuiz.branding?.images) {
+        brandingImage =
+            classicQuiz.branding.images.mobileBackgroundImage ||
+                classicQuiz.branding?.images?.backgroundImage ||
+                null;
+        brandingLogo =
+            classicQuiz.branding.images.mobileLogo ||
+                classicQuiz.branding.images.mainLogo ||
+                null;
+    }
+    if (classicQuiz.branding?.colors) {
+        brandingColors = classicQuiz.branding.colors;
+    }
+    return { brandingImage, brandingColors, brandingLogo };
+};
+const sanitizeBackgroundUrl = (url) => {
+    try {
+        return `url("${encodeURI(url)}")`;
+    }
+    catch {
+        return "none";
+    }
+};
+const OverlayAuthError = (props) => {
+    const spacingScale = useSpacingScale();
+    const internalTheme = useInternalTheme();
+    const quizImage = isMobile()
+        ? props.classicQuiz.images?.mobile || ""
+        : props.classicQuiz.images?.cover || "";
+    const { t } = useTranslation();
+    const imagePlaceholder = isMobile() ? mobileBgImage : bgImage;
+    // Extract branding properties
+    const { brandingImage, brandingColors, brandingLogo } = extractQuizBrandingProperties(props.classicQuiz);
+    // Styling variables
+    const secondaryColor = brandingColors?.contentColor || internalTheme.colorSchemes.dark.textColor;
+    const fontFamilyPrimary = internalTheme.customFontFamily.dark.primary;
+    const fontFamilySecondary = internalTheme.customFontFamily.dark.secondary;
+    const mdBorderRadius = internalTheme.customRadius.dark.md;
+    const borderSize = internalTheme.border.dark.size;
+    const backgroundImage = sanitizeBackgroundUrl(brandingImage || quizImage || imagePlaceholder);
+    // Create styles with current props/theme values
+    const styles = createStyles({
+        spacingScale,
+        brandingColors,
+        secondaryColor,
+        fontFamilyPrimary,
+        fontFamilySecondary,
+        mdBorderRadius,
+        borderSize,
+        darkTextColor: internalTheme.colorSchemes.dark.textColor,
+        backgroundImage,
+    });
+    return (_jsxs(Box, { sx: styles.mainContainer, children: [_jsx(Box, { children: _jsx(Box, { sx: styles.headlineSection, children: _jsx(Box, { sx: styles.headlineContent, children: _jsxs(Box, { sx: styles.headlineContentInner, children: [_jsx(Typography, { level: "body-sm", sx: styles.quizHeadlineText, children: t("classicQuiz.headline") }), _jsxs(Box, { sx: styles.contentContainer, children: [_jsx(Typography, { level: "h4", sx: styles.quizTitleText, children: props.classicQuiz.title }), _jsx(Typography, { level: "body-lg", sx: styles.quizDescriptionText, children: stripHtmlTags(props.classicQuiz.description) })] })] }) }) }) }), _jsxs(Box, { sx: styles.bottomSection, children: [_jsx(AlertMessage, { variant: "error", title: t("common.authentication.accessRequired"), message: t("common.authentication.invalidOrMissingAuth") }), _jsx(Box, { sx: styles.footerContainer, children: _jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: internalTheme.colorSchemes.dark.textColor }) })] })] }));
+};
+export default OverlayAuthError;

package/src/components/Variants/Overlay/AuthError/OverlayAuthError.styles.d.ts

@@ -0,0 +1,118 @@
+import { CustomSpacingScale } from "@fansunited/common";
+import { BrandingColorsModel } from "fansunited-sdk-esm";
+interface StyleProps {
+    spacingScale: CustomSpacingScale;
+    brandingColors: BrandingColorsModel | null;
+    secondaryColor: string;
+    fontFamilyPrimary: string;
+    fontFamilySecondary: string;
+    mdBorderRadius: string;
+    borderSize: string;
+    darkTextColor: string;
+    backgroundImage: string;
+}
+export declare const createStyles: (props: StyleProps) => {
+    mainContainer: {
+        display: string;
+        flexDirection: string;
+        justifyContent: string;
+        gap: string;
+        p: string;
+        boxShadow: string;
+        border: string;
+        overflow: string;
+        backgroundImage: string;
+        backgroundSize: string;
+        position: string;
+        borderRadius: string;
+        minHeight: string;
+        "&::before": {
+            content: string;
+            position: string;
+            background: string;
+            top: number;
+            left: number;
+            right: number;
+            bottom: number;
+            borderRadius: string;
+            zIndex: number;
+        };
+    };
+    headlineSection: {
+        display: string;
+        justifyContent: string;
+        flex: string;
+        alignSelf: string;
+    };
+    headlineContent: {
+        display: string;
+        flexDirection: string;
+        alignItems: string;
+        flex: string;
+        gap: string;
+    };
+    headlineContentInner: {
+        zIndex: number;
+    };
+    quizHeadlineText: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        textAlign: {
+            xs: string;
+            md: string;
+        };
+        color: string;
+        opacity: string;
+        textTransform: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+    contentContainer: {
+        display: string;
+        flexDirection: string;
+        gap: string;
+    };
+    quizTitleText: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        textAlign: {
+            xs: string;
+            md: string;
+        };
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+    };
+    quizDescriptionText: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        textAlign: {
+            xs: string;
+            md: string;
+        };
+        color: string;
+        opacity: string;
+        fontFamily: string;
+    };
+    bottomSection: {
+        display: string;
+        flexDirection: string;
+        gap: string;
+    };
+    footerContainer: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        flexDirection: {
+            xs: string;
+            md: string;
+        };
+        gap: string;
+    };
+};
+export {};
+//# sourceMappingURL=OverlayAuthError.styles.d.ts.map

package/src/components/Variants/Overlay/AuthError/OverlayAuthError.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayAuthError.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Variants/Overlay/AuthError/OverlayAuthError.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEzD,UAAU,UAAU;IAClB,YAAY,EAAE,kBAAkB,CAAC;IACjC,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC3C,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,UAAW,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgH5C,CAAC"}

package/src/components/Variants/Overlay/AuthError/OverlayAuthError.styles.js

@@ -0,0 +1,103 @@
+export const createStyles = (props) => ({
+    // Main container with background overlay
+    mainContainer: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        gap: "40px",
+        p: props.spacingScale.xl,
+        boxShadow: "xl",
+        border: props.brandingColors?.borderColor
+            ? `${props.borderSize} solid ${props.brandingColors.borderColor}`
+            : "none",
+        overflow: "hidden",
+        backgroundImage: props.backgroundImage,
+        backgroundSize: "cover",
+        position: "relative",
+        borderRadius: props.mdBorderRadius,
+        minHeight: "250px",
+        "&::before": {
+            content: '""',
+            position: "absolute",
+            background: "linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderRadius: "inherit",
+            zIndex: 0,
+        },
+    },
+    // Headline section wrapper
+    headlineSection: {
+        display: "flex",
+        justifyContent: "space-between",
+        flex: "1 0 0",
+        alignSelf: "stretch",
+    },
+    // Headline content container
+    headlineContent: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        flex: "1 0 0",
+        gap: "16px",
+    },
+    // Headline content with z-index
+    headlineContentInner: {
+        zIndex: 10,
+    },
+    // Quiz headline typography
+    quizHeadlineText: {
+        fontWeight: 500,
+        lineHeight: "166%",
+        letterSpacing: "1px",
+        textAlign: { xs: "center", md: "left" },
+        color: props.secondaryColor,
+        opacity: "70%",
+        textTransform: "uppercase",
+        fontFamily: props.fontFamilySecondary,
+        fontSize: "0.75rem",
+    },
+    // Content container
+    contentContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: props.spacingScale["3xs"],
+    },
+    // Quiz title typography
+    quizTitleText: {
+        fontWeight: 700,
+        lineHeight: "133%",
+        letterSpacing: "0px",
+        textAlign: { xs: "center", md: "left" },
+        fontSize: "1.5rem",
+        color: props.darkTextColor,
+        fontFamily: props.fontFamilyPrimary,
+    },
+    // Quiz description typography
+    quizDescriptionText: {
+        fontWeight: 500,
+        lineHeight: "140%",
+        letterSpacing: "0.15px",
+        fontSize: "1.25rem",
+        textAlign: { xs: "center", md: "left" },
+        color: props.secondaryColor,
+        opacity: "70%",
+        fontFamily: props.fontFamilyPrimary,
+    },
+    // Bottom section container
+    bottomSection: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "24px",
+    },
+    // Footer container
+    footerContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: { xs: "column-reverse", md: "row" },
+        gap: props.spacingScale.md,
+    },
+});

package/src/components/Variants/Overlay/OverlayVariant.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { MainLayoutProps } from "../../../types/types";
+declare const OverlayVariant: React.FC<MainLayoutProps>;
+export default OverlayVariant;
+//# sourceMappingURL=OverlayVariant.d.ts.map

package/src/components/Variants/Overlay/OverlayVariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayVariant.d.ts","sourceRoot":"","sources":["../../../../../src/components/Variants/Overlay/OverlayVariant.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AA4CvD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgO7C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/src/components/Variants/Overlay/OverlayVariant.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AspectRatio, Box, Button, Typography } from "@mui/joy";
+import React from "react";
+import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
+import { stripHtmlTags, useImageUrl, isMobile, useInternalTheme, useSpacingScale, } from "@fansunited/common";
+import Answers from "../../Shared/Answers/Answers";
+import Stopwatch from "../../Shared/Stopwatch";
+import bgImage from "../../../assets/default-quiz-bg.png";
+import mobileBgImage from "../../../assets/default-quiz-bg-vertical.jpg";
+import { useTranslation } from "react-i18next";
+import PresentedBy from "../../Shared/PresentedBy";
+import CollectLead from "../../Leads/CollectLead";
+import { quizTypes } from "../../../constants/constants";
+import { useEmbedCode } from "../../../hooks/useEmbedCodeContainer";
+import { createStyles } from "./OverlayVariant.styles";
+const extractQuizBrandingProperties = (classicQuiz) => {
+    let brandingImage = classicQuiz.branding?.images?.backgroundImage || null;
+    let brandingLogo = classicQuiz.branding?.images?.mainLogo || null;
+    let brandingColors = null;
+    if (isMobile() && classicQuiz.branding?.images) {
+        brandingImage =
+            classicQuiz.branding.images.mobileBackgroundImage ||
+                classicQuiz.branding?.images?.backgroundImage ||
+                null;
+        brandingLogo =
+            classicQuiz.branding.images.mobileLogo ||
+                classicQuiz.branding.images.mainLogo ||
+                null;
+    }
+    if (classicQuiz.branding?.colors) {
+        brandingColors = classicQuiz.branding.colors;
+    }
+    return { brandingImage, brandingColors, brandingLogo };
+};
+const sanitizeBackgroundUrl = (url) => {
+    try {
+        return `url("${encodeURI(url)}")`;
+    }
+    catch {
+        return "none";
+    }
+};
+const OverlayVariant = (props) => {
+    const [showLead, setShowLead] = React.useState(props.leads?.position === "before" &&
+        props.classicQuiz.authRequirement === "LEAD");
+    const spacingScale = useSpacingScale();
+    const internalTheme = useInternalTheme();
+    const quizImage = isMobile()
+        ? props.classicQuiz.images?.mobile || ""
+        : props.classicQuiz.images?.cover || "";
+    const questionImage = useImageUrl(props.question.images);
+    const { t } = useTranslation();
+    const imagePlaceholder = isMobile() ? mobileBgImage : bgImage;
+    const embedContainerRef = useEmbedCode(props.question.embedCode, props.applyFilterScreen);
+    // Extract branding properties
+    const { brandingImage, brandingColors, brandingLogo } = extractQuizBrandingProperties(props.classicQuiz);
+    // Styling variables
+    const secondaryColor = brandingColors?.contentColor || internalTheme.colorSchemes.dark.textColor;
+    const fontFamilyPrimary = internalTheme.customFontFamily.dark.primary;
+    const fontFamilySecondary = internalTheme.customFontFamily.dark.secondary;
+    const mdBorderRadius = internalTheme.customRadius.dark.md;
+    const smBorderRadius = internalTheme.customRadius.dark.sm;
+    const borderSize = internalTheme.border?.dark.size;
+    const contentBgColor = brandingColors?.backgroundColor ||
+        internalTheme.colorSchemes?.dark?.surfaceVariant;
+    const buttonRadius = internalTheme.customRadius?.light?.xl;
+    const primaryColor = brandingColors?.primaryColor ||
+        internalTheme.colorSchemes?.light?.palette?.primary?.plainColor;
+    const onPrimaryColor = internalTheme.colorSchemes?.light?.palette?.primary?.onPrimary;
+    const backgroundImage = sanitizeBackgroundUrl(brandingImage || quizImage || imagePlaceholder);
+    // Create styles with current props/theme values
+    const styles = createStyles({
+        spacingScale,
+        brandingColors,
+        secondaryColor,
+        fontFamilyPrimary,
+        fontFamilySecondary,
+        mdBorderRadius,
+        smBorderRadius,
+        borderSize,
+        contentBgColor,
+        buttonRadius,
+        primaryColor,
+        onPrimaryColor,
+        backgroundImage,
+        darkTextColor: internalTheme.colorSchemes.dark.textColor,
+    });
+    const closeLeadForm = () => {
+        setShowLead(false);
+    };
+    const renderPresentedBy = () => (_jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: internalTheme.colorSchemes.dark.textColor }));
+    return (_jsxs(Box, { sx: styles.mainContainer, children: [_jsx(Box, { children: _jsx(Box, { sx: styles.headlineSection, children: _jsx(Box, { sx: styles.headlineContent, children: _jsxs(Box, { sx: styles.headlineContentInner, children: [_jsx(Typography, { level: "body-sm", sx: styles.quizHeadlineText, children: t("classicQuiz.headline") }), _jsxs(Box, { sx: styles.contentContainer, children: [_jsx(Typography, { level: "h4", sx: styles.quizTitleText, children: props.classicQuiz.title }), _jsx(Typography, { level: "body-lg", sx: styles.quizDescriptionText, children: stripHtmlTags(props.classicQuiz.description) })] })] }) }) }) }), props.applyFilterScreen ? (_jsxs(Box, { sx: styles.filterScreenBottomContainer, children: [renderPresentedBy(), _jsx(Button, { variant: "soft", sx: {
+                            ...styles.startButton,
+                            ...styles.pulseAnimation,
+                        }, endDecorator: _jsx(ArrowRightAltIcon, {}), onClick: props.startPlaying, children: _jsx(Typography, { sx: styles.startButtonText, children: t("classicQuiz.buttons.start") }) })] })) : (_jsxs(Box, { sx: styles.mainContentSection, children: [!showLead &&
+                        quizTypes.includes(props.classicQuiz.type?.toLocaleLowerCase()) && (_jsx(Box, { sx: styles.stopwatchContainer, children: _jsx(Stopwatch, { brandingPrimaryColor: brandingColors?.primaryColor || null, isRunning: props.isStopwatchRunning, timer: props.stopwatchTime, quizType: props.classicQuiz.type, onTimeUpdate: props.onTimeUpdate, initialTime: props.classicQuiz.time || 10 }) })), _jsx(Box, { sx: styles.contentContainerWithBackdrop, children: showLead ? (_jsx(CollectLead, { sdk: props.sdk, contentType: "quiz", startGame: closeLeadForm, contentId: props.classicQuiz.id, contentName: props.classicQuiz.title, brandingColors: props.classicQuiz.branding?.colors, brandingUrls: props.classicQuiz.branding?.urls, campaignId: props.leads?.campaignId, campaignName: props.leads?.campaignName, fields: props.leads?.fields, leadTitle: props.classicQuiz.labels?.leadTitle, leadDescription: props.classicQuiz.labels?.leadDescription, leadCta: props.classicQuiz.labels?.leadCta, leadSuccessTitle: props.classicQuiz.labels?.leadSuccessTitle, leadSuccessDescription: props.classicQuiz.labels?.leadSuccessDescription })) : (_jsxs(_Fragment, { children: [props.question.embedCode && (_jsx(AspectRatio, { ratio: "16/9", sx: styles.aspectRatioContainer, children: _jsx(Box, { ref: embedContainerRef }) })), !props.question.embedCode && questionImage && (_jsx(AspectRatio, { ratio: "16/9", sx: styles.questionImageContainer, children: _jsx(Box, { sx: styles.questionImageBox, children: _jsx("img", { src: questionImage, alt: "Question illustration", style: styles.questionImage }) }) })), _jsxs(Box, { sx: styles.questionSection, children: [_jsxs(Typography, { level: "body-lg", sx: styles.questionStepsText, children: [props.currentQuestion, "/", props.classicQuiz.questionsCount] }), _jsx(Typography, { level: "body-lg", sx: styles.questionText, children: props.question.question })] }), _jsx(Answers, { options: props.question.options || [], answerQuestion: props.answerQuestion, selectedOption: props.selectedOption, showAnswer: props.showAnswer, twoByTwo: false, questionImage: questionImage, brandingColors: brandingColors })] })) }), _jsxs(Box, { sx: styles.bottomFooterContainer, children: [renderPresentedBy(), !showLead && (_jsx(Button, { variant: "soft", disabled: props.selectedOption === null || props.showAnswer, sx: styles.nextButton, endDecorator: _jsx(ArrowRightAltIcon, {}), onClick: props.handleNext, children: _jsx(Typography, { sx: styles.nextButtonText, children: props.currentQuestion === props.classicQuiz.questionsCount
+                                        ? t("classicQuiz.buttons.finish")
+                                        : t("classicQuiz.buttons.next") }) }))] })] }))] }));
+};
+export default OverlayVariant;