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

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

@@ -1,103 +0,0 @@
-import { j as n } from "../../../../../node_modules/react/jsx-runtime.js";
-import { Box as d } from "@mui/joy";
-import { useInternalTheme as V, isMobile as p, useColors as w, useSpacingScale as E, useCornerRadius as G } from "../../functions/theme.js";
-import { hexToRgb as $ } 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 z from "../Skeletons/Split/SplitSkeleton.js";
-import { useImageVariant as H } from "../../hooks/useImageVariant.js";
-import "../../providers/ContainerProvider.js";
-const le = (e) => {
-  var x, f, y, h, C, S, j;
-  const R = V(), c = p(), U = c ? e.mobileImagePlaceholder || e.defaultImagePlaceholder || "" : e.defaultImagePlaceholder || "", q = H(
-    {
-      images: e.entity.images || null,
-      imagePlaceholder: U
-    },
-    v.SPLIT
-  ), i = ((x = e.entity.branding) == null ? void 0 : x.colors) || null, B = (i == null ? void 0 : i.borderColor) || null, M = (i == null ? void 0 : i.backgroundColor) || w().surfaceVariant, W = $(M), l = E(), N = G(), m = c ? ((y = (f = e.entity.branding) == null ? void 0 : f.images) == null ? void 0 : y.mobileLogo) || ((C = (h = e.entity.branding) == null ? void 0 : h.images) == null ? void 0 : C.mainLogo) || "" : ((j = (S = e.entity.branding) == null ? void 0 : S.images) == null ? void 0 : j.mainLogo) || "", g = {
-    questionArea: {
-      width: "100%",
-      justifyContent: "center",
-      display: "flex",
-      flexDirection: "column"
-    },
-    questionAreaContent: {
-      p: l.lg,
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      gap: "16px"
-    },
-    leadContentContainer: {
-      p: l.md,
-      gap: l.md,
-      display: "flex",
-      flexDirection: "column",
-      backdropFilter: "blur(4px)",
-      bgcolor: `rgba(${W.replace(/[^\d,]/g, "")}, 0.5)`,
-      borderRadius: N.sm
-    }
-  }, b = (u) => {
-    var t, a, r, o, s;
-    return /* @__PURE__ */ n.jsx(
-      e.PresentedBy,
-      {
-        brandingLogo: m,
-        textColor: u,
-        label: ((t = e.entity.labels) == null ? void 0 : t.sponsor) || null,
-        primaryUrl: (r = (a = e.entity.branding) == null ? void 0 : a.urls) == null ? void 0 : r.primaryUrl,
-        secondaryUrl: (s = (o = e.entity.branding) == null ? void 0 : o.urls) == null ? void 0 : s.secondaryUrl,
-        isCentered: !1
-      }
-    );
-  }, F = () => {
-    var a, r, o, s, P, I, D, L, T, k, A;
-    const { CollectLeadWrapper: u, entity: t } = e;
-    return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-      /* @__PURE__ */ n.jsx(d, { sx: g.questionArea, children: /* @__PURE__ */ n.jsx(d, { sx: g.questionAreaContent, children: /* @__PURE__ */ n.jsx(d, { sx: g.leadContentContainer, children: /* @__PURE__ */ n.jsx(
-        u,
-        {
-          sdk: e.sdk,
-          contentId: t.id,
-          contentName: t.title,
-          brandingColors: (a = t.branding) == null ? void 0 : a.colors,
-          brandingUrls: (r = t.branding) == null ? void 0 : r.urls,
-          campaignId: (o = e.leads) == null ? void 0 : o.campaignId,
-          campaignName: (s = e.leads) == null ? void 0 : s.campaignName,
-          fields: (P = e.leads) == null ? void 0 : P.fields,
-          leadTitle: (I = t.labels) == null ? void 0 : I.leadTitle,
-          leadDescription: (D = t.labels) == null ? void 0 : D.leadDescription,
-          leadCta: (L = t.labels) == null ? void 0 : L.leadCta,
-          leadSuccessTitle: (T = t.labels) == null ? void 0 : T.leadSuccessTitle,
-          leadSuccessDescription: (k = t.labels) == null ? void 0 : k.leadSuccessDescription,
-          syncWithProfile: (A = e.leads) == null ? void 0 : A.syncWithProfile,
-          startGame: e.onLeadSubmitted,
-          isAfterPosition: !0,
-          isSubmittingParticipation: e.isSubmitting
-        }
-      ) }) }) }),
-      m && c && /* @__PURE__ */ n.jsx(d, { sx: { mb: l.lg, px: l.lg }, children: b(
-        (i == null ? void 0 : i.contentColor) || R.colorSchemes.dark.textColor
-      ) })
-    ] });
-  };
-  return /* @__PURE__ */ n.jsx(e.MainCard, { brandingBorderColor: B, children: /* @__PURE__ */ n.jsx(
-    z,
-    {
-      entity: e.entity,
-      headline: e.headline,
-      finalImage: q,
-      brandingLogo: m,
-      renderPresentedBy: b,
-      rulesDisplay: e.rulesDisplay,
-      children: F()
-    }
-  ) });
-};
-export {
-  le as default
-};

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

