@mx-cartographer/experiences 9.2.4-alpha.al4 → 9.3.0-alph.bb2

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

@@ -0,0 +1,133 @@
+import { buildDynamicCopy as m } from "../../core/utils/Localization.es.js";
+import { DATE_FORMATS_INTL as l, formatDate as c } from "../../core/constants/DateFormats.es.js";
+import { useGlobalCopyStore as b, useRecurringTransactionsStore as D } from "../../common/context/hooks.es.js";
+import { RecurrenceStatus as a, RecurrenceType as x } from "../../core/types/RepeatingTransaction.es.js";
+import { formatCurrency as L } from "../../core/utils/NumberFormatting.es.js";
+import { getFrequencyLabel as h } from "../../core/utils/RecurringTransactionsUtil.es.js";
+import { IncomeBadge as v, MissedBadge as G, PaidBadge as M, UpcomingExpenseBadge as R } from "./RecurrenceBadges.es.js";
+import _ from "react";
+import s from "@mui/material/Stack";
+import { InstitutionLogo as S, MerchantLogo as k, Text as r } from "@mxenabled/mxui";
+import { Cancel as A, CheckCircle as O } from "@mxenabled/mx-icons";
+import { Fragment as P, jsx as i, jsxs as o } from "react/jsx-runtime";
+import B from "@mui/material/ListItem";
+import N from "@mui/material/ListItemButton";
+import j from "@mui/material/ListItemText";
+import U from "@mui/material/ListItemAvatar";
+var z = (t) => {
+  if (t.type === x.Income) return /* @__PURE__ */ i(v, {});
+  switch (t.status) {
+    case a.Missed:
+      return /* @__PURE__ */ i(G, {});
+    case a.Paid:
+      return /* @__PURE__ */ i(M, {});
+    default:
+      return /* @__PURE__ */ i(R, {});
+  }
+}, F = (t, e) => {
+  switch (t.status) {
+    case a.Paid:
+      return t.expectedDate ? m(e.paid_on, c(t.occurredOnDate || t.expectedDate, l.MONTH_DAY)) : e.paid;
+    case a.Missed:
+      return m(e.missed_on, c(t.expectedDate, l.MONTH_DAY));
+    case a.Upcoming:
+      return m(e.upcoming_on, c(t.expectedDate, l.MONTH_DAY));
+    default:
+      return e.unknown;
+  }
+}, st = ({ recurrence: t, isMini: e = !1, onRecurrenceClick: w = () => {
+}, showOrdinal: I = !1 }) => {
+  const { recurring: n } = b(), { detailedRepeatingTransactions: p } = D(), u = _.useMemo(() => p.find((y) => y.guid === t.repeatingTransactionGuid), [t, p]), f = t.type === x.Income, C = t.status === a.Paid, g = t.status === a.Missed, T = t.status === a.Upcoming;
+  let d = n.paid?.toLowerCase();
+  return g ? d = n.missed?.toLowerCase() : T && (d = I ? h(n, u || {}, !0) : h(n, u || {}, !1)), /* @__PURE__ */ i(B, {
+    disableGutters: !0,
+    disablePadding: !0,
+    children: /* @__PURE__ */ o(N, {
+      onClick: () => {
+        w(t);
+      },
+      children: [/* @__PURE__ */ i(U, { children: /* @__PURE__ */ i(k, {
+        categoryGuid: t.categoryGuid,
+        merchantGuid: t.merchantGuid
+      }) }), /* @__PURE__ */ i(j, { children: /* @__PURE__ */ o(s, {
+        direction: "row",
+        gap: 4,
+        sx: {
+          justifyContent: "space-between",
+          textOverflow: "ellipsis",
+          textWrap: "nowrap"
+        },
+        children: [/* @__PURE__ */ o(s, {
+          direction: "column",
+          width: "50%",
+          children: [/* @__PURE__ */ i(r, {
+            bold: !0,
+            variant: "body1",
+            children: t.name
+          }), /* @__PURE__ */ i(s, {
+            alignItems: "center",
+            direction: "row",
+            gap: 6,
+            children: e ? /* @__PURE__ */ o(s, {
+              direction: "row",
+              gap: 4,
+              children: [z(t), /* @__PURE__ */ i(r, {
+                variant: "caption",
+                children: F(t, n)
+              })]
+            }) : /* @__PURE__ */ o(P, { children: [t.institutionGuid && /* @__PURE__ */ i(S, {
+              alt: "",
+              institutionGuid: t.institutionGuid,
+              size: 12
+            }), /* @__PURE__ */ i(r, {
+              sx: { maxWidth: 250 },
+              variant: "caption",
+              children: t.institutionName
+            })] })
+          })]
+        }), /* @__PURE__ */ o(s, {
+          alignItems: "flex-end",
+          width: "100%",
+          children: [/* @__PURE__ */ o(r, {
+            bold: !0,
+            color: f ? "success.main" : "text.primary",
+            variant: "body1",
+            children: [f ? "+" : "", L(t.amount, "0,0.00")]
+          }), !e && /* @__PURE__ */ o(s, {
+            direction: "row",
+            sx: {
+              alignItems: "center",
+              gap: 6,
+              justifyContent: "flex-end",
+              textTransform: "uppercase",
+              width: "100%"
+            },
+            children: [
+              C && /* @__PURE__ */ i(O, {
+                color: "success",
+                filled: !0,
+                size: 12
+              }),
+              g && /* @__PURE__ */ i(A, {
+                color: "error",
+                filled: !0,
+                size: 12
+              }),
+              /* @__PURE__ */ i(r, {
+                bold: !0,
+                color: "text.secondary",
+                variant: "caption",
+                children: d
+              })
+            ]
+          })]
+        })]
+      }) })]
+    })
+  });
+};
+export {
+  st as RecurrenceRow
+};
+
+//# sourceMappingURL=RecurrenceRow.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecurrenceRow.es.js","names":[],"sources":["../../../src/recurringtransactions/components/RecurrenceRow.tsx"],"sourcesContent":["import React from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { CheckCircle, Cancel } from '@mxenabled/mx-icons'\nimport { InstitutionLogo, MerchantLogo, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore, useRecurringTransactionsStore } from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\nimport {\n  type Recurrence,\n  type RecurringCopy,\n  RecurrenceStatus,\n  RecurrenceType,\n  RepeatingTransaction,\n} from '../../core'\n\nimport { getFrequencyLabel } from '../../core/utils/RecurringTransactionsUtil'\n\nimport { IncomeBadge, MissedBadge, PaidBadge, UpcomingExpenseBadge } from './RecurrenceBadges'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nconst getStatusIcon = (recurrence: Recurrence): React.ReactNode => {\n  if (recurrence.type === RecurrenceType.Income) {\n    return <IncomeBadge />\n  }\n\n  switch (recurrence.status) {\n    case RecurrenceStatus.Missed:\n      return <MissedBadge />\n    case RecurrenceStatus.Paid:\n      return <PaidBadge />\n    default:\n      return <UpcomingExpenseBadge />\n  }\n}\n\nconst getStatus = (recurrence: Recurrence, copy: RecurringCopy): string => {\n  switch (recurrence.status) {\n    case RecurrenceStatus.Paid:\n      return recurrence.expectedDate\n        ? (buildDynamicCopy(\n            copy.paid_on,\n            formatDate(\n              recurrence.occurredOnDate || recurrence.expectedDate,\n              DATE_FORMATS_INTL.MONTH_DAY,\n            ),\n          ) as string)\n        : copy.paid\n    case RecurrenceStatus.Missed:\n      return buildDynamicCopy(\n        copy.missed_on,\n        formatDate(recurrence.expectedDate, DATE_FORMATS_INTL.MONTH_DAY),\n      ) as string\n    case RecurrenceStatus.Upcoming:\n      return buildDynamicCopy(\n        copy.upcoming_on,\n        formatDate(recurrence.expectedDate, DATE_FORMATS_INTL.MONTH_DAY),\n      ) as string\n    default:\n      return copy.unknown\n  }\n}\n\ninterface RecurrenceRowProps {\n  recurrence: Recurrence\n  isMini?: boolean\n  onRecurrenceClick?: (recurrence: Recurrence) => void\n  showOrdinal?: boolean\n}\n\nexport const RecurrenceRow = ({\n  recurrence,\n  isMini = false,\n  onRecurrenceClick = () => {},\n  showOrdinal = false,\n}: RecurrenceRowProps) => {\n  const { recurring: copy } = useGlobalCopyStore()\n  const { detailedRepeatingTransactions } = useRecurringTransactionsStore()\n\n  const repeatingTransaction = React.useMemo(\n    () =>\n      detailedRepeatingTransactions.find((rt) => rt.guid === recurrence.repeatingTransactionGuid),\n    [recurrence, detailedRepeatingTransactions],\n  )\n\n  const isCredit = recurrence.type === RecurrenceType.Income\n  const isPaid = recurrence.status === RecurrenceStatus.Paid\n  const isMissed = recurrence.status === RecurrenceStatus.Missed\n  const isUpcoming = recurrence.status === RecurrenceStatus.Upcoming\n\n  let statusLabel = copy.paid?.toLowerCase()\n  if (isMissed) {\n    statusLabel = copy.missed?.toLowerCase()\n  } else if (isUpcoming) {\n    statusLabel = showOrdinal\n      ? getFrequencyLabel(copy, repeatingTransaction || ({} as RepeatingTransaction), true)\n      : getFrequencyLabel(copy, repeatingTransaction || ({} as RepeatingTransaction), false)\n  }\n\n  const onItemClick = () => {\n    onRecurrenceClick(recurrence)\n  }\n\n  return (\n    //TODO: implement common/components/ListItemRow.tsx\n    <ListItem disableGutters={true} disablePadding={true}>\n      <ListItemButton onClick={onItemClick}>\n        <ListItemAvatar>\n          <MerchantLogo\n            categoryGuid={recurrence.categoryGuid}\n            merchantGuid={recurrence.merchantGuid}\n          />\n        </ListItemAvatar>\n        <ListItemText>\n          <Stack\n            direction=\"row\"\n            gap={4}\n            sx={{ justifyContent: 'space-between', textOverflow: 'ellipsis', textWrap: 'nowrap' }}\n          >\n            <Stack direction=\"column\" width=\"50%\">\n              <Text bold={true} variant=\"body1\">\n                {recurrence.name}\n              </Text>\n              <Stack alignItems=\"center\" direction=\"row\" gap={6}>\n                {isMini ? (\n                  <Stack direction=\"row\" gap={4}>\n                    {getStatusIcon(recurrence)}\n                    <Text variant=\"caption\">{getStatus(recurrence, copy)}</Text>\n                  </Stack>\n                ) : (\n                  <>\n                    {recurrence.institutionGuid && (\n                      <InstitutionLogo\n                        alt=\"\"\n                        institutionGuid={recurrence.institutionGuid}\n                        size={12}\n                      />\n                    )}\n                    <Text sx={{ maxWidth: 250 }} variant=\"caption\">\n                      {recurrence.institutionName}\n                    </Text>\n                  </>\n                )}\n              </Stack>\n            </Stack>\n\n            <Stack alignItems=\"flex-end\" width=\"100%\">\n              <Text bold={true} color={isCredit ? 'success.main' : 'text.primary'} variant=\"body1\">\n                {isCredit ? '+' : ''}\n                {formatCurrency(recurrence.amount, '0,0.00')}\n              </Text>\n              {!isMini && (\n                <Stack\n                  direction=\"row\"\n                  sx={{\n                    alignItems: 'center',\n                    gap: 6,\n                    justifyContent: 'flex-end',\n                    textTransform: 'uppercase',\n                    width: '100%',\n                  }}\n                >\n                  {isPaid && <CheckCircle color=\"success\" filled={true} size={12} />}\n                  {isMissed && <Cancel color=\"error\" filled={true} size={12} />}\n                  <Text bold={true} color=\"text.secondary\" variant=\"caption\">\n                    {statusLabel}\n                  </Text>\n                </Stack>\n              )}\n            </Stack>\n          </Stack>\n        </ListItemText>\n      </ListItemButton>\n    </ListItem>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { useGlobalCopyStore as s } from "../../common/context/hooks.es.js";
+import a from "../../common/components/drawer/Drawer.es.js";
+import { RecurringSettings as l } from "./shared/RecurringSettings.es.js";
+import { observer as m } from "mobx-react-lite";
+import { jsx as e } from "react/jsx-runtime";
+var u = m(({ isOpen: o, onClose: t, selectedTab: i }) => {
+  const { cashflow: r } = s();
+  return /* @__PURE__ */ e(a, {
+    ariaLabelClose: r.close_settings_aria,
+    isOpen: o,
+    onClose: t,
+    title: r.cashflow_settings,
+    children: /* @__PURE__ */ e(l, { defaultSelectedTab: i })
+  });
+});
+export {
+  u as RecurringSettingsDrawer
+};
+
+//# sourceMappingURL=RecurringSettingsDrawer.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecurringSettingsDrawer.es.js","names":[],"sources":["../../../src/recurringtransactions/components/RecurringSettingsDrawer.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport { Drawer, useGlobalCopyStore } from '../../common'\n\nimport { RecurringSettings } from './shared/RecurringSettings'\n\ninterface RecurringSettingsDrawerProps {\n  isOpen: boolean\n  onClose: () => void\n  selectedTab?: number\n}\n\nexport const RecurringSettingsDrawer = observer(\n  ({ isOpen, onClose, selectedTab }: RecurringSettingsDrawerProps) => {\n    const { cashflow: copy } = useGlobalCopyStore()\n\n    return (\n      <Drawer\n        ariaLabelClose={copy.close_settings_aria}\n        isOpen={isOpen}\n        onClose={onClose}\n        title={copy.cashflow_settings}\n      >\n        <RecurringSettings defaultSelectedTab={selectedTab} />\n      </Drawer>\n    )\n  },\n)\n"],"mappings":";;;;;AAYA,IAAa,IAA0B,EAAA,CACpC,EAAE,QAAA,GAAQ,SAAA,GAAS,aAAA,EAAA,MAAgD;AAClE,QAAM,EAAE,UAAU,EAAA,IAAS,EAAmB;AAE9C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAK;AAAA,IACb,QAAA;AAAA,IACC,SAAA;AAAA,IACT,OAAO,EAAK;AAAA,cAEZ,gBAAA,EAAC,GAAD,EAAmB,oBAAoB,EAAc,CAAA;AAAA,EAC/C,CAAA;AAEZ,CACF"}

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

