@mx-cartographer/experiences 9.4.44 → 9.4.45

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [9.4.45] - 09-29-2026
+
+- **CHANGED** - insights-v2 `BillAmountNotStandard` design tweaks: `BarchartBlock` and `TransactionHistoryBlock`'s drill-down chart now use explicit margins for consistent spacing instead of relying on unset/default values (WEC-1853)
+- **ADDED** - `shouldShowEmbeddedCard` prop on `TransactionDetails` (default `true`), gating the embedded insight card (BillAmountNotStandard mini chart shown for a transaction's associated beat). Every PFM surface — Spending, Trends (category view + drawer), Budgets, Recurring Transactions, and the Accounts transaction tab — keeps showing the embedded card unchanged via the default; insights-v2's own `TransactionDetailsBlock` explicitly passes `false` so `BillAmountNotStandard`'s own drill-down drawer doesn't show a redundant embedded card of itself (WEC-1853)
+
 ## [9.4.44] - 09-25-2026
 
 - **FIXED** - Budgets zero-state buttons now wrap and grow to fit longer localized copy instead of cropping or overflowing the text (MEW-4167)

package/dist/insights-v2/actionBlocks/TransactionDetailsBlock/TransactionDetailsBlock.es.js

@@ -1,24 +1,25 @@
-import { useGlobalCopyStore as e } from "../../../common/context/hooks.es.js";
+import { useGlobalCopyStore as m } from "../../../common/context/hooks.es.js";
 import s from "../../../common/components/Loader.es.js";
 import c from "../../../transactions/components/shared/TransactionDetails.es.js";
-import { useTransactionDetailsBlock as p } from "./useTransactionDetailsBlock.es.js";
+import { useTransactionDetailsBlock as l } from "./useTransactionDetailsBlock.es.js";
 import { observer as f } from "mobx-react-lite";
-import l from "@mui/material/Stack";
-import { Text as u } from "@mxenabled/mxui";
+import p from "@mui/material/Stack";
+import { Text as d } from "@mxenabled/mxui";
 import { jsx as o } from "react/jsx-runtime";
-var v = f(function({ beat: t }) {
-  const { common: i } = e(), { bottomActions: n, isLoading: m, topActions: a, transaction: r } = p(t);
-  return m ? /* @__PURE__ */ o(s, {}) : r ? /* @__PURE__ */ o(c, {
-    bottomActions: n,
+var S = f(function({ beat: t }) {
+  const { common: i } = m(), { bottomActions: e, isLoading: n, topActions: a, transaction: r } = l(t);
+  return n ? /* @__PURE__ */ o(s, {}) : r ? /* @__PURE__ */ o(c, {
+    bottomActions: e,
+    shouldShowEmbeddedCard: !1,
     topActions: a,
     transaction: r
-  }) : /* @__PURE__ */ o(l, {
+  }) : /* @__PURE__ */ o(p, {
     sx: { p: 24 },
-    children: /* @__PURE__ */ o(u, { children: i.error_message })
+    children: /* @__PURE__ */ o(d, { children: i.error_message })
   });
 });
 export {
-  v as TransactionDetailsBlock
+  S as TransactionDetailsBlock
 };
 
 //# sourceMappingURL=TransactionDetailsBlock.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionDetailsBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionDetailsBlock/TransactionDetailsBlock.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\nimport { observer } from 'mobx-react-lite'\n\nimport { Loader, useGlobalCopyStore } from '../../../common'\nimport TransactionDetails from '../../../transactions/components/shared/TransactionDetails'\nimport type { ActionBlockProps } from '../../mappings/blocks'\n\nimport { useTransactionDetailsBlock } from './useTransactionDetailsBlock'\n\n/**\n * Single-transaction drawer content. The detail rendering and inline editing (category picker, date,\n * memo, tags, split/hide/merchant-budget) all live in the shared `TransactionDetails` component from\n * the transactions module — this block's job is only to resolve *which* transaction and *which*\n * actions, then hand off.\n *\n * `observer` is required: the resolved transaction comes from TransactionStore, and `usePrepare` may\n * still be loading it when this first renders. Without it the drawer would stay on the loader.\n */\nexport const TransactionDetailsBlock = observer(function TransactionDetailsBlock({\n  beat,\n}: ActionBlockProps) {\n  const { common: commonCopy } = useGlobalCopyStore()\n  const { bottomActions, isLoading, topActions, transaction } = useTransactionDetailsBlock(beat)\n\n  if (isLoading) return <Loader />\n\n  // Loading finished and the guid still resolves to nothing — a stale beat pointing at a deleted or\n  // out-of-window transaction. Mirrors ActionBlockLayer's unknown-block branch rather than rendering\n  // an empty drawer.\n  if (!transaction) {\n    return (\n      <Stack sx={{ p: 24 }}>\n        <Text>{commonCopy.error_message}</Text>\n      </Stack>\n    )\n  }\n\n  return (\n    <TransactionDetails\n      bottomActions={bottomActions}\n      topActions={topActions}\n      transaction={transaction}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AAoBA,IAAa,IAA0B,EAAS,SAAiC,EAC/E,MAAA,EAAA,GACmB;AACnB,QAAM,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,eAAA,GAAe,WAAA,GAAW,YAAA,GAAY,aAAA,EAAA,IAAgB,EAA2B,CAAI;AAE7F,SAAI,IAAkB,gBAAA,EAAC,GAAD,CAAS,CAAA,IAK1B,IASH,gBAAA,EAAC,GAAD;AAAA,IACiB,eAAA;AAAA,IACH,YAAA;AAAA,IACC,aAAA;AAAA,EACd,CAAA,IAXC,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,GAAG,GAAG;AAAA,IACjB,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAO,EAAW,cAAoB,CAAA;AAAA,EACjC,CAAA;AAWb,CAAC"}
+{"version":3,"file":"TransactionDetailsBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionDetailsBlock/TransactionDetailsBlock.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\nimport { observer } from 'mobx-react-lite'\n\nimport { Loader, useGlobalCopyStore } from '../../../common'\nimport TransactionDetails from '../../../transactions/components/shared/TransactionDetails'\nimport type { ActionBlockProps } from '../../mappings/blocks'\n\nimport { useTransactionDetailsBlock } from './useTransactionDetailsBlock'\n\n/**\n * Single-transaction drawer content. The detail rendering and inline editing (category picker, date,\n * memo, tags, split/hide/merchant-budget) all live in the shared `TransactionDetails` component from\n * the transactions module — this block's job is only to resolve *which* transaction and *which*\n * actions, then hand off.\n *\n * `observer` is required: the resolved transaction comes from TransactionStore, and `usePrepare` may\n * still be loading it when this first renders. Without it the drawer would stay on the loader.\n */\nexport const TransactionDetailsBlock = observer(function TransactionDetailsBlock({\n  beat,\n}: ActionBlockProps) {\n  const { common: commonCopy } = useGlobalCopyStore()\n  const { bottomActions, isLoading, topActions, transaction } = useTransactionDetailsBlock(beat)\n\n  if (isLoading) return <Loader />\n\n  // Loading finished and the guid still resolves to nothing — a stale beat pointing at a deleted or\n  // out-of-window transaction. Mirrors ActionBlockLayer's unknown-block branch rather than rendering\n  // an empty drawer.\n  if (!transaction) {\n    return (\n      <Stack sx={{ p: 24 }}>\n        <Text>{commonCopy.error_message}</Text>\n      </Stack>\n    )\n  }\n\n  return (\n    <TransactionDetails\n      bottomActions={bottomActions}\n      // Embedded insight card is a PFM-only concern (TransactionDetails defaults to true); this beat's own drawer must not show a redundant embedded card of itself.\n      shouldShowEmbeddedCard={false}\n      topActions={topActions}\n      transaction={transaction}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AAoBA,IAAa,IAA0B,EAAS,SAAiC,EAC/E,MAAA,EAAA,GACmB;AACnB,QAAM,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,eAAA,GAAe,WAAA,GAAW,YAAA,GAAY,aAAA,EAAA,IAAgB,EAA2B,CAAI;AAE7F,SAAI,IAAkB,gBAAA,EAAC,GAAD,CAAS,CAAA,IAK1B,IASH,gBAAA,EAAC,GAAD;AAAA,IACiB,eAAA;AAAA,IAEf,wBAAwB;AAAA,IACZ,YAAA;AAAA,IACC,aAAA;AAAA,EACd,CAAA,IAbC,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,GAAG,GAAG;AAAA,IACjB,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAO,EAAW,cAAoB,CAAA;AAAA,EACjC,CAAA;AAab,CAAC"}

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

@@ -13,35 +13,35 @@ import { observer as mt } from "mobx-react-lite";
 import { Fragment as gt, jsx as o, jsxs as pt } from "react/jsx-runtime";
 import { useTheme as ut } from "@mui/material/styles";
 var It = mt(({ beat: a }) => {
-  const b = ut(), { instanceSlotData: e, beatTransactions: s, spendCategoryGuids: h, allAccountGuids: f, categoryName: v, displayedDateRange: m, transactionStore: x } = nt(a), { actionDrawer: y, setActionContext: C } = X(), { common: B, insights_feed: l } = Q(), { isCopyLoaded: F } = W(), [I, T] = u(!1), [G, A] = u(!1), { insights_payload: n } = a, j = y.trigger === "secondaryCta" ? n?.secondary_cta?.variant : n?.primary_cta?.variant, { top: g, filterMode: c, header: k, colors: w, filterStrategy: H, tipSection: S } = it(j ?? ""), { dataSeries: d, chartData: r, comparisonBars: E } = st({
+  const h = ut(), { instanceSlotData: e, beatTransactions: s, spendCategoryGuids: b, allAccountGuids: f, categoryName: L, displayedDateRange: m, transactionStore: x } = nt(a), { actionDrawer: y, setActionContext: C } = X(), { common: B, insights_feed: l } = Q(), { isCopyLoaded: F } = W(), [I, T] = u(!1), [G, A] = u(!1), { insights_payload: n } = a, j = y.trigger === "secondaryCta" ? n?.secondary_cta?.variant : n?.primary_cta?.variant, { top: g, filterMode: c, header: k, colors: w, filterStrategy: H, tipSection: S } = it(j ?? ""), { dataSeries: d, chartData: r, comparisonBars: O } = st({
     data: e?.data_series,
     ariaLabel: e?.ariaLabel ?? "",
     top: g,
     beatTransactions: s,
     payload: e
-  }), { chartBarIndex: K, subTabIndex: O } = rt({
+  }), { chartBarIndex: E, subTabIndex: K } = rt({
     chartTabCount: r.length,
-    comparisonTabCount: E.length,
+    comparisonTabCount: O.length,
     actionDrawer: y,
     beatGuid: a.guid
-  }), [i, _] = u(K), D = (t) => H({
+  }), [i, _] = u(E), D = (t) => H({
     beat: a,
     beatTransactions: s,
     dataSeries: d,
     selectedIndex: t,
-    subIndex: O,
+    subIndex: K,
     isLastTab: t === d.length - 1,
     instanceSlotData: e,
-    spendCategoryGuids: h,
+    spendCategoryGuids: b,
     displayedDateRange: m
-  }), V = s.map((t) => t.guid).join(","), R = h.join(","), M = f.join(","), L = () => {
+  }), V = s.map((t) => t.guid).join(","), R = b.join(","), M = f.join(","), v = () => {
     c !== "store" || !d.length || x.setFilter(lt(D(i), {
       allAccountGuids: f,
       displayedDateRange: m
     }));
   };
   dt(() => {
-    L();
+    v();
   }, [
     a.guid,
     i,
@@ -56,21 +56,22 @@ var It = mt(({ beat: a }) => {
   const p = k?.({
     title: n?.title,
     subHeader: n?.sub_title,
-    categoryName: v,
+    categoryName: L,
     selectedDate: r[i]?.date ?? void 0
-  }), N = w(b, e?.category_guid);
+  }), N = w(h, e?.category_guid);
   if (!F) return /* @__PURE__ */ o(tt, {});
   const P = [l.general.monthly_amount, l.general.trend], [U, $] = e?.legends?.length ? e.legends.map((t) => t.label) : P, q = c === "local" ? (t) => D(t).custom ?? (() => !0) : void 0, z = c === "local" ? s : void 0, J = g === "singleBar" || g === "upcomingBill" ? r.length ? /* @__PURE__ */ o(et, {
     amounts: {
       average: e?.average_amount,
       formattedAverage: Z(e?.average_amount ?? 0, "0,0.00")
     },
-    color: N[0] ?? b.palette.primary.main,
+    color: N[0] ?? h.palette.primary.main,
     data: r,
     legendPosition: "top",
+    heightOverride: 142,
     margin: {
-      bottom: 30,
-      top: 20,
+      bottom: 8,
+      top: 24,
       left: 24,
       right: 24
     },
@@ -101,7 +102,7 @@ var It = mt(({ beat: a }) => {
     ariaLabelClose: B.close_aria,
     isOpen: I,
     onClose: () => {
-      T(!1), C({ transaction_guid: void 0 }), L();
+      T(!1), C({ transaction_guid: void 0 }), v();
     },
     title: l.general.transaction_details_title,
     children: /* @__PURE__ */ o(ct, { beat: a })

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 {\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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"}
+{"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      heightOverride={142}\n      margin={{\n        bottom: 8,\n        top: 24,\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/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js

@@ -10,8 +10,8 @@ import { observer as R } from "mobx-react-lite";
 import { jsx as e } from "react/jsx-runtime";
 import { useTheme as V } from "@mui/material/styles";
 var J = R(({ payload: m, beatGuid: i = "" }) => {
-  const l = V(), { openActionDrawer: c } = L(), { insights_feed: o } = B(), { isCopyLoaded: d } = A(), { instance_slot: f, instance_slot_data: a, widget_type: p } = m, { data_series: h, ariaLabel: u = "", average_amount: n = 0, legends: s = [] } = a, t = x(D(h), u), [g] = N.useState(t.length - 1), { color: b } = v(f, a, l);
-  if (!d) return /* @__PURE__ */ e(I, {});
+  const l = V(), { openActionDrawer: c } = L(), { insights_feed: o } = B(), { isCopyLoaded: f } = A(), { instance_slot: p, instance_slot_data: a, widget_type: d } = m, { data_series: h, ariaLabel: g = "", average_amount: n = 0, legends: s = [] } = a, t = x(D(h), g), [u] = N.useState(t.length - 1), { color: b } = v(p, a, l);
+  if (!f) return /* @__PURE__ */ e(I, {});
   const C = [o.general.monthly_amount, o.general.trend], [_, y] = s.length ? s.map((r) => r.label) : C;
   return t.length ? /* @__PURE__ */ e(T, {
     amounts: {
@@ -21,8 +21,14 @@ var J = R(({ payload: m, beatGuid: i = "" }) => {
     color: b,
     data: t,
     monthlyAmountLabel: _,
+    margin: {
+      bottom: 8,
+      left: 16,
+      right: 16,
+      top: 16
+    },
     onBarClick: (r) => {
-      if (p !== "full") return !1;
+      if (d !== "full") return !1;
       c({
         guid: i,
         trigger: "chartBar",
@@ -32,7 +38,7 @@ var J = R(({ payload: m, beatGuid: i = "" }) => {
         }
       });
     },
-    selectedTabIndex: g,
+    selectedTabIndex: u,
     trendAmountLabel: y
   }) : /* @__PURE__ */ e(k, {});
 });

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'\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, widget_type } = 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          if (widget_type !== 'full') return false\n\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,GAAoB,aAAA,EAAA,IAAgB,GACrD,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,MAAU;AACrB,UAAI,MAAgB,OAAQ,QAAO;AAEnC,MAAA,EAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,eAAe;AAAA,UACf,OAAO,EAAgB;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACkB,kBAAA;AAAA,IACA,kBAAA;AAAA,EACnB,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA;AAEpB,CACF"}
+{"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, widget_type } = 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        margin={{\n          bottom: 8,\n          left: 16,\n          right: 16,\n          top: 16,\n        }}\n        onBarClick={(index) => {\n          if (widget_type !== 'full') return false\n\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,GAAoB,aAAA,EAAA,IAAgB,GACrD,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,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,IACP;AAAA,IACA,YAAA,CAAa,MAAU;AACrB,UAAI,MAAgB,OAAQ,QAAO;AAEnC,MAAA,EAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,eAAe;AAAA,UACf,OAAO,EAAgB;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACkB,kBAAA;AAAA,IACA,kBAAA;AAAA,EACnB,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA;AAEpB,CACF"}

package/dist/transactions/components/shared/TransactionDetails.d.ts

@@ -6,6 +6,7 @@ export interface TransactionDetailsProps {
     canFlagTransaction?: boolean;
     topActions?: TopActions[];
     transaction: Transaction;
+    shouldShowEmbeddedCard?: boolean;
 }
 declare const _default: React.FunctionComponent<TransactionDetailsProps>;
 export default _default;

package/dist/transactions/components/shared/TransactionDetails.es.js

@@ -1,50 +1,50 @@
 import { buildDynamicCopy as G } from "../../../core/utils/Localization.es.js";
-import { DATE_FORMATS_INTL as oe, formatDate as ie } from "../../../core/constants/DateFormats.es.js";
-import { useCategoryStore as ae, useEvent as ne, useGlobalCopyStore as de, useGlobalUiStore as se, useTransactionStore as le, useUserStore as me } from "../../../common/context/hooks.es.js";
-import { ANALYTICS_EVENTS as ce } from "../../../common/constants/Analytics.es.js";
-import { TransactionType as ue } from "../../../core/types/Transaction.es.js";
-import { isFeatureEnabled as pe } from "../../../core/utils/UserUtils.es.js";
+import { DATE_FORMATS_INTL as ie, formatDate as ae } from "../../../core/constants/DateFormats.es.js";
+import { useCategoryStore as ne, useEvent as de, useGlobalCopyStore as se, useGlobalUiStore as le, useTransactionStore as me, useUserStore as ce } from "../../../common/context/hooks.es.js";
+import { ANALYTICS_EVENTS as ue } from "../../../common/constants/Analytics.es.js";
+import { TransactionType as pe } from "../../../core/types/Transaction.es.js";
+import { isFeatureEnabled as ge } from "../../../core/utils/UserUtils.es.js";
 import { formatCurrency as P } from "../../../core/utils/NumberFormatting.es.js";
-import { fromUnixUTC as ge } from "../../../core/utils/DateUtil.es.js";
-import { isTransferTransaction as fe } from "../../../core/utils/TransactionUtils.es.js";
-import he from "../../../common/components/Loader.es.js";
-import { BottomActions as m, DEFAULT_BOTTOM_ACTIONS as _e, DEFAULT_TOP_ACTIONS as Te, TopActions as f } from "../../constants/Actions.es.js";
-import Se from "../../../insights/components/shared/ChartTransactionWithDrillDown.es.js";
-import { EmbeddedCard as ye } from "../../../insights/components/shared/InsightsCard/EmbeddedCard.es.js";
-import { AddMerchantBudgetAction as be } from "./transactiondetails/actions/AddMerchantBudgetAction.es.js";
-import De from "./transactiondetails/actions/CategoryAction.es.js";
-import Ae from "./transactiondetails/actions/DateAction.es.js";
-import Ce from "./transactiondetails/actions/DeleteAction.es.js";
-import ve from "./transactiondetails/actions/DeleteLogoAction.es.js";
-import xe from "./transactiondetails/actions/ExcludeAction.es.js";
-import we from "./transactiondetails/actions/MemoAction.es.js";
-import Ie from "./transactiondetails/actions/SplitAction.es.js";
-import Le from "./transactiondetails/actions/TagsAction.es.js";
-import Ee from "./transactiondetails/Description.es.js";
-import Me from "./transactiondetails/FlagTransaction.es.js";
-import Be from "./transactiondetails/TransactionDetailsView.es.js";
-import { getEmbeddedInstanceSlotByBeatTemplates as Oe } from "./getEmbeddedInstanceSlotByBeatTemplates.es.js";
+import { fromUnixUTC as fe } from "../../../core/utils/DateUtil.es.js";
+import { isTransferTransaction as he } from "../../../core/utils/TransactionUtils.es.js";
+import _e from "../../../common/components/Loader.es.js";
+import { BottomActions as m, DEFAULT_BOTTOM_ACTIONS as Te, DEFAULT_TOP_ACTIONS as Se, TopActions as f } from "../../constants/Actions.es.js";
+import ye from "../../../insights/components/shared/ChartTransactionWithDrillDown.es.js";
+import { EmbeddedCard as be } from "../../../insights/components/shared/InsightsCard/EmbeddedCard.es.js";
+import { AddMerchantBudgetAction as De } from "./transactiondetails/actions/AddMerchantBudgetAction.es.js";
+import Ae from "./transactiondetails/actions/CategoryAction.es.js";
+import Ce from "./transactiondetails/actions/DateAction.es.js";
+import ve from "./transactiondetails/actions/DeleteAction.es.js";
+import xe from "./transactiondetails/actions/DeleteLogoAction.es.js";
+import we from "./transactiondetails/actions/ExcludeAction.es.js";
+import Ie from "./transactiondetails/actions/MemoAction.es.js";
+import Le from "./transactiondetails/actions/SplitAction.es.js";
+import Ee from "./transactiondetails/actions/TagsAction.es.js";
+import Me from "./transactiondetails/Description.es.js";
+import Be from "./transactiondetails/FlagTransaction.es.js";
+import Oe from "./transactiondetails/TransactionDetailsView.es.js";
+import { getEmbeddedInstanceSlotByBeatTemplates as Ne } from "./getEmbeddedInstanceSlotByBeatTemplates.es.js";
 import a, { useMemo as U } from "react";
-import { observer as Ne } from "mobx-react-lite";
+import { observer as Fe } from "mobx-react-lite";
 import h from "@mui/material/Stack";
-import { MerchantLogo as V, P as Fe, Text as b } from "@mxenabled/mxui";
-import { endOfMonth as Ge } from "date-fns/endOfMonth";
-import { isBefore as Pe } from "date-fns/isBefore";
+import { MerchantLogo as V, P as Ge, Text as b } from "@mxenabled/mxui";
+import { endOfMonth as Pe } from "date-fns/endOfMonth";
+import { isBefore as Ue } from "date-fns/isBefore";
 import { startOfMonth as k } from "date-fns/startOfMonth";
 import D from "@mui/material/Paper";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useTheme as Ue } from "@mui/material/styles";
-import Ve from "@mui/material/Box";
+import { useTheme as Ve } from "@mui/material/styles";
+import ke from "@mui/material/Box";
 import H from "@mui/material/Divider";
 import R from "@mui/material/List";
-import ke from "@mui/material/Alert";
-import He from "@mui/material/Snackbar";
-var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = Te, transaction: e }) => {
-  const { onEvent: j } = ne(), { isCopyLoaded: z } = se(), { userFeatures: q } = me(), { accounts: X, common: Y, insights_feed: d } = de(), { detailedCategories: C } = ae(), { alert: v, associatedBeats: x, detailedTransactions: w, cachedStartDate: I, loadEmbeddedInstanceTransactions: $, setAlert: L } = le(), [J, E] = a.useState(!1), [M, B] = a.useState(!1), [K, Q] = a.useState(!1), Z = Ue(), ee = e?.number && e.number.length > 4, O = e?.transaction_type === ue.CREDIT, N = fe(e) && !!e.institutionName, s = a.useMemo(() => x.find((r) => r.associated_transaction_guid === e.guid), [x, e]), o = Oe(Y, s), [l, T] = a.useState(o ? o.dataSeries.length - 1 : 0);
-  a.useEffect(() => j(ce.TRANSACTION_DETAILS_VIEW, { transaction_guid: e.guid }), []), a.useEffect(() => {
+import He from "@mui/material/Alert";
+import Re from "@mui/material/Snackbar";
+var We = ({ bottomActions: _ = Te, canFlagTransaction: W = !0, topActions: A = Se, transaction: e, shouldShowEmbeddedCard: j = !0 }) => {
+  const { onEvent: z } = de(), { isCopyLoaded: q } = le(), { userFeatures: X } = ce(), { accounts: Y, common: $, insights_feed: d } = se(), { detailedCategories: C } = ne(), { alert: v, associatedBeats: x, detailedTransactions: w, cachedStartDate: I, loadEmbeddedInstanceTransactions: J, setAlert: L } = me(), [K, E] = a.useState(!1), [M, B] = a.useState(!1), [Q, Z] = a.useState(!1), ee = Ve(), te = e?.number && e.number.length > 4, O = e?.transaction_type === pe.CREDIT, N = he(e) && !!e.institutionName, s = a.useMemo(() => x.find((r) => r.associated_transaction_guid === e.guid), [x, e]), o = j ? Ne($, s) : null, [l, T] = a.useState(o ? o.dataSeries.length - 1 : 0);
+  a.useEffect(() => z(ue.TRANSACTION_DETAILS_VIEW, { transaction_guid: e.guid }), []), a.useEffect(() => {
     if (!o || o.dataSeries.length === 0) return;
     const { date: r } = o.dataSeries[l], i = k(r);
-    Pe(i, I) && (B(!0), $(i).finally(() => {
+    Ue(i, I) && (B(!0), J(i).finally(() => {
       B(!1);
     }));
   }, [
@@ -63,11 +63,11 @@ var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = T
       };
     }
     return null;
-  }, [o, C]), te = U(() => {
+  }, [o, C]), re = U(() => {
     if (!o?.dataSeries?.length) return [];
-    const { guid: r, date: i } = o.dataSeries[l], u = k(i), p = Ge(i);
+    const { guid: r, date: i } = o.dataSeries[l], u = k(i), p = Pe(i);
     return w.filter((g) => {
-      const F = ge(g.date);
+      const F = fe(g.date);
       return F >= u && F <= p && g.guid === r;
     });
   }, [
@@ -76,9 +76,9 @@ var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = T
     w,
     M
   ]);
-  if (!z) return /* @__PURE__ */ t(he, {});
-  const c = pe(q, "MX_TXN_DETAILS_VIEW_ONLY"), re = Z.palette.mode === "dark" ? "grey.800" : "grey.100";
-  return /* @__PURE__ */ n(Ve, {
+  if (!q) return /* @__PURE__ */ t(_e, {});
+  const c = ge(X, "MX_TXN_DETAILS_VIEW_ONLY"), oe = ee.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ n(ke, {
     className: "mx-txn-transaction-details",
     width: "100%",
     children: [
@@ -96,7 +96,7 @@ var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = T
                 size: 64
               })
             }),
-            /* @__PURE__ */ t(Ee, {
+            /* @__PURE__ */ t(Me, {
               displayValue: N ? e.institutionName : void 0,
               transaction: e,
               viewOnly: c || N
@@ -105,13 +105,13 @@ var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = T
               direction: "row",
               justifyContent: "space-between",
               sx: { minHeight: 44 },
-              children: [/* @__PURE__ */ n(Fe, {
+              children: [/* @__PURE__ */ n(Ge, {
                 color: O ? "success.main" : "text.primary",
                 variant: "h1",
                 children: [O ? "+" : "", P(e.amount, "0,0.00")]
-              }), !c && W && /* @__PURE__ */ t(Me, { transaction: e })]
+              }), !c && W && /* @__PURE__ */ t(Be, { transaction: e })]
             }),
-            o?.instanceSlot && /* @__PURE__ */ t(ye, {
+            o?.instanceSlot && /* @__PURE__ */ t(be, {
               callToAction: o.callToAction,
               description: G(d.general.embedded_description, y.changetype, /* @__PURE__ */ t("strong", { children: y.percentageAmount })),
               instanceSlot: o.instanceSlot,
@@ -122,7 +122,7 @@ var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = T
             }),
             /* @__PURE__ */ n(h, {
               sx: {
-                bgcolor: re,
+                bgcolor: oe,
                 borderRadius: "4px",
                 gap: 4,
                 p: 8
@@ -130,7 +130,7 @@ var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = T
               children: [/* @__PURE__ */ t(b, {
                 bold: !0,
                 children: `${e.account}
-                ${ee ? e.number : "•".repeat(4).concat(e.number ?? "")}`
+                ${te ? e.number : "•".repeat(4).concat(e.number ?? "")}`
               }), /* @__PURE__ */ t(b, {
                 bold: !0,
                 truncate: !0,
@@ -143,11 +143,11 @@ var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = T
         /* @__PURE__ */ t(D, {
           square: !0,
           sx: { boxShadow: "none" },
-          children: c ? /* @__PURE__ */ t(Be, { transaction: e }) : /* @__PURE__ */ t(R, { children: A.map((r, i) => /* @__PURE__ */ n(a.Fragment, { children: [
-            r === f.Category && /* @__PURE__ */ t(De, { transaction: e }),
-            r === f.Date && /* @__PURE__ */ t(Ae, { transaction: e }),
-            r === f.Memo && /* @__PURE__ */ t(we, { transaction: e }),
-            r === f.Tags && /* @__PURE__ */ t(Le, { transaction: e }),
+          children: c ? /* @__PURE__ */ t(Oe, { transaction: e }) : /* @__PURE__ */ t(R, { children: A.map((r, i) => /* @__PURE__ */ n(a.Fragment, { children: [
+            r === f.Category && /* @__PURE__ */ t(Ae, { transaction: e }),
+            r === f.Date && /* @__PURE__ */ t(Ce, { transaction: e }),
+            r === f.Memo && /* @__PURE__ */ t(Ie, { transaction: e }),
+            r === f.Tags && /* @__PURE__ */ t(Ee, { transaction: e }),
             /* @__PURE__ */ t(H, {
               component: "li",
               variant: i < A.length - 1 ? "inset" : "fullWidth"
@@ -160,24 +160,24 @@ var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = T
           ml: 26,
           mt: 16,
           variant: "body1",
-          children: X.actions
+          children: Y.actions
         }), /* @__PURE__ */ t(D, {
           square: !0,
           sx: { boxShadow: "none" },
           children: /* @__PURE__ */ n(R, { children: [S.map((r, i) => /* @__PURE__ */ n(a.Fragment, { children: [
-            r === m.MerchantBudget && /* @__PURE__ */ t(be, { transaction: e }),
-            r === m.SplitTransaction && /* @__PURE__ */ t(Ie, { transaction: e }),
-            r === m.HideTransaction && /* @__PURE__ */ t(xe, { transaction: e }),
-            r === m.MerchantLogo && /* @__PURE__ */ t(ve, { transaction: e }),
+            r === m.MerchantBudget && /* @__PURE__ */ t(De, { transaction: e }),
+            r === m.SplitTransaction && /* @__PURE__ */ t(Le, { transaction: e }),
+            r === m.HideTransaction && /* @__PURE__ */ t(we, { transaction: e }),
+            r === m.MerchantLogo && /* @__PURE__ */ t(xe, { transaction: e }),
             /* @__PURE__ */ t(H, {
               component: "li",
               variant: i < S.length - 1 ? "inset" : "fullWidth"
             })
-          ] }, r)), e.is_manual && !e.parent_guid && !e.has_been_split && /* @__PURE__ */ t(Ce, { transaction: e })] })
+          ] }, r)), e.is_manual && !e.parent_guid && !e.has_been_split && /* @__PURE__ */ t(ve, { transaction: e })] })
         })] })
       ] }),
-      s && o && /* @__PURE__ */ t(Se, {
-        ariaLabel: ie(o?.dataSeries[l]?.date, oe.MONTH),
+      s && o && /* @__PURE__ */ t(ye, {
+        ariaLabel: ae(o?.dataSeries[l]?.date, ie.MONTH),
         barChartProps: {
           amounts: {
             average: s.payload.average_amount,
@@ -214,25 +214,25 @@ var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = T
           merchantGuid: e.merchant_guid ?? "",
           size: 16
         }),
-        isOpen: J,
+        isOpen: K,
         onClose: () => {
           E(!1), T(o.dataSeries.length - 1);
         },
         onTabChange: (r) => {
           T(r);
         },
-        tipSection: K ? void 0 : {
+        tipSection: Q ? void 0 : {
           message: G(d.general.tip_section_message, /* @__PURE__ */ t("strong", { children: d.general.tip_section_title }), /* @__PURE__ */ t("strong", { children: s.primary_transaction?.description })),
-          onDismiss: () => Q(!0)
+          onDismiss: () => Z(!0)
         },
         title: d.general.transaction_history_title,
         transactionListProps: {
           showLoader: M,
           showInsights: !0,
-          transaction: te
+          transaction: re
         }
       }),
-      /* @__PURE__ */ t(He, {
+      /* @__PURE__ */ t(Re, {
         anchorOrigin: {
           vertical: "bottom",
           horizontal: "right"
@@ -240,7 +240,7 @@ var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = T
         autoHideDuration: 3500,
         onClose: () => L(""),
         open: !!v,
-        children: /* @__PURE__ */ t(ke, {
+        children: /* @__PURE__ */ t(He, {
           closeText: "",
           onClose: () => L(""),
           severity: "success",
@@ -250,9 +250,9 @@ var Re = ({ bottomActions: _ = _e, canFlagTransaction: W = !0, topActions: A = T
       })
     ]
   });
-}, Et = Ne(Re);
+}, Mt = Fe(We);
 export {
-  Et as default
+  Mt as default
 };
 
 //# sourceMappingURL=TransactionDetails.es.js.map

package/dist/transactions/components/shared/TransactionDetails.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionDetails.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionDetails.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Paper from '@mui/material/Paper'\nimport Snackbar from '@mui/material/Snackbar'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\n\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport {\n  ANALYTICS_EVENTS,\n  Loader,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n  useUserStore,\n} from '../../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Transaction, TransactionType } from '../../../core'\nimport { fromUnixUTC } from '../../../core/utils/DateUtil'\nimport { isTransferTransaction } from '../../../core/utils/TransactionUtils'\nimport { isFeatureEnabled } from '../../../core/utils/UserUtils'\nimport { ChartTransactionWithDrillDown, EmbeddedCard } from '../../../insights'\n\nimport {\n  BottomActions,\n  DEFAULT_BOTTOM_ACTIONS,\n  DEFAULT_TOP_ACTIONS,\n  TopActions,\n} from '../../constants/Actions'\n\nimport {\n  AddMerchantBudgetAction,\n  CategoryAction,\n  DateAction,\n  DeleteAction,\n  DeleteLogoAction,\n  ExcludeAction,\n  MemoAction,\n  SplitAction,\n  TagsAction,\n} from './transactiondetails/actions'\nimport Description from './transactiondetails/Description'\nimport FlagTransaction from './transactiondetails/FlagTransaction'\nimport TransactionDetailsView from './transactiondetails/TransactionDetailsView'\nimport { getEmbeddedInstanceSlotByBeatTemplates } from './getEmbeddedInstanceSlotByBeatTemplates'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\nexport interface TransactionDetailsProps {\n  bottomActions?: BottomActions[]\n  canFlagTransaction?: boolean\n  topActions?: TopActions[]\n  transaction: Transaction\n}\n\nconst TransactionDetails: React.FC<TransactionDetailsProps> = ({\n  bottomActions = DEFAULT_BOTTOM_ACTIONS,\n  canFlagTransaction = true,\n  topActions = DEFAULT_TOP_ACTIONS,\n  transaction,\n}) => {\n  const { onEvent } = useEvent()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { userFeatures } = useUserStore()\n  const { accounts: copy, common: commonCopy, insights_feed: insightsCopy } = useGlobalCopyStore()\n\n  const { detailedCategories } = useCategoryStore()\n  const {\n    alert,\n    associatedBeats,\n    detailedTransactions,\n    cachedStartDate,\n    loadEmbeddedInstanceTransactions,\n    setAlert,\n  } = useTransactionStore()\n\n  const [showTranscationDrilldownDrawer, setShowTransactionDrillDownDrawer] = React.useState(false)\n\n  const [isLoading, setIsLoading] = React.useState(false)\n  const [closeTipSection, setCloseTipSection] = React.useState(false)\n  const theme = useTheme()\n\n  const showFullNumber = transaction?.number && transaction.number.length > 4\n\n  const isCredit = transaction?.transaction_type === TransactionType.CREDIT\n\n  const showInstitution = isTransferTransaction(transaction) && Boolean(transaction.institutionName)\n\n  const beat = React.useMemo(() => {\n    return associatedBeats.find((beat) => beat.associated_transaction_guid === transaction.guid)\n  }, [associatedBeats, transaction])\n\n  const embeddedData = getEmbeddedInstanceSlotByBeatTemplates(commonCopy, beat)\n\n  const [selectedTabIndex, setSelectedTabIndex] = React.useState(\n    embeddedData ? embeddedData.dataSeries.length - 1 : 0,\n  )\n\n  React.useEffect(\n    () =>\n      onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_VIEW, { transaction_guid: transaction.guid }),\n    [],\n  )\n\n  React.useEffect(() => {\n    if (!embeddedData || embeddedData.dataSeries.length === 0) return\n\n    const { date: selectedSeriesItemDate } = embeddedData.dataSeries[selectedTabIndex]\n\n    const start = startOfMonth(selectedSeriesItemDate)\n\n    if (isBefore(start, cachedStartDate)) {\n      setIsLoading(true)\n      loadEmbeddedInstanceTransactions(start).finally(() => {\n        setIsLoading(false)\n      })\n    }\n  }, [selectedTabIndex, embeddedData, cachedStartDate])\n\n  //if merchant_guid is null then no need to show the MerchantBudget action.\n  const updatedBottomActions =\n    bottomActions.includes(BottomActions.MerchantBudget) && !transaction?.merchant_guid\n      ? bottomActions.filter((action) => action !== BottomActions.MerchantBudget)\n      : bottomActions\n\n  const embeddedCardDataCategory = useMemo(() => {\n    if (embeddedData) {\n      const category = detailedCategories.find(\n        (cat) => cat.guid === transaction.top_level_category_guid,\n      )\n      const mean = beat?.payload?.average_amount ?? 0\n      const currentAmount = transaction.amount\n\n      let changetype = insightsCopy.general.increased_text\n      if (currentAmount - mean < 0) {\n        changetype = insightsCopy.general.decreased_text\n      }\n      const percentageAmount =\n        mean === 0 ? 0 : Math.round((Math.abs(currentAmount - mean) / mean) * 100)\n\n      return { category, percentageAmount, changetype }\n    }\n    return null\n  }, [embeddedData, detailedCategories])\n\n  const filteredTransactions = useMemo(() => {\n    if (!embeddedData?.dataSeries?.length) {\n      return []\n    }\n\n    const { guid: selectedSeriesItemGuid, date: selectedSeriesItemDate } =\n      embeddedData.dataSeries[selectedTabIndex]\n\n    const start = startOfMonth(selectedSeriesItemDate)\n    const end = endOfMonth(selectedSeriesItemDate)\n\n    return detailedTransactions.filter((t) => {\n      const transactionDate = fromUnixUTC(t.date)\n      return transactionDate >= start && transactionDate <= end && t.guid === selectedSeriesItemGuid\n    })\n  }, [selectedTabIndex, embeddedData, detailedTransactions, isLoading])\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  const shouldShowViewOnlyMode = isFeatureEnabled(userFeatures, 'MX_TXN_DETAILS_VIEW_ONLY')\n\n  const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n  return (\n    <Box className=\"mx-txn-transaction-details\" width=\"100%\">\n      {transaction && (\n        <Stack>\n          <Stack gap={12} p={24}>\n            <Paper elevation={2} sx={{ width: 64 }}>\n              <MerchantLogo\n                categoryGuid={transaction.top_level_category_guid || ''}\n                merchantGuid={transaction.merchant_guid || ''}\n                size={64}\n              />\n            </Paper>\n\n            <Description\n              displayValue={showInstitution ? transaction.institutionName : undefined}\n              transaction={transaction}\n              viewOnly={shouldShowViewOnlyMode || showInstitution}\n            />\n\n            <Stack direction=\"row\" justifyContent=\"space-between\" sx={{ minHeight: 44 }}>\n              <P color={isCredit ? 'success.main' : 'text.primary'} variant=\"h1\">\n                {isCredit ? '+' : ''}\n                {formatCurrency(transaction.amount, '0,0.00')}\n              </P>\n              {!shouldShowViewOnlyMode && canFlagTransaction && (\n                <FlagTransaction transaction={transaction} />\n              )}\n            </Stack>\n\n            {embeddedData?.instanceSlot && (\n              <EmbeddedCard\n                callToAction={embeddedData.callToAction}\n                description={\n                  buildDynamicCopy(\n                    insightsCopy.general.embedded_description,\n                    embeddedCardDataCategory!.changetype,\n                    <strong>{embeddedCardDataCategory!.percentageAmount}</strong>,\n                  ) as string\n                }\n                instanceSlot={embeddedData.instanceSlot}\n                onCtaClick={() => {\n                  setShowTransactionDrillDownDrawer(true)\n                }}\n                title={beat!.html_micro_title!}\n              />\n            )}\n            <Stack sx={{ bgcolor: bgColor, borderRadius: '4px', gap: 4, p: 8 }}>\n              <Text bold={true}>\n                {`${transaction.account}\n                ${\n                  showFullNumber\n                    ? transaction.number\n                    : '\\u2022'.repeat(4).concat(transaction.number ?? '')\n                }`}\n              </Text>\n              <Text bold={true} truncate={true} variant=\"tiny\">\n                {transaction.feed_description}\n              </Text>\n            </Stack>\n          </Stack>\n\n          <Paper square={true} sx={{ boxShadow: 'none' }}>\n            {shouldShowViewOnlyMode ? (\n              <TransactionDetailsView transaction={transaction} />\n            ) : (\n              <List>\n                {topActions.map((action, index) => (\n                  <React.Fragment key={action}>\n                    {action === TopActions.Category && <CategoryAction transaction={transaction} />}\n                    {action === TopActions.Date && <DateAction transaction={transaction} />}\n                    {action === TopActions.Memo && <MemoAction transaction={transaction} />}\n                    {action === TopActions.Tags && <TagsAction transaction={transaction} />}\n                    <Divider\n                      component=\"li\"\n                      variant={index < topActions.length - 1 ? 'inset' : 'fullWidth'}\n                    />\n                  </React.Fragment>\n                ))}\n              </List>\n            )}\n          </Paper>\n\n          {!shouldShowViewOnlyMode && updatedBottomActions.length > 0 && (\n            <React.Fragment>\n              <Text bold={true} mb={8} ml={26} mt={16} variant=\"body1\">\n                {copy.actions}\n              </Text>\n\n              <Paper square={true} sx={{ boxShadow: 'none' }}>\n                <List>\n                  {updatedBottomActions.map((action, index) => (\n                    <React.Fragment key={action}>\n                      {action === BottomActions.MerchantBudget && (\n                        <AddMerchantBudgetAction transaction={transaction} />\n                      )}\n                      {action === BottomActions.SplitTransaction && (\n                        <SplitAction transaction={transaction} />\n                      )}\n                      {action === BottomActions.HideTransaction && (\n                        <ExcludeAction transaction={transaction} />\n                      )}\n                      {action === BottomActions.MerchantLogo && (\n                        <DeleteLogoAction transaction={transaction} />\n                      )}\n                      <Divider\n                        component=\"li\"\n                        variant={index < updatedBottomActions.length - 1 ? 'inset' : 'fullWidth'}\n                      />\n                    </React.Fragment>\n                  ))}\n\n                  {/*\n                Show DeleteAction only if:\n                - The transaction is manual\n                - The transaction is NOT a parent transaction (no parent_guid)\n                - The transaction has NOT been split (has_been_split is false)\n                \n                This ensures delete is hidden for parent or split transactions.\n              */}\n                  {transaction.is_manual &&\n                    !transaction.parent_guid &&\n                    !transaction.has_been_split && <DeleteAction transaction={transaction} />}\n                </List>\n              </Paper>\n            </React.Fragment>\n          )}\n        </Stack>\n      )}\n      {beat && embeddedData && (\n        <ChartTransactionWithDrillDown\n          ariaLabel={formatDate(\n            embeddedData?.dataSeries[selectedTabIndex]?.date,\n            DATE_FORMATS_INTL.MONTH,\n          )}\n          barChartProps={{\n            amounts: {\n              average: beat.payload.average_amount,\n              formattedAverage: formatCurrency(beat.payload.average_amount, '0,0'),\n            },\n            color: embeddedCardDataCategory!.category?.color || '',\n            data: embeddedData.chartData,\n            margin: { bottom: 10, left: 24, right: 24, top: 20 },\n            monthlyAmountLabel: insightsCopy.general.monthly_amount,\n            onBarClick: (index) => {\n              setSelectedTabIndex(index)\n            },\n            trendAmountLabel: insightsCopy.general.trend,\n            legendPosition: 'top',\n          }}\n          beat={{\n            heading: beat.html_title,\n            subHeading: {\n              category_guid: transaction.category_guid ?? '',\n              merchant_guid: transaction.merchant_guid ?? '',\n              description: transaction.description ?? '',\n            },\n          }}\n          data={embeddedData.chartData}\n          defaultSelectedIndex={selectedTabIndex}\n          icon={\n            <MerchantLogo\n              alt={transaction.description ?? ''}\n              categoryGuid={transaction.category_guid ?? ''}\n              merchantGuid={transaction.merchant_guid ?? ''}\n              size={16}\n            />\n          }\n          isOpen={showTranscationDrilldownDrawer}\n          onClose={() => {\n            setShowTransactionDrillDownDrawer(false)\n            setSelectedTabIndex(embeddedData!.dataSeries.length - 1)\n          }}\n          onTabChange={(index: number) => {\n            setSelectedTabIndex(index)\n          }}\n          tipSection={\n            !closeTipSection\n              ? {\n                  message: buildDynamicCopy(\n                    insightsCopy.general.tip_section_message,\n                    <strong>{insightsCopy.general.tip_section_title}</strong>,\n                    <strong>{beat.primary_transaction?.description}</strong>,\n                  ) as string,\n                  onDismiss: () => setCloseTipSection(true),\n                }\n              : undefined\n          }\n          title={insightsCopy.general.transaction_history_title}\n          transactionListProps={{\n            showLoader: isLoading,\n            showInsights: true,\n            transaction: filteredTransactions,\n          }}\n        />\n      )}\n      <Snackbar\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        autoHideDuration={3500}\n        onClose={() => setAlert('')}\n        open={Boolean(alert)}\n      >\n        <Alert closeText=\"\" onClose={() => setAlert('')} severity=\"success\" variant=\"filled\">\n          {alert}\n        </Alert>\n      </Snackbar>\n    </Box>\n  )\n}\n\nexport default observer(TransactionDetails)\n"],"mappings":"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"}
+{"version":3,"file":"TransactionDetails.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionDetails.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Paper from '@mui/material/Paper'\nimport Snackbar from '@mui/material/Snackbar'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\n\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport {\n  ANALYTICS_EVENTS,\n  Loader,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n  useUserStore,\n} from '../../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Transaction, TransactionType } from '../../../core'\nimport { fromUnixUTC } from '../../../core/utils/DateUtil'\nimport { isTransferTransaction } from '../../../core/utils/TransactionUtils'\nimport { isFeatureEnabled } from '../../../core/utils/UserUtils'\nimport { ChartTransactionWithDrillDown, EmbeddedCard } from '../../../insights'\n\nimport {\n  BottomActions,\n  DEFAULT_BOTTOM_ACTIONS,\n  DEFAULT_TOP_ACTIONS,\n  TopActions,\n} from '../../constants/Actions'\n\nimport {\n  AddMerchantBudgetAction,\n  CategoryAction,\n  DateAction,\n  DeleteAction,\n  DeleteLogoAction,\n  ExcludeAction,\n  MemoAction,\n  SplitAction,\n  TagsAction,\n} from './transactiondetails/actions'\nimport Description from './transactiondetails/Description'\nimport FlagTransaction from './transactiondetails/FlagTransaction'\nimport TransactionDetailsView from './transactiondetails/TransactionDetailsView'\nimport { getEmbeddedInstanceSlotByBeatTemplates } from './getEmbeddedInstanceSlotByBeatTemplates'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\nexport interface TransactionDetailsProps {\n  bottomActions?: BottomActions[]\n  canFlagTransaction?: boolean\n  topActions?: TopActions[]\n  transaction: Transaction\n  shouldShowEmbeddedCard?: boolean\n}\n\nconst TransactionDetails: React.FC<TransactionDetailsProps> = ({\n  bottomActions = DEFAULT_BOTTOM_ACTIONS,\n  canFlagTransaction = true,\n  topActions = DEFAULT_TOP_ACTIONS,\n  transaction,\n  shouldShowEmbeddedCard = true,\n}) => {\n  const { onEvent } = useEvent()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { userFeatures } = useUserStore()\n  const { accounts: copy, common: commonCopy, insights_feed: insightsCopy } = useGlobalCopyStore()\n\n  const { detailedCategories } = useCategoryStore()\n  const {\n    alert,\n    associatedBeats,\n    detailedTransactions,\n    cachedStartDate,\n    loadEmbeddedInstanceTransactions,\n    setAlert,\n  } = useTransactionStore()\n\n  const [showTranscationDrilldownDrawer, setShowTransactionDrillDownDrawer] = React.useState(false)\n\n  const [isLoading, setIsLoading] = React.useState(false)\n  const [closeTipSection, setCloseTipSection] = React.useState(false)\n  const theme = useTheme()\n\n  const showFullNumber = transaction?.number && transaction.number.length > 4\n\n  const isCredit = transaction?.transaction_type === TransactionType.CREDIT\n\n  const showInstitution = isTransferTransaction(transaction) && Boolean(transaction.institutionName)\n\n  const beat = React.useMemo(() => {\n    return associatedBeats.find((beat) => beat.associated_transaction_guid === transaction.guid)\n  }, [associatedBeats, transaction])\n\n  const embeddedData = shouldShowEmbeddedCard\n    ? getEmbeddedInstanceSlotByBeatTemplates(commonCopy, beat)\n    : null\n\n  const [selectedTabIndex, setSelectedTabIndex] = React.useState(\n    embeddedData ? embeddedData.dataSeries.length - 1 : 0,\n  )\n\n  React.useEffect(\n    () =>\n      onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_VIEW, { transaction_guid: transaction.guid }),\n    [],\n  )\n\n  React.useEffect(() => {\n    if (!embeddedData || embeddedData.dataSeries.length === 0) return\n\n    const { date: selectedSeriesItemDate } = embeddedData.dataSeries[selectedTabIndex]\n\n    const start = startOfMonth(selectedSeriesItemDate)\n\n    if (isBefore(start, cachedStartDate)) {\n      setIsLoading(true)\n      loadEmbeddedInstanceTransactions(start).finally(() => {\n        setIsLoading(false)\n      })\n    }\n  }, [selectedTabIndex, embeddedData, cachedStartDate])\n\n  //if merchant_guid is null then no need to show the MerchantBudget action.\n  const updatedBottomActions =\n    bottomActions.includes(BottomActions.MerchantBudget) && !transaction?.merchant_guid\n      ? bottomActions.filter((action) => action !== BottomActions.MerchantBudget)\n      : bottomActions\n\n  const embeddedCardDataCategory = useMemo(() => {\n    if (embeddedData) {\n      const category = detailedCategories.find(\n        (cat) => cat.guid === transaction.top_level_category_guid,\n      )\n      const mean = beat?.payload?.average_amount ?? 0\n      const currentAmount = transaction.amount\n\n      let changetype = insightsCopy.general.increased_text\n      if (currentAmount - mean < 0) {\n        changetype = insightsCopy.general.decreased_text\n      }\n      const percentageAmount =\n        mean === 0 ? 0 : Math.round((Math.abs(currentAmount - mean) / mean) * 100)\n\n      return { category, percentageAmount, changetype }\n    }\n    return null\n  }, [embeddedData, detailedCategories])\n\n  const filteredTransactions = useMemo(() => {\n    if (!embeddedData?.dataSeries?.length) {\n      return []\n    }\n\n    const { guid: selectedSeriesItemGuid, date: selectedSeriesItemDate } =\n      embeddedData.dataSeries[selectedTabIndex]\n\n    const start = startOfMonth(selectedSeriesItemDate)\n    const end = endOfMonth(selectedSeriesItemDate)\n\n    return detailedTransactions.filter((t) => {\n      const transactionDate = fromUnixUTC(t.date)\n      return transactionDate >= start && transactionDate <= end && t.guid === selectedSeriesItemGuid\n    })\n  }, [selectedTabIndex, embeddedData, detailedTransactions, isLoading])\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  const shouldShowViewOnlyMode = isFeatureEnabled(userFeatures, 'MX_TXN_DETAILS_VIEW_ONLY')\n\n  const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n  return (\n    <Box className=\"mx-txn-transaction-details\" width=\"100%\">\n      {transaction && (\n        <Stack>\n          <Stack gap={12} p={24}>\n            <Paper elevation={2} sx={{ width: 64 }}>\n              <MerchantLogo\n                categoryGuid={transaction.top_level_category_guid || ''}\n                merchantGuid={transaction.merchant_guid || ''}\n                size={64}\n              />\n            </Paper>\n\n            <Description\n              displayValue={showInstitution ? transaction.institutionName : undefined}\n              transaction={transaction}\n              viewOnly={shouldShowViewOnlyMode || showInstitution}\n            />\n\n            <Stack direction=\"row\" justifyContent=\"space-between\" sx={{ minHeight: 44 }}>\n              <P color={isCredit ? 'success.main' : 'text.primary'} variant=\"h1\">\n                {isCredit ? '+' : ''}\n                {formatCurrency(transaction.amount, '0,0.00')}\n              </P>\n              {!shouldShowViewOnlyMode && canFlagTransaction && (\n                <FlagTransaction transaction={transaction} />\n              )}\n            </Stack>\n\n            {embeddedData?.instanceSlot && (\n              <EmbeddedCard\n                callToAction={embeddedData.callToAction}\n                description={\n                  buildDynamicCopy(\n                    insightsCopy.general.embedded_description,\n                    embeddedCardDataCategory!.changetype,\n                    <strong>{embeddedCardDataCategory!.percentageAmount}</strong>,\n                  ) as string\n                }\n                instanceSlot={embeddedData.instanceSlot}\n                onCtaClick={() => {\n                  setShowTransactionDrillDownDrawer(true)\n                }}\n                title={beat!.html_micro_title!}\n              />\n            )}\n            <Stack sx={{ bgcolor: bgColor, borderRadius: '4px', gap: 4, p: 8 }}>\n              <Text bold={true}>\n                {`${transaction.account}\n                ${\n                  showFullNumber\n                    ? transaction.number\n                    : '\\u2022'.repeat(4).concat(transaction.number ?? '')\n                }`}\n              </Text>\n              <Text bold={true} truncate={true} variant=\"tiny\">\n                {transaction.feed_description}\n              </Text>\n            </Stack>\n          </Stack>\n\n          <Paper square={true} sx={{ boxShadow: 'none' }}>\n            {shouldShowViewOnlyMode ? (\n              <TransactionDetailsView transaction={transaction} />\n            ) : (\n              <List>\n                {topActions.map((action, index) => (\n                  <React.Fragment key={action}>\n                    {action === TopActions.Category && <CategoryAction transaction={transaction} />}\n                    {action === TopActions.Date && <DateAction transaction={transaction} />}\n                    {action === TopActions.Memo && <MemoAction transaction={transaction} />}\n                    {action === TopActions.Tags && <TagsAction transaction={transaction} />}\n                    <Divider\n                      component=\"li\"\n                      variant={index < topActions.length - 1 ? 'inset' : 'fullWidth'}\n                    />\n                  </React.Fragment>\n                ))}\n              </List>\n            )}\n          </Paper>\n\n          {!shouldShowViewOnlyMode && updatedBottomActions.length > 0 && (\n            <React.Fragment>\n              <Text bold={true} mb={8} ml={26} mt={16} variant=\"body1\">\n                {copy.actions}\n              </Text>\n\n              <Paper square={true} sx={{ boxShadow: 'none' }}>\n                <List>\n                  {updatedBottomActions.map((action, index) => (\n                    <React.Fragment key={action}>\n                      {action === BottomActions.MerchantBudget && (\n                        <AddMerchantBudgetAction transaction={transaction} />\n                      )}\n                      {action === BottomActions.SplitTransaction && (\n                        <SplitAction transaction={transaction} />\n                      )}\n                      {action === BottomActions.HideTransaction && (\n                        <ExcludeAction transaction={transaction} />\n                      )}\n                      {action === BottomActions.MerchantLogo && (\n                        <DeleteLogoAction transaction={transaction} />\n                      )}\n                      <Divider\n                        component=\"li\"\n                        variant={index < updatedBottomActions.length - 1 ? 'inset' : 'fullWidth'}\n                      />\n                    </React.Fragment>\n                  ))}\n\n                  {/*\n                Show DeleteAction only if:\n                - The transaction is manual\n                - The transaction is NOT a parent transaction (no parent_guid)\n                - The transaction has NOT been split (has_been_split is false)\n                \n                This ensures delete is hidden for parent or split transactions.\n              */}\n                  {transaction.is_manual &&\n                    !transaction.parent_guid &&\n                    !transaction.has_been_split && <DeleteAction transaction={transaction} />}\n                </List>\n              </Paper>\n            </React.Fragment>\n          )}\n        </Stack>\n      )}\n      {beat && embeddedData && (\n        <ChartTransactionWithDrillDown\n          ariaLabel={formatDate(\n            embeddedData?.dataSeries[selectedTabIndex]?.date,\n            DATE_FORMATS_INTL.MONTH,\n          )}\n          barChartProps={{\n            amounts: {\n              average: beat.payload.average_amount,\n              formattedAverage: formatCurrency(beat.payload.average_amount, '0,0'),\n            },\n            color: embeddedCardDataCategory!.category?.color || '',\n            data: embeddedData.chartData,\n            margin: { bottom: 10, left: 24, right: 24, top: 20 },\n            monthlyAmountLabel: insightsCopy.general.monthly_amount,\n            onBarClick: (index) => {\n              setSelectedTabIndex(index)\n            },\n            trendAmountLabel: insightsCopy.general.trend,\n            legendPosition: 'top',\n          }}\n          beat={{\n            heading: beat.html_title,\n            subHeading: {\n              category_guid: transaction.category_guid ?? '',\n              merchant_guid: transaction.merchant_guid ?? '',\n              description: transaction.description ?? '',\n            },\n          }}\n          data={embeddedData.chartData}\n          defaultSelectedIndex={selectedTabIndex}\n          icon={\n            <MerchantLogo\n              alt={transaction.description ?? ''}\n              categoryGuid={transaction.category_guid ?? ''}\n              merchantGuid={transaction.merchant_guid ?? ''}\n              size={16}\n            />\n          }\n          isOpen={showTranscationDrilldownDrawer}\n          onClose={() => {\n            setShowTransactionDrillDownDrawer(false)\n            setSelectedTabIndex(embeddedData!.dataSeries.length - 1)\n          }}\n          onTabChange={(index: number) => {\n            setSelectedTabIndex(index)\n          }}\n          tipSection={\n            !closeTipSection\n              ? {\n                  message: buildDynamicCopy(\n                    insightsCopy.general.tip_section_message,\n                    <strong>{insightsCopy.general.tip_section_title}</strong>,\n                    <strong>{beat.primary_transaction?.description}</strong>,\n                  ) as string,\n                  onDismiss: () => setCloseTipSection(true),\n                }\n              : undefined\n          }\n          title={insightsCopy.general.transaction_history_title}\n          transactionListProps={{\n            showLoader: isLoading,\n            showInsights: true,\n            transaction: filteredTransactions,\n          }}\n        />\n      )}\n      <Snackbar\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        autoHideDuration={3500}\n        onClose={() => setAlert('')}\n        open={Boolean(alert)}\n      >\n        <Alert closeText=\"\" onClose={() => setAlert('')} severity=\"success\" variant=\"filled\">\n          {alert}\n        </Alert>\n      </Snackbar>\n    </Box>\n  )\n}\n\nexport default observer(TransactionDetails)\n"],"mappings":"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"}

package/package.json

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