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

package/packages/common/src/functions/theme.js

@@ -0,0 +1,301 @@
+import { useThemeMode as V } from "../hooks/useThemeMode.js";
+import { WidgetTemplate as M } from "../enums/enums.js";
+import { useContainerContext as i } from "../providers/ContainerProvider.js";
+import g from "../../../../node_modules/@mui/joy/styles/extendTheme.js";
+import { useTheme as o } from "../../../../node_modules/@mui/joy/styles/ThemeProvider.js";
+import c from "../../../../node_modules/@mui/material/node_modules/@mui/system/esm/useMediaQuery/useMediaQuery.js";
+const z = {
+  values: {
+    xs: 0,
+    sm: 444,
+    md: 600,
+    lg: 900,
+    xl: 1200,
+    xxl: 1536
+  }
+}, L = {
+  "3xs": "2px",
+  "2xs": "4px",
+  xs: "8px",
+  sm: "12px",
+  md: "16px",
+  lg: "24px",
+  xl: "32px",
+  "2xl": "40px",
+  "3xl": "48px"
+}, n = {
+  light: {
+    palette: {
+      success: {
+        plainColor: "#4CAF50",
+        outlinedBorder: "#4CAF50",
+        softBg: "#E3FBE3"
+      },
+      danger: {
+        softBg: "#FEE4E2",
+        plainColor: "#F44336",
+        outlinedBorder: "#F44336"
+      },
+      primary: {
+        plainColor: "#1A77D2",
+        outlinedBorder: "#1A77D2",
+        onPrimary: "#FAFAFA",
+        primaryContainer: "#2397F3"
+      },
+      warning: {
+        softBg: "#FEF0C7",
+        plainColor: "#DC6803"
+      }
+    },
+    textPrimary: "#212121",
+    textSecondary: "#212121",
+    textColor: "#212121",
+    textDisabled: "#212121",
+    surface: "#FFFFFF",
+    onSurface: "#F5F5F5",
+    surfaceVariant: "#EEEEEE",
+    surfaceTintDim: "#212121",
+    surfaceInverse: "#F5F5F5",
+    outlineEnabledBorder: "#E0E0E0",
+    secondaryContainer: "#BDBDBD"
+  },
+  dark: {
+    palette: {
+      primary: {
+        plainColor: "#1A77D2",
+        outlinedBorder: "#1A77D2",
+        onPrimary: "#FAFAFA",
+        primaryContainer: "#2397F3"
+      },
+      success: {
+        plainColor: "#4CAF50",
+        outlinedBorder: "#4CAF50",
+        softBg: "#042F04"
+      },
+      danger: {
+        softBg: "#430A0A",
+        plainColor: "#F44336",
+        outlinedBorder: "#F44336"
+      },
+      warning: {
+        softBg: "#FEF0C7",
+        plainColor: "#DC6803"
+      }
+    },
+    textPrimary: "#FAFAFA",
+    textSecondary: "#FAFAFA",
+    textColor: "#FAFAFA",
+    textDisabled: "#FAFAFA",
+    surface: "#424242",
+    onSurface: "#212121",
+    surfaceVariant: "#616161",
+    surfaceTintDim: "#FAFAFA",
+    surfaceInverse: "#FAFAFA",
+    outlineEnabledBorder: "#757575",
+    secondaryContainer: "#757575"
+  }
+}, N = {
+  light: {
+    primary: "Ubuntu, sans-serif",
+    secondary: "Roboto, sans-serif"
+  },
+  dark: {
+    primary: "Ubuntu, sans-serif",
+    secondary: "Roboto, sans-serif"
+  }
+}, K = {
+  light: {
+    none: "0px",
+    "2xs": "2px",
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px",
+    "2xl": "232px",
+    full: "1000px"
+  },
+  dark: {
+    none: "0px",
+    "2xs": "2px",
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px",
+    "2xl": "232px",
+    full: "1000px"
+  }
+}, U = {
+  light: {
+    size: "1px"
+  },
+  dark: {
+    size: "2px"
+  }
+}, m = {
+  light: {
+    standard: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)",
+    split: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)"
+  },
+  dark: {
+    standard: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)",
+    split: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)",
+    overlay: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)"
+  }
+}, Q = (e) => {
+  var t, d, s, h, F, u, x, p, k, y, f, S, B, A, C, b, T, D, E, v, w, R, j, W, G, P, I;
+  const r = g(), a = {
+    // Only add custom properties, don't override the entire palette
+    colorSchemes: {
+      light: {
+        palette: {
+          // Merge with existing palette
+          success: {
+            ...r.colorSchemes.light.palette.success,
+            ...((s = (d = (t = e == null ? void 0 : e.colorSchemes) == null ? void 0 : t.light) == null ? void 0 : d.palette) == null ? void 0 : s.success) || n.light.palette.success
+          },
+          danger: {
+            ...r.colorSchemes.light.palette.danger,
+            ...((u = (F = (h = e == null ? void 0 : e.colorSchemes) == null ? void 0 : h.light) == null ? void 0 : F.palette) == null ? void 0 : u.danger) || n.light.palette.danger
+          },
+          primary: {
+            ...r.colorSchemes.light.palette.primary,
+            ...((k = (p = (x = e == null ? void 0 : e.colorSchemes) == null ? void 0 : x.light) == null ? void 0 : p.palette) == null ? void 0 : k.primary) || n.light.palette.primary
+          },
+          warning: {
+            ...r.colorSchemes.light.palette.warning,
+            ...((S = (f = (y = e == null ? void 0 : e.colorSchemes) == null ? void 0 : y.light) == null ? void 0 : f.palette) == null ? void 0 : S.warning) || n.light.palette.warning
+          }
+        },
+        // Add custom properties
+        ...((B = e == null ? void 0 : e.colorSchemes) == null ? void 0 : B.light) || n.light
+      },
+      dark: {
+        palette: {
+          primary: {
+            ...r.colorSchemes.dark.palette.primary,
+            ...((b = (C = (A = e == null ? void 0 : e.colorSchemes) == null ? void 0 : A.dark) == null ? void 0 : C.palette) == null ? void 0 : b.primary) || n.dark.palette.primary
+          },
+          success: {
+            ...r.colorSchemes.dark.palette.success,
+            ...((E = (D = (T = e == null ? void 0 : e.colorSchemes) == null ? void 0 : T.dark) == null ? void 0 : D.palette) == null ? void 0 : E.success) || n.dark.palette.success
+          },
+          danger: {
+            ...r.colorSchemes.dark.palette.danger,
+            ...((R = (w = (v = e == null ? void 0 : e.colorSchemes) == null ? void 0 : v.dark) == null ? void 0 : w.palette) == null ? void 0 : R.danger) || n.dark.palette.danger
+          },
+          warning: {
+            ...r.colorSchemes.dark.palette.warning,
+            ...((G = (W = (j = e == null ? void 0 : e.colorSchemes) == null ? void 0 : j.dark) == null ? void 0 : W.palette) == null ? void 0 : G.warning) || n.dark.palette.warning
+          }
+        },
+        // Add custom properties
+        ...((P = e == null ? void 0 : e.colorSchemes) == null ? void 0 : P.dark) || n.dark
+      }
+    },
+    breakpoints: {
+      values: {
+        ...r.breakpoints.values,
+        ...((I = e == null ? void 0 : e.customBreakpoints) == null ? void 0 : I.values) || z.values
+      }
+    },
+    // Add other custom properties as needed
+    ...e && {
+      spacingScale: e.spacingScale || L,
+      customFontFamily: e.customFontFamily || N,
+      customRadius: e.customRadius || K,
+      border: e.border || U,
+      imageBackgroundGradient: e.imageBackgroundGradient || m,
+      customBreakpoints: e.customBreakpoints || z
+    }
+  };
+  return g(a);
+}, $ = (e) => {
+  const r = (e == null ? void 0 : e.mode) || "light", a = (e == null ? void 0 : e.modeStorageKey) || "theme-mode", t = Q(e);
+  return g({
+    ...t,
+    mode: r,
+    modeStorageKey: a,
+    // Ensure Joy UI respects the provided mode
+    cssVarPrefix: "joy",
+    colorSchemeSelector: 'data-joy-color-scheme="%s"'
+  });
+}, q = () => o().spacingScale, O = (e) => {
+  const r = q();
+  return r ? r[e] : "16px";
+}, ee = () => {
+  const e = o(), { theme: r } = l(), { containerWidth: a, isContainerDetected: t } = i();
+  return t && a > 0 ? a < r.customBreakpoints.values.sm : c(
+    e.breakpoints.down(r.customBreakpoints.values.sm)
+  );
+}, re = () => {
+  const e = o(), { theme: r } = l(), { containerWidth: a, isContainerDetected: t } = i();
+  return t && a > 0 ? a < r.customBreakpoints.values.md : c(
+    e.breakpoints.down(r.customBreakpoints.values.md)
+  );
+}, ae = () => {
+  const e = o(), { theme: r } = l(), { containerWidth: a, isContainerDetected: t } = i();
+  return t && a > 0 ? a < r.customBreakpoints.values.lg : c(
+    e.breakpoints.down(r.customBreakpoints.values.lg)
+  );
+}, te = () => {
+  const e = o(), { theme: r } = l(), { containerWidth: a, isContainerDetected: t } = i();
+  return t && a > 0 ? a >= r.customBreakpoints.values.md && a < r.customBreakpoints.values.lg : c(
+    e.breakpoints.between(
+      r.customBreakpoints.values.md,
+      r.customBreakpoints.values.lg
+    )
+  );
+}, ne = () => {
+  const e = o(), { theme: r } = l(), { containerWidth: a, isContainerDetected: t } = i();
+  return t && a > 0 ? a >= r.customBreakpoints.values.lg : c(
+    e.breakpoints.up(r.customBreakpoints.values.lg)
+  );
+}, le = () => o(), l = () => {
+  const e = o(), { mode: r } = V(
+    e.mode || "light",
+    e.modeStorageKey || "theme-mode"
+  );
+  return { theme: e, mode: r };
+}, oe = () => {
+  var a, t, d, s;
+  const { theme: e, mode: r } = l();
+  return {
+    primary: ((t = (a = e.customFontFamily) == null ? void 0 : a[r]) == null ? void 0 : t.primary) || "Ubuntu, sans-serif",
+    secondary: ((s = (d = e.customFontFamily) == null ? void 0 : d[r]) == null ? void 0 : s.secondary) || "Roboto, sans-serif"
+  };
+}, de = () => {
+  var a;
+  const { theme: e, mode: r } = l();
+  return ((a = e.customRadius) == null ? void 0 : a[r]) || K[r];
+}, se = () => {
+  var a;
+  const { theme: e, mode: r } = l();
+  return ((a = e.colorSchemes) == null ? void 0 : a[r]) || n[r];
+}, ie = () => {
+  var a;
+  const { theme: e, mode: r } = l();
+  return ((a = e.border) == null ? void 0 : a[r]) || U[r];
+}, ce = (e) => {
+  const { theme: r, mode: a } = l();
+  return e === M.STANDARD || e === M.SPLIT ? r.imageBackgroundGradient[a][e] || m[a][e] : r.imageBackgroundGradient.dark.overlay || m.dark.overlay;
+};
+export {
+  Q as createCustomTheme,
+  $ as createEnhancedTheme,
+  O as getSpacing,
+  ne as isDesktop,
+  ee as isExtraSmall,
+  ae as isLarge,
+  re as isMobile,
+  te as isTablet,
+  ie as useBorderSize,
+  se as useColors,
+  de as useCornerRadius,
+  oe as useFontFamily,
+  ce as useImageBackgroundGradient,
+  le as useInternalTheme,
+  q as useSpacingScale,
+  l as useThemeWithMode
+};

