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

package/dist/recurringtransactions/RecurringTransactionsWidget.es.js

@@ -0,0 +1,89 @@
+import { useEvent as C, useGlobalCopyStore as _, useGlobalUiStore as v, useRecurringTransactionsStore as h, useTransactionStore as y } from "../common/context/hooks.es.js";
+import { useWidgetLoadTimer as I } from "../common/hooks/useWidgetLoadTimer.es.js";
+import N from "../common/components/drawer/Drawer.es.js";
+import { ANALYTICS_EVENTS as l } from "../common/constants/Analytics.es.js";
+import A from "../common/components/Loader.es.js";
+import { WidgetContainer as E } from "../common/components/WidgetContainer.es.js";
+import { SkeletonLoader as L } from "../common/components/SkeletonLoader.es.js";
+import { RecurringSettings as O } from "./components/shared/RecurringSettings.es.js";
+import { RecurringTransactions as D } from "./components/RecurringTransactions.es.js";
+import i from "react";
+import { observer as b } from "mobx-react-lite";
+import { endOfMonth as w } from "date-fns/endOfMonth";
+import { startOfMonth as G } from "date-fns/startOfMonth";
+import { startOfToday as k } from "date-fns/startOfToday";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import { endOfToday as W } from "date-fns/endOfToday";
+import { subDays as F } from "date-fns/subDays";
+import U from "@mui/material/Alert";
+import j from "@mui/material/Snackbar";
+var ne = b(({ onBackClick: m, onMenuClick: d, sx: f = {} }) => {
+  const { recurring: r } = _(), { isInitialized: u, selectedAccountGuids: a } = v(), { alert: t, isDataLoaded: o, loadRepeatingTransactionData: p, setAlert: n, setDateRange: g } = h(), { setFilter: S } = y(), { onEvent: s } = C(), [R, c] = i.useState(!1);
+  return I({
+    widgetName: "RecurringTransactionsWidget",
+    isLoaded: o
+  }), i.useEffect(() => {
+    o || p().finally();
+  }, []), i.useEffect(() => {
+    S({
+      dateRange: {
+        start: F(k(), 90),
+        end: W()
+      },
+      accounts: a
+    }), g({
+      start: G(/* @__PURE__ */ new Date()),
+      end: w(/* @__PURE__ */ new Date())
+    });
+  }, [a]), u ? /* @__PURE__ */ x(E, {
+    actions: [{
+      label: r.action_title,
+      iconName: "credit_card_gear",
+      onClick: () => {
+        c(!0), s(l.RECURRING_TRANSACTIONS_CLICK_SETTINGS);
+      }
+    }],
+    hasDivider: !0,
+    onAccountsFilterClick: () => s(l.RECURRING_TRANSACTIONS_CLICK_FILTER),
+    onBackClick: m,
+    onMenuClick: d,
+    sx: f,
+    title: r.title,
+    children: [
+      o ? /* @__PURE__ */ e(D, {}) : /* @__PURE__ */ e(L, {
+        sx: { m: 48 },
+        variant: "list"
+      }),
+      /* @__PURE__ */ e(N, {
+        ariaLabelClose: r.close_drawer_aria,
+        isOpen: R,
+        onClose: () => c(!1),
+        shouldShowHeaderBorders: !1,
+        title: r.action_title,
+        children: /* @__PURE__ */ e(O, {})
+      }),
+      /* @__PURE__ */ e(j, {
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        autoHideDuration: 3500,
+        onClose: (z, T) => {
+          T !== "clickaway" && n("", t.severity);
+        },
+        open: !!t.message,
+        children: /* @__PURE__ */ e(U, {
+          onClose: () => n("", t.severity),
+          severity: t.severity,
+          variant: "filled",
+          children: t.message
+        })
+      })
+    ]
+  }) : /* @__PURE__ */ e(A, {});
+});
+export {
+  ne as RecurringTransactionsWidget
+};
+
+//# sourceMappingURL=RecurringTransactionsWidget.es.js.map

