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

package/src/components/Variants/Split/ScoreState/SplitScoreState.styles.js

@@ -0,0 +1,400 @@
+export const createStyles = (props) => ({
+    // Desktop image section with overlay
+    desktopImageSection: (isTabulated) => ({
+        display: { lg: "flex", xs: "none" },
+        flexDirection: "column",
+        justifyContent: "space-between",
+        gap: "10px",
+        flex: "0.5",
+        backgroundImage: `url(${props.quizImage || props.imagePlaceholder})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        borderTopLeftRadius: isTabulated ? 0 : props.borderRadius.md,
+        borderTopRightRadius: {
+            xs: isTabulated ? 0 : props.borderRadius.md,
+            md: "0",
+        },
+        borderBottomLeftRadius: {
+            xs: 0,
+            md: props.borderRadius.md,
+        },
+        overflow: "hidden",
+        height: "auto",
+        position: "relative",
+        minHeight: { xs: "210px", md: "430px" },
+        "&::before": {
+            content: '""',
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            background: "linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%)",
+            borderTopLeftRadius: "5px",
+            borderTopRightRadius: "5px",
+        },
+    }),
+    // Image section content
+    imageSectionContent: {
+        zIndex: 1,
+        height: "100%",
+        p: props.spacingScale.xl,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+    },
+    // Quiz headline typography
+    quizHeadlineText: {
+        fontWeight: 500,
+        lineHeight: "166%",
+        letterSpacing: "1px",
+        fontSize: "0.75rem",
+        color: props.brandingColors?.secondaryColor || props.darkTextColor,
+        opacity: "70%",
+        textTransform: "uppercase",
+        fontFamily: props.fontFamilySecondary,
+        textAlign: { xs: "center", md: "left" },
+    },
+    // Content container
+    contentContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: props.spacingScale["3xs"],
+    },
+    // Quiz title typography
+    quizTitleText: {
+        fontWeight: 700,
+        lineHeight: "133%",
+        fontSize: "1.5rem",
+        letterSpacing: "0.15px",
+        color: props.brandingColors?.contentColor || props.darkTextColor,
+        fontFamily: props.fontFamilyPrimary,
+        textAlign: { xs: "center", md: "left" },
+    },
+    // Quiz description typography
+    quizDescriptionText: {
+        fontWeight: 500,
+        lineHeight: "140%",
+        fontSize: "1.25rem",
+        letterSpacing: "0.15px",
+        color: props.brandingColors?.secondaryColor || props.darkTextColor,
+        opacity: "70%",
+        fontFamily: props.fontFamilyPrimary,
+        textAlign: { xs: "center", md: "left" },
+    },
+    // Presented by desktop container
+    presentedByDesktop: {
+        display: { xs: "none", md: "block" },
+    },
+    // Main question area
+    questionArea: {
+        flex: { lg: "0.5", xs: "1" },
+    },
+    // Question area content wrapper
+    questionAreaContent: {
+        p: props.spacingScale.lg,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        gap: "16px",
+    },
+    // Score container (main card)
+    scoreContainer: {
+        p: props.spacingScale.lg,
+        gap: props.spacingScale.md,
+        display: "flex",
+        flexDirection: "column",
+        backdropFilter: "blur(4px)",
+        bgcolor: `rgba(${props.bgcolor ? props.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+        borderRadius: props.borderRadius.sm,
+        boxShadow: "lg",
+    },
+    // Score content wrapper
+    scoreContentWrapper: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "stretch",
+    },
+    // Score content container
+    scoreContentContainer: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: props.spacingScale["3xl"],
+        alignSelf: "stretch",
+    },
+    // Score section
+    scoreSection: {
+        display: "flex",
+        gap: props.spacingScale.xs,
+        justifyContent: "center",
+        alignSelf: "stretch",
+        alignItems: "center",
+    },
+    // Score section wrapper
+    scoreSectionWrapper: {
+        display: "flex",
+        flexDirection: { xs: "column", md: "row" },
+        minWidth: "200px",
+        p: props.spacingScale.xs,
+        justifyContent: "center",
+        alignItems: "center",
+        gap: props.spacingScale.md,
+        flex: "1 0 0",
+    },
+    // Achievement badge container
+    achievementBadgeContainer: {
+        display: "flex",
+        width: { xs: "172px", md: "auto" },
+        height: { xs: "160px", md: "auto" },
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        position: "relative",
+    },
+    // Hexagon background
+    hexagonBackground: {
+        width: "160px",
+        height: "160px",
+        position: "absolute",
+        top: "55%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+    },
+    // Achievement emoji
+    achievementEmoji: {
+        maxWidth: "80px",
+        maxHeight: "80px",
+        position: "relative",
+    },
+    // Text section
+    textSection: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        boxSizing: "border-box",
+    },
+    // Congratulations text
+    congratulationsText: {
+        color: props.textPrimary,
+        textAlign: "center",
+        fontFamily: props.fontFamilyPrimary,
+        fontSize: "1.5rem",
+        fontStyle: "normal",
+        fontWeight: 400,
+        lineHeight: "133.4%",
+        px: 2,
+    },
+    // Score numbers container
+    scoreNumbersContainer: {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+    },
+    // Score numbers wrapper
+    scoreNumbersWrapper: {
+        display: "flex",
+        alignItems: "flex-end",
+        gap: "4px",
+    },
+    // Correct score text
+    correctScoreText: (correct) => ({
+        textAlign: "center",
+        color: correct > 0 ? props.successColor : props.dangerColor,
+        fontFamily: props.fontFamilyPrimary,
+        fontSize: "3.75rem",
+        fontStyle: "normal",
+        fontWeight: 500,
+        lineHeight: "120%",
+        letterSpacing: "-0.5px",
+    }),
+    // Total score text
+    totalScoreText: (correct) => ({
+        textAlign: "center",
+        color: correct > 0 ? props.successColor : props.dangerColor,
+        fontFamily: props.fontFamilyPrimary,
+        fontSize: "3.75rem",
+        fontStyle: "normal",
+        fontWeight: 500,
+        lineHeight: "120%",
+        letterSpacing: "-0.5px",
+    }),
+    // Time text
+    timeText: {
+        textAlign: "center",
+        color: props.textPrimary,
+        fontFamily: props.fontFamilySecondary,
+        fontSize: "0.875rem",
+        fontStyle: "normal",
+        fontWeight: 700,
+        lineHeight: "143%",
+        letterSpacing: "0.024px",
+    },
+    // Points text
+    pointsText: {
+        textAlign: "center",
+        color: props.textPrimary,
+        fontFamily: props.fontFamilyPrimary,
+        fontSize: "1.25rem",
+        fontStyle: "normal",
+        fontWeight: 500,
+        lineHeight: "120%",
+        letterSpacing: "0.15px",
+    },
+    // CTA container
+    ctaContainer: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "24px",
+    },
+    // CTA content wrapper
+    ctaContentWrapper: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "16px",
+    },
+    // Thanks for playing text
+    thanksText: {
+        color: props.textPrimary,
+        textAlign: "center",
+        fontFamily: props.fontFamilyPrimary,
+        fontSize: "1.25rem",
+        fontStyle: "normal",
+        fontWeight: 500,
+        lineHeight: "120%",
+        letterSpacing: "0.15px",
+    },
+    // Buttons container
+    buttonsContainer: {
+        display: "flex",
+        flexDirection: { xs: "column", md: "row" },
+        gap: "16px",
+    },
+    // Play again button
+    playAgainButton: {
+        display: "flex",
+        py: props.spacingScale.xs,
+        px: "16px",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8px",
+        borderRadius: props.borderRadius.xl,
+        color: props.textPrimary,
+        bgcolor: props.surfaceColor,
+        "&:hover": {
+            bgcolor: props.onSurfaceColor,
+        },
+    },
+    // Play again button content
+    playAgainButtonContent: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8px",
+        alignSelf: "stretch",
+    },
+    // Play again icon
+    playAgainIcon: {
+        display: "flex",
+        width: "16px",
+        height: "16px",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        color: props.textPrimary,
+    },
+    // Play again text
+    playAgainText: {
+        color: props.textPrimary,
+        textAlign: "center",
+        fontFamily: props.fontFamilyPrimary,
+        fontSize: "0.8125rem",
+        fontStyle: "normal",
+        fontWeight: 500,
+        lineHeight: "22px",
+        letterSpacing: "0.46px",
+        textTransform: "uppercase",
+    },
+    // Share button
+    shareButton: {
+        display: "flex",
+        py: props.spacingScale.xs,
+        px: "16px",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "10px",
+        borderRadius: props.borderRadius.xl,
+        bgcolor: props.primaryColor,
+        "&:hover": {
+            bgcolor: props.primaryColor,
+        },
+    },
+    // Share button content
+    shareButtonContent: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8px",
+        alignSelf: "stretch",
+    },
+    // Share icon
+    shareIcon: {
+        display: "flex",
+        width: "16px",
+        height: "16px",
+        justifyContent: "center",
+        alignItems: "center",
+        color: props.onPrimaryColor,
+    },
+    // Share text
+    shareText: {
+        color: props.onPrimaryColor,
+        textAlign: "center",
+        fontFamily: props.fontFamilyPrimary,
+        fontSize: "0.8125rem",
+        fontStyle: "normal",
+        fontWeight: 500,
+        lineHeight: "22px",
+        letterSpacing: "0.46px",
+        textTransform: "uppercase",
+    },
+    // Presented by mobile
+    presentedByMobile: {
+        display: { xs: "block", md: "none" },
+    },
+    // Lead collection container
+    leadCollectionContainer: {
+        p: props.spacingScale.lg,
+        gap: props.spacingScale.md,
+        display: "flex",
+        flexDirection: "column",
+        backdropFilter: "blur(4px)",
+        bgcolor: `rgba(${props.bgcolor ? props.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+        borderRadius: props.borderRadius.sm,
+        boxShadow: "lg",
+    },
+    // Lead content wrapper
+    leadContentWrapper: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "stretch",
+    },
+    alertMessageArea: {
+        flex: {
+            lg: 0.5,
+            xs: 1,
+        },
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+    },
+    alertMessageWrapper: {
+        p: props.spacingScale.lg,
+    },
+});

package/src/components/Variants/Split/SplitVariant.d.ts

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

package/src/components/Variants/Split/SplitVariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitVariant.d.ts","sourceRoot":"","sources":["../../../../../src/components/Variants/Split/SplitVariant.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAYhD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqO3C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/src/components/Variants/Split/SplitVariant.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Box, Typography, Button as JoyButton, AspectRatio } from "@mui/joy";
+import { hexToRgb, stripHtmlTags, useImageUrl, isMobile, useColors, useCornerRadius, useFontFamily, useInternalTheme, useSpacingScale, } from "@fansunited/common";
+import Answers from "../../Shared/Answers/Answers";
+import Button from "../../Shared/Button";
+import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
+import Stopwatch from "../../Shared/Stopwatch";
+import MainCard from "../../Shared/MainCard";
+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 "./SplitVariant.styles";
+const SplitVariant = (props) => {
+    const [showLead, setShowLead] = React.useState(props.leads?.position === "before" &&
+        props.classicQuiz.authRequirement === "LEAD");
+    const theme = useInternalTheme();
+    const quizImage = useImageUrl(props.classicQuiz.images);
+    const questionImage = useImageUrl(props.question.images);
+    const { t } = useTranslation();
+    const brandingColors = props.classicQuiz.branding?.colors || null;
+    const brandingLogo = isMobile()
+        ? props.classicQuiz.branding?.images.mobileLogo ||
+            props.classicQuiz.branding?.images.mainLogo ||
+            ""
+        : props.classicQuiz.branding?.images.mainLogo || "";
+    const imagePlaceholder = isMobile() ? mobileBgImage : bgImage;
+    const embedContainerRef = useEmbedCode(props.question.embedCode, props.applyFilterScreen);
+    // Styling variables
+    const secondaryColor = brandingColors?.contentColor || useColors().textColor;
+    const fontFamilySecondary = useFontFamily().secondary;
+    const opacity = "60%";
+    const fontFamilyPrimary = useFontFamily().primary;
+    const buttonRadius = useCornerRadius().xl;
+    const backgroundColor = brandingColors?.backgroundColor || useColors().surfaceVariant;
+    const primaryColor = brandingColors?.primaryColor || useColors().palette?.primary?.plainColor;
+    const onPrimaryColor = useColors().palette?.primary?.onPrimary;
+    const textColor = useColors().textColor;
+    const spacingScale = useSpacingScale();
+    const borderRadius = useCornerRadius();
+    const bgcolor = hexToRgb(backgroundColor || "");
+    // Create styles with current props/theme values
+    const styles = createStyles({
+        quizImage,
+        questionImage,
+        imagePlaceholder,
+        spacingScale,
+        borderRadius,
+        fontFamilyPrimary,
+        fontFamilySecondary,
+        secondaryColor,
+        opacity,
+        buttonRadius,
+        bgcolor,
+        primaryColor,
+        onPrimaryColor,
+        textColor,
+        brandingColors,
+        darkTextColor: theme.colorSchemes.dark.textColor,
+        applyFilterScreen: props.applyFilterScreen,
+    });
+    const closeLeadForm = () => {
+        setShowLead(false);
+    };
+    const renderPresentedBy = (textColor) => (_jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: textColor }));
+    return (_jsxs(MainCard, { brandingBorderColor: brandingColors?.borderColor || null, children: [_jsx(Box, { sx: styles.headlineSection, children: _jsxs(Box, { sx: styles.headlineContent, children: [_jsxs(Box, { children: [_jsx(Typography, { level: "body-sm", sx: styles.quizHeadlineText, children: t("classicQuiz.headline") }), _jsxs(Box, { sx: styles.contentContainer, children: [_jsx(Typography, { level: "body-lg", sx: styles.quizTitleText, children: props.classicQuiz.title }), _jsx(Typography, { level: "body-md", sx: styles.quizDescriptionText, children: stripHtmlTags(props.classicQuiz.description) })] })] }), props.applyFilterScreen ? (_jsx(Box, { children: _jsxs(Box, { sx: styles.filterScreenBottomContainer, children: [renderPresentedBy(brandingColors?.contentColor ||
+                                        theme.colorSchemes.dark.textColor), _jsx(JoyButton, { variant: "soft", sx: {
+                                            ...styles.startButton,
+                                            ...styles.pulseAnimation,
+                                        }, endDecorator: _jsx(ArrowRightAltIcon, {}), onClick: props.startPlaying, children: _jsx(Typography, { sx: styles.startButtonText, children: t("classicQuiz.buttons.start") }) })] }) })) : (_jsx(Box, { sx: styles.presentedByDesktop, children: renderPresentedBy(brandingColors?.contentColor ||
+                                theme.colorSchemes.dark.textColor) }))] }) }), _jsx(Box, { sx: styles.questionArea, children: showLead ? (_jsx(Box, { sx: styles.leadContentContainer, children: _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: [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, initialTime: props.classicQuiz.time || 10, onTimeUpdate: props.onTimeUpdate }) })), _jsxs(Box, { sx: styles.mainContentContainer, 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: true, questionImage: questionImage, brandingColors: brandingColors }), _jsxs(Box, { sx: styles.buttonFooterContainer, children: [_jsx(Button, { showAnswer: props.showAnswer, selectedOption: props.selectedOption, endDecorator: _jsx(ArrowRightAltIcon, {}), label: props.currentQuestion === props.classicQuiz.questionsCount
+                                                ? t("classicQuiz.buttons.finish")
+                                                : t("classicQuiz.buttons.next"), buttonColor: primaryColor, onClick: props.handleNext }), _jsx(Box, { sx: styles.presentedByMobile, children: renderPresentedBy(brandingColors?.contentColor || textColor) })] })] })] })) })] }));
+};
+export default SplitVariant;