@mx-cartographer/experiences 9.6.6 → 9.6.8

package/dist/common/index.es.js

@@ -4,9 +4,9 @@ import a from "./components/charts/StatusBar.es.js";
 import p from "./components/charts/Donut.es.js";
 import u from "./hooks/useAccountDisplayName.es.js";
 import { useCombineEvents as C, useCombinePageviews as S } from "./hooks/useCombineEvents.es.js";
-import { GlobalDataContext as c, GlobalDataProvider as d } from "./context/GlobalDataProvider.es.js";
-import { WidgetContainerContext as E, WidgetContainerProvider as D } from "./context/WidgetContainerProvider.es.js";
-import { useAccountStore as I, useActionContext as N, useAppConfig as P, useBudgetsStore as y, useCashflowStore as A, useCategoryStore as b, useDebtStore as O, useError as W, useEvent as G, useFinstrongStore as L, useGlobalCopyStore as R, useGlobalStore as U, useGlobalUiStore as v, useGoalStore as B, useHelpStore as h, useHoldingStore as w, useInsightsV2Store as x, useLoad as M, useMerchantStore as Y, useNetWorthStore as H, useNotificationStore as F, usePageView as z, useRecurringTransactionsStore as V, useSettingsStore as Z, useTransactionStore as k, useTrendsStore as q, useUserStore as K, useWidgetContainerProvider as j } from "./context/hooks.es.js";
+import { GlobalDataContext as c, GlobalDataProvider as T } from "./context/GlobalDataProvider.es.js";
+import { WidgetContainerContext as d, WidgetContainerProvider as D } from "./context/WidgetContainerProvider.es.js";
+import { useAccountStore as I, useActionContext as N, useAppConfig as P, useBudgetsStore as y, useCashflowStore as A, useCategoryStore as O, useDebtStore as b, useError as W, useEvent as G, useFinstrongStore as L, useGlobalCopyStore as R, useGlobalStore as U, useGlobalUiStore as v, useGoalStore as B, useHelpStore as h, useHoldingStore as w, useInsightsV2Store as x, useLoad as M, useMerchantStore as Y, useNetWorthStore as H, useNotificationStore as F, usePageView as z, useRecurringTransactionsStore as V, useSettingsStore as Z, useTransactionStore as K, useTrendsStore as k, useUserStore as q, useWidgetContainerProvider as j } from "./context/hooks.es.js";
 import { useInsightsEnabled as Q } from "./hooks/useInsightsEnabled.es.js";
 import { useScreenSize as $ } from "./hooks/useScreenSize.es.js";
 import ro from "./hooks/usePrevious.es.js";
@@ -18,112 +18,114 @@ import co from "./components/dialog/Dialog.es.js";
 import Eo from "./components/drawer/Drawer.es.js";
 import _o from "./components/daterangeselector/DateRangeSelector.es.js";
 import { ANALYTICS_EVENTS as No } from "./constants/Analytics.es.js";
-import { CONNECTIONS_WIDGET_ID as yo, CONNECT_WIDGET_ID as Ao, MemberConnectionStatus as bo } from "./constants/Connect.es.js";
-import { GlobalStore as Wo } from "../core/stores/GlobalStore.es.js";
-import { INCOME_ACCOUNT_TYPES as Lo, PAYMENT_ACCOUNT_TYPES as Ro, SPENDING_ACCOUNT_TYPES as Uo } from "./constants/Account.es.js";
-import { RECURRENCE_COPY as Bo } from "./constants/ScheduledPayment.es.js";
-import { LOADING_STATUS as wo } from "./constants/SpendingPlan.es.js";
-import { DEFAULT_DONUT_SIZE as Mo, DEFAULT_STROKE_WIDTH as Yo } from "./constants/Donut.es.js";
-import { Sizes as Fo, TOUCH_TARGET as zo } from "./constants/Sizes.es.js";
-import Zo from "./components/donuts/MultiSegmentDonut.es.js";
-import qo from "./components/donuts/SingleSegmentDonut.es.js";
-import jo from "./components/ErrorBoundary.es.js";
-import Qo from "./components/Error.es.js";
-import $o from "./components/MicroWidgetContainer.es.js";
-import rr from "./components/MiniWidgetContainer.es.js";
-import { GlobalAccountFilter as er } from "./components/GlobalAccountFilter.es.js";
-import mr from "./components/Loader.es.js";
-import { WidgetContainer as ar } from "./components/WidgetContainer.es.js";
-import pr from "./components/ConnectWidgetPanel.es.js";
-import ur from "./components/ConnectDrawer.es.js";
-import Cr from "./components/CurrencyDialog.es.js";
-import gr from "./components/CurrencyInput.es.js";
+import { CONNECTIONS_WIDGET_ID as yo, CONNECT_WIDGET_ID as Ao, CONNECT_WIDGET_SOURCES as Oo, DEEP_LINK_TYPE as bo, MemberConnectionStatus as Wo } from "./constants/Connect.es.js";
+import { GlobalStore as Lo } from "../core/stores/GlobalStore.es.js";
+import { INCOME_ACCOUNT_TYPES as Uo, PAYMENT_ACCOUNT_TYPES as vo, SPENDING_ACCOUNT_TYPES as Bo } from "./constants/Account.es.js";
+import { RECURRENCE_COPY as wo } from "./constants/ScheduledPayment.es.js";
+import { LOADING_STATUS as Mo } from "./constants/SpendingPlan.es.js";
+import { DEFAULT_DONUT_SIZE as Ho, DEFAULT_STROKE_WIDTH as Fo } from "./constants/Donut.es.js";
+import { Sizes as Vo, TOUCH_TARGET as Zo } from "./constants/Sizes.es.js";
+import ko from "./components/donuts/MultiSegmentDonut.es.js";
+import jo from "./components/donuts/SingleSegmentDonut.es.js";
+import Qo from "./components/ErrorBoundary.es.js";
+import $o from "./components/Error.es.js";
+import rr from "./components/MicroWidgetContainer.es.js";
+import er from "./components/MiniWidgetContainer.es.js";
+import { GlobalAccountFilter as mr } from "./components/GlobalAccountFilter.es.js";
+import ar from "./components/Loader.es.js";
+import { WidgetContainer as pr } from "./components/WidgetContainer.es.js";
+import ur from "./components/ConnectWidgetPanel.es.js";
+import Cr from "./components/ConnectDrawer.es.js";
+import gr from "./components/CurrencyDialog.es.js";
+import Tr from "./components/CurrencyInput.es.js";
 import dr from "./components/ResponsiveButton.es.js";
