fansunited-frontend-components 0.0.1-RC4 → 0.0.1-RC5

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

@@ -0,0 +1,286 @@
+import { CustomSpacingScale } from "@fansunited/common";
+import { BrandingColorsModel } from "fansunited-sdk-esm";
+import { CSSProperties } from "react";
+interface StyleProps {
+    spacingScale: CustomSpacingScale;
+    brandingColors: BrandingColorsModel | null;
+    secondaryColor: string;
+    fontFamilyPrimary: string;
+    fontFamilySecondary: string;
+    mdBorderRadius: string;
+    smBorderRadius: string;
+    borderSize: string;
+    contentBgColor: string;
+    buttonRadius: string;
+    primaryColor: string;
+    onPrimaryColor: string;
+    backgroundImage: string;
+    darkTextColor: string;
+}
+export declare const createStyles: (props: StyleProps) => {
+    pulseAnimation: {
+        "@keyframes pulse": {
+            "0%": {
+                transform: string;
+            };
+            "50%": {
+                transform: string;
+            };
+            "100%": {
+                transform: string;
+            };
+        };
+    };
+    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;
+    };
+    filterScreenBottomContainer: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        flexDirection: {
+            xs: string;
+            md: string;
+        };
+        gap: string;
+    };
+    startButton: {
+        borderRadius: string;
+        bgcolor: string;
+        color: string;
+        py: string;
+        pr: string;
+        pl: string;
+        "&:hover": {
+            bgcolor: string;
+        };
+        "&:active": {
+            color: string;
+        };
+        animation: string;
+    };
+    startButtonText: {
+        fontFamily: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+        textTransform: string;
+        color: string;
+        gap: string;
+        display: string;
+        alignItems: string;
+    };
+    mainContentSection: {
+        display: string;
+        flexDirection: string;
+        gap: string;
+    };
+    stopwatchContainer: {
+        display: string;
+        justifyContent: string;
+    };
+    contentContainerWithBackdrop: {
+        borderRadius: string;
+        p: string;
+        display: string;
+        flexDirection: string;
+        gap: string;
+        backdropFilter: string;
+        position: string;
+        "&::before": {
+            content: string;
+            position: string;
+            top: number;
+            left: number;
+            right: number;
+            bottom: number;
+            backgroundColor: string;
+            opacity: number;
+            borderRadius: string;
+            zIndex: number;
+        };
+        "& > *": {
+            position: string;
+            zIndex: number;
+        };
+    };
+    aspectRatioContainer: {
+        borderRadius: string;
+    };
+    questionImageContainer: {
+        overflow: string;
+        borderRadius: string;
+    };
+    questionImageBox: {
+        borderRadius: string;
+        overflow: string;
+        height: string;
+    };
+    questionImage: {
+        width: string;
+        height: string;
+        objectFit: CSSProperties["objectFit"];
+    };
+    questionSection: {
+        display: {
+            md: string;
+            xs: string;
+        };
+        gap: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    questionStepsText: {
+        fontFamily: string;
+        lineHeight: string;
+        letterSpacing: string;
+        fontWeight: number;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        textAlign: string;
+    };
+    questionText: {
+        fontFamily: string;
+        lineHeight: string;
+        letterSpacing: string;
+        fontWeight: number;
+        fontSize: string;
+        textAlign: string;
+        color: string;
+    };
+    bottomFooterContainer: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        flexDirection: {
+            xs: string;
+            md: string;
+        };
+        gap: string;
+    };
+    nextButton: {
+        borderRadius: string;
+        py: string;
+        pr: string;
+        pl: string;
+        bgcolor: string;
+        color: string;
+        transition: string;
+        transform: string;
+        ml: {
+            md: string;
+        };
+        "&:hover": {
+            bgcolor: string;
+            transform: string;
+        };
+        "&:active": {
+            color: string;
+            transform: string;
+        };
+        "&:disabled": {
+            bgcolor: string;
+            color: string;
+            opacity: string;
+        };
+    };
+    nextButtonText: {
+        fontFamily: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+        textTransform: string;
+        color: string;
+        gap: string;
+        display: string;
+        alignItems: string;
+    };
+};
+export {};
+//# sourceMappingURL=OverlayVariant.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayVariant.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Variants/Overlay/OverlayVariant.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,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,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,UAAW,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgNpB,aAAa,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFlD,CAAC"}

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

