@mx-cartographer/experiences 9.7.105 → 9.7.107

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport { alpha, useTheme } from '@mui/material/styles'\nimport type { Theme } from '@mui/material/styles'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useCategoryStore, useGlobalCopyStore, useGlobalStore } from '../../../../common'\nimport { slot } from '../../../../core'\nimport type { InsightsPayload, InstanceSlotRow, LogoRef } from '../../../../core'\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport { useBeatActions } from '../../../beatActions'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport StatusMessageCard from '../../../components/StatusMessageCard'\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport { logoFromRef } from '../../../components/shared/EntityLogo'\nimport { statusIconName, statusIconPalette } from '../../../components/statusIcon'\nimport { subscriptionFrequency } from '../../../components/SubscriptionStatus/subscriptionFrequency'\nimport { repeatingTransactionOf, USER_RESPONSE } from '../../../ctaActions/subscriptionAnswer'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { getLayoutConfig, transactionBlockVariant } from './layout'\n\ninterface TransactionBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\nconst ROW_LOGO_SIZE = 32\n// Same glyph-to-tile ratio mxui's `CategoryIcon` uses, so a status icon sits like the other logos.\nconst ROW_ICON_SIZE = Math.round(ROW_LOGO_SIZE * 0.625)\nconst STATUS_ICON_SIZE = 24\n// Status badge: palette disc, contrastText glyph.\nconst BADGE_SIZE = 32\nconst BADGE_GLYPH_SIZE = 20\n\n/** Status disc from `data.icon` / `data.reviewed_icon`. */\nconst SubscriptionBadge = ({ icon }: { icon?: LogoRef }) => {\n  const name = statusIconName(icon?.guid)\n\n  if (!name) return null\n\n  return (\n    <Box\n      aria-hidden={true}\n      data-icon={name}\n      data-testid=\"subscription-badge\"\n      sx={{\n        alignItems: 'center',\n        bgcolor: `${statusIconPalette(icon?.color)}.main`,\n        borderRadius: '50%',\n        display: 'flex',\n        height: BADGE_SIZE,\n        justifyContent: 'center',\n        width: BADGE_SIZE,\n      }}\n    >\n      <Icon\n        fill={true}\n        name={name}\n        size={BADGE_GLYPH_SIZE}\n        sx={{ color: `${statusIconPalette(icon?.color)}.contrastText` }}\n      />\n    </Box>\n  )\n}\n\n/**\n * Renders the row's leading logo from its `LogoRef`: a status icon, or an entity guid whose prefix\n * names the entity. An unrecognized prefix renders no logo rather than guessing.\n *\n * `resolveTopLevelCategory`: mxui's `CategoryIcon` only knows the top-level category guids and\n * silently falls back to the Uncategorized icon for a sub-category. The details drawer avoids\n * this by passing `transaction.top_level_category_guid`; the row only has the raw guid, so it is\n * walked up to its parent here (identity until categories load). That resolution applies both to a\n * `CAT-` row logo and to a merchant's `fallback_guid`. The tinted/bordered tile is opt-in per variant\n * (`tintedCategoryLogo`) and only styles the `CAT-` row branch; a merchant's `fallback_guid` is drawn\n * by `MerchantLogo`'s own untinted `CategoryIcon` fallback when the merchant image fails to load.\n */\nconst renderRowLogo = (\n  row: InstanceSlotRow,\n  resolveTopLevelCategory: (guid: string) => string,\n  theme: Theme,\n  tintedCategoryLogo: boolean,\n) => {\n  const logo = logoFromRef(row.logo, row.primary_text)\n\n  if (!logo) return undefined\n\n  if (logo.logo_name) {\n    // A `{ icon, color }` status logo (e.g. an overdraft warning) renders as a bare coloured glyph.\n    // An ICO- fill logo (the Weekly New Merchants \"Others\" row - `logo_fill` is set for ICO- refs\n    // only, in EntityLogo) renders as an accent tile: per the MX accent-icon pattern the background is\n    // the tile colour at 15% opacity and the glyph is the full tile colour (Figma). The tile colour is\n    // the logo's own colour when it carries one, else chart-2 - so tile and glyph always match.\n    const accentTile = !!logo.logo_fill\n    const tileColor = logo.logo_color ?? theme.palette.chart.chart2 ?? theme.palette.primary.main\n    return (\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          height: ROW_LOGO_SIZE,\n          justifyContent: 'center',\n          width: ROW_LOGO_SIZE,\n          ...(accentTile && {\n            bgcolor: alpha(tileColor, 0.15),\n            borderRadius: '8px',\n          }),\n        }}\n      >\n        <Icon\n          name={logo.logo_name}\n          size={ROW_ICON_SIZE}\n          sx={{ color: accentTile ? tileColor : logo.logo_color }}\n        />\n      </Box>\n    )\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name ?? ''}\n        categoryGuid={logo.category_guid ? resolveTopLevelCategory(logo.category_guid) : ''}\n        merchantGuid={logo.merchant_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name ?? ''}\n        institutionGuid={logo.institution_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    const topLevelGuid = resolveTopLevelCategory(logo.category_guid)\n    // When the variant opts in (`tintedCategoryLogo`), the tile is the Budget-style accent: the\n    // category colour at 15% opacity, a 1px category-colour border, and a `text.primary` glyph\n    // (Figma - Replenish Savings' multi-account Transfer row). Otherwise mxui's default tile, so other\n    // beats' category logos are unchanged.\n    const tintSx = tintedCategoryLogo\n      ? {\n          bgcolor: alpha(getCategoryColor(topLevelGuid, theme), 0.15),\n          border: `1px solid ${getCategoryColor(topLevelGuid, theme)}`,\n          color: 'text.primary',\n        }\n      : undefined\n    return (\n      <Box data-testid={`category-icon-${topLevelGuid}`} sx={{ display: 'flex' }}>\n        <CategoryIcon categoryGuid={topLevelGuid} size={ROW_LOGO_SIZE} sx={tintSx} />\n      </Box>\n    )\n  }\n\n  return undefined\n}\n\n/**\n * The `transaction_block`: rows the backend already localized, carried inline on\n * `instance_slot.data.series` (`logo`, `primary_text`, `secondary_text`, `amount`). Only the\n * amount is formatted here, because the contract sends it as a number. `instance_slot.variant`\n * picks the header and slot treatment from `./layout.ts`.\n *\n * This is the full/mini shape. The reduced widgets (micro, embedded) resolve to the row logo\n * alone, carried flat on `data.logo` with no `series`, and are drawn by `CompactInsightCard`.\n *\n * `status_message` draws no rows: `data.message` beside the `data.icon` logo, as a\n * `StatusMessageCard` banner (Uncategorized Transactions V2 `complete`).\n *\n * A header, when the variant shows one, comes from `instance_slot.data.header_text` (the\n * transaction date, or \"{count} transactions\"). It deliberately does *not* come from the first\n * row: on a `with_merchant` card a row's `secondary_text` is the category, so reading it here\n * rendered the category twice and dropped the date entirely.\n *\n * A footer/summary row (Replenish Savings' \"Remaining Balance\", Weekly New Merchants' \"Total\")\n * renders when the variant's `showFooter` config is set (`with_header_footer`, `with_footer`), from\n * `data.footer_text` with `data.footer_amount` beside it, formatted like the row amounts (the\n * contract sends it as a number).\n */\nexport const TransactionBlock = observer(({ payload }: TransactionBlockProps) => {\n  const theme = useTheme()\n  const { getTopLevelCategoryGuid } = useCategoryStore()\n  const stores = useGlobalStore()\n  const { recurring: recurringCopy } = useGlobalCopyStore()\n  const { beat } = useBeatActions()\n  const { data, variant } = payload.instance_slot\n  // The plain row is the safe default: it adds nothing a wrong variant could misstate.\n  const {\n    answeredBackground,\n    background,\n    cardVariant,\n    elevated,\n    followsSubscription,\n    headerColor,\n    raised,\n    showFooter,\n    showFrequency,\n    showHeader,\n    statusMessage,\n    sx,\n    tintedCategoryLogo,\n  } = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    transactionBlockVariant.NoHeader,\n    'TransactionBlock',\n  )\n\n  // The live repeating transaction (read-only), for the frequency and the badge / answered wash.\n  const repeating =\n    (showFrequency || followsSubscription) && beat\n      ? repeatingTransactionOf({ beat, stores })\n      : undefined\n  const subscribed = !!followsSubscription && repeating?.user_response === USER_RESPONSE.CONFIRMED\n\n  if (statusMessage) {\n    const message = slot<string>(data, 'message')\n    if (typeof message !== 'string' || !message.trim()) {\n      console.warn('[TransactionBlock] status_message has no message — rendering nothing.')\n      return null\n    }\n\n    // The icon only decorates the message, so it is hidden from the status announcement.\n    return (\n      <StatusMessageCard\n        icon={\n          <Box aria-hidden=\"true\" sx={{ display: 'flex' }}>\n            <LogoFromGuid logo={slot<LogoRef>(data, 'icon')} size={STATUS_ICON_SIZE} />\n          </Box>\n        }\n        message={message}\n        // The 20% wash layers over paper, as Figma's slot does.\n        sx={background ? { backgroundImage: background, bgcolor: 'background.paper' } : undefined}\n      />\n    )\n  }\n\n  const series = slot<InstanceSlotRow[]>(data, 'series')\n  const headerText = slot<string>(data, 'header_text')\n\n  if (!Array.isArray(series) || !series.length) return null\n\n  const header = showHeader && typeof headerText === 'string' ? headerText : undefined\n\n  const footerText = slot<string>(data, 'footer_text')\n  const footerAmount = slot<number>(data, 'footer_amount')\n  const footer =\n    showFooter && typeof footerText === 'string'\n      ? {\n          label: footerText,\n          amount: formatCurrency(footerAmount, '0,0.00'),\n        }\n      : undefined\n\n  // Live, as pulse: the repeating transaction the CTA's `prepare` loads.\n  const frequency = showFrequency ? subscriptionFrequency(recurringCopy, repeating) : undefined\n  const badge = followsSubscription ? (\n    <SubscriptionBadge icon={slot<LogoRef>(data, subscribed ? 'reviewed_icon' : 'icon')} />\n  ) : undefined\n\n  return (\n    <TransactionListCard\n      background={subscribed && answeredBackground ? answeredBackground : background}\n      badge={badge}\n      elevated={elevated}\n      footer={footer}\n      header={header}\n      headerColor={headerColor}\n      raised={raised}\n      sx={sx}\n      variant={cardVariant}\n      rows={series.map((row) => ({\n        amount: typeof row.amount === 'number' ? formatCurrency(row.amount, '0,0.00') : '',\n        amountCaption: frequency,\n        leading: renderRowLogo(row, getTopLevelCategoryGuid, theme, tintedCategoryLogo ?? false),\n        subtitle: row.secondary_text ?? '',\n        title: row.primary_text ?? '',\n      }))}\n    />\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"TransactionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport { alpha, useTheme } from '@mui/material/styles'\nimport type { Theme } from '@mui/material/styles'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useCategoryStore, useGlobalCopyStore, useGlobalStore } from '../../../../common'\nimport { slot } from '../../../../core'\nimport type { InsightsPayload, InstanceSlotRow, LogoRef } from '../../../../core'\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport { useBeatActions } from '../../../beatActions'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport StatusMessageCard from '../../../components/StatusMessageCard'\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport { logoFromRef } from '../../../components/shared/EntityLogo'\nimport { statusIconName, statusIconPalette } from '../../../components/statusIcon'\nimport { subscriptionFrequency } from '../../../components/SubscriptionStatus/subscriptionFrequency'\nimport { repeatingTransactionOf, USER_RESPONSE } from '../../../ctaActions/subscriptionAnswer'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { getLayoutConfig, transactionBlockVariant } from './layout'\n\ninterface TransactionBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\nconst ROW_LOGO_SIZE = 32\n// Same glyph-to-tile ratio mxui's `CategoryIcon` uses, so a status icon sits like the other logos.\nconst ROW_ICON_SIZE = Math.round(ROW_LOGO_SIZE * 0.625)\nconst STATUS_ICON_SIZE = 24\n// Status badge: palette disc, contrastText glyph.\nconst BADGE_SIZE = 32\nconst BADGE_GLYPH_SIZE = 20\n\n/** Status disc from `data.icon` / `data.reviewed_icon`. */\nconst SubscriptionBadge = ({ icon }: { icon?: LogoRef }) => {\n  const name = statusIconName(icon?.guid)\n\n  if (!name) return null\n\n  return (\n    <Box\n      aria-hidden={true}\n      data-icon={name}\n      data-testid=\"subscription-badge\"\n      sx={{\n        alignItems: 'center',\n        bgcolor: `${statusIconPalette(icon?.color)}.main`,\n        borderRadius: '50%',\n        display: 'flex',\n        height: BADGE_SIZE,\n        justifyContent: 'center',\n        width: BADGE_SIZE,\n      }}\n    >\n      <Icon\n        fill={true}\n        name={name}\n        size={BADGE_GLYPH_SIZE}\n        sx={{ color: `${statusIconPalette(icon?.color)}.contrastText` }}\n      />\n    </Box>\n  )\n}\n\n/**\n * Renders the row's leading logo from its `LogoRef`: a status icon, or an entity guid whose prefix\n * names the entity. An unrecognized prefix renders no logo rather than guessing.\n *\n * `resolveTopLevelCategory`: mxui's `CategoryIcon` only knows the top-level category guids and\n * silently falls back to the Uncategorized icon for a sub-category. The details drawer avoids\n * this by passing `transaction.top_level_category_guid`; the row only has the raw guid, so it is\n * walked up to its parent here (identity until categories load). That resolution applies both to a\n * `CAT-` row logo and to a merchant's `fallback_guid`. The tinted/bordered tile is opt-in per variant\n * (`tintedCategoryLogo`) and only styles the `CAT-` row branch; a merchant's `fallback_guid` is drawn\n * by `MerchantLogo`'s own untinted `CategoryIcon` fallback when the merchant image fails to load.\n */\nconst renderRowLogo = (\n  row: InstanceSlotRow,\n  resolveTopLevelCategory: (guid: string) => string,\n  theme: Theme,\n  tintedCategoryLogo: boolean,\n) => {\n  const logo = logoFromRef(row.logo, row.primary_text)\n\n  if (!logo) return undefined\n\n  if (logo.logo_name) {\n    // A `{ icon, color }` status logo (e.g. an overdraft warning) renders as a bare coloured glyph.\n    // An ICO- fill logo (the Weekly New Merchants \"Others\" row - `logo_fill` is set for ICO- refs\n    // only, in EntityLogo) renders as an accent tile: per the MX accent-icon pattern the background is\n    // the tile colour at 15% opacity and the glyph is the full tile colour (Figma). The tile colour is\n    // the logo's own colour when it carries one, else chart-2 - so tile and glyph always match.\n    const accentTile = !!logo.logo_fill\n    const tileColor = logo.logo_color ?? theme.palette.chart.chart2 ?? theme.palette.primary.main\n    return (\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          height: ROW_LOGO_SIZE,\n          justifyContent: 'center',\n          width: ROW_LOGO_SIZE,\n          ...(accentTile && {\n            bgcolor: alpha(tileColor, 0.15),\n            borderRadius: '8px',\n          }),\n        }}\n      >\n        <Icon\n          name={logo.logo_name}\n          size={ROW_ICON_SIZE}\n          sx={{ color: accentTile ? tileColor : logo.logo_color }}\n        />\n      </Box>\n    )\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name ?? ''}\n        categoryGuid={logo.category_guid ? resolveTopLevelCategory(logo.category_guid) : ''}\n        merchantGuid={logo.merchant_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name ?? ''}\n        institutionGuid={logo.institution_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    const topLevelGuid = resolveTopLevelCategory(logo.category_guid)\n    // When the variant opts in (`tintedCategoryLogo`), the tile is the Budget-style accent: the\n    // category colour at 15% opacity, a 1px category-colour border, and a `text.primary` glyph\n    // (Figma - Replenish Savings' multi-account Transfer row). Otherwise mxui's default tile, so other\n    // beats' category logos are unchanged.\n    const tintSx = tintedCategoryLogo\n      ? {\n          bgcolor: alpha(getCategoryColor(topLevelGuid, theme), 0.15),\n          border: `1px solid ${getCategoryColor(topLevelGuid, theme)}`,\n          color: 'text.primary',\n        }\n      : undefined\n    return (\n      <Box data-testid={`category-icon-${topLevelGuid}`} sx={{ display: 'flex' }}>\n        <CategoryIcon categoryGuid={topLevelGuid} size={ROW_LOGO_SIZE} sx={tintSx} />\n      </Box>\n    )\n  }\n\n  return undefined\n}\n\n/**\n * The `transaction_block`: rows the backend already localized, carried inline on\n * `instance_slot.data.series` (`logo`, `primary_text`, `secondary_text`, `amount`). Only the\n * amount is formatted here, because the contract sends it as a number. `instance_slot.variant`\n * picks the header and slot treatment from `./layout.ts`.\n *\n * This is the full/mini shape. The reduced widgets (micro, embedded) resolve to the row logo\n * alone, carried flat on `data.logo` with no `series`, and are drawn by `CompactInsightCard`.\n *\n * `status_message` draws no rows: `data.message` beside the `data.icon` logo, as a\n * `StatusMessageCard` banner (Uncategorized Transactions V2 `complete`).\n *\n * A header, when the variant shows one, comes from `instance_slot.data.header_text` (the\n * transaction date, or \"{count} transactions\"). It deliberately does *not* come from the first\n * row: on a `with_merchant` card a row's `secondary_text` is the category, so reading it here\n * rendered the category twice and dropped the date entirely.\n *\n * A footer/summary row (Replenish Savings' \"Remaining Balance\", Weekly New Merchants' \"Total\")\n * renders when the variant's `showFooter` config is set (`with_header_footer`, `with_footer`), from\n * `data.footer_text` with `data.footer_amount` beside it, formatted like the row amounts (the\n * contract sends it as a number).\n */\nexport const TransactionBlock = observer(({ payload }: TransactionBlockProps) => {\n  const theme = useTheme()\n  const { getTopLevelCategoryGuid } = useCategoryStore()\n  const stores = useGlobalStore()\n  const { recurring: recurringCopy } = useGlobalCopyStore()\n  const { beat } = useBeatActions()\n  const { data, variant } = payload.instance_slot\n  // The plain row is the safe default: it adds nothing a wrong variant could misstate.\n  const {\n    answeredBackground,\n    background,\n    cardVariant,\n    creditAmounts,\n    elevated,\n    followsSubscription,\n    headerColor,\n    raised,\n    showFooter,\n    showFrequency,\n    showHeader,\n    statusMessage,\n    sx,\n    tintedCategoryLogo,\n  } = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    transactionBlockVariant.NoHeader,\n    'TransactionBlock',\n  )\n\n  // The live repeating transaction (read-only), for the frequency and the badge / answered wash.\n  const repeating =\n    (showFrequency || followsSubscription) && beat\n      ? repeatingTransactionOf({ beat, stores })\n      : undefined\n  const subscribed = !!followsSubscription && repeating?.user_response === USER_RESPONSE.CONFIRMED\n\n  if (statusMessage) {\n    const message = slot<string>(data, 'message')\n    if (typeof message !== 'string' || !message.trim()) {\n      console.warn('[TransactionBlock] status_message has no message — rendering nothing.')\n      return null\n    }\n\n    // The icon only decorates the message, so it is hidden from the status announcement.\n    return (\n      <StatusMessageCard\n        icon={\n          <Box aria-hidden=\"true\" sx={{ display: 'flex' }}>\n            <LogoFromGuid logo={slot<LogoRef>(data, 'icon')} size={STATUS_ICON_SIZE} />\n          </Box>\n        }\n        message={message}\n        // The 20% wash layers over paper, as Figma's slot does.\n        sx={background ? { backgroundImage: background, bgcolor: 'background.paper' } : undefined}\n      />\n    )\n  }\n\n  const series = slot<InstanceSlotRow[]>(data, 'series')\n  const headerText = slot<string>(data, 'header_text')\n\n  if (!Array.isArray(series) || !series.length) return null\n\n  const header = showHeader && typeof headerText === 'string' ? headerText : undefined\n\n  const footerText = slot<string>(data, 'footer_text')\n  const footerAmount = slot<number>(data, 'footer_amount')\n  const footer =\n    showFooter && typeof footerText === 'string'\n      ? {\n          label: footerText,\n          amount: formatCurrency(footerAmount, '0,0.00'),\n        }\n      : undefined\n\n  // Live, as pulse: the repeating transaction the CTA's `prepare` loads.\n  const frequency = showFrequency ? subscriptionFrequency(recurringCopy, repeating) : undefined\n  const badge = followsSubscription ? (\n    <SubscriptionBadge icon={slot<LogoRef>(data, subscribed ? 'reviewed_icon' : 'icon')} />\n  ) : undefined\n\n  // Only a positive amount reads as a credit.\n  const isCredit = (amount: unknown) => !!creditAmounts && typeof amount === 'number' && amount > 0\n\n  return (\n    <TransactionListCard\n      background={subscribed && answeredBackground ? answeredBackground : background}\n      badge={badge}\n      elevated={elevated}\n      footer={footer}\n      header={header}\n      headerColor={headerColor}\n      raised={raised}\n      sx={sx}\n      variant={cardVariant}\n      rows={series.map((row) => ({\n        amount:\n          typeof row.amount === 'number'\n            ? `${isCredit(row.amount) ? '+' : ''}${formatCurrency(row.amount, '0,0.00')}`\n            : '',\n        amountColor: isCredit(row.amount) ? 'success.main' : undefined,\n        amountCaption: frequency,\n        leading: renderRowLogo(row, getTopLevelCategoryGuid, theme, tintedCategoryLogo ?? false),\n        subtitle: row.secondary_text ?? '',\n        title: row.primary_text ?? '',\n      }))}\n    />\n  )\n})\n"],"mappings":"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"}

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.d.ts

