@mx-cartographer/experiences 9.6.11 → 9.6.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/core/stores/InsightsV2Store.d.ts +1 -1
- package/dist/core/stores/InsightsV2Store.es.js.map +1 -1
- package/dist/core/types/Insights.d.ts +17 -0
- package/dist/core/types/Insights.es.js.map +1 -1
- package/dist/core/types/index.d.ts +1 -1
- package/dist/insights-v2/actionBlocks/ActionBlockLayer.es.js +21 -21
- package/dist/insights-v2/actionBlocks/ActionBlockLayer.es.js.map +1 -1
- package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.es.js +63 -61
- package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.es.js.map +1 -1
- package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.d.ts +2 -1
- package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.es.js +59 -38
- package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.es.js.map +1 -1
- package/dist/insights-v2/actionBlocks/util.d.ts +2 -2
- package/dist/insights-v2/actionBlocks/util.es.js +3 -3
- package/dist/insights-v2/actionBlocks/util.es.js.map +1 -1
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js +57 -55
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js.map +1 -1
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/IconComponent.d.ts +4 -2
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/IconComponent.es.js +54 -23
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/IconComponent.es.js.map +1 -1
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.d.ts +2 -0
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.es.js +14 -10
- package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.es.js.map +1 -1
- package/dist/insights-v2/components/BaseLayout.es.js +119 -99
- package/dist/insights-v2/components/BaseLayout.es.js.map +1 -1
- package/dist/insights-v2/components/statusIcon.d.ts +7 -0
- package/dist/insights-v2/components/statusIcon.es.js +10 -0
- package/dist/insights-v2/components/statusIcon.es.js.map +1 -0
- package/dist/microinsights/cards/InsightCard.es.js +78 -73
- package/dist/microinsights/cards/InsightCard.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { buildDynamicCopy as p } from "../../../core/utils/Localization.es.js";
|
|
2
|
-
import { DATE_FORMATS_INTL as
|
|
3
|
-
import {
|
|
2
|
+
import { DATE_FORMATS_INTL as y, formatDate as N } from "../../../core/constants/DateFormats.es.js";
|
|
3
|
+
import { fromUnixUTC as d } from "../../../core/utils/DateUtil.es.js";
|
|
4
|
+
import { getCategoryColor as f } from "../../../core/utils/CategoryUtil.es.js";
|
|
4
5
|
import { MerchantLogo as S } from "@mxenabled/mxui";
|
|
5
6
|
import { Icon as O } from "@mxenabled/mx-icons";
|
|
6
7
|
import { jsx as c } from "react/jsx-runtime";
|
|
7
|
-
import { endOfMonth as
|
|
8
|
-
var
|
|
8
|
+
import { endOfMonth as A, startOfMonth as C } from "date-fns";
|
|
9
|
+
var s = {
|
|
9
10
|
TRANSACTION: "not_standard_amount",
|
|
10
11
|
CATEGORY_SPEND: "category_spend",
|
|
11
12
|
MONTHLY_SPEND: "monthly_spend_comparison",
|
|
@@ -16,46 +17,59 @@ var i = {
|
|
|
16
17
|
DEBT_TO_INCOME: "monthly_debt_to_income",
|
|
17
18
|
COST_OF_LIVING: "cost_living_to_income",
|
|
18
19
|
NON_ESSENTIAL_CATEGORY: "non_essential_category_summary",
|
|
19
|
-
DEPOSIT_SUMMARY: "monthly_deposit_summary"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
DEPOSIT_SUMMARY: "monthly_deposit_summary",
|
|
21
|
+
LOW_BALANCE: "low_balance"
|
|
22
|
+
}, l = (e, t) => t && f(t, e) || e.palette.primary.main, _ = (e) => ({
|
|
23
|
+
start: C(new Date(e ?? NaN)),
|
|
24
|
+
end: A(new Date(e ?? NaN))
|
|
25
|
+
}), m = (e) => e?.length ? { accounts: e } : {}, T = ({ beat: e }) => {
|
|
26
|
+
const { account_guid: t, from_date: o, to_date: r } = e.insights_payload?.drilldown_data ?? {};
|
|
27
|
+
return typeof t != "string" || typeof o != "number" || typeof r != "number" || !Number.isFinite(o) || !Number.isFinite(r) || r <= o ? {
|
|
28
|
+
accounts: [],
|
|
29
|
+
custom: () => !1
|
|
30
|
+
} : {
|
|
31
|
+
accounts: [t],
|
|
32
|
+
dateRange: {
|
|
33
|
+
start: d(o),
|
|
34
|
+
end: d(r - 1)
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
}, g = ({ beatTransactions: e, dataSeries: t, selectedIndex: o }) => {
|
|
38
|
+
const r = t[o], a = r?.guid, n = e.find((i) => i.guid === a)?.has_been_split;
|
|
25
39
|
return {
|
|
26
|
-
custom: (
|
|
27
|
-
dateRange:
|
|
40
|
+
custom: (i) => i.guid === a,
|
|
41
|
+
dateRange: _(r?.date),
|
|
28
42
|
showSplits: !n
|
|
29
43
|
};
|
|
30
|
-
},
|
|
44
|
+
}, h = ({ dataSeries: e, selectedIndex: t, instanceSlotData: o }) => {
|
|
31
45
|
const r = e[t], a = o.category_guid ?? r?.guid;
|
|
32
46
|
return {
|
|
33
47
|
custom: (n) => n.category_guid === a || n.top_level_category_guid === a,
|
|
34
|
-
dateRange:
|
|
48
|
+
dateRange: _(r?.date)
|
|
35
49
|
};
|
|
36
50
|
}, I = ({ dataSeries: e, selectedIndex: t, spendCategoryGuids: o, instanceSlotData: r }) => {
|
|
37
51
|
const a = e[t];
|
|
38
52
|
return {
|
|
39
53
|
custom: (n) => !!n.top_level_category_guid && o.includes(n.top_level_category_guid),
|
|
40
|
-
dateRange:
|
|
41
|
-
...
|
|
54
|
+
dateRange: _(a?.date),
|
|
55
|
+
...m(r.account_guids)
|
|
42
56
|
};
|
|
43
|
-
},
|
|
44
|
-
const n = t[o], { start:
|
|
57
|
+
}, L = ({ beat: e, dataSeries: t, selectedIndex: o, isLastTab: r, instanceSlotData: a }) => {
|
|
58
|
+
const n = t[o], { start: i, end: u } = _(n?.date);
|
|
45
59
|
return {
|
|
46
60
|
dateRange: {
|
|
47
|
-
start:
|
|
48
|
-
end: r && e.created_at ? new Date(e.created_at) :
|
|
61
|
+
start: i,
|
|
62
|
+
end: r && e.created_at ? new Date(e.created_at) : u
|
|
49
63
|
},
|
|
50
|
-
...
|
|
64
|
+
...m(a.account_guids)
|
|
51
65
|
};
|
|
52
|
-
},
|
|
53
|
-
[
|
|
66
|
+
}, P = {
|
|
67
|
+
[s.TRANSACTION]: {
|
|
54
68
|
top: "singleBar",
|
|
55
69
|
scope: "store",
|
|
56
70
|
filterMode: "store",
|
|
57
71
|
filterStrategy: g,
|
|
58
|
-
colors: (e, t) => [
|
|
72
|
+
colors: (e, t) => [l(e, t)],
|
|
59
73
|
header: (e) => {
|
|
60
74
|
const { title: t, subHeader: o } = e;
|
|
61
75
|
return {
|
|
@@ -74,53 +88,60 @@ var i = {
|
|
|
74
88
|
onDismiss: () => e(!0)
|
|
75
89
|
})
|
|
76
90
|
},
|
|
77
|
-
[
|
|
91
|
+
[s.CATEGORY_SPEND]: {
|
|
78
92
|
top: "singleBar",
|
|
79
|
-
filterStrategy:
|
|
93
|
+
filterStrategy: h,
|
|
80
94
|
scope: "store",
|
|
81
95
|
filterMode: "store",
|
|
82
|
-
colors: (e, t) => [
|
|
96
|
+
colors: (e, t) => [l(e, t)],
|
|
83
97
|
header: (e) => ({
|
|
84
98
|
heading: e.categoryName,
|
|
85
|
-
subHeadingText: e.selectedDate && N(e.selectedDate,
|
|
99
|
+
subHeadingText: e.selectedDate && N(e.selectedDate, y.MONTH_LONG) || "",
|
|
86
100
|
icon: /* @__PURE__ */ c(O, {
|
|
87
101
|
name: "calendar_month",
|
|
88
102
|
size: 16
|
|
89
103
|
})
|
|
90
104
|
})
|
|
91
105
|
},
|
|
92
|
-
[
|
|
106
|
+
[s.MONTHLY_SPEND]: {
|
|
93
107
|
top: "singleBar",
|
|
94
108
|
filterStrategy: I,
|
|
95
109
|
scope: "store",
|
|
96
110
|
filterMode: "store",
|
|
97
111
|
colors: (e) => [e.palette.chart.chart2 ?? e.palette.primary.main]
|
|
98
112
|
},
|
|
99
|
-
[
|
|
113
|
+
[s.ACCOUNT_BALANCE]: {
|
|
100
114
|
top: "singleBar",
|
|
101
|
-
filterStrategy:
|
|
115
|
+
filterStrategy: L,
|
|
102
116
|
scope: "store",
|
|
103
117
|
filterMode: "store",
|
|
104
118
|
colors: (e) => [e.palette.success.main]
|
|
105
119
|
},
|
|
106
|
-
[
|
|
120
|
+
[s.UPCOMING_BILL]: {
|
|
107
121
|
top: "upcomingBill",
|
|
108
122
|
filterStrategy: g,
|
|
109
123
|
scope: "beat",
|
|
110
124
|
filterMode: "local",
|
|
111
|
-
colors: (e, t) => [
|
|
125
|
+
colors: (e, t) => [l(e, t)]
|
|
126
|
+
},
|
|
127
|
+
[s.LOW_BALANCE]: {
|
|
128
|
+
top: "list",
|
|
129
|
+
filterStrategy: T,
|
|
130
|
+
scope: "store",
|
|
131
|
+
filterMode: "store",
|
|
132
|
+
colors: (e) => [e.palette.primary.main]
|
|
112
133
|
}
|
|
113
|
-
},
|
|
134
|
+
}, w = {
|
|
114
135
|
top: "singleBar",
|
|
115
136
|
filterStrategy: g,
|
|
116
137
|
scope: "store",
|
|
117
138
|
filterMode: "store",
|
|
118
|
-
colors: (e, t) => [
|
|
139
|
+
colors: (e, t) => [l(e, t)]
|
|
119
140
|
};
|
|
120
141
|
export {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
142
|
+
s as DRILLDOWN_VARIANTS,
|
|
143
|
+
w as FALLBACK,
|
|
144
|
+
P as layout
|
|
124
145
|
};
|
|
125
146
|
|
|
126
147
|
//# sourceMappingURL=layout.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Theme } from '@mui/material/styles'\nimport { endOfMonth, startOfMonth } from 'date-fns'\nimport { getCategoryColor } from '../../../core/utils/CategoryUtil'\nimport {\n type Beat,\n type InsightsFeedCopy,\n type Subtitle,\n type Transaction,\n buildDynamicCopy,\n} from '../../../core'\nimport type { TransactionFilter } from '../../../core/stores/TransactionStore'\nimport type { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData'\nimport { MerchantLogo } from '@mxenabled/mxui'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Icon } from '@mxenabled/mx-icons'\nimport type { ChartDataSeriesItem } from '../../blocks/ChartBlocks/BarchartBlock/utils'\nimport type { TipSectionProps } from '../../../insights/components/shared/ChartDrawerTemplate/TipSection'\n\nexport interface DrillDownHeader {\n heading?: string\n subHeadingText?: string\n icon?: ReactNode\n}\n\nexport interface DrillDownHeaderContext {\n title?: string\n subHeader?: Subtitle\n categoryName: string\n selectedDate?: string | Date\n}\n\nexport const DRILLDOWN_VARIANTS = {\n TRANSACTION: 'not_standard_amount',\n CATEGORY_SPEND: 'category_spend',\n MONTHLY_SPEND: 'monthly_spend_comparison',\n ACCOUNT_BALANCE: 'account_balance',\n UPCOMING_BILL: 'upcoming_bill',\n SPEND_TO_INCOME: 'monthly_spend_to_income',\n SAVINGS_TO_INCOME: 'monthly_savings_to_income',\n DEBT_TO_INCOME: 'monthly_debt_to_income',\n COST_OF_LIVING: 'cost_living_to_income',\n NON_ESSENTIAL_CATEGORY: 'non_essential_category_summary',\n DEPOSIT_SUMMARY: 'monthly_deposit_summary',\n} as const\n\nexport type DrillDownVariant = (typeof DRILLDOWN_VARIANTS)[keyof typeof DRILLDOWN_VARIANTS]\n\n/**\n * One row of the flattened data_series a filterStrategy indexes into: a single-bar monthly total or a\n * synthesized upcoming-bill bar. Fields are optional because the backend keys each row dynamically\n * from data_series.names and not every variant carries a guid/category. Double-bar comparison rows\n * will extend this in the next MR.\n */\n\n// Resolves the top-chart palette from the theme (and the beat's category, when relevant).\nexport type ColorKind = (theme: Theme, categoryGuid?: string) => string[]\n\n// Resolves the dynamic drawer header (heading/sub-heading/icon JSX) from the selection context.\nexport type HeaderKind = (ctx: DrillDownHeaderContext) => DrillDownHeader\n\n/**\n * Everything a filterStrategy needs to turn the currently-selected bar/sub-tab into a\n * TransactionFilter. Data-only so strategies stay pure and testable.\n */\nexport interface FilterContext {\n beat: Beat\n beatTransactions: Transaction[]\n dataSeries: ChartDataSeriesItem[]\n selectedIndex: number\n subIndex: number\n isLastTab: boolean\n instanceSlotData: InsightsInstanceSlotData\n spendCategoryGuids: string[]\n displayedDateRange: { start: Date; end: Date }\n}\n\n// Resolves the current selection into a TransactionFilter. Carried on each config row so behavior\n// lives next to the variant it belongs to (no separate strategy registry to chase).\nexport type FilterStrategy = (ctx: FilterContext) => TransactionFilter\n\nexport interface DrillDownVariantConfig {\n top: 'singleBar' | 'upcomingBill' | 'doubleBar' | 'tabsOnly'\n filterStrategy: FilterStrategy\n colors: ColorKind\n header?: HeaderKind\n tipSection?: (\n setCloseTipSection: (flag: boolean) => void,\n copy: InsightsFeedCopy,\n merchantName?: string,\n ) => TipSectionProps\n scope: 'store' | 'beat'\n filterMode: 'store' | 'local'\n}\nconst categoryColor = (theme: Theme, categoryGuid?: string): string =>\n (categoryGuid && getCategoryColor(categoryGuid, theme)) || theme.palette.primary.main\n\nconst monthRange = (date: string | number | Date | undefined) => ({\n start: startOfMonth(new Date(date ?? NaN)),\n end: endOfMonth(new Date(date ?? NaN)),\n})\n\n// Scopes a filter to the beat's accounts when the beat carries account_guids; otherwise leaves\n// accounts unset so the store default (all accounts) applies.\nconst accountScope = (accountGuids?: string[]): Pick<TransactionFilter, 'accounts'> =>\n accountGuids?.length ? { accounts: accountGuids } : {}\n\n// ── Single-bar filter strategies (this MR) ────────────────────────────────────────────────────\n\n// BillAmountNotStandard / UpcomingBill — the series carries a transaction (TRN) guid; match a single\n// transaction by guid within its month.\nconst transactionGuidStrategy: FilterStrategy = ({\n beatTransactions,\n dataSeries,\n selectedIndex,\n}) => {\n const seriesItem = dataSeries[selectedIndex]\n const seriesGuid = seriesItem?.guid\n const hasBeenSplit = beatTransactions.find((trn) => trn.guid === seriesGuid)?.has_been_split\n\n return {\n custom: (trn) => trn.guid === seriesGuid,\n dateRange: monthRange(seriesItem?.date),\n showSplits: !hasBeenSplit,\n }\n}\n\n// CategorySpendingV2 — match transactions in the beat's category (or whose top-level category is that\n// guid) within the month.\nconst categoryStrategy: FilterStrategy = ({ dataSeries, selectedIndex, instanceSlotData }) => {\n const seriesItem = dataSeries[selectedIndex]\n const categoryGuid = instanceSlotData.category_guid ?? seriesItem?.guid\n\n return {\n custom: (trn) =>\n trn.category_guid === categoryGuid || trn.top_level_category_guid === categoryGuid,\n dateRange: monthRange(seriesItem?.date),\n }\n}\n\n// MonthlySpendComparisonV2 — no per-bar guid; show all spending-category transactions\n// (income/transfers/investments excluded via spendCategoryGuids) within the month.\nconst spendCategoriesStrategy: FilterStrategy = ({\n dataSeries,\n selectedIndex,\n spendCategoryGuids,\n instanceSlotData,\n}) => {\n const seriesItem = dataSeries[selectedIndex]\n\n return {\n custom: (trn) =>\n !!trn.top_level_category_guid && spendCategoryGuids.includes(trn.top_level_category_guid),\n dateRange: monthRange(seriesItem?.date),\n ...accountScope(instanceSlotData.account_guids),\n }\n}\n\n// SavingsAccountBalancesSummary — balances, not categorized spend. Filter by month only; the most\n// recent month is capped at the beat's creation time to match the snapshot the balance was computed\n// from.\nconst accountDateStrategy: FilterStrategy = ({\n beat,\n dataSeries,\n selectedIndex,\n isLastTab,\n instanceSlotData,\n}) => {\n const seriesItem = dataSeries[selectedIndex]\n const { start, end } = monthRange(seriesItem?.date)\n\n return {\n dateRange: {\n start,\n end: isLastTab && beat.created_at ? new Date(beat.created_at) : end,\n },\n ...accountScope(instanceSlotData.account_guids),\n }\n}\n\n// ── Double-bar + tabsOnly strategies (NEXT MR) ───────────────────────────────────────────────────\n// TODO(next MR — double bar): comparisonAggregatedGuidsStrategy — month × sub-tab membership over the\n// comparison bars' precomputed subGuids. Needs comparisonBars in FilterContext.\n// TODO(next MR — tabsOnly): aggregatedGuids / depositSummary strategies for the donut-drawer beats.\n\nexport const layout: Partial<Record<DrillDownVariant, DrillDownVariantConfig>> = {\n [DRILLDOWN_VARIANTS.TRANSACTION]: {\n top: 'singleBar',\n scope: 'store',\n filterMode: 'store',\n filterStrategy: transactionGuidStrategy,\n colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n header: (ctx: DrillDownHeaderContext) => {\n const { title, subHeader } = ctx\n return {\n heading: title,\n subHeadingText: subHeader?.text || undefined,\n icon: (\n <MerchantLogo\n alt={subHeader?.text}\n categoryGuid={subHeader?.logo?.category_guid || ''}\n merchantGuid={subHeader?.logo?.merchant_guid || ''}\n size={16}\n />\n ),\n }\n },\n tipSection: (setCloseTipSection, copy, merchantName = '') => {\n return {\n message: buildDynamicCopy(\n copy.general.tip_section_message,\n <strong>{copy.general.tip_section_title}</strong>,\n <strong>{merchantName}</strong>,\n ),\n onDismiss: () => setCloseTipSection(true),\n } as TipSectionProps\n },\n },\n [DRILLDOWN_VARIANTS.CATEGORY_SPEND]: {\n top: 'singleBar',\n filterStrategy: categoryStrategy,\n scope: 'store',\n filterMode: 'store',\n colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n header: (ctx: DrillDownHeaderContext) => {\n return {\n heading: ctx.categoryName,\n subHeadingText: ctx.selectedDate\n ? formatDate(ctx.selectedDate, DATE_FORMATS_INTL.MONTH_LONG) || ''\n : '',\n icon: <Icon name=\"calendar_month\" size={16} />,\n }\n },\n },\n [DRILLDOWN_VARIANTS.MONTHLY_SPEND]: {\n top: 'singleBar',\n filterStrategy: spendCategoriesStrategy,\n scope: 'store',\n filterMode: 'store',\n colors: (theme: Theme) => [theme.palette.chart.chart2 ?? theme.palette.primary.main],\n },\n [DRILLDOWN_VARIANTS.ACCOUNT_BALANCE]: {\n top: 'singleBar',\n filterStrategy: accountDateStrategy,\n scope: 'store',\n filterMode: 'store',\n colors: (theme: Theme) => [theme.palette.success.main],\n },\n [DRILLDOWN_VARIANTS.UPCOMING_BILL]: {\n top: 'upcomingBill',\n filterStrategy: transactionGuidStrategy,\n scope: 'beat',\n filterMode: 'local',\n colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n },\n\n // ── NEXT MR: double-bar comparison beats (month tabs + spend/income sub-tabs) ────────────────\n // [DRILLDOWN_VARIANTS.SPEND_TO_INCOME]: comparison('spendVsIncome'),\n // [DRILLDOWN_VARIANTS.SAVINGS_TO_INCOME]: comparison('savingsVsIncome'),\n // [DRILLDOWN_VARIANTS.DEBT_TO_INCOME]: comparison('debtVsIncome'),\n // [DRILLDOWN_VARIANTS.COST_OF_LIVING]: comparison('costOfLiving'),\n //\n // ── NEXT MR: tabsOnly donut-drawer beats (no top chart) ───────────────────────────────────\n // [DRILLDOWN_VARIANTS.NON_ESSENTIAL_CATEGORY]: { top: 'tabsOnly', ... },\n // [DRILLDOWN_VARIANTS.DEPOSIT_SUMMARY]: { top: 'tabsOnly', ... },\n}\n\n// Fallback for a missing/typo'd backend variant: a single-bar, store-scoped drawer filtered by the\n// beat's transaction guid and colored by category, so the drawer still renders instead of crashing.\nexport const FALLBACK: DrillDownVariantConfig = {\n top: 'singleBar',\n filterStrategy: transactionGuidStrategy,\n scope: 'store',\n filterMode: 'store',\n colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Theme } from '@mui/material/styles'\nimport { endOfMonth, startOfMonth } from 'date-fns'\nimport { getCategoryColor } from '../../../core/utils/CategoryUtil'\nimport {\n type Beat,\n type InsightsFeedCopy,\n type Subtitle,\n type Transaction,\n buildDynamicCopy,\n} from '../../../core'\nimport type { TransactionFilter } from '../../../core/stores/TransactionStore'\nimport type { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData'\nimport { MerchantLogo } from '@mxenabled/mxui'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { fromUnixUTC } from '../../../core/utils/DateUtil'\nimport { Icon } from '@mxenabled/mx-icons'\nimport type { ChartDataSeriesItem } from '../../blocks/ChartBlocks/BarchartBlock/utils'\nimport type { TipSectionProps } from '../../../insights/components/shared/ChartDrawerTemplate/TipSection'\n\nexport interface DrillDownHeader {\n heading?: string\n subHeadingText?: string\n icon?: ReactNode\n}\n\nexport interface DrillDownHeaderContext {\n title?: string\n subHeader?: Subtitle\n categoryName: string\n selectedDate?: string | Date\n}\n\nexport const DRILLDOWN_VARIANTS = {\n TRANSACTION: 'not_standard_amount',\n CATEGORY_SPEND: 'category_spend',\n MONTHLY_SPEND: 'monthly_spend_comparison',\n ACCOUNT_BALANCE: 'account_balance',\n UPCOMING_BILL: 'upcoming_bill',\n SPEND_TO_INCOME: 'monthly_spend_to_income',\n SAVINGS_TO_INCOME: 'monthly_savings_to_income',\n DEBT_TO_INCOME: 'monthly_debt_to_income',\n COST_OF_LIVING: 'cost_living_to_income',\n NON_ESSENTIAL_CATEGORY: 'non_essential_category_summary',\n DEPOSIT_SUMMARY: 'monthly_deposit_summary',\n LOW_BALANCE: 'low_balance',\n} as const\n\nexport type DrillDownVariant = (typeof DRILLDOWN_VARIANTS)[keyof typeof DRILLDOWN_VARIANTS]\n\n/**\n * One row of the flattened data_series a filterStrategy indexes into: a single-bar monthly total or a\n * synthesized upcoming-bill bar. Fields are optional because the backend keys each row dynamically\n * from data_series.names and not every variant carries a guid/category. Double-bar comparison rows\n * will extend this in the next MR.\n */\n\n// Resolves the top-chart palette from the theme (and the beat's category, when relevant).\nexport type ColorKind = (theme: Theme, categoryGuid?: string) => string[]\n\n// Resolves the dynamic drawer header (heading/sub-heading/icon JSX) from the selection context.\nexport type HeaderKind = (ctx: DrillDownHeaderContext) => DrillDownHeader\n\n/**\n * Everything a filterStrategy needs to turn the currently-selected bar/sub-tab into a\n * TransactionFilter. Data-only so strategies stay pure and testable.\n */\nexport interface FilterContext {\n beat: Beat\n beatTransactions: Transaction[]\n dataSeries: ChartDataSeriesItem[]\n selectedIndex: number\n subIndex: number\n isLastTab: boolean\n instanceSlotData: InsightsInstanceSlotData\n spendCategoryGuids: string[]\n displayedDateRange: { start: Date; end: Date }\n}\n\n// Resolves the current selection into a TransactionFilter. Carried on each config row so behavior\n// lives next to the variant it belongs to (no separate strategy registry to chase).\nexport type FilterStrategy = (ctx: FilterContext) => TransactionFilter\n\nexport interface DrillDownVariantConfig {\n // `list`: no chart or tabs above the transaction list (an account's transactions for a window).\n top: 'singleBar' | 'upcomingBill' | 'doubleBar' | 'tabsOnly' | 'list'\n filterStrategy: FilterStrategy\n colors: ColorKind\n header?: HeaderKind\n tipSection?: (\n setCloseTipSection: (flag: boolean) => void,\n copy: InsightsFeedCopy,\n merchantName?: string,\n ) => TipSectionProps\n scope: 'store' | 'beat'\n filterMode: 'store' | 'local'\n}\nconst categoryColor = (theme: Theme, categoryGuid?: string): string =>\n (categoryGuid && getCategoryColor(categoryGuid, theme)) || theme.palette.primary.main\n\nconst monthRange = (date: string | number | Date | undefined) => ({\n start: startOfMonth(new Date(date ?? NaN)),\n end: endOfMonth(new Date(date ?? NaN)),\n})\n\n// Scopes a filter to the beat's accounts when the beat carries account_guids; otherwise leaves\n// accounts unset so the store default (all accounts) applies.\nconst accountScope = (accountGuids?: string[]): Pick<TransactionFilter, 'accounts'> =>\n accountGuids?.length ? { accounts: accountGuids } : {}\n\n// Low Account Balance — `drilldown_data` names one account and a window (epoch seconds at UTC\n// midnight, to_date exclusive). Fails closed: a drawer that cannot name its rows shows none.\nconst accountWindowStrategy: FilterStrategy = ({ beat }) => {\n const { account_guid, from_date, to_date } = beat.insights_payload?.drilldown_data ?? {}\n if (\n typeof account_guid !== 'string' ||\n typeof from_date !== 'number' ||\n typeof to_date !== 'number' ||\n !Number.isFinite(from_date) ||\n !Number.isFinite(to_date) ||\n to_date <= from_date\n ) {\n return { accounts: [], custom: () => false }\n }\n\n return {\n accounts: [account_guid],\n dateRange: { start: fromUnixUTC(from_date), end: fromUnixUTC(to_date - 1) },\n }\n}\n\n// ── Single-bar filter strategies (this MR) ────────────────────────────────────────────────────\n\n// BillAmountNotStandard / UpcomingBill — the series carries a transaction (TRN) guid; match a single\n// transaction by guid within its month.\nconst transactionGuidStrategy: FilterStrategy = ({\n beatTransactions,\n dataSeries,\n selectedIndex,\n}) => {\n const seriesItem = dataSeries[selectedIndex]\n const seriesGuid = seriesItem?.guid\n const hasBeenSplit = beatTransactions.find((trn) => trn.guid === seriesGuid)?.has_been_split\n\n return {\n custom: (trn) => trn.guid === seriesGuid,\n dateRange: monthRange(seriesItem?.date),\n showSplits: !hasBeenSplit,\n }\n}\n\n// CategorySpendingV2 — match transactions in the beat's category (or whose top-level category is that\n// guid) within the month.\nconst categoryStrategy: FilterStrategy = ({ dataSeries, selectedIndex, instanceSlotData }) => {\n const seriesItem = dataSeries[selectedIndex]\n const categoryGuid = instanceSlotData.category_guid ?? seriesItem?.guid\n\n return {\n custom: (trn) =>\n trn.category_guid === categoryGuid || trn.top_level_category_guid === categoryGuid,\n dateRange: monthRange(seriesItem?.date),\n }\n}\n\n// MonthlySpendComparisonV2 — no per-bar guid; show all spending-category transactions\n// (income/transfers/investments excluded via spendCategoryGuids) within the month.\nconst spendCategoriesStrategy: FilterStrategy = ({\n dataSeries,\n selectedIndex,\n spendCategoryGuids,\n instanceSlotData,\n}) => {\n const seriesItem = dataSeries[selectedIndex]\n\n return {\n custom: (trn) =>\n !!trn.top_level_category_guid && spendCategoryGuids.includes(trn.top_level_category_guid),\n dateRange: monthRange(seriesItem?.date),\n ...accountScope(instanceSlotData.account_guids),\n }\n}\n\n// SavingsAccountBalancesSummary — balances, not categorized spend. Filter by month only; the most\n// recent month is capped at the beat's creation time to match the snapshot the balance was computed\n// from.\nconst accountDateStrategy: FilterStrategy = ({\n beat,\n dataSeries,\n selectedIndex,\n isLastTab,\n instanceSlotData,\n}) => {\n const seriesItem = dataSeries[selectedIndex]\n const { start, end } = monthRange(seriesItem?.date)\n\n return {\n dateRange: {\n start,\n end: isLastTab && beat.created_at ? new Date(beat.created_at) : end,\n },\n ...accountScope(instanceSlotData.account_guids),\n }\n}\n\n// ── Double-bar + tabsOnly strategies (NEXT MR) ───────────────────────────────────────────────────\n// TODO(next MR — double bar): comparisonAggregatedGuidsStrategy — month × sub-tab membership over the\n// comparison bars' precomputed subGuids. Needs comparisonBars in FilterContext.\n// TODO(next MR — tabsOnly): aggregatedGuids / depositSummary strategies for the donut-drawer beats.\n\nexport const layout: Partial<Record<DrillDownVariant, DrillDownVariantConfig>> = {\n [DRILLDOWN_VARIANTS.TRANSACTION]: {\n top: 'singleBar',\n scope: 'store',\n filterMode: 'store',\n filterStrategy: transactionGuidStrategy,\n colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n header: (ctx: DrillDownHeaderContext) => {\n const { title, subHeader } = ctx\n return {\n heading: title,\n subHeadingText: subHeader?.text || undefined,\n icon: (\n <MerchantLogo\n alt={subHeader?.text}\n categoryGuid={subHeader?.logo?.category_guid || ''}\n merchantGuid={subHeader?.logo?.merchant_guid || ''}\n size={16}\n />\n ),\n }\n },\n tipSection: (setCloseTipSection, copy, merchantName = '') => {\n return {\n message: buildDynamicCopy(\n copy.general.tip_section_message,\n <strong>{copy.general.tip_section_title}</strong>,\n <strong>{merchantName}</strong>,\n ),\n onDismiss: () => setCloseTipSection(true),\n } as TipSectionProps\n },\n },\n [DRILLDOWN_VARIANTS.CATEGORY_SPEND]: {\n top: 'singleBar',\n filterStrategy: categoryStrategy,\n scope: 'store',\n filterMode: 'store',\n colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n header: (ctx: DrillDownHeaderContext) => {\n return {\n heading: ctx.categoryName,\n subHeadingText: ctx.selectedDate\n ? formatDate(ctx.selectedDate, DATE_FORMATS_INTL.MONTH_LONG) || ''\n : '',\n icon: <Icon name=\"calendar_month\" size={16} />,\n }\n },\n },\n [DRILLDOWN_VARIANTS.MONTHLY_SPEND]: {\n top: 'singleBar',\n filterStrategy: spendCategoriesStrategy,\n scope: 'store',\n filterMode: 'store',\n colors: (theme: Theme) => [theme.palette.chart.chart2 ?? theme.palette.primary.main],\n },\n [DRILLDOWN_VARIANTS.ACCOUNT_BALANCE]: {\n top: 'singleBar',\n filterStrategy: accountDateStrategy,\n scope: 'store',\n filterMode: 'store',\n colors: (theme: Theme) => [theme.palette.success.main],\n },\n [DRILLDOWN_VARIANTS.UPCOMING_BILL]: {\n top: 'upcomingBill',\n filterStrategy: transactionGuidStrategy,\n scope: 'beat',\n filterMode: 'local',\n colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n },\n\n // Low Account Balance's \"Transactions\" link: the account's transactions for the alert's window.\n [DRILLDOWN_VARIANTS.LOW_BALANCE]: {\n top: 'list',\n filterStrategy: accountWindowStrategy,\n scope: 'store',\n filterMode: 'store',\n colors: (theme: Theme) => [theme.palette.primary.main],\n },\n\n // ── NEXT MR: double-bar comparison beats (month tabs + spend/income sub-tabs) ────────────────\n // [DRILLDOWN_VARIANTS.SPEND_TO_INCOME]: comparison('spendVsIncome'),\n // [DRILLDOWN_VARIANTS.SAVINGS_TO_INCOME]: comparison('savingsVsIncome'),\n // [DRILLDOWN_VARIANTS.DEBT_TO_INCOME]: comparison('debtVsIncome'),\n // [DRILLDOWN_VARIANTS.COST_OF_LIVING]: comparison('costOfLiving'),\n //\n // ── NEXT MR: tabsOnly donut-drawer beats (no top chart) ───────────────────────────────────\n // [DRILLDOWN_VARIANTS.NON_ESSENTIAL_CATEGORY]: { top: 'tabsOnly', ... },\n // [DRILLDOWN_VARIANTS.DEPOSIT_SUMMARY]: { top: 'tabsOnly', ... },\n}\n\n// Fallback for a missing/typo'd backend variant: a single-bar, store-scoped drawer filtered by the\n// beat's transaction guid and colored by category, so the drawer still renders instead of crashing.\nexport const FALLBACK: DrillDownVariantConfig = {\n top: 'singleBar',\n filterStrategy: transactionGuidStrategy,\n scope: 'store',\n filterMode: 'store',\n colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n}\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ActionDrawerState, PrimaryCTA, SecondaryCTA } from '../../core';
|
|
1
|
+
import { ActionDrawerState, InDescriptionCTA, PrimaryCTA, SecondaryCTA } from '../../core';
|
|
2
2
|
/**
|
|
3
3
|
* A chart-bar drilldown's context carries which block it targets (see BarchartBlock /
|
|
4
4
|
* DoubleBarChartBlock), since either CTA could in principle open the same drawer. Match that
|
|
@@ -10,4 +10,4 @@ export declare const getCtaForChartBarClick: (actionDrawer: ActionDrawerState, p
|
|
|
10
10
|
* on what triggered it. Falls back to `primary_cta` whenever resolution comes up empty (e.g. a
|
|
11
11
|
* `secondaryCta` trigger with no configured secondary CTA), so callers never have to null-check.
|
|
12
12
|
*/
|
|
13
|
-
export declare const getDynamicCtaBasedOnTriggers: (actionDrawer: ActionDrawerState, primary_cta: PrimaryCTA | undefined, secondary_cta: SecondaryCTA | undefined) => PrimaryCTA | SecondaryCTA | undefined;
|
|
13
|
+
export declare const getDynamicCtaBasedOnTriggers: (actionDrawer: ActionDrawerState, primary_cta: PrimaryCTA | undefined, secondary_cta: SecondaryCTA | undefined, in_description_cta?: InDescriptionCTA) => PrimaryCTA | SecondaryCTA | InDescriptionCTA | undefined;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var
|
|
1
|
+
var n = (e, r, t) => e.context?.block === r?.block ? r : t, i = (e, r, t, g) => e.trigger === "inDescriptionCta" ? g : e.trigger === "secondaryCta" ? t ?? r : e.trigger === "primaryCta" ? r : n(e, r, t) ?? r;
|
|
2
2
|
export {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
n as getCtaForChartBarClick,
|
|
4
|
+
i as getDynamicCtaBasedOnTriggers
|
|
5
5
|
};
|
|
6
6
|
|
|
7
7
|
//# sourceMappingURL=util.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.es.js","names":[],"sources":["../../../src/insights-v2/actionBlocks/util.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"util.es.js","names":[],"sources":["../../../src/insights-v2/actionBlocks/util.ts"],"sourcesContent":["import type {\n ActionDrawerState,\n DrilldownPayload,\n InDescriptionCTA,\n PrimaryCTA,\n SecondaryCTA,\n} from '../../core'\n\n/**\n * A chart-bar drilldown's context carries which block it targets (see BarchartBlock /\n * DoubleBarChartBlock), since either CTA could in principle open the same drawer. Match that\n * against `primary_cta.block`; anything else is assumed to be the secondary CTA's block.\n */\nexport const getCtaForChartBarClick = (\n actionDrawer: ActionDrawerState,\n primary_cta: PrimaryCTA | undefined,\n secondary_cta: SecondaryCTA | undefined,\n): PrimaryCTA | SecondaryCTA | undefined => {\n const context = actionDrawer.context as DrilldownPayload | undefined\n const blockName = context?.block\n\n if (blockName === primary_cta?.block) {\n return primary_cta\n }\n return secondary_cta\n}\n\n/**\n * Resolves which CTA (primary/secondary) drives the currently open drawer's title/variant, based\n * on what triggered it. Falls back to `primary_cta` whenever resolution comes up empty (e.g. a\n * `secondaryCta` trigger with no configured secondary CTA), so callers never have to null-check.\n */\nexport const getDynamicCtaBasedOnTriggers = (\n actionDrawer: ActionDrawerState,\n primary_cta: PrimaryCTA | undefined,\n secondary_cta: SecondaryCTA | undefined,\n in_description_cta?: InDescriptionCTA,\n): PrimaryCTA | SecondaryCTA | InDescriptionCTA | undefined => {\n // The description link names its own block and variant, like a CTA. Only its button fires this\n // trigger, so there is no other CTA to fall back to.\n if (actionDrawer.trigger === 'inDescriptionCta') {\n return in_description_cta\n }\n if (actionDrawer.trigger === 'secondaryCta') {\n return secondary_cta ?? primary_cta\n }\n if (actionDrawer.trigger === 'primaryCta') {\n return primary_cta\n }\n return getCtaForChartBarClick(actionDrawer, primary_cta, secondary_cta) ?? primary_cta\n}\n"],"mappings":"AAaA,IAAa,IAAA,CACX,GACA,GACA,MAEgB,EAAa,SACF,UAET,GAAa,QACtB,IAEF,GAQI,IAAA,CACX,GACA,GACA,GACA,MAII,EAAa,YAAY,qBACpB,IAEL,EAAa,YAAY,iBACpB,KAAiB,IAEtB,EAAa,YAAY,eACpB,IAEF,EAAuB,GAAc,GAAa,CAAa,KAAK"}
|
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { ReactComponent as
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
1
|
+
import { slot as m } from "../../../../core/types/Insights.es.js";
|
|
2
|
+
import { formatCurrency as R } from "../../../../core/utils/NumberFormatting.es.js";
|
|
3
|
+
import { useContainerDimensions as L } from "../../../hooks/useContainerDimensions.es.js";
|
|
4
|
+
import { DepositLogo as $ } from "../../../components/ComponentBlocks/DepositLogo.es.js";
|
|
5
|
+
import { Confetti as B } from "../../../components/shared/Confetti.es.js";
|
|
6
|
+
import { ReactComponent as G } from "../../../components/shared/images/PaidOffCard.es.js";
|
|
7
|
+
import { ReactComponent as N } from "../../../components/shared/images/SavingsAccountDeposit.es.js";
|
|
8
|
+
import { resolveVariantConfig as P } from "../../resolveVariantConfig.es.js";
|
|
9
|
+
import { HeaderComponent as V } from "./HeaderComponent.es.js";
|
|
10
|
+
import { getLayoutConfig as j } from "./layout.es.js";
|
|
11
|
+
import { IconComponent as A } from "./IconComponent.es.js";
|
|
12
|
+
import { useRef as F } from "react";
|
|
12
13
|
import t from "@mui/material/Stack";
|
|
13
|
-
import { Text as
|
|
14
|
-
import { Icon as
|
|
14
|
+
import { Text as s } from "@mxenabled/mxui";
|
|
15
|
+
import { Icon as E } from "@mxenabled/mx-icons";
|
|
15
16
|
import { jsx as o, jsxs as r } from "react/jsx-runtime";
|
|
16
|
-
import { useTheme as
|
|
17
|
+
import { useTheme as H } from "@mui/material/styles";
|
|
17
18
|
import i from "@mui/material/Box";
|
|
18
|
-
var
|
|
19
|
+
var O = {
|
|
19
20
|
deposit_received: "payments",
|
|
20
21
|
status_on_track: "monetization_on"
|
|
21
|
-
},
|
|
22
|
-
const
|
|
22
|
+
}, co = ({ payload: _ }) => {
|
|
23
|
+
const C = H(), p = F(null), { height: u, width: h } = L(p), { instance_slot: n } = _, { variant: c, header_text: a, institution_guid: f, institution_name: g, icon_name: k, label: T, merchant_guid: I, merchant_name: x, category_guid: S } = n, { data: d } = n, l = m(d, "amount") ?? n.amount, b = m(d, "sub_text") ?? n.sub_text, y = m(d, "logo"), e = P(j(C), c, "default", "AccountBlock");
|
|
23
24
|
if (e?.isConfetti) {
|
|
24
|
-
const
|
|
25
|
+
const D = {
|
|
25
26
|
paidOffCard: /* @__PURE__ */ o(i, {
|
|
26
27
|
sx: {
|
|
27
28
|
flexShrink: 0,
|
|
@@ -29,7 +30,7 @@ var F = {
|
|
|
29
30
|
position: "relative",
|
|
30
31
|
width: 44
|
|
31
32
|
},
|
|
32
|
-
children: /* @__PURE__ */ o(
|
|
33
|
+
children: /* @__PURE__ */ o(G, {
|
|
33
34
|
"aria-hidden": !0,
|
|
34
35
|
role: "presentation",
|
|
35
36
|
style: {
|
|
@@ -39,7 +40,7 @@ var F = {
|
|
|
39
40
|
}
|
|
40
41
|
})
|
|
41
42
|
}),
|
|
42
|
-
savings: /* @__PURE__ */ o(
|
|
43
|
+
savings: /* @__PURE__ */ o(N, {
|
|
43
44
|
"aria-hidden": !0,
|
|
44
45
|
height: 55,
|
|
45
46
|
role: "presentation",
|
|
@@ -53,27 +54,27 @@ var F = {
|
|
|
53
54
|
overflow: "hidden",
|
|
54
55
|
width: 48
|
|
55
56
|
},
|
|
56
|
-
children: /* @__PURE__ */ o(
|
|
57
|
-
categoryGuid:
|
|
58
|
-
iconName:
|
|
59
|
-
institutionGuid:
|
|
60
|
-
institutionName:
|
|
61
|
-
merchantGuid:
|
|
62
|
-
merchantName:
|
|
57
|
+
children: /* @__PURE__ */ o($, {
|
|
58
|
+
categoryGuid: S,
|
|
59
|
+
iconName: O[c] ?? "payments",
|
|
60
|
+
institutionGuid: f,
|
|
61
|
+
institutionName: g,
|
|
62
|
+
merchantGuid: I,
|
|
63
|
+
merchantName: x
|
|
63
64
|
})
|
|
64
65
|
})
|
|
65
|
-
}[e.graphic ?? "logo"],
|
|
66
|
+
}[e.graphic ?? "logo"], v = e.secondarySource === "merchant" ? x ?? g : T, w = v ? /* @__PURE__ */ o(s, {
|
|
66
67
|
color: e.secondaryColor,
|
|
67
68
|
variant: e.secondaryVariant,
|
|
68
|
-
children:
|
|
69
|
-
}) : null,
|
|
69
|
+
children: v
|
|
70
|
+
}) : null, z = /* @__PURE__ */ o(s, {
|
|
70
71
|
bold: !0,
|
|
71
72
|
color: "success.dark",
|
|
72
73
|
variant: e.amountVariant,
|
|
73
|
-
children: `${e.amountPrefix ?? ""}${
|
|
74
|
+
children: `${e.amountPrefix ?? ""}${R(l, "0,0.00")}`
|
|
74
75
|
});
|
|
75
76
|
return /* @__PURE__ */ r(i, {
|
|
76
|
-
ref:
|
|
77
|
+
ref: p,
|
|
77
78
|
sx: {
|
|
78
79
|
backgroundImage: e.gradient,
|
|
79
80
|
bgcolor: "background.paper",
|
|
@@ -89,10 +90,10 @@ var F = {
|
|
|
89
90
|
position: "absolute",
|
|
90
91
|
zIndex: 1
|
|
91
92
|
},
|
|
92
|
-
children: /* @__PURE__ */ o(
|
|
93
|
-
height:
|
|
94
|
-
shouldRun:
|
|
95
|
-
width:
|
|
93
|
+
children: /* @__PURE__ */ o(B, {
|
|
94
|
+
height: u,
|
|
95
|
+
shouldRun: u > 0 && h > 0,
|
|
96
|
+
width: h
|
|
96
97
|
})
|
|
97
98
|
}), /* @__PURE__ */ r(t, {
|
|
98
99
|
sx: {
|
|
@@ -102,16 +103,16 @@ var F = {
|
|
|
102
103
|
width: "100%",
|
|
103
104
|
zIndex: 2
|
|
104
105
|
},
|
|
105
|
-
children: [e.categoryStrip &&
|
|
106
|
+
children: [e.categoryStrip && a && /* @__PURE__ */ o(i, {
|
|
106
107
|
sx: {
|
|
107
108
|
bgcolor: "success.main",
|
|
108
109
|
px: 12,
|
|
109
110
|
py: 4
|
|
110
111
|
},
|
|
111
|
-
children: /* @__PURE__ */ o(
|
|
112
|
+
children: /* @__PURE__ */ o(s, {
|
|
112
113
|
color: "success.contrastText",
|
|
113
114
|
variant: "caption",
|
|
114
|
-
children:
|
|
115
|
+
children: a
|
|
115
116
|
})
|
|
116
117
|
}), /* @__PURE__ */ r(t, {
|
|
117
118
|
sx: {
|
|
@@ -133,16 +134,16 @@ var F = {
|
|
|
133
134
|
display: "flex",
|
|
134
135
|
flexShrink: 0
|
|
135
136
|
},
|
|
136
|
-
children:
|
|
137
|
+
children: D
|
|
137
138
|
}), /* @__PURE__ */ r(t, {
|
|
138
139
|
sx: {
|
|
139
140
|
flex: "1 0 0",
|
|
140
141
|
minWidth: 0
|
|
141
142
|
},
|
|
142
143
|
children: [
|
|
143
|
-
e.secondaryPosition === "above" &&
|
|
144
|
-
|
|
145
|
-
e.secondaryPosition === "below" &&
|
|
144
|
+
e.secondaryPosition === "above" && w,
|
|
145
|
+
z,
|
|
146
|
+
e.secondaryPosition === "below" && w
|
|
146
147
|
]
|
|
147
148
|
})]
|
|
148
149
|
})]
|
|
@@ -154,47 +155,48 @@ var F = {
|
|
|
154
155
|
p: 16,
|
|
155
156
|
...e
|
|
156
157
|
},
|
|
157
|
-
children: [
|
|
158
|
+
children: [a && /* @__PURE__ */ o(V, { headerText: a }), /* @__PURE__ */ r(t, {
|
|
158
159
|
sx: {
|
|
159
160
|
alignItems: "center",
|
|
160
161
|
bgcolor: "background.paper",
|
|
161
162
|
borderRadius: "8px",
|
|
162
|
-
...
|
|
163
|
+
...a && {
|
|
163
164
|
borderTopLeftRadius: "0",
|
|
164
165
|
borderTopRightRadius: "0"
|
|
165
166
|
},
|
|
166
167
|
gap: 16,
|
|
167
168
|
p: 16,
|
|
168
169
|
width: "100%",
|
|
169
|
-
...(
|
|
170
|
+
...(f || k || y?.guid) && { flexDirection: "row" }
|
|
170
171
|
},
|
|
171
|
-
children: [/* @__PURE__ */ o(
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
172
|
+
children: [/* @__PURE__ */ o(A, {
|
|
173
|
+
logo: y,
|
|
174
|
+
slot: n,
|
|
175
|
+
variant: c
|
|
176
|
+
}), /* @__PURE__ */ r(t, { children: [l != null && /* @__PURE__ */ o(s, {
|
|
175
177
|
variant: "h1",
|
|
176
|
-
children:
|
|
178
|
+
children: R(l, "0,0.00")
|
|
177
179
|
}), /* @__PURE__ */ r(t, {
|
|
178
180
|
sx: {
|
|
179
181
|
gap: 8,
|
|
180
182
|
flexDirection: "row",
|
|
181
183
|
alignItems: "center"
|
|
182
184
|
},
|
|
183
|
-
children: [e?.sub_logo && /* @__PURE__ */ o(
|
|
185
|
+
children: [e?.sub_logo && /* @__PURE__ */ o(E, {
|
|
184
186
|
color: "warning",
|
|
185
187
|
fill: !0,
|
|
186
188
|
name: e.sub_logo,
|
|
187
189
|
size: 20
|
|
188
|
-
}), /* @__PURE__ */ o(
|
|
190
|
+
}), b && /* @__PURE__ */ o(s, {
|
|
189
191
|
variant: "body2",
|
|
190
|
-
children:
|
|
192
|
+
children: b
|
|
191
193
|
})]
|
|
192
194
|
})] })]
|
|
193
195
|
})]
|
|
194
196
|
});
|
|
195
197
|
};
|
|
196
198
|
export {
|
|
197
|
-
|
|
199
|
+
co as default
|
|
198
200
|
};
|
|
199
201
|
|
|
200
202
|
//# sourceMappingURL=AccountBlock.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccountBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useRef } from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport type { InsightsPayload } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DepositLogo } from '../../../components/ComponentBlocks/DepositLogo'\nimport { Confetti } from '../../../components/shared/Confetti'\nimport { ReactComponent as PaidOffCardGraphic } from '../../../components/shared/images/PaidOffCard.svg'\nimport { ReactComponent as SavingsGraphic } from '../../../components/shared/images/SavingsAccountDeposit.svg'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\n/** Default generic-tile icon per deposit variant, used when no merchant/institution logo. */\nconst depositIcons: Record<string, string> = {\n deposit_received: 'payments',\n status_on_track: 'monetization_on',\n}\n\nconst AccountBlock = ({ payload }: { payload: InsightsPayload; beatGuid?: string }) => {\n const theme = useTheme()\n const containerRef = useRef<HTMLDivElement>(null)\n const { height, width } = useContainerDimensions(containerRef)\n const { instance_slot } = payload\n const {\n variant,\n amount,\n sub_text,\n header_text,\n institution_guid,\n institution_name,\n icon_name,\n label,\n merchant_guid,\n merchant_name,\n category_guid,\n } = instance_slot\n const layoutConfig = resolveVariantConfig(\n getLayoutConfig(theme),\n variant,\n 'default',\n 'AccountBlock',\n )\n\n // Confetti-backed celebration variants (deposits, payoff, savings) — a success-tinted card\n // on a gradient + confetti wash. Everything variant-specific is flat on `layoutConfig`.\n if (layoutConfig?.isConfetti) {\n const graphics: Record<string, React.ReactNode> = {\n paidOffCard: (\n // SVG is 58x46 but the card sits at (0,14) with the check badge overflowing top-right.\n // Box it to the card's real 44x32 footprint and shift the SVG up so it aligns with the text.\n <Box sx={{ flexShrink: 0, height: 32, position: 'relative', width: 44 }}>\n <PaidOffCardGraphic\n aria-hidden={true}\n role=\"presentation\"\n style={{ left: 0, position: 'absolute', top: -14 }}\n />\n </Box>\n ),\n savings: <SavingsGraphic aria-hidden={true} height={55} role=\"presentation\" width={55} />,\n logo: (\n <Box\n sx={{\n borderRadius: '4px',\n flexShrink: 0,\n height: 48,\n overflow: 'hidden',\n width: 48,\n }}\n >\n <DepositLogo\n categoryGuid={category_guid}\n iconName={depositIcons[variant as keyof typeof depositIcons] ?? 'payments'}\n institutionGuid={institution_guid}\n institutionName={institution_name}\n merchantGuid={merchant_guid}\n merchantName={merchant_name}\n />\n </Box>\n ),\n }\n const graphic = graphics[layoutConfig.graphic ?? 'logo']\n\n // Deposit cards show the payer name — a merchant when we have one, otherwise the institution.\n const secondaryText =\n layoutConfig.secondarySource === 'merchant' ? (merchant_name ?? institution_name) : label\n const secondary = secondaryText ? (\n <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n {secondaryText}\n </Text>\n ) : null\n const amountText = (\n <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n </Text>\n )\n\n return (\n <Box\n ref={containerRef}\n sx={{\n backgroundImage: layoutConfig.gradient,\n bgcolor: 'background.paper',\n overflow: 'hidden',\n position: 'relative',\n p: 16,\n width: '100%',\n }}\n >\n <Box\n sx={{\n inset: 0,\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 1,\n }}\n >\n <Confetti height={height} shouldRun={height > 0 && width > 0} width={width} />\n </Box>\n\n <Stack\n sx={{\n borderRadius: '8px',\n overflow: 'hidden',\n position: 'relative',\n width: '100%',\n zIndex: 2,\n }}\n >\n {layoutConfig.categoryStrip && header_text && (\n <Box sx={{ bgcolor: 'success.main', px: 12, py: 4 }}>\n <Text color=\"success.contrastText\" variant=\"caption\">\n {header_text}\n </Text>\n </Box>\n )}\n\n <Stack\n sx={{\n alignItems: 'center',\n bgcolor: 'success.lighter',\n border: '1px solid',\n borderColor: 'success.main',\n borderRadius: '8px',\n // With a strip above, the body's top corners tuck under it (no double border line).\n ...(layoutConfig.categoryStrip && {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderTop: 0,\n }),\n flexDirection: 'row',\n ...layoutConfig.rowSx,\n }}\n >\n <Box sx={{ display: 'flex', flexShrink: 0 }}>{graphic}</Box>\n\n <Stack sx={{ flex: '1 0 0', minWidth: 0 }}>\n {layoutConfig.secondaryPosition === 'above' && secondary}\n {amountText}\n {layoutConfig.secondaryPosition === 'below' && secondary}\n </Stack>\n </Stack>\n </Stack>\n </Box>\n )\n }\n\n return (\n <Stack\n sx={{\n p: 16,\n ...layoutConfig,\n }}\n >\n {header_text && <HeaderComponent headerText={header_text} />}\n <Stack\n sx={{\n alignItems: 'center',\n bgcolor: 'background.paper',\n borderRadius: '8px',\n ...(header_text && {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n }),\n gap: 16,\n p: 16,\n width: '100%',\n ...((institution_guid || icon_name) && {\n flexDirection: 'row',\n }),\n }}\n >\n <IconComponent slot={instance_slot} variant={variant} />\n\n <Stack>\n <Text variant=\"h1\">{formatCurrency(amount, '0,0.00')}</Text>\n <Stack sx={{ gap: 8, flexDirection: 'row', alignItems: 'center' }}>\n {layoutConfig?.sub_logo && (\n <Icon color=\"warning\" fill={true} name={layoutConfig.sub_logo} size={20} />\n )}\n <Text variant=\"body2\">{sub_text}</Text>\n </Stack>\n </Stack>\n </Stack>\n </Stack>\n )\n}\n\nexport default AccountBlock\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,IAAM,IAAuC;AAAA,EAC3C,kBAAkB;AAAA,EAClB,iBAAiB;AACnB,GAEM,KAAA,CAAgB,EAAE,SAAA,EAAA,MAA+D;AACrF,QAAM,IAAQ,EAAS,GACjB,IAAe,EAAuB,IAAI,GAC1C,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAuB,CAAY,GACvD,EAAE,eAAA,EAAA,IAAkB,GACpB,EACJ,SAAA,GACA,QAAA,GACA,UAAA,GACA,aAAA,GACA,kBAAA,GACA,kBAAA,GACA,WAAA,GACA,OAAA,GACA,eAAA,GACA,eAAA,GACA,eAAA,EAAA,IACE,GACE,IAAe,EACnB,EAAgB,CAAK,GACrB,GACA,WACA,cACF;AAIA,MAAI,GAAc,YAAY;AAmC5B,UAAM,IAAU;AAAA,MAjCd,aAGE,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,YAAY;AAAA,UAAG,QAAQ;AAAA,UAAI,UAAU;AAAA,UAAY,OAAO;AAAA,QAAG;AAAA,QACpE,UAAA,gBAAA,EAAC,GAAD;AAAA,UACE,eAAa;AAAA,UACb,MAAK;AAAA,UACL,OAAO;AAAA,YAAE,MAAM;AAAA,YAAG,UAAU;AAAA,YAAY,KAAK;AAAA,UAAI;AAAA,QAClD,CAAA;AAAA,MACE,CAAA;AAAA,MAEP,SAAS,gBAAA,EAAC,GAAD;AAAA,QAAgB,eAAa;AAAA,QAAM,QAAQ;AAAA,QAAI,MAAK;AAAA,QAAe,OAAO;AAAA,MAAK,CAAA;AAAA,MACxF,MACE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,UACE,cAAc;AAAA,UACd,UAAU,EAAa,CAAA,KAAyC;AAAA,UAChE,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,cAAc;AAAA,QACf,CAAA;AAAA,MACE,CAAA;AAAA,IAGO,EAAS,EAAa,WAAW,MAAA,GAG3C,IACJ,EAAa,oBAAoB,aAAc,KAAiB,IAAoB,GAChF,IAAY,IAChB,gBAAA,EAAC,GAAD;AAAA,MAAM,OAAO,EAAa;AAAA,MAAgB,SAAS,EAAa;AAAA,MAC7D,UAAA;AAAA,IACG,CAAA,IACJ,MACE,IACJ,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,OAAM;AAAA,MAAe,SAAS,EAAa;AAAA,MAC1D,UAAA,GAAG,EAAa,gBAAgB,EAAA,GAAK,EAAe,GAAQ,QAAQ,CAAA;AAAA,IACjE,CAAA;AAGR,WACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,IAAI;AAAA,QACF,iBAAiB,EAAa;AAAA,QAC9B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,GAAG;AAAA,QACH,OAAO;AAAA,MACT;AAAA,MATF,UAAA,CAWE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,OAAO;AAAA,UACP,eAAe;AAAA,UACf,UAAU;AAAA,UACV,QAAQ;AAAA,QACV;AAAA,QAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAkB,QAAA;AAAA,UAAQ,WAAW,IAAS,KAAK,IAAQ;AAAA,UAAU,OAAA;AAAA,QAAQ,CAAA;AAAA,MAC1E,CAAA,GAEL,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,cAAc;AAAA,UACd,UAAU;AAAA,UACV,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QAPF,UAAA,CASG,EAAa,iBAAiB,KAC7B,gBAAA,EAAC,GAAD;AAAA,UAAK,IAAI;AAAA,YAAE,SAAS;AAAA,YAAgB,IAAI;AAAA,YAAI,IAAI;AAAA,UAAE;AAAA,UAChD,UAAA,gBAAA,EAAC,GAAD;AAAA,YAAM,OAAM;AAAA,YAAuB,SAAQ;AAAA,YACxC,UAAA;AAAA,UACG,CAAA;AAAA,QACH,CAAA,GAGP,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,QAAQ;AAAA,YACR,aAAa;AAAA,YACb,cAAc;AAAA,YAEd,GAAI,EAAa,iBAAiB;AAAA,cAChC,qBAAqB;AAAA,cACrB,sBAAsB;AAAA,cACtB,WAAW;AAAA,YACb;AAAA,YACA,eAAe;AAAA,YACf,GAAG,EAAa;AAAA,UAClB;AAAA,UAfF,UAAA,CAiBE,gBAAA,EAAC,GAAD;AAAA,YAAK,IAAI;AAAA,cAAE,SAAS;AAAA,cAAQ,YAAY;AAAA,YAAE;AAAA,YAAI,UAAA;AAAA,UAAa,CAAA,GAE3D,gBAAA,EAAC,GAAD;AAAA,YAAO,IAAI;AAAA,cAAE,MAAM;AAAA,cAAS,UAAU;AAAA,YAAE;AAAA,YAAxC,UAAA;AAAA,cACG,EAAa,sBAAsB,WAAW;AAAA,cAC9C;AAAA,cACA,EAAa,sBAAsB,WAAW;AAAA,YAC1C;AAAA,UACF,CAAA,CAAA;AAAA,QACF,CAAA,CAAA;AAAA,MACJ,CAAA,CAAA;AAAA;EAET;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IAJF,UAAA,CAMG,KAAe,gBAAA,EAAC,GAAD,EAAiB,YAAY,EAAc,CAAA,GAC3D,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,cAAc;AAAA,QACd,GAAI,KAAe;AAAA,UACjB,qBAAqB;AAAA,UACrB,sBAAsB;AAAA,QACxB;AAAA,QACA,KAAK;AAAA,QACL,GAAG;AAAA,QACH,OAAO;AAAA,QACP,IAAK,KAAoB,MAAc,EACrC,eAAe,MACjB;AAAA,MACF;AAAA,MAfF,UAAA,CAiBE,gBAAA,EAAC,GAAD;AAAA,QAAe,MAAM;AAAA,QAAwB,SAAA;AAAA,MAAU,CAAA,GAEvD,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAQ;AAAA,QAAM,UAAA,EAAe,GAAQ,QAAQ;AAAA,MAAQ,CAAA,GAC3D,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,KAAK;AAAA,UAAG,eAAe;AAAA,UAAO,YAAY;AAAA,QAAS;AAAA,QAAhE,UAAA,CACG,GAAc,YACb,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAU,MAAM;AAAA,UAAM,MAAM,EAAa;AAAA,UAAU,MAAM;AAAA,QAAK,CAAA,GAE5E,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,UAAS,UAAA;AAAA,QAAe,CAAA,CACjC;AAAA,MACF,CAAA,CAAA,EAAA,CAAA,CACF;AAAA,IACF,CAAA,CAAA;AAAA;AAEX"}
|
|
1
|
+
{"version":3,"file":"AccountBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useRef } from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { slot, type InsightsPayload, type LogoRef } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DepositLogo } from '../../../components/ComponentBlocks/DepositLogo'\nimport { Confetti } from '../../../components/shared/Confetti'\nimport { ReactComponent as PaidOffCardGraphic } from '../../../components/shared/images/PaidOffCard.svg'\nimport { ReactComponent as SavingsGraphic } from '../../../components/shared/images/SavingsAccountDeposit.svg'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\n/** Default generic-tile icon per deposit variant, used when no merchant/institution logo. */\nconst depositIcons: Record<string, string> = {\n deposit_received: 'payments',\n status_on_track: 'monetization_on',\n}\n\nconst AccountBlock = ({ payload }: { payload: InsightsPayload; beatGuid?: string }) => {\n const theme = useTheme()\n const containerRef = useRef<HTMLDivElement>(null)\n const { height, width } = useContainerDimensions(containerRef)\n const { instance_slot } = payload\n const {\n variant,\n header_text,\n institution_guid,\n institution_name,\n icon_name,\n label,\n merchant_guid,\n merchant_name,\n category_guid,\n } = instance_slot\n // V2 variants fill `instance_slot.data` (ditto's account_block slots); the rest still send the\n // flat legacy fields, so each value falls back to its flat field.\n const { data } = instance_slot\n const amount = slot<number>(data, 'amount') ?? instance_slot.amount\n const sub_text = slot<string>(data, 'sub_text') ?? instance_slot.sub_text\n const logo = slot<LogoRef>(data, 'logo')\n const layoutConfig = resolveVariantConfig(\n getLayoutConfig(theme),\n variant,\n 'default',\n 'AccountBlock',\n )\n\n // Confetti-backed celebration variants (deposits, payoff, savings) — a success-tinted card\n // on a gradient + confetti wash. Everything variant-specific is flat on `layoutConfig`.\n if (layoutConfig?.isConfetti) {\n const graphics: Record<string, React.ReactNode> = {\n paidOffCard: (\n // SVG is 58x46 but the card sits at (0,14) with the check badge overflowing top-right.\n // Box it to the card's real 44x32 footprint and shift the SVG up so it aligns with the text.\n <Box sx={{ flexShrink: 0, height: 32, position: 'relative', width: 44 }}>\n <PaidOffCardGraphic\n aria-hidden={true}\n role=\"presentation\"\n style={{ left: 0, position: 'absolute', top: -14 }}\n />\n </Box>\n ),\n savings: <SavingsGraphic aria-hidden={true} height={55} role=\"presentation\" width={55} />,\n logo: (\n <Box\n sx={{\n borderRadius: '4px',\n flexShrink: 0,\n height: 48,\n overflow: 'hidden',\n width: 48,\n }}\n >\n <DepositLogo\n categoryGuid={category_guid}\n iconName={depositIcons[variant as keyof typeof depositIcons] ?? 'payments'}\n institutionGuid={institution_guid}\n institutionName={institution_name}\n merchantGuid={merchant_guid}\n merchantName={merchant_name}\n />\n </Box>\n ),\n }\n const graphic = graphics[layoutConfig.graphic ?? 'logo']\n\n // Deposit cards show the payer name — a merchant when we have one, otherwise the institution.\n const secondaryText =\n layoutConfig.secondarySource === 'merchant' ? (merchant_name ?? institution_name) : label\n const secondary = secondaryText ? (\n <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n {secondaryText}\n </Text>\n ) : null\n const amountText = (\n <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n </Text>\n )\n\n return (\n <Box\n ref={containerRef}\n sx={{\n backgroundImage: layoutConfig.gradient,\n bgcolor: 'background.paper',\n overflow: 'hidden',\n position: 'relative',\n p: 16,\n width: '100%',\n }}\n >\n <Box\n sx={{\n inset: 0,\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 1,\n }}\n >\n <Confetti height={height} shouldRun={height > 0 && width > 0} width={width} />\n </Box>\n\n <Stack\n sx={{\n borderRadius: '8px',\n overflow: 'hidden',\n position: 'relative',\n width: '100%',\n zIndex: 2,\n }}\n >\n {layoutConfig.categoryStrip && header_text && (\n <Box sx={{ bgcolor: 'success.main', px: 12, py: 4 }}>\n <Text color=\"success.contrastText\" variant=\"caption\">\n {header_text}\n </Text>\n </Box>\n )}\n\n <Stack\n sx={{\n alignItems: 'center',\n bgcolor: 'success.lighter',\n border: '1px solid',\n borderColor: 'success.main',\n borderRadius: '8px',\n // With a strip above, the body's top corners tuck under it (no double border line).\n ...(layoutConfig.categoryStrip && {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderTop: 0,\n }),\n flexDirection: 'row',\n ...layoutConfig.rowSx,\n }}\n >\n <Box sx={{ display: 'flex', flexShrink: 0 }}>{graphic}</Box>\n\n <Stack sx={{ flex: '1 0 0', minWidth: 0 }}>\n {layoutConfig.secondaryPosition === 'above' && secondary}\n {amountText}\n {layoutConfig.secondaryPosition === 'below' && secondary}\n </Stack>\n </Stack>\n </Stack>\n </Box>\n )\n }\n\n return (\n <Stack\n sx={{\n p: 16,\n ...layoutConfig,\n }}\n >\n {header_text && <HeaderComponent headerText={header_text} />}\n <Stack\n sx={{\n alignItems: 'center',\n bgcolor: 'background.paper',\n borderRadius: '8px',\n ...(header_text && {\n borderTopLeftRadius: '0',\n borderTopRightRadius: '0',\n }),\n gap: 16,\n p: 16,\n width: '100%',\n ...((institution_guid || icon_name || logo?.guid) && {\n flexDirection: 'row',\n }),\n }}\n >\n <IconComponent logo={logo} slot={instance_slot} variant={variant} />\n\n <Stack>\n {amount != null && <Text variant=\"h1\">{formatCurrency(amount, '0,0.00')}</Text>}\n <Stack sx={{ gap: 8, flexDirection: 'row', alignItems: 'center' }}>\n {layoutConfig?.sub_logo && (\n <Icon color=\"warning\" fill={true} name={layoutConfig.sub_logo} size={20} />\n )}\n {sub_text && <Text variant=\"body2\">{sub_text}</Text>}\n </Stack>\n </Stack>\n </Stack>\n </Stack>\n )\n}\n\nexport default AccountBlock\n"],"mappings":"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"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { InstanceSlot } from '../../../../core';
|
|
1
|
+
import { InstanceSlot, LogoRef } from '../../../../core';
|
|
2
2
|
interface IconComponentProps {
|
|
3
3
|
slot: InstanceSlot;
|
|
4
4
|
variant?: string | null;
|
|
5
|
+
/** V2: the slot's logo object (`instance_slot.data.logo`), badged with the layout's `badge`. */
|
|
6
|
+
logo?: LogoRef;
|
|
5
7
|
}
|
|
6
|
-
export declare const IconComponent: ({ slot, variant }: IconComponentProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
8
|
+
export declare const IconComponent: ({ slot, variant, logo }: IconComponentProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
7
9
|
export {};
|