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

package/packages/collect-lead/src/components/Variants/Standard/LeadStandardVariant.styles.js

@@ -0,0 +1,313 @@
+const t = (e) => ({
+  // 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"
+    }
+  },
+  // Mobile headline content
+  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: 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: { xs: "center", md: "left" }
+  },
+  // Headline typography (desktop centered)
+  headlineTypographyDesktop: {
+    fontWeight: 500,
+    lineHeight: "166%",
+    letterSpacing: "1px",
+    textTransform: "uppercase",
+    fontSize: "0.75em",
+    color: e.secondaryColor,
+    opacity: e.opacity,
+    fontFamily: e.fontFamilySecondary
+  },
+  // Content container
+  contentContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale["3xs"]
+  },
+  // Title typography (mobile with image)
+  titleTypographyMobileImage: {
+    fontWeight: 700,
+    lineHeight: "133%",
+    fontSize: "1.5em",
+    letterSpacing: "0.15px",
+    color: e.darkTextColor,
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: "center"
+  },
+  // Title typography (mobile without image & desktop responsive)
+  titleTypography: {
+    fontWeight: 700,
+    lineHeight: "133%",
+    letterSpacing: "0px",
+    fontSize: "1.5em",
+    color: e.textColor,
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: { xs: "center", md: "left" }
+  },
+  // Title typography (desktop centered)
+  titleTypographyDesktop: {
+    fontWeight: 700,
+    lineHeight: "133%",
+    letterSpacing: "0px",
+    fontSize: "1.5em",
+    color: e.textColor,
+    fontFamily: e.fontFamilyPrimary
+  },
+  // Description typography (mobile with image)
+  descriptionTypographyMobileImage: {
+    fontWeight: 400,
+    lineHeight: "140%",
+    fontSize: "1.25em",
+    letterSpacing: "0.15px",
+    color: e.darkTextColor,
+    opacity: "70%",
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: "center"
+  },
+  // Description typography (mobile without image & desktop responsive)
+  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" }
+  },
+  // Description typography (desktop 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",
+    overflow: "hidden",
+    height: "auto",
+    position: "relative",
+    minHeight: "auto",
+    backgroundImage: `url(${e.finalImage})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center center",
+    backgroundRepeat: "no-repeat",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // Image container (right position)
+  imageContainerRight: {
+    display: { xs: "none", md: "block" },
+    flex: "0.3",
+    overflow: "hidden",
+    height: "auto",
+    position: "relative",
+    minHeight: "auto",
+    backgroundImage: `url(${e.finalImage})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center center",
+    backgroundRepeat: "no-repeat",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // Poll image
+  pollImage: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  // Main content area
+  mainContentArea: {
+    flex: { xs: "1", md: e.finalImage ? "0.7" : "1" },
+    display: "flex",
+    flexDirection: "column",
+    p: e.spacingScale.md,
+    gap: { xs: e.spacingScale.sm, md: e.spacingScale.md }
+  },
+  // Desktop headline container
+  desktopHeadlineContainer: {
+    display: { xs: "none", md: "flex" },
+    flexDirection: "column",
+    justifyContent: "space-between",
+    gap: e.spacingScale["2xl"],
+    textAlign: "center"
+  },
+  // Lead collection container
+  leadCollectionContainer: {
+    display: "flex",
+    flexDirection: "column",
+    p: e.spacingScale.md
+  },
+  // Lead question container
+  leadQuestionContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: { xs: e.spacingScale.lg, md: e.spacingScale.md }
+  },
+  // Lead content container
+  leadContentContainer: {
+    borderRadius: e.mdBorderRadius,
+    px: e.spacingScale.md,
+    pt: e.spacingScale.md,
+    pb: e.spacingScale.lg,
+    gap: e.spacingScale.md,
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    display: "flex",
+    flexDirection: "column",
+    backdropFilter: "blur(4px)"
+  },
+  // Question area
+  questionArea: {
+    display: "flex",
+    flexDirection: "column",
+    p: e.spacingScale.md
+  },
+  // Question container
+  questionContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: { xs: e.spacingScale.lg, md: e.spacingScale.md }
+  },
+  // Question content container
+  questionContentContainer: {
+    borderRadius: e.mdBorderRadius,
+    px: e.spacingScale.md,
+    pt: e.spacingScale.md,
+    pb: e.spacingScale.lg,
+    gap: e.spacingScale.md,
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    display: "flex",
+    flexDirection: "column",
+    backdropFilter: "blur(4px)"
+  },
+  // Aspect ratio container for embed/image
+  aspectRatioContainer: {
+    borderRadius: e.smBorderRadius,
+    height: "100%",
+    flex: 1,
+    // Take all available space
+    "& > div": {
+      height: "100% !important",
+      flex: "1 !important"
+      // Force flex growth
+    }
+  },
+  // Question text container
+  questionTextContainer: {
+    gap: "8px",
+    display: "flex",
+    justifyContent: "center"
+  },
+  // Question text
+  questionText: {
+    fontFamily: e.fontFamilyPrimary,
+    lineHeight: "150%",
+    letterSpacing: "0.15px",
+    fontWeight: 500,
+    fontSize: "1.25em",
+    textAlign: "center",
+    color: e.textColor
+  },
+  // Footer container
+  footerContainer: {
+    display: "flex",
+    flexDirection: { xs: "column", md: "row" },
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: e.spacingScale.lg
+  },
+  // Footer container (no logo)
+  footerContainerNoLogo: {
+    display: "flex",
+    flexDirection: { xs: "column", md: "row" },
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: e.spacingScale.lg
+  },
+  // Presented by desktop
+  presentedByDesktop: {
+    display: { xs: "none", md: "block" }
+  },
+  // Presented by mobile
+  presentedByMobile: {
+    display: { xs: "block", md: "none" }
+  },
+  // Safe area indicator for Standard variant (30% width containers)
+  imageSafeArea: {
+    position: "relative",
+    zIndex: 2,
+    width: "165px",
+    // Safe area: 165px on desktop
+    height: "100%"
+    // Visual indicator for development (remove in production)
+    // border: "1px dashed rgba(255,255,255,0.7)",
+  }
+});
+export {
+  t as createStyles
+};

