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

package/packages/poll-vote/src/components/Variants/Standard/SignIn/PollStandardSignIn.styles.js

@@ -0,0 +1,248 @@
+const o = (e) => {
+  var t, i, n;
+  return {
+    // 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,
+      py: "10px",
+      px: "16px",
+      bgcolor: e.primaryColor,
+      color: e.onPrimaryColor,
+      transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+      transform: "scale(1)",
+      alignSelf: "center",
+      "&:hover": {
+        bgcolor: e.primaryColor,
+        transform: "scale(1.02)"
+      },
+      "&:active": {
+        color: e.onPrimaryColor,
+        transform: "scale(0.98)"
+      },
+      "&:disabled": {
+        bgcolor: e.primaryColor,
+        color: e.onPrimaryColor,
+        opacity: "12%"
+      },
+      animation: "pulse 1s infinite",
+      fontSize: "0.9375em"
+    },
+    // Sign in 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"
+    },
+    // Mobile headline with image background
+    mobileHeadlineWithImage: {
+      display: { xs: "flex", md: "none" },
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: "5px",
+      borderTopRightRadius: "5px",
+      position: "relative",
+      minHeight: "210px",
+      overflow: "hidden",
+      height: "auto",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      }
+    },
+    // Content inside mobile headline with image
+    mobileHeadlineContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      gap: e.spacingScale["2xl"],
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between"
+    },
+    // Mobile headline without image
+    mobileHeadlineWithoutImage: {
+      display: { xs: "flex", md: "none" },
+      flex: "0.5",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      p: e.spacingScale.lg,
+      gap: e.spacingScale["2xl"]
+    },
+    // Headline typography (mobile with image)
+    headlineTypographyMobileImage: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((t = e.brandingColors) == null ? void 0 : t.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: "center"
+    },
+    // Headline typography (mobile without image & desktop)
+    headlineTypography: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      textTransform: "uppercase",
+      fontSize: "0.75em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilySecondary,
+      textAlign: "center"
+    },
+    // Title typography (mobile with image)
+    titleTypographyMobileImage: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((i = e.brandingColors) == null ? void 0 : i.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: "center"
+    },
+    // Title typography (mobile without image & desktop)
+    titleTypography: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: { xs: "center", md: "left" }
+    },
+    // Description typography (mobile with image)
+    descriptionTypographyMobileImage: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((n = e.brandingColors) == null ? void 0 : n.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: "center"
+    },
+    // Description typography (mobile without image & desktop)
+    descriptionTypography: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: { xs: "center", md: "left" }
+    },
+    // Desktop title typography (centered)
+    titleTypographyDesktop: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Desktop description typography (centered)
+    descriptionTypographyDesktop: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Image container (left position)
+    imageContainerLeft: {
+      display: { xs: "none", md: "block" },
+      flex: "0.3",
+      borderTopLeftRadius: e.borderRadius.md,
+      borderBottomLeftRadius: e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative"
+    },
+    // Image container (right position)
+    imageContainerRight: {
+      display: { xs: "none", md: "block" },
+      flex: "0.3",
+      borderTopRightRadius: "5px",
+      borderBottomRightRadius: "5px",
+      overflow: "hidden",
+      height: "auto",
+      position: "relative"
+    },
+    // Main content area
+    mainContentArea: {
+      flex: { xs: "1", md: e.finalImage ? "0.7" : "1" },
+      display: {
+        md: "flex",
+        xs: "none"
+      },
+      flexDirection: "column",
+      p: e.spacingScale.md,
+      gap: e.spacingScale["2xl"]
+    },
+    // Desktop headline container
+    desktopHeadlineContainer: {
+      display: { xs: "none", md: "flex" },
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: e.spacingScale["2xl"],
+      textAlign: "center"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Question area
+    questionArea: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    // Start button container
+    signInButtonContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: e.spacingScale["2xl"]
+    },
+    // Quiz image
+    pollImage: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    }
+  };
+};
+export {
+  o as createStyles
+};

package/packages/poll-vote/src/hooks/useEmbedCodeContainer.js

