@mx-cartographer/experiences 9.4.23 → 9.4.25

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionHistoryBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.tsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react'\n\nimport { useTheme } from '@mui/material/styles'\nimport { observer } from 'mobx-react-lite'\n\nimport type { Beat, DataSeries, Transaction } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { BarChartV2 } from '../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../components/chartblocks/EmptyBarChart'\n\nimport { TransactionDrillDown } from './TransactionDrillDown'\nimport { useTransactionHistory } from './useTransactionHistory'\nimport {\n  getDefaultSelection,\n  getDrillDownConfig,\n  getFlattenedDataSeries,\n  toStoreFilter,\n} from './utils'\nimport { Drawer, useInsightsV2Store, useGlobalCopyStore, useGlobalUiStore, Loader } from '../../../common'\nimport { TransactionDetailsBlock } from '../TransactionDetailsBlock'\n\ninterface TransactionHistoryProp {\n  beat: Beat\n}\n\nexport const TransactionHistoryBlock = observer(({ beat }: TransactionHistoryProp) => {\n  const theme = useTheme()\n  const {\n    instanceSlotData,\n    beatTransactions,\n    primaryTransaction,\n    spendCategoryGuids,\n    allAccountGuids,\n    categoryName,\n    displayedDateRange,\n    transactionStore,\n  } = useTransactionHistory(beat)\n\n  const { actionDrawer, setActionContext } = useInsightsV2Store()\n\n  const { common: commonCopy, insights_feed: insightsCopy } = useGlobalCopyStore()\n\n  const { isCopyLoaded } = useGlobalUiStore()\n\n  const [isTransactionDetailsOpen, setIsTransactionDetailsOpen] = useState(false)\n\n  const { insights_payload } = beat\n\n  const dynamicCtaVariant =\n    actionDrawer.trigger === 'secondaryCta'\n      ? insights_payload?.secondary_cta?.variant\n      : insights_payload?.primary_cta?.variant\n\n  const { top, filterMode, header, colors, filterStrategy } = getDrillDownConfig(\n    dynamicCtaVariant ?? '',\n  )\n\n  const { dataSeries, chartData, comparisonBars } = getFlattenedDataSeries({\n    data: instanceSlotData?.data_series as DataSeries,\n    ariaLabel: instanceSlotData?.ariaLabel ?? '',\n    top,\n    beatTransactions,\n    payload: instanceSlotData,\n  })\n\n  const { chartBarIndex, subTabIndex } = getDefaultSelection({\n    chartTabCount: chartData.length,\n    comparisonTabCount: comparisonBars.length,\n    actionDrawer,\n    beatGuid: beat.guid,\n  })\n\n  const [selectedIndex, setSelectedIndex] = useState(chartBarIndex)\n\n  const resolveFilter = (index: number) =>\n    filterStrategy({\n      beat,\n      beatTransactions,\n      dataSeries,\n      selectedIndex: index,\n      subIndex: subTabIndex,\n      isLastTab: index === dataSeries.length - 1,\n      instanceSlotData,\n      spendCategoryGuids,\n      displayedDateRange,\n    })\n\n  // Apply the current selection's filter. Store variants route through the store filter; local\n  // (upcomingBill) variants filter beatTransactions directly and only backfill the cache when the\n  // Stable primitive keys for the collections below: beatTransactions/spendCategoryGuids/\n  // allAccountGuids are recomputed (new array identity) every render, so depending on them directly\n  // re-fires the effect each render (REVIEW.md MEW-3732). Key on content instead.\n  const beatTransactionGuidsKey = beatTransactions.map((transaction) => transaction.guid).join(',')\n  const spendCategoryGuidsKey = spendCategoryGuids.join(',')\n  const allAccountGuidsKey = allAccountGuids.join(',')\n\n  // Re-applies the current selection's filter to the shared transactionStore. Called both by the\n  // effect below (on selection change) and when the nested TransactionDetailsBlock drawer closes:\n  // AddMerchantBudgetAction (opened from within that drawer) overwrites transactionStore.filter\n  // with a merchant_guid-only filter while its own drawer is open, and never restores it — leaving\n  // the row list stuck showing only that one merchant's transactions after backing all the way out.\n  // Re-running this on close re-derives the filter fresh instead of relying on whatever the nested\n  // drawers left behind.\n  const applyCurrentSelectionFilter = () => {\n    if (filterMode !== 'store' || !dataSeries.length) return\n    transactionStore.setFilter(\n      toStoreFilter(resolveFilter(selectedIndex), { allAccountGuids, displayedDateRange }),\n    )\n  }\n\n  // store variants route the selection through the shared store filter; local (upcomingBill) variants\n  // filter beatTransactions directly, so there's nothing to push to the store for them.\n  useLayoutEffect(() => {\n    applyCurrentSelectionFilter()\n  }, [\n    beat.guid,\n    selectedIndex,\n    filterMode,\n    dataSeries.length,\n    instanceSlotData,\n    displayedDateRange,\n    spendCategoryGuidsKey,\n    allAccountGuidsKey,\n    beatTransactionGuidsKey,\n  ])\n\n  const headerContent = header?.({\n    htmlTitle: beat.html_title,\n    primaryTransaction,\n    categoryName,\n    selectedDate: chartData[selectedIndex]?.date ?? undefined,\n  })\n\n  const barColors = colors(theme, instanceSlotData?.category_guid)\n  const [monthlyAmountLabel, trendAmountLabel] = (instanceSlotData?.legends ?? []).map(\n    (legend) => legend.label,\n  )\n\n  const transactionFilter =\n    filterMode === 'local'\n      ? (index: number) => resolveFilter(index).custom ?? (() => true)\n      : undefined\n\n  const baseTransactions: Transaction[] | undefined =\n    filterMode === 'local' ? beatTransactions : undefined\n\n  const isBarTop = top === 'singleBar' || top === 'upcomingBill'\n  const chartTop = !isBarTop ? null : chartData.length ? (\n    <BarChartV2\n      amounts={{\n        average: instanceSlotData?.average_amount,\n        formattedAverage: formatCurrency(instanceSlotData?.average_amount ?? 0, '0,0.00'),\n      }}\n      color={barColors[0] ?? theme.palette.primary.main}\n      data={chartData}\n      legendPosition=\"top\"\n      monthlyAmountLabel={monthlyAmountLabel}\n      onBarClick={setSelectedIndex}\n      selectedTabIndex={selectedIndex}\n      trendAmountLabel={trendAmountLabel}\n    />\n  ) : (\n    <EmptyBarChart />\n  )\n  if (!isCopyLoaded) return <Loader />\n  return (\n    <>\n      <TransactionDrillDown\n        ariaLabel={instanceSlotData?.ariaLabel}\n        baseTransactions={baseTransactions}\n        heading={headerContent?.heading}\n        icon={headerContent?.icon}\n        onSelectionChange={setSelectedIndex}\n        selectedIndex={selectedIndex}\n        subHeadingText={headerContent?.subHeadingText}\n        tabs={chartData.map((bar) => ({\n          ariaLabel: bar.ariaLabel,\n          label: bar.label,\n        }))}\n        top={chartTop}\n        transactionFilter={transactionFilter}\n        onEachRowClick={(guid) => {\n          setActionContext({ transaction_guid: guid })\n          setIsTransactionDetailsOpen(true)\n        }}\n      />\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isTransactionDetailsOpen}\n        onClose={() => {\n          setIsTransactionDetailsOpen(false)\n          // Clear only the key this nested drawer owns — setActionContext merges, so an\n          // explicit `{}` would be a no-op and leave transaction_guid stuck in the shared\n          // context, and the outer drawer's own context (e.g. chartBarIndex) must survive.\n          setActionContext({ transaction_guid: undefined })\n          // Re-apply this block's own filter: a further-nested AddMerchantBudgetAction drawer may\n          // have overwritten transactionStore.filter (merchant_guid-only) without restoring it.\n          applyCurrentSelectionFilter()\n        }}\n        title={insightsCopy.general.transaction_details_title}\n      >\n        <TransactionDetailsBlock beat={beat} />\n      </Drawer>\n    </>\n\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;AAyBA,IAAa,KAA0B,GAAA,CAAU,EAAE,MAAA,EAAA,MAAmC;AACpF,QAAM,IAAQ,GAAS,GACjB,EACJ,kBAAA,GACA,kBAAA,GACA,oBAAA,GACA,oBAAA,GACA,iBAAA,GACA,cAAA,GACA,oBAAA,GACA,kBAAA,EAAA,IACE,GAAsB,CAAI,GAExB,EAAE,cAAA,GAAc,kBAAA,EAAA,IAAqB,EAAmB,GAExD,EAAE,QAAQ,GAAY,eAAe,EAAA,IAAiB,EAAmB,GAEzE,EAAE,cAAA,EAAA,IAAiB,EAAiB,GAEpC,CAAC,GAA0B,CAAA,IAA+B,EAAS,EAAK,GAExE,EAAE,kBAAA,EAAA,IAAqB,GAEvB,IACJ,EAAa,YAAY,iBACrB,GAAkB,eAAe,UACjC,GAAkB,aAAa,SAE/B,EAAE,KAAA,GAAK,YAAA,GAAY,QAAA,GAAQ,QAAA,GAAQ,gBAAA,EAAA,IAAmB,GAC1D,KAAqB,EACvB,GAEM,EAAE,YAAA,GAAY,WAAA,GAAW,gBAAA,EAAA,IAAmB,GAAuB;AAAA,IACvE,MAAM,GAAkB;AAAA,IACxB,WAAW,GAAkB,aAAa;AAAA,IAC1C,KAAA;AAAA,IACA,kBAAA;AAAA,IACA,SAAS;AAAA,EACX,CAAC,GAEK,EAAE,eAAA,GAAe,aAAA,EAAA,IAAgB,GAAoB;AAAA,IACzD,eAAe,EAAU;AAAA,IACzB,oBAAoB,EAAe;AAAA,IACnC,cAAA;AAAA,IACA,UAAU,EAAK;AAAA,EACjB,CAAC,GAEK,CAAC,GAAe,CAAA,IAAoB,EAAS,CAAa,GAE1D,IAAA,CAAiB,MACrB,EAAe;AAAA,IACb,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAe;AAAA,IACf,UAAU;AAAA,IACV,WAAW,MAAU,EAAW,SAAS;AAAA,IACzC,kBAAA;AAAA,IACA,oBAAA;AAAA,IACA,oBAAA;AAAA,EACF,CAAC,GAOG,IAA0B,EAAiB,IAAA,CAAK,MAAgB,EAAY,IAAI,EAAE,KAAK,GAAG,GAC1F,IAAwB,EAAmB,KAAK,GAAG,GACnD,IAAqB,EAAgB,KAAK,GAAG,GAS7C,IAAA,MAAoC;AACxC,IAAI,MAAe,WAAW,CAAC,EAAW,UAC1C,EAAiB,UACf,GAAc,EAAc,CAAa,GAAG;AAAA,MAAE,iBAAA;AAAA,MAAiB,oBAAA;AAAA,IAAmB,CAAC,CACrF;AAAA,EACF;AAIA,EAAA,GAAA,MAAsB;AACpB,IAAA,EAA4B;AAAA,EAC9B,GAAG;AAAA,IACD,EAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,EAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,IAAgB,IAAS;AAAA,IAC7B,WAAW,EAAK;AAAA,IAChB,oBAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAc,EAAU,CAAA,GAAgB,QAAQ;AAAA,EAClD,CAAC,GAEK,IAAY,EAAO,GAAO,GAAkB,aAAa,GACzD,CAAC,GAAoB,CAAA,KAAqB,GAAkB,WAAW,CAAC,GAAG,IAAA,CAC9E,MAAW,EAAO,KACrB,GAEM,IACJ,MAAe,UAAA,CACV,MAAkB,EAAc,CAAK,EAAE,WAAA,MAAiB,MACzD,QAEA,IACJ,MAAe,UAAU,IAAmB,QAGxC,IADW,MAAQ,eAAe,MAAQ,iBACZ,EAAU,SAC5C,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS;AAAA,MACP,SAAS,GAAkB;AAAA,MAC3B,kBAAkB,EAAe,GAAkB,kBAAkB,GAAG,QAAQ;AAAA,IAClF;AAAA,IACA,OAAO,EAAU,CAAA,KAAM,EAAM,QAAQ,QAAQ;AAAA,IAC7C,MAAM;AAAA,IACN,gBAAe;AAAA,IACK,oBAAA;AAAA,IACpB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IACA,kBAAA;AAAA,EACnB,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA,IAfW;AAiB7B,SAAK,IAEH,gBAAA,GAAA,IAAA,EAAA,UAAA,CACE,gBAAA,EAAC,IAAD;AAAA,IACE,WAAW,GAAkB;AAAA,IACX,kBAAA;AAAA,IAClB,SAAS,GAAe;AAAA,IACxB,MAAM,GAAe;AAAA,IACrB,mBAAmB;AAAA,IACJ,eAAA;AAAA,IACf,gBAAgB,GAAe;AAAA,IAC/B,MAAM,EAAU,IAAA,CAAK,OAAS;AAAA,MAC5B,WAAW,EAAI;AAAA,MACf,OAAO,EAAI;AAAA,IACb,EAAE;AAAA,IACF,KAAK;AAAA,IACc,mBAAA;AAAA,IACnB,gBAAA,CAAiB,MAAS;AACxB,MAAA,EAAiB,EAAE,kBAAkB,EAAK,CAAC,GAC3C,EAA4B,EAAI;AAAA,IAClC;AAAA,EACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAW;AAAA,IAC3B,QAAQ;AAAA,IACR,SAAA,MAAe;AACb,MAAA,EAA4B,EAAK,GAIjC,EAAiB,EAAE,kBAAkB,OAAU,CAAC,GAGhD,EAA4B;AAAA,IAC9B;AAAA,IACA,OAAO,EAAa,QAAQ;AAAA,IAE5B,UAAA,gBAAA,EAAC,IAAD,EAA+B,MAAA,EAAO,CAAA;AAAA,EAChC,CAAA,CACR,EAAA,CAAA,IAvCsB,gBAAA,EAAC,GAAD,CAAS,CAAA;AA0CrC,CAAC"}
+{"version":3,"file":"TransactionHistoryBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.tsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react'\n\nimport { useTheme } from '@mui/material/styles'\nimport { observer } from 'mobx-react-lite'\n\nimport type { Beat, DataSeries, Transaction } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { BarChartV2 } from '../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../components/chartblocks/EmptyBarChart'\n\nimport { TransactionDrillDown } from './TransactionDrillDown'\nimport { useTransactionHistory } from './useTransactionHistory'\nimport {\n  getDefaultSelection,\n  getDrillDownConfig,\n  getFlattenedDataSeries,\n  toStoreFilter,\n} from './utils'\nimport {\n  Drawer,\n  useInsightsV2Store,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  Loader,\n} from '../../../common'\nimport { TransactionDetailsBlock } from '../TransactionDetailsBlock'\n\ninterface TransactionHistoryProp {\n  beat: Beat\n}\n\nexport const TransactionHistoryBlock = observer(({ beat }: TransactionHistoryProp) => {\n  const theme = useTheme()\n  const {\n    instanceSlotData,\n    beatTransactions,\n    spendCategoryGuids,\n    allAccountGuids,\n    categoryName,\n    displayedDateRange,\n    transactionStore,\n  } = useTransactionHistory(beat)\n\n  const { actionDrawer, setActionContext } = useInsightsV2Store()\n\n  const { common: commonCopy, insights_feed: insightsCopy } = useGlobalCopyStore()\n\n  const { isCopyLoaded } = useGlobalUiStore()\n\n  const [isTransactionDetailsOpen, setIsTransactionDetailsOpen] = useState(false)\n\n  const [closeTipSection, setCloseTipSection] = useState(false)\n\n  const { insights_payload } = beat\n\n  const dynamicCtaVariant =\n    actionDrawer.trigger === 'secondaryCta'\n      ? insights_payload?.secondary_cta?.variant\n      : insights_payload?.primary_cta?.variant\n\n  const { top, filterMode, header, colors, filterStrategy, tipSection } = getDrillDownConfig(\n    dynamicCtaVariant ?? '',\n  )\n\n  const { dataSeries, chartData, comparisonBars } = getFlattenedDataSeries({\n    data: instanceSlotData?.data_series as DataSeries,\n    ariaLabel: instanceSlotData?.ariaLabel ?? '',\n    top,\n    beatTransactions,\n    payload: instanceSlotData,\n  })\n\n  const { chartBarIndex, subTabIndex } = getDefaultSelection({\n    chartTabCount: chartData.length,\n    comparisonTabCount: comparisonBars.length,\n    actionDrawer,\n    beatGuid: beat.guid,\n  })\n\n  const [selectedIndex, setSelectedIndex] = useState(chartBarIndex)\n\n  const resolveFilter = (index: number) =>\n    filterStrategy({\n      beat,\n      beatTransactions,\n      dataSeries,\n      selectedIndex: index,\n      subIndex: subTabIndex,\n      isLastTab: index === dataSeries.length - 1,\n      instanceSlotData,\n      spendCategoryGuids,\n      displayedDateRange,\n    })\n\n  // Apply the current selection's filter. Store variants route through the store filter; local\n  // (upcomingBill) variants filter beatTransactions directly and only backfill the cache when the\n  // Stable primitive keys for the collections below: beatTransactions/spendCategoryGuids/\n  // allAccountGuids are recomputed (new array identity) every render, so depending on them directly\n  // re-fires the effect each render (REVIEW.md MEW-3732). Key on content instead.\n  const beatTransactionGuidsKey = beatTransactions.map((transaction) => transaction.guid).join(',')\n  const spendCategoryGuidsKey = spendCategoryGuids.join(',')\n  const allAccountGuidsKey = allAccountGuids.join(',')\n\n  // Re-applies the current selection's filter to the shared transactionStore. Called both by the\n  // effect below (on selection change) and when the nested TransactionDetailsBlock drawer closes:\n  // AddMerchantBudgetAction (opened from within that drawer) overwrites transactionStore.filter\n  // with a merchant_guid-only filter while its own drawer is open, and never restores it — leaving\n  // the row list stuck showing only that one merchant's transactions after backing all the way out.\n  // Re-running this on close re-derives the filter fresh instead of relying on whatever the nested\n  // drawers left behind.\n  const applyCurrentSelectionFilter = () => {\n    if (filterMode !== 'store' || !dataSeries.length) return\n    transactionStore.setFilter(\n      toStoreFilter(resolveFilter(selectedIndex), { allAccountGuids, displayedDateRange }),\n    )\n  }\n\n  // store variants route the selection through the shared store filter; local (upcomingBill) variants\n  // filter beatTransactions directly, so there's nothing to push to the store for them.\n  useLayoutEffect(() => {\n    applyCurrentSelectionFilter()\n  }, [\n    beat.guid,\n    selectedIndex,\n    filterMode,\n    dataSeries.length,\n    instanceSlotData,\n    displayedDateRange,\n    spendCategoryGuidsKey,\n    allAccountGuidsKey,\n    beatTransactionGuidsKey,\n  ])\n\n  const headerContent = header?.({\n    title: insights_payload?.title,\n    subHeader: insights_payload?.sub_title,\n    categoryName,\n    selectedDate: chartData[selectedIndex]?.date ?? undefined,\n  })\n\n  const barColors = colors(theme, instanceSlotData?.category_guid)\n\n  if (!isCopyLoaded) return <Loader />\n\n  // TODO: Temporary fallback while the backend doesn't always send `legends` on every beat/variant.\n  // Remove this once the backend guarantees `legends` on the payload.\n  const legendFallbackLabels = [insightsCopy.general.monthly_amount, insightsCopy.general.trend]\n\n  const [monthlyAmountLabel, trendAmountLabel] = instanceSlotData?.legends?.length\n    ? instanceSlotData.legends.map((legend) => legend.label)\n    : legendFallbackLabels\n\n  const transactionFilter =\n    filterMode === 'local'\n      ? (index: number) => resolveFilter(index).custom ?? (() => true)\n      : undefined\n\n  const baseTransactions: Transaction[] | undefined =\n    filterMode === 'local' ? beatTransactions : undefined\n\n  const isBarTop = top === 'singleBar' || top === 'upcomingBill'\n  const chartTop = !isBarTop ? null : chartData.length ? (\n    <BarChartV2\n      amounts={{\n        average: instanceSlotData?.average_amount,\n        formattedAverage: formatCurrency(instanceSlotData?.average_amount ?? 0, '0,0.00'),\n      }}\n      color={barColors[0] ?? theme.palette.primary.main}\n      data={chartData}\n      legendPosition=\"top\"\n      margin={{\n        bottom: 30,\n        top: 20,\n        left: 24,\n        right: 24,\n      }}\n      monthlyAmountLabel={monthlyAmountLabel}\n      onBarClick={setSelectedIndex}\n      selectedTabIndex={selectedIndex}\n      trendAmountLabel={trendAmountLabel}\n    />\n  ) : (\n    <EmptyBarChart />\n  )\n\n  return (\n    <>\n      <TransactionDrillDown\n        ariaLabel={instanceSlotData?.ariaLabel}\n        baseTransactions={baseTransactions}\n        heading={headerContent?.heading}\n        icon={headerContent?.icon}\n        onSelectionChange={setSelectedIndex}\n        selectedIndex={selectedIndex}\n        subHeadingText={headerContent?.subHeadingText}\n        tabs={chartData.map((bar) => ({\n          ariaLabel: bar.ariaLabel,\n          label: bar.label,\n        }))}\n        top={chartTop}\n        {...(tipSection && {\n          tipSection:\n            !closeTipSection &&\n            tipSection(setCloseTipSection, insightsCopy, insights_payload?.sub_title?.text),\n        })}\n        transactionFilter={transactionFilter}\n        onEachRowClick={(guid) => {\n          setActionContext({ transaction_guid: guid })\n          setIsTransactionDetailsOpen(true)\n        }}\n      />\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isTransactionDetailsOpen}\n        onClose={() => {\n          setIsTransactionDetailsOpen(false)\n          // Clear only the key this nested drawer owns — setActionContext merges, so an\n          // explicit `{}` would be a no-op and leave transaction_guid stuck in the shared\n          // context, and the outer drawer's own context (e.g. chartBarIndex) must survive.\n          setActionContext({ transaction_guid: undefined })\n          // Re-apply this block's own filter: a further-nested AddMerchantBudgetAction drawer may\n          // have overwritten transactionStore.filter (merchant_guid-only) without restoring it.\n          applyCurrentSelectionFilter()\n        }}\n        title={insightsCopy.general.transaction_details_title}\n      >\n        <TransactionDetailsBlock beat={beat} />\n      </Drawer>\n    </>\n  )\n})\n"],"mappings":"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"}

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.d.ts