@@ -0,0 +1,114 @@
+import v from "../../common/components/charts/StatusBar.es.js";
+import { useGlobalCopyStore as y } from "../../common/context/hooks.es.js";
+import { useScreenSize as w } from "../../common/hooks/useScreenSize.es.js";
+import { formatCurrency as i } from "../../core/utils/NumberFormatting.es.js";
+import x from "react";
+import { observer as C } from "mobx-react-lite";
+import l from "@mui/material/Stack";
+import { Text as o } from "@mxenabled/mxui";
+import { Fragment as S, jsx as r, jsxs as n } from "react/jsx-runtime";
+import { useTheme as $ } from "@mui/material/styles";
+import s from "@mui/material/Box";
+var I = C(({ expected: t, isExpense: h = !0, missed: e, paid: a, title: p, total: b, upcoming: f }) => {
+  const u = $(), { isSmallMobile: c } = w(), { recurring: m } = y(), g = x.useMemo(() => {
+    const d = [{
+      color: u.palette.success.main,
+      percentage: `${a / t}`
+    }];
+    return e && d.push({
+      color: u.palette.error.main,
+      percentage: `${e / t}`
+    }), d;
+  }, [
+    a,
+    t,
+    e
+  ]);
+  return /* @__PURE__ */ n(l, { children: [
+    /* @__PURE__ */ n(l, {
+      sx: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        pb: 12
+      },
+      children: [/* @__PURE__ */ r(o, {
+        bold: !0,
+        variant: "body1",
+        children: `${p} (${b})`
+      }), /* @__PURE__ */ r(o, {
+        bold: !0,
+        color: h ? "text.primary" : "success.main",
+        variant: "body1",
+        children: `${h ? "-" : "+"}${i(t, "0,0.00")}`
+      })]
+    }),
+    /* @__PURE__ */ r(v, {
+      data: g,
+      height: 12
+    }),
+    /* @__PURE__ */ n(l, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 2,
+        my: 8
+      },
+      children: [
+        /* @__PURE__ */ r(s, { sx: {
+          bgcolor: "success.main",
+          height: 8,
+          mr: 8,
+          width: 8
+        } }),
+        !c && /* @__PURE__ */ r(o, {
+          bold: !0,
+          variant: "body2",
+          children: i(a, "0,0.00")
+        }),
+        /* @__PURE__ */ r(o, {
+          variant: "caption",
+          children: m.paid?.toLowerCase()
+        }),
+        e !== void 0 && /* @__PURE__ */ n(S, { children: [
+          /* @__PURE__ */ r(s, { sx: {
+            bgcolor: "error.main",
+            height: 8,
+            ml: 16,
+            mr: 8,
+            width: 8
+          } }),
+          !c && /* @__PURE__ */ r(o, {
+            bold: !0,
+            variant: "body2",
+            children: i(e, "0,0.00")
+          }),
+          /* @__PURE__ */ r(o, {
+            variant: "caption",
+            children: m.missed?.toLowerCase()
+          })
+        ] }),
+        /* @__PURE__ */ r(s, { sx: {
+          bgcolor: "divider",
+          height: 8,
+          ml: 16,
+          mr: 8,
+          width: 8
+        } }),
+        !c && /* @__PURE__ */ r(o, {
+          bold: !0,
+          variant: "body2",
+          children: i(f, "0,0.00")
+        }),
+        /* @__PURE__ */ r(o, {
+          variant: "caption",
+          children: m.upcoming?.toLowerCase()
+        })
+      ]
+    })
+  ] });
+});
+export {
+  I as RecurringStatus
+};
+
+//# sourceMappingURL=RecurringStatus.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecurringStatus.es.js","names":[],"sources":["../../../src/recurringtransactions/components/RecurringStatus.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { StatusBar, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\ninterface RecurringStatusProps {\n  expected: number\n  isExpense?: boolean\n  missed?: number\n  paid: number\n  title: string\n  total: number\n  upcoming: number\n}\n\nexport const RecurringStatus = observer(\n  ({ expected, isExpense = true, missed, paid, title, total, upcoming }: RecurringStatusProps) => {\n    const theme = useTheme()\n    const { isSmallMobile } = useScreenSize()\n    const { recurring: recurringCopy } = useGlobalCopyStore()\n\n    const data = React.useMemo(() => {\n      const recurrence = [{ color: theme.palette.success.main, percentage: `${paid / expected}` }]\n      if (missed) {\n        recurrence.push({ color: theme.palette.error.main, percentage: `${missed / expected}` })\n      }\n      return recurrence\n    }, [paid, expected, missed])\n\n    return (\n      <Stack>\n        <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', pb: 12 }}>\n          <Text bold={true} variant=\"body1\">\n            {`${title} (${total})`}\n          </Text>\n          <Text bold={true} color={isExpense ? 'text.primary' : 'success.main'} variant=\"body1\">\n            {`${isExpense ? '-' : '+'}${formatCurrency(expected, '0,0.00')}`}\n          </Text>\n        </Stack>\n\n        <StatusBar data={data} height={12} />\n\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 2, my: 8 }}>\n          <Box sx={{ bgcolor: 'success.main', height: 8, mr: 8, width: 8 }} />\n          {!isSmallMobile && (\n            <Text bold={true} variant=\"body2\">\n              {formatCurrency(paid, '0,0.00')}\n            </Text>\n          )}\n          <Text variant=\"caption\">{recurringCopy.paid?.toLowerCase()}</Text>\n\n          {missed !== undefined && (\n            <>\n              <Box sx={{ bgcolor: 'error.main', height: 8, ml: 16, mr: 8, width: 8 }} />\n              {!isSmallMobile && (\n                <Text bold={true} variant=\"body2\">\n                  {formatCurrency(missed, '0,0.00')}\n                </Text>\n              )}\n              <Text variant=\"caption\">{recurringCopy.missed?.toLowerCase()}</Text>\n            </>\n          )}\n\n          <Box sx={{ bgcolor: 'divider', height: 8, ml: 16, mr: 8, width: 8 }} />\n          {!isSmallMobile && (\n            <Text bold={true} variant=\"body2\">\n              {formatCurrency(upcoming, '0,0.00')}\n            </Text>\n          )}\n          <Text variant=\"caption\">{recurringCopy.upcoming?.toLowerCase()}</Text>\n        </Stack>\n      </Stack>\n    )\n  },\n)\n"],"mappings":"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"}

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

