@mx-cartographer/experiences 9.4.68 → 9.4.70

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [9.4.70] - 10-09-2026
+
+- **ADDED** - `PrimaryCTA` / `SecondaryCTA` accept a backend-described `metadata` object (`event`, `action`, `payload`); on press the CTA runner posts that message to the host after the step's handler and effects succeed, so per-insight post messages no longer need frontend code (WEC-1852)
+- **CHANGED** - A CTA press posts a message only when one resolves (`cta.metadata`, else `ctaPostMessages`); the previous fallback that posted a base `beat/cta` `op_1` for every block-less CTA is removed (WEC-1852)
+- **CHANGED** - `sendBeatCta` accepts an `event` override and `extras` merged into the message metadata (WEC-1852)
+- **ADDED** - `ctaPostMessages`: interim per-template CTA post messages (SaveAnExtra100Dollars, LowAccountBalance, MonthlyObligationsStatus, DesignateEmergencySavingsAccount, ReplenishSavings, SavingsOpportunityV2) carried over from pulse, used only when the backend sends no `cta.metadata` (WEC-1852)
+
+## [9.4.69] - 10-09-2026
+
+- **ADDED** - `remaining_cash_block` (Remaining Cash) action block for the Payday Cash Left Over Status beat: summary card (remaining until payday, days, cash on hand, upcoming expenses) plus cash accounts and recurring expenses before payday, each capped at two rows with an "Other (#)" row. Store-driven from `CashflowStore`; loads through `useRecurringTransactionPrepare` with an `ErrorCard` retry on failure (WEC-1880)
+- **ADDED** - `CashflowStore.uiStore` computeds `upcomingExpensesTotal`, `remainingUntilPayday`, `hasUpcomingPayday`; `insights_feed.remaining_cash` copy (WEC-1880)
+- **ADDED** - Payday Cash Left Over Status beat fixtures, `InsightsV2/ActionBlock/RemainingCashBlock` stories, and `docs/action-blocks/remaining-cash-block.md` (WEC-1880)
+
 ## [9.4.68] - 10-09-2026
 
 - **ADDED** - `transaction_list_block` (Transaction List) action block: opens a date-grouped drawer of the transactions a beat points at, with a nested Transaction Details drawer stacked on row click. Resolves rows via `instance_slot_data.transaction_guids` (id-list path), guarded by `Array.isArray` at the untrusted-payload boundary. `usePrepare` shares `useTransactionDetailsPrepare` so `detailedTransactions` is loaded on open — the drawer never opens on a permanent spinner. The registry entry titles the drawer from `insights_payload.title` (matching the WEC-1804 move off `beat.html_title`, which carries HTML entities); when the resolver returns an empty string, `ActionBlockLayer` falls back to the CTA label. Nested close clears the shared `transaction_guid` from action context, matching the sibling `TransactionHistoryBlock` convention. Only the `Standard` variant ships in this MR; the other three variants (`w/Summary`, `w/Status`, `w/Help`) are deferred to a follow-up MR after Figma review surfaced structural mismatches. Unblocks WEC-1461 and WEC-1462. (WEC-1425)

package/dist/cashflow/context/hooks.d.ts

@@ -13,4 +13,7 @@ export declare const useCashflowUiStore: () => {
     get selectedCashBalance(): number;
     get daysUntilNextIncome(): number;
     get expensesTilNextIncome(): import('../../core').Recurrence[];
+    get upcomingExpensesTotal(): number;
+    get remainingUntilPayday(): number;
+    get hasUpcomingPayday(): boolean;
 };

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

@@ -52,10 +52,14 @@ export interface SendBeatCtaOptions {
     userGuid?: string;
     /** Operation string sent with the CTA (defaults to op_1). */
     op?: string;
+    /** Post message event name (defaults to `beat/cta`). */
+    event?: string;
+    /** Beat-specific fields merged into the metadata after the base payload and `user_guid`. */
+    extras?: Record<string, unknown>;
 }
 /**
  * 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;
+export declare function sendBeatCta(beat: BeatCtaSource, { isMobileWebview, webviewScheme, userGuid, op, event, extras }?: SendBeatCtaOptions): void;

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

@@ -1,62 +1,64 @@
-function c() {
+function f() {
   return window.opener && window.opener.location ? window.opener.location.toString() : document.referrer;
 }
 function a(e) {
-  const n = c().replace(/([^:]+:\/\/[^\/]+).*/, "$1"), t = window.parent || window.opener || !1;
+  const n = f().replace(/([^:]+:\/\/[^\/]+).*/, "$1"), t = window.parent || window.opener || !1;
   return t && t.postMessage && n ? (t.postMessage(e, n), !0) : !1;
 }
