@mx-cartographer/experiences 7.0.23-alpha.al13 → 7.0.23-alpha.al14

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.
Files changed (2) hide show
  1. package/dist/trends/index.es.js +295 -293
  2. package/package.json +1 -1
package/dist/trends/index.es.js CHANGED
@@ -1,69 +1,69 @@
1
- import { jsx as e, jsxs as f, Fragment as ze } from "react/jsx-runtime";
2
- import i from "react";
1
+ import { jsx as e, jsxs as f, Fragment as Pe } from "react/jsx-runtime";
2
+ import r from "react";
3
3
  import { observer as M } from "mobx-react-lite";
4
- import { Icon as re, Text as X, CategoryIcon as Te, P as Y, H3 as De, ChevronRightIcon as Fe } from "@mxenabled/mxui";
4
+ import { Icon as re, Text as X, CategoryIcon as Te, P as Y, H3 as De, ChevronRightIcon as Ke } from "@mxenabled/mxui";
5
5
  import O from "@mui/material/Box";
6
6
  import _ from "@mui/material/Stack";
7
7
  import pe from "@mui/material/Button";
8
8
  import { addSeconds as Ie } from "date-fns/addSeconds";
9
9
  import { differenceInCalendarMonths as Ce } from "date-fns/differenceInCalendarMonths";
10
- import { a as Pe, g as Ke, S as $e, L as Ee, u as je } from "../TrendsStore-WrHxzdbQ.mjs";
11
- import { T as Jn } from "../TrendsStore-WrHxzdbQ.mjs";
12
- import { i as Ye, c as Ue, d as Xe, e as Ze, f as Qe, h as qe, b as Le, g as xe, j as _e } from "../SpendingData-D5vsfYKo.mjs";
13
- import Je from "@mui/material/ToggleButton";
14
- import et from "@mui/material/ToggleButtonGroup";
15
- import { u as R, k as F, e as H, a as P, f as ae, c as ie, v as q, l as ve, p as tt, m as nt } from "../hooks-DkUqN6JE.mjs";
10
+ import { a as $e, g as je, S as Ye, L as Ee, u as Ue } from "../TrendsStore-WrHxzdbQ.mjs";
11
+ import { T as to } from "../TrendsStore-WrHxzdbQ.mjs";
12
+ import { i as Xe, c as Ze, d as Qe, e as qe, f as Je, h as et, b as Le, g as xe, j as _e } from "../SpendingData-D5vsfYKo.mjs";
13
+ import tt from "@mui/material/ToggleButton";
14
+ import nt from "@mui/material/ToggleButtonGroup";
15
+ import { u as R, k as F, e as H, a as P, f as ie, c as ce, v as q, l as ve, p as ot, m as st } from "../hooks-DkUqN6JE.mjs";
16
16
  import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
17
17
  import { f as Z, D as B } from "../Dialog-CWW597AF.mjs";
18
- import { DataGridPro as ot } from "@mui/x-data-grid-pro";
19
- import { C as st } from "../CurrencyText-YUhH2caW.mjs";
18
+ import { DataGridPro as at } from "@mui/x-data-grid-pro";
19
+ import { C as rt } from "../CurrencyText-YUhH2caW.mjs";
20
20
  import { c as Me } from "../Category-CevNQ03n.mjs";
21
- import { b as rt } from "../Localization-2MODESHW.mjs";
21
+ import { b as it } from "../Localization-2MODESHW.mjs";
22
22
  import { H as be } from "../HeaderCell-DjuifqHJ.mjs";
23
- import { T as A, b as at } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
23
+ import { T as A, b as ct } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
24
24
  import { A as y, W as Ae } from "../WidgetContainer-CdBs9WOZ.mjs";
25
25
  import { a as Re, T as ke } from "../TransactionDetails-C-z3HGTT.mjs";
26
26
  import { D as fe } from "../Drawer-kEE73B87.mjs";
27
27
  import { L as Q } from "../Loader-DUaFpDGv.mjs";
28
28
  import { useTheme as He } from "@mui/material/styles";
29
29
  import { L as ye } from "../LineChart-BWWmmJxV.mjs";
30
- import { M as it } from "../MiniWidgetContainer-CTyjmE1h.mjs";
31
- import { subMonths as ct } from "date-fns";
32
- import { TrendingUp as lt, TrendingDown as dt, MultilineChart as ht, ExpandLess as ut, ExpandMore as mt } from "@mxenabled/mx-icons";
33
- import { a as gt, f as U } from "../NumberFormatting-CtWHhyBX.mjs";
34
- import { M as pt } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
35
- import Ct from "@mui/material/Collapse";
36
- import ft from "@mui/material/List";
37
- import Tt from "@mui/material/ListItem";
38
- import yt from "@mui/material/ListItemButton";
39
- import _t from "@mui/material/ListItemIcon";
40
- import bt from "@mui/material/ListItemText";
30
+ import { M as lt } from "../MiniWidgetContainer-CTyjmE1h.mjs";
31
+ import { subMonths as dt } from "date-fns";
32
+ import { TrendingUp as ht, TrendingDown as ut, MultilineChart as mt, ExpandLess as gt, ExpandMore as pt } from "@mxenabled/mx-icons";
33
+ import { a as Ct, f as U } from "../NumberFormatting-CtWHhyBX.mjs";
34
+ import { M as ft } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
35
+ import Tt from "@mui/material/Collapse";
36
+ import yt from "@mui/material/List";
37
+ import _t from "@mui/material/ListItem";
38
+ import bt from "@mui/material/ListItemButton";
39
+ import St from "@mui/material/ListItemIcon";
40
+ import wt from "@mui/material/ListItemText";
41
41
  import Ne from "@mui/material/styles/useTheme";
42
- import St from "@mui/material/Divider";
43
- import { useTheme as wt, Stack as Dt } from "@mui/material";
44
- import It from "@mui/material/Paper";
45
- import { b as Et } from "../CategoryUtil-BR3H5i6n.mjs";
46
- import { E as Lt } from "../ExportCsvAction-CbMfQ2Wa.mjs";
47
- import { E as xt } from "../EmptyState-C0lr9E5T.mjs";
42
+ import Dt from "@mui/material/Divider";
43
+ import { useTheme as It, Stack as Et } from "@mui/material";
44
+ import Lt from "@mui/material/Paper";
45
+ import { b as xt } from "../CategoryUtil-BR3H5i6n.mjs";
46
+ import { E as vt } from "../ExportCsvAction-CbMfQ2Wa.mjs";
47
+ import { E as Mt } from "../EmptyState-C0lr9E5T.mjs";
48
48
  const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
49
- et,
49
+ nt,
50
50
  {
51
51
  exclusive: !0,
52
52
  onChange: o,
53
53
  orientation: "horizontal",
54
54
  value: n,
55
- children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(Je, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(re, { name: "table_chart_view" }) : /* @__PURE__ */ e(re, { name: "format_list_bulleted" }) }, t))
55
+ children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(tt, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(re, { name: "table_chart_view" }) : /* @__PURE__ */ e(re, { name: "format_list_bulleted" }) }, t))
56
56
  }
57
57
  ), Oe = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
