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

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

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

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

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

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

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