fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC6

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

@@ -1,498 +0,0 @@
-import { j as o } from "../../../../../node_modules/react/jsx-runtime.js";
-import { useState as Te, createElement as He } from "react";
-import { useTheme as Ie, Stack as ze, FormControl as h, FormLabel as g, Input as C, Select as K, Option as Q, Box as V, Autocomplete as Ae, AutocompleteOption as We, ListItemDecorator as Oe, ListItemContent as Re, Typography as qe, Textarea as De, Button as T } from "@mui/joy";
-import { useColors as _e, useCornerRadius as Ue, useFontFamily as Ee } from "../../functions/theme.js";
-import { mapContentTypeToConsentEntityType as Me } from "../../functions/helpers.js";
-import "../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import { useLeadForm as Ge } from "../../hooks/useLeadForm.js";
-import Je from "./LeadAgreementCheckbox.js";
-import Ke from "./ConsentsCheckboxes.js";
-import X from "../AlertMessage.js";
-import { useConstantContext as Qe } from "../../hooks/useConstantContext.js";
-import { ConstantsContext as Ve } from "../../providers/ConstantsProvider.js";
-import { useTranslation as Xe } from "../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const Ye = [
-  "fullName",
-  "firstName",
-  "lastName",
-  "email",
-  "gender",
-  "country",
-  "phoneCountryCode",
-  "phoneNumber"
-], x = {
-  phoneContainer: { display: "flex", gap: 1 },
-  countrySelect: { width: "45%" },
-  phoneInput: { width: "100%" },
-  listItemContent: { fontSize: "sm" },
-  submitButton: { mt: 2 }
-}, ho = (y) => {
-  var q, D, _, U, E, M;
-  const [Y, Z] = Te({}), {
-    sdk: H,
-    brandingColors: f,
-    brandingUrls: I,
-    fields: ee = ["fullName", "email"],
-    campaignId: oe = "",
-    campaignName: te = "",
-    contentType: z = "",
-    contentId: L = "",
-    contentName: re = "",
-    formCustomFields: P,
-    onSuccessCta: n,
-    labels: e,
-    syncWithProfile: ne = !1,
-    isSubmittingParticipation: le = !1
-  } = y, i = ee.map((t) => t && t.trim()).filter((t) => Ye.includes(t)), {
-    formData: c,
-    isLoading: ae,
-    isSuccess: s,
-    error: A,
-    handleInputChange: v,
-    handleCustomFieldChange: W,
-    customFieldsData: O,
-    handlePhoneCountryChange: ie,
-    handleCountryChange: se,
-    handleGenderChange: ce,
-    handleSubmit: de,
-    countries: R
-  } = Ge({
-    sdk: H,
-    fields: i,
-    campaignId: oe,
-    campaignName: te,
-    contentType: z,
-    contentId: L,
-    contentName: re,
-    syncWithProfile: ne
-  }), { shadowRootElement: ue } = Qe(Ve), { t: l } = Xe(), d = Ie(), k = _e(), me = Ue(), $ = Ee().primary, pe = k.textPrimary, b = (f == null ? void 0 : f.primaryColor) || ((D = (q = k.palette) == null ? void 0 : q.primary) == null ? void 0 : D.plainColor), u = (U = (_ = k.palette) == null ? void 0 : _.primary) == null ? void 0 : U.onPrimary, N = (f == null ? void 0 : f.primaryColor) || ((M = (E = k.palette) == null ? void 0 : E.primary) == null ? void 0 : M.primaryContainer), w = me.sm, r = {
-    background: {
-      surface: d.colorSchemes.light.palette.background.surface,
-      popup: d.colorSchemes.light.palette.background.popup
-    },
-    neutral: {
-      outlinedBorder: d.colorSchemes.light.palette.neutral.outlinedBorder,
-      outlinedColor: d.colorSchemes.light.palette.neutral.outlinedColor,
-      outlinedHoverBg: d.colorSchemes.light.palette.neutral.outlinedHoverBg,
-      plainActiveBg: d.colorSchemes.light.palette.neutral.plainActiveBg,
-      plainHoverBg: d.colorSchemes.light.palette.neutral.plainHoverBg,
-      plainHoverColor: d.colorSchemes.light.palette.neutral.plainHoverColor
-    }
-  }, he = [
-    { value: "male", label: l("leads.form.genderOptions.male") },
-    { value: "female", label: l("leads.form.genderOptions.female") },
-    { value: "other", label: l("leads.form.genderOptions.other") },
-    { value: "prefer_not_to_say", label: l("leads.form.genderOptions.notSay") }
-  ], m = {
-    color: `${pe} !important`,
-    fontSize: "0.875em"
-  }, p = {
-    fontFamily: $,
-    borderRadius: w,
-    bgcolor: r.background.surface,
-    borderColor: r.neutral.outlinedBorder,
-    color: r.neutral.outlinedColor,
-    fontSize: "1em",
-    lineHeight: "2.25em",
-    "&:hover": {
-      bgcolor: r.neutral.outlinedHoverBg
-    },
-    "&.Mui-disabled": {
-      borderColor: r.neutral.outlinedBorder
-    },
-    "& input:-webkit-autofill": {
-      WebkitBoxShadow: `0 0 0 1000px ${r.background.surface} inset !important`,
-      WebkitTextFillColor: `${r.neutral.outlinedColor} !important`,
-      caretColor: r.neutral.outlinedColor,
-      borderRadius: w
-    },
-    "& input:-webkit-autofill:hover": {
-      WebkitBoxShadow: `0 0 0 1000px ${r.background.surface} inset !important`,
-      WebkitTextFillColor: `${r.neutral.outlinedColor} !important`
-    },
-    "& input:-webkit-autofill:focus": {
-      WebkitBoxShadow: `0 0 0 1000px ${r.background.surface} inset !important`,
-      WebkitTextFillColor: `${r.neutral.outlinedColor} !important`
-    },
-    "& input:-webkit-autofill:active": {
-      WebkitBoxShadow: `0 0 0 1000px ${r.background.surface} inset !important`,
-      WebkitTextFillColor: `${r.neutral.outlinedColor} !important`
-    },
-    "& input:-moz-autofill": {
-      backgroundColor: `${r.background.surface} !important`,
-      color: `${r.neutral.outlinedColor} !important`
-    },
-    "& input:autofill": {
-      backgroundColor: `${r.background.surface} !important`,
-      color: `${r.neutral.outlinedColor} !important`
-    }
-  }, B = {
-    root: {
-      sx: {
-        ...p,
-        "&:hover": { bgcolor: r.neutral.outlinedHoverBg }
-      }
-    },
-    listbox: {
-      container: ue,
-      sx: {
-        zIndex: 10,
-        bgcolor: r.background.popup,
-        border: `1px solid ${r.neutral.outlinedBorder}`,
-        borderRadius: w,
-        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
-      }
-    }
-  }, S = {
-    fontFamily: $,
-    color: `${r.neutral.outlinedColor} !important`,
-    bgcolor: "transparent",
-    "&:hover": {
-      bgcolor: `${r.neutral.plainHoverBg} !important`,
-      color: `${r.neutral.plainHoverColor} !important`
-    },
-    "&.Mui-selected": {
-      bgcolor: `${r.neutral.plainActiveBg} !important`,
-      color: `${r.neutral.outlinedColor} !important`
-    },
-    "&.Mui-selected:hover": {
-      bgcolor: `${r.neutral.plainActiveBg} !important`,
-      color: `${r.neutral.outlinedColor} !important`
-    }
-  }, ge = (e == null ? void 0 : e.fullNameLabel) || l("leads.form.fullName"), xe = (e == null ? void 0 : e.fullNamePlaceholder) || l("leads.form.fullNamePlaceholder"), fe = (e == null ? void 0 : e.firstNameLabel) || l("leads.form.firstName"), be = (e == null ? void 0 : e.firstNamePlaceholder) || l("leads.form.firstNamePlaceholder"), Ce = (e == null ? void 0 : e.lastNameLabel) || l("leads.form.lastName"), ye = (e == null ? void 0 : e.lastNamePlaceholder) || l("leads.form.lastNamePlaceholder"), ve = (e == null ? void 0 : e.emailLabel) || l("leads.form.email"), je = (e == null ? void 0 : e.genderLabel) || l("leads.form.gender"), ke = (e == null ? void 0 : e.genderPlaceholder) || l("leads.form.genderPlaceholder"), Ne = (e == null ? void 0 : e.countryLabel) || l("leads.form.country"), Be = (e == null ? void 0 : e.countryPlaceholder) || l("leads.form.countryPlaceholder"), Le = (e == null ? void 0 : e.phoneNumberLabel) || l("leads.form.phone"), Pe = (e == null ? void 0 : e.phoneNumberPlaceholder) || l("leads.form.phonePlaceholder"), $e = (t) => {
-    const a = (e == null ? void 0 : e.privacyPolicyUrlLabel) || "Privacy Policy", j = (e == null ? void 0 : e.termsAndConditionsUrlLabel) || "Terms and Conditions";
-    return t.replace(/\{\{privacyPolicyUrl\}\}/g, a).replace(/\{\{termsAndConditionsUrl\}\}/g, j);
-  }, we = (t) => {
-    Z(t);
-  }, Se = async (t) => {
-    await de(t);
-    try {
-      const a = (y.consents || []).filter(
-        (j) => Y[j.id]
-      );
-      if (a.length > 0) {
-        const j = a.map((G) => {
-          const F = {
-            consentId: G.id,
-            content: $e(G.label)
-          };
-          L && (F.entityId = L);
-          const J = Me(z);
-          return J && (F.entityType = J), F;
-        });
-        await H.profile.collectConsents(j);
-      }
-    } catch (a) {
-      console.warn("[CollectLead] Failed to collect consents", a);
-    }
-  }, Fe = () => n != null && n.component ? n.component : n != null && n.onClick ? /* @__PURE__ */ o.jsx(
-    T,
-    {
-      size: "lg",
-      loading: le,
-      sx: {
-        ...x.submitButton,
-        bgcolor: b,
-        color: u,
-        ":hover": {
-          bgcolor: N,
-          color: u
-        },
-        fontSize: "1em"
-      },
-      onClick: n.onClick,
-      children: n.defaultLabel
-    }
-  ) : n != null && n.url ? typeof window > "u" ? /* @__PURE__ */ o.jsx(
-    V,
-    {
-      component: "a",
-      href: n.url,
-      target: (n == null ? void 0 : n.target) || "_self",
-      sx: {
-        ...x.submitButton,
-        bgcolor: b,
-        color: u,
-        ":hover": {
-          bgcolor: N,
-          color: u
-        },
-        fontSize: "1em",
-        textDecoration: "none",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: n.defaultLabel
-    }
-  ) : /* @__PURE__ */ o.jsx(
-    T,
-    {
-      size: "lg",
-      sx: {
-        ...x.submitButton,
-        bgcolor: b,
-        color: u,
-        ":hover": {
-          bgcolor: N,
-          color: u
-        },
-        fontSize: "1em"
-      },
-      onClick: () => {
-        (n == null ? void 0 : n.target) === "_blank" ? window.open(n == null ? void 0 : n.url, "_blank") : window.location.href = n == null ? void 0 : n.url;
-      },
-      children: n.defaultLabel
-    }
-  ) : /* @__PURE__ */ o.jsx(o.Fragment, {});
-  return /* @__PURE__ */ o.jsx("form", { onSubmit: Se, children: /* @__PURE__ */ o.jsxs(ze, { spacing: 2, sx: { fontFamily: $ }, children: [
-    i.includes("fullName") && /* @__PURE__ */ o.jsxs(h, { required: !0, disabled: s, children: [
-      /* @__PURE__ */ o.jsx(g, { sx: m, children: ge }),
-      /* @__PURE__ */ o.jsx(
-        C,
-        {
-          value: c.fullName,
-          onChange: v("fullName"),
-          placeholder: xe,
-          sx: p
-        }
-      )
-    ] }),
-    i.includes("firstName") && /* @__PURE__ */ o.jsxs(h, { required: !0, disabled: s, children: [
-      /* @__PURE__ */ o.jsx(g, { sx: m, children: fe }),
-      /* @__PURE__ */ o.jsx(
-        C,
-        {
-          value: c.firstName,
-          onChange: v("firstName"),
-          placeholder: be,
-          sx: p
-        }
-      )
-    ] }),
-    i.includes("lastName") && /* @__PURE__ */ o.jsxs(h, { required: !0, disabled: s, children: [
-      /* @__PURE__ */ o.jsx(g, { sx: m, children: Ce }),
-      /* @__PURE__ */ o.jsx(
-        C,
-        {
-          value: c.lastName,
-          onChange: v("lastName"),
-          placeholder: ye,
-          sx: p
-        }
-      )
-    ] }),
-    i.includes("email") && /* @__PURE__ */ o.jsxs(h, { required: !0, disabled: s, children: [
-      /* @__PURE__ */ o.jsx(g, { sx: m, children: ve }),
-      /* @__PURE__ */ o.jsx(
-        C,
-        {
-          type: "email",
-          value: c.email,
-          onChange: v("email"),
-          placeholder: "your.email@example.com",
-          sx: p
-        }
-      )
-    ] }),
-    i.includes("gender") && /* @__PURE__ */ o.jsxs(h, { disabled: s, children: [
-      /* @__PURE__ */ o.jsx(g, { sx: m, children: je }),
-      /* @__PURE__ */ o.jsx(
-        K,
-        {
-          value: c.gender,
-          onChange: ce,
-          placeholder: ke,
-          slotProps: B,
-          children: he.map((t) => /* @__PURE__ */ o.jsx(
-            Q,
-            {
-              value: t.value,
-              sx: S,
-              children: t.label
-            },
-            t.value
-          ))
-        }
-      )
-    ] }),
-    i.includes("country") && /* @__PURE__ */ o.jsxs(h, { required: !0, disabled: s, children: [
-      /* @__PURE__ */ o.jsx(g, { sx: m, children: Ne }),
-      /* @__PURE__ */ o.jsx(
-        K,
-        {
-          value: c.country,
-          onChange: se,
-          placeholder: Be,
-          slotProps: B,
-          children: R.map((t) => /* @__PURE__ */ o.jsx(
-            Q,
-            {
-              value: t.code,
-              sx: S,
-              children: t.label
-            },
-            `${t.code}-${t.label}`
-          ))
-        }
-      )
-    ] }),
-    (i.includes("phoneCountryCode") || i.includes("phoneNumber")) && /* @__PURE__ */ o.jsxs(h, { required: !0, disabled: s, children: [
-      /* @__PURE__ */ o.jsx(g, { sx: m, children: Le }),
-      /* @__PURE__ */ o.jsxs(V, { sx: x.phoneContainer, children: [
-        i.includes("phoneCountryCode") && /* @__PURE__ */ o.jsx(
-          Ae,
-          {
-            value: c.phoneCountryCode,
-            onChange: ie,
-            slotProps: {
-              input: { autoComplete: "new-phone-country-code" },
-              listbox: B.listbox,
-              root: B.root,
-              clearIndicator: {
-                sx: {
-                  "&:hover": {
-                    bgcolor: r.neutral.plainHoverBg,
-                    color: r.neutral.plainHoverColor
-                  }
-                }
-              },
-              popupIndicator: {
-                sx: {
-                  "&:hover": {
-                    bgcolor: r.neutral.plainHoverBg,
-                    color: r.neutral.plainHoverColor
-                  }
-                }
-              }
-            },
-            sx: x.countrySelect,
-            options: R,
-            autoHighlight: !0,
-            getOptionLabel: (t) => `+${t.phone}`,
-            renderOption: (t, a) => /* @__PURE__ */ He(
-              We,
-              {
-                ...t,
-                key: `autocomplete-${a.code}-${a.label}`,
-                sx: {
-                  ...S,
-                  "&[aria-selected='true']": {
-                    bgcolor: r.neutral.plainActiveBg
-                  }
-                }
-              },
-              /* @__PURE__ */ o.jsx(Oe, { children: /* @__PURE__ */ o.jsx(
-                "img",
-                {
-                  loading: "lazy",
-                  width: "20",
-                  srcSet: `https://flagcdn.com/w40/${a.code.toLowerCase()}.png 2x`,
-                  src: `https://flagcdn.com/w20/${a.code.toLowerCase()}.png`,
-                  alt: ""
-                }
-              ) }),
-              /* @__PURE__ */ o.jsxs(Re, { sx: x.listItemContent, children: [
-                a.label,
-                /* @__PURE__ */ o.jsxs(qe, { level: "body-xs", children: [
-                  "+",
-                  a.phone
-                ] })
-              ] })
-            )
-          }
-        ),
-        i.includes("phoneNumber") && /* @__PURE__ */ o.jsx(
-          C,
-          {
-            value: c.phoneNumber,
-            onChange: v("phoneNumber"),
-            placeholder: Pe,
-            sx: {
-              ...x.phoneInput,
-              ...p
-            }
-          }
-        )
-      ] })
-    ] }),
-    P && P.length > 0 ? P.map((t, a) => /* @__PURE__ */ o.jsxs(
-      h,
-      {
-        disabled: s,
-        required: t.required || !1,
-        children: [
-          /* @__PURE__ */ o.jsx(g, { sx: m, children: t.label }),
-          t.type === "textarea" ? /* @__PURE__ */ o.jsx(
-            De,
-            {
-              value: O[t.key] || "",
-              onChange: W(t.key),
-              placeholder: t.placeholder || "",
-              sx: p,
-              minRows: 3
-            }
-          ) : /* @__PURE__ */ o.jsx(
-            C,
-            {
-              value: O[t.key] || "",
-              onChange: W(t.key),
-              placeholder: t.placeholder,
-              sx: p
-            }
-          )
-        ]
-      },
-      `custom-field-${t.key}-${a}`
-    )) : null,
-    y.consents && y.consents.length > 0 ? /* @__PURE__ */ o.jsx(
-      Ke,
-      {
-        consents: y.consents,
-        isDisabled: s,
-        primaryColor: b,
-        brandingUrls: I,
-        labels: e,
-        onChange: we
-      }
-    ) : /* @__PURE__ */ o.jsx(
-      Je,
-      {
-        primaryColor: b,
-        brandingUrls: I,
-        isDisabled: s
-      }
-    ),
-    A && /* @__PURE__ */ o.jsx(X, { variant: "error", message: l(A) }),
-    s ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-      e != null && e.successTitle || e != null && e.successDescription ? /* @__PURE__ */ o.jsx(
-        X,
-        {
-          variant: "success",
-          title: e == null ? void 0 : e.successTitle,
-          description: e == null ? void 0 : e.successDescription
-        }
-      ) : /* @__PURE__ */ o.jsx(o.Fragment, {}),
-      Fe()
-    ] }) : /* @__PURE__ */ o.jsx(
-      T,
-      {
-        type: "submit",
-        loading: ae,
-        size: "lg",
-        sx: {
-          ...x.submitButton,
-          bgcolor: b,
-          color: u,
-          ":hover": { bgcolor: N, color: u },
-          fontSize: "0.8125em"
-        },
-        children: e == null ? void 0 : e.submitButtonLabel
-      }
-    )
-  ] }) });
-};
-export {
-  ho as default
-};

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