package/dist/recurringtransactions/RecurringTransactionsWidget.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecurringTransactionsWidget.es.js","names":[],"sources":["../../src/recurringtransactions/RecurringTransactionsWidget.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 Alert from '@mui/material/Alert'\nimport Snackbar from '@mui/material/Snackbar'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  Loader,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useTransactionStore,\n  useWidgetLoadTimer,\n  WidgetContainer,\n} from '../common'\nimport { type WidgetProps } from '../core'\n\nimport { RecurringSettings } from './components/shared/RecurringSettings'\nimport { RecurringTransactions } from './components/RecurringTransactions'\nimport { SkeletonLoader } from '../common/components/SkeletonLoader'\n\nexport const RecurringTransactionsWidget = observer(\n  ({ onBackClick, onMenuClick, sx = {} }: WidgetProps) => {\n    const { recurring: copy } = useGlobalCopyStore()\n    const { isInitialized, selectedAccountGuids } = useGlobalUiStore()\n    const { alert, isDataLoaded, loadRepeatingTransactionData, setAlert, setDateRange } =\n      useRecurringTransactionsStore()\n    const { setFilter } = useTransactionStore()\n    const { onEvent } = useEvent()\n    const [isSettingsOpen, setIsSettingsOpen] = React.useState(false)\n\n    useWidgetLoadTimer({\n      widgetName: 'RecurringTransactionsWidget',\n      isLoaded: isDataLoaded,\n    })\n\n    React.useEffect(() => {\n      if (!isDataLoaded) {\n        // Load the repeating transactions and related data\n        loadRepeatingTransactionData().finally()\n      }\n    }, [])\n\n    React.useEffect(() => {\n      // Sets the Transaction filter\n      setFilter({\n        dateRange: { start: subDays(startOfToday(), 90), end: endOfToday() },\n        accounts: selectedAccountGuids,\n      })\n      // Set the Date Range for Recurring Transactions\n      setDateRange({ start: startOfMonth(new Date()), end: endOfMonth(new Date()) })\n    }, [selectedAccountGuids])\n\n    if (!isInitialized) return <Loader />\n\n    return (\n      <WidgetContainer\n        actions={[\n          {\n            label: copy.action_title,\n            iconName: 'credit_card_gear',\n            onClick: () => {\n              setIsSettingsOpen(true)\n              onEvent(ANALYTICS_EVENTS.RECURRING_TRANSACTIONS_CLICK_SETTINGS)\n            },\n          },\n        ]}\n        hasDivider={true}\n        onAccountsFilterClick={() => onEvent(ANALYTICS_EVENTS.RECURRING_TRANSACTIONS_CLICK_FILTER)}\n        onBackClick={onBackClick}\n        onMenuClick={onMenuClick}\n        sx={sx}\n        title={copy.title}\n      >\n        {!isDataLoaded ? (\n          <SkeletonLoader sx={{ m: 48 }} variant=\"list\" />\n        ) : (\n          <RecurringTransactions />\n        )}\n        <Drawer\n          ariaLabelClose={copy.close_drawer_aria}\n          isOpen={isSettingsOpen}\n          onClose={() => setIsSettingsOpen(false)}\n          shouldShowHeaderBorders={false}\n          title={copy.action_title}\n        >\n          <RecurringSettings />\n        </Drawer>\n        <Snackbar\n          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n          autoHideDuration={3500}\n          onClose={(_event, reason) => {\n            if (reason === 'clickaway') return\n            setAlert('', alert.severity)\n          }}\n          open={Boolean(alert.message)}\n        >\n          <Alert\n            onClose={() => setAlert('', alert.severity)}\n            severity={alert.severity}\n            variant=\"filled\"\n          >\n            {alert.message}\n          </Alert>\n        </Snackbar>\n      </WidgetContainer>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6BA,IAAa,KAA8B,EAAA,CACxC,EAAE,aAAA,GAAa,aAAA,GAAa,IAAA,IAAK,CAAC,EAAA,MAAqB;AACtD,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GACzC,EAAE,eAAA,GAAe,sBAAA,EAAA,IAAyB,EAAiB,GAC3D,EAAE,OAAA,GAAO,cAAA,GAAc,8BAAA,GAA8B,UAAA,GAAU,cAAA,EAAA,IACnE,EAA8B,GAC1B,EAAE,WAAA,EAAA,IAAc,EAAoB,GACpC,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,CAAC,GAAgB,CAAA,IAAqB,EAAM,SAAS,EAAK;AAwBhE,SAtBA,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAED,EAAM,UAAA,MAAgB;AACpB,IAAK,KAEH,EAA6B,EAAE,QAAQ;AAAA,EAE3C,GAAG,CAAC,CAAC,GAEL,EAAM,UAAA,MAAgB;AAEpB,IAAA,EAAU;AAAA,MACR,WAAW;AAAA,QAAE,OAAO,EAAQ,EAAa,GAAG,EAAE;AAAA,QAAG,KAAK,EAAW;AAAA,MAAE;AAAA,MACnE,UAAU;AAAA,IACZ,CAAC,GAED,EAAa;AAAA,MAAE,OAAO,EAAa,oBAAI,KAAK,CAAC;AAAA,MAAG,KAAK,EAAW,oBAAI,KAAK,CAAC;AAAA,IAAE,CAAC;AAAA,EAC/E,GAAG,CAAC,CAAoB,CAAC,GAEpB,IAGH,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS,CACP;AAAA,MACE,OAAO,EAAK;AAAA,MACZ,UAAU;AAAA,MACV,SAAA,MAAe;AACb,QAAA,EAAkB,EAAI,GACtB,EAAQ,EAAiB,qCAAqC;AAAA,MAChE;AAAA,IACF,CACF;AAAA,IACA,YAAY;AAAA,IACZ,uBAAA,MAA6B,EAAQ,EAAiB,mCAAmC;AAAA,IAC5E,aAAA;AAAA,IACA,aAAA;AAAA,IACT,IAAA;AAAA,IACJ,OAAO,EAAK;AAAA,cAhBd;AAAA,MAkBI,IAGA,gBAAA,EAAC,GAAD,CAAwB,CAAA,IAFxB,gBAAA,EAAC,GAAD;AAAA,QAAgB,IAAI,EAAE,GAAG,GAAG;AAAA,QAAG,SAAQ;AAAA,MAAQ,CAAA;AAAA,MAIjD,gBAAA,EAAC,GAAD;AAAA,QACE,gBAAgB,EAAK;AAAA,QACrB,QAAQ;AAAA,QACR,SAAA,MAAe,EAAkB,EAAK;AAAA,QACtC,yBAAyB;AAAA,QACzB,OAAO,EAAK;AAAA,kBAEZ,gBAAA,EAAC,GAAD,CAAoB,CAAA;AAAA,MACd,CAAA;AAAA,MACR,gBAAA,EAAC,GAAD;AAAA,QACE,cAAc;AAAA,UAAE,UAAU;AAAA,UAAU,YAAY;AAAA,QAAQ;AAAA,QACxD,kBAAkB;AAAA,QAClB,SAAA,CAAU,GAAQ,MAAW;AAC3B,UAAI,MAAW,eACf,EAAS,IAAI,EAAM,QAAQ;AAAA,QAC7B;AAAA,QACA,MAAM,EAAQ,EAAM;AAAA,kBAEpB,gBAAA,EAAC,GAAD;AAAA,UACE,SAAA,MAAe,EAAS,IAAI,EAAM,QAAQ;AAAA,UAC1C,UAAU,EAAM;AAAA,UAChB,SAAQ;AAAA,oBAEP,EAAM;AAAA,QACF,CAAA;AAAA,MACC,CAAA;AAAA,IACK;AAAA,OApDQ,gBAAA,EAAC,GAAD,CAAS,CAAA;AAsDtC,CACF"}

package/dist/recurringtransactions/ZeroStateMicroWidget.es.js

@@ -0,0 +1,30 @@
+import { useGlobalCopyStore as n } from "../common/context/hooks.es.js";
+import { observer as c } from "mobx-react-lite";
+import e from "@mui/material/Stack";
+import { P as o } from "@mxenabled/mxui";
+import { CurrencyExchange as a } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+var g = c(() => {
+  const { recurring: t } = n();
+  return /* @__PURE__ */ i(e, {
+    sx: {
+      alignItems: "start",
+      flexDirection: "row",
+      gap: 12
+    },
+    children: [/* @__PURE__ */ r(a, { size: 32 }), /* @__PURE__ */ i(e, { children: [/* @__PURE__ */ r(o, {
+      fontWeight: 600,
+      variant: "body1",
+      children: t.zero_state_content_header
+    }), /* @__PURE__ */ r(o, {
+      color: "text.secondary",
+      variant: "subtitle2",
+      children: t.zero_state_content_description
+    })] })]
+  });
+});
+export {
+  g as ZeroStateMicroWidget
+};
+
+//# sourceMappingURL=ZeroStateMicroWidget.es.js.map

package/dist/recurringtransactions/ZeroStateMicroWidget.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZeroStateMicroWidget.es.js","names":[],"sources":["../../src/recurringtransactions/ZeroStateMicroWidget.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { CurrencyExchange } from '@mxenabled/mx-icons'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { useGlobalCopyStore } from '../common'\n\nexport const ZeroStateMicroWidget = observer(() => {\n  const { recurring: recurringCopy } = useGlobalCopyStore()\n\n  return (\n    <Stack sx={{ alignItems: 'start', flexDirection: 'row', gap: 12 }}>\n      <CurrencyExchange size={32} />\n      <Stack>\n        <P fontWeight={600} variant=\"body1\">\n          {recurringCopy.zero_state_content_header}\n        </P>\n        <P color=\"text.secondary\" variant=\"subtitle2\">\n          {recurringCopy.zero_state_content_description}\n        </P>\n      </Stack>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;AAUA,IAAa,IAAuB,EAAA,MAAe;AACjD,QAAM,EAAE,WAAW,EAAA,IAAkB,EAAmB;AAExD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAS,eAAe;AAAA,MAAO,KAAK;AAAA,IAAG;AAAA,cAAhE,CACE,gBAAA,EAAC,GAAD,EAAkB,MAAM,GAAK,CAAA,GAC7B,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAG,YAAY;AAAA,MAAK,SAAQ;AAAA,gBACzB,EAAc;AAAA,IACd,CAAA,GACH,gBAAA,EAAC,GAAD;AAAA,MAAG,OAAM;AAAA,MAAiB,SAAQ;AAAA,gBAC/B,EAAc;AAAA,IACd,CAAA,CACE,EAAA,CAAA,CACF;AAAA;AAEX,CAAC"}

package/dist/recurringtransactions/components/MicroWidgetContent.es.js

@@ -0,0 +1,103 @@
+import R from "../../common/components/charts/StatusBar.es.js";
+import { useGlobalCopyStore as T, useRecurringTransactionsStore as v } from "../../common/context/hooks.es.js";
+import { formatCurrency as D } from "../../core/utils/NumberFormatting.es.js";
+import { useDimensions as M } from "../../common/hooks/useDimensions.es.js";
+import { RecurrenceLegend as y } from "./micro/RecurrenceLegend.es.js";
+import { OverlappingMerchantLogos as E } from "./micro/OverlappingMerchantLogos.es.js";
+import { MerchantLogosRow as j } from "./micro/MerchantLogosRow.es.js";
+import g from "react";
+import { observer as $ } from "mobx-react-lite";
+import n from "@mui/material/Stack";
+import { P as F, Text as I } from "@mxenabled/mxui";
+import { Fragment as O, jsx as e, jsxs as a } from "react/jsx-runtime";
+import { useTheme as k } from "@mui/material/styles";
+var V = $(() => {
+  const c = k(), [f, { width: u }] = M(), { upcomingRecurrences: m, expenseTotal: r, missedExpenseTotal: i, paidExpenseTotal: l, upcomingExpenseTotal: x } = v(), { recurring: s } = T(), t = u <= 288, h = u >= 450, d = 32, b = m.length > 0, p = g.useMemo(() => D(r, r === 0 ? "0,0" : "0,0.00"), [r]), w = g.useMemo(() => {
+    const o = [{
+      color: c.palette.success.main,
+      percentage: `${l / r}`
+    }];
+    return i && o.push({
+      color: c.palette.error.main,
+      percentage: `${i / r}`
+    }), o;
+  }, [
+    l,
+    r,
+    i,
+    c.palette.success.main,
+    c.palette.error.main
+  ]), S = () => b ? t ? /* @__PURE__ */ e(E, {
+    logoSize: d,
+    maxLogos: 3,
+    upcomingRecurrences: m.slice(0, 3)
+  }) : /* @__PURE__ */ e(j, {
+    maxLogos: 3,
+    upcomingRecurrences: m.slice(0, 3)
+  }) : /* @__PURE__ */ e(n, { sx: { width: t ? 64 : 104 } }), L = [
+    {
+      amount: l,
+      bgColor: "success.main",
+      label: s.paid
+    },
+    {
+      amount: i,
+      bgColor: "error.main",
+      label: s.missed
+    },
+    {
+      amount: x,
+      bgColor: "neutral.light",
+      label: s.upcoming
+    }
+  ];
+  return /* @__PURE__ */ a(O, { children: [/* @__PURE__ */ a(n, {
+    ref: f,
+    sx: {
+      flexDirection: "row",
+      justifyContent: "space-between"
+    },
+    children: [/* @__PURE__ */ a(n, {
+      sx: [p.length >= 10 && t ? { flexDirection: "column" } : {
+        flexDirection: "row",
+        gap: 2
+      }, {
+        alignItems: "baseline",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }],
+      children: [/* @__PURE__ */ e(I, {
+        sx: { width: "100%" },
+        variant: p.length >= 10 && t ? "h3" : "h2",
+        children: p
+      }), /* @__PURE__ */ e(F, {
+        sx: { pr: 12 },
+        variant: "caption",
+        children: s.expected
+      })]
+    }), S()]
+  }), /* @__PURE__ */ a(n, {
+    sx: { pt: 12 },
+    children: [/* @__PURE__ */ e(R, { data: w }), /* @__PURE__ */ e(n, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 16,
+        mt: 4
+      },
+      children: L.map((o, C) => /* @__PURE__ */ e(y, {
+        amount: o.amount,
+        bgcolor: o.bgColor,
+        isLargeScreen: h,
+        isSmallScreen: t,
+        label: o.label
+      }, `recurrence-legend-${C}`))
+    })]
+  })] });
+});
+export {
+  V as MicroWidgetContent
+};
+
+//# sourceMappingURL=MicroWidgetContent.es.js.map

package/dist/recurringtransactions/components/MicroWidgetContent.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MicroWidgetContent.es.js","names":[],"sources":["../../../src/recurringtransactions/components/MicroWidgetContent.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { StatusBar, useGlobalCopyStore, useRecurringTransactionsStore } from '../../common'\nimport { useDimensions } from '../../common/hooks/useDimensions'\n\nimport { RecurrenceLegend } from './micro/RecurrenceLegend'\nimport { OverlappingMerchantLogos } from './micro/OverlappingMerchantLogos'\nimport { MerchantLogosRow } from './micro/MerchantLogosRow'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\nexport const MicroWidgetContent = observer(() => {\n  const theme = useTheme()\n  const [containerRef, { width }] = useDimensions()\n  const {\n    upcomingRecurrences,\n    expenseTotal,\n    missedExpenseTotal,\n    paidExpenseTotal,\n    upcomingExpenseTotal,\n  } = useRecurringTransactionsStore()\n  const { recurring: copy } = useGlobalCopyStore()\n\n  const isSmallScreen = width <= 288\n  const isLargeScreen = width >= 450\n  const logoSize = 32\n  const hasLogos = upcomingRecurrences.length > 0\n\n  const expectedExpenseTotalFormatted = React.useMemo(() => {\n    return formatCurrency(expenseTotal, expenseTotal === 0 ? '0,0' : '0,0.00')\n  }, [expenseTotal])\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 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: 'neutral.light',\n      label: copy.upcoming,\n    },\n  ]\n\n  return (\n    <>\n      <Stack ref={containerRef} sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>\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={expectedExpenseTotalFormatted.length >= 10 && isSmallScreen ? 'h3' : 'h2'}\n          >\n            {expectedExpenseTotalFormatted}\n          </Text>\n\n          <P sx={{ pr: 12 }} variant=\"caption\">\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})\n"],"mappings":"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"}

package/dist/recurringtransactions/components/MiniWidgetContent.es.js

@@ -0,0 +1,45 @@
+import { buildDynamicCopy as d } from "../../core/utils/Localization.es.js";
+import { DATE_FORMATS_INTL as p, formatDate as f } from "../../core/constants/DateFormats.es.js";
+import { useGlobalCopyStore as y, useRecurringTransactionsStore as R, useWidgetContainerProvider as D } from "../../common/context/hooks.es.js";
+import { RecurrenceCalendar as g } from "./recurrencecalendar/RecurrenceCalendar.es.js";
+import { RecurrenceList as v } from "./RecurrenceList.es.js";
+import { observer as x } from "mobx-react-lite";
+import S from "@mui/material/Stack";
+import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import T from "@mui/material/Divider";
+var j = x(() => {
+  const { recurring: i } = y(), { availableWidth: c } = D(), { selectedDay: e, selectedDayRecurrences: n, setSelectedDay: s, setSelectedRecurrence: a, setSelectedRepeatingTransactionGuid: m, upcomingRecurrences: l } = R(), u = (o) => {
+    m(o.repeatingTransactionGuid), a(o);
+  }, r = c < 750;
+  return /* @__PURE__ */ C(S, {
+    flexDirection: r ? "column" : "row",
+    width: "100%",
+    children: [
+      /* @__PURE__ */ t(g, {}),
+      !r && /* @__PURE__ */ t(T, {
+        flexItem: !0,
+        orientation: "vertical",
+        sx: {
+          my: 16,
+          ml: 16
+        }
+      }),
+      /* @__PURE__ */ t(v, {
+        isMini: !0,
+        onRecurrenceClick: u,
+        onResetClick: e ? () => s(e) : void 0,
+        recurrences: n || l.slice(0, 5),
+        sx: {
+          width: r ? "100%" : "calc(100% - 336px)",
+          mt: 12
+        },
+        title: e ? d(i.day_transactions, f(e, p.MONTH_DAY)) : i.upcoming_activity
+      })
+    ]
+  });
+});
+export {
+  j as MiniWidgetContent
+};
+
+//# sourceMappingURL=MiniWidgetContent.es.js.map

package/dist/recurringtransactions/components/MiniWidgetContent.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniWidgetContent.es.js","names":[],"sources":["../../../src/recurringtransactions/components/MiniWidgetContent.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\n\nimport {\n  useGlobalCopyStore,\n  useRecurringTransactionsStore,\n  useWidgetContainerProvider,\n} from '../../common'\nimport { type Recurrence } from '../../core'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\n\nimport { RecurrenceCalendar } from './recurrencecalendar/RecurrenceCalendar'\nimport { RecurrenceList } from './RecurrenceList'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nexport const MiniWidgetContent = observer(() => {\n  const { recurring: copy } = useGlobalCopyStore()\n  const { availableWidth } = useWidgetContainerProvider()\n  const {\n    selectedDay,\n    selectedDayRecurrences,\n    setSelectedDay,\n    setSelectedRecurrence,\n    setSelectedRepeatingTransactionGuid,\n    upcomingRecurrences,\n  } = useRecurringTransactionsStore()\n\n  const onRecurrenceClick = (recurrence: Recurrence) => {\n    setSelectedRepeatingTransactionGuid(recurrence.repeatingTransactionGuid)\n    setSelectedRecurrence(recurrence)\n  }\n\n  const isSmall = availableWidth < 750\n\n  return (\n    <Stack flexDirection={isSmall ? 'column' : 'row'} width=\"100%\">\n      <RecurrenceCalendar />\n\n      {!isSmall && <Divider flexItem={true} orientation=\"vertical\" sx={{ my: 16, ml: 16 }} />}\n\n      <RecurrenceList\n        isMini={true}\n        onRecurrenceClick={onRecurrenceClick}\n        onResetClick={selectedDay ? () => setSelectedDay(selectedDay) : undefined}\n        recurrences={selectedDayRecurrences || upcomingRecurrences.slice(0, 5)}\n        sx={{ width: isSmall ? '100%' : 'calc(100% - 336px)', mt: 12 }}\n        title={\n          selectedDay\n            ? (buildDynamicCopy(\n                copy.day_transactions,\n                formatDate(selectedDay, DATE_FORMATS_INTL.MONTH_DAY),\n              ) as string)\n            : copy.upcoming_activity\n        }\n      />\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;AAiBA,IAAa,IAAoB,EAAA,MAAe;AAC9C,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GACzC,EAAE,gBAAA,EAAA,IAAmB,EAA2B,GAChD,EACJ,aAAA,GACA,wBAAA,GACA,gBAAA,GACA,uBAAA,GACA,qCAAA,GACA,qBAAA,EAAA,IACE,EAA8B,GAE5B,IAAA,CAAqB,MAA2B;AACpD,IAAA,EAAoC,EAAW,wBAAwB,GACvE,EAAsB,CAAU;AAAA,EAClC,GAEM,IAAU,IAAiB;AAEjC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,eAAe,IAAU,WAAW;AAAA,IAAO,OAAM;AAAA,cAAxD;AAAA,MACE,gBAAA,EAAC,GAAD,CAAqB,CAAA;AAAA,MAEpB,CAAC,KAAW,gBAAA,EAAC,GAAD;AAAA,QAAS,UAAU;AAAA,QAAM,aAAY;AAAA,QAAW,IAAI;AAAA,UAAE,IAAI;AAAA,UAAI,IAAI;AAAA,QAAG;AAAA,MAAI,CAAA;AAAA,MAEtF,gBAAA,EAAC,GAAD;AAAA,QACE,QAAQ;AAAA,QACW,mBAAA;AAAA,QACnB,cAAc,IAAA,MAAoB,EAAe,CAAW,IAAI;AAAA,QAChE,aAAa,KAA0B,EAAoB,MAAM,GAAG,CAAC;AAAA,QACrE,IAAI;AAAA,UAAE,OAAO,IAAU,SAAS;AAAA,UAAsB,IAAI;AAAA,QAAG;AAAA,QAC7D,OACE,IACK,EACC,EAAK,kBACL,EAAW,GAAa,EAAkB,SAAS,CACrD,IACA,EAAK;AAAA,MAEZ,CAAA;AAAA,IACI;AAAA;AAEX,CAAC"}

package/dist/recurringtransactions/components/PaymentSchedule.es.js

@@ -0,0 +1,133 @@
+import { useGlobalCopyStore as E } from "../../common/context/hooks.es.js";
+import { Frequency as r } from "../../core/types/RepeatingTransaction.es.js";
+import { formatOrdinal as M } from "../../core/utils/NumberFormatting.es.js";
+import { Select as n } from "../../common/components/Select.es.js";
+import g from "react";
+import A from "@mui/material/Stack";
+import { startOfToday as i } from "date-fns/startOfToday";
+import { jsx as t, jsxs as T } from "react/jsx-runtime";
+import { addYears as _ } from "date-fns/addYears";
+import { subDays as Y } from "date-fns/subDays";
+import { setDayOfYear as x } from "date-fns/setDayOfYear";
+import { AdapterDateFns as D } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { getDayOfYear as C } from "date-fns/getDayOfYear";
+import { DatePicker as P } from "@mui/x-date-pickers";
+import { LocalizationProvider as W } from "@mui/x-date-pickers/LocalizationProvider";
+var N = ({ frequency: a, firstDay: y, secondDay: h, onFrequencyChange: s, onFirstDayChange: d, onSecondDayChange: c }) => {
+  const { recurring: e } = E(), f = g.useMemo(() => [
+    {
+      id: r.EveryWeek,
+      label: e.frequency_every_week
+    },
+    {
+      id: r.EveryOtherWeek,
+      label: e.frequency_every_other_week
+    },
+    {
+      id: r.TwiceAMonth,
+      label: e.frequency_twice_a_month
+    },
+    {
+      id: r.EveryMonth,
+      label: e.frequency_every_month
+    },
+    {
+      id: r.EveryOtherMonth,
+      label: e.frequency_every_other_month
+    },
+    {
+      id: r.EveryQuarter,
+      label: e.frequency_every_quarter
+    },
+    {
+      id: r.EveryOtherQuarter,
+      label: e.frequency_every_other_quarter
+    },
+    {
+      id: r.EveryYear,
+      label: e.frequency_every_year
+    }
+  ], [e]), p = [
+    {
+      id: 0,
+      label: e.weekday_sunday
+    },
+    {
+      id: 1,
+      label: e.weekday_monday
+    },
+    {
+      id: 2,
+      label: e.weekday_tuesday
+    },
+    {
+      id: 3,
+      label: e.weekday_wednesday
+    },
+    {
+      id: 4,
+      label: e.weekday_thursday
+    },
+    {
+      id: 5,
+      label: e.weekday_friday
+    },
+    {
+      id: 6,
+      label: e.weekday_saturday
+    }
+  ], l = [...Array(31).keys()].map((o) => ({
+    id: o + 1,
+    label: M(o + 1)
+  }));
+  l[30].label += ` (${e.last_day_of_month})`;
+  const v = l.slice(0, 15), b = l.slice(14), u = a === r.EveryWeek || a === r.EveryOtherWeek, k = a === r.TwiceAMonth || a === r.EveryMonth || a === r.EveryOtherMonth || a === r.EveryQuarter || a === r.EveryOtherQuarter, m = x(i(), y), w = m < i() ? _(m, 1) : m, O = (o) => {
+    o && d(C(o));
+  };
+  return /* @__PURE__ */ T(A, {
+    gap: 24,
+    sx: { m: 24 },
+    children: [
+      /* @__PURE__ */ t(n, {
+        label: e.frequency,
+        onChange: s,
+        options: f,
+        value: a
+      }),
+      u && /* @__PURE__ */ t(n, {
+        label: e.day_of_the_week,
+        onChange: d,
+        options: p,
+        value: y
+      }),
+      k && /* @__PURE__ */ t(n, {
+        label: a === r.TwiceAMonth ? e.first_day_of_the_month : e.day_of_the_month,
+        onChange: d,
+        options: a === r.TwiceAMonth ? v : l,
+        value: y
+      }),
+      a === r.TwiceAMonth && /* @__PURE__ */ t(n, {
+        label: e.second_day_of_the_month,
+        onChange: c,
+        options: b,
+        value: h ?? ""
+      }),
+      a === r.EveryYear && /* @__PURE__ */ t(W, {
+        dateAdapter: D,
+        children: /* @__PURE__ */ t(P, {
+          disablePast: !0,
+          label: e.next_payment_date,
+          maxDate: Y(_(i(), 1), 1),
+          minDate: i(),
+          onChange: O,
+          value: w
+        })
+      })
+    ]
+  });
+};
+export {
+  N as PaymentSchedule
+};
+
+//# sourceMappingURL=PaymentSchedule.es.js.map

package/dist/recurringtransactions/components/PaymentSchedule.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentSchedule.es.js","names":[],"sources":["../../../src/recurringtransactions/components/PaymentSchedule.tsx"],"sourcesContent":["import React from 'react'\nimport { addYears } from 'date-fns/addYears'\nimport { getDayOfYear } from 'date-fns/getDayOfYear'\nimport { setDayOfYear } from 'date-fns/setDayOfYear'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { subDays } from 'date-fns/subDays'\n\nimport Stack from '@mui/material/Stack'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport { Select, useGlobalCopyStore } from '../../common'\nimport { Frequency } from '../../core'\nimport { formatOrdinal } from '../../core/utils/NumberFormatting'\n\ninterface PaymentScheduleProps {\n  frequency: Frequency\n  firstDay: number\n  secondDay?: number\n  onFrequencyChange: (frequency: Frequency) => void\n  onFirstDayChange: (day: number) => void\n  onSecondDayChange: (day: number) => void\n}\n\nexport const PaymentSchedule = ({\n  frequency,\n  firstDay,\n  secondDay,\n  onFrequencyChange,\n  onFirstDayChange,\n  onSecondDayChange,\n}: PaymentScheduleProps) => {\n  const { recurring: copy } = useGlobalCopyStore()\n\n  const frequencies = React.useMemo(\n    () => [\n      { id: Frequency.EveryWeek, label: copy.frequency_every_week },\n      { id: Frequency.EveryOtherWeek, label: copy.frequency_every_other_week },\n      { id: Frequency.TwiceAMonth, label: copy.frequency_twice_a_month },\n      { id: Frequency.EveryMonth, label: copy.frequency_every_month },\n      { id: Frequency.EveryOtherMonth, label: copy.frequency_every_other_month },\n      { id: Frequency.EveryQuarter, label: copy.frequency_every_quarter },\n      { id: Frequency.EveryOtherQuarter, label: copy.frequency_every_other_quarter },\n      { id: Frequency.EveryYear, label: copy.frequency_every_year },\n    ],\n    [copy],\n  )\n\n  const daysOfWeek = [\n    { id: 0, label: copy.weekday_sunday },\n    { id: 1, label: copy.weekday_monday },\n    { id: 2, label: copy.weekday_tuesday },\n    { id: 3, label: copy.weekday_wednesday },\n    { id: 4, label: copy.weekday_thursday },\n    { id: 5, label: copy.weekday_friday },\n    { id: 6, label: copy.weekday_saturday },\n  ]\n\n  const daysOfMonth = [...Array(31).keys()].map((day) => ({\n    id: day + 1,\n    label: formatOrdinal(day + 1),\n  }))\n  daysOfMonth[30].label += ` (${copy.last_day_of_month})`\n\n  const beginDaysOfMonth = daysOfMonth.slice(0, 15)\n  const endDaysOfMonth = daysOfMonth.slice(14)\n\n  const weeklyType = frequency === Frequency.EveryWeek || frequency === Frequency.EveryOtherWeek\n  const monthlyType =\n    frequency === Frequency.TwiceAMonth ||\n    frequency === Frequency.EveryMonth ||\n    frequency === Frequency.EveryOtherMonth ||\n    frequency === Frequency.EveryQuarter ||\n    frequency === Frequency.EveryOtherQuarter\n\n  const tempDayOfYear = setDayOfYear(startOfToday(), firstDay)\n  const dayOfYear = tempDayOfYear < startOfToday() ? addYears(tempDayOfYear, 1) : tempDayOfYear\n\n  const handleYearlyChange = (date: Date | null) => {\n    if (date) {\n      onFirstDayChange(getDayOfYear(date))\n    }\n  }\n\n  return (\n    <Stack gap={24} sx={{ m: 24 }}>\n      <Select\n        label={copy.frequency}\n        onChange={onFrequencyChange}\n        options={frequencies}\n        value={frequency}\n      />\n      {weeklyType && (\n        <Select\n          label={copy.day_of_the_week}\n          onChange={onFirstDayChange}\n          options={daysOfWeek}\n          value={firstDay}\n        />\n      )}\n      {monthlyType && (\n        <Select\n          label={\n            frequency === Frequency.TwiceAMonth\n              ? copy.first_day_of_the_month\n              : copy.day_of_the_month\n          }\n          onChange={onFirstDayChange}\n          options={frequency === Frequency.TwiceAMonth ? beginDaysOfMonth : daysOfMonth}\n          value={firstDay}\n        />\n      )}\n      {frequency === Frequency.TwiceAMonth && (\n        <Select\n          label={copy.second_day_of_the_month}\n          onChange={onSecondDayChange}\n          options={endDaysOfMonth}\n          value={secondDay ?? ''}\n        />\n      )}\n      {frequency === Frequency.EveryYear && (\n        <LocalizationProvider dateAdapter={AdapterDateFns}>\n          <DatePicker\n            disablePast={true}\n            label={copy.next_payment_date}\n            maxDate={subDays(addYears(startOfToday(), 1), 1)}\n            minDate={startOfToday()}\n            onChange={handleYearlyChange}\n            value={dayOfYear}\n          />\n        </LocalizationProvider>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

package/dist/recurringtransactions/components/RecurrenceBadges.es.js

@@ -0,0 +1,64 @@
+import a from "../../common/components/IconBacking.es.js";
+import { Cancel as i, CheckCircle as l, MonetizationOn as d, Schedule as g } from "@mxenabled/mx-icons";
+import { jsx as e } from "react/jsx-runtime";
+var n = {
+  gridRow: 1,
+  gridColumn: 1,
+  zIndex: 2
+}, c = (o) => o ? { margin: "0 0 -6px -4px" } : void 0, p = ({ isOffset: o = !1, size: r = 16 }) => /* @__PURE__ */ e(a, {
+  backingSx: { backgroundColor: "background.paper" },
+  size: r,
+  sx: { ...c(o) },
+  children: /* @__PURE__ */ e(g, {
+    color: "primary",
+    filled: !0,
+    sx: {
+      fontSize: r,
+      ...n
+    }
+  })
+}), s = ({ isOffset: o = !1, size: r = 16 }) => /* @__PURE__ */ e(a, {
+  backingSx: { backgroundColor: "background.paper" },
+  size: r,
+  sx: { ...c(o) },
+  children: /* @__PURE__ */ e(d, {
+    filled: !0,
+    sx: {
+      color: "categories.income",
+      fontSize: r,
+      ...n
+    }
+  })
+}), u = ({ isOffset: o = !1, size: r = 16 }) => /* @__PURE__ */ e(a, {
+  backingSx: { backgroundColor: "background.paper" },
+  size: r,
+  sx: { ...c(o) },
+  children: /* @__PURE__ */ e(i, {
+    color: "error",
+    filled: !0,
+    sx: {
+      fontSize: r,
+      ...n
+    }
+  })
+}), k = ({ isOffset: o = !1, size: r = 16 }) => /* @__PURE__ */ e(a, {
+  backingSx: { backgroundColor: "background.paper" },
+  size: r,
+  sx: { ...c(o) },
+  children: /* @__PURE__ */ e(l, {
+    color: "success",
+    filled: !0,
+    sx: {
+      fontSize: r,
+      ...n
+    }
+  })
+});
+export {
+  s as IncomeBadge,
+  u as MissedBadge,
+  k as PaidBadge,
+  p as UpcomingExpenseBadge
+};
+
+//# sourceMappingURL=RecurrenceBadges.es.js.map

package/dist/recurringtransactions/components/RecurrenceBadges.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecurrenceBadges.es.js","names":[],"sources":["../../../src/recurringtransactions/components/RecurrenceBadges.tsx"],"sourcesContent":["import { Schedule } from '@mxenabled/mx-icons'\nimport { MonetizationOn } from '@mxenabled/mx-icons'\nimport { Cancel } from '@mxenabled/mx-icons'\nimport { CheckCircle } from '@mxenabled/mx-icons'\n\nimport IconBacking from '../../common/components/IconBacking'\n\nconst iconStyle = {\n  gridRow: 1,\n  gridColumn: 1,\n  zIndex: 2,\n}\n\nconst offsetStyle = (isOffset: boolean) => {\n  return isOffset ? { margin: '0 0 -6px -4px' } : undefined\n}\n\nexport const UpcomingExpenseBadge = ({ isOffset = false, size = 16 }) => (\n  <IconBacking\n    backingSx={{ backgroundColor: 'background.paper' }}\n    size={size}\n    sx={{ ...offsetStyle(isOffset) }}\n  >\n    <Schedule color=\"primary\" filled={true} sx={{ fontSize: size, ...iconStyle }} />\n  </IconBacking>\n)\n\nexport const IncomeBadge = ({ isOffset = false, size = 16 }) => (\n  <IconBacking\n    backingSx={{ backgroundColor: 'background.paper' }}\n    size={size}\n    sx={{ ...offsetStyle(isOffset) }}\n  >\n    <MonetizationOn\n      filled={true}\n      sx={{ color: 'categories.income', fontSize: size, ...iconStyle }}\n    />\n  </IconBacking>\n)\n\nexport const MissedBadge = ({ isOffset = false, size = 16 }) => (\n  <IconBacking\n    backingSx={{ backgroundColor: 'background.paper' }}\n    size={size}\n    sx={{ ...offsetStyle(isOffset) }}\n  >\n    <Cancel color=\"error\" filled={true} sx={{ fontSize: size, ...iconStyle }} />\n  </IconBacking>\n)\n\nexport const PaidBadge = ({ isOffset = false, size = 16 }) => (\n  <IconBacking\n    backingSx={{ backgroundColor: 'background.paper' }}\n    size={size}\n    sx={{ ...offsetStyle(isOffset) }}\n  >\n    <CheckCircle color=\"success\" filled={true} sx={{ fontSize: size, ...iconStyle }} />\n  </IconBacking>\n)\n"],"mappings":";;;AAOA,IAAM,IAAY;AAAA,EAChB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AACV,GAEM,IAAA,CAAe,MACZ,IAAW,EAAE,QAAQ,gBAAgB,IAAI,QAGrC,IAAA,CAAwB,EAAE,UAAA,IAAW,IAAO,MAAA,IAAO,GAAA,MAC9D,gBAAA,EAAC,GAAD;AAAA,EACE,WAAW,EAAE,iBAAiB,mBAAmB;AAAA,EAC3C,MAAA;AAAA,EACN,IAAI,EAAE,GAAG,EAAY,CAAQ,EAAE;AAAA,YAE/B,gBAAA,EAAC,GAAD;AAAA,IAAU,OAAM;AAAA,IAAU,QAAQ;AAAA,IAAM,IAAI;AAAA,MAAE,UAAU;AAAA,MAAM,GAAG;AAAA,IAAU;AAAA,EAAI,CAAA;AACpE,CAAA,GAGF,IAAA,CAAe,EAAE,UAAA,IAAW,IAAO,MAAA,IAAO,GAAA,MACrD,gBAAA,EAAC,GAAD;AAAA,EACE,WAAW,EAAE,iBAAiB,mBAAmB;AAAA,EAC3C,MAAA;AAAA,EACN,IAAI,EAAE,GAAG,EAAY,CAAQ,EAAE;AAAA,YAE/B,gBAAA,EAAC,GAAD;AAAA,IACE,QAAQ;AAAA,IACR,IAAI;AAAA,MAAE,OAAO;AAAA,MAAqB,UAAU;AAAA,MAAM,GAAG;AAAA,IAAU;AAAA,EAChE,CAAA;AACU,CAAA,GAGF,IAAA,CAAe,EAAE,UAAA,IAAW,IAAO,MAAA,IAAO,GAAA,MACrD,gBAAA,EAAC,GAAD;AAAA,EACE,WAAW,EAAE,iBAAiB,mBAAmB;AAAA,EAC3C,MAAA;AAAA,EACN,IAAI,EAAE,GAAG,EAAY,CAAQ,EAAE;AAAA,YAE/B,gBAAA,EAAC,GAAD;AAAA,IAAQ,OAAM;AAAA,IAAQ,QAAQ;AAAA,IAAM,IAAI;AAAA,MAAE,UAAU;AAAA,MAAM,GAAG;AAAA,IAAU;AAAA,EAAI,CAAA;AAChE,CAAA,GAGF,IAAA,CAAa,EAAE,UAAA,IAAW,IAAO,MAAA,IAAO,GAAA,MACnD,gBAAA,EAAC,GAAD;AAAA,EACE,WAAW,EAAE,iBAAiB,mBAAmB;AAAA,EAC3C,MAAA;AAAA,EACN,IAAI,EAAE,GAAG,EAAY,CAAQ,EAAE;AAAA,YAE/B,gBAAA,EAAC,GAAD;AAAA,IAAa,OAAM;AAAA,IAAU,QAAQ;AAAA,IAAM,IAAI;AAAA,MAAE,UAAU;AAAA,MAAM,GAAG;AAAA,IAAU;AAAA,EAAI,CAAA;AACvE,CAAA"}

package/dist/recurringtransactions/components/RecurrenceList.es.js

@@ -0,0 +1,87 @@
+import { DATE_FORMATS_INTL as v, formatDate as D } from "../../core/constants/DateFormats.es.js";
+import { useGlobalCopyStore as _ } from "../../common/context/hooks.es.js";
+import { groupRecurrencesByDate as A } from "../../core/utils/RecurringTransactionsUtil.es.js";
+import { RecurrenceRow as p } from "./RecurrenceRow.es.js";
+import o from "react";
+import { observer as F } from "mobx-react-lite";
+import s from "@mui/material/Stack";
+import { H3 as L, Text as h } from "@mxenabled/mxui";
+import R from "@mui/material/Button";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import f from "@mui/material/Divider";
+import u from "@mui/material/List";
+import S from "@mui/material/ListItem";
+import T from "@mui/material/ListSubheader";
+var K = F(({ recurrences: t, isMini: a = !1, onResetClick: c, onRecurrenceClick: d, sx: x = {}, title: n }) => {
+  const { recurring: l } = _(), b = o.useMemo(() => A(t), [t]);
+  return /* @__PURE__ */ i(s, {
+    id: "recurrence-list",
+    sx: {
+      gap: 8,
+      mt: 4,
+      ...x
+    },
+    tabIndex: -1,
+    children: [n && /* @__PURE__ */ i(s, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        px: 24
+      },
+      children: [/* @__PURE__ */ r(L, {
+        bold: !0,
+        variant: "body1",
+        children: n
+      }), c && /* @__PURE__ */ r(R, {
+        onClick: c,
+        size: "small",
+        variant: "text",
+        children: l.reset
+      })]
+    }), t.length === 0 ? /* @__PURE__ */ r(h, {
+      fontStyle: "italic",
+      sx: {
+        py: 24,
+        textAlign: "center"
+      },
+      children: l.no_activities
+    }) : /* @__PURE__ */ r(u, {
+      "aria-label": n,
+      children: a ? t.map((e, m) => /* @__PURE__ */ i(o.Fragment, { children: [/* @__PURE__ */ r(p, {
+        isMini: a,
+        onRecurrenceClick: d,
+        recurrence: e
+      }), /* @__PURE__ */ r(f, { sx: { mx: 24 } })] }, `recurrence-${m}`)) : b.map((e, m) => /* @__PURE__ */ i(o.Fragment, { children: [/* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(u, {
+        "aria-labelledby": `date-group-header-${e.id}`,
+        subheader: /* @__PURE__ */ r(T, {
+          "aria-hidden": "true",
+          id: `date-group-header-${e.id}`,
+          role: "presentation",
+          sx: {
+            bgcolor: "background.paper",
+            ml: 8,
+            pb: 4,
+            pt: 12
+          },
+          children: /* @__PURE__ */ r(h, {
+            bold: !0,
+            variant: "caption",
+            children: D(e.date, v.DAY_OF_WEEK_MONTH_DAY)
+          })
+        }),
+        sx: { width: "100%" },
+        children: e.recurrences.map((g, y) => /* @__PURE__ */ r(o.Fragment, { children: /* @__PURE__ */ r(p, {
+          isMini: a,
+          onRecurrenceClick: d,
+          recurrence: g
+        }) }, `day-recurrence-${y}`))
+      }) }, e.id), /* @__PURE__ */ r(f, { sx: { mx: 24 } })] }, `recurrence-${m}`))
+    })]
+  });
+});
+export {
+  K as RecurrenceList
+};
+
+//# sourceMappingURL=RecurrenceList.es.js.map

package/dist/recurringtransactions/components/RecurrenceList.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecurrenceList.es.js","names":[],"sources":["../../../src/recurringtransactions/components/RecurrenceList.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Button from '@mui/material/Button'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListSubheader from '@mui/material/ListSubheader'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\nimport { H3, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\nimport { type Recurrence } from '../../core'\n\nimport { groupRecurrencesByDate } from '../../core/utils/RecurringTransactionsUtil'\n\nimport { RecurrenceRow } from './RecurrenceRow'\n\ninterface RecurrenceListProps {\n  recurrences: Recurrence[]\n  isMini?: boolean\n  onResetClick?: () => void\n  onRecurrenceClick?: (recurrence: Recurrence) => void\n  sx?: SxProps\n  title?: string\n}\n\nexport const RecurrenceList = observer(\n  ({\n    recurrences,\n    isMini = false,\n    onResetClick,\n    onRecurrenceClick,\n    sx = {},\n    title,\n  }: RecurrenceListProps) => {\n    const { recurring: copy } = useGlobalCopyStore()\n\n    const groupedRecurrences = React.useMemo(() => {\n      return groupRecurrencesByDate(recurrences)\n    }, [recurrences])\n\n    return (\n      <Stack id=\"recurrence-list\" sx={{ gap: 8, mt: 4, ...sx }} tabIndex={-1}>\n        {title && (\n          <Stack\n            sx={{\n              alignItems: 'center',\n              flexDirection: 'row',\n              justifyContent: 'space-between',\n              px: 24,\n            }}\n          >\n            <H3 bold={true} variant=\"body1\">\n              {title}\n            </H3>\n            {onResetClick && (\n              <Button onClick={onResetClick} size=\"small\" variant=\"text\">\n                {copy.reset}\n              </Button>\n            )}\n          </Stack>\n        )}\n\n        {recurrences.length === 0 ? (\n          <Text fontStyle=\"italic\" sx={{ py: 24, textAlign: 'center' }}>\n            {copy.no_activities}\n          </Text>\n        ) : (\n          <List aria-label={title}>\n            {isMini\n              ? recurrences.map((recurrence, index) => (\n                  <React.Fragment key={`recurrence-${index}`}>\n                    <RecurrenceRow\n                      isMini={isMini}\n                      onRecurrenceClick={onRecurrenceClick}\n                      recurrence={recurrence}\n                    />\n                    <Divider sx={{ mx: 24 }} />\n                  </React.Fragment>\n                ))\n              : groupedRecurrences.map((group, index) => (\n                  <React.Fragment key={`recurrence-${index}`}>\n                    <ListItem key={group.id}>\n                      <List\n                        aria-labelledby={`date-group-header-${group.id}`}\n                        subheader={\n                          <ListSubheader\n                            aria-hidden=\"true\"\n                            id={`date-group-header-${group.id}`}\n                            role=\"presentation\"\n                            sx={{ bgcolor: 'background.paper', ml: 8, pb: 4, pt: 12 }}\n                          >\n                            <Text bold={true} variant=\"caption\">\n                              {formatDate(group.date, DATE_FORMATS_INTL.DAY_OF_WEEK_MONTH_DAY)}\n                            </Text>\n                          </ListSubheader>\n                        }\n                        sx={{ width: '100%' }}\n                      >\n                        {group.recurrences.map((recurrence, index) => (\n                          <React.Fragment key={`day-recurrence-${index}`}>\n                            <RecurrenceRow\n                              isMini={isMini}\n                              onRecurrenceClick={onRecurrenceClick}\n                              recurrence={recurrence}\n                            />\n                          </React.Fragment>\n                        ))}\n                      </List>\n                    </ListItem>\n                    <Divider sx={{ mx: 24 }} />\n                  </React.Fragment>\n                ))}\n          </List>\n        )}\n      </Stack>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;AA8BA,IAAa,IAAiB,EAAA,CAC3B,EACC,aAAA,GACA,QAAA,IAAS,IACT,cAAA,GACA,mBAAA,GACA,IAAA,IAAK,CAAC,GACN,OAAA,EAAA,MACyB;AACzB,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GAEzC,IAAqB,EAAM,QAAA,MACxB,EAAuB,CAAW,GACxC,CAAC,CAAW,CAAC;AAEhB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAG;AAAA,IAAkB,IAAI;AAAA,MAAE,KAAK;AAAA,MAAG,IAAI;AAAA,MAAG,GAAG;AAAA,IAAG;AAAA,IAAG,UAAU;AAAA,cAApE,CACG,KACC,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,IAAI;AAAA,MACN;AAAA,gBANF,CAQE,gBAAA,EAAC,GAAD;AAAA,QAAI,MAAM;AAAA,QAAM,SAAQ;AAAA,kBACrB;AAAA,MACC,CAAA,GACH,KACC,gBAAA,EAAC,GAAD;AAAA,QAAQ,SAAS;AAAA,QAAc,MAAK;AAAA,QAAQ,SAAQ;AAAA,kBACjD,EAAK;AAAA,MACA,CAAA,CAEL;AAAA,QAGR,EAAY,WAAW,IACtB,gBAAA,EAAC,GAAD;AAAA,MAAM,WAAU;AAAA,MAAS,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,WAAW;AAAA,MAAS;AAAA,gBACxD,EAAK;AAAA,IACF,CAAA,IAEN,gBAAA,EAAC,GAAD;AAAA,MAAM,cAAY;AAAA,gBACf,IACG,EAAY,IAAA,CAAK,GAAY,MAC3B,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QACU,QAAA;AAAA,QACW,mBAAA;AAAA,QACP,YAAA;AAAA,MACb,CAAA,GACD,gBAAA,EAAC,GAAD,EAAS,IAAI,EAAE,IAAI,GAAG,EAAI,CAAA,CACZ,EAAA,GAPK,cAAc,CAAA,EAOnB,CACjB,IACD,EAAmB,IAAA,CAAK,GAAO,MAC7B,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,QACE,mBAAiB,qBAAqB,EAAM,EAAA;AAAA,QAC5C,WACE,gBAAA,EAAC,GAAD;AAAA,UACE,eAAY;AAAA,UACZ,IAAI,qBAAqB,EAAM,EAAA;AAAA,UAC/B,MAAK;AAAA,UACL,IAAI;AAAA,YAAE,SAAS;AAAA,YAAoB,IAAI;AAAA,YAAG,IAAI;AAAA,YAAG,IAAI;AAAA,UAAG;AAAA,oBAExD,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,SAAQ;AAAA,sBACvB,EAAW,EAAM,MAAM,EAAkB,qBAAqB;AAAA,UAC3D,CAAA;AAAA,QACO,CAAA;AAAA,QAEjB,IAAI,EAAE,OAAO,OAAO;AAAA,kBAEnB,EAAM,YAAY,IAAA,CAAK,GAAY,MAClC,gBAAA,EAAC,EAAM,UAAP,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,UACU,QAAA;AAAA,UACW,mBAAA;AAAA,UACP,YAAA;AAAA,QACb,CAAA,EACa,GANK,kBAAkB,CAAA,EAMvB,CACjB;AAAA,MACG,CAAA,EACE,GA3BK,EAAM,EA2BX,GACV,gBAAA,EAAC,GAAD,EAAS,IAAI,EAAE,IAAI,GAAG,EAAI,CAAA,CACZ,EAAA,GA9BK,cAAc,CAAA,EA8BnB,CACjB;AAAA,IACD,CAAA,CAEH;AAAA;AAEX,CACF"}