@mx-cartographer/experiences 6.26.18-alpha.mega2 → 6.26.18-alpha.mega3

package/dist/debts/components/SnowballCard/index.es.js

@@ -0,0 +1,65 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import f from "react";
+import { observer as S } from "mobx-react-lite";
+import { useTheme as u, Card as y, Stack as i } from "@mui/material";
+import { Text as o } from "@mxenabled/mxui";
+import { getPayoffProjection as w } from "../../utils/SnowballCard/index.es.js";
+import { useDebtsUiStore as _ } from "../../hooks/useDebtsUiStore/index.es.js";
+import { useGlobalCopyStore as v, useGoalStore as g } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as C } from "../../../common/hooks/useScreenSize/index.es.js";
+const P = ({ debts: n, onClickCta: c, sx: m }) => {
+  const t = u(), { isMobile: a } = C(), { debts: e } = v(), { selectedDebtPriority: p } = _(), { monthlyCashFlowProfile: s } = g(), { payoffDate: d, payoffSavings: h, payoffDuration: x } = f.useMemo(() => {
+    const b = s?.extra_payment ?? 0;
+    return w(n, p, b);
+  }, [n, p, s]);
+  return /* @__PURE__ */ r(
+    y,
+    {
+      sx: {
+        boxShadow: t.shadows[2],
+        width: a ? "100%" : "186px",
+        minWidth: "186px",
+        ...m
+      },
+      children: /* @__PURE__ */ l(i, { sx: { gap: "12px", p: "16px" }, children: [
+        /* @__PURE__ */ l(
+          i,
+          {
+            gap: a ? "4px" : "0",
+            sx: {
+              borderBottom: "1px solid",
+              borderBottomColor: t.palette.grey[300],
+              pb: "8px"
+            },
+            children: [
+              /* @__PURE__ */ r(o, { variant: "XSmall", children: e.snowball_card_date_description }),
+              /* @__PURE__ */ r(o, { bold: !0, color: t.palette.primary.main, variant: "Small", children: d })
+            ]
+          }
+        ),
+        /* @__PURE__ */ l(i, { gap: a ? "4px" : "0", children: [
+          /* @__PURE__ */ r(o, { bold: !0, variant: "Small", children: h }),
+          /* @__PURE__ */ r(o, { sx: { whiteSpace: "normal" }, variant: "XSmall", children: e.snowball_card_amount_description })
+        ] }),
+        /* @__PURE__ */ l(i, { gap: a ? "4px" : "0", children: [
+          /* @__PURE__ */ r(o, { bold: !0, variant: "Small", children: x }),
+          /* @__PURE__ */ r(o, { variant: "XSmall", children: e.snowball_card_duration_description })
+        ] }),
+        /* @__PURE__ */ r(
+          o,
+          {
+            bold: !0,
+            color: t.palette.primary.main,
+            onClick: c,
+            sx: { cursor: "pointer" },
+            variant: "Small",
+            children: e.snowball_card_cta
+          }
+        )
+      ] })
+    }
+  );
+}, F = S(P);
+export {
+  F as default
+};

package/dist/debts/components/SnowballDrawer/index.es.js