-function w(e) {
+function T(e) {
   return a({
     metadata: { beat_guid: e },
     mx: !0,
     type: "mx/moneyDashboard/insightOnTransaction"
   });
 }
-function m(e) {
+function y(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) {
+var l = "beat/cta", g = "op_1", x = "op_2";
+function w(e, n = g) {
   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];
+  return e?.payload?.action_string && (t.action_string = e.payload.action_string), [l, t];
 }
-function l(e, n, t = "mx/pulse") {
+function m(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") {
+function _(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);
+function E(e, { isMobileWebview: n, webviewScheme: t, userGuid: o, op: s, event: u, extras: c } = {}) {
+  const [d, p] = w(e, s), r = {
+    ...p,
+    ...o ? { user_guid: o } : {},
+    ...c
+  }, i = u || d;
+  n ? _(i, r, t) : m(i, r);
 }
 export {
-  d as BEAT_CTA_EVENT,
-  p as BEAT_OPERATION_1,
-  f as getBaseCtaPostMessage,
-  c as getReferrer,
-  m as postClientConfiguredCta,
-  w as postInsightOnTransaction,
+  l as BEAT_CTA_EVENT,
+  g as BEAT_OPERATION_1,
+  x as BEAT_OPERATION_2,
+  w as getBaseCtaPostMessage,
+  f as getReferrer,
+  y as postClientConfiguredCta,
+  T as postInsightOnTransaction,
   a as postMessageToParent,
-  _ as sendBeatCta,
-  l as sendBeatPostMessage,
-  g as setWebviewURL
+  E as sendBeatCta,
+  m as sendBeatPostMessage,
+  _ 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\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"}
+{"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  /** Post message event name (defaults to `beat/cta`). */\n  event?: string\n  /** Beat-specific fields merged into the metadata after the base payload and `user_guid`. */\n  extras?: Record<string, unknown>\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, event, extras }: SendBeatCtaOptions = {},\n): void {\n  const [defaultEvent, basePayload] = getBaseCtaPostMessage(beat, op)\n  const metadata: BeatCtaPayload = {\n    ...basePayload,\n    ...(userGuid ? { user_guid: userGuid } : {}),\n    ...extras,\n  }\n  const eventName = event || defaultEvent\n\n  if (isMobileWebview) {\n    setWebviewURL(eventName, metadata, webviewScheme)\n  } else {\n    sendBeatPostMessage(eventName, 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,QACnB,IAAmB;AAsBhC,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;AAsBA,SAAgB,EACd,GACA,EAAE,iBAAA,GAAiB,eAAA,GAAe,UAAA,GAAU,IAAA,GAAI,OAAA,GAAO,QAAA,EAAA,IAA+B,CAAC,GACjF;AACN,QAAM,CAAC,GAAc,CAAA,IAAe,EAAsB,GAAM,CAAE,GAC5D,IAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,GAAI,IAAW,EAAE,WAAW,EAAS,IAAI,CAAC;AAAA,IAC1C,GAAG;AAAA,EACL,GACM,IAAY,KAAS;AAE3B,EAAI,IACF,EAAc,GAAW,GAAU,CAAa,IAEhD,EAAoB,GAAW,CAAQ;AAE3C"}

package/dist/core/stores/CashflowStore.d.ts

@@ -22,5 +22,8 @@ declare class UiStore {
     get selectedCashBalance(): number;
     get daysUntilNextIncome(): number;
     get expensesTilNextIncome(): Recurrence[];
+    get upcomingExpensesTotal(): number;
+    get remainingUntilPayday(): number;
+    get hasUpcomingPayday(): boolean;
 }
 export {};

package/dist/core/stores/CashflowStore.es.js

@@ -54,6 +54,15 @@ var f = class {
   get expensesTilNextIncome() {
     return this.upcomingExpenses.filter((e) => c(e.expectedDate, this.nextIncome?.expectedDate || i(/* @__PURE__ */ new Date())));
   }
+  get upcomingExpensesTotal() {
+    return this.expensesTilNextIncome.reduce((e, t) => e + t.amount, 0);
+  }
+  get remainingUntilPayday() {
+    return this.selectedCashBalance - this.upcomingExpensesTotal;
+  }
+  get hasUpcomingPayday() {
+    return this.nextIncome !== void 0;
+  }
 };
 export {
   f as CashflowStore

package/dist/core/stores/CashflowStore.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CashflowStore.es.js","names":[],"sources":["../../../src/core/stores/CashflowStore.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\nimport { addDays } from 'date-fns/addDays'\nimport { differenceInDays } from 'date-fns/differenceInDays'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { startOfToday } from 'date-fns/startOfToday'\n\nimport type { Account, Recurrence, UserProfile } from '../types'\nimport { getAccountStartingBalance } from '../utils/AccountUtils'\n\nimport { GlobalStore } from './GlobalStore'\n\nexport class CashflowStore {\n  globalStore: GlobalStore\n  uiStore: UiStore\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n    this.uiStore = new UiStore(globalStore)\n\n    makeAutoObservable(this)\n  }\n\n  completeOnboarding = async () => {\n    const updatedUserProfile = {\n      ...this.globalStore.userStore.userProfile,\n      has_completed_cash_flow_onboarding: true,\n    } as UserProfile\n\n    await this.globalStore.userStore.updateUserProfile(updatedUserProfile)\n  }\n}\n\nclass UiStore {\n  globalStore: GlobalStore\n\n  // Cashflow is hard-coded to display 30 days starting from today. This is the\n  // single source of truth for Cash Flow's window; it intentionally does NOT\n  // mutate RecurringTransactionsStore.dateRange, so Cash Flow stays decoupled\n  // from other widgets (e.g. Recurring Transactions) that drive that shared range.\n  dateRange = { start: startOfToday(), end: addDays(startOfToday(), 30) }\n  isDirty = false\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n\n    makeAutoObservable(this)\n  }\n\n  // Recurrence data scoped to Cash Flow's own dateRange, sourced from the\n  // range-parameterized helpers on RecurringTransactionsStore. Computeds (not\n  // component state) per the project's MobX conventions.\n  get income(): Recurrence[] {\n    return this.globalStore.recurringTransactionsStore.incomeForRange(this.dateRange)\n  }\n\n  get upcomingIncome(): Recurrence[] {\n    return this.globalStore.recurringTransactionsStore.upcomingIncomeForRange(this.dateRange)\n  }\n\n  get upcomingExpenses(): Recurrence[] {\n    return this.globalStore.recurringTransactionsStore.upcomingExpensesForRange(this.dateRange)\n  }\n\n  get nextIncome(): Recurrence | undefined {\n    return this.globalStore.recurringTransactionsStore.nextIncomeForRange(this.dateRange)\n  }\n\n  // Visible cash accounts that are currently selected in the account filter.\n  // Computed (single source of truth) so it stays in sync with account data and\n  // the filter without effect-based syncing in components.\n  get selectedCashAccounts(): Account[] {\n    const { selectedAccountGuids } = this.globalStore.globalUiStore\n    return this.globalStore.accountStore.visibleCashAccounts.filter((account) =>\n      selectedAccountGuids.includes(account.guid),\n    )\n  }\n\n  // Total spendable/starting balance across the selected cash accounts, using\n  // the shared per-account balance rule (available vs current balance).\n  get selectedCashBalance(): number {\n    const showAvailableBalance =\n      this.globalStore.appConfig.config.display_available_balance_in_accounts\n    return this.selectedCashAccounts.reduce(\n      (total, account) => total + getAccountStartingBalance(account, showAvailableBalance),\n      0,\n    )\n  }\n  // Returns the number of days until the next income activity or 0 if there is no income activity\n  get daysUntilNextIncome() {\n    return this.nextIncome\n      ? Math.abs(differenceInDays(startOfToday(), this.nextIncome.expectedDate))\n      : 0\n  }\n\n  // Returns the expenses (Activities) until the  next income activity or the end of the month\n  // if there is no income activity\n  get expensesTilNextIncome() {\n    return this.upcomingExpenses.filter((a) =>\n      isBefore(a.expectedDate, this.nextIncome?.expectedDate || endOfMonth(new Date())),\n    )\n  }\n}\n"],"mappings":";;;;;;;AAYA,IAAa,IAAb,MAA2B;AAAA,EACzB;AAAA,EACA;AAAA,EAEA,YAAY,GAA0B;AACpC,SAAK,cAAc,GACnB,KAAK,UAAU,IAAI,EAAQ,CAAW,GAEtC,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,qBAAqB,YAAY;AAC/B,UAAM,IAAqB;AAAA,MACzB,GAAG,KAAK,YAAY,UAAU;AAAA,MAC9B,oCAAoC;AAAA,IACtC;AAEA,UAAM,KAAK,YAAY,UAAU,kBAAkB,CAAkB;AAAA,EACvE;AACF,GAEM,IAAN,MAAc;AAAA,EACZ;AAAA,EAMA,YAAY;AAAA,IAAE,OAAO,EAAa;AAAA,IAAG,KAAK,EAAQ,EAAa,GAAG,EAAE;AAAA,EAAE;AAAA,EACtE,UAAU;AAAA,EAEV,YAAY,GAA0B;AACpC,SAAK,cAAc,GAEnB,EAAmB,IAAI;AAAA,EACzB;AAAA,EAKA,IAAI,SAAuB;AACzB,WAAO,KAAK,YAAY,2BAA2B,eAAe,KAAK,SAAS;AAAA,EAClF;AAAA,EAEA,IAAI,iBAA+B;AACjC,WAAO,KAAK,YAAY,2BAA2B,uBAAuB,KAAK,SAAS;AAAA,EAC1F;AAAA,EAEA,IAAI,mBAAiC;AACnC,WAAO,KAAK,YAAY,2BAA2B,yBAAyB,KAAK,SAAS;AAAA,EAC5F;AAAA,EAEA,IAAI,aAAqC;AACvC,WAAO,KAAK,YAAY,2BAA2B,mBAAmB,KAAK,SAAS;AAAA,EACtF;AAAA,EAKA,IAAI,uBAAkC;AACpC,UAAM,EAAE,sBAAA,EAAA,IAAyB,KAAK,YAAY;AAClD,WAAO,KAAK,YAAY,aAAa,oBAAoB,OAAA,CAAQ,MAC/D,EAAqB,SAAS,EAAQ,IAAI,CAC5C;AAAA,EACF;AAAA,EAIA,IAAI,sBAA8B;AAChC,UAAM,IACJ,KAAK,YAAY,UAAU,OAAO;AACpC,WAAO,KAAK,qBAAqB,OAAA,CAC9B,GAAO,MAAY,IAAQ,EAA0B,GAAS,CAAoB,GACnF,CACF;AAAA,EACF;AAAA,EAEA,IAAI,sBAAsB;AACxB,WAAO,KAAK,aACR,KAAK,IAAI,EAAiB,EAAa,GAAG,KAAK,WAAW,YAAY,CAAC,IACvE;AAAA,EACN;AAAA,EAIA,IAAI,wBAAwB;AAC1B,WAAO,KAAK,iBAAiB,OAAA,CAAQ,MACnC,EAAS,EAAE,cAAc,KAAK,YAAY,gBAAgB,EAAW,oBAAI,KAAK,CAAC,CAAC,CAClF;AAAA,EACF;AACF"}
+{"version":3,"file":"CashflowStore.es.js","names":[],"sources":["../../../src/core/stores/CashflowStore.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\nimport { addDays } from 'date-fns/addDays'\nimport { differenceInDays } from 'date-fns/differenceInDays'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { startOfToday } from 'date-fns/startOfToday'\n\nimport type { Account, Recurrence, UserProfile } from '../types'\nimport { getAccountStartingBalance } from '../utils/AccountUtils'\n\nimport { GlobalStore } from './GlobalStore'\n\nexport class CashflowStore {\n  globalStore: GlobalStore\n  uiStore: UiStore\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n    this.uiStore = new UiStore(globalStore)\n\n    makeAutoObservable(this)\n  }\n\n  completeOnboarding = async () => {\n    const updatedUserProfile = {\n      ...this.globalStore.userStore.userProfile,\n      has_completed_cash_flow_onboarding: true,\n    } as UserProfile\n\n    await this.globalStore.userStore.updateUserProfile(updatedUserProfile)\n  }\n}\n\nclass UiStore {\n  globalStore: GlobalStore\n\n  // Cashflow is hard-coded to display 30 days starting from today. This is the\n  // single source of truth for Cash Flow's window; it intentionally does NOT\n  // mutate RecurringTransactionsStore.dateRange, so Cash Flow stays decoupled\n  // from other widgets (e.g. Recurring Transactions) that drive that shared range.\n  dateRange = { start: startOfToday(), end: addDays(startOfToday(), 30) }\n  isDirty = false\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n\n    makeAutoObservable(this)\n  }\n\n  // Recurrence data scoped to Cash Flow's own dateRange, sourced from the\n  // range-parameterized helpers on RecurringTransactionsStore. Computeds (not\n  // component state) per the project's MobX conventions.\n  get income(): Recurrence[] {\n    return this.globalStore.recurringTransactionsStore.incomeForRange(this.dateRange)\n  }\n\n  get upcomingIncome(): Recurrence[] {\n    return this.globalStore.recurringTransactionsStore.upcomingIncomeForRange(this.dateRange)\n  }\n\n  get upcomingExpenses(): Recurrence[] {\n    return this.globalStore.recurringTransactionsStore.upcomingExpensesForRange(this.dateRange)\n  }\n\n  get nextIncome(): Recurrence | undefined {\n    return this.globalStore.recurringTransactionsStore.nextIncomeForRange(this.dateRange)\n  }\n\n  // Visible cash accounts that are currently selected in the account filter.\n  // Computed (single source of truth) so it stays in sync with account data and\n  // the filter without effect-based syncing in components.\n  get selectedCashAccounts(): Account[] {\n    const { selectedAccountGuids } = this.globalStore.globalUiStore\n    return this.globalStore.accountStore.visibleCashAccounts.filter((account) =>\n      selectedAccountGuids.includes(account.guid),\n    )\n  }\n\n  // Total spendable/starting balance across the selected cash accounts, using\n  // the shared per-account balance rule (available vs current balance).\n  get selectedCashBalance(): number {\n    const showAvailableBalance =\n      this.globalStore.appConfig.config.display_available_balance_in_accounts\n    return this.selectedCashAccounts.reduce(\n      (total, account) => total + getAccountStartingBalance(account, showAvailableBalance),\n      0,\n    )\n  }\n  // Returns the number of days until the next income activity or 0 if there is no income activity\n  get daysUntilNextIncome() {\n    return this.nextIncome\n      ? Math.abs(differenceInDays(startOfToday(), this.nextIncome.expectedDate))\n      : 0\n  }\n\n  // Returns the expenses (Activities) until the  next income activity or the end of the month\n  // if there is no income activity\n  get expensesTilNextIncome() {\n    return this.upcomingExpenses.filter((a) =>\n      isBefore(a.expectedDate, this.nextIncome?.expectedDate || endOfMonth(new Date())),\n    )\n  }\n\n  // Sum of the expenses due before the next income (end of month when there is none).\n  get upcomingExpensesTotal(): number {\n    return this.expensesTilNextIncome.reduce((total, expense) => total + expense.amount, 0)\n  }\n\n  // Cash left once the upcoming expenses are paid; negative when short before payday.\n  get remainingUntilPayday(): number {\n    return this.selectedCashBalance - this.upcomingExpensesTotal\n  }\n\n  get hasUpcomingPayday(): boolean {\n    return this.nextIncome !== undefined\n  }\n}\n"],"mappings":";;;;;;;AAYA,IAAa,IAAb,MAA2B;AAAA,EACzB;AAAA,EACA;AAAA,EAEA,YAAY,GAA0B;AACpC,SAAK,cAAc,GACnB,KAAK,UAAU,IAAI,EAAQ,CAAW,GAEtC,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,qBAAqB,YAAY;AAC/B,UAAM,IAAqB;AAAA,MACzB,GAAG,KAAK,YAAY,UAAU;AAAA,MAC9B,oCAAoC;AAAA,IACtC;AAEA,UAAM,KAAK,YAAY,UAAU,kBAAkB,CAAkB;AAAA,EACvE;AACF,GAEM,IAAN,MAAc;AAAA,EACZ;AAAA,EAMA,YAAY;AAAA,IAAE,OAAO,EAAa;AAAA,IAAG,KAAK,EAAQ,EAAa,GAAG,EAAE;AAAA,EAAE;AAAA,EACtE,UAAU;AAAA,EAEV,YAAY,GAA0B;AACpC,SAAK,cAAc,GAEnB,EAAmB,IAAI;AAAA,EACzB;AAAA,EAKA,IAAI,SAAuB;AACzB,WAAO,KAAK,YAAY,2BAA2B,eAAe,KAAK,SAAS;AAAA,EAClF;AAAA,EAEA,IAAI,iBAA+B;AACjC,WAAO,KAAK,YAAY,2BAA2B,uBAAuB,KAAK,SAAS;AAAA,EAC1F;AAAA,EAEA,IAAI,mBAAiC;AACnC,WAAO,KAAK,YAAY,2BAA2B,yBAAyB,KAAK,SAAS;AAAA,EAC5F;AAAA,EAEA,IAAI,aAAqC;AACvC,WAAO,KAAK,YAAY,2BAA2B,mBAAmB,KAAK,SAAS;AAAA,EACtF;AAAA,EAKA,IAAI,uBAAkC;AACpC,UAAM,EAAE,sBAAA,EAAA,IAAyB,KAAK,YAAY;AAClD,WAAO,KAAK,YAAY,aAAa,oBAAoB,OAAA,CAAQ,MAC/D,EAAqB,SAAS,EAAQ,IAAI,CAC5C;AAAA,EACF;AAAA,EAIA,IAAI,sBAA8B;AAChC,UAAM,IACJ,KAAK,YAAY,UAAU,OAAO;AACpC,WAAO,KAAK,qBAAqB,OAAA,CAC9B,GAAO,MAAY,IAAQ,EAA0B,GAAS,CAAoB,GACnF,CACF;AAAA,EACF;AAAA,EAEA,IAAI,sBAAsB;AACxB,WAAO,KAAK,aACR,KAAK,IAAI,EAAiB,EAAa,GAAG,KAAK,WAAW,YAAY,CAAC,IACvE;AAAA,EACN;AAAA,EAIA,IAAI,wBAAwB;AAC1B,WAAO,KAAK,iBAAiB,OAAA,CAAQ,MACnC,EAAS,EAAE,cAAc,KAAK,YAAY,gBAAgB,EAAW,oBAAI,KAAK,CAAC,CAAC,CAClF;AAAA,EACF;AAAA,EAGA,IAAI,wBAAgC;AAClC,WAAO,KAAK,sBAAsB,OAAA,CAAQ,GAAO,MAAY,IAAQ,EAAQ,QAAQ,CAAC;AAAA,EACxF;AAAA,EAGA,IAAI,uBAA+B;AACjC,WAAO,KAAK,sBAAsB,KAAK;AAAA,EACzC;AAAA,EAEA,IAAI,oBAA6B;AAC/B,WAAO,KAAK,eAAe;AAAA,EAC7B;AACF"}

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

@@ -161,6 +161,21 @@ export interface Description {
     text: string;
     html_text: string;
 }
+/**
+ * Post message a CTA press sends to the host, resolved by the backend for the beat's current
+ * state. Absent/null = the backend has not described one: the frontend uses the template's
+ * interim `ctaPostMessages` entry if there is one, else sends no message. `payload` carries only
+ * beat-specific extras; the frontend always adds `beat_guid`, `beat_template`, `user_guid` and
+ * `action_string`.
+ */
+export interface CtaPostMessageMetadata {
+    /** Post message event; defaults to `beat/cta`. */
+    event?: string | null;
+    /** Operation the host should perform, e.g. `op_1`, `op_2`, `op_3`. Defaults to `op_1`. */
+    action?: string | null;
+    /** Beat-specific fields merged into the message metadata (account ids, amounts, ...). */
+    payload?: Record<string, unknown> | null;
+}
 export interface PrimaryCTA {
     label: string;
     block: string;
@@ -171,6 +186,7 @@ export interface PrimaryCTA {
      * null / absent / unknown means the CTA only opens its block or posts its message.
      */
     action_key?: string | null;
+    metadata?: CtaPostMessageMetadata | null;
 }
 export interface SecondaryCTA {
     label: string;
@@ -178,6 +194,7 @@ export interface SecondaryCTA {
     variant?: string | null;
     /** See `PrimaryCTA.action_key` (ditto `secondary_cta_action`). */
     action_key?: string | null;
+    metadata?: CtaPostMessageMetadata | null;
 }
 export interface Footer {
     /** V1: a pre-formatted date string. */

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

@@ -13,7 +13,7 @@ export type { Expense } from './Expense';
 export { ExpenseStatus, ScheduledPaymentTypes } from './Expense';
 export type { DynamicCopyElement, GlobalCopy } from './GlobalCopy';
 export { GoalType, MetaType, TrackType } from './Goal';
-export type { ThemedSVGImageProps, DrilldownData, DrilldownPayload, InsightsPayload, InstanceSlot, Pill, WidgetType, InstanceSlotRow, BlockType, Description, PrimaryCTA, SecondaryCTA, Subtitle, Footer, Logo, LogoRef, CategoryLogo, MerchantLogo, InstitutionLogo, Legends, } from './Insights';
+export type { ThemedSVGImageProps, DrilldownData, DrilldownPayload, InsightsPayload, InstanceSlot, Pill, WidgetType, InstanceSlotRow, BlockType, Description, PrimaryCTA, CtaPostMessageMetadata, SecondaryCTA, Subtitle, Footer, Logo, LogoRef, CategoryLogo, MerchantLogo, InstitutionLogo, Legends, } from './Insights';
 export type { Goal, MonthlyCashFlowProfile, RetirementGoalAccount } from './Goal';
 export type { Debt } from './Debt';
 export type { GlobalCaptureException, GlobalErrorHandler, GlobalEventHandler } from './Handlers';

package/dist/core/types/localization/InsightsFeedCopy.d.ts

@@ -132,10 +132,25 @@ export interface FeedbackCopy {
     /** ARIA label for the close button. */
     close_aria: string;
 }
+export interface RemainingCashCopy {
+    title: string;
+    remaining_until_payday: string;
+    remaining_until_payday_one: string;
+    cash_on_hand: string;
+    upcoming_expenses: string;
+    accounts_header: string;
+    recurring_expenses_header: string;
+    other_accounts: string;
+    other_accounts_one: string;
+    other_expenses: string;
+    other_expenses_one: string;
+}
 export interface InsightsFeedCopy {
     general: GeneralInsightsFeedCopy;
     settings_menu: SettingsMenuCopy;
     make_transfer: MakeTransferCopy;
+    /** Optional until the localized-content service ships it; the drawer shows an error without it. */
+    remaining_cash?: RemainingCashCopy;
     overflow_menu: OverflowMenuCopy;
     transaction_history_block: TransactionHistoryBlock;
     hidden_confirmation: HiddenConfirmationCopy;

package/dist/core/types/localization/index.d.ts

@@ -13,7 +13,7 @@ export type { DebtsCopy } from './DebtsCopy';
 export type { FinstrongCopy } from './FinstrongCopy';
 export type { GoalsCopy } from './GoalsCopy';
 export type { HelpCopy, HelpByCategoryList } from './HelpCopy';
-export type { InsightsFeedCopy, MakeTransferCopy, OverflowMenuCopy, DismissInsightCopy, DismissInsightOptionCopy, HiddenConfirmationCopy, HideFeedbackCopy, FeedbackCopy, FeedbackBarCopy, } from './InsightsFeedCopy';
+export type { InsightsFeedCopy, MakeTransferCopy, RemainingCashCopy, OverflowMenuCopy, DismissInsightCopy, DismissInsightOptionCopy, HiddenConfirmationCopy, HideFeedbackCopy, FeedbackCopy, FeedbackBarCopy, } from './InsightsFeedCopy';
 export type { InvestmentsCopy } from './InvestmentsCopy';
 export type { MicroInsightsCopy } from './MicroInsightsCopy';
 export type { NetWorthCopy } from './NetWorthCopy';

package/dist/insights-v2/actionBlocks/RecurringTransactionBlock/index.d.ts

@@ -1,2 +1,2 @@
 export { RecurringTransactionBlock } from './RecurringTransactionBlock';
-export { useRecurringTransactionPrepare } from './useRecurringTransactionPrepare';
+export { type RecurringTransactionActionContext, useRecurringTransactionLoad, useRecurringTransactionPrepare, } from './useRecurringTransactionPrepare';

package/dist/insights-v2/actionBlocks/RemainingCashBlock/RemainingCashBlock.d.ts

@@ -0,0 +1,11 @@
+import { ActionBlockProps } from '../../mappings/blocks';
+/**
+ * Remaining Cash drawer (WEC-1880) for the Payday Cash Left Over Status beat. Store-driven: the
+ * figures are today's, from CashflowStore's UiStore, not the card's generation-time numbers
+ * (accepted trade-off, see docs/action-blocks/remaining-cash-block.md).
+ *
+ * `observer` is required: everything rendered is read from MobX stores and computeds.
+ */
+export declare const RemainingCashBlock: ((_props: ActionBlockProps) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

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

@@ -0,0 +1,89 @@
+import { CategoryGuids as T } from "../../../core/constants/Category.es.js";
+import R from "../../../common/utils/AccountDisplayName.es.js";
+import { useAccountStore as G, useActionContext as S, useAppConfig as w, useCashflowStore as A, useCategoryStore as I, useGlobalCopyStore as U, useRecurringTransactionsStore as v, useTransactionStore as E } from "../../../common/context/hooks.es.js";
+import { getAccountStartingBalance as O } from "../../../core/utils/AccountUtils.es.js";
+import b from "../../../common/components/Loader.es.js";
+import { ErrorCard as k } from "../../components/ErrorCard.es.js";
+import { useRecurringTransactionLoad as N } from "../RecurringTransactionBlock/useRecurringTransactionPrepare.es.js";
+import { DEFAULT_INSTITUTION_LOGO_URL as D, getCaption as F, getOtherLabel as z, groupRows as B } from "./layout.es.js";
+import H from "./RemainingCashContent.es.js";
+import { observer as P } from "mobx-react-lite";
+import $ from "@mui/material/Stack";
+import { CategoryIcon as d, InstitutionLogo as g, Text as j } from "@mxenabled/mxui";
+import { jsx as n } from "react/jsx-runtime";
+var p = (m, i, s) => {
+  const { others: a, shown: r } = B(m);
+  return a ? [...r, {
+    amount: a.total,
+    key: "other",
+    leading: s,
+    name: z(i.one, i.multi, a.count)
+  }] : r;
+}, to = P(function(i) {
+  const { common: s, insights_feed: a } = U(), { config: r } = w(), { uiStore: t } = A(), { getTopLevelCategoryGuid: l } = I(), { accountsLoaded: h } = G(), { transactionsLoaded: u, transactionsLoading: y } = E(), { isDataLoaded: c } = v(), _ = S()?.recurringLoadFailed === !0, f = N(), C = c && !u && !y, o = a?.remaining_cash;
+  if (a?.general && !o) return /* @__PURE__ */ n($, {
+    sx: { p: 24 },
+    children: /* @__PURE__ */ n(j, { children: s?.error_message })
+  });
+  if (_ && !c || C) return /* @__PURE__ */ n(k, { onRetry: () => {
+    f();
+  } });
+  if (!c || !h || !u || !o) return /* @__PURE__ */ n(b, {});
+  const L = p(t.selectedCashAccounts.map((e) => ({
+    amount: O(e, r.display_available_balance_in_accounts),
+    key: e.guid,
+    leading: /* @__PURE__ */ n(g, {
+      alt: "",
+      institutionGuid: e.institution_guid ?? "",
+      size: 32
+    }),
+    name: R(e)
+  })), {
+    multi: o.other_accounts,
+    one: o.other_accounts_one
+  }, /* @__PURE__ */ n(g, {
+    alt: "",
+    institutionGuid: "",
+    logoUrl: D,
+    size: 32
+  })), x = p(t.expensesTilNextIncome.map((e) => ({
+    amount: e.amount,
+    key: `${e.repeatingTransactionGuid}-${e.expectedDate.getTime()}`,
+    leading: /* @__PURE__ */ n(d, {
+      categoryGuid: l(e.categoryGuid),
+      size: 32
+    }),
+    name: e.name
+  })), {
+    multi: o.other_expenses,
+    one: o.other_expenses_one
+  }, /* @__PURE__ */ n(d, {
+    categoryGuid: T.UNCATEGORIZED,
+    size: 32
+  }));
+  return /* @__PURE__ */ n(H, {
+    accounts: {
+      header: o.accounts_header,
+      rows: L
+    },
+    expenses: {
+      header: o.recurring_expenses_header,
+      rows: x
+    },
+    summary: {
+      remaining: t.hasUpcomingPayday ? {
+        amount: t.remainingUntilPayday,
+        caption: F(o, t.daysUntilNextIncome)
+      } : void 0,
+      cashOnHand: t.selectedCashBalance,
+      cashOnHandLabel: o.cash_on_hand,
+      upcomingExpenses: t.upcomingExpensesTotal,
+      upcomingExpensesLabel: o.upcoming_expenses
+    }
+  });
+});
+export {
+  to as RemainingCashBlock
+};
+
+//# sourceMappingURL=RemainingCashBlock.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemainingCashBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/RemainingCashBlock/RemainingCashBlock.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, InstitutionLogo, Text } from '@mxenabled/mxui'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  Loader,\n  useAccountStore,\n  useActionContext,\n  useAppConfig,\n  useCashflowStore,\n  useCategoryStore,\n  useGlobalCopyStore,\n  useRecurringTransactionsStore,\n  useTransactionStore,\n} from '../../../common'\nimport getAccountDisplayName from '../../../common/utils/AccountDisplayName'\nimport { CategoryGuids } from '../../../core/constants/Category'\nimport { getAccountStartingBalance } from '../../../core/utils/AccountUtils'\nimport { ErrorCard } from '../../components/ErrorCard'\nimport type { ActionBlockProps } from '../../mappings/blocks'\nimport {\n  type RecurringTransactionActionContext,\n  useRecurringTransactionLoad,\n} from '../RecurringTransactionBlock'\n\nimport { DEFAULT_INSTITUTION_LOGO_URL, getCaption, getOtherLabel, groupRows } from './layout'\nimport RemainingCashContent from './RemainingCashContent'\nimport type { RemainingCashRow } from './RemainingCashContent'\n\n/** Top rows by amount, then one \"Other (#)\" row with the rest's count and total. */\nconst toSectionRows = (\n  rows: RemainingCashRow[],\n  otherLabel: { one: string; multi: string },\n  otherLeading: ReactNode,\n): RemainingCashRow[] => {\n  const { others, shown } = groupRows(rows)\n\n  if (!others) return shown\n\n  return [\n    ...shown,\n    {\n      amount: others.total,\n      key: 'other',\n      leading: otherLeading,\n      name: getOtherLabel(otherLabel.one, otherLabel.multi, others.count),\n    },\n  ]\n}\n\n/**\n * Remaining Cash drawer (WEC-1880) for the Payday Cash Left Over Status beat. Store-driven: the\n * figures are today's, from CashflowStore's UiStore, not the card's generation-time numbers\n * (accepted trade-off, see docs/action-blocks/remaining-cash-block.md).\n *\n * `observer` is required: everything rendered is read from MobX stores and computeds.\n */\nexport const RemainingCashBlock = observer(function RemainingCashBlock(_props: ActionBlockProps) {\n  const { common: commonCopy, insights_feed: insightsFeedCopy } = useGlobalCopyStore()\n  const { config } = useAppConfig()\n  const { uiStore } = useCashflowStore()\n  const { getTopLevelCategoryGuid } = useCategoryStore()\n  const { accountsLoaded } = useAccountStore()\n  const { transactionsLoaded, transactionsLoading } = useTransactionStore()\n  const { isDataLoaded } = useRecurringTransactionsStore()\n  const loadFailed =\n    useActionContext<RecurringTransactionActionContext>()?.recurringLoadFailed === true\n  const retryLoad = useRecurringTransactionLoad()\n\n  // TransactionStore swallows a failed request, which would silently zero every expense (see the\n  // States table in docs/action-blocks/remaining-cash-block.md). `transactionsLoading` excludes another\n  // widget's request still in flight: loadTransactions returns early without awaiting it.\n  const transactionsFailed = isDataLoaded && !transactionsLoaded && !transactionsLoading\n  const copy = insightsFeedCopy?.remaining_cash\n\n  // Copy loaded but without this namespace (the copy service has not shipped it). Copy loads once at\n  // app start, so a retry cannot clear it: a plain message like ActionBlockLayer's unknown-block\n  // state, not ErrorCard's Try Again, and never an endless loader.\n  if (insightsFeedCopy?.general && !copy) {\n    return (\n      <Stack sx={{ p: 24 }}>\n        <Text>{commonCopy?.error_message}</Text>\n      </Stack>\n    )\n  }\n\n  if ((loadFailed && !isDataLoaded) || transactionsFailed) {\n    return <ErrorCard onRetry={() => void retryLoad()} />\n  }\n\n  // `accountsLoaded` / `transactionsLoaded` cover another widget's request still in flight.\n  if (!isDataLoaded || !accountsLoaded || !transactionsLoaded || !copy) return <Loader />\n\n  const accountRows = toSectionRows(\n    uiStore.selectedCashAccounts.map((account) => ({\n      amount: getAccountStartingBalance(account, config.display_available_balance_in_accounts),\n      key: account.guid,\n      // Decorative: the row's visible name already says which account it is.\n      leading: (\n        <InstitutionLogo alt=\"\" institutionGuid={account.institution_guid ?? ''} size={32} />\n      ),\n      name: getAccountDisplayName(account),\n    })),\n    { multi: copy.other_accounts, one: copy.other_accounts_one },\n    <InstitutionLogo alt=\"\" institutionGuid=\"\" logoUrl={DEFAULT_INSTITUTION_LOGO_URL} size={32} />,\n  )\n  const expenseRows = toSectionRows(\n    uiStore.expensesTilNextIncome.map((expense) => ({\n      amount: expense.amount,\n      key: `${expense.repeatingTransactionGuid}-${expense.expectedDate.getTime()}`,\n      leading: (\n        <CategoryIcon categoryGuid={getTopLevelCategoryGuid(expense.categoryGuid)} size={32} />\n      ),\n      name: expense.name,\n    })),\n    { multi: copy.other_expenses, one: copy.other_expenses_one },\n    <CategoryIcon categoryGuid={CategoryGuids.UNCATEGORIZED} size={32} />,\n  )\n\n  return (\n    <RemainingCashContent\n      accounts={{ header: copy.accounts_header, rows: accountRows }}\n      expenses={{ header: copy.recurring_expenses_header, rows: expenseRows }}\n      summary={{\n        remaining: uiStore.hasUpcomingPayday\n          ? {\n              amount: uiStore.remainingUntilPayday,\n              caption: getCaption(copy, uiStore.daysUntilNextIncome),\n            }\n          : undefined,\n        cashOnHand: uiStore.selectedCashBalance,\n        cashOnHandLabel: copy.cash_on_hand,\n        upcomingExpenses: uiStore.upcomingExpensesTotal,\n        upcomingExpensesLabel: copy.upcoming_expenses,\n      }}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;;;;;AAiCA,IAAM,IAAA,CACJ,GACA,GACA,MACuB;AACvB,QAAM,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAU,CAAI;AAExC,SAAK,IAEE,CACL,GAAG,GACH;AAAA,IACE,QAAQ,EAAO;AAAA,IACf,KAAK;AAAA,IACL,SAAS;AAAA,IACT,MAAM,EAAc,EAAW,KAAK,EAAW,OAAO,EAAO,KAAK;AAAA,EACpE,CACF,IAVoB;AAWtB,GASa,KAAqB,EAAS,SAA4B,GAA0B;AAC/F,QAAM,EAAE,QAAQ,GAAY,eAAe,EAAA,IAAqB,EAAmB,GAC7E,EAAE,QAAA,EAAA,IAAW,EAAa,GAC1B,EAAE,SAAA,EAAA,IAAY,EAAiB,GAC/B,EAAE,yBAAA,EAAA,IAA4B,EAAiB,GAC/C,EAAE,gBAAA,EAAA,IAAmB,EAAgB,GACrC,EAAE,oBAAA,GAAoB,qBAAA,EAAA,IAAwB,EAAoB,GAClE,EAAE,cAAA,EAAA,IAAiB,EAA8B,GACjD,IACJ,EAAoD,GAAG,wBAAwB,IAC3E,IAAY,EAA4B,GAKxC,IAAqB,KAAgB,CAAC,KAAsB,CAAC,GAC7D,IAAO,GAAkB;AAK/B,MAAI,GAAkB,WAAW,CAAC,EAChC,QACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,GAAG,GAAG;AAAA,IACjB,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAO,GAAY,cAAoB,CAAA;AAAA,EAClC,CAAA;AAIX,MAAK,KAAc,CAAC,KAAiB,EACnC,QAAO,gBAAA,EAAC,GAAD,EAAW,SAAA,MAAA;AAAe,IAAK,EAAU;AAAA,IAAI,CAAA;AAItD,MAAI,CAAC,KAAgB,CAAC,KAAkB,CAAC,KAAsB,CAAC,EAAM,QAAO,gBAAA,EAAC,GAAD,CAAS,CAAA;AAEtF,QAAM,IAAc,EAClB,EAAQ,qBAAqB,IAAA,CAAK,OAAa;AAAA,IAC7C,QAAQ,EAA0B,GAAS,EAAO,qCAAqC;AAAA,IACvF,KAAK,EAAQ;AAAA,IAEb,SACE,gBAAA,EAAC,GAAD;AAAA,MAAiB,KAAI;AAAA,MAAG,iBAAiB,EAAQ,oBAAoB;AAAA,MAAI,MAAM;AAAA,IAAK,CAAA;AAAA,IAEtF,MAAM,EAAsB,CAAO;AAAA,EACrC,EAAE,GACF;AAAA,IAAE,OAAO,EAAK;AAAA,IAAgB,KAAK,EAAK;AAAA,EAAmB,GAC3D,gBAAA,EAAC,GAAD;AAAA,IAAiB,KAAI;AAAA,IAAG,iBAAgB;AAAA,IAAG,SAAS;AAAA,IAA8B,MAAM;AAAA,EAAK,CAAA,CAC/F,GACM,IAAc,EAClB,EAAQ,sBAAsB,IAAA,CAAK,OAAa;AAAA,IAC9C,QAAQ,EAAQ;AAAA,IAChB,KAAK,GAAG,EAAQ,wBAAA,IAA4B,EAAQ,aAAa,QAAQ,CAAA;AAAA,IACzE,SACE,gBAAA,EAAC,GAAD;AAAA,MAAc,cAAc,EAAwB,EAAQ,YAAY;AAAA,MAAG,MAAM;AAAA,IAAK,CAAA;AAAA,IAExF,MAAM,EAAQ;AAAA,EAChB,EAAE,GACF;AAAA,IAAE,OAAO,EAAK;AAAA,IAAgB,KAAK,EAAK;AAAA,EAAmB,GAC3D,gBAAA,EAAC,GAAD;AAAA,IAAc,cAAc,EAAc;AAAA,IAAe,MAAM;AAAA,EAAK,CAAA,CACtE;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,UAAU;AAAA,MAAE,QAAQ,EAAK;AAAA,MAAiB,MAAM;AAAA,IAAY;AAAA,IAC5D,UAAU;AAAA,MAAE,QAAQ,EAAK;AAAA,MAA2B,MAAM;AAAA,IAAY;AAAA,IACtE,SAAS;AAAA,MACP,WAAW,EAAQ,oBACf;AAAA,QACE,QAAQ,EAAQ;AAAA,QAChB,SAAS,EAAW,GAAM,EAAQ,mBAAmB;AAAA,MACvD,IACA;AAAA,MACJ,YAAY,EAAQ;AAAA,MACpB,iBAAiB,EAAK;AAAA,MACtB,kBAAkB,EAAQ;AAAA,MAC1B,uBAAuB,EAAK;AAAA,IAC9B;AAAA,EACD,CAAA;AAEL,CAAC"}

package/dist/insights-v2/actionBlocks/RemainingCashBlock/RemainingCashContent.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export interface RemainingCashRow {
+    key: string;
+    name: string;
+    amount: number;
+    /** The row's 32px logo: an account's institution or an expense's category. */
+    leading: ReactNode;
+}
+interface RemainingCashSectionProps {
+    header: string;
+    /** Already grouped and ordered, including any "Other (#)" row. */
+    rows: RemainingCashRow[];
+}
+interface RemainingCashSummaryProps {
+    /** Omitted when there is no upcoming payday: a "remaining until payday" figure has no meaning. */
+    remaining?: {
+        amount: number;
+        caption: string;
+    };
+    cashOnHand: number;
+    upcomingExpenses: number;
+    cashOnHandLabel: string;
+    upcomingExpensesLabel: string;
+}
+export interface RemainingCashContentProps {
+    summary: RemainingCashSummaryProps;
+    accounts: RemainingCashSectionProps;
+    expenses: RemainingCashSectionProps;
+}
+/** Presentational body of the Remaining Cash drawer (Figma 9936:39163, minus the drawer header). */
+declare const RemainingCashContent: ({ accounts, expenses, summary }: RemainingCashContentProps) => import("react/jsx-runtime").JSX.Element;
+export default RemainingCashContent;

package/dist/insights-v2/actionBlocks/RemainingCashBlock/RemainingCashContent.es.js

@@ -0,0 +1,169 @@
+import { getLogoElevation as x } from "../../components/logoShadow.es.js";
+import { formatSignedCurrency as d } from "./layout.es.js";
+import { createElement as b } from "react";
+import i from "@mui/material/Stack";
+import { Text as a } from "@mxenabled/mxui";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import p from "@mui/material/Box";
+import s from "@mui/material/Divider";
+var h = ({ label: t, value: e }) => /* @__PURE__ */ n(i, {
+  sx: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 16,
+    minHeight: 44,
+    px: 24
+  },
+  children: [/* @__PURE__ */ r(a, {
+    sx: { flexGrow: 1 },
+    variant: "body1",
+    children: t
+  }), /* @__PURE__ */ r(a, {
+    bold: !0,
+    sx: { fontVariantNumeric: "tabular-nums" },
+    variant: "body1",
+    children: e
+  })]
+}), u = ({ cashOnHand: t, cashOnHandLabel: e, remaining: o, upcomingExpenses: l, upcomingExpensesLabel: c }) => /* @__PURE__ */ r(i, {
+  sx: {
+    pb: 8,
+    pt: 24,
+    px: 24
+  },
+  children: /* @__PURE__ */ n(i, {
+    sx: {
+      bgcolor: "background.paper",
+      borderRadius: "8px",
+      boxShadow: x,
+      gap: 16,
+      p: 16
+    },
+    children: [o && /* @__PURE__ */ n(i, {
+      "aria-label": `${d(o.amount)}, ${o.caption}`,
+      role: "group",
+      sx: {
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: 72,
+        p: 12
+      },
+      children: [/* @__PURE__ */ r(a, {
+        "aria-hidden": !0,
+        bold: !0,
+        component: "p",
+        variant: "h2",
+        children: d(o.amount)
+      }), /* @__PURE__ */ r(a, {
+        "aria-hidden": !0,
+        color: "text.secondary",
+        variant: "subtitle2",
+        children: o.caption
+      })]
+    }), /* @__PURE__ */ n(i, {
+      sx: {
+        border: "1px solid",
+        borderColor: "divider",
+        borderRadius: "8px",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ r(h, {
+          label: e,
+          value: d(t)
+        }),
+        /* @__PURE__ */ r(s, {}),
+        /* @__PURE__ */ r(h, {
+          label: c,
+          value: d(-l)
+        })
+      ]
+    })]
+  })
+}), f = ({ amount: t, isLast: e, leading: o, name: l }) => /* @__PURE__ */ n(p, {
+  component: "li",
+  sx: { position: "relative" },
+  children: [/* @__PURE__ */ n(i, {
+    sx: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: 16,
+      px: 24,
+      py: 14
+    },
+    children: [/* @__PURE__ */ n(i, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        flexGrow: 1,
+        gap: 12,
+        minWidth: 0
+      },
+      children: [/* @__PURE__ */ r(p, {
+        sx: {
+          display: "flex",
+          flexShrink: 0,
+          height: 32,
+          width: 32
+        },
+        children: o
+      }), /* @__PURE__ */ r(a, {
+        truncate: !0,
+        variant: "body1",
+        children: l
+      })]
+    }), /* @__PURE__ */ r(a, {
+      bold: !0,
+      sx: {
+        flexShrink: 0,
+        fontVariantNumeric: "tabular-nums"
+      },
+      variant: "body1",
+      children: d(t)
+    })]
+  }), /* @__PURE__ */ r(s, { sx: {
+    bottom: 0,
+    left: e ? 0 : 24,
+    position: "absolute",
+    right: 0
+  } })]
+}), m = ({ header: t, rows: e }) => /* @__PURE__ */ n(i, { children: [/* @__PURE__ */ r(p, {
+  sx: {
+    pb: 4,
+    pt: 16,
+    px: 24
+  },
+  children: /* @__PURE__ */ r(a, {
+    bold: !0,
+    component: "h3",
+    variant: "body1",
+    children: t
+  })
+}), /* @__PURE__ */ r(i, {
+  component: "ul",
+  sx: {
+    bgcolor: "background.paper",
+    listStyle: "none",
+    m: 0,
+    p: 0
+  },
+  children: e.map(({ key: o, ...l }, c) => /* @__PURE__ */ b(f, {
+    ...l,
+    isLast: c === e.length - 1,
+    key: o
+  }))
+})] }), R = ({ accounts: t, expenses: e, summary: o }) => /* @__PURE__ */ n(i, {
+  sx: {
+    bgcolor: "background.default",
+    pb: 24
+  },
+  children: [
+    /* @__PURE__ */ r(u, { ...o }),
+    t.rows.length > 0 && /* @__PURE__ */ r(m, { ...t }),
+    e.rows.length > 0 && /* @__PURE__ */ r(m, { ...e })
+  ]
+});
+export {
+  R as default
+};
+
+//# sourceMappingURL=RemainingCashContent.es.js.map