@@ -1,101 +0,0 @@
-import { j as a } from "../../../../../node_modules/react/jsx-runtime.js";
-import { Box as t } from "@mui/joy";
-import { isMobile as $, useSpacingScale as q, useCornerRadius as v, useColors as W } from "../../functions/theme.js";
-import { hexToRgb 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 z } from "../../enums/enums.js";
-import "react";
-import "../../providers/ConstantsProvider.js";
-import H from "../Skeletons/Standard/StandardSkeleton.js";
-import { useImageVariant as J } from "../../hooks/useImageVariant.js";
-import "../../providers/ContainerProvider.js";
-const oe = (e) => {
-  var c, m, g, u, b, x, f;
-  const d = J(
-    {
-      images: e.entity.images || null,
-      imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
-    },
-    z.STANDARD
-  ), o = $(), n = q(), B = v(), M = `rgba(${w(W().surfaceVariant || "")}, 0.5)`, r = ((c = e.entity.branding) == null ? void 0 : c.colors) || null, V = (r == null ? void 0 : r.borderColor) || null, s = o ? ((g = (m = e.entity.branding) == null ? void 0 : m.images) == null ? void 0 : g.mobileLogo) || ((b = (u = e.entity.branding) == null ? void 0 : u.images) == null ? void 0 : b.mainLogo) || "" : ((f = (x = e.entity.branding) == null ? void 0 : x.images) == null ? void 0 : f.mainLogo) || "", Q = e.imagePosition || "left", E = W().textColor, l = {
-    mainContentArea: {
-      flex: o ? "1" : d ? "0.7" : "1",
-      display: "flex",
-      flexDirection: "column",
-      p: n.md,
-      gap: n.md
-    },
-    leadCollectionContainer: {
-      display: "flex",
-      flexDirection: "column"
-    },
-    leadQuestionContainer: {
-      display: "flex",
-      flexDirection: "column",
-      gap: o ? n.lg : n.md
-    },
-    leadContentContainer: {
-      borderRadius: B.md,
-      px: n.md,
-      pt: n.md,
-      pb: n.lg,
-      gap: n.md,
-      bgcolor: M,
-      display: "flex",
-      flexDirection: "column",
-      backdropFilter: "blur(4px)"
-    }
-  }, F = () => {
-    var C, y, h, S, D, j, P, I, L, T, U, p, A, R, k, N;
-    const { CollectLeadWrapper: G, entity: i } = e;
-    return /* @__PURE__ */ a.jsxs(t, { sx: l.mainContentArea, children: [
-      /* @__PURE__ */ a.jsx(t, { sx: l.leadCollectionContainer, children: /* @__PURE__ */ a.jsx(t, { sx: l.leadQuestionContainer, children: /* @__PURE__ */ a.jsx(t, { sx: l.leadContentContainer, children: /* @__PURE__ */ a.jsx(
-        G,
-        {
-          sdk: e.sdk,
-          contentId: i.id,
-          contentName: i.title,
-          brandingColors: (C = i.branding) == null ? void 0 : C.colors,
-          brandingUrls: (y = i.branding) == null ? void 0 : y.urls,
-          campaignId: (h = e.leads) == null ? void 0 : h.campaignId,
-          campaignName: (S = e.leads) == null ? void 0 : S.campaignName,
-          fields: (D = e.leads) == null ? void 0 : D.fields,
-          leadTitle: (j = i.labels) == null ? void 0 : j.leadTitle,
-          leadDescription: (P = i.labels) == null ? void 0 : P.leadDescription,
-          leadCta: (I = i.labels) == null ? void 0 : I.leadCta,
-          leadSuccessTitle: (L = i.labels) == null ? void 0 : L.leadSuccessTitle,
-          leadSuccessDescription: (T = i.labels) == null ? void 0 : T.leadSuccessDescription,
-          syncWithProfile: (U = e.leads) == null ? void 0 : U.syncWithProfile,
-          startGame: e.onLeadSubmitted,
-          isAfterPosition: !0,
-          isSubmittingParticipation: e.isSubmitting
-        }
-      ) }) }) }),
-      s && /* @__PURE__ */ a.jsx(
-        e.PresentedBy,
-        {
-          brandingLogo: s,
-          textColor: E,
-          label: ((p = i.labels) == null ? void 0 : p.sponsor) || null,
-          primaryUrl: (R = (A = i.branding) == null ? void 0 : A.urls) == null ? void 0 : R.primaryUrl,
-          secondaryUrl: (N = (k = i.branding) == null ? void 0 : k.urls) == null ? void 0 : N.secondaryUrl
-        }
-      )
-    ] });
-  };
-  return /* @__PURE__ */ a.jsx(e.MainCard, { brandingBorderColor: V, children: /* @__PURE__ */ a.jsx(
-    H,
-    {
-      entity: e.entity,
-      headline: e.headline,
-      finalImage: d,
-      imagePosition: Q,
-      rulesDisplay: e.rulesDisplay,
-      children: F()
-    }
-  ) });
-};
-export {
-  oe as default
-};

