@mx-cartographer/experiences 6.25.3-alpha.al2 → 6.25.3-alpha.mega2

package/dist/notifications/stores/NotificationStore.js

@@ -0,0 +1,192 @@
+import { makeAutoObservable as o, observable as r, runInAction as p } from "mobx";
+import "bowser";
+import "date-fns/getUnixTime";
+import "date-fns/intlFormat";
+import "../../common/constants/Account.js";
+import "../../common/constants/Category.js";
+import "date-fns/addMonths";
+import "date-fns/addQuarters";
+import "date-fns/addWeeks";
+import "date-fns/addYears";
+import "date-fns/getDay";
+import "date-fns/isBefore";
+import "date-fns/nextDay";
+import "date-fns/setDate";
+import "date-fns/startOfToday";
+import "date-fns/fromUnixTime";
+import "react";
+import "numeral";
+import "@mui/material";
+import { NotificationApi as t } from "../../common/api/NotificationApi.js";
+import "react/jsx-runtime";
+import "@mui/material/Button";
+import "@mxenabled/mxui";
+import "@mui/material/Tooltip";
+import "@mui/material/Box";
+import "@mui/material/IconButton";
+import "../../common/components/accountfilter/AccountFilterOptions.js";
+import "../../common/context/GlobalDataProvider.js";
+import "../../common/context/WidgetContainerProvider.js";
+import "@mui/material/styles/useTheme";
+import "@mui/material/useMediaQuery";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/isSameMonth";
+import "date-fns/startOfMonth";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "@mxenabled/mx-icons";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import "d3";
+import "@mui/material/styles";
+import "@mui/x-charts";
+import "../../common/components/charts/linechart/CustomLegend.js";
+import "@mui/x-charts/ChartsTooltip";
+import "@mui/material/Stack";
+import "../../common/components/charts/stackedlinechart/CustomAreaTooltip.js";
+import "date-fns/differenceInCalendarDays";
+import "date-fns/endOfToday";
+import "date-fns/endOfYear";
+import "date-fns/startOfYear";
+import "date-fns/subDays";
+import "date-fns/subYears";
+import "@mui/material/ButtonGroup";
+import "@mui/material/Tab";
+import "@mui/material/Tabs";
+import "@mui/material/ToggleButton";
+import "@mui/material/ToggleButtonGroup";
+import "@mui/material/Dialog";
+import "@mui/material/DialogContent";
+import "../../common/components/ErrorBoundary.js";
+import "@mui/material/Card";
+import "@mui/material/CardContent";
+import "@mui/material/CardHeader";
+import "../../common/components/WidgetContainer.js";
+import "../../common/components/ConnectDrawer.js";
+import "uuid";
+import "@mui/material/CircularProgress";
+import "../../common/components/SearchBox.js";
+import "@mui/material/FormControlLabel";
+import "@mui/material/Radio";
+import "@mui/material/Avatar";
+import "@mui/material/ListItem";
+import "@mui/material/ListItemAvatar";
+import "@mui/material/ListItemButton";
+import "@mui/material/ListItemText";
+import "@mui/material/ListItemIcon";
+import "../../common/components/ListItemAction.js";
+import "@mui/material/MenuItem";
+import "@mui/material/TextField";
+import "@mui/material/Switch";
+import "../../accounts/AccountsWidget.js";
+import "../../accounts/AccountsMiniWidget.js";
+import "../../accounts/ConnectMiniWidget.js";
+import "../../accounts/components/detailsdrawer/Accounts/AccountDetailsHeader.js";
+import "../../accounts/components/detailsdrawer/Accounts/AccountDetailsContent.js";
+import "../../common/types/Account.js";
+import "posthog-js";
+import "../../cashflow/CashflowMiniWidget.js";
+import "../../cashflow/CashflowWidget.js";
+import "../../cashflow/CashflowOnboarding.js";
+import "date-fns/differenceInDays";
+import "../../categories/components/CategorySelector.js";
+import "../../categories/components/CategorySelectorDrawer.js";
+import "../../categories/components/CategoryRow.js";
+import "../../debts/DebtsWidget.js";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import "@mui/material/Divider";
+import "@mui/material/List";
+import "../../finstrong/components/FinancialStrengthGraph.js";
+import "../../finstrong/components/CreditScoreGraph.js";
+import "../../finstrong/FinstrongWidget.js";
+import "../../goals/GoalsWidget.js";
+import "../../goals/GoalsMicroWidget.js";
+import "../../investments/util/InvestmentUtil.js";
+import "../../merchants/components/MerchantLookup.js";
+import "../../networth/components/NetWorthChart.js";
+import "../../networth/components/NetWorthList.js";
+import "../../networth/components/NetWorthSummary.js";
+import "../../networth/NetWorthMicroWidget.js";
+import "../../networth/NetWorthWidget.js";
+import { filterRecentNotifications as m } from "../utils/NotificationUtils.js";
+import "../components/NotificationList.js";
+import "../components/NotificationDrawer.js";
+import "date-fns/formatISO";
+import "../../transactions/constants/Analytics.js";
+import "../../transactions/constants/Transaction.js";
+import "../../transactions/components/shared/transactionlist/TransactionRow.js";
+import "../../transactions/components/shared/TransactionList.js";
+import "../../transactions/components/shared/TransactionTable.js";
+import "../../transactions/components/shared/TransactionDetails.js";
+import "../../transactions/components/transactionwidget/AddAccountModal.js";
+import "../../transactions/TransactionWidget.js";
+import "../../settings/SettingsWidget.js";
+import "../../settings/components/SettingsWidgetContents.js";
+import "../../settings/components/profile/ProfileTab.js";
+import "../../settings/components/devices/DeviceTab.js";
+import "../../settings/NotificationSettingsWidget.js";
+import "../../settings/components/notifications/NotificationSettings.js";
+import "../../settings/components/notifications/AccountNotificationProfiles.js";
+import "../../settings/components/notifications/BudgetNotificationProfiles.js";
+import "../../settings/components/notifications/InsightsNotificationProfiles.js";
+import "../../settings/components/transactionrules/TransactionRulesTab.js";
+import "../../recurringtransactions/RecurringTransactionsWidget.js";
+import "../../recurringtransactions/RecurringTransactionsMiniWidget.js";
+import "../../recurringtransactions/RecurringTransactionsMicroWidget.js";
+import "date-fns/isAfter";
+import "date-fns/parseISO";
+import "date-fns/subQuarters";
+import "date-fns/lastDayOfMonth";
+import "date-fns/setDayOfYear";
+import "../../recurringtransactions/components/shared/RecurringSettings.js";
+import "../../recurringtransactions/components/shared/recurringsettings/ManageIncome.js";
+import "../../recurringtransactions/components/shared/recurringsettings/ManageExpenses.js";
+import "../../recurringtransactions/components/shared/recurringsettings/SelectTransaction.js";
+import "../../recurringtransactions/components/shared/recurringsettings/AddRecurringTransactionDetails.js";
+import "../../trends/TrendsFullWidget.js";
+import "../../trends/TrendsMiniWidget.js";
+import "../../trends/TrendsMicroWidget.js";
+import "../../trends/TrendsWidget.js";
+import "date-fns/addSeconds";
+import "date-fns/getMonth";
+class oo {
+  globalStore;
+  api = new t("/", "");
+  isLoading = !0;
+  notifications = [];
+  recentNotifications = [];
+  constructor(i) {
+    this.globalStore = i, this.api = new t(i.endpoint, i.sessionToken), o(this, { notifications: r });
+  }
+  // Used in Money Dashboard
+  get newNotifications() {
+    return this.recentNotifications.filter((i) => !i.has_been_viewed);
+  }
+  loadNotifications = async () => {
+    try {
+      this.isLoading = !0;
+      const i = await this.api.getNotifications();
+      p(() => {
+        this.notifications = i, this.recentNotifications = m(i), this.isLoading = !1;
+      });
+    } catch (i) {
+      console.error(`Error occurred while loading notifications: ${i}`);
+    }
+  };
+  markAllAsViewed = async () => {
+    this.notifications.forEach((i) => i.has_been_viewed = !0), await this.api.markAllAsViewed(), await this.loadNotifications();
+  };
+  updateNotification = async (i) => {
+    i.has_been_viewed = !0, await this.api.updateNotification(i);
+  };
+}
+export {
+  oo as NotificationStore
+};
+//# sourceMappingURL=NotificationStore.js.map

