fansunited-frontend-components 0.0.31-RC3 → 0.0.31-RC5

package/packages/classic-quiz-play/src/components/Variants/Overlay/ScoreState/OverlayScoreState.styles.js

@@ -0,0 +1,373 @@
+const t = (e) => ({
+  // Score state wrapper content
+  scoreStateWrapperContent: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "40px",
+    p: e.spacingScale.xl,
+    alignItems: e.isMobile ? "center" : "stretch"
+  },
+  // Main content wrapper
+  mainContentWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+    zIndex: 10,
+    alignItems: e.isMobile ? "center" : "stretch"
+  },
+  // Score container with backdrop
+  scoreContainer: {
+    borderRadius: e.mdBorderRadius,
+    p: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.25,
+      borderRadius: "inherit",
+      zIndex: 0,
+      backdropFilter: "blur(4px)"
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  },
+  // Score content wrapper
+  scoreContentWrapper: {
+    display: "flex",
+    flexDirection: e.isMobile ? "column" : "row",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch"
+  },
+  // Score section
+  scoreSection: {
+    display: "flex",
+    py: e.spacingScale.xs,
+    gap: e.spacingScale.md,
+    justifyContent: "center",
+    alignItems: "center",
+    flex: "1 0 0"
+  },
+  // Score section wrapper
+  scoreSectionWrapper: {
+    display: "flex",
+    minWidth: "200px",
+    p: e.spacingScale.xs,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: e.spacingScale.md,
+    flex: "1 0 0",
+    alignSelf: "stretch",
+    flexDirection: e.isMobile ? "column" : "row"
+  },
+  // Achievement badge container
+  achievementBadgeContainer: {
+    display: "flex",
+    width: e.isMobile ? "172px" : "auto",
+    height: e.isMobile ? "160px" : "auto",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    my: e.isMobile ? 0 : e.spacingScale.lg
+  },
+  // Hexagon background
+  hexagonBackground: {
+    width: "160px",
+    height: "160px",
+    position: "absolute",
+    top: "55%",
+    left: "50%",
+    transform: "translate(-50%, -50%)"
+  },
+  // Achievement emoji
+  achievementEmoji: {
+    maxWidth: "80px",
+    maxHeight: "80px",
+    position: "relative"
+  },
+  // Text section
+  textSection: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: e.spacingScale.xs
+  },
+  // 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: {
+    textAlign: "center",
+    color: e.scorePercentage > 30 ? e.successColor : e.dangerColor,
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "3.75em",
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "120%",
+    letterSpacing: "-0.5px"
+  },
+  // Total score text
+  totalScoreText: {
+    textAlign: "center",
+    color: e.scorePercentage > 30 ? 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 section
+  ctaSection: {
+    display: "flex",
+    py: e.spacingScale.xs,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "24px",
+    flex: "1 0 0"
+  },
+  // CTA content wrapper
+  ctaContentWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: e.spacingScale.md,
+    flex: "1 0 0"
+  },
+  // Thanks 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: e.spacingScale.md
+  },
+  // Play again button
+  playAgainButton: {
+    display: "flex",
+    minHeight: "48px",
+    py: "12px",
+    pr: "24px",
+    pl: "16px",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: e.xlBorderRadius,
+    bgcolor: e.onSurfaceColor,
+    "&:hover": {
+      bgcolor: e.onSurfaceColor,
+      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: "24px",
+    height: "24px",
+    justifyContent: "center",
+    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: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  },
+  // Share button
+  shareButton: {
+    display: "flex",
+    minHeight: "48px",
+    py: "12px",
+    pr: "24px",
+    pl: "16px",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: e.xlBorderRadius,
+    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: "24px",
+    height: "24px",
+    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: "24px",
+    letterSpacing: "0.40px",
+    textTransform: "uppercase"
+  },
+  // Additional CTA button (secondary style)
+  additionalCTAButton: {
+    display: "flex",
+    py: e.spacingScale.sm,
+    px: e.spacingScale.md,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: e.xlBorderRadius,
+    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: "24px",
+    letterSpacing: "0.40px",
+    textTransform: "uppercase"
+  },
+  // Lead collection container
+  leadCollectionContainer: {
+    borderRadius: e.mdBorderRadius,
+    p: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    alignSelf: "stretch",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.25,
+      borderRadius: "inherit",
+      zIndex: 0,
+      backdropFilter: "blur(4px)"
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  }
+});
+export {
+  t as createStyles
+};

