fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC7

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

@@ -1,313 +0,0 @@
-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

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

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

@@ -1,39 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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
-};