@mx-cartographer/experiences 7.11.20 → 7.11.21

package/dist/TransactionDetails-CgC3Qu7o.mjs

@@ -0,0 +1,1474 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import d from "react";
+import { observer as E } from "mobx-react-lite";
+import K from "@mui/material/Box";
+import de from "@mui/material/Divider";
+import ue from "@mui/material/List";
+import le from "@mui/material/Paper";
+import v from "@mui/material/Stack";
+import { useTheme as j } from "@mui/material/styles";
+import { P as Y, Text as x, H2 as Be, MerchantLogo as Ae, Toast as $e, CategoryIcon as Ne, CategoryIconVariants as De, TextField as Ie, Icon as ce, IconWeight as be } from "@mxenabled/mxui";
+import { g as Ke, C as Fe, a as He, b as Ue, i as Ve } from "./BudgetUtil--_QXyszn.mjs";
+import oe from "@mui/material/Button";
+import ze from "@mui/material/FormGroup";
+import ne from "@mui/material/IconButton";
+import Oe from "@mui/material/TextField";
+import { u as pe } from "./useAriaLive-MkYebyUR.mjs";
+import { O as y } from "./Transaction-B_2AG36b.mjs";
+import { u as I, h as O, m as We, d as Ye, l as Le, g as w, b as Xe, o as je } from "./hooks-BxkfR-Ff.mjs";
+import { A as F } from "./Analytics-i5h6BxR1.mjs";
+import qe from "@mui/material/ToggleButton";
+import we from "@mui/material/styles/useTheme";
+import { ChevronRight as Re, Icon as D, Delete as _e, Cancel as me, Search as Je, Edit as Qe, Flag as Ze } from "@mxenabled/mx-icons";
+import { fromUnixTime as Se } from "date-fns/fromUnixTime";
+import H from "@mui/material/Avatar";
+import G from "@mui/material/ListItem";
+import U from "@mui/material/ListItemAvatar";
+import B from "@mui/material/ListItemText";
+import { f as Me, D as ke } from "./DateFormats-BMpMrZpW.mjs";
+import V from "@mui/material/ListItemButton";
+import z from "@mui/material/ListItemIcon";
+import { a as Pe } from "./CategorySelectorDrawer-5n6Pil_E.mjs";
+import { b as et, T as tt, u as J } from "./StatusIndicator-wyBzyHJc.mjs";
+import { D as q } from "./Dialog-DdCwLgrl.mjs";
+import { b as N } from "./Localization-CPkpIwIx.mjs";
+import { getUnixTime as rt } from "date-fns/getUnixTime";
+import { D as ie } from "./Drawer-DV4NTsFg.mjs";
+import { f as X } from "./NumberFormatting-QCaNwbjv.mjs";
+import Ee from "@mui/material/InputAdornment";
+import at from "@mui/material/Checkbox";
+import { startOfMonth as nt } from "date-fns/startOfMonth";
+import { endOfMonth as ot } from "date-fns/endOfMonth";
+import { i as it } from "./DateUtil-wcYTmDRD.mjs";
+import xe from "@mui/material/Grid";
+import { C as st } from "./CurrencyInput-DuMktPu3.mjs";
+import lt from "@mui/material/Switch";
+import { L as ct } from "./Loader-D3rjKx72.mjs";
+var re = /* @__PURE__ */ ((t) => (t[t.Category = 0] = "Category", t[t.Date = 1] = "Date", t[t.Memo = 2] = "Memo", t[t.Tags = 3] = "Tags", t))(re || {}), ae = /* @__PURE__ */ ((t) => (t[t.MerchantBudget = 0] = "MerchantBudget", t[t.SplitTransaction = 1] = "SplitTransaction", t[t.HideTransaction = 2] = "HideTransaction", t[t.MerchantLogo = 3] = "MerchantLogo", t))(ae || {});
+const dt = [
+  0,
+  1,
+  2,
+  3
+  /* Tags */
+], ut = [
+  1,
+  2,
+  3
+  /* MerchantLogo */
+], _t = ({
+  startDate: t,
+  onViewHistory: n,
+  totalTransaction: i,
+  amount: r,
+  spentPercentage: a,
+  remainingAmount: o,
+  iconColor: s,
+  icon: c
+}) => {
+  const { budgets: m } = I();
+  return /* @__PURE__ */ e(d.Fragment, { children: /* @__PURE__ */ l(
+    K,
+    {
+      sx: {
+        bgcolor: "background.paper",
+        borderBottomColor: "divider",
+        borderBottomStyle: "solid",
+        borderBottomWidth: 1
+      },
+      children: [
+        /* @__PURE__ */ l(
+          v,
+          {
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              gap: 12,
+              justifyContent: "space-between",
+              pt: 16,
+              px: 24
+            },
+            children: [
+              /* @__PURE__ */ e(Y, { bold: !0, variant: "subtitle1", children: it(t) }),
+              n && /* @__PURE__ */ e(oe, { endIcon: /* @__PURE__ */ e(Re, {}), onClick: n, sx: { height: 28 }, children: /* @__PURE__ */ e(x, { bold: !0, variant: "body2", children: m.spending_history }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          et,
+          {
+            amount: /* @__PURE__ */ l(v, { sx: { alignItems: "baseline", flexDirection: "row", gap: 4 }, children: [
+              /* @__PURE__ */ e(Be, { children: X(i, "0,0.00") }),
+              /* @__PURE__ */ e(Y, { color: "text.secondary", variant: "body2", children: "/" }),
+              /* @__PURE__ */ e(Y, { color: "text.secondary", variant: "body2", children: X(r, "0,0.00") })
+            ] }),
+            completeColor: `${s}.main`,
+            icon: c,
+            label: m.spent_label,
+            leftLabel: N(m.percent_spent, a.toFixed()),
+            percentComplete: a,
+            rightLabel: N(
+              m.balance_left,
+              X(o, "0,0.00")
+            ),
+            sx: {
+              pb: 24,
+              pt: 16,
+              px: 24
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}, mt = ({
+  merchantBudget: t,
+  transaction: n,
+  onClose: i,
+  isOpen: r,
+  setCurrencyDialogAction: a,
+  renderingToast: o
+}) => {
+  const { budgets: s, common: c } = I(), { sortedTransactions: m } = O(), u = d.useMemo(() => m.reduce((h, f) => f.parent_guid ? h : h + f.amount, 0), [m]), { remainingAmount: p, spentPercentage: _, iconColor: g } = Ke(
+    u,
+    t.amount ?? 0
+  );
+  return /* @__PURE__ */ l(
+    ie,
+    {
+      ariaLabelClose: c.close_aria,
+      footerStyles: {
+        px: 24,
+        py: 16
+      },
+      isOpen: r,
+      onClose: i,
+      onPrimaryAction: () => a(fe.EDIT),
+      onSecondaryAction: () => {
+        a(fe.DELETE);
+      },
+      primaryText: s.details_edit_button,
+      secondaryColor: "error",
+      secondaryText: s.details_delete_button,
+      sx: {
+        "& .list-wrapper": {
+          pr: 24
+        }
+      },
+      title: N(s.details_type_title, t.merchant_name),
+      children: [
+        /* @__PURE__ */ e(
+          _t,
+          {
+            amount: t.amount,
+            icon: /* @__PURE__ */ e(
+              Ae,
+              {
+                categoryGuid: n.top_level_category_guid || "",
+                merchantGuid: n.merchant_guid || ""
+              }
+            ),
+            iconColor: g,
+            remainingAmount: p,
+            spentPercentage: _,
+            startDate: n.date,
+            totalTransaction: u
+          }
+        ),
+        /* @__PURE__ */ e(tt, {}),
+        o?.()
+      ]
+    }
+  );
+}, pt = E(mt);
+var fe = /* @__PURE__ */ ((t) => (t.CREATE = "create", t.EDIT = "edit", t.DELETE = "delete", t))(fe || {});
+const gt = E(({ transaction: t }) => {
+  const [n, i] = d.useState(null), [r, a] = d.useState(""), [o, s] = d.useState(!1), c = d.useRef(!1), [m, u] = d.useState(null), p = j(), {
+    addMerchantBudget: _,
+    updateMerchantBudget: g,
+    deleteMerchantBudget: h,
+    getMerchantBudgetByMerchantGuid: f,
+    alert: L,
+    setAlert: M
+  } = We(), { setFilter: S } = O(), { accounts: T } = Ye(), R = p.palette.mode === "dark" ? "grey.800" : "grey.100", { budgets: C, common: Q } = I(), { announce: ge, ariaLive: he } = pe(), [Z, ee] = d.useState(!1), W = t?.merchant_guid ? f(t.merchant_guid) : void 0, te = () => {
+    u(n), i(null), a("");
+  }, ye = () => {
+    W ? ee(!0) : i(
+      "create"
+      /* CREATE */
+    );
+  }, b = {
+    create: {
+      content: N(
+        C.create_budget_content,
+        /* @__PURE__ */ e("strong", { children: t.description }),
+        `${X(t.amount, "0,0.00")}`
+      ),
+      title: C.dialog_create_budget_title,
+      primaryButtonText: C.dialog_primary_button_text,
+      errorAlertMessage: N(
+        C.alert_merchant_budget_not_created,
+        t.description
+      ),
+      errorRetryAction: () => i(
+        "create"
+        /* CREATE */
+      ),
+      successAlertMessage: N(
+        C.alert_budget_created,
+        t.description
+      ),
+      apiTrigger: async () => await _(t.merchant_guid, Number(r))
+    },
+    edit: {
+      content: N(
+        C.edit_budget_content,
+        /* @__PURE__ */ e("strong", { children: t.description })
+      ),
+      title: C.details_edit_title,
+      primaryButtonText: C.add_save_button,
+      errorAlertMessage: N(
+        C.error_alert_edit_merchant_budget,
+        t.description
+      ),
+      errorRetryAction: () => i(
+        "edit"
+        /* EDIT */
+      ),
+      successAlertMessage: N(
+        C.success_alert_edit_merchant_budget,
+        t.description
+      ),
+      apiTrigger: async () => await g({
+        ...W,
+        amount: Number(r)
+      })
+    },
+    delete: {
+      content: N(
+        C.delete_description,
+        /* @__PURE__ */ e("strong", { children: t.description })
+      ),
+      title: C.delete_title,
+      primaryButtonText: C.details_delete_button,
+      errorAlertMessage: N(
+        C.error_alert_delete_merchant_budget,
+        t.description
+      ),
+      errorRetryAction: () => i(
+        "delete"
+        /* DELETE */
+      ),
+      successAlertMessage: N(
+        C.success_alert_delete_merchant_budget,
+        t.description
+      ),
+      apiTrigger: async () => await h(W.guid)
+    }
+  }, k = async () => {
+    if (c.current) return;
+    c.current = !0;
+    const { apiTrigger: $, successAlertMessage: P, errorAlertMessage: Te } = b[n], { isSuccess: Ce } = await $(), ve = Ce ? P : Te;
+    te(), s(!Ce), M(ve), ge(ve), Ce && n === "delete" && ee(!1), c.current = !1;
+  };
+  d.useEffect(() => {
+    const $ = {
+      start: nt(new Date(t.date * 1e3)),
+      end: ot(new Date(t.date * 1e3))
+    };
+    S({
+      accounts: T.map((P) => P.guid),
+      custom: Z ? (P) => P.merchant_guid === t.merchant_guid : (P) => P.guid === t.guid,
+      dateRange: $
+    });
+  }, [Z, t, T]);
+  const A = () => /* @__PURE__ */ e(
+    $e,
+    {
+      actionText: C.autogenerate_budgets_error_primary_button,
+      autoHideDuration: 3500,
+      handleClose: () => M(""),
+      message: L,
+      multiLine: !0,
+      onActionClick: b[m]?.errorRetryAction,
+      open: !!L,
+      severity: o ? "error" : "success",
+      showAction: o,
+      showClose: !0,
+      snackbarSx: {
+        //TODO - remove the customization and update the Toast component in MXUI in the upcoming ticket (WEC-1162) to handle multi-line messages and long action text
+        "& .MuiAlert-root": {
+          alignItems: "self-start",
+          minHeight: 0,
+          "& .MuiAlert-message": {
+            pt: 8
+          }
+        },
+        "&.MuiSnackbar-root": {
+          width: "fit-content",
+          zIndex: 9999
+          // Higher than Drawer's default 1200
+        },
+        "& .MuiAlert-action .MuiStack-root": {
+          flexDirection: "row",
+          display: "flex",
+          alignItems: "center",
+          width: "max-content"
+        }
+      }
+    }
+  );
+  return /* @__PURE__ */ l(d.Fragment, { children: [
+    he,
+    /* @__PURE__ */ e(G, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ l(V, { onClick: ye, children: [
+      /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(H, { sx: { bgcolor: R }, variant: "rounded", children: /* @__PURE__ */ e(D, { name: "bubble_chart", sx: { color: "text.primary" } }) }) }),
+      /* @__PURE__ */ e(
+        B,
+        {
+          primary: C.add_merchant_budget_primary_text,
+          primaryTypographyProps: { variant: "caption" },
+          secondary: /* @__PURE__ */ e(x, { bold: !0, sx: { color: "text.primary" }, variant: "body1", children: W ? `${X(W.amount, "0,0.00")} / ${Q.month_text}` : C.add_merchant_budget_secondary_text })
+        }
+      ),
+      /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(D, { name: "chevron_right", sx: { color: "text.primary" } }) })
+    ] }) }),
+    !!W && /* @__PURE__ */ e(
+      pt,
+      {
+        isOpen: Z,
+        merchantBudget: W,
+        onClose: () => ee(!1),
+        renderingToast: () => L && A(),
+        setCurrencyDialogAction: i,
+        transaction: t
+      }
+    ),
+    n && /* @__PURE__ */ e(
+      Fe,
+      {
+        closeAriaLabel: Q.close_aria,
+        content: b[n].content,
+        handleInputChange: a,
+        handleModalClose: te,
+        handlePrimaryAction: k,
+        handleSecondaryAction: te,
+        inputLabel: n !== "delete" ? Q.amount_text : "",
+        inputValue: r,
+        isOpen: !!n,
+        primaryText: b[n].primaryButtonText,
+        secondaryText: Q.cancel_button,
+        title: b[n].title
+      }
+    ),
+    !!L && A()
+  ] });
+}), ht = ({ transaction: t }) => {
+  const { addOrUpdateTransactionRule: n, updateTransaction: i } = O(), { categories: r } = Le(), { onEvent: a } = w(), { setShouldDisableDrawerScroll: o, updateManualTransaction: s } = J(), { transactions: c } = I(), m = j(), [u, p] = d.useState(!1), [_, g] = d.useState(""), h = async (T) => {
+    await i({ ...t, category_guid: _ }), T && await n(_, t), g(""), a(F.TRANSACTION_DETAILS_CLICK_CATEGORY, {
+      transaction_guid: t.guid
+    });
+  }, f = (T) => {
+    if (t.is_manual && !t.guid) {
+      const R = r.find((C) => C.guid === T);
+      s({
+        ...t,
+        category: R?.name,
+        category_guid: T,
+        top_level_category_guid: R?.parent_guid || T
+      });
+    } else
+      g(T);
+    L();
+  }, L = () => {
+    p(!1), o(!1);
+  }, M = d.useMemo(
+    () => r.find((T) => T.guid === _),
+    [_]
+  ), S = m.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ l(G, { disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ l(
+      V,
+      {
+        onClick: () => {
+          a(y.ON_TRANSACTION_CATEGORY_CLICK), p(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(H, { sx: { bgcolor: S }, variant: "rounded", children: /* @__PURE__ */ e(
+            Ne,
+            {
+              categoryGuid: t.top_level_category_guid,
+              size: 24,
+              sx: { color: "text.primary" },
+              variant: De.Transparent
+            }
+          ) }) }),
+          /* @__PURE__ */ e(
+            B,
+            {
+              primary: c.category_title,
+              primaryTypographyProps: { variant: "XSmall" },
+              secondary: /* @__PURE__ */ e(x, { bold: !0, sx: { color: "text.primary" }, variant: "Body", children: t.category ?? c.actions_select_a_category })
+            }
+          ),
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(D, { name: "chevron_right", sx: { color: "text.primary" } }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      Pe,
+      {
+        initialSelected: t.category_guid,
+        onClose: L,
+        onSelect: f,
+        showDrawer: u,
+        title: c.actions_select_a_category
+      }
+    ),
+    /* @__PURE__ */ e(
+      q,
+      {
+        copy: {
+          title: N(
+            c.actions_apply_to_all_transaction_types,
+            t.description
+          )
+        },
+        isOpen: !!_,
+        onClose: () => g(""),
+        onPrimaryAction: () => h(!0),
+        onSecondaryAction: () => h(!1),
+        primaryText: c.actions_apply_to_all,
+        secondaryText: c.actions_this_time_only,
+        children: /* @__PURE__ */ e(Y, { variant: "Paragraph", children: N(
+          c.actions_all_past_and_future,
+          t.description,
+          M?.name
+        ) })
+      }
+    )
+  ] });
+}, yt = ({ transaction: t }) => {
+  const { onEvent: n } = w(), { updateTransaction: i } = O(), { updateManualTransaction: r } = J(), { common: a, transactions: o } = I(), s = j(), [c, m] = d.useState(!1), [u, p] = d.useState(t.date), _ = (f) => {
+    p(rt(f));
+  }, g = async () => {
+    if (t.is_manual && !t.guid) {
+      r({ ...t, date: u }), m(!1);
+      return;
+    }
+    await i({ ...t, date: u }), n(F.TRANSACTION_DETAILS_CLICK_DATE, { transaction_guid: t.guid }), m(!1);
+  }, h = s.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ l(G, { className: "mx-txn-date-action", disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ l(
+      V,
+      {
+        onClick: () => {
+          n(y.ON_TRANSACTION_DATE_CLICK), m(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(H, { sx: { bgcolor: h }, variant: "rounded", children: /* @__PURE__ */ e(D, { name: "calendar_month", sx: { color: "text.primary" } }) }) }),
+          /* @__PURE__ */ e(
+            B,
+            {
+              primary: o.date_title,
+              primaryTypographyProps: { variant: "XSmall" },
+              secondary: /* @__PURE__ */ e(x, { bold: !0, sx: { color: "text.primary" }, variant: "Body", children: Me(Se(t.date), ke.YEAR_MONTH_DAY) })
+            }
+          ),
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(D, { name: "chevron_right", sx: { color: "text.primary" } }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      ie,
+      {
+        ariaLabelClose: a.close_aria,
+        isOpen: c,
+        onClose: () => m(!1),
+        onPrimaryAction: g,
+        primaryText: a.save_button,
+        secondaryText: a.cancel_button,
+        title: o.date_edit_title,
+        children: /* @__PURE__ */ e(v, { alignItems: "center", mt: 40, children: /* @__PURE__ */ e(
+          He,
+          {
+            beginDate: Se(u),
+            copy: {
+              nextAria: o.date_next_aria,
+              prevAria: o.date_prev_aria,
+              today: a.date_range_picker.today
+            },
+            onDateSelected: _,
+            selectionType: Ue.Single
+          }
+        ) })
+      }
+    )
+  ] });
+}, Tt = ({ transaction: t }) => {
+  const { onEvent: n } = w(), { removeTransaction: i } = O(), { setShouldDisableDrawerScroll: r } = J(), { common: a, transactions: o } = I(), [s, c] = d.useState(!1), m = async () => {
+    await i(t.guid), n(y.ON_TRANSACTION_DELETE_DELETED);
+  };
+  return /* @__PURE__ */ l(K, { className: "mx-txn-delete", children: [
+    t && /* @__PURE__ */ e(G, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ l(
+      V,
+      {
+        onClick: () => {
+          n(y.ON_TRANSACTION_DELETE_CLICK), r(!0), c(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(H, { variant: "rounded", children: /* @__PURE__ */ e(_e, { color: "secondary", fontSize: "small" }) }) }),
+          /* @__PURE__ */ e(
+            B,
+            {
+              primary: o.manual_transaction_delete_title,
+              secondary: o.manual_transaction_delete_subtitle
+            }
+          ),
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(_e, {}) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      q,
+      {
+        copy: { title: o.manual_transaction_delete_title },
+        isOpen: s,
+        onClose: () => {
+          r(!1), c(!1);
+        },
+        onPrimaryAction: m,
+        onSecondaryAction: () => n(y.ON_TRANSACTION_DELETE_CANCEL),
+        primaryText: a.delete_button,
+        secondaryText: a.cancel_button,
+        children: /* @__PURE__ */ e(x, { sx: { whiteSpace: "normal" }, variant: "Paragraph", children: o.manual_transaction_delete_description })
+      }
+    )
+  ] });
+}, Ct = E(Tt), bt = ({ transaction: t }) => {
+  const { onEvent: n } = w(), { updateTransaction: i } = O(), { setShouldDisableDrawerScroll: r } = J(), { common: a, transactions: o } = I(), s = j(), [c, m] = d.useState(!1), u = async () => {
+    await i({ ...t, merchant_guid: "" }), n(F.TRANSACTION_DETAILS_CLICK_DELETE_LOGO, {
+      transaction_guid: t.guid
+    });
+  }, p = s.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ e(d.Fragment, { children: t && /* @__PURE__ */ l(G, { className: "mx-txn-delete-logo", disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ l(
+      V,
+      {
+        onClick: () => {
+          n(y.ON_TRANSACTION_DELETE_LOGO_CLICK), m(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(H, { sx: { bgcolor: p }, variant: "rounded", children: /* @__PURE__ */ e(D, { name: "delete", sx: { color: "text.primary" } }) }) }),
+          /* @__PURE__ */ e(B, { primary: o.merchant_logo_title, secondary: o.merchant_logo_desc }),
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(D, { name: "chevron_right", sx: { color: "text.primary" } }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ l(
+      q,
+      {
+        copy: { title: o.merchant_logo_modal_title },
+        isOpen: c,
+        onClose: () => {
+          r(!1), m(!1);
+        },
+        onPrimaryAction: u,
+        onSecondaryAction: () => n(y.ON_TRANSACTION_DELETE_LOGO_CANCEL),
+        primaryText: a.delete_button,
+        secondaryText: a.cancel_button,
+        title: o.merchant_logo_modal_title,
+        children: [
+          /* @__PURE__ */ e(x, { sx: { whiteSpace: "normal" }, variant: "Paragraph", children: o.merchant_logo_modal_desc }),
+          /* @__PURE__ */ e(x, { bold: !0, sx: { whiteSpace: "normal" }, variant: "Paragraph", children: ` ${o.merchant_logo_modal_desc_bold}` })
+        ]
+      }
+    )
+  ] }) });
+}, xt = E(bt), St = ({ transaction: t }) => {
+  const { onEvent: n } = w(), { updateTransaction: i } = O(), { setShouldDisableDrawerScroll: r } = J(), { common: a, transactions: o } = I(), s = j(), [c, m] = d.useState(!1), u = t.is_hidden, p = async () => {
+    await i({ ...t, is_hidden: !t.is_hidden }), n(
+      u ? y.ON_TRANSACTION_UNHIDDEN : y.ON_TRANSACTION_HIDDEN
+    );
+  }, _ = s.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ e(d.Fragment, { children: t && /* @__PURE__ */ l(G, { className: "mx-txn-hide-transaction", disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ l(
+      V,
+      {
+        "aria-checked": u,
+        "aria-labelledby": "hide-transaction-text",
+        onClick: () => {
+          n(
+            u ? y.ON_TRANSACTION_UNHIDE_CLICK : y.ON_TRANSACTION_HIDE_CLICK
+          ), n(
+            u ? "transaction_details_click_unhide_transaction" : "transaction_details_click_hide_transaction",
+            {
+              transaction_guid: t.guid
+            }
+          ), m(!0);
+        },
+        role: "switch",
+        children: [
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(H, { sx: { bgcolor: _ }, variant: "rounded", children: u ? /* @__PURE__ */ e(D, { name: "visibility_off", sx: { color: "text.primary" } }) : /* @__PURE__ */ e(D, { name: "visibility", sx: { color: "text.primary" } }) }) }),
+          /* @__PURE__ */ e(
+            B,
+            {
+              id: "hide-transaction-text",
+              primary: u ? o.hide_trnx_subtitle_unhide_trnx : o.hide_trnx_subtitle_hide_trnx,
+              secondary: u ? o.hide_trnx_desc_unhiding : o.hide_trnx_desc_hiding
+            }
+          ),
+          /* @__PURE__ */ e(z, { "aria-hidden": "true", children: /* @__PURE__ */ e(
+            lt,
+            {
+              checked: u,
+              inputProps: { tabIndex: -1 },
+              sx: { pointerEvents: "none" },
+              tabIndex: -1
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      q,
+      {
+        copy: {
+          title: u ? o.hide_trnx_subtitle_unhide_trnx : o.hide_trnx_subtitle_hide_trnx
+        },
+        isOpen: c,
+        onClose: () => {
+          r(!1), m(!1);
+        },
+        onPrimaryAction: p,
+        onSecondaryAction: () => n(
+          u ? y.ON_TRANSACTION_UNHIDE_CANCEL_CLICK : y.ON_TRANSACTION_HIDE_CANCEL_CLICK
+        ),
+        primaryText: u ? a.unhide_button : a.hide_button,
+        secondaryText: a.cancel_button,
+        children: /* @__PURE__ */ e(x, { truncate: !1, variant: "Paragraph", children: u ? o.hide_trnx_desc_unhiding : o.hide_trnx_desc_hiding })
+      }
+    )
+  ] }) });
+}, ft = E(St), Ge = ({ transaction: t }) => {
+  const { amount: n, description: i, isIncome: r, merchant_guid: a, payee: o, top_level_category_guid: s } = t;
+  return /* @__PURE__ */ l(v, { className: "mx-txn-amount-header", direction: "row", gap: 12, px: 16, py: 24, children: [
+    /* @__PURE__ */ e(
+      Ae,
+      {
+        categoryGuid: s || "",
+        merchantGuid: a || "",
+        size: 64
+      }
+    ),
+    /* @__PURE__ */ l(v, { overflow: "hidden'", children: [
+      /* @__PURE__ */ e(x, { bold: !0, mb: 4, truncate: !0, variant: "Body", children: i || o }),
+      /* @__PURE__ */ l(Y, { color: r ? "success.main" : "text.primary", truncate: !0, variant: "H1", children: [
+        r ? "+" : "",
+        X(n, "0,0.00")
+      ] })
+    ] })
+  ] });
+}, At = ({ transaction: t }) => {
+  const { onEvent: n } = w(), { updateTransaction: i } = O(), { updateManualTransaction: r } = J(), { common: a, transactions: o } = I(), s = j(), [c, m] = d.useState(!1), [u, p] = d.useState("");
+  d.useEffect(() => {
+    c && p(t.memo ? t.memo : "");
+  }, [c]);
+  const _ = async () => {
+    if (t.is_manual && !t.guid) {
+      r({ ...t, memo: u }), m(!1);
+      return;
+    }
+    await i({ ...t, memo: u }), n(F.TRANSACTION_DETAILS_CLICK_MEMO, { transaction_guid: t.guid }), m(!1);
+  }, g = s.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ l(G, { className: "mx-txn-memo-action", disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ l(
+      V,
+      {
+        onClick: () => {
+          n(y.ON_TRANSACTION_MEMO_CLICK), m(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(H, { sx: { bgcolor: g }, variant: "rounded", children: /* @__PURE__ */ e(D, { name: "article", sx: { color: "text.primary" } }) }) }),
+          /* @__PURE__ */ e(
+            B,
+            {
+              primary: o.memo_title,
+              primaryTypographyProps: { variant: "XSmall" },
+              secondary: /* @__PURE__ */ e(
+                x,
+                {
+                  bold: !0,
+                  sx: { overflowWrap: "break-word", whiteSpace: "wrap", color: "text.primary" },
+                  variant: "Body",
+                  children: t.memo ? t.memo : o.memo_desc
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(D, { name: "chevron_right", sx: { color: "text.primary" } }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ l(
+      ie,
+      {
+        ariaLabelClose: a.close_aria,
+        isOpen: c,
+        onClose: () => m(!1),
+        onPrimaryAction: _,
+        title: o.memo_title,
+        children: [
+          /* @__PURE__ */ e(Ge, { transaction: t }),
+          /* @__PURE__ */ e(
+            Oe,
+            {
+              "aria-label": o.memo_desc_aria,
+              focused: !0,
+              multiline: !0,
+              name: "memo",
+              onChange: (h) => p(h.target.value),
+              placeholder: o.memo_desc,
+              rows: 4,
+              sx: { mx: 16, width: "calc(100% - 32px)" },
+              value: u
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, Nt = E(At), It = ({
+  index: t,
+  onDeleteRow: n,
+  onCategoryChanged: i,
+  onUpdateAmount: r,
+  split: a
+}) => {
+  const { onEvent: o } = w(), { transactions: s } = I(), [c, m] = d.useState(`${a.amount}`), [u, p] = d.useState(!1), _ = t === 0, g = (h) => {
+    isNaN(Number(h)) || (m(h), r(t, Number(h)));
+  };
+  return /* @__PURE__ */ l(K, { bgcolor: "background.paper", className: "mx-txn-split-manager-row", pb: 4, px: 8, children: [
+    /* @__PURE__ */ l(xe, { alignItems: _ ? "center" : "start", container: !0, children: [
+      /* @__PURE__ */ e(xe, { item: !0, xs: 7, children: /* @__PURE__ */ l(v, { alignItems: "start", children: [
+        /* @__PURE__ */ e(
+          oe,
+          {
+            endIcon: /* @__PURE__ */ e(Re, {}),
+            onClick: () => p(!0),
+            startIcon: /* @__PURE__ */ e(Ne, { categoryGuid: a.top_level_category_guid }),
+            sx: { px: 12, py: 8 },
+            children: a.category
+          }
+        ),
+        /* @__PURE__ */ e(K, { children: !a.category_guid && /* @__PURE__ */ l(v, { color: "error.main", direction: "row", gap: 8, p: 12, children: [
+          /* @__PURE__ */ e("span", { "aria-label": "error", role: "img", children: /* @__PURE__ */ e(me, { sx: { fontSize: 15 } }) }),
+          /* @__PURE__ */ e(x, { variant: "Small", children: s.split_transaction_errors_select_category })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ e(xe, { item: !0, xs: 5, children: _ ? /* @__PURE__ */ e("div", { className: "mx-txn-split-manager-row-top-container", children: /* @__PURE__ */ e(x, { children: X(a.amount, "0,0.00") }) }) : /* @__PURE__ */ l(v, { alignItems: "start", children: [
+        /* @__PURE__ */ l(v, { alignItems: "start", direction: "row", gap: 8, children: [
+          /* @__PURE__ */ e(
+            st,
+            {
+              amount: c,
+              ariaLabel: s.split_transaction_edit_split_amount,
+              label: s.split_transaction_edit_split_amount,
+              minAmount: 0.01,
+              name: "split-amount-input",
+              setAmount: g,
+              sx: {
+                ".MuiOutlinedInput-input": { p: 12 }
+              },
+              type: "number"
+            }
+          ),
+          /* @__PURE__ */ e(
+            ne,
+            {
+              "aria-label": s.split_transaction_delete_split_btn,
+              color: "secondary",
+              onClick: () => {
+                o(y.ON_TRANSACTION_SPLIT_DELETE_CLICK), n(t);
+              },
+              sx: { w: 44, h: 44 },
+              children: /* @__PURE__ */ e(_e, {})
+            }
+          )
+        ] }),
+        !c && /* @__PURE__ */ l(v, { color: "error.main", direction: "row", gap: 8, py: 12, children: [
+          /* @__PURE__ */ e("span", { "aria-label": "error", role: "img", children: /* @__PURE__ */ e(me, { sx: { fontSize: 15 } }) }),
+          /* @__PURE__ */ e(x, { variant: "Small", children: s.split_transaction_errors_enter_an_amount })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ e(
+      Pe,
+      {
+        initialSelected: a.category_guid,
+        onClose: () => p(!1),
+        onSelect: (h) => {
+          i(t, h), p(!1);
+        },
+        showDrawer: u,
+        title: s.actions_select_a_category
+      }
+    )
+  ] });
+}, vt = E(It), Et = ({
+  onAddSplit: t,
+  onCategoryChanged: n,
+  onDeleteSplit: i,
+  onUpdateAmount: r,
+  splits: a,
+  transaction: o
+}) => {
+  const { transactions: s } = I(), { onEvent: c } = w(), [m, u] = d.useState(""), { announce: p, ariaLive: _ } = pe();
+  return d.useEffect(() => {
+    if (a.length <= 1)
+      u(s.split_transaction_errors_min_splits), p(s.split_transaction_errors_min_splits);
+    else if (a[0].amount < 0) {
+      const g = N(
+        s.split_transaction_errors_totals_must_equal_amount,
+        X(o.amount, "0,0.00")
+      );
+      u(g), p(g);
+    } else
+      u(""), p("");
+  }, [a]), /* @__PURE__ */ l(K, { className: "mx-txn-split-manager", children: [
+    _,
+    a.map((g, h) => /* @__PURE__ */ e(
+      vt,
+      {
+        index: h,
+        onCategoryChanged: n,
+        onDeleteRow: i,
+        onUpdateAmount: r,
+        split: g
+      },
+      h
+    )),
+    m && /* @__PURE__ */ l(v, { color: "error.main", direction: "row", gap: 8, p: 16, children: [
+      /* @__PURE__ */ e("span", { "aria-label": "error", role: "img", children: /* @__PURE__ */ e(me, { sx: { fontSize: 15 } }) }),
+      /* @__PURE__ */ e(x, { variant: "Small", children: m })
+    ] }),
+    /* @__PURE__ */ e(K, { p: 16, children: /* @__PURE__ */ e(
+      oe,
+      {
+        "aria-label": s.split_transaction_add_split_btn,
+        onClick: () => {
+          c(y.ON_TRANSACTION_SPLIT_ADD_CLICK), t();
+        },
+        children: s.split_transaction_add_split_btn
+      }
+    ) })
+  ] });
+}, Dt = E(Et), Ot = ({ transaction: t }) => {
+  const { onEvent: n } = w(), { announce: i, ariaLive: r } = pe(), { splitTransaction: a, unSplitTransaction: o } = O(), { common: s, transactions: c } = I(), { setShouldDisableDrawerScroll: m } = J(), { categories: u } = Le(), p = j(), _ = {
+    ...t,
+    amount: t.amount - 1,
+    guid: "",
+    has_been_split: !1,
+    parent_guid: t.guid
+  }, g = {
+    ...t,
+    amount: 1,
+    category_guid: void 0,
+    category: c.split_transaction_select_category_btn,
+    guid: "",
+    has_been_split: !1,
+    parent_guid: t.guid,
+    top_level_category_guid: void 0
+  }, [h, f] = d.useState(!1), [L, M] = d.useState(!1), [S, T] = d.useState([]), R = () => {
+    const b = [...S];
+    b.push({ ...g }), b[0].amount -= 1, T(b), i(
+      N(
+        c.split_transaction_add_split_announcement,
+        b.length
+      )
+    );
+  }, C = (b) => {
+    if (b > 0) {
+      const k = S[b], A = [...S];
+      A.splice(b, 1), A[0].amount += k.amount, T(A), i(
+        N(c.split_transaction_delete_split_announcement, b + 1)
+      );
+    }
+  }, Q = (b, k) => {
+    const A = [...S];
+    A[b].amount = k, A[0].amount = t.amount - A.reduce(
+      ($, P, Te) => $ + (Te !== 0 ? P.amount : 0),
+      0
+    ), T(A);
+  }, ge = (b, k) => {
+    const A = [...S], $ = u.find((P) => P.guid === k);
+    $ && (A[b] = {
+      ...A[b],
+      category_guid: k,
+      category: $.name,
+      top_level_category_guid: $.parent_guid || k
+    }, T(A), i(
+      N(
+        c.split_transaction_select_category_announcement,
+        $.name,
+        b + 1
+      )
+    ));
+  }, he = () => {
+    if (t.parent_guid || t.has_been_split) {
+      M(!0);
+      return;
+    }
+    T([{ ..._ }, { ...g }]), n(F.TRANSACTION_DETAILS_CLICK_SPLIT, {
+      transaction_guid: t.guid
+    }), f(!0);
+  }, Z = async () => {
+    n(y.ON_TRANSACTION_SPLIT_SAVE_CLICK), await a({ ...t, has_been_split: !0 }, S), f(!1);
+  }, ee = async () => {
+    n(y.ON_TRANSACTION_SPLIT_CANCEL_CLICK), T([{ ..._ }, { ...g }]), f(!1);
+  }, W = async () => {
+    n(F.TRANSACTION_DETAILS_CLICK_UNSPLIT, {
+      transaction_guid: t.guid
+    });
+    const b = t.parent_guid ?? t.guid;
+    await o(b);
+  }, te = d.useMemo(() => {
+    const b = S.some((A) => !A.category_guid), k = S.some((A) => A.amount <= 0);
+    return b || k;
+  }, [S]), ye = p.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ e(d.Fragment, { children: t && /* @__PURE__ */ l(G, { disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ l(V, { onClick: he, children: [
+      /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(H, { sx: { bgcolor: ye }, variant: "rounded", children: /* @__PURE__ */ e(D, { name: "call_split", sx: { color: "text.primary" } }) }) }),
+      /* @__PURE__ */ e(
+        B,
+        {
+          primary: t.has_been_split || t.parent_guid ? c.split_transaction_unsplit_title : c.split_transaction_title,
+          secondary: t.has_been_split || t.parent_guid ? c.split_transaction_unsplit_subtitle : c.split_transaction_desc
+        }
+      ),
+      /* @__PURE__ */ e(z, { children: t.has_been_split || t.parent_guid ? /* @__PURE__ */ e(D, { name: "delete" }) : /* @__PURE__ */ e(D, { name: "chevron_right", sx: { color: "text.primary" } }) })
+    ] }),
+    /* @__PURE__ */ l(
+      ie,
+      {
+        ariaLabelClose: s.close_aria,
+        isOpen: h,
+        isPrimaryDisabled: te,
+        onClose: ee,
+        onPrimaryAction: Z,
+        primaryText: s.save_button,
+        secondaryText: s.cancel_button,
+        title: c.split_transaction_title,
+        children: [
+          r,
+          /* @__PURE__ */ e(Ge, { transaction: t }),
+          /* @__PURE__ */ e(
+            Dt,
+            {
+              onAddSplit: R,
+              onCategoryChanged: ge,
+              onDeleteSplit: C,
+              onUpdateAmount: Q,
+              splits: S,
+              transaction: t
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      q,
+      {
+        copy: { title: c.split_transaction_unsplit_title },
+        isOpen: L,
+        onClose: () => {
+          m(!1), M(!1);
+        },
+        onPrimaryAction: W,
+        onSecondaryAction: () => {
+          n(y.ON_TRANSACTION_UNSPLIT_CANCEL);
+        },
+        primaryText: s.delete_button,
+        secondaryText: s.cancel_button,
+        children: /* @__PURE__ */ e(Y, { variant: "Paragraph", children: N(
+          c.split_transaction_unsplit_description,
+          t.description
+        ) })
+      }
+    )
+  ] }) });
+}, Lt = E(Ot), wt = () => {
+  const t = we(), { onEvent: n } = w(), { addTag: i } = O(), { transactions: r } = I(), [a, o] = d.useState(!1), [s, c] = d.useState(""), [m, u] = d.useState(""), p = d.useRef(null);
+  d.useEffect(() => {
+    a && p?.current?.focus();
+  }, [a]);
+  const _ = () => {
+    n(
+      a ? y.ON_TRANSACTION_TAGS_TAG_ADD_CANCEL_CLICK : y.ON_TRANSACTION_TAGS_TAG_ADD_CLICK
+    ), a || c(""), o(!a);
+  }, g = async () => {
+    n(y.ON_TRANSACTION_TAGS_TAG_ADDED), await i(s), o(!1);
+  };
+  return d.useEffect(() => {
+    u(s.length > 40 ? r.tags_error_name_must_be_40_chars : "");
+  }, [s]), /* @__PURE__ */ l(K, { className: "mx-txn-tag-manager-header", children: [
+    /* @__PURE__ */ l(
+      v,
+      {
+        alignItems: "center",
+        bgcolor: t.palette.background.default,
+        direction: "row",
+        justifyContent: "space-between",
+        px: 24,
+        py: 16,
+        children: [
+          /* @__PURE__ */ e(x, { bold: !0, children: r.tags_your_tags }),
+          /* @__PURE__ */ e(
+            oe,
+            {
+              "aria-expanded": a,
+              "aria-label": r.tags_add_tag_btn_aria,
+              onClick: _,
+              children: r.tags_add_tag_btn
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ l(
+      q,
+      {
+        copy: { title: r.tags_add_tag_btn },
+        isOpen: a,
+        onClose: () => o(!1),
+        onPrimaryAction: g,
+        onSecondaryAction: () => o(!1),
+        children: [
+          /* @__PURE__ */ e(
+            Ie,
+            {
+              "aria-label": r.tags_placeholder,
+              name: "add-tag",
+              onChange: (h) => c(h.target.value),
+              placeholder: r.tags_placeholder,
+              sx: { width: "100%" },
+              value: s
+            }
+          ),
+          /* @__PURE__ */ e(Y, { id: "add-tag-error", sx: { color: "error.main" }, variant: "ParagraphSmall", children: m })
+        ]
+      }
+    )
+  ] });
+}, Rt = E(wt), Mt = ({ onSearchValueChanged: t, searchValue: n }) => {
+  const { common: i, transactions: r } = I(), a = /* @__PURE__ */ e(
+    ne,
+    {
+      "aria-label": r.tags_cancel_search || "Search",
+      onClick: () => t(""),
+      children: /* @__PURE__ */ e(me, {})
+    }
+  );
+  return /* @__PURE__ */ e(K, { className: "mx-txn-tag-manager-search", px: 24, py: 16, children: /* @__PURE__ */ e(
+    Ie,
+    {
+      InputProps: {
+        startAdornment: /* @__PURE__ */ e(Ee, { position: "start", children: /* @__PURE__ */ e(Je, { color: "disabled" }) }),
+        endAdornment: /* @__PURE__ */ e(Ee, { position: "end", sx: { padding: 0 }, children: n ? a : null })
+      },
+      "aria-label": i.search_aria,
+      name: "search",
+      onChange: (o) => t(o.target.value),
+      placeholder: i.search_placeholder,
+      sx: { bgcolor: "background.paper", width: "100%" },
+      value: n
+    }
+  ) });
+}, kt = E(Mt), Pt = ({ onTagChecked: t, selectedTags: n, tag: i }) => {
+  const { onEvent: r } = w(), { removeTag: a, updateTag: o } = O(), { common: s, transactions: c } = I(), [m, u] = d.useState(!1), [p, _] = d.useState(!1), [g, h] = d.useState(""), [f, L] = d.useState(""), M = async () => {
+    r(y.ON_TRANSACTION_TAGS_TAG_EDIT_SAVED), i && await o({ ...i, name: g }), u(!1);
+  }, S = async () => {
+    r(y.ON_TRANSACTION_TAGS_TAG_DELETED), await a(i.guid), _(!1);
+  };
+  d.useEffect(() => {
+    L(g.length > 40 ? c.tags_error_name_must_be_40_chars : "");
+  }, [g]);
+  const T = () => {
+    r(y.ON_TRANSACTION_TAGS_TAG_EDIT_CLICK), h(i.name), u(!0);
+  }, R = () => {
+    r(y.ON_TRANSACTION_TAGS_TAG_DELETE_CLICK), _(!0);
+  };
+  return /* @__PURE__ */ l(
+    G,
+    {
+      className: "mx-txn-transaction-manager-row",
+      disableGutters: !0,
+      disablePadding: !0,
+      secondaryAction: !i.is_default_tag && /* @__PURE__ */ l(v, { direction: "row", children: [
+        /* @__PURE__ */ e(
+          ne,
+          {
+            "aria-label": `Edit ${i.name} tag`,
+            color: "secondary",
+            onClick: T,
+            children: /* @__PURE__ */ e(Qe, { color: "secondary" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          ne,
+          {
+            "aria-label": `Delete ${i.name} tag`,
+            color: "secondary",
+            onClick: R,
+            children: /* @__PURE__ */ e(_e, { color: "secondary" })
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ l(
+          V,
+          {
+            "aria-checked": n.includes(i.guid),
+            onClick: () => t(i.guid),
+            role: "checkbox",
+            children: [
+              /* @__PURE__ */ e(z, { sx: { ml: 0 }, children: /* @__PURE__ */ e(
+                at,
+                {
+                  "aria-hidden": !0,
+                  checked: n.includes(i.guid),
+                  edge: "start",
+                  tabIndex: -1
+                }
+              ) }),
+              /* @__PURE__ */ e(B, { children: i.name })
+            ]
+          }
+        ),
+        /* @__PURE__ */ l(
+          q,
+          {
+            copy: { title: "Update tag name" },
+            isOpen: m,
+            onClose: () => u(!1),
+            onPrimaryAction: M,
+            onSecondaryAction: () => u(!1),
+            children: [
+              /* @__PURE__ */ e(
+                Ie,
+                {
+                  "aria-describedby": f ? "update-tag-error" : void 0,
+                  "aria-label": c.tags_update_the_tag_name,
+                  name: "update-tag",
+                  onChange: (C) => h(C.target.value),
+                  placeholder: "Tag name",
+                  sx: { width: "100%" },
+                  value: g
+                }
+              ),
+              /* @__PURE__ */ e(Y, { id: "update-tag-error", sx: { color: "error.main" }, variant: "ParagraphSmall", children: f })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          q,
+          {
+            copy: { title: c.tags_delete_title },
+            isOpen: p,
+            onClose: () => _(!1),
+            onPrimaryAction: S,
+            onSecondaryAction: () => r(y.ON_TRANSACTION_TAGS_TAG_DELETE_CANCEL_CLICK),
+            primaryText: s.delete_button,
+            secondaryText: s.cancel_button,
+            children: /* @__PURE__ */ e(x, { truncate: !1, children: c.tags_deleting_this_tag_will_remove_it })
+          }
+        )
+      ]
+    }
+  );
+}, Gt = E(Pt), Bt = ({ selectedTags: t, onTagChecked: n }) => {
+  const { tags: i } = O(), [r, a] = d.useState(""), o = i.filter(
+    (s) => s.name.toLowerCase().includes(r.toLowerCase())
+  );
+  return /* @__PURE__ */ l("div", { className: "mx-txn-tag-manager", children: [
+    /* @__PURE__ */ e(
+      kt,
+      {
+        onSearchValueChanged: (s) => a(s),
+        searchValue: r
+      }
+    ),
+    /* @__PURE__ */ e(Rt, {}),
+    /* @__PURE__ */ e(le, { sx: { boxShadow: "none" }, children: /* @__PURE__ */ e(ue, { children: o.map((s) => /* @__PURE__ */ l(d.Fragment, { children: [
+      /* @__PURE__ */ e(Gt, { onTagChecked: n, selectedTags: t, tag: s }),
+      /* @__PURE__ */ e(de, { sx: { ml: 24 } })
+    ] }, s.guid)) }) })
+  ] });
+}, $t = E(Bt), Kt = ({ transaction: t }) => {
+  const { onEvent: n } = w(), { tags: i, updateTaggings: r, updateTransaction: a } = O(), { common: o, transactions: s } = I(), { updateManualTransaction: c } = J(), m = j(), [u, p] = d.useState(!1), [_, g] = d.useState(t.tags);
+  d.useEffect(() => {
+    g(t.tags);
+  }, [u, t]);
+  const h = (S) => {
+    const T = [..._], R = _.indexOf(S);
+    R >= 0 ? T.splice(R, 1) : T.push(S), g(T);
+  }, f = async () => {
+    if (t.is_manual && !t.guid) {
+      c({ ...t, tags: _ }), p(!1);
+      return;
+    }
+    await r(_, t.guid), await a({ ...t, tags: _ }), n(F.TRANSACTION_DETAILS_CLICK_TAGS, { transaction_guid: t.guid }), p(!1);
+  }, L = d.useMemo(
+    () => t.tags.map(
+      (S, T, R) => `${i.find((C) => C.guid === S)?.name}${T < R.length - 1 ? " / " : ""}`
+    ),
+    [i, t]
+  ), M = m.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ l(G, { disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ l(
+      V,
+      {
+        onClick: () => {
+          n(y.ON_TRANSACTION_TAGS_CLICK), p(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(H, { sx: { bgcolor: M }, variant: "rounded", children: /* @__PURE__ */ e(D, { name: "local_offer", sx: { color: "text.primary" } }) }) }),
+          /* @__PURE__ */ e(
+            B,
+            {
+              primary: s.tags_title,
+              primaryTypographyProps: { variant: "XSmall" },
+              secondary: /* @__PURE__ */ e(x, { bold: !0, sx: { color: "text.primary" }, variant: "Body", children: t.tags?.length > 0 ? L : s.tags_desc })
+            }
+          ),
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(D, { name: "chevron_right", sx: { color: "text.primary" } }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      ie,
+      {
+        ariaLabelClose: o.close_aria,
+        isOpen: u,
+        onClose: () => p(!1),
+        onPrimaryAction: f,
+        primaryText: o.save_button,
+        secondaryText: o.cancel_button,
+        title: s.tags_title,
+        children: /* @__PURE__ */ e($t, { onTagChecked: h, selectedTags: _ })
+      }
+    )
+  ] });
+}, Ft = E(Kt), Ht = ({ transaction: t, viewOnly: n = !1 }) => {
+  const { updateTransaction: i } = O(), { common: r, transactions: a } = I(), { onEvent: o } = w(), { announce: s, ariaLive: c } = pe(), [m, u] = d.useState(!1), [p, _] = d.useState(""), g = d.useRef(null);
+  d.useEffect(() => {
+    m && (_(t.description), g?.current?.focus());
+  }, [m]);
+  const h = () => {
+    u(!0), o(y.ON_TRANSACTION_DESCRIPTION_EDIT_CLICK), setTimeout(() => document.getElementById("transaction-description-input")?.focus(), 0);
+  }, f = async () => {
+    o(F.TRANSACTION_DETAILS_CLICK_DESCRIPTION, {
+      transaction_guid: t.guid
+    }), await i({ ...t, description: p }), u(!1), s(`${a.payee_title}: ${p}`), setTimeout(() => document.getElementById("transaction-description-edit-button")?.focus(), 0);
+  };
+  return /* @__PURE__ */ l(K, { className: "mx-txn-transaction-description", children: [
+    c,
+    m ? /* @__PURE__ */ l(ze, { row: !0, children: [
+      /* @__PURE__ */ e(
+        Oe,
+        {
+          "aria-label": a.payee_title,
+          id: "transaction-description-input",
+          inputProps: { maxLength: 140 },
+          label: a.payee_title,
+          name: a.payee_title,
+          onChange: (L) => _(L.target.value),
+          ref: g,
+          sx: {
+            backgroundColor: "background.paper",
+            ".MuiOutlinedInput-root": { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
+            ".MuiOutlinedInput-input": { p: 11 },
+            width: 250
+          },
+          value: p
+        }
+      ),
+      /* @__PURE__ */ e(
+        oe,
+        {
+          disabled: !p,
+          onClick: f,
+          sx: {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0
+          },
+          variant: "outlined",
+          children: r.save_button
+        }
+      )
+    ] }) : /* @__PURE__ */ l(v, { alignItems: "center", direction: "row", gap: 4, sx: { minHeight: 44 }, children: [
+      /* @__PURE__ */ e(x, { bold: !0, children: t.description }),
+      !n && /* @__PURE__ */ e(
+        ne,
+        {
+          "aria-label": a.payee_edit,
+          id: "transaction-description-edit-button",
+          onClick: h,
+          sx: { color: "action.active" },
+          children: /* @__PURE__ */ e(ce, { name: "create", size: 22 })
+        }
+      )
+    ] })
+  ] });
+}, Ut = E(Ht), Vt = ({ transaction: t }) => {
+  const { updateTransaction: n } = O(), { transactions: i } = I(), { onEvent: r } = w(), a = we(), o = async () => {
+    r(F.TRANSACTION_DETAILS_CLICK_FLAG, { transaction_guid: t.guid }), await n({ ...t, is_flagged: !t.is_flagged });
+  };
+  return /* @__PURE__ */ e("div", { className: "mx-txn-transaction-flag", children: /* @__PURE__ */ e(
+    qe,
+    {
+      "aria-label": i.flag_btn_aria,
+      "aria-pressed": t.is_flagged,
+      color: "warning",
+      onClick: o,
+      selected: t.is_flagged,
+      sx: {
+        borderRadius: 6,
+        color: a.palette.secondary.main,
+        "&.Mui-selected": {
+          color: a.palette.common.white,
+          backgroundColor: a.palette.warning.dark,
+          ":hover": {
+            color: a.palette.common.white,
+            backgroundColor: a.palette.warning.main
+          }
+        },
+        ":hover": {
+          color: a.palette.warning.contrastText,
+          backgroundColor: a.palette.warning.light
+        }
+      },
+      value: "flagged",
+      children: /* @__PURE__ */ e(Ze, { color: "inherit" })
+    }
+  ) });
+}, zt = E(Vt), se = (t, n, i, r = !0, a = "inset") => r ? /* @__PURE__ */ l(d.Fragment, { children: [
+  /* @__PURE__ */ l(G, { disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(H, { sx: { bgcolor: "border.light" }, variant: "rounded", children: t }) }),
+    /* @__PURE__ */ e(
+      B,
+      {
+        primary: n,
+        primaryTypographyProps: { variant: "XSmall" },
+        secondary: i
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(de, { variant: a })
+] }) : null, Wt = ({ transaction: t }) => {
+  const { transactions: n } = I(), { tags: i } = O(), r = d.useMemo(() => {
+    const a = new Map(i.map((o) => [o.guid, o.name]));
+    return t.tags.map((o) => a.get(o)).filter(Boolean).join(" / ");
+  }, [i, t.tags]);
+  return /* @__PURE__ */ l(ue, { sx: { "& .MuiListItem-root": { px: 24, py: 12 } }, children: [
+    se(
+      /* @__PURE__ */ e(
+        Ne,
+        {
+          categoryGuid: t.top_level_category_guid,
+          size: 24,
+          sx: { color: "text.primary" },
+          variant: De.Transparent
+        }
+      ),
+      n.category_title,
+      /* @__PURE__ */ e(x, { bold: !0, variant: "Body", children: t.category ?? n.actions_select_a_category })
+    ),
+    se(
+      /* @__PURE__ */ e(ce, { name: "calendar_month", sx: { color: "text.primary" }, weight: be.Dark }),
+      n.date_title,
+      /* @__PURE__ */ e(x, { bold: !0, variant: "Body", children: Me(Se(t.date), ke.YEAR_MONTH_DAY) })
+    ),
+    se(
+      /* @__PURE__ */ e(ce, { name: "article", sx: { color: "text.primary" }, weight: be.Dark }),
+      n.memo_title,
+      /* @__PURE__ */ e(x, { bold: !0, sx: { overflowWrap: "break-word", whiteSpace: "wrap" }, variant: "Body", children: t.memo ?? n.memo_desc }),
+      !!t.memo,
+      t.tags?.length > 0 ? "inset" : "fullWidth"
+    ),
+    se(
+      /* @__PURE__ */ e(ce, { name: "local_offer", sx: { color: "text.primary" }, weight: be.Dark }),
+      n.tags_title,
+      /* @__PURE__ */ e(x, { bold: !0, variant: "Body", children: t.tags?.length ? r : n.tags_desc }),
+      !!t.tags?.length,
+      "fullWidth"
+    )
+  ] });
+}, Yt = E(Wt), Xt = ({
+  bottomActions: t = ut,
+  canFlagTransaction: n = !0,
+  topActions: i = dt,
+  transaction: r
+}) => {
+  const { onEvent: a } = w(), { isCopyLoaded: o } = Xe(), { userFeatures: s } = je(), c = j(), m = r?.number && r.number.length > 4;
+  if (d.useEffect(
+    () => a(F.TRANSACTION_DETAILS_VIEW, { transaction_guid: r.guid }),
+    []
+  ), !o)
+    return /* @__PURE__ */ e(ct, {});
+  const u = Ve(s, "MX_TXN_DETAILS_VIEW_ONLY"), p = c.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ e(K, { className: "mx-txn-transaction-details", width: "100%", children: r && /* @__PURE__ */ l(v, { children: [
+    /* @__PURE__ */ l(v, { gap: 12, p: 24, children: [
+      /* @__PURE__ */ e(le, { elevation: 2, sx: { width: 64 }, children: /* @__PURE__ */ e(
+        Ae,
+        {
+          categoryGuid: r.top_level_category_guid || "",
+          merchantGuid: r.merchant_guid || "",
+          size: 64
+        }
+      ) }),
+      /* @__PURE__ */ e(Ut, { transaction: r, viewOnly: u }),
+      /* @__PURE__ */ l(v, { direction: "row", justifyContent: "space-between", sx: { minHeight: 44 }, children: [
+        /* @__PURE__ */ l(Y, { color: r.isIncome ? "success.main" : "text.primary", variant: "H1", children: [
+          r.isIncome ? "+" : "",
+          X(r.amount, "0,0.00")
+        ] }),
+        !u && n && /* @__PURE__ */ e(zt, { transaction: r })
+      ] }),
+      /* @__PURE__ */ l(v, { sx: { bgcolor: p, borderRadius: "4px", gap: 4, p: 8 }, children: [
+        /* @__PURE__ */ e(x, { bold: !0, children: `${r.account}
+                ${m ? r.number : "•".repeat(4).concat(r.number ?? "")}` }),
+        /* @__PURE__ */ e(x, { bold: !0, variant: "Tiny", children: r.feed_description })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(le, { square: !0, sx: { boxShadow: "none" }, children: u ? /* @__PURE__ */ e(Yt, { transaction: r }) : /* @__PURE__ */ e(ue, { children: i.map((_, g) => /* @__PURE__ */ l(d.Fragment, { children: [
+      _ === re.Category && /* @__PURE__ */ e(ht, { transaction: r }),
+      _ === re.Date && /* @__PURE__ */ e(yt, { transaction: r }),
+      _ === re.Memo && /* @__PURE__ */ e(Nt, { transaction: r }),
+      _ === re.Tags && /* @__PURE__ */ e(Ft, { transaction: r }),
+      /* @__PURE__ */ e(de, { variant: g < i.length - 1 ? "inset" : "fullWidth" })
+    ] }, _)) }) }),
+    !u && t.length > 0 && /* @__PURE__ */ l(d.Fragment, { children: [
+      /* @__PURE__ */ e(x, { bold: !0, mb: 8, ml: 26, mt: 16, variant: "Body", children: "Actions" }),
+      /* @__PURE__ */ e(le, { square: !0, sx: { boxShadow: "none" }, children: /* @__PURE__ */ l(ue, { children: [
+        t.map((_, g) => /* @__PURE__ */ l(d.Fragment, { children: [
+          _ === ae.MerchantBudget && /* @__PURE__ */ e(gt, { transaction: r }),
+          _ === ae.SplitTransaction && /* @__PURE__ */ e(Lt, { transaction: r }),
+          _ === ae.HideTransaction && /* @__PURE__ */ e(ft, { transaction: r }),
+          _ === ae.MerchantLogo && /* @__PURE__ */ e(xt, { transaction: r }),
+          /* @__PURE__ */ e(de, { variant: g < t.length - 1 ? "inset" : "fullWidth" })
+        ] }, _)),
+        r.is_manual && !r.parent_guid && !r.has_been_split && /* @__PURE__ */ e(Ct, { transaction: r })
+      ] }) })
+    ] })
+  ] }) });
+}, Fr = E(Xt);
+export {
+  ae as B,
+  ht as C,
+  yt as D,
+  Nt as M,
+  Fr as T,
+  Ft as a,
+  re as b,
+  _t as c
+};