@mx-cartographer/experiences 4.0.14-alpha.JB1 → 4.0.14-alpha.JB2

package/dist/index.es13.js

@@ -0,0 +1,620 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { observer as M } from "mobx-react-lite";
+import "bowser";
+import "date-fns/getUnixTime";
+import "date-fns/intlFormat";
+import { V as w, aj as H, a7 as D, ab as x, aa as Q, a9 as $, ai as j, aD as st, au as ct, av as P, x as lt, z as dt, a8 as mt, ar as pt, at as X, az as ut, aA as gt } from "./ConnectMiniWidget-Ep65CtHH.mjs";
+import p from "react";
+import "@honeybadger-io/react";
+import "numeral";
+import "date-fns/addMonths";
+import "date-fns/addQuarters";
+import "date-fns/addWeeks";
+import "date-fns/addYears";
+import "date-fns/getDay";
+import "date-fns/isBefore";
+import "date-fns/nextDay";
+import "date-fns/setDate";
+import { startOfToday as Y } from "date-fns/startOfToday";
+import "date-fns/fromUnixTime";
+import ht from "@mui/material/Button";
+import { Text as g, CategoryIcon as yt, CategoryIconVariants as ft } from "@kyper/mui";
+import "@mui/material/Tooltip";
+import T from "@mui/material/Box";
+import "@mui/material/IconButton";
+import Ct from "@mui/material/styles/useTheme";
+import "@mui/material/useMediaQuery";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import { endOfMonth as Z } from "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/isSameMonth";
+import { startOfMonth as tt } from "date-fns/startOfMonth";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "@mui/icons-material/KeyboardArrowLeftRounded";
+import "@mui/icons-material/KeyboardArrowRightRounded";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import "d3";
+import "@mui/material/styles";
+import "@mui/x-charts";
+import y from "@mui/material/Stack";
+import { useTheme as et } from "@mui/material";
+import "date-fns/differenceInCalendarDays";
+import "date-fns/endOfToday";
+import "date-fns/endOfYear";
+import "date-fns/startOfYear";
+import "date-fns/subDays";
+import "date-fns/subYears";
+import "@mui/material/ButtonGroup";
+import I from "@mui/material/Tab";
+import ot from "@mui/material/Tabs";
+import "@mui/material/ToggleButton";
+import "@mui/material/ToggleButtonGroup";
+import "@mui/material/Dialog";
+import "@mui/material/DialogContent";
+import "@mui/icons-material/ArrowBackOutlined";
+import "uuid";
+import "@mui/material/CircularProgress";
+import "@mui/material/FormControlLabel";
+import "@mui/material/Radio";
+import "@mui/material/Avatar";
+import K from "@mui/material/ListItem";
+import "@mui/material/ListItemAvatar";
+import bt from "@mui/material/ListItemButton";
+import "@mui/material/ListItemText";
+import "@mui/material/ListItemIcon";
+import "mobx";
+import "date-fns/differenceInDays";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import "date-fns/getMonth";
+import "date-fns/isAfter";
+import "date-fns/parseISO";
+import "date-fns/subWeeks";
+import "date-fns/formatISO";
+import "@mui/material/Card";
+import "@mui/material/CardHeader";
+import "@mui/material/CardContent";
+import { D as St } from "./Donut-DgMeKScZ.mjs";
+import _t from "@mui/material/Collapse";
+import N from "@mui/material/Divider";
+import U from "@mui/material/List";
+const R = 5, Tt = (o, l) => l.reduce((r, s) => {
+  if (s.total > 0) {
+    const n = o.find((d) => d.guid === s.category_guid);
+    if (!n) return r;
+    const c = n.parent_guid ?? n.guid, i = o.find((d) => d.guid === c);
+    if (!i) return r;
+    const e = {
+      guid: n.guid,
+      name: n.guid === c ? `General ${n.name}` : n.name,
+      color: H[i.guid],
+      amount: s.total
+    }, a = r.find((d) => d.guid === c);
+    a ? (a.amount += s.total, a.categoryTotals?.push(e)) : r.push({
+      guid: c,
+      name: i.name,
+      color: H[i.guid],
+      categoryTotals: [e],
+      amount: s.total
+    });
+  }
+  return r;
+}, []), nt = (o, l) => {
+  const r = Tt(o, l), s = r.filter((a) => a.guid !== w.INCOME && a.guid !== w.TRANSFER).sort((a, d) => d.amount - a.amount), n = s.reduce(
+    (a, d) => a + d.amount,
+    0
+  ), c = s.length > R ? R : s.length, i = s.slice(0, c), e = i.map((a) => ({
+    id: a.guid,
+    color: a.color,
+    label: a.name,
+    value: a.amount / n * 100
+  }));
+  if (s.length > 5) {
+    const a = s.slice(R, r.length), d = a.reduce(
+      (f, m) => f + m.amount,
+      0
+    );
+    i.push({
+      guid: "other",
+      color: "#ACB0B3",
+      // TODO: Get from theme
+      name: "Other",
+      // TODO: Needs localization
+      categoryTotals: a,
+      amount: d
+    }), e.push({
+      id: "other",
+      color: "#ACB0B3",
+      // TODO: Get from theme,
+      label: "Other",
+      // TODO: Needs localization
+      value: d / n * 100
+    });
+  }
+  return {
+    categoryData: i,
+    donutData: e,
+    totalAmount: n
+  };
+}, at = (o, l, r) => {
+  const s = o.filter(
+    (e) => e.parent_guid === w.INCOME
+  ), n = l.filter((e) => s.some((a) => a.guid === e.category_guid)).sort((e, a) => e.total - a.total).map((e, a) => ({
+    guid: e.category_guid,
+    name: o.find((d) => d.guid === e.category_guid)?.name,
+    color: r[a],
+    categoryTotals: [],
+    amount: Math.abs(e.total)
+  })), c = n.reduce(
+    (e, a) => e + a.amount,
+    0
+  ), i = n.map((e) => ({
+    id: e.guid,
+    color: e.color,
+    label: e.name,
+    value: e.amount / c * 100
+  }));
+  return {
+    categoryData: n,
+    donutData: i,
+    totalAmount: c
+  };
+}, E = ({ amount: o, label: l }) => /* @__PURE__ */ u(y, { direction: "column", children: [
+  /* @__PURE__ */ t(g, { bold: !0, sx: { textTransform: "none" }, variant: "Body", children: l }),
+  /* @__PURE__ */ t(g, { variant: "XSmall", children: D(o, "0,0") })
+] }), Mt = ({
+  data: o,
+  isIncome: l = !1,
+  onSelected: r,
+  onViewTransactions: s,
+  selectedId: n,
+  size: c = 150,
+  totalLabel: i,
+  variant: e = "mini"
+}) => {
+  const { spending: a } = x(), d = et(), { isTablet: f } = Q(), m = p.useMemo(
+    () => n ? o.categoryData.find((S) => S.guid === n) : void 0,
+    [n]
+  ), C = p.useMemo(() => o.donutData.length > 0 ? o.donutData : [{ id: "0", color: d.palette.border.light, value: 100 }], [o, d]), v = () => {
+    s?.(n);
+  }, b = f ? 32 : 48;
+  return /* @__PURE__ */ t(St, { data: C, onClick: r, selectedId: n, size: c, children: /* @__PURE__ */ t(y, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ u(y, { alignItems: "center", justifyContent: "center", minHeight: c, minWidth: c, children: [
+    m && /* @__PURE__ */ u(
+      y,
+      {
+        alignItems: "center",
+        gap: e === "mini" ? 0 : 8,
+        mb: e === "mini" ? 0 : 8,
+        mt: e === "mini" ? 0 : -16,
+        sx: e === "mini" ? { gap: 0, mb: 0 } : { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } },
+        children: [
+          /* @__PURE__ */ t(
+            yt,
+            {
+              categoryGuid: l ? w.INCOME : m.guid,
+              size: e === "mini" ? 24 : b,
+              variant: ft.Transparent
+            }
+          ),
+          /* @__PURE__ */ t(g, { color: "secondary", noWrap: !0, variant: e === "mini" ? "Tiny" : "Body", children: m ? m.name : i })
+        ]
+      }
+    ),
+    !m && e === "full" && /* @__PURE__ */ t(g, { bold: !0, color: "secondary", sx: { mb: { xs: 4, xl: 8 } }, children: i }),
+    /* @__PURE__ */ t(g, { variant: e === "mini" ? "H2" : "H1", children: m ? D(m.amount, "0,0") : D(o.totalAmount, "0,0") }),
+    !m && e === "mini" && /* @__PURE__ */ t(g, { color: "secondary", noWrap: !0, variant: "Tiny", children: i }),
+    e === "full" && /* @__PURE__ */ t(
+      ht,
+      {
+        "aria-label": `View ${m?.name || ""} Transactions`,
+        disabled: o.categoryData.length === 0,
+        onClick: v,
+        sx: { mt: { xl: 4, xs: 0 }, zIndex: 1 },
+        variant: "text",
+        children: a.view_transactions
+      }
+    )
+  ] }) }) });
+}, L = M(Mt), q = ({ data: o, onSelected: l, selectedId: r }) => /* @__PURE__ */ t(y, { gap: 8, height: "100%", justifyContent: "center", my: "auto", children: o.categoryData.map((s) => /* @__PURE__ */ u(
+  y,
+  {
+    alignItems: "center",
+    "aria-label": s.name,
+    "aria-selected": s.guid === r,
+    direction: "row",
+    gap: 8,
+    onClick: () => l(s.guid),
+    role: "button",
+    sx: { cursor: "pointer" },
+    children: [
+      /* @__PURE__ */ t(T, { borderRadius: 4, height: 8, sx: { backgroundColor: s.color }, width: 8 }),
+      /* @__PURE__ */ t(g, { bold: s.guid === r, variant: "XSmall", children: s.name })
+    ]
+  },
+  s.guid
+)) }), xt = () => {
+  const o = Ct(), { spending: l } = x(), { selectedAccounts: r } = $(), s = p.useMemo(
+    () => [
+      o.palette.chartMono.chartMono5,
+      o.palette.chartMono.chartMono4,
+      o.palette.chartMono.chartMono3,
+      o.palette.chartMono.chartMono2,
+      o.palette.chartMono.chartMono1,
+      o.palette.chartMono.chartMono6
+    ],
+    [o]
+  ), { categories: n, dateRangeCategoryTotals: c, loadDateRangeCategoryTotals: i } = j();
+  p.useEffect(() => {
+    i(
+      r,
+      tt(/* @__PURE__ */ new Date()),
+      Z(/* @__PURE__ */ new Date())
+    ).finally();
+  }, [r]);
+  const [e, a] = p.useState(""), [d, f] = p.useState(0), m = p.useMemo(
+    () => nt(n, c),
+    [n, c]
+  ), C = p.useMemo(
+    () => at(n, c, s),
+    [n, c, s]
+  ), v = (S, O) => {
+    f(O), a("");
+  }, b = (S) => {
+    a(e === S ? "" : S);
+  };
+  return /* @__PURE__ */ u(T, { width: "100%", children: [
+    /* @__PURE__ */ u(ot, { onChange: v, value: d, variant: "fullWidth", children: [
+      /* @__PURE__ */ t(
+        I,
+        {
+          label: /* @__PURE__ */ t(
+            E,
+            {
+              amount: m.totalAmount,
+              label: l.spend_tab_title
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t(
+        I,
+        {
+          label: /* @__PURE__ */ t(
+            E,
+            {
+              amount: C.totalAmount,
+              label: l.income_tab_title
+            }
+          )
+        }
+      )
+    ] }),
+    d === 0 && /* @__PURE__ */ t(T, { children: /* @__PURE__ */ u(y, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+      /* @__PURE__ */ t(
+        L,
+        {
+          data: m,
+          onSelected: b,
+          selectedId: e,
+          totalLabel: l.total_spending
+        }
+      ),
+      /* @__PURE__ */ t(
+        q,
+        {
+          data: m,
+          onSelected: b,
+          selectedId: e
+        }
+      )
+    ] }) }),
+    d === 1 && /* @__PURE__ */ t(T, { children: /* @__PURE__ */ u(y, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+      /* @__PURE__ */ t(
+        L,
+        {
+          data: C,
+          isIncome: !0,
+          onSelected: b,
+          selectedId: e,
+          totalLabel: l.total_income
+        }
+      ),
+      /* @__PURE__ */ t(q, { data: C, onSelected: b, selectedId: e })
+    ] }) })
+  ] });
+}, Dt = M(xt), wt = ({ onPrimaryCtaClick: o, sx: l = {} }) => {
+  const { spending: r } = x();
+  return /* @__PURE__ */ t(
+    st,
+    {
+      className: "mx-exp-spending-miniwidget",
+      onPrimaryCtaClick: o,
+      primaryCtaLabel: r.primary_cta,
+      sx: l,
+      title: r.mini_title,
+      children: /* @__PURE__ */ t(Dt, {})
+    }
+  );
+}, po = M(wt), vt = ({
+  data: o,
+  onSelected: l,
+  selectedId: r = "",
+  title: s
+}) => {
+  const { spending: n } = x(), c = o.categoryData.find((i) => i.guid === r);
+  return /* @__PURE__ */ u(y, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
+    /* @__PURE__ */ t(g, { bold: !0, sx: { py: 12 }, children: `${s} ${n.by_category}` }),
+    /* @__PURE__ */ t(N, { "aria-hidden": "true" }),
+    /* @__PURE__ */ t(U, { children: o.categoryData.map((i) => /* @__PURE__ */ u(p.Fragment, { children: [
+      /* @__PURE__ */ t(
+        K,
+        {
+          disableGutters: !0,
+          disablePadding: !0,
+          sx: {
+            minHeight: 44
+          },
+          children: /* @__PURE__ */ u(
+            bt,
+            {
+              "aria-expanded": c?.guid === i.guid,
+              onClick: () => l(i.guid),
+              sx: { minHeight: 44, px: 8, py: 0 },
+              children: [
+                /* @__PURE__ */ t(
+                  T,
+                  {
+                    borderRadius: 4,
+                    flexShrink: 0,
+                    height: 8,
+                    sx: { backgroundColor: i.color, mr: 8 },
+                    width: 8
+                  }
+                ),
+                /* @__PURE__ */ u(
+                  y,
+                  {
+                    alignItems: "center",
+                    direction: "row",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    children: [
+                      /* @__PURE__ */ t(g, { bold: r === i.guid, children: i.name }),
+                      /* @__PURE__ */ t(g, { bold: r === i.guid, variant: "Body", children: D(i.amount, "0,0") })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t(N, {}),
+      i.categoryTotals && i.categoryTotals.length > 0 && /* @__PURE__ */ t(_t, { in: c?.guid === i.guid, unmountOnExit: !0, children: /* @__PURE__ */ u(U, { children: [
+        c?.categoryTotals?.map((e) => /* @__PURE__ */ t(
+          K,
+          {
+            sx: {
+              pl: 24,
+              pr: 8,
+              py: 0
+            },
+            children: /* @__PURE__ */ u(y, { direction: "row", justifyContent: "space-between", width: "100%", children: [
+              /* @__PURE__ */ u(g, { children: [
+                e.name,
+                " "
+              ] }),
+              /* @__PURE__ */ t(g, { children: D(e.amount, "0,0") })
+            ] })
+          },
+          e.guid
+        )),
+        /* @__PURE__ */ t(N, {})
+      ] }) })
+    ] }, i.guid)) }),
+    /* @__PURE__ */ t(g, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${n.total}: ${D(o.totalAmount, "0,0")}` })
+  ] });
+}, At = M(vt), It = ({
+  data: o,
+  onSelected: l,
+  onViewTransactions: r,
+  selectedId: s,
+  title: n
+}) => {
+  const { isDesktop: c, isMobile: i } = Q(), { isLoadingCategoryTotals: e } = j(), { spending: a } = x();
+  return /* @__PURE__ */ u(
+    y,
+    {
+      alignItems: i ? "center" : "flex-start",
+      direction: i ? "column" : "row",
+      gap: { xs: 16, md: 64, xl: 100 },
+      justifyContent: "center",
+      pt: 50,
+      px: 8,
+      children: [
+        e && /* @__PURE__ */ t(
+          L,
+          {
+            data: {
+              categoryData: [],
+              donutData: [],
+              totalAmount: 0
+            },
+            onSelected: () => {
+            },
+            selectedId: "",
+            size: c ? 400 : 300,
+            totalLabel: "Loading ...",
+            variant: "full"
+          }
+        ),
+        !e && /* @__PURE__ */ t(
+          L,
+          {
+            data: o,
+            onSelected: l,
+            onViewTransactions: r,
+            selectedId: s,
+            size: c ? 400 : 300,
+            totalLabel: a.total_amount,
+            variant: "full"
+          }
+        ),
+        /* @__PURE__ */ t(At, { data: o, onSelected: l, selectedId: s, title: n })
+      ]
+    }
+  );
+}, J = M(It), Et = (o) => [
+  o.palette.chartMono.chartMono5,
+  o.palette.chartMono.chartMono4,
+  o.palette.chartMono.chartMono3,
+  o.palette.chartMono.chartMono2,
+  o.palette.chartMono.chartMono1,
+  o.palette.chartMono.chartMono6
+], Lt = () => {
+  const o = et(), { categories: l, dateRangeCategoryTotals: r, loadDateRangeCategoryTotals: s } = j(), { spending: n } = x(), { displayedDateRange: c, selectedAccounts: i, selectedAccountGuids: e } = $(), { setFilter: a, sortedTransactions: d } = ct(), [f, m] = p.useState(""), [C, v] = p.useState(0), [b, S] = p.useState(""), [O, k] = p.useState(!1);
+  p.useEffect(() => {
+    s(
+      i,
+      c.start,
+      c.end
+    ).finally();
+  }, [i, c]);
+  const W = p.useMemo(
+    () => nt(l, r),
+    [l, r]
+  ), z = p.useMemo(
+    () => at(l, r, Et(o)),
+    [l, r]
+  ), B = p.useMemo(
+    () => d.find((h) => h.guid === b),
+    [b]
+  ), it = (h, A) => {
+    v(A), m("");
+  }, V = (h) => {
+    m(f === h || h === "0" ? "" : h);
+  }, F = (h) => {
+    const A = {
+      accounts: e,
+      dateRange: c
+    };
+    if (C === 0)
+      if (h === "other") {
+        const _ = W.categoryData.find((G) => G.guid === "other");
+        a({
+          ...A,
+          custom: (G) => !!_?.categoryTotals?.find((rt) => rt.guid === G.top_level_category_guid)
+        });
+      } else
+        a({
+          ...A,
+          custom: (_) => h ? _.top_level_category_guid === h : _.top_level_category_guid !== w.INCOME
+        });
+    else
+      a({
+        ...A,
+        custom: (_) => h ? _.category_guid === h : _.top_level_category_guid === w.INCOME
+      });
+    k(!0);
+  };
+  return /* @__PURE__ */ u(T, { children: [
+    /* @__PURE__ */ u(ot, { onChange: it, value: C, variant: "fullWidth", children: [
+      /* @__PURE__ */ t(
+        I,
+        {
+          label: /* @__PURE__ */ t(
+            E,
+            {
+              amount: W.totalAmount,
+              label: n.spend_tab_title
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t(
+        I,
+        {
+          label: /* @__PURE__ */ t(
+            E,
+            {
+              amount: z.totalAmount,
+              label: n.income_tab_title
+            }
+          )
+        }
+      )
+    ] }),
+    C === 0 && /* @__PURE__ */ t(
+      J,
+      {
+        data: W,
+        onSelected: V,
+        onViewTransactions: F,
+        selectedId: f,
+        title: n.spend_tab_title
+      }
+    ),
+    C === 1 && /* @__PURE__ */ t(
+      J,
+      {
+        data: z,
+        onSelected: V,
+        onViewTransactions: F,
+        selectedId: f,
+        title: n.income_tab_title
+      }
+    ),
+    /* @__PURE__ */ t(
+      P,
+      {
+        ariaLabelClose: n.close_drawer_aria,
+        isOpen: O,
+        onClose: () => k(!1),
+        title: n.transactions_drawer_title,
+        children: /* @__PURE__ */ t(lt, { onClick: S })
+      }
+    ),
+    /* @__PURE__ */ t(
+      P,
+      {
+        ariaLabelClose: n.close_drawer_aria,
+        isOpen: !!B,
+        onClose: () => S(""),
+        title: n.transaction_details_drawer_title,
+        children: B && /* @__PURE__ */ t(dt, { transaction: B })
+      }
+    )
+  ] });
+}, Ot = M(Lt), Wt = ({ onBackClick: o, sx: l = {} }) => {
+  const { accounts: r } = mt(), { spending: s } = x(), { isInitialized: n, setDisplayedDate: c, setSelectedAccounts: i } = $(), { onEvent: e } = pt(), [a, d] = p.useState(!1);
+  p.useEffect(() => {
+    i(r);
+  }, [r]), p.useEffect(() => {
+    c(tt(Y()), Z(Y())), d(!0), e(X.SPENDING_VIEW);
+  }, []);
+  const f = (m) => {
+    c(m[0], m[1]);
+  };
+  return !n || !a ? /* @__PURE__ */ t(ut, {}) : /* @__PURE__ */ t(
+    gt,
+    {
+      accountOptions: r,
+      calendarActions: { onRangeChanged: f },
+      onAccountsFilterClick: () => e(X.SPENDING_CLICK_FILTER),
+      onBackClick: o,
+      sx: l,
+      title: s.title,
+      children: /* @__PURE__ */ t(T, { height: "calc(100dvh - 150px)", overflow: "scroll", width: "100%", children: /* @__PURE__ */ t(Ot, {}) })
+    }
+  );
+}, uo = M(Wt);
+export {
+  po as SpendingMiniWidget,
+  uo as SpendingWidget
+};
+//# sourceMappingURL=index.es13.js.map