package/packages/classic-quiz-play/src/components/Variants/Overlay/SignIn/OverlaySignIn.js

@@ -0,0 +1,120 @@
+import { j as i } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Button as a, Typography as r, Box as V } from "@mui/joy";
+import { useInternalTheme as _, isMobile as G, useImageBackgroundGradient as Y } from "../../../../../../common/src/functions/theme.js";
+import { extractBrandingProperties as p, sanitizeBackgroundUrl as M } 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 P } from "../../../../../../common/src/enums/enums.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import W from "../../../../../../common/src/components/Skeletons/Overlay/SignIn/OverlaySignInSkeleton.js";
+import { useImageVariant as q } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import H from "../../../../assets/default-quiz-bg.png.js";
+import J from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import K from "../../../Shared/PresentedBy.js";
+import { createStyles as N } from "./OverlaySignIn.styles.js";
+import { useTranslation as X } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const xn = (n) => {
+  var l, m, c, g, u, d, I, f, x, C, h;
+  const o = _(), { t: e } = X(), S = G(), L = Y(
+    P.OVERLAY
+  ), { brandingImage: v, brandingColors: s, brandingLogo: w } = p(n.classicQuiz.branding || null), z = n.defaultImagePlaceholderUrl ? n.defaultImagePlaceholderUrl : S ? J : H, Q = v || q(
+    {
+      images: n.classicQuiz.images,
+      imagePlaceholder: z
+    },
+    P.OVERLAY
+  ), R = M(Q), O = (m = (l = o.customRadius) == null ? void 0 : l.light) == null ? void 0 : m.xl, D = (s == null ? void 0 : s.primaryColor) || ((d = (u = (g = (c = o.colorSchemes) == null ? void 0 : c.light) == null ? void 0 : g.palette) == null ? void 0 : u.primary) == null ? void 0 : d.plainColor), E = (C = (x = (f = (I = o.colorSchemes) == null ? void 0 : I.light) == null ? void 0 : f.palette) == null ? void 0 : x.primary) == null ? void 0 : C.onPrimary, F = o.customFontFamily.dark.primary, t = N({
+    buttonRadius: O,
+    primaryColor: D,
+    onPrimaryColor: E,
+    fontFamilyPrimary: F
+  }), U = () => {
+    var T, y, A, b;
+    return n.signInCTA ? (T = n.signInCTA) != null && T.component ? n.signInCTA.component : (y = n.signInCTA) != null && y.onClick ? /* @__PURE__ */ i.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation
+        },
+        onClick: n.signInCTA.onClick,
+        children: /* @__PURE__ */ i.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || e("common.signIn") })
+      }
+    ) : (A = n.signInCTA) != null && A.url ? typeof window > "u" ? /* @__PURE__ */ i.jsx(
+      V,
+      {
+        component: "a",
+        href: n.signInCTA.url,
+        target: ((b = n.signInCTA) == null ? void 0 : b.target) || "_self",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation,
+          textDecoration: "none",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ i.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || e("common.signIn") })
+      }
+    ) : /* @__PURE__ */ i.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation
+        },
+        onClick: () => {
+          var B, j, k;
+          ((B = n.signInCTA) == null ? void 0 : B.target) === "_blank" ? window.open((j = n.signInCTA) == null ? void 0 : j.url, "_blank") : window.location.href = (k = n.signInCTA) == null ? void 0 : k.url;
+        },
+        children: /* @__PURE__ */ i.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || e("common.signIn") })
+      }
+    ) : /* @__PURE__ */ i.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ i.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || e("common.signIn") })
+      }
+    ) : /* @__PURE__ */ i.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ i.jsx(r, { sx: t.signInButtonText, children: e("common.signIn") })
+      }
+    );
+  };
+  return /* @__PURE__ */ i.jsx(
+    W,
+    {
+      entity: n.classicQuiz,
+      headline: e("classicQuiz.headline"),
+      backgroundImage: R,
+      imageBackgroundGradient: L,
+      signInContent: U(),
+      brandingContent: /* @__PURE__ */ i.jsx(
+        K,
+        {
+          brandingLogo: w,
+          textColor: o.colorSchemes.dark.textColor,
+          label: ((h = n.classicQuiz.labels) == null ? void 0 : h.sponsor) || null
+        }
+      ),
+      rulesDisplay: n.rulesDisplay
+    }
+  );
+};
+export {
+  xn as default
+};

