@mx-cartographer/experiences 9.6.7 → 9.6.9

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.
Files changed (50) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/common/components/Banner.es.js +66 -26
  3. package/dist/common/components/Banner.es.js.map +1 -1
  4. package/dist/common/components/ConnectDrawer.d.ts +2 -0
  5. package/dist/common/components/ConnectDrawer.es.js +15 -14
  6. package/dist/common/components/ConnectDrawer.es.js.map +1 -1
  7. package/dist/common/components/ConnectWidgetPanel.d.ts +2 -0
  8. package/dist/common/components/ConnectWidgetPanel.es.js +48 -39
  9. package/dist/common/components/ConnectWidgetPanel.es.js.map +1 -1
  10. package/dist/common/constants/Analytics.d.ts +6 -0
  11. package/dist/common/constants/Analytics.es.js +7 -1
  12. package/dist/common/constants/Analytics.es.js.map +1 -1
  13. package/dist/common/constants/Connect.d.ts +7 -0
  14. package/dist/common/constants/Connect.es.js +6 -4
  15. package/dist/common/constants/Connect.es.js.map +1 -1
  16. package/dist/common/constants/index.d.ts +2 -1
  17. package/dist/common/index.es.js +95 -93
  18. package/dist/core/api/BannerApi.d.ts +1 -0
  19. package/dist/core/api/BannerApi.es.js +4 -2
  20. package/dist/core/api/BannerApi.es.js.map +1 -1
  21. package/dist/core/stores/AppDataStore.d.ts +1 -0
  22. package/dist/core/stores/AppDataStore.es.js +9 -2
  23. package/dist/core/stores/AppDataStore.es.js.map +1 -1
  24. package/dist/core/types/AppData.d.ts +2 -0
  25. package/dist/core/types/localization/InsightsFeedCopy.d.ts +1 -1
  26. package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/layout.es.js +6 -6
  27. package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/layout.es.js.map +1 -1
  28. package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.d.ts +2 -2
  29. package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.es.js +15 -15
  30. package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.es.js.map +1 -1
  31. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.d.ts +1 -1
  32. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js +1 -1
  33. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js.map +1 -1
  34. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.d.ts +1 -1
  35. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js +16 -16
  36. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js.map +1 -1
  37. package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js +6 -7
  38. package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js.map +1 -1
  39. package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.d.ts +1 -1
  40. package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.es.js +14 -30
  41. package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.es.js.map +1 -1
  42. package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.d.ts +8 -8
  43. package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.es.js +14 -14
  44. package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.es.js.map +1 -1
  45. package/dist/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/UpcomingSubscriptionBlock.es.js +1 -1
  46. package/dist/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/UpcomingSubscriptionBlock.es.js.map +1 -1
  47. package/dist/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/layout.d.ts +4 -3
  48. package/dist/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/layout.es.js +2 -2
  49. package/dist/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/layout.es.js.map +1 -1
  50. package/package.json +1 -1
@@ -1,36 +1,36 @@
1
1
  import { buildDynamicCopy as i } from "../../../../core/utils/Localization.es.js";
2
- import { DATE_FORMATS_INTL as u, formatDate as _ } from "../../../../core/constants/DateFormats.es.js";
2
+ import { DATE_FORMATS_INTL as u, formatDate as c } from "../../../../core/constants/DateFormats.es.js";
3
3
  import { formatCurrency as m } from "../../../../core/utils/NumberFormatting.es.js";
