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

package/src/components/Leads/LeadForm.js

@@ -1,289 +0,0 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Autocomplete, AutocompleteOption, Box, Button, FormControl, FormLabel, Input, ListItemContent, ListItemDecorator, Option, Select, Stack, Typography, useTheme, } from "@mui/joy";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { countries, getDefaultCountryByCode, getDefaultCountryByLanguage, } from "../../constants/constants";
-import AlertMessage from "../Shared/AlertMessage";
-import { formStyles } from "../../styles/form.styles";
-import { ConstantsContext, useConstantContext, useColors, useCornerRadius, useFontFamily, } from "@fansunited/common";
-import LeadAgreementCheckbox from "./LeadAgreementCheckbox";
-const LeadForm = ({ sdk, brandingColors, brandingUrls, fields = ["fullName", "email"], campaignId = "", campaignName = "", contentType = "", contentId = "", contentName = "", customFields = {}, startGame, submitButtonCta, leadSuccessTitle, leadSuccessDescription, }) => {
-    const { shadowRootElement, leadPhoneCountryCode, language } = useConstantContext(ConstantsContext);
-    const [formData, setFormData] = useState({
-        firstName: "",
-        lastName: "",
-        fullName: "",
-        email: "",
-        gender: "",
-        country: "",
-        phoneCountryCode: leadPhoneCountryCode
-            ? getDefaultCountryByCode(leadPhoneCountryCode)
-            : getDefaultCountryByLanguage(language || "en"),
-        phoneNumber: "",
-    });
-    const [isLoading, setIsLoading] = useState(false);
-    const [isSuccess, setIsSuccess] = useState(false);
-    const [error, setError] = useState("");
-    const { t } = useTranslation();
-    const theme = useTheme();
-    const textPrimary = useColors().textPrimary;
-    const primaryColor = brandingColors?.primaryColor || useColors().palette?.primary?.plainColor;
-    const onPrimaryColor = useColors().palette?.primary?.onPrimary;
-    const primaryContainer = brandingColors?.primaryColor ||
-        useColors().palette?.primary?.primaryContainer;
-    const primaryFont = useFontFamily().primary;
-    const smBorderRadius = useCornerRadius().sm;
-    // Light theme colors for consistent styling
-    const lightThemeColors = {
-        background: {
-            surface: theme.colorSchemes.light.palette.background.surface,
-            popup: theme.colorSchemes.light.palette.background.popup,
-        },
-        neutral: {
-            outlinedBorder: theme.colorSchemes.light.palette.neutral.outlinedBorder,
-            outlinedColor: theme.colorSchemes.light.palette.neutral.outlinedColor,
-            outlinedHoverBg: theme.colorSchemes.light.palette.neutral.outlinedHoverBg,
-            plainActiveBg: theme.colorSchemes.light.palette.neutral.plainActiveBg,
-            plainHoverBg: theme.colorSchemes.light.palette.neutral.plainHoverBg,
-            plainHoverColor: theme.colorSchemes.light.palette.neutral.plainHoverColor,
-        },
-    };
-    const genderOptions = [
-        { value: "male", label: t("leads.form.genderOptions.male") },
-        { value: "female", label: t("leads.form.genderOptions.female") },
-        { value: "other", label: t("leads.form.genderOptions.other") },
-        { value: "prefer_not_to_say", label: t("leads.form.genderOptions.notSay") },
-    ];
-    const labelStyles = {
-        color: `${textPrimary} !important`,
-    };
-    const inputStyles = {
-        fontFamily: primaryFont,
-        borderRadius: smBorderRadius,
-        bgcolor: lightThemeColors.background.surface,
-        borderColor: lightThemeColors.neutral.outlinedBorder,
-        color: lightThemeColors.neutral.outlinedColor,
-        "&:hover": {
-            bgcolor: lightThemeColors.neutral.outlinedHoverBg,
-        },
-        "&.Mui-disabled": {
-            borderColor: lightThemeColors.neutral.outlinedBorder,
-        },
-        // Autofill styling override
-        "& input:-webkit-autofill": {
-            WebkitBoxShadow: `0 0 0 1000px ${lightThemeColors.background.surface} inset !important`,
-            WebkitTextFillColor: `${lightThemeColors.neutral.outlinedColor} !important`,
-            caretColor: lightThemeColors.neutral.outlinedColor,
-            borderRadius: smBorderRadius,
-        },
-        "& input:-webkit-autofill:hover": {
-            WebkitBoxShadow: `0 0 0 1000px ${lightThemeColors.background.surface} inset !important`,
-            WebkitTextFillColor: `${lightThemeColors.neutral.outlinedColor} !important`,
-        },
-        "& input:-webkit-autofill:focus": {
-            WebkitBoxShadow: `0 0 0 1000px ${lightThemeColors.background.surface} inset !important`,
-            WebkitTextFillColor: `${lightThemeColors.neutral.outlinedColor} !important`,
-        },
-        "& input:-webkit-autofill:active": {
-            WebkitBoxShadow: `0 0 0 1000px ${lightThemeColors.background.surface} inset !important`,
-            WebkitTextFillColor: `${lightThemeColors.neutral.outlinedColor} !important`,
-        },
-        // For other browsers (Firefox, etc.)
-        "& input:-moz-autofill": {
-            backgroundColor: `${lightThemeColors.background.surface} !important`,
-            color: `${lightThemeColors.neutral.outlinedColor} !important`,
-        },
-        // Additional autofill states
-        "& input:autofill": {
-            backgroundColor: `${lightThemeColors.background.surface} !important`,
-            color: `${lightThemeColors.neutral.outlinedColor} !important`,
-        },
-        // "&:focus-within": {
-        //   borderColor:
-        //     brandingColors?.primaryColor ||
-        //     theme.colorSchemes.light.palette.primary.outlinedBorder, //TODO: Should we apply this?
-        // },
-    };
-    const selectStyles = {
-        root: {
-            sx: {
-                ...inputStyles,
-                "&:hover": {
-                    bgcolor: lightThemeColors.neutral.outlinedHoverBg,
-                },
-            },
-        },
-        listbox: {
-            container: shadowRootElement,
-            sx: {
-                zIndex: 10,
-                bgcolor: lightThemeColors.background.popup,
-                border: `1px solid ${lightThemeColors.neutral.outlinedBorder}`,
-                borderRadius: smBorderRadius,
-                boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
-            },
-        },
-    };
-    // Option styles for consistent light theme
-    const optionStyles = {
-        fontFamily: primaryFont,
-        color: `${lightThemeColors.neutral.outlinedColor} !important`,
-        bgcolor: "transparent",
-        "&:hover": {
-            bgcolor: `${lightThemeColors.neutral.plainHoverBg} !important`,
-            color: `${lightThemeColors.neutral.plainHoverColor} !important`,
-        },
-        "&.Mui-selected": {
-            bgcolor: `${lightThemeColors.neutral.plainActiveBg} !important`,
-            color: `${lightThemeColors.neutral.outlinedColor} !important`,
-        },
-        "&.Mui-selected:hover": {
-            bgcolor: `${lightThemeColors.neutral.plainActiveBg} !important`,
-            color: `${lightThemeColors.neutral.outlinedColor} !important`,
-        },
-    };
-    const fullNameLabel = t("leads.form.fullName");
-    const fullNamePlaceholder = t("leads.form.fullNamePlaceholder");
-    const firstNameLabel = t("leads.form.firstName");
-    const firstNamePlaceholder = t("leads.form.firstNamePlaceholder");
-    const lastNameLabel = t("leads.form.lastName");
-    const lastNamePlaceholder = t("leads.form.lastNamePlaceholder");
-    const emailLabel = t("leads.form.email");
-    const genderLabel = t("leads.form.gender");
-    const genderPlaceholder = t("leads.form.genderPlaceholder");
-    const countryLabel = t("leads.form.country");
-    const countryPlaceholder = t("leads.form.countryPlaceholder");
-    const phoneNumberLabel = t("leads.form.phone");
-    const phoneNumberPlaceholder = t("leads.form.phonePlaceholder");
-    const submitButtonLabel = submitButtonCta ?? t("leads.buttons.submit");
-    const startButtonLabel = t("classicQuiz.buttons.start");
-    const handleInputChange = (field) => (e) => {
-        setFormData((prev) => ({
-            ...prev,
-            [field]: e.target.value,
-        }));
-    };
-    const handlePhoneCountryChange = (_event, newValue) => {
-        setFormData((prev) => ({
-            ...prev,
-            phoneCountryCode: newValue,
-        }));
-    };
-    const handleCountryChange = (_event, newValue) => {
-        setFormData((prev) => ({
-            ...prev,
-            country: newValue || "",
-        }));
-    };
-    const handleGenderChange = (_event, newValue) => {
-        setFormData((prev) => ({
-            ...prev,
-            gender: newValue || "",
-        }));
-    };
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        setError("");
-        const payload = {
-            firstName: formData.firstName,
-            lastName: formData.lastName,
-            fullName: formData.fullName,
-            email: formData.email,
-            gender: formData.gender,
-            country: formData.country,
-            phoneCountryCode: "+" + formData.phoneCountryCode?.phone,
-            phoneNumber: formData.phoneNumber,
-            campaignId,
-            campaignName,
-            contentType,
-            contentId,
-            contentName,
-            customFields,
-        };
-        // Only filter user input fields, keep campaign and content data
-        const userInputFields = [
-            "firstName",
-            "lastName",
-            "fullName",
-            "email",
-            "gender",
-            "country",
-            "phoneCountryCode",
-            "phoneNumber",
-        ];
-        const filteredPayload = Object.fromEntries(Object.entries(payload).map(([key, value]) => {
-            // If it's a user input field, only include if it's in the fields array
-            if (userInputFields.includes(key)) {
-                if (fields.includes(key) && value !== "" && value !== null) {
-                    return [key, value];
-                }
-                return [key, null];
-            }
-            // Always include non-user input fields (campaign, content, custom fields)
-            return [key, value];
-        }));
-        setIsLoading(true);
-        try {
-            await sdk.profile.collectLead(filteredPayload);
-            setIsSuccess(true);
-        }
-        catch (error) {
-            setError(t("leads.form.error"));
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    return (_jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { spacing: 2, sx: { fontFamily: primaryFont }, children: [fields.includes("fullName") && (_jsxs(FormControl, { required: true, disabled: isSuccess, children: [_jsx(FormLabel, { sx: labelStyles, children: fullNameLabel }), _jsx(Input, { value: formData.fullName, onChange: handleInputChange("fullName"), placeholder: fullNamePlaceholder, sx: inputStyles })] })), fields.includes("firstName") && (_jsxs(FormControl, { required: true, disabled: isSuccess, children: [_jsx(FormLabel, { sx: labelStyles, children: firstNameLabel }), _jsx(Input, { value: formData.firstName, onChange: handleInputChange("firstName"), placeholder: firstNamePlaceholder, sx: inputStyles })] })), fields.includes("lastName") && (_jsxs(FormControl, { required: true, disabled: isSuccess, children: [_jsx(FormLabel, { sx: labelStyles, children: lastNameLabel }), _jsx(Input, { value: formData.lastName, onChange: handleInputChange("lastName"), placeholder: lastNamePlaceholder, sx: inputStyles })] })), fields.includes("email") && (_jsxs(FormControl, { required: true, disabled: isSuccess, children: [_jsx(FormLabel, { sx: labelStyles, children: emailLabel }), _jsx(Input, { type: "email", value: formData.email, onChange: handleInputChange("email"), placeholder: "your.email@example.com", sx: inputStyles })] })), fields.includes("gender") && (_jsxs(FormControl, { disabled: isSuccess, children: [_jsx(FormLabel, { sx: labelStyles, children: genderLabel }), _jsx(Select, { value: formData.gender, onChange: handleGenderChange, placeholder: genderPlaceholder, slotProps: selectStyles, children: genderOptions.map((option) => (_jsx(Option, { value: option.value, sx: optionStyles, children: option.label }, option.value))) })] })), fields.includes("country") && (_jsxs(FormControl, { required: true, disabled: isSuccess, children: [_jsx(FormLabel, { sx: labelStyles, children: countryLabel }), _jsx(Select, { value: formData.country, onChange: handleCountryChange, placeholder: countryPlaceholder, slotProps: selectStyles, children: countries.map((country) => (_jsx(Option, { value: country.code, sx: optionStyles, children: country.label }, `${country.code}-${country.label}`))) })] })), (fields.includes("phoneCountryCode") ||
-                    fields.includes("phoneNumber")) && (_jsxs(FormControl, { required: true, disabled: isSuccess, children: [_jsx(FormLabel, { sx: labelStyles, children: phoneNumberLabel }), _jsxs(Box, { sx: formStyles.phoneContainer, children: [fields.includes("phoneCountryCode") && (_jsx(Autocomplete, { value: formData.phoneCountryCode, onChange: handlePhoneCountryChange, slotProps: {
-                                        input: {
-                                            autoComplete: "new-phone-country-code",
-                                        },
-                                        listbox: selectStyles.listbox,
-                                        root: selectStyles.root,
-                                        clearIndicator: {
-                                            sx: {
-                                                "&:hover": {
-                                                    bgcolor: lightThemeColors.neutral.plainHoverBg,
-                                                    color: lightThemeColors.neutral.plainHoverColor,
-                                                },
-                                            },
-                                        },
-                                        popupIndicator: {
-                                            sx: {
-                                                "&:hover": {
-                                                    bgcolor: lightThemeColors.neutral.plainHoverBg,
-                                                    color: lightThemeColors.neutral.plainHoverColor,
-                                                },
-                                            },
-                                        },
-                                    }, sx: formStyles.countrySelect, options: countries, autoHighlight: true, getOptionLabel: (option) => `+${option.phone}`, renderOption: (props, option) => (_createElement(AutocompleteOption, { ...props, key: `autocomplete-${option.code}-${option.label}`, sx: {
-                                            ...optionStyles,
-                                            "&[aria-selected='true']": {
-                                                bgcolor: lightThemeColors.neutral.plainActiveBg,
-                                            },
-                                        } },
-                                        _jsx(ListItemDecorator, { children: _jsx("img", { loading: "lazy", width: "20", srcSet: `https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`, src: `https://flagcdn.com/w20/${option.code.toLowerCase()}.png`, alt: "" }) }),
-                                        _jsxs(ListItemContent, { sx: formStyles.listItemContent, children: [option.label, _jsxs(Typography, { level: "body-xs", children: ["+", option.phone] })] }))) })), fields.includes("phoneNumber") && (_jsx(Input, { value: formData.phoneNumber, onChange: handleInputChange("phoneNumber"), placeholder: phoneNumberPlaceholder, sx: {
-                                        ...formStyles.phoneInput,
-                                        ...inputStyles,
-                                    } }))] })] })), _jsx(LeadAgreementCheckbox, { primaryColor: primaryColor, brandingUrls: brandingUrls, isDisabled: isSuccess }), error && _jsx(AlertMessage, { variant: "error", message: error }), isSuccess ? (_jsxs(_Fragment, { children: [_jsx(AlertMessage, { variant: "success", title: leadSuccessTitle ?? t("leads.success.title"), description: leadSuccessDescription ?? t("leads.success.description") }), startGame ? (_jsx(Button, { size: "lg", sx: {
-                                ...formStyles.submitButton,
-                                bgcolor: primaryColor,
-                                color: onPrimaryColor,
-                                ":hover": {
-                                    bgcolor: primaryContainer,
-                                    color: onPrimaryColor,
-                                },
-                            }, onClick: startGame, children: startButtonLabel })) : (_jsx(_Fragment, {}))] })) : (_jsx(Button, { type: "submit", loading: isLoading, size: "lg", sx: {
-                        ...formStyles.submitButton,
-                        bgcolor: primaryColor,
-                        color: onPrimaryColor,
-                        ":hover": {
-                            bgcolor: primaryContainer,
-                            color: onPrimaryColor,
-                        },
-                    }, children: submitButtonLabel }))] }) }));
-};
-export default LeadForm;

