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

package/dist/transactions/TransactionWidget.es.js

@@ -0,0 +1,189 @@
+import { buildDynamicCopy as Tt } from "../core/utils/Localization.es.js";
+import { useAccountStore as At, useAppConfig as ht, useEvent as St, useGlobalCopyStore as gt, useGlobalUiStore as yt, useTransactionStore as Dt, useUserStore as bt } from "../common/context/hooks.es.js";
+import { useScreenSize as wt } from "../common/hooks/useScreenSize.es.js";
+import { useWidgetLoadTimer as Nt } from "../common/hooks/useWidgetLoadTimer.es.js";
+import { useAriaLive as Lt } from "../common/hooks/useAriaLive.es.js";
+import v from "../common/components/drawer/Drawer.es.js";
+import { ANALYTICS_EVENTS as s } from "../common/constants/Analytics.es.js";
+import { DEFAULT_TRANSACTION as Ot } from "../core/constants/Transaction.es.js";
+import { exportTransactionsToCSV as Et } from "../core/utils/TransactionUtils.es.js";
+import kt from "../common/components/Loader.es.js";
+import { WidgetContainer as vt } from "../common/components/WidgetContainer.es.js";
+import It from "../common/components/ConnectDrawer.es.js";
+import Rt from "../common/components/SearchBox.es.js";
+import { SkeletonLoader as xt } from "../common/components/SkeletonLoader.es.js";
+import { useTransactionsUiStore as Mt } from "./context/hooks.es.js";
+import Wt from "./components/shared/TransactionList.es.js";
+import Ut from "./components/shared/TransactionTable.es.js";
+import { useCategoryUiStore as Vt } from "../categories/context/hooks.es.js";
+import Bt from "./components/shared/TransactionDetails.es.js";
+import Gt from "./components/shared/transactiondetails/ManualTransactionDetails.es.js";
+import Ft from "./components/transactionwidget/AddAccountModal.es.js";
+import Kt from "./components/transactionwidget/actions/EditCategoryAction.es.js";
+import i from "react";
+import { observer as Pt } from "mobx-react-lite";
+import Ht from "@mui/material/Stack";
+import { endOfMonth as $t } from "date-fns/endOfMonth";
+import { startOfMonth as jt } from "date-fns/startOfMonth";
+import { startOfToday as h } from "date-fns/startOfToday";
+import { jsx as a, jsxs as I } from "react/jsx-runtime";
+import { useTheme as zt } from "@mui/material/styles";
+import S from "@mui/material/Box";
+import { getUnixTime as Xt } from "date-fns/getUnixTime";
+var R = 120, Yt = ({ onBackClick: x, onMenuClick: M, height: g = "100dvh", showInsights: u = !1, sx: W = {} }) => {
+  const { manualAccounts: U, refreshAccounts: V } = At(), { is_mobile_webview: B, clientConfig: G, config: F } = ht(), { setSearchValue: K } = Vt(), { onEvent: r } = St(), { common: y, transactions: o } = gt(), { displayedDateRange: f, isInitialized: c, selectedAccountGuids: D, setDisplayedDate: b } = yt(), { isDesktop: P, isTablet: H } = wt(), l = zt(), { addTransaction: $, filter: j, isTransactionDataLoaded: p, loadTransactionData: z, setFilter: w, sortedTransactions: N, sortedTransactionsWithSplits: X, tags: Y, detailedTransactions: q, updateTransaction: J } = Dt(), { clearExpandedSplits: Q, isAmountValid: Z, manualTransaction: d, searchValue: L, setSearchValue: tt, setShowInsights: at, updateManualTransaction: ot } = Mt(), { userProfile: et } = bt(), [_, e] = i.useState(""), [O, m] = i.useState(""), [nt, C] = i.useState(!1), [it, E] = i.useState(!1), { announce: rt, ariaLive: st } = Lt(), T = G?.transactions?.selected_account_guid;
+  Nt({
+    widgetName: "TransactionWidget",
+    isLoaded: p
+  }), i.useEffect(() => {
+    p || z().finally();
+    const t = jt(h()), Ct = $t(h());
+    b(t, Ct), r(s.TRANSACTIONS_VIEW);
+  }, []), i.useEffect(() => {
+    c && w({
+      accounts: T ? [T] : D,
+      dateRange: {
+        start: f.start,
+        end: f.end
+      },
+      searchTerm: L
+    });
+  }, [
+    c,
+    f,
+    D
+  ]), i.useEffect(() => {
+    at(u);
+  }, [u]), i.useEffect(() => {
+    c && rt(Tt(o.showing_transactions_count, N.length));
+  }, [c, N]);
+  const n = O ? q.find((t) => t.guid === O) : void 0, k = Z && !!d.payee && !!d.account_guid && !!d.category_guid, ct = (t) => {
+    Q(), b(t[0], t[1]);
+  }, lt = (t) => {
+    tt(t), w({
+      ...j,
+      searchTerm: t
+    }), r(s.TRANSACTIONS_CLICK_SEARCH, { search_term: t });
+  }, dt = () => {
+    Et(X, Y), r(s.TRANSACTIONS_CLICK_EXPORT);
+  }, mt = () => {
+    U.length > 0 ? (ot({
+      ...Ot,
+      date: Xt(h()),
+      user_guid: et?.user_guid || ""
+    }), e("addTransaction"), r(s.TRANSACTIONS_CLICK_ADD)) : (C(!0), r(s.TRANSACTIONS_ADD_MANUAL_ACCOUNT_MODAL));
+  }, ut = async () => {
+    k && await $(d), e("");
+  }, ft = () => {
+    C(!1), E(!0);
+  }, pt = async () => {
+    E(!1), await V();
+  }, _t = async () => {
+    n && !n.has_been_viewed && await J({
+      ...n,
+      has_been_viewed: !0
+    }), e("");
+  };
+  if (!c) return /* @__PURE__ */ a(kt, {});
+  const A = [];
+  return !B && (P || H) && A.push({
+    iconName: "open_in_new",
+    label: o.export_csv_btn,
+    onClick: dt
+  }), F.show_connections_widget_in_master && A.push({
+    iconName: "add",
+    label: o.add_transaction_btn,
+    onClick: mt
+  }), /* @__PURE__ */ I(vt, {
+    actions: A,
+    calendarActions: { onRangeChanged: ct },
+    hasDivider: !0,
+    onAccountsFilterClick: () => r(s.ACCOUNTS_CLICK_FILTER),
+    onBackClick: x,
+    onMenuClick: M,
+    showAccountFilter: !T,
+    sx: W,
+    title: o.transactions_title,
+    children: [
+      p ? /* @__PURE__ */ I(Ht, { children: [
+        st,
+        /* @__PURE__ */ a(S, { children: /* @__PURE__ */ a(Rt, {
+          onChange: lt,
+          placeholder: o.action_bar_search_placeholder,
+          searchValue: L
+        }) }),
+        /* @__PURE__ */ a(S, {
+          sx: {
+            [l.breakpoints.down("md")]: { display: "none" },
+            [l.breakpoints.up("md")]: { display: "block" }
+          },
+          children: /* @__PURE__ */ a(Ut, {
+            height: `calc(${g} - ${R}px)`,
+            onCategoryClick: (t) => {
+              m(t), e("category");
+            },
+            onRowClick: (t) => {
+              m(t), e("transaction"), r(s.TRANSACTIONS_CLICK_DETAILS, { transaction_guid: t });
+            }
+          })
+        }),
+        /* @__PURE__ */ a(S, {
+          sx: {
+            [l.breakpoints.down("md")]: { display: "block" },
+            [l.breakpoints.up("md")]: { display: "none" }
+          },
+          children: /* @__PURE__ */ a(Wt, {
+            height: `calc(${g} - ${R}px)`,
+            onClick: (t) => {
+              m(t), e("transaction");
+            },
+            showInsights: u
+          })
+        })
+      ] }) : /* @__PURE__ */ a(xt, {
+        sx: { m: 48 },
+        variant: "list"
+      }),
+      /* @__PURE__ */ a(v, {
+        ariaLabelClose: y.close_aria,
+        isOpen: _ === "transaction" && !!n,
+        onClose: _t,
+        title: o.details_title,
+        children: n && /* @__PURE__ */ a(Bt, { transaction: n })
+      }),
+      n && _ === "category" && /* @__PURE__ */ a(Kt, {
+        onClose: () => {
+          K(""), e(""), m("");
+        },
+        transaction: n
+      }),
+      /* @__PURE__ */ a(v, {
+        ariaLabelClose: y.close_aria,
+        isOpen: _ === "addTransaction",
+        isPrimaryDisabled: !k,
+        onClose: () => e(""),
+        onPrimaryAction: ut,
+        title: o.add_transaction_title,
+        children: /* @__PURE__ */ a(Gt, {})
+      }),
+      /* @__PURE__ */ a(Ft, {
+        copy: { title: o.add_manual_account },
+        isOpen: nt,
+        onClose: () => {
+          C(!1);
+        },
+        onPrimaryAction: ft
+      }),
+      /* @__PURE__ */ a(It, {
+        onClose: pt,
+        showConnectWidget: it,
+        title: o.add_manual_account
+      })
+    ]
+  });
+}, Oa = Pt(Yt);
+export {
+  Oa as default
+};
+
+//# sourceMappingURL=TransactionWidget.es.js.map

