@mx-cartographer/experiences 9.4.7 → 9.4.8

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [9.4.8] - 08-27-2026
+
+- **ADDED** - insights-v2 Action Block drilldowns: shared `ActionBlockLayer` owns a single drawer, content-only blocks register in `mappings/blocks.ts` keyed by the beat CTA's `block` (WEC-1705)
+- **ADDED** - `MakeTransferActionBlock` drilldown with `SaveAnExtra100` / `SaveEnoughToLiveOn` variants; per-variant layout (sections, tables, copy keys, data keys) driven by `actionBlocks/MakeTransferActionBlock/layout.ts`; variant-specific, localized drawer titles from `insights_feed.make_transfer` copy (WEC-1705)
+- **ADDED** - `SaveExtraBlock` component block rendering the shared `SaveAnExtraCard` from the beat's `primary_text` / `secondary_text` segments (WEC-1705)
+- **ADDED** - CTA drawer gating: a CTA without a `block` opens nothing (reserved for postMessage), an unknown block shows the error drawer, a matching block opens its drilldown (WEC-1705)
+- **CHANGED** - Moved ActionBlock from `blocks/ComponentBlocks/ActionBlock` to `src/insights-v2/actionBlocks`; drilldown figures/copy now sourced from `insights_payload.instance_slot_data` (WEC-1705)
+- **CHANGED** - `InsightsV2Store.closeActionDrawer` preserves `trigger` so the drawer keeps its title/content through the slide-out animation (WEC-1705)
+- **FIXED** - Action drawer first-open animation: `ActionBlockLayer` stays mounted for null-block CTAs so the slide-in transition plays on the first open (WEC-1705)
+
 ## [9.4.7] - 08-27-2026
 
 - **ADDED** - `CategoryTransactionsBlock` component block supporting `SameHeaderDesign` variant for single fee and large transactions in Insights v2 (MEW2-3237)

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

