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

package/dist/goals/GoalsWidget/index.es.js

@@ -0,0 +1,138 @@
+import { jsx as t, jsxs as d, Fragment as z } from "react/jsx-runtime";
+import r from "react";
+import { observer as P } from "mobx-react-lite";
+import U from "@mui/material/Alert";
+import Y from "@mui/material/Snackbar";
+import q from "@mui/material/Stack";
+import T from "@mui/material/Tab";
+import H from "@mui/material/Tabs";
+import { TabTitle as A } from "../components/TabTitle/index.es.js";
+import { GoalList as S } from "../components/GoalList/index.es.js";
+import { AddGoal as J } from "../components/AddGoal/index.es.js";
+import { GoalDetailsDrawer as Q } from "../components/GoalDetailsDrawer/index.es.js";
+import { EmptyState as X } from "../../common/components/EmptyState/index.es.js";
+import { useEvent as Z, useAccountStore as $, useGlobalUiStore as tt, useGlobalCopyStore as et, useGoalStore as ot } from "../../common/context/hooks/index.es.js";
+import { useScreenSize as lt } from "../../common/hooks/useScreenSize/index.es.js";
+import { buildDynamicCopy as h } from "../../common/utils/Localization/index.es.js";
+import { formatCurrency as g } from "../../common/utils/NumberFormatting/index.es.js";
+import { ANALYTICS_EVENTS as y } from "../../common/constants/Analytics/index.es.js";
+import at from "../../common/components/Loader/index.es.js";
+import it from "../../common/components/WidgetContainer/index.es.js";
+import { TrackType as l } from "../../common/types/Goal/index.es.js";
+import rt from "../../common/components/drawer/Drawer/index.es.js";
+const It = P(({ onBackClick: x, sx: K }) => {
+  const { onEvent: b } = Z(), { isMobile: s } = lt(), { visibleAccounts: E } = $(), { isCopyLoaded: n, isInitialized: _, setSelectedAccounts: N } = tt(), { goals: e, common: O } = et(), { alert: G, goals: u, goalsLoaded: f, loadGoals: w, monthlyCashFlowProfile: p, setAlert: v, retirmentGoals: L } = ot(), [c, m] = r.useState(0), [F, C] = r.useState(!1), R = p?.amount_allocated_for_savings_goals || 0, I = p?.amount_allocated_for_debt_goals || 0, k = p?.amount_allocated_for_retirement_goals || 0, B = n ? h(
+    s ? e.tab_subtitle_mobile : e.tab_subtitle,
+    g(R, "0,0")
+  ) : "", M = n ? h(
+    s ? e.tab_subtitle_mobile : e.tab_subtitle,
+    g(I, "0,0")
+  ) : "", V = n ? h(
+    s ? e.tab_subtitle_mobile : e.tab_subtitle,
+    g(k, "0,0")
+  ) : "";
+  r.useEffect(() => {
+    N(E), b(y.GOALS_VIEW);
+  }, []), r.useEffect(() => {
+    _ && w().finally();
+  }, [_, R, I, k]);
+  const W = () => {
+    b(y.GOALS_CLICK_FILTER);
+  }, a = () => {
+    C(!0), b(y.GOALS_CLICK_ADD);
+  }, D = (o) => {
+    C(!1), o === l.SAVINGS_TRACK ? m(0) : o === l.DEBT_TRACK ? m(1) : o === l.RETIREMENT_TRACK && m(2);
+  }, i = r.useMemo(
+    () => f && (u.length === 0 || u.every(({ track_type: o }) => !o) && L.length === 0),
+    [u, f, L]
+  );
+  return !f || !n || !_ ? /* @__PURE__ */ t(at, {}) : /* @__PURE__ */ d(
+    it,
+    {
+      accountOptions: E,
+      actions: [
+        {
+          iconName: "add",
+          label: e.add_title,
+          onClick: a
+        }
+      ],
+      onAccountsFilterClick: W,
+      onBackClick: x,
+      sx: K,
+      title: e.title,
+      children: [
+        /* @__PURE__ */ d(q, { mx: s ? 0 : 48, my: 24, children: [
+          /* @__PURE__ */ d(
+            H,
+            {
+              onChange: (o, j) => m(j),
+              sx: { bgcolor: "background.paper" },
+              textColor: "primary",
+              value: i ? !1 : c,
+              variant: "fullWidth",
+              children: [
+                /* @__PURE__ */ t(
+                  T,
+                  {
+                    disabled: i,
+                    label: /* @__PURE__ */ t(A, { subtitle: B, title: e.tab_saving_title })
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  T,
+                  {
+                    disabled: i,
+                    label: /* @__PURE__ */ t(A, { subtitle: M, title: e.tab_debt_title })
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  T,
+                  {
+                    disabled: i,
+                    label: /* @__PURE__ */ t(A, { subtitle: V, title: e.tab_retirement_title })
+                  }
+                )
+              ]
+            }
+          ),
+          i ? /* @__PURE__ */ t(
+            X,
+            {
+              header: e.create_goals_header,
+              icon: "trophy",
+              onClick: a,
+              primaryButton: e.add_goals_button,
+              subText: e.empty_state_subheader,
+              sx: {
+                width: { sm: 432 },
+                ".buttons-footer": {
+                  width: 139
+                }
+              }
+            }
+          ) : /* @__PURE__ */ d(z, { children: [
+            c === 0 && /* @__PURE__ */ t(S, { onAddGoals: a, trackType: l.SAVINGS_TRACK }),
+            c === 1 && /* @__PURE__ */ t(S, { onAddGoals: a, trackType: l.DEBT_TRACK }),
+            c === 2 && /* @__PURE__ */ t(S, { onAddGoals: a, trackType: l.RETIREMENT_TRACK })
+          ] })
+        ] }),
+        /* @__PURE__ */ t(Q, { onClose: D }),
+        /* @__PURE__ */ t(
+          rt,
+          {
+            ariaLabelClose: O.close_aria,
+            isOpen: F,
+            onClose: () => C(!1),
+            title: e.add_goal_title,
+            children: /* @__PURE__ */ t(J, { onClose: D })
+          }
+        ),
+        /* @__PURE__ */ t(Y, { onClose: () => v(""), open: !!G, children: /* @__PURE__ */ t(U, { onClose: () => v(""), severity: "success", variant: "filled", children: G }) })
+      ]
+    }
+  );
+});
+export {
+  It as GoalsWidget
+};

package/dist/goals/api/GoalApi/index.es.js

@@ -0,0 +1,26 @@
+import { Fetch as s } from "../../../common/utils/Fetch/index.es.js";
+import { ApiEndpoints as n } from "../../../common/constants/ApiEndpoints/index.es.js";
+class h {
+  fetchInstance;
+  constructor(t, e) {
+    this.fetchInstance = new s(t, e);
+  }
+  addGoal = async (t) => this.fetchInstance.post(n.GOALS, t).then((e) => e.goal);
+  addRetirementGoal = async (t) => this.fetchInstance.post(n.RETIREMENT_GOALS, t).then((e) => e.retirement_goal);
+  addRetirementGoalAccount = async (t) => this.fetchInstance.post(n.RETIREMENT_GOAL_ACCOUNTS, t).then((e) => e.retirement_goal_account);
+  getGoalByGuid = async (t) => this.fetchInstance.get(`${n.GOALS}/${t}`).then((e) => e.goal);
+  getGoals = async () => this.fetchInstance.get(n.GOALS).then((t) => t.goals);
+  getMonthlyCashFlowProfile = async () => this.fetchInstance.get(n.MONTHLY_CASH_FLOW_PROFILE).then((t) => t.monthly_cash_flow_profile);
+  getRetirementGoals = async () => this.fetchInstance.get(n.RETIREMENT_GOALS).then((t) => t.retirement_goals);
+  getRetirementGoalAccounts = async () => this.fetchInstance.get(n.RETIREMENT_GOAL_ACCOUNTS).then((t) => t.retirement_goal_accounts);
+  removeGoal = async (t) => this.fetchInstance.delete(`${n.GOALS}/${t}`).then((e) => e);
+  removeRetirementGoal = async (t) => this.fetchInstance.delete(`${n.RETIREMENT_GOALS}/${t}`).then((e) => e);
+  removeRetirementGoalAccount = async (t) => this.fetchInstance.delete(`${n.RETIREMENT_GOAL_ACCOUNTS}/${t}`).then((e) => e);
+  reorderGoals = async (t) => this.fetchInstance.post(`${n.GOALS}/reposition`, { goals: t }).then((e) => e.goals);
+  updateGoal = async (t) => this.fetchInstance.put(`${n.GOALS}/${t.guid}`, t).then((e) => e.goal);
+  updateMonthlyCashFlowProfile = async (t) => this.fetchInstance.put(`${n.MONTHLY_CASH_FLOW_PROFILE}`, t).then((e) => e.monthly_cash_flow_profile);
+  updateRetirementGoal = async (t) => this.fetchInstance.put(`${n.RETIREMENT_GOALS}/${t.guid}`, t).then((e) => e.retirement_goal);
+}
+export {
+  h as GoalApi
+};

package/dist/goals/components/AccountSelectionDrawer/index.es.js

@@ -0,0 +1,73 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import c from "react";
+import y from "@mui/material/Checkbox";
+import d from "@mui/material/Divider";
+import C from "@mui/material/List";
+import _ from "@mui/material/ListItem";
+import b from "@mui/material/ListItemAvatar";
+import L from "@mui/material/ListItemButton";
+import I from "@mui/material/ListItemText";
+import { P as k, InstitutionLogo as A } from "@mxenabled/mxui";
+import { ConnectCard as S } from "../../../common/components/ConnectCard/index.es.js";
+import { useGlobalCopyStore as v } from "../../../common/context/hooks/index.es.js";
+import w from "../../../common/components/drawer/Drawer/index.es.js";
+import { formatCurrency as D } from "../../../common/utils/NumberFormatting/index.es.js";
+const M = ({
+  accounts: s,
+  isOpen: l,
+  onClose: a,
+  onSave: p,
+  title: f
+}) => {
+  const { goals: i, common: u } = v(), [r, h] = c.useState([]), g = (t) => {
+    const n = r.findIndex((x) => x.guid === t.guid), o = [...r];
+    n >= 0 ? o.splice(n, 1) : o.push(t), h(o);
+  };
+  return /* @__PURE__ */ m(
+    w,
+    {
+      ariaLabelClose: u.close_aria,
+      isOpen: l,
+      onClose: a,
+      onPrimaryAction: () => p(r),
+      title: f,
+      children: [
+        /* @__PURE__ */ e(k, { color: "text.secondary", sx: { mx: 24, my: 12 }, children: i.select_debt_accounts_description }),
+        /* @__PURE__ */ m(C, { sx: { bgcolor: "background.white" }, children: [
+          /* @__PURE__ */ e(d, { variant: "fullWidth" }),
+          s.map((t, n) => /* @__PURE__ */ m(c.Fragment, { children: [
+            /* @__PURE__ */ e(_, { children: /* @__PURE__ */ m(L, { onClick: () => g(t), children: [
+              /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
+                A,
+                {
+                  alt: t?.name || "",
+                  institutionGuid: t?.institution_guid || ""
+                }
+              ) }),
+              /* @__PURE__ */ e(
+                I,
+                {
+                  primary: t.name || t.feed_name,
+                  secondary: D(t.balance || 0, "0,0.00")
+                }
+              ),
+              /* @__PURE__ */ e(y, { checked: r.some((o) => o.guid === t.guid) })
+            ] }) }),
+            /* @__PURE__ */ e(d, { variant: n < s.length - 1 ? "inset" : "fullWidth" })
+          ] }, t.guid))
+        ] }),
+        /* @__PURE__ */ e(
+          S,
+          {
+            description: i.connect_description,
+            label: i.connect_button,
+            title: i.connect_title
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  M as AccountSelectionDrawer
+};

package/dist/goals/components/AddGoal/AddGoalListItem/index.es.js

@@ -0,0 +1,51 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import u from "react";
+import v from "@mui/material/Avatar";
+import C from "@mui/material/Collapse";
+import S from "@mui/material/Divider";
+import s from "@mui/material/List";
+import p from "@mui/material/ListItem";
+import k from "@mui/material/ListItemAvatar";
+import c from "@mui/material/ListItemButton";
+import A from "@mui/material/ListItemIcon";
+import l from "@mui/material/ListItemText";
+import M from "@mui/material/Stack";
+import { Icon as d, ChevronRight as f, ExpandLess as N, ExpandMore as O } from "@mxenabled/mx-icons";
+import { useGlobalCopyStore as j } from "../../../../common/context/hooks/index.es.js";
+import { TrackType as h, MetaType as T } from "../../../../common/types/Goal/index.es.js";
+const W = ({ goalType: x, onClick: n }) => {
+  const { goals: y } = j(), { bgcolor: E, icon: I, label: R, description: b, subTypes: a, type: o } = x, [i, g] = u.useState(!1), t = a.length > 0;
+  return /* @__PURE__ */ r(M, { children: /* @__PURE__ */ m(s, { sx: { bgcolor: "background.paper" }, children: [
+    /* @__PURE__ */ r(p, { children: /* @__PURE__ */ m(
+      c,
+      {
+        onClick: t ? () => g(!i) : () => n(
+          o === h.RETIREMENT_TRACK ? y.retirement : "",
+          o === h.RETIREMENT_TRACK ? T.RETIREMENT : T.OTHER,
+          o
+        ),
+        children: [
+          /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(v, { sx: { bgcolor: E }, variant: "rounded", children: /* @__PURE__ */ r(d, { name: I, sx: { color: "grey.900" } }) }) }),
+          /* @__PURE__ */ r(l, { primary: R, secondary: b, sx: { mr: 24 } }),
+          !t && /* @__PURE__ */ r(f, {}),
+          t && (i ? /* @__PURE__ */ r(N, {}) : /* @__PURE__ */ r(O, {}))
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ r(S, { variant: "inset" }),
+    t && /* @__PURE__ */ r(C, { in: i, children: /* @__PURE__ */ r(s, { sx: { bgcolor: "background.default" }, children: a.map((e, L) => /* @__PURE__ */ r(p, { sx: { pl: 48 }, children: /* @__PURE__ */ m(c, { onClick: () => n(e.label, e.metaType, o), children: [
+      /* @__PURE__ */ r(A, { sx: { mr: 8 }, children: /* @__PURE__ */ r(d, { name: e.icon }) }),
+      /* @__PURE__ */ r(
+        l,
+        {
+          primary: e.label,
+          primaryTypographyProps: { variant: "Body" }
+        }
+      ),
+      /* @__PURE__ */ r(f, {})
+    ] }) }, L)) }) })
+  ] }) });
+};
+export {
+  W as AddGoalListItem
+};

package/dist/goals/components/AddGoal/index.es.js

@@ -0,0 +1,56 @@
+import { jsxs as g, jsx as c } from "react/jsx-runtime";
+import C from "react";
+import S from "@mui/material/List";
+import b from "@mui/material/Stack";
+import { getGoalTypes as D } from "../../util/GoalsUtil/index.es.js";
+import { AddGoalListItem as G } from "../addgoal/AddGoalListItem/index.es.js";
+import { AccountSelectionDrawer as O } from "../AccountSelectionDrawer/index.es.js";
+import { TrackType as r, GoalType as i, MetaType as s } from "../../../common/types/Goal/index.es.js";
+import { useGlobalCopyStore as L, useGoalStore as R, useAccountStore as k } from "../../../common/context/hooks/index.es.js";
+import { AccountType as l } from "../../../common/types/Account/index.es.js";
+const M = ({ onClose: m }) => {
+  const { goals: a } = L(), { addGoal: p, debtGoals: u, setAlert: _, setSelectedGoal: d } = R(), { visibleDebtAccounts: f } = k(), [A, n] = C.useState(!1), y = D(a), T = (e, t, o) => {
+    o === r.DEBT_TRACK ? n(!0) : d({
+      amount: 0,
+      current_amount: 0,
+      goal_type: i.SAVE_AMOUNT,
+      initial_amount: 0,
+      meta_type: t,
+      name: e,
+      track_type: o
+    });
+  }, E = async (e) => {
+    for (const t of e) {
+      let o = s.CREDIT_CARD;
+      t.account_type === l.LOAN ? o = s.LOANS : t.account_type === l.LINE_OF_CREDIT && (o = s.LINE_OF_CREDIT), await p({
+        account_guid: t.guid,
+        amount: 0,
+        current_amount: 0,
+        goal_type: i.KEEP_BALANCE_BELOW,
+        initial_amount: t.balance || 0,
+        interest_rate: t.interest_rate || 0,
+        meta_type: o,
+        monthly_payment: t.minimum_payment || 0,
+        name: t.name || t.feed_name || "",
+        track_type: r.DEBT_TRACK
+      }), _(a.alert_goal_added);
+    }
+    n(!1), m?.(r.DEBT_TRACK);
+  };
+  return /* @__PURE__ */ g(b, { children: [
+    /* @__PURE__ */ c(S, { sx: { bgcolor: "background.paper" }, children: y.map((e, t) => /* @__PURE__ */ c(G, { goalType: e, onClick: T }, t)) }),
+    /* @__PURE__ */ c(
+      O,
+      {
+        accounts: f.filter((e) => !u.find((t) => t.account_guid === e.guid)),
+        isOpen: A,
+        onClose: () => n(!1),
+        onSave: E,
+        title: a.select_debt_accounts_title
+      }
+    )
+  ] });
+};
+export {
+  M as AddGoal
+};

package/dist/goals/components/GoalDetails/index.es.js

@@ -0,0 +1,69 @@
+import { jsxs as o, jsx as t, Fragment as m } from "react/jsx-runtime";
+import A from "react";
+import { observer as _ } from "mobx-react-lite";
+import i from "@mui/material/Divider";
+import R from "@mui/material/List";
+import T from "@mui/material/Stack";
+import { Text as a } from "@mxenabled/mxui";
+import { AccountAction as f } from "../actions/AccountAction/index.es.js";
+import { AmountToSaveAction as E } from "../actions/AmountToSaveAction/index.es.js";
+import { ChangeAccountAction as u } from "../actions/ChangeAccountAction/index.es.js";
+import { GoalNameAction as y } from "../actions/GoalNameAction/index.es.js";
+import { GoalStatusCard as x } from "../GoalStatusCard/index.es.js";
+import { MonthlyPaymentAction as h } from "../actions/MonthlyPaymentAction/index.es.js";
+import { OriginalBalanceAction as C } from "../actions/OriginalBalanceAction/index.es.js";
+import { InterestRateAction as k } from "../actions/InterestRateAction/index.es.js";
+import { RetirementAgeAction as S } from "../actions/RetirementAgeAction/index.es.js";
+import { BirthdayAction as I } from "../actions/BirthdayAction/index.es.js";
+import { AddRetirementAccountAction as K } from "../actions/AddRetirementAccountAction/index.es.js";
+import { useGlobalCopyStore as v, useAccountStore as N } from "../../../common/context/hooks/index.es.js";
+import { TrackType as e } from "../../../common/types/Goal/index.es.js";
+const Y = _(({ goal: r }) => {
+  const { goals: c } = v(), { visibleAccounts: l } = N(), p = A.useMemo(
+    () => l.find((d) => d.guid === r.account_guid),
+    [l, r]
+  ), n = r.track_type;
+  let s = c.details_save_title;
+  return r.track_type === e.DEBT_TRACK ? s = c.details_debt_title : r.track_type === e.RETIREMENT_TRACK && (s = c.details_retirement_title), /* @__PURE__ */ o(T, { children: [
+    /* @__PURE__ */ o(T, { mx: 24, children: [
+      /* @__PURE__ */ t(a, { color: "text.secondary", sx: { mb: 4, mt: 24 }, variant: "XSmall", children: s }),
+      /* @__PURE__ */ t(x, { goal: r, isInDrawer: !0 }),
+      /* @__PURE__ */ t(a, { color: "text.secondary", sx: { mb: 4, mt: 24 }, variant: "XSmall", children: c.details_title })
+    ] }),
+    /* @__PURE__ */ o(R, { sx: { bgcolor: "background.paper" }, children: [
+      /* @__PURE__ */ t(y, { goal: r }),
+      /* @__PURE__ */ t(i, { sx: { ml: 24 } }),
+      (n === e.SAVINGS_TRACK || n === e.RETIREMENT_TRACK) && /* @__PURE__ */ o(m, { children: [
+        /* @__PURE__ */ t(E, { goal: r }),
+        /* @__PURE__ */ t(i, { sx: { ml: n === e.RETIREMENT_TRACK ? 24 : 0 } })
+      ] }),
+      r.track_type === e.DEBT_TRACK && /* @__PURE__ */ o(m, { children: [
+        /* @__PURE__ */ t(h, { goal: r }),
+        /* @__PURE__ */ t(i, { sx: { ml: 24 } }),
+        /* @__PURE__ */ t(k, { goal: r }),
+        /* @__PURE__ */ t(i, { sx: { ml: 24 } }),
+        /* @__PURE__ */ t(C, { goal: r }),
+        /* @__PURE__ */ t(i, { variant: "fullWidth" })
+      ] }),
+      r.track_type === e.RETIREMENT_TRACK && /* @__PURE__ */ o(m, { children: [
+        /* @__PURE__ */ t(S, { goal: r }),
+        /* @__PURE__ */ t(i, { sx: { ml: 24 } }),
+        /* @__PURE__ */ t(I, { goal: r }),
+        /* @__PURE__ */ t(i, { variant: "fullWidth" })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(a, { color: "text.secondary", sx: { mb: 4, ml: 24, mt: 12 }, variant: "XSmall", children: r.track_type === e.RETIREMENT_TRACK ? c.details_accounts : c.details_account }),
+    r.track_type !== e.RETIREMENT_TRACK && p && /* @__PURE__ */ o(m, { children: [
+      /* @__PURE__ */ t(f, { account: p }),
+      /* @__PURE__ */ t(i, {})
+    ] }),
+    r.track_type === e.RETIREMENT_TRACK && /* @__PURE__ */ o(m, { children: [
+      /* @__PURE__ */ t(K, { goal: r }),
+      /* @__PURE__ */ t(i, {})
+    ] }),
+    r.track_type === e.SAVINGS_TRACK && !r.is_complete && /* @__PURE__ */ t(u, { goal: r })
+  ] });
+});
+export {
+  Y as GoalDetails
+};

package/dist/goals/components/GoalDetailsDrawer/index.es.js

@@ -0,0 +1,82 @@
+import { jsxs as B, jsx as c } from "react/jsx-runtime";
+import u from "react";
+import { observer as K } from "mobx-react-lite";
+import M from "@mui/material/Stack";
+import { Text as O } from "@mxenabled/mxui";
+import { GoalDetails as P } from "../GoalDetails/index.es.js";
+import { useAccountStore as V, useGlobalCopyStore as j, useGoalStore as W, useUserStore as L } from "../../../common/context/hooks/index.es.js";
+import { TrackType as a } from "../../../common/types/Goal/index.es.js";
+import U from "../../../common/components/drawer/Drawer/index.es.js";
+import q from "../../../common/components/dialog/Dialog/index.es.js";
+import { buildDynamicCopy as z } from "../../../common/utils/Localization/index.es.js";
+const ae = K(({ onClose: G }) => {
+  const { visibleInvestmentAccounts: _ } = V(), { goals: o, common: r } = j(), {
+    addGoal: h,
+    addRetirementGoal: E,
+    deleteGoal: b,
+    deleteRetirementGoal: S,
+    newRetirementGoalAccounts: f,
+    retirementGoalAccounts: y,
+    selectedGoal: e,
+    setAlert: m,
+    setSelectedGoal: i,
+    updateGoal: v
+  } = W(), { user: T } = L(), [w, R] = u.useState(!1), n = !e?.guid, A = e?.track_type === a.SAVINGS_TRACK && e.is_complete && !e.has_been_spent, g = u.useMemo(() => {
+    const t = n ? f : y;
+    return _.filter((l) => t.some((s) => s.account_guid === l.guid));
+  }, [n, _, f, y]), x = u.useMemo(() => {
+    if (!e) return !1;
+    const { account_guid: t, track_type: l, name: s, amount: C, retirement_age: N } = e;
+    return l === a.SAVINGS_TRACK ? t ? !!s && !!C : !1 : l === a.RETIREMENT_TRACK ? g.length ? !!s && !!C && !!N && !!T.birthday : !1 : !0;
+  }, [e, g, T.birthday]);
+  let p = r.delete_button, d = () => R(!0);
+  n ? (d = () => D(), p = r.save_button) : A && (d = () => I(), p = o.mark_as_complete_button);
+  const D = async () => {
+    if (e) {
+      const t = e.track_type;
+      t !== a.RETIREMENT_TRACK ? await h(e) : t === a.RETIREMENT_TRACK && await E({ ...e, target_amount: e.amount }), m(o.alert_goal_added), i(void 0), t && G?.(t);
+    }
+  }, k = async () => {
+    e && (e.track_type !== a.RETIREMENT_TRACK ? await b(e.guid) : e.track_type === a.RETIREMENT_TRACK && await S(e), m(o.alert_goal_deleted), i(void 0));
+  }, I = async () => {
+    const t = {
+      ...e,
+      has_been_spent: !0
+    };
+    await v(t), m(o.alert_goal_completed), i(void 0);
+  };
+  return /* @__PURE__ */ B(M, { children: [
+    /* @__PURE__ */ c(
+      U,
+      {
+        ariaLabelClose: r.close_aria,
+        hasSecondaryAction: n,
+        isOpen: !!e,
+        isPrimaryDisabled: !x,
+        onClose: () => i(void 0),
+        onPrimaryAction: d,
+        primaryColor: n || A ? "primary" : "error",
+        primaryText: p,
+        secondaryColor: "primary",
+        title: o.goal_details,
+        children: e && /* @__PURE__ */ c(P, { goal: e })
+      }
+    ),
+    /* @__PURE__ */ c(
+      q,
+      {
+        copy: { close_aria: r.close_aria, title: o.delete_goal },
+        isOpen: w,
+        maxWidth: "xs",
+        onClose: () => R(!1),
+        onPrimaryAction: k,
+        primaryColor: "error",
+        primaryText: r.delete_button,
+        children: /* @__PURE__ */ c(O, { sx: { textWrap: "wrap" }, variant: "Paragraph", children: z(o.delete_description, e?.name || "") })
+      }
+    )
+  ] });
+});
+export {
+  ae as GoalDetailsDrawer
+};

package/dist/goals/components/GoalList/index.es.js

@@ -0,0 +1,87 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { observer as g } from "mobx-react-lite";
+import y from "@mui/material/Button";
+import x from "@mui/material/Card";
+import G from "@mui/material/CardActionArea";
+import A from "@mui/material/CardContent";
+import _ from "@mui/material/Unstable_Grid2";
+import r from "@mui/material/Stack";
+import { Text as l, P as f, Icon as k } from "@mxenabled/mxui";
+import { GoalStatusCard as I } from "../GoalStatusCard/index.es.js";
+import { ManageGoals as v } from "../ManageGoals/index.es.js";
+import { getZeroStateOngoing as w } from "../../util/GoalsUtil/index.es.js";
+import { useScreenSize as R } from "../../../common/hooks/useScreenSize/index.es.js";
+import { useGlobalCopyStore as T, useGoalStore as K } from "../../../common/context/hooks/index.es.js";
+import { TrackType as i } from "../../../common/types/Goal/index.es.js";
+import { formatCurrency as j } from "../../../common/utils/NumberFormatting/index.es.js";
+const U = g(({ trackType: c, onAddGoals: u }) => {
+  const { isMobile: a } = R(), { goals: o } = T(), { orderedGoals: S, setSelectedGoal: s } = K(), m = S.filter((e) => e.track_type === c), d = m.filter(
+    (e) => e.track_type === i.SAVINGS_TRACK && !e.has_been_spent || e.track_type !== i.SAVINGS_TRACK && !e.is_complete
+  ), p = m.filter(
+    (e) => e.track_type === i.SAVINGS_TRACK && e.has_been_spent || e.track_type !== i.SAVINGS_TRACK && e.is_complete
+  ), b = c === i.DEBT_TRACK ? o.zero_state_complete_debt : o.zero_state_complete_savings;
+  return /* @__PURE__ */ n(r, { mt: 16, mx: a ? 24 : 0, children: [
+    /* @__PURE__ */ n(r, { alignItems: "center", direction: "row", justifyContent: "space-between", mb: 8, children: [
+      /* @__PURE__ */ t(l, { color: "text.secondary", variant: "Small", children: o.ongoing_title }),
+      /* @__PURE__ */ t(v, { trackType: c })
+    ] }),
+    d.length > 0 ? /* @__PURE__ */ t(_, { container: !0, spacing: 24, children: d.map((e, h, C) => (
+      // Goal should be full width in mobile or if it's the first goal (unless there are 2)
+      /* @__PURE__ */ t(_, { xs: a || h === 0 && C.length !== 2 ? 12 : 6, children: /* @__PURE__ */ t(I, { goal: e, onClick: () => s(e) }, e.guid) }, h)
+    )) }) : /* @__PURE__ */ n(
+      r,
+      {
+        alignItems: "center",
+        bgcolor: "background.default",
+        borderRadius: 2,
+        height: 166,
+        justifyContent: "center",
+        py: 18,
+        children: [
+          /* @__PURE__ */ t(
+            f,
+            {
+              sx: (e) => ({
+                color: "text.secondary",
+                [e.breakpoints.down("sm")]: {
+                  px: 10
+                },
+                width: { sm: 381 }
+              }),
+              variant: "Small",
+              children: w(c, o)
+            }
+          ),
+          /* @__PURE__ */ t(y, { onClick: u, sx: { mt: 16, width: { sm: 224 } }, variant: "contained", children: o.add_goals_button })
+        ]
+      }
+    ),
+    c !== i.RETIREMENT_TRACK && /* @__PURE__ */ n(r, { gap: 16, mt: 48, children: [
+      /* @__PURE__ */ t(l, { color: "text.secondary", variant: "Small", children: o.complete_title }),
+      p.length === 0 && /* @__PURE__ */ t(r, { alignItems: "center", bgcolor: "background.default", borderRadius: 2, py: 18, children: /* @__PURE__ */ t(
+        f,
+        {
+          sx: (e) => ({
+            color: "text.secondary",
+            width: { sm: 393 },
+            [e.breakpoints.down("sm")]: {
+              px: 10
+            }
+          }),
+          variant: "Small",
+          children: b
+        }
+      ) }),
+      p.map((e) => /* @__PURE__ */ t(x, { elevation: 2, children: /* @__PURE__ */ t(G, { onClick: () => s(e), children: /* @__PURE__ */ t(A, { sx: { ":last-child": { pb: 16 } }, children: /* @__PURE__ */ n(r, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ n(r, { alignItems: "center", direction: "row", gap: 6, children: [
+          /* @__PURE__ */ t(k, { color: "success", fill: !0, name: "check_circle", size: 20 }),
+          /* @__PURE__ */ t(l, { color: "text.secondary", variant: "Body", children: e.name })
+        ] }),
+        /* @__PURE__ */ t(l, { bold: !0, variant: "Body", children: j(e.amount, "0,0.00") })
+      ] }) }) }) }, e.guid))
+    ] })
+  ] });
+});
+export {
+  U as GoalList
+};

package/dist/goals/components/GoalStatusCard/index.es.js

@@ -0,0 +1,59 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { observer as x } from "mobx-react-lite";
+import _ from "@mui/material/Avatar";
+import S from "@mui/material/Card";
+import A from "@mui/material/CardActionArea";
+import $ from "@mui/material/CardContent";
+import k from "@mui/material/CardHeader";
+import d from "@mui/material/Stack";
+import { Payments as g, NoteStack as j, Person as E } from "@mxenabled/mx-icons";
+import { Text as n, H2 as R } from "@mxenabled/mxui";
+import { getGoalStatusData as B } from "../../util/GoalsUtil/index.es.js";
+import { useGlobalCopyStore as D } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as H } from "../../../common/hooks/useScreenSize/index.es.js";
+import { TrackType as c } from "../../../common/types/Goal/index.es.js";
+import { formatCurrency as m } from "../../../common/utils/NumberFormatting/index.es.js";
+import w from "../../../common/components/charts/StatusBar/index.es.js";
+const G = (r, e) => e ? m(r, r < 1e3 ? "0" : "0.00a").replace(
+  /(\d+)(?:\.0+|(\.\d*?[1-9])0*)([a-zA-Z]* ?\$?)/g,
+  "$1$2$3"
+) : m(r, "0,0.00"), V = x(
+  ({ goal: r, isInDrawer: e = !1, onClick: s }) => {
+    const { goals: l } = D(), { isMobile: f, isTablet: h } = H(), o = f || h, {
+      backgroundColor: p,
+      color: u,
+      percentage: y,
+      percentageText: T,
+      projectedText: C
+    } = B(l, r), b = r.track_type === c.DEBT_TRACK ? r.initial_amount : r.amount, v = [
+      {
+        color: p,
+        percentage: `${y}`
+      }
+    ];
+    let a = /* @__PURE__ */ t(g, {});
+    return r.track_type === c.DEBT_TRACK ? a = /* @__PURE__ */ t(j, {}) : r.track_type === c.RETIREMENT_TRACK && (a = /* @__PURE__ */ t(E, {})), /* @__PURE__ */ t(S, { elevation: 2, children: /* @__PURE__ */ i(A, { disabled: !s, onClick: s, children: [
+      /* @__PURE__ */ t(
+        k,
+        {
+          avatar: /* @__PURE__ */ t(_, { sx: { bgcolor: p, color: u, height: 48, width: 48 }, variant: "rounded", children: a }),
+          subheader: /* @__PURE__ */ t(n, { variant: e || o ? "H3" : "H2", children: `${m(r.current_amount, o ? "0,0" : "0,0.00")} / ${G(
+            b,
+            o
+          )}` }),
+          title: /* @__PURE__ */ t(R, { color: "text.secondary", fontWeight: 400, variant: "Body", children: r.name })
+        }
+      ),
+      /* @__PURE__ */ t($, { sx: { pt: 0 }, children: /* @__PURE__ */ i(d, { gap: 6, children: [
+        /* @__PURE__ */ t(w, { data: v, height: 24 }),
+        /* @__PURE__ */ i(d, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+          /* @__PURE__ */ t(n, { color: "text.secondary", variant: "XSmall", children: T }),
+          r.projected_to_complete_at && /* @__PURE__ */ t(n, { color: "text.secondary", variant: "XSmall", children: C })
+        ] })
+      ] }) })
+    ] }) });
+  }
+);
+export {
+  V as GoalStatusCard
+};