fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC6

package/packages/classic-quiz-play/src/components/Variants/Split/ScoreState/SplitScoreState.js

@@ -1,231 +0,0 @@
-import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { Box as o, Typography as n, Button as v } from "@mui/joy";
-import { useInternalTheme as te, isMobile as se, isLarge as ae, useColors as i, useFontFamily as R, useCornerRadius as oe, useSpacingScale as ie } from "../../../../../../common/src/functions/theme.js";
-import { hexToRgb as L } from "../../../../../../common/src/functions/helpers.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import { WidgetTemplate as M } from "../../../../../../common/src/enums/enums.js";
-import re from "../../../../../../common/src/components/AdditionalCTA.js";
-import "react";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import ne from "../../../../../../common/src/components/Skeletons/Split/ScoreState/SplitScoreStateSkeleton.js";
-import le from "../../../../../../../node_modules/@mui/icons-material/esm/Replay.js";
-import { useImageVariant as ce } from "../../../../../../common/src/hooks/useImageVariant.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import me from "../../../Shared/MainCard.js";
-import ue from "../../../Shared/ScoreStateWrapper.js";
-import xe from "../../../../assets/default-quiz-bg.png.js";
-import de from "../../../../assets/default-quiz-bg-vertical.jpg.js";
-import W from "../../../Shared/PresentedBy.js";
-import { createStyles as he } from "./SplitScoreState.styles.js";
-import ge from "../../../Shared/AlertMessage.js";
-import { useScoreStateHelpers as ye } from "../../../../hooks/useScoreStateHelpers.js";
-import Ce from "../../../../../../../node_modules/@mui/icons-material/esm/Share.js";
-import { useTranslation as je } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const Ue = (s) => {
-  var y, C, j, f, b, S, p, T, Q, z, A, I, P;
-  const F = te(), { t: r } = je(), l = se(), c = ae(), D = s.defaultImagePlaceholderUrl ? s.defaultImagePlaceholderUrl : l ? de : xe, q = ce(
-    {
-      images: s.classicQuiz.images,
-      imagePlaceholder: D
-    },
-    M.SPLIT
-  ), {
-    getHexagonBackground: w,
-    formatTime: E,
-    displayCongratulations: H,
-    getRandomEmoji: N,
-    shareResult: U
-  } = ye({
-    summary: s.summary,
-    totalTime: s.totalTime,
-    classicQuiz: s.classicQuiz,
-    variant: M.SPLIT
-  }), a = ((y = s.classicQuiz.branding) == null ? void 0 : y.colors) || null, V = i().textPrimary, O = (a == null ? void 0 : a.primaryColor) || ((j = (C = i().palette) == null ? void 0 : C.primary) == null ? void 0 : j.plainColor), $ = (a == null ? void 0 : a.secondaryColor) || i().textSecondary, G = i().secondaryContainer, J = (b = (f = i().palette) == null ? void 0 : f.primary) == null ? void 0 : b.onPrimary, K = R().secondary, X = R().primary, m = (a == null ? void 0 : a.backgroundColor) || i().surfaceVariant, Y = i().surface, Z = i().onSurface, d = oe(), h = i().textColor, u = ie(), x = l ? ((S = s.classicQuiz.branding) == null ? void 0 : S.images.mobileLogo) || ((p = s.classicQuiz.branding) == null ? void 0 : p.images.mainLogo) || "" : ((T = s.classicQuiz.branding) == null ? void 0 : T.images.mainLogo) || "", t = he({
-    spacingScale: u,
-    borderRadius: d,
-    fontFamilyPrimary: X,
-    fontFamilySecondary: K,
-    textPrimary: V,
-    primaryColor: O,
-    secondaryColor: $,
-    secondaryContainer: G,
-    onPrimaryColor: J,
-    bgcolor: L(m || ""),
-    surfaceColor: Y,
-    onSurfaceColor: Z,
-    textColor: h,
-    brandingColors: a,
-    successColor: (z = (Q = i().palette) == null ? void 0 : Q.success) == null ? void 0 : z.plainColor,
-    dangerColor: (I = (A = i().palette) == null ? void 0 : A.danger) == null ? void 0 : I.plainColor,
-    isMobileScreen: l,
-    isLargeScreen: c
-  }), g = (_) => {
-    var B, k;
-    const ee = x && !c ? /* @__PURE__ */ e.jsx(
-      W,
-      {
-        brandingLogo: x,
-        textColor: (a == null ? void 0 : a.contentColor) || F.colorSchemes.dark.textColor,
-        label: ((B = s.classicQuiz.labels) == null ? void 0 : B.sponsor) || null
-      }
-    ) : null;
-    return /* @__PURE__ */ e.jsx(
-      ne,
-      {
-        entity: s.classicQuiz,
-        headline: r("classicQuiz.headline"),
-        finalImage: q,
-        brandingContent: ee,
-        isTabulated: _,
-        rulesDisplay: s.rulesDisplay,
-        children: s.summary.classicQuizId ? /* @__PURE__ */ e.jsxs(o, { sx: t.questionAreaContent, children: [
-          /* @__PURE__ */ e.jsx(o, { sx: t.scoreContainer, children: /* @__PURE__ */ e.jsx(o, { sx: t.scoreContentWrapper, children: /* @__PURE__ */ e.jsx(o, { sx: t.scoreContentContainer, children: /* @__PURE__ */ e.jsx(o, { sx: t.scoreSection, children: /* @__PURE__ */ e.jsx(o, { sx: t.scoreSectionWrapper, children: /* @__PURE__ */ e.jsxs(o, { sx: t.textSection, children: [
-            /* @__PURE__ */ e.jsxs(o, { sx: t.achievementBadgeContainer, children: [
-              /* @__PURE__ */ e.jsx(
-                "img",
-                {
-                  style: t.hexagonBackground,
-                  src: w(),
-                  alt: "achievement-badge-background"
-                }
-              ),
-              /* @__PURE__ */ e.jsx(
-                "img",
-                {
-                  style: t.achievementEmoji,
-                  src: N("light"),
-                  alt: "achievement-badge"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ e.jsx(
-              n,
-              {
-                level: "body-lg",
-                sx: t.congratulationsText,
-                children: s.maxAttemptsReached ? r("classicQuiz.maxAttemptsReached") : H()
-              }
-            ),
-            /* @__PURE__ */ e.jsx(o, { sx: t.scoreNumbersContainer, children: /* @__PURE__ */ e.jsxs(o, { sx: t.scoreNumbersWrapper, children: [
-              /* @__PURE__ */ e.jsx(
-                n,
-                {
-                  level: "h2",
-                  sx: t.correctScoreText(
-                    s.summary.correct
-                  ),
-                  children: s.summary.correct
-                }
-              ),
-              /* @__PURE__ */ e.jsxs(
-                n,
-                {
-                  level: "h2",
-                  sx: t.totalScoreText(s.summary.correct),
-                  children: [
-                    "/",
-                    s.summary.classicQuizQuestions
-                  ]
-                }
-              )
-            ] }) }),
-            s.classicQuiz.type && s.classicQuiz.type.toLocaleLowerCase() === "timed" ? /* @__PURE__ */ e.jsxs(n, { level: "body-md", sx: t.timeText, children: [
-              r("classicQuiz.youDidItFor"),
-              " ",
-              E()
-            ] }) : null,
-            s.classicQuiz.scored ? /* @__PURE__ */ e.jsxs(n, { level: "body-lg", sx: t.pointsText, children: [
-              r("classicQuiz.youWon"),
-              " ",
-              s.summary.correct * s.classicQuiz.points,
-              " ",
-              r("common.labels.points")
-            ] }) : null
-          ] }) }) }) }) }) }),
-          /* @__PURE__ */ e.jsxs(
-            o,
-            {
-              id: "desktop-thanks",
-              sx: {
-                p: u.lg,
-                gap: u.lg,
-                display: "flex",
-                flexDirection: "column",
-                backdropFilter: "blur(4px)",
-                bgcolor: `rgba(${m ? L(m || "").replace(/[^\d,]/g, "") : ""}, 0.5)`,
-                borderRadius: d.sm
-              },
-              children: [
-                /* @__PURE__ */ e.jsx(o, { sx: t.ctaContainer, children: /* @__PURE__ */ e.jsxs(o, { sx: t.ctaContentWrapper, children: [
-                  /* @__PURE__ */ e.jsx(n, { level: "body-lg", sx: t.thanksText, children: r("classicQuiz.thanksForPlaying") }),
-                  /* @__PURE__ */ e.jsxs(o, { sx: t.buttonsContainer, children: [
-                    !s.maxAttemptsReached && /* @__PURE__ */ e.jsx(
-                      v,
-                      {
-                        sx: t.playAgainButton,
-                        onClick: s.playAgain,
-                        children: /* @__PURE__ */ e.jsxs(o, { sx: t.playAgainButtonContent, children: [
-                          /* @__PURE__ */ e.jsx(le, { sx: t.playAgainIcon }),
-                          /* @__PURE__ */ e.jsx(n, { sx: t.playAgainText, children: r("classicQuiz.buttons.playAgain") })
-                        ] })
-                      }
-                    ),
-                    /* @__PURE__ */ e.jsx(v, { sx: t.shareButton, onClick: U, children: /* @__PURE__ */ e.jsxs(o, { sx: t.shareButtonContent, children: [
-                      /* @__PURE__ */ e.jsx(Ce, { style: t.shareIcon }),
-                      /* @__PURE__ */ e.jsx(n, { sx: t.shareText, children: r("classicQuiz.buttons.share") })
-                    ] }) }),
-                    /* @__PURE__ */ e.jsx(
-                      re,
-                      {
-                        additionalCTA: s.additionalCTA,
-                        buttonStyle: t.additionalCTAButton,
-                        buttonContentStyle: t.additionalCTAButtonContent,
-                        textStyle: t.additionalCTAText
-                      }
-                    )
-                  ] })
-                ] }) }),
-                c && /* @__PURE__ */ e.jsx(
-                  W,
-                  {
-                    brandingLogo: x,
-                    textColor: (a == null ? void 0 : a.contentColor) || h,
-                    label: ((k = s.classicQuiz.labels) == null ? void 0 : k.sponsor) || null,
-                    isCentered: !0
-                  }
-                )
-              ]
-            }
-          )
-        ] }) : /* @__PURE__ */ e.jsx(o, { sx: t.alertMessageArea, children: /* @__PURE__ */ e.jsx(o, { sx: t.alertMessageWrapper, children: /* @__PURE__ */ e.jsx(
-          ge,
-          {
-            variant: "error",
-            title: r("common.authentication.accessRequired"),
-            message: r("common.authentication.invalidOrMissingAuth")
-          }
-        ) }) })
-      }
-    );
-  };
-  return /* @__PURE__ */ e.jsx(me, { brandingBorderColor: (a == null ? void 0 : a.borderColor) || null, children: s.showAnswerExplanations ? /* @__PURE__ */ e.jsx(
-    ue,
-    {
-      questions: s.classicQuiz.questions,
-      userParticipation: s.summary.answers,
-      brandingColors: (P = s.classicQuiz.branding) == null ? void 0 : P.colors,
-      resultsTabPanelSxProps: {
-        display: "flex",
-        flexDirection: "column",
-        px: 0,
-        pb: 0,
-        pt: 0
-      },
-      children: g(!0)
-    }
-  ) : g(!1) });
-};
-export {
-  Ue as default
-};

package/packages/classic-quiz-play/src/components/Variants/Split/ScoreState/SplitScoreState.styles.js

@@ -1,353 +0,0 @@
-const n = (e) => ({
-  // Main question area
-  questionArea: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column"
-  },
-  // Question area content wrapper
-  questionAreaContent: {
-    p: e.spacingScale.lg,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    gap: "16px"
-  },
-  // Score container (main card)
-  scoreContainer: {
-    p: e.spacingScale.lg,
-    gap: e.spacingScale.md,
-    display: "flex",
-    flexDirection: "column",
-    backdropFilter: "blur(4px)",
-    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
-    borderRadius: e.borderRadius.sm
-  },
-  // 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: e.spacingScale["3xl"],
-    alignSelf: "stretch"
-  },
-  // Score section
-  scoreSection: {
-    display: "flex",
-    gap: e.spacingScale.xs,
-    justifyContent: "center",
-    alignSelf: "stretch",
-    alignItems: "center"
-  },
-  // Score section wrapper
-  scoreSectionWrapper: {
-    display: "flex",
-    flexDirection: e.isMobileScreen ? "column" : "row",
-    minWidth: "200px",
-    p: e.spacingScale.xs,
-    justifyContent: "center",
-    alignItems: "center",
-    gap: e.spacingScale.md,
-    flex: "1 0 0"
-  },
-  // Achievement badge container
-  achievementBadgeContainer: {
-    display: "flex",
-    width: e.isMobileScreen ? "172px" : "auto",
-    height: e.isMobileScreen ? "160px" : "auto",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    position: "relative",
-    my: e.isMobileScreen ? 0 : e.spacingScale.lg
-  },
-  // Hexagon background
-  hexagonBackground: {
-    width: "160px",
-    height: "160px",
-    position: "absolute",
-    top: "50%",
-    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: e.textPrimary,
-    textAlign: "center",
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "1.5em",
-    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: (t) => ({
-    textAlign: "center",
-    color: t > 0 ? e.successColor : e.dangerColor,
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "3.75em",
-    fontStyle: "normal",
-    fontWeight: 500,
-    lineHeight: "120%",
-    letterSpacing: "-0.5px"
-  }),
-  // Total score text
-  totalScoreText: (t) => ({
-    textAlign: "center",
-    color: t > 0 ? e.successColor : e.dangerColor,
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "3.75em",
-    fontStyle: "normal",
-    fontWeight: 500,
-    lineHeight: "120%",
-    letterSpacing: "-0.5px"
-  }),
-  // Time text
-  timeText: {
-    textAlign: "center",
-    color: e.textPrimary,
-    fontFamily: e.fontFamilySecondary,
-    fontSize: "0.875em",
-    fontStyle: "normal",
-    fontWeight: 700,
-    lineHeight: "143%",
-    letterSpacing: "0.024px"
-  },
-  // Points text
-  pointsText: {
-    textAlign: "center",
-    color: e.textPrimary,
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "1.25em",
-    fontStyle: "normal",
-    fontWeight: 500,
-    lineHeight: "120%",
-    letterSpacing: "0.15px"
-  },
-  // CTA container
-  ctaContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center"
-  },
-  // CTA content wrapper
-  ctaContentWrapper: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    gap: e.spacingScale.lg
-  },
-  // Thanks for playing text
-  thanksText: {
-    color: e.textPrimary,
-    textAlign: "center",
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "1.25em",
-    fontStyle: "normal",
-    fontWeight: 500,
-    lineHeight: "120%",
-    letterSpacing: "0.15px"
-  },
-  // Buttons container
-  buttonsContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "16px"
-  },
-  // Play again button
-  playAgainButton: {
-    display: "flex",
-    py: e.spacingScale.xs,
-    px: "16px",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    gap: "8px",
-    borderRadius: e.borderRadius.xl,
-    color: e.textPrimary,
-    bgcolor: e.surfaceColor,
-    "&:hover": {
-      bgcolor: e.surfaceColor,
-      opacity: 0.9
-    },
-    fontSize: "0.9375em"
-  },
-  // 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: e.textPrimary
-  },
-  // Play again text
-  playAgainText: {
-    color: e.textPrimary,
-    textAlign: "center",
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.9375em",
-    fontStyle: "normal",
-    fontWeight: 500,
-    lineHeight: "22px",
-    letterSpacing: "0.46px",
-    textTransform: "uppercase"
-  },
-  // Share button
-  shareButton: {
-    display: "flex",
-    py: e.spacingScale.xs,
-    px: "16px",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    gap: "10px",
-    borderRadius: e.borderRadius.xl,
-    bgcolor: e.primaryColor,
-    "&:hover": {
-      bgcolor: e.primaryColor,
-      opacity: 0.9
-    },
-    fontSize: "0.9375em"
-  },
-  // 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: e.onPrimaryColor
-  },
-  // Share text
-  shareText: {
-    color: e.onPrimaryColor,
-    textAlign: "center",
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.9375em",
-    fontStyle: "normal",
-    fontWeight: 500,
-    lineHeight: "22px",
-    letterSpacing: "0.46px",
-    textTransform: "uppercase"
-  },
-  // Additional CTA button (secondary style)
-  additionalCTAButton: {
-    display: "flex",
-    py: e.spacingScale.xs,
-    px: e.spacingScale.md,
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    gap: "8px",
-    borderRadius: e.borderRadius.xl,
-    bgcolor: e.secondaryContainer,
-    "&:hover": {
-      bgcolor: e.secondaryContainer,
-      opacity: 0.9
-    },
-    fontSize: "0.9375em"
-  },
-  // Additional CTA button content
-  additionalCTAButtonContent: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    gap: "8px"
-  },
-  // Additional CTA text
-  additionalCTAText: {
-    color: e.secondaryColor,
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.9375em",
-    fontStyle: "normal",
-    fontWeight: 500,
-    lineHeight: "22px",
-    letterSpacing: "0.46px",
-    textTransform: "uppercase"
-  },
-  // Lead collection container
-  leadCollectionContainer: {
-    p: e.spacingScale.lg,
-    gap: e.spacingScale.md,
-    display: "flex",
-    flexDirection: "column",
-    backdropFilter: "blur(4px)",
-    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
-    borderRadius: e.borderRadius.sm
-  },
-  // Lead content wrapper
-  leadContentWrapper: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    alignSelf: "stretch"
-  },
-  alertMessageArea: {
-    flex: e.isLargeScreen ? "1" : "0 0 50%",
-    width: e.isLargeScreen ? "100%" : "50%",
-    minWidth: e.isLargeScreen ? "100%" : "50%",
-    maxWidth: e.isLargeScreen ? "100%" : "50%",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center"
-  },
-  alertMessageWrapper: {
-    p: e.spacingScale.lg
-  }
-});
-export {
-  n as createStyles
-};