package/src/components/Shared/AlertMessage.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCornerRadius, useFontFamily, useInternalTheme, } from "@fansunited/common/functions/theme";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import InfoIcon from "@mui/icons-material/Info";
-import WarningIcon from "@mui/icons-material/Warning";
-import { Alert, Stack, Typography } from "@mui/joy";
-const getAlertIcon = (variant, warningColor) => {
-    switch (variant) {
-        case "success":
-            return _jsx(CheckCircleIcon, {});
-        case "error":
-            return _jsx(WarningIcon, { sx: { color: warningColor } });
-        case "info":
-            return _jsx(InfoIcon, {});
-    }
-};
-const getAlertColor = (variant) => {
-    switch (variant) {
-        case "success":
-            return "success";
-        case "error":
-            return "danger";
-        case "info":
-            return "primary";
-    }
-};
-const AlertMessage = ({ variant, title, message, description, }) => {
-    const theme = useInternalTheme();
-    const borderRadius = useCornerRadius();
-    const secondaryFontFamily = useFontFamily().secondary;
-    const alertColor = getAlertColor(variant);
-    return (_jsx(Alert, { variant: "soft", color: alertColor, startDecorator: getAlertIcon(variant, theme.colorSchemes.light.palette.danger.plainColor), sx: {
-            gap: 1,
-            borderRadius: borderRadius.sm,
-        }, children: _jsxs(Stack, { children: [title && (_jsx(Typography, { level: "title-md", color: alertColor, fontWeight: "bold", sx: { fontFamily: secondaryFontFamily }, children: title })), _jsx(Typography, { level: "body-sm", sx: { fontFamily: secondaryFontFamily }, children: message }), description && (_jsx(Typography, { level: "body-xs", sx: { fontFamily: secondaryFontFamily }, children: description }))] }) }));
-};
-export default AlertMessage;

