@mx-cartographer/experiences 9.7.89 → 9.7.91

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    followsSubscription,\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      footer={footer}\n      header={header}\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    elevated,\n    followsSubscription,\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      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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"}

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

@@ -43,6 +43,8 @@ export interface TransactionLayoutConfig {
     followsSubscription?: boolean;
     /** Wash once subscribed. */
     answeredBackground?: string;
+    /** Row card at `elevation/1` (needs `background`). */
+    elevated?: boolean;
     /** Slot padding override (CSS shorthand). */
     sx?: SxProps;
     /** Border and shadow on the row card. */

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

@@ -1,4 +1,4 @@
-import { WARM_LIME_ACCENT_GRADIENT as a, WARNING_WASH_GRADIENT as o, getPrimaryWashGradient as t } from "../../../components/celebrationGradients.es.js";
+import { WARM_LIME_ACCENT_GRADIENT as a, WARNING_WASH_GRADIENT as t, getPrimaryWashGradient as o } from "../../../components/celebrationGradients.es.js";
 var e = {
   WithHeader: "with_header",
   WithHeaderFooter: "with_header_footer",
@@ -28,16 +28,17 @@ var e = {
   },
   [e.InfoWash]: {
     showHeader: !1,
-    background: t(r),
+    background: o(r),
     raised: !0,
     showFrequency: !0
   },
   [e.WarningWash]: {
     showHeader: !1,
-    background: o,
+    background: t,
     showFrequency: !0,
     followsSubscription: !0,
     answeredBackground: a,
+    elevated: !0,
     sx: { p: "28px 24px 24px 32px" }
   },
   [e.StatusMessage]: {

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 */\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} 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  /** 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  /** 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    // 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})\n"],"mappings":";AAwBA,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;AACjB,GAoCa,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,IAEpB,IAAI,EAAE,GAAG,sBAAsB;AAAA,EACjC;AAAA,EAEC,CAAA,EAAwB,aAAA,GAAgB;AAAA,IACvC,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;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 */\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} 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  /** 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})\n"],"mappings":";AAwBA,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;AACjB,GAsCa,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;AACF"}

package/dist/insights-v2/components/CompactInsightCard.es.js

@@ -1,89 +1,137 @@
-import { useInsightsV2Store as L } from "../../common/context/hooks.es.js";
-import { slot as u } from "../../core/types/Insights.es.js";
-import { getCategoryColor as R } from "../../core/utils/CategoryUtil.es.js";
-import { TinyBarChart as E } from "../../common/components/TinyBarChart.es.js";
-import { BAR_ARIA_LABEL as V, buildChartData as A, buildDataSeries as T } from "../blocks/ChartBlocks/BarchartBlock/utils.es.js";
-import { ThemedSVGImage as z } from "./chartblocks/ThemedSVGImage.es.js";
-import x from "./LogoFromGuid.es.js";
-import { createVariantBlock as O } from "../blocks/createVariantBlock.es.js";
-import { ActionBlockLayer as N } from "../actionBlocks/ActionBlockLayer.es.js";
-import k from "./BadgedTile.es.js";
-import { InsightOptionsMenu as G } from "./InsightOptionsMenu.es.js";
-import { ReactComponent as K } from "./shared/images/FeeDetected.es.js";
-import P from "./StatusBadge.es.js";
-import h from "@mui/material/Stack";
-import { P as W, Text as b } from "@mxenabled/mxui";
-import j from "@mui/material/Button";
-import { Icon as v } from "@mxenabled/mx-icons";
-import { Fragment as F, jsx as t, jsxs as s } from "react/jsx-runtime";
-import i from "@mui/material/Box";
-import H from "@mui/material/Card";
-var d = 44, y = 36, M = 75, X = 74, f = {
+import { useGlobalStore as O, useInsightsV2Store as V } from "../../common/context/hooks.es.js";
+import { slot as b } from "../../core/types/Insights.es.js";
+import { getCategoryColor as N } from "../../core/utils/CategoryUtil.es.js";
+import { TinyBarChart as W } from "../../common/components/TinyBarChart.es.js";
+import { BAR_ARIA_LABEL as G, buildChartData as P, buildDataSeries as j } from "../blocks/ChartBlocks/BarchartBlock/utils.es.js";
+import { ThemedSVGImage as K } from "./chartblocks/ThemedSVGImage.es.js";
+import { postCtaMessage as F } from "../ctaActions/runCtaAction.es.js";
+import _ from "./LogoFromGuid.es.js";
+import { createVariantBlock as H } from "../blocks/createVariantBlock.es.js";
+import { ActionBlockLayer as M } from "../actionBlocks/ActionBlockLayer.es.js";
+import w from "./BadgedTile.es.js";
+import { InsightOptionsMenu as X } from "./InsightOptionsMenu.es.js";
+import { ReactComponent as Z } from "./shared/images/FeeDetected.es.js";
+import $ from "./StatusBadge.es.js";
+import u from "@mui/material/Stack";
+import { P as q, Text as v } from "@mxenabled/mxui";
+import J from "@mui/material/Button";
+import { Icon as y } from "@mxenabled/mx-icons";
+import { Fragment as Q, jsx as t, jsxs as d } from "react/jsx-runtime";
+import e from "@mui/material/Box";
+import U from "@mui/material/Card";
+var Y = 2, c = 44, k = 36, tt = 75, rt = 74, g = {
   left: "50%",
   position: "absolute",
   top: "50%",
   transform: "translate(-50%, -50%)"
-}, C = ({ logo: r }) => r ? /* @__PURE__ */ t(x, {
+}, C = ({ logo: r }) => r ? /* @__PURE__ */ t(_, {
   logo: r,
-  size: d
-}) : /* @__PURE__ */ t(i, {
+  size: c
+}) : /* @__PURE__ */ t(e, {
   "data-testid": "compact-insight-card-fallback-icon",
   sx: {
     alignItems: "center",
     bgcolor: "primary.lighter",
     display: "flex",
-    height: d,
+    height: c,
     justifyContent: "center",
-    width: d
+    width: c
   },
-  children: /* @__PURE__ */ t(v, {
+  children: /* @__PURE__ */ t(y, {
     color: "primary",
     fill: !0,
     name: "lightbulb",
     size: 24
   })
-}), _ = ({ logo: r }) => /* @__PURE__ */ t(k, {
+}), I = ({ logo: r }) => /* @__PURE__ */ t(w, {
   center: /* @__PURE__ */ t(C, { logo: r }),
-  size: d,
+  size: c,
   sx: { flexShrink: 0 }
-}), Z = ({ logo: r }) => /* @__PURE__ */ t(k, {
+}), it = ({ logo: r }) => /* @__PURE__ */ t(w, {
   center: /* @__PURE__ */ t(C, { logo: r }),
-  size: d,
+  size: c,
   sx: { flexShrink: 0 },
-  topRight: /* @__PURE__ */ t(P, { tone: "warning" })
-}), $ = () => /* @__PURE__ */ t(z, {
+  topRight: /* @__PURE__ */ t($, { tone: "warning" })
+}), et = () => /* @__PURE__ */ t(K, {
   divProps: { style: {
     flexShrink: 0,
     lineHeight: 0,
     width: "max-content"
   } },
-  image: K
-}), q = ({ data: r }) => {
-  const { from_logo: o, to_logo: a } = r ?? {};
-  return /* @__PURE__ */ s(i, {
+  image: Z
+}), x = 24, ot = () => /* @__PURE__ */ t(e, {
+  "aria-hidden": !0,
+  "data-testid": "linked-logos-badge",
+  sx: {
+    ...g,
+    alignItems: "center",
+    bgcolor: "primary.main",
+    border: "2px solid",
+    borderColor: "primary.contrastText",
+    borderRadius: "12px",
+    display: "flex",
+    justifyContent: "center",
+    p: 2,
+    zIndex: 1
+  },
+  children: /* @__PURE__ */ t(y, {
+    name: "link",
+    size: 16,
+    sx: { color: "primary.contrastText" }
+  })
+}), at = () => /* @__PURE__ */ t(e, {
+  "aria-hidden": !0,
+  "data-testid": "linked-logos-badge",
+  sx: {
+    ...g,
+    alignItems: "center",
+    bgcolor: "primary.contrastText",
+    borderRadius: "50%",
+    display: "flex",
+    height: x,
+    justifyContent: "center",
+    overflow: "hidden",
+    width: x,
+    zIndex: 1
+  },
+  children: /* @__PURE__ */ t(y, {
+    name: "swap_vertical_circle",
+    size: x * 1.2,
+    sx: {
+      color: "primary.main",
+      flexShrink: 0,
+      transform: "rotate(-90deg)"
+    }
+  })
+}), nt = ({ data: r, template: o }) => {
+  const { from_logo: l, to_logo: a } = r ?? {}, i = o === "SwitchDirectDeposit";
+  return /* @__PURE__ */ d(e, {
     sx: {
       flexShrink: 0,
-      height: X,
+      height: rt,
       position: "relative",
-      width: M
+      width: tt
     },
     children: [
-      /* @__PURE__ */ t(i, {
+      /* @__PURE__ */ t(e, {
         "aria-hidden": !0,
         "data-testid": "linked-logos-ring",
         sx: {
-          ...f,
-          bgcolor: "primary.light",
+          ...g,
           borderRadius: "50%",
           height: 36,
-          width: 36
+          width: 36,
+          ...i ? {
+            border: "2px solid",
+            borderColor: "primary.light"
+          } : { bgcolor: "primary.light" }
         }
       }),
-      /* @__PURE__ */ t(i, {
+      /* @__PURE__ */ t(e, {
         "aria-hidden": !0,
         "data-testid": "linked-logos-ring",
         sx: {
-          ...f,
+          ...g,
           border: "1px solid",
           borderColor: "divider",
           borderRadius: "50%",
@@ -91,7 +139,7 @@ var d = 44, y = 36, M = 75, X = 74, f = {
           width: 48
         }
       }),
-      /* @__PURE__ */ t(i, {
+      /* @__PURE__ */ t(e, {
         sx: {
           borderRadius: "4px",
           left: 0,
@@ -99,12 +147,12 @@ var d = 44, y = 36, M = 75, X = 74, f = {
           position: "absolute",
           top: 0
         },
-        children: /* @__PURE__ */ t(x, {
-          logo: o,
-          size: y
+        children: /* @__PURE__ */ t(_, {
+          logo: l,
+          size: k
         })
       }),
-      /* @__PURE__ */ t(i, {
+      /* @__PURE__ */ t(e, {
         sx: {
           borderRadius: "4px",
           bottom: 0,
@@ -112,57 +160,37 @@ var d = 44, y = 36, M = 75, X = 74, f = {
           position: "absolute",
           right: 0
         },
-        children: /* @__PURE__ */ t(x, {
+        children: /* @__PURE__ */ t(_, {
           logo: a,
-          size: y
+          size: k
         })
       }),
-      /* @__PURE__ */ t(i, {
-        "aria-hidden": !0,
-        "data-testid": "linked-logos-badge",
-        sx: {
-          ...f,
-          alignItems: "center",
-          bgcolor: "primary.main",
-          border: "2px solid",
-          borderColor: "primary.contrastText",
-          borderRadius: "12px",
-          display: "flex",
-          justifyContent: "center",
-          p: 2,
-          zIndex: 1
-        },
-        children: /* @__PURE__ */ t(v, {
-          name: "link",
-          size: 16,
-          sx: { color: "primary.contrastText" }
-        })
-      })
+      i ? /* @__PURE__ */ t(at, {}) : /* @__PURE__ */ t(ot, {})
     ]
   });
-}, J = ({ data: r }) => {
-  const o = T(u(r, "series"));
+}, st = ({ data: r }) => {
+  const o = j(b(r, "series"));
   if (!o.length) return null;
-  const a = u(r, "category_guid"), n = A(o, V).slice(-3);
-  return /* @__PURE__ */ t(i, {
+  const l = b(r, "category_guid"), a = P(o, G).slice(-3);
+  return /* @__PURE__ */ t(e, {
     "data-testid": "compact-insight-card-bar-chart",
     sx: { flexShrink: 0 },
-    children: /* @__PURE__ */ t(E, {
-      color: (l) => a ? R(a, l) : l.palette.primary.main,
-      data: n
+    children: /* @__PURE__ */ t(W, {
+      color: (i) => l ? N(l, i) : i.palette.primary.main,
+      data: a
     })
   });
-}, Q = O({
+}, lt = H({
   variants: {
-    category_color: J,
-    linked_logos: q,
-    minimal: _,
-    with_illustration: $,
-    with_warning_badge: Z
+    category_color: st,
+    linked_logos: nt,
+    minimal: I,
+    with_illustration: et,
+    with_warning_badge: it
   },
-  fallback: _,
+  fallback: I,
   name: "InsightVisual"
-}), U = {
+}), dt = {
   BillAmountNotStandard: {
     key: "in_description_cta",
     trigger: "inDescriptionCta"
@@ -170,26 +198,37 @@ var d = 44, y = 36, M = 75, X = 74, f = {
   ConnectDiscoveredAccountsV2: {
     key: "in_description_cta",
     trigger: "inDescriptionCta"
-  }
-}, Y = (r) => r.stopPropagation(), kt = ({ beat: r, isCtaDisabled: o = !1, onCtaClick: a, onTap: n, payload: l }) => {
-  const { openActionDrawer: I } = L(), { description: w, instance_slot: g, primary_cta: m, title: B } = l, c = U[l.template ?? ""], p = c ? l[c.key] : m, D = u(g.data, "logo"), S = (e) => {
-    if (e.stopPropagation(), !(o || !p)) {
-      if (c) {
-        r && I({
+  },
+  SwitchDirectDeposit: { key: "in_description_cta" }
+}, ct = (r) => r.stopPropagation(), Tt = ({ beat: r, isCtaDisabled: o = !1, onCtaClick: l, onTap: a, payload: i }) => {
+  const S = O(), { openActionDrawer: D } = V(), { description: B, instance_slot: m, primary_cta: p, title: L } = i, n = dt[i.template ?? ""], h = n ? i[n.key] : p, f = i.in_description_cta?.post_message_metadata, E = !n || !!n.trigger || !!r && !!f, A = b(m.data, "logo"), R = (s) => {
+    if (s.stopPropagation(), !(o || !h)) {
+      if (n) {
+        if (r && n.trigger) D({
           guid: r.guid,
-          trigger: c.trigger
+          trigger: n.trigger
         });
+        else if (r && f) {
+          const { action: T, ...z } = f;
+          F({
+            beat: r,
+            stores: S
+          }, {
+            action: T,
+            payload: z
+          });
+        }
         return;
       }
-      m && a?.(m);
+      p && l?.(p);
     }
   };
-  return /* @__PURE__ */ s(F, { children: [/* @__PURE__ */ s(H, {
+  return /* @__PURE__ */ d(Q, { children: [/* @__PURE__ */ d(U, {
     "data-testid": "compact-insight-card",
-    ...n ? {
-      onClick: n,
-      onKeyDown: (e) => {
-        e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n?.());
+    ...a ? {
+      onClick: a,
+      onKeyDown: (s) => {
+        s.target === s.currentTarget && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), a?.());
       },
       role: "button",
       tabIndex: 0
@@ -200,9 +239,9 @@ var d = 44, y = 36, M = 75, X = 74, f = {
       pl: 8,
       pr: 16,
       pt: 8,
-      ...n && { cursor: "pointer" }
+      ...a && { cursor: "pointer" }
     },
-    children: [/* @__PURE__ */ s(h, {
+    children: [/* @__PURE__ */ d(u, {
       sx: {
         alignItems: "center",
         flexDirection: "row",
@@ -211,41 +250,50 @@ var d = 44, y = 36, M = 75, X = 74, f = {
         pl: 8,
         pt: 4
       },
-      children: [/* @__PURE__ */ t(b, {
+      children: [/* @__PURE__ */ t(v, {
         bold: !0,
         variant: "body1",
-        children: B ?? ""
-      }), /* @__PURE__ */ t(i, {
-        onClick: Y,
+        children: L ?? ""
+      }), /* @__PURE__ */ t(e, {
+        onClick: ct,
         sx: { display: "flex" },
-        children: /* @__PURE__ */ t(G, {})
+        children: /* @__PURE__ */ t(X, {})
       })]
-    }), /* @__PURE__ */ s(h, {
+    }), /* @__PURE__ */ d(u, {
       sx: {
+        alignItems: "center",
         flexDirection: "row",
         gap: 16,
-        pl: 8,
-        pt: 4
+        pl: 8
       },
-      children: [/* @__PURE__ */ s(h, {
+      children: [/* @__PURE__ */ d(u, {
         sx: {
+          alignSelf: "stretch",
           flex: 1,
           gap: 8,
-          minWidth: 0
+          minWidth: 0,
+          pt: 2
         },
-        children: [/* @__PURE__ */ t(W, {
-          dangerouslySetInnerHTML: { __html: w.html_text },
+        children: [/* @__PURE__ */ t(q, {
+          dangerouslySetInnerHTML: { __html: B.html_text },
           "data-testid": "compact-insight-card-description",
-          sx: { fontWeight: "fontWeightRegular" },
+          sx: {
+            display: "-webkit-box",
+            fontWeight: "fontWeightRegular",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            WebkitBoxOrient: "vertical",
+            WebkitLineClamp: Y
+          },
           variant: "subtitle2"
-        }), p?.label && /* @__PURE__ */ t(j, {
+        }), h?.label && E && /* @__PURE__ */ t(J, {
           "aria-disabled": o,
-          onClick: S,
+          onClick: R,
           size: "small",
           sx: {
             alignSelf: "flex-start",
-            mt: 5,
             ml: -8,
+            my: 0,
             px: 8,
             ...o && {
               color: "text.disabled",
@@ -253,22 +301,23 @@ var d = 44, y = 36, M = 75, X = 74, f = {
             }
           },
           variant: "text",
-          children: /* @__PURE__ */ t(b, {
+          children: /* @__PURE__ */ t(v, {
             bold: !0,
             variant: "body2",
-            children: p.label
+            children: h.label
           })
         })]
-      }), /* @__PURE__ */ t(Q, {
-        data: g.data,
-        logo: D,
-        variant: g.variant
+      }), /* @__PURE__ */ t(lt, {
+        data: m.data,
+        logo: A,
+        template: i.template,
+        variant: m.variant
       })]
     })]
-  }), r && /* @__PURE__ */ t(N, { beat: r })] });
+  }), r && /* @__PURE__ */ t(M, { beat: r })] });
 };
 export {
-  kt as default
+  Tt as default
 };
 
 //# sourceMappingURL=CompactInsightCard.es.js.map