58
- const { trends: t } = R(), { isMobile: s, isDesktop: a } = K(), { getCategoryName: h } = F(), d = i.useMemo(() => {
59
- const c = Z(
58
+ const { trends: t } = R(), { isMobile: s, isDesktop: i } = K(), { getCategoryName: h } = F(), d = r.useMemo(() => {
59
+ const l = Z(
60
60
  n.start,
61
61
  s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
62
- ), l = Z(
62
+ ), c = Z(
63
63
  n.end,
64
64
  s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
65
65
  );
66
- return `${c} - ${l}`;
66
+ return `${l} - ${c}`;
67
67
  }, [n, s]);
68
68
  return /* @__PURE__ */ f(O, { sx: { mr: 10, minWidth: "60%" }, children: [
69
69
  /* @__PURE__ */ e(
@@ -76,39 +76,39 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
76
76
  overflow: "visible",
77
77
  textOverflow: "unset"
78
78
  },
79
- variant: a ? "H3" : "Body",
79
+ variant: i ? "H3" : "Body",
80
80
  children: h(o) || t.sub_title
81
81
  }
82
82
  ),
83
- /* @__PURE__ */ e(X, { variant: a ? "Body" : "Small", children: d })
83
+ /* @__PURE__ */ e(X, { variant: i ? "Body" : "Small", children: d })
84
84
  ] });
85
- }, vt = (n) => {
85
+ }, At = (n) => {
86
86
  const o = n.row[n.field];
87
- return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(st, { amount: o, variant: "Small" }) });
88
- }, Mt = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
87
+ return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(rt, { amount: o, variant: "Small" }) });
88
+ }, Rt = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
89
89
  const { categories: t } = R(), s = t.default_categories[n]?.replace(/&/g, "&") ?? Me[n];
90
90
  return /* @__PURE__ */ f(_, { alignItems: "center", direction: "row", justifyContent: "center", children: [
91
91
  /* @__PURE__ */ e(
92
92
  O,
93
93
  {
94
- "aria-label": rt(t.category_icon_label_aria, s),
94
+ "aria-label": it(t.category_icon_label_aria, s),
95
95
  role: "img",
96
96
  children: /* @__PURE__ */ e(Te, { categoryGuid: o })
97
97
  }
98
98
  ),
99
99
  /* @__PURE__ */ e(X, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
100
100
  ] });
101
- }, At = (n) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
102
- Mt,
101
+ }, kt = (n) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
102
+ Rt,
103
103
  {
104
104
  categoryGuid: n.row.category,
105
105
  topLevelCategoryGuid: n.row.top_level_category_guid
106
106
  }