package/dist/notifications/stores/NotificationStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationStore.js","sources":["../../../src/notifications/stores/NotificationStore.ts"],"sourcesContent":["import { makeAutoObservable, observable, runInAction } from 'mobx'\n\nimport { NotificationApi, type Notification, GlobalStore } from '../../common'\n\nimport { filterRecentNotifications } from '../utils/NotificationUtils'\nexport class NotificationStore {\n  globalStore: GlobalStore\n  api = new NotificationApi('/', '')\n\n  isLoading: boolean = true\n  notifications: Notification[] = []\n  recentNotifications: Notification[] = []\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n    this.api = new NotificationApi(globalStore.endpoint, globalStore.sessionToken)\n\n    makeAutoObservable(this, { notifications: observable })\n  }\n\n  // Used in Money Dashboard\n  get newNotifications(): Notification[] {\n    return this.recentNotifications.filter((n) => !n.has_been_viewed)\n  }\n\n  loadNotifications = async () => {\n    try {\n      this.isLoading = true\n      const data = await this.api.getNotifications()\n\n      runInAction(() => {\n        this.notifications = data\n        this.recentNotifications = filterRecentNotifications(data)\n        this.isLoading = false\n      })\n    } catch (error) {\n      console.error(`Error occurred while loading notifications: ${error}`)\n    }\n  }\n\n  markAllAsViewed = async () => {\n    // Optimistically update the UI\n    this.notifications.forEach((n) => (n.has_been_viewed = true))\n    // Update on the server\n    // (NOTE: The notifications/mark_all_as_viewed endpoint is broken, but still returns 202)\n    await this.api.markAllAsViewed()\n    await this.loadNotifications()\n  }\n\n  updateNotification = async (notification: Notification) => {\n    notification.has_been_viewed = true\n    await this.api.updateNotification(notification)\n  }\n}\n"],"names":["NotificationStore","NotificationApi","globalStore","makeAutoObservable","observable","n","data","runInAction","filterRecentNotifications","error","notification"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAMA,GAAkB;AAAA,EAC7B;AAAA,EACA,MAAM,IAAIC,EAAgB,KAAK,EAAE;AAAA,EAEjC,YAAqB;AAAA,EACrB,gBAAgC,CAAA;AAAA,EAChC,sBAAsC,CAAA;AAAA,EAEtC,YAAYC,GAA0B;AACpC,SAAK,cAAcA,GACnB,KAAK,MAAM,IAAID,EAAgBC,EAAY,UAAUA,EAAY,YAAY,GAE7EC,EAAmB,MAAM,EAAE,eAAeC,EAAY,CAAA;AAAA,EACxD;AAAA;AAAA,EAGA,IAAI,mBAAmC;AACrC,WAAO,KAAK,oBAAoB,OAAO,CAACC,MAAM,CAACA,EAAE,eAAe;AAAA,EAClE;AAAA,EAEA,oBAAoB,YAAY;AAC1B,QAAA;AACF,WAAK,YAAY;AACjB,YAAMC,IAAO,MAAM,KAAK,IAAI,iBAAiB;AAE7C,MAAAC,EAAY,MAAM;AAChB,aAAK,gBAAgBD,GAChB,KAAA,sBAAsBE,EAA0BF,CAAI,GACzD,KAAK,YAAY;AAAA,MAAA,CAClB;AAAA,aACMG,GAAO;AACN,cAAA,MAAM,+CAA+CA,CAAK,EAAE;AAAA,IACtE;AAAA,EAAA;AAAA,EAGF,kBAAkB,YAAY;AAE5B,SAAK,cAAc,QAAQ,CAACJ,MAAOA,EAAE,kBAAkB,EAAK,GAGtD,MAAA,KAAK,IAAI,mBACf,MAAM,KAAK;EAAkB;AAAA,EAG/B,qBAAqB,OAAOK,MAA+B;AACzD,IAAAA,EAAa,kBAAkB,IACzB,MAAA,KAAK,IAAI,mBAAmBA,CAAY;AAAA,EAAA;AAElD;"}