-import Er from "./components/SearchBox.es.js";
-import _r from "./components/SelectionBox.es.js";
-import Nr from "./components/TabContentContainer.es.js";
-import yr from "./components/IconBacking.es.js";
-import br from "./components/DataRow.es.js";
-import Wr from "./components/ZeroState.es.js";
-import Lr from "./components/InformationTooltip.es.js";
-import { ConnectCard as Ur } from "./components/ConnectCard.es.js";
-import { CurrencyText as Br } from "./components/CurrencyText.es.js";
-import { EmptyState as wr } from "./components/EmptyState.es.js";
-import { ListItemAction as Mr } from "./components/ListItemAction.es.js";
-import { ListItemRow as Hr } from "./components/ListItemRow.es.js";
-import { ListItemWrapper as zr } from "./components/ListItemWrapper.es.js";
-import { Select as Zr } from "./components/Select.es.js";
-import { ToggleButtonListItem as qr } from "./components/listitems/ToggleButtonListItem.es.js";
-import { ToggleListItem as jr } from "./components/listitems/ToggleListItem.es.js";
-import { analyticsSession as Qr } from "./utils/Analytics.es.js";
-import { getClientComponentOverrides as $r, getClientCustomizations as ot, getClientPaletteOptions as rt, getClientTheme as tt } from "./utils/Theme.es.js";
+import _r from "./components/SearchBox.es.js";
+import Nr from "./components/SelectionBox.es.js";
+import yr from "./components/TabContentContainer.es.js";
+import Or from "./components/IconBacking.es.js";
+import Wr from "./components/DataRow.es.js";
+import Lr from "./components/ZeroState.es.js";
+import Ur from "./components/InformationTooltip.es.js";
+import { ConnectCard as Br } from "./components/ConnectCard.es.js";
+import { CurrencyText as wr } from "./components/CurrencyText.es.js";
+import { EmptyState as Mr } from "./components/EmptyState.es.js";
+import { ListItemAction as Hr } from "./components/ListItemAction.es.js";
+import { ListItemRow as zr } from "./components/ListItemRow.es.js";
+import { ListItemWrapper as Zr } from "./components/ListItemWrapper.es.js";
+import { Select as kr } from "./components/Select.es.js";
+import { ToggleButtonListItem as jr } from "./components/listitems/ToggleButtonListItem.es.js";
+import { ToggleListItem as Qr } from "./components/listitems/ToggleListItem.es.js";
+import { analyticsSession as $r } from "./utils/Analytics.es.js";
+import { getClientComponentOverrides as rt, getClientCustomizations as tt, getClientPaletteOptions as et, getClientTheme as it } from "./utils/Theme.es.js";
 export {
   No as ANALYTICS_EVENTS,
   yo as CONNECTIONS_WIDGET_ID,
   Ao as CONNECT_WIDGET_ID,
+  Oo as CONNECT_WIDGET_SOURCES,
   i as Calendar,
   m as CalendarSelectionTypes,
-  Ur as ConnectCard,
-  ur as ConnectDrawer,
-  pr as ConnectWidgetPanel,
-  Cr as CurrencyDialog,
-  gr as CurrencyInput,
-  Br as CurrencyText,
-  Mo as DEFAULT_DONUT_SIZE,
-  Yo as DEFAULT_STROKE_WIDTH,
-  br as DataRow,
+  Br as ConnectCard,
+  Cr as ConnectDrawer,
+  ur as ConnectWidgetPanel,
+  gr as CurrencyDialog,
+  Tr as CurrencyInput,
+  wr as CurrencyText,
+  bo as DEEP_LINK_TYPE,
+  Ho as DEFAULT_DONUT_SIZE,
+  Fo as DEFAULT_STROKE_WIDTH,
+  Wr as DataRow,
   _o as DateRangeSelector,
   co as Dialog,
   p as Donut,
   Eo as Drawer,
-  wr as EmptyState,
-  Qo as Error,
-  jo as ErrorBoundary,
-  er as GlobalAccountFilter,
+  Mr as EmptyState,
+  $o as Error,
+  Qo as ErrorBoundary,
+  mr as GlobalAccountFilter,
   c as GlobalDataContext,
-  d as GlobalDataProvider,
-  Wo as GlobalStore,
-  Lo as INCOME_ACCOUNT_TYPES,
-  yr as IconBacking,
-  Lr as InformationTooltip,
-  wo as LOADING_STATUS,
-  Mr as ListItemAction,
-  Hr as ListItemRow,
-  zr as ListItemWrapper,
-  mr as Loader,
-  bo as MemberConnectionStatus,
-  $o as MicroWidgetContainer,
-  rr as MiniWidgetContainer,
-  Zo as MultiSegmentDonut,
-  Ro as PAYMENT_ACCOUNT_TYPES,
-  Bo as RECURRENCE_COPY,
+  T as GlobalDataProvider,
+  Lo as GlobalStore,
+  Uo as INCOME_ACCOUNT_TYPES,
+  Or as IconBacking,
+  Ur as InformationTooltip,
+  Mo as LOADING_STATUS,
+  Hr as ListItemAction,
+  zr as ListItemRow,
+  Zr as ListItemWrapper,
+  ar as Loader,
+  Wo as MemberConnectionStatus,
+  rr as MicroWidgetContainer,
+  er as MiniWidgetContainer,
+  ko as MultiSegmentDonut,
+  vo as PAYMENT_ACCOUNT_TYPES,
+  wo as RECURRENCE_COPY,
   dr as ResponsiveButton,
-  Uo as SPENDING_ACCOUNT_TYPES,
-  Er as SearchBox,
-  Zr as Select,
-  _r as SelectionBox,
-  qo as SingleSegmentDonut,
-  Fo as Sizes,
+  Bo as SPENDING_ACCOUNT_TYPES,
+  _r as SearchBox,
+  kr as Select,
+  Nr as SelectionBox,
+  jo as SingleSegmentDonut,
+  Vo as Sizes,
   a as StatusBar,
-  zo as TOUCH_TARGET,
-  Nr as TabContentContainer,
-  qr as ToggleButtonListItem,
-  jr as ToggleListItem,
-  ar as WidgetContainer,
-  E as WidgetContainerContext,
+  Zo as TOUCH_TARGET,
+  yr as TabContentContainer,
+  jr as ToggleButtonListItem,
+  Qr as ToggleListItem,
+  pr as WidgetContainer,
+  d as WidgetContainerContext,
   D as WidgetContainerProvider,
-  Wr as ZeroState,
-  Qr as analyticsSession,
+  Lr as ZeroState,
+  $r as analyticsSession,
   r as buildDynamicCopy,
   t as buildPluralCopy,
   eo as formatCurrency,
   io as formatOrdinal,
   mo as formatPercentage,
   no as generateEqualIntervals,
-  $r as getClientComponentOverrides,
-  ot as getClientCustomizations,
-  rt as getClientPaletteOptions,
-  tt as getClientTheme,
+  rt as getClientComponentOverrides,
+  tt as getClientCustomizations,
+  et as getClientPaletteOptions,
+  it as getClientTheme,
   ao as getCurrencyCodes,
   so as getPluralRules,
   u as useAccountDisplayName,
@@ -132,10 +134,10 @@ export {
   P as useAppConfig,
   y as useBudgetsStore,
   A as useCashflowStore,
-  b as useCategoryStore,
+  O as useCategoryStore,
   C as useCombineEvents,
   S as useCombinePageviews,
-  O as useDebtStore,
+  b as useDebtStore,
   W as useError,
   G as useEvent,
   L as useFinstrongStore,
@@ -157,9 +159,9 @@ export {
   fo as useRepeatingTransactionEligibility,
   $ as useScreenSize,
   Z as useSettingsStore,
-  k as useTransactionStore,
-  q as useTrendsStore,
-  K as useUserStore,
+  K as useTransactionStore,
+  k as useTrendsStore,
+  q as useUserStore,
   j as useWidgetContainerProvider,
   lo as useWidgetHeaderStyles,
   So as useWidgetLoadTimer

package/dist/core/api/BannerApi.d.ts

@@ -3,4 +3,5 @@ export declare class BannerApi {
     fetchInstance: Fetch | null;
     constructor(bullseyeEndpoint: string);
     getBanner: (userGuid: string) => Promise<any>;
+    markClicked: (guid: string) => Promise<any>;
 }

package/dist/core/api/BannerApi.es.js

@@ -1,5 +1,6 @@
+import { ApiEndpoints as c } from "../constants/ApiEndpoints.es.js";
 import { Fetch as r } from "../utils/Fetch.es.js";
-var a = class {
+var s = class {
   fetchInstance;
   constructor(n) {
     this.fetchInstance = new r(n, "", {
@@ -15,9 +16,10 @@ var a = class {
       return console.error("Error fetching banner:", t), null;
     }
   };
+  markClicked = async (n) => this.fetchInstance?.put(`/${c.OFFERS}/${encodeURIComponent(n)}/clicked`, {});
 };
 export {
-  a as BannerApi
+  s as BannerApi
 };
 
 //# sourceMappingURL=BannerApi.es.js.map

package/dist/core/api/BannerApi.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerApi.es.js","names":[],"sources":["../../../src/core/api/BannerApi.ts"],"sourcesContent":["import { Fetch } from '../utils'\n\nexport class BannerApi {\n  fetchInstance: Fetch | null\n\n  constructor(bullseyeEndpoint: string) {\n    // Override headers without MD-Session-Token to avoid CORS error in bullseye\n    this.fetchInstance = new Fetch(bullseyeEndpoint, '', {\n      Accept: 'application/json',\n      'Content-Type': 'application/json',\n    })\n  }\n\n  getBanner = async (userGuid: string) => {\n    try {\n      const path = `/banner/${userGuid}/account_widget_banner`\n      return this.fetchInstance?.get(path).then((data) => data.banner) ?? {}\n    } catch (error) {\n      console.error('Error fetching banner:', error)\n      return null\n    }\n  }\n}\n"],"mappings":";AAEA,IAAa,IAAb,MAAuB;AAAA,EACrB;AAAA,EAEA,YAAY,GAA0B;AAEpC,SAAK,gBAAgB,IAAI,EAAM,GAAkB,IAAI;AAAA,MACnD,QAAQ;AAAA,MACR,gBAAgB;AAAA,IAClB,CAAC;AAAA,EACH;AAAA,EAEA,YAAY,OAAO,MAAqB;AACtC,QAAI;AACF,YAAM,IAAO,WAAW,CAAA;AACxB,aAAO,KAAK,eAAe,IAAI,CAAI,EAAE,KAAA,CAAM,MAAS,EAAK,MAAM,KAAK,CAAC;AAAA,IACvE,SAAS,GAAO;AACd,qBAAQ,MAAM,0BAA0B,CAAK,GACtC;AAAA,IACT;AAAA,EACF;AACF"}
+{"version":3,"file":"BannerApi.es.js","names":[],"sources":["../../../src/core/api/BannerApi.ts"],"sourcesContent":["import { Fetch } from '../utils'\nimport { ApiEndpoints } from '../constants'\n\nexport class BannerApi {\n  fetchInstance: Fetch | null\n\n  constructor(bullseyeEndpoint: string) {\n    // Override headers without MD-Session-Token to avoid CORS error in bullseye\n    this.fetchInstance = new Fetch(bullseyeEndpoint, '', {\n      Accept: 'application/json',\n      'Content-Type': 'application/json',\n    })\n  }\n\n  getBanner = async (userGuid: string) => {\n    try {\n      const path = `/banner/${userGuid}/account_widget_banner`\n      return this.fetchInstance?.get(path).then((data) => data.banner) ?? {}\n    } catch (error) {\n      console.error('Error fetching banner:', error)\n      return null\n    }\n  }\n\n  // Records a banner click server-side. The deep-link path needs this because it\n  // never hits `redirect_url`, which is what records the click for external\n  // banners. Rejections propagate so AppDataStore can report them via its\n  // captureException handler instead of being silently swallowed here.\n  markClicked = async (guid: string) =>\n    this.fetchInstance?.put(`/${ApiEndpoints.OFFERS}/${encodeURIComponent(guid)}/clicked`, {})\n}\n"],"mappings":";;AAGA,IAAa,IAAb,MAAuB;AAAA,EACrB;AAAA,EAEA,YAAY,GAA0B;AAEpC,SAAK,gBAAgB,IAAI,EAAM,GAAkB,IAAI;AAAA,MACnD,QAAQ;AAAA,MACR,gBAAgB;AAAA,IAClB,CAAC;AAAA,EACH;AAAA,EAEA,YAAY,OAAO,MAAqB;AACtC,QAAI;AACF,YAAM,IAAO,WAAW,CAAA;AACxB,aAAO,KAAK,eAAe,IAAI,CAAI,EAAE,KAAA,CAAM,MAAS,EAAK,MAAM,KAAK,CAAC;AAAA,IACvE,SAAS,GAAO;AACd,qBAAQ,MAAM,0BAA0B,CAAK,GACtC;AAAA,IACT;AAAA,EACF;AAAA,EAMA,cAAc,OAAO,MACnB,KAAK,eAAe,IAAI,IAAI,EAAa,MAAA,IAAU,mBAAmB,CAAI,CAAA,YAAa,CAAC,CAAC;AAC7F"}

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

@@ -18,6 +18,7 @@ export declare class AppDataStore {
     setAppData: (appData: AppData) => void;
     loadAppData: () => Promise<void>;
     loadBanner: () => Promise<void>;
+    markBannerClicked: (guid: string) => Promise<void>;
     setUser: (user: User) => User;
     setUserCommunicationProfile: (profile: UserCommunicationProfile) => UserCommunicationProfile;
     setUserProfile: (userProfile: UserProfile) => UserProfile;

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

@@ -1,7 +1,7 @@
 import { AppDataApi as a } from "../api/AppDataApi.es.js";
 import { BannerApi as e } from "../api/BannerApi.es.js";
 import { makeAutoObservable as i, runInAction as o } from "mobx";
-var l = class {
+var c = class {
   globalStore;
   api = new a("/", "");
   bannerApi = new e("/");
@@ -50,12 +50,19 @@ var l = class {
       console.error("Error loading banner:", t), this.globalStore.captureException(t, { store: "AppDataStore" });
     }
   };
+  markBannerClicked = async (t) => {
+    try {
+      await this.bannerApi.markClicked(t);
+    } catch (r) {
+      console.error("Error marking banner clicked:", r), this.globalStore.captureException(r, { store: "AppDataStore" });
+    }
+  };
   setUser = (t) => this.appData.user = t;
   setUserCommunicationProfile = (t) => this.appData.user_communication_profile = t;
   setUserProfile = (t) => this.appData.user_profile = t;
 };
 export {
-  l as AppDataStore
+  c as AppDataStore
 };
 
 //# sourceMappingURL=AppDataStore.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppDataStore.es.js","names":[],"sources":["../../../src/core/stores/AppDataStore.ts"],"sourcesContent":["import { makeAutoObservable, runInAction } from 'mobx'\n\nimport { AppDataApi, BannerApi } from '../api'\nimport type {\n  AppConfig,\n  AppData,\n  Banner,\n  User,\n  UserCommunicationProfile,\n  UserProfile,\n} from '../types'\n\nimport { GlobalStore } from './GlobalStore'\n\nexport class AppDataStore {\n  globalStore: GlobalStore\n  api: AppDataApi = new AppDataApi('/', '')\n  bannerApi: BannerApi = new BannerApi('/')\n\n  appData: AppData = {} as AppData\n  isAppDataLoaded: boolean = false\n  banner: Banner = {}\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n    this.api = new AppDataApi(globalStore.endpoint, globalStore.sessionToken, globalStore.onError)\n\n    makeAutoObservable(this)\n  }\n\n  get appConfig(): AppConfig {\n    return this.globalStore.appConfig\n  }\n\n  get clientCommunicationProfile() {\n    return this.appData.client_communication_profile\n  }\n\n  get clientInsightProfile() {\n    return this.appData.client_insight_profile\n  }\n\n  get user() {\n    return this.appData.user\n  }\n\n  get userCommunicationProfile() {\n    return this.appData.user_communication_profile\n  }\n\n  get userProfile() {\n    return this.appData.user_profile\n  }\n\n  setAppData = (appData: AppData) => {\n    this.appData = appData\n    this.bannerApi = new BannerApi(appData.address?.bullseye || '/')\n    this.isAppDataLoaded = true\n  }\n\n  loadAppData = async () => {\n    try {\n      const appData = await this.api.getAppData()\n      this.setAppData(appData)\n    } catch (error) {\n      console.error('Error loading app data:', error)\n      this.globalStore.captureException(error, { store: 'AppDataStore' })\n    }\n  }\n\n  loadBanner = async () => {\n    try {\n      const userGuid = this.user?.guid ?? null\n      const banner = userGuid ? await this.bannerApi.getBanner(userGuid) : {}\n\n      runInAction(() => {\n        this.banner = banner\n      })\n    } catch (error) {\n      console.error('Error loading banner:', error)\n      this.globalStore.captureException(error, { store: 'AppDataStore' })\n    }\n  }\n\n  setUser = (user: User) => (this.appData.user = user)\n\n  setUserCommunicationProfile = (profile: UserCommunicationProfile) =>\n    (this.appData.user_communication_profile = profile)\n\n  setUserProfile = (userProfile: UserProfile) => (this.appData.user_profile = userProfile)\n}\n"],"mappings":";;;AAcA,IAAa,IAAb,MAA0B;AAAA,EACxB;AAAA,EACA,MAAkB,IAAI,EAAW,KAAK,EAAE;AAAA,EACxC,YAAuB,IAAI,EAAU,GAAG;AAAA,EAExC,UAAmB,CAAC;AAAA,EACpB,kBAA2B;AAAA,EAC3B,SAAiB,CAAC;AAAA,EAElB,YAAY,GAA0B;AACpC,SAAK,cAAc,GACnB,KAAK,MAAM,IAAI,EAAW,EAAY,UAAU,EAAY,cAAc,EAAY,OAAO,GAE7F,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,IAAI,YAAuB;AACzB,WAAO,KAAK,YAAY;AAAA,EAC1B;AAAA,EAEA,IAAI,6BAA6B;AAC/B,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,IAAI,uBAAuB;AACzB,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,IAAI,OAAO;AACT,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,IAAI,2BAA2B;AAC7B,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,IAAI,cAAc;AAChB,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,aAAA,CAAc,MAAqB;AACjC,SAAK,UAAU,GACf,KAAK,YAAY,IAAI,EAAU,EAAQ,SAAS,YAAY,GAAG,GAC/D,KAAK,kBAAkB;AAAA,EACzB;AAAA,EAEA,cAAc,YAAY;AACxB,QAAI;AACF,YAAM,IAAU,MAAM,KAAK,IAAI,WAAW;AAC1C,WAAK,WAAW,CAAO;AAAA,IACzB,SAAS,GAAO;AACd,cAAQ,MAAM,2BAA2B,CAAK,GAC9C,KAAK,YAAY,iBAAiB,GAAO,EAAE,OAAO,eAAe,CAAC;AAAA,IACpE;AAAA,EACF;AAAA,EAEA,aAAa,YAAY;AACvB,QAAI;AACF,YAAM,IAAW,KAAK,MAAM,QAAQ,MAC9B,IAAS,IAAW,MAAM,KAAK,UAAU,UAAU,CAAQ,IAAI,CAAC;AAEtE,MAAA,EAAA,MAAkB;AAChB,aAAK,SAAS;AAAA,MAChB,CAAC;AAAA,IACH,SAAS,GAAO;AACd,cAAQ,MAAM,yBAAyB,CAAK,GAC5C,KAAK,YAAY,iBAAiB,GAAO,EAAE,OAAO,eAAe,CAAC;AAAA,IACpE;AAAA,EACF;AAAA,EAEA,UAAA,CAAW,MAAgB,KAAK,QAAQ,OAAO;AAAA,EAE/C,8BAAA,CAA+B,MAC5B,KAAK,QAAQ,6BAA6B;AAAA,EAE7C,iBAAA,CAAkB,MAA8B,KAAK,QAAQ,eAAe;AAC9E"}
+{"version":3,"file":"AppDataStore.es.js","names":[],"sources":["../../../src/core/stores/AppDataStore.ts"],"sourcesContent":["import { makeAutoObservable, runInAction } from 'mobx'\n\nimport { AppDataApi, BannerApi } from '../api'\nimport type {\n  AppConfig,\n  AppData,\n  Banner,\n  User,\n  UserCommunicationProfile,\n  UserProfile,\n} from '../types'\n\nimport { GlobalStore } from './GlobalStore'\n\nexport class AppDataStore {\n  globalStore: GlobalStore\n  api: AppDataApi = new AppDataApi('/', '')\n  bannerApi: BannerApi = new BannerApi('/')\n\n  appData: AppData = {} as AppData\n  isAppDataLoaded: boolean = false\n  banner: Banner = {}\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n    this.api = new AppDataApi(globalStore.endpoint, globalStore.sessionToken, globalStore.onError)\n\n    makeAutoObservable(this)\n  }\n\n  get appConfig(): AppConfig {\n    return this.globalStore.appConfig\n  }\n\n  get clientCommunicationProfile() {\n    return this.appData.client_communication_profile\n  }\n\n  get clientInsightProfile() {\n    return this.appData.client_insight_profile\n  }\n\n  get user() {\n    return this.appData.user\n  }\n\n  get userCommunicationProfile() {\n    return this.appData.user_communication_profile\n  }\n\n  get userProfile() {\n    return this.appData.user_profile\n  }\n\n  setAppData = (appData: AppData) => {\n    this.appData = appData\n    this.bannerApi = new BannerApi(appData.address?.bullseye || '/')\n    this.isAppDataLoaded = true\n  }\n\n  loadAppData = async () => {\n    try {\n      const appData = await this.api.getAppData()\n      this.setAppData(appData)\n    } catch (error) {\n      console.error('Error loading app data:', error)\n      this.globalStore.captureException(error, { store: 'AppDataStore' })\n    }\n  }\n\n  loadBanner = async () => {\n    try {\n      const userGuid = this.user?.guid ?? null\n      const banner = userGuid ? await this.bannerApi.getBanner(userGuid) : {}\n\n      runInAction(() => {\n        this.banner = banner\n      })\n    } catch (error) {\n      console.error('Error loading banner:', error)\n      this.globalStore.captureException(error, { store: 'AppDataStore' })\n    }\n  }\n\n  // Fire-and-forget click receipt for the deep-link banner path (see BannerApi).\n  markBannerClicked = async (guid: string) => {\n    try {\n      await this.bannerApi.markClicked(guid)\n    } catch (error) {\n      console.error('Error marking banner clicked:', error)\n      this.globalStore.captureException(error, { store: 'AppDataStore' })\n    }\n  }\n\n  setUser = (user: User) => (this.appData.user = user)\n\n  setUserCommunicationProfile = (profile: UserCommunicationProfile) =>\n    (this.appData.user_communication_profile = profile)\n\n  setUserProfile = (userProfile: UserProfile) => (this.appData.user_profile = userProfile)\n}\n"],"mappings":";;;AAcA,IAAa,IAAb,MAA0B;AAAA,EACxB;AAAA,EACA,MAAkB,IAAI,EAAW,KAAK,EAAE;AAAA,EACxC,YAAuB,IAAI,EAAU,GAAG;AAAA,EAExC,UAAmB,CAAC;AAAA,EACpB,kBAA2B;AAAA,EAC3B,SAAiB,CAAC;AAAA,EAElB,YAAY,GAA0B;AACpC,SAAK,cAAc,GACnB,KAAK,MAAM,IAAI,EAAW,EAAY,UAAU,EAAY,cAAc,EAAY,OAAO,GAE7F,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,IAAI,YAAuB;AACzB,WAAO,KAAK,YAAY;AAAA,EAC1B;AAAA,EAEA,IAAI,6BAA6B;AAC/B,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,IAAI,uBAAuB;AACzB,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,IAAI,OAAO;AACT,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,IAAI,2BAA2B;AAC7B,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,IAAI,cAAc;AAChB,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,aAAA,CAAc,MAAqB;AACjC,SAAK,UAAU,GACf,KAAK,YAAY,IAAI,EAAU,EAAQ,SAAS,YAAY,GAAG,GAC/D,KAAK,kBAAkB;AAAA,EACzB;AAAA,EAEA,cAAc,YAAY;AACxB,QAAI;AACF,YAAM,IAAU,MAAM,KAAK,IAAI,WAAW;AAC1C,WAAK,WAAW,CAAO;AAAA,IACzB,SAAS,GAAO;AACd,cAAQ,MAAM,2BAA2B,CAAK,GAC9C,KAAK,YAAY,iBAAiB,GAAO,EAAE,OAAO,eAAe,CAAC;AAAA,IACpE;AAAA,EACF;AAAA,EAEA,aAAa,YAAY;AACvB,QAAI;AACF,YAAM,IAAW,KAAK,MAAM,QAAQ,MAC9B,IAAS,IAAW,MAAM,KAAK,UAAU,UAAU,CAAQ,IAAI,CAAC;AAEtE,MAAA,EAAA,MAAkB;AAChB,aAAK,SAAS;AAAA,MAChB,CAAC;AAAA,IACH,SAAS,GAAO;AACd,cAAQ,MAAM,yBAAyB,CAAK,GAC5C,KAAK,YAAY,iBAAiB,GAAO,EAAE,OAAO,eAAe,CAAC;AAAA,IACpE;AAAA,EACF;AAAA,EAGA,oBAAoB,OAAO,MAAiB;AAC1C,QAAI;AACF,YAAM,KAAK,UAAU,YAAY,CAAI;AAAA,IACvC,SAAS,GAAO;AACd,cAAQ,MAAM,iCAAiC,CAAK,GACpD,KAAK,YAAY,iBAAiB,GAAO,EAAE,OAAO,eAAe,CAAC;AAAA,IACpE;AAAA,EACF;AAAA,EAEA,UAAA,CAAW,MAAgB,KAAK,QAAQ,OAAO;AAAA,EAE/C,8BAAA,CAA+B,MAC5B,KAAK,QAAQ,6BAA6B;AAAA,EAE7C,iBAAA,CAAkB,MAA8B,KAAK,QAAQ,eAAe;AAC9E"}

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

@@ -27,8 +27,10 @@ export interface AppConfig {
     userFeatures: UserFeature[];
 }
 export interface Banner {
+    guid?: string;
     image_url?: string;
     redirect_url?: string;
+    deep_link_type?: number | null;
 }
 interface TransactionConfig {
     selected_account_guid?: string;

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

@@ -221,6 +221,7 @@ export declare const BlockType: {
     readonly DonutChartBlock: "donut_chart_block";
     readonly DoubleBarChartBlock: "double_bar_chart_block";
     readonly DoubleProgressBarBlock: "double_progress_bar_block";
+    readonly DebtsBlock: "debts_block";
     readonly SaveExtraBlock: "save_extra_block";
     readonly SavingsOpportunityBlock: "savings_opportunity_block";
     readonly StepChartBlock: "step_chart_block";
@@ -306,4 +307,10 @@ export interface InstanceSlot {
     icon_name?: string;
     /** Category guid used to render the deposit-card logo fallback. */
     category_guid?: string;
+    /** Projected payoff date in ISO form (e.g. `2027-03-01`); the block formats it as month + year. */
+    payoff_date?: string;
+    /** Monthly payment toward the debt (unformatted); the block formats it as currency. */
+    monthly_payment?: number;
+    /** Annual interest rate as a percentage (e.g. `19.99`); the block formats it as a percent. */
+    interest_rate?: number;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Insights.es.js","names":[],"sources":["../../../src/core/types/Insights.ts"],"sourcesContent":["// ============ Core InsightsV2 Types ============\n\nimport { InsightsInstanceSlotData } from './InsightsInstanceSlotData'\n\nexport interface ThemedSVGImageProps {\n  divProps?: React.HTMLAttributes<HTMLDivElement>\n  image: React.ComponentType<React.SVGProps<SVGSVGElement>>\n  isMini?: boolean\n}\n\n/**\n * Emitted by a block when the user drills into a specific datum (e.g. clicks a\n * chart bar). Named fields rather than positional args so blocks with differing\n * shapes can extend this without the call sites transposing values.\n */\nexport interface DrilldownPayload {\n  chartBarIndex: number\n  tabIndex?: number\n  transaction_guid?: string\n  block?: string\n}\n\n/**\n * Which envelope a beat was fetched with. `embedded` (the transaction-row pill + details-drawer\n * card) and `notification` are V2 additions; a surface asks for one with `widget_type=` on the fetch.\n */\nexport type WidgetType = 'full' | 'mini' | 'micro' | 'embedded' | 'notification'\n\n/**\n * V2: the transaction-row tag, its own small section of the `embedded` envelope (the same grammar\n * as `description` / `footer`, with room for a tone or an icon later). Omitted for an insight that\n * tags no transaction row. It deliberately is *not* `short_title`, which stays a per-variant\n * attribute with a second consumer (the bank-holiday sub-header).\n */\nexport interface Pill {\n  text: string\n}\n\n/**\n * V2: facts a drilldown shows that the card does not (e.g. the account number for the Transaction\n * Details drawer). A flat hash shared by every CTA of the card, omitted when the insight has none.\n * Never carries copy or user actions (memo, tags, hide, flag come from the transaction store).\n */\nexport type DrilldownData = Record<string, string | number | boolean | null>\n\nexport interface InsightsPayload {\n  widget_type: WidgetType\n  instance_slot: InstanceSlot\n  /**\n   * V1 only. The v2 contract carries everything a block needs on `instance_slot.data`,\n   * and omits this key entirely (see the LargeTransactionV2 payload). Blocks that still require it\n   * get it as a required field through `BlockProps`, which re-declares it.\n   */\n  instance_slot_data?: InsightsInstanceSlotData\n  description: Description\n  primary_cta?: PrimaryCTA\n  secondary_cta?: SecondaryCTA\n  title?: string\n  sub_title?: Subtitle\n  /**\n   * V2 rename of `sub_title`: a flat string, with the logo promoted to the payload-level `logo`\n   * field below. `sub_title` wins when both are present.\n   */\n  subtitle?: string\n  /** V2: header logo paired with the flat `subtitle`: an entity guid or a status icon (`LogoRef`). */\n  logo?: LogoRef\n  /** V2: which design branch the backend picked (e.g. `no_merchant`). */\n  variant?: string\n  /** V2, `embedded` envelope only: the transaction-row pill. */\n  pill?: Pill\n  /** V2: drilldown-only facts, e.g. `{ account_number: 'XXXXXXXX043' }`. */\n  drilldown_data?: DrilldownData\n  footer?: Footer\n  // TODO: Add in_description_cta to insights_payload from backend\n  guid: string\n  user_guid: string\n  client_guid?: string\n  /** Template name, e.g. `LargeTransactionV2`. */\n  template?: string\n  revision?: number\n  /** Unix seconds. */\n  created_at?: number\n  /** Unix seconds. */\n  updated_at?: number\n  /** Unix seconds. */\n  active_at?: number\n  displayed_at?: number | null\n  dismissed_at: number | null\n  cta_clicked_at?: number | null\n  has_been_displayed?: boolean\n  is_dismissed: boolean\n  is_deleted?: boolean\n  is_hidden_by_system?: boolean\n  is_obsolete?: boolean\n  is_refreshable?: boolean\n  is_sampled?: boolean\n  is_zero_state?: boolean\n  status?: string | null\n  /**\n   * V2 (LargeTransactionV2 onward): the entities the beat is about, carried on the payload so\n   * action blocks do not have to reach back out to the beat envelope.\n   */\n  primary_account_guid?: string | null\n  primary_transaction_guid?: string | null\n  primary_category_guid?: string | null\n  primary_merchant_guid?: string | null\n  /**\n   * V2: the repeating transaction a subscription beat is about (Upcoming Subscription, Subscription\n   * Price Increase). Read by `recurring_transaction_block`, see\n   * `actionBlocks/RecurringTransactionBlock/subscriptionBeats.ts`.\n   */\n  primary_repeating_transaction_guid?: string | null\n}\n\nexport interface Legends {\n  label: string\n  value: number\n  additional_value?: number\n  additional_value_type?: string\n  value_type?: string\n}\n\nexport interface Logo {\n  category_guid?: string\n  category_name?: string\n  institution_guid?: string\n  institution_name?: string\n  logo_color?: string\n  logo_name?: string\n  merchant_guid?: string\n  merchant_name?: string\n}\n\nexport interface Subtitle {\n  logo?: Logo\n  text: string\n}\n\n/**\n * A V2 logo, shared by the header (`InsightsPayload.logo`) and every instance-slot row. It takes\n * one of two shapes:\n *\n * - **Entity**: `guid`, whose prefix (`INS-` / `MCH-` / `CAT-`) picks the logo component, plus an\n *   optional `fallback_guid` for when that component's asset cannot load. Today that is the\n *   category behind an `MCH-` guid, which `MerchantLogo` shows as a tile when the merchant image\n *   is missing.\n * - **Status icon**: `icon` (an mx-icons name, e.g. `warning`) and `color` (a theme palette path,\n *   e.g. `error.main`), for subheaders that show a state rather than an entity (V1's\n *   `logo_name` / `logo_color`).\n *\n * `alt` is the accessible name for either shape. A logo sends one shape; if it sends both, `icon`\n * wins, as `logo_name` does in V1's `SubHeader`.\n */\nexport interface LogoRef {\n  alt?: string\n  color?: string\n  fallback_guid?: string\n  guid?: string\n  icon?: string\n}\n\nexport interface CategoryLogo {\n  category_guid: string\n  category_name: string\n}\n\nexport interface MerchantLogo {\n  merchant_guid: string\n  merchant_name: string\n}\n\nexport interface InstitutionLogo {\n  institution_guid: string\n  institution_name: string\n}\n\nexport interface Description {\n  text: string\n  html_text: string\n}\n\n/**\n * Post message a CTA press sends to the host, resolved by the backend for the beat's current\n * state. Absent/null = the backend has not described one: the frontend uses the template's\n * interim `ctaPostMessages` entry if there is one, else sends no message. `payload` carries only\n * beat-specific extras; the frontend always adds `beat_guid`, `beat_template`, `user_guid` and\n * `action_string`.\n */\nexport interface CtaPostMessageMetadata {\n  /** Post message event; defaults to `beat/cta`. */\n  event?: string | null\n  /** Operation the host should perform, e.g. `op_1`, `op_2`, `op_3`. Defaults to `op_1`. */\n  action?: string | null\n  /** Beat-specific fields merged into the message metadata (account ids, amounts, ...). */\n  payload?: Record<string, unknown> | null\n}\n\nexport interface PrimaryCTA {\n  label: string\n  block: string\n  variant?: string | null\n  /**\n   * What pressing the CTA does beyond opening its block, named by the backend (ditto\n   * `primary_cta_action`, passed through by tupac). Looked up in `insights-v2/ctaActions`;\n   * null / absent / unknown means the CTA only opens its block or posts its message.\n   */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n}\n\nexport interface SecondaryCTA {\n  label: string\n  block: string\n  variant?: string | null\n  /** See `PrimaryCTA.action_key` (ditto `secondary_cta_action`). */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n}\n\nexport interface Footer {\n  /** V1: a pre-formatted date string. */\n  date?: string\n  /**\n   * The account label, on both V1 and V2. The backend resolves the plurality: one account sends\n   * its name (e.g. `Epic Bank`), several send a localized count (e.g. `2 Accounts`), none sends\n   * nothing. There is deliberately no separate `accounts` key — see tupac's `footer_account_label`.\n   */\n  account?: string\n  /**\n   * V2 (LargeTransactionV2 onward): unix seconds, formatted by `Footer` for display.\n   * Replaces `date`; `date` wins when a beat somehow sends both.\n   */\n  timestamp?: number\n}\n\n// ============ Instance Slot Types ============\n// Values are the snake_case block names the backend sends on a beat's instance slot; the PascalCase\n// keys stay as friendly references (e.g. BlockType.BarChartBlock === 'bar_chart_block').\nexport const BlockType = {\n  AccountBlock: 'account_block',\n  AccountSwitchBlock: 'account_switch_block',\n  BarChartBlock: 'bar_chart_block',\n  BudgetBlock: 'budget_block',\n  ImageBlock: 'image_block',\n  TransactionBlock: 'transaction_block',\n  DonutChartBlock: 'donut_chart_block',\n  DoubleBarChartBlock: 'double_bar_chart_block',\n  DoubleProgressBarBlock: 'double_progress_bar_block',\n  SaveExtraBlock: 'save_extra_block',\n  SavingsOpportunityBlock: 'savings_opportunity_block',\n  StepChartBlock: 'step_chart_block',\n  SVGImageBlock: 'svg_image_block',\n  UpcomingBillBlock: 'upcoming_bill_block',\n  UpcomingSubscriptionBlock: 'upcoming_subscription_block',\n  WithdrawalBlock: 'withdrawal_block',\n} as const\n\nexport type BlockType = (typeof BlockType)[keyof typeof BlockType]\n\n/**\n * A pre-localized row on a V2 instance slot. The backend resolves the copy and formatting; the\n * logo is a `LogoRef` (an entity guid or a status icon, see `logoFromRef`).\n */\nexport interface InstanceSlotRow {\n  amount?: number\n  logo?: LogoRef\n  primary_text?: string\n  secondary_text?: string\n}\n\n/**\n * V2: the slots a block's variant filled, keyed by slot name; ditto owns the names and omits any\n * slot it has no value for (`lib/ditto/blocks/<block>.yml`). Read with `slot()`, which names the\n * kind the caller expects.\n */\nexport interface InstanceSlotData {\n  [slot: string]: unknown\n}\n\n/**\n * Reads one slot off a block's `data`; undefined when ditto did not fill it.\n *\n * The caller names the kind, because the slot's kind lives in the block's ditto schema and not\n * here — a block fills slots with whatever its card needs, so no fixed list of kinds would hold\n * (`account_switch_block` alone carries a boolean and `budget_block` a nested object).\n */\nexport const slot = <T = unknown>(\n  data: InstanceSlotData | undefined,\n  name: string,\n): T | undefined => data?.[name] as T | undefined\n\n/**\n * V2: which block renders this beat's content, and what it renders.\n *\n * `block` is optional: a beat whose template has no ditto config arrives as an empty `{}` and the\n * card renders its copy and CTAs alone, so a reader cannot assume a block is named. One interface\n * with `block` optional rather than a union with `Record<string, never>`, which TypeScript absorbs\n * — that union left `block` reading as required and typed a promise it did not keep.\n *\n * `variant` is optional for the same reason — the empty `{}` carries neither. Every ditto beat\n * file that names a block also names a variant, so a *filled* slot always has one; ditto drops a\n * nil variant rather than sending null, which is why the type is `string | null | undefined`.\n */\nexport interface InstanceSlot {\n  block?: BlockType\n  variant?: string | null\n  /** The slots this block's variant declares in ditto. */\n  data?: InstanceSlotData\n  // Direct Deposit block (Set Up Direct Deposit, Switch Direct Deposit, Missing\n  // Interest Rate): account facts carried flat on the slot, beside `data`.\n  /** Primary line on the hero card, e.g. \"Epic Bank Checking, *1234\". */\n  account_name?: string\n  /** Secondary line beneath the name, e.g. \"Checking Account\" / \"Credit Card\". */\n  account_type?: string\n  /** Status pill label, e.g. \"Direct Deposit Not Set Up\" / \"Interest Rate: 19.99% APR\". */\n  status_text?: string\n  institution_guid?: string\n  institution_name?: string\n  // Shared across multiple V2 component blocks:\n  //   `amount` — UpcomingBillBlock (projected bill), SavingsOpportunityBlock (coupon),\n  //              UpcomingSubscriptionBlock (price per cadence).\n  //   `merchant_guid` / `merchant_name` — UpcomingBillBlock (bill row logo + name),\n  //              UpcomingSubscriptionBlock (hero logo + name).\n  /** Dollar amount (unformatted); the block formats it as currency. */\n  amount?: number\n  /** Merchant guid used to render the inline / hero logo via `LogoFromGuid` (`MCH-...`). */\n  merchant_guid?: string\n  /** Merchant display name — shown as logo alt text and as the merchant/hero label. */\n  merchant_name?: string\n  // Upcoming Bill block (Projected Bill Payment): the block derives the Sun→Sat week strip\n  // around `due_date` at render time.\n  /** Due date of the projected bill in ISO form (e.g. `2025-10-30`). */\n  due_date?: string\n  // Savings Opportunity block (Save An Extra, Potential Savings, Embedded): purely data-driven\n  // coupon card. Backend sends the caption and the amount, plus `slot` to toggle the green\n  // gradient background when the card is embedded in a parent surface that supplies its own.\n  /** Caption shown above the amount, e.g. `Save an extra` or `Potential savings`. */\n  label?: string\n  /**\n   * Whether to render the green gradient slot behind the coupon. Defaults to true. Backend sends\n   * `false` when the coupon is embedded in a parent surface that supplies its own background.\n   */\n  slot?: boolean\n  // Upcoming Subscription block: billing cadence for the price pill (`${amount} / ${cadence}`).\n  /** Billing cadence word that trails the price, e.g. `month` or `year`. */\n  cadence?: string\n  // Account block (status on/off-track, deposit, payoff variants): card content carried flat on\n  // the slot (the V2 contract drops `instance_slot_data`). `amount`, `label`, `merchant_guid`,\n  // `merchant_name`, `institution_guid`, `institution_name` are shared fields declared above.\n  /** Secondary line beneath the amount on the standard card, e.g. \"Remaining after expenses\". */\n  sub_text?: string\n  /** Header bar text (standard card) or the colored category strip label (deposit cards). */\n  header_text?: string\n  /** Generic-tile icon name used when no merchant/institution logo is available. */\n  icon_name?: string\n  /** Category guid used to render the deposit-card logo fallback. */\n  category_guid?: string\n}\n"],"mappings":"AA8RA,IAAa,IAAA,CACX,GACA,MACkB,IAAO,CAAA"}
+{"version":3,"file":"Insights.es.js","names":[],"sources":["../../../src/core/types/Insights.ts"],"sourcesContent":["// ============ Core InsightsV2 Types ============\n\nimport { InsightsInstanceSlotData } from './InsightsInstanceSlotData'\n\nexport interface ThemedSVGImageProps {\n  divProps?: React.HTMLAttributes<HTMLDivElement>\n  image: React.ComponentType<React.SVGProps<SVGSVGElement>>\n  isMini?: boolean\n}\n\n/**\n * Emitted by a block when the user drills into a specific datum (e.g. clicks a\n * chart bar). Named fields rather than positional args so blocks with differing\n * shapes can extend this without the call sites transposing values.\n */\nexport interface DrilldownPayload {\n  chartBarIndex: number\n  tabIndex?: number\n  transaction_guid?: string\n  block?: string\n}\n\n/**\n * Which envelope a beat was fetched with. `embedded` (the transaction-row pill + details-drawer\n * card) and `notification` are V2 additions; a surface asks for one with `widget_type=` on the fetch.\n */\nexport type WidgetType = 'full' | 'mini' | 'micro' | 'embedded' | 'notification'\n\n/**\n * V2: the transaction-row tag, its own small section of the `embedded` envelope (the same grammar\n * as `description` / `footer`, with room for a tone or an icon later). Omitted for an insight that\n * tags no transaction row. It deliberately is *not* `short_title`, which stays a per-variant\n * attribute with a second consumer (the bank-holiday sub-header).\n */\nexport interface Pill {\n  text: string\n}\n\n/**\n * V2: facts a drilldown shows that the card does not (e.g. the account number for the Transaction\n * Details drawer). A flat hash shared by every CTA of the card, omitted when the insight has none.\n * Never carries copy or user actions (memo, tags, hide, flag come from the transaction store).\n */\nexport type DrilldownData = Record<string, string | number | boolean | null>\n\nexport interface InsightsPayload {\n  widget_type: WidgetType\n  instance_slot: InstanceSlot\n  /**\n   * V1 only. The v2 contract carries everything a block needs on `instance_slot.data`,\n   * and omits this key entirely (see the LargeTransactionV2 payload). Blocks that still require it\n   * get it as a required field through `BlockProps`, which re-declares it.\n   */\n  instance_slot_data?: InsightsInstanceSlotData\n  description: Description\n  primary_cta?: PrimaryCTA\n  secondary_cta?: SecondaryCTA\n  title?: string\n  sub_title?: Subtitle\n  /**\n   * V2 rename of `sub_title`: a flat string, with the logo promoted to the payload-level `logo`\n   * field below. `sub_title` wins when both are present.\n   */\n  subtitle?: string\n  /** V2: header logo paired with the flat `subtitle`: an entity guid or a status icon (`LogoRef`). */\n  logo?: LogoRef\n  /** V2: which design branch the backend picked (e.g. `no_merchant`). */\n  variant?: string\n  /** V2, `embedded` envelope only: the transaction-row pill. */\n  pill?: Pill\n  /** V2: drilldown-only facts, e.g. `{ account_number: 'XXXXXXXX043' }`. */\n  drilldown_data?: DrilldownData\n  footer?: Footer\n  // TODO: Add in_description_cta to insights_payload from backend\n  guid: string\n  user_guid: string\n  client_guid?: string\n  /** Template name, e.g. `LargeTransactionV2`. */\n  template?: string\n  revision?: number\n  /** Unix seconds. */\n  created_at?: number\n  /** Unix seconds. */\n  updated_at?: number\n  /** Unix seconds. */\n  active_at?: number\n  displayed_at?: number | null\n  dismissed_at: number | null\n  cta_clicked_at?: number | null\n  has_been_displayed?: boolean\n  is_dismissed: boolean\n  is_deleted?: boolean\n  is_hidden_by_system?: boolean\n  is_obsolete?: boolean\n  is_refreshable?: boolean\n  is_sampled?: boolean\n  is_zero_state?: boolean\n  status?: string | null\n  /**\n   * V2 (LargeTransactionV2 onward): the entities the beat is about, carried on the payload so\n   * action blocks do not have to reach back out to the beat envelope.\n   */\n  primary_account_guid?: string | null\n  primary_transaction_guid?: string | null\n  primary_category_guid?: string | null\n  primary_merchant_guid?: string | null\n  /**\n   * V2: the repeating transaction a subscription beat is about (Upcoming Subscription, Subscription\n   * Price Increase). Read by `recurring_transaction_block`, see\n   * `actionBlocks/RecurringTransactionBlock/subscriptionBeats.ts`.\n   */\n  primary_repeating_transaction_guid?: string | null\n}\n\nexport interface Legends {\n  label: string\n  value: number\n  additional_value?: number\n  additional_value_type?: string\n  value_type?: string\n}\n\nexport interface Logo {\n  category_guid?: string\n  category_name?: string\n  institution_guid?: string\n  institution_name?: string\n  logo_color?: string\n  logo_name?: string\n  merchant_guid?: string\n  merchant_name?: string\n}\n\nexport interface Subtitle {\n  logo?: Logo\n  text: string\n}\n\n/**\n * A V2 logo, shared by the header (`InsightsPayload.logo`) and every instance-slot row. It takes\n * one of two shapes:\n *\n * - **Entity**: `guid`, whose prefix (`INS-` / `MCH-` / `CAT-`) picks the logo component, plus an\n *   optional `fallback_guid` for when that component's asset cannot load. Today that is the\n *   category behind an `MCH-` guid, which `MerchantLogo` shows as a tile when the merchant image\n *   is missing.\n * - **Status icon**: `icon` (an mx-icons name, e.g. `warning`) and `color` (a theme palette path,\n *   e.g. `error.main`), for subheaders that show a state rather than an entity (V1's\n *   `logo_name` / `logo_color`).\n *\n * `alt` is the accessible name for either shape. A logo sends one shape; if it sends both, `icon`\n * wins, as `logo_name` does in V1's `SubHeader`.\n */\nexport interface LogoRef {\n  alt?: string\n  color?: string\n  fallback_guid?: string\n  guid?: string\n  icon?: string\n}\n\nexport interface CategoryLogo {\n  category_guid: string\n  category_name: string\n}\n\nexport interface MerchantLogo {\n  merchant_guid: string\n  merchant_name: string\n}\n\nexport interface InstitutionLogo {\n  institution_guid: string\n  institution_name: string\n}\n\nexport interface Description {\n  text: string\n  html_text: string\n}\n\n/**\n * Post message a CTA press sends to the host, resolved by the backend for the beat's current\n * state. Absent/null = the backend has not described one: the frontend uses the template's\n * interim `ctaPostMessages` entry if there is one, else sends no message. `payload` carries only\n * beat-specific extras; the frontend always adds `beat_guid`, `beat_template`, `user_guid` and\n * `action_string`.\n */\nexport interface CtaPostMessageMetadata {\n  /** Post message event; defaults to `beat/cta`. */\n  event?: string | null\n  /** Operation the host should perform, e.g. `op_1`, `op_2`, `op_3`. Defaults to `op_1`. */\n  action?: string | null\n  /** Beat-specific fields merged into the message metadata (account ids, amounts, ...). */\n  payload?: Record<string, unknown> | null\n}\n\nexport interface PrimaryCTA {\n  label: string\n  block: string\n  variant?: string | null\n  /**\n   * What pressing the CTA does beyond opening its block, named by the backend (ditto\n   * `primary_cta_action`, passed through by tupac). Looked up in `insights-v2/ctaActions`;\n   * null / absent / unknown means the CTA only opens its block or posts its message.\n   */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n}\n\nexport interface SecondaryCTA {\n  label: string\n  block: string\n  variant?: string | null\n  /** See `PrimaryCTA.action_key` (ditto `secondary_cta_action`). */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n}\n\nexport interface Footer {\n  /** V1: a pre-formatted date string. */\n  date?: string\n  /**\n   * The account label, on both V1 and V2. The backend resolves the plurality: one account sends\n   * its name (e.g. `Epic Bank`), several send a localized count (e.g. `2 Accounts`), none sends\n   * nothing. There is deliberately no separate `accounts` key — see tupac's `footer_account_label`.\n   */\n  account?: string\n  /**\n   * V2 (LargeTransactionV2 onward): unix seconds, formatted by `Footer` for display.\n   * Replaces `date`; `date` wins when a beat somehow sends both.\n   */\n  timestamp?: number\n}\n\n// ============ Instance Slot Types ============\n// Values are the snake_case block names the backend sends on a beat's instance slot; the PascalCase\n// keys stay as friendly references (e.g. BlockType.BarChartBlock === 'bar_chart_block').\nexport const BlockType = {\n  AccountBlock: 'account_block',\n  AccountSwitchBlock: 'account_switch_block',\n  BarChartBlock: 'bar_chart_block',\n  BudgetBlock: 'budget_block',\n  ImageBlock: 'image_block',\n  TransactionBlock: 'transaction_block',\n  DonutChartBlock: 'donut_chart_block',\n  DoubleBarChartBlock: 'double_bar_chart_block',\n  DoubleProgressBarBlock: 'double_progress_bar_block',\n  DebtsBlock: 'debts_block',\n  SaveExtraBlock: 'save_extra_block',\n  SavingsOpportunityBlock: 'savings_opportunity_block',\n  StepChartBlock: 'step_chart_block',\n  SVGImageBlock: 'svg_image_block',\n  UpcomingBillBlock: 'upcoming_bill_block',\n  UpcomingSubscriptionBlock: 'upcoming_subscription_block',\n  WithdrawalBlock: 'withdrawal_block',\n} as const\n\nexport type BlockType = (typeof BlockType)[keyof typeof BlockType]\n\n/**\n * A pre-localized row on a V2 instance slot. The backend resolves the copy and formatting; the\n * logo is a `LogoRef` (an entity guid or a status icon, see `logoFromRef`).\n */\nexport interface InstanceSlotRow {\n  amount?: number\n  logo?: LogoRef\n  primary_text?: string\n  secondary_text?: string\n}\n\n/**\n * V2: the slots a block's variant filled, keyed by slot name; ditto owns the names and omits any\n * slot it has no value for (`lib/ditto/blocks/<block>.yml`). Read with `slot()`, which names the\n * kind the caller expects.\n */\nexport interface InstanceSlotData {\n  [slot: string]: unknown\n}\n\n/**\n * Reads one slot off a block's `data`; undefined when ditto did not fill it.\n *\n * The caller names the kind, because the slot's kind lives in the block's ditto schema and not\n * here — a block fills slots with whatever its card needs, so no fixed list of kinds would hold\n * (`account_switch_block` alone carries a boolean and `budget_block` a nested object).\n */\nexport const slot = <T = unknown>(\n  data: InstanceSlotData | undefined,\n  name: string,\n): T | undefined => data?.[name] as T | undefined\n\n/**\n * V2: which block renders this beat's content, and what it renders.\n *\n * `block` is optional: a beat whose template has no ditto config arrives as an empty `{}` and the\n * card renders its copy and CTAs alone, so a reader cannot assume a block is named. One interface\n * with `block` optional rather than a union with `Record<string, never>`, which TypeScript absorbs\n * — that union left `block` reading as required and typed a promise it did not keep.\n *\n * `variant` is optional for the same reason — the empty `{}` carries neither. Every ditto beat\n * file that names a block also names a variant, so a *filled* slot always has one; ditto drops a\n * nil variant rather than sending null, which is why the type is `string | null | undefined`.\n */\nexport interface InstanceSlot {\n  block?: BlockType\n  variant?: string | null\n  /** The slots this block's variant declares in ditto. */\n  data?: InstanceSlotData\n  // Direct Deposit block (Set Up Direct Deposit, Switch Direct Deposit, Missing\n  // Interest Rate): account facts carried flat on the slot, beside `data`.\n  /** Primary line on the hero card, e.g. \"Epic Bank Checking, *1234\". */\n  account_name?: string\n  /** Secondary line beneath the name, e.g. \"Checking Account\" / \"Credit Card\". */\n  account_type?: string\n  /** Status pill label, e.g. \"Direct Deposit Not Set Up\" / \"Interest Rate: 19.99% APR\". */\n  status_text?: string\n  institution_guid?: string\n  institution_name?: string\n  // Shared across multiple V2 component blocks:\n  //   `amount` — UpcomingBillBlock (projected bill), SavingsOpportunityBlock (coupon),\n  //              UpcomingSubscriptionBlock (price per cadence).\n  //   `merchant_guid` / `merchant_name` — UpcomingBillBlock (bill row logo + name),\n  //              UpcomingSubscriptionBlock (hero logo + name).\n  /** Dollar amount (unformatted); the block formats it as currency. */\n  amount?: number\n  /** Merchant guid used to render the inline / hero logo via `LogoFromGuid` (`MCH-...`). */\n  merchant_guid?: string\n  /** Merchant display name — shown as logo alt text and as the merchant/hero label. */\n  merchant_name?: string\n  // Upcoming Bill block (Projected Bill Payment): the block derives the Sun→Sat week strip\n  // around `due_date` at render time.\n  /** Due date of the projected bill in ISO form (e.g. `2025-10-30`). */\n  due_date?: string\n  // Savings Opportunity block (Save An Extra, Potential Savings, Embedded): purely data-driven\n  // coupon card. Backend sends the caption and the amount, plus `slot` to toggle the green\n  // gradient background when the card is embedded in a parent surface that supplies its own.\n  /** Caption shown above the amount, e.g. `Save an extra` or `Potential savings`. */\n  label?: string\n  /**\n   * Whether to render the green gradient slot behind the coupon. Defaults to true. Backend sends\n   * `false` when the coupon is embedded in a parent surface that supplies its own background.\n   */\n  slot?: boolean\n  // Upcoming Subscription block: billing cadence for the price pill (`${amount} / ${cadence}`).\n  /** Billing cadence word that trails the price, e.g. `month` or `year`. */\n  cadence?: string\n  // Account block (status on/off-track, deposit, payoff variants): card content carried flat on\n  // the slot (the V2 contract drops `instance_slot_data`). `amount`, `label`, `merchant_guid`,\n  // `merchant_name`, `institution_guid`, `institution_name` are shared fields declared above.\n  /** Secondary line beneath the amount on the standard card, e.g. \"Remaining after expenses\". */\n  sub_text?: string\n  /** Header bar text (standard card) or the colored category strip label (deposit cards). */\n  header_text?: string\n  /** Generic-tile icon name used when no merchant/institution logo is available. */\n  icon_name?: string\n  /** Category guid used to render the deposit-card logo fallback. */\n  category_guid?: string\n  // Debts block: `amount` is the current balance; the shared account/institution fields above.\n  /** Projected payoff date in ISO form (e.g. `2027-03-01`); the block formats it as month + year. */\n  payoff_date?: string\n  /** Monthly payment toward the debt (unformatted); the block formats it as currency. */\n  monthly_payment?: number\n  /** Annual interest rate as a percentage (e.g. `19.99`); the block formats it as a percent. */\n  interest_rate?: number\n}\n"],"mappings":"AA+RA,IAAa,IAAA,CACX,GACA,MACkB,IAAO,CAAA"}

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

@@ -245,6 +245,13 @@ export interface AmountInputModalCopy {
     /** Shown in the dialog when the save request fails; the value stays so Save can be retried. */
     save_error: string;
 }
+/** Labels for the Debts component block; the values come pre-formatted off `instance_slot`. */
+export interface DebtsBlockCopy {
+    balance_label: string;
+    payoff_date_label: string;
+    monthly_payment_label: string;
+    interest_rate_label: string;
+}
 export interface InsightsFeedCopy {
     general: GeneralInsightsFeedCopy;
     settings_menu: SettingsMenuCopy;
@@ -266,5 +273,7 @@ export interface InsightsFeedCopy {
     dismiss: DismissInsightCopy;
     /** Optional until the localized-content service ships the namespace. */
     amount_input_modal?: AmountInputModalCopy;
+    /** Optional until the localized-content service ships the namespace. */
+    debts_block?: DebtsBlockCopy;
 }
 export {};

package/dist/insights-v2/blocks/ComponentBlocks/DebtsBlock/DebtsBlock.d.ts

@@ -0,0 +1,24 @@
+import { InsightsPayload } from '../../../../core';
+import { DebtPayoffCardStyleProps } from '../../../components/DebtPayoffCard';
+interface DebtsBlockProps {
+    payload: InsightsPayload;
+    beatGuid?: string;
+}
+/** `projected_payoff` look: primary-tinted slot and pill. The card story mirrors it from here. */
+export declare const PAYOFF_STYLE: DebtPayoffCardStyleProps;
+/**
+ * Debts component block — the content card for the Debt Payoff Strategies beat.
+ *
+ * The debt account's facts arrive flat on `instance_slot` (V2 contract — no `instance_slot_data`):
+ * the balance (`amount`), `payoff_date`, `monthly_payment`, `interest_rate`, plus the shared
+ * account/institution fields. Row labels come from `insights_feed.debts_block` copy, which
+ * ships separately: until it has, the card shows the account row only (never an unlabelled number)
+ * and warns once per mount so the rollout gap is traceable.
+ *
+ * `instance_slot.variant` is not read yet: the architecture doc's other Debts branches (Debt
+ * Summary, Interest Summary) have no design, so there is one look. Introduce a per-variant
+ * registry (`createVariantBlock` + a `layout.ts` table, as `AccountBlock` does) with the second
+ * variant, not before.
+ */
+declare const DebtsBlock: ({ payload }: DebtsBlockProps) => import("react/jsx-runtime").JSX.Element;
+export default DebtsBlock;

package/dist/insights-v2/blocks/ComponentBlocks/DebtsBlock/DebtsBlock.es.js

@@ -0,0 +1,56 @@
+import { DATE_FORMATS_INTL as y, formatDate as h } from "../../../../core/constants/DateFormats.es.js";
+import { useGlobalCopyStore as v } from "../../../../common/context/hooks.es.js";
+import { formatCurrency as _, formatPercentage as g } from "../../../../core/utils/NumberFormatting.es.js";
+import { DepositLogo as D } from "../../../components/ComponentBlocks/DepositLogo.es.js";
+import T from "../../../components/DebtPayoffCard.es.js";
+import { parseDueDate as C } from "../UpcomingBillBlock/UpcomingBillBlock.es.js";
+import L from "react";
+import { jsx as b } from "react/jsx-runtime";
+var A = {
+  bgcolor: "primary.lighter",
+  pill: {
+    bgcolor: "primary.lighter",
+    labelColor: "text.primary"
+  }
+}, E = /* @__PURE__ */ new Set([
+  "credit card",
+  "credit_card",
+  "creditcard"
+]), R = (e) => E.has((e ?? "").trim().toLowerCase()) ? "credit_card" : "account_balance", S = (e) => !!e?.balance_label && !!e.payoff_date_label && !!e.monthly_payment_label && !!e.interest_rate_label, B = ({ payload: e }) => {
+  const a = v().insights_feed?.debts_block, t = S(a) ? a : void 0, { account_name: u, account_type: l, amount: r, institution_guid: f, institution_name: p, interest_rate: n, monthly_payment: i, payoff_date: s, status_text: d } = e.instance_slot;
+  L.useEffect(() => {
+    t || console.warn(`debts_block: ${a ? "copy incomplete" : "copy namespace missing"}; rendering the account row only`);
+  }, [a, t]);
+  const c = s ? C(s) : null, o = [];
+  t && c && o.push({
+    label: t.payoff_date_label,
+    value: h(c, y.MONTH_SHORT_YEAR)
+  }), t && i != null && o.push({
+    label: t.monthly_payment_label,
+    value: _(i, "0,0.00")
+  }), t && n != null && o.push({
+    label: t.interest_rate_label,
+    value: g(n / 100)
+  });
+  const m = t !== void 0 && r != null;
+  return /* @__PURE__ */ b(T, {
+    ...A,
+    balance: m ? _(r, "0,0.00") : void 0,
+    balanceLabel: m ? t.balance_label : void 0,
+    logo: /* @__PURE__ */ b(D, {
+      iconName: R(l),
+      institutionGuid: f ?? "",
+      institutionName: p ?? ""
+    }),
+    name: u,
+    stats: o,
+    statusLabel: d,
+    subtitle: l
+  });
+};
+export {
+  A as PAYOFF_STYLE,
+  B as default
+};
+
+//# sourceMappingURL=DebtsBlock.es.js.map

package/dist/insights-v2/blocks/ComponentBlocks/DebtsBlock/DebtsBlock.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebtsBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/DebtsBlock/DebtsBlock.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useGlobalCopyStore } from '../../../../common'\nimport type { InsightsPayload } from '../../../../core'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DebtsBlockCopy } from '../../../../core/types/localization/InsightsFeedCopy'\nimport { formatCurrency, formatPercentage } from '../../../../core/utils/NumberFormatting'\n\nimport DepositLogo from '../../../components/ComponentBlocks/DepositLogo'\nimport DebtPayoffCard, {\n  type DebtPayoffCardStyleProps,\n  type DebtPayoffStat,\n} from '../../../components/DebtPayoffCard'\nimport { parseDueDate } from '../UpcomingBillBlock/UpcomingBillBlock'\n\ninterface DebtsBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\n/** `projected_payoff` look: primary-tinted slot and pill. The card story mirrors it from here. */\nexport const PAYOFF_STYLE: DebtPayoffCardStyleProps = {\n  bgcolor: 'primary.lighter',\n  pill: { bgcolor: 'primary.lighter', labelColor: 'text.primary' },\n}\n\n/** Account types drawn with the card glyph when there is no institution logo; the rest get the bank. */\nconst CREDIT_CARD_TYPES = new Set(['credit card', 'credit_card', 'creditcard'])\n\nconst iconFor = (accountType?: string) =>\n  CREDIT_CARD_TYPES.has((accountType ?? '').trim().toLowerCase())\n    ? 'credit_card'\n    : 'account_balance'\n\n/** Every label the card renders; a partial namespace counts as missing. */\nconst hasAllLabels = (copy?: DebtsBlockCopy): copy is DebtsBlockCopy =>\n  !!copy?.balance_label &&\n  !!copy.payoff_date_label &&\n  !!copy.monthly_payment_label &&\n  !!copy.interest_rate_label\n\n/**\n * Debts component block — the content card for the Debt Payoff Strategies beat.\n *\n * The debt account's facts arrive flat on `instance_slot` (V2 contract — no `instance_slot_data`):\n * the balance (`amount`), `payoff_date`, `monthly_payment`, `interest_rate`, plus the shared\n * account/institution fields. Row labels come from `insights_feed.debts_block` copy, which\n * ships separately: until it has, the card shows the account row only (never an unlabelled number)\n * and warns once per mount so the rollout gap is traceable.\n *\n * `instance_slot.variant` is not read yet: the architecture doc's other Debts branches (Debt\n * Summary, Interest Summary) have no design, so there is one look. Introduce a per-variant\n * registry (`createVariantBlock` + a `layout.ts` table, as `AccountBlock` does) with the second\n * variant, not before.\n */\nconst DebtsBlock = ({ payload }: DebtsBlockProps) => {\n  const copy = useGlobalCopyStore().insights_feed?.debts_block\n  const labels = hasAllLabels(copy) ? copy : undefined\n  const {\n    account_name,\n    account_type,\n    amount,\n    institution_guid,\n    institution_name,\n    interest_rate,\n    monthly_payment,\n    payoff_date,\n    status_text,\n  } = payload.instance_slot\n\n  React.useEffect(() => {\n    if (labels) return\n    console.warn(\n      `debts_block: ${copy ? 'copy incomplete' : 'copy namespace missing'}; rendering the account row only`,\n    )\n  }, [copy, labels])\n\n  // A row with no value (or an unparseable date) is dropped rather than rendered blank.\n  const payoffDate = payoff_date ? parseDueDate(payoff_date) : null\n  const stats: DebtPayoffStat[] = []\n  if (labels && payoffDate) {\n    stats.push({\n      label: labels.payoff_date_label,\n      value: formatDate(payoffDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n    })\n  }\n  if (labels && monthly_payment != null) {\n    stats.push({\n      label: labels.monthly_payment_label,\n      value: formatCurrency(monthly_payment, '0,0.00'),\n    })\n  }\n  if (labels && interest_rate != null) {\n    // `interest_rate` arrives as a percentage (19.99); Intl's percent style expects a fraction.\n    stats.push({ label: labels.interest_rate_label, value: formatPercentage(interest_rate / 100) })\n  }\n\n  const hasBalance = labels !== undefined && amount != null\n\n  return (\n    <DebtPayoffCard\n      {...PAYOFF_STYLE}\n      balance={hasBalance ? formatCurrency(amount, '0,0.00') : undefined}\n      balanceLabel={hasBalance ? labels.balance_label : undefined}\n      logo={\n        <DepositLogo\n          iconName={iconFor(account_type)}\n          institutionGuid={institution_guid ?? ''}\n          institutionName={institution_name ?? ''}\n        />\n      }\n      name={account_name}\n      stats={stats}\n      statusLabel={status_text}\n      subtitle={account_type}\n    />\n  )\n}\n\nexport default DebtsBlock\n"],"mappings":";;;;;;;;AAqBA,IAAa,IAAyC;AAAA,EACpD,SAAS;AAAA,EACT,MAAM;AAAA,IAAE,SAAS;AAAA,IAAmB,YAAY;AAAA,EAAe;AACjE,GAGM,IAAoB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAe;AAAA,EAAe;AAAY,CAAC,GAExE,IAAA,CAAW,MACf,EAAkB,KAAK,KAAe,IAAI,KAAK,EAAE,YAAY,CAAC,IAC1D,gBACA,mBAGA,IAAA,CAAgB,MACpB,CAAC,CAAC,GAAM,iBACR,CAAC,CAAC,EAAK,qBACP,CAAC,CAAC,EAAK,yBACP,CAAC,CAAC,EAAK,qBAgBH,IAAA,CAAc,EAAE,SAAA,EAAA,MAA+B;AACnD,QAAM,IAAO,EAAmB,EAAE,eAAe,aAC3C,IAAS,EAAa,CAAI,IAAI,IAAO,QACrC,EACJ,cAAA,GACA,cAAA,GACA,QAAA,GACA,kBAAA,GACA,kBAAA,GACA,eAAA,GACA,iBAAA,GACA,aAAA,GACA,aAAA,EAAA,IACE,EAAQ;AAEZ,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAI,KACJ,QAAQ,KACN,gBAAgB,IAAO,oBAAoB,wBAAA,kCAC7C;AAAA,EACF,GAAG,CAAC,GAAM,CAAM,CAAC;AAGjB,QAAM,IAAa,IAAc,EAAa,CAAW,IAAI,MACvD,IAA0B,CAAC;AACjC,EAAI,KAAU,KACZ,EAAM,KAAK;AAAA,IACT,OAAO,EAAO;AAAA,IACd,OAAO,EAAW,GAAY,EAAkB,gBAAgB;AAAA,EAClE,CAAC,GAEC,KAAU,KAAmB,QAC/B,EAAM,KAAK;AAAA,IACT,OAAO,EAAO;AAAA,IACd,OAAO,EAAe,GAAiB,QAAQ;AAAA,EACjD,CAAC,GAEC,KAAU,KAAiB,QAE7B,EAAM,KAAK;AAAA,IAAE,OAAO,EAAO;AAAA,IAAqB,OAAO,EAAiB,IAAgB,GAAG;AAAA,EAAE,CAAC;AAGhG,QAAM,IAAa,MAAW,UAAa,KAAU;AAErD,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,GAAI;AAAA,IACJ,SAAS,IAAa,EAAe,GAAQ,QAAQ,IAAI;AAAA,IACzD,cAAc,IAAa,EAAO,gBAAgB;AAAA,IAClD,MACE,gBAAA,EAAC,GAAD;AAAA,MACE,UAAU,EAAQ,CAAY;AAAA,MAC9B,iBAAiB,KAAoB;AAAA,MACrC,iBAAiB,KAAoB;AAAA,IACtC,CAAA;AAAA,IAEH,MAAM;AAAA,IACC,OAAA;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EACX,CAAA;AAEL"}

package/dist/insights-v2/blocks/ComponentBlocks/DebtsBlock/index.d.ts

@@ -0,0 +1 @@
+export { default as DebtsBlock } from './DebtsBlock';

package/dist/insights-v2/blocks/ComponentBlocks/index.d.ts

@@ -2,6 +2,7 @@ export * from './AccountBlock';
 export * from './AccountSwitchBlock';
 export * from './DirectDepositBlock';
 export * from './BudgetBlock';
+export * from './DebtsBlock';
 export * from './SaveExtraBlock';
 export * from './SavingsOpportunityBlock';
 export * from './TransactionBlock';