@@ -1,17 +1,18 @@
 import { ReactNode } from 'react';
 import { Theme } from '@mui/material/styles';
-import { Beat, Transaction } from '../../../core';
+import { Beat, InsightsFeedCopy, Subtitle, Transaction } from '../../../core';
 import { TransactionFilter } from '../../../core/stores/TransactionStore';
 import { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData';
 import { ChartDataSeriesItem } from '../../blocks/ChartBlocks/BarchartBlock/utils';
+import { TipSectionProps } from '../../../insights/components/shared/ChartDrawerTemplate/TipSection';
 export interface DrillDownHeader {
     heading?: string;
     subHeadingText?: string;
     icon?: ReactNode;
 }
 export interface DrillDownHeaderContext {
-    htmlTitle?: string;
-    primaryTransaction?: Transaction;
+    title?: string;
+    subHeader?: Subtitle;
     categoryName: string;
     selectedDate?: string | Date;
 }
@@ -61,6 +62,7 @@ export interface DrillDownVariantConfig {
     filterStrategy: FilterStrategy;
     colors: ColorKind;
     header?: HeaderKind;
+    tipSection?: (setCloseTipSection: (flag: boolean) => void, copy: InsightsFeedCopy, merchantName?: string) => TipSectionProps;
     scope: 'store' | 'beat';
     filterMode: 'store' | 'local';
 }

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.es.js

@@ -1,9 +1,10 @@
-import { DATE_FORMATS_INTL as p, formatDate as u } from "../../../core/constants/DateFormats.es.js";
-import { getCategoryColor as y } from "../../../core/utils/CategoryUtil.es.js";
-import { MerchantLogo as N } from "@mxenabled/mxui";
-import { Icon as T } from "@mxenabled/mx-icons";
-import { jsx as g } from "react/jsx-runtime";
-import { endOfMonth as S, startOfMonth as O } from "date-fns";
+import { buildDynamicCopy as u } from "../../../core/utils/Localization.es.js";
+import { DATE_FORMATS_INTL as p, formatDate as y } from "../../../core/constants/DateFormats.es.js";
+import { getCategoryColor as N } from "../../../core/utils/CategoryUtil.es.js";
+import { MerchantLogo as S } from "@mxenabled/mxui";
+import { Icon as O } from "@mxenabled/mx-icons";
+import { jsx as c } from "react/jsx-runtime";
+import { endOfMonth as T, startOfMonth as f } from "date-fns";
 var i = {
   TRANSACTION: "bill_amount_not_standard",
   CATEGORY_SPEND: "category_spend",
@@ -16,66 +17,73 @@ var i = {
   COST_OF_LIVING: "cost_living_to_income",
   NON_ESSENTIAL_CATEGORY: "non_essential_category_summary",
   DEPOSIT_SUMMARY: "monthly_deposit_summary"
-}, c = (e, t) => t && y(t, e) || e.palette.primary.main, _ = (e) => ({
-  start: O(new Date(e ?? NaN)),
-  end: S(new Date(e ?? NaN))
-}), d = (e) => e?.length ? { accounts: e } : {}, l = ({ beatTransactions: e, dataSeries: t, selectedIndex: n }) => {
-  const o = t[n], r = o?.guid, a = e.find((s) => s.guid === r)?.has_been_split;
+}, _ = (e, t) => t && N(t, e) || e.palette.primary.main, l = (e) => ({
+  start: f(new Date(e ?? NaN)),
+  end: T(new Date(e ?? NaN))
+}), d = (e) => e?.length ? { accounts: e } : {}, g = ({ beatTransactions: e, dataSeries: t, selectedIndex: o }) => {
+  const r = t[o], a = r?.guid, s = e.find((n) => n.guid === a)?.has_been_split;
   return {
-    custom: (s) => s.guid === r,
-    dateRange: _(o?.date),
-    showSplits: !a
+    custom: (n) => n.guid === a,
+    dateRange: l(r?.date),
+    showSplits: !s
   };
-}, I = ({ dataSeries: e, selectedIndex: t, instanceSlotData: n }) => {
-  const o = e[t], r = n.category_guid ?? o?.guid;
+}, C = ({ dataSeries: e, selectedIndex: t, instanceSlotData: o }) => {
+  const r = e[t], a = o.category_guid ?? r?.guid;
   return {
-    custom: (a) => a.category_guid === r || a.top_level_category_guid === r,
-    dateRange: _(o?.date)
+    custom: (s) => s.category_guid === a || s.top_level_category_guid === a,
+    dateRange: l(r?.date)
   };
-}, f = ({ dataSeries: e, selectedIndex: t, spendCategoryGuids: n, instanceSlotData: o }) => {
-  const r = e[t];
+}, I = ({ dataSeries: e, selectedIndex: t, spendCategoryGuids: o, instanceSlotData: r }) => {
+  const a = e[t];
   return {
-    custom: (a) => !!a.top_level_category_guid && n.includes(a.top_level_category_guid),
-    dateRange: _(r?.date),
-    ...d(o.account_guids)
+    custom: (s) => !!s.top_level_category_guid && o.includes(s.top_level_category_guid),
+    dateRange: l(a?.date),
+    ...d(r.account_guids)
   };
-}, A = ({ beat: e, dataSeries: t, selectedIndex: n, isLastTab: o, instanceSlotData: r }) => {
-  const a = t[n], { start: s, end: m } = _(a?.date);
+}, h = ({ beat: e, dataSeries: t, selectedIndex: o, isLastTab: r, instanceSlotData: a }) => {
+  const s = t[o], { start: n, end: m } = l(s?.date);
   return {
     dateRange: {
-      start: s,
-      end: o && e.created_at ? new Date(e.created_at) : m
+      start: n,
+      end: r && e.created_at ? new Date(e.created_at) : m
     },
-    ...d(r.account_guids)
+    ...d(a.account_guids)
   };
-}, L = {
+}, B = {
   [i.TRANSACTION]: {
     top: "singleBar",
     scope: "store",
     filterMode: "store",
-    filterStrategy: l,
-    colors: (e, t) => [c(e, t)],
-    header: (e) => ({
-      heading: e.htmlTitle,
-      subHeadingText: e.primaryTransaction?.description || void 0,
-      icon: /* @__PURE__ */ g(N, {
-        alt: e.primaryTransaction?.description,
-        categoryGuid: e.primaryTransaction?.category_guid || "",
-        merchantGuid: e.primaryTransaction?.merchant_guid || "",
-        size: 16
-      })
+    filterStrategy: g,
+    colors: (e, t) => [_(e, t)],
+    header: (e) => {
+      const { title: t, subHeader: o } = e;
+      return {
+        heading: t,
+        subHeadingText: o?.text || void 0,
+        icon: /* @__PURE__ */ c(S, {
+          alt: o?.text,
+          categoryGuid: o?.logo?.category_guid || "",
+          merchantGuid: o?.logo?.merchant_guid || "",
+          size: 16
+        })
+      };
+    },
+    tipSection: (e, t, o = "") => ({
+      message: u(t.general.tip_section_message, /* @__PURE__ */ c("strong", { children: t.general.tip_section_title }), /* @__PURE__ */ c("strong", { children: o })),
+      onDismiss: () => e(!0)
     })
   },
   [i.CATEGORY_SPEND]: {
     top: "singleBar",
-    filterStrategy: I,
+    filterStrategy: C,
     scope: "store",
     filterMode: "store",
-    colors: (e, t) => [c(e, t)],
+    colors: (e, t) => [_(e, t)],
     header: (e) => ({
       heading: e.categoryName,
-      subHeadingText: e.selectedDate && u(e.selectedDate, p.MONTH_LONG) || "",
-      icon: /* @__PURE__ */ g(T, {
+      subHeadingText: e.selectedDate && y(e.selectedDate, p.MONTH_LONG) || "",
+      icon: /* @__PURE__ */ c(O, {
         name: "calendar_month",
         size: 16
       })
@@ -83,36 +91,36 @@ var i = {
   },
   [i.MONTHLY_SPEND]: {
     top: "singleBar",
-    filterStrategy: f,
+    filterStrategy: I,
     scope: "store",
     filterMode: "store",
     colors: (e) => [e.palette.chart.chart2 ?? e.palette.primary.main]
   },
   [i.ACCOUNT_BALANCE]: {
     top: "singleBar",
-    filterStrategy: A,
+    filterStrategy: h,
     scope: "store",
     filterMode: "store",
     colors: (e) => [e.palette.success.main]
   },
   [i.UPCOMING_BILL]: {
     top: "upcomingBill",
-    filterStrategy: l,
+    filterStrategy: g,
     scope: "beat",
     filterMode: "local",
-    colors: (e, t) => [c(e, t)]
+    colors: (e, t) => [_(e, t)]
   }
-}, R = {
+}, G = {
   top: "singleBar",
-  filterStrategy: l,
+  filterStrategy: g,
   scope: "store",
   filterMode: "store",
-  colors: (e, t) => [c(e, t)]
+  colors: (e, t) => [_(e, t)]
 };
 export {
   i as DRILLDOWN_VARIANTS,
-  R as FALLBACK,
-  L as layout
+  G as FALLBACK,
+  B as layout
 };
 
 //# sourceMappingURL=layout.es.js.map

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Theme } from '@mui/material/styles'\nimport { endOfMonth, startOfMonth } from 'date-fns'\nimport { getCategoryColor } from '../../../core/utils/CategoryUtil'\nimport type { Beat, Transaction } from '../../../core'\nimport type { TransactionFilter } from '../../../core/stores/TransactionStore'\nimport type { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData'\nimport { MerchantLogo } from '@mxenabled/mxui'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Icon } from '@mxenabled/mx-icons'\nimport type { ChartDataSeriesItem } from '../../blocks/ChartBlocks/BarchartBlock/utils'\n\nexport interface DrillDownHeader {\n  heading?: string\n  subHeadingText?: string\n  icon?: ReactNode\n}\n\nexport interface DrillDownHeaderContext {\n  htmlTitle?: string\n  primaryTransaction?: Transaction\n  categoryName: string\n  selectedDate?: string | Date\n}\n\nexport const DRILLDOWN_VARIANTS = {\n  TRANSACTION: 'bill_amount_not_standard',\n  CATEGORY_SPEND: 'category_spend',\n  MONTHLY_SPEND: 'monthly_spend_comparison',\n  ACCOUNT_BALANCE: 'savings_account_balances_summary',\n  UPCOMING_BILL: 'upcoming_bill',\n  SPEND_TO_INCOME: 'monthly_spend_to_income',\n  SAVINGS_TO_INCOME: 'monthly_savings_to_income',\n  DEBT_TO_INCOME: 'monthly_debt_to_income',\n  COST_OF_LIVING: 'cost_living_to_income',\n  NON_ESSENTIAL_CATEGORY: 'non_essential_category_summary',\n  DEPOSIT_SUMMARY: 'monthly_deposit_summary',\n} as const\n\nexport type DrillDownVariant = (typeof DRILLDOWN_VARIANTS)[keyof typeof DRILLDOWN_VARIANTS]\n\n/**\n * One row of the flattened data_series a filterStrategy indexes into: a single-bar monthly total or a\n * synthesized upcoming-bill bar. Fields are optional because the backend keys each row dynamically\n * from data_series.names and not every variant carries a guid/category. Double-bar comparison rows\n * will extend this in the next MR.\n */\n\n// Resolves the top-chart palette from the theme (and the beat's category, when relevant).\nexport type ColorKind = (theme: Theme, categoryGuid?: string) => string[]\n\n// Resolves the dynamic drawer header (heading/sub-heading/icon JSX) from the selection context.\nexport type HeaderKind = (ctx: DrillDownHeaderContext) => DrillDownHeader\n\n/**\n * Everything a filterStrategy needs to turn the currently-selected bar/sub-tab into a\n * TransactionFilter. Data-only so strategies stay pure and testable.\n */\nexport interface FilterContext {\n  beat: Beat\n  beatTransactions: Transaction[]\n  dataSeries: ChartDataSeriesItem[]\n  selectedIndex: number\n  subIndex: number\n  isLastTab: boolean\n  instanceSlotData: InsightsInstanceSlotData\n  spendCategoryGuids: string[]\n  displayedDateRange: { start: Date; end: Date }\n}\n\n// Resolves the current selection into a TransactionFilter. Carried on each config row so behavior\n// lives next to the variant it belongs to (no separate strategy registry to chase).\nexport type FilterStrategy = (ctx: FilterContext) => TransactionFilter\n\nexport interface DrillDownVariantConfig {\n  top: 'singleBar' | 'upcomingBill' | 'doubleBar' | 'tabsOnly'\n  filterStrategy: FilterStrategy\n  colors: ColorKind\n  header?: HeaderKind\n  scope: 'store' | 'beat'\n  filterMode: 'store' | 'local'\n}\nconst categoryColor = (theme: Theme, categoryGuid?: string): string =>\n  (categoryGuid && getCategoryColor(categoryGuid, theme)) || theme.palette.primary.main\n\nconst monthRange = (date: string | number | Date | undefined) => ({\n  start: startOfMonth(new Date(date ?? NaN)),\n  end: endOfMonth(new Date(date ?? NaN)),\n})\n\n// Scopes a filter to the beat's accounts when the beat carries account_guids; otherwise leaves\n// accounts unset so the store default (all accounts) applies.\nconst accountScope = (accountGuids?: string[]): Pick<TransactionFilter, 'accounts'> =>\n  accountGuids?.length ? { accounts: accountGuids } : {}\n\n// ── Single-bar filter strategies (this MR) ────────────────────────────────────────────────────\n\n// BillAmountNotStandard / UpcomingBill — the series carries a transaction (TRN) guid; match a single\n// transaction by guid within its month.\nconst transactionGuidStrategy: FilterStrategy = ({\n  beatTransactions,\n  dataSeries,\n  selectedIndex,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const seriesGuid = seriesItem?.guid\n  const hasBeenSplit = beatTransactions.find((trn) => trn.guid === seriesGuid)?.has_been_split\n\n  return {\n    custom: (trn) => trn.guid === seriesGuid,\n    dateRange: monthRange(seriesItem?.date),\n    showSplits: !hasBeenSplit,\n  }\n}\n\n// CategorySpendingV2 — match transactions in the beat's category (or whose top-level category is that\n// guid) within the month.\nconst categoryStrategy: FilterStrategy = ({ dataSeries, selectedIndex, instanceSlotData }) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const categoryGuid = instanceSlotData.category_guid ?? seriesItem?.guid\n\n  return {\n    custom: (trn) =>\n      trn.category_guid === categoryGuid || trn.top_level_category_guid === categoryGuid,\n    dateRange: monthRange(seriesItem?.date),\n  }\n}\n\n// MonthlySpendComparisonV2 — no per-bar guid; show all spending-category transactions\n// (income/transfers/investments excluded via spendCategoryGuids) within the month.\nconst spendCategoriesStrategy: FilterStrategy = ({\n  dataSeries,\n  selectedIndex,\n  spendCategoryGuids,\n  instanceSlotData,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n\n  return {\n    custom: (trn) =>\n      !!trn.top_level_category_guid && spendCategoryGuids.includes(trn.top_level_category_guid),\n    dateRange: monthRange(seriesItem?.date),\n    ...accountScope(instanceSlotData.account_guids),\n  }\n}\n\n// SavingsAccountBalancesSummary — balances, not categorized spend. Filter by month only; the most\n// recent month is capped at the beat's creation time to match the snapshot the balance was computed\n// from.\nconst accountDateStrategy: FilterStrategy = ({\n  beat,\n  dataSeries,\n  selectedIndex,\n  isLastTab,\n  instanceSlotData,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const { start, end } = monthRange(seriesItem?.date)\n\n  return {\n    dateRange: {\n      start,\n      end: isLastTab && beat.created_at ? new Date(beat.created_at) : end,\n    },\n    ...accountScope(instanceSlotData.account_guids),\n  }\n}\n\n// ── Double-bar + tabsOnly strategies (NEXT MR) ───────────────────────────────────────────────────\n// TODO(next MR — double bar): comparisonAggregatedGuidsStrategy — month × sub-tab membership over the\n// comparison bars' precomputed subGuids. Needs comparisonBars in FilterContext.\n// TODO(next MR — tabsOnly): aggregatedGuids / depositSummary strategies for the donut-drawer beats.\n\nexport const layout: Partial<Record<DrillDownVariant, DrillDownVariantConfig>> = {\n  [DRILLDOWN_VARIANTS.TRANSACTION]: {\n    top: 'singleBar',\n    scope: 'store',\n    filterMode: 'store',\n    filterStrategy: transactionGuidStrategy,\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n    header: (ctx: DrillDownHeaderContext) => {\n      return {\n        heading: ctx.htmlTitle,\n        subHeadingText: ctx.primaryTransaction?.description || undefined,\n        icon: (\n          <MerchantLogo\n            alt={ctx.primaryTransaction?.description}\n            categoryGuid={ctx.primaryTransaction?.category_guid || ''}\n            merchantGuid={ctx.primaryTransaction?.merchant_guid || ''}\n            size={16}\n          />\n        ),\n      }\n    },\n  },\n  [DRILLDOWN_VARIANTS.CATEGORY_SPEND]: {\n    top: 'singleBar',\n    filterStrategy: categoryStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n    header: (ctx: DrillDownHeaderContext) => {\n      return {\n        heading: ctx.categoryName,\n        subHeadingText: ctx.selectedDate\n          ? formatDate(ctx.selectedDate, DATE_FORMATS_INTL.MONTH_LONG) || ''\n          : '',\n        icon: <Icon name=\"calendar_month\" size={16} />,\n      }\n    },\n  },\n  [DRILLDOWN_VARIANTS.MONTHLY_SPEND]: {\n    top: 'singleBar',\n    filterStrategy: spendCategoriesStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme) => [theme.palette.chart.chart2 ?? theme.palette.primary.main],\n  },\n  [DRILLDOWN_VARIANTS.ACCOUNT_BALANCE]: {\n    top: 'singleBar',\n    filterStrategy: accountDateStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme) => [theme.palette.success.main],\n  },\n  [DRILLDOWN_VARIANTS.UPCOMING_BILL]: {\n    top: 'upcomingBill',\n    filterStrategy: transactionGuidStrategy,\n    scope: 'beat',\n    filterMode: 'local',\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n  },\n\n  // ── NEXT MR: double-bar comparison beats (month tabs + spend/income sub-tabs) ────────────────\n  // [DRILLDOWN_VARIANTS.SPEND_TO_INCOME]:   comparison('spendVsIncome'),\n  // [DRILLDOWN_VARIANTS.SAVINGS_TO_INCOME]: comparison('savingsVsIncome'),\n  // [DRILLDOWN_VARIANTS.DEBT_TO_INCOME]:    comparison('debtVsIncome'),\n  // [DRILLDOWN_VARIANTS.COST_OF_LIVING]:    comparison('costOfLiving'),\n  //\n  // ── NEXT MR: tabsOnly donut-drawer beats (no top chart) ───────────────────────────────────\n  // [DRILLDOWN_VARIANTS.NON_ESSENTIAL_CATEGORY]: { top: 'tabsOnly', ... },\n  // [DRILLDOWN_VARIANTS.DEPOSIT_SUMMARY]:        { top: 'tabsOnly', ... },\n}\n\n// Fallback for a missing/typo'd backend variant: a single-bar, store-scoped drawer filtered by the\n// beat's transaction guid and colored by category, so the drawer still renders instead of crashing.\nexport const FALLBACK: DrillDownVariantConfig = {\n  top: 'singleBar',\n  filterStrategy: transactionGuidStrategy,\n  scope: 'store',\n  filterMode: 'store',\n  colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n}\n"],"mappings":"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"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Theme } from '@mui/material/styles'\nimport { endOfMonth, startOfMonth } from 'date-fns'\nimport { getCategoryColor } from '../../../core/utils/CategoryUtil'\nimport {\n  type Beat,\n  type InsightsFeedCopy,\n  type Subtitle,\n  type Transaction,\n  buildDynamicCopy,\n} from '../../../core'\nimport type { TransactionFilter } from '../../../core/stores/TransactionStore'\nimport type { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData'\nimport { MerchantLogo } from '@mxenabled/mxui'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Icon } from '@mxenabled/mx-icons'\nimport type { ChartDataSeriesItem } from '../../blocks/ChartBlocks/BarchartBlock/utils'\nimport type { TipSectionProps } from '../../../insights/components/shared/ChartDrawerTemplate/TipSection'\n\nexport interface DrillDownHeader {\n  heading?: string\n  subHeadingText?: string\n  icon?: ReactNode\n}\n\nexport interface DrillDownHeaderContext {\n  title?: string\n  subHeader?: Subtitle\n  categoryName: string\n  selectedDate?: string | Date\n}\n\nexport const DRILLDOWN_VARIANTS = {\n  TRANSACTION: 'bill_amount_not_standard',\n  CATEGORY_SPEND: 'category_spend',\n  MONTHLY_SPEND: 'monthly_spend_comparison',\n  ACCOUNT_BALANCE: 'savings_account_balances_summary',\n  UPCOMING_BILL: 'upcoming_bill',\n  SPEND_TO_INCOME: 'monthly_spend_to_income',\n  SAVINGS_TO_INCOME: 'monthly_savings_to_income',\n  DEBT_TO_INCOME: 'monthly_debt_to_income',\n  COST_OF_LIVING: 'cost_living_to_income',\n  NON_ESSENTIAL_CATEGORY: 'non_essential_category_summary',\n  DEPOSIT_SUMMARY: 'monthly_deposit_summary',\n} as const\n\nexport type DrillDownVariant = (typeof DRILLDOWN_VARIANTS)[keyof typeof DRILLDOWN_VARIANTS]\n\n/**\n * One row of the flattened data_series a filterStrategy indexes into: a single-bar monthly total or a\n * synthesized upcoming-bill bar. Fields are optional because the backend keys each row dynamically\n * from data_series.names and not every variant carries a guid/category. Double-bar comparison rows\n * will extend this in the next MR.\n */\n\n// Resolves the top-chart palette from the theme (and the beat's category, when relevant).\nexport type ColorKind = (theme: Theme, categoryGuid?: string) => string[]\n\n// Resolves the dynamic drawer header (heading/sub-heading/icon JSX) from the selection context.\nexport type HeaderKind = (ctx: DrillDownHeaderContext) => DrillDownHeader\n\n/**\n * Everything a filterStrategy needs to turn the currently-selected bar/sub-tab into a\n * TransactionFilter. Data-only so strategies stay pure and testable.\n */\nexport interface FilterContext {\n  beat: Beat\n  beatTransactions: Transaction[]\n  dataSeries: ChartDataSeriesItem[]\n  selectedIndex: number\n  subIndex: number\n  isLastTab: boolean\n  instanceSlotData: InsightsInstanceSlotData\n  spendCategoryGuids: string[]\n  displayedDateRange: { start: Date; end: Date }\n}\n\n// Resolves the current selection into a TransactionFilter. Carried on each config row so behavior\n// lives next to the variant it belongs to (no separate strategy registry to chase).\nexport type FilterStrategy = (ctx: FilterContext) => TransactionFilter\n\nexport interface DrillDownVariantConfig {\n  top: 'singleBar' | 'upcomingBill' | 'doubleBar' | 'tabsOnly'\n  filterStrategy: FilterStrategy\n  colors: ColorKind\n  header?: HeaderKind\n  tipSection?: (\n    setCloseTipSection: (flag: boolean) => void,\n    copy: InsightsFeedCopy,\n    merchantName?: string,\n  ) => TipSectionProps\n  scope: 'store' | 'beat'\n  filterMode: 'store' | 'local'\n}\nconst categoryColor = (theme: Theme, categoryGuid?: string): string =>\n  (categoryGuid && getCategoryColor(categoryGuid, theme)) || theme.palette.primary.main\n\nconst monthRange = (date: string | number | Date | undefined) => ({\n  start: startOfMonth(new Date(date ?? NaN)),\n  end: endOfMonth(new Date(date ?? NaN)),\n})\n\n// Scopes a filter to the beat's accounts when the beat carries account_guids; otherwise leaves\n// accounts unset so the store default (all accounts) applies.\nconst accountScope = (accountGuids?: string[]): Pick<TransactionFilter, 'accounts'> =>\n  accountGuids?.length ? { accounts: accountGuids } : {}\n\n// ── Single-bar filter strategies (this MR) ────────────────────────────────────────────────────\n\n// BillAmountNotStandard / UpcomingBill — the series carries a transaction (TRN) guid; match a single\n// transaction by guid within its month.\nconst transactionGuidStrategy: FilterStrategy = ({\n  beatTransactions,\n  dataSeries,\n  selectedIndex,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const seriesGuid = seriesItem?.guid\n  const hasBeenSplit = beatTransactions.find((trn) => trn.guid === seriesGuid)?.has_been_split\n\n  return {\n    custom: (trn) => trn.guid === seriesGuid,\n    dateRange: monthRange(seriesItem?.date),\n    showSplits: !hasBeenSplit,\n  }\n}\n\n// CategorySpendingV2 — match transactions in the beat's category (or whose top-level category is that\n// guid) within the month.\nconst categoryStrategy: FilterStrategy = ({ dataSeries, selectedIndex, instanceSlotData }) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const categoryGuid = instanceSlotData.category_guid ?? seriesItem?.guid\n\n  return {\n    custom: (trn) =>\n      trn.category_guid === categoryGuid || trn.top_level_category_guid === categoryGuid,\n    dateRange: monthRange(seriesItem?.date),\n  }\n}\n\n// MonthlySpendComparisonV2 — no per-bar guid; show all spending-category transactions\n// (income/transfers/investments excluded via spendCategoryGuids) within the month.\nconst spendCategoriesStrategy: FilterStrategy = ({\n  dataSeries,\n  selectedIndex,\n  spendCategoryGuids,\n  instanceSlotData,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n\n  return {\n    custom: (trn) =>\n      !!trn.top_level_category_guid && spendCategoryGuids.includes(trn.top_level_category_guid),\n    dateRange: monthRange(seriesItem?.date),\n    ...accountScope(instanceSlotData.account_guids),\n  }\n}\n\n// SavingsAccountBalancesSummary — balances, not categorized spend. Filter by month only; the most\n// recent month is capped at the beat's creation time to match the snapshot the balance was computed\n// from.\nconst accountDateStrategy: FilterStrategy = ({\n  beat,\n  dataSeries,\n  selectedIndex,\n  isLastTab,\n  instanceSlotData,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const { start, end } = monthRange(seriesItem?.date)\n\n  return {\n    dateRange: {\n      start,\n      end: isLastTab && beat.created_at ? new Date(beat.created_at) : end,\n    },\n    ...accountScope(instanceSlotData.account_guids),\n  }\n}\n\n// ── Double-bar + tabsOnly strategies (NEXT MR) ───────────────────────────────────────────────────\n// TODO(next MR — double bar): comparisonAggregatedGuidsStrategy — month × sub-tab membership over the\n// comparison bars' precomputed subGuids. Needs comparisonBars in FilterContext.\n// TODO(next MR — tabsOnly): aggregatedGuids / depositSummary strategies for the donut-drawer beats.\n\nexport const layout: Partial<Record<DrillDownVariant, DrillDownVariantConfig>> = {\n  [DRILLDOWN_VARIANTS.TRANSACTION]: {\n    top: 'singleBar',\n    scope: 'store',\n    filterMode: 'store',\n    filterStrategy: transactionGuidStrategy,\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n    header: (ctx: DrillDownHeaderContext) => {\n      const { title, subHeader } = ctx\n      return {\n        heading: title,\n        subHeadingText: subHeader?.text || undefined,\n        icon: (\n          <MerchantLogo\n            alt={subHeader?.text}\n            categoryGuid={subHeader?.logo?.category_guid || ''}\n            merchantGuid={subHeader?.logo?.merchant_guid || ''}\n            size={16}\n          />\n        ),\n      }\n    },\n    tipSection: (setCloseTipSection, copy, merchantName = '') => {\n      return {\n        message: buildDynamicCopy(\n          copy.general.tip_section_message,\n          <strong>{copy.general.tip_section_title}</strong>,\n          <strong>{merchantName}</strong>,\n        ),\n        onDismiss: () => setCloseTipSection(true),\n      } as TipSectionProps\n    },\n  },\n  [DRILLDOWN_VARIANTS.CATEGORY_SPEND]: {\n    top: 'singleBar',\n    filterStrategy: categoryStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n    header: (ctx: DrillDownHeaderContext) => {\n      return {\n        heading: ctx.categoryName,\n        subHeadingText: ctx.selectedDate\n          ? formatDate(ctx.selectedDate, DATE_FORMATS_INTL.MONTH_LONG) || ''\n          : '',\n        icon: <Icon name=\"calendar_month\" size={16} />,\n      }\n    },\n  },\n  [DRILLDOWN_VARIANTS.MONTHLY_SPEND]: {\n    top: 'singleBar',\n    filterStrategy: spendCategoriesStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme) => [theme.palette.chart.chart2 ?? theme.palette.primary.main],\n  },\n  [DRILLDOWN_VARIANTS.ACCOUNT_BALANCE]: {\n    top: 'singleBar',\n    filterStrategy: accountDateStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme) => [theme.palette.success.main],\n  },\n  [DRILLDOWN_VARIANTS.UPCOMING_BILL]: {\n    top: 'upcomingBill',\n    filterStrategy: transactionGuidStrategy,\n    scope: 'beat',\n    filterMode: 'local',\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n  },\n\n  // ── NEXT MR: double-bar comparison beats (month tabs + spend/income sub-tabs) ────────────────\n  // [DRILLDOWN_VARIANTS.SPEND_TO_INCOME]:   comparison('spendVsIncome'),\n  // [DRILLDOWN_VARIANTS.SAVINGS_TO_INCOME]: comparison('savingsVsIncome'),\n  // [DRILLDOWN_VARIANTS.DEBT_TO_INCOME]:    comparison('debtVsIncome'),\n  // [DRILLDOWN_VARIANTS.COST_OF_LIVING]:    comparison('costOfLiving'),\n  //\n  // ── NEXT MR: tabsOnly donut-drawer beats (no top chart) ───────────────────────────────────\n  // [DRILLDOWN_VARIANTS.NON_ESSENTIAL_CATEGORY]: { top: 'tabsOnly', ... },\n  // [DRILLDOWN_VARIANTS.DEPOSIT_SUMMARY]:        { top: 'tabsOnly', ... },\n}\n\n// Fallback for a missing/typo'd backend variant: a single-bar, store-scoped drawer filtered by the\n// beat's transaction guid and colored by category, so the drawer still renders instead of crashing.\nexport const FALLBACK: DrillDownVariantConfig = {\n  top: 'singleBar',\n  filterStrategy: transactionGuidStrategy,\n  scope: 'store',\n  filterMode: 'store',\n  colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n}\n"],"mappings":"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"}

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.d.ts

@@ -1,3 +1,5 @@
 import { BarChartBlockData } from '../../../../core/types/InsightsInstanceSlotData';
 import { BlockProps } from '../../types';
-export declare const BarchartBlock: ({ payload, beatGuid }: BlockProps<BarChartBlockData>) => import("react/jsx-runtime").JSX.Element;
+export declare const BarchartBlock: (({ payload, beatGuid }: BlockProps<BarChartBlockData>) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js

@@ -1,36 +1,40 @@
-import { useInsightsV2Store as b } from "../../../../common/context/hooks.es.js";
-import { formatCurrency as B } from "../../../../core/utils/NumberFormatting.es.js";
-import { BarChartV2 as C } from "../../../components/chartblocks/BarchartV2.es.js";
-import { EmptyBarChart as _ } from "../../../components/chartblocks/EmptyBarChart.es.js";
-import { barChartVariant as A, buildChartData as I, buildDataSeries as T } from "./utils.es.js";
-import { actionBlocksKey as x } from "../../../mappings/actionBlocksKey.es.js";
-import S from "react";
-import { jsx as e } from "react/jsx-runtime";
-import { useTheme as k } from "@mui/material/styles";
-var j = ({ payload: n, beatGuid: m = "" }) => {
-  const c = k(), { openActionDrawer: s } = b(), { instance_slot: i, instance_slot_data: a } = n, { data_series: l, ariaLabel: h = "", average_amount: o = 0, legends: p = [] } = a, t = I(T(l), h), [d] = S.useState(t.length - 1), { color: u } = A(i, a, c), [f, g] = p.map((r) => r.label);
-  return t.length ? /* @__PURE__ */ e(C, {
+import { useGlobalCopyStore as B, useGlobalUiStore as y, useInsightsV2Store as A } from "../../../../common/context/hooks.es.js";
+import { formatCurrency as L } from "../../../../core/utils/NumberFormatting.es.js";
+import S from "../../../../common/components/Loader.es.js";
+import { BarChartV2 as I } from "../../../components/chartblocks/BarchartV2.es.js";
+import { EmptyBarChart as T } from "../../../components/chartblocks/EmptyBarChart.es.js";
+import { barChartVariant as k, buildChartData as v, buildDataSeries as x } from "./utils.es.js";
+import { actionBlocksKey as D } from "../../../mappings/actionBlocksKey.es.js";
+import O from "react";
+import { observer as N } from "mobx-react-lite";
+import { jsx as o } from "react/jsx-runtime";
+import { useTheme as R } from "@mui/material/styles";
+var z = N(({ payload: m, beatGuid: i = "" }) => {
+  const l = R(), { openActionDrawer: c } = A(), { insights_feed: e } = B(), { isCopyLoaded: d } = y(), { instance_slot: h, instance_slot_data: a } = m, { data_series: p, ariaLabel: f = "", average_amount: n = 0, legends: s = [] } = a, t = v(x(p), f), [u] = O.useState(t.length - 1), { color: g } = k(h, a, l);
+  if (!d) return /* @__PURE__ */ o(S, {});
+  const b = [e.general.monthly_amount, e.general.trend], [C, _] = s.length ? s.map((r) => r.label) : b;
+  return t.length ? /* @__PURE__ */ o(I, {
     amounts: {
-      average: o,
-      formattedAverage: B(o, "0,0")
+      average: n,
+      formattedAverage: L(n, "0,0")
     },
-    color: u,
+    color: g,
     data: t,
-    monthlyAmountLabel: f,
-    onBarClick: (r) => s({
-      guid: m,
+    monthlyAmountLabel: C,
+    onBarClick: (r) => c({
+      guid: i,
       trigger: "chartBar",
       context: {
         chartBarIndex: r,
-        block: x.TRANSCATION_HISTORY_ACTION_BLOCK
+        block: D.TRANSCATION_HISTORY_ACTION_BLOCK
       }
     }),
-    selectedTabIndex: d,
-    trendAmountLabel: g
-  }) : /* @__PURE__ */ e(_, {});
-};
+    selectedTabIndex: u,
+    trendAmountLabel: _
+  }) : /* @__PURE__ */ o(T, {});
+});
 export {
-  j as BarchartBlock
+  z as BarchartBlock
 };
 
 //# sourceMappingURL=BarchartBlock.es.js.map

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarchartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { formatCurrency, useInsightsV2Store } from '../../../../common'\nimport type { DataSeries, DrilldownPayload } from '../../../../core'\nimport type { BarChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport { BarChartV2 } from '../../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../../components/chartblocks/EmptyBarChart'\n\nimport type { BlockProps } from '../../types'\n\nimport { barChartVariant, buildChartData, buildDataSeries } from './utils'\nimport { actionBlocksKey } from '../../../mappings/actionBlocksKey'\n\nexport const BarchartBlock = ({ payload, beatGuid = '' }: BlockProps<BarChartBlockData>) => {\n  const theme = useTheme()\n  const { openActionDrawer } = useInsightsV2Store()\n  const { instance_slot, instance_slot_data } = payload\n  const { data_series, ariaLabel = '', average_amount = 0, legends = [] } = instance_slot_data\n  const chartData = buildChartData(buildDataSeries(data_series as DataSeries), ariaLabel)\n  const [selectedTabIndex] = React.useState(chartData.length - 1)\n  const { color } = barChartVariant(instance_slot, instance_slot_data, theme)\n\n  const [monthlyAmountLabel, trendAmountLabel] = legends.map((legend) => legend.label)\n\n  return chartData.length ? (\n    <BarChartV2\n      amounts={{\n        average: average_amount,\n        formattedAverage: formatCurrency(average_amount, '0,0'),\n      }}\n      color={color}\n      data={chartData}\n      monthlyAmountLabel={monthlyAmountLabel}\n      onBarClick={(index) =>\n        openActionDrawer({\n          guid: beatGuid,\n          trigger: 'chartBar',\n          context: {\n            chartBarIndex: index,\n            block: actionBlocksKey.TRANSCATION_HISTORY_ACTION_BLOCK,\n          } satisfies DrilldownPayload,\n        })\n      }\n      selectedTabIndex={selectedTabIndex}\n      trendAmountLabel={trendAmountLabel}\n    />\n  ) : (\n    <EmptyBarChart />\n  )\n}\n"],"mappings":";;;;;;;;;AAeA,IAAa,IAAA,CAAiB,EAAE,SAAA,GAAS,UAAA,IAAW,GAAA,MAAwC;AAC1F,QAAM,IAAQ,EAAS,GACjB,EAAE,kBAAA,EAAA,IAAqB,EAAmB,GAC1C,EAAE,eAAA,GAAe,oBAAA,EAAA,IAAuB,GACxC,EAAE,aAAA,GAAa,WAAA,IAAY,IAAI,gBAAA,IAAiB,GAAG,SAAA,IAAU,CAAC,EAAA,IAAM,GACpE,IAAY,EAAe,EAAgB,CAAyB,GAAG,CAAS,GAChF,CAAC,CAAA,IAAoB,EAAM,SAAS,EAAU,SAAS,CAAC,GACxD,EAAE,OAAA,EAAA,IAAU,EAAgB,GAAe,GAAoB,CAAK,GAEpE,CAAC,GAAoB,CAAA,IAAoB,EAAQ,IAAA,CAAK,MAAW,EAAO,KAAK;AAEnF,SAAO,EAAU,SACf,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS;AAAA,MACP,SAAS;AAAA,MACT,kBAAkB,EAAe,GAAgB,KAAK;AAAA,IACxD;AAAA,IACO,OAAA;AAAA,IACP,MAAM;AAAA,IACc,oBAAA;AAAA,IACpB,YAAA,CAAa,MACX,EAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,QACP,eAAe;AAAA,QACf,OAAO,EAAgB;AAAA,MACzB;AAAA,IACF,CAAC;AAAA,IAEe,kBAAA;AAAA,IACA,kBAAA;AAAA,EACnB,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA;AAEpB"}
+{"version":3,"file":"BarchartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  formatCurrency,\n  Loader,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useInsightsV2Store,\n} from '../../../../common'\nimport type { DataSeries, DrilldownPayload } from '../../../../core'\nimport type { BarChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport { BarChartV2 } from '../../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../../components/chartblocks/EmptyBarChart'\n\nimport type { BlockProps } from '../../types'\n\nimport { barChartVariant, buildChartData, buildDataSeries } from './utils'\nimport { actionBlocksKey } from '../../../mappings/actionBlocksKey'\n\nexport const BarchartBlock = observer(\n  ({ payload, beatGuid = '' }: BlockProps<BarChartBlockData>) => {\n    const theme = useTheme()\n    const { openActionDrawer } = useInsightsV2Store()\n    const { insights_feed: insightsFeedCopy } = useGlobalCopyStore()\n    const { isCopyLoaded } = useGlobalUiStore()\n    const { instance_slot, instance_slot_data } = payload\n    const { data_series, ariaLabel = '', average_amount = 0, legends = [] } = instance_slot_data\n    const chartData = buildChartData(buildDataSeries(data_series as DataSeries), ariaLabel)\n    const [selectedTabIndex] = React.useState(chartData.length - 1)\n    const { color } = barChartVariant(instance_slot, instance_slot_data, theme)\n\n    if (!isCopyLoaded) {\n      return <Loader />\n    }\n\n    // TODO: Temporary fallback while the backend doesn't always send `legends` on every beat/variant.\n    // Remove this once the backend guarantees `legends` on the payload.\n    const fallbackLabels = [insightsFeedCopy.general.monthly_amount, insightsFeedCopy.general.trend]\n\n    const [monthlyAmountLabel, trendAmountLabel] = legends.length\n      ? legends.map((legend) => legend.label)\n      : fallbackLabels\n\n    return chartData.length ? (\n      <BarChartV2\n        amounts={{\n          average: average_amount,\n          formattedAverage: formatCurrency(average_amount, '0,0'),\n        }}\n        color={color}\n        data={chartData}\n        monthlyAmountLabel={monthlyAmountLabel}\n        onBarClick={(index) =>\n          openActionDrawer({\n            guid: beatGuid,\n            trigger: 'chartBar',\n            context: {\n              chartBarIndex: index,\n              block: actionBlocksKey.TRANSCATION_HISTORY_ACTION_BLOCK,\n            } satisfies DrilldownPayload,\n          })\n        }\n        selectedTabIndex={selectedTabIndex}\n        trendAmountLabel={trendAmountLabel}\n      />\n    ) : (\n      <EmptyBarChart />\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,IAAgB,EAAA,CAC1B,EAAE,SAAA,GAAS,UAAA,IAAW,GAAA,MAAwC;AAC7D,QAAM,IAAQ,EAAS,GACjB,EAAE,kBAAA,EAAA,IAAqB,EAAmB,GAC1C,EAAE,eAAe,EAAA,IAAqB,EAAmB,GACzD,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,eAAA,GAAe,oBAAA,EAAA,IAAuB,GACxC,EAAE,aAAA,GAAa,WAAA,IAAY,IAAI,gBAAA,IAAiB,GAAG,SAAA,IAAU,CAAC,EAAA,IAAM,GACpE,IAAY,EAAe,EAAgB,CAAyB,GAAG,CAAS,GAChF,CAAC,CAAA,IAAoB,EAAM,SAAS,EAAU,SAAS,CAAC,GACxD,EAAE,OAAA,EAAA,IAAU,EAAgB,GAAe,GAAoB,CAAK;AAE1E,MAAI,CAAC,EACH,QAAO,gBAAA,EAAC,GAAD,CAAS,CAAA;AAKlB,QAAM,IAAiB,CAAC,EAAiB,QAAQ,gBAAgB,EAAiB,QAAQ,KAAK,GAEzF,CAAC,GAAoB,CAAA,IAAoB,EAAQ,SACnD,EAAQ,IAAA,CAAK,MAAW,EAAO,KAAK,IACpC;AAEJ,SAAO,EAAU,SACf,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS;AAAA,MACP,SAAS;AAAA,MACT,kBAAkB,EAAe,GAAgB,KAAK;AAAA,IACxD;AAAA,IACO,OAAA;AAAA,IACP,MAAM;AAAA,IACc,oBAAA;AAAA,IACpB,YAAA,CAAa,MACX,EAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,QACP,eAAe;AAAA,QACf,OAAO,EAAgB;AAAA,MACzB;AAAA,IACF,CAAC;AAAA,IAEe,kBAAA;AAAA,IACA,kBAAA;AAAA,EACnB,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA;AAEpB,CACF"}