package/src/components/Shared/Answers/Answers.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from "@mui/joy";
-import Option from "./Option";
-const Answers = (props) => {
-    // Two options per row layout
-    if (props.twoByTwo) {
-        // Group options into pairs (two per row)
-        const rows = [];
-        for (let i = 0; i < props.options.length; i += 2) {
-            // For each pair, create a new row
-            // If there's an odd number of options, the last row will have just one option
-            const row = props.options.slice(i, i + 2);
-            rows.push(row);
-        }
-        return (_jsx(Box, { sx: { py: 2, display: "flex", flexDirection: "column", gap: 2 }, children: rows.map((row, rowIndex) => (_jsx(Box, { sx: {
-                    display: "flex",
-                    flexDirection: {
-                        xs: "column",
-                        md: "row",
-                    },
-                    gap: 2,
-                }, children: row.map((option) => (_jsx(Option, { option: option, showAnswer: props.showAnswer, questionImage: props.questionImage, selectedOption: props.selectedOption, answerQuestion: props.answerQuestion, brandingColors: props.brandingColors }, option.optionId))) }, `row-${rowIndex}`))) }));
-    }
-    return (_jsx(Box, { sx: {
-            py: 2,
-            display: "flex",
-            flexDirection: { xs: "column", md: "row" },
-            gap: 2,
-        }, children: props.options.map((option) => (_jsx(Option, { option: option, showAnswer: props.showAnswer, selectedOption: props.selectedOption, questionImage: props.questionImage, answerQuestion: props.answerQuestion, brandingColors: props.brandingColors }, option.optionId))) }));
-};
-export default Answers;

