@mx-cartographer/experiences 7.0.23-alpha.al15 → 7.0.23-alpha.al2

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.
@@ -42,7 +42,7 @@ class N {
42
42
  accounts: t,
43
43
  institutions: e
44
44
  } = {}) => {
45
- console.log("inside account store load account data"), await Promise.all([this.loadAccounts(t), this.loadInstitutions(e)]);
45
+ await Promise.all([this.loadAccounts(t), this.loadInstitutions(e)]);
46
46
  };
47
47
  get cashAccounts() {
48
48
  return this.accounts.filter(
@@ -118,22 +118,22 @@ class N {
118
118
  n,
119
119
  "MD_EXCLUDE_EXTERNAL_ACCOUNTS"
120
120
  );
121
- for (const o of t) {
122
- if (c && o.member_is_managed_by_user) continue;
123
- const r = this.members.find((m) => m.guid === o.member_guid);
124
- if (!r) continue;
121
+ for (const r of t) {
122
+ if (c && r.member_is_managed_by_user) continue;
123
+ const o = this.members.find((m) => m.guid === r.member_guid);
124
+ if (!o) continue;
125
125
  let u = h.Connected;
126
- p.includes(r.connection_status) ? u = h.Error : y.includes(r.connection_status) ? u = h.Processing : I.includes(r.connection_status) && (u = h.RequiresMfa);
126
+ p.includes(o.connection_status) ? u = h.Error : y.includes(o.connection_status) ? u = h.Processing : I.includes(o.connection_status) && (u = h.RequiresMfa);
127
127
  const A = [
128
- o.user_name || o.feed_name || "",
129
- o.account_number ? `*${o.account_number}` : ""
128
+ r.user_name || r.feed_name || "",
129
+ r.account_number ? `*${r.account_number}` : ""
130
130
  ].join(" ").trim();
131
131
  e.push({
132
- ...o,
132
+ ...r,
133
133
  connectionStatus: u,
134
134
  institutionName: A,
135
- memberName: r.name
136
- }), r.connectionStatus = u;
135
+ memberName: o.name
136
+ }), o.connectionStatus = u;
137
137
  }
138
138
  return e;
139
139
  };
