@mx-cartographer/experiences 9.5.2 → 9.5.4

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [9.5.4] - 10-09-2026
+
+- **ADDED** - `amount_input_modal_block`, the first modal action block: edits one whole-dollar setting in a dialog, picked by the CTA variant. `low_balance_threshold` (Low Account Balance "Edit Alert Settings") saves the threshold on the account's low-balance alert profile; `safety_net` (Savings Opportunity V2 "Set Reminder" / "Adjust Reminder") saves the safety net on the user insight profile. Saves run through `useCtaHandler`. Copy under `insights_feed.amount_input_modal`; mock beats, stories and `docs/action-blocks/amount-input-modal-block.md`.
+- **ADDED** - `ActionBlockEntry.presentation: 'modal'`: `ActionBlockLayer` renders such a block without the drawer, and only while it is open for its beat.
+- **ADDED** - Optional `CurrencyDialog` props `subtitle`, `errorText` and `isPrimaryDisabled`; `content` now accepts a node. Its helper text (validation or save error) is now announced with `role="alert"`. Existing callers are otherwise unchanged.
+- **CHANGED** - `hasDrawerBlock` moved to `insights-v2/mappings/hasDrawerBlock.ts` (still re-exported from `mappings/blocks`) so action blocks can import `ctaActions` without an import cycle.
+
+## [9.5.3] - 10-09-2026
+
+- **CHANGED** - Repeating-transaction create flows show Sherlock-ineligible rows disabled instead of hiding them; `SelectTransaction` drives `TransactionList`'s new `isRowDisabled` prop instead of `filter` (MEW-4143)
+
 ## [9.5.2] - 10-09-2026
 
 - **FIXED** - The small-screen Edit date range drawer shows the selected dates as text instead of From and To fields that could not be typed into MEW-4218

package/dist/common/components/CurrencyDialog.d.ts