107
- ) }), Rt = (n, o) => {
107
+ ) }), Ht = (n, o) => {
108
108
  const t = [], s = new Date(n);
109
109
  for (; s <= o; ) {
110
- const a = Z(s, B.MONTH);
111
- t.push(a), s.setMonth(s.getMonth() + 1);
110
+ const i = Z(s, B.MONTH);
111
+ t.push(i), s.setMonth(s.getMonth() + 1);
112
112
  }
113
113
  return t;
114
114
  }, Ve = ({
@@ -116,102 +116,102 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
116
116
  selectedDateRange: o,
117
117
  selectedCategory: t,
118
118
  onClickRow: s,
119
- height: a = "100dvh",
119
+ height: i = "100dvh",
120
120
  sx: h = {}
121
121
  }) => {
122
- const { onEvent: d } = H(), c = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [l, m] = i.useState([
123
- { field: c, sort: "desc" }
124
- ]), C = i.useMemo(() => Rt(o.start, o.end), [o]), u = [
122
+ const { onEvent: d } = H(), l = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, m] = r.useState([
123
+ { field: l, sort: "desc" }
124
+ ]), C = r.useMemo(() => Ht(o.start, o.end), [o]), u = [
125
125
  {
126
126
  field: "category",
127
127
  flex: 1,
128
128
  headerName: "Category",
129
129
  minWidth: 175,
130
130
  renderHeader: be,
131
- renderCell: At,
131
+ renderCell: kt,
132
132
  sortable: !0,
133
133
  type: "string"
134
134
  },
135
135
  ...C.map(
136
- (r) => ({
137
- field: r,
136
+ (a) => ({
137
+ field: a,
138
138
  flex: 1,
139
- headerName: r,
139
+ headerName: a,
140
140
  minWidth: 100,
141
141
  renderHeader: be,
142
- renderCell: vt,
142
+ renderCell: At,
143
143
  align: "right",
144
144
  headerAlign: "right",
145
145
  sortable: !0,
146
146
  hideSortIcons: !1,
147
147
  type: "number",
148
- sortComparator: Pe
148
+ sortComparator: $e
149
149
  })
150
150
  )
151
- ], b = i.useMemo(() => {
152
- const r = n.filter(
153
- (p) => !Ye(p) && !Ue(p)
154
- ), T = (t ? r.filter(
151
+ ], b = r.useMemo(() => {
152
+ const a = n.filter(
153
+ (p) => !Xe(p) && !Ze(p)
154
+ ), T = (t ? a.filter(
155
155
  (p) => p.category_guid === t || p.top_level_category_guid === t
156
- ) : r).reduce(
156
+ ) : a).reduce(
157
157
  (p, L) => {
158
- const { category_guid: w, top_level_category_guid: I, month: k, total: D, year: N } = L, x = t ? w : I;
158
+ const { category_guid: w, top_level_category_guid: E, month: k, total: D, year: N } = L, x = t ? w : E;
159
159
  p[x] || (p[x] = {
160
160
  id: x,
161
161
  category: x,
162
162
  category_guid: w,
163
- top_level_category_guid: I
163
+ top_level_category_guid: E
164
164
  });
165
- const E = Z(new Date(N, k - 1), B.MONTH_SHORT);
166
- return p[x][E] || (p[x][E] = 0), p[x][E] = p[x][E] + Math.abs(D), p;
165
+ const I = Z(new Date(N, k - 1), B.MONTH_SHORT);
166
+ return p[x][I] || (p[x][I] = 0), p[x][I] = p[x][I] + Math.abs(D), p;
167
167
  },
168
168
  {}
169
169
  );
170
170
  return Object.values(T);
171
171
  }, [n, t]);
172
- return /* @__PURE__ */ e(O, { sx: { height: a, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
173
- ot,
172
+ return /* @__PURE__ */ e(O, { sx: { height: i, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
173
+ at,
174
174
  {
175
175
  columns: u,
176
176
  disableColumnFilter: !0,
177
177
  disableColumnMenu: !0,
178
178
  hideFooter: !0,
179
- initialState: { sorting: { sortModel: l } },
180
- onRowClick: (r) => {
181
- s?.(r.row.category), d(y.TRENDS_CLICK_LIST_ITEM, {
179
+ initialState: { sorting: { sortModel: c } },
180
+ onRowClick: (a) => {
181
+ s?.(a.row.category), d(y.TRENDS_CLICK_LIST_ITEM, {
182
182
  ...A,
183
- listItem: Me[r.row.category]
183
+ listItem: Me[a.row.category]
184
184
  });
185
185
  },
186
- onSortModelChange: (r) => {
187
- m(r), d(y.TRENDS_CLICK_TABLE_SORT, A);
186
+ onSortModelChange: (a) => {
187
+ m(a), d(y.TRENDS_CLICK_TABLE_SORT, A);
188
188
  },
189
189
  rows: b,
190
190
  slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
191
- sortModel: l,
191
+ sortModel: c,
192
192
  sortingOrder: ["asc", "desc"]
193
193
  }
194
194
  ) });
195
- }, kt = {
195
+ }, Nt = {
196
196
  title: "Transaction List"
197
- }, Ht = ({
197
+ }, Wt = ({
198
198
  categoryGuid: n,
199
199
  dateRange: o,
200
200
  isOpen: t,
201
201
  onClose: s
202
202
  }) => {
203
- const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: c, sortedTransactions: l } = ae(), [m, C] = i.useState(""), u = i.useMemo(
204
- () => l.find((r) => r.guid === m),
205
- [m, l]
203
+ const { onEvent: i } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: l, sortedTransactions: c } = ie(), [m, C] = r.useState(""), u = r.useMemo(
204
+ () => c.find((a) => a.guid === m),
205
+ [m, c]
206
206
  );
207
- i.useEffect(() => {
208
- c({
207
+ r.useEffect(() => {
208
+ l({
209
209
  accounts: h,
210
210
  dateRange: o,
211
- custom: (r) => n === "" || n === r.category_guid || n === r.top_level_category_guid,
211
+ custom: (a) => n === "" || n === a.category_guid || n === a.top_level_category_guid,
212
212
  showSplits: !!n
213
213
  });
214
- }, [h, n, o]), i.useEffect(() => a(y.TRENDS_VIEW_TRANSACTIONS), []);
214
+ }, [h, n, o]), r.useEffect(() => i(y.TRENDS_VIEW_TRANSACTIONS), []);
215
215
  const b = () => {
216
216
  C(""), s();
217
217
  };
@@ -221,70 +221,70 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
221
221
  ariaLabelClose: d.close_aria,
222
222
  isOpen: t,
223
223
  onClose: b,
224
- title: kt.title,
224
+ title: Nt.title,
225
225
  children: [
226
226
  u && /* @__PURE__ */ e(Re, { transaction: u }),
227
227
  !u && /* @__PURE__ */ e(ke, { onClick: C })
228
228
  ]
229
229
  }
230
230
  );
231
- }, Nt = M(Ht), Wt = ({ onBackClick: n, sx: o }) => {
232
- const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: d } = ie(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: l, getCategoryName: m } = F(), { sortedTransactions: C } = ae(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: L } = R(), [w, I] = i.useState(!1), [k, D] = i.useState(!1), [N, x] = i.useState("Chart"), [E, $] = i.useState(""), [z, ce] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
233
- i.useEffect(() => {
234
- const S = () => ce(window.innerHeight);
231
+ }, Ot = M(Wt), Vt = ({ onBackClick: n, sx: o }) => {
232
+ const { onEvent: t } = H(), { isDesktop: s, isTablet: i, isMobile: h } = K(), { visibleAccounts: d } = ce(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: m } = F(), { sortedTransactions: C } = ie(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: a, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: L } = R(), [w, E] = r.useState(!1), [k, D] = r.useState(!1), [N, x] = r.useState("Chart"), [I, $] = r.useState(""), [z, le] = r.useState(window.innerHeight), ee = z - (h ? 315 : 345);
233
+ r.useEffect(() => {
234
+ const S = () => le(window.innerHeight);
235
235
  return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
236
- }, []), i.useEffect(() => {
236
+ }, []), r.useEffect(() => {
237
237
  p(d);
238
- }, [d]), i.useEffect(() => {
239
- g && c(
238
+ }, [d]), r.useEffect(() => {
239
+ g && l(
240
240
  T,
241
241
  u.start,
242
242
  u.end
243
243
  ).finally(() => {
244
- I(!0);
244
+ E(!0);
245
245
  });
246
246
  }, [g, T, u]);
247
- const te = i.useMemo(() => {
247
+ const te = r.useMemo(() => {
248
248
  if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
249
- const S = Ke(
250
- l,
249
+ const S = je(
250
+ c,
251
251
  u.start,
252
252
  u.end
253
- ), W = E.length ? S.filter(
254
- (G) => G.top_level_category_guid === E || G.category_guid === E
255
- ) : Xe(S);
253
+ ), W = I.length ? S.filter(
254
+ (G) => G.top_level_category_guid === I || G.category_guid === I
255
+ ) : Qe(S);
256
256
  return {
257
- stackedDatasets: W.filter(Ze),
258
- unstackedDatasets: W.filter(Qe)
257
+ stackedDatasets: W.filter(qe),
258
+ unstackedDatasets: W.filter(Je)
259
259
  };
260
- }, [l, E, u]), ne = (S, W) => {
260
+ }, [c, I, u]), ne = (S, W) => {
261
261
  x(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
262
262
  }, oe = (S) => {
263
263
  const W = Ie(S?.[0], 1), G = S?.[1], ge = Ce(G, W);
264
264
  b({ start: W, end: G }), t(y.TRENDS_CLICK_TIME_WINDOW, {
265
265
  time_period: ge + "M"
266
266
  });
267
- }, le = () => {
267
+ }, de = () => {
268
268
  t(y.TRENDS_CLICK_FILTER);
269
269
  }, se = (S) => {
270
270
  $(S);
271
- }, de = (S) => {
272
- $(S), t(y.TRENDS_CLICK_LEGEND, { category: m(S) });
273
271
  }, he = (S) => {
272
+ $(S), t(y.TRENDS_CLICK_LEGEND, { category: m(S) });
273
+ }, ae = (S) => {
274
274
  t(y.TRENDS_HOVER_LEGEND, { category: m(S) });
275
275
  }, ue = (S) => {
276
276
  t(y.TRENDS_HOVER_AREA, { category: S });
277
277
  }, me = (S) => {
278
278
  t(y.TRENDS_HOVER_POINT, { category: S });
279
279
  };
280
- return !r || !g || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
280
+ return !a || !g || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
281
281
  Ae,
282
282
  {
283
283
  accountOptions: d,
284
284
  calendarActions: { onRangeChanged: oe },
285
285
  dateRange: u,
286
286
  dateRangeVariant: "timeframebuttons",
287
- onAccountsFilterClick: le,
287
+ onAccountsFilterClick: de,
288
288
  onBackClick: n,
289
289
  sx: o,
290
290
  title: L.title,
@@ -294,7 +294,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
294
294
  {
295
295
  sx: {
296
296
  // eslint-disable-next-line no-nested-ternary
297
- px: s ? 48 : a ? 24 : 12
297
+ px: s ? 48 : i ? 24 : 12
298
298
  },
299
299
  children: [
300
300
  /* @__PURE__ */ f(
@@ -307,7 +307,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
307
307
  /* @__PURE__ */ e(
308
308
  Oe,
309
309
  {
310
- selectedCategoryGuid: E,
310
+ selectedCategoryGuid: I,
311
311
  selectedDateRange: u
312
312
  }
313
313
  ),
@@ -316,7 +316,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
316
316
  }
317
317
  ),
318
318
  /* @__PURE__ */ f(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
319
- /* @__PURE__ */ e(O, { flexGrow: 1, children: E && /* @__PURE__ */ f(pe, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
319
+ /* @__PURE__ */ e(O, { flexGrow: 1, children: I && /* @__PURE__ */ f(pe, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
320
320
  /* @__PURE__ */ e(re, { name: "arrow_back" }),
321
321
  L.all_categories
322
322
  ] }) }),
@@ -324,12 +324,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
324
324
  ] }),
325
325
  /* @__PURE__ */ f(O, { children: [
326
326
  N === "Chart" && /* @__PURE__ */ e(
327
- $e,
327
+ Ye,
328
328
  {
329
329
  availableHeight: ee,
330
- onClickLegend: de,
330
+ onClickLegend: he,
331
331
  onHoverArea: ue,
332
- onHoverLegend: he,
332
+ onHoverLegend: ae,
333
333
  onHoverPoint: me,
334
334
  stackedDatasets: te.stackedDatasets,
335
335
  unstackedDatasets: te.unstackedDatasets
@@ -338,9 +338,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
338
338
  N === "Table" && /* @__PURE__ */ e(
339
339
  Ve,
340
340
  {
341
- monthlyCategoryTotals: l,
341
+ monthlyCategoryTotals: c,
342
342
  onClickRow: se,
343
- selectedCategory: E,
343
+ selectedCategory: I,
344
344
  selectedDateRange: u
345
345
  }
346
346
  )
@@ -349,9 +349,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
349
349
  }
350
350
  ),
351
351
  /* @__PURE__ */ e(
352
- Nt,
352
+ Ot,
353
353
  {
354
- categoryGuid: E,
354
+ categoryGuid: I,
355
355
  dateRange: u,
356
356
  isOpen: k,
357
357
  onClose: () => D(!1)
@@ -360,8 +360,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
360
360
  ]
361
361
  }
362
362
  );
363
- }, Yn = M(Wt), Ot = () => {
364
- const n = He(), { monthlyCategoryTotals: o } = F(), { trends: t } = R(), s = qe(o);
363
+ }, Xn = M(Vt), Gt = () => {
364
+ const n = He(), { monthlyCategoryTotals: o } = F(), { trends: t } = R(), s = et(o);
365
365
  return /* @__PURE__ */ e(
366
366
  ye,
367
367
  {
@@ -378,35 +378,35 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
378
378
  valueFormatterString: "0,0"
379
379
  }
380
380
  );
381
- }, Vt = M(Ot), Gt = ({ onPrimaryCtaClick: n, sx: o }) => {
382
- const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: c, selectedAccounts: l, setSelectedAccounts: m } = P();
383
- return i.useEffect(() => {
381
+ }, Bt = M(Gt), zt = ({ onPrimaryCtaClick: n, sx: o }) => {
382
+ const { visibleAccounts: t } = ce(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: i } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: m } = P();
383
+ return r.useEffect(() => {
384
384
  m(t);
385
- }, [t]), i.useEffect(() => {
386
- h && s(l).finally();
387
- }, [h, l]), !c || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
388
- it,
385
+ }, [t]), r.useEffect(() => {
386
+ h && s(c).finally();
387
+ }, [h, c]), !l || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
388
+ lt,
389
389
  {
390
390
  onPrimaryCtaClick: n,
391
391
  primaryCtaLabel: d.primary_cta,
392
392
  subTitle: d.sub_title,
393
393
  sx: o,
394
394
  title: d.mini_title,
395
- children: a ? /* @__PURE__ */ e(Vt, {}) : /* @__PURE__ */ e(Q, {})
395
+ children: i ? /* @__PURE__ */ e(Bt, {}) : /* @__PURE__ */ e(Q, {})
396
396
  }
397
397
  );
398
- }, Un = M(Gt), Bt = 70, Se = ({
398
+ }, Zn = M(zt), Ft = 70, Se = ({
399
399
  title: n,
400
400
  totalAmount: o,
401
401
  transactionType: t,
402
402
  percentage: s,
403
- secondaryLabel: a,
403
+ secondaryLabel: i,
404
404
  shouldDisplayPercentage: h
405
405
  }) => {
406
- const { availableWidth: d } = tt(), c = i.useRef(null), l = i.useRef(null), m = gt(Number(Math.abs(s)), {
406
+ const { availableWidth: d } = ot(), l = r.useRef(null), c = r.useRef(null), m = Ct(Number(Math.abs(s)), {
407
407
  style: "percent",
408
408
  minimumIntegerDigits: 1
409
- }), C = d === 288 && U(o, "0,0.00").length > 10 ? U(o, "0,0") : U(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, b = t === "spending" ? "error.main" : "success.main", r = t === "spending" ? "success.main" : "text.secondary", g = c?.current, T = l?.current, p = g && T ? g.scrollWidth > T.clientWidth - Bt : !1;
409
+ }), C = d === 288 && U(o, "0,0.00").length > 10 ? U(o, "0,0") : U(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, b = t === "spending" ? "error.main" : "success.main", a = t === "spending" ? "success.main" : "text.secondary", g = l?.current, T = c?.current, p = g && T ? g.scrollWidth > T.clientWidth - Ft : !1;
410
410
  return /* @__PURE__ */ f(
411
411
  _,
412
412
  {
@@ -431,12 +431,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
431
431
  children: [
432
432
  /* @__PURE__ */ e(Y, { color: "text.secondary", variant: "caption", children: n }),
433
433
  h && /* @__PURE__ */ f(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
434
- u ? /* @__PURE__ */ e(lt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(dt, { size: 20, sx: { color: r } }),
434
+ u ? /* @__PURE__ */ e(ht, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(ut, { size: 20, sx: { color: a } }),
435
435
  /* @__PURE__ */ e(
436
436
  Y,
437
437
  {
438
438
  sx: {
439
- color: u ? b : r,
439
+ color: u ? b : a,
440
440
  fontWeight: 600
441
441
  },
442
442
  variant: "body2",
@@ -450,7 +450,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
450
450
  /* @__PURE__ */ f(
451
451
  _,
452
452
  {
453
- ref: l,
453
+ ref: c,
454
454
  sx: {
455
455
  alignItems: "center",
456
456
  flexDirection: "row",
@@ -460,7 +460,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
460
460
  /* @__PURE__ */ e(
461
461
  O,
462
462
  {
463
- ref: c,
463
+ ref: l,
464
464
  sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
465
465
  children: /* @__PURE__ */ e(De, { children: C })
466
466
  }
@@ -468,9 +468,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
468
468
  h && d >= 450 && !p && /* @__PURE__ */ e(
469
469
  Y,
470
470
  {
471
- color: u ? b : r,
471
+ color: u ? b : a,
472
472
  variant: "caption",
473
- children: a
473
+ children: i
474
474
  }
475
475
  )
476
476
  ]
@@ -479,49 +479,49 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
479
479
  ]
480
480
  }
481
481
  );
482
- }, zt = M(() => {
482
+ }, Pt = M(() => {
483
483
  const { trends: n } = R();
484
484
  return /* @__PURE__ */ f(_, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
485
- /* @__PURE__ */ e(ht, { size: 32 }),
485
+ /* @__PURE__ */ e(mt, { size: 32 }),
486
486
  /* @__PURE__ */ f(_, { children: [
487
487
  /* @__PURE__ */ e(Y, { fontWeight: 600, variant: "body1", children: n.zero_state_content_header }),
488
488
  /* @__PURE__ */ e(Y, { color: "text.secondary", variant: "subtitle2", children: n.zero_state_content_description })
489
489
  ] })
490
490
  ] });
491
- }), Xn = M(({ onCtaClick: n }) => {
492
- const { visibleAccounts: o } = ie(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = F(), d = {
493
- start: ct(/* @__PURE__ */ new Date(), 1),
491
+ }), Qn = M(({ onCtaClick: n }) => {
492
+ const { visibleAccounts: o } = ce(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: i, monthlyTotalsLoaded: h } = F(), d = {
493
+ start: dt(/* @__PURE__ */ new Date(), 1),
494
494
  end: /* @__PURE__ */ new Date()
495
- }, { trends: c } = R(), { selectedAccounts: l, setSelectedAccounts: m, isInitialized: C } = P();
496
- i.useEffect(() => {
495
+ }, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: m, isInitialized: C } = P();
496
+ r.useEffect(() => {
497
497
  m(o);
498
- }, [o]), i.useEffect(() => {
499
- C && a(l, d.start).then(() => {
498
+ }, [o]), r.useEffect(() => {
499
+ C && i(c, d.start).then(() => {
500
500
  t(y.TRENDS_LOAD_WIDGET, {
501
501
  state: o?.length ? "default" : "zeroState"
502
502
  });
503
503
  });
504
- }, [C, l]);
505
- const { spendingData: u, incomeData: b } = i.useMemo(
504
+ }, [C, c]);
505
+ const { spendingData: u, incomeData: b } = r.useMemo(
506
506
  () => ({
507
507
  spendingData: Le(s, d),
508
508
  incomeData: xe(s, d)
509
509
  }),
510
510
  [s, d]
511
- ), [r, g] = u, [T, p] = b, L = _e(g.y, r.y), w = _e(p.y, T.y), I = C && !o?.length, k = () => {
511
+ ), [a, g] = u, [T, p] = b, L = _e(g.y, a.y), w = _e(p.y, T.y), E = C && !o?.length, k = () => {
512
512
  t(
513
- I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
513
+ E ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
514
514
  ), n();
515
515
  };
516
516
  return !h || !C ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
517
- pt,
517
+ ft,
518
518
  {
519
519
  className: "mx-trends-microwidget",
520
- ctaLabel: c.micro_primary_cta_label,
520
+ ctaLabel: l.micro_primary_cta_label,
521
521
  onCTAClick: k,
522
- subHeader: I ? void 0 : c.micro_subheader,
523
- title: c.title,
524
- children: I ? /* @__PURE__ */ e(zt, {}) : /* @__PURE__ */ f(
522
+ subHeader: E ? void 0 : l.micro_subheader,
523
+ title: l.title,
524
+ children: E ? /* @__PURE__ */ e(Pt, {}) : /* @__PURE__ */ f(
525
525
  _,
526
526
  {
527
527
  sx: {
@@ -534,9 +534,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
534
534
  Se,
535
535
  {
536
536
  percentage: L,
537
- secondaryLabel: c.micro_secondary_label,
538
- shouldDisplayPercentage: g.y !== 0 && r.y !== 0,
539
- title: c.spending_label,
537
+ secondaryLabel: l.micro_secondary_label,
538
+ shouldDisplayPercentage: g.y !== 0 && a.y !== 0,
539
+ title: l.spending_label,
540
540
  totalAmount: g.y,
541
541
  transactionType: "spending"
542
542
  }
@@ -545,9 +545,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
545
545
  Se,
546
546
  {
547
547
  percentage: w,
548
- secondaryLabel: c.micro_secondary_label,
548
+ secondaryLabel: l.micro_secondary_label,
549
549
  shouldDisplayPercentage: p.y !== 0 && T.y !== 0,
550
- title: c.income_label,
550
+ title: l.income_label,
551
551
  totalAmount: p.y,
552
552
  transactionType: "income"
553
553
  }
@@ -557,17 +557,17 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
557
557
  )
558
558
  }
559
559
  );
560
- }), Ft = M(
560
+ }), Kt = M(
561
561
  ({ isExpanded: n, onClick: o }) => {
562
562
  const t = Ne();
563
- return /* @__PURE__ */ e(Tt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(yt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ f(
563
+ return /* @__PURE__ */ e(_t, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(bt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ f(
564
564
  _,
565
565
  {
566
566
  sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
567
567
  children: [
568
- /* @__PURE__ */ e(bt, { children: /* @__PURE__ */ e(X, { bold: !0, variant: "body2", children: n ? "View less" : "View more" }) }),
569
- /* @__PURE__ */ e(_t, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(ut, {}) : /* @__PURE__ */ e(
570
- mt,
568
+ /* @__PURE__ */ e(wt, { children: /* @__PURE__ */ e(X, { bold: !0, variant: "body2", children: n ? "View less" : "View more" }) }),
569
+ /* @__PURE__ */ e(St, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(gt, {}) : /* @__PURE__ */ e(
570
+ pt,
571
571
  {
572
572
  sx: {
573
573
  transition: "transform 0.3s ease-in-out",
@@ -585,57 +585,57 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
585
585
  guid: o,
586
586
  name: t,
587
587
  transactions: s,
588
- onClick: a,
588
+ onClick: i,
589
589
  isLastItem: h = !1,
590
590
  showDivider: d = !0
591
591
  }) => {
592
- const { trends: c } = R(), { onEvent: l } = H(), m = `${s.length} ${s.length === 1 ? c.transaction : c.transactions}`, C = () => {
593
- a?.(), l(y.TRENDS_CLICK_LIST_ITEM, {
592
+ const { trends: l } = R(), { onEvent: c } = H(), m = `${s.length} ${s.length === 1 ? l.transaction : l.transactions}`, C = () => {
593
+ i?.(), c(y.TRENDS_CLICK_LIST_ITEM, {
594
594
  ...A,
595
595
  listItem: t
596
596
  });
597
597
  };
598
- return /* @__PURE__ */ f(i.Fragment, { children: [
598
+ return /* @__PURE__ */ f(r.Fragment, { children: [
599
599
  /* @__PURE__ */ e(
600
600
  Ee,
601
601
  {
602
602
  leftIcon: o ? /* @__PURE__ */ e(Te, { categoryGuid: o }) : void 0,
603
603
  onClick: C,
604
604
  rightContent: U(Math.abs(n), "0,0.00"),
605
- rightIcon: a ? /* @__PURE__ */ e(Fe, {}) : void 0,
605
+ rightIcon: i ? /* @__PURE__ */ e(Ke, {}) : void 0,
606
606
  subtitle: m,
607
607
  title: t
608
608
  }
609
609
  ),
610
- d && /* @__PURE__ */ e(St, { sx: { ml: h ? 24 : 68 } })
610
+ d && /* @__PURE__ */ e(Dt, { sx: { ml: h ? 24 : 68 } })
611
611
  ] }, o);
612
612
  }
613
- ), Pt = M(
613
+ ), $t = M(
614
614
  ({ availableHeight: n = 0, onCategoryClick: o }) => {
615
- const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: c } = R(), { onEvent: l } = H(), [m, C] = i.useState(!1), u = d || h;
616
- i.useEffect(() => {
615
+ const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: i } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: l } = R(), { onEvent: c } = H(), [m, C] = r.useState(!1), u = d || h;
616
+ r.useEffect(() => {
617
617
  const g = Math.floor(n / 64) - 1, T = s.length + t.length;
618
- g !== s.length && (a(u ? Math.max(g, 5) : 5), C(g >= T));
618
+ g !== s.length && (i(u ? Math.max(g, 5) : 5), C(g >= T));
619
619
  }, [n]);
620
620
  const b = () => {
621
- C(!m), l(y.TRENDS_CLICK_VIEW_MORE, {
621
+ C(!m), c(y.TRENDS_CLICK_VIEW_MORE, {
622
622
  ...A
623
623
  });
624
- }, r = s.length + (m ? t.length : 0);
625
- return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(ft, { children: [
626
- /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: c.categories }) }),
624
+ }, a = s.length + (m ? t.length : 0);
625
+ return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(yt, { children: [
626
+ /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: l.categories }) }),
627
627
  s.map((g, T) => /* @__PURE__ */ e(
628
628
  we,
629
629
  {
630
630
  ...g,
631
- isLastItem: T === r - 1,
631
+ isLastItem: T === a - 1,
632
632
  onClick: g.transactions.length > 0 ? () => o(g) : void 0,
633
633
  showDivider: !0
634
634
  },
635
635
  g.guid
636
636
  )),
637
637
  /* @__PURE__ */ e(
638
- Ct,
638
+ Tt,
639
639
  {
640
640
  in: m,
641
641
  sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
@@ -645,7 +645,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
645
645
  we,
646
646
  {
647
647
  ...g,
648
- isLastItem: p === r - 1,
648
+ isLastItem: p === a - 1,
649
649
  onClick: g.transactions.length > 0 ? () => o(g) : void 0,
650
650
  showDivider: !0
651
651
  },
@@ -654,10 +654,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
654
654
  })
655
655
  }
656
656
  ),
657
- t.length > 0 && /* @__PURE__ */ e(Ft, { isExpanded: m, onClick: b })
657
+ t.length > 0 && /* @__PURE__ */ e(Kt, { isExpanded: m, onClick: b })
658
658
  ] }) });
659
659
  }
660
- ), Kt = [
660
+ ), jt = [
661
661
  "BillAmountNotStandard",
662
662
  "CategorySpendingV2",
663
663
  "CostOfLivingToIncome",
@@ -691,38 +691,38 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
691
691
  "WeeklyNewMerchantsV2",
692
692
  "WeeklyNoSpendDays",
693
693
  "WeeklySmallPurchasesSummary"
694
- ], $t = ({ onInsightCardClick: n }) => {
695
- const o = wt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: d, endpoint: c, sessionToken: l } = ve(), { isInitialized: m } = P(), [C, u] = i.useState(!1), b = o.palette.mode === "dark", r = a || h, g = r || s ? 1 : 2;
696
- i.useEffect(() => {
694
+ ], Yt = ({ onInsightCardClick: n }) => {
695
+ const o = It(), { onEvent: t } = H(), { isMobile: s, isDesktop: i, isLargeDesktop: h } = K(), { beatStore: d, endpoint: l, sessionToken: c } = ve(), { isInitialized: m } = P(), [C, u] = r.useState(!1), b = o.palette.mode === "dark", a = i || h, g = a || s ? 1 : 2;
696
+ r.useEffect(() => {
697
697
  m && d.loadBeats().finally(() => u(!0));
698
698
  }, [m]);
699
- const T = i.useMemo(() => C ? d.getFilteredBeats({ templates: Kt }) : [], [C]), p = () => null, L = (D) => {
699
+ const T = r.useMemo(() => C ? d.getFilteredBeats({ templates: jt }) : [], [C]), p = () => null, L = (D) => {
700
700
  n?.(D), t(y.TRENDS_CLICK_INSIGHT, A);
701
- }, w = r ? 200 : 170, I = r ? 170 : 124, k = T.length > 0 ? w : I;
702
- return /* @__PURE__ */ e(Dt, { sx: { height: k }, children: /* @__PURE__ */ e(
703
- at,
701
+ }, w = a ? 200 : 170, E = a ? 170 : 124, k = T.length > 0 ? w : E;
702
+ return /* @__PURE__ */ e(Et, { sx: { height: k }, children: /* @__PURE__ */ e(
703
+ ct,
704
704
  {
705
705
  areBeatsLoading: d.isLoading,
706
706
  beats: T,
707
- endpoint: c,
707
+ endpoint: l,
708
708
  logOutUser: p,
709
709
  onCardClick: L,
710
710
  showBorder: !0,
711
711
  showCTAColocatedWithText: !1,
712
712
  showCarouselControls: !0,
713
- showHeader: r,
713
+ showHeader: a,
714
714
  showIcon: !0,
715
715
  showWithMargin: !1,
716
- token: l,
716
+ token: c,
717
717
  useDarkMode: b,
718
718
  userHasFullInsightFeedBeats: !1,
719
719
  variant: "outlined",
720
720
  visibleCardsCount: g
721
721
  }
722
722
  ) });
723
- }, jt = M($t), Yt = M(({ chartLabel: n, chartColor: o }) => {
723
+ }, Ut = M(Yt), Xt = M(({ chartLabel: n, chartColor: o }) => {
724
724
  const { onEvent: t } = H(), {
725
- categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: a }
725
+ categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: i }
726
726
  } = q();
727
727
  return /* @__PURE__ */ e(_, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
728
728
  ye,
@@ -730,7 +730,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
730
730
  baseline: "min",
731
731
  colors: [o],
732
732
  curveType: "bump",
733
- customTooltipLabels: a,
733
+ customTooltipLabels: i,
734
734
  datasets: [s],
735
735
  height: 265,
736
736
  labels: [n],
@@ -753,47 +753,47 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
753
753
  valueFormatterString: "0,0"
754
754
  }
755
755
  ) });
756
- }), Ut = M(({ onClose: n }) => {
757
- const o = Ne(), { onEvent: t } = H(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: c } = ae(), [l, m] = i.useState(null);
756
+ }), Zt = M(({ onClose: n }) => {
757
+ const o = Ne(), { onEvent: t } = H(), { common: s, trends: i } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: l } = ie(), [c, m] = r.useState(null);
758
758
  if (!h)
759
759
  return null;
760
- const { guid: C, name: u, is_income: b, totalAmount: r } = h, g = b ? a.category_income : a.category_spending, T = Et(C, o), p = b ? a.income_label : a.spending_label, L = ` ${h.transactions.length === 1 ? a.transaction : a.transactions} (${h.transactions.length})`, w = i.useMemo(
761
- () => c.find((D) => D.guid === l),
762
- [l, c]
763
- ), I = (D) => D.category_guid === C || D.top_level_category_guid === C, k = () => {
760
+ const { guid: C, name: u, is_income: b, totalAmount: a } = h, g = b ? i.category_income : i.category_spending, T = xt(C, o), p = b ? i.income_label : i.spending_label, L = ` ${h.transactions.length === 1 ? i.transaction : i.transactions} (${h.transactions.length})`, w = r.useMemo(
761
+ () => l.find((D) => D.guid === c),
762
+ [c, l]
763
+ ), E = (D) => D.category_guid === C || D.top_level_category_guid === C, k = () => {
764
764
  n?.(), t(y.TRENDS_CLICK_BACK, A);
765
765
  };
766
766
  return /* @__PURE__ */ f(
767
767
  fe,
768
768
  {
769
- ariaLabelClose: a.close_category_details,
769
+ ariaLabelClose: i.close_category_details,
770
770
  isOpen: !0,
771
771
  onClose: k,
772
772
  shouldShowHeaderShadow: !0,
773
773
  title: g,
774
774
  children: [
775
775
  /* @__PURE__ */ f(_, { sx: { alignItems: "center", height: "100%" }, children: [
776
- /* @__PURE__ */ f(It, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
776
+ /* @__PURE__ */ f(Lt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
777
777
  /* @__PURE__ */ e(
778
778
  Ee,
779
779
  {
780
780
  leftIcon: /* @__PURE__ */ e(Te, { categoryGuid: C }),
781
- rightContent: U(Math.abs(r), "0,0.00"),
781
+ rightContent: U(Math.abs(a), "0,0.00"),
782
782
  subtitle: d,
783
783
  title: u
784
784
  }
785
785
  ),
786
- /* @__PURE__ */ e(Yt, { chartColor: T, chartLabel: p }),
786
+ /* @__PURE__ */ e(Xt, { chartColor: T, chartLabel: p }),
787
787
  /* @__PURE__ */ f(_, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
788
788
  /* @__PURE__ */ e(X, { bold: !0, variant: "body1", children: L }),
789
- /* @__PURE__ */ e(Lt, { filter: I })
789
+ /* @__PURE__ */ e(vt, { filter: E })
790
790
  ] })
791
791
  ] }),
792
792
  /* @__PURE__ */ e(
793
793
  ke,
794
794
  {
795
795
  bgcolor: "transparent",
796
- filter: I,
796
+ filter: E,
797
797
  height: "calc(100vh - 475px)",
798
798
  onClick: m
799
799
  }
@@ -805,35 +805,35 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
805
805
  ariaLabelClose: s.close_aria,
806
806
  isOpen: !!w,
807
807
  onClose: () => m(""),
808
- title: a.transaction,
808
+ title: i.transaction,
809
809
  children: w && /* @__PURE__ */ e(Re, { transaction: w })
810
810
  }
811
811
  )
812
812
  ]
813
813
  }
814
814
  );
815
- }), Xt = (n, o) => {
815
+ }), Qt = (n, o) => {
816
816
  const t = xe(n, o), s = Le(n, o);
817
- return [t, s].filter((a) => a.length > 0);
818
- }, Zt = (n, o) => {
819
- const [t, s] = n, a = t, h = s ?? t, d = [];
820
- if (a) {
821
- const c = a.reduce((l, m) => l + m.y, 0);
822
- d.push({ label: o.income_label, amount: c });
817
+ return [t, s].filter((i) => i.length > 0);
818
+ }, qt = (n, o) => {
819
+ const [t, s] = n, i = t, h = s ?? t, d = [];
820
+ if (i) {
821
+ const l = i.reduce((c, m) => c + m.y, 0);
822
+ d.push({ label: o.income_label, amount: l });
823
823
  }
824
824
  if (h) {
825
- const c = h.reduce((l, m) => l + m.y, 0);
826
- d.push({ label: o.spending_label, amount: c });
825
+ const l = h.reduce((c, m) => c + m.y, 0);
826
+ d.push({ label: o.spending_label, amount: l });
827
827
  }
828
828
  return d;
829
- }, Qt = ({
829
+ }, Jt = ({
830
830
  availableHeight: n = 0,
831
831
  minHeight: o = 500,
832
832
  selectedDateRange: t,
833
833
  totals: s
834
834
  }) => {
835
- const a = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: c, isMobile: l, isSmallTablet: m, isTablet: C } = K(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = Xt(s, t), r = Zt(b, d), [g, T] = i.useState(0), p = 458, L = 195, w = 56, I = l || c ? L : m || C ? p : g;
836
- return i.useEffect(() => {
835
+ const i = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: m, isTablet: C } = K(), u = [i.palette.chart?.chart1, i.palette.chart?.chart2], b = Qt(s, t), a = qt(b, d), [g, T] = r.useState(0), p = 458, L = 195, w = 56, E = c || l ? L : m || C ? p : g;
836
+ return r.useEffect(() => {
837
837
  const D = Math.max(n - w, o);
838
838
  T(D);
839
839
  }, [n]), /* @__PURE__ */ e(
@@ -843,8 +843,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
843
843
  colors: u,
844
844
  curveType: "bump",
845
845
  datasets: b,
846
- height: I,
847
- labels: r,
846
+ height: E,
847
+ labels: a,
848
848
  onItemClick: () => {
849
849
  h(y.TRENDS_CLICK_CHART, A);
850
850
  },
@@ -859,37 +859,39 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
859
859
  valueFormatterString: "0,0"
860
860
  }
861
861
  );
862
- }, qt = M(Qt), Jt = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
863
- const { onEvent: s } = H(), { config: a } = nt(), { isLargeDesktop: h, isDesktop: d, isMobile: c } = K(), { visibleAccounts: l } = ie(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = ae(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
862
+ }, en = M(Jt), tn = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
863
+ const { onEvent: s } = H(), { config: i } = st(), { isLargeDesktop: h, isDesktop: d, isMobile: l } = K(), { visibleAccounts: c } = ce(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = ie(), { selectedDateRange: a, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
864
864
  isCopyLoaded: p,
865
865
  isInitialized: L,
866
866
  selectedAccounts: w,
867
- selectedAccountGuids: I,
867
+ selectedAccountGuids: E,
868
868
  setSelectedAccounts: k
869
- } = P(), { trends: D } = R(), N = je(), x = d || h, [E, $] = i.useState(!1), [z, ce] = i.useState("Chart"), [J, ee] = i.useState(""), [te, ne] = i.useState(!1), [oe, le] = i.useState(window.innerHeight), se = oe - 208, de = oe - (N ? 494 : 266);
870
- i.useEffect(() => {
871
- const v = () => le(window.innerHeight);
869
+ } = P(), { trends: D } = R(), N = Ue(), x = d || h, [I, $] = r.useState(!1), [z, le] = r.useState("Chart"), [J, ee] = r.useState(""), [te, ne] = r.useState(!1), [oe, de] = r.useState(!0), [se, he] = r.useState(window.innerHeight), ae = se - 208, ue = se - (N ? 494 : 266);
870
+ r.useEffect(() => {
871
+ const v = () => he(window.innerHeight);
872
872
  return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
873
- }, []), i.useEffect(() => {
874
- k(l);
875
- }, [l]), i.useEffect(() => {
876
- L && m(w, r.start, r.end).then(() => {
873
+ }, []), r.useEffect(() => {
874
+ k(c);
875
+ }, [c]), r.useEffect(() => {
876
+ L && m(w, a.start, a.end).then(() => {
877
877
  C(
878
878
  w,
879
- r.start,
880
- r.end
879
+ a.start,
880
+ a.end
881
881
  );
882
882
  }).finally(() => {
883
883
  $(!0), s(y.TRENDS_LOAD_WIDGET, {
884
884
  ...A,
885
- time_period: `${Ce(r.end, r.start)}M`
885
+ time_period: `${Ce(a.end, a.start)}M`
886
886
  });
887
887
  });
888
- }, [L, w, r]), i.useEffect(() => {
888
+ }, [L, w, a]), r.useEffect(() => {
889
+ console.log("inside new use effect"), console.log(I && (c?.length ?? 0) > 0), I && (c?.length ?? 0) > 0 && de(!1);
890
+ }, [I, c]), r.useEffect(() => {
889
891
  if (u.length !== 0) {
890
892
  const v = {
891
- accounts: I,
892
- dateRange: { start: r.start, end: r.end }
893
+ accounts: E,
894
+ dateRange: { start: a.start, end: a.end }
893
895
  };
894
896
  b({
895
897
  ...v,
@@ -899,48 +901,61 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
899
901
  });
900
902
  }
901
903
  }, [u]);
902
- const he = (v) => {
904
+ const me = (v) => {
903
905
  g(v), ne(!0);
904
- }, ue = () => {
906
+ }, S = () => {
905
907
  g(null), ne(!1);
906
- }, me = (v, V) => {
907
- ce(V ?? z), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
908
+ }, W = (v, V) => {
909
+ le(V ?? z), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
908
910
  ...A,
909
911
  toggleView: V
910
912
  });
911
- }, S = (v) => {
912
- const V = Ie(v?.[0], 1), j = v?.[1], Be = Ce(j, V);
913
+ }, G = (v) => {
914
+ const V = Ie(v?.[0], 1), j = v?.[1], Fe = Ce(j, V);
913
915
  T({ start: V, end: j }), s(y.TRENDS_CLICK_TIME_WINDOW, {
914
916
  ...A,
915
- time_period: Be + "M"
917
+ time_period: Fe + "M"
916
918
  });
917
- }, W = (v) => {
919
+ }, ge = (v) => {
918
920
  s(y.TRENDS_CLICK_FILTER, {
919
921
  ...A,
920
922
  filterValue: v
921
923
  });
922
- }, G = (v) => {
924
+ }, Ge = (v) => {
923
925
  ee(v);
924
- }, ge = () => {
926
+ }, Be = () => {
925
927
  ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
926
- }, Ge = a.show_connections_widget_in_master ? "buttons" : "no-buttons";
927
- return !p || !E ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
928
+ }, ze = i.show_connections_widget_in_master ? "buttons" : "no-buttons";
929
+ return !p || !I ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
928
930
  Ae,
929
931
  {
930
- accountOptions: l,
931
- calendarActions: { onRangeChanged: S },
932
- dateRange: r,
933
- dateRangeVariant: c ? "timeframetabs" : "timeframebuttons",
934
- onAccountsFilterClick: W,
932
+ accountOptions: c,
933
+ calendarActions: { onRangeChanged: G },
934
+ dateRange: a,
935
+ dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
936
+ onAccountsFilterClick: ge,
935
937
  onBackClick: n,
936
938
  sx: t,
937
939
  title: D.title,
938
940
  children: [
939
- E && l.length > 0 && /* @__PURE__ */ f(
941
+ oe && /* @__PURE__ */ e(
942
+ Mt,
943
+ {
944
+ header: D.zero_state_content_header,
945
+ icon: "",
946
+ onClick: () => {
947
+ },
948
+ primaryButton: D.empty_state_primary,
949
+ subText: D.empty_state_sub_text,
950
+ sx: { height: ae },
951
+ variant: ze
952
+ }
953
+ ),
954
+ !oe && /* @__PURE__ */ f(
940
955
  _,
941
956
  {
942
957
  sx: {
943
- px: c ? 0 : 48
958
+ px: l ? 0 : 48
944
959
  },
945
960
  children: [
946
961
  /* @__PURE__ */ f(
@@ -948,41 +963,41 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
948
963
  {
949
964
  flexDirection: "row",
950
965
  justifyContent: "space-between",
951
- sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
966
+ sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
952
967
  children: [
953
968
  /* @__PURE__ */ e(
954
969
  Oe,
955
970
  {
956
971
  selectedCategoryGuid: J,
957
- selectedDateRange: r
972
+ selectedDateRange: a
958
973
  }
959
974
  ),
960
- /* @__PURE__ */ e(We, { onTabChange: me, selectedTab: z })
975
+ /* @__PURE__ */ e(We, { onTabChange: W, selectedTab: z })
961
976
  ]
962
977
  }
963
978
  ),
964
- /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ f(pe, { onClick: ge, sx: { p: 0, pr: 5 }, children: [
979
+ /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ f(pe, { onClick: Be, sx: { p: 0, pr: 5 }, children: [
965
980
  /* @__PURE__ */ e(re, { name: "arrow_back" }),
966
981
  D.all_categories
967
982
  ] }) }) }),
968
983
  /* @__PURE__ */ f(_, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
969
- z === "Chart" && /* @__PURE__ */ f(ze, { children: [
984
+ z === "Chart" && /* @__PURE__ */ f(Pe, { children: [
970
985
  /* @__PURE__ */ e(O, { sx: { width: x ? "68%" : "100%" }, children: /* @__PURE__ */ e(
971
- qt,
986
+ en,
972
987
  {
973
- availableHeight: se,
988
+ availableHeight: ae,
974
989
  minHeight: 450,
975
- selectedDateRange: r,
990
+ selectedDateRange: a,
976
991
  totals: u
977
992
  }
978
993
  ) }),
979
994
  /* @__PURE__ */ f(_, { gap: 16, sx: { width: x ? "32%" : "100%" }, children: [
980
- N && /* @__PURE__ */ e(jt, { onInsightCardClick: o }),
995
+ N && /* @__PURE__ */ e(Ut, { onInsightCardClick: o }),
981
996
  /* @__PURE__ */ e(
982
- Pt,
997
+ $t,
983
998
  {
984
- availableHeight: de,
985
- onCategoryClick: he
999
+ availableHeight: ue,
1000
+ onCategoryClick: me
986
1001
  }
987
1002
  )
988
1003
  ] })
@@ -992,37 +1007,24 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
992
1007
  {
993
1008
  height: "unset",
994
1009
  monthlyCategoryTotals: u,
995
- onClickRow: G,
1010
+ onClickRow: Ge,
996
1011
  selectedCategory: J,
997
- selectedDateRange: r
1012
+ selectedDateRange: a
998
1013
  }
999
1014
  ) })
1000
1015
  ] }),
1001
- te && /* @__PURE__ */ e(Ut, { onClose: ue })
1016
+ te && /* @__PURE__ */ e(Zt, { onClose: S })
1002
1017
  ]
1003
1018
  }
1004
- ),
1005
- E && l.length === 0 && /* @__PURE__ */ e(
1006
- xt,
1007
- {
1008
- header: D.zero_state_content_header,
1009
- icon: "",
1010
- onClick: () => {
1011
- },
1012
- primaryButton: D.empty_state_primary,
1013
- subText: D.empty_state_sub_text,
1014
- sx: { height: se },
1015
- variant: Ge
1016
- }
1017
1019
  )
1018
1020
  ]
1019
1021
  }
1020
1022
  );
1021
- }, Zn = M(Jt);
1023
+ }, qn = M(tn);
1022
1024
  export {
1023
- Yn as TrendsFullWidget,
1024
- Xn as TrendsMicroWidget,
1025
- Un as TrendsMiniWidget,
1026
- Jn as TrendsStore,
1027
- Zn as TrendsWidget
1025
+ Xn as TrendsFullWidget,
1026
+ Qn as TrendsMicroWidget,
1027
+ Zn as TrendsMiniWidget,
1028
+ to as TrendsStore,
1029
+ qn as TrendsWidget
1028
1030
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mx-cartographer/experiences",
3
- "version": "7.0.23-alpha.al13",
3
+ "version": "7.0.23-alpha.al14",
4
4
  "description": "Library containing experience widgets",
5
5
  "author": "MX",
6
6
  "license": "MIT",