@mx-cartographer/experiences 8.2.8 → 8.2.9-alpha-insightv2-2

package/dist/EmbeddedCard-CBxmTWJW.mjs

@@ -0,0 +1,362 @@
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import w, { useMemo as N, useState as $ } from "react";
+import y from "@mui/material/Box";
+import z from "@mui/material/Button";
+import e from "@mui/material/Stack";
+import { Icon as W, P as k, H3 as O, Text as I, H2 as G } from "@mxenabled/mxui";
+import { Icon as U } from "@mxenabled/mx-icons";
+import { e as M } from "./TransactionUtils-BphBJBbU.mjs";
+import { observer as Y } from "mobx-react-lite";
+import { useVirtualizer as Z } from "@tanstack/react-virtual";
+import F from "@mui/material/Divider";
+import K from "@mui/material/List";
+import { u as q, s as B, h as J, S as Q, T as X, Z as P, B as tt } from "./BarChartV2-x2zNPJ-a.mjs";
+import { i as et } from "./DateUtil-Bhq59ZVg.mjs";
+import { h as L, g as rt, u as nt, b as it } from "./hooks-BaO_gOI6.mjs";
+import { L as R } from "./Loader-CxeBwuPG.mjs";
+import { A as ot } from "./Analytics-CzGzz_sE.mjs";
+import at from "@mui/material/Tab";
+import st from "@mui/material/Tabs";
+import lt from "@mui/material/IconButton";
+import { D as ct } from "./Drawer-XPaLYjiO.mjs";
+import dt from "@mui/material/Card";
+const H = 65, V = 32, ht = ({
+  bgcolor: s,
+  filter: i,
+  height: o = "calc(100dvh - 36px)",
+  loader: c = /* @__PURE__ */ t(R, { label: "Loading", size: 40 }),
+  onClick: n,
+  showInsights: a = !1,
+  showLoader: h = !1,
+  transaction: T,
+  width: p = "100%",
+  zeroState: m = /* @__PURE__ */ t(P, {})
+}) => {
+  const { isLoading: u, sortedTransactions: f } = L(), l = w.useMemo(() => {
+    const d = i ? f.filter(i) : f;
+    return T ?? d;
+  }, [f, T]), { clearExpandedSplits: C, setShowInsights: _, toggleSplit: S } = q(), { onEvent: g } = rt(), x = (d) => {
+    const v = l.find((E) => E.guid === d);
+    if (v?.has_been_split) {
+      S(v.guid);
+      return;
+    }
+    g(ot.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
+      account_guid: v?.account_guid,
+      transaction_guid: d
+    }), n?.(d);
+  }, D = w.useRef(null), b = Z({
+    count: l.length,
+    getScrollElement: () => D.current,
+    estimateSize: (d) => H + (B(d, l) ? V : 0),
+    overscan: 5
+  });
+  return w.useEffect(() => b.measure(), [l]), w.useEffect(() => _(a), [a]), w.useEffect(() => () => C(), []), /* @__PURE__ */ t(K, { component: "div", role: "list", sx: { width: p }, children: /* @__PURE__ */ t(y, { height: o, overflow: "auto", ref: D, role: "presentation", width: p, children: /* @__PURE__ */ r(
+    y,
+    {
+      height: (
+        // set the height to auto when there are no transactions so the zero state isn't set to 0
+        b.getVirtualItems().length === 0 ? "auto" : b.getTotalSize()
+      ),
+      position: "relative",
+      role: "presentation",
+      width: "100%",
+      children: [
+        (u || h) && c,
+        !u && !h && b.getVirtualItems().length === 0 && m,
+        !u && !h && b.getVirtualItems().length > 0 && b.getVirtualItems().map((d) => {
+          const v = l[d.index], E = B(d.index, l), A = J(d.index, l), j = H + (E ? V : 0);
+          return /* @__PURE__ */ r(
+            y,
+            {
+              role: "listitem",
+              sx: {
+                height: j,
+                position: "absolute",
+                transform: `translateY(${d.start}px)`,
+                width: "100%",
+                bgcolor: "background.paper"
+              },
+              children: [
+                E && /* @__PURE__ */ t(Q, { bgcolor: s, children: et(v.date) }),
+                /* @__PURE__ */ t(
+                  X,
+                  {
+                    ...n && { onClick: x },
+                    transaction: v
+                  }
+                ),
+                /* @__PURE__ */ t(F, { sx: { ml: A ? 68 : 0 } })
+              ]
+            },
+            v.guid
+          );
+        })
+      ]
+    }
+  ) }) });
+}, pt = Y(ht), mt = ({ message: s, tipAriaLabel: i, onDismiss: o, onAction: c, sx: n }) => {
+  const a = c || o, h = c ? "chevron_right" : "close";
+  return /* @__PURE__ */ r(
+    e,
+    {
+      sx: {
+        backgroundColor: "primary.lighter",
+        borderRadius: "8px",
+        mb: 24,
+        mt: 12,
+        p: 12,
+        mx: 24,
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        gap: 8,
+        ...n
+      },
+      children: [
+        /* @__PURE__ */ r(e, { sx: { flexDirection: "row", gap: 4 }, children: [
+          /* @__PURE__ */ t(W, { color: "info", fill: !0, name: "lightbulb", size: 24 }),
+          /* @__PURE__ */ t(k, { color: "primary.dark", fontWeight: 400, noWrap: !1, variant: "subtitle2", children: s })
+        ] }),
+        a && /* @__PURE__ */ t(
+          lt,
+          {
+            "aria-label": i,
+            onClick: a,
+            size: "small",
+            sx: { minHeight: 0, minWidth: 0, p: 0 },
+            children: /* @__PURE__ */ t(W, { color: "primary", fill: !0, name: h, size: 20 })
+          }
+        )
+      ]
+    }
+  );
+}, ut = ({
+  ariaLabel: s,
+  beat: i,
+  chart: o,
+  children: c,
+  data: n,
+  defaultSelectedIndex: a,
+  icon: h,
+  onTabChange: T,
+  tipSection: p
+}) => {
+  const { heading: m, subHeading: u } = i, f = N(
+    () => a ?? (n.length ? n.length - 1 : 0),
+    [a, n.length]
+  ), [l, C] = $(f), _ = (g, x) => {
+    T?.(x), C(x);
+  }, S = (g) => {
+    C(g);
+  };
+  return /* @__PURE__ */ r(y, { sx: { bgcolor: "background.paper", width: "100%" }, children: [
+    /* @__PURE__ */ t(st, { "aria-label": s, onChange: _, value: l, variant: "fullWidth", children: n.map((g, x) => /* @__PURE__ */ t(
+      at,
+      {
+        id: `transaction-details-tab-${x}`,
+        label: g.label,
+        sx: { minWidth: "auto", px: 0 }
+      },
+      `${g.label}-${x}`
+    )) }),
+    /* @__PURE__ */ t(e, { sx: { pt: 16, px: 24 }, children: (m || u) && /* @__PURE__ */ r(e, { sx: { gap: 4 }, children: [
+      m && /* @__PURE__ */ t(O, { children: m }),
+      u && /* @__PURE__ */ r(e, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+        h,
+        /* @__PURE__ */ t(I, { textTransform: "uppercase", variant: "body2", children: u.description })
+      ] })
+    ] }) }),
+    o?.(l, S),
+    p && /* @__PURE__ */ t(mt, { ...p }),
+    c?.(l)
+  ] });
+}, At = ({
+  ariaLabel: s,
+  barChartProps: i,
+  beat: o,
+  data: c,
+  defaultSelectedIndex: n = 0,
+  icon: a,
+  isOpen: h = !1,
+  onClose: T,
+  onTabChange: p,
+  tipSection: m,
+  title: u,
+  transactionListProps: f = {}
+}) => {
+  const { common: l, transactions: C } = nt(), { isCopyLoaded: _ } = it(), { sortedTransactionsWithSplits: S, tags: g } = L();
+  return _ ? /* @__PURE__ */ t(ct, { ariaLabelClose: l.close_aria, isOpen: h, onClose: T, title: u, children: /* @__PURE__ */ t(
+    ut,
+    {
+      ariaLabel: s,
+      beat: o,
+      chart: (x, D) => /* @__PURE__ */ t(y, { sx: { pt: 16 }, children: /* @__PURE__ */ t(
+        tt,
+        {
+          ...i,
+          onBarClick: (b) => {
+            D(b), i.onBarClick?.(b);
+          },
+          selectedTabIndex: x
+        }
+      ) }),
+      data: c,
+      defaultSelectedIndex: n,
+      icon: a,
+      onTabChange: p,
+      tipSection: m,
+      children: () => /* @__PURE__ */ r(w.Fragment, { children: [
+        /* @__PURE__ */ r(
+          e,
+          {
+            sx: {
+              alignItems: "center",
+              borderBottomColor: "divider",
+              borderBottomStyle: "solid",
+              borderBottomWidth: 1,
+              flexDirection: "row",
+              justifyContent: "space-between",
+              pb: 4,
+              pt: 16,
+              px: 24
+            },
+            children: [
+              /* @__PURE__ */ t(I, { bold: !0, variant: "body1", children: C.transactions_title }),
+              (f?.transaction || S.length > 0) && /* @__PURE__ */ t(
+                z,
+                {
+                  onClick: () => {
+                    M(
+                      f?.transaction || S,
+                      g
+                    );
+                  },
+                  startIcon: /* @__PURE__ */ t(U, { name: "ios_share" }),
+                  sx: { height: 28 },
+                  children: /* @__PURE__ */ t(I, { bold: !0, variant: "body2", children: C.export_csv_btn })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(pt, { ...f })
+      ] })
+    }
+  ) }) : /* @__PURE__ */ t(R, {});
+}, jt = ({
+  amount: s,
+  borderRadius: i = "2px",
+  count: o,
+  completeColor: c = "success.main",
+  icon: n,
+  label: a,
+  leftLabel: h,
+  percentComplete: T = 0,
+  rightLabel: p,
+  sx: m
+}) => /* @__PURE__ */ r(e, { className: "details-container", sx: { p: 24, width: "100%", gap: 16, ...m }, children: [
+  /* @__PURE__ */ r(e, { sx: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ t(y, { children: n }),
+    /* @__PURE__ */ r(e, { children: [
+      typeof a == "string" ? /* @__PURE__ */ t(k, { dangerouslySetInnerHTML: { __html: a }, variant: "body2" }) : a,
+      typeof s == "string" ? /* @__PURE__ */ t(G, { children: s }) : s
+    ] })
+  ] }),
+  /* @__PURE__ */ r(e, { sx: { gap: 4 }, children: [
+    /* @__PURE__ */ t(
+      e,
+      {
+        sx: {
+          bgcolor: "divider",
+          borderRadius: i,
+          flexDirection: "row",
+          height: o ? 20 : 16,
+          width: "100%"
+        },
+        children: /* @__PURE__ */ t(
+          y,
+          {
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              py: 2,
+              px: 12,
+              bgcolor: c,
+              borderRadius: i,
+              height: o ? 20 : 16,
+              width: `${T}%`
+            },
+            children: /* @__PURE__ */ t(I, { sx: { color: "primary.dark" }, variant: "caption", children: o })
+          }
+        )
+      }
+    ),
+    !o && /* @__PURE__ */ r(e, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ t(I, { variant: "body2", children: h }),
+      /* @__PURE__ */ t(I, { variant: "body2", children: p })
+    ] })
+  ] })
+] }), Nt = ({
+  title: s,
+  description: i,
+  callToAction: o,
+  instanceSlot: c = void 0,
+  onCtaClick: n = () => {
+  }
+}) => /* @__PURE__ */ r(dt, { sx: { pt: 8, pr: 16, pb: 12, pl: 8, borderRadius: "8px" }, children: [
+  /* @__PURE__ */ t(
+    e,
+    {
+      sx: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        pt: 4,
+        pl: 8
+      },
+      children: /* @__PURE__ */ t(I, { bold: !0, variant: "body1", children: s })
+    }
+  ),
+  /* @__PURE__ */ r(
+    e,
+    {
+      sx: {
+        gap: 16,
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between"
+      },
+      children: [
+        /* @__PURE__ */ r(e, { children: [
+          /* @__PURE__ */ t(e, { sx: { pt: 2, pl: 8, pb: 8 }, children: /* @__PURE__ */ t(k, { sx: { fontWeight: 400 }, variant: "subtitle2", children: i }) }),
+          /* @__PURE__ */ t(e, { sx: { alignItems: "flex-start" }, children: /* @__PURE__ */ t(
+            z,
+            {
+              onClick: n,
+              sx: {
+                p: 0,
+                height: 24,
+                px: 8,
+                py: 8,
+                fontWeight: 600,
+                fontSize: 13,
+                lineHeight: "16px"
+              },
+              variant: "text",
+              children: o
+            }
+          ) })
+        ] }),
+        c
+      ]
+    }
+  )
+] });
+export {
+  At as C,
+  Nt as E,
+  jt as S,
+  pt as T,
+  ut as a
+};