package/packages/collect-lead/src/index.js

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

package/packages/collect-lead/src/main.js

@@ -0,0 +1,39 @@
+import { j as n } from "../../../node_modules/react/jsx-runtime.js";
+import a from "./components/CollectLead.js";
+import l from "../../common/src/components/Portal.js";
+import { ConfigurationProvider as i } from "./providers/ConfigurationProvider.js";
+const s = (e) => {
+  var t;
+  return /* @__PURE__ */ n.jsx(
+    l,
+    {
+      packageName: "collect-lead",
+      entityId: ((t = e.content) == null ? void 0 : t.id) || "",
+      ...e,
+      children: /* @__PURE__ */ n.jsx(
+        i,
+        {
+          phoneCountryCode: e.phoneCountryCode,
+          language: e.language,
+          images: e.images,
+          content: e.content,
+          campaign: e.campaign,
+          branding: e.branding,
+          labels: e.labels,
+          defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+          sdk: e.sdk,
+          fields: e.fields,
+          shadowRootElement: null,
+          onSuccessCta: e.onSuccessCTA,
+          customFields: e.customFields,
+          consents: e.consents,
+          syncWithProfile: e.syncWithProfile,
+          children: /* @__PURE__ */ n.jsx(a, { ...e })
+        }
+      )
+    }
+  );
+};
+export {
+  s as default
+};

package/packages/collect-lead/src/providers/ConfigurationProvider.js

@@ -0,0 +1,50 @@
+import { j as C } from "../../../../node_modules/react/jsx-runtime.js";
+import { createContext as c } from "react";
+const j = c({
+  shadowRootElement: null,
+  language: null,
+  sdk: null
+}), P = ({
+  shadowRootElement: o,
+  phoneCountryCode: t,
+  images: n,
+  content: e,
+  campaign: r,
+  branding: l,
+  labels: a,
+  defaultImagePlaceholderUrl: i,
+  language: s = "en",
+  children: u,
+  sdk: m,
+  fields: x,
+  onSuccessCta: f,
+  customFields: d,
+  consents: g,
+  syncWithProfile: p = !1
+}) => /* @__PURE__ */ C.jsx(
+  j.Provider,
+  {
+    value: {
+      shadowRootElement: o,
+      phoneCountryCode: t,
+      images: n,
+      content: e,
+      campaign: r,
+      branding: l,
+      labels: a,
+      defaultImagePlaceholderUrl: i,
+      language: s,
+      sdk: m,
+      fields: x,
+      onSuccessCta: f,
+      customFields: d,
+      consents: g,
+      syncWithProfile: p
+    },
+    children: u
+  }
+);
+export {
+  j as ConfigurationContext,
+  P as ConfigurationProvider
+};

