fansunited-frontend-components 0.0.1-RC5 → 0.0.1-RC6

package/src/components/ClassicQuizPlay.js

@@ -1,321 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { WidgetTemplate, initializeI18n, } from "@fansunited/common";
-import { useEffect, useMemo, useState } from "react";
-import { useClassicQuizById } from "../hooks/useClassicQuizById";
-import { useMyParticipation } from "../hooks/useMyParticipation";
-import { ClassicQuizUserParticipationModel, } from "fansunited-sdk-esm";
-import Spinner from "@fansunited/common/components/Spinner";
-import OverlayVariant from "./Variants/Overlay/OverlayVariant";
-import StandardVariant from "./Variants/Standard/StandardVariant";
-import SplitVariant from "./Variants/Split/SplitVariant";
-import StandardScoreState from "./Variants/Standard/ScoreState/StandardScoreState";
-import SplitScoreState from "./Variants/Split/ScoreState/SplitScoreState";
-import OverlayScoreState from "./Variants/Overlay/ScoreState/OverlayScoreState";
-import { quizTypes } from "../constants/constants";
-import ClassicQuizNotFound from "./ClassicQuizNotFound";
-import StandardAuthError from "./Variants/Standard/AuthError/StandardAuthError";
-import SplitAuthError from "./Variants/Split/AuthError/SplitAuthError";
-import OverlayAuthError from "./Variants/Overlay/AuthError/OverlayAuthError";
-// Type guard to check if the props are for the STANDARD template
-function isStandardTemplate(props) {
-    return props.template === WidgetTemplate.STANDARD;
-}
-const ClassicQuizPlay = (props) => {
-    const [currentQuestion, setCurrentQuestion] = useState(1);
-    const [selectedOption, setSelectedOption] = useState(null);
-    const [showAnswer, setShowAnswer] = useState(false);
-    const [questionsParticipation, setQuestionsParticipation] = useState([]);
-    const [summary, setSummary] = useState([]);
-    // Filters
-    const [applyFilterScreen, setApplyFilterScreen] = useState(false);
-    // stopwatch states
-    const [isStopwatchRunning, setIsStopwatchRunning] = useState(true);
-    const [stopwatchTime, setStopwatchTime] = useState(0);
-    // const [questionTimes, setQuestionTimes] = useState<number[]>([]);
-    // const [totalTime, setTotalTime] = useState<number>(0);
-    const classicQuiz = useClassicQuizById(props.entityId, props.sdk);
-    const myParticipation = useMyParticipation(props.entityId, props.sdk);
-    const maxAttemptsReached = useMemo(() => {
-        if (!classicQuiz || !myParticipation)
-            return false;
-        // Check if the quiz has max attempts set to 1 and if the user has any participation
-        return classicQuiz.maxAttempts === 1 && myParticipation.length > 0;
-    }, [classicQuiz, myParticipation]);
-    useEffect(() => {
-        initializeI18n(props.language || "en");
-    }, [props.language]);
-    useEffect(() => {
-        if (classicQuiz && classicQuiz.type) {
-            const isLeadBefore = classicQuiz.authRequirement === "LEAD" &&
-                props.leads?.position === "before";
-            if (!isLeadBefore &&
-                quizTypes.includes(classicQuiz.type.toLocaleLowerCase())) {
-                setApplyFilterScreen(true);
-            }
-            if (classicQuiz.type.toLowerCase() === "countdown") {
-                setStopwatchTime(classicQuiz.time || 10);
-            }
-        }
-    }, [classicQuiz]);
-    if (!classicQuiz || !myParticipation) {
-        return _jsx(Spinner, { my: 20 });
-    }
-    if (!classicQuiz.id) {
-        return _jsx(ClassicQuizNotFound, {});
-    }
-    if (myParticipation.length > 0 && !myParticipation[0].classicQuizId) {
-        if (isStandardTemplate(props)) {
-            return (_jsx(StandardAuthError, { classicQuiz: classicQuiz, imagePosition: props.imagePosition }));
-        }
-        if (props.template === WidgetTemplate.OVERLAY) {
-            return _jsx(OverlayAuthError, { classicQuiz: classicQuiz });
-        }
-        return _jsx(SplitAuthError, { classicQuiz: classicQuiz });
-    }
-    if (classicQuiz.authRequirement === "REGISTERED") {
-        //TODO: Show Login screen
-    }
-    const handleNext = async () => {
-        const currentQuestionData = classicQuiz.questions[currentQuestion - 1];
-        let optionId = null;
-        if (selectedOption) {
-            optionId = currentQuestionData.options[selectedOption - 1].optionId;
-        }
-        setShowAnswer(true);
-        setIsStopwatchRunning(false);
-        const participation = [
-            ...questionsParticipation,
-            {
-                questionId: currentQuestionData.questionId,
-                optionId,
-            },
-        ];
-        //@ts-ignore
-        setQuestionsParticipation(participation);
-        // Add delay before moving to next question
-        setTimeout(() => {
-            if (currentQuestion <= classicQuiz.questionsCount) {
-                setCurrentQuestion((prev) => prev + 1);
-                setSelectedOption(null);
-                setShowAnswer(false);
-                if (classicQuiz.type &&
-                    classicQuiz.type.toLowerCase() === "countdown") {
-                    setStopwatchTime(classicQuiz.time || 10);
-                }
-                setIsStopwatchRunning(true);
-            }
-        }, 1500);
-        if (currentQuestion === classicQuiz.questionsCount) {
-            try {
-                await props.sdk.miniGames.participateInClassicQuiz(props.entityId, participation);
-            }
-            catch (error) {
-                console.error("Error participating in classic quiz:", error);
-                setSummary([new ClassicQuizUserParticipationModel()]);
-                return;
-            }
-            const summary = await props.sdk.miniGames.getMyClassicQuizParticipations({
-                classicQuizIds: [props.entityId],
-            });
-            setSummary(summary);
-        }
-    };
-    const answerQuestion = (optionId) => {
-        setSelectedOption(optionId);
-    };
-    // Handler for stopwatch updates
-    const handleTimeUpdate = (time) => {
-        setStopwatchTime(time);
-        if (classicQuiz.type &&
-            classicQuiz.type.toLocaleLowerCase() === "countdown" &&
-            time === 0 &&
-            !applyFilterScreen) {
-            handleNext();
-        }
-    };
-    const playAgain = () => {
-        setCurrentQuestion(1);
-        setSelectedOption(null);
-        setShowAnswer(false);
-        setQuestionsParticipation([]);
-        setSummary([]);
-        setIsStopwatchRunning(true);
-        if (classicQuiz.type && classicQuiz.type.toLowerCase() === "countdown") {
-            setStopwatchTime(classicQuiz.time || 10);
-        }
-        else {
-            setStopwatchTime(0);
-        }
-    };
-    const startPlaying = () => {
-        setApplyFilterScreen(false);
-        setStopwatchTime(0);
-    };
-    // Render the main content based on widget template
-    const renderContent = () => {
-        // const summary = {
-        //   classicQuizId: "6xQle14gEsUWoSWb2K7v6N",
-        //   classicQuizModel: {
-        //     id: "6xQle14gEsUWoSWb2K7v6N",
-        //     title: "Los Blancos: Champions League Glory",
-        //     alternativeTitle: null,
-        //     description:
-        //       "<p>Test your knowledge of Real Madrid's legendary success in the Champions League! Discover the history, records and magical moments of Europe's most successful club.</p>",
-        //     type: "timed",
-        //     images: {
-        //       main: "https://uploads.fansunitedassets.com/superliga_ro/8be82e6c35dc184f64ca05af79e81184.jpeg",
-        //       cover: "",
-        //       mobile: "",
-        //     },
-        //     participationCount: 1,
-        //     questionsCount: 5,
-        //     status: "ACTIVE",
-        //     language: "en",
-        //     authRequirement: "FREE",
-        //     flags: [],
-        //     customFields: null,
-        //     labels: null,
-        //     branding: {
-        //       colors: {
-        //         primaryColor: "#AF8A3B",
-        //         secondaryColor: "",
-        //         contentColor: "#AF8A3B",
-        //         backgroundColor: "#000000",
-        //         borderColor: "#333333",
-        //         additionalColor: "",
-        //       },
-        //       urls: {
-        //         primary_url: "",
-        //         secondary_url: "",
-        //         privacy_policy_url: "",
-        //         terms_and_conditions_url: "",
-        //         additional_url: "",
-        //       },
-        //       images: {
-        //         mainLogo:
-        //           "https://uploads.fansunitedassets.com/productiontesting1/a24cd1cf44c8839bfbb913fdd7fd9232.png",
-        //         mobileLogo: "",
-        //         backgroundImage:
-        //           "https://uploads.fansunitedassets.com/productiontesting1/f4d3c45079057cfdec75df3aa0f6d93d.jpeg",
-        //         mobileBackgroundImage:
-        //           "https://uploads.fansunitedassets.com/productiontesting1/9df8318a99355909dc346198463e48f0.jpeg",
-        //         additionalImage: "",
-        //       },
-        //     },
-        //     related: [],
-        //     time: 0,
-        //     points: 10,
-        //     scored: true,
-        //     maxAttempts: 0,
-        //     averageScore: 2,
-        //     perfectScore: 0,
-        //     adContent: null,
-        //     context: {
-        //       content: null,
-        //       tags: [
-        //         {
-        //           id: "fb:t:8204",
-        //           model: null,
-        //           source: "football",
-        //           type: "team",
-        //         },
-        //       ],
-        //       campaign: null,
-        //     },
-        //     createdAt: "2025-05-29T06:42:40Z",
-        //     updatedAt: "2025-06-02T11:49:14Z",
-        //   },
-        //   correct: 3,
-        //   classicQuizQuestions: 5,
-        //   personalBest: 4,
-        //   points: 40,
-        //   answers: [
-        //     {
-        //       questionId: 1,
-        //       optionId: 3,
-        //       correct: true,
-        //       correctOptionId: null,
-        //     },
-        //     {
-        //       questionId: 2,
-        //       optionId: 3,
-        //       correct: true,
-        //       correctOptionId: null,
-        //     },
-        //     {
-        //       questionId: 3,
-        //       optionId: 3,
-        //       correct: false,
-        //       correctOptionId: null,
-        //     },
-        //     {
-        //       questionId: 4,
-        //       optionId: 3,
-        //       correct: true,
-        //       correctOptionId: null,
-        //     },
-        //     {
-        //       questionId: 5,
-        //       optionId: 3,
-        //       correct: false,
-        //       correctOptionId: null,
-        //     },
-        //   ],
-        // };
-        if (props.template === WidgetTemplate.OVERLAY) {
-            return (_jsx(OverlayVariant, { sdk: props.sdk, leads: props.leads, classicQuiz: classicQuiz, question: classicQuiz.questions[currentQuestion - 1], showAnswer: showAnswer, selectedOption: selectedOption, currentQuestion: currentQuestion, answerQuestion: answerQuestion, handleNext: handleNext, isStopwatchRunning: isStopwatchRunning, onTimeUpdate: handleTimeUpdate, stopwatchTime: stopwatchTime, applyFilterScreen: applyFilterScreen, startPlaying: startPlaying }));
-            // return (
-            //   <OverlayScoreState
-            //     //@ts-ignore
-            //     summary={summary}
-            //     totalTime={133}
-            //     showAnswerExplanations={props.showAnswerExplanations}
-            //     classicQuiz={classicQuiz}
-            //     sdk={props.sdk}
-            //     leads={props.leads}
-            //   />
-            // );
-        }
-        if (isStandardTemplate(props)) {
-            return (_jsx(StandardVariant, { sdk: props.sdk, leads: props.leads, classicQuiz: classicQuiz, question: classicQuiz.questions[currentQuestion - 1], showAnswer: showAnswer, selectedOption: selectedOption, currentQuestion: currentQuestion, answerQuestion: answerQuestion, handleNext: handleNext, imagePosition: props.imagePosition, userParticipation: questionsParticipation, isStopwatchRunning: isStopwatchRunning, onTimeUpdate: handleTimeUpdate, stopwatchTime: stopwatchTime, applyFilterScreen: applyFilterScreen, startPlaying: startPlaying }));
-            // return (
-            //   <StandardScoreState
-            //     imagePosition={props.imagePosition || "left"}
-            //     showAnswerExplanations={props.showAnswerExplanations || false}
-            //     questions={classicQuiz.questions}
-            //     classicQuiz={classicQuiz}
-            //     //@ts-ignore
-            //     summary={summary}
-            //     totalTime={133}
-            //     sdk={props.sdk}
-            //     leads={props.leads}
-            //   />
-            // );
-        }
-        return (_jsx(SplitVariant, { sdk: props.sdk, leads: props.leads, classicQuiz: classicQuiz, question: classicQuiz.questions[currentQuestion - 1], showAnswer: showAnswer, selectedOption: selectedOption, currentQuestion: currentQuestion, answerQuestion: answerQuestion, handleNext: handleNext, isStopwatchRunning: isStopwatchRunning, onTimeUpdate: handleTimeUpdate, stopwatchTime: stopwatchTime, applyFilterScreen: applyFilterScreen, startPlaying: startPlaying }));
-        // return (
-        //   <SplitScoreState
-        //     //@ts-ignore
-        //     summary={summary}
-        //     totalTime={133}
-        //     showAnswerExplanations={props.showAnswerExplanations}
-        //     classicQuiz={classicQuiz}
-        //     sdk={props.sdk}
-        //     leads={props.leads}
-        //   />
-        // );
-    };
-    if ((currentQuestion > classicQuiz.questionsCount && summary.length) ||
-        maxAttemptsReached) {
-        const summaryInfo = maxAttemptsReached ? myParticipation[0] : summary[0];
-        if (props.template === WidgetTemplate.OVERLAY) {
-            return (_jsx(OverlayScoreState, { summary: summaryInfo, totalTime: stopwatchTime, showAnswerExplanations: props.showAnswerExplanations || false, classicQuiz: classicQuiz, maxAttemptsReached: maxAttemptsReached, playAgain: playAgain, sdk: props.sdk, leads: props.leads }));
-        }
-        if (isStandardTemplate(props)) {
-            return (_jsx(StandardScoreState, { imagePosition: props.imagePosition || "left", summary: summaryInfo, totalTime: stopwatchTime, showAnswerExplanations: props.showAnswerExplanations || false, classicQuiz: classicQuiz, maxAttemptsReached: maxAttemptsReached, sdk: props.sdk, leads: props.leads, playAgain: playAgain }));
-        }
-        return (_jsx(SplitScoreState, { summary: summaryInfo, totalTime: stopwatchTime, showAnswerExplanations: props.showAnswerExplanations || false, classicQuiz: classicQuiz, maxAttemptsReached: maxAttemptsReached, playAgain: playAgain, sdk: props.sdk, leads: props.leads }));
-    }
-    return renderContent();
-};
-export default ClassicQuizPlay;

