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

package/packages/collect-lead/src/components/Shared/PresentedBy.js

@@ -0,0 +1,118 @@
+import { j as n } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as o, Typography as a } from "@mui/joy";
+import { useFontFamily as c, isMobile as s } from "../../../../common/src/functions/theme.js";
+import { getBrandingClickUrl 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 "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const k = (e) => {
+  const l = c().secondary, x = s(), i = d(e.primaryUrl, e.secondaryUrl, "logo");
+  if (!e.brandingLogo)
+    return null;
+  const m = () => {
+    i && window.open(i, "_blank", "noopener,noreferrer");
+  }, t = /* @__PURE__ */ n.jsx(
+    "img",
+    {
+      src: e.brandingLogo,
+      alt: "branding-logo",
+      style: {
+        maxHeight: "50px",
+        maxWidth: "100px"
+      }
+    }
+  ), r = i ? typeof window > "u" ? /* @__PURE__ */ n.jsx(
+    o,
+    {
+      component: "a",
+      href: i,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        cursor: "pointer",
+        textDecoration: "none",
+        display: "inline-flex"
+      },
+      children: t
+    }
+  ) : /* @__PURE__ */ n.jsx(
+    o,
+    {
+      onClick: m,
+      sx: {
+        cursor: "pointer",
+        display: "inline-flex"
+      },
+      children: t
+    }
+  ) : t;
+  return x ? /* @__PURE__ */ n.jsxs(
+    o,
+    {
+      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: l
+            },
+            children: e.label
+          }
+        ),
+        r
+      ]
+    }
+  ) : /* @__PURE__ */ n.jsxs(
+    o,
+    {
+      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: l
+            },
+            children: e.label
+          }
+        ),
+        r
+      ]
+    }
+  );
+};
+export {
+  k as default
+};

package/packages/collect-lead/src/components/Variants/Overlay/LeadOverlayVariant.js

@@ -0,0 +1,72 @@
+import { j as o } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as l, Typography as F } from "@mui/joy";
+import { useInternalTheme as q, useSpacingScale as w, useImageBackgroundGradient as H, isMobile as L } from "../../../../../common/src/functions/theme.js";
+import { sanitizeBackgroundUrl as J } 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 I } from "../../../../../common/src/enums/enums.js";
+import "react";
+import { useConstantContext as K } from "../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import { useImageVariant as N } from "../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import Q from "../../../assets/default-quiz-bg.png.js";
+import X from "../../../assets/default-quiz-bg-vertical.jpg.js";
+import Z from "../../Shared/PresentedBy.js";
+import _ from "../../Leads/CollectLeadWrapper.js";
+import { createStyles as $ } from "./LeadOverlayVariant.styles.js";
+import { ConfigurationContext as ee } from "../../../providers/ConfigurationProvider.js";
+const oe = (e) => {
+  let t = (e == null ? void 0 : e.mainLogo) || null;
+  return L() && (t = (e == null ? void 0 : e.mobileLogo) || (e == null ? void 0 : e.mainLogo) || null), t;
+}, je = () => {
+  var s, a, n, i, m, c, d, p, x, h, u, g, f, y, C, j, k, S;
+  const e = K(ee), t = q(), P = w(), b = H(
+    I.OVERLAY
+  ), R = oe(
+    ((s = e.branding) == null ? void 0 : s.images) || null
+  ), T = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : L() ? X : Q, V = N(
+    {
+      images: e.images || null,
+      imagePlaceholder: T
+    },
+    I.OVERLAY
+  ), v = J(V), z = t.colorSchemes.dark.textColor, E = t.customFontFamily.dark.primary, O = t.customFontFamily.dark.secondary, U = t.customRadius.dark.md, W = (a = t.border) == null ? void 0 : a.dark.size, A = (i = (n = t.colorSchemes) == null ? void 0 : n.dark) == null ? void 0 : i.surfaceVariant, G = (c = (m = t.customRadius) == null ? void 0 : m.light) == null ? void 0 : c.xl, Y = (h = (x = (p = (d = t.colorSchemes) == null ? void 0 : d.light) == null ? void 0 : p.palette) == null ? void 0 : x.primary) == null ? void 0 : h.plainColor, D = (y = (f = (g = (u = t.colorSchemes) == null ? void 0 : u.light) == null ? void 0 : g.palette) == null ? void 0 : f.primary) == null ? void 0 : y.onPrimary, r = $({
+    spacingScale: P,
+    secondaryColor: z,
+    fontFamilyPrimary: E,
+    fontFamilySecondary: O,
+    mdBorderRadius: U,
+    borderSize: W,
+    contentBgColor: A,
+    buttonRadius: G,
+    primaryColor: Y,
+    onPrimaryColor: D,
+    backgroundImage: v,
+    darkTextColor: t.colorSchemes.dark.textColor,
+    imageBackgroundGradient: b
+  }), M = () => {
+    var B;
+    return /* @__PURE__ */ o.jsx(
+      Z,
+      {
+        brandingLogo: R,
+        textColor: t.colorSchemes.dark.textColor,
+        label: (B = e.labels) == null ? void 0 : B.presentedByLabel
+      }
+    );
+  };
+  return /* @__PURE__ */ o.jsxs(l, { sx: r.mainContainer, children: [
+    (C = e.labels) != null && C.title || (j = e.labels) != null && j.description ? /* @__PURE__ */ o.jsx(l, { children: /* @__PURE__ */ o.jsx(l, { sx: r.headlineSection, children: /* @__PURE__ */ o.jsx(l, { sx: r.headlineContent, children: /* @__PURE__ */ o.jsx(l, { sx: r.headlineContentInner, children: /* @__PURE__ */ o.jsxs(l, { sx: r.contentContainer, children: [
+      (k = e.labels) != null && k.title ? /* @__PURE__ */ o.jsx(F, { level: "h4", sx: r.titleText, children: e.labels.title }) : /* @__PURE__ */ o.jsx(o.Fragment, {}),
+      (S = e.labels) != null && S.description ? /* @__PURE__ */ o.jsx(F, { level: "body-lg", sx: r.pollDescriptionText, children: e.labels.description }) : /* @__PURE__ */ o.jsx(o.Fragment, {})
+    ] }) }) }) }) }) : /* @__PURE__ */ o.jsx(o.Fragment, {}),
+    /* @__PURE__ */ o.jsxs(l, { sx: r.mainContentSection, children: [
+      /* @__PURE__ */ o.jsx(l, { sx: r.contentContainerWithBackdrop, children: /* @__PURE__ */ o.jsx(_, {}) }),
+      /* @__PURE__ */ o.jsx(l, { sx: r.bottomFooterContainer, children: M() })
+    ] })
+  ] });
+};
+export {
+  je as default
+};

