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

package/packages/poll-vote/src/components/Variants/Split/ScoreState/PollSplitScoreState.js

@@ -0,0 +1,155 @@
+import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as n, Typography as A, Button as W } from "@mui/joy";
+import { useInternalTheme as q, isMobile as $, isDesktop as z, isLarge as E, useColors as a, useFontFamily as G, useCornerRadius as H, useSpacingScale as J } from "../../../../../../common/src/functions/theme.js";
+import { hexToRgb as d } 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 K } from "../../../../../../common/src/enums/enums.js";
+import N from "../../../../../../common/src/components/AdditionalCTA.js";
+import "react";
+import { useConstantContext as Q } from "../../../../../../common/src/hooks/useConstantContext.js";
+import { ConstantsContext as X } from "../../../../../../common/src/providers/ConstantsProvider.js";
+import Y from "../../../../../../common/src/components/Skeletons/Split/ScoreState/SplitScoreStateSkeleton.js";
+import Z from "../../../../../../../node_modules/@mui/icons-material/esm/Replay.js";
+import { useImageVariant as _ } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import ee from "../../../Shared/MainCard.js";
+import te from "../../../../assets/default-quiz-bg.png.js";
+import oe from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import I from "../../../Shared/PresentedBy.js";
+import { createStyles as le } from "./PollSplitScoreState.styles.js";
+import ne from "../../../Shared/AlertMessage.js";
+import ae from "../../../Shared/Results/PollOptionsResults.js";
+import { usePollOptionsImages as re } from "../../../../hooks/usePollOptionsImages.js";
+import { useTranslation as ie } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const Me = (e) => {
+  var f, C, h, y;
+  const x = q(), u = $(), k = z(), g = E(), P = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : u ? oe : te, R = _(
+    {
+      images: e.poll.images,
+      imagePlaceholder: P
+    },
+    K.SPLIT
+  ), v = re(e.poll.options), { t: s } = ie(), { optionsLayout: L } = Q(X), o = ((f = e.poll.branding) == null ? void 0 : f.colors) || null, B = a().textPrimary, M = (o == null ? void 0 : o.secondaryColor) || a().textSecondary, D = a().secondaryContainer, F = G().primary, r = (o == null ? void 0 : o.backgroundColor) || a().surfaceVariant, w = a().surface, O = a().onSurface, c = H(), p = a().textColor, i = J(), m = u ? ((C = e.poll.branding) == null ? void 0 : C.images.mobileLogo) || ((h = e.poll.branding) == null ? void 0 : h.images.mainLogo) || "" : ((y = e.poll.branding) == null ? void 0 : y.images.mainLogo) || "", l = le({
+    spacingScale: i,
+    borderRadius: c,
+    fontFamilyPrimary: F,
+    textPrimary: B,
+    secondaryColor: M,
+    secondaryContainer: D,
+    bgcolor: d(r || ""),
+    surfaceColor: w,
+    onSurfaceColor: O,
+    textColor: p,
+    darkTextColor: x.colorSchemes.dark.textColor,
+    isLarge: g
+  }), U = () => {
+    var b, S, j, T;
+    const V = k ? /* @__PURE__ */ t.jsx(
+      I,
+      {
+        brandingLogo: m,
+        textColor: (o == null ? void 0 : o.contentColor) || x.colorSchemes.dark.textColor,
+        label: ((b = e.poll.labels) == null ? void 0 : b.sponsor) || null
+      }
+    ) : null;
+    return /* @__PURE__ */ t.jsx(
+      Y,
+      {
+        entity: e.poll,
+        headline: s("poll.headline"),
+        finalImage: R,
+        brandingContent: V,
+        isTabulated: !1,
+        alwaysShowImage: !0,
+        rulesDisplay: e.rulesDisplay,
+        children: e.isUnauthorized ? /* @__PURE__ */ t.jsx(n, { sx: l.alertMessageArea, children: /* @__PURE__ */ t.jsx(n, { sx: l.alertMessageWrapper, children: /* @__PURE__ */ t.jsx(
+          ne,
+          {
+            variant: "error",
+            title: s("common.authentication.accessRequired"),
+            message: s("common.authentication.invalidOrMissingAuth")
+          }
+        ) }) }) : /* @__PURE__ */ t.jsxs(n, { sx: l.questionAreaContent, children: [
+          /* @__PURE__ */ t.jsxs(
+            n,
+            {
+              sx: {
+                p: i.lg,
+                gap: i.lg,
+                display: "flex",
+                flexDirection: "column",
+                backdropFilter: "blur(4px)",
+                bgcolor: `rgba(${r ? d(r || "").replace(/[^\d,]/g, "") : ""}, 0.5)`,
+                borderRadius: c.sm
+              },
+              children: [
+                e.poll.alternativeTitle ? /* @__PURE__ */ t.jsx(n, { sx: l.alternativeTitleSection, children: /* @__PURE__ */ t.jsx(A, { level: "body-lg", sx: l.alternativeTitleText, children: e.poll.alternativeTitle }) }) : /* @__PURE__ */ t.jsx(t.Fragment, {}),
+                /* @__PURE__ */ t.jsx(
+                  ae,
+                  {
+                    options: e.poll.options,
+                    selectedOptions: ((S = e.userVote) == null ? void 0 : S.optionIds) || [],
+                    optionsLayout: L ?? "twoByTwo",
+                    optionsImages: v,
+                    brandingColors: ((j = e.poll.branding) == null ? void 0 : j.colors) || null
+                  }
+                )
+              ]
+            }
+          ),
+          !e.maxAttemptsReached || e.additionalCTA !== void 0 ? /* @__PURE__ */ t.jsx(
+            n,
+            {
+              id: "poll-desktop-thanks",
+              sx: {
+                p: i.lg,
+                gap: i.lg,
+                display: "flex",
+                flexDirection: "column",
+                backdropFilter: "blur(4px)",
+                bgcolor: `rgba(${r ? d(r || "").replace(/[^\d,]/g, "") : ""}, 0.5)`,
+                borderRadius: c.sm
+              },
+              children: /* @__PURE__ */ t.jsx(n, { sx: l.ctaContainer, children: /* @__PURE__ */ t.jsx(n, { sx: l.ctaContentWrapper, children: /* @__PURE__ */ t.jsxs(n, { sx: l.buttonsContainer, children: [
+                !e.maxAttemptsReached && /* @__PURE__ */ t.jsx(
+                  W,
+                  {
+                    sx: l.playAgainButton,
+                    onClick: e.voteAgain,
+                    children: /* @__PURE__ */ t.jsxs(n, { sx: l.playAgainButtonContent, children: [
+                      /* @__PURE__ */ t.jsx(Z, { sx: l.playAgainIcon }),
+                      /* @__PURE__ */ t.jsx(A, { sx: l.playAgainText, children: s("poll.buttons.voteAgain") })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(
+                  N,
+                  {
+                    additionalCTA: e.additionalCTA,
+                    buttonStyle: l.additionalCTAButton,
+                    buttonContentStyle: l.additionalCTAButtonContent,
+                    textStyle: l.additionalCTAText
+                  }
+                )
+              ] }) }) })
+            }
+          ) : null,
+          g && m && /* @__PURE__ */ t.jsx(
+            I,
+            {
+              brandingLogo: m,
+              textColor: (o == null ? void 0 : o.contentColor) || p,
+              label: ((T = e.poll.labels) == null ? void 0 : T.sponsor) || null,
+              isCentered: !0
+            }
+          )
+        ] })
+      }
+    );
+  };
+  return /* @__PURE__ */ t.jsx(ee, { brandingBorderColor: (o == null ? void 0 : o.borderColor) || null, children: U() });
+};
+export {
+  Me as default
+};

package/packages/poll-vote/src/components/Variants/Split/ScoreState/PollSplitScoreState.styles.js

@@ -0,0 +1,156 @@
+const t = (e) => ({
+  // Question area content wrapper
+  questionAreaContent: {
+    p: e.spacingScale.lg,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: e.spacingScale.lg,
+    flex: 1,
+    height: "100%"
+  },
+  // Alternative title section
+  alternativeTitleSection: {
+    gap: "8px",
+    display: "flex",
+    justifyContent: "center"
+  },
+  // Alternative title text
+  alternativeTitleText: {
+    fontFamily: e.fontFamilyPrimary,
+    lineHeight: "150%",
+    letterSpacing: "0.15px",
+    fontWeight: 500,
+    fontSize: "1.25em",
+    textAlign: "center",
+    color: e.textColor
+  },
+  // 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.onSurfaceColor
+    },
+    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"
+  },
+  // 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,
+    textAlign: "center",
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "0.9375em",
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "22px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  },
+  alertMessageArea: {
+    flex: e.isLarge ? "1" : "0 0 50%",
+    width: e.isLarge ? "100%" : "50%",
+    minWidth: e.isLarge ? "100%" : "50%",
+    maxWidth: e.isLarge ? "100%" : "50%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center"
+  },
+  alertMessageWrapper: {
+    p: e.spacingScale.lg
+  }
+});
+export {
+  t as createStyles
+};

package/packages/poll-vote/src/components/Variants/Split/SignIn/PollSplitSignIn.js

@@ -0,0 +1,117 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Button as r, Typography as l, Box as p } from "@mui/joy";
+import { useInternalTheme as v, isMobile as D, useFontFamily as F, useCornerRadius as R, useColors as y } 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 { WidgetTemplate as _ } from "../../../../../../common/src/enums/enums.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import M from "../../../../../../common/src/components/Skeletons/Split/SignIn/SplitSignInSkeleton.js";
+import { useImageVariant as U } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import E from "../../../Shared/MainCard.js";
+import V from "../../../../assets/default-quiz-bg.png.js";
+import W from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import q from "../../../Shared/PresentedBy.js";
+import { createStyles as z } from "./PollSplitSignIn.styles.js";
+import { useTranslation as G } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const sn = (n) => {
+  var s, m, g, u, c;
+  const b = v(), a = D(), A = n.defaultImagePlaceholderUrl ? n.defaultImagePlaceholderUrl : a ? W : V, j = U(
+    {
+      images: n.poll.images,
+      imagePlaceholder: A
+    },
+    _.SPLIT
+  ), { t: o } = G(), i = ((s = n.poll.branding) == null ? void 0 : s.colors) || null, B = a ? ((m = n.poll.branding) == null ? void 0 : m.images.mobileLogo) || ((g = n.poll.branding) == null ? void 0 : g.images.mainLogo) || "" : ((u = n.poll.branding) == null ? void 0 : u.images.mainLogo) || "", L = F().primary, P = R().xl, S = (i == null ? void 0 : i.primaryColor) || y().palette.primary.plainColor, k = y().palette.primary.onPrimary, t = z({
+    fontFamilyPrimary: L,
+    buttonRadius: P,
+    primaryColor: S,
+    onPrimaryColor: k
+  }), w = () => {
+    var d, I, f, x;
+    return n.signInCTA ? (d = n.signInCTA) != null && d.component ? n.signInCTA.component : (I = n.signInCTA) != null && I.onClick ? /* @__PURE__ */ e.jsx(
+      r,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation
+        },
+        onClick: n.signInCTA.onClick,
+        children: /* @__PURE__ */ e.jsx(l, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || o("common.signIn") })
+      }
+    ) : (f = n.signInCTA) != null && f.url ? typeof window > "u" ? /* @__PURE__ */ e.jsx(
+      p,
+      {
+        component: "a",
+        href: n.signInCTA.url,
+        target: ((x = n.signInCTA) == null ? void 0 : x.target) || "_self",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation,
+          textDecoration: "none",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ e.jsx(l, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || o("common.signIn") })
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      r,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation
+        },
+        onClick: () => {
+          var C, T, h;
+          ((C = n.signInCTA) == null ? void 0 : C.target) === "_blank" ? window.open((T = n.signInCTA) == null ? void 0 : T.url, "_blank") : window.location.href = (h = n.signInCTA) == null ? void 0 : h.url;
+        },
+        children: /* @__PURE__ */ e.jsx(l, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || o("common.signIn") })
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      r,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ e.jsx(l, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || o("common.signIn") })
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      r,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ e.jsx(l, { sx: t.signInButtonText, children: o("common.signIn") })
+      }
+    );
+  };
+  return /* @__PURE__ */ e.jsx(E, { brandingBorderColor: (i == null ? void 0 : i.borderColor) || null, children: /* @__PURE__ */ e.jsx(
+    M,
+    {
+      entity: n.poll,
+      headline: o("poll.headline"),
+      finalImage: j,
+      signInContent: w(),
+      rulesDisplay: n.rulesDisplay,
+      brandingContent: /* @__PURE__ */ e.jsx(
+        q,
+        {
+          brandingLogo: B,
+          textColor: (i == null ? void 0 : i.contentColor) || b.colorSchemes.dark.textColor,
+          label: ((c = n.poll.labels) == null ? void 0 : c.sponsor) || null
+        }
+      )
+    }
+  ) });
+};
+export {
+  sn as default
+};