@@ -1,5 +1,5 @@
-import { makeAutoObservable as i } from "mobx";
-var e = {
+import { makeAutoObservable as t } from "mobx";
+var i = {
   chartBarIndex: 0,
   tabIndex: 0,
   isDrawerOpen: !1,
@@ -7,9 +7,9 @@ var e = {
   guid: ""
 }, n = class {
   globalStore;
-  actionDrawer = e;
+  actionDrawer = i;
   constructor(r) {
-    this.globalStore = r, i(this);
+    this.globalStore = r, t(this);
   }
   openCtaDrawer = (r, a) => {
     this.actionDrawer = {
@@ -20,21 +20,25 @@ var e = {
       guid: r
     };
   };
-  openChartDrilldown = (r, { chartBarIndex: a, tabIndex: t }) => {
+  openChartDrilldown = (r, { chartBarIndex: a, tabIndex: e }) => {
     this.actionDrawer = {
       chartBarIndex: a,
-      tabIndex: t ?? 0,
+      tabIndex: e ?? 0,
       isDrawerOpen: !0,
       trigger: "chartBar",
       guid: r
     };
   };
   closeActionDrawer = () => {
-    this.actionDrawer = e;
+    this.actionDrawer = {
+      ...this.actionDrawer,
+      isDrawerOpen: !1,
+      guid: ""
+    };
   };
 };
 export {
-  e as CLOSED_ACTION_DRAWER,
+  i as CLOSED_ACTION_DRAWER,
   n as InsightsV2Store
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"InsightsV2Store.es.js","names":[],"sources":["../../../src/core/stores/InsightsV2Store.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\n\nimport type { DrilldownPayload } from '../types'\n\nimport type { GlobalStore } from './GlobalStore'\n\nexport type ActionDrawerTrigger = 'primaryCta' | 'secondaryCta' | 'chartBar'\n\nexport interface ActionDrawerState {\n  isDrawerOpen: boolean\n  trigger: ActionDrawerTrigger\n  chartBarIndex: number\n  tabIndex: number\n  guid: string\n}\n\nexport const CLOSED_ACTION_DRAWER: ActionDrawerState = {\n  chartBarIndex: 0,\n  tabIndex: 0,\n  isDrawerOpen: false,\n  trigger: 'primaryCta',\n  guid: '',\n}\n\n/**\n * UI state shared across the insights-v2 widget tree. Owns the action drawer\n * so cards, charts, and action blocks coordinate through the store instead of\n * prop drilling.\n */\nexport class InsightsV2Store {\n  globalStore: GlobalStore\n\n  actionDrawer: ActionDrawerState = CLOSED_ACTION_DRAWER\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n\n    makeAutoObservable(this)\n  }\n\n  openCtaDrawer = (guid: string, trigger: 'primaryCta' | 'secondaryCta') => {\n    this.actionDrawer = {\n      chartBarIndex: 0,\n      tabIndex: 0,\n      isDrawerOpen: true,\n      trigger,\n      guid,\n    }\n  }\n\n  openChartDrilldown = (guid: string, { chartBarIndex, tabIndex }: DrilldownPayload) => {\n    this.actionDrawer = {\n      chartBarIndex,\n      tabIndex: tabIndex ?? 0,\n      isDrawerOpen: true,\n      trigger: 'chartBar',\n      guid,\n    }\n  }\n\n  closeActionDrawer = () => {\n    this.actionDrawer = CLOSED_ACTION_DRAWER\n  }\n}\n"],"mappings":";AAgBA,IAAa,IAA0C;AAAA,EACrD,eAAe;AAAA,EACf,UAAU;AAAA,EACV,cAAc;AAAA,EACd,SAAS;AAAA,EACT,MAAM;AACR,GAOa,IAAb,MAA6B;AAAA,EAC3B;AAAA,EAEA,eAAkC;AAAA,EAElC,YAAY,GAA0B;AACpC,SAAK,cAAc,GAEnB,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,gBAAA,CAAiB,GAAc,MAA2C;AACxE,SAAK,eAAe;AAAA,MAClB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,cAAc;AAAA,MACd,SAAA;AAAA,MACA,MAAA;AAAA,IACF;AAAA,EACF;AAAA,EAEA,qBAAA,CAAsB,GAAc,EAAE,eAAA,GAAe,UAAA,EAAA,MAAiC;AACpF,SAAK,eAAe;AAAA,MAClB,eAAA;AAAA,MACA,UAAU,KAAY;AAAA,MACtB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,MAAA;AAAA,IACF;AAAA,EACF;AAAA,EAEA,oBAAA,MAA0B;AACxB,SAAK,eAAe;AAAA,EACtB;AACF"}
+{"version":3,"file":"InsightsV2Store.es.js","names":[],"sources":["../../../src/core/stores/InsightsV2Store.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\n\nimport type { DrilldownPayload } from '../types'\n\nimport type { GlobalStore } from './GlobalStore'\n\nexport type ActionDrawerTrigger = 'primaryCta' | 'secondaryCta' | 'chartBar'\n\nexport interface ActionDrawerState {\n  isDrawerOpen: boolean\n  trigger: ActionDrawerTrigger\n  chartBarIndex: number\n  tabIndex: number\n  guid: string\n}\n\nexport const CLOSED_ACTION_DRAWER: ActionDrawerState = {\n  chartBarIndex: 0,\n  tabIndex: 0,\n  isDrawerOpen: false,\n  trigger: 'primaryCta',\n  guid: '',\n}\n\n/**\n * UI state shared across the insights-v2 widget tree. Owns the action drawer\n * so cards, charts, and action blocks coordinate through the store instead of\n * prop drilling.\n */\nexport class InsightsV2Store {\n  globalStore: GlobalStore\n\n  actionDrawer: ActionDrawerState = CLOSED_ACTION_DRAWER\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n\n    makeAutoObservable(this)\n  }\n\n  openCtaDrawer = (guid: string, trigger: 'primaryCta' | 'secondaryCta') => {\n    this.actionDrawer = {\n      chartBarIndex: 0,\n      tabIndex: 0,\n      isDrawerOpen: true,\n      trigger,\n      guid,\n    }\n  }\n\n  openChartDrilldown = (guid: string, { chartBarIndex, tabIndex }: DrilldownPayload) => {\n    this.actionDrawer = {\n      chartBarIndex,\n      tabIndex: tabIndex ?? 0,\n      isDrawerOpen: true,\n      trigger: 'chartBar',\n      guid,\n    }\n  }\n\n  closeActionDrawer = () => {\n    // Preserve `trigger` so the drawer keeps its variant-specific title/content\n    // through the slide-out animation (ActionBlockLayer stays mounted while\n    // closing). Only flip isDrawerOpen off and clear the beat guid.\n    this.actionDrawer = { ...this.actionDrawer, isDrawerOpen: false, guid: '' }\n  }\n}\n"],"mappings":";AAgBA,IAAa,IAA0C;AAAA,EACrD,eAAe;AAAA,EACf,UAAU;AAAA,EACV,cAAc;AAAA,EACd,SAAS;AAAA,EACT,MAAM;AACR,GAOa,IAAb,MAA6B;AAAA,EAC3B;AAAA,EAEA,eAAkC;AAAA,EAElC,YAAY,GAA0B;AACpC,SAAK,cAAc,GAEnB,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,gBAAA,CAAiB,GAAc,MAA2C;AACxE,SAAK,eAAe;AAAA,MAClB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,cAAc;AAAA,MACd,SAAA;AAAA,MACA,MAAA;AAAA,IACF;AAAA,EACF;AAAA,EAEA,qBAAA,CAAsB,GAAc,EAAE,eAAA,GAAe,UAAA,EAAA,MAAiC;AACpF,SAAK,eAAe;AAAA,MAClB,eAAA;AAAA,MACA,UAAU,KAAY;AAAA,MACtB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,MAAA;AAAA,IACF;AAAA,EACF;AAAA,EAEA,oBAAA,MAA0B;AAIxB,SAAK,eAAe;AAAA,MAAE,GAAG,KAAK;AAAA,MAAc,cAAc;AAAA,MAAO,MAAM;AAAA,IAAG;AAAA,EAC5E;AACF"}

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

@@ -63,10 +63,12 @@ export interface Description {
 export interface PrimaryCTA {
     label: string;
     block: string;
+    variant?: string | null;
 }
 export interface SecondaryCTA {
     label: string;
     block: string;
+    variant?: string | null;
 }
 export interface Footer {
     date: string;

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

@@ -1,6 +1,6 @@
 import { DataSeries, Legends } from '../../core';
 import { Transaction } from './Transaction';
-export interface InsightsInstanceSlotData extends Partial<BarChartBlockData>, Partial<BudgetBlockData>, Partial<DonutChartBlockData>, Partial<DoubleProgressBarBlockData>, Partial<ImageBlockData>, Partial<AccountBlockData>, Partial<StepChartBlockData>, Partial<SVGImageBlockData>, Partial<CategoryTransactionsBlockData>, Partial<CommonProps> {
+export interface InsightsInstanceSlotData extends Partial<BarChartBlockData>, Partial<BudgetBlockData>, Partial<DonutChartBlockData>, Partial<DoubleProgressBarBlockData>, Partial<ImageBlockData>, Partial<AccountBlockData>, Partial<SaveExtraBlockData>, Partial<StepChartBlockData>, Partial<SVGImageBlockData>, Partial<CategoryTransactionsBlockData>, Partial<CommonProps> {
 }
 interface CommonProps {
     amount?: number;
@@ -62,6 +62,24 @@ export interface AccountBlockData {
     /** Secondary label beside the amount, e.g. `On {date}, you saved` or `Balance as of MM/DD/YY`. */
     label?: string;
 }
+export interface SaveExtraBlockData {
+    /** Styled segments `[lead-in, amount digits, trailing copy]`, e.g. `['Save an extra', '100', 'to help your funds grow']`. */
+    primary_text?: string[];
+    /** Styled segments `[projected balance, caption]`, e.g. `['$8,313.87', 'After payday & projected expenses']`. */
+    secondary_text?: string[];
+    /** MakeTransfer drilldown: available balance (both variants). */
+    available_balance?: number;
+    /** SAVE_ENOUGH_TO_LIVE_ON: average monthly spend. */
+    avg_monthly_spend?: number;
+    /** SAVE_ENOUGH_TO_LIVE_ON: how long the balance lasts, overlaid on the timeline SVG (e.g. "2 months, 11 days"). */
+    time_period?: string;
+    /** SAVE_AN_EXTRA_100: upcoming expenses (the "Expenses" figure). */
+    upcoming_expenses?: number;
+    /** SAVE_AN_EXTRA_100: total remaining after expenses. */
+    total_remaining?: number;
+    /** SAVE_ENOUGH_TO_LIVE_ON: date for the "Your available balances as of {date}" line. */
+    date?: string;
+}
 export interface StepChartBlockData {
     completed_steps: number;
     label_1: string;

package/dist/core/types/InsightsInstanceSlotData.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsightsInstanceSlotData.es.js","names":[],"sources":["../../../src/core/types/InsightsInstanceSlotData.ts"],"sourcesContent":["import type { DataSeries, Legends } from '../../core'\nimport type { Transaction } from './Transaction'\n\nexport interface InsightsInstanceSlotData\n  extends\n    Partial<BarChartBlockData>,\n    Partial<BudgetBlockData>,\n    Partial<DonutChartBlockData>,\n    Partial<DoubleProgressBarBlockData>,\n    Partial<ImageBlockData>,\n    Partial<AccountBlockData>,\n    Partial<StepChartBlockData>,\n    Partial<SVGImageBlockData>,\n    Partial<CategoryTransactionsBlockData>,\n    Partial<CommonProps> {}\n\n//when any of the type is used more than one times, we can use the common props\ninterface CommonProps {\n  amount?: number\n  legends?: (Legends | LegendProps)[]\n  category_guid?: string\n  data_series?: DataSeries | DataSet[]\n}\n\n//BarChart Block\nexport interface BarChartBlockData {\n  average_amount?: number\n  ariaLabel?: string\n}\n\n//DonutChart Block\ninterface Main {\n  value: string\n  value_type: string\n  label: string\n}\nexport interface DonutChartBlockData {\n  main: Main\n}\n\n//DoubleBarChart Block\n// TODO : This has to be revisited again to update the below types based on API response once we have the final shape of the data_series for double bar chart from BE\nexport interface LegendProps extends Legends {\n  amount: number\n  formattedAmount: string\n  label: string\n  color?: string\n}\n\nexport interface DataSet extends DataSeries {\n  ariaLabelComparison: string\n  ariaLabelMain: string\n  comparison: number\n  formattedComparison: string\n  formattedMain: string\n  label: string\n  main: number\n}\n\n//DoubleProgressBar Block\n\ninterface DoubleProgressBarProps {\n  label: string\n  value: number\n}\nexport interface DoubleProgressBarBlockData {\n  doubleProgressBar: {\n    previous: DoubleProgressBarProps\n    latest: DoubleProgressBarProps\n  }\n}\n\n//Image Block\nexport interface ImageBlockData {\n  image: string\n}\n\n//Account Block\nexport interface AccountBlockData {\n  sub_text: string\n  institution_guid?: string\n  institution_name?: string\n  icon_name?: string\n  /** Header bar text (standard card), or the colored category strip label (deposit cards). */\n  header_text?: string\n  // Deposit variants (Unified Deposit, Unified Deposit Emergency Fund, Savings Account Deposit)\n  /** Merchant guid — renders a real merchant logo in the deposit card when present. */\n  merchant_guid?: string\n  /** Merchant display name — logo alt text and the payer line under the amount. */\n  merchant_name?: string\n  /** Secondary label beside the amount, e.g. `On {date}, you saved` or `Balance as of MM/DD/YY`. */\n  label?: string\n}\n\n// StepChart Block\nexport interface StepChartBlockData {\n  completed_steps: number\n  label_1: string\n  label_2?: string\n}\n\n//Budgets Blocks\nexport enum BudgetTierType {\n  LOW_BUDGET_TIER = 'LOW',\n  MEDIUM_BUDGET_TIER = 'MEDIUM',\n  OFF_TRACK_BUDGET_TIER = 'OFF_TRACK',\n}\n\nexport type BudgetTierValue = `${BudgetTierType}`\n\nexport interface BudgetLocalizedPayload {\n  primary_text?: string\n  amount_left_label?: string\n  spent_label?: string\n  budgeted_label?: string\n}\n\nexport interface BudgetBlockData {\n  budget_percent: number\n  budget_tier: BudgetTierValue\n  category_guid?: string\n  merchant_guid?: string\n  spent_amount: number\n  budgeted_amount: number\n  localized_payload: BudgetLocalizedPayload\n}\n\nexport interface SVGImageBlockData {\n  isCIBC?: boolean\n}\n\nexport type InsightTransaction = Pick<Transaction, 'amount'> &\n  Partial<Pick<Transaction, 'category_guid' | 'date' | 'description' | 'merchant_guid'>> & {\n    merchant_name?: string\n  }\n\nexport interface CategoryTransactionsBlockData {\n  primary_transaction?: InsightTransaction\n}\n"],"mappings":"AAsGA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,kBAAA,OACA,EAAA,qBAAA,UACA,EAAA,wBAAA;AACF,GAAA,CAAA,CAAA"}
+{"version":3,"file":"InsightsInstanceSlotData.es.js","names":[],"sources":["../../../src/core/types/InsightsInstanceSlotData.ts"],"sourcesContent":["import type { DataSeries, Legends } from '../../core'\nimport type { Transaction } from './Transaction'\n\nexport interface InsightsInstanceSlotData\n  extends\n    Partial<BarChartBlockData>,\n    Partial<BudgetBlockData>,\n    Partial<DonutChartBlockData>,\n    Partial<DoubleProgressBarBlockData>,\n    Partial<ImageBlockData>,\n    Partial<AccountBlockData>,\n    Partial<SaveExtraBlockData>,\n    Partial<StepChartBlockData>,\n    Partial<SVGImageBlockData>,\n    Partial<CategoryTransactionsBlockData>,\n    Partial<CommonProps> {}\n\n//when any of the type is used more than one times, we can use the common props\ninterface CommonProps {\n  amount?: number\n  legends?: (Legends | LegendProps)[]\n  category_guid?: string\n  data_series?: DataSeries | DataSet[]\n}\n\n//BarChart Block\nexport interface BarChartBlockData {\n  average_amount?: number\n  ariaLabel?: string\n}\n\n//DonutChart Block\ninterface Main {\n  value: string\n  value_type: string\n  label: string\n}\nexport interface DonutChartBlockData {\n  main: Main\n}\n\n//DoubleBarChart Block\n// TODO : This has to be revisited again to update the below types based on API response once we have the final shape of the data_series for double bar chart from BE\nexport interface LegendProps extends Legends {\n  amount: number\n  formattedAmount: string\n  label: string\n  color?: string\n}\n\nexport interface DataSet extends DataSeries {\n  ariaLabelComparison: string\n  ariaLabelMain: string\n  comparison: number\n  formattedComparison: string\n  formattedMain: string\n  label: string\n  main: number\n}\n\n//DoubleProgressBar Block\n\ninterface DoubleProgressBarProps {\n  label: string\n  value: number\n}\nexport interface DoubleProgressBarBlockData {\n  doubleProgressBar: {\n    previous: DoubleProgressBarProps\n    latest: DoubleProgressBarProps\n  }\n}\n\n//Image Block\nexport interface ImageBlockData {\n  image: string\n}\n\n//Account Block\nexport interface AccountBlockData {\n  sub_text: string\n  institution_guid?: string\n  institution_name?: string\n  icon_name?: string\n  /** Header bar text (standard card), or the colored category strip label (deposit cards). */\n  header_text?: string\n  // Deposit variants (Unified Deposit, Unified Deposit Emergency Fund, Savings Account Deposit)\n  /** Merchant guid — renders a real merchant logo in the deposit card when present. */\n  merchant_guid?: string\n  /** Merchant display name — logo alt text and the payer line under the amount. */\n  merchant_name?: string\n  /** Secondary label beside the amount, e.g. `On {date}, you saved` or `Balance as of MM/DD/YY`. */\n  label?: string\n}\n\nexport interface SaveExtraBlockData {\n  /** Styled segments `[lead-in, amount digits, trailing copy]`, e.g. `['Save an extra', '100', 'to help your funds grow']`. */\n  primary_text?: string[]\n  /** Styled segments `[projected balance, caption]`, e.g. `['$8,313.87', 'After payday & projected expenses']`. */\n  secondary_text?: string[]\n  /** MakeTransfer drilldown: available balance (both variants). */\n  available_balance?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: average monthly spend. */\n  avg_monthly_spend?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: how long the balance lasts, overlaid on the timeline SVG (e.g. \"2 months, 11 days\"). */\n  time_period?: string\n  /** SAVE_AN_EXTRA_100: upcoming expenses (the \"Expenses\" figure). */\n  upcoming_expenses?: number\n  /** SAVE_AN_EXTRA_100: total remaining after expenses. */\n  total_remaining?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: date for the \"Your available balances as of {date}\" line. */\n  date?: string\n}\n\n// StepChart Block\nexport interface StepChartBlockData {\n  completed_steps: number\n  label_1: string\n  label_2?: string\n}\n\n//Budgets Blocks\nexport enum BudgetTierType {\n  LOW_BUDGET_TIER = 'LOW',\n  MEDIUM_BUDGET_TIER = 'MEDIUM',\n  OFF_TRACK_BUDGET_TIER = 'OFF_TRACK',\n}\n\nexport type BudgetTierValue = `${BudgetTierType}`\n\nexport interface BudgetLocalizedPayload {\n  primary_text?: string\n  amount_left_label?: string\n  spent_label?: string\n  budgeted_label?: string\n}\n\nexport interface BudgetBlockData {\n  budget_percent: number\n  budget_tier: BudgetTierValue\n  category_guid?: string\n  merchant_guid?: string\n  spent_amount: number\n  budgeted_amount: number\n  localized_payload: BudgetLocalizedPayload\n}\n\nexport interface SVGImageBlockData {\n  isCIBC?: boolean\n}\n\nexport type InsightTransaction = Pick<Transaction, 'amount'> &\n  Partial<Pick<Transaction, 'category_guid' | 'date' | 'description' | 'merchant_guid'>> & {\n    merchant_name?: string\n  }\n\nexport interface CategoryTransactionsBlockData {\n  primary_transaction?: InsightTransaction\n}\n"],"mappings":"AA0HA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,kBAAA,OACA,EAAA,qBAAA,UACA,EAAA,wBAAA;AACF,GAAA,CAAA,CAAA"}

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

@@ -30,8 +30,27 @@ interface SettingsMenuCopy {
     unselect_all: string;
     unselect_insight: string;
 }
+export interface MakeTransferCopy {
+    save_extra_title: string;
+    save_enough_title: string;
+    header_content: string;
+    description: string;
+    body_spending_content: string;
+    body_spending_description: string;
+    body_saving_content: string;
+    body_saving_description: string;
+    available_text: string;
+    total_remaining_text: string;
+    expenses_text: string;
+    available_balances_text: string;
+    average_monthly_spend_text: string;
+    your_available_balances_text: string;
+    increment_aria_label: string;
+    decrement_aria_label: string;
+}
 export interface InsightsFeedCopy {
     general: GeneralInsightsFeedCopy;
     settings_menu: SettingsMenuCopy;
+    make_transfer: MakeTransferCopy;
 }
 export {};

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 } from './InsightsFeedCopy';
+export type { InsightsFeedCopy, MakeTransferCopy } from './InsightsFeedCopy';
 export type { InvestmentsCopy } from './InvestmentsCopy';
 export type { MicroInsightsCopy } from './MicroInsightsCopy';
 export type { NetWorthCopy } from './NetWorthCopy';

package/dist/insights-v2/{blocks/ComponentBlocks/ActionBlock → actionBlocks}/ActionBlockLayer.d.ts

@@ -1,4 +1,4 @@
-import { Beat } from '../../../../core';
+import { Beat } from '../../core';
 interface ActionBlockLayerProps {
     beat: Beat;
 }

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

@@ -0,0 +1,35 @@
+import { useGlobalCopyStore as y, useGlobalUiStore as k, useInsightsV2Store as g } from "../../common/context/hooks.es.js";
+import C from "../../common/components/drawer/Drawer.es.js";
+import h from "../../common/components/Loader.es.js";
+import { actionBlocks as B, hasDrawerBlock as _ } from "../mappings/blocks.es.js";
+import { observer as b } from "mobx-react-lite";
+import w from "@mui/material/Stack";
+import { Text as v } from "@mxenabled/mxui";
+import { jsx as e } from "react/jsx-runtime";
+var D = ({ actionBlock: l, ...o }) => {
+  const { Component: n, usePrepare: t } = l;
+  return t(o), /* @__PURE__ */ e(n, { ...o });
+}, j = b(function({ beat: o }) {
+  const n = y(), t = n.common, { isCopyLoaded: m } = k(), { actionDrawer: c, closeActionDrawer: p } = g(), s = c.isDrawerOpen && c.guid === o.guid;
+  if (!m) return s ? /* @__PURE__ */ e(h, {}) : null;
+  if (!o.insights_payload) return null;
+  const { primary_cta: u, secondary_cta: d } = o.insights_payload, r = c.trigger === "secondaryCta" ? d : u, a = _(r?.block), i = a ? B[r?.block] : void 0, f = i ? i.title?.(r?.variant, n) ?? r?.label ?? "" : a ? t.error_heading : r?.label ?? "";
+  return /* @__PURE__ */ e(C, {
+    ariaLabelClose: t.close_aria,
+    isOpen: s,
+    onClose: p,
+    title: f,
+    children: i ? /* @__PURE__ */ e(D, {
+      actionBlock: i,
+      beat: o
+    }, r?.block) : a ? /* @__PURE__ */ e(w, {
+      sx: { p: 24 },
+      children: /* @__PURE__ */ e(v, { children: t.error_message })
+    }) : null
+  });
+});
+export {
+  j as ActionBlockLayer
+};
+
+//# sourceMappingURL=ActionBlockLayer.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBlockLayer.es.js","names":[],"sources":["../../../src/insights-v2/actionBlocks/ActionBlockLayer.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  Drawer,\n  Loader,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useInsightsV2Store,\n} from '../../common'\nimport { type Beat } from '../../core'\nimport {\n  actionBlocks,\n  hasDrawerBlock,\n  type ActionBlockEntry,\n  type ActionBlockProps,\n} from '../mappings/blocks'\n\ninterface ActionBlockLayerProps {\n  beat: Beat\n}\n\n/**\n * Renders a registered action block. Callers MUST key this per block name — a\n * block with `usePrepare` and one without run a different number of hooks, so\n * reusing the same fiber across a block switch violates the rules of hooks.\n */\nconst ActionBlockRunner = ({\n  actionBlock,\n  ...blockProps\n}: ActionBlockProps & { actionBlock: ActionBlockEntry }) => {\n  const { Component, usePrepare } = actionBlock\n\n  usePrepare(blockProps)\n\n  return <Component {...blockProps} />\n}\n\n// `observer` is required: this reads `isCopyLoaded` off GlobalUiStore and the\n// action drawer off InsightsV2Store. Without it the component never re-renders\n// and stays stuck on <Loader /> forever.\nexport const ActionBlockLayer = observer(function ActionBlockLayer({\n  beat,\n}: ActionBlockLayerProps) {\n  const copy = useGlobalCopyStore()\n  const commonCopy = copy.common\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { actionDrawer, closeActionDrawer } = useInsightsV2Store()\n\n  // Every card in the feed renders its own layer against the shared store, so\n  // this card's drawer only opens when its beat is the one that triggered it.\n  const isCurrentBeatOpen = actionDrawer.isDrawerOpen && actionDrawer.guid === beat.guid\n\n  if (!isCopyLoaded) return isCurrentBeatOpen ? <Loader /> : null\n\n  // Mirrors BaseLayout's guard — the layer is exported, so callers are not\n  // guaranteed to have narrowed this already.\n  if (!beat.insights_payload) return null\n\n  const { primary_cta, secondary_cta } = beat.insights_payload\n\n  const currentCta = actionDrawer.trigger === 'secondaryCta' ? secondary_cta : primary_cta\n\n  // A CTA without a real block never opens a drawer (BaseLayout won't trigger it);\n  // a real-but-unknown block shows the error (\"oops\") content.\n  const blockValid = hasDrawerBlock(currentCta?.block)\n  const actionBlock = blockValid\n    ? actionBlocks[currentCta?.block as keyof typeof actionBlocks]\n    : undefined\n\n  const drawerTitle = actionBlock\n    ? (actionBlock.title?.(currentCta?.variant, copy) ?? currentCta?.label ?? '')\n    : blockValid\n      ? commonCopy.error_heading\n      : (currentCta?.label ?? '')\n\n  return (\n    <Drawer\n      ariaLabelClose={commonCopy.close_aria}\n      isOpen={isCurrentBeatOpen}\n      onClose={closeActionDrawer}\n      title={drawerTitle}\n    >\n      {actionBlock ? (\n        <ActionBlockRunner actionBlock={actionBlock} beat={beat} key={currentCta?.block} />\n      ) : blockValid ? (\n        <Stack sx={{ p: 24 }}>\n          <Text>{commonCopy.error_message}</Text>\n        </Stack>\n      ) : null}\n    </Drawer>\n  )\n})\n"],"mappings":";;;;;;;;AA6BA,IAAM,IAAA,CAAqB,EACzB,aAAA,GACA,GAAG,EAAA,MACuD;AAC1D,QAAM,EAAE,WAAA,GAAW,YAAA,EAAA,IAAe;AAElC,SAAA,EAAW,CAAU,GAEd,gBAAA,EAAC,GAAD,EAAW,GAAI,EAAa,CAAA;AACrC,GAKa,IAAmB,EAAS,SAA0B,EACjE,MAAA,EAAA,GACwB;AACxB,QAAM,IAAO,EAAmB,GAC1B,IAAa,EAAK,QAClB,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,cAAA,GAAc,mBAAA,EAAA,IAAsB,EAAmB,GAIzD,IAAoB,EAAa,gBAAgB,EAAa,SAAS,EAAK;AAElF,MAAI,CAAC,EAAc,QAAO,IAAoB,gBAAA,EAAC,GAAD,CAAS,CAAA,IAAI;AAI3D,MAAI,CAAC,EAAK,iBAAkB,QAAO;AAEnC,QAAM,EAAE,aAAA,GAAa,eAAA,EAAA,IAAkB,EAAK,kBAEtC,IAAa,EAAa,YAAY,iBAAiB,IAAgB,GAIvE,IAAa,EAAe,GAAY,KAAK,GAC7C,IAAc,IAChB,EAAa,GAAY,KAAA,IACzB,QAEE,IAAc,IACf,EAAY,QAAQ,GAAY,SAAS,CAAI,KAAK,GAAY,SAAS,KACxE,IACE,EAAW,gBACV,GAAY,SAAS;AAE5B,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAW;AAAA,IAC3B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,IAEN,UAAA,IACC,gBAAA,EAAC,GAAD;AAAA,MAAgC,aAAA;AAAA,MAAmB,MAAA;AAAA,IAA+B,GAApB,GAAY,KAAQ,IAChF,IACF,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,GAAG,GAAG;AAAA,MACjB,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAO,EAAW,cAAoB,CAAA;AAAA,IACjC,CAAA,IACL;AAAA,EACE,CAAA;AAEZ,CAAC"}

package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/BalanceStepper.d.ts

@@ -0,0 +1,12 @@
+interface CopyContent {
+    decrement_aria_label?: string;
+    increment_aria_label?: string;
+}
+interface BalanceStepperProps {
+    amount: string;
+    onDecrement?: () => void;
+    onIncrement?: () => void;
+    copy: CopyContent;
+}
+export declare const BalanceStepper: ({ amount, onDecrement, onIncrement, copy }: BalanceStepperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/BalanceStepper.es.js

@@ -0,0 +1,58 @@
+import { Text as t } from "@mxenabled/mxui";
+import { Icon as i } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { IconButton as o, Stack as m } from "@mui/material";
+var b = ({ amount: a, onDecrement: l, onIncrement: n, copy: e }) => /* @__PURE__ */ d(m, {
+  sx: {
+    flexDirection: "row",
+    alignItems: "center",
+    border: "1px solid",
+    borderColor: "divider",
+    borderRadius: 1,
+    bgcolor: "background.paper",
+    flex: 1
+  },
+  children: [
+    /* @__PURE__ */ r(o, {
+      "aria-label": e.decrement_aria_label,
+      onClick: l,
+      sx: {
+        width: 44,
+        minHeight: 48
+      },
+      children: /* @__PURE__ */ r(i, {
+        name: "remove",
+        sx: { color: "primary.main" }
+      })
+    }),
+    /* @__PURE__ */ r(t, {
+      sx: {
+        p: 12,
+        flex: 1,
+        textAlign: "center",
+        borderLeft: "1px solid",
+        borderRight: "1px solid",
+        borderColor: "divider"
+      },
+      variant: "h3",
+      children: a
+    }),
+    /* @__PURE__ */ r(o, {
+      "aria-label": e.increment_aria_label,
+      onClick: n,
+      sx: {
+        width: 44,
+        minHeight: 48
+      },
+      children: /* @__PURE__ */ r(i, {
+        name: "add",
+        sx: { color: "primary.main" }
+      })
+    })
+  ]
+});
+export {
+  b as BalanceStepper
+};
+
+//# sourceMappingURL=BalanceStepper.es.js.map

package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/BalanceStepper.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceStepper.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/BalanceStepper.tsx"],"sourcesContent":["import { IconButton, Stack } from '@mui/material'\nimport { Icon } from '@mxenabled/mx-icons'\nimport { Text } from '@mxenabled/mxui'\n\ninterface CopyContent {\n  decrement_aria_label?: string\n  increment_aria_label?: string\n}\n\ninterface BalanceStepperProps {\n  amount: string\n  onDecrement?: () => void\n  onIncrement?: () => void\n  copy: CopyContent\n}\n\nexport const BalanceStepper = ({ amount, onDecrement, onIncrement, copy }: BalanceStepperProps) => {\n  return (\n    <Stack\n      sx={{\n        flexDirection: 'row',\n        alignItems: 'center',\n        border: '1px solid',\n        borderColor: 'divider',\n        borderRadius: 1,\n        bgcolor: 'background.paper',\n        flex: 1,\n      }}\n    >\n      <IconButton\n        aria-label={copy.decrement_aria_label}\n        onClick={onDecrement}\n        sx={{ width: 44, minHeight: 48 }}\n      >\n        <Icon name=\"remove\" sx={{ color: 'primary.main' }} />\n      </IconButton>\n      <Text\n        sx={{\n          p: 12,\n          flex: 1,\n          textAlign: 'center',\n          borderLeft: '1px solid',\n          borderRight: '1px solid',\n          borderColor: 'divider',\n        }}\n        variant=\"h3\"\n      >\n        {amount}\n      </Text>\n      <IconButton\n        aria-label={copy.increment_aria_label}\n        onClick={onIncrement}\n        sx={{ width: 44, minHeight: 48 }}\n      >\n        <Icon name=\"add\" sx={{ color: 'primary.main' }} />\n      </IconButton>\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAgBA,IAAa,IAAA,CAAkB,EAAE,QAAA,GAAQ,aAAA,GAAa,aAAA,GAAa,MAAA,EAAA,MAE/D,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,cAAc;AAAA,IACd,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EATF,UAAA;AAAA,IAWE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,EAAK;AAAA,MACjB,SAAS;AAAA,MACT,IAAI;AAAA,QAAE,OAAO;AAAA,QAAI,WAAW;AAAA,MAAG;AAAA,MAE/B,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAS,IAAI,EAAE,OAAO,eAAe;AAAA,MAAI,CAAA;AAAA,IAC1C,CAAA;AAAA,IACZ,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,GAAG;AAAA,QACH,MAAM;AAAA,QACN,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,MACA,SAAQ;AAAA,MAEP,UAAA;AAAA,IACG,CAAA;AAAA,IACN,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,EAAK;AAAA,MACjB,SAAS;AAAA,MACT,IAAI;AAAA,QAAE,OAAO;AAAA,QAAI,WAAW;AAAA,MAAG;AAAA,MAE/B,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAM,IAAI,EAAE,OAAO,eAAe;AAAA,MAAI,CAAA;AAAA,IACvC,CAAA;AAAA,EACP"}

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

@@ -0,0 +1,27 @@
+import { variants } from './layout';
+export { variants };
+interface CopyContent {
+    header_content?: string;
+    description?: string;
+    body_content?: string;
+    body_description?: string;
+    available_text?: string;
+    total_remaining_text?: string;
+    increment_aria_label?: string;
+    decrement_aria_label?: string;
+    expenses_text?: string;
+    available_balances_text?: string;
+    average_monthly_spend_text?: string;
+    your_available_balances_text?: string;
+}
+interface MakeTransferActionBlockProps {
+    date?: string;
+    variant: (typeof variants)[keyof typeof variants];
+    svgDateContent?: string;
+    availableBalances?: number;
+    copy: CopyContent;
+    averageMonthlySpend?: number;
+    /** SAVE_AN_EXTRA_100: total remaining from the payload; falls back to available − expenses. */
+    totalRemaining?: number;
+}
+export declare const MakeTransferActionBlock: ({ variant, svgDateContent, date, copy, availableBalances, averageMonthlySpend, totalRemaining, }: MakeTransferActionBlockProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,228 @@
+import { buildDynamicCopy as A } from "../../../core/utils/Localization.es.js";
+import { formatCurrency as l } from "../../../core/utils/NumberFormatting.es.js";
+import { BalanceStepper as C } from "./BalanceStepper.es.js";
+import I from "./SaveEnoughToLiveOnBottomSection.es.js";
+import { getMakeTransferLayout as y, variants as T } from "./layout.es.js";
+import x from "react";
+import { Text as e } from "@mxenabled/mxui";
+import { Icon as L } from "@mxenabled/mx-icons";
+import { Fragment as k, jsx as t, jsxs as r } from "react/jsx-runtime";
+import { Card as W, Divider as j, List as D, ListItem as E, Stack as n } from "@mui/material";
+var P = ({ variant: p = T.SAVE_ENOUGH_TO_LIVE_ON, svgDateContent: m, date: h, copy: i, availableBalances: c, averageMonthlySpend: o, totalRemaining: g }) => {
+  const a = y(p), { monthsTable: _, deltaAmount: u } = a, [f, d] = x.useState(a.initialAmount ?? o ?? 0);
+  return x.useEffect(() => {
+    a.initialAmount == null && o != null && d(o);
+  }, [o, a.initialAmount]), /* @__PURE__ */ r(k, { children: [
+    /* @__PURE__ */ r(n, {
+      sx: {
+        bgcolor: "background.paper",
+        p: 24,
+        borderBottom: "1px solid",
+        borderColor: "divider"
+      },
+      children: [a.showBalancesSection && c != null && o != null && m && /* @__PURE__ */ t(I, {
+        content: m || "",
+        leftLabel: i.available_balances_text,
+        leftValue: l(c, "0,0.00"),
+        rightLabel: i.average_monthly_spend_text,
+        rightValue: l(o, "0,0.00"),
+        sx: {
+          width: "100%",
+          mb: 24
+        }
+      }), /* @__PURE__ */ r(n, {
+        sx: { gap: 8 },
+        children: [/* @__PURE__ */ t(e, {
+          variant: "h3",
+          children: i.header_content
+        }), /* @__PURE__ */ t(e, {
+          sx: { lineHeight: "24px" },
+          truncate: !1,
+          variant: "body1",
+          children: i.description
+        })]
+      })]
+    }),
+    a.showRemainingCard && c != null && o != null && /* @__PURE__ */ t(n, {
+      sx: {
+        pt: 24,
+        px: 24
+      },
+      children: /* @__PURE__ */ r(W, {
+        sx: {
+          px: 16,
+          pt: 16,
+          pb: 12
+        },
+        children: [/* @__PURE__ */ r(n, {
+          sx: {
+            border: 1,
+            borderColor: "divider",
+            borderRadius: "4px",
+            gap: 12,
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            p: 8,
+            mb: 12
+          },
+          children: [
+            /* @__PURE__ */ r(n, {
+              sx: {
+                width: 155,
+                textAlign: "center"
+              },
+              children: [/* @__PURE__ */ t(e, {
+                sx: { fontWeight: 600 },
+                variant: "body1",
+                children: l(c, "0,0.00")
+              }), /* @__PURE__ */ t(e, {
+                sx: { color: "text.secondary" },
+                variant: "caption",
+                children: i.available_text
+              })]
+            }),
+            /* @__PURE__ */ t(L, {
+              name: "remove",
+              size: 20
+            }),
+            /* @__PURE__ */ r(n, {
+              sx: {
+                width: 155,
+                textAlign: "center"
+              },
+              children: [/* @__PURE__ */ t(e, {
+                sx: { fontWeight: 600 },
+                variant: "body1",
+                children: l(o, "0,0.00")
+              }), /* @__PURE__ */ t(e, {
+                sx: { color: "text.secondary" },
+                variant: "caption",
+                children: i.expenses_text
+              })]
+            })
+          ]
+        }), /* @__PURE__ */ r(n, {
+          sx: {
+            textAlign: "center",
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 4
+          },
+          children: [/* @__PURE__ */ r(e, {
+            sx: { color: "text.secondary" },
+            variant: "body2",
+            children: [i.total_remaining_text, ":"]
+          }), /* @__PURE__ */ t(e, {
+            sx: { fontWeight: 600 },
+            variant: "body2",
+            children: l(g, "0,0.00")
+          })]
+        })]
+      })
+    }),
+    /* @__PURE__ */ r(n, {
+      sx: {
+        p: 24,
+        gap: 8
+      },
+      children: [/* @__PURE__ */ t(e, {
+        sx: { fontWeight: 600 },
+        truncate: !1,
+        variant: "body1",
+        children: i.body_content
+      }), /* @__PURE__ */ t(C, {
+        amount: l(f, "0,0.00"),
+        copy: i,
+        onDecrement: () => d((s) => Math.max(0, s - u)),
+        onIncrement: () => d((s) => s + u)
+      })]
+    }),
+    /* @__PURE__ */ r(n, {
+      sx: { gap: 8 },
+      children: [
+        /* @__PURE__ */ t(e, {
+          sx: {
+            fontWeight: 600,
+            mx: 24
+          },
+          truncate: !1,
+          variant: "body1",
+          children: i.body_description
+        }),
+        /* @__PURE__ */ t(D, {
+          sx: {
+            bgcolor: "background.paper",
+            width: "100%"
+          },
+          children: _.map(({ label: s, value: b }, w) => {
+            const v = a.lastRowIndex;
+            return /* @__PURE__ */ r(x.Fragment, { children: [/* @__PURE__ */ t(E, {
+              disableGutters: !0,
+              disablePadding: !0,
+              sx: {
+                minHeight: 52,
+                bgcolor: "background.paper"
+              },
+              children: /* @__PURE__ */ t(n, {
+                sx: { width: "100%" },
+                children: /* @__PURE__ */ r(n, {
+                  sx: {
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    width: "100%",
+                    px: 24,
+                    py: 8
+                  },
+                  children: [/* @__PURE__ */ t(e, {
+                    truncate: !1,
+                    variant: "body1",
+                    children: s
+                  }), /* @__PURE__ */ t(e, {
+                    sx: { fontWeight: 600 },
+                    truncate: !1,
+                    variant: "body1",
+                    children: l(b * f, "0,0")
+                  })]
+                })
+              })
+            }), /* @__PURE__ */ t(j, {
+              component: "li",
+              sx: { ml: w === v ? 0 : 24 }
+            })] }, b);
+          })
+        }),
+        a.showTotalBalances && c != null && /* @__PURE__ */ r(n, {
+          sx: {
+            pt: 6,
+            pb: 14,
+            px: 24,
+            textAlign: "right",
+            gap: 4
+          },
+          children: [/* @__PURE__ */ t(e, {
+            truncate: !1,
+            variant: "h3",
+            children: l(c, "0,0.00")
+          }), h && /* @__PURE__ */ t(e, {
+            sx: {
+              color: "text.secondary",
+              fontWeight: 400
+            },
+            truncate: !1,
+            variant: "subtitle2",
+            children: A(i.your_available_balances_text, h)
+          })]
+        })
+      ]
+    })
+  ] });
+};
+export {
+  P as MakeTransferActionBlock,
+  T as variants
+};
+
+//# sourceMappingURL=MakeTransferActionBlock.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MakeTransferActionBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/MakeTransferActionBlock.tsx"],"sourcesContent":["import React from 'react'\nimport { Card, Divider, List, ListItem, Stack } from '@mui/material'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Text } from '@mxenabled/mxui'\nimport { BalanceStepper } from './BalanceStepper'\nimport { formatCurrency } from '../../../common'\nimport { buildDynamicCopy } from '../../../core'\nimport SaveEnoughToLiveOnBottomSection from './SaveEnoughToLiveOnBottomSection'\nimport { getMakeTransferLayout, variants } from './layout'\n\n// Re-exported for existing importers (adapter, tests) that pull `variants` from\n// the component module. The source of truth is ./layout.\nexport { variants }\n\ninterface CopyContent {\n  header_content?: string\n  description?: string\n  body_content?: string\n  body_description?: string\n  available_text?: string\n  total_remaining_text?: string\n  increment_aria_label?: string\n  decrement_aria_label?: string\n  expenses_text?: string\n  available_balances_text?: string\n  average_monthly_spend_text?: string\n  your_available_balances_text?: string\n}\n\ninterface MakeTransferActionBlockProps {\n  date?: string\n  variant: (typeof variants)[keyof typeof variants]\n  svgDateContent?: string\n  availableBalances?: number\n  copy: CopyContent\n  averageMonthlySpend?: number\n  /** SAVE_AN_EXTRA_100: total remaining from the payload; falls back to available − expenses. */\n  totalRemaining?: number\n}\n\n// Content-only: the surrounding Drawer (open/close/title) is owned by\n// ActionBlockLayer, which renders this inside the shared action-drawer shell.\nexport const MakeTransferActionBlock = ({\n  variant = variants.SAVE_ENOUGH_TO_LIVE_ON,\n  svgDateContent,\n  date,\n  copy,\n  availableBalances,\n  averageMonthlySpend,\n  totalRemaining,\n}: MakeTransferActionBlockProps) => {\n  // All per-variant layout decisions live in ./layout.ts (Beat Blocks pattern).\n  const layout = getMakeTransferLayout(variant)\n  const { monthsTable, deltaAmount } = layout\n\n  const [amountToCalculate, setAmountToCalculate] = React.useState(\n    layout.initialAmount ?? averageMonthlySpend ?? 0,\n  )\n\n  // Variants without a fixed initialAmount (e.g. SAVE_ENOUGH_TO_LIVE_ON) seed the\n  // stepper from averageMonthlySpend. useState only captures its initializer once,\n  // so sync once the spend resolves after mount.\n  React.useEffect(() => {\n    if (layout.initialAmount == null && averageMonthlySpend != null) {\n      setAmountToCalculate(averageMonthlySpend)\n    }\n  }, [averageMonthlySpend, layout.initialAmount])\n\n  return (\n    <>\n      <Stack\n        sx={{\n          bgcolor: 'background.paper',\n          p: 24,\n          borderBottom: '1px solid',\n          borderColor: 'divider',\n        }}\n      >\n        {layout.showBalancesSection &&\n          availableBalances != null &&\n          averageMonthlySpend != null &&\n          svgDateContent && (\n            <SaveEnoughToLiveOnBottomSection\n              content={svgDateContent || ''}\n              leftLabel={copy.available_balances_text!}\n              leftValue={formatCurrency(availableBalances, '0,0.00')}\n              rightLabel={copy.average_monthly_spend_text!}\n              rightValue={formatCurrency(averageMonthlySpend, '0,0.00')}\n              sx={{ width: '100%', mb: 24 }}\n            />\n          )}\n        <Stack\n          sx={{\n            gap: 8,\n          }}\n        >\n          <Text variant=\"h3\">{copy.header_content}</Text>\n          <Text sx={{ lineHeight: '24px' }} truncate={false} variant=\"body1\">\n            {copy.description}\n          </Text>\n        </Stack>\n      </Stack>\n      {layout.showRemainingCard && availableBalances != null && averageMonthlySpend != null && (\n        <Stack sx={{ pt: 24, px: 24 }}>\n          <Card sx={{ px: 16, pt: 16, pb: 12 }}>\n            <Stack\n              sx={{\n                border: 1,\n                borderColor: 'divider',\n                borderRadius: '4px',\n                gap: 12,\n                flexDirection: 'row',\n                justifyContent: 'space-between',\n                alignItems: 'center',\n                p: 8,\n                mb: 12,\n              }}\n            >\n              <Stack sx={{ width: 155, textAlign: 'center' }}>\n                <Text sx={{ fontWeight: 600 }} variant=\"body1\">\n                  {formatCurrency(availableBalances, '0,0.00')}\n                </Text>\n                <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                  {copy.available_text}\n                </Text>\n              </Stack>\n              <Icon name=\"remove\" size={20} />\n              <Stack sx={{ width: 155, textAlign: 'center' }}>\n                <Text sx={{ fontWeight: 600 }} variant=\"body1\">\n                  {formatCurrency(averageMonthlySpend, '0,0.00')}\n                </Text>\n                <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                  {copy.expenses_text}\n                </Text>\n              </Stack>\n            </Stack>\n            <Stack\n              sx={{\n                textAlign: 'center',\n                flexDirection: 'row',\n                justifyContent: 'center',\n                alignItems: 'center',\n                gap: 4,\n              }}\n            >\n              <Text sx={{ color: 'text.secondary' }} variant=\"body2\">\n                {copy.total_remaining_text}:\n              </Text>\n              <Text sx={{ fontWeight: 600 }} variant=\"body2\">\n                {formatCurrency(totalRemaining, '0,0.00')}\n              </Text>\n            </Stack>\n          </Card>\n        </Stack>\n      )}\n\n      <Stack sx={{ p: 24, gap: 8 }}>\n        <Text sx={{ fontWeight: 600 }} truncate={false} variant=\"body1\">\n          {copy.body_content}\n        </Text>\n        <BalanceStepper\n          amount={formatCurrency(amountToCalculate, '0,0.00')}\n          copy={copy}\n          onDecrement={() => setAmountToCalculate((prev) => Math.max(0, prev - deltaAmount))}\n          onIncrement={() => setAmountToCalculate((prev) => prev + deltaAmount)}\n        />\n      </Stack>\n      <Stack sx={{ gap: 8 }}>\n        <Text sx={{ fontWeight: 600, mx: 24 }} truncate={false} variant=\"body1\">\n          {copy.body_description}\n        </Text>\n        <List sx={{ bgcolor: 'background.paper', width: '100%' }}>\n          {monthsTable.map(({ label, value }, index) => {\n            const isLastIndex = layout.lastRowIndex\n            return (\n              <React.Fragment key={value}>\n                <ListItem\n                  disableGutters={true}\n                  disablePadding={true}\n                  sx={{\n                    minHeight: 52,\n                    bgcolor: 'background.paper',\n                  }}\n                >\n                  <Stack sx={{ width: '100%' }}>\n                    <Stack\n                      sx={{\n                        flexDirection: 'row',\n                        justifyContent: 'space-between',\n                        alignItems: 'center',\n                        width: '100%',\n                        px: 24,\n                        py: 8,\n                      }}\n                    >\n                      <Text truncate={false} variant=\"body1\">\n                        {label}\n                      </Text>\n                      <Text sx={{ fontWeight: 600 }} truncate={false} variant=\"body1\">\n                        {formatCurrency(value * amountToCalculate, '0,0')}\n                      </Text>\n                    </Stack>\n                  </Stack>\n                </ListItem>\n                <Divider component=\"li\" sx={{ ml: index === isLastIndex ? 0 : 24 }} />\n              </React.Fragment>\n            )\n          })}\n        </List>\n        {layout.showTotalBalances && availableBalances != null && (\n          <Stack sx={{ pt: 6, pb: 14, px: 24, textAlign: 'right', gap: 4 }}>\n            <Text truncate={false} variant=\"h3\">\n              {formatCurrency(availableBalances, '0,0.00')}\n            </Text>\n            {date && (\n              <Text\n                sx={{ color: 'text.secondary', fontWeight: 400 }}\n                truncate={false}\n                variant=\"subtitle2\"\n              >\n                {buildDynamicCopy(copy.your_available_balances_text!, date) as string}\n              </Text>\n            )}\n          </Stack>\n        )}\n      </Stack>\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.d.ts

@@ -0,0 +1,13 @@
+import { Beat } from '../../../core';
+/**
+ * Adapter that plugs MakeTransferActionBlock into the ActionBlock registry.
+ *
+ * The block is content-only — ActionBlockLayer owns the surrounding Drawer
+ * (open/close/title). This adapter derives the variant from the clicked CTA,
+ * the figures from the beat payload, and the copy from GlobalCopyStore.
+ */
+export declare const MakeTransferActionBlockLayer: (({ beat, }: {
+    beat: Beat;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};