@abyss-project/commons-front-core 13.3.0 → 14.0.0

package/dist/CookieConsentSettings-DyJGEnVA.js

@@ -0,0 +1,505 @@
+import { jsxs as g, jsx as a, Fragment as P } from "react/jsx-runtime";
+import { useState as y, useCallback as p, useEffect as T, useId as h, useRef as Q, createContext as X, useContext as F, useMemo as Z } from "react";
+import I from "@mui/material/Button";
+import H from "@mui/material/Switch";
+import { styled as d } from "@mui/material/styles";
+import { p as o, h as ee, d as D, D as O, a as $, t as V, u as A, S as Y, M as te, b as ne } from "./Surface-B_J_I_1i.js";
+import { useQuery as ie, useMutation as oe } from "@tanstack/react-query";
+import { AbyssCore as W } from "@abyss-project/main";
+import se from "@mui/material/Link";
+const b = "abyssCookieConsent", K = 365, ae = K * 24 * 60 * 60, ce = () => typeof window > "u" ? !1 : window.location.protocol === "https:", U = (e, t) => {
+  const n = [
+    "Path=/",
+    `Max-Age=${t}`,
+    "SameSite=Lax"
+  ];
+  return e.domain && n.push(`Domain=${e.domain}`), ce() && n.push("Secure"), n.join("; ");
+}, re = () => {
+  if (typeof document > "u")
+    return null;
+  const e = document.cookie.split(";").map((n) => n.trim()).find((n) => n.startsWith(`${b}=`));
+  if (!e)
+    return null;
+  const t = e.slice(b.length + 1);
+  try {
+    const n = atob(decodeURIComponent(t)), i = JSON.parse(n);
+    return typeof i.a != "boolean" || typeof i.m != "boolean" || typeof i.d != "string" || typeof i.v != "string" ? null : i;
+  } catch {
+    return null;
+  }
+}, L = (e, t = {}) => {
+  if (typeof document > "u")
+    return;
+  const n = btoa(JSON.stringify(e));
+  document.cookie = `${b}=${n}; ${U(
+    t,
+    ae
+  )}`;
+}, de = (e = {}) => {
+  typeof document > "u" || (document.cookie = `${b}=; ${U(e, 0)}`);
+};
+var M = /* @__PURE__ */ ((e) => (e.NOOP = "noop", e.ADOPT_DB = "adopt-db", e.PUSH_COOKIE = "push-cookie", e))(M || {});
+const j = (e) => ({
+  essentials: !0,
+  analytics: e.analytics,
+  marketing: e.marketing,
+  decidedAt: typeof e.decidedAt == "string" ? e.decidedAt : new Date(e.decidedAt).toISOString(),
+  consentVersion: e.consentVersion
+}), le = (e, t) => {
+  if (!e && !t)
+    return { action: "noop", value: null };
+  if (!e && t)
+    return { action: "adopt-db", value: j(t) };
+  if (e && !t)
+    return { action: "push-cookie", value: e };
+  const n = new Date(e.decidedAt).getTime(), i = new Date(
+    typeof t.decidedAt == "string" ? t.decidedAt : t.decidedAt.toISOString()
+  ).getTime();
+  return i > n ? { action: "adopt-db", value: j(t) } : n > i ? { action: "push-cookie", value: e } : { action: "noop", value: e };
+}, ue = K * 24 * 60 * 60 * 1e3, fe = (e) => ({
+  essentials: !0,
+  analytics: e.a,
+  marketing: e.m,
+  decidedAt: e.d,
+  consentVersion: e.v
+}), N = (e) => ({
+  a: e.analytics,
+  m: e.marketing,
+  d: e.decidedAt,
+  v: e.consentVersion
+}), ge = (e, t, n) => {
+  if (n.v !== t)
+    return !1;
+  const i = new Date(e).getTime();
+  return Number.isNaN(i) ? !1 : Date.now() - i < ue;
+}, me = (e) => {
+  const t = re();
+  return !t || !ge(t.d, e, t) ? null : fe(t);
+}, ye = (e) => {
+  const [t, n] = y(
+    () => me(e.consentVersion)
+  ), i = ie({
+    queryKey: ["cookie-consent", "me"],
+    queryFn: async () => (await W.sdk.user.cookieConsent.get()).data.consent,
+    enabled: e.isAuthenticated,
+    retry: !1,
+    refetchOnWindowFocus: !1
+  }), c = oe({
+    mutationFn: async (r) => (await W.sdk.user.cookieConsent.upsert({
+      analytics: r.analytics,
+      marketing: r.marketing,
+      decidedAt: r.decidedAt,
+      consentVersion: r.consentVersion
+    })).data.consent
+  }), s = p(
+    (r) => {
+      L(N(r), { domain: e.domain }), n(r), e.isAuthenticated && c.mutate(r);
+    },
+    [e.domain, e.isAuthenticated, c]
+  );
+  T(() => {
+    if (!e.isAuthenticated || i.isLoading || i.isError)
+      return;
+    const r = le(t, i.data ?? null);
+    r.action === M.ADOPT_DB && r.value ? (L(N(r.value), { domain: e.domain }), n(r.value)) : r.action === M.PUSH_COOKIE && r.value && c.mutate(r.value);
+  }, [e.isAuthenticated, i.isLoading, i.isError, i.data]);
+  const l = p(() => {
+    s({
+      essentials: !0,
+      analytics: !0,
+      marketing: !0,
+      decidedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      consentVersion: e.consentVersion
+    });
+  }, [e.consentVersion, s]), u = p(() => {
+    s({
+      essentials: !0,
+      analytics: !1,
+      marketing: !1,
+      decidedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      consentVersion: e.consentVersion
+    });
+  }, [e.consentVersion, s]), f = p(
+    (r) => {
+      s({
+        essentials: !0,
+        analytics: r.analytics,
+        marketing: r.marketing,
+        decidedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        consentVersion: e.consentVersion
+      });
+    },
+    [e.consentVersion, s]
+  ), k = p(() => {
+    de({ domain: e.domain }), n(null);
+  }, [e.domain]);
+  return {
+    consent: t,
+    isResolved: t !== null,
+    acceptAll: l,
+    rejectAll: u,
+    save: f,
+    reset: k
+  };
+}, pe = "https://abyss-project.fr/cgu", he = d("div")(({ theme: e }) => {
+  const { tokens: t, space: n } = e.design;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: o(n[6]),
+    minWidth: 0,
+    paddingTop: o(n[3]),
+    paddingBottom: o(n[3]),
+    "& + &": { borderTop: ee(t["border.subtle"]) },
+    [D.down(O.Tablet)]: {
+      flexDirection: "column",
+      alignItems: "stretch",
+      gap: o(n[3])
+    }
+  };
+}), ke = d("div")(({ theme: e }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: o(e.design.space[1]),
+  flex: "1 1 auto",
+  minWidth: 0,
+  overflowWrap: "anywhere"
+})), ve = d("label")(({ theme: e }) => ({
+  fontSize: o(e.design.typeScale.body),
+  fontWeight: $.medium,
+  color: e.design.tokens["text.primary"]
+})), Ce = d("div")(({ theme: e }) => ({
+  fontSize: o(e.design.typeScale.small),
+  lineHeight: e.typography.body2.lineHeight,
+  color: e.design.tokens["text.secondary"]
+})), be = d("div")({
+  display: "flex",
+  flex: "none",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  maxWidth: "100%",
+  [D.down(O.Tablet)]: {
+    justifyContent: "flex-start"
+  }
+});
+function q({
+  label: e,
+  description: t,
+  control: n,
+  htmlFor: i
+}) {
+  const c = h(), s = `${c}-label`, l = t !== void 0 ? `${c}-description` : void 0;
+  return /* @__PURE__ */ g(
+    he,
+    {
+      role: "group",
+      "aria-labelledby": s,
+      "aria-describedby": l,
+      children: [
+        /* @__PURE__ */ g(ke, { children: [
+          /* @__PURE__ */ a(
+            ve,
+            {
+              id: s,
+              htmlFor: i,
+              as: i === void 0 ? "span" : "label",
+              children: e
+            }
+          ),
+          t !== void 0 && /* @__PURE__ */ a(Ce, { id: l, children: t })
+        ] }),
+        /* @__PURE__ */ a(be, { children: n })
+      ]
+    }
+  );
+}
+const B = "--abyss-toast-clearance", C = d(I)(({ theme: e }) => V(e)), Ae = d("div")(({ theme: e }) => {
+  const { space: t, elevations: n, durations: i, easings: c } = e.design;
+  return {
+    position: "fixed",
+    zIndex: e.zIndex.snackbar,
+    bottom: o(t[6]),
+    right: o(t[6]),
+    width: 420,
+    maxWidth: `calc(100vw - ${o(2 * t[6])})`,
+    "& > *": {
+      boxShadow: n.overlay,
+      animation: `cookie-consent-in ${i.slow}ms ${c.sheet}`
+    },
+    "@keyframes cookie-consent-in": {
+      from: { opacity: 0, transform: `translateY(${o(t[3])})` },
+      to: { opacity: 1, transform: "translateY(0)" }
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+      "& > *": { animation: "none" }
+    },
+    [D.down(O.Tablet)]: {
+      bottom: o(t[3]),
+      right: o(t[3]),
+      left: o(t[3]),
+      width: "auto",
+      maxWidth: "none"
+    }
+  };
+}), Se = d("h2")(({ theme: e }) => ({
+  margin: 0,
+  fontSize: o(e.design.typeScale.sectionTitle),
+  fontWeight: $.semibold,
+  color: e.design.tokens["text.primary"]
+})), we = d("p")(({ theme: e }) => ({
+  margin: `${o(e.design.space[2])} 0 0`,
+  fontSize: o(e.design.typeScale.body),
+  color: e.design.tokens["text.secondary"]
+})), xe = d(se)(({ theme: e }) => ({
+  alignSelf: "flex-start",
+  marginTop: o(e.design.space[3]),
+  fontSize: o(e.design.typeScale.body),
+  color: e.design.tokens["accent.text"]
+})), Re = d("div")(({ theme: e }) => ({
+  display: "flex",
+  gap: o(e.design.space[2]),
+  marginTop: o(e.design.space[4]),
+  "& > *": { flex: 1 }
+})), Me = d(I)(({ theme: e }) => ({
+  ...V(e),
+  marginTop: o(e.design.space[2]),
+  color: e.design.tokens["text.secondary"]
+})), Te = d("span")(({ theme: e }) => ({
+  fontSize: o(e.design.typeScale.small),
+  color: e.design.tokens["text.secondary"],
+  whiteSpace: "nowrap"
+})), Ie = d("div")(({ theme: e }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: o(e.design.space[2])
+}));
+function x({
+  category: e,
+  checked: t,
+  locked: n = !1,
+  onChange: i
+}) {
+  const c = A(), s = h();
+  return /* @__PURE__ */ a(
+    q,
+    {
+      label: c.formatRichMessage({
+        id: `cookies.category.${e}.title`
+      }),
+      description: c.formatRichMessage({
+        id: `cookies.category.${e}.description`
+      }),
+      htmlFor: s,
+      control: /* @__PURE__ */ g(Ie, { children: [
+        n && /* @__PURE__ */ a(Te, { children: c.formatRichMessage({
+          id: "cookies.category.essentials.always-on"
+        }) }),
+        /* @__PURE__ */ a(
+          H,
+          {
+            id: s,
+            checked: t,
+            disabled: n,
+            onChange: (l, u) => i == null ? void 0 : i(u)
+          }
+        )
+      ] })
+    }
+  );
+}
+function De({ api: e }) {
+  const t = A(), { acceptAll: n, rejectAll: i, save: c } = e, s = h(), l = h(), [u, f] = y(!1), [k, r] = y(!1), [S, G] = y(!1), z = Q(null);
+  T(() => {
+    const w = z.current;
+    if (w === null)
+      return;
+    const _ = document.documentElement, v = () => {
+      _.style.setProperty(
+        B,
+        o(window.innerHeight - w.getBoundingClientRect().top)
+      );
+    };
+    v();
+    const m = typeof ResizeObserver > "u" ? null : new ResizeObserver(v);
+    return m == null || m.observe(w), window.addEventListener("resize", v), () => {
+      m == null || m.disconnect(), window.removeEventListener("resize", v), _.style.removeProperty(B);
+    };
+  }, [u]);
+  const J = () => {
+    c({ analytics: k, marketing: S }), f(!1);
+  };
+  return /* @__PURE__ */ g(P, { children: [
+    !u && /* @__PURE__ */ a(Ae, { ref: z, children: /* @__PURE__ */ g(
+      Y,
+      {
+        padding: 4,
+        role: "dialog",
+        "aria-modal": !1,
+        "aria-labelledby": s,
+        "aria-describedby": l,
+        children: [
+          /* @__PURE__ */ a(Se, { id: s, children: t.formatRichMessage({ id: "cookies.banner.title" }) }),
+          /* @__PURE__ */ a(we, { id: l, children: t.formatRichMessage({ id: "cookies.banner.description" }) }),
+          /* @__PURE__ */ a(
+            xe,
+            {
+              href: pe,
+              rel: "noreferrer",
+              underline: "hover",
+              children: t.formatRichMessage({ id: "cookies.banner.privacy-link" })
+            }
+          ),
+          /* @__PURE__ */ g(Re, { children: [
+            /* @__PURE__ */ a(C, { variant: "contained", onClick: n, children: t.formatRichMessage({ id: "cookies.action.accept-all" }) }),
+            /* @__PURE__ */ a(C, { variant: "outlined", onClick: i, children: t.formatRichMessage({ id: "cookies.action.reject-all" }) })
+          ] }),
+          /* @__PURE__ */ a(
+            Me,
+            {
+              variant: "text",
+              size: "small",
+              fullWidth: !0,
+              onClick: () => f(!0),
+              children: t.formatRichMessage({ id: "cookies.action.configure" })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ g(
+      te,
+      {
+        open: u,
+        onClose: () => f(!1),
+        size: ne.Small,
+        title: t.formatRichMessage({ id: "cookies.configure.title" }),
+        actions: /* @__PURE__ */ g(P, { children: [
+          /* @__PURE__ */ a(C, { variant: "text", onClick: () => f(!1), children: t.formatRichMessage({ id: "cookies.action.cancel" }) }),
+          /* @__PURE__ */ a(C, { variant: "contained", onClick: J, children: t.formatRichMessage({ id: "cookies.action.save" }) })
+        ] }),
+        children: [
+          /* @__PURE__ */ a(x, { category: "essentials", checked: !0, locked: !0 }),
+          /* @__PURE__ */ a(
+            x,
+            {
+              category: "analytics",
+              checked: k,
+              onChange: r
+            }
+          ),
+          /* @__PURE__ */ a(
+            x,
+            {
+              category: "marketing",
+              checked: S,
+              onChange: G
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+const E = X(null), Oe = () => {
+  const e = F(E);
+  if (!e)
+    throw new Error(
+      "useAbyssCookieConsent must be used inside <AbyssCookieConsentProvider>"
+    );
+  return e;
+}, He = () => F(E), Ye = ({ children: e, consentVersion: t, isAuthenticated: n, domain: i, renderBanner: c }) => {
+  const s = ye({ isAuthenticated: n, consentVersion: t, domain: i }), l = Z(() => s.isResolved ? null : c ? c(s) : /* @__PURE__ */ a(De, { api: s }), [s, c]);
+  return /* @__PURE__ */ g(E.Provider, { value: s, children: [
+    e,
+    l
+  ] });
+}, $e = d(I)(({ theme: e }) => V(e)), Ve = d("h2")(({ theme: e }) => ({
+  margin: `0 0 ${o(e.design.space[2])}`,
+  fontSize: o(e.design.typeScale.sectionTitle),
+  fontWeight: $.semibold,
+  color: e.design.tokens["text.primary"]
+})), Ee = d("div")(({ theme: e }) => ({
+  display: "flex",
+  marginTop: o(e.design.space[3])
+}));
+function R({
+  category: e,
+  checked: t,
+  locked: n = !1,
+  onChange: i
+}) {
+  const c = A(), s = h();
+  return /* @__PURE__ */ a(
+    q,
+    {
+      label: c.formatRichMessage({
+        id: `cookies.category.${e}.title`
+      }),
+      description: c.formatRichMessage({
+        id: `cookies.category.${e}.description`
+      }),
+      htmlFor: s,
+      control: /* @__PURE__ */ a(
+        H,
+        {
+          id: s,
+          checked: t,
+          disabled: n,
+          onChange: (l, u) => i == null ? void 0 : i(u)
+        }
+      )
+    }
+  );
+}
+function Ke() {
+  const e = A(), { consent: t, save: n } = Oe(), [i, c] = y((t == null ? void 0 : t.analytics) ?? !1), [s, l] = y((t == null ? void 0 : t.marketing) ?? !1), u = t == null ? void 0 : t.analytics, f = t == null ? void 0 : t.marketing;
+  return T(() => {
+    u !== void 0 && c(u), f !== void 0 && l(f);
+  }, [u, f]), /* @__PURE__ */ g(Y, { padding: 4, children: [
+    /* @__PURE__ */ a(Ve, { children: e.formatRichMessage({ id: "cookies.configure.title" }) }),
+    /* @__PURE__ */ a(R, { category: "essentials", checked: !0, locked: !0 }),
+    /* @__PURE__ */ a(
+      R,
+      {
+        category: "analytics",
+        checked: i,
+        onChange: c
+      }
+    ),
+    /* @__PURE__ */ a(
+      R,
+      {
+        category: "marketing",
+        checked: s,
+        onChange: l
+      }
+    ),
+    /* @__PURE__ */ a(Ee, { children: /* @__PURE__ */ a(
+      $e,
+      {
+        variant: "contained",
+        onClick: () => n({ analytics: i, marketing: s }),
+        children: e.formatRichMessage({ id: "cookies.action.save" })
+      }
+    ) })
+  ] });
+}
+export {
+  Ye as A,
+  De as C,
+  pe as D,
+  M as R,
+  q as S,
+  B as T,
+  K as V,
+  He as a,
+  Ke as b,
+  ye as c,
+  b as d,
+  de as e,
+  le as f,
+  re as r,
+  Oe as u,
+  L as w
+};