@mx-cartographer/experiences 9.4.23 → 9.4.25

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [9.4.25] - 09-16-2026
+
+- **ADDED** - Dismissible tip section in the `TransactionHistoryBlock` drawer's `bill_amount_not_standard` (`TRANSACTION`) drilldown variant: a shared `TipSection` component nudging the user to reach out to the merchant, dismissible via a new `onDismiss` handler and `tip_section_message`/`tip_section_title` copy keys (`insights_feed.general`) (WEC-1804)
+- **ADDED** - `InsightsPayload.title` (`string`), per backend confirmation that the beat's display title is sent on the payload rather than read off the beat itself (WEC-1804)
+- **CHANGED** - Renamed `InsightsPayload.subtitle` to `InsightsPayload.sub_title` to match what the backend actually sends, updating `BaseLayout`, `TransactionHistoryBlock`, and all related test/story/mock fixtures (WEC-1804)
+- **CHANGED** - `BaseLayout` and `TransactionHistoryBlock`'s `bill_amount_not_standard` (`TRANSACTION`) drilldown header now read the beat's title/subtitle from `insights_payload.title`/`insights_payload.sub_title` instead of `beat.title`/`beat.html_title`; `DrillDownHeaderContext` (`TransactionHistoryBlock/layout.tsx`) updated from `{ htmlTitle, primaryTransaction }` to `{ title, subHeader }` to match (WEC-1804)
+- **CHANGED** - `SubHeader`'s logo resolution now checks `merchant_guid` before `institution_guid` (previously institution took priority over merchant), with a TODO to have the backend send only the one relevant guid per beat instead of relying on check order (WEC-1804)
+- **FIXED** - `TransactionHistoryBlock` and `BarchartBlock` now fall back to the generic "Monthly Amount"/"Trend" copy for the bar chart's legend labels when the backend doesn't send `legends` on `instance_slot_data`. `TransactionHistoryBlock`'s first attempt at this fallback was dead code (`array.map() ?? fallback` — `.map()` never returns `null`/`undefined`, so the `??` could never trigger); fixed to check `legends?.length` before mapping, and added regression tests for the empty-legends case in both blocks (WEC-1804)
+- **FIXED** - `BarchartBlock` now waits on `GlobalUiStore.isCopyLoaded` (rendering `Loader` until then) before reading copy for its legend fallback, matching `TransactionHistoryBlock`'s pattern — `BaseLayout` renders block components without waiting for copy to load, so `BarchartBlock` could previously mount and crash (`Cannot read properties of undefined (reading 'general')`) before `GlobalCopyStore` finished loading (WEC-1804)
+
+## [9.4.24] - 09-16-2026
+
+- **ADDED** - insights-v2 beat CTA post message (ported from Pulse): when a beat CTA has no drilldown drawer `block`, clicking it now notifies the host via a `beat/cta` post message (payload `action`, `beat_guid`, `beat_template`, `action_string?`, `user_guid`) or, on a native mobile webview, navigates to a `scheme://pulse/<event>?metadata=...` URL. New helpers in `common/utils/PostMessage.ts` (`getBaseCtaPostMessage`, `sendBeatPostMessage`, `setWebviewURL`, `dispatchBeatCta`, `BEAT_CTA_EVENT`, `BEAT_OPERATION_1/2/3`); `BaseLayout` CTA buttons route through a `handleCtaClick` helper that opens the drawer for CTAs with a real block and otherwise dispatches the post message. Scoped to the Save an extra $100 beat's "Make a Transfer" CTA (WEC-1805)
+- **CHANGED** - `SaveAnExtraCard` renders the projected-balance footer as-is (the backend now sends it pre-formatted, e.g. "$3,320") instead of re-formatting a parsed number; mock payload and `SaveExtraBlock`/card tests updated to match (WEC-1805)
+
 ## [9.4.23] - 09-16-2026
 
 - **ADDED** - Nested-drawer support for the insights-v2 `TransactionHistoryBlock`: clicking a transaction row in the history drawer opens a second, stacked `TransactionDetailsBlock` drawer scoped to that transaction, via `InsightsV2Store.setActionContext({ transaction_guid })` and `useActionContext<DrilldownPayload>()`. `TransactionDrillDown`'s row click is forwarded through a new `onEachRowClick` prop (WEC-1699)

package/dist/common/utils/PostMessage.d.ts

