@mx-cartographer/experiences 9.4.58 → 9.4.60

package/dist/microinsights/cards/InsightCard.es.js

@@ -1,75 +1,119 @@
-import { ON_CLICK_EVENT as C, ON_VIEW_EVENT as O, ON_VIEW_FIRST_TIME_EVENT as T } from "../constants/Analytics.es.js";
-import { BeatIcon as V } from "../beaticons/BeatIcon.es.js";
-import { useCopyStore as N, useEvent as k, useInsightsMicroWidgetStore as v } from "../context/hooks.es.js";
-import M from "../MicroCardTemplate.es.js";
-import { useEffect as c } from "react";
-import { jsx as s } from "react/jsx-runtime";
-import { useInView as w } from "react-intersection-observer";
-var K = ({ ariaLabel: p, beat: i, elevation: l, index: m, isActiveCard: a, onCardClick: n, posthog: t, widthOverrides: d, variant: g, showIcon: u, heightOverrides: f }) => {
-  const { ref: h, inView: r } = w({ threshold: 1 }), { cardsCopy: E } = N(), { onEvent: o } = k(), { updateBeat: I, updateOffer: y } = v();
-  c(() => {
-    r && (i.has_been_displayed ? o(O(i.template)) : (i.guid.startsWith("OFR") ? y({
+import { resolveInsightRender as k } from "../../insights-v2/resolveInsightRender.es.js";
+import x from "../../insights-v2/components/LogoFromGuid.es.js";
+import B from "../../insights-v2/components/InsightErrorCard.es.js";
+import { ON_CLICK_EVENT as M, ON_VIEW_EVENT as R, ON_VIEW_FIRST_TIME_EVENT as W } from "../constants/Analytics.es.js";
+import S from "../beaticons/BeatMaterialIcon.es.js";
+import { BeatIcon as F } from "../beaticons/BeatIcon.es.js";
+import { useCopyStore as O, useEvent as P, useInsightsMicroWidgetStore as A } from "../context/hooks.es.js";
+import E from "../MicroCardTemplate.es.js";
+import { useEffect as I } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { alpha as j, useTheme as v } from "@mui/material/styles";
+import w from "@mui/material/Box";
+import { useInView as z } from "react-intersection-observer";
+var G = 32, ei = ({ ariaLabel: l, beat: i, elevation: g, index: s, isActiveCard: c, onCardClick: u, posthog: o, widthOverrides: m, variant: f, showIcon: h, heightOverrides: a }) => {
+  const { ref: _, inView: n } = z({ threshold: 1 }), C = v(), { cardsCopy: T } = O(), { onEvent: d } = P(), { updateBeat: N, updateOffer: V } = A();
+  I(() => {
+    n && (i.has_been_displayed ? d(R(i.template)) : (i.guid.startsWith("OFR") ? V({
       ...i,
       has_been_displayed: !0
-    }) : I({
+    }) : N({
       ...i,
       has_been_displayed: !0
-    }), o(T(i.template))));
-  }, [r]), c(() => {
-    if (r && i) if (i.template === "MarketingOffer") {
+    }), d(W(i.template))));
+  }, [n]), I(() => {
+    if (n && i) if (i.template === "MarketingOffer") {
       const e = i;
-      t?.capture("viewed_messaging_insight", {
+      o?.capture("viewed_messaging_insight", {
         template: i.template,
         campaign_guid: e.campaign_guid,
         campaign_name: e.pulse_campaign_name,
         offer_guid: e.guid,
         user_guid: e.user_guid
       });
-    } else t?.capture("viewed_insight", {
+    } else o?.capture("viewed_insight", {
       beat_guid: i.guid,
       template: i.template,
-      position: m
+      position: s
     });
   }, [
     i,
-    m,
-    r
+    s,
+    n
   ]);
-  const _ = () => {
-    if (n && n(i), o(C(i.template)), i.template === "MarketingOffer") {
+  const p = () => {
+    if (u && u(i), d(M(i.template)), i.template === "MarketingOffer") {
       const e = i;
-      t?.capture("clicked_messaging_insight", {
+      o?.capture("clicked_messaging_insight", {
         template: i.template,
         campaign_guid: e.campaign_guid,
         campaign_name: e.pulse_campaign_name,
         offer_guid: e.guid,
         user_guid: e.user_guid
       });
-    } else t?.capture("clicked_insight", {
+    } else o?.capture("clicked_insight", {
       beat_guid: i.guid,
       template: i.template,
-      position: m
+      position: s
     });
-  };
-  return /* @__PURE__ */ s(M, {
+  }, y = k(i), t = y === "v2" ? i.insights_payload : void 0;
+  if (y === "error") return /* @__PURE__ */ r(w, {
+    "aria-hidden": !c,
+    "aria-label": l,
     "aria-roledescription": "slide",
-    ariaLabel: p,
+    ref: _,
+    role: "group",
+    sx: {
+      height: a ? "100%" : 120,
+      minWidth: m ? `${m}px` : "100%",
+      my: 1
+    },
+    children: /* @__PURE__ */ r(B, { beat: i })
+  });
+  if (t) {
+    const e = t.instance_slot.data_series?.[0]?.logo;
+    return /* @__PURE__ */ r(E, {
+      "aria-roledescription": "slide",
+      ariaLabel: l,
+      description: t.description.html_text,
+      elevation: g,
+      heightOverrides: a,
+      icon: h && (e ? /* @__PURE__ */ r(x, {
+        logo: e,
+        size: G
+      }) : /* @__PURE__ */ r(S, {
+        bgColor: j(C.palette.primary.main, 0.15),
+        name: "lightbulb"
+      })),
+      isActiveCard: c,
+      onCardClick: p,
+      onPrimaryAction: p,
+      primaryActionText: t.primary_cta?.label,
+      ref: _,
+      title: t.title ?? "",
+      variant: f,
+      widthOverrides: m
+    });
+  }
+  return /* @__PURE__ */ r(E, {
+    "aria-roledescription": "slide",
+    ariaLabel: l,
     description: i?.html_micro_description && i?.html_micro_description.length > 0 ? i.html_micro_description : i.html_description || "",
-    elevation: l,
-    heightOverrides: f,
-    icon: u && /* @__PURE__ */ s(V, { beat: i }),
-    isActiveCard: a,
-    onCardClick: _,
-    onPrimaryAction: _,
-    primaryActionText: i.micro_call_to_action || E?.micro_card_cta,
-    ref: h,
+    elevation: g,
+    heightOverrides: a,
+    icon: h && /* @__PURE__ */ r(F, { beat: i }),
+    isActiveCard: c,
+    onCardClick: p,
+    onPrimaryAction: p,
+    primaryActionText: i.micro_call_to_action || T?.micro_card_cta,
+    ref: _,
     title: i.micro_title && i.micro_title.length > 0 ? i.micro_title : i.title,
-    variant: g,
-    widthOverrides: d
+    variant: f,
+    widthOverrides: m
   });
 };
 export {
-  K as InsightCard
+  ei as InsightCard
 };
 
 //# sourceMappingURL=InsightCard.es.js.map

package/dist/microinsights/cards/InsightCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsightCard.es.js","names":[],"sources":["../../../src/microinsights/cards/InsightCard.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport { useInView } from 'react-intersection-observer'\n\nimport { BeatIcon } from '../beaticons'\n\nimport { useCopyStore, useEvent, useInsightsMicroWidgetStore } from '../context/hooks'\n\nimport { ON_CLICK_EVENT, ON_VIEW_EVENT, ON_VIEW_FIRST_TIME_EVENT } from '../constants/Analytics'\nimport { VIEW_THRESHOLD } from '../constants/App'\n\nimport type { BeatLikeOffer, MicroInsightCardProps } from '../interfaces'\nimport type { Beat } from '../../core/types/Beat'\nimport MicroCardTemplate from '../MicroCardTemplate'\n\nexport interface InsightCardProps extends MicroInsightCardProps {\n  beat: Beat | BeatLikeOffer\n  index?: number\n}\n\nexport const InsightCard: React.FC<InsightCardProps> = ({\n  ariaLabel,\n  beat,\n  elevation,\n  index,\n  isActiveCard,\n  onCardClick,\n  posthog,\n  widthOverrides,\n  variant,\n  showIcon,\n  heightOverrides,\n}) => {\n  const { ref, inView } = useInView({\n    threshold: VIEW_THRESHOLD,\n  })\n\n  // *************** Context functions *********************\n  const { cardsCopy } = useCopyStore()\n  const { onEvent } = useEvent()\n  const { updateBeat, updateOffer } = useInsightsMicroWidgetStore()\n\n  // ************** Use Effects Hooks **********************\n  useEffect(() => {\n    if (inView) {\n      if (!beat.has_been_displayed) {\n        if (beat.guid.startsWith('OFR')) {\n          updateOffer({\n            ...beat,\n            has_been_displayed: true,\n          })\n        } else {\n          updateBeat({\n            ...beat,\n            has_been_displayed: true,\n          })\n        }\n        onEvent(ON_VIEW_FIRST_TIME_EVENT(beat.template))\n      } else {\n        onEvent(ON_VIEW_EVENT(beat.template))\n      }\n    }\n  }, [inView])\n\n  useEffect(() => {\n    if (inView && beat) {\n      if (beat.template === 'MarketingOffer') {\n        const offerBeat = beat as BeatLikeOffer\n        posthog?.capture('viewed_messaging_insight', {\n          template: beat.template,\n          campaign_guid: offerBeat.campaign_guid,\n          campaign_name: offerBeat.pulse_campaign_name,\n          offer_guid: offerBeat.guid,\n          user_guid: offerBeat.user_guid,\n        })\n      } else {\n        posthog?.capture('viewed_insight', {\n          beat_guid: beat.guid,\n          template: beat.template,\n          position: index,\n        })\n      }\n    }\n  }, [beat, index, inView])\n\n  // *************** Click handlers ************************\n  const handleClick = () => {\n    /* eslint-disable no-unused-expressions */\n    onCardClick && onCardClick(beat)\n    onEvent(ON_CLICK_EVENT(beat.template))\n\n    if (beat.template === 'MarketingOffer') {\n      const offerBeat = beat as BeatLikeOffer\n      posthog?.capture('clicked_messaging_insight', {\n        template: beat.template,\n        campaign_guid: offerBeat.campaign_guid,\n        campaign_name: offerBeat.pulse_campaign_name,\n        offer_guid: offerBeat.guid,\n        user_guid: offerBeat.user_guid,\n      })\n    } else {\n      posthog?.capture('clicked_insight', {\n        beat_guid: beat.guid,\n        template: beat.template,\n        position: index,\n      })\n    }\n  }\n\n  return (\n    <MicroCardTemplate\n      aria-roledescription=\"slide\"\n      ariaLabel={ariaLabel}\n      description={\n        beat?.html_micro_description && beat?.html_micro_description.length > 0\n          ? beat.html_micro_description\n          : beat.html_description || ''\n      }\n      elevation={elevation}\n      heightOverrides={heightOverrides}\n      icon={showIcon && <BeatIcon beat={beat} />}\n      isActiveCard={isActiveCard}\n      onCardClick={handleClick}\n      onPrimaryAction={handleClick}\n      primaryActionText={beat.micro_call_to_action || cardsCopy?.micro_card_cta}\n      ref={ref}\n      title={beat.micro_title && beat.micro_title.length > 0 ? beat.micro_title : beat.title}\n      variant={variant}\n      widthOverrides={widthOverrides}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAmBA,IAAa,IAAA,CAA2C,EACtD,WAAA,GACA,MAAA,GACA,WAAA,GACA,OAAA,GACA,cAAA,GACA,aAAA,GACA,SAAA,GACA,gBAAA,GACA,SAAA,GACA,UAAA,GACA,iBAAA,EAAA,MACI;AACJ,QAAM,EAAE,KAAA,GAAK,QAAA,EAAA,IAAW,EAAU,EAChC,WAAA,EACF,CAAC,GAGK,EAAE,WAAA,EAAA,IAAc,EAAa,GAC7B,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,YAAA,GAAY,aAAA,EAAA,IAAgB,EAA4B;AAGhE,EAAA,EAAA,MAAgB;AACd,IAAI,MACG,EAAK,qBAcR,EAAQ,EAAc,EAAK,QAAQ,CAAC,KAbhC,EAAK,KAAK,WAAW,KAAK,IAC5B,EAAY;AAAA,MACV,GAAG;AAAA,MACH,oBAAoB;AAAA,IACtB,CAAC,IAED,EAAW;AAAA,MACT,GAAG;AAAA,MACH,oBAAoB;AAAA,IACtB,CAAC,GAEH,EAAQ,EAAyB,EAAK,QAAQ,CAAC;AAAA,EAKrD,GAAG,CAAC,CAAM,CAAC,GAEX,EAAA,MAAgB;AACd,QAAI,KAAU,EACZ,KAAI,EAAK,aAAa,kBAAkB;AACtC,YAAM,IAAY;AAClB,MAAA,GAAS,QAAQ,4BAA4B;AAAA,QAC3C,UAAU,EAAK;AAAA,QACf,eAAe,EAAU;AAAA,QACzB,eAAe,EAAU;AAAA,QACzB,YAAY,EAAU;AAAA,QACtB,WAAW,EAAU;AAAA,MACvB,CAAC;AAAA,IACH,MACE,CAAA,GAAS,QAAQ,kBAAkB;AAAA,MACjC,WAAW,EAAK;AAAA,MAChB,UAAU,EAAK;AAAA,MACf,UAAU;AAAA,IACZ,CAAC;AAAA,EAGP,GAAG;AAAA,IAAC;AAAA,IAAM;AAAA,IAAO;AAAA,EAAM,CAAC;AAGxB,QAAM,IAAA,MAAoB;AAKxB,QAHA,KAAe,EAAY,CAAI,GAC/B,EAAQ,EAAe,EAAK,QAAQ,CAAC,GAEjC,EAAK,aAAa,kBAAkB;AACtC,YAAM,IAAY;AAClB,MAAA,GAAS,QAAQ,6BAA6B;AAAA,QAC5C,UAAU,EAAK;AAAA,QACf,eAAe,EAAU;AAAA,QACzB,eAAe,EAAU;AAAA,QACzB,YAAY,EAAU;AAAA,QACtB,WAAW,EAAU;AAAA,MACvB,CAAC;AAAA,IACH,MACE,CAAA,GAAS,QAAQ,mBAAmB;AAAA,MAClC,WAAW,EAAK;AAAA,MAChB,UAAU,EAAK;AAAA,MACf,UAAU;AAAA,IACZ,CAAC;AAAA,EAEL;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,wBAAqB;AAAA,IACV,WAAA;AAAA,IACX,aACE,GAAM,0BAA0B,GAAM,uBAAuB,SAAS,IAClE,EAAK,yBACL,EAAK,oBAAoB;AAAA,IAEpB,WAAA;AAAA,IACM,iBAAA;AAAA,IACjB,MAAM,KAAY,gBAAA,EAAC,GAAD,EAAgB,MAAA,EAAO,CAAA;AAAA,IAC3B,cAAA;AAAA,IACd,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,mBAAmB,EAAK,wBAAwB,GAAW;AAAA,IACtD,KAAA;AAAA,IACL,OAAO,EAAK,eAAe,EAAK,YAAY,SAAS,IAAI,EAAK,cAAc,EAAK;AAAA,IACxE,SAAA;AAAA,IACO,gBAAA;AAAA,EACjB,CAAA;AAEL"}
+{"version":3,"file":"InsightCard.es.js","names":[],"sources":["../../../src/microinsights/cards/InsightCard.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport { useInView } from 'react-intersection-observer'\n\nimport Box from '@mui/material/Box'\nimport { alpha, useTheme } from '@mui/material/styles'\n\nimport { BeatIcon } from '../beaticons'\nimport BeatMaterialIcon from '../beaticons/BeatMaterialIcon'\n\nimport { useCopyStore, useEvent, useInsightsMicroWidgetStore } from '../context/hooks'\n\nimport { ON_CLICK_EVENT, ON_VIEW_EVENT, ON_VIEW_FIRST_TIME_EVENT } from '../constants/Analytics'\nimport { VIEW_THRESHOLD } from '../constants/App'\n\nimport type { BeatLikeOffer, MicroInsightCardProps } from '../interfaces'\nimport type { Beat } from '../../core/types/Beat'\nimport MicroCardTemplate from '../MicroCardTemplate'\n// Leaf imports on purpose: the `insights-v2` barrel pulls in `mappings/blocks` and its charts.\nimport InsightErrorCard from '../../insights-v2/components/InsightErrorCard'\nimport LogoFromGuid from '../../insights-v2/components/LogoFromGuid'\nimport { resolveInsightRender } from '../../insights-v2/resolveInsightRender'\n\n/** The legacy micro card's icon tile size (BeatMaterialIcon). */\nconst ICON_SIZE = 32\n\nexport interface InsightCardProps extends MicroInsightCardProps {\n  beat: Beat | BeatLikeOffer\n  index?: number\n}\n\nexport const InsightCard: React.FC<InsightCardProps> = ({\n  ariaLabel,\n  beat,\n  elevation,\n  index,\n  isActiveCard,\n  onCardClick,\n  posthog,\n  widthOverrides,\n  variant,\n  showIcon,\n  heightOverrides,\n}) => {\n  const { ref, inView } = useInView({\n    threshold: VIEW_THRESHOLD,\n  })\n\n  const theme = useTheme()\n\n  // *************** Context functions *********************\n  const { cardsCopy } = useCopyStore()\n  const { onEvent } = useEvent()\n  const { updateBeat, updateOffer } = useInsightsMicroWidgetStore()\n\n  // ************** Use Effects Hooks **********************\n  useEffect(() => {\n    if (inView) {\n      if (!beat.has_been_displayed) {\n        if (beat.guid.startsWith('OFR')) {\n          updateOffer({\n            ...beat,\n            has_been_displayed: true,\n          })\n        } else {\n          updateBeat({\n            ...beat,\n            has_been_displayed: true,\n          })\n        }\n        onEvent(ON_VIEW_FIRST_TIME_EVENT(beat.template))\n      } else {\n        onEvent(ON_VIEW_EVENT(beat.template))\n      }\n    }\n  }, [inView])\n\n  useEffect(() => {\n    if (inView && beat) {\n      if (beat.template === 'MarketingOffer') {\n        const offerBeat = beat as BeatLikeOffer\n        posthog?.capture('viewed_messaging_insight', {\n          template: beat.template,\n          campaign_guid: offerBeat.campaign_guid,\n          campaign_name: offerBeat.pulse_campaign_name,\n          offer_guid: offerBeat.guid,\n          user_guid: offerBeat.user_guid,\n        })\n      } else {\n        posthog?.capture('viewed_insight', {\n          beat_guid: beat.guid,\n          template: beat.template,\n          position: index,\n        })\n      }\n    }\n  }, [beat, index, inView])\n\n  // *************** Click handlers ************************\n  const handleClick = () => {\n    /* eslint-disable no-unused-expressions */\n    onCardClick && onCardClick(beat)\n    onEvent(ON_CLICK_EVENT(beat.template))\n\n    if (beat.template === 'MarketingOffer') {\n      const offerBeat = beat as BeatLikeOffer\n      posthog?.capture('clicked_messaging_insight', {\n        template: beat.template,\n        campaign_guid: offerBeat.campaign_guid,\n        campaign_name: offerBeat.pulse_campaign_name,\n        offer_guid: offerBeat.guid,\n        user_guid: offerBeat.user_guid,\n      })\n    } else {\n      posthog?.capture('clicked_insight', {\n        beat_guid: beat.guid,\n        template: beat.template,\n        position: index,\n      })\n    }\n  }\n\n  const insightRender = resolveInsightRender(beat as Beat)\n  const v2Payload = insightRender === 'v2' ? beat.insights_payload : undefined\n\n  if (insightRender === 'error') {\n    // Keeps the carousel's slot sizing; the error card does not know about it.\n    return (\n      <Box\n        aria-hidden={!isActiveCard}\n        aria-label={ariaLabel}\n        aria-roledescription=\"slide\"\n        ref={ref}\n        role=\"group\"\n        sx={{\n          height: heightOverrides ? '100%' : 120,\n          minWidth: widthOverrides ? `${widthOverrides}px` : '100%',\n          my: 1,\n        }}\n      >\n        <InsightErrorCard beat={beat} />\n      </Box>\n    )\n  }\n\n  if (v2Payload) {\n    // Figma (Micro Widget | Large Transaction) is the legacy micro card's layout fed from the envelope:\n    // the first slot row's logo on the left (merchant, or the category without one), title, description,\n    // and the primary CTA as a link. The logo falls back to the insight glyph when the slot has no row.\n    const rowLogo = v2Payload.instance_slot.data_series?.[0]?.logo\n\n    return (\n      <MicroCardTemplate\n        aria-roledescription=\"slide\"\n        ariaLabel={ariaLabel}\n        description={v2Payload.description.html_text}\n        elevation={elevation}\n        heightOverrides={heightOverrides}\n        icon={\n          showIcon &&\n          (rowLogo ? (\n            <LogoFromGuid logo={rowLogo} size={ICON_SIZE} />\n          ) : (\n            <BeatMaterialIcon bgColor={alpha(theme.palette.primary.main, 0.15)} name=\"lightbulb\" />\n          ))\n        }\n        isActiveCard={isActiveCard}\n        onCardClick={handleClick}\n        onPrimaryAction={handleClick}\n        primaryActionText={v2Payload.primary_cta?.label}\n        ref={ref}\n        title={v2Payload.title ?? ''}\n        variant={variant}\n        widthOverrides={widthOverrides}\n      />\n    )\n  }\n\n  return (\n    <MicroCardTemplate\n      aria-roledescription=\"slide\"\n      ariaLabel={ariaLabel}\n      description={\n        beat?.html_micro_description && beat?.html_micro_description.length > 0\n          ? beat.html_micro_description\n          : beat.html_description || ''\n      }\n      elevation={elevation}\n      heightOverrides={heightOverrides}\n      icon={showIcon && <BeatIcon beat={beat} />}\n      isActiveCard={isActiveCard}\n      onCardClick={handleClick}\n      onPrimaryAction={handleClick}\n      primaryActionText={beat.micro_call_to_action || cardsCopy?.micro_card_cta}\n      ref={ref}\n      title={beat.micro_title && beat.micro_title.length > 0 ? beat.micro_title : beat.title}\n      variant={variant}\n      widthOverrides={widthOverrides}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/microinsights/carousel/BeatList.es.js

@@ -1,37 +1,37 @@
-import { buildDynamicCopy as C } from "../../core/utils/Localization.es.js";
+import { buildDynamicCopy as x } from "../../core/utils/Localization.es.js";
 import { useCopyStore as M } from "../context/hooks.es.js";
-import { InsightCard as w } from "../cards/InsightCard.es.js";
-import x from "../cards/ViewMoreMicroCard.es.js";
+import { InsightCard as P } from "../cards/InsightCard.es.js";
+import w from "../cards/ViewMoreMicroCard.es.js";
 import "react";
-import { Fragment as D, jsx as c, jsxs as L } from "react/jsx-runtime";
-var T = ({ activeCardIndex: t, beats: r, cardWidth: e, elevation: m, heightOverrides: a, onCardClick: s, posthog: l, showIcon: p, variant: d }) => {
-  const { carouselCopy: g } = M(), n = {
-    elevation: m,
-    heightOverrides: a,
-    posthog: l,
-    showIcon: p,
-    variant: d
+import { Fragment as D, jsx as l, jsxs as L } from "react/jsx-runtime";
+var I = ({ activeCardIndex: s, beats: r, cardWidth: n, elevation: a, heightOverrides: m, onCardClick: e, posthog: p, showIcon: d, variant: _ }) => {
+  const { carouselCopy: g } = M(), c = {
+    elevation: a,
+    heightOverrides: m,
+    posthog: p,
+    showIcon: d,
+    variant: _
   };
   return /* @__PURE__ */ L(D, { children: [r.map((i, o) => {
-    const _ = o + 1, u = r.length + 1, h = C(g?.card_position_in_carousel_aria, _.toString(), u.toString()), f = i.micro_title && i.micro_title.length > 0, v = i.micro_description && i.micro_description.length > 0, $ = f ? i.micro_title : i.title, y = v ? i.micro_description : i.description;
-    return /* @__PURE__ */ c(w, {
-      ariaLabel: `${h}: ${$}, ${y}`,
+    const h = o + 1, u = r.length + 1, v = x(g?.card_position_in_carousel_aria, h.toString(), u.toString()), f = i.micro_title && i.micro_title.length > 0, y = i.micro_description && i.micro_description.length > 0, t = i.is_insights_v2 ? i.insights_payload : void 0, $ = t ? t.title : f ? i.micro_title : i.title, C = t ? t.description?.text : y ? i.micro_description : i.description;
+    return /* @__PURE__ */ l(P, {
+      ariaLabel: `${v}: ${$}, ${C}`,
       beat: i,
       index: o,
-      isActiveCard: o === t,
-      onCardClick: s,
-      widthOverrides: e || void 0,
-      ...n
+      isActiveCard: o === s,
+      onCardClick: e,
+      widthOverrides: n || void 0,
+      ...c
     }, `${i.guid} ${o}`);
-  }), /* @__PURE__ */ c(x, {
-    isActiveCard: t === r.length,
-    onCardClick: s,
-    widthOverrides: e || void 0,
-    ...n
+  }), /* @__PURE__ */ l(w, {
+    isActiveCard: s === r.length,
+    onCardClick: e,
+    widthOverrides: n || void 0,
+    ...c
   })] });
 };
 export {
-  T as default
+  I as default
 };
 
 //# sourceMappingURL=BeatList.es.js.map

package/dist/microinsights/carousel/BeatList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BeatList.es.js","names":[],"sources":["../../../src/microinsights/carousel/BeatList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { InsightCard, ViewMoreMicroCard } from '..'\nimport type { MicroInsightCardProps } from '../interfaces'\n\nimport { useCopyStore } from '../context/hooks'\n\nimport type { Beat } from '../../core/types/Beat'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nexport interface BeatListProps extends MicroInsightCardProps {\n  activeCardIndex: number\n  beats: Beat[]\n  cardWidth: number | null\n}\n\nconst BeatList: React.FC<BeatListProps> = ({\n  activeCardIndex,\n  beats,\n  cardWidth,\n  elevation,\n  heightOverrides,\n  onCardClick,\n  posthog,\n  showIcon,\n  variant,\n}) => {\n  const { carouselCopy: copy } = useCopyStore()\n\n  const generalProps = {\n    elevation,\n    heightOverrides,\n    posthog,\n    showIcon,\n    variant,\n  }\n\n  return (\n    <>\n      {beats.map((beat: Beat, i) => {\n        const beatPosition = i + 1\n        const totalBeats = beats.length + 1\n        const ariaLabelPositionInCarousel = buildDynamicCopy(\n          copy?.card_position_in_carousel_aria,\n          beatPosition.toString(),\n          totalBeats.toString(),\n        )\n\n        const hasMicroTitle = beat.micro_title && beat.micro_title.length > 0\n        const hasMicroDescription = beat.micro_description && beat.micro_description.length > 0\n\n        const beatTitle = hasMicroTitle ? beat.micro_title : beat.title\n        const beatDescription = hasMicroDescription ? beat.micro_description : beat.description\n\n        return (\n          <InsightCard\n            ariaLabel={`${ariaLabelPositionInCarousel}: ${beatTitle}, ${beatDescription}`}\n            beat={beat}\n            index={i}\n            isActiveCard={i === activeCardIndex}\n            key={`${beat.guid} ${i}`}\n            onCardClick={onCardClick}\n            widthOverrides={cardWidth || undefined}\n            {...generalProps}\n          />\n        )\n      })}\n      <ViewMoreMicroCard\n        isActiveCard={activeCardIndex === beats.length}\n        onCardClick={onCardClick}\n        widthOverrides={cardWidth || undefined}\n        {...generalProps}\n      />\n    </>\n  )\n}\n\nexport default BeatList\n"],"mappings":";;;;;;AAgBA,IAAM,IAAA,CAAqC,EACzC,iBAAA,GACA,OAAA,GACA,WAAA,GACA,WAAA,GACA,iBAAA,GACA,aAAA,GACA,SAAA,GACA,UAAA,GACA,SAAA,EAAA,MACI;AACJ,QAAM,EAAE,cAAc,EAAA,IAAS,EAAa,GAEtC,IAAe;AAAA,IACnB,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,EACF;AAEA,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACG,EAAM,IAAA,CAAK,GAAY,MAAM;AAC5B,UAAM,IAAe,IAAI,GACnB,IAAa,EAAM,SAAS,GAC5B,IAA8B,EAClC,GAAM,gCACN,EAAa,SAAS,GACtB,EAAW,SAAS,CACtB,GAEM,IAAgB,EAAK,eAAe,EAAK,YAAY,SAAS,GAC9D,IAAsB,EAAK,qBAAqB,EAAK,kBAAkB,SAAS,GAEhF,IAAY,IAAgB,EAAK,cAAc,EAAK,OACpD,IAAkB,IAAsB,EAAK,oBAAoB,EAAK;AAE5E,WACE,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW,GAAG,CAAA,KAAgC,CAAA,KAAc,CAAA;AAAA,MACtD,MAAA;AAAA,MACN,OAAO;AAAA,MACP,cAAc,MAAM;AAAA,MAEP,aAAA;AAAA,MACb,gBAAgB,KAAa;AAAA,MAC7B,GAAI;AAAA,IACL,GAJM,GAAG,EAAK,IAAA,IAAQ,CAAA,EAItB;AAAA,EAEL,CAAC,GACD,gBAAA,EAAC,GAAD;AAAA,IACE,cAAc,MAAoB,EAAM;AAAA,IAC3B,aAAA;AAAA,IACb,gBAAgB,KAAa;AAAA,IAC7B,GAAI;AAAA,EACL,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"BeatList.es.js","names":[],"sources":["../../../src/microinsights/carousel/BeatList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { InsightCard, ViewMoreMicroCard } from '..'\nimport type { MicroInsightCardProps } from '../interfaces'\n\nimport { useCopyStore } from '../context/hooks'\n\nimport type { Beat } from '../../core/types/Beat'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nexport interface BeatListProps extends MicroInsightCardProps {\n  activeCardIndex: number\n  beats: Beat[]\n  cardWidth: number | null\n}\n\nconst BeatList: React.FC<BeatListProps> = ({\n  activeCardIndex,\n  beats,\n  cardWidth,\n  elevation,\n  heightOverrides,\n  onCardClick,\n  posthog,\n  showIcon,\n  variant,\n}) => {\n  const { carouselCopy: copy } = useCopyStore()\n\n  const generalProps = {\n    elevation,\n    heightOverrides,\n    posthog,\n    showIcon,\n    variant,\n  }\n\n  return (\n    <>\n      {beats.map((beat: Beat, i) => {\n        const beatPosition = i + 1\n        const totalBeats = beats.length + 1\n        const ariaLabelPositionInCarousel = buildDynamicCopy(\n          copy?.card_position_in_carousel_aria,\n          beatPosition.toString(),\n          totalBeats.toString(),\n        )\n\n        const hasMicroTitle = beat.micro_title && beat.micro_title.length > 0\n        const hasMicroDescription = beat.micro_description && beat.micro_description.length > 0\n\n        // An Insights 2.0 beat's copy lives on its envelope; the legacy micro fields are blank.\n        const v2Payload = beat.is_insights_v2 ? beat.insights_payload : undefined\n\n        const beatTitle = v2Payload\n          ? v2Payload.title\n          : hasMicroTitle\n            ? beat.micro_title\n            : beat.title\n        const beatDescription = v2Payload\n          ? v2Payload.description?.text\n          : hasMicroDescription\n            ? beat.micro_description\n            : beat.description\n\n        return (\n          <InsightCard\n            ariaLabel={`${ariaLabelPositionInCarousel}: ${beatTitle}, ${beatDescription}`}\n            beat={beat}\n            index={i}\n            isActiveCard={i === activeCardIndex}\n            key={`${beat.guid} ${i}`}\n            onCardClick={onCardClick}\n            widthOverrides={cardWidth || undefined}\n            {...generalProps}\n          />\n        )\n      })}\n      <ViewMoreMicroCard\n        isActiveCard={activeCardIndex === beats.length}\n        onCardClick={onCardClick}\n        widthOverrides={cardWidth || undefined}\n        {...generalProps}\n      />\n    </>\n  )\n}\n\nexport default BeatList\n"],"mappings":";;;;;;AAgBA,IAAM,IAAA,CAAqC,EACzC,iBAAA,GACA,OAAA,GACA,WAAA,GACA,WAAA,GACA,iBAAA,GACA,aAAA,GACA,SAAA,GACA,UAAA,GACA,SAAA,EAAA,MACI;AACJ,QAAM,EAAE,cAAc,EAAA,IAAS,EAAa,GAEtC,IAAe;AAAA,IACnB,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,EACF;AAEA,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACG,EAAM,IAAA,CAAK,GAAY,MAAM;AAC5B,UAAM,IAAe,IAAI,GACnB,IAAa,EAAM,SAAS,GAC5B,IAA8B,EAClC,GAAM,gCACN,EAAa,SAAS,GACtB,EAAW,SAAS,CACtB,GAEM,IAAgB,EAAK,eAAe,EAAK,YAAY,SAAS,GAC9D,IAAsB,EAAK,qBAAqB,EAAK,kBAAkB,SAAS,GAGhF,IAAY,EAAK,iBAAiB,EAAK,mBAAmB,QAE1D,IAAY,IACd,EAAU,QACV,IACE,EAAK,cACL,EAAK,OACL,IAAkB,IACpB,EAAU,aAAa,OACvB,IACE,EAAK,oBACL,EAAK;AAEX,WACE,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW,GAAG,CAAA,KAAgC,CAAA,KAAc,CAAA;AAAA,MACtD,MAAA;AAAA,MACN,OAAO;AAAA,MACP,cAAc,MAAM;AAAA,MAEP,aAAA;AAAA,MACb,gBAAgB,KAAa;AAAA,MAC7B,GAAI;AAAA,IACL,GAJM,GAAG,EAAK,IAAA,IAAQ,CAAA,EAItB;AAAA,EAEL,CAAC,GACD,gBAAA,EAAC,GAAD;AAAA,IACE,cAAc,MAAoB,EAAM;AAAA,IAC3B,aAAA;AAAA,IACb,gBAAgB,KAAa;AAAA,IAC7B,GAAI;AAAA,EACL,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/notifications/components/NotificationBadge.es.js

@@ -1,31 +1,33 @@
 import { useAccountStore as c, useBudgetsStore as g, useGlobalCopyStore as l } from "../../common/context/hooks.es.js";
 import "react";
-import { observer as m } from "mobx-react-lite";
-import { CategoryIcon as y, InstitutionLogo as f } from "@mxenabled/mxui";
+import { observer as f } from "mobx-react-lite";
+import { CategoryIcon as m, InstitutionLogo as y } from "@mxenabled/mxui";
 import { jsx as t } from "react/jsx-runtime";
-var p = ({ notification: i }) => {
-  const { accounts: s } = c(), { budgets: r } = g(), { accounts: u } = l(), e = s.find((o) => o.guid === i.entity_guid), d = r.find((o) => o.guid === i.entity_guid), a = i.entity_guid.includes("GOL"), n = { badge: {
+var b = ({ notification: i }) => {
+  const { accounts: s } = c(), { budgets: a } = g(), { accounts: d } = l(), e = s.find((o) => o.guid === i.entity_guid), r = a.find((o) => o.guid === i.entity_guid), u = i.entity_guid.includes("GOL"), n = { badge: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 4,
     marginRight: 12
   } };
-  return e || a ? /* @__PURE__ */ t("div", {
+  return e || u ? /* @__PURE__ */ t("div", {
+    "data-testid": "notification-badge",
     style: n.badge,
-    children: /* @__PURE__ */ t(f, {
-      alt: e?.institutionName || u.institution_logo_alt,
+    children: /* @__PURE__ */ t(y, {
+      alt: e?.institutionName || d.institution_logo_alt,
       institutionGuid: e?.institution_guid ?? "",
       size: 33
     })
   }) : /* @__PURE__ */ t("div", {
+    "data-testid": "notification-badge",
     style: n.badge,
-    children: /* @__PURE__ */ t(y, {
-      categoryGuid: d?.category_guid,
+    children: /* @__PURE__ */ t(m, {
+      categoryGuid: r?.category_guid,
       size: 36
     })
   });
-}, x = m(p);
+}, x = f(b);
 export {
   x as default
 };

package/dist/notifications/components/NotificationBadge.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.es.js","names":[],"sources":["../../../src/notifications/components/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { InstitutionLogo, CategoryIcon } from '@mxenabled/mxui'\n\nimport { useAccountStore, useBudgetsStore, useGlobalCopyStore } from '../../common'\nimport { type Notification } from '../../core'\n\ninterface NotificationBadgeProps {\n  notification: Notification\n}\n\nconst NotificationBadge: React.FC<NotificationBadgeProps> = ({ notification }) => {\n  // Show notifications for all accounts (including hidden)\n  const { accounts } = useAccountStore()\n  const { budgets } = useBudgetsStore()\n  const { accounts: accountsCopy } = useGlobalCopyStore()\n\n  const account = accounts.find((account) => account.guid === notification.entity_guid)\n  const budget = budgets.find((budget) => budget.guid === notification.entity_guid)\n  const isGoal = notification.entity_guid.includes('GOL')\n\n  const styles = {\n    badge: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: 4,\n      marginRight: 12,\n    },\n  }\n\n  if (account || isGoal) {\n    return (\n      <div style={styles.badge}>\n        <InstitutionLogo\n          alt={account?.institutionName || accountsCopy.institution_logo_alt}\n          institutionGuid={account?.institution_guid ?? ''}\n          size={33}\n        />\n      </div>\n    )\n  } else {\n    return (\n      <div style={styles.badge}>\n        <CategoryIcon categoryGuid={budget?.category_guid} size={36} />\n      </div>\n    )\n  }\n}\n\nexport default observer(NotificationBadge)\n"],"mappings":";;;;;AAYA,IAAM,IAAA,CAAuD,EAAE,cAAA,EAAA,MAAmB;AAEhF,QAAM,EAAE,UAAA,EAAA,IAAa,EAAgB,GAC/B,EAAE,SAAA,EAAA,IAAY,EAAgB,GAC9B,EAAE,UAAU,EAAA,IAAiB,EAAmB,GAEhD,IAAU,EAAS,KAAA,CAAM,MAAY,EAAQ,SAAS,EAAa,WAAW,GAC9E,IAAS,EAAQ,KAAA,CAAM,MAAW,EAAO,SAAS,EAAa,WAAW,GAC1E,IAAS,EAAa,YAAY,SAAS,KAAK,GAEhD,IAAS,EACb,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,aAAa;AAAA,EACf,EACF;AAEA,SAAI,KAAW,IAEX,gBAAA,EAAC,OAAD;AAAA,IAAK,OAAO,EAAO;AAAA,IACjB,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,GAAS,mBAAmB,EAAa;AAAA,MAC9C,iBAAiB,GAAS,oBAAoB;AAAA,MAC9C,MAAM;AAAA,IACP,CAAA;AAAA,EACE,CAAA,IAIL,gBAAA,EAAC,OAAD;AAAA,IAAK,OAAO,EAAO;AAAA,IACjB,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAc,cAAc,GAAQ;AAAA,MAAe,MAAM;AAAA,IAAK,CAAA;AAAA,EAC3D,CAAA;AAGX,GAEA,IAAe,EAAS,CAAiB"}
+{"version":3,"file":"NotificationBadge.es.js","names":[],"sources":["../../../src/notifications/components/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { InstitutionLogo, CategoryIcon } from '@mxenabled/mxui'\n\nimport { useAccountStore, useBudgetsStore, useGlobalCopyStore } from '../../common'\nimport { type Notification } from '../../core'\n\ninterface NotificationBadgeProps {\n  notification: Notification\n}\n\nconst NotificationBadge: React.FC<NotificationBadgeProps> = ({ notification }) => {\n  // Show notifications for all accounts (including hidden)\n  const { accounts } = useAccountStore()\n  const { budgets } = useBudgetsStore()\n  const { accounts: accountsCopy } = useGlobalCopyStore()\n\n  const account = accounts.find((account) => account.guid === notification.entity_guid)\n  const budget = budgets.find((budget) => budget.guid === notification.entity_guid)\n  const isGoal = notification.entity_guid.includes('GOL')\n\n  const styles = {\n    badge: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: 4,\n      marginRight: 12,\n    },\n  }\n\n  if (account || isGoal) {\n    return (\n      <div data-testid=\"notification-badge\" style={styles.badge}>\n        <InstitutionLogo\n          alt={account?.institutionName || accountsCopy.institution_logo_alt}\n          institutionGuid={account?.institution_guid ?? ''}\n          size={33}\n        />\n      </div>\n    )\n  } else {\n    return (\n      <div data-testid=\"notification-badge\" style={styles.badge}>\n        <CategoryIcon categoryGuid={budget?.category_guid} size={36} />\n      </div>\n    )\n  }\n}\n\nexport default observer(NotificationBadge)\n"],"mappings":";;;;;AAYA,IAAM,IAAA,CAAuD,EAAE,cAAA,EAAA,MAAmB;AAEhF,QAAM,EAAE,UAAA,EAAA,IAAa,EAAgB,GAC/B,EAAE,SAAA,EAAA,IAAY,EAAgB,GAC9B,EAAE,UAAU,EAAA,IAAiB,EAAmB,GAEhD,IAAU,EAAS,KAAA,CAAM,MAAY,EAAQ,SAAS,EAAa,WAAW,GAC9E,IAAS,EAAQ,KAAA,CAAM,MAAW,EAAO,SAAS,EAAa,WAAW,GAC1E,IAAS,EAAa,YAAY,SAAS,KAAK,GAEhD,IAAS,EACb,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,aAAa;AAAA,EACf,EACF;AAEA,SAAI,KAAW,IAEX,gBAAA,EAAC,OAAD;AAAA,IAAK,eAAY;AAAA,IAAqB,OAAO,EAAO;AAAA,IAClD,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,GAAS,mBAAmB,EAAa;AAAA,MAC9C,iBAAiB,GAAS,oBAAoB;AAAA,MAC9C,MAAM;AAAA,IACP,CAAA;AAAA,EACE,CAAA,IAIL,gBAAA,EAAC,OAAD;AAAA,IAAK,eAAY;AAAA,IAAqB,OAAO,EAAO;AAAA,IAClD,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAc,cAAc,GAAQ;AAAA,MAAe,MAAM;AAAA,IAAK,CAAA;AAAA,EAC3D,CAAA;AAGX,GAEA,IAAe,EAAS,CAAiB"}

package/dist/notifications/components/NotificationCard.es.js

@@ -1,11 +1,12 @@
-import { useNotificationStore as n } from "../../common/context/hooks.es.js";
-import i from "./NotificationBadge.es.js";
+import { useNotificationStore as i } from "../../common/context/hooks.es.js";
+import l, { isLogoGuid as n } from "../../insights-v2/components/LogoFromGuid.es.js";
+import s from "./NotificationBadge.es.js";
 import "react";
-import { Text as l } from "@mxenabled/mxui";
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { Card as m, useTheme as c } from "@mui/material";
-var v = ({ notification: e, onClick: o }) => {
-  const { updateNotification: d } = n(), t = c(), a = {
+import { Text as m } from "@mxenabled/mxui";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { Card as u, useTheme as c } from "@mui/material";
+var p = 33, w = ({ notification: e, onClick: a }) => {
+  const { updateNotification: d } = i(), o = c(), r = {
     card: {
       alignItems: "center",
       cursor: "pointer",
@@ -13,11 +14,12 @@ var v = ({ notification: e, onClick: o }) => {
       marginBottom: 12,
       paddingX: 24,
       paddingY: 12,
-      "&:focus": { backgroundColor: t.palette.background.default },
-      "&:hover": { backgroundColor: t.palette.background.default }
+      "&:focus": { backgroundColor: o.palette.background.default },
+      "&:hover": { backgroundColor: o.palette.background.default },
+      "& .notification-logo": { marginRight: 12 }
     },
     dot: {
-      backgroundColor: t.palette.primary.main,
+      backgroundColor: o.palette.primary.main,
       borderRadius: "100%",
       flex: "0 0 auto",
       marginLeft: -8,
@@ -26,21 +28,28 @@ var v = ({ notification: e, onClick: o }) => {
       width: 8
     }
   };
-  return /* @__PURE__ */ s(m, {
+  return /* @__PURE__ */ g(u, {
     onClick: () => {
-      o(e), d({
+      a(e), d({
         ...e,
         has_been_viewed: !0
       }).finally();
     },
-    sx: a.card,
+    sx: r.card,
     children: [
-      e.has_been_viewed ? null : /* @__PURE__ */ r("div", {
+      e.has_been_viewed ? null : /* @__PURE__ */ t("div", {
         "data-testid": "new-message-dot",
-        style: a.dot
+        style: r.dot
       }),
-      /* @__PURE__ */ r(i, { notification: e }),
-      /* @__PURE__ */ r(l, {
+      n(e.entity_guid) ? /* @__PURE__ */ t(l, {
+        className: "notification-logo",
+        logo: {
+          alt: e.content,
+          guid: e.entity_guid
+        },
+        size: p
+      }) : /* @__PURE__ */ t(s, { notification: e }),
+      /* @__PURE__ */ t(m, {
         bold: !e.has_been_viewed,
         truncate: !1,
         variant: "body2",
@@ -50,7 +59,7 @@ var v = ({ notification: e, onClick: o }) => {
   });
 };
 export {
-  v as default
+  w as default
 };
 
 //# sourceMappingURL=NotificationCard.es.js.map

package/dist/notifications/components/NotificationCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCard.es.js","names":[],"sources":["../../../src/notifications/components/NotificationCard.tsx"],"sourcesContent":["import React from 'react'\nimport { Card, useTheme } from '@mui/material'\nimport { Text } from '@mxenabled/mxui'\n\nimport { type Notification } from '../../core'\nimport { useNotificationStore } from '../../common'\nimport NotificationBadge from './NotificationBadge'\n\ninterface NotificationCardProps {\n  notification: Notification\n  onClick: (notification: Notification) => void\n}\n\nconst NotificationCard: React.FC<NotificationCardProps> = ({ notification, onClick }) => {\n  const { updateNotification } = useNotificationStore()\n  const theme = useTheme()\n\n  const styles = {\n    card: {\n      alignItems: 'center',\n      cursor: 'pointer',\n      display: 'flex',\n      marginBottom: 12,\n      paddingX: 24,\n      paddingY: 12,\n      '&:focus': {\n        backgroundColor: theme.palette.background.default,\n      },\n      '&:hover': {\n        backgroundColor: theme.palette.background.default,\n      },\n    },\n    dot: {\n      backgroundColor: theme.palette.primary.main,\n      borderRadius: '100%',\n      flex: '0 0 auto',\n      marginLeft: -8,\n      marginRight: 8,\n      height: 8,\n      width: 8,\n    },\n  }\n\n  const handleOnClick = () => {\n    onClick(notification)\n    updateNotification({ ...notification, has_been_viewed: true }).finally()\n  }\n\n  return (\n    <Card onClick={handleOnClick} sx={styles.card}>\n      {!notification.has_been_viewed ? (\n        <div data-testid=\"new-message-dot\" style={styles.dot} />\n      ) : null}\n      <NotificationBadge notification={notification} />\n      <Text bold={!notification.has_been_viewed} truncate={false} variant={'body2'}>\n        {notification.content}\n      </Text>\n    </Card>\n  )\n}\n\nexport default NotificationCard\n"],"mappings":";;;;;;AAaA,IAAM,IAAA,CAAqD,EAAE,cAAA,GAAc,SAAA,EAAA,MAAc;AACvF,QAAM,EAAE,oBAAA,EAAA,IAAuB,EAAqB,GAC9C,IAAQ,EAAS,GAEjB,IAAS;AAAA,IACb,MAAM;AAAA,MACJ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,cAAc;AAAA,MACd,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW,EACT,iBAAiB,EAAM,QAAQ,WAAW,QAC5C;AAAA,MACA,WAAW,EACT,iBAAiB,EAAM,QAAQ,WAAW,QAC5C;AAAA,IACF;AAAA,IACA,KAAK;AAAA,MACH,iBAAiB,EAAM,QAAQ,QAAQ;AAAA,MACvC,cAAc;AAAA,MACd,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAAA,EACF;AAOA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAM,SANF,MAAsB;AAC1B,MAAA,EAAQ,CAAY,GACpB,EAAmB;AAAA,QAAE,GAAG;AAAA,QAAc,iBAAiB;AAAA,MAAK,CAAC,EAAE,QAAQ;AAAA,IACzE;AAAA,IAGgC,IAAI,EAAO;AAAA,IAAzC,UAAA;AAAA,MACI,EAAa,kBAEX,OADF,gBAAA,EAAC,OAAD;AAAA,QAAK,eAAY;AAAA,QAAkB,OAAO,EAAO;AAAA,MAAM,CAAA;AAAA,MAEzD,gBAAA,EAAC,GAAD,EAAiC,cAAA,EAAe,CAAA;AAAA,MAChD,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM,CAAC,EAAa;AAAA,QAAiB,UAAU;AAAA,QAAO,SAAS;AAAA,QAClE,UAAA,EAAa;AAAA,MACV,CAAA;AAAA,IACF;AAAA;AAEV"}
+{"version":3,"file":"NotificationCard.es.js","names":[],"sources":["../../../src/notifications/components/NotificationCard.tsx"],"sourcesContent":["import React from 'react'\nimport { Card, useTheme } from '@mui/material'\nimport { Text } from '@mxenabled/mxui'\n\nimport { type Notification } from '../../core'\nimport { useNotificationStore } from '../../common'\n// Leaf import on purpose: the `insights-v2` barrel pulls in `mappings/blocks` and its chart blocks\n// (see the circular-import note in `insights-v2/mappings/actionBlocksKey.ts`).\nimport LogoFromGuid, { isLogoGuid } from '../../insights-v2/components/LogoFromGuid'\nimport NotificationBadge from './NotificationBadge'\n\n/** Same footprint as the legacy badge's institution logo, so rows line up either way. */\nconst LOGO_SIZE = 33\n\ninterface NotificationCardProps {\n  notification: Notification\n  onClick: (notification: Notification) => void\n}\n\nconst NotificationCard: React.FC<NotificationCardProps> = ({ notification, onClick }) => {\n  const { updateNotification } = useNotificationStore()\n  const theme = useTheme()\n\n  const styles = {\n    card: {\n      alignItems: 'center',\n      cursor: 'pointer',\n      display: 'flex',\n      marginBottom: 12,\n      paddingX: 24,\n      paddingY: 12,\n      '&:focus': {\n        backgroundColor: theme.palette.background.default,\n      },\n      '&:hover': {\n        backgroundColor: theme.palette.background.default,\n      },\n      // Matches the legacy badge's trailing gap so the text column lines up either way.\n      '& .notification-logo': { marginRight: 12 },\n    },\n    dot: {\n      backgroundColor: theme.palette.primary.main,\n      borderRadius: '100%',\n      flex: '0 0 auto',\n      marginLeft: -8,\n      marginRight: 8,\n      height: 8,\n      width: 8,\n    },\n  }\n\n  const handleOnClick = () => {\n    onClick(notification)\n    updateNotification({ ...notification, has_been_viewed: true }).finally()\n  }\n\n  return (\n    <Card onClick={handleOnClick} sx={styles.card}>\n      {!notification.has_been_viewed ? (\n        <div data-testid=\"new-message-dot\" style={styles.dot} />\n      ) : null}\n      {/* Insights 2.0 (insights_v2.2.md §8.3): Newman writes the row logo guid (merchant, else\n          category) into `entity_guid` at send time, so a `MCH-`/`CAT-`/`INS-` guid draws that logo.\n          A prefix heuristic by design: non-insight rows carry account or budget guids and legacy\n          insight rows the `\"PARENT-ENTITY\"` sentinel, which keep today's badge. The row fetches no\n          beat; its text stays `content`. Nothing else branches on the shape of `entity_guid`. */}\n      {isLogoGuid(notification.entity_guid) ? (\n        <LogoFromGuid\n          className=\"notification-logo\"\n          logo={{ alt: notification.content, guid: notification.entity_guid }}\n          size={LOGO_SIZE}\n        />\n      ) : (\n        <NotificationBadge notification={notification} />\n      )}\n      <Text bold={!notification.has_been_viewed} truncate={false} variant={'body2'}>\n        {notification.content}\n      </Text>\n    </Card>\n  )\n}\n\nexport default NotificationCard\n"],"mappings":";;;;;;;AAYA,IAAM,IAAY,IAOZ,IAAA,CAAqD,EAAE,cAAA,GAAc,SAAA,EAAA,MAAc;AACvF,QAAM,EAAE,oBAAA,EAAA,IAAuB,EAAqB,GAC9C,IAAQ,EAAS,GAEjB,IAAS;AAAA,IACb,MAAM;AAAA,MACJ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,cAAc;AAAA,MACd,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW,EACT,iBAAiB,EAAM,QAAQ,WAAW,QAC5C;AAAA,MACA,WAAW,EACT,iBAAiB,EAAM,QAAQ,WAAW,QAC5C;AAAA,MAEA,wBAAwB,EAAE,aAAa,GAAG;AAAA,IAC5C;AAAA,IACA,KAAK;AAAA,MACH,iBAAiB,EAAM,QAAQ,QAAQ;AAAA,MACvC,cAAc;AAAA,MACd,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAAA,EACF;AAOA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAM,SANF,MAAsB;AAC1B,MAAA,EAAQ,CAAY,GACpB,EAAmB;AAAA,QAAE,GAAG;AAAA,QAAc,iBAAiB;AAAA,MAAK,CAAC,EAAE,QAAQ;AAAA,IACzE;AAAA,IAGgC,IAAI,EAAO;AAAA,IAAzC,UAAA;AAAA,MACI,EAAa,kBAEX,OADF,gBAAA,EAAC,OAAD;AAAA,QAAK,eAAY;AAAA,QAAkB,OAAO,EAAO;AAAA,MAAM,CAAA;AAAA,MAOxD,EAAW,EAAa,WAAW,IAClC,gBAAA,EAAC,GAAD;AAAA,QACE,WAAU;AAAA,QACV,MAAM;AAAA,UAAE,KAAK,EAAa;AAAA,UAAS,MAAM,EAAa;AAAA,QAAY;AAAA,QAClE,MAAM;AAAA,MACP,CAAA,IAED,gBAAA,EAAC,GAAD,EAAiC,cAAA,EAAe,CAAA;AAAA,MAElD,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM,CAAC,EAAa;AAAA,QAAiB,UAAU;AAAA,QAAO,SAAS;AAAA,QAClE,UAAA,EAAa;AAAA,MACV,CAAA;AAAA,IACF;AAAA;AAEV"}

package/dist/transactions/components/shared/TransactionDetails.d.ts

@@ -7,6 +7,13 @@ export interface TransactionDetailsProps {
     topActions?: TopActions[];
     transaction: Transaction;
     shouldShowEmbeddedCard?: boolean;
+    /**
+     * Opens the host's contact-support flow when the embedded insight card's CTA is
+     * `contact_support_block`. This module cannot import the help module (hosts that don't ship the
+     * Help widget stub the import — pulse's webpack `IgnorePlugin`), so the host supplies it. Without
+     * it, or with the client's `enable_support_requests` off, the CTA renders disabled.
+     */
+    onContactSupport?: () => void;
 }
 declare const _default: React.FunctionComponent<TransactionDetailsProps>;
 export default _default;