@mx-cartographer/experiences 9.3.0-alpha.bb1 → 9.3.0-alpha.bb2

package/dist/finstrong/components/KeyIndicatorsTabItem.es.js

@@ -0,0 +1,65 @@
+import { useGlobalCopyStore as m } from "../../common/context/hooks.es.js";
+import f from "./StatusChip.es.js";
+import u from "./KeyIndicatorsTabItemDrawer.es.js";
+import y from "react";
+import n from "@mui/material/Stack";
+import { P as h, Text as x } from "@mxenabled/mxui";
+import { ChevronRight as b } from "@mxenabled/mx-icons";
+import { Fragment as I, jsx as e, jsxs as r } from "react/jsx-runtime";
+var j = ({ drawerFor: a, title: i, description: s, cardState: l = "MISSING" }) => {
+  const { finstrong: c } = m(), [p, o] = y.useState(!1), d = (t) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o(!0));
+  };
+  return /* @__PURE__ */ r(I, { children: [/* @__PURE__ */ r(n, {
+    "aria-label": `${c.key_indicators_open} ${i}`,
+    onClick: () => o(!0),
+    onKeyDown: d,
+    role: "button",
+    sx: {
+      alignItems: "center",
+      borderRadius: 2,
+      cursor: "pointer",
+      flexDirection: "row",
+      gap: 12,
+      justifyContent: "space-between",
+      outline: "1px solid",
+      outlineColor: "divider",
+      p: 16
+    },
+    tabIndex: 0,
+    children: [/* @__PURE__ */ r(n, {
+      sx: {
+        gap: 8,
+        minWidth: 0
+      },
+      children: [/* @__PURE__ */ r(n, {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 8
+        },
+        children: [/* @__PURE__ */ e(x, {
+          sx: { fontWeight: 600 },
+          variant: "body1",
+          children: i
+        }), /* @__PURE__ */ e(f, { status: l })]
+      }), /* @__PURE__ */ e(h, {
+        color: "secondary",
+        variant: "subtitle2",
+        children: s
+      })]
+    }), /* @__PURE__ */ e(b, {
+      color: "secondary",
+      size: 24
+    })]
+  }), /* @__PURE__ */ e(u, {
+    drawerFor: a,
+    isOpen: p,
+    onClose: () => o(!1)
+  })] });
+};
+export {
+  j as default
+};
+
+//# sourceMappingURL=KeyIndicatorsTabItem.es.js.map

package/dist/finstrong/components/KeyIndicatorsTabItem.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyIndicatorsTabItem.es.js","names":[],"sources":["../../../src/finstrong/components/KeyIndicatorsTabItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { P, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { useGlobalCopyStore } from '../../common'\nimport type { CardStatus } from '../../common/constants/FinStrong'\n\nimport { KeyIndicatorsTabItemType } from '../constants'\n\nimport KeyIndicatorsTabItemDrawer from './KeyIndicatorsTabItemDrawer'\nimport StatusChip from './StatusChip'\n\ninterface KeyIndicatorsTabsItemProps {\n  drawerFor: KeyIndicatorsTabItemType\n  title: string\n  description: string\n  cardState: keyof typeof CardStatus\n}\n\nconst KeyIndicatorsTabsItem: React.FC<KeyIndicatorsTabsItemProps> = ({\n  drawerFor,\n  title,\n  description,\n  cardState = 'MISSING',\n}) => {\n  const { finstrong: copyContent } = useGlobalCopyStore()\n\n  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false)\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      setIsDrawerOpen(true)\n    }\n  }\n\n  return (\n    <>\n      <Stack\n        aria-label={`${copyContent.key_indicators_open} ${title}`}\n        onClick={() => setIsDrawerOpen(true)}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        sx={{\n          alignItems: 'center',\n          borderRadius: 2,\n          cursor: 'pointer',\n          flexDirection: 'row',\n          gap: 12,\n          justifyContent: 'space-between',\n          outline: '1px solid',\n          outlineColor: 'divider',\n          p: 16,\n        }}\n        tabIndex={0}\n      >\n        <Stack sx={{ gap: 8, minWidth: 0 }}>\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n            <Text sx={{ fontWeight: 600 }} variant=\"body1\">\n              {title}\n            </Text>\n            <StatusChip status={cardState} />\n          </Stack>\n          <P color=\"secondary\" variant=\"subtitle2\">\n            {description}\n          </P>\n        </Stack>\n        <ChevronRight color=\"secondary\" size={24} />\n      </Stack>\n      <KeyIndicatorsTabItemDrawer\n        drawerFor={drawerFor}\n        isOpen={isDrawerOpen}\n        onClose={() => setIsDrawerOpen(false)}\n      />\n    </>\n  )\n}\n\nexport default KeyIndicatorsTabsItem\n"],"mappings":";;;;;;;;AAsBA,IAAM,IAAA,CAA+D,EACnE,WAAA,GACA,OAAA,GACA,aAAA,GACA,WAAA,IAAY,UAAA,MACR;AACJ,QAAM,EAAE,WAAW,EAAA,IAAgB,EAAmB,GAEhD,CAAC,GAAc,CAAA,IAAmB,EAAM,SAAS,EAAK,GAEtD,IAAA,CAAiB,MAA+B;AACpD,KAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,EAAgB,EAAI;AAAA,EAExB;AAEA,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,cAAY,GAAG,EAAY,mBAAA,IAAuB,CAAA;AAAA,IAClD,SAAA,MAAe,EAAgB,EAAI;AAAA,IACnC,WAAW;AAAA,IACX,MAAK;AAAA,IACL,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,cAAc;AAAA,MACd,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,cAhBZ,CAkBE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,KAAK;AAAA,QAAG,UAAU;AAAA,MAAE;AAAA,gBAAjC,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,eAAe;AAAA,UAAO,KAAK;AAAA,QAAE;AAAA,kBAAhE,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,YAAY,IAAI;AAAA,UAAG,SAAQ;AAAA,oBACpC;AAAA,QACG,CAAA,GACN,gBAAA,EAAC,GAAD,EAAY,QAAQ,EAAY,CAAA,CAC3B;AAAA,UACP,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAM;AAAA,QAAY,SAAQ;AAAA,kBAC1B;AAAA,MACA,CAAA,CACE;AAAA,QACP,gBAAA,EAAC,GAAD;AAAA,MAAc,OAAM;AAAA,MAAY,MAAM;AAAA,IAAK,CAAA,CACtC;AAAA,MACP,gBAAA,EAAC,GAAD;AAAA,IACa,WAAA;AAAA,IACX,QAAQ;AAAA,IACR,SAAA,MAAe,EAAgB,EAAK;AAAA,EACrC,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/finstrong/components/KeyIndicatorsTabItemDrawer.es.js

