@mx-cartographer/experiences 9.4.66 → 9.4.68
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 +9 -0
- package/dist/{transactions/components/shared/transactionlist → common/components}/ZeroState.es.js +11 -9
- package/dist/common/components/ZeroState.es.js.map +1 -0
- package/dist/common/components/index.d.ts +1 -0
- package/dist/common/index.es.js +44 -42
- package/dist/insights-v2/actionBlocks/ActionBlockLayer.es.js +18 -18
- package/dist/insights-v2/actionBlocks/ActionBlockLayer.es.js.map +1 -1
- package/dist/insights-v2/actionBlocks/TransactionListBlock/TransactionListBlock.d.ts +13 -0
- package/dist/insights-v2/actionBlocks/TransactionListBlock/TransactionListBlock.es.js +30 -0
- package/dist/insights-v2/actionBlocks/TransactionListBlock/TransactionListBlock.es.js.map +1 -0
- package/dist/insights-v2/actionBlocks/TransactionListBlock/index.d.ts +1 -0
- package/dist/insights-v2/mappings/actionBlocksKey.d.ts +1 -0
- package/dist/insights-v2/mappings/actionBlocksKey.es.js +2 -1
- package/dist/insights-v2/mappings/actionBlocksKey.es.js.map +1 -1
- package/dist/insights-v2/mappings/blocks.d.ts +1 -1
- package/dist/insights-v2/mappings/blocks.es.js +60 -54
- package/dist/insights-v2/mappings/blocks.es.js.map +1 -1
- package/dist/transactions/components/shared/TransactionList.es.js +8 -8
- package/dist/transactions/components/shared/TransactionList.es.js.map +1 -1
- package/dist/trends/components/trendstable/TrendsTable.es.js +29 -25
- package/dist/trends/components/trendstable/TrendsTable.es.js.map +1 -1
- package/package.json +1 -1
- package/dist/transactions/components/shared/transactionlist/ZeroState.es.js.map +0 -1
- /package/dist/{transactions/components/shared/transactionlist → common/components}/ZeroState.d.ts +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
## [9.4.68] - 10-09-2026
|
|
2
|
+
|
|
3
|
+
- **ADDED** - `transaction_list_block` (Transaction List) action block: opens a date-grouped drawer of the transactions a beat points at, with a nested Transaction Details drawer stacked on row click. Resolves rows via `instance_slot_data.transaction_guids` (id-list path), guarded by `Array.isArray` at the untrusted-payload boundary. `usePrepare` shares `useTransactionDetailsPrepare` so `detailedTransactions` is loaded on open — the drawer never opens on a permanent spinner. The registry entry titles the drawer from `insights_payload.title` (matching the WEC-1804 move off `beat.html_title`, which carries HTML entities); when the resolver returns an empty string, `ActionBlockLayer` falls back to the CTA label. Nested close clears the shared `transaction_guid` from action context, matching the sibling `TransactionHistoryBlock` convention. Only the `Standard` variant ships in this MR; the other three variants (`w/Summary`, `w/Status`, `w/Help`) are deferred to a follow-up MR after Figma review surfaced structural mismatches. Unblocks WEC-1461 and WEC-1462. (WEC-1425)
|
|
4
|
+
- **CHANGED** - `ActionBlockEntry.title` resolver signature widened to `(variant, copy, beat?)` so blocks can title from beat fields. `ActionBlockLayer` passes `beat` through and falls back to the CTA label when the resolver returns an empty string (`||`), not only when it returns `undefined` (`??`). Existing resolvers accept the extra parameter without change. (WEC-1425)
|
|
5
|
+
|
|
6
|
+
## [9.4.67] - 10-08-2026
|
|
7
|
+
|
|
8
|
+
- **FIXED** - Trends tabular view shows the shared zero-state message instead of the grid's default "No rows" when a table is empty MEW-4097
|
|
9
|
+
|
|
1
10
|
## [9.4.66] - 10-08-2026
|
|
2
11
|
|
|
3
12
|
- **ADDED** - `recurring_transaction_block` (Recurring Transaction) action block: opens the Expense Details drawer for one recurring subscription, shared by the Upcoming Subscription and Subscription Price Increase beats. The drawer content is the recurring module's `RecurringTransactionDetails` (merchant, amount, next due date, schedule, account/category, past activity, mark as paid/unpaid, delete), so the block only resolves *which* subscription and hands off, as `TransactionDetailsBlock` does. The subscription is `primary_repeating_transaction_guid` (V2 payload, then the legacy beat envelope), else the beat's primary transaction is walked to the repeating transaction it is linked to. `usePrepare` loads recurring data on open through `loadRepeatingTransactionData`; when nothing resolves the drawer shows `recurring.no_activities`, never the generic error; when the open-time load fails it shows the feed's `ErrorCard` with a Try Again retry instead of an endless loader. The shared transaction filter is restored on close only if the details view actually narrowed it. (WEC-1428)
|
package/dist/{transactions/components/shared/transactionlist → common/components}/ZeroState.es.js
RENAMED
|
@@ -1,20 +1,22 @@
|
|
|
1
|
-
import { useGlobalCopyStore as
|
|
1
|
+
import { useGlobalCopyStore as i } from "../context/hooks.es.js";
|
|
2
2
|
import "react";
|
|
3
|
-
import { observer as
|
|
4
|
-
import
|
|
3
|
+
import { observer as n } from "mobx-react-lite";
|
|
4
|
+
import s from "@mui/material/Stack";
|
|
5
5
|
import { Text as o } from "@mxenabled/mxui";
|
|
6
|
-
import { Receipt as
|
|
6
|
+
import { Receipt as c } from "@mxenabled/mx-icons";
|
|
7
7
|
import { jsx as t, jsxs as m } from "react/jsx-runtime";
|
|
8
|
-
var
|
|
9
|
-
const { transactions: r } =
|
|
10
|
-
return /* @__PURE__ */ m(
|
|
8
|
+
var l = ({ showIcon: e = !0, showSubtitle: a = !0 }) => {
|
|
9
|
+
const { transactions: r } = i();
|
|
10
|
+
return /* @__PURE__ */ m(s, {
|
|
11
11
|
alignItems: "center",
|
|
12
12
|
gap: 12,
|
|
13
13
|
height: "auto",
|
|
14
14
|
mb: 24,
|
|
15
15
|
mt: 24,
|
|
16
|
+
role: "status",
|
|
16
17
|
children: [
|
|
17
|
-
e && /* @__PURE__ */ t(
|
|
18
|
+
e && /* @__PURE__ */ t(c, {
|
|
19
|
+
"aria-hidden": "true",
|
|
18
20
|
color: "action",
|
|
19
21
|
sx: { fontSize: 32 }
|
|
20
22
|
}),
|
|
@@ -31,7 +33,7 @@ var p = ({ showIcon: e = !0, showSubtitle: a = !0 }) => {
|
|
|
31
33
|
})
|
|
32
34
|
]
|
|
33
35
|
});
|
|
34
|
-
}, v =
|
|
36
|
+
}, v = n(l);
|
|
35
37
|
export {
|
|
36
38
|
v as default
|
|
37
39
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ZeroState.es.js","names":[],"sources":["../../../src/common/components/ZeroState.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { Receipt as ReceiptOutlinedIcon } from '@mxenabled/mx-icons'\n\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../context'\n\ninterface ZeroStateProps {\n showIcon?: boolean\n showSubtitle?: boolean\n}\n\nconst ZeroState: React.FC<ZeroStateProps> = ({ showIcon = true, showSubtitle = true }) => {\n const { transactions: copy } = useGlobalCopyStore()\n\n return (\n <Stack alignItems=\"center\" gap={12} height=\"auto\" mb={24} mt={24} role=\"status\">\n {showIcon && <ReceiptOutlinedIcon aria-hidden=\"true\" color=\"action\" sx={{ fontSize: 32 }} />}\n <Text bold={true} color=\"text.secondary\" variant=\"body2\">\n {copy.zero_state_no_transactions}\n </Text>\n {showSubtitle && (\n <Text color=\"text.secondary\" variant=\"caption\">\n {copy.zero_state_there_are_no_transactions}\n </Text>\n )}\n </Stack>\n )\n}\n\nexport default observer(ZeroState)\n"],"mappings":";;;;;;;AAgBA,IAAM,IAAA,CAAuC,EAAE,UAAA,IAAW,IAAM,cAAA,IAAe,GAAA,MAAW;AACxF,QAAM,EAAE,cAAc,EAAA,IAAS,EAAmB;AAElD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,KAAK;AAAA,IAAI,QAAO;AAAA,IAAO,IAAI;AAAA,IAAI,IAAI;AAAA,IAAI,MAAK;AAAA,IAAvE,UAAA;AAAA,MACG,KAAY,gBAAA,EAAC,GAAD;AAAA,QAAqB,eAAY;AAAA,QAAO,OAAM;AAAA,QAAS,IAAI,EAAE,UAAU,GAAG;AAAA,MAAI,CAAA;AAAA,MAC3F,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,QAC9C,UAAA,EAAK;AAAA,MACF,CAAA;AAAA,MACL,KACC,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,QAClC,UAAA,EAAK;AAAA,MACF,CAAA;AAAA,IAEH;AAAA;AAEX,GAEA,IAAe,EAAS,CAAS"}
|
|
@@ -19,6 +19,7 @@ export { default as SelectionBox } from './SelectionBox';
|
|
|
19
19
|
export { default as TabContentContainer } from './TabContentContainer';
|
|
20
20
|
export { default as IconBacking } from './IconBacking';
|
|
21
21
|
export { default as DataRow } from './DataRow';
|
|
22
|
+
export { default as ZeroState } from './ZeroState';
|
|
22
23
|
export { default as InformationTooltip } from './InformationTooltip';
|
|
23
24
|
export { ConnectCard } from './ConnectCard';
|
|
24
25
|
export { CurrencyText } from './CurrencyText';
|
package/dist/common/index.es.js
CHANGED
|
@@ -2,11 +2,11 @@ import { buildDynamicCopy as r, buildPluralCopy as t } from "../core/utils/Local
|
|
|
2
2
|
import m, { CalendarSelectionTypes as i } from "./components/calendar/Calendar.es.js";
|
|
3
3
|
import a from "./components/charts/StatusBar.es.js";
|
|
4
4
|
import p from "./components/charts/Donut.es.js";
|
|
5
|
-
import
|
|
5
|
+
import u from "./hooks/useAccountDisplayName.es.js";
|
|
6
6
|
import { useCombineEvents as C, useCombinePageviews as S } from "./hooks/useCombineEvents.es.js";
|
|
7
7
|
import { GlobalDataContext as c, GlobalDataProvider as T } from "./context/GlobalDataProvider.es.js";
|
|
8
8
|
import { WidgetContainerContext as E, WidgetContainerProvider as D } from "./context/WidgetContainerProvider.es.js";
|
|
9
|
-
import { useAccountStore as _, useActionContext as N, useAppConfig as A, useBudgetsStore as y, useCashflowStore as P, useCategoryStore as b, useDebtStore as O, useError as G, useEvent as W, useFinstrongStore as L, useGlobalCopyStore as R, useGlobalStore as U, useGlobalUiStore as v, useGoalStore as B, useHelpStore as h, useHoldingStore as w, useInsightsV2Store as x, useLoad as M, useMerchantStore as Y, useNetWorthStore as H, useNotificationStore as F, usePageView as z, useRecurringTransactionsStore as V, useSettingsStore as
|
|
9
|
+
import { useAccountStore as _, useActionContext as N, useAppConfig as A, useBudgetsStore as y, useCashflowStore as P, useCategoryStore as b, useDebtStore as O, useError as G, useEvent as W, useFinstrongStore as L, useGlobalCopyStore as R, useGlobalStore as U, useGlobalUiStore as v, useGoalStore as B, useHelpStore as h, useHoldingStore as w, useInsightsV2Store as x, useLoad as M, useMerchantStore as Y, useNetWorthStore as H, useNotificationStore as F, usePageView as z, useRecurringTransactionsStore as V, useSettingsStore as Z, useTransactionStore as k, useTrendsStore as q, useUserStore as K, useWidgetContainerProvider as j } from "./context/hooks.es.js";
|
|
10
10
|
import { useInsightsEnabled as Q } from "./hooks/useInsightsEnabled.es.js";
|
|
11
11
|
import { useScreenSize as $ } from "./hooks/useScreenSize.es.js";
|
|
12
12
|
import ro from "./hooks/usePrevious.es.js";
|
|
@@ -14,7 +14,7 @@ import { useWidgetHeaderStyles as eo } from "./hooks/useWidgetHeaderStyles.es.js
|
|
|
14
14
|
import { useWidgetLoadTimer as io } from "./hooks/useWidgetLoadTimer.es.js";
|
|
15
15
|
import ao from "./components/dialog/Dialog.es.js";
|
|
16
16
|
import po from "./components/drawer/Drawer.es.js";
|
|
17
|
-
import
|
|
17
|
+
import uo from "./components/daterangeselector/DateRangeSelector.es.js";
|
|
18
18
|
import { ANALYTICS_EVENTS as Co } from "./constants/Analytics.es.js";
|
|
19
19
|
import { CONNECTIONS_WIDGET_ID as go, CONNECT_WIDGET_ID as co, MemberConnectionStatus as To } from "./constants/Connect.es.js";
|
|
20
20
|
import { formatCurrency as Do, formatOrdinal as Io, formatPercentage as _o, generateEqualIntervals as No, getCurrencyCodes as Ao, getPluralRules as yo } from "../core/utils/NumberFormatting.es.js";
|
|
@@ -25,8 +25,8 @@ import { LOADING_STATUS as Bo } from "./constants/SpendingPlan.es.js";
|
|
|
25
25
|
import { DEFAULT_DONUT_SIZE as wo, DEFAULT_STROKE_WIDTH as xo } from "./constants/Donut.es.js";
|
|
26
26
|
import { Sizes as Yo, TOUCH_TARGET as Ho } from "./constants/Sizes.es.js";
|
|
27
27
|
import zo from "./components/donuts/MultiSegmentDonut.es.js";
|
|
28
|
-
import
|
|
29
|
-
import
|
|
28
|
+
import Zo from "./components/donuts/SingleSegmentDonut.es.js";
|
|
29
|
+
import qo from "./components/ErrorBoundary.es.js";
|
|
30
30
|
import jo from "./components/Error.es.js";
|
|
31
31
|
import Qo from "./components/MicroWidgetContainer.es.js";
|
|
32
32
|
import $o from "./components/MiniWidgetContainer.es.js";
|
|
@@ -35,57 +35,58 @@ import er from "./components/Loader.es.js";
|
|
|
35
35
|
import { WidgetContainer as ir } from "./components/WidgetContainer.es.js";
|
|
36
36
|
import ar from "./components/ConnectDrawer.es.js";
|
|
37
37
|
import pr from "./components/CurrencyDialog.es.js";
|
|
38
|
-
import
|
|
38
|
+
import ur from "./components/CurrencyInput.es.js";
|
|
39
39
|
import Cr from "./components/ResponsiveButton.es.js";
|
|
40
40
|
import gr from "./components/SearchBox.es.js";
|
|
41
41
|
import Tr from "./components/SelectionBox.es.js";
|
|
42
42
|
import Er from "./components/TabContentContainer.es.js";
|
|
43
43
|
import Ir from "./components/IconBacking.es.js";
|
|
44
44
|
import Nr from "./components/DataRow.es.js";
|
|
45
|
-
import yr from "./components/
|
|
46
|
-
import
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
45
|
+
import yr from "./components/ZeroState.es.js";
|
|
46
|
+
import br from "./components/InformationTooltip.es.js";
|
|
47
|
+
import { ConnectCard as Gr } from "./components/ConnectCard.es.js";
|
|
48
|
+
import { CurrencyText as Lr } from "./components/CurrencyText.es.js";
|
|
49
|
+
import { EmptyState as Ur } from "./components/EmptyState.es.js";
|
|
50
|
+
import { ListItemAction as Br } from "./components/ListItemAction.es.js";
|
|
51
|
+
import { ListItemRow as wr } from "./components/ListItemRow.es.js";
|
|
52
|
+
import { ListItemWrapper as Mr } from "./components/ListItemWrapper.es.js";
|
|
53
|
+
import { Select as Hr } from "./components/Select.es.js";
|
|
54
|
+
import { ToggleButtonListItem as zr } from "./components/listitems/ToggleButtonListItem.es.js";
|
|
55
|
+
import { ToggleListItem as Zr } from "./components/listitems/ToggleListItem.es.js";
|
|
56
|
+
import { analyticsSession as qr } from "./utils/Analytics.es.js";
|
|
57
|
+
import { getClientComponentOverrides as jr, getClientCustomizations as Jr, getClientPaletteOptions as Qr, getClientTheme as Xr } from "./utils/Theme.es.js";
|
|
57
58
|
export {
|
|
58
59
|
Co as ANALYTICS_EVENTS,
|
|
59
60
|
go as CONNECTIONS_WIDGET_ID,
|
|
60
61
|
co as CONNECT_WIDGET_ID,
|
|
61
62
|
m as Calendar,
|
|
62
63
|
i as CalendarSelectionTypes,
|
|
63
|
-
|
|
64
|
+
Gr as ConnectCard,
|
|
64
65
|
ar as ConnectDrawer,
|
|
65
66
|
pr as CurrencyDialog,
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
ur as CurrencyInput,
|
|
68
|
+
Lr as CurrencyText,
|
|
68
69
|
wo as DEFAULT_DONUT_SIZE,
|
|
69
70
|
xo as DEFAULT_STROKE_WIDTH,
|
|
70
71
|
Nr as DataRow,
|
|
71
|
-
|
|
72
|
+
uo as DateRangeSelector,
|
|
72
73
|
ao as Dialog,
|
|
73
74
|
p as Donut,
|
|
74
75
|
po as Drawer,
|
|
75
|
-
|
|
76
|
+
Ur as EmptyState,
|
|
76
77
|
jo as Error,
|
|
77
|
-
|
|
78
|
+
qo as ErrorBoundary,
|
|
78
79
|
rr as GlobalAccountFilter,
|
|
79
80
|
c as GlobalDataContext,
|
|
80
81
|
T as GlobalDataProvider,
|
|
81
82
|
bo as GlobalStore,
|
|
82
83
|
Go as INCOME_ACCOUNT_TYPES,
|
|
83
84
|
Ir as IconBacking,
|
|
84
|
-
|
|
85
|
+
br as InformationTooltip,
|
|
85
86
|
Bo as LOADING_STATUS,
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
Br as ListItemAction,
|
|
88
|
+
wr as ListItemRow,
|
|
89
|
+
Mr as ListItemWrapper,
|
|
89
90
|
er as Loader,
|
|
90
91
|
To as MemberConnectionStatus,
|
|
91
92
|
Qo as MicroWidgetContainer,
|
|
@@ -96,32 +97,33 @@ export {
|
|
|
96
97
|
Cr as ResponsiveButton,
|
|
97
98
|
Lo as SPENDING_ACCOUNT_TYPES,
|
|
98
99
|
gr as SearchBox,
|
|
99
|
-
|
|
100
|
+
Hr as Select,
|
|
100
101
|
Tr as SelectionBox,
|
|
101
|
-
|
|
102
|
+
Zo as SingleSegmentDonut,
|
|
102
103
|
Yo as Sizes,
|
|
103
104
|
a as StatusBar,
|
|
104
105
|
Ho as TOUCH_TARGET,
|
|
105
106
|
Er as TabContentContainer,
|
|
106
|
-
|
|
107
|
-
|
|
107
|
+
zr as ToggleButtonListItem,
|
|
108
|
+
Zr as ToggleListItem,
|
|
108
109
|
ir as WidgetContainer,
|
|
109
110
|
E as WidgetContainerContext,
|
|
110
111
|
D as WidgetContainerProvider,
|
|
111
|
-
|
|
112
|
+
yr as ZeroState,
|
|
113
|
+
qr as analyticsSession,
|
|
112
114
|
r as buildDynamicCopy,
|
|
113
115
|
t as buildPluralCopy,
|
|
114
116
|
Do as formatCurrency,
|
|
115
117
|
Io as formatOrdinal,
|
|
116
118
|
_o as formatPercentage,
|
|
117
119
|
No as generateEqualIntervals,
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
120
|
+
jr as getClientComponentOverrides,
|
|
121
|
+
Jr as getClientCustomizations,
|
|
122
|
+
Qr as getClientPaletteOptions,
|
|
123
|
+
Xr as getClientTheme,
|
|
122
124
|
Ao as getCurrencyCodes,
|
|
123
125
|
yo as getPluralRules,
|
|
124
|
-
|
|
126
|
+
u as useAccountDisplayName,
|
|
125
127
|
_ as useAccountStore,
|
|
126
128
|
N as useActionContext,
|
|
127
129
|
A as useAppConfig,
|
|
@@ -150,10 +152,10 @@ export {
|
|
|
150
152
|
ro as usePrevious,
|
|
151
153
|
V as useRecurringTransactionsStore,
|
|
152
154
|
$ as useScreenSize,
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
155
|
+
Z as useSettingsStore,
|
|
156
|
+
k as useTransactionStore,
|
|
157
|
+
q as useTrendsStore,
|
|
158
|
+
K as useUserStore,
|
|
157
159
|
j as useWidgetContainerProvider,
|
|
158
160
|
eo as useWidgetHeaderStyles,
|
|
159
161
|
io as useWidgetLoadTimer
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
import { useGlobalCopyStore as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { useGlobalCopyStore as k, useGlobalUiStore as C, useInsightsV2Store as h } from "../../common/context/hooks.es.js";
|
|
2
|
+
import B from "../../common/components/drawer/Drawer.es.js";
|
|
3
|
+
import _ from "../../common/components/Loader.es.js";
|
|
4
4
|
import { getDynamicCtaBasedOnTriggers as b } from "./util.es.js";
|
|
5
|
-
import { actionBlocks as
|
|
5
|
+
import { actionBlocks as v, hasDrawerBlock as w } from "../mappings/blocks.es.js";
|
|
6
6
|
import { observer as D } from "mobx-react-lite";
|
|
7
|
-
import
|
|
8
|
-
import { Text as
|
|
7
|
+
import L from "@mui/material/Stack";
|
|
8
|
+
import { Text as x } from "@mxenabled/mxui";
|
|
9
9
|
import { jsx as e } from "react/jsx-runtime";
|
|
10
|
-
var
|
|
10
|
+
var A = ({ actionBlock: s, ...o }) => {
|
|
11
11
|
const { Component: n, usePrepare: t } = s;
|
|
12
12
|
return t(o), /* @__PURE__ */ e(n, { ...o });
|
|
13
|
-
},
|
|
14
|
-
const n =
|
|
13
|
+
}, $ = D(function({ beat: o }) {
|
|
14
|
+
const n = k(), t = n.common, { isCopyLoaded: m } = C(), { actionDrawer: c, closeActionDrawer: p } = h();
|
|
15
15
|
if (!o.insights_payload) return null;
|
|
16
|
-
const { primary_cta:
|
|
17
|
-
if (!m) return l ? /* @__PURE__ */ e(
|
|
18
|
-
const r = b(
|
|
19
|
-
return /* @__PURE__ */ e(
|
|
16
|
+
const { primary_cta: d, secondary_cta: u, guid: f } = o.insights_payload, l = c.isDrawerOpen && c.guid === f;
|
|
17
|
+
if (!m) return l ? /* @__PURE__ */ e(_, {}) : null;
|
|
18
|
+
const r = b(c, d, u), a = w(r?.block), i = a ? v[r?.block] : void 0, y = i?.title?.(r?.variant, n, o), g = i ? y || r?.label || "" : a ? t.error_heading : r?.label ?? "";
|
|
19
|
+
return /* @__PURE__ */ e(B, {
|
|
20
20
|
ariaLabelClose: t.close_aria,
|
|
21
21
|
isOpen: l,
|
|
22
22
|
onClose: p,
|
|
23
|
-
title:
|
|
24
|
-
children: i ? /* @__PURE__ */ e(
|
|
23
|
+
title: g,
|
|
24
|
+
children: i ? /* @__PURE__ */ e(A, {
|
|
25
25
|
actionBlock: i,
|
|
26
26
|
beat: o
|
|
27
|
-
}, r?.block) :
|
|
27
|
+
}, r?.block) : a ? /* @__PURE__ */ e(L, {
|
|
28
28
|
sx: { p: 24 },
|
|
29
|
-
children: /* @__PURE__ */ e(
|
|
29
|
+
children: /* @__PURE__ */ e(x, { children: t.error_message })
|
|
30
30
|
}) : null
|
|
31
31
|
});
|
|
32
32
|
});
|
|
33
33
|
export {
|
|
34
|
-
|
|
34
|
+
$ as ActionBlockLayer
|
|
35
35
|
};
|
|
36
36
|
|
|
37
37
|
//# sourceMappingURL=ActionBlockLayer.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionBlockLayer.es.js","names":[],"sources":["../../../src/insights-v2/actionBlocks/ActionBlockLayer.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n Drawer,\n Loader,\n useGlobalCopyStore,\n useGlobalUiStore,\n useInsightsV2Store,\n} from '../../common'\nimport { type Beat } from '../../core'\nimport {\n actionBlocks,\n hasDrawerBlock,\n type ActionBlockEntry,\n type ActionBlockProps,\n} from '../mappings/blocks'\nimport { getDynamicCtaBasedOnTriggers } from './util'\n\ninterface ActionBlockLayerProps {\n beat: Beat\n}\n\n/**\n * Renders a registered action block. Callers MUST key this per block name — a\n * block with `usePrepare` and one without run a different number of hooks, so\n * reusing the same fiber across a block switch violates the rules of hooks.\n */\nconst ActionBlockRunner = ({\n actionBlock,\n ...blockProps\n}: ActionBlockProps & { actionBlock: ActionBlockEntry }) => {\n const { Component, usePrepare } = actionBlock\n\n usePrepare(blockProps)\n\n return <Component {...blockProps} />\n}\n\n// `observer` is required: this reads `isCopyLoaded` off GlobalUiStore and the\n// action drawer off InsightsV2Store. Without it the component never re-renders\n// and stays stuck on <Loader /> forever.\nexport const ActionBlockLayer = observer(function ActionBlockLayer({\n beat,\n}: ActionBlockLayerProps) {\n const copy = useGlobalCopyStore()\n const commonCopy = copy.common\n const { isCopyLoaded } = useGlobalUiStore()\n const { actionDrawer, closeActionDrawer } = useInsightsV2Store()\n\n // Mirrors BaseLayout's guard — the layer is exported, so callers are not\n // guaranteed to have narrowed this already.\n if (!beat.insights_payload) return null\n\n const { primary_cta, secondary_cta, guid } = beat.insights_payload\n\n // Every card in the feed renders its own layer against the shared store, so\n // this card's drawer only opens when its beat is the one that triggered it.\n const isCurrentBeatOpen = actionDrawer.isDrawerOpen && actionDrawer.guid === guid\n\n if (!isCopyLoaded) return isCurrentBeatOpen ? <Loader /> : null\n\n const currentCta = getDynamicCtaBasedOnTriggers(actionDrawer, primary_cta, secondary_cta)\n\n // A CTA without a real block never opens a drawer (BaseLayout won't trigger it);\n // a real-but-unknown block shows the error (\"oops\") content.\n const blockValid = hasDrawerBlock(currentCta?.block)\n const actionBlock = blockValid\n ? actionBlocks[currentCta?.block as keyof typeof actionBlocks]\n : undefined\n\n const
|
|
1
|
+
{"version":3,"file":"ActionBlockLayer.es.js","names":[],"sources":["../../../src/insights-v2/actionBlocks/ActionBlockLayer.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n Drawer,\n Loader,\n useGlobalCopyStore,\n useGlobalUiStore,\n useInsightsV2Store,\n} from '../../common'\nimport { type Beat } from '../../core'\nimport {\n actionBlocks,\n hasDrawerBlock,\n type ActionBlockEntry,\n type ActionBlockProps,\n} from '../mappings/blocks'\nimport { getDynamicCtaBasedOnTriggers } from './util'\n\ninterface ActionBlockLayerProps {\n beat: Beat\n}\n\n/**\n * Renders a registered action block. Callers MUST key this per block name — a\n * block with `usePrepare` and one without run a different number of hooks, so\n * reusing the same fiber across a block switch violates the rules of hooks.\n */\nconst ActionBlockRunner = ({\n actionBlock,\n ...blockProps\n}: ActionBlockProps & { actionBlock: ActionBlockEntry }) => {\n const { Component, usePrepare } = actionBlock\n\n usePrepare(blockProps)\n\n return <Component {...blockProps} />\n}\n\n// `observer` is required: this reads `isCopyLoaded` off GlobalUiStore and the\n// action drawer off InsightsV2Store. Without it the component never re-renders\n// and stays stuck on <Loader /> forever.\nexport const ActionBlockLayer = observer(function ActionBlockLayer({\n beat,\n}: ActionBlockLayerProps) {\n const copy = useGlobalCopyStore()\n const commonCopy = copy.common\n const { isCopyLoaded } = useGlobalUiStore()\n const { actionDrawer, closeActionDrawer } = useInsightsV2Store()\n\n // Mirrors BaseLayout's guard — the layer is exported, so callers are not\n // guaranteed to have narrowed this already.\n if (!beat.insights_payload) return null\n\n const { primary_cta, secondary_cta, guid } = beat.insights_payload\n\n // Every card in the feed renders its own layer against the shared store, so\n // this card's drawer only opens when its beat is the one that triggered it.\n const isCurrentBeatOpen = actionDrawer.isDrawerOpen && actionDrawer.guid === guid\n\n if (!isCopyLoaded) return isCurrentBeatOpen ? <Loader /> : null\n\n const currentCta = getDynamicCtaBasedOnTriggers(actionDrawer, primary_cta, secondary_cta)\n\n // A CTA without a real block never opens a drawer (BaseLayout won't trigger it);\n // a real-but-unknown block shows the error (\"oops\") content.\n const blockValid = hasDrawerBlock(currentCta?.block)\n const actionBlock = blockValid\n ? actionBlocks[currentCta?.block as keyof typeof actionBlocks]\n : undefined\n\n const resolvedTitle = actionBlock?.title?.(currentCta?.variant, copy, beat)\n const drawerTitle = actionBlock\n ? resolvedTitle || currentCta?.label || ''\n : blockValid\n ? commonCopy.error_heading\n : (currentCta?.label ?? '')\n\n return (\n <Drawer\n ariaLabelClose={commonCopy.close_aria}\n isOpen={isCurrentBeatOpen}\n onClose={closeActionDrawer}\n title={drawerTitle}\n >\n {actionBlock ? (\n <ActionBlockRunner actionBlock={actionBlock} beat={beat} key={currentCta?.block} />\n ) : blockValid ? (\n <Stack sx={{ p: 24 }}>\n <Text>{commonCopy.error_message}</Text>\n </Stack>\n ) : null}\n </Drawer>\n )\n})\n"],"mappings":";;;;;;;;;AA8BA,IAAM,IAAA,CAAqB,EACzB,aAAA,GACA,GAAG,EAAA,MACuD;AAC1D,QAAM,EAAE,WAAA,GAAW,YAAA,EAAA,IAAe;AAElC,SAAA,EAAW,CAAU,GAEd,gBAAA,EAAC,GAAD,EAAW,GAAI,EAAa,CAAA;AACrC,GAKa,IAAmB,EAAS,SAA0B,EACjE,MAAA,EAAA,GACwB;AACxB,QAAM,IAAO,EAAmB,GAC1B,IAAa,EAAK,QAClB,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,cAAA,GAAc,mBAAA,EAAA,IAAsB,EAAmB;AAI/D,MAAI,CAAC,EAAK,iBAAkB,QAAO;AAEnC,QAAM,EAAE,aAAA,GAAa,eAAA,GAAe,MAAA,EAAA,IAAS,EAAK,kBAI5C,IAAoB,EAAa,gBAAgB,EAAa,SAAS;AAE7E,MAAI,CAAC,EAAc,QAAO,IAAoB,gBAAA,EAAC,GAAD,CAAS,CAAA,IAAI;AAE3D,QAAM,IAAa,EAA6B,GAAc,GAAa,CAAa,GAIlF,IAAa,EAAe,GAAY,KAAK,GAC7C,IAAc,IAChB,EAAa,GAAY,KAAA,IACzB,QAEE,IAAgB,GAAa,QAAQ,GAAY,SAAS,GAAM,CAAI,GACpE,IAAc,IAChB,KAAiB,GAAY,SAAS,KACtC,IACE,EAAW,gBACV,GAAY,SAAS;AAE5B,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAW;AAAA,IAC3B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,IAEN,UAAA,IACC,gBAAA,EAAC,GAAD;AAAA,MAAgC,aAAA;AAAA,MAAmB,MAAA;AAAA,IAA+B,GAApB,GAAY,KAAQ,IAChF,IACF,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,GAAG,GAAG;AAAA,MACjB,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAO,EAAW,cAAoB,CAAA;AAAA,IACjC,CAAA,IACL;AAAA,EACE,CAAA;AAEZ,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Beat } from '../../../core';
|
|
2
|
+
export interface TransactionListBlockProps {
|
|
3
|
+
beat: Beat;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Opens a date-grouped list of the transactions a beat points at. Tapping a row stacks
|
|
7
|
+
* the Transaction Details drawer over the list.
|
|
8
|
+
*
|
|
9
|
+
* ActionBlockLayer owns the outer Drawer (title, close button, copy-loaded gate).
|
|
10
|
+
*/
|
|
11
|
+
export declare const TransactionListBlock: (({ beat, }: TransactionListBlockProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
12
|
+
displayName: string;
|
|
13
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { useGlobalCopyStore as f, useInsightsV2Store as g, useTransactionStore as _ } from "../../../common/context/hooks.es.js";
|
|
2
|
+
import C from "../../../common/components/drawer/Drawer.es.js";
|
|
3
|
+
import h from "../../../transactions/components/shared/TransactionList.es.js";
|
|
4
|
+
import { selectTransactionsByGuids as y } from "../../CommonUtils.es.js";
|
|
5
|
+
import { TransactionDetailsBlock as T } from "../TransactionDetailsBlock/TransactionDetailsBlock.es.js";
|
|
6
|
+
import D from "react";
|
|
7
|
+
import { observer as k } from "mobx-react-lite";
|
|
8
|
+
import { Fragment as S, jsx as t, jsxs as v } from "react/jsx-runtime";
|
|
9
|
+
var G = k(function({ beat: o }) {
|
|
10
|
+
const { common: i, insights_feed: r } = f(), { setActionContext: s } = g(), e = _(), [c, n] = D.useState(!1), a = o.insights_payload?.instance_slot_data ?? {}, l = Array.isArray(a.transaction_guids) ? a.transaction_guids : void 0, m = y(e.detailedTransactions, l), d = (u) => {
|
|
11
|
+
s({ transaction_guid: u }), n(!0);
|
|
12
|
+
}, p = () => {
|
|
13
|
+
n(!1), s({ transaction_guid: void 0 });
|
|
14
|
+
};
|
|
15
|
+
return /* @__PURE__ */ v(S, { children: [/* @__PURE__ */ t(h, {
|
|
16
|
+
onClick: d,
|
|
17
|
+
transaction: m
|
|
18
|
+
}), /* @__PURE__ */ t(C, {
|
|
19
|
+
ariaLabelClose: i.close_aria,
|
|
20
|
+
isOpen: c,
|
|
21
|
+
onClose: p,
|
|
22
|
+
title: r.general.transaction_details_title,
|
|
23
|
+
children: /* @__PURE__ */ t(T, { beat: o })
|
|
24
|
+
})] });
|
|
25
|
+
});
|
|
26
|
+
export {
|
|
27
|
+
G as TransactionListBlock
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
//# sourceMappingURL=TransactionListBlock.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TransactionListBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionListBlock/TransactionListBlock.tsx"],"sourcesContent":["import React from 'react'\n\nimport { observer } from 'mobx-react-lite'\n\nimport {\n Drawer,\n useGlobalCopyStore,\n useInsightsV2Store,\n useTransactionStore,\n} from '../../../common'\nimport type { Beat } from '../../../core'\nimport type { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData'\nimport { TransactionDetailsBlock } from '../TransactionDetailsBlock'\nimport { TransactionList } from '../../../transactions'\nimport { selectTransactionsByGuids } from '../../CommonUtils'\n\nexport interface TransactionListBlockProps {\n beat: Beat\n}\n\n/**\n * Opens a date-grouped list of the transactions a beat points at. Tapping a row stacks\n * the Transaction Details drawer over the list.\n *\n * ActionBlockLayer owns the outer Drawer (title, close button, copy-loaded gate).\n */\nexport const TransactionListBlock = observer(function TransactionListBlock({\n beat,\n}: TransactionListBlockProps) {\n const { common: commonCopy, insights_feed: insightsCopy } = useGlobalCopyStore()\n const { setActionContext } = useInsightsV2Store()\n const transactionStore = useTransactionStore()\n\n const [isDetailsOpen, setIsDetailsOpen] = React.useState(false)\n\n const slotData = (beat.insights_payload?.instance_slot_data ?? {}) as InsightsInstanceSlotData\n // Guard the untrusted payload cast: a non-array transaction_guids would be fed to new Set()\n // inside selectTransactionsByGuids and match per-character.\n const guids = Array.isArray(slotData.transaction_guids) ? slotData.transaction_guids : undefined\n const transactions = selectTransactionsByGuids(transactionStore.detailedTransactions, guids)\n\n const handleRowClick = (guid: string) => {\n setActionContext({ transaction_guid: guid })\n setIsDetailsOpen(true)\n }\n\n const handleDetailsClose = () => {\n setIsDetailsOpen(false)\n // Clear only the key this nested drawer owns — same convention as TransactionHistoryBlock.\n // `setActionContext` merges, so an explicit `{}` would be a no-op; naming the key keeps the\n // outer drawer's own context intact.\n setActionContext({ transaction_guid: undefined })\n }\n\n return (\n <>\n <TransactionList onClick={handleRowClick} transaction={transactions} />\n <Drawer\n ariaLabelClose={commonCopy.close_aria}\n isOpen={isDetailsOpen}\n onClose={handleDetailsClose}\n title={insightsCopy.general.transaction_details_title}\n >\n <TransactionDetailsBlock beat={beat} />\n </Drawer>\n </>\n )\n})\n"],"mappings":";;;;;;;;AA0BA,IAAa,IAAuB,EAAS,SAA8B,EACzE,MAAA,EAAA,GAC4B;AAC5B,QAAM,EAAE,QAAQ,GAAY,eAAe,EAAA,IAAiB,EAAmB,GACzE,EAAE,kBAAA,EAAA,IAAqB,EAAmB,GAC1C,IAAmB,EAAoB,GAEvC,CAAC,GAAe,CAAA,IAAoB,EAAM,SAAS,EAAK,GAExD,IAAY,EAAK,kBAAkB,sBAAsB,CAAC,GAG1D,IAAQ,MAAM,QAAQ,EAAS,iBAAiB,IAAI,EAAS,oBAAoB,QACjF,IAAe,EAA0B,EAAiB,sBAAsB,CAAK,GAErF,IAAA,CAAkB,MAAiB;AACvC,IAAA,EAAiB,EAAE,kBAAkB,EAAK,CAAC,GAC3C,EAAiB,EAAI;AAAA,EACvB,GAEM,IAAA,MAA2B;AAC/B,IAAA,EAAiB,EAAK,GAItB,EAAiB,EAAE,kBAAkB,OAAU,CAAC;AAAA,EAClD;AAEA,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAiB,SAAS;AAAA,IAAgB,aAAa;AAAA,EAAe,CAAA,GACtE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAW;AAAA,IAC3B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO,EAAa,QAAQ;AAAA,IAE5B,UAAA,gBAAA,EAAC,GAAD,EAA+B,MAAA,EAAO,CAAA;AAAA,EAChC,CAAA,CACR,EAAA,CAAA;AAEN,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './TransactionListBlock';
|
|
@@ -4,7 +4,8 @@ var _ = {
|
|
|
4
4
|
TRANSCATION_HISTORY_ACTION_BLOCK: "transaction_history_block",
|
|
5
5
|
TRANSACTION_DETAILS_ACTION_BLOCK: "transaction_details_block",
|
|
6
6
|
CONTACT_SUPPORT_ACTION_BLOCK: "contact_support_block",
|
|
7
|
-
RECURRING_TRANSACTION_ACTION_BLOCK: "recurring_transaction_block"
|
|
7
|
+
RECURRING_TRANSACTION_ACTION_BLOCK: "recurring_transaction_block",
|
|
8
|
+
TRANSACTION_LIST_ACTION_BLOCK: "transaction_list_block"
|
|
8
9
|
};
|
|
9
10
|
export {
|
|
10
11
|
_ as actionBlocksKey
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actionBlocksKey.es.js","names":[],"sources":["../../../src/insights-v2/mappings/actionBlocksKey.ts"],"sourcesContent":["// Keys for the drawer drilldown registry in `blocks.ts`, extracted into their own module.\n//\n// Why: chart blocks (e.g. BarchartBlock, DoubleBarChartBlock) need\n// `TRANSCATION_HISTORY_ACTION_BLOCK` to tag a chart bar's drilldown context, but they are\n// themselves re-exported through `../blocks` -> `mappings/blocks.ts` imports from that same\n// barrel to build its `blocks` registry. Importing the key straight from `mappings/blocks.ts`\n// closed that loop into a circular import: evaluating `mappings/blocks.ts` pulled in the\n// `blocks` barrel, which (before it got to `ComponentBlocks`/`AccountBlock`) loaded\n// `BarchartBlock`, which imported back into the still-initializing `mappings/blocks.ts` —\n// tripping a \"Cannot access 'AccountBlock' before initialization\" TDZ error in Storybook/Vite.\n//\n// Keeping the keys here (no dependency on `mappings/blocks.ts`) lets chart blocks reference\n// them without re-entering that module.\n//\n// Names follow ditto: its registry ends every CTA block in `_block` and the V2 envelope copies those\n// names verbatim (`transaction_details_block`, `contact_support_block`). `make_transfer` is a legacy\n// name that stays as an alias until the last legacy payload is gone.\nexport const actionBlocksKey = {\n PLACEHOLDER_ACTION_BLOCK: 'PlaceholderActionBlock',\n MAKE_TRANSFER_ACTION_BLOCK: 'make_transfer',\n TRANSCATION_HISTORY_ACTION_BLOCK: 'transaction_history_block',\n TRANSACTION_DETAILS_ACTION_BLOCK: 'transaction_details_block',\n CONTACT_SUPPORT_ACTION_BLOCK: 'contact_support_block',\n RECURRING_TRANSACTION_ACTION_BLOCK: 'recurring_transaction_block',\n}\n"],"mappings":"AAiBA,IAAa,IAAkB;AAAA,EAC7B,0BAA0B;AAAA,EAC1B,4BAA4B;AAAA,EAC5B,kCAAkC;AAAA,EAClC,kCAAkC;AAAA,EAClC,8BAA8B;AAAA,EAC9B,oCAAoC;
|
|
1
|
+
{"version":3,"file":"actionBlocksKey.es.js","names":[],"sources":["../../../src/insights-v2/mappings/actionBlocksKey.ts"],"sourcesContent":["// Keys for the drawer drilldown registry in `blocks.ts`, extracted into their own module.\n//\n// Why: chart blocks (e.g. BarchartBlock, DoubleBarChartBlock) need\n// `TRANSCATION_HISTORY_ACTION_BLOCK` to tag a chart bar's drilldown context, but they are\n// themselves re-exported through `../blocks` -> `mappings/blocks.ts` imports from that same\n// barrel to build its `blocks` registry. Importing the key straight from `mappings/blocks.ts`\n// closed that loop into a circular import: evaluating `mappings/blocks.ts` pulled in the\n// `blocks` barrel, which (before it got to `ComponentBlocks`/`AccountBlock`) loaded\n// `BarchartBlock`, which imported back into the still-initializing `mappings/blocks.ts` —\n// tripping a \"Cannot access 'AccountBlock' before initialization\" TDZ error in Storybook/Vite.\n//\n// Keeping the keys here (no dependency on `mappings/blocks.ts`) lets chart blocks reference\n// them without re-entering that module.\n//\n// Names follow ditto: its registry ends every CTA block in `_block` and the V2 envelope copies those\n// names verbatim (`transaction_details_block`, `contact_support_block`). `make_transfer` is a legacy\n// name that stays as an alias until the last legacy payload is gone.\nexport const actionBlocksKey = {\n PLACEHOLDER_ACTION_BLOCK: 'PlaceholderActionBlock',\n MAKE_TRANSFER_ACTION_BLOCK: 'make_transfer',\n TRANSCATION_HISTORY_ACTION_BLOCK: 'transaction_history_block',\n TRANSACTION_DETAILS_ACTION_BLOCK: 'transaction_details_block',\n CONTACT_SUPPORT_ACTION_BLOCK: 'contact_support_block',\n RECURRING_TRANSACTION_ACTION_BLOCK: 'recurring_transaction_block',\n TRANSACTION_LIST_ACTION_BLOCK: 'transaction_list_block',\n}\n"],"mappings":"AAiBA,IAAa,IAAkB;AAAA,EAC7B,0BAA0B;AAAA,EAC1B,4BAA4B;AAAA,EAC5B,kCAAkC;AAAA,EAClC,kCAAkC;AAAA,EAClC,8BAA8B;AAAA,EAC9B,oCAAoC;AAAA,EACpC,+BAA+B;AACjC"}
|
|
@@ -6,7 +6,7 @@ export declare const hasDrawerBlock: (block?: string | null) => boolean;
|
|
|
6
6
|
export interface ActionBlockEntry {
|
|
7
7
|
Component: React.ComponentType<ActionBlockProps>;
|
|
8
8
|
usePrepare: (props: ActionBlockProps) => void;
|
|
9
|
-
title?: (variant: string | null | undefined, copy: GlobalCopy) => string;
|
|
9
|
+
title?: (variant: string | null | undefined, copy: GlobalCopy, beat?: Beat) => string;
|
|
10
10
|
}
|
|
11
11
|
export declare const actionBlocks: Record<string, ActionBlockEntry>;
|
|
12
12
|
export declare const blocks: Record<string, React.ComponentType<{
|
|
@@ -1,85 +1,91 @@
|
|
|
1
|
-
import { ContactSupportActionBlock as
|
|
1
|
+
import { ContactSupportActionBlock as i } from "../actionBlocks/ContactSupportActionBlock.es.js";
|
|
2
2
|
import { actionBlocksKey as r } from "./actionBlocksKey.es.js";
|
|
3
|
-
import { BarchartBlock as
|
|
4
|
-
import { DoubleBarChartBlock as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { BudgetBlock as
|
|
11
|
-
import
|
|
12
|
-
import { TransactionBlock as
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import { SVGImageBlock as
|
|
16
|
-
import { PlaceholderActionBlock as
|
|
17
|
-
import { getMakeTransferDrawerTitle as
|
|
18
|
-
import { MakeTransferActionBlockLayer as
|
|
19
|
-
import { getDrawerHeaderTitle as
|
|
20
|
-
import { TransactionDetailsBlock as
|
|
21
|
-
import { useTransactionDetailsPrepare as
|
|
22
|
-
import { TransactionHistoryBlock as
|
|
23
|
-
import { useRecurringTransactionPrepare as
|
|
24
|
-
import { RecurringTransactionBlock as
|
|
3
|
+
import { BarchartBlock as l } from "../blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
|
|
4
|
+
import { DoubleBarChartBlock as n } from "../blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
|
|
5
|
+
import m from "../blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
|
|
6
|
+
import p from "../blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
|
|
7
|
+
import _ from "../blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
|
|
8
|
+
import s from "../blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
|
|
9
|
+
import k from "../blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
|
|
10
|
+
import { BudgetBlock as B } from "../blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
|
|
11
|
+
import C from "../blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
|
|
12
|
+
import { TransactionBlock as T } from "../blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
|
|
13
|
+
import u from "../blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
|
|
14
|
+
import f from "../blocks/ImageBlocks/ImageBlock.es.js";
|
|
15
|
+
import { SVGImageBlock as A } from "../blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
|
|
16
|
+
import { PlaceholderActionBlock as O } from "../actionBlocks/PlaceholderActionBlock.es.js";
|
|
17
|
+
import { getMakeTransferDrawerTitle as b } from "../actionBlocks/MakeTransferActionBlock/layout.es.js";
|
|
18
|
+
import { MakeTransferActionBlockLayer as N } from "../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.es.js";
|
|
19
|
+
import { getDrawerHeaderTitle as h } from "../actionBlocks/TransactionHistoryBlock/utils.es.js";
|
|
20
|
+
import { TransactionDetailsBlock as I } from "../actionBlocks/TransactionDetailsBlock/TransactionDetailsBlock.es.js";
|
|
21
|
+
import { useTransactionDetailsPrepare as a } from "../actionBlocks/TransactionDetailsBlock/useTransactionDetailsPrepare.es.js";
|
|
22
|
+
import { TransactionHistoryBlock as L } from "../actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.es.js";
|
|
23
|
+
import { useRecurringTransactionPrepare as S } from "../actionBlocks/RecurringTransactionBlock/useRecurringTransactionPrepare.es.js";
|
|
24
|
+
import { RecurringTransactionBlock as d } from "../actionBlocks/RecurringTransactionBlock/RecurringTransactionBlock.es.js";
|
|
25
|
+
import { TransactionListBlock as g } from "../actionBlocks/TransactionListBlock/TransactionListBlock.es.js";
|
|
25
26
|
var e = (t) => {
|
|
26
|
-
},
|
|
27
|
+
}, P = /* @__PURE__ */ new Set([
|
|
27
28
|
"",
|
|
28
29
|
"null",
|
|
29
30
|
"undefined"
|
|
30
|
-
]),
|
|
31
|
+
]), ro = (t) => {
|
|
31
32
|
const o = t?.trim().toLowerCase();
|
|
32
|
-
return !!o && !
|
|
33
|
-
},
|
|
33
|
+
return !!o && !P.has(o);
|
|
34
|
+
}, to = {
|
|
34
35
|
[r.PLACEHOLDER_ACTION_BLOCK]: {
|
|
35
|
-
Component:
|
|
36
|
+
Component: O,
|
|
36
37
|
usePrepare: e,
|
|
37
38
|
title: () => "Action Block Layer Drilldown"
|
|
38
39
|
},
|
|
39
40
|
[r.MAKE_TRANSFER_ACTION_BLOCK]: {
|
|
40
|
-
Component:
|
|
41
|
+
Component: N,
|
|
41
42
|
usePrepare: e,
|
|
42
|
-
title:
|
|
43
|
+
title: b
|
|
43
44
|
},
|
|
44
45
|
[r.TRANSCATION_HISTORY_ACTION_BLOCK]: {
|
|
45
|
-
Component:
|
|
46
|
+
Component: L,
|
|
46
47
|
usePrepare: e,
|
|
47
|
-
title:
|
|
48
|
+
title: h
|
|
48
49
|
},
|
|
49
50
|
[r.TRANSACTION_DETAILS_ACTION_BLOCK]: {
|
|
50
|
-
Component:
|
|
51
|
-
usePrepare:
|
|
51
|
+
Component: I,
|
|
52
|
+
usePrepare: a,
|
|
52
53
|
title: () => "Transaction Details"
|
|
53
54
|
},
|
|
54
55
|
[r.RECURRING_TRANSACTION_ACTION_BLOCK]: {
|
|
55
|
-
Component:
|
|
56
|
-
usePrepare:
|
|
56
|
+
Component: d,
|
|
57
|
+
usePrepare: S,
|
|
57
58
|
title: (t, o) => o.recurring?.expense_details ?? ""
|
|
58
59
|
},
|
|
59
60
|
[r.CONTACT_SUPPORT_ACTION_BLOCK]: {
|
|
60
|
-
Component:
|
|
61
|
+
Component: i,
|
|
61
62
|
usePrepare: e,
|
|
62
63
|
title: (t, o) => o.help?.request_support ?? ""
|
|
64
|
+
},
|
|
65
|
+
[r.TRANSACTION_LIST_ACTION_BLOCK]: {
|
|
66
|
+
Component: g,
|
|
67
|
+
usePrepare: a,
|
|
68
|
+
title: (t, o, c) => c?.insights_payload?.title ?? ""
|
|
63
69
|
}
|
|
64
|
-
},
|
|
65
|
-
account_block:
|
|
66
|
-
account_switch_block:
|
|
67
|
-
bar_chart_block:
|
|
68
|
-
budget_block:
|
|
69
|
-
donut_chart_block:
|
|
70
|
-
double_bar_chart_block:
|
|
71
|
-
double_progress_bar_block:
|
|
72
|
-
image_block:
|
|
73
|
-
save_extra_block:
|
|
74
|
-
step_chart_block:
|
|
75
|
-
svg_image_block:
|
|
76
|
-
withdrawal_block:
|
|
77
|
-
transaction_block:
|
|
70
|
+
}, eo = {
|
|
71
|
+
account_block: s,
|
|
72
|
+
account_switch_block: k,
|
|
73
|
+
bar_chart_block: l,
|
|
74
|
+
budget_block: B,
|
|
75
|
+
donut_chart_block: p,
|
|
76
|
+
double_bar_chart_block: n,
|
|
77
|
+
double_progress_bar_block: _,
|
|
78
|
+
image_block: f,
|
|
79
|
+
save_extra_block: C,
|
|
80
|
+
step_chart_block: m,
|
|
81
|
+
svg_image_block: A,
|
|
82
|
+
withdrawal_block: u,
|
|
83
|
+
transaction_block: T
|
|
78
84
|
};
|
|
79
85
|
export {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
86
|
+
to as actionBlocks,
|
|
87
|
+
eo as blocks,
|
|
88
|
+
ro as hasDrawerBlock
|
|
83
89
|
};
|
|
84
90
|
|
|
85
91
|
//# sourceMappingURL=blocks.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"blocks.es.js","names":[],"sources":["../../../src/insights-v2/mappings/blocks.ts"],"sourcesContent":["import {\n AccountBlock,\n AccountSwitchBlock,\n BarchartBlock,\n BudgetBlock,\n DonutChartBlock,\n DoubleBarChartBlock,\n DoubleProgressBarBlock,\n SaveExtraBlock,\n SVGImageBlock,\n WithdrawalBlock,\n TransactionBlock,\n} from '../blocks'\nimport StepChartBlock from '../blocks/ChartBlocks/StepChartBlock'\nimport ImageBlock from '../blocks/ImageBlocks/ImageBlock'\n\nimport type { Beat, GlobalCopy, InsightsPayload } from '../../core'\nimport { ContactSupportActionBlock } from '../actionBlocks/ContactSupportActionBlock'\nimport { PlaceholderActionBlock } from '../actionBlocks/PlaceholderActionBlock'\nimport { MakeTransferActionBlockLayer } from '../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer'\nimport { getMakeTransferDrawerTitle } from '../actionBlocks/MakeTransferActionBlock/layout'\nimport { TransactionHistoryBlock } from '../actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock'\nimport { getDrawerHeaderTitle } from '../actionBlocks/TransactionHistoryBlock/utils'\nimport {\n TransactionDetailsBlock,\n useTransactionDetailsPrepare,\n} from '../actionBlocks/TransactionDetailsBlock'\nimport {\n RecurringTransactionBlock,\n useRecurringTransactionPrepare,\n} from '../actionBlocks/RecurringTransactionBlock'\n// Keys live in ./actionBlocksKey (imported directly by chart blocks/tests too) to avoid a\n// circular import between this module and the chart blocks — see that file for details.\nimport { actionBlocksKey } from './actionBlocksKey'\n\n// Drilldown indexes are not passed down: action blocks read them from\n// InsightsV2Store (useInsightsV2Store().actionDrawer).\nexport interface ActionBlockProps {\n beat: Beat\n}\n\nconst noop = (_: ActionBlockProps) => {}\n\n// A CTA opens a drawer only when it carries a real `block`. The backend may send\n// an empty/absent block (or the literal strings \"null\"/\"undefined\") for CTAs\n// that trigger something else (e.g. a postMessage) instead of a drilldown.\nconst NON_BLOCK_VALUES = new Set(['', 'null', 'undefined'])\nexport const hasDrawerBlock = (block?: string | null): boolean => {\n const normalized = block?.trim().toLowerCase()\n return !!normalized && !NON_BLOCK_VALUES.has(normalized)\n}\n\nexport interface ActionBlockEntry {\n Component: React.ComponentType<ActionBlockProps>\n usePrepare: (props: ActionBlockProps) => void // required; default to noop in each entry\n // Resolves the drawer title from the clicked CTA's variant + copy
|
|
1
|
+
{"version":3,"file":"blocks.es.js","names":[],"sources":["../../../src/insights-v2/mappings/blocks.ts"],"sourcesContent":["import {\n AccountBlock,\n AccountSwitchBlock,\n BarchartBlock,\n BudgetBlock,\n DonutChartBlock,\n DoubleBarChartBlock,\n DoubleProgressBarBlock,\n SaveExtraBlock,\n SVGImageBlock,\n WithdrawalBlock,\n TransactionBlock,\n} from '../blocks'\nimport StepChartBlock from '../blocks/ChartBlocks/StepChartBlock'\nimport ImageBlock from '../blocks/ImageBlocks/ImageBlock'\n\nimport type { Beat, GlobalCopy, InsightsPayload } from '../../core'\nimport { ContactSupportActionBlock } from '../actionBlocks/ContactSupportActionBlock'\nimport { PlaceholderActionBlock } from '../actionBlocks/PlaceholderActionBlock'\nimport { MakeTransferActionBlockLayer } from '../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer'\nimport { getMakeTransferDrawerTitle } from '../actionBlocks/MakeTransferActionBlock/layout'\nimport { TransactionHistoryBlock } from '../actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock'\nimport { getDrawerHeaderTitle } from '../actionBlocks/TransactionHistoryBlock/utils'\nimport {\n TransactionDetailsBlock,\n useTransactionDetailsPrepare,\n} from '../actionBlocks/TransactionDetailsBlock'\nimport {\n RecurringTransactionBlock,\n useRecurringTransactionPrepare,\n} from '../actionBlocks/RecurringTransactionBlock'\nimport { TransactionListBlock } from '../actionBlocks/TransactionListBlock'\n// Keys live in ./actionBlocksKey (imported directly by chart blocks/tests too) to avoid a\n// circular import between this module and the chart blocks — see that file for details.\nimport { actionBlocksKey } from './actionBlocksKey'\n\n// Drilldown indexes are not passed down: action blocks read them from\n// InsightsV2Store (useInsightsV2Store().actionDrawer).\nexport interface ActionBlockProps {\n beat: Beat\n}\n\nconst noop = (_: ActionBlockProps) => {}\n\n// A CTA opens a drawer only when it carries a real `block`. The backend may send\n// an empty/absent block (or the literal strings \"null\"/\"undefined\") for CTAs\n// that trigger something else (e.g. a postMessage) instead of a drilldown.\nconst NON_BLOCK_VALUES = new Set(['', 'null', 'undefined'])\nexport const hasDrawerBlock = (block?: string | null): boolean => {\n const normalized = block?.trim().toLowerCase()\n return !!normalized && !NON_BLOCK_VALUES.has(normalized)\n}\n\nexport interface ActionBlockEntry {\n Component: React.ComponentType<ActionBlockProps>\n usePrepare: (props: ActionBlockProps) => void // required; default to noop in each entry\n // Resolves the drawer title from the clicked CTA's variant + copy, with the beat available\n // for blocks that title from beat fields (e.g. transaction-list reads insights_payload.title).\n // Falls back to the CTA label when the resolver returns an empty string / is absent.\n title?: (variant: string | null | undefined, copy: GlobalCopy, beat?: Beat) => string\n}\n\n// Registry of drawer drilldowns, keyed by the `block` name the backend sends\n// on a beat's CTA. To add one: create a component taking ActionBlockProps,\n// read the clicked indexes from useInsightsV2Store().actionDrawer, and\n// register it here. Add\n// `usePrepare` when the block needs to load data before rendering.\n\nexport const actionBlocks = {\n [actionBlocksKey.PLACEHOLDER_ACTION_BLOCK]: {\n Component: PlaceholderActionBlock,\n usePrepare: noop,\n title: () => 'Action Block Layer Drilldown',\n },\n [actionBlocksKey.MAKE_TRANSFER_ACTION_BLOCK]: {\n Component: MakeTransferActionBlockLayer,\n usePrepare: noop,\n title: getMakeTransferDrawerTitle,\n },\n [actionBlocksKey.TRANSCATION_HISTORY_ACTION_BLOCK]: {\n Component: TransactionHistoryBlock,\n usePrepare: noop,\n title: getDrawerHeaderTitle,\n },\n [actionBlocksKey.TRANSACTION_DETAILS_ACTION_BLOCK]: {\n Component: TransactionDetailsBlock,\n usePrepare: useTransactionDetailsPrepare,\n title: () => 'Transaction Details',\n },\n // Expense Details for one recurring subscription. Which subscription a beat names is resolved in\n // `RecurringTransactionBlock/subscriptionBeats.ts`, not through this registry.\n [actionBlocksKey.RECURRING_TRANSACTION_ACTION_BLOCK]: {\n Component: RecurringTransactionBlock,\n usePrepare: useRecurringTransactionPrepare,\n title: (_variant, copy) => copy.recurring?.expense_details ?? '',\n },\n // The block renders its own drawer (the help module's RequestSupport) on top of the action\n // drawer, so the action drawer's title is the CTA label.\n [actionBlocksKey.CONTACT_SUPPORT_ACTION_BLOCK]: {\n Component: ContactSupportActionBlock,\n usePrepare: noop,\n title: (_variant, copy) => copy.help?.request_support ?? '',\n },\n [actionBlocksKey.TRANSACTION_LIST_ACTION_BLOCK]: {\n Component: TransactionListBlock,\n usePrepare: useTransactionDetailsPrepare,\n title: (_variant, _copy, beat) => beat?.insights_payload?.title ?? '',\n },\n} as Record<string, ActionBlockEntry>\n\nexport const blocks = {\n account_block: AccountBlock,\n account_switch_block: AccountSwitchBlock,\n bar_chart_block: BarchartBlock,\n budget_block: BudgetBlock,\n donut_chart_block: DonutChartBlock,\n double_bar_chart_block: DoubleBarChartBlock,\n double_progress_bar_block: DoubleProgressBarBlock,\n image_block: ImageBlock,\n save_extra_block: SaveExtraBlock,\n step_chart_block: StepChartBlock,\n svg_image_block: SVGImageBlock,\n withdrawal_block: WithdrawalBlock,\n transaction_block: TransactionBlock,\n} as Record<string, React.ComponentType<{ payload: InsightsPayload; beatGuid?: string }>>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAM,IAAA,CAAQ,MAAwB;AAAC,GAKjC,IAAmB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAI;AAAA,EAAQ;AAAW,CAAC,GAC7C,KAAA,CAAkB,MAAmC;AAChE,QAAM,IAAa,GAAO,KAAK,EAAE,YAAY;AAC7C,SAAO,CAAC,CAAC,KAAc,CAAC,EAAiB,IAAI,CAAU;AACzD,GAiBa,KAAe;AAAA,EACzB,CAAA,EAAgB,wBAAA,GAA2B;AAAA,IAC1C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EACC,CAAA,EAAgB,0BAAA,GAA6B;AAAA,IAC5C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACC,CAAA,EAAgB,gCAAA,GAAmC;AAAA,IAClD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACC,CAAA,EAAgB,gCAAA,GAAmC;AAAA,IAClD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EAGC,CAAA,EAAgB,kCAAA,GAAqC;AAAA,IACpD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAAS,EAAK,WAAW,mBAAmB;AAAA,EAChE;AAAA,EAGC,CAAA,EAAgB,4BAAA,GAA+B;AAAA,IAC9C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAAS,EAAK,MAAM,mBAAmB;AAAA,EAC3D;AAAA,EACC,CAAA,EAAgB,6BAAA,GAAgC;AAAA,IAC/C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,GAAO,MAAS,GAAM,kBAAkB,SAAS;AAAA,EACrE;AACF,GAEa,KAAS;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB"}
|
|
@@ -2,10 +2,10 @@ import { useEvent as z, useTransactionStore as N } from "../../../common/context
|
|
|
2
2
|
import { ANALYTICS_EVENTS as O } from "../../../common/constants/Analytics.es.js";
|
|
3
3
|
import { fromUnixUTCToDayOfWeekAndDate as H } from "../../../core/utils/DateUtil.es.js";
|
|
4
4
|
import U from "../../../common/components/Loader.es.js";
|
|
5
|
-
import
|
|
6
|
-
import W from "
|
|
7
|
-
import j from "
|
|
8
|
-
import w from "
|
|
5
|
+
import k from "../../../common/components/ZeroState.es.js";
|
|
6
|
+
import { useTransactionsUiStore as W } from "../../context/hooks.es.js";
|
|
7
|
+
import j from "./transactionlist/TransactionRow.es.js";
|
|
8
|
+
import w from "../../../common/components/SubheaderRow.es.js";
|
|
9
9
|
import { hasInsetBorder as B, shouldShowDate as T } from "../../utils/Transactions.es.js";
|
|
10
10
|
import i from "react";
|
|
11
11
|
import { observer as G } from "mobx-react-lite";
|
|
@@ -17,7 +17,7 @@ import { useVirtualizer as K } from "@tanstack/react-virtual";
|
|
|
17
17
|
var _ = 65, v = 32, M = ({ bgcolor: x, filter: s, height: E = "calc(100dvh - 36px)", loader: I = /* @__PURE__ */ o(U, {
|
|
18
18
|
label: "Loading",
|
|
19
19
|
size: 40
|
|
20
|
-
}), onClick: f, showInsights: d = !1, showLoader: l = !1, transaction: p, width: g = "100%", zeroState: A = /* @__PURE__ */ o(
|
|
20
|
+
}), onClick: f, showInsights: d = !1, showLoader: l = !1, transaction: p, width: g = "100%", zeroState: A = /* @__PURE__ */ o(k, {}) }) => {
|
|
21
21
|
const { isLoading: c, sortedTransactions: m } = N(), e = i.useMemo(() => {
|
|
22
22
|
const t = s ? m.filter(s) : m;
|
|
23
23
|
return p ?? t;
|
|
@@ -25,7 +25,7 @@ var _ = 65, v = 32, M = ({ bgcolor: x, filter: s, height: E = "calc(100dvh - 36p
|
|
|
25
25
|
m,
|
|
26
26
|
s,
|
|
27
27
|
p
|
|
28
|
-
]), { clearExpandedSplits: C, setShowInsights: R, toggleSplit: b } =
|
|
28
|
+
]), { clearExpandedSplits: C, setShowInsights: R, toggleSplit: b } = W(), { onEvent: D } = z(), L = (t) => {
|
|
29
29
|
const r = e.find((a) => a.guid === t);
|
|
30
30
|
if (r?.has_been_split) {
|
|
31
31
|
b(r.guid);
|
|
@@ -71,11 +71,11 @@ 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(w, {
|
|
75
75
|
bgcolor: x,
|
|
76
76
|
children: H(r.date)
|
|
77
77
|
}),
|
|
78
|
-
/* @__PURE__ */ o(
|
|
78
|
+
/* @__PURE__ */ o(j, {
|
|
79
79
|
component: "div",
|
|
80
80
|
...f && { onClick: L },
|
|
81
81
|
transaction: r
|
|
@@ -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 } 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'\
|
|
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,IAelB,IAAA,CAAmD,EACvD,SAAA,GACA,QAAA,GACA,QAAA,IAAS,uBACT,QAAA,IAAS,gBAAA,EAAC,GAAD;AAAA,EAAQ,OAAM;AAAA,EAAU,MAAM;AAAK,CAAA,GAC5C,SAAA,GACA,cAAA,IAAe,IACf,YAAA,IAAa,IACb,aAAA,GACA,OAAA,IAAQ,QACR,WAAA,IAAY,gBAAA,EAAC,GAAD,CAAY,CAAA,EAAA,MACpB;AACJ,QAAM,EAAE,WAAA,GAAW,oBAAoB,EAAA,IAAoB,EAAoB,GACzE,IAAe,EAAM,QAAA,MAAc;AACvC,UAAM,IAAsB,IAAS,EAAgB,OAAO,CAAM,IAAI;AACtE,WAAO,KAAe;AAAA,EACxB,GAAG;AAAA,IAAC;AAAA,IAAiB;AAAA,IAAQ;AAAA,EAAW,CAAC,GAEnC,EAAE,qBAAA,GAAqB,iBAAA,GAAiB,aAAA,EAAA,IAAgB,EAAuB,GAC/E,EAAE,SAAA,EAAA,IAAY,EAAS,GAEvB,IAAA,CAAe,MAAiB;AACpC,UAAM,IAAc,EAAa,KAAA,CAAM,MAAM,EAAE,SAAS,CAAI;AAE5D,QAAI,GAAa,gBAAgB;AAC/B,MAAA,EAAY,EAAY,IAAI;AAC5B;AAAA,IACF;AAEA,IAAA,EAAQ,EAAiB,mCAAmC;AAAA,MAC1D,cAAc,GAAa;AAAA,MAC3B,kBAAkB;AAAA,IACpB,CAAC,GACD,IAAU,CAAI;AAAA,EAChB,GAEM,IAAY,EAAM,OAAuB,IAAI,GAC7C,IAAiB,EAAe;AAAA,IACpC,OAAO,EAAa;AAAA,IACpB,kBAAA,MAAwB,EAAU;AAAA,IAClC,cAAA,CAAe,MAAM,KAAc,EAAe,GAAG,CAAY,IAAI,IAAkB;AAAA,IACvF,UAAU;AAAA,EACZ,CAAC;AAED,SAAA,EAAM,UAAA,MAAgB,EAAe,QAAQ,GAAG,CAAC,CAAY,CAAC,GAC9D,EAAM,UAAA,MAAgB,EAAgB,CAAY,GAAG,CAAC,CAAY,CAAC,GAEnE,EAAM,UAAA,MACJ,MAAa,EAAoB,GAChC,CAAC,CAAC,GAGH,gBAAA,EAAC,GAAD;AAAA,IAAM,WAAU;AAAA,IAAM,MAAK;AAAA,IAAO,IAAI,EAAS,OAAA,EAAM;AAAA,IACnD,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAa,QAAA;AAAA,MAAQ,UAAS;AAAA,MAAO,KAAK;AAAA,MAAW,MAAK;AAAA,MAAsB,OAAA;AAAA,MAC9E,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,QAEE,EAAe,gBAAgB,EAAE,WAAW,IAAI,SAAS,EAAe,aAAa;AAAA,QAEvF,UAAS;AAAA,QACT,MAAK;AAAA,QACL,OAAM;AAAA,QAPR,UAAA;AAAA,WASI,KAAa,MAAe;AAAA,UAC7B,CAAC,KAAa,CAAC,KAAc,EAAe,gBAAgB,EAAE,WAAW,KAAK;AAAA,UAC9E,CAAC,KACA,CAAC,KACD,EAAe,gBAAgB,EAAE,SAAS,KAC1C,EAAe,gBAAgB,EAAE,IAAA,CAAK,MAAQ;AAC5C,kBAAM,IAAc,EAAa,EAAI,KAAA,GAC/B,IAAW,EAAe,EAAI,OAAO,CAAY,GACjD,IAAU,EAAe,EAAI,OAAO,CAAY;AAGtD,mBACE,gBAAA,EAAC,GAAD;AAAA,cAEE,MAAK;AAAA,cACL,IAAI;AAAA,gBACF,QAPY,KAAc,IAAW,IAAkB;AAAA,gBAQvD,UAAU;AAAA,gBACV,WAAW,cAAc,EAAI,KAAA;AAAA,gBAC7B,OAAO;AAAA,gBACP,SAAS;AAAA,cACX;AAAA,cATF,UAAA;AAAA,gBAWG,KACC,gBAAA,EAAC,GAAD;AAAA,kBAAuB,SAAA;AAAA,kBACpB,UAAA,EAA8B,EAAY,IAAI;AAAA,gBACnC,CAAA;AAAA,gBAEhB,gBAAA,EAAC,GAAD;AAAA,kBACE,WAAU;AAAA,kBACV,GAAK,KAAW,EAAE,SAAS,EAAY;AAAA,kBAC1B,aAAA;AAAA,gBACd,CAAA;AAAA,gBACD,gBAAA,EAAC,GAAD,EAAS,IAAI,EAAE,IAAI,IAAU,KAAK,EAAE,EAAI,CAAA;AAAA,cACrC;AAAA,YArBE,GAAA,EAAY,IAqBd;AAAA,UAET,CAAC;AAAA,QACA;AAAA;IACF,CAAA;AAAA,EACD,CAAA;AAEV,GAEA,KAAe,EAAS,CAAe"}
|
|
@@ -1,42 +1,46 @@
|
|
|
1
|
-
import { CategoryGuidToName as
|
|
2
|
-
import { useEvent as
|
|
1
|
+
import { CategoryGuidToName as g } from "../../../core/constants/Category.es.js";
|
|
2
|
+
import { useEvent as f } from "../../../common/context/hooks.es.js";
|
|
3
3
|
import { ANALYTICS_EVENTS as b } from "../../../common/constants/Analytics.es.js";
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
4
|
+
import p from "../../../common/components/ZeroState.es.js";
|
|
5
|
+
import { TRENDS_ANALYTICS_METADATA as T } from "../../constants/TrendsWidget.es.js";
|
|
6
|
+
import { AccessibleSortIcon as y } from "./AccessibleSortIcon.es.js";
|
|
7
|
+
import { jsx as d } from "react/jsx-runtime";
|
|
7
8
|
import { useTheme as _ } from "@mui/material/styles";
|
|
8
|
-
import { DataGridPro as
|
|
9
|
-
var t = (
|
|
10
|
-
const
|
|
11
|
-
t(
|
|
12
|
-
...
|
|
13
|
-
listItem:
|
|
14
|
-
destination:
|
|
9
|
+
import { DataGridPro as v } from "@mui/x-data-grid-pro";
|
|
10
|
+
var S = () => /* @__PURE__ */ d(p, {}), t = (r) => r.id !== "total" && !r.isParent, M = ({ columns: r, onRowClick: i, rows: a, totalRow: n }) => {
|
|
11
|
+
const u = _(), { onEvent: c } = f(), s = u.palette.mode === "light", m = !!i, l = (e) => {
|
|
12
|
+
t(e) && (i?.(e.category_guid), c(b.TRENDS_CLICK_LIST_ITEM, {
|
|
13
|
+
...T,
|
|
14
|
+
listItem: g[e.category_guid] ?? e.category,
|
|
15
|
+
destination: e.top_level_category_guid === e.category_guid ? "drill_down" : "drawer"
|
|
15
16
|
}));
|
|
16
17
|
};
|
|
17
|
-
return /* @__PURE__ */
|
|
18
|
+
return /* @__PURE__ */ d(v, {
|
|
18
19
|
autoHeight: !0,
|
|
19
|
-
columns:
|
|
20
|
+
columns: r,
|
|
20
21
|
disableColumnFilter: !0,
|
|
21
22
|
disableColumnMenu: !0,
|
|
22
|
-
getRowClassName: (
|
|
23
|
+
getRowClassName: (e) => t(e.row) ? "" : "trends-row-static",
|
|
23
24
|
hideFooter: !0,
|
|
24
25
|
initialState: { sorting: { sortModel: [{
|
|
25
26
|
field: "category",
|
|
26
27
|
sort: "asc"
|
|
27
28
|
}] } },
|
|
28
|
-
onCellKeyDown: (
|
|
29
|
-
o.key !== "Enter" && o.key !== " " || t(
|
|
29
|
+
onCellKeyDown: (e, o) => {
|
|
30
|
+
o.key !== "Enter" && o.key !== " " || t(e.row) && (o.preventDefault(), l(e.row));
|
|
30
31
|
},
|
|
31
|
-
onRowClick: (
|
|
32
|
-
pinnedRows: { bottom: a ? [
|
|
32
|
+
onRowClick: (e) => l(e.row),
|
|
33
|
+
pinnedRows: { bottom: n && a.length > 0 ? [n] : [] },
|
|
33
34
|
rowHeight: 64,
|
|
34
|
-
rows:
|
|
35
|
+
rows: a,
|
|
35
36
|
slotProps: { baseIconButton: {
|
|
36
37
|
color: "secondary",
|
|
37
38
|
sx: { ml: 8 }
|
|
38
39
|
} },
|
|
39
|
-
slots: {
|
|
40
|
+
slots: {
|
|
41
|
+
columnHeaderSortIcon: y,
|
|
42
|
+
noRowsOverlay: S
|
|
43
|
+
},
|
|
40
44
|
sortingOrder: ["asc", "desc"],
|
|
41
45
|
sx: {
|
|
42
46
|
borderColor: "divider",
|
|
@@ -44,17 +48,17 @@ var t = (e) => e.id !== "total" && !e.isParent, D = ({ columns: e, onRowClick: i
|
|
|
44
48
|
borderStyle: "solid",
|
|
45
49
|
borderRadius: 2,
|
|
46
50
|
"& .MuiDataGrid-columnHeaders": {
|
|
47
|
-
bgcolor:
|
|
51
|
+
bgcolor: s ? "neutral.50" : "neutral.800",
|
|
48
52
|
borderBottom: "none"
|
|
49
53
|
},
|
|
50
|
-
"& .trends-table-header": { bgcolor:
|
|
51
|
-
"& .MuiDataGrid-row": { cursor:
|
|
54
|
+
"& .trends-table-header": { bgcolor: s ? "neutral.50" : "neutral.800" },
|
|
55
|
+
"& .MuiDataGrid-row": { cursor: m ? "pointer" : "default" },
|
|
52
56
|
"& .trends-row-static": { cursor: "default" }
|
|
53
57
|
}
|
|
54
58
|
});
|
|
55
59
|
};
|
|
56
60
|
export {
|
|
57
|
-
|
|
61
|
+
M as TrendsTable
|
|
58
62
|
};
|
|
59
63
|
|
|
60
64
|
//# sourceMappingURL=TrendsTable.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TrendsTable.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/TrendsTable.tsx"],"sourcesContent":["import { ANALYTICS_EVENTS, useEvent } from '../../../common'\nimport { CategoryGuidToName } from '../../../core/constants'\nimport { TRENDS_ANALYTICS_METADATA } from '../../constants/TrendsWidget'\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\nimport { useTheme } from '@mui/material/styles'\nimport { TrendsTableRow } from '../../utils/TrendsTable'\nimport { AccessibleSortIcon } from './AccessibleSortIcon'\n\ninterface TrendsTableProps {\n columns: GridColDef[]\n onRowClick?: (category: string) => void\n rows: TrendsTableRow[]\n totalRow?: TrendsTableRow\n}\n\n// The pinned total row and the synthetic \"General [Parent]\" row (isParent: true,\n// only present in a drilled-in table) are summaries, not navigation destinations.\nconst isRowNavigable = (row: TrendsTableRow) => row.id !== 'total' && !row.isParent\n\nexport const TrendsTable = ({ columns, onRowClick, rows, totalRow }: TrendsTableProps) => {\n const theme = useTheme()\n const { onEvent } = useEvent()\n const isLightMode = theme.palette.mode === 'light'\n const isRowInteractive = Boolean(onRowClick)\n\n // Shared by pointer and keyboard activation; non-navigable rows are dropped so\n // neither path acts on them.\n const activateRow = (row: TrendsTableRow) => {\n if (!isRowNavigable(row)) return\n onRowClick?.(row.category_guid)\n onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_LIST_ITEM, {\n ...TRENDS_ANALYTICS_METADATA,\n // Fall back to the row's display name for user-created categories, which\n // are absent from the static default-category map.\n listItem: CategoryGuidToName[row.category_guid] ?? row.category,\n // A top-level row (guid is its own top level) drills down; a sub-category\n // row opens the drawer.\n destination: row.top_level_category_guid === row.category_guid ? 'drill_down' : 'drawer',\n })\n }\n\n return (\n <DataGridPro\n // autoHeight sizes the grid to its content instead of measuring a flex\n // parent. The parent is an overflow:auto Stack with no fixed height, so the\n // default virtualized layout makes x-data-grid's useGridDimensions loop on\n // its own ResizeObserver measurement (a feedback loop that spikes to React's\n // \"Maximum update depth exceeded\" under a starved CI worker in jsdom). Content\n // sizing removes the measurement feedback and is correct for this unbounded,\n // page-scrolling table.\n autoHeight={true}\n columns={columns}\n disableColumnFilter={true}\n disableColumnMenu={true}\n getRowClassName={(params) => (isRowNavigable(params.row) ? '' : 'trends-row-static')}\n hideFooter={true}\n initialState={{ sorting: { sortModel: [{ field: 'category', sort: 'asc' }] } }}\n onCellKeyDown={(params, event) => {\n // Rows are reachable only by grid cell navigation, so Enter/Space on a\n // cell is the keyboard equivalent of clicking the row. Guard before\n // preventDefault so a non-navigable row keeps the grid's native key\n // handling instead of being swallowed with no action. Space would\n // otherwise scroll the grid.\n if (event.key !== 'Enter' && event.key !== ' ') return\n if (!isRowNavigable(params.row)) return\n event.preventDefault()\n activateRow(params.row)\n }}\n onRowClick={(r) => activateRow(r.row)}\n pinnedRows={{\n bottom: totalRow ? [totalRow] : [],\n }}\n rowHeight={64}\n rows={rows}\n slotProps={{ baseIconButton: { color: 'secondary', sx: { ml: 8 } } }}\n slots={{
|
|
1
|
+
{"version":3,"file":"TrendsTable.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/TrendsTable.tsx"],"sourcesContent":["import { ANALYTICS_EVENTS, useEvent, ZeroState } from '../../../common'\nimport { CategoryGuidToName } from '../../../core/constants'\nimport { TRENDS_ANALYTICS_METADATA } from '../../constants/TrendsWidget'\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\nimport { useTheme } from '@mui/material/styles'\nimport { TrendsTableRow } from '../../utils/TrendsTable'\nimport { AccessibleSortIcon } from './AccessibleSortIcon'\n\n// The grid's default no-rows overlay is a bare \"No rows\". Render the same shared\n// zero state the app's other empty lists use instead. Wrapped because the\n// slot's prop type doesn't match ZeroState's; positioning is handled by the\n// grid's own overlay wrapper.\nconst TrendsTableNoRowsOverlay = () => <ZeroState />\n\ninterface TrendsTableProps {\n columns: GridColDef[]\n onRowClick?: (category: string) => void\n rows: TrendsTableRow[]\n totalRow?: TrendsTableRow\n}\n\n// The pinned total row and the synthetic \"General [Parent]\" row (isParent: true,\n// only present in a drilled-in table) are summaries, not navigation destinations.\nconst isRowNavigable = (row: TrendsTableRow) => row.id !== 'total' && !row.isParent\n\nexport const TrendsTable = ({ columns, onRowClick, rows, totalRow }: TrendsTableProps) => {\n const theme = useTheme()\n const { onEvent } = useEvent()\n const isLightMode = theme.palette.mode === 'light'\n const isRowInteractive = Boolean(onRowClick)\n\n // Shared by pointer and keyboard activation; non-navigable rows are dropped so\n // neither path acts on them.\n const activateRow = (row: TrendsTableRow) => {\n if (!isRowNavigable(row)) return\n onRowClick?.(row.category_guid)\n onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_LIST_ITEM, {\n ...TRENDS_ANALYTICS_METADATA,\n // Fall back to the row's display name for user-created categories, which\n // are absent from the static default-category map.\n listItem: CategoryGuidToName[row.category_guid] ?? row.category,\n // A top-level row (guid is its own top level) drills down; a sub-category\n // row opens the drawer.\n destination: row.top_level_category_guid === row.category_guid ? 'drill_down' : 'drawer',\n })\n }\n\n return (\n <DataGridPro\n // autoHeight sizes the grid to its content instead of measuring a flex\n // parent. The parent is an overflow:auto Stack with no fixed height, so the\n // default virtualized layout makes x-data-grid's useGridDimensions loop on\n // its own ResizeObserver measurement (a feedback loop that spikes to React's\n // \"Maximum update depth exceeded\" under a starved CI worker in jsdom). Content\n // sizing removes the measurement feedback and is correct for this unbounded,\n // page-scrolling table.\n autoHeight={true}\n columns={columns}\n disableColumnFilter={true}\n disableColumnMenu={true}\n getRowClassName={(params) => (isRowNavigable(params.row) ? '' : 'trends-row-static')}\n hideFooter={true}\n initialState={{ sorting: { sortModel: [{ field: 'category', sort: 'asc' }] } }}\n onCellKeyDown={(params, event) => {\n // Rows are reachable only by grid cell navigation, so Enter/Space on a\n // cell is the keyboard equivalent of clicking the row. Guard before\n // preventDefault so a non-navigable row keeps the grid's native key\n // handling instead of being swallowed with no action. Space would\n // otherwise scroll the grid.\n if (event.key !== 'Enter' && event.key !== ' ') return\n if (!isRowNavigable(params.row)) return\n event.preventDefault()\n activateRow(params.row)\n }}\n onRowClick={(r) => activateRow(r.row)}\n pinnedRows={{\n // A pinned \"Total $0.00\" is meaningless with no rows above it, and while it\n // is present the grid suppresses the no-rows overlay entirely. Drop it so the\n // empty table shows the zero state instead.\n bottom: totalRow && rows.length > 0 ? [totalRow] : [],\n }}\n rowHeight={64}\n rows={rows}\n slotProps={{ baseIconButton: { color: 'secondary', sx: { ml: 8 } } }}\n slots={{\n columnHeaderSortIcon: AccessibleSortIcon,\n noRowsOverlay: TrendsTableNoRowsOverlay,\n }}\n sortingOrder={['asc', 'desc']}\n sx={{\n borderColor: 'divider',\n borderWidth: 1,\n borderStyle: 'solid',\n borderRadius: 2,\n '& .MuiDataGrid-columnHeaders': {\n bgcolor: isLightMode ? 'neutral.50' : 'neutral.800',\n borderBottom: 'none',\n },\n '& .trends-table-header': {\n bgcolor: isLightMode ? 'neutral.50' : 'neutral.800',\n },\n '& .MuiDataGrid-row': { cursor: isRowInteractive ? 'pointer' : 'default' },\n // getRowClassName stamps trends-row-static on every non-navigable row,\n // including the pinned total row.\n '& .trends-row-static': { cursor: 'default' },\n }}\n />\n )\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,IAAA,MAAiC,gBAAA,EAAC,GAAD,CAAY,CAAA,GAW7C,IAAA,CAAkB,MAAwB,EAAI,OAAO,WAAW,CAAC,EAAI,UAE9D,IAAA,CAAe,EAAE,SAAA,GAAS,YAAA,GAAY,MAAA,GAAM,UAAA,EAAA,MAAiC;AACxF,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,IAAc,EAAM,QAAQ,SAAS,SACrC,IAAmB,EAAQ,GAI3B,IAAA,CAAe,MAAwB;AAC3C,IAAK,EAAe,CAAG,MACvB,IAAa,EAAI,aAAa,GAC9B,EAAQ,EAAiB,wBAAwB;AAAA,MAC/C,GAAG;AAAA,MAGH,UAAU,EAAmB,EAAI,aAAA,KAAkB,EAAI;AAAA,MAGvD,aAAa,EAAI,4BAA4B,EAAI,gBAAgB,eAAe;AAAA,IAClF,CAAC;AAAA,EACH;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAQE,YAAY;AAAA,IACH,SAAA;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,iBAAA,CAAkB,MAAY,EAAe,EAAO,GAAG,IAAI,KAAK;AAAA,IAChE,YAAY;AAAA,IACZ,cAAc,EAAE,SAAS,EAAE,WAAW,CAAC;AAAA,MAAE,OAAO;AAAA,MAAY,MAAM;AAAA,IAAM,CAAC,EAAE,EAAE;AAAA,IAC7E,eAAA,CAAgB,GAAQ,MAAU;AAMhC,MAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,OACtC,EAAe,EAAO,GAAG,MAC9B,EAAM,eAAe,GACrB,EAAY,EAAO,GAAG;AAAA,IACxB;AAAA,IACA,YAAA,CAAa,MAAM,EAAY,EAAE,GAAG;AAAA,IACpC,YAAY,EAIV,QAAQ,KAAY,EAAK,SAAS,IAAI,CAAC,CAAQ,IAAI,CAAC,EACtD;AAAA,IACA,WAAW;AAAA,IACL,MAAA;AAAA,IACN,WAAW,EAAE,gBAAgB;AAAA,MAAE,OAAO;AAAA,MAAa,IAAI,EAAE,IAAI,EAAE;AAAA,IAAE,EAAE;AAAA,IACnE,OAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,eAAe;AAAA,IACjB;AAAA,IACA,cAAc,CAAC,OAAO,MAAM;AAAA,IAC5B,IAAI;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gCAAgC;AAAA,QAC9B,SAAS,IAAc,eAAe;AAAA,QACtC,cAAc;AAAA,MAChB;AAAA,MACA,0BAA0B,EACxB,SAAS,IAAc,eAAe,cACxC;AAAA,MACA,sBAAsB,EAAE,QAAQ,IAAmB,YAAY,UAAU;AAAA,MAGzE,wBAAwB,EAAE,QAAQ,UAAU;AAAA,IAC9C;AAAA,EACD,CAAA;AAEL"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ZeroState.es.js","names":[],"sources":["../../../../../src/transactions/components/shared/transactionlist/ZeroState.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { Receipt as ReceiptOutlinedIcon } from '@mxenabled/mx-icons'\n\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../../../common'\n\ninterface ZeroStateProps {\n showIcon?: boolean\n showSubtitle?: boolean\n}\n\nconst ZeroState: React.FC<ZeroStateProps> = ({ showIcon = true, showSubtitle = true }) => {\n const { transactions: copy } = useGlobalCopyStore()\n\n return (\n <Stack alignItems=\"center\" gap={12} height=\"auto\" mb={24} mt={24}>\n {showIcon && <ReceiptOutlinedIcon color=\"action\" sx={{ fontSize: 32 }} />}\n <Text bold={true} color=\"text.secondary\" variant=\"body2\">\n {copy.zero_state_no_transactions}\n </Text>\n {showSubtitle && (\n <Text color=\"text.secondary\" variant=\"caption\">\n {copy.zero_state_there_are_no_transactions}\n </Text>\n )}\n </Stack>\n )\n}\n\nexport default observer(ZeroState)\n"],"mappings":";;;;;;;AAgBA,IAAM,IAAA,CAAuC,EAAE,UAAA,IAAW,IAAM,cAAA,IAAe,GAAA,MAAW;AACxF,QAAM,EAAE,cAAc,EAAA,IAAS,EAAmB;AAElD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,KAAK;AAAA,IAAI,QAAO;AAAA,IAAO,IAAI;AAAA,IAAI,IAAI;AAAA,IAA9D,UAAA;AAAA,MACG,KAAY,gBAAA,EAAC,GAAD;AAAA,QAAqB,OAAM;AAAA,QAAS,IAAI,EAAE,UAAU,GAAG;AAAA,MAAI,CAAA;AAAA,MACxE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,QAC9C,UAAA,EAAK;AAAA,MACF,CAAA;AAAA,MACL,KACC,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,QAClC,UAAA,EAAK;AAAA,MACF,CAAA;AAAA,IAEH;AAAA;AAEX,GAEA,IAAe,EAAS,CAAS"}
|
/package/dist/{transactions/components/shared/transactionlist → common/components}/ZeroState.d.ts
RENAMED
|
File without changes
|