package/dist/EmptyBarChart-qkILeuXK.mjs

@@ -0,0 +1,6 @@
+import * as e from "react";
+import { forwardRef as l } from "react";
+const r = (t, E) => /* @__PURE__ */ e.createElement("svg", { width: 288, height: 156, viewBox: "0 0 288 156", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: E, ...t }, /* @__PURE__ */ e.createElement("rect", { width: 288, height: 156 }), /* @__PURE__ */ e.createElement("line", { x1: 16, y1: 119.5, x2: 272, y2: 119.5, stroke: "#A8B1BD" }), /* @__PURE__ */ e.createElement("path", { d: "M242 18C242 16.8954 242.895 16 244 16H262C263.105 16 264 16.8954 264 18V119H242V18Z", fill: "#CDD3DD" }), /* @__PURE__ */ e.createElement("path", { d: "M198 37C198 35.8954 198.895 35 200 35H218C219.105 35 220 35.8954 220 37V119H198V37Z", fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("path", { d: "M154 54C154 52.8954 154.895 52 156 52H174C175.105 52 176 52.8954 176 54V119H154V54Z", fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("path", { d: "M110 77C110 75.8954 110.895 75 112 75H130C131.105 75 132 75.8954 132 77V119H110V77Z", fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("path", { d: "M66 61C66 59.8954 66.8954 59 68 59H86C87.1046 59 88 59.8954 88 61V119H66V61Z", fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("path", { d: "M22 72C22 70.8954 22.8954 70 24 70H42C43.1046 70 44 70.8954 44 72V119H22V72Z", fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 23, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 67, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 111, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 155, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 199, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 243, y: 130, width: 20, height: 6, rx: 3, fill: "#CDD3DD" })), h = l(r);
+export {
+  h as F
+};

package/dist/{ExportCsvAction-hDprC41l.mjs → ExportCsvAction-DDQl3FfC.mjs}

@@ -2,7 +2,7 @@ import { jsx as o } from "react/jsx-runtime";
 import { observer as c } from "mobx-react-lite";
 import { Icon as i } from "@mxenabled/mxui";
 import { e as p } from "./TransactionUtils-BphBJBbU.mjs";
-import { O as m } from "./EmbeddedCard-BNl3quCs.mjs";
+import { O as m } from "./BarChartV2-x2zNPJ-a.mjs";
 import { g as x, h as _, u as C } from "./hooks-BaO_gOI6.mjs";
 import { R as l } from "./ResponsiveButton-BNsV08Ud.mjs";
 const v = ({ filter: t }) => {