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

package/packages/poll-vote/src/components/Shared/PresentedBy.js

@@ -0,0 +1,118 @@
+import { j as n } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as t, Typography as a } from "@mui/joy";
+import { useFontFamily as d, isTablet as g, isMobile as f } from "../../../../common/src/functions/theme.js";
+import { getBrandingClickUrl as h } 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 "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const z = (e) => {
+  const o = d().secondary, s = g(), x = e.isSplitVariant && s, c = f(), i = h(e.primaryUrl, e.secondaryUrl, "logo");
+  if (!e.brandingLogo)
+    return null;
+  const m = () => {
+    i && window.open(i, "_blank", "noopener,noreferrer");
+  }, l = /* @__PURE__ */ n.jsx(
+    "img",
+    {
+      src: e.brandingLogo,
+      alt: "branding-logo",
+      style: {
+        maxHeight: "50px",
+        maxWidth: "100px"
+      }
+    }
+  ), r = i ? typeof window > "u" ? /* @__PURE__ */ n.jsx(
+    t,
+    {
+      component: "a",
+      href: i,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        cursor: "pointer",
+        textDecoration: "none",
+        display: "inline-flex"
+      },
+      children: l
+    }
+  ) : /* @__PURE__ */ n.jsx(
+    t,
+    {
+      onClick: m,
+      sx: {
+        cursor: "pointer",
+        display: "inline-flex"
+      },
+      children: l
+    }
+  ) : l;
+  return e.isCentered || x || c ? /* @__PURE__ */ n.jsxs(
+    t,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        alignItems: "center",
+        minWidth: "180px",
+        fontSize: "1em",
+        zIndex: 1
+      },
+      children: [
+        e.label && /* @__PURE__ */ n.jsx(
+          a,
+          {
+            level: "body-sm",
+            sx: {
+              fontWeight: 400,
+              lineHeight: "166%",
+              letterSpacing: "0.4px",
+              fontSize: "1em",
+              color: e.textColor,
+              textAlign: "right",
+              fontFamily: o
+            },
+            children: e.label
+          }
+        ),
+        r
+      ]
+    }
+  ) : /* @__PURE__ */ n.jsxs(
+    t,
+    {
+      sx: {
+        minWidth: "180px",
+        display: "flex",
+        gap: "8px",
+        alignItems: "center",
+        zIndex: 10,
+        fontSize: "1em"
+      },
+      children: [
+        e.label && /* @__PURE__ */ n.jsx(
+          a,
+          {
+            level: "body-sm",
+            sx: {
+              fontWeight: 400,
+              lineHeight: "166%",
+              letterSpacing: "0.4px",
+              textAlign: "right",
+              fontSize: "1em",
+              color: e.textColor,
+              fontFamily: o
+            },
+            children: e.label
+          }
+        ),
+        r
+      ]
+    }
+  );
+};
+export {
+  z as default
+};

package/packages/poll-vote/src/components/Shared/Results/PollOptionResult.js