@@ -0,0 +1,266 @@
+export const createStyles = (props) => ({
+    // Pulse animation for buttons
+    pulseAnimation: {
+        "@keyframes pulse": {
+            "0%": { transform: "scale(1)" },
+            "50%": { transform: "scale(1.05)" },
+            "100%": { transform: "scale(1)" },
+        },
+    },
+    // 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,
+    },
+    // Filter screen bottom container
+    filterScreenBottomContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: { xs: "column-reverse", md: "row" },
+        gap: props.spacingScale.md,
+    },
+    // Start button (filter screen)
+    startButton: {
+        borderRadius: props.buttonRadius,
+        bgcolor: props.primaryColor,
+        color: "#FFFFFF",
+        py: "10px",
+        pr: "12px",
+        pl: "16px",
+        "&:hover": {
+            bgcolor: props.primaryColor,
+        },
+        "&:active": {
+            color: props.onPrimaryColor,
+        },
+        animation: "pulse 1s infinite",
+    },
+    // Start button text
+    startButtonText: {
+        fontFamily: props.fontFamilyPrimary,
+        fontWeight: 500,
+        fontSize: "0.9375rem",
+        lineHeight: "24px",
+        letterSpacing: "0.46px",
+        textTransform: "uppercase",
+        color: props.onPrimaryColor,
+        gap: "8px",
+        display: "flex",
+        alignItems: "center",
+    },
+    // Main content section (non-filter screen)
+    mainContentSection: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "24px",
+    },
+    // Stopwatch container
+    stopwatchContainer: {
+        display: "flex",
+        justifyContent: "center",
+    },
+    // Content container with backdrop
+    contentContainerWithBackdrop: {
+        borderRadius: props.mdBorderRadius,
+        p: props.spacingScale.md,
+        display: "flex",
+        flexDirection: "column",
+        gap: props.spacingScale.md,
+        backdropFilter: "blur(4px)",
+        position: "relative",
+        "&::before": {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: props.contentBgColor,
+            opacity: 0.5,
+            borderRadius: "inherit",
+            zIndex: 0,
+        },
+        "& > *": {
+            position: "relative",
+            zIndex: 1,
+        },
+    },
+    // Aspect ratio container for embed/image
+    aspectRatioContainer: {
+        borderRadius: props.smBorderRadius,
+    },
+    // Question image container
+    questionImageContainer: {
+        overflow: "hidden",
+        borderRadius: props.smBorderRadius,
+    },
+    // Question image box
+    questionImageBox: {
+        borderRadius: props.smBorderRadius,
+        overflow: "hidden",
+        height: "auto",
+    },
+    // Question image
+    questionImage: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+    },
+    // Question section
+    questionSection: {
+        display: { md: "flex", xs: "block" },
+        gap: "8px",
+        alignItems: "flex-start",
+        justifyContent: "center",
+    },
+    // Question steps typography
+    questionStepsText: {
+        fontFamily: props.fontFamilyPrimary,
+        lineHeight: "150%",
+        letterSpacing: "0.15px",
+        fontWeight: 500,
+        fontSize: "1.25rem",
+        color: props.secondaryColor,
+        opacity: "70%",
+        textAlign: "center",
+    },
+    // Question text
+    questionText: {
+        fontFamily: props.fontFamilyPrimary,
+        lineHeight: "150%",
+        letterSpacing: "0.15px",
+        fontWeight: 500,
+        fontSize: "1.25rem",
+        textAlign: "center",
+        color: props.darkTextColor,
+    },
+    // Bottom footer container
+    bottomFooterContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: { xs: "column-reverse", md: "row" },
+        gap: props.spacingScale.md,
+    },
+    // Next button
+    nextButton: {
+        borderRadius: props.buttonRadius,
+        py: "10px",
+        pr: "12px",
+        pl: "16px",
+        bgcolor: props.primaryColor,
+        color: "#FFFFFF",
+        transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+        transform: "scale(1)",
+        ml: { md: "auto" },
+        "&:hover": {
+            bgcolor: props.primaryColor,
+            transform: "scale(1.02)",
+        },
+        "&:active": {
+            color: props.onPrimaryColor,
+            transform: "scale(0.98)",
+        },
+        "&:disabled": {
+            bgcolor: props.primaryColor,
+            color: props.onPrimaryColor,
+            opacity: "34%",
+        },
+    },
+    // Next button text
+    nextButtonText: {
+        fontFamily: props.fontFamilyPrimary,
+        fontWeight: 500,
+        fontSize: "0.9375rem",
+        lineHeight: "24px",
+        letterSpacing: "0.46px",
+        textTransform: "uppercase",
+        color: props.onPrimaryColor,
+        gap: "8px",
+        display: "flex",
+        alignItems: "center",
+    },
+});

package/src/components/Variants/Overlay/ScoreState/OverlayScoreState.d.ts