package/dist/transactions/TransactionWidget.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionWidget.es.js","names":[],"sources":["../../src/transactions/TransactionWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { getUnixTime } from 'date-fns/getUnixTime'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { DateRange } from '@mui/x-date-pickers-pro'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  Loader,\n  SearchBox,\n  useAccountStore,\n  useAppConfig,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useScreenSize,\n  useTransactionStore,\n  useUserStore,\n  useWidgetLoadTimer,\n  WidgetContainer,\n} from '../common'\nimport { WidgetProps } from '../core'\n\nimport { useTransactionsUiStore } from './context/hooks'\nimport { DEFAULT_TRANSACTION } from '../core/constants/Transaction'\nimport { exportTransactionsToCSV } from '../core/utils/TransactionUtils'\nimport ConnectDrawer from '../common/components/ConnectDrawer'\nimport ManualTransactionDetails from './components/shared/transactiondetails/ManualTransactionDetails'\nimport TransactionDetails from './components/shared/TransactionDetails'\nimport TransactionList from './components/shared/TransactionList'\nimport TransactionTable from './components/shared/TransactionTable'\nimport AddAccountModal from './components/transactionwidget/AddAccountModal'\nimport EditCategoryAction from './components/transactionwidget/actions/EditCategoryAction'\n\nimport { useCategoryUiStore } from '../categories'\nimport { useAriaLive } from '../common/hooks/useAriaLive'\nimport { SkeletonLoader } from '../common/components/SkeletonLoader'\nimport { buildDynamicCopy } from '../core/utils/Localization'\n\nconst HEADER_HEIGHT = 120\n\nenum Drawers {\n  AddTransaction = 'addTransaction',\n  Category = 'category',\n  Transaction = 'transaction',\n}\n\ninterface TransactionWidgetProps extends WidgetProps {\n  height?: string | number\n  showInsights?: boolean\n}\n\nconst TransactionWidget: React.FC<TransactionWidgetProps> = ({\n  onBackClick,\n  onMenuClick,\n  height = '100dvh',\n  showInsights = false,\n  sx = {},\n}) => {\n  const { manualAccounts, refreshAccounts } = useAccountStore()\n  const { is_mobile_webview, clientConfig, config } = useAppConfig()\n  const { setSearchValue: setCategorySearchValue } = useCategoryUiStore()\n  const { onEvent } = useEvent()\n  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()\n  const { displayedDateRange, isInitialized, selectedAccountGuids, setDisplayedDate } =\n    useGlobalUiStore()\n  const { isDesktop, isTablet } = useScreenSize()\n  const theme = useTheme()\n  const {\n    addTransaction,\n    filter,\n    isTransactionDataLoaded,\n    loadTransactionData,\n    setFilter,\n    sortedTransactions,\n    sortedTransactionsWithSplits,\n    tags,\n    detailedTransactions: transactions,\n    updateTransaction,\n  } = useTransactionStore()\n  const {\n    clearExpandedSplits,\n    isAmountValid,\n    manualTransaction,\n    searchValue,\n    setSearchValue,\n    setShowInsights,\n    updateManualTransaction,\n  } = useTransactionsUiStore()\n  const { userProfile } = useUserStore()\n\n  const [drawerOpen, setDrawerOpen] = React.useState('')\n  const [transactionGuid, setTransactionGuid] = React.useState('')\n\n  const [addManualAccountModalOpen, setAddManualAccountModalOpen] = React.useState(false)\n  const [showConnectWidget, setShowConnectWidget] = React.useState(false)\n\n  const { announce, ariaLive } = useAriaLive()\n\n  const selected_account_guid = clientConfig?.transactions?.selected_account_guid\n\n  useWidgetLoadTimer({\n    widgetName: 'TransactionWidget',\n    isLoaded: isTransactionDataLoaded,\n  })\n\n  React.useEffect(() => {\n    if (!isTransactionDataLoaded) {\n      loadTransactionData().finally()\n    }\n\n    // Set the displayed date to the current month\n    const startDate = startOfMonth(startOfToday())\n    const endDate = endOfMonth(startOfToday())\n    setDisplayedDate(startDate, endDate)\n\n    onEvent(ANALYTICS_EVENTS.TRANSACTIONS_VIEW)\n  }, [])\n\n  React.useEffect(() => {\n    if (isInitialized) {\n      // Update the filter whenever the display date or account filter changes\n      setFilter({\n        accounts: selected_account_guid ? [selected_account_guid] : selectedAccountGuids,\n        dateRange: { start: displayedDateRange.start, end: displayedDateRange.end },\n        searchTerm: searchValue,\n      })\n    }\n  }, [isInitialized, displayedDateRange, selectedAccountGuids])\n\n  React.useEffect(() => {\n    setShowInsights(showInsights)\n  }, [showInsights])\n\n  React.useEffect(() => {\n    if (isInitialized) {\n      announce(\n        buildDynamicCopy(copy.showing_transactions_count, sortedTransactions.length) as string,\n      )\n    }\n  }, [isInitialized, sortedTransactions])\n\n  const transaction = transactionGuid\n    ? transactions.find((transaction) => transaction.guid === transactionGuid)\n    : undefined\n\n  const isTransactionValid =\n    isAmountValid &&\n    Boolean(manualTransaction.payee) &&\n    Boolean(manualTransaction.account_guid) &&\n    Boolean(manualTransaction.category_guid)\n\n  const handleDateChanged = (range: DateRange<Date>) => {\n    clearExpandedSplits()\n    setDisplayedDate(range[0] as Date, range[1] as Date)\n  }\n\n  const handleSearch = (searchTerm: string) => {\n    setSearchValue(searchTerm)\n    setFilter({\n      ...filter,\n      searchTerm,\n    })\n    onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_SEARCH, { search_term: searchTerm })\n  }\n\n  const handleExportCsvClick = () => {\n    exportTransactionsToCSV(sortedTransactionsWithSplits, tags)\n    onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_EXPORT)\n  }\n\n  const handleAddTransactionClick = () => {\n    if (manualAccounts.length > 0) {\n      updateManualTransaction({\n        ...DEFAULT_TRANSACTION,\n        date: getUnixTime(startOfToday()),\n        user_guid: userProfile?.user_guid || '',\n      })\n\n      setDrawerOpen(Drawers.AddTransaction)\n      onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_ADD)\n    } else {\n      setAddManualAccountModalOpen(true)\n      onEvent(ANALYTICS_EVENTS.TRANSACTIONS_ADD_MANUAL_ACCOUNT_MODAL)\n    }\n  }\n\n  const handleAddTransaction = async () => {\n    if (isTransactionValid) {\n      await addTransaction(manualTransaction)\n    }\n\n    setDrawerOpen('')\n  }\n\n  const handleAddManualAccountClick = () => {\n    setAddManualAccountModalOpen(false)\n    setShowConnectWidget(true)\n  }\n\n  const handleConnectWidgetClose = async () => {\n    setShowConnectWidget(false)\n    await refreshAccounts()\n  }\n\n  const handleTransactionDrawerClose = async () => {\n    // mark transaction as viewed\n    if (transaction && !transaction.has_been_viewed) {\n      await updateTransaction({ ...transaction, has_been_viewed: true })\n    }\n    setDrawerOpen('')\n  }\n\n  if (!isInitialized) {\n    return <Loader />\n  }\n\n  const actions = []\n\n  if (!is_mobile_webview && (isDesktop || isTablet)) {\n    actions.push({\n      iconName: 'open_in_new',\n      label: copy.export_csv_btn,\n      onClick: handleExportCsvClick,\n    })\n  }\n\n  if (config.show_connections_widget_in_master) {\n    actions.push({\n      iconName: 'add',\n      label: copy.add_transaction_btn,\n      onClick: handleAddTransactionClick,\n    })\n  }\n\n  return (\n    <WidgetContainer\n      actions={actions}\n      calendarActions={{\n        onRangeChanged: handleDateChanged,\n      }}\n      hasDivider={true}\n      onAccountsFilterClick={() => onEvent(ANALYTICS_EVENTS.ACCOUNTS_CLICK_FILTER)}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      showAccountFilter={!selected_account_guid}\n      sx={sx}\n      title={copy.transactions_title}\n    >\n      {!isTransactionDataLoaded ? (\n        <SkeletonLoader sx={{ m: 48 }} variant=\"list\" />\n      ) : (\n        <Stack>\n          {ariaLive}\n          <Box>\n            <SearchBox\n              onChange={handleSearch}\n              placeholder={copy.action_bar_search_placeholder}\n              searchValue={searchValue}\n            />\n          </Box>\n\n          <Box\n            sx={{\n              [theme.breakpoints.down('md')]: { display: 'none' },\n              [theme.breakpoints.up('md')]: { display: 'block' },\n            }}\n          >\n            <TransactionTable\n              height={`calc(${height} - ${HEADER_HEIGHT}px)`}\n              onCategoryClick={(guid: string) => {\n                setTransactionGuid(guid)\n                setDrawerOpen(Drawers.Category)\n              }}\n              onRowClick={(guid: string) => {\n                setTransactionGuid(guid)\n                setDrawerOpen(Drawers.Transaction)\n                onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_DETAILS, { transaction_guid: guid })\n              }}\n            />\n          </Box>\n          <Box\n            sx={{\n              [theme.breakpoints.down('md')]: { display: 'block' },\n              [theme.breakpoints.up('md')]: { display: 'none' },\n            }}\n          >\n            <TransactionList\n              height={`calc(${height} - ${HEADER_HEIGHT}px)`}\n              onClick={(guid: string) => {\n                setTransactionGuid(guid)\n                setDrawerOpen(Drawers.Transaction)\n              }}\n              showInsights={showInsights}\n            />\n          </Box>\n        </Stack>\n      )}\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={drawerOpen === Drawers.Transaction && Boolean(transaction)}\n        onClose={handleTransactionDrawerClose}\n        title={copy.details_title}\n      >\n        {transaction && <TransactionDetails transaction={transaction} />}\n      </Drawer>\n      {transaction && drawerOpen === Drawers.Category && (\n        <EditCategoryAction\n          onClose={() => {\n            setCategorySearchValue('')\n            setDrawerOpen('')\n            setTransactionGuid('')\n          }}\n          transaction={transaction}\n        />\n      )}\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={drawerOpen === Drawers.AddTransaction}\n        isPrimaryDisabled={!isTransactionValid}\n        onClose={() => setDrawerOpen('')}\n        onPrimaryAction={handleAddTransaction}\n        title={copy.add_transaction_title}\n      >\n        <ManualTransactionDetails />\n      </Drawer>\n      <AddAccountModal\n        copy={{ title: copy.add_manual_account }}\n        isOpen={addManualAccountModalOpen}\n        onClose={() => {\n          setAddManualAccountModalOpen(false)\n        }}\n        onPrimaryAction={handleAddManualAccountClick}\n      />\n      <ConnectDrawer\n        onClose={handleConnectWidgetClose}\n        showConnectWidget={showConnectWidget}\n        title={copy.add_manual_account}\n      />\n    </WidgetContainer>\n  )\n}\n\nexport default observer(TransactionWidget)\n"],"mappings":"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"}

package/dist/transactions/components/shared/TransactionDetails.es.js

@@ -0,0 +1,255 @@
+import { buildDynamicCopy as N } from "../../../core/utils/Localization.es.js";
+import { DATE_FORMATS_INTL as te, formatDate as re } from "../../../core/constants/DateFormats.es.js";
+import { useCategoryStore as oe, useEvent as ie, useGlobalCopyStore as ae, useGlobalUiStore as ne, useTransactionStore as de, useUserStore as le } from "../../../common/context/hooks.es.js";
+import { ANALYTICS_EVENTS as se } from "../../../common/constants/Analytics.es.js";
+import { isFeatureEnabled as me } from "../../../core/utils/UserUtils.es.js";
+import { formatCurrency as F } from "../../../core/utils/NumberFormatting.es.js";
+import { fromUnixUTC as ce } from "../../../core/utils/DateUtil.es.js";
+import ue from "../../../common/components/Loader.es.js";
+import { BottomActions as m, DEFAULT_BOTTOM_ACTIONS as ge, DEFAULT_TOP_ACTIONS as pe, TopActions as h } from "../../constants/Actions.es.js";
+import he from "../../../insights/components/shared/ChartTransactionWithDrillDown.es.js";
+import { EmbeddedCard as fe } from "../../../insights/components/shared/InsightsCard/EmbeddedCard.es.js";
+import { AddMerchantBudgetAction as _e } from "./transactiondetails/actions/AddMerchantBudgetAction.es.js";
+import Te from "./transactiondetails/actions/CategoryAction.es.js";
+import Se from "./transactiondetails/actions/DateAction.es.js";
+import ye from "./transactiondetails/actions/DeleteAction.es.js";
+import be from "./transactiondetails/actions/DeleteLogoAction.es.js";
+import De from "./transactiondetails/actions/ExcludeAction.es.js";
+import Ae from "./transactiondetails/actions/MemoAction.es.js";
+import Ce from "./transactiondetails/actions/SplitAction.es.js";
+import ve from "./transactiondetails/actions/TagsAction.es.js";
+import xe from "./transactiondetails/Description.es.js";
+import Ie from "./transactiondetails/FlagTransaction.es.js";
+import we from "./transactiondetails/TransactionDetailsView.es.js";
+import { getEmbeddedInstanceSlotByBeatTemplates as Le } from "./getEmbeddedInstanceSlotByBeatTemplates.es.js";
+import a, { useMemo as G } from "react";
+import { observer as Me } from "mobx-react-lite";
+import f from "@mui/material/Stack";
+import { MerchantLogo as P, P as Ee, Text as b } from "@mxenabled/mxui";
+import { endOfMonth as Oe } from "date-fns/endOfMonth";
+import { isBefore as Be } from "date-fns/isBefore";
+import { startOfMonth as U } from "date-fns/startOfMonth";
+import D from "@mui/material/Paper";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useTheme as Ne } from "@mui/material/styles";
+import Fe from "@mui/material/Box";
+import k from "@mui/material/Divider";
+import H from "@mui/material/List";
+import Ge from "@mui/material/Alert";
+import Pe from "@mui/material/Snackbar";
+var Ue = ({ bottomActions: _ = ge, canFlagTransaction: V = !0, topActions: A = pe, transaction: e }) => {
+  const { onEvent: W } = ie(), { isCopyLoaded: R } = ne(), { userFeatures: j } = le(), { accounts: z, common: q, insights_feed: d } = ae(), { detailedCategories: C } = oe(), { alert: v, associatedBeats: x, detailedTransactions: I, cachedStartDate: w, loadEmbeddedInstanceTransactions: X, setAlert: L } = de(), [Y, M] = a.useState(!1), [E, O] = a.useState(!1), [$, J] = a.useState(!1), K = Ne(), Q = e?.number && e.number.length > 4, l = a.useMemo(() => x.find((r) => r.associated_transaction_guid === e.guid), [x, e]), o = Le(q, l), [s, T] = a.useState(o ? o.dataSeries.length - 1 : 0);
+  a.useEffect(() => W(se.TRANSACTION_DETAILS_VIEW, { transaction_guid: e.guid }), []), a.useEffect(() => {
+    if (!o || o.dataSeries.length === 0) return;
+    const { date: r } = o.dataSeries[s], i = U(r);
+    Be(i, w) && (O(!0), X(i).finally(() => {
+      O(!1);
+    }));
+  }, [
+    s,
+    o,
+    w
+  ]);
+  const S = _.includes(m.MerchantBudget) && !e?.merchant_guid ? _.filter((r) => r !== m.MerchantBudget) : _, y = G(() => {
+    if (o) {
+      const r = C.find((p) => p.guid === e.top_level_category_guid), i = l?.payload?.average_amount ?? 0, u = e.amount;
+      let g = d.general.increased_text;
+      return u - i < 0 && (g = d.general.decreased_text), {
+        category: r,
+        percentageAmount: i === 0 ? 0 : Math.round(Math.abs(u - i) / i * 100),
+        changetype: g
+      };
+    }
+    return null;
+  }, [o, C]), Z = G(() => {
+    if (!o?.dataSeries?.length) return [];
+    const { guid: r, date: i } = o.dataSeries[s], u = U(i), g = Oe(i);
+    return I.filter((p) => {
+      const B = ce(p.date);
+      return B >= u && B <= g && p.guid === r;
+    });
+  }, [
+    s,
+    o,
+    I,
+    E
+  ]);
+  if (!R) return /* @__PURE__ */ t(ue, {});
+  const c = me(j, "MX_TXN_DETAILS_VIEW_ONLY"), ee = K.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ n(Fe, {
+    className: "mx-txn-transaction-details",
+    width: "100%",
+    children: [
+      e && /* @__PURE__ */ n(f, { children: [
+        /* @__PURE__ */ n(f, {
+          gap: 12,
+          p: 24,
+          children: [
+            /* @__PURE__ */ t(D, {
+              elevation: 2,
+              sx: { width: 64 },
+              children: /* @__PURE__ */ t(P, {
+                categoryGuid: e.top_level_category_guid || "",
+                merchantGuid: e.merchant_guid || "",
+                size: 64
+              })
+            }),
+            /* @__PURE__ */ t(xe, {
+              transaction: e,
+              viewOnly: c
+            }),
+            /* @__PURE__ */ n(f, {
+              direction: "row",
+              justifyContent: "space-between",
+              sx: { minHeight: 44 },
+              children: [/* @__PURE__ */ n(Ee, {
+                color: e.isIncome ? "success.main" : "text.primary",
+                variant: "h1",
+                children: [e.isIncome ? "+" : "", F(e.amount, "0,0.00")]
+              }), !c && V && /* @__PURE__ */ t(Ie, { transaction: e })]
+            }),
+            o?.instanceSlot && /* @__PURE__ */ t(fe, {
+              callToAction: o.callToAction,
+              description: N(d.general.embedded_description, y.changetype, /* @__PURE__ */ t("strong", { children: y.percentageAmount })),
+              instanceSlot: o.instanceSlot,
+              onCtaClick: () => {
+                M(!0);
+              },
+              title: l.html_micro_title
+            }),
+            /* @__PURE__ */ n(f, {
+              sx: {
+                bgcolor: ee,
+                borderRadius: "4px",
+                gap: 4,
+                p: 8
+              },
+              children: [/* @__PURE__ */ t(b, {
+                bold: !0,
+                children: `${e.account}
+                ${Q ? e.number : "•".repeat(4).concat(e.number ?? "")}`
+              }), /* @__PURE__ */ t(b, {
+                bold: !0,
+                truncate: !0,
+                variant: "tiny",
+                children: e.feed_description
+              })]
+            })
+          ]
+        }),
+        /* @__PURE__ */ t(D, {
+          square: !0,
+          sx: { boxShadow: "none" },
+          children: c ? /* @__PURE__ */ t(we, { transaction: e }) : /* @__PURE__ */ t(H, { children: A.map((r, i) => /* @__PURE__ */ n(a.Fragment, { children: [
+            r === h.Category && /* @__PURE__ */ t(Te, { transaction: e }),
+            r === h.Date && /* @__PURE__ */ t(Se, { transaction: e }),
+            r === h.Memo && /* @__PURE__ */ t(Ae, { transaction: e }),
+            r === h.Tags && /* @__PURE__ */ t(ve, { transaction: e }),
+            /* @__PURE__ */ t(k, {
+              component: "li",
+              variant: i < A.length - 1 ? "inset" : "fullWidth"
+            })
+          ] }, r)) })
+        }),
+        !c && S.length > 0 && /* @__PURE__ */ n(a.Fragment, { children: [/* @__PURE__ */ t(b, {
+          bold: !0,
+          mb: 8,
+          ml: 26,
+          mt: 16,
+          variant: "body1",
+          children: z.actions
+        }), /* @__PURE__ */ t(D, {
+          square: !0,
+          sx: { boxShadow: "none" },
+          children: /* @__PURE__ */ n(H, { children: [S.map((r, i) => /* @__PURE__ */ n(a.Fragment, { children: [
+            r === m.MerchantBudget && /* @__PURE__ */ t(_e, { transaction: e }),
+            r === m.SplitTransaction && /* @__PURE__ */ t(Ce, { transaction: e }),
+            r === m.HideTransaction && /* @__PURE__ */ t(De, { transaction: e }),
+            r === m.MerchantLogo && /* @__PURE__ */ t(be, { transaction: e }),
+            /* @__PURE__ */ t(k, {
+              component: "li",
+              variant: i < S.length - 1 ? "inset" : "fullWidth"
+            })
+          ] }, r)), e.is_manual && !e.parent_guid && !e.has_been_split && /* @__PURE__ */ t(ye, { transaction: e })] })
+        })] })
+      ] }),
+      l && o && /* @__PURE__ */ t(he, {
+        ariaLabel: re(o?.dataSeries[s]?.date, te.MONTH),
+        barChartProps: {
+          amounts: {
+            average: l.payload.average_amount,
+            formattedAverage: F(l.payload.average_amount, "0,0")
+          },
+          color: y.category?.color || "",
+          data: o.chartData,
+          margin: {
+            bottom: 10,
+            left: 24,
+            right: 24,
+            top: 20
+          },
+          monthlyAmountLabel: d.general.monthly_amount,
+          onBarClick: (r) => {
+            T(r);
+          },
+          trendAmountLabel: d.general.trend,
+          legendPosition: "top"
+        },
+        beat: {
+          heading: l.html_title,
+          subHeading: {
+            category_guid: e.category_guid ?? "",
+            merchant_guid: e.merchant_guid ?? "",
+            description: e.description ?? ""
+          }
+        },
+        data: o.chartData,
+        defaultSelectedIndex: s,
+        icon: /* @__PURE__ */ t(P, {
+          alt: e.description ?? "",
+          categoryGuid: e.category_guid ?? "",
+          merchantGuid: e.merchant_guid ?? "",
+          size: 16
+        }),
+        isOpen: Y,
+        onClose: () => {
+          M(!1), T(o.dataSeries.length - 1);
+        },
+        onTabChange: (r) => {
+          T(r);
+        },
+        tipSection: $ ? void 0 : {
+          message: N(d.general.tip_section_message, /* @__PURE__ */ t("strong", { children: d.general.tip_section_title }), /* @__PURE__ */ t("strong", { children: l.primary_transaction?.description })),
+          onDismiss: () => J(!0)
+        },
+        title: d.general.transaction_history_title,
+        transactionListProps: {
+          showLoader: E,
+          showInsights: !0,
+          transaction: Z
+        }
+      }),
+      /* @__PURE__ */ t(Pe, {
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        autoHideDuration: 3500,
+        onClose: () => L(""),
+        open: !!v,
+        children: /* @__PURE__ */ t(Ge, {
+          closeText: "",
+          onClose: () => L(""),
+          severity: "success",
+          variant: "filled",
+          children: v
+        })
+      })
+    ]
+  });
+}, Ct = Me(Ue);
+export {
+  Ct as default
+};
+
+//# sourceMappingURL=TransactionDetails.es.js.map

package/dist/transactions/components/shared/TransactionDetails.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionDetails.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionDetails.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Paper from '@mui/material/Paper'\nimport Snackbar from '@mui/material/Snackbar'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\n\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport {\n  ANALYTICS_EVENTS,\n  Loader,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n  useUserStore,\n} from '../../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Transaction } from '../../../core'\nimport { fromUnixUTC } from '../../../core/utils/DateUtil'\nimport { isFeatureEnabled } from '../../../core/utils/UserUtils'\nimport { ChartTransactionWithDrillDown, EmbeddedCard } from '../../../insights'\n\nimport {\n  BottomActions,\n  DEFAULT_BOTTOM_ACTIONS,\n  DEFAULT_TOP_ACTIONS,\n  TopActions,\n} from '../../constants/Actions'\n\nimport {\n  AddMerchantBudgetAction,\n  CategoryAction,\n  DateAction,\n  DeleteAction,\n  DeleteLogoAction,\n  ExcludeAction,\n  MemoAction,\n  SplitAction,\n  TagsAction,\n} from './transactiondetails/actions'\nimport Description from './transactiondetails/Description'\nimport FlagTransaction from './transactiondetails/FlagTransaction'\nimport TransactionDetailsView from './transactiondetails/TransactionDetailsView'\nimport { getEmbeddedInstanceSlotByBeatTemplates } from './getEmbeddedInstanceSlotByBeatTemplates'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\nexport interface TransactionDetailsProps {\n  bottomActions?: BottomActions[]\n  canFlagTransaction?: boolean\n  topActions?: TopActions[]\n  transaction: Transaction\n}\n\nconst TransactionDetails: React.FC<TransactionDetailsProps> = ({\n  bottomActions = DEFAULT_BOTTOM_ACTIONS,\n  canFlagTransaction = true,\n  topActions = DEFAULT_TOP_ACTIONS,\n  transaction,\n}) => {\n  const { onEvent } = useEvent()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { userFeatures } = useUserStore()\n  const { accounts: copy, common: commonCopy, insights_feed: insightsCopy } = useGlobalCopyStore()\n\n  const { detailedCategories } = useCategoryStore()\n  const {\n    alert,\n    associatedBeats,\n    detailedTransactions,\n    cachedStartDate,\n    loadEmbeddedInstanceTransactions,\n    setAlert,\n  } = useTransactionStore()\n\n  const [showTranscationDrilldownDrawer, setShowTransactionDrillDownDrawer] = React.useState(false)\n\n  const [isLoading, setIsLoading] = React.useState(false)\n  const [closeTipSection, setCloseTipSection] = React.useState(false)\n  const theme = useTheme()\n\n  const showFullNumber = transaction?.number && transaction.number.length > 4\n\n  const beat = React.useMemo(() => {\n    return associatedBeats.find((beat) => beat.associated_transaction_guid === transaction.guid)\n  }, [associatedBeats, transaction])\n\n  const embeddedData = getEmbeddedInstanceSlotByBeatTemplates(commonCopy, beat)\n\n  const [selectedTabIndex, setSelectedTabIndex] = React.useState(\n    embeddedData ? embeddedData.dataSeries.length - 1 : 0,\n  )\n\n  React.useEffect(\n    () =>\n      onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_VIEW, { transaction_guid: transaction.guid }),\n    [],\n  )\n\n  React.useEffect(() => {\n    if (!embeddedData || embeddedData.dataSeries.length === 0) return\n\n    const { date: selectedSeriesItemDate } = embeddedData.dataSeries[selectedTabIndex]\n\n    const start = startOfMonth(selectedSeriesItemDate)\n\n    if (isBefore(start, cachedStartDate)) {\n      setIsLoading(true)\n      loadEmbeddedInstanceTransactions(start).finally(() => {\n        setIsLoading(false)\n      })\n    }\n  }, [selectedTabIndex, embeddedData, cachedStartDate])\n\n  //if merchant_guid is null then no need to show the MerchantBudget action.\n  const updatedBottomActions =\n    bottomActions.includes(BottomActions.MerchantBudget) && !transaction?.merchant_guid\n      ? bottomActions.filter((action) => action !== BottomActions.MerchantBudget)\n      : bottomActions\n\n  const embeddedCardDataCategory = useMemo(() => {\n    if (embeddedData) {\n      const category = detailedCategories.find(\n        (cat) => cat.guid === transaction.top_level_category_guid,\n      )\n      const mean = beat?.payload?.average_amount ?? 0\n      const currentAmount = transaction.amount\n\n      let changetype = insightsCopy.general.increased_text\n      if (currentAmount - mean < 0) {\n        changetype = insightsCopy.general.decreased_text\n      }\n      const percentageAmount =\n        mean === 0 ? 0 : Math.round((Math.abs(currentAmount - mean) / mean) * 100)\n\n      return { category, percentageAmount, changetype }\n    }\n    return null\n  }, [embeddedData, detailedCategories])\n\n  const filteredTransactions = useMemo(() => {\n    if (!embeddedData?.dataSeries?.length) {\n      return []\n    }\n\n    const { guid: selectedSeriesItemGuid, date: selectedSeriesItemDate } =\n      embeddedData.dataSeries[selectedTabIndex]\n\n    const start = startOfMonth(selectedSeriesItemDate)\n    const end = endOfMonth(selectedSeriesItemDate)\n\n    return detailedTransactions.filter((t) => {\n      const transactionDate = fromUnixUTC(t.date)\n      return transactionDate >= start && transactionDate <= end && t.guid === selectedSeriesItemGuid\n    })\n  }, [selectedTabIndex, embeddedData, detailedTransactions, isLoading])\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  const shouldShowViewOnlyMode = isFeatureEnabled(userFeatures, 'MX_TXN_DETAILS_VIEW_ONLY')\n\n  const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n  return (\n    <Box className=\"mx-txn-transaction-details\" width=\"100%\">\n      {transaction && (\n        <Stack>\n          <Stack gap={12} p={24}>\n            <Paper elevation={2} sx={{ width: 64 }}>\n              <MerchantLogo\n                categoryGuid={transaction.top_level_category_guid || ''}\n                merchantGuid={transaction.merchant_guid || ''}\n                size={64}\n              />\n            </Paper>\n\n            <Description transaction={transaction} viewOnly={shouldShowViewOnlyMode} />\n\n            <Stack direction=\"row\" justifyContent=\"space-between\" sx={{ minHeight: 44 }}>\n              <P color={transaction.isIncome ? 'success.main' : 'text.primary'} variant=\"h1\">\n                {transaction.isIncome ? '+' : ''}\n                {formatCurrency(transaction.amount, '0,0.00')}\n              </P>\n              {!shouldShowViewOnlyMode && canFlagTransaction && (\n                <FlagTransaction transaction={transaction} />\n              )}\n            </Stack>\n\n            {embeddedData?.instanceSlot && (\n              <EmbeddedCard\n                callToAction={embeddedData.callToAction}\n                description={\n                  buildDynamicCopy(\n                    insightsCopy.general.embedded_description,\n                    embeddedCardDataCategory!.changetype,\n                    <strong>{embeddedCardDataCategory!.percentageAmount}</strong>,\n                  ) as string\n                }\n                instanceSlot={embeddedData.instanceSlot}\n                onCtaClick={() => {\n                  setShowTransactionDrillDownDrawer(true)\n                }}\n                title={beat!.html_micro_title!}\n              />\n            )}\n            <Stack sx={{ bgcolor: bgColor, borderRadius: '4px', gap: 4, p: 8 }}>\n              <Text bold={true}>\n                {`${transaction.account}\n                ${\n                  showFullNumber\n                    ? transaction.number\n                    : '\\u2022'.repeat(4).concat(transaction.number ?? '')\n                }`}\n              </Text>\n              <Text bold={true} truncate={true} variant=\"tiny\">\n                {transaction.feed_description}\n              </Text>\n            </Stack>\n          </Stack>\n\n          <Paper square={true} sx={{ boxShadow: 'none' }}>\n            {shouldShowViewOnlyMode ? (\n              <TransactionDetailsView transaction={transaction} />\n            ) : (\n              <List>\n                {topActions.map((action, index) => (\n                  <React.Fragment key={action}>\n                    {action === TopActions.Category && <CategoryAction transaction={transaction} />}\n                    {action === TopActions.Date && <DateAction transaction={transaction} />}\n                    {action === TopActions.Memo && <MemoAction transaction={transaction} />}\n                    {action === TopActions.Tags && <TagsAction transaction={transaction} />}\n                    <Divider\n                      component=\"li\"\n                      variant={index < topActions.length - 1 ? 'inset' : 'fullWidth'}\n                    />\n                  </React.Fragment>\n                ))}\n              </List>\n            )}\n          </Paper>\n\n          {!shouldShowViewOnlyMode && updatedBottomActions.length > 0 && (\n            <React.Fragment>\n              <Text bold={true} mb={8} ml={26} mt={16} variant=\"body1\">\n                {copy.actions}\n              </Text>\n\n              <Paper square={true} sx={{ boxShadow: 'none' }}>\n                <List>\n                  {updatedBottomActions.map((action, index) => (\n                    <React.Fragment key={action}>\n                      {action === BottomActions.MerchantBudget && (\n                        <AddMerchantBudgetAction transaction={transaction} />\n                      )}\n                      {action === BottomActions.SplitTransaction && (\n                        <SplitAction transaction={transaction} />\n                      )}\n                      {action === BottomActions.HideTransaction && (\n                        <ExcludeAction transaction={transaction} />\n                      )}\n                      {action === BottomActions.MerchantLogo && (\n                        <DeleteLogoAction transaction={transaction} />\n                      )}\n                      <Divider\n                        component=\"li\"\n                        variant={index < updatedBottomActions.length - 1 ? 'inset' : 'fullWidth'}\n                      />\n                    </React.Fragment>\n                  ))}\n\n                  {/*\n                Show DeleteAction only if:\n                - The transaction is manual\n                - The transaction is NOT a parent transaction (no parent_guid)\n                - The transaction has NOT been split (has_been_split is false)\n                \n                This ensures delete is hidden for parent or split transactions.\n              */}\n                  {transaction.is_manual &&\n                    !transaction.parent_guid &&\n                    !transaction.has_been_split && <DeleteAction transaction={transaction} />}\n                </List>\n              </Paper>\n            </React.Fragment>\n          )}\n        </Stack>\n      )}\n      {beat && embeddedData && (\n        <ChartTransactionWithDrillDown\n          ariaLabel={formatDate(\n            embeddedData?.dataSeries[selectedTabIndex]?.date,\n            DATE_FORMATS_INTL.MONTH,\n          )}\n          barChartProps={{\n            amounts: {\n              average: beat.payload.average_amount,\n              formattedAverage: formatCurrency(beat.payload.average_amount, '0,0'),\n            },\n            color: embeddedCardDataCategory!.category?.color || '',\n            data: embeddedData.chartData,\n            margin: { bottom: 10, left: 24, right: 24, top: 20 },\n            monthlyAmountLabel: insightsCopy.general.monthly_amount,\n            onBarClick: (index) => {\n              setSelectedTabIndex(index)\n            },\n            trendAmountLabel: insightsCopy.general.trend,\n            legendPosition: 'top',\n          }}\n          beat={{\n            heading: beat.html_title,\n            subHeading: {\n              category_guid: transaction.category_guid ?? '',\n              merchant_guid: transaction.merchant_guid ?? '',\n              description: transaction.description ?? '',\n            },\n          }}\n          data={embeddedData.chartData}\n          defaultSelectedIndex={selectedTabIndex}\n          icon={\n            <MerchantLogo\n              alt={transaction.description ?? ''}\n              categoryGuid={transaction.category_guid ?? ''}\n              merchantGuid={transaction.merchant_guid ?? ''}\n              size={16}\n            />\n          }\n          isOpen={showTranscationDrilldownDrawer}\n          onClose={() => {\n            setShowTransactionDrillDownDrawer(false)\n            setSelectedTabIndex(embeddedData!.dataSeries.length - 1)\n          }}\n          onTabChange={(index: number) => {\n            setSelectedTabIndex(index)\n          }}\n          tipSection={\n            !closeTipSection\n              ? {\n                  message: buildDynamicCopy(\n                    insightsCopy.general.tip_section_message,\n                    <strong>{insightsCopy.general.tip_section_title}</strong>,\n                    <strong>{beat.primary_transaction?.description}</strong>,\n                  ) as string,\n                  onDismiss: () => setCloseTipSection(true),\n                }\n              : undefined\n          }\n          title={insightsCopy.general.transaction_history_title}\n          transactionListProps={{\n            showLoader: isLoading,\n            showInsights: true,\n            transaction: filteredTransactions,\n          }}\n        />\n      )}\n      <Snackbar\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        autoHideDuration={3500}\n        onClose={() => setAlert('')}\n        open={Boolean(alert)}\n      >\n        <Alert closeText=\"\" onClose={() => setAlert('')} severity=\"success\" variant=\"filled\">\n          {alert}\n        </Alert>\n      </Snackbar>\n    </Box>\n  )\n}\n\nexport default observer(TransactionDetails)\n"],"mappings":"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"}

package/dist/transactions/components/shared/TransactionList.es.js

@@ -0,0 +1,92 @@
+import { useEvent as z, useTransactionStore as N } from "../../../common/context/hooks.es.js";
+import { ANALYTICS_EVENTS as O } from "../../../common/constants/Analytics.es.js";
+import { fromUnixUTCToDayOfWeekAndDate as H } from "../../../core/utils/DateUtil.es.js";
+import U from "../../../common/components/Loader.es.js";
+import { useTransactionsUiStore as k } from "../../context/hooks.es.js";
+import W from "./transactionlist/TransactionRow.es.js";
+import j from "../../../common/components/SubheaderRow.es.js";
+import w from "./transactionlist/ZeroState.es.js";
+import { hasInsetBorder as B, shouldShowDate as T } from "../../utils/Transactions.es.js";
+import i from "react";
+import { observer as G } from "mobx-react-lite";
+import { jsx as o, jsxs as S } from "react/jsx-runtime";
+import m from "@mui/material/Box";
+import Y from "@mui/material/Divider";
+import y from "@mui/material/List";
+import { useVirtualizer as K } from "@tanstack/react-virtual";
+var _ = 65, v = 32, M = ({ bgcolor: x, filter: u, height: E = "calc(100dvh - 36px)", loader: I = /* @__PURE__ */ o(U, {
+  label: "Loading",
+  size: 40
+}), onClick: f, showInsights: d = !1, showLoader: s = !1, transaction: p, width: g = "100%", zeroState: A = /* @__PURE__ */ o(w, {}) }) => {
+  const { isLoading: l, sortedTransactions: c } = N(), e = i.useMemo(() => {
+    const t = u ? c.filter(u) : c;
+    return p ?? t;
+  }, [c, p]), { clearExpandedSplits: C, setShowInsights: R, toggleSplit: b } = k(), { onEvent: D } = z(), L = (t) => {
+    const r = e.find((a) => a.guid === t);
+    if (r?.has_been_split) {
+      b(r.guid);
+      return;
+    }
+    D(O.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
+      account_guid: r?.account_guid,
+      transaction_guid: t
+    }), f?.(t);
+  }, h = i.useRef(null), n = K({
+    count: e.length,
+    getScrollElement: () => h.current,
+    estimateSize: (t) => _ + (T(t, e) ? v : 0),
+    overscan: 5
+  });
+  return i.useEffect(() => n.measure(), [e]), i.useEffect(() => R(d), [d]), i.useEffect(() => () => C(), []), /* @__PURE__ */ o(y, {
+    component: "div",
+    role: "list",
+    sx: { width: g },
+    children: /* @__PURE__ */ o(m, {
+      height: E,
+      overflow: "auto",
+      ref: h,
+      role: "presentation",
+      width: g,
+      children: /* @__PURE__ */ S(m, {
+        height: n.getVirtualItems().length === 0 ? "auto" : n.getTotalSize(),
+        position: "relative",
+        role: "presentation",
+        width: "100%",
+        children: [
+          (l || s) && I,
+          !l && !s && n.getVirtualItems().length === 0 && A,
+          !l && !s && n.getVirtualItems().length > 0 && n.getVirtualItems().map((t) => {
+            const r = e[t.index], a = T(t.index, e), V = B(t.index, e);
+            return /* @__PURE__ */ S(m, {
+              role: "listitem",
+              sx: {
+                height: _ + (a ? v : 0),
+                position: "absolute",
+                transform: `translateY(${t.start}px)`,
+                width: "100%",
+                bgcolor: "background.paper"
+              },
+              children: [
+                a && /* @__PURE__ */ o(j, {
+                  bgcolor: x,
+                  children: H(r.date)
+                }),
+                /* @__PURE__ */ o(W, {
+                  component: "div",
+                  ...f && { onClick: L },
+                  transaction: r
+                }),
+                /* @__PURE__ */ o(Y, { sx: { ml: V ? 68 : 0 } })
+              ]
+            }, r.guid);
+          })
+        ]
+      })
+    })
+  });
+}, lt = G(M);
+export {
+  lt as default
+};
+
+//# sourceMappingURL=TransactionList.es.js.map

package/dist/transactions/components/shared/TransactionList.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionList.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionList.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { useVirtualizer } from '@tanstack/react-virtual'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\n\nimport { ANALYTICS_EVENTS, Loader, useEvent } from '../../../common'\nimport { type Transaction } from '../../../core'\n\nimport { useTransactionsUiStore } from '../../context/hooks'\nimport { useTransactionStore } from '../../../common'\n\nimport SubheaderRow from '../../../common/components/SubheaderRow'\nimport TransactionRow from './transactionlist/TransactionRow'\nimport ZeroState from './transactionlist/ZeroState'\n\nimport { hasInsetBorder, shouldShowDate } from '../../utils/Transactions'\nimport { fromUnixUTCToDayOfWeekAndDate } from '../../../core/utils/DateUtil'\n\nconst ROW_HEIGHT = 65\nconst DATE_ROW_HEIGHT = 32\n\nexport interface TransactionListProps {\n  bgcolor?: string\n  filter?: (t: Transaction) => boolean\n  height?: number | string\n  loader?: React.JSX.Element\n  onClick?: (guid: string) => void\n  showInsights?: boolean\n  showLoader?: boolean\n  transaction?: Transaction[]\n  width?: number | string\n  zeroState?: React.JSX.Element\n}\n\nconst TransactionList: React.FC<TransactionListProps> = ({\n  bgcolor,\n  filter,\n  height = 'calc(100dvh - 36px)',\n  loader = <Loader label=\"Loading\" size={40} />,\n  onClick,\n  showInsights = false,\n  showLoader = false,\n  transaction,\n  width = '100%',\n  zeroState = <ZeroState />,\n}) => {\n  const { isLoading, sortedTransactions: allTransactions } = useTransactionStore()\n  const transactions = React.useMemo(() => {\n    const updatedTransactions = filter ? allTransactions.filter(filter) : allTransactions\n    return transaction ?? updatedTransactions\n  }, [allTransactions, transaction])\n\n  const { clearExpandedSplits, setShowInsights, toggleSplit } = useTransactionsUiStore()\n  const { onEvent } = useEvent()\n\n  const handleClick = (guid: string) => {\n    const transaction = transactions.find((t) => t.guid === guid)\n\n    if (transaction?.has_been_split) {\n      toggleSplit(transaction.guid)\n      return\n    }\n\n    onEvent(ANALYTICS_EVENTS.ACCOUNT_DETAILS_CLICK_TRANSACTION, {\n      account_guid: transaction?.account_guid,\n      transaction_guid: guid,\n    })\n    onClick?.(guid)\n  }\n\n  const parentRef = React.useRef<HTMLDivElement>(null)\n  const rowVirtualizer = useVirtualizer({\n    count: transactions.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: (i) => ROW_HEIGHT + (shouldShowDate(i, transactions) ? DATE_ROW_HEIGHT : 0),\n    overscan: 5,\n  })\n\n  React.useEffect(() => rowVirtualizer.measure(), [transactions])\n  React.useEffect(() => setShowInsights(showInsights), [showInsights])\n\n  React.useEffect(() => {\n    return () => clearExpandedSplits()\n  }, [])\n\n  return (\n    <List component=\"div\" role=\"list\" sx={{ width: width }}>\n      <Box height={height} overflow=\"auto\" ref={parentRef} role=\"presentation\" width={width}>\n        <Box\n          height={\n            // set the height to auto when there are no transactions so the zero state isn't set to 0\n            rowVirtualizer.getVirtualItems().length === 0 ? 'auto' : rowVirtualizer.getTotalSize()\n          }\n          position=\"relative\"\n          role=\"presentation\"\n          width=\"100%\"\n        >\n          {(isLoading || showLoader) && loader}\n          {!isLoading && !showLoader && rowVirtualizer.getVirtualItems().length === 0 && zeroState}\n          {!isLoading &&\n            !showLoader &&\n            rowVirtualizer.getVirtualItems().length > 0 &&\n            rowVirtualizer.getVirtualItems().map((row) => {\n              const transaction = transactions[row.index]\n              const showDate = shouldShowDate(row.index, transactions)\n              const isInset = hasInsetBorder(row.index, transactions)\n              const rowHeight = ROW_HEIGHT + (showDate ? DATE_ROW_HEIGHT : 0)\n\n              return (\n                <Box\n                  key={transaction.guid}\n                  role=\"listitem\"\n                  sx={{\n                    height: rowHeight,\n                    position: 'absolute',\n                    transform: `translateY(${row.start}px)`,\n                    width: '100%',\n                    bgcolor: 'background.paper',\n                  }}\n                >\n                  {showDate && (\n                    <SubheaderRow bgcolor={bgcolor}>\n                      {fromUnixUTCToDayOfWeekAndDate(transaction.date)}\n                    </SubheaderRow>\n                  )}\n                  <TransactionRow\n                    component=\"div\"\n                    {...(onClick && { onClick: handleClick })}\n                    transaction={transaction}\n                  />\n                  <Divider sx={{ ml: isInset ? 68 : 0 }} />\n                </Box>\n              )\n            })}\n        </Box>\n      </Box>\n    </List>\n  )\n}\n\nexport default observer(TransactionList)\n"],"mappings":"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"}