@@ -0,0 +1,257 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { useState as w, useEffect as v } from "react";
+import { Box as n, AspectRatio as z, Typography as c } from "@mui/joy";
+import { useInternalTheme as I, useColors as R, useCornerRadius as f, useFontFamily as W, useSpacingScale as P } 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 "../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import y from "../../../../../../node_modules/@mui/icons-material/esm/People.js";
+const L = (t) => {
+  var g;
+  const [u, S] = w(0), r = I(), x = R(), j = f().sm, s = W(), d = f().xs, o = P(), h = t.optionsImages.get(t.option.id), i = t.selectedOptions.includes(t.option.id), C = ((g = t.brandingColors) == null ? void 0 : g.primaryColor) || x.palette.primary.plainColor, l = x.palette.primary.onPrimary, p = i ? l : r.colorSchemes.light.textColor, m = t.option.votes, a = t.totalVotes > 0 ? m / t.totalVotes * 100 : 0;
+  v(() => {
+    const b = setTimeout(() => {
+      S(a);
+    }, 100);
+    return () => clearTimeout(b);
+  }, [a]);
+  const F = () => h ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      n,
+      {
+        sx: {
+          borderRadius: d,
+          overflow: "hidden",
+          flexGrow: 1,
+          mb: o["2xs"]
+        },
+        children: /* @__PURE__ */ e.jsx(z, { ratio: "16/9", sx: { borderRadius: d }, children: /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            src: h,
+            alt: "Option illustration",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(
+      n,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: o["2xs"],
+          my: o["2xs"]
+        },
+        children: [
+          /* @__PURE__ */ e.jsx(
+            y,
+            {
+              sx: {
+                fontSize: 12,
+                color: i ? l : r.colorSchemes.light.textColor
+              }
+            }
+          ),
+          /* @__PURE__ */ e.jsxs(
+            c,
+            {
+              level: "body-sm",
+              sx: {
+                fontSize: "0.7em",
+                fontWeight: 500,
+                color: i ? l : r.colorSchemes.light.textColor,
+                fontFamily: s.secondary,
+                whiteSpace: "nowrap",
+                lineHeight: 1
+              },
+              children: [
+                m.toLocaleString(),
+                " (",
+                a.toFixed(1),
+                "%)"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      c,
+      {
+        level: "body-md",
+        sx: {
+          fontFamily: s.primary,
+          fontWeight: 500,
+          fontSize: "0.935em",
+          lineHeight: "24px",
+          letterSpacing: "0.46px",
+          textAlign: "center",
+          color: p,
+          px: o["2xs"]
+        },
+        children: t.option.title
+      }
+    )
+  ] }) : /* @__PURE__ */ e.jsxs(
+    n,
+    {
+      sx: {
+        position: "relative",
+        zIndex: 1,
+        display: "flex",
+        gap: o.xs
+      },
+      children: [
+        /* @__PURE__ */ e.jsxs(
+          n,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gap: o["2xs"],
+              flexShrink: 0,
+              minWidth: "fit-content"
+            },
+            children: [
+              /* @__PURE__ */ e.jsxs(
+                n,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: o["2xs"]
+                  },
+                  children: [
+                    /* @__PURE__ */ e.jsx(
+                      y,
+                      {
+                        sx: {
+                          fontSize: 12,
+                          color: i ? l : r.colorSchemes.light.textColor
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ e.jsx(
+                      c,
+                      {
+                        level: "body-sm",
+                        sx: {
+                          fontSize: "0.7em",
+                          fontWeight: 500,
+                          color: i ? l : r.colorSchemes.light.textColor,
+                          fontFamily: s.secondary,
+                          whiteSpace: "nowrap",
+                          lineHeight: 0
+                        },
+                        children: m.toLocaleString()
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e.jsxs(
+                c,
+                {
+                  level: "body-sm",
+                  sx: {
+                    fontSize: "0.65em",
+                    fontWeight: 400,
+                    color: i ? l : r.colorSchemes.light.textColor,
+                    fontFamily: s.secondary,
+                    whiteSpace: "nowrap",
+                    lineHeight: 1,
+                    textAlign: "center"
+                  },
+                  children: [
+                    "(",
+                    a.toFixed(1),
+                    "%)"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          n,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              flex: 1,
+              minWidth: 0,
+              gap: o.xs
+            },
+            children: /* @__PURE__ */ e.jsx(
+              c,
+              {
+                level: "body-md",
+                sx: {
+                  fontFamily: s.primary,
+                  fontWeight: 500,
+                  fontSize: "0.935em",
+                  lineHeight: "16px",
+                  letterSpacing: "0.46px",
+                  color: p,
+                  flex: 1,
+                  minWidth: 0,
+                  wordBreak: "break-word",
+                  hyphens: "auto",
+                  textAlign: "center"
+                },
+                children: t.option.title
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ e.jsxs(
+    n,
+    {
+      sx: {
+        borderRadius: j,
+        flex: 1,
+        p: o.xs,
+        bgcolor: i ? C : "#FFFFFF",
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        overflow: "hidden",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ e.jsx(
+          n,
+          {
+            sx: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              height: "100%",
+              width: `${u}%`,
+              bgcolor: i ? x.palette.primary.primaryContainer : r.mode === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)",
+              transition: "width 0.8s ease-out",
+              zIndex: 0
+            }
+          }
+        ),
+        F()
+      ]
+    },
+    t.option.id
+  );
+};
+export {
+  L as default
+};

package/packages/poll-vote/src/components/Shared/Results/PollOptionsResults.js

@@ -0,0 +1,232 @@
+import { j as o } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as l, Typography as p } from "@mui/joy";
+import f from "./PollOptionResult.js";
+import g from "../../../../../../node_modules/@mui/icons-material/esm/People.js";
+import { useSpacingScale as y, useColors as a, useFontFamily as j, useBorderSize as b } 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 "react";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import { useTranslation as h } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const v = (e) => {
+  const { t: c } = h(), s = y(), i = a(), d = j(), x = b().size, r = e.options.reduce(
+    (t, n) => t + (n.votes || 0),
+    0
+  );
+  if (e.optionsLayout === "twoByTwo") {
+    const t = [];
+    for (let n = 0; n < e.options.length; n += 2) {
+      const m = e.options.slice(n, n + 2);
+      t.push(m);
+    }
+    return /* @__PURE__ */ o.jsxs(
+      l,
+      {
+        sx: { display: "flex", flexDirection: "column", gap: s.md },
+        children: [
+          /* @__PURE__ */ o.jsx(l, { sx: { py: 2, display: "flex", flexDirection: "column", gap: 2 }, children: t.map((n, m) => /* @__PURE__ */ o.jsx(
+            l,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: {
+                  xs: "column",
+                  md: "row"
+                },
+                gap: 2
+              },
+              children: n.map((u) => /* @__PURE__ */ o.jsx(
+                f,
+                {
+                  option: u,
+                  optionsImages: e.optionsImages,
+                  selectedOptions: e.selectedOptions,
+                  brandingColors: e.brandingColors,
+                  totalVotes: r
+                },
+                u.id
+              ))
+            },
+            `row-${m}`
+          )) }),
+          /* @__PURE__ */ o.jsxs(
+            l,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: s.xs,
+                pt: s.md,
+                borderTop: `${x} solid`,
+                borderColor: a().outlineEnabledBorder
+              },
+              children: [
+                /* @__PURE__ */ o.jsx(
+                  g,
+                  {
+                    sx: {
+                      fontSize: 18,
+                      color: i.textColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ o.jsxs(
+                  p,
+                  {
+                    level: "body-sm",
+                    sx: {
+                      color: i.textColor,
+                      fontWeight: 500,
+                      fontFamily: d.secondary
+                    },
+                    children: [
+                      r.toLocaleString(),
+                      " ",
+                      c("poll.totalVotes")
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return e.optionsLayout === "column" ? /* @__PURE__ */ o.jsxs(
+    l,
+    {
+      sx: { display: "flex", flexDirection: "column", gap: s.md },
+      children: [
+        /* @__PURE__ */ o.jsx(l, { sx: { py: 2, display: "flex", flexDirection: "column", gap: 2 }, children: e.options.map((t) => /* @__PURE__ */ o.jsx(
+          f,
+          {
+            option: t,
+            selectedOptions: e.selectedOptions,
+            optionsImages: e.optionsImages,
+            brandingColors: e.brandingColors,
+            totalVotes: r
+          },
+          t.id
+        )) }),
+        /* @__PURE__ */ o.jsxs(
+          l,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: s.xs,
+              pt: s.md,
+              borderTop: `${x} solid`,
+              borderColor: a().outlineEnabledBorder
+            },
+            children: [
+              /* @__PURE__ */ o.jsx(
+                g,
+                {
+                  sx: {
+                    fontSize: 18,
+                    color: i.textColor
+                  }
+                }
+              ),
+              /* @__PURE__ */ o.jsxs(
+                p,
+                {
+                  level: "body-sm",
+                  sx: {
+                    color: i.textColor,
+                    fontWeight: 500,
+                    fontFamily: d.secondary
+                  },
+                  children: [
+                    r.toLocaleString(),
+                    " ",
+                    c("poll.totalVotes")
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ o.jsxs(
+    l,
+    {
+      sx: { display: "flex", flexDirection: "column", gap: s.md },
+      children: [
+        /* @__PURE__ */ o.jsx(
+          l,
+          {
+            sx: {
+              py: 2,
+              display: "flex",
+              flexWrap: "wrap",
+              flexDirection: { xs: "column", md: "row" },
+              gap: 2
+            },
+            children: e.options.map((t) => /* @__PURE__ */ o.jsx(
+              f,
+              {
+                option: t,
+                selectedOptions: e.selectedOptions,
+                optionsImages: e.optionsImages,
+                brandingColors: e.brandingColors,
+                totalVotes: r
+              },
+              t.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ o.jsxs(
+          l,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: s.xs,
+              pt: s.md,
+              borderTop: `${x} solid`,
+              borderColor: a().outlineEnabledBorder
+            },
+            children: [
+              /* @__PURE__ */ o.jsx(
+                g,
+                {
+                  sx: {
+                    fontSize: 18,
+                    color: i.textColor
+                  }
+                }
+              ),
+              /* @__PURE__ */ o.jsxs(
+                p,
+                {
+                  level: "body-sm",
+                  sx: {
+                    color: i.textColor,
+                    fontWeight: 500,
+                    fontFamily: d.secondary
+                  },
+                  children: [
+                    r.toLocaleString(),
+                    " ",
+                    c("poll.totalVotes")
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  v as default
+};

package/packages/poll-vote/src/components/Variants/Overlay/Error/PollOverlayError.js

@@ -0,0 +1,45 @@
+import { j as o } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { isMobile as n } from "../../../../../../common/src/functions/theme.js";
+import { extractBrandingProperties as s } 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 "@mui/joy";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import g from "../../../../../../common/src/components/Skeletons/Overlay/ApiError/OverlayApiErrorSkeleton.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import d from "../../../../assets/default-quiz-bg.png.js";
+import p from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import u from "../../../Shared/PresentedBy.js";
+import { useTranslation as f } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const D = (r) => {
+  const { t: e } = f(), t = n(), i = r.defaultImagePlaceholderUrl ? r.defaultImagePlaceholderUrl : t ? p : d, { brandingLogo: a } = s(
+    r.poll.branding || null
+  );
+  return /* @__PURE__ */ o.jsx(
+    g,
+    {
+      entity: r.poll,
+      headline: e("poll.headline"),
+      tryAgainButtonText: e("poll.buttons.tryAgain"),
+      defaultImagePlaceholderUrl: i,
+      isApiError: r.isApiError,
+      toggleTryAgain: r.toggleTryAgain,
+      rulesDisplay: r.rulesDisplay,
+      renderPresentedBy: (m) => {
+        var l;
+        return /* @__PURE__ */ o.jsx(
+          u,
+          {
+            brandingLogo: a,
+            textColor: m,
+            label: ((l = r.poll.labels) == null ? void 0 : l.sponsor) || null
+          }
+        );
+      }
+    }
+  );
+};
+export {
+  D as default
+};

package/packages/poll-vote/src/components/Variants/Overlay/LeadCollection/OverlayLeadAfterCollection.js

@@ -0,0 +1,34 @@
+import { j as o } 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/OverlayLeadAfterCollection.js";
+import i from "../../../Shared/PresentedBy.js";
+import r from "../../../Leads/CollectLeadWrapper.js";
+import l from "../../../../assets/default-quiz-bg.png.js";
+import a from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import { useTranslation as d } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const S = (e) => {
+  const { t } = d();
+  return /* @__PURE__ */ o.jsx(
+    m,
+    {
+      entity: e.poll,
+      headline: t("poll.headline"),
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholder: l,
+      mobileImagePlaceholder: a,
+      onLeadSubmitted: e.onLeadSubmitted,
+      isSubmitting: e.isSubmitting,
+      PresentedBy: i,
+      CollectLeadWrapper: r
+    }
+  );
+};
+export {
+  S as default
+};