@mx-cartographer/experiences 9.1.0-alpha.bb1 → 9.1.0

package/dist/recurringtransactions/index.es.js

@@ -1,12 +1,1014 @@
-import { a as n, d as r, i as s, n as i, o as e, r as t, s as c, t as g, u as o } from "../recurringtransactions-gbJ_NA8u.mjs";
+import { jsx as e, jsxs as c, Fragment as B } from "react/jsx-runtime";
+import x from "react";
+import { observer as T } from "mobx-react-lite";
+import { endOfMonth as z } from "date-fns/endOfMonth";
+import { endOfToday as J } from "date-fns/endOfToday";
+import { startOfMonth as k } from "date-fns/startOfMonth";
+import { startOfToday as Q } from "date-fns/startOfToday";
+import { subDays as ee } from "date-fns/subDays";
+import Be from "@mui/material/Alert";
+import Fe from "@mui/material/Snackbar";
+import { R as _e } from "../RecurringSettings-D8hBbXV_.mjs";
+import { M as Jn } from "../RecurringSettings-D8hBbXV_.mjs";
+import { addMonths as Ue } from "date-fns/addMonths";
+import { subMonths as Ye } from "date-fns/subMonths";
+import { isBefore as je } from "date-fns/isBefore";
+import q from "@mui/material/Grid";
+import he from "@mui/material/IconButton";
+import d from "@mui/material/Stack";
+import fe from "@mui/material/Tab";
+import Ke from "@mui/material/Tabs";
+import { Cancel as Se, CheckCircle as we, Schedule as Ve, MonetizationOn as qe, ChevronLeft as Ze, ChevronRight as Xe, CurrencyExchange as Je } from "@mxenabled/mx-icons";
+import { Text as h, MerchantLogo as te, InstitutionLogo as Qe, H3 as et, H2 as tt, P as Z } from "@mxenabled/mxui";
+import { g as nt, L as O, b as G } from "../Localization-DnoVyBNK.mjs";
+import { getWeeksInMonth as xe } from "date-fns/getWeeksInMonth";
+import { enCA as rt } from "date-fns/locale/en-CA";
+import { enUS as be } from "date-fns/locale/en-US";
+import { es as it } from "date-fns/locale/es";
+import { fr as ot } from "date-fns/locale/fr";
+import { frCA as at } from "date-fns/locale/fr-CA";
+import { useTheme as ne } from "@mui/material/styles";
+import { AdapterDateFns as st } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { DateCalendar as ct } from "@mui/x-date-pickers/DateCalendar";
+import { LocalizationProvider as lt } from "@mui/x-date-pickers/LocalizationProvider";
+import { isSameDay as dt } from "date-fns/isSameDay";
+import ut from "@mui/material/Badge";
+import { PickersDay as mt } from "@mui/x-date-pickers/PickersDay";
+import { I as F } from "../IconBacking-DgT8DCeh.mjs";
+import { u as b, a as U, h as _, f as Y, D as Ie, g as re } from "../hooks-97sNJ_lf.mjs";
+import { b as E, a as D, g as ye, e as pt, R as gt } from "../RecurringTransactionsUtil-CHWmqvW5.mjs";
+import { f as I, D as M } from "../DateFormats-HudZ3Bjs.mjs";
+import { T as W } from "../Sizes-DISGrlUg.mjs";
+import { A as v } from "../Analytics-WeZYytR0.mjs";
+import ht from "@mui/material/Button";
+import X from "@mui/material/Divider";
+import Ce from "@mui/material/List";
+import Me from "@mui/material/ListItem";
+import ft from "@mui/material/ListSubheader";
+import xt from "@mui/material/ListItemAvatar";
+import bt from "@mui/material/ListItemButton";
+import yt from "@mui/material/ListItemText";
+import { f as L } from "../NumberFormatting--XMeeBfr.mjs";
+import N from "@mui/material/Box";
+import { u as ve } from "../useScreenSize-mWpmnh5w.mjs";
+import { S as Le } from "../StatusBar-CPfSXe80.mjs";
+import { d as Ct } from "../ManageIncome-Dcsnnz86.mjs";
+import { c as er, M as tr, S as nr } from "../ManageIncome-Dcsnnz86.mjs";
+import { D as ie } from "../Drawer-DsnW2o0v.mjs";
+import { S as Ae } from "../SkeletonLoader-BaNboJjD.mjs";
+import { u as oe } from "../useWidgetLoadTimer-B0tB-yzL.mjs";
+import { L as ae } from "../Loader-CxeBwuPG.mjs";
+import { W as Rt } from "../WidgetContainer-DJnp6t6c.mjs";
+import { M as Tt } from "../MiniWidgetContainer-Bmv_WeUd.mjs";
+import { u as Dt } from "../useDimensions-CeDR9V8N.mjs";
+import { M as _t } from "../MicroWidgetContainer-B2NnKBgW.mjs";
+const j = {
+  gridRow: 1,
+  gridColumn: 1,
+  zIndex: 2
+}, K = (t) => t ? { margin: "0 0 -6px -4px" } : void 0, se = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(
+  F,
+  {
+    backingSx: { backgroundColor: "background.paper" },
+    size: n,
+    sx: { ...K(t) },
+    children: /* @__PURE__ */ e(Ve, { color: "primary", filled: !0, sx: { fontSize: n, ...j } })
+  }
+), ce = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(
+  F,
+  {
+    backingSx: { backgroundColor: "background.paper" },
+    size: n,
+    sx: { ...K(t) },
+    children: /* @__PURE__ */ e(
+      qe,
+      {
+        filled: !0,
+        sx: { color: "categories.income", fontSize: n, ...j }
+      }
+    )
+  }
+), le = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(
+  F,
+  {
+    backingSx: { backgroundColor: "background.paper" },
+    size: n,
+    sx: { ...K(t) },
+    children: /* @__PURE__ */ e(Se, { color: "error", filled: !0, sx: { fontSize: n, ...j } })
+  }
+), de = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(
+  F,
+  {
+    backingSx: { backgroundColor: "background.paper" },
+    size: n,
+    sx: { ...K(t) },
+    children: /* @__PURE__ */ e(we, { color: "success", filled: !0, sx: { fontSize: n, ...j } })
+  }
+), St = T(
+  ({ day: t, outsideCurrentMonth: n, ...r }) => {
+    const { recurring: i } = b(), { selectedAccountGuids: o } = U(), { recurrences: s, setSelectedDay: m } = _(), a = x.useMemo(
+      () => s.filter((f) => o.includes(f.accountGuid)),
+      [o, s]
+    ).filter(
+      (f) => dt(f.occurredOnDate || f.expectedDate, t)
+    ), l = a.some(
+      (f) => f.type !== E.Income && f.status === D.Upcoming
+    ), u = a.some(
+      (f) => f.type !== E.Income && f.status === D.Missed
+    ), g = a.some(
+      (f) => f.type !== E.Income && f.status === D.Paid
+    ), y = a.some((f) => f.type === E.Income), C = (l ? 1 : 0) + (u ? 1 : 0) + (g ? 1 : 0) + (y ? 1 : 0), S = [
+      g && i.paid,
+      u && i.missed,
+      l && i.upcoming,
+      y && i.income
+    ].filter(Boolean), A = S.length > 0 ? `${I(t, M.MONTH_DAY_YEAR)}, ${S.join(", ")}` : I(t, M.MONTH_DAY_YEAR);
+    return /* @__PURE__ */ e(
+      ut,
+      {
+        badgeContent: a.length > 0 && /* @__PURE__ */ c(B, { children: [
+          u && /* @__PURE__ */ e(le, { isOffset: !0 }),
+          g && /* @__PURE__ */ e(de, { isOffset: !0 }),
+          l && /* @__PURE__ */ e(se, { isOffset: !0 }),
+          y && /* @__PURE__ */ e(ce, { isOffset: !0 })
+        ] }),
+        overlap: "circular",
+        sx: {
+          "& .MuiBadge-badge": {
+            padding: 0,
+            marginRight: `${(C - 1) * 6 + 1}px`,
+            flexWrap: "nowrap"
+          }
+        },
+        children: /* @__PURE__ */ e(
+          mt,
+          {
+            "aria-label": A,
+            day: t,
+            onClick: () => m(t),
+            outsideCurrentMonth: n,
+            sx: {
+              "&.MuiPickersDay-root": {
+                ...n && {
+                  color: "text.disabled"
+                },
+                ...r.today && {
+                  color: "primary.main"
+                }
+              }
+            },
+            ...r
+          }
+        )
+      }
+    );
+  }
+), $ = ({ icon: t, label: n }) => /* @__PURE__ */ c(d, { alignItems: "center", flexDirection: "row", sx: { gap: 6 }, children: [
+  /* @__PURE__ */ e(t, {}),
+  /* @__PURE__ */ e(h, { variant: "caption", children: n })
+] }), wt = T(() => {
+  const { recurring: t } = b();
+  return /* @__PURE__ */ c(
+    d,
+    {
+      alignItems: "center",
+      "aria-hidden": !0,
+      flexDirection: "row",
+      gap: 16,
+      justifyContent: "center",
+      mt: 12,
+      children: [
+        /* @__PURE__ */ e($, { icon: se, label: t.expense }),
+        /* @__PURE__ */ e($, { icon: ce, label: t.income }),
+        /* @__PURE__ */ e($, { icon: le, label: t.missed }),
+        /* @__PURE__ */ e($, { icon: de, label: t.paid })
+      ]
+    }
+  );
+}), Re = 58, It = () => {
+  const t = nt();
+  return {
+    [O.EN_US]: be,
+    [O.EN_CA]: rt,
+    [O.FR]: ot,
+    [O.FR_CA]: at,
+    [O.ES]: it
+  }[t] || be;
+}, Ee = T(() => {
+  const t = ne(), { onEvent: n } = Y(), { recurring: r } = b(), { selectedDay: i, setDateRange: o } = _(), [s, m] = x.useState(
+    xe(/* @__PURE__ */ new Date()) * W + Re
+  ), p = (u) => {
+    m(xe(u) * W + Re), o({
+      start: k(u),
+      end: z(u)
+    }), a(u), n(v.RECURRING_TRANSACTIONS_CLICK_CALENDAR_RIGHT);
+  }, a = (u) => {
+    u && requestAnimationFrame(() => {
+      const g = document.getElementById("recurrence-list");
+      g?.setAttribute("tabindex", "-1"), g?.focus();
+    });
+  }, l = /* @__PURE__ */ e(
+    ct,
+    {
+      minDate: k(/* @__PURE__ */ new Date()),
+      onChange: a,
+      onMonthChange: p,
+      showDaysOutsideCurrentMonth: !0,
+      slots: {
+        day: St
+      },
+      sx: {
+        "& .MuiPickersArrowSwitcher-button": {
+          color: "primary.main",
+          "&:disabled": {
+            color: "action.disabled"
+          }
+        },
+        "& .MuiButtonBase-root.MuiPickersDay-root": {
+          borderRadius: "4px",
+          "&:focus, &:hover": {
+            borderRadius: "4px"
+          }
+        },
+        "& .MuiPickersCalendarHeader-root": {
+          mt: 0,
+          pl: 16,
+          pr: 8
+        },
+        "& .MuiPickersCalendarHeader-label": {
+          fontFamily: t.typography.body1.fontFamily,
+          fontSize: t.typography.body1.fontSize,
+          fontWeight: 600
+        },
+        "& .MuiDayCalendar-slideTransition": {
+          minHeight: s
+        },
+        "&.MuiDateCalendar-root": {
+          minHeight: s + W
+        },
+        "& .MuiButtonBase-root, .MuiDayCalendar-weekDayLabel": {
+          height: W,
+          width: W,
+          margin: 0
+        },
+        "& .MuiDayCalendar-weekDayLabel": {
+          fontFamily: t.typography.h3.fontFamily,
+          fontSize: t.typography.body2.fontSize
+        },
+        "& .MuiPickersDay-dayOutsideMonth": {
+          color: "text.secondary"
+        },
+        textTransform: "capitalize"
+      },
+      value: i,
+      views: ["day"]
+    }
+  );
+  return /* @__PURE__ */ e(d, { "aria-labelledby": "calendar-label", justifyContent: "center", role: "group", children: /* @__PURE__ */ c(lt, { adapterLocale: It(), dateAdapter: st, children: [
+    i && l,
+    !i && l,
+    /* @__PURE__ */ e(h, { id: "calendar-label", sx: { alignSelf: "center" }, variant: "body2", children: r.calendar_tooltip }),
+    /* @__PURE__ */ e(wt, {})
+  ] }) });
+}), Mt = (t) => {
+  if (t.type === E.Income)
+    return /* @__PURE__ */ e(ce, {});
+  switch (t.status) {
+    case D.Missed:
+      return /* @__PURE__ */ e(le, {});
+    case D.Paid:
+      return /* @__PURE__ */ e(de, {});
+    default:
+      return /* @__PURE__ */ e(se, {});
+  }
+}, vt = (t, n) => {
+  switch (t.status) {
+    case D.Paid:
+      return t.expectedDate ? G(
+        n.paid_on,
+        I(
+          t.occurredOnDate || t.expectedDate,
+          M.MONTH_DAY
+        )
+      ) : n.paid;
+    case D.Missed:
+      return G(
+        n.missed_on,
+        I(t.expectedDate, M.MONTH_DAY)
+      );
+    case D.Upcoming:
+      return G(
+        n.upcoming_on,
+        I(t.expectedDate, M.MONTH_DAY)
+      );
+    default:
+      return n.unknown;
+  }
+}, Te = ({
+  recurrence: t,
+  isMini: n = !1,
+  onRecurrenceClick: r = () => {
+  },
+  showOrdinal: i = !1
+}) => {
+  const { recurring: o } = b(), { detailedRepeatingTransactions: s } = _(), m = x.useMemo(
+    () => s.find((C) => C.guid === t.repeatingTransactionGuid),
+    [t, s]
+  ), p = t.type === E.Income, a = t.status === D.Paid, l = t.status === D.Missed, u = t.status === D.Upcoming;
+  let g = o.paid?.toLowerCase();
+  return l ? g = o.missed?.toLowerCase() : u && (g = i ? ye(o, m || {}, !0) : ye(o, m || {}, !1)), //TODO: implement common/components/ListItemRow.tsx
+  /* @__PURE__ */ e(Me, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ c(bt, { onClick: () => {
+    r(t);
+  }, children: [
+    /* @__PURE__ */ e(xt, { children: /* @__PURE__ */ e(
+      te,
+      {
+        categoryGuid: t.categoryGuid,
+        merchantGuid: t.merchantGuid
+      }
+    ) }),
+    /* @__PURE__ */ e(yt, { children: /* @__PURE__ */ c(
+      d,
+      {
+        direction: "row",
+        gap: 4,
+        sx: { justifyContent: "space-between", textOverflow: "ellipsis", textWrap: "nowrap" },
+        children: [
+          /* @__PURE__ */ c(d, { direction: "column", width: "50%", children: [
+            /* @__PURE__ */ e(h, { bold: !0, variant: "body1", children: t.name }),
+            /* @__PURE__ */ e(d, { alignItems: "center", direction: "row", gap: 6, children: n ? /* @__PURE__ */ c(d, { direction: "row", gap: 4, children: [
+              Mt(t),
+              /* @__PURE__ */ e(h, { variant: "caption", children: vt(t, o) })
+            ] }) : /* @__PURE__ */ c(B, { children: [
+              t.institutionGuid && /* @__PURE__ */ e(
+                Qe,
+                {
+                  alt: "",
+                  institutionGuid: t.institutionGuid,
+                  size: 12
+                }
+              ),
+              /* @__PURE__ */ e(h, { sx: { maxWidth: 250 }, variant: "caption", children: t.institutionName })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ c(d, { alignItems: "flex-end", width: "100%", children: [
+            /* @__PURE__ */ c(h, { bold: !0, color: p ? "success.main" : "text.primary", variant: "body1", children: [
+              p ? "+" : "",
+              L(t.amount, "0,0.00")
+            ] }),
+            !n && /* @__PURE__ */ c(
+              d,
+              {
+                direction: "row",
+                sx: {
+                  alignItems: "center",
+                  gap: 6,
+                  justifyContent: "flex-end",
+                  textTransform: "uppercase",
+                  width: "100%"
+                },
+                children: [
+                  a && /* @__PURE__ */ e(we, { color: "success", filled: !0, size: 12 }),
+                  l && /* @__PURE__ */ e(Se, { color: "error", filled: !0, size: 12 }),
+                  /* @__PURE__ */ e(h, { bold: !0, color: "text.secondary", variant: "caption", children: g })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}, P = T(
+  ({
+    recurrences: t,
+    isMini: n = !1,
+    onResetClick: r,
+    onRecurrenceClick: i,
+    sx: o = {},
+    title: s
+  }) => {
+    const { recurring: m } = b(), p = x.useMemo(() => pt(t), [t]);
+    return /* @__PURE__ */ c(d, { id: "recurrence-list", sx: { gap: 8, mt: 4, ...o }, tabIndex: -1, children: [
+      s && /* @__PURE__ */ c(
+        d,
+        {
+          sx: {
+            alignItems: "center",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            px: 24
+          },
+          children: [
+            /* @__PURE__ */ e(et, { bold: !0, variant: "body1", children: s }),
+            r && /* @__PURE__ */ e(ht, { onClick: r, size: "small", variant: "text", children: m.reset })
+          ]
+        }
+      ),
+      t.length === 0 ? /* @__PURE__ */ e(h, { fontStyle: "italic", sx: { py: 24, textAlign: "center" }, children: m.no_activities }) : /* @__PURE__ */ e(Ce, { "aria-label": s, children: n ? t.map((a, l) => /* @__PURE__ */ c(x.Fragment, { children: [
+        /* @__PURE__ */ e(
+          Te,
+          {
+            isMini: n,
+            onRecurrenceClick: i,
+            recurrence: a
+          }
+        ),
+        /* @__PURE__ */ e(X, { sx: { mx: 24 } })
+      ] }, `recurrence-${l}`)) : p.map((a, l) => /* @__PURE__ */ c(x.Fragment, { children: [
+        /* @__PURE__ */ e(Me, { children: /* @__PURE__ */ e(
+          Ce,
+          {
+            "aria-labelledby": `date-group-header-${a.id}`,
+            subheader: /* @__PURE__ */ e(
+              ft,
+              {
+                "aria-hidden": "true",
+                id: `date-group-header-${a.id}`,
+                role: "presentation",
+                sx: { bgcolor: "background.paper", ml: 8, pb: 4, pt: 12 },
+                children: /* @__PURE__ */ e(h, { bold: !0, variant: "caption", children: I(a.date, M.DAY_OF_WEEK_MONTH_DAY) })
+              }
+            ),
+            sx: { width: "100%" },
+            children: a.recurrences.map((u, g) => /* @__PURE__ */ e(x.Fragment, { children: /* @__PURE__ */ e(
+              Te,
+              {
+                isMini: n,
+                onRecurrenceClick: i,
+                recurrence: u
+              }
+            ) }, `day-recurrence-${g}`))
+          }
+        ) }, a.id),
+        /* @__PURE__ */ e(X, { sx: { mx: 24 } })
+      ] }, `recurrence-${l}`)) })
+    ] });
+  }
+), De = T(
+  ({ expected: t, isExpense: n = !0, missed: r, paid: i, title: o, total: s, upcoming: m }) => {
+    const p = ne(), { isSmallMobile: a } = ve(), { recurring: l } = b(), u = x.useMemo(() => {
+      const g = [{ color: p.palette.success.main, percentage: `${i / t}` }];
+      return r && g.push({ color: p.palette.error.main, percentage: `${r / t}` }), g;
+    }, [i, t, r]);
+    return /* @__PURE__ */ c(d, { children: [
+      /* @__PURE__ */ c(d, { sx: { flexDirection: "row", justifyContent: "space-between", pb: 12 }, children: [
+        /* @__PURE__ */ e(h, { bold: !0, variant: "body1", children: `${o} (${s})` }),
+        /* @__PURE__ */ e(h, { bold: !0, color: n ? "text.primary" : "success.main", variant: "body1", children: `${n ? "-" : "+"}${L(t, "0,0.00")}` })
+      ] }),
+      /* @__PURE__ */ e(Le, { data: u, height: 12 }),
+      /* @__PURE__ */ c(d, { sx: { alignItems: "center", flexDirection: "row", gap: 2, my: 8 }, children: [
+        /* @__PURE__ */ e(N, { sx: { bgcolor: "success.main", height: 8, mr: 8, width: 8 } }),
+        !a && /* @__PURE__ */ e(h, { bold: !0, variant: "body2", children: L(i, "0,0.00") }),
+        /* @__PURE__ */ e(h, { variant: "caption", children: l.paid?.toLowerCase() }),
+        r !== void 0 && /* @__PURE__ */ c(B, { children: [
+          /* @__PURE__ */ e(N, { sx: { bgcolor: "error.main", height: 8, ml: 16, mr: 8, width: 8 } }),
+          !a && /* @__PURE__ */ e(h, { bold: !0, variant: "body2", children: L(r, "0,0.00") }),
+          /* @__PURE__ */ e(h, { variant: "caption", children: l.missed?.toLowerCase() })
+        ] }),
+        /* @__PURE__ */ e(N, { sx: { bgcolor: "divider", height: 8, ml: 16, mr: 8, width: 8 } }),
+        !a && /* @__PURE__ */ e(h, { bold: !0, variant: "body2", children: L(m, "0,0.00") }),
+        /* @__PURE__ */ e(h, { variant: "caption", children: l.upcoming?.toLowerCase() })
+      ] })
+    ] });
+  }
+), Ge = T(() => {
+  const { recurring: t } = b(), {
+    selectedRecurrence: n,
+    selectedRepeatingTransaction: r,
+    setSelectedRecurrence: i,
+    setSelectedRepeatingTransactionGuid: o
+  } = _(), s = () => {
+    o(null), i(null);
+  };
+  return /* @__PURE__ */ e(
+    ie,
+    {
+      ariaLabelClose: t.close_drawer_aria,
+      isOpen: !!r,
+      onClose: s,
+      title: r?.repeating_transaction_type === gt.Income ? t.income_details : t.expense_details,
+      children: r && /* @__PURE__ */ e(
+        Ct,
+        {
+          onDeleted: s,
+          recurringTransaction: r,
+          selectedRecurrence: n
+        }
+      )
+    }
+  );
+}), Lt = T(() => {
+  const { recurring: t } = b(), { availableWidth: n } = Ie(), { isDesktop: r, isSmallMobile: i, isMobile: o } = ve(n), { onEvent: s } = Y(), {
+    currentMonthExpenses: m,
+    currentMonthIncome: p,
+    dateRange: a,
+    expenseTotal: l,
+    incomeTotal: u,
+    missedExpenseTotal: g,
+    pastRecurrences: y,
+    paidExpenseTotal: C,
+    paidIncomeTotal: S,
+    selectedDay: A,
+    selectedDayRecurrences: f,
+    setDateRange: w,
+    setSelectedRecurrence: H,
+    setSelectedRepeatingTransactionGuid: ue,
+    upcomingExpenseTotal: Ne,
+    upcomingIncomeTotal: ke,
+    upcomingRecurrences: me
+  } = _(), [V, Oe] = x.useState(0), We = je(a.start, /* @__PURE__ */ new Date()), Pe = (R, $e) => {
+    Oe($e);
+  }, pe = (R) => {
+    ue(R.repeatingTransactionGuid), H(R), s(v.RECURRING_TRANSACTIONS_CLICK_UPCOMING, {
+      transaction_guid: R.transaction?.guid
+    });
+  }, ge = (R) => {
+    ue(R.repeatingTransactionGuid), H(R), s(v.RECURRING_TRANSACTIONS_CLICK_PAID, {
+      transaction_guid: R.transaction?.guid
+    });
+  }, ze = () => {
+    const R = Ue(a.start, 1);
+    w({
+      start: k(R),
+      end: z(R)
+    });
+  }, He = () => {
+    const R = Ye(a.start, 1);
+    w({
+      start: k(R),
+      end: z(R)
+    });
+  };
+  return /* @__PURE__ */ c(
+    q,
+    {
+      container: !0,
+      sx: {
+        pt: 16
+      },
+      children: [
+        /* @__PURE__ */ c(q, { size: { sm: 12, md: "grow" }, width: "100%", children: [
+          /* @__PURE__ */ c(d, { sx: { gap: 16, px: r ? 48 : 24 }, children: [
+            /* @__PURE__ */ c(d, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+              /* @__PURE__ */ e(tt, { variant: "h3", children: G(
+                t.header_title,
+                I(a.start, M.MONTH_LONG)
+              ) }),
+              !r && /* @__PURE__ */ c(d, { direction: "row", gap: 4, children: [
+                /* @__PURE__ */ e(
+                  he,
+                  {
+                    color: "primary",
+                    disabled: We,
+                    onClick: He,
+                    children: /* @__PURE__ */ e(Ze, {})
+                  }
+                ),
+                /* @__PURE__ */ e(he, { color: "primary", onClick: ze, children: /* @__PURE__ */ e(Xe, {}) })
+              ] })
+            ] }),
+            /* @__PURE__ */ e(
+              De,
+              {
+                expected: l,
+                missed: g,
+                paid: C,
+                title: t.expenses,
+                total: m.length,
+                upcoming: Ne
+              }
+            ),
+            /* @__PURE__ */ e(
+              De,
+              {
+                expected: u,
+                isExpense: !1,
+                paid: S,
+                title: t.deposits,
+                total: p.length,
+                upcoming: ke
+              }
+            ),
+            r && /* @__PURE__ */ e(
+              P,
+              {
+                onRecurrenceClick: pe,
+                recurrences: me,
+                title: t.upcoming_activity
+              }
+            )
+          ] }),
+          !r && /* @__PURE__ */ c(d, { sx: { px: o ? 0 : 24 }, children: [
+            /* @__PURE__ */ c(Ke, { onChange: Pe, value: V, variant: "fullWidth", children: [
+              /* @__PURE__ */ e(
+                fe,
+                {
+                  label: /* @__PURE__ */ e(h, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: i ? t.upcoming : t.upcoming_activity })
+                }
+              ),
+              /* @__PURE__ */ e(
+                fe,
+                {
+                  label: /* @__PURE__ */ e(h, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: i ? t.past : t.past_transactions })
+                }
+              )
+            ] }),
+            V === 0 && /* @__PURE__ */ e(
+              P,
+              {
+                onRecurrenceClick: pe,
+                recurrences: me
+              }
+            ),
+            V === 1 && /* @__PURE__ */ e(
+              P,
+              {
+                onRecurrenceClick: ge,
+                recurrences: y
+              }
+            )
+          ] })
+        ] }),
+        r && /* @__PURE__ */ e(q, { size: { xs: "auto" }, sx: { minWidth: 450 }, children: /* @__PURE__ */ c(d, { gap: 24, children: [
+          /* @__PURE__ */ e(Ee, {}),
+          /* @__PURE__ */ e(
+            P,
+            {
+              onRecurrenceClick: ge,
+              recurrences: f || y,
+              title: A ? G(
+                t.day_transactions,
+                I(A, M.MONTH_DAY)
+              ) : t.past_transactions
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e(Ge, {})
+      ]
+    }
+  );
+}), jn = T(
+  ({ onBackClick: t, onMenuClick: n, sx: r = {} }) => {
+    const { recurring: i } = b(), { isInitialized: o, selectedAccountGuids: s } = U(), { alert: m, isDataLoaded: p, loadRepeatingTransactionData: a, setAlert: l, setDateRange: u } = _(), { setFilter: g } = re(), { onEvent: y } = Y(), [C, S] = x.useState(!1);
+    return oe({
+      widgetName: "RecurringTransactionsWidget",
+      isLoaded: p
+    }), x.useEffect(() => {
+      p || a().finally();
+    }, []), x.useEffect(() => {
+      g({
+        dateRange: { start: ee(Q(), 90), end: J() },
+        accounts: s
+      }), u({ start: k(/* @__PURE__ */ new Date()), end: z(/* @__PURE__ */ new Date()) });
+    }, [s]), o ? /* @__PURE__ */ c(
+      Rt,
+      {
+        actions: [
+          {
+            label: i.action_title,
+            iconName: "credit_card_gear",
+            onClick: () => {
+              S(!0), y(v.RECURRING_TRANSACTIONS_CLICK_SETTINGS);
+            }
+          }
+        ],
+        hasDivider: !0,
+        onAccountsFilterClick: () => y(v.RECURRING_TRANSACTIONS_CLICK_FILTER),
+        onBackClick: t,
+        onMenuClick: n,
+        sx: r,
+        title: i.title,
+        children: [
+          p ? /* @__PURE__ */ e(Lt, {}) : /* @__PURE__ */ e(Ae, { sx: { m: 48 }, variant: "list" }),
+          /* @__PURE__ */ e(
+            ie,
+            {
+              ariaLabelClose: i.close_drawer_aria,
+              isOpen: C,
+              onClose: () => S(!1),
+              shouldShowHeaderBorders: !1,
+              title: i.action_title,
+              children: /* @__PURE__ */ e(_e, {})
+            }
+          ),
+          /* @__PURE__ */ e(
+            Fe,
+            {
+              anchorOrigin: { vertical: "bottom", horizontal: "right" },
+              autoHideDuration: 3500,
+              onClose: () => l(""),
+              open: !!m.message,
+              children: /* @__PURE__ */ e(Be, { onClose: () => l(""), severity: m.severity, variant: "filled", children: m.message })
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ e(ae, {});
+  }
+), At = T(() => {
+  const { recurring: t } = b(), { availableWidth: n } = Ie(), {
+    selectedDay: r,
+    selectedDayRecurrences: i,
+    setSelectedDay: o,
+    setSelectedRecurrence: s,
+    setSelectedRepeatingTransactionGuid: m,
+    upcomingRecurrences: p
+  } = _(), a = (u) => {
+    m(u.repeatingTransactionGuid), s(u);
+  }, l = n < 750;
+  return /* @__PURE__ */ c(d, { flexDirection: l ? "column" : "row", width: "100%", children: [
+    /* @__PURE__ */ e(Ee, {}),
+    !l && /* @__PURE__ */ e(X, { flexItem: !0, orientation: "vertical", sx: { my: 16, ml: 16 } }),
+    /* @__PURE__ */ e(
+      P,
+      {
+        isMini: !0,
+        onRecurrenceClick: a,
+        onResetClick: r ? () => o(r) : void 0,
+        recurrences: i || p.slice(0, 5),
+        sx: { width: l ? "100%" : "calc(100% - 336px)", mt: 12 },
+        title: r ? G(
+          t.day_transactions,
+          I(r, M.MONTH_DAY)
+        ) : t.upcoming_activity
+      }
+    )
+  ] });
+}), Kn = T(
+  ({ onPrimaryCtaClick: t, sx: n }) => {
+    const { recurring: r } = b(), { setFilter: i } = re(), { isDataLoaded: o, loadRepeatingTransactionData: s } = _(), { isInitialized: m, selectedAccountGuids: p } = U();
+    return oe({
+      widgetName: "RecurringTransactionsMiniWidget",
+      isLoaded: o
+    }), x.useEffect(() => {
+      o || s().finally();
+    }, []), x.useEffect(() => {
+      p.length > 0 && i({
+        dateRange: { start: ee(Q(), 90), end: J() },
+        accounts: p
+      });
+    }, [p]), m ? /* @__PURE__ */ c(
+      Tt,
+      {
+        className: "mx-exp-recurring-transactions-miniwidget",
+        onPrimaryCtaClick: t,
+        primaryCtaLabel: r.primary_cta,
+        primaryCtaLabelAria: r.primary_cta_aria,
+        subTitle: r.sub_title,
+        sx: n,
+        title: r.mini_title,
+        children: [
+          o ? /* @__PURE__ */ e(At, {}) : /* @__PURE__ */ e(Ae, { sx: { mx: 16 }, variant: "list" }),
+          /* @__PURE__ */ e(Ge, {})
+        ]
+      }
+    ) : /* @__PURE__ */ e(ae, {});
+  }
+), Et = T(() => {
+  const { recurring: t } = b();
+  return /* @__PURE__ */ c(d, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e(Je, { size: 32 }),
+    /* @__PURE__ */ c(d, { children: [
+      /* @__PURE__ */ e(Z, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
+      /* @__PURE__ */ e(Z, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
+    ] })
+  ] });
+}), Gt = ({
+  amount: t,
+  bgcolor: n,
+  isLargeScreen: r,
+  isSmallScreen: i,
+  label: o
+}) => /* @__PURE__ */ c(d, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+  /* @__PURE__ */ e(
+    N,
+    {
+      sx: {
+        borderRadius: "2px",
+        bgcolor: n,
+        height: 8,
+        width: 8
+      }
+    }
+  ),
+  /* @__PURE__ */ c(d, { sx: { alignItems: "center", flexDirection: "row", gap: 2 }, children: [
+    !i && /* @__PURE__ */ e(h, { bold: !0, variant: "caption", children: L(t, t === 0 || !r ? "0,0" : "0,0.00") }),
+    /* @__PURE__ */ e(h, { variant: "caption", children: o })
+  ] })
+] }), Nt = ({
+  upcomingRecurrences: t,
+  logoSize: n = 32,
+  maxLogos: r = 3
+}) => {
+  const i = (o) => o * (n / 2);
+  return /* @__PURE__ */ e(
+    N,
+    {
+      sx: {
+        position: "relative",
+        width: 64
+      },
+      children: t.map((o, s) => s < r ? /* @__PURE__ */ e(
+        N,
+        {
+          sx: {
+            borderRadius: "4px",
+            left: i(s),
+            outlineColor: "common.white",
+            outlineStyle: "solid",
+            outlineWidth: 2,
+            position: "absolute"
+          },
+          children: /* @__PURE__ */ e(
+            te,
+            {
+              categoryGuid: o.categoryGuid || "",
+              merchantGuid: o.merchantGuid || "",
+              size: n
+            }
+          )
+        },
+        `${o.categoryGuid}-${o.merchantGuid}-${s}`
+      ) : null)
+    }
+  );
+}, kt = ({
+  upcomingRecurrences: t,
+  maxLogos: n = 3
+}) => /* @__PURE__ */ e(d, { sx: { flexDirection: "row", gap: 4 }, children: t?.slice(0, n).map((r, i) => /* @__PURE__ */ e(
+  te,
+  {
+    categoryGuid: r.categoryGuid || "",
+    merchantGuid: r.merchantGuid || ""
+  },
+  `${r.categoryGuid}-${r.merchantGuid}-${i}`
+)) }), Ot = T(() => {
+  const t = ne(), [n, { width: r }] = Dt(), {
+    upcomingRecurrences: i,
+    expenseTotal: o,
+    missedExpenseTotal: s,
+    paidExpenseTotal: m,
+    upcomingExpenseTotal: p
+  } = _(), { recurring: a } = b(), l = r <= 288, u = r >= 450, g = 32, y = i.length > 0, C = x.useMemo(() => L(o, o === 0 ? "0,0" : "0,0.00"), [o]), S = x.useMemo(() => {
+    const w = [
+      { color: t.palette.success.main, percentage: `${m / o}` }
+    ];
+    return s && w.push({
+      color: t.palette.error.main,
+      percentage: `${s / o}`
+    }), w;
+  }, [
+    m,
+    o,
+    s,
+    t.palette.success.main,
+    t.palette.error.main
+  ]), A = () => y ? l ? /* @__PURE__ */ e(
+    Nt,
+    {
+      logoSize: g,
+      maxLogos: 3,
+      upcomingRecurrences: i.slice(0, 3)
+    }
+  ) : /* @__PURE__ */ e(kt, { maxLogos: 3, upcomingRecurrences: i.slice(0, 3) }) : /* @__PURE__ */ e(d, { sx: { width: l ? 64 : 104 } }), f = [
+    {
+      amount: m,
+      bgColor: "success.main",
+      label: a.paid
+    },
+    {
+      amount: s,
+      bgColor: "error.main",
+      label: a.missed
+    },
+    {
+      amount: p,
+      bgColor: "neutral.light",
+      label: a.upcoming
+    }
+  ];
+  return /* @__PURE__ */ c(B, { children: [
+    /* @__PURE__ */ c(d, { ref: n, sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ c(
+        d,
+        {
+          sx: [
+            C.length >= 10 && l ? { flexDirection: "column" } : { flexDirection: "row", gap: 2 },
+            {
+              alignItems: "baseline",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }
+          ],
+          children: [
+            /* @__PURE__ */ e(
+              h,
+              {
+                sx: { width: "100%" },
+                variant: C.length >= 10 && l ? "h3" : "h2",
+                children: C
+              }
+            ),
+            /* @__PURE__ */ e(Z, { sx: { pr: 12 }, variant: "caption", children: a.expected })
+          ]
+        }
+      ),
+      A()
+    ] }),
+    /* @__PURE__ */ c(d, { sx: { pt: 12 }, children: [
+      /* @__PURE__ */ e(Le, { data: S }),
+      /* @__PURE__ */ e(
+        d,
+        {
+          sx: {
+            alignItems: "center",
+            flexDirection: "row",
+            gap: 16,
+            mt: 4
+          },
+          children: f.map((w, H) => /* @__PURE__ */ e(
+            Gt,
+            {
+              amount: w.amount,
+              bgcolor: w.bgColor,
+              isLargeScreen: u,
+              isSmallScreen: l,
+              label: w.label
+            },
+            `recurrence-legend-${H}`
+          ))
+        }
+      )
+    ] })
+  ] });
+}), Vn = T(
+  ({ onCTAClick: t }) => {
+    const { onEvent: n } = Y(), { isInitialized: r, selectedAccountGuids: i } = U(), {
+      loadRepeatingTransactionData: o,
+      upcomingRecurrences: s,
+      repeatingTransactions: m,
+      setDateRange: p,
+      isDataLoaded: a
+    } = _(), { setFilter: l } = re(), { recurring: u, budgets: g } = b();
+    oe({
+      widgetName: "RecurringTransactionsMicroWidget",
+      isLoaded: a
+    }), x.useEffect(() => {
+      a || o().finally(() => {
+        n(v.RECURRING_TRANSACTIONS_LOAD_WIDGET, {
+          state: s.length > 0 ? "default" : "zeroState"
+        });
+      });
+    }, []), x.useEffect(() => {
+      r && (l({
+        dateRange: { start: ee(Q(), 90), end: J() },
+        accounts: i
+      }), p({ start: k(/* @__PURE__ */ new Date()), end: z(/* @__PURE__ */ new Date()) }));
+    }, [r, i]);
+    const y = () => {
+      n(
+        s.length > 0 ? v.RECURRING_TRANSACTIONS_CLICK_GET_STARTED : v.RECURRING_TRANSACTIONS_CLICK_VIEW_ALL
+      ), t();
+    };
+    if (!r || !a) return /* @__PURE__ */ e(ae, { height: 100 });
+    const C = !m?.length;
+    return /* @__PURE__ */ e(
+      _t,
+      {
+        className: "mx-recurring-transaction-microwidget",
+        ctaLabel: C ? g.get_started_cta : u.primary_cta,
+        onCTAClick: y,
+        title: u.recurring_expenses,
+        children: C ? /* @__PURE__ */ e(Et, {}) : /* @__PURE__ */ e(Ot, {})
+      }
+    );
+  }
+), qn = T(
+  ({ isOpen: t, onClose: n, selectedTab: r }) => {
+    const { cashflow: i } = b();
+    return /* @__PURE__ */ e(
+      ie,
+      {
+        ariaLabelClose: i.close_settings_aria,
+        isOpen: t,
+        onClose: n,
+        title: i.cashflow_settings,
+        children: /* @__PURE__ */ e(_e, { defaultSelectedTab: r })
+      }
+    );
+  }
+);
 export {
-  o as AddRecurringTransactionDetails,
-  c as ManageExpenses,
-  e as ManageIncome,
-  n as RecurringSettings,
-  g as RecurringSettingsDrawer,
-  i as RecurringTransactionsMicroWidget,
-  t as RecurringTransactionsMiniWidget,
-  s as RecurringTransactionsWidget,
-  r as SelectTransaction
+  er as AddRecurringTransactionDetails,
+  Jn as ManageExpenses,
+  tr as ManageIncome,
+  _e as RecurringSettings,
+  qn as RecurringSettingsDrawer,
+  Vn as RecurringTransactionsMicroWidget,
+  Kn as RecurringTransactionsMiniWidget,
+  jn as RecurringTransactionsWidget,
+  nr as SelectTransaction
 };
+//# sourceMappingURL=index.es.js.map