@mx-cartographer/experiences 9.5.1 → 9.5.3
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/CHANGELOG.md +8 -0
- package/dist/common/components/ListItemWrapper.d.ts +5 -0
- package/dist/common/components/ListItemWrapper.es.js +10 -9
- package/dist/common/components/ListItemWrapper.es.js.map +1 -1
- package/dist/recurringtransactions/components/shared/recurringsettings/SelectTransaction.d.ts +4 -2
- package/dist/recurringtransactions/components/shared/recurringsettings/SelectTransaction.es.js +18 -18
- package/dist/recurringtransactions/components/shared/recurringsettings/SelectTransaction.es.js.map +1 -1
- package/dist/transactions/components/shared/TransactionList.d.ts +5 -0
- package/dist/transactions/components/shared/TransactionList.es.js +39 -38
- package/dist/transactions/components/shared/TransactionList.es.js.map +1 -1
- package/dist/transactions/components/shared/transactionlist/TransactionRow.d.ts +2 -0
- package/dist/transactions/components/shared/transactionlist/TransactionRow.es.js +27 -26
- package/dist/transactions/components/shared/transactionlist/TransactionRow.es.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## [9.5.3] - 10-09-2026
|
|
2
|
+
|
|
3
|
+
- **CHANGED** - Repeating-transaction create flows show Sherlock-ineligible rows disabled instead of hiding them; `SelectTransaction` drives `TransactionList`'s new `isRowDisabled` prop instead of `filter` (MEW-4143)
|
|
4
|
+
|
|
5
|
+
## [9.5.2] - 10-09-2026
|
|
6
|
+
|
|
7
|
+
- **FIXED** - The small-screen Edit date range drawer shows the selected dates as text instead of From and To fields that could not be typed into MEW-4218
|
|
8
|
+
|
|
1
9
|
## [9.5.1] - 10-09-2026
|
|
2
10
|
|
|
3
11
|
- **CHANGED** - Repeating-transaction eligibility now mirrors Sherlock (account-type gate plus merchant, or leaf bill/utility category with description, or payroll with description) and is an input to `SelectTransaction`; the eligibility filter is removed from Mark as Paid (MEW-4168)
|
|
@@ -3,6 +3,11 @@ import { SxProps } from '@mui/material/styles';
|
|
|
3
3
|
interface ListItemWrapperProps {
|
|
4
4
|
clickEventName?: string;
|
|
5
5
|
component?: ElementType;
|
|
6
|
+
/**
|
|
7
|
+
* Renders the row in MUI's disabled state (greyed, `aria-disabled`, not focusable) and drops
|
|
8
|
+
* its click handler, so the row is visible but inert.
|
|
9
|
+
*/
|
|
10
|
+
disabled?: boolean;
|
|
6
11
|
onClick?: () => void;
|
|
7
12
|
sx?: SxProps;
|
|
8
13
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { useEvent as
|
|
1
|
+
import { useEvent as f } from "../context/hooks.es.js";
|
|
2
2
|
import "react";
|
|
3
3
|
import { jsx as t } from "react/jsx-runtime";
|
|
4
|
-
import
|
|
4
|
+
import p from "@mui/material/ListItem";
|
|
5
5
|
import l from "@mui/material/ListItemButton";
|
|
6
|
-
var
|
|
7
|
-
const { onEvent:
|
|
8
|
-
return
|
|
6
|
+
var v = ({ children: e, clickEventName: s, component: r, disabled: a = !1, onClick: o, sx: i = {} }) => {
|
|
7
|
+
const { onEvent: m } = f();
|
|
8
|
+
return o ? /* @__PURE__ */ t(p, {
|
|
9
9
|
className: "list-wrapper",
|
|
10
10
|
...r && { component: r },
|
|
11
11
|
sx: {
|
|
@@ -13,12 +13,13 @@ var n = ({ children: e, clickEventName: s, component: r, onClick: a, sx: i = {}
|
|
|
13
13
|
...i
|
|
14
14
|
},
|
|
15
15
|
children: /* @__PURE__ */ t(l, {
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
disabled: a,
|
|
17
|
+
onClick: a ? void 0 : () => {
|
|
18
|
+
s && m(s), o();
|
|
18
19
|
},
|
|
19
20
|
children: e
|
|
20
21
|
})
|
|
21
|
-
}) : /* @__PURE__ */ t(
|
|
22
|
+
}) : /* @__PURE__ */ t(p, {
|
|
22
23
|
className: "list-wrapper",
|
|
23
24
|
...r && { component: r },
|
|
24
25
|
disableGutters: !1,
|
|
@@ -31,7 +32,7 @@ var n = ({ children: e, clickEventName: s, component: r, onClick: a, sx: i = {}
|
|
|
31
32
|
});
|
|
32
33
|
};
|
|
33
34
|
export {
|
|
34
|
-
|
|
35
|
+
v as ListItemWrapper
|
|
35
36
|
};
|
|
36
37
|
|
|
37
38
|
//# sourceMappingURL=ListItemWrapper.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemWrapper.es.js","names":[],"sources":["../../../src/common/components/ListItemWrapper.tsx"],"sourcesContent":["import React, { ElementType } from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport { SxProps } from '@mui/material/styles'\n\nimport { useEvent } from '../context'\n\ninterface ListItemWrapperProps {\n clickEventName?: string\n component?: ElementType\n onClick?: () => void\n sx?: SxProps\n}\n\nexport const ListItemWrapper: React.FC<React.PropsWithChildren<ListItemWrapperProps>> = ({\n children,\n clickEventName,\n component,\n onClick,\n sx = {},\n}) => {\n const { onEvent } = useEvent()\n\n if (onClick) {\n return (\n <ListItem\n className=\"list-wrapper\"\n {...(component && { component })}\n sx={{ bgcolor: 'background.paper', ...sx }}\n >\n <ListItemButton\n onClick={() => {\n
|
|
1
|
+
{"version":3,"file":"ListItemWrapper.es.js","names":[],"sources":["../../../src/common/components/ListItemWrapper.tsx"],"sourcesContent":["import React, { ElementType } from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport { SxProps } from '@mui/material/styles'\n\nimport { useEvent } from '../context'\n\ninterface ListItemWrapperProps {\n clickEventName?: string\n component?: ElementType\n /**\n * Renders the row in MUI's disabled state (greyed, `aria-disabled`, not focusable) and drops\n * its click handler, so the row is visible but inert.\n */\n disabled?: boolean\n onClick?: () => void\n sx?: SxProps\n}\n\nexport const ListItemWrapper: React.FC<React.PropsWithChildren<ListItemWrapperProps>> = ({\n children,\n clickEventName,\n component,\n disabled = false,\n onClick,\n sx = {},\n}) => {\n const { onEvent } = useEvent()\n\n if (onClick) {\n return (\n <ListItem\n className=\"list-wrapper\"\n {...(component && { component })}\n sx={{ bgcolor: 'background.paper', ...sx }}\n >\n <ListItemButton\n disabled={disabled}\n onClick={\n disabled\n ? undefined\n : () => {\n if (clickEventName) {\n onEvent(clickEventName)\n }\n onClick()\n }\n }\n >\n {children}\n </ListItemButton>\n </ListItem>\n )\n } else {\n return (\n <ListItem\n className=\"list-wrapper\"\n {...(component && { component })}\n disableGutters={false}\n disablePadding={false}\n sx={{ bgcolor: 'background.paper', ...sx }}\n >\n {children}\n </ListItem>\n )\n }\n}\n"],"mappings":";;;;;AAoBA,IAAa,IAAA,CAA4E,EACvF,UAAA,GACA,gBAAA,GACA,WAAA,GACA,UAAA,IAAW,IACX,SAAA,GACA,IAAA,IAAK,CAAC,EAAA,MACF;AACJ,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS;AAE7B,SAAI,IAEA,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,GAAK,KAAa,EAAE,WAAA,EAAU;AAAA,IAC9B,IAAI;AAAA,MAAE,SAAS;AAAA,MAAoB,GAAG;AAAA,IAAG;AAAA,IAEzC,UAAA,gBAAA,EAAC,GAAD;AAAA,MACY,UAAA;AAAA,MACV,SACE,IACI,SAAA,MACM;AACJ,QAAI,KACF,EAAQ,CAAc,GAExB,EAAQ;AAAA,MACV;AAAA,MAGL,UAAA;AAAA,IACa,CAAA;AAAA,EACR,CAAA,IAIV,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,GAAK,KAAa,EAAE,WAAA,EAAU;AAAA,IAC9B,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,IAAI;AAAA,MAAE,SAAS;AAAA,MAAoB,GAAG;AAAA,IAAG;AAAA,IAExC,UAAA;AAAA,EACO,CAAA;AAGhB"}
|
package/dist/recurringtransactions/components/shared/recurringsettings/SelectTransaction.d.ts
CHANGED
|
@@ -3,8 +3,10 @@ interface SelectTransactionProps {
|
|
|
3
3
|
bgcolor?: string;
|
|
4
4
|
description?: string;
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
* filter; flows that may select any transaction (Mark as Paid) omit it.
|
|
6
|
+
* Marks which transactions can be selected. Create flows pass the Sherlock-aligned eligibility
|
|
7
|
+
* filter; flows that may select any transaction (Mark as Paid) omit it. Ineligible transactions
|
|
8
|
+
* stay in the list — they are rendered disabled rather than hidden — so list membership,
|
|
9
|
+
* ordering and search results are unchanged.
|
|
8
10
|
*/
|
|
9
11
|
eligibilityFilter?: (transaction: Transaction) => boolean;
|
|
10
12
|
onSearch: (value: string) => void;
|
package/dist/recurringtransactions/components/shared/recurringsettings/SelectTransaction.es.js
CHANGED
|
@@ -5,41 +5,41 @@ import f from "../../../../transactions/components/shared/TransactionList.es.js"
|
|
|
5
5
|
import { observer as _ } from "mobx-react-lite";
|
|
6
6
|
import u from "@mui/material/Stack";
|
|
7
7
|
import { P as d } from "@mxenabled/mxui";
|
|
8
|
-
import { jsx as
|
|
9
|
-
var
|
|
10
|
-
const { recurring:
|
|
8
|
+
import { jsx as e, jsxs as x } from "react/jsx-runtime";
|
|
9
|
+
var w = _(({ bgcolor: o = "background.default", description: t, eligibilityFilter: c, onSearch: s, onSelected: n }) => {
|
|
10
|
+
const { recurring: a } = m(), { searchValue: i, setSearchValue: l } = p();
|
|
11
11
|
return /* @__PURE__ */ x(u, {
|
|
12
12
|
sx: {
|
|
13
|
-
bgcolor:
|
|
13
|
+
bgcolor: o,
|
|
14
14
|
gap: 16,
|
|
15
15
|
pt: 8
|
|
16
16
|
},
|
|
17
17
|
children: [
|
|
18
|
-
|
|
18
|
+
t && /* @__PURE__ */ e(d, {
|
|
19
19
|
sx: { mx: 24 },
|
|
20
|
-
children:
|
|
20
|
+
children: t
|
|
21
21
|
}),
|
|
22
|
-
/* @__PURE__ */
|
|
23
|
-
ariaLabel:
|
|
24
|
-
cancelAriaLabel:
|
|
25
|
-
onChange: (
|
|
26
|
-
l(
|
|
22
|
+
/* @__PURE__ */ e(h, {
|
|
23
|
+
ariaLabel: a.select_transaction_search_aria,
|
|
24
|
+
cancelAriaLabel: a.select_transaction_search_cancel_aria,
|
|
25
|
+
onChange: (r) => {
|
|
26
|
+
l(r), s(r);
|
|
27
27
|
},
|
|
28
|
-
placeholder:
|
|
29
|
-
searchValue:
|
|
28
|
+
placeholder: a.select_transaction_search_placeholder,
|
|
29
|
+
searchValue: i
|
|
30
30
|
}),
|
|
31
|
-
/* @__PURE__ */
|
|
32
|
-
bgcolor:
|
|
33
|
-
filter: c,
|
|
31
|
+
/* @__PURE__ */ e(f, {
|
|
32
|
+
bgcolor: o,
|
|
34
33
|
height: "auto",
|
|
35
|
-
|
|
34
|
+
isRowDisabled: c && ((r) => !c(r)),
|
|
35
|
+
onClick: n,
|
|
36
36
|
showLoader: !1
|
|
37
37
|
})
|
|
38
38
|
]
|
|
39
39
|
});
|
|
40
40
|
});
|
|
41
41
|
export {
|
|
42
|
-
|
|
42
|
+
w as SelectTransaction
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
//# sourceMappingURL=SelectTransaction.es.js.map
|
package/dist/recurringtransactions/components/shared/recurringsettings/SelectTransaction.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTransaction.es.js","names":[],"sources":["../../../../../src/recurringtransactions/components/shared/recurringsettings/SelectTransaction.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { SearchBox, useGlobalCopyStore } from '../../../../common'\nimport { type Transaction } from '../../../../core'\nimport { TransactionList, useTransactionsUiStore } from '../../../../transactions'\n\ninterface SelectTransactionProps {\n bgcolor?: string\n description?: string\n /**\n *
|
|
1
|
+
{"version":3,"file":"SelectTransaction.es.js","names":[],"sources":["../../../../../src/recurringtransactions/components/shared/recurringsettings/SelectTransaction.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { SearchBox, useGlobalCopyStore } from '../../../../common'\nimport { type Transaction } from '../../../../core'\nimport { TransactionList, useTransactionsUiStore } from '../../../../transactions'\n\ninterface SelectTransactionProps {\n bgcolor?: string\n description?: string\n /**\n * Marks which transactions can be selected. Create flows pass the Sherlock-aligned eligibility\n * filter; flows that may select any transaction (Mark as Paid) omit it. Ineligible transactions\n * stay in the list — they are rendered disabled rather than hidden — so list membership,\n * ordering and search results are unchanged.\n */\n eligibilityFilter?: (transaction: Transaction) => boolean\n onSearch: (value: string) => void\n onSelected: (guid: string) => void\n}\n\nexport const SelectTransaction = observer(\n ({\n bgcolor = 'background.default',\n description,\n eligibilityFilter,\n onSearch,\n onSelected,\n }: SelectTransactionProps) => {\n const { recurring: recurringCopy } = useGlobalCopyStore()\n const { searchValue, setSearchValue } = useTransactionsUiStore()\n\n return (\n <Stack sx={{ bgcolor, gap: 16, pt: 8 }}>\n {description && <P sx={{ mx: 24 }}>{description}</P>}\n <SearchBox\n ariaLabel={recurringCopy.select_transaction_search_aria}\n cancelAriaLabel={recurringCopy.select_transaction_search_cancel_aria}\n onChange={(value) => {\n setSearchValue(value)\n onSearch(value)\n }}\n placeholder={recurringCopy.select_transaction_search_placeholder}\n searchValue={searchValue}\n />\n <TransactionList\n bgcolor={bgcolor}\n height=\"auto\"\n isRowDisabled={eligibilityFilter && ((transaction) => !eligibilityFilter(transaction))}\n onClick={onSelected}\n showLoader={false}\n />\n </Stack>\n )\n },\n)\n"],"mappings":";;;;;;;;AAwBA,IAAa,IAAoB,EAAA,CAC9B,EACC,SAAA,IAAU,sBACV,aAAA,GACA,mBAAA,GACA,UAAA,GACA,YAAA,EAAA,MAC4B;AAC5B,QAAM,EAAE,WAAW,EAAA,IAAkB,EAAmB,GAClD,EAAE,aAAA,GAAa,gBAAA,EAAA,IAAmB,EAAuB;AAE/D,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,SAAA;AAAA,MAAS,KAAK;AAAA,MAAI,IAAI;AAAA,IAAE;AAAA,IAArC,UAAA;AAAA,MACG,KAAe,gBAAA,EAAC,GAAD;AAAA,QAAG,IAAI,EAAE,IAAI,GAAG;AAAA,QAAI,UAAA;AAAA,MAAe,CAAA;AAAA,MACnD,gBAAA,EAAC,GAAD;AAAA,QACE,WAAW,EAAc;AAAA,QACzB,iBAAiB,EAAc;AAAA,QAC/B,UAAA,CAAW,MAAU;AACnB,UAAA,EAAe,CAAK,GACpB,EAAS,CAAK;AAAA,QAChB;AAAA,QACA,aAAa,EAAc;AAAA,QACd,aAAA;AAAA,MACd,CAAA;AAAA,MACD,gBAAA,EAAC,GAAD;AAAA,QACW,SAAA;AAAA,QACT,QAAO;AAAA,QACP,eAAe,MAAA,CAAuB,MAAgB,CAAC,EAAkB,CAAW;AAAA,QACpF,SAAS;AAAA,QACT,YAAY;AAAA,MACb,CAAA;AAAA,IACI;AAAA;AAEX,CACF"}
|
|
@@ -4,6 +4,11 @@ export interface TransactionListProps {
|
|
|
4
4
|
bgcolor?: string;
|
|
5
5
|
filter?: (t: Transaction) => boolean;
|
|
6
6
|
height?: number | string;
|
|
7
|
+
/**
|
|
8
|
+
* Marks rows that stay in the list but cannot be acted on. Disabled rows are rendered greyed
|
|
9
|
+
* out and inert instead of being removed, so list membership and ordering are unaffected.
|
|
10
|
+
*/
|
|
11
|
+
isRowDisabled?: (t: Transaction) => boolean;
|
|
7
12
|
loader?: React.JSX.Element;
|
|
8
13
|
onClick?: (guid: string) => void;
|
|
9
14
|
showInsights?: boolean;
|
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
import { useEvent as
|
|
2
|
-
import { fromUnixUTCToDayOfWeekAndDate as
|
|
3
|
-
import { ANALYTICS_EVENTS as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { useTransactionsUiStore as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { hasInsetBorder as
|
|
1
|
+
import { useEvent as N, useTransactionStore as O } from "../../../common/context/hooks.es.js";
|
|
2
|
+
import { fromUnixUTCToDayOfWeekAndDate as H } from "../../../core/utils/DateUtil.es.js";
|
|
3
|
+
import { ANALYTICS_EVENTS as U } from "../../../common/constants/Analytics.es.js";
|
|
4
|
+
import k from "../../../common/components/Loader.es.js";
|
|
5
|
+
import W from "../../../common/components/ZeroState.es.js";
|
|
6
|
+
import { useTransactionsUiStore as j } from "../../context/hooks.es.js";
|
|
7
|
+
import w from "./transactionlist/TransactionRow.es.js";
|
|
8
|
+
import B from "../../../common/components/SubheaderRow.es.js";
|
|
9
|
+
import { hasInsetBorder as G, shouldShowDate as T } from "../../utils/Transactions.es.js";
|
|
10
10
|
import i from "react";
|
|
11
|
-
import { observer as
|
|
11
|
+
import { observer as Y } from "mobx-react-lite";
|
|
12
12
|
import { jsx as o, jsxs as S } from "react/jsx-runtime";
|
|
13
13
|
import u from "@mui/material/Box";
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import { useVirtualizer as
|
|
17
|
-
var _ = 65, v = 32,
|
|
14
|
+
import y from "@mui/material/Divider";
|
|
15
|
+
import K from "@mui/material/List";
|
|
16
|
+
import { useVirtualizer as M } from "@tanstack/react-virtual";
|
|
17
|
+
var _ = 65, v = 32, Z = ({ bgcolor: x, filter: s, height: E = "calc(100dvh - 36px)", isRowDisabled: I, loader: b = /* @__PURE__ */ o(k, {
|
|
18
18
|
label: "Loading",
|
|
19
19
|
size: 40
|
|
20
|
-
}), onClick:
|
|
21
|
-
const { isLoading: c, sortedTransactions: m } =
|
|
20
|
+
}), onClick: d, showInsights: f = !1, showLoader: l = !1, transaction: p, width: g = "100%", zeroState: A = /* @__PURE__ */ o(W, {}) }) => {
|
|
21
|
+
const { isLoading: c, sortedTransactions: m } = O(), r = i.useMemo(() => {
|
|
22
22
|
const t = s ? m.filter(s) : m;
|
|
23
23
|
return p ?? t;
|
|
24
24
|
}, [
|
|
25
25
|
m,
|
|
26
26
|
s,
|
|
27
27
|
p
|
|
28
|
-
]), { clearExpandedSplits: C, setShowInsights: R, toggleSplit:
|
|
29
|
-
const
|
|
30
|
-
if (
|
|
31
|
-
|
|
28
|
+
]), { clearExpandedSplits: C, setShowInsights: R, toggleSplit: D } = j(), { onEvent: L } = N(), V = (t) => {
|
|
29
|
+
const e = r.find((a) => a.guid === t);
|
|
30
|
+
if (e?.has_been_split) {
|
|
31
|
+
D(e.guid);
|
|
32
32
|
return;
|
|
33
33
|
}
|
|
34
|
-
|
|
35
|
-
account_guid:
|
|
34
|
+
L(U.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
|
|
35
|
+
account_guid: e?.account_guid,
|
|
36
36
|
transaction_guid: t
|
|
37
|
-
}),
|
|
38
|
-
}, h = i.useRef(null), n =
|
|
39
|
-
count:
|
|
37
|
+
}), d?.(t);
|
|
38
|
+
}, h = i.useRef(null), n = M({
|
|
39
|
+
count: r.length,
|
|
40
40
|
getScrollElement: () => h.current,
|
|
41
|
-
estimateSize: (t) => _ + (T(t,
|
|
41
|
+
estimateSize: (t) => _ + (T(t, r) ? v : 0),
|
|
42
42
|
overscan: 5
|
|
43
43
|
});
|
|
44
|
-
return i.useEffect(() => n.measure(), [
|
|
44
|
+
return i.useEffect(() => n.measure(), [r]), i.useEffect(() => R(f), [f]), i.useEffect(() => () => C(), []), /* @__PURE__ */ o(K, {
|
|
45
45
|
component: "div",
|
|
46
46
|
role: "list",
|
|
47
47
|
sx: { width: g },
|
|
@@ -57,10 +57,10 @@ var _ = 65, v = 32, M = ({ bgcolor: x, filter: s, height: E = "calc(100dvh - 36p
|
|
|
57
57
|
role: "presentation",
|
|
58
58
|
width: "100%",
|
|
59
59
|
children: [
|
|
60
|
-
(c || l) &&
|
|
60
|
+
(c || l) && b,
|
|
61
61
|
!c && !l && n.getVirtualItems().length === 0 && A,
|
|
62
62
|
!c && !l && n.getVirtualItems().length > 0 && n.getVirtualItems().map((t) => {
|
|
63
|
-
const
|
|
63
|
+
const e = r[t.index], a = T(t.index, r), z = G(t.index, r);
|
|
64
64
|
return /* @__PURE__ */ S(u, {
|
|
65
65
|
role: "listitem",
|
|
66
66
|
sx: {
|
|
@@ -71,26 +71,27 @@ var _ = 65, v = 32, M = ({ bgcolor: x, filter: s, height: E = "calc(100dvh - 36p
|
|
|
71
71
|
bgcolor: "background.paper"
|
|
72
72
|
},
|
|
73
73
|
children: [
|
|
74
|
-
a && /* @__PURE__ */ o(
|
|
74
|
+
a && /* @__PURE__ */ o(B, {
|
|
75
75
|
bgcolor: x,
|
|
76
|
-
children:
|
|
76
|
+
children: H(e.date)
|
|
77
77
|
}),
|
|
78
|
-
/* @__PURE__ */ o(
|
|
78
|
+
/* @__PURE__ */ o(w, {
|
|
79
79
|
component: "div",
|
|
80
|
-
|
|
81
|
-
|
|
80
|
+
disabled: I?.(e),
|
|
81
|
+
...d && { onClick: V },
|
|
82
|
+
transaction: e
|
|
82
83
|
}),
|
|
83
|
-
/* @__PURE__ */ o(
|
|
84
|
+
/* @__PURE__ */ o(y, { sx: { ml: z ? 68 : 0 } })
|
|
84
85
|
]
|
|
85
|
-
},
|
|
86
|
+
}, e.guid);
|
|
86
87
|
})
|
|
87
88
|
]
|
|
88
89
|
})
|
|
89
90
|
})
|
|
90
91
|
});
|
|
91
|
-
},
|
|
92
|
+
}, ct = Y(Z);
|
|
92
93
|
export {
|
|
93
|
-
|
|
94
|
+
ct as default
|
|
94
95
|
};
|
|
95
96
|
|
|
96
97
|
//# sourceMappingURL=TransactionList.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TransactionList.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionList.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { useVirtualizer } from '@tanstack/react-virtual'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\n\nimport { ANALYTICS_EVENTS, Loader, useEvent, ZeroState } from '../../../common'\nimport { type Transaction } from '../../../core'\n\nimport { useTransactionsUiStore } from '../../context/hooks'\nimport { useTransactionStore } from '../../../common'\n\nimport SubheaderRow from '../../../common/components/SubheaderRow'\nimport TransactionRow from './transactionlist/TransactionRow'\n\nimport { hasInsetBorder, shouldShowDate } from '../../utils/Transactions'\nimport { fromUnixUTCToDayOfWeekAndDate } from '../../../core/utils/DateUtil'\n\nconst ROW_HEIGHT = 65\nconst DATE_ROW_HEIGHT = 32\n\nexport interface TransactionListProps {\n bgcolor?: string\n filter?: (t: Transaction) => boolean\n height?: number | string\n loader?: React.JSX.Element\n onClick?: (guid: string) => void\n showInsights?: boolean\n showLoader?: boolean\n transaction?: Transaction[]\n width?: number | string\n zeroState?: React.JSX.Element\n}\n\nconst TransactionList: React.FC<TransactionListProps> = ({\n bgcolor,\n filter,\n height = 'calc(100dvh - 36px)',\n loader = <Loader label=\"Loading\" size={40} />,\n onClick,\n showInsights = false,\n showLoader = false,\n transaction,\n width = '100%',\n zeroState = <ZeroState />,\n}) => {\n const { isLoading, sortedTransactions: allTransactions } = useTransactionStore()\n const transactions = React.useMemo(() => {\n const updatedTransactions = filter ? allTransactions.filter(filter) : allTransactions\n return transaction ?? updatedTransactions\n }, [allTransactions, filter, transaction])\n\n const { clearExpandedSplits, setShowInsights, toggleSplit } = useTransactionsUiStore()\n const { onEvent } = useEvent()\n\n const handleClick = (guid: string) => {\n const transaction = transactions.find((t) => t.guid === guid)\n\n if (transaction?.has_been_split) {\n toggleSplit(transaction.guid)\n return\n }\n\n onEvent(ANALYTICS_EVENTS.ACCOUNT_DETAILS_CLICK_TRANSACTION, {\n account_guid: transaction?.account_guid,\n transaction_guid: guid,\n })\n onClick?.(guid)\n }\n\n const parentRef = React.useRef<HTMLDivElement>(null)\n const rowVirtualizer = useVirtualizer({\n count: transactions.length,\n getScrollElement: () => parentRef.current,\n estimateSize: (i) => ROW_HEIGHT + (shouldShowDate(i, transactions) ? DATE_ROW_HEIGHT : 0),\n overscan: 5,\n })\n\n React.useEffect(() => rowVirtualizer.measure(), [transactions])\n React.useEffect(() => setShowInsights(showInsights), [showInsights])\n\n React.useEffect(() => {\n return () => clearExpandedSplits()\n }, [])\n\n return (\n <List component=\"div\" role=\"list\" sx={{ width: width }}>\n <Box height={height} overflow=\"auto\" ref={parentRef} role=\"presentation\" width={width}>\n <Box\n height={\n // set the height to auto when there are no transactions so the zero state isn't set to 0\n rowVirtualizer.getVirtualItems().length === 0 ? 'auto' : rowVirtualizer.getTotalSize()\n }\n position=\"relative\"\n role=\"presentation\"\n width=\"100%\"\n >\n {(isLoading || showLoader) && loader}\n {!isLoading && !showLoader && rowVirtualizer.getVirtualItems().length === 0 && zeroState}\n {!isLoading &&\n !showLoader &&\n rowVirtualizer.getVirtualItems().length > 0 &&\n rowVirtualizer.getVirtualItems().map((row) => {\n const transaction = transactions[row.index]\n const showDate = shouldShowDate(row.index, transactions)\n const isInset = hasInsetBorder(row.index, transactions)\n const rowHeight = ROW_HEIGHT + (showDate ? DATE_ROW_HEIGHT : 0)\n\n return (\n <Box\n key={transaction.guid}\n role=\"listitem\"\n sx={{\n height: rowHeight,\n position: 'absolute',\n transform: `translateY(${row.start}px)`,\n width: '100%',\n bgcolor: 'background.paper',\n }}\n >\n {showDate && (\n <SubheaderRow bgcolor={bgcolor}>\n {fromUnixUTCToDayOfWeekAndDate(transaction.date)}\n </SubheaderRow>\n )}\n <TransactionRow\n component=\"div\"\n {...(onClick && { onClick: handleClick })}\n transaction={transaction}\n />\n <Divider sx={{ ml: isInset ? 68 : 0 }} />\n </Box>\n )\n })}\n </Box>\n </Box>\n </List>\n )\n}\n\nexport default observer(TransactionList)\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,IAAM,IAAa,IACb,IAAkB,
|
|
1
|
+
{"version":3,"file":"TransactionList.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionList.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { useVirtualizer } from '@tanstack/react-virtual'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\n\nimport { ANALYTICS_EVENTS, Loader, useEvent, ZeroState } from '../../../common'\nimport { type Transaction } from '../../../core'\n\nimport { useTransactionsUiStore } from '../../context/hooks'\nimport { useTransactionStore } from '../../../common'\n\nimport SubheaderRow from '../../../common/components/SubheaderRow'\nimport TransactionRow from './transactionlist/TransactionRow'\n\nimport { hasInsetBorder, shouldShowDate } from '../../utils/Transactions'\nimport { fromUnixUTCToDayOfWeekAndDate } from '../../../core/utils/DateUtil'\n\nconst ROW_HEIGHT = 65\nconst DATE_ROW_HEIGHT = 32\n\nexport interface TransactionListProps {\n bgcolor?: string\n filter?: (t: Transaction) => boolean\n height?: number | string\n /**\n * Marks rows that stay in the list but cannot be acted on. Disabled rows are rendered greyed\n * out and inert instead of being removed, so list membership and ordering are unaffected.\n */\n isRowDisabled?: (t: Transaction) => boolean\n loader?: React.JSX.Element\n onClick?: (guid: string) => void\n showInsights?: boolean\n showLoader?: boolean\n transaction?: Transaction[]\n width?: number | string\n zeroState?: React.JSX.Element\n}\n\nconst TransactionList: React.FC<TransactionListProps> = ({\n bgcolor,\n filter,\n height = 'calc(100dvh - 36px)',\n isRowDisabled,\n loader = <Loader label=\"Loading\" size={40} />,\n onClick,\n showInsights = false,\n showLoader = false,\n transaction,\n width = '100%',\n zeroState = <ZeroState />,\n}) => {\n const { isLoading, sortedTransactions: allTransactions } = useTransactionStore()\n const transactions = React.useMemo(() => {\n const updatedTransactions = filter ? allTransactions.filter(filter) : allTransactions\n return transaction ?? updatedTransactions\n }, [allTransactions, filter, transaction])\n\n const { clearExpandedSplits, setShowInsights, toggleSplit } = useTransactionsUiStore()\n const { onEvent } = useEvent()\n\n const handleClick = (guid: string) => {\n const transaction = transactions.find((t) => t.guid === guid)\n\n if (transaction?.has_been_split) {\n toggleSplit(transaction.guid)\n return\n }\n\n onEvent(ANALYTICS_EVENTS.ACCOUNT_DETAILS_CLICK_TRANSACTION, {\n account_guid: transaction?.account_guid,\n transaction_guid: guid,\n })\n onClick?.(guid)\n }\n\n const parentRef = React.useRef<HTMLDivElement>(null)\n const rowVirtualizer = useVirtualizer({\n count: transactions.length,\n getScrollElement: () => parentRef.current,\n estimateSize: (i) => ROW_HEIGHT + (shouldShowDate(i, transactions) ? DATE_ROW_HEIGHT : 0),\n overscan: 5,\n })\n\n React.useEffect(() => rowVirtualizer.measure(), [transactions])\n React.useEffect(() => setShowInsights(showInsights), [showInsights])\n\n React.useEffect(() => {\n return () => clearExpandedSplits()\n }, [])\n\n return (\n <List component=\"div\" role=\"list\" sx={{ width: width }}>\n <Box height={height} overflow=\"auto\" ref={parentRef} role=\"presentation\" width={width}>\n <Box\n height={\n // set the height to auto when there are no transactions so the zero state isn't set to 0\n rowVirtualizer.getVirtualItems().length === 0 ? 'auto' : rowVirtualizer.getTotalSize()\n }\n position=\"relative\"\n role=\"presentation\"\n width=\"100%\"\n >\n {(isLoading || showLoader) && loader}\n {!isLoading && !showLoader && rowVirtualizer.getVirtualItems().length === 0 && zeroState}\n {!isLoading &&\n !showLoader &&\n rowVirtualizer.getVirtualItems().length > 0 &&\n rowVirtualizer.getVirtualItems().map((row) => {\n const transaction = transactions[row.index]\n const showDate = shouldShowDate(row.index, transactions)\n const isInset = hasInsetBorder(row.index, transactions)\n const rowHeight = ROW_HEIGHT + (showDate ? DATE_ROW_HEIGHT : 0)\n\n return (\n <Box\n key={transaction.guid}\n role=\"listitem\"\n sx={{\n height: rowHeight,\n position: 'absolute',\n transform: `translateY(${row.start}px)`,\n width: '100%',\n bgcolor: 'background.paper',\n }}\n >\n {showDate && (\n <SubheaderRow bgcolor={bgcolor}>\n {fromUnixUTCToDayOfWeekAndDate(transaction.date)}\n </SubheaderRow>\n )}\n <TransactionRow\n component=\"div\"\n disabled={isRowDisabled?.(transaction)}\n {...(onClick && { onClick: handleClick })}\n transaction={transaction}\n />\n <Divider sx={{ ml: isInset ? 68 : 0 }} />\n </Box>\n )\n })}\n </Box>\n </Box>\n </List>\n )\n}\n\nexport default observer(TransactionList)\n"],"mappings":"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"}
|
|
@@ -2,6 +2,8 @@ import { default as React } from 'react';
|
|
|
2
2
|
import { Transaction } from '../../../../core';
|
|
3
3
|
interface TransactionRowProps {
|
|
4
4
|
component?: React.ElementType;
|
|
5
|
+
/** Shows the row greyed out and inert (see {@link ListItemWrapper}). */
|
|
6
|
+
disabled?: boolean;
|
|
5
7
|
onClick?: (guid: string) => void;
|
|
6
8
|
transaction: Transaction;
|
|
7
9
|
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { useGlobalCopyStore as
|
|
2
|
-
import { TransactionType as
|
|
3
|
-
import { formatCurrency as
|
|
4
|
-
import { isTransferTransaction as
|
|
5
|
-
import { ListItemWrapper as
|
|
1
|
+
import { useGlobalCopyStore as v, useTransactionStore as w } from "../../../../common/context/hooks.es.js";
|
|
2
|
+
import { TransactionType as S } from "../../../../core/types/Transaction.es.js";
|
|
3
|
+
import { formatCurrency as N } from "../../../../core/utils/NumberFormatting.es.js";
|
|
4
|
+
import { isTransferTransaction as k } from "../../../../core/utils/TransactionUtils.es.js";
|
|
5
|
+
import { ListItemWrapper as L } from "../../../../common/components/ListItemWrapper.es.js";
|
|
6
6
|
import { useTransactionsUiStore as f } from "../../../context/hooks.es.js";
|
|
7
|
-
import { ON_CLICK_EVENTS as
|
|
8
|
-
import
|
|
7
|
+
import { ON_CLICK_EVENTS as E } from "../../../constants/OnClickEvents.es.js";
|
|
8
|
+
import R from "../TransactionInsightTag.es.js";
|
|
9
9
|
import _ from "react";
|
|
10
|
-
import { observer as
|
|
10
|
+
import { observer as j } from "mobx-react-lite";
|
|
11
11
|
import n from "@mui/material/Stack";
|
|
12
|
-
import { Icon as a, MerchantLogo as
|
|
12
|
+
import { Icon as a, MerchantLogo as M, Text as d } from "@mxenabled/mxui";
|
|
13
13
|
import { jsx as r, jsxs as t } from "react/jsx-runtime";
|
|
14
|
-
import { useTheme as
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
var
|
|
18
|
-
const
|
|
14
|
+
import { useTheme as z } from "@mui/material/styles";
|
|
15
|
+
import A from "@mui/material/ListItemAvatar";
|
|
16
|
+
import G from "@mui/material/ListItemText";
|
|
17
|
+
var O = ({ transaction: e, disabled: g = !1, onClick: m, component: c }) => {
|
|
18
|
+
const h = z().palette.mode === "dark", { associatedBeats: p } = w(), { expandedSplits: T } = f(), { transactions: y } = v(), { showInsights: b } = f(), l = e.transaction_type === S.CREDIT, x = k(e) && !!e.institutionName, u = _.useMemo(() => p.find((i) => i.associated_transaction_guid === e.guid), [p, e]), I = (i, o) => {
|
|
19
19
|
const s = [];
|
|
20
20
|
return i.is_flagged && s.push(/* @__PURE__ */ r(a, {
|
|
21
21
|
fill: !0,
|
|
@@ -29,19 +29,20 @@ var G = ({ transaction: e, onClick: m, component: c }) => {
|
|
|
29
29
|
name: "call_split",
|
|
30
30
|
size: 16
|
|
31
31
|
}, "split")), s;
|
|
32
|
-
},
|
|
33
|
-
return /* @__PURE__ */ t(
|
|
34
|
-
clickEventName:
|
|
32
|
+
}, C = (i, o) => i.is_hidden ? o.is_excluded : i.has_been_split ? o.split_transaction_category_label : i.category || "";
|
|
33
|
+
return /* @__PURE__ */ t(L, {
|
|
34
|
+
clickEventName: E.ON_TRANSACTION_LIST_ITEM_CLICK,
|
|
35
35
|
...c && { component: c },
|
|
36
|
+
disabled: g,
|
|
36
37
|
onClick: m ? () => m(e.guid) : void 0,
|
|
37
38
|
sx: e.is_hidden ? {
|
|
38
39
|
backgroundColor: "grey.50",
|
|
39
40
|
color: "text.secondary"
|
|
40
41
|
} : void 0,
|
|
41
|
-
children: [/* @__PURE__ */ r(
|
|
42
|
+
children: [/* @__PURE__ */ r(A, { children: e.parent_guid && T.includes(e.parent_guid) ? /* @__PURE__ */ r(_.Fragment, {}) : /* @__PURE__ */ r(M, {
|
|
42
43
|
categoryGuid: e.top_level_category_guid || "",
|
|
43
44
|
merchantGuid: e.merchant_guid || ""
|
|
44
|
-
}) }), /* @__PURE__ */ r(
|
|
45
|
+
}) }), /* @__PURE__ */ r(G, {
|
|
45
46
|
disableTypography: !0,
|
|
46
47
|
secondary: /* @__PURE__ */ t(n, {
|
|
47
48
|
direction: "row",
|
|
@@ -50,12 +51,12 @@ var G = ({ transaction: e, onClick: m, component: c }) => {
|
|
|
50
51
|
alignItems: "center",
|
|
51
52
|
direction: "row",
|
|
52
53
|
gap: 4,
|
|
53
|
-
children: [
|
|
54
|
+
children: [I(e, h), /* @__PURE__ */ r(d, {
|
|
54
55
|
truncate: !0,
|
|
55
56
|
variant: "caption",
|
|
56
|
-
children:
|
|
57
|
+
children: C(e, y)
|
|
57
58
|
})]
|
|
58
|
-
}), u &&
|
|
59
|
+
}), u && b && /* @__PURE__ */ r(R, { beat: u })]
|
|
59
60
|
}),
|
|
60
61
|
children: /* @__PURE__ */ t(n, {
|
|
61
62
|
direction: "row",
|
|
@@ -65,20 +66,20 @@ var G = ({ transaction: e, onClick: m, component: c }) => {
|
|
|
65
66
|
bold: !0,
|
|
66
67
|
truncate: !0,
|
|
67
68
|
variant: "body1",
|
|
68
|
-
children:
|
|
69
|
+
children: x ? e.institutionName : e.payee || e.description || e.feed_description
|
|
69
70
|
}), /* @__PURE__ */ t(d, {
|
|
70
71
|
bold: !0,
|
|
71
72
|
color: l ? "success.main" : "text.primary",
|
|
72
73
|
sx: { flexShrink: 0 },
|
|
73
74
|
variant: "body1",
|
|
74
|
-
children: [l ? "+" : "",
|
|
75
|
+
children: [l ? "+" : "", N(e.amount, "0,0.00")]
|
|
75
76
|
})]
|
|
76
77
|
})
|
|
77
78
|
})]
|
|
78
79
|
});
|
|
79
|
-
},
|
|
80
|
+
}, ee = j(O);
|
|
80
81
|
export {
|
|
81
|
-
|
|
82
|
+
ee as default
|
|
82
83
|
};
|
|
83
84
|
|
|
84
85
|
//# sourceMappingURL=TransactionRow.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TransactionRow.es.js","names":[],"sources":["../../../../../src/transactions/components/shared/transactionlist/TransactionRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Icon, MerchantLogo, Text } from '@mxenabled/mxui'\n\nimport { ListItemWrapper, useGlobalCopyStore, useTransactionStore } from '../../../../common'\nimport { Transaction, TransactionType } from '../../../../core'\nimport { isTransferTransaction } from '../../../../core/utils/TransactionUtils'\n\nimport TransactionInsightTag from '../TransactionInsightTag'\n\nimport { ON_CLICK_EVENTS } from '../../../constants/OnClickEvents'\nimport { useTransactionsUiStore } from '../../../context/hooks'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ninterface TransactionRowProps {\n component?: React.ElementType\n onClick?: (guid: string) => void\n transaction: Transaction\n}\n\nconst TransactionRow: React.FC<TransactionRowProps> = ({
|
|
1
|
+
{"version":3,"file":"TransactionRow.es.js","names":[],"sources":["../../../../../src/transactions/components/shared/transactionlist/TransactionRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Icon, MerchantLogo, Text } from '@mxenabled/mxui'\n\nimport { ListItemWrapper, useGlobalCopyStore, useTransactionStore } from '../../../../common'\nimport { Transaction, TransactionType } from '../../../../core'\nimport { isTransferTransaction } from '../../../../core/utils/TransactionUtils'\n\nimport TransactionInsightTag from '../TransactionInsightTag'\n\nimport { ON_CLICK_EVENTS } from '../../../constants/OnClickEvents'\nimport { useTransactionsUiStore } from '../../../context/hooks'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ninterface TransactionRowProps {\n component?: React.ElementType\n /** Shows the row greyed out and inert (see {@link ListItemWrapper}). */\n disabled?: boolean\n onClick?: (guid: string) => void\n transaction: Transaction\n}\n\nconst TransactionRow: React.FC<TransactionRowProps> = ({\n transaction,\n disabled = false,\n onClick,\n component,\n}) => {\n const theme = useTheme()\n const isDarkMode = theme.palette.mode === 'dark'\n\n const { associatedBeats } = useTransactionStore()\n const { expandedSplits } = useTransactionsUiStore()\n const { transactions: copy } = useGlobalCopyStore()\n const { showInsights } = useTransactionsUiStore()\n\n const isCredit = transaction.transaction_type === TransactionType.CREDIT\n\n const showInstitution = isTransferTransaction(transaction) && Boolean(transaction.institutionName)\n\n const beat = React.useMemo(() => {\n return associatedBeats.find((beat) => beat.associated_transaction_guid === transaction.guid)\n }, [associatedBeats, transaction])\n\n const getTransactionStatusIcons = (\n transaction: Transaction,\n isDarkMode: boolean,\n ): React.ReactNode[] => {\n const icons: React.ReactNode[] = []\n\n if (transaction.is_flagged) {\n icons.push(\n <Icon\n fill={true}\n key=\"flag\"\n name=\"flag\"\n size={16}\n sx={{ color: isDarkMode ? 'primary.main' : 'warning.dark' }}\n />,\n )\n }\n\n if (transaction.is_hidden) {\n icons.push(<Icon key=\"hidden\" name=\"visibility_off\" size={16} />)\n }\n\n if (transaction.has_been_split) {\n icons.push(<Icon key=\"split\" name=\"call_split\" size={16} />)\n }\n\n return icons\n }\n\n const getTransactionCategoryText = (transaction: Transaction, copy: any): string => {\n if (transaction.is_hidden) {\n return copy.is_excluded\n }\n\n if (transaction.has_been_split) {\n return copy.split_transaction_category_label\n }\n\n return transaction.category || ''\n }\n\n return (\n //TODO: implement common/components/ListItemRow.tsx\n <ListItemWrapper\n clickEventName={ON_CLICK_EVENTS.ON_TRANSACTION_LIST_ITEM_CLICK}\n {...(component && { component })}\n disabled={disabled}\n onClick={onClick ? () => onClick(transaction.guid) : undefined}\n sx={\n transaction.is_hidden ? { backgroundColor: 'grey.50', color: 'text.secondary' } : undefined\n }\n >\n <ListItemAvatar>\n {transaction.parent_guid && expandedSplits.includes(transaction.parent_guid) ? (\n <React.Fragment />\n ) : (\n <MerchantLogo\n categoryGuid={transaction.top_level_category_guid || ''}\n merchantGuid={transaction.merchant_guid || ''}\n />\n )}\n </ListItemAvatar>\n <ListItemText\n disableTypography={true}\n secondary={\n <Stack direction=\"row\" justifyContent=\"space-between\">\n <Stack alignItems=\"center\" direction=\"row\" gap={4}>\n {getTransactionStatusIcons(transaction, isDarkMode)}\n <Text truncate={true} variant=\"caption\">\n {getTransactionCategoryText(transaction, copy)}\n </Text>\n </Stack>\n {beat && showInsights && <TransactionInsightTag beat={beat} />}\n </Stack>\n }\n >\n <Stack direction=\"row\" justifyContent=\"space-between\" sx={{ gap: 8 }}>\n <Text bold={true} truncate={true} variant=\"body1\">\n {showInstitution\n ? transaction.institutionName\n : transaction.payee || transaction.description || transaction.feed_description}\n </Text>\n <Text\n bold={true}\n color={isCredit ? 'success.main' : 'text.primary'}\n sx={{ flexShrink: 0 }}\n variant=\"body1\"\n >\n {isCredit ? '+' : ''}\n {formatCurrency(transaction.amount, '0,0.00')}\n </Text>\n </Stack>\n </ListItemText>\n </ListItemWrapper>\n )\n}\n\nexport default observer(TransactionRow)\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mx-cartographer/experiences",
|
|
3
|
-
"version": "9.5.
|
|
3
|
+
"version": "9.5.3",
|
|
4
4
|
"description": "Library containing experience widgets",
|
|
5
5
|
"author": "MX",
|
|
6
6
|
"license": "MIT",
|
|
@@ -217,7 +217,7 @@
|
|
|
217
217
|
"@mui/x-charts": "^8.29.2",
|
|
218
218
|
"@mxenabled/cssinjs": "^0.6.0",
|
|
219
219
|
"@mxenabled/mx-icons": "^2.3.0",
|
|
220
|
-
"@mxenabled/mxui": "^2.12.
|
|
220
|
+
"@mxenabled/mxui": "^2.12.2",
|
|
221
221
|
"@mxenabled/web-widget-sdk": "^0.0.15",
|
|
222
222
|
"@tanstack/react-virtual": "^3.14.9",
|
|
223
223
|
"bowser": "^2.14.1",
|