package/src/components/Leads/CollectLead.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Stack, Typography } from "@mui/joy";
-import { t } from "i18next";
-import { useColors, useFontFamily } from "@fansunited/common";
-import LeadForm from "./LeadForm";
-const CollectLead = ({ sdk, contentType, contentId, contentName, brandingColors, brandingUrls, campaignId, campaignName, startGame, fields = ["fullName", "email"], leadTitle, leadDescription, leadCta, leadSuccessTitle, leadSuccessDescription, }) => {
-    const titleLabel = leadTitle ?? t("leads.header.title");
-    const descriptionLabel = leadDescription ?? t("leads.header.description");
-    const submitLabel = leadCta ?? t("leads.buttons.submit");
-    const leadSuccessTitleLabel = leadSuccessTitle ?? t("leads.success.title");
-    const leadSuccessDescriptionLabel = leadSuccessDescription ?? t("leads.success.description");
-    const textColor = useColors().textColor;
-    const secondaryColor = brandingColors?.secondaryColor || useColors().textColor;
-    return (_jsxs(Stack, { spacing: 2, zIndex: 10, width: "100%", children: [_jsxs(Box, { children: [_jsx(Typography, { level: "h4", sx: { fontFamily: useFontFamily().primary, color: textColor }, children: titleLabel }), _jsx(Typography, { level: "body-sm", sx: {
-                            fontFamily: useFontFamily().primary,
-                            color: secondaryColor,
-                            opacity: 0.6,
-                        }, children: descriptionLabel })] }), _jsx(LeadForm, { sdk: sdk, brandingColors: brandingColors, brandingUrls: brandingUrls, campaignId: campaignId, campaignName: campaignName, contentName: contentName, contentType: contentType, contentId: contentId, startGame: startGame, fields: fields, submitButtonCta: submitLabel, leadSuccessTitle: leadSuccessTitleLabel, leadSuccessDescription: leadSuccessDescriptionLabel })] }));
-};
-export default CollectLead;