@@ -0,0 +1,93 @@
+import { useGlobalCopyStore as i } from "../../common/context/hooks.es.js";
+import c from "./CreditScore/CreditScoreContent.es.js";
+import _ from "./CreditScore/CreditScoreHeader.es.js";
+import s from "./KeyIndicatorsDrawer.es.js";
+import d from "./MaintainingEmergencySavings/MaintainingEmergencySavingsContent.es.js";
+import l from "./MaintainingEmergencySavings/MaintainingEmergencySavingsSticky.es.js";
+import p from "./paybillsontime/PayBillsOnTimeDrawerComponent.es.js";
+import m from "./paybillsontime/PayBillsOnTimeStickyComponent.es.js";
+import u from "./SaveEnoughToLiveOn/SaveEnoughToLiveOnDrawerContent.es.js";
+import y from "./SaveEnoughToLiveOn/SaveEnoughToLiveOnProgressBar.es.js";
+import f from "./HaveManageableDebt/HaveManageableDebtProgressBar.es.js";
+import g from "./HaveManageableDebt/HaveManageableDebtComponent.es.js";
+import k from "./SpendLessThanYouMake/SpendLessThanYouMakeProgressBar.es.js";
+import w from "./SpendLessThanYouMake/SpendLessThanYouMakeComponent.es.js";
+import { observer as v } from "mobx-react-lite";
+import T from "@mui/material/Stack";
+import { jsx as n } from "react/jsx-runtime";
+var b = ({ drawerFor: o, isOpen: r, onClose: a }) => {
+  const { finstrong: e } = i(), t = {
+    spendLessThanYouMake: {
+      title: e.key_indicators_spend.spend_less_than_you_make_drawer.spend_less_than_you_make_title,
+      description: e.key_indicators_spend.spend_less_than_you_make_drawer.spend_less_than_you_make_description,
+      stickyComponent: /* @__PURE__ */ n(k, {}),
+      content: /* @__PURE__ */ n(w, {}),
+      drawerType: "connectDrawer",
+      connectTitle: e.connect_your_accounts,
+      connectDescription: e.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances
+    },
+    payBillsOnTime: {
+      title: e.key_indicators_spend.pay_bills_on_time_drawer.pay_bills_on_time_title,
+      description: e.key_indicators_spend.pay_bills_on_time_drawer.pay_bills_on_time_description,
+      stickyComponent: /* @__PURE__ */ n(m, {}),
+      content: /* @__PURE__ */ n(p, {}),
+      drawerType: "connectDrawer",
+      connectTitle: e.connect_your_accounts,
+      connectDescription: e.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances
+    },
+    maintainEmergencySavings: {
+      content: /* @__PURE__ */ n(d, {}),
+      description: e.maintain_emergency_savings_description,
+      stickyComponent: /* @__PURE__ */ n(l, {}),
+      title: e.maintain_emergency_savings_title,
+      drawerType: "connectDrawer",
+      connectTitle: e.connect_your_accounts,
+      connectDescription: e.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances
+    },
+    haveManageableDebt: {
+      title: e.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_title,
+      description: e.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_description,
+      stickyComponent: /* @__PURE__ */ n(f, {}),
+      content: /* @__PURE__ */ n(g, {}),
+      drawerType: "connectDrawer",
+      connectTitle: e.dont_see_all_your_accounts,
+      connectDescription: e.connect_more_accounts_to_view_more_accurate_financial_picture
+    },
+    haveAGoodCreditScore: {
+      title: /* @__PURE__ */ n(_, {}),
+      description: e.credit_score_description,
+      stickyComponent: null,
+      content: /* @__PURE__ */ n(c, {})
+    },
+    saveEnoughToLiveOn: {
+      title: e.key_indicators_save.drawer_title,
+      description: e.key_indicators_save.drawer_description,
+      stickyComponent: /* @__PURE__ */ n(y, {}),
+      content: /* @__PURE__ */ n(u, {}),
+      drawerType: "connectDrawer",
+      connectTitle: e.dont_see_all_your_accounts,
+      connectDescription: e.connect_more_accounts_to_view_more_accurate_financial_picture
+    }
+  }[o];
+  return /* @__PURE__ */ n(s, {
+    connectDescription: t?.connectDescription,
+    connectTitle: t?.connectTitle,
+    description: t?.description,
+    drawerTitle: e.key_indicators,
+    drawerType: t.drawerType,
+    isOpen: r,
+    loadConnectAccountsCard: !0,
+    onClose: a,
+    stickyComponent: t.stickyComponent,
+    title: t.title,
+    children: /* @__PURE__ */ n(T, {
+      sx: { gap: 16 },
+      children: t.content
+    })
+  });
+}, j = v(b);
+export {
+  j as default
+};
+
+//# sourceMappingURL=KeyIndicatorsTabItemDrawer.es.js.map

