fansunited-frontend-components 0.0.31-RC4 → 0.0.31-RC5

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

@@ -0,0 +1,231 @@
+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

@@ -0,0 +1,353 @@
+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
+};