@@ -172,10 +172,10 @@ class N {
172
172
  try {
173
173
  const e = await this.api.mergeAccounts(t), n = e[Object.keys(e)[0]];
174
174
  a(() => {
175
- const c = this.accounts.findIndex((r) => r.guid === t[1]);
175
+ const c = this.accounts.findIndex((o) => o.guid === t[1]);
176
176
  this.accounts.splice(c, 1);
177
- const o = this.accounts.findIndex((r) => r.guid === t[0]);
178
- this.accounts.splice(o, 1, n);
177
+ const r = this.accounts.findIndex((o) => o.guid === t[0]);
178
+ this.accounts.splice(r, 1, n);
179
179
  });
180
180
  } catch (e) {
181
181
  console.error(`Error occurred while merging accounts: ${e}`);
@@ -217,13 +217,13 @@ class N {
217
217
  };
218
218
  updateAccountFiltering = async (t, e) => {
219
219
  for (const n of t) {
220
- const c = this.accounts.find((o) => o.guid === n);
220
+ const c = this.accounts.find((r) => r.guid === n);
221
221
  if (c) {
222
222
  c.is_excluded_from_accounts = e, c.is_excluded_from_budgets = e, c.is_excluded_from_cash_flow = e, c.is_excluded_from_debts = e, c.is_excluded_from_goals = e, c.is_excluded_from_investments = e, c.is_excluded_from_net_worth = e, c.is_excluded_from_spending = e, c.is_excluded_from_transactions = e, c.is_excluded_from_trends = e;
223
223
  try {
224
224
  this.updateAccount(c);
225
- } catch (o) {
226
- console.error(`Failed to update account ${n} (added):`, o);
225
+ } catch (r) {
226
+ console.error(`Failed to update account ${n} (added):`, r);
227
227
  }
228
228
  }
229
229
  }
@@ -24,7 +24,7 @@ import X from "@mui/material/ListItem";
24
24
  import { M as U } from "../MiniWidgetContainer-CTyjmE1h.mjs";
25
25
  import e1 from "@mui/material/Stack";
26
26
  import { g as U1, a as j1 } from "../AccountFields-CIz-r3gP.mjs";
27
- import { A as G1, a as K1 } from "../AccountStore-DPcxg9Kh.mjs";
27
+ import { A as G1, a as K1 } from "../AccountStore-BaMynkQT.mjs";
28
28
  const t1 = () => {
29
29
  const [c, L] = d.useState(""), { accounts: o } = g(), { selectedAccounts: l } = y(), { setSelectedAccount: u, setSelectedMember: r } = K(), { members: s } = O(), { onEvent: p } = N(), a = [...new Set(l.map((t) => t.account_type))], H = l.find((t) => c === t.guid), h = d.useMemo(
30
30
  () => l.filter((t) => t.is_hidden),
@@ -53,7 +53,7 @@ import { S as hr, T as gr } from "../RecurringTransactionsStore-D62XJtdL.mjs";
53
53
  import { G as mr, A as _r, B as yr, W as fr, c as Sr, m as br, g as wr, t as xr, k as Cr, x as Dr, e as vr, w as Ar, u as Er, l as Tr, a as Br, j as Ir, y as Nr, s as Fr, b as Mr, q as $r, n as Rr, z as Ur, h as kr, r as Lr, f as Or, v as Gr, o as Hr, p as Pr } from "../hooks-DkUqN6JE.mjs";
54
54
  import { u as Wr } from "../useScreenSize-B6JyS_Lj.mjs";
55
55
  import { makeAutoObservable as m, runInAction as p, reaction as _t } from "mobx";
56
- import { a as yt } from "../AccountStore-DPcxg9Kh.mjs";
56
+ import { a as yt } from "../AccountStore-BaMynkQT.mjs";
57
57
  import ft from "posthog-js";
58
58
  import { B as St } from "../BeatStore-By4aGoRM.mjs";
59
59
  import { endOfMonth as Z } from "date-fns/endOfMonth";
@@ -1240,12 +1240,12 @@ class Ve {
1240
1240
  transactions: i,
1241
1241
  userFeatures: n
1242
1242
  } = {}) => {
1243
- console.log("🔄 GlobalStore: Starting loadData"), await Promise.all([
1243
+ await Promise.all([
1244
1244
  // Load copy, config and quser data
1245
1245
  this.copyStore.loadCopy(),
1246
1246
  this.appDataStore.loadAppData(e),
1247
1247
  this.userStore.loadUserFeatures(n)
1248
- ]), console.log("✅ GlobalStore: Phase 1 complete (copy, config, user)"), await Promise.all([
1248
+ ]), await Promise.all([
1249
1249
  this.accountStore.loadAccountData({ accounts: t, institutions: o }),
1250
1250
  this.categoryStore.loadCategories(r),
1251
1251
  this.transactionStore.loadTransactionData({
@@ -1253,7 +1253,7 @@ class Ve {
1253
1253
  transactionRules: d,
1254
1254
  transactions: i
1255
1255
  })
1256
- ]), console.log("✅ GlobalStore: Phase 2 complete"), this.globalUiStore.setInitialized(!0), console.log("✅ GlobalStore: Fully initialized");
1256
+ ]), this.globalUiStore.setInitialized(!0);
1257
1257
  };
1258
1258
  }
1259
1259
  export {
@@ -1,7 +1,7 @@
1
1
  import { jsx as e, jsxs as f, Fragment as Pe } from "react/jsx-runtime";
2
- import i from "react";
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 Ke } from "@mxenabled/mxui";
4
+ import { Icon as ae, 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";
@@ -12,11 +12,11 @@ import { T as to } from "../TrendsStore-WrHxzdbQ.mjs";
12
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
13
  import tt from "@mui/material/ToggleButton";
14
14
  import nt 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 ot, m as st } from "../hooks-DkUqN6JE.mjs";
15
+ import { u as R, k as F, e as H, a as P, f as re, c as ie, 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 rt } from "@mui/x-data-grid-pro";
19
- import { C as at } 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
21
  import { b as it } from "../Localization-2MODESHW.mjs";
22
22
  import { H as be } from "../HeaderCell-DjuifqHJ.mjs";
@@ -29,7 +29,7 @@ import { useTheme as He } from "@mui/material/styles";
29
29
  import { L as ye } from "../LineChart-BWWmmJxV.mjs";
30
30
  import { M as lt } from "../MiniWidgetContainer-CTyjmE1h.mjs";
31
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";
32
+ import { TrendingUp as ht, TrendingDown as ut, MultilineChart as gt, ExpandLess as mt, ExpandMore as pt } from "@mxenabled/mx-icons";
33
33
  import { a as Ct, f as U } from "../NumberFormatting-CtWHhyBX.mjs";
34
34
  import { M as ft } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
35
35
  import Tt from "@mui/material/Collapse";
@@ -52,18 +52,18 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
52
52
  onChange: o,
53
53
  orientation: "horizontal",
54
54
  value: n,
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))
55
+ children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(tt, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(ae, { name: "table_chart_view" }) : /* @__PURE__ */ e(ae, { 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(), l = 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
- ), d = Z(
62
+ ), c = Z(
63
63
  n.end,
64
64
  s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
65
65
  );
66
- return `${c} - ${d}`;
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,15 +76,15 @@ 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: l })
83
+ /* @__PURE__ */ e(X, { variant: i ? "Body" : "Small", children: d })
84
84
  ] });
85
85
  }, At = (n) => {
86
86
  const o = n.row[n.field];
87
- return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(at, { amount: o, variant: "Small" }) });
87
+ return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(rt, { amount: o, variant: "Small" }) });
88
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: [
@@ -107,8 +107,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
107
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,12 +116,12 @@ 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: l } = H(), c = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [d, m] = i.useState([
123
- { field: c, sort: "desc" }
124
- ]), C = i.useMemo(() => Ht(o.start, o.end), [o]), u = [
122
+ const { onEvent: d } = H(), l = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, g] = 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,
@@ -133,10 +133,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
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
142
  renderCell: At,
@@ -148,12 +148,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
148
148
  sortComparator: $e
149
149
  })
150
150
  )
