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

package/src/components/Leads/LeadForm.js

@@ -0,0 +1,289 @@
+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.d.ts

@@ -0,0 +1,10 @@
+type AlertVariant = "success" | "error" | "info";
+interface AlertMessageProps {
+    variant: AlertVariant;
+    title?: string;
+    message?: string;
+    description?: string;
+}
+declare const AlertMessage: ({ variant, title, message, description, }: AlertMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default AlertMessage;
+//# sourceMappingURL=AlertMessage.d.ts.map

package/src/components/Shared/AlertMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/Shared/AlertMessage.tsx"],"names":[],"mappings":"AAWA,KAAK,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA2BD,QAAA,MAAM,YAAY,8CAKf,iBAAiB,4CA0CnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/src/components/Shared/AlertMessage.js

@@ -0,0 +1,37 @@
+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.d.ts

@@ -0,0 +1,14 @@
+import { BrandingColorsModel, ClassicQuizOptionModel } from "fansunited-sdk-esm";
+import React from "react";
+type AnswersProps = {
+    options: ClassicQuizOptionModel[];
+    selectedOption: number | null;
+    showAnswer: boolean;
+    twoByTwo: boolean;
+    questionImage: string | null;
+    brandingColors: BrandingColorsModel | null;
+    answerQuestion: (optionId: number) => void;
+};
+declare const Answers: React.FC<AnswersProps>;
+export default Answers;
+//# sourceMappingURL=Answers.d.ts.map

package/src/components/Shared/Answers/Answers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Answers.d.ts","sourceRoot":"","sources":["../../../../../src/components/Shared/Answers/Answers.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC3C,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkEnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,31 @@
+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.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { BrandingColorsModel, ClassicQuizOptionModel } from "fansunited-sdk-esm";
+type OptionProps = {
+    option: ClassicQuizOptionModel;
+    showAnswer: boolean;
+    selectedOption: number | null;
+    questionImage: string | null;
+    brandingColors: BrandingColorsModel | null;
+    answerQuestion: (optionId: number) => void;
+};
+declare const Option: React.FC<OptionProps>;
+export default Option;
+//# sourceMappingURL=Option.d.ts.map

package/src/components/Shared/Answers/Option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../../src/components/Shared/Answers/Option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAU5B,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,sBAAsB,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC3C,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6JjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,118 @@
+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.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type ButtonProps = {
+    showAnswer: boolean;
+    selectedOption: number | null;
+    endDecorator: React.ReactNode;
+    label: string;
+    buttonColor: string;
+    onClick: () => void;
+};
+declare const Button: React.FC<ButtonProps>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/src/components/Shared/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Shared/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqDjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/src/components/Shared/Button.js

@@ -0,0 +1,43 @@
+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.d.ts

@@ -0,0 +1,10 @@
+import React, { PropsWithChildren } from "react";
+type MainCardProps = {
+    brandingBorderColor: string | null;
+};
+/**
+ * MainCard component is a styled container that serves as a main card layout for STANDARD and SPLIT variants.
+ */
+declare const MainCard: React.FC<MainCardProps & PropsWithChildren>;
+export default MainCard;
+//# sourceMappingURL=MainCard.d.ts.map

package/src/components/Shared/MainCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Shared/MainCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQjD,KAAK,aAAa,GAAG;IACnB,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,iBAAiB,CA0BzD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/src/components/Shared/MainCard.js

@@ -0,0 +1,24 @@
+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.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ClassicQuizFullModel, ClassicQuizParticipationBodyModel } from "fansunited-sdk-esm";
+type PaginationProps = {
+    classicQuiz: ClassicQuizFullModel;
+    currentQuestion: number;
+    userParticipation: ClassicQuizParticipationBodyModel[];
+};
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;
+//# sourceMappingURL=Pagination.d.ts.map

package/src/components/Shared/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/Shared/Pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,oBAAoB,EACpB,iCAAiC,EAClC,MAAM,oBAAoB,CAAC;AAI5B,KAAK,eAAe,GAAG;IACrB,WAAW,EAAE,oBAAoB,CAAC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,iCAAiC,EAAE,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyJzC,CAAC;AAEF,eAAe,UAAU,CAAC"}