package/packages/common/src/components/Leads/CollectLeadForm.js

@@ -1,72 +0,0 @@
-import { j as r } from "../../../../../node_modules/react/jsx-runtime.js";
-import { Stack as N, Box as S, Typography as f } from "@mui/joy";
-import { useColors as v, useFontFamily as L } from "../../functions/theme.js";
-import T from "./LeadForm.js";
-const P = ({
-  sdk: F,
-  content: m,
-  campaign: i,
-  branding: t,
-  fields: d = ["fullName", "email"],
-  labels: o,
-  onSuccessCta: j,
-  customFields: p,
-  consents: C,
-  syncWithProfile: u = !1,
-  isSubmittingParticipation: h = !1
-}) => {
-  var e;
-  const x = v(), c = x.textColor, z = ((e = t == null ? void 0 : t.colors) == null ? void 0 : e.secondaryColor) || x.textColor, y = L().primary, I = d.map((s) => s && s.trim());
-  return /* @__PURE__ */ r.jsxs(N, { spacing: 2, zIndex: 10, width: "100%", children: [
-    o != null && o.title || o != null && o.description ? /* @__PURE__ */ r.jsxs(S, { children: [
-      o != null && o.title ? /* @__PURE__ */ r.jsx(
-        f,
-        {
-          level: "h4",
-          sx: {
-            fontFamily: y,
-            color: c,
-            fontSize: "1.25em"
-          },
-          children: o.title
-        }
-      ) : /* @__PURE__ */ r.jsx(r.Fragment, {}),
-      o != null && o.description ? /* @__PURE__ */ r.jsx(
-        f,
-        {
-          level: "body-sm",
-          sx: {
-            fontFamily: y,
-            color: z,
-            opacity: 0.6,
-            fontSize: "0.875em"
-          },
-          children: o == null ? void 0 : o.description
-        }
-      ) : /* @__PURE__ */ r.jsx(r.Fragment, {})
-    ] }) : /* @__PURE__ */ r.jsx(r.Fragment, {}),
-    /* @__PURE__ */ r.jsx(
-      T,
-      {
-        sdk: F,
-        brandingColors: t == null ? void 0 : t.colors,
-        brandingUrls: t == null ? void 0 : t.urls,
-        campaignId: i == null ? void 0 : i.id,
-        campaignName: i == null ? void 0 : i.name,
-        contentName: m == null ? void 0 : m.name,
-        contentType: m == null ? void 0 : m.type,
-        contentId: m == null ? void 0 : m.id,
-        onSuccessCta: j,
-        fields: I,
-        labels: o,
-        formCustomFields: p,
-        consents: C,
-        syncWithProfile: u,
-        isSubmittingParticipation: h
-      }
-    )
-  ] });
-};
-export {
-  P as default
-};