package/packages/common/src/components/AdditionalCTA.js

@@ -0,0 +1,24 @@
+import { j as e } from "../../../../node_modules/react/jsx-runtime.js";
+import { Button as o, Box as f, Typography as u } from "@mui/joy";
+import { useTranslation as l } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const h = ({
+  additionalCTA: r,
+  buttonStyle: n,
+  buttonContentStyle: c,
+  textStyle: s
+}) => {
+  const { t } = l();
+  return r ? r.component ? r.component : r.onClick ? /* @__PURE__ */ e.jsx(o, { sx: n, onClick: r.onClick, children: r.defaultLabel && /* @__PURE__ */ e.jsx(f, { sx: c, children: /* @__PURE__ */ e.jsx(u, { sx: s, children: r.defaultLabel }) }) }) : r.url ? /* @__PURE__ */ e.jsx(
+    o,
+    {
+      component: "a",
+      href: r.url,
+      target: r.target || "_self",
+      sx: n,
+      children: /* @__PURE__ */ e.jsx(u, { sx: s, children: r.defaultLabel || t("common.additional") })
+    }
+  ) : null : null;
+};
+export {
+  h as default
+};

package/packages/common/src/components/AlertMessage.js

@@ -0,0 +1,88 @@
+import { j as e } from "../../../../node_modules/react/jsx-runtime.js";
+import m from "../../../../node_modules/@mui/icons-material/esm/CheckCircle.js";
+import f from "../../../../node_modules/@mui/icons-material/esm/Info.js";
+import d from "../../../../node_modules/@mui/icons-material/esm/Warning.js";
+import { Alert as u, Stack as x, Typography as t } from "@mui/joy";
+import { useInternalTheme as h, useCornerRadius as p, useFontFamily as y } from "../functions/theme.js";
+const j = (r, o) => {
+  switch (r) {
+    case "success":
+      return /* @__PURE__ */ e.jsx(m, {});
+    case "error":
+      return /* @__PURE__ */ e.jsx(d, { sx: { color: o } });
+    case "info":
+      return /* @__PURE__ */ e.jsx(f, {});
+  }
+}, g = (r) => {
+  switch (r) {
+    case "success":
+      return "success";
+    case "error":
+      return "danger";
+    case "info":
+      return "primary";
+  }
+}, A = ({
+  variant: r,
+  title: o,
+  message: n,
+  description: c
+}) => {
+  const i = h(), a = p(), s = y().secondary, l = g(r);
+  return /* @__PURE__ */ e.jsx(
+    u,
+    {
+      variant: "soft",
+      color: l,
+      startDecorator: j(
+        r,
+        i.colorSchemes.light.palette.danger.plainColor
+      ),
+      sx: {
+        gap: 1,
+        borderRadius: a.sm,
+        fontSize: "0.875em",
+        "--Icon-fontSize": "1.25em"
+      },
+      children: /* @__PURE__ */ e.jsxs(
+        x,
+        {
+          sx: {
+            fontSize: "1.5em"
+          },
+          children: [
+            o && /* @__PURE__ */ e.jsx(
+              t,
+              {
+                level: "title-md",
+                color: l,
+                fontWeight: "bold",
+                sx: { fontFamily: s, fontSize: "0.875em" },
+                children: o
+              }
+            ),
+            n && /* @__PURE__ */ e.jsx(
+              t,
+              {
+                level: "body-sm",
+                sx: { fontFamily: s, fontSize: "0.675em" },
+                children: n
+              }
+            ),
+            c && /* @__PURE__ */ e.jsx(
+              t,
+              {
+                level: "body-xs",
+                sx: { fontFamily: s, fontSize: "0.6em" },
+                children: c
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  A as default
+};

package/packages/common/src/components/LeadCollection/OverlayLeadAfterCollection.js

@@ -0,0 +1,111 @@
+import { j as t } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as g } from "@mui/joy";
+import { useInternalTheme as D, isMobile as L, useSpacingScale as T } from "../../functions/theme.js";
+import { extractBrandingProperties as W } from "../../functions/helpers.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as v } from "../../enums/enums.js";
+import "react";
+import "../../providers/ConstantsProvider.js";
+import R from "../Skeletons/Overlay/OverlaySkeleton.js";
+import { useImageVariant as U } from "../../hooks/useImageVariant.js";
+import "../../providers/ContainerProvider.js";
+const H = (e) => {
+  const o = D(), d = L(), C = e.defaultImagePlaceholder ? e.defaultImagePlaceholder || "" : d ? e.mobileImagePlaceholder : e.defaultImagePlaceholder || "", { brandingImage: S, brandingColors: c, brandingLogo: I } = W(e.entity.branding || null), P = S || U(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: C || ""
+    },
+    v.OVERLAY
+  ), s = T(), k = (c == null ? void 0 : c.backgroundColor) || o.colorSchemes.dark.surfaceVariant, m = {
+    mainContentSection: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "24px"
+    },
+    contentContainerWithBackdrop: {
+      borderRadius: o.customRadius.dark.sm,
+      p: s.md,
+      display: "flex",
+      flexDirection: "column",
+      gap: s.md,
+      backdropFilter: "blur(4px)",
+      position: "relative",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: k,
+        opacity: 0.5,
+        borderRadius: "inherit",
+        zIndex: 0
+      },
+      "& > *": {
+        position: "relative",
+        zIndex: 1
+      }
+    },
+    presentedByContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: d ? "center" : "space-between",
+      flexDirection: d ? "column-reverse" : "row",
+      gap: s.md
+    }
+  }, j = () => {
+    var n, i, a, l, r;
+    return /* @__PURE__ */ t.jsx(
+      e.PresentedBy,
+      {
+        brandingLogo: I || "",
+        textColor: o.colorSchemes.dark.textColor,
+        label: ((n = e.entity.labels) == null ? void 0 : n.sponsor) || null,
+        primaryUrl: (a = (i = e.entity.branding) == null ? void 0 : i.urls) == null ? void 0 : a.primaryUrl,
+        secondaryUrl: (r = (l = e.entity.branding) == null ? void 0 : l.urls) == null ? void 0 : r.secondaryUrl
+      }
+    );
+  }, B = () => {
+    var n, i, a, l, r, u, y, b, f, x, h;
+    return /* @__PURE__ */ t.jsxs(g, { sx: m.mainContentSection, children: [
+      /* @__PURE__ */ t.jsx(g, { sx: m.contentContainerWithBackdrop, children: /* @__PURE__ */ t.jsx(
+        e.CollectLeadWrapper,
+        {
+          sdk: e.sdk,
+          contentId: e.entity.id,
+          contentName: e.entity.title,
+          brandingColors: (n = e.entity.branding) == null ? void 0 : n.colors,
+          brandingUrls: (i = e.entity.branding) == null ? void 0 : i.urls,
+          campaignId: (a = e.leads) == null ? void 0 : a.campaignId,
+          campaignName: (l = e.leads) == null ? void 0 : l.campaignName,
+          fields: (r = e.leads) == null ? void 0 : r.fields,
+          leadTitle: (u = e.entity.labels) == null ? void 0 : u.leadTitle,
+          leadDescription: (y = e.entity.labels) == null ? void 0 : y.leadDescription,
+          leadCta: (b = e.entity.labels) == null ? void 0 : b.leadCta,
+          leadSuccessTitle: (f = e.entity.labels) == null ? void 0 : f.leadSuccessTitle,
+          leadSuccessDescription: (x = e.entity.labels) == null ? void 0 : x.leadSuccessDescription,
+          syncWithProfile: (h = e.leads) == null ? void 0 : h.syncWithProfile,
+          startGame: e.onLeadSubmitted,
+          isAfterPosition: !0,
+          isSubmittingParticipation: e.isSubmitting
+        }
+      ) }),
+      /* @__PURE__ */ t.jsx(g, { sx: m.presentedByContainer, children: j() })
+    ] });
+  };
+  return /* @__PURE__ */ t.jsx(
+    R,
+    {
+      entity: e.entity,
+      headline: e.headline,
+      finalImage: P,
+      rulesDisplay: e.rulesDisplay,
+      children: B()
+    }
+  );
+};
+export {
+  H as default
+};