@@ -0,0 +1,16 @@
+import { ClassicQuizUserParticipationModel, ClassicQuizFullModel, FansUnitedSDKModel } from "fansunited-sdk-esm";
+import React from "react";
+import { LeadsOptions } from "@fansunited/common";
+type OverlayScoreState = {
+    summary: ClassicQuizUserParticipationModel;
+    totalTime: number;
+    showAnswerExplanations: boolean;
+    classicQuiz: ClassicQuizFullModel;
+    maxAttemptsReached: boolean;
+    sdk: FansUnitedSDKModel;
+    leads?: LeadsOptions;
+    playAgain: () => void;
+};
+declare const OverlayScoreState: React.FC<OverlayScoreState>;
+export default OverlayScoreState;
+//# sourceMappingURL=OverlayScoreState.d.ts.map

package/src/components/Variants/Overlay/ScoreState/OverlayScoreState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayScoreState.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Variants/Overlay/ScoreState/OverlayScoreState.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iCAAiC,EAGjC,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAIb,MAAM,oBAAoB,CAAC;AAwC5B,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,iCAAiC,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB,EAAE,OAAO,CAAC;IAChC,WAAW,EAAE,oBAAoB,CAAC;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,GAAG,EAAE,kBAAkB,CAAC;IACxB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmOlD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/src/components/Variants/Overlay/ScoreState/OverlayScoreState.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, Typography } from "@mui/joy";
+import { useInternalTheme, WidgetTemplate, isMobile, useSpacingScale, } from "@fansunited/common";
+import ReplayIcon from "@mui/icons-material/Replay";
+import share from "../../../../assets/share.svg";
+import bgImage from "../../../../assets/default-quiz-bg.png";
+import mobileBgImage from "../../../../assets/default-quiz-bg-vertical.jpg";
+import ScoreStateWrapper from "../../../Shared/ScoreStateWrapper";
+import { useTranslation } from "react-i18next";
+import PresentedBy from "../../../Shared/PresentedBy";
+import CollectLead from "../../../Leads/CollectLead";
+import { createStyles } from "./OverlayScoreState.styles";
+import AlertMessage from "../../../Shared/AlertMessage";
+import { useScoreStateHelpers } from "../../../../hooks/useScoreStateHelpers";
+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;
+        brandingLogo = classicQuiz.branding.images.mobileLogo;
+    }
+    if (classicQuiz.branding?.colors) {
+        brandingColors = classicQuiz.branding.colors;
+    }
+    return { brandingImage, brandingColors, brandingLogo };
+};
+const sanitizeBackgroundUrl = (url) => {
+    try {
+        return `url("${encodeURI(url)}")`;
+    }
+    catch {
+        return "none";
+    }
+};
+const OverlayScoreState = (props) => {
+    const theme = useInternalTheme();
+    const spacingScale = useSpacingScale();
+    const { t } = useTranslation();
+    const imagePlaceholder = isMobile() ? mobileBgImage : bgImage;
+    const quizImage = props.classicQuiz.images?.cover || "";
+    const { brandingImage, brandingColors, brandingLogo } = extractQuizBrandingProperties(props.classicQuiz);
+    const { getHexagonBackground, formatTime, displayCongratulations, getRandomEmoji, shareResult, scorePercentage, } = useScoreStateHelpers({
+        summary: props.summary,
+        totalTime: props.totalTime,
+        classicQuiz: props.classicQuiz,
+        variant: WidgetTemplate.OVERLAY,
+    });
+    // Styling variables
+    const primaryColor = brandingColors?.primaryColor ||
+        theme.colorSchemes.light.palette.primary.plainColor;
+    const textPrimary = theme.colorSchemes.dark.textPrimary;
+    const fontFamilyPrimary = theme.customFontFamily.light.primary;
+    const fontFamilySecondary = theme.customFontFamily.light.secondary;
+    const mdBorderRadius = theme.customRadius.light.md;
+    const xlBorderRadius = theme.customRadius.light.xl;
+    const borderColor = brandingColors?.borderColor || theme.colorSchemes.dark.secondaryContainer;
+    const borderSize = theme.border.light.size;
+    const contentBgColor = brandingColors?.backgroundColor || theme.colorSchemes.dark.surfaceVariant;
+    const showLead = props.leads?.position === "after" &&
+        props.classicQuiz.authRequirement === "LEAD";
+    const backgroundImage = sanitizeBackgroundUrl(brandingImage || quizImage || imagePlaceholder);
+    // Create styles with current props/theme values
+    const styles = createStyles({
+        spacingScale,
+        brandingColors,
+        primaryColor,
+        textPrimary,
+        fontFamilyPrimary,
+        fontFamilySecondary,
+        mdBorderRadius,
+        xlBorderRadius,
+        borderColor,
+        borderSize,
+        contentBgColor,
+        backgroundImage,
+        successColor: theme.colorSchemes.dark.palette.success.plainColor,
+        dangerColor: theme.colorSchemes.dark.palette.danger.plainColor,
+        onSurfaceColor: theme.colorSchemes.dark.onSurface,
+        surfaceVariantColor: theme.colorSchemes.dark.surfaceVariant,
+        scorePercentage,
+    });
+    const renderMainContent = () => {
+        return (_jsxs(Box, { sx: styles.mainContentWrapper, children: [props.summary.classicQuizId ? (_jsx(Box, { sx: styles.scoreContainer, children: _jsxs(Box, { sx: styles.scoreContentWrapper, children: [_jsx(Box, { sx: styles.scoreSection, children: _jsxs(Box, { sx: styles.scoreSectionWrapper, children: [_jsxs(Box, { sx: styles.achievementBadgeContainer, children: [_jsx("img", { style: styles.hexagonBackground, src: getHexagonBackground(), alt: "achievement-badge-background" }), _jsx("img", { style: styles.achievementEmoji, src: getRandomEmoji("dark"), alt: "achievement-badge" })] }), _jsxs(Box, { sx: styles.textSection, children: [_jsx(Typography, { level: "body-lg", sx: styles.congratulationsText, children: props.maxAttemptsReached
+                                                        ? t("classicQuiz.maxAttemptsReached")
+                                                        : displayCongratulations() }), _jsx(Box, { sx: styles.scoreNumbersContainer, children: _jsxs(Box, { sx: styles.scoreNumbersWrapper, children: [_jsx(Typography, { level: "h2", sx: styles.correctScoreText, children: props.summary.correct }), _jsxs(Typography, { level: "h2", sx: styles.totalScoreText, children: ["/", props.summary.classicQuizQuestions] })] }) }), props.totalTime ? (_jsxs(Typography, { level: "body-md", sx: styles.timeText, children: [t("classicQuiz.youDidItFor"), " ", formatTime()] })) : null, props.classicQuiz.scored ? (_jsxs(Typography, { level: "body-lg", sx: styles.pointsText, children: [t("classicQuiz.youWon"), " ", props.summary.correct * props.classicQuiz.points, " ", t("common.labels.points")] })) : null] })] }) }), _jsx(Box, { sx: styles.ctaSection, children: _jsxs(Box, { sx: styles.ctaContentWrapper, children: [_jsx(Typography, { level: "body-lg", sx: styles.thanksText, children: t("classicQuiz.thanksForPlaying") }), _jsxs(Box, { sx: styles.buttonsContainer, children: [!props.maxAttemptsReached && (_jsx(Button, { sx: styles.playAgainButton, onClick: props.playAgain, children: _jsxs(Box, { sx: styles.playAgainButtonContent, children: [_jsx(ReplayIcon, { sx: styles.playAgainIcon }), _jsx(Typography, { sx: styles.playAgainText, children: t("classicQuiz.buttons.playAgain") })] }) })), _jsx(Button, { sx: styles.shareButton, onClick: shareResult, children: _jsxs(Box, { sx: styles.shareButtonContent, children: [_jsx("img", { src: share, alt: "share-icon", style: styles.shareIcon }), _jsx(Typography, { sx: styles.shareText, children: t("classicQuiz.buttons.share") })] }) })] })] }) })] }) })) : (_jsx(_Fragment, { children: _jsx(AlertMessage, { variant: "error", title: t("common.authentication.accessRequired"), message: t("common.authentication.invalidOrMissingAuth") }) })), !props.maxAttemptsReached && showLead && (_jsx(Box, { sx: styles.leadCollectionContainer, children: _jsx(CollectLead, { sdk: props.sdk, contentType: "quiz", 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 }) })), _jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: theme.colorSchemes.dark.textColor })] }));
+    };
+    return (_jsx(_Fragment, { children: props.showAnswerExplanations ? (_jsx(Box, { sx: styles.mainContainerWithExplanations, children: _jsx(ScoreStateWrapper, { questions: props.classicQuiz.questions, userParticipation: props.summary.answers, resultsTabPanelSxProps: { p: 0 }, isOverlayVariant: true, brandingColors: props.classicQuiz.branding?.colors, children: _jsx(Box, { sx: styles.scoreStateWrapperContent, children: renderMainContent() }) }) })) : (_jsx(Box, { sx: styles.mainContainer, children: renderMainContent() })) }));
+};
+export default OverlayScoreState;