@@ -1,62 +0,0 @@
-import { j as n } from "../../../../node_modules/react/jsx-runtime.js";
-import C from "@emotion/cache";
-import { CacheProvider as p } from "@emotion/react";
-import { Box as x } from "@mui/joy";
-import r from "react";
-import { createPortal as y } from "react-dom";
-import { initializeI18n as E } from "../functions/i18n.js";
-import { WidgetTemplate as w } from "../enums/enums.js";
-import { ContainerProvider as j } from "../providers/ContainerProvider.js";
-import { ConstantsProvider as P } from "../providers/ConstantsProvider.js";
-import v from "../providers/ThemeProvider.js";
-const A = (t) => {
-  var l;
-  const [m, s] = r.useState(!1), [f, h] = r.useState(!1), i = r.useRef(
-    `${t.packageName}-shadow-root-${Math.random().toString(36).substring(2, 11)}`
-  ), o = r.useRef(null), u = r.useRef(null), e = r.useRef(null), a = r.useRef(null);
-  r.useEffect(() => {
-    E(t.language || "en").finally(() => h(!0));
-  }, [t.language]), r.useEffect(() => {
-    if (o.current)
-      return o.current.shadowRoot ? (u.current = o.current.shadowRoot, e.current = u.current.getElementById(
-        i.current
-      ), e.current || (e.current = document.createElement("div"), e.current.id = i.current, u.current.appendChild(e.current))) : (u.current = o.current.attachShadow({ mode: "open" }), e.current = document.createElement("div"), e.current.id = i.current, u.current.appendChild(e.current)), a.current || (a.current = C({
-        key: `${t.packageName}-css`,
-        prepend: !0,
-        container: u.current
-      })), s(!0), () => {
-        s(!1);
-      };
-  }, []);
-  const c = t.themeOptions, d = {
-    ...c,
-    mode: t.template === w.OVERLAY ? "dark" : c == null ? void 0 : c.mode
-  }, R = /* @__PURE__ */ n.jsx(x, { ref: o }), g = m && f && e.current && a.current ? y(
-    /* @__PURE__ */ n.jsx(p, { value: a.current, children: /* @__PURE__ */ n.jsx(j, { containerRef: o, children: /* @__PURE__ */ n.jsx(
-      v,
-      {
-        customTheme: d,
-        mode: d == null ? void 0 : d.mode,
-        shadowRootElement: e.current,
-        children: /* @__PURE__ */ n.jsx(
-          P,
-          {
-            shadowRootElement: e.current,
-            leadPhoneCountryCode: ((l = t.leads) == null ? void 0 : l.phoneCountryCode) || null,
-            language: t.language,
-            optionsLayout: null,
-            children: t.children
-          }
-        )
-      }
-    ) }) }),
-    e.current
-  ) : null;
-  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    R,
-    g
-  ] });
-};
-export {
-  A as default
-};