@mx-cartographer/experiences 9.2.4-alpha.al0 → 9.3.0-alpha.bb1

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

@@ -0,0 +1,136 @@
+import { useFinstrongStore as k, useGlobalCopyStore as w, useUserStore as S } from "../../../../common/context/hooks/index.es.js";
+import { useDimensions as C } from "../../../../common/hooks/useDimensions/index.es.js";
+import { EmptyState as T } from "../../../../common/components/EmptyState/index.es.js";
+import { LineChart as M } from "../../../../common/components/charts/LineChart/index.es.js";
+import { getCreditScoreDetails as O, getSeriesGraphData as L } from "../../../util/finstrongUtils/index.es.js";
+import "react";
+import { observer as z } from "mobx-react-lite";
+import A from "@mui/material/Stack";
+import { P as K } from "@mxenabled/mxui";
+import { jsx as s, jsxs as R } from "react/jsx-runtime";
+import { useTheme as D } from "@mui/material/styles";
+import G from "@mui/material/Card";
+var X = ({ chartFor: a }) => {
+  const i = D(), v = i.palette.mode === "dark", { monthlySummaries: c } = k(), { user: u } = S(), { finstrong: t } = w(), [b, { width: d }] = C(), n = {
+    savingsOverTime: {
+      icon: "trending_up",
+      title: t.key_indicators_save.zero_state_title,
+      description: t.key_indicators_save.zero_state_description
+    },
+    debtOverTime: {
+      icon: "multiline_chart",
+      title: t.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_line_chart_empty_state_header,
+      description: t.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_line_chart_empty_state_description
+    },
+    creditOverTime: {
+      icon: "credit_card",
+      title: t.credit_over_time_title,
+      description: t.credit_over_time_zero_state_desc
+    }
+  }[a], l = {
+    savingsOverTime: {
+      title: t.key_indicators_save.savings_over_time,
+      valueKey: "available_cash"
+    },
+    debtOverTime: {
+      title: t.key_indicators_borrow.have_manageable_debt_drawer.debt_over_time,
+      valueKey: "debt_balance"
+    },
+    creditOverTime: {
+      title: t.credit_over_time_title,
+      valueKey: "credit_score"
+    }
+  }[a], o = L(c, l.valueKey), _ = c.map((r) => r[l.valueKey]), p = Math.max(..._), f = Math.min(..._), h = () => p >= 1e6 ? {
+    formatter: "0.000a",
+    leftMargin: -7
+  } : p >= 1e3 ? {
+    formatter: "0a",
+    leftMargin: -27
+  } : {
+    formatter: "0a",
+    leftMargin: -32
+  }, { formatter: g, leftMargin: y } = h(), x = l.title, e = a === "creditOverTime";
+  let m;
+  if (e) {
+    const { color: r } = O(u?.credit_score ?? 0, v, t.credit_score_status);
+    m = r;
+  }
+  return /* @__PURE__ */ s(G, {
+    ref: b,
+    sx: { backgroundColor: "background.paper" },
+    children: o.some((r) => r.y !== 0) ? /* @__PURE__ */ R(A, {
+      gap: 8,
+      sx: { pl: 18 },
+      children: [/* @__PURE__ */ s(K, {
+        sx: {
+          pb: 8,
+          pt: 16
+        },
+        variant: "h3",
+        children: x
+      }), /* @__PURE__ */ s(M, {
+        areaColor: m,
+        axisColor: i.palette.divider,
+        baseline: "min",
+        chartFor: a,
+        colors: [i.palette.primary.main],
+        curveType: e ? "linear" : "monotoneX",
+        datasets: o ? [o] : [],
+        height: 244,
+        labelFontColor: e ? "text.primary" : "",
+        labelFontSize: e ? 13 : void 0,
+        labels: [t.key_indicators_label],
+        margin: {
+          left: y,
+          top: e ? 25 : 15,
+          right: 20
+        },
+        markStyles: (r) => e ? {
+          markLabelStyles: {
+            marginLeft: 16,
+            transform: r === o.length - 1 ? "translateX(-16px)" : "translateX(16px)",
+            fontWeight: 600,
+            fill: i.palette.text.primary
+          },
+          stroke: m
+        } : {},
+        maxRange: e ? 850 : void 0,
+        minRange: (() => {
+          if (e)
+            return f < 300 ? 0 : 300;
+        })(),
+        showArea: !0,
+        showAverage: !e,
+        showMark: !e,
+        showMarkLabel: e,
+        showXAxis: !0,
+        showYAxis: e,
+        showYAxisTicks: e,
+        useCustomMark: !0,
+        valueFormatterString: e ? void 0 : g,
+        width: d < 342 ? d - 48 : 342
+      })]
+    }) : /* @__PURE__ */ s(T, {
+      header: n.title,
+      icon: n.icon,
+      subText: n.description,
+      sx: {
+        backgroundColor: "background.paper",
+        borderRadius: "8px",
+        boxShadow: 1,
+        p: 24,
+        pb: 48,
+        ".empty-state-subtext": {
+          fontSize: 15,
+          lineHeight: "24px",
+          mt: 8
+        }
+      }
+    })
+  });
+}, J = z(X);
+export {
+  J as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/shared/LineGraph/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/LineGraph.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { EmptyState, useFinstrongStore, useGlobalCopyStore, useUserStore } from '../../../common'\nimport { type MonthlySummaries } from '../../../core'\nimport { LineChart } from '../../../common/components/charts/LineChart'\nimport { useDimensions } from '../../../common/hooks/useDimensions'\n\nimport { getSeriesGraphData, getCreditScoreDetails } from '../../util/finstrongUtils'\n\n// Define chart types\nexport type ChartType = 'savingsOverTime' | 'debtOverTime' | 'creditOverTime'\n\n// Configuration interface for chart properties\ninterface ChartConfig {\n  title: string\n  valueKey: keyof Pick<MonthlySummaries, 'available_cash' | 'debt_balance' | 'credit_score'>\n}\n\ninterface LineGraphProps {\n  chartFor: ChartType\n}\n\nconst LineGraph: React.FC<LineGraphProps> = ({ chartFor }) => {\n  const theme = useTheme()\n  const isDarkMode = theme.palette.mode === 'dark'\n\n  const { monthlySummaries } = useFinstrongStore()\n  const { user } = useUserStore()\n\n  const { finstrong: copy } = useGlobalCopyStore()\n  const [containerRef, { width }] = useDimensions()\n\n  const ZeroStateContent = {\n    savingsOverTime: {\n      icon: 'trending_up',\n      title: copy.key_indicators_save.zero_state_title,\n      description: copy.key_indicators_save.zero_state_description,\n    },\n    debtOverTime: {\n      icon: 'multiline_chart',\n      title:\n        copy.key_indicators_borrow.have_manageable_debt_drawer\n          .have_manageable_debt_line_chart_empty_state_header,\n      description:\n        copy.key_indicators_borrow.have_manageable_debt_drawer\n          .have_manageable_debt_line_chart_empty_state_description,\n    },\n    creditOverTime: {\n      icon: 'credit_card',\n      title: copy.credit_over_time_title,\n      description: copy.credit_over_time_zero_state_desc,\n    },\n  }[chartFor]\n\n  const chartConfigurations: Record<ChartType, ChartConfig> = {\n    savingsOverTime: {\n      title: copy.key_indicators_save.savings_over_time,\n      valueKey: 'available_cash',\n    },\n    debtOverTime: {\n      title: copy.key_indicators_borrow.have_manageable_debt_drawer.debt_over_time,\n      valueKey: 'debt_balance',\n    },\n    creditOverTime: {\n      title: copy.credit_over_time_title,\n      valueKey: 'credit_score',\n    },\n  }\n\n  // Get configuration for the current chart type\n  const config = chartConfigurations[chartFor]\n\n  const dataSet = getSeriesGraphData(monthlySummaries, config.valueKey)\n\n  const values = monthlySummaries.map((s) => s[config.valueKey])\n  const maxValue = Math.max(...values)\n  const minValue = Math.min(...values)\n\n  // Determine appropriate formatter and margin based on data range\n  const getFormatterConfig = () => {\n    if (maxValue >= 1000000) {\n      return { formatter: '0.000a', leftMargin: -7 } // For millions\n    } else if (maxValue >= 1000) {\n      return { formatter: '0a', leftMargin: -27 } // For thousands\n    } else {\n      return { formatter: '0a', leftMargin: -32 }\n    }\n  }\n\n  const { formatter, leftMargin } = getFormatterConfig()\n\n  const title = config.title\n\n  const isCreditOverTime = chartFor === 'creditOverTime'\n\n  let markerColor\n\n  if (isCreditOverTime) {\n    const { color } = getCreditScoreDetails(\n      user?.credit_score ?? 0,\n      isDarkMode,\n      copy.credit_score_status,\n    )\n    markerColor = color\n  }\n  const hasData = dataSet.some((item) => item.y !== 0)\n  return (\n    <Card ref={containerRef} sx={{ backgroundColor: 'background.paper' }}>\n      {hasData ? (\n        <Stack gap={8} sx={{ pl: 18 }}>\n          <P sx={{ pb: 8, pt: 16 }} variant=\"h3\">\n            {title}\n          </P>\n          <LineChart\n            areaColor={markerColor}\n            axisColor={theme.palette.divider}\n            baseline=\"min\"\n            chartFor={chartFor}\n            colors={[theme.palette.primary.main]}\n            curveType={isCreditOverTime ? 'linear' : 'monotoneX'}\n            datasets={dataSet ? [dataSet] : []}\n            height={244}\n            labelFontColor={isCreditOverTime ? 'text.primary' : ''}\n            labelFontSize={isCreditOverTime ? 13 : undefined}\n            labels={[copy.key_indicators_label]}\n            margin={{ left: leftMargin, top: isCreditOverTime ? 25 : 15, right: 20 }}\n            markStyles={(index) => {\n              if (isCreditOverTime) {\n                return {\n                  markLabelStyles: {\n                    marginLeft: 16,\n                    transform:\n                      index === dataSet.length - 1 ? 'translateX(-16px)' : 'translateX(16px)',\n                    fontWeight: 600,\n                    fill: theme.palette.text.primary,\n                  },\n                  stroke: markerColor!,\n                }\n              }\n              return {}\n            }}\n            maxRange={isCreditOverTime ? 850 : undefined}\n            minRange={(() => {\n              if (!isCreditOverTime) return undefined\n              return minValue < 300 ? 0 : 300\n            })()}\n            showArea={true}\n            showAverage={!isCreditOverTime}\n            showMark={!isCreditOverTime}\n            showMarkLabel={isCreditOverTime}\n            showXAxis={true}\n            showYAxis={isCreditOverTime}\n            showYAxisTicks={isCreditOverTime}\n            useCustomMark={true}\n            valueFormatterString={!isCreditOverTime ? formatter : undefined}\n            width={width < 342 ? width - 48 : 342}\n          />\n        </Stack>\n      ) : (\n        <EmptyState\n          header={ZeroStateContent.title}\n          icon={ZeroStateContent.icon}\n          subText={ZeroStateContent.description}\n          sx={{\n            backgroundColor: 'background.paper',\n            borderRadius: '8px',\n            boxShadow: 1,\n            p: 24,\n            pb: 48,\n            '.empty-state-subtext': {\n              fontSize: 15,\n              lineHeight: '24px',\n              mt: 8,\n            },\n          }}\n        />\n      )}\n    </Card>\n  )\n}\n\nexport default observer(LineGraph)\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/ScoreHistoryTimeline.tsx"],"sourcesContent":["import React from 'react'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { format } from 'date-fns/format'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon, P, Text } from '@mxenabled/mxui'\n\n// TODO : Import Timeline Components from core when they are available\nimport Timeline from '@mui/lab/Timeline'\nimport { timelineItemClasses } from '@mui/lab/TimelineItem'\n\nimport { useGlobalCopyStore } from '../../../common'\nimport { HealthScoreReport } from '../../../core'\n\nimport { getPercentFromRatio } from '../../util/finstrongUtils'\n\nimport ScoreHistoryTimelineItem from './ScoreHistoryTimelineItem'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface ScoreHistoryTimelineProps {\n  report: HealthScoreReport\n}\n\nconst ScoreHistoryTimeline: React.FC<ScoreHistoryTimelineProps> = ({ report }) => {\n  const { finstrong: copyContent } = useGlobalCopyStore()\n  const { score_history_drawer_timeline: timelineCopy } = copyContent\n\n  const {\n    health_score_point_difference: score,\n    newer_credit_score: newCreditScore,\n    older_credit_score: oldCreditScore,\n    older_spend_to_income_ratio: oldSpendToIncomeRatio,\n    newer_spend_to_income_ratio: newSpendToIncomeRatio,\n    older_health_score: oldHealthScore,\n    newer_health_score: newHealthScore,\n    newer_score_calculated_at: newScoreCalculatedAt,\n  } = report\n\n  const formattedDate = format(new Date(newScoreCalculatedAt), 'MMM d')\n\n  const getBackgroundColor = () => {\n    if (score === 0) return 'info.lighter'\n    return score > 0 ? 'success.lighter' : 'error.lighter'\n  }\n\n  const getMainContent = () => {\n    if (score === 0) {\n      return buildDynamicCopy(timelineCopy.stayed_at, oldHealthScore) as string\n    }\n    return score > 0 ? timelineCopy.less_spending : timelineCopy.more_spending\n  }\n\n  const getSubContent = () => {\n    if (score === 0) return null\n\n    const copyKey = score > 0 ? timelineCopy.up_from : timelineCopy.down_from\n    const text = buildDynamicCopy(copyKey, oldHealthScore, newHealthScore) as string\n\n    return (\n      <>\n        <Icon\n          fill={true}\n          name=\"circle\"\n          sx={{ color: 'text.secondary', fontSize: 8, mx: 4, p: 1 }}\n        />\n        {text}\n      </>\n    )\n  }\n\n  return (\n    <Card>\n      <Box\n        sx={{\n          borderBottomColor: 'divider',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: score !== 0 ? 1 : 0,\n          p: 16,\n        }}\n      >\n        <Stack\n          flexDirection=\"row\"\n          sx={{ alignItems: 'center', gap: 16, height: 48, width: '100%' }}\n        >\n          <Stack\n            sx={{\n              alignItems: 'center',\n              backgroundColor: getBackgroundColor(),\n              borderRadius: 999,\n              height: 48,\n              justifyContent: 'center',\n              width: 48,\n            }}\n          >\n            <P sx={{ fontWeight: 600 }} variant=\"body1\">\n              {score > 0 ? `+${score}` : score}\n            </P>\n          </Stack>\n          <Stack sx={{ gap: 2, width: '80%' }}>\n            <Text fontWeight={600} variant=\"body1\">\n              {getMainContent()}\n            </Text>\n            <Text sx={{ color: 'text.secondary' }} variant=\"subtitle2\">\n              {formattedDate} {getSubContent()}\n            </Text>\n          </Stack>\n        </Stack>\n      </Box>\n      {score !== 0 && (\n        <Box sx={{ color: 'text.secondary', pb: 8, pl: 32, pr: 16, pt: 12 }}>\n          <Timeline\n            sx={{\n              [`& .${timelineItemClasses.root}:before`]: {\n                flex: 0,\n                padding: 0,\n              },\n              m: 0,\n              p: 0,\n            }}\n          >\n            <ScoreHistoryTimelineItem\n              content={\n                buildDynamicCopy(\n                  timelineCopy.spend_to_income_description,\n                  getPercentFromRatio(oldSpendToIncomeRatio),\n                  getPercentFromRatio(newSpendToIncomeRatio),\n                ) as string\n              }\n            />\n            <ScoreHistoryTimelineItem\n              content={\n                buildDynamicCopy(\n                  timelineCopy.credit_score_description,\n                  oldCreditScore,\n                  newCreditScore,\n                ) as string\n              }\n              islast={true}\n            />\n          </Timeline>\n        </Box>\n      )}\n    </Card>\n  )\n}\n\nexport default observer(ScoreHistoryTimeline)\n"],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+import "react";
+import { P as t } from "@mxenabled/mxui";
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import m from "@mui/lab/TimelineItem";
+import n from "@mui/lab/TimelineConnector";
+import l from "@mui/lab/TimelineContent";
+import p from "@mui/lab/TimelineDot";
+import d from "@mui/lab/TimelineSeparator";
+var u = ({ content: e, islast: i = !1 }) => /* @__PURE__ */ o(m, {
+  sx: { minHeight: 0 },
+  children: [/* @__PURE__ */ o(d, { children: [/* @__PURE__ */ r(p, { sx: {
+    bgcolor: "divider",
+    boxShadow: "none",
+    p: 2
+  } }), !i && /* @__PURE__ */ r(n, { sx: {
+    bgcolor: "background.paper",
+    borderLeft: "1px solid",
+    borderColor: "divider",
+    borderRadius: 1,
+    m: -4
+  } })] }), /* @__PURE__ */ r(l, {
+    sx: {
+      pb: 16,
+      pl: 12,
+      pr: 0,
+      pt: 5
+    },
+    children: /* @__PURE__ */ r(t, {
+      fontSize: 13,
+      fontWeight: 400,
+      variant: "subtitle2",
+      children: e
+    })
+  })]
+});
+export {
+  u as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/ScoreHistoryTimelineItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { P } from '@mxenabled/mxui'\n\n// TODO : Import Timeline Components from core when they are available\nimport TimelineConnector from '@mui/lab/TimelineConnector'\nimport TimelineContent from '@mui/lab/TimelineContent'\nimport TimelineDot from '@mui/lab/TimelineDot'\nimport TimelineSeparator from '@mui/lab/TimelineSeparator'\nimport TimelineItem from '@mui/lab/TimelineItem'\n\ninterface ScoreHistoryTimelineItemProps {\n  content?: string\n  islast?: boolean\n}\n\nconst ScoreHistoryTimelineItem: React.FC<ScoreHistoryTimelineItemProps> = ({\n  content,\n  islast = false,\n}) => {\n  return (\n    <TimelineItem sx={{ minHeight: 0 }}>\n      <TimelineSeparator>\n        <TimelineDot sx={{ bgcolor: 'divider', boxShadow: 'none', p: 2 }} />\n        {!islast && (\n          <TimelineConnector\n            sx={{\n              bgcolor: 'background.paper',\n              borderLeft: '1px solid',\n              borderColor: 'divider',\n              borderRadius: 1,\n              m: -4,\n            }}\n          />\n        )}\n      </TimelineSeparator>\n      <TimelineContent sx={{ pb: 16, pl: 12, pr: 0, pt: 5 }}>\n        <P fontSize={13} fontWeight={400} variant=\"subtitle2\">\n          {content}\n        </P>\n      </TimelineContent>\n    </TimelineItem>\n  )\n}\n\nexport default ScoreHistoryTimelineItem\n"],"mappings":";;;;;;;;AAgBA,IAAM,IAAA,CAAqE,EACzE,SAAA,GACA,QAAA,IAAS,GAAA,MAGP,gBAAA,EAAC,GAAD;AAAA,EAAc,IAAI,EAAE,WAAW,EAAE;AAAA,YAAjC,CACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAa,IAAI;AAAA,IAAE,SAAS;AAAA,IAAW,WAAW;AAAA,IAAQ,GAAG;AAAA,EAAE,EAAI,CAAA,GAClE,CAAC,KACA,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,cAAc;AAAA,IACd,GAAG;AAAA,EACL,EACD,CAAA,CAEc,EAAA,CAAA,GACnB,gBAAA,EAAC,GAAD;AAAA,IAAiB,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,MAAG,IAAI;AAAA,IAAE;AAAA,cAClD,gBAAA,EAAC,GAAD;AAAA,MAAG,UAAU;AAAA,MAAI,YAAY;AAAA,MAAK,SAAQ;AAAA,gBACvC;AAAA,IACA,CAAA;AAAA,EACY,CAAA,CACL"}

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

@@ -0,0 +1,30 @@
+import { formatCurrency as n } from "../../../../core/utils/NumberFormatting/index.es.js";
+import "react";
+import a from "@mui/material/Stack";
+import { P as t } from "@mxenabled/mxui";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+var p = ({ balance: r, title: e, sx: i }) => /* @__PURE__ */ m(a, {
+  sx: {
+    alignItems: "center",
+    backgroundColor: "background.default",
+    borderRadius: 2,
+    height: 72,
+    justifyContent: "center",
+    p: 12,
+    ...i
+  },
+  children: [typeof r == "number" ? /* @__PURE__ */ o(t, {
+    variant: "h2",
+    children: n(r, "0,0.00")
+  }) : r, /* @__PURE__ */ o(t, {
+    color: "text.secondary",
+    fontWeight: "400",
+    variant: "subtitle2",
+    children: e
+  })]
+});
+export {
+  p as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/shared/TotalCard/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/TotalCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface TotalCardProps {\n  balance: number | React.ReactNode\n  title: string\n  sx?: object\n}\n\nconst TotalCard: React.FC<TotalCardProps> = ({ balance, title, sx }) => {\n  return (\n    <Stack\n      sx={{\n        alignItems: 'center',\n        backgroundColor: 'background.default',\n        borderRadius: 2,\n        height: 72,\n        justifyContent: 'center',\n        p: 12,\n        ...sx,\n      }}\n    >\n      {typeof balance === 'number' ? (\n        <P variant=\"h2\">{formatCurrency(balance, '0,0.00')}</P>\n      ) : (\n        balance\n      )}\n\n      <P color=\"text.secondary\" fontWeight=\"400\" variant=\"subtitle2\">\n        {title}\n      </P>\n    </Stack>\n  )\n}\n\nexport default TotalCard\n"],"mappings":";;;;;AAcA,IAAM,IAAA,CAAuC,EAAE,SAAA,GAAS,OAAA,GAAO,IAAA,EAAA,MAE3D,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,YATF,CAWG,OAAO,KAAY,WAClB,gBAAA,EAAC,GAAD;AAAA,IAAG,SAAQ;AAAA,cAAM,EAAe,GAAS,QAAQ;AAAA,EAAK,CAAA,IAEtD,GAGF,gBAAA,EAAC,GAAD;AAAA,IAAG,OAAM;AAAA,IAAiB,YAAW;AAAA,IAAM,SAAQ;AAAA,cAChD;AAAA,EACA,CAAA,CACE"}

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

@@ -0,0 +1,129 @@
+import { useCategoryStore as T, useGlobalCopyStore as A } from "../../../../common/context/hooks/index.es.js";
+import j from "../../../../common/components/drawer/Drawer/index.es.js";
+import { formatCurrency as z } from "../../../../core/utils/NumberFormatting/index.es.js";
+import { fromUnixToDayOfWeekAndDate as B } from "../../../../core/utils/DateUtil/index.es.js";
+import G from "../../../../common/components/ConnectDrawer/index.es.js";
+import M from "../../../../transactions/components/shared/TransactionList/index.es.js";
+import _ from "react";
+import i from "@mui/material/Stack";
+import { MerchantLogo as R, P as f, Text as c } from "@mxenabled/mxui";
+import b from "@mui/material/Button";
+import { ChevronRight as $ } from "@mxenabled/mx-icons";
+import { Fragment as y, jsx as e, jsxs as o } from "react/jsx-runtime";
+import { useTheme as L } from "@mui/material/styles";
+import d from "@mui/material/Box";
+var Z = ({ transactions: r = [], amountColor: x = "success.main", amountPosition: v = "center", formatDate: C = B, secondaryIcon: s }) => {
+  const m = L(), { connect: w, finstrong: l, categories: k } = A(), [D, p] = _.useState(!1), [S, h] = _.useState(!1), { getCategoryName: I } = T(), a = 3, g = r.length > a, O = r.length - a;
+  let u = r;
+  return g && (u = r.map((t) => ({
+    ...t,
+    category: k.default_categories[t.top_level_category_guid]?.replace(/&/g, "&") ?? I(t.top_level_category_guid)
+  })).sort((t, n) => n.date - t.date)), !r || r.length === 0 ? /* @__PURE__ */ o(y, { children: [/* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(b, {
+    onClick: () => h(!0),
+    size: "small",
+    sx: {
+      my: 0,
+      px: 16,
+      py: 12,
+      width: "100%"
+    },
+    variant: "contained",
+    children: /* @__PURE__ */ e(c, {
+      bold: !0,
+      variant: "body1",
+      children: l.connect_more_accounts_button
+    })
+  }) }), /* @__PURE__ */ e(G, {
+    onClose: () => h(!1),
+    showConnectWidget: S,
+    title: w.mini_title
+  })] }) : /* @__PURE__ */ o(i, {
+    sx: { gap: 16 },
+    children: [/* @__PURE__ */ e(d, {
+      sx: {
+        border: `1px solid ${m.palette.divider}`,
+        borderRadius: 2
+      },
+      children: r.slice(0, a).sort((t, n) => n.date - t.date).map((t, n) => /* @__PURE__ */ o(i, {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 16,
+          pl: 24,
+          pt: 14
+        },
+        children: [/* @__PURE__ */ e(i, {
+          sx: { pb: 14 },
+          children: /* @__PURE__ */ e(R, {
+            categoryGuid: t.top_level_category_guid || "",
+            merchantGuid: t.merchant_guid || "",
+            size: 32
+          })
+        }), /* @__PURE__ */ o(i, {
+          sx: {
+            alignItems: v,
+            flexDirection: "row",
+            gap: 12,
+            justifyContent: "space-between",
+            ...n < Math.min(r.length, a) - 1 && { borderBottom: `1px solid ${m.palette.divider}` },
+            pb: 13,
+            pr: 24,
+            width: "100%"
+          },
+          children: [/* @__PURE__ */ o(i, { children: [/* @__PURE__ */ e(f, {
+            bold: !0,
+            variant: "body1",
+            children: t.description
+          }), /* @__PURE__ */ o(i, {
+            sx: {
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 4
+            },
+            children: [!!s && s, /* @__PURE__ */ e(c, {
+              variant: "caption",
+              children: C(t.date)
+            })]
+          })] }), /* @__PURE__ */ e(f, {
+            bold: !0,
+            sx: {
+              color: x,
+              flexShrink: 0
+            },
+            variant: "body1",
+            children: z(t.amount, "0,0.00")
+          })]
+        }, t.guid || n)]
+      }, n))
+    }), g && /* @__PURE__ */ o(y, { children: [/* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(b, {
+      endIcon: /* @__PURE__ */ e($, {}),
+      onClick: () => p(!0),
+      size: "small",
+      sx: {
+        my: 0,
+        px: 16,
+        py: 12,
+        width: "100%"
+      },
+      children: /* @__PURE__ */ o(c, {
+        bold: !0,
+        variant: "body1",
+        children: [
+          O,
+          " ",
+          l.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_more_transactions
+        ]
+      })
+    }) }), /* @__PURE__ */ e(j, {
+      isOpen: D,
+      onClose: () => p(!1),
+      title: l.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_transactions,
+      children: /* @__PURE__ */ e(M, { transaction: u })
+    })] })]
+  });
+};
+export {
+  Z as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/shared/Transactions/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/Transactions.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { ConnectDrawer, Drawer, useCategoryStore, useGlobalCopyStore } from '../../../common'\nimport { Transaction } from '../../../core'\nimport { fromUnixToDayOfWeekAndDate } from '../../../core/utils/DateUtil'\nimport { TransactionList } from '../../../transactions'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface TransactionsProps {\n  transactions: Transaction[]\n  amountColor?: string\n  amountPosition?: 'flex-start' | 'center' | 'flex-end'\n  formatDate?: (date: number) => string\n  secondaryIcon?: React.ReactNode\n}\n\nconst Transactions: React.FC<TransactionsProps> = ({\n  transactions = [],\n  amountColor = 'success.main',\n  amountPosition = 'center',\n  formatDate = fromUnixToDayOfWeekAndDate,\n  secondaryIcon,\n}) => {\n  const theme = useTheme()\n  const { connect: connectCopy, finstrong: copy, categories: categoryCopy } = useGlobalCopyStore()\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [isConnectAccountsOpen, setIsConnectAccountsOpen] = React.useState(false)\n  const { getCategoryName } = useCategoryStore()\n\n  const maxVisible = 3\n  const hasMoreTransactions = transactions.length > maxVisible\n  const remainingCount = transactions.length - maxVisible\n\n  let updatedTransactions = transactions\n  if (hasMoreTransactions) {\n    updatedTransactions = transactions\n      .map((eachTransaction) => {\n        return {\n          ...eachTransaction,\n          category:\n            categoryCopy.default_categories[eachTransaction.top_level_category_guid!]?.replace(\n              /&amp;/g,\n              '&',\n            ) ?? getCategoryName(eachTransaction.top_level_category_guid!),\n        }\n      })\n      .sort((a, b) => b.date - a.date)\n  }\n  if (!transactions || transactions.length === 0) {\n    return (\n      <>\n        <Box>\n          <Button\n            onClick={() => setIsConnectAccountsOpen(true)}\n            size=\"small\"\n            sx={{ my: 0, px: 16, py: 12, width: '100%' }}\n            variant=\"contained\"\n          >\n            <Text bold={true} variant=\"body1\">\n              {copy.connect_more_accounts_button}\n            </Text>\n          </Button>\n        </Box>\n        <ConnectDrawer\n          onClose={() => setIsConnectAccountsOpen(false)}\n          showConnectWidget={isConnectAccountsOpen}\n          title={connectCopy.mini_title}\n        />\n      </>\n    )\n  }\n\n  return (\n    <Stack sx={{ gap: 16 }}>\n      <Box sx={{ border: `1px solid ${theme.palette.divider}`, borderRadius: 2 }}>\n        {transactions\n          .slice(0, maxVisible)\n          .sort((a, b) => b.date - a.date)\n          .map((item, index) => (\n            <Stack\n              key={index}\n              sx={{\n                alignItems: 'center',\n                flexDirection: 'row',\n                gap: 16,\n                pl: 24,\n                pt: 14,\n              }}\n            >\n              <Stack sx={{ pb: 14 }}>\n                <MerchantLogo\n                  categoryGuid={item.top_level_category_guid || ''}\n                  merchantGuid={item.merchant_guid || ''}\n                  size={32}\n                />\n              </Stack>\n              <Stack\n                key={item.guid || index}\n                sx={{\n                  alignItems: amountPosition,\n                  flexDirection: 'row',\n                  gap: 12,\n                  justifyContent: 'space-between',\n                  ...(index < Math.min(transactions.length, maxVisible) - 1 && {\n                    borderBottom: `1px solid ${theme.palette.divider}`,\n                  }),\n                  pb: 13,\n                  pr: 24,\n                  width: '100%',\n                }}\n              >\n                <Stack>\n                  <P bold={true} variant=\"body1\">\n                    {item.description}\n                  </P>\n                  <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>\n                    {!!secondaryIcon && secondaryIcon}\n                    <Text variant=\"caption\">{formatDate(item.date)}</Text>\n                  </Stack>\n                </Stack>\n\n                <P bold={true} sx={{ color: amountColor, flexShrink: 0 }} variant=\"body1\">\n                  {formatCurrency(item.amount, '0,0.00')}\n                </P>\n              </Stack>\n            </Stack>\n          ))}\n      </Box>\n\n      {hasMoreTransactions && (\n        <>\n          <Box>\n            <Button\n              endIcon={<ChevronRight />}\n              onClick={() => setIsOpen(true)}\n              size=\"small\"\n              sx={{ my: 0, px: 16, py: 12, width: '100%' }}\n            >\n              <Text bold={true} variant=\"body1\">\n                {remainingCount}&nbsp;\n                {\n                  copy.key_indicators_borrow.have_manageable_debt_drawer\n                    .have_manageable_debt_more_transactions\n                }\n              </Text>\n            </Button>\n          </Box>\n          <Drawer\n            isOpen={isOpen}\n            onClose={() => setIsOpen(false)}\n            title={\n              copy.key_indicators_borrow.have_manageable_debt_drawer\n                .have_manageable_debt_transactions\n            }\n          >\n            <TransactionList transaction={updatedTransactions} />\n          </Drawer>\n        </>\n      )}\n    </Stack>\n  )\n}\n\nexport default Transactions\n"],"mappings":"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"}

package/dist/finstrong/constants/index/index.es.js

@@ -0,0 +1,9 @@
+var e = /* @__PURE__ */ (function(n) {
+  return n.SpendLessThanYouMake = "spendLessThanYouMake", n.PayBillsOnTime = "payBillsOnTime", n.SaveEnoughToLiveOn = "saveEnoughToLiveOn", n.MaintainEmergencySavings = "maintainEmergencySavings", n.HaveManageableDebt = "haveManageableDebt", n.HaveAGoodCreditScore = "haveAGoodCreditScore", n;
+})({}), a = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_animation_final.gif";
+export {
+  a as CALCULATING_ANIMATION_URL,
+  e as KeyIndicatorsTabItemType
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/constants/index/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/constants/index.ts"],"sourcesContent":["export enum KeyIndicatorsTabItemType {\n  SpendLessThanYouMake = 'spendLessThanYouMake',\n  PayBillsOnTime = 'payBillsOnTime',\n  SaveEnoughToLiveOn = 'saveEnoughToLiveOn',\n  MaintainEmergencySavings = 'maintainEmergencySavings',\n  HaveManageableDebt = 'haveManageableDebt',\n  HaveAGoodCreditScore = 'haveAGoodCreditScore',\n}\n\nexport const CALCULATING_ANIMATION_URL =\n  'https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_animation_final.gif'\n"],"mappings":"AAAA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,uBAAA,wBACA,EAAA,iBAAA,kBACA,EAAA,qBAAA,sBACA,EAAA,2BAAA,4BACA,EAAA,qBAAA,sBACA,EAAA,uBAAA;AACF,GAAA,CAAA,CAAA,GAEa,IACX"}