@mx-cartographer/experiences 7.0.58-alpha.mm7 → 7.0.58-alpha.mm8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/trends/index.es.js +227 -261
- package/package.json +1 -1
package/dist/trends/index.es.js
CHANGED
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import { jsx as e, jsxs as C, Fragment as
|
|
1
|
+
import { jsx as e, jsxs as C, Fragment as Qe } from "react/jsx-runtime";
|
|
2
2
|
import i from "react";
|
|
3
3
|
import { observer as v } from "mobx-react-lite";
|
|
4
|
-
import { Icon as ae, Text as
|
|
4
|
+
import { Icon as ae, Text as q, CategoryIcon as fe, P as X, H3 as Le, ChevronRightIcon as et } from "@mxenabled/mxui";
|
|
5
5
|
import W from "@mui/material/Box";
|
|
6
6
|
import b from "@mui/material/Stack";
|
|
7
7
|
import me from "@mui/material/Button";
|
|
8
8
|
import { addSeconds as ve } from "date-fns/addSeconds";
|
|
9
9
|
import { differenceInCalendarMonths as pe } from "date-fns/differenceInCalendarMonths";
|
|
10
10
|
import { a as tt, g as nt, S as ot, L as Me } from "../TrendsStore-BKBnNQba.mjs";
|
|
11
|
-
import { T as
|
|
11
|
+
import { T as go } from "../TrendsStore-BKBnNQba.mjs";
|
|
12
12
|
import { i as st, c as rt, d as at, e as it, f as ct, h as lt, b as Ae, g as Re, j as De } from "../SpendingData-D5vsfYKo.mjs";
|
|
13
13
|
import dt from "@mui/material/ToggleButton";
|
|
14
14
|
import ht from "@mui/material/ToggleButtonGroup";
|
|
15
|
-
import { u as R, m as
|
|
16
|
-
import { u as
|
|
17
|
-
import { f as
|
|
15
|
+
import { u as R, m as $, g as H, b as ee, h as ie, d as ce, v as te, f as _e, p as ut, a as ke } from "../hooks-CE2TKk4a.mjs";
|
|
16
|
+
import { u as P } from "../useScreenSize-B6JyS_Lj.mjs";
|
|
17
|
+
import { f as J, D as F } from "../Dialog-CWW597AF.mjs";
|
|
18
18
|
import { DataGridPro as gt } from "@mui/x-data-grid-pro";
|
|
19
19
|
import { C as mt } from "../CurrencyText-YUhH2caW.mjs";
|
|
20
|
-
import { c as
|
|
20
|
+
import { c as He } from "../Category-CevNQ03n.mjs";
|
|
21
21
|
import { b as pt } from "../Localization-2MODESHW.mjs";
|
|
22
22
|
import { H as Ie } from "../HeaderCell-DjuifqHJ.mjs";
|
|
23
23
|
import { T as A, b as Ct } from "../ViewMoreMicroCard-BAz2NyEO.mjs";
|
|
24
|
-
import { A as
|
|
24
|
+
import { A as T, W as Ne } from "../WidgetContainer-B8MRJ5Y1.mjs";
|
|
25
25
|
import { a as We, T as Oe } from "../TransactionDetails-DAp_CPCP.mjs";
|
|
26
26
|
import { D as Ce } from "../Drawer-kEE73B87.mjs";
|
|
27
|
-
import { L as
|
|
28
|
-
import { useTheme as
|
|
29
|
-
import { L as
|
|
27
|
+
import { L as Q } from "../Loader-DUaFpDGv.mjs";
|
|
28
|
+
import { useTheme as Ge } from "@mui/material/styles";
|
|
29
|
+
import { L as Te } from "../LineChart-B2Y7zwMu.mjs";
|
|
30
30
|
import { M as ft } from "../MiniWidgetContainer-DTQdRK-3.mjs";
|
|
31
|
-
import { subMonths as
|
|
32
|
-
import { TrendingUp as
|
|
31
|
+
import { subMonths as _t } from "date-fns";
|
|
32
|
+
import { TrendingUp as Tt, TrendingDown as yt, MultilineChart as bt, ExpandLess as wt, ExpandMore as St } from "@mxenabled/mx-icons";
|
|
33
33
|
import { a as Dt, f as Z } from "../NumberFormatting-CtWHhyBX.mjs";
|
|
34
34
|
import { M as It } from "../MicroWidgetContainer-C4QQHfD7.mjs";
|
|
35
35
|
import Et from "@mui/material/Collapse";
|
|
36
|
-
import
|
|
37
|
-
import
|
|
36
|
+
import xt from "@mui/material/List";
|
|
37
|
+
import Lt from "@mui/material/ListItem";
|
|
38
38
|
import vt from "@mui/material/ListItemButton";
|
|
39
39
|
import Mt from "@mui/material/ListItemIcon";
|
|
40
40
|
import At from "@mui/material/ListItemText";
|
|
41
|
-
import
|
|
41
|
+
import ze from "@mui/material/styles/useTheme";
|
|
42
42
|
import Rt from "@mui/material/Divider";
|
|
43
|
-
import { useTheme as kt, Stack as
|
|
44
|
-
import
|
|
43
|
+
import { useTheme as kt, Stack as Ht } from "@mui/material";
|
|
44
|
+
import Nt from "@mui/material/Paper";
|
|
45
45
|
import { b as Wt } from "../CategoryUtil-BR3H5i6n.mjs";
|
|
46
46
|
import { E as Ot } from "../ExportCsvAction-CBJAfyAw.mjs";
|
|
47
|
-
import { u as
|
|
48
|
-
import { E as
|
|
47
|
+
import { u as Gt } from "../useInsightsEnabled-DSnpkUq0.mjs";
|
|
48
|
+
import { E as zt } from "../EmptyState-w2yYDuKG.mjs";
|
|
49
49
|
import { k as Bt } from "../ConnectDrawer-DJA_S-rX.mjs";
|
|
50
50
|
const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
51
51
|
ht,
|
|
@@ -56,20 +56,20 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
56
56
|
value: t,
|
|
57
57
|
children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(dt, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(ae, { name: "table_chart_view" }) : /* @__PURE__ */ e(ae, { name: "format_list_bulleted" }) }, n))
|
|
58
58
|
}
|
|
59
|
-
),
|
|
60
|
-
const { trends: n } = R(), { isMobile: s, isDesktop: a } =
|
|
61
|
-
const l =
|
|
59
|
+
), Fe = ({ selectedDateRange: t, selectedCategoryGuid: o }) => {
|
|
60
|
+
const { trends: n } = R(), { isMobile: s, isDesktop: a } = P(), { getCategoryName: d } = $(), h = i.useMemo(() => {
|
|
61
|
+
const l = J(
|
|
62
62
|
t.start,
|
|
63
|
-
s ?
|
|
64
|
-
), c =
|
|
63
|
+
s ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
|
|
64
|
+
), c = J(
|
|
65
65
|
t.end,
|
|
66
|
-
s ?
|
|
66
|
+
s ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
|
|
67
67
|
);
|
|
68
68
|
return `${l} - ${c}`;
|
|
69
69
|
}, [t, s]);
|
|
70
70
|
return /* @__PURE__ */ C(W, { sx: { mr: 10, minWidth: "60%" }, children: [
|
|
71
71
|
/* @__PURE__ */ e(
|
|
72
|
-
|
|
72
|
+
q,
|
|
73
73
|
{
|
|
74
74
|
display: "block",
|
|
75
75
|
fontWeight: 700,
|
|
@@ -82,13 +82,13 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
82
82
|
children: d(o) || n.sub_title
|
|
83
83
|
}
|
|
84
84
|
),
|
|
85
|
-
/* @__PURE__ */ e(
|
|
85
|
+
/* @__PURE__ */ e(q, { variant: a ? "Body" : "Small", children: h })
|
|
86
86
|
] });
|
|
87
|
-
},
|
|
87
|
+
}, Ft = (t) => {
|
|
88
88
|
const o = t.row[t.field];
|
|
89
89
|
return /* @__PURE__ */ e(b, { alignItems: "flex-end", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(mt, { amount: o, variant: "Small" }) });
|
|
90
|
-
},
|
|
91
|
-
const { categories: n } = R(), s = n.default_categories[t]?.replace(/&/g, "&") ??
|
|
90
|
+
}, Kt = ({ categoryGuid: t, topLevelCategoryGuid: o }) => {
|
|
91
|
+
const { categories: n } = R(), s = n.default_categories[t]?.replace(/&/g, "&") ?? He[t];
|
|
92
92
|
return /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "center", children: [
|
|
93
93
|
/* @__PURE__ */ e(
|
|
94
94
|
W,
|
|
@@ -98,22 +98,22 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
98
98
|
children: /* @__PURE__ */ e(fe, { categoryGuid: o })
|
|
99
99
|
}
|
|
100
100
|
),
|
|
101
|
-
/* @__PURE__ */ e(
|
|
101
|
+
/* @__PURE__ */ e(q, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
|
|
102
102
|
] });
|
|
103
|
-
},
|
|
104
|
-
|
|
103
|
+
}, Vt = (t) => /* @__PURE__ */ e(b, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
|
|
104
|
+
Kt,
|
|
105
105
|
{
|
|
106
106
|
categoryGuid: t.row.category,
|
|
107
107
|
topLevelCategoryGuid: t.row.top_level_category_guid
|
|
108
108
|
}
|
|
109
|
-
) }),
|
|
109
|
+
) }), $t = (t, o) => {
|
|
110
110
|
const n = [], s = new Date(t);
|
|
111
111
|
for (; s <= o; ) {
|
|
112
|
-
const a =
|
|
112
|
+
const a = J(s, F.MONTH);
|
|
113
113
|
n.push(a), s.setMonth(s.getMonth() + 1);
|
|
114
114
|
}
|
|
115
115
|
return n;
|
|
116
|
-
},
|
|
116
|
+
}, Ke = ({
|
|
117
117
|
monthlyCategoryTotals: t,
|
|
118
118
|
selectedDateRange: o,
|
|
119
119
|
selectedCategory: n,
|
|
@@ -121,16 +121,16 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
121
121
|
height: a = "100dvh",
|
|
122
122
|
sx: d = {}
|
|
123
123
|
}) => {
|
|
124
|
-
const { onEvent: h } =
|
|
124
|
+
const { onEvent: h } = H(), l = J(/* @__PURE__ */ new Date(), F.MONTH_SHORT), [c, m] = i.useState([
|
|
125
125
|
{ field: l, sort: "desc" }
|
|
126
|
-
]), f = i.useMemo(() =>
|
|
126
|
+
]), f = i.useMemo(() => $t(o.start, o.end), [o]), u = [
|
|
127
127
|
{
|
|
128
128
|
field: "category",
|
|
129
129
|
flex: 1,
|
|
130
130
|
headerName: "Category",
|
|
131
131
|
minWidth: 175,
|
|
132
132
|
renderHeader: Ie,
|
|
133
|
-
renderCell:
|
|
133
|
+
renderCell: Vt,
|
|
134
134
|
sortable: !0,
|
|
135
135
|
type: "string"
|
|
136
136
|
},
|
|
@@ -141,7 +141,7 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
141
141
|
headerName: r,
|
|
142
142
|
minWidth: 100,
|
|
143
143
|
renderHeader: Ie,
|
|
144
|
-
renderCell:
|
|
144
|
+
renderCell: Ft,
|
|
145
145
|
align: "right",
|
|
146
146
|
headerAlign: "right",
|
|
147
147
|
sortable: !0,
|
|
@@ -150,26 +150,26 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
150
150
|
sortComparator: tt
|
|
151
151
|
})
|
|
152
152
|
)
|
|
153
|
-
],
|
|
153
|
+
], _ = i.useMemo(() => {
|
|
154
154
|
const r = t.filter(
|
|
155
155
|
(p) => !st(p) && !rt(p)
|
|
156
|
-
),
|
|
156
|
+
), y = (n ? r.filter(
|
|
157
157
|
(p) => p.category_guid === n || p.top_level_category_guid === n
|
|
158
158
|
) : r).reduce(
|
|
159
159
|
(p, I) => {
|
|
160
|
-
const { category_guid:
|
|
160
|
+
const { category_guid: S, top_level_category_guid: E, month: k, total: D, year: O } = I, M = n ? S : E;
|
|
161
161
|
p[M] || (p[M] = {
|
|
162
162
|
id: M,
|
|
163
163
|
category: M,
|
|
164
|
-
category_guid:
|
|
164
|
+
category_guid: S,
|
|
165
165
|
top_level_category_guid: E
|
|
166
166
|
});
|
|
167
|
-
const
|
|
168
|
-
return p[M][
|
|
167
|
+
const x = J(new Date(O, k - 1), F.MONTH_SHORT);
|
|
168
|
+
return p[M][x] || (p[M][x] = 0), p[M][x] = p[M][x] + Math.abs(D), p;
|
|
169
169
|
},
|
|
170
170
|
{}
|
|
171
171
|
);
|
|
172
|
-
return Object.values(
|
|
172
|
+
return Object.values(y);
|
|
173
173
|
}, [t, n]);
|
|
174
174
|
return /* @__PURE__ */ e(W, { sx: { height: a, width: "100%", overflowX: "auto", boxShadow: "none", ...d }, children: /* @__PURE__ */ e(
|
|
175
175
|
gt,
|
|
@@ -180,21 +180,21 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
180
180
|
hideFooter: !0,
|
|
181
181
|
initialState: { sorting: { sortModel: c } },
|
|
182
182
|
onRowClick: (r) => {
|
|
183
|
-
s?.(r.row.category), h(
|
|
183
|
+
s?.(r.row.category), h(T.TRENDS_CLICK_LIST_ITEM, {
|
|
184
184
|
...A,
|
|
185
|
-
listItem:
|
|
185
|
+
listItem: He[r.row.category]
|
|
186
186
|
});
|
|
187
187
|
},
|
|
188
188
|
onSortModelChange: (r) => {
|
|
189
|
-
m(r), h(
|
|
189
|
+
m(r), h(T.TRENDS_CLICK_TABLE_SORT, A);
|
|
190
190
|
},
|
|
191
|
-
rows:
|
|
191
|
+
rows: _,
|
|
192
192
|
slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
|
|
193
193
|
sortModel: c,
|
|
194
194
|
sortingOrder: ["asc", "desc"]
|
|
195
195
|
}
|
|
196
196
|
) });
|
|
197
|
-
},
|
|
197
|
+
}, Pt = {
|
|
198
198
|
title: "Transaction List"
|
|
199
199
|
}, jt = ({
|
|
200
200
|
categoryGuid: t,
|
|
@@ -202,7 +202,7 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
202
202
|
isOpen: n,
|
|
203
203
|
onClose: s
|
|
204
204
|
}) => {
|
|
205
|
-
const { onEvent: a } =
|
|
205
|
+
const { onEvent: a } = H(), { selectedAccountGuids: d } = ee(), { common: h } = R(), { setFilter: l, sortedTransactions: c } = ie(), [m, f] = i.useState(""), u = i.useMemo(
|
|
206
206
|
() => c.find((r) => r.guid === m),
|
|
207
207
|
[m, c]
|
|
208
208
|
);
|
|
@@ -213,8 +213,8 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
213
213
|
custom: (r) => t === "" || t === r.category_guid || t === r.top_level_category_guid,
|
|
214
214
|
showSplits: !!t
|
|
215
215
|
});
|
|
216
|
-
}, [d, t, o]), i.useEffect(() => a(
|
|
217
|
-
const
|
|
216
|
+
}, [d, t, o]), i.useEffect(() => a(T.TRENDS_VIEW_TRANSACTIONS), []);
|
|
217
|
+
const _ = () => {
|
|
218
218
|
f(""), s();
|
|
219
219
|
};
|
|
220
220
|
return /* @__PURE__ */ C(
|
|
@@ -222,8 +222,8 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
222
222
|
{
|
|
223
223
|
ariaLabelClose: h.close_aria,
|
|
224
224
|
isOpen: n,
|
|
225
|
-
onClose:
|
|
226
|
-
title:
|
|
225
|
+
onClose: _,
|
|
226
|
+
title: Pt.title,
|
|
227
227
|
children: [
|
|
228
228
|
u && /* @__PURE__ */ e(We, { transaction: u }),
|
|
229
229
|
!u && /* @__PURE__ */ e(Oe, { onClick: f })
|
|
@@ -231,56 +231,56 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
231
231
|
}
|
|
232
232
|
);
|
|
233
233
|
}, Yt = v(jt), Ut = ({ onBackClick: t, sx: o }) => {
|
|
234
|
-
const { onEvent: n } =
|
|
234
|
+
const { onEvent: n } = H(), { isDesktop: s, isTablet: a, isMobile: d } = P(), { visibleAccounts: h } = ce(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: m } = $(), { sortedTransactions: f } = ie(), { selectedDateRange: u, setSelectedDateRange: _ } = te(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: y, setSelectedAccounts: p } = ee(), { trends: I } = R(), [S, E] = i.useState(!1), [k, D] = i.useState(!1), [O, M] = i.useState("Chart"), [x, K] = i.useState(""), [z, le] = i.useState(window.innerHeight), j = z - (d ? 315 : 345);
|
|
235
235
|
i.useEffect(() => {
|
|
236
|
-
const
|
|
237
|
-
return window.addEventListener("resize",
|
|
236
|
+
const w = () => le(window.innerHeight);
|
|
237
|
+
return window.addEventListener("resize", w), () => window.removeEventListener("resize", w);
|
|
238
238
|
}, []), i.useEffect(() => {
|
|
239
239
|
p(h);
|
|
240
240
|
}, [h]), i.useEffect(() => {
|
|
241
241
|
g && l(
|
|
242
|
-
|
|
242
|
+
y,
|
|
243
243
|
u.start,
|
|
244
244
|
u.end
|
|
245
245
|
).finally(() => {
|
|
246
246
|
E(!0);
|
|
247
247
|
});
|
|
248
|
-
}, [g,
|
|
248
|
+
}, [g, y, u]);
|
|
249
249
|
const ne = i.useMemo(() => {
|
|
250
|
-
if (!
|
|
251
|
-
const
|
|
250
|
+
if (!S) return { stackedDatasets: [], unstackedDatasets: [] };
|
|
251
|
+
const w = nt(
|
|
252
252
|
c,
|
|
253
253
|
u.start,
|
|
254
254
|
u.end
|
|
255
|
-
),
|
|
256
|
-
(B) => B.top_level_category_guid ===
|
|
257
|
-
) : at(
|
|
255
|
+
), N = x.length ? w.filter(
|
|
256
|
+
(B) => B.top_level_category_guid === x || B.category_guid === x
|
|
257
|
+
) : at(w);
|
|
258
258
|
return {
|
|
259
|
-
stackedDatasets:
|
|
260
|
-
unstackedDatasets:
|
|
259
|
+
stackedDatasets: N.filter(it),
|
|
260
|
+
unstackedDatasets: N.filter(ct)
|
|
261
261
|
};
|
|
262
|
-
}, [c,
|
|
263
|
-
M(
|
|
264
|
-
}, de = (
|
|
265
|
-
const
|
|
266
|
-
|
|
262
|
+
}, [c, x, u]), V = (w, N) => {
|
|
263
|
+
M(N ?? O), n(T.TRENDS_CLICK_TOGGLE_VIEW);
|
|
264
|
+
}, de = (w) => {
|
|
265
|
+
const N = ve(w?.[0], 1), B = w?.[1], ge = pe(B, N);
|
|
266
|
+
_({ start: N, end: B }), n(T.TRENDS_CLICK_TIME_WINDOW, {
|
|
267
267
|
time_period: ge + "M"
|
|
268
268
|
});
|
|
269
269
|
}, Y = () => {
|
|
270
|
-
n(
|
|
271
|
-
}, oe = (
|
|
272
|
-
|
|
273
|
-
}, he = (
|
|
274
|
-
|
|
275
|
-
}, se = (
|
|
276
|
-
n(
|
|
277
|
-
}, re = (
|
|
278
|
-
n(
|
|
279
|
-
}, ue = (
|
|
280
|
-
n(
|
|
270
|
+
n(T.TRENDS_CLICK_FILTER);
|
|
271
|
+
}, oe = (w) => {
|
|
272
|
+
K(w);
|
|
273
|
+
}, he = (w) => {
|
|
274
|
+
K(w), n(T.TRENDS_CLICK_LEGEND, { category: m(w) });
|
|
275
|
+
}, se = (w) => {
|
|
276
|
+
n(T.TRENDS_HOVER_LEGEND, { category: m(w) });
|
|
277
|
+
}, re = (w) => {
|
|
278
|
+
n(T.TRENDS_HOVER_AREA, { category: w });
|
|
279
|
+
}, ue = (w) => {
|
|
280
|
+
n(T.TRENDS_HOVER_POINT, { category: w });
|
|
281
281
|
};
|
|
282
|
-
return !r || !g || !
|
|
283
|
-
|
|
282
|
+
return !r || !g || !S ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ C(
|
|
283
|
+
Ne,
|
|
284
284
|
{
|
|
285
285
|
accountOptions: h,
|
|
286
286
|
calendarActions: { onRangeChanged: de },
|
|
@@ -307,18 +307,18 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
307
307
|
sx: { pb: d ? 12 : 24, pt: d ? 24 : 48 },
|
|
308
308
|
children: [
|
|
309
309
|
/* @__PURE__ */ e(
|
|
310
|
-
|
|
310
|
+
Fe,
|
|
311
311
|
{
|
|
312
|
-
selectedCategoryGuid:
|
|
312
|
+
selectedCategoryGuid: x,
|
|
313
313
|
selectedDateRange: u
|
|
314
314
|
}
|
|
315
315
|
),
|
|
316
|
-
/* @__PURE__ */ e(Be, { onTabChange:
|
|
316
|
+
/* @__PURE__ */ e(Be, { onTabChange: V, selectedTab: O })
|
|
317
317
|
]
|
|
318
318
|
}
|
|
319
319
|
),
|
|
320
320
|
/* @__PURE__ */ C(b, { alignItems: "center", flexDirection: "row", width: "100%", children: [
|
|
321
|
-
/* @__PURE__ */ e(W, { flexGrow: 1, children:
|
|
321
|
+
/* @__PURE__ */ e(W, { flexGrow: 1, children: x && /* @__PURE__ */ C(me, { onClick: () => K(""), sx: { p: 0, pr: 5 }, children: [
|
|
322
322
|
/* @__PURE__ */ e(ae, { name: "arrow_back" }),
|
|
323
323
|
I.all_categories
|
|
324
324
|
] }) }),
|
|
@@ -338,11 +338,11 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
338
338
|
}
|
|
339
339
|
),
|
|
340
340
|
O === "Table" && /* @__PURE__ */ e(
|
|
341
|
-
|
|
341
|
+
Ke,
|
|
342
342
|
{
|
|
343
343
|
monthlyCategoryTotals: c,
|
|
344
344
|
onClickRow: oe,
|
|
345
|
-
selectedCategory:
|
|
345
|
+
selectedCategory: x,
|
|
346
346
|
selectedDateRange: u
|
|
347
347
|
}
|
|
348
348
|
)
|
|
@@ -353,7 +353,7 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
353
353
|
/* @__PURE__ */ e(
|
|
354
354
|
Yt,
|
|
355
355
|
{
|
|
356
|
-
categoryGuid:
|
|
356
|
+
categoryGuid: x,
|
|
357
357
|
dateRange: u,
|
|
358
358
|
isOpen: k,
|
|
359
359
|
onClose: () => D(!1)
|
|
@@ -362,10 +362,10 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
362
362
|
]
|
|
363
363
|
}
|
|
364
364
|
);
|
|
365
|
-
},
|
|
366
|
-
const t =
|
|
365
|
+
}, ao = v(Ut), Xt = () => {
|
|
366
|
+
const t = Ge(), { monthlyCategoryTotals: o } = $(), { trends: n } = R(), s = lt(o);
|
|
367
367
|
return /* @__PURE__ */ e(
|
|
368
|
-
|
|
368
|
+
Te,
|
|
369
369
|
{
|
|
370
370
|
baseline: "min",
|
|
371
371
|
colors: [t.palette.primary.main],
|
|
@@ -380,13 +380,13 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
380
380
|
valueFormatterString: "0,0"
|
|
381
381
|
}
|
|
382
382
|
);
|
|
383
|
-
}, Zt = v(Xt),
|
|
384
|
-
const { visibleAccounts: n } = ce(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } =
|
|
383
|
+
}, Zt = v(Xt), qt = ({ onPrimaryCtaClick: t, sx: o }) => {
|
|
384
|
+
const { visibleAccounts: n } = ce(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = $(), { isInitialized: d } = _e(), { trends: h } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: m } = ee();
|
|
385
385
|
return i.useEffect(() => {
|
|
386
386
|
m(n);
|
|
387
387
|
}, [n]), i.useEffect(() => {
|
|
388
388
|
d && s(c).finally();
|
|
389
|
-
}, [d, c]), !l || !d ? /* @__PURE__ */ e(
|
|
389
|
+
}, [d, c]), !l || !d ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
|
|
390
390
|
ft,
|
|
391
391
|
{
|
|
392
392
|
onPrimaryCtaClick: t,
|
|
@@ -394,10 +394,10 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
394
394
|
subTitle: h.sub_title,
|
|
395
395
|
sx: o,
|
|
396
396
|
title: h.mini_title,
|
|
397
|
-
children: a ? /* @__PURE__ */ e(Zt, {}) : /* @__PURE__ */ e(
|
|
397
|
+
children: a ? /* @__PURE__ */ e(Zt, {}) : /* @__PURE__ */ e(Q, {})
|
|
398
398
|
}
|
|
399
399
|
);
|
|
400
|
-
},
|
|
400
|
+
}, io = v(qt), Jt = 70, Ee = ({
|
|
401
401
|
title: t,
|
|
402
402
|
totalAmount: o,
|
|
403
403
|
transactionType: n,
|
|
@@ -408,7 +408,7 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
408
408
|
const { availableWidth: h } = ut(), l = i.useRef(null), c = i.useRef(null), m = Dt(Number(Math.abs(s)), {
|
|
409
409
|
style: "percent",
|
|
410
410
|
minimumIntegerDigits: 1
|
|
411
|
-
}), f = h === 288 && Z(o, "0,0.00").length > 10 ? Z(o, "0,0") : Z(o, "0,0.00"), u = n === "spending" ? s > 0 : s >= 0,
|
|
411
|
+
}), f = h === 288 && Z(o, "0,0.00").length > 10 ? Z(o, "0,0") : Z(o, "0,0.00"), u = n === "spending" ? s > 0 : s >= 0, _ = n === "spending" ? "error.main" : "success.main", r = n === "spending" ? "success.main" : "text.secondary", g = l?.current, y = c?.current, p = g && y ? g.scrollWidth > y.clientWidth - Jt : !1;
|
|
412
412
|
return /* @__PURE__ */ C(
|
|
413
413
|
b,
|
|
414
414
|
{
|
|
@@ -433,12 +433,12 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
433
433
|
children: [
|
|
434
434
|
/* @__PURE__ */ e(X, { color: "text.secondary", variant: "caption", children: t }),
|
|
435
435
|
d && /* @__PURE__ */ C(b, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
|
|
436
|
-
u ? /* @__PURE__ */ e(
|
|
436
|
+
u ? /* @__PURE__ */ e(Tt, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(yt, { size: 20, sx: { color: r } }),
|
|
437
437
|
/* @__PURE__ */ e(
|
|
438
438
|
X,
|
|
439
439
|
{
|
|
440
440
|
sx: {
|
|
441
|
-
color: u ?
|
|
441
|
+
color: u ? _ : r,
|
|
442
442
|
fontWeight: 600
|
|
443
443
|
},
|
|
444
444
|
variant: "body2",
|
|
@@ -464,13 +464,13 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
464
464
|
{
|
|
465
465
|
ref: l,
|
|
466
466
|
sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
|
|
467
|
-
children: /* @__PURE__ */ e(
|
|
467
|
+
children: /* @__PURE__ */ e(Le, { children: f })
|
|
468
468
|
}
|
|
469
469
|
),
|
|
470
470
|
d && h >= 450 && !p && /* @__PURE__ */ e(
|
|
471
471
|
X,
|
|
472
472
|
{
|
|
473
|
-
color: u ?
|
|
473
|
+
color: u ? _ : r,
|
|
474
474
|
variant: "caption",
|
|
475
475
|
children: a
|
|
476
476
|
}
|
|
@@ -481,7 +481,7 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
481
481
|
]
|
|
482
482
|
}
|
|
483
483
|
);
|
|
484
|
-
},
|
|
484
|
+
}, Qt = v(() => {
|
|
485
485
|
const { trends: t } = R();
|
|
486
486
|
return /* @__PURE__ */ C(b, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
|
|
487
487
|
/* @__PURE__ */ e(bt, { size: 32 }),
|
|
@@ -490,32 +490,32 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
490
490
|
/* @__PURE__ */ e(X, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
|
|
491
491
|
] })
|
|
492
492
|
] });
|
|
493
|
-
}),
|
|
494
|
-
const { visibleAccounts: o } = ce(), { onEvent: n } =
|
|
495
|
-
start:
|
|
493
|
+
}), co = v(({ onCtaClick: t }) => {
|
|
494
|
+
const { visibleAccounts: o } = ce(), { onEvent: n } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: d } = $(), h = {
|
|
495
|
+
start: _t(/* @__PURE__ */ new Date(), 1),
|
|
496
496
|
end: /* @__PURE__ */ new Date()
|
|
497
497
|
}, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: m, isInitialized: f } = ee();
|
|
498
498
|
i.useEffect(() => {
|
|
499
499
|
m(o);
|
|
500
500
|
}, [o]), i.useEffect(() => {
|
|
501
501
|
f && a(c, h.start).then(() => {
|
|
502
|
-
n(
|
|
502
|
+
n(T.TRENDS_LOAD_WIDGET, {
|
|
503
503
|
state: o?.length ? "default" : "zeroState"
|
|
504
504
|
});
|
|
505
505
|
});
|
|
506
506
|
}, [f, c]);
|
|
507
|
-
const { spendingData: u, incomeData:
|
|
507
|
+
const { spendingData: u, incomeData: _ } = i.useMemo(
|
|
508
508
|
() => ({
|
|
509
509
|
spendingData: Ae(s, h),
|
|
510
510
|
incomeData: Re(s, h)
|
|
511
511
|
}),
|
|
512
512
|
[s, h]
|
|
513
|
-
), [r, g] = u, [
|
|
513
|
+
), [r, g] = u, [y, p] = _, I = De(g.y, r.y), S = De(p.y, y.y), E = f && !o?.length, k = () => {
|
|
514
514
|
n(
|
|
515
|
-
E ?
|
|
515
|
+
E ? T.TRENDS_CLICK_GET_STARTED : T.TRENDS_CLICK_VIEW_MORE
|
|
516
516
|
), t();
|
|
517
517
|
};
|
|
518
|
-
return !d || !f ? /* @__PURE__ */ e(
|
|
518
|
+
return !d || !f ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
|
|
519
519
|
It,
|
|
520
520
|
{
|
|
521
521
|
className: "mx-trends-microwidget",
|
|
@@ -523,7 +523,7 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
523
523
|
onCTAClick: k,
|
|
524
524
|
subHeader: E ? void 0 : l.micro_subheader,
|
|
525
525
|
title: l.title,
|
|
526
|
-
children: E ? /* @__PURE__ */ e(
|
|
526
|
+
children: E ? /* @__PURE__ */ e(Qt, {}) : /* @__PURE__ */ C(
|
|
527
527
|
b,
|
|
528
528
|
{
|
|
529
529
|
sx: {
|
|
@@ -546,9 +546,9 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
546
546
|
/* @__PURE__ */ e(
|
|
547
547
|
Ee,
|
|
548
548
|
{
|
|
549
|
-
percentage:
|
|
549
|
+
percentage: S,
|
|
550
550
|
secondaryLabel: l.micro_secondary_label,
|
|
551
|
-
shouldDisplayPercentage: p.y !== 0 &&
|
|
551
|
+
shouldDisplayPercentage: p.y !== 0 && y.y !== 0,
|
|
552
552
|
title: l.income_label,
|
|
553
553
|
totalAmount: p.y,
|
|
554
554
|
transactionType: "income"
|
|
@@ -561,15 +561,15 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
561
561
|
);
|
|
562
562
|
}), en = v(
|
|
563
563
|
({ isExpanded: t, onClick: o }) => {
|
|
564
|
-
const n =
|
|
565
|
-
return /* @__PURE__ */ e(
|
|
564
|
+
const n = ze();
|
|
565
|
+
return /* @__PURE__ */ e(Lt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(vt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
|
|
566
566
|
b,
|
|
567
567
|
{
|
|
568
568
|
sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
|
|
569
569
|
children: [
|
|
570
|
-
/* @__PURE__ */ e(At, { children: /* @__PURE__ */ e(
|
|
571
|
-
/* @__PURE__ */ e(Mt, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(
|
|
572
|
-
|
|
570
|
+
/* @__PURE__ */ e(At, { children: /* @__PURE__ */ e(q, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
|
|
571
|
+
/* @__PURE__ */ e(Mt, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(wt, {}) : /* @__PURE__ */ e(
|
|
572
|
+
St,
|
|
573
573
|
{
|
|
574
574
|
sx: {
|
|
575
575
|
transition: "transform 0.3s ease-in-out",
|
|
@@ -581,7 +581,7 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
581
581
|
}
|
|
582
582
|
) }) });
|
|
583
583
|
}
|
|
584
|
-
),
|
|
584
|
+
), xe = v(
|
|
585
585
|
({
|
|
586
586
|
totalAmount: t,
|
|
587
587
|
guid: o,
|
|
@@ -591,8 +591,8 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
591
591
|
isLastItem: d = !1,
|
|
592
592
|
showDivider: h = !0
|
|
593
593
|
}) => {
|
|
594
|
-
const { trends: l } = R(), { onEvent: c } =
|
|
595
|
-
a?.(), c(
|
|
594
|
+
const { trends: l } = R(), { onEvent: c } = H(), m = `${s.length} ${s.length === 1 ? l.transaction : l.transactions}`, f = () => {
|
|
595
|
+
a?.(), c(T.TRENDS_CLICK_LIST_ITEM, {
|
|
596
596
|
...A,
|
|
597
597
|
listItem: n
|
|
598
598
|
});
|
|
@@ -614,23 +614,23 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
614
614
|
}
|
|
615
615
|
), tn = v(
|
|
616
616
|
({ availableHeight: t = 0, onCategoryClick: o }) => {
|
|
617
|
-
const { collapsedCategories: n, visibleCategories: s, setVisibleListLength: a } = te(), { isLargeDesktop: d, isDesktop: h } =
|
|
617
|
+
const { collapsedCategories: n, visibleCategories: s, setVisibleListLength: a } = te(), { isLargeDesktop: d, isDesktop: h } = P(), { trends: l } = R(), { onEvent: c } = H(), [m, f] = i.useState(!1), u = h || d;
|
|
618
618
|
i.useEffect(() => {
|
|
619
|
-
const g = Math.floor(t / 64) - 1,
|
|
620
|
-
g !== s.length && (a(u ? Math.max(g, 5) : 5), f(g >=
|
|
619
|
+
const g = Math.floor(t / 64) - 1, y = s.length + n.length;
|
|
620
|
+
g !== s.length && (a(u ? Math.max(g, 5) : 5), f(g >= y));
|
|
621
621
|
}, [t]);
|
|
622
|
-
const
|
|
623
|
-
f(!m), c(
|
|
622
|
+
const _ = () => {
|
|
623
|
+
f(!m), c(T.TRENDS_CLICK_VIEW_MORE, {
|
|
624
624
|
...A
|
|
625
625
|
});
|
|
626
626
|
}, r = s.length + (m ? n.length : 0);
|
|
627
|
-
return /* @__PURE__ */ e(b, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(
|
|
628
|
-
/* @__PURE__ */ e(b, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(
|
|
629
|
-
s.map((g,
|
|
630
|
-
|
|
627
|
+
return /* @__PURE__ */ e(b, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(xt, { children: [
|
|
628
|
+
/* @__PURE__ */ e(b, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Le, { children: l.categories }) }),
|
|
629
|
+
s.map((g, y) => /* @__PURE__ */ e(
|
|
630
|
+
xe,
|
|
631
631
|
{
|
|
632
632
|
...g,
|
|
633
|
-
isLastItem:
|
|
633
|
+
isLastItem: y === r - 1,
|
|
634
634
|
onClick: g.transactions.length > 0 ? () => o(g) : void 0,
|
|
635
635
|
showDivider: !0
|
|
636
636
|
},
|
|
@@ -641,10 +641,10 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
641
641
|
{
|
|
642
642
|
in: m,
|
|
643
643
|
sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
|
|
644
|
-
children: n.map((g,
|
|
645
|
-
const p = s.length +
|
|
644
|
+
children: n.map((g, y) => {
|
|
645
|
+
const p = s.length + y;
|
|
646
646
|
return /* @__PURE__ */ e(
|
|
647
|
-
|
|
647
|
+
xe,
|
|
648
648
|
{
|
|
649
649
|
...g,
|
|
650
650
|
isLastItem: p === r - 1,
|
|
@@ -656,16 +656,16 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
656
656
|
})
|
|
657
657
|
}
|
|
658
658
|
),
|
|
659
|
-
n.length > 0 && /* @__PURE__ */ e(en, { isExpanded: m, onClick:
|
|
659
|
+
n.length > 0 && /* @__PURE__ */ e(en, { isExpanded: m, onClick: _ })
|
|
660
660
|
] }) });
|
|
661
661
|
}
|
|
662
662
|
), nn = ({ beats: t, onInsightCardClick: o }) => {
|
|
663
|
-
const n = kt(), { onEvent: s } =
|
|
663
|
+
const n = kt(), { onEvent: s } = H(), { isMobile: a, isDesktop: d, isLargeDesktop: h } = P(), { beatStore: l, endpoint: c, sessionToken: m } = _e(), { is_mobile_webview: f } = ke();
|
|
664
664
|
console.log({ is_mobile_webview: f });
|
|
665
|
-
const u = n.palette.mode === "dark",
|
|
666
|
-
o?.(D), s(
|
|
667
|
-
}, p =
|
|
668
|
-
return /* @__PURE__ */ e(
|
|
665
|
+
const u = n.palette.mode === "dark", _ = d || h, r = _ || a ? 1 : 2, g = () => null, y = (D) => {
|
|
666
|
+
o?.(D), s(T.TRENDS_CLICK_INSIGHT, A);
|
|
667
|
+
}, p = _ ? 200 : 170, I = _ ? 170 : 124, S = _ ? 56 : 0, E = t.length > 0 ? p + S : I, k = _ && t.length > 0 ? p : void 0;
|
|
668
|
+
return /* @__PURE__ */ e(Ht, { sx: { height: E }, children: /* @__PURE__ */ e(
|
|
669
669
|
Ct,
|
|
670
670
|
{
|
|
671
671
|
areBeatsLoading: l.isLoading,
|
|
@@ -673,11 +673,11 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
673
673
|
endpoint: c,
|
|
674
674
|
heightOverrides: k,
|
|
675
675
|
logOutUser: g,
|
|
676
|
-
onCardClick:
|
|
676
|
+
onCardClick: y,
|
|
677
677
|
showBorder: !0,
|
|
678
678
|
showCTAColocatedWithText: !1,
|
|
679
679
|
showCarouselControls: !0,
|
|
680
|
-
showHeader:
|
|
680
|
+
showHeader: _,
|
|
681
681
|
showIcon: !0,
|
|
682
682
|
showWithMargin: !1,
|
|
683
683
|
token: m,
|
|
@@ -688,11 +688,11 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
688
688
|
}
|
|
689
689
|
) });
|
|
690
690
|
}, on = v(nn), sn = v(({ chartLabel: t, chartColor: o }) => {
|
|
691
|
-
const { onEvent: n } =
|
|
691
|
+
const { onEvent: n } = H(), {
|
|
692
692
|
categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: a }
|
|
693
693
|
} = te();
|
|
694
694
|
return /* @__PURE__ */ e(b, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
|
|
695
|
-
|
|
695
|
+
Te,
|
|
696
696
|
{
|
|
697
697
|
baseline: "min",
|
|
698
698
|
colors: [o],
|
|
@@ -705,7 +705,7 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
705
705
|
stroke: o
|
|
706
706
|
}),
|
|
707
707
|
onItemClick: () => {
|
|
708
|
-
n(
|
|
708
|
+
n(T.TRENDS_CLICK_CHART, A);
|
|
709
709
|
},
|
|
710
710
|
showArea: !0,
|
|
711
711
|
showAverage: !0,
|
|
@@ -721,14 +721,14 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
721
721
|
}
|
|
722
722
|
) });
|
|
723
723
|
}), rn = v(({ onClose: t }) => {
|
|
724
|
-
const o =
|
|
724
|
+
const o = ze(), { onEvent: n } = H(), { common: s, trends: a } = R(), { selectedCategoryData: d, selectedDateRangeMonthRange: h } = te(), { sortedTransactions: l } = ie(), [c, m] = i.useState(null);
|
|
725
725
|
if (!d)
|
|
726
726
|
return null;
|
|
727
|
-
const { guid: f, name: u, is_income:
|
|
727
|
+
const { guid: f, name: u, is_income: _, totalAmount: r } = d, g = _ ? a.category_income : a.category_spending, y = Wt(f, o), p = _ ? a.income_label : a.spending_label, I = ` ${d.transactions.length === 1 ? a.transaction : a.transactions} (${d.transactions.length})`, S = i.useMemo(
|
|
728
728
|
() => l.find((D) => D.guid === c),
|
|
729
729
|
[c, l]
|
|
730
730
|
), E = (D) => D.category_guid === f || D.top_level_category_guid === f, k = () => {
|
|
731
|
-
t?.(), n(
|
|
731
|
+
t?.(), n(T.TRENDS_CLICK_BACK, A);
|
|
732
732
|
};
|
|
733
733
|
return /* @__PURE__ */ C(
|
|
734
734
|
Ce,
|
|
@@ -740,7 +740,7 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
740
740
|
title: g,
|
|
741
741
|
children: [
|
|
742
742
|
/* @__PURE__ */ C(b, { sx: { alignItems: "center", height: "100%" }, children: [
|
|
743
|
-
/* @__PURE__ */ C(
|
|
743
|
+
/* @__PURE__ */ C(Nt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
|
|
744
744
|
/* @__PURE__ */ e(
|
|
745
745
|
Me,
|
|
746
746
|
{
|
|
@@ -750,9 +750,9 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
750
750
|
title: u
|
|
751
751
|
}
|
|
752
752
|
),
|
|
753
|
-
/* @__PURE__ */ e(sn, { chartColor:
|
|
753
|
+
/* @__PURE__ */ e(sn, { chartColor: y, chartLabel: p }),
|
|
754
754
|
/* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
|
|
755
|
-
/* @__PURE__ */ e(
|
|
755
|
+
/* @__PURE__ */ e(q, { bold: !0, variant: "body1", children: I }),
|
|
756
756
|
/* @__PURE__ */ e(Ot, { filter: E })
|
|
757
757
|
] })
|
|
758
758
|
] }),
|
|
@@ -770,10 +770,10 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
770
770
|
Ce,
|
|
771
771
|
{
|
|
772
772
|
ariaLabelClose: s.close_aria,
|
|
773
|
-
isOpen: !!
|
|
773
|
+
isOpen: !!S,
|
|
774
774
|
onClose: () => m(""),
|
|
775
775
|
title: a.transaction,
|
|
776
|
-
children:
|
|
776
|
+
children: S && /* @__PURE__ */ e(We, { transaction: S })
|
|
777
777
|
}
|
|
778
778
|
)
|
|
779
779
|
]
|
|
@@ -799,21 +799,21 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
799
799
|
selectedDateRange: n,
|
|
800
800
|
totals: s
|
|
801
801
|
}) => {
|
|
802
|
-
const a =
|
|
802
|
+
const a = Ge(), { onEvent: d } = H(), { trends: h } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: m, isTablet: f } = P(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], _ = an(s, n), r = cn(_, h), [g, y] = i.useState(0), p = 458, I = 195, S = 56, E = c || l ? I : m || f ? p : g;
|
|
803
803
|
return i.useEffect(() => {
|
|
804
|
-
const D = Math.max(t -
|
|
805
|
-
|
|
804
|
+
const D = Math.max(t - S, o);
|
|
805
|
+
y(D);
|
|
806
806
|
}, [t]), /* @__PURE__ */ e(
|
|
807
|
-
|
|
807
|
+
Te,
|
|
808
808
|
{
|
|
809
809
|
baseline: "min",
|
|
810
810
|
colors: u,
|
|
811
811
|
curveType: "bump",
|
|
812
|
-
datasets:
|
|
812
|
+
datasets: _,
|
|
813
813
|
height: E,
|
|
814
814
|
labels: r,
|
|
815
815
|
onItemClick: () => {
|
|
816
|
-
d(
|
|
816
|
+
d(T.TRENDS_CLICK_CHART, A);
|
|
817
817
|
},
|
|
818
818
|
showArea: !0,
|
|
819
819
|
showAxisHighlight: !0,
|
|
@@ -826,116 +826,82 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
826
826
|
valueFormatterString: "0.0a"
|
|
827
827
|
}
|
|
828
828
|
);
|
|
829
|
-
}, dn = v(ln), hn =
|
|
830
|
-
|
|
831
|
-
"CategorySpendingV2",
|
|
832
|
-
"CostOfLivingToIncome",
|
|
833
|
-
"DebtPaymentReminderV2",
|
|
834
|
-
"DiscoveredAccounts",
|
|
835
|
-
"DuplicatePaymentV2",
|
|
836
|
-
"FeeDetected",
|
|
837
|
-
"GreenGasPurchasesSummary",
|
|
838
|
-
"LargeTransaction",
|
|
839
|
-
"LowAccountBalance",
|
|
840
|
-
"MonthlyDebtToIncomeComparisonV2",
|
|
841
|
-
"MonthlyDepositSummaryV2",
|
|
842
|
-
"MonthlyNonEssentialCategorySummaryV2",
|
|
843
|
-
"MonthlySavingsToIncomeComparison",
|
|
844
|
-
"MonthlySpendToIncomeComparisonV2",
|
|
845
|
-
"MonthlySubscriptionAggregateV2",
|
|
846
|
-
"MonthlyTopMerchantSpendingV3",
|
|
847
|
-
"MonthlyObligationsStatus",
|
|
848
|
-
"QuarterlySummary",
|
|
849
|
-
"SaveAnExtra100Dollars",
|
|
850
|
-
"SaveEnoughToLiveOn",
|
|
851
|
-
"SavingsOpportunityV2",
|
|
852
|
-
"SubscriptionDetected",
|
|
853
|
-
"SubscriptionPriceIncrease",
|
|
854
|
-
"SetUpDirectDeposit",
|
|
855
|
-
"SwitchDirectDeposit",
|
|
856
|
-
"UnexpectedSubscriptionPayment",
|
|
857
|
-
"UpcomingBill",
|
|
858
|
-
"UpcomingSubscription",
|
|
859
|
-
"WeekendSpendingSummaryV2",
|
|
860
|
-
"WeeklyNewMerchantsV2",
|
|
861
|
-
"WeeklyNoSpendDays",
|
|
862
|
-
"WeeklySmallPurchasesSummary"
|
|
863
|
-
], un = ({ onBackClick: t, onInsightCardClick: o, sx: n }) => {
|
|
864
|
-
const { onEvent: s } = N(), { config: a } = ke(), { isLargeDesktop: d, isDesktop: h, isMobile: l } = $(), { visibleAccounts: c } = ce(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: u } = K(), { setFilter: T } = ie(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: _ } = te(), {
|
|
829
|
+
}, dn = v(ln), hn = ({ onBackClick: t, onInsightCardClick: o, sx: n }) => {
|
|
830
|
+
const { onEvent: s } = H(), { config: a } = ke(), { isLargeDesktop: d, isDesktop: h, isMobile: l } = P(), { visibleAccounts: c } = ce(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: u } = $(), { setFilter: _ } = ie(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: y } = te(), {
|
|
865
831
|
isCopyLoaded: p,
|
|
866
832
|
isInitialized: I,
|
|
867
|
-
selectedAccounts:
|
|
833
|
+
selectedAccounts: S,
|
|
868
834
|
selectedAccountGuids: E,
|
|
869
835
|
setSelectedAccounts: k
|
|
870
|
-
} = ee(), { trends: D, connect: O } = R(), { beatStore: M } =
|
|
836
|
+
} = ee(), { trends: D, connect: O } = R(), { beatStore: M } = _e(), K = Gt() && a.show_insights_widget_in_master, z = h || d, [le, ye] = i.useState(!1), [j, ne] = i.useState(!1), [V, de] = i.useState("Chart"), [Y, oe] = i.useState(""), [he, se] = i.useState(!1), [re, ue] = i.useState(window.innerHeight), w = z ? 56 : 0, N = re - 208, B = re - (K ? 550 + w : 266), [ge, be] = i.useState(!1), Ve = a.show_connections_widget_in_master ? "buttons" : "no-buttons", we = i.useMemo(
|
|
871
837
|
() => c && c.length === 0 || u.length === 0,
|
|
872
838
|
[c, u]
|
|
873
839
|
);
|
|
874
840
|
i.useEffect(() => {
|
|
875
841
|
I && M.loadBeats().finally(() => ne(!0));
|
|
876
842
|
}, [I]);
|
|
877
|
-
const
|
|
843
|
+
const Se = i.useMemo(() => j ? M.beats : [], [j]);
|
|
878
844
|
i.useEffect(() => {
|
|
879
|
-
const
|
|
880
|
-
return window.addEventListener("resize",
|
|
845
|
+
const L = () => ue(window.innerHeight);
|
|
846
|
+
return window.addEventListener("resize", L), () => window.removeEventListener("resize", L);
|
|
881
847
|
}, []), i.useEffect(() => {
|
|
882
848
|
k(c);
|
|
883
849
|
}, [c]), i.useEffect(() => {
|
|
884
|
-
I && m(
|
|
850
|
+
I && m(S, r.start, r.end).then(() => {
|
|
885
851
|
f(
|
|
886
|
-
|
|
852
|
+
S,
|
|
887
853
|
r.start,
|
|
888
854
|
r.end
|
|
889
855
|
);
|
|
890
856
|
}).finally(() => {
|
|
891
|
-
|
|
857
|
+
ye(!0), s(T.TRENDS_LOAD_WIDGET, {
|
|
892
858
|
...A,
|
|
893
859
|
time_period: `${pe(r.end, r.start)}M`
|
|
894
860
|
});
|
|
895
861
|
});
|
|
896
|
-
}, [I,
|
|
862
|
+
}, [I, S, r]), i.useEffect(() => {
|
|
897
863
|
if (u.length !== 0) {
|
|
898
|
-
const
|
|
864
|
+
const L = {
|
|
899
865
|
accounts: E,
|
|
900
866
|
dateRange: { start: r.start, end: r.end }
|
|
901
867
|
};
|
|
902
|
-
|
|
903
|
-
...
|
|
904
|
-
custom: (
|
|
905
|
-
(U) => U.top_level_category_guid ===
|
|
868
|
+
_({
|
|
869
|
+
...L,
|
|
870
|
+
custom: (G) => !!u.find(
|
|
871
|
+
(U) => U.top_level_category_guid === G.top_level_category_guid || U.category_guid === G.category_guid
|
|
906
872
|
)
|
|
907
873
|
});
|
|
908
874
|
}
|
|
909
875
|
}, [u]);
|
|
910
|
-
const
|
|
911
|
-
g(
|
|
912
|
-
},
|
|
876
|
+
const $e = (L) => {
|
|
877
|
+
g(L), se(!0);
|
|
878
|
+
}, Pe = () => {
|
|
913
879
|
g(null), se(!1);
|
|
914
880
|
}, je = () => {
|
|
915
|
-
be(!0), s(
|
|
916
|
-
}, Ye = (
|
|
917
|
-
de(
|
|
881
|
+
be(!0), s(T.TRENDS_CLICK_CONNECT_ACCOUNTS);
|
|
882
|
+
}, Ye = (L, G) => {
|
|
883
|
+
de(G ?? V), s(T.TRENDS_CLICK_TOGGLE_VIEW, {
|
|
918
884
|
...A,
|
|
919
|
-
toggleView:
|
|
885
|
+
toggleView: G
|
|
920
886
|
});
|
|
921
|
-
}, Ue = (
|
|
922
|
-
const
|
|
923
|
-
|
|
887
|
+
}, Ue = (L) => {
|
|
888
|
+
const G = ve(L?.[0], 1), U = L?.[1], Je = pe(U, G);
|
|
889
|
+
y({ start: G, end: U }), s(T.TRENDS_CLICK_TIME_WINDOW, {
|
|
924
890
|
...A,
|
|
925
|
-
time_period:
|
|
891
|
+
time_period: Je + "M"
|
|
926
892
|
});
|
|
927
|
-
}, Xe = (
|
|
928
|
-
s(
|
|
893
|
+
}, Xe = (L) => {
|
|
894
|
+
s(T.TRENDS_CLICK_FILTER, {
|
|
929
895
|
...A,
|
|
930
|
-
filterValue:
|
|
896
|
+
filterValue: L
|
|
931
897
|
});
|
|
932
|
-
}, Ze = (
|
|
933
|
-
oe(
|
|
934
|
-
},
|
|
935
|
-
oe(""), s(
|
|
898
|
+
}, Ze = (L) => {
|
|
899
|
+
oe(L);
|
|
900
|
+
}, qe = () => {
|
|
901
|
+
oe(""), s(T.TRENDS_CLICK_ALL_CATEGORIES, A);
|
|
936
902
|
};
|
|
937
|
-
return !p || !le ? /* @__PURE__ */ e(
|
|
938
|
-
|
|
903
|
+
return !p || !le ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ C(
|
|
904
|
+
Ne,
|
|
939
905
|
{
|
|
940
906
|
accountOptions: c,
|
|
941
907
|
calendarActions: { onRangeChanged: Ue },
|
|
@@ -946,19 +912,19 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
946
912
|
sx: n,
|
|
947
913
|
title: D.title,
|
|
948
914
|
children: [
|
|
949
|
-
|
|
950
|
-
|
|
915
|
+
we && /* @__PURE__ */ e(
|
|
916
|
+
zt,
|
|
951
917
|
{
|
|
952
918
|
header: D.zero_state_content_header,
|
|
953
919
|
icon: "",
|
|
954
920
|
onClick: je,
|
|
955
921
|
primaryButton: D.empty_state_primary,
|
|
956
922
|
subText: D.empty_state_sub_text,
|
|
957
|
-
sx: { height:
|
|
958
|
-
variant:
|
|
923
|
+
sx: { height: N },
|
|
924
|
+
variant: Ve
|
|
959
925
|
}
|
|
960
926
|
),
|
|
961
|
-
!
|
|
927
|
+
!we && /* @__PURE__ */ C(
|
|
962
928
|
b,
|
|
963
929
|
{
|
|
964
930
|
sx: {
|
|
@@ -973,36 +939,36 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
973
939
|
sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
|
|
974
940
|
children: [
|
|
975
941
|
/* @__PURE__ */ e(
|
|
976
|
-
|
|
942
|
+
Fe,
|
|
977
943
|
{
|
|
978
944
|
selectedCategoryGuid: Y,
|
|
979
945
|
selectedDateRange: r
|
|
980
946
|
}
|
|
981
947
|
),
|
|
982
|
-
/* @__PURE__ */ e(Be, { onTabChange: Ye, selectedTab:
|
|
948
|
+
/* @__PURE__ */ e(Be, { onTabChange: Ye, selectedTab: V })
|
|
983
949
|
]
|
|
984
950
|
}
|
|
985
951
|
),
|
|
986
|
-
/* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: Y && /* @__PURE__ */ C(me, { onClick:
|
|
952
|
+
/* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: Y && /* @__PURE__ */ C(me, { onClick: qe, sx: { p: 0, pr: 5 }, children: [
|
|
987
953
|
/* @__PURE__ */ e(ae, { name: "arrow_back" }),
|
|
988
954
|
D.all_categories
|
|
989
955
|
] }) }) }),
|
|
990
|
-
/* @__PURE__ */ C(b, { flexDirection:
|
|
991
|
-
|
|
992
|
-
/* @__PURE__ */ e(W, { sx: { width:
|
|
956
|
+
/* @__PURE__ */ C(b, { flexDirection: z ? "row" : "column", gap: z ? 48 : 16, children: [
|
|
957
|
+
V === "Chart" && /* @__PURE__ */ C(Qe, { children: [
|
|
958
|
+
/* @__PURE__ */ e(W, { sx: { width: z ? "68%" : "100%" }, children: /* @__PURE__ */ e(
|
|
993
959
|
dn,
|
|
994
960
|
{
|
|
995
|
-
availableHeight:
|
|
961
|
+
availableHeight: N,
|
|
996
962
|
minHeight: 450,
|
|
997
963
|
selectedDateRange: r,
|
|
998
964
|
totals: u
|
|
999
965
|
}
|
|
1000
966
|
) }),
|
|
1001
|
-
/* @__PURE__ */ C(b, { gap: 16, sx: { width:
|
|
1002
|
-
|
|
967
|
+
/* @__PURE__ */ C(b, { gap: 16, sx: { width: z ? "32%" : "100%" }, children: [
|
|
968
|
+
K && j && Se.length > 0 && /* @__PURE__ */ e(
|
|
1003
969
|
on,
|
|
1004
970
|
{
|
|
1005
|
-
beats:
|
|
971
|
+
beats: Se,
|
|
1006
972
|
onInsightCardClick: o
|
|
1007
973
|
}
|
|
1008
974
|
),
|
|
@@ -1010,13 +976,13 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
1010
976
|
tn,
|
|
1011
977
|
{
|
|
1012
978
|
availableHeight: B,
|
|
1013
|
-
onCategoryClick:
|
|
979
|
+
onCategoryClick: $e
|
|
1014
980
|
}
|
|
1015
981
|
)
|
|
1016
982
|
] })
|
|
1017
983
|
] }),
|
|
1018
|
-
|
|
1019
|
-
|
|
984
|
+
V === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
|
|
985
|
+
Ke,
|
|
1020
986
|
{
|
|
1021
987
|
height: "unset",
|
|
1022
988
|
monthlyCategoryTotals: u,
|
|
@@ -1026,7 +992,7 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
1026
992
|
}
|
|
1027
993
|
) })
|
|
1028
994
|
] }),
|
|
1029
|
-
he && /* @__PURE__ */ e(rn, { onClose:
|
|
995
|
+
he && /* @__PURE__ */ e(rn, { onClose: Pe })
|
|
1030
996
|
]
|
|
1031
997
|
}
|
|
1032
998
|
),
|
|
@@ -1041,11 +1007,11 @@ const Be = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
1041
1007
|
]
|
|
1042
1008
|
}
|
|
1043
1009
|
);
|
|
1044
|
-
},
|
|
1010
|
+
}, lo = v(hn);
|
|
1045
1011
|
export {
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1012
|
+
ao as TrendsFullWidget,
|
|
1013
|
+
co as TrendsMicroWidget,
|
|
1014
|
+
io as TrendsMiniWidget,
|
|
1015
|
+
go as TrendsStore,
|
|
1016
|
+
lo as TrendsWidget
|
|
1051
1017
|
};
|