@@ -0,0 +1,374 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import p from "react";
+import { observer as w } from "mobx-react-lite";
+import { useTheme as _, Stack as t, Card as m, Box as i } from "@mui/material";
+import { Text as r } from "@mxenabled/mxui";
+import { useGlobalCopyStore as x } from "../../../common/context/hooks/index.es.js";
+import g from "../../../common/components/drawer/Drawer/index.es.js";
+import { buildDynamicCopy as o } from "../../../common/utils/Localization/index.es.js";
+const y = ({ isOpen: c, onClose: s, sx: b }) => {
+  const n = _(), { debts: l } = x(), [d, h] = p.useState(!1);
+  return /* @__PURE__ */ e(
+    g,
+    {
+      ariaLabelClose: "",
+      isOpen: c,
+      onClose: s,
+      sx: { ...b },
+      title: l.snowball_drawer_title,
+      children: /* @__PURE__ */ a(t, { bgcolor: n.palette.background.default, height: "100%", children: [
+        /* @__PURE__ */ a(t, { alignItems: "center", px: 24, py: 24, children: [
+          /* @__PURE__ */ a(t, { alignItems: "center", pb: 24, children: [
+            /* @__PURE__ */ e(r, { mb: 12, variant: "H3", children: l.snowball_drawer_subtitle }),
+            /* @__PURE__ */ e(r, { color: n.palette.secondary.main, variant: "Small", children: l.snowball_drawer_amount_description }),
+            /* @__PURE__ */ e(r, { variant: "H1", children: l.snowball_drawer_savings }),
+            /* @__PURE__ */ e(r, { color: n.palette.secondary.main, variant: "Small", children: l.snowball_drawer_duration_description })
+          ] }),
+          /* @__PURE__ */ a(m, { sx: { display: "grid", py: 16, px: 24 }, children: [
+            /* @__PURE__ */ e(r, { mb: 4, variant: "H3", children: l.snowball_drawer_question }),
+            /* @__PURE__ */ e(
+              r,
+              {
+                color: n.palette.secondary.main,
+                mb: 8,
+                sx: { whiteSpace: d ? "normal" : "nowrap" },
+                variant: "ParagraphSmall",
+                children: l.snowball_drawer_answer
+              }
+            ),
+            /* @__PURE__ */ e(
+              r,
+              {
+                bold: !0,
+                color: n.palette.primary.main,
+                onClick: () => h(!d),
+                sx: { cursor: "pointer" },
+                variant: "Small",
+                children: d ? l.snowball_drawer_less : l.snowball_drawer_more
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ a(t, { children: [
+          /* @__PURE__ */ e(
+            r,
+            {
+              color: n.palette.secondary.main,
+              px: 24,
+              sx: { textAlign: "center", whiteSpace: "normal" },
+              variant: "Small",
+              children: l.snowball_drawer_disclaimer
+            }
+          ),
+          /* @__PURE__ */ a(t, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+            /* @__PURE__ */ e(r, { bold: !0, variant: "XSmall", children: o(l.snowball_drawer_month_header, 1) }),
+            /* @__PURE__ */ e(r, { bold: !0, variant: "XSmall", children: l.snowball_drawer_payment_header })
+          ] }),
+          /* @__PURE__ */ a(t, { bgcolor: n.palette.background.paper, mb: 24, children: [
+            /* @__PURE__ */ a(t, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+              /* @__PURE__ */ e(
+                i,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 20,
+                    height: 20,
+                    borderRadius: "50%",
+                    backgroundColor: n.palette.success.main,
+                    marginRight: 12
+                  },
+                  children: /* @__PURE__ */ e(r, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
+                }
+              ),
+              /* @__PURE__ */ a(
+                t,
+                {
+                  sx: {
+                    borderBottom: `1px solid ${n.palette.border.light}`,
+                    flexDirection: "row",
+                    flexGrow: 1,
+                    py: 14,
+                    pr: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ a(t, { flexGrow: 1, children: [
+                      /* @__PURE__ */ e(r, { variant: "Body", children: o(l.snowball_drawer_debt_label, "A") }),
+                      /* @__PURE__ */ a(r, { color: n.palette.secondary.main, variant: "XSmall", children: [
+                        o(
+                          l.snowball_drawer_rollover_explainer_pt1,
+                          "$100"
+                        ),
+                        /* @__PURE__ */ e("strong", { children: o(l.snowball_drawer_debt_label, "B") }),
+                        l.snowball_drawer_rollover_explainer_pt2
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ a(t, { children: [
+                      /* @__PURE__ */ e(r, { variant: "Body", children: "$100.00" }),
+                      /* @__PURE__ */ e(
+                        r,
+                        {
+                          bold: !0,
+                          color: n.palette.success.main,
+                          textAlign: "end",
+                          variant: "Tiny",
+                          children: l.snowball_drawer_paid_label
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a(t, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+              /* @__PURE__ */ e(
+                i,
+                {
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    marginRight: 12,
+                    borderRadius: "50%",
+                    border: `3px solid ${n.palette.border.darker}`
+                  }
+                }
+              ),
+              /* @__PURE__ */ a(
+                t,
+                {
+                  sx: {
+                    borderBottom: `1px solid ${n.palette.border.light}`,
+                    flexDirection: "row",
+                    flexGrow: 1,
+                    py: 14,
+                    pr: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ e(r, { flexGrow: 1, variant: "Body", children: o(l.snowball_drawer_debt_label, "B") }),
+                    /* @__PURE__ */ e(r, { variant: "Body", children: "$400.00" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a(t, { alignItems: "center", flexDirection: "row", pl: 24, py: 14, children: [
+              /* @__PURE__ */ e(
+                i,
+                {
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    marginRight: 12,
+                    borderRadius: "50%",
+                    border: `3px solid ${n.palette.border.darker}`
+                  }
+                }
+              ),
+              /* @__PURE__ */ a(t, { flexDirection: "row", flexGrow: 1, pr: 24, children: [
+                /* @__PURE__ */ e(r, { flexGrow: 1, variant: "Body", children: o(l.snowball_drawer_debt_label, "C") }),
+                /* @__PURE__ */ e(r, { variant: "Body", children: "$1,000.00" })
+              ] })
+            ] }),
+            /* @__PURE__ */ a(
+              t,
+              {
+                sx: {
+                  py: 8,
+                  px: 24,
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  borderTop: `1px solid ${n.palette.border.light}`,
+                  borderBottom: `1px solid ${n.palette.border.light}`
+                },
+                children: [
+                  /* @__PURE__ */ e(r, { bold: !0, variant: "Body", children: l.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(r, { bold: !0, variant: "Body", children: "$1,500.00" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a(t, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+            /* @__PURE__ */ e(r, { bold: !0, variant: "XSmall", children: o(l.snowball_drawer_month_header, 2) }),
+            /* @__PURE__ */ e(r, { bold: !0, variant: "XSmall", children: l.snowball_drawer_payment_header })
+          ] }),
+          /* @__PURE__ */ a(t, { bgcolor: n.palette.background.paper, mb: 24, children: [
+            /* @__PURE__ */ a(t, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+              /* @__PURE__ */ e(
+                i,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 20,
+                    height: 20,
+                    borderRadius: "50%",
+                    backgroundColor: n.palette.success.main,
+                    marginRight: 12
+                  },
+                  children: /* @__PURE__ */ e(r, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
+                }
+              ),
+              /* @__PURE__ */ a(
+                t,
+                {
+                  sx: {
+                    borderBottom: `1px solid ${n.palette.border.light}`,
+                    flexDirection: "row",
+                    flexGrow: 1,
+                    py: 14,
+                    pr: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ a(t, { flexGrow: 1, children: [
+                      /* @__PURE__ */ e(r, { variant: "Body", children: o(l.snowball_drawer_debt_label, "B") }),
+                      /* @__PURE__ */ a(r, { color: n.palette.secondary.main, variant: "XSmall", children: [
+                        o(
+                          l.snowball_drawer_rollover_explainer_pt1,
+                          "$500"
+                        ),
+                        /* @__PURE__ */ e("strong", { children: o(l.snowball_drawer_debt_label, "C") }),
+                        l.snowball_drawer_rollover_explainer_pt2
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ a(t, { children: [
+                      /* @__PURE__ */ e(r, { variant: "Body", children: "$500.00" }),
+                      /* @__PURE__ */ e(
+                        r,
+                        {
+                          bold: !0,
+                          color: n.palette.success.main,
+                          textAlign: "end",
+                          variant: "Tiny",
+                          children: l.snowball_drawer_paid_label
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a(t, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+              /* @__PURE__ */ e(
+                i,
+                {
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    marginRight: 12,
+                    borderRadius: "50%",
+                    border: `3px solid ${n.palette.border.darker}`
+                  }
+                }
+              ),
+              /* @__PURE__ */ a(
+                t,
+                {
+                  sx: {
+                    flexDirection: "row",
+                    flexGrow: 1,
+                    py: 14,
+                    pr: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ e(r, { flexGrow: 1, variant: "Body", children: o(l.snowball_drawer_debt_label, "C") }),
+                    /* @__PURE__ */ e(r, { variant: "Body", children: "$1,000.00" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a(
+              t,
+              {
+                sx: {
+                  py: 8,
+                  px: 24,
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  borderTop: `1px solid ${n.palette.border.light}`,
+                  borderBottom: `1px solid ${n.palette.border.light}`
+                },
+                children: [
+                  /* @__PURE__ */ e(r, { bold: !0, variant: "Body", children: l.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(r, { bold: !0, variant: "Body", children: "$1,500.00" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a(t, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+            /* @__PURE__ */ e(r, { bold: !0, variant: "XSmall", children: o(l.snowball_drawer_month_header, 3) }),
+            /* @__PURE__ */ e(r, { bold: !0, variant: "XSmall", children: l.snowball_drawer_payment_header })
+          ] }),
+          /* @__PURE__ */ a(t, { bgcolor: n.palette.background.paper, mb: 24, children: [
+            /* @__PURE__ */ a(t, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+              /* @__PURE__ */ e(
+                i,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 20,
+                    height: 20,
+                    borderRadius: "50%",
+                    backgroundColor: n.palette.success.main,
+                    marginRight: 12
+                  },
+                  children: /* @__PURE__ */ e(r, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
+                }
+              ),
+              /* @__PURE__ */ a(
+                t,
+                {
+                  sx: {
+                    alignItems: "center",
+                    flexDirection: "row",
+                    flexGrow: 1,
+                    py: 14,
+                    pr: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ e(t, { flexGrow: 1, children: /* @__PURE__ */ e(r, { variant: "Body", children: o(l.snowball_drawer_debt_label, "C") }) }),
+                    /* @__PURE__ */ a(t, { children: [
+                      /* @__PURE__ */ e(r, { variant: "Body", children: "$1,500.00" }),
+                      /* @__PURE__ */ e(
+                        r,
+                        {
+                          bold: !0,
+                          color: n.palette.success.main,
+                          textAlign: "end",
+                          variant: "Tiny",
+                          children: l.snowball_drawer_paid_label
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a(
+              t,
+              {
+                sx: {
+                  py: 8,
+                  px: 24,
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  borderTop: `1px solid ${n.palette.border.light}`,
+                  borderBottom: `1px solid ${n.palette.border.light}`
+                },
+                children: [
+                  /* @__PURE__ */ e(r, { bold: !0, variant: "Body", children: l.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(r, { bold: !0, variant: "Body", children: "$1,500.00" })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}, R = w(y);
+export {
+  R as default
+};

package/dist/debts/components/actions/DebtsPriorityAction/index.es.js

@@ -0,0 +1,28 @@
+import { jsxs as E, jsx as n } from "react/jsx-runtime";
+import p from "react";
+import { observer as b } from "mobx-react-lite";
+import { Stack as u } from "@mui/material";
+import { DebtsPriorityButton as y } from "../../debtspriority/DebtsPriorityButton/index.es.js";
+import { DebtsPriorityPopover as S } from "../../debtspriority/DebtsPrioriyPopover/index.es.js";
+import { useDebtsUiStore as T } from "../../../hooks/useDebtsUiStore/index.es.js";
+import { DebtPrioriy as o } from "../../../constants/index/index.es.js";
+import { useEvent as f, useGlobalCopyStore as C } from "../../../../common/context/hooks/index.es.js";
+import { ANALYTICS_EVENTS as I } from "../../../../common/constants/Analytics/index.es.js";
+const H = b(() => {
+  const { onEvent: c } = f(), { debts: t } = C(), { selectedDebtPriority: r } = T(), [e, i] = p.useState(null), l = (s) => {
+    i(s.currentTarget), c(I.DEBTS_CLICK_PRIORITIZE);
+  }, m = () => {
+    i(null);
+  }, _ = !!e, a = p.useMemo(() => ({
+    [o.HIGHEST_INTEREST]: t.priority_sort_highest_interest,
+    [o.HIGHEST_BALANCE]: t.priority_sort_highest_balance,
+    [o.LOWEST_BALANCE]: t.priority_sort_lowest_balance
+  })[r] ?? t.priority_sort_lowest_balance, [r]);
+  return /* @__PURE__ */ E(u, { children: [
+    /* @__PURE__ */ n(y, { buttonText: a, isOpen: _, onClick: l }),
+    /* @__PURE__ */ n(S, { buttonEl: e, onClose: m })
+  ] });
+});
+export {
+  H as DebtsPriorityAction
+};

package/dist/debts/components/actions/ExtraPaymentAction/index.es.js

@@ -0,0 +1,46 @@
+import { jsx as m } from "react/jsx-runtime";
+import u from "react";
+import { observer as c } from "mobx-react-lite";
+import { useGlobalCopyStore as l, useGoalStore as _, useEvent as d } from "../../../../common/context/hooks/index.es.js";
+import { ListItemAction as x } from "../../../../common/components/ListItemAction/index.es.js";
+import { formatCurrency as f } from "../../../../common/utils/NumberFormatting/index.es.js";
+import S from "../../../../common/components/CurrencyInput/index.es.js";
+import { ANALYTICS_EVENTS as h } from "../../../../common/constants/Analytics/index.es.js";
+const I = c(() => {
+  const { debts: r } = l(), { monthlyCashFlowProfile: t, updateMonthlyCashFlowProfile: s } = _(), { onEvent: i } = d(), [e, o] = u.useState(t?.extra_payment ?? 0), a = e < 0 || e > 9999999999e-2, p = async () => {
+    t && (await s({ ...t, extra_payment: e }), t.extra_payment = e, i(h.DEBTS_SAVE_PAYDOWN_ACTION, {
+      user_guid: t?.user_guid
+    }));
+  }, y = () => {
+    setTimeout(() => {
+      o(t?.extra_payment ?? 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ m(
+    x,
+    {
+      isSaveDisabled: a,
+      label: r.paydown_drawer_extra_payment,
+      onCancel: y,
+      onSave: p,
+      primaryText: r.paydown_drawer_extra_payment,
+      secondaryText: f(t?.extra_payment, "0,0"),
+      zeroStateText: t?.extra_payment ? void 0 : r.add_extra_payment,
+      children: /* @__PURE__ */ m(
+        S,
+        {
+          amount: e,
+          autoFocus: !0,
+          error: a,
+          fullWidth: !0,
+          minAmount: 0,
+          setAmount: (n) => o(isNaN(Number(n)) ? e : Number(n)),
+          sx: { ".MuiTypography-Body": { p: 0 } }
+        }
+      )
+    }
+  );
+});
+export {
+  I as ExtraPaymentAction
+};

package/dist/debts/components/actions/InterestRateAction/index.es.js

@@ -0,0 +1,42 @@
+import { jsx as s } from "react/jsx-runtime";
+import u from "react";
+import { observer as _ } from "mobx-react-lite";
+import p from "@mui/material/TextField";
+import { useGlobalCopyStore as d, useAccountStore as v, useEvent as S } from "../../../../common/context/hooks/index.es.js";
+import { ListItemAction as f } from "../../../../common/components/ListItemAction/index.es.js";
+import { formatPercentage as T } from "../../../../common/utils/NumberFormatting/index.es.js";
+import { ANALYTICS_EVENTS as A } from "../../../../common/constants/Analytics/index.es.js";
+const R = _(({ debt: t }) => {
+  const { debts: r } = d(), { updateAccount: i } = v(), { onEvent: c } = S(), [e, a] = u.useState(t.interest_rate ?? 0), o = e < 0, m = async () => {
+    await i({ ...t.account, interest_rate: e }), t.interest_rate = e, c(A.DEBTS_SAVE_RATE_ACTION, { account_guid: t.guid });
+  }, l = () => {
+    setTimeout(() => {
+      a(t.interest_rate ?? 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ s(
+    f,
+    {
+      isSaveDisabled: o,
+      label: `${r.details_interest_rate} (%)`,
+      onCancel: l,
+      onSave: m,
+      primaryText: r.details_interest_rate,
+      secondaryText: T(Number(t.interest_rate) / 100),
+      zeroStateText: t.interest_rate ? void 0 : r.add_interest_rate,
+      children: /* @__PURE__ */ s(
+        p,
+        {
+          error: o,
+          fullWidth: !0,
+          onChange: (n) => a(isNaN(parseFloat(n.target.value)) ? 0 : parseFloat(n.target.value)),
+          type: "number",
+          value: e
+        }
+      )
+    }
+  );
+});
+export {
+  R as InterestRateAction
+};

package/dist/debts/components/actions/MonthlyPaymentAction/index.es.js

@@ -0,0 +1,44 @@
+import { jsx as r } from "react/jsx-runtime";
+import u from "react";
+import { observer as p } from "mobx-react-lite";
+import { useGlobalCopyStore as l, useAccountStore as _, useEvent as h } from "../../../../common/context/hooks/index.es.js";
+import { ListItemAction as d } from "../../../../common/components/ListItemAction/index.es.js";
+import { formatCurrency as A } from "../../../../common/utils/NumberFormatting/index.es.js";
+import S from "../../../../common/components/CurrencyInput/index.es.js";
+import { ANALYTICS_EVENTS as f } from "../../../../common/constants/Analytics/index.es.js";
+const M = p(({ debt: t }) => {
+  const { debts: n } = l(), { updateAccount: y } = _(), { onEvent: i } = h(), [o, e] = u.useState(t.monthly_payment ?? 0), m = o < 0 || o > 9999999999e-2, s = async () => {
+    await y({ ...t.account, minimum_payment: o }), t.monthly_payment = o, i(f.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: t.guid });
+  }, c = () => {
+    setTimeout(() => {
+      e(t.monthly_payment ?? 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ r(
+    d,
+    {
+      isSaveDisabled: m,
+      label: n.details_monthly_payment,
+      onCancel: c,
+      onSave: s,
+      primaryText: n.details_monthly_payment,
+      secondaryText: A(t.monthly_payment, "0,0"),
+      zeroStateText: t.monthly_payment ? void 0 : n.add_monthly_payment,
+      children: /* @__PURE__ */ r(
+        S,
+        {
+          amount: o,
+          autoFocus: !0,
+          error: m,
+          fullWidth: !0,
+          minAmount: 0,
+          setAmount: (a) => e(isNaN(Number(a)) ? o : Number(a)),
+          sx: { ".MuiTypography-Body": { p: 0 } }
+        }
+      )
+    }
+  );
+});
+export {
+  M as MonthlyPaymentAction
+};

package/dist/debts/components/actions/OriginalBalanceAction/index.es.js

@@ -0,0 +1,44 @@
+import { jsx as i } from "react/jsx-runtime";
+import m from "react";
+import { observer as p } from "mobx-react-lite";
+import { useGlobalCopyStore as _, useAccountStore as g, useEvent as A } from "../../../../common/context/hooks/index.es.js";
+import { ListItemAction as b } from "../../../../common/components/ListItemAction/index.es.js";
+import { formatCurrency as d } from "../../../../common/utils/NumberFormatting/index.es.js";
+import S from "../../../../common/components/CurrencyInput/index.es.js";
+import { ANALYTICS_EVENTS as f } from "../../../../common/constants/Analytics/index.es.js";
+const B = p(({ debt: a }) => {
+  const { debts: n } = _(), { updateAccount: c } = g(), { onEvent: l } = A(), [o, e] = m.useState(a.original_balance ?? 0), r = o < 0 || o > 9999999999e-2, s = async () => {
+    await c({ ...a.account, original_balance: o }), a.original_balance = o, l(f.DEBTS_SAVE_BALANCE_ACTION, { account_guid: a.guid });
+  }, u = () => {
+    setTimeout(() => {
+      e(a.original_balance ?? 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ i(
+    b,
+    {
+      isSaveDisabled: r,
+      label: n.details_original_balance,
+      onCancel: u,
+      onSave: s,
+      primaryText: n.details_original_balance,
+      secondaryText: d(a.original_balance, "0,0"),
+      zeroStateText: a.original_balance ? void 0 : n.add_original_balance,
+      children: /* @__PURE__ */ i(
+        S,
+        {
+          amount: o,
+          autoFocus: !0,
+          error: r,
+          fullWidth: !0,
+          minAmount: 0,
+          setAmount: (t) => e(isNaN(Number(t)) ? o : Number(t)),
+          sx: { ".MuiTypography-Body": { p: 0 } }
+        }
+      )
+    }
+  );
+});
+export {
+  B as OriginalBalanceAction
+};