package/dist/finstrong/components/KeyIndicatorsTabItemDrawer.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyIndicatorsTabItemDrawer.es.js","names":[],"sources":["../../../src/finstrong/components/KeyIndicatorsTabItemDrawer.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useGlobalCopyStore } from '../../common'\nimport { KeyIndicatorsTabItemType } from '../constants'\n\nimport CreditScoreContent from './CreditScore/CreditScoreContent'\nimport CreditScoreHeader from './CreditScore/CreditScoreHeader'\nimport KeyIndicatorsDrawer from './KeyIndicatorsDrawer'\nimport MaintainingEmergencySavingsContent from './MaintainingEmergencySavings/MaintainingEmergencySavingsContent'\nimport MaintainingEmergencySavingsSticky from './MaintainingEmergencySavings/MaintainingEmergencySavingsSticky'\nimport PayBillsOnTimeDrawerComponent from './paybillsontime/PayBillsOnTimeDrawerComponent'\nimport PayBillsOnTimeStickyComponent from './paybillsontime/PayBillsOnTimeStickyComponent'\nimport SaveEnoughToLiveOnDrawerContent from './SaveEnoughToLiveOn/SaveEnoughToLiveOnDrawerContent'\nimport SaveEnoughToLiveOnProgressBar from './SaveEnoughToLiveOn/SaveEnoughToLiveOnProgressBar'\nimport HaveManageableDebtProgressBar from './HaveManageableDebt/HaveManageableDebtProgressBar'\nimport HaveManageableDebtComponent from './HaveManageableDebt/HaveManageableDebtComponent'\nimport SpendLessThanYouMakeProgressBar from './SpendLessThanYouMake/SpendLessThanYouMakeProgressBar'\nimport SpendLessThanYouMakeComponent from './SpendLessThanYouMake/SpendLessThanYouMakeComponent'\n\ninterface KeyIndicatorsTabItemDrawerProps {\n  drawerFor: KeyIndicatorsTabItemType\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst KeyIndicatorsTabItemDrawer = ({\n  drawerFor,\n  isOpen,\n  onClose,\n}: KeyIndicatorsTabItemDrawerProps) => {\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  //TODO : When the Drawer for key indicators other than Save Enough To Live On are implemented,\n  // add their respective content, titles, descriptions, and sticky components here.\n  const contentMapping: Record<\n    KeyIndicatorsTabItemType,\n    {\n      connectTitle?: string\n      connectDescription?: string\n      title: React.ReactNode\n      description: string\n      stickyComponent: React.ReactNode\n      content: React.ReactNode\n      drawerType?: 'connectDrawer' | 'connectionsDrawer'\n    }\n  > = {\n    spendLessThanYouMake: {\n      title:\n        copy.key_indicators_spend.spend_less_than_you_make_drawer.spend_less_than_you_make_title,\n      description:\n        copy.key_indicators_spend.spend_less_than_you_make_drawer\n          .spend_less_than_you_make_description,\n      stickyComponent: <SpendLessThanYouMakeProgressBar />,\n      content: <SpendLessThanYouMakeComponent />,\n      drawerType: 'connectDrawer',\n      connectTitle: copy.connect_your_accounts,\n      connectDescription:\n        copy.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances,\n    },\n    payBillsOnTime: {\n      title: copy.key_indicators_spend.pay_bills_on_time_drawer.pay_bills_on_time_title,\n      description: copy.key_indicators_spend.pay_bills_on_time_drawer.pay_bills_on_time_description,\n      stickyComponent: <PayBillsOnTimeStickyComponent />,\n      content: <PayBillsOnTimeDrawerComponent />,\n      drawerType: 'connectDrawer',\n      connectTitle: copy.connect_your_accounts,\n      connectDescription:\n        copy.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances,\n    },\n    maintainEmergencySavings: {\n      content: <MaintainingEmergencySavingsContent />,\n      description: copy.maintain_emergency_savings_description,\n      stickyComponent: <MaintainingEmergencySavingsSticky />,\n      title: copy.maintain_emergency_savings_title,\n      drawerType: 'connectDrawer',\n      connectTitle: copy.connect_your_accounts,\n      connectDescription:\n        copy.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances,\n    },\n    haveManageableDebt: {\n      title: copy.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_title,\n      description:\n        copy.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_description,\n      stickyComponent: <HaveManageableDebtProgressBar />,\n      content: <HaveManageableDebtComponent />,\n      drawerType: 'connectDrawer',\n      connectTitle: copy.dont_see_all_your_accounts,\n      connectDescription: copy.connect_more_accounts_to_view_more_accurate_financial_picture,\n    },\n    haveAGoodCreditScore: {\n      title: <CreditScoreHeader />,\n      description: copy.credit_score_description,\n      stickyComponent: null,\n      content: <CreditScoreContent />,\n    },\n    saveEnoughToLiveOn: {\n      title: copy.key_indicators_save.drawer_title,\n      description: copy.key_indicators_save.drawer_description,\n      stickyComponent: <SaveEnoughToLiveOnProgressBar />,\n      content: <SaveEnoughToLiveOnDrawerContent />,\n      drawerType: 'connectDrawer',\n      connectTitle: copy.dont_see_all_your_accounts,\n      connectDescription: copy.connect_more_accounts_to_view_more_accurate_financial_picture,\n    },\n  }\n\n  const content = contentMapping[drawerFor]\n  return (\n    <KeyIndicatorsDrawer\n      connectDescription={content?.connectDescription}\n      connectTitle={content?.connectTitle}\n      description={content?.description}\n      drawerTitle={copy.key_indicators}\n      drawerType={content.drawerType}\n      isOpen={isOpen}\n      loadConnectAccountsCard={true}\n      onClose={onClose}\n      stickyComponent={content.stickyComponent}\n      title={content.title}\n    >\n      <Stack sx={{ gap: 16 }}>{content.content}</Stack>\n    </KeyIndicatorsDrawer>\n  )\n}\n\nexport default observer(KeyIndicatorsTabItemDrawer)\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,IAAM,IAAA,CAA8B,EAClC,WAAA,GACA,QAAA,GACA,SAAA,EAAA,MACqC;AACrC,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GA4EzC,IAAU;AAAA,IA5Dd,sBAAsB;AAAA,MACpB,OACE,EAAK,qBAAqB,gCAAgC;AAAA,MAC5D,aACE,EAAK,qBAAqB,gCACvB;AAAA,MACL,iBAAiB,gBAAA,EAAC,GAAD,CAAkC,CAAA;AAAA,MACnD,SAAS,gBAAA,EAAC,GAAD,CAAgC,CAAA;AAAA,MACzC,YAAY;AAAA,MACZ,cAAc,EAAK;AAAA,MACnB,oBACE,EAAK;AAAA,IACT;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,EAAK,qBAAqB,yBAAyB;AAAA,MAC1D,aAAa,EAAK,qBAAqB,yBAAyB;AAAA,MAChE,iBAAiB,gBAAA,EAAC,GAAD,CAAgC,CAAA;AAAA,MACjD,SAAS,gBAAA,EAAC,GAAD,CAAgC,CAAA;AAAA,MACzC,YAAY;AAAA,MACZ,cAAc,EAAK;AAAA,MACnB,oBACE,EAAK;AAAA,IACT;AAAA,IACA,0BAA0B;AAAA,MACxB,SAAS,gBAAA,EAAC,GAAD,CAAqC,CAAA;AAAA,MAC9C,aAAa,EAAK;AAAA,MAClB,iBAAiB,gBAAA,EAAC,GAAD,CAAoC,CAAA;AAAA,MACrD,OAAO,EAAK;AAAA,MACZ,YAAY;AAAA,MACZ,cAAc,EAAK;AAAA,MACnB,oBACE,EAAK;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,MAClB,OAAO,EAAK,sBAAsB,4BAA4B;AAAA,MAC9D,aACE,EAAK,sBAAsB,4BAA4B;AAAA,MACzD,iBAAiB,gBAAA,EAAC,GAAD,CAAgC,CAAA;AAAA,MACjD,SAAS,gBAAA,EAAC,GAAD,CAA8B,CAAA;AAAA,MACvC,YAAY;AAAA,MACZ,cAAc,EAAK;AAAA,MACnB,oBAAoB,EAAK;AAAA,IAC3B;AAAA,IACA,sBAAsB;AAAA,MACpB,OAAO,gBAAA,EAAC,GAAD,CAAoB,CAAA;AAAA,MAC3B,aAAa,EAAK;AAAA,MAClB,iBAAiB;AAAA,MACjB,SAAS,gBAAA,EAAC,GAAD,CAAqB,CAAA;AAAA,IAChC;AAAA,IACA,oBAAoB;AAAA,MAClB,OAAO,EAAK,oBAAoB;AAAA,MAChC,aAAa,EAAK,oBAAoB;AAAA,MACtC,iBAAiB,gBAAA,EAAC,GAAD,CAAgC,CAAA;AAAA,MACjD,SAAS,gBAAA,EAAC,GAAD,CAAkC,CAAA;AAAA,MAC3C,YAAY;AAAA,MACZ,cAAc,EAAK;AAAA,MACnB,oBAAoB,EAAK;AAAA,IAC3B;AAAA,EAGc,EAAe,CAAA;AAC/B,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,oBAAoB,GAAS;AAAA,IAC7B,cAAc,GAAS;AAAA,IACvB,aAAa,GAAS;AAAA,IACtB,aAAa,EAAK;AAAA,IAClB,YAAY,EAAQ;AAAA,IACZ,QAAA;AAAA,IACR,yBAAyB;AAAA,IAChB,SAAA;AAAA,IACT,iBAAiB,EAAQ;AAAA,IACzB,OAAO,EAAQ;AAAA,cAEf,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,KAAK,GAAG;AAAA,gBAAI,EAAQ;AAAA,IAAe,CAAA;AAAA,EAC7B,CAAA;AAEzB,GAEA,IAAe,EAAS,CAA0B"}

package/dist/finstrong/components/KeyIndicatorsTabsWidget.es.js

@@ -0,0 +1,78 @@
+import { useGlobalCopyStore as l } from "../../common/context/hooks.es.js";
+import i from "../../common/components/TabContentContainer.es.js";
+import d from "./KeyIndicatorsSpendTab.es.js";
+import m from "./KeyIndicatorsSaveTab.es.js";
+import c from "./KeyIndicatorsBorrowTab.es.js";
+import b from "react";
+import { observer as p } from "mobx-react-lite";
+import { ContentCopy as u, CreditCard as f, Savings as v } from "@mxenabled/mx-icons";
+import { Fragment as x, jsx as t, jsxs as r } from "react/jsx-runtime";
+import o from "@mui/material/Tab";
+import y from "@mui/material/Tabs";
+var h = () => {
+  const [e, n] = b.useState(0), { finstrong: a } = l();
+  return /* @__PURE__ */ r(x, { children: [
+    /* @__PURE__ */ r(y, {
+      "aria-label": "Key Indicators",
+      centered: !0,
+      onChange: (_, s) => n(s),
+      selectionFollowsFocus: !0,
+      sx: {
+        mb: 0,
+        "& .MuiTab-root": { minWidth: 0 }
+      },
+      textColor: "primary",
+      value: e,
+      variant: "fullWidth",
+      children: [
+        /* @__PURE__ */ t(o, {
+          "aria-controls": "spend-details-tabpanel-0",
+          icon: /* @__PURE__ */ t(f, { sx: { mr: 8 } }),
+          iconPosition: "start",
+          id: "spend-details-tab-0",
+          label: a.key_indicators_spend.title,
+          sx: { minHeight: 44 }
+        }),
+        /* @__PURE__ */ t(o, {
+          "aria-controls": "save-details-tabpanel-1",
+          icon: /* @__PURE__ */ t(v, { sx: { mr: 8 } }),
+          iconPosition: "start",
+          id: "save-details-tab-1",
+          label: a.key_indicators_save.title,
+          sx: { minHeight: 44 }
+        }),
+        /* @__PURE__ */ t(o, {
+          "aria-controls": "borrow-details-tabpanel-2",
+          icon: /* @__PURE__ */ t(u, { sx: { mr: 8 } }),
+          iconPosition: "start",
+          id: "borrow-details-tab-2",
+          label: a.key_indicators_borrow.title,
+          sx: { minHeight: 44 }
+        })
+      ]
+    }),
+    /* @__PURE__ */ t(i, {
+      index: 0,
+      name: "spend-details",
+      value: e,
+      children: /* @__PURE__ */ t(d, {})
+    }),
+    /* @__PURE__ */ t(i, {
+      index: 1,
+      name: "save-details",
+      value: e,
+      children: /* @__PURE__ */ t(m, {})
+    }),
+    /* @__PURE__ */ t(i, {
+      index: 2,
+      name: "borrow-details",
+      value: e,
+      children: /* @__PURE__ */ t(c, {})
+    })
+  ] });
+}, P = p(h);
+export {
+  P as default
+};
+
+//# sourceMappingURL=KeyIndicatorsTabsWidget.es.js.map

package/dist/finstrong/components/KeyIndicatorsTabsWidget.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyIndicatorsTabsWidget.es.js","names":[],"sources":["../../../src/finstrong/components/KeyIndicatorsTabsWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport { CreditCard, ContentCopy, Savings } from '@mxenabled/mx-icons'\n\nimport { TabContentContainer, useGlobalCopyStore } from '../../common'\n\nimport KeyIndicatorsSpendTab from './KeyIndicatorsSpendTab'\nimport KeyIndicatorsSaveTab from './KeyIndicatorsSaveTab'\nimport KeyIndicatorsBorrowTab from './KeyIndicatorsBorrowTab'\n\nconst KeyIndicatorsTabsWidget: React.FC = () => {\n  const [tabValue, setTabValue] = React.useState(0)\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  return (\n    <>\n      <Tabs\n        aria-label={'Key Indicators'}\n        centered={true}\n        onChange={(_, val) => setTabValue(val)}\n        selectionFollowsFocus={true}\n        sx={{\n          mb: 0,\n          '& .MuiTab-root': {\n            minWidth: 0,\n          },\n        }}\n        textColor=\"primary\"\n        value={tabValue}\n        variant=\"fullWidth\"\n      >\n        <Tab\n          aria-controls=\"spend-details-tabpanel-0\"\n          icon={<CreditCard sx={{ mr: 8 }} />}\n          iconPosition=\"start\"\n          id=\"spend-details-tab-0\"\n          label={copy.key_indicators_spend.title}\n          sx={{ minHeight: 44 }} // TODO : remove it once the theme is updated\n        />\n        <Tab\n          aria-controls=\"save-details-tabpanel-1\"\n          icon={<Savings sx={{ mr: 8 }} />}\n          iconPosition=\"start\"\n          id=\"save-details-tab-1\"\n          label={copy.key_indicators_save.title}\n          sx={{ minHeight: 44 }} // TODO : remove it once the theme is updated\n        />\n        <Tab\n          aria-controls=\"borrow-details-tabpanel-2\"\n          icon={<ContentCopy sx={{ mr: 8 }} />}\n          iconPosition=\"start\"\n          id=\"borrow-details-tab-2\"\n          label={copy.key_indicators_borrow.title}\n          sx={{ minHeight: 44 }} // TODO : remove it once the theme is updated\n        />\n      </Tabs>\n\n      <TabContentContainer index={0} name=\"spend-details\" value={tabValue}>\n        <KeyIndicatorsSpendTab />\n      </TabContentContainer>\n\n      <TabContentContainer index={1} name=\"save-details\" value={tabValue}>\n        <KeyIndicatorsSaveTab />\n      </TabContentContainer>\n\n      <TabContentContainer index={2} name=\"borrow-details\" value={tabValue}>\n        <KeyIndicatorsBorrowTab />\n      </TabContentContainer>\n    </>\n  )\n}\n\nexport default observer(KeyIndicatorsTabsWidget)\n"],"mappings":";;;;;;;;;;;AAcA,IAAM,IAAA,MAA0C;AAC9C,QAAM,CAAC,GAAU,CAAA,IAAe,EAAM,SAAS,CAAC,GAC1C,EAAE,WAAW,EAAA,IAAS,EAAmB;AAE/C,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAA,CAAW,GAAG,MAAQ,EAAY,CAAG;AAAA,MACrC,uBAAuB;AAAA,MACvB,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,kBAAkB,EAChB,UAAU,EACZ;AAAA,MACF;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,MACP,SAAQ;AAAA,gBAbV;AAAA,QAeE,gBAAA,EAAC,GAAD;AAAA,UACE,iBAAc;AAAA,UACd,MAAM,gBAAA,EAAC,GAAD,EAAY,IAAI,EAAE,IAAI,EAAE,EAAI,CAAA;AAAA,UAClC,cAAa;AAAA,UACb,IAAG;AAAA,UACH,OAAO,EAAK,qBAAqB;AAAA,UACjC,IAAI,EAAE,WAAW,GAAG;AAAA,QACrB,CAAA;AAAA,QACD,gBAAA,EAAC,GAAD;AAAA,UACE,iBAAc;AAAA,UACd,MAAM,gBAAA,EAAC,GAAD,EAAS,IAAI,EAAE,IAAI,EAAE,EAAI,CAAA;AAAA,UAC/B,cAAa;AAAA,UACb,IAAG;AAAA,UACH,OAAO,EAAK,oBAAoB;AAAA,UAChC,IAAI,EAAE,WAAW,GAAG;AAAA,QACrB,CAAA;AAAA,QACD,gBAAA,EAAC,GAAD;AAAA,UACE,iBAAc;AAAA,UACd,MAAM,gBAAA,EAAC,GAAD,EAAa,IAAI,EAAE,IAAI,EAAE,EAAI,CAAA;AAAA,UACnC,cAAa;AAAA,UACb,IAAG;AAAA,UACH,OAAO,EAAK,sBAAsB;AAAA,UAClC,IAAI,EAAE,WAAW,GAAG;AAAA,QACrB,CAAA;AAAA,MACG;AAAA;IAEN,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAgB,OAAO;AAAA,gBACzD,gBAAA,EAAC,GAAD,CAAwB,CAAA;AAAA,IACL,CAAA;AAAA,IAErB,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAe,OAAO;AAAA,gBACxD,gBAAA,EAAC,GAAD,CAAuB,CAAA;AAAA,IACJ,CAAA;AAAA,IAErB,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAiB,OAAO;AAAA,gBAC1D,gBAAA,EAAC,GAAD,CAAyB,CAAA;AAAA,IACN,CAAA;AAAA,EACrB,EAAA,CAAA;AAEN,GAEA,IAAe,EAAS,CAAuB"}

package/dist/finstrong/components/MaintainingEmergencySavings/EstimatedContributionCalculator.es.js

@@ -0,0 +1,170 @@
+import { buildDynamicCopy as M } from "../../../core/utils/Localization.es.js";
+import { useGlobalCopyStore as I } from "../../../common/context/hooks.es.js";
+import { formatCurrency as d } from "../../../core/utils/NumberFormatting.es.js";
+import { Select as h } from "../../../common/components/Select.es.js";
+import { calculateContribution as f, getInitialContributionPeriod as v, getInitialTargetPeriodAmount as N } from "../../util/finstrongUtils.es.js";
+import q from "../shared/TotalCard.es.js";
+import { ContributeFrequency as i, DurationUnit as s } from "../../../core/types/Finstrong.es.js";
+import n from "react";
+import { observer as A } from "mobx-react-lite";
+import c from "@mui/material/Stack";
+import { Text as C } from "@mxenabled/mxui";
+import G from "@mui/material/Button";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import L from "@mui/material/Box";
+import E from "@mui/material/Card";
+import x from "@mui/material/TextField";
+var j = ({ total: r }) => {
+  const { finstrong: e } = I(), P = [
+    {
+      id: i.Monthly,
+      label: e.maintain_emergency_savings_monthly
+    },
+    {
+      id: i.BiWeekly,
+      label: e.maintain_emergency_savings_bi_weekly
+    },
+    {
+      id: i.Weekly,
+      label: e.maintain_emergency_savings_weekly
+    },
+    {
+      id: i.Daily,
+      label: e.maintain_emergency_savings_daily
+    }
+  ], S = {
+    [i.Monthly]: e.maintain_emergency_savings_estimated_period_monthly,
+    [i.BiWeekly]: e.maintain_emergency_savings_estimated_period_bi_weekly,
+    [i.Weekly]: e.maintain_emergency_savings_estimated_period_weekly,
+    [i.Daily]: e.maintain_emergency_savings_estimated_period_daily
+  }, k = [
+    {
+      id: s.Months,
+      label: e.maintain_emergency_savings_months
+    },
+    {
+      id: s.Years,
+      label: e.maintain_emergency_savings_years
+    },
+    {
+      id: s.Days,
+      label: e.maintain_emergency_savings_days
+    }
+  ], g = Math.ceil((r + 1) / 1e3) * 1e3, [w, y] = n.useState(0), [B, b] = n.useState(v(r)), [o, D] = n.useState(v(r)), [l, R] = n.useState(g), [u, T] = n.useState(N(r)), [_, W] = n.useState(s.Months);
+  n.useEffect(() => {
+    y(f({
+      contribution: o,
+      goalAmount: l,
+      goalPeriod: u,
+      targetPeriod: _,
+      totalSaved: r
+    })), b(o);
+  }, []);
+  const p = (a) => {
+    a.preventDefault(), y(f({
+      contribution: o,
+      goalAmount: l,
+      goalPeriod: u,
+      targetPeriod: _,
+      totalSaved: r
+    })), b(o);
+  };
+  return /* @__PURE__ */ t(E, { children: /* @__PURE__ */ t("form", {
+    onSubmit: p,
+    children: /* @__PURE__ */ m(c, {
+      sx: {
+        gap: 24,
+        pb: 24,
+        pt: 16,
+        px: 16
+      },
+      children: [
+        /* @__PURE__ */ t(q, {
+          balance: /* @__PURE__ */ m(c, {
+            sx: {
+              flexDirection: "row",
+              height: 32
+            },
+            children: [/* @__PURE__ */ t(C, {
+              variant: "h2",
+              children: d(w, "0,0")
+            }), /* @__PURE__ */ m(C, {
+              sx: {
+                alignSelf: "end",
+                height: 24
+              },
+              variant: "subtitle2",
+              children: ["/", S[B]]
+            })]
+          }),
+          title: e.maintain_emergency_savings_estimated_contribution
+        }),
+        /* @__PURE__ */ t(x, {
+          "aria-label": e.maintain_emergency_savings_savings_goal,
+          helperText: M(e.maintain_emergency_savings_suggested_goal, d(g, "0,0")),
+          label: e.maintain_emergency_savings_savings_goal,
+          onChange: (a) => {
+            a.target.value && R(Number(a.target.value.replace(/[^0-9]/g, "")));
+          },
+          slotProps: { htmlInput: {
+            noValidate: !0,
+            pattern: "[0-9]*"
+          } },
+          value: l ? d(l, "0,0") : ""
+        }),
+        /* @__PURE__ */ t(h, {
+          label: e.maintain_emergency_savings_how_often_contribute,
+          onChange: D,
+          options: P,
+          required: !0,
+          value: o
+        }),
+        /* @__PURE__ */ m(c, {
+          sx: { flexDirection: "row" },
+          children: [/* @__PURE__ */ t(x, {
+            "aria-label": e.maintain_emergency_savings_meet_your_goal_within,
+            fullWidth: !0,
+            label: e.maintain_emergency_savings_meet_your_goal_within,
+            onChange: (a) => {
+              isNaN(Number(a.target.value)) || T(Number(a.target.value));
+            },
+            slotProps: { htmlInput: {
+              noValidate: !0,
+              pattern: "[0-9]*"
+            } },
+            sx: { "& .MuiInputBase-root": {
+              borderBottomRightRadius: 0,
+              borderTopRightRadius: 0,
+              fieldset: { borderRightWidth: 0.5 }
+            } },
+            value: u
+          }), /* @__PURE__ */ t(L, {
+            sx: { "& .MuiInputBase-root": {
+              borderBottomLeftRadius: 0,
+              borderTopLeftRadius: 0,
+              fieldset: { borderLeftWidth: 0.5 }
+            } },
+            children: /* @__PURE__ */ t(h, {
+              label: "",
+              onChange: W,
+              options: k,
+              value: _
+            })
+          })]
+        }),
+        /* @__PURE__ */ t(G, {
+          fullWidth: !0,
+          onClick: p,
+          type: "submit",
+          variant: "contained",
+          children: e.maintain_emergency_savings_calculate
+        })
+      ]
+    })
+  }) });
+}, ae = A(j);
+export {
+  ae as default
+};
+
+//# sourceMappingURL=EstimatedContributionCalculator.es.js.map

package/dist/finstrong/components/MaintainingEmergencySavings/EstimatedContributionCalculator.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EstimatedContributionCalculator.es.js","names":[],"sources":["../../../../src/finstrong/components/MaintainingEmergencySavings/EstimatedContributionCalculator.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { Select, useGlobalCopyStore } from '../../../common'\nimport { DurationUnit, ContributeFrequency } from '../../../core/types/Finstrong'\n\nimport {\n  calculateContribution,\n  getInitialContributionPeriod,\n  getInitialTargetPeriodAmount,\n} from '../../util/finstrongUtils'\n\nimport TotalCard from '../shared/TotalCard'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\nconst EstimatedContributionCalculator = ({ total }: { total: number }) => {\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  const frequencies = [\n    { id: ContributeFrequency.Monthly, label: copy.maintain_emergency_savings_monthly },\n    { id: ContributeFrequency.BiWeekly, label: copy.maintain_emergency_savings_bi_weekly },\n    { id: ContributeFrequency.Weekly, label: copy.maintain_emergency_savings_weekly },\n    { id: ContributeFrequency.Daily, label: copy.maintain_emergency_savings_daily },\n  ]\n\n  const frequencyPeriodLabels = {\n    [ContributeFrequency.Monthly]: copy.maintain_emergency_savings_estimated_period_monthly,\n    [ContributeFrequency.BiWeekly]: copy.maintain_emergency_savings_estimated_period_bi_weekly,\n    [ContributeFrequency.Weekly]: copy.maintain_emergency_savings_estimated_period_weekly,\n    [ContributeFrequency.Daily]: copy.maintain_emergency_savings_estimated_period_daily,\n  }\n\n  const series = [\n    { id: DurationUnit.Months, label: copy.maintain_emergency_savings_months },\n    { id: DurationUnit.Years, label: copy.maintain_emergency_savings_years },\n    { id: DurationUnit.Days, label: copy.maintain_emergency_savings_days },\n  ]\n\n  const initialGoalAmount = Math.ceil((total + 1) / 1000) * 1000\n\n  const [calculatedContribution, setCalculatedContribution] = React.useState<number>(0)\n  const [calculatedContributionPerPeriod, setCalculatedContributionPerPeriod] =\n    React.useState<ContributeFrequency>(getInitialContributionPeriod(total))\n  const [contribution, setContribution] = React.useState<ContributeFrequency>(\n    getInitialContributionPeriod(total),\n  )\n  const [goalAmount, setGoalAmount] = React.useState<number>(initialGoalAmount)\n  const [goalPeriod, setGoalPeriod] = React.useState<number>(getInitialTargetPeriodAmount(total))\n  const [targetPeriod, setTargetPeriod] = React.useState<DurationUnit>(DurationUnit.Months)\n\n  React.useEffect(() => {\n    setCalculatedContribution(\n      calculateContribution({\n        contribution,\n        goalAmount,\n        goalPeriod,\n        targetPeriod,\n        totalSaved: total,\n      }),\n    )\n    setCalculatedContributionPerPeriod(contribution)\n  }, [])\n\n  const handleCalculate = (e: React.FormEvent) => {\n    e.preventDefault()\n\n    setCalculatedContribution(\n      calculateContribution({\n        contribution,\n        goalAmount,\n        goalPeriod,\n        targetPeriod,\n        totalSaved: total,\n      }),\n    )\n    setCalculatedContributionPerPeriod(contribution)\n  }\n\n  return (\n    <Card>\n      <form onSubmit={handleCalculate}>\n        <Stack sx={{ gap: 24, pb: 24, pt: 16, px: 16 }}>\n          <TotalCard\n            balance={\n              <Stack sx={{ flexDirection: 'row', height: 32 }}>\n                <Text variant=\"h2\">{formatCurrency(calculatedContribution, '0,0')}</Text>\n                <Text sx={{ alignSelf: 'end', height: 24 }} variant=\"subtitle2\">\n                  /{frequencyPeriodLabels[calculatedContributionPerPeriod]}\n                </Text>\n              </Stack>\n            }\n            title={copy.maintain_emergency_savings_estimated_contribution}\n          />\n\n          <TextField\n            aria-label={copy.maintain_emergency_savings_savings_goal}\n            helperText={\n              buildDynamicCopy(\n                copy.maintain_emergency_savings_suggested_goal,\n                formatCurrency(initialGoalAmount, '0,0'),\n              ) as string\n            }\n            label={copy.maintain_emergency_savings_savings_goal}\n            onChange={(e) => {\n              if (e.target.value) setGoalAmount(Number(e.target.value.replace(/[^0-9]/g, '')))\n            }}\n            slotProps={{\n              htmlInput: {\n                noValidate: true,\n                pattern: '[0-9]*',\n              },\n            }}\n            value={goalAmount ? formatCurrency(goalAmount, '0,0') : ''}\n          />\n          <Select\n            label={copy.maintain_emergency_savings_how_often_contribute}\n            onChange={setContribution}\n            options={frequencies}\n            required={true}\n            value={contribution}\n          />\n          <Stack sx={{ flexDirection: 'row' }}>\n            <TextField\n              aria-label={copy.maintain_emergency_savings_meet_your_goal_within}\n              fullWidth={true}\n              label={copy.maintain_emergency_savings_meet_your_goal_within}\n              onChange={(e) => {\n                if (!isNaN(Number(e.target.value))) setGoalPeriod(Number(e.target.value))\n              }}\n              slotProps={{\n                htmlInput: {\n                  noValidate: true,\n                  pattern: '[0-9]*',\n                },\n              }}\n              sx={{\n                '& .MuiInputBase-root': {\n                  borderBottomRightRadius: 0,\n                  borderTopRightRadius: 0,\n                  fieldset: {\n                    borderRightWidth: 0.5,\n                  },\n                },\n              }}\n              value={goalPeriod}\n            />\n            <Box\n              sx={{\n                '& .MuiInputBase-root': {\n                  borderBottomLeftRadius: 0,\n                  borderTopLeftRadius: 0,\n                  fieldset: {\n                    borderLeftWidth: 0.5,\n                  },\n                },\n              }}\n            >\n              <Select label=\"\" onChange={setTargetPeriod} options={series} value={targetPeriod} />\n            </Box>\n          </Stack>\n          <Button fullWidth={true} onClick={handleCalculate} type=\"submit\" variant=\"contained\">\n            {copy.maintain_emergency_savings_calculate}\n          </Button>\n        </Stack>\n      </form>\n    </Card>\n  )\n}\n\nexport default observer(EstimatedContributionCalculator)\n"],"mappings":"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"}

package/dist/finstrong/components/MaintainingEmergencySavings/MaintainingEmergencySavingsContent.es.js

@@ -0,0 +1,51 @@
+import { useAccountStore as u, useGlobalCopyStore as p } from "../../../common/context/hooks.es.js";
+import { AccountType as f } from "../../../core/types/Account.es.js";
+import d from "../../../common/components/ConnectDrawer.es.js";
+import g from "../shared/Accounts.es.js";
+import _ from "../shared/TotalCard.es.js";
+import C from "./EstimatedContributionCalculator.es.js";
+import a from "react";
+import { observer as b } from "mobx-react-lite";
+import c from "@mui/material/Stack";
+import v from "@mui/material/Button";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import S from "@mui/material/Card";
+var y = () => {
+  const { savingsAccounts: n } = u(), { finstrong: t } = p(), [s, e] = a.useState(!1), r = a.useMemo(() => n.reduce((m, l) => m + (l.balance ?? 0), 0), [n]);
+  return /* @__PURE__ */ i(c, {
+    sx: { gap: 24 },
+    children: [
+      /* @__PURE__ */ o(S, {
+        sx: {
+          bgcolor: "background.paper",
+          p: 16
+        },
+        children: /* @__PURE__ */ i(c, {
+          sx: { gap: 16 },
+          children: [/* @__PURE__ */ o(_, {
+            balance: r,
+            title: t.maintain_emergency_savings_your_savings
+          }), n.length ? /* @__PURE__ */ o(g, {
+            loadAccounts: [f.SAVINGS],
+            loadMoreLabel: t.connect_more_accounts_button
+          }) : /* @__PURE__ */ o(v, {
+            onClick: () => e(!0),
+            variant: "contained",
+            children: t.connect_more_accounts_button
+          })]
+        })
+      }),
+      /* @__PURE__ */ o(C, { total: r }),
+      /* @__PURE__ */ o(d, {
+        onClose: () => e(!1),
+        showConnectWidget: s,
+        title: t.connect_more_accounts_button
+      })
+    ]
+  });
+}, T = b(y);
+export {
+  T as default
+};
+
+//# sourceMappingURL=MaintainingEmergencySavingsContent.es.js.map

package/dist/finstrong/components/MaintainingEmergencySavings/MaintainingEmergencySavingsContent.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaintainingEmergencySavingsContent.es.js","names":[],"sources":["../../../../src/finstrong/components/MaintainingEmergencySavings/MaintainingEmergencySavingsContent.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { ConnectDrawer, useAccountStore, useGlobalCopyStore } from '../../../common'\nimport { AccountType } from '../../../core'\n\nimport Accounts from '../shared/Accounts'\nimport TotalCard from '../shared/TotalCard'\n\nimport EstimatedContributionCalculator from './EstimatedContributionCalculator'\n\nconst MaintainingEmergencySavingsContent = () => {\n  const { savingsAccounts } = useAccountStore()\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  const [isConnectDrawerOpen, setIsConnectDrawerOpen] = React.useState(false)\n\n  const total = React.useMemo(\n    () => savingsAccounts.reduce((acc, account) => acc + (account.balance ?? 0), 0),\n    [savingsAccounts],\n  )\n\n  return (\n    <Stack sx={{ gap: 24 }}>\n      <Card sx={{ bgcolor: 'background.paper', p: 16 }}>\n        <Stack sx={{ gap: 16 }}>\n          <TotalCard balance={total} title={copy.maintain_emergency_savings_your_savings} />\n          {savingsAccounts.length ? (\n            <Accounts\n              loadAccounts={[AccountType.SAVINGS]}\n              loadMoreLabel={copy.connect_more_accounts_button}\n            />\n          ) : (\n            <Button onClick={() => setIsConnectDrawerOpen(true)} variant=\"contained\">\n              {copy.connect_more_accounts_button}\n            </Button>\n          )}\n        </Stack>\n      </Card>\n      <EstimatedContributionCalculator total={total} />\n      <ConnectDrawer\n        onClose={() => setIsConnectDrawerOpen(false)}\n        showConnectWidget={isConnectDrawerOpen}\n        title={copy.connect_more_accounts_button}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(MaintainingEmergencySavingsContent)\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,IAAA,MAA2C;AAC/C,QAAM,EAAE,iBAAA,EAAA,IAAoB,EAAgB,GACtC,EAAE,WAAW,EAAA,IAAS,EAAmB,GAEzC,CAAC,GAAqB,CAAA,IAA0B,EAAM,SAAS,EAAK,GAEpE,IAAQ,EAAM,QAAA,MACZ,EAAgB,OAAA,CAAQ,GAAK,MAAY,KAAO,EAAQ,WAAW,IAAI,CAAC,GAC9E,CAAC,CAAe,CAClB;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,KAAK,GAAG;AAAA,cAArB;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAI;AAAA,UAAE,SAAS;AAAA,UAAoB,GAAG;AAAA,QAAG;AAAA,kBAC7C,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI,EAAE,KAAK,GAAG;AAAA,oBAArB,CACE,gBAAA,EAAC,GAAD;AAAA,YAAW,SAAS;AAAA,YAAO,OAAO,EAAK;AAAA,UAA0C,CAAA,GAChF,EAAgB,SACf,gBAAA,EAAC,GAAD;AAAA,YACE,cAAc,CAAC,EAAY,OAAO;AAAA,YAClC,eAAe,EAAK;AAAA,UACrB,CAAA,IAED,gBAAA,EAAC,GAAD;AAAA,YAAQ,SAAA,MAAe,EAAuB,EAAI;AAAA,YAAG,SAAQ;AAAA,sBAC1D,EAAK;AAAA,UACA,CAAA,CAEL;AAAA;MACH,CAAA;AAAA,MACN,gBAAA,EAAC,GAAD,EAAwC,OAAA,EAAQ,CAAA;AAAA,MAChD,gBAAA,EAAC,GAAD;AAAA,QACE,SAAA,MAAe,EAAuB,EAAK;AAAA,QAC3C,mBAAmB;AAAA,QACnB,OAAO,EAAK;AAAA,MACb,CAAA;AAAA,IACI;AAAA;AAEX,GAEA,IAAe,EAAS,CAAkC"}

package/dist/finstrong/components/MaintainingEmergencySavings/MaintainingEmergencySavingsSticky.es.js

@@ -0,0 +1,53 @@
+import { useFinstrongStore as s } from "../../../common/context/hooks.es.js";
+import { formatCurrency as c } from "../../../core/utils/NumberFormatting.es.js";
+import { calculatePercentage as m, getEmergencySavingsState as g } from "../../util/finstrongUtils.es.js";
+import l from "../ProgressBar.es.js";
+import { observer as v } from "mobx-react-lite";
+import a from "@mui/material/Stack";
+import { Text as p } from "@mxenabled/mxui";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import h from "@mui/material/Divider";
+var u = { sticky_label: "You have saved" }, d = [
+  "$0",
+  "$250",
+  "$500",
+  "$750",
+  "$1k"
+], y = () => {
+  const { healthScore: n } = s(), e = Math.round(n.emergency_savings_on_hand ?? NaN) || null, i = m(e), o = g(e);
+  return /* @__PURE__ */ t(l, {
+    bottomComponent: /* @__PURE__ */ t(a, {
+      sx: {
+        flexDirection: "row",
+        justifyContent: "space-between"
+      },
+      children: d.map((r) => /* @__PURE__ */ f(a, {
+        sx: {
+          alignItems: "center",
+          height: 24,
+          width: 30
+        },
+        children: [/* @__PURE__ */ t(h, {
+          orientation: "vertical",
+          sx: {
+            borderWidth: 0.5,
+            height: 8,
+            mt: 2
+          }
+        }), /* @__PURE__ */ t(p, {
+          variant: "caption",
+          children: r
+        })]
+      }, r))
+    }),
+    label: u.sticky_label,
+    status: o,
+    statusBarData: [{ percentage: i }],
+    value: c(e ?? 0, "0,0.00")
+  });
+}, D = v(y);
+export {
+  D as default
+};
+
+//# sourceMappingURL=MaintainingEmergencySavingsSticky.es.js.map

package/dist/finstrong/components/MaintainingEmergencySavings/MaintainingEmergencySavingsSticky.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaintainingEmergencySavingsSticky.es.js","names":[],"sources":["../../../../src/finstrong/components/MaintainingEmergencySavings/MaintainingEmergencySavingsSticky.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useFinstrongStore } from '../../../common'\nimport { calculatePercentage, getEmergencySavingsState } from '../../util/finstrongUtils'\n\nimport ProgressBar from '../ProgressBar'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\nconst copy = {\n  sticky_label: 'You have saved',\n}\n\nconst savingsRange = ['$0', '$250', '$500', '$750', '$1k']\n\nconst MaintainingEmergencySavingsSticky = () => {\n  const { healthScore } = useFinstrongStore()\n\n  const emergencySavings = Math.round(healthScore.emergency_savings_on_hand ?? NaN) || null\n\n  const percentage = calculatePercentage(emergencySavings)\n  const status = getEmergencySavingsState(emergencySavings)\n\n  return (\n    <ProgressBar\n      bottomComponent={\n        <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n          {savingsRange.map((range) => (\n            <Stack key={range} sx={{ alignItems: 'center', height: 24, width: 30 }}>\n              <Divider\n                orientation=\"vertical\"\n                sx={{\n                  borderWidth: 0.5,\n                  height: 8,\n                  mt: 2,\n                }}\n              />\n              <Text variant=\"caption\">{range}</Text>\n            </Stack>\n          ))}\n        </Stack>\n      }\n      label={copy.sticky_label}\n      status={status}\n      statusBarData={[\n        {\n          percentage,\n        },\n      ]}\n      value={formatCurrency(emergencySavings ?? 0, '0,0.00')}\n    />\n  )\n}\n\nexport default observer(MaintainingEmergencySavingsSticky)\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAO,EACX,cAAc,iBAChB,GAEM,IAAe;AAAA,EAAC;AAAA,EAAM;AAAA,EAAQ;AAAA,EAAQ;AAAA,EAAQ;AAAK,GAEnD,IAAA,MAA0C;AAC9C,QAAM,EAAE,aAAA,EAAA,IAAgB,EAAkB,GAEpC,IAAmB,KAAK,MAAM,EAAY,6BAA6B,GAAG,KAAK,MAE/E,IAAa,EAAoB,CAAgB,GACjD,IAAS,EAAyB,CAAgB;AAExD,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,iBACE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,eAAe;AAAA,QAAO,gBAAgB;AAAA,MAAgB;AAAA,gBAChE,EAAa,IAAA,CAAK,MACjB,gBAAA,EAAC,GAAD;AAAA,QAAmB,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,QAAQ;AAAA,UAAI,OAAO;AAAA,QAAG;AAAA,kBAArE,CACE,gBAAA,EAAC,GAAD;AAAA,UACE,aAAY;AAAA,UACZ,IAAI;AAAA,YACF,aAAa;AAAA,YACb,QAAQ;AAAA,YACR,IAAI;AAAA,UACN;AAAA,QACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBAAW;AAAA,QAAY,CAAA,CAChC;AAAA,SAVK,CAUL,CACR;AAAA,IACI,CAAA;AAAA,IAET,OAAO,EAAK;AAAA,IACJ,QAAA;AAAA,IACR,eAAe,CACb,EACE,YAAA,EACF,CACF;AAAA,IACA,OAAO,EAAe,KAAoB,GAAG,QAAQ;AAAA,EACtD,CAAA;AAEL,GAEA,IAAe,EAAS,CAAiC"}

package/dist/finstrong/components/ManageCreditScore.es.js

@@ -0,0 +1,52 @@
+import { useGlobalCopyStore as f, useUserStore as y } from "../../common/context/hooks.es.js";
+import { useScreenSize as C } from "../../common/hooks/useScreenSize.es.js";
+import S from "../../common/components/dialog/Dialog.es.js";
+import _ from "react";
+import { observer as h } from "mobx-react-lite";
+import { jsx as i } from "react/jsx-runtime";
+import g from "@mui/material/TextField";
+var b = ({ isOpen: m, onClose: l }) => {
+  const { common: a, finstrong: d } = f(), { isMobile: u } = C(), { updateUser: p, user: e } = y(), [r, s] = _.useState(e.credit_score || 0), o = !isNaN(r), n = () => {
+    l(), setTimeout(() => s(e.credit_score || 0), 300);
+  }, c = () => {
+    !r || r === e.credit_score || p({
+      ...e,
+      credit_score: r
+    });
+  };
+  return /* @__PURE__ */ i(S, {
+    copy: {
+      close_aria: a.close_aria,
+      title: d.edit_credit_score
+    },
+    disablePrimaryButton: !r || !o,
+    isOpen: m,
+    maxWidth: "xs",
+    onClose: n,
+    onPrimaryAction: c,
+    primaryColor: "primary",
+    primaryText: a.save_button,
+    sx: { "& .MuiDialog-paper": { minWidth: u ? "100%" : 400 } },
+    children: /* @__PURE__ */ i("form", {
+      onSubmit: (t) => {
+        t.preventDefault(), c(), n();
+      },
+      children: /* @__PURE__ */ i(g, {
+        error: !o,
+        fullWidth: !0,
+        inputMode: "numeric",
+        onChange: (t) => s(Number(t.target.value)),
+        slotProps: { htmlInput: {
+          noValidate: !0,
+          pattern: "[0-9]*"
+        } },
+        value: o ? r : ""
+      })
+    })
+  });
+}, W = h(b);
+export {
+  W as default
+};
+
+//# sourceMappingURL=ManageCreditScore.es.js.map