@mx-cartographer/experiences 9.6.11 → 9.6.13

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BaseLayout.es.js","names":[],"sources":["../../../src/insights-v2/components/BaseLayout.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { blocks } from '../mappings/blocks'\nimport { actionBlocksKey } from '../mappings/actionBlocksKey'\nimport { isContactSupportCtaDisabled } from '../actionBlocks/ContactSupportActionBlock'\nimport { logoFromRef } from './shared/EntityLogo'\n\nimport Footer from './Footer'\nimport Header from './Header'\nimport FeedbackBar from './FeedbackBar'\nimport FeedbackDialog from './FeedbackDialog'\nimport DismissInsightDialog from './DismissInsightDialog'\nimport HiddenConfirmationCard from './HiddenConfirmationCard'\nimport ErrorCard from './ErrorCard'\nimport LoadingCard from './LoadingCard'\nimport { ObsolesceBanner, type ObsolesceBannerState } from './ObsolesceBanner'\nimport { useAppConfig, useGlobalCopyStore } from '../../common'\nimport type { Beat, PrimaryCTA, SecondaryCTA } from '../../core'\nimport { BeatActionsProvider, type BeatActions } from '../beatActions'\nimport { ActionBlockLayer } from '../actionBlocks/ActionBlockLayer'\nimport { useBeatCtaActions } from '../ctaActions'\nimport { useBeatFeedbackFlow } from '../hooks/useBeatFeedbackFlow'\n\nexport interface ObsoleteState {\n  state: ObsolesceBannerState\n  onRefresh: () => void\n  onDismiss: () => void\n}\n\ninterface BaseLayoutProps {\n  beat: Beat\n  beatActions?: BeatActions\n  obsolete?: ObsoleteState\n  /** Swap only the block slot for a LoadingCard (e.g. while a sampled beat loads). */\n  isLoading?: boolean\n  /** Replace the entire card with an ErrorCard (e.g. when the sample fails to load). */\n  isError?: boolean\n}\n\nconst NO_BEAT_ACTIONS: BeatActions = {}\n\nconst OBSOLETE_OVERLAY_SX = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: '100%',\n  height: '100%',\n  backgroundColor: 'background.default',\n  opacity: 0.7,\n  zIndex: 1,\n} as const\n\n// Figma (Mini | Large Transaction): a left-aligned link under the description. The 2px padding plus\n// the CTA row's 16 lines the label up with the description's 18. The label is not a Button, so it\n// carries the theme's MuiButton look itself: semi-bold, no uppercase (typography.button uppercases),\n// and the medium Button's 44px height with the text centred.\nconst MINI_CTA_SX = {\n  alignItems: 'center',\n  alignSelf: 'flex-start',\n  display: 'flex',\n  fontWeight: 600,\n  height: 44,\n  px: 2,\n  textTransform: 'none',\n} as const\n\nconst BaseLayout = observer(\n  ({\n    beat,\n    beatActions = NO_BEAT_ACTIONS,\n    obsolete,\n    isLoading = false,\n    isError = false,\n  }: BaseLayoutProps) => {\n    const copy = useGlobalCopyStore()\n    const { config } = useAppConfig()\n    const flow = useBeatFeedbackFlow(beat, beatActions)\n    const {\n      runCta: handleCtaClick,\n      primary: primaryCtaState,\n      secondary: secondaryCtaState,\n    } = useBeatCtaActions(\n      beat,\n      beatActions,\n      beat.insights_payload?.primary_cta,\n      beat.insights_payload?.secondary_cta,\n    )\n\n    // Error replaces the entire card; loading only swaps the block slot (below).\n    if (isError) return <ErrorCard />\n\n    const insights_payload = beat.insights_payload\n\n    if (!insights_payload) return null\n    if (flow.cardState === 'dismissed') return null\n\n    const {\n      instance_slot,\n      primary_cta,\n      secondary_cta,\n      sub_title,\n      title,\n      widget_type,\n      guid,\n      dismissed_at,\n    } = insights_payload\n    const { block } = instance_slot\n\n    // V1 sends `sub_title: { text, logo }`. The V2 envelope flattens it to a `subtitle` string\n    // with the logo promoted to a payload-level `LogoRef` (an entity guid or a status icon), so\n    // rebuild the shape `Header`/`SubHeader` already render. `sub_title` wins when a beat sends both.\n    const subtitle =\n      sub_title ??\n      (insights_payload.subtitle\n        ? {\n            logo: logoFromRef(insights_payload.logo),\n            text: insights_payload.subtitle,\n          }\n        : undefined)\n\n    // CTA presses go through the ctaActions runner (../ctaActions): a backend `action_key` runs\n    // its step, a `block` opens its drawer, and a resolved message (backend `metadata`, else the\n    // template's `ctaPostMessages` entry) is posted. `contact_support_block` bypasses the runner:\n    // the help flow is host-supplied via `beatActions.onContactSupport`, disabled without it.\n    const isCtaDisabled = (ctaBlock: string | null | undefined) =>\n      isContactSupportCtaDisabled(ctaBlock, config, beatActions.onContactSupport)\n\n    const onCtaClick = async (slot: 'primary' | 'secondary', cta: PrimaryCTA | SecondaryCTA) => {\n      if (isCtaDisabled(cta.block)) return\n\n      if (cta.block === actionBlocksKey.CONTACT_SUPPORT_ACTION_BLOCK) {\n        beatActions.onContactSupport?.()\n        return\n      }\n\n      await handleCtaClick(slot, cta)\n    }\n\n    const Block = blocks[block as keyof typeof blocks]\n\n    const isMini = widget_type === 'mini'\n    const obsoleteCopy = copy.insights_feed?.general\n    const isObsoleteDimmed =\n      obsolete?.state === 'not_refreshable' && !dismissed_at && !!obsoleteCopy\n\n    return (\n      <BeatActionsProvider value={flow.wrappedActions}>\n        <Stack sx={{ mb: 16 }}>\n          {flow.cardState === 'confirming' ? (\n            <HiddenConfirmationCard\n              onClose={flow.collapseConfirmation}\n              onLeaveFeedback={flow.openHideSurvey}\n              onUndo={flow.undoDismiss}\n            />\n          ) : (\n            <>\n              {obsolete && obsoleteCopy && <ObsolesceBanner {...obsolete} copy={obsoleteCopy} />}\n              <Card\n                inert={isObsoleteDimmed}\n                sx={{\n                  ...(isObsoleteDimmed && {\n                    position: 'relative',\n                    zIndex: 2,\n                    pointerEvents: 'none',\n                  }),\n                }}\n              >\n                {isObsoleteDimmed && <Box sx={OBSOLETE_OVERLAY_SX} />}\n                <Header isMini={isMini} subtitle={subtitle} title={title ?? ''} />\n                {isLoading ? (\n                  <LoadingCard />\n                ) : (\n                  Block && <Block beatGuid={guid} payload={insights_payload} />\n                )}\n\n                <Stack sx={{ gap: 6, pb: 16, pt: 12, px: 16 }}>\n                  <P\n                    dangerouslySetInnerHTML={{\n                      __html: insights_payload.description.html_text,\n                    }}\n                    variant=\"subtitle2\"\n                  />\n                  {/* TODO: Migrate to insights_payload.in_description_cta once backend provides it */}\n                  {beat?.in_description_cta && (\n                    <Button\n                      endIcon={<ChevronRight />}\n                      onClick={() => {}}\n                      sx={{ height: 24, p: 4, width: 'max-content' }}\n                    >\n                      {beat.in_description_cta}\n                    </Button>\n                  )}\n                </Stack>\n\n                {primary_cta?.label && (\n                  <Stack sx={{ gap: 8, pb: 16, px: 16 }}>\n                    {isMini ? (\n                      // Mini is a tap target, as in V1: the card, not this label, is the control. The label\n                      // is deliberately not a button, so a tap on it reaches the host's card handler (Pulse\n                      // posts `carousel/cta`, the same redirect a V1 mini card sends) instead of opening\n                      // the action drawer the full card's CTA opens.\n                      <Text color=\"primary.main\" sx={MINI_CTA_SX} variant=\"button\">\n                        {primary_cta.label}\n                      </Text>\n                    ) : (\n                      <Button\n                        aria-disabled={isCtaDisabled(primary_cta.block) || primaryCtaState.disabled}\n                        disabled={primaryCtaState.disabled}\n                        onClick={() => onCtaClick('primary', primary_cta)}\n                        sx={{\n                          ...(isCtaDisabled(primary_cta.block) && { color: 'text.disabled' }),\n                        }}\n                        variant=\"outlined\"\n                      >\n                        {primary_cta.label}\n                      </Button>\n                    )}\n                    {/* Mini has room for one CTA. */}\n                    {!isMini && secondary_cta?.label && (\n                      <Button\n                        aria-disabled={\n                          isCtaDisabled(secondary_cta.block) || secondaryCtaState.disabled\n                        }\n                        color=\"secondary\"\n                        disabled={secondaryCtaState.disabled}\n                        onClick={() => onCtaClick('secondary', secondary_cta)}\n                      >\n                        {secondary_cta.label}\n                      </Button>\n                    )}\n                  </Stack>\n                )}\n\n                <FeedbackBar onTellUsMore={flow.openRatingSurvey} show={flow.isFeedbackBarShown} />\n              </Card>\n            </>\n          )}\n\n          <ActionBlockLayer beat={beat} />\n\n          <DismissInsightDialog\n            isOpen={flow.isDismissOpen}\n            onClose={flow.closeDismissDialog}\n            onDismiss={flow.confirmDismiss}\n          />\n\n          {flow.isSurveyOpen && (\n            <FeedbackDialog\n              characterLimitLabel={flow.survey.characterLimitLabel}\n              closeAriaLabel={flow.survey.closeAriaLabel}\n              isOpen={true}\n              onBackClick={flow.feedbackDialogCallbacks.onBackClick}\n              onClose={flow.closeSurvey}\n              onSubmit={flow.submitSurvey}\n              onTextInputFocus={flow.feedbackDialogCallbacks.onTextInputFocus}\n              options={flow.survey.options}\n              primaryText={flow.survey.submitText}\n              secondaryText={flow.survey.backText}\n              title={flow.survey.title}\n            />\n          )}\n\n          {flow.cardState === 'visible' && insights_payload.footer && (\n            <Footer footer={insights_payload.footer} />\n          )}\n        </Stack>\n      </BeatActionsProvider>\n    )\n  },\n)\n\nexport default BaseLayout\n"],"mappings":"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"}
+{"version":3,"file":"BaseLayout.es.js","names":[],"sources":["../../../src/insights-v2/components/BaseLayout.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { blocks } from '../mappings/blocks'\nimport { actionBlocksKey } from '../mappings/actionBlocksKey'\nimport { isContactSupportCtaDisabled } from '../actionBlocks/ContactSupportActionBlock'\nimport { logoFromRef } from './shared/EntityLogo'\n\nimport Footer from './Footer'\nimport Header from './Header'\nimport FeedbackBar from './FeedbackBar'\nimport FeedbackDialog from './FeedbackDialog'\nimport DismissInsightDialog from './DismissInsightDialog'\nimport HiddenConfirmationCard from './HiddenConfirmationCard'\nimport ErrorCard from './ErrorCard'\nimport LoadingCard from './LoadingCard'\nimport { ObsolesceBanner, type ObsolesceBannerState } from './ObsolesceBanner'\nimport { useAppConfig, useGlobalCopyStore, useInsightsV2Store } from '../../common'\nimport type { Beat, PrimaryCTA, SecondaryCTA } from '../../core'\nimport { BeatActionsProvider, type BeatActions } from '../beatActions'\nimport { ActionBlockLayer } from '../actionBlocks/ActionBlockLayer'\nimport { useBeatCtaActions } from '../ctaActions'\nimport { useBeatFeedbackFlow } from '../hooks/useBeatFeedbackFlow'\n\nexport interface ObsoleteState {\n  state: ObsolesceBannerState\n  onRefresh: () => void\n  onDismiss: () => void\n}\n\ninterface BaseLayoutProps {\n  beat: Beat\n  beatActions?: BeatActions\n  obsolete?: ObsoleteState\n  /** Swap only the block slot for a LoadingCard (e.g. while a sampled beat loads). */\n  isLoading?: boolean\n  /** Replace the entire card with an ErrorCard (e.g. when the sample fails to load). */\n  isError?: boolean\n}\n\nconst NO_BEAT_ACTIONS: BeatActions = {}\n\nconst OBSOLETE_OVERLAY_SX = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: '100%',\n  height: '100%',\n  backgroundColor: 'background.default',\n  opacity: 0.7,\n  zIndex: 1,\n} as const\n\n// Figma (Mini | Large Transaction): a left-aligned link under the description. The 2px padding plus\n// the CTA row's 16 lines the label up with the description's 18. The label is not a Button, so it\n// carries the theme's MuiButton look itself: semi-bold, no uppercase (typography.button uppercases),\n// and the medium Button's 44px height with the text centred.\nconst MINI_CTA_SX = {\n  alignItems: 'center',\n  alignSelf: 'flex-start',\n  display: 'flex',\n  fontWeight: 600,\n  height: 44,\n  px: 2,\n  textTransform: 'none',\n} as const\n\nconst BaseLayout = observer(\n  ({\n    beat,\n    beatActions = NO_BEAT_ACTIONS,\n    obsolete,\n    isLoading = false,\n    isError = false,\n  }: BaseLayoutProps) => {\n    const copy = useGlobalCopyStore()\n    const insightsV2Store = useInsightsV2Store()\n    const { config } = useAppConfig()\n    const flow = useBeatFeedbackFlow(beat, beatActions)\n    const {\n      runCta: handleCtaClick,\n      primary: primaryCtaState,\n      secondary: secondaryCtaState,\n    } = useBeatCtaActions(\n      beat,\n      beatActions,\n      beat.insights_payload?.primary_cta,\n      beat.insights_payload?.secondary_cta,\n    )\n\n    // Error replaces the entire card; loading only swaps the block slot (below).\n    if (isError) return <ErrorCard />\n\n    const insights_payload = beat.insights_payload\n\n    if (!insights_payload) return null\n    if (flow.cardState === 'dismissed') return null\n\n    const {\n      instance_slot,\n      primary_cta,\n      secondary_cta,\n      sub_title,\n      title,\n      widget_type,\n      guid,\n      dismissed_at,\n    } = insights_payload\n    const { block } = instance_slot\n\n    // V1 sends `sub_title: { text, logo }`. The V2 envelope flattens it to a `subtitle` string\n    // with the logo promoted to a payload-level `LogoRef` (an entity guid or a status icon), so\n    // rebuild the shape `Header`/`SubHeader` already render. `sub_title` wins when a beat sends both.\n    const subtitle =\n      sub_title ??\n      (insights_payload.subtitle\n        ? {\n            logo: logoFromRef(insights_payload.logo),\n            text: insights_payload.subtitle,\n          }\n        : undefined)\n\n    // CTA presses go through the ctaActions runner (../ctaActions): a backend `action_key` runs\n    // its step, a `block` opens its drawer, and a resolved message (backend `metadata`, else the\n    // template's `ctaPostMessages` entry) is posted. `contact_support_block` bypasses the runner:\n    // the help flow is host-supplied via `beatActions.onContactSupport`, disabled without it.\n    const isCtaDisabled = (ctaBlock: string | null | undefined) =>\n      isContactSupportCtaDisabled(ctaBlock, config, beatActions.onContactSupport)\n\n    const onCtaClick = async (slot: 'primary' | 'secondary', cta: PrimaryCTA | SecondaryCTA) => {\n      if (isCtaDisabled(cta.block)) return\n\n      if (cta.block === actionBlocksKey.CONTACT_SUPPORT_ACTION_BLOCK) {\n        beatActions.onContactSupport?.()\n        return\n      }\n\n      await handleCtaClick(slot, cta)\n    }\n\n    const Block = blocks[block as keyof typeof blocks]\n\n    const isMini = widget_type === 'mini'\n    const inDescriptionCta = insights_payload.in_description_cta\n    // Full card: the envelope's link opens the drawer its block names. A link with no block (mini's\n    // \"Make a Transfer\") is the card's action, drawn as the mini label below, never a dead link.\n    const envelopeLink =\n      !isMini && inDescriptionCta?.label && inDescriptionCta.block ? inDescriptionCta : undefined\n    // The card's action label: the primary CTA's, else a block-less envelope link's (ditto ≥ 1.4.3\n    // sends mini's action as in_description_cta with no primary_cta). It is a button only on a full\n    // card with a primary CTA; otherwise a label, so a tap reaches the host's card handler.\n    const ctaLabel = primary_cta?.label ?? (envelopeLink ? undefined : inDescriptionCta?.label)\n    const isCtaButton = !isMini && !!primary_cta?.label\n    const showSecondaryCta = !isMini && !!secondary_cta?.label\n    const obsoleteCopy = copy.insights_feed?.general\n    const isObsoleteDimmed =\n      obsolete?.state === 'not_refreshable' && !dismissed_at && !!obsoleteCopy\n\n    return (\n      <BeatActionsProvider value={flow.wrappedActions}>\n        <Stack sx={{ mb: 16 }}>\n          {flow.cardState === 'confirming' ? (\n            <HiddenConfirmationCard\n              onClose={flow.collapseConfirmation}\n              onLeaveFeedback={flow.openHideSurvey}\n              onUndo={flow.undoDismiss}\n            />\n          ) : (\n            <>\n              {obsolete && obsoleteCopy && <ObsolesceBanner {...obsolete} copy={obsoleteCopy} />}\n              <Card\n                inert={isObsoleteDimmed}\n                sx={{\n                  ...(isObsoleteDimmed && {\n                    position: 'relative',\n                    zIndex: 2,\n                    pointerEvents: 'none',\n                  }),\n                }}\n              >\n                {isObsoleteDimmed && <Box sx={OBSOLETE_OVERLAY_SX} />}\n                <Header isMini={isMini} subtitle={subtitle} title={title ?? ''} />\n                {isLoading ? (\n                  <LoadingCard />\n                ) : (\n                  Block && <Block beatGuid={guid} payload={insights_payload} />\n                )}\n\n                <Stack sx={{ gap: 6, pb: 16, pt: 12, px: 16 }}>\n                  <P\n                    dangerouslySetInnerHTML={{\n                      __html: insights_payload.description.html_text,\n                    }}\n                    variant=\"subtitle2\"\n                  />\n                  {/* V2: the envelope's link opens the action block it names. */}\n                  {envelopeLink && (\n                    <Button\n                      endIcon={<ChevronRight />}\n                      onClick={() =>\n                        insightsV2Store.openActionDrawer({ guid, trigger: 'inDescriptionCta' })\n                      }\n                      sx={{ height: 24, p: 4, width: 'max-content' }}\n                    >\n                      {envelopeLink.label}\n                    </Button>\n                  )}\n                  {/* V1: the legacy field, shown for beats that do not send the envelope link. */}\n                  {!inDescriptionCta?.label && beat?.in_description_cta && (\n                    <Button\n                      endIcon={<ChevronRight />}\n                      onClick={() => {}}\n                      sx={{ height: 24, p: 4, width: 'max-content' }}\n                    >\n                      {beat.in_description_cta}\n                    </Button>\n                  )}\n                </Stack>\n\n                {(ctaLabel || showSecondaryCta) && (\n                  <Stack sx={{ gap: 8, pb: 16, px: 16 }}>\n                    {ctaLabel &&\n                      !isCtaButton && (\n                        // Mini is a tap target, as in V1: the card, not this label, is the control. The label\n                        // is deliberately not a button, so a tap on it reaches the host's card handler (Pulse\n                        // posts `carousel/cta`, the same redirect a V1 mini card sends) instead of opening\n                        // the action drawer the full card's CTA opens.\n                        <Text color=\"primary.main\" sx={MINI_CTA_SX} variant=\"button\">\n                          {ctaLabel}\n                        </Text>\n                      )}\n                    {isCtaButton && primary_cta && (\n                      <Button\n                        aria-disabled={isCtaDisabled(primary_cta.block) || primaryCtaState.disabled}\n                        disabled={primaryCtaState.disabled}\n                        onClick={() => onCtaClick('primary', primary_cta)}\n                        sx={{\n                          ...(isCtaDisabled(primary_cta.block) && { color: 'text.disabled' }),\n                        }}\n                        variant=\"outlined\"\n                      >\n                        {primary_cta.label}\n                      </Button>\n                    )}\n                    {/* Mini has room for one CTA. */}\n                    {showSecondaryCta && secondary_cta && (\n                      <Button\n                        aria-disabled={\n                          isCtaDisabled(secondary_cta.block) || secondaryCtaState.disabled\n                        }\n                        color=\"secondary\"\n                        disabled={secondaryCtaState.disabled}\n                        onClick={() => onCtaClick('secondary', secondary_cta)}\n                      >\n                        {secondary_cta.label}\n                      </Button>\n                    )}\n                  </Stack>\n                )}\n\n                <FeedbackBar onTellUsMore={flow.openRatingSurvey} show={flow.isFeedbackBarShown} />\n              </Card>\n            </>\n          )}\n\n          <ActionBlockLayer beat={beat} />\n\n          <DismissInsightDialog\n            isOpen={flow.isDismissOpen}\n            onClose={flow.closeDismissDialog}\n            onDismiss={flow.confirmDismiss}\n          />\n\n          {flow.isSurveyOpen && (\n            <FeedbackDialog\n              characterLimitLabel={flow.survey.characterLimitLabel}\n              closeAriaLabel={flow.survey.closeAriaLabel}\n              isOpen={true}\n              onBackClick={flow.feedbackDialogCallbacks.onBackClick}\n              onClose={flow.closeSurvey}\n              onSubmit={flow.submitSurvey}\n              onTextInputFocus={flow.feedbackDialogCallbacks.onTextInputFocus}\n              options={flow.survey.options}\n              primaryText={flow.survey.submitText}\n              secondaryText={flow.survey.backText}\n              title={flow.survey.title}\n            />\n          )}\n\n          {flow.cardState === 'visible' && insights_payload.footer && (\n            <Footer footer={insights_payload.footer} />\n          )}\n        </Stack>\n      </BeatActionsProvider>\n    )\n  },\n)\n\nexport default BaseLayout\n"],"mappings":"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"}

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