package/src/components/Shared/Answers/Option.js

@@ -1,118 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AspectRatio, Box, Typography } from "@mui/joy";
-import { useBorderSize, useColors, useCornerRadius, useFontFamily, useSpacingScale, } from "@fansunited/common/functions/theme";
-import { useInternalTheme, useImageUrl } from "@fansunited/common";
-const Option = (props) => {
-    const theme = useInternalTheme();
-    const colors = useColors();
-    const borderRadius = useCornerRadius().sm;
-    const fontFamilyPrimary = useFontFamily().primary;
-    const xsBorderRadius = useCornerRadius().xs;
-    const borderSize = useBorderSize().size;
-    const spacingScale = useSpacingScale();
-    const optionImage = props.questionImage
-        ? null
-        : useImageUrl(props.option.images);
-    const primaryColor = props.brandingColors?.primaryColor || colors.palette.primary.plainColor;
-    const successColor = colors.palette.success.plainColor;
-    const dangerColor = colors.palette.danger.plainColor;
-    const onPrimaryColor = colors.palette.primary.onPrimary;
-    const lightTextColor = theme.colorSchemes.light.textColor;
-    const getOptionStyle = (option) => {
-        if (!props.showAnswer) {
-            // Not showing correct answer e.g. default styling
-            return props.selectedOption === option.optionId
-                ? {
-                    bgcolor: primaryColor,
-                    boxShadow: `inset 0 0 0 ${borderSize} ${primaryColor}`,
-                    color: onPrimaryColor,
-                }
-                : {
-                    bgcolor: "#FFFFFF",
-                    color: lightTextColor,
-                    boxShadow: "none",
-                };
-        }
-        if (option.correct) {
-            // Correct option
-            return {
-                bgcolor: successColor,
-                color: "#fff",
-                boxShadow: "none",
-            };
-        }
-        if (props.selectedOption === option.optionId && !option.correct) {
-            // Wrong option
-            return {
-                bgcolor: dangerColor,
-                color: "#fff",
-                boxShadow: "none",
-            };
-        }
-        return {
-            bgcolor: "#FFFFFF",
-            color: lightTextColor,
-            opacity: props.showAnswer ? 0.6 : 1,
-            boxShadow: "none",
-        };
-    };
-    const onClick = () => {
-        if (!props.showAnswer) {
-            props.answerQuestion(props.option.optionId);
-        }
-    };
-    const { bgcolor, color, opacity, boxShadow } = getOptionStyle(props.option);
-    return (_jsx(Box, { sx: {
-            borderRadius,
-            flex: 1, // Take equal space within the row
-            p: spacingScale.xs,
-            gap: spacingScale.xs,
-            bgcolor,
-            cursor: props.showAnswer ? "default" : "pointer",
-            transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
-            transform: "scale(1)",
-            boxShadow,
-            // Using boxShadow instead of border to prevent layout shifts
-            "&:hover": {
-                transform: props.showAnswer ? "scale(1)" : "scale(1.02)",
-                // boxShadow: !props.showAnswer
-                //   ? `inset 0 0 0 ${borderSize} ${primaryColor}`
-                //   : boxShadow,
-            },
-            "&:active": {
-                transform: props.showAnswer ? "scale(1)" : "scale(0.98)",
-            },
-            // Make the overall container have consistent height
-            display: "flex",
-            flexDirection: "column",
-            opacity: opacity,
-        }, onClick: onClick, children: optionImage ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
-                        borderRadius: xsBorderRadius,
-                        overflow: "hidden",
-                        flexGrow: 1,
-                    }, children: _jsx(AspectRatio, { ratio: "16/9", sx: { borderRadius: xsBorderRadius }, children: _jsx("img", { src: optionImage, alt: "Option illustration", style: {
-                                width: "100%",
-                                height: "100%",
-                                objectFit: "cover",
-                            } }) }) }), _jsx(Typography, { level: "body-md", sx: {
-                        fontFamily: fontFamilyPrimary,
-                        fontWeight: 500,
-                        fontSize: "0.935rem",
-                        lineHeight: "24px",
-                        letterSpacing: "0.46px",
-                        textAlign: "center",
-                        color,
-                        px: spacingScale["2xs"],
-                    }, children: props.option.option })] })) : (_jsx(Typography, { level: "body-md", sx: {
-                fontFamily: fontFamilyPrimary,
-                fontWeight: 500,
-                fontSize: "0.935rem",
-                lineHeight: "24px",
-                letterSpacing: "0.46px",
-                textAlign: "center",
-                color,
-                px: spacingScale["2xs"],
-                my: "auto",
-            }, children: props.option.option })) }, props.option.optionId));
-};
-export default Option;