package/dist/notifications/utils/NotificationUtils.js

@@ -0,0 +1,17 @@
+import { fromUnixTime as n, isSameDay as a } from "date-fns";
+const S = (e, t) => {
+  const r = n(t[e].delivered_at), o = n(t[e - 1]?.delivered_at);
+  return !a(r, o);
+};
+function s(e) {
+  const r = Math.floor(Date.now() / 1e3);
+  return e.filter((o) => {
+    const i = o.delivered_at;
+    return r - i <= 604800;
+  });
+}
+export {
+  s as filterRecentNotifications,
+  S as shouldShowDate
+};
+//# sourceMappingURL=NotificationUtils.js.map

package/dist/notifications/utils/NotificationUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationUtils.js","sources":["../../../src/notifications/utils/NotificationUtils.ts"],"sourcesContent":["import { fromUnixTime, isSameDay } from 'date-fns'\n\nimport { Notification } from '../../common'\n\nexport const sortByDate = (a: Notification, b: Notification) => {\n  return b.delivered_at - a.delivered_at\n}\n\nexport const shouldShowDate = (index: number, notifications: Notification[]) => {\n  const currentDate = fromUnixTime(notifications[index].delivered_at)\n  const previousDate = fromUnixTime(notifications[index - 1]?.delivered_at)\n\n  return !isSameDay(currentDate, previousDate)\n}\n\nexport const hasInsetBorder = (index: number, notifications: Notification[]) => {\n  const currentDate = fromUnixTime(notifications[index].delivered_at)\n  const nextDate = fromUnixTime(notifications[index + 1]?.delivered_at)\n\n  return isSameDay(currentDate, nextDate)\n}\n\nexport function filterRecentNotifications(notifications: Notification[]): Notification[] {\n  const SEVEN_DAYS_IN_SECONDS = 7 * 24 * 60 * 60\n  const currentTime = Math.floor(Date.now() / 1000)\n\n  return notifications.filter((notification: Notification) => {\n    const deliveredAt = notification.delivered_at\n    return currentTime - deliveredAt <= SEVEN_DAYS_IN_SECONDS\n  })\n}\n"],"names":["shouldShowDate","index","notifications","currentDate","fromUnixTime","previousDate","isSameDay","filterRecentNotifications","currentTime","notification","deliveredAt"],"mappings":";AAQa,MAAAA,IAAiB,CAACC,GAAeC,MAAkC;AAC9E,QAAMC,IAAcC,EAAaF,EAAcD,CAAK,EAAE,YAAY,GAC5DI,IAAeD,EAAaF,EAAcD,IAAQ,CAAC,GAAG,YAAY;AAEjE,SAAA,CAACK,EAAUH,GAAaE,CAAY;AAC7C;AASO,SAASE,EAA0BL,GAA+C;AAEvF,QAAMM,IAAc,KAAK,MAAM,KAAK,IAAA,IAAQ,GAAI;AAEzC,SAAAN,EAAc,OAAO,CAACO,MAA+B;AAC1D,UAAMC,IAAcD,EAAa;AACjC,WAAOD,IAAcE,KAAe;AAAA,EAAA,CACrC;AACH;"}