@@ -16,6 +16,7 @@ import { SxProps, Theme } from '@mui/material/styles';
  *   (Uncategorized Transactions V2 `complete`, "All Categorized!").
  * - `SpendingSummary`         — header, rows and footer, with the header text in `primary.main`
  *   (Weekend Spending Summary: the weekend above one row per category and "Total spent").
+ * - `DepositList`             — the date above the rows, each amount a green "+" credit (Micro Deposits).
  */
 export declare const transactionBlockVariant: {
     readonly WithHeader: "with_header";
@@ -27,6 +28,7 @@ export declare const transactionBlockVariant: {
     readonly WarningWash: "warning_wash";
     readonly StatusMessage: "status_message";
     readonly SpendingSummary: "spending_summary";
+    readonly DepositList: "deposit_list";
 };
 export type TransactionBlockVariant = (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant];
 export interface TransactionLayoutConfig {
@@ -61,6 +63,8 @@ export interface TransactionLayoutConfig {
      * every `transaction_block` consumer.
      */
     tintedCategoryLogo?: boolean;
+    /** Draw each amount as a credit: a "+" prefix in `success.main`. */
+    creditAmounts?: boolean;
 }
 /** Per-variant `TransactionListCard` props (mirrors DetailedAccountBlock's `getLayoutConfig`). */
 export declare const getLayoutConfig: (theme: Theme) => Record<TransactionBlockVariant, TransactionLayoutConfig>;

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.es.js

@@ -1,4 +1,4 @@
-import { WARM_LIME_ACCENT_GRADIENT as r, WARNING_WASH_GRADIENT as o, getPrimaryWashGradient as t } from "../../../components/celebrationGradients.es.js";
+import { WARM_LIME_ACCENT_GRADIENT as r, WARNING_WASH_GRADIENT as t, getPrimaryWashGradient as o } from "../../../components/celebrationGradients.es.js";
 var e = {
   WithHeader: "with_header",
   WithHeaderFooter: "with_header_footer",
@@ -8,8 +8,9 @@ var e = {
   InfoWash: "info_wash",
   WarningWash: "warning_wash",
   StatusMessage: "status_message",
-  SpendingSummary: "spending_summary"
-}, n = (a) => ({
+  SpendingSummary: "spending_summary",
+  DepositList: "deposit_list"
+}, i = (a) => ({
   [e.WithHeader]: {
     showHeader: !0,
     tintedCategoryLogo: !0
@@ -29,13 +30,13 @@ var e = {
   },
   [e.InfoWash]: {
     showHeader: !1,
-    background: t(a),
+    background: o(a),
     raised: !0,
     showFrequency: !0
   },
   [e.WarningWash]: {
     showHeader: !1,
-    background: o,
+    background: t,
     showFrequency: !0,
     followsSubscription: !0,
     answeredBackground: r,
@@ -51,10 +52,15 @@ var e = {
     showHeader: !0,
     showFooter: !0,
     headerColor: "primary.main"
+  },
+  [e.DepositList]: {
+    showHeader: !0,
+    tintedCategoryLogo: !0,
+    creditAmounts: !0
   }
 });
 export {
-  n as getLayoutConfig,
+  i as getLayoutConfig,
   e as transactionBlockVariant
 };
 

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles'\n\nimport {\n  WARM_LIME_ACCENT_GRADIENT,\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 * - `WithHeaderFooter`              — date header above the rows plus the footer/summary row from\n *   `data.footer_text` / `data.footer_amount` (Replenish Savings' \"Remaining Balance\").\n * - `NoHeader`                — the row alone (Large Transaction without a merchant).\n * - `UncategorizedTransaction` — filled primary header (\"{count} transactions\").\n * - `InfoWash`                — raised row (border + shadow) on the blue slot wash, with the\n *   subscription's live frequency under the amount (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 * - `StatusMessage`           — no rows: an icon + message banner from `data.icon` / `data.message`\n *   (Uncategorized Transactions V2 `complete`, \"All Categorized!\").\n * - `SpendingSummary`         — header, rows and footer, with the header text in `primary.main`\n *   (Weekend Spending Summary: the weekend above one row per category and \"Total spent\").\n */\nexport const transactionBlockVariant = {\n  WithHeader: 'with_header',\n  WithHeaderFooter: 'with_header_footer',\n  NoHeader: 'no_header',\n  // A multi-row list with no in-card header plus a \"Total\" summary row (Weekly New Merchants; the\n  // date range is the card subtitle). The plain no-footer list reuses `NoHeader`.\n  WithFooter: 'with_footer',\n  UncategorizedTransaction: 'uncategorized_transaction',\n  InfoWash: 'info_wash',\n  WarningWash: 'warning_wash',\n  StatusMessage: 'status_message',\n  SpendingSummary: 'spending_summary',\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  /** Show the `data.footer_text` / `data.footer_amount` summary row beneath the rows. */\n  showFooter?: boolean\n  /** `TransactionListCard` style: grey utility header, or filled primary header. */\n  cardVariant?: 'default' | 'primary'\n  /** Theme colour for the header text, over the card style's own. */\n  headerColor?: string\n  /** CSS background for the slot behind the card; the card renders borderless unless `raised`. */\n  background?: string\n  /** Render `data.message` as a `StatusMessageCard` banner instead of the rows. */\n  statusMessage?: boolean\n  /** Caption each amount with the beat's live repeating transaction frequency. */\n  showFrequency?: boolean\n  /** Status badge and answered wash from the live repeating transaction. */\n  followsSubscription?: boolean\n  /** Wash once subscribed. */\n  answeredBackground?: string\n  /** Row card at `elevation/1` (needs `background`). */\n  elevated?: boolean\n  /** Slot padding override (CSS shorthand). */\n  sx?: SxProps\n  /** Border and shadow on the row card. */\n  raised?: boolean\n  /**\n   * Tint a `CAT-` row logo as the Budget-style accent tile (category colour at 15% opacity, a 1px\n   * category-colour border, a `text.primary` glyph) instead of mxui's default. Opt-in per variant so\n   * it stays scoped to the beats that want it (Replenish Savings' multi-account Transfer row), not\n   * every `transaction_block` consumer.\n   */\n  tintedCategoryLogo?: boolean\n}\n\n/** Per-variant `TransactionListCard` props (mirrors DetailedAccountBlock's `getLayoutConfig`). */\nexport const getLayoutConfig = (\n  theme: Theme,\n): Record<TransactionBlockVariant, TransactionLayoutConfig> => ({\n  // `with_header` is Replenish Savings' multi-account card: its one summary row is a `CAT-` Transfer\n  // logo, which we tint. (Other `with_header` beats, e.g. Large Transaction, use a merchant logo, so\n  // the `CAT-` tint path never runs for them.)\n  [transactionBlockVariant.WithHeader]: { showHeader: true, tintedCategoryLogo: true },\n  [transactionBlockVariant.WithHeaderFooter]: { showHeader: true, showFooter: true },\n  [transactionBlockVariant.NoHeader]: { showHeader: false },\n  [transactionBlockVariant.WithFooter]: { showHeader: false, showFooter: true },\n  [transactionBlockVariant.UncategorizedTransaction]: { showHeader: true, cardVariant: 'primary' },\n  [transactionBlockVariant.InfoWash]: {\n    showHeader: false,\n    background: getPrimaryWashGradient(theme),\n    raised: true,\n    showFrequency: true,\n  },\n  [transactionBlockVariant.WarningWash]: {\n    showHeader: false,\n    background: WARNING_WASH_GRADIENT,\n    showFrequency: true,\n    followsSubscription: true,\n    answeredBackground: WARM_LIME_ACCENT_GRADIENT,\n    elevated: true,\n    // Room for the badge.\n    sx: { p: '28px 24px 24px 32px' },\n  },\n  // Figma 1941:207336: the banner sits on the warm-to-lime slot wash.\n  [transactionBlockVariant.StatusMessage]: {\n    showHeader: false,\n    statusMessage: true,\n    background: WARM_LIME_ACCENT_GRADIENT,\n  },\n  [transactionBlockVariant.SpendingSummary]: {\n    showHeader: true,\n    showFooter: true,\n    headerColor: 'primary.main',\n  },\n})\n"],"mappings":";AA0BA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,UAAU;AAAA,EAGV,YAAY;AAAA,EACZ,0BAA0B;AAAA,EAC1B,UAAU;AAAA,EACV,aAAa;AAAA,EACb,eAAe;AAAA,EACf,iBAAiB;AACnB,GAwCa,IAAA,CACX,OAC8D;AAAA,EAI7D,CAAA,EAAwB,UAAA,GAAa;AAAA,IAAE,YAAY;AAAA,IAAM,oBAAoB;AAAA,EAAK;AAAA,EAClF,CAAA,EAAwB,gBAAA,GAAmB;AAAA,IAAE,YAAY;AAAA,IAAM,YAAY;AAAA,EAAK;AAAA,EAChF,CAAA,EAAwB,QAAA,GAAW,EAAE,YAAY,GAAM;AAAA,EACvD,CAAA,EAAwB,UAAA,GAAa;AAAA,IAAE,YAAY;AAAA,IAAO,YAAY;AAAA,EAAK;AAAA,EAC3E,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,IACxC,QAAQ;AAAA,IACR,eAAe;AAAA,EACjB;AAAA,EACC,CAAA,EAAwB,WAAA,GAAc;AAAA,IACrC,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,UAAU;AAAA,IAEV,IAAI,EAAE,GAAG,sBAAsB;AAAA,EACjC;AAAA,EAEC,CAAA,EAAwB,aAAA,GAAgB;AAAA,IACvC,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACC,CAAA,EAAwB,eAAA,GAAkB;AAAA,IACzC,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AACF"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles'\n\nimport {\n  WARM_LIME_ACCENT_GRADIENT,\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 * - `WithHeaderFooter`              — date header above the rows plus the footer/summary row from\n *   `data.footer_text` / `data.footer_amount` (Replenish Savings' \"Remaining Balance\").\n * - `NoHeader`                — the row alone (Large Transaction without a merchant).\n * - `UncategorizedTransaction` — filled primary header (\"{count} transactions\").\n * - `InfoWash`                — raised row (border + shadow) on the blue slot wash, with the\n *   subscription's live frequency under the amount (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 * - `StatusMessage`           — no rows: an icon + message banner from `data.icon` / `data.message`\n *   (Uncategorized Transactions V2 `complete`, \"All Categorized!\").\n * - `SpendingSummary`         — header, rows and footer, with the header text in `primary.main`\n *   (Weekend Spending Summary: the weekend above one row per category and \"Total spent\").\n * - `DepositList`             — the date above the rows, each amount a green \"+\" credit (Micro Deposits).\n */\nexport const transactionBlockVariant = {\n  WithHeader: 'with_header',\n  WithHeaderFooter: 'with_header_footer',\n  NoHeader: 'no_header',\n  // A multi-row list with no in-card header plus a \"Total\" summary row (Weekly New Merchants; the\n  // date range is the card subtitle). The plain no-footer list reuses `NoHeader`.\n  WithFooter: 'with_footer',\n  UncategorizedTransaction: 'uncategorized_transaction',\n  InfoWash: 'info_wash',\n  WarningWash: 'warning_wash',\n  StatusMessage: 'status_message',\n  SpendingSummary: 'spending_summary',\n  DepositList: 'deposit_list',\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  /** Show the `data.footer_text` / `data.footer_amount` summary row beneath the rows. */\n  showFooter?: boolean\n  /** `TransactionListCard` style: grey utility header, or filled primary header. */\n  cardVariant?: 'default' | 'primary'\n  /** Theme colour for the header text, over the card style's own. */\n  headerColor?: string\n  /** CSS background for the slot behind the card; the card renders borderless unless `raised`. */\n  background?: string\n  /** Render `data.message` as a `StatusMessageCard` banner instead of the rows. */\n  statusMessage?: boolean\n  /** Caption each amount with the beat's live repeating transaction frequency. */\n  showFrequency?: boolean\n  /** Status badge and answered wash from the live repeating transaction. */\n  followsSubscription?: boolean\n  /** Wash once subscribed. */\n  answeredBackground?: string\n  /** Row card at `elevation/1` (needs `background`). */\n  elevated?: boolean\n  /** Slot padding override (CSS shorthand). */\n  sx?: SxProps\n  /** Border and shadow on the row card. */\n  raised?: boolean\n  /**\n   * Tint a `CAT-` row logo as the Budget-style accent tile (category colour at 15% opacity, a 1px\n   * category-colour border, a `text.primary` glyph) instead of mxui's default. Opt-in per variant so\n   * it stays scoped to the beats that want it (Replenish Savings' multi-account Transfer row), not\n   * every `transaction_block` consumer.\n   */\n  tintedCategoryLogo?: boolean\n  /** Draw each amount as a credit: a \"+\" prefix in `success.main`. */\n  creditAmounts?: boolean\n}\n\n/** Per-variant `TransactionListCard` props (mirrors DetailedAccountBlock's `getLayoutConfig`). */\nexport const getLayoutConfig = (\n  theme: Theme,\n): Record<TransactionBlockVariant, TransactionLayoutConfig> => ({\n  // `with_header` is Replenish Savings' multi-account card: its one summary row is a `CAT-` Transfer\n  // logo, which we tint. (Other `with_header` beats, e.g. Large Transaction, use a merchant logo, so\n  // the `CAT-` tint path never runs for them.)\n  [transactionBlockVariant.WithHeader]: { showHeader: true, tintedCategoryLogo: true },\n  [transactionBlockVariant.WithHeaderFooter]: { showHeader: true, showFooter: true },\n  [transactionBlockVariant.NoHeader]: { showHeader: false },\n  [transactionBlockVariant.WithFooter]: { showHeader: false, showFooter: true },\n  [transactionBlockVariant.UncategorizedTransaction]: { showHeader: true, cardVariant: 'primary' },\n  [transactionBlockVariant.InfoWash]: {\n    showHeader: false,\n    background: getPrimaryWashGradient(theme),\n    raised: true,\n    showFrequency: true,\n  },\n  [transactionBlockVariant.WarningWash]: {\n    showHeader: false,\n    background: WARNING_WASH_GRADIENT,\n    showFrequency: true,\n    followsSubscription: true,\n    answeredBackground: WARM_LIME_ACCENT_GRADIENT,\n    elevated: true,\n    // Room for the badge.\n    sx: { p: '28px 24px 24px 32px' },\n  },\n  // Figma 1941:207336: the banner sits on the warm-to-lime slot wash.\n  [transactionBlockVariant.StatusMessage]: {\n    showHeader: false,\n    statusMessage: true,\n    background: WARM_LIME_ACCENT_GRADIENT,\n  },\n  [transactionBlockVariant.SpendingSummary]: {\n    showHeader: true,\n    showFooter: true,\n    headerColor: 'primary.main',\n  },\n  [transactionBlockVariant.DepositList]: {\n    showHeader: true,\n    tintedCategoryLogo: true,\n    creditAmounts: true,\n  },\n})\n"],"mappings":";AA2BA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,UAAU;AAAA,EAGV,YAAY;AAAA,EACZ,0BAA0B;AAAA,EAC1B,UAAU;AAAA,EACV,aAAa;AAAA,EACb,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,aAAa;AACf,GA0Ca,IAAA,CACX,OAC8D;AAAA,EAI7D,CAAA,EAAwB,UAAA,GAAa;AAAA,IAAE,YAAY;AAAA,IAAM,oBAAoB;AAAA,EAAK;AAAA,EAClF,CAAA,EAAwB,gBAAA,GAAmB;AAAA,IAAE,YAAY;AAAA,IAAM,YAAY;AAAA,EAAK;AAAA,EAChF,CAAA,EAAwB,QAAA,GAAW,EAAE,YAAY,GAAM;AAAA,EACvD,CAAA,EAAwB,UAAA,GAAa;AAAA,IAAE,YAAY;AAAA,IAAO,YAAY;AAAA,EAAK;AAAA,EAC3E,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,IACxC,QAAQ;AAAA,IACR,eAAe;AAAA,EACjB;AAAA,EACC,CAAA,EAAwB,WAAA,GAAc;AAAA,IACrC,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,UAAU;AAAA,IAEV,IAAI,EAAE,GAAG,sBAAsB;AAAA,EACjC;AAAA,EAEC,CAAA,EAAwB,aAAA,GAAgB;AAAA,IACvC,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACC,CAAA,EAAwB,eAAA,GAAkB;AAAA,IACzC,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACC,CAAA,EAAwB,WAAA,GAAc;AAAA,IACrC,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.7.105",
+  "version": "9.7.107",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",