4
- import { getCategoryColor as c } from "../../../../core/utils/CategoryUtil.es.js";
5
- import { getLayoutConfig as C } from "./layout.es.js";
6
- import { parseISO as p } from "date-fns/parseISO";
4
+ import { getCategoryColor as C } from "../../../../core/utils/CategoryUtil.es.js";
5
+ import { getLayoutConfig as p } from "./layout.es.js";
6
+ import { parseISO as _ } from "date-fns/parseISO";
7
7
  var l = {
8
8
  CATEGORY_COLOR: "category_color",
9
- SAVINGS_ACCOUNT_BALANCES_SUMMARY: "savings_account_balances_summary",
9
+ ACCOUNT_BALANCE: "account_balance",
10
10
  MONTHLY_SPEND_COMPARISON: "monthly_spend_comparison"
11
- }, g = (t) => t ? t.data ? t.data.map((o) => {
11
+ }, s = (a) => a ? a.data ? a.data.map((o) => {
12
12
  const e = {};
13
- return t.names?.map((r, a) => {
14
- e[r] = o[a];
13
+ return a.names?.map((r, t) => {
14
+ e[r] = o[t];
15
15
  }), e;
16
- }) : [] : [], y = (t, o, e = u.MONTH_SHORT) => [...t].sort((r, a) => !r.date || !a.date ? 0 : new Date(r.date).getTime() - new Date(a.date).getTime()).map((r) => {
17
- const a = r.date ? _(p(r.date), e) : r.label ?? "", n = r.amount ?? 0;
16
+ }) : [] : [], y = (a, o, e = u.MONTH_SHORT) => [...a].sort((r, t) => !r.date || !t.date ? 0 : new Date(r.date).getTime() - new Date(t.date).getTime()).map((r) => {
17
+ const t = r.date ? c(_(r.date), e) : r.label ?? "", n = r.amount ?? 0;
18
18
  return {
19
- ariaLabel: i(o, a, m(n, "0.00")),
19
+ ariaLabel: i(o, t, m(n, "0.00")),
20
20
  date: r.date ?? null,
21
- label: a,
21
+ label: t,
22
22
  value: n,
23
23
  formattedAmount: m(n, "0,0")
24
24
  };
25
- }), R = (t, o, e) => {
26
- const { variant: r } = t, a = C(e);
27
- return r === l.CATEGORY_COLOR && o.category_guid ? { color: c(o.category_guid, e) } : { color: a[r]?.color ?? e.palette.primary.main };
25
+ }), R = (a, o, e) => {
26
+ const { variant: r } = a, t = p(e);
27
+ return r === l.CATEGORY_COLOR && o.category_guid ? { color: C(o.category_guid, e) } : { color: t[r]?.color ?? e.palette.primary.main };
28
28
  };
29
29
  export {
30
30
  l as BAR_CHART_VARIANTS,
31
31
  R as barChartVariant,
32
32
  y as buildChartData,
33
- g as buildDataSeries
33
+ s as buildDataSeries
34
34
  };
35
35
 
36
36
  //# sourceMappingURL=utils.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\n\nimport { parseISO } from 'date-fns/parseISO'\n\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DataSeries, InstanceSlot } from '../../../../core'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n CATEGORY_COLOR: 'category_color',\n SAVINGS_ACCOUNT_BALANCES_SUMMARY: 'savings_account_balances_summary',\n MONTHLY_SPEND_COMPARISON: 'monthly_spend_comparison',\n}\n\nexport interface ChartDataSeriesItem {\n date?: string\n amount?: number\n guid?: string\n label?: string\n aggregated_guids?: string[]\n localized_label?: string\n category_guid?: string\n}\n\nexport const buildDataSeries = (data: DataSeries | undefined): ChartDataSeriesItem[] => {\n if (!data) {\n return []\n }\n\n if (data.data) {\n return data.data.map((d) => {\n const item: any = {}\n\n data.names?.map((name, index) => {\n item[name] = d[index]\n })\n return item\n })\n } else {\n return []\n }\n}\n\nexport const buildChartData = (\n dataSeries: ChartDataSeriesItem[],\n ariaLabel: string,\n dateFormat: Parameters<typeof formatDate>[1] = DATE_FORMATS_INTL.MONTH_SHORT,\n) => {\n const data = [...dataSeries]\n .sort((a, b) => {\n if (!a.date || !b.date) return 0\n\n return new Date(a.date).getTime() - new Date(b.date).getTime()\n })\n .map((total) => {\n const label = total.date ? formatDate(parseISO(total.date), dateFormat) : (total.label ?? '')\n const amount = total.amount ?? 0\n\n return {\n ariaLabel: buildDynamicCopy(ariaLabel, label, formatCurrency(amount, '0.00')) as string,\n date: total.date ?? null,\n label,\n value: amount,\n formattedAmount: formatCurrency(amount, '0,0'),\n }\n })\n\n return data\n}\n\nexport const barChartVariant = (\n instanceSlot: InstanceSlot,\n instanceSlotData: InsightsInstanceSlotData,\n theme: Theme,\n) => {\n const { variant } = instanceSlot\n const barChartLayout = getLayoutConfig(theme)\n if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && instanceSlotData.category_guid) {\n const categoryColor = getCategoryColor(instanceSlotData.category_guid, theme)\n return {\n color: categoryColor,\n }\n }\n return {\n color:\n barChartLayout[variant as keyof typeof barChartLayout]?.color ?? theme.palette.primary.main,\n }\n}\n"],"mappings":";;;;;;AAYA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,kCAAkC;AAAA,EAClC,0BAA0B;AAC5B,GAYa,IAAA,CAAmB,MACzB,IAID,EAAK,OACA,EAAK,KAAK,IAAA,CAAK,MAAM;AAC1B,QAAM,IAAY,CAAC;AAEnB,SAAA,EAAK,OAAO,IAAA,CAAK,GAAM,MAAU;AAC/B,IAAA,EAAK,CAAA,IAAQ,EAAE,CAAA;AAAA,EACjB,CAAC,GACM;AACT,CAAC,IAEM,CAAC,IAbD,CAAC,GAiBC,IAAA,CACX,GACA,GACA,IAA+C,EAAkB,gBAEpD,CAAC,GAAG,CAAU,EACxB,KAAA,CAAM,GAAG,MACJ,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAa,IAExB,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAC9D,EACA,IAAA,CAAK,MAAU;AACd,QAAM,IAAQ,EAAM,OAAO,EAAW,EAAS,EAAM,IAAI,GAAG,CAAU,IAAK,EAAM,SAAS,IACpF,IAAS,EAAM,UAAU;AAE/B,SAAO;AAAA,IACL,WAAW,EAAiB,GAAW,GAAO,EAAe,GAAQ,MAAM,CAAC;AAAA,IAC5E,MAAM,EAAM,QAAQ;AAAA,IACpB,OAAA;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,EAAe,GAAQ,KAAK;AAAA,EAC/C;AACF,CAEK,GAGI,IAAA,CACX,GACA,GACA,MACG;AACH,QAAM,EAAE,SAAA,EAAA,IAAY,GACd,IAAiB,EAAgB,CAAK;AAC5C,SAAI,MAAY,EAAmB,kBAAkB,EAAiB,gBAE7D,EACL,OAFoB,EAAiB,EAAiB,eAAe,CAE9D,EACT,IAEK,EACL,OACE,EAAe,CAAA,GAAyC,SAAS,EAAM,QAAQ,QAAQ,KAC3F;AACF"}
1
+ {"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\n\nimport { parseISO } from 'date-fns/parseISO'\n\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DataSeries, InstanceSlot } from '../../../../core'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n CATEGORY_COLOR: 'category_color',\n ACCOUNT_BALANCE: 'account_balance',\n MONTHLY_SPEND_COMPARISON: 'monthly_spend_comparison',\n}\n\nexport interface ChartDataSeriesItem {\n date?: string\n amount?: number\n guid?: string\n label?: string\n aggregated_guids?: string[]\n localized_label?: string\n category_guid?: string\n}\n\nexport const buildDataSeries = (data: DataSeries | undefined): ChartDataSeriesItem[] => {\n if (!data) {\n return []\n }\n\n if (data.data) {\n return data.data.map((d) => {\n const item: any = {}\n\n data.names?.map((name, index) => {\n item[name] = d[index]\n })\n return item\n })\n } else {\n return []\n }\n}\n\nexport const buildChartData = (\n dataSeries: ChartDataSeriesItem[],\n ariaLabel: string,\n dateFormat: Parameters<typeof formatDate>[1] = DATE_FORMATS_INTL.MONTH_SHORT,\n) => {\n const data = [...dataSeries]\n .sort((a, b) => {\n if (!a.date || !b.date) return 0\n\n return new Date(a.date).getTime() - new Date(b.date).getTime()\n })\n .map((total) => {\n const label = total.date ? formatDate(parseISO(total.date), dateFormat) : (total.label ?? '')\n const amount = total.amount ?? 0\n\n return {\n ariaLabel: buildDynamicCopy(ariaLabel, label, formatCurrency(amount, '0.00')) as string,\n date: total.date ?? null,\n label,\n value: amount,\n formattedAmount: formatCurrency(amount, '0,0'),\n }\n })\n\n return data\n}\n\nexport const barChartVariant = (\n instanceSlot: InstanceSlot,\n instanceSlotData: InsightsInstanceSlotData,\n theme: Theme,\n) => {\n const { variant } = instanceSlot\n const barChartLayout = getLayoutConfig(theme)\n if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && instanceSlotData.category_guid) {\n const categoryColor = getCategoryColor(instanceSlotData.category_guid, theme)\n return {\n color: categoryColor,\n }\n }\n return {\n color:\n barChartLayout[variant as keyof typeof barChartLayout]?.color ?? theme.palette.primary.main,\n }\n}\n"],"mappings":";;;;;;AAYA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,0BAA0B;AAC5B,GAYa,IAAA,CAAmB,MACzB,IAID,EAAK,OACA,EAAK,KAAK,IAAA,CAAK,MAAM;AAC1B,QAAM,IAAY,CAAC;AAEnB,SAAA,EAAK,OAAO,IAAA,CAAK,GAAM,MAAU;AAC/B,IAAA,EAAK,CAAA,IAAQ,EAAE,CAAA;AAAA,EACjB,CAAC,GACM;AACT,CAAC,IAEM,CAAC,IAbD,CAAC,GAiBC,IAAA,CACX,GACA,GACA,IAA+C,EAAkB,gBAEpD,CAAC,GAAG,CAAU,EACxB,KAAA,CAAM,GAAG,MACJ,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAa,IAExB,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAC9D,EACA,IAAA,CAAK,MAAU;AACd,QAAM,IAAQ,EAAM,OAAO,EAAW,EAAS,EAAM,IAAI,GAAG,CAAU,IAAK,EAAM,SAAS,IACpF,IAAS,EAAM,UAAU;AAE/B,SAAO;AAAA,IACL,WAAW,EAAiB,GAAW,GAAO,EAAe,GAAQ,MAAM,CAAC;AAAA,IAC5E,MAAM,EAAM,QAAQ;AAAA,IACpB,OAAA;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,EAAe,GAAQ,KAAK;AAAA,EAC/C;AACF,CAEK,GAGI,IAAA,CACX,GACA,GACA,MACG;AACH,QAAM,EAAE,SAAA,EAAA,IAAY,GACd,IAAiB,EAAgB,CAAK;AAC5C,SAAI,MAAY,EAAmB,kBAAkB,EAAiB,gBAE7D,EACL,OAFoB,EAAiB,EAAiB,eAAe,CAE9D,EACT,IAEK,EACL,OACE,EAAe,CAAA,GAAyC,SAAS,EAAM,QAAQ,QAAQ,KAC3F;AACF"}
@@ -16,11 +16,10 @@ import { jsx as o, jsxs as r } from "react/jsx-runtime";
16
16
  import { useTheme as A } from "@mui/material/styles";
17
17
  import i from "@mui/material/Box";
18
18
  var F = {
19
- unified_deposit: "payments",
20
- unified_deposit_emergency_fund: "payments",
19
+ deposit_received: "payments",
21
20
  status_on_track: "monetization_on"
22
21
  }, io = ({ payload: y }) => {
23
- const v = A(), c = V(null), { height: d, width: l } = S(c), { instance_slot: m } = y, { variant: s, amount: p, sub_text: w, header_text: n, institution_guid: u, institution_name: h, icon_name: _, label: R, merchant_guid: C, merchant_name: f, category_guid: k } = m, e = B(N(v), s, "default", "AccountBlock");
22
+ const v = A(), c = V(null), { height: d, width: l } = S(c), { instance_slot: m } = y, { variant: s, amount: p, sub_text: w, header_text: n, institution_guid: h, institution_name: u, icon_name: R, label: _, merchant_guid: C, merchant_name: f, category_guid: k } = m, e = B(N(v), s, "default", "AccountBlock");
24
23
  if (e?.isConfetti) {
25
24
  const T = {
26
25
  paidOffCard: /* @__PURE__ */ o(i, {
@@ -57,13 +56,13 @@ var F = {
57
56
  children: /* @__PURE__ */ o(D, {
58
57
  categoryGuid: k,
59
58
  iconName: F[s] ?? "payments",
60
- institutionGuid: u,
61
- institutionName: h,
59
+ institutionGuid: h,
60
+ institutionName: u,
62
61
  merchantGuid: C,
63
62
  merchantName: f
64
63
  })
65
64
  })
66
- }[e.graphic ?? "logo"], g = e.secondarySource === "merchant" ? f ?? h : R, x = g ? /* @__PURE__ */ o(a, {
65
+ }[e.graphic ?? "logo"], g = e.secondarySource === "merchant" ? f ?? u : _, x = g ? /* @__PURE__ */ o(a, {
67
66
  color: e.secondaryColor,
68
67
  variant: e.secondaryVariant,
69
68
  children: g
@@ -167,7 +166,7 @@ var F = {
167
166
  gap: 16,
168
167
  p: 16,
169
168
  width: "100%",
170
- ...(u || _) && { flexDirection: "row" }
169
+ ...(h || R) && { flexDirection: "row" }
171
170
  },
172
171
  children: [/* @__PURE__ */ o(P, {
173
172
  slot: m,
@@ -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 unified_deposit: 'payments',\n unified_deposit_emergency_fund: '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":"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"}
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"}
@@ -4,7 +4,7 @@ export interface BlockLayoutConfig {
4
4
  logo_color?: string;
5
5
  logo_bGcolor?: string;
6
6
  logo_border_color?: string;
7
- /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on transparent_overdraft). */
7
+ /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */
8
8
  sub_logo?: string;
9
9
  /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */
10
10
  isConfetti?: boolean;
@@ -1,41 +1,25 @@
1
- import { CELEBRATION_GRADIENT as a, WARM_LIME_ACCENT_GRADIENT as r } from "../../../components/celebrationGradients.es.js";
1
+ import { CELEBRATION_GRADIENT as o, WARM_LIME_ACCENT_GRADIENT as a } from "../../../components/celebrationGradients.es.js";
2
2
  import { alpha as e } from "@mui/material/styles";
3
- var i = (o) => ({
4
- transparent_overdraft: {
5
- background: o.palette.warning.light,
3
+ var i = (r) => ({
4
+ overdraft_warning: {
5
+ background: r.palette.warning.light,
6
6
  sub_logo: "error"
7
7
  },
8
- low_account_balance: { background: "linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)" },
8
+ low_balance_alert: { background: "linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)" },
9
9
  status_off_track: {
10
10
  logo_color: "background.paper",
11
11
  logo_bGcolor: "error.main",
12
12
  background: "linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)"
13
13
  },
14
- monthly_credit_card_interest_summary: {
14
+ interest_charges_summary: {
15
15
  logo_color: "text.primary",
16
- logo_bGcolor: e(o.palette.categories?.feesCharges || "", 0.25),
16
+ logo_bGcolor: e(r.palette.categories?.feesCharges || "", 0.25),
17
17
  logo_border_color: "categories.feesCharges",
18
18
  background: "linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)"
19
19
  },
20
- unified_deposit: {
20
+ deposit_received: {
21
21
  isConfetti: !0,
22
- gradient: r,
23
- graphic: "logo",
24
- amountVariant: "h3",
25
- amountPrefix: "+",
26
- categoryStrip: !0,
27
- rowSx: {
28
- gap: 12,
29
- p: 12
30
- },
31
- secondarySource: "merchant",
32
- secondaryPosition: "below",
33
- secondaryVariant: "body2",
34
- secondaryColor: "text.primary"
35
- },
36
- unified_deposit_emergency_fund: {
37
- isConfetti: !0,
38
- gradient: r,
22
+ gradient: a,
39
23
  graphic: "logo",
40
24
  amountVariant: "h3",
41
25
  amountPrefix: "+",
@@ -51,7 +35,7 @@ var i = (o) => ({
51
35
  },
52
36
  status_on_track: {
53
37
  isConfetti: !0,
54
- gradient: r,
38
+ gradient: a,
55
39
  graphic: "logo",
56
40
  amountVariant: "h2",
57
41
  rowSx: {
@@ -63,9 +47,9 @@ var i = (o) => ({
63
47
  secondaryVariant: "caption",
64
48
  secondaryColor: "text.secondary"
65
49
  },
66
- celebrate_credit_card_payoff: {
50
+ payoff_celebration: {
67
51
  isConfetti: !0,
68
- gradient: a,
52
+ gradient: o,
69
53
  graphic: "paidOffCard",
70
54
  amountVariant: "h2",
71
55
  rowSx: {
@@ -78,9 +62,9 @@ var i = (o) => ({
78
62
  secondaryVariant: "caption",
79
63
  secondaryColor: "text.secondary"
80
64
  },
81
- savings_account_deposit: {
65
+ savings_deposit: {
82
66
  isConfetti: !0,
83
- gradient: a,
67
+ gradient: o,
84
68
  graphic: "savings",
85
69
  amountVariant: "h2",
86
70
  rowSx: {
@@ -1 +1 @@
1
- {"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.ts"],"sourcesContent":["import { alpha, type SxProps, type Theme } from '@mui/material/styles'\n\nimport {\n CELEBRATION_GRADIENT,\n WARM_LIME_ACCENT_GRADIENT,\n} from '../../../components/celebrationGradients'\n\nexport interface BlockLayoutConfig {\n background?: string\n logo_color?: string\n logo_bGcolor?: string\n logo_border_color?: string\n /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on transparent_overdraft). */\n sub_logo?: string\n /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */\n isConfetti?: boolean\n /** Gradient wash layered over `background.paper` for the confetti card. */\n gradient?: string\n /** Which illustration sits left of the text. `logo` is the data-driven merchant/institution logo. */\n graphic?: 'paidOffCard' | 'savings' | 'logo'\n /** Amount typography variant — `h2` for milestones, `h3` for deposits. */\n amountVariant?: 'h2' | 'h3'\n /** Prefix prepended to the formatted amount, e.g. `+` for deposits. */\n amountPrefix?: string\n /** Render the colored category strip (`header_text`) at the top of the card. */\n categoryStrip?: boolean\n /** Layout overrides for the graphic+text row (padding, gap). */\n rowSx?: SxProps\n /** Which payload field feeds the secondary line beside the amount. */\n secondarySource?: 'merchant' | 'label'\n /** Whether the secondary line sits above or below the amount. */\n secondaryPosition?: 'above' | 'below'\n /** Typography variant for the secondary line. */\n secondaryVariant?: 'body2' | 'caption'\n /** Theme color path for the secondary line. */\n secondaryColor?: string\n}\n\nexport const getLayoutConfig = (theme: Theme): Record<string, BlockLayoutConfig> => {\n return {\n transparent_overdraft: {\n background: theme.palette.warning.light,\n sub_logo: 'error',\n },\n low_account_balance: {\n background:\n 'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\n },\n // Shared on/off-track status pair — used by Monthly Obligations Status and\n // Payday Cash Left Over Status (identical designs, different copy).\n status_off_track: {\n logo_color: 'background.paper',\n logo_bGcolor: 'error.main',\n background:\n 'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\n },\n monthly_credit_card_interest_summary: {\n logo_color: 'text.primary',\n logo_bGcolor: alpha(theme.palette.categories?.feesCharges || '', 0.25),\n logo_border_color: 'categories.feesCharges',\n background:\n 'linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)',\n },\n unified_deposit: {\n isConfetti: true,\n gradient: WARM_LIME_ACCENT_GRADIENT,\n graphic: 'logo',\n amountVariant: 'h3',\n amountPrefix: '+',\n categoryStrip: true,\n rowSx: { gap: 12, p: 12 },\n secondarySource: 'merchant',\n secondaryPosition: 'below',\n secondaryVariant: 'body2',\n secondaryColor: 'text.primary',\n },\n unified_deposit_emergency_fund: {\n isConfetti: true,\n gradient: WARM_LIME_ACCENT_GRADIENT,\n graphic: 'logo',\n amountVariant: 'h3',\n amountPrefix: '+',\n categoryStrip: true,\n rowSx: { gap: 12, p: 12 },\n secondarySource: 'merchant',\n secondaryPosition: 'below',\n secondaryVariant: 'body2',\n secondaryColor: 'text.primary',\n },\n status_on_track: {\n isConfetti: true,\n gradient: WARM_LIME_ACCENT_GRADIENT,\n graphic: 'logo',\n amountVariant: 'h2',\n rowSx: { gap: 16, p: 16 },\n secondarySource: 'label',\n secondaryPosition: 'below',\n secondaryVariant: 'caption',\n secondaryColor: 'text.secondary',\n },\n celebrate_credit_card_payoff: {\n isConfetti: true,\n gradient: CELEBRATION_GRADIENT,\n graphic: 'paidOffCard',\n amountVariant: 'h2',\n rowSx: { gap: 24, px: 24, py: 16 },\n secondarySource: 'label',\n secondaryPosition: 'below',\n secondaryVariant: 'caption',\n secondaryColor: 'text.secondary',\n },\n savings_account_deposit: {\n isConfetti: true,\n gradient: CELEBRATION_GRADIENT,\n graphic: 'savings',\n amountVariant: 'h2',\n rowSx: { gap: 16, p: 16 },\n secondarySource: 'label',\n secondaryPosition: 'above',\n secondaryVariant: 'body2',\n secondaryColor: 'text.primary',\n },\n // Neutral fallback for an unknown/unmatched variant: renders the plain standard card (no\n // confetti, no special background). `resolveVariantConfig` warns before falling back here.\n default: {},\n }\n}\n"],"mappings":";;AAsCA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,uBAAuB;AAAA,IACrB,YAAY,EAAM,QAAQ,QAAQ;AAAA,IAClC,UAAU;AAAA,EACZ;AAAA,EACA,qBAAqB,EACnB,YACE,0FACJ;AAAA,EAGA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,YACE;AAAA,EACJ;AAAA,EACA,sCAAsC;AAAA,IACpC,YAAY;AAAA,IACZ,cAAc,EAAM,EAAM,QAAQ,YAAY,eAAe,IAAI,IAAI;AAAA,IACrE,mBAAmB;AAAA,IACnB,YACE;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,gCAAgC;AAAA,IAC9B,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,8BAA8B;AAAA,IAC5B,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IACjC,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,yBAAyB;AAAA,IACvB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EAGA,SAAS,CAAC;AACZ"}
1
+ {"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.ts"],"sourcesContent":["import { alpha, type SxProps, type Theme } from '@mui/material/styles'\n\nimport {\n CELEBRATION_GRADIENT,\n WARM_LIME_ACCENT_GRADIENT,\n} from '../../../components/celebrationGradients'\n\nexport interface BlockLayoutConfig {\n background?: string\n logo_color?: string\n logo_bGcolor?: string\n logo_border_color?: string\n /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */\n sub_logo?: string\n /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */\n isConfetti?: boolean\n /** Gradient wash layered over `background.paper` for the confetti card. */\n gradient?: string\n /** Which illustration sits left of the text. `logo` is the data-driven merchant/institution logo. */\n graphic?: 'paidOffCard' | 'savings' | 'logo'\n /** Amount typography variant — `h2` for milestones, `h3` for deposits. */\n amountVariant?: 'h2' | 'h3'\n /** Prefix prepended to the formatted amount, e.g. `+` for deposits. */\n amountPrefix?: string\n /** Render the colored category strip (`header_text`) at the top of the card. */\n categoryStrip?: boolean\n /** Layout overrides for the graphic+text row (padding, gap). */\n rowSx?: SxProps\n /** Which payload field feeds the secondary line beside the amount. */\n secondarySource?: 'merchant' | 'label'\n /** Whether the secondary line sits above or below the amount. */\n secondaryPosition?: 'above' | 'below'\n /** Typography variant for the secondary line. */\n secondaryVariant?: 'body2' | 'caption'\n /** Theme color path for the secondary line. */\n secondaryColor?: string\n}\n\nexport const getLayoutConfig = (theme: Theme): Record<string, BlockLayoutConfig> => {\n return {\n overdraft_warning: {\n background: theme.palette.warning.light,\n sub_logo: 'error',\n },\n low_balance_alert: {\n background:\n 'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\n },\n // Shared on/off-track status pair — used by Monthly Obligations Status and\n // Payday Cash Left Over Status (identical designs, different copy).\n status_off_track: {\n logo_color: 'background.paper',\n logo_bGcolor: 'error.main',\n background:\n 'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\n },\n interest_charges_summary: {\n logo_color: 'text.primary',\n logo_bGcolor: alpha(theme.palette.categories?.feesCharges || '', 0.25),\n logo_border_color: 'categories.feesCharges',\n background:\n 'linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)',\n },\n // Shared deposit-celebration card — used by both the standard deposit and the emergency-fund\n // deposit beats (identical design, different copy), so one design-named variant serves both.\n deposit_received: {\n isConfetti: true,\n gradient: WARM_LIME_ACCENT_GRADIENT,\n graphic: 'logo',\n amountVariant: 'h3',\n amountPrefix: '+',\n categoryStrip: true,\n rowSx: { gap: 12, p: 12 },\n secondarySource: 'merchant',\n secondaryPosition: 'below',\n secondaryVariant: 'body2',\n secondaryColor: 'text.primary',\n },\n status_on_track: {\n isConfetti: true,\n gradient: WARM_LIME_ACCENT_GRADIENT,\n graphic: 'logo',\n amountVariant: 'h2',\n rowSx: { gap: 16, p: 16 },\n secondarySource: 'label',\n secondaryPosition: 'below',\n secondaryVariant: 'caption',\n secondaryColor: 'text.secondary',\n },\n payoff_celebration: {\n isConfetti: true,\n gradient: CELEBRATION_GRADIENT,\n graphic: 'paidOffCard',\n amountVariant: 'h2',\n rowSx: { gap: 24, px: 24, py: 16 },\n secondarySource: 'label',\n secondaryPosition: 'below',\n secondaryVariant: 'caption',\n secondaryColor: 'text.secondary',\n },\n savings_deposit: {\n isConfetti: true,\n gradient: CELEBRATION_GRADIENT,\n graphic: 'savings',\n amountVariant: 'h2',\n rowSx: { gap: 16, p: 16 },\n secondarySource: 'label',\n secondaryPosition: 'above',\n secondaryVariant: 'body2',\n secondaryColor: 'text.primary',\n },\n // Neutral fallback for an unknown/unmatched variant: renders the plain standard card (no\n // confetti, no special background). `resolveVariantConfig` warns before falling back here.\n default: {},\n }\n}\n"],"mappings":";;AAsCA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,mBAAmB;AAAA,IACjB,YAAY,EAAM,QAAQ,QAAQ;AAAA,IAClC,UAAU;AAAA,EACZ;AAAA,EACA,mBAAmB,EACjB,YACE,0FACJ;AAAA,EAGA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,YACE;AAAA,EACJ;AAAA,EACA,0BAA0B;AAAA,IACxB,YAAY;AAAA,IACZ,cAAc,EAAM,EAAM,QAAQ,YAAY,eAAe,IAAI,IAAI;AAAA,IACrE,mBAAmB;AAAA,IACnB,YACE;AAAA,EACJ;AAAA,EAGA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IACjC,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EAGA,SAAS,CAAC;AACZ"}
@@ -3,19 +3,19 @@ import { Theme } from '@mui/material/styles';
3
3
  * Transaction block variants, keyed by the backend `instance_slot.variant`. All render the same
4
4
  * pre-localized rows through `TransactionListCard`; only the header and the slot differ.
5
5
  *
6
- * - `WithHeader` — row under a date header (Fee Detected, Large Transaction).
7
- * - `NoHeader` — the row alone (Large Transaction without a merchant).
8
- * - `UncategorizedTransaction` — filled primary header ("{count} transactions").
9
- * - `SubscriptionDetected` — borderless row on the blue slot wash.
10
- * - `UnexpectedSubscriptionPayment` — borderless row on the warning slot wash. Its flag badge and
11
- * subscribed / not-subscribed status row are not drawn yet.
6
+ * - `WithHeader` — row under a date header (Fee Detected, Large Transaction).
7
+ * - `NoHeader` — the row alone (Large Transaction without a merchant).
8
+ * - `UncategorizedTransaction` — filled primary header ("{count} transactions").
9
+ * - `InfoWash` — borderless row on the blue slot wash (e.g. Subscription Detected).
10
+ * - `WarningWash` — borderless row on the warning slot wash (e.g. Unexpected
11
+ * Subscription Payment). Treatment names, not beat names, so any beat can reuse the wash.
12
12
  */
13
13
  export declare const transactionBlockVariant: {
14
14
  readonly WithHeader: "with_header";
15
15
  readonly NoHeader: "no_header";
16
16
  readonly UncategorizedTransaction: "uncategorized_transaction";
17
- readonly SubscriptionDetected: "subscription_detected";
18
- readonly UnexpectedSubscriptionPayment: "unexpected_subscription_payment";
17
+ readonly InfoWash: "info_wash";
18
+ readonly WarningWash: "warning_wash";
19
19
  };
20
20
  export type TransactionBlockVariant = (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant];
21
21
  export interface TransactionLayoutConfig {
@@ -1,29 +1,29 @@
1
- import { WARNING_WASH_GRADIENT as r, getPrimaryWashGradient as t } from "../../../components/celebrationGradients.es.js";
2
- var e = {
1
+ import { WARNING_WASH_GRADIENT as e, getPrimaryWashGradient as n } from "../../../components/celebrationGradients.es.js";
2
+ var a = {
3
3
  WithHeader: "with_header",
4
4
  NoHeader: "no_header",
5
5
  UncategorizedTransaction: "uncategorized_transaction",
6
- SubscriptionDetected: "subscription_detected",
7
- UnexpectedSubscriptionPayment: "unexpected_subscription_payment"
8
- }, i = (a) => ({
9
- [e.WithHeader]: { showHeader: !0 },
10
- [e.NoHeader]: { showHeader: !1 },
11
- [e.UncategorizedTransaction]: {
6
+ InfoWash: "info_wash",
7
+ WarningWash: "warning_wash"
8
+ }, t = (r) => ({
9
+ [a.WithHeader]: { showHeader: !0 },
10
+ [a.NoHeader]: { showHeader: !1 },
11
+ [a.UncategorizedTransaction]: {
12
12
  showHeader: !0,
13
13
  cardVariant: "primary"
14
14
  },
15
- [e.SubscriptionDetected]: {
15
+ [a.InfoWash]: {
16
16
  showHeader: !1,
17
- background: t(a)
17
+ background: n(r)
18
18
  },
19
- [e.UnexpectedSubscriptionPayment]: {
19
+ [a.WarningWash]: {
20
20
  showHeader: !1,
21
- background: r
21
+ background: e
22
22
  }
23
23
  });
24
24
  export {
25
- i as getLayoutConfig,
26
- e as transactionBlockVariant
25
+ t as getLayoutConfig,
26
+ a as transactionBlockVariant
27
27
  };
28
28
 
29
29
  //# sourceMappingURL=layout.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nimport {\n WARNING_WASH_GRADIENT,\n getPrimaryWashGradient,\n} from '../../../components/celebrationGradients'\n\n/**\n * Transaction block variants, keyed by the backend `instance_slot.variant`. All render the same\n * pre-localized rows through `TransactionListCard`; only the header and the slot differ.\n *\n * - `WithHeader` — row under a date header (Fee Detected, Large Transaction).\n * - `NoHeader` — the row alone (Large Transaction without a merchant).\n * - `UncategorizedTransaction` — filled primary header (\"{count} transactions\").\n * - `SubscriptionDetected` — borderless row on the blue slot wash.\n * - `UnexpectedSubscriptionPayment` — borderless row on the warning slot wash. Its flag badge and\n * subscribed / not-subscribed status row are not drawn yet.\n */\nexport const transactionBlockVariant = {\n WithHeader: 'with_header',\n NoHeader: 'no_header',\n UncategorizedTransaction: 'uncategorized_transaction',\n SubscriptionDetected: 'subscription_detected',\n UnexpectedSubscriptionPayment: 'unexpected_subscription_payment',\n} as const\n\nexport type TransactionBlockVariant =\n (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant]\n\nexport interface TransactionLayoutConfig {\n /** Show `instance_slot.data.header_text` above the rows. */\n showHeader: boolean\n /** `TransactionListCard` style: grey utility header, or filled primary header. */\n cardVariant?: 'default' | 'primary'\n /** CSS background for the slot behind the card; the card then renders borderless on paper. */\n background?: string\n}\n\n/** Per-variant `TransactionListCard` props (mirrors DirectDepositBlock's `getLayoutConfig`). */\nexport const getLayoutConfig = (\n theme: Theme,\n): Record<TransactionBlockVariant, TransactionLayoutConfig> => ({\n [transactionBlockVariant.WithHeader]: { showHeader: true },\n [transactionBlockVariant.NoHeader]: { showHeader: false },\n [transactionBlockVariant.UncategorizedTransaction]: { showHeader: true, cardVariant: 'primary' },\n [transactionBlockVariant.SubscriptionDetected]: {\n showHeader: false,\n background: getPrimaryWashGradient(theme),\n },\n [transactionBlockVariant.UnexpectedSubscriptionPayment]: {\n showHeader: false,\n background: WARNING_WASH_GRADIENT,\n },\n})\n"],"mappings":";AAkBA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,0BAA0B;AAAA,EAC1B,sBAAsB;AAAA,EACtB,+BAA+B;AACjC,GAea,IAAA,CACX,OAC8D;AAAA,EAC7D,CAAA,EAAwB,UAAA,GAAa,EAAE,YAAY,GAAK;AAAA,EACxD,CAAA,EAAwB,QAAA,GAAW,EAAE,YAAY,GAAM;AAAA,EACvD,CAAA,EAAwB,wBAAA,GAA2B;AAAA,IAAE,YAAY;AAAA,IAAM,aAAa;AAAA,EAAU;AAAA,EAC9F,CAAA,EAAwB,oBAAA,GAAuB;AAAA,IAC9C,YAAY;AAAA,IACZ,YAAY,EAAuB,CAAK;AAAA,EAC1C;AAAA,EACC,CAAA,EAAwB,6BAAA,GAAgC;AAAA,IACvD,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AACF"}
1
+ {"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nimport {\n WARNING_WASH_GRADIENT,\n getPrimaryWashGradient,\n} from '../../../components/celebrationGradients'\n\n/**\n * Transaction block variants, keyed by the backend `instance_slot.variant`. All render the same\n * pre-localized rows through `TransactionListCard`; only the header and the slot differ.\n *\n * - `WithHeader` — row under a date header (Fee Detected, Large Transaction).\n * - `NoHeader` — the row alone (Large Transaction without a merchant).\n * - `UncategorizedTransaction` — filled primary header (\"{count} transactions\").\n * - `InfoWash` — borderless row on the blue slot wash (e.g. Subscription Detected).\n * - `WarningWash` — borderless row on the warning slot wash (e.g. Unexpected\n * Subscription Payment). Treatment names, not beat names, so any beat can reuse the wash.\n */\nexport const transactionBlockVariant = {\n WithHeader: 'with_header',\n NoHeader: 'no_header',\n UncategorizedTransaction: 'uncategorized_transaction',\n InfoWash: 'info_wash',\n WarningWash: 'warning_wash',\n} as const\n\nexport type TransactionBlockVariant =\n (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant]\n\nexport interface TransactionLayoutConfig {\n /** Show `instance_slot.data.header_text` above the rows. */\n showHeader: boolean\n /** `TransactionListCard` style: grey utility header, or filled primary header. */\n cardVariant?: 'default' | 'primary'\n /** CSS background for the slot behind the card; the card then renders borderless on paper. */\n background?: string\n}\n\n/** Per-variant `TransactionListCard` props (mirrors DirectDepositBlock's `getLayoutConfig`). */\nexport const getLayoutConfig = (\n theme: Theme,\n): Record<TransactionBlockVariant, TransactionLayoutConfig> => ({\n [transactionBlockVariant.WithHeader]: { showHeader: true },\n [transactionBlockVariant.NoHeader]: { showHeader: false },\n [transactionBlockVariant.UncategorizedTransaction]: { showHeader: true, cardVariant: 'primary' },\n [transactionBlockVariant.InfoWash]: {\n showHeader: false,\n background: getPrimaryWashGradient(theme),\n },\n [transactionBlockVariant.WarningWash]: {\n showHeader: false,\n background: WARNING_WASH_GRADIENT,\n },\n})\n"],"mappings":";AAkBA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,0BAA0B;AAAA,EAC1B,UAAU;AAAA,EACV,aAAa;AACf,GAea,IAAA,CACX,OAC8D;AAAA,EAC7D,CAAA,EAAwB,UAAA,GAAa,EAAE,YAAY,GAAK;AAAA,EACxD,CAAA,EAAwB,QAAA,GAAW,EAAE,YAAY,GAAM;AAAA,EACvD,CAAA,EAAwB,wBAAA,GAA2B;AAAA,IAAE,YAAY;AAAA,IAAM,aAAa;AAAA,EAAU;AAAA,EAC9F,CAAA,EAAwB,QAAA,GAAW;AAAA,IAClC,YAAY;AAAA,IACZ,YAAY,EAAuB,CAAK;AAAA,EAC1C;AAAA,EACC,CAAA,EAAwB,WAAA,GAAc;AAAA,IACrC,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AACF"}
@@ -131,7 +131,7 @@ var h = [
131
131
  variant: p
132
132
  });
133
133
  }, v = y({
134
- variants: { [b.UpcomingSubscription]: f },
134
+ variants: { [b.Hero]: f },
135
135
  fallback: f,
136
136
  name: "UpcomingSubscriptionBlock"
137
137
  });
@@ -1 +1 @@
1
- {"version":3,"file":"UpcomingSubscriptionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/UpcomingSubscriptionBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport type { InsightsPayload } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport SubscriptionHeroCard from '../../../components/SubscriptionHeroCard'\nimport { createVariantBlock } from '../../createVariantBlock'\n\nimport { upcomingSubscriptionVariant } from './layout'\n\ninterface UpcomingSubscriptionBlockProps {\n payload: InsightsPayload\n beatGuid?: string\n}\n\n// Fixed tile positions for the scattered merchant-logo backdrop. Each cell sits over the\n// 320x182-ish hero slot in CSS percentages; the card's `overflow: hidden` clips any that fall\n// partly off-frame, which matches the Figma design.\nexport const BACKDROP_TILES: { size: number; opacity: number; left: number; top: number }[] = [\n { size: 51, opacity: 0.5, left: 6.9, top: -13.7 },\n { size: 51, opacity: 0.5, left: 82.8, top: 75.9 },\n { size: 33, opacity: 0.35, left: 15.9, top: 35.7 },\n { size: 33, opacity: 0.35, left: -5.0, top: 57.1 },\n { size: 33, opacity: 0.35, left: 9.3, top: 89.8 },\n { size: 33, opacity: 0.35, left: 96.0, top: 48.8 },\n { size: 33, opacity: 0.35, left: 69.7, top: -9.3 },\n { size: 26, opacity: 0.25, left: 33.1, top: 76.4 },\n { size: 26, opacity: 0.25, left: 0.6, top: 24.8 },\n { size: 26, opacity: 0.25, left: 94.1, top: 5.5 },\n { size: 26, opacity: 0.25, left: 75.4, top: 27.5 },\n { size: 16, opacity: 0.1, left: 59.7, top: 88.8 },\n { size: 16, opacity: 0.1, left: 72.3, top: 57.9 },\n]\n\nconst UpcomingSubscriptionVariant = ({ payload }: UpcomingSubscriptionBlockProps) => {\n const { instance_slot } = payload\n const { amount, cadence, merchant_guid, merchant_name } = instance_slot\n\n const logoRef = merchant_guid ? { alt: merchant_name ?? '', guid: merchant_guid } : null\n const amountText = formatCurrency(amount ?? 0, '0,0.00')\n const price = cadence ? `${amountText} / ${cadence}` : amountText\n\n const backdrop = logoRef ? (\n // Defensive: SubscriptionHeroCard already wraps `backdrop` in an aria-hidden container, but\n // we mark the inner cluster aria-hidden too so AT skips the 13 tiles even if the shared\n // card's wrapper is refactored.\n <Box aria-hidden={true} data-testid=\"upcoming-subscription-backdrop\">\n {BACKDROP_TILES.map((t) => (\n <Box\n key={`${t.size}-${t.left}-${t.top}`}\n sx={{\n alignItems: 'center',\n display: 'flex',\n height: t.size,\n justifyContent: 'center',\n left: `${t.left}%`,\n opacity: t.opacity,\n position: 'absolute',\n top: `${t.top}%`,\n width: t.size,\n }}\n >\n <LogoFromGuid logo={logoRef} size={t.size} />\n </Box>\n ))}\n </Box>\n ) : null\n\n return (\n <Stack sx={{ px: 16 }}>\n <SubscriptionHeroCard\n backdrop={backdrop}\n logo={logoRef ? <LogoFromGuid logo={logoRef} size={64} /> : null}\n name={merchant_name ?? ''}\n price={price}\n sx={{ px: 0 }}\n />\n </Stack>\n )\n}\n\n/**\n * Upcoming Subscription component block (Figma: \"Full | Upcoming Subscription\"). Reads\n * `amount`, `cadence`, and merchant facts off `instance_slot` (V2 flat shape — no\n * `instance_slot_data`) and renders the shared `SubscriptionHeroCard` with the scattered\n * faded-logo backdrop.\n *\n * Wrapped in `createVariantBlock` from day one so an added design branch is a new registry\n * entry, not a rewrite of dispatch logic. Today only `upcoming_subscription` is defined; an\n * unknown variant degrades to it.\n */\nconst UpcomingSubscriptionBlock = ({ payload, beatGuid }: UpcomingSubscriptionBlockProps) => {\n const variant = payload.instance_slot.variant ?? undefined\n return <Variants beatGuid={beatGuid} payload={payload} variant={variant} />\n}\n\nconst Variants = createVariantBlock<UpcomingSubscriptionBlockProps>({\n variants: {\n [upcomingSubscriptionVariant.UpcomingSubscription]: UpcomingSubscriptionVariant,\n },\n fallback: UpcomingSubscriptionVariant,\n name: 'UpcomingSubscriptionBlock',\n})\n\nexport default UpcomingSubscriptionBlock\n"],"mappings":"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"}
1
+ {"version":3,"file":"UpcomingSubscriptionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/UpcomingSubscriptionBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport type { InsightsPayload } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport SubscriptionHeroCard from '../../../components/SubscriptionHeroCard'\nimport { createVariantBlock } from '../../createVariantBlock'\n\nimport { upcomingSubscriptionVariant } from './layout'\n\ninterface UpcomingSubscriptionBlockProps {\n payload: InsightsPayload\n beatGuid?: string\n}\n\n// Fixed tile positions for the scattered merchant-logo backdrop. Each cell sits over the\n// 320x182-ish hero slot in CSS percentages; the card's `overflow: hidden` clips any that fall\n// partly off-frame, which matches the Figma design.\nexport const BACKDROP_TILES: { size: number; opacity: number; left: number; top: number }[] = [\n { size: 51, opacity: 0.5, left: 6.9, top: -13.7 },\n { size: 51, opacity: 0.5, left: 82.8, top: 75.9 },\n { size: 33, opacity: 0.35, left: 15.9, top: 35.7 },\n { size: 33, opacity: 0.35, left: -5.0, top: 57.1 },\n { size: 33, opacity: 0.35, left: 9.3, top: 89.8 },\n { size: 33, opacity: 0.35, left: 96.0, top: 48.8 },\n { size: 33, opacity: 0.35, left: 69.7, top: -9.3 },\n { size: 26, opacity: 0.25, left: 33.1, top: 76.4 },\n { size: 26, opacity: 0.25, left: 0.6, top: 24.8 },\n { size: 26, opacity: 0.25, left: 94.1, top: 5.5 },\n { size: 26, opacity: 0.25, left: 75.4, top: 27.5 },\n { size: 16, opacity: 0.1, left: 59.7, top: 88.8 },\n { size: 16, opacity: 0.1, left: 72.3, top: 57.9 },\n]\n\nconst UpcomingSubscriptionVariant = ({ payload }: UpcomingSubscriptionBlockProps) => {\n const { instance_slot } = payload\n const { amount, cadence, merchant_guid, merchant_name } = instance_slot\n\n const logoRef = merchant_guid ? { alt: merchant_name ?? '', guid: merchant_guid } : null\n const amountText = formatCurrency(amount ?? 0, '0,0.00')\n const price = cadence ? `${amountText} / ${cadence}` : amountText\n\n const backdrop = logoRef ? (\n // Defensive: SubscriptionHeroCard already wraps `backdrop` in an aria-hidden container, but\n // we mark the inner cluster aria-hidden too so AT skips the 13 tiles even if the shared\n // card's wrapper is refactored.\n <Box aria-hidden={true} data-testid=\"upcoming-subscription-backdrop\">\n {BACKDROP_TILES.map((t) => (\n <Box\n key={`${t.size}-${t.left}-${t.top}`}\n sx={{\n alignItems: 'center',\n display: 'flex',\n height: t.size,\n justifyContent: 'center',\n left: `${t.left}%`,\n opacity: t.opacity,\n position: 'absolute',\n top: `${t.top}%`,\n width: t.size,\n }}\n >\n <LogoFromGuid logo={logoRef} size={t.size} />\n </Box>\n ))}\n </Box>\n ) : null\n\n return (\n <Stack sx={{ px: 16 }}>\n <SubscriptionHeroCard\n backdrop={backdrop}\n logo={logoRef ? <LogoFromGuid logo={logoRef} size={64} /> : null}\n name={merchant_name ?? ''}\n price={price}\n sx={{ px: 0 }}\n />\n </Stack>\n )\n}\n\n/**\n * Upcoming Subscription component block (Figma: \"Full | Upcoming Subscription\"). Reads\n * `amount`, `cadence`, and merchant facts off `instance_slot` (V2 flat shape — no\n * `instance_slot_data`) and renders the shared `SubscriptionHeroCard` with the scattered\n * faded-logo backdrop.\n *\n * Wrapped in `createVariantBlock` from day one so an added design branch is a new registry\n * entry, not a rewrite of dispatch logic. Today only `upcoming_subscription` is defined; an\n * unknown variant degrades to it.\n */\nconst UpcomingSubscriptionBlock = ({ payload, beatGuid }: UpcomingSubscriptionBlockProps) => {\n const variant = payload.instance_slot.variant ?? undefined\n return <Variants beatGuid={beatGuid} payload={payload} variant={variant} />\n}\n\nconst Variants = createVariantBlock<UpcomingSubscriptionBlockProps>({\n variants: {\n [upcomingSubscriptionVariant.Hero]: UpcomingSubscriptionVariant,\n },\n fallback: UpcomingSubscriptionVariant,\n name: 'UpcomingSubscriptionBlock',\n})\n\nexport default UpcomingSubscriptionBlock\n"],"mappings":"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"}
@@ -1,13 +1,14 @@
1
1
  /**
2
2
  * Design branches of the Upcoming Subscription component block.
3
3
  *
4
- * - `UpcomingSubscription` — the only variant today (Figma: "Full | Upcoming Subscription"):
5
- * 64px hero merchant logo + name (h2) + price pill, over a scattered faded-logo backdrop.
4
+ * - `Hero` — the only variant today (Figma: "Full | Upcoming Subscription"): 64px hero merchant
5
+ * logo + name (h2) + price pill, over a scattered faded-logo backdrop. Design-named (not the beat
6
+ * name) so another beat wanting the same hero can reuse it.
6
7
  *
7
8
  * Scaffolded through `createVariantBlock` so adding a future design branch is a new registry entry
8
9
  * rather than editing dispatch logic.
9
10
  */
10
11
  export declare const upcomingSubscriptionVariant: {
11
- readonly UpcomingSubscription: "upcoming_subscription";
12
+ readonly Hero: "hero";
12
13
  };
13
14
  export type UpcomingSubscriptionVariant = (typeof upcomingSubscriptionVariant)[keyof typeof upcomingSubscriptionVariant];
@@ -1,6 +1,6 @@
1
- var i = { UpcomingSubscription: "upcoming_subscription" };
1
+ var r = { Hero: "hero" };
2
2
  export {
3
- i as upcomingSubscriptionVariant
3
+ r as upcomingSubscriptionVariant
4
4
  };
5
5
 
6
6
  //# sourceMappingURL=layout.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/layout.ts"],"sourcesContent":["/**\n * Design branches of the Upcoming Subscription component block.\n *\n * - `UpcomingSubscription` — the only variant today (Figma: \"Full | Upcoming Subscription\"):\n * 64px hero merchant logo + name (h2) + price pill, over a scattered faded-logo backdrop.\n *\n * Scaffolded through `createVariantBlock` so adding a future design branch is a new registry entry\n * rather than editing dispatch logic.\n */\nexport const upcomingSubscriptionVariant = {\n UpcomingSubscription: 'upcoming_subscription',\n} as const\n\nexport type UpcomingSubscriptionVariant =\n (typeof upcomingSubscriptionVariant)[keyof typeof upcomingSubscriptionVariant]\n"],"mappings":"AASA,IAAa,IAA8B,EACzC,sBAAsB,wBACxB"}
1
+ {"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/layout.ts"],"sourcesContent":["/**\n * Design branches of the Upcoming Subscription component block.\n *\n * - `Hero` — the only variant today (Figma: \"Full | Upcoming Subscription\"): 64px hero merchant\n * logo + name (h2) + price pill, over a scattered faded-logo backdrop. Design-named (not the beat\n * name) so another beat wanting the same hero can reuse it.\n *\n * Scaffolded through `createVariantBlock` so adding a future design branch is a new registry entry\n * rather than editing dispatch logic.\n */\nexport const upcomingSubscriptionVariant = {\n Hero: 'hero',\n} as const\n\nexport type UpcomingSubscriptionVariant =\n (typeof upcomingSubscriptionVariant)[keyof typeof upcomingSubscriptionVariant]\n"],"mappings":"AAUA,IAAa,IAA8B,EACzC,MAAM,OACR"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mx-cartographer/experiences",
3
- "version": "9.6.7",
3
+ "version": "9.6.9",
4
4
  "description": "Library containing experience widgets",
5
5
  "author": "MX",
6
6
  "license": "MIT",