package/packages/poll-vote/src/components/Variants/Split/SignIn/PollSplitSignIn.styles.js

@@ -0,0 +1,52 @@
+const o = (r) => ({
+  // 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: r.buttonRadius,
+    py: "10px",
+    px: "16px",
+    bgcolor: r.primaryColor,
+    color: r.onPrimaryColor,
+    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+    transform: "scale(1)",
+    alignSelf: "center",
+    "&:hover": {
+      bgcolor: r.primaryColor,
+      transform: "scale(1.02)"
+    },
+    "&:active": {
+      color: r.onPrimaryColor,
+      transform: "scale(0.98)"
+    },
+    "&:disabled": {
+      bgcolor: r.primaryColor,
+      color: r.onPrimaryColor,
+      opacity: "12%"
+    },
+    animation: "pulse 1s infinite",
+    fontSize: "0.9375em"
+  },
+  // Sign in button text
+  signInButtonText: {
+    fontFamily: r.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: r.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  }
+});
+export {
+  o as createStyles
+};

package/packages/poll-vote/src/components/Variants/Standard/Error/PollStandardError.js

@@ -0,0 +1,43 @@
+import { j as l } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { isMobile as s } 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 u from "../../../../../../common/src/components/Skeletons/Standard/ApiError/StandardApiErrorSkeleton.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 C = (o) => {
+  var e, t, n, a;
+  const r = ((e = o.poll.branding) == null ? void 0 : e.colors) || null, g = s() ? ((t = o.poll.branding) == null ? void 0 : t.images.mobileLogo) || ((n = o.poll.branding) == null ? void 0 : n.images.mainLogo) || "" : ((a = o.poll.branding) == null ? void 0 : a.images.mainLogo) || "", { t: i } = y();
+  return /* @__PURE__ */ l.jsx(b, { brandingBorderColor: (r == null ? void 0 : r.borderColor) || null, children: /* @__PURE__ */ l.jsx(
+    u,
+    {
+      entity: o.poll,
+      headline: i("poll.headline"),
+      tryAgainButtonText: i("poll.buttons.tryAgain"),
+      defaultImagePlaceholderUrl: o.defaultImagePlaceholderUrl,
+      imagePosition: o.imagePosition || "left",
+      isApiError: o.isApiError,
+      toggleTryAgain: o.toggleTryAgain,
+      rulesDisplay: o.rulesDisplay,
+      renderPresentedBy: (d) => {
+        var m;
+        return /* @__PURE__ */ l.jsx(
+          f,
+          {
+            brandingLogo: g,
+            textColor: d,
+            label: ((m = o.poll.labels) == null ? void 0 : m.sponsor) || null
+          }
+        );
+      }
+    }
+  ) });
+};
+export {
+  C as default
+};

package/packages/poll-vote/src/components/Variants/Standard/LeadCollection/StandardLeadAfterCollection.js

@@ -0,0 +1,34 @@
+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 o from "../../../../../../common/src/components/LeadCollection/StandardLeadAfterCollection.js";
+import a from "../../../Shared/MainCard.js";
+import r from "../../../Shared/PresentedBy.js";
+import m from "../../../Leads/CollectLeadWrapper.js";
+import { useTranslation as d } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const h = (t) => {
+  const { t: e } = d();
+  return /* @__PURE__ */ i.jsx(
+    o,
+    {
+      entity: t.poll,
+      headline: e("poll.headline"),
+      sdk: t.sdk,
+      leads: t.leads,
+      defaultImagePlaceholderUrl: t.defaultImagePlaceholderUrl,
+      imagePosition: t.imagePosition,
+      onLeadSubmitted: t.onLeadSubmitted,
+      isSubmitting: t.isSubmitting,
+      MainCard: a,
+      PresentedBy: r,
+      CollectLeadWrapper: m
+    }
+  );
+};
+export {
+  h as default
+};