package/packages/collect-lead/src/components/Variants/Overlay/LeadOverlayVariant.styles.js

@@ -0,0 +1,187 @@
+const t = (e) => ({
+  // Main container with background overlay
+  mainContainer: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    gap: "40px",
+    p: e.spacingScale.xl,
+    boxShadow: "md",
+    border: "none",
+    overflow: "hidden",
+    backgroundImage: e.backgroundImage,
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    position: "relative",
+    borderRadius: e.mdBorderRadius,
+    minHeight: "250px",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      background: e.imageBackgroundGradient,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      zIndex: 0
+    }
+  },
+  // Headline section wrapper
+  headlineSection: {
+    display: "flex",
+    justifyContent: "space-between",
+    flex: "1 0 0",
+    alignSelf: "stretch"
+  },
+  // Headline content container
+  headlineContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    flex: "1 0 0",
+    gap: "16px"
+  },
+  // Headline content with z-index
+  headlineContentInner: {
+    zIndex: 10
+  },
+  // headline typography
+  headlineText: {
+    fontWeight: 500,
+    lineHeight: "166%",
+    letterSpacing: "1px",
+    textAlign: { xs: "center", md: "left" },
+    color: e.secondaryColor,
+    opacity: "70%",
+    textTransform: "uppercase",
+    fontFamily: e.fontFamilySecondary,
+    fontSize: "0.75em"
+  },
+  // Content container
+  contentContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale["3xs"]
+  },
+  // Title typography
+  titleText: {
+    fontWeight: 700,
+    lineHeight: "133%",
+    letterSpacing: "0px",
+    fontSize: "1.5em",
+    color: e.darkTextColor,
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: { xs: "center", md: "left" }
+  },
+  // Poll description typography
+  pollDescriptionText: {
+    fontWeight: 400,
+    lineHeight: "140%",
+    letterSpacing: "0.15px",
+    fontSize: "1.25em",
+    textAlign: { xs: "center", md: "left" },
+    color: e.secondaryColor,
+    opacity: "70%",
+    fontFamily: e.fontFamilyPrimary
+  },
+  // Main content section (non-filter screen)
+  mainContentSection: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px"
+  },
+  // Content container with backdrop
+  contentContainerWithBackdrop: {
+    borderRadius: e.mdBorderRadius,
+    p: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    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.5,
+      borderRadius: "inherit",
+      zIndex: 0
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  },
+  // Alternative title section
+  alternativeTitleSection: {
+    display: "flex",
+    gap: "8px",
+    alignItems: "flex-start",
+    justifyContent: "center"
+  },
+  // Alternative title text
+  alternativeTitleText: {
+    fontFamily: e.fontFamilyPrimary,
+    lineHeight: "150%",
+    letterSpacing: "0.15px",
+    fontWeight: 500,
+    fontSize: "1.25em",
+    textAlign: "center",
+    color: e.darkTextColor
+  },
+  // Bottom footer container
+  bottomFooterContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexDirection: { xs: "column-reverse", md: "row" },
+    gap: e.spacingScale.md
+  },
+  // Next button
+  nextButton: {
+    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)",
+    ml: { md: "auto" },
+    "&:hover": {
+      bgcolor: e.primaryColor,
+      transform: "scale(1.02)"
+    },
+    "&:active": {
+      color: e.onPrimaryColor,
+      transform: "scale(0.98)"
+    },
+    "&:disabled": {
+      bgcolor: e.primaryColor,
+      color: e.onPrimaryColor,
+      opacity: "34%"
+    },
+    "--Icon-color": e.onPrimaryColor,
+    fontSize: "0.9375em"
+  },
+  // Next button text
+  nextButtonText: {
+    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 {
+  t as createStyles
+};

package/packages/collect-lead/src/components/Variants/Split/LeadSplitVariant.js

@@ -0,0 +1,81 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as t, Typography as P } from "@mui/joy";
+import { useInternalTheme as z, isMobile as T, useColors as s, useFontFamily as L, useCornerRadius as k, useSpacingScale as J, useImageBackgroundGradient as K } from "../../../../../common/src/functions/theme.js";
+import { hexToRgb as N } 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 B } from "../../../../../common/src/enums/enums.js";
+import "react";
+import { useConstantContext as O } from "../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import { useImageVariant as Q } from "../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import X from "../../Shared/MainCard.js";
+import Y from "../../../assets/default-quiz-bg.png.js";
+import Z from "../../../assets/default-quiz-bg-vertical.jpg.js";
+import _ from "../../Shared/PresentedBy.js";
+import $ from "../../Leads/CollectLeadWrapper.js";
+import { createStyles as ee } from "./LeadSplitVariant.styles.js";
+import { ConfigurationContext as oe } from "../../../providers/ConfigurationProvider.js";
+const je = () => {
+  var p, x, g, u, C, b, f, h, y, j;
+  const o = O(oe), i = z(), F = o.defaultImagePlaceholderUrl ? o.defaultImagePlaceholderUrl : T() ? Z : Y, R = Q(
+    {
+      images: o.images || null,
+      imagePlaceholder: F
+    },
+    B.SPLIT
+  ), l = T() ? ((x = (p = o.branding) == null ? void 0 : p.images) == null ? void 0 : x.mobileLogo) || ((u = (g = o.branding) == null ? void 0 : g.images) == null ? void 0 : u.mainLogo) || "" : ((b = (C = o.branding) == null ? void 0 : C.images) == null ? void 0 : b.mainLogo) || "", V = s().textColor, q = L().secondary, A = "60%", D = L().primary, G = k().xl, M = s().surfaceVariant, U = (h = (f = s().palette) == null ? void 0 : f.primary) == null ? void 0 : h.plainColor, W = (j = (y = s().palette) == null ? void 0 : y.primary) == null ? void 0 : j.onPrimary, m = s().textColor, c = J(), E = k(), H = K(
+    B.SPLIT
+  ), v = N(M || ""), r = ee({
+    finalImage: R,
+    spacingScale: c,
+    borderRadius: E,
+    fontFamilyPrimary: D,
+    fontFamilySecondary: q,
+    secondaryColor: V,
+    opacity: A,
+    buttonRadius: G,
+    bgcolor: v,
+    primaryColor: U,
+    onPrimaryColor: W,
+    textColor: m,
+    darkTextColor: i.colorSchemes.dark.textColor,
+    imageBackgroundGradient: H
+  }), d = (a) => {
+    var n;
+    return /* @__PURE__ */ e.jsx(
+      _,
+      {
+        brandingLogo: l,
+        textColor: a,
+        label: (n = o.labels) == null ? void 0 : n.presentedByLabel
+      }
+    );
+  }, w = () => {
+    var a, n, I, S;
+    return /* @__PURE__ */ e.jsx(t, { sx: r.headlineSection, children: /* @__PURE__ */ e.jsxs(t, { sx: r.headlineContent, children: [
+      (a = o.labels) != null && a.title || (n = o.labels) != null && n.description ? /* @__PURE__ */ e.jsx(t, { children: /* @__PURE__ */ e.jsxs(t, { sx: r.contentContainer, children: [
+        (I = o.labels) != null && I.title ? /* @__PURE__ */ e.jsx(P, { sx: r.pollTitleText, children: o.labels.title }) : /* @__PURE__ */ e.jsx(e.Fragment, {}),
+        (S = o.labels) != null && S.description ? /* @__PURE__ */ e.jsx(P, { sx: r.pollDescriptionText, children: o.labels.description }) : /* @__PURE__ */ e.jsx(e.Fragment, {})
+      ] }) }) : /* @__PURE__ */ e.jsx(e.Fragment, {}),
+      l ? /* @__PURE__ */ e.jsx(t, { sx: r.presentedByDesktop, children: d(i.colorSchemes.dark.textColor) }) : /* @__PURE__ */ e.jsx(e.Fragment, {})
+    ] }) });
+  };
+  return /* @__PURE__ */ e.jsxs(X, { children: [
+    w(),
+    /* @__PURE__ */ e.jsx(t, { sx: r.questionArea, children: /* @__PURE__ */ e.jsxs(t, { sx: r.questionAreaInner, children: [
+      /* @__PURE__ */ e.jsx(t, { sx: r.leadContentContainer, children: /* @__PURE__ */ e.jsx($, {}) }),
+      /* @__PURE__ */ e.jsx(
+        t,
+        {
+          sx: { display: { xs: "block", md: "none" }, px: c.md },
+          children: d(m)
+        }
+      )
+    ] }) })
+  ] });
+};
+export {
+  je as default
+};