package/dist/recurringtransactions/RecurringTransactionsMicroWidget.js

@@ -0,0 +1,320 @@
+import { jsx as t, jsxs as l, Fragment as j } from "react/jsx-runtime";
+import m from "react";
+import { observer as k } from "mobx-react-lite";
+import { endOfMonth as F } from "date-fns/endOfMonth";
+import { endOfToday as $ } from "date-fns/endOfToday";
+import { startOfMonth as H } from "date-fns/startOfMonth";
+import { startOfToday as K } from "date-fns/startOfToday";
+import { subDays as V } from "date-fns/subDays";
+import n from "@mui/material/Stack";
+import Z from "@mui/material/styles/useTheme";
+import { Text as B, P } from "@mxenabled/mxui";
+import "bowser";
+import "date-fns/getUnixTime";
+import { ANALYTICS_EVENTS as g } from "../common/constants/Analytics.js";
+import "date-fns/intlFormat";
+import "../common/constants/Account.js";
+import "../common/constants/Category.js";
+import "date-fns/addMonths";
+import "date-fns/addQuarters";
+import "date-fns/addWeeks";
+import "date-fns/addYears";
+import "date-fns/getDay";
+import "date-fns/isBefore";
+import "date-fns/nextDay";
+import "date-fns/setDate";
+import "date-fns/fromUnixTime";
+import { formatCurrency as X } from "../common/utils/NumberFormatting.js";
+import "@mui/material";
+import "@mui/material/Button";
+import "@mui/material/Tooltip";
+import "@mui/material/Box";
+import "@mui/material/IconButton";
+import "../common/components/accountfilter/AccountFilterOptions.js";
+import { useEvent as Y, useAccountStore as q, useGlobalUiStore as J, useRecurringTransactionsStore as Q, useTransactionStore as tt, useGlobalCopyStore as rt } from "../common/context/hooks.js";
+import "../common/context/GlobalDataProvider.js";
+import "../common/context/WidgetContainerProvider.js";
+import "@mui/material/useMediaQuery";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import "date-fns/format";
+import "date-fns/isSameMonth";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "@mxenabled/mx-icons";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import "d3";
+import "@mui/material/styles";
+import "@mui/x-charts";
+import "../common/components/charts/linechart/CustomLegend.js";
+import "@mui/x-charts/ChartsTooltip";
+import "../common/components/charts/stackedlinechart/CustomAreaTooltip.js";
+import ot from "../common/components/charts/StatusBar.js";
+import "date-fns/differenceInCalendarDays";
+import "date-fns/endOfYear";
+import "date-fns/startOfYear";
+import "date-fns/subYears";
+import "@mui/material/ButtonGroup";
+import "@mui/material/Tab";
+import "@mui/material/Tabs";
+import "@mui/material/ToggleButton";
+import "@mui/material/ToggleButtonGroup";
+import "@mui/material/Dialog";
+import "@mui/material/DialogContent";
+import "../common/components/ErrorBoundary.js";
+import it from "../common/components/MicroWidgetContainer.js";
+import "@mui/material/Card";
+import "@mui/material/CardHeader";
+import "@mui/material/CardContent";
+import { useDimensions as et } from "../common/hooks/useDimensions.js";
+import "../common/components/WidgetContainer.js";
+import "../common/components/ConnectDrawer.js";
+import "uuid";
+import mt from "../common/components/Loader.js";
+import "../common/components/SearchBox.js";
+import "@mui/material/FormControlLabel";
+import "@mui/material/Radio";
+import "@mui/material/Avatar";
+import "@mui/material/ListItem";
+import "@mui/material/ListItemAvatar";
+import "@mui/material/ListItemButton";
+import "@mui/material/ListItemText";
+import "@mui/material/ListItemIcon";
+import "../common/components/ListItemAction.js";
+import "@mui/material/MenuItem";
+import "@mui/material/TextField";
+import "@mui/material/Switch";
+import "mobx";
+import "../accounts/AccountsWidget.js";
+import "../accounts/AccountsMiniWidget.js";
+import "../accounts/ConnectMiniWidget.js";
+import "../accounts/components/detailsdrawer/Accounts/AccountDetailsHeader.js";
+import "../accounts/components/detailsdrawer/Accounts/AccountDetailsContent.js";
+import "../common/types/Account.js";
+import "posthog-js";
+import "../cashflow/CashflowMiniWidget.js";
+import "../cashflow/CashflowWidget.js";
+import "../cashflow/CashflowOnboarding.js";
+import "date-fns/differenceInDays";
+import "../categories/components/CategorySelector.js";
+import "../categories/components/CategorySelectorDrawer.js";
+import "../categories/components/CategoryRow.js";
+import "../debts/DebtsWidget.js";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import "@mui/material/Divider";
+import "@mui/material/List";
+import "../finstrong/components/FinancialStrengthGraph.js";
+import "../finstrong/components/CreditScoreGraph.js";
+import "../finstrong/FinstrongWidget.js";
+import "../goals/GoalsWidget.js";
+import "../goals/GoalsMicroWidget.js";
+import "../investments/util/InvestmentUtil.js";
+import "../merchants/components/MerchantLookup.js";
+import "../networth/components/NetWorthChart.js";
+import "../networth/components/NetWorthList.js";
+import "../networth/components/NetWorthSummary.js";
+import "../networth/NetWorthMicroWidget.js";
+import "../networth/NetWorthWidget.js";
+import "../notifications/components/NotificationList.js";
+import "../notifications/components/NotificationDrawer.js";
+import "date-fns/formatISO";
+import "../transactions/constants/Analytics.js";
+import "../transactions/constants/Transaction.js";
+import "../transactions/components/shared/transactionlist/TransactionRow.js";
+import "../transactions/components/shared/TransactionList.js";
+import "../transactions/components/shared/TransactionTable.js";
+import "../transactions/components/shared/TransactionDetails.js";
+import "../transactions/components/transactionwidget/AddAccountModal.js";
+import "../transactions/TransactionWidget.js";
+import "../settings/SettingsWidget.js";
+import "../settings/components/SettingsWidgetContents.js";
+import "../settings/components/profile/ProfileTab.js";
+import "../settings/components/devices/DeviceTab.js";
+import "../settings/NotificationSettingsWidget.js";
+import "../settings/components/notifications/NotificationSettings.js";
+import "../settings/components/notifications/AccountNotificationProfiles.js";
+import "../settings/components/notifications/BudgetNotificationProfiles.js";
+import "../settings/components/notifications/InsightsNotificationProfiles.js";
+import "../settings/components/transactionrules/TransactionRulesTab.js";
+import "./RecurringTransactionsWidget.js";
+import "./RecurringTransactionsMiniWidget.js";
+import "date-fns/isAfter";
+import "date-fns/parseISO";
+import "date-fns/subQuarters";
+import "date-fns/lastDayOfMonth";
+import "date-fns/setDayOfYear";
+import "./components/shared/RecurringSettings.js";
+import "./components/shared/recurringsettings/ManageIncome.js";
+import "./components/shared/recurringsettings/ManageExpenses.js";
+import "./components/shared/recurringsettings/SelectTransaction.js";
+import "./components/shared/recurringsettings/AddRecurringTransactionDetails.js";
+import "../trends/TrendsFullWidget.js";
+import "../trends/TrendsMiniWidget.js";
+import "../trends/TrendsMicroWidget.js";
+import "../trends/TrendsWidget.js";
+import "date-fns/addSeconds";
+import "date-fns/getMonth";
+import { MerchantLogosRow as pt } from "./components/micro/MerchantLogosRow.js";
+import { OverlappingMerchantLogos as nt } from "./components/micro/OverlappingMerchantLogos.js";
+import { RecurrenceLegend as st } from "./components/micro/RecurrenceLegend.js";
+import { ZeroStateMicroWidget as ct } from "./ZeroStateMicroWidget.js";
+const di = k(
+  ({ onCTAClick: C }) => {
+    const [s, R] = m.useState(!1), { onEvent: f } = Y(), c = Z(), { accounts: h } = q(), [b, { width: S }] = et(), { isCopyLoaded: E, isInitialized: x, selectedAccountGuids: L, setSelectedAccounts: I } = J(), {
+      loadRepeatingTransactions: w,
+      upcomingRecurrences: r,
+      expenseTotal: o,
+      missedExpenseTotal: a,
+      paidExpenseTotal: u,
+      setDateRange: A,
+      upcomingExpenseTotal: _
+    } = Q(), { setFilter: D } = tt(), { recurring: i, budgets: N } = rt();
+    m.useEffect(() => {
+      I(h);
+    }, [h]), m.useEffect(() => {
+      x && (D({
+        dateRange: { start: V(K(), 90), end: $() },
+        accounts: L
+      }), A({ start: H(/* @__PURE__ */ new Date()), end: F(/* @__PURE__ */ new Date()) }), w().finally(), R(!0));
+    }, [x]), m.useEffect(() => {
+      s && f(g.RECURRING_TRANSACTIONS_LOAD_WIDGET, {
+        state: r.length > 0 ? "default" : "zeroState"
+      });
+    }, [s]);
+    const p = S <= 288, y = S >= 450, O = m.useMemo(() => {
+      const e = [
+        { color: c.palette.success.main, percentage: `${u / o}` }
+      ];
+      return a && e.push({
+        color: c.palette.error.main,
+        percentage: `${a / o}`
+      }), e;
+    }, [
+      u,
+      o,
+      a,
+      c.palette.success.main,
+      c.palette.error.main
+    ]), d = m.useMemo(() => X(o, o === 0 ? "0,0" : "0,0.00"), [o]), M = () => {
+      f(
+        r.length > 0 ? g.RECURRING_TRANSACTIONS_CLICK_GET_STARTED : g.RECURRING_TRANSACTIONS_CLICK_VIEW_ALL
+      ), C();
+    };
+    if (!E || !s) return /* @__PURE__ */ t(mt, { height: 100 });
+    const v = 32, G = r.length > 0, W = () => G ? p ? /* @__PURE__ */ t(
+      nt,
+      {
+        logoSize: v,
+        maxLogos: 3,
+        upcomingRecurrences: r.slice(0, 3)
+      }
+    ) : /* @__PURE__ */ t(pt, { maxLogos: 3, upcomingRecurrences: r.slice(0, 3) }) : /* @__PURE__ */ t(n, { sx: { width: p ? 64 : 104 } }), z = [
+      {
+        amount: u,
+        bgColor: "success.main",
+        label: i.paid
+      },
+      {
+        amount: a,
+        bgColor: "error.main",
+        label: i.missed
+      },
+      {
+        amount: _,
+        bgColor: "border.light",
+        label: i.upcoming
+      }
+    ], T = s && !r?.length;
+    return /* @__PURE__ */ t(
+      it,
+      {
+        className: "mx-recurring-transaction-microwidget",
+        ctaLabel: T ? N.get_started_cta : i.primary_cta,
+        onCTAClick: M,
+        title: i.recurring_expenses,
+        children: T ? /* @__PURE__ */ t(ct, {}) : /* @__PURE__ */ l(j, { children: [
+          /* @__PURE__ */ l(
+            n,
+            {
+              ref: b,
+              sx: {
+                flexDirection: "row",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ l(
+                  n,
+                  {
+                    sx: [
+                      d.length >= 10 && p ? { flexDirection: "column" } : { flexDirection: "row", gap: 2 },
+                      {
+                        alignItems: "baseline",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      }
+                    ],
+                    children: [
+                      /* @__PURE__ */ t(
+                        B,
+                        {
+                          sx: { width: "100%" },
+                          variant: d.length >= 10 && p ? "H3" : "H2",
+                          children: d
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        P,
+                        {
+                          sx: {
+                            pr: 12
+                          },
+                          variant: "XSmall",
+                          children: i.expected
+                        }
+                      )
+                    ]
+                  }
+                ),
+                W()
+              ]
+            }
+          ),
+          /* @__PURE__ */ l(n, { sx: { pt: 12 }, children: [
+            /* @__PURE__ */ t(ot, { data: O }),
+            /* @__PURE__ */ t(
+              n,
+              {
+                sx: {
+                  alignItems: "center",
+                  flexDirection: "row",
+                  gap: 16,
+                  mt: 4
+                },
+                children: z.map((e, U) => /* @__PURE__ */ t(
+                  st,
+                  {
+                    amount: e.amount,
+                    bgcolor: e.bgColor,
+                    isLargeScreen: y,
+                    isSmallScreen: p,
+                    label: e.label
+                  },
+                  `recurrence-legend-${U}`
+                ))
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+);
+export {
+  di as RecurringTransactionsMicroWidget
+};
+//# sourceMappingURL=RecurringTransactionsMicroWidget.js.map

package/dist/recurringtransactions/RecurringTransactionsMicroWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecurringTransactionsMicroWidget.js","sources":["../../src/recurringtransactions/RecurringTransactionsMicroWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { endOfToday } from 'date-fns/endOfToday'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { subDays } from 'date-fns/subDays'\n\nimport Stack from '@mui/material/Stack'\nimport useTheme from '@mui/material/styles/useTheme'\n\nimport { P, Text } from '@mxenabled/mxui'\n\nimport {\n  ANALYTICS_EVENTS,\n  formatCurrency,\n  Loader,\n  MicroWidgetContainer,\n  StatusBar,\n  useAccountStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useTransactionStore,\n} from '../common'\n\nimport { useDimensions } from '../common/hooks/useDimensions'\n\nimport { MerchantLogosRow } from './components/micro/MerchantLogosRow'\nimport { OverlappingMerchantLogos } from './components/micro/OverlappingMerchantLogos'\nimport { RecurrenceLegend } from './components/micro/RecurrenceLegend'\nimport { ZeroStateMicroWidget } from './ZeroStateMicroWidget'\n\ninterface RecurringTransactionsMicroWidgetProps {\n  onCTAClick: () => void\n}\n\nexport const RecurringTransactionsMicroWidget = observer(\n  ({ onCTAClick }: RecurringTransactionsMicroWidgetProps) => {\n    const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)\n\n    const { onEvent } = useEvent()\n    const theme = useTheme()\n    const { accounts } = useAccountStore()\n    const [containerRef, { width }] = useDimensions()\n    const { isCopyLoaded, isInitialized, selectedAccountGuids, setSelectedAccounts } =\n      useGlobalUiStore()\n    const {\n      loadRepeatingTransactions,\n      upcomingRecurrences,\n      expenseTotal,\n      missedExpenseTotal,\n      paidExpenseTotal,\n      setDateRange,\n      upcomingExpenseTotal,\n    } = useRecurringTransactionsStore()\n    const { setFilter } = useTransactionStore()\n    const { recurring: copy, budgets: budgetsCopy } = useGlobalCopyStore()\n\n    React.useEffect(() => {\n      setSelectedAccounts(accounts)\n    }, [accounts])\n\n    React.useEffect(() => {\n      if (isInitialized) {\n        setFilter({\n          dateRange: { start: subDays(startOfToday(), 90), end: endOfToday() },\n          accounts: selectedAccountGuids,\n        })\n        setDateRange({ start: startOfMonth(new Date()), end: endOfMonth(new Date()) })\n        loadRepeatingTransactions().finally()\n        setIsWidgetInitialized(true)\n      }\n    }, [isInitialized])\n\n    React.useEffect(() => {\n      if (isWidgetInitialized) {\n        onEvent(ANALYTICS_EVENTS.RECURRING_TRANSACTIONS_LOAD_WIDGET, {\n          state: upcomingRecurrences.length > 0 ? 'default' : 'zeroState',\n        })\n      }\n    }, [isWidgetInitialized])\n\n    const isSmallScreen = width <= 288\n    const isLargeScreen = width >= 450\n\n    const data = React.useMemo(() => {\n      const recurrence = [\n        { color: theme.palette.success.main, percentage: `${paidExpenseTotal / expenseTotal}` },\n      ]\n      if (missedExpenseTotal) {\n        recurrence.push({\n          color: theme.palette.error.main,\n          percentage: `${missedExpenseTotal / expenseTotal}`,\n        })\n      }\n      return recurrence\n    }, [\n      paidExpenseTotal,\n      expenseTotal,\n      missedExpenseTotal,\n      theme.palette.success.main,\n      theme.palette.error.main,\n    ])\n\n    const expectedExpenseTotalFormatted = React.useMemo(() => {\n      return formatCurrency(expenseTotal, expenseTotal === 0 ? '0,0' : '0,0.00')\n    }, [expenseTotal])\n\n    const handleCTAClick = () => {\n      onEvent(\n        upcomingRecurrences.length > 0\n          ? ANALYTICS_EVENTS.RECURRING_TRANSACTIONS_CLICK_GET_STARTED\n          : ANALYTICS_EVENTS.RECURRING_TRANSACTIONS_CLICK_VIEW_ALL,\n      )\n      onCTAClick()\n    }\n\n    if (!isCopyLoaded || !isWidgetInitialized) return <Loader height={100} />\n\n    const logoSize = 32\n\n    const hasLogos = upcomingRecurrences.length > 0\n\n    const renderLogosSection = () => {\n      if (!hasLogos) {\n        return <Stack sx={{ width: isSmallScreen ? 64 : 104 }} />\n      }\n\n      return isSmallScreen ? (\n        <OverlappingMerchantLogos\n          logoSize={logoSize}\n          maxLogos={3}\n          upcomingRecurrences={upcomingRecurrences.slice(0, 3)}\n        />\n      ) : (\n        <MerchantLogosRow maxLogos={3} upcomingRecurrences={upcomingRecurrences.slice(0, 3)} />\n      )\n    }\n\n    const recurrenceLegend = [\n      {\n        amount: paidExpenseTotal,\n        bgColor: 'success.main',\n        label: copy.paid,\n      },\n      {\n        amount: missedExpenseTotal,\n        bgColor: 'error.main',\n        label: copy.missed,\n      },\n      {\n        amount: upcomingExpenseTotal,\n        bgColor: 'border.light',\n        label: copy.upcoming,\n      },\n    ]\n    const showZeroState = isWidgetInitialized && !upcomingRecurrences?.length\n\n    return (\n      <MicroWidgetContainer\n        className=\"mx-recurring-transaction-microwidget\"\n        ctaLabel={showZeroState ? budgetsCopy.get_started_cta : copy.primary_cta}\n        onCTAClick={handleCTAClick}\n        title={copy.recurring_expenses}\n      >\n        {!showZeroState ? (\n          <>\n            <Stack\n              ref={containerRef}\n              sx={{\n                flexDirection: 'row',\n                justifyContent: 'space-between',\n              }}\n            >\n              <Stack\n                sx={[\n                  expectedExpenseTotalFormatted.length >= 10 && isSmallScreen\n                    ? { flexDirection: 'column' }\n                    : { flexDirection: 'row', gap: 2 },\n                  {\n                    alignItems: 'baseline',\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    whiteSpace: 'nowrap',\n                  },\n                ]}\n              >\n                <Text\n                  sx={{ width: '100%' }}\n                  variant={\n                    expectedExpenseTotalFormatted.length >= 10 && isSmallScreen ? 'H3' : 'H2'\n                  }\n                >\n                  {expectedExpenseTotalFormatted}\n                </Text>\n\n                <P\n                  sx={{\n                    pr: 12,\n                  }}\n                  variant=\"XSmall\"\n                >\n                  {copy.expected}\n                </P>\n              </Stack>\n              {renderLogosSection()}\n            </Stack>\n\n            <Stack sx={{ pt: 12 }}>\n              <StatusBar data={data} />\n\n              <Stack\n                sx={{\n                  alignItems: 'center',\n                  flexDirection: 'row',\n                  gap: 16,\n                  mt: 4,\n                }}\n              >\n                {recurrenceLegend.map((legend, index) => (\n                  <RecurrenceLegend\n                    amount={legend.amount}\n                    bgcolor={legend.bgColor}\n                    isLargeScreen={isLargeScreen}\n                    isSmallScreen={isSmallScreen}\n                    key={`recurrence-legend-${index}`}\n                    label={legend.label}\n                  />\n                ))}\n              </Stack>\n            </Stack>\n          </>\n        ) : (\n          <ZeroStateMicroWidget />\n        )}\n      </MicroWidgetContainer>\n    )\n  },\n)\n"],"names":["RecurringTransactionsMicroWidget","observer","onCTAClick","isWidgetInitialized","setIsWidgetInitialized","React","onEvent","useEvent","theme","useTheme","accounts","useAccountStore","containerRef","width","useDimensions","isCopyLoaded","isInitialized","selectedAccountGuids","setSelectedAccounts","useGlobalUiStore","loadRepeatingTransactions","upcomingRecurrences","expenseTotal","missedExpenseTotal","paidExpenseTotal","setDateRange","upcomingExpenseTotal","useRecurringTransactionsStore","setFilter","useTransactionStore","copy","budgetsCopy","useGlobalCopyStore","subDays","startOfToday","endOfToday","startOfMonth","endOfMonth","ANALYTICS_EVENTS","isSmallScreen","isLargeScreen","data","recurrence","expectedExpenseTotalFormatted","formatCurrency","handleCTAClick","jsx","Loader","logoSize","hasLogos","renderLogosSection","OverlappingMerchantLogos","MerchantLogosRow","Stack","recurrenceLegend","showZeroState","MicroWidgetContainer","ZeroStateMicroWidget","jsxs","Fragment","Text","StatusBar","legend","index","RecurrenceLegend"],"mappings":"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"}