@@ -1,10 +1,16 @@
+import { ReactNode } from 'react';
 import { ButtonProps } from '@mui/material/Button';
 interface CurrencyDialogProps {
     closeAriaLabel: string;
-    content?: string;
+    /** Body copy; a node so callers can emphasise part of it (e.g. a bold account name). */
+    content?: ReactNode;
+    /** Validation or save error, shown under the input and marking it invalid. */
+    errorText?: string;
     inputLabel?: string;
     inputValue?: string;
     isOpen: boolean;
+    /** Disables the primary button on top of the built-in input check (e.g. while saving). */
+    isPrimaryDisabled?: boolean;
     handleInputChange?: (value: string) => void;
     handleModalClose: () => void;
     handlePrimaryAction: () => void;
@@ -13,7 +19,9 @@ interface CurrencyDialogProps {
     primaryText: string;
     secondaryColor?: ButtonProps['color'];
     secondaryText?: string;
+    /** A line under the title, e.g. the account a setting applies to. */
+    subtitle?: ReactNode;
     title: string;
 }
-declare const CurrencyDialog: ({ closeAriaLabel, content, inputLabel, inputValue, isOpen, handleInputChange, handleModalClose, handlePrimaryAction, handleSecondaryAction, primaryColor, primaryText, secondaryColor, secondaryText, title, }: CurrencyDialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const CurrencyDialog: ({ closeAriaLabel, content, errorText, inputLabel, inputValue, isOpen, isPrimaryDisabled, handleInputChange, handleModalClose, handlePrimaryAction, handleSecondaryAction, primaryColor, primaryText, secondaryColor, secondaryText, subtitle, title, }: CurrencyDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default CurrencyDialog;

package/dist/common/components/CurrencyDialog.es.js

@@ -1,34 +1,34 @@
-import { useScreenSize as v } from "../hooks/useScreenSize.es.js";
-import p from "@mui/material/Stack";
-import { H3 as I, P as y } from "@mxenabled/mxui";
-import c from "@mui/material/Button";
-import { Icon as S } from "@mxenabled/mx-icons";
-import { jsx as o, jsxs as e } from "react/jsx-runtime";
-import j from "@mui/material/Dialog";
-import k from "@mui/material/DialogContent";
-import M from "@mui/material/IconButton";
-import $ from "@mui/material/DialogActions";
-import F from "@mui/material/InputAdornment";
-import w from "@mui/material/TextField";
-var O = ({ closeAriaLabel: d, content: f, inputLabel: t, inputValue: i, isOpen: h, handleInputChange: u, handleModalClose: n, handlePrimaryAction: a, handleSecondaryAction: g, primaryColor: x = "primary", primaryText: m, secondaryColor: b = "primary", secondaryText: l, title: s }) => {
-  const C = i !== "" && i !== "0" && !isNaN(parseFloat(i ?? "0")), { isSmallMobile: D } = v();
-  return /* @__PURE__ */ o(j, {
-    "aria-label": s,
+import { useScreenSize as k } from "../hooks/useScreenSize.es.js";
+import n from "@mui/material/Stack";
+import { H3 as S, P as j } from "@mxenabled/mxui";
+import f from "@mui/material/Button";
+import { Icon as M } from "@mxenabled/mx-icons";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import $ from "@mui/material/Dialog";
+import B from "@mui/material/DialogContent";
+import F from "@mui/material/IconButton";
+import H from "@mui/material/DialogActions";
+import w from "@mui/material/InputAdornment";
+import A from "@mui/material/TextField";
+var U = ({ closeAriaLabel: h, content: g, errorText: a, inputLabel: r, inputValue: i, isOpen: u, isPrimaryDisabled: x = !1, handleInputChange: b, handleModalClose: m, handlePrimaryAction: s, handleSecondaryAction: C, primaryColor: D = "primary", primaryText: p, secondaryColor: v = "primary", secondaryText: l, subtitle: y, title: c }) => {
+  const d = x || (r ? !(i !== "" && i !== "0" && !isNaN(parseFloat(i ?? "0"))) : !1), { isSmallMobile: I } = k();
+  return /* @__PURE__ */ o($, {
+    "aria-label": c,
     "aria-labelledby": "modal-title",
     maxWidth: "xs",
-    onClose: n,
-    open: h,
+    onClose: m,
+    open: u,
     role: "dialog",
     sx: {
       "& .MuiDialogContent-root": { p: 0 },
-      ...D && { "& .MuiDialog-paper": { minWidth: "100%" } }
+      ...I && { "& .MuiDialog-paper": { minWidth: "100%" } }
     },
-    children: /* @__PURE__ */ o(k, { children: /* @__PURE__ */ e("form", {
-      onSubmit: (r) => {
-        r.preventDefault(), a();
+    children: /* @__PURE__ */ o(B, { children: /* @__PURE__ */ t("form", {
+      onSubmit: (e) => {
+        e.preventDefault(), d || s();
       },
       children: [
-        /* @__PURE__ */ e(p, {
+        /* @__PURE__ */ t(n, {
           sx: {
             alignItems: "center",
             flexDirection: "row",
@@ -39,46 +39,52 @@ var O = ({ closeAriaLabel: d, content: f, inputLabel: t, inputValue: i, isOpen:
             pr: 16,
             pt: 24
           },
-          children: [/* @__PURE__ */ o(I, {
-            id: "modal-title",
-            children: s
-          }), /* @__PURE__ */ o(M, {
-            "aria-label": d,
-            onClick: n,
+          children: [/* @__PURE__ */ t(n, {
+            sx: { gap: 4 },
+            children: [/* @__PURE__ */ o(S, {
+              id: "modal-title",
+              children: c
+            }), y]
+          }), /* @__PURE__ */ o(F, {
+            "aria-label": h,
+            onClick: m,
             sx: {
               minHeight: 24,
               position: "absolute",
               right: 8,
               top: 18
             },
-            children: /* @__PURE__ */ o(S, {
+            children: /* @__PURE__ */ o(M, {
               name: "close",
               sx: { color: "action.active" }
             })
           })]
         }),
-        /* @__PURE__ */ e(p, {
+        /* @__PURE__ */ t(n, {
           sx: {
             gap: 24,
             px: 24
           },
-          children: [/* @__PURE__ */ o(y, {
+          children: [/* @__PURE__ */ o(j, {
             variant: "subtitle1",
-            children: f
-          }), t && /* @__PURE__ */ o(w, {
+            children: g
+          }), r && /* @__PURE__ */ o(A, {
             autoFocus: !0,
+            error: !!a,
+            helperText: a,
             inputMode: "decimal",
-            label: t,
-            onChange: ({ target: { value: r } }) => {
-              /^\d*\.?\d*$/.test(r) && u?.(r);
+            label: r,
+            onChange: ({ target: { value: e } }) => {
+              /^\d*\.?\d*$/.test(e) && b?.(e);
             },
             slotProps: {
-              input: { startAdornment: /* @__PURE__ */ o(F, {
+              input: { startAdornment: /* @__PURE__ */ o(w, {
                 position: "start",
                 children: "$"
               }) },
+              formHelperText: { role: "alert" },
               htmlInput: {
-                "aria-label": t,
+                "aria-label": r,
                 noValidate: !0,
                 pattern: "[0-9]*\\.?[0-9]*"
               }
@@ -87,25 +93,25 @@ var O = ({ closeAriaLabel: d, content: f, inputLabel: t, inputValue: i, isOpen:
             value: i
           })]
         }),
-        /* @__PURE__ */ e($, {
+        /* @__PURE__ */ t(H, {
           sx: {
             justifyContent: "flex-end",
             gap: 16,
             p: 24,
             ">:not(style)~:not(style)": { ml: 0 }
           },
-          children: [l && /* @__PURE__ */ o(c, {
+          children: [l && /* @__PURE__ */ o(f, {
             "aria-label": l,
-            color: b,
-            onClick: g,
+            color: v,
+            onClick: C,
             children: l
-          }), /* @__PURE__ */ o(c, {
-            "aria-label": m,
-            color: x,
-            disabled: t ? !C : !1,
-            onClick: a,
+          }), /* @__PURE__ */ o(f, {
+            "aria-label": p,
+            color: D,
+            disabled: d,
+            onClick: s,
             variant: "contained",
-            children: m
+            children: p
           })]
         })
       ]
@@ -113,7 +119,7 @@ var O = ({ closeAriaLabel: d, content: f, inputLabel: t, inputValue: i, isOpen:
   });
 };
 export {
-  O as default
+  U as default
 };
 
 //# sourceMappingURL=CurrencyDialog.es.js.map

package/dist/common/components/CurrencyDialog.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyDialog.es.js","names":[],"sources":["../../../src/common/components/CurrencyDialog.tsx"],"sourcesContent":["import { Icon } from '@mxenabled/mx-icons'\nimport { H3, P } from '@mxenabled/mxui'\n\nimport Button, { type ButtonProps } from '@mui/material/Button'\nimport Dialog from '@mui/material/Dialog'\nimport DialogActions from '@mui/material/DialogActions'\nimport DialogContent from '@mui/material/DialogContent'\nimport IconButton from '@mui/material/IconButton'\nimport InputAdornment from '@mui/material/InputAdornment'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { useScreenSize } from '../hooks'\n\ninterface CurrencyDialogProps {\n  closeAriaLabel: string\n  content?: string\n  inputLabel?: string\n  inputValue?: string\n  isOpen: boolean\n  handleInputChange?: (value: string) => void\n  handleModalClose: () => void\n  handlePrimaryAction: () => void\n  handleSecondaryAction?: () => void\n  primaryColor?: ButtonProps['color']\n  primaryText: string\n  secondaryColor?: ButtonProps['color']\n  secondaryText?: string\n  title: string\n}\n\n// Created for V2 of BudgetDetailsDrawer.\n// The previous design will be replaced once the new design is finalized.\n// Also needs to be updated to use the mxui library\n// with the updated Dialog components.\n\nconst CurrencyDialog = ({\n  closeAriaLabel,\n  content,\n  inputLabel,\n  inputValue,\n  isOpen,\n  handleInputChange,\n  handleModalClose,\n  handlePrimaryAction,\n  handleSecondaryAction,\n  primaryColor = 'primary',\n  primaryText,\n  secondaryColor = 'primary',\n  secondaryText,\n  title,\n}: CurrencyDialogProps) => {\n  const numericValue = parseFloat(inputValue ?? '0')\n  const isValid = inputValue !== '' && inputValue !== '0' && !isNaN(numericValue)\n\n  const { isSmallMobile } = useScreenSize()\n\n  return (\n    <Dialog\n      aria-label={title}\n      aria-labelledby=\"modal-title\"\n      maxWidth=\"xs\"\n      onClose={handleModalClose}\n      open={isOpen}\n      role=\"dialog\"\n      sx={{\n        '& .MuiDialogContent-root': { p: 0 },\n        ...(isSmallMobile && { '& .MuiDialog-paper': { minWidth: '100%' } }),\n      }}\n    >\n      <DialogContent>\n        <form\n          onSubmit={(e) => {\n            e.preventDefault()\n            handlePrimaryAction()\n          }}\n        >\n          <Stack\n            sx={{\n              alignItems: 'center',\n              flexDirection: 'row',\n              justifyContent: 'space-between',\n              pb: 12,\n              pl: 24,\n              position: 'relative',\n              pr: 16,\n              pt: 24,\n            }}\n          >\n            <H3 id=\"modal-title\">{title}</H3>\n            <IconButton\n              aria-label={closeAriaLabel}\n              onClick={handleModalClose}\n              sx={{ minHeight: 24, position: 'absolute', right: 8, top: 18 }}\n            >\n              <Icon name=\"close\" sx={{ color: 'action.active' }} />\n            </IconButton>\n          </Stack>\n          <Stack sx={{ gap: 24, px: 24 }}>\n            <P variant=\"subtitle1\">{content}</P>\n            {inputLabel && (\n              <TextField\n                autoFocus={true}\n                inputMode=\"decimal\"\n                label={inputLabel}\n                onChange={({ target: { value } }) => {\n                  if (!/^\\d*\\.?\\d*$/.test(value)) return\n\n                  handleInputChange?.(value)\n                }}\n                slotProps={{\n                  input: {\n                    startAdornment: <InputAdornment position=\"start\">$</InputAdornment>,\n                  },\n                  htmlInput: {\n                    'aria-label': inputLabel,\n                    noValidate: true,\n                    pattern: '[0-9]*\\\\.?[0-9]*',\n                  },\n                }}\n                type=\"text\"\n                value={inputValue}\n              />\n            )}\n          </Stack>\n          <DialogActions\n            sx={{\n              justifyContent: 'flex-end',\n              gap: 16,\n              p: 24,\n              '>:not(style)~:not(style)': { ml: 0 },\n            }}\n          >\n            {secondaryText && (\n              <Button\n                aria-label={secondaryText}\n                color={secondaryColor}\n                onClick={handleSecondaryAction}\n              >\n                {secondaryText}\n              </Button>\n            )}\n            <Button\n              aria-label={primaryText}\n              color={primaryColor}\n              disabled={inputLabel ? !isValid : false}\n              onClick={handlePrimaryAction}\n              variant=\"contained\"\n            >\n              {primaryText}\n            </Button>\n          </DialogActions>\n        </form>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CurrencyDialog\n"],"mappings":"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"}
+{"version":3,"file":"CurrencyDialog.es.js","names":[],"sources":["../../../src/common/components/CurrencyDialog.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { H3, P } from '@mxenabled/mxui'\n\nimport Button, { type ButtonProps } from '@mui/material/Button'\nimport Dialog from '@mui/material/Dialog'\nimport DialogActions from '@mui/material/DialogActions'\nimport DialogContent from '@mui/material/DialogContent'\nimport IconButton from '@mui/material/IconButton'\nimport InputAdornment from '@mui/material/InputAdornment'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { useScreenSize } from '../hooks'\n\ninterface CurrencyDialogProps {\n  closeAriaLabel: string\n  /** Body copy; a node so callers can emphasise part of it (e.g. a bold account name). */\n  content?: ReactNode\n  /** Validation or save error, shown under the input and marking it invalid. */\n  errorText?: string\n  inputLabel?: string\n  inputValue?: string\n  isOpen: boolean\n  /** Disables the primary button on top of the built-in input check (e.g. while saving). */\n  isPrimaryDisabled?: boolean\n  handleInputChange?: (value: string) => void\n  handleModalClose: () => void\n  handlePrimaryAction: () => void\n  handleSecondaryAction?: () => void\n  primaryColor?: ButtonProps['color']\n  primaryText: string\n  secondaryColor?: ButtonProps['color']\n  secondaryText?: string\n  /** A line under the title, e.g. the account a setting applies to. */\n  subtitle?: ReactNode\n  title: string\n}\n\n// Created for V2 of BudgetDetailsDrawer.\n// The previous design will be replaced once the new design is finalized.\n// Also needs to be updated to use the mxui library\n// with the updated Dialog components.\n\nconst CurrencyDialog = ({\n  closeAriaLabel,\n  content,\n  errorText,\n  inputLabel,\n  inputValue,\n  isOpen,\n  isPrimaryDisabled = false,\n  handleInputChange,\n  handleModalClose,\n  handlePrimaryAction,\n  handleSecondaryAction,\n  primaryColor = 'primary',\n  primaryText,\n  secondaryColor = 'primary',\n  secondaryText,\n  subtitle,\n  title,\n}: CurrencyDialogProps) => {\n  const numericValue = parseFloat(inputValue ?? '0')\n  const isValid = inputValue !== '' && inputValue !== '0' && !isNaN(numericValue)\n  // One rule for the button and for Enter: the form's submit must not bypass a disabled button.\n  const isPrimaryBlocked = isPrimaryDisabled || (inputLabel ? !isValid : false)\n\n  const { isSmallMobile } = useScreenSize()\n\n  return (\n    <Dialog\n      aria-label={title}\n      aria-labelledby=\"modal-title\"\n      maxWidth=\"xs\"\n      onClose={handleModalClose}\n      open={isOpen}\n      role=\"dialog\"\n      sx={{\n        '& .MuiDialogContent-root': { p: 0 },\n        ...(isSmallMobile && { '& .MuiDialog-paper': { minWidth: '100%' } }),\n      }}\n    >\n      <DialogContent>\n        <form\n          onSubmit={(e) => {\n            e.preventDefault()\n            if (!isPrimaryBlocked) handlePrimaryAction()\n          }}\n        >\n          <Stack\n            sx={{\n              alignItems: 'center',\n              flexDirection: 'row',\n              justifyContent: 'space-between',\n              pb: 12,\n              pl: 24,\n              position: 'relative',\n              pr: 16,\n              pt: 24,\n            }}\n          >\n            <Stack sx={{ gap: 4 }}>\n              <H3 id=\"modal-title\">{title}</H3>\n              {subtitle}\n            </Stack>\n            <IconButton\n              aria-label={closeAriaLabel}\n              onClick={handleModalClose}\n              sx={{ minHeight: 24, position: 'absolute', right: 8, top: 18 }}\n            >\n              <Icon name=\"close\" sx={{ color: 'action.active' }} />\n            </IconButton>\n          </Stack>\n          <Stack sx={{ gap: 24, px: 24 }}>\n            <P variant=\"subtitle1\">{content}</P>\n            {inputLabel && (\n              <TextField\n                autoFocus={true}\n                error={!!errorText}\n                helperText={errorText}\n                inputMode=\"decimal\"\n                label={inputLabel}\n                onChange={({ target: { value } }) => {\n                  if (!/^\\d*\\.?\\d*$/.test(value)) return\n\n                  handleInputChange?.(value)\n                }}\n                slotProps={{\n                  input: {\n                    startAdornment: <InputAdornment position=\"start\">$</InputAdornment>,\n                  },\n                  // Announce errors: focus is usually on the primary button when one appears.\n                  formHelperText: { role: 'alert' },\n                  htmlInput: {\n                    'aria-label': inputLabel,\n                    noValidate: true,\n                    pattern: '[0-9]*\\\\.?[0-9]*',\n                  },\n                }}\n                type=\"text\"\n                value={inputValue}\n              />\n            )}\n          </Stack>\n          <DialogActions\n            sx={{\n              justifyContent: 'flex-end',\n              gap: 16,\n              p: 24,\n              '>:not(style)~:not(style)': { ml: 0 },\n            }}\n          >\n            {secondaryText && (\n              <Button\n                aria-label={secondaryText}\n                color={secondaryColor}\n                onClick={handleSecondaryAction}\n              >\n                {secondaryText}\n              </Button>\n            )}\n            <Button\n              aria-label={primaryText}\n              color={primaryColor}\n              disabled={isPrimaryBlocked}\n              onClick={handlePrimaryAction}\n              variant=\"contained\"\n            >\n              {primaryText}\n            </Button>\n          </DialogActions>\n        </form>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CurrencyDialog\n"],"mappings":"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"}

package/dist/common/components/ListItemWrapper.d.ts

@@ -3,6 +3,11 @@ import { SxProps } from '@mui/material/styles';
 interface ListItemWrapperProps {
     clickEventName?: string;
     component?: ElementType;
+    /**
+     * Renders the row in MUI's disabled state (greyed, `aria-disabled`, not focusable) and drops
+     * its click handler, so the row is visible but inert.
+     */
+    disabled?: boolean;
     onClick?: () => void;
     sx?: SxProps;
 }

package/dist/common/components/ListItemWrapper.es.js

@@ -1,11 +1,11 @@
-import { useEvent as m } from "../context/hooks.es.js";
+import { useEvent as f } from "../context/hooks.es.js";
 import "react";
 import { jsx as t } from "react/jsx-runtime";
-import o from "@mui/material/ListItem";
+import p from "@mui/material/ListItem";
 import l from "@mui/material/ListItemButton";
-var n = ({ children: e, clickEventName: s, component: r, onClick: a, sx: i = {} }) => {
-  const { onEvent: p } = m();
-  return a ? /* @__PURE__ */ t(o, {
+var v = ({ children: e, clickEventName: s, component: r, disabled: a = !1, onClick: o, sx: i = {} }) => {
+  const { onEvent: m } = f();
+  return o ? /* @__PURE__ */ t(p, {
     className: "list-wrapper",
     ...r && { component: r },
     sx: {
@@ -13,12 +13,13 @@ var n = ({ children: e, clickEventName: s, component: r, onClick: a, sx: i = {}
       ...i
     },
     children: /* @__PURE__ */ t(l, {
-      onClick: () => {
-        s && p(s), a();
+      disabled: a,
+      onClick: a ? void 0 : () => {
+        s && m(s), o();
       },
       children: e
     })
-  }) : /* @__PURE__ */ t(o, {
+  }) : /* @__PURE__ */ t(p, {
     className: "list-wrapper",
     ...r && { component: r },
     disableGutters: !1,
@@ -31,7 +32,7 @@ var n = ({ children: e, clickEventName: s, component: r, onClick: a, sx: i = {}
   });
 };
 export {
-  n as ListItemWrapper
+  v as ListItemWrapper
 };
 
 //# sourceMappingURL=ListItemWrapper.es.js.map

package/dist/common/components/ListItemWrapper.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemWrapper.es.js","names":[],"sources":["../../../src/common/components/ListItemWrapper.tsx"],"sourcesContent":["import React, { ElementType } from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport { SxProps } from '@mui/material/styles'\n\nimport { useEvent } from '../context'\n\ninterface ListItemWrapperProps {\n  clickEventName?: string\n  component?: ElementType\n  onClick?: () => void\n  sx?: SxProps\n}\n\nexport const ListItemWrapper: React.FC<React.PropsWithChildren<ListItemWrapperProps>> = ({\n  children,\n  clickEventName,\n  component,\n  onClick,\n  sx = {},\n}) => {\n  const { onEvent } = useEvent()\n\n  if (onClick) {\n    return (\n      <ListItem\n        className=\"list-wrapper\"\n        {...(component && { component })}\n        sx={{ bgcolor: 'background.paper', ...sx }}\n      >\n        <ListItemButton\n          onClick={() => {\n            if (clickEventName) {\n              onEvent(clickEventName)\n            }\n            onClick()\n          }}\n        >\n          {children}\n        </ListItemButton>\n      </ListItem>\n    )\n  } else {\n    return (\n      <ListItem\n        className=\"list-wrapper\"\n        {...(component && { component })}\n        disableGutters={false}\n        disablePadding={false}\n        sx={{ bgcolor: 'background.paper', ...sx }}\n      >\n        {children}\n      </ListItem>\n    )\n  }\n}\n"],"mappings":";;;;;AAeA,IAAa,IAAA,CAA4E,EACvF,UAAA,GACA,gBAAA,GACA,WAAA,GACA,SAAA,GACA,IAAA,IAAK,CAAC,EAAA,MACF;AACJ,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS;AAE7B,SAAI,IAEA,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,GAAK,KAAa,EAAE,WAAA,EAAU;AAAA,IAC9B,IAAI;AAAA,MAAE,SAAS;AAAA,MAAoB,GAAG;AAAA,IAAG;AAAA,IAEzC,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,SAAA,MAAe;AACb,QAAI,KACF,EAAQ,CAAc,GAExB,EAAQ;AAAA,MACV;AAAA,MAEC,UAAA;AAAA,IACa,CAAA;AAAA,EACR,CAAA,IAIV,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,GAAK,KAAa,EAAE,WAAA,EAAU;AAAA,IAC9B,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,IAAI;AAAA,MAAE,SAAS;AAAA,MAAoB,GAAG;AAAA,IAAG;AAAA,IAExC,UAAA;AAAA,EACO,CAAA;AAGhB"}
+{"version":3,"file":"ListItemWrapper.es.js","names":[],"sources":["../../../src/common/components/ListItemWrapper.tsx"],"sourcesContent":["import React, { ElementType } from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport { SxProps } from '@mui/material/styles'\n\nimport { useEvent } from '../context'\n\ninterface ListItemWrapperProps {\n  clickEventName?: string\n  component?: ElementType\n  /**\n   * Renders the row in MUI's disabled state (greyed, `aria-disabled`, not focusable) and drops\n   * its click handler, so the row is visible but inert.\n   */\n  disabled?: boolean\n  onClick?: () => void\n  sx?: SxProps\n}\n\nexport const ListItemWrapper: React.FC<React.PropsWithChildren<ListItemWrapperProps>> = ({\n  children,\n  clickEventName,\n  component,\n  disabled = false,\n  onClick,\n  sx = {},\n}) => {\n  const { onEvent } = useEvent()\n\n  if (onClick) {\n    return (\n      <ListItem\n        className=\"list-wrapper\"\n        {...(component && { component })}\n        sx={{ bgcolor: 'background.paper', ...sx }}\n      >\n        <ListItemButton\n          disabled={disabled}\n          onClick={\n            disabled\n              ? undefined\n              : () => {\n                  if (clickEventName) {\n                    onEvent(clickEventName)\n                  }\n                  onClick()\n                }\n          }\n        >\n          {children}\n        </ListItemButton>\n      </ListItem>\n    )\n  } else {\n    return (\n      <ListItem\n        className=\"list-wrapper\"\n        {...(component && { component })}\n        disableGutters={false}\n        disablePadding={false}\n        sx={{ bgcolor: 'background.paper', ...sx }}\n      >\n        {children}\n      </ListItem>\n    )\n  }\n}\n"],"mappings":";;;;;AAoBA,IAAa,IAAA,CAA4E,EACvF,UAAA,GACA,gBAAA,GACA,WAAA,GACA,UAAA,IAAW,IACX,SAAA,GACA,IAAA,IAAK,CAAC,EAAA,MACF;AACJ,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS;AAE7B,SAAI,IAEA,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,GAAK,KAAa,EAAE,WAAA,EAAU;AAAA,IAC9B,IAAI;AAAA,MAAE,SAAS;AAAA,MAAoB,GAAG;AAAA,IAAG;AAAA,IAEzC,UAAA,gBAAA,EAAC,GAAD;AAAA,MACY,UAAA;AAAA,MACV,SACE,IACI,SAAA,MACM;AACJ,QAAI,KACF,EAAQ,CAAc,GAExB,EAAQ;AAAA,MACV;AAAA,MAGL,UAAA;AAAA,IACa,CAAA;AAAA,EACR,CAAA,IAIV,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,GAAK,KAAa,EAAE,WAAA,EAAU;AAAA,IAC9B,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,IAAI;AAAA,MAAE,SAAS;AAAA,MAAoB,GAAG;AAAA,IAAG;AAAA,IAExC,UAAA;AAAA,EACO,CAAA;AAGhB"}

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

@@ -145,6 +145,25 @@ export interface RemainingCashCopy {
     other_expenses: string;
     other_expenses_one: string;
 }
+/** Copy for one variant of `amount_input_modal_block` (strings with `_1{account_name}` take the account). */
+export interface AmountInputModalVariantCopy {
+    /** Body copy; `_1{account_name}` renders bold. */
+    description: string;
+    /** Body copy once a value is already saved; falls back to `description`. */
+    description_edit?: string;
+    input_label: string;
+    title: string;
+    /** Title once a value is already saved; falls back to `title`. */
+    title_edit?: string;
+}
+export interface AmountInputModalCopy {
+    low_balance_threshold: AmountInputModalVariantCopy;
+    safety_net: AmountInputModalVariantCopy;
+    /** Validation message for anything but a positive whole-dollar amount. */
+    whole_number_error: string;
+    /** Shown in the dialog when the save request fails; the value stays so Save can be retried. */
+    save_error: string;
+}
 export interface InsightsFeedCopy {
     general: GeneralInsightsFeedCopy;
     settings_menu: SettingsMenuCopy;
@@ -158,5 +177,7 @@ export interface InsightsFeedCopy {
     feedback: FeedbackCopy;
     feedback_bar: FeedbackBarCopy;
     dismiss: DismissInsightCopy;
+    /** Optional until the localized-content service ships the namespace. */
+    amount_input_modal?: AmountInputModalCopy;
 }
 export {};

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

@@ -13,7 +13,7 @@ export type { DebtsCopy } from './DebtsCopy';
 export type { FinstrongCopy } from './FinstrongCopy';
 export type { GoalsCopy } from './GoalsCopy';
 export type { HelpCopy, HelpByCategoryList } from './HelpCopy';
-export type { InsightsFeedCopy, MakeTransferCopy, RemainingCashCopy, OverflowMenuCopy, DismissInsightCopy, DismissInsightOptionCopy, HiddenConfirmationCopy, HideFeedbackCopy, FeedbackCopy, FeedbackBarCopy, } from './InsightsFeedCopy';
+export type { AmountInputModalCopy, AmountInputModalVariantCopy, InsightsFeedCopy, MakeTransferCopy, RemainingCashCopy, OverflowMenuCopy, DismissInsightCopy, DismissInsightOptionCopy, HiddenConfirmationCopy, HideFeedbackCopy, FeedbackCopy, FeedbackBarCopy, } from './InsightsFeedCopy';
 export type { InvestmentsCopy } from './InvestmentsCopy';
 export type { MicroInsightsCopy } from './MicroInsightsCopy';
 export type { NetWorthCopy } from './NetWorthCopy';

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { ActionBlockProps } from '../../mappings/blocks';
+/**
+ * `amount_input_modal_block`: one whole-dollar setting edited in a dialog (Figma 441:24913 and
+ * 5402:34137). The CTA's variant picks what is edited:
+ * - `low_balance_threshold`: the `threshold` on the beat account's low-balance alert profile;
+ * - `safety_net`: `savings_opportunity_minimum_checking_account_balance` on the insight profile.
+ *
+ * Registered with `presentation: 'modal'`, so no drawer opens behind it; closing the dialog ends
+ * the action-drawer session. `observer` is required: the starting values are read from stores.
+ */
+export declare const AmountInputModalBlock: (({ beat, }: ActionBlockProps) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

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

@@ -0,0 +1,128 @@
+import { buildDynamicCopy as F } from "../../../core/utils/Localization.es.js";
+import G from "../../../common/utils/AccountDisplayName.es.js";
+import { useGlobalCopyStore as W, useInsightsV2Store as j, useSettingsStore as z, useUserStore as q } from "../../../common/context/hooks.es.js";
+import J from "../../../common/components/Loader.es.js";
+import K from "../../../common/components/CurrencyDialog.es.js";
+import { useBeatActions as Q } from "../../beatActions.es.js";
+import { getDynamicCtaBasedOnTriggers as X } from "../util.es.js";
+import { useCtaHandler as Y } from "../../ctaActions/useCtaAction.es.js";
+import { AMOUNT_INPUT_VARIANTS as Z, findLowBalanceProfile as oo, isAmountInputVariant as L, isWholeAmount as to, toInputValue as eo } from "./layout.es.js";
+import r from "react";
+import { observer as io } from "mobx-react-lite";
+import T from "@mui/material/Stack";
+import { H3 as no, InstitutionLogo as ro, Text as P } from "@mxenabled/mxui";
+import { Icon as ao } from "@mxenabled/mx-icons";
+import { jsx as e, jsxs as k } from "react/jsx-runtime";
+import so from "@mui/material/Dialog";
+import co from "@mui/material/IconButton";
+var D = ({ children: y, closeAriaLabel: i, heading: o, onClose: l }) => {
+  const u = r.useId();
+  return /* @__PURE__ */ e(so, {
+    "aria-labelledby": o ? u : void 0,
+    maxWidth: "xs",
+    onClose: l,
+    open: !0,
+    children: /* @__PURE__ */ k(T, {
+      sx: {
+        gap: 12,
+        p: 24,
+        position: "relative"
+      },
+      children: [
+        o && /* @__PURE__ */ e(no, {
+          id: u,
+          children: o
+        }),
+        /* @__PURE__ */ e(co, {
+          "aria-label": i || "Close",
+          onClick: l,
+          sx: {
+            position: "absolute",
+            right: 8,
+            top: 18
+          },
+          children: /* @__PURE__ */ e(ao, {
+            name: "close",
+            sx: { color: "action.active" }
+          })
+        }),
+        y
+      ]
+    })
+  });
+}, Lo = io(function({ beat: i }) {
+  const { common: o, insights_feed: l } = W(), { actionDrawer: u, closeActionDrawer: c } = j(), f = z(), { userInsightProfile: v } = q(), b = Y(i, Q()), { primary_cta: B, secondary_cta: N } = i.insights_payload ?? {}, s = X(u, B, N)?.variant, a = l?.amount_input_modal, t = s === Z.LOW_BALANCE_THRESHOLD, _ = t ? oo(f.notificationProfiles, i.primary_account_guid) : void 0, I = t ? _?.threshold : v?.savings_opportunity_minimum_checking_account_balance, [M, V] = r.useState(t), m = r.useRef(!0);
+  r.useEffect(() => (m.current = !0, () => {
+    m.current = !1;
+  }), []), r.useEffect(() => {
+    t && f.loadNotificationProfiles().finally(() => {
+      m.current && V(!1);
+    });
+  }, [t, f]);
+  const [E, H] = r.useState(null), [S, A] = r.useState(!1), [O, h] = r.useState(!1), d = E ?? eo(I);
+  if (M) return /* @__PURE__ */ e(D, {
+    closeAriaLabel: o?.close_aria,
+    onClose: c,
+    children: /* @__PURE__ */ e(J, {})
+  });
+  const n = L(s) ? a?.[s] : void 0, x = !!n?.title && !!n.description && !!n.input_label && !!a?.whole_number_error && !!a.save_error && !!o?.save_button && (!t || !!o.cancel_button) && !!o.close_aria;
+  if (!a || !n || !x || !(t ? _ : v))
+    return console.warn(`amount_input_modal_block: ${a ? L(s) ? x ? t ? "no low-balance profile for the account" : "user insight profile not set by the host" : `copy incomplete for "${s}"` : `unknown variant "${s}"` : "copy namespace missing"}`), /* @__PURE__ */ e(D, {
+      closeAriaLabel: o?.close_aria,
+      heading: o?.error_heading,
+      onClose: c,
+      children: /* @__PURE__ */ e(P, { children: o?.error_message })
+    });
+  const C = !t && !!I, w = i.primary_account ? G(i.primary_account) : "", g = to(d), R = d !== "" && !g, U = async () => {
+    if (!g || S) return;
+    const p = Number(d);
+    A(!0), h(!1);
+    const $ = t ? await b("updateNotificationProfileThreshold", {
+      profileGuid: _?.guid,
+      threshold: p
+    }) : await b("updateUserInsightProfile", { fields: { savings_opportunity_minimum_checking_account_balance: p } });
+    m.current && (A(!1), $ ? c() : h(!0));
+  };
+  return /* @__PURE__ */ e(K, {
+    closeAriaLabel: o.close_aria,
+    content: F(C && n.description_edit || n.description, /* @__PURE__ */ e("strong", { children: w }, "account")),
+    errorText: R ? a.whole_number_error : O ? a.save_error : void 0,
+    handleInputChange: (p) => {
+      H(p), h(!1);
+    },
+    handleModalClose: c,
+    handlePrimaryAction: () => {
+      U();
+    },
+    handleSecondaryAction: c,
+    inputLabel: n.input_label,
+    inputValue: d,
+    isOpen: !0,
+    isPrimaryDisabled: S || !g,
+    primaryText: o.save_button,
+    secondaryText: t ? o.cancel_button : void 0,
+    subtitle: t && i.primary_account ? /* @__PURE__ */ k(T, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 8
+      },
+      children: [/* @__PURE__ */ e(ro, {
+        alt: "",
+        institutionGuid: i.primary_account.institution_guid ?? "",
+        size: 16
+      }), /* @__PURE__ */ e(P, {
+        color: "text.secondary",
+        uppercase: !0,
+        variant: "body2",
+        children: w
+      })]
+    }) : void 0,
+    title: C && n.title_edit || n.title
+  });
+});
+export {
+  Lo as AmountInputModalBlock
+};
+
+//# sourceMappingURL=AmountInputModalBlock.es.js.map