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

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

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

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