package/src/components/Shared/Button.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button as JoyButton, Typography } from "@mui/joy";
-import { useCornerRadius, useFontFamily, } from "@fansunited/common/functions/theme";
-const Button = (props) => {
-    const fontFamilyPrimary = useFontFamily().primary;
-    const buttonRadius = useCornerRadius().xl;
-    return (_jsx(JoyButton, { variant: "soft", disabled: props.selectedOption === null || props.showAnswer, sx: {
-            borderRadius: buttonRadius,
-            py: "10px",
-            pr: "12px",
-            pl: "16px",
-            bgcolor: props.buttonColor,
-            color: "#FFFFFF",
-            transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
-            transform: "scale(1)",
-            alignSelf: "center",
-            "&:hover": {
-                bgcolor: props.buttonColor,
-                transform: "scale(1.02)",
-            },
-            "&:active": {
-                color: "#FFFFFF",
-                transform: "scale(0.98)",
-            },
-            "&:disabled": {
-                bgcolor: "#000000",
-                color: "#FFFFFF",
-                opacity: "12%",
-            },
-        }, endDecorator: props.endDecorator, onClick: props.onClick, children: _jsx(Typography, { sx: {
-                fontFamily: fontFamilyPrimary,
-                fontWeight: 500,
-                fontSize: "0.9375rem",
-                lineHeight: "24px",
-                letterSpacing: "0.46px",
-                textTransform: "uppercase",
-                color: "#FFFFFF",
-                gap: "8px",
-                display: "flex",
-                alignItems: "center",
-            }, children: props.label }) }));
-};
-export default Button;