package/packages/common/src/components/Leads/ConsentsCheckboxes.js

@@ -1,82 +0,0 @@
-import { j as n } from "../../../../../node_modules/react/jsx-runtime.js";
-import { useState as L } from "react";
-import { useTheme as P, Stack as S, FormControl as T, Box as F, Checkbox as I, Typography as l, Link as U } from "@mui/joy";
-import { useTranslation as A } from "../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const z = (b) => {
-  const { consents: y, isDisabled: C, primaryColor: i, brandingUrls: a, labels: t, onChange: d } = b, h = P(), { t: x } = A(), [m, j] = L({}), v = (e) => (o) => {
-    const s = { ...m, [e]: o.target.checked };
-    j(s), d == null || d(s);
-  }, $ = (e) => {
-    const o = [], s = /\{\{(privacyPolicyUrl|termsAndConditionsUrl)\}\}/g;
-    let r = 0, p;
-    for (; (p = s.exec(e)) !== null; ) {
-      const g = e.slice(r, p.index);
-      g && o.push(
-        /* @__PURE__ */ n.jsx(l, { component: "span", children: g }, `text-${r}`)
-      );
-      const c = p[1], f = a == null ? void 0 : a[c], k = c === "privacyPolicyUrl" ? (t == null ? void 0 : t.privacyPolicyUrlLabel) || x("leads.form.privacyPolicy") : (t == null ? void 0 : t.termsAndConditionsUrlLabel) || x("leads.form.termsAndConditions");
-      f ? o.push(
-        /* @__PURE__ */ n.jsx(
-          U,
-          {
-            href: f,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            sx: { color: i, textDecorationColor: i },
-            children: k
-          },
-          `link-${o.length}`
-        )
-      ) : (console.warn(
-        `[CollectLead] Consent label contains {{${c}}} but branding.urls.${c} is not provided.`
-      ), o.push(
-        /* @__PURE__ */ n.jsx(l, { component: "span", children: k }, `plain-${o.length}`)
-      )), r = s.lastIndex;
-    }
-    const u = e.slice(r);
-    return u && o.push(
-      /* @__PURE__ */ n.jsx(l, { component: "span", children: u }, "text-after")
-    ), /* @__PURE__ */ n.jsx(l, { component: "span", children: o });
-  };
-  return /* @__PURE__ */ n.jsx(S, { spacing: 1, children: y.map((e) => /* @__PURE__ */ n.jsx(
-    T,
-    {
-      disabled: C,
-      size: "sm",
-      children: /* @__PURE__ */ n.jsxs(
-        F,
-        {
-          sx: { display: "inline-flex", alignItems: "center", gap: "8px" },
-          children: [
-            /* @__PURE__ */ n.jsx(
-              I,
-              {
-                checked: !!m[e.id],
-                onChange: v(e.id),
-                slotProps: {
-                  checkbox: {
-                    sx: {
-                      "&.Mui-checked": {
-                        bgcolor: i,
-                        "--Icon-color": "#FFF"
-                      },
-                      "&:not(.Mui-checked):not(.Mui-disabled):hover": {
-                        bgcolor: h.colorSchemes.light.palette.neutral.outlinedHoverBg
-                      },
-                      bgcolor: h.colorSchemes.light.palette.background.surface
-                    }
-                  }
-                }
-              }
-            ),
-            $(e.label)
-          ]
-        }
-      )
-    },
-    `consent-${e.id}`
-  )) });
-};
-export {
-  z as default
-};

