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

package/dist/cashflow/CashflowOnboarding/index.es.js

@@ -0,0 +1,220 @@
+import { jsx as t, jsxs as i, Fragment as w } from "react/jsx-runtime";
+import m, { useState as d } from "react";
+import { observer as tt } from "mobx-react-lite";
+import { formatISO as et } from "date-fns/formatISO";
+import { fromUnixTime as F } from "date-fns/fromUnixTime";
+import { getUnixTime as ot } from "date-fns/getUnixTime";
+import { startOfMonth as nt } from "date-fns/startOfMonth";
+import { startOfToday as O } from "date-fns/startOfToday";
+import { subDays as rt } from "date-fns/subDays";
+import p from "@mui/material/Box";
+import l from "@mui/material/Button";
+import R from "@mui/material/Divider";
+import it from "@mui/material/List";
+import h from "@mui/material/Stack";
+import { keyframes as at } from "@mui/material/styles";
+import ct from "@mui/material/styles/useTheme";
+import { H1 as st, P as W, Icon as v } from "@mxenabled/mxui";
+import mt from "../components/onboarding/StepOne/index.es.js";
+import dt from "../components/onboarding/StepTwo/index.es.js";
+import lt from "../../common/components/SubheaderRow/index.es.js";
+import { useCashflowUiStore as pt } from "../context/hooks/index.es.js";
+import ut from "../../transactions/components/shared/transactionlist/TransactionRow/index.es.js";
+import { incomeFilterSearch as ft, incomeFilter as A } from "../../transactions/utils/Filters/index.es.js";
+import { SelectTransaction as gt } from "../../recurringtransactions/components/shared/recurringsettings/SelectTransaction/index.es.js";
+import { AddRecurringTransactionDetails as ht } from "../../recurringtransactions/components/shared/recurringsettings/AddRecurringTransactionDetails/index.es.js";
+import { getNextPaymentDate as G } from "../../recurringtransactions/util/RecurringTransactions/index.es.js";
+import { fromUnixToDayOfWeekAndDate as yt } from "../../common/utils/DateUtil/index.es.js";
+import { CASHFLOW_IMAGES as xt } from "../constants/CashflowImages/index.es.js";
+import { useRecurringTransactionsStore as St, useGlobalCopyStore as bt, useCashflowStore as _t, useGlobalUiStore as Dt, useTransactionStore as Tt } from "../../common/context/hooks/index.es.js";
+import { useScreenSize as Ct } from "../../common/hooks/useScreenSize/index.es.js";
+import { Frequency as kt, RepeatingType as L } from "../../common/types/RepeatingTransaction/index.es.js";
+import It from "../../common/components/Loader/index.es.js";
+const wt = at`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`, Ft = () => {
+  const { addRepeatingTransaction: M, repeatingTransactions: U } = St(), { cashflow: a, common: y } = bt(), { completeOnboarding: x } = _t(), { isDirty: q } = pt(), { isMobile: c } = Ct(), { isCopyLoaded: N, setDisplayedDate: z } = Dt(), { filter: S, setFilter: b, transactions: _ } = Tt(), B = ct(), [H, u] = d(!0), [s, P] = m.useState(kt.EveryMonth), [$, j] = m.useState(1), [E, J] = m.useState(15), [D, K] = d(!1), [f, T] = d(1), [n, Q] = d([]), [C, g] = d(""), r = m.useMemo(
+    () => _.find((e) => e.guid === C),
+    [C, _]
+  ), X = !!U.filter(
+    (e) => e.repeating_transaction_type === L.Income
+  ).length, k = async () => {
+    T(2), z(
+      //  Beginning of the month, 90 days before today
+      nt(rt(O(), 90)),
+      O()
+    ), b({ ...S, custom: A }), T(3);
+  }, Y = async () => {
+    if (!(n.length < 1)) {
+      K(!0);
+      for (let e = 0; e < n.length; e++) {
+        const o = n[e], I = G(s, F(o.date)), V = {
+          account_guid: o.account_guid,
+          amount: o.amount,
+          merchant_guid: o.merchant_guid,
+          description: o.feed_description || o.description,
+          predicted_occurs_on: et(I, { representation: "date" }),
+          recurrence_day: I.getDay(),
+          recurrence_type: s,
+          repeating_transaction_type: L.Income,
+          transaction_type: o.transaction_type
+        };
+        await M(V, o);
+      }
+      await x();
+    }
+  }, Z = !r && H || !r && n.length < 1;
+  return N ? /* @__PURE__ */ i(
+    p,
+    {
+      sx: {
+        display: "flex",
+        alignItems: c ? "flex-start" : "center",
+        backgroundColor: B.palette.background.paper,
+        backgroundImage: c ? null : `url(${xt.CASHFLOW_ONBOARDING})`,
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "left 100px",
+        backgroundSize: "35%",
+        py: 24
+      },
+      children: [
+        f === 1 && /* @__PURE__ */ t(
+          p,
+          {
+            sx: {
+              ...c ? { display: "flex", flexDirection: "column", maxWidth: "100%", padding: "0 16px" } : { maxWidth: 590, ml: "40%", mr: 90 }
+            },
+            children: /* @__PURE__ */ t(mt, { handleNextStep: k })
+          }
+        ),
+        f === 2 && /* @__PURE__ */ t(
+          p,
+          {
+            sx: {
+              ...c ? { display: "flex", flexDirection: "column", maxWidth: "100%", padding: "0 16px" } : { maxWidth: 590, ml: "40%", mr: 90 }
+            },
+            children: /* @__PURE__ */ t(dt, {})
+          }
+        ),
+        f === 3 && /* @__PURE__ */ i(
+          p,
+          {
+            sx: {
+              ...c ? { display: "flex", flexDirection: "column", maxWidth: "100%", padding: "0 16px" } : { maxWidth: 590, ml: "40%", mr: 90 }
+            },
+            children: [
+              /* @__PURE__ */ t(st, { pb: 12, children: a.add_income_title }),
+              /* @__PURE__ */ t(W, { mb: 24, children: a.add_income_description }),
+              n.length > 0 && !r && /* @__PURE__ */ i(w, { children: [
+                /* @__PURE__ */ t(it, { children: n.map((e, o) => /* @__PURE__ */ i(m.Fragment, { children: [
+                  /* @__PURE__ */ t(lt, { bgcolor: "background.paper", children: yt(
+                    ot(e.nextDate || e.date)
+                  ) }),
+                  /* @__PURE__ */ t(ut, { transaction: e }),
+                  o !== n.length - 1 && /* @__PURE__ */ t(R, {})
+                ] }, e.guid)) }),
+                /* @__PURE__ */ i(h, { alignItems: "center", direction: "row", children: [
+                  /* @__PURE__ */ t(R, { sx: { flexGrow: 1 } }),
+                  /* @__PURE__ */ t(
+                    l,
+                    {
+                      onClick: () => u(!0),
+                      startIcon: /* @__PURE__ */ t(v, { name: "add", size: 20 }),
+                      children: a.add_income
+                    }
+                  )
+                ] })
+              ] }),
+              Z && /* @__PURE__ */ t(
+                gt,
+                {
+                  bgcolor: "background.paper",
+                  onSearch: (e) => b({
+                    ...S,
+                    custom: (o) => e ? ft(o, e) : A(o)
+                  }),
+                  onSelected: (e) => {
+                    g(e), u(!1);
+                  }
+                }
+              ),
+              !X && q && /* @__PURE__ */ t(W, { color: "error", mt: 16, children: a.confirm_error }),
+              r && /* @__PURE__ */ i(w, { children: [
+                /* @__PURE__ */ t(
+                  ht,
+                  {
+                    bgcolor: "background.paper",
+                    firstDay: $,
+                    frequency: s,
+                    onFirstDayChange: j,
+                    onFrequencyChange: P,
+                    onSecondDayChange: J,
+                    secondDay: E,
+                    transaction: r
+                  }
+                ),
+                /* @__PURE__ */ i(h, { direction: "row", gap: 16, ml: 24, mt: 32, children: [
+                  /* @__PURE__ */ t(
+                    l,
+                    {
+                      "aria-disabled": !r,
+                      onClick: () => {
+                        const e = [...n];
+                        e.push({
+                          ...r,
+                          nextDate: G(s, F(r.date)),
+                          frequency: s
+                        }), Q(e), g("");
+                      },
+                      variant: "contained",
+                      children: y.confirm_button
+                    }
+                  ),
+                  /* @__PURE__ */ t(
+                    l,
+                    {
+                      onClick: () => {
+                        g(""), u(!0), k().finally();
+                      },
+                      variant: "outlined",
+                      children: y.cancel_button
+                    }
+                  )
+                ] })
+              ] }),
+              n.length > 0 && !r && /* @__PURE__ */ i(h, { direction: "row", gap: 16, ml: 24, mt: 32, children: [
+                /* @__PURE__ */ t(
+                  l,
+                  {
+                    "aria-disabled": n.length < 1 || D,
+                    onClick: Y,
+                    startIcon: D ? /* @__PURE__ */ t(
+                      v,
+                      {
+                        name: "progress_activity",
+                        sx: {
+                          animation: `${wt} 2s linear infinite`
+                        }
+                      }
+                    ) : null,
+                    variant: "contained",
+                    children: a.confirm_income_button
+                  }
+                ),
+                /* @__PURE__ */ t(l, { onClick: x, variant: "outlined", children: a.skip_button })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ t(It, {});
+}, ce = tt(Ft);
+export {
+  ce as default
+};

package/dist/cashflow/CashflowWidget/index.es.js

@@ -0,0 +1,91 @@
+import { jsx as e, jsxs as O } from "react/jsx-runtime";
+import i from "react";
+import { observer as y } from "mobx-react-lite";
+import { RecurringSettings as v } from "../../recurringtransactions/components/shared/RecurringSettings/index.es.js";
+import I from "../components/CashflowContent/index.es.js";
+import x from "../components/CashflowHeading/index.es.js";
+import N from "../CashflowOnboarding/index.es.js";
+import { useCashflowUiStore as F } from "../context/hooks/index.es.js";
+import { subDays as G } from "date-fns/subDays";
+import { startOfToday as W } from "date-fns/startOfToday";
+import { endOfToday as H } from "date-fns/endOfToday";
+import { useGlobalUiStore as f, useEvent as P, useAccountStore as U, useTransactionStore as j, useUserStore as K, useRecurringTransactionsStore as V, useGlobalCopyStore as k } from "../../common/context/hooks/index.es.js";
+import z from "../../common/components/Loader/index.es.js";
+import m from "../../common/components/WidgetContainer/index.es.js";
+import { ANALYTICS_EVENTS as h } from "../../common/constants/Analytics/index.es.js";
+import Y from "../../common/components/drawer/Drawer/index.es.js";
+const $ = ({ onBackClick: n, sx: p = {} }) => {
+  const {
+    selectedAccounts: a,
+    selectedAccountGuids: g,
+    setSelectedAccounts: C,
+    shouldDisableNextDate: S,
+    shouldDisablePrevDate: A
+  } = f(), { onEvent: c } = P(), { visibleCashAccounts: o } = U(), { setFilter: _ } = j(), { userProfile: b } = K(), { dateRange: l, setSelectedCashAccounts: w } = F(), { loadRepeatingTransactions: D, setDateRange: R } = V(), { cashflow: s } = k(), { isCopyLoaded: T, isInitialized: r } = f(), [E, u] = i.useState(!1);
+  return i.useEffect(() => {
+    r && (R(l), D().finally());
+  }, [r]), i.useEffect(() => {
+    C(o);
+  }, [o]), i.useEffect(() => {
+    const L = o.map((t) => t.guid), d = a.filter(
+      (t) => g.includes(t.guid) && L.includes(t.guid)
+    );
+    w(d), _({
+      dateRange: { start: G(W(), 90), end: H() },
+      accounts: d.map((t) => t.guid)
+    });
+  }, [o, a]), !T || !r ? /* @__PURE__ */ e(z, {}) : b?.has_completed_cash_flow_onboarding ? /* @__PURE__ */ O(
+    m,
+    {
+      accountOptions: o,
+      actions: [
+        {
+          label: s.cashflow_settings,
+          iconName: "settings",
+          onClick: () => {
+            u(!0), c(h.CASH_FLOW_CLICK_SETTINGS);
+          }
+        }
+      ],
+      calendarActions: {
+        shouldDisableNext: S,
+        shouldDisablePrevious: A,
+        shouldDisablePicker: !0,
+        onRangeChanged: () => {
+        }
+      },
+      dateRange: l,
+      dateRangeVariant: "readonly",
+      onAccountsFilterClick: () => c(h.CASH_FLOW_CLICK_FILTER),
+      onBackClick: n,
+      sx: p,
+      title: s.title,
+      children: [
+        /* @__PURE__ */ e(x, {}),
+        /* @__PURE__ */ e(I, {}),
+        /* @__PURE__ */ e(
+          Y,
+          {
+            ariaLabelClose: s.close_settings_aria,
+            isOpen: E,
+            onClose: () => u(!1),
+            shouldShowHeaderBorders: !1,
+            title: s.cashflow_settings,
+            children: /* @__PURE__ */ e(v, {})
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ e(
+    m,
+    {
+      onBackClick: n,
+      sx: { height: "100%", overflow: "auto" },
+      title: s.title,
+      children: /* @__PURE__ */ e(N, {})
+    }
+  );
+}, le = y($);
+export {
+  le as default
+};

package/dist/cashflow/api/CashflowApi/index.es.js

@@ -0,0 +1,25 @@
+import { getUnixTime as s } from "date-fns/getUnixTime";
+import { Fetch as h } from "../../../common/utils/Fetch/index.es.js";
+import { ApiEndpoints as n } from "../../../common/constants/ApiEndpoints/index.es.js";
+class E {
+  fetchInstance;
+  constructor(e, t) {
+    this.fetchInstance = new h(e, t);
+  }
+  addCashflowEvent = async (e) => this.fetchInstance.post(n.CASHFLOW_EVENTS, { ...e }).then((t) => t);
+  addCashflowSequence = async (e) => this.fetchInstance.post(n.CASHFLOW_SEQUENCES, { ...e }).then((t) => t.cashflow_sequence);
+  getCashflowSequences = async () => this.fetchInstance.get(n.CASHFLOW_SEQUENCES).then((e) => e.cashflow_sequences);
+  getCashflowEventsByDateRange = async (e, t) => this.fetchInstance.get(
+    `${n.CASHFLOW_EVENTS}/from/${s(e)}/to/${s(t)}`
+  ).then((c) => c.cashflow_events);
+  deleteCashflowSequence = async (e) => this.fetchInstance.delete(`${n.CASHFLOW_SEQUENCES}/${e}`).then((t) => t);
+  getProjectedCashflowEvents = async (e, t) => this.fetchInstance.get(
+    `${n.CASHFLOW_SEQUENCES}/projected_events/from/${s(
+      e
+    )}/to/${s(t)}`
+  ).then((c) => c.cashflow_events);
+  updateCashflowSequence = async (e) => this.fetchInstance.put(`${n.CASHFLOW_SEQUENCES}/${e.guid}`, e).then((t) => t.cashflow_sequence);
+}
+export {
+  E as CashflowApi
+};

package/dist/cashflow/components/CashflowAmountHeading/index.es.js

@@ -0,0 +1,32 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import a from "@mui/material/Stack";
+import { Text as p } from "@mxenabled/mxui";
+import { CurrencyText as m } from "../../../common/components/CurrencyText/index.es.js";
+const x = ({
+  amount: n,
+  isMobile: t = !1,
+  isTotal: o = !1,
+  label: c,
+  symbol: d,
+  tooltip: i
+}) => /* @__PURE__ */ e(
+  a,
+  {
+    bgcolor: o ? "background.default" : "transparent",
+    direction: t ? "row" : "column",
+    justifyContent: t ? "space-between" : "initial",
+    padding: t ? "14px 16px" : 0,
+    sx: { borderBottomLeftRadius: 4, borderBottomRightRadius: 4 },
+    children: [
+      !t && /* @__PURE__ */ r(m, { amount: n, component: "h2", variant: "H2" }),
+      /* @__PURE__ */ e(a, { alignItems: "center", component: "span", direction: "row", gap: 8, mt: 2, children: [
+        /* @__PURE__ */ r(p, { bold: o, variant: "Small", children: c }),
+        i
+      ] }),
+      t && /* @__PURE__ */ r(m, { amount: n, component: "h2", symbol: d, variant: "Small" })
+    ]
+  }
+);
+export {
+  x as default
+};

package/dist/cashflow/components/CashflowContent/index.es.js

@@ -0,0 +1,61 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import n from "react";
+import { observer as d } from "mobx-react-lite";
+import a from "@mui/material/Box";
+import p from "@mui/material/Tabs";
+import l from "@mui/material/Tab";
+import u from "../DetailsTab/index.es.js";
+import b from "../SummaryTab/index.es.js";
+import m from "../../../common/components/TabContentContainer/index.es.js";
+import { useGlobalCopyStore as x, useEvent as w } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as C } from "../../../common/hooks/useScreenSize/index.es.js";
+const _ = () => {
+  const { cashflow: t } = x(), { isDesktop: r } = C(), { onEvent: i } = w(), [e, c] = n.useState(0), f = (y, h) => {
+    c(h);
+  };
+  return n.useEffect(() => {
+    i(e === 0 ? "cash_flow_summary" : "cash_flow_details");
+  }, [e]), /* @__PURE__ */ s(a, { children: [
+    /* @__PURE__ */ s(
+      p,
+      {
+        "aria-label": t.cashflow_summary_and_details,
+        centered: !0,
+        onChange: f,
+        textColor: "primary",
+        value: e,
+        variant: "fullWidth",
+        children: [
+          /* @__PURE__ */ o(
+            l,
+            {
+              "aria-controls": "cashflow-tabpanel-0",
+              id: "cashflow-tab-0",
+              label: t.summary,
+              sx: {
+                textTransform: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ o(
+            l,
+            {
+              "aria-controls": "cashflow-tabpanel-1",
+              id: "cashflow-tab-1",
+              label: t.details,
+              sx: {
+                textTransform: "none"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(a, { sx: { mb: 32 } }),
+    /* @__PURE__ */ o(m, { index: 0, name: "cashflow", value: e, children: /* @__PURE__ */ o(a, { sx: { m: r ? 48 : 16 }, children: /* @__PURE__ */ o(b, {}) }) }),
+    /* @__PURE__ */ o(m, { index: 1, name: "cashflow", value: e, children: /* @__PURE__ */ o(a, { sx: { m: r ? 48 : 16 }, children: /* @__PURE__ */ o(u, {}) }) })
+  ] });
+}, R = d(_);
+export {
+  R as default
+};

package/dist/cashflow/components/CashflowHeading/index.es.js

@@ -0,0 +1,113 @@
+import { jsxs as d, jsx as o, Fragment as D } from "react/jsx-runtime";
+import c from "react";
+import { observer as T } from "mobx-react-lite";
+import { isAfter as A } from "date-fns/isAfter";
+import { isBefore as G } from "date-fns/isBefore";
+import { isToday as M } from "date-fns/isToday";
+import U from "@mui/material/Button";
+import u from "@mui/material/Divider";
+import C from "@mui/material/Stack";
+import { Text as f, Icon as z } from "@mxenabled/mxui";
+import { ManageIncome as B } from "../../../recurringtransactions/components/shared/recurringsettings/ManageIncome/index.es.js";
+import l from "../CashflowAmountHeading/index.es.js";
+import { useCashflowUiStore as j } from "../../context/hooks/index.es.js";
+import { useWidgetContainerProvider as k, useGlobalCopyStore as E, useRecurringTransactionsStore as R, useGlobalUiStore as F, useUserStore as O } from "../../../common/context/hooks/index.es.js";
+import P from "../../../common/components/InformationTooltip/index.es.js";
+import W from "../../../common/components/drawer/Drawer/index.es.js";
+const S = (m, t) => (n) => n.accountGuid && m.includes(n.accountGuid) && (M(n.expectedDate) || A(n.expectedDate, t.start)) && G(n.expectedDate, t.end), L = () => {
+  const { availableWidth: m } = k(), { cashflow: t } = E(), { upcomingExpenses: n, upcomingIncome: p } = R(), { selectedAccountGuids: s } = F(), { dateRange: a, selectedCashAccounts: h } = j(), { userProfile: w } = O(), [y, b] = c.useState(!1), v = c.useMemo(
+    () => n.filter(S(s, a)),
+    [a, s, n]
+  ), I = c.useMemo(
+    () => p.filter(S(s, a)),
+    [a, s, p]
+  ), _ = c.useMemo(
+    () => h.reduce((i, r) => i + (r?.balance || 0), 0),
+    [h]
+  ), g = v.reduce((i, r) => i + r.amount, 0), x = I.reduce((i, r) => i + r.amount, 0), H = _ - g + x, e = m < 725;
+  return /* @__PURE__ */ d(C, { sx: { mx: e ? 16 : 0, my: e ? 24 : 42 }, children: [
+    /* @__PURE__ */ d(
+      C,
+      {
+        border: e ? "1px solid" : "none",
+        borderColor: "border.light",
+        borderRadius: 2,
+        flexDirection: e ? "column" : "row",
+        gap: e ? 0 : 24,
+        justifyContent: "center",
+        children: [
+          /* @__PURE__ */ o(
+            l,
+            {
+              amount: _,
+              isMobile: e,
+              label: t.cash_and_bank
+            }
+          ),
+          e && /* @__PURE__ */ o(u, {}),
+          w?.has_completed_cash_flow_onboarding ? /* @__PURE__ */ d(D, { children: [
+            !e && /* @__PURE__ */ o(f, { sx: { fontSize: 25, lineHeight: 1 }, children: "+" }),
+            /* @__PURE__ */ o(
+              l,
+              {
+                amount: x,
+                isMobile: e,
+                label: t.to_be_received,
+                symbol: e ? "+" : void 0
+              }
+            )
+          ] }) : /* @__PURE__ */ o(
+            U,
+            {
+              onClick: () => b(!0),
+              startIcon: /* @__PURE__ */ o(z, { name: "add" }),
+              sx: { fontSize: 13 },
+              children: t.add_income
+            }
+          ),
+          e ? /* @__PURE__ */ o(u, {}) : /* @__PURE__ */ o(f, { sx: { fontSize: 25, lineHeight: 1 }, children: "-" }),
+          /* @__PURE__ */ o(
+            l,
+            {
+              amount: g,
+              isMobile: e,
+              label: t.to_be_paid_out,
+              symbol: e ? "-" : void 0
+            }
+          ),
+          e ? /* @__PURE__ */ o(u, {}) : /* @__PURE__ */ o(f, { sx: { fontSize: 25, lineHeight: 1 }, children: "=" }),
+          /* @__PURE__ */ o(
+            l,
+            {
+              amount: H,
+              isMobile: e,
+              isTotal: e,
+              label: t.remaining_cash,
+              tooltip: /* @__PURE__ */ o(
+                P,
+                {
+                  body: t.remaining_income_tooltip_body,
+                  title: t.remaining_income_tooltip_title
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(
+      W,
+      {
+        ariaLabelClose: t.close_manage_income_aria,
+        isOpen: y,
+        onClose: () => b(!1),
+        shouldShowHeaderBorders: !1,
+        title: t.manage_income,
+        children: /* @__PURE__ */ o(B, {})
+      }
+    )
+  ] });
+}, se = T(L);
+export {
+  se as default
+};