@@ -0,0 +1,181 @@
+import { useAccountStore as et, useEvent as ot, useGlobalCopyStore as nt, useGlobalUiStore as at, useRecurringTransactionsStore as it, useTransactionStore as st } from "../../common/context/hooks.es.js";
+import rt from "../../common/components/dialog/Dialog.es.js";
+import ct from "../../common/components/drawer/Drawer.es.js";
+import { ANALYTICS_EVENTS as h } from "../../common/constants/Analytics.es.js";
+import { RecurrenceStatus as lt, RepeatingType as mt } from "../../core/types/RepeatingTransaction.es.js";
+import { formatCurrency as dt } from "../../core/utils/NumberFormatting.es.js";
+import { getNextUpcomingDate as ut } from "../../core/utils/RecurringTransactionsUtil.es.js";
+import T from "../../common/components/DataRow.es.js";
+import { useAccountUiStore as pt } from "../../accounts/hooks/useUiStore.es.js";
+import ft from "../../transactions/components/shared/TransactionDetails.es.js";
+import _t from "../../accounts/components/detailsdrawer/Accounts/AccountDetailsDrawer.es.js";
+import { LinkTransactionDrawer as ht } from "./actions/LinkTransactionDrawer.es.js";
+import { MarkAsPaidDialog as At } from "./actions/MarkAsPaidDialog.es.js";
+import { MarkAsUnpaidDialog as kt } from "./actions/MarkAsUnpaidDialog.es.js";
+import { PaymentScheduleAction as Ct } from "./actions/PaymentScheduleAction.es.js";
+import { RecurringTransactionList as St } from "./RecurringTransactionList.es.js";
+import { UpcomingRecurrenceCard as gt } from "./UpcomingRecurrenceCard.es.js";
+import a from "react";
+import { observer as Dt } from "mobx-react-lite";
+import b from "@mui/material/Stack";
+import { MerchantLogo as yt, P as Rt, Text as w } from "@mxenabled/mxui";
+import { endOfMonth as Tt } from "date-fns/endOfMonth";
+import { startOfToday as x } from "date-fns/startOfToday";
+import bt from "@mui/material/Button";
+import { Delete as wt } from "@mxenabled/mx-icons";
+import { Fragment as I, jsx as t, jsxs as c } from "react/jsx-runtime";
+import { subDays as xt } from "date-fns/subDays";
+import A from "@mui/material/Divider";
+import It from "@mui/material/List";
+var ie = Dt(({ onDeleted: M, recurringTransaction: e, selectedRecurrence: i }) => {
+  const { recurring: n } = nt(), { selectedAccountGuids: U } = at(), { onEvent: l } = ot(), { deleteRepeatingTransaction: L, markRecurrenceAsUnpaid: N, recurrences: v } = it(), { detailedTransactions: k, setFilter: E, transactions: m } = st(), { setSelectedAccount: G, setSelectedMember: O } = pt(), { members: P } = et(), { amount: K, description: B, merchant_guid: j } = e, [z, C] = a.useState(!1), [F, S] = a.useState(!1), [V, d] = a.useState(!1), [Y, u] = a.useState(!1), [$, p] = a.useState(""), [q, g] = a.useState(!1), [f, D] = a.useState("");
+  a.useEffect(() => {
+    E({
+      accounts: U,
+      dateRange: {
+        start: xt(x(), 90),
+        end: Tt(x())
+      },
+      custom: (o) => o.repeating_transaction_guid === e.guid
+    });
+  }, [e.guid]);
+  const s = a.useMemo(() => k.find((o) => o.guid === f), [f, k]), r = e.repeating_transaction_type === mt.Income, H = a.useMemo(() => m.filter((o) => o.repeating_transaction_guid === e.guid), [m, e.guid]), J = ut(e, v), Q = () => {
+    if (e.account) {
+      G(e.account);
+      const o = P.find((_) => _.guid === e.account?.member_guid) || {};
+      o && O(o), C(!0);
+    }
+  }, W = async () => {
+    await L(e.guid), M();
+  }, X = () => {
+    S(!0), l(h.RECURRING_TRANSACTIONS_DETAILS_CLICK_DELETE);
+  }, y = () => {
+    d(!0), l(h.RECURRING_TRANSACTIONS_LIST_CLICK_MARK_AS_PAID);
+  }, Z = () => {
+    d(!1), g(!0);
+  }, R = (o) => {
+    p(o), u(!0), l(h.RECURRING_TRANSACTIONS_LIST_CLICK_MARK_AS_UNPAID);
+  }, tt = async () => {
+    const o = m.find((_) => _.guid === $);
+    o && await N(o), u(!1), p("");
+  };
+  return /* @__PURE__ */ c(b, {
+    bgcolor: "background.default",
+    direction: "column",
+    height: "100%",
+    children: [
+      /* @__PURE__ */ c(b, {
+        direction: "column",
+        m: 24,
+        children: [
+          /* @__PURE__ */ t(yt, {
+            categoryGuid: s?.category_guid || "",
+            merchantGuid: j,
+            size: 64,
+            sx: { mb: 12 }
+          }),
+          /* @__PURE__ */ t(w, {
+            bold: !0,
+            variant: "body1",
+            children: B
+          }),
+          /* @__PURE__ */ c(Rt, {
+            color: r ? "success.main" : "text.primary",
+            sx: {
+              mt: 4,
+              mb: 16
+            },
+            variant: "h1",
+            children: [r ? "+" : "", dt(K, "0,0.00")]
+          }),
+          /* @__PURE__ */ t(gt, {
+            expectedDate: i?.occurredOnDate || i?.expectedDate || J,
+            onMarkAsPaidClick: i?.status === lt.Paid && i.transaction?.guid ? () => R(i.transaction.guid) : y,
+            status: i?.status
+          })
+        ]
+      }),
+      /* @__PURE__ */ c(It, {
+        sx: { bgcolor: "background.paper" },
+        children: [
+          e.account && /* @__PURE__ */ c(I, { children: [/* @__PURE__ */ t(T, {
+            iconName: "checkbook",
+            label: n.account,
+            onClick: Q,
+            showChevron: !1,
+            value: e.account.displayName || ""
+          }), /* @__PURE__ */ t(A, { variant: "inset" })] }),
+          s?.category && /* @__PURE__ */ c(I, { children: [/* @__PURE__ */ t(T, {
+            iconName: "monetization_on",
+            label: n.category,
+            value: s.category
+          }), /* @__PURE__ */ t(A, { variant: "inset" })] }),
+          /* @__PURE__ */ t(Ct, { repeatingTransaction: e }),
+          /* @__PURE__ */ t(A, {})
+        ]
+      }),
+      /* @__PURE__ */ t(bt, {
+        color: "error",
+        onClick: X,
+        startIcon: /* @__PURE__ */ t(wt, {}),
+        sx: {
+          mx: 24,
+          my: 16
+        },
+        variant: "text",
+        children: r ? n.delete_income_title : n.delete_expense_title
+      }),
+      /* @__PURE__ */ t(St, {
+        isIncome: r,
+        onMarkAsPaidClick: y,
+        onMarkAsUnpaidClick: R,
+        onTransactionClick: D,
+        recurringTransaction: e,
+        transactions: H
+      }),
+      /* @__PURE__ */ t(ct, {
+        ariaLabelClose: n.close_drawer_aria,
+        isOpen: !!f && !!s,
+        onClose: () => D(""),
+        title: n.transaction_details_drawer_title,
+        children: s && /* @__PURE__ */ t(ft, { transaction: s })
+      }),
+      /* @__PURE__ */ t(rt, {
+        copy: {
+          title: r ? n.delete_income_title : n.delete_expense_title,
+          close_aria: n.close_drawer_aria
+        },
+        isOpen: F,
+        onClose: () => S(!1),
+        onPrimaryAction: W,
+        children: /* @__PURE__ */ t(w, { children: r ? n.delete_income_description : n.delete_expense_description })
+      }),
+      /* @__PURE__ */ t(At, {
+        isOpen: V,
+        onClose: () => d(!1),
+        onLinkTransaction: Z
+      }),
+      /* @__PURE__ */ t(kt, {
+        isOpen: Y,
+        onClose: () => {
+          u(!1), p("");
+        },
+        onUnlinkTransaction: tt
+      }),
+      /* @__PURE__ */ t(ht, {
+        isOpen: q,
+        onClose: () => g(!1),
+        recurringTransaction: e
+      }),
+      /* @__PURE__ */ t(_t, {
+        isOpen: z,
+        onClose: () => C(!1)
+      })
+    ]
+  });
+});
+export {
+  ie as RecurringTransactionDetails
+};
+
+//# sourceMappingURL=RecurringTransactionDetails.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecurringTransactionDetails.es.js","names":[],"sources":["../../../src/recurringtransactions/components/RecurringTransactionDetails.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { subDays } from 'date-fns/subDays'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { endOfMonth } from 'date-fns/endOfMonth'\n\nimport Button from '@mui/material/Button'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\n\nimport { Delete } from '@mxenabled/mx-icons'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\n\nimport {\n  ANALYTICS_EVENTS,\n  DataRow,\n  Dialog,\n  Drawer,\n  useAccountStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useTransactionStore,\n} from '../../common'\nimport {\n  type Member,\n  type Recurrence,\n  type RepeatingTransaction,\n  type Transaction,\n  RecurrenceStatus,\n  RepeatingType,\n} from '../../core'\n\nimport { TransactionDetails } from '../../transactions'\nimport { AccountDetailsDrawer, useAccountUiStore } from '../../accounts'\n\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\nimport { getNextUpcomingDate } from '../../core/utils/RecurringTransactionsUtil'\nimport { LinkTransactionDrawer } from './actions/LinkTransactionDrawer'\nimport { MarkAsPaidDialog } from './actions/MarkAsPaidDialog'\nimport { MarkAsUnpaidDialog } from './actions/MarkAsUnpaidDialog'\nimport { PaymentScheduleAction } from './actions/PaymentScheduleAction'\nimport { RecurringTransactionList } from './RecurringTransactionList'\nimport { UpcomingRecurrenceCard } from './UpcomingRecurrenceCard'\n\ninterface RecurringTransactionDetailsProps {\n  onDeleted: () => void\n  recurringTransaction: RepeatingTransaction\n  selectedRecurrence: Recurrence | null\n}\n\nexport const RecurringTransactionDetails = observer(\n  ({ onDeleted, recurringTransaction, selectedRecurrence }: RecurringTransactionDetailsProps) => {\n    const { recurring: copy } = useGlobalCopyStore()\n    const { selectedAccountGuids } = useGlobalUiStore()\n    const { onEvent } = useEvent()\n    const { deleteRepeatingTransaction, markRecurrenceAsUnpaid, recurrences } =\n      useRecurringTransactionsStore()\n    const { detailedTransactions, setFilter, transactions } = useTransactionStore()\n    const { setSelectedAccount, setSelectedMember } = useAccountUiStore()\n    const { members } = useAccountStore()\n    const { amount, description, merchant_guid } = recurringTransaction\n\n    const [showAccountDetails, setShowAccountDetails] = React.useState(false)\n    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false)\n    const [showMarkAsPaid, setShowMarkAsPaid] = React.useState(false)\n    const [showMarkAsUnpaid, setShowMarkAsUnpaid] = React.useState(false)\n    const [unlinkTransactionGuid, setUnlinkTransactionGuid] = React.useState('')\n    const [showLinkTransaction, setShowLinkTransaction] = React.useState(false)\n    const [transactionGuid, setTransactionGuid] = React.useState('')\n\n    React.useEffect(() => {\n      setFilter({\n        accounts: selectedAccountGuids,\n        dateRange: { start: subDays(startOfToday(), 90), end: endOfMonth(startOfToday()) },\n        custom: (t: Transaction) => t.repeating_transaction_guid === recurringTransaction.guid,\n      })\n    }, [recurringTransaction.guid])\n\n    const transaction = React.useMemo(\n      () => detailedTransactions.find((t) => t.guid === transactionGuid),\n      [transactionGuid, detailedTransactions],\n    )\n\n    const isIncome = recurringTransaction.repeating_transaction_type === RepeatingType.Income\n\n    const filteredTransactions = React.useMemo(\n      () => transactions.filter((t) => t.repeating_transaction_guid === recurringTransaction.guid),\n      [transactions, recurringTransaction.guid],\n    )\n\n    const nextUpcomingDate = getNextUpcomingDate(recurringTransaction, recurrences)\n\n    const handleAccountClick = () => {\n      if (recurringTransaction.account) {\n        setSelectedAccount(recurringTransaction.account)\n        const member =\n          members.find((m: Member) => m.guid === recurringTransaction.account?.member_guid) ||\n          ({} as Member)\n        if (member) {\n          setSelectedMember(member)\n        }\n        setShowAccountDetails(true)\n      }\n    }\n\n    const handleDeleteRecurringTransaction = async () => {\n      await deleteRepeatingTransaction(recurringTransaction.guid)\n      onDeleted()\n    }\n\n    const handleDeleteButtonClick = () => {\n      setShowDeleteConfirm(true)\n\n      onEvent(ANALYTICS_EVENTS.RECURRING_TRANSACTIONS_DETAILS_CLICK_DELETE)\n    }\n\n    const handleMarkAsPaidClick = () => {\n      setShowMarkAsPaid(true)\n      onEvent(ANALYTICS_EVENTS.RECURRING_TRANSACTIONS_LIST_CLICK_MARK_AS_PAID)\n    }\n\n    const handleLinkTransaction = () => {\n      setShowMarkAsPaid(false)\n      setShowLinkTransaction(true)\n    }\n\n    const handleMarkAsUnpaidClick = (transactionGuid: string) => {\n      setUnlinkTransactionGuid(transactionGuid)\n      setShowMarkAsUnpaid(true)\n      onEvent(ANALYTICS_EVENTS.RECURRING_TRANSACTIONS_LIST_CLICK_MARK_AS_UNPAID)\n    }\n\n    const handleUnlinkTransaction = async () => {\n      const txn = transactions.find((t) => t.guid === unlinkTransactionGuid)\n      if (txn) await markRecurrenceAsUnpaid(txn)\n\n      setShowMarkAsUnpaid(false)\n      setUnlinkTransactionGuid('')\n    }\n\n    return (\n      <Stack bgcolor=\"background.default\" direction=\"column\" height=\"100%\">\n        <Stack direction=\"column\" m={24}>\n          <MerchantLogo\n            categoryGuid={transaction?.category_guid || ''}\n            merchantGuid={merchant_guid}\n            size={64}\n            sx={{ mb: 12 }}\n          />\n          <Text bold={true} variant=\"body1\">\n            {description}\n          </Text>\n          <P color={isIncome ? 'success.main' : 'text.primary'} sx={{ mt: 4, mb: 16 }} variant=\"h1\">\n            {isIncome ? '+' : ''}\n            {formatCurrency(amount, '0,0.00')}\n          </P>\n          <UpcomingRecurrenceCard\n            expectedDate={\n              selectedRecurrence?.occurredOnDate ||\n              selectedRecurrence?.expectedDate ||\n              nextUpcomingDate\n            }\n            onMarkAsPaidClick={\n              selectedRecurrence?.status === RecurrenceStatus.Paid &&\n              selectedRecurrence.transaction?.guid\n                ? () => handleMarkAsUnpaidClick(selectedRecurrence.transaction!.guid)\n                : handleMarkAsPaidClick\n            }\n            status={selectedRecurrence?.status}\n          />\n        </Stack>\n        <List sx={{ bgcolor: 'background.paper' }}>\n          {recurringTransaction.account && (\n            <>\n              <DataRow\n                iconName=\"checkbook\"\n                label={copy.account}\n                onClick={handleAccountClick}\n                showChevron={false}\n                value={recurringTransaction.account.displayName || ''}\n              />\n              <Divider variant=\"inset\" />\n            </>\n          )}\n\n          {transaction?.category && (\n            <>\n              <DataRow\n                iconName=\"monetization_on\"\n                label={copy.category}\n                value={transaction.category}\n              />\n              <Divider variant=\"inset\" />\n            </>\n          )}\n\n          <PaymentScheduleAction repeatingTransaction={recurringTransaction} />\n          <Divider />\n        </List>\n\n        <Button\n          color=\"error\"\n          onClick={handleDeleteButtonClick}\n          startIcon={<Delete />}\n          sx={{ mx: 24, my: 16 }}\n          variant=\"text\"\n        >\n          {isIncome ? copy.delete_income_title : copy.delete_expense_title}\n        </Button>\n\n        <RecurringTransactionList\n          isIncome={isIncome}\n          onMarkAsPaidClick={handleMarkAsPaidClick}\n          onMarkAsUnpaidClick={handleMarkAsUnpaidClick}\n          onTransactionClick={setTransactionGuid}\n          recurringTransaction={recurringTransaction}\n          transactions={filteredTransactions}\n        />\n\n        <Drawer\n          ariaLabelClose={copy.close_drawer_aria}\n          isOpen={!!transactionGuid && Boolean(transaction)}\n          onClose={() => setTransactionGuid('')}\n          title={copy.transaction_details_drawer_title}\n        >\n          {transaction && <TransactionDetails transaction={transaction} />}\n        </Drawer>\n\n        <Dialog\n          copy={{\n            title: isIncome ? copy.delete_income_title : copy.delete_expense_title,\n            close_aria: copy.close_drawer_aria,\n          }}\n          isOpen={showDeleteConfirm}\n          onClose={() => setShowDeleteConfirm(false)}\n          onPrimaryAction={handleDeleteRecurringTransaction}\n        >\n          <Text>{isIncome ? copy.delete_income_description : copy.delete_expense_description}</Text>\n        </Dialog>\n\n        <MarkAsPaidDialog\n          isOpen={showMarkAsPaid}\n          onClose={() => setShowMarkAsPaid(false)}\n          onLinkTransaction={handleLinkTransaction}\n        />\n\n        <MarkAsUnpaidDialog\n          isOpen={showMarkAsUnpaid}\n          onClose={() => {\n            setShowMarkAsUnpaid(false)\n            setUnlinkTransactionGuid('')\n          }}\n          onUnlinkTransaction={handleUnlinkTransaction}\n        />\n\n        <LinkTransactionDrawer\n          isOpen={showLinkTransaction}\n          onClose={() => setShowLinkTransaction(false)}\n          recurringTransaction={recurringTransaction}\n        />\n\n        <AccountDetailsDrawer\n          isOpen={showAccountDetails}\n          onClose={() => setShowAccountDetails(false)}\n        />\n      </Stack>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,IAAa,KAA8B,GAAA,CACxC,EAAE,WAAA,GAAW,sBAAA,GAAsB,oBAAA,EAAA,MAA2D;AAC7F,QAAM,EAAE,WAAW,EAAA,IAAS,GAAmB,GACzC,EAAE,sBAAA,EAAA,IAAyB,GAAiB,GAC5C,EAAE,SAAA,EAAA,IAAY,GAAS,GACvB,EAAE,4BAAA,GAA4B,wBAAA,GAAwB,aAAA,EAAA,IAC1D,GAA8B,GAC1B,EAAE,sBAAA,GAAsB,WAAA,GAAW,cAAA,EAAA,IAAiB,GAAoB,GACxE,EAAE,oBAAA,GAAoB,mBAAA,EAAA,IAAsB,GAAkB,GAC9D,EAAE,SAAA,EAAA,IAAY,GAAgB,GAC9B,EAAE,QAAA,GAAQ,aAAA,GAAa,eAAA,EAAA,IAAkB,GAEzC,CAAC,GAAoB,CAAA,IAAyB,EAAM,SAAS,EAAK,GAClE,CAAC,GAAmB,CAAA,IAAwB,EAAM,SAAS,EAAK,GAChE,CAAC,GAAgB,CAAA,IAAqB,EAAM,SAAS,EAAK,GAC1D,CAAC,GAAkB,CAAA,IAAuB,EAAM,SAAS,EAAK,GAC9D,CAAC,GAAuB,CAAA,IAA4B,EAAM,SAAS,EAAE,GACrE,CAAC,GAAqB,CAAA,IAA0B,EAAM,SAAS,EAAK,GACpE,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,EAAE;AAE/D,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAU;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,QAAE,OAAO,GAAQ,EAAa,GAAG,EAAE;AAAA,QAAG,KAAK,GAAW,EAAa,CAAC;AAAA,MAAE;AAAA,MACjF,QAAA,CAAS,MAAmB,EAAE,+BAA+B,EAAqB;AAAA,IACpF,CAAC;AAAA,EACH,GAAG,CAAC,EAAqB,IAAI,CAAC;AAE9B,QAAM,IAAc,EAAM,QAAA,MAClB,EAAqB,KAAA,CAAM,MAAM,EAAE,SAAS,CAAe,GACjE,CAAC,GAAiB,CAAoB,CACxC,GAEM,IAAW,EAAqB,+BAA+B,GAAc,QAE7E,IAAuB,EAAM,QAAA,MAC3B,EAAa,OAAA,CAAQ,MAAM,EAAE,+BAA+B,EAAqB,IAAI,GAC3F,CAAC,GAAc,EAAqB,IAAI,CAC1C,GAEM,IAAmB,GAAoB,GAAsB,CAAW,GAExE,IAAA,MAA2B;AAC/B,QAAI,EAAqB,SAAS;AAChC,MAAA,EAAmB,EAAqB,OAAO;AAC/C,YAAM,IACJ,EAAQ,KAAA,CAAM,MAAc,EAAE,SAAS,EAAqB,SAAS,WAAW,KAC/E,CAAC;AACJ,MAAI,KACF,EAAkB,CAAM,GAE1B,EAAsB,EAAI;AAAA,IAC5B;AAAA,EACF,GAEM,IAAmC,YAAY;AACnD,UAAM,EAA2B,EAAqB,IAAI,GAC1D,EAAU;AAAA,EACZ,GAEM,IAAA,MAAgC;AACpC,IAAA,EAAqB,EAAI,GAEzB,EAAQ,EAAiB,2CAA2C;AAAA,EACtE,GAEM,IAAA,MAA8B;AAClC,IAAA,EAAkB,EAAI,GACtB,EAAQ,EAAiB,8CAA8C;AAAA,EACzE,GAEM,IAAA,MAA8B;AAClC,IAAA,EAAkB,EAAK,GACvB,EAAuB,EAAI;AAAA,EAC7B,GAEM,IAAA,CAA2B,MAA4B;AAC3D,IAAA,EAAyB,CAAe,GACxC,EAAoB,EAAI,GACxB,EAAQ,EAAiB,gDAAgD;AAAA,EAC3E,GAEM,KAA0B,YAAY;AAC1C,UAAM,IAAM,EAAa,KAAA,CAAM,MAAM,EAAE,SAAS,CAAqB;AACrE,IAAI,KAAK,MAAM,EAAuB,CAAG,GAEzC,EAAoB,EAAK,GACzB,EAAyB,EAAE;AAAA,EAC7B;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,SAAQ;AAAA,IAAqB,WAAU;AAAA,IAAS,QAAO;AAAA,cAA9D;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAS,GAAG;AAAA,kBAA7B;AAAA,UACE,gBAAA,EAAC,IAAD;AAAA,YACE,cAAc,GAAa,iBAAiB;AAAA,YAC5C,cAAc;AAAA,YACd,MAAM;AAAA,YACN,IAAI,EAAE,IAAI,GAAG;AAAA,UACd,CAAA;AAAA,UACD,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,SAAQ;AAAA,sBACvB;AAAA,UACG,CAAA;AAAA,UACN,gBAAA,EAAC,IAAD;AAAA,YAAG,OAAO,IAAW,iBAAiB;AAAA,YAAgB,IAAI;AAAA,cAAE,IAAI;AAAA,cAAG,IAAI;AAAA,YAAG;AAAA,YAAG,SAAQ;AAAA,sBAArF,CACG,IAAW,MAAM,IACjB,GAAe,GAAQ,QAAQ,CAC/B;AAAA;UACH,gBAAA,EAAC,IAAD;AAAA,YACE,cACE,GAAoB,kBACpB,GAAoB,gBACpB;AAAA,YAEF,mBACE,GAAoB,WAAW,GAAiB,QAChD,EAAmB,aAAa,OAAA,MACtB,EAAwB,EAAmB,YAAa,IAAI,IAClE;AAAA,YAEN,QAAQ,GAAoB;AAAA,UAC7B,CAAA;AAAA,QACI;AAAA;MACP,gBAAA,EAAC,IAAD;AAAA,QAAM,IAAI,EAAE,SAAS,mBAAmB;AAAA,kBAAxC;AAAA,UACG,EAAqB,WACpB,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YACE,UAAS;AAAA,YACT,OAAO,EAAK;AAAA,YACZ,SAAS;AAAA,YACT,aAAa;AAAA,YACb,OAAO,EAAqB,QAAQ,eAAe;AAAA,UACpD,CAAA,GACD,gBAAA,EAAC,GAAD,EAAS,SAAQ,QAAS,CAAA,CAC1B,EAAA,CAAA;AAAA,UAGH,GAAa,YACZ,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YACE,UAAS;AAAA,YACT,OAAO,EAAK;AAAA,YACZ,OAAO,EAAY;AAAA,UACpB,CAAA,GACD,gBAAA,EAAC,GAAD,EAAS,SAAQ,QAAS,CAAA,CAC1B,EAAA,CAAA;AAAA,UAGJ,gBAAA,EAAC,IAAD,EAAuB,sBAAsB,EAAuB,CAAA;AAAA,UACpE,gBAAA,EAAC,GAAD,CAAU,CAAA;AAAA,QACN;AAAA;MAEN,gBAAA,EAAC,IAAD;AAAA,QACE,OAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW,gBAAA,EAAC,IAAD,CAAS,CAAA;AAAA,QACpB,IAAI;AAAA,UAAE,IAAI;AAAA,UAAI,IAAI;AAAA,QAAG;AAAA,QACrB,SAAQ;AAAA,kBAEP,IAAW,EAAK,sBAAsB,EAAK;AAAA,MACtC,CAAA;AAAA,MAER,gBAAA,EAAC,IAAD;AAAA,QACY,UAAA;AAAA,QACV,mBAAmB;AAAA,QACnB,qBAAqB;AAAA,QACrB,oBAAoB;AAAA,QACE,sBAAA;AAAA,QACtB,cAAc;AAAA,MACf,CAAA;AAAA,MAED,gBAAA,EAAC,IAAD;AAAA,QACE,gBAAgB,EAAK;AAAA,QACrB,QAAQ,CAAC,CAAC,KAAmB,EAAQ;AAAA,QACrC,SAAA,MAAe,EAAmB,EAAE;AAAA,QACpC,OAAO,EAAK;AAAA,kBAEX,KAAe,gBAAA,EAAC,IAAD,EAAiC,aAAA,EAAc,CAAA;AAAA,MACzD,CAAA;AAAA,MAER,gBAAA,EAAC,IAAD;AAAA,QACE,MAAM;AAAA,UACJ,OAAO,IAAW,EAAK,sBAAsB,EAAK;AAAA,UAClD,YAAY,EAAK;AAAA,QACnB;AAAA,QACA,QAAQ;AAAA,QACR,SAAA,MAAe,EAAqB,EAAK;AAAA,QACzC,iBAAiB;AAAA,kBAEjB,gBAAA,EAAC,GAAD,EAAA,UAAO,IAAW,EAAK,4BAA4B,EAAK,2BAAiC,CAAA;AAAA,MACnF,CAAA;AAAA,MAER,gBAAA,EAAC,IAAD;AAAA,QACE,QAAQ;AAAA,QACR,SAAA,MAAe,EAAkB,EAAK;AAAA,QACtC,mBAAmB;AAAA,MACpB,CAAA;AAAA,MAED,gBAAA,EAAC,IAAD;AAAA,QACE,QAAQ;AAAA,QACR,SAAA,MAAe;AACb,UAAA,EAAoB,EAAK,GACzB,EAAyB,EAAE;AAAA,QAC7B;AAAA,QACA,qBAAqB;AAAA,MACtB,CAAA;AAAA,MAED,gBAAA,EAAC,IAAD;AAAA,QACE,QAAQ;AAAA,QACR,SAAA,MAAe,EAAuB,EAAK;AAAA,QACrB,sBAAA;AAAA,MACvB,CAAA;AAAA,MAED,gBAAA,EAAC,IAAD;AAAA,QACE,QAAQ;AAAA,QACR,SAAA,MAAe,EAAsB,EAAK;AAAA,MAC3C,CAAA;AAAA,IACI;AAAA;AAEX,CACF"}

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

