@mx-cartographer/experiences 9.3.4 → 9.3.6

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [9.3.6] - 08-12-2026
+
+- **ADDED** - Creating the new TransparentOverdraftV2 insight
+
+## [9.3.5] - 08-12-2026
+
+- **FIXED** - Transaction detail view showed transfer/credit amounts (e.g. an account-to-account transfer deposit) as an unsigned, default-colored amount because the header keyed off `isIncome` (true only for the Income category) while the list keyed off `transaction_type`; the detail view now uses `transaction_type === CREDIT` so credits render as `+$Amount` in success green, consistent with the transactions list (MEW-3703)
+- **CHANGED** - Transaction detail view date now renders as `Month DD, YYYY` (e.g. `June 08, 2026`) instead of the numeric `MM/DD/YYYY` format, per design; added a `FULL_MONTH_DAY_YEAR` date format (MEW-3703)
+
 ## [9.3.4] - 08-12-2026
 
 - **FIXED** - Blank rows in "Manage Insights Notifications": 10 members of `InsightNotificationTypes` were rendered by the settings list but had no entry in `getProfileLabel`'s `labelMap`, so they displayed a working, toggleable notification row with an empty title (MEW2-2872)

package/dist/core/constants/DateFormats.d.ts

@@ -56,6 +56,11 @@ export declare const DATE_FORMATS_INTL: {
         day: string;
         year: string;
     };
+    FULL_MONTH_DAY_YEAR: {
+        month: string;
+        day: string;
+        year: string;
+    };
 };
 export interface Day {
     day: string;

package/dist/core/constants/DateFormats.es.js

@@ -45,11 +45,16 @@ var _ = {
     month: "short",
     day: "numeric",
     year: "numeric"
+  },
+  FULL_MONTH_DAY_YEAR: {
+    month: "long",
+    day: "2-digit",
+    year: "numeric"
   }
-}, a = (n, o) => t(new Date(n), Object.assign(o), { locale: r() });
+}, i = (n, o) => t(new Date(n), Object.assign(o), { locale: r() });
 export {
   _ as DATE_FORMATS_INTL,
-  a as formatDate
+  i as formatDate
 };
 
 //# sourceMappingURL=DateFormats.es.js.map

package/dist/core/constants/DateFormats.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateFormats.es.js","names":[],"sources":["../../../src/core/constants/DateFormats.ts"],"sourcesContent":["import { intlFormat } from 'date-fns/intlFormat'\nimport { getLocale } from '../utils'\n\nexport const ORDINAL_DATE_FORMAT = 'do'\nexport const ORDINAL_MONTH_DAY_YEAR_FORMAT = 'MMM do, yyyy'\n\n// Documentation on the options for formatting int'l dates\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat\nexport const DATE_FORMATS_INTL = {\n  TIME_STAMP_HOUR_MINUTE: {\n    hour: 'numeric',\n    minute: 'numeric',\n  },\n  DAY: {\n    day: 'numeric',\n  },\n  DAY_OF_WEEK: {\n    weekday: 'long',\n  },\n  DAY_OF_WEEK_MONTH_DAY: {\n    day: 'numeric',\n    month: 'long',\n    weekday: 'long',\n  },\n  FULL_MONTH_DAY: {\n    day: 'numeric',\n    month: 'long',\n  },\n  MONTH: {\n    month: 'short',\n  },\n  MONTH_DAY: {\n    day: 'numeric',\n    month: 'short',\n  },\n  MONTH_LONG: {\n    month: 'long',\n  },\n  MONTH_SHORT: {\n    month: 'short',\n  },\n  MONTH_SHORT_YEAR: {\n    month: 'short',\n    year: 'numeric',\n  },\n  MONTH_YEAR: {\n    month: 'long',\n    year: 'numeric',\n  },\n  YEAR_MONTH_DAY: {\n    day: '2-digit',\n    month: '2-digit',\n    year: 'numeric',\n  },\n  MONTH_DAY_YEAR: {\n    month: 'short',\n    day: '2-digit',\n    year: 'numeric',\n  },\n  MED_MONTH_SHORT_DAY_FULL_YEAR: {\n    month: 'short',\n    day: 'numeric',\n    year: 'numeric',\n  },\n}\n\nexport interface Day {\n  day: string\n}\n\nexport interface DayOfWeek {\n  weekday: string\n}\n\nexport interface DayOfWeekMonthDay {\n  day: string\n  month: string\n  weekday: string\n}\n\nexport interface MonthDay {\n  day: string\n  month: string\n}\n\nexport interface MonthLong {\n  month: string\n}\n\nexport interface MonthShort {\n  month: string\n}\n\nexport interface MonthYear {\n  month: string\n  year: string\n}\n\nexport interface TimeStamp {\n  hour: string\n  minute: string\n}\n\nexport interface YearMonthDay {\n  day: string\n  month: string\n  year: string\n}\n\nexport const formatDate = (\n  date: string | Date,\n  dFormat:\n    | Day\n    | DayOfWeek\n    | DayOfWeekMonthDay\n    | MonthDay\n    | MonthLong\n    | MonthShort\n    | MonthYear\n    | TimeStamp\n    | YearMonthDay,\n) => intlFormat(new Date(date), Object.assign(dFormat), { locale: getLocale() })\n"],"mappings":";;AAQA,IAAa,IAAoB;AAAA,EAC/B,wBAAwB;AAAA,IACtB,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA,KAAK,EACH,KAAK,UACP;AAAA,EACA,aAAa,EACX,SAAS,OACX;AAAA,EACA,uBAAuB;AAAA,IACrB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AAAA,EACA,OAAO,EACL,OAAO,QACT;AAAA,EACA,WAAW;AAAA,IACT,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AAAA,EACA,YAAY,EACV,OAAO,OACT;AAAA,EACA,aAAa,EACX,OAAO,QACT;AAAA,EACA,kBAAkB;AAAA,IAChB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,+BAA+B;AAAA,IAC7B,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AACF,GA6Ca,IAAA,CACX,GACA,MAUG,EAAW,IAAI,KAAK,CAAI,GAAG,OAAO,OAAO,CAAO,GAAG,EAAE,QAAQ,EAAU,EAAE,CAAC"}
+{"version":3,"file":"DateFormats.es.js","names":[],"sources":["../../../src/core/constants/DateFormats.ts"],"sourcesContent":["import { intlFormat } from 'date-fns/intlFormat'\nimport { getLocale } from '../utils'\n\nexport const ORDINAL_DATE_FORMAT = 'do'\nexport const ORDINAL_MONTH_DAY_YEAR_FORMAT = 'MMM do, yyyy'\n\n// Documentation on the options for formatting int'l dates\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat\nexport const DATE_FORMATS_INTL = {\n  TIME_STAMP_HOUR_MINUTE: {\n    hour: 'numeric',\n    minute: 'numeric',\n  },\n  DAY: {\n    day: 'numeric',\n  },\n  DAY_OF_WEEK: {\n    weekday: 'long',\n  },\n  DAY_OF_WEEK_MONTH_DAY: {\n    day: 'numeric',\n    month: 'long',\n    weekday: 'long',\n  },\n  FULL_MONTH_DAY: {\n    day: 'numeric',\n    month: 'long',\n  },\n  MONTH: {\n    month: 'short',\n  },\n  MONTH_DAY: {\n    day: 'numeric',\n    month: 'short',\n  },\n  MONTH_LONG: {\n    month: 'long',\n  },\n  MONTH_SHORT: {\n    month: 'short',\n  },\n  MONTH_SHORT_YEAR: {\n    month: 'short',\n    year: 'numeric',\n  },\n  MONTH_YEAR: {\n    month: 'long',\n    year: 'numeric',\n  },\n  YEAR_MONTH_DAY: {\n    day: '2-digit',\n    month: '2-digit',\n    year: 'numeric',\n  },\n  MONTH_DAY_YEAR: {\n    month: 'short',\n    day: '2-digit',\n    year: 'numeric',\n  },\n  MED_MONTH_SHORT_DAY_FULL_YEAR: {\n    month: 'short',\n    day: 'numeric',\n    year: 'numeric',\n  },\n  FULL_MONTH_DAY_YEAR: {\n    month: 'long',\n    day: '2-digit',\n    year: 'numeric',\n  },\n}\n\nexport interface Day {\n  day: string\n}\n\nexport interface DayOfWeek {\n  weekday: string\n}\n\nexport interface DayOfWeekMonthDay {\n  day: string\n  month: string\n  weekday: string\n}\n\nexport interface MonthDay {\n  day: string\n  month: string\n}\n\nexport interface MonthLong {\n  month: string\n}\n\nexport interface MonthShort {\n  month: string\n}\n\nexport interface MonthYear {\n  month: string\n  year: string\n}\n\nexport interface TimeStamp {\n  hour: string\n  minute: string\n}\n\nexport interface YearMonthDay {\n  day: string\n  month: string\n  year: string\n}\n\nexport const formatDate = (\n  date: string | Date,\n  dFormat:\n    | Day\n    | DayOfWeek\n    | DayOfWeekMonthDay\n    | MonthDay\n    | MonthLong\n    | MonthShort\n    | MonthYear\n    | TimeStamp\n    | YearMonthDay,\n) => intlFormat(new Date(date), Object.assign(dFormat), { locale: getLocale() })\n"],"mappings":";;AAQA,IAAa,IAAoB;AAAA,EAC/B,wBAAwB;AAAA,IACtB,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA,KAAK,EACH,KAAK,UACP;AAAA,EACA,aAAa,EACX,SAAS,OACX;AAAA,EACA,uBAAuB;AAAA,IACrB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AAAA,EACA,OAAO,EACL,OAAO,QACT;AAAA,EACA,WAAW;AAAA,IACT,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AAAA,EACA,YAAY,EACV,OAAO,OACT;AAAA,EACA,aAAa,EACX,OAAO,QACT;AAAA,EACA,kBAAkB;AAAA,IAChB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,+BAA+B;AAAA,IAC7B,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,qBAAqB;AAAA,IACnB,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AACF,GA6Ca,IAAA,CACX,GACA,MAUG,EAAW,IAAI,KAAK,CAAI,GAAG,OAAO,OAAO,CAAO,GAAG,EAAE,QAAQ,EAAU,EAAE,CAAC"}

package/dist/insights/components/insights/TransparentOverdraftV2/TransparentOverdraftV2.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { CommonBeatProps } from '../../../types/CommonBeat';
+export interface TransparentOverdraftV2Props extends CommonBeatProps {
+    accountName: string;
+    formattedProjectedBalance: string;
+    projectedBalanceLabel: string;
+}
+export declare const TransparentOverdraftV2: React.FC<TransparentOverdraftV2Props>;

package/dist/insights/components/insights/TransparentOverdraftV2/TransparentOverdraftV2.es.js

@@ -0,0 +1,50 @@
+import { InsightButton as i } from "../../shared/InsightsCard/InsightButton.es.js";
+import { BeatCardMUI as s } from "../../shared/InsightsCard/BeatCardMUI.es.js";
+import { TransparentOverdraftV2Body as c } from "./TransparentOverdraftV2Body.es.js";
+import "react";
+import n from "@mui/material/Stack";
+import { Text as f } from "@mxenabled/mxui";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+var T = ({ accountName: m, beat: t, buttonProps: e, formattedProjectedBalance: d, isMini: o, projectedBalanceLabel: p, ...a }) => /* @__PURE__ */ r(s, {
+  ...a,
+  beat: t,
+  button: /* @__PURE__ */ h(n, {
+    sx: { gap: 8 },
+    children: [/* @__PURE__ */ r(i, {
+      ...e,
+      beat: t
+    }), /* @__PURE__ */ r(i, {
+      ...e,
+      beat: t,
+      hide: !t.supporting_action,
+      primary: !1
+    })]
+  }),
+  header: {
+    ...a.header,
+    subHeader: /* @__PURE__ */ r(n, {
+      alignItems: "center",
+      direction: "row",
+      sx: {
+        gap: 4,
+        mt: 4
+      },
+      children: /* @__PURE__ */ r(f, {
+        sx: { color: "text.secondary" },
+        variant: "body2",
+        children: m
+      })
+    })
+  },
+  isMini: o,
+  children: /* @__PURE__ */ r(c, {
+    formattedProjectedBalance: d,
+    isMini: o ?? !1,
+    projectedBalanceLabel: p
+  })
+});
+export {
+  T as TransparentOverdraftV2
+};
+
+//# sourceMappingURL=TransparentOverdraftV2.es.js.map

