@mx-cartographer/experiences 9.4.59 → 9.4.60
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 +34 -1
- package/dist/core/api/BeatApi.d.ts +6 -0
- package/dist/core/api/BeatApi.es.js +1 -1
- package/dist/core/api/BeatApi.es.js.map +1 -1
- package/dist/core/stores/CategoryStore.d.ts +7 -0
- package/dist/core/stores/CategoryStore.es.js +18 -7
- package/dist/core/stores/CategoryStore.es.js.map +1 -1
- package/dist/core/types/Beat.d.ts +6 -0
- package/dist/core/types/Beat.es.js.map +1 -1
- package/dist/core/types/Insights.d.ts +127 -5
- package/dist/core/types/InsightsInstanceSlotData.d.ts +1 -13
- package/dist/core/types/InsightsInstanceSlotData.es.js.map +1 -1
- package/dist/core/types/index.d.ts +1 -2
- package/dist/insights-v2/actionBlocks/ContactSupportActionBlock.d.ts +31 -0
- package/dist/insights-v2/actionBlocks/ContactSupportActionBlock.es.js +22 -0
- package/dist/insights-v2/actionBlocks/ContactSupportActionBlock.es.js.map +1 -0
- package/dist/insights-v2/actionBlocks/TransactionDetailsBlock/useTransactionDetailsBlock.d.ts +10 -9
- package/dist/insights-v2/actionBlocks/TransactionDetailsBlock/useTransactionDetailsBlock.es.js +7 -7
- package/dist/insights-v2/actionBlocks/TransactionDetailsBlock/useTransactionDetailsBlock.es.js.map +1 -1
- package/dist/insights-v2/beatActions.d.ts +7 -0
- package/dist/insights-v2/beatActions.es.js.map +1 -1
- package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js +8 -8
- package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.d.ts +30 -3
- package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js +67 -24
- package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js.map +1 -1
- package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/index.d.ts +1 -1
- package/dist/insights-v2/components/BadgedTile.d.ts +22 -0
- package/dist/insights-v2/components/BadgedTile.es.js +46 -0
- package/dist/insights-v2/components/BadgedTile.es.js.map +1 -0
- package/dist/insights-v2/components/BaseLayout.es.js +113 -92
- package/dist/insights-v2/components/BaseLayout.es.js.map +1 -1
- package/dist/insights-v2/components/CompactInsightCard.d.ts +31 -0
- package/dist/insights-v2/components/CompactInsightCard.es.js +129 -0
- package/dist/insights-v2/components/CompactInsightCard.es.js.map +1 -0
- package/dist/insights-v2/components/Footer.d.ts +1 -4
- package/dist/insights-v2/components/Footer.es.js +30 -21
- package/dist/insights-v2/components/Footer.es.js.map +1 -1
- package/dist/insights-v2/components/Header.es.js +10 -10
- package/dist/insights-v2/components/Header.es.js.map +1 -1
- package/dist/insights-v2/components/InsightErrorCard.d.ts +19 -0
- package/dist/insights-v2/components/InsightErrorCard.es.js +45 -0
- package/dist/insights-v2/components/InsightErrorCard.es.js.map +1 -0
- package/dist/insights-v2/components/InsightTransactionRow.es.js +19 -15
- package/dist/insights-v2/components/InsightTransactionRow.es.js.map +1 -1
- package/dist/insights-v2/components/LogoFromGuid.d.ts +26 -0
- package/dist/insights-v2/components/LogoFromGuid.es.js +48 -0
- package/dist/insights-v2/components/LogoFromGuid.es.js.map +1 -0
- package/dist/insights-v2/components/StatusBadge.d.ts +16 -0
- package/dist/insights-v2/components/StatusBadge.es.js +29 -0
- package/dist/insights-v2/components/StatusBadge.es.js.map +1 -0
- package/dist/insights-v2/components/StatusPill.d.ts +11 -2
- package/dist/insights-v2/components/StatusPill.es.js +25 -13
- package/dist/insights-v2/components/StatusPill.es.js.map +1 -1
- package/dist/insights-v2/components/SubHeader.es.js +7 -5
- package/dist/insights-v2/components/SubHeader.es.js.map +1 -1
- package/dist/insights-v2/components/TransactionListCard.es.js +11 -11
- package/dist/insights-v2/components/TransactionListCard.es.js.map +1 -1
- package/dist/insights-v2/components/shared/EntityLogo.d.ts +26 -0
- package/dist/insights-v2/components/shared/EntityLogo.es.js +33 -0
- package/dist/insights-v2/components/shared/EntityLogo.es.js.map +1 -0
- package/dist/insights-v2/index.d.ts +6 -0
- package/dist/insights-v2/index.es.js +95 -81
- 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.es.js +50 -44
- package/dist/insights-v2/mappings/blocks.es.js.map +1 -1
- package/dist/insights-v2/resolveInsightRender.d.ts +30 -0
- package/dist/insights-v2/resolveInsightRender.es.js +10 -0
- package/dist/insights-v2/resolveInsightRender.es.js.map +1 -0
- package/dist/microinsights/cards/InsightCard.es.js +83 -39
- package/dist/microinsights/cards/InsightCard.es.js.map +1 -1
- package/dist/microinsights/carousel/BeatList.es.js +24 -24
- package/dist/microinsights/carousel/BeatList.es.js.map +1 -1
- package/dist/notifications/components/NotificationBadge.es.js +12 -10
- package/dist/notifications/components/NotificationBadge.es.js.map +1 -1
- package/dist/notifications/components/NotificationCard.es.js +27 -18
- package/dist/notifications/components/NotificationCard.es.js.map +1 -1
- package/dist/transactions/components/shared/TransactionDetails.d.ts +7 -0
- package/dist/transactions/components/shared/TransactionDetails.es.js +159 -143
- package/dist/transactions/components/shared/TransactionDetails.es.js.map +1 -1
- package/dist/transactions/components/shared/TransactionInsightTag.d.ts +26 -0
- package/dist/transactions/components/shared/TransactionInsightTag.es.js +53 -0
- package/dist/transactions/components/shared/TransactionInsightTag.es.js.map +1 -0
- package/dist/transactions/components/shared/transactionlist/TransactionRow.es.js +30 -39
- package/dist/transactions/components/shared/transactionlist/TransactionRow.es.js.map +1 -1
- package/dist/transactions/components/shared/transactiontable/cells/AmountCell.es.js +15 -15
- package/dist/transactions/components/shared/transactiontable/cells/AmountCell.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,137 +1,153 @@
|
|
|
1
|
-
import { buildDynamicCopy as
|
|
2
|
-
import { DATE_FORMATS_INTL as
|
|
3
|
-
import { useCategoryStore as
|
|
4
|
-
import { ANALYTICS_EVENTS as
|
|
5
|
-
import { TransactionType as
|
|
6
|
-
import { isFeatureEnabled as
|
|
7
|
-
import { formatCurrency as
|
|
8
|
-
import { fromUnixUTC as
|
|
9
|
-
import { isTransferTransaction as
|
|
10
|
-
import
|
|
11
|
-
import { BottomActions as m, DEFAULT_BOTTOM_ACTIONS as
|
|
12
|
-
import
|
|
13
|
-
import {
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
import
|
|
1
|
+
import { buildDynamicCopy as U } from "../../../core/utils/Localization.es.js";
|
|
2
|
+
import { DATE_FORMATS_INTL as de, formatDate as me } from "../../../core/constants/DateFormats.es.js";
|
|
3
|
+
import { useAppConfig as ce, useCategoryStore as ue, useEvent as pe, useGlobalCopyStore as ge, useGlobalUiStore as fe, useTransactionStore as he, useUserStore as _e } from "../../../common/context/hooks.es.js";
|
|
4
|
+
import { ANALYTICS_EVENTS as Te } from "../../../common/constants/Analytics.es.js";
|
|
5
|
+
import { TransactionType as ye } from "../../../core/types/Transaction.es.js";
|
|
6
|
+
import { isFeatureEnabled as Ce } from "../../../core/utils/UserUtils.es.js";
|
|
7
|
+
import { formatCurrency as V } from "../../../core/utils/NumberFormatting.es.js";
|
|
8
|
+
import { fromUnixUTC as Se } from "../../../core/utils/DateUtil.es.js";
|
|
9
|
+
import { isTransferTransaction as be } from "../../../core/utils/TransactionUtils.es.js";
|
|
10
|
+
import De from "../../../common/components/Loader.es.js";
|
|
11
|
+
import { BottomActions as m, DEFAULT_BOTTOM_ACTIONS as Ae, DEFAULT_TOP_ACTIONS as ve, TopActions as f } from "../../constants/Actions.es.js";
|
|
12
|
+
import { resolveInsightRender as Ie } from "../../../insights-v2/resolveInsightRender.es.js";
|
|
13
|
+
import { isContactSupportCtaDisabled as xe } from "../../../insights-v2/actionBlocks/ContactSupportActionBlock.es.js";
|
|
14
|
+
import Le from "../../../insights-v2/components/CompactInsightCard.es.js";
|
|
15
|
+
import we from "../../../insights-v2/components/InsightErrorCard.es.js";
|
|
16
|
+
import { actionBlocksKey as Ee } from "../../../insights-v2/mappings/actionBlocksKey.es.js";
|
|
17
|
+
import Me from "../../../insights/components/shared/ChartTransactionWithDrillDown.es.js";
|
|
18
|
+
import { EmbeddedCard as Oe } from "../../../insights/components/shared/InsightsCard/EmbeddedCard.es.js";
|
|
19
|
+
import { AddMerchantBudgetAction as Be } from "./transactiondetails/actions/AddMerchantBudgetAction.es.js";
|
|
20
|
+
import Ne from "./transactiondetails/actions/CategoryAction.es.js";
|
|
21
|
+
import ke from "./transactiondetails/actions/DateAction.es.js";
|
|
22
|
+
import Fe from "./transactiondetails/actions/DeleteAction.es.js";
|
|
23
|
+
import Pe from "./transactiondetails/actions/DeleteLogoAction.es.js";
|
|
24
|
+
import Re from "./transactiondetails/actions/ExcludeAction.es.js";
|
|
25
|
+
import Ge from "./transactiondetails/actions/MemoAction.es.js";
|
|
26
|
+
import Ue from "./transactiondetails/actions/SplitAction.es.js";
|
|
27
|
+
import Ve from "./transactiondetails/actions/TagsAction.es.js";
|
|
28
|
+
import He from "./transactiondetails/Description.es.js";
|
|
29
|
+
import We from "./transactiondetails/FlagTransaction.es.js";
|
|
30
|
+
import je from "./transactiondetails/TransactionDetailsView.es.js";
|
|
31
|
+
import { getEmbeddedInstanceSlotByBeatTemplates as ze } from "./getEmbeddedInstanceSlotByBeatTemplates.es.js";
|
|
32
|
+
import n, { useMemo as H } from "react";
|
|
33
|
+
import { observer as qe } from "mobx-react-lite";
|
|
29
34
|
import h from "@mui/material/Stack";
|
|
30
|
-
import { MerchantLogo as
|
|
31
|
-
import { endOfMonth as
|
|
32
|
-
import { isBefore as
|
|
33
|
-
import { startOfMonth as
|
|
34
|
-
import
|
|
35
|
-
import { jsx as t, jsxs as
|
|
36
|
-
import { useTheme as
|
|
37
|
-
import
|
|
38
|
-
import
|
|
39
|
-
import
|
|
40
|
-
import
|
|
41
|
-
import
|
|
42
|
-
var
|
|
43
|
-
const { onEvent:
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
35
|
+
import { MerchantLogo as W, P as Ke, Text as D } from "@mxenabled/mxui";
|
|
36
|
+
import { endOfMonth as Xe } from "date-fns/endOfMonth";
|
|
37
|
+
import { isBefore as Ye } from "date-fns/isBefore";
|
|
38
|
+
import { startOfMonth as j } from "date-fns/startOfMonth";
|
|
39
|
+
import A from "@mui/material/Paper";
|
|
40
|
+
import { jsx as t, jsxs as s } from "react/jsx-runtime";
|
|
41
|
+
import { useTheme as $e } from "@mui/material/styles";
|
|
42
|
+
import Je from "@mui/material/Box";
|
|
43
|
+
import z from "@mui/material/Divider";
|
|
44
|
+
import q from "@mui/material/List";
|
|
45
|
+
import Qe from "@mui/material/Alert";
|
|
46
|
+
import Ze from "@mui/material/Snackbar";
|
|
47
|
+
var et = ({ bottomActions: _ = Ae, canFlagTransaction: K = !0, topActions: v = ve, transaction: e, shouldShowEmbeddedCard: I = !0, onContactSupport: x }) => {
|
|
48
|
+
const { onEvent: X } = pe(), { config: Y } = ce(), { isCopyLoaded: $ } = fe(), { userFeatures: J } = _e(), { accounts: Q, common: Z, insights_feed: l } = ge(), { detailedCategories: L } = ue(), { alert: w, associatedBeats: E, detailedTransactions: M, cachedStartDate: O, loadEmbeddedInstanceTransactions: ee, setAlert: B } = he(), [te, N] = n.useState(!1), [k, F] = n.useState(!1), [oe, re] = n.useState(!1), ie = $e(), ae = e?.number && e.number.length > 4, P = e?.transaction_type === ye.CREDIT, R = be(e) && !!e.institutionName, a = n.useMemo(() => E.find((o) => o.associated_transaction_guid === e.guid), [E, e]), T = I ? Ie(a) : "legacy", y = T === "v2" ? a?.insights_payload : void 0, r = I && T === "legacy" ? ze(Z, a) : null, ne = (o) => {
|
|
49
|
+
o.block === Ee.CONTACT_SUPPORT_ACTION_BLOCK && x?.();
|
|
50
|
+
}, [d, C] = n.useState(r ? r.dataSeries.length - 1 : 0);
|
|
51
|
+
n.useEffect(() => X(Te.TRANSACTION_DETAILS_VIEW, { transaction_guid: e.guid }), []), n.useEffect(() => {
|
|
52
|
+
if (!r || r.dataSeries.length === 0) return;
|
|
53
|
+
const { date: o } = r.dataSeries[d], i = j(o);
|
|
54
|
+
Ye(i, O) && (F(!0), ee(i).finally(() => {
|
|
55
|
+
F(!1);
|
|
49
56
|
}));
|
|
50
57
|
}, [
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
58
|
+
d,
|
|
59
|
+
r,
|
|
60
|
+
O
|
|
54
61
|
]);
|
|
55
|
-
const S = _.includes(m.MerchantBudget) && !e?.merchant_guid ? _.filter((
|
|
56
|
-
if (
|
|
57
|
-
const
|
|
58
|
-
let p =
|
|
59
|
-
return u - i < 0 && (p =
|
|
60
|
-
category:
|
|
62
|
+
const S = _.includes(m.MerchantBudget) && !e?.merchant_guid ? _.filter((o) => o !== m.MerchantBudget) : _, b = H(() => {
|
|
63
|
+
if (r) {
|
|
64
|
+
const o = L.find((g) => g.guid === e.top_level_category_guid), i = a?.payload?.average_amount ?? 0, u = e.amount;
|
|
65
|
+
let p = l.general.increased_text;
|
|
66
|
+
return u - i < 0 && (p = l.general.decreased_text), {
|
|
67
|
+
category: o,
|
|
61
68
|
percentageAmount: i === 0 ? 0 : Math.round(Math.abs(u - i) / i * 100),
|
|
62
69
|
changetype: p
|
|
63
70
|
};
|
|
64
71
|
}
|
|
65
72
|
return null;
|
|
66
|
-
}, [
|
|
67
|
-
if (!
|
|
68
|
-
const { guid:
|
|
69
|
-
return
|
|
70
|
-
const
|
|
71
|
-
return
|
|
73
|
+
}, [r, L]), se = H(() => {
|
|
74
|
+
if (!r?.dataSeries?.length) return [];
|
|
75
|
+
const { guid: o, date: i } = r.dataSeries[d], u = j(i), p = Xe(i);
|
|
76
|
+
return M.filter((g) => {
|
|
77
|
+
const G = Se(g.date);
|
|
78
|
+
return G >= u && G <= p && g.guid === o;
|
|
72
79
|
});
|
|
73
80
|
}, [
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
81
|
+
d,
|
|
82
|
+
r,
|
|
83
|
+
M,
|
|
84
|
+
k
|
|
78
85
|
]);
|
|
79
|
-
if (
|
|
80
|
-
const c =
|
|
81
|
-
return /* @__PURE__ */
|
|
86
|
+
if (!$) return /* @__PURE__ */ t(De, {});
|
|
87
|
+
const c = Ce(J, "MX_TXN_DETAILS_VIEW_ONLY"), le = ie.palette.mode === "dark" ? "grey.800" : "grey.100";
|
|
88
|
+
return /* @__PURE__ */ s(Je, {
|
|
82
89
|
className: "mx-txn-transaction-details",
|
|
83
90
|
width: "100%",
|
|
84
91
|
children: [
|
|
85
|
-
e && /* @__PURE__ */
|
|
86
|
-
/* @__PURE__ */
|
|
92
|
+
e && /* @__PURE__ */ s(h, { children: [
|
|
93
|
+
/* @__PURE__ */ s(h, {
|
|
87
94
|
gap: 12,
|
|
88
95
|
p: 24,
|
|
89
96
|
children: [
|
|
90
|
-
/* @__PURE__ */ t(
|
|
97
|
+
/* @__PURE__ */ t(A, {
|
|
91
98
|
elevation: 2,
|
|
92
99
|
sx: { width: 64 },
|
|
93
|
-
children: /* @__PURE__ */ t(
|
|
100
|
+
children: /* @__PURE__ */ t(W, {
|
|
94
101
|
categoryGuid: e.top_level_category_guid || "",
|
|
95
102
|
merchantGuid: e.merchant_guid || "",
|
|
96
103
|
size: 64
|
|
97
104
|
})
|
|
98
105
|
}),
|
|
99
|
-
/* @__PURE__ */ t(
|
|
100
|
-
displayValue:
|
|
106
|
+
/* @__PURE__ */ t(He, {
|
|
107
|
+
displayValue: R ? e.institutionName : void 0,
|
|
101
108
|
transaction: e,
|
|
102
|
-
viewOnly: c ||
|
|
109
|
+
viewOnly: c || R
|
|
103
110
|
}),
|
|
104
|
-
/* @__PURE__ */
|
|
111
|
+
/* @__PURE__ */ s(h, {
|
|
105
112
|
direction: "row",
|
|
106
113
|
justifyContent: "space-between",
|
|
107
114
|
sx: { minHeight: 44 },
|
|
108
|
-
children: [/* @__PURE__ */
|
|
109
|
-
color:
|
|
115
|
+
children: [/* @__PURE__ */ s(Ke, {
|
|
116
|
+
color: P ? "success.main" : "text.primary",
|
|
110
117
|
variant: "h1",
|
|
111
|
-
children: [
|
|
112
|
-
}), !c &&
|
|
118
|
+
children: [P ? "+" : "", V(e.amount, "0,0.00")]
|
|
119
|
+
}), !c && K && /* @__PURE__ */ t(We, { transaction: e })]
|
|
113
120
|
}),
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
121
|
+
y && /* @__PURE__ */ t(Le, {
|
|
122
|
+
isCtaDisabled: xe(y.primary_cta?.block, Y, x),
|
|
123
|
+
onCtaClick: ne,
|
|
124
|
+
payload: y
|
|
125
|
+
}),
|
|
126
|
+
T === "error" && a && /* @__PURE__ */ t(we, {
|
|
127
|
+
beat: a,
|
|
128
|
+
variant: "plain"
|
|
129
|
+
}),
|
|
130
|
+
r?.instanceSlot && /* @__PURE__ */ t(Oe, {
|
|
131
|
+
callToAction: r.callToAction,
|
|
132
|
+
description: U(l.general.embedded_description, b.changetype, /* @__PURE__ */ t("strong", { children: b.percentageAmount })),
|
|
133
|
+
instanceSlot: r.instanceSlot,
|
|
118
134
|
onCtaClick: () => {
|
|
119
|
-
|
|
135
|
+
N(!0);
|
|
120
136
|
},
|
|
121
|
-
title:
|
|
137
|
+
title: a.html_micro_title
|
|
122
138
|
}),
|
|
123
|
-
/* @__PURE__ */
|
|
139
|
+
/* @__PURE__ */ s(h, {
|
|
124
140
|
sx: {
|
|
125
|
-
bgcolor:
|
|
141
|
+
bgcolor: le,
|
|
126
142
|
borderRadius: "4px",
|
|
127
143
|
gap: 4,
|
|
128
144
|
p: 8
|
|
129
145
|
},
|
|
130
|
-
children: [/* @__PURE__ */ t(
|
|
146
|
+
children: [/* @__PURE__ */ t(D, {
|
|
131
147
|
bold: !0,
|
|
132
148
|
children: `${e.account}
|
|
133
|
-
${
|
|
134
|
-
}), /* @__PURE__ */ t(
|
|
149
|
+
${ae ? e.number : "•".repeat(4).concat(e.number ?? "")}`
|
|
150
|
+
}), /* @__PURE__ */ t(D, {
|
|
135
151
|
bold: !0,
|
|
136
152
|
truncate: !0,
|
|
137
153
|
variant: "tiny",
|
|
@@ -140,119 +156,119 @@ var We = ({ bottomActions: _ = Te, canFlagTransaction: W = !0, topActions: A = S
|
|
|
140
156
|
})
|
|
141
157
|
]
|
|
142
158
|
}),
|
|
143
|
-
/* @__PURE__ */ t(
|
|
159
|
+
/* @__PURE__ */ t(A, {
|
|
144
160
|
square: !0,
|
|
145
161
|
sx: { boxShadow: "none" },
|
|
146
|
-
children: c ? /* @__PURE__ */ t(
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
/* @__PURE__ */ t(
|
|
162
|
+
children: c ? /* @__PURE__ */ t(je, { transaction: e }) : /* @__PURE__ */ t(q, { children: v.map((o, i) => /* @__PURE__ */ s(n.Fragment, { children: [
|
|
163
|
+
o === f.Category && /* @__PURE__ */ t(Ne, { transaction: e }),
|
|
164
|
+
o === f.Date && /* @__PURE__ */ t(ke, { transaction: e }),
|
|
165
|
+
o === f.Memo && /* @__PURE__ */ t(Ge, { transaction: e }),
|
|
166
|
+
o === f.Tags && /* @__PURE__ */ t(Ve, { transaction: e }),
|
|
167
|
+
/* @__PURE__ */ t(z, {
|
|
152
168
|
component: "li",
|
|
153
|
-
variant: i <
|
|
169
|
+
variant: i < v.length - 1 ? "inset" : "fullWidth"
|
|
154
170
|
})
|
|
155
|
-
] },
|
|
171
|
+
] }, o)) })
|
|
156
172
|
}),
|
|
157
|
-
!c && S.length > 0 && /* @__PURE__ */ n
|
|
173
|
+
!c && S.length > 0 && /* @__PURE__ */ s(n.Fragment, { children: [/* @__PURE__ */ t(D, {
|
|
158
174
|
bold: !0,
|
|
159
175
|
mb: 8,
|
|
160
176
|
ml: 26,
|
|
161
177
|
mt: 16,
|
|
162
178
|
variant: "body1",
|
|
163
|
-
children:
|
|
164
|
-
}), /* @__PURE__ */ t(
|
|
179
|
+
children: Q.actions
|
|
180
|
+
}), /* @__PURE__ */ t(A, {
|
|
165
181
|
square: !0,
|
|
166
182
|
sx: { boxShadow: "none" },
|
|
167
|
-
children: /* @__PURE__ */
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
/* @__PURE__ */ t(
|
|
183
|
+
children: /* @__PURE__ */ s(q, { children: [S.map((o, i) => /* @__PURE__ */ s(n.Fragment, { children: [
|
|
184
|
+
o === m.MerchantBudget && /* @__PURE__ */ t(Be, { transaction: e }),
|
|
185
|
+
o === m.SplitTransaction && /* @__PURE__ */ t(Ue, { transaction: e }),
|
|
186
|
+
o === m.HideTransaction && /* @__PURE__ */ t(Re, { transaction: e }),
|
|
187
|
+
o === m.MerchantLogo && /* @__PURE__ */ t(Pe, { transaction: e }),
|
|
188
|
+
/* @__PURE__ */ t(z, {
|
|
173
189
|
component: "li",
|
|
174
190
|
variant: i < S.length - 1 ? "inset" : "fullWidth"
|
|
175
191
|
})
|
|
176
|
-
] },
|
|
192
|
+
] }, o)), e.is_manual && !e.parent_guid && !e.has_been_split && /* @__PURE__ */ t(Fe, { transaction: e })] })
|
|
177
193
|
})] })
|
|
178
194
|
] }),
|
|
179
|
-
|
|
180
|
-
ariaLabel:
|
|
195
|
+
a && r && /* @__PURE__ */ t(Me, {
|
|
196
|
+
ariaLabel: me(r?.dataSeries[d]?.date, de.MONTH),
|
|
181
197
|
barChartProps: {
|
|
182
198
|
amounts: {
|
|
183
|
-
average:
|
|
184
|
-
formattedAverage:
|
|
199
|
+
average: a.payload.average_amount,
|
|
200
|
+
formattedAverage: V(a.payload.average_amount, "0,0")
|
|
185
201
|
},
|
|
186
|
-
color:
|
|
187
|
-
data:
|
|
202
|
+
color: b.category?.color || "",
|
|
203
|
+
data: r.chartData,
|
|
188
204
|
margin: {
|
|
189
205
|
bottom: 10,
|
|
190
206
|
left: 24,
|
|
191
207
|
right: 24,
|
|
192
208
|
top: 20
|
|
193
209
|
},
|
|
194
|
-
monthlyAmountLabel:
|
|
195
|
-
onBarClick: (
|
|
196
|
-
|
|
210
|
+
monthlyAmountLabel: l.general.monthly_amount,
|
|
211
|
+
onBarClick: (o) => {
|
|
212
|
+
C(o);
|
|
197
213
|
},
|
|
198
|
-
trendAmountLabel:
|
|
214
|
+
trendAmountLabel: l.general.trend,
|
|
199
215
|
legendPosition: "top"
|
|
200
216
|
},
|
|
201
217
|
beat: {
|
|
202
|
-
heading:
|
|
218
|
+
heading: a.html_title,
|
|
203
219
|
subHeading: {
|
|
204
220
|
category_guid: e.category_guid ?? "",
|
|
205
221
|
merchant_guid: e.merchant_guid ?? "",
|
|
206
222
|
description: e.description ?? ""
|
|
207
223
|
}
|
|
208
224
|
},
|
|
209
|
-
data:
|
|
210
|
-
defaultSelectedIndex:
|
|
211
|
-
icon: /* @__PURE__ */ t(
|
|
225
|
+
data: r.chartData,
|
|
226
|
+
defaultSelectedIndex: d,
|
|
227
|
+
icon: /* @__PURE__ */ t(W, {
|
|
212
228
|
alt: e.description ?? "",
|
|
213
229
|
categoryGuid: e.category_guid ?? "",
|
|
214
230
|
merchantGuid: e.merchant_guid ?? "",
|
|
215
231
|
size: 16
|
|
216
232
|
}),
|
|
217
|
-
isOpen:
|
|
233
|
+
isOpen: te,
|
|
218
234
|
onClose: () => {
|
|
219
|
-
|
|
235
|
+
N(!1), C(r.dataSeries.length - 1);
|
|
220
236
|
},
|
|
221
|
-
onTabChange: (
|
|
222
|
-
|
|
237
|
+
onTabChange: (o) => {
|
|
238
|
+
C(o);
|
|
223
239
|
},
|
|
224
|
-
tipSection:
|
|
225
|
-
message:
|
|
226
|
-
onDismiss: () =>
|
|
240
|
+
tipSection: oe ? void 0 : {
|
|
241
|
+
message: U(l.general.tip_section_message, /* @__PURE__ */ t("strong", { children: l.general.tip_section_title }), /* @__PURE__ */ t("strong", { children: a.primary_transaction?.description })),
|
|
242
|
+
onDismiss: () => re(!0)
|
|
227
243
|
},
|
|
228
|
-
title:
|
|
244
|
+
title: l.general.transaction_history_title,
|
|
229
245
|
transactionListProps: {
|
|
230
|
-
showLoader:
|
|
246
|
+
showLoader: k,
|
|
231
247
|
showInsights: !0,
|
|
232
|
-
transaction:
|
|
248
|
+
transaction: se
|
|
233
249
|
}
|
|
234
250
|
}),
|
|
235
|
-
/* @__PURE__ */ t(
|
|
251
|
+
/* @__PURE__ */ t(Ze, {
|
|
236
252
|
anchorOrigin: {
|
|
237
253
|
vertical: "bottom",
|
|
238
254
|
horizontal: "right"
|
|
239
255
|
},
|
|
240
256
|
autoHideDuration: 3500,
|
|
241
|
-
onClose: () =>
|
|
242
|
-
open: !!
|
|
243
|
-
children: /* @__PURE__ */ t(
|
|
257
|
+
onClose: () => B(""),
|
|
258
|
+
open: !!w,
|
|
259
|
+
children: /* @__PURE__ */ t(Qe, {
|
|
244
260
|
closeText: "",
|
|
245
|
-
onClose: () =>
|
|
261
|
+
onClose: () => B(""),
|
|
246
262
|
severity: "success",
|
|
247
263
|
variant: "filled",
|
|
248
|
-
children:
|
|
264
|
+
children: w
|
|
249
265
|
})
|
|
250
266
|
})
|
|
251
267
|
]
|
|
252
268
|
});
|
|
253
|
-
},
|
|
269
|
+
}, Kt = qe(et);
|
|
254
270
|
export {
|
|
255
|
-
|
|
271
|
+
Kt as default
|
|
256
272
|
};
|
|
257
273
|
|
|
258
274
|
//# sourceMappingURL=TransactionDetails.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TransactionDetails.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionDetails.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Paper from '@mui/material/Paper'\nimport Snackbar from '@mui/material/Snackbar'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\n\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport {\n ANALYTICS_EVENTS,\n Loader,\n useCategoryStore,\n useEvent,\n useGlobalCopyStore,\n useGlobalUiStore,\n useTransactionStore,\n useUserStore,\n} from '../../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Transaction, TransactionType } from '../../../core'\nimport { fromUnixUTC } from '../../../core/utils/DateUtil'\nimport { isTransferTransaction } from '../../../core/utils/TransactionUtils'\nimport { isFeatureEnabled } from '../../../core/utils/UserUtils'\nimport { ChartTransactionWithDrillDown, EmbeddedCard } from '../../../insights'\n\nimport {\n BottomActions,\n DEFAULT_BOTTOM_ACTIONS,\n DEFAULT_TOP_ACTIONS,\n TopActions,\n} from '../../constants/Actions'\n\nimport {\n AddMerchantBudgetAction,\n CategoryAction,\n DateAction,\n DeleteAction,\n DeleteLogoAction,\n ExcludeAction,\n MemoAction,\n SplitAction,\n TagsAction,\n} from './transactiondetails/actions'\nimport Description from './transactiondetails/Description'\nimport FlagTransaction from './transactiondetails/FlagTransaction'\nimport TransactionDetailsView from './transactiondetails/TransactionDetailsView'\nimport { getEmbeddedInstanceSlotByBeatTemplates } from './getEmbeddedInstanceSlotByBeatTemplates'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\nexport interface TransactionDetailsProps {\n bottomActions?: BottomActions[]\n canFlagTransaction?: boolean\n topActions?: TopActions[]\n transaction: Transaction\n shouldShowEmbeddedCard?: boolean\n}\n\nconst TransactionDetails: React.FC<TransactionDetailsProps> = ({\n bottomActions = DEFAULT_BOTTOM_ACTIONS,\n canFlagTransaction = true,\n topActions = DEFAULT_TOP_ACTIONS,\n transaction,\n shouldShowEmbeddedCard = true,\n}) => {\n const { onEvent } = useEvent()\n const { isCopyLoaded } = useGlobalUiStore()\n const { userFeatures } = useUserStore()\n const { accounts: copy, common: commonCopy, insights_feed: insightsCopy } = useGlobalCopyStore()\n\n const { detailedCategories } = useCategoryStore()\n const {\n alert,\n associatedBeats,\n detailedTransactions,\n cachedStartDate,\n loadEmbeddedInstanceTransactions,\n setAlert,\n } = useTransactionStore()\n\n const [showTranscationDrilldownDrawer, setShowTransactionDrillDownDrawer] = React.useState(false)\n\n const [isLoading, setIsLoading] = React.useState(false)\n const [closeTipSection, setCloseTipSection] = React.useState(false)\n const theme = useTheme()\n\n const showFullNumber = transaction?.number && transaction.number.length > 4\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 embeddedData = shouldShowEmbeddedCard\n ? getEmbeddedInstanceSlotByBeatTemplates(commonCopy, beat)\n : null\n\n const [selectedTabIndex, setSelectedTabIndex] = React.useState(\n embeddedData ? embeddedData.dataSeries.length - 1 : 0,\n )\n\n React.useEffect(\n () =>\n onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_VIEW, { transaction_guid: transaction.guid }),\n [],\n )\n\n React.useEffect(() => {\n if (!embeddedData || embeddedData.dataSeries.length === 0) return\n\n const { date: selectedSeriesItemDate } = embeddedData.dataSeries[selectedTabIndex]\n\n const start = startOfMonth(selectedSeriesItemDate)\n\n if (isBefore(start, cachedStartDate)) {\n setIsLoading(true)\n loadEmbeddedInstanceTransactions(start).finally(() => {\n setIsLoading(false)\n })\n }\n }, [selectedTabIndex, embeddedData, cachedStartDate])\n\n //if merchant_guid is null then no need to show the MerchantBudget action.\n const updatedBottomActions =\n bottomActions.includes(BottomActions.MerchantBudget) && !transaction?.merchant_guid\n ? bottomActions.filter((action) => action !== BottomActions.MerchantBudget)\n : bottomActions\n\n const embeddedCardDataCategory = useMemo(() => {\n if (embeddedData) {\n const category = detailedCategories.find(\n (cat) => cat.guid === transaction.top_level_category_guid,\n )\n const mean = beat?.payload?.average_amount ?? 0\n const currentAmount = transaction.amount\n\n let changetype = insightsCopy.general.increased_text\n if (currentAmount - mean < 0) {\n changetype = insightsCopy.general.decreased_text\n }\n const percentageAmount =\n mean === 0 ? 0 : Math.round((Math.abs(currentAmount - mean) / mean) * 100)\n\n return { category, percentageAmount, changetype }\n }\n return null\n }, [embeddedData, detailedCategories])\n\n const filteredTransactions = useMemo(() => {\n if (!embeddedData?.dataSeries?.length) {\n return []\n }\n\n const { guid: selectedSeriesItemGuid, date: selectedSeriesItemDate } =\n embeddedData.dataSeries[selectedTabIndex]\n\n const start = startOfMonth(selectedSeriesItemDate)\n const end = endOfMonth(selectedSeriesItemDate)\n\n return detailedTransactions.filter((t) => {\n const transactionDate = fromUnixUTC(t.date)\n return transactionDate >= start && transactionDate <= end && t.guid === selectedSeriesItemGuid\n })\n }, [selectedTabIndex, embeddedData, detailedTransactions, isLoading])\n\n if (!isCopyLoaded) {\n return <Loader />\n }\n\n const shouldShowViewOnlyMode = isFeatureEnabled(userFeatures, 'MX_TXN_DETAILS_VIEW_ONLY')\n\n const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n return (\n <Box className=\"mx-txn-transaction-details\" width=\"100%\">\n {transaction && (\n <Stack>\n <Stack gap={12} p={24}>\n <Paper elevation={2} sx={{ width: 64 }}>\n <MerchantLogo\n categoryGuid={transaction.top_level_category_guid || ''}\n merchantGuid={transaction.merchant_guid || ''}\n size={64}\n />\n </Paper>\n\n <Description\n displayValue={showInstitution ? transaction.institutionName : undefined}\n transaction={transaction}\n viewOnly={shouldShowViewOnlyMode || showInstitution}\n />\n\n <Stack direction=\"row\" justifyContent=\"space-between\" sx={{ minHeight: 44 }}>\n <P color={isCredit ? 'success.main' : 'text.primary'} variant=\"h1\">\n {isCredit ? '+' : ''}\n {formatCurrency(transaction.amount, '0,0.00')}\n </P>\n {!shouldShowViewOnlyMode && canFlagTransaction && (\n <FlagTransaction transaction={transaction} />\n )}\n </Stack>\n\n {embeddedData?.instanceSlot && (\n <EmbeddedCard\n callToAction={embeddedData.callToAction}\n description={\n buildDynamicCopy(\n insightsCopy.general.embedded_description,\n embeddedCardDataCategory!.changetype,\n <strong>{embeddedCardDataCategory!.percentageAmount}</strong>,\n ) as string\n }\n instanceSlot={embeddedData.instanceSlot}\n onCtaClick={() => {\n setShowTransactionDrillDownDrawer(true)\n }}\n title={beat!.html_micro_title!}\n />\n )}\n <Stack sx={{ bgcolor: bgColor, borderRadius: '4px', gap: 4, p: 8 }}>\n <Text bold={true}>\n {`${transaction.account}\n ${\n showFullNumber\n ? transaction.number\n : '\\u2022'.repeat(4).concat(transaction.number ?? '')\n }`}\n </Text>\n <Text bold={true} truncate={true} variant=\"tiny\">\n {transaction.feed_description}\n </Text>\n </Stack>\n </Stack>\n\n <Paper square={true} sx={{ boxShadow: 'none' }}>\n {shouldShowViewOnlyMode ? (\n <TransactionDetailsView transaction={transaction} />\n ) : (\n <List>\n {topActions.map((action, index) => (\n <React.Fragment key={action}>\n {action === TopActions.Category && <CategoryAction transaction={transaction} />}\n {action === TopActions.Date && <DateAction transaction={transaction} />}\n {action === TopActions.Memo && <MemoAction transaction={transaction} />}\n {action === TopActions.Tags && <TagsAction transaction={transaction} />}\n <Divider\n component=\"li\"\n variant={index < topActions.length - 1 ? 'inset' : 'fullWidth'}\n />\n </React.Fragment>\n ))}\n </List>\n )}\n </Paper>\n\n {!shouldShowViewOnlyMode && updatedBottomActions.length > 0 && (\n <React.Fragment>\n <Text bold={true} mb={8} ml={26} mt={16} variant=\"body1\">\n {copy.actions}\n </Text>\n\n <Paper square={true} sx={{ boxShadow: 'none' }}>\n <List>\n {updatedBottomActions.map((action, index) => (\n <React.Fragment key={action}>\n {action === BottomActions.MerchantBudget && (\n <AddMerchantBudgetAction transaction={transaction} />\n )}\n {action === BottomActions.SplitTransaction && (\n <SplitAction transaction={transaction} />\n )}\n {action === BottomActions.HideTransaction && (\n <ExcludeAction transaction={transaction} />\n )}\n {action === BottomActions.MerchantLogo && (\n <DeleteLogoAction transaction={transaction} />\n )}\n <Divider\n component=\"li\"\n variant={index < updatedBottomActions.length - 1 ? 'inset' : 'fullWidth'}\n />\n </React.Fragment>\n ))}\n\n {/*\n Show DeleteAction only if:\n - The transaction is manual\n - The transaction is NOT a parent transaction (no parent_guid)\n - The transaction has NOT been split (has_been_split is false)\n \n This ensures delete is hidden for parent or split transactions.\n */}\n {transaction.is_manual &&\n !transaction.parent_guid &&\n !transaction.has_been_split && <DeleteAction transaction={transaction} />}\n </List>\n </Paper>\n </React.Fragment>\n )}\n </Stack>\n )}\n {beat && embeddedData && (\n <ChartTransactionWithDrillDown\n ariaLabel={formatDate(\n embeddedData?.dataSeries[selectedTabIndex]?.date,\n DATE_FORMATS_INTL.MONTH,\n )}\n barChartProps={{\n amounts: {\n average: beat.payload.average_amount,\n formattedAverage: formatCurrency(beat.payload.average_amount, '0,0'),\n },\n color: embeddedCardDataCategory!.category?.color || '',\n data: embeddedData.chartData,\n margin: { bottom: 10, left: 24, right: 24, top: 20 },\n monthlyAmountLabel: insightsCopy.general.monthly_amount,\n onBarClick: (index) => {\n setSelectedTabIndex(index)\n },\n trendAmountLabel: insightsCopy.general.trend,\n legendPosition: 'top',\n }}\n beat={{\n heading: beat.html_title,\n subHeading: {\n category_guid: transaction.category_guid ?? '',\n merchant_guid: transaction.merchant_guid ?? '',\n description: transaction.description ?? '',\n },\n }}\n data={embeddedData.chartData}\n defaultSelectedIndex={selectedTabIndex}\n icon={\n <MerchantLogo\n alt={transaction.description ?? ''}\n categoryGuid={transaction.category_guid ?? ''}\n merchantGuid={transaction.merchant_guid ?? ''}\n size={16}\n />\n }\n isOpen={showTranscationDrilldownDrawer}\n onClose={() => {\n setShowTransactionDrillDownDrawer(false)\n setSelectedTabIndex(embeddedData!.dataSeries.length - 1)\n }}\n onTabChange={(index: number) => {\n setSelectedTabIndex(index)\n }}\n tipSection={\n !closeTipSection\n ? {\n message: buildDynamicCopy(\n insightsCopy.general.tip_section_message,\n <strong>{insightsCopy.general.tip_section_title}</strong>,\n <strong>{beat.primary_transaction?.description}</strong>,\n ) as string,\n onDismiss: () => setCloseTipSection(true),\n }\n : undefined\n }\n title={insightsCopy.general.transaction_history_title}\n transactionListProps={{\n showLoader: isLoading,\n showInsights: true,\n transaction: filteredTransactions,\n }}\n />\n )}\n <Snackbar\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n autoHideDuration={3500}\n onClose={() => setAlert('')}\n open={Boolean(alert)}\n >\n <Alert closeText=\"\" onClose={() => setAlert('')} severity=\"success\" variant=\"filled\">\n {alert}\n </Alert>\n </Snackbar>\n </Box>\n )\n}\n\nexport default observer(TransactionDetails)\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TransactionDetails.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionDetails.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Paper from '@mui/material/Paper'\nimport Snackbar from '@mui/material/Snackbar'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\n\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport {\n ANALYTICS_EVENTS,\n Loader,\n useAppConfig,\n useCategoryStore,\n useEvent,\n useGlobalCopyStore,\n useGlobalUiStore,\n useTransactionStore,\n useUserStore,\n} from '../../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { type PrimaryCTA, Transaction, TransactionType } from '../../../core'\n// Leaf imports on purpose: the `insights-v2` barrel pulls in `mappings/blocks`, whose chart blocks\n// reach back into transactions code — the circular-import/TDZ trap `actionBlocksKey.ts` documents.\nimport { isContactSupportCtaDisabled } from '../../../insights-v2/actionBlocks/ContactSupportActionBlock'\nimport CompactInsightCard from '../../../insights-v2/components/CompactInsightCard'\nimport InsightErrorCard from '../../../insights-v2/components/InsightErrorCard'\nimport { actionBlocksKey } from '../../../insights-v2/mappings/actionBlocksKey'\nimport { resolveInsightRender } from '../../../insights-v2/resolveInsightRender'\nimport { fromUnixUTC } from '../../../core/utils/DateUtil'\nimport { isTransferTransaction } from '../../../core/utils/TransactionUtils'\nimport { isFeatureEnabled } from '../../../core/utils/UserUtils'\nimport { ChartTransactionWithDrillDown, EmbeddedCard } from '../../../insights'\n\nimport {\n BottomActions,\n DEFAULT_BOTTOM_ACTIONS,\n DEFAULT_TOP_ACTIONS,\n TopActions,\n} from '../../constants/Actions'\n\nimport {\n AddMerchantBudgetAction,\n CategoryAction,\n DateAction,\n DeleteAction,\n DeleteLogoAction,\n ExcludeAction,\n MemoAction,\n SplitAction,\n TagsAction,\n} from './transactiondetails/actions'\nimport Description from './transactiondetails/Description'\nimport FlagTransaction from './transactiondetails/FlagTransaction'\nimport TransactionDetailsView from './transactiondetails/TransactionDetailsView'\nimport { getEmbeddedInstanceSlotByBeatTemplates } from './getEmbeddedInstanceSlotByBeatTemplates'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\nexport interface TransactionDetailsProps {\n bottomActions?: BottomActions[]\n canFlagTransaction?: boolean\n topActions?: TopActions[]\n transaction: Transaction\n shouldShowEmbeddedCard?: boolean\n /**\n * Opens the host's contact-support flow when the embedded insight card's CTA is\n * `contact_support_block`. This module cannot import the help module (hosts that don't ship the\n * Help widget stub the import — pulse's webpack `IgnorePlugin`), so the host supplies it. Without\n * it, or with the client's `enable_support_requests` off, the CTA renders disabled.\n */\n onContactSupport?: () => void\n}\n\nconst TransactionDetails: React.FC<TransactionDetailsProps> = ({\n bottomActions = DEFAULT_BOTTOM_ACTIONS,\n canFlagTransaction = true,\n topActions = DEFAULT_TOP_ACTIONS,\n transaction,\n shouldShowEmbeddedCard = true,\n onContactSupport,\n}) => {\n const { onEvent } = useEvent()\n const { config } = useAppConfig()\n const { isCopyLoaded } = useGlobalUiStore()\n const { userFeatures } = useUserStore()\n const { accounts: copy, common: commonCopy, insights_feed: insightsCopy } = useGlobalCopyStore()\n\n const { detailedCategories } = useCategoryStore()\n const {\n alert,\n associatedBeats,\n detailedTransactions,\n cachedStartDate,\n loadEmbeddedInstanceTransactions,\n setAlert,\n } = useTransactionStore()\n\n const [showTranscationDrilldownDrawer, setShowTransactionDrillDownDrawer] = React.useState(false)\n\n const [isLoading, setIsLoading] = React.useState(false)\n const [closeTipSection, setCloseTipSection] = React.useState(false)\n const theme = useTheme()\n\n const showFullNumber = transaction?.number && transaction.number.length > 4\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 // Insights 2.0 (insights_v2.2.md §8.3, §10.1): branch on the beat the widget already matched from\n // its associated-beats fetch (which carries `widget_type=embedded`). `v2` renders the compact card\n // from the held envelope and `error` the error card, both in the slot above the account block;\n // only `legacy` runs the per-template switch below. There is deliberately no fetch on open.\n const insightRender = shouldShowEmbeddedCard ? resolveInsightRender(beat) : 'legacy'\n const v2Payload = insightRender === 'v2' ? beat?.insights_payload : undefined\n\n const embeddedData =\n shouldShowEmbeddedCard && insightRender === 'legacy'\n ? getEmbeddedInstanceSlotByBeatTemplates(commonCopy, beat)\n : null\n\n // `contact_support_block` hands off to the host's flow (see `onContactSupport`). The card itself\n // never opens anything; `isContactSupportCtaDisabled` keeps the CTA inert when it cannot be honoured.\n const handleV2CtaClick = (cta: PrimaryCTA) => {\n if (cta.block === actionBlocksKey.CONTACT_SUPPORT_ACTION_BLOCK) {\n onContactSupport?.()\n }\n }\n\n const [selectedTabIndex, setSelectedTabIndex] = React.useState(\n embeddedData ? embeddedData.dataSeries.length - 1 : 0,\n )\n\n React.useEffect(\n () =>\n onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_VIEW, { transaction_guid: transaction.guid }),\n [],\n )\n\n React.useEffect(() => {\n if (!embeddedData || embeddedData.dataSeries.length === 0) return\n\n const { date: selectedSeriesItemDate } = embeddedData.dataSeries[selectedTabIndex]\n\n const start = startOfMonth(selectedSeriesItemDate)\n\n if (isBefore(start, cachedStartDate)) {\n setIsLoading(true)\n loadEmbeddedInstanceTransactions(start).finally(() => {\n setIsLoading(false)\n })\n }\n }, [selectedTabIndex, embeddedData, cachedStartDate])\n\n //if merchant_guid is null then no need to show the MerchantBudget action.\n const updatedBottomActions =\n bottomActions.includes(BottomActions.MerchantBudget) && !transaction?.merchant_guid\n ? bottomActions.filter((action) => action !== BottomActions.MerchantBudget)\n : bottomActions\n\n const embeddedCardDataCategory = useMemo(() => {\n if (embeddedData) {\n const category = detailedCategories.find(\n (cat) => cat.guid === transaction.top_level_category_guid,\n )\n const mean = beat?.payload?.average_amount ?? 0\n const currentAmount = transaction.amount\n\n let changetype = insightsCopy.general.increased_text\n if (currentAmount - mean < 0) {\n changetype = insightsCopy.general.decreased_text\n }\n const percentageAmount =\n mean === 0 ? 0 : Math.round((Math.abs(currentAmount - mean) / mean) * 100)\n\n return { category, percentageAmount, changetype }\n }\n return null\n }, [embeddedData, detailedCategories])\n\n const filteredTransactions = useMemo(() => {\n if (!embeddedData?.dataSeries?.length) {\n return []\n }\n\n const { guid: selectedSeriesItemGuid, date: selectedSeriesItemDate } =\n embeddedData.dataSeries[selectedTabIndex]\n\n const start = startOfMonth(selectedSeriesItemDate)\n const end = endOfMonth(selectedSeriesItemDate)\n\n return detailedTransactions.filter((t) => {\n const transactionDate = fromUnixUTC(t.date)\n return transactionDate >= start && transactionDate <= end && t.guid === selectedSeriesItemGuid\n })\n }, [selectedTabIndex, embeddedData, detailedTransactions, isLoading])\n\n if (!isCopyLoaded) {\n return <Loader />\n }\n\n const shouldShowViewOnlyMode = isFeatureEnabled(userFeatures, 'MX_TXN_DETAILS_VIEW_ONLY')\n\n const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n return (\n <Box className=\"mx-txn-transaction-details\" width=\"100%\">\n {transaction && (\n <Stack>\n <Stack gap={12} p={24}>\n <Paper elevation={2} sx={{ width: 64 }}>\n <MerchantLogo\n categoryGuid={transaction.top_level_category_guid || ''}\n merchantGuid={transaction.merchant_guid || ''}\n size={64}\n />\n </Paper>\n\n <Description\n displayValue={showInstitution ? transaction.institutionName : undefined}\n transaction={transaction}\n viewOnly={shouldShowViewOnlyMode || showInstitution}\n />\n\n <Stack direction=\"row\" justifyContent=\"space-between\" sx={{ minHeight: 44 }}>\n <P color={isCredit ? 'success.main' : 'text.primary'} variant=\"h1\">\n {isCredit ? '+' : ''}\n {formatCurrency(transaction.amount, '0,0.00')}\n </P>\n {!shouldShowViewOnlyMode && canFlagTransaction && (\n <FlagTransaction transaction={transaction} />\n )}\n </Stack>\n\n {v2Payload && (\n <CompactInsightCard\n isCtaDisabled={isContactSupportCtaDisabled(\n v2Payload.primary_cta?.block,\n config,\n onContactSupport,\n )}\n onCtaClick={handleV2CtaClick}\n payload={v2Payload}\n />\n )}\n {insightRender === 'error' && beat && <InsightErrorCard beat={beat} variant=\"plain\" />}\n {embeddedData?.instanceSlot && (\n <EmbeddedCard\n callToAction={embeddedData.callToAction}\n description={\n buildDynamicCopy(\n insightsCopy.general.embedded_description,\n embeddedCardDataCategory!.changetype,\n <strong>{embeddedCardDataCategory!.percentageAmount}</strong>,\n ) as string\n }\n instanceSlot={embeddedData.instanceSlot}\n onCtaClick={() => {\n setShowTransactionDrillDownDrawer(true)\n }}\n title={beat!.html_micro_title!}\n />\n )}\n <Stack sx={{ bgcolor: bgColor, borderRadius: '4px', gap: 4, p: 8 }}>\n <Text bold={true}>\n {`${transaction.account}\n ${\n showFullNumber\n ? transaction.number\n : '\\u2022'.repeat(4).concat(transaction.number ?? '')\n }`}\n </Text>\n <Text bold={true} truncate={true} variant=\"tiny\">\n {transaction.feed_description}\n </Text>\n </Stack>\n </Stack>\n\n <Paper square={true} sx={{ boxShadow: 'none' }}>\n {shouldShowViewOnlyMode ? (\n <TransactionDetailsView transaction={transaction} />\n ) : (\n <List>\n {topActions.map((action, index) => (\n <React.Fragment key={action}>\n {action === TopActions.Category && <CategoryAction transaction={transaction} />}\n {action === TopActions.Date && <DateAction transaction={transaction} />}\n {action === TopActions.Memo && <MemoAction transaction={transaction} />}\n {action === TopActions.Tags && <TagsAction transaction={transaction} />}\n <Divider\n component=\"li\"\n variant={index < topActions.length - 1 ? 'inset' : 'fullWidth'}\n />\n </React.Fragment>\n ))}\n </List>\n )}\n </Paper>\n\n {!shouldShowViewOnlyMode && updatedBottomActions.length > 0 && (\n <React.Fragment>\n <Text bold={true} mb={8} ml={26} mt={16} variant=\"body1\">\n {copy.actions}\n </Text>\n\n <Paper square={true} sx={{ boxShadow: 'none' }}>\n <List>\n {updatedBottomActions.map((action, index) => (\n <React.Fragment key={action}>\n {action === BottomActions.MerchantBudget && (\n <AddMerchantBudgetAction transaction={transaction} />\n )}\n {action === BottomActions.SplitTransaction && (\n <SplitAction transaction={transaction} />\n )}\n {action === BottomActions.HideTransaction && (\n <ExcludeAction transaction={transaction} />\n )}\n {action === BottomActions.MerchantLogo && (\n <DeleteLogoAction transaction={transaction} />\n )}\n <Divider\n component=\"li\"\n variant={index < updatedBottomActions.length - 1 ? 'inset' : 'fullWidth'}\n />\n </React.Fragment>\n ))}\n\n {/*\n Show DeleteAction only if:\n - The transaction is manual\n - The transaction is NOT a parent transaction (no parent_guid)\n - The transaction has NOT been split (has_been_split is false)\n \n This ensures delete is hidden for parent or split transactions.\n */}\n {transaction.is_manual &&\n !transaction.parent_guid &&\n !transaction.has_been_split && <DeleteAction transaction={transaction} />}\n </List>\n </Paper>\n </React.Fragment>\n )}\n </Stack>\n )}\n {beat && embeddedData && (\n <ChartTransactionWithDrillDown\n ariaLabel={formatDate(\n embeddedData?.dataSeries[selectedTabIndex]?.date,\n DATE_FORMATS_INTL.MONTH,\n )}\n barChartProps={{\n amounts: {\n average: beat.payload.average_amount,\n formattedAverage: formatCurrency(beat.payload.average_amount, '0,0'),\n },\n color: embeddedCardDataCategory!.category?.color || '',\n data: embeddedData.chartData,\n margin: { bottom: 10, left: 24, right: 24, top: 20 },\n monthlyAmountLabel: insightsCopy.general.monthly_amount,\n onBarClick: (index) => {\n setSelectedTabIndex(index)\n },\n trendAmountLabel: insightsCopy.general.trend,\n legendPosition: 'top',\n }}\n beat={{\n heading: beat.html_title,\n subHeading: {\n category_guid: transaction.category_guid ?? '',\n merchant_guid: transaction.merchant_guid ?? '',\n description: transaction.description ?? '',\n },\n }}\n data={embeddedData.chartData}\n defaultSelectedIndex={selectedTabIndex}\n icon={\n <MerchantLogo\n alt={transaction.description ?? ''}\n categoryGuid={transaction.category_guid ?? ''}\n merchantGuid={transaction.merchant_guid ?? ''}\n size={16}\n />\n }\n isOpen={showTranscationDrilldownDrawer}\n onClose={() => {\n setShowTransactionDrillDownDrawer(false)\n setSelectedTabIndex(embeddedData!.dataSeries.length - 1)\n }}\n onTabChange={(index: number) => {\n setSelectedTabIndex(index)\n }}\n tipSection={\n !closeTipSection\n ? {\n message: buildDynamicCopy(\n insightsCopy.general.tip_section_message,\n <strong>{insightsCopy.general.tip_section_title}</strong>,\n <strong>{beat.primary_transaction?.description}</strong>,\n ) as string,\n onDismiss: () => setCloseTipSection(true),\n }\n : undefined\n }\n title={insightsCopy.general.transaction_history_title}\n transactionListProps={{\n showLoader: isLoading,\n showInsights: true,\n transaction: filteredTransactions,\n }}\n />\n )}\n <Snackbar\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n autoHideDuration={3500}\n onClose={() => setAlert('')}\n open={Boolean(alert)}\n >\n <Alert closeText=\"\" onClose={() => setAlert('')} severity=\"success\" variant=\"filled\">\n {alert}\n </Alert>\n </Snackbar>\n </Box>\n )\n}\n\nexport default observer(TransactionDetails)\n"],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Beat } from '../../../core';
|
|
2
|
+
export interface TransactionInsightTagProps {
|
|
3
|
+
/** The beat matched to the row by `associated_transaction_guid`. */
|
|
4
|
+
beat: Beat;
|
|
5
|
+
/** Caption color for the legacy branch (the two surfaces use different tokens). */
|
|
6
|
+
legacyColor?: string;
|
|
7
|
+
/** Whether the legacy caption is bold (the list row is, the table cell is). */
|
|
8
|
+
legacyBold?: boolean;
|
|
9
|
+
/** Truncate the legacy caption (the list row does; the table cell wraps its own column). */
|
|
10
|
+
legacyTruncate?: boolean;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* The transaction row's insight tag, shared by the list row and the table's amount cell so the two
|
|
14
|
+
* cannot drift (`insights_v2.2.md` §10.1). Three-way branch on the matched beat:
|
|
15
|
+
*
|
|
16
|
+
* - `v2` → `insights_payload.pill.text` drawn as a `StatusPill`; nothing when the envelope has
|
|
17
|
+
* no `pill` (the insight tags no row).
|
|
18
|
+
* - `error` → nothing. A flagged beat with no envelope must never fall back to `short_title`: that
|
|
19
|
+
* caption is filled from the same V2 copy block and would hide the failure.
|
|
20
|
+
* - `legacy` → `short_title` as the plain caption, exactly as before.
|
|
21
|
+
*
|
|
22
|
+
* On tap both branches post `mx/moneyDashboard/insightOnTransaction` with the beat guid, as today.
|
|
23
|
+
* The caller keeps the `showInsights` gate.
|
|
24
|
+
*/
|
|
25
|
+
declare const TransactionInsightTag: ({ beat, legacyBold, legacyColor, legacyTruncate, }: TransactionInsightTagProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
26
|
+
export default TransactionInsightTag;
|