package/packages/common/src/components/Leads/LeadAgreementCheckbox.js

@@ -1,104 +0,0 @@
-import { j as r } from "../../../../../node_modules/react/jsx-runtime.js";
-import { useTheme as c, FormControl as m, Box as d, Checkbox as x, Typography as t, Link as i } from "@mui/joy";
-import { useTranslation as h } from "../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const u = (e) => {
-  const a = c(), { t: o } = h();
-  if (!e.brandingUrls)
-    return /* @__PURE__ */ r.jsx(r.Fragment, {});
-  const { privacyPolicyUrl: l, termsAndConditionsUrl: n } = e.brandingUrls;
-  if (!l && !n)
-    return /* @__PURE__ */ r.jsx(r.Fragment, {});
-  const s = () => l && !n ? /* @__PURE__ */ r.jsxs(t, { children: [
-    o("common.labels.iAgreeToThe"),
-    " ",
-    /* @__PURE__ */ r.jsx(
-      i,
-      {
-        href: l,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        sx: {
-          color: e.primaryColor,
-          textDecorationColor: e.primaryColor
-        },
-        children: o("leads.form.privacyPolicy")
-      }
-    )
-  ] }) : !l && n ? /* @__PURE__ */ r.jsxs(t, { children: [
-    o("common.labels.iAgreeToThe"),
-    " ",
-    /* @__PURE__ */ r.jsx(
-      i,
-      {
-        href: n,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        sx: {
-          color: e.primaryColor,
-          textDecorationColor: e.primaryColor
-        },
-        children: o("leads.form.termsAndConditions")
-      }
-    )
-  ] }) : /* @__PURE__ */ r.jsxs(t, { children: [
-    o("common.labels.iAgreeToThe"),
-    " ",
-    /* @__PURE__ */ r.jsx(
-      i,
-      {
-        href: l,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        sx: {
-          color: e.primaryColor,
-          textDecorationColor: e.primaryColor
-        },
-        children: o("leads.form.privacyPolicy")
-      }
-    ),
-    " ",
-    o("common.labels.andThe"),
-    " ",
-    /* @__PURE__ */ r.jsx(
-      i,
-      {
-        href: n,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        sx: {
-          color: e.primaryColor,
-          textDecorationColor: e.primaryColor
-        },
-        children: o("leads.form.termsAndConditions")
-      }
-    )
-  ] });
-  return /* @__PURE__ */ r.jsx(m, { required: !0, disabled: e.isDisabled, size: "sm", children: /* @__PURE__ */ r.jsxs(d, { sx: { display: "inline-flex", alignItems: "center", gap: "8px" }, children: [
-    /* @__PURE__ */ r.jsx(
-      x,
-      {
-        slotProps: {
-          input: {
-            sx: {}
-          },
-          checkbox: {
-            sx: {
-              "&.Mui-checked": {
-                bgcolor: e.primaryColor,
-                "--Icon-color": "#FFF"
-              },
-              "&:not(.Mui-checked):not(.Mui-disabled):hover": {
-                bgcolor: a.colorSchemes.light.palette.neutral.outlinedHoverBg
-              },
-              bgcolor: a.colorSchemes.light.palette.background.surface
-            }
-          }
-        }
-      }
-    ),
-    s()
-  ] }) });
-};
-export {
-  u as default
-};