package/dist/insights/components/insights/TransparentOverdraftV2/TransparentOverdraftV2.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransparentOverdraftV2.es.js","names":[],"sources":["../../../../../src/insights/components/insights/TransparentOverdraftV2/TransparentOverdraftV2.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\n\nimport { CommonBeatProps } from '../../../types/CommonBeat'\nimport { BeatCardMUI } from '../../shared/InsightsCard/BeatCardMUI'\nimport { InsightButton } from '../../shared/InsightsCard/InsightButton'\n\nimport { TransparentOverdraftV2Body } from './TransparentOverdraftV2Body'\n\nexport interface TransparentOverdraftV2Props extends CommonBeatProps {\n  accountName: string\n  formattedProjectedBalance: string\n  projectedBalanceLabel: string\n}\n\nexport const TransparentOverdraftV2: React.FC<TransparentOverdraftV2Props> = ({\n  accountName,\n  beat,\n  buttonProps,\n  formattedProjectedBalance,\n  isMini,\n  projectedBalanceLabel,\n  ...restProps\n}) => {\n  return (\n    <BeatCardMUI\n      {...restProps}\n      beat={beat}\n      button={\n        <Stack sx={{ gap: 8 }}>\n          <InsightButton {...buttonProps} beat={beat} />\n          <InsightButton\n            {...buttonProps}\n            beat={beat}\n            hide={!beat.supporting_action}\n            primary={false}\n          />\n        </Stack>\n      }\n      header={{\n        ...restProps.header,\n        subHeader: (\n          <Stack alignItems=\"center\" direction=\"row\" sx={{ gap: 4, mt: 4 }}>\n            {/* Remove InstitutionLogo until the V2 payload carries institution_guid */}\n            <Text sx={{ color: 'text.secondary' }} variant=\"body2\">\n              {accountName}\n            </Text>\n          </Stack>\n        ),\n      }}\n      isMini={isMini}\n    >\n      <TransparentOverdraftV2Body\n        formattedProjectedBalance={formattedProjectedBalance}\n        isMini={isMini ?? false}\n        projectedBalanceLabel={projectedBalanceLabel}\n      />\n    </BeatCardMUI>\n  )\n}\n"],"mappings":";;;;;;;AAkBA,IAAa,IAAA,CAAiE,EAC5E,aAAA,GACA,MAAA,GACA,aAAA,GACA,2BAAA,GACA,QAAA,GACA,uBAAA,GACA,GAAG,EAAA,MAGD,gBAAA,EAAC,GAAD;AAAA,EACE,GAAI;AAAA,EACE,MAAA;AAAA,EACN,QACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,KAAK,EAAE;AAAA,IAApB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAe,GAAI;AAAA,MAAmB,MAAA;AAAA,IAAO,CAAA,GAC7C,gBAAA,EAAC,GAAD;AAAA,MACE,GAAI;AAAA,MACE,MAAA;AAAA,MACN,MAAM,CAAC,EAAK;AAAA,MACZ,SAAS;AAAA,IACV,CAAA,CACI;AAAA;EAET,QAAQ;AAAA,IACN,GAAG,EAAU;AAAA,IACb,WACE,gBAAA,EAAC,GAAD;AAAA,MAAO,YAAW;AAAA,MAAS,WAAU;AAAA,MAAM,IAAI;AAAA,QAAE,KAAK;AAAA,QAAG,IAAI;AAAA,MAAE;AAAA,MAE7D,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,QAAG,SAAQ;AAAA,QAC5C,UAAA;AAAA,MACG,CAAA;AAAA,IACD,CAAA;AAAA,EAEX;AAAA,EACQ,QAAA;AAAA,EAER,UAAA,gBAAA,EAAC,GAAD;AAAA,IAC6B,2BAAA;AAAA,IAC3B,QAAQ,KAAU;AAAA,IACK,uBAAA;AAAA,EACxB,CAAA;AACU,CAAA"}

package/dist/insights/components/insights/TransparentOverdraftV2/TransparentOverdraftV2Body.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface TransparentOverdraftV2BodyProps {
+    formattedProjectedBalance: string;
+    isMini: boolean;
+    projectedBalanceLabel: string;
+}
+export declare const TransparentOverdraftV2Body: React.FC<TransparentOverdraftV2BodyProps>;
+export {};

package/dist/insights/components/insights/TransparentOverdraftV2/TransparentOverdraftV2Body.es.js

@@ -0,0 +1,68 @@
+import "react";
+import e from "@mui/material/Stack";
+import { P as c, Text as m } from "@mxenabled/mxui";
+import { Icon as s } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import d from "@mui/material/Card";
+var y = ({ formattedProjectedBalance: i, isMini: o = !1, projectedBalanceLabel: a }) => {
+  const t = {
+    boxContainer: {
+      bgcolor: "warning.light",
+      marginBottom: o ? 0 : 24,
+      py: 16,
+      px: 24,
+      width: "100%"
+    },
+    card: {
+      alignItems: "center",
+      borderRadius: 2,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      p: 16,
+      width: "100%"
+    }
+  };
+  return /* @__PURE__ */ r(e, {
+    sx: t.boxContainer,
+    children: /* @__PURE__ */ n(d, {
+      sx: {
+        ...t.card,
+        bgcolor: "background.paper"
+      },
+      children: [/* @__PURE__ */ r(m, {
+        component: "span",
+        sx: {
+          color: "text.primary",
+          fontWeight: 700,
+          mb: 4
+        },
+        variant: o ? "h2" : "h1",
+        children: i
+      }), /* @__PURE__ */ n(e, {
+        alignItems: "center",
+        direction: "row",
+        sx: { gap: 4 },
+        children: [/* @__PURE__ */ r(s, {
+          "aria-hidden": "true",
+          fill: !0,
+          name: "error",
+          size: 16,
+          sx: { color: "warning.main" }
+        }), /* @__PURE__ */ r(c, {
+          sx: {
+            color: "text.secondary",
+            fontWeight: 400
+          },
+          variant: "body2",
+          children: a
+        })]
+      })]
+    })
+  });
+};
+export {
+  y as TransparentOverdraftV2Body
+};
+
+//# sourceMappingURL=TransparentOverdraftV2Body.es.js.map

package/dist/insights/components/insights/TransparentOverdraftV2/TransparentOverdraftV2Body.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransparentOverdraftV2Body.es.js","names":[],"sources":["../../../../../src/insights/components/insights/TransparentOverdraftV2/TransparentOverdraftV2Body.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\ninterface TransparentOverdraftV2BodyProps {\n  formattedProjectedBalance: string\n  isMini: boolean\n  projectedBalanceLabel: string\n}\n\nexport const TransparentOverdraftV2Body: React.FC<TransparentOverdraftV2BodyProps> = ({\n  formattedProjectedBalance,\n  isMini = false,\n  projectedBalanceLabel,\n}) => {\n  const styles = {\n    boxContainer: {\n      bgcolor: 'warning.light',\n      marginBottom: isMini ? 0 : 24,\n      py: 16,\n      px: 24,\n      width: '100%',\n    },\n    card: {\n      alignItems: 'center',\n      borderRadius: 2,\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      p: 16,\n      width: '100%',\n    },\n  }\n\n  return (\n    <Stack sx={styles.boxContainer}>\n      <Card\n        sx={{\n          ...styles.card,\n          bgcolor: 'background.paper',\n        }}\n      >\n        <Text\n          component=\"span\"\n          sx={{ color: 'text.primary', fontWeight: 700, mb: 4 }}\n          variant={isMini ? 'h2' : 'h1'}\n        >\n          {formattedProjectedBalance}\n        </Text>\n\n        <Stack alignItems=\"center\" direction=\"row\" sx={{ gap: 4 }}>\n          <Icon\n            aria-hidden=\"true\"\n            fill={true}\n            name=\"error\"\n            size={16}\n            sx={{ color: 'warning.main' }}\n          />\n          <P sx={{ color: 'text.secondary', fontWeight: 400 }} variant=\"body2\">\n            {projectedBalanceLabel}\n          </P>\n        </Stack>\n      </Card>\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;AAcA,IAAa,IAAA,CAAyE,EACpF,2BAAA,GACA,QAAA,IAAS,IACT,uBAAA,EAAA,MACI;AACJ,QAAM,IAAS;AAAA,IACb,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,cAAc,IAAS,IAAI;AAAA,MAC3B,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IACT;AAAA,IACA,MAAM;AAAA,MACJ,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,SAAS;AAAA,MACT,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,EACF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAO;AAAA,IAChB,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,GAAG,EAAO;AAAA,QACV,SAAS;AAAA,MACX;AAAA,MAJF,UAAA,CAME,gBAAA,EAAC,GAAD;AAAA,QACE,WAAU;AAAA,QACV,IAAI;AAAA,UAAE,OAAO;AAAA,UAAgB,YAAY;AAAA,UAAK,IAAI;AAAA,QAAE;AAAA,QACpD,SAAS,IAAS,OAAO;AAAA,QAExB,UAAA;AAAA,MACG,CAAA,GAEN,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,QAAS,WAAU;AAAA,QAAM,IAAI,EAAE,KAAK,EAAE;AAAA,QAAxD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UACE,eAAY;AAAA,UACZ,MAAM;AAAA,UACN,MAAK;AAAA,UACL,MAAM;AAAA,UACN,IAAI,EAAE,OAAO,eAAe;AAAA,QAC7B,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAG,IAAI;AAAA,YAAE,OAAO;AAAA,YAAkB,YAAY;AAAA,UAAI;AAAA,UAAG,SAAQ;AAAA,UAC1D,UAAA;AAAA,QACA,CAAA,CACE;AAAA,MACH,CAAA,CAAA;AAAA;EACD,CAAA;AAEX"}

package/dist/insights/components/insights/TransparentOverdraftV2/index.d.ts

@@ -0,0 +1 @@
+export * from './TransparentOverdraftV2';

package/dist/insights/components/insights/index.d.ts

@@ -19,6 +19,7 @@ export * from './P2pCategorization';
 export * from './SavingsAccountBalancesSummary';
 export * from './SetUpDirectDeposit';
 export * from './SwitchDirectDeposit';
+export * from './TransparentOverdraftV2';
 export * from './UnifiedDeposit';
 export * from './WeeklyNoSpendDays';
 export * from './MarketingHub';

package/dist/insights/index.es.js

@@ -17,7 +17,7 @@ import { MiniInsightCard as U } from "./components/shared/MiniInsightCard.es.js"
 import { MenuAction as H } from "./components/shared/MenuAction.es.js";
 import w from "./components/shared/P2P/P2PMultipleCategorization.es.js";
 import V from "./components/shared/SaveEnoughToLiveOnBottomSection.es.js";
-import O from "./components/shared/SaveEnoughToLiveOnTopSection.es.js";
+import z from "./components/shared/SaveEnoughToLiveOnTopSection.es.js";
 import W from "./components/shared/StatusIndicator.es.js";
 import R from "./components/shared/TransactionCard.es.js";
 import { DirectDeposit as X } from "./components/shared/DirectDeposit/DirectDeposit.es.js";
@@ -43,7 +43,7 @@ import { LinedCardZeroState as ko } from "./components/shared/ZeroState/LinedCar
 import { ErrorCard as Eo } from "./components/shared/ErrorCard/ErrorCard.es.js";
 import { FeedbackHeader as Lo } from "./components/shared/GenericFeedback/FeedbackHeader.es.js";
 import { FeedbackButtons as xo } from "./components/shared/GenericFeedback/FeedbackButtons.es.js";
-import { FeedbackDescription as zo } from "./components/shared/GenericFeedback/FeedbackDescription.es.js";
+import { FeedbackDescription as Oo } from "./components/shared/GenericFeedback/FeedbackDescription.es.js";
 import { FeedbackOptions as No } from "./components/shared/GenericFeedback/FeedbackOptions.es.js";
 import { BeatFeedbackText as Go } from "./components/shared/GenericFeedback/FeedbackText.es.js";
 import { AccountDiscoverability as jo } from "./components/insights/AccountDiscoverability/AccountDiscoverability.es.js";
@@ -70,7 +70,7 @@ import { MonthlyEmergencyFundReviewBody as kr } from "./components/insights/Mont
 import { LastMonthsContributionSection as Er } from "./components/insights/MonthlyEmergencyFundReview/LastMonthsContributionSection.es.js";
 import { ProjectedCompletionSection as Lr } from "./components/insights/MonthlyEmergencyFundReview/ProjectedCompletionSection.es.js";
 import { TotalSavedSection as xr } from "./components/insights/MonthlyEmergencyFundReview/TotalSection.es.js";
-import { MonthlySavingsToIncomeComparison as zr } from "./components/insights/MonthlySavingsToIncomeComparison/MonthlySavingsToIncomeComparison.es.js";
+import { MonthlySavingsToIncomeComparison as Or } from "./components/insights/MonthlySavingsToIncomeComparison/MonthlySavingsToIncomeComparison.es.js";
 import { MonthlySpendingComparisonV2 as Nr } from "./components/insights/MonthlySpendingComparisonV2/MonthlySpendingComparisonV2.es.js";
 import { MonthlySpendToIncomeComparisonV2 as Gr } from "./components/insights/MonthlySpendToIncomeComparisonV2/MonthlySpendToIncomeComparisonV2.es.js";
 import { P2pCategorization as jr } from "./components/insights/P2pCategorization/P2pCategorization.es.js";
@@ -81,14 +81,15 @@ import { SetUpDirectDepositBody as _r } from "./components/insights/SetUpDirectD
 import { AccountBox as ot } from "./components/insights/SwitchDirectDeposit/AccountBox.es.js";
 import { SwitchDirectDepositMainContainer as tt } from "./components/insights/SwitchDirectDeposit/SwitchDirectDepositMainContainer.es.js";
 import { SwitchDirectDepositBody as mt } from "./components/insights/SwitchDirectDeposit/SwitchDirectDepositBody.es.js";
-import { UnifiedDeposit as at } from "./components/insights/UnifiedDeposit/UnifiedDeposit.es.js";
-import { WeeklyNoSpendDays as nt } from "./components/insights/WeeklyNoSpendDays/WeeklyNoSpendDays.es.js";
-import { UserFeedback as dt } from "./components/insights/UserFeedback/UserFeedback.es.js";
-import { DirectDepositDeepLink as st } from "./components/shared/DeepLinks/DirectDeposit/DirectDepositDeepLink.es.js";
-import { Header as lt } from "./components/feed/Header.es.js";
-import { P2PCategorizationSingleAccount as ut } from "./components/shared/P2PCategorizationSingleAccount/P2PCategorizationSingleAccount.es.js";
-import { DrillDownCalculation as Bt, variants as gt } from "./components/shared/DrillDownCalculation/DrillDownCalculation.es.js";
-import { SaveAnExtra100 as yt } from "./components/shared/SaveAnExtra100/SaveAnExtra100.es.js";
+import { TransparentOverdraftV2 as at } from "./components/insights/TransparentOverdraftV2/TransparentOverdraftV2.es.js";
+import { UnifiedDeposit as nt } from "./components/insights/UnifiedDeposit/UnifiedDeposit.es.js";
+import { WeeklyNoSpendDays as dt } from "./components/insights/WeeklyNoSpendDays/WeeklyNoSpendDays.es.js";
+import { UserFeedback as st } from "./components/insights/UserFeedback/UserFeedback.es.js";
+import { DirectDepositDeepLink as lt } from "./components/shared/DeepLinks/DirectDeposit/DirectDepositDeepLink.es.js";
+import { Header as ut } from "./components/feed/Header.es.js";
+import { P2PCategorizationSingleAccount as Bt } from "./components/shared/P2PCategorizationSingleAccount/P2PCategorizationSingleAccount.es.js";
+import { DrillDownCalculation as ht, variants as yt } from "./components/shared/DrillDownCalculation/DrillDownCalculation.es.js";
+import { SaveAnExtra100 as Tt } from "./components/shared/SaveAnExtra100/SaveAnExtra100.es.js";
 export {
   ot as AccountBox,
   jo as AccountDiscoverability,
@@ -122,7 +123,7 @@ export {
   sr as CustomTransaction,
   Mo as Description,
   X as DirectDeposit,
-  st as DirectDepositDeepLink,
+  lt as DirectDepositDeepLink,
   q as DirectDepositSubHeader,
   ur as DiscoveredAccountsBody,
   T as DiscoveredAccountsConnect,
@@ -130,7 +131,7 @@ export {
   hr as DiscoveredAccountsMiniInsight,
   f as DoubleBarChart,
   c as DoubleBarChartMXUI,
-  Bt as DrillDownCalculation,
+  ht as DrillDownCalculation,
   vo as EmbeddedCard,
   C as EmptyBarChart,
   Eo as ErrorCard,
@@ -138,11 +139,11 @@ export {
   vr as FederalBankHolidayMUI,
   xo as FeedbackButtons,
   Ao as FeedbackCard,
-  zo as FeedbackDescription,
+  Oo as FeedbackDescription,
   Lo as FeedbackHeader,
   No as FeedbackOptions,
   K as FullFeedBodyHeader,
-  lt as Header,
+  ut as Header,
   Fo as InsightButton,
   Er as LastMonthsContributionSection,
   Y as LeftBox,
@@ -153,11 +154,11 @@ export {
   U as MiniInsightCard,
   Fr as MonthlyDebtToIncomeComparisonV2,
   kr as MonthlyEmergencyFundReviewBody,
-  zr as MonthlySavingsToIncomeComparison,
+  Or as MonthlySavingsToIncomeComparison,
   Gr as MonthlySpendToIncomeComparisonV2,
   Nr as MonthlySpendingComparisonV2,
   Ar as Offer,
-  ut as P2PCategorizationSingleAccount,
+  Bt as P2PCategorizationSingleAccount,
   w as P2PMultipleCategorization,
   jr as P2pCategorization,
   Zr as P2pCategorizationMultipleTransactions,
@@ -167,9 +168,9 @@ export {
   I as PulseGraidentBox,
   b as PulseProgressBar,
   ro as RightBox,
-  yt as SaveAnExtra100,
+  Tt as SaveAnExtra100,
   V as SaveEnoughToLiveOnBottomSection,
-  O as SaveEnoughToLiveOnTopSection,
+  z as SaveEnoughToLiveOnTopSection,
   Qr as SavingsAccountBalancesSummary,
   _r as SetUpDirectDepositBody,
   lr as SharedDeposit,
@@ -178,8 +179,9 @@ export {
   tt as SwitchDirectDepositMainContainer,
   xr as TotalSavedSection,
   R as TransactionCard,
-  at as UnifiedDeposit,
-  dt as UserFeedback,
-  nt as WeeklyNoSpendDays,
-  gt as variants
+  at as TransparentOverdraftV2,
+  nt as UnifiedDeposit,
+  st as UserFeedback,
+  dt as WeeklyNoSpendDays,
+  yt as variants
 };

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

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

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

@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAM,KAAA,CAAyD,EAC7D,eAAA,IAAgB,IAChB,oBAAA,IAAqB,IACrB,YAAA,IAAa,IACb,aAAA,EAAA,MACI;AACJ,QAAM,EAAE,SAAA,EAAA,IAAY,GAAS,GACvB,EAAE,cAAA,EAAA,IAAiB,GAAiB,GACpC,EAAE,cAAA,EAAA,IAAiB,GAAa,GAChC,EAAE,UAAU,GAAM,QAAQ,GAAY,eAAe,EAAA,IAAiB,GAAmB,GAEzF,EAAE,oBAAA,EAAA,IAAuB,GAAiB,GAC1C,EACJ,OAAA,GACA,iBAAA,GACA,sBAAA,GACA,iBAAA,GACA,kCAAA,GACA,UAAA,EAAA,IACE,GAAoB,GAElB,CAAC,GAAgC,CAAA,IAAqC,EAAM,SAAS,EAAK,GAE1F,CAAC,GAAW,CAAA,IAAgB,EAAM,SAAS,EAAK,GAChD,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,EAAK,GAC5D,IAAQ,GAAS,GAEjB,IAAiB,GAAa,UAAU,EAAY,OAAO,SAAS,GAEpE,IAAO,EAAM,QAAA,MACV,EAAgB,KAAA,CAAM,MAAS,EAAK,gCAAgC,EAAY,IAAI,GAC1F,CAAC,GAAiB,CAAW,CAAC,GAE3B,IAAe,GAAuC,GAAY,CAAI,GAEtE,CAAC,GAAkB,CAAA,IAAuB,EAAM,SACpD,IAAe,EAAa,WAAW,SAAS,IAAI,CACtD;AAEA,EAAA,EAAM,UAAA,MAEF,EAAQ,GAAiB,0BAA0B,EAAE,kBAAkB,EAAY,KAAK,CAAC,GAC3F,CAAC,CACH,GAEA,EAAM,UAAA,MAAgB;AACpB,QAAI,CAAC,KAAgB,EAAa,WAAW,WAAW,EAAG;AAE3D,UAAM,EAAE,MAAM,EAAA,IAA2B,EAAa,WAAW,CAAA,GAE3D,IAAQ,EAAa,CAAsB;AAEjD,IAAI,GAAS,GAAO,CAAe,MACjC,EAAa,EAAI,GACjB,EAAiC,CAAK,EAAE,QAAA,MAAc;AACpD,MAAA,EAAa,EAAK;AAAA,IACpB,CAAC;AAAA,EAEL,GAAG;AAAA,IAAC;AAAA,IAAkB;AAAA,IAAc;AAAA,EAAe,CAAC;AAGpD,QAAM,IACJ,EAAc,SAAS,EAAc,cAAc,KAAK,CAAC,GAAa,gBAClE,EAAc,OAAA,CAAQ,MAAW,MAAW,EAAc,cAAc,IACxE,GAEA,IAA2B,EAAA,MAAc;AAC7C,QAAI,GAAc;AAChB,YAAM,IAAW,EAAmB,KAAA,CACjC,MAAQ,EAAI,SAAS,EAAY,uBACpC,GACM,IAAO,GAAM,SAAS,kBAAkB,GACxC,IAAgB,EAAY;AAElC,UAAI,IAAa,EAAa,QAAQ;AACtC,aAAI,IAAgB,IAAO,MACzB,IAAa,EAAa,QAAQ,iBAK7B;AAAA,QAAE,UAAA;AAAA,QAAU,kBAFjB,MAAS,IAAI,IAAI,KAAK,MAAO,KAAK,IAAI,IAAgB,CAAI,IAAI,IAAQ,GAAG;AAAA,QAEtC,YAAA;AAAA,MAAW;AAAA,IAClD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,GAAc,CAAkB,CAAC,GAE/B,IAAuB,EAAA,MAAc;AACzC,QAAI,CAAC,GAAc,YAAY,OAC7B,QAAO,CAAC;AAGV,UAAM,EAAE,MAAM,GAAwB,MAAM,EAAA,IAC1C,EAAa,WAAW,CAAA,GAEpB,IAAQ,EAAa,CAAsB,GAC3C,IAAM,GAAW,CAAsB;AAE7C,WAAO,EAAqB,OAAA,CAAQ,MAAM;AACxC,YAAM,IAAkB,GAAY,EAAE,IAAI;AAC1C,aAAO,KAAmB,KAAS,KAAmB,KAAO,EAAE,SAAS;AAAA,IAC1E,CAAC;AAAA,EACH,GAAG;AAAA,IAAC;AAAA,IAAkB;AAAA,IAAc;AAAA,IAAsB;AAAA,EAAS,CAAC;AAEpE,MAAI,CAAC,EACH,QAAO,gBAAA,EAAC,IAAD,CAAS,CAAA;AAGlB,QAAM,IAAyB,GAAiB,GAAc,0BAA0B,GAElF,KAAU,EAAM,QAAQ,SAAS,SAAS,aAAa;AAE7D,SACE,gBAAA,EAAC,IAAD;AAAA,IAAK,WAAU;AAAA,IAA6B,OAAM;AAAA,IAAlD,UAAA;AAAA,MACG,KACC,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAO,KAAK;AAAA,UAAI,GAAG;AAAA,UAAnB,UAAA;AAAA,YACE,gBAAA,EAAC,GAAD;AAAA,cAAO,WAAW;AAAA,cAAG,IAAI,EAAE,OAAO,GAAG;AAAA,cACnC,UAAA,gBAAA,EAAC,GAAD;AAAA,gBACE,cAAc,EAAY,2BAA2B;AAAA,gBACrD,cAAc,EAAY,iBAAiB;AAAA,gBAC3C,MAAM;AAAA,cACP,CAAA;AAAA,YACI,CAAA;AAAA,YAEP,gBAAA,EAAC,IAAD;AAAA,cAA0B,aAAA;AAAA,cAAa,UAAU;AAAA,YAAyB,CAAA;AAAA,YAE1E,gBAAA,EAAC,GAAD;AAAA,cAAO,WAAU;AAAA,cAAM,gBAAe;AAAA,cAAgB,IAAI,EAAE,WAAW,GAAG;AAAA,cAA1E,UAAA,CACE,gBAAA,EAAC,IAAD;AAAA,gBAAG,OAAO,EAAY,WAAW,iBAAiB;AAAA,gBAAgB,SAAQ;AAAA,gBAA1E,UAAA,CACG,EAAY,WAAW,MAAM,IAC7B,EAAe,EAAY,QAAQ,QAAQ,CAC3C;AAAA,cACF,CAAA,GAAA,CAAC,KAA0B,KAC1B,gBAAA,EAAC,IAAD,EAA8B,aAAA,EAAc,CAAA,CAEzC;AAAA;YAEN,GAAc,gBACb,gBAAA,EAAC,IAAD;AAAA,cACE,cAAc,EAAa;AAAA,cAC3B,aACE,EACE,EAAa,QAAQ,sBACrB,EAA0B,YAC1B,gBAAA,EAAC,UAAD,EAAA,UAAS,EAA0B,iBAAyB,CAAA,CAC9D;AAAA,cAEF,cAAc,EAAa;AAAA,cAC3B,YAAA,MAAkB;AAChB,gBAAA,EAAkC,EAAI;AAAA,cACxC;AAAA,cACA,OAAO,EAAM;AAAA,YACd,CAAA;AAAA,YAEH,gBAAA,EAAC,GAAD;AAAA,cAAO,IAAI;AAAA,gBAAE,SAAS;AAAA,gBAAS,cAAc;AAAA,gBAAO,KAAK;AAAA,gBAAG,GAAG;AAAA,cAAE;AAAA,cAAjE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,gBAAM,MAAM;AAAA,gBACT,UAAA,GAAG,EAAY,OAAA;AAAA,kBAEd,IACI,EAAY,SACZ,IAAS,OAAO,CAAC,EAAE,OAAO,EAAY,UAAU,EAAE,CAAA;AAAA,cAEpD,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,gBAAM,MAAM;AAAA,gBAAM,UAAU;AAAA,gBAAM,SAAQ;AAAA,gBACvC,UAAA,EAAY;AAAA,cACT,CAAA,CACD;AAAA;UACF;AAAA;QAEP,gBAAA,EAAC,GAAD;AAAA,UAAO,QAAQ;AAAA,UAAM,IAAI,EAAE,WAAW,OAAO;AAAA,UAC1C,UAAA,IACC,gBAAA,EAAC,IAAD,EAAqC,aAAA,EAAc,CAAA,IAEnD,gBAAA,EAAC,GAAD,EAAA,UACG,EAAW,IAAA,CAAK,GAAQ,MACvB,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA;AAAA,YACG,MAAW,EAAW,YAAY,gBAAA,EAAC,IAAD,EAA6B,aAAA,EAAc,CAAA;AAAA,YAC7E,MAAW,EAAW,QAAQ,gBAAA,EAAC,IAAD,EAAyB,aAAA,EAAc,CAAA;AAAA,YACrE,MAAW,EAAW,QAAQ,gBAAA,EAAC,IAAD,EAAyB,aAAA,EAAc,CAAA;AAAA,YACrE,MAAW,EAAW,QAAQ,gBAAA,EAAC,IAAD,EAAyB,aAAA,EAAc,CAAA;AAAA,YACtE,gBAAA,EAAC,GAAD;AAAA,cACE,WAAU;AAAA,cACV,SAAS,IAAQ,EAAW,SAAS,IAAI,UAAU;AAAA,YACpD,CAAA;AAAA,UACa,EAAA,GATK,CASL,CACjB,EACG,CAAA;AAAA,QAEH,CAAA;AAAA,QAEN,CAAC,KAA0B,EAAqB,SAAS,KACxD,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,IAAI;AAAA,UAAG,IAAI;AAAA,UAAI,IAAI;AAAA,UAAI,SAAQ;AAAA,UAC9C,UAAA,EAAK;AAAA,QACF,CAAA,GAEN,gBAAA,EAAC,GAAD;AAAA,UAAO,QAAQ;AAAA,UAAM,IAAI,EAAE,WAAW,OAAO;AAAA,UAC3C,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAA,CACG,EAAqB,IAAA,CAAK,GAAQ,MACjC,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA;AAAA,YACG,MAAW,EAAc,kBACxB,gBAAA,EAAC,IAAD,EAAsC,aAAA,EAAc,CAAA;AAAA,YAErD,MAAW,EAAc,oBACxB,gBAAA,EAAC,IAAD,EAA0B,aAAA,EAAc,CAAA;AAAA,YAEzC,MAAW,EAAc,mBACxB,gBAAA,EAAC,IAAD,EAA4B,aAAA,EAAc,CAAA;AAAA,YAE3C,MAAW,EAAc,gBACxB,gBAAA,EAAC,IAAD,EAA+B,aAAA,EAAc,CAAA;AAAA,YAE/C,gBAAA,EAAC,GAAD;AAAA,cACE,WAAU;AAAA,cACV,SAAS,IAAQ,EAAqB,SAAS,IAAI,UAAU;AAAA,YAC9D,CAAA;AAAA,UACa,EAAA,GAjBK,CAiBL,CACjB,GAUA,EAAY,aACX,CAAC,EAAY,eACb,CAAC,EAAY,kBAAkB,gBAAA,EAAC,IAAD,EAA2B,aAAA,EAAc,CAAA,CACtE,EAAA,CAAA;AAAA,QACD,CAAA,CACO,EAAA,CAAA;AAAA,MAEb,EAAA,CAAA;AAAA,MAER,KAAQ,KACP,gBAAA,EAAC,IAAD;AAAA,QACE,WAAW,GACT,GAAc,WAAW,CAAA,GAAmB,MAC5C,GAAkB,KACpB;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,SAAS,EAAK,QAAQ;AAAA,YACtB,kBAAkB,EAAe,EAAK,QAAQ,gBAAgB,KAAK;AAAA,UACrE;AAAA,UACA,OAAO,EAA0B,UAAU,SAAS;AAAA,UACpD,MAAM,EAAa;AAAA,UACnB,QAAQ;AAAA,YAAE,QAAQ;AAAA,YAAI,MAAM;AAAA,YAAI,OAAO;AAAA,YAAI,KAAK;AAAA,UAAG;AAAA,UACnD,oBAAoB,EAAa,QAAQ;AAAA,UACzC,YAAA,CAAa,MAAU;AACrB,YAAA,EAAoB,CAAK;AAAA,UAC3B;AAAA,UACA,kBAAkB,EAAa,QAAQ;AAAA,UACvC,gBAAgB;AAAA,QAClB;AAAA,QACA,MAAM;AAAA,UACJ,SAAS,EAAK;AAAA,UACd,YAAY;AAAA,YACV,eAAe,EAAY,iBAAiB;AAAA,YAC5C,eAAe,EAAY,iBAAiB;AAAA,YAC5C,aAAa,EAAY,eAAe;AAAA,UAC1C;AAAA,QACF;AAAA,QACA,MAAM,EAAa;AAAA,QACnB,sBAAsB;AAAA,QACtB,MACE,gBAAA,EAAC,GAAD;AAAA,UACE,KAAK,EAAY,eAAe;AAAA,UAChC,cAAc,EAAY,iBAAiB;AAAA,UAC3C,cAAc,EAAY,iBAAiB;AAAA,UAC3C,MAAM;AAAA,QACP,CAAA;AAAA,QAEH,QAAQ;AAAA,QACR,SAAA,MAAe;AACb,UAAA,EAAkC,EAAK,GACvC,EAAoB,EAAc,WAAW,SAAS,CAAC;AAAA,QACzD;AAAA,QACA,aAAA,CAAc,MAAkB;AAC9B,UAAA,EAAoB,CAAK;AAAA,QAC3B;AAAA,QACA,YACG,IASG,SARA;AAAA,UACE,SAAS,EACP,EAAa,QAAQ,qBACrB,gBAAA,EAAC,UAAD,EAAA,UAAS,EAAa,QAAQ,kBAA0B,CAAA,GACxD,gBAAA,EAAC,UAAD,EAAA,UAAS,EAAK,qBAAqB,YAAoB,CAAA,CACzD;AAAA,UACA,WAAA,MAAiB,EAAmB,EAAI;AAAA,QAC1C;AAAA,QAGN,OAAO,EAAa,QAAQ;AAAA,QAC5B,sBAAsB;AAAA,UACpB,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,aAAa;AAAA,QACf;AAAA,MACD,CAAA;AAAA,MAEH,gBAAA,EAAC,IAAD;AAAA,QACE,cAAc;AAAA,UAAE,UAAU;AAAA,UAAU,YAAY;AAAA,QAAQ;AAAA,QACxD,kBAAkB;AAAA,QAClB,SAAA,MAAe,EAAS,EAAE;AAAA,QAC1B,MAAM,EAAQ;AAAA,QAEd,UAAA,gBAAA,EAAC,IAAD;AAAA,UAAO,WAAU;AAAA,UAAG,SAAA,MAAe,EAAS,EAAE;AAAA,UAAG,UAAS;AAAA,UAAU,SAAQ;AAAA,UACzE,UAAA;AAAA,QACI,CAAA;AAAA,MACC,CAAA;AAAA,IACP;AAAA;AAET,GAEA,KAAe,GAAS,EAAkB"}
+{"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, TransactionType } 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 isCredit = transaction?.transaction_type === TransactionType.CREDIT\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={isCredit ? 'success.main' : 'text.primary'} variant=\"h1\">\n                {isCredit ? '+' : ''}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAM,KAAA,CAAyD,EAC7D,eAAA,IAAgB,IAChB,oBAAA,IAAqB,IACrB,YAAA,IAAa,IACb,aAAA,EAAA,MACI;AACJ,QAAM,EAAE,SAAA,EAAA,IAAY,GAAS,GACvB,EAAE,cAAA,EAAA,IAAiB,GAAiB,GACpC,EAAE,cAAA,EAAA,IAAiB,GAAa,GAChC,EAAE,UAAU,GAAM,QAAQ,GAAY,eAAe,EAAA,IAAiB,GAAmB,GAEzF,EAAE,oBAAA,EAAA,IAAuB,GAAiB,GAC1C,EACJ,OAAA,GACA,iBAAA,GACA,sBAAA,GACA,iBAAA,GACA,kCAAA,GACA,UAAA,EAAA,IACE,GAAoB,GAElB,CAAC,GAAgC,CAAA,IAAqC,EAAM,SAAS,EAAK,GAE1F,CAAC,GAAW,CAAA,IAAgB,EAAM,SAAS,EAAK,GAChD,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,EAAK,GAC5D,IAAQ,GAAS,GAEjB,IAAiB,GAAa,UAAU,EAAY,OAAO,SAAS,GAEpE,IAAW,GAAa,qBAAqB,GAAgB,QAE7D,IAAO,EAAM,QAAA,MACV,EAAgB,KAAA,CAAM,MAAS,EAAK,gCAAgC,EAAY,IAAI,GAC1F,CAAC,GAAiB,CAAW,CAAC,GAE3B,IAAe,GAAuC,GAAY,CAAI,GAEtE,CAAC,GAAkB,CAAA,IAAuB,EAAM,SACpD,IAAe,EAAa,WAAW,SAAS,IAAI,CACtD;AAEA,EAAA,EAAM,UAAA,MAEF,EAAQ,GAAiB,0BAA0B,EAAE,kBAAkB,EAAY,KAAK,CAAC,GAC3F,CAAC,CACH,GAEA,EAAM,UAAA,MAAgB;AACpB,QAAI,CAAC,KAAgB,EAAa,WAAW,WAAW,EAAG;AAE3D,UAAM,EAAE,MAAM,EAAA,IAA2B,EAAa,WAAW,CAAA,GAE3D,IAAQ,EAAa,CAAsB;AAEjD,IAAI,GAAS,GAAO,CAAe,MACjC,EAAa,EAAI,GACjB,EAAiC,CAAK,EAAE,QAAA,MAAc;AACpD,MAAA,EAAa,EAAK;AAAA,IACpB,CAAC;AAAA,EAEL,GAAG;AAAA,IAAC;AAAA,IAAkB;AAAA,IAAc;AAAA,EAAe,CAAC;AAGpD,QAAM,IACJ,EAAc,SAAS,EAAc,cAAc,KAAK,CAAC,GAAa,gBAClE,EAAc,OAAA,CAAQ,MAAW,MAAW,EAAc,cAAc,IACxE,GAEA,IAA2B,EAAA,MAAc;AAC7C,QAAI,GAAc;AAChB,YAAM,IAAW,EAAmB,KAAA,CACjC,MAAQ,EAAI,SAAS,EAAY,uBACpC,GACM,IAAO,GAAM,SAAS,kBAAkB,GACxC,IAAgB,EAAY;AAElC,UAAI,IAAa,EAAa,QAAQ;AACtC,aAAI,IAAgB,IAAO,MACzB,IAAa,EAAa,QAAQ,iBAK7B;AAAA,QAAE,UAAA;AAAA,QAAU,kBAFjB,MAAS,IAAI,IAAI,KAAK,MAAO,KAAK,IAAI,IAAgB,CAAI,IAAI,IAAQ,GAAG;AAAA,QAEtC,YAAA;AAAA,MAAW;AAAA,IAClD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,GAAc,CAAkB,CAAC,GAE/B,KAAuB,EAAA,MAAc;AACzC,QAAI,CAAC,GAAc,YAAY,OAC7B,QAAO,CAAC;AAGV,UAAM,EAAE,MAAM,GAAwB,MAAM,EAAA,IAC1C,EAAa,WAAW,CAAA,GAEpB,IAAQ,EAAa,CAAsB,GAC3C,IAAM,GAAW,CAAsB;AAE7C,WAAO,EAAqB,OAAA,CAAQ,MAAM;AACxC,YAAM,IAAkB,GAAY,EAAE,IAAI;AAC1C,aAAO,KAAmB,KAAS,KAAmB,KAAO,EAAE,SAAS;AAAA,IAC1E,CAAC;AAAA,EACH,GAAG;AAAA,IAAC;AAAA,IAAkB;AAAA,IAAc;AAAA,IAAsB;AAAA,EAAS,CAAC;AAEpE,MAAI,CAAC,EACH,QAAO,gBAAA,EAAC,IAAD,CAAS,CAAA;AAGlB,QAAM,IAAyB,GAAiB,GAAc,0BAA0B,GAElF,KAAU,EAAM,QAAQ,SAAS,SAAS,aAAa;AAE7D,SACE,gBAAA,EAAC,IAAD;AAAA,IAAK,WAAU;AAAA,IAA6B,OAAM;AAAA,IAAlD,UAAA;AAAA,MACG,KACC,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAO,KAAK;AAAA,UAAI,GAAG;AAAA,UAAnB,UAAA;AAAA,YACE,gBAAA,EAAC,GAAD;AAAA,cAAO,WAAW;AAAA,cAAG,IAAI,EAAE,OAAO,GAAG;AAAA,cACnC,UAAA,gBAAA,EAAC,GAAD;AAAA,gBACE,cAAc,EAAY,2BAA2B;AAAA,gBACrD,cAAc,EAAY,iBAAiB;AAAA,gBAC3C,MAAM;AAAA,cACP,CAAA;AAAA,YACI,CAAA;AAAA,YAEP,gBAAA,EAAC,IAAD;AAAA,cAA0B,aAAA;AAAA,cAAa,UAAU;AAAA,YAAyB,CAAA;AAAA,YAE1E,gBAAA,EAAC,GAAD;AAAA,cAAO,WAAU;AAAA,cAAM,gBAAe;AAAA,cAAgB,IAAI,EAAE,WAAW,GAAG;AAAA,cAA1E,UAAA,CACE,gBAAA,EAAC,IAAD;AAAA,gBAAG,OAAO,IAAW,iBAAiB;AAAA,gBAAgB,SAAQ;AAAA,gBAA9D,UAAA,CACG,IAAW,MAAM,IACjB,EAAe,EAAY,QAAQ,QAAQ,CAC3C;AAAA,cACF,CAAA,GAAA,CAAC,KAA0B,KAC1B,gBAAA,EAAC,IAAD,EAA8B,aAAA,EAAc,CAAA,CAEzC;AAAA;YAEN,GAAc,gBACb,gBAAA,EAAC,IAAD;AAAA,cACE,cAAc,EAAa;AAAA,cAC3B,aACE,EACE,EAAa,QAAQ,sBACrB,EAA0B,YAC1B,gBAAA,EAAC,UAAD,EAAA,UAAS,EAA0B,iBAAyB,CAAA,CAC9D;AAAA,cAEF,cAAc,EAAa;AAAA,cAC3B,YAAA,MAAkB;AAChB,gBAAA,EAAkC,EAAI;AAAA,cACxC;AAAA,cACA,OAAO,EAAM;AAAA,YACd,CAAA;AAAA,YAEH,gBAAA,EAAC,GAAD;AAAA,cAAO,IAAI;AAAA,gBAAE,SAAS;AAAA,gBAAS,cAAc;AAAA,gBAAO,KAAK;AAAA,gBAAG,GAAG;AAAA,cAAE;AAAA,cAAjE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,gBAAM,MAAM;AAAA,gBACT,UAAA,GAAG,EAAY,OAAA;AAAA,kBAEd,IACI,EAAY,SACZ,IAAS,OAAO,CAAC,EAAE,OAAO,EAAY,UAAU,EAAE,CAAA;AAAA,cAEpD,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,gBAAM,MAAM;AAAA,gBAAM,UAAU;AAAA,gBAAM,SAAQ;AAAA,gBACvC,UAAA,EAAY;AAAA,cACT,CAAA,CACD;AAAA;UACF;AAAA;QAEP,gBAAA,EAAC,GAAD;AAAA,UAAO,QAAQ;AAAA,UAAM,IAAI,EAAE,WAAW,OAAO;AAAA,UAC1C,UAAA,IACC,gBAAA,EAAC,IAAD,EAAqC,aAAA,EAAc,CAAA,IAEnD,gBAAA,EAAC,GAAD,EAAA,UACG,EAAW,IAAA,CAAK,GAAQ,MACvB,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA;AAAA,YACG,MAAW,EAAW,YAAY,gBAAA,EAAC,IAAD,EAA6B,aAAA,EAAc,CAAA;AAAA,YAC7E,MAAW,EAAW,QAAQ,gBAAA,EAAC,IAAD,EAAyB,aAAA,EAAc,CAAA;AAAA,YACrE,MAAW,EAAW,QAAQ,gBAAA,EAAC,IAAD,EAAyB,aAAA,EAAc,CAAA;AAAA,YACrE,MAAW,EAAW,QAAQ,gBAAA,EAAC,IAAD,EAAyB,aAAA,EAAc,CAAA;AAAA,YACtE,gBAAA,EAAC,GAAD;AAAA,cACE,WAAU;AAAA,cACV,SAAS,IAAQ,EAAW,SAAS,IAAI,UAAU;AAAA,YACpD,CAAA;AAAA,UACa,EAAA,GATK,CASL,CACjB,EACG,CAAA;AAAA,QAEH,CAAA;AAAA,QAEN,CAAC,KAA0B,EAAqB,SAAS,KACxD,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,IAAI;AAAA,UAAG,IAAI;AAAA,UAAI,IAAI;AAAA,UAAI,SAAQ;AAAA,UAC9C,UAAA,EAAK;AAAA,QACF,CAAA,GAEN,gBAAA,EAAC,GAAD;AAAA,UAAO,QAAQ;AAAA,UAAM,IAAI,EAAE,WAAW,OAAO;AAAA,UAC3C,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAA,CACG,EAAqB,IAAA,CAAK,GAAQ,MACjC,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA;AAAA,YACG,MAAW,EAAc,kBACxB,gBAAA,EAAC,IAAD,EAAsC,aAAA,EAAc,CAAA;AAAA,YAErD,MAAW,EAAc,oBACxB,gBAAA,EAAC,IAAD,EAA0B,aAAA,EAAc,CAAA;AAAA,YAEzC,MAAW,EAAc,mBACxB,gBAAA,EAAC,IAAD,EAA4B,aAAA,EAAc,CAAA;AAAA,YAE3C,MAAW,EAAc,gBACxB,gBAAA,EAAC,IAAD,EAA+B,aAAA,EAAc,CAAA;AAAA,YAE/C,gBAAA,EAAC,GAAD;AAAA,cACE,WAAU;AAAA,cACV,SAAS,IAAQ,EAAqB,SAAS,IAAI,UAAU;AAAA,YAC9D,CAAA;AAAA,UACa,EAAA,GAjBK,CAiBL,CACjB,GAUA,EAAY,aACX,CAAC,EAAY,eACb,CAAC,EAAY,kBAAkB,gBAAA,EAAC,IAAD,EAA2B,aAAA,EAAc,CAAA,CACtE,EAAA,CAAA;AAAA,QACD,CAAA,CACO,EAAA,CAAA;AAAA,MAEb,EAAA,CAAA;AAAA,MAER,KAAQ,KACP,gBAAA,EAAC,IAAD;AAAA,QACE,WAAW,GACT,GAAc,WAAW,CAAA,GAAmB,MAC5C,GAAkB,KACpB;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,SAAS,EAAK,QAAQ;AAAA,YACtB,kBAAkB,EAAe,EAAK,QAAQ,gBAAgB,KAAK;AAAA,UACrE;AAAA,UACA,OAAO,EAA0B,UAAU,SAAS;AAAA,UACpD,MAAM,EAAa;AAAA,UACnB,QAAQ;AAAA,YAAE,QAAQ;AAAA,YAAI,MAAM;AAAA,YAAI,OAAO;AAAA,YAAI,KAAK;AAAA,UAAG;AAAA,UACnD,oBAAoB,EAAa,QAAQ;AAAA,UACzC,YAAA,CAAa,MAAU;AACrB,YAAA,EAAoB,CAAK;AAAA,UAC3B;AAAA,UACA,kBAAkB,EAAa,QAAQ;AAAA,UACvC,gBAAgB;AAAA,QAClB;AAAA,QACA,MAAM;AAAA,UACJ,SAAS,EAAK;AAAA,UACd,YAAY;AAAA,YACV,eAAe,EAAY,iBAAiB;AAAA,YAC5C,eAAe,EAAY,iBAAiB;AAAA,YAC5C,aAAa,EAAY,eAAe;AAAA,UAC1C;AAAA,QACF;AAAA,QACA,MAAM,EAAa;AAAA,QACnB,sBAAsB;AAAA,QACtB,MACE,gBAAA,EAAC,GAAD;AAAA,UACE,KAAK,EAAY,eAAe;AAAA,UAChC,cAAc,EAAY,iBAAiB;AAAA,UAC3C,cAAc,EAAY,iBAAiB;AAAA,UAC3C,MAAM;AAAA,QACP,CAAA;AAAA,QAEH,QAAQ;AAAA,QACR,SAAA,MAAe;AACb,UAAA,EAAkC,EAAK,GACvC,EAAoB,EAAc,WAAW,SAAS,CAAC;AAAA,QACzD;AAAA,QACA,aAAA,CAAc,MAAkB;AAC9B,UAAA,EAAoB,CAAK;AAAA,QAC3B;AAAA,QACA,YACG,IASG,SARA;AAAA,UACE,SAAS,EACP,EAAa,QAAQ,qBACrB,gBAAA,EAAC,UAAD,EAAA,UAAS,EAAa,QAAQ,kBAA0B,CAAA,GACxD,gBAAA,EAAC,UAAD,EAAA,UAAS,EAAK,qBAAqB,YAAoB,CAAA,CACzD;AAAA,UACA,WAAA,MAAiB,EAAmB,EAAI;AAAA,QAC1C;AAAA,QAGN,OAAO,EAAa,QAAQ;AAAA,QAC5B,sBAAsB;AAAA,UACpB,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,aAAa;AAAA,QACf;AAAA,MACD,CAAA;AAAA,MAEH,gBAAA,EAAC,IAAD;AAAA,QACE,cAAc;AAAA,UAAE,UAAU;AAAA,UAAU,YAAY;AAAA,QAAQ;AAAA,QACxD,kBAAkB;AAAA,QAClB,SAAA,MAAe,EAAS,EAAE;AAAA,QAC1B,MAAM,EAAQ;AAAA,QAEd,UAAA,gBAAA,EAAC,IAAD;AAAA,UAAO,WAAU;AAAA,UAAG,SAAA,MAAe,EAAS,EAAE;AAAA,UAAG,UAAS;AAAA,UAAU,SAAQ;AAAA,UACzE,UAAA;AAAA,QACI,CAAA;AAAA,MACC,CAAA;AAAA,IACP;AAAA;AAET,GAEA,KAAe,GAAS,EAAkB"}

package/dist/transactions/components/shared/transactiondetails/TransactionAmountHeader.es.js

@@ -1,39 +1,40 @@
+import { TransactionType as p } from "../../../../core/types/Transaction.es.js";
 import { formatCurrency as u } from "../../../../core/utils/NumberFormatting.es.js";
 import "react";
-import t from "@mui/material/Stack";
-import { MerchantLogo as s, P as p, Text as l } from "@mxenabled/mxui";
+import e from "@mui/material/Stack";
+import { MerchantLogo as l, P as h, Text as f } from "@mxenabled/mxui";
 import { jsx as o, jsxs as r } from "react/jsx-runtime";
-var _ = ({ transaction: a }) => {
-  const { amount: i, description: n, isIncome: e, merchant_guid: c, payee: m, top_level_category_guid: d } = a;
-  return /* @__PURE__ */ r(t, {
+var C = ({ transaction: a }) => {
+  const { amount: i, description: n, merchant_guid: c, payee: m, top_level_category_guid: d, transaction_type: s } = a, t = s === p.CREDIT;
+  return /* @__PURE__ */ r(e, {
     className: "mx-txn-amount-header",
     direction: "row",
     gap: 12,
     px: 16,
     py: 24,
-    children: [/* @__PURE__ */ o(s, {
+    children: [/* @__PURE__ */ o(l, {
       categoryGuid: d || "",
       merchantGuid: c || "",
       size: 64
-    }), /* @__PURE__ */ r(t, {
+    }), /* @__PURE__ */ r(e, {
       overflow: "hidden",
-      children: [/* @__PURE__ */ o(l, {
+      children: [/* @__PURE__ */ o(f, {
         bold: !0,
         mb: 4,
         truncate: !0,
         variant: "body1",
         children: n || m
-      }), /* @__PURE__ */ r(p, {
-        color: e ? "success.main" : "text.primary",
+      }), /* @__PURE__ */ r(h, {
+        color: t ? "success.main" : "text.primary",
         truncate: !0,
         variant: "h1",
-        children: [e ? "+" : "", u(i, "0,0.00")]
+        children: [t ? "+" : "", u(i, "0,0.00")]
       })]
     })]
   });
 };
 export {
-  _ as default
+  C as default
 };
 
 //# sourceMappingURL=TransactionAmountHeader.es.js.map

package/dist/transactions/components/shared/transactiondetails/TransactionAmountHeader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionAmountHeader.es.js","names":[],"sources":["../../../../../src/transactions/components/shared/transactiondetails/TransactionAmountHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\n\nimport type { Transaction } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ninterface TransactionAmountHeaderProps {\n  transaction: Transaction\n}\n\nconst TransactionAmountHeader: React.FC<TransactionAmountHeaderProps> = ({ transaction }) => {\n  const { amount, description, isIncome, merchant_guid, payee, top_level_category_guid } =\n    transaction\n\n  return (\n    <Stack className=\"mx-txn-amount-header\" direction=\"row\" gap={12} px={16} py={24}>\n      <MerchantLogo\n        categoryGuid={top_level_category_guid || ''}\n        merchantGuid={merchant_guid || ''}\n        size={64}\n      />\n      <Stack overflow=\"hidden\">\n        <Text bold={true} mb={4} truncate={true} variant=\"body1\">\n          {description || payee}\n        </Text>\n        <P color={isIncome ? 'success.main' : 'text.primary'} truncate={true} variant=\"h1\">\n          {isIncome ? '+' : ''}\n          {formatCurrency(amount, '0,0.00')}\n        </P>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default TransactionAmountHeader\n"],"mappings":";;;;;AAaA,IAAM,IAAA,CAAmE,EAAE,aAAA,EAAA,MAAkB;AAC3F,QAAM,EAAE,QAAA,GAAQ,aAAA,GAAa,UAAA,GAAU,eAAA,GAAe,OAAA,GAAO,yBAAA,EAAA,IAC3D;AAEF,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,WAAU;AAAA,IAAuB,WAAU;AAAA,IAAM,KAAK;AAAA,IAAI,IAAI;AAAA,IAAI,IAAI;AAAA,IAA7E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAc,KAA2B;AAAA,MACzC,cAAc,KAAiB;AAAA,MAC/B,MAAM;AAAA,IACP,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MAAO,UAAS;AAAA,MAAhB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,IAAI;AAAA,QAAG,UAAU;AAAA,QAAM,SAAQ;AAAA,QAC9C,UAAA,KAAe;AAAA,MACZ,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAO,IAAW,iBAAiB;AAAA,QAAgB,UAAU;AAAA,QAAM,SAAQ;AAAA,QAA9E,UAAA,CACG,IAAW,MAAM,IACjB,EAAe,GAAQ,QAAQ,CAC/B;AAAA,MACE,CAAA,CAAA;AAAA,IACF,CAAA,CAAA;AAAA;AAEX"}
+{"version":3,"file":"TransactionAmountHeader.es.js","names":[],"sources":["../../../../../src/transactions/components/shared/transactiondetails/TransactionAmountHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\n\nimport { type Transaction, TransactionType } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ninterface TransactionAmountHeaderProps {\n  transaction: Transaction\n}\n\nconst TransactionAmountHeader: React.FC<TransactionAmountHeaderProps> = ({ transaction }) => {\n  const { amount, description, merchant_guid, payee, top_level_category_guid, transaction_type } =\n    transaction\n\n  const isCredit = transaction_type === TransactionType.CREDIT\n\n  return (\n    <Stack className=\"mx-txn-amount-header\" direction=\"row\" gap={12} px={16} py={24}>\n      <MerchantLogo\n        categoryGuid={top_level_category_guid || ''}\n        merchantGuid={merchant_guid || ''}\n        size={64}\n      />\n      <Stack overflow=\"hidden\">\n        <Text bold={true} mb={4} truncate={true} variant=\"body1\">\n          {description || payee}\n        </Text>\n        <P color={isCredit ? 'success.main' : 'text.primary'} truncate={true} variant=\"h1\">\n          {isCredit ? '+' : ''}\n          {formatCurrency(amount, '0,0.00')}\n        </P>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default TransactionAmountHeader\n"],"mappings":";;;;;;AAaA,IAAM,IAAA,CAAmE,EAAE,aAAA,EAAA,MAAkB;AAC3F,QAAM,EAAE,QAAA,GAAQ,aAAA,GAAa,eAAA,GAAe,OAAA,GAAO,yBAAA,GAAyB,kBAAA,EAAA,IAC1E,GAEI,IAAW,MAAqB,EAAgB;AAEtD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,WAAU;AAAA,IAAuB,WAAU;AAAA,IAAM,KAAK;AAAA,IAAI,IAAI;AAAA,IAAI,IAAI;AAAA,IAA7E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAc,KAA2B;AAAA,MACzC,cAAc,KAAiB;AAAA,MAC/B,MAAM;AAAA,IACP,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MAAO,UAAS;AAAA,MAAhB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,IAAI;AAAA,QAAG,UAAU;AAAA,QAAM,SAAQ;AAAA,QAC9C,UAAA,KAAe;AAAA,MACZ,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAO,IAAW,iBAAiB;AAAA,QAAgB,UAAU;AAAA,QAAM,SAAQ;AAAA,QAA9E,UAAA,CACG,IAAW,MAAM,IACjB,EAAe,GAAQ,QAAQ,CAC/B;AAAA,MACE,CAAA,CAAA;AAAA,IACF,CAAA,CAAA;AAAA;AAEX"}

package/dist/transactions/components/shared/transactiondetails/TransactionDetailsView.es.js

@@ -1,20 +1,20 @@
 import { DATE_FORMATS_INTL as p, formatDate as g } from "../../../../core/constants/DateFormats.es.js";
 import { useGlobalCopyStore as u, useTransactionStore as f } from "../../../../common/context/hooks.es.js";
-import { fromUnixUTC as y } from "../../../../core/utils/DateUtil.es.js";
+import { fromUnixUTC as _ } from "../../../../core/utils/DateUtil.es.js";
 import c from "react";
-import { observer as _ } from "mobx-react-lite";
+import { observer as y } from "mobx-react-lite";
 import { CategoryIcon as h, CategoryIconVariants as x, Icon as s, Text as i } from "@mxenabled/mxui";
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import v from "@mui/material/Divider";
 import b from "@mui/material/List";
 import T from "@mui/material/ListItem";
 import I from "@mui/material/ListItemText";
-import A from "@mui/material/Avatar";
-import D from "@mui/material/ListItemAvatar";
+import L from "@mui/material/Avatar";
+import A from "@mui/material/ListItemAvatar";
 var m = (t, e, o, l = !0, n = "inset") => l ? /* @__PURE__ */ d(c.Fragment, { children: [/* @__PURE__ */ d(T, {
   disableGutters: !0,
   disablePadding: !0,
-  children: [/* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(A, {
+  children: [/* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(L, {
     sx: { bgcolor: "neutral.light" },
     variant: "rounded",
     children: t
@@ -27,7 +27,7 @@ var m = (t, e, o, l = !0, n = "inset") => l ? /* @__PURE__ */ d(c.Fragment, { ch
       fontWeight: "normal"
     } }
   })]
-}), /* @__PURE__ */ r(v, { variant: n })] }) : null, L = ({ transaction: t }) => {
+}), /* @__PURE__ */ r(v, { variant: n })] }) : null, D = ({ transaction: t }) => {
   const { transactions: e } = u(), { tags: o } = f(), l = c.useMemo(() => {
     const n = new Map(o.map((a) => [a.guid, a.name]));
     return t.tags.map((a) => n.get(a)).filter(Boolean).join(" / ");
@@ -54,7 +54,7 @@ var m = (t, e, o, l = !0, n = "inset") => l ? /* @__PURE__ */ d(c.Fragment, { ch
       }), e.date_title, /* @__PURE__ */ r(i, {
         bold: !0,
         variant: "body1",
-        children: g(y(t.date), p.YEAR_MONTH_DAY)
+        children: g(_(t.date), p.FULL_MONTH_DAY_YEAR)
       })),
       m(/* @__PURE__ */ r(s, {
         name: "article",
@@ -74,9 +74,9 @@ var m = (t, e, o, l = !0, n = "inset") => l ? /* @__PURE__ */ d(c.Fragment, { ch
       }), !!t.tags?.length, "fullWidth")
     ]
   });
-}, F = _(L);
+}, z = y(D);
 export {
-  F as default
+  z as default
 };
 
 //# sourceMappingURL=TransactionDetailsView.es.js.map

package/dist/transactions/components/shared/transactiondetails/TransactionDetailsView.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionDetailsView.es.js","names":[],"sources":["../../../../../src/transactions/components/shared/transactiondetails/TransactionDetailsView.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Avatar from '@mui/material/Avatar'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemText from '@mui/material/ListItemText'\n\nimport { CategoryIcon, CategoryIconVariants, Icon, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore, useTransactionStore } from '../../../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport { fromUnixUTC } from '../../../../core/utils/DateUtil'\nimport { type Transaction } from '../../../../core'\n\ninterface TransactionDetailsViewProps {\n  transaction: Transaction\n}\n\nconst renderItem = (\n  icon: React.ReactNode,\n  primary: string,\n  secondary: React.ReactNode,\n  show: boolean = true,\n  dividerVariant: 'inset' | 'fullWidth' = 'inset',\n) => {\n  if (!show) return null\n  return (\n    <React.Fragment>\n      <ListItem disableGutters={true} disablePadding={true}>\n        <ListItemAvatar>\n          <Avatar sx={{ bgcolor: 'neutral.light' }} variant=\"rounded\">\n            {icon}\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText\n          primary={primary}\n          secondary={secondary}\n          slotProps={{ primary: { variant: 'caption', fontSize: 11, fontWeight: 'normal' } }}\n        />\n      </ListItem>\n      <Divider variant={dividerVariant} />\n    </React.Fragment>\n  )\n}\n\nconst TransactionDetailsView = ({ transaction }: TransactionDetailsViewProps) => {\n  const { transactions: copy } = useGlobalCopyStore()\n  const { tags } = useTransactionStore()\n\n  const tagNames = React.useMemo(() => {\n    const tagMap = new Map(tags.map((tag) => [tag.guid, tag.name]))\n\n    return transaction.tags\n      .map((tagGuid) => tagMap.get(tagGuid))\n      .filter(Boolean)\n      .join(' / ')\n  }, [tags, transaction.tags])\n\n  return (\n    <List sx={{ '& .MuiListItem-root': { px: 24, py: 12 } }}>\n      {renderItem(\n        <CategoryIcon\n          categoryGuid={transaction.top_level_category_guid}\n          size={24}\n          sx={{ color: 'text.primary' }}\n          variant={CategoryIconVariants.Transparent}\n        />,\n        copy.category_title,\n        <Text bold={true} variant=\"body1\">\n          {transaction.category ?? copy.actions_select_a_category}\n        </Text>,\n      )}\n\n      {renderItem(\n        <Icon name=\"calendar_month\" sx={{ color: 'text.primary' }} />,\n        copy.date_title,\n        <Text bold={true} variant=\"body1\">\n          {formatDate(fromUnixUTC(transaction.date), DATE_FORMATS_INTL.YEAR_MONTH_DAY)}\n        </Text>,\n      )}\n\n      {renderItem(\n        <Icon name=\"article\" sx={{ color: 'text.primary' }} />,\n        copy.memo_title,\n        <Text bold={true} variant=\"body1\">\n          {transaction.memo ?? copy.memo_desc}\n        </Text>,\n        Boolean(transaction.memo),\n        transaction.tags?.length > 0 ? 'inset' : 'fullWidth',\n      )}\n\n      {renderItem(\n        <Icon name=\"local_offer\" sx={{ color: 'text.primary' }} />,\n        copy.tags_title,\n        <Text bold={true} variant=\"body1\">\n          {transaction.tags?.length ? tagNames : copy.tags_desc}\n        </Text>,\n        Boolean(transaction.tags?.length),\n        'fullWidth',\n      )}\n    </List>\n  )\n}\n\nexport default observer(TransactionDetailsView)\n"],"mappings":"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"}
+{"version":3,"file":"TransactionDetailsView.es.js","names":[],"sources":["../../../../../src/transactions/components/shared/transactiondetails/TransactionDetailsView.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Avatar from '@mui/material/Avatar'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemText from '@mui/material/ListItemText'\n\nimport { CategoryIcon, CategoryIconVariants, Icon, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore, useTransactionStore } from '../../../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport { fromUnixUTC } from '../../../../core/utils/DateUtil'\nimport { type Transaction } from '../../../../core'\n\ninterface TransactionDetailsViewProps {\n  transaction: Transaction\n}\n\nconst renderItem = (\n  icon: React.ReactNode,\n  primary: string,\n  secondary: React.ReactNode,\n  show: boolean = true,\n  dividerVariant: 'inset' | 'fullWidth' = 'inset',\n) => {\n  if (!show) return null\n  return (\n    <React.Fragment>\n      <ListItem disableGutters={true} disablePadding={true}>\n        <ListItemAvatar>\n          <Avatar sx={{ bgcolor: 'neutral.light' }} variant=\"rounded\">\n            {icon}\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText\n          primary={primary}\n          secondary={secondary}\n          slotProps={{ primary: { variant: 'caption', fontSize: 11, fontWeight: 'normal' } }}\n        />\n      </ListItem>\n      <Divider variant={dividerVariant} />\n    </React.Fragment>\n  )\n}\n\nconst TransactionDetailsView = ({ transaction }: TransactionDetailsViewProps) => {\n  const { transactions: copy } = useGlobalCopyStore()\n  const { tags } = useTransactionStore()\n\n  const tagNames = React.useMemo(() => {\n    const tagMap = new Map(tags.map((tag) => [tag.guid, tag.name]))\n\n    return transaction.tags\n      .map((tagGuid) => tagMap.get(tagGuid))\n      .filter(Boolean)\n      .join(' / ')\n  }, [tags, transaction.tags])\n\n  return (\n    <List sx={{ '& .MuiListItem-root': { px: 24, py: 12 } }}>\n      {renderItem(\n        <CategoryIcon\n          categoryGuid={transaction.top_level_category_guid}\n          size={24}\n          sx={{ color: 'text.primary' }}\n          variant={CategoryIconVariants.Transparent}\n        />,\n        copy.category_title,\n        <Text bold={true} variant=\"body1\">\n          {transaction.category ?? copy.actions_select_a_category}\n        </Text>,\n      )}\n\n      {renderItem(\n        <Icon name=\"calendar_month\" sx={{ color: 'text.primary' }} />,\n        copy.date_title,\n        <Text bold={true} variant=\"body1\">\n          {formatDate(fromUnixUTC(transaction.date), DATE_FORMATS_INTL.FULL_MONTH_DAY_YEAR)}\n        </Text>,\n      )}\n\n      {renderItem(\n        <Icon name=\"article\" sx={{ color: 'text.primary' }} />,\n        copy.memo_title,\n        <Text bold={true} variant=\"body1\">\n          {transaction.memo ?? copy.memo_desc}\n        </Text>,\n        Boolean(transaction.memo),\n        transaction.tags?.length > 0 ? 'inset' : 'fullWidth',\n      )}\n\n      {renderItem(\n        <Icon name=\"local_offer\" sx={{ color: 'text.primary' }} />,\n        copy.tags_title,\n        <Text bold={true} variant=\"body1\">\n          {transaction.tags?.length ? tagNames : copy.tags_desc}\n        </Text>,\n        Boolean(transaction.tags?.length),\n        'fullWidth',\n      )}\n    </List>\n  )\n}\n\nexport default observer(TransactionDetailsView)\n"],"mappings":"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"}

package/dist/transactions/components/shared/transactiondetails/actions/DateAction.es.js

@@ -1,7 +1,7 @@
 import { DATE_FORMATS_INTL as S, formatDate as C } from "../../../../../core/constants/DateFormats.es.js";
 import I, { CalendarSelectionTypes as h } from "../../../../../common/components/calendar/Calendar.es.js";
-import { useEvent as g, useGlobalCopyStore as v, useTransactionStore as D } from "../../../../../common/context/hooks.es.js";
-import L from "../../../../../common/components/drawer/Drawer.es.js";
+import { useEvent as g, useGlobalCopyStore as L, useTransactionStore as v } from "../../../../../common/context/hooks.es.js";
+import D from "../../../../../common/components/drawer/Drawer.es.js";
 import { ANALYTICS_EVENTS as N } from "../../../../../common/constants/Analytics.es.js";
 import { fromUnixUTC as m } from "../../../../../core/utils/DateUtil.es.js";
 import { useTransactionsUiStore as b } from "../../../../context/hooks.es.js";
@@ -11,8 +11,8 @@ import O from "@mui/material/Stack";
 import { Text as R } from "@mxenabled/mxui";
 import { Icon as c } from "@mxenabled/mx-icons";
 import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { useTheme as k } from "@mui/material/styles";
-import { getUnixTime as U } from "date-fns/getUnixTime";
+import { useTheme as U } from "@mui/material/styles";
+import { getUnixTime as k } from "date-fns/getUnixTime";
 import K from "@mui/material/ListItem";
 import M from "@mui/material/ListItemButton";
 import P from "@mui/material/ListItemText";
@@ -20,8 +20,8 @@ import Y from "@mui/material/Avatar";
 import j from "@mui/material/ListItemAvatar";
 import w from "@mui/material/ListItemIcon";
 var st = ({ transaction: e }) => {
-  const { onEvent: n } = g(), { updateTransaction: d } = D(), { updateManualTransaction: p } = b(), { common: r, transactions: o } = v(), f = k(), [_, a] = s.useState(!1), [i, T] = s.useState(e.date), u = (A) => {
-    T(U(A));
+  const { onEvent: n } = g(), { updateTransaction: d } = v(), { updateManualTransaction: p } = b(), { common: r, transactions: o } = L(), f = U(), [_, a] = s.useState(!1), [i, T] = s.useState(e.date), u = (A) => {
+    T(k(A));
   }, y = async () => {
     if (e.is_manual && !e.guid) {
       p({
@@ -58,7 +58,7 @@ var st = ({ transaction: e }) => {
             bold: !0,
             sx: { color: "text.primary" },
             variant: "body1",
-            children: C(m(e.date), S.YEAR_MONTH_DAY)
+            children: C(m(e.date), S.FULL_MONTH_DAY_YEAR)
           }),
           slotProps: { primary: {
             variant: "caption",
@@ -71,7 +71,7 @@ var st = ({ transaction: e }) => {
           sx: { color: "text.primary" }
         }) })
       ]
-    }), /* @__PURE__ */ t(L, {
+    }), /* @__PURE__ */ t(D, {
       ariaLabelClose: r.close_aria,
       isOpen: _,
       onClose: () => a(!1),

package/dist/transactions/components/shared/transactiondetails/actions/DateAction.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateAction.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/actions/DateAction.tsx"],"sourcesContent":["import React from 'react'\nimport { getUnixTime } from 'date-fns/getUnixTime'\n\nimport Avatar from '@mui/material/Avatar'\nimport Stack from '@mui/material/Stack'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport {\n  ANALYTICS_EVENTS,\n  Calendar,\n  CalendarSelectionTypes,\n  Drawer,\n  useEvent,\n  useGlobalCopyStore,\n  useTransactionStore,\n} from '../../../../../common'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../../core/constants'\nimport { fromUnixUTC } from '../../../../../core/utils/DateUtil'\nimport type { Transaction } from '../../../../../core'\n\nimport { useTransactionsUiStore } from '../../../../context/hooks'\nimport { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'\n\ninterface DateActionProps {\n  transaction: Transaction\n}\n\nconst DateAction: React.FC<DateActionProps> = ({ transaction }) => {\n  const { onEvent } = useEvent()\n  const { updateTransaction } = useTransactionStore()\n  const { updateManualTransaction } = useTransactionsUiStore()\n  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()\n\n  const theme = useTheme()\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<number>(transaction.date)\n\n  const handleDateSelected = (date: Date) => {\n    setDate(getUnixTime(date))\n  }\n\n  const handleSave = async () => {\n    if (transaction.is_manual && !transaction.guid) {\n      updateManualTransaction({ ...transaction, date })\n      setOpen(false)\n      return\n    }\n\n    await updateTransaction({ ...transaction, date })\n    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_DATE, { transaction_guid: transaction.guid })\n    setOpen(false)\n  }\n\n  const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n  return (\n    <ListItem className=\"mx-txn-date-action\" disableGutters={true} disablePadding={true}>\n      <ListItemButton\n        onClick={() => {\n          onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DATE_CLICK)\n          setOpen(true)\n        }}\n      >\n        <ListItemAvatar>\n          <Avatar sx={{ bgcolor: bgColor }} variant=\"rounded\">\n            <Icon name=\"calendar_month\" sx={{ color: 'text.primary' }} />\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText\n          primary={copy.date_title}\n          secondary={\n            <Text bold={true} sx={{ color: 'text.primary' }} variant=\"body1\">\n              {formatDate(fromUnixUTC(transaction.date), DATE_FORMATS_INTL.YEAR_MONTH_DAY)}\n            </Text>\n          }\n          slotProps={{ primary: { variant: 'caption', fontSize: 11, fontWeight: 'normal' } }}\n        />\n        <ListItemIcon>\n          <Icon name=\"chevron_right\" sx={{ color: 'text.primary' }} />\n        </ListItemIcon>\n      </ListItemButton>\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={open}\n        onClose={() => setOpen(false)}\n        onPrimaryAction={handleSave}\n        primaryText={commonCopy.save_button}\n        secondaryText={commonCopy.cancel_button}\n        title={copy.date_edit_title}\n      >\n        <Stack alignItems=\"center\" mt={40}>\n          <Calendar\n            beginDate={fromUnixUTC(date)}\n            copy={{\n              nextAria: copy.date_next_aria,\n              prevAria: copy.date_prev_aria,\n              today: commonCopy.date_range_picker.today,\n            }}\n            onDateSelected={handleDateSelected}\n            selectionType={CalendarSelectionTypes.Single}\n          />\n        </Stack>\n      </Drawer>\n    </ListItem>\n  )\n}\n\nexport default DateAction\n"],"mappings":"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"}
+{"version":3,"file":"DateAction.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/actions/DateAction.tsx"],"sourcesContent":["import React from 'react'\nimport { getUnixTime } from 'date-fns/getUnixTime'\n\nimport Avatar from '@mui/material/Avatar'\nimport Stack from '@mui/material/Stack'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport {\n  ANALYTICS_EVENTS,\n  Calendar,\n  CalendarSelectionTypes,\n  Drawer,\n  useEvent,\n  useGlobalCopyStore,\n  useTransactionStore,\n} from '../../../../../common'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../../core/constants'\nimport { fromUnixUTC } from '../../../../../core/utils/DateUtil'\nimport type { Transaction } from '../../../../../core'\n\nimport { useTransactionsUiStore } from '../../../../context/hooks'\nimport { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'\n\ninterface DateActionProps {\n  transaction: Transaction\n}\n\nconst DateAction: React.FC<DateActionProps> = ({ transaction }) => {\n  const { onEvent } = useEvent()\n  const { updateTransaction } = useTransactionStore()\n  const { updateManualTransaction } = useTransactionsUiStore()\n  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()\n\n  const theme = useTheme()\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<number>(transaction.date)\n\n  const handleDateSelected = (date: Date) => {\n    setDate(getUnixTime(date))\n  }\n\n  const handleSave = async () => {\n    if (transaction.is_manual && !transaction.guid) {\n      updateManualTransaction({ ...transaction, date })\n      setOpen(false)\n      return\n    }\n\n    await updateTransaction({ ...transaction, date })\n    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_DATE, { transaction_guid: transaction.guid })\n    setOpen(false)\n  }\n\n  const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n  return (\n    <ListItem className=\"mx-txn-date-action\" disableGutters={true} disablePadding={true}>\n      <ListItemButton\n        onClick={() => {\n          onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DATE_CLICK)\n          setOpen(true)\n        }}\n      >\n        <ListItemAvatar>\n          <Avatar sx={{ bgcolor: bgColor }} variant=\"rounded\">\n            <Icon name=\"calendar_month\" sx={{ color: 'text.primary' }} />\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText\n          primary={copy.date_title}\n          secondary={\n            <Text bold={true} sx={{ color: 'text.primary' }} variant=\"body1\">\n              {formatDate(fromUnixUTC(transaction.date), DATE_FORMATS_INTL.FULL_MONTH_DAY_YEAR)}\n            </Text>\n          }\n          slotProps={{ primary: { variant: 'caption', fontSize: 11, fontWeight: 'normal' } }}\n        />\n        <ListItemIcon>\n          <Icon name=\"chevron_right\" sx={{ color: 'text.primary' }} />\n        </ListItemIcon>\n      </ListItemButton>\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={open}\n        onClose={() => setOpen(false)}\n        onPrimaryAction={handleSave}\n        primaryText={commonCopy.save_button}\n        secondaryText={commonCopy.cancel_button}\n        title={copy.date_edit_title}\n      >\n        <Stack alignItems=\"center\" mt={40}>\n          <Calendar\n            beginDate={fromUnixUTC(date)}\n            copy={{\n              nextAria: copy.date_next_aria,\n              prevAria: copy.date_prev_aria,\n              today: commonCopy.date_range_picker.today,\n            }}\n            onDateSelected={handleDateSelected}\n            selectionType={CalendarSelectionTypes.Single}\n          />\n        </Stack>\n      </Drawer>\n    </ListItem>\n  )\n}\n\nexport default DateAction\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA,IAAM,KAAA,CAAyC,EAAE,aAAA,EAAA,MAAkB;AACjE,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,mBAAA,EAAA,IAAsB,EAAoB,GAC5C,EAAE,yBAAA,EAAA,IAA4B,EAAuB,GACrD,EAAE,QAAQ,GAAY,cAAc,EAAA,IAAS,EAAmB,GAEhE,IAAQ,EAAS,GACjB,CAAC,GAAM,CAAA,IAAW,EAAM,SAAS,EAAK,GACtC,CAAC,GAAM,CAAA,IAAW,EAAM,SAAiB,EAAY,IAAI,GAEzD,IAAA,CAAsB,MAAe;AACzC,IAAA,EAAQ,EAAY,CAAI,CAAC;AAAA,EAC3B,GAEM,IAAa,YAAY;AAC7B,QAAI,EAAY,aAAa,CAAC,EAAY,MAAM;AAC9C,MAAA,EAAwB;AAAA,QAAE,GAAG;AAAA,QAAa,MAAA;AAAA,MAAK,CAAC,GAChD,EAAQ,EAAK;AACb;AAAA,IACF;AAEA,UAAM,EAAkB;AAAA,MAAE,GAAG;AAAA,MAAa,MAAA;AAAA,IAAK,CAAC,GAChD,EAAQ,EAAiB,gCAAgC,EAAE,kBAAkB,EAAY,KAAK,CAAC,GAC/F,EAAQ,EAAK;AAAA,EACf,GAEM,IAAU,EAAM,QAAQ,SAAS,SAAS,aAAa;AAE7D,SACE,gBAAA,EAAC,GAAD;AAAA,IAAU,WAAU;AAAA,IAAqB,gBAAgB;AAAA,IAAM,gBAAgB;AAAA,IAA/E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,SAAA,MAAe;AACb,QAAA,EAAQ,EAAgB,yBAAyB,GACjD,EAAQ,EAAI;AAAA,MACd;AAAA,MAJF,UAAA;AAAA,QAME,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,UAAQ,IAAI,EAAE,SAAS,EAAQ;AAAA,UAAG,SAAQ;AAAA,UACxC,UAAA,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAK;AAAA,YAAiB,IAAI,EAAE,OAAO,eAAe;AAAA,UAAI,CAAA;AAAA,QACtD,CAAA,EACM,CAAA;AAAA,QAChB,gBAAA,EAAC,GAAD;AAAA,UACE,SAAS,EAAK;AAAA,UACd,WACE,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,IAAI,EAAE,OAAO,eAAe;AAAA,YAAG,SAAQ;AAAA,YACtD,UAAA,EAAW,EAAY,EAAY,IAAI,GAAG,EAAkB,mBAAmB;AAAA,UAC5E,CAAA;AAAA,UAER,WAAW,EAAE,SAAS;AAAA,YAAE,SAAS;AAAA,YAAW,UAAU;AAAA,YAAI,YAAY;AAAA,UAAS,EAAE;AAAA,QAClF,CAAA;AAAA,QACD,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAK;AAAA,UAAgB,IAAI,EAAE,OAAO,eAAe;AAAA,QAAI,CAAA,EAC/C,CAAA;AAAA,MACA;AAAA,IAEhB,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MACE,gBAAgB,EAAW;AAAA,MAC3B,QAAQ;AAAA,MACR,SAAA,MAAe,EAAQ,EAAK;AAAA,MAC5B,iBAAiB;AAAA,MACjB,aAAa,EAAW;AAAA,MACxB,eAAe,EAAW;AAAA,MAC1B,OAAO,EAAK;AAAA,MAEZ,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,QAAS,IAAI;AAAA,QAC7B,UAAA,gBAAA,EAAC,GAAD;AAAA,UACE,WAAW,EAAY,CAAI;AAAA,UAC3B,MAAM;AAAA,YACJ,UAAU,EAAK;AAAA,YACf,UAAU,EAAK;AAAA,YACf,OAAO,EAAW,kBAAkB;AAAA,UACtC;AAAA,UACA,gBAAgB;AAAA,UAChB,eAAe,EAAuB;AAAA,QACvC,CAAA;AAAA,MACI,CAAA;AAAA,IACD,CAAA,CACA;AAAA;AAEd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.3.4",
+  "version": "9.3.6",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",