151
- ], b = i.useMemo(() => {
152
- const r = n.filter(
151
+ ], b = r.useMemo(() => {
152
+ const a = n.filter(
153
153
  (p) => !Xe(p) && !Ze(p)
154
- ), T = (t ? r.filter(
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, E) => {
158
158
  const { category_guid: w, top_level_category_guid: I, month: k, total: D, year: N } = E, L = t ? w : I;
159
159
  p[L] || (p[L] = {
@@ -169,26 +169,26 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
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
- rt,
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: d } },
180
- onRowClick: (r) => {
181
- s?.(r.row.category), l(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), l(y.TRENDS_CLICK_TABLE_SORT, A);
186
+ onSortModelChange: (a) => {
187
+ g(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: d,
191
+ sortModel: c,
192
192
  sortingOrder: ["asc", "desc"]
193
193
  }
194
194
  ) });
@@ -200,25 +200,25 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
200
200
  isOpen: t,
201
201
  onClose: s
202
202
  }) => {
203
- const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: l } = R(), { setFilter: c, sortedTransactions: d } = ae(), [m, C] = i.useState(""), u = i.useMemo(
204
- () => d.find((r) => r.guid === m),
205
- [m, d]
203
+ const { onEvent: i } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: l, sortedTransactions: c } = re(), [g, C] = r.useState(""), u = r.useMemo(
204
+ () => c.find((a) => a.guid === g),
205
+ [g, 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
  };
218
218
  return /* @__PURE__ */ f(
219
219
  fe,
220
220
  {
221
- ariaLabelClose: l.close_aria,
221
+ ariaLabelClose: d.close_aria,
222
222
  isOpen: t,
223
223
  onClose: b,
224
224
  title: Nt.title,
@@ -229,25 +229,25 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
229
229
  }
230
230
  );
231
231
  }, Ot = M(Wt), Vt = ({ onBackClick: n, sx: o }) => {
232
- const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: l } = ie(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: d, getCategoryName: m } = F(), { sortedTransactions: C } = ae(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = R(), [w, I] = i.useState(!1), [k, D] = i.useState(!1), [N, L] = i.useState("Chart"), [x, $] = i.useState(""), [z, ce] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
233
- i.useEffect(() => {
232
+ const { onEvent: t } = H(), { isDesktop: s, isTablet: i, isMobile: h } = K(), { visibleAccounts: d } = ie(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: g } = F(), { sortedTransactions: C } = re(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: a, isInitialized: m, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = R(), [w, I] = r.useState(!1), [k, D] = r.useState(!1), [N, L] = r.useState("Chart"), [x, $] = r.useState(""), [z, ce] = r.useState(window.innerHeight), ee = z - (h ? 315 : 345);
233
+ r.useEffect(() => {
234
234
  const S = () => ce(window.innerHeight);
235
235
  return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
236
- }, []), i.useEffect(() => {
237
- p(l);
238
- }, [l]), i.useEffect(() => {
239
- g && c(
236
+ }, []), r.useEffect(() => {
237
+ p(d);
238
+ }, [d]), r.useEffect(() => {
239
+ m && l(
240
240
  T,
241
241
  u.start,
242
242
  u.end
243
243
  ).finally(() => {
244
244
  I(!0);
245
245
  });
246
- }, [g, T, u]);
247
- const te = i.useMemo(() => {
246
+ }, [m, T, u]);
247
+ const te = r.useMemo(() => {
248
248
  if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
249
249
  const S = je(
250
- d,
250
+ c,
251
251
  u.start,
252
252
  u.end
253
253
  ), W = x.length ? S.filter(
@@ -257,34 +257,34 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
257
257
  stackedDatasets: W.filter(qe),
258
258
  unstackedDatasets: W.filter(Je)
259
259
  };
260
- }, [d, x, u]), ne = (S, W) => {
260
+ }, [c, x, u]), ne = (S, W) => {
261
261
  L(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
262
- }, le = (S) => {
263
- const W = Ie(S?.[0], 1), G = S?.[1], ge = Ce(G, W);
262
+ }, oe = (S) => {
263
+ const W = Ie(S?.[0], 1), G = S?.[1], me = Ce(G, W);
264
264
  b({ start: W, end: G }), t(y.TRENDS_CLICK_TIME_WINDOW, {
265
- time_period: ge + "M"
265
+ time_period: me + "M"
266
266
  });
267
- }, de = () => {
267
+ }, le = () => {
268
268
  t(y.TRENDS_CLICK_FILTER);
269
- }, oe = (S) => {
269
+ }, se = (S) => {
270
270
  $(S);
271
+ }, de = (S) => {
272
+ $(S), t(y.TRENDS_CLICK_LEGEND, { category: g(S) });
271
273
  }, he = (S) => {
272
- $(S), t(y.TRENDS_CLICK_LEGEND, { category: m(S) });
273
- }, se = (S) => {
274
- t(y.TRENDS_HOVER_LEGEND, { category: m(S) });
274
+ t(y.TRENDS_HOVER_LEGEND, { category: g(S) });
275
275
  }, ue = (S) => {
276
276
  t(y.TRENDS_HOVER_AREA, { category: S });
277
- }, me = (S) => {
277
+ }, ge = (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 || !m || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
281
281
  Ae,
282
282
  {
283
- accountOptions: l,
284
- calendarActions: { onRangeChanged: le },
283
+ accountOptions: d,
284
+ calendarActions: { onRangeChanged: oe },
285
285
  dateRange: u,
286
286
  dateRangeVariant: "timeframebuttons",
287
- onAccountsFilterClick: de,
287
+ onAccountsFilterClick: le,
288
288
  onBackClick: n,
289
289
  sx: o,
290
290
  title: E.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(
@@ -317,7 +317,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
317
317
  ),
318
318
  /* @__PURE__ */ f(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
319
319
  /* @__PURE__ */ e(O, { flexGrow: 1, children: x && /* @__PURE__ */ f(pe, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
320
- /* @__PURE__ */ e(re, { name: "arrow_back" }),
320
+ /* @__PURE__ */ e(ae, { name: "arrow_back" }),
321
321
  E.all_categories
322
322
  ] }) }),
323
323
  /* @__PURE__ */ e(pe, { onClick: () => D(!0), sx: { px: 5 }, children: `${E.view_transactions} (${C.length})` })
@@ -327,10 +327,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
327
327
  Ye,
328
328
  {
329
329
  availableHeight: ee,
330
- onClickLegend: he,
330
+ onClickLegend: de,
331
331
  onHoverArea: ue,
332
- onHoverLegend: se,
333
- onHoverPoint: me,
332
+ onHoverLegend: he,
333
+ onHoverPoint: ge,
334
334
  stackedDatasets: te.stackedDatasets,
335
335
  unstackedDatasets: te.unstackedDatasets
336
336
  }
@@ -338,8 +338,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
338
338
  N === "Table" && /* @__PURE__ */ e(
339
339
  Ve,
340
340
  {
341
- monthlyCategoryTotals: d,
342
- onClickRow: oe,
341
+ monthlyCategoryTotals: c,
342
+ onClickRow: se,
343
343
  selectedCategory: x,
344
344
  selectedDateRange: u
345
345
  }
@@ -379,20 +379,20 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
379
379
  }
380
380
  );
381
381
  }, Bt = M(Gt), zt = ({ onPrimaryCtaClick: n, sx: o }) => {
382
- const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } = ve(), { trends: l } = R(), { isCopyLoaded: c, selectedAccounts: d, setSelectedAccounts: m } = P();
383
- return i.useEffect(() => {
384
- m(t);
385
- }, [t]), i.useEffect(() => {
386
- h && s(d).finally();
387
- }, [h, d]), !c || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
382
+ const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: i } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: g } = P();
383
+ return r.useEffect(() => {
384
+ g(t);
385
+ }, [t]), r.useEffect(() => {
386
+ h && s(c).finally();
387
+ }, [h, c]), !l || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
388
388
  lt,
389
389
  {
390
390
  onPrimaryCtaClick: n,
391
- primaryCtaLabel: l.primary_cta,
392
- subTitle: l.sub_title,
391
+ primaryCtaLabel: d.primary_cta,
392
+ subTitle: d.sub_title,
393
393
  sx: o,
394
- title: l.mini_title,
395
- children: a ? /* @__PURE__ */ e(Bt, {}) : /* @__PURE__ */ e(Q, {})
394
+ title: d.mini_title,
395
+ children: i ? /* @__PURE__ */ e(Bt, {}) : /* @__PURE__ */ e(Q, {})
396
396
  }
397
397
  );
398
398
  }, Zn = M(zt), Ft = 70, Se = ({
@@ -400,13 +400,13 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
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: l } = ot(), c = i.useRef(null), d = i.useRef(null), m = Ct(Number(Math.abs(s)), {
406
+ const { availableWidth: d } = ot(), l = r.useRef(null), c = r.useRef(null), g = Ct(Number(Math.abs(s)), {
407
407
  style: "percent",
408
408
  minimumIntegerDigits: 1
409
- }), C = l === 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 = d?.current, p = g && T ? g.scrollWidth > T.clientWidth - Ft : !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", m = l?.current, T = c?.current, p = m && T ? m.scrollWidth > T.clientWidth - Ft : !1;
410
410
  return /* @__PURE__ */ f(
411
411
  _,
412
412
  {
@@ -431,16 +431,16 @@ 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(ht, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(ut, { 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",
443
- children: m
443
+ children: g
444
444
  }
445
445
  )
446
446
  ] })
@@ -450,7 +450,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
450
450
  /* @__PURE__ */ f(
451
451
  _,
452
452
  {
453
- ref: d,
453
+ ref: c,
454
454
  sx: {
455
455
  alignItems: "center",
456
456
  flexDirection: "row",
@@ -460,17 +460,17 @@ 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
  }
467
467
  ),
468
- h && l >= 450 && !p && /* @__PURE__ */ e(
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
  ]
@@ -482,33 +482,33 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
482
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(mt, { size: 32 }),
485
+ /* @__PURE__ */ e(gt, { 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
491
  }), Qn = M(({ onCtaClick: n }) => {
492
- const { visibleAccounts: o } = ie(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = F(), l = {
492
+ const { visibleAccounts: o } = ie(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: i, monthlyTotalsLoaded: h } = F(), d = {
493
493
  start: dt(/* @__PURE__ */ new Date(), 1),
494
494
  end: /* @__PURE__ */ new Date()
495
- }, { trends: c } = R(), { selectedAccounts: d, setSelectedAccounts: m, isInitialized: C } = P();
496
- i.useEffect(() => {
497
- m(o);
498
- }, [o]), i.useEffect(() => {
499
- C && a(d, l.start).then(() => {
495
+ }, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: g, isInitialized: C } = P();
496
+ r.useEffect(() => {
497
+ g(o);
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, d]);
505
- const { spendingData: u, incomeData: b } = i.useMemo(
504
+ }, [C, c]);
505
+ const { spendingData: u, incomeData: b } = r.useMemo(
506
506
  () => ({
507
- spendingData: Le(s, l),
508
- incomeData: xe(s, l)
507
+ spendingData: Le(s, d),
508
+ incomeData: xe(s, d)
509
509
  }),
510
- [s, l]
511
- ), [r, g] = u, [T, p] = b, E = _e(g.y, r.y), w = _e(p.y, T.y), I = C && !o?.length, k = () => {
510
+ [s, d]
511
+ ), [a, m] = u, [T, p] = b, E = _e(m.y, a.y), w = _e(p.y, T.y), I = C && !o?.length, k = () => {
512
512
  t(
513
513
  I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
514
514
  ), n();
@@ -517,10 +517,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
517
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,
522
+ subHeader: I ? void 0 : l.micro_subheader,
523
+ title: l.title,
524
524
  children: I ? /* @__PURE__ */ e(Pt, {}) : /* @__PURE__ */ f(
525
525
  _,
526
526
  {
@@ -534,10 +534,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
534
534
  Se,
535
535
  {
536
536
  percentage: E,
537
- secondaryLabel: c.micro_secondary_label,
538
- shouldDisplayPercentage: g.y !== 0 && r.y !== 0,
539
- title: c.spending_label,
540
- totalAmount: g.y,
537
+ secondaryLabel: l.micro_secondary_label,
538
+ shouldDisplayPercentage: m.y !== 0 && a.y !== 0,
539
+ title: l.spending_label,
540
+ totalAmount: m.y,
541
541
  transactionType: "spending"
542
542
  }
543
543
  ),
@@ -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
  }
@@ -566,7 +566,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
566
566
  sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
567
567
  children: [
568
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(
569
+ /* @__PURE__ */ e(St, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(mt, {}) : /* @__PURE__ */ e(
570
570
  pt,
571
571
  {
572
572
  sx: {
@@ -585,76 +585,76 @@ 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
- showDivider: l = !0
590
+ showDivider: d = !0
591
591
  }) => {
592
- const { trends: c } = R(), { onEvent: d } = H(), m = `${s.length} ${s.length === 1 ? c.transaction : c.transactions}`, C = () => {
593
- a?.(), d(y.TRENDS_CLICK_LIST_ITEM, {
592
+ const { trends: l } = R(), { onEvent: c } = H(), g = `${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(Ke, {}) : void 0,
606
- subtitle: m,
605
+ rightIcon: i ? /* @__PURE__ */ e(Ke, {}) : void 0,
606
+ subtitle: g,
607
607
  title: t
608
608
  }
609
609
  ),
610
- l && /* @__PURE__ */ e(Dt, { sx: { ml: h ? 24 : 68 } })
610
+ d && /* @__PURE__ */ e(Dt, { sx: { ml: h ? 24 : 68 } })
611
611
  ] }, o);
612
612
  }
613
613
  ), $t = M(
614
614
  ({ availableHeight: n = 0, onCategoryClick: o }) => {
615
- const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: l } = K(), { trends: c } = R(), { onEvent: d } = H(), [m, C] = i.useState(!1), u = l || h;
616
- i.useEffect(() => {
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));
615
+ const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: i } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: l } = R(), { onEvent: c } = H(), [g, C] = r.useState(!1), u = d || h;
616
+ r.useEffect(() => {
617
+ const m = Math.floor(n / 64) - 1, T = s.length + t.length;
618
+ m !== s.length && (i(u ? Math.max(m, 5) : 5), C(m >= T));
619
619
  }, [n]);
620
620
  const b = () => {
621
- C(!m), d(y.TRENDS_CLICK_VIEW_MORE, {
621
+ C(!g), c(y.TRENDS_CLICK_VIEW_MORE, {
622
622
  ...A
623
623
  });
624
- }, r = s.length + (m ? t.length : 0);
624
+ }, a = s.length + (g ? t.length : 0);
625
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: c.categories }) }),
627
- s.map((g, T) => /* @__PURE__ */ e(
626
+ /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: l.categories }) }),
627
+ s.map((m, T) => /* @__PURE__ */ e(
628
628
  we,
629
629
  {
630
- ...g,
631
- isLastItem: T === r - 1,
632
- onClick: g.transactions.length > 0 ? () => o(g) : void 0,
630
+ ...m,
631
+ isLastItem: T === a - 1,
632
+ onClick: m.transactions.length > 0 ? () => o(m) : void 0,
633
633
  showDivider: !0
634
634
  },
635
- g.guid
635
+ m.guid
636
636
  )),
637
637
  /* @__PURE__ */ e(
638
638
  Tt,
639
639
  {
640
- in: m,
640
+ in: g,
641
641
  sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
642
- children: t.map((g, T) => {
642
+ children: t.map((m, T) => {
643
643
  const p = s.length + T;
644
644
  return /* @__PURE__ */ e(
645
645
  we,
646
646
  {
647
- ...g,
648
- isLastItem: p === r - 1,
649
- onClick: g.transactions.length > 0 ? () => o(g) : void 0,
647
+ ...m,
648
+ isLastItem: p === a - 1,
649
+ onClick: m.transactions.length > 0 ? () => o(m) : void 0,
650
650
  showDivider: !0
651
651
  },
652
- g.guid
652
+ m.guid
653
653
  );
654
654
  })
655
655
  }
656
656
  ),
657
- t.length > 0 && /* @__PURE__ */ e(Kt, { isExpanded: m, onClick: b })
657
+ t.length > 0 && /* @__PURE__ */ e(Kt, { isExpanded: g, onClick: b })
658
658
  ] }) });
659
659
  }
660
660
  ), jt = [
@@ -692,37 +692,37 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
692
692
  "WeeklyNoSpendDays",
693
693
  "WeeklySmallPurchasesSummary"
694
694
  ], Yt = ({ onInsightCardClick: n }) => {
695
- const o = It(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: l, endpoint: c, sessionToken: d } = 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(() => {
697
- m && l.loadBeats().finally(() => u(!0));
698
- }, [m]);
699
- const T = i.useMemo(() => C ? l.getFilteredBeats({ templates: jt }) : [], [C]), p = () => null, E = (D) => {
695
+ const o = It(), { onEvent: t } = H(), { isMobile: s, isDesktop: i, isLargeDesktop: h } = K(), { beatStore: d, endpoint: l, sessionToken: c } = ve(), { isInitialized: g } = P(), [C, u] = r.useState(!1), b = o.palette.mode === "dark", a = i || h, m = a || s ? 1 : 2;
696
+ r.useEffect(() => {
697
+ g && d.loadBeats().finally(() => u(!0));
698
+ }, [g]);
699
+ const T = r.useMemo(() => C ? d.getFilteredBeats({ templates: jt }) : [], [C]), p = () => null, E = (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;
701
+ }, w = a ? 200 : 170, I = a ? 170 : 124, k = T.length > 0 ? w : I;
702
702
  return /* @__PURE__ */ e(Et, { sx: { height: k }, children: /* @__PURE__ */ e(
703
703
  ct,
704
704
  {
705
- areBeatsLoading: l.isLoading,
705
+ areBeatsLoading: d.isLoading,
706
706
  beats: T,
707
- endpoint: c,
707
+ endpoint: l,
708
708
  logOutUser: p,
709
709
  onCardClick: E,
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: d,
716
+ token: c,
717
717
  useDarkMode: b,
718
718
  userHasFullInsightFeedBeats: !1,
719
719
  variant: "outlined",
720
- visibleCardsCount: g
720
+ visibleCardsCount: m
721
721
  }
722
722
  ) });
723
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],
@@ -754,23 +754,23 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
754
754
  }
755
755
  ) });
756
756
  }), Zt = M(({ onClose: n }) => {
757
- const o = Ne(), { onEvent: t } = H(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: l } = q(), { sortedTransactions: c } = ae(), [d, m] = i.useState(null);
757
+ const o = Ne(), { onEvent: t } = H(), { common: s, trends: i } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: l } = re(), [c, g] = 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 = xt(C, o), p = b ? a.income_label : a.spending_label, E = ` ${h.transactions.length === 1 ? a.transaction : a.transactions} (${h.transactions.length})`, w = i.useMemo(
761
- () => c.find((D) => D.guid === d),
762
- [d, c]
760
+ const { guid: C, name: u, is_income: b, totalAmount: a } = h, m = b ? i.category_income : i.category_spending, T = xt(C, o), p = b ? i.income_label : i.spending_label, E = ` ${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
763
  ), I = (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
- title: g,
773
+ title: m,
774
774
  children: [
775
775
  /* @__PURE__ */ f(_, { sx: { alignItems: "center", height: "100%" }, children: [
776
776
  /* @__PURE__ */ f(Lt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
@@ -778,8 +778,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
778
778
  Ee,
779
779
  {
780
780
  leftIcon: /* @__PURE__ */ e(Te, { categoryGuid: C }),
781
- rightContent: U(Math.abs(r), "0,0.00"),
782
- subtitle: l,
781
+ rightContent: U(Math.abs(a), "0,0.00"),
782
+ subtitle: d,
783
783
  title: u
784
784
  }
785
785
  ),
@@ -795,7 +795,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
795
795
  bgcolor: "transparent",
796
796
  filter: I,
797
797
  height: "calc(100vh - 475px)",
798
- onClick: m
798
+ onClick: g
799
799
  }
800
800
  )
801
801
  ] }),
@@ -804,8 +804,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
804
804
  {
805
805
  ariaLabelClose: s.close_aria,
806
806
  isOpen: !!w,
807
- onClose: () => m(""),
808
- title: a.transaction,
807
+ onClose: () => g(""),
808
+ title: i.transaction,
809
809
  children: w && /* @__PURE__ */ e(Re, { transaction: w })
810
810
  }
811
811
  )
@@ -814,26 +814,26 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
814
814
  );
815
815
  }), Qt = (n, o) => {
816
816
  const t = xe(n, o), s = Le(n, o);
817
- return [t, s].filter((a) => a.length > 0);
817
+ return [t, s].filter((i) => i.length > 0);
818
818
  }, qt = (n, o) => {
819
- const [t, s] = n, a = t, h = s ?? t, l = [];
820
- if (a) {
821
- const c = a.reduce((d, m) => d + m.y, 0);
822
- l.push({ label: o.income_label, amount: c });
819
+ const [t, s] = n, i = t, h = s ?? t, d = [];
820
+ if (i) {
821
+ const l = i.reduce((c, g) => c + g.y, 0);
822
+ d.push({ label: o.income_label, amount: l });
823
823
  }
824
824
  if (h) {
825
- const c = h.reduce((d, m) => d + m.y, 0);
826
- l.push({ label: o.spending_label, amount: c });
825
+ const l = h.reduce((c, g) => c + g.y, 0);
826
+ d.push({ label: o.spending_label, amount: l });
827
827
  }
828
- return l;
828
+ return d;
829
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: l } = R(), { isSmallMobile: c, isMobile: d, isSmallTablet: m, isTablet: C } = K(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = Qt(s, t), r = qt(b, l), [g, T] = i.useState(0), p = 458, E = 195, w = 56, I = d || c ? E : m || C ? p : g;
836
- return i.useEffect(() => {
835
+ const i = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: g, isTablet: C } = K(), u = [i.palette.chart?.chart1, i.palette.chart?.chart2], b = Qt(s, t), a = qt(b, d), [m, T] = r.useState(0), p = 458, E = 195, w = 56, I = c || l ? E : g || C ? p : m;
836
+ return r.useEffect(() => {
837
837
  const D = Math.max(n - w, o);
838
838
  T(D);
839
839
  }, [n]), /* @__PURE__ */ e(
@@ -844,7 +844,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
844
844
  curveType: "bump",
845
845
  datasets: b,
846
846
  height: I,
847
- labels: r,
847
+ labels: a,
848
848
  onItemClick: () => {
849
849
  h(y.TRENDS_CLICK_CHART, A);
850
850
  },
@@ -860,36 +860,38 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
860
860
  }
861
861
  );
862
862
  }, en = M(Jt), tn = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
863
- const { onEvent: s } = H(), { config: a } = st(), { isLargeDesktop: h, isDesktop: l, isMobile: c } = K(), { visibleAccounts: d } = ie(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = ae(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
863
+ const { onEvent: s } = H(), { config: i } = st(), { isLargeDesktop: h, isDesktop: d, isMobile: l } = K(), { visibleAccounts: c } = ie(), { loadDateRangeCategoryTotals: g, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = re(), { selectedDateRange: a, setSelectedCategoryData: m, setSelectedDateRange: T } = q(), {
864
864
  isCopyLoaded: p,
865
865
  isInitialized: E,
866
866
  selectedAccounts: w,
867
867
  selectedAccountGuids: I,
868
868
  setSelectedAccounts: k
869
- } = P(), { trends: D } = R(), N = Ue(), L = l || h, [x, $] = i.useState(!1), [z, ce] = i.useState("Chart"), [J, ee] = i.useState(""), [te, ne] = i.useState(!1), [le, de] = i.useState(!0), [oe, he] = i.useState(window.innerHeight), se = oe - 208, ue = oe - (N ? 494 : 266);
870
- i.useEffect(() => {
871
- const v = () => he(window.innerHeight);
869
+ } = P(), { trends: D } = R(), N = Ue(), L = d || h, [x, $] = r.useState(!1), [z, ce] = r.useState("Chart"), [J, ee] = r.useState(""), [te, ne] = r.useState(!1), [oe, le] = r.useState(window.innerHeight), se = oe - 208, de = oe - (N ? 494 : 266), [he, ue] = r.useState(!1);
870
+ r.useEffect(() => {
871
+ const v = () => le(window.innerHeight);
872
872
  return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
873
- }, []), i.useEffect(() => {
874
- k(d), de(!0);
875
- }, [d]), i.useEffect(() => {
876
- E && m(w, r.start, r.end).then(() => {
873
+ }, []), r.useEffect(() => {
874
+ console.log("accounts changed: ", c.length), k(c);
875
+ }, [c]), r.useEffect(() => {
876
+ console.log("first load: ", c.length), c || ue(!0);
877
+ }, []), r.useEffect(() => {
878
+ E && g(w, a.start, a.end).then(() => {
877
879
  C(
878
880
  w,
879
- r.start,
880
- r.end
881
+ a.start,
882
+ a.end
881
883
  );
882
884
  }).finally(() => {
883
885
  $(!0), s(y.TRENDS_LOAD_WIDGET, {
884
886
  ...A,
885
- time_period: `${Ce(r.end, r.start)}M`
887
+ time_period: `${Ce(a.end, a.start)}M`
886
888
  });
887
889
  });
888
- }, [E, w, r]), i.useEffect(() => {
890
+ }, [E, w, a]), r.useEffect(() => {
889
891
  if (u.length !== 0) {
890
892
  const v = {
891
893
  accounts: I,
892
- dateRange: { start: r.start, end: r.end }
894
+ dateRange: { start: a.start, end: a.end }
893
895
  };
894
896
  b({
895
897
  ...v,
@@ -899,10 +901,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
899
901
  });
900
902
  }
901
903
  }, [u]);
902
- const me = (v) => {
903
- g(v), ne(!0);
904
+ const ge = (v) => {
905
+ m(v), ne(!0);
904
906
  }, S = () => {
905
- g(null), ne(!1);
907
+ m(null), ne(!1);
906
908
  }, W = (v, V) => {
907
909
  ce(V ?? z), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
908
910
  ...A,
@@ -914,7 +916,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
914
916
  ...A,
915
917
  time_period: Fe + "M"
916
918
  });
917
- }, ge = (v) => {
919
+ }, me = (v) => {
918
920
  s(y.TRENDS_CLICK_FILTER, {
919
921
  ...A,
920
922
  filterValue: v
@@ -923,96 +925,99 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
923
925
  ee(v);
924
926
  }, Be = () => {
925
927
  ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
926
- }, ze = a.show_connections_widget_in_master ? "buttons" : "no-buttons";
927
- return !p || !x ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
928
+ }, ze = i.show_connections_widget_in_master ? "buttons" : "no-buttons";
929
+ return /* @__PURE__ */ f(
928
930
  Ae,
929
931
  {
930
- accountOptions: d,
932
+ accountOptions: c,
931
933
  calendarActions: { onRangeChanged: G },
932
- dateRange: r,
933
- dateRangeVariant: c ? "timeframetabs" : "timeframebuttons",
934
- onAccountsFilterClick: ge,
934
+ dateRange: a,
935
+ dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
936
+ onAccountsFilterClick: me,
935
937
  onBackClick: n,
936
938
  sx: t,
937
939
  title: D.title,
938
- children: le ? /* @__PURE__ */ e(
939
- Mt,
940
- {
941
- header: D.zero_state_content_header,
942
- icon: "",
943
- onClick: () => {
944
- },
945
- primaryButton: D.empty_state_primary,
946
- subText: D.empty_state_sub_text,
947
- sx: { height: se },
948
- variant: ze
949
- }
950
- ) : /* @__PURE__ */ f(
951
- _,
952
- {
953
- sx: {
954
- px: c ? 0 : 48
955
- },
956
- children: [
957
- /* @__PURE__ */ f(
958
- _,
959
- {
960
- flexDirection: "row",
961
- justifyContent: "space-between",
962
- sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
963
- children: [
964
- /* @__PURE__ */ e(
965
- Oe,
940
+ children: [
941
+ !p || !x && /* @__PURE__ */ e(Q, {}),
942
+ he ? /* @__PURE__ */ e(
943
+ Mt,
944
+ {
945
+ header: D.zero_state_content_header,
946
+ icon: "",
947
+ onClick: () => {
948
+ },
949
+ primaryButton: D.empty_state_primary,
950
+ subText: D.empty_state_sub_text,
951
+ sx: { height: se },
952
+ variant: ze
953
+ }
954
+ ) : /* @__PURE__ */ f(
955
+ _,
956
+ {
957
+ sx: {
958
+ px: l ? 0 : 48
959
+ },
960
+ children: [
961
+ /* @__PURE__ */ f(
962
+ _,
963
+ {
964
+ flexDirection: "row",
965
+ justifyContent: "space-between",
966
+ sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
967
+ children: [
968
+ /* @__PURE__ */ e(
969
+ Oe,
970
+ {
971
+ selectedCategoryGuid: J,
972
+ selectedDateRange: a
973
+ }
974
+ ),
975
+ /* @__PURE__ */ e(We, { onTabChange: W, selectedTab: z })
976
+ ]
977
+ }
978
+ ),
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: [
980
+ /* @__PURE__ */ e(ae, { name: "arrow_back" }),
981
+ D.all_categories
982
+ ] }) }) }),
983
+ /* @__PURE__ */ f(_, { flexDirection: L ? "row" : "column", gap: L ? 48 : 16, children: [
984
+ z === "Chart" && /* @__PURE__ */ f(Pe, { children: [
985
+ /* @__PURE__ */ e(O, { sx: { width: L ? "68%" : "100%" }, children: /* @__PURE__ */ e(
986
+ en,
966
987
  {
967
- selectedCategoryGuid: J,
968
- selectedDateRange: r
988
+ availableHeight: se,
989
+ minHeight: 450,
990
+ selectedDateRange: a,
991
+ totals: u
969
992
  }
970
- ),
971
- /* @__PURE__ */ e(We, { onTabChange: W, selectedTab: z })
972
- ]
973
- }
974
- ),
975
- /* @__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: [
976
- /* @__PURE__ */ e(re, { name: "arrow_back" }),
977
- D.all_categories
978
- ] }) }) }),
979
- /* @__PURE__ */ f(_, { flexDirection: L ? "row" : "column", gap: L ? 48 : 16, children: [
980
- z === "Chart" && /* @__PURE__ */ f(Pe, { children: [
981
- /* @__PURE__ */ e(O, { sx: { width: L ? "68%" : "100%" }, children: /* @__PURE__ */ e(
982
- en,
993
+ ) }),
994
+ /* @__PURE__ */ f(_, { gap: 16, sx: { width: L ? "32%" : "100%" }, children: [
995
+ N && /* @__PURE__ */ e(Ut, { onInsightCardClick: o }),
996
+ /* @__PURE__ */ e(
997
+ $t,
998
+ {
999
+ availableHeight: de,
1000
+ onCategoryClick: ge
1001
+ }
1002
+ )
1003
+ ] })
1004
+ ] }),
1005
+ z === "Table" && /* @__PURE__ */ e(O, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
1006
+ Ve,
983
1007
  {
984
- availableHeight: se,
985
- minHeight: 450,
986
- selectedDateRange: r,
987
- totals: u
1008
+ height: "unset",
1009
+ monthlyCategoryTotals: u,
1010
+ onClickRow: Ge,
1011
+ selectedCategory: J,
1012
+ selectedDateRange: a
988
1013
  }
989
- ) }),
990
- /* @__PURE__ */ f(_, { gap: 16, sx: { width: L ? "32%" : "100%" }, children: [
991
- N && /* @__PURE__ */ e(Ut, { onInsightCardClick: o }),
992
- /* @__PURE__ */ e(
993
- $t,
994
- {
995
- availableHeight: ue,
996
- onCategoryClick: me
997
- }
998
- )
999
- ] })
1014
+ ) })
1000
1015
  ] }),
1001
- z === "Table" && /* @__PURE__ */ e(O, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
1002
- Ve,
1003
- {
1004
- height: "unset",
1005
- monthlyCategoryTotals: u,
1006
- onClickRow: Ge,
1007
- selectedCategory: J,
1008
- selectedDateRange: r
1009
- }
1010
- ) })
1011
- ] }),
1012
- te && /* @__PURE__ */ e(Zt, { onClose: S })
1013
- ]
1014
- }
1015
- )
1016
+ te && /* @__PURE__ */ e(Zt, { onClose: S })
1017
+ ]
1018
+ }
1019
+ )
1020
+ ]
1016
1021
  }
1017
1022
  );
1018
1023
  }, qn = M(tn);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mx-cartographer/experiences",
3
- "version": "7.0.23-alpha.al15",
3
+ "version": "7.0.23-alpha.al2",
4
4
  "description": "Library containing experience widgets",
5
5
  "author": "MX",
6
6
  "license": "MIT",