package/src/components/Leads/LeadAgreementCheckbox.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Checkbox, FormControl, Link, Typography } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-const LeadAgreementCheckbox = (props) => {
-    const { t } = useTranslation();
-    const displayLabel = () => {
-        if (privacyPolicyUrl && !termsAndConditionsUrl) {
-            return (_jsxs(Typography, { children: [t("common.labels.iAgreeToThe"), " ", _jsx(Link, { href: privacyPolicyUrl, target: "_blank", rel: "noopener noreferrer", sx: {
-                            color: props.primaryColor,
-                            textDecorationColor: props.primaryColor,
-                        }, children: t("leads.form.privacyPolicy") })] }));
-        }
-        if (!privacyPolicyUrl && termsAndConditionsUrl) {
-            return (_jsxs(Typography, { children: [t("common.labels.iAgreeToThe"), " ", _jsx(Link, { href: termsAndConditionsUrl, target: "_blank", rel: "noopener noreferrer", sx: {
-                            color: props.primaryColor,
-                            textDecorationColor: props.primaryColor,
-                        }, children: t("leads.form.termsAndConditions") })] }));
-        }
-        return (_jsxs(Typography, { children: [t("common.labels.iAgreeToThe"), " ", _jsx(Link, { href: privacyPolicyUrl, target: "_blank", rel: "noopener noreferrer", sx: {
-                        color: props.primaryColor,
-                        textDecorationColor: props.primaryColor,
-                    }, children: t("leads.form.privacyPolicy") }), " ", t("common.labels.andThe"), " ", _jsx(Link, { href: termsAndConditionsUrl, target: "_blank", rel: "noopener noreferrer", sx: {
-                        color: props.primaryColor,
-                        textDecorationColor: props.primaryColor,
-                    }, children: t("leads.form.termsAndConditions") })] }));
-    };
-    if (!props.brandingUrls) {
-        return _jsx(_Fragment, {});
-    }
-    const { privacyPolicyUrl, termsAndConditionsUrl } = props.brandingUrls;
-    if (!privacyPolicyUrl && !termsAndConditionsUrl) {
-        return _jsx(_Fragment, {});
-    }
-    return (_jsx(FormControl, { required: true, disabled: props.isDisabled, size: "sm", children: _jsxs(Box, { sx: { display: "inline-flex", alignItems: "center", gap: "8px" }, children: [_jsx(Checkbox, { slotProps: {
-                        checkbox: {
-                            sx: {
-                                "&.Mui-checked": {
-                                    bgcolor: props.primaryColor,
-                                    "--Icon-color": "#FFF",
-                                },
-                            },
-                        },
-                    } }), displayLabel()] }) }));
-};
-export default LeadAgreementCheckbox;