@mx-cartographer/experiences 9.6.13 → 9.6.15

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

@@ -1,24 +1,28 @@
 import { InsightsPayload } from '../../../../core';
-import { DebtPayoffCardStyleProps } from '../../../components/DebtPayoffCard';
+export { PAYOFF_STYLE } from './layout';
 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.
+ * `instance_slot.variant` picks the card from `./layout.ts` through `resolveVariantConfig`, as
+ * `AccountBlock` does:
  *
- * 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.
+ * - `projected_payoff` — one account on the `DebtPayoffCard`. Its facts arrive flat on
+ *   `instance_slot` (the shape it shipped with): the balance (`amount`), `payoff_date`,
+ *   `monthly_payment`, `interest_rate`, plus the shared account/institution fields.
+ * - `debt_summary` — the beat's several debt accounts on a `TransactionListCard`, read from
+ *   `instance_slot.data`: one row per account from `series` (pre-localized `logo`, `primary_text`
+ *   name, `secondary_text` rate, `amount` balance, in the order sent), an optional `header_text`,
+ *   and the total owed (`amount`) as the footer. With no rows there is nothing to summarize and the
+ *   block renders nothing.
  *
- * `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.
+ * Captions and payoff row labels come from `insights_feed.debts_block` copy, which ships
+ * separately. Each variant needs only its own keys: until they have shipped, the card shows what
+ * needs no copy (the account row, the summary rows) but never an unlabelled figure, and warns once
+ * per mount so the rollout gap is traceable. A row with no value (or an unparseable date) is
+ * dropped rather than rendered blank.
  */
 declare const DebtsBlock: ({ payload }: DebtsBlockProps) => import("react/jsx-runtime").JSX.Element;
 export default DebtsBlock;

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

@@ -1,56 +1,77 @@
-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([
+import { DATE_FORMATS_INTL as R, formatDate as k } from "../../../../core/constants/DateFormats.es.js";
+import { useGlobalCopyStore as F } from "../../../../common/context/hooks.es.js";
+import { slot as f } from "../../../../core/types/Insights.es.js";
+import { formatCurrency as i, formatPercentage as N } from "../../../../core/utils/NumberFormatting.es.js";
+import P from "../../../components/LogoFromGuid.es.js";
+import { DepositLogo as B } from "../../../components/ComponentBlocks/DepositLogo.es.js";
+import { resolveVariantConfig as Y } from "../../resolveVariantConfig.es.js";
+import G from "../../../components/DebtPayoffCard.es.js";
+import j from "../../../components/TransactionListCard.es.js";
+import { parseDueDate as I } from "../UpcomingBillBlock/UpcomingBillBlock.es.js";
+import { DEBTS_LAYOUT as H, debtsBlockVariant as M } from "./layout.es.js";
+import V from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { useTheme as z } from "@mui/material/styles";
+var U = 32, W = /* @__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 ?? ""
+]), Z = (t) => W.has((t ?? "").trim().toLowerCase()) ? "credit_card" : "account_balance", $ = (t) => typeof t == "object" && t !== null && typeof t.primary_text == "string", q = (t) => !!t?.balance_label && !!t.payoff_date_label && !!t.monthly_payment_label && !!t.interest_rate_label, ct = ({ payload: t }) => {
+  const T = z(), o = F().insights_feed?.debts_block, { instance_slot: u } = t, { data: s, variant: A } = u, _ = Y(H, A, M.ProjectedPayoff, "DebtsBlock"), p = _.card === "summary", e = q(o) ? o : void 0, m = o?.total_balance_label, b = p ? !!m : !!e;
+  if (V.useEffect(() => {
+    b || console.warn(`debts_block: ${o ? "copy incomplete" : "copy namespace missing"}; rendering without its labelled figures`);
+  }, [o, b]), p) {
+    const r = f(s, "series"), O = (Array.isArray(r) ? r : []).filter($).map((a) => ({
+      amount: typeof a.amount == "number" ? i(a.amount, "0,0.00") : "",
+      leading: /* @__PURE__ */ l(P, {
+        logo: a.logo,
+        size: U
+      }),
+      subtitle: typeof a.secondary_text == "string" ? a.secondary_text : "",
+      title: a.primary_text
+    })), L = f(s, "header_text"), c = f(s, "amount");
+    return /* @__PURE__ */ l(j, {
+      background: T.palette.primary.lighter,
+      footer: m && typeof c == "number" && Number.isFinite(c) ? {
+        amount: i(c, "0,0.00"),
+        label: m
+      } : void 0,
+      header: typeof L == "string" ? L : void 0,
+      rows: O
+    });
+  }
+  const { account_name: C, account_type: d, amount: y, institution_guid: S, institution_name: x, interest_rate: g, monthly_payment: h, payoff_date: v, status_text: E } = u, n = [];
+  if (e) {
+    const r = v ? I(v) : null;
+    r && n.push({
+      label: e.payoff_date_label,
+      value: k(r, R.MONTH_SHORT_YEAR)
+    }), h != null && n.push({
+      label: e.monthly_payment_label,
+      value: i(h, "0,0.00")
+    }), g != null && n.push({
+      label: e.interest_rate_label,
+      value: N(g / 100)
+    });
+  }
+  const D = e !== void 0 && y != null;
+  return /* @__PURE__ */ l(G, {
+    ..._.style,
+    balance: D ? i(y, "0,0.00") : void 0,
+    balanceLabel: D ? e.balance_label : void 0,
+    logo: /* @__PURE__ */ l(B, {
+      iconName: Z(d),
+      institutionGuid: S ?? "",
+      institutionName: x ?? ""
     }),
-    name: u,
-    stats: o,
-    statusLabel: d,
-    subtitle: l
+    name: C,
+    stats: n,
+    statusLabel: E,
+    subtitle: d
   });
 };
 export {
-  A as PAYOFF_STYLE,
-  B as default
+  ct as default
 };
 
 //# sourceMappingURL=DebtsBlock.es.js.map

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

@@ -1 +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"}
+{"version":3,"file":"DebtsBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/DebtsBlock/DebtsBlock.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { useGlobalCopyStore } from '../../../../common'\nimport { slot, type InsightsPayload, type InstanceSlotRow } 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, { type DebtPayoffStat } from '../../../components/DebtPayoffCard'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { parseDueDate } from '../UpcomingBillBlock/UpcomingBillBlock'\n\nimport { DEBTS_LAYOUT, debtsBlockVariant } from './layout'\n\n// The card story reads the block's look from here.\nexport { PAYOFF_STYLE } from './layout'\n\ninterface DebtsBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\nconst ROW_LOGO_SIZE = 32\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/** A summary row ditto can draw: an object with a name. Anything else in `series` is skipped. */\nconst isNamedRow = (row: unknown): row is InstanceSlotRow & { primary_text: string } =>\n  typeof row === 'object' &&\n  row !== null &&\n  typeof (row as InstanceSlotRow).primary_text === 'string'\n\n/** Every label the payoff 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 * `instance_slot.variant` picks the card from `./layout.ts` through `resolveVariantConfig`, as\n * `AccountBlock` does:\n *\n * - `projected_payoff` — one account on the `DebtPayoffCard`. Its facts arrive flat on\n *   `instance_slot` (the shape it shipped with): the balance (`amount`), `payoff_date`,\n *   `monthly_payment`, `interest_rate`, plus the shared account/institution fields.\n * - `debt_summary` — the beat's several debt accounts on a `TransactionListCard`, read from\n *   `instance_slot.data`: one row per account from `series` (pre-localized `logo`, `primary_text`\n *   name, `secondary_text` rate, `amount` balance, in the order sent), an optional `header_text`,\n *   and the total owed (`amount`) as the footer. With no rows there is nothing to summarize and the\n *   block renders nothing.\n *\n * Captions and payoff row labels come from `insights_feed.debts_block` copy, which ships\n * separately. Each variant needs only its own keys: until they have shipped, the card shows what\n * needs no copy (the account row, the summary rows) but never an unlabelled figure, and warns once\n * per mount so the rollout gap is traceable. A row with no value (or an unparseable date) is\n * dropped rather than rendered blank.\n */\nconst DebtsBlock = ({ payload }: DebtsBlockProps) => {\n  const theme = useTheme()\n  const copy = useGlobalCopyStore().insights_feed?.debts_block\n  const { instance_slot } = payload\n  const { data, variant } = instance_slot\n\n  const layout = resolveVariantConfig(\n    DEBTS_LAYOUT,\n    variant,\n    debtsBlockVariant.ProjectedPayoff,\n    'DebtsBlock',\n  )\n  const isSummary = layout.card === 'summary'\n\n  const labels = hasAllLabels(copy) ? copy : undefined\n  const totalLabel = copy?.total_balance_label\n  const hasCopy = isSummary ? !!totalLabel : !!labels\n\n  React.useEffect(() => {\n    if (hasCopy) return\n    console.warn(\n      `debts_block: ${copy ? 'copy incomplete' : 'copy namespace missing'}; rendering without its labelled figures`,\n    )\n  }, [copy, hasCopy])\n\n  if (isSummary) {\n    // `slot()` is an unchecked cast over backend data, so every value is narrowed before use.\n    const series = slot<unknown[]>(data, 'series')\n    const rows = (Array.isArray(series) ? series : []).filter(isNamedRow).map((row) => ({\n      amount: typeof row.amount === 'number' ? formatCurrency(row.amount, '0,0.00') : '',\n      leading: <LogoFromGuid logo={row.logo} size={ROW_LOGO_SIZE} />,\n      subtitle: typeof row.secondary_text === 'string' ? row.secondary_text : '',\n      title: row.primary_text,\n    }))\n    const header = slot<unknown>(data, 'header_text')\n    const total = slot<unknown>(data, 'amount')\n\n    return (\n      <TransactionListCard\n        background={theme.palette.primary.lighter}\n        footer={\n          totalLabel && typeof total === 'number' && Number.isFinite(total)\n            ? { amount: formatCurrency(total, '0,0.00'), label: totalLabel }\n            : undefined\n        }\n        header={typeof header === 'string' ? header : undefined}\n        rows={rows}\n      />\n    )\n  }\n\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  } = instance_slot\n\n  const stats: DebtPayoffStat[] = []\n  if (labels) {\n    const payoffDate = payoff_date ? parseDueDate(payoff_date) : null\n    if (payoffDate) {\n      stats.push({\n        label: labels.payoff_date_label,\n        value: formatDate(payoffDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n      })\n    }\n    if (monthly_payment != null) {\n      stats.push({\n        label: labels.monthly_payment_label,\n        value: formatCurrency(monthly_payment, '0,0.00'),\n      })\n    }\n    if (interest_rate != null) {\n      // `interest_rate` arrives as a percentage (19.99); Intl's percent style expects a fraction.\n      stats.push({\n        label: labels.interest_rate_label,\n        value: formatPercentage(interest_rate / 100),\n      })\n    }\n  }\n\n  const hasBalance = labels !== undefined && amount != null\n\n  return (\n    <DebtPayoffCard\n      {...layout.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":"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"}

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

@@ -0,0 +1,17 @@
+import { DebtPayoffCardStyleProps } from '../../../components/DebtPayoffCard';
+export declare const debtsBlockVariant: {
+    /** Debt Payoff Strategies, one account: balance plus projected payoff / monthly payment / rate rows. */
+    readonly ProjectedPayoff: "projected_payoff";
+    /** Debt Payoff Strategies, several accounts: one row per debt (balance, rate) and the total owed. */
+    readonly DebtSummary: "debt_summary";
+};
+export type DebtsBlockVariant = (typeof debtsBlockVariant)[keyof typeof debtsBlockVariant];
+export interface DebtsBlockLayoutConfig {
+    /** Which card the variant draws: the single-account payoff card or the multi-account summary list. */
+    card: 'payoff' | 'summary';
+    /** Payoff card slot + pill tokens. */
+    style?: DebtPayoffCardStyleProps;
+}
+/** `projected_payoff` look: primary-tinted slot and pill. The card story mirrors it from here. */
+export declare const PAYOFF_STYLE: DebtPayoffCardStyleProps;
+export declare const DEBTS_LAYOUT: Record<string, DebtsBlockLayoutConfig>;

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

@@ -0,0 +1,24 @@
+var r = {
+  ProjectedPayoff: "projected_payoff",
+  DebtSummary: "debt_summary"
+}, e = {
+  bgcolor: "primary.lighter",
+  pill: {
+    bgcolor: "primary.lighter",
+    labelColor: "text.primary"
+  }
+}, a = {
+  card: "payoff",
+  style: e
+}, o = {
+  [r.ProjectedPayoff]: a,
+  [r.DebtSummary]: { card: "summary" },
+  default: a
+};
+export {
+  o as DEBTS_LAYOUT,
+  e as PAYOFF_STYLE,
+  r as debtsBlockVariant
+};
+
+//# sourceMappingURL=layout.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/DebtsBlock/layout.ts"],"sourcesContent":["import type { DebtPayoffCardStyleProps } from '../../../components/DebtPayoffCard'\n\nexport const debtsBlockVariant = {\n  /** Debt Payoff Strategies, one account: balance plus projected payoff / monthly payment / rate rows. */\n  ProjectedPayoff: 'projected_payoff',\n  /** Debt Payoff Strategies, several accounts: one row per debt (balance, rate) and the total owed. */\n  DebtSummary: 'debt_summary',\n} as const\n\nexport type DebtsBlockVariant = (typeof debtsBlockVariant)[keyof typeof debtsBlockVariant]\n\nexport interface DebtsBlockLayoutConfig {\n  /** Which card the variant draws: the single-account payoff card or the multi-account summary list. */\n  card: 'payoff' | 'summary'\n  /** Payoff card slot + pill tokens. */\n  style?: DebtPayoffCardStyleProps\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\nconst PROJECTED_PAYOFF: DebtsBlockLayoutConfig = { card: 'payoff', style: PAYOFF_STYLE }\n\nexport const DEBTS_LAYOUT: Record<string, DebtsBlockLayoutConfig> = {\n  [debtsBlockVariant.ProjectedPayoff]: PROJECTED_PAYOFF,\n  [debtsBlockVariant.DebtSummary]: { card: 'summary' },\n  // Neutral fallback for an unknown variant: the payoff card. `resolveVariantConfig` warns first.\n  default: PROJECTED_PAYOFF,\n}\n"],"mappings":"AAEA,IAAa,IAAoB;AAAA,EAE/B,iBAAiB;AAAA,EAEjB,aAAa;AACf,GAYa,IAAyC;AAAA,EACpD,SAAS;AAAA,EACT,MAAM;AAAA,IAAE,SAAS;AAAA,IAAmB,YAAY;AAAA,EAAe;AACjE,GAEM,IAA2C;AAAA,EAAE,MAAM;AAAA,EAAU,OAAO;AAAa,GAE1E,IAAuD;AAAA,EACjE,CAAA,EAAkB,eAAA,GAAkB;AAAA,EACpC,CAAA,EAAkB,WAAA,GAAc,EAAE,MAAM,UAAU;AAAA,EAEnD,SAAS;AACX"}

package/dist/insights-v2/components/BaseLayout.es.js

@@ -1,30 +1,32 @@
-import { useAppConfig as V, useGlobalCopyStore as j, useInsightsV2Store as z } from "../../common/context/hooks.es.js";
-import { BeatActionsProvider as G } from "../beatActions.es.js";
-import { isContactSupportCtaDisabled as K } from "../actionBlocks/ContactSupportActionBlock.es.js";
-import { logoFromRef as X } from "./shared/EntityLogo.es.js";
-import { actionBlocksKey as W } from "../mappings/actionBlocksKey.es.js";
-import Y from "./FeedbackDialog.es.js";
-import { ErrorCard as q } from "./ErrorCard.es.js";
+import { useAppConfig as U, useGlobalCopyStore as j, useGlobalStore as z, useInsightsV2Store as K } from "../../common/context/hooks.es.js";
+import { BeatActionsProvider as X } from "../beatActions.es.js";
+import { isContactSupportCtaDisabled as W } from "../actionBlocks/ContactSupportActionBlock.es.js";
+import { logoFromRef as Y } from "./shared/EntityLogo.es.js";
+import { actionBlocksKey as $ } from "../mappings/actionBlocksKey.es.js";
+import { reportCtaClick as q } from "../ctaActions/runCtaAction.es.js";
 import { useBeatCtaActions as J } from "../ctaActions/useCtaAction.es.js";
-import { blocks as Q } from "../mappings/blocks.es.js";
-import Z from "./Footer.es.js";
-import $ from "./Header.es.js";
-import { FeedbackBar as oo } from "./FeedbackBar.es.js";
-import { DismissInsightDialog as to } from "./DismissInsightDialog.es.js";
-import { HiddenConfirmationCard as io } from "./HiddenConfirmationCard.es.js";
-import { LoadingCard as eo } from "./LoadingCard.es.js";
-import { ObsolesceBanner as ro } from "./ObsolesceBanner.es.js";
-import { ActionBlockLayer as no } from "../actionBlocks/ActionBlockLayer.es.js";
-import { useBeatFeedbackFlow as ao } from "../hooks/useBeatFeedbackFlow.es.js";
-import { observer as so } from "mobx-react-lite";
+import Q from "./FeedbackDialog.es.js";
+import { ErrorCard as Z } from "./ErrorCard.es.js";
+import { blocks as oo } from "../mappings/blocks.es.js";
+import to from "./Footer.es.js";
+import io from "./Header.es.js";
+import { FeedbackBar as eo } from "./FeedbackBar.es.js";
+import { DismissInsightDialog as ro } from "./DismissInsightDialog.es.js";
+import { HiddenConfirmationCard as no } from "./HiddenConfirmationCard.es.js";
+import { LoadingCard as so } from "./LoadingCard.es.js";
+import { ObsolesceBanner as ao } from "./ObsolesceBanner.es.js";
+import { ActionBlockLayer as lo } from "../actionBlocks/ActionBlockLayer.es.js";
+import { useBeatFeedbackFlow as co } from "../hooks/useBeatFeedbackFlow.es.js";
+import { useMemo as mo } from "react";
+import { observer as po } from "mobx-react-lite";
 import g from "@mui/material/Stack";
-import { P as lo, Text as co } from "@mxenabled/mxui";
-import m from "@mui/material/Button";
+import { P as uo, Text as fo } from "@mxenabled/mxui";
+import p from "@mui/material/Button";
 import { ChevronRight as D } from "@mxenabled/mx-icons";
-import { Fragment as mo, jsx as t, jsxs as s } from "react/jsx-runtime";
-import po from "@mui/material/Box";
-import fo from "@mui/material/Card";
-var uo = {}, bo = {
+import { Fragment as bo, jsx as t, jsxs as l } from "react/jsx-runtime";
+import Co from "@mui/material/Box";
+import ho from "@mui/material/Card";
+var yo = {}, go = {
   position: "absolute",
   top: 0,
   left: 0,
@@ -33,7 +35,7 @@ var uo = {}, bo = {
   backgroundColor: "background.default",
   opacity: 0.7,
   zIndex: 1
-}, Co = {
+}, ko = {
   alignItems: "center",
   alignSelf: "flex-start",
   display: "flex",
@@ -41,54 +43,62 @@ var uo = {}, bo = {
   height: 44,
   px: 2,
   textTransform: "none"
-}, zo = so(({ beat: e, beatActions: l = uo, obsolete: p, isLoading: L = !1, isError: O = !1 }) => {
-  const I = j(), w = z(), { config: A } = V(), o = ao(e, l), { runCta: F, primary: k, secondary: x } = J(e, l, e.insights_payload?.primary_cta, e.insights_payload?.secondary_cta);
-  if (O) return /* @__PURE__ */ t(q, {});
-  const i = e.insights_payload;
-  if (!i || o.cardState === "dismissed") return null;
-  const { instance_slot: E, primary_cta: r, secondary_cta: n, sub_title: N, title: R, widget_type: H, guid: _, dismissed_at: M } = i, { block: P } = E, U = N ?? (i.subtitle ? {
-    logo: X(i.logo),
-    text: i.subtitle
-  } : void 0), c = (y) => K(y, A, l.onContactSupport), v = async (y, h) => {
-    if (!c(h.block)) {
-      if (h.block === W.CONTACT_SUPPORT_ACTION_BLOCK) {
-        l.onContactSupport?.();
+}, $o = po(({ beat: i, beatActions: n = yo, obsolete: u, isLoading: L = !1, isError: O = !1 }) => {
+  const I = j(), w = K(), { config: A } = U(), o = co(i, n), F = z(), { runCta: E, primary: k, secondary: x } = J(i, n, i.insights_payload?.primary_cta, i.insights_payload?.secondary_cta), c = i.insights_payload?.widget_type === "mini", M = mo(() => ({
+    ...o.wrappedActions,
+    beat: i
+  }), [o.wrappedActions, i]);
+  if (O) return /* @__PURE__ */ t(Z, {});
+  const e = i.insights_payload;
+  if (!e || o.cardState === "dismissed") return null;
+  const { instance_slot: N, primary_cta: r, secondary_cta: s, sub_title: R, title: H, guid: _, dismissed_at: P } = e, { block: V } = N, G = R ?? (e.subtitle ? {
+    logo: Y(e.logo),
+    text: e.subtitle
+  } : void 0), d = (m) => W(m, A, n.onContactSupport), v = async (m, y) => {
+    if (!d(y.block)) {
+      if (y.block === $.CONTACT_SUPPORT_ACTION_BLOCK) {
+        q({
+          beat: i,
+          stores: F,
+          hostActions: n,
+          slot: m
+        }), n.onContactSupport?.();
         return;
       }
-      await F(y, h);
+      await E(m, y);
     }
-  }, S = Q[P], d = H === "mini", a = i.in_description_cta, f = !d && a?.label && a.block ? a : void 0, u = r?.label ?? (f ? void 0 : a?.label), B = !d && !!r?.label, T = !d && !!n?.label, b = I.insights_feed?.general, C = p?.state === "not_refreshable" && !M && !!b;
-  return /* @__PURE__ */ t(G, {
-    value: o.wrappedActions,
-    children: /* @__PURE__ */ s(g, {
+  }, S = oo[V], a = e.in_description_cta, f = !c && a?.label && a.block ? a : void 0, b = r?.label ?? (f ? void 0 : a?.label), B = !c && !!r?.label, T = !c && !!s?.label, C = I.insights_feed?.general, h = u?.state === "not_refreshable" && !P && !!C;
+  return /* @__PURE__ */ t(X, {
+    value: M,
+    children: /* @__PURE__ */ l(g, {
       sx: { mb: 16 },
       children: [
-        o.cardState === "confirming" ? /* @__PURE__ */ t(io, {
+        o.cardState === "confirming" ? /* @__PURE__ */ t(no, {
           onClose: o.collapseConfirmation,
           onLeaveFeedback: o.openHideSurvey,
           onUndo: o.undoDismiss
-        }) : /* @__PURE__ */ s(mo, { children: [p && b && /* @__PURE__ */ t(ro, {
-          ...p,
-          copy: b
-        }), /* @__PURE__ */ s(fo, {
-          inert: C,
-          sx: { ...C && {
+        }) : /* @__PURE__ */ l(bo, { children: [u && C && /* @__PURE__ */ t(ao, {
+          ...u,
+          copy: C
+        }), /* @__PURE__ */ l(ho, {
+          inert: h,
+          sx: { ...h && {
             position: "relative",
             zIndex: 2,
             pointerEvents: "none"
           } },
           children: [
-            C && /* @__PURE__ */ t(po, { sx: bo }),
-            /* @__PURE__ */ t($, {
-              isMini: d,
-              subtitle: U,
-              title: R ?? ""
+            h && /* @__PURE__ */ t(Co, { sx: go }),
+            /* @__PURE__ */ t(io, {
+              isMini: c,
+              subtitle: G,
+              title: H ?? ""
             }),
-            L ? /* @__PURE__ */ t(eo, {}) : S && /* @__PURE__ */ t(S, {
+            L ? /* @__PURE__ */ t(so, {}) : S && /* @__PURE__ */ t(S, {
               beatGuid: _,
-              payload: i
+              payload: e
             }),
-            /* @__PURE__ */ s(g, {
+            /* @__PURE__ */ l(g, {
               sx: {
                 gap: 6,
                 pb: 16,
@@ -96,11 +106,11 @@ var uo = {}, bo = {
                 px: 16
               },
               children: [
-                /* @__PURE__ */ t(lo, {
-                  dangerouslySetInnerHTML: { __html: i.description.html_text },
+                /* @__PURE__ */ t(uo, {
+                  dangerouslySetInnerHTML: { __html: e.description.html_text },
                   variant: "subtitle2"
                 }),
-                f && /* @__PURE__ */ t(m, {
+                f && /* @__PURE__ */ t(p, {
                   endIcon: /* @__PURE__ */ t(D, {}),
                   onClick: () => w.openActionDrawer({
                     guid: _,
@@ -113,7 +123,7 @@ var uo = {}, bo = {
                   },
                   children: f.label
                 }),
-                !a?.label && e?.in_description_cta && /* @__PURE__ */ t(m, {
+                !a?.label && i?.in_description_cta && /* @__PURE__ */ t(p, {
                   endIcon: /* @__PURE__ */ t(D, {}),
                   onClick: () => {
                   },
@@ -122,53 +132,53 @@ var uo = {}, bo = {
                     p: 4,
                     width: "max-content"
                   },
-                  children: e.in_description_cta
+                  children: i.in_description_cta
                 })
               ]
             }),
-            (u || T) && /* @__PURE__ */ s(g, {
+            (b || T) && /* @__PURE__ */ l(g, {
               sx: {
                 gap: 8,
                 pb: 16,
                 px: 16
               },
               children: [
-                u && !B && /* @__PURE__ */ t(co, {
+                b && !B && /* @__PURE__ */ t(fo, {
                   color: "primary.main",
-                  sx: Co,
+                  sx: ko,
                   variant: "button",
-                  children: u
+                  children: b
                 }),
-                B && r && /* @__PURE__ */ t(m, {
-                  "aria-disabled": c(r.block) || k.disabled,
+                B && r && /* @__PURE__ */ t(p, {
+                  "aria-disabled": d(r.block) || k.disabled,
                   disabled: k.disabled,
                   onClick: () => v("primary", r),
-                  sx: { ...c(r.block) && { color: "text.disabled" } },
+                  sx: { ...d(r.block) && { color: "text.disabled" } },
                   variant: "outlined",
                   children: r.label
                 }),
-                T && n && /* @__PURE__ */ t(m, {
-                  "aria-disabled": c(n.block) || x.disabled,
+                T && s && /* @__PURE__ */ t(p, {
+                  "aria-disabled": d(s.block) || x.disabled,
                   color: "secondary",
                   disabled: x.disabled,
-                  onClick: () => v("secondary", n),
-                  children: n.label
+                  onClick: () => v("secondary", s),
+                  children: s.label
                 })
               ]
             }),
-            /* @__PURE__ */ t(oo, {
+            /* @__PURE__ */ t(eo, {
               onTellUsMore: o.openRatingSurvey,
               show: o.isFeedbackBarShown
             })
           ]
         })] }),
-        /* @__PURE__ */ t(no, { beat: e }),
-        /* @__PURE__ */ t(to, {
+        /* @__PURE__ */ t(lo, { beat: i }),
+        /* @__PURE__ */ t(ro, {
           isOpen: o.isDismissOpen,
           onClose: o.closeDismissDialog,
           onDismiss: o.confirmDismiss
         }),
-        o.isSurveyOpen && /* @__PURE__ */ t(Y, {
+        o.isSurveyOpen && /* @__PURE__ */ t(Q, {
           characterLimitLabel: o.survey.characterLimitLabel,
           closeAriaLabel: o.survey.closeAriaLabel,
           isOpen: !0,
@@ -181,13 +191,13 @@ var uo = {}, bo = {
           secondaryText: o.survey.backText,
           title: o.survey.title
         }),
-        o.cardState === "visible" && i.footer && /* @__PURE__ */ t(Z, { footer: i.footer })
+        o.cardState === "visible" && e.footer && /* @__PURE__ */ t(to, { footer: e.footer })
       ]
     })
   });
 });
 export {
-  zo as default
+  $o as default
 };
 
 //# sourceMappingURL=BaseLayout.es.js.map