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

package/dist/finstrong/components/shared/DialScoreCard/index.es.js

@@ -0,0 +1,190 @@
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import d from "@mui/material/Box";
+import h from "@mui/material/Stack";
+import { useTheme as H } from "@mui/material/styles";
+import { PieChart as L } from "@mui/x-charts";
+import { TrendingUp as O, ArrowRightAlt as U, TrendingDown as B } from "@mxenabled/mx-icons";
+import { P as a } from "@mxenabled/mxui";
+import { radiansToDegrees as $, getMarkerXYCoordinates as q } from "../../../util/finstrongUtils/index.es.js";
+import { CustomPieArc as G } from "../CustomPieArc/index.es.js";
+const rt = ({
+  arcRadius: m = 100,
+  healthScore: r,
+  size: e = "L",
+  dialScoreData: f,
+  minValue: p = 0,
+  maxValue: u = 100,
+  markerColor: I,
+  healthScoreStatus: w,
+  footerCenterContent: i,
+  footerLeftContent: A,
+  footerRightContent: k,
+  isFinacialStrengthGraph: S = !1
+}) => {
+  const z = H(), c = -Math.PI / 1.35, M = Math.PI / 1.35, b = M - c, D = b / (u - p), R = (r - p) * D, y = c + R + 0.02, T = e !== "SM" ? 0.1 : 0.12, l = m, x = m * (1 - T), o = l * 2.5, n = o / 2, s = o / 2, j = (x + l) / 2, E = r !== 25 && r !== 50 && r !== 75 && r !== 100 ? 0 : 0.12, [F, W] = q(j, y, E), X = r / 25, v = {
+    L: { markerSize: 12, healthScoreFontSize: 64 },
+    M: { markerSize: 10, healthScoreFontSize: 48 },
+    SM: { markerSize: 3, healthScoreFontSize: 14 }
+  }, Y = i === 0 ? U : B;
+  return /* @__PURE__ */ g(
+    h,
+    {
+      sx: {
+        width: o,
+        height: o,
+        position: "relative",
+        alignSelf: "center"
+      },
+      children: [
+        /* @__PURE__ */ t(
+          L,
+          {
+            height: o,
+            margin: { top: 0, right: 0, bottom: 0, left: 0 },
+            series: [
+              {
+                data: f,
+                innerRadius: x,
+                outerRadius: l,
+                startAngle: Math.round($(c)),
+                // Use Math.degrees to convert
+                endAngle: Math.round($(M))
+                // Use Math.degrees to convert
+              }
+            ],
+            skipAnimation: !0,
+            slotProps: {
+              legend: { hidden: !0 }
+            },
+            slots: {
+              pieArc: (P) => /* @__PURE__ */ t(
+                G,
+                {
+                  arcColor: P.color,
+                  arcRadius: m,
+                  arcStartAngle: c,
+                  centerX: n,
+                  centerY: s,
+                  dataIndex: P.dataIndex,
+                  dialScoreData: f,
+                  innerArcRadius: x,
+                  isFinacialStrengthGraph: S,
+                  outterArcRadius: l,
+                  progressEndAngle: y,
+                  totalAngularSpan: b,
+                  unitsPerSegment: X
+                }
+              )
+            },
+            sx: {
+              "& path": {
+                stroke: "none"
+              }
+            },
+            width: o,
+            children: r >= p && r <= u && /* @__PURE__ */ t(
+              "circle",
+              {
+                cx: n + F,
+                cy: s + W,
+                fill: z.palette.common.white,
+                r: v[e].markerSize,
+                stroke: S ? "url(#arcGradient)" : I,
+                strokeWidth: e !== "SM" ? 3 : 1
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          d,
+          {
+            sx: {
+              position: "absolute",
+              top: `${s}px`,
+              left: `${n}px`,
+              transform: "translate(-50%, -50%)",
+              textAlign: "center"
+            },
+            children: /* @__PURE__ */ g(
+              h,
+              {
+                spacing: 1,
+                sx: { alignItems: "center", justifyContent: "center", gap: e !== "M" ? 10 : 3 },
+                children: [
+                  /* @__PURE__ */ t(
+                    a,
+                    {
+                      sx: {
+                        fontSize: v[e].healthScoreFontSize,
+                        lineHeight: e !== "SM" ? "48px" : "100%"
+                      },
+                      variant: "H1",
+                      children: r
+                    }
+                  ),
+                  e !== "SM" && /* @__PURE__ */ t(a, { sx: { fontWeight: 600 }, variant: e === "L" ? "body1" : "body2", children: w })
+                ]
+              }
+            )
+          }
+        ),
+        i !== void 0 && /* @__PURE__ */ t(
+          d,
+          {
+            sx: {
+              position: "absolute",
+              top: `${s * 2 * 0.83}px`,
+              left: `${n}px`,
+              transform: "translate(-50%, -50%)",
+              textAlign: "center"
+            },
+            children: typeof i == "number" ? /* @__PURE__ */ g(h, { sx: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [
+              i > 0 ? /* @__PURE__ */ t(O, { size: 16, sx: { color: "success.main" } }) : /* @__PURE__ */ t(Y, { size: 16, sx: { color: "text.secondary" } }),
+              /* @__PURE__ */ t(
+                a,
+                {
+                  sx: {
+                    fontWeight: 600,
+                    color: i > 0 ? "success.main" : "text.secondary"
+                  },
+                  variant: "body1",
+                  children: i
+                }
+              )
+            ] }) : /* @__PURE__ */ t(a, { sx: { color: "text.secondary" }, variant: "subtitle2", children: i })
+          }
+        ),
+        A !== void 0 && /* @__PURE__ */ t(
+          d,
+          {
+            sx: {
+              position: "absolute",
+              top: `${s * 2 * 0.83}px`,
+              left: `${n - n / 2}px`,
+              // shift left from center
+              transform: "translate(-50%, -50%)",
+              textAlign: "left"
+            },
+            children: /* @__PURE__ */ t(a, { variant: "body1", children: A })
+          }
+        ),
+        k !== void 0 && /* @__PURE__ */ t(
+          d,
+          {
+            sx: {
+              position: "absolute",
+              top: `${s * 2 * 0.83}px`,
+              left: `${n + n / 2}px`,
+              transform: "translate(-50%, -50%)",
+              textAlign: "right"
+            },
+            children: /* @__PURE__ */ t(a, { variant: "body1", children: k })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  rt as DialScoreCard
+};

package/dist/finstrong/components/shared/ScoreHistoryTimeline/index.es.js

@@ -0,0 +1,106 @@
+import { jsx as o, jsxs as t, Fragment as T } from "react/jsx-runtime";
+import { observer as B } from "mobx-react-lite";
+import { format as R } from "date-fns/format";
+import s from "@mui/material/Box";
+import k from "@mui/material/Card";
+import n from "@mui/material/Stack";
+import v from "@mui/icons-material/FiberManualRecordRounded";
+import { P as H, Text as d } from "@mxenabled/mxui";
+import M from "@mui/lab/Timeline";
+import { timelineItemClasses as D } from "@mui/lab/TimelineItem";
+import { getPercentFromRatio as l } from "../../../util/finstrongUtils/index.es.js";
+import m from "../ScoreHistoryTimelineItem/index.es.js";
+import { useGlobalCopyStore as j } from "../../../../common/context/hooks/index.es.js";
+import { buildDynamicCopy as i } from "../../../../common/utils/Localization/index.es.js";
+const F = ({ report: a }) => {
+  const { finstrong: p } = j(), { score_history_drawer_timeline: r } = p, {
+    health_score_point_difference: e,
+    newer_credit_score: _,
+    older_credit_score: f,
+    older_spend_to_income_ratio: h,
+    newer_spend_to_income_ratio: u,
+    older_health_score: c,
+    newer_health_score: g,
+    newer_score_calculated_at: x
+  } = a, y = R(new Date(x), "MMM d"), C = () => e === 0 ? "info.lighter" : e > 0 ? "success.lighter" : "error.lighter", b = () => e === 0 ? i(r.stayed_at, c) : e > 0 ? r.less_spending : r.more_spending, w = () => {
+    if (e === 0) return null;
+    const S = e > 0 ? r.up_from : r.down_from, I = i(S, c, g);
+    return /* @__PURE__ */ t(T, { children: [
+      /* @__PURE__ */ o(v, { sx: { fontSize: 8, mx: 4, p: 1 } }),
+      " ",
+      I
+    ] });
+  };
+  return /* @__PURE__ */ o(k, { children: /* @__PURE__ */ t(n, { sx: { backgroundColor: "background.paper" }, children: [
+    /* @__PURE__ */ o(s, { sx: { borderBottom: "1px solid", borderBottomColor: "divider", p: 16 }, children: /* @__PURE__ */ t(
+      n,
+      {
+        flexDirection: "row",
+        sx: { alignItems: "center", gap: 16, height: 48, width: "100%" },
+        children: [
+          /* @__PURE__ */ o(
+            n,
+            {
+              sx: {
+                alignItems: "center",
+                backgroundColor: C(),
+                borderRadius: 999,
+                height: 48,
+                justifyContent: "center",
+                minWidth: 48
+              },
+              children: /* @__PURE__ */ o(H, { sx: { fontWeight: 600 }, variant: "Body", children: e > 0 ? `+${e}` : e })
+            }
+          ),
+          /* @__PURE__ */ t(n, { sx: { gap: 2, width: "80%" }, children: [
+            /* @__PURE__ */ o(d, { fontWeight: 600, variant: "Body", children: b() }),
+            /* @__PURE__ */ t(d, { sx: { color: "text.secondary" }, variant: "subtitle2", children: [
+              y,
+              " ",
+              w()
+            ] })
+          ] })
+        ]
+      }
+    ) }),
+    e !== 0 && /* @__PURE__ */ o(s, { sx: { color: "text.secondary", pb: 8, pl: 32, pr: 16, pt: 12 }, children: /* @__PURE__ */ t(
+      M,
+      {
+        sx: {
+          [`& .${D.root}:before`]: {
+            flex: 0,
+            padding: 0
+          },
+          m: 0,
+          p: 0
+        },
+        children: [
+          /* @__PURE__ */ o(
+            m,
+            {
+              content: i(
+                r.spend_to_income_description,
+                l(h),
+                l(u)
+              )
+            }
+          ),
+          /* @__PURE__ */ o(
+            m,
+            {
+              content: i(
+                r.credit_score_description,
+                f,
+                _
+              ),
+              islast: !0
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) });
+}, U = B(F);
+export {
+  U as default
+};

package/dist/finstrong/components/shared/ScoreHistoryTimelineItem/index.es.js

@@ -0,0 +1,20 @@
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { P as t } from "@mxenabled/mxui";
+import m from "@mui/lab/TimelineConnector";
+import n from "@mui/lab/TimelineContent";
+import l from "@mui/lab/TimelineDot";
+import p from "@mui/lab/TimelineSeparator";
+import d from "@mui/lab/TimelineItem";
+const b = ({
+  content: e,
+  islast: o = !1
+}) => /* @__PURE__ */ r(d, { sx: { minHeight: 0 }, children: [
+  /* @__PURE__ */ r(p, { children: [
+    /* @__PURE__ */ i(l, { sx: { bgcolor: "divider", borderWidth: 1, p: 3 } }),
+    !o && /* @__PURE__ */ i(m, { sx: { bgcolor: "divider", width: 0.1 } })
+  ] }),
+  /* @__PURE__ */ i(n, { sx: { pb: 16, pl: 12, pr: 0, pt: 5 }, children: /* @__PURE__ */ i(t, { fontSize: 13, fontWeight: 400, variant: "subtitle2", children: e }) })
+] });
+export {
+  b as default
+};

package/dist/finstrong/index.es.js

@@ -0,0 +1,14 @@
+import { DialScoreCard as t } from "./components/shared/DialScoreCard/index.es.js";
+import { FinancialStrengthGraph as i } from "./components/FinancialStrengthGraph/index.es.js";
+import { CreditScoreGraph as p } from "./components/CreditScoreGraph/index.es.js";
+import { FinstrongApi as f } from "./api/FinstrongApi/index.es.js";
+import { FinstrongStore as x } from "./stores/FinstrongStore/index.es.js";
+import { default as d } from "./FinstrongWidget/index.es.js";
+export {
+  p as CreditScoreGraph,
+  t as DialScoreCard,
+  i as FinancialStrengthGraph,
+  f as FinstrongApi,
+  x as FinstrongStore,
+  d as FinstrongWidget
+};

package/dist/finstrong/stores/FinstrongStore/index.es.js

@@ -0,0 +1,81 @@
+import { makeAutoObservable as s, runInAction as a } from "mobx";
+import { format as n } from "date-fns/format";
+import { fromUnixTime as i } from "date-fns/fromUnixTime";
+import { getUnixTime as o } from "date-fns/getUnixTime";
+import { subMonths as l } from "date-fns/subMonths";
+import { FinstrongApi as h } from "../../api/FinstrongApi/index.es.js";
+import { augmentChartData as g } from "../../utils/Finstrong/index.es.js";
+class H {
+  api = new h("/", "");
+  augmentedChartData = [];
+  averageHealthScores = [];
+  globalStore;
+  healthScore = {};
+  healthScoreChange;
+  healthScoreChangeReports = [];
+  peerScore = null;
+  constructor(e) {
+    this.globalStore = e, this.api = new h(e.endpoint, e.sessionToken), s(this);
+  }
+  calculateHealthScore = async () => {
+    try {
+      const e = await this.api.calculateHealthScore();
+      let t = 0;
+      await this.loadHealthScoreChangeReports();
+      const r = e?.health_score || 0, c = this.healthScoreChangeReports.at(-1)?.older_health_score || 0;
+      t = r - c, a(() => {
+        this.healthScore = e, this.healthScoreChange = t;
+      });
+    } catch (e) {
+      console.error("Error calculating health score:", e);
+    }
+  };
+  loadAverageHealthScores = async () => {
+    try {
+      const e = await this.api.getAverageHealthScores();
+      a(() => {
+        this.averageHealthScores = e;
+      });
+    } catch (e) {
+      console.error("Error loading average health scores:", e);
+    }
+  };
+  loadHealthScoreChangeReports = async () => {
+    const e = o(l(/* @__PURE__ */ new Date(), 2)), t = o(/* @__PURE__ */ new Date());
+    try {
+      const r = await this.api.getHealthScoreChangeReports(
+        e,
+        t
+      );
+      a(() => {
+        this.healthScoreChangeReports = r;
+      });
+    } catch (r) {
+      console.error("Error loading health score change reports:", r);
+    }
+  };
+  loadPeerScore = async () => {
+    const e = n(i(this.globalStore.appDataStore.user.birthday), "yyyy");
+    try {
+      const t = await this.api.getPeerScore(e);
+      a(() => {
+        this.peerScore = t;
+      });
+    } catch (t) {
+      console.error("Error loading peer score:", t);
+    }
+  };
+  loadAugmentedChartData = async () => {
+    try {
+      const e = await this.api.getAverageHealthScores();
+      a(() => {
+        this.augmentedChartData = g(e);
+      });
+    } catch (e) {
+      console.error(`Error occurred while getting augmented chart data: ${e}`);
+    }
+  };
+}
+export {
+  H as FinstrongStore
+};

package/dist/finstrong/util/finstrongUtils/index.es.js

@@ -0,0 +1,108 @@
+import { jsx as O } from "react/jsx-runtime";
+import { format as C } from "date-fns/format";
+import { Check as f } from "@mxenabled/mx-icons";
+import { Action as g } from "../../components/ProfileList/index.es.js";
+import { buildDynamicCopy as A } from "../../../common/utils/Localization/index.es.js";
+const P = (t) => t * (180 / Math.PI), b = (t, n) => [
+  {
+    description: n.vulnerable_description,
+    max: 25,
+    scoreContent: n.accordion_details_text.vulnerable,
+    status: n.vulnerable
+  },
+  {
+    description: n.building_description,
+    max: 50,
+    scoreContent: n.accordion_details_text.building,
+    status: n.building
+  },
+  {
+    description: n.stable_description,
+    max: 75,
+    scoreContent: n.accordion_details_text.stable,
+    status: n.stable
+  },
+  {
+    description: n.strong_description,
+    max: 100,
+    scoreContent: n.accordion_details_text.strong,
+    status: n.strong
+  }
+].find((i) => t > 0 && t <= i.max) || { status: n.insufficient_data, description: "", scoreContent: "" }, c = {
+  POOR: "#8C0E0E",
+  FAIR: "#E32727",
+  GOOD: "#FFB70D",
+  VERY_GOOD: "#0EA26C",
+  EXCEPTIONAL: "#005C3D"
+}, u = {
+  POOR: "#B21C1C",
+  FAIR: "#FF3232",
+  GOOD: "#FFC02C",
+  VERY_GOOD: "#29C76B",
+  EXCEPTIONAL: "#008A5A"
+}, I = (t, n, e) => t >= 300 && t < 580 ? {
+  status: e.poor,
+  color: n ? u.POOR : c.POOR
+} : t >= 580 && t < 670 ? {
+  status: e.fair,
+  color: n ? u.FAIR : c.FAIR
+} : t >= 670 && t < 740 ? {
+  status: e.good,
+  color: n ? u.GOOD : c.GOOD
+} : t >= 740 && t < 800 ? {
+  status: e.very_good,
+  color: n ? u.VERY_GOOD : c.VERY_GOOD
+} : t >= 800 && t <= 850 ? {
+  status: e.exceptional,
+  color: n ? u.EXCEPTIONAL : c.EXCEPTIONAL
+} : { status: e.missing_data }, G = (t, n, e, r) => {
+  const i = t.reduce((o, a) => o + a.value, 0);
+  let l = 0;
+  const s = t.map((o) => {
+    const a = o.value / i * n, d = e + l, m = d + a;
+    return l += a, {
+      ...o,
+      startAngle: d,
+      endAngle: m
+    };
+  });
+  return [s[r].startAngle, s[r].endAngle];
+}, T = (t, n, e, r, i) => {
+  let l = 0, s = 0;
+  const o = Math.floor(r), a = r - o;
+  return o > e ? (l = t, s = n) : o === e && a > 0 && (l = t, s = i), [l, s];
+}, M = (t, n, e = 0) => {
+  const r = t * Math.sin(n - e), i = -t * Math.cos(n - e);
+  return [r, i];
+}, X = ({
+  dynamicCopy: t,
+  fallbackLabel: n,
+  icon: e,
+  key: r,
+  label: i,
+  value: l
+}) => {
+  const s = !!l, o = s ? E(r, l) : t && A(t, n) || n;
+  return {
+    icon: s ? /* @__PURE__ */ O(f, {}) : e,
+    isComplete: s,
+    key: r,
+    primaryText: i,
+    secondaryText: o
+  };
+}, E = (t, n) => ({
+  [g.DateOfBirth]: (r) => C(new Date(Number(r) * 1e3), "MMM d, yyyy"),
+  [g.MonthlyIncome]: (r) => `$${r}`
+})[t]?.(n) ?? String(n), Y = (t) => t !== null ? Math.round(t * 100) : null;
+export {
+  u as CreditScoreDarkColors,
+  c as CreditScoreLightColors,
+  X as buildProfileItem,
+  b as calculateFinstrongScoreStatus,
+  I as getCreditScoreDetails,
+  T as getFilledArcStartEndAngle,
+  M as getMarkerXYCoordinates,
+  G as getOutterArcStartEndAngle,
+  Y as getPercentFromRatio,
+  P as radiansToDegrees
+};

package/dist/finstrong/utils/Finstrong/index.es.js

@@ -0,0 +1,13 @@
+import { formatDate as n, DATE_FORMATS_INTL as r } from "../../../common/constants/DateFormats/index.es.js";
+const s = (e) => e?.health_scores.map((t) => {
+  const o = t.monthly_health_score_average, a = new Date(0, o.month - 1, 1);
+  return {
+    x: n(a, r.MONTH_SHORT),
+    y: o.average_health_score,
+    month: o.month
+    // Keep original month for sorting
+  };
+}).sort((t, o) => t.month - o.month).map((t) => ({ x: t.x, y: t.y }));
+export {
+  s as augmentChartData
+};

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

@@ -0,0 +1,51 @@
+import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import r from "react";
+import { observer as C } from "mobx-react-lite";
+import G from "@mui/material/Stack/Stack";
+import A from "@mui/material/Divider";
+import { GoalMicroStatusCard as E } from "../components/micro/GoalMicroStatusCard/index.es.js";
+import { GoalsMicroEmptyState as L } from "../components/micro/GoalsMicroEmptyState/index.es.js";
+import { useAccountStore as T, useEvent as h, useGlobalCopyStore as b, useGlobalUiStore as y, useGoalStore as I } from "../../common/context/hooks/index.es.js";
+import { ANALYTICS_EVENTS as c } from "../../common/constants/Analytics/index.es.js";
+import v from "../../common/components/Loader/index.es.js";
+import x from "../../common/components/MicroWidgetContainer/index.es.js";
+const R = C(({ onCTAClick: d }) => {
+  const { visibleAccounts: l } = T(), { onEvent: n } = h(), { goals: o } = b(), { isInitialized: i, setSelectedAccounts: f, isCopyLoaded: p } = y(), { ongoingGoalsForMicroWidget: e, loadGoals: u, goalsLoaded: s } = I();
+  r.useEffect(() => {
+    f(l);
+  }, []), r.useEffect(() => {
+    i && (u().finally(), n(c.GOALS_LOAD_WIDGET, {
+      state: l?.length ? "default" : "zeroState"
+    }));
+  }, [i]);
+  const a = r.useMemo(
+    () => s && e.length === 0,
+    [e, s]
+  ), S = () => {
+    n(
+      a ? c.GOALS_CLICK_GET_STARTED : c.GOALS_CLICK_VIEW_DETAILS
+    ), d();
+  };
+  return !s || !p || !i ? /* @__PURE__ */ t(v, {}) : /* @__PURE__ */ t(
+    x,
+    {
+      className: "mx-goals-microwidget",
+      ctaLabel: a ? o.get_started : o.view_details,
+      onCTAClick: S,
+      title: o.title,
+      children: a ? /* @__PURE__ */ t(
+        L,
+        {
+          header: o.create_goals_header,
+          subText: o.micro_zero_state_description
+        }
+      ) : /* @__PURE__ */ t(G, { sx: { justifyContent: "space-between" }, children: e.map((m, g) => /* @__PURE__ */ _(r.Fragment, { children: [
+        /* @__PURE__ */ t(E, { goal: m }),
+        g !== e.length - 1 && /* @__PURE__ */ t(A, {})
+      ] }, m.guid)) })
+    }
+  );
+});
+export {
+  R as GoalsMicroWidget
+};