package/packages/classic-quiz-play/src/components/Variants/Overlay/SignIn/OverlaySignIn.styles.js

@@ -0,0 +1,42 @@
+const o = (e) => ({
+  // Pulse animation for buttons
+  pulseAnimation: {
+    "@keyframes pulse": {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(1.05)" },
+      "100%": { transform: "scale(1)" }
+    }
+  },
+  // Sign In button
+  signInButton: {
+    borderRadius: e.buttonRadius,
+    bgcolor: e.primaryColor,
+    color: "#FFFFFF",
+    py: "10px",
+    px: "16px",
+    "&:hover": {
+      bgcolor: e.primaryColor
+    },
+    "&:active": {
+      color: e.onPrimaryColor
+    },
+    animation: "pulse 1s infinite",
+    fontSize: "0.9375em"
+  },
+  // Start button text
+  signInButtonText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: e.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  }
+});
+export {
+  o as createStyles
+};

package/packages/classic-quiz-play/src/components/Variants/Split/Error/SplitError.js

@@ -0,0 +1,42 @@
+import { j as o } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { isMobile as u } from "../../../../../../common/src/functions/theme.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "@mui/joy";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import d from "../../../../../../common/src/components/Skeletons/Split/ApiError/SplitApiErrorSkeleton.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import b from "../../../Shared/MainCard.js";
+import f from "../../../Shared/PresentedBy.js";
+import { useTranslation as y } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const S = (i) => {
+  var e, t, a, n;
+  const m = u(), { t: l } = y(), r = ((e = i.classicQuiz.branding) == null ? void 0 : e.colors) || null, c = m ? ((t = i.classicQuiz.branding) == null ? void 0 : t.images.mobileLogo) || ((a = i.classicQuiz.branding) == null ? void 0 : a.images.mainLogo) || "" : ((n = i.classicQuiz.branding) == null ? void 0 : n.images.mainLogo) || "";
+  return /* @__PURE__ */ o.jsx(b, { brandingBorderColor: (r == null ? void 0 : r.borderColor) || null, children: /* @__PURE__ */ o.jsx(
+    d,
+    {
+      entity: i.classicQuiz,
+      headline: l("classicQuiz.headline"),
+      tryAgainButtonText: l("classicQuiz.buttons.tryAgain"),
+      defaultImagePlaceholderUrl: i.defaultImagePlaceholderUrl,
+      isApiError: i.isApiError,
+      toggleTryAgain: i.toggleTryAgain,
+      renderPresentedBy: (g) => {
+        var s;
+        return /* @__PURE__ */ o.jsx(
+          f,
+          {
+            brandingLogo: c,
+            textColor: g,
+            label: ((s = i.classicQuiz.labels) == null ? void 0 : s.sponsor) || null
+          }
+        );
+      },
+      rulesDisplay: i.rulesDisplay
+    }
+  ) });
+};
+export {
+  S as default
+};

package/packages/classic-quiz-play/src/components/Variants/Split/LeadCollection/SplitLeadAfterCollection.js

@@ -0,0 +1,37 @@
+import { j as i } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import "react";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "@mui/joy";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import m from "../../../../../../common/src/components/LeadCollection/SplitLeadAfterCollection.js";
+import o from "../../../Shared/MainCard.js";
+import r from "../../../../assets/default-quiz-bg.png.js";
+import a from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import l from "../../../Shared/PresentedBy.js";
+import d from "../../../Leads/CollectLeadWrapper.js";
+import { useTranslation as s } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const P = (e) => {
+  const { t } = s();
+  return /* @__PURE__ */ i.jsx(
+    m,
+    {
+      entity: e.classicQuiz,
+      headline: t("classicQuiz.headline"),
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholder: e.defaultImagePlaceholderUrl || r,
+      mobileImagePlaceholder: a,
+      onLeadSubmitted: e.onLeadSubmitted,
+      isSubmitting: e.isSubmitting,
+      MainCard: o,
+      PresentedBy: l,
+      CollectLeadWrapper: d,
+      rulesDisplay: e.rulesDisplay
+    }
+  );
+};
+export {
+  P as default
+};