@@ -1,17 +1,19 @@
 import { slot as y } from "../../core/types/Insights.es.js";
 import { createVariantBlock as k } from "../blocks/createVariantBlock.es.js";
 import m from "./BadgedTile.es.js";
-import { InsightOptionsMenu as I } from "./InsightOptionsMenu.es.js";
-import w from "./LogoFromGuid.es.js";
-import v from "./StatusBadge.es.js";
+import { InsightOptionsMenu as w } from "./InsightOptionsMenu.es.js";
+import I from "./LogoFromGuid.es.js";
+import { ReactComponent as v } from "./shared/images/FeeDetected.es.js";
+import { ThemedSVGImage as C } from "./chartblocks/ThemedSVGImage.es.js";
+import S from "./StatusBadge.es.js";
 import l from "@mui/material/Stack";
-import { P as C, Text as _ } from "@mxenabled/mxui";
-import S from "@mui/material/Button";
-import { Icon as B } from "@mxenabled/mx-icons";
+import { P as _, Text as V } from "@mxenabled/mxui";
+import B from "@mui/material/Button";
+import { Icon as P } from "@mxenabled/mx-icons";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import p from "@mui/material/Box";
 import z from "@mui/material/Card";
-var a = 44, d = ({ logo: r }) => r ? /* @__PURE__ */ t(w, {
+var a = 44, d = ({ logo: r }) => r ? /* @__PURE__ */ t(I, {
   logo: r,
   size: a
 }) : /* @__PURE__ */ t(p, {
@@ -24,7 +26,7 @@ var a = 44, d = ({ logo: r }) => r ? /* @__PURE__ */ t(w, {
     justifyContent: "center",
     width: a
   },
-  children: /* @__PURE__ */ t(B, {
+  children: /* @__PURE__ */ t(P, {
     color: "primary",
     fill: !0,
     name: "lightbulb",
@@ -34,21 +36,29 @@ var a = 44, d = ({ logo: r }) => r ? /* @__PURE__ */ t(w, {
   center: /* @__PURE__ */ t(d, { logo: r }),
   size: a,
   sx: { flexShrink: 0 }
-}), P = ({ logo: r }) => /* @__PURE__ */ t(m, {
+}), j = ({ logo: r }) => /* @__PURE__ */ t(m, {
   center: /* @__PURE__ */ t(d, { logo: r }),
   size: a,
   sx: { flexShrink: 0 },
-  topRight: /* @__PURE__ */ t(v, { tone: "warning" })
-}), V = k({
+  topRight: /* @__PURE__ */ t(S, { tone: "warning" })
+}), D = () => /* @__PURE__ */ t(C, {
+  divProps: { style: {
+    flexShrink: 0,
+    lineHeight: 0,
+    width: "max-content"
+  } },
+  image: v
+}), L = k({
   variants: {
     minimal: c,
-    with_warning_badge: P
+    with_illustration: D,
+    with_warning_badge: j
   },
   fallback: c,
   name: "InsightVisual"
-}), j = (r) => r.stopPropagation(), $ = ({ isCtaDisabled: r = !1, onCtaClick: g, onTap: e, payload: f }) => {
-  const { description: h, instance_slot: s, primary_cta: o, title: x } = f, u = y(s.data, "logo"), b = (i) => {
-    i.stopPropagation(), !(r || !o) && g?.(o);
+}), F = (r) => r.stopPropagation(), U = ({ isCtaDisabled: r = !1, onCtaClick: f, onTap: e, payload: g }) => {
+  const { description: h, instance_slot: s, primary_cta: o, title: u } = g, x = y(s.data, "logo"), b = (i) => {
+    i.stopPropagation(), !(r || !o) && f?.(o);
   };
   return /* @__PURE__ */ n(z, {
     "data-testid": "compact-insight-card",
@@ -77,14 +87,14 @@ var a = 44, d = ({ logo: r }) => r ? /* @__PURE__ */ t(w, {
         pl: 8,
         pt: 4
       },
-      children: [/* @__PURE__ */ t(_, {
+      children: [/* @__PURE__ */ t(V, {
         bold: !0,
         variant: "body1",
-        children: x ?? ""
+        children: u ?? ""
       }), /* @__PURE__ */ t(p, {
-        onClick: j,
+        onClick: F,
         sx: { display: "flex" },
-        children: /* @__PURE__ */ t(I, {})
+        children: /* @__PURE__ */ t(w, {})
       })]
     }), /* @__PURE__ */ n(l, {
       sx: {
@@ -99,11 +109,11 @@ var a = 44, d = ({ logo: r }) => r ? /* @__PURE__ */ t(w, {
           gap: 8,
           minWidth: 0
         },
-        children: [/* @__PURE__ */ t(C, {
+        children: [/* @__PURE__ */ t(_, {
           dangerouslySetInnerHTML: { __html: h.html_text },
           "data-testid": "compact-insight-card-description",
           variant: "subtitle2"
-        }), o?.label && /* @__PURE__ */ t(S, {
+        }), o?.label && /* @__PURE__ */ t(B, {
           "aria-disabled": r,
           onClick: b,
           size: "small",
@@ -119,15 +129,15 @@ var a = 44, d = ({ logo: r }) => r ? /* @__PURE__ */ t(w, {
           variant: "text",
           children: o.label
         })]
-      }), /* @__PURE__ */ t(V, {
-        logo: u,
+      }), /* @__PURE__ */ t(L, {
+        logo: x,
         variant: s.variant
       })]
     })]
   });
 };
 export {
-  $ as default
+  U as default
 };
 
 //# sourceMappingURL=CompactInsightCard.es.js.map

package/dist/insights-v2/components/CompactInsightCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompactInsightCard.es.js","names":[],"sources":["../../../src/insights-v2/components/CompactInsightCard.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { slot } from '../../core'\nimport type { InsightsPayload, LogoRef, PrimaryCTA } from '../../core'\nimport { createVariantBlock } from '../blocks/createVariantBlock'\nimport BadgedTile from './BadgedTile'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport LogoFromGuid from './LogoFromGuid'\nimport StatusBadge from './StatusBadge'\n\n/** Figma 1941:111897: the tile the logo fills is 44px (rows are 32, the notification row 33). */\nconst ICON_SIZE = 44\n\ninterface InsightVisualProps {\n  /** The slot's `logo`, when ditto's variant declares and fills one. */\n  logo?: LogoRef | null\n}\n\n/** The slot's logo, or the neutral insight glyph when the slot carries none. */\nconst LogoOrFallback = ({ logo }: InsightVisualProps) =>\n  logo ? (\n    <LogoFromGuid logo={logo} size={ICON_SIZE} />\n  ) : (\n    <Box\n      data-testid=\"compact-insight-card-fallback-icon\"\n      sx={{\n        alignItems: 'center',\n        bgcolor: 'primary.lighter',\n        display: 'flex',\n        height: ICON_SIZE,\n        justifyContent: 'center',\n        width: ICON_SIZE,\n      }}\n    >\n      <Icon color=\"primary\" fill={true} name=\"lightbulb\" size={24} />\n    </Box>\n  )\n\n/** Micro, and any variant not registered below: the logo alone. */\nconst PlainVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile center={<LogoOrFallback logo={logo} />} size={ICON_SIZE} sx={{ flexShrink: 0 }} />\n)\n\n/** ditto `with_warning_badge`: the logo badged with a status glyph (Figma 1941:111897). */\nconst WarningBadgeVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile\n    center={<LogoOrFallback logo={logo} />}\n    size={ICON_SIZE}\n    sx={{ flexShrink: 0 }}\n    topRight={<StatusBadge tone=\"warning\" />}\n  />\n)\n\n/**\n * The card's right-hand visual, one component per ditto layout variant.\n *\n * A variant names a rendering *shape*, not an insight or a surface — `with_header` already serves\n * both Large Transaction and Fee Detected — so an insight wanting the badged logo reuses\n * `with_warning_badge`. Only a genuinely different visual registers a new entry, and existing ones\n * are never touched.\n *\n * `minimal` draws the plain logo and is registered explicitly even though it matches the fallback:\n * micro and notification resolve it on every render, and an unregistered variant warns. The\n * fallback is for variants we genuinely do not know.\n */\nconst InsightVisual = createVariantBlock<InsightVisualProps>({\n  variants: { minimal: PlainVisual, with_warning_badge: WarningBadgeVisual },\n  fallback: PlainVisual,\n  name: 'InsightVisual',\n})\n\nexport interface CompactInsightCardProps {\n  /** A `micro` or `embedded` envelope. */\n  payload: InsightsPayload\n  /**\n   * Makes the whole card the tap target. What a tap does is the host's decision (post to the\n   * host app, open a drawer, …); the card never opens anything itself. Omit for a static card.\n   */\n  onTap?: () => void\n  /** Receives the primary CTA when tapped. The card does not resolve the CTA's block itself. */\n  onCtaClick?: (cta: PrimaryCTA) => void\n  /**\n   * Renders the CTA disabled — label shown, `aria-disabled`, not tappable — for a host that cannot\n   * honour it (e.g. `contact_support_block` when the client's `enable_support_requests` is off).\n   */\n  isCtaDisabled?: boolean\n}\n\nconst stopPropagation = (event: MouseEvent) => event.stopPropagation()\n\n/**\n * The one compact renderer the micro and embedded envelopes share (`insights_v2.2.md` §8.3).\n *\n * Figma 1941:111897 (Embedded | Large Transaction): a title row with the overflow slot, the HTML\n * description with the primary CTA under it, and on the right the slot's `logo` in a\n * `<BadgedTile>`. Under ditto's `with_warning_badge` variant the tile takes a status badge; under\n * `minimal` it draws the logo alone. The card lays out from the envelope alone and never reads\n * `widget_type`.\n *\n * The icon falls back to the neutral insight glyph **here**, not in `LogoFromGuid`, when the slot\n * carries no logo. The `pill` on the same envelope is the transaction row's, not the card's.\n */\nconst CompactInsightCard = ({\n  isCtaDisabled = false,\n  onCtaClick,\n  onTap,\n  payload,\n}: CompactInsightCardProps) => {\n  const { description, instance_slot, primary_cta, title } = payload\n  // Reduced variants (`minimal`, `with_warning_badge`) declare a bare `logo` slot.\n  const rowLogo = slot<LogoRef>(instance_slot.data, 'logo')\n\n  const handleCtaClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    if (isCtaDisabled || !primary_cta) return\n    onCtaClick?.(primary_cta)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    // Only the card itself: Enter on the CTA button is the button's own click.\n    if (event.target !== event.currentTarget) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onTap?.()\n    }\n  }\n\n  const interactiveProps = onTap\n    ? { onClick: onTap, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 }\n    : {}\n\n  return (\n    <Card\n      data-testid=\"compact-insight-card\"\n      {...interactiveProps}\n      sx={{\n        minWidth: 288,\n        pb: 12,\n        pl: 8,\n        pr: 16,\n        pt: 8,\n        ...(onTap && { cursor: 'pointer' }),\n      }}\n    >\n      <Stack\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          gap: 8,\n          justifyContent: 'space-between',\n          pl: 8,\n          pt: 4,\n        }}\n      >\n        <Text bold={true} variant=\"body1\">\n          {title ?? ''}\n        </Text>\n        {/* The menu renders only when the host wired `onMenuAction` (BeatActionsProvider). */}\n        <Box onClick={stopPropagation} sx={{ display: 'flex' }}>\n          <InsightOptionsMenu />\n        </Box>\n      </Stack>\n\n      <Stack sx={{ flexDirection: 'row', gap: 16, pl: 8, pt: 4 }}>\n        <Stack sx={{ flex: 1, gap: 8, minWidth: 0 }}>\n          {/* `html_text` is rendered server-side by mrs_content from the ditto copy template (bold\n              amount / merchant), not user-authored input; painted the same way `BaseLayout` paints\n              the full card's description. */}\n          <P\n            dangerouslySetInnerHTML={{ __html: description.html_text }}\n            data-testid=\"compact-insight-card-description\"\n            variant=\"subtitle2\"\n          />\n          {primary_cta?.label && (\n            <Button\n              aria-disabled={isCtaDisabled}\n              onClick={handleCtaClick}\n              size=\"small\"\n              sx={{\n                alignSelf: 'flex-start',\n                // Figma 1941:111897 lines the CTA label up with the description's left edge. The\n                // column already pads 8, so the button's own 8 is pulled back out — padding kept so\n                // the tap target does not shrink.\n                ml: -8,\n                px: 8,\n                ...(isCtaDisabled && {\n                  color: 'text.disabled',\n                  cursor: 'default',\n                }),\n              }}\n              variant=\"text\"\n            >\n              {primary_cta.label}\n            </Button>\n          )}\n        </Stack>\n\n        <InsightVisual logo={rowLogo} variant={instance_slot.variant} />\n      </Stack>\n    </Card>\n  )\n}\n\nexport default CompactInsightCard\n"],"mappings":"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"}
+{"version":3,"file":"CompactInsightCard.es.js","names":[],"sources":["../../../src/insights-v2/components/CompactInsightCard.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { slot } from '../../core'\nimport type { InsightsPayload, LogoRef, PrimaryCTA } from '../../core'\nimport { createVariantBlock } from '../blocks/createVariantBlock'\nimport BadgedTile from './BadgedTile'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport LogoFromGuid from './LogoFromGuid'\nimport { ReactComponent as FeeDetectedIllustration } from './shared/images/FeeDetected.svg'\nimport { ThemedSVGImage } from './chartblocks/ThemedSVGImage'\nimport StatusBadge from './StatusBadge'\n\n/** Figma 1941:111897: the tile the logo fills is 44px (rows are 32, the notification row 33). */\nconst ICON_SIZE = 44\n\ninterface InsightVisualProps {\n  /** The slot's `logo`, when ditto's variant declares and fills one. */\n  logo?: LogoRef | null\n}\n\n/** The slot's logo, or the neutral insight glyph when the slot carries none. */\nconst LogoOrFallback = ({ logo }: InsightVisualProps) =>\n  logo ? (\n    <LogoFromGuid logo={logo} size={ICON_SIZE} />\n  ) : (\n    <Box\n      data-testid=\"compact-insight-card-fallback-icon\"\n      sx={{\n        alignItems: 'center',\n        bgcolor: 'primary.lighter',\n        display: 'flex',\n        height: ICON_SIZE,\n        justifyContent: 'center',\n        width: ICON_SIZE,\n      }}\n    >\n      <Icon color=\"primary\" fill={true} name=\"lightbulb\" size={24} />\n    </Box>\n  )\n\n/** Micro, and any variant not registered below: the logo alone. */\nconst PlainVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile center={<LogoOrFallback logo={logo} />} size={ICON_SIZE} sx={{ flexShrink: 0 }} />\n)\n\n/** ditto `with_warning_badge`: the logo badged with a status glyph (Figma 1941:111897). */\nconst WarningBadgeVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile\n    center={<LogoOrFallback logo={logo} />}\n    size={ICON_SIZE}\n    sx={{ flexShrink: 0 }}\n    topRight={<StatusBadge tone=\"warning\" />}\n  />\n)\n\n/**\n * ditto `with_illustration`: artwork in place of the logo tile (Fee Detected's search illustration).\n * A single SVG themed at runtime by `ThemedSVGImage`: its `brand300` elements are recolored to the\n * theme's `primary.main` (so it follows dark mode), while `fill=\"white\"` areas stay white. The\n * slot's `logo` is deliberately unused: the illustration replaces the tile.\n */\nconst IllustrationVisual = () => {\n  return (\n    <ThemedSVGImage\n      divProps={{ style: { flexShrink: 0, lineHeight: 0, width: 'max-content' } }}\n      image={FeeDetectedIllustration}\n    />\n  )\n}\n\n/**\n * The card's right-hand visual, one component per ditto layout variant.\n *\n * A variant names a rendering *shape*, not an insight or a surface — `with_header` already serves\n * both Large Transaction and Fee Detected — so an insight wanting the badged logo reuses\n * `with_warning_badge`. Only a genuinely different visual registers a new entry, and existing ones\n * are never touched.\n *\n * `minimal` draws the plain logo and is registered explicitly even though it matches the fallback:\n * micro and notification resolve it on every render, and an unregistered variant warns. The\n * fallback is for variants we genuinely do not know.\n */\nconst InsightVisual = createVariantBlock<InsightVisualProps>({\n  variants: {\n    minimal: PlainVisual,\n    with_illustration: IllustrationVisual,\n    with_warning_badge: WarningBadgeVisual,\n  },\n  fallback: PlainVisual,\n  name: 'InsightVisual',\n})\n\nexport interface CompactInsightCardProps {\n  /** A `micro` or `embedded` envelope. */\n  payload: InsightsPayload\n  /**\n   * Makes the whole card the tap target. What a tap does is the host's decision (post to the\n   * host app, open a drawer, …); the card never opens anything itself. Omit for a static card.\n   */\n  onTap?: () => void\n  /** Receives the primary CTA when tapped. The card does not resolve the CTA's block itself. */\n  onCtaClick?: (cta: PrimaryCTA) => void\n  /**\n   * Renders the CTA disabled — label shown, `aria-disabled`, not tappable — for a host that cannot\n   * honour it (e.g. `contact_support_block` when the client's `enable_support_requests` is off).\n   */\n  isCtaDisabled?: boolean\n}\n\nconst stopPropagation = (event: MouseEvent) => event.stopPropagation()\n\n/**\n * The one compact renderer the micro and embedded envelopes share (`insights_v2.2.md` §8.3).\n *\n * Figma 1941:111897 (Embedded | Large Transaction): a title row with the overflow slot, the HTML\n * description with the primary CTA under it, and on the right the slot's `logo` in a\n * `<BadgedTile>`. Under ditto's `with_warning_badge` variant the tile takes a status badge; under\n * `minimal` it draws the logo alone. The card lays out from the envelope alone and never reads\n * `widget_type`.\n *\n * The icon falls back to the neutral insight glyph **here**, not in `LogoFromGuid`, when the slot\n * carries no logo. The `pill` on the same envelope is the transaction row's, not the card's.\n */\nconst CompactInsightCard = ({\n  isCtaDisabled = false,\n  onCtaClick,\n  onTap,\n  payload,\n}: CompactInsightCardProps) => {\n  const { description, instance_slot, primary_cta, title } = payload\n  // Reduced variants (`minimal`, `with_warning_badge`) declare a bare `logo` slot.\n  const rowLogo = slot<LogoRef>(instance_slot.data, 'logo')\n\n  const handleCtaClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    if (isCtaDisabled || !primary_cta) return\n    onCtaClick?.(primary_cta)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    // Only the card itself: Enter on the CTA button is the button's own click.\n    if (event.target !== event.currentTarget) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onTap?.()\n    }\n  }\n\n  const interactiveProps = onTap\n    ? { onClick: onTap, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 }\n    : {}\n\n  return (\n    <Card\n      data-testid=\"compact-insight-card\"\n      {...interactiveProps}\n      sx={{\n        minWidth: 288,\n        pb: 12,\n        pl: 8,\n        pr: 16,\n        pt: 8,\n        ...(onTap && { cursor: 'pointer' }),\n      }}\n    >\n      <Stack\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          gap: 8,\n          justifyContent: 'space-between',\n          pl: 8,\n          pt: 4,\n        }}\n      >\n        <Text bold={true} variant=\"body1\">\n          {title ?? ''}\n        </Text>\n        {/* The menu renders only when the host wired `onMenuAction` (BeatActionsProvider). */}\n        <Box onClick={stopPropagation} sx={{ display: 'flex' }}>\n          <InsightOptionsMenu />\n        </Box>\n      </Stack>\n\n      <Stack sx={{ flexDirection: 'row', gap: 16, pl: 8, pt: 4 }}>\n        <Stack sx={{ flex: 1, gap: 8, minWidth: 0 }}>\n          {/* `html_text` is rendered server-side by mrs_content from the ditto copy template (bold\n              amount / merchant), not user-authored input; painted the same way `BaseLayout` paints\n              the full card's description. */}\n          <P\n            dangerouslySetInnerHTML={{ __html: description.html_text }}\n            data-testid=\"compact-insight-card-description\"\n            variant=\"subtitle2\"\n          />\n          {primary_cta?.label && (\n            <Button\n              aria-disabled={isCtaDisabled}\n              onClick={handleCtaClick}\n              size=\"small\"\n              sx={{\n                alignSelf: 'flex-start',\n                // Figma 1941:111897 lines the CTA label up with the description's left edge. The\n                // column already pads 8, so the button's own 8 is pulled back out — padding kept so\n                // the tap target does not shrink.\n                ml: -8,\n                px: 8,\n                ...(isCtaDisabled && {\n                  color: 'text.disabled',\n                  cursor: 'default',\n                }),\n              }}\n              variant=\"text\"\n            >\n              {primary_cta.label}\n            </Button>\n          )}\n        </Stack>\n\n        <InsightVisual logo={rowLogo} variant={instance_slot.variant} />\n      </Stack>\n    </Card>\n  )\n}\n\nexport default CompactInsightCard\n"],"mappings":"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"}

package/dist/insights-v2/components/LogoFromGuid.d.ts

@@ -1,8 +1,8 @@
 import { LogoRef } from '../../core';
 export declare const isLogoGuid: (guid?: string | null) => guid is string;
 export interface LogoFromGuidProps {
-    /** The envelope's logo object: `{ guid, fallback_guid?, alt? }`. */
-    logo?: Pick<LogoRef, 'alt' | 'fallback_guid' | 'guid'> | null;
+    /** The envelope's logo object: `{ guid, fallback_guid?, alt?, color? }` (`color` is read for `ICO-` icons). */
+    logo?: Pick<LogoRef, 'alt' | 'color' | 'fallback_guid' | 'guid'> | null;
     /** Rendered square size in px (32 on rows, 40 on the compact card, 33 on the notification row). */
     size: number;
     className?: string;