package/src/components/Shared/MainCard.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from "@mui/joy";
-import { useBorderSize, useColors, useCornerRadius, } from "@fansunited/common/functions/theme";
-/**
- * MainCard component is a styled container that serves as a main card layout for STANDARD and SPLIT variants.
- */
-const MainCard = ({ children, brandingBorderColor, }) => {
-    const mdBorderRadius = useCornerRadius().md;
-    const borderColor = brandingBorderColor || useColors().secondaryContainer;
-    const borderSize = useBorderSize().size;
-    const border = borderSize + " solid " + borderColor;
-    return (_jsx(Box, { sx: {
-            display: "flex",
-            flexDirection: { xs: "column", md: "row" },
-            width: "100%",
-            borderRadius: mdBorderRadius,
-            boxShadow: "md",
-            border,
-            overflow: "hidden",
-            background: useColors().surface,
-            minHeight: "250px",
-        }, children: children }));
-};
-export default MainCard;

package/src/components/Shared/Pagination.js

@@ -1,118 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Typography } from "@mui/joy";
-import { useInternalTheme } from "@fansunited/common";
-import CheckIcon from "@mui/icons-material/Check";
-import CloseIcon from "@mui/icons-material/Close";
-const Pagination = (props) => {
-    const renderSteps = () => {
-        const theme = useInternalTheme();
-        const borderRadius = theme.customRadius.light.full;
-        const fontFamilySecondary = theme.customFontFamily.light.secondary;
-        const totalQuestions = props.classicQuiz.questionsCount;
-        // Create an array of step indicators
-        return Array.from({ length: totalQuestions }, (_, index) => {
-            const questionNumber = index + 1;
-            // Determine the background, border colors and textColor based on question status
-            let backgroundColor, borderColor;
-            let textColor = "#FFFFFF";
-            if (questionNumber < props.currentQuestion) {
-                // This question has been answered
-                const questionParticipation = props.userParticipation.find((p) => p.questionId === props.classicQuiz.questions[index].questionId);
-                if (questionParticipation) {
-                    // Find if the selected option was correct
-                    const question = props.classicQuiz.questions[index];
-                    const selectedOption = question.options.find((option) => option.optionId === questionParticipation.optionId);
-                    if (selectedOption?.correct) {
-                        // Correct answer
-                        backgroundColor =
-                            theme.colorSchemes.light.palette.success.plainColor;
-                        borderColor =
-                            theme.colorSchemes.light.palette.success.outlinedBorder;
-                    }
-                    else {
-                        // Incorrect answer
-                        backgroundColor =
-                            theme.colorSchemes.light.palette.danger.plainColor;
-                        borderColor =
-                            theme.colorSchemes.light.palette.danger.outlinedBorder;
-                    }
-                }
-                else {
-                    // Fallback if participation data is missing
-                    backgroundColor = theme.colorSchemes.light.secondaryContainer;
-                    borderColor = theme.colorSchemes.light.secondaryContainer;
-                }
-            }
-            else if (questionNumber === props.currentQuestion) {
-                // Current question - use primary color
-                backgroundColor = theme.colorSchemes.light.palette.primary.plainColor;
-                borderColor = theme.colorSchemes.light.palette.primary.outlinedBorder;
-            }
-            else {
-                // Future questions - use neutral/secondary color
-                // backgroundColor = theme.colorSchemes?.light?.secondaryContainer;
-                // borderColor = theme.colorSchemes?.light?.outlineEnabledBorder;
-                backgroundColor = "transparent";
-                borderColor = "transparent";
-                textColor =
-                    theme.colorSchemes.light.palette.primary.plainColor || "#1A77D2";
-            }
-            // Determine what to display inside the circle
-            let content;
-            if (questionNumber < props.currentQuestion) {
-                const questionParticipation = props.userParticipation.find((p) => p.questionId === props.classicQuiz.questions[index].questionId);
-                if (questionParticipation) {
-                    const question = props.classicQuiz.questions[index];
-                    const selectedOption = question.options.find((option) => option.optionId === questionParticipation.optionId);
-                    if (selectedOption?.correct) {
-                        // Show checkmark for correct answer
-                        content = (_jsx(CheckIcon, { sx: {
-                                color: "#FAFAFA",
-                                fontSize: "1rem",
-                            } }));
-                    }
-                    else {
-                        // Show X for incorrect answer
-                        content = (_jsx(CloseIcon, { sx: {
-                                color: "#FAFAFA",
-                                fontSize: "1rem",
-                            } }));
-                    }
-                }
-                else {
-                    // Fallback
-                    content = questionNumber;
-                }
-            }
-            else {
-                // For current and future questions, show the question number
-                content = questionNumber;
-            }
-            return (_jsx(Box, { sx: {
-                    maxWidth: "40px",
-                    width: "100%",
-                    height: "40px",
-                    borderRadius,
-                    backgroundColor,
-                    border: `1px solid ${borderColor}`,
-                    transition: "background-color 0.3s ease",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontFamily: fontFamilySecondary,
-                }, children: typeof content === "number" ? (_jsx(Typography, { level: "body-md", sx: {
-                        fontWeight: 400,
-                        lineHeight: "150%",
-                        letterSpacing: "0.15px",
-                        fontSize: "1rem",
-                        color: textColor,
-                    }, children: content })) : (content) }, `step-${questionNumber}`));
-        });
-    };
-    return (_jsx(Box, { sx: {
-            display: "flex",
-            justifyContent: "center",
-            gap: "8px",
-        }, children: renderSteps() }));
-};
-export default Pagination;