@@ -0,0 +1,27 @@
+import { useGlobalCopyStore as s, useRecurringTransactionsStore as c } from "../../common/context/hooks.es.js";
+import l from "../../common/components/drawer/Drawer.es.js";
+import { RepeatingType as p } from "../../core/types/RepeatingTransaction.es.js";
+import { RecurringTransactionDetails as m } from "./RecurringTransactionDetails.es.js";
+import { observer as u } from "mobx-react-lite";
+import { jsx as t } from "react/jsx-runtime";
+var D = u(() => {
+  const { recurring: r } = s(), { selectedRecurrence: o, selectedRepeatingTransaction: e, setSelectedRecurrence: a, setSelectedRepeatingTransactionGuid: i } = c(), n = () => {
+    i(null), a(null);
+  };
+  return /* @__PURE__ */ t(l, {
+    ariaLabelClose: r.close_drawer_aria,
+    isOpen: !!e,
+    onClose: n,
+    title: e?.repeating_transaction_type === p.Income ? r.income_details : r.expense_details,
+    children: e && /* @__PURE__ */ t(m, {
+      onDeleted: n,
+      recurringTransaction: e,
+      selectedRecurrence: o
+    })
+  });
+});
+export {
+  D as RecurringTransactionDetailsDrawer
+};
+
+//# sourceMappingURL=RecurringTransactionDetailsDrawer.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecurringTransactionDetailsDrawer.es.js","names":[],"sources":["../../../src/recurringtransactions/components/RecurringTransactionDetailsDrawer.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport { Drawer, useGlobalCopyStore, useRecurringTransactionsStore } from '../../common'\nimport { RepeatingType } from '../../core'\n\nimport { RecurringTransactionDetails } from './RecurringTransactionDetails'\n\nexport const RecurringTransactionDetailsDrawer = observer(() => {\n  const { recurring: copy } = useGlobalCopyStore()\n  const {\n    selectedRecurrence,\n    selectedRepeatingTransaction,\n    setSelectedRecurrence,\n    setSelectedRepeatingTransactionGuid,\n  } = useRecurringTransactionsStore()\n\n  const handleClose = () => {\n    setSelectedRepeatingTransactionGuid(null)\n    setSelectedRecurrence(null)\n  }\n\n  return (\n    <Drawer\n      ariaLabelClose={copy.close_drawer_aria}\n      isOpen={!!selectedRepeatingTransaction}\n      onClose={handleClose}\n      title={\n        selectedRepeatingTransaction?.repeating_transaction_type === RepeatingType.Income\n          ? copy.income_details\n          : copy.expense_details\n      }\n    >\n      {selectedRepeatingTransaction && (\n        <RecurringTransactionDetails\n          onDeleted={handleClose}\n          recurringTransaction={selectedRepeatingTransaction}\n          selectedRecurrence={selectedRecurrence}\n        />\n      )}\n    </Drawer>\n  )\n})\n"],"mappings":";;;;;;AAOA,IAAa,IAAoC,EAAA,MAAe;AAC9D,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GACzC,EACJ,oBAAA,GACA,8BAAA,GACA,uBAAA,GACA,qCAAA,EAAA,IACE,EAA8B,GAE5B,IAAA,MAAoB;AACxB,IAAA,EAAoC,IAAI,GACxC,EAAsB,IAAI;AAAA,EAC5B;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAK;AAAA,IACrB,QAAQ,CAAC,CAAC;AAAA,IACV,SAAS;AAAA,IACT,OACE,GAA8B,+BAA+B,EAAc,SACvE,EAAK,iBACL,EAAK;AAAA,cAGV,KACC,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW;AAAA,MACX,sBAAsB;AAAA,MACF,oBAAA;AAAA,IACrB,CAAA;AAAA,EAEG,CAAA;AAEZ,CAAC"}