package/packages/common/src/hooks/useConstantContext.js

@@ -0,0 +1,10 @@
+import { useContext as e } from "react";
+function r(o) {
+  const t = e(o);
+  if (t === void 0)
+    throw new Error("Context was used outside of its Provider");
+  return t;
+}
+export {
+  r as useConstantContext
+};

package/packages/common/src/hooks/useImageUrl.js

@@ -0,0 +1,8 @@
+import { isMobile as r } from "../functions/theme.js";
+const t = (l) => {
+  const n = r();
+  return l ? n ? l.mobile || l.main || null : l.main || null : null;
+};
+export {
+  t as useImageUrl
+};

package/packages/common/src/hooks/useImageVariant.js

@@ -0,0 +1,11 @@
+import { WidgetTemplate as l } from "../enums/enums.js";
+import { useImageUrl as o } from "./useImageUrl.js";
+const t = (m, a) => {
+  var r;
+  const i = o(m.images);
+  let e = null;
+  return a !== l.OVERLAY ? e = i : e = ((r = m.images) == null ? void 0 : r.cover) || "", e || (e = m.imagePlaceholder), e;
+};
+export {
+  t as useImageVariant
+};

package/packages/common/src/hooks/useLeadForm.js

@@ -0,0 +1,129 @@
+import { useState as m, useEffect as v } from "react";
+import { ConstantsContext as z } from "../providers/ConstantsProvider.js";
+import { useConstantContext as A } from "./useConstantContext.js";
+import { countries as H } from "../constants/constants.js";
+import { getDefaultCountryByCode as p, getDefaultCountryByLanguage as y, getCountryByCode as J } from "../functions/helpers.js";
+function X(g) {
+  const {
+    sdk: d,
+    fields: r = ["fullName", "email"],
+    campaignId: b = "",
+    campaignName: F = "",
+    contentType: D = "",
+    contentId: P = "",
+    contentName: w = "",
+    syncWithProfile: I = !1
+  } = g, { leadPhoneCountryCode: i, language: f } = A(z), [e, s] = m({
+    firstName: "",
+    lastName: "",
+    fullName: "",
+    email: "",
+    gender: "",
+    country: "",
+    phoneCountryCode: i ? p(i) : y(f || "en"),
+    phoneNumber: "",
+    customFields: {}
+  });
+  v(() => {
+    const t = i ? p(i) : y(f || "en");
+    s((n) => !n.phoneNumber || !n.phoneCountryCode ? { ...n, phoneCountryCode: t } : n);
+  }, [i, f]);
+  const [N, L] = m({}), [E, h] = m(!1), [S, x] = m(!1), [B, C] = m(null), O = () => C(null), _ = (t) => (n) => {
+    s((o) => ({
+      ...o,
+      [t]: n.target.value
+    }));
+  }, j = (t) => (n) => {
+    const o = n.target.value;
+    L((l) => ({ ...l, [t]: o }));
+  }, G = (t, n) => {
+    s((o) => ({
+      ...o,
+      phoneCountryCode: n
+    }));
+  }, T = (t, n) => {
+    s((o) => ({
+      ...o,
+      country: n || ""
+    }));
+  }, W = (t, n) => {
+    s((o) => ({
+      ...o,
+      gender: n || ""
+    }));
+  }, q = async () => {
+    if (I)
+      try {
+        const t = d.profile.getOwn();
+        if (e.fullName && r.includes("fullName") ? t.setName(e.fullName.trim()) : e.firstName && r.includes("firstName") && e.lastName && r.includes("lastName") ? t.setName(
+          e.firstName.trim() + " " + e.lastName.trim()
+        ) : e.firstName && r.includes("firstName") ? t.setName(e.firstName.trim()) : e.lastName && r.includes("lastName") && t.setName(e.lastName.trim()), e.email && r.includes("email") && t.setEmail(e.email.trim()), e.gender && r.includes("gender") && t.setGender(e.gender), e.country && r.includes("country")) {
+          const n = await d.profile.getCountries(), o = J(e.country), l = n.find((c) => c.name === (o == null ? void 0 : o.label));
+          l && t.setCountry(l.id);
+        }
+        e.phoneCountryCode && r.includes("phoneCountryCode") && t.setPhoneCountryCode(
+          "+" + e.phoneCountryCode.phone
+        ), e.phoneNumber && r.includes("phoneNumber") && t.setPhoneNumber(e.phoneNumber.trim()), await t.update();
+      } catch (t) {
+        console.warn("[LeadForm] Failed to sync profile data:", t);
+      }
+  };
+  return {
+    formData: e,
+    setFormData: s,
+    isLoading: E,
+    isSuccess: S,
+    error: B,
+    clearError: O,
+    handleInputChange: _,
+    handleCustomFieldChange: j,
+    customFieldsData: N,
+    handlePhoneCountryChange: G,
+    handleCountryChange: T,
+    handleGenderChange: W,
+    handleSubmit: async (t) => {
+      var c;
+      t && t.preventDefault(), C(null);
+      const n = {
+        firstName: e.firstName,
+        lastName: e.lastName,
+        fullName: e.fullName,
+        email: e.email,
+        gender: e.gender,
+        country: e.country,
+        phoneCountryCode: "+" + (((c = e.phoneCountryCode) == null ? void 0 : c.phone) ?? ""),
+        phoneNumber: e.phoneNumber,
+        campaignId: b,
+        campaignName: F,
+        contentType: D,
+        contentId: P,
+        contentName: w,
+        customFields: N
+      }, o = [
+        "firstName",
+        "lastName",
+        "fullName",
+        "email",
+        "gender",
+        "country",
+        "phoneCountryCode",
+        "phoneNumber",
+        "customFields"
+      ], l = Object.fromEntries(
+        Object.entries(n).map(([a, u]) => o.includes(a) ? a === "customFields" ? [a, u] : r.includes(a) && u !== "" && u !== null ? [a, u] : [a, null] : [a, u])
+      );
+      h(!0);
+      try {
+        await d.profile.collectLead(l), await q(), x(!0);
+      } catch {
+        C("leads.form.error");
+      } finally {
+        h(!1);
+      }
+    },
+    countries: H
+  };
+}
+export {
+  X as useLeadForm
+};

package/packages/common/src/hooks/useThemeMode.js

@@ -0,0 +1,30 @@
+import { useState as m, useCallback as f, useEffect as h } from "react";
+import { useColorScheme as w } from "../../../../node_modules/@mui/joy/styles/CssVarsProvider.js";
+const k = (d, r = "theme-mode") => {
+  const [l, u] = m(d), [o, c] = m(d), { mode: a, setMode: t } = w(), n = a || o, s = f(
+    (e) => {
+      c(e), t && t(e), typeof window < "u" && localStorage.setItem(r, e);
+    },
+    [t, r]
+  ), M = f(() => {
+    s(n === "light" ? "dark" : "light");
+  }, [n, s]);
+  return h(() => {
+    if (typeof window < "u" && window.matchMedia) {
+      const e = window.matchMedia("(prefers-color-scheme: dark)"), i = (g) => {
+        u(g.matches ? "dark" : "light");
+      };
+      return e.addEventListener("change", i), () => e.removeEventListener("change", i);
+    }
+  }, []), h(() => {
+    t && a !== o && (t(o), c(o));
+  }, [t]), {
+    mode: n,
+    toggleMode: M,
+    setMode: s,
+    systemPreference: l
+  };
+};
+export {
+  k as useThemeMode
+};