@@ -0,0 +1,30 @@
+import { useRef as a, useEffect as f } from "react";
+const l = (c) => {
+  const r = a(null);
+  return f(() => {
+    var s;
+    if (c && r.current) {
+      r.current.innerHTML = c;
+      const i = r.current.getElementsByTagName("iframe");
+      for (let t = 0; t < i.length; t++) {
+        const e = i[t], n = e.src;
+        e.src = "", setTimeout(() => {
+          e.src = n;
+        }, 100);
+      }
+      const o = r.current.getElementsByTagName("script");
+      for (let t = 0; t < o.length; t++) {
+        const e = o[t], n = document.createElement("script");
+        Array.from(e.attributes).forEach((u) => {
+          n.setAttribute(u.name, u.value);
+        }), n.innerHTML = e.innerHTML, (s = e.parentNode) == null || s.replaceChild(n, e);
+      }
+    }
+    return () => {
+      r.current && (r.current.innerHTML = "");
+    };
+  }, [c]), r;
+};
+export {
+  l as useEmbedCode
+};

package/packages/poll-vote/src/hooks/useMyPollVote.js

@@ -0,0 +1,43 @@
+import { SinglePollVoteModel as V } from "fansunited-sdk-esm";
+import { useState as c, useEffect as m } from "react";
+const P = (a, t, u) => {
+  const [f, r] = c(null), [d, e] = c(!1), [y, o] = c(!1), g = async () => {
+    try {
+      const i = await t.voting.getMyPollVote(a);
+      r(i);
+    } catch (n) {
+      if (r(new V()), t.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
+        const l = n;
+        if (l.error.code === 404)
+          return;
+        if (l.error.code === 401 || l.error.code === 403) {
+          e(!0);
+          return;
+        }
+        o(!0);
+        return;
+      }
+      const s = n;
+      if (s.data.error.code === 404)
+        return;
+      if (s.data.error.code === 401 || s.data.error.code === 403) {
+        e(!0);
+        return;
+      }
+      o(!0);
+    }
+  };
+  return m(() => (g(), () => {
+    r(null), e(!1), o(!1);
+  }), [a, t, u]), {
+    myVote: f,
+    setMyVote: r,
+    isUnauthorized: d,
+    isApiError: y,
+    setIsUnauthorized: e,
+    setIsApiError: o
+  };
+};
+export {
+  P as useMyPollVote
+};

package/packages/poll-vote/src/hooks/usePollById.js

@@ -0,0 +1,16 @@
+import { PollFullModel as s } from "fansunited-sdk-esm";
+import { useState as c, useEffect as u } from "react";
+const y = (t, e) => {
+  const [r, o] = c(null), n = async () => {
+    try {
+      const l = await e.voting.getPollById(t, !0);
+      o(l);
+    } catch (l) {
+      console.error(l), o(new s());
+    }
+  };
+  return u(() => (n(), () => o(null)), [t, e]), { poll: r, setPoll: o };
+};
+export {
+  y as usePollById
+};

package/packages/poll-vote/src/hooks/usePollOptionsImages.js

@@ -0,0 +1,19 @@
+import { isMobile as r } 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 "../../../../node_modules/react/jsx-runtime.js";
+import "@mui/joy";
+import "react";
+import "../../../common/src/providers/ConstantsProvider.js";
+import "../../../common/src/providers/ContainerProvider.js";
+const M = (e) => {
+  const i = /* @__PURE__ */ new Map(), s = r();
+  return e.forEach((o) => {
+    var m, t;
+    const p = (s ? (m = o.images) == null ? void 0 : m.mobile : (t = o.images) == null ? void 0 : t.main) || "";
+    i.set(o.id, p);
+  }), i;
+};
+export {
+  M as usePollOptionsImages
+};

package/packages/poll-vote/src/index.js

@@ -0,0 +1,4 @@
+import o from "./main.js";
+export {
+  o as default
+};

package/packages/poll-vote/src/main.js

@@ -0,0 +1,7 @@
+import { j as t } from "../../../node_modules/react/jsx-runtime.js";
+import r from "./components/PollVote.js";
+import e from "../../common/src/components/Portal.js";
+const i = (o) => /* @__PURE__ */ t.jsx(e, { packageName: "poll-vote", ...o, children: /* @__PURE__ */ t.jsx(r, { ...o }) });
+export {
+  i as default
+};