@@ -8,3 +8,54 @@ export interface PostMessageData {
 export declare function postMessageToParent(message: PostMessageData): boolean;
 export declare function postInsightOnTransaction(beatGuid: string): boolean;
 export declare function postClientConfiguredCta(template: string): boolean;
+export declare const BEAT_CTA_EVENT = "beat/cta";
+export declare const BEAT_OPERATION_1 = "op_1";
+export declare const BEAT_OPERATION_2 = "op_2";
+export declare const BEAT_OPERATION_3 = "op_3";
+/** Minimal beat shape needed to build a CTA post message. */
+export interface BeatCtaSource {
+    guid: string;
+    template: string;
+    payload?: {
+        action_string?: string;
+    } | null;
+}
+export interface BeatCtaPayload {
+    action: string;
+    beat_guid: string;
+    beat_template: string;
+    action_string?: string;
+    [key: string]: unknown;
+}
+/**
+ * Build the `[event, payload]` tuple for a beat CTA post message.
+ * Mirrors Pulse's `getBaseCtaPostMessage`.
+ */
+export declare function getBaseCtaPostMessage(beat: BeatCtaSource, op?: string): [string, BeatCtaPayload];
+/**
+ * Send a beat post message to the parent window. Only posts when embedded in an
+ * iframe (`window.self !== window.top`), mirroring Pulse's `sendPostMessage`
+ * (default scheme `mx/pulse`). Returns false when not embedded or no target.
+ */
+export declare function sendBeatPostMessage(event: string, data: Record<string, unknown>, scheme?: string): boolean;
+/**
+ * Navigate a mobile webview to a custom-scheme URL instead of posting a message.
+ * Mirrors Pulse's `setWebviewURL` (default scheme `mx`).
+ */
+export declare function setWebviewURL(event: string, data?: Record<string, unknown>, scheme?: string): void;
+export interface SendBeatCtaOptions {
+    /** True when running inside a native mobile webview. */
+    isMobileWebview?: boolean;
+    /** Custom URL scheme for webview navigation (from client config). */
+    webviewScheme?: string;
+    /** Current user guid, added to the metadata like the Pulse epic does. */
+    userGuid?: string;
+    /** Operation string sent with the CTA (defaults to op_1). */
+    op?: string;
+}
+/**
+ * Send a beat CTA to the host: builds the payload, adds `user_guid`, then either
+ * posts a message to the host or navigates the webview. Mirrors the behaviour of
+ * Pulse's `postMessages` epic (minus the RxJS buffering).
+ */
+export declare function sendBeatCta(beat: BeatCtaSource, { isMobileWebview, webviewScheme, userGuid, op }?: SendBeatCtaOptions): void;

package/dist/common/utils/PostMessage.es.js

@@ -1,29 +1,62 @@
-function o() {
+function c() {
   return window.opener && window.opener.location ? window.opener.location.toString() : document.referrer;
 }
-function r(e) {
-  const n = o().replace(/([^:]+:\/\/[^\/]+).*/, "$1"), t = window.parent || window.opener || !1;
+function a(e) {
+  const n = c().replace(/([^:]+:\/\/[^\/]+).*/, "$1"), t = window.parent || window.opener || !1;
   return t && t.postMessage && n ? (t.postMessage(e, n), !0) : !1;
 }
-function a(e) {
-  return r({
+function w(e) {
+  return a({
     metadata: { beat_guid: e },
     mx: !0,
     type: "mx/moneyDashboard/insightOnTransaction"
   });
 }
-function i(e) {
-  return r({
+function m(e) {
+  return a({
     metadata: { template: e },
     mx: !0,
     type: "mx/pulse/client_configured_cta"
   });
 }
+var d = "beat/cta", p = "op_1";
+function f(e, n = p) {
+  const t = {
+    action: n,
+    beat_guid: e.guid,
+    beat_template: e.template
+  };
+  return e?.payload?.action_string && (t.action_string = e.payload.action_string), [d, t];
+}
+function l(e, n, t = "mx/pulse") {
+  return window.self === window.top ? !1 : a({
+    metadata: n,
+    mx: !0,
+    type: `${t}/${e}`
+  });
+}
+function g(e, n, t = "mx") {
+  let o = `${t}://pulse/${e}`;
+  n && (o += "?metadata=" + encodeURIComponent(JSON.stringify(n))), window.location.href = o;
+}
+function _(e, { isMobileWebview: n, webviewScheme: t, userGuid: o, op: s } = {}) {
+  const [r, u] = f(e, s), i = {
+    ...u,
+    ...o ? { user_guid: o } : {}
+  };
+  n ? g(r, i, t) : l(r, i);
+}
 export {
-  o as getReferrer,
-  i as postClientConfiguredCta,
-  a as postInsightOnTransaction,
-  r as postMessageToParent
+  d as BEAT_CTA_EVENT,
+  p as BEAT_OPERATION_1,
+  f as getBaseCtaPostMessage,
+  c as getReferrer,
+  m as postClientConfiguredCta,
+  w as postInsightOnTransaction,
+  a as postMessageToParent,
+  _ as sendBeatCta,
+  l as sendBeatPostMessage,
+  g as setWebviewURL
 };
 
 //# sourceMappingURL=PostMessage.es.js.map

package/dist/common/utils/PostMessage.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostMessage.es.js","names":[],"sources":["../../../src/common/utils/PostMessage.ts"],"sourcesContent":["export function getReferrer(): string {\n  if (window.opener && window.opener.location) {\n    return window.opener.location.toString()\n  } else {\n    return document.referrer\n  }\n}\n\nexport interface PostMessageData {\n  metadata?: Record<string, any>\n  mx: boolean\n  type: string\n  [key: string]: any\n}\n\nexport function postMessageToParent(message: PostMessageData): boolean {\n  const postUrl = getReferrer().replace(/([^:]+:\\/\\/[^\\/]+).*/, '$1') // eslint-disable-line\n  const otherWindow = window.parent || window.opener || false\n\n  if (otherWindow && otherWindow.postMessage && postUrl) {\n    otherWindow.postMessage(message, postUrl)\n    return true\n  }\n\n  return false\n}\n\nexport function postInsightOnTransaction(beatGuid: string): boolean {\n  const message: PostMessageData = {\n    metadata: { beat_guid: beatGuid },\n    mx: true,\n    type: 'mx/moneyDashboard/insightOnTransaction',\n  }\n\n  return postMessageToParent(message)\n}\n\nexport function postClientConfiguredCta(template: string): boolean {\n  const message: PostMessageData = {\n    metadata: { template: template },\n    mx: true,\n    type: 'mx/pulse/client_configured_cta',\n  }\n\n  return postMessageToParent(message)\n}\n"],"mappings":"AAAA,SAAgB,IAAsB;AACpC,SAAI,OAAO,UAAU,OAAO,OAAO,WAC1B,OAAO,OAAO,SAAS,SAAS,IAEhC,SAAS;AAEpB;AASA,SAAgB,EAAoB,GAAmC;AACrE,QAAM,IAAU,EAAY,EAAE,QAAQ,wBAAwB,IAAI,GAC5D,IAAc,OAAO,UAAU,OAAO,UAAU;AAEtD,SAAI,KAAe,EAAY,eAAe,KAC5C,EAAY,YAAY,GAAS,CAAO,GACjC,MAGF;AACT;AAEA,SAAgB,EAAyB,GAA2B;AAOlE,SAAO,EAAoB;AAAA,IALzB,UAAU,EAAE,WAAW,EAAS;AAAA,IAChC,IAAI;AAAA,IACJ,MAAM;AAAA,EAGmB,CAAO;AACpC;AAEA,SAAgB,EAAwB,GAA2B;AAOjE,SAAO,EAAoB;AAAA,IALzB,UAAU,EAAY,UAAA,EAAS;AAAA,IAC/B,IAAI;AAAA,IACJ,MAAM;AAAA,EAGmB,CAAO;AACpC"}
+{"version":3,"file":"PostMessage.es.js","names":[],"sources":["../../../src/common/utils/PostMessage.ts"],"sourcesContent":["export function getReferrer(): string {\n  if (window.opener && window.opener.location) {\n    return window.opener.location.toString()\n  } else {\n    return document.referrer\n  }\n}\n\nexport interface PostMessageData {\n  metadata?: Record<string, any>\n  mx: boolean\n  type: string\n  [key: string]: any\n}\n\nexport function postMessageToParent(message: PostMessageData): boolean {\n  const postUrl = getReferrer().replace(/([^:]+:\\/\\/[^\\/]+).*/, '$1') // eslint-disable-line\n  const otherWindow = window.parent || window.opener || false\n\n  if (otherWindow && otherWindow.postMessage && postUrl) {\n    otherWindow.postMessage(message, postUrl)\n    return true\n  }\n\n  return false\n}\n\nexport function postInsightOnTransaction(beatGuid: string): boolean {\n  const message: PostMessageData = {\n    metadata: { beat_guid: beatGuid },\n    mx: true,\n    type: 'mx/moneyDashboard/insightOnTransaction',\n  }\n\n  return postMessageToParent(message)\n}\n\nexport function postClientConfiguredCta(template: string): boolean {\n  const message: PostMessageData = {\n    metadata: { template: template },\n    mx: true,\n    type: 'mx/pulse/client_configured_cta',\n  }\n\n  return postMessageToParent(message)\n}\n\n// ============================================================================\n// Beat CTA post messages (ported from Pulse: src/utils/PostMessage.js +\n// src/constants/PostMessage.js + src/epics/PostMessage.js).\n//\n// Scope: currently only the Save an extra $100 beat uses this. When a beat CTA\n// has no drilldown drawer, clicking it notifies the host app via a beat/cta\n// post message instead of opening a drawer. Native (mobile webview) hosts can't\n// receive post messages, so we navigate the webview to a custom-scheme URL.\n// ============================================================================\n\nexport const BEAT_CTA_EVENT = 'beat/cta'\nexport const BEAT_OPERATION_1 = 'op_1'\nexport const BEAT_OPERATION_2 = 'op_2'\nexport const BEAT_OPERATION_3 = 'op_3'\n\n/** Minimal beat shape needed to build a CTA post message. */\nexport interface BeatCtaSource {\n  guid: string\n  template: string\n  payload?: { action_string?: string } | null\n}\n\nexport interface BeatCtaPayload {\n  action: string\n  beat_guid: string\n  beat_template: string\n  action_string?: string\n  [key: string]: unknown\n}\n\n/**\n * Build the `[event, payload]` tuple for a beat CTA post message.\n * Mirrors Pulse's `getBaseCtaPostMessage`.\n */\nexport function getBaseCtaPostMessage(\n  beat: BeatCtaSource,\n  op: string = BEAT_OPERATION_1,\n): [string, BeatCtaPayload] {\n  const payload: BeatCtaPayload = {\n    action: op,\n    beat_guid: beat.guid,\n    beat_template: beat.template,\n  }\n\n  if (beat?.payload?.action_string) {\n    payload.action_string = beat.payload.action_string\n  }\n\n  return [BEAT_CTA_EVENT, payload]\n}\n\n/**\n * Send a beat post message to the parent window. Only posts when embedded in an\n * iframe (`window.self !== window.top`), mirroring Pulse's `sendPostMessage`\n * (default scheme `mx/pulse`). Returns false when not embedded or no target.\n */\nexport function sendBeatPostMessage(\n  event: string,\n  data: Record<string, unknown>,\n  scheme = 'mx/pulse',\n): boolean {\n  if (window.self === window.top) {\n    return false\n  }\n\n  const message: PostMessageData = {\n    metadata: data,\n    mx: true,\n    type: `${scheme}/${event}`,\n  }\n\n  return postMessageToParent(message)\n}\n\n/**\n * Navigate a mobile webview to a custom-scheme URL instead of posting a message.\n * Mirrors Pulse's `setWebviewURL` (default scheme `mx`).\n */\nexport function setWebviewURL(event: string, data?: Record<string, unknown>, scheme = 'mx'): void {\n  let webviewUrl = `${scheme}://pulse/${event}`\n\n  if (data) {\n    webviewUrl += '?metadata=' + encodeURIComponent(JSON.stringify(data))\n  }\n\n  window.location.href = webviewUrl\n}\n\nexport interface SendBeatCtaOptions {\n  /** True when running inside a native mobile webview. */\n  isMobileWebview?: boolean\n  /** Custom URL scheme for webview navigation (from client config). */\n  webviewScheme?: string\n  /** Current user guid, added to the metadata like the Pulse epic does. */\n  userGuid?: string\n  /** Operation string sent with the CTA (defaults to op_1). */\n  op?: string\n}\n\n/**\n * Send a beat CTA to the host: builds the payload, adds `user_guid`, then either\n * posts a message to the host or navigates the webview. Mirrors the behaviour of\n * Pulse's `postMessages` epic (minus the RxJS buffering).\n */\nexport function sendBeatCta(\n  beat: BeatCtaSource,\n  { isMobileWebview, webviewScheme, userGuid, op }: SendBeatCtaOptions = {},\n): void {\n  const [event, basePayload] = getBaseCtaPostMessage(beat, op)\n  const metadata: BeatCtaPayload = {\n    ...basePayload,\n    ...(userGuid ? { user_guid: userGuid } : {}),\n  }\n\n  if (isMobileWebview) {\n    setWebviewURL(event, metadata, webviewScheme)\n  } else {\n    sendBeatPostMessage(event, metadata)\n  }\n}\n"],"mappings":"AAAA,SAAgB,IAAsB;AACpC,SAAI,OAAO,UAAU,OAAO,OAAO,WAC1B,OAAO,OAAO,SAAS,SAAS,IAEhC,SAAS;AAEpB;AASA,SAAgB,EAAoB,GAAmC;AACrE,QAAM,IAAU,EAAY,EAAE,QAAQ,wBAAwB,IAAI,GAC5D,IAAc,OAAO,UAAU,OAAO,UAAU;AAEtD,SAAI,KAAe,EAAY,eAAe,KAC5C,EAAY,YAAY,GAAS,CAAO,GACjC,MAGF;AACT;AAEA,SAAgB,EAAyB,GAA2B;AAOlE,SAAO,EAAoB;AAAA,IALzB,UAAU,EAAE,WAAW,EAAS;AAAA,IAChC,IAAI;AAAA,IACJ,MAAM;AAAA,EAGmB,CAAO;AACpC;AAEA,SAAgB,EAAwB,GAA2B;AAOjE,SAAO,EAAoB;AAAA,IALzB,UAAU,EAAY,UAAA,EAAS;AAAA,IAC/B,IAAI;AAAA,IACJ,MAAM;AAAA,EAGmB,CAAO;AACpC;AAYA,IAAa,IAAiB,YACjB,IAAmB;AAuBhC,SAAgB,EACd,GACA,IAAa,GACa;AAC1B,QAAM,IAA0B;AAAA,IAC9B,QAAQ;AAAA,IACR,WAAW,EAAK;AAAA,IAChB,eAAe,EAAK;AAAA,EACtB;AAEA,SAAI,GAAM,SAAS,kBACjB,EAAQ,gBAAgB,EAAK,QAAQ,gBAGhC,CAAC,GAAgB,CAAO;AACjC;AAOA,SAAgB,EACd,GACA,GACA,IAAS,YACA;AACT,SAAI,OAAO,SAAS,OAAO,MAClB,KASF,EAAoB;AAAA,IALzB,UAAU;AAAA,IACV,IAAI;AAAA,IACJ,MAAM,GAAG,CAAA,IAAU,CAAA;AAAA,EAGM,CAAO;AACpC;AAMA,SAAgB,EAAc,GAAe,GAAgC,IAAS,MAAY;AAChG,MAAI,IAAa,GAAG,CAAA,YAAkB,CAAA;AAEtC,EAAI,MACF,KAAc,eAAe,mBAAmB,KAAK,UAAU,CAAI,CAAC,IAGtE,OAAO,SAAS,OAAO;AACzB;AAkBA,SAAgB,EACd,GACA,EAAE,iBAAA,GAAiB,eAAA,GAAe,UAAA,GAAU,IAAA,EAAA,IAA2B,CAAC,GAClE;AACN,QAAM,CAAC,GAAO,CAAA,IAAe,EAAsB,GAAM,CAAE,GACrD,IAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,GAAI,IAAW,EAAE,WAAW,EAAS,IAAI,CAAC;AAAA,EAC5C;AAEA,EAAI,IACF,EAAc,GAAO,GAAU,CAAa,IAE5C,EAAoB,GAAO,CAAQ;AAEvC"}

package/dist/core/types/Insights.d.ts

@@ -22,7 +22,8 @@ export interface InsightsPayload {
     description: Description;
     primary_cta?: PrimaryCTA;
     secondary_cta?: SecondaryCTA;
-    subtitle?: Subtitle;
+    title?: string;
+    sub_title?: Subtitle;
     footer?: Footer;
 }
 export interface Legends {

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { TipSectionProps } from '../../../insights/components/shared/ChartDrawerTemplate/TipSection';
 import { Transaction } from '../../../core';
 interface TabItem {
     label: string;
@@ -12,12 +13,13 @@ interface TransactionDrillDownProps {
     tabs?: TabItem[];
     selectedIndex: number;
     top: React.ReactNode;
+    tipSection?: TipSectionProps | false;
     onSelectionChange?: (selectedIndex: number) => void;
     onEachRowClick?: (guid: string) => void;
     transactionFilter?: (selectedIndex: number) => (transaction: Transaction) => boolean;
     baseTransactions?: Transaction[];
 }
-export declare const TransactionDrillDown: (({ ariaLabel, heading, subHeadingText, icon, tabs, selectedIndex, top, onSelectionChange, transactionFilter, onEachRowClick, baseTransactions, }: TransactionDrillDownProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const TransactionDrillDown: (({ ariaLabel, heading, subHeadingText, icon, tabs, selectedIndex, top, onSelectionChange, transactionFilter, tipSection, onEachRowClick, baseTransactions, }: TransactionDrillDownProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 export default TransactionDrillDown;

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

@@ -1,37 +1,38 @@
-import { useGlobalCopyStore as W, useGlobalUiStore as $, useTransactionStore as j } from "../../../common/context/hooks.es.js";
-import { exportTransactionsToCSV as G } from "../../../core/utils/TransactionUtils.es.js";
-import P from "../../../common/components/Loader.es.js";
-import A from "../../../transactions/components/shared/TransactionList.es.js";
+import { useGlobalCopyStore as $, useGlobalUiStore as j, useTransactionStore as G } from "../../../common/context/hooks.es.js";
+import { exportTransactionsToCSV as P } from "../../../core/utils/TransactionUtils.es.js";
+import A from "../../../common/components/Loader.es.js";
+import E from "../../../transactions/components/shared/TransactionList.es.js";
+import { TipSection as N } from "../../../insights/components/shared/ChartDrawerTemplate/TipSection.es.js";
 import "react";
-import { observer as E } from "mobx-react-lite";
+import { observer as R } from "mobx-react-lite";
 import c from "@mui/material/Stack";
-import { H3 as N, Text as d } from "@mxenabled/mxui";
-import R from "@mui/material/Button";
-import { Icon as U } from "@mxenabled/mx-icons";
+import { H3 as U, Text as m } from "@mxenabled/mxui";
+import V from "@mui/material/Button";
+import { Icon as q } from "@mxenabled/mx-icons";
 import { jsx as o, jsxs as r } from "react/jsx-runtime";
 import p from "@mui/material/Box";
-import V from "@mui/material/Tab";
-import q from "@mui/material/Tabs";
-var u = "transaction-drill-down-panel", v = (m) => `transaction-details-tab-${m}`, io = E(function({ ariaLabel: T, heading: i, subHeadingText: n, icon: y, tabs: b, selectedIndex: e, top: C, onSelectionChange: g, transactionFilter: f, onEachRowClick: _, baseTransactions: w }) {
-  const { transactions: l } = W(), { isCopyLoaded: D } = $(), { sortedTransactionsWithSplits: S, tags: L, detailedTransactions: B } = j();
-  if (!D) return /* @__PURE__ */ o(P, {});
-  const s = !!b?.length, I = T ?? l.transactions_title, k = (t, a) => {
-    g?.(a);
-  }, h = f ? (w ?? B).filter(f(e)) : void 0, x = h ?? S;
+import z from "@mui/material/Tab";
+import J from "@mui/material/Tabs";
+var v = "transaction-drill-down-panel", T = (d) => `transaction-details-tab-${d}`, lo = R(function({ ariaLabel: y, heading: i, subHeadingText: n, icon: C, tabs: b, selectedIndex: e, top: g, onSelectionChange: _, transactionFilter: f, tipSection: h, onEachRowClick: w, baseTransactions: D }) {
+  const { transactions: l } = $(), { isCopyLoaded: S } = j(), { sortedTransactionsWithSplits: L, tags: B, detailedTransactions: I } = G();
+  if (!S) return /* @__PURE__ */ o(A, {});
+  const s = !!b?.length, k = y ?? l.transactions_title, W = (t, a) => {
+    _?.(a);
+  }, x = f ? (D ?? I).filter(f(e)) : void 0, u = x ?? L;
   return /* @__PURE__ */ r(p, {
     sx: {
       bgcolor: "background.paper",
       width: "100%"
     },
-    children: [s && /* @__PURE__ */ o(q, {
-      "aria-label": I,
-      onChange: k,
+    children: [s && /* @__PURE__ */ o(J, {
+      "aria-label": k,
+      onChange: W,
       value: e,
       variant: "fullWidth",
-      children: b.map((t, a) => /* @__PURE__ */ o(V, {
-        "aria-controls": u,
+      children: b.map((t, a) => /* @__PURE__ */ o(z, {
+        "aria-controls": v,
         "aria-label": t.ariaLabel,
-        id: v(a),
+        id: T(a),
         label: t.label,
         sx: {
           minWidth: "auto",
@@ -39,8 +40,8 @@ var u = "transaction-drill-down-panel", v = (m) => `transaction-details-tab-${m}
         }
       }, `${t.label}-${a}`))
     }), /* @__PURE__ */ r(p, {
-      "aria-labelledby": s ? v(e) : void 0,
-      id: u,
+      "aria-labelledby": s ? T(e) : void 0,
+      id: v,
       role: s ? "tabpanel" : void 0,
       children: [
         (i || n) && /* @__PURE__ */ r(c, {
@@ -49,13 +50,13 @@ var u = "transaction-drill-down-panel", v = (m) => `transaction-details-tab-${m}
             pt: 16,
             px: 24
           },
-          children: [i && /* @__PURE__ */ o(N, { children: i }), n && /* @__PURE__ */ r(c, {
+          children: [i && /* @__PURE__ */ o(U, { children: i }), n && /* @__PURE__ */ r(c, {
             sx: {
               alignItems: "center",
               flexDirection: "row",
               gap: 8
             },
-            children: [y, /* @__PURE__ */ o(d, {
+            children: [C, /* @__PURE__ */ o(m, {
               textTransform: "uppercase",
               variant: "body2",
               children: n
@@ -64,8 +65,9 @@ var u = "transaction-drill-down-panel", v = (m) => `transaction-details-tab-${m}
         }),
         /* @__PURE__ */ o(p, {
           sx: { pt: 16 },
-          children: C
+          children: g
         }),
+        h && /* @__PURE__ */ o(N, { ...h }),
         /* @__PURE__ */ r(c, {
           sx: {
             alignItems: "center",
@@ -78,34 +80,34 @@ var u = "transaction-drill-down-panel", v = (m) => `transaction-details-tab-${m}
             pt: 16,
             px: 24
           },
-          children: [/* @__PURE__ */ o(d, {
+          children: [/* @__PURE__ */ o(m, {
             bold: !0,
             variant: "body1",
             children: l.transactions_title
-          }), x.length > 0 && /* @__PURE__ */ o(R, {
+          }), u.length > 0 && /* @__PURE__ */ o(V, {
             onClick: () => {
-              G(x, L);
+              P(u, B);
             },
-            startIcon: /* @__PURE__ */ o(U, { name: "ios_share" }),
+            startIcon: /* @__PURE__ */ o(q, { name: "ios_share" }),
             sx: { height: 28 },
-            children: /* @__PURE__ */ o(d, {
+            children: /* @__PURE__ */ o(m, {
               bold: !0,
               variant: "body2",
               children: l.export_csv_btn
             })
           })]
         }),
-        /* @__PURE__ */ o(A, {
-          transaction: h,
-          onClick: _
+        /* @__PURE__ */ o(E, {
+          transaction: x,
+          onClick: w
         })
       ]
     })]
   });
 });
 export {
-  io as TransactionDrillDown,
-  io as default
+  lo as TransactionDrillDown,
+  lo as default
 };
 
 //# sourceMappingURL=TransactionDrillDown.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionDrillDown.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionDrillDown.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\nimport { observer } from 'mobx-react-lite'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { H3, Text } from '@mxenabled/mxui'\n\nimport { Loader, useGlobalCopyStore, useGlobalUiStore, useTransactionStore } from '../../../common'\nimport type { Transaction } from '../../../core'\nimport { exportTransactionsToCSV } from '../../../core/utils/TransactionUtils'\nimport { TransactionList } from '../../../transactions'\n\ninterface TabItem {\n  label: string\n  ariaLabel?: string\n}\n\nconst PANEL_ID = 'transaction-drill-down-panel'\nconst tabId = (index: number) => `transaction-details-tab-${index}`\n\ninterface TransactionDrillDownProps {\n  ariaLabel?: string\n  heading?: string\n  subHeadingText?: string\n  icon?: React.ReactNode\n  tabs?: TabItem[]\n  selectedIndex: number\n  top: React.ReactNode\n  onSelectionChange?: (selectedIndex: number) => void\n  onEachRowClick?: (guid: string) => void\n  transactionFilter?: (selectedIndex: number) => (transaction: Transaction) => boolean\n  baseTransactions?: Transaction[]\n}\n\nexport const TransactionDrillDown = observer(function TransactionDrillDown({\n  ariaLabel,\n  heading,\n  subHeadingText,\n  icon,\n  tabs,\n  selectedIndex,\n  top,\n  onSelectionChange,\n  transactionFilter,\n  onEachRowClick,\n  baseTransactions,\n}: TransactionDrillDownProps) {\n  const { transactions: transactionsCopy } = useGlobalCopyStore()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { sortedTransactionsWithSplits, tags, detailedTransactions } = useTransactionStore()\n\n  if (!isCopyLoaded) return <Loader />\n\n  const hasTabs = !!tabs?.length\n  const tablistLabel = ariaLabel ?? transactionsCopy.transactions_title\n\n  const handlePrimaryChange = (_event: React.SyntheticEvent, newValue: number) => {\n    onSelectionChange?.(newValue)\n  }\n\n  const filteredTransactions = transactionFilter\n    ? (baseTransactions ?? detailedTransactions).filter(transactionFilter(selectedIndex))\n    : undefined\n\n  const exportTransactions = filteredTransactions ?? sortedTransactionsWithSplits\n\n  return (\n    <Box sx={{ bgcolor: 'background.paper', width: '100%' }}>\n      {hasTabs && (\n        <Tabs\n          aria-label={tablistLabel}\n          onChange={handlePrimaryChange}\n          value={selectedIndex}\n          variant=\"fullWidth\"\n        >\n          {tabs!.map((tab, index) => (\n            <Tab\n              aria-controls={PANEL_ID}\n              aria-label={tab.ariaLabel}\n              id={tabId(index)}\n              key={`${tab.label}-${index}`}\n              label={tab.label}\n              sx={{ minWidth: 'auto', px: 0 }}\n            />\n          ))}\n        </Tabs>\n      )}\n\n      <Box\n        aria-labelledby={hasTabs ? tabId(selectedIndex) : undefined}\n        id={PANEL_ID}\n        role={hasTabs ? 'tabpanel' : undefined}\n      >\n        {(heading || subHeadingText) && (\n          <Stack sx={{ gap: 4, pt: 16, px: 24 }}>\n            {heading && <H3>{heading}</H3>}\n            {subHeadingText && (\n              <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n                {icon}\n                <Text textTransform=\"uppercase\" variant=\"body2\">\n                  {subHeadingText}\n                </Text>\n              </Stack>\n            )}\n          </Stack>\n        )}\n\n        <Box sx={{ pt: 16 }}>{top}</Box>\n\n        <Stack\n          sx={{\n            alignItems: 'center',\n            borderBottomColor: 'divider',\n            borderBottomStyle: 'solid',\n            borderBottomWidth: 1,\n            flexDirection: 'row',\n            justifyContent: 'space-between',\n            pb: 4,\n            pt: 16,\n            px: 24,\n          }}\n        >\n          <Text bold={true} variant=\"body1\">\n            {transactionsCopy.transactions_title}\n          </Text>\n          {exportTransactions.length > 0 && (\n            <Button\n              onClick={() => {\n                exportTransactionsToCSV(exportTransactions, tags)\n              }}\n              startIcon={<Icon name=\"ios_share\" />}\n              sx={{ height: 28 }}\n            >\n              <Text bold={true} variant=\"body2\">\n                {transactionsCopy.export_csv_btn}\n              </Text>\n            </Button>\n          )}\n        </Stack>\n\n        <TransactionList transaction={filteredTransactions} onClick={onEachRowClick} />\n      </Box>\n    </Box>\n  )\n})\n\nexport default TransactionDrillDown\n"],"mappings":"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"}
+{"version":3,"file":"TransactionDrillDown.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionDrillDown.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\nimport { observer } from 'mobx-react-lite'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { H3, Text } from '@mxenabled/mxui'\n\nimport {\n  TipSection,\n  type TipSectionProps,\n} from '../../../insights/components/shared/ChartDrawerTemplate/TipSection'\nimport { Loader, useGlobalCopyStore, useGlobalUiStore, useTransactionStore } from '../../../common'\nimport type { Transaction } from '../../../core'\nimport { exportTransactionsToCSV } from '../../../core/utils/TransactionUtils'\nimport { TransactionList } from '../../../transactions'\n\ninterface TabItem {\n  label: string\n  ariaLabel?: string\n}\n\nconst PANEL_ID = 'transaction-drill-down-panel'\nconst tabId = (index: number) => `transaction-details-tab-${index}`\n\ninterface TransactionDrillDownProps {\n  ariaLabel?: string\n  heading?: string\n  subHeadingText?: string\n  icon?: React.ReactNode\n  tabs?: TabItem[]\n  selectedIndex: number\n  top: React.ReactNode\n  tipSection?: TipSectionProps | false\n  onSelectionChange?: (selectedIndex: number) => void\n  onEachRowClick?: (guid: string) => void\n  transactionFilter?: (selectedIndex: number) => (transaction: Transaction) => boolean\n  baseTransactions?: Transaction[]\n}\n\nexport const TransactionDrillDown = observer(function TransactionDrillDown({\n  ariaLabel,\n  heading,\n  subHeadingText,\n  icon,\n  tabs,\n  selectedIndex,\n  top,\n  onSelectionChange,\n  transactionFilter,\n  tipSection,\n  onEachRowClick,\n  baseTransactions,\n}: TransactionDrillDownProps) {\n  const { transactions: transactionsCopy } = useGlobalCopyStore()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { sortedTransactionsWithSplits, tags, detailedTransactions } = useTransactionStore()\n\n  if (!isCopyLoaded) return <Loader />\n\n  const hasTabs = !!tabs?.length\n  const tablistLabel = ariaLabel ?? transactionsCopy.transactions_title\n\n  const handlePrimaryChange = (_event: React.SyntheticEvent, newValue: number) => {\n    onSelectionChange?.(newValue)\n  }\n\n  const filteredTransactions = transactionFilter\n    ? (baseTransactions ?? detailedTransactions).filter(transactionFilter(selectedIndex))\n    : undefined\n\n  const exportTransactions = filteredTransactions ?? sortedTransactionsWithSplits\n\n  return (\n    <Box sx={{ bgcolor: 'background.paper', width: '100%' }}>\n      {hasTabs && (\n        <Tabs\n          aria-label={tablistLabel}\n          onChange={handlePrimaryChange}\n          value={selectedIndex}\n          variant=\"fullWidth\"\n        >\n          {tabs!.map((tab, index) => (\n            <Tab\n              aria-controls={PANEL_ID}\n              aria-label={tab.ariaLabel}\n              id={tabId(index)}\n              key={`${tab.label}-${index}`}\n              label={tab.label}\n              sx={{ minWidth: 'auto', px: 0 }}\n            />\n          ))}\n        </Tabs>\n      )}\n\n      <Box\n        aria-labelledby={hasTabs ? tabId(selectedIndex) : undefined}\n        id={PANEL_ID}\n        role={hasTabs ? 'tabpanel' : undefined}\n      >\n        {(heading || subHeadingText) && (\n          <Stack sx={{ gap: 4, pt: 16, px: 24 }}>\n            {heading && <H3>{heading}</H3>}\n            {subHeadingText && (\n              <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n                {icon}\n                <Text textTransform=\"uppercase\" variant=\"body2\">\n                  {subHeadingText}\n                </Text>\n              </Stack>\n            )}\n          </Stack>\n        )}\n\n        <Box sx={{ pt: 16 }}>{top}</Box>\n\n        {/* TODO: need to use a nseperate compnent from insight-v2, for now using insights-shared component which will be shifted under insights-v2 in future */}\n        {tipSection && <TipSection {...tipSection} />}\n\n        <Stack\n          sx={{\n            alignItems: 'center',\n            borderBottomColor: 'divider',\n            borderBottomStyle: 'solid',\n            borderBottomWidth: 1,\n            flexDirection: 'row',\n            justifyContent: 'space-between',\n            pb: 4,\n            pt: 16,\n            px: 24,\n          }}\n        >\n          <Text bold={true} variant=\"body1\">\n            {transactionsCopy.transactions_title}\n          </Text>\n          {exportTransactions.length > 0 && (\n            <Button\n              onClick={() => {\n                exportTransactionsToCSV(exportTransactions, tags)\n              }}\n              startIcon={<Icon name=\"ios_share\" />}\n              sx={{ height: 28 }}\n            >\n              <Text bold={true} variant=\"body2\">\n                {transactionsCopy.export_csv_btn}\n              </Text>\n            </Button>\n          )}\n        </Stack>\n\n        <TransactionList transaction={filteredTransactions} onClick={onEachRowClick} />\n      </Box>\n    </Box>\n  )\n})\n\nexport default TransactionDrillDown\n"],"mappings":"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"}

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

@@ -1,105 +1,114 @@
-import { useGlobalCopyStore as q, useGlobalUiStore as z, useInsightsV2Store as J } from "../../../common/context/hooks.es.js";
-import Q from "../../../common/components/drawer/Drawer.es.js";
-import { formatCurrency as W } from "../../../core/utils/NumberFormatting.es.js";
-import X from "../../../common/components/Loader.es.js";
-import { BarChartV2 as Y } from "../../components/chartblocks/BarchartV2.es.js";
-import { EmptyBarChart as Z } from "../../components/chartblocks/EmptyBarChart.es.js";
-import { TransactionDrillDown as tt } from "./TransactionDrillDown.es.js";
-import { useTransactionHistory as et } from "./useTransactionHistory.es.js";
-import { getDefaultSelection as at, getDrillDownConfig as ot, getFlattenedDataSeries as rt, toStoreFilter as nt } from "./utils.es.js";
-import { TransactionDetailsBlock as it } from "../TransactionDetailsBlock/TransactionDetailsBlock.es.js";
-import { useLayoutEffect as st, useState as S } from "react";
-import { observer as lt } from "mobx-react-lite";
-import { Fragment as ct, jsx as o, jsxs as dt } from "react/jsx-runtime";
-import { useTheme as mt } from "@mui/material/styles";
-var xt = lt(({ beat: a }) => {
-  const g = mt(), { instanceSlotData: e, beatTransactions: i, primaryTransaction: _, spendCategoryGuids: p, allAccountGuids: u, categoryName: v, displayedDateRange: c, transactionStore: L } = et(a), { actionDrawer: h, setActionContext: y } = J(), { common: x, insights_feed: B } = q(), { isCopyLoaded: I } = z(), [F, f] = S(!1), { insights_payload: b } = a, G = h.trigger === "secondaryCta" ? b?.secondary_cta?.variant : b?.primary_cta?.variant, { top: d, filterMode: s, header: A, colors: j, filterStrategy: w } = ot(G ?? ""), { dataSeries: l, chartData: r, comparisonBars: k } = rt({
+import { useGlobalCopyStore as Q, useGlobalUiStore as W, useInsightsV2Store as X } from "../../../common/context/hooks.es.js";
+import Y from "../../../common/components/drawer/Drawer.es.js";
+import { formatCurrency as Z } from "../../../core/utils/NumberFormatting.es.js";
+import tt from "../../../common/components/Loader.es.js";
+import { BarChartV2 as et } from "../../components/chartblocks/BarchartV2.es.js";
+import { EmptyBarChart as at } from "../../components/chartblocks/EmptyBarChart.es.js";
+import { TransactionDrillDown as ot } from "./TransactionDrillDown.es.js";
+import { useTransactionHistory as nt } from "./useTransactionHistory.es.js";
+import { getDefaultSelection as rt, getDrillDownConfig as it, getFlattenedDataSeries as st, toStoreFilter as lt } from "./utils.es.js";
+import { TransactionDetailsBlock as ct } from "../TransactionDetailsBlock/TransactionDetailsBlock.es.js";
+import { useLayoutEffect as dt, useState as u } from "react";
+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({
     data: e?.data_series,
     ariaLabel: e?.ariaLabel ?? "",
-    top: d,
-    beatTransactions: i,
+    top: g,
+    beatTransactions: s,
     payload: e
-  }), { chartBarIndex: H, subTabIndex: E } = at({
+  }), { chartBarIndex: K, subTabIndex: O } = rt({
     chartTabCount: r.length,
-    comparisonTabCount: k.length,
-    actionDrawer: h,
+    comparisonTabCount: E.length,
+    actionDrawer: y,
     beatGuid: a.guid
-  }), [n, C] = S(H), T = (t) => w({
+  }), [i, _] = u(K), D = (t) => H({
     beat: a,
-    beatTransactions: i,
-    dataSeries: l,
+    beatTransactions: s,
+    dataSeries: d,
     selectedIndex: t,
-    subIndex: E,
-    isLastTab: t === l.length - 1,
+    subIndex: O,
+    isLastTab: t === d.length - 1,
     instanceSlotData: e,
-    spendCategoryGuids: p,
-    displayedDateRange: c
-  }), K = i.map((t) => t.guid).join(","), O = p.join(","), V = u.join(","), D = () => {
-    s !== "store" || !l.length || L.setFilter(nt(T(n), {
-      allAccountGuids: u,
-      displayedDateRange: c
+    spendCategoryGuids: h,
+    displayedDateRange: m
+  }), V = s.map((t) => t.guid).join(","), R = h.join(","), M = f.join(","), L = () => {
+    c !== "store" || !d.length || x.setFilter(lt(D(i), {
+      allAccountGuids: f,
+      displayedDateRange: m
     }));
   };
-  st(() => {
-    D();
+  dt(() => {
+    L();
   }, [
     a.guid,
-    n,
-    s,
-    l.length,
-    e,
+    i,
     c,
-    O,
-    V,
-    K
+    d.length,
+    e,
+    m,
+    R,
+    M,
+    V
   ]);
-  const m = A?.({
-    htmlTitle: a.html_title,
-    primaryTransaction: _,
+  const p = k?.({
+    title: n?.title,
+    subHeader: n?.sub_title,
     categoryName: v,
-    selectedDate: r[n]?.date ?? void 0
-  }), R = j(g, e?.category_guid), [M, N] = (e?.legends ?? []).map((t) => t.label), P = s === "local" ? (t) => T(t).custom ?? (() => !0) : void 0, U = s === "local" ? i : void 0, $ = d === "singleBar" || d === "upcomingBill" ? r.length ? /* @__PURE__ */ o(Y, {
+    selectedDate: r[i]?.date ?? void 0
+  }), N = w(b, 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: W(e?.average_amount ?? 0, "0,0.00")
+      formattedAverage: Z(e?.average_amount ?? 0, "0,0.00")
     },
-    color: R[0] ?? g.palette.primary.main,
+    color: N[0] ?? b.palette.primary.main,
     data: r,
     legendPosition: "top",
-    monthlyAmountLabel: M,
-    onBarClick: C,
-    selectedTabIndex: n,
-    trendAmountLabel: N
-  }) : /* @__PURE__ */ o(Z, {}) : null;
-  return I ? /* @__PURE__ */ dt(ct, { children: [/* @__PURE__ */ o(tt, {
+    margin: {
+      bottom: 30,
+      top: 20,
+      left: 24,
+      right: 24
+    },
+    monthlyAmountLabel: U,
+    onBarClick: _,
+    selectedTabIndex: i,
+    trendAmountLabel: $
+  }) : /* @__PURE__ */ o(at, {}) : null;
+  return /* @__PURE__ */ pt(gt, { children: [/* @__PURE__ */ o(ot, {
     ariaLabel: e?.ariaLabel,
-    baseTransactions: U,
-    heading: m?.heading,
-    icon: m?.icon,
-    onSelectionChange: C,
-    selectedIndex: n,
-    subHeadingText: m?.subHeadingText,
+    baseTransactions: z,
+    heading: p?.heading,
+    icon: p?.icon,
+    onSelectionChange: _,
+    selectedIndex: i,
+    subHeadingText: p?.subHeadingText,
     tabs: r.map((t) => ({
       ariaLabel: t.ariaLabel,
       label: t.label
     })),
-    top: $,
-    transactionFilter: P,
+    top: J,
+    ...S && { tipSection: !G && S(A, l, n?.sub_title?.text) },
+    transactionFilter: q,
     onEachRowClick: (t) => {
-      y({ transaction_guid: t }), f(!0);
+      C({ transaction_guid: t }), T(!0);
     }
-  }), /* @__PURE__ */ o(Q, {
-    ariaLabelClose: x.close_aria,
-    isOpen: F,
+  }), /* @__PURE__ */ o(Y, {
+    ariaLabelClose: B.close_aria,
+    isOpen: I,
     onClose: () => {
-      f(!1), y({ transaction_guid: void 0 }), D();
+      T(!1), C({ transaction_guid: void 0 }), L();
     },
-    title: B.general.transaction_details_title,
-    children: /* @__PURE__ */ o(it, { beat: a })
-  })] }) : /* @__PURE__ */ o(X, {});
+    title: l.general.transaction_details_title,
+    children: /* @__PURE__ */ o(ct, { beat: a })
+  })] });
 });
 export {
-  xt as TransactionHistoryBlock
+  It as TransactionHistoryBlock
 };
 
 //# sourceMappingURL=TransactionHistoryBlock.es.js.map