@mx-cartographer/experiences 7.0.37-alpha-recurring-transactions-divider-padding-ram1 → 7.0.37-alpha-recurring-transactions-divider-padding-ram3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/recurringtransactions/index.es.js +151 -151
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import h from "react";
|
|
|
3
3
|
import { observer as D } from "mobx-react-lite";
|
|
4
4
|
import { endOfMonth as B } from "date-fns/endOfMonth";
|
|
5
5
|
import { endOfToday as de } from "date-fns/endOfToday";
|
|
6
|
-
import { startOfMonth as
|
|
6
|
+
import { startOfMonth as W } from "date-fns/startOfMonth";
|
|
7
7
|
import { startOfToday as ue } from "date-fns/startOfToday";
|
|
8
8
|
import { subDays as me } from "date-fns/subDays";
|
|
9
9
|
import ae from "@mui/material/Skeleton";
|
|
@@ -14,12 +14,12 @@ import { addMonths as Be } from "date-fns/addMonths";
|
|
|
14
14
|
import { subMonths as Ue } from "date-fns/subMonths";
|
|
15
15
|
import { isBefore as Fe } from "date-fns/isBefore";
|
|
16
16
|
import se from "@mui/material/Unstable_Grid2";
|
|
17
|
-
import
|
|
18
|
-
import
|
|
17
|
+
import Se from "@mui/material/IconButton";
|
|
18
|
+
import Ie from "@mui/material/Tab";
|
|
19
19
|
import je from "@mui/material/Tabs";
|
|
20
|
-
import { Schedule as Ke, MonetizationOn as Ye, Cancel as
|
|
20
|
+
import { Schedule as Ke, MonetizationOn as Ye, Cancel as Ee, CheckCircle as Ge, ChevronLeft as Ve, ChevronRight as Xe, CurrencyExchange as Ze } from "@mxenabled/mx-icons";
|
|
21
21
|
import { Text as p, MerchantLogo as pe, InstitutionLogo as qe, H3 as Je, P as ce } from "@mxenabled/mxui";
|
|
22
|
-
import { getWeeksInMonth as
|
|
22
|
+
import { getWeeksInMonth as _e } from "date-fns/getWeeksInMonth";
|
|
23
23
|
import ge from "@mui/material/styles/useTheme";
|
|
24
24
|
import { AdapterDateFns as Qe } from "@mui/x-date-pickers/AdapterDateFnsV3";
|
|
25
25
|
import { DateCalendar as et } from "@mui/x-date-pickers/DateCalendar";
|
|
@@ -28,14 +28,14 @@ import { isSameDay as nt } from "date-fns/isSameDay";
|
|
|
28
28
|
import it from "@mui/material/Badge";
|
|
29
29
|
import { PickersDay as rt } from "@mui/x-date-pickers/PickersDay";
|
|
30
30
|
import { I as Z } from "../IconBacking-B9oC6uL2.mjs";
|
|
31
|
-
import { u as S, a as q, i as
|
|
32
|
-
import { c as
|
|
31
|
+
import { u as S, a as q, i as v, f as J, p as he, c as fe, g as xe } from "../hooks-BAAimqdq.mjs";
|
|
32
|
+
import { c as L, a as T, g as we, f as ot } from "../RepeatingTransaction-BW4J-jeJ.mjs";
|
|
33
33
|
import { T as H } from "../RecurringTransactionsStore-DeLXfuC4.mjs";
|
|
34
34
|
import { R as Gn } from "../RecurringTransactionsStore-DeLXfuC4.mjs";
|
|
35
|
-
import { A as
|
|
35
|
+
import { A as w, W as at } from "../WidgetContainer-ztkGgdIH.mjs";
|
|
36
36
|
import st from "@mui/material/Button";
|
|
37
37
|
import le from "@mui/material/Divider";
|
|
38
|
-
import
|
|
38
|
+
import ve from "@mui/material/List";
|
|
39
39
|
import Ne from "@mui/material/ListItem";
|
|
40
40
|
import ct from "@mui/material/ListSubheader";
|
|
41
41
|
import lt from "@mui/material/ListItemAvatar";
|
|
@@ -43,13 +43,13 @@ import dt from "@mui/material/ListItemButton";
|
|
|
43
43
|
import ut from "@mui/material/ListItemText";
|
|
44
44
|
import { b as mt } from "../ManageIncome-BaZyK1CD.mjs";
|
|
45
45
|
import { c as On, M as kn, S as Wn } from "../ManageIncome-BaZyK1CD.mjs";
|
|
46
|
-
import { f as
|
|
46
|
+
import { f as A } from "../NumberFormatting-CtWHhyBX.mjs";
|
|
47
47
|
import { D as Oe } from "../Drawer-kEE73B87.mjs";
|
|
48
|
-
import { b as
|
|
49
|
-
import { f as
|
|
50
|
-
import
|
|
48
|
+
import { b as O } from "../Localization-2MODESHW.mjs";
|
|
49
|
+
import { f as E, D as G } from "../Dialog-CWW597AF.mjs";
|
|
50
|
+
import k from "@mui/material/Box";
|
|
51
51
|
import { S as ke } from "../StatusBar-BK_uYHAB.mjs";
|
|
52
|
-
import { u as
|
|
52
|
+
import { u as ye } from "../useScreenSize-B6JyS_Lj.mjs";
|
|
53
53
|
import { L as V } from "../Loader-DUaFpDGv.mjs";
|
|
54
54
|
import { M as pt } from "../MiniWidgetContainer-BhHaL8eb.mjs";
|
|
55
55
|
import { u as gt } from "../useDimensions-27p2evRx.mjs";
|
|
@@ -58,34 +58,34 @@ const Q = {
|
|
|
58
58
|
gridRow: 1,
|
|
59
59
|
gridColumn: 1,
|
|
60
60
|
zIndex: 2
|
|
61
|
-
}, ee = (t) => t ? { margin: "0 0 -6px -4px" } : void 0,
|
|
61
|
+
}, ee = (t) => t ? { margin: "0 0 -6px -4px" } : void 0, Ce = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Z, { size: n, sx: { ...ee(t) }, children: /* @__PURE__ */ e(Ke, { color: "primary", filled: !0, sx: { fontSize: n, ...Q } }) }), be = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Z, { size: n, sx: { ...ee(t) }, children: /* @__PURE__ */ e(
|
|
62
62
|
Ye,
|
|
63
63
|
{
|
|
64
64
|
filled: !0,
|
|
65
65
|
sx: { color: "categories.income", fontSize: n, ...Q }
|
|
66
66
|
}
|
|
67
|
-
) }),
|
|
67
|
+
) }), Re = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Z, { size: n, sx: { ...ee(t) }, children: /* @__PURE__ */ e(Ee, { color: "error", filled: !0, sx: { fontSize: n, ...Q } }) }), Te = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Z, { size: n, sx: { ...ee(t) }, children: /* @__PURE__ */ e(Ge, { color: "success", filled: !0, sx: { fontSize: n, ...Q } }) }), ft = D(
|
|
68
68
|
({ day: t, outsideCurrentMonth: n, ...i }) => {
|
|
69
|
-
const { recurring: a } = S(), { selectedAccountGuids: r } = q(), { recurrences: l, setSelectedDay: m } =
|
|
69
|
+
const { recurring: a } = S(), { selectedAccountGuids: r } = q(), { recurrences: l, setSelectedDay: m } = v(), s = h.useMemo(
|
|
70
70
|
() => l.filter((d) => r.includes(d.accountGuid)),
|
|
71
71
|
[r, l]
|
|
72
72
|
).filter(
|
|
73
73
|
(d) => nt(d.occurredOnDate || d.expectedDate, t)
|
|
74
74
|
), u = s.some(
|
|
75
|
-
(d) => d.type !==
|
|
75
|
+
(d) => d.type !== L.Income && d.status === T.Upcoming
|
|
76
76
|
), f = s.some(
|
|
77
|
-
(d) => d.type !==
|
|
77
|
+
(d) => d.type !== L.Income && d.status === T.Missed
|
|
78
78
|
), x = s.some(
|
|
79
|
-
(d) => d.type !==
|
|
80
|
-
), C = s.some((d) => d.type ===
|
|
79
|
+
(d) => d.type !== L.Income && d.status === T.Paid
|
|
80
|
+
), C = s.some((d) => d.type === L.Income), y = (u ? 1 : 0) + (f ? 1 : 0) + (x ? 1 : 0) + (C ? 1 : 0);
|
|
81
81
|
return /* @__PURE__ */ e(
|
|
82
82
|
it,
|
|
83
83
|
{
|
|
84
84
|
badgeContent: s.length > 0 && /* @__PURE__ */ o(X, { children: [
|
|
85
|
-
f && /* @__PURE__ */ e(
|
|
86
|
-
x && /* @__PURE__ */ e(
|
|
87
|
-
u && /* @__PURE__ */ e(
|
|
88
|
-
C && /* @__PURE__ */ e(
|
|
85
|
+
f && /* @__PURE__ */ e(Re, { isOffset: !0 }),
|
|
86
|
+
x && /* @__PURE__ */ e(Te, { isOffset: !0 }),
|
|
87
|
+
u && /* @__PURE__ */ e(Ce, { isOffset: !0 }),
|
|
88
|
+
C && /* @__PURE__ */ e(be, { isOffset: !0 })
|
|
89
89
|
] }),
|
|
90
90
|
overlap: "circular",
|
|
91
91
|
sx: {
|
|
@@ -134,25 +134,25 @@ const Q = {
|
|
|
134
134
|
justifyContent: "center",
|
|
135
135
|
mt: 12,
|
|
136
136
|
children: [
|
|
137
|
-
/* @__PURE__ */ e(Y, { icon:
|
|
138
|
-
/* @__PURE__ */ e(Y, { icon:
|
|
139
|
-
/* @__PURE__ */ e(Y, { icon:
|
|
140
|
-
/* @__PURE__ */ e(Y, { icon:
|
|
137
|
+
/* @__PURE__ */ e(Y, { icon: Ce, label: t.expense }),
|
|
138
|
+
/* @__PURE__ */ e(Y, { icon: be, label: t.income }),
|
|
139
|
+
/* @__PURE__ */ e(Y, { icon: Re, label: t.missed }),
|
|
140
|
+
/* @__PURE__ */ e(Y, { icon: Te, label: t.paid })
|
|
141
141
|
]
|
|
142
142
|
}
|
|
143
143
|
);
|
|
144
|
-
}),
|
|
145
|
-
const t = ge(), { onEvent: n } = J(), { selectedDay: i, setDateRange: a } =
|
|
146
|
-
|
|
144
|
+
}), Me = 58, We = D(() => {
|
|
145
|
+
const t = ge(), { onEvent: n } = J(), { selectedDay: i, setDateRange: a } = v(), [r, l] = h.useState(
|
|
146
|
+
_e(/* @__PURE__ */ new Date()) * H + Me
|
|
147
147
|
), m = (s) => {
|
|
148
|
-
l(
|
|
149
|
-
start:
|
|
148
|
+
l(_e(s) * H + Me), a({
|
|
149
|
+
start: W(s),
|
|
150
150
|
end: B(s)
|
|
151
|
-
}), n(
|
|
151
|
+
}), n(w.RECURRING_TRANSACTIONS_CLICK_CALENDAR_RIGHT);
|
|
152
152
|
}, g = /* @__PURE__ */ e(
|
|
153
153
|
et,
|
|
154
154
|
{
|
|
155
|
-
minDate:
|
|
155
|
+
minDate: W(/* @__PURE__ */ new Date()),
|
|
156
156
|
onMonthChange: m,
|
|
157
157
|
showDaysOutsideCurrentMonth: !0,
|
|
158
158
|
slots: {
|
|
@@ -206,52 +206,52 @@ const Q = {
|
|
|
206
206
|
/* @__PURE__ */ e(xt, {})
|
|
207
207
|
] }) });
|
|
208
208
|
}), yt = (t) => {
|
|
209
|
-
if (t.type ===
|
|
210
|
-
return /* @__PURE__ */ e(
|
|
209
|
+
if (t.type === L.Income)
|
|
210
|
+
return /* @__PURE__ */ e(be, {});
|
|
211
211
|
switch (t.status) {
|
|
212
212
|
case T.Missed:
|
|
213
|
-
return /* @__PURE__ */ e(be, {});
|
|
214
|
-
case T.Paid:
|
|
215
213
|
return /* @__PURE__ */ e(Re, {});
|
|
214
|
+
case T.Paid:
|
|
215
|
+
return /* @__PURE__ */ e(Te, {});
|
|
216
216
|
default:
|
|
217
|
-
return /* @__PURE__ */ e(
|
|
217
|
+
return /* @__PURE__ */ e(Ce, {});
|
|
218
218
|
}
|
|
219
219
|
}, Ct = (t, n) => {
|
|
220
220
|
switch (t.status) {
|
|
221
221
|
case T.Paid:
|
|
222
|
-
return t.expectedDate ?
|
|
222
|
+
return t.expectedDate ? O(
|
|
223
223
|
n.paid_on,
|
|
224
|
-
|
|
224
|
+
E(
|
|
225
225
|
t.occurredOnDate || t.expectedDate,
|
|
226
|
-
|
|
226
|
+
G.MONTH_DAY
|
|
227
227
|
)
|
|
228
228
|
) : n.paid;
|
|
229
229
|
case T.Missed:
|
|
230
|
-
return
|
|
230
|
+
return O(
|
|
231
231
|
n.missed_on,
|
|
232
|
-
|
|
232
|
+
E(t.expectedDate, G.MONTH_DAY)
|
|
233
233
|
);
|
|
234
234
|
case T.Upcoming:
|
|
235
|
-
return
|
|
235
|
+
return O(
|
|
236
236
|
n.upcoming_on,
|
|
237
|
-
|
|
237
|
+
E(t.expectedDate, G.MONTH_DAY)
|
|
238
238
|
);
|
|
239
239
|
default:
|
|
240
240
|
return n.unknown;
|
|
241
241
|
}
|
|
242
|
-
},
|
|
242
|
+
}, Le = ({
|
|
243
243
|
recurrence: t,
|
|
244
244
|
isMini: n = !1,
|
|
245
245
|
onRecurrenceClick: i = () => {
|
|
246
246
|
},
|
|
247
247
|
showOrdinal: a = !1
|
|
248
248
|
}) => {
|
|
249
|
-
const { recurring: r } = S(), { repeatingTransactions: l } =
|
|
250
|
-
() => l.find((
|
|
249
|
+
const { recurring: r } = S(), { repeatingTransactions: l } = v(), [m, g] = h.useState(!1), s = h.useMemo(
|
|
250
|
+
() => l.find((R) => R.guid === t.repeatingTransactionGuid),
|
|
251
251
|
[t, l]
|
|
252
|
-
), u = t.type ===
|
|
252
|
+
), u = t.type === L.Income, f = t.status === T.Paid, x = t.status === T.Missed, C = t.status === T.Upcoming;
|
|
253
253
|
let y = r.paid?.toLowerCase();
|
|
254
|
-
return x ? y = r.missed?.toLowerCase() : C && (y = a ?
|
|
254
|
+
return x ? y = r.missed?.toLowerCase() : C && (y = a ? we(r, s || {}, !0) : we(r, s || {}, !1)), //TODO: implement common/components/ListItemRow.tsx
|
|
255
255
|
/* @__PURE__ */ o(Ne, { disableGutters: !0, disablePadding: !0, children: [
|
|
256
256
|
/* @__PURE__ */ o(dt, { onClick: () => {
|
|
257
257
|
g(!0), i(t);
|
|
@@ -290,7 +290,7 @@ const Q = {
|
|
|
290
290
|
/* @__PURE__ */ o(c, { alignItems: "flex-end", width: "100%", children: [
|
|
291
291
|
/* @__PURE__ */ o(p, { bold: !0, color: u ? "success.main" : "text.primary", variant: "body1", children: [
|
|
292
292
|
u ? "+" : "",
|
|
293
|
-
|
|
293
|
+
A(t.amount, "0,0.00")
|
|
294
294
|
] }),
|
|
295
295
|
!n && /* @__PURE__ */ o(
|
|
296
296
|
c,
|
|
@@ -304,8 +304,8 @@ const Q = {
|
|
|
304
304
|
width: "100%"
|
|
305
305
|
},
|
|
306
306
|
children: [
|
|
307
|
-
f && /* @__PURE__ */ e(
|
|
308
|
-
x && /* @__PURE__ */ e(
|
|
307
|
+
f && /* @__PURE__ */ e(Ge, { color: "success", filled: !0, size: 12 }),
|
|
308
|
+
x && /* @__PURE__ */ e(Ee, { color: "error", filled: !0, size: 12 }),
|
|
309
309
|
/* @__PURE__ */ e(p, { bold: !0, color: "text.secondary", variant: "caption", children: y })
|
|
310
310
|
]
|
|
311
311
|
}
|
|
@@ -321,7 +321,7 @@ const Q = {
|
|
|
321
321
|
ariaLabelClose: r.close_drawer_aria,
|
|
322
322
|
isOpen: m,
|
|
323
323
|
onClose: () => g(!1),
|
|
324
|
-
title: t.type ===
|
|
324
|
+
title: t.type === L.Income ? r.income_details : r.expense_details,
|
|
325
325
|
children: s && /* @__PURE__ */ e(
|
|
326
326
|
mt,
|
|
327
327
|
{
|
|
@@ -353,9 +353,9 @@ const Q = {
|
|
|
353
353
|
]
|
|
354
354
|
}
|
|
355
355
|
),
|
|
356
|
-
t.length === 0 ? /* @__PURE__ */ e(p, { fontStyle: "italic", sx: { py: 24, textAlign: "center" }, children: m.no_activities }) : /* @__PURE__ */ e(
|
|
356
|
+
t.length === 0 ? /* @__PURE__ */ e(p, { fontStyle: "italic", sx: { py: 24, textAlign: "center" }, children: m.no_activities }) : /* @__PURE__ */ e(ve, { children: n ? t.map((s, u) => /* @__PURE__ */ o(h.Fragment, { children: [
|
|
357
357
|
/* @__PURE__ */ e(
|
|
358
|
-
|
|
358
|
+
Le,
|
|
359
359
|
{
|
|
360
360
|
isMini: n,
|
|
361
361
|
onRecurrenceClick: a,
|
|
@@ -365,12 +365,12 @@ const Q = {
|
|
|
365
365
|
/* @__PURE__ */ e(le, { sx: { mx: 24 } })
|
|
366
366
|
] }, `recurrence-${u}`)) : g.map((s, u) => /* @__PURE__ */ o(h.Fragment, { children: [
|
|
367
367
|
/* @__PURE__ */ e(Ne, { children: /* @__PURE__ */ e(
|
|
368
|
-
|
|
368
|
+
ve,
|
|
369
369
|
{
|
|
370
|
-
subheader: /* @__PURE__ */ e(ct, { sx: { bgcolor: "background.paper", ml: 8, pb: 4, pt: 12 }, children: /* @__PURE__ */ e(p, { bold: !0, variant: "caption", children:
|
|
370
|
+
subheader: /* @__PURE__ */ e(ct, { sx: { bgcolor: "background.paper", ml: 8, pb: 4, pt: 12 }, children: /* @__PURE__ */ e(p, { bold: !0, variant: "caption", children: E(s.date, G.DAY_OF_WEEK_MONTH_DAY) }) }),
|
|
371
371
|
sx: { width: "100%" },
|
|
372
372
|
children: s.recurrences.map((f, x) => /* @__PURE__ */ e(h.Fragment, { children: /* @__PURE__ */ e(
|
|
373
|
-
|
|
373
|
+
Le,
|
|
374
374
|
{
|
|
375
375
|
isMini: n,
|
|
376
376
|
onRecurrenceClick: a,
|
|
@@ -383,35 +383,35 @@ const Q = {
|
|
|
383
383
|
] }, `recurrence-${u}`)) })
|
|
384
384
|
] });
|
|
385
385
|
}
|
|
386
|
-
),
|
|
386
|
+
), Ae = D(
|
|
387
387
|
({ expected: t, isExpense: n = !0, missed: i, paid: a, title: r, total: l, upcoming: m }) => {
|
|
388
|
-
const g = ge(), { isSmallMobile: s } =
|
|
388
|
+
const g = ge(), { isSmallMobile: s } = ye(), { recurring: u } = S(), f = h.useMemo(() => {
|
|
389
389
|
const x = [{ color: g.palette.success.main, percentage: `${a / t}` }];
|
|
390
390
|
return i && x.push({ color: g.palette.error.main, percentage: `${i / t}` }), x;
|
|
391
391
|
}, [a, t, i]);
|
|
392
392
|
return /* @__PURE__ */ o(c, { children: [
|
|
393
393
|
/* @__PURE__ */ o(c, { sx: { flexDirection: "row", justifyContent: "space-between", pb: 12 }, children: [
|
|
394
394
|
/* @__PURE__ */ e(p, { bold: !0, variant: "body1", children: `${r} (${l})` }),
|
|
395
|
-
/* @__PURE__ */ e(p, { bold: !0, color: n ? "text.primary" : "success.main", variant: "body1", children: `${n ? "-" : "+"}${
|
|
395
|
+
/* @__PURE__ */ e(p, { bold: !0, color: n ? "text.primary" : "success.main", variant: "body1", children: `${n ? "-" : "+"}${A(t, "0,0.00")}` })
|
|
396
396
|
] }),
|
|
397
397
|
/* @__PURE__ */ e(ke, { data: f, height: 12 }),
|
|
398
398
|
/* @__PURE__ */ o(c, { sx: { alignItems: "center", flexDirection: "row", gap: 2, my: 8 }, children: [
|
|
399
|
-
/* @__PURE__ */ e(
|
|
400
|
-
!s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children:
|
|
399
|
+
/* @__PURE__ */ e(k, { sx: { bgcolor: "success.main", height: 8, mr: 8, width: 8 } }),
|
|
400
|
+
!s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children: A(a, "0,0.00") }),
|
|
401
401
|
/* @__PURE__ */ e(p, { variant: "caption", children: u.paid?.toLowerCase() }),
|
|
402
402
|
i !== void 0 && /* @__PURE__ */ o(X, { children: [
|
|
403
|
-
/* @__PURE__ */ e(
|
|
404
|
-
!s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children:
|
|
403
|
+
/* @__PURE__ */ e(k, { sx: { bgcolor: "error.main", height: 8, ml: 16, mr: 8, width: 8 } }),
|
|
404
|
+
!s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children: A(i, "0,0.00") }),
|
|
405
405
|
/* @__PURE__ */ e(p, { variant: "caption", children: u.missed?.toLowerCase() })
|
|
406
406
|
] }),
|
|
407
|
-
/* @__PURE__ */ e(
|
|
408
|
-
!s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children:
|
|
407
|
+
/* @__PURE__ */ e(k, { sx: { bgcolor: "divider", height: 8, ml: 16, mr: 8, width: 8 } }),
|
|
408
|
+
!s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children: A(m, "0,0.00") }),
|
|
409
409
|
/* @__PURE__ */ e(p, { variant: "caption", children: u.upcoming })
|
|
410
410
|
] })
|
|
411
411
|
] });
|
|
412
412
|
}
|
|
413
413
|
), bt = D(() => {
|
|
414
|
-
const { recurring: t } = S(), { availableWidth: n } =
|
|
414
|
+
const { recurring: t } = S(), { availableWidth: n } = he(), { isDesktop: i, isSmallMobile: a, isMobile: r } = ye(n), { onEvent: l } = J(), {
|
|
415
415
|
currentMonthExpenses: m,
|
|
416
416
|
currentMonthIncome: g,
|
|
417
417
|
dateRange: s,
|
|
@@ -421,33 +421,33 @@ const Q = {
|
|
|
421
421
|
pastRecurrences: C,
|
|
422
422
|
paidExpenseTotal: y,
|
|
423
423
|
paidIncomeTotal: d,
|
|
424
|
-
selectedDay:
|
|
425
|
-
selectedDayRecurrences:
|
|
424
|
+
selectedDay: R,
|
|
425
|
+
selectedDayRecurrences: I,
|
|
426
426
|
setDateRange: U,
|
|
427
427
|
upcomingExpenseTotal: te,
|
|
428
428
|
upcomingIncomeTotal: ne,
|
|
429
429
|
upcomingRecurrences: F
|
|
430
|
-
} =
|
|
431
|
-
|
|
432
|
-
}, j = (
|
|
433
|
-
l(
|
|
434
|
-
transaction_guid:
|
|
430
|
+
} = v(), [$, _] = h.useState(0), ie = Fe(s.start, /* @__PURE__ */ new Date()), M = (b, oe) => {
|
|
431
|
+
_(oe);
|
|
432
|
+
}, j = (b) => {
|
|
433
|
+
l(w.RECURRING_TRANSACTIONS_CLICK_UPCOMING, {
|
|
434
|
+
transaction_guid: b.transaction?.guid
|
|
435
435
|
});
|
|
436
|
-
}, K = (
|
|
437
|
-
l(
|
|
438
|
-
transaction_guid:
|
|
436
|
+
}, K = (b) => {
|
|
437
|
+
l(w.RECURRING_TRANSACTIONS_CLICK_PAID, {
|
|
438
|
+
transaction_guid: b.transaction?.guid
|
|
439
439
|
});
|
|
440
440
|
}, P = () => {
|
|
441
|
-
const
|
|
441
|
+
const b = Be(s.start, 1);
|
|
442
442
|
U({
|
|
443
|
-
start:
|
|
444
|
-
end: B(
|
|
443
|
+
start: W(b),
|
|
444
|
+
end: B(b)
|
|
445
445
|
});
|
|
446
446
|
}, re = () => {
|
|
447
|
-
const
|
|
447
|
+
const b = Ue(s.start, 1);
|
|
448
448
|
U({
|
|
449
|
-
start:
|
|
450
|
-
end: B(
|
|
449
|
+
start: W(b),
|
|
450
|
+
end: B(b)
|
|
451
451
|
});
|
|
452
452
|
};
|
|
453
453
|
return /* @__PURE__ */ o(
|
|
@@ -461,13 +461,13 @@ const Q = {
|
|
|
461
461
|
/* @__PURE__ */ o(se, { md: !0, sm: 12, width: "100%", children: [
|
|
462
462
|
/* @__PURE__ */ o(c, { sx: { gap: 16, px: i ? 48 : 24 }, children: [
|
|
463
463
|
/* @__PURE__ */ o(c, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
|
|
464
|
-
/* @__PURE__ */ e(Je, { children:
|
|
464
|
+
/* @__PURE__ */ e(Je, { children: O(
|
|
465
465
|
t.header_title,
|
|
466
|
-
|
|
466
|
+
E(s.start, G.MONTH_LONG)
|
|
467
467
|
) }),
|
|
468
468
|
!i && /* @__PURE__ */ o(c, { direction: "row", gap: 4, children: [
|
|
469
469
|
/* @__PURE__ */ e(
|
|
470
|
-
|
|
470
|
+
Se,
|
|
471
471
|
{
|
|
472
472
|
color: "primary",
|
|
473
473
|
disabled: ie,
|
|
@@ -475,11 +475,11 @@ const Q = {
|
|
|
475
475
|
children: /* @__PURE__ */ e(Ve, {})
|
|
476
476
|
}
|
|
477
477
|
),
|
|
478
|
-
/* @__PURE__ */ e(
|
|
478
|
+
/* @__PURE__ */ e(Se, { color: "primary", onClick: P, children: /* @__PURE__ */ e(Xe, {}) })
|
|
479
479
|
] })
|
|
480
480
|
] }),
|
|
481
481
|
/* @__PURE__ */ e(
|
|
482
|
-
|
|
482
|
+
Ae,
|
|
483
483
|
{
|
|
484
484
|
expected: u,
|
|
485
485
|
missed: x,
|
|
@@ -490,7 +490,7 @@ const Q = {
|
|
|
490
490
|
}
|
|
491
491
|
),
|
|
492
492
|
/* @__PURE__ */ e(
|
|
493
|
-
|
|
493
|
+
Ae,
|
|
494
494
|
{
|
|
495
495
|
expected: f,
|
|
496
496
|
isExpense: !1,
|
|
@@ -510,15 +510,15 @@ const Q = {
|
|
|
510
510
|
)
|
|
511
511
|
] }),
|
|
512
512
|
!i && /* @__PURE__ */ o(c, { sx: { px: r ? 0 : 24 }, children: [
|
|
513
|
-
/* @__PURE__ */ o(je, { onChange:
|
|
513
|
+
/* @__PURE__ */ o(je, { onChange: M, value: $, variant: "fullWidth", children: [
|
|
514
514
|
/* @__PURE__ */ e(
|
|
515
|
-
|
|
515
|
+
Ie,
|
|
516
516
|
{
|
|
517
517
|
label: /* @__PURE__ */ e(p, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: a ? t.upcoming : t.upcoming_activity })
|
|
518
518
|
}
|
|
519
519
|
),
|
|
520
520
|
/* @__PURE__ */ e(
|
|
521
|
-
|
|
521
|
+
Ie,
|
|
522
522
|
{
|
|
523
523
|
label: /* @__PURE__ */ e(p, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: a ? t.past : t.past_transactions })
|
|
524
524
|
}
|
|
@@ -546,10 +546,10 @@ const Q = {
|
|
|
546
546
|
z,
|
|
547
547
|
{
|
|
548
548
|
onRecurrenceClick: K,
|
|
549
|
-
recurrences:
|
|
550
|
-
title:
|
|
549
|
+
recurrences: I || C,
|
|
550
|
+
title: R ? O(
|
|
551
551
|
t.day_transactions,
|
|
552
|
-
|
|
552
|
+
E(R, G.MONTH_DAY)
|
|
553
553
|
) : t.past_transactions
|
|
554
554
|
}
|
|
555
555
|
)
|
|
@@ -558,14 +558,14 @@ const Q = {
|
|
|
558
558
|
}
|
|
559
559
|
);
|
|
560
560
|
}), _n = D(({ onBackClick: t, sx: n = {} }) => {
|
|
561
|
-
const { accounts: i } =
|
|
561
|
+
const { accounts: i } = fe(), { recurring: a } = S(), { isCopyLoaded: r, isInitialized: l, selectedAccountGuids: m, setSelectedAccounts: g } = q(), { isDataLoaded: s, loadRepeatingTransactions: u, setDateRange: f } = v(), { setFilter: x } = xe(), { onEvent: C } = J(), { availableWidth: y } = he(), { isMobile: d } = ye(y), [R, I] = h.useState(!1);
|
|
562
562
|
return h.useEffect(() => {
|
|
563
563
|
g(i);
|
|
564
564
|
}, [i]), h.useEffect(() => {
|
|
565
565
|
l && (x({
|
|
566
566
|
dateRange: { start: me(ue(), 90), end: de() },
|
|
567
567
|
accounts: m
|
|
568
|
-
}), f({ start:
|
|
568
|
+
}), f({ start: W(/* @__PURE__ */ new Date()), end: B(/* @__PURE__ */ new Date()) }), u().finally());
|
|
569
569
|
}, [l]), r ? /* @__PURE__ */ o(
|
|
570
570
|
at,
|
|
571
571
|
{
|
|
@@ -575,12 +575,12 @@ const Q = {
|
|
|
575
575
|
label: a.action_title,
|
|
576
576
|
iconName: "credit_card_gear",
|
|
577
577
|
onClick: () => {
|
|
578
|
-
|
|
578
|
+
I(!0), C(w.RECURRING_TRANSACTIONS_CLICK_SETTINGS);
|
|
579
579
|
}
|
|
580
580
|
}
|
|
581
581
|
],
|
|
582
|
-
hasDivider:
|
|
583
|
-
onAccountsFilterClick: () => C(
|
|
582
|
+
hasDivider: d,
|
|
583
|
+
onAccountsFilterClick: () => C(w.RECURRING_TRANSACTIONS_CLICK_FILTER),
|
|
584
584
|
onBackClick: t,
|
|
585
585
|
sx: n,
|
|
586
586
|
title: a.title,
|
|
@@ -594,8 +594,8 @@ const Q = {
|
|
|
594
594
|
Oe,
|
|
595
595
|
{
|
|
596
596
|
ariaLabelClose: a.close_drawer_aria,
|
|
597
|
-
isOpen:
|
|
598
|
-
onClose: () =>
|
|
597
|
+
isOpen: R,
|
|
598
|
+
onClose: () => I(!1),
|
|
599
599
|
shouldShowHeaderBorders: !1,
|
|
600
600
|
title: a.action_title,
|
|
601
601
|
children: /* @__PURE__ */ e(ze, {})
|
|
@@ -605,7 +605,7 @@ const Q = {
|
|
|
605
605
|
}
|
|
606
606
|
) : /* @__PURE__ */ e(V, {});
|
|
607
607
|
}), Rt = D(() => {
|
|
608
|
-
const { recurring: t } = S(), { availableWidth: n } =
|
|
608
|
+
const { recurring: t } = S(), { availableWidth: n } = he(), { selectedDay: i, selectedDayRecurrences: a, setSelectedDay: r, upcomingRecurrences: l } = v(), m = n < 750;
|
|
609
609
|
return /* @__PURE__ */ o(c, { flexDirection: m ? "column" : "row", width: "100%", children: [
|
|
610
610
|
/* @__PURE__ */ e(We, {}),
|
|
611
611
|
!m && /* @__PURE__ */ e(le, { flexItem: !0, orientation: "vertical", sx: { my: 16, ml: 16 } }),
|
|
@@ -616,16 +616,16 @@ const Q = {
|
|
|
616
616
|
onResetClick: i ? () => r(i) : void 0,
|
|
617
617
|
recurrences: a || l.slice(0, 5),
|
|
618
618
|
sx: { width: m ? "100%" : "calc(100% - 336px)", mt: 12 },
|
|
619
|
-
title: i ?
|
|
619
|
+
title: i ? O(
|
|
620
620
|
t.day_transactions,
|
|
621
|
-
|
|
621
|
+
E(i, G.MONTH_DAY)
|
|
622
622
|
) : t.upcoming_activity
|
|
623
623
|
}
|
|
624
624
|
)
|
|
625
625
|
] });
|
|
626
626
|
}), wn = D(
|
|
627
627
|
({ onPrimaryCtaClick: t, sx: n }) => {
|
|
628
|
-
const { accounts: i } =
|
|
628
|
+
const { accounts: i } = fe(), { recurring: a } = S(), { setFilter: r } = xe(), { isDataLoaded: l, loadRepeatingTransactions: m } = v(), { isCopyLoaded: g, isInitialized: s, setSelectedAccounts: u, selectedAccountGuids: f } = q();
|
|
629
629
|
return h.useEffect(() => {
|
|
630
630
|
s && u(i);
|
|
631
631
|
}, [s]), h.useEffect(() => {
|
|
@@ -663,14 +663,14 @@ const Q = {
|
|
|
663
663
|
}) => {
|
|
664
664
|
const a = (r) => r * (n / 2);
|
|
665
665
|
return /* @__PURE__ */ e(
|
|
666
|
-
|
|
666
|
+
k,
|
|
667
667
|
{
|
|
668
668
|
sx: {
|
|
669
669
|
position: "relative",
|
|
670
670
|
width: 64
|
|
671
671
|
},
|
|
672
672
|
children: t.map((r, l) => l < i ? /* @__PURE__ */ e(
|
|
673
|
-
|
|
673
|
+
k,
|
|
674
674
|
{
|
|
675
675
|
sx: {
|
|
676
676
|
borderRadius: "4px",
|
|
@@ -701,7 +701,7 @@ const Q = {
|
|
|
701
701
|
label: r
|
|
702
702
|
}) => /* @__PURE__ */ o(c, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
|
|
703
703
|
/* @__PURE__ */ e(
|
|
704
|
-
|
|
704
|
+
k,
|
|
705
705
|
{
|
|
706
706
|
sx: {
|
|
707
707
|
borderRadius: "2px",
|
|
@@ -712,7 +712,7 @@ const Q = {
|
|
|
712
712
|
}
|
|
713
713
|
),
|
|
714
714
|
/* @__PURE__ */ o(c, { sx: { alignItems: "center", flexDirection: "row", gap: 2 }, children: [
|
|
715
|
-
!a && /* @__PURE__ */ e(p, { bold: !0, variant: "caption", children:
|
|
715
|
+
!a && /* @__PURE__ */ e(p, { bold: !0, variant: "caption", children: A(t, t === 0 || !i ? "0,0" : "0,0.00") }),
|
|
716
716
|
/* @__PURE__ */ e(p, { variant: "caption", children: r })
|
|
717
717
|
] })
|
|
718
718
|
] }), It = D(() => {
|
|
@@ -726,81 +726,81 @@ const Q = {
|
|
|
726
726
|
] });
|
|
727
727
|
}), vn = D(
|
|
728
728
|
({ onCTAClick: t }) => {
|
|
729
|
-
const [n, i] = h.useState(!1), { onEvent: a } = J(), r = ge(), { accounts: l } =
|
|
729
|
+
const [n, i] = h.useState(!1), { onEvent: a } = J(), r = ge(), { accounts: l } = fe(), [m, { width: g }] = gt(), { isCopyLoaded: s, isInitialized: u, selectedAccountGuids: f, setSelectedAccounts: x } = q(), {
|
|
730
730
|
loadRepeatingTransactions: C,
|
|
731
731
|
upcomingRecurrences: y,
|
|
732
732
|
expenseTotal: d,
|
|
733
|
-
missedExpenseTotal:
|
|
734
|
-
paidExpenseTotal:
|
|
733
|
+
missedExpenseTotal: R,
|
|
734
|
+
paidExpenseTotal: I,
|
|
735
735
|
repeatingTransactions: U,
|
|
736
736
|
setDateRange: te,
|
|
737
737
|
upcomingExpenseTotal: ne,
|
|
738
738
|
isDataLoaded: F
|
|
739
|
-
} =
|
|
739
|
+
} = v(), { setFilter: $ } = xe(), { recurring: _, budgets: ie } = S();
|
|
740
740
|
h.useEffect(() => {
|
|
741
741
|
x(l);
|
|
742
742
|
}, [l]), h.useEffect(() => {
|
|
743
743
|
u && ($({
|
|
744
744
|
dateRange: { start: me(ue(), 90), end: de() },
|
|
745
745
|
accounts: f
|
|
746
|
-
}), te({ start:
|
|
746
|
+
}), te({ start: W(/* @__PURE__ */ new Date()), end: B(/* @__PURE__ */ new Date()) }), C().finally(), i(!0));
|
|
747
747
|
}, [u]), h.useEffect(() => {
|
|
748
|
-
n && a(
|
|
748
|
+
n && a(w.RECURRING_TRANSACTIONS_LOAD_WIDGET, {
|
|
749
749
|
state: y.length > 0 ? "default" : "zeroState"
|
|
750
750
|
});
|
|
751
751
|
}, [n]);
|
|
752
|
-
const
|
|
753
|
-
const
|
|
754
|
-
{ color: r.palette.success.main, percentage: `${
|
|
752
|
+
const M = g <= 288, j = g >= 450, K = h.useMemo(() => {
|
|
753
|
+
const N = [
|
|
754
|
+
{ color: r.palette.success.main, percentage: `${I / d}` }
|
|
755
755
|
];
|
|
756
|
-
return
|
|
756
|
+
return R && N.push({
|
|
757
757
|
color: r.palette.error.main,
|
|
758
|
-
percentage: `${
|
|
759
|
-
}),
|
|
758
|
+
percentage: `${R / d}`
|
|
759
|
+
}), N;
|
|
760
760
|
}, [
|
|
761
|
-
|
|
761
|
+
I,
|
|
762
762
|
d,
|
|
763
|
-
|
|
763
|
+
R,
|
|
764
764
|
r.palette.success.main,
|
|
765
765
|
r.palette.error.main
|
|
766
|
-
]), P = h.useMemo(() =>
|
|
766
|
+
]), P = h.useMemo(() => A(d, d === 0 ? "0,0" : "0,0.00"), [d]), re = () => {
|
|
767
767
|
a(
|
|
768
|
-
y.length > 0 ?
|
|
768
|
+
y.length > 0 ? w.RECURRING_TRANSACTIONS_CLICK_GET_STARTED : w.RECURRING_TRANSACTIONS_CLICK_VIEW_ALL
|
|
769
769
|
), t();
|
|
770
770
|
};
|
|
771
771
|
if (!s || !n || !F) return /* @__PURE__ */ e(V, { height: 100 });
|
|
772
|
-
const
|
|
772
|
+
const b = 32, oe = y.length > 0, $e = () => oe ? M ? /* @__PURE__ */ e(
|
|
773
773
|
Dt,
|
|
774
774
|
{
|
|
775
|
-
logoSize:
|
|
775
|
+
logoSize: b,
|
|
776
776
|
maxLogos: 3,
|
|
777
777
|
upcomingRecurrences: y.slice(0, 3)
|
|
778
778
|
}
|
|
779
|
-
) : /* @__PURE__ */ e(Tt, { maxLogos: 3, upcomingRecurrences: y.slice(0, 3) }) : /* @__PURE__ */ e(c, { sx: { width:
|
|
779
|
+
) : /* @__PURE__ */ e(Tt, { maxLogos: 3, upcomingRecurrences: y.slice(0, 3) }) : /* @__PURE__ */ e(c, { sx: { width: M ? 64 : 104 } }), Pe = [
|
|
780
780
|
{
|
|
781
|
-
amount:
|
|
781
|
+
amount: I,
|
|
782
782
|
bgColor: "success.main",
|
|
783
|
-
label:
|
|
783
|
+
label: _.paid
|
|
784
784
|
},
|
|
785
785
|
{
|
|
786
|
-
amount:
|
|
786
|
+
amount: R,
|
|
787
787
|
bgColor: "error.main",
|
|
788
|
-
label:
|
|
788
|
+
label: _.missed
|
|
789
789
|
},
|
|
790
790
|
{
|
|
791
791
|
amount: ne,
|
|
792
792
|
bgColor: "border.light",
|
|
793
|
-
label:
|
|
793
|
+
label: _.upcoming
|
|
794
794
|
}
|
|
795
|
-
],
|
|
795
|
+
], De = !U?.length;
|
|
796
796
|
return /* @__PURE__ */ e(
|
|
797
797
|
ht,
|
|
798
798
|
{
|
|
799
799
|
className: "mx-recurring-transaction-microwidget",
|
|
800
|
-
ctaLabel:
|
|
800
|
+
ctaLabel: De ? ie.get_started_cta : _.primary_cta,
|
|
801
801
|
onCTAClick: re,
|
|
802
|
-
title:
|
|
803
|
-
children:
|
|
802
|
+
title: _.recurring_expenses,
|
|
803
|
+
children: De ? /* @__PURE__ */ e(It, {}) : /* @__PURE__ */ o(X, { children: [
|
|
804
804
|
/* @__PURE__ */ o(
|
|
805
805
|
c,
|
|
806
806
|
{
|
|
@@ -814,7 +814,7 @@ const Q = {
|
|
|
814
814
|
c,
|
|
815
815
|
{
|
|
816
816
|
sx: [
|
|
817
|
-
P.length >= 10 &&
|
|
817
|
+
P.length >= 10 && M ? { flexDirection: "column" } : { flexDirection: "row", gap: 2 },
|
|
818
818
|
{
|
|
819
819
|
alignItems: "baseline",
|
|
820
820
|
overflow: "hidden",
|
|
@@ -827,7 +827,7 @@ const Q = {
|
|
|
827
827
|
p,
|
|
828
828
|
{
|
|
829
829
|
sx: { width: "100%" },
|
|
830
|
-
variant: P.length >= 10 &&
|
|
830
|
+
variant: P.length >= 10 && M ? "H3" : "H2",
|
|
831
831
|
children: P
|
|
832
832
|
}
|
|
833
833
|
),
|
|
@@ -838,7 +838,7 @@ const Q = {
|
|
|
838
838
|
pr: 12
|
|
839
839
|
},
|
|
840
840
|
variant: "XSmall",
|
|
841
|
-
children:
|
|
841
|
+
children: _.expected
|
|
842
842
|
}
|
|
843
843
|
)
|
|
844
844
|
]
|
|
@@ -859,14 +859,14 @@ const Q = {
|
|
|
859
859
|
gap: 16,
|
|
860
860
|
mt: 4
|
|
861
861
|
},
|
|
862
|
-
children: Pe.map((
|
|
862
|
+
children: Pe.map((N, He) => /* @__PURE__ */ e(
|
|
863
863
|
St,
|
|
864
864
|
{
|
|
865
|
-
amount:
|
|
866
|
-
bgcolor:
|
|
865
|
+
amount: N.amount,
|
|
866
|
+
bgcolor: N.bgColor,
|
|
867
867
|
isLargeScreen: j,
|
|
868
|
-
isSmallScreen:
|
|
869
|
-
label:
|
|
868
|
+
isSmallScreen: M,
|
|
869
|
+
label: N.label
|
|
870
870
|
},
|
|
871
871
|
`recurrence-legend-${He}`
|
|
872
872
|
))
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mx-cartographer/experiences",
|
|
3
|
-
"version": "7.0.37-alpha-recurring-transactions-divider-padding-
|
|
3
|
+
"version": "7.0.37-alpha-recurring-transactions-divider-padding-ram3",
|
|
4
4
|
"description": "Library containing experience widgets",
|
|
5
5
|
"author": "MX",
|
|
6
6
|
"license": "MIT",
|